@uipath/apollo-vertex 1.2.0 → 1.4.0

package/dist/registry/filter-dropdown/filter-dropdown.d.ts

@@ -1,5 +1,5 @@
-import type { Column } from "@tanstack/react-table";
 import { type ReactNode } from "react";
+import type { DataTableColumn, RowData } from "../../lib/table-features";
 interface FilterDropdownOption {
     label: string;
     value: string;
@@ -7,14 +7,14 @@ interface FilterDropdownOption {
         className?: string;
     }>;
 }
-interface FilterDropdownProps<TData = unknown, TValue = unknown> {
+interface FilterDropdownProps<TData extends RowData = RowData, TValue = unknown> {
     title: string;
     options: FilterDropdownOption[];
     className?: string;
     /** Multi-select (default) or single-select mode */
     multiSelect?: boolean;
     /** TanStack Table column integration (optional) */
-    column?: Column<TData, TValue>;
+    column?: DataTableColumn<TData, TValue>;
     /** Standalone value — used when no column is provided */
     value?: string[] | string;
     /** Standalone onChange — used when no column is provided */
@@ -56,6 +56,6 @@ interface FilterDropdownProps<TData = unknown, TValue = unknown> {
     /** Known options for selected values that may not be loaded yet (used for the trigger label) */
     selectedOptions?: FilterDropdownOption[];
 }
-declare function FilterDropdown<TData, TValue>({ title, options, className, multiSelect, column, value: valueProp, onChange: onChangeProp, enableSearch, searchThreshold, searchPlaceholder, noOptionsMessage, noResultsMessage, align, popoverWidth, isLoading, hasMore, onLoadMore, loadingMessage, onSearchChange, searchDebounceMs, error, errorMessage, onRetry, retryLabel, selectedOptions, }: FilterDropdownProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+declare function FilterDropdown<TData extends RowData = RowData, TValue = unknown>({ title, options, className, multiSelect, column, value: valueProp, onChange: onChangeProp, enableSearch, searchThreshold, searchPlaceholder, noOptionsMessage, noResultsMessage, align, popoverWidth, isLoading, hasMore, onLoadMore, loadingMessage, onSearchChange, searchDebounceMs, error, errorMessage, onRetry, retryLabel, selectedOptions, }: FilterDropdownProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
 export { FilterDropdown };
 export type { FilterDropdownOption, FilterDropdownProps };

package/dist/registry/filter-dropdown/filter-dropdown.js

@@ -2,12 +2,12 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDownIcon, SearchIcon, XIcon } from "lucide-react";
 import { useState } from "react";
-import { useVertexTranslation } from "../../lib/vertex-translation.js";
 import { Button } from "../button/button.js";
 import { Input } from "../input/input.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../popover/popover.js";
 import { Separator } from "../separator/separator.js";
 import { cn } from "../../lib/utils.js";
+import { useVertexTranslation } from "../../lib/vertex-translation.js";
 import { FilterDropdownOptionRow } from "./filter-dropdown-option.js";
 import { FILTER_DROPDOWN_LIST_SLOT, FilterDropdownError, FilterDropdownLoadingMore, FilterDropdownSentinel, FilterDropdownSkeleton } from "./filter-dropdown-states.js";
 import { useFilterDropdownSearch } from "./use-filter-dropdown-search.js";

package/dist/registry/shell/shell-company.js

@@ -3,11 +3,11 @@ import { Link } from "@tanstack/react-router";
 import { AnimatePresence, motion } from "framer-motion";
 import { PanelLeft } from "lucide-react";
 import { useState } from "react";
-import { useVertexTranslation } from "../../lib/vertex-translation.js";
 import { Button } from "../button/button.js";
 import { useSidebar } from "../sidebar/sidebar.js";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../tooltip/tooltip.js";
 import { cn } from "../../lib/utils.js";
+import { useVertexTranslation } from "../../lib/vertex-translation.js";
 import { fastFadeTransition, iconHoverScale, scaleVariants, textFadeVariants } from "./shell-animations.js";
 import { CompanyLogoIcon } from "./shell-company-logo.js";
 function CollapsedLogo({ companyLogo, sidebarHovered, onExpand }) {
@@ -162,6 +162,7 @@ const Company = ({ companyName, productName, companyLogo, sidebarHovered = false
                                     children: /*#__PURE__*/ jsx(Button, {
                                         variant: "ghost",
                                         size: "icon-sm",
+                                        "aria-label": t("close_sidebar"),
                                         onClick: toggleSidebar,
                                         className: "ml-auto shrink-0 text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-foreground cursor-pointer",
                                         children: /*#__PURE__*/ jsx(PanelLeft, {

package/dist/registry/shell/shell-locale-provider.d.ts

@@ -1,7 +1,8 @@
 import { type PropsWithChildren, type ReactNode } from "react";
 interface LocaleProviderProps {
     loadingElement?: ReactNode;
+    configureI18n?: () => Promise<void>;
 }
 export declare const LocaleProviderComponent: ({ children }: PropsWithChildren) => ReactNode;
-export declare const LocaleProvider: ({ children, loadingElement, }: PropsWithChildren<LocaleProviderProps>) => string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element;
+export declare const LocaleProvider: ({ children, loadingElement, configureI18n, }: PropsWithChildren<LocaleProviderProps>) => string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/registry/shell/shell-locale-provider.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useEffectEvent, useState } from "react";
-import { useVertexTranslation } from "../../lib/vertex-translation.js";
 import { Spinner } from "../spinner/spinner.js";
 import { configurei18n } from "../../lib/i18n.js";
+import { useVertexTranslation } from "../../lib/vertex-translation.js";
 import { LANGUAGE_CHANGED_EVENT } from "./shell-constants.js";
 const LocaleProviderComponent = ({ children })=>{
     const { i18n } = useVertexTranslation();
@@ -21,15 +21,19 @@ const LocaleProviderComponent = ({ children })=>{
     }, []);
     return children;
 };
-const LocaleProvider = ({ children, loadingElement })=>{
+const LocaleProvider = ({ children, loadingElement, configureI18n = configurei18n })=>{
     const [isConfigured, setIsConfigured] = useState(false);
-    const configure = async ()=>{
-        await configurei18n();
-        setIsConfigured(true);
-    };
     useEffect(()=>{
-        configure();
-    }, []);
+        let cancelled = false;
+        configureI18n().then(()=>{
+            if (!cancelled) setIsConfigured(true);
+        });
+        return ()=>{
+            cancelled = true;
+        };
+    }, [
+        configureI18n
+    ]);
     if (!isConfigured) return loadingElement ?? /*#__PURE__*/ jsx("div", {
         className: "flex h-full w-full items-center justify-center",
         children: /*#__PURE__*/ jsx(Spinner, {

package/dist/registry/shell/shell-minimal-nav-item.d.ts

@@ -1,7 +1,8 @@
-import type { TranslationKey } from "./shell-translation-key";
+import type { ShellNavLabel } from "./shell-translation-key";
 interface MinimalNavItemProps {
     to: string;
-    label: TranslationKey;
+    active: boolean;
+    label: ShellNavLabel;
 }
-export declare const MinimalNavItem: ({ to, label }: MinimalNavItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MinimalNavItem: ({ to, active, label }: MinimalNavItemProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/registry/shell/shell-minimal-nav-item.js

@@ -1,16 +1,12 @@
 import { jsx } from "react/jsx-runtime";
-import { Link, useLocation } from "@tanstack/react-router";
+import { Link } from "@tanstack/react-router";
 import { cn } from "../../lib/utils.js";
 import { Text } from "./shell-text.js";
-const MinimalNavItem = ({ to, label })=>{
-    const { pathname } = useLocation();
-    const isActive = pathname === to;
-    return /*#__PURE__*/ jsx(Link, {
+const MinimalNavItem = ({ to, active, label })=>/*#__PURE__*/ jsx(Link, {
         to: to,
-        className: cn("px-4 py-1.5 rounded-full text-sm font-medium transition-colors duration-200 shrink-0 whitespace-nowrap", isActive ? "bg-[oklch(0.92_0.035_218)] dark:bg-primary-900/30 text-primary-700 dark:text-primary-400 font-semibold" : "text-muted-foreground hover:text-foreground hover:bg-black/[0.04] dark:hover:bg-white/[0.06]"),
+        className: cn("px-4 py-1.5 rounded-full text-sm font-medium transition-colors duration-200 shrink-0 whitespace-nowrap", active ? "bg-[oklch(0.92_0.035_218)] dark:bg-primary-900/30 text-primary-700 dark:text-primary-400 font-semibold" : "text-muted-foreground hover:text-foreground hover:bg-black/[0.04] dark:hover:bg-white/[0.06]"),
         children: /*#__PURE__*/ jsx(Text, {
             value: label
         })
     });
-};
 export { MinimalNavItem };

package/dist/registry/shell/shell-nav-active.d.ts

@@ -0,0 +1,12 @@
+export declare function navPathIsActive(pathname: string, path: string): boolean;
+export declare function navItemIsCurrent(pathname: string, path: string, childPaths?: readonly string[]): boolean;
+export declare function mostSpecificActivePath(pathname: string, paths: readonly string[]): string | null;
+export declare function navItemState(pathname: string, item: {
+    path: string;
+    to?: string;
+    childPaths?: readonly string[];
+}): {
+    href: string;
+    prefixActive: boolean;
+    current: boolean;
+};

package/dist/registry/shell/shell-nav-active.js

@@ -0,0 +1,24 @@
+function navPathIsActive(pathname, path) {
+    if ("/" === path) return "/" === pathname;
+    return pathname === path || pathname.startsWith(`${path}/`);
+}
+function navItemIsCurrent(pathname, path, childPaths = []) {
+    return navPathIsActive(pathname, path) && !childPaths.some((childPath)=>navPathIsActive(pathname, childPath));
+}
+function mostSpecificActivePath(pathname, paths) {
+    let match = null;
+    for (const path of paths)if (navPathIsActive(pathname, path)) {
+        if (null === match || path.length > match.length) match = path;
+    }
+    return match;
+}
+function navItemState(pathname, item) {
+    const childPaths = item.childPaths ?? [];
+    const childActive = childPaths.some((childPath)=>navPathIsActive(pathname, childPath));
+    return {
+        href: item.to ?? item.path,
+        prefixActive: navPathIsActive(pathname, item.path) || childActive,
+        current: navItemIsCurrent(pathname, item.path, childPaths)
+    };
+}
+export { mostSpecificActivePath, navItemIsCurrent, navItemState, navPathIsActive };

package/dist/registry/shell/shell-nav-label.d.ts

@@ -0,0 +1,7 @@
+export interface NavCatalog {
+    namespaces: readonly string[];
+    exists: (key: string, namespace: string) => boolean;
+    translate: (key: string, namespace: string) => string;
+}
+export declare function navCatalogFromHook(i18n: object): NavCatalog;
+export declare function readNavLabel(catalog: NavCatalog, key: string): string;

package/dist/registry/shell/shell-nav-label.js

@@ -0,0 +1,54 @@
+import { VERTEX_NAMESPACE } from "../../lib/vertex-translation.js";
+function configuredNamespaces(defaultNS) {
+    if ("string" == typeof defaultNS) return defaultNS.length > 0 ? [
+        defaultNS
+    ] : [
+        "translation"
+    ];
+    if (!Array.isArray(defaultNS)) return [
+        "translation"
+    ];
+    const namespaces = [];
+    for (const namespace of defaultNS)if ("string" == typeof namespace && namespace.length > 0) namespaces.push(namespace);
+    return namespaces.length > 0 ? namespaces : [
+        "translation"
+    ];
+}
+function lookupNamespaces(defaultNS) {
+    const configured = configuredNamespaces(defaultNS);
+    if (configured.includes(VERTEX_NAMESPACE)) return configured;
+    return [
+        ...configured,
+        VERTEX_NAMESPACE
+    ];
+}
+function isNamespacedI18n(value) {
+    return "options" in value && "exists" in value && "function" == typeof value.exists && "t" in value && "function" == typeof value.t;
+}
+function navCatalogFromHook(i18n) {
+    if (!isNamespacedI18n(i18n)) return {
+        namespaces: [
+            "translation",
+            VERTEX_NAMESPACE
+        ],
+        exists: ()=>false,
+        translate: (key)=>key
+    };
+    return {
+        namespaces: lookupNamespaces(i18n.options.defaultNS),
+        exists: (key, namespace)=>i18n.exists(key, {
+                ns: namespace
+            }),
+        translate: (key, namespace)=>{
+            const value = i18n.t(key, {
+                ns: namespace
+            });
+            return "string" == typeof value ? value : key;
+        }
+    };
+}
+function readNavLabel(catalog, key) {
+    for (const namespace of catalog.namespaces)if (catalog.exists(key, namespace)) return catalog.translate(key, namespace);
+    return key;
+}
+export { navCatalogFromHook, readNavLabel };

package/dist/registry/shell/shell-sidebar.js

@@ -4,45 +4,54 @@ import { Link, useLocation } from "@tanstack/react-router";
 import { AnimatePresence, motion } from "framer-motion";
 import { ChevronDown } from "lucide-react";
 import { useEffect, useState } from "react";
-import { useVertexTranslation } from "../../lib/vertex-translation.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../collapsible/collapsible.js";
 import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, useSidebar } from "../sidebar/sidebar.js";
 import { cn } from "../../lib/utils.js";
+import { useVertexTranslation } from "../../lib/vertex-translation.js";
 import { fastFadeTransition, iconHoverScale, textFadeVariants } from "./shell-animations.js";
 import { Company } from "./shell-company.js";
 import { MinimalCompany } from "./shell-minimal-company.js";
 import { MinimalNavItem } from "./shell-minimal-nav-item.js";
+import { mostSpecificActivePath, navItemState } from "./shell-nav-active.js";
+import { navCatalogFromHook, readNavLabel } from "./shell-nav-label.js";
 import { Text } from "./shell-text.js";
 import { UserProfile } from "./shell-user-profile.js";
 const activeNavClass = "text-sidebar-foreground/85 hover:text-sidebar-foreground data-[active=true]:text-primary-700 dark:data-[active=true]:text-primary-400 data-[active=true]:font-semibold data-[active=true]:bg-primary-100/40 dark:data-[active=true]:bg-primary-900/30";
 const navButtonClass = `font-medium ${activeNavClass}`;
 const subButtonClass = activeNavClass;
+const prefixActiveClass = "font-semibold text-primary-700 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-400 active:text-primary-700 dark:active:text-primary-400";
+const currentPillClass = "bg-primary-100/40 dark:bg-primary-900/30";
 const ShellSidebar = ({ companyName, productName, variant, companyLogo, navItems })=>{
-    if ("minimal" === variant) return /*#__PURE__*/ jsxs("header", {
-        className: "relative flex items-center justify-between px-4 sm:px-6 lg:px-8 py-6 transition-[padding] duration-300 ease-in-out",
-        children: [
-            /*#__PURE__*/ jsx(MinimalCompany, {
-                companyName: companyName,
-                productName: productName,
-                companyLogo: companyLogo
-            }),
-            navItems.length > 0 && /*#__PURE__*/ jsx("nav", {
-                className: "absolute left-1/2 -translate-x-1/2 flex items-center bg-muted dark:bg-[oklch(0.24_0.033_254)] rounded-full p-1.5 overflow-x-auto scrollbar-thin",
-                children: navItems.map((item)=>/*#__PURE__*/ jsx(MinimalNavItem, {
-                        to: item.path,
-                        label: item.label
-                    }, item.path))
-            }),
-            /*#__PURE__*/ jsx("div", {
-                className: "flex items-center gap-2",
-                children: /*#__PURE__*/ jsx(UserProfile, {
-                    isCollapsed: true,
-                    collapsedMenuSide: "bottom",
-                    collapsedMenuAlign: "end"
+    const { pathname } = useLocation();
+    if ("minimal" === variant) {
+        const activePath = mostSpecificActivePath(pathname, navItems.map((item)=>item.path));
+        return /*#__PURE__*/ jsxs("header", {
+            className: "relative flex items-center justify-between px-4 sm:px-6 lg:px-8 py-6 transition-[padding] duration-300 ease-in-out",
+            children: [
+                /*#__PURE__*/ jsx(MinimalCompany, {
+                    companyName: companyName,
+                    productName: productName,
+                    companyLogo: companyLogo
+                }),
+                navItems.length > 0 && /*#__PURE__*/ jsx("nav", {
+                    className: "absolute left-1/2 -translate-x-1/2 flex items-center bg-muted dark:bg-[oklch(0.24_0.033_254)] rounded-full p-1.5 overflow-x-auto scrollbar-thin",
+                    children: navItems.map((item)=>/*#__PURE__*/ jsx(MinimalNavItem, {
+                            to: item.to ?? item.path,
+                            active: item.path === activePath,
+                            label: item.label
+                        }, item.path))
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    className: "flex items-center gap-2",
+                    children: /*#__PURE__*/ jsx(UserProfile, {
+                        isCollapsed: true,
+                        collapsedMenuSide: "bottom",
+                        collapsedMenuAlign: "end"
+                    })
                 })
-            })
-        ]
-    });
+            ]
+        });
+    }
     return /*#__PURE__*/ jsx(SidebarNav, {
         companyName: companyName,
         productName: productName,
@@ -51,8 +60,9 @@ const ShellSidebar = ({ companyName, productName, variant, companyLogo, navItems
     });
 };
 function SidebarNav({ companyName, productName, companyLogo, navItems }) {
-    const { t } = useVertexTranslation();
-    const { state, toggleSidebar } = useSidebar();
+    const { t, i18n } = useVertexTranslation();
+    const catalog = navCatalogFromHook(i18n);
+    const { state } = useSidebar();
     const { pathname } = useLocation();
     const isCollapsed = "collapsed" === state;
     const [sidebarHovered, setSidebarHovered] = useState(false);
@@ -75,24 +85,16 @@ function SidebarNav({ companyName, productName, companyLogo, navItems }) {
         pathname,
         navItems
     ]);
-    const handleMenuClick = (path)=>{
-        if (isCollapsed) {
-            toggleSidebar();
-            setExpandedItems((prev)=>new Set(prev).add(path));
-        } else setExpandedItems((prev)=>{
+    const toggleGroup = (path)=>{
+        setExpandedItems((prev)=>{
             const next = new Set(prev);
             if (next.has(path)) next.delete(path);
             else next.add(path);
             return next;
         });
     };
-    const isActive = (path)=>{
-        if ("/" === path) return "/" === pathname;
-        return pathname === path || pathname.startsWith(`${path}/`);
-    };
-    const isParentActive = (item)=>item.subItems?.some((sub)=>isActive(sub.path)) ?? false;
     const getTooltipText = (label)=>{
-        if ("string" == typeof label) return t(label);
+        if ("string" == typeof label) return readNavLabel(catalog, label);
         return t(label.i18nKey, label.values);
     };
     return /*#__PURE__*/ jsxs(Sidebar, {
@@ -119,97 +121,107 @@ function SidebarNav({ companyName, productName, companyLogo, navItems }) {
                         children: /*#__PURE__*/ jsx(SidebarMenu, {
                             children: navItems.map((item)=>{
                                 const Icon = item.icon;
-                                const active = isActive(item.path);
-                                const parentActive = isParentActive(item);
                                 const isExpanded = expandedItems.has(item.path);
-                                if (item.subItems && item.subItems.length > 0) {
-                                    const showParentActive = isCollapsed && parentActive;
-                                    return /*#__PURE__*/ jsx(Collapsible, {
-                                        open: isExpanded && !isCollapsed,
-                                        onOpenChange: ()=>handleMenuClick(item.path),
-                                        className: "group/collapsible",
-                                        children: /*#__PURE__*/ jsxs(SidebarMenuItem, {
-                                            children: [
-                                                /*#__PURE__*/ jsx(CollapsibleTrigger, {
-                                                    asChild: true,
-                                                    children: /*#__PURE__*/ jsxs(SidebarMenuButton, {
+                                const childPaths = item.subItems?.map((sub)=>sub.path) ?? [];
+                                const row = navItemState(pathname, {
+                                    path: item.path,
+                                    to: item.to,
+                                    childPaths
+                                });
+                                if (item.subItems && item.subItems.length > 0) return /*#__PURE__*/ jsx(Collapsible, {
+                                    open: isExpanded && !isCollapsed,
+                                    onOpenChange: ()=>toggleGroup(item.path),
+                                    className: "group/collapsible",
+                                    children: /*#__PURE__*/ jsxs(SidebarMenuItem, {
+                                        children: [
+                                            /*#__PURE__*/ jsxs("div", {
+                                                className: cn("flex w-full min-w-0 items-center rounded-md", !isCollapsed && row.current && currentPillClass, !isCollapsed && !row.current && "hover:bg-sidebar-accent/50"),
+                                                children: [
+                                                    /*#__PURE__*/ jsx(SidebarMenuButton, {
+                                                        asChild: true,
                                                         tooltip: getTooltipText(item.label),
-                                                        isActive: showParentActive,
-                                                        className: navButtonClass,
-                                                        children: [
-                                                            /*#__PURE__*/ jsx(motion.span, {
-                                                                className: "inline-flex items-center justify-center shrink-0",
-                                                                ...isCollapsed ? {
-                                                                    whileHover: iconHoverScale
-                                                                } : {},
-                                                                children: /*#__PURE__*/ jsx(Icon, {
-                                                                    className: "size-4 shrink-0"
-                                                                })
-                                                            }),
-                                                            /*#__PURE__*/ jsx(AnimatePresence, {
-                                                                initial: false,
-                                                                children: !isCollapsed && /*#__PURE__*/ jsx(motion.span, {
-                                                                    variants: textFadeVariants,
-                                                                    initial: "initial",
-                                                                    animate: "animate",
-                                                                    exit: "exit",
-                                                                    transition: fastFadeTransition,
-                                                                    className: "whitespace-nowrap truncate",
-                                                                    children: /*#__PURE__*/ jsx(Text, {
-                                                                        value: item.label
+                                                        isActive: isCollapsed && row.current,
+                                                        className: cn(navButtonClass, row.prefixActive && prefixActiveClass, !isCollapsed && "w-auto min-w-0 flex-1 bg-transparent hover:bg-transparent"),
+                                                        children: /*#__PURE__*/ jsxs(Link, {
+                                                            to: row.href,
+                                                            children: [
+                                                                /*#__PURE__*/ jsx(motion.span, {
+                                                                    className: "inline-flex items-center justify-center shrink-0",
+                                                                    ...isCollapsed ? {
+                                                                        whileHover: iconHoverScale
+                                                                    } : {},
+                                                                    children: /*#__PURE__*/ jsx(Icon, {
+                                                                        className: "size-4 shrink-0"
                                                                     })
-                                                                }, "text")
+                                                                }),
+                                                                /*#__PURE__*/ jsx(AnimatePresence, {
+                                                                    initial: false,
+                                                                    children: !isCollapsed && /*#__PURE__*/ jsx(motion.span, {
+                                                                        variants: textFadeVariants,
+                                                                        initial: "initial",
+                                                                        animate: "animate",
+                                                                        exit: "exit",
+                                                                        transition: fastFadeTransition,
+                                                                        className: "whitespace-nowrap truncate",
+                                                                        children: /*#__PURE__*/ jsx(Text, {
+                                                                            value: item.label
+                                                                        })
+                                                                    }, "text")
+                                                                })
+                                                            ]
+                                                        })
+                                                    }),
+                                                    !isCollapsed && /*#__PURE__*/ jsx(CollapsibleTrigger, {
+                                                        asChild: true,
+                                                        children: /*#__PURE__*/ jsx("button", {
+                                                            type: "button",
+                                                            "aria-expanded": isExpanded,
+                                                            "aria-label": t(isExpanded ? "nav_collapse" : "nav_expand", {
+                                                                label: getTooltipText(item.label)
                                                             }),
-                                                            /*#__PURE__*/ jsx(AnimatePresence, {
-                                                                initial: false,
-                                                                children: !isCollapsed && /*#__PURE__*/ jsx(motion.div, {
-                                                                    variants: textFadeVariants,
-                                                                    initial: "initial",
-                                                                    animate: "animate",
-                                                                    exit: "exit",
-                                                                    transition: fastFadeTransition,
-                                                                    className: "ml-auto",
-                                                                    children: /*#__PURE__*/ jsx(ChevronDown, {
-                                                                        className: cn("size-4 transition-transform duration-200", isExpanded && "rotate-180")
-                                                                    })
-                                                                }, "chevron")
+                                                            className: "flex size-8 shrink-0 items-center justify-center text-sidebar-foreground/70 hover:text-sidebar-foreground",
+                                                            children: /*#__PURE__*/ jsx(ChevronDown, {
+                                                                className: cn("size-4 transition-transform duration-200", isExpanded && "rotate-180")
                                                             })
-                                                        ]
+                                                        })
                                                     })
-                                                }),
-                                                /*#__PURE__*/ jsx(CollapsibleContent, {
-                                                    children: /*#__PURE__*/ jsx(SidebarMenuSub, {
-                                                        className: "ml-4 mr-0 mt-1 gap-0.5 pl-3 pr-0",
-                                                        children: item.subItems.map((subItem)=>{
-                                                            const subActive = isActive(subItem.path);
-                                                            return /*#__PURE__*/ jsx(SidebarMenuSubItem, {
-                                                                children: /*#__PURE__*/ jsx(SidebarMenuSubButton, {
-                                                                    asChild: true,
-                                                                    isActive: subActive,
-                                                                    className: cn("cursor-pointer whitespace-nowrap", subButtonClass),
-                                                                    children: /*#__PURE__*/ jsx(Link, {
-                                                                        to: subItem.path,
-                                                                        children: /*#__PURE__*/ jsx(Text, {
-                                                                            value: subItem.label
-                                                                        })
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ jsx(CollapsibleContent, {
+                                                children: /*#__PURE__*/ jsx(SidebarMenuSub, {
+                                                    className: "ml-4 mr-0 mt-1 gap-0.5 pl-3 pr-0",
+                                                    children: item.subItems.map((subItem)=>{
+                                                        const sub = navItemState(pathname, {
+                                                            path: subItem.path,
+                                                            to: subItem.to
+                                                        });
+                                                        return /*#__PURE__*/ jsx(SidebarMenuSubItem, {
+                                                            children: /*#__PURE__*/ jsx(SidebarMenuSubButton, {
+                                                                asChild: true,
+                                                                isActive: sub.current,
+                                                                className: cn("cursor-pointer whitespace-nowrap", subButtonClass),
+                                                                children: /*#__PURE__*/ jsx(Link, {
+                                                                    to: sub.href,
+                                                                    children: /*#__PURE__*/ jsx(Text, {
+                                                                        value: subItem.label
                                                                     })
                                                                 })
-                                                            }, subItem.path);
-                                                        })
+                                                            })
+                                                        }, subItem.path);
                                                     })
                                                 })
-                                            ]
-                                        })
-                                    }, item.path);
-                                }
+                                            })
+                                        ]
+                                    })
+                                }, item.path);
                                 return /*#__PURE__*/ jsx(SidebarMenuItem, {
                                     children: /*#__PURE__*/ jsx(SidebarMenuButton, {
                                         tooltip: getTooltipText(item.label),
-                                        isActive: active,
+                                        isActive: row.current,
                                         asChild: true,
                                         className: navButtonClass,
                                         children: /*#__PURE__*/ jsxs(Link, {
-                                            to: item.path,
+                                            to: row.href,
                                             children: [
                                                 /*#__PURE__*/ jsx(motion.span, {
                                                     className: "inline-flex items-center justify-center shrink-0",
@@ -252,7 +264,7 @@ function SidebarNav({ companyName, productName, companyLogo, navItems }) {
             /*#__PURE__*/ jsx("div", {
                 className: "absolute inset-0 pointer-events-none",
                 style: {
-                    boxShadow: "inset -1px 0 0 0 color-mix(in srgb, var(--color-border) 50%, transparent)"
+                    boxShadow: "inset -1px 0 0 0 color-mix(in srgb, var(--border) 50%, transparent)"
                 }
             })
         ]

package/dist/registry/shell/shell-text.d.ts

@@ -1,4 +1,4 @@
-import type { TranslationKey } from "./shell-translation-key";
+import type { ShellNavLabel } from "./shell-translation-key";
 export declare const Text: ({ value }: {
-    value: TranslationKey;
+    value: ShellNavLabel;
 }) => string | import("react/jsx-runtime").JSX.Element;

package/dist/registry/shell/shell-text.js

@@ -1,9 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import { Trans } from "react-i18next";
 import { VERTEX_NAMESPACE, useVertexTranslation } from "../../lib/vertex-translation.js";
+import { navCatalogFromHook, readNavLabel } from "./shell-nav-label.js";
 const Text = ({ value })=>{
-    const { t } = useVertexTranslation();
-    if ("string" == typeof value) return t(value);
+    const { i18n } = useVertexTranslation();
+    if ("string" == typeof value) return readNavLabel(navCatalogFromHook(i18n), value);
     return /*#__PURE__*/ jsx(Trans, {
         ns: VERTEX_NAMESPACE,
         i18nKey: value.i18nKey,

package/dist/registry/shell/shell-translation-key.d.ts

@@ -5,3 +5,8 @@ export type TranslationKey = {
     values: Record<string, string | number | string[]>;
     components: Record<string, ReactElement>;
 } | ParseKeys;
+type TranslationObject = Extract<TranslationKey, {
+    i18nKey: ParseKeys;
+}>;
+export type ShellNavLabel = string | TranslationObject;
+export {};