@vaadin/hilla-react-crud 24.4.0-alpha1

package/data-provider.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["src/data-provider.ts"],
+  "sourcesContent": ["import type {\n  GridDataProviderCallback,\n  GridDataProviderParams,\n  GridDefaultItem,\n  GridElement,\n} from '@vaadin/react-components/Grid';\nimport type { CountService, ListService } from './crud';\nimport type FilterUnion from './types/com/vaadin/hilla/crud/filter/FilterUnion';\nimport type Sort from './types/com/vaadin/hilla/mappedtypes/Sort';\nimport Direction from './types/org/springframework/data/domain/Sort/Direction';\n\ntype GridElementWithInternalAPI<TItem = GridDefaultItem> = GridElement<TItem> &\n  Readonly<{\n    _dataProviderController: {\n      rootCache: {\n        size?: number;\n      };\n    };\n  }>;\n\ntype MaybeCountService<TItem> = Partial<CountService<TItem>>;\ntype ListAndMaybeCountService<TItem> = ListService<TItem> & MaybeCountService<TItem>;\ntype ListAndCountService<TItem> = CountService<TItem> & ListService<TItem>;\n\ntype PageRequest = {\n  pageNumber: number;\n  pageSize: number;\n  sort: Sort;\n};\n\ntype DataPage<TItem> = {\n  items: TItem[];\n  pageRequest: PageRequest;\n};\n\nexport type ItemCounts = {\n  totalCount?: number;\n  filteredCount?: number;\n};\n\ntype AfterLoadCallback = (result: ItemCounts) => void;\n\ntype DataProviderOptions = {\n  initialFilter?: FilterUnion;\n  loadTotalCount?: boolean;\n  afterLoad?: AfterLoadCallback;\n};\n\nfunction createSort<TItem>(params: GridDataProviderParams<TItem>): Sort {\n  return {\n    orders: params.sortOrders\n      .filter((order) => order.direction != null)\n      .map((order) => ({\n        property: order.path,\n        direction: order.direction === 'asc' ? Direction.ASC : Direction.DESC,\n        ignoreCase: false,\n      })),\n  };\n}\n\nexport function isCountService<TItem>(service: ListAndMaybeCountService<TItem>): service is ListAndCountService<TItem> {\n  return !!service.count;\n}\n\nexport abstract class DataProvider<TItem> {\n  protected readonly grid: GridElement;\n  protected readonly service: ListAndMaybeCountService<TItem>;\n  protected readonly loadTotalCount?: boolean;\n  protected readonly afterLoadCallback?: AfterLoadCallback;\n\n  protected filter: FilterUnion | undefined;\n  protected totalCount: number | undefined;\n  protected filteredCount: number | undefined;\n\n  constructor(grid: GridElement, service: ListAndMaybeCountService<TItem>, options: DataProviderOptions = {}) {\n    this.grid = grid;\n    this.service = service;\n    this.filter = options.initialFilter;\n    this.loadTotalCount = options.loadTotalCount;\n    this.afterLoadCallback = options.afterLoad;\n\n    // eslint-disable-next-line @typescript-eslint/no-misused-promises\n    this.grid.dataProvider = this.load.bind(this);\n  }\n\n  refresh(): void {\n    this.totalCount = undefined;\n    this.filteredCount = undefined;\n    this.grid.clearCache();\n  }\n\n  setFilter(filter: FilterUnion | undefined): void {\n    this.filter = filter;\n    this.refresh();\n  }\n\n  protected async load(\n    params: GridDataProviderParams<TItem>,\n    callback: GridDataProviderCallback<TItem>,\n  ): Promise<void> {\n    // Fetch page and filtered count\n    const page = await this.fetchPage(params);\n    this.filteredCount = await this.fetchFilteredCount(page);\n    // Only fetch total count if it's specific in options\n    if (this.loadTotalCount) {\n      this.totalCount = await this.fetchTotalCount(page);\n    }\n\n    // Pass results to grid\n    callback(page.items, this.filteredCount);\n\n    // Pass results to callback\n    if (this.afterLoadCallback) {\n      this.afterLoadCallback({\n        totalCount: this.totalCount,\n        filteredCount: this.filteredCount,\n      });\n    }\n  }\n\n  protected async fetchPage(params: GridDataProviderParams<TItem>): Promise<DataPage<TItem>> {\n    const sort = createSort(params);\n    const pageNumber = params.page;\n    const { pageSize } = params;\n    const pageRequest = {\n      pageNumber,\n      pageSize,\n      sort,\n    };\n    const items = await this.service.list(pageRequest, this.filter);\n\n    return { items, pageRequest };\n  }\n\n  protected abstract fetchTotalCount(page: DataPage<TItem>): Promise<number | undefined> | number | undefined;\n\n  protected abstract fetchFilteredCount(page: DataPage<TItem>): Promise<number | undefined> | number | undefined;\n}\n\nexport class InfiniteDataProvider<TItem> extends DataProvider<TItem> {\n  // cannot be static, otherwise it does not implement superclass\n  // eslint-disable-next-line @typescript-eslint/class-methods-use-this\n  protected fetchTotalCount(): undefined {\n    return undefined;\n  }\n\n  protected fetchFilteredCount(page: DataPage<TItem>): number | undefined {\n    const { items, pageRequest } = page;\n    const { pageNumber, pageSize } = pageRequest;\n    let infiniteScrollingSize;\n\n    if (items.length === pageSize) {\n      infiniteScrollingSize = (pageNumber + 1) * pageSize + 1;\n      const cacheSize = (this.grid as GridElementWithInternalAPI<TItem>)._dataProviderController.rootCache.size;\n      if (cacheSize !== undefined && infiniteScrollingSize < cacheSize) {\n        // Only allow size to grow here to avoid shrinking the size when scrolled down and sorting\n        infiniteScrollingSize = undefined;\n      }\n    } else {\n      infiniteScrollingSize = pageNumber * pageSize + items.length;\n    }\n\n    return infiniteScrollingSize;\n  }\n}\n\nexport class FixedSizeDataProvider<TItem> extends DataProvider<TItem> {\n  declare service: ListAndCountService<TItem>;\n\n  constructor(grid: GridElement, service: ListAndMaybeCountService<TItem>, options: DataProviderOptions = {}) {\n    if (!isCountService(service)) {\n      throw new Error('The provided service does not implement the CountService interface.');\n    }\n    super(grid, service, options);\n  }\n\n  protected async fetchTotalCount(): Promise<number | undefined> {\n    // Use cached count if it's already known\n    if (this.totalCount !== undefined) {\n      return this.totalCount;\n    }\n    return this.service.count(undefined);\n  }\n\n  protected async fetchFilteredCount(): Promise<number | undefined> {\n    // Use cached count if it's already known\n    if (this.filteredCount !== undefined) {\n      return this.filteredCount;\n    }\n    return this.service.count(this.filter);\n  }\n}\n\nexport function createDataProvider<TItem>(\n  grid: GridElement,\n  service: ListAndMaybeCountService<TItem>,\n  options: DataProviderOptions = {},\n): DataProvider<TItem> {\n  if (isCountService(service)) {\n    return new FixedSizeDataProvider(grid, service, options);\n  }\n  return new InfiniteDataProvider(grid, service, options);\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/header-filter.d.ts

@@ -0,0 +1,54 @@
+import type { GridColumnProps } from '@vaadin/react-components/GridColumn.js';
+import { type ComponentType, type JSX, type ReactElement } from 'react';
+import type FilterUnion from './types/com/vaadin/hilla/crud/filter/FilterUnion';
+type ExtractComponentTypeProps<T extends ComponentType<any>> = T extends ComponentType<infer U> ? U : never;
+export type HeaderRendererProps = ExtractComponentTypeProps<NonNullable<Required<GridColumnProps<unknown>>['headerRenderer']>>;
+export type HeaderFilterRendererProps = HeaderRendererProps & {
+    /**
+     * Allows to set custom filters for the column.
+     * This is used by the header filter components.
+     * @param filter - The filter to set in the filter list.
+     */
+    setFilter(filter: FilterUnion): void;
+};
+export type HeaderFilterProps = Readonly<{
+    /**
+     * If true, the column can be sorted. This is useful to disable sorting for
+     * properties that are not sortable in the backend, or that require excessive processing.
+     */
+    sortable?: boolean;
+    /**
+     * If true, the column can be filtered. This is useful to disable filtering for
+     * properties that are not sortable in the backend, or that require excessive processing.
+     */
+    filterable?: boolean;
+    /**
+     * Placeholder text for the filter input.
+     * Only applies to string, number and date/time value filters.
+     */
+    filterPlaceholder?: string;
+    /**
+     * Debounce time for the filter input in milliseconds.
+     * Only applies to string value filters and number value filters.
+     */
+    filterDebounceTime?: number;
+    /**
+     * Minimum length for the filter input.
+     * Only applies to string value filters.
+     */
+    filterMinLength?: number;
+    /**
+     * Custom renderer for the filter in the header.
+     */
+    headerFilterRenderer?: ComponentType<HeaderFilterRendererProps>;
+}>;
+export declare function StringHeaderFilter(): ReactElement;
+export declare function NumberHeaderFilter(): ReactElement;
+export declare function EnumHeaderFilter(): ReactElement;
+export declare function BooleanHeaderFilter(): ReactElement;
+export declare function DateHeaderFilter(): ReactElement;
+export declare function TimeHeaderFilter(): ReactElement;
+export declare function NoHeaderFilter(): ReactElement;
+export declare function HeaderFilterWrapper({ original }: HeaderRendererProps): JSX.Element | null;
+export {};
+//# sourceMappingURL=header-filter.d.ts.map

package/header-filter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-filter.d.ts","sourceRoot":"","sources":["src/header-filter.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AAO9E,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,GAAG,EACR,KAAK,YAAY,EAMlB,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,WAAW,MAAM,kDAAkD,CAAC;AAKhF,KAAK,yBAAyB,CAAC,CAAC,SAAS,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,aAAa,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;AAE5G,MAAM,MAAM,mBAAmB,GAAG,yBAAyB,CACzD,WAAW,CAAC,QAAQ,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAClE,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,mBAAmB,GAAG;IAC5D;;;;OAIG;IACH,SAAS,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,QAAQ,CAAC;IACvC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,oBAAoB,CAAC,EAAE,aAAa,CAAC,yBAAyB,CAAC,CAAC;CACjE,CAAC,CAAC;AAwEH,wBAAgB,kBAAkB,IAAI,YAAY,CA8BjD;AAED,wBAAgB,kBAAkB,IAAI,YAAY,CA6BjD;AAED,wBAAgB,gBAAgB,IAAI,YAAY,CA2B/C;AAED,wBAAgB,mBAAmB,IAAI,YAAY,CA8BlD;AAED,wBAAgB,gBAAgB,IAAI,YAAY,CA6B/C;AAED,wBAAgB,gBAAgB,IAAI,YAAY,CA2B/C;AAED,wBAAgB,cAAc,IAAI,YAAY,CAE7C;AAED,wBAAgB,mBAAmB,CAAC,EAAE,QAAQ,EAAE,EAAE,mBAAmB,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAUzF"}

package/header-filter.js

@@ -0,0 +1,258 @@
+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";
+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 };
+}
+function useSelectInitWorkaround(selectRef) {
+  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" })
+      ] })
+    }
+  );
+}
+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);
+        }
+      }
+    )
+  ] });
+}
+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);
+      }
+    }
+  ) });
+}
+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
+    }
+  ) });
+}
+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);
+        },
+        onValueChanged: ({ detail: { value } }) => {
+          if (!(invalid || value === filterValue)) {
+            updateFilter(matcher, value);
+          }
+        }
+      }
+    )
+  ] });
+}
+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);
+          }
+        }
+      }
+    )
+  ] });
+}
+function NoHeaderFilter() {
+  return /* @__PURE__ */ jsx(Fragment, {});
+}
+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 {
+  BooleanHeaderFilter,
+  DateHeaderFilter,
+  EnumHeaderFilter,
+  HeaderFilterWrapper,
+  NoHeaderFilter,
+  NumberHeaderFilter,
+  StringHeaderFilter,
+  TimeHeaderFilter
+};
+//# sourceMappingURL=header-filter.js.map

