@dmsi/wedgekit-react 0.0.501 → 0.0.502

package/dist/components/MobileDataGrid/index.cjs

@@ -1272,6 +1272,7 @@ var MenuOption = ({
   const actualRef = ref || internalRef;
   const menuId = (0, import_react6.useRef)(`menu-${uniqueId}`);
   const isMobile = useMatchesMobile();
+  const [isSubMenuHovered, setIsSubMenuHovered] = (0, import_react6.useState)(false);
   const handleMouseEnter = () => {
     if (subMenu && onSubMenuHover && !disabled) {
       onSubMenuHover(menuId.current, subMenuLevel);
@@ -1281,6 +1282,7 @@ var MenuOption = ({
     if (subMenu && onSubMenuLeave && !disabled) {
       onSubMenuLeave(subMenuLevel);
     }
+    setIsSubMenuHovered(false);
   };
   const handleMouseMove = () => {
     if (subMenu && onMouseMove && !disabled) {
@@ -1291,9 +1293,11 @@ var MenuOption = ({
     if (onSubMenuEnter) {
       onSubMenuEnter();
     }
+    setIsSubMenuHovered(true);
   };
   const additionalAttributes = {
-    "data-selected": selected || null
+    "data-selected": selected || null,
+    "data-submenu-hovered": isSubMenuHovered || null
   };
   const svgStyles = (0, import_clsx9.default)(
     "[&>svg]:shrink-0 [&>svg]:fill-icon-action-primary-normal"
@@ -1302,16 +1306,18 @@ var MenuOption = ({
   const normalStyles = variant === "normal" && !disabled && (0, import_clsx9.default)(
     "bg-transparent text-text-primary-normal",
     "hover:bg-background-action-secondary-hover",
-    "focus:bg-background-action-secondary-hover",
+    "focus-visible:bg-background-action-secondary-hover",
     "data-selected:bg-background-action-secondary-hover",
+    "data-submenu-hovered:bg-background-action-secondary-hover",
     "active:bg-background-action-secondary-active"
   );
   const normalDisabledStyles = variant === "normal" && disabled && (0, import_clsx9.default)("text-text-primary-disabled");
   const actionStyles = variant === "action" && !disabled && (0, import_clsx9.default)(
     "text-action-400 bg-transparent",
     "hover:bg-background-action-secondary-hover hover:text-text-action-hover",
-    "focus:bg-background-action-secondary-hover focus:text-text-action-hover",
+    "focus-visible:bg-background-action-secondary-hover focus-visible:text-text-action-hover",
     "data-selected:bg-background-action-secondary-active data-selected:text-text-action-active",
+    "data-submenu-hovered:bg-background-action-secondary-active data-submenu-hovered:text-text-action-active",
     "active:bg-background-action-secondary-active active:text-text-action-active"
   );
   const actionDisabledStyles = variant === "action" && disabled && (0, import_clsx9.default)("text-text-action-disabled");
@@ -1363,7 +1369,10 @@ var MenuOption = ({
       "div",
       {
         onMouseEnter: handleSubMenuEnter,
-        onMouseLeave: handleMouseLeave,
+        onMouseLeave: () => {
+          handleMouseLeave();
+          setIsSubMenuHovered(false);
+        },
         "data-submenu-parent": menuId.current,
         "data-menu-level": subMenuLevel + 1,
         children: subMenu({
@@ -1373,7 +1382,8 @@ var MenuOption = ({
           position: "right",
           subMenuLevel,
           mobileBackMenuOption,
-          mobileHide: isMobile && activeMenu !== menuId.current
+          mobileHide: isMobile && activeMenu !== menuId.current,
+          autoFocusOff: true
         })
       }
     )

package/dist/components/MobileDataGrid/index.css

@@ -3296,11 +3296,6 @@
       color: var(--color-text-action-critical-hover);
     }
   }
-  .focus\:text-text-action-hover {
-    &:focus {
-      color: var(--color-text-action-hover);
-    }
-  }
   .focus\:text-text-action-primary-hover {
     &:focus {
       color: var(--color-text-action-primary-hover);
@@ -3344,6 +3339,16 @@
       outline-style: none;
     }
   }
+  .focus-visible\:bg-background-action-secondary-hover {
+    &:focus-visible {
+      background-color: var(--color-background-action-secondary-hover);
+    }
+  }
+  .focus-visible\:text-text-action-hover {
+    &:focus-visible {
+      color: var(--color-text-action-hover);
+    }
+  }
   .focus-visible\:ring-2 {
     &:focus-visible {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -3796,6 +3801,21 @@
       }
     }
   }
+  .data-submenu-hovered\:bg-background-action-secondary-active {
+    &[data-submenu-hovered] {
+      background-color: var(--color-background-action-secondary-active);
+    }
+  }
+  .data-submenu-hovered\:bg-background-action-secondary-hover {
+    &[data-submenu-hovered] {
+      background-color: var(--color-background-action-secondary-hover);
+    }
+  }
+  .data-submenu-hovered\:text-text-action-active {
+    &[data-submenu-hovered] {
+      color: var(--color-text-action-active);
+    }
+  }
   .data-\[focus\]\:outline-1 {
     &[data-focus] {
       outline-style: var(--tw-outline-style);

package/dist/components/MobileDataGrid/index.js

@@ -1,15 +1,15 @@
 import {
   MobileDataGrid
-} from "../../chunk-LJWQEZUS.js";
+} from "../../chunk-QV3NANQC.js";
 import "../../chunk-M7INAUAJ.js";
-import "../../chunk-ELXVDRWS.js";
+import "../../chunk-D4TFZ2WM.js";
 import "../../chunk-3UUCDNX3.js";
 import "../../chunk-FJRYHJUV.js";
 import "../../chunk-BQNPOGD5.js";
 import "../../chunk-Y5GD2FJA.js";
-import "../../chunk-6XLESQ2U.js";
+import "../../chunk-B2O4TEOI.js";
 import "../../chunk-VOSQMHNF.js";
-import "../../chunk-YJGDVWTH.js";
+import "../../chunk-VS53C5ZD.js";
 import "../../chunk-S5ZJ3Q7P.js";
 import "../../chunk-MBZ55T2D.js";
 import "../../chunk-2IKT6IHB.js";
@@ -20,34 +20,34 @@ import "../../chunk-5YNEY3WO.js";
 import "../../chunk-5IFPG6TS.js";
 import "../../chunk-AJ5M6MVX.js";
 import "../../chunk-UI7P5J5S.js";
-import "../../chunk-56RPZLV7.js";
+import "../../chunk-5DQVYX6H.js";
 import "../../chunk-MDB26F6T.js";
 import "../../chunk-AT4AWD6B.js";
 import "../../chunk-EWGHVZL5.js";
+import "../../chunk-2TNHD4MQ.js";
 import "../../chunk-OWHPPZZA.js";
 import "../../chunk-L3BXRDLP.js";
 import "../../chunk-34VEVX5H.js";
 import "../../chunk-LB7UT6F3.js";
-import "../../chunk-2TNHD4MQ.js";
-import "../../chunk-BMPL6LCR.js";
+import "../../chunk-LJLHGLTS.js";
 import "../../chunk-4RJKB7LC.js";
+import "../../chunk-25RZP3VR.js";
 import "../../chunk-WVVEOCEH.js";
-import "../../chunk-CMMQTIVM.js";
+import "../../chunk-TAPYQBQU.js";
 import "../../chunk-AG43RS4Q.js";
-import "../../chunk-AKJUBFJK.js";
-import "../../chunk-SUSUNSVZ.js";
 import "../../chunk-SBRRNFOP.js";
-import "../../chunk-Y2GK27RX.js";
 import "../../chunk-QVWYTQKL.js";
-import "../../chunk-CHUKGR7S.js";
+import "../../chunk-SUSUNSVZ.js";
+import "../../chunk-75USUR3I.js";
+import "../../chunk-Y2GK27RX.js";
+import "../../chunk-F6RZ7MUE.js";
 import "../../chunk-TCMOGTPB.js";
 import "../../chunk-DVU5XV7L.js";
-import "../../chunk-KOU2TO3N.js";
+import "../../chunk-LKKFQLWD.js";
 import "../../chunk-HK4S6TRH.js";
 import "../../chunk-KPBG7D3V.js";
 import "../../chunk-HXGJVYGQ.js";
 import "../../chunk-WVUIIBRR.js";
-import "../../chunk-75USUR3I.js";
 import "../../chunk-PS6UJZVH.js";
 import "../../chunk-M7WHWZ2J.js";
 import "../../chunk-TMHOK37S.js";
@@ -58,12 +58,12 @@ import "../../chunk-5UH6QUFB.js";
 import "../../chunk-BYC6QID5.js";
 import "../../chunk-MUOYLXBF.js";
 import "../../chunk-KBJZUVLM.js";
-import "../../chunk-SPJ6V6WJ.js";
+import "../../chunk-BWBSDSA7.js";
 import "../../chunk-MXSJF6TW.js";
+import "../../chunk-45AHDOAU.js";
 import "../../chunk-WMPWWFUJ.js";
 import "../../chunk-TPXH53SA.js";
 import "../../chunk-NKUETCDA.js";
-import "../../chunk-45AHDOAU.js";
 import "../../chunk-7KWFEH56.js";
 import "../../chunk-ORMEWXMH.js";
 export {

package/dist/components/Modal.js

@@ -1,19 +1,19 @@
 "use client";
 import {
   Modal
-} from "../chunk-BMPL6LCR.js";
+} from "../chunk-LJLHGLTS.js";
 import "../chunk-4RJKB7LC.js";
+import "../chunk-25RZP3VR.js";
 import "../chunk-WVVEOCEH.js";
-import "../chunk-CMMQTIVM.js";
+import "../chunk-TAPYQBQU.js";
 import "../chunk-AG43RS4Q.js";
-import "../chunk-AKJUBFJK.js";
 import "../chunk-URYQ24NF.js";
 import "../chunk-VXWSAIB5.js";
 import "../chunk-R3EQIDBX.js";
 import "../chunk-5UH6QUFB.js";
 import "../chunk-MXSJF6TW.js";
-import "../chunk-NKUETCDA.js";
 import "../chunk-45AHDOAU.js";
+import "../chunk-NKUETCDA.js";
 import "../chunk-7KWFEH56.js";
 import "../chunk-ORMEWXMH.js";
 export {

package/dist/components/ModalButtons.js

@@ -1,8 +1,8 @@
 import {
   ModalButtons
-} from "../chunk-AKJUBFJK.js";
-import "../chunk-NKUETCDA.js";
+} from "../chunk-25RZP3VR.js";
 import "../chunk-45AHDOAU.js";
+import "../chunk-NKUETCDA.js";
 import "../chunk-7KWFEH56.js";
 import "../chunk-ORMEWXMH.js";
 export {

package/dist/components/ModalHeader.js

@@ -1,9 +1,9 @@
 import {
   ModalHeader
-} from "../chunk-CMMQTIVM.js";
+} from "../chunk-TAPYQBQU.js";
 import "../chunk-MXSJF6TW.js";
-import "../chunk-NKUETCDA.js";
 import "../chunk-45AHDOAU.js";
+import "../chunk-NKUETCDA.js";
 import "../chunk-7KWFEH56.js";
 import "../chunk-ORMEWXMH.js";
 export {

package/dist/components/NavigationTab.js

@@ -1,8 +1,8 @@
 import {
   NavigationTab
-} from "../chunk-QMMPHXVE.js";
-import "../chunk-NKUETCDA.js";
+} from "../chunk-MV6W7OMC.js";
 import "../chunk-45AHDOAU.js";
+import "../chunk-NKUETCDA.js";
 import "../chunk-7KWFEH56.js";
 import "../chunk-ORMEWXMH.js";
 export {

package/dist/components/NavigationTabs.js

@@ -1,9 +1,9 @@
 "use client";
 import {
   NavigationTab
-} from "../chunk-QMMPHXVE.js";
-import "../chunk-NKUETCDA.js";
+} from "../chunk-MV6W7OMC.js";
 import "../chunk-45AHDOAU.js";
+import "../chunk-NKUETCDA.js";
 import {
   componentGap
 } from "../chunk-7KWFEH56.js";

package/dist/components/NestedMenu.cjs

@@ -551,6 +551,7 @@ var MenuOption = ({
   const actualRef = ref || internalRef;
   const menuId = (0, import_react5.useRef)(`menu-${uniqueId}`);
   const isMobile = useMatchesMobile();
+  const [isSubMenuHovered, setIsSubMenuHovered] = (0, import_react5.useState)(false);
   const handleMouseEnter = () => {
     if (subMenu && onSubMenuHover && !disabled) {
       onSubMenuHover(menuId.current, subMenuLevel);
@@ -560,6 +561,7 @@ var MenuOption = ({
     if (subMenu && onSubMenuLeave && !disabled) {
       onSubMenuLeave(subMenuLevel);
     }
+    setIsSubMenuHovered(false);
   };
   const handleMouseMove = () => {
     if (subMenu && onMouseMove && !disabled) {
@@ -570,9 +572,11 @@ var MenuOption = ({
     if (onSubMenuEnter) {
       onSubMenuEnter();
     }
+    setIsSubMenuHovered(true);
   };
   const additionalAttributes = {
-    "data-selected": selected || null
+    "data-selected": selected || null,
+    "data-submenu-hovered": isSubMenuHovered || null
   };
   const svgStyles = (0, import_clsx6.default)(
     "[&>svg]:shrink-0 [&>svg]:fill-icon-action-primary-normal"
@@ -581,16 +585,18 @@ var MenuOption = ({
   const normalStyles = variant === "normal" && !disabled && (0, import_clsx6.default)(
     "bg-transparent text-text-primary-normal",
     "hover:bg-background-action-secondary-hover",
-    "focus:bg-background-action-secondary-hover",
+    "focus-visible:bg-background-action-secondary-hover",
     "data-selected:bg-background-action-secondary-hover",
+    "data-submenu-hovered:bg-background-action-secondary-hover",
     "active:bg-background-action-secondary-active"
   );
   const normalDisabledStyles = variant === "normal" && disabled && (0, import_clsx6.default)("text-text-primary-disabled");
   const actionStyles = variant === "action" && !disabled && (0, import_clsx6.default)(
     "text-action-400 bg-transparent",
     "hover:bg-background-action-secondary-hover hover:text-text-action-hover",
-    "focus:bg-background-action-secondary-hover focus:text-text-action-hover",
+    "focus-visible:bg-background-action-secondary-hover focus-visible:text-text-action-hover",
     "data-selected:bg-background-action-secondary-active data-selected:text-text-action-active",
+    "data-submenu-hovered:bg-background-action-secondary-active data-submenu-hovered:text-text-action-active",
     "active:bg-background-action-secondary-active active:text-text-action-active"
   );
   const actionDisabledStyles = variant === "action" && disabled && (0, import_clsx6.default)("text-text-action-disabled");
@@ -642,7 +648,10 @@ var MenuOption = ({
       "div",
       {
         onMouseEnter: handleSubMenuEnter,
-        onMouseLeave: handleMouseLeave,
+        onMouseLeave: () => {
+          handleMouseLeave();
+          setIsSubMenuHovered(false);
+        },
         "data-submenu-parent": menuId.current,
         "data-menu-level": subMenuLevel + 1,
         children: subMenu({
@@ -652,7 +661,8 @@ var MenuOption = ({
           position: "right",
           subMenuLevel,
           mobileBackMenuOption,
-          mobileHide: isMobile && activeMenu !== menuId.current
+          mobileHide: isMobile && activeMenu !== menuId.current,
+          autoFocusOff: true
         })
       }
     )

package/dist/components/NestedMenu.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   MenuOption
-} from "../chunk-KOU2TO3N.js";
+} from "../chunk-LKKFQLWD.js";
 import {
   Label
 } from "../chunk-HXGJVYGQ.js";
@@ -12,13 +12,13 @@ import {
 import "../chunk-VXWSAIB5.js";
 import "../chunk-R3EQIDBX.js";
 import "../chunk-5UH6QUFB.js";
+import {
+  Button
+} from "../chunk-45AHDOAU.js";
 import "../chunk-WMPWWFUJ.js";
 import {
   Icon
 } from "../chunk-NKUETCDA.js";
-import {
-  Button
-} from "../chunk-45AHDOAU.js";
 import "../chunk-7KWFEH56.js";
 import {
   __spreadValues

package/dist/components/Notification.js

@@ -2,6 +2,9 @@
 import {
   Heading3
 } from "../chunk-MXSJF6TW.js";
+import {
+  Button
+} from "../chunk-45AHDOAU.js";
 import {
   Paragraph
 } from "../chunk-WMPWWFUJ.js";
@@ -11,9 +14,6 @@ import {
 import {
   Icon
 } from "../chunk-NKUETCDA.js";
-import {
-  Button
-} from "../chunk-45AHDOAU.js";
 import "../chunk-7KWFEH56.js";
 import {
   __objRest,

package/dist/components/OptionPill.js

@@ -1,9 +1,9 @@
 import {
   OptionPill
-} from "../chunk-FWCVZWE6.js";
+} from "../chunk-GYEXSNFP.js";
 import "../chunk-HXGJVYGQ.js";
-import "../chunk-NKUETCDA.js";
 import "../chunk-45AHDOAU.js";
+import "../chunk-NKUETCDA.js";
 import "../chunk-7KWFEH56.js";
 import "../chunk-ORMEWXMH.js";
 export {

package/dist/components/PDFViewer/DownloadIcon.js

@@ -1,8 +1,8 @@
 import {
   DownloadIcon
-} from "../../chunk-56RPZLV7.js";
-import "../../chunk-NKUETCDA.js";
+} from "../../chunk-5DQVYX6H.js";
 import "../../chunk-45AHDOAU.js";
+import "../../chunk-NKUETCDA.js";
 import "../../chunk-7KWFEH56.js";
 import "../../chunk-ORMEWXMH.js";
 export {

package/dist/components/PDFViewer/PDFNavigation.js

@@ -1,11 +1,11 @@
 import {
   PdfNavigation
-} from "../../chunk-YJGDVWTH.js";
+} from "../../chunk-VS53C5ZD.js";
 import "../../chunk-MXSJF6TW.js";
+import "../../chunk-45AHDOAU.js";
 import "../../chunk-WMPWWFUJ.js";
 import "../../chunk-TPXH53SA.js";
 import "../../chunk-NKUETCDA.js";
-import "../../chunk-45AHDOAU.js";
 import "../../chunk-7KWFEH56.js";
 import "../../chunk-ORMEWXMH.js";
 export {

package/dist/components/PDFViewer/index.js

@@ -1,27 +1,27 @@
 "use client";
 import {
   PDFViewer
-} from "../../chunk-6XLESQ2U.js";
+} from "../../chunk-B2O4TEOI.js";
 import "../../chunk-VOSQMHNF.js";
-import "../../chunk-YJGDVWTH.js";
+import "../../chunk-VS53C5ZD.js";
 import "../../chunk-S5ZJ3Q7P.js";
-import "../../chunk-56RPZLV7.js";
-import "../../chunk-BMPL6LCR.js";
+import "../../chunk-5DQVYX6H.js";
+import "../../chunk-LJLHGLTS.js";
 import "../../chunk-4RJKB7LC.js";
+import "../../chunk-25RZP3VR.js";
 import "../../chunk-WVVEOCEH.js";
-import "../../chunk-CMMQTIVM.js";
+import "../../chunk-TAPYQBQU.js";
 import "../../chunk-AG43RS4Q.js";
-import "../../chunk-AKJUBFJK.js";
 import "../../chunk-SBRRNFOP.js";
 import "../../chunk-URYQ24NF.js";
 import "../../chunk-VXWSAIB5.js";
 import "../../chunk-R3EQIDBX.js";
 import "../../chunk-5UH6QUFB.js";
 import "../../chunk-MXSJF6TW.js";
+import "../../chunk-45AHDOAU.js";
 import "../../chunk-WMPWWFUJ.js";
 import "../../chunk-TPXH53SA.js";
 import "../../chunk-NKUETCDA.js";
-import "../../chunk-45AHDOAU.js";
 import "../../chunk-7KWFEH56.js";
 import "../../chunk-ORMEWXMH.js";
 export {

package/dist/components/ProductImagePreview/index.js

@@ -7,8 +7,8 @@ import "../../chunk-2IKT6IHB.js";
 import "../../chunk-YCDDBSVU.js";
 import "../../chunk-3X3Y4TMS.js";
 import "../../chunk-AT4AWD6B.js";
-import "../../chunk-Y2GK27RX.js";
 import "../../chunk-QVWYTQKL.js";
+import "../../chunk-Y2GK27RX.js";
 import "../../chunk-URYQ24NF.js";
 import "../../chunk-VXWSAIB5.js";
 import "../../chunk-R3EQIDBX.js";

package/dist/components/Stepper.js

@@ -4,13 +4,13 @@ import {
 } from "../chunk-KPBG7D3V.js";
 import "../chunk-HXGJVYGQ.js";
 import "../chunk-5UH6QUFB.js";
+import {
+  Button
+} from "../chunk-45AHDOAU.js";
 import "../chunk-WMPWWFUJ.js";
 import {
   Icon
 } from "../chunk-NKUETCDA.js";
-import {
-  Button
-} from "../chunk-45AHDOAU.js";
 import {
   componentGap
 } from "../chunk-7KWFEH56.js";

package/dist/components/Toast.js

@@ -2,15 +2,15 @@
 import {
   Heading3
 } from "../chunk-MXSJF6TW.js";
+import {
+  Button
+} from "../chunk-45AHDOAU.js";
 import {
   Paragraph
 } from "../chunk-WMPWWFUJ.js";
 import {
   Icon
 } from "../chunk-NKUETCDA.js";
-import {
-  Button
-} from "../chunk-45AHDOAU.js";
 import {
   componentGap,
   componentPadding,

package/dist/components/Upload.js

@@ -1,6 +1,9 @@
 import {
   Spinner
 } from "../chunk-SBRRNFOP.js";
+import {
+  Button
+} from "../chunk-45AHDOAU.js";
 import {
   Paragraph
 } from "../chunk-WMPWWFUJ.js";
@@ -10,9 +13,6 @@ import {
 import {
   Icon
 } from "../chunk-NKUETCDA.js";
-import {
-  Button
-} from "../chunk-45AHDOAU.js";
 import {
   componentGap
 } from "../chunk-7KWFEH56.js";

package/dist/components/index.cjs

@@ -877,6 +877,7 @@ var MenuOption = ({
   const actualRef = ref || internalRef;
   const menuId = (0, import_react6.useRef)(`menu-${uniqueId}`);
   const isMobile = useMatchesMobile();
+  const [isSubMenuHovered, setIsSubMenuHovered] = (0, import_react6.useState)(false);
   const handleMouseEnter = () => {
     if (subMenu && onSubMenuHover && !disabled) {
       onSubMenuHover(menuId.current, subMenuLevel);
@@ -886,6 +887,7 @@ var MenuOption = ({
     if (subMenu && onSubMenuLeave && !disabled) {
       onSubMenuLeave(subMenuLevel);
     }
+    setIsSubMenuHovered(false);
   };
   const handleMouseMove = () => {
     if (subMenu && onMouseMove && !disabled) {
@@ -896,9 +898,11 @@ var MenuOption = ({
     if (onSubMenuEnter) {
       onSubMenuEnter();
     }
+    setIsSubMenuHovered(true);
   };
   const additionalAttributes = {
-    "data-selected": selected || null
+    "data-selected": selected || null,
+    "data-submenu-hovered": isSubMenuHovered || null
   };
   const svgStyles = (0, import_clsx6.default)(
     "[&>svg]:shrink-0 [&>svg]:fill-icon-action-primary-normal"
@@ -907,16 +911,18 @@ var MenuOption = ({
   const normalStyles = variant === "normal" && !disabled && (0, import_clsx6.default)(
     "bg-transparent text-text-primary-normal",
     "hover:bg-background-action-secondary-hover",
-    "focus:bg-background-action-secondary-hover",
+    "focus-visible:bg-background-action-secondary-hover",
     "data-selected:bg-background-action-secondary-hover",
+    "data-submenu-hovered:bg-background-action-secondary-hover",
     "active:bg-background-action-secondary-active"
   );
   const normalDisabledStyles = variant === "normal" && disabled && (0, import_clsx6.default)("text-text-primary-disabled");
   const actionStyles = variant === "action" && !disabled && (0, import_clsx6.default)(
     "text-action-400 bg-transparent",
     "hover:bg-background-action-secondary-hover hover:text-text-action-hover",
-    "focus:bg-background-action-secondary-hover focus:text-text-action-hover",
+    "focus-visible:bg-background-action-secondary-hover focus-visible:text-text-action-hover",
     "data-selected:bg-background-action-secondary-active data-selected:text-text-action-active",
+    "data-submenu-hovered:bg-background-action-secondary-active data-submenu-hovered:text-text-action-active",
     "active:bg-background-action-secondary-active active:text-text-action-active"
   );
   const actionDisabledStyles = variant === "action" && disabled && (0, import_clsx6.default)("text-text-action-disabled");
@@ -968,7 +974,10 @@ var MenuOption = ({
       "div",
       {
         onMouseEnter: handleSubMenuEnter,
-        onMouseLeave: handleMouseLeave,
+        onMouseLeave: () => {
+          handleMouseLeave();
+          setIsSubMenuHovered(false);
+        },
         "data-submenu-parent": menuId.current,
         "data-menu-level": subMenuLevel + 1,
         children: subMenu({
@@ -978,7 +987,8 @@ var MenuOption = ({
           position: "right",
           subMenuLevel,
           mobileBackMenuOption,
-          mobileHide: isMobile && activeMenu !== menuId.current
+          mobileHide: isMobile && activeMenu !== menuId.current,
+          autoFocusOff: true
         })
       }
     )

package/dist/components/index.css

@@ -3296,11 +3296,6 @@
       color: var(--color-text-action-critical-hover);
     }
   }
-  .focus\:text-text-action-hover {
-    &:focus {
-      color: var(--color-text-action-hover);
-    }
-  }
   .focus\:text-text-action-primary-hover {
     &:focus {
       color: var(--color-text-action-primary-hover);
@@ -3344,6 +3339,16 @@
       outline-style: none;
     }
   }
+  .focus-visible\:bg-background-action-secondary-hover {
+    &:focus-visible {
+      background-color: var(--color-background-action-secondary-hover);
+    }
+  }
+  .focus-visible\:text-text-action-hover {
+    &:focus-visible {
+      color: var(--color-text-action-hover);
+    }
+  }
   .focus-visible\:ring-2 {
     &:focus-visible {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -3796,6 +3801,21 @@
       }
     }
   }
+  .data-submenu-hovered\:bg-background-action-secondary-active {
+    &[data-submenu-hovered] {
+      background-color: var(--color-background-action-secondary-active);
+    }
+  }
+  .data-submenu-hovered\:bg-background-action-secondary-hover {
+    &[data-submenu-hovered] {
+      background-color: var(--color-background-action-secondary-hover);
+    }
+  }
+  .data-submenu-hovered\:text-text-action-active {
+    &[data-submenu-hovered] {
+      color: var(--color-text-action-active);
+    }
+  }
   .data-\[focus\]\:outline-1 {
     &[data-focus] {
       outline-style: var(--tw-outline-style);