@santi020k/lumen-react 3.0.1 → 4.0.0

package/dist/dashboard.d.ts

@@ -0,0 +1,20 @@
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+import { type LumenActiveFilter } from '@santi020k/lumen-core';
+export interface FilterBarProps extends ComponentPropsWithRef<'section'> {
+    label?: string;
+    filters?: readonly LumenActiveFilter[];
+    onRemoveFilter?: (id: string) => void;
+    onReset?: () => void;
+    resetLabel?: string;
+    removeLabel?: (filter: LumenActiveFilter) => string;
+    /** Pass a complete localized count message; zero and unknown are different. */
+    resultLabel?: string;
+    pending?: boolean;
+    /** Controlled filters disclosure; omit for native browser ownership. */
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    actions?: ReactNode;
+}
+export declare const FilterBar: ({ label, filters, onRemoveFilter, onReset, resetLabel, removeLabel, resultLabel, pending, open, defaultOpen, onOpenChange, actions, className, children, ...props }: FilterBarProps) => import("react").JSX.Element;
+//# sourceMappingURL=dashboard.d.ts.map

package/dist/dashboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboard.d.ts","sourceRoot":"","sources":["../src/dashboard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAE7D,OAAO,EAAoB,KAAK,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AAIhF,MAAM,WAAW,cAAe,SAAQ,qBAAqB,CAAC,SAAS,CAAC;IACtE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,SAAS,iBAAiB,EAAE,CAAA;IACtC,cAAc,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,MAAM,CAAA;IACnD,+EAA+E;IAC/E,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,wEAAwE;IACxE,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,OAAO,CAAC,EAAE,SAAS,CAAA;CACpB;AAKD,eAAO,MAAM,SAAS,GAAI,qKAIvB,cAAc,gCA8ChB,CAAA"}

package/dist/dashboard.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { composeClassName } from '@santi020k/lumen-core';
+import { Button } from './components.js';
+const empty = [];
+const removeFilterLabel = (filter) => `Remove ${filter.label}: ${filter.value}`;
+export const FilterBar = ({ label = 'Filters', filters = empty, onRemoveFilter, onReset, resetLabel = 'Reset filters', removeLabel = removeFilterLabel, resultLabel, pending = false, open, defaultOpen = true, onOpenChange, actions, className, children, ...props }) => (_jsxs("section", { className: composeClassName('ui-filter-bar', className), "aria-label": label, "aria-busy": pending, ...props, children: [_jsxs("details", { open: open ?? defaultOpen, onToggle: event => {
+                if (open === undefined)
+                    onOpenChange?.(event.currentTarget.open);
+            }, children: [_jsx("summary", { onClick: event => {
+                        if (open === undefined)
+                            return;
+                        event.preventDefault();
+                        onOpenChange?.(!open);
+                    }, children: label }), _jsx("div", { className: "ui-filter-bar__controls", children: children })] }), _jsxs("div", { className: "ui-filter-bar__active", children: [filters.map(filter => onRemoveFilter ?
+                    (_jsx(Button, { variant: "outline", size: "sm", disabled: pending, "aria-label": removeLabel(filter), onClick: () => {
+                            onRemoveFilter(filter.id);
+                        }, children: `${filter.label}: ${filter.value} ×` }, filter.id)) :
+                    (_jsx("span", { children: `${filter.label}: ${filter.value}` }, filter.id))), onReset && filters.length > 0 && _jsx(Button, { variant: "ghost", size: "sm", disabled: pending, onClick: onReset, children: resetLabel }), actions] }), _jsx("p", { className: "ui-filter-bar__results", role: "status", "aria-live": "polite", "aria-atomic": "true", children: resultLabel })] }));

package/dist/data-table-range-model.d.ts

@@ -0,0 +1,8 @@
+export interface DataTableViewRange {
+    id: string;
+    from: string;
+    to: string;
+}
+export declare const isDataTableRange: (value: unknown) => value is DataTableViewRange;
+export declare const matchesDataTableRange: (value: unknown, range: unknown, kind: "number" | "date") => boolean;
+//# sourceMappingURL=data-table-range-model.d.ts.map

package/dist/data-table-range-model.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-range-model.d.ts","sourceRoot":"","sources":["../src/data-table-range-model.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,EAAE,MAAM,CAAA;CACX;AAED,eAAO,MAAM,gBAAgB,GAAI,OAAO,OAAO,KAAG,KAAK,IAAI,kBAG1D,CAAA;AA8BD,eAAO,MAAM,qBAAqB,GAAI,OAAO,OAAO,EAAE,OAAO,OAAO,EAAE,MAAM,QAAQ,GAAG,MAAM,KAAG,OAO/F,CAAA"}

package/dist/data-table-range-model.js

@@ -0,0 +1,31 @@
+export const isDataTableRange = (value) => (typeof value === 'object' && value !== null && 'id' in value && typeof value.id === 'string' &&
+    'from' in value && typeof value.from === 'string' && 'to' in value && typeof value.to === 'string');
+const comparable = (value, kind) => {
+    if (typeof value !== 'string' && typeof value !== 'number')
+        return undefined;
+    if (String(value).trim() === '')
+        return undefined;
+    if (kind === 'number') {
+        const parsed = Number(value);
+        return Number.isFinite(parsed) ? parsed : undefined;
+    }
+    if (typeof value !== 'string' || !/^\d{4}-\d{2}-\d{2}$/u.test(value))
+        return undefined;
+    const parsed = Date.parse(value);
+    return Number.isFinite(parsed) && new Date(parsed).toISOString().slice(0, 10) === value ? parsed : undefined;
+};
+const matchesBound = (value, bound, kind, lower) => {
+    if (bound === '')
+        return true;
+    const parsed = comparable(bound, kind);
+    if (parsed === undefined)
+        return false;
+    return lower ? value >= parsed : value <= parsed;
+};
+export const matchesDataTableRange = (value, range, kind) => {
+    if (!isDataTableRange(range))
+        return false;
+    const current = comparable(value, kind);
+    return current !== undefined && matchesBound(current, range.from, kind, true) &&
+        matchesBound(current, range.to, kind, false);
+};

package/dist/data-table-range.d.ts

@@ -0,0 +1,17 @@
+import type { DataTableViewRange } from './data-table-range-model.js';
+interface RangeControlsProps {
+    columns: readonly {
+        key: string;
+        label: string;
+        rangeFilter?: 'number' | 'date';
+    }[];
+    ranges: readonly DataTableViewRange[];
+    id: string;
+    disabled: boolean;
+    fromLabel: (label: string) => string;
+    toLabel: (label: string) => string;
+    onChange: (ranges: DataTableViewRange[]) => void;
+}
+export declare const DataTableRangeControls: ({ columns, ranges, id, disabled, fromLabel, toLabel, onChange }: RangeControlsProps) => import("react").JSX.Element[];
+export {};
+//# sourceMappingURL=data-table-range.d.ts.map

