@carbon/react 1.65.0-rc.0 → 1.66.0-rc.0

package/es/components/MultiSelect/MultiSelect.js

@@ -11,7 +11,7 @@ import cx from 'classnames';
 import { useSelect } from 'downshift';
 import isEqual from 'react-fast-compare';
 import PropTypes from 'prop-types';
-import React__default, { useContext, useState, useLayoutEffect, useMemo } from 'react';
+import React__default, { useMemo, useContext, useState, useLayoutEffect } from 'react';
 import ListBox from '../ListBox/index.js';
 import { sortingPropTypes } from './MultiSelectPropTypes.js';
 import { defaultSortItems, defaultCompareItems } from './tools/sorting.js';
@@ -22,8 +22,11 @@ import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
+import Checkbox from '../Checkbox/Checkbox.js';
+import '../Checkbox/Checkbox.Skeleton.js';
 import { noopFn } from '../../internal/noopFn.js';
 import { useFloating, flip, size, autoUpdate } from '@floating-ui/react';
+import { hide } from '../../node_modules/@floating-ui/core/dist/floating-ui.core.mjs.js';
 import { match } from '../../internal/keyboard/match.js';
 import { ListBoxSize } from '../ListBox/ListBoxPropTypes.js';
 import { Delete, Escape, Space, ArrowDown, Enter } from '../../internal/keyboard/keys.js';
@@ -94,6 +97,23 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     locale = 'en',
     slug
   } = _ref;
+  const filteredItems = 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();
   const {
     isFluid
@@ -105,16 +125,6 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   const [prevOpenProp, setPrevOpenProp] = useState(open);
   const [topItems, setTopItems] = useState([]);
   const [itemsCleared, setItemsCleared] = useState(false);
-  const {
-    selectedItems: controlledSelectedItems,
-    onItemChange,
-    clearSelection
-  } = useSelection({
-    disabled,
-    initialSelectedItems,
-    onChange,
-    selectedItems: selected
-  });
   const {
     refs,
     floatingStyles,
@@ -139,32 +149,40 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
           width: `${rects.reference.width}px`
         });
       }
-    })],
+    }), hide()],
     whileElementsMounted: autoUpdate
   } : {});
   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 = 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
+  } = useSelection({
+    disabled,
+    initialSelectedItems,
+    onChange,
+    selectedItems: selected,
+    selectAll,
+    filteredItems
+  });
+  const sortOptions = {
+    selectedItems: controlledSelectedItems,
+    itemToString,
+    compareItems,
+    locale
+  };
   const selectProps = {
     stateReducer,
     isOpen,
@@ -260,18 +278,13 @@ const MultiSelect = /*#__PURE__*/React__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') {
@@ -334,7 +347,7 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
         } else {
           return {
             ...changes,
-            highlightedIndex: props.items.indexOf(highlightedIndex)
+            highlightedIndex: filteredItems.indexOf(highlightedIndex)
           };
         }
       case ToggleButtonKeyDownArrowDown:
