@carbon/react 1.42.0 → 1.43.0-rc.0

package/es/components/Breadcrumb/BreadcrumbItem.js

@@ -69,8 +69,7 @@ const BreadcrumbItem = /*#__PURE__*/React__default.forwardRef(function Breadcrum
 });
 BreadcrumbItem.displayName = 'BreadcrumbItem';
 BreadcrumbItem.propTypes = {
-  // @ts-expect-error - v12 TODO: BREAKING: This should match AriaAttributes['aria-current']
-  'aria-current': PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  'aria-current': PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['false', 'true', 'page', 'step', 'location', 'date', 'time'])]),
   /**
    * Pass in content that will be inside of the BreadcrumbItem
    */

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

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import Downshift from 'downshift';
+import { ReactNodeLike } from 'prop-types';
 import { type ComponentProps, type ReactNode, type ComponentType, type ReactElement, type RefAttributes, type PropsWithChildren, type PropsWithoutRef, type InputHTMLAttributes, type MouseEvent } from 'react';
 import { ListBoxSize } from '../ListBox';
 type ExcludedAttributes = 'id' | 'onChange' | 'onClick' | 'type' | 'size';
@@ -135,6 +136,10 @@ export interface ComboBoxProps<ItemType> extends Omit<InputHTMLAttributes<HTMLIn
      * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
      */
     size?: ListBoxSize;