package/dist/data-table-range.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-range.d.ts","sourceRoot":"","sources":["../src/data-table-range.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAA;AAErE,UAAU,kBAAkB;IAC1B,OAAO,EAAE,SAAS;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,WAAW,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAA;KAAE,EAAE,CAAA;IACnF,MAAM,EAAE,SAAS,kBAAkB,EAAE,CAAA;IACrC,EAAE,EAAE,MAAM,CAAA;IACV,QAAQ,EAAE,OAAO,CAAA;IACjB,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IACpC,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IAClC,QAAQ,EAAE,CAAC,MAAM,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAA;CACjD;AAED,eAAO,MAAM,sBAAsB,GAAI,iEAEpC,kBAAkB,kCAsBnB,CAAA"}

package/dist/data-table-range.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Field, Input, Label } from './components.js';
+export const DataTableRangeControls = ({ columns, ranges, id, disabled, fromLabel, toLabel, onChange }) => columns.filter(column => column.rangeFilter).map((column, index) => (_jsxs("fieldset", { className: "ui-data-table-view__range", disabled: disabled, children: [_jsx("legend", { children: column.label }), ['from', 'to'].map(bound => (_jsxs(Field, { controlId: `${id}-range-${index}-${bound}`, children: [_jsx(Label, { htmlFor: `${id}-range-${index}-${bound}`, children: (bound === 'from' ? fromLabel : toLabel)(column.label) }), _jsx(Input, { id: `${id}-range-${index}-${bound}`, type: column.rangeFilter === 'date' ? 'date' : 'number', step: column.rangeFilter === 'number' ? 'any' : undefined, value: ranges.find(range => range.id === column.key)?.[bound] ?? '', onChange: event => {
+                        const existing = ranges.find(range => range.id === column.key) ?? { id: column.key, from: '', to: '' };
+                        const next = { ...existing, [bound]: event.currentTarget.value };
+                        const remaining = ranges.filter(range => range.id !== column.key);
+                        onChange(next.from || next.to ? [...remaining, next] : remaining);
+                    } })] }, bound)))] }, column.key)));

package/dist/data-table-saved-views.d.ts

@@ -0,0 +1,30 @@
+import type { DataTableViewState } from './data-table-view.js';
+export interface DataTableSavedView {
+    id: string;
+    label: string;
+    state: DataTableViewState;
+}
+export interface DataTableSavedViewsProps {
+    views: readonly DataTableSavedView[];
+    state: DataTableViewState;
+    activeId?: string | undefined;
+    resetState: DataTableViewState;
+    onApply: (state: DataTableViewState, id: string | undefined) => void;
+    onSave: (label: string, state: DataTableViewState) => void;
+    onUpdate?: (id: string, state: DataTableViewState) => void;
+    onRemove?: (id: string) => void;
+    disabled?: boolean;
+    labels?: Partial<{
+        region: string;
+        view: string;
+        custom: string;
+        name: string;
+        save: string;
+        update: string;
+        remove: string;
+        reset: string;
+    }>;
+}
+/** Persistence and account scoping are explicit host callbacks. No browser storage is accessed. */
+export declare const DataTableSavedViews: ({ views, state, activeId, resetState, onApply, onSave, onUpdate, onRemove, disabled, labels: overrides }: DataTableSavedViewsProps) => import("react").JSX.Element;
+//# sourceMappingURL=data-table-saved-views.d.ts.map

package/dist/data-table-saved-views.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-saved-views.d.ts","sourceRoot":"","sources":["../src/data-table-saved-views.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAE9D,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,kBAAkB,CAAA;CAC1B;AAED,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,SAAS,kBAAkB,EAAE,CAAA;IACpC,KAAK,EAAE,kBAAkB,CAAA;IACzB,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC7B,UAAU,EAAE,kBAAkB,CAAA;IAC9B,OAAO,EAAE,CAAC,KAAK,EAAE,kBAAkB,EAAE,EAAE,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAA;IACpE,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAA;IAC1D,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAA;IAC1D,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;QACf,MAAM,EAAE,MAAM,CAAA;QACd,IAAI,EAAE,MAAM,CAAA;QACZ,MAAM,EAAE,MAAM,CAAA;QACd,IAAI,EAAE,MAAM,CAAA;QACZ,IAAI,EAAE,MAAM,CAAA;QACZ,MAAM,EAAE,MAAM,CAAA;QACd,MAAM,EAAE,MAAM,CAAA;QACd,KAAK,EAAE,MAAM,CAAA;KACd,CAAC,CAAA;CACH;AA0BD,mGAAmG;AACnG,eAAO,MAAM,mBAAmB,GAAI,0GAEjC,wBAAwB,gCAoF1B,CAAA"}

package/dist/data-table-saved-views.js

@@ -0,0 +1,49 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from 'react';
+import { Button, Field, Input, Label, NativeSelect } from './components.js';
+import { parseDataTableViewState } from './data-table-state.js';
+const labels = {
+    region: 'Saved record views',
+    view: 'Saved view',
+    custom: 'Custom view',
+    name: 'New view name',
+    save: 'Save new view',
+    update: 'Update view',
+    remove: 'Remove view',
+    reset: 'Reset view'
+};
+const savedState = (state) => {
+    const copied = parseDataTableViewState(state);
+    return { ...copied, pagination: { ...copied.pagination, pageIndex: 0 } };
+};
+const assertSavedViews = (views) => {
+    const ids = views.map(view => view.id);
+    if (ids.some(value => typeof value !== 'string' || !value.trim()) || new Set(ids).size !== ids.length)
+        throw new TypeError('Saved views require unique, nonempty IDs.');
+};
+/** Persistence and account scoping are explicit host callbacks. No browser storage is accessed. */
+export const DataTableSavedViews = ({ views, state, activeId, resetState, onApply, onSave, onUpdate, onRemove, disabled = false, labels: overrides }) => {
+    const id = useId();
+    const [name, setName] = useState('');
+    const text = { ...labels, ...overrides };
+    assertSavedViews(views);
+    const active = views.find(view => view.id === activeId);
+    return (_jsxs("section", { className: "ui-data-table-view__saved", "aria-label": text.region, "aria-busy": disabled, children: [_jsxs(Field, { controlId: `${id}-view`, children: [_jsx(Label, { htmlFor: `${id}-view`, children: text.view }), _jsxs(NativeSelect, { id: `${id}-view`, value: active?.id ?? '', disabled: disabled, onChange: event => {
+                            const view = views.find(item => item.id === event.currentTarget.value);
+                            if (view)
+                                onApply(savedState(view.state), view.id);
+                        }, children: [_jsx("option", { value: "", disabled: true, children: text.custom }), views.map(view => _jsx("option", { value: view.id, children: view.label }, view.id))] })] }), _jsxs(Field, { controlId: `${id}-name`, children: [_jsx(Label, { htmlFor: `${id}-name`, children: text.name }), _jsx(Input, { id: `${id}-name`, value: name, maxLength: 120, disabled: disabled, onChange: event => {
+                            setName(event.currentTarget.value);
+                        } })] }), _jsx(Button, { type: "button", disabled: disabled || !name.trim(), onClick: () => {
+                    onSave(name.trim(), savedState(state));
+                }, children: text.save }), onUpdate && (_jsx(Button, { type: "button", variant: "outline", disabled: disabled || !active, onClick: () => {
+                    if (active)
+                        onUpdate(active.id, savedState(state));
+                }, children: text.update })), onRemove && (_jsx(Button, { type: "button", variant: "outline", disabled: disabled || !active, onClick: () => {
+                    if (active)
+                        onRemove(active.id);
+                }, children: text.remove })), _jsx(Button, { type: "button", variant: "outline", disabled: disabled, onClick: () => {
+                    onApply(savedState(resetState), undefined);
+                }, children: text.reset })] }));
+};

