@carbon/react 1.65.0 → 1.66.0

package/lib/components/ListBox/next/ListBoxSelection.d.ts

@@ -0,0 +1,106 @@
+/**
+ * Copyright IBM Corp. 2016, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+/**
+ * `ListBoxSelection` is used to provide controls for clearing a selection, in
+ * addition to conditionally rendering a badge if the control has more than one
+ * selection.
+ */
+export declare const translationIds: {
+    readonly 'clear.all': "clear.all";
+    readonly 'clear.selection': "clear.selection";
+};
+export type TranslationKey = keyof typeof translationIds;
+export interface ListBoxSelectionProps {
+    /**
+     * Specify a function to be invoked when a user interacts with the clear
+     * selection element.
+     */
+    clearSelection: (event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
+    /**
+     * Specify an optional `selectionCount` value that will be used to determine
+     * whether the selection should display a badge or a single clear icon.
+     */
+    selectionCount?: number;
+    /**
+     * i18n hook used to provide the appropriate description for the given menu
+     * icon. This function takes in an id defined in `translationIds` and should
+     * return a string message for that given message id.
+     */
+    translateWithId?: (id: TranslationKey) => string;
+    /**
+     * Specify whether or not the clear selection element should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Specify an optional `onClearSelection` handler that is called when the underlying
+     * element is cleared
+     */
+    onClearSelection?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Specify an optional `onClick` handler that is called when the underlying
+     * clear selection element is clicked
+     */
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Specify an optional `onKeyDown` handler that is called when the underlying
+     * clear selection element fires a keydown event
+     */
+    onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;
+    /**
+     * Specify an optional `onMouseUp` handler that is called when the underlying
+     * clear selection element fires a mouseup event
+     */
+    onMouseUp?: React.MouseEventHandler<HTMLButtonElement>;
+}
+declare function ListBoxSelection({ clearSelection, selectionCount, translateWithId: t, disabled, onClearSelection, ...rest }: ListBoxSelectionProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ListBoxSelection {
+    var propTypes: {
+        /**
+         * Specify a function to be invoked when a user interacts with the clear
+         * selection element.
+         */
+        clearSelection: PropTypes.Validator<(...args: any[]) => any>;
+        /**
+         * Specify whether or not the clear selection element should be disabled
+         */
+        disabled: PropTypes.Requireable<boolean>;
+        /**
+         * Specify an optional `onClearSelection` handler that is called when the underlying
+         * element is cleared
+         */
+        onClearSelection: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Specify an optional `onClick` handler that is called when the underlying
+         * clear selection element is clicked
+         */
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Specify an optional `onClick` handler that is called when the underlying
+         * clear selection element is clicked
+         */
+        onMouseUp: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Specify an optional `onKeyDown` handler that is called when the underlying
+         * clear selection element fires a keydown event
+         */
+        onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Specify an optional `selectionCount` value that will be used to determine
+         * whether the selection should display a badge or a single clear icon.
+         */
+        selectionCount: PropTypes.Requireable<number>;
+        /**
+         * i18n hook used to provide the appropriate description for the given menu
+         * icon. This function takes in an id defined in `translationIds` and should
+         * return a string message for that given message id.
+         */
+        translateWithId: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+}
+export default ListBoxSelection;

package/lib/components/ListBox/next/ListBoxSelection.js

@@ -23,22 +23,13 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
 var _Close, _Close2;
-
-/**
- * `ListBoxSelection` is used to provide controls for clearing a selection, in
- * addition to conditionally rendering a badge if the control has more than one
- * selection.
- */
-
-const translationIds = {
-  'clear.all': 'clear.all',
-  'clear.selection': 'clear.selection'
-};
 const defaultTranslations = {
-  [translationIds['clear.all']]: 'Clear all selected items',
-  [translationIds['clear.selection']]: 'Clear selected item'
+  'clear.all': 'Clear all selected items',
+  'clear.selection': 'Clear selected item'
 };
-const defaultTranslateWithId = id => defaultTranslations[id];
+function defaultTranslateWithId(id) {
+  return defaultTranslations[id];
+}
 function ListBoxSelection(_ref) {
   let {
     clearSelection,
@@ -72,7 +63,7 @@ function ListBoxSelection(_ref) {
       className: tagClasses
     }, /*#__PURE__*/React__default["default"].createElement("span", {
       className: `${prefix}--tag__label`,
-      title: selectionCount
+      title: selectionCount?.toString()
     }, selectionCount), /*#__PURE__*/React__default["default"].createElement("button", {
       "aria-label": description,
       className: `${prefix}--tag__close-icon`,
@@ -113,6 +104,11 @@ ListBoxSelection.propTypes = {
    * clear selection element is clicked
    */
   onClick: PropTypes__default["default"].func,
+  /**
+   * Specify an optional `onClick` handler that is called when the underlying
+   * clear selection element is clicked
+   */
+  onMouseUp: PropTypes__default["default"].func,
   /**
    * Specify an optional `onKeyDown` handler that is called when the underlying
    * clear selection element fires a keydown event
@@ -132,4 +128,3 @@ ListBoxSelection.propTypes = {
 };
 
 exports["default"] = ListBoxSelection;
-exports.translationIds = translationIds;

package/lib/components/ListBox/next/ListBoxTrigger.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Copyright IBM Corp. 2016, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+export declare const translationIds: {
+    readonly 'close.menu': "close.menu";
+    readonly 'open.menu': "open.menu";
+};
+export type TranslationKey = keyof typeof translationIds;
+export interface ListBoxTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Specify whether the menu is currently open, which will influence the
+     * direction of the menu icon
+     */
+    isOpen: boolean;
+    /**
+     * i18n hook used to provide the appropriate description for the given menu
+     * icon. This function takes in an id defined in `translationIds` and should
+     * return a string message for that given message id.
+     */
+    translateWithId?: (id: TranslationKey) => string;
+}
+/**
+ * `ListBoxTrigger` is used to orient the icon up or down depending on the
+ * state of the menu for a given `ListBox`
+ */
+declare const ListBoxTrigger: React.ForwardRefExoticComponent<ListBoxTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export default ListBoxTrigger;

package/lib/components/ListBox/next/ListBoxTrigger.js

@@ -32,7 +32,6 @@ const defaultTranslations = {
   [translationIds['open.menu']]: 'Open'
 };
 const defaultTranslateWithId = id => defaultTranslations[id];
-
 /**
  * `ListBoxTrigger` is used to orient the icon up or down depending on the
  * state of the menu for a given `ListBox`
@@ -55,7 +54,7 @@ const ListBoxTrigger = /*#__PURE__*/React__default["default"].forwardRef(functio
     title: description,
     className: className,
     type: "button",
-    tabIndex: "-1",
+    tabIndex: -1,
     ref: ref
   }), _ChevronDown || (_ChevronDown = /*#__PURE__*/React__default["default"].createElement(iconsReact.ChevronDown, null)));
 });
@@ -72,7 +71,6 @@ ListBoxTrigger.propTypes = {
    */
   translateWithId: PropTypes__default["default"].func
 };
-var ListBoxTrigger$1 = ListBoxTrigger;
 
-exports["default"] = ListBoxTrigger$1;
+exports["default"] = ListBoxTrigger;
 exports.translationIds = translationIds;

package/lib/components/ListBox/next/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2016, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export { default as ListBoxSelection, type ListBoxSelectionProps, } from './ListBoxSelection';
+export { default as ListBoxTrigger, type ListBoxTriggerProps, } from './ListBoxTrigger';

package/lib/components/Menu/Menu.js

@@ -292,7 +292,8 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(_ref, forwardRef) {
     [`${prefix}--menu--box-shadow-top`]: menuAlignment && menuAlignment.slice(0, 3) === 'top',
     [`${prefix}--menu--open`]: open,
     [`${prefix}--menu--shown`]: open && !legacyAutoalign || position[0] >= 0 && position[1] >= 0,
-    [`${prefix}--menu--with-icons`]: childContext.state.hasIcons
+    [`${prefix}--menu--with-icons`]: childContext.state.hasIcons,
+    [`${prefix}--autoalign`]: !legacyAutoalign
   });
   const rendered = /*#__PURE__*/React__default["default"].createElement(MenuContext.MenuContext.Provider, {
     value: childContext

package/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -19,6 +19,8 @@ var React = require('react');
 var filter = require('../ComboBox/tools/filter.js');
 var MultiSelectPropTypes = require('./MultiSelectPropTypes.js');
 var index = require('../ListBox/index.js');
+var ListBoxSelection = require('../ListBox/next/ListBoxSelection.js');
+var ListBoxTrigger = require('../ListBox/next/ListBoxTrigger.js');
 var itemToString = require('./tools/itemToString.js');
 var mergeRefs = require('../../tools/mergeRefs.js');
 var deprecate = require('../../prop-types/deprecate.js');
@@ -29,9 +31,8 @@ require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
 var Selection = require('../../internal/Selection.js');
 var react = require('@floating-ui/react');
+var floatingUi_core = require('../../node_modules/@floating-ui/core/dist/floating-ui.core.mjs.js');
 var match = require('../../internal/keyboard/match.js');
-var ListBoxSelection = require('../ListBox/next/ListBoxSelection.js');
-var ListBoxTrigger = require('../ListBox/next/ListBoxTrigger.js');
 var ListBoxPropTypes = require('../ListBox/ListBoxPropTypes.js');
 var keys = require('../../internal/keyboard/keys.js');
 
@@ -156,14 +157,18 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
           width: `${rects.reference.width}px`
         });
       }
-    })],
+    }), floatingUi_core.hide()],
     whileElementsMounted: react.autoUpdate
   } : {});
   React.useLayoutEffect(() => {
     if (autoAlign) {
-      Object.keys(floatingStyles).forEach(style => {
+      const updatedFloatingStyles = {
+        ...floatingStyles,
+        visibility: middlewareData.hide?.referenceHidden ? 'hidden' : 'visible'
+      };
+      Object.keys(updatedFloatingStyles).forEach(style => {
         if (refs.floating.current) {
-          refs.floating.current.style[style] = floatingStyles[style];
+          refs.floating.current.style[style] = updatedFloatingStyles[style];
         }
       });
     }
@@ -203,7 +208,8 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
     [`${prefix}--list-box--up`]: direction === 'top',
     [`${prefix}--list-box__wrapper--fluid--invalid`]: isFluid && invalid,
     [`${prefix}--list-box__wrapper--fluid--focus`]: isFluid && isFocused,
-    [`${prefix}--list-box__wrapper--slug`]: slug
+    [`${prefix}--list-box__wrapper--slug`]: slug,
+    [`${prefix}--autoalign`]: autoAlign
   });
   const helperId = !helperText ? undefined : `filterablemultiselect-helper-text-${filterableMultiSelectInstanceId}`;
   const labelId = `${id}-label`;
@@ -544,10 +550,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--list-box__field`,
     ref: autoAlign ? refs.setReference : null
-  }, controlledSelectedItems.length > 0 &&
-  /*#__PURE__*/
-  // @ts-expect-error: It is expecting a non-required prop called: "onClearSelection"
-  React__default["default"].createElement(ListBoxSelection["default"], {
+  }, controlledSelectedItems.length > 0 && /*#__PURE__*/React__default["default"].createElement(ListBoxSelection["default"], {
     clearSelection: () => {
       clearSelection();
       if (textInput.current) {
@@ -565,10 +568,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
     className: `${prefix}--list-box__invalid-icon`
   }), showWarning && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningAltFilled, {
     className: `${prefix}--list-box__invalid-icon ${prefix}--list-box__invalid-icon--warning`
-  }), inputValue &&
-  /*#__PURE__*/
-  // @ts-expect-error: It is expecting two non-required prop called: "onClearSelection" & "selectionCount"
-  React__default["default"].createElement(ListBoxSelection["default"], {
+  }), inputValue && /*#__PURE__*/React__default["default"].createElement(ListBoxSelection["default"], {
     clearSelection: clearInputValue,
     disabled: disabled,
     translateWithId: translateWithId,
@@ -581,7 +581,6 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
       event.stopPropagation();
     }
   }), /*#__PURE__*/React__default["default"].createElement(ListBoxTrigger["default"], _rollupPluginBabelHelpers["extends"]({}, buttonProps, {
-    // @ts-expect-error
     isOpen: isOpen,
     translateWithId: translateWithId
   }))), normalizedSlug, /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, menuProps, isOpen ? sortedItems.map((item, index$1) => {

package/lib/components/MultiSelect/MultiSelect.js

@@ -26,8 +26,11 @@ var deprecate = require('../../prop-types/deprecate.js');
 var usePrefix = require('../../internal/usePrefix.js');
 require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
+var Checkbox = require('../Checkbox/Checkbox.js');
+require('../Checkbox/Checkbox.Skeleton.js');
 var noopFn = require('../../internal/noopFn.js');
 var react = require('@floating-ui/react');
+var floatingUi_core = require('../../node_modules/@floating-ui/core/dist/floating-ui.core.mjs.js');
 var match = require('../../internal/keyboard/match.js');
 var ListBoxPropTypes = require('../ListBox/ListBoxPropTypes.js');
 var keys = require('../../internal/keyboard/keys.js');
@@ -105,6 +108,23 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
     locale = 'en',
     slug
   } = _ref;
+  const filteredItems = React.useMemo(() => {
+    return items.filter(item => {
+      if (typeof item === 'object' && item !== null) {
+        for (const key in item) {
+          if (Object.hasOwn(item, key) && item[key] === undefined) {
+            return false; // Return false if any property has an undefined value
+          }
+        }
+      }
+      return true; // Return true if item is not an object with undefined values
+    });
+  }, [items]);
+  let selectAll = filteredItems.some(item => item.isSelectAll);
+  if ((selected ?? []).length > 0 && selectAll) {
+    console.warn('Warning: `selectAll` should not be used when `selectedItems` is provided. Please pass either `selectAll` or `selectedItems`, not both.');
+    selectAll = false;
+  }
   const prefix = usePrefix.usePrefix();
   const {
     isFluid
@@ -116,16 +136,6 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
   const [prevOpenProp, setPrevOpenProp] = React.useState(open);
   const [topItems, setTopItems] = React.useState([]);
   const [itemsCleared, setItemsCleared] = React.useState(false);
-  const {
-    selectedItems: controlledSelectedItems,
-    onItemChange,
-    clearSelection
-  } = Selection.useSelection({
-    disabled,
-    initialSelectedItems,
-    onChange,
-    selectedItems: selected
-  });
   const {
     refs,
     floatingStyles,
@@ -150,32 +160,40 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
           width: `${rects.reference.width}px`
         });
       }
-    })],
+    }), floatingUi_core.hide()],
     whileElementsMounted: react.autoUpdate
   } : {});
   React.useLayoutEffect(() => {
     if (autoAlign) {
-      Object.keys(floatingStyles).forEach(style => {
+      const updatedFloatingStyles = {
+        ...floatingStyles,
+        visibility: middlewareData.hide?.referenceHidden ? 'hidden' : 'visible'
+      };
+      Object.keys(updatedFloatingStyles).forEach(style => {
         if (refs.floating.current) {
-          refs.floating.current.style[style] = floatingStyles[style];
+          refs.floating.current.style[style] = updatedFloatingStyles[style];
         }
       });
     }
   }, [autoAlign, floatingStyles, refs.floating, middlewareData, open]);
-
-  // Filter out items with an object having undefined values
-  const filteredItems = React.useMemo(() => {
-    return items.filter(item => {
-      if (typeof item === 'object' && item !== null) {
-        for (const key in item) {
-          if (Object.hasOwn(item, key) && item[key] === undefined) {
-            return false; // Return false if any property has an undefined value
-          }
-        }
-      }
-      return true; // Return true if item is not an object with undefined values
-    });
-  }, [items]);
+  const {
+    selectedItems: controlledSelectedItems,
+    onItemChange,
+    clearSelection
+  } = Selection.useSelection({
+    disabled,
+    initialSelectedItems,
+    onChange,
+    selectedItems: selected,
+    selectAll,
+    filteredItems
+  });
+  const sortOptions = {
+    selectedItems: controlledSelectedItems,
+    itemToString,
+    compareItems,
+    locale
+  };
   const selectProps = {
     stateReducer,
     isOpen,
@@ -271,18 +289,14 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
     [`${prefix}--multi-select--inline`]: inline,
     [`${prefix}--multi-select--selected`]: selectedItems && selectedItems.length > 0,
     [`${prefix}--list-box--up`]: direction === 'top',
-    [`${prefix}--multi-select--readonly`]: readOnly
+    [`${prefix}--multi-select--readonly`]: readOnly,
+    [`${prefix}--autoalign`]: autoAlign,
+    [`${prefix}--multi-select--selectall`]: selectAll
   });
 
   // needs to be capitalized for react to render it correctly
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const ItemToElement = itemToElement;
-  const sortOptions = {
-    selectedItems: controlledSelectedItems,
-    itemToString,
-    compareItems,
-    locale
-  };
   if (selectionFeedback === 'fixed') {
     sortOptions.selectedItems = [];
   } else if (selectionFeedback === 'top-after-reopen') {
@@ -345,7 +359,7 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
         } else {
           return {
             ...changes,
-            highlightedIndex: props.items.indexOf(highlightedIndex)
+            highlightedIndex: filteredItems.indexOf(highlightedIndex)
           };
         }
       case ToggleButtonKeyDownArrowDown:
@@ -403,11 +417,12 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
     });
   }
   const itemsSelectedText = selectedItems.length > 0 && selectedItems.map(item => item?.text);
+  const selectedItemsLength = selectAll ? selectedItems.filter(item => !item.isSelectAll).length : selectedItems.length;
 
   // Memoize the value of getMenuProps to avoid an infinite loop
   const menuProps = React.useMemo(() => getMenuProps({
     ref: autoAlign ? refs.setFloating : null
-  }), [autoAlign]);
+  }), [autoAlign, getMenuProps, refs.setFloating]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: wrapperClasses
   }, /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({
@@ -438,7 +453,7 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
   }, selectedItems.length > 0 && /*#__PURE__*/React__default["default"].createElement(index["default"].Selection, {
     readOnly: readOnly,
     clearSelection: !disabled && !readOnly ? clearSelection : noopFn.noopFn,
-    selectionCount: selectedItems.length
+    selectionCount: selectedItemsLength
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     ,
     translateWithId: translateWithId,
@@ -457,10 +472,9 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
   }, label), /*#__PURE__*/React__default["default"].createElement(index["default"].MenuIcon, {
     isOpen: isOpen,
     translateWithId: translateWithId
-  })), normalizedSlug), /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, menuProps, isOpen &&
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  sortItems(filteredItems, sortOptions).map((item, index$1) => {
+  })), normalizedSlug), /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, menuProps, isOpen && sortItems(filteredItems, sortOptions).map((item, index$1) => {
     const isChecked = selectedItems.filter(selected => isEqual__default["default"](selected, item)).length > 0;
+    const isIndeterminate = selectedItems.length !== 0 && item['isSelectAll'] && !isChecked;
     const itemProps = getItemProps({
       item,
       // we don't want Downshift to set aria-selected for us
@@ -470,21 +484,23 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
     const itemText = itemToString(item);
     return /*#__PURE__*/React__default["default"].createElement(index["default"].MenuItem, _rollupPluginBabelHelpers["extends"]({
       key: itemProps.id,
-      isActive: isChecked,
+      isActive: isChecked && !item['isSelectAll'],
       "aria-label": itemText,
       isHighlighted: highlightedIndex === index$1,
       title: itemText,
       disabled: itemProps['aria-disabled']
     }, itemProps), /*#__PURE__*/React__default["default"].createElement("div", {
       className: `${prefix}--checkbox-wrapper`
-    }, /*#__PURE__*/React__default["default"].createElement("span", {
+    }, /*#__PURE__*/React__default["default"].createElement(Checkbox["default"], {
+      id: `${itemProps.id}__checkbox`,
+      labelText: itemToElement ? /*#__PURE__*/React__default["default"].createElement(ItemToElement, _rollupPluginBabelHelpers["extends"]({
+        key: itemProps.id
+      }, item)) : itemText,
+      checked: isChecked,
       title: useTitleInItem ? itemText : undefined,
-      className: `${prefix}--checkbox-label`,
-      "data-contained-checkbox-state": isChecked,
-      id: `${itemProps.id}__checkbox`
-    }, itemToElement ? /*#__PURE__*/React__default["default"].createElement(ItemToElement, _rollupPluginBabelHelpers["extends"]({
-      key: itemProps.id
-    }, item)) : itemText)));
+      indeterminate: isIndeterminate,
+      disabled: disabled
+    })));
   })), itemsCleared && /*#__PURE__*/React__default["default"].createElement("span", {
     "aria-live": "assertive",
     "aria-label": clearAnnouncement

package/lib/components/MultiSelect/tools/sorting.js

@@ -39,16 +39,13 @@ const defaultSortItems = (items, _ref2) => {
     locale = 'en'
   } = _ref2;
   return items.sort((itemA, itemB) => {
+    // Always place "select all" option at the beginning
+    if (itemA.isSelectAll) return -1;
+    if (itemB.isSelectAll) return 1;
     const hasItemA = selectedItems.includes(itemA);
     const hasItemB = selectedItems.includes(itemB);
-
-    // Prefer whichever item is in the `selectedItems` array first
-    if (hasItemA && !hasItemB) {
-      return -1;
-    }
-    if (hasItemB && !hasItemA) {
-      return 1;
-    }
+    if (hasItemA && !hasItemB) return -1;
+    if (hasItemB && !hasItemA) return 1;
     return compareItems(itemToString(itemA), itemToString(itemB), {
       locale
     });

package/lib/components/OverflowMenu/OverflowMenu.js

@@ -262,7 +262,7 @@ class OverflowMenu extends React__default["default"].Component {
       } = this.props;
       if (menuBody) {
         this._menuBody = menuBody;
-        const hasFocusin = ('onfocusin' in window);
+        const hasFocusin = 'onfocusin' in window;
         const focusinEventName = hasFocusin ? 'focusin' : 'focus';
         this._hFocusIn = on(menuBody.ownerDocument, focusinEventName, event => {
           const target = ClickListener["default"].getEventTarget(event);

package/lib/components/OverflowMenu/next/index.js

@@ -93,7 +93,9 @@ const OverflowMenu = /*#__PURE__*/React__default["default"].forwardRef(function
       hookOnClick();
     }
   }
-  const containerClasses = cx__default["default"](className, `${prefix}--overflow-menu__container`);
+  const containerClasses = cx__default["default"](className, `${prefix}--overflow-menu__container`, {
+    [`${prefix}--autoalign`]: autoAlign
+  });
   const menuClasses = cx__default["default"](`${prefix}--overflow-menu__${menuAlignment}`);
   const triggerClasses = cx__default["default"](`${prefix}--overflow-menu`, {
     [`${prefix}--overflow-menu--open`]: open

package/lib/components/Popover/index.js

@@ -20,6 +20,7 @@ var usePrefix = require('../../internal/usePrefix.js');
 var useEvent = require('../../internal/useEvent.js');
 var createPropAdapter = require('../../tools/createPropAdapter.js');
 var react = require('@floating-ui/react');
+var floatingUi_core = require('../../node_modules/@floating-ui/core/dist/floating-ui.core.mjs.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -138,7 +139,7 @@ const Popover = /*#__PURE__*/React__default["default"].forwardRef(function Popov
       fallbackAxisSideDirection: 'start'
     }), react.arrow({
       element: caretRef
-    })],
+    }), floatingUi_core.hide()],
     whileElementsMounted: react.autoUpdate
   } : {} // When autoAlign is turned off, floating-ui will not be used
   );
@@ -158,9 +159,13 @@ const Popover = /*#__PURE__*/React__default["default"].forwardRef(function Popov
   }
   React.useEffect(() => {
     if (autoAlign) {
-      Object.keys(floatingStyles).forEach(style => {
+      const updatedFloatingStyles = {
+        ...floatingStyles,
+        visibility: middlewareData.hide?.referenceHidden ? 'hidden' : 'visible'
+      };
+      Object.keys(updatedFloatingStyles).forEach(style => {
         if (refs.floating.current) {
-          refs.floating.current.style[style] = floatingStyles[style];
+          refs.floating.current.style[style] = updatedFloatingStyles[style];
         }
       });
       if (caret && middlewareData && middlewareData.arrow && caretRef?.current) {
@@ -194,13 +199,25 @@ const Popover = /*#__PURE__*/React__default["default"].forwardRef(function Popov
     [`${prefix}--popover--drop-shadow`]: dropShadow,
     [`${prefix}--popover--high-contrast`]: highContrast,
     [`${prefix}--popover--open`]: open,
-    [`${prefix}--popover--auto-align`]: autoAlign,
+    [`${prefix}--popover--auto-align ${prefix}--autoalign`]: autoAlign,
     [`${prefix}--popover--${currentAlignment}`]: true,
     [`${prefix}--popover--tab-tip`]: isTabTip
   }, customClassName);
   const mappedChildren = React__default["default"].Children.map(children, child => {
     const item = child;
-    if ((item?.type === 'button' || autoAlign && item?.type?.displayName !== 'PopoverContent' || autoAlign && item?.type?.displayName === 'ToggletipButton') && /*#__PURE__*/React__default["default"].isValidElement(item)) {
+    const displayName = item?.type?.displayName;
+
+    /**
+     * Only trigger elements (button) or trigger components (ToggletipButton) should be
+     * cloned because these will be decorated with a trigger-specific className and ref.
+     *
+     * There are also some specific components that should not be cloned when autoAlign
+     * is on, even if they are a trigger element.
+     */
+    const isTriggerElement = item?.type === 'button';
+    const isTriggerComponent = autoAlign && displayName && ['ToggletipButton'].includes(displayName);
+    const isAllowedTriggerComponent = autoAlign && displayName && !['ToggletipContent', 'PopoverContent'].includes(displayName);
+    if ( /*#__PURE__*/React__default["default"].isValidElement(item) && (isTriggerElement || isTriggerComponent || isAllowedTriggerComponent)) {
       const className = item?.props?.className;
       const ref = (item?.props).ref;
       const tabTipClasses = cx__default["default"](`${prefix}--popover--tab-tip__button`, className);