@dmsi/wedgekit-react 0.0.500 → 0.0.502

package/dist/components/index.cjs

@@ -267,6 +267,9 @@ var layoutPaddingBottom = (0, import_clsx.default)(
 var layoutPaddingY = (0, import_clsx.default)(
   "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding"
 );
+var layoutPaddingX = (0, import_clsx.default)(
+  "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding"
+);
 var containerPaddingX = (0, import_clsx.default)(
   "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding"
 );
@@ -874,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);
@@ -883,6 +887,7 @@ var MenuOption = ({
     if (subMenu && onSubMenuLeave && !disabled) {
       onSubMenuLeave(subMenuLevel);
     }
+    setIsSubMenuHovered(false);
   };
   const handleMouseMove = () => {
     if (subMenu && onMouseMove && !disabled) {
@@ -893,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"
@@ -904,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");
@@ -965,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({
@@ -975,7 +987,8 @@ var MenuOption = ({
           position: "right",
           subMenuLevel,
           mobileBackMenuOption,
-          mobileHide: isMobile && activeMenu !== menuId.current
+          mobileHide: isMobile && activeMenu !== menuId.current,
+          autoFocusOff: true
         })
       }
     )
@@ -5176,7 +5189,7 @@ var Stack = (_a) => {
       id,
       "data-testid": testid
     }, props), {
-      style: {
+      style: __spreadValues({
         height: height === "full" ? "100%" : height !== void 0 ? `${height}px` : void 0,
         maxHeight: maxHeight !== void 0 ? isNaN(+maxHeight) ? maxHeight : `${maxHeight}px` : (_a2 = props.style) == null ? void 0 : _a2.maxHeight,
         maxWidth: maxWidth !== void 0 ? isNaN(+maxWidth) ? maxWidth : `${maxWidth}px` : (_b2 = props.style) == null ? void 0 : _b2.maxWidth,
@@ -5201,7 +5214,7 @@ var Stack = (_a) => {
         flexWrap,
         paddingInline: (_f = props.style) == null ? void 0 : _f.paddingInline,
         gap: (_g = props.style) == null ? void 0 : _g.gap
-      },
+      }, props.style),
       className: (0, import_clsx22.default)(
         "scrollbar-thin",
         "max-w-screen",
@@ -5592,6 +5605,7 @@ function MobileDataGridHeader({
             items: "center",
             justify: "between",
             backgroundColor: "background-primary-normal",
+            style: { borderTopRightRadius: 4, borderTopLeftRadius: 4 },
             children: [
               enableRowSelection && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "p-mobile-component-padding border-r border-brand-200 max-w-fit h-full", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                 Checkbox,
@@ -6181,15 +6195,22 @@ Modal.displayName = "Modal";
 // src/components/MobileDataGrid/MobileDataGridCard/MobileDataGridColumn.tsx
 var import_jsx_runtime38 = require("react/jsx-runtime");
 function MobileDataGridColumn(props) {
-  var _a;
+  var _a, _b;
   const { column, data } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "grid grid-cols-2 gap-2 px-3 flex-1", children: [
+  let value;
+  if (column.id) {
+    value = data[column.id];
+    if (((_a = column.meta) == null ? void 0 : _a.format) === "date" && typeof value === "string") {
+      value = formatDate(value);
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "grid grid-cols-2 gap-2 flex-1", children: [
     /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Paragraph, { color: "text-secondary-normal", className: "text-left", children: [
-      (_a = column.header) == null ? void 0 : _a.toString(),
+      (_b = column.header) == null ? void 0 : _b.toString(),
       ":"
     ] }),
     " ",
-    column.id && data[column.id] ? data[column.id] : null
+    value ? value : null
   ] });
 }
 
@@ -6208,7 +6229,7 @@ function ModalContent2() {
       return ((_a = column.meta) == null ? void 0 : _a.useCustomRenderer) && column.meta.mobileCell && column.id ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
         "div",
         {
-          className: "grid grid-cols-2 gap-2 px-3 items-center flex-1",
+          className: "grid grid-cols-2 gap-2 items-center flex-1",
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Paragraph, { color: "text-secondary-normal", className: "text-left", children: [
               (_b = column.header) == null ? void 0 : _b.toString(),
@@ -6314,8 +6335,12 @@ function MobileDataGridCard({
       id: id ? `${id}-card-${getId(data)}` : void 0,
       "data-testid": testid ? `${testid}-card-${getId(data)}` : void 0,
       className: (0, import_clsx30.default)(
+        "flex flex-col",
         "hover:bg-action-100 cursor-pointer list-none",
-        selected ? "bg-action-100" : "bg-background-grouped-primary-normal"
+        selected ? "bg-action-100" : "bg-background-grouped-primary-normal",
+        layoutGroupGap,
+        layoutPaddingX,
+        paddingYUsingLayoutGroupGap
       ),
       onClick: () => openRowDetail(data),
       children: [
@@ -6327,6 +6352,7 @@ function MobileDataGridCard({
                 sizing: "component",
                 padding: true,
                 width: "fit",
+                style: { paddingLeft: 0, paddingRight: 8 },
                 onClick: (e) => e.stopPropagation(),
                 children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                   Checkbox,
@@ -6345,6 +6371,7 @@ function MobileDataGridCard({
                 sizing: "component",
                 padding: true,
                 onClick: (e) => e.stopPropagation(),
+                style: { paddingInline: 0 },
                 children: renderLink ? renderLink(data) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Subheader, { children: String((_a = data[context.primaryKey]) != null ? _a : "") })
               }
             ),
@@ -6370,7 +6397,7 @@ function MobileDataGridCard({
               return ((_a2 = column.meta) == null ? void 0 : _a2.useCustomRenderer) && column.meta.mobileCell && column.id ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
                 "div",
                 {
-                  className: "grid grid-cols-2 gap-2 px-3 items-center flex-1",
+                  className: "grid grid-cols-2 gap-2 items-center flex-1",
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
                       Paragraph,
@@ -6406,7 +6433,7 @@ function MobileDataGridCard({
             }
           ) })
         ] }),
-        renderChevron && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Stack, { items: "center", justify: "center", horizontal: true, horizontalMobile: true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon, { name: "keyboard_arrow_down" }) })
+        renderChevron && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Stack, { items: "center", justify: "center", horizontal: true, horizontalMobile: true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "text-icon-primary-normal", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon, { name: "keyboard_arrow_down" }) }) })
       ]
     }
   );

package/dist/components/index.css

@@ -2102,6 +2102,9 @@
   .font-sans {
     font-family: var(--font-sans);
   }
+  .\!text-caption-desktop {
+    font-size: var(--text-caption-desktop) !important;
+  }
   .text-\[0\.6rem\] {
     font-size: 0.6rem;
   }
@@ -3293,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);
@@ -3341,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);
@@ -3793,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/index.js

@@ -2,41 +2,44 @@ import {
   DataGrid,
   DateInput,
   MobileDataGrid
-} from "../chunk-TWDH7ZDS.js";
+} from "../chunk-QV3NANQC.js";
 import "../chunk-M7INAUAJ.js";
-import "../chunk-YD3HWIUJ.js";
-import "../chunk-3DEYCNUE.js";
+import "../chunk-D4TFZ2WM.js";
+import "../chunk-3UUCDNX3.js";
 import {
   ProductImagePreview
-} from "../chunk-XHQOTLG6.js";
+} from "../chunk-FJRYHJUV.js";
 import "../chunk-BQNPOGD5.js";
 import {
   SearchResultImage
 } from "../chunk-Y5GD2FJA.js";
 import {
   PDFViewer
-} from "../chunk-4LBQSSGH.js";
-import "../chunk-YEZBNQZI.js";
-import "../chunk-B53XDCLO.js";
+} from "../chunk-B2O4TEOI.js";
+import "../chunk-VOSQMHNF.js";
+import "../chunk-VS53C5ZD.js";
 import "../chunk-S5ZJ3Q7P.js";
 import "../chunk-MBZ55T2D.js";
 import "../chunk-2IKT6IHB.js";
 import "../chunk-YCDDBSVU.js";
 import "../chunk-3X3Y4TMS.js";
