feat(MultiAddSelect): add floating ui to sort and filter buttons

cspell.json

@@ -1,11 +1,7 @@
 {
   "version": "0.1",
   "language": "en",
-  "dictionaries": [
-    "contributors",
-    "html",
-    "packages"
-  ],
+  "dictionaries": ["contributors", "html", "packages"],
   "dictionaryDefinitions": [
     {
       "name": "contributors",

packages/ibm-products/src/components/AddSelect/AddSelectColumn.js

@@ -7,7 +7,14 @@
 
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Search, Tag, OverflowMenu, Checkbox, usePrefix } from '@carbon/react';
+import {
+  Search,
+  Tag,
+  OverflowMenu,
+  Checkbox,
+  usePrefix,
+  unstable_FeatureFlags as FeatureFlags,
+} from '@carbon/react';
 import { Filter } from '@carbon/react/icons';
 import { pkg } from '../../settings';
 import { AddSelectList } from './AddSelectList';
@@ -139,33 +146,38 @@ export let AddSelectColumn = ({
               sortByLabel={sortByLabel}
             />
             {filterByOpts.length > 0 && (
-              <OverflowMenu
-                renderIcon={(props) => <Filter size={32} {...props} />}
-                className={`${colClass}-overflow`}
-                flipped
-                aria-label={filterByLabel}
-                iconDescription={filterByLabel}
-              >
-                {filterByOpts.map((opt) => (
-                  <div
-                    key={opt}
-                    className={`${carbonPrefix}--overflow-menu-options__option`}
-                  >
+              <FeatureFlags enableV12Overflowmenu>
+                <OverflowMenu
+                  autoAlign
+                  menuAlignment="bottom-end"
+                  renderIcon={(props) => <Filter size={32} {...props} />}
+                  className={`${colClass}-overflow`}
+                  aria-label={filterByLabel}
+                  iconDescription={filterByLabel}
+                >
+                  {filterByOpts.map((opt) => (
                     <div
-                      className={`${carbonPrefix}--overflow-menu-options__btn`}
+                      key={opt}
+                      className={`${carbonPrefix}--overflow-menu-options__option`}
                     >
-                      <Checkbox
-                        id={opt}
-                        labelText={opt}
-                        onChange={(event, { checked }) =>
-                          filterHandler(checked, opt)
-                        }
-                        checked={filters.find((o) => o === opt) ? true : false}
-                      />
+                      <div
+                        className={`${carbonPrefix}--overflow-menu-options__btn`}
+                      >
+                        <Checkbox
+                          id={opt}
+                          labelText={opt}
+                          onChange={(event, { checked }) =>
+                            filterHandler(checked, opt)
+                          }
+                          checked={
+                            filters.find((o) => o === opt) ? true : false
+                          }
+                        />
+                      </div>
                     </div>
-                  </div>
-                ))}
-              </OverflowMenu>
+                  ))}
+                </OverflowMenu>
+              </FeatureFlags>
             )}
           </div>
         </div>

packages/ibm-products/src/components/AddSelect/AddSelectSort.tsx

@@ -7,7 +7,11 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { OverflowMenu, OverflowMenuItem } from '@carbon/react';
+import {
+  OverflowMenu,
+  MenuItem,
+  unstable_FeatureFlags as FeatureFlags,
+} from '@carbon/react';
 import { ArrowsVertical, ArrowUp, ArrowDown } from '@carbon/react/icons';
 import { pkg } from '../../settings';
 import { SortOption } from './types';
@@ -33,23 +37,15 @@ export const AddSelectSort = ({
         const opts = [
           {
             id: `${cur}-asc`,
-            itemText: (
-              <>
-                <ArrowUp size={16} />
-                {cur}
-              </>
-            ),
+            label: cur,
+            shortcut: <ArrowUp size={16} />,
             direction: 'asc',
             attribute: cur,
           },
           {
             id: `${cur}-desc`,
-            itemText: (
-              <>
-                <ArrowDown size={16} />
-                {cur}
-              </>
-            ),
+            label: cur,
+            shortcut: <ArrowDown size={16} />,
             direction: 'desc',
             attribute: cur,
           },
@@ -67,24 +63,28 @@ export const AddSelectSort = ({
   return (
     <div className={blockClass}>
       {sortByOpts.length > 0 && (
-        <OverflowMenu
-          renderIcon={(props) => <ArrowsVertical size={32} {...props} />}
-          className={`${blockClass}_overflow`}
-          flipped
-          aria-label={sortByLabel}
-          iconDescription={sortByLabel}
-        >
-          {sortByOpts.map((opt) => {
-            return (
-              <OverflowMenuItem
-                className={`${blockClass}_overflow-item`}
-                key={opt?.id}
-                itemText={opt?.itemText}
-                onClick={() => sortHandler(opt)}
-              />
-            );
-          })}
-        </OverflowMenu>
+        <FeatureFlags enableV12Overflowmenu>
+          <OverflowMenu
+            autoAlign
+            menuAlignment="bottom-end"
+            renderIcon={(props) => <ArrowsVertical size={32} {...props} />}
+            className={`${blockClass}_overflow`}
+            aria-label={sortByLabel}
+            iconDescription={sortByLabel}
+          >
+            {sortByOpts.map((opt) => {
+              return (
+                <MenuItem
+                  className={`${blockClass}_overflow-item`}
+                  shortcut={opt?.shortcut}
+                  key={opt?.id}
+                  label={opt?.label}
+                  onClick={() => sortHandler(opt)}
+                />
+              );
+            })}
+          </OverflowMenu>
+        </FeatureFlags>
       )}
     </div>
   );

packages/ibm-products/src/components/AddSelect/types/index.ts

@@ -55,5 +55,6 @@ export interface SortOption {
   id?: string;
   direction?: string;
   attribute?: string;
-  itemText?: ReactNode;
+  label?: string;
+  shortcut?: ReactNode;
 }