package/dist/data-table-selection-model.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+export interface DataTableViewSelection<T> {
+    selectedIds: readonly string[];
+    onChange: (ids: string[]) => void;
+    /** Return a localized reason to prevent selection. Permissions remain server-owned. */
+    unavailableReason?: (row: T) => string | undefined;
+    actions?: (selection: DataTableViewSelectionResult<T>) => ReactNode;
+}
+export interface DataTableViewSelectionResult<T> {
+    selectedIds: readonly string[];
+    /** Only records supplied by the host; not a complete server-side selection. */
+    selectedRows: readonly T[];
+    pageSelected: boolean;
+    pagePartiallySelected: boolean;
+    eligiblePageCount: number;
+    isSelected: (row: T) => boolean;
+    unavailableReason: (row: T) => string | undefined;
+    toggle: (row: T) => void;
+    togglePage: () => void;
+    clear: () => void;
+}
+export declare const createDataTableSelection: <T>(rows: readonly T[], page: readonly T[], getId: (row: T) => string, selection: DataTableViewSelection<T> | undefined, disabled: boolean) => DataTableViewSelectionResult<T> | undefined;
+//# sourceMappingURL=data-table-selection-model.d.ts.map

package/dist/data-table-selection-model.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-selection-model.d.ts","sourceRoot":"","sources":["../src/data-table-selection-model.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,MAAM,WAAW,sBAAsB,CAAC,CAAC;IACvC,WAAW,EAAE,SAAS,MAAM,EAAE,CAAA;IAC9B,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACjC,uFAAuF;IACvF,iBAAiB,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,GAAG,SAAS,CAAA;IAClD,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,4BAA4B,CAAC,CAAC,CAAC,KAAK,SAAS,CAAA;CACpE;AAED,MAAM,WAAW,4BAA4B,CAAC,CAAC;IAC7C,WAAW,EAAE,SAAS,MAAM,EAAE,CAAA;IAC9B,+EAA+E;IAC/E,YAAY,EAAE,SAAS,CAAC,EAAE,CAAA;IAC1B,YAAY,EAAE,OAAO,CAAA;IACrB,qBAAqB,EAAE,OAAO,CAAA;IAC9B,iBAAiB,EAAE,MAAM,CAAA;IACzB,UAAU,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,OAAO,CAAA;IAC/B,iBAAiB,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,GAAG,SAAS,CAAA;IACjD,MAAM,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,CAAA;IACxB,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,KAAK,EAAE,MAAM,IAAI,CAAA;CAClB;AAED,eAAO,MAAM,wBAAwB,GAAI,CAAC,EACxC,MAAM,SAAS,CAAC,EAAE,EAAE,MAAM,SAAS,CAAC,EAAE,EAAE,OAAO,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,EACjE,WAAW,sBAAsB,CAAC,CAAC,CAAC,GAAG,SAAS,EAAE,UAAU,OAAO,KAClE,4BAA4B,CAAC,CAAC,CAAC,GAAG,SAsCpC,CAAA"}

package/dist/data-table-selection-model.js

@@ -0,0 +1,36 @@
+export const createDataTableSelection = (rows, page, getId, selection, disabled) => {
+    if (!selection)
+        return undefined;
+    const ids = Array.from(selection.selectedIds);
+    if (ids.some(id => typeof id !== 'string' || !id.trim()) || new Set(ids).size !== ids.length)
+        throw new TypeError('DataTableView selection requires unique, nonempty IDs.');
+    const selected = new Set(ids);
+    const reason = (row) => selection.unavailableReason?.(row);
+    const eligible = page.filter(row => reason(row) === undefined).map(getId);
+    const selectedOnPage = eligible.filter(id => selected.has(id)).length;
+    const pageSelected = eligible.length > 0 && selectedOnPage === eligible.length;
+    return {
+        selectedIds: ids,
+        selectedRows: rows.filter(row => selected.has(getId(row))),
+        eligiblePageCount: eligible.length,
+        pageSelected,
+        pagePartiallySelected: selectedOnPage > 0 && !pageSelected,
+        isSelected: row => selected.has(getId(row)),
+        unavailableReason: reason,
+        toggle: row => {
+            if (disabled || reason(row) !== undefined || !page.some(item => getId(item) === getId(row)))
+                return;
+            selection.onChange(selected.has(getId(row)) ? ids.filter(id => id !== getId(row)) : [...ids, getId(row)]);
+        },
+        togglePage: () => {
+            if (disabled)
+                return;
+            const onPage = new Set(eligible);
+            selection.onChange(pageSelected ? ids.filter(id => !onPage.has(id)) : [...new Set([...ids, ...eligible])]);
+        },
+        clear: () => {
+            if (!disabled)
+                selection.onChange([]);
+        }
+    };
+};

package/dist/data-table-selection.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import type { DataTableViewSelectionResult } from './data-table-selection-model.js';
+export declare const DataTableSelectionControls: <T>({ selection, disabled, selectPageLabel, clearLabel, countLabel, actions }: {
+    selection: DataTableViewSelectionResult<T> | undefined;
+    disabled: boolean;
+    selectPageLabel: string;
+    clearLabel: string;
+    countLabel: (count: number) => string;
+    actions: ((selection: DataTableViewSelectionResult<T>) => ReactNode) | undefined;
+}) => import("react").JSX.Element | null;
+//# sourceMappingURL=data-table-selection.d.ts.map

package/dist/data-table-selection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-selection.d.ts","sourceRoot":"","sources":["../src/data-table-selection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,iCAAiC,CAAA;AAEnF,eAAO,MAAM,0BAA0B,GAAI,CAAC,EAAG,2EAE5C;IACD,SAAS,EAAE,4BAA4B,CAAC,CAAC,CAAC,GAAG,SAAS,CAAA;IACtD,QAAQ,EAAE,OAAO,CAAA;IACjB,eAAe,EAAE,MAAM,CAAA;IACvB,UAAU,EAAE,MAAM,CAAA;IAClB,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IACrC,OAAO,EAAE,CAAC,CAAC,SAAS,EAAE,4BAA4B,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC,GAAG,SAAS,CAAA;CACjF,uCAqBA,CAAA"}

