@wallarm-org/design-system 0.43.0 → 0.44.1

package/dist/components/ProductNav/matchNav.js

@@ -0,0 +1,108 @@
+const findMatchingNode = (items, segment, groupPath = [])=>{
+    for (const item of items)if ('section-header' !== item.type) {
+        if ('group' === item.type) {
+            const found = findMatchingNode(item.children, segment, [
+                ...groupPath,
+                item
+            ]);
+            if (found) return found;
+        } else if (item.path === segment) return {
+            node: item,
+            groupPath
+        };
+    }
+    return null;
+};
+const matchNav = (pathname, config)=>{
+    const segments = pathname.replace(/^\/+|\/+$/g, '').split('/').filter(Boolean);
+    const navStack = [];
+    const breadcrumbSegments = [];
+    let activeItemId = null;
+    const rootEntry = {
+        title: config.productLabel,
+        parentLabel: null,
+        items: config.items,
+        activeItemId: null
+    };
+    navStack.push(rootEntry);
+    breadcrumbSegments.push({
+        type: 'link',
+        label: config.productLabel,
+        href: '/'
+    });
+    let segmentIndex = 0;
+    let currentItems = config.items;
+    let currentStackEntry = rootEntry;
+    while(segmentIndex < segments.length){
+        const seg = segments[segmentIndex];
+        const result = findMatchingNode(currentItems, seg);
+        if (!result) break;
+        const { node: match, groupPath } = result;
+        if ('link' === match.type) {
+            currentStackEntry.activeItemId = match.id;
+            activeItemId = match.id;
+            segmentIndex++;
+            for (const group of groupPath)breadcrumbSegments.push({
+                type: 'static',
+                label: group.label
+            });
+            breadcrumbSegments.push({
+                type: 'static',
+                label: match.label
+            });
+            break;
+        }
+        if ('drill' === match.type) {
+            currentStackEntry.activeItemId = match.id;
+            segmentIndex++;
+            if (segmentIndex >= segments.length) {
+                activeItemId = match.id;
+                breadcrumbSegments.push({
+                    type: 'static',
+                    label: match.label
+                });
+                break;
+            }
+            const paramValue = segments[segmentIndex];
+            segmentIndex++;
+            const matchedEntity = match.entities?.find((e)=>e.id === paramValue);
+            const entityLabel = matchedEntity?.label ?? paramValue;
+            const childPath = segments.slice(segmentIndex).join('/');
+            const scopeItems = match.entities?.map((e)=>({
+                    id: e.id,
+                    label: e.label,
+                    description: e.description,
+                    href: childPath ? `/${match.path}/${e.id}/${childPath}` : `/${match.path}/${e.id}`
+                }));
+            breadcrumbSegments.push({
+                type: 'scope-switcher',
+                label: entityLabel,
+                href: `/${segments.slice(0, segmentIndex).join('/')}`,
+                paramValue,
+                scopeItems
+            });
+            const drillEntry = {
+                title: entityLabel,
+                parentLabel: currentStackEntry.title,
+                items: match.children,
+                activeItemId: null
+            };
+            navStack.push(drillEntry);
+            currentItems = match.children;
+            currentStackEntry = drillEntry;
+            if (segmentIndex >= segments.length) {
+                activeItemId = null;
+                break;
+            }
+            continue;
+        }
+    }
+    const lastEntry = navStack[navStack.length - 1];
+    if (null === activeItemId && lastEntry) activeItemId = lastEntry.activeItemId;
+    return {
+        navStack,
+        breadcrumbSegments,
+        activeItemId
+    };
+};
+export { matchNav };

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

@@ -0,0 +1,5 @@
+import type { NavConfigDrill, NavConfigNode } from './types';
+/** Find the first link path in a config tree (used as default pathname) */
+export declare function findFirstLinkPath(items: NavConfigNode[]): string | null;
+/** Find a drill node by ID in a potentially nested item list */
+export declare function findDrillNode(items: NavConfigNode[], id: string | null): NavConfigDrill | null;

package/dist/components/ProductNav/navUtils.js

@@ -0,0 +1,26 @@
+function findFirstLinkPath(items) {
+    for (const item of items){
+        if ('link' === item.type) return item.path;
+        if ('group' === item.type) {
+            const found = findFirstLinkPath(item.children);
+            if (found) return found;
+        }
+        if ('drill' === item.type) {
+            const found = findFirstLinkPath(item.children);
+            if (found) return found;
+        }
+    }
+    return null;
+}
+function findDrillNode(items, id) {
+    if (!id) return null;
+    for (const item of items){
+        if ('drill' === item.type && item.id === id) return item;
+        if ('group' === item.type) {
+            const found = findDrillNode(item.children, id);
+            if (found) return found;
+        }
+    }
+    return null;
+}
+export { findDrillNode, findFirstLinkPath };

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

