From 493a548a26f9bcd7bc77b27d3afffa08a9591609 Mon Sep 17 00:00:00 2001
From: Pagebakers <eelco@appulse.nl>
Date: Mon, 7 Aug 2023 20:26:09 +0200
Subject: [PATCH] fix: improve Remix compatibility

---
 .changeset/eleven-pens-guess.md               |  7 +++
 .changeset/strong-bottles-rhyme.md            |  6 +++
 .../saas-ui-core/src/sidebar/nav-item.tsx     |  1 +
 .../src/sidebar/sidebar.stories.tsx           | 16 +++++--
 .../src/base/components/nav-item.ts           | 46 +++++++++++--------
 5 files changed, 52 insertions(+), 24 deletions(-)
 create mode 100644 .changeset/eleven-pens-guess.md
 create mode 100644 .changeset/strong-bottles-rhyme.md

diff --git a/.changeset/eleven-pens-guess.md b/.changeset/eleven-pens-guess.md
new file mode 100644
index 000000000..9d07a6fe1
--- /dev/null
+++ b/.changeset/eleven-pens-guess.md
@@ -0,0 +1,7 @@
+---
+'@saas-ui/theme': patch
+'@saas-ui/core': patch
+'@saas-ui/react': patch
+---
+
+NavItem now renders an aria-current tag when the item is active.
diff --git a/.changeset/strong-bottles-rhyme.md b/.changeset/strong-bottles-rhyme.md
new file mode 100644
index 000000000..9ecb86670
--- /dev/null
+++ b/.changeset/strong-bottles-rhyme.md
@@ -0,0 +1,6 @@
+---
+'@saas-ui/theme': patch
+'@saas-ui/react': patch
+---
+
+NavItem active state is now compatible with Remix and ReactRouter NavLink
diff --git a/packages/saas-ui-core/src/sidebar/nav-item.tsx b/packages/saas-ui-core/src/sidebar/nav-item.tsx
index 1adaa09ab..8d3575d64 100644
--- a/packages/saas-ui-core/src/sidebar/nav-item.tsx
+++ b/packages/saas-ui-core/src/sidebar/nav-item.tsx
@@ -134,6 +134,7 @@ export const NavItem = forwardRef<NavItemProps, 'a'>((props, ref) => {
   const link = (
     <chakra.a
       as={as}
+      aria-current={isActive ? 'page' : undefined}
       {...rest}
       ref={ref}
       href={href}
diff --git a/packages/saas-ui-core/src/sidebar/sidebar.stories.tsx b/packages/saas-ui-core/src/sidebar/sidebar.stories.tsx
index 5d9fe108d..1705a0f55 100644
--- a/packages/saas-ui-core/src/sidebar/sidebar.stories.tsx
+++ b/packages/saas-ui-core/src/sidebar/sidebar.stories.tsx
@@ -69,7 +69,7 @@ Basic.args = {
   children: (
     <>
       <SidebarSection flex="1" overflowY="auto">
-        <NavItem href="/dfdfd">Home</NavItem>
+        <NavItem aria-current="page">Home</NavItem>
         <NavItem>Users</NavItem>
         <NavItem>Settings</NavItem>
       </SidebarSection>
@@ -82,7 +82,7 @@ WithLinks.args = {
   children: (
     <>
       <SidebarSection flex="1" overflowY="auto">
-        <NavItem>Home</NavItem>
+        <NavItem isActive>Home</NavItem>
         <NavItem>Users</NavItem>
         <NavItem>Settings</NavItem>
       </SidebarSection>
@@ -95,7 +95,9 @@ WithFeatherIcons.args = {
   children: (
     <>
       <SidebarSection flex="1" overflowY="auto">
-        <NavItem icon={<FiHome />}>Home</NavItem>
+        <NavItem icon={<FiHome />} isActive>
+          Home
+        </NavItem>
         <NavItem icon={<FiUsers />}>Users</NavItem>
         <NavItem icon={<FiSettings />}>Settings</NavItem>
       </SidebarSection>
@@ -108,7 +110,9 @@ WithFaIcons.args = {
   children: (
     <>
       <SidebarSection flex="1" overflowY="auto">
-        <NavItem icon={<FaHome />}>Home</NavItem>
+        <NavItem icon={<FaHome />} isActive>
+          Home
+        </NavItem>
         <NavItem icon={<FaUsers />}>Users</NavItem>
         <NavItem icon={<FaCog />}>Settings</NavItem>
       </SidebarSection>
@@ -133,7 +137,9 @@ WithHorizontalNav.args = {
         </Menu>
       </SidebarSection>
       <SidebarSection flex="1" overflowY="auto">
-        <NavItem icon={<FiHome />}>Home</NavItem>
+        <NavItem icon={<FiHome />} isActive>
+          Home
+        </NavItem>
         <NavItem icon={<FiUsers />}>Users</NavItem>
         <NavItem icon={<FiSettings />}>Settings</NavItem>
       </SidebarSection>
diff --git a/packages/saas-ui-theme/src/base/components/nav-item.ts b/packages/saas-ui-theme/src/base/components/nav-item.ts
index a30c62181..67fdf871f 100644
--- a/packages/saas-ui-theme/src/base/components/nav-item.ts
+++ b/packages/saas-ui-theme/src/base/components/nav-item.ts
@@ -58,7 +58,15 @@ const baseStyle = definePartsStyle((props) => {
   }
 })
 
+// &[aria-current=page] styles are used for ReactRouter and Remix NavLink components
+
 const variantNeutral = definePartsStyle((props) => {
+  const _active = {
+    bg: 'blackAlpha.200',
+    _dark: {
+      bg: `whiteAlpha.300`,
+    },
+  }
   return {
     link: {
       _hover: {
@@ -67,12 +75,8 @@ const variantNeutral = definePartsStyle((props) => {
           bg: `whiteAlpha.200`,
         },
       },
-      _active: {
-        bg: 'blackAlpha.200',
-        _dark: {
-          bg: `whiteAlpha.300`,
-        },
-      },
+      _active,
+      ['&[aria-current=page]']: _active,
     },
     icon: {
       opacity: 0.8,
@@ -86,6 +90,16 @@ const variantNeutral = definePartsStyle((props) => {
 const variantSubtle = definePartsStyle((props) => {
   const { colorScheme: c, theme } = props
 
+  const _active = {
+    bg: transparentize(`${c}.500`, 0.3)(theme),
+    fontWeight: 'semibold',
+    color: `${c}.600`,
+    _dark: {
+      bg: transparentize(`${c}.500`, 0.3)(theme),
+      color: `${c}.100`,
+    },
+  }
+
   return {
     link: {
       _hover: {
@@ -94,22 +108,17 @@ const variantSubtle = definePartsStyle((props) => {
           bg: `whiteAlpha.200`,
         },
       },
-      _active: {
-        bg: transparentize(`${c}.500`, 0.3)(theme),
-        fontWeight: 'semibold',
-        color: `${c}.600`,
-        _dark: {
-          bg: transparentize(`${c}.500`, 0.3)(theme),
-          color: `${c}.100`,
-        },
-      },
+      _active,
+      ['&[aria-current=page]']: _active,
     },
   }
 })
 
 const variantSolid = definePartsStyle((props) => {
   const { colorScheme: c } = props
-
+  const _active = {
+    bg: `${c}.500`,
+  }
   return {
     link: {
       _hover: {
@@ -118,9 +127,8 @@ const variantSolid = definePartsStyle((props) => {
           bg: `whiteAlpha.200`,
         },
       },
-      _active: {
-        bg: `${c}.500`,
-      },
+      _active,
+      ['&[aria-current=page]']: _active,
       color: 'white',
     },
     icon: {