@carbon/react 1.42.0 → 1.43.0-rc.0

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
    */

package/lib/components/Slug/index.js

@@ -0,0 +1,199 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var cx = require('classnames');
+var PropTypes = require('prop-types');
+var React = require('react');
+var usePrefix = require('../../internal/usePrefix.js');
+var index = require('../Toggletip/index.js');
+var index$1 = require('../IconButton/index.js');
+var iconsReact = require('@carbon/icons-react');
+var useId = require('../../internal/useId.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var _Undo;
+const SlugContent = /*#__PURE__*/React__default["default"].forwardRef(function SlugContent(_ref, ref) {
+  let {
+    children,
+    className
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const slugContentClasses = cx__default["default"](className, {
+    [`${prefix}--slug-content`]: true
+  });
+  return /*#__PURE__*/React__default["default"].createElement(index.ToggletipContent, {
+    className: slugContentClasses,
+    ref: ref
+  }, children);
+});
+SlugContent.propTypes = {
+  /**
+   * Specify the content you want rendered inside the slug ToggleTip
+   */
+  children: PropTypes__default["default"].node,
+  /**
+   * Specify an optional className to be added to the AI slug callout
+   */
+  className: PropTypes__default["default"].string
+};
+const SlugActions = /*#__PURE__*/React__default["default"].forwardRef(function SlugActions(_ref2, ref) {
+  let {
+    children,
+    className
+  } = _ref2;
+  const prefix = usePrefix.usePrefix();
+  const slugActionBarClasses = cx__default["default"](className, {
+    [`${prefix}--slug-actions`]: true
+  });
+  return /*#__PURE__*/React__default["default"].createElement(index.ToggletipActions, {
+    className: slugActionBarClasses,
+    ref: ref
+  }, children);
+});
+SlugActions.propTypes = {
+  /**
+   * Specify the content you want rendered inside the slug callout toolbar
+   */
+  children: PropTypes__default["default"].node,
+  /**
+   * Specify an optional className to be added to the AI slug toolbar
+   */
+  className: PropTypes__default["default"].string
+};
+const Slug = /*#__PURE__*/React__default["default"].forwardRef(function Slug(_ref3, ref) {
+  let {
+    aiText = 'AI',
+    aiTextLabel,
+    align,
+    autoAlign = true,
+    children,
+    className,
+    dotType,
+    kind,
+    onRevertClick,
+    revertActive,
+    revertLabel = 'Revert to AI input',
+    slugLabel = 'Show information',
+    size = 'xs',
+    ...rest
+  } = _ref3;
+  const prefix = usePrefix.usePrefix();
+  const id = useId.useId('slug');
+  const slugClasses = cx__default["default"](className, {
+    [`${prefix}--slug`]: true,
+    [`${prefix}--slug--hollow`]: kind === 'hollow' || dotType === 'hollow',
+    // Need to come up with a better name; explainable?
+    // Need to be able to target the non-hollow variant another way
+    // other than using `:not` all over the styles
+    [`${prefix}--slug--enabled`]: kind !== 'hollow' && dotType !== 'hollow',
+    [`${prefix}--slug--revert`]: revertActive
+  });
+  const slugButtonClasses = cx__default["default"]({
+    [`${prefix}--slug__button`]: true,
+    [`${prefix}--slug__button--${size}`]: size,
+    [`${prefix}--slug__button--${kind}`]: kind,
+    [`${prefix}--slug__button--inline-with-content`]: kind === 'inline' && aiTextLabel
+  });
+  const handleOnRevertClick = evt => {
+    if (onRevertClick) {
+      onRevertClick(evt);
+    }
+  };
+  const ariaLabel = `${aiText} - ${slugLabel}`;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: slugClasses,
+    ref: ref,
+    id: id
+  }, revertActive ? /*#__PURE__*/React__default["default"].createElement(index$1.IconButton, _rollupPluginBabelHelpers["extends"]({
+    onClick: handleOnRevertClick,
+    kind: "ghost",
+    size: "sm",
+    label: revertLabel
+  }, rest), _Undo || (_Undo = /*#__PURE__*/React__default["default"].createElement(iconsReact.Undo, null))) : /*#__PURE__*/React__default["default"].createElement(index.Toggletip, _rollupPluginBabelHelpers["extends"]({
+    align: align,
+    autoAlign: autoAlign
+  }, rest), /*#__PURE__*/React__default["default"].createElement(index.ToggletipButton, {
+    className: slugButtonClasses,
+    label: ariaLabel
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
+    className: `${prefix}--slug__text`
+  }, aiText), aiTextLabel && /*#__PURE__*/React__default["default"].createElement("span", {
+    className: `${prefix}--slug__additional-text`
+  }, aiTextLabel)), children));
+});
+Slug.propTypes = {
+  /**
+   * Specify the correct translation of the AI text
+   */
+  aiText: PropTypes__default["default"].string,
+  /**
+   * Specify additional text to be rendered next to the AI label in the inline variant
+   */
+  aiTextLabel: PropTypes__default["default"].string,
+  /**
+   * Specify how the popover should align with the button
+   */
+  align: PropTypes__default["default"].oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'left-bottom', 'left-top', 'right', 'right-bottom', 'right-top']),
+  /**
+   * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
+   */
+  autoAlign: PropTypes__default["default"].bool,
+  /**
+   * Specify the content you want rendered inside the slug ToggleTip
+   */
+  children: PropTypes__default["default"].node,
+  /**
+   * Specify an optional className to be added to the AI slug
+   */
+  className: PropTypes__default["default"].string,
+  /**
+   * Specify the type of dot that should be rendered in front of the inline variant
+   */
+  dotType: PropTypes__default["default"].oneOf(['default', 'hollow']),
+  /**
+   * Specify the type of Slug, from the following list of types:
+   */
+  kind: PropTypes__default["default"].oneOf(['default', 'hollow', 'inline']),
+  /**
+   * Callback function that fires when the revert button is clicked
+   */
+  onRevertClick: PropTypes__default["default"].func,
+  /**
+   * Specify whether the revert button should be visible
+   */
+  revertActive: PropTypes__default["default"].bool,
+  /**
+   * Specify the text that should be shown when the revert button is hovered
+   */
+  revertLabel: PropTypes__default["default"].string,
+  /**
+   * Specify the size of the button, from the following list of sizes:
+   */
+  size: PropTypes__default["default"].oneOf(['mini', '2xs', 'xs', 'sm', 'md', 'lg', 'xl']),
+  /**
+   * Specify the content you want rendered inside the slug ToggleTip
+   */
+  slugContent: PropTypes__default["default"].node,
+  /**
+   * Specify the text that will be provided to the aria-label of the `Slug` button
+   */
+  slugLabel: PropTypes__default["default"].string
+};
+
+exports.Slug = Slug;
+exports.SlugActions = SlugActions;
+exports.SlugContent = SlugContent;

