@carbon/react 1.37.0 → 1.38.0

package/es/components/Tag/Tag.js

@@ -37,7 +37,7 @@ const Tag = _ref => {
     type,
     filter,
     renderIcon: CustomIconElement,
-    title,
+    title = 'Clear filter',
     disabled,
     onClose,
     size,
@@ -75,7 +75,7 @@ const Tag = _ref => {
       className: `${prefix}--tag__close-icon`,
       onClick: handleClose,
       disabled: disabled,
-      "aria-labelledby": tagId,
+      "aria-label": title,
       title: title
     }, _Close || (_Close = /*#__PURE__*/React__default.createElement(Close, null))));
   }

package/es/components/Text/Text.js

@@ -14,7 +14,7 @@ function Text(_ref) {
   let {
     as,
     children,
-    dir = 'auto',
+    dir,
     ...rest
   } = _ref;
   // TODO: Update with context typing once its been converted to TS

package/es/components/TextInput/PasswordInput.js

@@ -66,7 +66,9 @@ const PasswordInput = /*#__PURE__*/React__default.forwardRef(function PasswordIn
     [`${prefix}--text-input--light`]: light,
     [`${prefix}--text-input--invalid`]: normalizedProps.invalid,
     [`${prefix}--text-input--warning`]: normalizedProps.warn,
-    [`${prefix}--text-input--${size}`]: size
+    [`${prefix}--text-input--${size}`]: size,
+    // TODO: V12 - Remove this class
+    [`${prefix}--layout--size-${size}`]: size
   });
   const sharedTextInputProps = {
     id,

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

@@ -5,26 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 import PropTypes from 'prop-types';
-import React, { ElementType, type PropsWithChildren } from 'react';
+import React, { ElementType } from 'react';
 import { PolymorphicProps } from '../../types/common';
 interface GlobalThemeProps {
     theme?: 'white' | 'g10' | 'g90' | 'g100';
+    children?: React.ReactNode;
 }
 export declare const ThemeContext: React.Context<GlobalThemeProps>;
-export declare function GlobalTheme({ children, theme, }: PropsWithChildren<GlobalThemeProps>): JSX.Element;
-export declare namespace GlobalTheme {
-    var propTypes: {
-        /**
-         * Provide child elements to be rendered inside of `GlobalTheme`, this is
-         * typically the root of your app
-         */
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        /**
-         * Specify the global theme for your app
-         */
-        theme: PropTypes.Requireable<string>;
-    };
-}
+export declare const GlobalTheme: React.ForwardRefExoticComponent<GlobalThemeProps & React.RefAttributes<unknown>>;
 type ThemeBaseProps = GlobalThemeProps & {
     className?: string;
 };

package/es/components/Theme/index.js

@@ -15,7 +15,7 @@ import { LayerContext } from '../Layer/LayerContext.js';
 const ThemeContext = /*#__PURE__*/React__default.createContext({
   theme: 'white'
 });
-function GlobalTheme(_ref) {
+const GlobalTheme = /*#__PURE__*/React__default.forwardRef(function GlobalTheme(_ref, ref) {
   let {
     children,
     theme
@@ -25,10 +25,13 @@ function GlobalTheme(_ref) {
       theme
     };
   }, [theme]);
+  const childrenWithProps = /*#__PURE__*/React__default.cloneElement(children, {
+    ref: ref
+  });
   return /*#__PURE__*/React__default.createElement(ThemeContext.Provider, {
     value: value
-  }, children);
-}
+  }, childrenWithProps);
+});
 GlobalTheme.propTypes = {
   /**
    * Provide child elements to be rendered inside of `GlobalTheme`, this is

package/es/components/TreeView/TreeNode.js

@@ -187,8 +187,8 @@ function TreeNode(_ref) {
       return depth + 2.5;
     };
     if (currentNodeLabel.current) {
-      currentNodeLabel.current.style.marginLeft = `-${calcOffset()}rem`;
-      currentNodeLabel.current.style.paddingLeft = `${calcOffset()}rem`;
+      currentNodeLabel.current.style.marginInlineStart = `-${calcOffset()}rem`;
+      currentNodeLabel.current.style.paddingInlineStart = `${calcOffset()}rem`;
     }
 
     // sync props and state

package/es/components/UIShell/HeaderMenu.js

@@ -57,20 +57,20 @@ class HeaderMenu extends React__default.Component {
     });
     /**
      * Handle our blur event from our underlying menuitems. Will mostly be used
-     * for toggling the expansion status of our menu in response to a user
-     * clicking off of the menu or menubar.
+     * for closing our menu in response to a user clicking off or tabbing out of
+     * the menu or menubar.
      */
     _defineProperty(this, "handleOnBlur", event => {
-      // Rough guess for a blur event that is triggered outside of our menu or
-      // menubar context
-      const itemTriggeredBlur = this.items.find(element => element === event.relatedTarget);
-      if (event.relatedTarget && (event.relatedTarget.getAttribute('href') && event.relatedTarget.getAttribute('href') !== '#' || itemTriggeredBlur)) {
-        return;
+      // Close the menu on blur when the related target is not a sibling menu item
+      // or a child in a submenu
+      const siblingItemBlurredTo = this.items.find(element => element === event.relatedTarget);
+      const childItemBlurredTo = this._subMenus.current?.contains(event.relatedTarget);
+      if (!siblingItemBlurredTo && !childItemBlurredTo) {
+        this.setState({
+          expanded: false,
+          selectedIndex: null
+        });
       }
-      this.setState({
-        expanded: false,
-        selectedIndex: null
-      });
     });
     /**
      * ref handler for our menu button. If we are supplied a `focusRef` prop, we also

package/es/components/UIShell/HeaderMenuItem.d.ts

@@ -4,7 +4,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, { type ComponentProps, type ReactNode, ElementType } from 'react';
+import { type ComponentProps, type ForwardedRef, type ReactNode, ElementType, WeakValidationMap } from 'react';
 import { LinkProps } from './Link';
 type HeaderMenuItemProps<E extends ElementType> = LinkProps<E> & {
     className?: string | undefined;
@@ -15,8 +15,12 @@ type HeaderMenuItemProps<E extends ElementType> = LinkProps<E> & {
     role?: ComponentProps<'li'>['role'];
     tabIndex?: number | undefined;
 };
-declare const HeaderMenuItem: (<E extends React.ElementType<any> = "a">(props: HeaderMenuItemProps<E>) => JSX.Element) & {
-    displayName?: string | undefined;
-    propTypes?: React.WeakValidationMap<HeaderMenuItemProps<any>> | undefined;
-};
+export interface HeaderMenuItemComponent {
+    <E extends ElementType = 'a'>(props: HeaderMenuItemProps<E> & {
+        ref?: ForwardedRef<ElementType>;
+    }): JSX.Element | null;
+    displayName?: string;
+    propTypes?: WeakValidationMap<HeaderMenuItemProps<any>>;
+}
+declare const HeaderMenuItem: HeaderMenuItemComponent;
 export default HeaderMenuItem;

package/es/components/UIShell/HeaderMenuItem.js

@@ -13,7 +13,7 @@ import Link, { LinkPropTypes } from './Link.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import deprecate from '../../prop-types/deprecate.js';
 
-function HeaderMenuItemRenderFunction(_ref, ref) {
+const HeaderMenuItem = /*#__PURE__*/forwardRef(function HeaderMenuItemRenderFunction(_ref, ref) {
   let {
     className,
     isActive,
@@ -45,8 +45,7 @@ function HeaderMenuItemRenderFunction(_ref, ref) {
   }), /*#__PURE__*/React__default.createElement("span", {
     className: `${prefix}--text-truncate--end`
   }, children)));
-}
-const HeaderMenuItem = /*#__PURE__*/forwardRef(HeaderMenuItemRenderFunction);
+});
 HeaderMenuItem.displayName = 'HeaderMenuItem';
 HeaderMenuItem.propTypes = {
   /**

package/lib/components/DataTable/DataTable.js

@@ -271,7 +271,7 @@ class DataTable extends React__default["default"].Component {
           checked: row.isSelected,
           onSelect: events.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/lib/components/DataTable/Table.js

@@ -71,6 +71,7 @@ const Table = _ref => {
     descriptionId
   } = React.useContext(TableContext.TableContext);
   const prefix = usePrefix.usePrefix();
+  const [isScrollable, setIsScrollable] = React.useState(false);
   const tableRef = React.useRef(null);
   const componentClass = cx__default["default"](`${prefix}--data-table`, className, {
     [`${prefix}--data-table--${size}`]: size,
@@ -109,6 +110,22 @@ const Table = _ref => {
   const debouncedSetTableAlignment = debounce__default["default"](setTableAlignment, 100);
   useEvent.useWindowEvent('resize', debouncedSetTableAlignment);
 
+  // Used to set a tabIndex when the Table is horizontally scrollable
+  const setTabIndex = React.useCallback(() => {
+    const tableContainer = tableRef?.current?.parentNode;
+    const tableHeader = tableRef?.current?.firstChild;
+    if (tableHeader?.scrollWidth > tableContainer?.clientWidth) {
+      setIsScrollable(true);
+    } else {
+      setIsScrollable(false);
+    }
+  }, []);
+  const debouncedSetTabIndex = debounce__default["default"](setTabIndex, 100);
+  useEvent.useWindowEvent('resize', debouncedSetTabIndex);
+  React.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(() => {
@@ -120,6 +137,9 @@ const Table = _ref => {
   }, [setTableAlignment, size]);
   const table = /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--data-table-content`
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    ,
+    tabIndex: isScrollable ? 0 : undefined
   }, /*#__PURE__*/React__default["default"].createElement("table", _rollupPluginBabelHelpers["extends"]({
     "aria-labelledby": titleId,
     "aria-describedby": descriptionId

package/lib/components/Grid/CSSGrid.js

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

package/lib/components/Grid/ColumnHang.js

@@ -23,7 +23,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 /**
  * 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/lib/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/lib/components/Grid/GridContext.js

@@ -67,7 +67,7 @@ GridSettings.propTypes = {
    */
   children: PropTypes__default["default"].node,
   /**
-   * Specify the grid mode for the GridContext
+   * Specify the gutter mode for the GridContext
    */
   mode: PropTypes__default["default"].oneOf(gridModes).isRequired,
   /**

package/lib/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/lib/components/Heading/index.js

@@ -9,6 +9,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var PropTypes = require('prop-types');
 var React = require('react');
 
@@ -18,7 +19,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const HeadingContext = /*#__PURE__*/React__default["default"].createContext(1);
-function Section(_ref) {
+const Section = /*#__PURE__*/React__default["default"].forwardRef(function Section(_ref, ref) {
   let {
     as: BaseComponent = 'section',
     level: levelOverride,
@@ -29,8 +30,10 @@ function Section(_ref) {
   const BaseComponentAsAny = BaseComponent;
   return /*#__PURE__*/React__default["default"].createElement(HeadingContext.Provider, {
     value: Math.min(level, 6)
-  }, /*#__PURE__*/React__default["default"].createElement(BaseComponentAsAny, rest));
-}
+  }, /*#__PURE__*/React__default["default"].createElement(BaseComponentAsAny, _rollupPluginBabelHelpers["extends"]({
+    ref: ref
+  }, rest)));
+});
 Section.propTypes = {
   /**
    * Provide an alternative tag or component to use instead of the default
@@ -50,10 +53,12 @@ Section.propTypes = {
    */
   level: PropTypes__default["default"].number
 };
-function Heading(props) {
+const Heading = /*#__PURE__*/React__default["default"].forwardRef(function Heading(props, ref) {
   const HeadingIntrinsic = `h${React__default["default"].useContext(HeadingContext)}`;
-  return /*#__PURE__*/React__default["default"].createElement(HeadingIntrinsic, props);
-}
+  return /*#__PURE__*/React__default["default"].createElement(HeadingIntrinsic, _rollupPluginBabelHelpers["extends"]({
+    ref: ref
+  }, props));
+});
 Heading.propTypes = {
   /**
    * Specify the content that will be placed in the component

package/lib/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/lib/components/Icon/Icon.Skeleton.js

@@ -27,12 +27,9 @@ const IconSkeleton = _ref => {
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
-  const props = {
-    ...rest
-  };
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: cx__default["default"](`${prefix}--icon--skeleton`, className)
-  }, props));
+  }, rest));
 };
 IconSkeleton.propTypes = {
   /**

package/lib/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/lib/components/IconButton/index.js

@@ -39,6 +39,7 @@ const IconButton = /*#__PURE__*/React__default["default"].forwardRef(function Ic
     leaveDelayMs = 100,
     wrapperClasses,
     size,
+    isSelected,
     ...rest
   } = props;
   const prefix = usePrefix.usePrefix();
@@ -58,7 +59,9 @@ const IconButton = /*#__PURE__*/React__default["default"].forwardRef(function Ic
     kind: kind,
     ref: ref,
     size: size,
-    className: cx__default["default"](`${prefix}--btn--icon-only`, className)
+    className: cx__default["default"](`${prefix}--btn--icon-only`, {
+      [`${prefix}--btn--selected`]: isSelected
+    }, className)
   }), children));
 });
 IconButton.propTypes = {
@@ -90,6 +93,11 @@ IconButton.propTypes = {
    * Specify the duration in milliseconds to delay before displaying the tooltip
    */
   enterDelayMs: PropTypes__default["default"].number,
+  /**
+   * Specify whether the IconButton is currently selected
+   */
+
+  isSelected: PropTypes__default["default"].bool,
   /**
    * Specify the type of button to be used as the base for the IconButton
    */

package/lib/components/Layer/index.js

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

package/lib/components/ListBox/ListBoxMenuItem.js

@@ -24,10 +24,11 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 function useIsTruncated(ref) {
   const [isTruncated, setIsTruncated] = React.useState(false);
   React.useEffect(() => {
+    const element = ref.current;
     const {
       offsetWidth,
       scrollWidth
-    } = ref.current;
+    } = element.lastElementChild?.lastElementChild || element;
     setIsTruncated(offsetWidth < scrollWidth);
   }, [ref, setIsTruncated]);
   return isTruncated;

package/lib/components/Menu/Menu.js

@@ -17,6 +17,7 @@ var ReactDOM = require('react-dom');
 var useMergedRefs = require('../../internal/useMergedRefs.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var MenuContext = require('./MenuContext.js');
+var useLayoutDirection = require('../LayoutDirection/useLayoutDirection.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
 
@@ -63,6 +64,11 @@ const Menu = /*#__PURE__*/React__default["default"].forwardRef(function Menu(_re
   const ref = useMergedRefs.useMergedRefs([forwardRef, menu]);
   const [position, setPosition] = React.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.useLayoutDirection();
   function returnFocus() {
     if (focusReturn.current) {
       focusReturn.current.focus();
@@ -72,8 +78,14 @@ const Menu = /*#__PURE__*/React__default["default"].forwardRef(function Menu(_re
     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/lib/components/Menu/MenuItem.js

@@ -13,12 +13,13 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
-var icons = require('@carbon/react/icons');
+var iconsReact = require('@carbon/icons-react');
 var useControllableState = require('../../internal/useControllableState.js');
 var useMergedRefs = require('../../internal/useMergedRefs.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var Menu = require('./Menu.js');
 var MenuContext = require('./MenuContext.js');
+var useLayoutDirection = require('../LayoutDirection/useLayoutDirection.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
 
@@ -28,7 +29,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _CaretRight;
+var _CaretLeft, _CaretRight;
 const hoverIntentDelay = 150; // in ms
 
 const MenuItem = /*#__PURE__*/React__default["default"].forwardRef(function MenuItem(_ref, forwardRef) {
@@ -51,6 +52,7 @@ const MenuItem = /*#__PURE__*/React__default["default"].forwardRef(function Menu
     x: -1,
     y: -1
   });
+  const [isRtl, setRtl] = React.useState(false);
   const hasChildren = Boolean(children);
   const [submenuOpen, setSubmenuOpen] = React.useState(false);
   const hoverIntentTimeout = React.useRef(null);
@@ -72,10 +74,17 @@ const MenuItem = /*#__PURE__*/React__default["default"].forwardRef(function Menu
       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() {
@@ -130,6 +139,18 @@ const MenuItem = /*#__PURE__*/React__default["default"].forwardRef(function Menu
     registerItem();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+
+  // Set RTL based on document direction or `LayoutDirection`
+  const {
+    direction
+  } = useLayoutDirection.useLayoutDirection();
+  React.useEffect(() => {
+    if (document?.dir === 'rtl' || direction === 'rtl') {
+      setRtl(true);
+    } else {
+      setRtl(false);
+    }
+  }, [direction]);
   return /*#__PURE__*/React__default["default"].createElement("li", _rollupPluginBabelHelpers["extends"]({
     role: "menuitem"
   }, rest, {
@@ -151,7 +172,7 @@ const MenuItem = /*#__PURE__*/React__default["default"].forwardRef(function Menu
     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`
-  }, _CaretRight || (_CaretRight = /*#__PURE__*/React__default["default"].createElement(icons.CaretRight, null))), /*#__PURE__*/React__default["default"].createElement(Menu.Menu, {
+  }, isRtl ? _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, {
     label: label,
     open: submenuOpen,
     onClose: () => {
@@ -232,7 +253,7 @@ const MenuItemSelectable = /*#__PURE__*/React__default["default"].forwardRef(fun
     className: classNames,
     role: "menuitemcheckbox",
     "aria-checked": checked,
-    renderIcon: checked && icons.Checkmark,
+    renderIcon: checked && iconsReact.Checkmark,
     onClick: handleClick
   }));
 });
@@ -335,7 +356,7 @@ const MenuItemRadioGroup = /*#__PURE__*/React__default["default"].forwardRef(fun
     label: itemToString(item),
     role: "menuitemradio",
     "aria-checked": item === selection,
-    renderIcon: item === selection && icons.Checkmark,
+    renderIcon: item === selection && iconsReact.Checkmark,
     onClick: e => {
       handleClick(item, e);
     }

package/lib/components/MenuButton/index.js

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