carbon-react 152.5.0 → 152.5.1

package/esm/components/link/link.component.js

@@ -36,6 +36,13 @@ export const Link = /*#__PURE__*/React.forwardRef(({
     batchSelectionDisabled
   } = useContext(BatchSelectionContext);
   const isDisabled = disabled || batchSelectionDisabled;
+  const setRefs = React.useCallback(reference => {
+    if (!ref) return;
+    if (typeof ref === "object") ref.current = reference;
+    if (typeof ref === "function") {
+      ref(reference);
+    }
+  }, [ref]);
   const renderLinkIcon = (currentAlignment = "left") => {
     const hasProperAlignment = icon && iconAlign === currentAlignment;
     return hasProperAlignment ? /*#__PURE__*/React.createElement(Icon, {
@@ -59,7 +66,7 @@ export const Link = /*#__PURE__*/React.forwardRef(({
     onClick,
     disabled: isDisabled,
     target,
-    ref,
+    ref: setRefs,
     href,
     rel,
     "aria-label": ariaLabel,

package/esm/components/menu/menu-item/menu-item.component.js

@@ -1,5 +1,5 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useRef, useEffect, useContext } from "react";
+import React, { useRef, useEffect, useContext, useState, useLayoutEffect } from "react";
 import invariant from "invariant";
 import { defaultFocusableSelectors as focusableSelectors } from "../../../__internal__/focus-trap/focus-trap-utils";
 import { filterStyledSystemPaddingProps } from "../../../style/utils";
@@ -63,8 +63,14 @@ export const MenuItem = ({
   } = submenuContext;
   const focusFromMenu = focusId === menuItemId.current;
   const focusFromSubmenu = submenuFocusId ? submenuFocusId === menuItemId.current : undefined;
-  const ref = useRef(null);
-  const firstFocusableChild = ref.current?.querySelector(focusableSelectors) ?? null;
+  const [ref, setRef] = useState(null);
+  const [firstFocusableChild, setFirstFocusableChild] = useState(null);
+  useLayoutEffect(() => {
+    const firstFocusable = ref?.querySelector(focusableSelectors) ?? null;
+    if (firstFocusable !== firstFocusableChild) {
+      setFirstFocusableChild(firstFocusable);
+    }
+  }, [ref]);
   useEffect(() => {
     const id = menuItemId.current;
 
@@ -85,7 +91,7 @@ export const MenuItem = ({
         firstFocusableChild.focus();
         return;
       }
-      ref.current?.focus();
+      ref?.focus();
     }
   }, [firstFocusableChild, focusFromMenu, focusFromSubmenu]);
   const handleFocus = event => {
@@ -99,7 +105,7 @@ export const MenuItem = ({
   const handleKeyDown = event => {
     onKeyDown?.(event);
     if (Events.isEscKey(event)) {
-      ref.current?.focus();
+      ref?.focus();
     }
     handleSubmenuKeyDown?.(event);
   };
@@ -114,7 +120,7 @@ export const MenuItem = ({
     selected,
     onKeyDown: !inFullscreenView ? handleKeyDown : undefined,
     overrideColor,
-    ref
+    ref: setRef
   };
   if (overriddenVariant === "alternate" && isChildOfSegment && variant === "alternate" && ["white", "black"].includes(menuType)) {
     elementProps.overrideColor = true;
@@ -153,7 +159,7 @@ export const MenuItem = ({
     }, rest), children));
   }
   const paddingProps = filterStyledSystemPaddingProps(rest);
-  const hasInput = !!ref.current?.querySelector("[data-element='input']");
+  const hasInput = !!ref?.querySelector("[data-element='input']");
   return /*#__PURE__*/React.createElement(StyledMenuItem, _extends({
     "data-component": "menu-item",
     "data-element": dataElement,

package/lib/components/link/link.component.js

@@ -45,6 +45,13 @@ const Link = exports.Link = /*#__PURE__*/_react.default.forwardRef(({
     batchSelectionDisabled
   } = (0, _react.useContext)(_batchSelection.default);
   const isDisabled = disabled || batchSelectionDisabled;
+  const setRefs = _react.default.useCallback(reference => {
+    if (!ref) return;
+    if (typeof ref === "object") ref.current = reference;
+    if (typeof ref === "function") {
+      ref(reference);
+    }
+  }, [ref]);
   const renderLinkIcon = (currentAlignment = "left") => {
     const hasProperAlignment = icon && iconAlign === currentAlignment;
     return hasProperAlignment ? /*#__PURE__*/_react.default.createElement(_icon.default, {
@@ -68,7 +75,7 @@ const Link = exports.Link = /*#__PURE__*/_react.default.forwardRef(({
     onClick,
     disabled: isDisabled,
     target,
-    ref,
+    ref: setRefs,
     href,
     rel,
     "aria-label": ariaLabel,

package/lib/components/menu/menu-item/menu-item.component.js

@@ -72,8 +72,14 @@ const MenuItem = ({
   } = submenuContext;
   const focusFromMenu = focusId === menuItemId.current;
   const focusFromSubmenu = submenuFocusId ? submenuFocusId === menuItemId.current : undefined;
-  const ref = (0, _react.useRef)(null);
-  const firstFocusableChild = ref.current?.querySelector(_focusTrapUtils.defaultFocusableSelectors) ?? null;
+  const [ref, setRef] = (0, _react.useState)(null);
+  const [firstFocusableChild, setFirstFocusableChild] = (0, _react.useState)(null);
+  (0, _react.useLayoutEffect)(() => {
+    const firstFocusable = ref?.querySelector(_focusTrapUtils.defaultFocusableSelectors) ?? null;
+    if (firstFocusable !== firstFocusableChild) {
+      setFirstFocusableChild(firstFocusable);
+    }
+  }, [ref]);
   (0, _react.useEffect)(() => {
     const id = menuItemId.current;
 
@@ -94,7 +100,7 @@ const MenuItem = ({
         firstFocusableChild.focus();
         return;
       }
-      ref.current?.focus();
+      ref?.focus();
     }
   }, [firstFocusableChild, focusFromMenu, focusFromSubmenu]);
   const handleFocus = event => {
@@ -108,7 +114,7 @@ const MenuItem = ({
   const handleKeyDown = event => {
     onKeyDown?.(event);
     if (_events.default.isEscKey(event)) {
-      ref.current?.focus();
+      ref?.focus();
     }
     handleSubmenuKeyDown?.(event);
   };
@@ -123,7 +129,7 @@ const MenuItem = ({
     selected,
     onKeyDown: !inFullscreenView ? handleKeyDown : undefined,
     overrideColor,
-    ref
+    ref: setRef
   };
   if (overriddenVariant === "alternate" && isChildOfSegment && variant === "alternate" && ["white", "black"].includes(menuType)) {
     elementProps.overrideColor = true;
@@ -162,7 +168,7 @@ const MenuItem = ({
     }, rest), children));
   }
   const paddingProps = (0, _utils.filterStyledSystemPaddingProps)(rest);
-  const hasInput = !!ref.current?.querySelector("[data-element='input']");
+  const hasInput = !!ref?.querySelector("[data-element='input']");
   return /*#__PURE__*/_react.default.createElement(_menu2.StyledMenuItem, _extends({
     "data-component": "menu-item",
     "data-element": dataElement,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "152.5.0",
+  "version": "152.5.1",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",