package/dist/data-table-selection.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Checkbox, Label } from './components.js';
+export const DataTableSelectionControls = ({ selection, disabled, selectPageLabel, clearLabel, countLabel, actions }) => {
+    if (!selection)
+        return null;
+    return (_jsxs("div", { className: "ui-data-table-view__selection", role: "group", "aria-label": countLabel(selection.selectedIds.length), children: [_jsxs(Label, { children: [_jsx(Checkbox, { checked: selection.pageSelected, ref: input => {
+                            if (input)
+                                input.indeterminate = selection.pagePartiallySelected;
+                        }, disabled: disabled || selection.eligiblePageCount === 0, onChange: selection.togglePage }), selectPageLabel] }), _jsx("span", { role: "status", children: countLabel(selection.selectedIds.length) }), _jsx(Button, { type: "button", variant: "outline", disabled: disabled || selection.selectedIds.length === 0, onClick: selection.clear, children: clearLabel }), actions?.(selection)] }));
+};

package/dist/data-table-state.d.ts

@@ -0,0 +1,6 @@
+import type { DataTableViewState } from './data-table-view.js';
+export declare const isRecord: (value: unknown) => value is Record<string, unknown>;
+export declare const assertViewState: (state: unknown) => asserts state is DataTableViewState;
+/** Validate an untrusted saved state and copy only view preferences, never records or selection. */
+export declare const parseDataTableViewState: (value: unknown) => DataTableViewState;
+//# sourceMappingURL=data-table-state.d.ts.map

package/dist/data-table-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-state.d.ts","sourceRoot":"","sources":["../src/data-table-state.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAE9D,eAAO,MAAM,QAAQ,GAAI,OAAO,OAAO,KAAG,KAAK,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAExE,CAAA;AA2BD,eAAO,MAAM,eAAe,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,OAAO,CAAC,KAAK,IAAI,kBAMlE,CAAA;AAED,oGAAoG;AACpG,eAAO,MAAM,uBAAuB,GAAI,OAAO,OAAO,KAAG,kBAgBxD,CAAA"}

package/dist/data-table-state.js

@@ -0,0 +1,38 @@
+import { isDataTableRange } from './data-table-range-model.js';
+export const isRecord = (value) => (typeof value === 'object' && value !== null && !Array.isArray(value));
+const assertPagination = (pagination) => {
+    if (!isRecord(pagination) || !Number.isSafeInteger(pagination.pageSize) ||
+        typeof pagination.pageSize !== 'number' || pagination.pageSize <= 0 ||
+        !Number.isSafeInteger(pagination.pageIndex) || typeof pagination.pageIndex !== 'number' || pagination.pageIndex < 0)
+        throw new RangeError('DataTableView requires a positive integer page size and a nonnegative integer page index.');
+};
+const isFilter = (filter) => (isRecord(filter) && typeof filter.id === 'string' && typeof filter.value === 'string');
+const isSort = (sort) => (isRecord(sort) && typeof sort.id === 'string' && typeof sort.desc === 'boolean');
+const isDensity = (density) => density === 'comfortable' || density === 'compact';
+const everyItem = (value, validate) => Array.isArray(value) && Array.from(value).every(validate);
+const validPreferences = (state) => typeof state.search === 'string' && isRecord(state.visibility) &&
+    Object.values(state.visibility).every(value => typeof value === 'boolean') &&
+    everyItem(state.filters, isFilter) && everyItem(state.sorting, isSort) && isDensity(state.density);
+export const assertViewState = state => {
+    if (!isRecord(state) || !validPreferences(state) ||
+        (state.ranges !== undefined && !everyItem(state.ranges, isDataTableRange)))
+        throw new TypeError('DataTableView requires valid search, filters, visibility, sorting and density state.');
+    assertPagination(state.pagination);
+};
+/** Validate an untrusted saved state and copy only view preferences, never records or selection. */
+export const parseDataTableViewState = (value) => {
+    assertViewState(value);
+    return {
+        search: value.search,
+        filters: value.filters.map(filter => ({ id: filter.id, value: filter.value })),
+        visibility: { ...value.visibility },
+        pagination: { pageIndex: value.pagination.pageIndex, pageSize: value.pagination.pageSize },
+        sorting: value.sorting.map(sort => ({ id: sort.id, desc: sort.desc })),
+        density: value.density,
+        ...(value.ranges === undefined ?
+            {} :
+            {
+                ranges: value.ranges.map(range => ({ id: range.id, from: range.from, to: range.to }))
+            })
+    };
+};

package/dist/data-table-view.d.ts

@@ -0,0 +1,88 @@
+import type { ReactNode } from 'react';
+import { type DataTableViewRange } from './data-table-range-model.js';
+import { type DataTableViewSelection, type DataTableViewSelectionResult } from './data-table-selection-model.js';
+export type { DataTableViewRange } from './data-table-range-model.js';
+export type { DataTableViewSelection, DataTableViewSelectionResult } from './data-table-selection-model.js';
+export interface DataTableViewColumn<T> {
+    key: string;
+    label: string;
+    value?: (row: T) => string | number | null;
+    canHide?: boolean;
+    sortable?: boolean;
+    filterOptions?: readonly {
+        value: string;
+        label: string;
+    }[];
+    rangeFilter?: 'number' | 'date';
+}
+/** Serializable view state; record objects remain outside this state. */
+export interface DataTableViewState {
+    search: string;
+    filters: {
+        id: string;
+        value: string;
+    }[];
+    ranges?: DataTableViewRange[];
+    visibility: Record<string, boolean>;
+    pagination: {
+        pageIndex: number;
+        pageSize: number;
+    };
+    sorting: {
+        id: string;
+        desc: boolean;
+    }[];
+    density: 'comfortable' | 'compact';
+}
+export interface DataTableViewResult<T> {
+    rows: readonly T[];
+    isColumnVisible: (key: string) => boolean;
+    visibleColumnCount: number;
+    filteredCount: number;
+    state: DataTableViewState;
+    toggleSort: (key: string, multiple?: boolean) => void;
+    selection: DataTableViewSelectionResult<T> | undefined;
+}
+export interface DataTableViewLabels {
+    search: string;
+    columns: string;
+    all: string;
+    density: string;
+    comfortable: string;
+    compact: string;
+    pageSize: string;
+    previous: string;
+    next: string;
+    empty: string;
+    rangeFrom: (column: string) => string;
+    rangeTo: (column: string) => string;
+    selectPage: string;
+    clearSelection: string;
+    selected: (count: number) => string;
+    /** Receives one-based page and at least one page, including empty results. */
+    page: (page: number, pages: number, matchingRows: number) => string;
+}
+export interface DataTableViewProps<T> {
+    rows: readonly T[];
+    columns: readonly DataTableViewColumn<T>[];
+    getRowId: (row: T) => string;
+    children: (view: DataTableViewResult<T>) => ReactNode;
+    labels?: Partial<DataTableViewLabels>;
+    label: string;
+    state?: DataTableViewState;
+    defaultState?: Partial<DataTableViewState>;
+    onStateChange?: (state: DataTableViewState) => void;
+    /** Server mode never filters, sorts or slices the supplied page. */
+    mode?: 'client' | 'server';
+    rowCount?: number;
+    /** Keep existing application/server ordering while filtering and paging locally. */
+    manualSorting?: boolean;
+    disabled?: boolean;
+    toolbar?: ReactNode;
+    searchable?: boolean;
+    selection?: DataTableViewSelection<T>;
+}
+export declare const DataTableView: <T extends {
+    id: string;
+}>(props: DataTableViewProps<T>) => import("react").JSX.Element;
+//# sourceMappingURL=data-table-view.d.ts.map