package/header-filter.js.map

@@ -0,0 +1,7 @@
+{
+  "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>) {\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": []
+}

package/header-sorter.d.ts

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

package/header-sorter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-sorter.d.ts","sourceRoot":"","sources":["src/header-sorter.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAGtD,wBAAgB,YAAY,IAAI,YAAY,CAsB3C"}

package/header-sorter.js

@@ -0,0 +1,28 @@
+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
+    }
+  );
+}
+export {
+  HeaderSorter
+};
+//# sourceMappingURL=header-sorter.js.map

package/header-sorter.js.map

@@ -0,0 +1,7 @@
+{
+  "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": []
+}

package/i18n.d.ts

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

package/i18n.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["src/i18n.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa,EAAE,MAAM,GAAG,SAAqB,CAAC"}

package/i18n.js

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

package/i18n.js.map

@@ -0,0 +1,7 @@
+{
+  "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": []
+}

package/index.d.ts

@@ -0,0 +1,5 @@
+export * from './autogrid-feature.js';
+export type * from './crud.js';
+export * from './autoform-feature.js';
+export * from './autocrud-feature.js';
+//# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,mBAAmB,WAAW,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC"}

package/index.js

@@ -0,0 +1,13 @@
+function __REGISTER__(feature) {
+  window.Vaadin ??= {};
+  window.Vaadin.registrations ??= [];
+  window.Vaadin.registrations.push({
+    is: feature ? `${"@vaadin/hilla-react-crud"}/${feature}` : "@vaadin/hilla-react-crud",
+    version: "24.4.0-alpha1"
+  });
+}
+export * from "./autogrid-feature.js";
+export * from "./autoform-feature.js";
+export * from "./autocrud-feature.js";
+__REGISTER__();
+//# sourceMappingURL=index.js.map