package/lib/components/TextArea/TextArea.d.ts

@@ -85,6 +85,10 @@ export interface TextAreaProps extends React.InputHTMLAttributes<HTMLTextAreaEle
      * Specify the rows attribute for the `<textarea>`
      */
     rows?: number;
+    /**
+     * Provide a `Slug` component to be rendered inside the `TextArea` component
+     */
+    slug?: ReactNodeLike;
     /**
      * Provide the current value of the `<textarea>`
      */

package/lib/components/TextArea/TextArea.js

@@ -52,6 +52,7 @@ const TextArea = /*#__PURE__*/React__default["default"].forwardRef((props, forwa
     warn = false,
     warnText = '',
     rows = 4,
+    slug,
     ...other
   } = props;
   const prefix = usePrefix.usePrefix();
@@ -66,9 +67,19 @@ const TextArea = /*#__PURE__*/React__default["default"].forwardRef((props, forwa
   const {
     current: textAreaInstanceId
   } = React.useRef(getInstanceId());
+  const textareaRef = React.useRef(null);
+  const ref = useMergedRefs.useMergedRefs([forwardRef, textareaRef]);
   React.useEffect(() => {
     setTextCount(defaultValue?.toString()?.length || value?.toString()?.length || 0);
   }, [value, defaultValue]);
+  useIsomorphicEffect["default"](() => {
+    if (other.cols && textareaRef.current) {
+      textareaRef.current.style.width = '';
+      textareaRef.current.style.resize = 'none';
+    } else if (textareaRef.current) {
+      textareaRef.current.style.width = `100%`;
+    }
+  }, [other.cols]);
   const textareaProps = {
     id,
     onChange: evt => {
@@ -87,29 +98,36 @@ const TextArea = /*#__PURE__*/React__default["default"].forwardRef((props, forwa
       }
     }
   };
-  if (enableCounter) {
-    textareaProps.maxLength = maxCount;
-  }
-  const ariaAnnouncement = useAnnouncer.useAnnouncer(textCount, maxCount);
+  const formItemClasses = cx__default["default"](`${prefix}--form-item`, className);
+  const textAreaWrapperClasses = cx__default["default"](`${prefix}--text-area__wrapper`, {
+    [`${prefix}--text-area__wrapper--readonly`]: other.readOnly,
+    [`${prefix}--text-area__wrapper--warn`]: warn,
+    [`${prefix}--text-area__wrapper--slug`]: slug
+  });
   const labelClasses = cx__default["default"](`${prefix}--label`, {
     [`${prefix}--visually-hidden`]: hideLabel && !isFluid,
     [`${prefix}--label--disabled`]: disabled
   });
+  const textareaClasses = cx__default["default"](`${prefix}--text-area`, {
+    [`${prefix}--text-area--light`]: light,
+    [`${prefix}--text-area--invalid`]: invalid,
+    [`${prefix}--text-area--warn`]: warn
+  });
+  const counterClasses = cx__default["default"](`${prefix}--label`, {
+    [`${prefix}--label--disabled`]: disabled
+  });
+  const helperTextClasses = cx__default["default"](`${prefix}--form__helper-text`, {
+    [`${prefix}--form__helper-text--disabled`]: disabled
+  });
   const label = labelText ? /*#__PURE__*/React__default["default"].createElement(Text.Text, {
     as: "label",
     htmlFor: id,
     className: labelClasses
   }, labelText) : null;
-  const counterClasses = cx__default["default"](`${prefix}--label`, {
-    [`${prefix}--label--disabled`]: disabled
-  });
   const counter = enableCounter && maxCount ? /*#__PURE__*/React__default["default"].createElement(Text.Text, {
     as: "div",
     className: counterClasses
   }, `${textCount}/${maxCount}`) : null;
-  const helperTextClasses = cx__default["default"](`${prefix}--form__helper-text`, {
-    [`${prefix}--form__helper-text--disabled`]: disabled
-  });
   const helperId = !helperText ? undefined : `text-area-helper-text-${textAreaInstanceId}`;
   const helper = helperText ? /*#__PURE__*/React__default["default"].createElement(Text.Text, {
     as: "div",
@@ -132,27 +150,16 @@ const TextArea = /*#__PURE__*/React__default["default"].forwardRef((props, forwa
   }, warnText, isFluid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningAltFilled, {
     className: `${prefix}--text-area__invalid-icon ${prefix}--text-area__invalid-icon--warning`
   })) : null;
-  const textareaClasses = cx__default["default"](`${prefix}--text-area`, {
-    [`${prefix}--text-area--light`]: light,
-    [`${prefix}--text-area--invalid`]: invalid,
-    [`${prefix}--text-area--warn`]: warn
-  });
-  const textareaRef = React.useRef(null);
-  const ref = useMergedRefs.useMergedRefs([forwardRef, textareaRef]);
-  useIsomorphicEffect["default"](() => {
-    if (other.cols && textareaRef.current) {
-      textareaRef.current.style.width = '';
-      textareaRef.current.style.resize = 'none';
-    } else if (textareaRef.current) {
-      textareaRef.current.style.width = `100%`;
-    }
-  }, [other.cols]);
   let ariaDescribedBy;
   if (invalid) {
     ariaDescribedBy = errorId;
   } else if (!invalid && !warn && !isFluid && helperText) {
     ariaDescribedBy = helperId;
   }
+  if (enableCounter) {
+    textareaProps.maxLength = maxCount;
+  }
+  const ariaAnnouncement = useAnnouncer.useAnnouncer(textCount, maxCount);
   const input = /*#__PURE__*/React__default["default"].createElement("textarea", _rollupPluginBabelHelpers["extends"]({}, other, textareaProps, {
     placeholder: placeholder,
     className: textareaClasses,
@@ -163,21 +170,26 @@ const TextArea = /*#__PURE__*/React__default["default"].forwardRef((props, forwa
     readOnly: other.readOnly,
     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: cx__default["default"](`${prefix}--form-item`, className)
+    className: formItemClasses
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--text-area__label-wrapper`
   }, label, counter), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: cx__default["default"](`${prefix}--text-area__wrapper`, {
-      [`${prefix}--text-area__wrapper--readonly`]: other.readOnly,
-      [`${prefix}--text-area__wrapper--warn`]: warn
-    }),
+    className: textAreaWrapperClasses,
     "data-invalid": invalid || null
   }, invalid && !isFluid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
     className: `${prefix}--text-area__invalid-icon`
   }), warn && !invalid && !isFluid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningAltFilled, {
     className: `${prefix}--text-area__invalid-icon ${prefix}--text-area__invalid-icon--warning`
-  }), input, /*#__PURE__*/React__default["default"].createElement("span", {
+  }), input, normalizedSlug, /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${prefix}--text-area__counter-alert`,
     role: "alert"
   }, ariaAnnouncement), isFluid && /*#__PURE__*/React__default["default"].createElement("hr", {
@@ -263,6 +275,10 @@ TextArea.propTypes = {
    * Specify the rows attribute for the `<textarea>`
    */
   rows: PropTypes__default["default"].number,
+  /**
+   * Provide a `Slug` component to be rendered inside the `TextArea` component
+   */
+  slug: PropTypes__default["default"].node,
   /**
    * Provide the current value of the `<textarea>`
    */

package/lib/components/TextInput/TextInput.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';
 type ExcludedAttributes = 'defaultValue' | 'id' | 'size' | 'value';
 export interface TextInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
@@ -85,6 +86,10 @@ export interface TextInputProps extends Omit<React.InputHTMLAttributes<HTMLInput
      * Specify the size of the Text Input. Currently supports the following:
      */
     size?: 'sm' | 'md' | 'lg' | 'xl';
+    /**
+     * Provide a `Slug` component to be rendered inside the `TextInput` component
+     */
+    slug?: ReactNodeLike;
     /**
      * Specify the type of the `<input>`
      */