@shipfox/react-ui 0.21.0 → 0.23.0

package/dist/components/interval-selector/hooks/use-interval-selector-navigation.js

@@ -0,0 +1,58 @@
+import { useCallback, useMemo } from 'react';
+export function useIntervalSelectorNavigation({ relativeSuggestions, intervalSuggestions, highlightedIndex, setHighlightedIndex, popoverOpen, calendarOpen, onOpenCalendar, onSelect }) {
+    const allNavigableItems = useMemo(()=>[
+            ...relativeSuggestions,
+            ...intervalSuggestions,
+            {
+                type: 'calendar',
+                label: 'Select from calendar'
+            }
+        ], [
+        relativeSuggestions,
+        intervalSuggestions
+    ]);
+    const canNavigate = popoverOpen && !calendarOpen;
+    const currentIndex = highlightedIndex;
+    const isNavigating = canNavigate && currentIndex >= 0 && currentIndex < allNavigableItems.length;
+    const onKeyDown = useCallback((e)=>{
+        if (!canNavigate) return;
+        const items = allNavigableItems;
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            const nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
+            setHighlightedIndex(nextIndex);
+            return;
+        }
+        if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            const nextIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
+            setHighlightedIndex(nextIndex);
+            return;
+        }
+        if (e.key === 'Enter' && isNavigating) {
+            e.preventDefault();
+            const item = items[currentIndex];
+            if (item.type === 'calendar') {
+                onOpenCalendar();
+            } else {
+                onSelect(item);
+            }
+            return;
+        }
+    }, [
+        canNavigate,
+        isNavigating,
+        currentIndex,
+        allNavigableItems,
+        setHighlightedIndex,
+        onOpenCalendar,
+        onSelect
+    ]);
+    return {
+        allNavigableItems,
+        onKeyDown,
+        isNavigating
+    };
+}
+
+//# sourceMappingURL=use-interval-selector-navigation.js.map

package/dist/components/interval-selector/hooks/use-interval-selector.d.ts

@@ -0,0 +1,25 @@
+import type { DismissableLayerProps } from '@radix-ui/react-dismissable-layer';
+import type { IntervalSelectorProps } from '../interval-selector';
+import type { IntervalSelection, IntervalSuggestion, RelativeSuggestion } from '../types';
+export interface UseIntervalSelectorProps extends Pick<IntervalSelectorProps, 'onSelectionChange'> {
+    relativeSuggestions: RelativeSuggestion[];
+    intervalSuggestions: IntervalSuggestion[];
+}
+export declare function useIntervalSelector({ onSelectionChange, relativeSuggestions, intervalSuggestions, }: UseIntervalSelectorProps): {
+    onSelect: (selection: IntervalSelection) => void;
+    popoverOpen: boolean;
+    calendarOpen: boolean;
+    highlightedIndex: number;
+    inputRef: import("react").RefObject<HTMLInputElement | null>;
+    onFocus: () => void;
+    onBlur: () => void;
+    onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    onOpenCalendar: () => void;
+    onChange: () => void;
+    onInteractOutside: (e: Parameters<Required<DismissableLayerProps>["onInteractOutside"]>[0]) => void;
+    closeAll: () => void;
+    isNavigating: boolean;
+    isFocused: boolean;
+    setIsFocused: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+};
+//# sourceMappingURL=use-interval-selector.d.ts.map

package/dist/components/interval-selector/hooks/use-interval-selector.js

@@ -0,0 +1,75 @@
+import { useCallback, useRef, useState } from 'react';
+import { useIntervalSelectorNavigation } from './use-interval-selector-navigation.js';
+export function useIntervalSelector({ onSelectionChange, relativeSuggestions, intervalSuggestions }) {
+    const [popoverOpen, setPopoverOpen] = useState(false);
+    const [calendarOpen, setCalendarOpen] = useState(false);
+    const [highlightedIndex, setHighlightedIndex] = useState(-1);
+    const [isFocused, setIsFocused] = useState(false);
+    const isSelectingRef = useRef(false);
+    const inputRef = useRef(null);
+    const closeAll = useCallback(()=>{
+        setPopoverOpen(false);
+        inputRef.current?.blur();
+        setCalendarOpen(false);
+        setHighlightedIndex(-1);
+        setIsFocused(false);
+    }, []);
+    const onSelect = useCallback((selection)=>{
+        isSelectingRef.current = true;
+        onSelectionChange(selection);
+        closeAll();
+    }, [
+        closeAll,
+        onSelectionChange
+    ]);
+    const onFocus = useCallback(()=>{
+        setPopoverOpen(true);
+        setHighlightedIndex(-1);
+    }, []);
+    const onBlur = useCallback(()=>{
+        if (!calendarOpen) setPopoverOpen(false);
+    }, [
+        calendarOpen
+    ]);
+    const onOpenCalendar = useCallback(()=>{
+        setCalendarOpen(true);
+    }, []);
+    const { onKeyDown, isNavigating } = useIntervalSelectorNavigation({
+        relativeSuggestions,
+        intervalSuggestions,
+        highlightedIndex,
+        setHighlightedIndex,
+        popoverOpen,
+        calendarOpen,
+        onOpenCalendar,
+        onSelect
+    });
+    const onInteractOutside = useCallback((e)=>{
+        e.preventDefault();
+        const target = e.target;
+        const isClickOnPopover = inputRef.current && (inputRef.current.contains(target) || target.closest('[data-radix-popover-trigger]'));
+        if (isClickOnPopover) return;
+        closeAll();
+    }, [
+        closeAll
+    ]);
+    return {
+        onSelect,
+        popoverOpen,
+        calendarOpen,
+        highlightedIndex,
+        inputRef,
+        onFocus,
+        onBlur,
+        onKeyDown,
+        onOpenCalendar,
+        onChange: ()=>setHighlightedIndex(-1),
+        onInteractOutside,
+        closeAll,
+        isNavigating,
+        isFocused,
+        setIsFocused
+    };
+}
+
+//# sourceMappingURL=use-interval-selector.js.map