package/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../scripts/register.js", "src/index.ts"],
+  "sourcesContent": ["export function __REGISTER__(feature) {\n  window.Vaadin ??= {};\n  window.Vaadin.registrations ??= [];\n  window.Vaadin.registrations.push({\n    is: feature ? `${__NAME__}/${feature}` : __NAME__,\n    version: __VERSION__,\n  });\n}\n", "export * from './autogrid-feature.js';\nexport type * from './crud.js';\nexport * from './autoform-feature.js';\nexport * from './autocrud-feature.js';\n\n// @ts-expect-error: esbuild injection\n// eslint-disable-next-line @typescript-eslint/no-unsafe-call\n__REGISTER__();\n"],
+  "mappings": "AAAO,SAAS,aAAa,SAAS;AACpC,SAAO,WAAW,CAAC;AACnB,SAAO,OAAO,kBAAkB,CAAC;AACjC,SAAO,OAAO,cAAc,KAAK;AAAA,IAC/B,IAAI,UAAU,GAAG,0BAAQ,IAAI,OAAO,KAAK;AAAA,IACzC,SAAS;AAAA,EACX,CAAC;AACH;ACPA,cAAc;AAEd,cAAc;AACd,cAAc;AAId,aAAa;",
+  "names": []
+}

package/locale.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { type DatePickerDate, type DatePickerI18n } from '@vaadin/react-components/DatePicker.js';
+import { type DateTimePickerI18n } from '@vaadin/react-components/DateTimePicker.js';
+export declare const LocaleContext: import("react").Context<string>;
+export declare class LocaleFormatter {
+    #private;
+    constructor(locale?: string);
+    formatDate(value?: string): string;
+    formatDate(value: DatePickerDate): string;
+    formatLocalTime(value?: string): string;
+    formatLocalDateTime(value?: string): string;
+    formatInteger(value?: number): string;
+    formatDecimal(value?: number): string;
+    parse(dateString: string): DatePickerDate | undefined;
+}
+export declare function useLocaleFormatter(): LocaleFormatter;
+export declare function useDatePickerI18n(): DatePickerI18n;
+export declare function useDateTimePickerI18n(): DateTimePickerI18n;
+//# sourceMappingURL=locale.d.ts.map

