@carbon/react 1.63.1 → 1.64.0-rc.0

package/lib/components/Dropdown/Dropdown.js

@@ -23,6 +23,7 @@ require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
 var useId = require('../../internal/useId.js');
 var react = require('@floating-ui/react');
+var floatingUi_core = require('../../node_modules/@floating-ui/core/dist/floating-ui.core.mjs.js');
 var ListBoxPropTypes = require('../ListBox/ListBoxPropTypes.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -82,7 +83,8 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
   } = _ref;
   const {
     refs,
-    floatingStyles
+    floatingStyles,
+    middlewareData
   } = react.useFloating(autoAlign ? {
     placement: direction,
     // The floating element is positioned relative to its nearest
@@ -101,15 +103,19 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
           width: `${rects.reference.width}px`
         });
       }
-    }), react.flip()],
+    }), react.flip(), floatingUi_core.hide()],
     whileElementsMounted: react.autoUpdate
   } : {} // When autoAlign is turned off, floating-ui will not be used
   );
   React.useEffect(() => {
     if (autoAlign) {
-      Object.keys(floatingStyles).forEach(style => {
+      const updatedFloatingStyles = {
+        ...floatingStyles,
+        visibility: middlewareData.hide?.referenceHidden ? 'hidden' : 'visible'
+      };
+      Object.keys(updatedFloatingStyles).forEach(style => {
         if (refs.floating.current) {
-          refs.floating.current.style[style] = floatingStyles[style];
+          refs.floating.current.style[style] = updatedFloatingStyles[style];
         }
       });
     }
@@ -270,11 +276,11 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
   };
   const menuProps = React.useMemo(() => getMenuProps({
     ref: autoAlign ? refs.setFloating : null
-  }), [autoAlign]);
+  }), [autoAlign, getMenuProps, refs.setFloating]);
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug') {
+  if (slug && slug['type']?.displayName === 'AILabel') {
     normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
       size: 'mini'
     });