package/dist/data-table-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-view.d.ts","sourceRoot":"","sources":["../src/data-table-view.tsx"],"names":[],"mappings":"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"}

package/dist/data-table-view.js

@@ -0,0 +1 @@
+"use client";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useEffect,useId,useMemo,useRef,useState}from"react";import{columnFilteringFeature,columnVisibilityFeature,createFilteredRowModel,createPaginatedRowModel,createSortedRowModel,globalFilteringFeature,rowPaginationFeature,rowSortingFeature,tableFeatures,useTable}from"@tanstack/react-table";import{Button,Checkbox,Field,Input,Label,NativeSelect}from"./components.js";import{DataTableRangeControls}from"./data-table-range.js";import{matchesDataTableRange}from"./data-table-range-model.js";import{DataTableSelectionControls}from"./data-table-selection.js";import{createDataTableSelection}from"./data-table-selection-model.js";import{assertViewState,isRecord}from"./data-table-state.js";const createFeatures=()=>tableFeatures({columnFilteringFeature,globalFilteringFeature,columnVisibilityFeature,rowSortingFeature,rowPaginationFeature,filteredRowModel:createFilteredRowModel(),sortedRowModel:createSortedRowModel(),paginatedRowModel:createPaginatedRowModel()}),english={search:"Search records",columns:"Columns",all:"All",density:"Density",comfortable:"Comfortable",compact:"Compact",pageSize:"Rows per page",previous:"Previous page",next:"Next page",empty:"No matching records",rangeFrom:column=>`${column}: from`,rangeTo:column=>`${column}: to`,selectPage:"Select eligible records on this page",clearSelection:"Clear selection",selected:count=>`${count} selected records`,page:(page,pages,count)=>`Page ${page} of ${pages} \xB7 ${count} records`},defaultView=(initial={})=>({search:"",filters:[],visibility:{},pagination:{pageIndex:0,pageSize:25},sorting:[],density:"comfortable",...initial}),textValue=value=>typeof value=="string"||typeof value=="number"?String(value):"",stableRows=(rows,getRowId)=>{const data=Array.from(rows);if(!data.every(row=>typeof row=="object"&&row!==null&&"id"in row&&typeof row.id=="string"))throw new TypeError("DataTableView requires dense records with string IDs.");const ids=data.map(getRowId);if(ids.some(id=>typeof id!="string"||id.length===0)||new Set(ids).size!==ids.length)throw new TypeError("DataTableView requires unique, nonempty row IDs.");return data},isFilterOptions=options=>options===void 0||Array.isArray(options)&&Array.from(options).every(option=>isRecord(option)&&typeof option.value=="string"&&typeof option.label=="string"),isColumnFiltering=column=>isFilterOptions(column.filterOptions)&&(column.rangeFilter===void 0||column.rangeFilter==="number"||column.rangeFilter==="date")&&!(column.rangeFilter&&column.filterOptions),isColumnConfiguration=column=>typeof column.label=="string"&&(column.value===void 0||typeof column.value=="function")&&(column.canHide===void 0||typeof column.canHide=="boolean")&&(column.sortable===void 0||typeof column.sortable=="boolean")&&isColumnFiltering(column),assertColumns=columns=>{if(!Array.isArray(columns))throw new TypeError("DataTableView requires an array of columns.");const keys=Array.from(columns,column=>{if(!isRecord(column)||typeof column.key!="string"||column.key.trim().length===0)throw new TypeError("DataTableView requires unique, nonempty column keys.");if(!isColumnConfiguration(column))throw new TypeError("DataTableView requires valid column labels, accessors, flags and filter options.");return column.key});if(new Set(keys).size!==keys.length)throw new TypeError("DataTableView requires unique, nonempty column keys.")},useViewState=(controlled,initial,onChange)=>{if(initial!==void 0&&!isRecord(initial))throw new TypeError("DataTableView requires an object for default state.");const initialView=defaultView(initial);assertViewState(initialView),controlled!==void 0&&assertViewState(controlled);const[local,setLocal]=useState(()=>initialView),state=controlled??local;return{state,update:patch=>{const next={...state,...patch};controlled===void 0&&setLocal(next),onChange?.(next)}}},matchingCount=(table,mode,total)=>{if(mode!=="server")return table.getFilteredRowModel().rows.length;if(total===void 0||!Number.isSafeInteger(total)||total<0)throw new RangeError("Server DataTableView requires a nonnegative integer matching rowCount.");return total},useViewModel=({rows,columns,getRowId,state:controlled,defaultState,onStateChange,mode="client",rowCount,manualSorting=!1})=>{assertColumns(columns);const{state,update}=useViewState(controlled,defaultState,onStateChange),features=useMemo(createFeatures,[]),definitions=useMemo(()=>columns.map(column=>({id:column.key,accessorFn:row=>column.value?.(row)??"",enableHiding:column.canHide!==!1,enableSorting:column.sortable===!0,enableGlobalFilter:!!column.value,filterFn:(row,key,value)=>column.rangeFilter?matchesDataTableRange(row.getValue(key),value,column.rangeFilter):textValue(row.getValue(key))===textValue(value),sortFn:(left,right,key)=>{const a=left.getValue(key),b=right.getValue(key);return typeof a=="number"&&typeof b=="number"?a-b:textValue(a).localeCompare(textValue(b),void 0,{numeric:!0,sensitivity:"base"})}})),[columns]),data=useMemo(()=>stableRows(rows,getRowId),[rows,getRowId]),table=useTable({features,data,columns:definitions,getRowId,state:{globalFilter:state.search,columnFilters:[...state.filters.filter(filter=>!columns.some(column=>column.key===filter.id&&column.rangeFilter)),...(state.ranges??[]).filter(range=>columns.some(column=>column.key===range.id&&column.rangeFilter)).map(range=>({id:range.id,value:range}))],columnVisibility:state.visibility,pagination:state.pagination,sorting:state.sorting},globalFilterFn:(row,key,value)=>textValue(row.getValue(key)).toLocaleLowerCase().includes(textValue(value).toLocaleLowerCase()),manualFiltering:mode==="server",manualPagination:mode==="server",manualSorting:mode==="server"||manualSorting,...rowCount===void 0?{}:{rowCount},autoResetPageIndex:!1}),count=matchingCount(table,mode,rowCount),pages=Math.max(1,Math.ceil(count/state.pagination.pageSize)),pageIndex=Math.min(state.pagination.pageIndex,pages-1),lastPageRequestRef=useRef(void 0);useEffect(()=>{if(mode!=="server"||pageIndex===state.pagination.pageIndex){lastPageRequestRef.current=void 0;return}const request=`${state.pagination.pageIndex}:${pageIndex}:${state.pagination.pageSize}`;lastPageRequestRef.current!==request&&(lastPageRequestRef.current=request,update({pagination:{...state.pagination,pageIndex}}))},[mode,pageIndex,state.pagination,update]);const visibleRows=mode==="server"?data:table.getSortedRowModel().rows.slice(pageIndex*state.pagination.pageSize,(pageIndex+1)*state.pagination.pageSize).map(row=>row.original);return{state,update,visibleRows,count,pages,pageIndex,visible:key=>columns.some(column=>column.key===key&&(column.canHide===!1||state.visibility[key]!==!1)),matching:key=>state.filters.find(filter=>filter.id===key)?.value??"",changeQuery:patch=>{update({...patch,pagination:{...patch.pagination??state.pagination,pageIndex:0}})}}},DataTableView=props=>{const{children,columns,label,labels,toolbar,disabled=!1,searchable=!0}=props,{state,update,visibleRows,count,pages,pageIndex,visible,matching,changeQuery}=useViewModel(props),id=useId(),text={...english,...labels},selection=createDataTableSelection(props.rows,visibleRows,props.getRowId,props.selection,disabled);return _jsxs("section",{role:"group",className:"ui-data-table-view","data-density":state.density,"aria-label":label,children:[_jsxs("div",{className:"ui-data-table-view__toolbar",children:[searchable&&_jsxs(Field,{controlId:`${id}-search`,children:[_jsx(Label,{htmlFor:`${id}-search`,children:text.search}),_jsx(Input,{id:`${id}-search`,type:"search",value:state.search,disabled,onChange:event=>{changeQuery({search:event.currentTarget.value})}})]}),columns.filter(column=>column.filterOptions).map((column,index)=>_jsxs(Field,{controlId:`${id}-column-${index}`,children:[_jsx(Label,{htmlFor:`${id}-column-${index}`,children:column.label}),_jsxs(NativeSelect,{id:`${id}-column-${index}`,value:matching(column.key),disabled,onChange:event=>{const value=event.currentTarget.value,filters=state.filters.filter(filter=>filter.id!==column.key);changeQuery({filters:value?[...filters,{id:column.key,value}]:filters})},children:[_jsx("option",{value:"",children:text.all}),column.filterOptions?.map(option=>_jsx("option",{value:option.value,children:option.label},option.value))]})]},column.key)),_jsx(DataTableRangeControls,{columns,ranges:state.ranges??[],id,disabled,fromLabel:text.rangeFrom,toLabel:text.rangeTo,onChange:ranges=>{changeQuery({ranges})}}),_jsxs(Field,{controlId:`${id}-density`,children:[_jsx(Label,{htmlFor:`${id}-density`,children:text.density}),_jsxs(NativeSelect,{id:`${id}-density`,value:state.density,disabled,onChange:event=>{update({density:event.currentTarget.value==="compact"?"compact":"comfortable"})},children:[_jsx("option",{value:"comfortable",children:text.comfortable}),_jsx("option",{value:"compact",children:text.compact})]})]}),toolbar]}),_jsxs("fieldset",{className:"ui-data-table-view__columns",disabled,children:[_jsx("legend",{children:text.columns}),columns.filter(column=>column.canHide!==!1).map(column=>_jsxs(Label,{children:[_jsx(Checkbox,{checked:visible(column.key),disabled:visible(column.key)&&columns.filter(item=>visible(item.key)).length<=1,onChange:event=>{update({visibility:{...state.visibility,[column.key]:event.currentTarget.checked}})}}),column.label]},column.key))]}),_jsx(DataTableSelectionControls,{selection,disabled,selectPageLabel:text.selectPage,clearLabel:text.clearSelection,countLabel:text.selected,actions:props.selection?.actions}),children({selection,rows:visibleRows,isColumnVisible:visible,visibleColumnCount:columns.filter(column=>visible(column.key)).length,filteredCount:count,state,toggleSort:(key,multiple=!1)=>{if(disabled||!columns.some(column=>column.key===key&&column.sortable))return;const active=state.sorting.find(sort=>sort.id===key),sorting=multiple?state.sorting.filter(sort=>sort.id!==key):[];changeQuery({sorting:[...sorting,{id:key,desc:active?!active.desc:!1}]})}}),count===0&&_jsx("p",{role:"status",children:text.empty}),_jsxs("div",{className:"ui-data-table-view__pagination",children:[_jsxs(Field,{controlId:`${id}-size`,children:[_jsx(Label,{htmlFor:`${id}-size`,children:text.pageSize}),_jsx(NativeSelect,{id:`${id}-size`,value:state.pagination.pageSize,disabled,onChange:event=>{changeQuery({pagination:{pageIndex:0,pageSize:Number(event.currentTarget.value)}})},children:[...new Set([10,25,50,100,state.pagination.pageSize])].sort((a,b)=>a-b).map(size=>_jsx("option",{value:size,children:size},size))})]}),_jsx("span",{role:"status","aria-live":"polite",children:text.page(pageIndex+1,pages,count)}),_jsx(Button,{variant:"outline",disabled:disabled||pageIndex===0,onClick:()=>{update({pagination:{...state.pagination,pageIndex:pageIndex-1}})},children:text.previous}),_jsx(Button,{variant:"outline",disabled:disabled||pageIndex>=pages-1,onClick:()=>{update({pagination:{...state.pagination,pageIndex:pageIndex+1}})},children:text.next})]})]})};export{DataTableView};

