@carbon/react 1.71.0 → 1.72.0-rc.0

package/es/components/ComboBox/ComboBox.d.ts

@@ -48,6 +48,10 @@ export interface ComboBoxProps<ItemType> extends Omit<InputHTMLAttributes<HTMLIn
      * An optional className to add to the container node
      */
     className?: string;
+    /**
+     * **Experimental**: Provide a `decorator` component to be rendered inside the `ComboBox` component
+     */
+    decorator?: ReactNode;
     /**
      * Specify the direction of the combobox dropdown. Can be either top or bottom.
      */
@@ -170,6 +174,7 @@ export interface ComboBoxProps<ItemType> extends Omit<InputHTMLAttributes<HTMLIn
      */
     size?: ListBoxSize;
     /**
+     * @deprecated please use decorator instead.
      * **Experimental**: Provide a `Slug` component to be rendered inside the `ComboBox` component
      */
     slug?: ReactNode;

package/es/components/ComboBox/ComboBox.js

@@ -118,6 +118,7 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
     ariaLabel: deprecatedAriaLabel,
     autoAlign = false,
     className: containerClassName,
+    decorator,
     direction = 'bottom',
     disabled = false,
     downshiftActions,
@@ -386,7 +387,8 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
   const wrapperClasses = cx(`${prefix}--list-box__wrapper`, [containerClassName, {
     [`${prefix}--list-box__wrapper--fluid--invalid`]: isFluid && invalid,
     [`${prefix}--list-box__wrapper--fluid--focus`]: isFluid && isFocused,
-    [`${prefix}--list-box__wrapper--slug`]: slug
+    [`${prefix}--list-box__wrapper--slug`]: slug,
+    [`${prefix}--list-box__wrapper--decorator`]: decorator
   }]);
   const inputClasses = cx(`${prefix}--text-input`, {
     [`${prefix}--text-input--empty`]: !inputValue,
@@ -396,10 +398,10 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
   // needs to be Capitalized for react to render it correctly
   const ItemToElement = itemToElement;
 
-  // Slug is always size `mini`
-  let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'AILabel') {
-    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+  // AILabel always size `mini`
+  let normalizedDecorator = /*#__PURE__*/React__default.isValidElement(slug ?? decorator) ? slug ?? decorator : null;
+  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
+    normalizedDecorator = /*#__PURE__*/React__default.cloneElement(normalizedDecorator, {
       size: 'mini'
     });
   }
@@ -456,12 +458,12 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
         type,
         selectedItem: newSelectedItem
       } = _ref6;
