@carbon/react 1.41.2 → 1.42.0

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

@@ -23,7 +23,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const TableExpandRow = _ref => {
+const TableExpandRow = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
   let {
     ['aria-controls']: ariaControls,
     ['aria-label']: ariaLabel,
@@ -45,6 +45,7 @@ const TableExpandRow = _ref => {
   }, rowClassName);
   const previousValue = isExpanded ? 'collapsed' : undefined;
   return /*#__PURE__*/React__default["default"].createElement("tr", _rollupPluginBabelHelpers["extends"]({}, rest, {
+    ref: ref,
     className: className,
     "data-parent-row": true
   }), /*#__PURE__*/React__default["default"].createElement(TableCell["default"], {
@@ -63,17 +64,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__default["default"].string,
   /**
    * Specify the string read by a voice reader when the expand trigger is
    * focused
    */
+  /**@ts-ignore*/
   ['aria-label']: PropTypes__default["default"].string,
   /**
    * Deprecated, please use `aria-label` instead.
@@ -105,5 +108,6 @@ TableExpandRow.propTypes = {
    */
   onExpand: PropTypes__default["default"].func.isRequired
 };
+TableExpandRow.displayName = 'TableExpandRow';
 
 exports["default"] = TableExpandRow;

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

@@ -54,22 +54,39 @@ FluidMultiSelect.propTypes = {
    */
   className: PropTypes__default["default"].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__default["default"].string,
+  /**
+   * Specify the text that should be read for screen readers to clear selection.
+   */
+  clearSelectionText: PropTypes__default["default"].string,
+  /**
+   * Provide a compare function that is used to determine the ordering of
+   * options. See 'sortItems' for more control.
+   */
+  compareItems: PropTypes__default["default"].func,
+  /**
+   * Specify the direction of the multiselect dropdown. Can be either top or bottom.
    */
   direction: PropTypes__default["default"].oneOf(['top', 'bottom']),
   /**
    * Specify whether the `<input>` should be disabled
    */
   disabled: PropTypes__default["default"].bool,
+  /**
+   * Additional props passed to Downshift
+   */
+  downshiftProps: PropTypes__default["default"].object,
   /**
    * Specify a custom `id` for the `<input>`
    */
   id: PropTypes__default["default"].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__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].string, PropTypes__default["default"].number]),
+  initialSelectedItems: PropTypes__default["default"].array,
   /**
    * Specify if the currently selected value is invalid.
    */
@@ -107,20 +124,62 @@ FluidMultiSelect.propTypes = {
    * this field is for
    */
   label: PropTypes__default["default"].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__default["default"].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__default["default"].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__default["default"].func,
+  onInputValueChange: PropTypes__default["default"].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__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].string, PropTypes__default["default"].number]),
+  onMenuChange: PropTypes__default["default"].func,
+  /**
+   * Whether or not the Multiselect is readonly
+   */
+  readOnly: PropTypes__default["default"].bool,
+  /**
+   * For full control of the selected items
+   */
+  selectedItems: PropTypes__default["default"].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__default["default"].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__default["default"].func,
   /**
    * Provide the title text that will be read by a screen reader when
    * visiting this control
@@ -130,6 +189,10 @@ FluidMultiSelect.propTypes = {
    * Callback function for translating ListBoxMenuIcon SVG title
    */
   translateWithId: PropTypes__default["default"].func,
+  /**
+   * Specify title to show title on hover
+   */
+  useTitleInItem: PropTypes__default["default"].bool,
   /**
    * Specify whether the control is currently in warning state
    */

package/lib/components/Notification/Notification.js

