@carbon/react 1.42.1 → 1.44.0-rc.0

package/es/components/Menu/MenuItem.js

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

package/es/components/MenuButton/index.js

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

package/es/components/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
      */

package/es/components/NumberInput/NumberInput.js

@@ -9,7 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import { Subtract, Add } from '@carbon/icons-react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default, { useContext, useState, useRef } from 'react';
+import React__default, { useContext, useState, useRef, useEffect } from 'react';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { useNormalizedInputProps } from '../../internal/useNormalizedInputProps.js';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -34,7 +34,7 @@ const NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(
     className: customClassName,
     disabled = false,
     disableWheel: disableWheelProp = false,
-    defaultValue,
+    defaultValue = 0,
     helperText = '',
     hideLabel = false,
     hideSteppers,
@@ -51,6 +51,7 @@ const NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(
     onKeyUp,
     readOnly,
     size = 'md',
+    slug,
     step = 1,
     translateWithId: t = id => defaultTranslations[id],
     warn = false,
@@ -102,7 +103,8 @@ const NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(
   });
   const [incrementNumLabel, decrementNumLabel] = [t('increment.number'), t('decrement.number')];
   const wrapperClasses = cx(`${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({
     [`${prefix}--number__invalid`]: normalizedProps.invalid || normalizedProps.warn,
@@ -167,6 +169,25 @@ const NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(
       }
     }
   }
+
+  // Slug is always size `mini`
+  let normalizedSlug;
+  if (slug) {
+    normalizedSlug = /*#__PURE__*/React__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;
+  }
+  useEffect(() => {
+    if (!isRevertActive && slug && defaultValue) {
+      setValue(defaultValue);
+    }
+  }, [defaultValue, isRevertActive, slug]);
   return /*#__PURE__*/React__default.createElement("div", {
     className: outerElementClasses,
     onFocus: isFluid ? handleFocus : undefined,
@@ -214,7 +235,7 @@ const NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(
     step: step,
     type: "number",
     value: value
-  })), Icon ? /*#__PURE__*/React__default.createElement(Icon, {
+  })), normalizedSlug, Icon ? /*#__PURE__*/React__default.createElement(Icon, {
     className: iconClasses
   }) : null, !hideSteppers && /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--number__controls`
@@ -338,6 +359,10 @@ NumberInput.propTypes = {
    * Specify the size of the Number Input.
    */
   size: PropTypes.oneOf(['sm', 'md', 'lg']),
+  /**
+   * Provide a `Slug` component to be rendered inside the `NumberInput` component
+   */
+  slug: PropTypes.node,
   /**
    * Specify how much the values should increase/decrease upon clicking on up/down button
    */

package/es/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/es/components/Select/Select.js

@@ -41,6 +41,7 @@ const Select = /*#__PURE__*/React__default.forwardRef(function Select(_ref, ref)
     warn = false,
     warnText,
     onChange,
+    slug,
     ...other
   } = _ref;
   const prefix = usePrefix();
@@ -61,7 +62,8 @@ const Select = /*#__PURE__*/React__default.forwardRef(function Select(_ref, ref)
     [`${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(`${prefix}--label`, {
     [`${prefix}--visually-hidden`]: hideLabel,
@@ -123,6 +125,14 @@ const Select = /*#__PURE__*/React__default.forwardRef(function Select(_ref, ref)
       }
     }
   };
+
+  // Slug is always size `mini`
+  let normalizedSlug;
+  if (slug) {
+    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+      size: 'mini'
+    });
+  }
   const input = (() => {
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("select", _extends({}, other, ariaProps, {
       id: id,
@@ -160,7 +170,7 @@ const Select = /*#__PURE__*/React__default.forwardRef(function Select(_ref, ref)
     "data-invalid": invalid || null,
     onFocus: handleFocus,
     onBlur: handleFocus
-  }, input, isFluid && /*#__PURE__*/React__default.createElement("hr", {
+  }, input, normalizedSlug, isFluid && /*#__PURE__*/React__default.createElement("hr", {
     className: `${prefix}--select__divider`
   }), isFluid && error ? error : null), !inline && !isFluid && error ? error : helper));
 });
@@ -234,6 +244,10 @@ Select.propTypes = {
    * Specify the size of the Select Input.
    */
   size: PropTypes.oneOf(['sm', 'md', 'lg']),
+  /**
+   * Provide a `Slug` component to be rendered inside the `Select` component
+   */
+  slug: PropTypes.node,
   /**
    * Specify whether the control is currently in warning state
    */