package/dist/components/interval-selector/index.d.ts

@@ -0,0 +1,3 @@
+export * from './interval-selector';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/interval-selector/index.js

@@ -0,0 +1,4 @@
+export * from './interval-selector.js';
+export * from './types.js';
+
+//# sourceMappingURL=index.js.map

package/dist/components/interval-selector/interval-selector-calendar.d.ts

@@ -0,0 +1,7 @@
+import type { IntervalSelection } from './types';
+interface IntervalSelectorCalendarProps {
+    onSelect: (selection: IntervalSelection) => void;
+}
+export declare function IntervalSelectorCalendar({ onSelect }: IntervalSelectorCalendarProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=interval-selector-calendar.d.ts.map

package/dist/components/interval-selector/interval-selector-calendar.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Calendar } from '../../components/calendar/index.js';
+import { endOfDay, format, startOfDay } from 'date-fns';
+import { useCallback, useState } from 'react';
+export function IntervalSelectorCalendar({ onSelect }) {
+    const [selectedRange, setSelectedRange] = useState(undefined);
+    const handleSelect = useCallback((_, selectedDay)=>{
+        if (!selectedDay) return setSelectedRange(undefined);
+        if (!selectedRange?.from) return setSelectedRange({
+            from: selectedDay,
+            to: undefined
+        });
+        const start = selectedDay < selectedRange.from ? startOfDay(selectedDay) : startOfDay(selectedRange.from);
+        const end = selectedDay < selectedRange.from ? endOfDay(selectedRange.from) : endOfDay(selectedDay);
+        onSelect({
+            type: 'interval',
+            interval: {
+                start,
+                end
+            }
+        });
+        return setSelectedRange(undefined);
+    }, [
+        onSelect,
+        selectedRange
+    ]);
+    return /*#__PURE__*/ _jsx(Calendar, {
+        mode: "range",
+        selected: selectedRange,
+        onSelect: handleSelect,
+        numberOfMonths: 1,
+        formatters: {
+            formatWeekdayName: (date)=>format(date, 'EEEEE')
+        },
+        disabled: {
+            after: new Date()
+        },
+        classNames: {
+            root: 'relative w-full flex justify-center items-center',
+            months: 'w-full',
+            month_grid: 'flex flex-col justify-center items-center',
+            nav: 'flex items-center gap-4 absolute top-16 left-0 w-full z-10'
+        }
+    });
+}
+
+//# sourceMappingURL=interval-selector-calendar.js.map

package/dist/components/interval-selector/interval-selector-input.d.ts