package/dist/data-table.d.ts

@@ -0,0 +1,60 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { type LumenGlassProp } from './components.js';
+export type DataTableCell = boolean | null | number | string | undefined | {
+    label?: boolean | null | number | string;
+    sortValue?: boolean | null | number | string;
+    value?: boolean | null | number | string;
+};
+export interface DataTableColumn {
+    header?: string;
+    key: string;
+    label?: string;
+    sort?: 'number' | 'string';
+    sortable?: boolean;
+    /** Rich display content does not change the underlying sortable value. */
+    render?: (cell: DataTableCell, row: DataTableRow) => ReactNode;
+    wide?: boolean;
+}
+export type DataTableRow = Record<string, DataTableCell> & {
+    id?: number | string;
+    rowValue?: number | string;
+    value?: number | string;
+};
+export interface DataTableSort {
+    direction: 'ascending' | 'descending';
+    key: string;
+}
+export interface DataTableProps extends ComponentPropsWithoutRef<'div'> {
+    columns?: DataTableColumn[];
+    defaultSort?: DataTableSort | null;
+    glass?: LumenGlassProp;
+    name?: string;
+    onSortChange?: (sort: DataTableSort | null) => void;
+    rows?: DataTableRow[];
+    sort?: DataTableSort | null;
+    sortMode?: 'client' | 'manual';
+    selectable?: boolean;
+    layout?: 'records' | 'scroll';
+    renderDetails?: (row: DataTableRow) => ReactNode;
+    expandedRowIds?: readonly string[];
+    defaultExpandedRowIds?: readonly string[];
+    onExpandedRowIdsChange?: (ids: string[]) => void;
+    expandLabel?: string;
+    collapseLabel?: string;
+    detailsLabel?: string;
+}
+export declare const DataTable: ({ children, className, columns: rawColumns, defaultSort, defaultExpandedRowIds, expandedRowIds, expandLabel, collapseLabel, detailsLabel, glass, layout, name, onExpandedRowIdsChange, onSortChange, renderDetails, rows: rawRows, sort: controlledSort, sortMode, selectable, ...props }: DataTableProps) => import("react").JSX.Element;
+export interface DataTableSortControlsProps extends ComponentPropsWithoutRef<'div'> {
+    columns: readonly DataTableColumn[];
+    sort: DataTableSort | null;
+    onSortChange: (sort: DataTableSort | null) => void;
+    disabled?: boolean;
+    label?: string;
+    directionLabel?: string;
+    ascendingLabel?: string;
+    descendingLabel?: string;
+    placeholder?: string;
+}
+/** A named mobile/toolbar path to the same controlled server sort as table headers. */
+export declare const DataTableSortControls: ({ columns: rawColumns, sort, onSortChange, disabled, label, directionLabel, ascendingLabel, descendingLabel, placeholder, className, ...props }: DataTableSortControlsProps) => import("react").JSX.Element;
+//# sourceMappingURL=data-table.d.ts.map

