@deenruv/admin-dashboard 1.0.17-dev.8 → 1.0.17-dev.9

package/dist/access/built-in-routes.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Permission } from '@deenruv/admin-types';
 import { Routes } from '@deenruv/react-ui-devkit';
-import { BarChart, Barcode, Coins, Cog, CreditCard, Flag, Folder, Globe, Globe2, Images, MapPin, Percent, ScanBarcode, Server, ShoppingCart, Store, Tag, Truck, UserCog, UserRoundSearch, Users, UsersRound, } from 'lucide-react';
+import { BarChart, Barcode, BadgePercent, Coins, Cog, CreditCard, Flag, Folder, Globe, Globe2, Images, MapPin, Percent, ScanBarcode, Server, ShoppingCart, Store, Tag, Truck, UserCog, UserRoundSearch, Users, UsersRound, } from 'lucide-react';
 import { AdminsDetailPage, AdminsListPage, AdminsProvisionPage, AssetsListPage, ChannelsDetailPage, ChannelsListPage, CollectionsDetailPage, CollectionsListPage, CountriesDetailPage, CountriesListPage, CustomerGroupsDetailPage, CustomerGroupsListPage, CustomersDetailPage, CustomersListPage, Dashboard, Extensions, FacetsDetailPage, FacetsListPage, GlobalSettings, OrdersDetailPage, OrdersListPage, PaymentMethodsDetailPage, PaymentMethodsListPage, ProductVariantDetailPage, ProductVariantsListPage, ProductsDetailPage, ProductsListPage, PromotionsDetailPage, PromotionsListPage, RolesDetailPage, RolesListPage, SellersDetailPage, SellersListPage, ShippingMethodsDetailPage, ShippingMethodsListPage, Status, StockLocationsDetailPage, StockLocationsListPage, TaxCategoriesDetailPage, TaxCategoriesListPage, TaxRatesDetailPage, TaxRatesListPage, ZonesDetailPage, ZonesListPage, } from "../pages/index.js";
 export const adminNavigationGroups = [
     { id: 'shop-group', labelKey: 'shop' },
@@ -177,7 +177,7 @@ export const builtInAdminRoutes = [
         detailElement: () => _jsx(PromotionsDetailPage, {}),
         readPermissions: [Permission.ReadPromotion],
         createPermissions: [Permission.CreatePromotion],
-        nav: { groupId: 'promotions-group', linkId: 'link-promotions', menuKey: 'promotions', icon: ShoppingCart },
+        nav: { groupId: 'promotions-group', linkId: 'link-promotions', menuKey: 'promotions', icon: BadgePercent },
     }),
     ...createCrudRouteDefinitions({
         id: 'paymentMethods',

package/dist/access/index.js

@@ -1,5 +1,6 @@
 export * from './access-context.js';
 export * from './built-in-routes.js';
+export * from './navigation.js';
 export * from './permission-access.js';
 export * from './permission-routes.js';
 export * from './types.js';

package/dist/access/navigation.js

@@ -0,0 +1,33 @@
+export const matchesNavigationPath = (pathname, routePath) => {
+    const pathnameSegments = pathname.split('/').filter(Boolean);
+    const routeSegments = routePath.split('/').filter(Boolean);
+    return (pathnameSegments.length === routeSegments.length &&
+        routeSegments.every((segment, index) => segment.startsWith(':') || segment === pathnameSegments[index]));
+};
+export const getRouteFamilyId = (routeId) => routeId.split('.')[0];
+export const getNavigationLinkActivePaths = (route, routes) => {
+    const routeFamilyId = getRouteFamilyId(route.id);
+    const relatedPaths = routes
+        .filter((candidate) => getRouteFamilyId(candidate.id) === routeFamilyId)
+        .map((candidate) => candidate.path);
+    return [...relatedPaths.filter((path) => !path.includes(':')), ...relatedPaths.filter((path) => path.includes(':'))];
+};
+export const isNavigationLinkActive = (link, pathname) => (link.activePaths?.length ? link.activePaths : [link.href]).some((path) => matchesNavigationPath(pathname, path));
+export const getActiveNavigationLinkIds = (links, pathname) => {
+    const exactPathMatches = links.filter((link) => link.href === pathname);
+    return exactPathMatches.length > 0
+        ? exactPathMatches
+        : links.filter((link) => isNavigationLinkActive(link, pathname));
+};
+export const getActiveNavigationGroupIds = (links, pathname) => [
+    ...new Set(getActiveNavigationLinkIds(links, pathname).map((link) => link.groupId)),
+];
+export const insertNavigationLink = (links, link, placement) => {
+    if (!placement)
+        return [...links, link];
+    const index = links.findIndex((item) => item.id === placement.linkId);
+    if (index === -1)
+        return [...links, link];
+    const insertionIndex = placement.where === 'above' ? index : index + 1;
+    return [...links.slice(0, insertionIndex), link, ...links.slice(insertionIndex)];
+};

package/dist/components/Menu/Navigation.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { NavLink, useLocation } from 'react-router';
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { cn, buttonVariants, usePluginStore, Tooltip, TooltipContent, TooltipTrigger, useServer, Accordion, AccordionItem, AccordionTrigger, AccordionContent, useNotifications, useTranslation, capitalizeFirstLetter, Skeleton, } from '@deenruv/react-ui-devkit';
-import { adminNavigationGroups, canAccessAdminItem, useAdminAccess } from "../../access/index.js";
+import { adminNavigationGroups, canAccessAdminItem, getActiveNavigationLinkIds, getActiveNavigationGroupIds, getNavigationLinkActivePaths, insertNavigationLink, useAdminAccess, } from "../../access/index.js";
 export function Navigation({ isCollapsed }) {
     const { t } = useTranslation('common');
     const { t: _pluginT } = useTranslation();
@@ -39,6 +39,8 @@ export function Navigation({ isCollapsed }) {
                 icon: route.nav.icon,
                 access: route,
                 routeId: route.id,
+                groupId: route.nav.groupId,
+                activePaths: getNavigationLinkActivePaths(route, routes),
             });
         });
         const { groups, links } = navMenuData;
