@carbon/react 1.47.0-rc.0 → 1.48.0-rc.0

package/lib/components/Button/Button.js

@@ -28,6 +28,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["default"].forwardRef(function Button(_ref, ref) {
   let {
     as,
@@ -60,7 +66,6 @@ const Button = /*#__PURE__*/React__default["default"].forwardRef(function Button
     // Prevent clicks on the tooltip from triggering the button click event
     if (evt.target === tooltipRef.current) {
       evt.preventDefault();
-      return;
     }
   };
   const buttonClasses = cx__default["default"](className, {
@@ -123,7 +128,7 @@ const Button = /*#__PURE__*/React__default["default"].forwardRef(function Button
     component = 'a';
     otherProps = anchorProps;
   }
-  if (!hasIconOnly) {
+  if (!isIconOnlyButton(hasIconOnly)) {
     return /*#__PURE__*/React__default["default"].createElement(component, {
       onMouseEnter,
       onMouseLeave,
@@ -161,7 +166,7 @@ const Button = /*#__PURE__*/React__default["default"].forwardRef(function Button
       onFocus: onFocus,
       onBlur: onBlur,
       onClick: events.composeEventHandlers([onClick, handleClick])
-    }, rest, commonProps, otherProps), iconOnlyImage ? iconOnlyImage : children);
+    }, rest, commonProps, otherProps), iconOnlyImage ?? children);
   }
 });
 Button.displayName = 'Button';
@@ -216,6 +221,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__default["default"].oneOf(ButtonKinds),
   /**
    * Provide an optional function to be called when the button element

package/lib/components/ComposedModal/ModalHeader.js

@@ -15,6 +15,7 @@ var PropTypes = require('prop-types');
 var cx = require('classnames');
 var iconsReact = require('@carbon/icons-react');
 var usePrefix = require('../../internal/usePrefix.js');
+var index = require('../IconButton/index.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -55,16 +56,21 @@ const ModalHeader = /*#__PURE__*/React__default["default"].forwardRef(function M
     className: labelClass
   }, label), title && /*#__PURE__*/React__default["default"].createElement("h3", {
     className: titleClass
-  }, title), children, /*#__PURE__*/React__default["default"].createElement("button", {
-    onClick: handleCloseButtonClick,
+  }, title), children, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--modal-close-button`
+  }, /*#__PURE__*/React__default["default"].createElement(index.IconButton, {
     className: closeClass,
+    label: iconDescription,
+    onClick: handleCloseButtonClick,
     title: iconDescription,
     "aria-label": iconDescription,
-    type: "button"
+    align: "left"
   }, /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, {
     size: 20,
+    "aria-hidden": "true",
+    tabIndex: "-1",
     className: closeIconClass
-  })));
+  }))));
 });
 ModalHeader.propTypes = {
   /**

package/lib/components/DangerButton/DangerButton.js

@@ -18,8 +18,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const DangerButton = props => /*#__PURE__*/React__default["default"].createElement(Button["default"], _rollupPluginBabelHelpers["extends"]({
+const DangerButton = props => /*#__PURE__*/React__default["default"].createElement(Button["default"], _rollupPluginBabelHelpers["extends"]({}, props, {
   kind: "danger"
-}, props));
+}));
 
 exports["default"] = DangerButton;

package/lib/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/lib/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/lib/components/DataTable/TableExpandRow.js

@@ -87,7 +87,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__default["default"].string,
   /**
    * Specify the string read by a voice reader when the expand trigger is

package/lib/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/lib/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/lib/components/DatePicker/DatePicker.js

@@ -348,7 +348,7 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
       }
     }
     function handleOnChange(event) {
-      if (datePickerType == 'single') {
+      if (datePickerType == 'single' && closeOnSelect) {
         calendar.calendarContainer.classList.remove('open');
       }
       const {
@@ -413,7 +413,8 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
         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/lib/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/lib/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/lib/components/ExpandableSearch/ExpandableSearch.js

@@ -40,10 +40,13 @@ function ExpandableSearch(_ref) {
   const prefix = usePrefix.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);
     }
   }
+  React.useEffect(() => {
+    setExpanded(!!isExpanded);
+  }, [isExpanded]);
   function handleChange(evt) {
     setHasContent(evt.target.value !== '');
   }
@@ -56,7 +59,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/lib/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/lib/components/IconButton/index.js

@@ -25,8 +25,9 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const IconButton = /*#__PURE__*/React__default["default"].forwardRef(function IconButton(props, ref) {
-  const {
+const IconButtonKinds = ['primary', 'secondary', 'ghost', 'tertiary'];
+const IconButton = /*#__PURE__*/React__default["default"].forwardRef(function IconButton(_ref, ref) {
+  let {
     align,
     children,
     className,
@@ -41,7 +42,7 @@ const IconButton = /*#__PURE__*/React__default["default"].forwardRef(function Ic
     size,
     isSelected,
     ...rest
-  } = props;
+  } = _ref;
   const prefix = usePrefix.usePrefix();
   const tooltipClasses = cx__default["default"](wrapperClasses, `${prefix}--icon-tooltip`, {
     [`${prefix}--icon-tooltip--disabled`]: disabled
@@ -101,7 +102,7 @@ IconButton.propTypes = {
   /**
    * Specify the type of button to be used as the base for the IconButton
    */
-  kind: PropTypes__default["default"].oneOf(['primary', 'secondary', 'ghost', 'tertiary']),
+  kind: PropTypes__default["default"].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.
@@ -124,3 +125,4 @@ IconButton.propTypes = {
 };
 
 exports.IconButton = IconButton;
+exports.IconButtonKinds = IconButtonKinds;

package/lib/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/lib/components/ListBox/ListBoxMenuIcon.js

@@ -21,13 +21,9 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-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];
 /**
@@ -59,11 +55,10 @@ ListBoxMenuIcon.propTypes = {
   isOpen: PropTypes__default["default"].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__default["default"].func
 };
 
 exports["default"] = ListBoxMenuIcon;
-exports.translationIds = translationIds;

package/lib/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/lib/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/lib/components/Modal/Modal.js

@@ -23,6 +23,7 @@ var requiredIfGivenPropIsTruthy = require('../../prop-types/requiredIfGivenPropI
 var wrapFocus = require('../../internal/wrapFocus.js');
 var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var index = require('../IconButton/index.js');
 var noopFn = require('../../internal/noopFn.js');
 require('../Text/index.js');
 var Text = require('../Text/Text.js');
@@ -61,7 +62,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
     shouldSubmitOnEnter,
     size,
     hasScrollingContent = false,
-    closeButtonLabel,
+    closeButtonLabel = 'Close',
     preventCloseOnClickOutside = false,
     isFullWidth,
     launcherButtonRef,
@@ -211,19 +212,22 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
       size: 'lg'
     });
   }
-  const modalButton = /*#__PURE__*/React__default["default"].createElement("button", {
+  const modalButton = /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--modal-close-button`
+  }, /*#__PURE__*/React__default["default"].createElement(index.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["default"].createElement(iconsReact.Close, {
     size: 20,
     "aria-hidden": "true",
     tabIndex: "-1",
     className: `${modalCloseButtonClass}__icon`
-  }));
+  })));
   const modalBody = /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     ref: innerModal,
     role: "dialog"