-import "../chunk-QMSPTD6L.js";
-import "../chunk-XIXQUEYC.js";
+import "../chunk-PRN2EQBX.js";
+import "../chunk-5YNEY3WO.js";
 import "../chunk-5IFPG6TS.js";
 import "../chunk-AJ5M6MVX.js";
-import "../chunk-KW6V7O3H.js";
-import "../chunk-JUFBGNWW.js";
+import "../chunk-UI7P5J5S.js";
+import "../chunk-5DQVYX6H.js";
 import {
   Tooltip
-} from "../chunk-7GHD74J3.js";
+} from "../chunk-MDB26F6T.js";
 import "../chunk-AT4AWD6B.js";
 import "../chunk-EWGHVZL5.js";
+import {
+  Select
+} from "../chunk-2TNHD4MQ.js";
 import {
   SimpleTable
-} from "../chunk-7BVUTFZ5.js";
+} from "../chunk-OWHPPZZA.js";
 import {
   SkeletonParagraph
 } from "../chunk-L3BXRDLP.js";
@@ -45,83 +48,80 @@ import {
 } from "../chunk-34VEVX5H.js";
 import {
   Pagination
-} from "../chunk-GRGDX7JC.js";
-import {
-  Select
-} from "../chunk-PIBHG6DH.js";
-import "../chunk-TOKS63IK.js";
+} from "../chunk-LB7UT6F3.js";
+import "../chunk-LJLHGLTS.js";
 import "../chunk-4RJKB7LC.js";