@@ -0,0 +1,69 @@
+import type { ComponentType } from 'react';
+import type { SvgIconProps } from '../../icons/SvgIcon';
+export interface NavConfig {
+    productLabel: string;
+    items: NavConfigNode[];
+}
+export type NavConfigNode = NavConfigLink | NavConfigDrill | NavConfigGroup | NavConfigSectionHeader;
+export interface NavConfigLink {
+    type: 'link';
+    id: string;
+    label: string;
+    path: string;
+    icon?: ComponentType<SvgIconProps>;
+    dividerAfter?: boolean;
+}
+export interface NavConfigDrill {
+    type: 'drill';
+    id: string;
+    label: string;
+    path: string;
+    /** URL parameter name for the dynamic segment */
+    param: string;
+    children: NavConfigNode[];
+    icon?: ComponentType<SvgIconProps>;
+    /** Available entities for the drill scope-switcher dropdown */
+    entities?: {
+        id: string;
+        label: string;
+        description?: string;
+    }[];
+    /** Render a visual divider after this item */
+    dividerAfter?: boolean;
+}
+export interface NavConfigGroup {
+    type: 'group';
+    id: string;
+    label: string;
+    children: NavConfigNode[];
+    icon?: ComponentType<SvgIconProps>;
+    defaultExpanded?: boolean;
+    /** Render a visual divider after this item */
+    dividerAfter?: boolean;
+}
+export interface NavConfigSectionHeader {
+    type: 'section-header';
+    id: string;
+    label: string;
+    dividerAfter?: boolean;
+}
+export interface NavStackEntry {
+    title: string;
+    parentLabel: string | null;
+    items: NavConfigNode[];
+    activeItemId: string | null;
+}
+export interface BreadcrumbSegment {
+    type: 'link' | 'scope-switcher' | 'static';
+    label: string;
+    href?: string;
+    /** Present on scope-switcher segments. Current entity parameter value. */
+    paramValue?: string;
+    /** Present on scope-switcher segments. Built scope items with hrefs for the dropdown. */
+    scopeItems?: {
+        id: string;
+        label: string;
+        description?: string;
+        href: string;
+    }[];
+}

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

@@ -0,0 +1,4 @@
+/** Push a new pathname to the browser history and notify subscribers. */
+export declare function pushPathname(path: string): void;
+/** Subscribe to `window.location.pathname` via `useSyncExternalStore`. */
+export declare function useLocationPathname(): string;

package/dist/components/ProductNav/useLocationPathname.js

@@ -0,0 +1,24 @@
+import { useSyncExternalStore } from "react";
+let listeners = [];
+function subscribe(listener) {
+    listeners = [
+        ...listeners,
+        listener
+    ];
+    window.addEventListener('popstate', listener);
+    return ()=>{
+        listeners = listeners.filter((l)=>l !== listener);
+        window.removeEventListener('popstate', listener);
+    };
+}
+function getSnapshot() {
+    return window.location.pathname;
+}
+function pushPathname(path) {
+    window.history.pushState(null, '', path);
+    for (const listener of listeners)listener();
+}
+function useLocationPathname() {
+    return useSyncExternalStore(subscribe, getSnapshot);
+}
+export { pushPathname, useLocationPathname };

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

@@ -0,0 +1,16 @@
+import { type Dispatch, type SetStateAction } from 'react';
+import type { BreadcrumbSegment, NavStackEntry } from './types';
+export interface UseProductNavResult {
+    navStack: NavStackEntry[];
+    peekDepth: number;
+    setPeekDepth: Dispatch<SetStateAction<number>>;
+    breadcrumbSegments: BreadcrumbSegment[];
+    activeItemId: string | null;
+}
+/**
+ * Hook providing computed nav state + peekDepth management.
+ *
+ * Reads computed state from ProductNav context.
+ * `peekDepth` is the only local mutable state and resets on pathname changes.
+ */
+export declare function useProductNav(): UseProductNavResult;

package/dist/components/ProductNav/useProductNav.js

@@ -0,0 +1,19 @@
+import { useEffect, useState } from "react";
+import { useProductNavContext } from "./ProductNavContext.js";
+function useProductNav() {
+    const { pathname, navStack, breadcrumbSegments, activeItemId } = useProductNavContext();
+    const [peekDepth, setPeekDepth] = useState(0);
+    useEffect(()=>{
+        setPeekDepth(0);
+    }, [
+        pathname
+    ]);
+    return {
+        navStack,
+        peekDepth,
+        setPeekDepth,
+        breadcrumbSegments,
+        activeItemId
+    };
+}
+export { useProductNav };

