@wallarm-org/design-system 0.48.0-rc-feature-AS-1033.2 → 0.48.0

package/dist/components/AppShell/AppShellRemote.js

@@ -8,7 +8,7 @@ const AppShellRemote = ({ ref, className, children, ...props })=>{
         ref: ref,
         "data-slot": "app-shell-remote",
         "data-testid": testId,
-        className: cn('[grid-area:remote] relative overflow-auto overscroll-none rounded-tl-12 border border-border-primary-light bg-bg-page-bg', className),
+        className: cn('[grid-area:remote] relative overflow-auto overscroll-none rounded-tl-12 border-t border-l border-border-primary-light bg-bg-page-bg', className),
         children: children
     });
 };

package/dist/components/AppShell/story-content/_storyAccountDropdown.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Check, LogOut, PanelLeftDashed, PencilRuler, Settings, User } from "../../../icons/index.js";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIcon, DropdownMenuItemText, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, DropdownMenuTriggerItem } from "../../DropdownMenu/index.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemIcon, DropdownMenuItemText, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, DropdownMenuTriggerItem } from "../../DropdownMenu/index.js";
 import { NavRailItem } from "../../NavRail/index.js";
 import { HStack, VStack } from "../../Stack/index.js";
 import { Text } from "../../Text/index.js";