package/locale.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"locale.d.ts","sourceRoot":"","sources":["src/locale.ts"],"names":[],"mappings":";AAAA,OAAO,EAAqB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,wCAAwC,CAAC;AACrH,OAAO,EAAyB,KAAK,kBAAkB,EAAE,MAAM,4CAA4C,CAAC;AAG5G,eAAO,MAAM,aAAa,iCAAoC,CAAC;AAuB/D,qBAAa,eAAe;;gBAQd,MAAM,CAAC,EAAE,MAAM;IA4B3B,UAAU,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM;IAClC,UAAU,CAAC,KAAK,EAAE,cAAc,GAAG,MAAM;IAczC,eAAe,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM;IAIvC,mBAAmB,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM;IAI3C,aAAa,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM;IAIrC,aAAa,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM;IAIrC,KAAK,CAAC,UAAU,EAAE,MAAM,GAAG,cAAc,GAAG,SAAS;CAkBtD;AAED,wBAAgB,kBAAkB,IAAI,eAAe,CAGpD;AAID,wBAAgB,iBAAiB,IAAI,cAAc,CAelD;AAID,wBAAgB,qBAAqB,IAAI,kBAAkB,CAU1D"}

package/locale.js

@@ -0,0 +1,123 @@
+import { DatePickerElement } from "@vaadin/react-components/DatePicker.js";
+import { DateTimePickerElement } from "@vaadin/react-components/DateTimePicker.js";
+import { createContext, useContext, useMemo } from "react";
+const LocaleContext = createContext(navigator.language);
+function getFormatRegex(format) {
+  const sampleDate = new Date(1234, 5 - 1, 6);
+  const formattedSample = format.format(sampleDate);
+  const pattern = formattedSample.replace("1234", "(?<year>\\d+)").replace("05", "(?<month>\\d+)").replace("5", "(?<month>\\d+)").replace("06", "(?<day>\\d+)").replace("6", "(?<day>\\d+)");
+  return new RegExp(pattern, "u");
+}
+function tryFormatDate(formatter, value) {
+  try {
+    return value ? formatter.format(new Date(value)) : "";
+  } catch (e) {
+    return "";
+  }
+}
+class LocaleFormatter {
+  #date;
+  #localTime;
+  #localDateTime;
+  #integer;
+  #decimal;
+  #parsePattern;
+  constructor(locale) {
+    this.#date = new Intl.DateTimeFormat(locale);
+    this.#localTime = new Intl.DateTimeFormat(locale, {
+      hour: "numeric",
+      minute: "numeric"
+    });
+    this.#localDateTime = new Intl.DateTimeFormat(locale, {
+      day: "numeric",
+      month: "numeric",
+      year: "numeric",
+      hour: "numeric",
+      minute: "numeric"
+    });
+    this.#integer = new Intl.NumberFormat(locale, {
+      maximumFractionDigits: 0
+    });
+    this.#decimal = new Intl.NumberFormat(locale, {
+      maximumFractionDigits: 2,
+      minimumFractionDigits: 2
+    });
+    this.#parsePattern = getFormatRegex(this.#date);
+  }
+  formatDate(value) {
+    if (typeof value === "object") {
+      const { year, month, day } = value;
+      const date = /* @__PURE__ */ new Date();
+      date.setFullYear(year);
+      date.setMonth(month);
+      date.setDate(day);
+      return this.#date.format(date);
+    }
+    return tryFormatDate(this.#date, value);
+  }
+  formatLocalTime(value) {
+    return tryFormatDate(this.#localTime, `2000-01-01T${value}`);
+  }
+  formatLocalDateTime(value) {
+    return tryFormatDate(this.#localDateTime, value);
+  }
+  formatInteger(value) {
+    return value && Number.isFinite(value) ? this.#integer.format(value) : "";
+  }
+  formatDecimal(value) {
+    return value && Number.isFinite(value) ? this.#decimal.format(value) : "";
+  }
+  parse(dateString) {
+    const match = this.#parsePattern.exec(dateString);
+    const year = Number(match?.groups?.year);
+    const month = Number(match?.groups?.month) - 1;
+    const day = Number(match?.groups?.day);
+    const dateInstance = /* @__PURE__ */ new Date();
+    dateInstance.setFullYear(year);
+    dateInstance.setMonth(month);
+    dateInstance.setDate(day);
+    if (dateInstance.getFullYear() !== year || dateInstance.getMonth() !== month || dateInstance.getDate() !== day) {
+      return void 0;
+    }
+    return { year, month, day };
+  }
+}
+function useLocaleFormatter() {
+  const locale = useContext(LocaleContext);
+  return useMemo(() => new LocaleFormatter(locale), [locale]);
+}
+const defaultDatePickerI18n = new DatePickerElement().i18n;
+function useDatePickerI18n() {
+  const formatter = useLocaleFormatter();
+  return useMemo(
+    () => ({
+      ...defaultDatePickerI18n,
+      formatDate(value) {
+        return formatter.formatDate(value);
+      },
+      parseDate(value) {
+        return formatter.parse(value);
+      }
+    }),
+    [formatter]
+  );
+}
+const defaultDateTimePickerI18n = new DateTimePickerElement().i18n;
+function useDateTimePickerI18n() {
+  const datePickerI18n = useDatePickerI18n();
+  return useMemo(
+    () => ({
+      ...defaultDateTimePickerI18n,
+      ...datePickerI18n
+    }),
+    [datePickerI18n]
+  );
+}
+export {
+  LocaleContext,
+  LocaleFormatter,
+  useDatePickerI18n,
+  useDateTimePickerI18n,
+  useLocaleFormatter
+};
+//# sourceMappingURL=locale.js.map