@carbon/react 1.63.1 → 1.64.0-rc.0

package/es/components/TreeView/TreeView.js

@@ -6,17 +6,18 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useRef, useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
 import cx from 'classnames';
-import uniqueId from '../../tools/uniqueId.js';
-import { usePrefix } from '../../internal/usePrefix.js';
+import PropTypes from 'prop-types';
+import React__default, { useRef, useState, useEffect } from 'react';
 import { useControllableState } from '../../internal/useControllableState.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+import uniqueId from '../../tools/uniqueId.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
+import TreeNode from './TreeNode.js';
 import { matches, match } from '../../internal/keyboard/match.js';
 import { ArrowUp, ArrowDown, Home, End } from '../../internal/keyboard/keys.js';
 
-function TreeView(_ref) {
+const TreeView = _ref => {
   let {
     active: prespecifiedActive,
     children,
@@ -36,6 +37,7 @@ function TreeView(_ref) {
   } = useRef(rest.id || uniqueId());
   const prefix = usePrefix();
   const treeClasses = cx(className, `${prefix}--tree`, {
+    // @ts-ignore - will always be false according to prop types
     [`${prefix}--tree--${size}`]: size !== 'default'
   });
   const treeRootRef = useRef(null);
@@ -61,9 +63,7 @@ function TreeView(_ref) {
   }
   function handleTreeSelect(event) {
     let node = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    const {
-      id: nodeId
-    } = node;
+    const nodeId = node.id;
     if (multiselect && (event.metaKey || event.ctrlKey)) {
       if (!selected.includes(nodeId)) {
         setSelected(selected.concat(nodeId));
@@ -107,14 +107,15 @@ function TreeView(_ref) {
     }
   }
   let focusTarget = false;
-  const nodesWithProps = React__default.Children.map(children, node => {
+  const nodesWithProps = React__default.Children.map(children, _node => {
+    const node = _node;
     const sharedNodeProps = {
       active,
       depth: 0,
       onNodeFocusEvent: handleFocusEvent,
       onTreeSelect: handleTreeSelect,
       selected,
-      tabIndex: !node.props.disabled && -1 || null
+      tabIndex: !node.props.disabled && -1 || undefined
     };
     if (!focusTarget && !node.props.disabled) {
       sharedNodeProps.tabIndex = 0;
@@ -126,40 +127,47 @@ function TreeView(_ref) {
   });
   function handleKeyDown(event) {
     event.stopPropagation();
-    if (matches(event, [ArrowUp, ArrowDown, Home, End, {
+    if (matches(event, [ArrowUp, ArrowDown, Home, End,
+    // @ts-ignore - `matches` doesn't like the object syntax without missing properties
+    {
       code: 'KeyA'
     }])) {
       event.preventDefault();
     }
+    if (!treeWalker.current) {
+      return;
+    }
     treeWalker.current.currentNode = event.target;
-    let nextFocusNode;
+    let nextFocusNode = null;
     if (match(event, ArrowUp)) {
       nextFocusNode = treeWalker.current.previousNode();
     }
     if (match(event, ArrowDown)) {
       nextFocusNode = treeWalker.current.nextNode();
     }
+    // @ts-ignore - `matches` doesn't like the object syntax without missing properties
     if (matches(event, [Home, End, {
       code: 'KeyA'
     }])) {
       const nodeIds = [];
       if (matches(event, [Home, End])) {
-        if (multiselect && event.shiftKey && event.ctrlKey && !treeWalker.current.currentNode.getAttribute('aria-disabled')) {
+        if (multiselect && event.shiftKey && event.ctrlKey && treeWalker.current.currentNode instanceof Element && !treeWalker.current.currentNode.getAttribute('aria-disabled')) {
           nodeIds.push(treeWalker.current.currentNode?.id);
         }
         while (match(event, Home) ? treeWalker.current.previousNode() : treeWalker.current.nextNode()) {
           nextFocusNode = treeWalker.current.currentNode;
-          if (multiselect && event.shiftKey && event.ctrlKey && !nextFocusNode.getAttribute('aria-disabled')) {
+          if (multiselect && event.shiftKey && event.ctrlKey && nextFocusNode instanceof Element && !nextFocusNode.getAttribute('aria-disabled')) {
             nodeIds.push(nextFocusNode?.id);
           }
         }
       }
+      // @ts-ignore - `matches` doesn't like the object syntax without missing properties
       if (match(event, {
         code: 'KeyA'
       }) && event.ctrlKey) {
         treeWalker.current.currentNode = treeWalker.current.root;
         while (treeWalker.current.nextNode()) {
-          if (!treeWalker.current.currentNode.getAttribute('aria-disabled')) {
+          if (treeWalker.current.currentNode instanceof Element && !treeWalker.current.currentNode.getAttribute('aria-disabled')) {
             nodeIds.push(treeWalker.current.currentNode?.id);
           }
         }
@@ -168,14 +176,19 @@ function TreeView(_ref) {
     }
     if (nextFocusNode && nextFocusNode !== event.target) {
       resetNodeTabIndices();
-      nextFocusNode.tabIndex = 0;
-      nextFocusNode.focus();
+      if (nextFocusNode instanceof HTMLElement) {
+        nextFocusNode.tabIndex = 0;
+        nextFocusNode.focus();
+      }
     }
     rest?.onKeyDown?.(event);
   }
   useEffect(() => {
     treeWalker.current = treeWalker.current ?? document.createTreeWalker(treeRootRef?.current, NodeFilter.SHOW_ELEMENT, {
       acceptNode: function (node) {
+        if (!(node instanceof Element)) {
+          return NodeFilter.FILTER_SKIP;
+        }
         if (node.classList.contains(`${prefix}--tree-node--disabled`)) {
           return NodeFilter.FILTER_REJECT;
         }
@@ -198,20 +211,20 @@ function TreeView(_ref) {
   }, []);
   useActiveAndSelectedOnMount();
   const labelId = `${treeId}__label`;
-  const TreeLabel = () => !hideLabel && /*#__PURE__*/React__default.createElement("label", {
+  const TreeLabel = () => !hideLabel ? /*#__PURE__*/React__default.createElement("label", {
     id: labelId,
     className: `${prefix}--label`
-  }, label);
+  }, label) : null;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TreeLabel, null), /*#__PURE__*/React__default.createElement("ul", _extends({}, rest, {
-    "aria-label": hideLabel ? label : null,
-    "aria-labelledby": !hideLabel ? labelId : null,
-    "aria-multiselectable": multiselect || null,
+    "aria-label": hideLabel ? label : undefined,
+    "aria-labelledby": !hideLabel ? labelId : undefined,
+    "aria-multiselectable": multiselect || undefined,
     className: treeClasses,
     onKeyDown: handleKeyDown,
     ref: treeRootRef,
     role: "tree"
   }), nodesWithProps));
-}
+};
 TreeView.propTypes = {
   /**
    * Mark the active node in the tree, represented by its ID
@@ -256,5 +269,6 @@ TreeView.propTypes = {
    */
   size: PropTypes.oneOf(['xs', 'sm'])
 };
+TreeView.TreeNode = TreeNode;
 
 export { TreeView as default };

package/es/components/TreeView/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 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 TreeNode, { TreeNodeProps } from './TreeNode';
+import TreeView, { TreeViewProps } from './TreeView';
+export { TreeNode, TreeView };
+export type { TreeViewProps, TreeNodeProps };
+export default TreeView;

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

@@ -47,6 +47,10 @@ interface BaseSwitcherItemProps {
      * Specify where to open the link.
      */
     target?: HTMLAttributeAnchorTarget;
+    /**
+     * The rel property for the link.
+     */
+    rel?: string;
 }
 interface SwitcherItemWithAriaLabel extends BaseSwitcherItemProps {
     'aria-label': string;

package/es/components/UIShell/SwitcherItem.js

@@ -29,6 +29,7 @@ const SwitcherItem = /*#__PURE__*/forwardRef(function SwitcherItem(props, forwar
     onKeyDown = () => {},
     href,
     target,
+    rel,
     ...rest
   } = props;
   const prefix = usePrefix();
@@ -67,6 +68,7 @@ const SwitcherItem = /*#__PURE__*/forwardRef(function SwitcherItem(props, forwar
     },
     href: href,
     target: target,
+    rel: rel,
     ref: forwardRef
   }, rest, {
     className: linkClassName,
@@ -111,7 +113,11 @@ SwitcherItem.propTypes = {
   /**
    * Specify where to open the link.
    */
-  target: PropTypes.string
+  target: PropTypes.string,
+  /**
+   * The rel property for the link.
+   */
+  rel: PropTypes.string
 };
 
 export { SwitcherItem as default };

package/es/index.d.ts

@@ -116,9 +116,11 @@ 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 { AILabel, AILabelContent, AILabelActions } from './components/AILabel';
+export { AILabel as unstable__Slug, AILabelContent as unstable__SlugContent, AILabelActions as unstable__SlugActions, } from './components/AILabel';
 export { ChatButton as unstable__ChatButton, ChatButtonSkeleton as unstable__ChatButtonSkeleton, } from './components/ChatButton';
-export { AiSkeletonText as unstable__AiSkeletonText, AiSkeletonIcon as unstable__AiSkeletonIcon, AiSkeletonPlaceholder as unstable__AiSkeletonPlaceholder, } from './components/AiSkeleton';
+export { AISkeletonText, AISkeletonIcon, AISkeletonPlaceholder, } from './components/AISkeleton';
+export { AISkeletonText as unstable__AiSkeletonText, AISkeletonIcon as unstable__AiSkeletonIcon, AISkeletonPlaceholder as unstable__AiSkeletonPlaceholder, } from './components/AISkeleton';
 export * from './components/Stack';
 export * from './components/Tooltip';
 export { Text as unstable_Text, TextDirection as unstable_TextDirection, } from './components/Text';

package/es/index.js

@@ -126,6 +126,8 @@ export { Toggle } from './components/Toggle/Toggle.js';
 export { default as ToggleSkeleton } from './components/Toggle/Toggle.Skeleton.js';
 export { default as ToggleSmallSkeleton } from './components/ToggleSmall/ToggleSmall.Skeleton.js';
 export { Toggletip, ToggletipActions, ToggletipButton, ToggletipContent, ToggletipLabel } from './components/Toggletip/index.js';
+export { default as TreeNode } from './components/TreeView/TreeNode.js';
+export { default as TreeView } from './components/TreeView/TreeView.js';
 export { default as Content } from './components/UIShell/Content.js';
 export { default as Header } from './components/UIShell/Header.js';
 export { default as HeaderContainer } from './components/UIShell/HeaderContainer.js';
@@ -164,10 +166,10 @@ export { Layout as unstable_Layout } from './components/Layout/index.js';
 export { OverflowMenuV2 as unstable_OverflowMenuV2 } from './components/OverflowMenuV2/index.js';
 export { Popover, PopoverContent } from './components/Popover/index.js';
 export { default as ProgressBar } from './components/ProgressBar/ProgressBar.js';
-export { Slug as unstable__Slug, SlugActions as unstable__SlugActions, SlugContent as unstable__SlugContent } from './components/Slug/index.js';
-export { default as unstable__AiSkeletonPlaceholder } from './components/AiSkeleton/AiSkeletonPlaceholder.js';
-export { default as unstable__AiSkeletonIcon } from './components/AiSkeleton/AiSkeletonIcon.js';
-export { default as unstable__AiSkeletonText } from './components/AiSkeleton/AiSkeletonText.js';
+export { AILabel, AILabelActions, AILabelContent, AILabel as unstable__Slug, AILabelActions as unstable__SlugActions, AILabelContent as unstable__SlugContent } from './components/AILabel/index.js';
+export { default as AISkeletonPlaceholder, default as unstable__AiSkeletonPlaceholder } from './components/AISkeleton/AISkeletonPlaceholder.js';
+export { default as AISkeletonIcon, default as unstable__AiSkeletonIcon } from './components/AISkeleton/AISkeletonIcon.js';
+export { default as AISkeletonText, default as unstable__AiSkeletonText } from './components/AISkeleton/AISkeletonText.js';
 export { DefinitionTooltip } from './components/Tooltip/DefinitionTooltip.js';
 export { Tooltip } from './components/Tooltip/Tooltip.js';
 import './components/Text/index.js';
@@ -188,7 +190,6 @@ export { default as useContextMenu } from './components/ContextMenu/useContextMe
 export { default as SliderSkeleton } from './components/Slider/Slider.Skeleton.js';
 export { default as TextInputSkeleton } from './components/TextInput/TextInput.Skeleton.js';
 export { default as TextInput } from './components/TextInput/TextInput.js';
-export { default as TreeView } from './components/TreeView/TreeView.js';
 export { default as unstable__FluidComboBox } from './components/FluidComboBox/FluidComboBox.js';
 export { default as unstable__FluidComboBoxSkeleton } from './components/FluidComboBox/FluidComboBox.Skeleton.js';
 export { default as unstable__FluidDatePicker } from './components/FluidDatePicker/FluidDatePicker.js';
@@ -234,4 +235,3 @@ export { default as TableToolbarSearch } from './components/DataTable/TableToolb
 export { default as TableToolbarMenu } from './components/DataTable/TableToolbarMenu.js';
 export { default as FilterableMultiSelect } from './components/MultiSelect/FilterableMultiSelect.js';
 export { default as MultiSelect } from './components/MultiSelect/MultiSelect.js';
-export { default as TreeNode } from './components/TreeView/TreeNode.js';

package/es/node_modules/@floating-ui/core/dist/floating-ui.core.mjs.js

@@ -0,0 +1,143 @@
+/**
+ * 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 { evaluate, getPaddingObject, rectToClientRect, sides } from '../../utils/dist/floating-ui.utils.mjs.js';
+export { rectToClientRect } from '../../utils/dist/floating-ui.utils.mjs.js';
+
+/**
+ * Resolves with an object of overflow side offsets that determine how much the
+ * element is overflowing a given clipping boundary on each side.
+ * - positive = overflowing the boundary by that number of pixels
+ * - negative = how many pixels left before it will overflow
+ * - 0 = lies flush with the boundary
+ * @see https://floating-ui.com/docs/detectOverflow
+ */
+async function detectOverflow(state, options) {
+  var _await$platform$isEle;
+  if (options === void 0) {
+    options = {};
+  }
+  const {
+    x,
+    y,
+    platform,
+    rects,
+    elements,
+    strategy
+  } = state;
+  const {
+    boundary = 'clippingAncestors',
+    rootBoundary = 'viewport',
+    elementContext = 'floating',
+    altBoundary = false,
+    padding = 0
+  } = evaluate(options, state);
+  const paddingObject = getPaddingObject(padding);
+  const altContext = elementContext === 'floating' ? 'reference' : 'floating';
+  const element = elements[altBoundary ? altContext : elementContext];
+  const clippingClientRect = rectToClientRect(await platform.getClippingRect({
+    element: ((_await$platform$isEle = await (platform.isElement == null ? void 0 : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || (await (platform.getDocumentElement == null ? void 0 : platform.getDocumentElement(elements.floating))),
+    boundary,
+    rootBoundary,
+    strategy
+  }));
+  const rect = elementContext === 'floating' ? {
+    ...rects.floating,
+    x,
+    y
+  } : rects.reference;
+  const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
+  const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
+    x: 1,
+    y: 1
+  } : {
+    x: 1,
+    y: 1
+  };
+  const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
+    rect,
+    offsetParent,
+    strategy
+  }) : rect);
+  return {
+    top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
+    bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
+    left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
+    right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
+  };
+}
+
+function getSideOffsets(overflow, rect) {
+  return {
+    top: overflow.top - rect.height,
+    right: overflow.right - rect.width,
+    bottom: overflow.bottom - rect.height,
+    left: overflow.left - rect.width
+  };
+}
+function isAnySideFullyClipped(overflow) {
+  return sides.some(side => overflow[side] >= 0);
+}
+/**
+ * Provides data to hide the floating element in applicable situations, such as
+ * when it is not in the same clipping context as the reference element.
+ * @see https://floating-ui.com/docs/hide
+ */
+const hide = function (options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    name: 'hide',
+    options,
+    async fn(state) {
+      const {
+        rects
+      } = state;
+      const {
+        strategy = 'referenceHidden',
+        ...detectOverflowOptions
+      } = evaluate(options, state);
+      switch (strategy) {
+        case 'referenceHidden':
+          {
+            const overflow = await detectOverflow(state, {
+              ...detectOverflowOptions,
+              elementContext: 'reference'
+            });
+            const offsets = getSideOffsets(overflow, rects.reference);
+            return {
+              data: {
+                referenceHiddenOffsets: offsets,
+                referenceHidden: isAnySideFullyClipped(offsets)
+              }
+            };
+          }
+        case 'escaped':
+          {
+            const overflow = await detectOverflow(state, {
+              ...detectOverflowOptions,
+              altBoundary: true
+            });
+            const offsets = getSideOffsets(overflow, rects.floating);
+            return {
+              data: {
+                escapedOffsets: offsets,
+                escaped: isAnySideFullyClipped(offsets)
+              }
+            };
+          }
+        default:
+          {
+            return {};
+          }
+      }
+    }
+  };
+};
+
+export { detectOverflow, hide };

package/es/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs.js

@@ -0,0 +1,39 @@
+/**
+ * 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.
+ */
+
+const sides = ['top', 'right', 'bottom', 'left'];
+function evaluate(value, param) {
+  return typeof value === 'function' ? value(param) : value;
+}
+function expandPaddingObject(padding) {
+  return {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    ...padding
+  };
+}
+function getPaddingObject(padding) {
+  return typeof padding !== 'number' ? expandPaddingObject(padding) : {
+    top: padding,
+    right: padding,
+    bottom: padding,
+    left: padding
+  };
+}
+function rectToClientRect(rect) {
+  return {
+    ...rect,
+    top: rect.y,
+    left: rect.x,
+    right: rect.x + rect.width,
+    bottom: rect.y + rect.height
+  };
+}
+
+export { evaluate, expandPaddingObject, getPaddingObject, rectToClientRect, sides };

package/lib/components/{Slug → AILabel}/index.js

@@ -18,6 +18,7 @@ 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');
+var deprecate = require('../../prop-types/deprecate.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -26,24 +27,23 @@ 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) {
+const AILabelContent = /*#__PURE__*/React__default["default"].forwardRef(function AILabelContent(_ref, ref) {
   let {
     children,
     className
   } = _ref;
   const prefix = usePrefix.usePrefix();
-  const hasSlugActions = React__default["default"].Children.toArray(children).some(child => child.type?.displayName === 'SlugActions');
-  const slugContentClasses = cx__default["default"](className, {
+  const hasAILabelActions = React__default["default"].Children.toArray(children).some(child => child.type?.displayName === 'AILabelActions');
+  const aiLabelContentClasses = cx__default["default"](className, {
     [`${prefix}--slug-content`]: true,
-    [`${prefix}--slug-content--with-actions`]: hasSlugActions
+    [`${prefix}--slug-content--with-actions`]: hasAILabelActions
   });
   return /*#__PURE__*/React__default["default"].createElement(index.ToggletipContent, {
-    className: slugContentClasses,
-    ref: ref
+    className: aiLabelContentClasses
   }, children);
 });
-SlugContent.displayName = 'SlugContent';
-SlugContent.propTypes = {
+AILabelContent.displayName = 'AILabelContent';
+AILabelContent.propTypes = {
   /**
    * Specify the content you want rendered inside the slug ToggleTip
    */
@@ -53,22 +53,22 @@ SlugContent.propTypes = {
    */
   className: PropTypes__default["default"].string
 };
-const SlugActions = /*#__PURE__*/React__default["default"].forwardRef(function SlugActions(_ref2, ref) {
+const AILabelActions = /*#__PURE__*/React__default["default"].forwardRef(function AILabelActions(_ref2, ref) {
   let {
     children,
     className
   } = _ref2;
   const prefix = usePrefix.usePrefix();
-  const slugActionBarClasses = cx__default["default"](className, {
+  const aiLabelActionsClasses = cx__default["default"](className, {
     [`${prefix}--slug-actions`]: true
   });
   return /*#__PURE__*/React__default["default"].createElement(index.ToggletipActions, {
-    className: slugActionBarClasses,
+    className: aiLabelActionsClasses,
     ref: ref
   }, children);
 });
-SlugActions.displayName = 'SlugActions';
-SlugActions.propTypes = {
+AILabelActions.displayName = 'AILabelActions';
+AILabelActions.propTypes = {
   /**
    * Specify the content you want rendered inside the slug callout toolbar
    */
@@ -78,10 +78,11 @@ SlugActions.propTypes = {
    */
   className: PropTypes__default["default"].string
 };
-const Slug = /*#__PURE__*/React__default["default"].forwardRef(function Slug(_ref3, ref) {
+const AILabel = /*#__PURE__*/React__default["default"].forwardRef(function AILabel(_ref3, ref) {
   let {
     aiText = 'AI',
     aiTextLabel,
+    textLabel,
     align,
     autoAlign = true,
     children,
@@ -91,29 +92,30 @@ const Slug = /*#__PURE__*/React__default["default"].forwardRef(function Slug(_re
     revertActive,
     revertLabel = 'Revert to AI input',
     slugLabel = 'Show information',
+    ['aria-label']: ariaLabel = 'Show information',
     size = 'xs',
     ...rest
   } = _ref3;
   const prefix = usePrefix.usePrefix();
-  const id = useId.useId('slug');
-  const slugClasses = cx__default["default"](className, {
+  const id = useId.useId('AILabel');
+  const aiLabelClasses = cx__default["default"](className, {
     [`${prefix}--slug`]: true,
     [`${prefix}--slug--revert`]: revertActive
   });
-  const slugButtonClasses = cx__default["default"]({
+  const aiLabelButtonClasses = 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
+    [`${prefix}--slug__button--inline-with-content`]: kind === 'inline' && (aiTextLabel || textLabel)
   });
   const handleOnRevertClick = evt => {
     if (onRevertClick) {
       onRevertClick(evt);
     }
   };
-  const ariaLabel = !aiTextLabel ? `${aiText} - ${slugLabel}` : `${aiText} - ${aiTextLabel}`;
+  const ariaLabelText = !aiTextLabel && !textLabel ? `${aiText} - ${slugLabel || ariaLabel}` : `${aiText} - ${aiTextLabel || textLabel}`;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: slugClasses,
+    className: aiLabelClasses,
     ref: ref,
     id: id
   }, revertActive ? /*#__PURE__*/React__default["default"].createElement(index$1.IconButton, _rollupPluginBabelHelpers["extends"]({
@@ -125,24 +127,29 @@ const Slug = /*#__PURE__*/React__default["default"].forwardRef(function Slug(_re
     align: align,
     autoAlign: autoAlign
   }, rest), /*#__PURE__*/React__default["default"].createElement(index.ToggletipButton, {
-    className: slugButtonClasses,
-    label: ariaLabel
+    className: aiLabelButtonClasses,
+    label: ariaLabelText
   }, /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${prefix}--slug__text`
-  }, aiText), aiTextLabel && /*#__PURE__*/React__default["default"].createElement("span", {
+  }, aiText), kind === 'inline' && (aiTextLabel || textLabel) && /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${prefix}--slug__additional-text`
-  }, aiTextLabel)), children));
+  }, aiTextLabel || textLabel)), children));
 });
-Slug.displayName = 'Slug';
-Slug.propTypes = {
+AILabel.displayName = 'AILabel';
+AILabel.propTypes = {
+  /**
+   * Specify the content you want rendered inside the `AILabel` ToggleTip
+   */
+  AILabelContent: PropTypes__default["default"].node,
   /**
    * Specify the correct translation of the AI text
    */
   aiText: PropTypes__default["default"].string,
   /**
+   * @deprecated
    * Specify additional text to be rendered next to the AI label in the inline variant
    */
-  aiTextLabel: PropTypes__default["default"].string,
+  aiTextLabel: deprecate["default"](PropTypes__default["default"].string, '`aiTextLabel` on `AILabel` has been deprecated - Please use the `textLabel` prop instead'),
   /**
    * Specify how the popover should align with the button
    */
@@ -163,20 +170,24 @@ Slug.propTypes = {
   'right-end', 'right-top',
   // deprecated use right-start instead
   'right-start']),
+  /**
+   * Specify the text that will be provided to the aria-label of the `AILabel` button
+   */
+  'aria-label': PropTypes__default["default"].string,
   /**
    * Will auto-align the popover. 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
+   * Specify the content you want rendered inside the `AILabel` ToggleTip
    */
   children: PropTypes__default["default"].node,
   /**
-   * Specify an optional className to be added to the AI slug
+   * Specify an optional className to be added to the `AILabel`
    */
   className: PropTypes__default["default"].string,
   /**
-   * Specify the type of Slug, from the following list of types:
+   * Specify the type of `AILabel`, from the following list of types:
    */
   kind: PropTypes__default["default"].oneOf(['default', 'inline']),
   /**
@@ -196,15 +207,16 @@ Slug.propTypes = {
    */
   size: PropTypes__default["default"].oneOf(['mini', '2xs', 'xs', 'sm', 'md', 'lg', 'xl']),
   /**
-   * Specify the content you want rendered inside the slug ToggleTip
+   * @deprecated
+   * Specify the text that will be provided to the aria-label of the `AILabel` button
    */
-  slugContent: PropTypes__default["default"].node,
+  slugLabel: deprecate["default"](PropTypes__default["default"].string, '`slugLabel` on `AILabel` has been deprecated - Please use the `ariaLabel` prop instead'),
   /**
-   * Specify the text that will be provided to the aria-label of the `Slug` button
+   * Specify additional text to be rendered next to the AI label in the inline variant
    */
-  slugLabel: PropTypes__default["default"].string
+  textLabel: PropTypes__default["default"].string
 };
 
-exports.Slug = Slug;
-exports.SlugActions = SlugActions;
-exports.SlugContent = SlugContent;
+exports.AILabel = AILabel;
+exports.AILabelActions = AILabelActions;
+exports.AILabelContent = AILabelContent;