@carbon/react 1.68.0 → 1.69.0

package/es/components/MultiSelect/MultiSelect.js

@@ -27,6 +27,7 @@ import '../Checkbox/Checkbox.Skeleton.js';
 import { noopFn } from '../../internal/noopFn.js';
 import { useFloating, flip, size, autoUpdate } from '@floating-ui/react';
 import { hide } from '../../node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs.js';
+import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { match } from '../../internal/keyboard/match.js';
 import { ListBoxSize } from '../ListBox/ListBoxPropTypes.js';
 import { Delete, Escape, Space, ArrowDown, Enter } from '../../internal/keyboard/keys.js';
@@ -125,11 +126,12 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   const [prevOpenProp, setPrevOpenProp] = useState(open);
   const [topItems, setTopItems] = useState([]);
   const [itemsCleared, setItemsCleared] = useState(false);
+  const enableFloatingStyles = useFeatureFlag('enable-v12-dynamic-floating-styles') || autoAlign;
   const {
     refs,
     floatingStyles,
     middlewareData
-  } = useFloating(autoAlign ? {
+  } = useFloating(enableFloatingStyles ? {
     placement: direction,
     // The floating element is positioned relative to its nearest
     // containing block (usually the viewport). It will in many cases also
@@ -137,7 +139,7 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     // https://floating-ui.com/docs/misc#clipping
     strategy: 'fixed',
     // Middleware order matters, arrow should be last
-    middleware: [flip({
+    middleware: [autoAlign && flip({
       crossAxis: false
     }), size({
       apply(_ref2) {
@@ -149,11 +151,11 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
           width: `${rects.reference.width}px`
         });
       }
-    }), hide()],
+    }), autoAlign && hide()],
     whileElementsMounted: autoUpdate
   } : {});
   useLayoutEffect(() => {
-    if (autoAlign) {
+    if (enableFloatingStyles) {
       const updatedFloatingStyles = {
         ...floatingStyles,
         visibility: middlewareData.hide?.referenceHidden ? 'hidden' : 'visible'
@@ -164,7 +166,7 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
         }
       });
     }
-  }, [autoAlign, floatingStyles, refs.floating, middlewareData, open]);
+  }, [enableFloatingStyles, floatingStyles, refs.floating, middlewareData, open]);
   const {
     selectedItems: controlledSelectedItems,
     onItemChange,
@@ -279,7 +281,7 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     [`${prefix}--multi-select--selected`]: selectedItems && selectedItems.length > 0,
     [`${prefix}--list-box--up`]: direction === 'top',
     [`${prefix}--multi-select--readonly`]: readOnly,
-    [`${prefix}--autoalign`]: autoAlign,
+    [`${prefix}--autoalign`]: enableFloatingStyles,
     [`${prefix}--multi-select--selectall`]: selectAll
   });
 
