carbon-react 147.4.0 → 147.4.2

package/esm/components/date/__internal__/date-picker/date-picker.component.js

@@ -85,23 +85,27 @@ export const DatePicker = ({
     }
   };
   const handleOnDayKeyDown = (_day, _modifiers, ev) => {
-    // we need to manually handle this as the picker may be in a Portal
-    /* istanbul ignore else */
-    if (Events.isTabKey(ev) && !Events.isShiftKey(ev)) {
-      ev.preventDefault();
-      setOpen(false);
-      onPickerClose?.();
-      const input = inputElement.current?.querySelector("input");
-
+    // timeout added to prevent this handler from interfering with the useFocusPortalContent hook, when the date-range
+    // is used inside of a popover-container and it is the last focusable element of the popover-container
+    setTimeout(() => {
+      // we need to manually handle this as the picker may be in a Portal
       /* istanbul ignore else */
-      if (input) {
-        const elements = Array.from(document.querySelectorAll(defaultFocusableSelectors) || /* istanbul ignore next */[]);
-        const elementsInPicker = Array.from(ref.current?.querySelectorAll("button, [tabindex]") || /* istanbul ignore next */[]);
-        const filteredElements = elements.filter(el => Number(el.tabIndex) !== -1 && !elementsInPicker.includes(el));
-        const nextIndex = filteredElements.indexOf(input) + 1;
-        filteredElements[nextIndex]?.focus();
+      if (Events.isTabKey(ev) && !Events.isShiftKey(ev)) {
+        ev.preventDefault();
+        setOpen(false);
+        onPickerClose?.();
+        const input = inputElement.current?.querySelector("input");
+
+        /* istanbul ignore else */
+        if (input) {
+          const elements = Array.from(document.querySelectorAll(defaultFocusableSelectors) || /* istanbul ignore next */[]);
+          const elementsInPicker = Array.from(ref.current?.querySelectorAll("button, [tabindex]") || /* istanbul ignore next */[]);
+          const filteredElements = elements.filter(el => Number(el.tabIndex) !== -1 && !elementsInPicker.includes(el));
+          const nextIndex = filteredElements.indexOf(input) + 1;
+          filteredElements[nextIndex]?.focus();
+        }
       }
-    }
+    }, 0);
   };
   useEffect(() => {
     if (selectedDays) {

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

@@ -169,6 +169,11 @@ const StyledMenuItemWrapper = styled.a.attrs({
 
         a:hover,
         button:hover {
+          ${StyledButton} {
+            border-radius: 0;
+            background-color: transparent;
+          }
+
           ${!asDiv && css`
             background-color: var(--colorsComponentsMenuAutumnStandard600);
             color: var(--colorsComponentsMenuYang100);

package/lib/components/date/__internal__/date-picker/date-picker.component.js

@@ -94,23 +94,27 @@ const DatePicker = ({
     }
   };
   const handleOnDayKeyDown = (_day, _modifiers, ev) => {
-    // we need to manually handle this as the picker may be in a Portal
-    /* istanbul ignore else */
-    if (_events.default.isTabKey(ev) && !_events.default.isShiftKey(ev)) {
-      ev.preventDefault();
-      setOpen(false);
-      onPickerClose?.();
-      const input = inputElement.current?.querySelector("input");
-
+    // timeout added to prevent this handler from interfering with the useFocusPortalContent hook, when the date-range
+    // is used inside of a popover-container and it is the last focusable element of the popover-container
+    setTimeout(() => {
+      // we need to manually handle this as the picker may be in a Portal
       /* istanbul ignore else */
-      if (input) {
-        const elements = Array.from(document.querySelectorAll(_focusTrapUtils.defaultFocusableSelectors) || /* istanbul ignore next */[]);
-        const elementsInPicker = Array.from(ref.current?.querySelectorAll("button, [tabindex]") || /* istanbul ignore next */[]);
-        const filteredElements = elements.filter(el => Number(el.tabIndex) !== -1 && !elementsInPicker.includes(el));
-        const nextIndex = filteredElements.indexOf(input) + 1;
-        filteredElements[nextIndex]?.focus();
+      if (_events.default.isTabKey(ev) && !_events.default.isShiftKey(ev)) {
+        ev.preventDefault();
+        setOpen(false);
+        onPickerClose?.();
+        const input = inputElement.current?.querySelector("input");
+
+        /* istanbul ignore else */
+        if (input) {
+          const elements = Array.from(document.querySelectorAll(_focusTrapUtils.defaultFocusableSelectors) || /* istanbul ignore next */[]);
+          const elementsInPicker = Array.from(ref.current?.querySelectorAll("button, [tabindex]") || /* istanbul ignore next */[]);
+          const filteredElements = elements.filter(el => Number(el.tabIndex) !== -1 && !elementsInPicker.includes(el));
+          const nextIndex = filteredElements.indexOf(input) + 1;
+          filteredElements[nextIndex]?.focus();
+        }
       }
-    }
+    }, 0);
   };
   (0, _react.useEffect)(() => {
     if (selectedDays) {

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

@@ -178,6 +178,11 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
 
         a:hover,
         button:hover {
+          ${_button.default} {
+            border-radius: 0;
+            background-color: transparent;
+          }
+
           ${!asDiv && (0, _styledComponents.css)`
             background-color: var(--colorsComponentsMenuAutumnStandard600);
             color: var(--colorsComponentsMenuYang100);

package/package.json

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