@carbon/react 1.37.0-rc.1 → 1.38.0-rc.0

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/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/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

package/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -163,7 +163,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
       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);
         }
@@ -194,8 +194,8 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
       handleOnMenuChange(false);
     }
   }
-  function clearInputValue() {
-    setInputValue('');
+  function clearInputValue(event) {
+    textInput.current.value.length === 1 || match.match(event, keys.Escape) ? setInputValue('') : setInputValue(textInput.current.value);
     if (textInput.current) {
       textInput.current.focus();
     }
@@ -297,10 +297,10 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
               if (match.match(event, keys.Delete) || match.match(event, keys.Escape)) {
                 if (isOpen) {
                   handleOnMenuChange(true);
-                  clearInputValue();
+                  clearInputValue(event);
                   event.stopPropagation();
                 } else if (!isOpen) {
-                  clearInputValue();
+                  clearInputValue(event);
                   clearSelection();
                   event.stopPropagation();
                 }

package/lib/components/MultiSelect/MultiSelect.js

@@ -266,6 +266,12 @@ const MultiSelect = /*#__PURE__*/React__default["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/lib/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/lib/components/Slider/Slider.js

@@ -53,7 +53,8 @@ class Slider extends React.PureComponent {
       value: this.props.value,
       left: 0,
       needsOnRelease: false,
-      isValid: true
+      isValid: true,
+      isRtl: false
     });
     _rollupPluginBabelHelpers.defineProperty(this, "thumbRef", void 0);
     _rollupPluginBabelHelpers.defineProperty(this, "filledTrackRef", void 0);
@@ -295,7 +296,7 @@ class Slider extends React.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) {
@@ -336,7 +337,8 @@ class Slider extends React.PureComponent {
       });
       this.setState({
         value,
-        left
+        left,
+        isRtl: document?.dir === 'rtl'
       });
     }
   }
@@ -353,11 +355,20 @@ class Slider extends React.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({