schummar-table 0.40.5 → 0.41.0

package/dist/index.d.cts

@@ -1,8 +1,8 @@
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import * as React from 'react';
 import { ComponentType, ReactNode, HTMLProps } from 'react';
-import { T as TableTheme, C as CommonFilterProps, S as SerializableValue, a as TableProps, F as FilterImplementation, M as MemoizedTableTheme, I as Id, b as TableItem, c as InternalTableState, P as PartialTableTheme } from './types-CYMVvUGJ.cjs';
-export { e as Column, f as FunctionWithDeps, g as InternalColumn, h as Sort, i as SortDirection, d as TableStateStorage } from './types-CYMVvUGJ.cjs';
+import { T as TableTheme, C as CommonFilterProps, a as TableProps, F as FilterImplementation, M as MemoizedTableTheme, I as Id, b as TableItem, c as InternalTableState, P as PartialTableTheme } from './types-xTAreHv_.cjs';
+export { e as Column, f as FunctionWithDeps, g as InternalColumn, S as Sort, h as SortDirection, d as TableStateStorage } from './types-xTAreHv_.cjs';
 import { Store } from 'schummar-state/react';
 import { E as ExporterEntry } from './exporter-u6SatTo6.cjs';
 import '@emotion/react';
@@ -18,11 +18,12 @@ type DatePickerQuickOption = 'today' | 'thisWeek' | 'thisMonth' | 'thisYear' | '
     label: ReactNode;
     value: Date | DateRange | (() => Date | DateRange);
 } | ((onChange: (value: Date | DateRange | null) => void) => ReactNode);