package/dist/data-table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../src/data-table.tsx"],"names":[],"mappings":"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"}

package/dist/data-table.js

@@ -0,0 +1 @@
+"use client";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useId,useMemo,useState}from"react";import{composeClassName}from"@santi020k/lumen-core";import{Button,Field,Icon,Label,NativeSelect}from"./components.js";const noColumns=[],noRows=[],isRecord=value=>typeof value=="object"&&value!==null&&!Array.isArray(value),primitive=value=>value==null||typeof value=="boolean"||typeof value=="number"||typeof value=="string",isCell=value=>primitive(value)||isRecord(value)&&[value.label,value.sortValue,value.value].every(primitive),isRow=value=>isRecord(value)&&[value.id,value.rowValue,value.value].every(id=>id===void 0||typeof id=="number"||typeof id=="string")&&Object.values(value).every(isCell),optionalString=value=>value===void 0||typeof value=="string",optionalBoolean=value=>value===void 0||typeof value=="boolean",isColumn=value=>isRecord(value)&&typeof value.key=="string"&&value.key.length>0&&[value.header,value.label].every(optionalString)&&[value.sortable,value.wide].every(optionalBoolean)&&(value.sort===void 0||value.sort==="number"||value.sort==="string")&&(value.render===void 0||typeof value.render=="function"),validColumns=value=>{if(!Array.isArray(value))return noColumns;const columns=Array.from(value);return columns.every(isColumn)&&new Set(columns.map(column=>column.key)).size===columns.length?columns:noColumns},rowValue=(row,index)=>String(row.rowValue??row.id??row.value??index),isRows=value=>{if(!Array.isArray(value)||!Array.from(value).every(isRow))return!1;const ids=value.map(rowValue);return!ids.includes("")&&new Set(ids).size===ids.length},classes=(glass,layout,className)=>composeClassName("ui-data-table",glass&&"ui-data-table--glass",glass==="subtle"&&"ui-glass-subtle",glass==="strong"&&"ui-glass-strong",layout==="records"&&"ui-table-wrap--records",className),isObject=cell=>typeof cell=="object"&&cell!==null,formatCell=cell=>{const value=isObject(cell)?cell.label??cell.value:cell;return String(value??"")},sortValue=cell=>isObject(cell)&&cell.sortValue!==void 0&&cell.sortValue!==null?String(cell.sortValue):void 0,compare=(left,right,sortType)=>{const leftValue=sortValue(left)??formatCell(left),rightValue=sortValue(right)??formatCell(right);return sortType==="number"?Number(leftValue.replaceAll(",",""))-Number(rightValue.replaceAll(",","")):leftValue.localeCompare(rightValue,void 0,{numeric:!0,sensitivity:"base"})},emptyIds=[],validIds=value=>Array.isArray(value)&&Array.from(value).every(id=>typeof id=="string")?value:emptyIds,validSort=value=>isRecord(value)&&typeof value.key=="string"&&(value.direction==="ascending"||value.direction==="descending")?{key:value.key,direction:value.direction}:null,useExpansion=({defaultExpandedRowIds,expandedRowIds,onExpandedRowIdsChange})=>{const[uncontrolled,setUncontrolled]=useState(()=>validIds(defaultExpandedRowIds)),expanded=expandedRowIds===void 0?uncontrolled:validIds(expandedRowIds);return{expanded,toggleDetails:id=>{const next=expanded.includes(id)?expanded.filter(value=>value!==id):[...expanded,id];expandedRowIds===void 0&&setUncontrolled(next),onExpandedRowIdsChange?.(next)}}},columnTitle=column=>column.header??column.label??column.key,renderToggle=(ctx,column,rowId,open,id)=>{const{row,toggleDetails,expandLabel,collapseLabel}=ctx;return _jsx(Button,{variant:"ghost",size:"icon","aria-label":`${open?collapseLabel??"Collapse record":expandLabel??"Expand record"}: ${formatCell(row[column.key])||rowId}`,"aria-expanded":open,"aria-controls":open?id:void 0,onClick:()=>{toggleDetails(rowId)},children:_jsx(Icon,{name:open?"chevron-down":"chevron-right"})})},renderCell=(ctx,column,columnIndex,rowId,open,id)=>{const{row,layout,renderDetails}=ctx,disclosure=columnIndex===0&&!!renderDetails;return _jsxs("td",{className:column.wide?"ui-table__cell--wide":void 0,"data-sort-value":sortValue(row[column.key]),role:"cell",children:[layout==="records"&&_jsx("span",{className:"ui-table__label","aria-hidden":"true",children:columnTitle(column)}),_jsxs("div",{className:"ui-table__value",children:[disclosure&&renderToggle(ctx,column,rowId,open,id),column.render?column.render(row[column.key],row):formatCell(row[column.key])]})]},column.key)},renderRow=ctx=>{const{row,index,columns,expanded,detailsId,renderDetails}=ctx,rowId=rowValue(row,index),open=expanded.includes(rowId),id=`${detailsId}-${Array.from(rowId,character=>character.codePointAt(0)?.toString(16)).join("-")}`,record=_jsx("tr",{"data-ui-datatable-row":!0,"data-value":rowId,role:"row",children:columns.map((column,columnIndex)=>renderCell(ctx,column,columnIndex,rowId,open,id))},`record:${rowId}`);if(!open||!renderDetails)return[record];const detail=_jsx("tr",{role:"row","data-ui-datatable-detail":!0,children:_jsx("td",{colSpan:columns.length,role:"cell",className:"ui-table__cell--wide",children:_jsx("section",{id,"aria-label":`${ctx.detailsLabel??"Record details"}: ${rowId}`,children:renderDetails(row)})})},`detail:${rowId}`);return[record,detail]},attrs=(name,sortMode,selectable,glass)=>({"data-ui-datatable":!0,"data-ui-datatable-name":name,"data-ui-datatable-sort-mode":sortMode,"data-ui-datatable-selectable":selectable?"true":void 0,"data-ui-glass-track":glass?!0:void 0}),DataTable=({children,className,columns:rawColumns=noColumns,defaultSort=null,defaultExpandedRowIds,expandedRowIds,expandLabel,collapseLabel,detailsLabel,glass=!1,layout,name,onExpandedRowIdsChange,onSortChange,renderDetails,rows:rawRows=noRows,sort:controlledSort,sortMode="client",selectable=!1,...props})=>{const columns=validColumns(rawColumns),rows=isRows(rawRows)?rawRows:noRows,[uncontrolledSort,setUncontrolledSort]=useState(()=>validSort(defaultSort)),sort=validSort(controlledSort===void 0?uncontrolledSort:controlledSort),{expanded,toggleDetails}=useExpansion({defaultExpandedRowIds,expandedRowIds,onExpandedRowIdsChange}),detailsId=useId(),sortedRows=useMemo(()=>{const entries=rows.map((row,index)=>({row,index}));if(sortMode==="manual"||!sort)return entries;const column=columns.find(candidate=>candidate.sortable&&candidate.key===sort.key);if(!column)return entries;const direction=sort.direction==="ascending"?1:-1;return entries.sort((left,right)=>compare(left.row[column.key],right.row[column.key],column.sort)*direction)},[columns,rows,sort,sortMode]),toggleSort=column=>{const next={direction:sort?.key===column.key&&sort.direction==="ascending"?"descending":"ascending",key:column.key};controlledSort===void 0&&setUncontrolledSort(next),onSortChange?.(next)};return _jsx("div",{className:classes(glass,layout,className),...attrs(name,sortMode,selectable,glass),...props,children:columns.length>0?_jsxs("table",{role:"table",children:[_jsx("thead",{role:"rowgroup",children:_jsx("tr",{role:"row",children:columns.map(column=>{const direction=sort?.key===column.key?sort.direction:void 0,label=columnTitle(column);return _jsx("th",{"aria-sort":direction??(column.sortable?"none":void 0),"data-ui-datatable-sort-bound":"true","data-ui-datatable-sort-type":column.sort,"data-ui-datatable-sortable":column.sortable?"true":void 0,role:"columnheader",scope:"col",children:column.sortable?_jsx("button",{className:"ui-data-table__sort","data-ui-datatable-sort":!0,onClick:()=>{toggleSort(column)},type:"button",children:label}):label},column.key)})})}),_jsx("tbody",{role:"rowgroup",children:sortedRows.flatMap(({row,index})=>renderRow({row,index,columns,layout,renderDetails,expanded,detailsId,toggleDetails,expandLabel,collapseLabel,detailsLabel}))})]}):children})},sortLabels=labels=>({label:labels.label??"Sort by",directionLabel:labels.directionLabel??"Sort direction",ascendingLabel:labels.ascendingLabel??"Ascending",descendingLabel:labels.descendingLabel??"Descending",placeholder:labels.placeholder??"Default order"}),DataTableSortControls=({columns:rawColumns,sort,onSortChange,disabled=!1,label,directionLabel,ascendingLabel,descendingLabel,placeholder,className,...props})=>{const columns=validColumns(rawColumns),text=sortLabels({label,directionLabel,ascendingLabel,descendingLabel,placeholder}),id=useId(),sortable=columns.filter(column=>column.sortable),selected=sortable.find(column=>column.key===sort?.key),descending=sort?.direction==="descending",directionText=descending?text.descendingLabel:text.ascendingLabel;return _jsxs("div",{...props,className:composeClassName("ui-data-table__sort-controls",className),children:[_jsxs(Field,{controlId:id,children:[_jsx(Label,{htmlFor:id,children:text.label}),_jsxs(NativeSelect,{id,disabled,value:selected?.key??"",onChange:event=>{const column=sortable.find(item=>item.key===event.currentTarget.value);onSortChange(column?{key:column.key,direction:"ascending"}:null)},children:[_jsx("option",{value:"",children:text.placeholder}),sortable.map(column=>_jsx("option",{value:column.key,children:columnTitle(column)},column.key))]})]}),_jsxs(Button,{variant:"outline",disabled:disabled||!selected,"aria-label":`${text.directionLabel}: ${directionText}`,"aria-pressed":descending,onClick:()=>{selected&&onSortChange({key:selected.key,direction:sort?.direction==="ascending"?"descending":"ascending"})},children:[_jsx(Icon,{name:descending?"arrow-down":"arrow-up"}),directionText]})]})};export{DataTable,DataTableSortControls};

