@carbon/react 1.33.1 → 1.34.0-rc.0

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

@@ -4,7 +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 DataTable from './DataTable';
+import DataTable, { type DataTableCell, type DataTableHeader, type DataTableRow, type DataTableProps, type DataTableRenderProps, type DataTableSize } from './DataTable';
 import Table from './Table';
 import TableActionList from './TableActionList';
 import TableBatchAction from './TableBatchAction';
@@ -25,5 +25,5 @@ import TableToolbarAction from './TableToolbarAction';
 import TableToolbarContent from './TableToolbarContent';
 import TableToolbarSearch from './TableToolbarSearch';
 import TableToolbarMenu from './TableToolbarMenu';
-export { DataTable, Table, TableActionList, TableBatchAction, TableBatchActions, TableBody, TableCell, TableContainer, TableExpandHeader, TableExpandRow, TableExpandedRow, TableHead, TableHeader, TableRow, TableSelectAll, TableSelectRow, TableToolbar, TableToolbarAction, TableToolbarContent, TableToolbarSearch, 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, TableToolbar, TableToolbarAction, TableToolbarContent, TableToolbarSearch, TableToolbarMenu, };
 export default DataTable;

package/es/components/DataTable/state/sortStates.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 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.
+ */
+export type DataTableSortState = 'NONE' | 'DESC' | 'ASC';
+/**
+ * We currently support the following sorting states for DataTable headers,
+ * namely: `NONE` for no sorting being applied, and then `DESC` and `ASC` for
+ * the corresponding direction of the sorting order.
+ */
+export declare const sortStates: Record<DataTableSortState, DataTableSortState>;

package/es/components/DataTableSkeleton/DataTableSkeleton.d.ts

@@ -5,46 +5,47 @@
  * LICENSE file in the root directory of this source tree.
  */
 import PropTypes from 'prop-types';
