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

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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.37.0-rc.1",
+  "version": "1.38.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -18,7 +18,8 @@
     "index.scss",
     "icons/index.js",
     "icons/index.esm.js",
-    "icons/package.json"
+    "icons/package.json",
+    ".playwright/INTERNAL_AVT_REPORT_DO_NOT_USE.json"
   ],
   "keywords": [
     "ibm",
@@ -46,9 +47,9 @@
   "dependencies": {
     "@babel/runtime": "^7.18.3",
     "@carbon/feature-flags": "^0.16.0",
-    "@carbon/icons-react": "^11.25.1-rc.0",
+    "@carbon/icons-react": "^11.27.0-rc.0",
     "@carbon/layout": "^11.19.0",
-    "@carbon/styles": "^1.36.1-rc.0",
+    "@carbon/styles": "^1.38.0-rc.0",
     "@carbon/telemetry": "0.1.0",
     "classnames": "2.3.2",
     "copy-to-clipboard": "^3.3.1",
@@ -76,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-rc.0",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
@@ -138,5 +139,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "30f17c6417c64542e422b7959e6633d8ffa0e061"
+  "gitHead": "0a2c591ac9ac56286ab465334be3e1322d4c86cb"
 }