@carbon/react 1.47.0 → 1.48.0-rc.0

package/es/components/Button/Button.d.ts

@@ -65,8 +65,6 @@ interface ButtonBaseProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
     tooltipPosition?: ButtonTooltipPosition;
 }
 export type ButtonProps<T extends React.ElementType> = PolymorphicProps<T, ButtonBaseProps>;
-export interface ButtonComponent {
-    <T extends React.ElementType>(props: ButtonProps<T>, context?: any): React.ReactElement<any, any> | null;
-}
+export type ButtonComponent = <T extends React.ElementType>(props: ButtonProps<T>, context?: any) => React.ReactElement<any, any> | null;
 declare const _default: ButtonComponent;
 export default _default;

package/es/components/Button/Button.js

@@ -18,6 +18,12 @@ const ButtonKinds = ['primary', 'secondary', 'danger', 'ghost', 'danger--primary
 const ButtonSizes = ['sm', 'md', 'lg', 'xl', '2xl'];
 const ButtonTooltipAlignments = ['start', 'center', 'end'];
 const ButtonTooltipPositions = ['top', 'right', 'bottom', 'left'];
+function isIconOnlyButton(hasIconOnly, _kind) {
+  if (hasIconOnly === true) {
+    return true;
+  }
+  return false;
+}
 const Button = /*#__PURE__*/React__default.forwardRef(function Button(_ref, ref) {
   let {
     as,
@@ -50,7 +56,6 @@ const Button = /*#__PURE__*/React__default.forwardRef(function Button(_ref, ref)
     // Prevent clicks on the tooltip from triggering the button click event
     if (evt.target === tooltipRef.current) {
       evt.preventDefault();
-      return;
     }
   };
   const buttonClasses = cx(className, {
@@ -113,7 +118,7 @@ const Button = /*#__PURE__*/React__default.forwardRef(function Button(_ref, ref)
     component = 'a';
     otherProps = anchorProps;
   }
-  if (!hasIconOnly) {
+  if (!isIconOnlyButton(hasIconOnly)) {
     return /*#__PURE__*/React__default.createElement(component, {
       onMouseEnter,
       onMouseLeave,
@@ -151,7 +156,7 @@ const Button = /*#__PURE__*/React__default.forwardRef(function Button(_ref, ref)
       onFocus: onFocus,
       onBlur: onBlur,
       onClick: composeEventHandlers([onClick, handleClick])
-    }, rest, commonProps, otherProps), iconOnlyImage ? iconOnlyImage : children);
+    }, rest, commonProps, otherProps), iconOnlyImage ?? children);
   }
 });
 Button.displayName = 'Button';
@@ -206,6 +211,7 @@ Button.propTypes = {
   /**
    * Specify the kind of Button you want to create
    */
+  // TODO: this should be either ButtonKinds or IconButtonKinds based on the value of "hasIconOnly"
   kind: PropTypes.oneOf(ButtonKinds),
   /**
    * Provide an optional function to be called when the button element

package/es/components/ComposedModal/ModalHeader.js

@@ -11,6 +11,7 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { Close } from '@carbon/icons-react';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { IconButton } from '../IconButton/index.js';
 
 const ModalHeader = /*#__PURE__*/React__default.forwardRef(function ModalHeader(_ref, ref) {
   let {
@@ -45,16 +46,21 @@ const ModalHeader = /*#__PURE__*/React__default.forwardRef(function ModalHeader(
     className: labelClass
   }, label), title && /*#__PURE__*/React__default.createElement("h3", {
     className: titleClass
-  }, title), children, /*#__PURE__*/React__default.createElement("button", {
-    onClick: handleCloseButtonClick,
+  }, title), children, /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--modal-close-button`
+  }, /*#__PURE__*/React__default.createElement(IconButton, {
     className: closeClass,
+    label: iconDescription,
+    onClick: handleCloseButtonClick,
     title: iconDescription,
     "aria-label": iconDescription,
-    type: "button"
+    align: "left"
   }, /*#__PURE__*/React__default.createElement(Close, {
     size: 20,
+    "aria-hidden": "true",
+    tabIndex: "-1",
     className: closeIconClass
-  })));
+  }))));
 });
 ModalHeader.propTypes = {
   /**

package/es/components/DangerButton/DangerButton.js

@@ -10,8 +10,8 @@ import React__default from 'react';
 import Button from '../Button/Button.js';
 import '../Button/Button.Skeleton.js';
 
-const DangerButton = props => /*#__PURE__*/React__default.createElement(Button, _extends({
+const DangerButton = props => /*#__PURE__*/React__default.createElement(Button, _extends({}, props, {
   kind: "danger"
-}, props));
+}));
 
 export { DangerButton as default };

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

@@ -11,7 +11,7 @@ type TableExpandHeaderPropsBase = {
     /**
      * Space separated list of one or more ID values referencing the TableExpandedRow(s) being controlled by the TableExpandHeader
      */
-    ['aria-controls']: string;
+    ['aria-controls']?: string;
     /**
      * @deprecated This prop has been deprecated and will be
      * removed in the next major release of Carbon. Use the

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

@@ -10,7 +10,7 @@ interface TableExpandRowProps extends PropsWithChildren<TableRowProps> {
     /**
      * Space separated list of one or more ID values referencing the TableExpandedRow(s) being controlled by the TableExpandRow
      */
-    ['aria-controls']: string;
+    ['aria-controls']?: string;
     /**
      * @deprecated This prop has been deprecated and will be
      * removed in the next major release of Carbon. Use the

package/es/components/DataTable/TableExpandRow.js

@@ -77,7 +77,6 @@ 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

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

@@ -6,7 +6,16 @@
  */
 import { ReactNodeLike } from 'prop-types';
 import React, { type MouseEventHandler } from 'react';
+import { sortStates } from './state/sorting';
 import { ReactAttr } from '../../types/common';
+import { DataTableSortState } from './state/sortStates';
+export type TableHeaderTranslationKey = 'carbon.table.header.icon.description';
+export interface TableHeaderTranslationArgs {
+    header: React.ReactNode;
+    isSortHeader?: boolean;
+    sortDirection?: DataTableSortState;
+    sortStates: typeof sortStates;
+}
 interface TableHeaderProps extends ReactAttr<HTMLTableCellElement & HTMLButtonElement> {
     /**
      * Pass in children that will be embedded in the table header label
@@ -58,7 +67,7 @@ interface TableHeaderProps extends ReactAttr<HTMLTableCellElement & HTMLButtonEl
      * choice. Translation keys are available on the `translationKeys` field for
      * this component.
      */
-    translateWithId?: (key: string, { header, sortDirection, isSortHeader, sortStates }: {
+    translateWithId?: (key: TableHeaderTranslationKey, { header, sortDirection, isSortHeader, sortStates }: {
         header: any;
         sortDirection: any;
         isSortHeader: any;

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

@@ -16,7 +16,7 @@ import TableExpandHeader from './TableExpandHeader';
 import TableExpandRow from './TableExpandRow';
 import TableExpandedRow from './TableExpandedRow';
 import TableHead from './TableHead';
-import TableHeader from './TableHeader';
+import TableHeader, { TableHeaderTranslationKey, TableHeaderTranslationArgs } from './TableHeader';
 import TableRow from './TableRow';
 import TableSelectAll from './TableSelectAll';
 import TableSelectRow from './TableSelectRow';
@@ -26,5 +26,6 @@ import TableToolbarAction from './TableToolbarAction';
 import TableToolbarContent from './TableToolbarContent';
 import TableToolbarSearch from './TableToolbarSearch';
 import TableToolbarMenu from './TableToolbarMenu';
-export { DataTable, type DataTableCell, type DataTableHeader, type DataTableProps, type DataTableRenderProps, type DataTableRow, type DataTableSize, Table, TableActionList, TableBatchAction, TableBatchActions, TableBody, TableCell, TableContainer, TableExpandHeader, TableExpandRow, TableExpandedRow, TableHead, TableHeader, TableRow, TableSelectAll, TableSelectRow, TableSlugRow, TableToolbar, TableToolbarAction, TableToolbarContent, TableToolbarSearch, TableToolbarMenu, };
+import type { DataTableSortState } from './state/sortStates';
+export { DataTable, type DataTableCell, type DataTableHeader, type DataTableProps, type DataTableRenderProps, type DataTableSortState, type DataTableRow, type DataTableSize, Table, TableActionList, TableBatchAction, TableBatchActions, TableBody, TableCell, TableContainer, TableExpandHeader, TableExpandRow, TableExpandedRow, TableHead, TableHeader, type TableHeaderTranslationKey, type TableHeaderTranslationArgs, TableRow, TableSelectAll, TableSelectRow, TableSlugRow, TableToolbar, TableToolbarAction, TableToolbarContent, TableToolbarSearch, TableToolbarMenu, };
 export default DataTable;

package/es/components/DatePicker/DatePicker.js

@@ -336,7 +336,7 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
       }
     }
     function handleOnChange(event) {
-      if (datePickerType == 'single') {
+      if (datePickerType == 'single' && closeOnSelect) {
         calendar.calendarContainer.classList.remove('open');
       }
       const {
@@ -401,7 +401,8 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
         end.removeEventListener('change', handleOnChange);
       }
     };
-  }, [savedOnChange, savedOnClose, savedOnOpen, readOnly, hasInput]); //eslint-disable-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [savedOnChange, savedOnClose, savedOnOpen, readOnly, closeOnSelect, hasInput]);
 
   // this hook allows consumers to access the flatpickr calendar
   // instance for cases where functions like open() or close()

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

@@ -7,7 +7,7 @@
 import React, { ReactNode } from 'react';
 import { UseSelectProps } from 'downshift';
 import { ReactNodeLike } from 'prop-types';
-import { ListBoxSize, ListBoxType } from '../ListBox';
+import { type ListBoxMenuIconTranslationKey, ListBoxSize, ListBoxType } from '../ListBox';
 import { ReactAttr } from '../../types/common';
 type ExcludedAttributes = 'id' | 'onChange';
 export interface OnChangeData<ItemType> {
@@ -123,7 +123,7 @@ export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>,
     /**
      * Callback function for translating ListBoxMenuIcon SVG title
      */
-    translateWithId?(messageId: string, args?: Record<string, unknown>): string;
+    translateWithId?(messageId: ListBoxMenuIconTranslationKey, args?: Record<string, unknown>): string;
     /**
      * The dropdown type, `default` or `inline`
      */
@@ -137,6 +137,7 @@ export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>,
      */
     warnText?: React.ReactNode;
 }
+export type DropdownTranslationKey = ListBoxMenuIconTranslationKey;
 type DropdownComponentProps<ItemType> = React.PropsWithoutRef<React.PropsWithChildren<DropdownProps<ItemType>> & React.RefAttributes<HTMLButtonElement>>;
 interface DropdownComponent {
     <ItemType>(props: DropdownComponentProps<ItemType>): React.ReactElement | null;

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

@@ -4,8 +4,8 @@
  * 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 Dropdown, { OnChangeData } from './Dropdown';
-export type { OnChangeData };
+import Dropdown, { type DropdownTranslationKey, type OnChangeData } from './Dropdown';
+export type { DropdownTranslationKey, OnChangeData };
 export { Dropdown };
 export { default as DropdownSkeleton } from './Dropdown.Skeleton';
 export default Dropdown;

package/es/components/ExpandableSearch/ExpandableSearch.js

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useState, useRef } from 'react';
+import React__default, { useState, useRef, useEffect } from 'react';
 import cx from 'classnames';
 import Search from '../Search/Search.js';
 import '../Search/Search.Skeleton.js';
@@ -31,10 +31,13 @@ function ExpandableSearch(_ref) {
   const prefix = usePrefix();
   function handleBlur(evt) {
     const relatedTargetIsAllowed = evt.relatedTarget && evt.relatedTarget.classList.contains(`${prefix}--search-close`);
-    if (expanded && !relatedTargetIsAllowed && !hasContent) {
+    if (expanded && !relatedTargetIsAllowed && !hasContent && !isExpanded) {
       setExpanded(false);
     }
   }
+  useEffect(() => {
+    setExpanded(!!isExpanded);
+  }, [isExpanded]);
   function handleChange(evt) {
     setHasContent(evt.target.value !== '');
   }
@@ -47,7 +50,7 @@ function ExpandableSearch(_ref) {
       evt.stopPropagation();
 
       // escape key only clears if the input is empty, otherwise it clears the input
-      if (!evt.target?.value) {
+      if (!evt.target?.value && !isExpanded) {
         setExpanded(false);
       }
     }

package/es/components/IconButton/index.d.ts

@@ -0,0 +1,70 @@
+/**
+ * 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 { ReactNodeLike } from 'prop-types';
+import React from 'react';
+import { ButtonSize } from '../Button';
+export declare const IconButtonKinds: readonly ["primary", "secondary", "ghost", "tertiary"];
+export type IconButtonKind = (typeof IconButtonKinds)[number];
+interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Specify how the trigger should align with the tooltip
+     */
+    align?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right';
+    /**
+     * Provide an icon or asset to be rendered inside of the IconButton
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify an optional className to be added to your Button
+     */
+    className?: string;
+    /**
+     * Determines whether the tooltip should close when inner content is activated (click, Enter or Space)
+     */
+    closeOnActivation?: boolean;
+    /**
+     * Specify whether the tooltip should be open when it first renders
+     */
+    defaultOpen?: boolean;
+    /**
+     * Specify whether the Button should be disabled, or not
+     */
+    disabled?: boolean;
+    /**
+     * Specify the duration in milliseconds to delay before displaying the tooltip
+     */
+    enterDelayMs?: number;
+    /**
+     * Specify whether the IconButton is currently selected
+     */
+    isSelected?: boolean;
+    /**
+     * Specify the type of button to be used as the base for the IconButton
+     */
+    kind?: IconButtonKind;
+    /**
+     * Provide the label to be rendered inside of the Tooltip. The label will use
+     * `aria-labelledby` and will fully describe the child node that is provided.
+     * This means that if you have text in the child node it will not be
+     * announced to the screen reader.
+     */
+    label: ReactNodeLike;
+    /**
+     * Specify the duration in milliseconds to delay before hiding the tooltip
+     */
+    leaveDelayMs?: number;
+    /**
+     * Specify the size of the Button. Defaults to `md`.
+     */
+    size?: ButtonSize;
+    /**
+     * Specify an optional className to be added to your Tooltip wrapper
+     */
+    wrapperClasses?: string;
+}
+declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<unknown>>;
+export { IconButton };

package/es/components/IconButton/index.js

@@ -15,8 +15,9 @@ import '../Tooltip/DefinitionTooltip.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-const IconButton = /*#__PURE__*/React__default.forwardRef(function IconButton(props, ref) {
-  const {
+const IconButtonKinds = ['primary', 'secondary', 'ghost', 'tertiary'];
+const IconButton = /*#__PURE__*/React__default.forwardRef(function IconButton(_ref, ref) {
+  let {
     align,
     children,
     className,
@@ -31,7 +32,7 @@ const IconButton = /*#__PURE__*/React__default.forwardRef(function IconButton(pr
     size,
     isSelected,
     ...rest
-  } = props;
+  } = _ref;
   const prefix = usePrefix();
   const tooltipClasses = cx(wrapperClasses, `${prefix}--icon-tooltip`, {
     [`${prefix}--icon-tooltip--disabled`]: disabled
@@ -91,7 +92,7 @@ IconButton.propTypes = {
   /**
    * Specify the type of button to be used as the base for the IconButton
    */
-  kind: PropTypes.oneOf(['primary', 'secondary', 'ghost', 'tertiary']),
+  kind: PropTypes.oneOf(IconButtonKinds),
   /**
    * Provide the label to be rendered inside of the Tooltip. The label will use
    * `aria-labelledby` and will fully describe the child node that is provided.
@@ -113,4 +114,4 @@ IconButton.propTypes = {
   wrapperClasses: PropTypes.string
 };
 
-export { IconButton };
+export { IconButton, IconButtonKinds };

package/es/components/ListBox/ListBoxMenuIcon.d.ts

@@ -5,10 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-export declare const translationIds: {
-    'close.menu': string;
-    'open.menu': string;
-};
+export type ListBoxMenuIconTranslationKey = 'close.menu' | 'open.menu';
 export interface ListBoxMenuIconProps {
     /**
      * Specify whether the menu is currently open, which will influence the
@@ -17,10 +14,10 @@ export interface ListBoxMenuIconProps {
     isOpen: boolean;
     /**
      * i18n hook used to provide the appropriate description for the given menu
-     * icon. This function takes in an id defined in `translationIds` and should
+     * icon. This function takes in a ListBoxMenuIconTranslationKey and should
      * return a string message for that given message id.
      */
-    translateWithId?(messageId: string, args?: Record<string, unknown>): string;
+    translateWithId?(messageId: ListBoxMenuIconTranslationKey, args?: Record<string, unknown>): string;
 }
 export type ListBoxMenuIconComponent = React.FC<ListBoxMenuIconProps>;
 /**

package/es/components/ListBox/ListBoxMenuIcon.js

@@ -11,13 +11,9 @@ import PropTypes from 'prop-types';
 import { ChevronDown } from '@carbon/icons-react';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-const translationIds = {
-  'close.menu': 'close.menu',
-  'open.menu': 'open.menu'
-};
 const defaultTranslations = {
-  [translationIds['close.menu']]: 'Close menu',
-  [translationIds['open.menu']]: 'Open menu'
+  'close.menu': 'Close menu',
+  'open.menu': 'Open menu'
 };
 const defaultTranslateWithId = id => defaultTranslations[id];
 /**
@@ -49,10 +45,10 @@ ListBoxMenuIcon.propTypes = {
   isOpen: PropTypes.bool.isRequired,
   /**
    * i18n hook used to provide the appropriate description for the given menu
-   * icon. This function takes in an id defined in `translationIds` and should
+   * icon. This function takes a ListBoxMenuIconTranslationKey and should
    * return a string message for that given message id.
    */
   translateWithId: PropTypes.func
 };
 
-export { ListBoxMenuIcon as default, translationIds };
+export { ListBoxMenuIcon as default };

package/es/components/ListBox/index.d.ts

@@ -21,3 +21,4 @@ export interface ListBoxComponent extends ListBoxPartialComponent {
 }
 declare const ListBox: ListBoxComponent;
 export default ListBox;
+export type { ListBoxMenuIconTranslationKey } from './ListBoxMenuIcon';

package/es/components/Modal/Modal.d.ts

@@ -11,7 +11,7 @@ import { InlineLoadingStatus } from '../InlineLoading/InlineLoading';
 export declare const ModalSizes: readonly ["xs", "sm", "md", "lg"];
 export type ModalSize = (typeof ModalSizes)[number];
 export interface ModalSecondaryButton {
-    buttonText?: string;
+    buttonText?: string | React.ReactNode;
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
 }
 export interface ModalProps extends ReactAttr<HTMLDivElement> {

package/es/components/Modal/Modal.js

@@ -19,6 +19,7 @@ import requiredIfGivenPropIsTruthy from '../../prop-types/requiredIfGivenPropIsT
 import wrapFocus, { elementOrParentIsFloatingMenu } from '../../internal/wrapFocus.js';
 import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { IconButton } from '../IconButton/index.js';
 import { noopFn } from '../../internal/noopFn.js';
 import '../Text/index.js';
 import { Text } from '../Text/Text.js';
@@ -51,7 +52,7 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     shouldSubmitOnEnter,
     size,
     hasScrollingContent = false,
-    closeButtonLabel,
+    closeButtonLabel = 'Close',
     preventCloseOnClickOutside = false,
     isFullWidth,
     launcherButtonRef,
@@ -201,19 +202,22 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
       size: 'lg'
     });
   }
-  const modalButton = /*#__PURE__*/React__default.createElement("button", {
+  const modalButton = /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--modal-close-button`
+  }, /*#__PURE__*/React__default.createElement(IconButton, {
     className: modalCloseButtonClass,
-    type: "button",
+    label: closeButtonLabel,
     onClick: onRequestClose,
-    title: ariaLabel,
-    "aria-label": closeButtonLabel ? closeButtonLabel : 'close',
+    title: closeButtonLabel,
+    "aria-label": closeButtonLabel,
+    align: "left",
     ref: button
   }, /*#__PURE__*/React__default.createElement(Close, {
     size: 20,
     "aria-hidden": "true",
     tabIndex: "-1",
     className: `${modalCloseButtonClass}__icon`
-  }));
+  })));
   const modalBody = /*#__PURE__*/React__default.createElement("div", _extends({
     ref: innerModal,
     role: "dialog"

package/es/components/TreeView/TreeNode.js

@@ -22,6 +22,7 @@ const TreeNode = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     className,
     depth,
     disabled,
+    id: nodeId,
     isExpanded,
     label,
     onNodeFocusEvent,
@@ -35,7 +36,7 @@ const TreeNode = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   } = _ref;
   const {
     current: id
-  } = useRef(rest.id || uniqueId());
+  } = useRef(nodeId || uniqueId());
   const [expanded, setExpanded] = useState(isExpanded);
   const currentNode = useRef(null);
   const currentNodeLabel = useRef(null);
@@ -246,7 +247,8 @@ const TreeNode = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
 });
 TreeNode.propTypes = {
   /**
-   * The value of the active node in the tree
+   * **Note:** this is controlled by the parent TreeView component, do not set manually.
+   * The ID of the active node in the tree
    */
   active: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   /**
@@ -258,13 +260,18 @@ TreeNode.propTypes = {
    */
   className: PropTypes.string,
   /**
-   * TreeNode depth to determine spacing, automatically calculated by default
+   * * **Note:** this is controlled by the parent TreeView component, do not set manually.
+   * TreeNode depth to determine spacing
    */
   depth: PropTypes.number,
   /**
    * Specify if the TreeNode is disabled
    */
   disabled: PropTypes.bool,
+  /**
+   * Specify the TreeNode's ID. Must be unique in the DOM and is used for props.active and props.selected
+   */
+  id: PropTypes.string,
   /**
    * Specify if the TreeNode is expanded (only applicable to parent nodes)
    */
@@ -295,6 +302,7 @@ TreeNode.propTypes = {
    */
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
+   * **Note:** this is controlled by the parent TreeView component, do not set manually.
    * Array containing all selected node IDs in the tree
    */
   selected: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),

package/es/components/TreeView/TreeView.js

@@ -192,7 +192,7 @@ function TreeView(_ref) {
 }
 TreeView.propTypes = {
   /**
-   * Mark the active node in the tree, represented by its value
+   * Mark the active node in the tree, represented by its ID
    */
   active: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   /**

package/es/components/UIShell/HeaderMenu.js

@@ -148,7 +148,7 @@ class HeaderMenu extends React__default.Component {
       onKeyDown,
       ...rest
     } = this.props;
-    const hasActiveDescendant = childrenArg => React__default.Children.toArray(childrenArg).some(child => child.props.isActive || child.props.isCurrentPage || child.props.children instanceof Array && hasActiveDescendant(child.props.children));
+    const hasActiveDescendant = childrenArg => React__default.Children.toArray(childrenArg).some(child => child.props && (child.props.isActive || child.props.isCurrentPage || child.props.children instanceof Array && hasActiveDescendant(child.props.children)));
     const accessibilityLabel = {
       'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledBy

package/es/components/UIShell/SwitcherItem.d.ts

@@ -23,6 +23,10 @@ interface BaseSwitcherItemProps {
      * event handlers
      */
     onKeyDown?: (event: KeyboardEvent) => void;
+    /**
+     * event handlers
+     */
+    onClick?: (event: MouseEvent) => void;
     /**
      * Specify the tab index of the Link
      */

package/es/components/UIShell/SwitcherItem.js

@@ -88,6 +88,10 @@ SwitcherItem.propTypes = {
    * Specify the index of the SwitcherItem
    */
   index: PropTypes.number,
+  /**
+   * event handlers
+   */
+  onClick: PropTypes.func,
   /**
    * event handlers
    */

package/es/index.js

@@ -139,7 +139,7 @@ export { default as SideNavSwitcher } from './components/UIShell/SideNavSwitcher
 export { default as UnorderedList } from './components/UnorderedList/UnorderedList.js';
 export { FeatureFlags as unstable_FeatureFlags, useFeatureFlag as unstable_useFeatureFlag, useFeatureFlags as unstable_useFeatureFlags } from './components/FeatureFlags/index.js';
 export { Heading, Section } from './components/Heading/index.js';
-export { IconButton } from './components/IconButton/index.js';
+export { IconButton, IconButtonKinds } from './components/IconButton/index.js';
 export { Layer, useLayer } from './components/Layer/index.js';
 export { Layout as unstable_Layout } from './components/Layout/index.js';
 export { OverflowMenuV2 as unstable_OverflowMenuV2 } from './components/OverflowMenuV2/index.js';

package/lib/components/Button/Button.d.ts

@@ -65,8 +65,6 @@ interface ButtonBaseProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
     tooltipPosition?: ButtonTooltipPosition;
 }
 export type ButtonProps<T extends React.ElementType> = PolymorphicProps<T, ButtonBaseProps>;
-export interface ButtonComponent {
-    <T extends React.ElementType>(props: ButtonProps<T>, context?: any): React.ReactElement<any, any> | null;
-}
+export type ButtonComponent = <T extends React.ElementType>(props: ButtonProps<T>, context?: any) => React.ReactElement<any, any> | null;
 declare const _default: ButtonComponent;
 export default _default;