@carbon/react 1.41.2 → 1.42.0

package/es/components/Breadcrumb/Breadcrumb.Skeleton.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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';
+import React from 'react';
+export interface BreadcrumbSkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Specify an optional className to add.
+     */
+    className?: string;
+}
+declare function BreadcrumbSkeleton({ className, ...rest }: BreadcrumbSkeletonProps): JSX.Element;
+declare namespace BreadcrumbSkeleton {
+    var propTypes: {
+        /**
+         * Specify an optional className to add.
+         */
+        className: PropTypes.Requireable<string>;
+    };
+}
+export default BreadcrumbSkeleton;
+export { BreadcrumbSkeleton };

package/es/components/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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 { ForwardRefReturn } from '../../types/common';
+export interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Specify the label for the breadcrumb container
+     */
+    'aria-label'?: string;
+    /**
+     * Specify an optional className to be applied to the container node
+     */
+    className?: string;
+    /**
+     * Optional prop to omit the trailing slash for the breadcrumbs
+     */
+    noTrailingSlash?: boolean;
+}
+declare const Breadcrumb: ForwardRefReturn<HTMLElement, BreadcrumbProps>;
+export default Breadcrumb;

package/es/components/Breadcrumb/Breadcrumb.js

@@ -51,6 +51,5 @@ Breadcrumb.propTypes = {
    */
   noTrailingSlash: PropTypes.bool
 };
-var Breadcrumb$1 = Breadcrumb;
 
-export { Breadcrumb$1 as default };
+export { Breadcrumb as default };

package/es/components/Breadcrumb/BreadcrumbItem.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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, { AriaAttributes } from 'react';
+import { ForwardRefReturn } from '../../types/common';
+export interface BreadcrumbItemProps extends React.HTMLAttributes<HTMLLIElement> {
+    'aria-current'?: AriaAttributes['aria-current'];
+    /**
+     * Specify an optional className to be applied to the container node
+     */
+    className?: string;
+    /**
+     * Optional string representing the link location for the BreadcrumbItem
+     */
+    href?: string;
+    /**
+     * Provide if this breadcrumb item represents the current page
+     */
+    isCurrentPage?: boolean;
+}
+declare const BreadcrumbItem: ForwardRefReturn<HTMLLIElement, BreadcrumbItemProps>;
+export default BreadcrumbItem;

package/es/components/Breadcrumb/BreadcrumbItem.js