@@ -23,6 +23,7 @@ var useNoInteractiveChildren = require('../../internal/useNoInteractiveChildren.
 var usePrefix = require('../../internal/usePrefix.js');
 var useId = require('../../internal/useId.js');
 var noopFn = require('../../internal/noopFn.js');
+var wrapFocus = require('../../internal/wrapFocus.js');
 var Text = require('../Text/Text.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
@@ -516,12 +517,40 @@ function ActionableNotification(_ref6) {
     [`${prefix}--actionable-notification--${kind}`]: kind,
     [`${prefix}--actionable-notification--hide-close-button`]: hideCloseButton
   });
+  const innerModal = React.useRef(null);
+  const startTrap = React.useRef(null);
+  const endTrap = React.useRef(null);
   const ref = React.useRef(null);
   useIsomorphicEffect["default"](() => {
-    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["default"]({
+        bodyNode,
+        startTrapNode,
+        endTrapNode,
+        currentActiveNode,
+        oldActiveNode
+      });
+    }
+  }
   const handleClose = evt => {
     if (!onClose || onClose(evt) !== false) {
       setIsOpen(false);
@@ -539,8 +568,14 @@ function ActionableNotification(_ref6) {
     ref: ref,
     role: role,
     className: containerClassName,
-    "aria-labelledby": title ? id : subtitleId
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    "aria-labelledby": title ? id : subtitleId,
+    onBlur: handleBlur
+  }), /*#__PURE__*/React__default["default"].createElement("span", {
+    ref: startTrap,
+    tabIndex: 0,
+    role: "link",
+    className: `${prefix}--visually-hidden`
+  }, "Focus sentinel"), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--actionable-notification__details`
   }, /*#__PURE__*/React__default["default"].createElement(NotificationIcon, {
     notificationType: inline ? 'inline' : 'toast',
@@ -558,14 +593,21 @@ function ActionableNotification(_ref6) {
     as: "div",
     className: `${prefix}--actionable-notification__subtitle`,
     id: subtitleId
-  }, subtitle), children))), actionButtonLabel && /*#__PURE__*/React__default["default"].createElement(NotificationActionButton, {
+  }, subtitle), children))), /*#__PURE__*/React__default["default"].createElement("div", {
+    ref: innerModal
+  }, actionButtonLabel && /*#__PURE__*/React__default["default"].createElement(NotificationActionButton, {
     onClick: onActionButtonClick,
     inline: inline
   }, actionButtonLabel), !hideCloseButton && /*#__PURE__*/React__default["default"].createElement(NotificationButton, {
     "aria-label": deprecatedAriaLabel || ariaLabel,
     notificationType: "actionable",
     onClick: handleCloseButtonClick
-  }));
+  })), /*#__PURE__*/React__default["default"].createElement("span", {
+    ref: endTrap,
+    tabIndex: 0,
+    role: "link",
+    className: `${prefix}--visually-hidden`
+  }, "Focus sentinel"));
 }
 ActionableNotification.propTypes = {
   /**

package/lib/components/Tabs/Tabs.js

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

package/lib/components/TreeView/TreeNode.js

@@ -25,7 +25,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-function TreeNode(_ref) {
+const TreeNode = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
   let {
     active,
     children,
@@ -230,7 +230,8 @@ function TreeNode(_ref) {
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/role-supports-aria-props
     React__default["default"].createElement("li", _rollupPluginBabelHelpers["extends"]({}, treeNodeProps, {
-      "aria-expanded": !!expanded
+      "aria-expanded": !!expanded,
+      ref: ref
     }), /*#__PURE__*/React__default["default"].createElement("div", {
       className: `${prefix}--tree-node__label`,
       ref: currentNodeLabel
@@ -249,7 +250,7 @@ function TreeNode(_ref) {
       className: `${prefix}--tree-node__children`
     }, nodesWithProps))
   );
-}
+});
 TreeNode.propTypes = {
   /**
    * The value of the active node in the tree
@@ -309,5 +310,7 @@ TreeNode.propTypes = {
    */
   value: PropTypes__default["default"].string
 };
+TreeNode.displayName = 'TreeNode';
+var TreeNode$1 = TreeNode;
 
-exports["default"] = TreeNode;
+exports["default"] = TreeNode$1;

package/lib/components/UIShell/HeaderMenu.js

@@ -158,7 +158,7 @@ class HeaderMenu extends React__default["default"].Component {
       onKeyDown,
       ...rest
     } = this.props;
-    const hasActiveChildren = React__default["default"].Children.toArray(children).some(child => child.props.isActive || child.props.isCurrentPage);
+    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 accessibilityLabel = {
       'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledBy
@@ -173,7 +173,7 @@ class HeaderMenu extends React__default["default"].Component {
       [`${prefix}--header__menu-title`]: true,
       // We set the current class only if `isActive` is passed in and we do
       // not have an `aria-current="page"` set for the breadcrumb item
-      [`${prefix}--header__menu-item--current`]: isActivePage || hasActiveChildren && !this.state.expanded
+      [`${prefix}--header__menu-item--current`]: isActivePage || hasActiveDescendant(children) && !this.state.expanded
     });
 
     // Notes on eslint comments and based on the examples in:

package/lib/components/UIShell/SideNav.d.ts

@@ -25,5 +25,5 @@ interface SideNavContextData {
     isRail?: boolean | undefined;
 }
 export declare const SideNavContext: React.Context<SideNavContextData>;
-declare const SideNav: React.ForwardRefExoticComponent<Pick<SideNavProps, "children" | "slot" | "style" | "title" | "className" | "dir" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "onToggle" | "key" | "id" | "aria-controls" | "aria-expanded" | "onClick" | "onAnimationEnd" | "onKeyDown" | "tabIndex" | "color" | "lang" | "role" | "href" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "expanded" | "enterDelayMs" | "defaultExpanded" | "addFocusListeners" | "isChildOfHeader" | "isFixedNav" | "isRail" | "isPersistent" | "addMouseListeners" | "onOverlayClick" | "onSideNavBlur" | "inert"> & React.RefAttributes<HTMLElement>>;
+declare const SideNav: React.ForwardRefExoticComponent<Pick<SideNavProps, "children" | "slot" | "style" | "title" | "className" | "dir" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "onToggle" | "key" | "id" | "aria-controls" | "aria-expanded" | "onClick" | "onAnimationEnd" | "onKeyDown" | "tabIndex" | "color" | "lang" | "role" | "href" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "expanded" | "enterDelayMs" | "defaultExpanded" | "inert" | "addFocusListeners" | "isChildOfHeader" | "isFixedNav" | "isRail" | "isPersistent" | "addMouseListeners" | "onOverlayClick" | "onSideNavBlur"> & React.RefAttributes<HTMLElement>>;
 export default SideNav;

package/lib/components/UIShell/SideNavFooter.d.ts

@@ -0,0 +1,52 @@
+/**
+ * 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 PropTypes from 'prop-types';
+export interface SideNavFooterProps {
+    /**
+     * Provide text to be read to screen readers and shown as a tooltip when
+     * interacting with the toggle button in the footer
+     */
+    assistiveText: string;
+    className?: string;
+    /**
+     * Specify whether the side navigation is expanded or collapsed
+     */
+    expanded: boolean;
+    /**
+     * Provide a function that is called when the toggle button is interacted
+     * with. Useful for controlling the expansion state of the side navigation.
+     */
+    onToggle: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+/**
+ * SideNavFooter is used for rendering the button at the bottom of the side
+ * navigation that is a part of the UI Shell. It is responsible for handling the
+ * user interaction to expand or collapse the side navigation.
+ */
+declare function SideNavFooter({ assistiveText, className: customClassName, expanded, onToggle, }: SideNavFooterProps): JSX.Element;
+declare namespace SideNavFooter {
+    var displayName: string;
+    var propTypes: {
+        /**
+         * Provide text to be read to screen readers and shown as a tooltip when
+         * interacting with the toggle button in the footer
+         */
+        assistiveText: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify whether the side navigation is expanded or collapsed
+         */
+        expanded: PropTypes.Validator<boolean>;
+        /**
+         * Provide a function that is called when the toggle button is interacted
+         * with. Useful for controlling the expansion state of the side navigation.
+         */
+        onToggle: PropTypes.Validator<(...args: any[]) => any>;
+    };
+}
+export default SideNavFooter;

package/lib/components/UIShell/SideNavFooter.js

@@ -22,7 +22,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
 var _Close, _ChevronRight;
-
 /**
  * SideNavFooter is used for rendering the button at the bottom of the side
  * navigation that is a part of the UI Shell. It is responsible for handling the

package/lib/components/UIShell/SideNavItem.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';
+interface SideNavItemProps {
+    /**
+     * Provide a single icon as the child to `SideNavItem` to render in the
+     * container
+     */
+    children: React.ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node
+     */
+    className?: string;
+    /**
+     * Specify if this is a large variation of the SideNavItem
+     */
+    large?: boolean;
+}
+declare const SideNavItem: React.FC<SideNavItemProps>;
+export default SideNavItem;

package/lib/components/UIShell/SideNavItem.js

@@ -20,7 +20,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-function SideNavItem(_ref) {
+const SideNavItem = _ref => {
   let {
     className: customClassName,
     children,
@@ -35,7 +35,7 @@ function SideNavItem(_ref) {
   return /*#__PURE__*/React__default["default"].createElement("li", {
     className: className
   }, children);
-}
+};
 SideNavItem.propTypes = {
   /**
    * Provide a single icon as the child to `SideNavItem` to render in the

package/lib/components/UIShell/SideNavItems.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 from 'react';
+interface SideNavItemsProps {
+    /**
+     * Provide a single icon as the child to `SideNavIcon` to render in the
+     * container
+     */
+    children: React.ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node
+     */
+    className?: string;
+    /**
+     * Property to indicate if the side nav container is open (or not). Use to
+     * keep local state and styling in step with the SideNav expansion state.
+     */
+    isSideNavExpanded?: boolean;
+}
+declare const SideNavItems: React.FC<SideNavItemsProps>;
+export default SideNavItems;

package/lib/components/UIShell/SideNavItems.js

@@ -32,11 +32,14 @@ const SideNavItems = _ref => {
   const childrenWithExpandedState = React__default["default"].Children.map(children, child => {
     if ( /*#__PURE__*/React__default["default"].isValidElement(child)) {
       // avoid spreading `isSideNavExpanded` to non-Carbon UI Shell children
-      return /*#__PURE__*/React__default["default"].cloneElement(child, {
-        ...(_utils.CARBON_SIDENAV_ITEMS.includes(child.type?.displayName) ? {
-          isSideNavExpanded
-        } : {})
-      });
+      const childType = child.type;
+      if (childType && childType.displayName) {
+        return /*#__PURE__*/React__default["default"].cloneElement(child, {
+          ...(_utils.CARBON_SIDENAV_ITEMS.includes(childType.displayName) ? {
+            isSideNavExpanded
+          } : {})
+        });
+      }
     }
   });
   return /*#__PURE__*/React__default["default"].createElement("ul", {
@@ -60,6 +63,5 @@ SideNavItems.propTypes = {
    */
   isSideNavExpanded: PropTypes__default["default"].bool
 };
-var SideNavItems$1 = SideNavItems;
 
-exports["default"] = SideNavItems$1;
+exports["default"] = SideNavItems;

package/lib/components/UIShell/SideNavMenu.js

@@ -44,7 +44,7 @@ const SideNavMenu = /*#__PURE__*/React__default["default"].forwardRef(function S
   const [prevExpanded, setPrevExpanded] = React.useState(defaultExpanded);
   const className = cx__default["default"]({
     [`${prefix}--side-nav__item`]: true,
-    [`${prefix}--side-nav__item--active`]: isActive || hasActiveChild(children) && !isExpanded,
+    [`${prefix}--side-nav__item--active`]: isActive || hasActiveDescendant(children) && !isExpanded,
     [`${prefix}--side-nav__item--icon`]: IconElement,
     [`${prefix}--side-nav__item--large`]: large,
     [customClassName]: !!customClassName
@@ -76,8 +76,7 @@ const SideNavMenu = /*#__PURE__*/React__default["default"].forwardRef(function S
       type: "button",
       tabIndex: tabIndex === undefined ? !isSideNavExpanded && !isRail ? -1 : 0 : tabIndex
     }, IconElement && /*#__PURE__*/React__default["default"].createElement(SideNavIcon["default"], null, /*#__PURE__*/React__default["default"].createElement(IconElement, null)), /*#__PURE__*/React__default["default"].createElement("span", {
-      className: `${prefix}--side-nav__submenu-title`,
-      title: title
+      className: `${prefix}--side-nav__submenu-title`
     }, title), /*#__PURE__*/React__default["default"].createElement(SideNavIcon["default"], {
       className: `${prefix}--side-nav__submenu-chevron`,
       small: true
@@ -137,7 +136,7 @@ SideNavMenu.propTypes = {
 Defining the children parameter with the type ReactNode | ReactNode[]. This allows for various possibilities:
 a single element, an array of elements, or null or undefined.
 **/
-function hasActiveChild(children) {
+function hasActiveDescendant(children) {
   if (Array.isArray(children)) {
     return children.some(child => {
       if (! /*#__PURE__*/React__default["default"].isValidElement(child)) {
@@ -148,7 +147,7 @@ function hasActiveChild(children) {
       safety when accessing their props.
       **/
       const props = child.props;
-      if (props.isActive === true || props['aria-current']) {
+      if (props.isActive === true || props['aria-current'] || props.children instanceof Array && hasActiveDescendant(props.children)) {
         return true;
       }
       return false;