@carbon/react 1.37.0 → 1.38.0

package/es/components/DataTable/DataTable.js

@@ -261,7 +261,7 @@ class DataTable extends React__default.Component {
           checked: row.isSelected,
           onSelect: composeEventHandlers([_this.handleOnSelectRow(row.id), onClick]),
           id: `${_this.getTablePrefix()}__select-row-${row.id}`,
-          name: `select-row-${row.id}`,
+          name: `select-row`,
           ariaLabel: t(translationKey),
           disabled: row.disabled,
           radio: _this.props.radio || null

package/es/components/DataTable/Table.js

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useContext, useRef, useCallback, useLayoutEffect } from 'react';
+import React__default, { useContext, useState, useRef, useCallback, useLayoutEffect } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import debounce from 'lodash.debounce';
@@ -60,6 +60,7 @@ const Table = _ref => {
     descriptionId
   } = useContext(TableContext);
   const prefix = usePrefix();
+  const [isScrollable, setIsScrollable] = useState(false);
   const tableRef = useRef(null);
   const componentClass = cx(`${prefix}--data-table`, className, {
     [`${prefix}--data-table--${size}`]: size,
@@ -98,6 +99,22 @@ const Table = _ref => {
   const debouncedSetTableAlignment = debounce(setTableAlignment, 100);
   useWindowEvent('resize', debouncedSetTableAlignment);
 
+  // Used to set a tabIndex when the Table is horizontally scrollable
+  const setTabIndex = useCallback(() => {
+    const tableContainer = tableRef?.current?.parentNode;
+    const tableHeader = tableRef?.current?.firstChild;
+    if (tableHeader?.scrollWidth > tableContainer?.clientWidth) {
+      setIsScrollable(true);
+    } else {
+      setIsScrollable(false);
+    }
+  }, []);
+  const debouncedSetTabIndex = debounce(setTabIndex, 100);
+  useWindowEvent('resize', debouncedSetTabIndex);
+  useLayoutEffect(() => {
+    setTabIndex();
+  }, [setTabIndex]);
+
   // recalculate table alignment once fonts have loaded
   if (typeof document !== 'undefined' && document?.fonts?.status && document.fonts.status !== 'loaded') {
     document.fonts.ready.then(() => {
@@ -109,6 +126,9 @@ const Table = _ref => {
   }, [setTableAlignment, size]);
   const table = /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--data-table-content`
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    ,
+    tabIndex: isScrollable ? 0 : undefined
   }, /*#__PURE__*/React__default.createElement("table", _extends({
     "aria-labelledby": titleId,
     "aria-describedby": descriptionId

package/es/components/Grid/CSSGrid.js

@@ -119,7 +119,7 @@ Subgrid.propTypes = {
    */
   className: PropTypes.string,
   /**
-   * Specify the grid mode for the subgrid
+   * Specify the gutter mode for the subgrid
    */
   mode: PropTypes.oneOf(['wide', 'narrow', 'condensed'])
 };

package/es/components/Grid/ColumnHang.js

@@ -13,7 +13,7 @@ import { usePrefix } from '../../internal/usePrefix.js';
 
 /**
  * Helper component for rendering content that hangs on the column. Useful when
- * trying to align content across different grid modes
+ * trying to align content across different gutter modes
  */
 function ColumnHang(_ref) {
   let {

package/es/components/Grid/GridContext.d.ts

@@ -8,7 +8,7 @@ import * as React from 'react';
 export type GridMode = 'flexbox' | 'css-grid';
 export interface GridSettingContext {
     /**
-     * The grid mode for the GridContext
+     * The gutter mode for the GridContext
      */
     mode: GridMode;
     /**
@@ -23,7 +23,7 @@ export interface GridSettingsProps {
      */
     children?: React.ReactNode;
     /**
-     * Specify the grid mode for the GridContext
+     * Specify the gutter mode for the GridContext
      */
     mode: GridMode;
     /**

package/es/components/Grid/GridContext.js

@@ -40,7 +40,7 @@ GridSettings.propTypes = {
    */
   children: PropTypes.node,
   /**
-   * Specify the grid mode for the GridContext
+   * Specify the gutter mode for the GridContext
    */
   mode: PropTypes.oneOf(gridModes).isRequired,
   /**

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

@@ -4,48 +4,13 @@
  * 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 PropTypes from 'prop-types';
-import { type ElementType } from 'react';
-import type { PolymorphicProps } from '../../types/common';
+import React from 'react';
 type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 type SectionBaseProps = {
     level?: HeadingLevel;
 };
-type SectionProps<E extends ElementType> = PolymorphicProps<E, SectionBaseProps>;
-export declare function Section<E extends ElementType = 'section'>({ as: BaseComponent, level: levelOverride, ...rest }: SectionProps<E>): JSX.Element;
-export declare namespace Section {
-    var propTypes: {
-        /**
-         * Provide an alternative tag or component to use instead of the default
-         * <section> element
-         */
-        as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
-        /**
-         * Specify the content that will be placed in the component
-         */
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        /**
-         * Specify a class name for the outermost node of the component
-         */
-        className: PropTypes.Requireable<string>;
-        /**
-         * Overrides the level of the section
-         */
-        level: PropTypes.Requireable<number>;
-    };
-}
-type HeadingProps = JSX.IntrinsicElements[`h${HeadingLevel}`];
-export declare function Heading(props: HeadingProps): JSX.Element;
-export declare namespace Heading {
-    var propTypes: {
-        /**
-         * Specify the content that will be placed in the component
-         */
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        /**
-         * Specify a class name for the outermost node of the component
-         */
-        className: PropTypes.Requireable<string>;
-    };
-}
+export declare const Section: React.ForwardRefExoticComponent<Pick<SectionBaseProps & Omit<any, "as"> & {
+    as?: React.ElementType<any> | undefined;
+}, string | number | symbol> & React.RefAttributes<unknown>>;
+export declare const Heading: React.ForwardRefExoticComponent<Pick<React.ClassAttributes<HTMLHeadingElement> & React.HTMLAttributes<HTMLHeadingElement>, "key" | keyof React.HTMLAttributes<HTMLHeadingElement>> & React.RefAttributes<HTMLHeadingElement>>;
 export {};

package/es/components/Heading/index.js

@@ -5,11 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React__default from 'react';
 
 const HeadingContext = /*#__PURE__*/React__default.createContext(1);
-function Section(_ref) {
+const Section = /*#__PURE__*/React__default.forwardRef(function Section(_ref, ref) {
   let {
     as: BaseComponent = 'section',
     level: levelOverride,
@@ -20,8 +21,10 @@ function Section(_ref) {
   const BaseComponentAsAny = BaseComponent;
   return /*#__PURE__*/React__default.createElement(HeadingContext.Provider, {
     value: Math.min(level, 6)
-  }, /*#__PURE__*/React__default.createElement(BaseComponentAsAny, rest));
-}
+  }, /*#__PURE__*/React__default.createElement(BaseComponentAsAny, _extends({
+    ref: ref
+  }, rest)));
+});
 Section.propTypes = {
   /**
    * Provide an alternative tag or component to use instead of the default
@@ -41,10 +44,12 @@ Section.propTypes = {
    */
   level: PropTypes.number
 };
-function Heading(props) {
+const Heading = /*#__PURE__*/React__default.forwardRef(function Heading(props, ref) {
   const HeadingIntrinsic = `h${React__default.useContext(HeadingContext)}`;
-  return /*#__PURE__*/React__default.createElement(HeadingIntrinsic, props);
-}
+  return /*#__PURE__*/React__default.createElement(HeadingIntrinsic, _extends({
+    ref: ref
+  }, props));
+});
 Heading.propTypes = {
   /**
    * Specify the content that will be placed in the component

package/es/components/Icon/Icon.Skeleton.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 PropTypes from 'prop-types';
+import { ComponentProps } from 'react';
+export interface IconSkeletonProps extends ComponentProps<'div'> {
+    /**
+     * Specify an optional className to add.
+     */
+    className?: string;
+}
+declare const IconSkeleton: {
+    ({ className, ...rest }: IconSkeletonProps): JSX.Element;
+    propTypes: {
+        /**
+         * Specify an optional className to add.
+         */
+        className: PropTypes.Requireable<string>;
+    };
+};
+export default IconSkeleton;
+export { IconSkeleton };

package/es/components/Icon/Icon.Skeleton.js

@@ -17,12 +17,9 @@ const IconSkeleton = _ref => {
     ...rest
   } = _ref;
   const prefix = usePrefix();
-  const props = {
-    ...rest
-  };
   return /*#__PURE__*/React__default.createElement("div", _extends({
     className: cx(`${prefix}--icon--skeleton`, className)
-  }, props));
+  }, rest));
 };
 IconSkeleton.propTypes = {
   /**

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

@@ -0,0 +1,7 @@
+/**
+ * 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.
+ */
+export * from './Icon.Skeleton';

package/es/components/IconButton/index.js

@@ -29,6 +29,7 @@ const IconButton = /*#__PURE__*/React__default.forwardRef(function IconButton(pr
     leaveDelayMs = 100,
     wrapperClasses,
     size,
+    isSelected,
     ...rest
   } = props;
   const prefix = usePrefix();
@@ -48,7 +49,9 @@ const IconButton = /*#__PURE__*/React__default.forwardRef(function IconButton(pr
     kind: kind,
     ref: ref,
     size: size,
-    className: cx(`${prefix}--btn--icon-only`, className)
+    className: cx(`${prefix}--btn--icon-only`, {
+      [`${prefix}--btn--selected`]: isSelected
+    }, className)
   }), children));
 });
 IconButton.propTypes = {
@@ -80,6 +83,11 @@ IconButton.propTypes = {
    * Specify the duration in milliseconds to delay before displaying the tooltip
    */
   enterDelayMs: PropTypes.number,
+  /**
+   * Specify whether the IconButton is currently selected
+   */
+
+  isSelected: PropTypes.bool,
   /**
    * Specify the type of button to be used as the base for the IconButton
    */

package/es/components/Layer/index.js

@@ -26,7 +26,7 @@ function useLayer() {
     level
   };
 }
-function Layer(_ref) {
+const Layer = /*#__PURE__*/React__default.forwardRef(function Layer(_ref, ref) {
   let {
     as: BaseComponent = 'div',
     className: customClassName,
@@ -42,10 +42,12 @@ function Layer(_ref) {
   const value = Math.max(0, Math.min(level + 1, MAX_LEVEL));
   return /*#__PURE__*/React__default.createElement(LayerContext.Provider, {
     value: value
-  }, /*#__PURE__*/React__default.createElement(BaseComponent, _extends({}, rest, {
+  }, /*#__PURE__*/React__default.createElement(BaseComponent, _extends({
+    ref: ref
+  }, rest, {
     className: className
   }), children));
-}
+});
 Layer.propTypes = {
   /**
    * Specify a custom component or element to be rendered as the top-level

package/es/components/ListBox/ListBoxMenuItem.js

@@ -14,10 +14,11 @@ import { usePrefix } from '../../internal/usePrefix.js';
 function useIsTruncated(ref) {
   const [isTruncated, setIsTruncated] = useState(false);
   useEffect(() => {
+    const element = ref.current;
     const {
       offsetWidth,
       scrollWidth
-    } = ref.current;
+    } = element.lastElementChild?.lastElementChild || element;
     setIsTruncated(offsetWidth < scrollWidth);
   }, [ref, setIsTruncated]);
   return isTruncated;

package/es/components/Menu/Menu.js

@@ -13,6 +13,7 @@ import { createPortal } from 'react-dom';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { MenuContext, menuReducer } from './MenuContext.js';
+import { useLayoutDirection } from '../LayoutDirection/useLayoutDirection.js';
 import { match } from '../../internal/keyboard/match.js';
 import { Escape, ArrowLeft, ArrowUp, ArrowDown } from '../../internal/keyboard/keys.js';
 
@@ -53,6 +54,11 @@ const Menu = /*#__PURE__*/React__default.forwardRef(function Menu(_ref, forwardR
   const ref = useMergedRefs([forwardRef, menu]);
   const [position, setPosition] = useState([-1, -1]);
   const focusableItems = childContext.state.items.filter(item => !item.disabled && item.ref.current);
+
+  // Set RTL based on document direction or `LayoutDirection`
+  const {
+    direction
+  } = useLayoutDirection();
   function returnFocus() {
     if (focusReturn.current) {
       focusReturn.current.focus();
@@ -62,8 +68,14 @@ const Menu = /*#__PURE__*/React__default.forwardRef(function Menu(_ref, forwardR
     if (menu.current) {
       focusReturn.current = document.activeElement;
       const pos = calculatePosition();
-      menu.current.style.left = `${pos[0]}px`;
-      menu.current.style.top = `${pos[1]}px`;
+      if ((document?.dir === 'rtl' || direction === 'rtl') && !rest?.id?.includes('MenuButton')) {
+        menu.current.style.insetInlineStart = `initial`;
+        menu.current.style.insetInlineEnd = `${pos[0]}px`;
+      } else {
+        menu.current.style.insetInlineStart = `${pos[0]}px`;
+        menu.current.style.insetInlineEnd = `initial`;
+      }
+      menu.current.style.insetBlockStart = `${pos[1]}px`;
       setPosition(pos);
       menu.current.focus();
       if (onOpen) {

package/es/components/Menu/MenuItem.js

@@ -9,16 +9,17 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React__default, { useContext, useRef, useState, useEffect } from 'react';
-import { CaretRight, Checkmark } from '@carbon/react/icons';
+import { CaretLeft, CaretRight, Checkmark } from '@carbon/icons-react';
 import { useControllableState } from '../../internal/useControllableState.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { Menu } from './Menu.js';
 import { MenuContext } from './MenuContext.js';
+import { useLayoutDirection } from '../LayoutDirection/useLayoutDirection.js';
 import { match } from '../../internal/keyboard/match.js';
 import { ArrowRight, Enter, Space } from '../../internal/keyboard/keys.js';
 
-var _CaretRight;
+var _CaretLeft, _CaretRight;
 const hoverIntentDelay = 150; // in ms
 
 const MenuItem = /*#__PURE__*/React__default.forwardRef(function MenuItem(_ref, forwardRef) {
@@ -41,6 +42,7 @@ const MenuItem = /*#__PURE__*/React__default.forwardRef(function MenuItem(_ref,
     x: -1,
     y: -1
   });
+  const [isRtl, setRtl] = useState(false);
   const hasChildren = Boolean(children);
   const [submenuOpen, setSubmenuOpen] = useState(false);
   const hoverIntentTimeout = useRef(null);
@@ -62,10 +64,17 @@ const MenuItem = /*#__PURE__*/React__default.forwardRef(function MenuItem(_ref,
       width,
       height
     } = menuItem.current.getBoundingClientRect();
-    setBoundaries({
-      x: [x, x + width],
-      y: [y, y + height]
-    });
+    if (isRtl) {
+      setBoundaries({
+        x: [-x, x - width],
+        y: [y, y + height]
+      });
+    } else {
+      setBoundaries({
+        x: [x, x + width],
+        y: [y, y + height]
+      });
+    }
     setSubmenuOpen(true);
   }
   function closeSubmenu() {
@@ -120,6 +129,18 @@ const MenuItem = /*#__PURE__*/React__default.forwardRef(function MenuItem(_ref,
     registerItem();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+
+  // Set RTL based on document direction or `LayoutDirection`
+  const {
+    direction
+  } = useLayoutDirection();
+  useEffect(() => {
+    if (document?.dir === 'rtl' || direction === 'rtl') {
+      setRtl(true);
+    } else {
+      setRtl(false);
+    }
+  }, [direction]);
   return /*#__PURE__*/React__default.createElement("li", _extends({
     role: "menuitem"
   }, rest, {
@@ -141,7 +162,7 @@ const MenuItem = /*#__PURE__*/React__default.forwardRef(function MenuItem(_ref,
     className: `${prefix}--menu-item__shortcut`
   }, shortcut), hasChildren && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--menu-item__shortcut`
-  }, _CaretRight || (_CaretRight = /*#__PURE__*/React__default.createElement(CaretRight, null))), /*#__PURE__*/React__default.createElement(Menu, {
+  }, isRtl ? _CaretLeft || (_CaretLeft = /*#__PURE__*/React__default.createElement(CaretLeft, null)) : _CaretRight || (_CaretRight = /*#__PURE__*/React__default.createElement(CaretRight, null))), /*#__PURE__*/React__default.createElement(Menu, {
     label: label,
     open: submenuOpen,
     onClose: () => {

package/es/components/MenuButton/index.js

@@ -55,7 +55,7 @@ const MenuButton = /*#__PURE__*/React__default.forwardRef(function MenuButton(_r
     }
   }
   function handleOpen() {
-    menuRef.current.style.width = `${width}px`;
+    menuRef.current.style.inlineSize = `${width}px`;
   }
   const triggerClasses = cx(`${prefix}--menu-button__trigger`, {
     [`${prefix}--menu-button__trigger--open`]: open

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -28,7 +28,7 @@ import { match } from '../../internal/keyboard/match.js';
 import ListBoxSelection from '../ListBox/next/ListBoxSelection.js';
 import ListBoxTrigger from '../ListBox/next/ListBoxTrigger.js';
 import { ListBoxSize } from '../ListBox/ListBoxPropTypes.js';
-import { Space, Enter, Delete, Escape, Tab, Home, End } from '../../internal/keyboard/keys.js';
+import { Escape, Space, Enter, Delete, Tab, Home, End } from '../../internal/keyboard/keys.js';
 
 const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function FilterableMultiSelect(_ref, ref) {
   let {
@@ -151,7 +151,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
       case stateChangeTypes.keyDownArrowUp:
       case stateChangeTypes.keyDownHome:
       case stateChangeTypes.keyDownEnd:
-        setHighlightedIndex(changes.highlightedIndex !== undefined ? changes.highlightedIndex : null);
+        setHighlightedIndex(changes.highlightedIndex !== undefined ? changes.highlightedIndex : 0);
         if (stateChangeTypes.keyDownArrowDown === type && !isOpen) {
           handleOnMenuChange(true);
         }
@@ -182,8 +182,8 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
       handleOnMenuChange(false);
     }
   }
-  function clearInputValue() {
-    setInputValue('');
+  function clearInputValue(event) {
+    textInput.current.value.length === 1 || match(event, Escape) ? setInputValue('') : setInputValue(textInput.current.value);
     if (textInput.current) {
       textInput.current.focus();
     }
@@ -285,10 +285,10 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
               if (match(event, Delete) || match(event, Escape)) {
                 if (isOpen) {
                   handleOnMenuChange(true);
-                  clearInputValue();
+                  clearInputValue(event);
                   event.stopPropagation();
                 } else if (!isOpen) {
-                  clearInputValue();
+                  clearInputValue(event);
                   clearSelection();
                   event.stopPropagation();
                 }

package/es/components/MultiSelect/MultiSelect.js

@@ -255,6 +255,12 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
           const itemArray = document.querySelectorAll(`li.${prefix}--list-box__menu-item[role="option"]`);
           props.scrollIntoView(itemArray[highlightedIndex]);
         }
+        if (highlightedIndex === -1) {
+          return {
+            ...changes,
+            highlightedIndex: 0
+          };
+        }
         return changes;
       case ItemMouseMove:
         return {

package/es/components/Notification/Notification.js

@@ -510,6 +510,7 @@ function ActionableNotification(_ref6) {
   const [isOpen, setIsOpen] = useState(true);
   const prefix = usePrefix();
   const id = useId('actionable-notification');
+  const subtitleId = useId('actionable-notification-subtitle');
   const containerClassName = cx(className, {
     [`${prefix}--actionable-notification`]: true,
     [`${prefix}--actionable-notification--toast`]: !inline,
@@ -540,7 +541,7 @@ function ActionableNotification(_ref6) {
     ref: ref,
     role: role,
     className: containerClassName,
-    "aria-labelledby": title ? id : undefined
+    "aria-labelledby": title ? id : subtitleId
   }), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--actionable-notification__details`
   }, /*#__PURE__*/React__default.createElement(NotificationIcon, {
@@ -555,7 +556,8 @@ function ActionableNotification(_ref6) {
     className: `${prefix}--actionable-notification__title`,
     id: id
   }, title), subtitle && /*#__PURE__*/React__default.createElement("div", {
-    className: `${prefix}--actionable-notification__subtitle`
+    className: `${prefix}--actionable-notification__subtitle`,
+    id: subtitleId
   }, subtitle), children))), actionButtonLabel && /*#__PURE__*/React__default.createElement(NotificationActionButton, {
     onClick: onActionButtonClick,
     inline: inline

package/es/components/Slider/Slider.d.ts

@@ -270,6 +270,7 @@ export default class Slider extends PureComponent<SliderProps> {
         left: number;
         needsOnRelease: boolean;
         isValid: boolean;
+        isRtl: boolean;
     };
     thumbRef: React.RefObject<HTMLDivElement>;
     filledTrackRef: React.RefObject<HTMLDivElement>;

package/es/components/Slider/Slider.js

@@ -42,7 +42,8 @@ class Slider extends PureComponent {
       value: this.props.value,
       left: 0,
       needsOnRelease: false,
-      isValid: true
+      isValid: true,
+      isRtl: false
     });
     _defineProperty(this, "thumbRef", void 0);
     _defineProperty(this, "filledTrackRef", void 0);
@@ -284,7 +285,7 @@ class Slider extends PureComponent {
       // use the provided value or state's value to calculate it instead.
       let leftPercent;
       if (clientX != null) {
-        const leftOffset = clientX - (boundingRect?.left ?? 0);
+        const leftOffset = this.state.isRtl ? (boundingRect?.right ?? 0) - clientX : clientX - (boundingRect?.left ?? 0);
         leftPercent = leftOffset / width;
       } else {
         if (value == null) {
@@ -325,7 +326,8 @@ class Slider extends PureComponent {
       });
       this.setState({
         value,
-        left
+        left,
+        isRtl: document?.dir === 'rtl'
       });
     }
   }
@@ -342,11 +344,20 @@ class Slider extends PureComponent {
     // Fire onChange event handler if present, if there's a usable value, and
     // if the value is different from the last one
 
+    // Set alternative positioning if direction is 'rtl'
     if (this.thumbRef.current) {
-      this.thumbRef.current.style.left = `${this.state.left}%`;
+      if (this.state.isRtl) {
+        this.thumbRef.current.style.insetInlineStart = `calc(${this.state.left}% - 14px)`;
+      } else {
+        this.thumbRef.current.style.insetInlineStart = `${this.state.left}%`;
+      }
     }
     if (this.filledTrackRef.current) {
-      this.filledTrackRef.current.style.transform = `translate(0%, -50%) scaleX(${this.state.left / 100})`;
+      if (this.state.isRtl) {
+        this.filledTrackRef.current.style.transform = `translate(100%, -50%) scaleX(-${this.state.left / 100})`;
+      } else {
+        this.filledTrackRef.current.style.transform = `translate(0%, -50%) scaleX(${this.state.left / 100})`;
+      }
     }
     if (prevState.value !== this.state.value && typeof this.props.onChange === 'function') {
       this.props.onChange({

package/es/components/Tabs/Tabs.js

@@ -29,7 +29,7 @@ import { useMatchMedia } from '../../internal/useMatchMedia.js';
 import { matches, match } from '../../internal/keyboard/match.js';
 import { ArrowRight, ArrowLeft, Home, End, Delete } from '../../internal/keyboard/keys.js';
 
-var _ChevronLeft, _ChevronRight, _Close;
+var _ChevronLeft, _ChevronRight;
 
 // Used to manage the overall state of the Tabs
 
@@ -545,21 +545,19 @@ const Tab = /*#__PURE__*/forwardRef(function Tab(_ref5, forwardRef) {
     }
     onKeyDown?.(event);
   };
-  const DismissIcon =
-  /*#__PURE__*/
-  // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-  React__default.createElement("div", {
-    role: "button",
+  const DismissIcon = /*#__PURE__*/React__default.createElement("div", {
     tabIndex: -1,
     "aria-hidden": true,
     className: cx(`${prefix}--tabs__nav-item--close-icon`, {
       [`${prefix}--visually-hidden`]: !dismissable
     }),
     onClick: handleClose,
-    "aria-label": "Close tab",
     title: "Close tab",
     ref: dismissIconRef
-  }, _Close || (_Close = /*#__PURE__*/React__default.createElement(Close, null)));
+  }, /*#__PURE__*/React__default.createElement(Close, {
+    "aria-hidden": dismissable ? 'false' : 'true',
+    "aria-label": "Press delete to close tab"
+  }));
   const hasIcon = Icon ?? dismissable;
   return /*#__PURE__*/React__default.createElement(BaseComponent, _extends({}, rest, {
     "aria-controls": panelId,

package/es/components/Tag/Tag.Skeleton.js

@@ -18,10 +18,13 @@ function TagSkeleton(_ref) {
     ...rest
   } = _ref;
   const prefix = usePrefix();
+  const tagClasses = cx(`${prefix}--tag`, `${prefix}--skeleton`, className, {
+    [`${prefix}--tag--${size}`]: size,
+    // TODO: V12 - Remove this class
+    [`${prefix}--layout--size-${size}`]: size
+  });
   return /*#__PURE__*/React__default.createElement("span", _extends({
-    className: cx(`${prefix}--tag`, `${prefix}--skeleton`, className, {
-      [`${prefix}--tag--${size}`]: size
-    })
+    className: tagClasses
   }, rest));
 }
 TagSkeleton.propTypes = {