+    /**
+     * Provide a `Slug` component to be rendered inside the `ComboBox` component
+     */
+    slug?: ReactNodeLike;
     /**
      * Provide text to be used in a `<label>` element that is tied to the
      * combobox via ARIA attributes.

package/es/components/ComboBox/ComboBox.js

@@ -112,6 +112,7 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
     warn,
     warnText,
     allowCustomValue = false,
+    slug,
     ...rest
   } = props;
   const prefix = usePrefix();
@@ -243,7 +244,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--fluid--focus`]: isFluid && isFocused,
+    [`${prefix}--list-box__wrapper--slug`]: slug
   }]);
   const inputClasses = cx(`${prefix}--text-input`, {
     [`${prefix}--text-input--empty`]: !inputValue,
@@ -252,6 +254,14 @@ 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) {
+    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+      size: 'mini'
+    });
+  }
   return /*#__PURE__*/React__default.createElement(Downshift, _extends({}, downshiftProps, {
     onChange: handleOnChange,
     onInputValueChange: handleOnInputValueChange,
@@ -402,7 +412,7 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
     }), /*#__PURE__*/React__default.createElement(ListBoxTrigger, _extends({}, buttonProps, {
       isOpen: isOpen,
       translateWithId: translateWithId
-    }))), /*#__PURE__*/React__default.createElement(ListBox.Menu, getMenuProps({
+    }))), normalizedSlug, /*#__PURE__*/React__default.createElement(ListBox.Menu, getMenuProps({
       'aria-label': deprecatedAriaLabel || ariaLabel
     }), isOpen ? filterItems(items, itemToString, inputValue).map((item, index) => {
       const isObject = item !== null && typeof item === 'object';
@@ -552,6 +562,10 @@ ComboBox.propTypes = {
    * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
    */
   size: ListBoxSize,
+  /**
+   * Provide a `Slug` component to be rendered inside the `ComboBox` component
+   */
+  slug: PropTypes.node,
   /**
    * Provide text to be used in a `<label>` element that is tied to the
    * combobox via ARIA attributes.

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

@@ -5,6 +5,7 @@ interface SecondaryButtonProps {
 }
 export interface SecondaryButtonSetProps {
     closeModal(evt: MouseEvent): void;
+    disabled?: boolean;
     onRequestClose(evt: MouseEvent): void;
     secondaryButtonText?: string;
     secondaryButtons?: [SecondaryButtonProps, SecondaryButtonProps];
@@ -66,6 +67,23 @@ export interface ModalFooterProps {
      * Specify a custom className to be applied to the secondary button
      */
     secondaryClassName?: string;
+    /**
+     * loading status
+     */
+    loadingStatus?: string;
+    /**
+     * Specify the description for the loading text
+     */
+    loadingDescription?: string;
+    /**
+     * Specify the description for the loading text
+     */
+    loadingIconDescription?: string;
+    /**
+     * Provide an optional handler to be invoked when loading is
+     * successful
+     */
+    onLoadingSuccess?(): void;
 }
 export declare const ModalFooter: React.ForwardRefExoticComponent<ModalFooterProps & React.RefAttributes<HTMLElement>>;
 export {};

package/es/components/ComposedModal/ModalFooter.js

@@ -14,6 +14,7 @@ import ButtonSet from '../ButtonSet/ButtonSet.js';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { noopFn } from '../../internal/noopFn.js';
+import InlineLoading from '../InlineLoading/InlineLoading.js';
 
 function SecondaryButtonSet(_ref) {
   let {
@@ -21,7 +22,8 @@ function SecondaryButtonSet(_ref) {
     secondaryButtonText,
     secondaryClassName,
     closeModal,
-    onRequestClose
+    onRequestClose,
+    disabled
   } = _ref;
   function handleRequestClose(evt) {
     closeModal(evt);
@@ -43,6 +45,7 @@ function SecondaryButtonSet(_ref) {
   }
   if (secondaryButtonText) {
     return /*#__PURE__*/React__default.createElement(Button, {
+      disabled: disabled,
       className: secondaryClassName,
       onClick: handleRequestClose,
       kind: "secondary"
@@ -52,6 +55,7 @@ function SecondaryButtonSet(_ref) {
 }
 SecondaryButtonSet.propTypes = {
   closeModal: PropTypes.func,
+  disabled: PropTypes.bool,
   onRequestClose: PropTypes.func,
   secondaryButtonText: PropTypes.string,
   secondaryButtons: (props, propName, componentName) => {
@@ -86,32 +90,43 @@ const ModalFooter = /*#__PURE__*/React__default.forwardRef(function ModalFooter(
     secondaryButtonText,
     secondaryButtons,
     secondaryClassName,
+    loadingStatus = 'inactive',
+    loadingDescription,
+    loadingIconDescription,
+    onLoadingSuccess = noopFn,
     ...rest
   } = _ref3;
   const prefix = usePrefix();
   const footerClass = cx(`${prefix}--modal-footer`, customClassName, Array.isArray(secondaryButtons) && secondaryButtons.length === 2 ? `${prefix}--modal-footer--three-button` : null);
+  const primaryButtonClass = cx(primaryClassName, loadingStatus !== 'inactive' ? `${prefix}--btn--loading` : null);
+  const loadingActive = loadingStatus !== 'inactive';
   const secondaryButtonProps = {
     closeModal,
     secondaryButtons,
     secondaryButtonText,
     secondaryClassName,
-    onRequestClose
+    onRequestClose,
+    disabled: loadingActive
   };
-  return (
-    /*#__PURE__*/
+  return /*#__PURE__*/React__default.createElement(ButtonSet, _extends({
+    className: footerClass
+  }, rest, {
     // @ts-expect-error: Invalid derived types, will be fine once explicit types are added
-    React__default.createElement(ButtonSet, _extends({
-      className: footerClass
-    }, rest, {
-      ref: ref
-    }), /*#__PURE__*/React__default.createElement(SecondaryButtonSet, secondaryButtonProps), primaryButtonText && /*#__PURE__*/React__default.createElement(Button, {
-      onClick: onRequestSubmit,
-      className: primaryClassName,
-      disabled: primaryButtonDisabled,
-      kind: danger ? 'danger' : 'primary',
-      ref: inputref
-    }, primaryButtonText), children)
-  );
+    ref: ref,
+    "aria-busy": loadingActive
+  }), /*#__PURE__*/React__default.createElement(SecondaryButtonSet, secondaryButtonProps), primaryButtonText && /*#__PURE__*/React__default.createElement(Button, {
+    onClick: onRequestSubmit,
+    className: primaryButtonClass,
+    disabled: loadingActive || primaryButtonDisabled,
+    kind: danger ? 'danger' : 'primary',
+    ref: inputref
+  }, loadingStatus === 'inactive' ? primaryButtonText : /*#__PURE__*/React__default.createElement(InlineLoading, {
+    status: loadingStatus,
+    description: loadingDescription,
+    iconDescription: loadingIconDescription,
+    className: `${prefix}--inline-loading--btn`,
+    onSuccess: onLoadingSuccess
+  })), children);
 });
 ModalFooter.propTypes = {
   /**
@@ -138,6 +153,23 @@ ModalFooter.propTypes = {
   inputref: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.any
   })]),
+  /**
+   * Specify the description for the loading text
+   */
+  loadingDescription: PropTypes.string,
+  /**
+   * Specify the description for the loading text
+   */
+  loadingIconDescription: PropTypes.string,
+  /**
+   * loading status
+   */
+  loadingStatus: PropTypes.oneOf(['inactive', 'active', 'finished', 'error']),
+  /**
+   * Provide an optional handler to be invoked when loading is
+   * successful
+   */
+  onLoadingSuccess: PropTypes.func,
   /**
    * Specify an optional function for when the modal is requesting to be
    * closed

package/es/components/DatePickerInput/DatePickerInput.d.ts

@@ -76,6 +76,10 @@ interface DatePickerInputProps extends Omit<ReactAttr<HTMLInputElement>, Exclude
      * Specify the size of the Date Picker Input. Currently supports either `sm`, `md`, or `lg` as an option.
      */
     size?: 'sm' | 'md' | 'lg';
+    /**
+     * Provide a `Slug` component to be rendered inside the `DatePickerInput` component
+     */
+    slug?: ReactNodeLike;
     /**
      * Specify the type of the `<input>`
      */

package/es/components/DatePickerInput/DatePickerInput.js

@@ -32,6 +32,7 @@ const DatePickerInput = /*#__PURE__*/React__default.forwardRef(function DatePick
     pattern = '\\d{1,2}\\/\\d{1,2}\\/\\d{4}',
     placeholder,
     size = 'md',
+    slug,
     type = 'text',
     warn,
     warnText,
@@ -60,7 +61,8 @@ const DatePickerInput = /*#__PURE__*/React__default.forwardRef(function DatePick
   };
   const wrapperClasses = cx(`${prefix}--date-picker-input__wrapper`, {
     [`${prefix}--date-picker-input__wrapper--invalid`]: invalid,
-    [`${prefix}--date-picker-input__wrapper--warn`]: warn
+    [`${prefix}--date-picker-input__wrapper--warn`]: warn,
+    [`${prefix}--date-picker-input__wrapper--slug`]: slug
   });
   const labelClasses = cx(`${prefix}--label`, {
     [`${prefix}--visually-hidden`]: hideLabel,
@@ -93,6 +95,14 @@ const DatePickerInput = /*#__PURE__*/React__default.forwardRef(function DatePick
     inputProps['data-invalid'] = true;
   }
   const input = /*#__PURE__*/React__default.createElement("input", inputProps);
+
+  // Slug is always size `mini`
+  let normalizedSlug;
+  if (slug) {
+    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+      size: 'mini'
+    });
+  }
   return /*#__PURE__*/React__default.createElement("div", {
     className: containerClasses
   }, labelText && /*#__PURE__*/React__default.createElement(Text, {
@@ -101,7 +111,7 @@ const DatePickerInput = /*#__PURE__*/React__default.forwardRef(function DatePick
     className: labelClasses
   }, labelText), /*#__PURE__*/React__default.createElement("div", {
     className: wrapperClasses
-  }, /*#__PURE__*/React__default.createElement("span", null, input, isFluid && /*#__PURE__*/React__default.createElement(DatePickerIcon, {
+  }, /*#__PURE__*/React__default.createElement("span", null, input, normalizedSlug, isFluid && /*#__PURE__*/React__default.createElement(DatePickerIcon, {
     datePickerType: datePickerType
   }), /*#__PURE__*/React__default.createElement(DatePickerIcon, {
     datePickerType: datePickerType,
@@ -195,6 +205,10 @@ DatePickerInput.propTypes = {
    * Specify the size of the Date Picker Input. Currently supports either `sm`, `md`, or `lg` as an option.
    */
   size: PropTypes.oneOf(['sm', 'md', 'lg']),
+  /**
+   * Provide a `Slug` component to be rendered inside the `DatePickerInput` component
+   */
+  slug: PropTypes.node,
   /**
    * Specify the type of the `<input>`
    */

package/es/components/Dropdown/Dropdown.d.ts

@@ -6,6 +6,7 @@
  */
 import React, { ReactNode } from 'react';
 import { UseSelectProps } from 'downshift';
+import { ReactNodeLike } from 'prop-types';
 import { ListBoxSize, ListBoxType } from '../ListBox';
 import { ReactAttr } from '../../types/common';
 type ExcludedAttributes = 'id' | 'onChange';
@@ -110,6 +111,10 @@ export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>,
      * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
      */
     size?: ListBoxSize;
+    /**
+     * Provide a `Slug` component to be rendered inside the `Dropdown` component
+     */
+    slug?: ReactNodeLike;
     /**
      * Provide the title text that will be read by a screen reader when
      * visiting this control

package/es/components/Dropdown/Dropdown.js

@@ -69,6 +69,7 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     selectedItem: controlledSelectedItem,
     downshiftProps,
     readOnly,
+    slug,
     ...other
   } = _ref;
   const prefix = usePrefix();
@@ -159,7 +160,8 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     [`${prefix}--dropdown__wrapper--inline--invalid`]: inline && invalid,
     [`${prefix}--list-box__wrapper--inline--invalid`]: inline && invalid,
     [`${prefix}--list-box__wrapper--fluid--invalid`]: isFluid && invalid,
-    [`${prefix}--list-box__wrapper--fluid--focus`]: isFluid && isFocused && !isOpen
+    [`${prefix}--list-box__wrapper--fluid--focus`]: isFluid && isFocused && !isOpen,
+    [`${prefix}--list-box__wrapper--slug`]: slug
   });
   const helperId = !helperText ? undefined : `dropdown-helper-text-${dropdownInstanceId}`;
 
@@ -223,6 +225,14 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     }
   };
   const menuProps = getMenuProps();
+
+  // Slug is always size `mini`
+  let normalizedSlug;
+  if (slug) {
+    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+      size: 'mini'
+    });
+  }
   return /*#__PURE__*/React__default.createElement("div", _extends({
     className: wrapperClasses
   }, other), titleText && /*#__PURE__*/React__default.createElement("label", _extends({
@@ -261,7 +271,7 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   }, selectedItem ? renderSelectedItem ? renderSelectedItem(selectedItem) : itemToString(selectedItem) : label), /*#__PURE__*/React__default.createElement(ListBox.MenuIcon, {
     isOpen: isOpen,
     translateWithId: translateWithId
-  })), /*#__PURE__*/React__default.createElement(ListBox.Menu, menuProps, isOpen && items.map((item, index) => {
+  })), normalizedSlug, /*#__PURE__*/React__default.createElement(ListBox.Menu, menuProps, isOpen && items.map((item, index) => {
     const isObject = item !== null && typeof item === 'object';
     const itemProps = getItemProps({
       item,
@@ -382,6 +392,10 @@ Dropdown.propTypes = {
    * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
    */
   size: ListBoxSize,
+  /**
+   * Provide a `Slug` component to be rendered inside the `Dropdown` component
+   */
+  slug: PropTypes.node,
   /**
    * Provide the title text that will be read by a screen reader when
    * visiting this control

package/es/components/InlineLoading/index.js

@@ -0,0 +1,9 @@
+/**
+ * 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 InlineLoading from './InlineLoading.js';
+export { default as InlineLoading, default } from './InlineLoading.js';

package/es/components/Modal/Modal.d.ts

@@ -54,6 +54,18 @@ export interface ModalProps extends ReactAttr<HTMLDivElement> {
      * Provide a ref to return focus to once the modal is closed.
      */
     launcherButtonRef?: any;
+    /**
+     * Specify the description for the loading text
+     */
+    loadingDescription?: string;
+    /**
+     * Specify the description for the loading text
+     */
+    loadingIconDescription?: string;
+    /**
+     * Specify loading status
+     */
+    loadingStatus?: string;
     /**
      * Specify a label to be read by screen readers on the modal root node
      */
@@ -71,6 +83,11 @@ export interface ModalProps extends ReactAttr<HTMLDivElement> {
      * @deprecated this property is unused
      */
     onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
+    /**
+     * Specify an optional handler to be invoked when loading is
+     * successful
+     */
+    onLoadingSuccess?: React.ReactEventHandler<HTMLElement>;
     /**
      * Specify a handler for closing modal.
      * The handler should care of closing modal, e.g. changing `open` prop.

package/es/components/Modal/Modal.js

@@ -14,6 +14,7 @@ import toggleClass from '../../tools/toggleClass.js';
 import Button from '../Button/Button.js';
 import '../Button/Button.Skeleton.js';
 import ButtonSet from '../ButtonSet/ButtonSet.js';
+import InlineLoading from '../InlineLoading/InlineLoading.js';
 import requiredIfGivenPropIsTruthy from '../../prop-types/requiredIfGivenPropIsTruthy.js';
 import wrapFocus, { elementOrParentIsFloatingMenu } from '../../internal/wrapFocus.js';
 import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
@@ -54,6 +55,10 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     preventCloseOnClickOutside = false,
     isFullWidth,
     launcherButtonRef,
+    loadingStatus = 'inactive',
+    loadingDescription,
+    loadingIconDescription,
+    onLoadingSuccess = noopFn,
     ...rest
   } = _ref;
   const prefix = usePrefix();
@@ -67,6 +72,10 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
   const modalHeadingId = `${prefix}--modal-header__heading--${modalInstanceId}`;
   const modalBodyId = `${prefix}--modal-body--${modalInstanceId}`;
   const modalCloseButtonClass = `${prefix}--modal-close`;
+  const primaryButtonClass = cx({
+    [`${prefix}--btn--loading`]: loadingStatus !== 'inactive'
+  });
+  const loadingActive = loadingStatus !== 'inactive';
   function isCloseButton(element) {
     return !onSecondarySubmit && element === secondaryButton.current || element.classList.contains(modalCloseButtonClass);
   }
@@ -219,7 +228,8 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
   }, hasScrollingContentProps), children), hasScrollingContent && /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--modal-content--overflow-indicator`
   }), !passiveModal && /*#__PURE__*/React__default.createElement(ButtonSet, {
-    className: footerClasses
+    className: footerClasses,
+    "aria-busy": loadingActive
   }, Array.isArray(secondaryButtons) && secondaryButtons.length <= 2 ? secondaryButtons.map((_ref3, i) => {
     let {
       buttonText,
@@ -231,15 +241,23 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
       onClick: onButtonClick
     }, buttonText);
   }) : secondaryButtonText && /*#__PURE__*/React__default.createElement(Button, {
+    disabled: loadingActive,
     kind: "secondary",
     onClick: onSecondaryButtonClick,
     ref: secondaryButton
   }, secondaryButtonText), /*#__PURE__*/React__default.createElement(Button, {
+    className: primaryButtonClass,
     kind: danger ? 'danger' : 'primary',
-    disabled: primaryButtonDisabled,
+    disabled: loadingActive || primaryButtonDisabled,
     onClick: onRequestSubmit,
     ref: button
-  }, primaryButtonText)));
+  }, loadingStatus === 'inactive' ? primaryButtonText : /*#__PURE__*/React__default.createElement(InlineLoading, {
+    status: loadingStatus,
+    description: loadingDescription,
+    iconDescription: loadingIconDescription,
+    className: `${prefix}--inline-loading--btn`,
+    onSuccess: onLoadingSuccess
+  }))));
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     onKeyDown: handleKeyDown,
     onMouseDown: handleMousedown,
@@ -303,6 +321,18 @@ Modal.propTypes = {
   launcherButtonRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.any
   })]),
+  /**
+   * Specify the description for the loading text
+   */
+  loadingDescription: PropTypes.string,
+  /**
+   * Specify the description for the loading text
+   */
+  loadingIconDescription: PropTypes.string,
+  /**
+   * loading status
+   */
+  loadingStatus: PropTypes.oneOf(['inactive', 'active', 'finished', 'error']),
   /**
    * Specify a label to be read by screen readers on the modal root node
    */
@@ -319,6 +349,11 @@ Modal.propTypes = {
    * Specify a handler for keypresses.
    */
   onKeyDown: PropTypes.func,
+  /**
+   * Provide an optional handler to be invoked when loading is
+   * successful
+   */
+  onLoadingSuccess: PropTypes.func,
   /**
    * Specify a handler for closing modal.
    * The handler should care of closing modal, e.g. changing `open` prop.

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -65,7 +65,8 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
     translateWithId,
     useTitleInItem,
     warn,
-    warnText
+    warnText,
+    slug
   } = _ref;
   const {
     isFluid
@@ -94,7 +95,8 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
     [`${prefix}--list-box__wrapper--inline--invalid`]: inline && invalid,
     [`${prefix}--list-box--up`]: direction === 'top',
     [`${prefix}--list-box__wrapper--fluid--invalid`]: isFluid && invalid,
-    [`${prefix}--list-box__wrapper--fluid--focus`]: isFluid && isFocused
+    [`${prefix}--list-box__wrapper--fluid--focus`]: isFluid && isFocused,
+    [`${prefix}--list-box__wrapper--slug`]: slug
   });
   const helperId = !helperText ? undefined : `filterablemultiselect-helper-text-${filterableMultiSelectInstanceId}`;
   const labelId = `${id}-label`;
@@ -188,6 +190,14 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
       textInput.current.focus();
     }
   }
+
+  // Slug is always size `mini`
+  let normalizedSlug;
+  if (slug) {
+    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+      size: 'mini'
+    });
+  }
   return /*#__PURE__*/React__default.createElement(Selection, {
     disabled: disabled,
     onChange: handleOnChange,
@@ -381,7 +391,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
         }), /*#__PURE__*/React__default.createElement(ListBoxTrigger, _extends({}, buttonProps, {
           isOpen: isOpen,
           translateWithId: translateWithId
-        }))), isOpen ? /*#__PURE__*/React__default.createElement(ListBox.Menu, menuProps, sortItems(filterItems(items, {
+        }))), normalizedSlug, isOpen ? /*#__PURE__*/React__default.createElement(ListBox.Menu, menuProps, sortItems(filterItems(items, {
           itemToString,
           inputValue
         }), {
@@ -534,6 +544,10 @@ FilterableMultiSelect.propTypes = {
    * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
    */
   size: ListBoxSize,
+  /**
+   * Provide a `Slug` component to be rendered inside the `FilterableMultiSelect` component
+   */
+  slug: PropTypes.node,
   ...sortingPropTypes,
   /**
    * Callback function for translating ListBoxMenuIcon SVG title

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

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { UseSelectProps } from 'downshift';
+import { ReactNodeLike } from 'prop-types';
 import React from 'react';
 import { ListBoxSize, ListBoxType } from '../ListBox';
 import { ListBoxProps } from '../ListBox/ListBox';
@@ -162,6 +163,10 @@ export interface MultiSelectProps<ItemType> extends MultiSelectSortingProps<Item
      * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
      */
     size?: ListBoxSize;
+    /**
+     * Provide a `Slug` component to be rendered inside the `MultiSelect` component
+     */
+    slug?: ReactNodeLike;
     /**
      * Provide text to be used in a `<label>` element that is tied to the
      * multiselect via ARIA attributes.

package/es/components/MultiSelect/MultiSelect.js

@@ -87,7 +87,8 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     direction = 'bottom',
     selectedItems: selected,
     readOnly,
-    locale = 'en'
+    locale = 'en',
+    slug
   } = _ref;
   const prefix = usePrefix();
   const {
@@ -181,7 +182,8 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     [`${prefix}--multi-select__wrapper--inline--invalid`]: inline && invalid,
     [`${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--fluid--focus`]: !isOpen && isFluid && isFocused,
+    [`${prefix}--list-box__wrapper--slug`]: slug
   });
   const titleClasses = cx(`${prefix}--label`, {
     [`${prefix}--label--disabled`]: disabled,
@@ -293,6 +295,14 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
       }
     }
   } : {};
+
+  // Slug is always size `mini`
+  let normalizedSlug;
+  if (slug) {
+    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+      size: 'mini'
+    });
+  }
   return /*#__PURE__*/React__default.createElement("div", {
     className: wrapperClasses
   }, /*#__PURE__*/React__default.createElement("label", _extends({
@@ -341,7 +351,7 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   }, label), /*#__PURE__*/React__default.createElement(ListBox.MenuIcon, {
     isOpen: isOpen,
     translateWithId: translateWithId
-  }))), /*#__PURE__*/React__default.createElement(ListBox.Menu, getMenuProps(), isOpen &&
+  })), normalizedSlug), /*#__PURE__*/React__default.createElement(ListBox.Menu, getMenuProps(), isOpen &&
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   sortItems(items, sortOptions).map((item, index) => {
     const isChecked = selectedItems.filter(selected => isEqual(selected, item)).length > 0;
@@ -496,6 +506,10 @@ MultiSelect.propTypes = {
    * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
    */
   size: ListBoxSize,
+  /**
+   * Provide a `Slug` component to be rendered inside the `MultiSelect` component
+   */
+  slug: PropTypes.node,
   /**
    * 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/NumberInput/NumberInput.d.ts

@@ -4,6 +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 { ReactNodeLike } from 'prop-types';
 import React, { ReactNode } from 'react';
 export declare const translationIds: {
     'increment.number': string;
@@ -107,6 +108,10 @@ export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInp
      * Specify the size of the Number Input.
      */
     size?: 'sm' | 'md' | 'lg';
+    /**
+     * Provide a `Slug` component to be rendered inside the `TextInput` component
+     */
+    slug?: ReactNodeLike;
     /**
      * Specify how much the values should increase/decrease upon clicking on up/down button
      */