@@ -17,7 +17,10 @@ const SIDEBAR_MODE_LABELS = {
 const AccountDropdown = ({ sidebarMode, onSidebarModeChange, theme, onThemeChange })=>/*#__PURE__*/ jsxs(DropdownMenu, {
         positioning: {
             placement: 'right-end',
-            gutter: 8
+            gutter: 6,
+            offset: {
+                crossAxis: 12
+            }
         },
         children: [
             /*#__PURE__*/ jsx(DropdownMenuTrigger, {
@@ -74,16 +77,14 @@ const AccountDropdown = ({ sidebarMode, onSidebarModeChange, theme, onThemeChang
                                     /*#__PURE__*/ jsx(DropdownMenuItemIcon, {
                                         children: /*#__PURE__*/ jsx(PencilRuler, {})
                                     }),
-                                    /*#__PURE__*/ jsxs(DropdownMenuItemText, {
+                                    /*#__PURE__*/ jsxs(DropdownMenuItemContent, {
                                         children: [
-                                            "Theme:",
-                                            ' ',
+                                            /*#__PURE__*/ jsx(DropdownMenuItemText, {
+                                                children: "Theme"
+                                            }),
                                             /*#__PURE__*/ jsx(Text, {
-                                                size: "sm",
-                                                weight: "medium",
-                                                style: {
-                                                    display: 'inline'
-                                                },
+                                                size: "xs",
+                                                color: "secondary",
                                                 children: THEME_LABELS[theme]
                                             })
                                         ]
@@ -91,7 +92,7 @@ const AccountDropdown = ({ sidebarMode, onSidebarModeChange, theme, onThemeChang
                                 ]
                             }),
                             /*#__PURE__*/ jsxs(DropdownMenuContent, {
-                                className: "w-200",
+                                className: "w-132",
                                 children: [
                                     /*#__PURE__*/ jsxs(DropdownMenuItem, {
                                         onSelect: ()=>onThemeChange('light'),
@@ -126,16 +127,14 @@ const AccountDropdown = ({ sidebarMode, onSidebarModeChange, theme, onThemeChang
                                     /*#__PURE__*/ jsx(DropdownMenuItemIcon, {
                                         children: /*#__PURE__*/ jsx(PanelLeftDashed, {})
                                     }),
-                                    /*#__PURE__*/ jsxs(DropdownMenuItemText, {
+                                    /*#__PURE__*/ jsxs(DropdownMenuItemContent, {
                                         children: [
-                                            "Sidebar mode:",
-                                            ' ',
+                                            /*#__PURE__*/ jsx(DropdownMenuItemText, {
+                                                children: "Sidebar mode"
+                                            }),
                                             /*#__PURE__*/ jsx(Text, {
-                                                size: "sm",
-                                                weight: "medium",
-                                                style: {
-                                                    display: 'inline'
-                                                },
+                                                size: "xs",
+                                                color: "secondary",
                                                 children: SIDEBAR_MODE_LABELS[sidebarMode]
                                             })
                                         ]

package/dist/components/AppShell/story-content/_storyConfigRenderer.js

@@ -6,9 +6,10 @@ import { RemoteShell, RemoteShellBreadcrumb, RemoteShellContent, RemoteShellPane
 import { HomeContent } from "./_storyHomeContent.js";
 import { PRODUCT_CONFIGS } from "./_storyLib.js";
 const PageContent = ()=>{
-    const { config, breadcrumbSegments } = useProductNavContext();
+    const { breadcrumbSegments } = useProductNavContext();
     const lastSegment = breadcrumbSegments[breadcrumbSegments.length - 1];
-    const pageTitle = lastSegment?.label ?? config.productLabel;
+    const pageTitle = lastSegment?.label ?? '';
+    const fullPath = breadcrumbSegments.map((s)=>s.label).join(' / ');
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx("h1", {
@@ -19,9 +20,7 @@ const PageContent = ()=>{
                 className: "mt-8 text-sm text-text-secondary",
                 children: [
                     "Placeholder page for ",
-                    config.productLabel,
-                    " / ",
-                    pageTitle,
+                    fullPath,
                     "."
                 ]
             })

package/dist/components/AppShell/story-content/_storyNavConfigs.js

@@ -1,6 +1,18 @@
-import { CircleDashed } from "../../../icons/index.js";
+import { CircleDashed, Filter, Plus } from "../../../icons/index.js";
 const edgeNavConfig = {
     productLabel: 'Edge',
+    headerActions: [
+        {
+            icon: Filter,
+            label: 'Filter',
+            onClick: ()=>alert('Filter clicked')
+        },
+        {
+            icon: Plus,
+            label: 'Add',
+            onClick: ()=>alert('Add clicked')
+        }
+    ],
     items: [
         {
             type: 'link',
@@ -47,11 +59,59 @@ const edgeNavConfig = {
                     icon: CircleDashed
                 },
                 {
-                    type: 'link',
+                    type: 'drill',
                     id: 'dp-nodes',
                     label: 'Nodes',
                     path: 'nodes',
-                    icon: CircleDashed
+                    icon: CircleDashed,
+                    param: 'nodeId',
+                    entities: [
+                        {
+                            id: 'node-1',
+                            label: 'Node 1',
+                            description: 'Primary node'
+                        },
+                        {
+                            id: 'node-2',
+                            label: 'Node 2',
+                            description: 'Secondary node'
+                        },
+                        {
+                            id: 'node-3',
+                            label: 'Node 3',
+                            description: 'Tertiary node'
+                        }
+                    ],
+                    children: [
+                        {
+                            type: 'link',
+                            id: 'node-overview',
+                            label: 'Overview',
+                            path: 'overview',
+                            icon: CircleDashed
+                        },
+                        {
+                            type: 'link',
+                            id: 'node-metrics',
+                            label: 'Metrics',
+                            path: 'metrics',
+                            icon: CircleDashed
+                        },
+                        {
+                            type: 'link',
+                            id: 'node-logs',
+                            label: 'Logs',
+                            path: 'logs',
+                            icon: CircleDashed
+                        },
+                        {
+                            type: 'link',
+                            id: 'node-config',
+                            label: 'Configuration',
+                            path: 'config',
+                            icon: CircleDashed
+                        }
+                    ]
                 },
                 {
                     type: 'link',
@@ -394,6 +454,13 @@ const aiHypervisorNavConfig = {
 };
 const infraDiscoveryNavConfig = {
     productLabel: 'Infra Discovery',
+    headerActions: [
+        {
+            icon: Filter,
+            label: 'Filter',
+            onClick: ()=>alert('Filter clicked')
+        }
+    ],
     items: [
         {
             type: 'link',

package/dist/components/AppShell/story-content/_storyQuickHelpDropdown.js

@@ -3,21 +3,35 @@ import { Activity, Book, CircleHelp, LifeBuoy, NotebookText, SquareArrowOutUpRig
 import { Button } from "../../Button/index.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemIcon, DropdownMenuItemText, DropdownMenuSeparator, DropdownMenuTrigger } from "../../DropdownMenu/index.js";
 import { Text } from "../../Text/index.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../Tooltip/index.js";
 const QuickHelpDropdown = ()=>/*#__PURE__*/ jsxs(DropdownMenu, {
         positioning: {
             placement: 'bottom-end',
             gutter: 4
         },
         children: [
-            /*#__PURE__*/ jsx(DropdownMenuTrigger, {
-                asChild: true,
-                children: /*#__PURE__*/ jsx(Button, {
-                    variant: "ghost",
-                    size: "small",
-                    color: "neutral",
-                    "aria-label": "Quick Help",
-                    children: /*#__PURE__*/ jsx(CircleHelp, {})
-                })
+            /*#__PURE__*/ jsxs(Tooltip, {
+                children: [
+                    /*#__PURE__*/ jsx(TooltipTrigger, {
+                        asChild: true,
+                        children: /*#__PURE__*/ jsx("span", {
+                            className: "inline-flex",
+                            children: /*#__PURE__*/ jsx(DropdownMenuTrigger, {
+                                asChild: true,
+                                children: /*#__PURE__*/ jsx(Button, {
+                                    variant: "ghost",
+                                    size: "small",
+                                    color: "neutral",
+                                    "aria-label": "Quick Help",
+                                    children: /*#__PURE__*/ jsx(CircleHelp, {})
+                                })
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(TooltipContent, {
+                        children: "Quick help"
+                    })
+                ]
             }),
             /*#__PURE__*/ jsxs(DropdownMenuContent, {
                 className: "w-320",

package/dist/components/NavPanel/NavPanelGroupLabel.js

@@ -38,7 +38,7 @@ const NavPanelGroupLabel = ({ ref, icon: Icon, className, children, ...props })=
                 children: children
             }),
             /*#__PURE__*/ jsx(ChevronRight, {
-                size: "xs",
+                size: "md",
                 className: cn('shrink-0 transition-transform duration-150', expanded && 'rotate-90')
             })
         ]

package/dist/components/NavPanel/NavPanelHeader.js

@@ -9,7 +9,7 @@ const NavPanelHeader = ({ ref, className, children, ...props })=>{
         ref: ref,
         "data-slot": "nav-panel-header",
         "data-testid": testId,
-        className: cn('sticky top-0 z-10 flex shrink-0 items-center bg-bg-surface-1 p-4', className),
+        className: cn('sticky top-0 z-10 flex shrink-0 items-center p-4', className),
         children: /*#__PURE__*/ jsx(Text, {
             size: "sm",
             weight: "medium",

package/dist/components/NavRail/classes.js

@@ -1,5 +1,5 @@
 import { cva } from "class-variance-authority";
-const navRailVariants = cva('flex h-full shrink-0 flex-col overflow-hidden px-8 py-6 transition-[width] duration-200 ease-in-out', {
+const navRailVariants = cva('flex h-full shrink-0 flex-col overflow-hidden px-8 pt-6 pb-12 transition-[width] duration-200 ease-in-out', {
     variants: {
         collapsed: {
             true: 'w-[48px]',
@@ -10,7 +10,7 @@ const navRailVariants = cva('flex h-full shrink-0 flex-col overflow-hidden px-8
         collapsed: false
     }
 });
-const navRailItemVariants = cva('overlay flex h-32 w-full cursor-pointer items-center rounded-6 p-8 text-sm transition-colors outline-none', {
+const navRailItemVariants = cva('overlay flex h-32 w-full cursor-pointer items-center rounded-6 p-8 text-sm transition-colors outline-none data-[state=open]:overlay-states-primary-active data-[state=open]:text-text-primary', {
     variants: {
         active: {
             true: 'overlay-states-primary-active text-text-primary',

package/dist/components/OverflowList/OverflowList.js

@@ -1,52 +1,48 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { memo, useCallback, useEffect, useMemo, useRef } from "react";
+import { memo, useCallback, useMemo } from "react";
 import { useOverflowItems } from "../../hooks/index.js";
 import { cn } from "../../utils/cn.js";
-import { OVERFLOW_RESERVE_SPACE, areItemsShallowEqual, resolveVisibleItems } from "./OverflowList.helpers.js";
 const OverflowListComponent = ({ items, itemRenderer, overflowRenderer, className, collapseFrom = 'end', minVisibleItems = 0, alwaysRenderOverflow = false, onOverflow, ...props })=>{
-    const indexMap = useMemo(()=>{
-        const map = new Map();
-        items.forEach((item, index)=>{
-            if (!map.has(item)) map.set(item, index);
-        });
-        return map;
+    const memoizedItemRenderer = useCallback((item)=>{
+        const index = items.indexOf(item);
+        return itemRenderer(item, index);
     }, [
-        items
-    ]);
-    const memoizedItemRenderer = useCallback((item)=>itemRenderer(item, indexMap.get(item) ?? 0), [
-        indexMap,
+        items,
         itemRenderer
     ]);
-    const memoizedMeasurementRenderer = useCallback((item)=>itemRenderer(item, indexMap.get(item) ?? 0), [
-        indexMap,
+    const memoizedMeasurementRenderer = useCallback((item)=>{
+        const index = items.indexOf(item);
+        return itemRenderer(item, index);
+    }, [
+        items,
         itemRenderer
     ]);
     const { containerRef, visibleItems, hiddenItems, MeasurementContainer } = useOverflowItems({
         items,
         renderItem: memoizedMeasurementRenderer,
         overflowRenderer: (items)=>overflowRenderer(items),
-        reserveSpace: OVERFLOW_RESERVE_SPACE
+        reserveSpace: 80
     });
-    const { visibleItems: finalVisibleItems, hiddenItems: finalHiddenItems } = useMemo(()=>resolveVisibleItems({
-            items,
-            visibleItems,
-            hiddenItems,
-            minVisibleItems
-        }), [
-        items,
+    const finalVisibleItems = useMemo(()=>{
+        if (visibleItems.length < minVisibleItems && items.length >= minVisibleItems) return items.slice(0, minVisibleItems);
+        return visibleItems;
+    }, [
         visibleItems,
-        hiddenItems,
-        minVisibleItems
+        minVisibleItems,
+        items
+    ]);
+    const finalHiddenItems = useMemo(()=>{
+        if (finalVisibleItems.length !== visibleItems.length) return items.slice(finalVisibleItems.length);
+        return hiddenItems;
+    }, [
+        finalVisibleItems.length,
+        visibleItems.length,
+        items,
+        hiddenItems
     ]);
     const finalHiddenCount = finalHiddenItems.length;
-    const prevHiddenRef = useRef(null);
-    useEffect(()=>{
-        if (!onOverflow || 0 === finalHiddenItems.length) {
-            prevHiddenRef.current = finalHiddenItems;
-            return;
-        }
-        if (!areItemsShallowEqual(prevHiddenRef.current, finalHiddenItems)) onOverflow(finalHiddenItems);
-        prevHiddenRef.current = finalHiddenItems;
+    useMemo(()=>{
+        if (onOverflow && finalHiddenItems.length > 0) onOverflow(finalHiddenItems);
     }, [
         finalHiddenItems,
         onOverflow
@@ -69,7 +65,6 @@ const OverflowListComponent = ({ items, itemRenderer, overflowRenderer, classNam
             /*#__PURE__*/ jsx(MeasurementContainer, {}),
             /*#__PURE__*/ jsxs("div", {
                 ref: containerRef,
-                "data-slot": "overflow-list",
                 className: cn('flex w-full min-w-0', className),
                 ...props,
                 children: [

package/dist/components/ProductNav/HeaderActions.d.ts

@@ -0,0 +1,6 @@
+import type { FC } from 'react';
+import type { NavConfigHeaderAction } from './types';
+export type HeaderActionsProps = {
+    actions: NavConfigHeaderAction[];
+};
+export declare const HeaderActions: FC<HeaderActionsProps>;

package/dist/components/ProductNav/HeaderActions.js

@@ -0,0 +1,27 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "../Button/index.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../Tooltip/index.js";
+const HeaderActions = ({ actions })=>/*#__PURE__*/ jsx("div", {
+        className: "flex items-center gap-2",
+        children: actions.map(({ icon: Icon, label, onClick, disabled })=>/*#__PURE__*/ jsxs(Tooltip, {
+                children: [
+                    /*#__PURE__*/ jsx(TooltipTrigger, {
+                        asChild: true,
+                        children: /*#__PURE__*/ jsx(Button, {
+                            variant: "ghost",
+                            size: "small",
+                            color: "neutral",
+                            "aria-label": label,
+                            onClick: onClick,
+                            disabled: disabled,
+                            children: /*#__PURE__*/ jsx(Icon, {})
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(TooltipContent, {
+                        children: label
+                    })
+                ]
+            }, label))
+    });
+HeaderActions.displayName = 'HeaderActions';
+export { HeaderActions };

package/dist/components/ProductNav/NavItemsList.d.ts

@@ -0,0 +1,10 @@
+import type { FC } from 'react';
+import type { NavConfigDrill, NavConfigNode } from './types';
+export type NavItemsListProps = {
+    items: NavConfigNode[];
+    activeItemId: string | null;
+    onNavigate: (path: string) => void;
+    onDrillClick?: (drill: NavConfigDrill) => void;
+    level?: 'root' | 'group';
+};
+export declare const NavItemsList: FC<NavItemsListProps>;

package/dist/components/ProductNav/NavItemsList.js

@@ -0,0 +1,69 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { NavPanelDivider, NavPanelGroup, NavPanelGroupContent, NavPanelGroupItem, NavPanelGroupLabel, NavPanelItem, NavPanelSectionHeader } from "../NavPanel/index.js";
+const NavItemsList = ({ items, activeItemId, onNavigate, onDrillClick, level = 'root' })=>/*#__PURE__*/ jsx(Fragment, {
+        children: items.map((item)=>{
+            const divider = item.dividerAfter ? /*#__PURE__*/ jsx(NavPanelDivider, {}, `divider-${item.id}`) : null;
+            if ('link' === item.type) {
+                const Item = 'group' === level ? NavPanelGroupItem : NavPanelItem;
+                return /*#__PURE__*/ jsxs("span", {
+                    children: [
+                        /*#__PURE__*/ jsx(Item, {
+                            icon: item.icon,
+                            active: activeItemId === item.id,
+                            onClick: ()=>onNavigate(item.path),
+                            children: item.label
+                        }),
+                        divider
+                    ]
+                }, item.id);
+            }
+            if ('group' === item.type) return /*#__PURE__*/ jsxs("span", {
+                children: [
+                    /*#__PURE__*/ jsxs(NavPanelGroup, {
+                        defaultExpanded: item.defaultExpanded,
+                        children: [
+                            /*#__PURE__*/ jsx(NavPanelGroupLabel, {
+                                icon: item.icon,
+                                children: item.label
+                            }),
+                            /*#__PURE__*/ jsx(NavPanelGroupContent, {
+                                children: /*#__PURE__*/ jsx(NavItemsList, {
+                                    items: item.children,
+                                    activeItemId: activeItemId,
+                                    onNavigate: onNavigate,
+                                    onDrillClick: onDrillClick,
+                                    level: "group"
+                                })
+                            })
+                        ]
+                    }),
+                    divider
+                ]
+            }, item.id);
+            if ('section-header' === item.type) return /*#__PURE__*/ jsxs("span", {
+                children: [
+                    /*#__PURE__*/ jsx(NavPanelSectionHeader, {
+                        children: item.label
+                    }),
+                    divider
+                ]
+            }, item.id);
+            if ('drill' === item.type) {
+                const Item = 'group' === level ? NavPanelGroupItem : NavPanelItem;
+                return /*#__PURE__*/ jsxs("span", {
+                    children: [
+                        /*#__PURE__*/ jsx(Item, {
+                            icon: item.icon,
+                            active: activeItemId === item.id,
+                            onClick: ()=>onDrillClick?.(item),
+                            children: item.label
+                        }),
+                        divider
+                    ]
+                }, item.id);
+            }
+            return null;
+        })
+    });
+NavItemsList.displayName = 'NavItemsList';
+export { NavItemsList };

package/dist/components/ProductNav/ProductNav.js

@@ -43,10 +43,19 @@ const ProductNav = ({ config, basePath, onNavigate, children })=>{
     ]);
     const drillInto = useCallback((drill)=>{
         setVisualDrillLevel(null);
+        const segments = pathname.replace(/^\/+|\/+$/g, '').split('/').filter(Boolean);
+        const prefixSegments = segments.slice(0, 2 * effectiveDrillLevel);
         const defaultEntity = drill.entities?.[0]?.id ?? 'default';
         const firstChildPath = findFirstLinkPath(drill.children) ?? '';
-        setPathname(`/${drill.path}/${defaultEntity}/${firstChildPath}`);
+        setPathname(`/${[
+            ...prefixSegments,
+            drill.path,
+            defaultEntity,
+            firstChildPath
+        ].join('/')}`);
     }, [
+        effectiveDrillLevel,
+        pathname,
         setPathname
     ]);
     const goBack = useCallback(()=>{