From 1d0219af9ff337504417a90130eb5e7d57ac26cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20PR=C3=89VOT?= <clement@snowball.xyz>
Date: Tue, 26 Mar 2024 13:39:02 +0000
Subject: [PATCH] fix(submenu): fix the 'active' property

---
 .../fractal/src/components/Menu/SubMenu.stories.tsx    |  3 +++
 packages/fractal/src/components/Menu/SubMenu.tsx       |  3 ++-
 packages/fractal/src/styles/helpers.ts                 | 10 +++++-----
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/fractal/src/components/Menu/SubMenu.stories.tsx b/packages/fractal/src/components/Menu/SubMenu.stories.tsx
index 1115cd79b..39ec32f9a 100644
--- a/packages/fractal/src/components/Menu/SubMenu.stories.tsx
+++ b/packages/fractal/src/components/Menu/SubMenu.stories.tsx
@@ -38,6 +38,7 @@ const meta: Meta<SubMenuProps> = {
     },
   },
   args: {
+    active: false,
     align: undefined,
     condensed: false,
     condensedItems: false,
@@ -65,6 +66,7 @@ type Story = StoryObj<typeof meta>
 
 export const Playground: Story = {
   render: ({
+    active = false,
     align,
     condensed = false,
     condensedItems = false,
@@ -82,6 +84,7 @@ export const Playground: Story = {
     <div className="h-[300px]">
       <Menu>
         <SubMenu
+          active={active}
           align={align}
           condensed={condensed}
           condensedItems={condensedItems}
diff --git a/packages/fractal/src/components/Menu/SubMenu.tsx b/packages/fractal/src/components/Menu/SubMenu.tsx
index 2a828ebef..830a5b4f8 100644
--- a/packages/fractal/src/components/Menu/SubMenu.tsx
+++ b/packages/fractal/src/components/Menu/SubMenu.tsx
@@ -195,7 +195,6 @@ export const SubMenu = forwardRef<SubMenuCombinedRefs, SubMenuProps>(
             : 'cursor-pointer text-dark',
           popup?.trigger?.className,
         )}
-        data-highlighted={active || isOpen || undefined}
         element="div"
         role="menuitem"
         tabIndex={-1}
@@ -330,6 +329,7 @@ export const SubMenu = forwardRef<SubMenuCombinedRefs, SubMenuProps>(
           props.className,
           popup?.className,
         )}
+        data-highlighted={active || isOpen || undefined}
         style={{
           ...(props.style ?? {}),
           ...(popup?.style ?? {}),
@@ -380,6 +380,7 @@ export const SubMenu = forwardRef<SubMenuCombinedRefs, SubMenuProps>(
           'rounded-sm',
           props.className,
         )}
+        data-highlighted={active || isOpen || undefined}
         disabled={disabled}
         elevation={elevation}
         fullWidth
diff --git a/packages/fractal/src/styles/helpers.ts b/packages/fractal/src/styles/helpers.ts
index bb1b279fa..2d7a44bf5 100644
--- a/packages/fractal/src/styles/helpers.ts
+++ b/packages/fractal/src/styles/helpers.ts
@@ -330,29 +330,29 @@ export const alternatingBgColorLightClassNames = cj(
   '[&_.alternatee:nth-child(5n+1):hover]:bg-decorative-pink-90',
   '[&_.alternatee:nth-child(1):focus]:bg-decorative-pink-90',
   '[&_.alternatee:nth-child(5n+1):focus]:bg-decorative-pink-90',
-  '[&_.alternatee:nth-child(5n+1)[data-highlighted]]:bg-decorative-pink-90',
+  '[&_.alternatee:nth-child(5n+1)[data-highlighted="true"]]:bg-decorative-pink-90',
 
   '[&_.alternatee:nth-child(2):hover]:bg-decorative-yellow-90',
   '[&_.alternatee:nth-child(5n+2):hover]:bg-decorative-yellow-90',
   '[&_.alternatee:nth-child(2):focus]:bg-decorative-yellow-90',
   '[&_.alternatee:nth-child(5n+2):focus]:bg-decorative-yellow-90',
-  '[&_.alternatee:nth-child(5n+2)[data-highlighted]]:bg-decorative-yellow-90',
+  '[&_.alternatee:nth-child(5n+2)[data-highlighted="true"]]:bg-decorative-yellow-90',
 
   '[&_.alternatee:nth-child(3):hover]:bg-decorative-green-90',
   '[&_.alternatee:nth-child(5n+3):hover]:bg-decorative-green-90',
   '[&_.alternatee:nth-child(3):focus]:bg-decorative-green-90',
   '[&_.alternatee:nth-child(5n+3):focus]:bg-decorative-green-90',
-  '[&_.alternatee:nth-child(5n+3)[data-highlighted]]:bg-decorative-green-90',
+  '[&_.alternatee:nth-child(5n+3)[data-highlighted="true"]]:bg-decorative-green-90',
 
   '[&_.alternatee:nth-child(4):hover]:bg-decorative-blue-90',
   '[&_.alternatee:nth-child(5n+4):hover]:bg-decorative-blue-90',
   '[&_.alternatee:nth-child(4):focus]:bg-decorative-blue-90',
   '[&_.alternatee:nth-child(5n+4):focus]:bg-decorative-blue-90',
-  '[&_.alternatee:nth-child(5n+4)[data-highlighted]]:bg-decorative-blue-90',
+  '[&_.alternatee:nth-child(5n+4)[data-highlighted="true"]]:bg-decorative-blue-90',
 
   '[&_.alternatee:nth-child(5):hover]:bg-decorative-purple-90',
   '[&_.alternatee:nth-child(5n+5):hover]:bg-decorative-purple-90',
   '[&_.alternatee:nth-child(5):focus]:bg-decorative-purple-90',
   '[&_.alternatee:nth-child(5n+5):focus]:bg-decorative-purple-90',
-  '[&_.alternatee:nth-child(5n+5)[data-highlighted]]:bg-decorative-purple-90',
+  '[&_.alternatee:nth-child(5n+5)[data-highlighted="true"]]:bg-decorative-purple-90',
 )