@dmsi/wedgekit-react 0.0.501 → 0.0.503

package/dist/{chunk-LJWQEZUS.js → chunk-C2YTC2CN.js}

@@ -24,13 +24,13 @@ import {
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "./chunk-CHUKGR7S.js";
+} from "./chunk-F6RZ7MUE.js";
 import {
   Menu
 } from "./chunk-TCMOGTPB.js";
 import {
   MenuOption
-} from "./chunk-KOU2TO3N.js";
+} from "./chunk-LKKFQLWD.js";
 import {
   Search
 } from "./chunk-HK4S6TRH.js";

package/dist/{chunk-CHUKGR7S.js → chunk-F6RZ7MUE.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-DVU5XV7L.js";
 import {
   MenuOption
-} from "./chunk-KOU2TO3N.js";
+} from "./chunk-LKKFQLWD.js";
 import {
   Search
 } from "./chunk-HK4S6TRH.js";

package/dist/{chunk-KOU2TO3N.js → chunk-LKKFQLWD.js}

@@ -26,7 +26,7 @@ import {
 
 // src/components/MenuOption.tsx
 import clsx from "clsx";
-import { useId, useRef } from "react";
+import { useId, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var MenuOption = ({
   id,
@@ -60,6 +60,7 @@ var MenuOption = ({
   const actualRef = ref || internalRef;
   const menuId = useRef(`menu-${uniqueId}`);
   const isMobile = useMatchesMobile();
+  const [isSubMenuHovered, setIsSubMenuHovered] = useState(false);
   const handleMouseEnter = () => {
     if (subMenu && onSubMenuHover && !disabled) {
       onSubMenuHover(menuId.current, subMenuLevel);
@@ -69,6 +70,7 @@ var MenuOption = ({
     if (subMenu && onSubMenuLeave && !disabled) {
       onSubMenuLeave(subMenuLevel);
     }
+    setIsSubMenuHovered(false);
   };
   const handleMouseMove = () => {
     if (subMenu && onMouseMove && !disabled) {
@@ -79,9 +81,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 = clsx(
     "[&>svg]:shrink-0 [&>svg]:fill-icon-action-primary-normal"
@@ -90,16 +94,18 @@ var MenuOption = ({
   const normalStyles = variant === "normal" && !disabled && clsx(
     "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 && clsx("text-text-primary-disabled");
   const actionStyles = variant === "action" && !disabled && clsx(
     "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 && clsx("text-text-action-disabled");
@@ -151,7 +157,10 @@ var MenuOption = ({
       "div",
       {
         onMouseEnter: handleSubMenuEnter,
-        onMouseLeave: handleMouseLeave,
+        onMouseLeave: () => {
+          handleMouseLeave();
+          setIsSubMenuHovered(false);
+        },
         "data-submenu-parent": menuId.current,
         "data-menu-level": subMenuLevel + 1,
         children: subMenu({
@@ -161,7 +170,8 @@ var MenuOption = ({
           position: "right",
           subMenuLevel,
           mobileBackMenuOption,
-          mobileHide: isMobile && activeMenu !== menuId.current
+          mobileHide: isMobile && activeMenu !== menuId.current,
+          autoFocusOff: true
         })
       }
     )

package/dist/components/CalendarRange.cjs

@@ -853,6 +853,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);
@@ -862,6 +863,7 @@ var MenuOption = ({
     if (subMenu && onSubMenuLeave && !disabled) {
       onSubMenuLeave(subMenuLevel);
     }
+    setIsSubMenuHovered(false);
   };
   const handleMouseMove = () => {
     if (subMenu && onMouseMove && !disabled) {
@@ -872,9 +874,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"
@@ -883,16 +887,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");
@@ -944,7 +950,10 @@ var MenuOption = ({
       "div",
       {
         onMouseEnter: handleSubMenuEnter,
-        onMouseLeave: handleMouseLeave,
+        onMouseLeave: () => {
+          handleMouseLeave();
+          setIsSubMenuHovered(false);
+        },
         "data-submenu-parent": menuId.current,
         "data-menu-level": subMenuLevel + 1,
         children: subMenu({
@@ -954,7 +963,8 @@ var MenuOption = ({
           position: "right",
           subMenuLevel,
           mobileBackMenuOption,
-          mobileHide: isMobile && activeMenu !== menuId.current
+          mobileHide: isMobile && activeMenu !== menuId.current,
+          autoFocusOff: true
         })
       }
     )

package/dist/components/CalendarRange.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/CalendarRange.js

@@ -2,7 +2,7 @@ import {
   CalendarRange,
   CalendarRange_default,
   isWeekend
-} from "../chunk-LJWQEZUS.js";
+} from "../chunk-C2YTC2CN.js";
 import "../chunk-M7INAUAJ.js";
 import "../chunk-ELXVDRWS.js";
 import "../chunk-3UUCDNX3.js";
@@ -41,10 +41,10 @@ import "../chunk-SUSUNSVZ.js";
 import "../chunk-SBRRNFOP.js";
 import "../chunk-Y2GK27RX.js";
 import "../chunk-QVWYTQKL.js";
-import "../chunk-CHUKGR7S.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";

package/dist/components/DataGrid/ColumnSelectorHeaderCell/ColumnSelectorMenuOption.cjs

@@ -847,6 +847,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);
@@ -856,6 +857,7 @@ var MenuOption = ({
     if (subMenu && onSubMenuLeave && !disabled) {
       onSubMenuLeave(subMenuLevel);
     }
+    setIsSubMenuHovered(false);
   };
   const handleMouseMove = () => {
     if (subMenu && onMouseMove && !disabled) {
@@ -866,9 +868,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"
@@ -877,16 +881,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");
@@ -938,7 +944,10 @@ var MenuOption = ({
       "div",
       {
         onMouseEnter: handleSubMenuEnter,
-        onMouseLeave: handleMouseLeave,
+        onMouseLeave: () => {
+          handleMouseLeave();
+          setIsSubMenuHovered(false);
+        },
         "data-submenu-parent": menuId.current,
         "data-menu-level": subMenuLevel + 1,
         children: subMenu({
@@ -948,7 +957,8 @@ var MenuOption = ({
           position: "right",
           subMenuLevel,
           mobileBackMenuOption,
-          mobileHide: isMobile && activeMenu !== menuId.current
+          mobileHide: isMobile && activeMenu !== menuId.current,
+          autoFocusOff: true
         })
       }
     )

package/dist/components/DataGrid/ColumnSelectorHeaderCell/ColumnSelectorMenuOption.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/DataGrid/ColumnSelectorHeaderCell/ColumnSelectorMenuOption.js

@@ -1,6 +1,6 @@
 import {
   ColumnSelectorMenuOption
-} from "../../../chunk-LJWQEZUS.js";
+} from "../../../chunk-C2YTC2CN.js";
 import "../../../chunk-M7INAUAJ.js";
 import "../../../chunk-ELXVDRWS.js";
 import "../../../chunk-3UUCDNX3.js";
@@ -39,10 +39,10 @@ import "../../../chunk-SUSUNSVZ.js";
 import "../../../chunk-SBRRNFOP.js";
 import "../../../chunk-Y2GK27RX.js";
 import "../../../chunk-QVWYTQKL.js";
-import "../../../chunk-CHUKGR7S.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";

package/dist/components/DataGrid/ColumnSelectorHeaderCell/index.cjs

@@ -847,6 +847,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);
@@ -856,6 +857,7 @@ var MenuOption = ({
     if (subMenu && onSubMenuLeave && !disabled) {
       onSubMenuLeave(subMenuLevel);
     }
+    setIsSubMenuHovered(false);
   };
   const handleMouseMove = () => {
     if (subMenu && onMouseMove && !disabled) {
@@ -866,9 +868,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"
@@ -877,16 +881,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");
@@ -938,7 +944,10 @@ var MenuOption = ({
       "div",
       {
         onMouseEnter: handleSubMenuEnter,
-        onMouseLeave: handleMouseLeave,
+        onMouseLeave: () => {
+          handleMouseLeave();
+          setIsSubMenuHovered(false);
+        },
         "data-submenu-parent": menuId.current,
         "data-menu-level": subMenuLevel + 1,
         children: subMenu({
@@ -948,7 +957,8 @@ var MenuOption = ({
           position: "right",
           subMenuLevel,
           mobileBackMenuOption,
-          mobileHide: isMobile && activeMenu !== menuId.current
+          mobileHide: isMobile && activeMenu !== menuId.current,
+          autoFocusOff: true
         })
       }
     )

package/dist/components/DataGrid/ColumnSelectorHeaderCell/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/DataGrid/ColumnSelectorHeaderCell/index.js

@@ -1,6 +1,6 @@
 import {
   ColumnSelectorHeaderCell
-} from "../../../chunk-LJWQEZUS.js";
+} from "../../../chunk-C2YTC2CN.js";
 import "../../../chunk-M7INAUAJ.js";
 import "../../../chunk-ELXVDRWS.js";
 import "../../../chunk-3UUCDNX3.js";
@@ -39,10 +39,10 @@ import "../../../chunk-SUSUNSVZ.js";
 import "../../../chunk-SBRRNFOP.js";
 import "../../../chunk-Y2GK27RX.js";
 import "../../../chunk-QVWYTQKL.js";
-import "../../../chunk-CHUKGR7S.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";

package/dist/components/DataGrid/PinnedColumns.cjs

@@ -847,6 +847,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);
@@ -856,6 +857,7 @@ var MenuOption = ({
     if (subMenu && onSubMenuLeave && !disabled) {
       onSubMenuLeave(subMenuLevel);
     }
+    setIsSubMenuHovered(false);
   };
   const handleMouseMove = () => {
     if (subMenu && onMouseMove && !disabled) {
@@ -866,9 +868,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"
@@ -877,16 +881,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");
@@ -938,7 +944,10 @@ var MenuOption = ({
       "div",
       {
         onMouseEnter: handleSubMenuEnter,
-        onMouseLeave: handleMouseLeave,
+        onMouseLeave: () => {
+          handleMouseLeave();
+          setIsSubMenuHovered(false);
+        },
         "data-submenu-parent": menuId.current,
         "data-menu-level": subMenuLevel + 1,
         children: subMenu({
@@ -948,7 +957,8 @@ var MenuOption = ({
           position: "right",
           subMenuLevel,
           mobileBackMenuOption,
-          mobileHide: isMobile && activeMenu !== menuId.current
+          mobileHide: isMobile && activeMenu !== menuId.current,
+          autoFocusOff: true
         })
       }
     )

package/dist/components/DataGrid/PinnedColumns.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);