@carbon/react 1.62.0-rc.0 → 1.62.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/.playwright/INTERNAL_AVT_REPORT_DO_NOT_USE.json +1053 -1012
  2. package/es/components/Dropdown/Dropdown.js +6 -7
  3. package/es/components/Menu/Menu.js +1 -0
  4. package/es/components/Tabs/Tabs.js +4 -2
  5. package/lib/components/Dropdown/Dropdown.js +5 -6
  6. package/lib/components/Menu/Menu.js +1 -0
  7. package/lib/components/Tabs/Tabs.js +4 -2
  8. package/package.json +2 -2
package/es/components/Dropdown/Dropdown.js CHANGED
@@ -6,7 +6,7 @@
6
6
  */
7
7
 
8
8
  import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
9
- import React__default, { useEffect, useContext, useRef, useState } from 'react';
9
+ import React__default, { useEffect, useContext, useRef, useState, useMemo } from 'react';
10
10
  import { useSelect } from 'downshift';
11
11
  import cx from 'classnames';
12
12
  import PropTypes from 'prop-types';
@@ -263,8 +263,9 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
263
263
  }
264
264
  }
265
265
  };
266
- const menuProps = getMenuProps();
267
- const menuRef = mergeRefs(menuProps.ref, refs.setFloating);
266
+ const menuProps = useMemo(() => getMenuProps({
267
+ ref: autoAlign ? refs.setFloating : null
268
+ }), [autoAlign]);
268
269
 
269
270
  // Slug is always size `mini`
270
271
  let normalizedSlug;
@@ -289,7 +290,7 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
289
290
  warnText: warnText,
290
291
  light: light,
291
292
  isOpen: isOpen,
292
- ref: refs.setReference,
293
+ ref: autoAlign ? refs.setReference : null,
293
294
  id: id
294
295
  }, invalid && /*#__PURE__*/React__default.createElement(WarningFilled, {
295
296
  className: `${prefix}--list-box__invalid-icon`
@@ -312,9 +313,7 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
312
313
  }, selectedItem ? renderSelectedItem ? renderSelectedItem(selectedItem) : itemToString(selectedItem) : label), /*#__PURE__*/React__default.createElement(ListBox.MenuIcon, {
313
314
  isOpen: isOpen,
314
315
  translateWithId: translateWithId
315
- })), normalizedSlug, /*#__PURE__*/React__default.createElement(ListBox.Menu, _extends({}, menuProps, {
316
- ref: menuRef
317
- }), isOpen && items.map((item, index) => {
316
+ })), normalizedSlug, /*#__PURE__*/React__default.createElement(ListBox.Menu, menuProps, isOpen && items.map((item, index) => {
318
317
  const isObject = item !== null && typeof item === 'object';
319
318
  const itemProps = getItemProps({
320
319
  item,
package/es/components/Menu/Menu.js CHANGED
@@ -133,6 +133,7 @@ const Menu = /*#__PURE__*/forwardRef(function Menu(_ref, forwardRef) {
133
133
  }
134
134
  }
135
135
  function focusItem(e) {
136
+ e?.preventDefault();
136
137
  const currentItem = focusableItems.findIndex(item => item.ref?.current?.contains(document.activeElement));
137
138
  let indexToFocus = currentItem;
138
139
 
package/es/components/Tabs/Tabs.js CHANGED
@@ -790,8 +790,10 @@ const Tab = /*#__PURE__*/forwardRef(function Tab(_ref8, forwardRef) {
790
790
  useLayoutEffect(() => {
791
791
  function handler() {
792
792
  const elementTabId = document.getElementById(`${id}`) || tabRef.current;
793
- const newElement = elementTabId?.getElementsByClassName(`${prefix}--tabs__nav-item-label`)[0];
794
- isEllipsisActive(newElement);
793
+ if (elementTabId?.closest(`.${prefix}--tabs--vertical`)) {
794
+ const newElement = elementTabId?.getElementsByClassName(`${prefix}--tabs__nav-item-label`)[0];
795
+ isEllipsisActive(newElement);
796
+ }
795
797
  }
796
798
  handler();
797
799
  window.addEventListener('resize', handler);
package/lib/components/Dropdown/Dropdown.js CHANGED
@@ -273,8 +273,9 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
273
273
  }
274
274
  }
275
275
  };
276
- const menuProps = getMenuProps();
277
- const menuRef = mergeRefs["default"](menuProps.ref, refs.setFloating);
276
+ const menuProps = React.useMemo(() => getMenuProps({
277
+ ref: autoAlign ? refs.setFloating : null
278
+ }), [autoAlign]);
278
279
 
279
280
  // Slug is always size `mini`
280
281
  let normalizedSlug;
@@ -299,7 +300,7 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
299
300
  warnText: warnText,
300
301
  light: light,
301
302
  isOpen: isOpen,
302
- ref: refs.setReference,
303
+ ref: autoAlign ? refs.setReference : null,
303
304
  id: id
304
305
  }, invalid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
305
306
  className: `${prefix}--list-box__invalid-icon`
@@ -322,9 +323,7 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
322
323
  }, selectedItem ? renderSelectedItem ? renderSelectedItem(selectedItem) : itemToString(selectedItem) : label), /*#__PURE__*/React__default["default"].createElement(index["default"].MenuIcon, {
323
324
  isOpen: isOpen,
324
325
  translateWithId: translateWithId
325
- })), normalizedSlug, /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, _rollupPluginBabelHelpers["extends"]({}, menuProps, {
326
- ref: menuRef
327
- }), isOpen && items.map((item, index$1) => {
326
+ })), normalizedSlug, /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, menuProps, isOpen && items.map((item, index$1) => {
328
327
  const isObject = item !== null && typeof item === 'object';
329
328
  const itemProps = getItemProps({
330
329
  item,
package/lib/components/Menu/Menu.js CHANGED
@@ -143,6 +143,7 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(_ref, forwardRef) {
143
143
  }
144
144
  }
145
145
  function focusItem(e) {
146
+ e?.preventDefault();
146
147
  const currentItem = focusableItems.findIndex(item => item.ref?.current?.contains(document.activeElement));
147
148
  let indexToFocus = currentItem;
148
149
 
package/lib/components/Tabs/Tabs.js CHANGED
@@ -801,8 +801,10 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(_ref8, forwardRef) {
801
801
  React.useLayoutEffect(() => {
802
802
  function handler() {
803
803
  const elementTabId = document.getElementById(`${id}`) || tabRef.current;
804
- const newElement = elementTabId?.getElementsByClassName(`${prefix}--tabs__nav-item-label`)[0];
805
- isEllipsisActive(newElement);
804
+ if (elementTabId?.closest(`.${prefix}--tabs--vertical`)) {
805
+ const newElement = elementTabId?.getElementsByClassName(`${prefix}--tabs__nav-item-label`)[0];
806
+ isEllipsisActive(newElement);
807
+ }
806
808
  }
807
809
  handler();
808
810
  window.addEventListener('resize', handler);
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@carbon/react",
3
3
  "description": "React components for the Carbon Design System",
4
- "version": "1.62.0-rc.0",
4
+ "version": "1.62.1",
5
5
  "license": "Apache-2.0",
6
6
  "main": "lib/index.js",
7
7
  "module": "es/index.js",
@@ -141,5 +141,5 @@
141
141
  "**/*.scss",
142
142
  "**/*.css"
143
143
  ],
144
- "gitHead": "b12ac2e1e7eefce31f97062f5cc0c4a1579012e7"
144
+ "gitHead": "14d9d64e3d9dfc98c8c36841952ff0faec627d03"
145
145
  }