@@ -392,11 +405,12 @@ const MultiSelect = /*#__PURE__*/React__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 = useMemo(() => getMenuProps({
     ref: autoAlign ? refs.setFloating : null
-  }), [autoAlign]);
+  }), [autoAlign, getMenuProps, refs.setFloating]);
   return /*#__PURE__*/React__default.createElement("div", {
     className: wrapperClasses
   }, /*#__PURE__*/React__default.createElement("label", _extends({
@@ -427,7 +441,7 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   }, selectedItems.length > 0 && /*#__PURE__*/React__default.createElement(ListBox.Selection, {
     readOnly: readOnly,
     clearSelection: !disabled && !readOnly ? clearSelection : noopFn,
-    selectionCount: selectedItems.length
+    selectionCount: selectedItemsLength
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     ,
     translateWithId: translateWithId,
@@ -446,10 +460,9 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   }, label), /*#__PURE__*/React__default.createElement(ListBox.MenuIcon, {
     isOpen: isOpen,
     translateWithId: translateWithId
-  })), normalizedSlug), /*#__PURE__*/React__default.createElement(ListBox.Menu, menuProps, isOpen &&
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  sortItems(filteredItems, sortOptions).map((item, index) => {
+  })), normalizedSlug), /*#__PURE__*/React__default.createElement(ListBox.Menu, menuProps, isOpen && sortItems(filteredItems, sortOptions).map((item, index) => {
     const isChecked = selectedItems.filter(selected => isEqual(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
@@ -459,21 +472,23 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     const itemText = itemToString(item);
     return /*#__PURE__*/React__default.createElement(ListBox.MenuItem, _extends({
       key: itemProps.id,
-      isActive: isChecked,
+      isActive: isChecked && !item['isSelectAll'],
       "aria-label": itemText,
       isHighlighted: highlightedIndex === index,
       title: itemText,
       disabled: itemProps['aria-disabled']
     }, itemProps), /*#__PURE__*/React__default.createElement("div", {
       className: `${prefix}--checkbox-wrapper`
-    }, /*#__PURE__*/React__default.createElement("span", {
+    }, /*#__PURE__*/React__default.createElement(Checkbox, {
+      id: `${itemProps.id}__checkbox`,
+      labelText: itemToElement ? /*#__PURE__*/React__default.createElement(ItemToElement, _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.createElement(ItemToElement, _extends({
-      key: itemProps.id
-    }, item)) : itemText)));
+      indeterminate: isIndeterminate,
+      disabled: disabled
+    })));
   })), itemsCleared && /*#__PURE__*/React__default.createElement("span", {
     "aria-live": "assertive",
     "aria-label": clearAnnouncement

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

@@ -35,16 +35,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/es/components/OverflowMenu/OverflowMenu.js

@@ -251,7 +251,7 @@ class OverflowMenu extends React__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.getEventTarget(event);

package/es/components/Popover/index.js

@@ -16,6 +16,7 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import { useWindowEvent } from '../../internal/useEvent.js';
 import { mapPopoverAlignProp } from '../../tools/createPropAdapter.js';
 import { useFloating, offset, flip, arrow, autoUpdate } from '@floating-ui/react';
+import { hide } from '../../node_modules/@floating-ui/core/dist/floating-ui.core.mjs.js';
 
 const PopoverContext = /*#__PURE__*/React__default.createContext({
   setFloating: {
@@ -128,7 +129,7 @@ const Popover = /*#__PURE__*/React__default.forwardRef(function PopoverRenderFun
       fallbackAxisSideDirection: 'start'
     }), arrow({
       element: caretRef
-    })],
+    }), hide()],
     whileElementsMounted: autoUpdate
   } : {} // When autoAlign is turned off, floating-ui will not be used
   );
