@carbon/react 1.37.0 → 1.38.0

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/Notification/Notification.js

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

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({

package/lib/components/Tabs/Tabs.js

@@ -40,7 +40,7 @@ var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _ChevronLeft, _ChevronRight, _Close;
+var _ChevronLeft, _ChevronRight;
 
 // Used to manage the overall state of the Tabs
 
@@ -556,21 +556,19 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(_ref5, forwardRef) {
     }
     onKeyDown?.(event);
   };
-  const DismissIcon =
-  /*#__PURE__*/
-  // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-  React__default["default"].createElement("div", {
-    role: "button",
+  const DismissIcon = /*#__PURE__*/React__default["default"].createElement("div", {
     tabIndex: -1,
     "aria-hidden": true,
     className: cx__default["default"](`${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["default"].createElement(iconsReact.Close, null)));
+  }, /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, {
+    "aria-hidden": dismissable ? 'false' : 'true',
+    "aria-label": "Press delete to close tab"
+  }));
   const hasIcon = Icon ?? dismissable;
   return /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({}, rest, {
     "aria-controls": panelId,

package/lib/components/Tag/Tag.Skeleton.js

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

package/lib/components/Tag/Tag.js

@@ -47,7 +47,7 @@ const Tag = _ref => {
     type,
     filter,
     renderIcon: CustomIconElement,
-    title,
+    title = 'Clear filter',
     disabled,
     onClose,
     size,
@@ -85,7 +85,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["default"].createElement(iconsReact.Close, null))));
   }

package/lib/components/Text/Text.js

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

package/lib/components/TextInput/PasswordInput.js

@@ -76,7 +76,9 @@ const PasswordInput = /*#__PURE__*/React__default["default"].forwardRef(function
     [`${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/lib/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/lib/components/Theme/index.js

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

package/lib/components/TreeView/TreeNode.js

@@ -197,8 +197,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/lib/components/UIShell/HeaderMenu.js

@@ -67,20 +67,20 @@ class HeaderMenu extends React__default["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.
      */
     _rollupPluginBabelHelpers.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/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/lib/components/UIShell/HeaderMenuItem.js

@@ -23,7 +23,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-function HeaderMenuItemRenderFunction(_ref, ref) {
+const HeaderMenuItem = /*#__PURE__*/React.forwardRef(function HeaderMenuItemRenderFunction(_ref, ref) {
   let {
     className,
     isActive,
@@ -55,8 +55,7 @@ function HeaderMenuItemRenderFunction(_ref, ref) {
   }), /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${prefix}--text-truncate--end`
   }, children)));
-}
-const HeaderMenuItem = /*#__PURE__*/React.forwardRef(HeaderMenuItemRenderFunction);
+});
 HeaderMenuItem.displayName = 'HeaderMenuItem';
 HeaderMenuItem.propTypes = {
   /**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.37.0",
+  "version": "1.38.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -47,9 +47,9 @@
   "dependencies": {
     "@babel/runtime": "^7.18.3",
     "@carbon/feature-flags": "^0.16.0",
-    "@carbon/icons-react": "^11.26.0",
+    "@carbon/icons-react": "^11.27.0",
     "@carbon/layout": "^11.19.0",
-    "@carbon/styles": "^1.37.0",
+    "@carbon/styles": "^1.38.0",
     "@carbon/telemetry": "0.1.0",
     "classnames": "2.3.2",
     "copy-to-clipboard": "^3.3.1",
@@ -77,7 +77,7 @@
     "@babel/preset-react": "^7.22.3",
     "@babel/preset-typescript": "^7.21.5",
     "@carbon/test-utils": "^10.30.0",
-    "@carbon/themes": "^11.24.0",
+    "@carbon/themes": "^11.25.0",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
@@ -139,5 +139,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "5078eb5204b21763244768af3b0b283551561d47"
+  "gitHead": "33f414ff39064f1c432898ab8204b89b7b02cfb4"
 }