package/dist/components/RemoteShell/RemoteShell.d.ts

@@ -0,0 +1,7 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId';
+export interface RemoteShellProps extends HTMLAttributes<HTMLDivElement>, TestableProps {
+    ref?: Ref<HTMLDivElement>;
+    children?: ReactNode;
+}
+export declare const RemoteShell: FC<RemoteShellProps>;

package/dist/components/RemoteShell/RemoteShell.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { TestIdProvider } from "../../utils/testId.js";
+const RemoteShell = ({ ref, className, children, 'data-testid': testId, ...props })=>/*#__PURE__*/ jsx(TestIdProvider, {
+        value: testId,
+        children: /*#__PURE__*/ jsx("div", {
+            ...props,
+            ref: ref,
+            "data-slot": "remote-shell",
+            "data-testid": testId,
+            className: cn('grid h-full overflow-hidden [grid-template-areas:"panel_breadcrumb""panel_content"] [grid-template-columns:auto_1fr] [grid-template-rows:auto_1fr]', className),
+            children: children
+        })
+    });
+RemoteShell.displayName = 'RemoteShell';
+export { RemoteShell };

package/dist/components/RemoteShell/RemoteShellBreadcrumb.d.ts

@@ -0,0 +1,6 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+export interface RemoteShellBreadcrumbProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    children?: ReactNode;
+}
+export declare const RemoteShellBreadcrumb: FC<RemoteShellBreadcrumbProps>;

package/dist/components/RemoteShell/RemoteShellBreadcrumb.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+const RemoteShellBreadcrumb = ({ ref, className, children, ...props })=>{
+    const testId = useTestId('breadcrumb');
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        ref: ref,
+        "data-slot": "remote-shell-breadcrumb",
+        "data-testid": testId,
+        className: cn('[grid-area:breadcrumb] flex items-center px-24 py-8', className),
+        children: children
+    });
+};
+RemoteShellBreadcrumb.displayName = 'RemoteShellBreadcrumb';
+export { RemoteShellBreadcrumb };

package/dist/components/RemoteShell/RemoteShellContent.d.ts

@@ -0,0 +1,6 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+export interface RemoteShellContentProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    children?: ReactNode;
+}
+export declare const RemoteShellContent: FC<RemoteShellContentProps>;

package/dist/components/RemoteShell/RemoteShellContent.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+const RemoteShellContent = ({ ref, className, children, ...props })=>{
+    const testId = useTestId('content');
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        ref: ref,
+        "data-slot": "remote-shell-content",
+        "data-testid": testId,
+        className: cn('[grid-area:content] min-h-0 overflow-auto px-24 py-16 [scrollbar-width:thin]', className),
+        children: children
+    });
+};
+RemoteShellContent.displayName = 'RemoteShellContent';
+export { RemoteShellContent };

package/dist/components/RemoteShell/RemoteShellPanel.d.ts

@@ -0,0 +1,6 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+export interface RemoteShellPanelProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    children?: ReactNode;
+}
+export declare const RemoteShellPanel: FC<RemoteShellPanelProps>;

package/dist/components/RemoteShell/RemoteShellPanel.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+const RemoteShellPanel = ({ ref, className, children, ...props })=>{
+    const testId = useTestId('panel');
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        ref: ref,
+        "data-slot": "remote-shell-panel",
+        "data-testid": testId,
+        className: cn('[grid-area:panel] min-h-0', className),
+        children: children
+    });
+};
+RemoteShellPanel.displayName = 'RemoteShellPanel';
+export { RemoteShellPanel };

package/dist/components/RemoteShell/index.d.ts

@@ -0,0 +1,4 @@
+export { RemoteShell, type RemoteShellProps } from './RemoteShell';
+export { RemoteShellBreadcrumb, type RemoteShellBreadcrumbProps } from './RemoteShellBreadcrumb';
+export { RemoteShellContent, type RemoteShellContentProps } from './RemoteShellContent';
+export { RemoteShellPanel, type RemoteShellPanelProps } from './RemoteShellPanel';

package/dist/components/RemoteShell/index.js

@@ -0,0 +1,5 @@
+import { RemoteShell } from "./RemoteShell.js";
+import { RemoteShellBreadcrumb } from "./RemoteShellBreadcrumb.js";
+import { RemoteShellContent } from "./RemoteShellContent.js";
+import { RemoteShellPanel } from "./RemoteShellPanel.js";
+export { RemoteShell, RemoteShellBreadcrumb, RemoteShellContent, RemoteShellPanel };