@@ -148,9 +149,13 @@ const Popover = /*#__PURE__*/React__default.forwardRef(function PopoverRenderFun
   }
   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) {
@@ -190,7 +195,19 @@ const Popover = /*#__PURE__*/React__default.forwardRef(function PopoverRenderFun
   }, customClassName);
   const mappedChildren = React__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.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.isValidElement(item) && (isTriggerElement || isTriggerComponent || isAllowedTriggerComponent)) {
       const className = item?.props?.className;
       const ref = (item?.props).ref;
       const tabTipClasses = cx(`${prefix}--popover--tab-tip__button`, className);

package/es/components/TreeView/TreeNode.js

@@ -17,7 +17,7 @@ import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { matches, match } from '../../internal/keyboard/match.js';
 import { ArrowLeft, ArrowRight, Enter, Space } from '../../internal/keyboard/keys.js';
 
-const TreeNode = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+const TreeNode = /*#__PURE__*/React__default.forwardRef((_ref, forwardedRef) => {
   let {
     active,
     children,
@@ -54,6 +54,14 @@ const TreeNode = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   const currentNode = useRef(null);
   const currentNodeLabel = useRef(null);
   const prefix = usePrefix();
+  const setRefs = element => {
+    currentNode.current = element;
+    if (typeof forwardedRef === 'function') {
+      forwardedRef(element);
+    } else if (forwardedRef) {
+      forwardedRef.current = element;
+    }
+  };
   const nodesWithProps = React__default.Children.map(children, node => {
     if ( /*#__PURE__*/React__default.isValidElement(node)) {
       return /*#__PURE__*/React__default.cloneElement(node, {
@@ -121,13 +129,14 @@ const TreeNode = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     }
     if (match(event, 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) {
@@ -144,7 +153,10 @@ const TreeNode = /*#__PURE__*/React__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(event, ArrowRight)) {
@@ -229,44 +241,40 @@ const TreeNode = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     onClick: handleClick,
     onFocus: handleFocusEvent,
     onKeyDown: handleKeyDown,
-    role: 'treeitem',
-    // @ts-ignore
-    ref: currentNode
+    role: 'treeitem'
   };
   if (!children) {
-    return /*#__PURE__*/React__default.createElement("li", treeNodeProps, /*#__PURE__*/React__default.createElement("div", {
+    return /*#__PURE__*/React__default.createElement("li", _extends({}, treeNodeProps, {
+      ref: setRefs
+    }), /*#__PURE__*/React__default.createElement("div", {
       className: `${prefix}--tree-node__label`,
       ref: currentNodeLabel
     }, Icon && /*#__PURE__*/React__default.createElement(Icon, {
       className: `${prefix}--tree-node__icon`
     }), label));
   }
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line jsx-a11y/role-supports-aria-props
-    React__default.createElement("li", _extends({}, treeNodeProps, {
-      "aria-expanded": !!expanded,
-      ref: ref
-    }), /*#__PURE__*/React__default.createElement("div", {
-      className: `${prefix}--tree-node__label`,
-      ref: currentNodeLabel
-    }, /*#__PURE__*/React__default.createElement("span", {
-      className: `${prefix}--tree-parent-node__toggle`
-      // @ts-ignore
-      ,
-      disabled: disabled,
-      onClick: handleToggleClick
-    }, /*#__PURE__*/React__default.createElement(CaretDown, {
-      className: toggleClasses
-    })), /*#__PURE__*/React__default.createElement("span", {
-      className: `${prefix}--tree-node__label__details`
-    }, Icon && /*#__PURE__*/React__default.createElement(Icon, {
-      className: `${prefix}--tree-node__icon`
-    }), label)), expanded && /*#__PURE__*/React__default.createElement("ul", {
-      role: "group",
-      className: `${prefix}--tree-node__children`
-    }, nodesWithProps))
-  );
+  return /*#__PURE__*/React__default.createElement("li", _extends({}, treeNodeProps, {
+    "aria-expanded": !!expanded,
+    ref: setRefs
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--tree-node__label`,
+    ref: currentNodeLabel
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: `${prefix}--tree-parent-node__toggle`
+    // @ts-ignore
+    ,
+    disabled: disabled,
+    onClick: handleToggleClick
+  }, /*#__PURE__*/React__default.createElement(CaretDown, {
+    className: toggleClasses
+  })), /*#__PURE__*/React__default.createElement("span", {
+    className: `${prefix}--tree-node__label__details`
+  }, Icon && /*#__PURE__*/React__default.createElement(Icon, {
+    className: `${prefix}--tree-node__icon`
+  }), label)), expanded && /*#__PURE__*/React__default.createElement("ul", {
+    role: "group",
+    className: `${prefix}--tree-node__children`
+  }, nodesWithProps));
 });
 TreeNode.propTypes = {
   /**

package/es/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/es/index.js

@@ -167,6 +167,8 @@ export { OverflowMenuV2 as unstable_OverflowMenuV2 } from './components/Overflow
 export { Popover, PopoverContent } from './components/Popover/index.js';
 export { default as ProgressBar } from './components/ProgressBar/ProgressBar.js';
 export { AILabel, AILabelActions, AILabelContent, AILabel as unstable__Slug, AILabelActions as unstable__SlugActions, AILabelContent as unstable__SlugContent } from './components/AILabel/index.js';
+export { default as unstable__ChatButton } from './components/ChatButton/ChatButton.js';
+export { default as unstable__ChatButtonSkeleton } from './components/ChatButton/ChatButton.Skeleton.js';
 export { default as AISkeletonPlaceholder, default as unstable__AiSkeletonPlaceholder } from './components/AISkeleton/AISkeletonPlaceholder.js';
 export { default as AISkeletonIcon, default as unstable__AiSkeletonIcon } from './components/AISkeleton/AISkeletonIcon.js';
 export { default as AISkeletonText, default as unstable__AiSkeletonText } from './components/AISkeleton/AISkeletonText.js';
@@ -206,8 +208,6 @@ export { default as unstable__FluidTimePickerSkeleton } from './components/Fluid
 export { default as unstable__FluidTimePickerSelect } from './components/FluidTimePickerSelect/FluidTimePickerSelect.js';
 export { LayoutDirection as unstable_LayoutDirection } from './components/LayoutDirection/LayoutDirection.js';
 export { useLayoutDirection as unstable_useLayoutDirection } from './components/LayoutDirection/useLayoutDirection.js';
-export { default as unstable__ChatButton } from './components/ChatButton/ChatButton.js';
-export { default as unstable__ChatButtonSkeleton } from './components/ChatButton/ChatButton.Skeleton.js';
 export { Text as unstable_Text } from './components/Text/Text.js';
 export { TextDirection as unstable_TextDirection } from './components/Text/TextDirection.js';
 export { default as CheckboxGroup } from './components/CheckboxGroup/CheckboxGroup.js';

package/es/internal/Selection.js

@@ -33,7 +33,9 @@ function useSelection(_ref2) {
     disabled,
     onChange,
     initialSelectedItems = [],
-    selectedItems: controlledItems
+    selectedItems: controlledItems,
+    selectAll = false,
+    filteredItems = []
   } = _ref2;
   const isMounted = useRef(false);
   const savedOnChange = useRef(onChange);
@@ -44,25 +46,35 @@ function useSelection(_ref2) {
     if (disabled) {
       return;
     }
-    let selectedIndex;
-    selectedItems.forEach((selectedItem, index) => {
-      if (isEqual(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(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,
@@ -70,7 +82,7 @@ function useSelection(_ref2) {
       onChangeHandlerUncontrolled: setUncontrolledItems,
       selectedItems: newSelectedItems
     });
-  }, [disabled, isControlled, selectedItems]);
+  }, [disabled, selectedItems, filteredItems, selectAll, isControlled]);
   const clearSelection = useCallback(() => {
     if (disabled) {
       return;

package/es/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/lib/components/ChatButton/ChatButton.Skeleton.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Copyright IBM Corp. 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 PropTypes from 'prop-types';
+export interface ChatButtonSkeletonProps {
+    /**
+     * Specify an optional className to add.
+     */
+    className?: string;
+    /**
+     * Specify the size of the `ChatButtonSkeleton`, from the following list of sizes:
+     */
+    size?: 'sm' | 'md' | 'lg';
+}
+declare const ChatButtonSkeleton: {
+    ({ className, size, ...rest }: ChatButtonSkeletonProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        /**
+         * Specify an optional className to add.
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify the size of the `ChatButtonSkeleton`, from the following list of sizes:
+         */
+        size: PropTypes.Requireable<string>;
+    };
+};
+export default ChatButtonSkeleton;

package/lib/components/ChatButton/ChatButton.Skeleton.js

@@ -45,6 +45,5 @@ ChatButtonSkeleton.propTypes = {
    */
   size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg'])
 };
-var ChatButtonSkeleton$1 = ChatButtonSkeleton;
 
-exports["default"] = ChatButtonSkeleton$1;
+exports["default"] = ChatButtonSkeleton;

package/lib/components/ChatButton/ChatButton.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Copyright IBM Corp. 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, { type ComponentType, type FunctionComponent } from 'react';
+export type ChatButtonKind = 'primary' | 'secondary' | 'danger' | 'ghost' | 'tertiary';
+export type ChatButtonSize = 'sm' | 'md' | 'lg';
+export interface ChatButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Provide the contents of your Select
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify an optional className to be applied to the node containing the label and the select box
+     */
+    className?: string;
+    /**
+     * Specify whether the `ChatButton` should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Specify whether the `ChatButton` should be rendered as a quick action button
+     */
+    isQuickAction?: boolean;
+    /**
+     * Specify whether the quick action `ChatButton` should be rendered as selected. This disables the input
+     */
+    isSelected?: boolean;
+    /**
+     * Specify the kind of `ChatButton` you want to create
+     */
+    kind?: ChatButtonKind;
+    /**
+     * Optional prop to specify an icon to be rendered.
+     * Can be a React component class
+     */
+    renderIcon?: ComponentType | FunctionComponent;
+    /**
+     * Specify the size of the `ChatButton`, from the following list of sizes:
+     */
+    size?: ChatButtonSize;
+}
+declare const ChatButton: React.ForwardRefExoticComponent<ChatButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default ChatButton;