@carbon/react 1.33.1 → 1.34.0-rc.0

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

@@ -16,6 +16,8 @@ var Search = require('../Search/Search.js');
 require('../Search/Search.Skeleton.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var events = require('../../tools/events.js');
+var match = require('../../internal/keyboard/match.js');
+var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -27,7 +29,7 @@ function ExpandableSearch(_ref) {
     onBlur,
     onChange,
     onExpand,
-    onFocus,
+    onKeyDown,
     defaultValue,
     isExpanded,
     ...props
@@ -36,11 +38,6 @@ function ExpandableSearch(_ref) {
   const [hasContent, setHasContent] = React.useState(defaultValue ? true : false);
   const searchRef = React.useRef(null);
   const prefix = usePrefix.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) {
@@ -51,8 +48,19 @@ function ExpandableSearch(_ref) {
     setHasContent(evt.target.value !== '');
   }
   function handleExpand() {
+    setExpanded(true);
     searchRef.current?.focus?.();
   }
+  function handleKeyDown(evt) {
+    if (expanded && match.match(evt, keys.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__default["default"](`${prefix}--search--expandable`, {
     [`${prefix}--search--expanded`]: expanded
   }, props.className);
@@ -61,10 +69,10 @@ function ExpandableSearch(_ref) {
     isExpanded: expanded,
     ref: searchRef,
     className: classes,
-    onFocus: events.composeEventHandlers([onFocus, handleFocus]),
     onBlur: events.composeEventHandlers([onBlur, handleBlur]),
     onChange: events.composeEventHandlers([onChange, handleChange]),
-    onExpand: events.composeEventHandlers([onExpand, handleExpand])
+    onExpand: events.composeEventHandlers([onExpand, handleExpand]),
+    onKeyDown: events.composeEventHandlers([onKeyDown, handleKeyDown])
   }));
 }
 ExpandableSearch.propTypes = Search["default"].propTypes;

package/lib/components/InlineCheckbox/InlineCheckbox.js

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

package/lib/components/OverflowMenu/OverflowMenu.js

@@ -48,7 +48,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 = {
   [FloatingMenu.DIRECTION_TOP]: 'bottom',
@@ -57,7 +57,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 = {
   [FloatingMenu.DIRECTION_TOP]: -2,

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

@@ -63,6 +63,7 @@ const Search = /*#__PURE__*/React__default["default"].forwardRef(function Search
   } = React.useContext(FormContext.FormContext);
   const inputRef = React.useRef(null);
   const ref = useMergedRefs.useMergedRefs([forwardRef, inputRef]);
+  const expandButtonRef = React.useRef(null);
   const inputId = useId.useId('search-input');
   const uniqueId = id || inputId;
   const searchId = `${uniqueId}-search`;
@@ -107,7 +108,21 @@ const Search = /*#__PURE__*/React__default["default"].forwardRef(function Search
   function handleKeyDown(event) {
     if (match.match(event, keys.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.match(event, keys.Enter) || match.match(event, keys.Space)) {
+      event.stopPropagation();
+      if (onExpand) {
+        onExpand(event);
+      }
     }
   }
   return /*#__PURE__*/React__default["default"].createElement("div", {
@@ -118,7 +133,12 @@ const Search = /*#__PURE__*/React__default["default"].forwardRef(function Search
     "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["default"].createElement(CustomSearchIcon, {
     icon: renderIcon
   })), /*#__PURE__*/React__default["default"].createElement("label", {
@@ -137,7 +157,8 @@ const Search = /*#__PURE__*/React__default["default"].forwardRef(function Search
     onKeyDown: events.composeEventHandlers([onKeyDown, handleKeyDown]),
     placeholder: placeholder,
     type: type,
-    value: value
+    value: value,
+    tabIndex: onExpand && !isExpanded ? -1 : undefined
   })), /*#__PURE__*/React__default["default"].createElement("button", {
     "aria-label": closeButtonLabelText,
     className: clearClasses,

package/lib/components/Tabs/Tabs.js

@@ -205,6 +205,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/lib/components/Tag/Tag.js

@@ -51,6 +51,7 @@ const Tag = _ref => {
     disabled,
     onClose,
     size,
+    as: BaseComponent,
     ...other
   } = _ref;
   const prefix = usePrefix.usePrefix();
@@ -71,7 +72,8 @@ const Tag = _ref => {
     }
   };
   if (filter) {
-    return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+    const ComponentTag = BaseComponent ?? 'div';
+    return /*#__PURE__*/React__default["default"].createElement(ComponentTag, _rollupPluginBabelHelpers["extends"]({
       className: tagClasses,
       id: tagId
     }, other), /*#__PURE__*/React__default["default"].createElement("span", {
@@ -86,7 +88,7 @@ const Tag = _ref => {
       title: title
     }, _Close || (_Close = /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, null))));
   }
-  const ComponentTag = other.onClick ? 'button' : 'div';
+  const ComponentTag = BaseComponent ?? (other.onClick ? 'button' : 'div');
   return /*#__PURE__*/React__default["default"].createElement(ComponentTag, _rollupPluginBabelHelpers["extends"]({
     disabled: ComponentTag === 'button' ? disabled : null,
     className: tagClasses,
@@ -98,6 +100,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__default["default"].elementType,
   /**
    * Provide content to be rendered inside of a <Tag>
    */

package/lib/components/TextArea/TextArea.js

@@ -71,7 +71,7 @@ const TextArea = /*#__PURE__*/React__default["default"].forwardRef((props, forwa
       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/lib/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/lib/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/lib/components/UIShell/HeaderMenuButton.js

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

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

@@ -49,7 +49,7 @@ const HeaderPanel = /*#__PURE__*/React__default["default"].forwardRef(function H
   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/lib/components/UIShell/Switcher.js

@@ -67,12 +67,23 @@ const Switcher = /*#__PURE__*/React__default["default"].forwardRef(function Swit
     const switcherItem = switcherRef.current.children[nextValidIndex].children[0];
     switcherItem?.focus();
   };
-  const childrenWithProps = React__default["default"].Children.toArray(children).map((child, index) => /*#__PURE__*/React__default["default"].cloneElement(child, {
-    handleSwitcherItemFocus,
-    index,
-    key: index,
-    expanded
-  }));
+  const childrenWithProps = React__default["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["default"].cloneElement(child, {
+        handleSwitcherItemFocus,
+        index,
+        key: index,
+        expanded
+      });
+    }
+    return /*#__PURE__*/React__default["default"].cloneElement(child, {
+      index,
+      key: index,
+      expanded
+    });
+  });
   return /*#__PURE__*/React__default["default"].createElement("ul", _rollupPluginBabelHelpers["extends"]({
     ref: ref,
     className: className

package/lib/prop-types/isRequiredOneOf.js

@@ -10,8 +10,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 /**
- * @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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.33.1",
+  "version": "1.34.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -45,9 +45,9 @@
   "dependencies": {
     "@babel/runtime": "^7.18.3",
     "@carbon/feature-flags": "^0.15.0",
-    "@carbon/icons-react": "^11.22.1",
-    "@carbon/layout": "^11.16.1",
-    "@carbon/styles": "^1.33.1",
+    "@carbon/icons-react": "^11.23.0-rc.0",
+    "@carbon/layout": "^11.17.0-rc.0",
+    "@carbon/styles": "^1.34.0-rc.0",
     "@carbon/telemetry": "0.1.0",
     "classnames": "2.3.2",
     "copy-to-clipboard": "^3.3.1",
@@ -75,7 +75,7 @@
     "@babel/preset-react": "^7.22.3",
     "@babel/preset-typescript": "^7.21.5",
     "@carbon/test-utils": "^10.30.0",
-    "@carbon/themes": "^11.21.1",
+    "@carbon/themes": "^11.22.0-rc.0",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
@@ -137,5 +137,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "033a51ca9c37d409f96fd14ef723ca053585ff2d"
+  "gitHead": "52fd3db75951b341e4abb3af2e7441da6639bfa4"
 }