@carbon/react 1.43.0-rc.0 → 1.44.0-rc.0

package/es/components/ComboBox/ComboBox.js

@@ -351,6 +351,18 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
         if (match(event, End) && event.code !== 'Numpad1') {
           event.target.setSelectionRange(event.target.value.length, event.target.value.length);
         }
+        if (event.altKey && event.key == 'ArrowDown') {
+          event.preventDownshiftDefault = true;
+          if (!isOpen) {
+            toggleMenu();
+          }
+        }
+        if (event.altKey && event.key == 'ArrowUp') {
+          event.preventDownshiftDefault = true;
+          if (isOpen) {
+            toggleMenu();
+          }
+        }
       }
     });
     const handleFocus = evt => {

package/es/components/ComboButton/index.js

@@ -68,7 +68,7 @@ const ComboButton = /*#__PURE__*/React__default.forwardRef(function ComboButton(
     }
   }
   function handleOpen() {
-    menuRef.current.style.width = `${width}px`;
+    menuRef.current.style.inlineSize = `${width}px`;
   }
   const containerClasses = cx(`${prefix}--combo-button__container`, `${prefix}--combo-button__container--${size}`, {
     [`${prefix}--combo-button__container--open`]: open
@@ -100,6 +100,7 @@ const ComboButton = /*#__PURE__*/React__default.forwardRef(function ComboButton(
     ref: menuRef,
     id: id,
     label: t('carbon.combo-button.additional-actions'),
+    mode: "basic",
     size: size,
     open: open,
     onClose: handleClose,

package/es/components/ComposedModal/ComposedModal.d.ts

@@ -4,7 +4,7 @@ export interface ModalBodyProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
     /**
      * Provide whether the modal content has a form element.
-     * If `true` is used here, non-form child content should have `bx--modal-content__regular-content` class.
+     * If `true` is used here, non-form child content should have `cds--modal-content__regular-content` class.
      */
     hasForm?: boolean;
     /**
@@ -15,11 +15,11 @@ export interface ModalBodyProps extends HTMLAttributes<HTMLDivElement> {
 export declare const ModalBody: React.ForwardRefExoticComponent<ModalBodyProps & React.RefAttributes<HTMLDivElement>>;
 export interface ComposedModalProps extends HTMLAttributes<HTMLDivElement> {
     /**
-     * Specify the aria-label for bx--modal-container
+     * Specify the aria-label for cds--modal-container
      */
     'aria-label'?: string;
     /**
-     * Specify the aria-labelledby for bx--modal-container
+     * Specify the aria-labelledby for cds--modal-container
      */
     'aria-labelledby'?: string;
     /**

package/es/components/ComposedModal/ComposedModal.js

@@ -56,7 +56,7 @@ ModalBody.propTypes = {
   className: PropTypes.string,
   /**
    * Provide whether the modal content has a form element.
-   * If `true` is used here, non-form child content should have `bx--modal-content__regular-content` class.
+   * If `true` is used here, non-form child content should have `cds--modal-content__regular-content` class.
    */
   hasForm: PropTypes.bool,
   /**
@@ -231,11 +231,11 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
 });
 ComposedModal.propTypes = {
   /**
-   * Specify the aria-label for bx--modal-container
+   * Specify the aria-label for cds--modal-container
    */
   ['aria-label']: PropTypes.string,
   /**
-   * Specify the aria-labelledby for bx--modal-container
+   * Specify the aria-labelledby for cds--modal-container
    */
   ['aria-labelledby']: PropTypes.string,
   /**

package/es/components/ContextMenu/useContextMenu.js

@@ -40,7 +40,8 @@ function useContextMenu() {
     open,
     x: position[0],
     y: position[1],
-    onClose
+    onClose,
+    mode: 'full'
   };
 }
 

package/es/components/DataTableSkeleton/DataTableSkeleton.js

@@ -63,7 +63,7 @@ const DataTableSkeleton = _ref => {
   }, rest), /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement("tr", null, columnsArray.map(i => /*#__PURE__*/React__default.createElement("th", {
     key: i
   }, headers ? /*#__PURE__*/React__default.createElement("div", {
-    className: "bx--table-header-label"
+    className: "cds--table-header-label"
   }, headers[i]?.header) : _span2 || (_span2 = /*#__PURE__*/React__default.createElement("span", null)))))), /*#__PURE__*/React__default.createElement("tbody", null, rows)));
 };
 DataTableSkeleton.propTypes = {

package/es/components/Dropdown/Dropdown.js

@@ -277,6 +277,9 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
       item,
       index
     });