@@ -0,0 +1,8 @@
+import { type UseNewIntervalSelectorInputProps } from './hooks/use-interval-selector-input';
+type IntervalSelectorInputProps = {
+    className?: string;
+    inputClassName?: string;
+} & UseNewIntervalSelectorInputProps;
+export declare function IntervalSelectorInput({ className, inputClassName, ...props }: IntervalSelectorInputProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=interval-selector-input.d.ts.map

package/dist/components/interval-selector/interval-selector-input.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Input } from '../../components/input/index.js';
+import { Kbd } from '../../components/kbd/index.js';
+import { PopoverTrigger } from '../../components/popover/index.js';
+import { cn } from '../../utils/cn.js';
+import { useIntervalSelectorInput } from './hooks/use-interval-selector-input.js';
+export function IntervalSelectorInput({ className, inputClassName, ...props }) {
+    const { displayValue, shortcutValue, isFocused, isInvalid, shouldShake, onChange, onKeyDown, onFocus, onBlur, onMouseDown, onMouseUp, inputRef } = useIntervalSelectorInput(props);
+    return /*#__PURE__*/ _jsx(PopoverTrigger, {
+        asChild: true,
+        children: /*#__PURE__*/ _jsx("div", {
+            className: cn('relative', className, shouldShake && 'animate-shake'),
+            children: /*#__PURE__*/ _jsx(Input, {
+                ref: inputRef,
+                value: displayValue,
+                onChange: isFocused ? onChange : undefined,
+                onFocus: onFocus,
+                onBlur: onBlur,
+                onMouseDown: onMouseDown,
+                onMouseUp: onMouseUp,
+                onKeyDown: onKeyDown,
+                readOnly: !isFocused,
+                "aria-invalid": isInvalid && isFocused,
+                iconLeft: /*#__PURE__*/ _jsx(Kbd, {
+                    className: "h-16 shrink-0 min-w-36",
+                    children: shortcutValue
+                }),
+                className: cn('w-full pl-50', inputClassName)
+            })
+        })
+    });
+}
+
+//# sourceMappingURL=interval-selector-input.js.map

package/dist/components/interval-selector/interval-selector-suggestions.d.ts

