@vaadin/hilla-react-crud 24.7.0-alpha9 → 24.8.0-alpha1

package/header-filter.js

@@ -1,258 +1,151 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { _enum } from "@vaadin/hilla-lit-form";
-import { DatePicker } from "@vaadin/react-components/DatePicker.js";
-import { Item } from "@vaadin/react-components/Item.js";
-import { ListBox } from "@vaadin/react-components/ListBox.js";
-import { NumberField } from "@vaadin/react-components/NumberField.js";
-import { Select } from "@vaadin/react-components/Select.js";
-import { TextField } from "@vaadin/react-components/TextField.js";
-import { TimePicker } from "@vaadin/react-components/TimePicker.js";
-import {
-  useContext,
-  useEffect,
-  useRef,
-  useState
-} from "react";
-import { ColumnContext, CustomColumnContext } from "./autogrid-column-context.js";
-import { useDatePickerI18n } from "./locale.js";
-import Matcher from "./types/com/vaadin/hilla/crud/filter/PropertyStringFilter/Matcher.js";
-import { convertToTitleCase } from "./util";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { _enum } from '@vaadin/hilla-lit-form';
+import { DatePicker } from '@vaadin/react-components/DatePicker.js';
+import { Item } from '@vaadin/react-components/Item.js';
+import { ListBox } from '@vaadin/react-components/ListBox.js';
+import { NumberField } from '@vaadin/react-components/NumberField.js';
+import { Select } from '@vaadin/react-components/Select.js';
+import { TextField } from '@vaadin/react-components/TextField.js';
+import { TimePicker } from '@vaadin/react-components/TimePicker.js';
+import { useContext, useEffect, useRef, useState, } from 'react';
+import { ColumnContext, CustomColumnContext } from './autogrid-column-context.js';
+import { useDatePickerI18n } from './locale.js';
+import Matcher from './types/com/vaadin/hilla/crud/filter/PropertyStringFilter/Matcher.js';
+import { convertToTitleCase } from './util';
 function useFilterState(initialMatcher) {
-  const context = useContext(ColumnContext);
-  const [matcher, setMatcher] = useState(initialMatcher);
-  const [filterValue, setFilterValue] = useState("");
-  function updateFilter(newMatcher, newFilterValue) {
-    setFilterValue(newFilterValue);
-    setMatcher(newMatcher);
-    const filter = {
-      propertyId: context.propertyInfo.name,
-      filterValue: newFilterValue,
-      matcher: newMatcher,
-      "@type": "propertyString"
-    };
-    context.setColumnFilter(filter, context.filterKey);
-  }
-  return { matcher, filterValue, updateFilter };
+    const context = useContext(ColumnContext);
+    const [matcher, setMatcher] = useState(initialMatcher);
+    const [filterValue, setFilterValue] = useState('');
+    function updateFilter(newMatcher, newFilterValue) {
+        setFilterValue(newFilterValue);
+        setMatcher(newMatcher);
+        const filter = {
+            propertyId: context.propertyInfo.name,
+            filterValue: newFilterValue,
+            matcher: newMatcher,
+            '@type': 'propertyString',
+        };
+        context.setColumnFilter(filter, context.filterKey);
+    }
+    return { matcher, filterValue, updateFilter };
 }
 function useSelectInitWorkaround(selectRef) {
-  useEffect(() => {
-    setTimeout(() => {
-      if (selectRef.current) {
-        selectRef.current.requestContentUpdate();
-      }
-    }, 1);
-  }, []);
+    useEffect(() => {
+        setTimeout(() => {
+            if (selectRef.current) {
+                selectRef.current.requestContentUpdate();
+            }
+        }, 1);
+    }, []);
 }
 function ComparationSelection({ onMatcherChanged, value, isDateTimeType }) {
-  const select = useRef(null);
-  useSelectInitWorkaround(select);
-  return /* @__PURE__ */ jsx(
-    Select,
-    {
-      theme: "small",
-      className: "auto-grid-comparation-selection",
-      ref: select,
-      value,
-      onValueChanged: ({ detail }) => {
-        onMatcherChanged(detail.value);
-      },
-      renderer: () => /* @__PURE__ */ jsxs(ListBox, { children: [
-        /* @__PURE__ */ jsx(Item, { value: Matcher.GREATER_THAN, ...{ label: ">" }, children: isDateTimeType ? "> After" : "> Greater than" }),
-        /* @__PURE__ */ jsx(Item, { value: Matcher.LESS_THAN, ...{ label: "<" }, children: isDateTimeType ? "< Before" : "< Less than" }),
-        /* @__PURE__ */ jsx(Item, { value: Matcher.EQUALS, ...{ label: "=" }, children: "= Equals" })
-      ] })
-    }
-  );
+    const select = useRef(null);
+    useSelectInitWorkaround(select);
+    return (_jsx(Select, { theme: "small", className: "auto-grid-comparation-selection", ref: select, value: value, onValueChanged: ({ detail }) => {
+            onMatcherChanged(detail.value);
+        }, renderer: () => (_jsxs(ListBox, { children: [_jsx(Item, { value: Matcher.GREATER_THAN, label: '>', children: isDateTimeType ? '> After' : '> Greater than' }), _jsx(Item, { value: Matcher.LESS_THAN, label: '<', children: isDateTimeType ? '< Before' : '< Less than' }), _jsx(Item, { value: Matcher.EQUALS, label: '=', children: "= Equals" })] })) }));
 }