-export interface DataTableSkeletonProps {
+import { TableHTMLAttributes } from 'react';
+export interface DataTableSkeletonHeader {
     /**
-     * Specify an optional className to add.
+     * Optionally specify header label
      */
-    className?: string;
+    header?: string;
+    /**
+     * Optionally specify header key
+     */
+    key?: string;
+}
+export interface DataTableSkeletonProps extends TableHTMLAttributes<HTMLTableElement> {
     /**
      * Specify the number of columns that you want to render in the skeleton state
      */
-    columnCount: number;
+    columnCount?: number;
     /**
      * Optionally specify whether you want the Skeleton to be rendered as a
      * compact DataTable
      */
-    compact: boolean;
+    compact?: boolean;
     /**
      * Optionally specify the displayed headers
      */
-    headers?: [{
-        header: string;
-        key: string;
-    }] | {
-        header: string;
-        key: string;
-    };
+    headers?: DataTableSkeletonHeader[];
     /**
      * Specify the number of rows that you want to render in the skeleton state
      */
-    rowCount: number;
+    rowCount?: number;
     /**
      * Specify if the table header should be rendered as part of the skeleton.
      */
-    showHeader: boolean;
+    showHeader?: boolean;
     /**
      * Specify if the table toolbar should be rendered as part of the skeleton.
      */
-    showToolbar: boolean;
+    showToolbar?: boolean;
     /**
      * Optionally specify whether you want the DataTable to be zebra striped
      */
-    zebra: boolean;
+    zebra?: boolean;
 }
 declare const DataTableSkeleton: {
     ({ headers, rowCount, columnCount, zebra, compact, className, showHeader, showToolbar, ...rest }: {

package/es/components/ExpandableSearch/ExpandableSearch.d.ts

@@ -6,7 +6,7 @@
  */
 import React from 'react';
 import { type SearchProps } from '../Search';
-declare function ExpandableSearch({ onBlur, onChange, onExpand, onFocus, defaultValue, isExpanded, ...props }: SearchProps): JSX.Element;
+declare function ExpandableSearch({ onBlur, onChange, onExpand, onKeyDown, defaultValue, isExpanded, ...props }: SearchProps): JSX.Element;
 declare namespace ExpandableSearch {
     var propTypes: React.WeakValidationMap<SearchProps & React.RefAttributes<HTMLInputElement>> | undefined;
     var displayName: string;

package/es/components/ExpandableSearch/ExpandableSearch.js

@@ -12,13 +12,15 @@ import Search from '../Search/Search.js';
 import '../Search/Search.Skeleton.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { composeEventHandlers } from '../../tools/events.js';
+import { match } from '../../internal/keyboard/match.js';
+import { Escape } from '../../internal/keyboard/keys.js';
 
 function ExpandableSearch(_ref) {
   let {
     onBlur,
     onChange,
     onExpand,
-    onFocus,
+    onKeyDown,
     defaultValue,
     isExpanded,
     ...props
@@ -27,11 +29,6 @@ function ExpandableSearch(_ref) {
   const [hasContent, setHasContent] = useState(defaultValue ? true : false);
   const searchRef = useRef(null);
   const prefix = usePrefix();
-  function handleFocus() {
-    if (!expanded) {
-      setExpanded(true);
-    }
-  }
   function handleBlur(evt) {
     const relatedTargetIsAllowed = evt.relatedTarget && evt.relatedTarget.classList.contains(`${prefix}--search-close`);
     if (expanded && !relatedTargetIsAllowed && !hasContent) {
@@ -42,8 +39,19 @@ function ExpandableSearch(_ref) {
     setHasContent(evt.target.value !== '');
   }
   function handleExpand() {
+    setExpanded(true);
     searchRef.current?.focus?.();
   }
+  function handleKeyDown(evt) {
+    if (expanded && match(evt, Escape)) {
+      evt.stopPropagation();
+
+      // escape key only clears if the input is empty, otherwise it clears the input
+      if (!evt.target?.value) {
+        setExpanded(false);
+      }
+    }
+  }
   const classes = cx(`${prefix}--search--expandable`, {
     [`${prefix}--search--expanded`]: expanded
   }, props.className);
@@ -52,10 +60,10 @@ function ExpandableSearch(_ref) {
     isExpanded: expanded,
     ref: searchRef,
     className: classes,
-    onFocus: composeEventHandlers([onFocus, handleFocus]),
     onBlur: composeEventHandlers([onBlur, handleBlur]),
     onChange: composeEventHandlers([onChange, handleChange]),
-    onExpand: composeEventHandlers([onExpand, handleExpand])
+    onExpand: composeEventHandlers([onExpand, handleExpand]),
+    onKeyDown: composeEventHandlers([onKeyDown, handleKeyDown])
   }));
 }
 ExpandableSearch.propTypes = Search.propTypes;

package/es/components/InlineCheckbox/InlineCheckbox.js

@@ -59,12 +59,13 @@ const InlineCheckbox = /*#__PURE__*/React__default.forwardRef(function InlineChe
   React__default.createElement("label", {
     htmlFor: id,
     className: `${prefix}--checkbox-label`,
-    "aria-label": deprecatedAriaLabel || ariaLabel,
     title: title,
     onClick: evt => {
       evt.stopPropagation();
     }
-  }));
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: `${prefix}--visually-hidden`
+  }, deprecatedAriaLabel || ariaLabel)));
 });
 InlineCheckbox.propTypes = {
   /**

package/es/components/OverflowMenu/OverflowMenu.js

@@ -37,7 +37,7 @@ const on = function (element) {
 
 /**
  * The CSS property names of the arrow keyed by the floating menu direction.
- * @type {Object<string, string>}
+ * @type {[key: string]: string}
  */
 const triggerButtonPositionProps = {
   [DIRECTION_TOP]: 'bottom',
@@ -46,7 +46,7 @@ const triggerButtonPositionProps = {
 
 /**
  * Determines how the position of arrow should affect the floating menu position.
- * @type {Object<string, number>}
+ * @type {[key: string]: number}
  */
 const triggerButtonPositionFactors = {
   [DIRECTION_TOP]: -2,

package/es/components/Search/Search.d.ts

@@ -4,7 +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 React, { type HTMLAttributes, type ReactNode, type ComponentType, type FunctionComponent } from 'react';
+import React, { type HTMLAttributes, type ReactNode, type KeyboardEvent, type ComponentType, type FunctionComponent, type MouseEvent } from 'react';
 type InputPropsBase = Omit<HTMLAttributes<HTMLInputElement>, 'onChange'>;
 export interface SearchProps extends InputPropsBase {
     /**
@@ -54,7 +54,7 @@ export interface SearchProps extends InputPropsBase {
     /**
      * Optional callback called when the magnifier icon is clicked in ExpandableSearch.
      */
-    onExpand?(): void;
+    onExpand?(e: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>): void;
     /**
      * Provide an optional placeholder text for the Search.
      * Note: if the label and placeholder differ,

package/es/components/Search/Search.js

@@ -19,7 +19,7 @@ import deprecate from '../../prop-types/deprecate.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 import { match } from '../../internal/keyboard/match.js';
-import { Escape } from '../../internal/keyboard/keys.js';
+import { Escape, Enter, Space } from '../../internal/keyboard/keys.js';
 
 var _Close;
 const Search = /*#__PURE__*/React__default.forwardRef(function Search(_ref, forwardRef) {
@@ -53,6 +53,7 @@ const Search = /*#__PURE__*/React__default.forwardRef(function Search(_ref, forw
   } = useContext(FormContext);
   const inputRef = useRef(null);
   const ref = useMergedRefs([forwardRef, inputRef]);
+  const expandButtonRef = useRef(null);
   const inputId = useId('search-input');
   const uniqueId = id || inputId;
   const searchId = `${uniqueId}-search`;
@@ -97,7 +98,21 @@ const Search = /*#__PURE__*/React__default.forwardRef(function Search(_ref, forw
   function handleKeyDown(event) {
     if (match(event, Escape)) {
       event.stopPropagation();
-      clearInput();
+      if (inputRef.current?.value) {
+        clearInput();
+      }
+      // ExpandableSearch closes on escape when isExpanded, focus search activation button
+      else if (onExpand && isExpanded) {
+        expandButtonRef.current?.focus();
+      }
+    }
+  }
+  function handleExpandButtonKeyDown(event) {
+    if (match(event, Enter) || match(event, Space)) {
+      event.stopPropagation();
+      if (onExpand) {
+        onExpand(event);
+      }
     }
   }
   return /*#__PURE__*/React__default.createElement("div", {
@@ -108,7 +123,12 @@ const Search = /*#__PURE__*/React__default.forwardRef(function Search(_ref, forw
     "aria-labelledby": onExpand ? uniqueId : undefined,
     role: onExpand ? 'button' : undefined,
     className: `${prefix}--search-magnifier`,
-    onClick: onExpand
+    onClick: onExpand,
+    onKeyDown: handleExpandButtonKeyDown,
+    tabIndex: onExpand && !isExpanded ? 1 : -1,
+    ref: expandButtonRef,
+    "aria-expanded": onExpand && isExpanded ? true : undefined,
+    "aria-controls": onExpand ? uniqueId : undefined
   }, /*#__PURE__*/React__default.createElement(CustomSearchIcon, {
     icon: renderIcon
   })), /*#__PURE__*/React__default.createElement("label", {
@@ -127,7 +147,8 @@ const Search = /*#__PURE__*/React__default.forwardRef(function Search(_ref, forw
     onKeyDown: composeEventHandlers([onKeyDown, handleKeyDown]),
     placeholder: placeholder,
     type: type,
-    value: value
+    value: value,
+    tabIndex: onExpand && !isExpanded ? -1 : undefined
   })), /*#__PURE__*/React__default.createElement("button", {
     "aria-label": closeButtonLabelText,
     className: clearClasses,

package/es/components/Tabs/Tabs.js

@@ -194,6 +194,8 @@ function TabList(_ref2) {
     [`${prefix}--tabs--light`]: light,
     [`${prefix}--tabs__icon--default`]: iconSize === 'default',
     [`${prefix}--tabs__icon--lg`]: iconSize === 'lg',
+    // TODO: V12 - Remove this class
+    [`${prefix}--layout--size-lg`]: iconSize === 'lg',
     [`${prefix}--tabs--tall`]: hasSecondaryLabelTabs,
     [`${prefix}--tabs--full-width`]: distributeWidth
   }, customClassName);

package/es/components/Tag/Tag.js

@@ -41,6 +41,7 @@ const Tag = _ref => {
     disabled,
     onClose,
     size,
+    as: BaseComponent,
     ...other
   } = _ref;
   const prefix = usePrefix();
@@ -61,7 +62,8 @@ const Tag = _ref => {
     }
   };
   if (filter) {
-    return /*#__PURE__*/React__default.createElement("div", _extends({
+    const ComponentTag = BaseComponent ?? 'div';
+    return /*#__PURE__*/React__default.createElement(ComponentTag, _extends({
       className: tagClasses,
       id: tagId
     }, other), /*#__PURE__*/React__default.createElement("span", {
@@ -76,7 +78,7 @@ const Tag = _ref => {
       title: title
     }, _Close || (_Close = /*#__PURE__*/React__default.createElement(Close, null))));
   }
-  const ComponentTag = other.onClick ? 'button' : 'div';
+  const ComponentTag = BaseComponent ?? (other.onClick ? 'button' : 'div');
   return /*#__PURE__*/React__default.createElement(ComponentTag, _extends({
     disabled: ComponentTag === 'button' ? disabled : null,
     className: tagClasses,
@@ -88,6 +90,11 @@ const Tag = _ref => {
   }, children !== null && children !== undefined ? children : TYPES[type]));
 };
 Tag.propTypes = {
+  /**
+   * Provide an alternative tag or component to use instead of the default
+   * wrapping element
+   */
+  as: PropTypes.elementType,
   /**
    * Provide content to be rendered inside of a <Tag>
    */

package/es/components/TextArea/TextArea.js

@@ -61,7 +61,7 @@ const TextArea = /*#__PURE__*/React__default.forwardRef((props, forwardRef) => {
       if (!other.disabled && onChange) {
         // delay textCount assignation to give the textarea element value time to catch up if is a controlled input
         setTimeout(() => {
-          setTextCount(evt.target.value?.length);
+          setTextCount(evt.target?.value?.length);
         }, 0);
         onChange(evt);
       }

package/es/components/Toggle/Toggle.d.ts

@@ -19,18 +19,18 @@ export interface ToggleProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonE
     /**
      * Specify the label for the "off" position
      */
-    labelA?: string | undefined;
+    labelA?: string;
     /**
      * Specify the label for the "on" position
      */
-    labelB?: string | undefined;
+    labelB?: string;
     /**
      * Provide the text that will be read by a screen reader when visiting this
      * control. This should be provided unless 'aria-labelledby' is set instead
      * or you use an external <label> element with its "for" attribute set to the
      * toggle's id.
      */
-    labelText?: string | undefined;
+    labelText?: string;
     /**
      * If true, the side labels (props.labelA and props.labelB) will be replaced by
      * props.labelText (if passed), so that the toggle doesn't render a top label.
@@ -39,7 +39,7 @@ export interface ToggleProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonE
     /**
      * Provide an event listener that is called when the control is toggled
      */
-    onClick: MouseEventHandler<HTMLDivElement> | KeyboardEventHandler<HTMLDivElement> | undefined;
+    onClick?: MouseEventHandler<HTMLDivElement> | KeyboardEventHandler<HTMLDivElement>;
     /**
      * Provide an event listener that is called when the control is toggled
      */
@@ -47,19 +47,19 @@ export interface ToggleProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonE
     /**
      * Specify the size of the Toggle. Currently only supports 'sm' or 'md' (default)
      */
-    size?: 'sm' | 'md' | undefined;
+    size?: 'sm' | 'md';
     /**
      * Whether the toggle should be read-only
      */
-    readOnly?: boolean | undefined;
+    readOnly?: boolean;
     /**
      * Specify whether the toggle should be on by default
      */
-    defaultToggled?: boolean | undefined;
+    defaultToggled?: boolean;
     /**
      * Specify whether the control is toggled
      */
-    toggled?: boolean | undefined;
+    toggled?: boolean;
 }
 export declare function Toggle({ 'aria-labelledby': ariaLabelledby, className, defaultToggled, disabled, hideLabel, id, labelA, labelB, labelText, onClick, onToggle, readOnly, size, toggled, ...other }: ToggleProps): JSX.Element;
 export declare namespace Toggle {

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

@@ -28,11 +28,68 @@ declare namespace HeaderMenuButton {
          * Specify whether the menu button is "active".
          */
         isActive: PropTypes.Requireable<boolean>;
+        /**
+         * Specify whether the menu button is collapsible.
+         */
+        isCollapsible: PropTypes.Requireable<boolean>;
         /**
          * Optionally provide an onClick handler that is called when the underlying
          * button fires it's onclick event
          */
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        0: string;
+        length: 1;
+        toString(): string;
+        toLocaleString(): string;
+        pop(): string | undefined;
+        push(...items: string[]): number;
+        concat(...items: ConcatArray<string>[]): string[];
+        concat(...items: (string | ConcatArray<string>)[]): string[];
+        join(separator?: string | undefined): string;
+        reverse(): string[];
+        shift(): string | undefined;
+        slice(start?: number | undefined, end?: number | undefined): string[];
+        sort(compareFn?: ((a: string, b: string) => number) | undefined): [key: string];
+        splice(start: number, deleteCount?: number | undefined): string[];
+        splice(start: number, deleteCount: number, ...items: string[]): string[];
+        unshift(...items: string[]): number;
+        indexOf(searchElement: string, fromIndex?: number | undefined): number;
+        lastIndexOf(searchElement: string, fromIndex?: number | undefined): number;
+        every<S extends string>(predicate: (value: string, index: number, array: string[]) => value is S, thisArg?: any): this is S[];
+        every(predicate: (value: string, index: number, array: string[]) => unknown, thisArg?: any): boolean;
+        some(predicate: (value: string, index: number, array: string[]) => unknown, thisArg?: any): boolean;
+        forEach(callbackfn: (value: string, index: number, array: string[]) => void, thisArg?: any): void;
+        map<U>(callbackfn: (value: string, index: number, array: string[]) => U, thisArg?: any): U[];
+        filter<S_1 extends string>(predicate: (value: string, index: number, array: string[]) => value is S_1, thisArg?: any): S_1[];
+        filter(predicate: (value: string, index: number, array: string[]) => unknown, thisArg?: any): string[];
+        reduce(callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: string[]) => string): string;
+        reduce(callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: string[]) => string, initialValue: string): string;
+        reduce<U_1>(callbackfn: (previousValue: U_1, currentValue: string, currentIndex: number, array: string[]) => U_1, initialValue: U_1): U_1;
+        reduceRight(callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: string[]) => string): string;
+        reduceRight(callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: string[]) => string, initialValue: string): string;
+        reduceRight<U_2>(callbackfn: (previousValue: U_2, currentValue: string, currentIndex: number, array: string[]) => U_2, initialValue: U_2): U_2;
+        find<S_2 extends string>(predicate: (this: void, value: string, index: number, obj: string[]) => value is S_2, thisArg?: any): S_2 | undefined;
+        find(predicate: (value: string, index: number, obj: string[]) => unknown, thisArg?: any): string | undefined;
+        findIndex(predicate: (value: string, index: number, obj: string[]) => unknown, thisArg?: any): number;
+        fill(value: string, start?: number | undefined, end?: number | undefined): [key: string];
+        copyWithin(target: number, start: number, end?: number | undefined): [key: string];
+        entries(): IterableIterator<[number, string]>;
+        keys(): IterableIterator<number>;
+        values(): IterableIterator<string>;
+        includes(searchElement: string, fromIndex?: number | undefined): boolean;
+        flatMap<U_3, This = undefined>(callback: (this: This, value: string, index: number, array: string[]) => U_3 | readonly U_3[], thisArg?: This | undefined): U_3[];
+        flat<A, D extends number = 1>(this: A, depth?: D | undefined): FlatArray<A, D>[];
+        at(index: number): string | undefined;
+        [Symbol.iterator](): IterableIterator<string>;
+        [Symbol.unscopables](): {
+            copyWithin: boolean;
+            entries: boolean;
+            fill: boolean;
+            find: boolean;
+            findIndex: boolean;
+            keys: boolean;
+            values: boolean;
+        };
     };
 }
 export default HeaderMenuButton;

package/es/components/UIShell/HeaderMenuButton.js

@@ -64,6 +64,10 @@ HeaderMenuButton.propTypes = {
    * Specify whether the menu button is "active".
    */
   isActive: PropTypes.bool,
+  /**
+   * Specify whether the menu button is collapsible.
+   */
+  isCollapsible: PropTypes.bool,
   /**
    * Optionally provide an onClick handler that is called when the underlying
    * button fires it's onclick event

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

@@ -19,6 +19,62 @@ declare namespace HeaderNavigation {
          * Optionally provide a custom class to apply to the underlying <nav> node
          */
         className: PropTypes.Requireable<string>;
+        0: string;
+        length: 1;
+        toString(): string;
+        toLocaleString(): string;
+        pop(): string | undefined;
+        push(...items: string[]): number;
+        concat(...items: ConcatArray<string>[]): string[];
+        concat(...items: (string | ConcatArray<string>)[]): string[];
+        join(separator?: string | undefined): string;
+        reverse(): string[];
+        shift(): string | undefined;
+        slice(start?: number | undefined, end?: number | undefined): string[];
+        sort(compareFn?: ((a: string, b: string) => number) | undefined): [key: string];
+        splice(start: number, deleteCount?: number | undefined): string[];
+        splice(start: number, deleteCount: number, ...items: string[]): string[];
+        unshift(...items: string[]): number;
+        indexOf(searchElement: string, fromIndex?: number | undefined): number;
+        lastIndexOf(searchElement: string, fromIndex?: number | undefined): number;
+        every<S extends string>(predicate: (value: string, index: number, array: string[]) => value is S, thisArg?: any): this is S[];
+        every(predicate: (value: string, index: number, array: string[]) => unknown, thisArg?: any): boolean;
+        some(predicate: (value: string, index: number, array: string[]) => unknown, thisArg?: any): boolean;
+        forEach(callbackfn: (value: string, index: number, array: string[]) => void, thisArg?: any): void;
+        map<U>(callbackfn: (value: string, index: number, array: string[]) => U, thisArg?: any): U[];
+        filter<S_1 extends string>(predicate: (value: string, index: number, array: string[]) => value is S_1, thisArg?: any): S_1[];
+        filter(predicate: (value: string, index: number, array: string[]) => unknown, thisArg?: any): string[];
+        reduce(callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: string[]) => string): string;
+        reduce(callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: string[]) => string, initialValue: string): string;
+        reduce<U_1>(callbackfn: (previousValue: U_1, currentValue: string, currentIndex: number, array: string[]) => U_1, initialValue: U_1): U_1;
+        reduceRight(callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: string[]) => string): string;
+        reduceRight(callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: string[]) => string, initialValue: string): string;
+        reduceRight<U_2>(callbackfn: (previousValue: U_2, currentValue: string, currentIndex: number, array: string[]) => U_2, initialValue: U_2): U_2;
+        find<S_2 extends string>(predicate: (this: void, value: string, index: number, obj: string[]) => value is S_2, thisArg?: any): S_2 | undefined;
+        find(predicate: (value: string, index: number, obj: string[]) => unknown, thisArg?: any): string | undefined;
+        findIndex(predicate: (value: string, index: number, obj: string[]) => unknown, thisArg?: any): number;
+        fill(value: string, start?: number | undefined, end?: number | undefined): [key: string];
+        copyWithin(target: number, start: number, end?: number | undefined): [key: string];
+        entries(): IterableIterator<[number, string]>;
+        keys(): IterableIterator<number>;
+        values(): IterableIterator<string>;
+        includes(searchElement: string, fromIndex?: number | undefined): boolean;
+        flatMap<U_3, This = undefined>(callback: (this: This, value: string, index: number, array: string[]) => U_3 | readonly U_3[], thisArg?: This | undefined): U_3[];
+        flat<A, D extends number = 1>(this: A, depth?: D | undefined): FlatArray<A, D>[];
+        at(index: number): string | undefined; /**
+         * Provide valid children of HeaderNavigation, for example `HeaderMenuItem`
+         * or `HeaderMenu`
+         */
+        [Symbol.iterator](): IterableIterator<string>;
+        [Symbol.unscopables](): {
+            copyWithin: boolean;
+            entries: boolean;
+            fill: boolean;
+            find: boolean;
+            findIndex: boolean;
+            keys: boolean;
+            values: boolean;
+        };
     };
 }
 export default HeaderNavigation;

package/es/components/UIShell/HeaderPanel.js

@@ -39,7 +39,7 @@ const HeaderPanel = /*#__PURE__*/React__default.forwardRef(function HeaderPanel(
   const eventHandlers = {};
   if (addFocusListeners) {
     eventHandlers.onBlur = event => {
-      if (!event.currentTarget.contains(event.relatedTarget) && !lastClickedElement.classList.contains('cds--switcher__item-link')) {
+      if (!event.currentTarget.contains(event.relatedTarget) && !lastClickedElement?.classList?.contains('cds--switcher__item-link')) {
         setExpandedState(false);
         setLastClickedElement(null);
         if (expanded) {

package/es/components/UIShell/Switcher.js

@@ -57,12 +57,23 @@ const Switcher = /*#__PURE__*/React__default.forwardRef(function Switcher(props,
     const switcherItem = switcherRef.current.children[nextValidIndex].children[0];
     switcherItem?.focus();
   };
-  const childrenWithProps = React__default.Children.toArray(children).map((child, index) => /*#__PURE__*/React__default.cloneElement(child, {
-    handleSwitcherItemFocus,
-    index,
-    key: index,
-    expanded
-  }));
+  const childrenWithProps = React__default.Children.toArray(children).map((child, index) => {
+    // handleSwitcherItemFocus should only be passed down if the child is a SwitcherItem
+    // SwitcherDivider, for example, does not accept a handleSwitcherItemFocus prop
+    if (child.type?.displayName === 'SwitcherItem') {
+      return /*#__PURE__*/React__default.cloneElement(child, {
+        handleSwitcherItemFocus,
+        index,
+        key: index,
+        expanded
+      });
+    }
+    return /*#__PURE__*/React__default.cloneElement(child, {
+      index,
+      key: index,
+      expanded
+    });
+  });
   return /*#__PURE__*/React__default.createElement("ul", _extends({
     ref: ref,
     className: className

package/es/prop-types/isRequiredOneOf.js

@@ -6,8 +6,8 @@
  */
 
 /**
- * @param {Object<string, Function>} propTypes The list of type checkers, keyed by prop names.
- * @returns {Object<string, Function>}
+ * @param {[key: string]: Function)} propTypes The list of type checkers, keyed by prop names.
+ * @returns {[key: string]: Function}
  *   The new prop type checkers that checks if one of the given props exist,
  *   in addition to the original type checkings.
  */

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

@@ -33,7 +33,7 @@ interface ButtonBaseProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
      */
     iconDescription?: string;
     /**
-     * Specify whether the Button is expressive, or not
+     * Specify whether the Button is expressive, or not. Only applies to the large/default button size.
      */
     isExpressive?: boolean;
     /**

package/lib/components/ComposedModal/ComposedModal.js

@@ -187,25 +187,24 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
     }
   });
   React.useEffect(() => {
+    const initialFocus = focusContainerElement => {
+      const containerElement = focusContainerElement || innerModal.current;
+      const primaryFocusElement = containerElement ? containerElement.querySelector(selectorPrimaryFocus) : null;
+      if (primaryFocusElement) {
+        return primaryFocusElement;
+      }
+      return button && button.current;
+    };
     const focusButton = focusContainerElement => {
-      if (focusContainerElement) {
-        const primaryFocusElement = focusContainerElement.querySelector(selectorPrimaryFocus);
-        if (primaryFocusElement) {
-          primaryFocusElement.focus();
-          return;
-        }
-        if (button.current) {
-          button.current.focus();
-        }
+      const target = initialFocus(focusContainerElement);
+      if (target) {
+        target.focus();
       }
     };
-    if (!open) {
-      return;
-    }
-    if (innerModal.current) {
+    if (open && isOpen) {
       focusButton(innerModal.current);
     }
-  }, [open, selectorPrimaryFocus]);
+  }, [open, selectorPrimaryFocus, isOpen]);
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
     role: "presentation",
     ref: ref,