package/dist/date-range-calendar.d.ts

@@ -0,0 +1,29 @@
+import type { ComponentPropsWithoutRef } from 'react';
+export interface CalendarRange {
+    start: string;
+    end: string;
+}
+export interface DateRangeCalendarProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> {
+    value: CalendarRange;
+    onValueChange: (value: CalendarRange) => void;
+    locale?: string;
+    min?: string;
+    max?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    labels: {
+        start: string;
+        end: string;
+        presets: string;
+        previousMonth?: string;
+        nextMonth?: string;
+    };
+    presets?: readonly {
+        label: string;
+        value: CalendarRange;
+    }[];
+    formatDate?: (value: string) => string;
+}
+/** Inline range editor. Consumers own draft state and Apply/Cancel actions. */
+export declare const DateRangeCalendar: ({ value, onValueChange, locale, min, max, labels, presets: rawPresets, disabled, readOnly, formatDate, className, ...props }: DateRangeCalendarProps) => import("react").JSX.Element;
+//# sourceMappingURL=date-range-calendar.d.ts.map

package/dist/date-range-calendar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-range-calendar.d.ts","sourceRoot":"","sources":["../src/date-range-calendar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAA;AAQrD,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;CACZ;AAED,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC/F,KAAK,EAAE,aAAa,CAAA;IACpB,aAAa,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IAC7C,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,aAAa,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IACnG,OAAO,CAAC,EAAE,SAAS;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,aAAa,CAAA;KAAE,EAAE,CAAA;IAC5D,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;CACvC;AAuHD,+EAA+E;AAC/E,eAAO,MAAM,iBAAiB,GAAI,8HAG/B,sBAAsB,gCAuDxB,CAAA"}