@carbon/react 1.42.1 → 1.44.0-rc.0

package/lib/components/Link/Link.js

@@ -23,6 +23,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const Link = /*#__PURE__*/React__default["default"].forwardRef(function Link(_ref, ref) {
   let {
+    as: BaseComponent,
     children,
     className: customClassName,
     href,
@@ -43,7 +44,7 @@ const Link = /*#__PURE__*/React__default["default"].forwardRef(function Link(_re
   });
   const rel = target === '_blank' ? 'noopener' : undefined;
   const linkProps = {
-    className,
+    className: BaseComponent ? undefined : className,
     rel,
     target
   };
@@ -56,7 +57,8 @@ const Link = /*#__PURE__*/React__default["default"].forwardRef(function Link(_re
     linkProps.role = 'link';
     linkProps['aria-disabled'] = true;
   }
-  return /*#__PURE__*/React__default["default"].createElement("a", _rollupPluginBabelHelpers["extends"]({
+  const BaseComponentAsAny = BaseComponent ?? 'a';
+  return /*#__PURE__*/React__default["default"].createElement(BaseComponentAsAny, _rollupPluginBabelHelpers["extends"]({
     ref: ref
   }, linkProps, rest), children, !inline && Icon && /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--link__icon`
@@ -64,6 +66,11 @@ const Link = /*#__PURE__*/React__default["default"].forwardRef(function Link(_re
 });
 Link.displayName = 'Link';
 Link.propTypes = {
+  /**
+   * Provide a custom element or component to render the top-level node for the
+   * component.
+   */
+  as: PropTypes__default["default"].string,
   /**
    * Provide the content for the Link
    */

package/lib/components/Menu/Menu.js

@@ -16,6 +16,7 @@ var React = require('react');
 var ReactDOM = require('react-dom');
 var useMergedRefs = require('../../internal/useMergedRefs.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var warning = require('../../internal/warning.js');
 var MenuContext = require('./MenuContext.js');
 var useLayoutDirection = require('../LayoutDirection/useLayoutDirection.js');
 var match = require('../../internal/keyboard/match.js');
@@ -34,6 +35,7 @@ const Menu = /*#__PURE__*/React__default["default"].forwardRef(function Menu(_re
     children,
     className,
     label,
+    mode = 'full',
     onClose,
     onOpen,
     open,
@@ -47,10 +49,14 @@ const Menu = /*#__PURE__*/React__default["default"].forwardRef(function Menu(_re
   const focusReturn = React.useRef(null);
   const context = React.useContext(MenuContext.MenuContext);
   const isRoot = context.state.isRoot;
+  if (context.state.mode === 'basic' && !isRoot) {
+    process.env.NODE_ENV !== "production" ? warning.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] = React.useReducer(MenuContext.menuReducer, {
     ...context.state,
     isRoot: false,
+    mode,
     size,
     requestCloseRoot: isRoot ? handleClose : context.state.requestCloseRoot
   });
@@ -255,6 +261,14 @@ Menu.propTypes = {
    * A label describing the Menu.
    */
   label: PropTypes__default["default"].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__default["default"].oneOf(['full', 'basic']),
   /**
    * Provide an optional function to be called when the Menu should be closed.
    */

package/lib/components/Menu/MenuContext.js

@@ -17,6 +17,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const menuDefaultState = {
   isRoot: true,
+  mode: 'full',
   hasIcons: false,
   size: null,
   items: [],

package/lib/components/Menu/MenuItem.js

@@ -17,6 +17,7 @@ var iconsReact = require('@carbon/icons-react');
 var useControllableState = require('../../internal/useControllableState.js');
 var useMergedRefs = require('../../internal/useMergedRefs.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var warning = require('../../internal/warning.js');
 var Menu = require('./Menu.js');
 var MenuContext = require('./MenuContext.js');
 require('../Text/index.js');
@@ -153,6 +154,14 @@ const MenuItem = /*#__PURE__*/React__default["default"].forwardRef(function Menu
       setRtl(false);
     }
   }, [direction]);
+  const iconsAllowed = context.state.mode === 'basic' || rest.role === 'menuitemcheckbox' || rest.role === 'menuitemradio';
+  React.useEffect(() => {
+    if (iconsAllowed && IconElement && !context.state.hasIcons) {
+      context.dispatch({
+        type: 'enableIcons'
+      });
+    }
+  }, [iconsAllowed, IconElement, context.state.hasIcons, context]);
   return /*#__PURE__*/React__default["default"].createElement("li", _rollupPluginBabelHelpers["extends"]({
     role: "menuitem"
   }, rest, {
@@ -168,7 +177,7 @@ const MenuItem = /*#__PURE__*/React__default["default"].forwardRef(function Menu
     onKeyDown: handleKeyDown
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--menu-item__icon`
-  }, IconElement && /*#__PURE__*/React__default["default"].createElement(IconElement, null)), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
+  }, iconsAllowed && IconElement && /*#__PURE__*/React__default["default"].createElement(IconElement, null)), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
     as: "div",
     className: `${prefix}--menu-item__label`
   }, label), shortcut && !hasChildren && /*#__PURE__*/React__default["default"].createElement("div", {
@@ -212,7 +221,7 @@ MenuItem.propTypes = {
    */
   onClick: PropTypes__default["default"].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__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
   /**
@@ -231,6 +240,9 @@ const MenuItemSelectable = /*#__PURE__*/React__default["default"].forwardRef(fun
   } = _ref2;
   const prefix = usePrefix.usePrefix();
   const context = React.useContext(MenuContext.MenuContext);
+  if (context.state.mode === 'basic') {
+    process.env.NODE_ENV !== "production" ? warning.warning(false, 'MenuItemSelectable is not supported when the menu is in "basic" mode.') : void 0;
+  }
   const [checked, setChecked] = useControllableState.useControllableState({
     value: selected,
     onChange,
@@ -256,7 +268,7 @@ const MenuItemSelectable = /*#__PURE__*/React__default["default"].forwardRef(fun
     className: classNames,
     role: "menuitemcheckbox",
     "aria-checked": checked,
-    renderIcon: checked && iconsReact.Checkmark,
+    renderIcon: checked ? iconsReact.Checkmark : undefined,
     onClick: handleClick
   }));
 });
@@ -328,6 +340,9 @@ const MenuItemRadioGroup = /*#__PURE__*/React__default["default"].forwardRef(fun
   } = _ref4;
   const prefix = usePrefix.usePrefix();
   const context = React.useContext(MenuContext.MenuContext);
+  if (context.state.mode === 'basic') {
+    process.env.NODE_ENV !== "production" ? warning.warning(false, 'MenuItemRadioGroup is not supported when the menu is in "basic" mode.') : void 0;
+  }
   const [selection, setSelection] = useControllableState.useControllableState({
     value: selectedItem,
     onChange,
@@ -359,7 +374,7 @@ const MenuItemRadioGroup = /*#__PURE__*/React__default["default"].forwardRef(fun
     label: itemToString(item),
     role: "menuitemradio",
     "aria-checked": item === selection,
-    renderIcon: item === selection && iconsReact.Checkmark,
+    renderIcon: item === selection ? iconsReact.Checkmark : undefined,
     onClick: e => {
       handleClick(item, e);
     }

package/lib/components/MenuButton/index.js

@@ -67,6 +67,7 @@ const MenuButton = /*#__PURE__*/React__default["default"].forwardRef(function Me
   function handleOpen() {
     menuRef.current.style.inlineSize = `${width}px`;
   }
+  const containerClasses = cx__default["default"](`${prefix}--menu-button__container`, className);
   const triggerClasses = cx__default["default"](`${prefix}--menu-button__trigger`, {
     [`${prefix}--menu-button__trigger--open`]: open
   });
@@ -74,7 +75,7 @@ const MenuButton = /*#__PURE__*/React__default["default"].forwardRef(function Me
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
     ref: ref,
     "aria-owns": open ? id : null,
-    className: className
+    className: containerClasses
   }), /*#__PURE__*/React__default["default"].createElement(Button["default"], {
     className: triggerClasses,
     size: size,
@@ -90,6 +91,7 @@ const MenuButton = /*#__PURE__*/React__default["default"].forwardRef(function Me
     ref: menuRef,
     id: id,
     label: label,
+    mode: "basic",
     size: size,
     open: open,
     onClose: handleClose,

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

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

package/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -77,7 +77,8 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
     translateWithId,
     useTitleInItem,
     warn,
-    warnText
+    warnText,
+    slug
   } = _ref;
   const {
     isFluid
@@ -106,7 +107,8 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
     [`${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`;
@@ -200,6 +202,14 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
       textInput.current.focus();
     }
   }
+
+  // Slug is always size `mini`
+  let normalizedSlug;
+  if (slug) {
+    normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
+      size: 'mini'
+    });
+  }
   return /*#__PURE__*/React__default["default"].createElement(Selection["default"], {
     disabled: disabled,
     onChange: handleOnChange,
@@ -393,7 +403,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
         }), /*#__PURE__*/React__default["default"].createElement(ListBoxTrigger["default"], _rollupPluginBabelHelpers["extends"]({}, buttonProps, {
           isOpen: isOpen,
           translateWithId: translateWithId
-        }))), isOpen ? /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, menuProps, sortItems(filterItems(items, {
+        }))), normalizedSlug, isOpen ? /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, menuProps, sortItems(filterItems(items, {
           itemToString: itemToString$1,
           inputValue
         }), {
@@ -546,6 +556,10 @@ FilterableMultiSelect.propTypes = {
    * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
    */
   size: ListBoxPropTypes.ListBoxSize,
+  /**
+   * Provide a `Slug` component to be rendered inside the `FilterableMultiSelect` component
+   */
+  slug: PropTypes__default["default"].node,
   ...MultiSelectPropTypes.sortingPropTypes,
   /**
    * Callback function for translating ListBoxMenuIcon SVG title

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

@@ -98,7 +98,8 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
     direction = 'bottom',
     selectedItems: selected,
     readOnly,
-    locale = 'en'
+    locale = 'en',
+    slug
   } = _ref;
   const prefix = usePrefix.usePrefix();
   const {
@@ -192,7 +193,8 @@ const MultiSelect = /*#__PURE__*/React__default["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__default["default"](`${prefix}--label`, {
     [`${prefix}--label--disabled`]: disabled,
@@ -304,6 +306,14 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
       }
     }
   } : {};
+
+  // Slug is always size `mini`
+  let normalizedSlug;
+  if (slug) {
+    normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
+      size: 'mini'
+    });
+  }
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: wrapperClasses
   }, /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({
@@ -352,7 +362,7 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
   }, label), /*#__PURE__*/React__default["default"].createElement(index["default"].MenuIcon, {
     isOpen: isOpen,
     translateWithId: translateWithId
-  }))), /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, getMenuProps(), isOpen &&
+  })), normalizedSlug), /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, getMenuProps(), isOpen &&
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   sortItems(items, sortOptions).map((item, index$1) => {
     const isChecked = selectedItems.filter(selected => isEqual__default["default"](selected, item)).length > 0;
@@ -507,6 +517,10 @@ MultiSelect.propTypes = {
    * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
    */
   size: ListBoxPropTypes.ListBoxSize,
+  /**
+   * Provide a `Slug` component to be rendered inside the `MultiSelect` component
+   */
+  slug: PropTypes__default["default"].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/lib/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
      */

package/lib/components/NumberInput/NumberInput.js

@@ -44,7 +44,7 @@ const NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function N
     className: customClassName,
     disabled = false,
     disableWheel: disableWheelProp = false,
-    defaultValue,
+    defaultValue = 0,
     helperText = '',
     hideLabel = false,
     hideSteppers,
@@ -61,6 +61,7 @@ const NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function N
     onKeyUp,
     readOnly,
     size = 'md',
+    slug,
     step = 1,
     translateWithId: t = id => defaultTranslations[id],
     warn = false,
@@ -112,7 +113,8 @@ const NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function N
   });
   const [incrementNumLabel, decrementNumLabel] = [t('increment.number'), t('decrement.number')];
   const wrapperClasses = cx__default["default"](`${prefix}--number__input-wrapper`, {
-    [`${prefix}--number__input-wrapper--warning`]: normalizedProps.warn
+    [`${prefix}--number__input-wrapper--warning`]: normalizedProps.warn,
+    [`${prefix}--number__input-wrapper--slug`]: slug
   });
   const iconClasses = cx__default["default"]({
     [`${prefix}--number__invalid`]: normalizedProps.invalid || normalizedProps.warn,
@@ -177,6 +179,25 @@ const NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function N
       }
     }
   }