-      if (type === '__item_click__' && !isEqual(selectedItemProp, newSelectedItem)) {
+      if (type === useCombobox.stateChangeTypes.ItemClick && !isEqual(selectedItemProp, newSelectedItem)) {
         onChange({
           selectedItem: newSelectedItem
         });
       }
-      if (type === '__function_select_item__' || type === '__input_keydown_enter__') {
+      if (type === useCombobox.stateChangeTypes.FunctionSelectItem || type === useCombobox.stateChangeTypes.InputKeyDownEnter) {
         onChange({
           selectedItem: newSelectedItem
         });
@@ -661,7 +663,9 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
   }), /*#__PURE__*/React__default.createElement(ListBoxTrigger, _extends({}, buttonProps, {
     isOpen: isOpen,
     translateWithId: translateWithId
-  }))), normalizedSlug, /*#__PURE__*/React__default.createElement(ListBox.Menu, menuProps, isOpen ? filterItems(items, itemToString, inputValue).map((item, index) => {
+  }))), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--list-box__inner-wrapper--decorator`
+  }, normalizedDecorator) : '', /*#__PURE__*/React__default.createElement(ListBox.Menu, menuProps, isOpen ? filterItems(items, itemToString, inputValue).map((item, index) => {
     const isObject = item !== null && typeof item === 'object';
     const title = isObject && 'text' in item && itemToElement ? item.text?.toString() : itemToString(item);
     const itemProps = getItemProps({
@@ -724,6 +728,10 @@ ComboBox.propTypes = {
    * An optional className to add to the container node
    */
   className: PropTypes.string,
+  /**
+   * **Experimental**: Provide a decorator component to be rendered inside the `ComboBox` component
+   */
+  decorator: PropTypes.node,
   /**
    * Specify the direction of the combobox dropdown. Can be either top or bottom.
    */
@@ -841,10 +849,7 @@ ComboBox.propTypes = {
    * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
    */
   size: ListBoxSize,
-  /**
-   * **Experimental**: Provide a `Slug` component to be rendered inside the `ComboBox` component
-   */
-  slug: PropTypes.node,
+  slug: deprecate(PropTypes.node, 'The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead.'),
   /**
    * Provide text to be used in a `<label>` element that is tied to the
    * combobox via ARIA attributes.

package/es/components/MultiSelect/FilterableMultiSelect.d.ts

@@ -39,6 +39,10 @@ export interface FilterableMultiSelectProps<ItemType> extends MultiSelectSorting
      * Specify the text that should be read for screen readers to clear selection.
      */
     clearSelectionText?: string;
+    /**
+     * **Experimental**: Provide a `decorator` component to be rendered inside the `FilterableMultiSelect` component
+     */
+    decorator?: ReactNode;
     /**
      * Specify the direction of the multiselect dropdown.
      */
@@ -164,6 +168,7 @@ export interface FilterableMultiSelectProps<ItemType> extends MultiSelectSorting
      */
     size?: 'sm' | 'md' | 'lg';
     /**
+     * @deprecated please use decorator instead.
      * **Experimental**: Provide a `Slug` component to be rendered inside the `Checkbox` component
      */
     slug?: ReactNode;

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -69,6 +69,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
     clearSelectionDescription = 'Total items selected: ',
     clearSelectionText = 'To clear selection, press Delete or Backspace',
     compareItems = defaultCompareItems,
+    decorator,
     direction = 'bottom',
     disabled = false,
     downshiftProps,
@@ -198,6 +199,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
     [`${prefix}--list-box__wrapper--fluid--invalid`]: isFluid && invalid,
     [`${prefix}--list-box__wrapper--fluid--focus`]: isFluid && isFocused,
     [`${prefix}--list-box__wrapper--slug`]: slug,
+    [`${prefix}--list-box__wrapper--decorator`]: decorator,
     [`${prefix}--autoalign`]: autoAlign
   });
   const helperId = !helperText ? undefined : `filterablemultiselect-helper-text-${filterableMultiSelectInstanceId}`;
@@ -412,10 +414,10 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
     }
   }
 
-  // Slug is always size `mini`
-  let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'AILabel') {
-    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+  // AILabel always size `mini`
+  let normalizedDecorator = /*#__PURE__*/React__default.isValidElement(slug ?? decorator) ? slug ?? decorator : null;
+  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
+    normalizedDecorator = /*#__PURE__*/React__default.cloneElement(normalizedDecorator, {
       size: 'mini'
     });
   }
@@ -596,7 +598,9 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
   }), /*#__PURE__*/React__default.createElement(ListBoxTrigger, _extends({}, buttonProps, {
     isOpen: isOpen,
     translateWithId: translateWithId
-  }))), normalizedSlug, /*#__PURE__*/React__default.createElement(ListBox.Menu, menuProps, isOpen ? sortedItems.map((item, index) => {
+  }))), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--list-box__inner-wrapper--decorator`
+  }, normalizedDecorator) : '', /*#__PURE__*/React__default.createElement(ListBox.Menu, menuProps, isOpen ? sortedItems.map((item, index) => {
     const isChecked = controlledSelectedItems.filter(selected => isEqual(selected, item)).length > 0;
     const itemProps = getItemProps({
       item,
@@ -658,6 +662,10 @@ FilterableMultiSelect.propTypes = {
    * Specify the text that should be read for screen readers to clear selection.
    */
   clearSelectionText: PropTypes.string,
+  /**
+   * **Experimental**: Provide a decorator component to be rendered inside the `FilterableMultiSelect` component
+   */
+  decorator: PropTypes.node,
   /**
    * Specify the direction of the multiselect dropdown. Can be either top or bottom.
    */
@@ -757,10 +765,7 @@ FilterableMultiSelect.propTypes = {
    * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
    */
   size: ListBoxSize,
-  /**
-   * **Experimental**: Provide a `Slug` component to be rendered inside the `FilterableMultiSelect` component
-   */
-  slug: PropTypes.node,
+  slug: deprecate(PropTypes.node, 'The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead.'),
   ...sortingPropTypes,
   /**
    * Provide text to be used in a `<label>` element that is tied to the

package/es/components/MultiSelect/MultiSelect.d.ts

@@ -33,6 +33,10 @@ export interface MultiSelectProps<ItemType> extends MultiSelectSortingProps<Item
      * Specify the text that should be read for screen readers to clear selection.
      */
     clearSelectionText?: string;
+    /**
+     * **Experimental**: Provide a `decorator` component to be rendered inside the `MultiSelect` component
+     */
+    decorator?: ReactNode;
     /**
      * Specify the direction of the multiselect dropdown. Can be either top or bottom.
      */
@@ -143,6 +147,7 @@ export interface MultiSelectProps<ItemType> extends MultiSelectSortingProps<Item
      */
     size?: ListBoxSize;
     /**
+     * @deprecated please use decorator instead.
      * **Experimental**: Provide a `Slug` component to be rendered inside the `MultiSelect` component
      */
     slug?: ReactNode;

package/es/components/MultiSelect/MultiSelect.js

@@ -63,6 +63,7 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {
     autoAlign = false,
     className: containerClassName,
+    decorator,
     id,
     items,
     itemToElement,
@@ -262,7 +263,8 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     [`${prefix}--list-box__wrapper--inline--invalid`]: inline && invalid,
     [`${prefix}--list-box__wrapper--fluid--invalid`]: isFluid && invalid,
     [`${prefix}--list-box__wrapper--fluid--focus`]: !isOpen && isFluid && isFocused,
-    [`${prefix}--list-box__wrapper--slug`]: slug
+    [`${prefix}--list-box__wrapper--slug`]: slug,
+    [`${prefix}--list-box__wrapper--decorator`]: decorator
   });
   const titleClasses = cx(`${prefix}--label`, {
     [`${prefix}--label--disabled`]: disabled,
@@ -400,10 +402,10 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     }
   } : {};
 
-  // Slug is always size `mini`
-  let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'AILabel') {
-    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+  // AILabel always size `mini`
+  let normalizedDecorator = /*#__PURE__*/React__default.isValidElement(slug ?? decorator) ? slug ?? decorator : null;
+  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
+    normalizedDecorator = /*#__PURE__*/React__default.cloneElement(normalizedDecorator, {
       size: 'mini'
     });
   }
@@ -463,7 +465,9 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   }, label), /*#__PURE__*/React__default.createElement(ListBox.MenuIcon, {
     isOpen: isOpen,
     translateWithId: translateWithId
-  })), normalizedSlug), /*#__PURE__*/React__default.createElement(ListBox.Menu, menuProps, isOpen && sortItems(filteredItems, sortOptions).map((item, index) => {
+  })), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--list-box__inner-wrapper--decorator`
+  }, normalizedDecorator) : ''), /*#__PURE__*/React__default.createElement(ListBox.Menu, menuProps, isOpen && sortItems(filteredItems, sortOptions).map((item, index) => {
     const isChecked = selectedItems.filter(selected => isEqual(selected, item)).length > 0;
     const isIndeterminate = selectedItems.length !== 0 && item['isSelectAll'] && !isChecked;
     const itemProps = getItemProps({
@@ -528,6 +532,10 @@ MultiSelect.propTypes = {
    * declaring function with `useCallback` to prevent unnecessary re-renders.
    */
   compareItems: PropTypes.func,
+  /**
+   * **Experimental**: Provide a decorator component to be rendered inside the `MultiSelect` component
+   */
+  decorator: PropTypes.node,
   /**
    * Specify the direction of the multiselect dropdown. Can be either top or bottom.
    */
@@ -635,10 +643,7 @@ MultiSelect.propTypes = {
    * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
    */
   size: ListBoxSize,
-  /**
-   * **Experimental**: Provide a `Slug` component to be rendered inside the `MultiSelect` component
-   */
-  slug: PropTypes.node,
+  slug: deprecate(PropTypes.node, 'The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead.'),
   /**
    * 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

package/es/components/OverflowMenu/OverflowMenu.d.ts

@@ -4,8 +4,8 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import PropTypes from 'prop-types';
 import React, { ComponentType } from 'react';
+import PropTypes from 'prop-types';
 /**
  * @param {Element} menuBody The menu body with the menu arrow.
  * @param {string} direction The floating menu direction.

package/es/components/OverflowMenu/OverflowMenu.js

@@ -6,19 +6,19 @@
  */
 
 import { defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import invariant from 'invariant';
-import PropTypes from 'prop-types';
+import FloatingMenu, { DIRECTION_TOP, DIRECTION_BOTTOM } from '../../internal/FloatingMenu.js';
 import React__default from 'react';
-import cx from 'classnames';
 import ClickListener from '../../internal/ClickListener.js';
-import FloatingMenu, { DIRECTION_TOP, DIRECTION_BOTTOM } from '../../internal/FloatingMenu.js';
+import { IconButton } from '../IconButton/index.js';
 import { OverflowMenuVertical } from '@carbon/icons-react';
-import mergeRefs from '../../tools/mergeRefs.js';
 import { PrefixContext } from '../../internal/usePrefix.js';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
 import deprecate from '../../prop-types/deprecate.js';
-import { IconButton } from '../IconButton/index.js';
-import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
+import invariant from 'invariant';
+import mergeRefs from '../../tools/mergeRefs.js';
 import { noopFn } from '../../internal/noopFn.js';
+import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
 import { matches } from '../../internal/keyboard/match.js';
 import { ArrowUp, ArrowRight, ArrowDown, ArrowLeft, Escape } from '../../internal/keyboard/keys.js';
 
@@ -81,16 +81,6 @@ const getMenuOffset = (menuBody, direction, trigger, flip) => {
           top: 0
         };
       }
-    case 'left':
-    case 'right':
-      {
-        // TODO: Ensure `trigger` is there for `<OverflowMenu open>`
-        const triggerHeight = !trigger ? 0 : trigger.offsetHeight;
-        return {
-          left: 0,
-          top: (!flip ? 1 : -1) * (menuHeight / 2 - triggerHeight / 2)
-        };
-      }
   }
 };
 class OverflowMenu extends React__default.Component {

package/es/components/Pagination/Pagination.js

@@ -225,7 +225,7 @@ const Pagination = /*#__PURE__*/React__default.forwardRef(function Pagination(_r
   }, pageText(page)) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Select, {
     id: `${prefix}-pagination-select-${inputId}-right`,
     className: `${prefix}--select__page-number`,
-    labelText: `Page number, of ${totalPages} pages`,
+    labelText: `Page of ${totalPages} pages`,
     inline: true,
     hideLabel: true,
     onChange: handlePageInputChange,

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

@@ -6,6 +6,7 @@
  */
 import React, { type ForwardedRef, type WeakValidationMap, type ElementType } from 'react';
 import { type PolymorphicProps } from '../../types/common';
+import { type Boundary } from '@floating-ui/react';
 /**
  * Deprecated popover alignment values.
  * @deprecated Use NewPopoverAlignment instead.
@@ -22,6 +23,10 @@ interface PopoverBaseProps {
      * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
      */
     autoAlign?: boolean;
+    /**
+     * Specify a bounding element to be used for autoAlign calculations. The viewport is used by default. This prop is currently experimental and is subject to future changes.
+     */
+    autoAlignBoundary?: Boundary;
     /**
      * Specify whether a caret should be rendered
      */

package/es/components/Popover/index.js

@@ -53,6 +53,7 @@ const Popover = /*#__PURE__*/React__default.forwardRef(function PopoverRenderFun
     align: initialAlign = isTabTip ? 'bottom-start' : 'bottom',
     as: BaseComponent = 'span',
     autoAlign = false,
+    autoAlignBoundary,
     caret = isTabTip ? false : true,
     className: customClassName,
     children,
@@ -130,7 +131,8 @@ const Popover = /*#__PURE__*/React__default.forwardRef(function PopoverRenderFun
     middleware: [offset(!isTabTip ? popoverDimensions?.current?.offset : 0), autoAlign && flip({
       fallbackPlacements: align.includes('bottom') ? ['bottom', 'bottom-start', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end', 'top', 'top-start', 'top-end'] : ['top', 'top-start', 'top-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end'],
       fallbackStrategy: 'initialPlacement',
-      fallbackAxisSideDirection: 'start'
+      fallbackAxisSideDirection: 'start',
+      boundary: autoAlignBoundary
     }), arrow({
       element: caretRef
     }), autoAlign && hide()],
@@ -301,6 +303,15 @@ Popover.propTypes = {
    * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
    */
   autoAlign: PropTypes.bool,
+  /**
+   * Specify a bounding element to be used for autoAlign calculations. The viewport is used by default. This prop is currently experimental and is subject to future changes.
+   */
+  autoAlignBoundary: PropTypes.oneOfType([PropTypes.oneOf(['clippingAncestors']), PropTypes.elementType, PropTypes.arrayOf(PropTypes.elementType), PropTypes.exact({
+    x: PropTypes.number.isRequired,
+    y: PropTypes.number.isRequired,
+    width: PropTypes.number.isRequired,
+    height: PropTypes.number.isRequired
+  })]),
   /**
    * Specify whether a caret should be rendered
    */

package/es/components/Select/Select.d.ts

@@ -6,7 +6,7 @@
  */
 import React, { ChangeEventHandler, ComponentPropsWithRef, ReactNode } from 'react';
 type ExcludedAttributes = 'size';
-interface SelectProps extends Omit<ComponentPropsWithRef<'select'>, ExcludedAttributes> {
+export interface SelectProps extends Omit<ComponentPropsWithRef<'select'>, ExcludedAttributes> {
     /**
      * Provide the contents of your Select
      */
@@ -15,6 +15,10 @@ interface SelectProps extends Omit<ComponentPropsWithRef<'select'>, ExcludedAttr
      * Specify an optional className to be applied to the node containing the label and the select box
      */
     className?: string;
+    /**
+     * **Experimental**: Provide a `decorator` component to be rendered inside the `Select` component
+     */
+    decorator?: ReactNode;
     /**
      * Optionally provide the default value of the `<select>`
      */
@@ -77,6 +81,7 @@ interface SelectProps extends Omit<ComponentPropsWithRef<'select'>, ExcludedAttr
      */
     size?: 'sm' | 'md' | 'lg';
     /**
+     * @deprecated please use decorator instead.
      * **Experimental**: Provide a `Slug` component to be rendered inside the `Dropdown` component
      */
     slug?: ReactNode;

package/es/components/Select/Select.js

@@ -22,6 +22,7 @@ import { Text } from '../Text/Text.js';
 const Select = /*#__PURE__*/React__default.forwardRef(function Select(_ref, ref) {
   let {
     className,
+    decorator,
     id,
     inline = false,
     labelText = 'Select',
@@ -60,7 +61,8 @@ const Select = /*#__PURE__*/React__default.forwardRef(function Select(_ref, ref)
     [`${prefix}--select--warning`]: warn,
     [`${prefix}--select--fluid--invalid`]: isFluid && invalid,
     [`${prefix}--select--fluid--focus`]: isFluid && isFocused,
-    [`${prefix}--select--slug`]: slug
+    [`${prefix}--select--slug`]: slug,
+    [`${prefix}--select--decorator`]: decorator
   });
   const labelClasses = cx(`${prefix}--label`, {
     [`${prefix}--visually-hidden`]: hideLabel,
@@ -123,10 +125,10 @@ const Select = /*#__PURE__*/React__default.forwardRef(function Select(_ref, ref)
     }
   };
 
-  // Slug is always size `mini`
-  let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'AILabel') {
-    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+  // AILabel always size `mini`
+  let normalizedDecorator = /*#__PURE__*/React__default.isValidElement(slug ?? decorator) ? slug ?? decorator : null;
+  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
+    normalizedDecorator = /*#__PURE__*/React__default.cloneElement(normalizedDecorator, {
       size: 'mini'
     });
   }
@@ -167,7 +169,9 @@ const Select = /*#__PURE__*/React__default.forwardRef(function Select(_ref, ref)
     "data-invalid": invalid || null,
     onFocus: handleFocus,
     onBlur: handleFocus
-  }, input, normalizedSlug, isFluid && /*#__PURE__*/React__default.createElement("hr", {
+  }, input, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--select__inner-wrapper--decorator`
+  }, normalizedDecorator) : '', isFluid && /*#__PURE__*/React__default.createElement("hr", {
     className: `${prefix}--select__divider`
   }), isFluid && error ? error : null), !inline && !isFluid && error ? error : helper));
 });