-import "../chunk-FG7GNGE3.js";
-import "../chunk-X4UK7HE2.js";
+import "../chunk-25RZP3VR.js";
+import "../chunk-WVVEOCEH.js";
+import "../chunk-TAPYQBQU.js";
 import "../chunk-AG43RS4Q.js";
-import "../chunk-ZQJMNPCF.js";
+import "../chunk-SBRRNFOP.js";
+import "../chunk-QVWYTQKL.js";
 import {
   ListGroup
-} from "../chunk-6TYWM26K.js";
-import "../chunk-SBRRNFOP.js";
+} from "../chunk-SUSUNSVZ.js";
+import {
+  EmptyCartIcon
+} from "../chunk-75USUR3I.js";
 import "../chunk-Y2GK27RX.js";
-import "../chunk-QVWYTQKL.js";
 import {
   DataCellHeader,
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "../chunk-HIKWIY5Q.js";
+} from "../chunk-F6RZ7MUE.js";
 import {
   Menu
 } from "../chunk-TCMOGTPB.js";
 import "../chunk-DVU5XV7L.js";
 import {
   MenuOption
-} from "../chunk-5R4C5F63.js";
+} from "../chunk-LKKFQLWD.js";
 import {
   Search
-} from "../chunk-5MLYAQQO.js";
+} from "../chunk-HK4S6TRH.js";
 import {
   Input
-} from "../chunk-G4AWTFBQ.js";
+} from "../chunk-KPBG7D3V.js";
 import {
   Label
-} from "../chunk-AL5QIRY3.js";
+} from "../chunk-HXGJVYGQ.js";
 import "../chunk-WVUIIBRR.js";
-import {
-  EmptyCartIcon
-} from "../chunk-75USUR3I.js";
-import "../chunk-BTKWHCUE.js";
+import "../chunk-PS6UJZVH.js";
 import {
   Checkbox
-} from "../chunk-WEAVZEE4.js";
+} from "../chunk-M7WHWZ2J.js";
 import {
   CompactImagesPreview
-} from "../chunk-OZBB6RFM.js";
+} from "../chunk-TMHOK37S.js";
 import "../chunk-URYQ24NF.js";
 import "../chunk-VXWSAIB5.js";
 import "../chunk-R3EQIDBX.js";
 import "../chunk-5UH6QUFB.js";
 import {
   Subheader
-} from "../chunk-UCJUC5AZ.js";
+} from "../chunk-BYC6QID5.js";
 import {
   Accordion
-} from "../chunk-IY7SXEVY.js";
+} from "../chunk-MUOYLXBF.js";
 import {
   Card
 } from "../chunk-KBJZUVLM.js";
 import {
   Alert
-} from "../chunk-4UH72JT2.js";
-import "../chunk-H2KC5XUY.js";
+} from "../chunk-BWBSDSA7.js";
+import "../chunk-MXSJF6TW.js";
+import {
+  Button
+} from "../chunk-45AHDOAU.js";
 import {
   Paragraph
-} from "../chunk-ZSETMD4A.js";
-import "../chunk-DORD2EBO.js";
+} from "../chunk-WMPWWFUJ.js";
+import "../chunk-TPXH53SA.js";
 import {
   Icon
 } from "../chunk-NKUETCDA.js";
