@wheelhouse/ui 0.2.2 → 0.2.4

package/dist/components/filters/filter-date-metric-value.js

@@ -0,0 +1,406 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { computeRollingPresetRange, DATE_SELECTOR_COMPACT_DAY_FORMAT, DateSelector, formatDateValue, formatRollingRangeTooltipDetail, getRollingSummaryLabel, resolveRollingCount, resolveRollingUnit, } from '../../blocks/date-selector';
+import { DATE_SELECTOR_ROLLING_DAY_OPTIONS, DATE_SELECTOR_ROLLING_MONTH_OPTIONS, DATE_SELECTOR_ROLLING_QUARTER_OPTIONS, DATE_SELECTOR_ROLLING_YEAR_OPTIONS, DEFAULT_DATE_SELECTOR_I18N, } from '../../blocks/date-selector/date-selector-types';
+import { Button } from '../button';
+import { ButtonGroupText } from '../button-group';
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '../dialog';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from '../dropdown-menu';
+import { Input } from '../input';
+import { Popover, PopoverContent, PopoverTrigger } from '../popover';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';
+import { Check } from 'lucide-react';
+import { cn } from '../../lib/utils';
+import { dateMetricValueForCustomEditor, getDateMetricPayloadFromValues, getOperatorsForField } from './filters-utils';
+/** Matches `Button` `variant="outline"` surface: bordered tile in the preset grid. */
+const ROLLING_PRESET_OUTLINE = 'rounded-md border border-input bg-popover shadow-xs/5 dark:bg-input/32';
+const ROLLING_PRESET_CELL_BASE = cn(ROLLING_PRESET_OUTLINE, 'relative min-h-7 shrink-0 justify-center !px-1.5 !py-1 text-center text-[0.7rem] leading-tight [text-wrap:pretty] tabular-nums', '[&_[data-slot=dropdown-menu-radio-item-indicator]]:hidden');
+/** Selected tile: filled “active” look instead of the menu radio checkmark. */
+const rollingPresetCellSelected = 'border-primary bg-accent font-medium text-foreground shadow-xs/10 dark:bg-accent/90';
+function RollingWindowPresetGrid({ mode, i18n, idPrefix, rollingDayOpts, rollingMonthOpts, rollingQuarterOpts, rollingYearOpts, radioValue, rollingRadioKey, labelForRolling, onApply, }) {
+    const rollingPrefix = mode === 'rolling-next' ? i18n.rollingWindowTabs.next : i18n.rollingWindowTabs.last;
+    const sectionLabel = (unitTab) => `${rollingPrefix} ${unitTab}`;
+    return (_jsx(DropdownMenuRadioGroup, { value: radioValue ?? '', onValueChange: (v) => {
+            if (!v)
+                return;
+            const [u, c] = v.split(':');
+            const count = Number(c);
+            if (!u || !Number.isFinite(count))
+                return;
+            onApply(u, count);
+        }, children: _jsx("div", { className: "flex flex-col", children: _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(DropdownMenuLabel, { className: "px-0 pt-0 pb-0", children: sectionLabel(i18n.rollingUnitTabs.days) }), _jsx("div", { className: "grid grid-cols-4 gap-1.5", children: rollingDayOpts.map((days) => {
+                                    const value = rollingRadioKey('day', days);
+                                    const selected = radioValue === value;
+                                    return (_jsx(DropdownMenuRadioItem, { className: cn(ROLLING_PRESET_CELL_BASE, selected && rollingPresetCellSelected), value: value, "aria-label": labelForRolling(mode, 'day', days), children: days }, `${idPrefix}-day-${days}`));
+                                }) })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(DropdownMenuLabel, { className: "px-0 pt-0 pb-0", children: sectionLabel(i18n.rollingUnitTabs.months) }), _jsx("div", { className: "grid grid-cols-5 gap-1.5", children: rollingMonthOpts.map((m) => {
+                                    const value = rollingRadioKey('month', m);
+                                    const selected = radioValue === value;
+                                    return (_jsx(DropdownMenuRadioItem, { className: cn(ROLLING_PRESET_CELL_BASE, selected && rollingPresetCellSelected), value: value, "aria-label": labelForRolling(mode, 'month', m), children: m }, `${idPrefix}-month-${m}`));
+                                }) })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(DropdownMenuLabel, { className: "px-0 pt-0 pb-0", children: sectionLabel(i18n.rollingUnitTabs.quarters) }), _jsx("div", { className: "grid grid-cols-4 gap-1.5", children: rollingQuarterOpts.map((q) => {
+                                    const value = rollingRadioKey('quarter', q);
+                                    const selected = radioValue === value;
+                                    return (_jsx(DropdownMenuRadioItem, { className: cn(ROLLING_PRESET_CELL_BASE, selected && rollingPresetCellSelected), value: value, "aria-label": labelForRolling(mode, 'quarter', q), children: q }, `${idPrefix}-quarter-${q}`));
+                                }) })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(DropdownMenuLabel, { className: "px-0 pt-0 pb-0", children: sectionLabel(i18n.rollingUnitTabs.years) }), _jsx("div", { className: "grid grid-cols-4 gap-1.5", children: rollingYearOpts.map((y) => {
+                                    const value = rollingRadioKey('year', y);
+                                    const selected = radioValue === value;
+                                    return (_jsx(DropdownMenuRadioItem, { className: cn(ROLLING_PRESET_CELL_BASE, selected && rollingPresetCellSelected), value: value, "aria-label": labelForRolling(mode, 'year', y), children: y }, `${idPrefix}-year-${y}`));
+                                }) })] })] }) }) }));
+}
+/**
+ * Compact date summary for the bar (e.g. "Last 60 days"); uses rolling templates when applicable.
+ * Day pickers use {@link DATE_SELECTOR_COMPACT_DAY_FORMAT} here so the bar stays short; the dialog still uses `dateMetricProps.dayDateFormat` for parsing.
+ * Pass {@link FormatDateValueOptions} to match {@link DateSelectorProps.rollingRangeDisplay} on the filter field.
+ */
+export function dateSegmentLabelForBar(date, dateI18n, dayDateFormat, options) {
+    return formatDateValue(date, dateI18n, dayDateFormat, options);
+}
+/** Static "in" connector + rolling Next/Last presets (submenus) + full {@link DateSelector} in a dialog for Custom. */
+export function FilterDateMetricBarPeriodSegments({ field, values, onChange, i18n, size, autoFocus }) {
+    const [menuOpen, setMenuOpen] = useState(false);
+    const [customOpen, setCustomOpen] = useState(false);
+    /** Draft while Custom dialog is open; committed on Done, discarded on dismiss. */
+    const [customDraft, setCustomDraft] = useState(null);
+    const menuAutoOpenedRef = useRef(false);
+    const payload = useMemo(() => getDateMetricPayloadFromValues(values), [values]);
+    const setPayload = (next) => {
+        onChange([next]);
+    };
+    const dayFormat = field.dateMetricProps?.dayDateFormat ?? 'MM/dd/yyyy';
+    const mergedDateI18n = { ...DEFAULT_DATE_SELECTOR_I18N, ...field.dateMetricProps?.i18n };
+    const rollingDayOpts = (field.dateMetricProps?.rollingDayOptions ?? DATE_SELECTOR_ROLLING_DAY_OPTIONS);
+    const rollingMonthOpts = field.dateMetricProps?.rollingMonthOptions ?? DATE_SELECTOR_ROLLING_MONTH_OPTIONS;
+    const rollingQuarterOpts = field.dateMetricProps?.rollingQuarterOptions ?? DATE_SELECTOR_ROLLING_QUARTER_OPTIONS;
+    const rollingYearOpts = field.dateMetricProps?.rollingYearOptions ?? DATE_SELECTOR_ROLLING_YEAR_OPTIONS;
+    const rollingRangeDisplay = field.dateMetricProps?.rollingRangeDisplay ?? 'inline';
+    const barFormatOptions = rollingRangeDisplay === 'tooltip' ? { includeRollingRangeDetailInLabel: false } : undefined;
+    const dateSummary = dateSegmentLabelForBar(payload.date, mergedDateI18n, DATE_SELECTOR_COMPACT_DAY_FORMAT, barFormatOptions);
+    const rollingRangeTooltip = rollingRangeDisplay === 'tooltip' ? formatRollingRangeTooltipDetail(payload.date, mergedDateI18n, dayFormat) : null;
+    const buttonSize = size === 'lg' ? 'lg' : size === 'sm' ? 'sm' : 'default';
+    const dateRangeTriggerButtonClassName = 'max-w-[min(100%,18rem)] justify-start text-start [text-wrap:pretty] whitespace-normal';
+    const dateRangeTriggerButton = _jsx(Button, { variant: "outline", size: buttonSize, className: dateRangeTriggerButtonClassName });
+    const applyRolling = useCallback((mode, unit, count) => {
+        const base = getDateMetricPayloadFromValues(values);
+        const { startDate, endDate } = computeRollingPresetRange(mode, unit, count);
+        const nextDate = {
+            period: 'day',
+            operator: 'between',
+            selectionMode: mode,
+            rollingUnit: unit,
+            rollingCount: count,
+            startDate,
+            endDate,
+        };
+        if (unit === 'day' && DATE_SELECTOR_ROLLING_DAY_OPTIONS.includes(count)) {
+            nextDate.rollingDays = count;
+        }
+        onChange([
+            {
+                ...base,
+                date: nextDate,
+            },
+        ]);
+        setMenuOpen(false);
+    }, [values, onChange]);
+    useEffect(() => {
+        if (!autoFocus)
+            return;
+        if (menuAutoOpenedRef.current)
+            return;
+        let cancelled = false;
+        const timer = window.setTimeout(() => {
+            if (cancelled)
+                return;
+            menuAutoOpenedRef.current = true;
+            setMenuOpen(true);
+        }, 100);
+        return () => {
+            cancelled = true;
+            window.clearTimeout(timer);
+        };
+    }, [autoFocus]);
+    const labelForRolling = (mode, unit, count) => {
+        if (unit === 'year' && count === 1) {
+            return mode === 'rolling-next' ? mergedDateI18n.rollingSummaryNextYear : mergedDateI18n.rollingSummaryLastYear;
+        }
+        if (unit === 'month' && count === 1) {
+            return mode === 'rolling-next' ? mergedDateI18n.rollingSummaryNextSingleMonth : mergedDateI18n.rollingSummaryLastSingleMonth;
+        }
+        if (unit === 'month' && count > 1) {
+            return mode === 'rolling-next'
+                ? mergedDateI18n.rollingSummaryNextMonths.replace('{{count}}', String(count))
+                : mergedDateI18n.rollingSummaryLastMonths.replace('{{count}}', String(count));
+        }
+        if (unit === 'quarter' && count === 1) {
+            return mode === 'rolling-next' ? mergedDateI18n.rollingSummaryNextQuarter : mergedDateI18n.rollingSummaryLastQuarter;
+        }
+        if (unit === 'quarter' && count > 1) {
+            return mode === 'rolling-next'
+                ? mergedDateI18n.rollingSummaryNextQuarters.replace('{{count}}', String(count))
+                : mergedDateI18n.rollingSummaryLastQuarters.replace('{{count}}', String(count));
+        }
+        return (getRollingSummaryLabel({ period: 'day', operator: 'between', selectionMode: mode, rollingUnit: unit, rollingCount: count }, mergedDateI18n) ?? '');
+    };
+    const rollingRadioKey = (unit, count) => `${unit}:${count}`;
+    const { selectionMode } = payload.date;
+    const selectedCount = resolveRollingCount(payload.date);
+    const selectedUnit = resolveRollingUnit(payload.date);
+    const isAllowedRolling = (unit, count) => {
+        const list = unit === 'day' ? rollingDayOpts : unit === 'month' ? rollingMonthOpts : unit === 'quarter' ? rollingQuarterOpts : rollingYearOpts;
+        return list.includes(count);
+    };
+    const nextRadioValue = selectionMode === 'rolling-next' && selectedCount != null && isAllowedRolling(selectedUnit, selectedCount)
+        ? rollingRadioKey(selectedUnit, selectedCount)
+        : undefined;
+    const lastRadioValue = selectionMode === 'rolling-last' && selectedCount != null && isAllowedRolling(selectedUnit, selectedCount)
+        ? rollingRadioKey(selectedUnit, selectedCount)
+        : undefined;
+    const isNextBranchActive = selectionMode === 'rolling-next';
+    const isLastBranchActive = selectionMode === 'rolling-last';
+    const isCustomRangeActive = selectionMode === 'custom';
+    const mainMenuActiveIcon = (show) => (show ? _jsx(Check, { className: "ml-auto size-4 shrink-0 text-foreground", "aria-hidden": true }) : null);
+    const openCustomDialog = () => {
+        setMenuOpen(false);
+        setCustomDraft(dateMetricValueForCustomEditor(payload.date));
+        setCustomOpen(true);
+    };
+    const commitCustomDialog = () => {
+        if (customDraft != null) {
+            setPayload({ ...payload, date: customDraft });
+        }
+        setCustomDraft(null);
+        setCustomOpen(false);
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(ButtonGroupText, { size: size, className: "bg-background font-normal text-muted-foreground dark:bg-input/30", children: i18n.helpers.dateMetricDateConnector(payload.date, mergedDateI18n) }), _jsxs(DropdownMenu, { open: menuOpen, onOpenChange: setMenuOpen, children: [rollingRangeTooltip ? (_jsxs(Tooltip, { children: [_jsx(DropdownMenuTrigger, { render: _jsx(TooltipTrigger, { render: dateRangeTriggerButton }), children: _jsx("span", { children: dateSummary || i18n.select }) }), _jsx(TooltipContent, { side: "top", sideOffset: 6, className: "max-w-xs [text-wrap:pretty] tabular-nums", children: rollingRangeTooltip })] })) : (_jsx(DropdownMenuTrigger, { render: dateRangeTriggerButton, children: _jsx("span", { children: dateSummary || i18n.select }) })), _jsxs(DropdownMenuContent, { align: "center", className: "min-w-48", side: "bottom", children: [_jsxs(DropdownMenuSub, { children: [_jsx(DropdownMenuSubTrigger, { children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "min-w-0 shrink", children: mergedDateI18n.rollingWindowTabs.next }), mainMenuActiveIcon(isNextBranchActive)] }) }), _jsx(DropdownMenuSubContent, { align: "start", className: "max-h-none min-w-[13rem] overflow-visible p-2", children: _jsx(RollingWindowPresetGrid, { mode: "rolling-next", idPrefix: "next", i18n: mergedDateI18n, rollingDayOpts: rollingDayOpts, rollingMonthOpts: rollingMonthOpts, rollingQuarterOpts: rollingQuarterOpts, rollingYearOpts: rollingYearOpts, radioValue: nextRadioValue, rollingRadioKey: rollingRadioKey, labelForRolling: labelForRolling, onApply: (unit, count) => applyRolling('rolling-next', unit, count) }) })] }), _jsxs(DropdownMenuSub, { children: [_jsx(DropdownMenuSubTrigger, { children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "min-w-0 shrink", children: mergedDateI18n.rollingWindowTabs.last }), mainMenuActiveIcon(isLastBranchActive)] }) }), _jsx(DropdownMenuSubContent, { align: "start", className: "max-h-none min-w-[13rem] overflow-visible p-2", children: _jsx(RollingWindowPresetGrid, { mode: "rolling-last", idPrefix: "last", i18n: mergedDateI18n, rollingDayOpts: rollingDayOpts, rollingMonthOpts: rollingMonthOpts, rollingQuarterOpts: rollingQuarterOpts, rollingYearOpts: rollingYearOpts, radioValue: lastRadioValue, rollingRadioKey: rollingRadioKey, labelForRolling: labelForRolling, onApply: (unit, count) => applyRolling('rolling-last', unit, count) }) })] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { className: "gap-2", onClick: openCustomDialog, children: [_jsx("span", { className: "min-w-0 shrink", children: mergedDateI18n.rollingWindowTabs.custom }), mainMenuActiveIcon(isCustomRangeActive)] })] })] }), _jsx(Dialog, { open: customOpen, onOpenChange: (open) => {
+                    setCustomOpen(open);
+                    if (!open) {
+                        setCustomDraft(null);
+                    }
+                }, children: _jsxs(DialogContent, { className: "max-h-[min(90vh,32rem)] w-[min(calc(100vw-2rem),28rem)] gap-0 overflow-y-auto p-4 sm:max-w-none", children: [_jsx(DialogHeader, { className: "pb-2", children: _jsx(DialogTitle, { children: mergedDateI18n.selectDate }) }), _jsx("div", { className: "flex flex-col gap-6 py-2", children: _jsx("section", { className: "flex flex-col gap-2", children: _jsx(DateSelector, { ...field.dateMetricProps, className: cn('max-w-none space-y-3', field.dateMetricProps?.className), value: customDraft ?? dateMetricValueForCustomEditor(payload.date), onChange: setCustomDraft, showOperators: field.dateMetricProps?.showOperators !== false, showInput: field.dateMetricProps?.showInput ?? false, dayDateFormat: dayFormat, showRollingPresets: false }) }) }), _jsx(DialogFooter, { className: "mt-2 border-t pt-4 sm:justify-end", children: _jsx(Button, { type: "button", size: "sm", variant: "default", onClick: commitCustomDialog, children: i18n.dateMetricDialogDone }) })] }) })] }));
+}
+/** Typographic en dash (–) for “no amount” on the bar trigger. */
+const METRIC_EMPTY_AMOUNT = '\u2013';
+/** Spaces around the en dash so empty segments don’t feel cramped (e.g. `$ – `). */
+const METRIC_EMPTY_DISPLAY = ` ${METRIC_EMPTY_AMOUNT} `;
+const metricAmountFormatters = new Map();
+const metricIntegerFormatters = new Map();
+const metricPercentFormatters = new Map();
+const metricPercentSuffixLiteralByLocale = new Map();
+function formatMetricAmountDigits(value, locale) {
+    let nf = metricAmountFormatters.get(locale);
+    if (!nf) {
+        try {
+            nf = new Intl.NumberFormat(locale, {
+                minimumFractionDigits: 0,
+                maximumFractionDigits: 20,
+                useGrouping: true,
+            });
+        }
+        catch {
+            nf = new Intl.NumberFormat('en-US', {
+                minimumFractionDigits: 0,
+                maximumFractionDigits: 20,
+                useGrouping: true,
+            });
+        }
+        metricAmountFormatters.set(locale, nf);
+    }
+    return nf.format(value);
+}
+function formatMetricIntegerDigits(value, locale) {
+    let nf = metricIntegerFormatters.get(locale);
+    if (!nf) {
+        try {
+            nf = new Intl.NumberFormat(locale, { maximumFractionDigits: 0, useGrouping: true });
+        }
+        catch {
+            nf = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0, useGrouping: true });
+        }
+        metricIntegerFormatters.set(locale, nf);
+    }
+    return nf.format(value);
+}
+function dateMetricBarValueFormat(field) {
+    return field.dateMetricValueFormat ?? 'currency';
+}
+/** Suffix literals from `Intl` for an empty percent segment (locale-specific spacing, RTL, etc.). */
+function percentBarSuffixLiteral(locale) {
+    let s = metricPercentSuffixLiteralByLocale.get(locale);
+    if (s !== undefined)
+        return s;
+    try {
+        const nf = new Intl.NumberFormat(locale, { style: 'percent', maximumFractionDigits: 0 });
+        s = nf
+            .formatToParts(1)
+            .filter((p) => p.type === 'literal')
+            .map((p) => p.value)
+            .join('');
+    }
+    catch {
+        s = '%';
+    }
+    if (!s)
+        s = '%';
+    metricPercentSuffixLiteralByLocale.set(locale, s);
+    return s;
+}
+/** `value` is percentage points (e.g. 85 → 85%); `Intl` expects a ratio, so divide by 100. */
+function formatMetricPercentFromPercentagePoints(value, locale) {
+    let nf = metricPercentFormatters.get(locale);
+    if (!nf) {
+        try {
+            nf = new Intl.NumberFormat(locale, {
+                style: 'percent',
+                minimumFractionDigits: 0,
+                maximumFractionDigits: 20,
+                useGrouping: true,
+            });
+        }
+        catch {
+            nf = new Intl.NumberFormat('en-US', {
+                style: 'percent',
+                minimumFractionDigits: 0,
+                maximumFractionDigits: 20,
+                useGrouping: true,
+            });
+        }
+        metricPercentFormatters.set(locale, nf);
+    }
+    return nf.format(value / 100);
+}
+/** Bar label for a single threshold: currency, percent, or integer locale formatting. */
+function formatDateMetricBarAmount(value, format, locale, currencySym) {
+    if (format === 'currency') {
+        if (value == null || Number.isNaN(value))
+            return `${currencySym}${METRIC_EMPTY_DISPLAY}`;
+        return `${currencySym}${formatMetricAmountDigits(value, locale)}`;
+    }
+    if (format === 'integer') {
+        if (value == null || Number.isNaN(value))
+            return METRIC_EMPTY_DISPLAY;
+        return formatMetricIntegerDigits(value, locale);
+    }
+    if (value == null || Number.isNaN(value))
+        return `${METRIC_EMPTY_DISPLAY}${percentBarSuffixLiteral(locale)}`;
+    return formatMetricPercentFromPercentagePoints(value, locale);
+}
+function parseDraftNumber(raw, previous) {
+    if (raw.trim() === '')
+        return null;
+    const n = Number(raw);
+    if (!Number.isFinite(n))
+        return previous ?? null;
+    return n;
+}
+const METRIC_POPOVER_TRIGGER_NARROW = 'max-w-[min(100%,14rem)] shrink-0 justify-start font-medium tabular-nums';
+const METRIC_POPOVER_TRIGGER_WIDE = 'max-w-[min(100%,18rem)] shrink-0 justify-start text-start font-medium [text-wrap:pretty] whitespace-normal tabular-nums';
+function MetricValueThresholdPopoverShell({ open, onOpenChange, buttonSize, triggerLabel, summary, triggerClassName, children, }) {
+    return (_jsxs(Popover, { open: open, onOpenChange: onOpenChange, children: [_jsx(PopoverTrigger, { render: _jsx(Button, { type: "button", variant: "outline", size: buttonSize, className: triggerClassName, "aria-label": triggerLabel, "aria-expanded": open }), children: summary }), _jsx(PopoverContent, { align: "start", side: "bottom", className: "w-(--anchor-width) max-w-none min-w-[8rem] gap-0 p-1.5", children: children })] }));
+}
+/** Value inputs / “any value” control for a date metric filter bar (after field, “in”, range, and operator). */
+export function FilterDateMetricBarValueSegment({ field, values, onChange, operator, i18n, size, onOperatorChange, }) {
+    const [metricPopoverOpen, setMetricPopoverOpen] = useState(false);
+    const [draftMin, setDraftMin] = useState('');
+    const [draftMax, setDraftMax] = useState('');
+    const draftMinRef = useRef('');
+    const draftMaxRef = useRef('');
+    const payload = useMemo(() => getDateMetricPayloadFromValues(values), [values]);
+    const commitMetricFromDraft = useCallback(() => {
+        const base = getDateMetricPayloadFromValues(values);
+        const min = parseDraftNumber(draftMinRef.current, base.min ?? null);
+        const max = parseDraftNumber(draftMaxRef.current, base.max ?? null);
+        if (operator === 'value_greater_than') {
+            onChange([{ ...base, min }]);
+            return;
+        }
+        if (operator === 'value_less_than') {
+            onChange([{ ...base, max }]);
+            return;
+        }
+        if (operator === 'value_between') {
+            onChange([{ ...base, min, max }]);
+        }
+    }, [operator, values, onChange]);
+    const handleMetricPopoverOpenChange = useCallback((open) => {
+        if (open) {
+            const base = getDateMetricPayloadFromValues(values);
+            const dm = base.min != null ? String(base.min) : '';
+            const dx = base.max != null ? String(base.max) : '';
+            draftMinRef.current = dm;
+            draftMaxRef.current = dx;
+            setDraftMin(dm);
+            setDraftMax(dx);
+            setMetricPopoverOpen(true);
+        }
+        else {
+            setMetricPopoverOpen((wasOpen) => {
+                if (wasOpen) {
+                    commitMetricFromDraft();
+                }
+                return false;
+            });
+        }
+    }, [values, commitMetricFromDraft]);
+    const handleMetricValueInputKeyDown = useCallback((e) => {
+        if (e.key !== 'Enter')
+            return;
+        e.preventDefault();
+        handleMetricPopoverOpenChange(false);
+    }, [handleMetricPopoverOpenChange]);
+    const operators = useMemo(() => getOperatorsForField(field, values, i18n), [field, values, i18n]);
+    const valueAnyOperator = operators.find((o) => o.value === 'value_any');
+    const sym = i18n.defaultCurrency;
+    const numberLocale = i18n.numberFormatLocale;
+    const barValueFormat = dateMetricBarValueFormat(field);
+    const inputSizeProp = size === 'lg' ? 'default' : 'sm';
+    const buttonSize = size === 'lg' ? 'lg' : size === 'sm' ? 'sm' : 'default';
+    const valueSegment = (() => {
+        if (operator === 'value_any') {
+            const anyLabel = i18n.operators.valueAny;
+            const anyIcon = valueAnyOperator?.icon;
+            if (anyIcon) {
+                return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx(Button, { type: "button", variant: "outline", size: buttonSize, className: "min-w-8 shrink-0 px-2 font-normal text-muted-foreground hover:text-foreground [&_svg]:size-3.5", "aria-label": anyLabel, onClick: () => onOperatorChange?.('value_greater_than') }), children: anyIcon }), _jsx(TooltipContent, { side: "top", sideOffset: 6, children: anyLabel })] }));
+            }
+            return (_jsx(Button, { type: "button", variant: "outline", size: buttonSize, className: "max-w-[min(100%,14rem)] justify-start font-normal text-muted-foreground hover:text-foreground", "aria-label": anyLabel, onClick: () => onOperatorChange?.('value_greater_than'), children: anyLabel }));
+        }
+        if (operator === 'value_greater_than') {
+            const hasMinValue = payload.min != null && !Number.isNaN(payload.min);
+            const summary = formatDateMetricBarAmount(payload.min ?? undefined, barValueFormat, numberLocale, sym);
+            const triggerLabel = `${i18n.operators.greaterThan}: ${summary}`;
+            return (_jsx(MetricValueThresholdPopoverShell, { open: metricPopoverOpen, onOpenChange: handleMetricPopoverOpenChange, buttonSize: buttonSize, triggerLabel: triggerLabel, summary: summary, triggerClassName: cn(METRIC_POPOVER_TRIGGER_NARROW, !hasMinValue ? 'text-muted-foreground' : 'text-foreground'), children: _jsx(Input, { type: "number", size: inputSizeProp, className: "w-full min-w-0 tabular-nums", value: draftMin, onChange: (e) => {
+                        const v = e.target.value;
+                        draftMinRef.current = v;
+                        setDraftMin(v);
+                    }, onKeyDown: handleMetricValueInputKeyDown }) }));
+        }
+        if (operator === 'value_less_than') {
+            const hasMaxValue = payload.max != null && !Number.isNaN(payload.max);
+            const summary = formatDateMetricBarAmount(payload.max ?? undefined, barValueFormat, numberLocale, sym);
+            const triggerLabel = `${i18n.operators.lessThan}: ${summary}`;
+            return (_jsx(MetricValueThresholdPopoverShell, { open: metricPopoverOpen, onOpenChange: handleMetricPopoverOpenChange, buttonSize: buttonSize, triggerLabel: triggerLabel, summary: summary, triggerClassName: cn(METRIC_POPOVER_TRIGGER_NARROW, !hasMaxValue ? 'text-muted-foreground' : 'text-foreground'), children: _jsx(Input, { type: "number", size: inputSizeProp, className: "w-full min-w-0 tabular-nums", value: draftMax, onChange: (e) => {
+                        const v = e.target.value;
+                        draftMaxRef.current = v;
+                        setDraftMax(v);
+                    }, onKeyDown: handleMetricValueInputKeyDown }) }));
+        }
+        if (operator === 'value_between') {
+            const hasMinValue = payload.min != null && !Number.isNaN(payload.min);
+            const hasMaxValue = payload.max != null && !Number.isNaN(payload.max);
+            const minPart = formatDateMetricBarAmount(payload.min ?? undefined, barValueFormat, numberLocale, sym);
+            const maxPart = formatDateMetricBarAmount(payload.max ?? undefined, barValueFormat, numberLocale, sym);
+            const summary = `${minPart} - ${maxPart}`;
+            const triggerLabel = `${i18n.operators.between}: ${summary}`;
+            return (_jsx(MetricValueThresholdPopoverShell, { open: metricPopoverOpen, onOpenChange: handleMetricPopoverOpenChange, buttonSize: buttonSize, triggerLabel: triggerLabel, summary: summary, triggerClassName: cn(METRIC_POPOVER_TRIGGER_WIDE, !hasMinValue && !hasMaxValue ? 'text-muted-foreground' : 'text-foreground'), children: _jsxs("div", { className: "flex w-full flex-col gap-1.5", children: [_jsx(Input, { type: "number", size: inputSizeProp, className: "w-full min-w-0 tabular-nums", value: draftMin, onChange: (e) => {
+                                const v = e.target.value;
+                                draftMinRef.current = v;
+                                setDraftMin(v);
+                            }, onKeyDown: handleMetricValueInputKeyDown }), _jsx("div", { className: "pointer-events-none text-center text-xs text-muted-foreground select-none", "aria-hidden": true, children: "-" }), _jsx(Input, { type: "number", size: inputSizeProp, className: "w-full min-w-0 tabular-nums", value: draftMax, onChange: (e) => {
+                                const v = e.target.value;
+                                draftMaxRef.current = v;
+                                setDraftMax(v);
+                            }, onKeyDown: handleMetricValueInputKeyDown })] }) }));
+        }
+        return null;
+    })();
+    return valueSegment;
+}

