@carbon/react 1.65.0 → 1.66.0-rc.0

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,13 @@ 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}--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 +358,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 +416,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 +452,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 +471,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 +483,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/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) {
@@ -200,7 +205,19 @@ const Popover = /*#__PURE__*/React__default["default"].forwardRef(function Popov
   }, 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);

package/lib/components/TreeView/TreeNode.js

@@ -27,7 +27,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const TreeNode = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
+const TreeNode = /*#__PURE__*/React__default["default"].forwardRef((_ref, forwardedRef) => {
   let {
     active,
     children,
@@ -64,6 +64,14 @@ const TreeNode = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
   const currentNode = React.useRef(null);
   const currentNodeLabel = React.useRef(null);
   const prefix = usePrefix.usePrefix();
+  const setRefs = element => {
+    currentNode.current = element;
+    if (typeof forwardedRef === 'function') {
+      forwardedRef(element);
+    } else if (forwardedRef) {
+      forwardedRef.current = element;
+    }
+  };
   const nodesWithProps = React__default["default"].Children.map(children, node => {
     if ( /*#__PURE__*/React__default["default"].isValidElement(node)) {
       return /*#__PURE__*/React__default["default"].cloneElement(node, {
@@ -131,13 +139,14 @@ const TreeNode = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     }
     if (match.match(event, keys.ArrowLeft)) {
       const findParentTreeNode = node => {
+        if (!node) return null;
         if (node.classList.contains(`${prefix}--tree-parent-node`)) {
           return node;
         }
         if (node.classList.contains(`${prefix}--tree`)) {
           return null;
         }
-        return findParentTreeNode(node.parentNode);
+        return findParentTreeNode(node.parentElement);
       };
       if (children && expanded) {
         if (!enableTreeviewControllable) {
@@ -154,7 +163,10 @@ const TreeNode = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
          * When focus is on a leaf node or a closed parent node, move focus to
          * its parent node (unless its depth is level 1)
          */
-        findParentTreeNode(currentNode.current?.parentNode)?.focus();
+        const parentNode = findParentTreeNode(currentNode.current?.parentElement || null);
+        if (parentNode instanceof HTMLElement) {
+          parentNode.focus();
+        }
       }
     }
     if (children && match.match(event, keys.ArrowRight)) {
@@ -239,44 +251,40 @@ const TreeNode = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     onClick: handleClick,
     onFocus: handleFocusEvent,
     onKeyDown: handleKeyDown,
-    role: 'treeitem',
-    // @ts-ignore
-    ref: currentNode
+    role: 'treeitem'
   };
   if (!children) {
-    return /*#__PURE__*/React__default["default"].createElement("li", treeNodeProps, /*#__PURE__*/React__default["default"].createElement("div", {
+    return /*#__PURE__*/React__default["default"].createElement("li", _rollupPluginBabelHelpers["extends"]({}, treeNodeProps, {
+      ref: setRefs
+    }), /*#__PURE__*/React__default["default"].createElement("div", {
       className: `${prefix}--tree-node__label`,
       ref: currentNodeLabel
     }, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
       className: `${prefix}--tree-node__icon`
     }), label));
   }
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line jsx-a11y/role-supports-aria-props
-    React__default["default"].createElement("li", _rollupPluginBabelHelpers["extends"]({}, treeNodeProps, {
-      "aria-expanded": !!expanded,
-      ref: ref
-    }), /*#__PURE__*/React__default["default"].createElement("div", {
-      className: `${prefix}--tree-node__label`,
-      ref: currentNodeLabel
-    }, /*#__PURE__*/React__default["default"].createElement("span", {
-      className: `${prefix}--tree-parent-node__toggle`
-      // @ts-ignore
-      ,
-      disabled: disabled,
-      onClick: handleToggleClick
-    }, /*#__PURE__*/React__default["default"].createElement(iconsReact.CaretDown, {
-      className: toggleClasses
-    })), /*#__PURE__*/React__default["default"].createElement("span", {
-      className: `${prefix}--tree-node__label__details`
-    }, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
-      className: `${prefix}--tree-node__icon`
-    }), label)), expanded && /*#__PURE__*/React__default["default"].createElement("ul", {
-      role: "group",
-      className: `${prefix}--tree-node__children`
-    }, nodesWithProps))
-  );
+  return /*#__PURE__*/React__default["default"].createElement("li", _rollupPluginBabelHelpers["extends"]({}, treeNodeProps, {
+    "aria-expanded": !!expanded,
+    ref: setRefs
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--tree-node__label`,
+    ref: currentNodeLabel
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
+    className: `${prefix}--tree-parent-node__toggle`
+    // @ts-ignore
+    ,
+    disabled: disabled,
+    onClick: handleToggleClick
+  }, /*#__PURE__*/React__default["default"].createElement(iconsReact.CaretDown, {
+    className: toggleClasses
+  })), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: `${prefix}--tree-node__label__details`
+  }, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
+    className: `${prefix}--tree-node__icon`
+  }), label)), expanded && /*#__PURE__*/React__default["default"].createElement("ul", {
+    role: "group",
+    className: `${prefix}--tree-node__children`
+  }, nodesWithProps));
 });
 TreeNode.propTypes = {
   /**

package/lib/components/TreeView/TreeView.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import TreeNode from './TreeNode';
+import TreeNode, { TreeNodeProps } from './TreeNode';
 export type TreeViewProps = {
     /**
      * Mark the active node in the tree, represented by its ID
@@ -40,7 +40,9 @@ export type TreeViewProps = {
     /**
      * Callback function that is called when any node is selected
      */
-    onSelect?: (selected: Array<string | number>, payload: any) => void;
+    onSelect?: (event: React.SyntheticEvent<HTMLUListElement>, payload?: Partial<TreeNodeProps> & {
+        activeNodeId?: string | number;
+    }) => void;
     /**
      * Array representing all selected node IDs in the tree
      */
@@ -49,7 +51,7 @@ export type TreeViewProps = {
      * Specify the size of the tree from a list of available sizes.
      */
     size?: 'xs' | 'sm';
-} & React.HTMLAttributes<HTMLUListElement>;
+} & Omit<React.HTMLAttributes<HTMLUListElement>, 'onSelect'>;
 type TreeViewComponent = {
     (props: TreeViewProps): JSX.Element;
     propTypes?: any;

package/lib/index.js

@@ -171,6 +171,8 @@ var index$2 = require('./components/OverflowMenuV2/index.js');
 var index$f = require('./components/Popover/index.js');
 var ProgressBar = require('./components/ProgressBar/ProgressBar.js');
 var index$3 = require('./components/AILabel/index.js');
+var ChatButton = require('./components/ChatButton/ChatButton.js');
+var ChatButton_Skeleton = require('./components/ChatButton/ChatButton.Skeleton.js');
 var AISkeletonPlaceholder = require('./components/AISkeleton/AISkeletonPlaceholder.js');
 var AISkeletonIcon = require('./components/AISkeleton/AISkeletonIcon.js');
 var AISkeletonText = require('./components/AISkeleton/AISkeletonText.js');
@@ -210,8 +212,6 @@ var FluidTimePicker_Skeleton = require('./components/FluidTimePicker/FluidTimePi
 var FluidTimePickerSelect = require('./components/FluidTimePickerSelect/FluidTimePickerSelect.js');
 var LayoutDirection = require('./components/LayoutDirection/LayoutDirection.js');
 var useLayoutDirection = require('./components/LayoutDirection/useLayoutDirection.js');
-var ChatButton = require('./components/ChatButton/ChatButton.js');
-var ChatButton_Skeleton = require('./components/ChatButton/ChatButton.Skeleton.js');
 var Text = require('./components/Text/Text.js');
 var TextDirection = require('./components/Text/TextDirection.js');
 var CheckboxGroup = require('./components/CheckboxGroup/CheckboxGroup.js');
@@ -446,6 +446,8 @@ exports.AILabelContent = index$3.AILabelContent;
 exports.unstable__Slug = index$3.AILabel;
 exports.unstable__SlugActions = index$3.AILabelActions;
 exports.unstable__SlugContent = index$3.AILabelContent;
+exports.unstable__ChatButton = ChatButton["default"];
+exports.unstable__ChatButtonSkeleton = ChatButton_Skeleton["default"];
 exports.AISkeletonPlaceholder = AISkeletonPlaceholder["default"];
 exports.unstable__AiSkeletonPlaceholder = AISkeletonPlaceholder["default"];
 exports.AISkeletonIcon = AISkeletonIcon["default"];
@@ -492,8 +494,6 @@ exports.unstable__FluidTimePickerSkeleton = FluidTimePicker_Skeleton["default"];
 exports.unstable__FluidTimePickerSelect = FluidTimePickerSelect["default"];
 exports.unstable_LayoutDirection = LayoutDirection.LayoutDirection;
 exports.unstable_useLayoutDirection = useLayoutDirection.useLayoutDirection;
-exports.unstable__ChatButton = ChatButton["default"];
-exports.unstable__ChatButtonSkeleton = ChatButton_Skeleton["default"];
 exports.unstable_Text = Text.Text;
 exports.unstable_TextDirection = TextDirection.TextDirection;
 exports.CheckboxGroup = CheckboxGroup["default"];

package/lib/internal/Selection.js

@@ -43,7 +43,9 @@ function useSelection(_ref2) {
     disabled,
     onChange,
     initialSelectedItems = [],
-    selectedItems: controlledItems
+    selectedItems: controlledItems,
+    selectAll = false,
+    filteredItems = []
   } = _ref2;
   const isMounted = React.useRef(false);
   const savedOnChange = React.useRef(onChange);
@@ -54,25 +56,35 @@ function useSelection(_ref2) {
     if (disabled) {
       return;
     }
-    let selectedIndex;
-    selectedItems.forEach((selectedItem, index) => {
-      if (isEqual__default["default"](selectedItem, item)) {
-        selectedIndex = index;
-      }
-    });
+    const allSelectableItems = filteredItems.filter(item => !item.disabled);
+    const disabledItemCount = filteredItems.filter(item => item.disabled).length;
     let newSelectedItems;
-    if (selectedIndex === undefined) {
-      newSelectedItems = selectedItems.concat(item);
-      callOnChangeHandler({
-        isControlled,
-        isMounted: isMounted.current,
-        onChangeHandlerControlled: savedOnChange.current,
-        onChangeHandlerUncontrolled: setUncontrolledItems,
-        selectedItems: newSelectedItems
+
+    //deselect all on click to All/indeterminate option
+    if (item && item.isSelectAll && selectedItems.length > 0) {
+      newSelectedItems = [];
+    }
+    //select all option
+    else if (item && item.isSelectAll && selectedItems.length == 0) {
+      newSelectedItems = allSelectableItems;
+    } else {
+      let selectedIndex;
+      selectedItems.forEach((selectedItem, index) => {
+        if (isEqual__default["default"](selectedItem, item)) {
+          selectedIndex = index;
+        }
       });
-      return;
+      if (selectedIndex === undefined) {
+        newSelectedItems = selectedItems.concat(item);
+        // checking if all items are selected then We should select mark the 'select All' option as well
+        if (selectAll && filteredItems.length - 1 === newSelectedItems.length + disabledItemCount) {
+          newSelectedItems = allSelectableItems;
+        }
+      } else {
+        newSelectedItems = removeAtIndex(selectedItems, selectedIndex);
+        newSelectedItems = newSelectedItems.filter(item => !item.isSelectAll);
+      }
     }
-    newSelectedItems = removeAtIndex(selectedItems, selectedIndex);
     callOnChangeHandler({
       isControlled,
       isMounted: isMounted.current,
@@ -80,7 +92,7 @@ function useSelection(_ref2) {
       onChangeHandlerUncontrolled: setUncontrolledItems,
       selectedItems: newSelectedItems
     });
-  }, [disabled, isControlled, selectedItems]);
+  }, [disabled, selectedItems, filteredItems, selectAll, isControlled]);
   const clearSelection = React.useCallback(() => {
     if (disabled) {
       return;

package/lib/internal/useMergedRefs.d.ts

@@ -10,4 +10,4 @@ import { Ref, ForwardedRef } from 'react';
  * refs from both `React.forwardRef` and `useRef` that you would like to add to
  * the same node.
  */
-export declare const useMergedRefs: <T>(refs: ForwardedRef<T>[]) => Ref<T>;
+export declare const useMergedRefs: <T extends unknown>(refs: ForwardedRef<T>[]) => Ref<T>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.65.0",
+  "version": "1.66.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -49,9 +49,9 @@
   "dependencies": {
     "@babel/runtime": "^7.24.7",
     "@carbon/feature-flags": "^0.22.0",
-    "@carbon/icons-react": "^11.48.0",
-    "@carbon/layout": "^11.25.0",
-    "@carbon/styles": "^1.64.0",
+    "@carbon/icons-react": "^11.49.0-rc.0",
+    "@carbon/layout": "^11.26.0-rc.0",
+    "@carbon/styles": "^1.65.0-rc.0",
     "@floating-ui/react": "^0.26.0",
     "@ibm/telemetry-js": "^1.5.0",
     "classnames": "2.5.1",
@@ -79,22 +79,25 @@
     "@babel/preset-env": "^7.24.7",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
-    "@carbon/test-utils": "^10.31.0",
-    "@carbon/themes": "^11.39.0",
+    "@carbon/test-utils": "^10.32.0-rc.0",
+    "@carbon/themes": "^11.40.0-rc.0",
     "@figma/code-connect": "^1.0.4",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^26.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
     "@rollup/plugin-typescript": "^11.0.0",
-    "@storybook/addon-a11y": "^7.1.0",
-    "@storybook/addon-actions": "^7.1.0",
-    "@storybook/addon-docs": "^7.1.0",
-    "@storybook/addon-essentials": "^7.1.0",
-    "@storybook/addon-links": "^7.4.5",
-    "@storybook/addon-storysource": "^7.1.0",
-    "@storybook/react": "^7.1.0",
-    "@storybook/react-webpack5": "^7.1.0",
-    "@storybook/theming": "^7.1.0",
+    "@storybook/addon-a11y": "^8.2.8",
+    "@storybook/addon-actions": "^8.2.8",
+    "@storybook/addon-docs": "^8.2.8",
+    "@storybook/addon-essentials": "^8.2.8",
+    "@storybook/addon-links": "^8.1.10",
+    "@storybook/addon-storysource": "^8.2.8",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/blocks": "^8.2.8",
+    "@storybook/manager-api": "^8.2.8",
+    "@storybook/react": "^8.2.8",
+    "@storybook/react-webpack5": "^8.2.8",
+    "@storybook/theming": "^8.2.8",
     "@types/react-is": "~18.3.0",
     "autoprefixer": "^10.4.0",
     "babel-loader": "^9.0.0",
@@ -115,14 +118,14 @@
     "prop-types": "^15.7.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "remark-gfm": "^3.0.1",
+    "remark-gfm": "^4.0.0",
     "requestanimationframe": "^0.0.23",
     "rimraf": "^6.0.0",
     "rollup": "^2.79.1",
     "rollup-plugin-strip-banner": "^3.0.0",
-    "sass": "^1.51.0",
-    "sass-loader": "^14.0.0",
-    "storybook": "^7.1.0",
+    "sass": "^1.77.7",
+    "sass-loader": "^16.0.0",
+    "storybook": "^8.2.8",
     "storybook-addon-accessibility-checker": "^3.1.61-rc.3",
     "stream-browserify": "^3.0.0",
     "style-loader": "^4.0.0",
@@ -141,5 +144,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "2e82ab9625d65b607a7510b70d2cb4bacf209378"
+  "gitHead": "3bea42a9cef74114dc19f12d48519865bd8a4a17"
 }