+type DatePickerChangeSource = 'input' | 'calendarWeek' | 'calendar' | 'quickOption';
 type DatePickerProps = {
     /** Currently selected day or range of days. */
     value: Date | DateRange | null;
     /** Callback for when the day (range) changes. */
-    onChange: (value: Date | DateRange | null) => void;
+    onChange: (value: Date | DateRange | null, source: DatePickerChangeSource) => void;
     /** Currently visible date. */
     dateInView?: Date;
     /** Callback for when the currently visible date changes. */
@@ -92,16 +93,16 @@ declare function dateIntersect(a: Date | DateRange | null | undefined, b: Date |
 declare function dateClamp(date: Date, min?: Date, max?: Date): Date;
 declare function DatePicker(props: DatePickerProps): _emotion_react_jsx_runtime.JSX.Element;
 
-declare function DateFilter<T, V>({ locale, firstDayOfWeek, defaultDateInView, quickOptions, singleSelect, filterBy, minDate, maxDate, showCalendarWeek, ...props }: {
+declare function DateFilter<TItem, TColumnValue>({ locale, firstDayOfWeek, defaultDateInView, quickOptions, singleSelect, filterBy, minDate, maxDate, showCalendarWeek, ...props }: {
     /** If enabled, only single days can be selected. Ranges otherwise. */
     singleSelect?: boolean;
-} & Pick<DatePickerProps, 'locale' | 'firstDayOfWeek' | 'defaultDateInView' | 'quickOptions' | 'minDate' | 'maxDate' | 'showCalendarWeek'> & CommonFilterProps<T, V, Date | DateRange | null, Date | DateRange | null>): JSX.Element;
+} & Pick<DatePickerProps, 'locale' | 'firstDayOfWeek' | 'defaultDateInView' | 'quickOptions' | 'minDate' | 'maxDate' | 'showCalendarWeek'> & CommonFilterProps<TItem, TColumnValue, Date | DateRange | null, Date | DateRange | null>): JSX.Element;
 
 interface RangeFilterProps<T, V> extends CommonFilterProps<T, V, number | null, [number | null, number | null] | null> {
     min?: number;
     max?: number;
 }
-declare function RangeFilter<T, V>({ min, max, filterBy, ...props }: RangeFilterProps<T, V>): JSX.Element;
+declare function RangeFilter<TItem, TColumnValue>({ min, max, filterBy, ...props }: RangeFilterProps<TItem, TColumnValue>): JSX.Element;
 
 interface VirtualListProps<T> extends Omit<HTMLProps<HTMLDivElement>, 'children'> {
     virtual?: boolean | {
@@ -116,13 +117,13 @@ interface VirtualListProps<T> extends Omit<HTMLProps<HTMLDivElement>, 'children'
     children: (item: T, index: number) => ReactNode;
 }
 
-declare function SelectFilter<T, V, F extends SerializableValue>({ options: providedOptions, stringValue, render, singleSelect, hideSearchField, hideResetButton, ...props }: {
+declare function SelectFilter<TItem, TColumnValue, TFilterBy>({ options: providedOptions, stringValue, render, singleSelect, hideSearchField, hideResetButton, ...props }: {
     /** Which options are provided to select. By default all unique item values are used. */
-    options?: F[];
+    options?: TFilterBy[];
     /** String representation of a value. Used to filter options via the text field. */
-    stringValue?: (value: F) => string;
+    stringValue?: (value: TFilterBy) => string;
     /** Render values. By default a string representation of the value is used. */
-    render?: (value: F) => ReactNode;
+    render?: (value: TFilterBy) => ReactNode;
     /** If enabled, only one option can be selected at a time. */
     singleSelect?: boolean;
     /** If enabled, the search field is hidden. */
@@ -132,24 +133,24 @@ declare function SelectFilter<T, V, F extends SerializableValue>({ options: prov
     /** Virtual list props.
      * @default true */
     virtual?: VirtualListProps<unknown>['virtual'];
-} & CommonFilterProps<T, V, F, Set<F>>): JSX.Element;
+} & CommonFilterProps<TItem, TColumnValue, TFilterBy, Set<TFilterBy>>): JSX.Element;
 
 declare function Table<T>(props: TableProps<T>): JSX.Element;
 
-declare function TextFilter<T, V>({ compare, filterBy, placeholder, ...props }: {
+declare function TextFilter<TItem, TColumnValue>({ compare, filterBy, placeholder, ...props }: {
     /** Custom comparison function. Should return true if an item value matches the current filter value.
      * By default a fuzzy text comparison is used.
      */
     compare?: (itemValue: string, filterValue: string) => boolean;
     placeholder?: string;
-} & CommonFilterProps<T, V, string, string>): JSX.Element;
+} & CommonFilterProps<TItem, TColumnValue, string, string>): JSX.Element;
 
-declare function useFilter<T, V, F, S extends SerializableValue>(impl: FilterImplementation<T, V, F, S>): {
+declare function useFilter<TItem, TColumnValue, TFilterBy, TFilterValue>(impl: FilterImplementation<TItem, TColumnValue, TFilterBy, TFilterValue>): {
     isActive: boolean;
     close: () => void;
-    value: S | undefined;
-    onChange: (value?: S) => void;
-    filterBy: (value: V, item: T) => F | F[];
+    value: TFilterValue | undefined;
+    onChange: (value?: TFilterValue) => void;
+    filterBy: (value: TColumnValue, item: TItem) => TFilterBy | TFilterBy[];
 };
 
 declare function useTheme<T, S>(selector: (theme: MemoizedTableTheme<T>) => S): S;
@@ -216,4 +217,4 @@ declare const termMatch: (text: string, query: string) => boolean;
 declare function configureTableTheme(tableTheme: PartialTableTheme): void;
 declare function mergeThemes<T>(...themes: PartialTableTheme<T>[]): PartialTableTheme<T>;
 
-export { AutoFocusTextField, ColumnContext, CommonFilterProps, DateFilter, DatePicker, type DatePickerProps, DatePickerProvider, type DatePickerQuickOption, type DateRange, FilterImplementation, Id, PartialTableTheme, RangeFilter, SelectFilter, Table, TableContext, TableProps, TableResetContext, TableSettingsContext, TableSettingsProvider, TextFilter, commonQuickOptions, configureTableTheme, dateClamp, dateIntersect, endOfDay, getCalendarWeek, helpers, lastDays, mergeThemes, startOfDay, termMatch, textMatch, thisMonth, thisWeek, thisYear, today, useColumnContext, useFilter, useTableContext, useTheme };
+export { AutoFocusTextField, ColumnContext, CommonFilterProps, DateFilter, DatePicker, type DatePickerChangeSource, type DatePickerProps, DatePickerProvider, type DatePickerQuickOption, type DateRange, FilterImplementation, Id, PartialTableTheme, RangeFilter, SelectFilter, Table, TableContext, TableProps, TableResetContext, TableSettingsContext, TableSettingsProvider, TextFilter, commonQuickOptions, configureTableTheme, dateClamp, dateIntersect, endOfDay, getCalendarWeek, helpers, lastDays, mergeThemes, startOfDay, termMatch, textMatch, thisMonth, thisWeek, thisYear, today, useColumnContext, useFilter, useTableContext, useTheme };

package/dist/index.d.ts

@@ -1,8 +1,8 @@
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import * as React from 'react';
 import { ComponentType, ReactNode, HTMLProps } from 'react';
-import { T as TableTheme, C as CommonFilterProps, S as SerializableValue, a as TableProps, F as FilterImplementation, M as MemoizedTableTheme, I as Id, b as TableItem, c as InternalTableState, P as PartialTableTheme } from './types-3d4ARU6a.js';
-export { e as Column, f as FunctionWithDeps, g as InternalColumn, h as Sort, i as SortDirection, d as TableStateStorage } from './types-3d4ARU6a.js';
+import { T as TableTheme, C as CommonFilterProps, a as TableProps, F as FilterImplementation, M as MemoizedTableTheme, I as Id, b as TableItem, c as InternalTableState, P as PartialTableTheme } from './types-DcnzwYBU.js';
+export { e as Column, f as FunctionWithDeps, g as InternalColumn, S as Sort, h as SortDirection, d as TableStateStorage } from './types-DcnzwYBU.js';
 import { Store } from 'schummar-state/react';
 import { E as ExporterEntry } from './exporter-u6SatTo6.js';
 import '@emotion/react';
@@ -18,11 +18,12 @@ type DatePickerQuickOption = 'today' | 'thisWeek' | 'thisMonth' | 'thisYear' | '
     label: ReactNode;
     value: Date | DateRange | (() => Date | DateRange);
 } | ((onChange: (value: Date | DateRange | null) => void) => ReactNode);
+type DatePickerChangeSource = 'input' | 'calendarWeek' | 'calendar' | 'quickOption';
 type DatePickerProps = {
     /** Currently selected day or range of days. */
     value: Date | DateRange | null;
     /** Callback for when the day (range) changes. */
-    onChange: (value: Date | DateRange | null) => void;
+    onChange: (value: Date | DateRange | null, source: DatePickerChangeSource) => void;
     /** Currently visible date. */
     dateInView?: Date;
     /** Callback for when the currently visible date changes. */
@@ -92,16 +93,16 @@ declare function dateIntersect(a: Date | DateRange | null | undefined, b: Date |
 declare function dateClamp(date: Date, min?: Date, max?: Date): Date;
 declare function DatePicker(props: DatePickerProps): _emotion_react_jsx_runtime.JSX.Element;
 
-declare function DateFilter<T, V>({ locale, firstDayOfWeek, defaultDateInView, quickOptions, singleSelect, filterBy, minDate, maxDate, showCalendarWeek, ...props }: {
+declare function DateFilter<TItem, TColumnValue>({ locale, firstDayOfWeek, defaultDateInView, quickOptions, singleSelect, filterBy, minDate, maxDate, showCalendarWeek, ...props }: {
     /** If enabled, only single days can be selected. Ranges otherwise. */
     singleSelect?: boolean;
-} & Pick<DatePickerProps, 'locale' | 'firstDayOfWeek' | 'defaultDateInView' | 'quickOptions' | 'minDate' | 'maxDate' | 'showCalendarWeek'> & CommonFilterProps<T, V, Date | DateRange | null, Date | DateRange | null>): JSX.Element;
+} & Pick<DatePickerProps, 'locale' | 'firstDayOfWeek' | 'defaultDateInView' | 'quickOptions' | 'minDate' | 'maxDate' | 'showCalendarWeek'> & CommonFilterProps<TItem, TColumnValue, Date | DateRange | null, Date | DateRange | null>): JSX.Element;
 
 interface RangeFilterProps<T, V> extends CommonFilterProps<T, V, number | null, [number | null, number | null] | null> {
     min?: number;
     max?: number;
 }
-declare function RangeFilter<T, V>({ min, max, filterBy, ...props }: RangeFilterProps<T, V>): JSX.Element;
+declare function RangeFilter<TItem, TColumnValue>({ min, max, filterBy, ...props }: RangeFilterProps<TItem, TColumnValue>): JSX.Element;
 
 interface VirtualListProps<T> extends Omit<HTMLProps<HTMLDivElement>, 'children'> {
     virtual?: boolean | {
@@ -116,13 +117,13 @@ interface VirtualListProps<T> extends Omit<HTMLProps<HTMLDivElement>, 'children'
     children: (item: T, index: number) => ReactNode;
 }
 
-declare function SelectFilter<T, V, F extends SerializableValue>({ options: providedOptions, stringValue, render, singleSelect, hideSearchField, hideResetButton, ...props }: {
+declare function SelectFilter<TItem, TColumnValue, TFilterBy>({ options: providedOptions, stringValue, render, singleSelect, hideSearchField, hideResetButton, ...props }: {
     /** Which options are provided to select. By default all unique item values are used. */
-    options?: F[];
+    options?: TFilterBy[];
     /** String representation of a value. Used to filter options via the text field. */
-    stringValue?: (value: F) => string;
+    stringValue?: (value: TFilterBy) => string;
     /** Render values. By default a string representation of the value is used. */
-    render?: (value: F) => ReactNode;
+    render?: (value: TFilterBy) => ReactNode;
     /** If enabled, only one option can be selected at a time. */
     singleSelect?: boolean;
     /** If enabled, the search field is hidden. */
@@ -132,24 +133,24 @@ declare function SelectFilter<T, V, F extends SerializableValue>({ options: prov
     /** Virtual list props.
      * @default true */
     virtual?: VirtualListProps<unknown>['virtual'];
-} & CommonFilterProps<T, V, F, Set<F>>): JSX.Element;
+} & CommonFilterProps<TItem, TColumnValue, TFilterBy, Set<TFilterBy>>): JSX.Element;
 
 declare function Table<T>(props: TableProps<T>): JSX.Element;
 
-declare function TextFilter<T, V>({ compare, filterBy, placeholder, ...props }: {
+declare function TextFilter<TItem, TColumnValue>({ compare, filterBy, placeholder, ...props }: {
     /** Custom comparison function. Should return true if an item value matches the current filter value.
      * By default a fuzzy text comparison is used.
      */
     compare?: (itemValue: string, filterValue: string) => boolean;
     placeholder?: string;
-} & CommonFilterProps<T, V, string, string>): JSX.Element;
+} & CommonFilterProps<TItem, TColumnValue, string, string>): JSX.Element;
 
-declare function useFilter<T, V, F, S extends SerializableValue>(impl: FilterImplementation<T, V, F, S>): {
+declare function useFilter<TItem, TColumnValue, TFilterBy, TFilterValue>(impl: FilterImplementation<TItem, TColumnValue, TFilterBy, TFilterValue>): {
     isActive: boolean;
     close: () => void;
-    value: S | undefined;
-    onChange: (value?: S) => void;
-    filterBy: (value: V, item: T) => F | F[];
+    value: TFilterValue | undefined;
+    onChange: (value?: TFilterValue) => void;
+    filterBy: (value: TColumnValue, item: TItem) => TFilterBy | TFilterBy[];
 };
 
 declare function useTheme<T, S>(selector: (theme: MemoizedTableTheme<T>) => S): S;
@@ -216,4 +217,4 @@ declare const termMatch: (text: string, query: string) => boolean;
 declare function configureTableTheme(tableTheme: PartialTableTheme): void;
 declare function mergeThemes<T>(...themes: PartialTableTheme<T>[]): PartialTableTheme<T>;
 
-export { AutoFocusTextField, ColumnContext, CommonFilterProps, DateFilter, DatePicker, type DatePickerProps, DatePickerProvider, type DatePickerQuickOption, type DateRange, FilterImplementation, Id, PartialTableTheme, RangeFilter, SelectFilter, Table, TableContext, TableProps, TableResetContext, TableSettingsContext, TableSettingsProvider, TextFilter, commonQuickOptions, configureTableTheme, dateClamp, dateIntersect, endOfDay, getCalendarWeek, helpers, lastDays, mergeThemes, startOfDay, termMatch, textMatch, thisMonth, thisWeek, thisYear, today, useColumnContext, useFilter, useTableContext, useTheme };
+export { AutoFocusTextField, ColumnContext, CommonFilterProps, DateFilter, DatePicker, type DatePickerChangeSource, type DatePickerProps, DatePickerProvider, type DatePickerQuickOption, type DateRange, FilterImplementation, Id, PartialTableTheme, RangeFilter, SelectFilter, Table, TableContext, TableProps, TableResetContext, TableSettingsContext, TableSettingsProvider, TextFilter, commonQuickOptions, configureTableTheme, dateClamp, dateIntersect, endOfDay, getCalendarWeek, helpers, lastDays, mergeThemes, startOfDay, termMatch, textMatch, thisMonth, thisWeek, thisYear, today, useColumnContext, useFilter, useTableContext, useTheme };

package/dist/index.js

@@ -908,8 +908,8 @@ function AutoFocusTextField(props) {
 
 // src/hooks/useFilter.ts
 import { castDraft } from "immer";
-import { useContext as useContext5, useEffect, useLayoutEffect as useLayoutEffect2, useMemo as useMemo3, useRef as useRef2, useState as useState3 } from "react";
 import { nanoid } from "nanoid";
+import { useContext as useContext5, useEffect, useLayoutEffect as useLayoutEffect2, useMemo as useMemo3, useRef as useRef2, useState as useState3 } from "react";
 
 // src/misc/debounce.ts
 function debounce(function_, ms) {
@@ -973,7 +973,9 @@ function useFilter(impl) {
       });
     };
   }, [table, columnId, impl]);
-  const value = table.useState((state) => state.filterValues.get(columnId));
+  const value = table.useState(
+    (state) => state.filterValues.get(columnId)
+  );
   const [dirtyValue, setDirtyValue] = useState3();
   const implRef = useRef2(impl);
   useLayoutEffect2(() => {
@@ -1293,7 +1295,7 @@ function DatePicker(props) {
     showCalendarWeek,
     blockedRanges = []
   } = defaults(props, context);
-  function onChange(value2) {
+  function onChange(value2, source) {
     if (value2 instanceof Date) {
       value2 = dateClamp(value2, minDate, maxDate);
     } else if (value2) {
@@ -1302,7 +1304,7 @@ function DatePicker(props) {
         max: dateClamp(value2.max, minDate, maxDate)
       };
     }
-    props.onChange(value2);
+    props.onChange(value2, source);
   }
   const Button2 = useTheme((t) => t.components.Button);
   const IconButton2 = useTheme((t) => t.components.IconButton);
@@ -1376,7 +1378,7 @@ function DatePicker(props) {
       if (option instanceof Function) {
         return option((value3) => {
           setDirty(void 0);
-          onChange(value3);
+          onChange(value3, "quickOption");
         });
       }
       const { label, value: value2 } = typeof option === "string" ? commonQuickOptions[option] : option;
@@ -1391,9 +1393,9 @@ function DatePicker(props) {
           onClick: () => {
             setDirty(void 0);
             if (value2 instanceof Function) {
-              onChange(value2(props));
+              onChange(value2(props), "quickOption");
             } else {
-              onChange(value2);
+              onChange(value2, "quickOption");
             }
           },
           children: label
@@ -1428,9 +1430,9 @@ function DatePicker(props) {
       setDirty(void 0);
     }
   }, [rangeSelect]);
-  function set(min2, max2, edit) {
+  function set(source, min2, max2, edit) {
     if (!rangeSelect) {
-      onChange(min2 != null ? min2 : null);
+      onChange(min2 != null ? min2 : null, source);
       return;
     }
     if (min2 && max2 && min2 > max2) {
@@ -1444,7 +1446,7 @@ function DatePicker(props) {
     }
     if (!min2 === !max2) {
       setDirty(void 0);
-      onChange(min2 && max2 ? { min: min2, max: endOfDay(max2) } : null);
+      onChange(min2 && max2 ? { min: min2, max: endOfDay(max2) } : null, source);
     } else {
       setDirty({ min: min2, max: max2 });
     }
@@ -1482,7 +1484,7 @@ function DatePicker(props) {
                 DateInput,
                 {
                   value: min != null ? min : null,
-                  onChange: (date) => set(date != null ? date : void 0, max, "min"),
+                  onChange: (date) => set("input", date != null ? date : void 0, max, "min"),
                   locale
                 }
               ),
@@ -1492,7 +1494,7 @@ function DatePicker(props) {
                   DateInput,
                   {
                     value: max != null ? max : null,
-                    onChange: (date) => set(min, date != null ? date : void 0, "max"),
+                    onChange: (date) => set("input", min, date != null ? date : void 0, "max"),
                     locale
                   }
                 )
@@ -1577,7 +1579,7 @@ function DatePicker(props) {
                           }
                           const min2 = minDate && weekStart.date < minDate ? minDate : weekStart.date;
                           const max2 = maxDate && weekEnd.date > maxDate ? maxDate : weekEnd.date;
-                          set(min2, max2);
+                          set("calendarWeek", min2, max2);
                         },
                         onPointerOver: () => !weekDisabled && setHovered({ min: weekStart.date, max: weekEnd.date }),
                         onPointerOut: () => !weekDisabled && setHovered(void 0),
@@ -1613,10 +1615,10 @@ function DatePicker(props) {
                         }, getDateProps({ dateObj: dateObject })), {
                           onClick: () => {
                             if (dirty) {
-                              if (min) set(min, date);
-                              else set(date, max);
+                              if (min) set("calendar", min, date);
+                              else set("calendar", date, max);
                             } else {
-                              set(date);
+                              set("calendar", date);
                             }
                           },
                           onPointerOver: () => setHovered({ min: date, max: date }),