@carbon/react 1.42.1 → 1.43.0-rc.0

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

package/es/components/Slug/index.js

@@ -0,0 +1,187 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import { usePrefix } from '../../internal/usePrefix.js';
+import { ToggletipContent, ToggletipActions, Toggletip, ToggletipButton } from '../Toggletip/index.js';
+import { IconButton } from '../IconButton/index.js';
+import { Undo } from '@carbon/icons-react';
+import { useId } from '../../internal/useId.js';
+
+var _Undo;
+const SlugContent = /*#__PURE__*/React__default.forwardRef(function SlugContent(_ref, ref) {
+  let {
+    children,
+    className
+  } = _ref;
+  const prefix = usePrefix();
+  const slugContentClasses = cx(className, {
+    [`${prefix}--slug-content`]: true
+  });
+  return /*#__PURE__*/React__default.createElement(ToggletipContent, {
+    className: slugContentClasses,
+    ref: ref
+  }, children);
+});
+SlugContent.propTypes = {
+  /**
+   * Specify the content you want rendered inside the slug ToggleTip
+   */
+  children: PropTypes.node,
+  /**
+   * Specify an optional className to be added to the AI slug callout
+   */
+  className: PropTypes.string
+};
+const SlugActions = /*#__PURE__*/React__default.forwardRef(function SlugActions(_ref2, ref) {
+  let {
+    children,
+    className
+  } = _ref2;
+  const prefix = usePrefix();
+  const slugActionBarClasses = cx(className, {
+    [`${prefix}--slug-actions`]: true
+  });
+  return /*#__PURE__*/React__default.createElement(ToggletipActions, {
+    className: slugActionBarClasses,
+    ref: ref
+  }, children);
+});
+SlugActions.propTypes = {
+  /**
+   * Specify the content you want rendered inside the slug callout toolbar
+   */
+  children: PropTypes.node,
+  /**
+   * Specify an optional className to be added to the AI slug toolbar
+   */
+  className: PropTypes.string
+};
+const Slug = /*#__PURE__*/React__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();
+  const id = useId('slug');
+  const slugClasses = cx(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({
+    [`${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.createElement("div", {
+    className: slugClasses,
+    ref: ref,
+    id: id
+  }, revertActive ? /*#__PURE__*/React__default.createElement(IconButton, _extends({
+    onClick: handleOnRevertClick,
+    kind: "ghost",
+    size: "sm",
+    label: revertLabel
+  }, rest), _Undo || (_Undo = /*#__PURE__*/React__default.createElement(Undo, null))) : /*#__PURE__*/React__default.createElement(Toggletip, _extends({
+    align: align,
+    autoAlign: autoAlign
+  }, rest), /*#__PURE__*/React__default.createElement(ToggletipButton, {
+    className: slugButtonClasses,
+    label: ariaLabel
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: `${prefix}--slug__text`
+  }, aiText), aiTextLabel && /*#__PURE__*/React__default.createElement("span", {
+    className: `${prefix}--slug__additional-text`
+  }, aiTextLabel)), children));
+});
+Slug.propTypes = {
+  /**
+   * Specify the correct translation of the AI text
+   */
+  aiText: PropTypes.string,
+  /**
+   * Specify additional text to be rendered next to the AI label in the inline variant
+   */
+  aiTextLabel: PropTypes.string,
+  /**
+   * Specify how the popover should align with the button
+   */
+  align: PropTypes.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.bool,
+  /**
+   * Specify the content you want rendered inside the slug ToggleTip
+   */
+  children: PropTypes.node,
+  /**
+   * Specify an optional className to be added to the AI slug
+   */
+  className: PropTypes.string,
+  /**
+   * Specify the type of dot that should be rendered in front of the inline variant
+   */
+  dotType: PropTypes.oneOf(['default', 'hollow']),
+  /**
+   * Specify the type of Slug, from the following list of types:
+   */
+  kind: PropTypes.oneOf(['default', 'hollow', 'inline']),
+  /**
+   * Callback function that fires when the revert button is clicked
+   */
+  onRevertClick: PropTypes.func,
+  /**
+   * Specify whether the revert button should be visible
+   */
+  revertActive: PropTypes.bool,
+  /**
+   * Specify the text that should be shown when the revert button is hovered
+   */
+  revertLabel: PropTypes.string,
+  /**
+   * Specify the size of the button, from the following list of sizes:
+   */
+  size: PropTypes.oneOf(['mini', '2xs', 'xs', 'sm', 'md', 'lg', 'xl']),
+  /**
+   * Specify the content you want rendered inside the slug ToggleTip
+   */
+  slugContent: PropTypes.node,
+  /**
+   * Specify the text that will be provided to the aria-label of the `Slug` button
+   */
+  slugLabel: PropTypes.string
+};
+
+export { Slug, SlugActions, SlugContent };

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

@@ -42,6 +42,7 @@ const TextArea = /*#__PURE__*/React__default.forwardRef((props, forwardRef) => {
     warn = false,
     warnText = '',
     rows = 4,
+    slug,
     ...other
   } = props;
   const prefix = usePrefix();
@@ -56,9 +57,19 @@ const TextArea = /*#__PURE__*/React__default.forwardRef((props, forwardRef) => {
   const {
     current: textAreaInstanceId
   } = useRef(getInstanceId());
+  const textareaRef = useRef(null);
+  const ref = useMergedRefs([forwardRef, textareaRef]);
   useEffect(() => {
     setTextCount(defaultValue?.toString()?.length || value?.toString()?.length || 0);
   }, [value, defaultValue]);
+  useIsomorphicEffect(() => {
+    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 => {
@@ -77,29 +88,36 @@ const TextArea = /*#__PURE__*/React__default.forwardRef((props, forwardRef) => {
       }
     }
   };
-  if (enableCounter) {
-    textareaProps.maxLength = maxCount;
-  }
-  const ariaAnnouncement = useAnnouncer(textCount, maxCount);
+  const formItemClasses = cx(`${prefix}--form-item`, className);
+  const textAreaWrapperClasses = cx(`${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(`${prefix}--label`, {
     [`${prefix}--visually-hidden`]: hideLabel && !isFluid,
     [`${prefix}--label--disabled`]: disabled
   });
+  const textareaClasses = cx(`${prefix}--text-area`, {
+    [`${prefix}--text-area--light`]: light,
+    [`${prefix}--text-area--invalid`]: invalid,
+    [`${prefix}--text-area--warn`]: warn
+  });
+  const counterClasses = cx(`${prefix}--label`, {
+    [`${prefix}--label--disabled`]: disabled
+  });
+  const helperTextClasses = cx(`${prefix}--form__helper-text`, {
+    [`${prefix}--form__helper-text--disabled`]: disabled
+  });
   const label = labelText ? /*#__PURE__*/React__default.createElement(Text, {
     as: "label",
     htmlFor: id,
     className: labelClasses
   }, labelText) : null;
-  const counterClasses = cx(`${prefix}--label`, {
-    [`${prefix}--label--disabled`]: disabled
-  });
   const counter = enableCounter && maxCount ? /*#__PURE__*/React__default.createElement(Text, {
     as: "div",
     className: counterClasses
   }, `${textCount}/${maxCount}`) : null;
-  const helperTextClasses = cx(`${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.createElement(Text, {
     as: "div",
@@ -122,27 +140,16 @@ const TextArea = /*#__PURE__*/React__default.forwardRef((props, forwardRef) => {
   }, warnText, isFluid && /*#__PURE__*/React__default.createElement(WarningAltFilled, {
     className: `${prefix}--text-area__invalid-icon ${prefix}--text-area__invalid-icon--warning`
   })) : null;
-  const textareaClasses = cx(`${prefix}--text-area`, {
-    [`${prefix}--text-area--light`]: light,
-    [`${prefix}--text-area--invalid`]: invalid,
-    [`${prefix}--text-area--warn`]: warn
-  });
-  const textareaRef = useRef(null);
-  const ref = useMergedRefs([forwardRef, textareaRef]);
-  useIsomorphicEffect(() => {
-    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(textCount, maxCount);
   const input = /*#__PURE__*/React__default.createElement("textarea", _extends({}, other, textareaProps, {
     placeholder: placeholder,
     className: textareaClasses,
@@ -153,21 +160,26 @@ const TextArea = /*#__PURE__*/React__default.forwardRef((props, forwardRef) => {
     readOnly: other.readOnly,
     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: cx(`${prefix}--form-item`, className)
+    className: formItemClasses
   }, /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--text-area__label-wrapper`
   }, label, counter), /*#__PURE__*/React__default.createElement("div", {
-    className: cx(`${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.createElement(WarningFilled, {
     className: `${prefix}--text-area__invalid-icon`
   }), warn && !invalid && !isFluid && /*#__PURE__*/React__default.createElement(WarningAltFilled, {
     className: `${prefix}--text-area__invalid-icon ${prefix}--text-area__invalid-icon--warning`
-  }), input, /*#__PURE__*/React__default.createElement("span", {
+  }), input, normalizedSlug, /*#__PURE__*/React__default.createElement("span", {
     className: `${prefix}--text-area__counter-alert`,
     role: "alert"
   }, ariaAnnouncement), isFluid && /*#__PURE__*/React__default.createElement("hr", {
@@ -253,6 +265,10 @@ TextArea.propTypes = {
    * Specify the rows attribute for the `<textarea>`
    */
   rows: PropTypes.number,
+  /**
+   * Provide a `Slug` component to be rendered inside the `TextArea` component
+   */
+  slug: PropTypes.node,
   /**
    * Provide the current value of the `<textarea>`
    */

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

package/es/components/TextInput/TextInput.js

@@ -42,6 +42,7 @@ const TextInput = /*#__PURE__*/React__default.forwardRef(function TextInput(_ref
     warnText,
     enableCounter = false,
     maxCount,
+    slug,
     ...rest
   } = _ref;
   const prefix = usePrefix();
@@ -113,7 +114,8 @@ const TextInput = /*#__PURE__*/React__default.forwardRef(function TextInput(_ref
     [`${prefix}--text-input__field-outer-wrapper--inline`]: inline
   });
   const fieldWrapperClasses = cx(`${prefix}--text-input__field-wrapper`, {
-    [`${prefix}--text-input__field-wrapper--warning`]: normalizedProps.warn
+    [`${prefix}--text-input__field-wrapper--warning`]: normalizedProps.warn,
+    [`${prefix}--text-input__field-wrapper--slug`]: slug
   });
   const iconClasses = cx({
     [`${prefix}--text-input__invalid-icon`]: normalizedProps.invalid || normalizedProps.warn,
@@ -152,6 +154,14 @@ const TextInput = /*#__PURE__*/React__default.forwardRef(function TextInput(_ref
   } = useContext(FormContext);
   const ariaAnnouncement = useAnnouncer(textCount, maxCount);
   const Icon = normalizedProps.icon;
+
+  // Slug is always size `mini`
+  let normalizedSlug;
+  if (slug) {
+    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+      size: 'mini'
+    });
+  }
   return /*#__PURE__*/React__default.createElement("div", {
     className: inputWrapperClasses
   }, !inline ? labelWrapper : /*#__PURE__*/React__default.createElement("div", {
@@ -163,7 +173,7 @@ const TextInput = /*#__PURE__*/React__default.forwardRef(function TextInput(_ref
     "data-invalid": normalizedProps.invalid || null
   }, Icon && /*#__PURE__*/React__default.createElement(Icon, {
     className: iconClasses
-  }), input, /*#__PURE__*/React__default.createElement("span", {
+  }), input, normalizedSlug, /*#__PURE__*/React__default.createElement("span", {
     className: `${prefix}--text-input__counter-alert`,
     role: "alert"
   }, ariaAnnouncement), isFluid && /*#__PURE__*/React__default.createElement("hr", {
@@ -250,6 +260,10 @@ TextInput.propTypes = {
    * Specify the size of the Text Input. Currently supports the following:
    */
   size: PropTypes.oneOf(['sm', 'md', 'lg']),
+  /**
+   * Provide a `Slug` component to be rendered inside the `TextInput` component
+   */
+  slug: PropTypes.node,
   /**
    * Specify the type of the `<input>`
    */

package/es/components/UIShell/SideNavHeader.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+interface SideNavHeaderProps {
+    /**
+     * The child nodes to be rendered
+     */
+    children?: React.ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node
+     */
+    className?: string;
+    /**
+     * Property to indicate if the side nav container is open (or not). Use to
+     * keep local state and styling in step with the SideNav expansion state.
+     */
+    isSideNavExpanded?: boolean;
+    /**
+     * Provide an icon to render in the header of the side navigation. Should be
+     * a React class.
+     */
+    renderIcon: React.ComponentType;
+}
+declare const SideNavHeader: React.FC<SideNavHeaderProps>;
+export default SideNavHeader;

package/es/components/UIShell/SideNavHeader.js

@@ -13,8 +13,8 @@ import { usePrefix } from '../../internal/usePrefix.js';
 
 const SideNavHeader = _ref => {
   let {
-    className: customClassName,
     children,
+    className: customClassName,
     renderIcon: IconElement
   } = _ref;
   const prefix = usePrefix();
@@ -42,8 +42,8 @@ SideNavHeader.propTypes = {
    * Provide an icon to render in the header of the side navigation. Should be
    * a React class.
    */
+  // @ts-expect-error - PropTypes are unable to cover this case.
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired
 };
-var SideNavHeader$1 = SideNavHeader;
 
-export { SideNavHeader$1 as default };
+export { SideNavHeader as default };

package/es/index.d.ts

@@ -114,6 +114,7 @@ export { OverflowMenuV2 as unstable_OverflowMenuV2 } from './components/Overflow
 export { PageSelector as unstable_PageSelector, Pagination as unstable_Pagination, } from './components/Pagination/experimental';
 export * from './components/Popover';
 export * from './components/ProgressBar';
+export { Slug as unstable__Slug, SlugContent as unstable__SlugContent, SlugActions as unstable__SlugActions, } from './components/Slug';
 export * from './components/Stack';
 export * from './components/Tooltip';
 export { Text as unstable_Text, TextDirection as unstable_TextDirection, } from './components/Text';