@@ -370,10 +376,12 @@ Dropdown.propTypes = {
    */
   disabled: PropTypes__default["default"].bool,
   /**
-   * Additional props passed to Downshift. Use with caution: anything you define
-   * here overrides the components' internal handling of that prop. Downshift
-   * internals are subject to change, and in some cases they can not be shimmed
-   * to shield you from potentially breaking changes.
+   * Additional props passed to Downshift.
+   *
+   * **Use with caution:** anything you define here overrides the components'
+   * internal handling of that prop. Downshift APIs and internals are subject to
+   * change, and in some cases they can not be shimmed by Carbon to shield you
+   * from potentially breaking changes.
    */
   downshiftProps: PropTypes__default["default"].object,
   /**

package/lib/components/FluidMultiSelect/FluidMultiSelect.js

@@ -63,7 +63,8 @@ FluidMultiSelect.propTypes = {
   clearSelectionText: PropTypes__default["default"].string,
   /**
    * Provide a compare function that is used to determine the ordering of
-   * options. See 'sortItems' for more control.
+   * options. See 'sortItems' for more control. Consider declaring function
+   * with `useCallback` to prevent unnecessary re-renders.
    */
   compareItems: PropTypes__default["default"].func,
   /**
@@ -75,10 +76,12 @@ FluidMultiSelect.propTypes = {
    */
   disabled: PropTypes__default["default"].bool,
   /**
-   * Additional props passed to Downshift. Use with caution: anything you define
-   * here overrides the components' internal handling of that prop. Downshift
-   * internals are subject to change, and in some cases they can not be shimmed
-   * to shield you from potentially breaking changes.
+   * Additional props passed to Downshift.
+   *
+   * **Use with caution:** anything you define here overrides the components'
+   * internal handling of that prop. Downshift APIs and internals are subject to
+   * change, and in some cases they can not be shimmed by Carbon to shield you
+   * from potentially breaking changes.
    */
   downshiftProps: PropTypes__default["default"].object,
   /**
@@ -114,7 +117,8 @@ FluidMultiSelect.propTypes = {
   /**
    * Helper function passed to downshift that allows the library to render a
    * given item to a string label. By default, it extracts the `label` field
-   * from a given item to serve as the item label in the list.
+   * from a given item to serve as the item label in the list. Consider
+   * declaring function with `useCallback` to prevent unnecessary re-renders.
    */
   itemToString: PropTypes__default["default"].func,
   /**

package/lib/components/Menu/MenuItem.js

@@ -13,6 +13,7 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
+var react = require('@floating-ui/react');
 var iconsReact = require('@carbon/icons-react');
 var useControllableState = require('../../internal/useControllableState.js');
 var useMergedRefs = require('../../internal/useMergedRefs.js');
@@ -33,9 +34,6 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var _CaretLeft, _CaretRight;
-const hoverIntentDelay = 150; // in ms
-const leaveIntentDelay = 300; // in ms
-
 const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(_ref, forwardRef) {
   let {
     children,
@@ -48,19 +46,37 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(_ref, forwardRe
     shortcut,
     ...rest
   } = _ref;
+  const [submenuOpen, setSubmenuOpen] = React.useState(false);
+  const [rtl, setRtl] = React.useState(false);
+  const {
+    refs,
+    floatingStyles,
+    context: floatingContext
+  } = react.useFloating({
+    open: submenuOpen,
+    onOpenChange: setSubmenuOpen,
+    placement: rtl ? 'left-start' : 'right-start',
+    whileElementsMounted: react.autoUpdate,
+    middleware: [react.offset({
+      mainAxis: -6,
+      crossAxis: -6
+    })]
+  });
+  const {
+    getReferenceProps,
+    getFloatingProps
+  } = react.useInteractions([react.useHover(floatingContext, {
+    delay: 100,
+    enabled: true,
+    handleClose: react.safePolygon({
+      requireIntent: false
+    })
+  })]);
   const prefix = usePrefix.usePrefix();
   const context = React.useContext(MenuContext.MenuContext);
   const menuItem = React.useRef(null);
-  const ref = useMergedRefs.useMergedRefs([forwardRef, menuItem]);
-  const [boundaries, setBoundaries] = React.useState({
-    x: -1,
-    y: -1
-  });
-  const [rtl, setRtl] = React.useState(false);
+  const ref = useMergedRefs.useMergedRefs([forwardRef, menuItem, refs.setReference]);
   const hasChildren = Boolean(children);
-  const [submenuOpen, setSubmenuOpen] = React.useState(false);
-  const hoverIntentTimeout = React.useRef(null);
-  const leaveIntentTimeout = React.useRef(null);
   const isDisabled = disabled && !hasChildren;
   const isDanger = kind === 'danger' && !hasChildren;
   function registerItem() {
@@ -76,31 +92,10 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(_ref, forwardRe
     if (!menuItem.current) {
       return;
     }
-    const {
-      x,
-      y,
-      width,
-      height
-    } = menuItem.current.getBoundingClientRect();
-    if (rtl) {
-      setBoundaries({
-        x: [-x, x - width],
-        y: [y, y + height]
-      });
-    } else {
-      setBoundaries({
-        x: [x, x + width],
-        y: [y, y + height]
-      });
-    }
     setSubmenuOpen(true);
   }
   function closeSubmenu() {
     setSubmenuOpen(false);
-    setBoundaries({
-      x: -1,
-      y: -1
-    });
   }
   function handleClick(e) {
     if (!isDisabled) {
@@ -114,27 +109,6 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(_ref, forwardRe
       }
     }
   }
-  function handleMouseEnter() {
-    if (leaveIntentTimeout.current) {
-      // When mouse reenters before closing keep sub menu open
-      clearTimeout(leaveIntentTimeout.current);
-      leaveIntentTimeout.current = null;
-    }
-    hoverIntentTimeout.current = setTimeout(() => {
-      openSubmenu();
-    }, hoverIntentDelay);
-  }
-  function handleMouseLeave() {
-    if (hoverIntentTimeout.current) {
-      clearTimeout(hoverIntentTimeout.current);
-      // Avoid closing the sub menu as soon as mouse leaves
-      // prevents accidental closure due to scroll bar
-      leaveIntentTimeout.current = setTimeout(() => {
-        closeSubmenu();
-        menuItem.current?.focus();
-      }, leaveIntentDelay);
-    }
-  }
   function handleKeyDown(e) {
     if (hasChildren && match.match(e, keys.ArrowRight)) {
       openSubmenu();
@@ -179,7 +153,18 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(_ref, forwardRe
       });
     }
   }, [iconsAllowed, IconElement, context.state.hasIcons, context]);
-  return /*#__PURE__*/React__default["default"].createElement("li", _rollupPluginBabelHelpers["extends"]({
+  React.useEffect(() => {
+    Object.keys(floatingStyles).forEach(style => {
+      if (refs.floating.current && style !== 'position') {
+        refs.floating.current.style[style] = floatingStyles[style];
+      }
+    });
+  }, [floatingStyles, refs.floating]);
+  return /*#__PURE__*/React__default["default"].createElement(react.FloatingFocusManager, {
+    context: floatingContext,
+    order: ['reference', 'floating'],
+    modal: false
+  }, /*#__PURE__*/React__default["default"].createElement("li", _rollupPluginBabelHelpers["extends"]({
     role: "menuitem"
   }, rest, {
     ref: ref,
@@ -189,10 +174,8 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(_ref, forwardRe
     "aria-haspopup": hasChildren ?? undefined,
     "aria-expanded": hasChildren ? submenuOpen : undefined,
     onClick: handleClick,
-    onMouseEnter: hasChildren ? handleMouseEnter : undefined,
-    onMouseLeave: hasChildren ? handleMouseLeave : undefined,
     onKeyDown: handleKeyDown
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, getReferenceProps()), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--menu-item__icon`
   }, iconsAllowed && IconElement && /*#__PURE__*/React__default["default"].createElement(IconElement, null)), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
     as: "div",
@@ -202,16 +185,15 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(_ref, forwardRe
     className: `${prefix}--menu-item__shortcut`
   }, shortcut), hasChildren && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--menu-item__shortcut`
-  }, rtl ? _CaretLeft || (_CaretLeft = /*#__PURE__*/React__default["default"].createElement(iconsReact.CaretLeft, null)) : _CaretRight || (_CaretRight = /*#__PURE__*/React__default["default"].createElement(iconsReact.CaretRight, null))), /*#__PURE__*/React__default["default"].createElement(Menu.Menu, {
+  }, rtl ? _CaretLeft || (_CaretLeft = /*#__PURE__*/React__default["default"].createElement(iconsReact.CaretLeft, null)) : _CaretRight || (_CaretRight = /*#__PURE__*/React__default["default"].createElement(iconsReact.CaretRight, null))), /*#__PURE__*/React__default["default"].createElement(Menu.Menu, _rollupPluginBabelHelpers["extends"]({
     label: label,
     open: submenuOpen,
     onClose: () => {
       closeSubmenu();
       menuItem.current?.focus();
     },
-    x: boundaries.x,
-    y: boundaries.y
-  }, children)));
+    ref: refs.setFloating
+  }, getFloatingProps()), children))));
 });
 MenuItem.propTypes = {
   /**

package/lib/components/Modal/Modal.js

@@ -240,7 +240,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
 
   // Slug is always size `sm`
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug') {
+  if (slug && slug['type']?.displayName === 'AILabel') {
     normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
       size: 'sm'
     });

package/lib/components/MultiSelect/FilterableMultiSelect.d.ts

@@ -48,10 +48,12 @@ export interface FilterableMultiSelectProps<ItemType> extends MultiSelectSorting
      */
     disabled?: boolean;
     /**
-     * Additional props passed to Downshift. Use with caution: anything you define
-     * here overrides the components' internal handling of that prop. Downshift
-     * internals are subject to change, and in some cases they can not be shimmed
-     * to shield you from potentially breaking changes.
+     * Additional props passed to Downshift.
+     *
+     * **Use with caution:** anything you define here overrides the components'
+     * internal handling of that prop. Downshift APIs and internals are subject to
+     * change, and in some cases they can not be shimmed by Carbon to shield you
+     * from potentially breaking changes.
      */
     downshiftProps?: UseMultipleSelectionProps<ItemType>;
     /**

package/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -176,20 +176,23 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
     setPrevOpen(open);
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  const sortedItems = sortItems(filterItems(items, {
-    itemToString: itemToString$1,
-    inputValue
-  }), {
-    selectedItems: {
-      top: controlledSelectedItems,
-      fixed: [],
-      'top-after-reopen': topItems
-    }[selectionFeedback],
-    itemToString: itemToString$1,
-    compareItems,
-    locale
-  });
+  // memoize sorted items to reduce unnecessary expensive sort on rerender
+  const sortedItems = React.useMemo(() => {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    return sortItems(filterItems(items, {
+      itemToString: itemToString$1,
+      inputValue
+    }), {
+      selectedItems: {
+        top: controlledSelectedItems,
+        fixed: [],
+        'top-after-reopen': topItems
+      }[selectionFeedback],
+      itemToString: itemToString$1,
+      compareItems,
+      locale
+    });
+  }, [items, inputValue, controlledSelectedItems, topItems, selectionFeedback, itemToString$1, compareItems, locale]);
   const inline = type === 'inline';
   const showWarning = !invalid && warn;
   const wrapperClasses = cx__default["default"](`${prefix}--multi-select__wrapper`, `${prefix}--multi-select--filterable__wrapper`, `${prefix}--list-box__wrapper`, containerClassName, {
@@ -229,9 +232,15 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
       setTopItems(controlledSelectedItems);
     }
   }, [controlledSelectedItems, isOpen, setTopItems]);
+  const validateHighlightFocus = () => {
+    if (controlledSelectedItems.length > 0) {
+      setHighlightedIndex(0);
+    }
+  };
   function handleMenuChange(forceIsOpen) {
     const nextIsOpen = forceIsOpen ?? !isOpen;
     setIsOpen(nextIsOpen);
+    validateHighlightFocus();
     if (onMenuChange) {
       onMenuChange(nextIsOpen);
     }
@@ -249,9 +258,8 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
   } = Downshift.useCombobox({
     isOpen,
     items: sortedItems,
+    // defaultHighlightedIndex: 0, // after selection, highlight the first item.
     itemToString: itemToString$1,
-    defaultHighlightedIndex: 0,
-    // after selection, highlight the first item.
     id,
     labelId,
     menuId,
@@ -296,24 +304,37 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
         return changes;
       case FunctionToggleMenu:
       case ToggleButtonClick:
+        validateHighlightFocus();
         if (changes.isOpen && !changes.selectedItem) {
           return {
-            ...changes,
-            highlightedIndex: 0
+            ...changes
           };
         }
-        return changes;
+        return {
+          ...changes,
+          highlightedIndex: null
+        };
       case InputChange:
         if (onInputValueChange) {
           onInputValueChange(changes.inputValue);
         }
         setInputValue(changes.inputValue ?? '');
         setIsOpen(true);
-        return changes;
+        return {
+          ...changes,
+          highlightedIndex: 0
+        };
       case InputClick:
+        validateHighlightFocus();
+        if (changes.isOpen && !changes.selectedItem) {
+          return {
+            ...changes
+          };
+        }
         return {
           ...changes,
-          isOpen: false
+          isOpen: false,
+          highlightedIndex: null
         };
       case MenuMouseLeave:
         return {
@@ -397,7 +418,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug') {
+  if (slug && slug['type']?.displayName === 'AILabel') {
     normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
       size: 'mini'
     });
@@ -634,10 +655,12 @@ FilterableMultiSelect.propTypes = {
    */
   disabled: PropTypes__default["default"].bool,
   /**
-   * Additional props passed to Downshift. Use with caution: anything you define
-   * here overrides the components' internal handling of that prop. Downshift
-   * internals are subject to change, and in some cases they can not be shimmed
-   * to shield you from potentially breaking changes.
+   * Additional props passed to Downshift.
+   *
+   * **Use with caution:** anything you define here overrides the components'
+   * internal handling of that prop. Downshift APIs and internals are subject to
+   * change, and in some cases they can not be shimmed by Carbon to shield you
+   * from potentially breaking changes.
    */
   // @ts-ignore
   downshiftProps: PropTypes__default["default"].shape(Downshift__default["default"].propTypes),

package/lib/components/MultiSelect/MultiSelect.d.ts

@@ -42,10 +42,12 @@ export interface MultiSelectProps<ItemType> extends MultiSelectSortingProps<Item
      */
     disabled?: ListBoxProps['disabled'];
     /**
-     * Additional props passed to Downshift. Use with caution: anything you define
-     * here overrides the components' internal handling of that prop. Downshift
-     * internals are subject to change, and in some cases they can not be shimmed
-     * to shield you from potentially breaking changes.
+     * Additional props passed to Downshift.
+     *
+     * **Use with caution:** anything you define here overrides the components'
+     * internal handling of that prop. Downshift APIs and internals are subject to
+     * change, and in some cases they can not be shimmed by Carbon to shield you
+     * from potentially breaking changes.
      */
     downshiftProps?: Partial<UseSelectProps<ItemType>>;
     /**

package/lib/components/MultiSelect/MultiSelect.js

@@ -322,7 +322,7 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
         setIsOpenWrapper(changes.isOpen || false);
         return {
           ...changes,
-          highlightedIndex: 0
+          highlightedIndex: controlledSelectedItems.length > 0 ? 0 : undefined
         };
       case ItemClick:
         setHighlightedIndex(changes.selectedItem);
@@ -397,7 +397,7 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug') {
+  if (slug && slug['type']?.displayName === 'AILabel') {
     normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
       size: 'mini'
     });
@@ -517,7 +517,8 @@ MultiSelect.propTypes = {
   clearSelectionText: PropTypes__default["default"].string,
   /**
    * Provide a compare function that is used to determine the ordering of
-   * options. See 'sortItems' for more control.
+   * options. See 'sortItems' for more control. Consider
+   * declaring function with `useCallback` to prevent unnecessary re-renders.
    */
   compareItems: PropTypes__default["default"].func,
   /**
@@ -529,10 +530,12 @@ MultiSelect.propTypes = {
    */
   disabled: PropTypes__default["default"].bool,
   /**
-   * Additional props passed to Downshift. Use with caution: anything you define
-   * here overrides the components' internal handling of that prop. Downshift
-   * internals are subject to change, and in some cases they can not be shimmed
-   * to shield you from potentially breaking changes.
+   * Additional props passed to Downshift.
+   *
+   * **Use with caution:** anything you define here overrides the components'
+   * internal handling of that prop. Downshift APIs and internals are subject to
+   * change, and in some cases they can not be shimmed by Carbon to shield you
+   * from potentially breaking changes.
    */
   downshiftProps: PropTypes__default["default"].object,
   /**
@@ -569,7 +572,8 @@ MultiSelect.propTypes = {
   /**
    * Helper function passed to downshift that allows the library to render a
    * given item to a string label. By default, it extracts the `label` field
-   * from a given item to serve as the item label in the list.
+   * from a given item to serve as the item label in the list. Consider
+   * declaring function with `useCallback` to prevent unnecessary re-renders.
    */
   itemToString: PropTypes__default["default"].func,
   /**

package/lib/components/NumberInput/NumberInput.js

@@ -190,7 +190,7 @@ const NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function N
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug') {
+  if (slug && slug['type']?.displayName === 'AILabel') {
     normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
       size: 'mini'
     });
@@ -198,7 +198,7 @@ const NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function N
 
   // Need to update the internal value when the revert button is clicked
   let isRevertActive;
-  if (slug && slug['type']?.displayName === 'Slug') {
+  if (slug && slug['type']?.displayName === 'AILabel') {
     isRevertActive = normalizedSlug.props.revertActive;
   }
   React.useEffect(() => {

package/lib/components/OverflowMenu/OverflowMenu.js

@@ -416,7 +416,8 @@ class OverflowMenu extends React__default["default"].Component {
       id: id,
       ref: mergeRefs["default"](this._triggerRef, ref),
       size: size,
-      label: iconDescription
+      label: iconDescription,
+      kind: "ghost"
     }), /*#__PURE__*/React__default["default"].createElement(IconElement, iconProps)), open && this.state.hasMountedTrigger && wrappedMenuBody));
   }
 }

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