@@ -63,33 +65,46 @@ export function Navigation({ isCollapsed }) {
             const foundGroupIdx = navData.findIndex((group) => group.id === groupId);
             if (foundGroupIdx == -1)
                 return;
-            const newElement = { title: pluginT(labelId), label: pluginT(labelId), href: `/${href}`, id, icon, access };
+            const newElement = {
+                title: pluginT(labelId),
+                label: pluginT(labelId),
+                href: `/${href}`,
+                id,
+                icon,
+                access,
+                groupId,
+            };
             if (!placement) {
                 navData[foundGroupIdx].links.push(newElement);
                 return;
             }
-            const foundIndex = navData[foundGroupIdx].links.findIndex((item) => item.id === placement.linkId);
-            const offset = placement.where === 'above' ? 0 : 1;
-            navData[foundGroupIdx].links.splice(foundIndex + offset, 0, newElement);
+            navData[foundGroupIdx].links = insertNavigationLink(navData[foundGroupIdx].links, newElement, placement);
         });
         return navData.filter((group) => group.links.length > 0);
     }, [navMenuData.groups, navMenuData.links, pluginT, routes, t, userPermissions]);
     const permittedNavigationGroups = navigationGroups;
-    // const defaultAccordionOpenValue = useMemo(
-    //   () =>
-    //     permittedNavigationGroups
-    //       .filter((g) => !navMenuData.groups.find((pluginGroup) => pluginGroup.id === g.id))
-    //       .map((g) => g.id),
-    //   [permittedNavigationGroups, navMenuData],
-    // );
-    const defaultAccordionOpenValue = ['shop-group', 'assortment-group'];
+    const activeGroupIds = useMemo(() => getActiveNavigationGroupIds(permittedNavigationGroups.flatMap((group) => group.links), location.pathname), [location.pathname, permittedNavigationGroups]);
+    const activeLinkIds = useMemo(() => new Set(getActiveNavigationLinkIds(permittedNavigationGroups.flatMap((group) => group.links), location.pathname).map((link) => link.id)), [location.pathname, permittedNavigationGroups]);
+    const previousPathname = useRef(location.pathname);
+    const [openGroupIds, setOpenGroupIds] = useState(activeGroupIds);
+    useEffect(() => {
+        const hasPathnameChanged = previousPathname.current !== location.pathname;
+        previousPathname.current = location.pathname;
+        if (!hasPathnameChanged)
+            return;
+        setOpenGroupIds((currentGroupIds) => {
+            const nextGroupIds = [...new Set([...currentGroupIds, ...activeGroupIds])];
+            return nextGroupIds.length === currentGroupIds.length ? currentGroupIds : nextGroupIds;
+        });
+    }, [activeGroupIds, location.pathname]);
     if (!loaded) {
         return (_jsx("div", { className: "relative overflow-y-auto", children: _jsx("div", { className: "flex h-[calc(100%-64px)] flex-col gap-3 pb-2 lg:h-[calc(100%-72px)]", children: Array.from({ length: 3 }).map((_, groupIdx) => (_jsxs("div", { className: "flex flex-col gap-1 px-2.5", children: [!isCollapsed && (_jsx("div", { className: "px-3 py-2", children: _jsx(Skeleton, { className: "h-3 w-20" }) })), Array.from({ length: groupIdx === 0 ? 4 : groupIdx === 1 ? 5 : 3 }).map((_, linkIdx) => (_jsxs("div", { className: cn('flex items-center px-3 py-2', isCollapsed && 'justify-center px-0'), children: [_jsx(Skeleton, { className: cn('size-4 shrink-0', isCollapsed && 'size-6') }), !isCollapsed && _jsx(Skeleton, { className: "ml-2 h-4 w-24" })] }, linkIdx)))] }, groupIdx))) }) }));
     }
