@carbon/react 1.70.0 → 1.71.0

package/es/components/NumberInput/NumberInput.js

@@ -37,6 +37,7 @@ const NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(
   const {
     allowEmpty = false,
     className: customClassName,
+    decorator,
     disabled = false,
     disableWheel: disableWheelProp = false,
     defaultValue = 0,
@@ -112,7 +113,8 @@ const NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(
   const [incrementNumLabel, decrementNumLabel] = [t('increment.number'), t('decrement.number')];
   const wrapperClasses = cx(`${prefix}--number__input-wrapper`, {
     [`${prefix}--number__input-wrapper--warning`]: normalizedProps.warn,
-    [`${prefix}--number__input-wrapper--slug`]: slug
+    [`${prefix}--number__input-wrapper--slug`]: slug,
+    [`${prefix}--number__input-wrapper--decorator`]: decorator
   });
   const iconClasses = cx({
     [`${prefix}--number__invalid`]: normalizedProps.invalid || normalizedProps.warn,
@@ -186,18 +188,18 @@ const NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(
     }
   }
 
-  // Slug is always size `mini`
-  let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'AILabel') {
-    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+  // AILabel always size `mini`
+  let normalizedDecorator = /*#__PURE__*/React__default.isValidElement(slug ?? decorator) ? slug ?? decorator : null;
+  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
+    normalizedDecorator = /*#__PURE__*/React__default.cloneElement(normalizedDecorator, {
       size: 'mini'
     });
   }
 
   // Need to update the internal value when the revert button is clicked
   let isRevertActive;
-  if (slug && slug['type']?.displayName === 'AILabel') {
-    isRevertActive = normalizedSlug.props.revertActive;
+  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
+    isRevertActive = normalizedDecorator.props.revertActive;
   }
   useEffect(() => {
     if (!isRevertActive && slug && defaultValue) {
@@ -252,7 +254,9 @@ const NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(
     step: step,
     type: "number",
     value: value
-  })), normalizedSlug, Icon ? /*#__PURE__*/React__default.createElement(Icon, {
+  })), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--number__input-inner-wrapper--decorator`
+  }, normalizedDecorator) : '', Icon ? /*#__PURE__*/React__default.createElement(Icon, {
     className: iconClasses
   }) : null, !hideSteppers && /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--number__controls`
@@ -297,6 +301,10 @@ NumberInput.propTypes = {
    * Specify an optional className to be applied to the wrapper node
    */
   className: PropTypes.string,
+  /**
+   * **Experimental**: Provide a `decorator` component to be rendered inside the `NumberInput` component
+   */
+  decorator: PropTypes.node,
   /**
    * Optional starting value for uncontrolled state
    */
@@ -379,7 +387,7 @@ NumberInput.propTypes = {
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `NumberInput` component
    */
-  slug: PropTypes.node,
+  slug: deprecate(PropTypes.node, 'The `slug` prop for `NumberInput` is no longer needed and has ' + 'been deprecated in v11 in favor of the new `decorator` prop. It will be moved in the next major release.'),
   /**
    * Specify how much the values should increase/decrease upon clicking on up/down button
    */

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

@@ -19,8 +19,22 @@ import mergeRefs from '../../../tools/mergeRefs.js';
 import { useId } from '../../../internal/useId.js';
 import { usePrefix } from '../../../internal/usePrefix.js';
 import { useAttachedMenu } from '../../../internal/useAttachedMenu.js';
+import deprecateValuesWithin from '../../../prop-types/deprecateValuesWithin.js';
 
 const defaultSize = 'md';
+const propMappingFunction = deprecatedValue => {
+  const mapping = {
+    'top-left': 'top-start',
+    'top-right': 'top-end',
+    'bottom-left': 'bottom-start',
+    'bottom-right': 'bottom-end',
+    'left-bottom': 'left-end',
+    'left-top': 'left-start',
+    'right-bottom': 'right-end',
+    'right-top': 'right-start'
+  };
+  return mapping[deprecatedValue];
+};
 const OverflowMenu = /*#__PURE__*/React__default.forwardRef(function OverflowMenu(_ref, forwardRef) {
   let {
     autoAlign = false,
@@ -162,7 +176,32 @@ 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: deprecateValuesWithin(PropTypes.oneOf(['top', 'top-left',
+  // deprecated use top-start instead
+  'top-right',
+  // deprecated use top-end instead
+
+  'bottom', 'bottom-left',
+  // deprecated use bottom-start instead
+  'bottom-right',
+  // deprecated use bottom-end instead
+
+  'left', 'left-bottom',
+  // deprecated use left-end instead
+  'left-top',
+  // deprecated use left-start instead
+
+  'right', 'right-bottom',
+  // deprecated use right-end instead
+  'right-top',
+  // deprecated use right-start instead
+
+  // new values to match floating-ui
+  'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']),
+  //allowed prop values
+  ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'],
+  //optional mapper function
+  propMappingFunction),
   /**
    * Specify a DOM node where the Menu should be rendered in. Defaults to document.body.
    */

package/es/components/Pagination/Pagination.js

@@ -245,7 +245,7 @@ const Pagination = /*#__PURE__*/React__default.forwardRef(function Pagination(_r
     onClick: decrementPage,
     ref: backBtnRef
   }, _CaretLeft || (_CaretLeft = /*#__PURE__*/React__default.createElement(CaretLeft, null))), /*#__PURE__*/React__default.createElement(IconButton, {
-    align: "top-right",
+    align: "top-end",
     disabled: forwardButtonDisabled || isLastPage,
     kind: "ghost",
     className: forwardButtonClasses,

package/es/components/PaginationNav/PaginationNav.d.ts

@@ -28,7 +28,7 @@ interface PaginationNavProps extends Omit<React.HTMLAttributes<HTMLElement>, 'on
      */
     disableOverflow?: boolean;
     /**
-     * The number of items to be shown.
+     * The number of items to be shown (minimum of 4 unless props.items < 4).
      */
     itemsShown?: number;
     /**

package/es/components/PaginationNav/PaginationNav.js

@@ -12,6 +12,8 @@ import cx from 'classnames';
 import { CaretRight, CaretLeft, OverflowMenuHorizontal } from '@carbon/icons-react';
 import { IconButton } from '../IconButton/index.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { breakpoints } from '@carbon/layout';
+import { useMatchMedia } from '../../internal/useMatchMedia.js';
 
 var _CaretRight, _CaretLeft, _option;
 const translationIds = {
@@ -179,8 +181,22 @@ const PaginationNav = /*#__PURE__*/React__default.forwardRef(function Pagination
     translateWithId: t = translateWithId,
     ...rest
   } = _ref4;
+  const smMediaQuery = `(max-width: ${breakpoints.sm.width})`;
+  const isSm = useMatchMedia(smMediaQuery);
+  let numberOfPages;
+  switch (size) {
+    case 'md':
+      numberOfPages = itemsShown === 4 ? itemsShown : 5;
+      break;
+    case 'sm':
+      numberOfPages = Math.max(4, Math.min(itemsShown, 7));
+      break;
+    default:
+      numberOfPages = 4;
+      break;
+  }
   const [currentPage, setCurrentPage] = useState(page);
-  const [itemsDisplayedOnPage, setItemsDisplayedOnPage] = useState(itemsShown >= 4 ? itemsShown : 4);
+  const [itemsDisplayedOnPage, setItemsDisplayedOnPage] = useState(itemsShown >= 4 && !isSm ? itemsShown : numberOfPages);
   const [cuts, setCuts] = useState(calculateCuts(currentPage, totalItems, itemsDisplayedOnPage));
   const prevPage = usePrevious(currentPage);
   const prefix = usePrefix();
@@ -225,9 +241,10 @@ const PaginationNav = /*#__PURE__*/React__default.forwardRef(function Pagination
 
   // re-calculate cuts if props.totalItems or props.itemsShown change
   useEffect(() => {
-    setItemsDisplayedOnPage(itemsShown >= 4 ? itemsShown : 4);
-    setCuts(calculateCuts(currentPage, totalItems, itemsShown));
-  }, [totalItems, itemsShown]); // eslint-disable-line react-hooks/exhaustive-deps
+    const itemsToBeShown = itemsShown >= 4 && !isSm ? itemsShown : numberOfPages;
+    setItemsDisplayedOnPage(Math.max(itemsToBeShown, 4));
+    setCuts(calculateCuts(currentPage, totalItems, Math.max(itemsToBeShown, 4)));
+  }, [totalItems, itemsShown, isSm, size]); // eslint-disable-line react-hooks/exhaustive-deps
 
   // update cuts if necessary whenever currentPage changes
   useEffect(() => {
@@ -386,7 +403,7 @@ PaginationNav.propTypes = {
   // eslint-disable-line react/prop-types
 
   /**
-   * The number of items to be shown.
+   * The number of items to be shown (minimum of 4 unless props.items < 4).
    */
   itemsShown: PropTypes.number,
   /**

package/es/components/RadioButton/RadioButton.d.ts

@@ -15,6 +15,10 @@ export interface RadioButtonProps extends Omit<React.InputHTMLAttributes<HTMLInp
      * Provide an optional className to be applied to the containing node
      */
     className?: string;
+    /**
+     * **Experimental**: Provide a `decorator` component to be rendered inside the `RadioButton` component
+     */
+    decorator?: ReactNode;
     /**
      * Specify whether the `<RadioButton>` should be checked by default
      */
@@ -55,6 +59,7 @@ export interface RadioButtonProps extends Omit<React.InputHTMLAttributes<HTMLInp
      */
     onClick?: (evt: React.MouseEvent<HTMLInputElement>) => void;
     /**
+     * @deprecated please use decorator instead.
      * **Experimental**: Provide a `Slug` component to be rendered inside the `RadioButton` component
      */
     slug?: ReactNode;

package/es/components/RadioButton/RadioButton.js

@@ -10,6 +10,7 @@ import PropTypes from 'prop-types';
 import React__default, { useRef } from 'react';
 import cx from 'classnames';
 import '../Text/index.js';
+import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useId } from '../../internal/useId.js';
 import mergeRefs from '../../tools/mergeRefs.js';
@@ -18,6 +19,7 @@ import { Text } from '../Text/Text.js';
 const RadioButton = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   const {
     className,
+    decorator,
     disabled,
     hideLabel,
     id,
@@ -41,13 +43,14 @@ const RadioButton = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   });
   const wrapperClasses = cx(className, `${prefix}--radio-button-wrapper`, {
     [`${prefix}--radio-button-wrapper--label-${labelPosition}`]: labelPosition !== 'right',
-    [`${prefix}--radio-button-wrapper--slug`]: slug
+    [`${prefix}--radio-button-wrapper--slug`]: slug,
+    [`${prefix}--radio-button-wrapper--decorator`]: decorator
   });
   const inputRef = useRef(null);
-  let normalizedSlug;
-  if (slug && /*#__PURE__*/React__default.isValidElement(slug)) {
-    const size = slug.props?.['kind'] === 'inline' ? 'md' : 'mini';
-    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+  let normalizedDecorator = /*#__PURE__*/React__default.isValidElement(slug ?? decorator) ? slug ?? decorator : null;
+  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
+    const size = normalizedDecorator.props?.['kind'] === 'inline' ? 'md' : 'mini';
+    normalizedDecorator = /*#__PURE__*/React__default.cloneElement(normalizedDecorator, {
       size
     });
   }
@@ -70,7 +73,9 @@ const RadioButton = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     className: `${prefix}--radio-button__appearance`
   }), labelText && /*#__PURE__*/React__default.createElement(Text, {
     className: innerLabelClasses
-  }, labelText, normalizedSlug)));
+  }, labelText, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--radio-button-wrapper-inner--decorator`
+  }, normalizedDecorator) : '')));
 });
 RadioButton.displayName = 'RadioButton';
 RadioButton.propTypes = {
@@ -82,6 +87,10 @@ RadioButton.propTypes = {
    * Provide an optional className to be applied to the containing node
    */
   className: PropTypes.string,
+  /**
+   * **Experimental**: Provide a decorator component to be rendered inside the `RadioButton` component
+   */
+  decorator: PropTypes.node,
   /**
    * Specify whether the `<RadioButton>` should be checked by default
    */
@@ -128,7 +137,7 @@ RadioButton.propTypes = {
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `RadioButton` component
    */
-  slug: PropTypes.node,
+  slug: deprecate(PropTypes.node, 'The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead.'),
   /**
    * Specify the value of the `<RadioButton>`
    */

package/es/components/RadioButtonGroup/RadioButtonGroup.d.ts

@@ -17,6 +17,10 @@ export interface RadioButtonGroupProps extends Omit<React.InputHTMLAttributes<HT
      * Provide an optional className to be applied to the container node
      */
     className?: string;
+    /**
+     * **Experimental**: Provide a decorator component to be rendered inside the `RadioButtonGroup` component
+     */
+    decorator?: ReactNode;
     /**
      * Specify the `<RadioButton>` to be selected by default
      */
@@ -64,6 +68,7 @@ export interface RadioButtonGroupProps extends Omit<React.InputHTMLAttributes<HT
      */
     readOnly?: boolean;
     /**
+     * @deprecated please use decorator instead.
      * **Experimental**: Provide a `Slug` component to be rendered inside the `RadioButtonGroup` component
      */
     slug?: ReactNode;

package/es/components/RadioButtonGroup/RadioButtonGroup.js

@@ -12,6 +12,7 @@ import cx from 'classnames';
 import { Legend } from '../Text/index.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
+import deprecate from '../../prop-types/deprecate.js';
 import mergeRefs from '../../tools/mergeRefs.js';
 import { useId } from '../../internal/useId.js';
 
@@ -19,6 +20,7 @@ const RadioButtonGroup = /*#__PURE__*/React__default.forwardRef((props, ref) =>
   const {
     children,
     className,
+    decorator,
     defaultSelected,
     disabled,
     helperText,
@@ -87,7 +89,8 @@ const RadioButtonGroup = /*#__PURE__*/React__default.forwardRef((props, ref) =>
     [`${prefix}--radio-button-group--readonly`]: readOnly,
     [`${prefix}--radio-button-group--invalid`]: !readOnly && invalid,
     [`${prefix}--radio-button-group--warning`]: showWarning,
-    [`${prefix}--radio-button-group--slug`]: slug
+    [`${prefix}--radio-button-group--slug`]: slug,
+    [`${prefix}--radio-button-group--decorator`]: decorator
   });
   const helperClasses = cx(`${prefix}--form__helper-text`, {
     [`${prefix}--form__helper-text--disabled`]: disabled
@@ -99,10 +102,10 @@ const RadioButtonGroup = /*#__PURE__*/React__default.forwardRef((props, ref) =>
   }, helperText) : null;
   const divRef = useRef(null);
 
-  // Slug is always size `mini`
-  let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'AILabel') {
-    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+  // AILabel is always size `mini`
+  let normalizedDecorator = /*#__PURE__*/React__default.isValidElement(slug ?? decorator) ? slug ?? decorator : null;
+  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
+    normalizedDecorator = /*#__PURE__*/React__default.cloneElement(normalizedDecorator, {
       size: 'mini',
       kind: 'default'
     });
@@ -117,7 +120,9 @@ const RadioButtonGroup = /*#__PURE__*/React__default.forwardRef((props, ref) =>
     "aria-describedby": showHelper && helperText ? helperId : undefined
   }, rest), legendText && /*#__PURE__*/React__default.createElement(Legend, {
     className: `${prefix}--label`
-  }, legendText, normalizedSlug), getRadioButtons()), /*#__PURE__*/React__default.createElement("div", {
+  }, legendText, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--radio-button-group-inner--decorator`
+  }, normalizedDecorator) : ''), getRadioButtons()), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--radio-button__validation-msg`
   }, !readOnly && invalid && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(WarningFilled, {
     className: `${prefix}--radio-button__invalid-icon`
@@ -138,6 +143,10 @@ RadioButtonGroup.propTypes = {
    * Provide an optional className to be applied to the container node
    */
   className: PropTypes.string,
+  /**
+   * **Experimental**: Provide a decorator component to be rendered inside the `RadioButtonGroup` component
+   */
+  decorator: PropTypes.node,
   /**
    * Specify the `<RadioButton>` to be selected by default
    */
@@ -191,7 +200,7 @@ RadioButtonGroup.propTypes = {
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `RadioButtonGroup` component
    */
-  slug: PropTypes.node,
+  slug: deprecate(PropTypes.node, 'The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead.'),
   /**
    * Specify the value that is currently selected in the group
    */

package/es/components/RadioTile/RadioTile.d.ts

@@ -18,6 +18,10 @@ export interface RadioTileProps {
      * Provide an optional `className` to be applied to the underlying `<label>`.
      */
     className?: string;
+    /**
+     * **Experimental**: Provide a `decorator` component to be rendered inside the `RadioTile` component
+     */
+    decorator?: React.ReactNode;
     /**
      * Specify whether the `RadioTile` should be disabled.
      */
@@ -48,6 +52,7 @@ export interface RadioTileProps {
      */
     onChange?: (value: string | number, name: string | undefined, event: React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent<HTMLInputElement>) => void;
     /**
+     * @deprecated please use `decorator` instead.
      * **Experimental**: Provide a `Slug` component to be rendered inside the `SelectableTile` component
      */
     slug?: React.ReactNode;

package/es/components/RadioTile/RadioTile.js

@@ -25,6 +25,7 @@ const RadioTile = /*#__PURE__*/React__default.forwardRef(function RadioTile(_ref
   let {
     children,
     className: customClassName,
+    decorator,
     disabled,
     light,
     checked,
@@ -45,7 +46,9 @@ const RadioTile = /*#__PURE__*/React__default.forwardRef(function RadioTile(_ref
     [`${prefix}--tile--light`]: light,
     [`${prefix}--tile--disabled`]: disabled,
     [`${prefix}--tile--slug`]: slug,
-    [`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners
+    [`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners,
+    [`${prefix}--tile--decorator`]: decorator,
+    [`${prefix}--tile--decorator-rounded`]: decorator && hasRoundedCorners
   });
   const v12TileRadioIcons = useFeatureFlag('enable-v12-tile-radio-icons');
   function icon() {
@@ -69,10 +72,10 @@ const RadioTile = /*#__PURE__*/React__default.forwardRef(function RadioTile(_ref
     }
   }
 
-  // Slug is always size `xs`
-  let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'AILabel') {
-    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+  // AILabel is always size `xs`
+  let normalizedDecorator = /*#__PURE__*/React__default.isValidElement(slug ?? decorator) ? slug ?? decorator : null;
+  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
+    normalizedDecorator = /*#__PURE__*/React__default.cloneElement(normalizedDecorator, {
       size: 'xs'
     });
   }
@@ -96,7 +99,9 @@ const RadioTile = /*#__PURE__*/React__default.forwardRef(function RadioTile(_ref
     className: `${prefix}--tile__checkmark`
   }, icon()), /*#__PURE__*/React__default.createElement(Text, {
     className: `${prefix}--tile-content`
-  }, children), normalizedSlug));
+  }, children), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--tile--inner-decorator`
+  }, normalizedDecorator) : ''));
 });
 RadioTile.displayName = 'RadioTile';
 RadioTile.propTypes = {
@@ -112,6 +117,10 @@ RadioTile.propTypes = {
    * Provide an optional `className` to be applied to the underlying `<label>`.
    */
   className: PropTypes.string,
+  /**
+   * **Experimental**: Provide a `decorator` component to be rendered inside the `RadioTile` component
+   */
+  decorator: PropTypes.node,
   /**
    * Specify whether the `RadioTile` should be disabled.
    */
@@ -144,9 +153,9 @@ RadioTile.propTypes = {
    */
   required: PropTypes.bool,
   /**
-   * **Experimental**: Provide a `Slug` component to be rendered inside the `SelectableTile` component
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `RadioTile` component
    */
-  slug: PropTypes.node,
+  slug: deprecate(PropTypes.node, 'The `slug` prop for `RadioTile` has ' + 'been deprecated in favor of the new `decorator` prop. It will be removed in the next major release.'),
   /**
    * Specify the tab index of the underlying `<input>`.
    */

package/es/components/Tabs/Tabs.js

@@ -346,6 +346,41 @@ function TabList(_ref4) {
       setActiveIndex(selectedIndex);
     }
   }
+
+  /**
+   * Scroll the tab into view if it is not already visible
+   * @param tab - The tab to scroll into view
+   * @returns {void}
+   */
+  function scrollTabIntoView(tab) {
+    if (!isScrollable || !ref.current) {
+      return;
+    }
+    if (tab) {
+      // The width of the "scroll buttons"
+      const {
+        width: tabWidth
+      } = tab.getBoundingClientRect();
+
+      // The start and end position of the selected tab
+      const start = tab.offsetLeft;
+      const end = tab.offsetLeft + tabWidth;
+
+      // The start and end of the visible area for the tabs
+      const visibleStart = ref.current.scrollLeft + buttonWidth;
+      const visibleEnd = ref.current.scrollLeft + ref.current.clientWidth - buttonWidth;
+
+      // The beginning of the tab is clipped and not visible
+      if (start < visibleStart) {
+        setScrollLeft(start - buttonWidth);
+      }
+
+      // The end of the tab is clipped and not visible
+      if (end > visibleEnd) {
+        setScrollLeft(end + buttonWidth - ref.current.clientWidth);
+      }
+    }
+  }
   useEffectOnce(() => {
     const tab = tabs.current[selectedIndex];
     if (scrollIntoView && tab) {
@@ -377,12 +412,12 @@ function TabList(_ref4) {
   });
   useIsomorphicEffect(() => {
     if (ref.current) {
-      //adding 1 in calculation for firefox support
+      // adding 1 in calculation for firefox support
       setIsScrollable(ref.current.scrollWidth > ref.current.clientWidth + 1);
     }
     function handler() {
       if (ref.current) {
-        //adding 1 in calculation for firefox support
+        // adding 1 in calculation for firefox support
         setIsScrollable(ref.current.scrollWidth > ref.current.clientWidth + 1);
       }
     }
@@ -400,36 +435,18 @@ function TabList(_ref4) {
       ref.current.scrollLeft = scrollLeft;
     }
   }, [scrollLeft]);
+
+  // scroll manual tabs when active index changes (focus outline movement)
   useIsomorphicEffect(() => {
-    if (!isScrollable || !ref.current) {
-      return;
-    }
     const tab = activation === 'manual' ? tabs.current[activeIndex] : tabs.current[selectedIndex];
-    if (tab) {
-      // The width of the "scroll buttons"
-
-      // The start and end position of the selected tab
-      const {
-        width: tabWidth
-      } = tab.getBoundingClientRect();
-      const start = tab.offsetLeft;
-      const end = tab.offsetLeft + tabWidth;
-
-      // The start and end of the visible area for the tabs
-      const visibleStart = ref.current.scrollLeft + buttonWidth;
-      const visibleEnd = ref.current.scrollLeft + ref.current.clientWidth - buttonWidth;
-
-      // The beginning of the tab is clipped and not visible
-      if (start < visibleStart) {
-        setScrollLeft(start - buttonWidth);
-      }
+    scrollTabIntoView(tab);
+  }, [activation, activeIndex]);
 
-      // The end of the tab is clipped and not visible
-      if (end > visibleEnd) {
-        setScrollLeft(end + buttonWidth - ref.current.clientWidth);
-      }
-    }
-  }, [activation, activeIndex, selectedIndex, isScrollable, children]);
+  // scroll tabs when selected index changes
+  useIsomorphicEffect(() => {
+    const tab = tabs.current[selectedIndex];
+    scrollTabIntoView(tab);
+  }, [selectedIndex, isScrollable, children]);
   usePressable(previousButton, {
     onPress(_ref6) {
       let {

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

@@ -13,6 +13,10 @@ export interface DismissibleTagBaseProps {
      * Provide a custom className that is applied to the containing <span>
      */
     className?: string;
+    /**
+     * **Experimental:** Provide a `decorator` component to be rendered inside the `DismissibleTag` component
+     */
+    decorator?: ReactNode;
     /**
      * Specify if the `DismissibleTag` is disabled
      */
@@ -36,6 +40,7 @@ export interface DismissibleTagBaseProps {
      */
     size?: keyof typeof SIZES;
     /**
+     * @deprecated please use `decorator` instead.
      * **Experimental:** Provide a `Slug` component to be rendered inside the `DismissibleTag` component
      */
     slug?: ReactNode;
@@ -58,12 +63,16 @@ export interface DismissibleTagBaseProps {
 }
 export type DismissibleTagProps<T extends React.ElementType> = PolymorphicProps<T, DismissibleTagBaseProps>;
 declare const DismissibleTag: {
-    <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements>>({ className, disabled, id, renderIcon, title, onClose, slug, size, text, tagTitle, type, ...other }: DismissibleTagProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements>>({ className, decorator, disabled, id, renderIcon, title, onClose, slug, size, text, tagTitle, type, ...other }: DismissibleTagProps<T>): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Provide a custom className that is applied to the containing <span>
          */
         className: PropTypes.Requireable<string>;
+        /**
+         * **Experimental:** Provide a `decorator` component to be rendered inside the `DismissibleTag` component
+         */
+        decorator: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         /**
          * Specify if the `DismissibleTag` is disabled
          */
@@ -89,7 +98,7 @@ declare const DismissibleTag: {
         /**
          * **Experimental:** Provide a `Slug` component to be rendered inside the `DismissibleTag` component
          */
-        slug: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        slug: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
         /**
          * Provide text to be rendered inside of a the tag.
          */