@carbon/react 1.65.0 → 1.66.0

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -15,6 +15,8 @@ import React__default, { useContext, useState, useLayoutEffect, useRef, useMemo,
 import { defaultFilterItems } from '../ComboBox/tools/filter.js';
 import { sortingPropTypes } from './MultiSelectPropTypes.js';
 import ListBox from '../ListBox/index.js';
+import ListBoxSelection from '../ListBox/next/ListBoxSelection.js';
+import ListBoxTrigger from '../ListBox/next/ListBoxTrigger.js';
 import { defaultItemToString } from './tools/itemToString.js';
 import mergeRefs from '../../tools/mergeRefs.js';
 import deprecate from '../../prop-types/deprecate.js';
@@ -25,9 +27,8 @@ import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 import { useSelection } from '../../internal/Selection.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 ListBoxSelection from '../ListBox/next/ListBoxSelection.js';
-import ListBoxTrigger from '../ListBox/next/ListBoxTrigger.js';
 import { ListBoxSize } from '../ListBox/ListBoxPropTypes.js';
 import { Escape, Space, Enter, Delete, Tab, Home, End } from '../../internal/keyboard/keys.js';
 
@@ -144,14 +145,18 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
           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];
         }
       });
     }
@@ -191,7 +196,8 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
     [`${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`;
@@ -532,10 +538,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
   }, /*#__PURE__*/React__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.createElement(ListBoxSelection, {
+  }, controlledSelectedItems.length > 0 && /*#__PURE__*/React__default.createElement(ListBoxSelection, {
     clearSelection: () => {
       clearSelection();
       if (textInput.current) {
@@ -553,10 +556,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
     className: `${prefix}--list-box__invalid-icon`
   }), showWarning && /*#__PURE__*/React__default.createElement(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.createElement(ListBoxSelection, {
+  }), inputValue && /*#__PURE__*/React__default.createElement(ListBoxSelection, {
     clearSelection: clearInputValue,
     disabled: disabled,
     translateWithId: translateWithId,
@@ -569,7 +569,6 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
       event.stopPropagation();
     }
   }), /*#__PURE__*/React__default.createElement(ListBoxTrigger, _extends({}, buttonProps, {
-    // @ts-expect-error
     isOpen: isOpen,
     translateWithId: translateWithId
   }))), normalizedSlug, /*#__PURE__*/React__default.createElement(ListBox.Menu, menuProps, isOpen ? sortedItems.map((item, index) => {

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,14 @@ 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}--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') {
@@ -334,7 +348,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 +406,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 +442,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 +461,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 +473,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/OverflowMenu/next/index.js

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

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) {
@@ -184,13 +189,25 @@ const Popover = /*#__PURE__*/React__default.forwardRef(function PopoverRenderFun
     [`${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.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/Tag/DismissibleTag.d.ts

@@ -43,6 +43,10 @@ export interface DismissibleTagBaseProps {
      * Provide text to be rendered inside of a the tag.
      */
     text?: string;
+    /**
+     * Provide a custom `title` to be inserted in the tag.
+     */
+    tagTitle?: string;
     /**
      * Text to show on clear filters
      */
@@ -54,7 +58,7 @@ export interface DismissibleTagBaseProps {
 }
 export type DismissibleTagProps<T extends React.ElementType> = PolymorphicProps<T, DismissibleTagBaseProps>;
 declare const DismissibleTag: {
-    <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements>>({ className, disabled, id, renderIcon, title, onClose, slug, size, text, type, ...other }: DismissibleTagProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements>>({ className, disabled, id, renderIcon, title, onClose, slug, size, text, tagTitle, type, ...other }: DismissibleTagProps<T>): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Provide a custom className that is applied to the containing <span>
@@ -90,6 +94,10 @@ declare const DismissibleTag: {
          * Provide text to be rendered inside of a the tag.
          */
         text: PropTypes.Requireable<string>;
+        /**
+         * Provide a custom `title` to be inserted in the tag.
+         */
+        tagTitle: PropTypes.Requireable<string>;
         /**
          * Text to show on clear filters
          */

package/es/components/Tag/DismissibleTag.js

@@ -31,6 +31,7 @@ const DismissibleTag = _ref => {
     slug,
     size,
     text,
+    tagTitle,
     type,
     ...other
   } = _ref;
@@ -76,7 +77,7 @@ const DismissibleTag = _ref => {
   }, otherProps), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--interactive--tag-children`
   }, /*#__PURE__*/React__default.createElement(Text, {
-    title: text,
+    title: tagTitle ? tagTitle : text,
     className: `${prefix}--tag__label`
   }, text), /*#__PURE__*/React__default.createElement(Tooltip, {
     label: isEllipsisApplied ? dismissLabel : title,
@@ -89,8 +90,7 @@ const DismissibleTag = _ref => {
     className: `${prefix}--tag__close-icon`,
     onClick: handleClose,
     disabled: disabled,
-    "aria-label": title,
-    title: title
+    "aria-label": title
   }, _Close || (_Close = /*#__PURE__*/React__default.createElement(Close, null)))), normalizedSlug));
 };
 DismissibleTag.propTypes = {
@@ -128,6 +128,10 @@ DismissibleTag.propTypes = {
    * Provide text to be rendered inside of a the tag.
    */
   text: PropTypes.string,
+  /**
+   * Provide a custom `title` to be inserted in the tag.
+   */
+  tagTitle: PropTypes.string,
   /**
    * Text to show on clear filters
    */

package/es/components/Tag/Tag.js

@@ -131,10 +131,10 @@ const Tag = /*#__PURE__*/React__default.forwardRef(function Tag(_ref, forwardRef
     definition: children !== null && children !== undefined ? children : typeText,
     className: `${prefix}--definition--tooltip--tag`
   }, /*#__PURE__*/React__default.createElement(Text, {
-    title: children !== null && children !== undefined ? children : typeText,
+    title: children !== null && children !== undefined && typeof children === 'string' ? children : typeText,
     className: labelClasses
   }, children !== null && children !== undefined ? children : typeText)) : /*#__PURE__*/React__default.createElement(Text, {
-    title: children !== null && children !== undefined ? children : typeText,
+    title: children !== null && children !== undefined && typeof children === 'string' ? children : typeText,
     className: labelClasses
   }, children !== null && children !== undefined ? children : typeText), normalizedSlug);
 });

package/es/components/Toggletip/index.js

@@ -74,7 +74,8 @@ function Toggletip(_ref2) {
   const prefix = usePrefix();
   const id = useId();
   const className = cx(`${prefix}--toggletip`, customClassName, {
-    [`${prefix}--toggletip--open`]: open
+    [`${prefix}--toggletip--open`]: open,
+    [`${prefix}--autoalign`]: autoAlign
   });
   const actions = {
     toggle: () => {

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;