@carbon/react 1.63.2 → 1.64.0

package/lib/components/DatePicker/DatePicker.js

@@ -562,6 +562,21 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
     }
   }, [value, prefix]); //eslint-disable-line react-hooks/exhaustive-deps
 
+  React.useEffect(() => {
+    if (!calendarRef.current || !startInputField.current) return;
+    const handleKeyDown = event => {
+      if (match.match(event, keys.Tab) && !event.shiftKey && document.activeElement === endInputField.current && calendarRef.current.isOpen) {
+        calendarRef.current.close();
+        // Remove focus from endDate calendar input
+        document.activeElement instanceof HTMLElement &&
+        // this is to fix the TS warning
+        document?.activeElement?.blur();
+        onCalendarClose(calendarRef.current.selectedDates, '', calendarRef.current, event);
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown, true);
+    return () => document.removeEventListener('keydown', handleKeyDown, true);
+  }, [calendarRef, startInputField, endInputField, onCalendarClose]);
   let fluidError;
   if (isFluid) {
     if (invalid) {

package/lib/components/DatePickerInput/DatePickerInput.js

@@ -107,7 +107,7 @@ const DatePickerInput = /*#__PURE__*/React__default["default"].forwardRef(functi
 
   // 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/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'
     });

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,
   /**
@@ -116,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.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'
     });

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,
   /**
@@ -571,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

@@ -173,9 +173,17 @@ const NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function N
   const Icon = normalizedProps.icon;
   function handleStepperClick(event, direction) {
     if (inputRef.current) {
-      direction === 'up' ? inputRef.current.stepUp() : inputRef.current.stepDown();
+      const currentValue = Number(inputRef.current.value);
+      let newValue = direction === 'up' ? currentValue + step : currentValue - step;
+      if (min !== undefined) {
+        newValue = Math.max(newValue, min);
+      }
+      if (max !== undefined) {
+        newValue = Math.min(newValue, max);
+      }
+      const currentInputValue = inputRef.current ? inputRef.current.value : '';
       const state = {
-        value: allowEmpty && inputRef.current.value === '' ? '' : Number(inputRef.current.value),
+        value: allowEmpty && currentInputValue === '' && step === 0 ? '' : newValue,
         direction: direction
       };
       setValue(state.value);
@@ -190,7 +198,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 +206,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,

package/lib/components/Tag/Tag.js

@@ -99,7 +99,7 @@ const Tag = /*#__PURE__*/React__default["default"].forwardRef(function Tag(_ref,
 
   // Slug is always size `md` and `inline`
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug' && !isInteractiveTag) {
+  if (slug && slug['type']?.displayName === 'AILabel' && !isInteractiveTag) {
     normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
       size: 'sm',
       kind: 'inline'

package/lib/components/TextArea/TextArea.js

@@ -265,7 +265,7 @@ const TextArea = /*#__PURE__*/React__default["default"].forwardRef((props, forwa
 
   // 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/TextInput/PasswordInput.js

@@ -158,6 +158,11 @@ const PasswordInput = /*#__PURE__*/React__default["default"].forwardRef(function
   if (tooltipPosition === 'right' || tooltipPosition === 'left') {
     align = tooltipPosition;
   }
+  if (!hidePasswordLabel || hidePasswordLabel.trim() === '') {
+    console.warn('Warning: The "hidePasswordLabel" should not be blank.');
+  } else if (!showPasswordLabel || showPasswordLabel.trim() === '') {
+    console.warn('Warning: The "showPasswordLabel" should not be blank.');
+  }
   const input = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({}, util.textInputProps({
     sharedTextInputProps,
     invalid: normalizedProps.invalid,

package/lib/components/TextInput/TextInput.js

@@ -191,7 +191,7 @@ const TextInput = /*#__PURE__*/React__default["default"].forwardRef(function Tex
 
   // 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'
     });