@@ -181,6 +185,10 @@ Select.propTypes = {
    * Specify an optional className to be applied to the node containing the label and the select box
    */
   className: PropTypes.string,
+  /**
+   * **Experimental**: Provide a decorator component to be rendered inside the `Select` component
+   */
+  decorator: PropTypes.node,
   /**
    * Optionally provide the default value of the `<select>`
    */
@@ -241,10 +249,7 @@ Select.propTypes = {
    * Specify the size of the Select Input.
    */
   size: PropTypes.oneOf(['sm', 'md', 'lg']),
-  /**
-   * **Experimental**: Provide a `Slug` component to be rendered inside the `Select` component
-   */
-  slug: PropTypes.node,
+  slug: deprecate(PropTypes.node, 'The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead.'),
   /**
    * Specify whether the control is currently in warning state
    */

package/es/components/UIShell/Switcher.js

@@ -38,7 +38,7 @@ const Switcher = /*#__PURE__*/forwardRef(function Switcher(props, forwardRef) {
       direction
     } = _ref;
     const enabledIndices = React__default.Children.toArray(children).reduce((acc, curr, i) => {
-      if (Object.keys(curr.props).length !== 0) {
+      if (/*#__PURE__*/React__default.isValidElement(curr) && Object.keys(curr.props).length !== 0 && getDisplayName(curr.type) === 'SwitcherItem') {
         acc.push(i);
       }
       return acc;
@@ -50,7 +50,11 @@ const Switcher = /*#__PURE__*/forwardRef(function Switcher(props, forwardRef) {
           if (direction === -1) {
             return enabledIndices[enabledIndices.length - 1];
           }
-          return 0;
+          return enabledIndices[0];
+        case 0:
+          if (direction === 1) {
+            return enabledIndices[1];
+          }
         default:
           return enabledIndices[nextIndex];
       }
@@ -62,7 +66,7 @@ const Switcher = /*#__PURE__*/forwardRef(function Switcher(props, forwardRef) {
   };
   const childrenWithProps = React__default.Children.toArray(children).map((child, index) => {
     // only setup click handlers if onChange event is passed
-    if (/*#__PURE__*/React__default.isValidElement(child) && child.type && getDisplayName(child.type) === 'Switcher') {
+    if (/*#__PURE__*/React__default.isValidElement(child) && child.type && getDisplayName(child.type) === 'SwitcherItem') {
       return /*#__PURE__*/React__default.cloneElement(child, {
         handleSwitcherItemFocus,
         index,

package/es/internal/wrapFocus.js

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import findLast from 'lodash.findlast';
 import { useEffect } from 'react';
 import { DOCUMENT_POSITION_BROAD_PRECEDING, selectorTabbable, DOCUMENT_POSITION_BROAD_FOLLOWING } from './keyboard/navigation.js';
 import { tabbable } from 'tabbable';
@@ -45,7 +44,7 @@ function wrapFocus(_ref) {
   if (bodyNode && currentActiveNode && oldActiveNode && !bodyNode.contains(currentActiveNode) && !elementOrParentIsFloatingMenu(currentActiveNode, selectorsFloatingMenus)) {
     const comparisonResult = oldActiveNode.compareDocumentPosition(currentActiveNode);
     if (currentActiveNode === startTrapNode || comparisonResult & DOCUMENT_POSITION_BROAD_PRECEDING) {
-      const tabbable = findLast(bodyNode.querySelectorAll(selectorTabbable), elem => Boolean(elem.offsetParent));
+      const tabbable = [...bodyNode.querySelectorAll(selectorTabbable)].reverse().find(elem => Boolean(elem.offsetParent));
       if (tabbable) {
         tabbable.focus();
       } else if (bodyNode !== oldActiveNode) {

package/lib/components/ComboBox/ComboBox.d.ts

@@ -48,6 +48,10 @@ export interface ComboBoxProps<ItemType> extends Omit<InputHTMLAttributes<HTMLIn
      * An optional className to add to the container node
      */
     className?: string;
+    /**
+     * **Experimental**: Provide a `decorator` component to be rendered inside the `ComboBox` component
+     */
+    decorator?: ReactNode;
     /**
      * Specify the direction of the combobox dropdown. Can be either top or bottom.
      */
@@ -170,6 +174,7 @@ export interface ComboBoxProps<ItemType> extends Omit<InputHTMLAttributes<HTMLIn
      */
     size?: ListBoxSize;
     /**
+     * @deprecated please use decorator instead.
      * **Experimental**: Provide a `Slug` component to be rendered inside the `ComboBox` component
      */
     slug?: ReactNode;

package/lib/components/ComboBox/ComboBox.js

@@ -129,6 +129,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     ariaLabel: deprecatedAriaLabel,
     autoAlign = false,
     className: containerClassName,
+    decorator,
     direction = 'bottom',
     disabled = false,
     downshiftActions,
@@ -397,7 +398,8 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
   const wrapperClasses = cx__default["default"](`${prefix}--list-box__wrapper`, [containerClassName, {
     [`${prefix}--list-box__wrapper--fluid--invalid`]: isFluid && invalid,
     [`${prefix}--list-box__wrapper--fluid--focus`]: isFluid && isFocused,
-    [`${prefix}--list-box__wrapper--slug`]: slug
+    [`${prefix}--list-box__wrapper--slug`]: slug,
+    [`${prefix}--list-box__wrapper--decorator`]: decorator
   }]);
   const inputClasses = cx__default["default"](`${prefix}--text-input`, {
     [`${prefix}--text-input--empty`]: !inputValue,
@@ -407,10 +409,10 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
   // needs to be Capitalized for react to render it correctly
   const ItemToElement = itemToElement;
 
-  // Slug is always size `mini`
-  let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'AILabel') {
-    normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
+  // AILabel always size `mini`
+  let normalizedDecorator = /*#__PURE__*/React__default["default"].isValidElement(slug ?? decorator) ? slug ?? decorator : null;
+  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
+    normalizedDecorator = /*#__PURE__*/React__default["default"].cloneElement(normalizedDecorator, {
       size: 'mini'
     });
   }
@@ -467,12 +469,12 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
         type,
         selectedItem: newSelectedItem
       } = _ref6;
-      if (type === '__item_click__' && !isEqual__default["default"](selectedItemProp, newSelectedItem)) {
+      if (type === Downshift.useCombobox.stateChangeTypes.ItemClick && !isEqual__default["default"](selectedItemProp, newSelectedItem)) {
         onChange({
           selectedItem: newSelectedItem
         });
       }
-      if (type === '__function_select_item__' || type === '__input_keydown_enter__') {
+      if (type === Downshift.useCombobox.stateChangeTypes.FunctionSelectItem || type === Downshift.useCombobox.stateChangeTypes.InputKeyDownEnter) {
         onChange({
           selectedItem: newSelectedItem
         });
@@ -672,7 +674,9 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
   }), /*#__PURE__*/React__default["default"].createElement(ListBoxTrigger["default"], _rollupPluginBabelHelpers["extends"]({}, buttonProps, {
     isOpen: isOpen,
     translateWithId: translateWithId
-  }))), normalizedSlug, /*#__PURE__*/React__default["default"].createElement(index$1["default"].Menu, menuProps, isOpen ? filterItems(items, itemToString, inputValue).map((item, index) => {
+  }))), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--list-box__inner-wrapper--decorator`
+  }, normalizedDecorator) : '', /*#__PURE__*/React__default["default"].createElement(index$1["default"].Menu, menuProps, isOpen ? filterItems(items, itemToString, inputValue).map((item, index) => {
     const isObject = item !== null && typeof item === 'object';
     const title = isObject && 'text' in item && itemToElement ? item.text?.toString() : itemToString(item);
     const itemProps = getItemProps({
@@ -735,6 +739,10 @@ ComboBox.propTypes = {
    * An optional className to add to the container node
    */
   className: PropTypes__default["default"].string,
+  /**
+   * **Experimental**: Provide a decorator component to be rendered inside the `ComboBox` component
+   */
+  decorator: PropTypes__default["default"].node,
   /**
    * Specify the direction of the combobox dropdown. Can be either top or bottom.
    */
@@ -852,10 +860,7 @@ ComboBox.propTypes = {
    * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
    */
   size: ListBoxPropTypes.ListBoxSize,
-  /**
-   * **Experimental**: Provide a `Slug` component to be rendered inside the `ComboBox` component
-   */
-  slug: PropTypes__default["default"].node,
+  slug: deprecate["default"](PropTypes__default["default"].node, 'The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead.'),
   /**
    * Provide text to be used in a `<label>` element that is tied to the
    * combobox via ARIA attributes.