package/lib/components/TreeView/TreeNode.js

@@ -32,6 +32,7 @@ const TreeNode = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     className,
     depth,
     disabled,
+    id: nodeId,
     isExpanded,
     label,
     onNodeFocusEvent,
@@ -45,7 +46,7 @@ const TreeNode = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
   } = _ref;
   const {
     current: id
-  } = React.useRef(rest.id || uniqueId["default"]());
+  } = React.useRef(nodeId || uniqueId["default"]());
   const [expanded, setExpanded] = React.useState(isExpanded);
   const currentNode = React.useRef(null);
   const currentNodeLabel = React.useRef(null);
@@ -256,7 +257,8 @@ const TreeNode = /*#__PURE__*/React__default["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__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
   /**
@@ -268,13 +270,18 @@ TreeNode.propTypes = {
    */
   className: PropTypes__default["default"].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__default["default"].number,
   /**
    * Specify if the TreeNode is disabled
    */
   disabled: PropTypes__default["default"].bool,
+  /**
+   * Specify the TreeNode's ID. Must be unique in the DOM and is used for props.active and props.selected
+   */
+  id: PropTypes__default["default"].string,
   /**
    * Specify if the TreeNode is expanded (only applicable to parent nodes)
    */
@@ -305,6 +312,7 @@ TreeNode.propTypes = {
    */
   renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].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__default["default"].arrayOf(PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])),

package/lib/components/TreeView/TreeView.js

@@ -202,7 +202,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__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
   /**

package/lib/components/UIShell/HeaderMenu.js

@@ -158,7 +158,7 @@ class HeaderMenu extends React__default["default"].Component {
       onKeyDown,
       ...rest
     } = this.props;
-    const hasActiveDescendant = childrenArg => React__default["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["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/lib/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/lib/components/UIShell/SwitcherItem.js

@@ -98,6 +98,10 @@ SwitcherItem.propTypes = {
    * Specify the index of the SwitcherItem
    */
   index: PropTypes__default["default"].number,
+  /**
+   * event handlers
+   */
+  onClick: PropTypes__default["default"].func,
   /**
    * event handlers
    */

package/lib/index.js

@@ -394,6 +394,7 @@ exports.unstable_useFeatureFlags = index.useFeatureFlags;
 exports.Heading = index$d.Heading;
 exports.Section = index$d.Section;
 exports.IconButton = index$e.IconButton;
+exports.IconButtonKinds = index$e.IconButtonKinds;
 exports.Layer = index$f.Layer;
 exports.useLayer = index$f.useLayer;
 exports.unstable_Layout = index$1.Layout;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.47.0-rc.0",
+  "version": "1.48.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -49,13 +49,13 @@
   "dependencies": {
     "@babel/runtime": "^7.18.3",
     "@carbon/feature-flags": "^0.16.0",
-    "@carbon/icons-react": "^11.33.0",
+    "@carbon/icons-react": "^11.34.0-rc.0",
     "@carbon/layout": "^11.20.0",
-    "@carbon/styles": "^1.47.0-rc.0",
+    "@carbon/styles": "^1.48.0-rc.0",
     "@ibm/telemetry-js": "^1.1.0",
-    "classnames": "2.5.0",
+    "classnames": "2.5.1",
     "copy-to-clipboard": "^3.3.1",
-    "downshift": "8.2.4",
+    "downshift": "8.3.1",
     "flatpickr": "4.6.9",
     "invariant": "^2.2.3",
     "lodash.debounce": "^4.0.8",
@@ -79,7 +79,7 @@
     "@babel/preset-react": "^7.22.3",
     "@babel/preset-typescript": "^7.21.5",
     "@carbon/test-utils": "^10.30.0",
-    "@carbon/themes": "^11.28.0",
+    "@carbon/themes": "^11.29.0-rc.0",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
@@ -139,5 +139,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "c5ffdecd6cac213d5edc6aef7ab9157db1ca17e9"
+  "gitHead": "5eb449df62a21a69a467895cb94d758ba8554620"
 }