-function StringHeaderFilter() {
-  const context = useContext(ColumnContext);
-  const { filterPlaceholder, filterDebounceTime, filterMinLength } = context.customColumnOptions ?? {};
-  const { updateFilter } = useFilterState(Matcher.CONTAINS);
-  const [inputValue, setInputValue] = useState("");
-  useEffect(() => {
-    if (filterMinLength && inputValue && inputValue.length < filterMinLength) {
-      updateFilter(Matcher.CONTAINS, "");
-      return () => {
-      };
-    }
-    const delayInputTimeoutId = setTimeout(() => {
-      updateFilter(Matcher.CONTAINS, inputValue);
-    }, filterDebounceTime ?? 200);
-    return () => clearTimeout(delayInputTimeoutId);
-  }, [inputValue]);
-  return /* @__PURE__ */ jsx("div", { className: "auto-grid-string-filter", children: /* @__PURE__ */ jsx(
-    TextField,
-    {
-      theme: "small",
-      placeholder: filterPlaceholder ?? "Filter...",
-      onInput: (e) => {
-        const fieldValue = e.target.value;
-        setInputValue(fieldValue);
-      }
-    }
-  ) });
-}
-function NumberHeaderFilter() {
-  const context = useContext(ColumnContext);
-  const { filterPlaceholder, filterDebounceTime } = context.customColumnOptions ?? {};
-  const [inputValue, setInputValue] = useState("");
-  const { matcher, filterValue, updateFilter } = useFilterState(Matcher.GREATER_THAN);
-  const select = useRef(null);
-  useSelectInitWorkaround(select);
-  useEffect(() => {
-    const delayInputTimeoutId = setTimeout(() => {
-      updateFilter(matcher, inputValue);
-    }, filterDebounceTime ?? 200);
-    return () => clearTimeout(delayInputTimeoutId);
-  }, [inputValue]);
-  return /* @__PURE__ */ jsxs("div", { className: "auto-grid-number-filter", children: [
-    /* @__PURE__ */ jsx(ComparationSelection, { value: matcher, onMatcherChanged: (m) => updateFilter(m, filterValue) }),
-    /* @__PURE__ */ jsx(
-      NumberField,
-      {
-        theme: "small",
-        placeholder: filterPlaceholder ?? "Filter...",
-        onInput: (e) => {
-          const fieldValue = e.target.value;
-          setInputValue(fieldValue);
+export function StringHeaderFilter() {
+    const context = useContext(ColumnContext);
+    const { filterPlaceholder, filterDebounceTime, filterMinLength } = context.customColumnOptions ?? {};
+    const { updateFilter } = useFilterState(Matcher.CONTAINS);
+    const [inputValue, setInputValue] = useState('');
+    useEffect(() => {
+        if (filterMinLength && inputValue && inputValue.length < filterMinLength) {
+            updateFilter(Matcher.CONTAINS, '');
+            return () => { };
         }
-      }
-    )
-  ] });
-}
-function EnumHeaderFilter() {
-  const { filterValue, updateFilter } = useFilterState(Matcher.EQUALS);
-  const context = useContext(ColumnContext);
-  const model = context.propertyInfo.model;
-  const options = [
-    {
-      value: "",
-      label: ""
-    },
-    ...Object.keys(model[_enum]).map((value) => ({
-      label: convertToTitleCase(value),
-      value
-    }))
-  ];
-  return /* @__PURE__ */ jsx("div", { className: "auto-grid-enum-filter", children: /* @__PURE__ */ jsx(
-    Select,
-    {
-      theme: "small",
-      items: options,
-      value: filterValue,
-      onValueChanged: (e) => {
-        const newFilterValue = e.detail.value;
-        updateFilter(Matcher.EQUALS, newFilterValue);
-      }
-    }
-  ) });
+        const delayInputTimeoutId = setTimeout(() => {
+            updateFilter(Matcher.CONTAINS, inputValue);
+        }, filterDebounceTime ?? 200);
+        return () => clearTimeout(delayInputTimeoutId);
+    }, [inputValue]);
+    return (_jsx("div", { className: "auto-grid-string-filter", children: _jsx(TextField, { theme: "small", placeholder: filterPlaceholder ?? 'Filter...', onInput: (e) => {
+                const fieldValue = e.target.value;
+                setInputValue(fieldValue);
+            } }) }));
 }
-function BooleanHeaderFilter() {
-  const { filterValue, updateFilter } = useFilterState(Matcher.EQUALS);
-  const select = useRef(null);
-  useSelectInitWorkaround(select);
-  return /* @__PURE__ */ jsx("div", { className: "auto-grid-boolean-filter", children: /* @__PURE__ */ jsx(
-    Select,
-    {
-      theme: "small",
-      ref: select,
-      onValueChanged: (e) => {
-        const newFilterValue = e.detail.value;
-        updateFilter(Matcher.EQUALS, newFilterValue);
-      },
-      renderer: () => /* @__PURE__ */ jsxs(ListBox, { children: [
-        /* @__PURE__ */ jsx(Item, { value: "", ...{ label: "" } }),
-        /* @__PURE__ */ jsx(Item, { value: "True", ...{ label: "Yes" }, children: "Yes" }),
-        /* @__PURE__ */ jsx(Item, { value: "False", ...{ label: "No" }, children: "No" })
-      ] }),
-      value: filterValue
-    }
-  ) });
+export function NumberHeaderFilter() {
+    const context = useContext(ColumnContext);
+    const { filterPlaceholder, filterDebounceTime } = context.customColumnOptions ?? {};
+    const [inputValue, setInputValue] = useState('');
+    const { matcher, filterValue, updateFilter } = useFilterState(Matcher.GREATER_THAN);
+    const select = useRef(null);
+    useSelectInitWorkaround(select);
+    useEffect(() => {
+        const delayInputTimeoutId = setTimeout(() => {
+            updateFilter(matcher, inputValue);
+        }, filterDebounceTime ?? 200);
+        return () => clearTimeout(delayInputTimeoutId);
+    }, [inputValue]);
+    return (_jsxs("div", { className: "auto-grid-number-filter", children: [_jsx(ComparationSelection, { value: matcher, onMatcherChanged: (m) => updateFilter(m, filterValue) }), _jsx(NumberField, { theme: "small", placeholder: filterPlaceholder ?? 'Filter...', onInput: (e) => {
+                    const fieldValue = e.target.value;
+                    setInputValue(fieldValue);
+                } })] }));
 }
-function DateHeaderFilter() {
-  const context = useContext(ColumnContext);
-  const i18n = useDatePickerI18n();
-  const { matcher, filterValue, updateFilter } = useFilterState(Matcher.GREATER_THAN);
-  const [invalid, setInvalid] = useState(false);
-  return /* @__PURE__ */ jsxs("div", { className: "auto-grid-date-filter", children: [
-    /* @__PURE__ */ jsx(
-      ComparationSelection,
-      {
-        value: matcher,
-        onMatcherChanged: (m) => updateFilter(m, filterValue),
-        isDateTimeType: true
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      DatePicker,
-      {
-        theme: "small",
-        value: filterValue,
-        placeholder: context.customColumnOptions?.filterPlaceholder ?? "Filter...",
-        i18n,
-        onInvalidChanged: ({ detail: { value } }) => {
-          setInvalid(value);
+export function EnumHeaderFilter() {
+    const { filterValue, updateFilter } = useFilterState(Matcher.EQUALS);
+    const context = useContext(ColumnContext);
+    const model = context.propertyInfo.model;
+    const options = [
+        {
+            value: '',
+            label: '',
         },
-        onValueChanged: ({ detail: { value } }) => {
-          if (!(invalid || value === filterValue)) {
-            updateFilter(matcher, value);
-          }
-        }
-      }
-    )
-  ] });
+        ...Object.keys(model[_enum]).map((value) => ({
+            label: convertToTitleCase(value),
+            value,
+        })),
+    ];
+    return (_jsx("div", { className: "auto-grid-enum-filter", children: _jsx(Select, { theme: "small", items: options, value: filterValue, onValueChanged: (e) => {
+                const newFilterValue = e.detail.value;
+                updateFilter(Matcher.EQUALS, newFilterValue);
+            } }) }));
 }
-function TimeHeaderFilter() {
-  const context = useContext(ColumnContext);
-  const { matcher, filterValue, updateFilter } = useFilterState(Matcher.GREATER_THAN);
-  const [invalid, setInvalid] = useState(false);
-  return /* @__PURE__ */ jsxs("div", { className: "auto-grid-time-filter", children: [
-    /* @__PURE__ */ jsx(
-      ComparationSelection,
-      {
-        value: matcher,
-        onMatcherChanged: (m) => updateFilter(m, filterValue),
-        isDateTimeType: true
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      TimePicker,
-      {
-        theme: "small",
-        value: filterValue,
-        placeholder: context.customColumnOptions?.filterPlaceholder ?? "Filter...",
-        onInvalidChanged: ({ detail: { value } }) => {
-          setInvalid(value);
-        },
-        onValueChanged: ({ detail: { value } }) => {
-          if (!(invalid || value === filterValue)) {
-            updateFilter(matcher, value);
-          }
-        }
-      }
-    )
-  ] });
+export function BooleanHeaderFilter() {
+    const { filterValue, updateFilter } = useFilterState(Matcher.EQUALS);
+    const select = useRef(null);
+    useSelectInitWorkaround(select);
+    return (_jsx("div", { className: "auto-grid-boolean-filter", children: _jsx(Select, { theme: "small", ref: select, onValueChanged: (e) => {
+                const newFilterValue = e.detail.value;
+                updateFilter(Matcher.EQUALS, newFilterValue);
+            }, renderer: () => (_jsxs(ListBox, { children: [_jsx(Item, { value: '', label: '' }), _jsx(Item, { value: 'True', label: 'Yes', children: "Yes" }), _jsx(Item, { value: 'False', label: 'No', children: "No" })] })), value: filterValue }) }));
 }
-function NoHeaderFilter() {
-  return /* @__PURE__ */ jsx(Fragment, {});
+export function DateHeaderFilter() {
+    const context = useContext(ColumnContext);
+    const i18n = useDatePickerI18n();
+    const { matcher, filterValue, updateFilter } = useFilterState(Matcher.GREATER_THAN);
+    const [invalid, setInvalid] = useState(false);
+    return (_jsxs("div", { className: "auto-grid-date-filter", children: [_jsx(ComparationSelection, { value: matcher, onMatcherChanged: (m) => updateFilter(m, filterValue), isDateTimeType: true }), _jsx(DatePicker, { theme: "small", value: filterValue, placeholder: context.customColumnOptions?.filterPlaceholder ?? 'Filter...', i18n: i18n, onInvalidChanged: ({ detail: { value } }) => {
+                    setInvalid(value);
+                }, onValueChanged: ({ detail: { value } }) => {
+                    if (!(invalid || value === filterValue)) {
+                        updateFilter(matcher, value);
+                    }
+                } })] }));
 }
-function HeaderFilterWrapper({ original }) {
-  const context = useContext(ColumnContext);
-  const customContext = useContext(CustomColumnContext);
-  const { setColumnFilter, headerFilterRenderer: HeaderFilterRenderer, filterKey } = context ?? customContext;
-  function setFilter(filter) {
-    setColumnFilter(filter, filterKey);
-  }
-  return /* @__PURE__ */ jsx(HeaderFilterRenderer, { original, setFilter });
+export function TimeHeaderFilter() {
+    const context = useContext(ColumnContext);
+    const { matcher, filterValue, updateFilter } = useFilterState(Matcher.GREATER_THAN);
+    const [invalid, setInvalid] = useState(false);
+    return (_jsxs("div", { className: "auto-grid-time-filter", children: [_jsx(ComparationSelection, { value: matcher, onMatcherChanged: (m) => updateFilter(m, filterValue), isDateTimeType: true }), _jsx(TimePicker, { theme: "small", value: filterValue, placeholder: context.customColumnOptions?.filterPlaceholder ?? 'Filter...', onInvalidChanged: ({ detail: { value } }) => {
+                    setInvalid(value);
+                }, onValueChanged: ({ detail: { value } }) => {
+                    if (!(invalid || value === filterValue)) {
+                        updateFilter(matcher, value);
+                    }
+                } })] }));
+}
+export function NoHeaderFilter() {
+    return _jsx(_Fragment, {});
+}
+export function HeaderFilterWrapper({ original }) {
+    const context = useContext(ColumnContext);
+    const customContext = useContext(CustomColumnContext);
+    const { setColumnFilter, headerFilterRenderer: HeaderFilterRenderer, filterKey } = (context ?? customContext);
+    function setFilter(filter) {
+        setColumnFilter(filter, filterKey);
+    }
+    return _jsx(HeaderFilterRenderer, { original: original, setFilter: setFilter });
 }
-export {
-  BooleanHeaderFilter,
-  DateHeaderFilter,
-  EnumHeaderFilter,
-  HeaderFilterWrapper,
-  NoHeaderFilter,
-  NumberHeaderFilter,
-  StringHeaderFilter,
-  TimeHeaderFilter
-};
-//# sourceMappingURL=header-filter.js.map
+//# sourceMappingURL=header-filter.js.map

package/header-filter.js.map

@@ -1,7 +1 @@
-{
-  "version": 3,
-  "sources": ["src/header-filter.tsx"],
-  "sourcesContent": ["import { _enum, type EnumModel } from '@vaadin/hilla-lit-form';\nimport { DatePicker } from '@vaadin/react-components/DatePicker.js';\nimport type { GridColumnProps } from '@vaadin/react-components/GridColumn.js';\nimport { Item } from '@vaadin/react-components/Item.js';\nimport { ListBox } from '@vaadin/react-components/ListBox.js';\nimport { NumberField } from '@vaadin/react-components/NumberField.js';\nimport { Select, type SelectElement } from '@vaadin/react-components/Select.js';\nimport { TextField, type TextFieldElement } from '@vaadin/react-components/TextField.js';\nimport { TimePicker } from '@vaadin/react-components/TimePicker.js';\nimport {\n  type ComponentType,\n  type JSX,\n  type ReactElement,\n  type RefObject,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { ColumnContext, CustomColumnContext } from './autogrid-column-context.js';\nimport { useDatePickerI18n } from './locale.js';\nimport type FilterUnion from './types/com/vaadin/hilla/crud/filter/FilterUnion';\nimport type PropertyStringFilter from './types/com/vaadin/hilla/crud/filter/PropertyStringFilter';\nimport Matcher from './types/com/vaadin/hilla/crud/filter/PropertyStringFilter/Matcher.js';\nimport { convertToTitleCase } from './util';\n\ntype ExtractComponentTypeProps<T extends ComponentType<any>> = T extends ComponentType<infer U> ? U : never;\n\nexport type HeaderRendererProps = ExtractComponentTypeProps<\n  NonNullable<Required<GridColumnProps<unknown>>['headerRenderer']>\n>;\n\nexport type HeaderFilterRendererProps = HeaderRendererProps & {\n  /**\n   * Allows to set custom filters for the column.\n   * This is used by the header filter components.\n   * @param filter - The filter to set in the filter list.\n   */\n  setFilter(filter: FilterUnion): void;\n};\n\nexport type HeaderFilterProps = Readonly<{\n  /**\n   * If true, the column can be sorted. This is useful to disable sorting for\n   * properties that are not sortable in the backend, or that require excessive processing.\n   */\n  sortable?: boolean;\n  /**\n   * If true, the column can be filtered. This is useful to disable filtering for\n   * properties that are not sortable in the backend, or that require excessive processing.\n   */\n  filterable?: boolean;\n  /**\n   * Placeholder text for the filter input.\n   * Only applies to string, number and date/time value filters.\n   */\n  filterPlaceholder?: string;\n  /**\n   * Debounce time for the filter input in milliseconds.\n   * Only applies to string value filters and number value filters.\n   */\n  filterDebounceTime?: number;\n  /**\n   * Minimum length for the filter input.\n   * Only applies to string value filters.\n   */\n  filterMinLength?: number;\n\n  /**\n   * Custom renderer for the filter in the header.\n   */\n  headerFilterRenderer?: ComponentType<HeaderFilterRendererProps>;\n}>;\n\nfunction useFilterState(initialMatcher: Matcher) {\n  const context = useContext(ColumnContext)!;\n  const [matcher, setMatcher] = useState(initialMatcher);\n  const [filterValue, setFilterValue] = useState('');\n\n  function updateFilter(newMatcher: Matcher, newFilterValue: string) {\n    setFilterValue(newFilterValue);\n    setMatcher(newMatcher);\n\n    const filter: PropertyStringFilter = {\n      propertyId: context.propertyInfo.name,\n      filterValue: newFilterValue,\n      matcher: newMatcher,\n      '@type': 'propertyString',\n    };\n    context.setColumnFilter(filter, context.filterKey);\n  }\n\n  return { matcher, filterValue, updateFilter };\n}\n\n// Workaround for https://github.com/vaadin/react-components/issues/148\nfunction useSelectInitWorkaround(selectRef: RefObject<SelectElement | null>) {\n  useEffect(() => {\n    setTimeout(() => {\n      if (selectRef.current) {\n        selectRef.current.requestContentUpdate();\n      }\n    }, 1);\n  }, []);\n}\n\n// extracted component (and type) to avoid code duplication\ntype ComparationSelectionProps = Readonly<{\n  value: Matcher;\n  onMatcherChanged(matcher: Matcher): void;\n  isDateTimeType?: boolean;\n}>;\n\nfunction ComparationSelection({ onMatcherChanged, value, isDateTimeType }: ComparationSelectionProps): ReactElement {\n  const select = useRef<SelectElement>(null);\n\n  useSelectInitWorkaround(select);\n\n  return (\n    <Select\n      theme=\"small\"\n      className=\"auto-grid-comparation-selection\"\n      ref={select}\n      value={value}\n      onValueChanged={({ detail }) => {\n        onMatcherChanged(detail.value as Matcher);\n      }}\n      renderer={() => (\n        <ListBox>\n          <Item value={Matcher.GREATER_THAN} {...{ label: '>' }}>\n            {isDateTimeType ? '> After' : '> Greater than'}\n          </Item>\n          <Item value={Matcher.LESS_THAN} {...{ label: '<' }}>\n            {isDateTimeType ? '< Before' : '< Less than'}\n          </Item>\n          <Item value={Matcher.EQUALS} {...{ label: '=' }}>\n            = Equals\n          </Item>\n        </ListBox>\n      )}\n    ></Select>\n  );\n}\n\nexport function StringHeaderFilter(): ReactElement {\n  const context = useContext(ColumnContext)!;\n  const { filterPlaceholder, filterDebounceTime, filterMinLength } = context.customColumnOptions ?? {};\n  const { updateFilter } = useFilterState(Matcher.CONTAINS);\n  const [inputValue, setInputValue] = useState('');\n\n  useEffect(() => {\n    if (filterMinLength && inputValue && inputValue.length < filterMinLength) {\n      updateFilter(Matcher.CONTAINS, '');\n      return () => {};\n    }\n\n    const delayInputTimeoutId = setTimeout(() => {\n      updateFilter(Matcher.CONTAINS, inputValue);\n    }, filterDebounceTime ?? 200);\n    return () => clearTimeout(delayInputTimeoutId);\n  }, [inputValue]);\n\n  return (\n    <div className=\"auto-grid-string-filter\">\n      <TextField\n        theme=\"small\"\n        placeholder={filterPlaceholder ?? 'Filter...'}\n        onInput={(e: any) => {\n          const fieldValue = ((e as InputEvent).target as TextFieldElement).value;\n          setInputValue(fieldValue);\n        }}\n      ></TextField>\n    </div>\n  );\n}\n\nexport function NumberHeaderFilter(): ReactElement {\n  const context = useContext(ColumnContext)!;\n  const { filterPlaceholder, filterDebounceTime } = context.customColumnOptions ?? {};\n  const [inputValue, setInputValue] = useState('');\n  const { matcher, filterValue, updateFilter } = useFilterState(Matcher.GREATER_THAN);\n  const select = useRef<SelectElement>(null);\n\n  useSelectInitWorkaround(select);\n\n  useEffect(() => {\n    const delayInputTimeoutId = setTimeout(() => {\n      updateFilter(matcher, inputValue);\n    }, filterDebounceTime ?? 200);\n    return () => clearTimeout(delayInputTimeoutId);\n  }, [inputValue]);\n\n  return (\n    <div className=\"auto-grid-number-filter\">\n      <ComparationSelection value={matcher} onMatcherChanged={(m) => updateFilter(m, filterValue)} />\n      <NumberField\n        theme=\"small\"\n        placeholder={filterPlaceholder ?? 'Filter...'}\n        onInput={(e) => {\n          const fieldValue = ((e as InputEvent).target as TextFieldElement).value;\n          setInputValue(fieldValue);\n        }}\n      />\n    </div>\n  );\n}\n\nexport function EnumHeaderFilter(): ReactElement {\n  const { filterValue, updateFilter } = useFilterState(Matcher.EQUALS);\n  const context = useContext(ColumnContext)!;\n  const model = context.propertyInfo.model as EnumModel;\n  const options = [\n    {\n      value: '',\n      label: '',\n    },\n    ...Object.keys(model[_enum]).map((value) => ({\n      label: convertToTitleCase(value),\n      value,\n    })),\n  ];\n  return (\n    <div className=\"auto-grid-enum-filter\">\n      <Select\n        theme=\"small\"\n        items={options}\n        value={filterValue}\n        onValueChanged={(e) => {\n          const newFilterValue = e.detail.value;\n          updateFilter(Matcher.EQUALS, newFilterValue);\n        }}\n      />\n    </div>\n  );\n}\n\nexport function BooleanHeaderFilter(): ReactElement {\n  const { filterValue, updateFilter } = useFilterState(Matcher.EQUALS);\n  const select = useRef<SelectElement>(null);\n\n  useSelectInitWorkaround(select);\n\n  return (\n    <div className=\"auto-grid-boolean-filter\">\n      <Select\n        theme=\"small\"\n        ref={select}\n        onValueChanged={(e) => {\n          const newFilterValue = e.detail.value;\n          updateFilter(Matcher.EQUALS, newFilterValue);\n        }}\n        renderer={() => (\n          <ListBox>\n            <Item value={''} {...{ label: '' }}></Item>\n            <Item value={'True'} {...{ label: 'Yes' }}>\n              Yes\n            </Item>\n            <Item value={'False'} {...{ label: 'No' }}>\n              No\n            </Item>\n          </ListBox>\n        )}\n        value={filterValue}\n      ></Select>\n    </div>\n  );\n}\n\nexport function DateHeaderFilter(): ReactElement {\n  const context = useContext(ColumnContext)!;\n  const i18n = useDatePickerI18n();\n  const { matcher, filterValue, updateFilter } = useFilterState(Matcher.GREATER_THAN);\n  const [invalid, setInvalid] = useState(false);\n\n  return (\n    <div className=\"auto-grid-date-filter\">\n      <ComparationSelection\n        value={matcher}\n        onMatcherChanged={(m) => updateFilter(m, filterValue)}\n        isDateTimeType={true}\n      />\n      <DatePicker\n        theme=\"small\"\n        value={filterValue}\n        placeholder={context.customColumnOptions?.filterPlaceholder ?? 'Filter...'}\n        i18n={i18n}\n        onInvalidChanged={({ detail: { value } }) => {\n          setInvalid(value);\n        }}\n        onValueChanged={({ detail: { value } }) => {\n          if (!(invalid || value === filterValue)) {\n            updateFilter(matcher, value);\n          }\n        }}\n      />\n    </div>\n  );\n}\n\nexport function TimeHeaderFilter(): ReactElement {\n  const context = useContext(ColumnContext)!;\n  const { matcher, filterValue, updateFilter } = useFilterState(Matcher.GREATER_THAN);\n  const [invalid, setInvalid] = useState(false);\n\n  return (\n    <div className=\"auto-grid-time-filter\">\n      <ComparationSelection\n        value={matcher}\n        onMatcherChanged={(m) => updateFilter(m, filterValue)}\n        isDateTimeType={true}\n      />\n      <TimePicker\n        theme=\"small\"\n        value={filterValue}\n        placeholder={context.customColumnOptions?.filterPlaceholder ?? 'Filter...'}\n        onInvalidChanged={({ detail: { value } }) => {\n          setInvalid(value);\n        }}\n        onValueChanged={({ detail: { value } }) => {\n          if (!(invalid || value === filterValue)) {\n            updateFilter(matcher, value);\n          }\n        }}\n      />\n    </div>\n  );\n}\n\nexport function NoHeaderFilter(): ReactElement {\n  return <></>;\n}\n\nexport function HeaderFilterWrapper({ original }: HeaderRendererProps): JSX.Element | null {\n  const context = useContext(ColumnContext);\n  const customContext = useContext(CustomColumnContext);\n  const { setColumnFilter, headerFilterRenderer: HeaderFilterRenderer, filterKey } = (context ?? customContext)!;\n\n  function setFilter(filter: FilterUnion) {\n    setColumnFilter(filter, filterKey);\n  }\n\n  return <HeaderFilterRenderer original={original} setFilter={setFilter} />;\n}\n"],
-  "mappings": "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",
-  "names": []
-}
+{"version":3,"file":"header-filter.js","sourceRoot":"","sources":["src/header-filter.tsx"],"names":[],"mappings":"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","sourcesContent":["import { _enum, type EnumModel } from '@vaadin/hilla-lit-form';\nimport { DatePicker } from '@vaadin/react-components/DatePicker.js';\nimport type { GridColumnProps } from '@vaadin/react-components/GridColumn.js';\nimport { Item } from '@vaadin/react-components/Item.js';\nimport { ListBox } from '@vaadin/react-components/ListBox.js';\nimport { NumberField } from '@vaadin/react-components/NumberField.js';\nimport { Select, type SelectElement } from '@vaadin/react-components/Select.js';\nimport { TextField, type TextFieldElement } from '@vaadin/react-components/TextField.js';\nimport { TimePicker } from '@vaadin/react-components/TimePicker.js';\nimport {\n  type ComponentType,\n  type JSX,\n  type ReactElement,\n  type RefObject,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { ColumnContext, CustomColumnContext } from './autogrid-column-context.js';\nimport { useDatePickerI18n } from './locale.js';\nimport type FilterUnion from './types/com/vaadin/hilla/crud/filter/FilterUnion.js';\nimport Matcher from './types/com/vaadin/hilla/crud/filter/PropertyStringFilter/Matcher.js';\nimport type PropertyStringFilter from './types/com/vaadin/hilla/crud/filter/PropertyStringFilter.js';\nimport { convertToTitleCase } from './util';\n\ntype ExtractComponentTypeProps<T extends ComponentType<any>> = T extends ComponentType<infer U> ? U : never;\n\nexport type HeaderRendererProps = ExtractComponentTypeProps<\n  NonNullable<Required<GridColumnProps<unknown>>['headerRenderer']>\n>;\n\nexport type HeaderFilterRendererProps = HeaderRendererProps & {\n  /**\n   * Allows to set custom filters for the column.\n   * This is used by the header filter components.\n   * @param filter - The filter to set in the filter list.\n   */\n  setFilter(filter: FilterUnion): void;\n};\n\nexport type HeaderFilterProps = Readonly<{\n  /**\n   * If true, the column can be sorted. This is useful to disable sorting for\n   * properties that are not sortable in the backend, or that require excessive processing.\n   */\n  sortable?: boolean;\n  /**\n   * If true, the column can be filtered. This is useful to disable filtering for\n   * properties that are not sortable in the backend, or that require excessive processing.\n   */\n  filterable?: boolean;\n  /**\n   * Placeholder text for the filter input.\n   * Only applies to string, number and date/time value filters.\n   */\n  filterPlaceholder?: string;\n  /**\n   * Debounce time for the filter input in milliseconds.\n   * Only applies to string value filters and number value filters.\n   */\n  filterDebounceTime?: number;\n  /**\n   * Minimum length for the filter input.\n   * Only applies to string value filters.\n   */\n  filterMinLength?: number;\n\n  /**\n   * Custom renderer for the filter in the header.\n   */\n  headerFilterRenderer?: ComponentType<HeaderFilterRendererProps>;\n}>;\n\nfunction useFilterState(initialMatcher: Matcher) {\n  const context = useContext(ColumnContext)!;\n  const [matcher, setMatcher] = useState(initialMatcher);\n  const [filterValue, setFilterValue] = useState('');\n\n  function updateFilter(newMatcher: Matcher, newFilterValue: string) {\n    setFilterValue(newFilterValue);\n    setMatcher(newMatcher);\n\n    const filter: PropertyStringFilter = {\n      propertyId: context.propertyInfo.name,\n      filterValue: newFilterValue,\n      matcher: newMatcher,\n      '@type': 'propertyString',\n    };\n    context.setColumnFilter(filter, context.filterKey);\n  }\n\n  return { matcher, filterValue, updateFilter };\n}\n\n// Workaround for https://github.com/vaadin/react-components/issues/148\nfunction useSelectInitWorkaround(selectRef: RefObject<SelectElement | null>) {\n  useEffect(() => {\n    setTimeout(() => {\n      if (selectRef.current) {\n        selectRef.current.requestContentUpdate();\n      }\n    }, 1);\n  }, []);\n}\n\n// extracted component (and type) to avoid code duplication\ntype ComparationSelectionProps = Readonly<{\n  value: Matcher;\n  onMatcherChanged(matcher: Matcher): void;\n  isDateTimeType?: boolean;\n}>;\n\nfunction ComparationSelection({ onMatcherChanged, value, isDateTimeType }: ComparationSelectionProps): ReactElement {\n  const select = useRef<SelectElement>(null);\n\n  useSelectInitWorkaround(select);\n\n  return (\n    <Select\n      theme=\"small\"\n      className=\"auto-grid-comparation-selection\"\n      ref={select}\n      value={value}\n      onValueChanged={({ detail }) => {\n        onMatcherChanged(detail.value as Matcher);\n      }}\n      renderer={() => (\n        <ListBox>\n          <Item value={Matcher.GREATER_THAN} {...{ label: '>' }}>\n            {isDateTimeType ? '> After' : '> Greater than'}\n          </Item>\n          <Item value={Matcher.LESS_THAN} {...{ label: '<' }}>\n            {isDateTimeType ? '< Before' : '< Less than'}\n          </Item>\n          <Item value={Matcher.EQUALS} {...{ label: '=' }}>\n            = Equals\n          </Item>\n        </ListBox>\n      )}\n    ></Select>\n  );\n}\n\nexport function StringHeaderFilter(): ReactElement {\n  const context = useContext(ColumnContext)!;\n  const { filterPlaceholder, filterDebounceTime, filterMinLength } = context.customColumnOptions ?? {};\n  const { updateFilter } = useFilterState(Matcher.CONTAINS);\n  const [inputValue, setInputValue] = useState('');\n\n  useEffect(() => {\n    if (filterMinLength && inputValue && inputValue.length < filterMinLength) {\n      updateFilter(Matcher.CONTAINS, '');\n      return () => {};\n    }\n\n    const delayInputTimeoutId = setTimeout(() => {\n      updateFilter(Matcher.CONTAINS, inputValue);\n    }, filterDebounceTime ?? 200);\n    return () => clearTimeout(delayInputTimeoutId);\n  }, [inputValue]);\n\n  return (\n    <div className=\"auto-grid-string-filter\">\n      <TextField\n        theme=\"small\"\n        placeholder={filterPlaceholder ?? 'Filter...'}\n        onInput={(e: any) => {\n          const fieldValue = ((e as InputEvent).target as TextFieldElement).value;\n          setInputValue(fieldValue);\n        }}\n      ></TextField>\n    </div>\n  );\n}\n\nexport function NumberHeaderFilter(): ReactElement {\n  const context = useContext(ColumnContext)!;\n  const { filterPlaceholder, filterDebounceTime } = context.customColumnOptions ?? {};\n  const [inputValue, setInputValue] = useState('');\n  const { matcher, filterValue, updateFilter } = useFilterState(Matcher.GREATER_THAN);\n  const select = useRef<SelectElement>(null);\n\n  useSelectInitWorkaround(select);\n\n  useEffect(() => {\n    const delayInputTimeoutId = setTimeout(() => {\n      updateFilter(matcher, inputValue);\n    }, filterDebounceTime ?? 200);\n    return () => clearTimeout(delayInputTimeoutId);\n  }, [inputValue]);\n\n  return (\n    <div className=\"auto-grid-number-filter\">\n      <ComparationSelection value={matcher} onMatcherChanged={(m) => updateFilter(m, filterValue)} />\n      <NumberField\n        theme=\"small\"\n        placeholder={filterPlaceholder ?? 'Filter...'}\n        onInput={(e) => {\n          const fieldValue = ((e as InputEvent).target as TextFieldElement).value;\n          setInputValue(fieldValue);\n        }}\n      />\n    </div>\n  );\n}\n\nexport function EnumHeaderFilter(): ReactElement {\n  const { filterValue, updateFilter } = useFilterState(Matcher.EQUALS);\n  const context = useContext(ColumnContext)!;\n  const model = context.propertyInfo.model as EnumModel;\n  const options = [\n    {\n      value: '',\n      label: '',\n    },\n    ...Object.keys(model[_enum]).map((value) => ({\n      label: convertToTitleCase(value),\n      value,\n    })),\n  ];\n  return (\n    <div className=\"auto-grid-enum-filter\">\n      <Select\n        theme=\"small\"\n        items={options}\n        value={filterValue}\n        onValueChanged={(e) => {\n          const newFilterValue = e.detail.value;\n          updateFilter(Matcher.EQUALS, newFilterValue);\n        }}\n      />\n    </div>\n  );\n}\n\nexport function BooleanHeaderFilter(): ReactElement {\n  const { filterValue, updateFilter } = useFilterState(Matcher.EQUALS);\n  const select = useRef<SelectElement>(null);\n\n  useSelectInitWorkaround(select);\n\n  return (\n    <div className=\"auto-grid-boolean-filter\">\n      <Select\n        theme=\"small\"\n        ref={select}\n        onValueChanged={(e) => {\n          const newFilterValue = e.detail.value;\n          updateFilter(Matcher.EQUALS, newFilterValue);\n        }}\n        renderer={() => (\n          <ListBox>\n            <Item value={''} {...{ label: '' }}></Item>\n            <Item value={'True'} {...{ label: 'Yes' }}>\n              Yes\n            </Item>\n            <Item value={'False'} {...{ label: 'No' }}>\n              No\n            </Item>\n          </ListBox>\n        )}\n        value={filterValue}\n      ></Select>\n    </div>\n  );\n}\n\nexport function DateHeaderFilter(): ReactElement {\n  const context = useContext(ColumnContext)!;\n  const i18n = useDatePickerI18n();\n  const { matcher, filterValue, updateFilter } = useFilterState(Matcher.GREATER_THAN);\n  const [invalid, setInvalid] = useState(false);\n\n  return (\n    <div className=\"auto-grid-date-filter\">\n      <ComparationSelection\n        value={matcher}\n        onMatcherChanged={(m) => updateFilter(m, filterValue)}\n        isDateTimeType={true}\n      />\n      <DatePicker\n        theme=\"small\"\n        value={filterValue}\n        placeholder={context.customColumnOptions?.filterPlaceholder ?? 'Filter...'}\n        i18n={i18n}\n        onInvalidChanged={({ detail: { value } }) => {\n          setInvalid(value);\n        }}\n        onValueChanged={({ detail: { value } }) => {\n          if (!(invalid || value === filterValue)) {\n            updateFilter(matcher, value);\n          }\n        }}\n      />\n    </div>\n  );\n}\n\nexport function TimeHeaderFilter(): ReactElement {\n  const context = useContext(ColumnContext)!;\n  const { matcher, filterValue, updateFilter } = useFilterState(Matcher.GREATER_THAN);\n  const [invalid, setInvalid] = useState(false);\n\n  return (\n    <div className=\"auto-grid-time-filter\">\n      <ComparationSelection\n        value={matcher}\n        onMatcherChanged={(m) => updateFilter(m, filterValue)}\n        isDateTimeType={true}\n      />\n      <TimePicker\n        theme=\"small\"\n        value={filterValue}\n        placeholder={context.customColumnOptions?.filterPlaceholder ?? 'Filter...'}\n        onInvalidChanged={({ detail: { value } }) => {\n          setInvalid(value);\n        }}\n        onValueChanged={({ detail: { value } }) => {\n          if (!(invalid || value === filterValue)) {\n            updateFilter(matcher, value);\n          }\n        }}\n      />\n    </div>\n  );\n}\n\nexport function NoHeaderFilter(): ReactElement {\n  return <></>;\n}\n\nexport function HeaderFilterWrapper({ original }: HeaderRendererProps): JSX.Element | null {\n  const context = useContext(ColumnContext);\n  const customContext = useContext(CustomColumnContext);\n  const { setColumnFilter, headerFilterRenderer: HeaderFilterRenderer, filterKey } = (context ?? customContext)!;\n\n  function setFilter(filter: FilterUnion) {\n    setColumnFilter(filter, filterKey);\n  }\n\n  return <HeaderFilterRenderer original={original} setFilter={setFilter} />;\n}\n"]}

package/header-sorter.d.ts

@@ -1,3 +1,2 @@
 import { type ReactElement } from 'react';
 export declare function HeaderSorter(): ReactElement;
-//# sourceMappingURL=header-sorter.d.ts.map

package/header-sorter.js

@@ -1,28 +1,17 @@
-import { Fragment, jsx } from "react/jsx-runtime";
-import { GridSorter } from "@vaadin/react-components/GridSorter.js";
-import { useContext } from "react";
-import { ColumnContext } from "./autogrid-column-context.js";
-function HeaderSorter() {
-  const context = useContext(ColumnContext);
-  const sorterState = context.sortState[context.propertyInfo.name];
-  const direction = sorterState?.direction ?? null;
-  const headerLabel = context.customColumnOptions?.header ?? context.propertyInfo.humanReadableName;
-  return context.customColumnOptions?.sortable === false ? /* @__PURE__ */ jsx(Fragment, { children: headerLabel }) : /* @__PURE__ */ jsx(
-    GridSorter,
-    {
-      path: context.propertyInfo.name,
-      direction,
-      onDirectionChanged: (e) => {
-        context.setSortState((prevState) => {
-          const newSorterState = e.detail.value ? { direction: e.detail.value } : void 0;
-          return { ...prevState, [context.propertyInfo.name]: newSorterState };
-        });
-      },
-      children: headerLabel
-    }
-  );
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { GridSorter } from '@vaadin/react-components/GridSorter.js';
+import { useContext } from 'react';
+import { ColumnContext } from './autogrid-column-context.js';
+export function HeaderSorter() {
+    const context = useContext(ColumnContext);
+    const sorterState = context.sortState[context.propertyInfo.name];
+    const direction = sorterState?.direction ?? null;
+    const headerLabel = context.customColumnOptions?.header ?? context.propertyInfo.humanReadableName;
+    return context.customColumnOptions?.sortable === false ? (_jsx(_Fragment, { children: headerLabel })) : (_jsx(GridSorter, { path: context.propertyInfo.name, direction: direction, onDirectionChanged: (e) => {
+            context.setSortState((prevState) => {
+                const newSorterState = e.detail.value ? { direction: e.detail.value } : undefined;
+                return { ...prevState, [context.propertyInfo.name]: newSorterState };
+            });
+        }, children: headerLabel }));
 }
-export {
-  HeaderSorter
-};
-//# sourceMappingURL=header-sorter.js.map
+//# sourceMappingURL=header-sorter.js.map

package/header-sorter.js.map

@@ -1,7 +1 @@
-{
-  "version": 3,
-  "sources": ["src/header-sorter.tsx"],
-  "sourcesContent": ["import { GridSorter } from '@vaadin/react-components/GridSorter.js';\nimport { useContext, type ReactElement } from 'react';\nimport { ColumnContext } from './autogrid-column-context.js';\n\nexport function HeaderSorter(): ReactElement {\n  const context = useContext(ColumnContext)!;\n  const sorterState = context.sortState[context.propertyInfo.name];\n  const direction = sorterState?.direction ?? null;\n  const headerLabel = context.customColumnOptions?.header ?? context.propertyInfo.humanReadableName;\n\n  return context.customColumnOptions?.sortable === false ? (\n    <>{headerLabel}</>\n  ) : (\n    <GridSorter\n      path={context.propertyInfo.name}\n      direction={direction}\n      onDirectionChanged={(e) => {\n        context.setSortState((prevState) => {\n          const newSorterState = e.detail.value ? { direction: e.detail.value } : undefined;\n          return { ...prevState, [context.propertyInfo.name]: newSorterState };\n        });\n      }}\n    >\n      {headerLabel}\n    </GridSorter>\n  );\n}\n"],
-  "mappings": "AAWI;AAXJ,SAAS,kBAAkB;AAC3B,SAAS,kBAAqC;AAC9C,SAAS,qBAAqB;AAEvB,SAAS,eAA6B;AAC3C,QAAM,UAAU,WAAW,aAAa;AACxC,QAAM,cAAc,QAAQ,UAAU,QAAQ,aAAa,IAAI;AAC/D,QAAM,YAAY,aAAa,aAAa;AAC5C,QAAM,cAAc,QAAQ,qBAAqB,UAAU,QAAQ,aAAa;AAEhF,SAAO,QAAQ,qBAAqB,aAAa,QAC/C,gCAAG,uBAAY,IAEf;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,QAAQ,aAAa;AAAA,MAC3B;AAAA,MACA,oBAAoB,CAAC,MAAM;AACzB,gBAAQ,aAAa,CAAC,cAAc;AAClC,gBAAM,iBAAiB,EAAE,OAAO,QAAQ,EAAE,WAAW,EAAE,OAAO,MAAM,IAAI;AACxE,iBAAO,EAAE,GAAG,WAAW,CAAC,QAAQ,aAAa,IAAI,GAAG,eAAe;AAAA,QACrE,CAAC;AAAA,MACH;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;",
-  "names": []
-}
+{"version":3,"file":"header-sorter.js","sourceRoot":"","sources":["src/header-sorter.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,wCAAwC,CAAC;AACpE,OAAO,EAAE,UAAU,EAAqB,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAE7D,MAAM,UAAU,YAAY;IAC1B,MAAM,OAAO,GAAG,UAAU,CAAC,aAAa,CAAE,CAAC;IAC3C,MAAM,WAAW,GAAG,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;IACjE,MAAM,SAAS,GAAG,WAAW,EAAE,SAAS,IAAI,IAAI,CAAC;IACjD,MAAM,WAAW,GAAG,OAAO,CAAC,mBAAmB,EAAE,MAAM,IAAI,OAAO,CAAC,YAAY,CAAC,iBAAiB,CAAC;IAElG,OAAO,OAAO,CAAC,mBAAmB,EAAE,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,CACvD,4BAAG,WAAW,GAAI,CACnB,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,IACT,IAAI,EAAE,OAAO,CAAC,YAAY,CAAC,IAAI,EAC/B,SAAS,EAAE,SAAS,EACpB,kBAAkB,EAAE,CAAC,CAAC,EAAE,EAAE;YACxB,OAAO,CAAC,YAAY,CAAC,CAAC,SAAS,EAAE,EAAE;gBACjC,MAAM,cAAc,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;gBAClF,OAAO,EAAE,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,cAAc,EAAE,CAAC;YACvE,CAAC,CAAC,CAAC;QACL,CAAC,YAEA,WAAW,GACD,CACd,CAAC;AACJ,CAAC","sourcesContent":["import { GridSorter } from '@vaadin/react-components/GridSorter.js';\nimport { useContext, type ReactElement } from 'react';\nimport { ColumnContext } from './autogrid-column-context.js';\n\nexport function HeaderSorter(): ReactElement {\n  const context = useContext(ColumnContext)!;\n  const sorterState = context.sortState[context.propertyInfo.name];\n  const direction = sorterState?.direction ?? null;\n  const headerLabel = context.customColumnOptions?.header ?? context.propertyInfo.humanReadableName;\n\n  return context.customColumnOptions?.sortable === false ? (\n    <>{headerLabel}</>\n  ) : (\n    <GridSorter\n      path={context.propertyInfo.name}\n      direction={direction}\n      onDirectionChanged={(e) => {\n        context.setSortState((prevState) => {\n          const newSorterState = e.detail.value ? { direction: e.detail.value } : undefined;\n          return { ...prevState, [context.propertyInfo.name]: newSorterState };\n        });\n      }}\n    >\n      {headerLabel}\n    </GridSorter>\n  );\n}\n"]}

package/i18n.d.ts

@@ -1,2 +1 @@
 export declare const defaultLocale: string | undefined;
-//# sourceMappingURL=i18n.d.ts.map

package/i18n.js

@@ -1,5 +1,2 @@
-const defaultLocale = void 0;
-export {
-  defaultLocale
-};
-//# sourceMappingURL=i18n.js.map
+export const defaultLocale = undefined;
+//# sourceMappingURL=i18n.js.map

package/i18n.js.map

@@ -1,7 +1 @@
-{
-  "version": 3,
-  "sources": ["src/i18n.ts"],
-  "sourcesContent": ["// The default locale to use for renderers, filter inputs, etc.\n// If undefined, the browser's locale will be used.\n// Allows to modify the locale for testing purposes.\nexport const defaultLocale: string | undefined = undefined;\n"],
-  "mappings": "AAGO,MAAM,gBAAoC;",
-  "names": []
-}
+{"version":3,"file":"i18n.js","sourceRoot":"","sources":["src/i18n.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,aAAa,GAAuB,SAAS,CAAC","sourcesContent":["// The default locale to use for renderers, filter inputs, etc.\n// If undefined, the browser's locale will be used.\n// Allows to modify the locale for testing purposes.\nexport const defaultLocale: string | undefined = undefined;\n"]}

package/index.d.ts

@@ -2,5 +2,4 @@ export * from './autogrid-feature.js';
 export type * from './crud.js';
 export * from './autoform-feature.js';
 export * from './autocrud-feature.js';
-export { useDataProvider } from './data-provider.js';
-//# sourceMappingURL=index.d.ts.map
+export { useDataProvider, useGridDataProvider, useComboBoxDataProvider } from './data-provider.js';

package/index.js

@@ -1,16 +1,12 @@
-function __REGISTER__(feature, vaadinObj = window.Vaadin ??= {}) {
-  vaadinObj.registrations ??= [];
-  vaadinObj.registrations.push({
-    is: feature ? `${"@vaadin/hilla-react-crud"}/${feature}` : "@vaadin/hilla-react-crud",
-    version: "24.7.0-alpha9"
-  });
-}
-export * from "./autogrid-feature.js";
-export * from "./autoform-feature.js";
-export * from "./autocrud-feature.js";
-import { useDataProvider } from "./data-provider.js";
-__REGISTER__();
-export {
-  useDataProvider
-};
-//# sourceMappingURL=index.js.map
+export * from './autogrid-feature.js';
+export * from './autoform-feature.js';
+export * from './autocrud-feature.js';
+export { useDataProvider, useGridDataProvider, useComboBoxDataProvider } from './data-provider.js';
+((feature, vaadinObj = (window.Vaadin ??= {})) => {
+    vaadinObj.registrations ??= [];
+    vaadinObj.registrations.push({
+        is: feature ? `@vaadin/hilla-react-crud/${feature}` : '@vaadin/hilla-react-crud',
+        version: '24.8.0-alpha1',
+    });
+})();
+//# sourceMappingURL=index.js.map