package/dist/components/SimpleCharts/LineChart/LineChart.js

@@ -25,15 +25,15 @@ function LineChart({ data, series, xKey, activeKey: controlledActiveKey, onActiv
         onActiveKeyChange,
         seriesByKey
     });
+    const onZoomChangeRef = useRef(onZoomChange);
+    onZoomChangeRef.current = onZoomChange;
     const emitZoom = useCallback((range)=>{
-        onZoomChange?.(range);
-    }, [
-        onZoomChange
-    ]);
+        onZoomChangeRef.current?.(range);
+    }, []);
     const zoom = useLineChartZoomState({
         data,
         xKey,
-        onZoomChange
+        onZoomChangeRef
     });
     const hiddenSet = useMemo(()=>{
         if (!filteredKeys?.length) return EMPTY_HIDDEN_SET;

package/dist/components/SimpleCharts/LineChart/LineChartZoomBrush.js

@@ -1,5 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useContext, useEffect, useMemo, useRef } from "react";
+import { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { ReferenceArea, usePlotArea } from "recharts";
 import { formatChartDateTime } from "../lib/timeFormatters.js";
@@ -12,22 +12,81 @@ import { LineChartZoomPopoverRange } from "./LineChartZoomPopoverRange.js";
 import { formatRange as formatRange_js_formatRange } from "./lib/formatRange.js";
 const defaultFormatRange = formatRange_js_formatRange((value)=>formatChartDateTime(value) || String(value));
 const POPOVER_OFFSET_X = 12;
+const RECHARTS_SURFACE = '.recharts-surface';
 const LineChartZoomBrush = ({ disabled = false, formatRange = defaultFormatRange, confirmLabel = 'Zoom in', container })=>{
     const dataCtx = useContext(LineChartDataContext);
     const zoomCtx = useContext(LineChartZoomContext);
     const popoverRef = useRef(null);
     const plotArea = usePlotArea();
     const rootRef = zoomCtx?.rootRef;
-    const centerY = useMemo(()=>{
-        if (!plotArea || !rootRef?.current) return null;
-        const surface = rootRef.current.querySelector('.recharts-surface');
-        if (!surface) return null;
+    const drag = zoomCtx?.drag ?? null;
+    const pending = zoomCtx?.pending ?? null;
+    const cancelPending = zoomCtx?.cancelPending;
+    const confirmZoom = zoomCtx?.confirmZoom;
+    const isPopoverOpen = null !== drag || null !== pending;
+    const isPending = null !== pending;
+    const [scrollTick, setScrollTick] = useState(0);
+    useEffect(()=>{
+        if (!isPopoverOpen) return;
+        let lastTop = null;
+        let lastLeft = null;
+        const onScroll = ()=>{
+            const surface = rootRef?.current?.querySelector(RECHARTS_SURFACE);
+            if (!surface) return;
+            const { top, left } = surface.getBoundingClientRect();
+            if (top === lastTop && left === lastLeft) return;
+            lastTop = top;
+            lastLeft = left;
+            setScrollTick((n)=>n + 1);
+        };
+        window.addEventListener('scroll', onScroll, {
+            passive: true,
+            capture: true
+        });
+        window.addEventListener('resize', onScroll);
+        return ()=>{
+            window.removeEventListener('scroll', onScroll, {
+                capture: true
+            });
+            window.removeEventListener('resize', onScroll);
+        };
+    }, [
+        isPopoverOpen,
+        rootRef
+    ]);
+    const cachedGeometryRef = useRef(null);
+    const popoverGeometry = useMemo(()=>{
+        if (!isPopoverOpen) {
+            cachedGeometryRef.current = null;
+            return null;
+        }
+        if (!plotArea || !rootRef?.current) return cachedGeometryRef.current;
+        const surface = rootRef.current.querySelector(RECHARTS_SURFACE);
+        if (!surface) return cachedGeometryRef.current;
         const rect = surface.getBoundingClientRect();
-        return rect.top + plotArea.y + plotArea.height / 2;
+        const next = {
+            centerY: rect.top + plotArea.y + plotArea.height / 2,
+            left: rect.left
+        };
+        cachedGeometryRef.current = next;
+        return next;
     }, [
+        isPopoverOpen,
         plotArea,
+        rootRef,
+        scrollTick
+    ]);
+    const pendingAnchorLeft = useMemo(()=>{
+        if (!isPending || !rootRef?.current) return null;
+        const surface = rootRef.current.querySelector(RECHARTS_SURFACE);
+        if (!surface) return null;
+        return surface.getBoundingClientRect().left;
+    }, [
+        isPending,
         rootRef
     ]);
+    const centerY = popoverGeometry?.centerY ?? null;
+    const pendingScrollDeltaX = isPending && null !== pendingAnchorLeft && popoverGeometry ? popoverGeometry.left - pendingAnchorLeft : 0;
     const registerEnabled = zoomCtx?.registerEnabled;
     useEffect(()=>{
         if (disabled || !registerEnabled) return;
@@ -36,10 +95,6 @@ const LineChartZoomBrush = ({ disabled = false, formatRange = defaultFormatRange
         disabled,
         registerEnabled
     ]);
-    const drag = zoomCtx?.drag ?? null;
-    const pending = zoomCtx?.pending ?? null;
-    const cancelPending = zoomCtx?.cancelPending;
-    const confirmZoom = zoomCtx?.confirmZoom;
     useZoomPendingListeners({
         enabled: null !== pending,
         rootRef,
@@ -72,7 +127,6 @@ const LineChartZoomBrush = ({ disabled = false, formatRange = defaultFormatRange
     ]);
     if (disabled || !dataCtx || !zoomCtx) return null;
     const popoverPosition = drag ?? pending ?? null;
-    const isPending = null !== pending;
     const popoverContent = range && popoverPosition ? /*#__PURE__*/ jsx("div", {
         ref: popoverRef,
         "data-slot": "line-chart-zoom-cursor-popover",
@@ -80,7 +134,7 @@ const LineChartZoomBrush = ({ disabled = false, formatRange = defaultFormatRange
         className: lineChartZoomCursorPopoverClasses,
         style: {
             top: centerY ?? popoverPosition.clientY,
-            left: popoverPosition.clientX + POPOVER_OFFSET_X,
+            left: popoverPosition.clientX + pendingScrollDeltaX + POPOVER_OFFSET_X,
             transform: 'translateY(-50%)',
             pointerEvents: isPending ? 'auto' : 'none'
         },

package/dist/components/SimpleCharts/LineChart/hooks/useLineChartActiveKey.js

@@ -16,14 +16,15 @@ const useLineChartActiveKey = ({ controlledActiveKey, onActiveKeyChange, seriesB
     ]);
     const lastActiveKeyRef = useRef(void 0);
     lastActiveKeyRef.current = activeKey;
+    const onActiveKeyChangeRef = useRef(onActiveKeyChange);
+    onActiveKeyChangeRef.current = onActiveKeyChange;
     const setActiveKey = useCallback((key)=>{
         if (lastActiveKeyRef.current === key) return;
         lastActiveKeyRef.current = key;
         setInternalActiveKey(key);
-        onActiveKeyChange?.(key);
+        onActiveKeyChangeRef.current?.(key);
     }, [
-        setInternalActiveKey,
-        onActiveKeyChange
+        setInternalActiveKey
     ]);
     return {
         activeKey,

package/dist/components/SimpleCharts/LineChart/hooks/useLineChartZoomState.d.ts

@@ -1,3 +1,4 @@
+import { type RefObject } from 'react';
 import type { LineChartDatum, LineChartZoomDragState, LineChartZoomPendingState, LineChartZoomRange } from '../LineChartContext';
 interface UseLineChartZoomStateResult {
     enabled: boolean;
@@ -25,13 +26,19 @@ interface UseLineChartZoomStateResult {
  * `useZoomDragListeners` so the popover keeps tracking when the cursor leaves
  * the SVG and a mouseup outside the chart still releases into pending.
  *
+ * Drag updates from recharts (`updateDrag` — carries index+coords) and from
+ * the window listener (`handleDragMove` — coords only) both write into a
+ * single pending-frame buffer and flush together on the next animation frame.
+ * That collapses the two motion paths into one React commit per frame and
+ * keeps state writes off the synchronous mousemove path.
+ *
  * Dataset changes invalidate cached indices on both `drag` and `pending`, so
  * both reset whenever `data` or `xKey` flips — otherwise a stale range could
  * be committed against a refreshed dataset.
  */
-export declare const useLineChartZoomState: ({ data, xKey, onZoomChange, }: {
+export declare const useLineChartZoomState: ({ data, xKey, onZoomChangeRef, }: {
     data: LineChartDatum[];
     xKey: string;
-    onZoomChange: ((range: LineChartZoomRange | null) => void) | undefined;
+    onZoomChangeRef: RefObject<((range: LineChartZoomRange | null) => void) | undefined>;
 }) => UseLineChartZoomStateResult;
 export {};