-import {
-  Button
-} from "../chunk-LPY6PMAY.js";
-import "../chunk-IXR65MOU.js";
+import "../chunk-7KWFEH56.js";
 import "../chunk-ORMEWXMH.js";
 export {
   Accordion,

package/dist/index.css

@@ -2080,6 +2080,9 @@
   .font-sans {
     font-family: var(--font-sans);
   }
+  .\!text-caption-desktop {
+    font-size: var(--text-caption-desktop) !important;
+  }
   .text-\[0\.6rem\] {
     font-size: 0.6rem;
   }
@@ -3271,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);
@@ -3319,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);
@@ -3771,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.500",
+  "version": "0.0.502",
   "type": "module",
   "scripts": {
     "build": "tsup",

package/src/classNames.ts

@@ -145,6 +145,10 @@ export const layoutPaddingY = clsx(
   "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding",
 );
 
+export const layoutPaddingX = clsx(
+  "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding",
+);
+
 export const containerPaddingX = clsx(
   "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding",
 );

package/src/components/Breadcrumbs.tsx

@@ -40,7 +40,7 @@ export const Breadcrumb = ({
       <Link
         id={id ? `${id}-link` : undefined}
         data-testid={testid ? `${testid}-link` : undefined}
-        className={linkPadding}
+        className={clsx(linkPadding, "!text-caption-desktop")}
         href={href}
         typographyStyle="breadcrumb"
         onClick={onClick}

package/src/components/HorizontalDivider.tsx

@@ -1,9 +1,22 @@
 import clsx from "clsx";
+import type { HTMLAttributes } from "react";
 
-export function HorizontalDivider({ id, testid, hideOnMobile }: { id?: string, testid?: string, hideOnMobile?: boolean }) {
-  const hideOnMobileStyle = clsx(hideOnMobile && "hidden desktop:block")
+type HorizontalDividerProps = HTMLAttributes<HTMLHRElement> & {
+  testid?: string;
+  hideOnMobile?: boolean;
+};
 
+export function HorizontalDivider({ id, testid, hideOnMobile, className, ...rest }: HorizontalDividerProps) {
   return (
-    <hr id={id} data-testid={testid} className={clsx("w-full border-t border-border-primary-normal", hideOnMobileStyle)} />
+    <hr
+      id={id}
+      data-testid={testid}
+      className={clsx(
+        "w-full border-t border-border-primary-normal",
+        hideOnMobile && "hidden desktop:block",
+        className
+      )}
+      {...rest}
+    />
   );
 }

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/src/components/MobileDataGrid/MobileDataGridCard/MobileDataGridColumn.tsx

@@ -1,5 +1,6 @@
 import { Paragraph } from "../../Paragraph";
 import { ColumnDef } from "@tanstack/react-table";
+import { formatDate } from "../../../utils";
 
 export function MobileDataGridColumn<T extends Record<string, unknown>>(props: {
   column: ColumnDef<T>;
@@ -7,14 +8,20 @@ export function MobileDataGridColumn<T extends Record<string, unknown>>(props: {
 }) {
   const { column, data } = props;
 
+  let value: unknown;
+  if (column.id) {
+    value = data[column.id];
+    if (column.meta?.format === "date" && typeof value === "string") {
+      value = formatDate(value);
+    }
+  }
+
   return (
-    <div className="grid grid-cols-2 gap-2 px-3 flex-1">
+    <div className="grid grid-cols-2 gap-2 flex-1">
       <Paragraph color="text-secondary-normal" className="text-left">
         {column.header?.toString()}:
       </Paragraph>{" "}
-      {column.id && data[column.id]
-        ? (data[column.id] as React.ReactNode)
-        : null}
+      {value ? (value as React.ReactNode) : null}
     </div>
   );
-}
+}