+
+  // Slug is always size `mini`
+  let normalizedSlug;
+  if (slug) {
+    normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
+      size: 'mini'
+    });
+  }
+
+  // Need to update the internal value when the revert button is clicked
+  let isRevertActive;
+  if (slug) {
+    isRevertActive = normalizedSlug.props.revertActive;
+  }
+  React.useEffect(() => {
+    if (!isRevertActive && slug && defaultValue) {
+      setValue(defaultValue);
+    }
+  }, [defaultValue, isRevertActive, slug]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: outerElementClasses,
     onFocus: isFluid ? handleFocus : undefined,
@@ -224,7 +245,7 @@ const NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function N
     step: step,
     type: "number",
     value: value
-  })), Icon ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+  })), normalizedSlug, Icon ? /*#__PURE__*/React__default["default"].createElement(Icon, {
     className: iconClasses
   }) : null, !hideSteppers && /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--number__controls`
@@ -348,6 +369,10 @@ NumberInput.propTypes = {
    * Specify the size of the Number Input.
    */
   size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg']),
+  /**
+   * Provide a `Slug` component to be rendered inside the `NumberInput` component
+   */
+  slug: PropTypes__default["default"].node,
   /**
    * Specify how much the values should increase/decrease upon clicking on up/down button
    */

package/lib/components/Select/Select.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, { ChangeEventHandler, ComponentPropsWithRef, ReactNode } from 'react';
 type ExcludedAttributes = 'size';
 interface SelectProps extends Omit<ComponentPropsWithRef<'select'>, ExcludedAttributes> {
@@ -76,6 +77,10 @@ interface SelectProps extends Omit<ComponentPropsWithRef<'select'>, ExcludedAttr
      * Specify the size of the Select Input.
      */
     size?: 'sm' | 'md' | 'lg';
+    /**
+     * Provide a `Slug` component to be rendered inside the `Dropdown` component
+     */
+    slug?: ReactNodeLike;
     /**
      * Specify whether the control is currently in warning state
      */
@@ -85,5 +90,5 @@ interface SelectProps extends Omit<ComponentPropsWithRef<'select'>, ExcludedAttr
      */
     warnText?: ReactNode;
 }
-declare const Select: React.ForwardRefExoticComponent<Pick<SelectProps, "value" | "children" | "disabled" | "form" | "slot" | "style" | "title" | "className" | "size" | "dir" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "autoComplete" | "multiple" | "key" | "id" | "aria-controls" | "aria-expanded" | "onClick" | "onAnimationEnd" | "onKeyDown" | "tabIndex" | "color" | "lang" | "name" | "role" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "inline" | "readOnly" | "required" | "light" | "invalid" | "labelText" | "helperText" | "invalidText" | "hideLabel" | "warn" | "warnText" | "noLabel"> & React.RefAttributes<HTMLSelectElement>>;
+declare const Select: React.ForwardRefExoticComponent<Pick<SelectProps, "value" | "children" | "disabled" | "form" | "slot" | "style" | "title" | "className" | "size" | "dir" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "autoComplete" | "multiple" | "key" | "id" | "aria-controls" | "aria-expanded" | "onClick" | "onAnimationEnd" | "onKeyDown" | "tabIndex" | "color" | "lang" | "name" | "role" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "inline" | "readOnly" | "required" | "light" | "invalid" | "labelText" | "helperText" | "invalidText" | "hideLabel" | "warn" | "warnText" | "slug" | "noLabel"> & React.RefAttributes<HTMLSelectElement>>;
 export default Select;

package/lib/components/Select/Select.js

@@ -51,6 +51,7 @@ const Select = /*#__PURE__*/React__default["default"].forwardRef(function Select
     warn = false,
     warnText,
     onChange,
+    slug,
     ...other
   } = _ref;
   const prefix = usePrefix.usePrefix();
@@ -71,7 +72,8 @@ const Select = /*#__PURE__*/React__default["default"].forwardRef(function Select
     [`${prefix}--select--readonly`]: readOnly,
     [`${prefix}--select--warning`]: warn,
     [`${prefix}--select--fluid--invalid`]: isFluid && invalid,
-    [`${prefix}--select--fluid--focus`]: isFluid && isFocused
+    [`${prefix}--select--fluid--focus`]: isFluid && isFocused,
+    [`${prefix}--select--slug`]: slug
   });
   const labelClasses = cx__default["default"](`${prefix}--label`, {
     [`${prefix}--visually-hidden`]: hideLabel,
@@ -133,6 +135,14 @@ const Select = /*#__PURE__*/React__default["default"].forwardRef(function Select
       }
     }
   };
+
+  // Slug is always size `mini`
+  let normalizedSlug;
+  if (slug) {
+    normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
+      size: 'mini'
+    });
+  }
   const input = (() => {
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("select", _rollupPluginBabelHelpers["extends"]({}, other, ariaProps, {
       id: id,
@@ -170,7 +180,7 @@ const Select = /*#__PURE__*/React__default["default"].forwardRef(function Select
     "data-invalid": invalid || null,
     onFocus: handleFocus,
     onBlur: handleFocus
-  }, input, isFluid && /*#__PURE__*/React__default["default"].createElement("hr", {
+  }, input, normalizedSlug, isFluid && /*#__PURE__*/React__default["default"].createElement("hr", {
     className: `${prefix}--select__divider`
   }), isFluid && error ? error : null), !inline && !isFluid && error ? error : helper));
 });
@@ -244,6 +254,10 @@ Select.propTypes = {
    * Specify the size of the Select Input.
    */
   size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg']),
+  /**
+   * Provide a `Slug` component to be rendered inside the `Select` component
+   */
+  slug: PropTypes__default["default"].node,
   /**
    * Specify whether the control is currently in warning state
    */