@dmsi/wedgekit-react 0.0.501 → 0.0.502

package/dist/components/index.js

@@ -2,9 +2,9 @@ import {
   DataGrid,
   DateInput,
   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 {
   ProductImagePreview
@@ -15,9 +15,9 @@ import {
 } from "../chunk-Y5GD2FJA.js";
 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-MBZ55T2D.js";
 import "../chunk-2IKT6IHB.js";
@@ -28,12 +28,15 @@ 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 {
   Tooltip
 } from "../chunk-MDB26F6T.js";
 import "../chunk-AT4AWD6B.js";
 import "../chunk-EWGHVZL5.js";
+import {
+  Select
+} from "../chunk-2TNHD4MQ.js";
 import {
   SimpleTable
 } from "../chunk-OWHPPZZA.js";
@@ -46,34 +49,34 @@ import {
 import {
   Pagination
 } from "../chunk-LB7UT6F3.js";
-import {
-  Select
-} from "../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-SBRRNFOP.js";
+import "../chunk-QVWYTQKL.js";
 import {
   ListGroup
 } from "../chunk-SUSUNSVZ.js";
-import "../chunk-SBRRNFOP.js";
+import {
+  EmptyCartIcon
+} from "../chunk-75USUR3I.js";
 import "../chunk-Y2GK27RX.js";
-import "../chunk-QVWYTQKL.js";
 import {
   DataCellHeader,
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "../chunk-CHUKGR7S.js";
+} from "../chunk-F6RZ7MUE.js";
 import {
   Menu
 } from "../chunk-TCMOGTPB.js";
 import "../chunk-DVU5XV7L.js";
 import {
   MenuOption
-} from "../chunk-KOU2TO3N.js";
+} from "../chunk-LKKFQLWD.js";
 import {
   Search
 } from "../chunk-HK4S6TRH.js";
@@ -84,9 +87,6 @@ import {
   Label
 } from "../chunk-HXGJVYGQ.js";
 import "../chunk-WVUIIBRR.js";
-import {
-  EmptyCartIcon
-} from "../chunk-75USUR3I.js";
 import "../chunk-PS6UJZVH.js";
 import {
   Checkbox
@@ -109,8 +109,11 @@ import {
 } from "../chunk-KBJZUVLM.js";
 import {
   Alert
-} from "../chunk-SPJ6V6WJ.js";
+} from "../chunk-BWBSDSA7.js";
 import "../chunk-MXSJF6TW.js";
+import {
+  Button
+} from "../chunk-45AHDOAU.js";
 import {
   Paragraph
 } from "../chunk-WMPWWFUJ.js";
@@ -118,9 +121,6 @@ import "../chunk-TPXH53SA.js";
 import {
   Icon
 } from "../chunk-NKUETCDA.js";
-import {
-  Button
-} from "../chunk-45AHDOAU.js";
 import "../chunk-7KWFEH56.js";
 import "../chunk-ORMEWXMH.js";
 export {

package/dist/index.css

@@ -3274,11 +3274,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);
@@ -3322,6 +3317,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);
@@ -3774,6 +3779,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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dmsi/wedgekit-react",
   "private": false,
-  "version": "0.0.501",
+  "version": "0.0.502",
   "type": "module",
   "scripts": {
     "build": "tsup",

package/src/components/MenuOption.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import clsx from "clsx";
-import { PropsWithChildren, ReactNode, RefObject, useId, useRef } from "react";
+import { PropsWithChildren, ReactNode, RefObject, useId, useRef, useState } from "react";
 import { baseTransition, componentGap, componentPadding, layoutGroupGap } from "../classNames";
 import { AsProps } from "../types";
 import { Label, Tags } from "./Label";
@@ -35,6 +35,7 @@ type BaseProps = PropsWithChildren<{
           subMenuLevel: number;
           mobileBackMenuOption?: () => ReactNode;
           mobileHide?: boolean;
+          autoFocusOff?: boolean;
         }) => ReactNode;
         subMenuLevel?: number;
         onSubMenuHover: (menuId: string, level: number) => void;
@@ -110,6 +111,7 @@ export const MenuOption = ({
   const actualRef = (ref || internalRef) as RefObject<HTMLDivElement>;
   const menuId = useRef(`menu-${uniqueId}`);
   const isMobile = useMatchesMobile();
+  const [isSubMenuHovered, setIsSubMenuHovered] = useState(false);
 
   const handleMouseEnter = () => {
     if (subMenu && onSubMenuHover && !disabled) {
@@ -121,6 +123,8 @@ export const MenuOption = ({
     if (subMenu && onSubMenuLeave && !disabled) {
       onSubMenuLeave(subMenuLevel);
     }
+    
+    setIsSubMenuHovered(false);
   };
 
   const handleMouseMove = () => {
@@ -133,10 +137,12 @@ export const MenuOption = ({
     if (onSubMenuEnter) {
       onSubMenuEnter();
     }
+    setIsSubMenuHovered(true);
   };
 
   const additionalAttributes = {
     "data-selected": selected || null,
+    "data-submenu-hovered": isSubMenuHovered || null,
   };
 
   const svgStyles = clsx(
@@ -151,8 +157,9 @@ export const MenuOption = ({
     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",
     );
 
@@ -165,8 +172,9 @@ export const MenuOption = ({
     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",
     );
 
@@ -244,7 +252,10 @@ export const MenuOption = ({
       {subMenu && (
         <div
           onMouseEnter={handleSubMenuEnter}
-          onMouseLeave={handleMouseLeave}
+          onMouseLeave={() => {
+            handleMouseLeave();
+            setIsSubMenuHovered(false);
+          }}
           data-submenu-parent={menuId.current}
           data-menu-level={subMenuLevel + 1}
         >
@@ -256,6 +267,7 @@ export const MenuOption = ({
             subMenuLevel,
             mobileBackMenuOption,
             mobileHide: isMobile && activeMenu !== menuId.current,
+            autoFocusOff: true,
           })}
         </div>
       )}

package/dist/{chunk-AKJUBFJK.js → chunk-25RZP3VR.js}

@@ -1,9 +1,9 @@
-import {
-  Icon
-} from "./chunk-NKUETCDA.js";
 import {
   Button
 } from "./chunk-45AHDOAU.js";
+import {
+  Icon
+} from "./chunk-NKUETCDA.js";
 import {
   layoutGroupGap,
   layoutPaddding

package/dist/{chunk-56RPZLV7.js → chunk-5DQVYX6H.js}

@@ -1,9 +1,9 @@
-import {
-  Icon
-} from "./chunk-NKUETCDA.js";
 import {
   Button
 } from "./chunk-45AHDOAU.js";
+import {
+  Icon
+} from "./chunk-NKUETCDA.js";
 
 // src/components/PDFViewer/DownloadIcon.tsx
 import { jsx } from "react/jsx-runtime";

package/dist/{chunk-SPJ6V6WJ.js → chunk-BWBSDSA7.js}

@@ -1,6 +1,9 @@
 import {
   Heading2
 } from "./chunk-MXSJF6TW.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 {
   __objRest,
   __spreadProps,

package/dist/{chunk-FWCVZWE6.js → chunk-GYEXSNFP.js}

@@ -1,12 +1,12 @@
 import {
   Label
 } from "./chunk-HXGJVYGQ.js";
-import {
-  Icon
-} from "./chunk-NKUETCDA.js";
 import {
   Button
 } from "./chunk-45AHDOAU.js";
+import {
+  Icon
+} from "./chunk-NKUETCDA.js";
 import {
   baseTransition,
   componentGap,

package/dist/{chunk-QMMPHXVE.js → chunk-MV6W7OMC.js}

@@ -1,9 +1,9 @@
-import {
-  Icon
-} from "./chunk-NKUETCDA.js";
 import {
   Button
 } from "./chunk-45AHDOAU.js";
+import {
+  Icon
+} from "./chunk-NKUETCDA.js";
 import {
   __objRest,
   __spreadProps,

package/dist/{chunk-CMMQTIVM.js → chunk-TAPYQBQU.js}

@@ -1,12 +1,12 @@
 import {
   Heading2
 } from "./chunk-MXSJF6TW.js";
-import {
-  Icon
-} from "./chunk-NKUETCDA.js";
 import {
   Button
 } from "./chunk-45AHDOAU.js";
+import {
+  Icon
+} from "./chunk-NKUETCDA.js";
 import {
   layoutGroupGap,
   layoutPaddding

package/dist/{chunk-YJGDVWTH.js → chunk-VS53C5ZD.js}

@@ -1,6 +1,9 @@
 import {
   Heading3
 } from "./chunk-MXSJF6TW.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";
 
 // src/components/PDFViewer/PDFNavigation.tsx
 import { jsx, jsxs } from "react/jsx-runtime";