+    if (item !== null && typeof item === 'object' && Object.prototype.hasOwnProperty.call(item, 'id')) {
+      itemProps.id = item['id'];
+    }
     const title = isObject && 'text' in item && itemToElement ? item.text : itemToString(item);
     return /*#__PURE__*/React__default.createElement(ListBox.MenuItem, _extends({
       key: itemProps.id,
@@ -304,7 +307,7 @@ Dropdown.propTypes = {
    */
   ariaLabel: deprecate(PropTypes.string, 'This prop syntax has been deprecated. Please use the new `aria-label`.'),
   /**
-   * Provide a custom className to be applied on the bx--dropdown node
+   * Provide a custom className to be applied on the cds--dropdown node
    */
   className: PropTypes.string,
   /**

package/es/components/Link/Link.d.ts

@@ -6,6 +6,11 @@
  */
 import React, { AnchorHTMLAttributes, AriaAttributes, ComponentType, HTMLAttributeAnchorTarget } from 'react';
 export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    /**
+     * Provide a custom element or component to render the top-level node for the
+     * component.
+     */
+    as?: string | undefined;
     /**
      * @description Indicates the element that represents the
      *   current item within a container or set of related

package/es/components/Link/Link.js

@@ -13,6 +13,7 @@ import { usePrefix } from '../../internal/usePrefix.js';
 
 const Link = /*#__PURE__*/React__default.forwardRef(function Link(_ref, ref) {
   let {
+    as: BaseComponent,
     children,
     className: customClassName,
     href,
@@ -33,7 +34,7 @@ const Link = /*#__PURE__*/React__default.forwardRef(function Link(_ref, ref) {
   });
   const rel = target === '_blank' ? 'noopener' : undefined;
   const linkProps = {
-    className,
+    className: BaseComponent ? undefined : className,
     rel,
     target
   };
@@ -46,7 +47,8 @@ const Link = /*#__PURE__*/React__default.forwardRef(function Link(_ref, ref) {
     linkProps.role = 'link';
     linkProps['aria-disabled'] = true;
   }
-  return /*#__PURE__*/React__default.createElement("a", _extends({
+  const BaseComponentAsAny = BaseComponent ?? 'a';
+  return /*#__PURE__*/React__default.createElement(BaseComponentAsAny, _extends({
     ref: ref
   }, linkProps, rest), children, !inline && Icon && /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--link__icon`
@@ -54,6 +56,11 @@ const Link = /*#__PURE__*/React__default.forwardRef(function Link(_ref, ref) {
 });
 Link.displayName = 'Link';
 Link.propTypes = {
+  /**
+   * Provide a custom element or component to render the top-level node for the
+   * component.
+   */
+  as: PropTypes.string,
   /**
    * Provide the content for the Link
    */

package/es/components/Menu/Menu.js

@@ -12,6 +12,7 @@ import React__default, { useRef, useContext, useReducer, useMemo, useState, useE
 import { createPortal } from 'react-dom';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { warning } from '../../internal/warning.js';
 import { MenuContext, menuReducer } from './MenuContext.js';
 import { useLayoutDirection } from '../LayoutDirection/useLayoutDirection.js';
 import { match } from '../../internal/keyboard/match.js';
@@ -24,6 +25,7 @@ const Menu = /*#__PURE__*/React__default.forwardRef(function Menu(_ref, forwardR
     children,
     className,
     label,
+    mode = 'full',
     onClose,
     onOpen,
     open,
@@ -37,10 +39,14 @@ const Menu = /*#__PURE__*/React__default.forwardRef(function Menu(_ref, forwardR
   const focusReturn = useRef(null);
   const context = useContext(MenuContext);
   const isRoot = context.state.isRoot;
+  if (context.state.mode === 'basic' && !isRoot) {
+    process.env.NODE_ENV !== "production" ? warning(false, 'Nested menus are not supported when the menu is in "basic" mode.') : void 0;
+  }
   const menuSize = isRoot ? size : context.state.size;
   const [childState, childDispatch] = useReducer(menuReducer, {
     ...context.state,
     isRoot: false,
+    mode,
     size,
     requestCloseRoot: isRoot ? handleClose : context.state.requestCloseRoot
   });
@@ -245,6 +251,14 @@ Menu.propTypes = {
    * A label describing the Menu.
    */
   label: PropTypes.string,
+  /**
+   * The mode of this menu. Defaults to full.
+   * `full` supports nesting and selectable menu items, but no icons.
+   * `basic` supports icons but no nesting or selectable menu items.
+   *
+   * **This prop is not intended for use and will be set by the respective implementation (like useContextMenu, MenuButton, and ComboButton).**
+   */
+  mode: PropTypes.oneOf(['full', 'basic']),
   /**
    * Provide an optional function to be called when the Menu should be closed.
    */

package/es/components/Menu/MenuContext.js

@@ -9,6 +9,7 @@ import React__default from 'react';
 
 const menuDefaultState = {
   isRoot: true,
+  mode: 'full',
   hasIcons: false,
   size: null,
   items: [],

package/es/components/Menu/MenuItem.js

@@ -13,6 +13,7 @@ import { CaretLeft, CaretRight, Checkmark } from '@carbon/icons-react';
 import { useControllableState } from '../../internal/useControllableState.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { warning } from '../../internal/warning.js';
 import { Menu } from './Menu.js';
 import { MenuContext } from './MenuContext.js';
 import '../Text/index.js';
@@ -143,6 +144,14 @@ const MenuItem = /*#__PURE__*/React__default.forwardRef(function MenuItem(_ref,
       setRtl(false);
     }
   }, [direction]);
+  const iconsAllowed = context.state.mode === 'basic' || rest.role === 'menuitemcheckbox' || rest.role === 'menuitemradio';
+  useEffect(() => {
+    if (iconsAllowed && IconElement && !context.state.hasIcons) {
+      context.dispatch({
+        type: 'enableIcons'
+      });
+    }
+  }, [iconsAllowed, IconElement, context.state.hasIcons, context]);
   return /*#__PURE__*/React__default.createElement("li", _extends({
     role: "menuitem"
   }, rest, {
@@ -158,7 +167,7 @@ const MenuItem = /*#__PURE__*/React__default.forwardRef(function MenuItem(_ref,
     onKeyDown: handleKeyDown
   }), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--menu-item__icon`
-  }, IconElement && /*#__PURE__*/React__default.createElement(IconElement, null)), /*#__PURE__*/React__default.createElement(Text, {
+  }, iconsAllowed && IconElement && /*#__PURE__*/React__default.createElement(IconElement, null)), /*#__PURE__*/React__default.createElement(Text, {
     as: "div",
     className: `${prefix}--menu-item__label`
   }, label), shortcut && !hasChildren && /*#__PURE__*/React__default.createElement("div", {
@@ -202,7 +211,7 @@ MenuItem.propTypes = {
    */
   onClick: PropTypes.func,
   /**
-   * This prop is not intended for use. The only supported icons are Checkmarks to depict single- and multi-selects. This prop is used by MenuItemSelectable and MenuItemRadioGroup automatically.
+   * Only applicable if the parent menu is in `basic` mode. Sets the menu item's icon.
    */
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
@@ -221,6 +230,9 @@ const MenuItemSelectable = /*#__PURE__*/React__default.forwardRef(function MenuI
   } = _ref2;
   const prefix = usePrefix();
   const context = useContext(MenuContext);
+  if (context.state.mode === 'basic') {
+    process.env.NODE_ENV !== "production" ? warning(false, 'MenuItemSelectable is not supported when the menu is in "basic" mode.') : void 0;
+  }
   const [checked, setChecked] = useControllableState({
     value: selected,
     onChange,
@@ -246,7 +258,7 @@ const MenuItemSelectable = /*#__PURE__*/React__default.forwardRef(function MenuI
     className: classNames,
     role: "menuitemcheckbox",
     "aria-checked": checked,
-    renderIcon: checked && Checkmark,
+    renderIcon: checked ? Checkmark : undefined,
     onClick: handleClick
   }));
 });
@@ -318,6 +330,9 @@ const MenuItemRadioGroup = /*#__PURE__*/React__default.forwardRef(function MenuI
   } = _ref4;
   const prefix = usePrefix();
   const context = useContext(MenuContext);
+  if (context.state.mode === 'basic') {
+    process.env.NODE_ENV !== "production" ? warning(false, 'MenuItemRadioGroup is not supported when the menu is in "basic" mode.') : void 0;
+  }
   const [selection, setSelection] = useControllableState({
     value: selectedItem,
     onChange,
@@ -349,7 +364,7 @@ const MenuItemRadioGroup = /*#__PURE__*/React__default.forwardRef(function MenuI
     label: itemToString(item),
     role: "menuitemradio",
     "aria-checked": item === selection,
-    renderIcon: item === selection && Checkmark,
+    renderIcon: item === selection ? Checkmark : undefined,
     onClick: e => {
       handleClick(item, e);
     }

package/es/components/MenuButton/index.js

@@ -57,6 +57,7 @@ const MenuButton = /*#__PURE__*/React__default.forwardRef(function MenuButton(_r
   function handleOpen() {
     menuRef.current.style.inlineSize = `${width}px`;
   }
+  const containerClasses = cx(`${prefix}--menu-button__container`, className);
   const triggerClasses = cx(`${prefix}--menu-button__trigger`, {
     [`${prefix}--menu-button__trigger--open`]: open
   });
@@ -64,7 +65,7 @@ const MenuButton = /*#__PURE__*/React__default.forwardRef(function MenuButton(_r
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     ref: ref,
     "aria-owns": open ? id : null,
-    className: className
+    className: containerClasses
   }), /*#__PURE__*/React__default.createElement(Button, {
     className: triggerClasses,
     size: size,
@@ -80,6 +81,7 @@ const MenuButton = /*#__PURE__*/React__default.forwardRef(function MenuButton(_r
     ref: menuRef,
     id: id,
     label: label,
+    mode: "basic",
     size: size,
     open: open,
     onClose: handleClose,

package/es/components/Slug/index.js

@@ -103,7 +103,7 @@ const Slug = /*#__PURE__*/React__default.forwardRef(function Slug(_ref3, ref) {
       onRevertClick(evt);
     }
   };
-  const ariaLabel = `${aiText} - ${slugLabel}`;
+  const ariaLabel = !aiTextLabel ? `${aiText} - ${slugLabel}` : `${aiText} - ${aiTextLabel}`;
   return /*#__PURE__*/React__default.createElement("div", {
     className: slugClasses,
     ref: ref,

package/es/components/UIShell/SideNav.js

@@ -170,7 +170,7 @@ function SideNavRenderFunction(_ref, ref) {
     tabIndex: -1,
     ref: navRef,
     className: `${prefix}--side-nav__navigation ${className}`,
-    inert: !isRail && (expanded || isLg ? undefined : -1)
+    inert: !isRail ? expanded || isLg ? undefined : -1 : undefined
   }, accessibilityLabel, eventHandlers, other), childrenToRender));
 }
 const SideNav = /*#__PURE__*/React__default.forwardRef(SideNavRenderFunction);

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

@@ -0,0 +1,38 @@
+/**
+ * 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.
+ */
+/**
+ * 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, { ReactNode } from 'react';
+interface BaseSwitcherProps {
+    /**
+     * expects to receive <SwitcherItem />
+     */
+    children: ReactNode;
+    /**
+     * Optionally provide a custom class to apply to the underlying `<ul>` node
+     */
+    className?: string;
+    /**
+     * Specify whether the panel is expanded
+     */
+    expanded?: boolean;
+}
+interface SwitcherWithAriaLabel extends BaseSwitcherProps {
+    'aria-label': string;
+    'aria-labelledby'?: never;
+}
+interface SwitcherWithAriaLabelledBy extends BaseSwitcherProps {
+    'aria-label'?: never;
+    'aria-labelledby': string;
+}
+type SwitcherProps = SwitcherWithAriaLabel | SwitcherWithAriaLabelledBy;
+declare const Switcher: React.ForwardRefExoticComponent<SwitcherProps & React.RefAttributes<HTMLUListElement>>;
+export default Switcher;

package/es/components/UIShell/Switcher.js

@@ -6,14 +6,15 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useRef } from 'react';
+import React__default, { forwardRef, useRef } from 'react';
 import cx from 'classnames';
-import PropTypes from 'prop-types';
-import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
+import PropTypes from 'prop-types';
+import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
+import getDisplayName from '../../prop-types/tools/getDisplayName.js';
 
-const Switcher = /*#__PURE__*/React__default.forwardRef(function Switcher(props, forwardRef) {
+const Switcher = /*#__PURE__*/forwardRef(function Switcher(props, forwardRef) {
   const switcherRef = useRef(null);
   const ref = useMergedRefs([switcherRef, forwardRef]);
   const prefix = usePrefix();
@@ -29,7 +30,7 @@ const Switcher = /*#__PURE__*/React__default.forwardRef(function Switcher(props,
     'aria-labelledby': ariaLabelledBy
   };
   const className = cx(`${prefix}--switcher`, {
-    [customClassName]: !!customClassName
+    [customClassName || '']: !!customClassName
   });
   const handleSwitcherItemFocus = _ref => {
     let {
@@ -54,13 +55,14 @@ const Switcher = /*#__PURE__*/React__default.forwardRef(function Switcher(props,
           return enabledIndices[nextIndex];
       }
     })();
-    const switcherItem = switcherRef.current.children[nextValidIndex].children[0];
-    switcherItem?.focus();
+    const switcherItem = switcherRef.current?.children[nextValidIndex]?.children[0];
+    if (switcherItem) {
+      switcherItem.focus();
+    }
   };
-  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') {
+  const childrenWithProps = React__default.Children.map(children, (child, index) => {
+    // only setup click handlers if onChange event is passed
+    if ( /*#__PURE__*/React__default.isValidElement(child) && child.type && getDisplayName(child.type) === 'Switcher') {
       return /*#__PURE__*/React__default.cloneElement(child, {
         handleSwitcherItemFocus,
         index,
@@ -98,6 +100,5 @@ Switcher.propTypes = {
    */
   expanded: PropTypes.bool
 };
-var Switcher$1 = Switcher;
 
-export { Switcher$1 as default };
+export { Switcher as default };

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

@@ -0,0 +1,9 @@
+import React from 'react';
+interface SwitcherDividerProps {
+    /**
+     * Optionally provide a custom class to apply to the underlying `<li>` node
+     */
+    className?: string;
+}
+declare const SwitcherDivider: React.FC<SwitcherDividerProps>;
+export default SwitcherDivider;

package/es/components/UIShell/SwitcherDivider.js

@@ -17,11 +17,11 @@ const SwitcherDivider = _ref => {
     ...other
   } = _ref;
   const prefix = usePrefix();
-  const className = cx(`${prefix}--switcher__item--divider`, {
-    [customClassName]: !!customClassName
+  const classNames = cx(`${prefix}--switcher__item--divider`, {
+    [customClassName || '']: !!customClassName
   });
   return /*#__PURE__*/React__default.createElement("hr", _extends({}, other, {
-    className: className
+    className: classNames
   }));
 };
 SwitcherDivider.propTypes = {
@@ -30,6 +30,5 @@ SwitcherDivider.propTypes = {
    */
   className: PropTypes.string
 };
-var SwitcherDivider$1 = SwitcherDivider;
 
-export { SwitcherDivider$1 as default };
+export { SwitcherDivider as default };

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

@@ -0,0 +1,49 @@
+import React from 'react';
+interface BaseSwitcherItemProps {
+    /**
+     * Specify the text content for the link
+     */
+    children: React.ReactNode;
+    /**
+     * Optionally provide a custom class to apply to the underlying `<li>` node
+     */
+    className?: string;
+    /**
+     * event handlers
+     */
+    handleSwitcherItemFocus?: (event: {
+        currentIndex: number;
+        direction: number;
+    }) => void;
+    /**
+     * Specify the index of the SwitcherItem
+     */
+    index?: number;
+    /**
+     * event handlers
+     */
+    onKeyDown?: (event: KeyboardEvent) => void;
+    /**
+     * Specify the tab index of the Link
+     */
+    tabIndex?: number;
+    /**
+     * Specify whether the panel is expanded
+     */
+    expanded?: boolean;
+    /**
+     * Specify whether the panel is selected
+     */
+    isSelected?: boolean;
+}
+interface SwitcherItemWithAriaLabel extends BaseSwitcherItemProps {
+    'aria-label': string;
+    'aria-labelledby'?: never;
+}
+interface SwitcherItemWithAriaLabelledBy extends BaseSwitcherItemProps {
+    'aria-label'?: never;
+    'aria-labelledby': string;
+}
+type SwitcherItemProps = SwitcherItemWithAriaLabel | SwitcherItemWithAriaLabelledBy;
+declare const SwitcherItem: React.ForwardRefExoticComponent<SwitcherItemProps & React.RefAttributes<React.ElementType<any>>>;
+export default SwitcherItem;

package/es/components/UIShell/SwitcherItem.js

@@ -6,17 +6,17 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default from 'react';
+import React__default, { forwardRef } from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
 import Link from './Link.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
 import { match } from '../../internal/keyboard/match.js';
 import { ArrowDown, ArrowUp } from '../../internal/keyboard/keys.js';
 
-const SwitcherItem = /*#__PURE__*/React__default.forwardRef(function SwitcherItem(_ref, ref) {
-  let {
+const SwitcherItem = /*#__PURE__*/forwardRef(function SwitcherItem(props, forwardRef) {
+  const {
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledBy,
     className: customClassName,
@@ -28,10 +28,10 @@ const SwitcherItem = /*#__PURE__*/React__default.forwardRef(function SwitcherIte
     handleSwitcherItemFocus,
     onKeyDown = () => {},
     ...rest
-  } = _ref;
+  } = props;
   const prefix = usePrefix();
-  const className = cx(`${prefix}--switcher__item`, {
-    [customClassName]: !!customClassName
+  const classNames = cx(`${prefix}--switcher__item`, {
+    [customClassName || '']: !!customClassName
   });
   const accessibilityLabel = {
     'aria-label': ariaLabel,
@@ -44,36 +44,33 @@ const SwitcherItem = /*#__PURE__*/React__default.forwardRef(function SwitcherIte
     if (match(evt, ArrowDown)) {
       evt.preventDefault();
       handleSwitcherItemFocus?.({
-        currentIndex: index,
+        currentIndex: index || -1,
         direction: 1
       });
     }
     if (match(evt, ArrowUp)) {
       evt.preventDefault();
       handleSwitcherItemFocus?.({
-        currentIndex: index,
+        currentIndex: index || -1,
         direction: -1
       });
     }
   }
   return /*#__PURE__*/React__default.createElement("li", {
-    className: className
+    className: classNames
   }, /*#__PURE__*/React__default.createElement(Link, _extends({
     onKeyDown: evt => {
       setTabFocus(evt);
       onKeyDown(evt);
-    }
+    },
+    ref: forwardRef
   }, rest, {
-    ref: ref,
     className: linkClassName,
     tabIndex: tabIndex
   }, accessibilityLabel), children));
 });
 SwitcherItem.displayName = 'SwitcherItem';
 SwitcherItem.propTypes = {
-  /**
-   * Required props for accessibility label on the underlying menuitem
-   */
   ...AriaLabelPropType,
   /**
    * Specify the text content for the link
@@ -100,6 +97,5 @@ SwitcherItem.propTypes = {
    */
   tabIndex: PropTypes.number
 };
-var SwitcherItem$1 = SwitcherItem;
 
-export { SwitcherItem$1 as default };
+export { SwitcherItem as default };

package/es/prop-types/tools/getDisplayName.js

@@ -0,0 +1,34 @@
+/**
+ * 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.
+ */
+
+const cachedDisplayNames = new WeakMap();
+
+/**
+ * `getDisplayName` is a utility function for getting a name from a given
+ * component type. It supports names from React elements, Stateless Functional
+ * Components, and Class-based Components
+ */
+const getDisplayName = type => {
+  if (typeof type === 'string') {
+    return type;
+  }
+  if (cachedDisplayNames.has(type)) {
+    return cachedDisplayNames.get(type);
+  }
+  let displayName;
+  if (typeof type.displayName === 'string') {
+    displayName = type.displayName;
+  }
+  if (!displayName) {
+    displayName = type.name || 'Unknown';
+  }
+  cachedDisplayNames.set(type, displayName);
+  return displayName;
+};
+var getDisplayName$1 = getDisplayName;
+
+export { getDisplayName$1 as default };