-    return (_jsx("div", { className: "relative overflow-y-auto", children: _jsx("div", { "data-collapsed": isCollapsed, className: "group flex h-[calc(100%-64px)] flex-col gap-2 py-2 data-[collapsed=true]:py-2 lg:h-[calc(100%-72px)]", children: _jsx(Accordion, { type: "multiple", className: "w-full", defaultValue: defaultAccordionOpenValue, value: isCollapsed ? permittedNavigationGroups.map((g) => g.id) : undefined, children: permittedNavigationGroups.map((group) => (_jsxs(AccordionItem, { value: group.id, className: "border-none", children: [!isCollapsed && (_jsx(AccordionTrigger, { className: cn('flex items-center justify-between px-3 py-2 hover:no-underline'), children: _jsxs("div", { className: "flex items-center gap-2 px-1", children: [_jsx("h4", { className: "text-[11px] font-semibold tracking-[0.08em] text-muted-foreground uppercase", children: group.label }), getNavigationNotification(group.id), viewMarkers ? (_jsx("p", { className: "text-xs font-semibold text-muted-foreground lowercase dark:text-muted-foreground", children: group.id })) : null] }) })), _jsx(AccordionContent, { className: cn(isCollapsed ? 'py-1' : 'pb-2'), children: _jsx("nav", { id: group.id, className: "grid gap-1 px-2.5 text-muted-foreground group-[[data-collapsed=true]]:justify-center group-[[data-collapsed=true]]:px-2", children: group.links.map((link, index) => {
+    return (_jsx("div", { className: "relative overflow-y-auto", children: _jsx("div", { "data-collapsed": isCollapsed, className: "group flex h-[calc(100%-64px)] flex-col gap-2 py-2 data-[collapsed=true]:py-2 lg:h-[calc(100%-72px)]", children: _jsx(Accordion, { type: "multiple", className: "w-full", value: isCollapsed ? permittedNavigationGroups.map((g) => g.id) : openGroupIds, onValueChange: setOpenGroupIds, children: permittedNavigationGroups.map((group) => (_jsxs(AccordionItem, { value: group.id, className: "border-none", children: [!isCollapsed && (_jsx(AccordionTrigger, { className: cn('flex items-center justify-between px-3 py-2 hover:no-underline'), children: _jsxs("div", { className: "flex items-center gap-2 px-1", children: [_jsx("h4", { className: "text-[11px] font-semibold tracking-[0.08em] text-muted-foreground uppercase", children: group.label }), getNavigationNotification(group.id), viewMarkers ? (_jsx("p", { className: "text-xs font-semibold text-muted-foreground lowercase dark:text-muted-foreground", children: group.id })) : null] }) })), _jsx(AccordionContent, { className: cn(isCollapsed ? 'py-1' : 'pb-2'), children: _jsx("nav", { id: group.id, className: "grid gap-1 px-2.5 text-muted-foreground group-[[data-collapsed=true]]:justify-center group-[[data-collapsed=true]]:px-2", children: group.links.map((link, index) => {
                                     const notifications = getNavigationNotification(link.id);
-                                    return (_jsx(React.Fragment, { children: isCollapsed ? (_jsxs(Tooltip, { delayDuration: 0, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("div", { children: _jsx(NavLink, { to: link.href, viewTransition: true, children: _jsxs("div", { className: cn(buttonVariants({ variant: 'navigation-link', size: 'icon' }), 'h-9 w-9', location.pathname === link.href &&
-                                                                    'bg-primary/10 text-primary opacity-100 hover:bg-primary/10 hover:text-primary'), children: [_jsx(link.icon, { className: "size-5" }), _jsx("span", { className: "sr-only", children: link.title })] }) }) }) }), _jsxs(TooltipContent, { side: "right", className: "relative flex items-center gap-4", children: [viewMarkers ? (_jsx("div", { className: "text-xs font-semibold text-muted-foreground lowercase dark:text-muted-foreground", children: link.id })) : null, capitalizeFirstLetter(link.title), notifications] })] }, index)) : (_jsx(NavLink, { to: link.href, viewTransition: true, children: _jsxs("div", { id: link.id, className: cn('relative flex h-9 items-center justify-start px-3 text-sm font-medium capitalize transition-colors hover:bg-muted/70 hover:text-foreground', location.pathname === link.href &&
-                                                    'bg-primary/10 text-primary opacity-100 hover:bg-primary/10 hover:text-primary'), children: [viewMarkers ? (_jsx("div", { className: "absolute top-1/2 right-2 -translate-y-1/2 text-xs font-semibold text-muted-foreground lowercase dark:text-muted-foreground", children: link.id })) : null, _jsx(link.icon, { className: "mr-2 size-4 shrink-0" }), capitalizeFirstLetter(link.title), notifications] }) })) }, link.id));
+                                    const isActive = activeLinkIds.has(link.id);
+                                    return (_jsx(React.Fragment, { children: isCollapsed ? (_jsxs(Tooltip, { delayDuration: 0, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("div", { children: _jsx(NavLink, { to: link.href, viewTransition: true, "aria-current": isActive ? 'page' : undefined, children: _jsxs("div", { className: cn(buttonVariants({ variant: 'navigation-link', size: 'icon' }), 'h-9 w-9 rounded-lg ring-offset-background transition-all hover:scale-[1.03] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', isActive &&
+                                                                    'bg-primary text-primary-foreground opacity-100 shadow-sm hover:scale-100 hover:bg-primary hover:text-primary-foreground'), children: [_jsx(link.icon, { className: "size-5" }), _jsx("span", { className: "sr-only", children: link.title })] }) }) }) }), _jsxs(TooltipContent, { side: "right", className: "relative flex items-center gap-4", children: [viewMarkers ? (_jsx("div", { className: "text-xs font-semibold text-muted-foreground lowercase dark:text-muted-foreground", children: link.id })) : null, capitalizeFirstLetter(link.title), notifications] })] }, index)) : (_jsx(NavLink, { to: link.href, viewTransition: true, "aria-current": isActive ? 'page' : undefined, children: _jsxs("div", { id: link.id, className: cn('relative flex h-10 items-center justify-start rounded-lg px-3 text-sm font-medium capitalize transition-all hover:bg-muted hover:text-foreground', isActive &&
+                                                    'bg-primary text-primary-foreground opacity-100 shadow-sm hover:bg-primary hover:text-primary-foreground'), children: [viewMarkers ? (_jsx("div", { className: "absolute top-1/2 right-2 -translate-y-1/2 text-xs font-semibold text-muted-foreground lowercase dark:text-muted-foreground", children: link.id })) : null, _jsx("span", { className: cn('mr-2.5 flex size-6 shrink-0 items-center justify-center rounded-md bg-muted/80 text-muted-foreground transition-colors', isActive && 'bg-primary-foreground/15 text-primary-foreground'), children: _jsx(link.icon, { className: "size-4" }) }), _jsx("span", { className: "truncate", children: capitalizeFirstLetter(link.title) }), notifications] }) })) }, link.id));
                                 }) }) })] }, group.id))) }) }) }));
 }

package/dist/version.js

@@ -1 +1 @@
-export const ADMIN_DASHBOARD_VERSION = '1.0.17-dev.8';
+export const ADMIN_DASHBOARD_VERSION = '1.0.17-dev.9';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deenruv/admin-dashboard",
-  "version": "1.0.17-dev.8",
+  "version": "1.0.17-dev.9",
   "main": "dist/index.js",
   "style": "dist/index.css",
   "types": "dist/index.d.ts",
@@ -80,10 +80,10 @@
     "yup": "^1.7.1",
     "zod": "^4.4.3",
     "zustand": "^5.0.14",
-    "@deenruv/admin-dashboard": "1.0.17-dev.8",
-    "@deenruv/deenruv-examples-plugin": "1.0.17-dev.8",
-    "@deenruv/admin-types": "1.0.17-dev.8",
-    "@deenruv/react-ui-devkit": "1.0.17-dev.8"
+    "@deenruv/admin-dashboard": "1.0.17-dev.9",
+    "@deenruv/admin-types": "1.0.17-dev.9",
+    "@deenruv/deenruv-examples-plugin": "1.0.17-dev.9",
+    "@deenruv/react-ui-devkit": "1.0.17-dev.9"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.20",