@@ -410,8 +412,8 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
 
   // Memoize the value of getMenuProps to avoid an infinite loop
   const menuProps = useMemo(() => getMenuProps({
-    ref: autoAlign ? refs.setFloating : null
-  }), [autoAlign, getMenuProps, refs.setFloating]);
+    ref: enableFloatingStyles ? refs.setFloating : null
+  }), [enableFloatingStyles, getMenuProps, refs.setFloating]);
   return /*#__PURE__*/React__default.createElement("div", {
     className: wrapperClasses
   }, /*#__PURE__*/React__default.createElement("label", _extends({
@@ -438,7 +440,7 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     className: `${prefix}--list-box__invalid-icon ${prefix}--list-box__invalid-icon--warning`
   }), /*#__PURE__*/React__default.createElement("div", {
     className: multiSelectFieldWrapperClasses,
-    ref: autoAlign ? refs.setReference : null
+    ref: enableFloatingStyles ? refs.setReference : null
   }, selectedItems.length > 0 && /*#__PURE__*/React__default.createElement(ListBox.Selection, {
     readOnly: readOnly,
     clearSelection: !disabled && !readOnly ? clearSelection : noopFn,

package/es/components/OverflowMenu/next/index.d.ts

@@ -38,6 +38,10 @@ interface OverflowMenuProps {
      * Specify how the trigger tooltip should be aligned.
      */
     tooltipAlignment?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right';
+    /**
+     * Specify a DOM node where the Menu should be rendered in. Defaults to document.body.
+     */
+    menuTarget?: Element;
 }
 declare const OverflowMenu: React.ForwardRefExoticComponent<OverflowMenuProps & React.RefAttributes<HTMLDivElement>>;
 export { OverflowMenu };

package/es/components/OverflowMenu/next/index.js

@@ -11,6 +11,7 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { OverflowMenuVertical } from '@carbon/icons-react';
 import { useFloating, flip, autoUpdate } from '@floating-ui/react';
+import { useFeatureFlag } from '../../FeatureFlags/index.js';
 import { IconButton } from '../../IconButton/index.js';
 import { Menu } from '../../Menu/Menu.js';
 import '../../Menu/MenuItem.js';
@@ -30,14 +31,16 @@ const OverflowMenu = /*#__PURE__*/React__default.forwardRef(function OverflowMen
     size = defaultSize,
     menuAlignment = 'bottom-start',
     tooltipAlignment,
+    menuTarget,
     ...rest
   } = _ref;
+  const enableFloatingStyles = useFeatureFlag('enable-v12-dynamic-floating-styles') || autoAlign;
   const {
     refs,
     floatingStyles,
     placement,
     middlewareData
-  } = useFloating(autoAlign ? {
+  } = useFloating(enableFloatingStyles ? {
     // Computing the position starts with initial positioning
     // via `placement`.
     placement: menuAlignment,
@@ -49,14 +52,16 @@ const OverflowMenu = /*#__PURE__*/React__default.forwardRef(function OverflowMen
     // Middleware are executed as an in-between “middle” step of the
     // initial `placement` computation and eventual return of data for
     // rendering. Each middleware is executed in order.
-    middleware: [flip({
+    middleware: [autoAlign && flip({
       // An explicit array of placements to try if the initial
       // `placement` doesn’t fit on the axes in which overflow
       // is checked.
       fallbackPlacements: menuAlignment.includes('bottom') ? ['bottom-start', 'bottom-end', 'top-start', 'top-end'] : ['top-start', 'top-end', 'bottom-start', 'bottom-end']
     })],
     whileElementsMounted: autoUpdate
-  } : {} // When autoAlign is turned off, floating-ui will not be used
+  } : {}
+  // When autoAlign is turned off & the `enable-v12-dynamic-floating-styles` feature flag is not
+  // enabled, floating-ui will not be used
   );
   const id = useId('overflowmenu');
   const prefix = usePrefix();
@@ -70,21 +75,21 @@ const OverflowMenu = /*#__PURE__*/React__default.forwardRef(function OverflowMen
     handleClose
   } = useAttachedMenu(triggerRef);
   useEffect(() => {
-    if (autoAlign) {
+    if (enableFloatingStyles) {
       Object.keys(floatingStyles).forEach(style => {
         if (refs.floating.current) {
           refs.floating.current.style[style] = floatingStyles[style];
         }
       });
     }
-  }, [floatingStyles, autoAlign, refs.floating, open, placement, middlewareData]);
+  }, [floatingStyles, enableFloatingStyles, refs.floating, open, placement, middlewareData]);
   function handleTriggerClick() {
     if (triggerRef.current) {
       hookOnClick();
     }
   }
   const containerClasses = cx(className, `${prefix}--overflow-menu__container`, {
-    [`${prefix}--autoalign`]: autoAlign
+    [`${prefix}--autoalign`]: enableFloatingStyles
   });
   const menuClasses = cx(`${prefix}--overflow-menu__${menuAlignment}`);
   const triggerClasses = cx(`${prefix}--overflow-menu`, {
@@ -115,12 +120,13 @@ const OverflowMenu = /*#__PURE__*/React__default.forwardRef(function OverflowMen
     className: menuClasses,
     id: id,
     size: size,
-    legacyAutoalign: !autoAlign,
+    legacyAutoalign: !enableFloatingStyles,
     open: open,
     onClose: handleClose,
     x: x,
     y: y,
-    label: label
+    label: label,
+    target: menuTarget
   }, children));
 });
 OverflowMenu.propTypes = {
@@ -156,7 +162,11 @@ OverflowMenu.propTypes = {
   /**
    * Specify how the trigger tooltip should be aligned.
    */
-  tooltipAlignment: PropTypes.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right'])
+  tooltipAlignment: PropTypes.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
+  /**
+   * Specify a DOM node where the Menu should be rendered in. Defaults to document.body.
+   */
+  menuTarget: PropTypes.instanceOf(typeof Element !== 'undefined' ? Element : Object)
 };
 
 export { OverflowMenu };

package/es/components/PaginationNav/PaginationNav.js

@@ -213,7 +213,7 @@ const PaginationNav = /*#__PURE__*/React__default.forwardRef(function Pagination
   }
   function pageWouldBeHidden(page) {
     const startOffset = itemsDisplayedOnPage <= 4 && page > 1 ? 0 : 1;
-    const wouldBeHiddenInFront = page >= startOffset && page <= cuts.front;
+    const wouldBeHiddenInFront = page >= startOffset && page <= cuts.front || page === 0;
     const wouldBeHiddenInBack = page >= totalItems - cuts.back - 1 && page <= totalItems - 2;
     return wouldBeHiddenInFront || wouldBeHiddenInBack;
   }

package/es/components/Popover/index.js

@@ -17,6 +17,7 @@ import { useWindowEvent } from '../../internal/useEvent.js';
 import { mapPopoverAlignProp } from '../../tools/createPropAdapter.js';
 import { useFloating, offset, flip, arrow, autoUpdate } from '@floating-ui/react';
 import { hide } from '../../node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs.js';
+import { useFeatureFlag } from '../FeatureFlags/index.js';
 
 const PopoverContext = /*#__PURE__*/React__default.createContext({
   setFloating: {
@@ -65,6 +66,7 @@ const Popover = /*#__PURE__*/React__default.forwardRef(function PopoverRenderFun
   const floating = useRef(null);
   const caretRef = useRef(null);
   const popover = useRef(null);
+  const enableFloatingStyles = useFeatureFlag('enable-v12-dynamic-floating-styles') || autoAlign;
   let align = mapPopoverAlignProp(initialAlign);
 
   // If the `Popover` is the last focusable item in the tab order, it should also close when the browser window loses focus  (#12922)
@@ -117,7 +119,7 @@ const Popover = /*#__PURE__*/React__default.forwardRef(function PopoverRenderFun
     floatingStyles,
     placement,
     middlewareData
-  } = useFloating(autoAlign ? {
+  } = useFloating(enableFloatingStyles ? {
     placement: align,
     // The floating element is positioned relative to its nearest
     // containing block (usually the viewport). It will in many cases also
@@ -125,13 +127,15 @@ const Popover = /*#__PURE__*/React__default.forwardRef(function PopoverRenderFun
     // https://floating-ui.com/docs/misc#clipping
     strategy: 'fixed',
     // Middleware order matters, arrow should be last
-    middleware: [offset(!isTabTip ? popoverDimensions?.current?.offset : 0), flip({
+    middleware: [offset(!isTabTip ? popoverDimensions?.current?.offset : 0), autoAlign && flip({
       fallbackAxisSideDirection: 'start'
     }), arrow({
       element: caretRef
-    }), hide()],
+    }), autoAlign && hide()],
     whileElementsMounted: autoUpdate
-  } : {} // When autoAlign is turned off, floating-ui will not be used
+  } : {}
+  // When autoAlign is turned off & the `enable-v12-dynamic-floating-styles` feature flag is not
+  // enabled, floating-ui will not be used
   );
   const value = useMemo(() => {
     return {
@@ -148,7 +152,7 @@ const Popover = /*#__PURE__*/React__default.forwardRef(function PopoverRenderFun
     }
   }
   useEffect(() => {
-    if (autoAlign) {
+    if (enableFloatingStyles) {
       const updatedFloatingStyles = {
         ...floatingStyles,
         visibility: middlewareData.hide?.referenceHidden ? 'hidden' : 'visible'
@@ -180,7 +184,7 @@ const Popover = /*#__PURE__*/React__default.forwardRef(function PopoverRenderFun
         }
       }
     }
-  }, [floatingStyles, refs.floating, autoAlign, middlewareData, placement, caret]);
+  }, [floatingStyles, refs.floating, enableFloatingStyles, middlewareData, placement, caret]);
   const ref = useMergedRefs([forwardRef, popover]);
   const currentAlignment = autoAlign && placement !== align ? placement : align;
   const className = cx({
@@ -189,7 +193,7 @@ const Popover = /*#__PURE__*/React__default.forwardRef(function PopoverRenderFun
     [`${prefix}--popover--drop-shadow`]: dropShadow,
     [`${prefix}--popover--high-contrast`]: highContrast,
     [`${prefix}--popover--open`]: open,
-    [`${prefix}--popover--auto-align ${prefix}--autoalign`]: autoAlign,
+    [`${prefix}--popover--auto-align ${prefix}--autoalign`]: enableFloatingStyles,
     [`${prefix}--popover--${currentAlignment}`]: true,
     [`${prefix}--popover--tab-tip`]: isTabTip
   }, customClassName);
@@ -205,8 +209,8 @@ const Popover = /*#__PURE__*/React__default.forwardRef(function PopoverRenderFun
      * is on, even if they are a trigger element.
      */
     const isTriggerElement = item?.type === 'button';
-    const isTriggerComponent = autoAlign && displayName && ['ToggletipButton'].includes(displayName);
-    const isAllowedTriggerComponent = autoAlign && !['ToggletipContent', 'PopoverContent'].includes(displayName);
+    const isTriggerComponent = enableFloatingStyles && displayName && ['ToggletipButton'].includes(displayName);
+    const isAllowedTriggerComponent = enableFloatingStyles && !['ToggletipContent', 'PopoverContent'].includes(displayName);
     if ( /*#__PURE__*/React__default.isValidElement(item) && (isTriggerElement || isTriggerComponent || isAllowedTriggerComponent)) {
       const className = item?.props?.className;
       const ref = (item?.props).ref;
@@ -225,7 +229,7 @@ const Popover = /*#__PURE__*/React__default.forwardRef(function PopoverRenderFun
           // For a toggletip there is a specific trigger component, ToggletipButton.
           // In either of these caes we want to set this as the reference node for floating-ui autoAlign
           // positioning.
-          if (autoAlign && item?.type?.displayName !== 'PopoverContent' || autoAlign && item?.type?.displayName === 'ToggletipButton') {
+          if (enableFloatingStyles && item?.type?.displayName !== 'PopoverContent' || enableFloatingStyles && item?.type?.displayName === 'ToggletipButton') {
             // Set the reference element for floating-ui
             refs.setReference(node);
           }
@@ -248,7 +252,7 @@ const Popover = /*#__PURE__*/React__default.forwardRef(function PopoverRenderFun
   }, /*#__PURE__*/React__default.createElement(BaseComponentAsAny, _extends({}, rest, {
     className: className,
     ref: ref
-  }), autoAlign || isTabTip ? mappedChildren : children));
+  }), enableFloatingStyles || isTabTip ? mappedChildren : children));
 });
 
 // Note: this displayName is temporarily set so that Storybook ArgTable
@@ -259,7 +263,6 @@ if (process.env.NODE_ENV !== "production") {
 Popover.propTypes = {
   /**
    * Specify how the popover should align with the trigger element
-   
    */
   align: deprecateValuesWithin(PropTypes.oneOf(['top', 'top-left',
   // deprecated use top-start instead
@@ -345,18 +348,19 @@ _ref2, forwardRef) {
     autoAlign
   } = React__default.useContext(PopoverContext);
   const ref = useMergedRefs([setFloating, forwardRef]);
+  const enableFloatingStyles = useFeatureFlag('enable-v12-dynamic-floating-styles') || autoAlign;
   return /*#__PURE__*/React__default.createElement("span", _extends({}, rest, {
     className: `${prefix}--popover`
   }), /*#__PURE__*/React__default.createElement("span", {
     className: cx(`${prefix}--popover-content`, className),
     ref: ref
-  }, children, autoAlign && /*#__PURE__*/React__default.createElement("span", {
+  }, children, enableFloatingStyles && /*#__PURE__*/React__default.createElement("span", {
     className: cx({
       [`${prefix}--popover-caret`]: true,
       [`${prefix}--popover--auto-align`]: true
     }),
     ref: caretRef
-  })), !autoAlign && /*#__PURE__*/React__default.createElement("span", {
+  })), !enableFloatingStyles && /*#__PURE__*/React__default.createElement("span", {
     className: cx({
       [`${prefix}--popover-caret`]: true
     }),

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

@@ -0,0 +1,25 @@
+/**
+ * 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, { ReactNode } from 'react';
+interface PortalProps {
+    /**
+     * Specify the children elements to be rendered inside of the <Portal>
+     */
+    children: ReactNode;
+    /**
+     * Provide a ref for a container node to render the portal
+     */
+    container?: React.RefObject<HTMLElement>;
+}
+/**
+ * Helper component for rendering content within a portal. By default, the
+ * portal will render into document.body. You can customize this behavior with
+ * the `container` prop. Any `children` provided to this component will be
+ * rendered inside of the container.
+ */
+declare function Portal({ container, children, }: PortalProps): React.ReactPortal | null;
+export { Portal };

package/es/components/Slider/Slider.js

@@ -1103,7 +1103,7 @@ class Slider extends PureComponent {
         className: lowerThumbClasses,
         role: "slider",
         id: twoHandles ? undefined : id,
-        tabIndex: !readOnly ? 0 : -1,
+        tabIndex: readOnly || disabled ? undefined : 0,
         "aria-valuetext": `${formatLabel(value, '')}`,
         "aria-valuemax": twoHandles ? valueUpper : max,
         "aria-valuemin": min,
@@ -1122,7 +1122,7 @@ class Slider extends PureComponent {
       }, upperThumbWrapperProps), /*#__PURE__*/React__default.createElement("div", {
         className: upperThumbClasses,
         role: "slider",
-        tabIndex: !readOnly ? 0 : -1,
+        tabIndex: readOnly || disabled ? undefined : 0,
         "aria-valuemax": max,
         "aria-valuemin": value,
         "aria-valuenow": valueUpper,

package/es/components/Tabs/Tabs.js

@@ -322,8 +322,8 @@ function TabList(_ref4) {
   function onKeyDown(event) {
     if (matches(event, [ArrowRight, ArrowLeft, Home, End])) {
       event.preventDefault();
-      const filtredTabs = tabs.current.filter(tab => tab !== null);
-      const activeTabs = filtredTabs.filter(tab => !tab.disabled);
+      const filteredTabs = tabs.current.filter(tab => tab !== null);
+      const activeTabs = filteredTabs.filter(tab => !tab.disabled);
       const currentIndex = activeTabs.indexOf(tabs.current[activation === 'automatic' ? selectedIndex : activeIndex]);
       const nextIndex = tabs.current.indexOf(activeTabs[getNextIndex(event, activeTabs.length, currentIndex)]);
       if (activation === 'automatic') {
@@ -334,6 +334,18 @@ function TabList(_ref4) {
       tabs.current[nextIndex]?.focus();
     }
   }
+  function handleBlur(_ref5) {
+    let {
+      relatedTarget: currentActiveNode
+    } = _ref5;
+    if (ref.current?.contains(currentActiveNode)) {
+      return;
+    }
+    // reset active index to selected tab index for manual activation
+    if (activation === 'manual') {
+      setActiveIndex(selectedIndex);
+    }
+  }
   useEffectOnce(() => {
     const tab = tabs.current[selectedIndex];
     if (scrollIntoView && tab) {
@@ -419,10 +431,10 @@ function TabList(_ref4) {
     }
   }, [activation, activeIndex, selectedIndex, isScrollable, children]);
   usePressable(previousButton, {
-    onPress(_ref5) {
+    onPress(_ref6) {
       let {
         longPress
-      } = _ref5;
+      } = _ref6;
       if (!longPress && ref.current) {
         setScrollLeft(Math.max(scrollLeft - ref.current.scrollWidth / tabs.current.length * 1.5, 0));
       }
@@ -432,10 +444,10 @@ function TabList(_ref4) {
     }
   });
   usePressable(nextButton, {
-    onPress(_ref6) {
+    onPress(_ref7) {
       let {
         longPress
-      } = _ref6;
+      } = _ref7;
       if (!longPress && ref.current) {
         setScrollLeft(Math.min(scrollLeft + ref.current.scrollWidth / tabs.current.length * 1.5, ref.current.scrollWidth - ref.current.clientWidth));
       }
@@ -459,7 +471,8 @@ function TabList(_ref4) {
     role: "tablist",
     className: `${prefix}--tab--list`,
     onScroll: debouncedOnScroll,
-    onKeyDown: onKeyDown
+    onKeyDown: onKeyDown,
+    onBlur: handleBlur
   }), React__default.Children.map(children, (child, index) => {
     return !isElement(child) ? null : /*#__PURE__*/React__default.createElement(TabContext.Provider, {
       value: {
@@ -544,7 +557,7 @@ TabList.propTypes = {
 
 // type TabElement = HTMLElement & { disabled?: boolean };
 
-function TabListVertical(_ref7) {
+function TabListVertical(_ref8) {
   let {
     activation = 'automatic',
     'aria-label': label,
@@ -552,7 +565,7 @@ function TabListVertical(_ref7) {
     className: customClassName,
     scrollIntoView,
     ...rest
-  } = _ref7;
+  } = _ref8;
   const {
     activeIndex,
     selectedIndex,
@@ -569,8 +582,8 @@ function TabListVertical(_ref7) {
   function onKeyDown(event) {
     if (matches(event, [ArrowDown, ArrowUp, Home, End])) {
       event.preventDefault();
-      const filtredTabs = tabs.current.filter(tab => tab !== null);
-      const activeTabs = filtredTabs.filter(tab => !tab.disabled);
+      const filteredTabs = tabs.current.filter(tab => tab !== null);
+      const activeTabs = filteredTabs.filter(tab => !tab.disabled);
       const currentIndex = activeTabs.indexOf(tabs.current[activation === 'automatic' ? selectedIndex : activeIndex]);
       const nextIndex = tabs.current.indexOf(activeTabs[getNextIndexVertical(event, activeTabs.length, currentIndex)]);
       if (activation === 'automatic') {
@@ -581,6 +594,18 @@ function TabListVertical(_ref7) {
       tabs.current[nextIndex]?.focus();
     }
   }
+  function handleBlur(_ref9) {
+    let {
+      relatedTarget: currentActiveNode
+    } = _ref9;
+    if (ref.current?.contains(currentActiveNode)) {
+      return;
+    }
+    // reset active index to selected tab index for manual activation
+    if (activation === 'manual') {
+      setActiveIndex(selectedIndex);
+    }
+  }
   useEffectOnce(() => {
     if (tabs.current[selectedIndex]?.disabled) {
       const activeTabs = tabs.current.filter(tab => {
@@ -647,7 +672,8 @@ function TabListVertical(_ref7) {
     ref: ref,
     role: "tablist",
     className: `${prefix}--tab--list`,
-    onKeyDown: onKeyDown
+    onKeyDown: onKeyDown,
+    onBlur: handleBlur
   }), React__default.Children.map(children, (child, index) => {
     return !isElement(child) ? null : /*#__PURE__*/React__default.createElement(TabContext.Provider, {
       value: {
@@ -730,7 +756,7 @@ function createLongPressBehavior(ref, direction, setScrollLeft) {
  * Tab
  */
 
-const Tab = /*#__PURE__*/forwardRef(function Tab(_ref8, forwardRef) {
+const Tab = /*#__PURE__*/forwardRef(function Tab(_ref10, forwardRef) {
   let {
     as = 'button',
     children,
@@ -741,7 +767,7 @@ const Tab = /*#__PURE__*/forwardRef(function Tab(_ref8, forwardRef) {
     secondaryLabel,
     renderIcon: Icon,
     ...rest
-  } = _ref8;
+  } = _ref10;
   const prefix = usePrefix();
   const {
     selectedIndex,
@@ -983,7 +1009,7 @@ Tab.propTypes = {
  * IconTab
  */
 
-const IconTab = /*#__PURE__*/React__default.forwardRef(function IconTab(_ref9, ref) {
+const IconTab = /*#__PURE__*/React__default.forwardRef(function IconTab(_ref11, ref) {
   let {
     children,
     className: customClassName,
@@ -992,7 +1018,7 @@ const IconTab = /*#__PURE__*/React__default.forwardRef(function IconTab(_ref9, r
     leaveDelayMs,
     label,
     ...rest
-  } = _ref9;
+  } = _ref11;
   const prefix = usePrefix();
   const classNames = cx(`${prefix}--tabs__nav-item--icon-only`, customClassName);
   return /*#__PURE__*/React__default.createElement(Tooltip, {
@@ -1041,12 +1067,12 @@ IconTab.propTypes = {
  * TabPanel
  */
 
-const TabPanel = /*#__PURE__*/React__default.forwardRef(function TabPanel(_ref10, forwardRef) {
+const TabPanel = /*#__PURE__*/React__default.forwardRef(function TabPanel(_ref12, forwardRef) {
   let {
     children,
     className: customClassName,
     ...rest
-  } = _ref10;
+  } = _ref12;
   const prefix = usePrefix();
   const panel = useRef(null);
   const ref = useMergedRefs([forwardRef, panel]);
@@ -1121,10 +1147,10 @@ TabPanel.propTypes = {
  * TabPanels
  */
 
-function TabPanels(_ref11) {
+function TabPanels(_ref13) {
   let {
     children
-  } = _ref11;
+  } = _ref13;
   const prefix = usePrefix();
   const refs = useRef([]);
   const hiddenStates = useRef([]);

package/es/components/Tag/DismissibleTag.js

@@ -79,7 +79,7 @@ const DismissibleTag = _ref => {
   }, /*#__PURE__*/React__default.createElement(Text, {
     title: tagTitle ? tagTitle : text,
     className: `${prefix}--tag__label`
-  }, text), /*#__PURE__*/React__default.createElement(Tooltip, {
+  }, text), normalizedSlug, /*#__PURE__*/React__default.createElement(Tooltip, {
     label: isEllipsisApplied ? dismissLabel : title,
     align: "bottom",
     className: tooltipClasses,
@@ -91,7 +91,7 @@ const DismissibleTag = _ref => {
     onClick: handleClose,
     disabled: disabled,
     "aria-label": title
-  }, _Close || (_Close = /*#__PURE__*/React__default.createElement(Close, null)))), normalizedSlug));
+  }, _Close || (_Close = /*#__PURE__*/React__default.createElement(Close, null))))));
 };
 DismissibleTag.propTypes = {
   /**

package/es/components/Tag/OperationalTag.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import PropTypes from 'prop-types';
-import React, { MouseEventHandler, ReactNode } from 'react';
+import React, { MouseEventHandler } from 'react';
 import { PolymorphicProps } from '../../types/common';
 import { SIZES } from './Tag';
 declare const TYPES: {
@@ -44,10 +44,6 @@ export interface OperationalTagBaseProps {
      * `md` (default) or `lg` sizes.
      */
     size?: keyof typeof SIZES;
-    /**
-     * **Experimental:** Provide a `Slug` component to be rendered inside the `OperationalTag` component
-     */
-    slug?: ReactNode;
     /**
      * Provide text to be rendered inside of a the tag.
      */
@@ -59,7 +55,7 @@ export interface OperationalTagBaseProps {
 }
 export type OperationalTagProps<T extends React.ElementType> = PolymorphicProps<T, OperationalTagBaseProps>;
 declare const OperationalTag: {
-    <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements>>({ className, disabled, id, renderIcon, slug, size, text, type, ...other }: OperationalTagProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements>>({ className, disabled, id, renderIcon, size, text, type, ...other }: OperationalTagProps<T>): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Provide a custom className that is applied to the containing <span>
@@ -83,10 +79,6 @@ declare const OperationalTag: {
          * `md` (default) or `lg` sizes.
          */
         size: PropTypes.Requireable<string>;
-        /**
-         * **Experimental:** Provide a `Slug` component to be rendered inside the `OperationalTag` component
-         */
-        slug: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         /**
          * Provide text to be rendered inside of a the tag.
          */

package/es/components/Tag/OperationalTag.js

@@ -36,7 +36,6 @@ const OperationalTag = _ref => {
     disabled,
     id,
     renderIcon,
-    slug,
     size,
     text,
     type = 'gray',
@@ -51,13 +50,6 @@ const OperationalTag = _ref => {
     const newElement = tagRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];
     setIsEllipsisApplied(isEllipsisActive(newElement));
   }, [prefix, tagRef]);
-  let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'AILabel') {
-    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
-      size: 'sm',
-      kind: 'inline'
-    });
-  }
   const tooltipClasses = cx(`${prefix}--icon-tooltip`, `${prefix}--tag-label-tooltip`);
   if (isEllipsisApplied) {
     return /*#__PURE__*/React__default.createElement(Tooltip, {
@@ -78,7 +70,7 @@ const OperationalTag = _ref => {
     }, other), /*#__PURE__*/React__default.createElement(Text, {
       title: text,
       className: `${prefix}--tag__label`
-    }, text), normalizedSlug));
+    }, text)));
   }
   return /*#__PURE__*/React__default.createElement(Tag, _extends({
     ref: tagRef,
@@ -88,7 +80,7 @@ const OperationalTag = _ref => {
     disabled: disabled,
     className: tagClasses,
     id: tagId
-  }, other), normalizedSlug, /*#__PURE__*/React__default.createElement(Text, {
+  }, other), /*#__PURE__*/React__default.createElement(Text, {
     title: text,
     className: `${prefix}--tag__label`
   }, text));
@@ -116,10 +108,6 @@ OperationalTag.propTypes = {
    * `md` (default) or `lg` sizes.
    */
   size: PropTypes.oneOf(Object.keys(SIZES)),
-  /**
-   * **Experimental:** Provide a `Slug` component to be rendered inside the `OperationalTag` component
-   */
-  slug: PropTypes.node,
   /**
    * Provide text to be rendered inside of a the tag.
    */