package/dist/components/filters/filter-fields-listing-demo.d.ts

@@ -0,0 +1,12 @@
+import type { i18n as I18nInstance, TFunction } from 'i18next';
+import type { DateSelectorI18nConfig } from '../../blocks/date-selector/date-selector-types';
+import type { FilterFieldConfig, FilterFieldsConfig } from './filters-types';
+/** Flat fields for minimal `Default` / `WithOneFilter` stories (real listing keys). */
+export declare function buildListingDemoFields(t: TFunction): FilterFieldConfig[];
+/** Grouped listing catalog for `GroupedFieldsAndSearch` (keys and shapes mirror app listing filters). */
+export declare function buildListingGroupedFields(t: TFunction, dateSelectorI18n: DateSelectorI18nConfig, i18n: I18nInstance): FilterFieldsConfig;
+/** Flat listing fields for docs previews (no filter i18n bundle required). */
+export declare function buildListingDemoFieldsForDocs(): FilterFieldConfig[];
+/** Grouped listing catalog for docs previews; pass docs `I18nextProvider` instance and date-selector copy. */
+export declare function buildListingGroupedFieldsForDocs(dateSelectorI18n: DateSelectorI18nConfig, i18n: I18nInstance): FilterFieldsConfig;
+//# sourceMappingURL=filter-fields-listing-demo.d.ts.map

package/dist/components/filters/filter-fields-listing-demo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-fields-listing-demo.d.ts","sourceRoot":"","sources":["../../../src/components/filters/filter-fields-listing-demo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,IAAI,YAAY,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAyB/D,OAAO,KAAK,EAAE,sBAAsB,EAA8C,MAAM,gDAAgD,CAAC;AACzI,OAAO,KAAK,EAAE,iBAAiB,EAAE,kBAAkB,EAAkB,MAAM,iBAAiB,CAAC;AA0D7F,uFAAuF;AACvF,wBAAgB,sBAAsB,CAAC,CAAC,EAAE,SAAS,GAAG,iBAAiB,EAAE,CA+BxE;AAED,yGAAyG;AACzG,wBAAgB,yBAAyB,CAAC,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,IAAI,EAAE,YAAY,GAAG,kBAAkB,CA0dxI;AAED,8EAA8E;AAC9E,wBAAgB,6BAA6B,IAAI,iBAAiB,EAAE,CAEnE;AAED,8GAA8G;AAC9G,wBAAgB,gCAAgC,CAAC,gBAAgB,EAAE,sBAAsB,EAAE,IAAI,EAAE,YAAY,GAAG,kBAAkB,CAEjI"}