@@ -19,7 +19,7 @@ const BreadcrumbItem = /*#__PURE__*/React__default.forwardRef(function Breadcrum
   let {
     'aria-current': ariaCurrent,
     children,
-    className: customClassName,
+    className: customClassName = '',
     href,
     isCurrentPage,
     ...rest
@@ -32,13 +32,14 @@ const BreadcrumbItem = /*#__PURE__*/React__default.forwardRef(function Breadcrum
     [`${prefix}--breadcrumb-item--current`]: isCurrentPage && ariaCurrent !== 'page',
     [customClassName]: !!customClassName
   });
-  if (children.type && children.type.displayName !== undefined && children.type.displayName.includes('OverflowMenu')) {
+  const child = children;
+  if (child.type && child.type.displayName !== undefined && child.type.displayName.includes('OverflowMenu')) {
     const horizontalOverflowIcon = /*#__PURE__*/React__default.createElement(OverflowMenuHorizontal, {
       className: `${prefix}--overflow-menu__icon`
     });
     return /*#__PURE__*/React__default.createElement("li", _extends({
       className: className
-    }, rest), /*#__PURE__*/React__default.cloneElement(children, {
+    }, rest), /*#__PURE__*/React__default.cloneElement(child, {
       menuOptionsClass: `${prefix}--breadcrumb-menu-options`,
       menuOffset: {
         top: 10,
@@ -61,13 +62,14 @@ const BreadcrumbItem = /*#__PURE__*/React__default.forwardRef(function Breadcrum
   return /*#__PURE__*/React__default.createElement("li", _extends({
     className: className,
     ref: ref
-  }, rest), /*#__PURE__*/React__default.cloneElement(children, {
+  }, rest), /*#__PURE__*/React__default.cloneElement(child, {
     'aria-current': ariaCurrent,
-    className: cx(`${prefix}--link`, children.props.className)
+    className: cx(`${prefix}--link`, child.props.className)
   }));
 });
 BreadcrumbItem.displayName = 'BreadcrumbItem';
 BreadcrumbItem.propTypes = {
+  // @ts-expect-error - v12 TODO: BREAKING: This should match AriaAttributes['aria-current']
   'aria-current': PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   /**
    * Pass in content that will be inside of the BreadcrumbItem
@@ -86,6 +88,5 @@ BreadcrumbItem.propTypes = {
    */
   isCurrentPage: PropTypes.bool
 };
-var BreadcrumbItem$1 = BreadcrumbItem;
 
-export { BreadcrumbItem$1 as default };
+export { BreadcrumbItem as default };

package/es/components/ComboBox/ComboBox.d.ts

@@ -9,10 +9,16 @@ import { type ComponentProps, type ReactNode, type ComponentType, type ReactElem
 import { ListBoxSize } from '../ListBox';
 type ExcludedAttributes = 'id' | 'onChange' | 'onClick' | 'type' | 'size';
 interface OnChangeData<ItemType> {
-    selectedItem: ItemType | null;
+    selectedItem: ItemType | null | undefined;
+    inputValue?: string | null;
 }
 type ItemToStringHandler<ItemType> = (item: ItemType | null) => string;
 export interface ComboBoxProps<ItemType> extends Omit<InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
+    /**
+     * Specify whether or not the ComboBox should allow a value that is
+     * not in the list to be entered in the input
+     */
+    allowCustomValue?: boolean;
     /**
      * Specify a label to be read by screen readers on the container node
      * 'aria-label' of the ListBox component.

package/es/components/ComboBox/ComboBox.js

@@ -32,7 +32,8 @@ const {
   keyDownEscape,
   clickButton,
   blurButton,
-  changeInput
+  changeInput,
+  blurInput
 } = Downshift.stateChangeTypes;
 const defaultItemToString = item => {
   if (typeof item === 'string') {
@@ -110,6 +111,7 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
     translateWithId,
     warn,
     warnText,
+    allowCustomValue = false,
     ...rest
   } = props;
   const prefix = usePrefix();
@@ -204,6 +206,17 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
       case changeInput:
         updateHighlightedIndex(getHighlightedIndex(changes));
         break;
+      case blurInput:
+        if (allowCustomValue) {
+          setInputValue(inputValue);
+          if (onChange) {
+            onChange({
+              selectedItem,
+              inputValue
+            });
+          }
+        }
+        break;
     }
   };
   const handleToggleClick = isOpen => event => {
@@ -302,8 +315,18 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
         if (match(event, Space)) {
           event.stopPropagation();
         }
-        if (match(event, Enter) && !inputValue) {
+        if (match(event, Enter) && (!inputValue || allowCustomValue)) {
           toggleMenu();
+
+          // Since `onChange` does not normally fire when the menu is closed, we should
+          // manually fire it when `allowCustomValue` is provided, the menu is closing,
+          // and there is a value.
+          if (allowCustomValue && isOpen && inputValue) {
+            onChange({
+              selectedItem,
+              inputValue
+            });
+          }
         }
         if (match(event, Escape) && inputValue) {
           if (event.target === textInput.current && isOpen) {
@@ -411,6 +434,11 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
 });
 ComboBox.displayName = 'ComboBox';
 ComboBox.propTypes = {
+  /**
+   * Specify whether or not the ComboBox should allow a value that is
+   * not in the list to be entered in the input
+   */
+  allowCustomValue: PropTypes.bool,
   /**
    * 'aria-label' of the ListBox component.
    * Specify a label to be read by screen readers on the container node

package/es/components/ContentSwitcher/ContentSwitcher.d.ts

@@ -40,7 +40,7 @@ export interface ContentSwitcherProps extends Omit<HTMLAttributes<HTMLElement>,
     /**
      * Choose whether or not to automatically change selection on focus
      */
-    selectionMode: 'automatic' | 'manual';
+    selectionMode?: 'automatic' | 'manual';
     /**
      * Specify the size of the Content Switcher. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
      */

package/es/components/DataTable/TableBatchAction.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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';
+import React from 'react';
+export interface TableBatchActionProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Specify if the button is an icon-only button
+     */
+    hasIconOnly?: boolean;
+    /**
+     * If specifying the `renderIcon` prop, provide a description for that icon that can
+     * be read by screen readers
+     */
+    iconDescription?: string;
+    /**
+     * Optional function to render your own icon in the underlying button
+     */
+    renderIcon?: React.ElementType;
+}
+declare const TableBatchAction: {
+    ({ renderIcon, iconDescription, ...props }: {
+        [x: string]: any;
+        renderIcon?: import("@carbon/icons-react/lib/CarbonIcon").CarbonIconType | undefined;
+        iconDescription?: string | undefined;
+    }): JSX.Element;
+    propTypes: {
+        /**
+         * Specify if the button is an icon-only button
+         */
+        hasIconOnly: PropTypes.Requireable<boolean>;
+        /**
+         * If specifying the `renderIcon` prop, provide a description for that icon that can
+         * be read by screen readers
+         */
+        iconDescription: (props: any) => Error | undefined;
+        /**
+         * Optional function to render your own icon in the underlying button
+         */
+        renderIcon: PropTypes.Requireable<object>;
+    };
+};
+export default TableBatchAction;

package/es/components/DataTable/TableBatchAction.js

@@ -43,6 +43,5 @@ TableBatchAction.propTypes = {
    */
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
 };
-var TableBatchAction$1 = TableBatchAction;
 
-export { TableBatchAction$1 as default };
+export { TableBatchAction as default };

package/es/components/DataTable/TableExpandRow.d.ts

@@ -4,8 +4,7 @@
  * 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';
-import { MouseEventHandler, PropsWithChildren } from 'react';
+import React, { MouseEventHandler, PropsWithChildren } from 'react';
 import { TableRowProps } from './TableRow';
 interface TableExpandRowProps extends PropsWithChildren<TableRowProps> {
     /**
@@ -41,48 +40,5 @@ interface TableExpandRowProps extends PropsWithChildren<TableRowProps> {
      */
     onExpand: MouseEventHandler<HTMLButtonElement>;
 }
-declare const TableExpandRow: {
-    ({ ["aria-controls"]: ariaControls, ["aria-label"]: ariaLabel, ariaLabel: deprecatedAriaLabel, className: rowClassName, children, isExpanded, onExpand, expandIconDescription, isSelected, expandHeader, ...rest }: TableExpandRowProps): JSX.Element;
-    propTypes: {
-        /**
-         * Space separated list of one or more ID values referencing the TableExpandedRow(s) being controlled by the TableExpandRow
-         * TODO: make this required in v12
-         */
-        "aria-controls": PropTypes.Requireable<string>;
-        /**
-         * Specify the string read by a voice reader when the expand trigger is
-         * focused
-         */
-        "aria-label": PropTypes.Requireable<string>;
-        /**
-         * Deprecated, please use `aria-label` instead.
-         * Specify the string read by a voice reader when the expand trigger is
-         * focused
-         */
-        ariaLabel: PropTypes.Requireable<string>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        className: PropTypes.Requireable<string>;
-        /**
-         * The id of the matching th node in the table head. Addresses a11y concerns outlined here: https://www.ibm.com/able/guidelines/ci162/info_and_relationships.html and https://www.w3.org/TR/WCAG20-TECHS/H43
-         */
-        expandHeader: PropTypes.Requireable<string>;
-        /**
-         * The description of the chevron right icon, to be put in its SVG `<title>` element.
-         */
-        expandIconDescription: PropTypes.Requireable<string>;
-        /**
-         * Specify whether this row is expanded or not. This helps coordinate data
-         * attributes so that `TableExpandRow` and `TableExpandedRow` work together
-         */
-        isExpanded: PropTypes.Validator<boolean>;
-        /**
-         * Specify if the row is selected
-         */
-        isSelected: PropTypes.Requireable<boolean>;
-        /**
-         * Hook for when a listener initiates a request to expand the given row
-         */
-        onExpand: PropTypes.Validator<(...args: any[]) => any>;
-    };
-};
+declare const TableExpandRow: React.ForwardRefExoticComponent<TableExpandRowProps & React.RefAttributes<HTMLTableCellElement>>;
 export default TableExpandRow;

package/es/components/DataTable/TableExpandRow.js

@@ -13,7 +13,7 @@ import { ChevronRight } from '@carbon/icons-react';
 import TableCell from './TableCell.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-const TableExpandRow = _ref => {
+const TableExpandRow = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {
     ['aria-controls']: ariaControls,
     ['aria-label']: ariaLabel,
@@ -35,6 +35,7 @@ const TableExpandRow = _ref => {
   }, rowClassName);
   const previousValue = isExpanded ? 'collapsed' : undefined;
   return /*#__PURE__*/React__default.createElement("tr", _extends({}, rest, {
+    ref: ref,
     className: className,
     "data-parent-row": true
   }), /*#__PURE__*/React__default.createElement(TableCell, {
@@ -53,17 +54,19 @@ const TableExpandRow = _ref => {
     className: `${prefix}--table-expand__svg`,
     "aria-label": expandIconDescription
   }))), children);
-};
+});
 TableExpandRow.propTypes = {
   /**
    * Space separated list of one or more ID values referencing the TableExpandedRow(s) being controlled by the TableExpandRow
    * TODO: make this required in v12
    */
+  /**@ts-ignore*/
   ['aria-controls']: PropTypes.string,
   /**
    * Specify the string read by a voice reader when the expand trigger is
    * focused
    */
+  /**@ts-ignore*/
   ['aria-label']: PropTypes.string,
   /**
    * Deprecated, please use `aria-label` instead.
@@ -95,5 +98,6 @@ TableExpandRow.propTypes = {
    */
   onExpand: PropTypes.func.isRequired
 };
+TableExpandRow.displayName = 'TableExpandRow';
 
 export { TableExpandRow as default };

package/es/components/Dropdown/Dropdown.d.ts

@@ -101,7 +101,7 @@ export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>,
      * An optional callback to render the currently selected item as a react element instead of only
      * as a string.
      */
-    renderSelectedItem?(item: ItemType): string;
+    renderSelectedItem?(item: ItemType): React.JSXElementConstructor<ItemType> | null;
     /**
      * In the case you want to control the dropdown selection entirely.
      */

package/es/components/FluidMultiSelect/FluidMultiSelect.js

@@ -44,22 +44,39 @@ FluidMultiSelect.propTypes = {
    */
   className: PropTypes.string,
   /**
-   * Specify the direction of the dropdown. Can be either top or bottom.
+   * Specify the text that should be read for screen readers that describes total items selected
+   */
+  clearSelectionDescription: PropTypes.string,
+  /**
+   * Specify the text that should be read for screen readers to clear selection.
+   */
+  clearSelectionText: PropTypes.string,
+  /**
+   * Provide a compare function that is used to determine the ordering of
+   * options. See 'sortItems' for more control.
+   */
+  compareItems: PropTypes.func,
+  /**
+   * Specify the direction of the multiselect dropdown. Can be either top or bottom.
    */
   direction: PropTypes.oneOf(['top', 'bottom']),
   /**
    * Specify whether the `<input>` should be disabled
    */
   disabled: PropTypes.bool,
+  /**
+   * Additional props passed to Downshift
+   */
+  downshiftProps: PropTypes.object,
   /**
    * Specify a custom `id` for the `<input>`
    */
   id: PropTypes.string.isRequired,
   /**
-   * Allow users to pass in an arbitrary item or a string (in case their items are an array of strings)
-   * from their collection that are pre-selected
+   * Allow users to pass in arbitrary items from their collection that are
+   * pre-selected
    */
-  initialSelectedItem: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.number]),
+  initialSelectedItems: PropTypes.array,
   /**
    * Specify if the currently selected value is invalid.
    */
@@ -97,20 +114,62 @@ FluidMultiSelect.propTypes = {
    * this field is for
    */
   label: PropTypes.node.isRequired,
+  /**
+   * Specify the locale of the control. Used for the default `compareItems`
+   * used for sorting the list of items in the control.
+   */
+  locale: PropTypes.string,
   /**
    * `onChange` is a utility for this controlled component to communicate to a
    * consuming component what kind of internal state changes are occurring.
    */
   onChange: PropTypes.func,
   /**
-   * An optional callback to render the currently selected item as a react element instead of only
-   * as a string.
+   * **Filterable variant only** - `onInputValueChange` is a utility for this controlled component to communicate to
+   * the currently typed input.
    */
-  renderSelectedItem: PropTypes.func,
+  onInputValueChange: PropTypes.func,
   /**
-   * In the case you want to control the dropdown selection entirely.
+   * `onMenuChange` is a utility for this controlled component to communicate to a
+   * consuming component that the menu was open(`true`)/closed(`false`).
    */
-  selectedItem: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.number]),
+  onMenuChange: PropTypes.func,
+  /**
+   * Whether or not the Multiselect is readonly
+   */
+  readOnly: PropTypes.bool,
+  /**
+   * For full control of the selected items
+   */
+  selectedItems: PropTypes.array,
+  /**
+   * Specify feedback (mode) of the selection.
+   * `top`: selected item jumps to top
+   * `fixed`: selected item stays at it's position
+   * `top-after-reopen`: selected item jump to top after reopen dropdown
+   */
+  selectionFeedback: PropTypes.oneOf(['top', 'fixed', 'top-after-reopen']),
+  /**
+   * Provide a method that sorts all options in the control. Overriding this
+   * prop means that you also have to handle the sort logic for selected versus
+   * un-selected items. If you just want to control ordering, consider the
+   * `compareItems` prop instead.
+   *
+   * The return value should be a number whose sign indicates the relative order
+   * of the two elements: negative if a is less than b, positive if a is greater
+   * than b, and zero if they are equal.
+   *
+   * sortItems :
+   *   (items: Array<Item>, {
+   *     selectedItems: Array<Item>,
+   *     itemToString: Item => string,
+   *     compareItems: (itemA: string, itemB: string, {
+   *       locale: string
+   *     }) => number,
+   *     locale: string,
+   *   }) => Array<Item>
+   */
+  sortItems: PropTypes.func,
   /**
    * Provide the title text that will be read by a screen reader when
    * visiting this control
@@ -120,6 +179,10 @@ FluidMultiSelect.propTypes = {
    * Callback function for translating ListBoxMenuIcon SVG title
    */
   translateWithId: PropTypes.func,