@@ -0,0 +1,11 @@
+import type { IntervalSelection, IntervalSuggestion, RelativeSuggestion } from './types';
+interface IntervalSelectorSuggestionsProps {
+    relativeSuggestions: RelativeSuggestion[];
+    intervalSuggestions: IntervalSuggestion[];
+    onSelect: (selection: IntervalSelection) => void;
+    onOpenCalendar: () => void;
+    highlightedIndex: number;
+}
+export declare function IntervalSelectorSuggestions({ relativeSuggestions, intervalSuggestions, onSelect, onOpenCalendar, highlightedIndex, }: IntervalSelectorSuggestionsProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=interval-selector-suggestions.d.ts.map

package/dist/components/interval-selector/interval-selector-suggestions.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../components/button/index.js';
+import { Icon } from '../../components/icon/index.js';
+import { Kbd } from '../../components/kbd/index.js';
+import { Label } from '../../components/label/index.js';
+import { useEffect, useRef } from 'react';
+import { cn } from '../../utils/cn.js';
+import { generateDurationShortcut, humanizeDurationToNow } from '../../utils/date.js';
+export function IntervalSelectorSuggestions({ relativeSuggestions, intervalSuggestions, onSelect, onOpenCalendar, highlightedIndex }) {
+    const pastIntervalsStartIndex = 0;
+    const calendarIntervalsStartIndex = relativeSuggestions.length;
+    const calendarButtonIndex = calendarIntervalsStartIndex + intervalSuggestions.length;
+    const itemRefs = useRef([]);
+    useEffect(()=>{
+        if (highlightedIndex >= 0 && itemRefs.current[highlightedIndex]) {
+            itemRefs.current[highlightedIndex]?.scrollIntoView({
+                behavior: 'smooth',
+                block: 'nearest'
+            });
+        }
+    }, [
+        highlightedIndex
+    ]);
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "flex flex-col gap-8",
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: "flex flex-col gap-4 p-4",
+                children: relativeSuggestions.map((option, index)=>{
+                    const itemIndex = pastIntervalsStartIndex + index;
+                    const isHighlighted = highlightedIndex === itemIndex;
+                    const shortcut = generateDurationShortcut(option.duration);
+                    const label = humanizeDurationToNow(option.duration);
+                    return /*#__PURE__*/ _jsxs(Button, {
+                        ref: (el)=>{
+                            itemRefs.current[itemIndex] = el;
+                        },
+                        type: "button",
+                        variant: "transparent",
+                        onClick: ()=>onSelect(option),
+                        className: cn('w-full text-foreground-neutral-subtle justify-start', isHighlighted && 'bg-background-button-transparent-hover'),
+                        children: [
+                            /*#__PURE__*/ _jsx(Kbd, {
+                                className: "h-16 shrink-0 min-w-36",
+                                children: shortcut
+                            }),
+                            /*#__PURE__*/ _jsx("span", {
+                                children: label
+                            })
+                        ]
+                    }, shortcut);
+                })
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "border-t border-border-neutral-base-component flex flex-col gap-4 p-4",
+                children: [
+                    /*#__PURE__*/ _jsx(Label, {
+                        className: "px-8 py-4 text-xs leading-20 text-foreground-neutral-subtle select-none",
+                        children: "Calendar Time"
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "grid grid-cols-1 md:grid-cols-2 gap-4 [&>*:only-child]:md:col-span-2",
+                        children: intervalSuggestions.map((option, index)=>{
+                            const itemIndex = calendarIntervalsStartIndex + index;
+                            const isHighlighted = highlightedIndex === itemIndex;
+                            return /*#__PURE__*/ _jsx(Button, {
+                                ref: (el)=>{
+                                    itemRefs.current[itemIndex] = el;
+                                },
+                                type: "button",
+                                variant: "transparent",
+                                onClick: ()=>onSelect(option),
+                                className: cn('w-full text-foreground-neutral-subtle justify-start', isHighlighted && 'bg-background-button-transparent-hover'),
+                                children: /*#__PURE__*/ _jsx("span", {
+                                    children: option.label
+                                })
+                            }, option.label);
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "border-t border-border-neutral-base-component p-4",
+                children: /*#__PURE__*/ _jsxs(Button, {
+                    ref: (el)=>{
+                        itemRefs.current[calendarButtonIndex] = el;
+                    },
+                    type: "button",
+                    variant: "transparent",
+                    onClick: onOpenCalendar,
+                    className: cn('w-full text-foreground-neutral-subtle justify-start', highlightedIndex === calendarButtonIndex && 'bg-background-button-transparent-hover'),
+                    children: [
+                        /*#__PURE__*/ _jsx(Icon, {
+                            name: "calendar2Line",
+                            className: "size-16 shrink-0"
+                        }),
+                        /*#__PURE__*/ _jsx("span", {
+                            children: "Select from calendar"
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=interval-selector-suggestions.js.map

package/dist/components/interval-selector/interval-selector.d.ts

@@ -0,0 +1,12 @@
+import type { IntervalSelection, IntervalSuggestion, RelativeSuggestion } from './types';
+export interface IntervalSelectorProps {
+    selection: IntervalSelection;
+    onSelectionChange: (selection: IntervalSelection) => void;
+    container?: HTMLElement | null;
+    className?: string;
+    inputClassName?: string;
+    relativeSuggestions?: RelativeSuggestion[];
+    intervalSuggestions?: IntervalSuggestion[];
+}
+export declare function IntervalSelector({ selection, onSelectionChange, container, className, inputClassName, relativeSuggestions, intervalSuggestions, }: IntervalSelectorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=interval-selector.d.ts.map

package/dist/components/interval-selector/interval-selector.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Popover, PopoverContent } from '../../components/popover/index.js';
+import { useIntervalSelector } from './hooks/use-interval-selector.js';
+import { IntervalSelectorCalendar } from './interval-selector-calendar.js';
+import { IntervalSelectorInput } from './interval-selector-input.js';
+import { IntervalSelectorSuggestions } from './interval-selector-suggestions.js';
+import { defaultIntervalSuggestions, defaultRelativeSuggestions } from './utils/index.js';
+export function IntervalSelector({ selection, onSelectionChange, container, className, inputClassName, relativeSuggestions = defaultRelativeSuggestions, intervalSuggestions = defaultIntervalSuggestions }) {
+    const { onSelect, popoverOpen, calendarOpen, highlightedIndex, inputRef, isNavigating, isFocused, setIsFocused, onBlur, onFocus, onKeyDown, onChange, onOpenCalendar, closeAll, onInteractOutside } = useIntervalSelector({
+        onSelectionChange,
+        relativeSuggestions,
+        intervalSuggestions
+    });
+    return /*#__PURE__*/ _jsxs(Popover, {
+        open: popoverOpen,
+        children: [
+            /*#__PURE__*/ _jsx(IntervalSelectorInput, {
+                onSelect: onSelect,
+                selection: selection,
+                isNavigating: isNavigating,
+                className: className,
+                inputClassName: inputClassName,
+                onChange: onChange,
+                onKeyDown: onKeyDown,
+                onFocus: onFocus,
+                onBlur: onBlur,
+                inputRef: inputRef,
+                isFocused: isFocused,
+                setIsFocused: setIsFocused
+            }),
+            /*#__PURE__*/ _jsx(PopoverContent, {
+                align: "start",
+                sideOffset: 8,
+                className: "w-(--radix-popover-trigger-width) p-0",
+                onOpenAutoFocus: (e)=>e.preventDefault(),
+                onInteractOutside: onInteractOutside,
+                onEscapeKeyDown: (e)=>{
+                    e.preventDefault();
+                    closeAll();
+                },
+                container: container,
+                children: calendarOpen ? /*#__PURE__*/ _jsx(IntervalSelectorCalendar, {
+                    onSelect: onSelect
+                }) : popoverOpen ? /*#__PURE__*/ _jsx(IntervalSelectorSuggestions, {
+                    relativeSuggestions: relativeSuggestions,
+                    intervalSuggestions: intervalSuggestions,
+                    onSelect: onSelect,
+                    onOpenCalendar: onOpenCalendar,
+                    highlightedIndex: highlightedIndex
+                }) : null
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=interval-selector.js.map