@@ -106,7 +106,8 @@ const OverflowMenu = /*#__PURE__*/React__default["default"].forwardRef(function
     onMouseDown: handleMousedown,
     ref: floatingRef,
     label: label,
-    align: tooltipAlignment
+    align: tooltipAlignment,
+    kind: "ghost"
   }, /*#__PURE__*/React__default["default"].createElement(IconElement, {
     className: `${prefix}--overflow-menu__icon`
   })), /*#__PURE__*/React__default["default"].createElement(Menu.Menu, {

package/lib/components/RadioButtonGroup/RadioButtonGroup.js

@@ -111,7 +111,7 @@ const RadioButtonGroup = /*#__PURE__*/React__default["default"].forwardRef((prop
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug') {
+  if (slug && slug['type']?.displayName === 'AILabel') {
     normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
       size: 'mini',
       kind: 'default'

package/lib/components/RadioTile/RadioTile.js

@@ -81,7 +81,7 @@ const RadioTile = /*#__PURE__*/React__default["default"].forwardRef(function Rad
 
   // Slug is always size `xs`
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug') {
+  if (slug && slug['type']?.displayName === 'AILabel') {
     normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
       size: 'xs'
     });

package/lib/components/Select/Select.js

@@ -135,7 +135,7 @@ const Select = /*#__PURE__*/React__default["default"].forwardRef(function Select
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug') {
+  if (slug && slug['type']?.displayName === 'AILabel') {
     normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
       size: 'mini'
     });

package/lib/components/Tabs/Tabs.js

@@ -798,7 +798,7 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(_ref8, forwardRef) {
   };
   useEvent.useEvent(dismissIconRef, 'mouseover', onDismissIconMouseEnter);
   useEvent.useEvent(dismissIconRef, 'mouseleave', onDismissIconMouseLeave);
-  React.useLayoutEffect(() => {
+  useIsomorphicEffect["default"](() => {
     function handler() {
       const elementTabId = document.getElementById(`${id}`) || tabRef.current;
       if (elementTabId?.closest(`.${prefix}--tabs--vertical`)) {
@@ -1139,7 +1139,7 @@ function TabPanels(_ref11) {
   const prefix = usePrefix.usePrefix();
   const refs = React.useRef([]);
   const hiddenStates = React.useRef([]);
-  React.useLayoutEffect(() => {
+  useIsomorphicEffect["default"](() => {
     const tabContainer = refs.current[0]?.previousElementSibling;
     const isVertical = tabContainer?.classList.contains(`${prefix}--tabs--vertical`);
     const parentHasHeight = tabContainer?.parentElement?.style.height;

package/lib/components/Tag/DismissibleTag.js

@@ -60,7 +60,7 @@ const DismissibleTag = _ref => {
     }
   };
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug') {
+  if (slug && slug['type']?.displayName === 'AILabel') {
     normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
       size: 'sm',
       kind: 'inline'

package/lib/components/Tag/OperationalTag.js

@@ -62,7 +62,7 @@ const OperationalTag = _ref => {
     setIsEllipsisApplied(isEllipsisActive.isEllipsisActive(newElement));
   }, [prefix, tagRef]);
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug') {
+  if (slug && slug['type']?.displayName === 'AILabel') {
     normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
       size: 'sm',
       kind: 'inline'

package/lib/components/Tag/SelectableTag.js

@@ -53,7 +53,7 @@ const SelectableTag = _ref => {
     setIsEllipsisApplied(isEllipsisActive.isEllipsisActive(newElement));
   }, [prefix, tagRef]);
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug') {
+  if (slug && slug['type']?.displayName === 'AILabel') {
     normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
       size: 'sm',
       kind: 'inline'
@@ -75,6 +75,7 @@ const SelectableTag = _ref => {
       leaveDelayMs: 0,
       onMouseEnter: () => false
     }, /*#__PURE__*/React__default["default"].createElement(Tag["default"], _rollupPluginBabelHelpers["extends"]({
+      "aria-pressed": selectedTag,
       ref: tagRef,
       slug: slug,
       size: size,
@@ -89,6 +90,7 @@ const SelectableTag = _ref => {
     }, text), normalizedSlug));
   }
   return /*#__PURE__*/React__default["default"].createElement(Tag["default"], _rollupPluginBabelHelpers["extends"]({
+    "aria-pressed": selectedTag,
     ref: tagRef,
     slug: slug,
     size: size,