+  /**
+   * Specify title to show title on hover
+   */
+  useTitleInItem: PropTypes.bool,
   /**
    * Specify whether the control is currently in warning state
    */

package/es/components/Notification/Notification.js

@@ -19,6 +19,7 @@ import { useNoInteractiveChildren } from '../../internal/useNoInteractiveChildre
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useId } from '../../internal/useId.js';
 import { noopFn } from '../../internal/noopFn.js';
+import wrapFocus from '../../internal/wrapFocus.js';
 import { Text } from '../Text/Text.js';
 import { matches } from '../../internal/keyboard/match.js';
 import { Escape } from '../../internal/keyboard/keys.js';
@@ -506,12 +507,40 @@ function ActionableNotification(_ref6) {
     [`${prefix}--actionable-notification--${kind}`]: kind,
     [`${prefix}--actionable-notification--hide-close-button`]: hideCloseButton
   });
+  const innerModal = useRef(null);
+  const startTrap = useRef(null);
+  const endTrap = useRef(null);
   const ref = useRef(null);
   useIsomorphicEffect(() => {
-    if (ref.current && hasFocus) {
-      ref.current.focus();
+    if (hasFocus) {
+      const button = document.querySelector('button.cds--actionable-notification__action-button');
+      button?.focus();
     }
   });
+  function handleBlur(_ref7) {
+    let {
+      target: oldActiveNode,
+      relatedTarget: currentActiveNode
+    } = _ref7;
+    if (isOpen && currentActiveNode && oldActiveNode) {
+      const {
+        current: bodyNode
+      } = innerModal;
+      const {
+        current: startTrapNode
+      } = startTrap;
+      const {
+        current: endTrapNode
+      } = endTrap;
+      wrapFocus({
+        bodyNode,
+        startTrapNode,
+        endTrapNode,
+        currentActiveNode,
+        oldActiveNode
+      });
+    }
+  }
   const handleClose = evt => {
     if (!onClose || onClose(evt) !== false) {
       setIsOpen(false);
@@ -529,8 +558,14 @@ function ActionableNotification(_ref6) {
     ref: ref,
     role: role,
     className: containerClassName,
-    "aria-labelledby": title ? id : subtitleId
-  }), /*#__PURE__*/React__default.createElement("div", {
+    "aria-labelledby": title ? id : subtitleId,
+    onBlur: handleBlur
+  }), /*#__PURE__*/React__default.createElement("span", {
+    ref: startTrap,
+    tabIndex: 0,
+    role: "link",
+    className: `${prefix}--visually-hidden`
+  }, "Focus sentinel"), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--actionable-notification__details`
   }, /*#__PURE__*/React__default.createElement(NotificationIcon, {
     notificationType: inline ? 'inline' : 'toast',
@@ -548,14 +583,21 @@ function ActionableNotification(_ref6) {
     as: "div",
     className: `${prefix}--actionable-notification__subtitle`,
     id: subtitleId
-  }, subtitle), children))), actionButtonLabel && /*#__PURE__*/React__default.createElement(NotificationActionButton, {
+  }, subtitle), children))), /*#__PURE__*/React__default.createElement("div", {
+    ref: innerModal
+  }, actionButtonLabel && /*#__PURE__*/React__default.createElement(NotificationActionButton, {
     onClick: onActionButtonClick,
     inline: inline
   }, actionButtonLabel), !hideCloseButton && /*#__PURE__*/React__default.createElement(NotificationButton, {
     "aria-label": deprecatedAriaLabel || ariaLabel,
     notificationType: "actionable",
     onClick: handleCloseButtonClick
-  }));
+  })), /*#__PURE__*/React__default.createElement("span", {
+    ref: endTrap,
+    tabIndex: 0,
+    role: "link",
+    className: `${prefix}--visually-hidden`
+  }, "Focus sentinel"));
 }
 ActionableNotification.propTypes = {
   /**

package/es/components/Tabs/Tabs.js

@@ -587,8 +587,7 @@ const Tab = /*#__PURE__*/forwardRef(function Tab(_ref5, forwardRef) {
   }, /*#__PURE__*/React__default.createElement(Icon, {
     size: 16
   })), /*#__PURE__*/React__default.createElement(Text, {
-    className: `${prefix}--tabs__nav-item-label`,
-    title: children
+    className: `${prefix}--tabs__nav-item-label`
   }, children), /*#__PURE__*/React__default.createElement("div", {
     className: cx(`${prefix}--tabs__nav-item--icon`, {
       [`${prefix}--visually-hidden`]: !hasIcon

package/es/components/TreeView/TreeNode.js

@@ -15,7 +15,7 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import { matches, match } from '../../internal/keyboard/match.js';
 import { ArrowLeft, ArrowRight, Enter, Space } from '../../internal/keyboard/keys.js';
 
-function TreeNode(_ref) {
+const TreeNode = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {
     active,
     children,
@@ -220,7 +220,8 @@ function TreeNode(_ref) {
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/role-supports-aria-props
     React__default.createElement("li", _extends({}, treeNodeProps, {
-      "aria-expanded": !!expanded
+      "aria-expanded": !!expanded,
+      ref: ref
     }), /*#__PURE__*/React__default.createElement("div", {
       className: `${prefix}--tree-node__label`,
       ref: currentNodeLabel
@@ -239,7 +240,7 @@ function TreeNode(_ref) {
       className: `${prefix}--tree-node__children`
     }, nodesWithProps))
   );
-}
+});
 TreeNode.propTypes = {
   /**
    * The value of the active node in the tree
@@ -299,5 +300,7 @@ TreeNode.propTypes = {
    */
   value: PropTypes.string
 };
+TreeNode.displayName = 'TreeNode';
+var TreeNode$1 = TreeNode;
 
-export { TreeNode as default };
+export { TreeNode$1 as default };