@shipfox/react-ui 0.30.0 → 0.31.0

package/dist/components/shipql-editor/suggestions/shipql-range-facet-panel.js

@@ -0,0 +1,376 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from '../../../components/button/index.js';
+import { Icon } from '../../../components/icon/index.js';
+import { Slider } from '../../../components/slider/index.js';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { cn } from '../../../utils/cn.js';
+const RECENT_MAX = 5;
+const INPUT_CLASSES = 'w-40 shrink-0 rounded-4 border border-border-neutral-base-component bg-background-field-base shadow-button-neutral transition-[color,box-shadow] outline-none px-4 py-2 text-center text-xs text-foreground-neutral-base focus-visible:shadow-border-interactive-with-active [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none';
+function getRecentKey(facetName) {
+    return `shipql-range-recent-${facetName}`;
+}
+function loadRecent(facetName) {
+    try {
+        const raw = localStorage.getItem(getRecentKey(facetName));
+        if (!raw) return [];
+        return JSON.parse(raw);
+    } catch  {
+        return [];
+    }
+}
+function saveRecent(facetName, value) {
+    const existing = loadRecent(facetName).filter((v)=>v !== value);
+    const next = [
+        value,
+        ...existing
+    ].slice(0, RECENT_MAX);
+    try {
+        localStorage.setItem(getRecentKey(facetName), JSON.stringify(next));
+    } catch  {
+    // ignore storage errors
+    }
+}
+function clearRecent(facetName) {
+    try {
+        localStorage.removeItem(getRecentKey(facetName));
+    } catch  {
+    // ignore storage errors
+    }
+}
+function PresetRow({ value, onClick, isRecent, isHighlighted, rowRef }) {
+    return /*#__PURE__*/ _jsxs("button", {
+        ref: rowRef,
+        type: "button",
+        className: cn('flex w-full items-center gap-12 rounded-none px-8 py-6 h-28 text-left transition-colors duration-75 cursor-pointer', isHighlighted ? 'bg-background-button-transparent-hover' : 'hover:bg-background-button-transparent-hover'),
+        onMouseDown: (e)=>{
+            e.preventDefault();
+            onClick(value);
+        },
+        children: [
+            /*#__PURE__*/ _jsx(Icon, {
+                name: isRecent ? 'timeLine' : 'arrowRightLongFill',
+                className: "size-16 shrink-0 text-foreground-neutral-subtle"
+            }),
+            /*#__PURE__*/ _jsx("span", {
+                className: "flex-1 truncate text-sm text-foreground-neutral-subtle",
+                children: value
+            })
+        ]
+    });
+}
+export function ShipQLRangeFacetPanel({ facetName, config, onApply, isSelectingRef }) {
+    const absMin = Number(config.min);
+    const absMax = Number(config.max);
+    const [sliderValues, setSliderValues] = useState([
+        absMin,
+        absMax
+    ]);
+    const [recentValues, setRecentValues] = useState(()=>loadRecent(facetName));
+    const [selectedPresetIndex, setSelectedPresetIndex] = useState(-1);
+    const selectedPresetIndexRef = useRef(-1);
+    selectedPresetIndexRef.current = selectedPresetIndex;
+    const presetRowRefs = useRef([]);
+    // Local string state for inputs so mid-edit typing isn't clamped
+    const [minText, setMinText] = useState(String(absMin));
+    const [maxText, setMaxText] = useState(String(absMax));
+    const [lo, hi] = sliderValues;
+    // Keep input text in sync when slider moves
+    useEffect(()=>{
+        setMinText(String(lo));
+    }, [
+        lo
+    ]);
+    useEffect(()=>{
+        setMaxText(String(hi));
+    }, [
+        hi
+    ]);
+    // Hold dropdown open for any pointer interaction inside the panel
+    const panelRef = useRef(null);
+    useEffect(()=>{
+        const el = panelRef.current;
+        if (!el) return;
+        const onDown = ()=>{
+            isSelectingRef.current = true;
+        };
+        const onUp = ()=>{
+            // Small delay so the blur handler fires first and sees isSelectingRef=true
+            setTimeout(()=>{
+                isSelectingRef.current = false;
+            }, 150);
+        };
+        el.addEventListener('pointerdown', onDown);
+        window.addEventListener('pointerup', onUp);
+        return ()=>{
+            el.removeEventListener('pointerdown', onDown);
+            window.removeEventListener('pointerup', onUp);
+        };
+    }, [
+        isSelectingRef
+    ]);
+    const addLabel = useMemo(()=>{
+        if (lo === absMin && hi === absMax) return `Add ">=${lo},<=${hi}"`;
+        if (lo === absMin) return `Add "<=${hi}"`;
+        if (hi === absMax) return `Add ">=${lo}"`;
+        return `Add ">=${lo},<=${hi}"`;
+    }, [
+        lo,
+        hi,
+        absMin,
+        absMax
+    ]);
+    const buildValue = useCallback(()=>{
+        if (lo === absMin && hi === absMax) return `[${lo} TO ${hi}]`;
+        if (lo === absMin) return `<=${hi}`;
+        if (hi === absMax) return `>=${lo}`;
+        return `[${lo} TO ${hi}]`;
+    }, [
+        lo,
+        hi,
+        absMin,
+        absMax
+    ]);
+    const handleApplyRange = useCallback(()=>{
+        const value = buildValue();
+        saveRecent(facetName, value);
+        setRecentValues(loadRecent(facetName));
+        onApply(value);
+    }, [
+        buildValue,
+        facetName,
+        onApply
+    ]);
+    const handlePreset = useCallback((preset)=>{
+        saveRecent(facetName, preset);
+        setRecentValues(loadRecent(facetName));
+        onApply(preset);
+    }, [
+        facetName,
+        onApply
+    ]);
+    const handleClearRecent = useCallback((e)=>{
+        e.preventDefault();
+        clearRecent(facetName);
+        setRecentValues([]);
+    }, [
+        facetName
+    ]);
+    // Build flat list of navigable preset values (recent + common)
+    const navigableItems = useMemo(()=>{
+        const items = [];
+        for (const v of recentValues.slice(0, 3))items.push(v);
+        if (config.presets) {
+            for (const v of config.presets)items.push(v);
+        }
+        return items;
+    }, [
+        recentValues,
+        config.presets
+    ]);
+    // Keyboard navigation for preset/recent items (capture phase to fire before Lexical)
+    useEffect(()=>{
+        if (navigableItems.length === 0) return;
+        const handleKeyDown = (e)=>{
+            // Don't intercept when user is editing min/max inputs
+            if (document.activeElement instanceof HTMLInputElement) return;
+            if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                e.stopPropagation();
+                setSelectedPresetIndex((prev)=>prev + 1 >= navigableItems.length ? 0 : prev + 1);
+            } else if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                e.stopPropagation();
+                setSelectedPresetIndex((prev)=>prev - 1 < 0 ? navigableItems.length - 1 : prev - 1);
+            } else if (e.key === 'Enter') {
+                const idx = selectedPresetIndexRef.current;
+                if (idx < 0) return;
+                e.preventDefault();
+                e.stopPropagation();
+                const value = navigableItems[idx];
+                if (value) handlePreset(value);
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown, true);
+        return ()=>window.removeEventListener('keydown', handleKeyDown, true);
+    }, [
+        navigableItems,
+        handlePreset
+    ]);
+    // Scroll selected preset into view
+    useEffect(()=>{
+        const el = presetRowRefs.current[selectedPresetIndex];
+        if (el) el.scrollIntoView({
+            behavior: 'smooth',
+            block: 'nearest'
+        });
+    }, [
+        selectedPresetIndex
+    ]);
+    // Commit min input on blur or Enter
+    const commitMin = useCallback(()=>{
+        const v = Number(minText);
+        if (!Number.isNaN(v)) {
+            const clamped = Math.min(Math.max(v, absMin), hi);
+            setSliderValues([
+                clamped,
+                hi
+            ]);
+            setMinText(String(clamped));
+        } else {
+            setMinText(String(lo));
+        }
+    }, [
+        minText,
+        absMin,
+        hi,
+        lo
+    ]);
+    // Commit max input on blur or Enter
+    const commitMax = useCallback(()=>{
+        const v = Number(maxText);
+        if (!Number.isNaN(v)) {
+            const clamped = Math.max(Math.min(v, absMax), lo);
+            setSliderValues([
+                lo,
+                clamped
+            ]);
+            setMaxText(String(clamped));
+        } else {
+            setMaxText(String(hi));
+        }
+    }, [
+        maxText,
+        absMax,
+        lo,
+        hi
+    ]);
+    return /*#__PURE__*/ _jsxs("div", {
+        ref: panelRef,
+        className: "flex flex-col",
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: "flex w-full items-center px-8 h-30 shrink-0 border-b border-border-neutral-base-component",
+                children: /*#__PURE__*/ _jsx("span", {
+                    className: "text-xs font-normal uppercase text-foreground-neutral-muted",
+                    children: facetName
+                })
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "p-8 space-y-2",
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex items-center gap-12",
+                        children: [
+                            /*#__PURE__*/ _jsx("input", {
+                                type: "number",
+                                value: minText,
+                                onChange: (e)=>setMinText(e.target.value),
+                                onBlur: commitMin,
+                                onKeyDown: (e)=>{
+                                    if (e.key === 'Enter') commitMin();
+                                },
+                                className: INPUT_CLASSES
+                            }),
+                            /*#__PURE__*/ _jsx(Slider, {
+                                className: "flex-1",
+                                min: absMin,
+                                max: absMax,
+                                value: sliderValues,
+                                onValueChange: (vals)=>{
+                                    const newLo = vals[0];
+                                    const newHi = vals[1];
+                                    if (newLo !== undefined && newHi !== undefined) {
+                                        setSliderValues([
+                                            newLo,
+                                            newHi
+                                        ]);
+                                    }
+                                }
+                            }),
+                            /*#__PURE__*/ _jsx("input", {
+                                type: "number",
+                                value: maxText,
+                                onChange: (e)=>setMaxText(e.target.value),
+                                onBlur: commitMax,
+                                onKeyDown: (e)=>{
+                                    if (e.key === 'Enter') commitMax();
+                                },
+                                className: INPUT_CLASSES
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        type: "button",
+                        onMouseDown: (e)=>{
+                            e.preventDefault();
+                            handleApplyRange();
+                        },
+                        variant: "secondary",
+                        size: "sm",
+                        className: "mt-6 w-full justify-start shadow-none rounded-4!",
+                        iconLeft: "addLine",
+                        children: addLabel
+                    })
+                ]
+            }),
+            (recentValues.length > 0 || config.presets && config.presets.length > 0) && /*#__PURE__*/ _jsxs("div", {
+                className: "border-t border-border-neutral-base-component",
+                children: [
+                    recentValues.length > 0 && /*#__PURE__*/ _jsxs(_Fragment, {
+                        children: [
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "flex w-full items-center px-8 h-30 shrink-0",
+                                children: [
+                                    /*#__PURE__*/ _jsx("span", {
+                                        className: "flex-1 text-xs font-normal uppercase text-foreground-neutral-muted",
+                                        children: "Recent"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        type: "button",
+                                        variant: "transparentMuted",
+                                        size: "xs",
+                                        onMouseDown: handleClearRecent,
+                                        children: "Clear"
+                                    })
+                                ]
+                            }),
+                            recentValues.slice(0, 3).map((v, i)=>/*#__PURE__*/ _jsx(PresetRow, {
+                                    value: v,
+                                    onClick: handlePreset,
+                                    isRecent: true,
+                                    isHighlighted: selectedPresetIndex === i,
+                                    rowRef: (el)=>{
+                                        presetRowRefs.current[i] = el;
+                                    }
+                                }, v))
+                        ]
+                    }),
+                    config.presets && config.presets.length > 0 && /*#__PURE__*/ _jsxs(_Fragment, {
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                className: "flex w-full items-center px-8 h-30 shrink-0",
+                                children: /*#__PURE__*/ _jsx("span", {
+                                    className: "text-xs font-normal uppercase text-foreground-neutral-muted",
+                                    children: "Common"
+                                })
+                            }),
+                            config.presets.map((v, i)=>{
+                                const idx = recentValues.slice(0, 3).length + i;
+                                return /*#__PURE__*/ _jsx(PresetRow, {
+                                    value: v,
+                                    onClick: handlePreset,
+                                    isHighlighted: selectedPresetIndex === idx,
+                                    rowRef: (el)=>{
+                                        presetRowRefs.current[idx] = el;
+                                    }
+                                }, v);
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=shipql-range-facet-panel.js.map

package/dist/components/shipql-editor/suggestions/shipql-suggestion-item.d.ts

@@ -0,0 +1,11 @@
+import type { SuggestionItem } from './types';
+interface ShipQLSuggestionItemProps {
+    item: SuggestionItem;
+    isHighlighted: boolean;
+    isNegated?: boolean;
+    onMouseDown: (value: string) => void;
+    itemRef?: (el: HTMLButtonElement | null) => void;
+}
+export declare function ShipQLSuggestionItem({ item, isHighlighted, isNegated, onMouseDown, itemRef, }: ShipQLSuggestionItemProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=shipql-suggestion-item.d.ts.map

package/dist/components/shipql-editor/suggestions/shipql-suggestion-item.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../../utils/cn.js';
+export function ShipQLSuggestionItem({ item, isHighlighted, isNegated, onMouseDown, itemRef }) {
+    if (item.type === 'section-header') {
+        return /*#__PURE__*/ _jsx("div", {
+            className: "flex w-full items-center px-8 h-30 shrink-0",
+            children: /*#__PURE__*/ _jsx("span", {
+                className: "text-xs font-normal uppercase text-foreground-neutral-muted",
+                children: item.label
+            })
+        });
+    }
+    return /*#__PURE__*/ _jsxs("button", {
+        ref: itemRef,
+        type: "button",
+        onMouseDown: (e)=>{
+            e.preventDefault();
+            onMouseDown(item.value);
+        },
+        className: cn('flex w-full items-center gap-12 rounded-none px-8 py-6 h-24 text-left transition-colors duration-75 cursor-pointer', isHighlighted ? 'bg-background-button-transparent-hover' : 'hover:bg-background-button-transparent-hover'),
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex min-w-0 flex-1 items-center gap-12",
+                children: [
+                    item.icon,
+                    /*#__PURE__*/ _jsx("span", {
+                        className: cn('flex-1 truncate text-sm', isNegated ? 'text-foreground-highlights-interactive' : item.selected ? 'text-foreground-neutral-base' : 'text-foreground-neutral-subtle'),
+                        children: isNegated ? `-${item.label}` : item.label
+                    })
+                ]
+            }),
+            isHighlighted && /*#__PURE__*/ _jsx("span", {
+                className: "shrink-0 text-xs text-foreground-neutral-muted font-medium select-none",
+                children: "↵"
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=shipql-suggestion-item.js.map

package/dist/components/shipql-editor/suggestions/shipql-suggestions-dropdown.d.ts

@@ -0,0 +1,19 @@
+import { type SyntaxHintMode } from './shipql-suggestions-footer';
+import type { SuggestionItem } from './types';
+interface ShipQLSuggestionsDropdownProps {
+    items: SuggestionItem[];
+    selectedIndex: number;
+    isSelectingRef: React.RefObject<boolean>;
+    onSelect: (value: string) => void;
+    isLoading?: boolean;
+    isNegated: boolean;
+    onToggleNegate: (negated: boolean) => void;
+    showValueActions: boolean;
+    showSyntaxHelp: boolean;
+    onToggleSyntaxHelp: () => void;
+    isError?: boolean;
+    syntaxHintMode: SyntaxHintMode;
+}
+export declare function ShipQLSuggestionsDropdown({ items, selectedIndex, isSelectingRef, onSelect, isLoading, isNegated, onToggleNegate, showValueActions, showSyntaxHelp, onToggleSyntaxHelp, isError, syntaxHintMode, }: ShipQLSuggestionsDropdownProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=shipql-suggestions-dropdown.d.ts.map

package/dist/components/shipql-editor/suggestions/shipql-suggestions-dropdown.js

@@ -0,0 +1,128 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PopoverContent } from '../../../components/popover/index.js';
+import { ScrollArea } from '../../../components/scroll-area/index.js';
+import { Skeleton } from '../../../components/skeleton/index.js';
+import { useCallback, useEffect, useRef } from 'react';
+import { ShipQLRangeFacetPanel } from './shipql-range-facet-panel.js';
+import { ShipQLSuggestionItem } from './shipql-suggestion-item.js';
+import { ShipQLSuggestionsFooter } from './shipql-suggestions-footer.js';
+export function ShipQLSuggestionsDropdown({ items, selectedIndex, isSelectingRef, onSelect, isLoading, isNegated, onToggleNegate, showValueActions, showSyntaxHelp, onToggleSyntaxHelp, isError, syntaxHintMode }) {
+    const itemRefs = useRef([]);
+    useEffect(()=>{
+        const el = itemRefs.current[selectedIndex];
+        if (el) el.scrollIntoView({
+            behavior: 'smooth',
+            block: 'nearest'
+        });
+    }, [
+        selectedIndex
+    ]);
+    // Shift key toggles negation while dropdown is visible
+    useEffect(()=>{
+        if (!showValueActions) return;
+        const handleKeyDown = (e)=>{
+            if (e.key === 'Shift') onToggleNegate(true);
+        };
+        const handleKeyUp = (e)=>{
+            if (e.key === 'Shift') onToggleNegate(false);
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        window.addEventListener('keyup', handleKeyUp);
+        return ()=>{
+            window.removeEventListener('keydown', handleKeyDown);
+            window.removeEventListener('keyup', handleKeyUp);
+        };
+    }, [
+        showValueActions,
+        onToggleNegate
+    ]);
+    // Reset negation when showValueActions turns off
+    useEffect(()=>{
+        if (!showValueActions) onToggleNegate(false);
+    }, [
+        showValueActions,
+        onToggleNegate
+    ]);
+    const handleMouseDown = useCallback((value)=>{
+        isSelectingRef.current = true;
+        onSelect(value);
+        setTimeout(()=>{
+            isSelectingRef.current = false;
+        }, 150);
+    }, [
+        isSelectingRef,
+        onSelect
+    ]);
+    const firstItem = items.length === 1 ? items[0] : undefined;
+    const rangeItem = firstItem?.type === 'range-slider' && firstItem.facetName && firstItem.rangeFacetConfig ? firstItem : null;
+    const popoverContent = rangeItem ? /*#__PURE__*/ _jsxs("div", {
+        className: "flex flex-col overflow-hidden rounded-8 bg-background-neutral-base shadow-tooltip",
+        children: [
+            /*#__PURE__*/ _jsx(ScrollArea, {
+                className: "flex-1 min-h-0 overflow-y-auto scrollbar",
+                children: /*#__PURE__*/ _jsx(ShipQLRangeFacetPanel, {
+                    facetName: rangeItem.facetName,
+                    config: rangeItem.rangeFacetConfig,
+                    isSelectingRef: isSelectingRef,
+                    onApply: onSelect
+                })
+            }),
+            /*#__PURE__*/ _jsx(ShipQLSuggestionsFooter, {
+                showValueActions: false,
+                showSyntaxHelp: showSyntaxHelp,
+                onToggleSyntaxHelp: onToggleSyntaxHelp,
+                isError: isError,
+                syntaxHintMode: "range"
+            })
+        ]
+    }) : /*#__PURE__*/ _jsxs("div", {
+        className: "flex flex-col overflow-hidden rounded-8 bg-background-neutral-base shadow-tooltip max-h-[min(70vh,320px)] min-h-0",
+        children: [
+            /*#__PURE__*/ _jsx(ScrollArea, {
+                className: "flex-1 min-h-0 overflow-y-auto scrollbar",
+                children: /*#__PURE__*/ _jsx("div", {
+                    className: "flex flex-col",
+                    children: isLoading && items.length === 0 ? /*#__PURE__*/ _jsx("div", {
+                        className: "px-8 py-6 flex items-center",
+                        children: /*#__PURE__*/ _jsx(Skeleton, {
+                            className: "w-60 h-20"
+                        })
+                    }) : items.length === 0 ? /*#__PURE__*/ _jsx("div", {
+                        className: "px-8 py-6 text-sm text-foreground-neutral-muted",
+                        children: "No suggestions found"
+                    }) : items.map((item, index)=>/*#__PURE__*/ _jsx(ShipQLSuggestionItem, {
+                            item: item,
+                            isHighlighted: selectedIndex === index,
+                            isNegated: isNegated && showValueActions,
+                            onMouseDown: handleMouseDown,
+                            itemRef: (el)=>{
+                                itemRefs.current[index] = el;
+                            }
+                        }, item.value))
+                })
+            }),
+            /*#__PURE__*/ _jsx(ShipQLSuggestionsFooter, {
+                showValueActions: showValueActions,
+                showSyntaxHelp: showSyntaxHelp,
+                onToggleSyntaxHelp: onToggleSyntaxHelp,
+                isError: isError,
+                syntaxHintMode: syntaxHintMode
+            })
+        ]
+    });
+    return /*#__PURE__*/ _jsx(PopoverContent, {
+        align: "start",
+        sideOffset: 4,
+        className: "p-0 w-(--radix-popover-trigger-width) rounded-8",
+        onOpenAutoFocus: (e)=>e.preventDefault(),
+        onInteractOutside: (e)=>{
+            if (isSelectingRef.current) e.preventDefault();
+        },
+        onPointerDownOutside: (e)=>{
+            if (isSelectingRef.current) e.preventDefault();
+        },
+        children: popoverContent
+    });
+}
+
+//# sourceMappingURL=shipql-suggestions-dropdown.js.map

package/dist/components/shipql-editor/suggestions/shipql-suggestions-footer.d.ts

@@ -0,0 +1,11 @@
+export type SyntaxHintMode = 'value' | 'range';
+interface ShipQLSuggestionsFooterProps {
+    showValueActions: boolean;
+    showSyntaxHelp: boolean;
+    onToggleSyntaxHelp: () => void;
+    isError?: boolean;
+    syntaxHintMode: SyntaxHintMode;
+}
+export declare function ShipQLSuggestionsFooter({ showValueActions, showSyntaxHelp, onToggleSyntaxHelp, isError, syntaxHintMode, }: ShipQLSuggestionsFooterProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=shipql-suggestions-footer.d.ts.map