@vaadin/hilla-react-crud 24.4.0-alpha1

package/autogrid.d.ts

@@ -0,0 +1,130 @@
+import type { AbstractModel, DetachedModelConstructor } from '@vaadin/hilla-lit-form';
+import { type GridElement, type GridProps } from '@vaadin/react-components/Grid.js';
+import { type ComponentType, type ForwardedRef, type JSX } from 'react';
+import { type ColumnOptions } from './autogrid-columns.js';
+import type { ListService } from './crud';
+import { type ItemCounts } from './data-provider.js';
+import { type HeaderFilterRendererProps } from './header-filter';
+import type FilterUnion from './types/com/vaadin/hilla/crud/filter/FilterUnion.js';
+export interface AutoGridRef<TItem = any> {
+    /**
+     * The underlying vaadin-grid DOM element.
+     */
+    grid: GridElement<TItem> | null;
+    /**
+     * Refreshes the grid by reloading the data from the backend.
+     */
+    refresh(): void;
+}
+interface AutoGridOwnProps<TItem> {
+    /**
+     * The service to use for fetching the data. This must be a TypeScript service
+     * that has been generated by Hilla from a backend Java service that
+     * implements the `com.vaadin.hilla.crud.ListService` interface.
+     */
+    service: ListService<TItem>;
+    /**
+     * The entity model to use for the grid, which determines which columns to
+     * show and how to render them. This must be a Typescript model class that has
+     * been generated by Hilla from a backend Java class. The model must match
+     * with the type of the items returned by the service. For example, a
+     * `PersonModel` can be used with a service that returns `Person` instances.
+     *
+     * By default, the grid shows columns for all properties of the model which
+     * have a type that is supported. Use the `visibleColumns` option to customize
+     * which columns to show and in which order.
+     */
+    model: DetachedModelConstructor<AbstractModel<TItem>>;
+    /**
+     * The property to use to detect an item's ID. The item ID is used to keep
+     * the selection state when reloading the grid.
+     *
+     * By default, the component uses the property annotated with
+     * `jakarta.persistence.Id`, or a property named `id`, in that order.
+     * This option can be used to override the default behavior, or define the ID
+     * property in case a class doesn't have a property matching the defaults.
+     */
+    itemIdProperty?: string;
+    /**
+     * Allows to provide a filter that is applied when fetching data from the
+     * service. This can be used for implementing an external filter UI outside
+     * the grid. A custom filter is not compatible with header filters.
+     *
+     * **NOTE:** This is considered an experimental feature and the API may change
+     * in the future.
+     */
+    experimentalFilter?: FilterUnion;
+    /**
+     * Allows to customize which columns to show and in which order. This must be
+     * an array of property names that are defined in the model. Nested properties
+     * can be specified using dot notation, e.g. `address.street`.
+     */
+    visibleColumns?: string[];
+    /**
+     * Disables header filters, which are otherwise enabled by default.
+     */
+    noHeaderFilters?: boolean;
+    /**
+     * Allows to add custom columns to the grid. This must be an array of
+     * `GridColumn` component instances. Custom columns are added after the
+     * auto-generated columns.
+     */
+    customColumns?: JSX.Element[];
+    /**
+     * Allows to customize the props for individual columns. This is an object
+     * where the keys must be property names that are defined in the model, and
+     * the values are props that are accepted by the `GridColumn` component.
+     * Nested properties can be specified using dot notation, e.g.
+     * `address.street`.
+     */
+    columnOptions?: Record<string, ColumnOptions>;
+    /**
+     * When enabled, inserts a column with row numbers at the beginning of the
+     * grid.
+     */
+    rowNumbers?: boolean;
+    /**
+     * When enabled, shows the total count of items in the grid footer.
+     * This requires the provided service to implement the CountService interface,
+     *  otherwise an error will be logged to the console, without any count being
+     *  rendered.
+     */
+    totalCount?: boolean;
+    /**
+     * When enabled, shows the filtered item count in the grid footer.
+     * if totalCount is also enabled, it will show both totalCount and filteredCount.
+     * This requires the provided service to implement the CountService interface,
+     *  otherwise an error will be logged to the console, without any count being
+     *  rendered.
+     */
+    filteredCount?: boolean;
+    /**
+     * Allows to customize the grid footer with a custom renderer component for
+     *  the total count and filtered item count.
+     * This requires the provided service to implement the CountService interface,
+     * See {@link AutoGrid#totalCount} and {@link AutoGrid#filteredCount}.
+     */
+    footerCountRenderer?: ComponentType<ItemCounts>;
+}
+export type AutoGridProps<TItem> = GridProps<TItem> & Readonly<AutoGridOwnProps<TItem>>;
+declare function AutoGridInner<TItem>({ service, model, itemIdProperty, experimentalFilter, visibleColumns, noHeaderFilters, customColumns, columnOptions, rowNumbers, totalCount, filteredCount, footerCountRenderer, ...gridProps }: AutoGridProps<TItem>, ref: ForwardedRef<AutoGridRef<TItem>>): JSX.Element;
+type AutoGrid = <TItem>(props: AutoGridProps<TItem> & {
+    ref?: ForwardedRef<AutoGridRef<TItem>>;
+}) => ReturnType<typeof AutoGridInner>;
+/**
+ * Auto Grid is a component for displaying tabular data based on a Java backend
+ * service. It automatically generates columns based on the properties of a
+ * Java class and provides features such as lazy-loading, sorting and filtering.
+ *
+ * Example usage:
+ * ```tsx
+ * import { AutoGrid } from '@hilla/react-crud';
+ * import PersonService from 'Frontend/generated/endpoints';
+ * import PersonModel from 'Frontend/generated/com/example/application/Person';
+ *
+ * <AutoGrid service={PersonService} model={PersonModel} />
+ * ```
+ */
+export declare const AutoGrid: AutoGrid;
+export type { ColumnOptions, HeaderFilterRendererProps };
+//# sourceMappingURL=autogrid.d.ts.map

package/autogrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"autogrid.d.ts","sourceRoot":"","sources":["src/autogrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AACtF,OAAO,EAAQ,KAAK,WAAW,EAAE,KAAK,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAG1F,OAAO,EAEL,KAAK,aAAa,EAClB,KAAK,YAAY,EAEjB,KAAK,GAAG,EAMT,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,KAAK,aAAa,EAAoB,MAAM,uBAAuB,CAAC;AAG7E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAC1C,OAAO,EAAyD,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAC5G,OAAO,EAAE,KAAK,yBAAyB,EAAuC,MAAM,iBAAiB,CAAC;AAItG,OAAO,KAAK,WAAW,MAAM,qDAAqD,CAAC;AAKnF,MAAM,WAAW,WAAW,CAAC,KAAK,GAAG,GAAG;IACtC;;OAEG;IACH,IAAI,EAAE,WAAW,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;IAEhC;;OAEG;IACH,OAAO,IAAI,IAAI,CAAC;CACjB;AAED,UAAU,gBAAgB,CAAC,KAAK;IAC9B;;;;OAIG;IACH,OAAO,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;IAC5B;;;;;;;;;;OAUG;IACH,KAAK,EAAE,wBAAwB,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC;IACtD;;;;;;;;OAQG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;;;;OAOG;IACH,kBAAkB,CAAC,EAAE,WAAW,CAAC;IACjC;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;OAIG;IACH,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;IAC9B;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IAC9C;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;CACjD;AAED,MAAM,MAAM,aAAa,CAAC,KAAK,IAAI,SAAS,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,CAAC;AAyJxF,iBAAS,aAAa,CAAC,KAAK,EAC1B,EACE,OAAO,EACP,KAAK,EACL,cAAc,EACd,kBAAkB,EAClB,cAAc,EACd,eAAe,EACf,aAAa,EACb,aAAa,EACb,UAAU,EACV,UAAU,EACV,aAAa,EACb,mBAAmB,EACnB,GAAG,SAAS,EACb,EAAE,aAAa,CAAC,KAAK,CAAC,EACvB,GAAG,EAAE,YAAY,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,GACpC,GAAG,CAAC,OAAO,CA0Gb;AAED,KAAK,QAAQ,GAAG,CAAC,KAAK,EACpB,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAA;CAAE,KACrE,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AAEtC;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,QAAQ,EAAE,QAAgD,CAAC;AAExE,YAAY,EAAE,aAAa,EAAE,yBAAyB,EAAE,CAAC"}

package/autogrid.js

@@ -0,0 +1,234 @@
+import { jsx } from "react/jsx-runtime";
+import { Grid } from "@vaadin/react-components/Grid.js";
+import { GridColumn } from "@vaadin/react-components/GridColumn.js";
+import { GridColumnGroup } from "@vaadin/react-components/GridColumnGroup.js";
+import {
+  cloneElement,
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { ColumnContext, CustomColumnContext } from "./autogrid-column-context.js";
+import { getColumnOptions } from "./autogrid-columns.js";
+import { AutoGridFooterItemCountRenderer, AutoGridRowNumberRenderer, FooterContext } from "./autogrid-renderers.js";
+import css from "./autogrid.obj.js";
+import { createDataProvider, isCountService } from "./data-provider.js";
+import { NoHeaderFilter, HeaderFilterWrapper } from "./header-filter";
+import { HeaderSorter } from "./header-sorter";
+import { getDefaultProperties, ModelInfo } from "./model-info.js";
+import { isFilterEmpty, registerStylesheet } from "./util";
+registerStylesheet(css);
+function wrapCustomColumn(column, setColumnFilter, options) {
+  const key = column.key ?? "no-key";
+  const { header, headerRenderer } = column.props;
+  const customOptions = options.columnOptions?.[key];
+  const { header: customHeader, headerRenderer: customHeaderRenderer, headerFilterRenderer } = customOptions ?? {};
+  const columnWithoutHeader = cloneElement(column, {
+    header: null,
+    headerRenderer: HeaderFilterWrapper
+  });
+  return /* @__PURE__ */ jsx(
+    CustomColumnContext.Provider,
+    {
+      value: {
+        setColumnFilter,
+        headerFilterRenderer: headerFilterRenderer ?? NoHeaderFilter,
+        filterKey: key
+      },
+      children: /* @__PURE__ */ jsx(
+        GridColumnGroup,
+        {
+          header: customHeader ?? header,
+          headerRenderer: customHeaderRenderer ?? headerRenderer,
+          children: columnWithoutHeader
+        },
+        key
+      )
+    },
+    key
+  );
+}
+function addCustomColumns(columns, options, setColumnFilter) {
+  if (!options.customColumns) {
+    return columns;
+  }
+  const customColumns = options.noHeaderFilters ? options.customColumns : options.customColumns.map((column) => wrapCustomColumn(column, setColumnFilter, options));
+  if (options.visibleColumns) {
+    const columnMap = [...columns, ...customColumns].reduce((map, column) => {
+      const { key } = column;
+      if (key) {
+        map.set(key, column);
+      }
+      return map;
+    }, /* @__PURE__ */ new Map());
+    return options.visibleColumns.map((path) => columnMap.get(path)).filter(Boolean);
+  }
+  return [...columns, ...customColumns];
+}
+function useColumns(properties, setColumnFilter, options) {
+  const sortableProperties = properties.filter(
+    (propertyInfo) => options.columnOptions?.[propertyInfo.name]?.sortable !== false
+  );
+  const [sortState, setSortState] = useState(
+    sortableProperties.length > 0 ? { [sortableProperties[0].name]: { direction: "asc" } } : {}
+  );
+  let columns = properties.map((propertyInfo) => {
+    let column;
+    const customColumnOptions = options.columnOptions?.[propertyInfo.name];
+    const { headerFilterRenderer, ...columnProps } = getColumnOptions(propertyInfo, customColumnOptions);
+    if (!options.noHeaderFilters) {
+      column = /* @__PURE__ */ jsx(GridColumnGroup, { headerRenderer: HeaderSorter, children: /* @__PURE__ */ jsx(GridColumn, { path: propertyInfo.name, headerRenderer: HeaderFilterWrapper, ...columnProps }) });
+    } else {
+      column = /* @__PURE__ */ jsx(GridColumn, { path: propertyInfo.name, headerRenderer: HeaderSorter, ...columnProps });
+    }
+    return /* @__PURE__ */ jsx(
+      ColumnContext.Provider,
+      {
+        value: {
+          propertyInfo,
+          setColumnFilter,
+          sortState,
+          setSortState,
+          customColumnOptions,
+          headerFilterRenderer: headerFilterRenderer ?? NoHeaderFilter,
+          filterKey: propertyInfo.name
+        },
+        children: column
+      },
+      propertyInfo.name
+    );
+  });
+  columns = addCustomColumns(columns, options, setColumnFilter);
+  if (options.rowNumbers) {
+    columns = [
+      /* @__PURE__ */ jsx(GridColumn, { width: "4em", flexGrow: 0, renderer: AutoGridRowNumberRenderer }, "rownumbers"),
+      ...columns
+    ];
+  }
+  const { totalCount, filteredCount, itemCounts, footerCountRenderer } = options;
+  if (totalCount ?? filteredCount) {
+    const col = /* @__PURE__ */ jsx(
+      FooterContext.Provider,
+      {
+        value: {
+          totalCount,
+          filteredCount,
+          footerCountRenderer,
+          itemCounts
+        },
+        children: /* @__PURE__ */ jsx(GridColumnGroup, { footerRenderer: AutoGridFooterItemCountRenderer, children: columns })
+      },
+      "grid-footer"
+    );
+    columns = [col];
+  }
+  return columns;
+}
+function AutoGridInner({
+  service,
+  model,
+  itemIdProperty,
+  experimentalFilter,
+  visibleColumns,
+  noHeaderFilters,
+  customColumns,
+  columnOptions,
+  rowNumbers,
+  totalCount,
+  filteredCount,
+  footerCountRenderer,
+  ...gridProps
+}, ref) {
+  const [internalFilter, setInternalFilter] = useState({ "@type": "and", children: [] });
+  const [itemCounts, setItemCounts] = useState();
+  const gridRef = useRef(null);
+  const dataProviderRef = useRef();
+  useImperativeHandle(
+    ref,
+    () => ({
+      get grid() {
+        return gridRef.current;
+      },
+      refresh() {
+        dataProviderRef.current?.refresh();
+      }
+    }),
+    []
+  );
+  const setHeaderFilter = (filter, filterKey) => {
+    let changed = false;
+    filter.key = filterKey;
+    const indexOfFilter = filterKey ? internalFilter.children.findIndex((f) => f.key === filterKey) : -1;
+    const isEmptyFilter = isFilterEmpty(filter);
+    if (indexOfFilter >= 0 && isEmptyFilter) {
+      internalFilter.children.splice(indexOfFilter, 1);
+      changed = true;
+    } else if (!isEmptyFilter) {
+      if (indexOfFilter >= 0) {
+        internalFilter.children[indexOfFilter] = filter;
+        changed = true;
+      } else {
+        internalFilter.children.push(filter);
+        changed = true;
+      }
+    }
+    if (changed) {
+      setInternalFilter({ ...internalFilter });
+    }
+  };
+  const modelInfo = useMemo(() => new ModelInfo(model, itemIdProperty), [model]);
+  const properties = visibleColumns ? modelInfo.getProperties(visibleColumns) : getDefaultProperties(modelInfo);
+  const children = useColumns(properties, setHeaderFilter, {
+    visibleColumns,
+    noHeaderFilters,
+    customColumns,
+    columnOptions,
+    rowNumbers,
+    totalCount,
+    filteredCount,
+    footerCountRenderer,
+    itemCounts
+  });
+  useEffect(() => {
+    if (noHeaderFilters) {
+      setInternalFilter({ "@type": "and", children: [] });
+    }
+  }, [noHeaderFilters]);
+  useEffect(() => {
+    const grid = gridRef.current;
+    if ((!isCountService(service) && totalCount) ?? filteredCount) {
+      console.error(
+        '"totalCount" and "filteredCount" props require the provided service to implement the CountService interface.'
+      );
+    }
+    setTimeout(() => {
+      let firstUpdate = true;
+      dataProviderRef.current = createDataProvider(grid, service, {
+        initialFilter: experimentalFilter ?? internalFilter,
+        loadTotalCount: totalCount,
+        afterLoad(newItemCounts) {
+          setItemCounts(newItemCounts);
+          if (firstUpdate) {
+            firstUpdate = false;
+            setTimeout(() => grid.recalculateColumnWidths(), 0);
+          }
+        }
+      });
+    }, 1);
+  }, [model, service]);
+  useEffect(() => {
+    const dataProvider = dataProviderRef.current;
+    if (dataProvider) {
+      dataProvider.setFilter(experimentalFilter ?? internalFilter);
+    }
+  }, [experimentalFilter, internalFilter]);
+  return /* @__PURE__ */ jsx(Grid, { itemIdPath: modelInfo.idProperty?.name, ...gridProps, ref: gridRef, children });
+}
+const AutoGrid = forwardRef(AutoGridInner);
+export {
+  AutoGrid
+};
+//# sourceMappingURL=autogrid.js.map

package/autogrid.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["src/autogrid.tsx"],
+  "sourcesContent": ["import type { AbstractModel, DetachedModelConstructor } from '@vaadin/hilla-lit-form';\nimport { Grid, type GridElement, type GridProps } from '@vaadin/react-components/Grid.js';\nimport { GridColumn } from '@vaadin/react-components/GridColumn.js';\nimport { GridColumnGroup } from '@vaadin/react-components/GridColumnGroup.js';\nimport {\n  cloneElement,\n  type ComponentType,\n  type ForwardedRef,\n  forwardRef,\n  type JSX,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { ColumnContext, CustomColumnContext, type SortState } from './autogrid-column-context.js';\nimport { type ColumnOptions, getColumnOptions } from './autogrid-columns.js';\nimport { AutoGridFooterItemCountRenderer, AutoGridRowNumberRenderer, FooterContext } from './autogrid-renderers.js';\nimport css from './autogrid.obj.js';\nimport type { ListService } from './crud';\nimport { createDataProvider, type DataProvider, isCountService, type ItemCounts } from './data-provider.js';\nimport { type HeaderFilterRendererProps, NoHeaderFilter, HeaderFilterWrapper } from './header-filter';\nimport { HeaderSorter } from './header-sorter';\nimport { getDefaultProperties, ModelInfo, type PropertyInfo } from './model-info.js';\nimport type AndFilter from './types/com/vaadin/hilla/crud/filter/AndFilter.js';\nimport type FilterUnion from './types/com/vaadin/hilla/crud/filter/FilterUnion.js';\nimport { isFilterEmpty, registerStylesheet } from './util';\n\nregisterStylesheet(css);\n\nexport interface AutoGridRef<TItem = any> {\n  /**\n   * The underlying vaadin-grid DOM element.\n   */\n  grid: GridElement<TItem> | null;\n\n  /**\n   * Refreshes the grid by reloading the data from the backend.\n   */\n  refresh(): void;\n}\n\ninterface AutoGridOwnProps<TItem> {\n  /**\n   * The service to use for fetching the data. This must be a TypeScript service\n   * that has been generated by Hilla from a backend Java service that\n   * implements the `com.vaadin.hilla.crud.ListService` interface.\n   */\n  service: ListService<TItem>;\n  /**\n   * The entity model to use for the grid, which determines which columns to\n   * show and how to render them. This must be a Typescript model class that has\n   * been generated by Hilla from a backend Java class. The model must match\n   * with the type of the items returned by the service. For example, a\n   * `PersonModel` can be used with a service that returns `Person` instances.\n   *\n   * By default, the grid shows columns for all properties of the model which\n   * have a type that is supported. Use the `visibleColumns` option to customize\n   * which columns to show and in which order.\n   */\n  model: DetachedModelConstructor<AbstractModel<TItem>>;\n  /**\n   * The property to use to detect an item's ID. The item ID is used to keep\n   * the selection state when reloading the grid.\n   *\n   * By default, the component uses the property annotated with\n   * `jakarta.persistence.Id`, or a property named `id`, in that order.\n   * This option can be used to override the default behavior, or define the ID\n   * property in case a class doesn't have a property matching the defaults.\n   */\n  itemIdProperty?: string;\n  /**\n   * Allows to provide a filter that is applied when fetching data from the\n   * service. This can be used for implementing an external filter UI outside\n   * the grid. A custom filter is not compatible with header filters.\n   *\n   * **NOTE:** This is considered an experimental feature and the API may change\n   * in the future.\n   */\n  experimentalFilter?: FilterUnion;\n  /**\n   * Allows to customize which columns to show and in which order. This must be\n   * an array of property names that are defined in the model. Nested properties\n   * can be specified using dot notation, e.g. `address.street`.\n   */\n  visibleColumns?: string[];\n  /**\n   * Disables header filters, which are otherwise enabled by default.\n   */\n  noHeaderFilters?: boolean;\n  /**\n   * Allows to add custom columns to the grid. This must be an array of\n   * `GridColumn` component instances. Custom columns are added after the\n   * auto-generated columns.\n   */\n  customColumns?: JSX.Element[];\n  /**\n   * Allows to customize the props for individual columns. This is an object\n   * where the keys must be property names that are defined in the model, and\n   * the values are props that are accepted by the `GridColumn` component.\n   * Nested properties can be specified using dot notation, e.g.\n   * `address.street`.\n   */\n  columnOptions?: Record<string, ColumnOptions>;\n  /**\n   * When enabled, inserts a column with row numbers at the beginning of the\n   * grid.\n   */\n  rowNumbers?: boolean;\n  /**\n   * When enabled, shows the total count of items in the grid footer.\n   * This requires the provided service to implement the CountService interface,\n   *  otherwise an error will be logged to the console, without any count being\n   *  rendered.\n   */\n  totalCount?: boolean;\n  /**\n   * When enabled, shows the filtered item count in the grid footer.\n   * if totalCount is also enabled, it will show both totalCount and filteredCount.\n   * This requires the provided service to implement the CountService interface,\n   *  otherwise an error will be logged to the console, without any count being\n   *  rendered.\n   */\n  filteredCount?: boolean;\n  /**\n   * Allows to customize the grid footer with a custom renderer component for\n   *  the total count and filtered item count.\n   * This requires the provided service to implement the CountService interface,\n   * See {@link AutoGrid#totalCount} and {@link AutoGrid#filteredCount}.\n   */\n  footerCountRenderer?: ComponentType<ItemCounts>;\n}\n\nexport type AutoGridProps<TItem> = GridProps<TItem> & Readonly<AutoGridOwnProps<TItem>>;\n\ninterface ColumnConfigurationOptions {\n  visibleColumns?: string[];\n  noHeaderFilters?: boolean;\n  customColumns?: JSX.Element[];\n  columnOptions?: Record<string, ColumnOptions>;\n  rowNumbers?: boolean;\n  totalCount?: boolean;\n  filteredCount?: boolean;\n  footerCountRenderer?: ComponentType<ItemCounts>;\n  itemCounts?: ItemCounts;\n}\n\nfunction wrapCustomColumn(\n  column: JSX.Element,\n  setColumnFilter: (filter: FilterUnion, filterKey: string) => void,\n  options: ColumnConfigurationOptions,\n) {\n  const key = column.key ?? 'no-key';\n  const { header, headerRenderer } = column.props;\n  const customOptions = options.columnOptions?.[key];\n  const { header: customHeader, headerRenderer: customHeaderRenderer, headerFilterRenderer } = customOptions ?? {};\n  const columnWithoutHeader = cloneElement(column, {\n    header: null,\n    headerRenderer: HeaderFilterWrapper,\n  });\n  return (\n    <CustomColumnContext.Provider\n      key={key}\n      value={{\n        setColumnFilter,\n        headerFilterRenderer: headerFilterRenderer ?? NoHeaderFilter,\n        filterKey: key,\n      }}\n    >\n      <GridColumnGroup\n        key={key}\n        header={customHeader ?? header}\n        headerRenderer={customHeaderRenderer ?? headerRenderer}\n      >\n        {columnWithoutHeader}\n      </GridColumnGroup>\n    </CustomColumnContext.Provider>\n  );\n}\n\nfunction addCustomColumns(\n  columns: JSX.Element[],\n  options: ColumnConfigurationOptions,\n  setColumnFilter: (filter: FilterUnion, filterKey: string) => void,\n): JSX.Element[] {\n  if (!options.customColumns) {\n    return columns;\n  }\n\n  // When using header filters, wrap custom columns into column groups and\n  // move header text or renderer to group\n  const customColumns = options.noHeaderFilters\n    ? options.customColumns\n    : options.customColumns.map((column) => wrapCustomColumn(column, setColumnFilter, options));\n\n  // When using a custom column order, insert custom columns into auto-generated\n  // ones using their `key`\n  if (options.visibleColumns) {\n    const columnMap = [...columns, ...customColumns].reduce((map, column) => {\n      const { key } = column;\n      if (key) {\n        map.set(key, column);\n      }\n      return map;\n    }, new Map<string, JSX.Element>());\n\n    return options.visibleColumns.map((path) => columnMap.get(path)).filter(Boolean) as JSX.Element[];\n  }\n\n  // Otherwise just append custom columns at the end\n  return [...columns, ...customColumns];\n}\n\nfunction useColumns(\n  properties: PropertyInfo[],\n  setColumnFilter: (filter: FilterUnion, filterKey: string) => void,\n  options: ColumnConfigurationOptions,\n) {\n  const sortableProperties = properties.filter(\n    (propertyInfo) => options.columnOptions?.[propertyInfo.name]?.sortable !== false,\n  );\n  const [sortState, setSortState] = useState<SortState>(\n    sortableProperties.length > 0 ? { [sortableProperties[0].name]: { direction: 'asc' } } : {},\n  );\n  let columns = properties.map((propertyInfo) => {\n    let column;\n    const customColumnOptions = options.columnOptions?.[propertyInfo.name];\n\n    const { headerFilterRenderer, ...columnProps } = getColumnOptions(propertyInfo, customColumnOptions);\n\n    if (!options.noHeaderFilters) {\n      column = (\n        <GridColumnGroup headerRenderer={HeaderSorter}>\n          <GridColumn path={propertyInfo.name} headerRenderer={HeaderFilterWrapper} {...columnProps}></GridColumn>\n        </GridColumnGroup>\n      );\n    } else {\n      column = <GridColumn path={propertyInfo.name} headerRenderer={HeaderSorter} {...columnProps}></GridColumn>;\n    }\n    return (\n      <ColumnContext.Provider\n        key={propertyInfo.name}\n        value={{\n          propertyInfo,\n          setColumnFilter,\n          sortState,\n          setSortState,\n          customColumnOptions,\n          headerFilterRenderer: headerFilterRenderer ?? NoHeaderFilter,\n          filterKey: propertyInfo.name,\n        }}\n      >\n        {column}\n      </ColumnContext.Provider>\n    );\n  });\n\n  columns = addCustomColumns(columns, options, setColumnFilter);\n\n  if (options.rowNumbers) {\n    columns = [\n      <GridColumn key=\"rownumbers\" width=\"4em\" flexGrow={0} renderer={AutoGridRowNumberRenderer}></GridColumn>,\n      ...columns,\n    ];\n  }\n  const { totalCount, filteredCount, itemCounts, footerCountRenderer } = options;\n  if (totalCount ?? filteredCount) {\n    const col = (\n      <FooterContext.Provider\n        key=\"grid-footer\"\n        value={{\n          totalCount,\n          filteredCount,\n          footerCountRenderer,\n          itemCounts,\n        }}\n      >\n        <GridColumnGroup footerRenderer={AutoGridFooterItemCountRenderer}>{columns}</GridColumnGroup>\n      </FooterContext.Provider>\n    );\n    columns = [col];\n  }\n\n  return columns;\n}\n\nfunction AutoGridInner<TItem>(\n  {\n    service,\n    model,\n    itemIdProperty,\n    experimentalFilter,\n    visibleColumns,\n    noHeaderFilters,\n    customColumns,\n    columnOptions,\n    rowNumbers,\n    totalCount,\n    filteredCount,\n    footerCountRenderer,\n    ...gridProps\n  }: AutoGridProps<TItem>,\n  ref: ForwardedRef<AutoGridRef<TItem>>,\n): JSX.Element {\n  const [internalFilter, setInternalFilter] = useState<AndFilter>({ '@type': 'and', children: [] });\n  const [itemCounts, setItemCounts] = useState<ItemCounts | undefined>();\n  const gridRef = useRef<GridElement<TItem>>(null);\n  const dataProviderRef = useRef<DataProvider<TItem>>();\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      get grid() {\n        return gridRef.current;\n      },\n      refresh() {\n        dataProviderRef.current?.refresh();\n      },\n    }),\n    [],\n  );\n\n  const setHeaderFilter = (filter: FilterUnion, filterKey: string) => {\n    let changed = false;\n    filter.key = filterKey;\n    const indexOfFilter = filterKey\n      ? internalFilter.children.findIndex((f) => (f as FilterUnion).key === filterKey)\n      : -1;\n    const isEmptyFilter = isFilterEmpty(filter);\n\n    if (indexOfFilter >= 0 && isEmptyFilter) {\n      internalFilter.children.splice(indexOfFilter, 1);\n      changed = true;\n    } else if (!isEmptyFilter) {\n      if (indexOfFilter >= 0) {\n        internalFilter.children[indexOfFilter] = filter;\n        changed = true;\n      } else {\n        internalFilter.children.push(filter);\n        changed = true;\n      }\n    }\n    if (changed) {\n      setInternalFilter({ ...internalFilter });\n    }\n  };\n\n  const modelInfo = useMemo(() => new ModelInfo(model, itemIdProperty), [model]);\n  const properties = visibleColumns ? modelInfo.getProperties(visibleColumns) : getDefaultProperties(modelInfo);\n  const children = useColumns(properties, setHeaderFilter, {\n    visibleColumns,\n    noHeaderFilters,\n    customColumns,\n    columnOptions,\n    rowNumbers,\n    totalCount,\n    filteredCount,\n    footerCountRenderer,\n    itemCounts,\n  });\n\n  useEffect(() => {\n    // Remove all filtering if header filters are removed\n    if (noHeaderFilters) {\n      setInternalFilter({ '@type': 'and', children: [] });\n    }\n  }, [noHeaderFilters]);\n\n  useEffect(() => {\n    // Sets the data provider, should be done only once\n    const grid = gridRef.current!;\n    // Log an error if totalCount or filteredCount is enabled but the service doesn't implement CountService\n    if ((!isCountService(service) && totalCount) ?? filteredCount) {\n      console.error(\n        '\"totalCount\" and \"filteredCount\" props require the provided service to implement the CountService interface.',\n      );\n    }\n    // Wait for the sorting headers to be rendered so that the sorting state is correct for the first data provider call\n    setTimeout(() => {\n      let firstUpdate = true;\n      dataProviderRef.current = createDataProvider(grid, service, {\n        initialFilter: experimentalFilter ?? internalFilter,\n        loadTotalCount: totalCount,\n        afterLoad(newItemCounts: ItemCounts) {\n          setItemCounts(newItemCounts);\n\n          if (firstUpdate) {\n            // Workaround for https://github.com/vaadin/react-components/issues/129\n            firstUpdate = false;\n            setTimeout(() => grid.recalculateColumnWidths(), 0);\n          }\n        },\n      });\n    }, 1);\n  }, [model, service]);\n\n  useEffect(() => {\n    // Update the filtering, whenever the filter changes\n    const dataProvider = dataProviderRef.current;\n    if (dataProvider) {\n      dataProvider.setFilter(experimentalFilter ?? internalFilter);\n    }\n  }, [experimentalFilter, internalFilter]);\n\n  return (\n    <Grid itemIdPath={modelInfo.idProperty?.name} {...gridProps} ref={gridRef}>\n      {children}\n    </Grid>\n  );\n}\n\ntype AutoGrid = <TItem>(\n  props: AutoGridProps<TItem> & { ref?: ForwardedRef<AutoGridRef<TItem>> },\n) => ReturnType<typeof AutoGridInner>;\n\n/**\n * Auto Grid is a component for displaying tabular data based on a Java backend\n * service. It automatically generates columns based on the properties of a\n * Java class and provides features such as lazy-loading, sorting and filtering.\n *\n * Example usage:\n * ```tsx\n * import { AutoGrid } from '@hilla/react-crud';\n * import PersonService from 'Frontend/generated/endpoints';\n * import PersonModel from 'Frontend/generated/com/example/application/Person';\n *\n * <AutoGrid service={PersonService} model={PersonModel} />\n * ```\n */\nexport const AutoGrid: AutoGrid = forwardRef(AutoGridInner) as AutoGrid;\n\nexport type { ColumnOptions, HeaderFilterRendererProps };\n"],
+  "mappings": "AA0KM;AAzKN,SAAS,YAA8C;AACvD,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EAGA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,eAAe,2BAA2C;AACnE,SAA6B,wBAAwB;AACrD,SAAS,iCAAiC,2BAA2B,qBAAqB;AAC1F,OAAO,SAAS;AAEhB,SAAS,oBAAuC,sBAAuC;AACvF,SAAyC,gBAAgB,2BAA2B;AACpF,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB,iBAAoC;AAGnE,SAAS,eAAe,0BAA0B;AAElD,mBAAmB,GAAG;AAuHtB,SAAS,iBACP,QACA,iBACA,SACA;AACA,QAAM,MAAM,OAAO,OAAO;AAC1B,QAAM,EAAE,QAAQ,eAAe,IAAI,OAAO;AAC1C,QAAM,gBAAgB,QAAQ,gBAAgB,GAAG;AACjD,QAAM,EAAE,QAAQ,cAAc,gBAAgB,sBAAsB,qBAAqB,IAAI,iBAAiB,CAAC;AAC/G,QAAM,sBAAsB,aAAa,QAAQ;AAAA,IAC/C,QAAQ;AAAA,IACR,gBAAgB;AAAA,EAClB,CAAC;AACD,SACE;AAAA,IAAC,oBAAoB;AAAA,IAApB;AAAA,MAEC,OAAO;AAAA,QACL;AAAA,QACA,sBAAsB,wBAAwB;AAAA,QAC9C,WAAW;AAAA,MACb;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UAEC,QAAQ,gBAAgB;AAAA,UACxB,gBAAgB,wBAAwB;AAAA,UAEvC;AAAA;AAAA,QAJI;AAAA,MAKP;AAAA;AAAA,IAbK;AAAA,EAcP;AAEJ;AAEA,SAAS,iBACP,SACA,SACA,iBACe;AACf,MAAI,CAAC,QAAQ,eAAe;AAC1B,WAAO;AAAA,EACT;AAIA,QAAM,gBAAgB,QAAQ,kBAC1B,QAAQ,gBACR,QAAQ,cAAc,IAAI,CAAC,WAAW,iBAAiB,QAAQ,iBAAiB,OAAO,CAAC;AAI5F,MAAI,QAAQ,gBAAgB;AAC1B,UAAM,YAAY,CAAC,GAAG,SAAS,GAAG,aAAa,EAAE,OAAO,CAAC,KAAK,WAAW;AACvE,YAAM,EAAE,IAAI,IAAI;AAChB,UAAI,KAAK;AACP,YAAI,IAAI,KAAK,MAAM;AAAA,MACrB;AACA,aAAO;AAAA,IACT,GAAG,oBAAI,IAAyB,CAAC;AAEjC,WAAO,QAAQ,eAAe,IAAI,CAAC,SAAS,UAAU,IAAI,IAAI,CAAC,EAAE,OAAO,OAAO;AAAA,EACjF;AAGA,SAAO,CAAC,GAAG,SAAS,GAAG,aAAa;AACtC;AAEA,SAAS,WACP,YACA,iBACA,SACA;AACA,QAAM,qBAAqB,WAAW;AAAA,IACpC,CAAC,iBAAiB,QAAQ,gBAAgB,aAAa,IAAI,GAAG,aAAa;AAAA,EAC7E;AACA,QAAM,CAAC,WAAW,YAAY,IAAI;AAAA,IAChC,mBAAmB,SAAS,IAAI,EAAE,CAAC,mBAAmB,CAAC,EAAE,IAAI,GAAG,EAAE,WAAW,MAAM,EAAE,IAAI,CAAC;AAAA,EAC5F;AACA,MAAI,UAAU,WAAW,IAAI,CAAC,iBAAiB;AAC7C,QAAI;AACJ,UAAM,sBAAsB,QAAQ,gBAAgB,aAAa,IAAI;AAErE,UAAM,EAAE,sBAAsB,GAAG,YAAY,IAAI,iBAAiB,cAAc,mBAAmB;AAEnG,QAAI,CAAC,QAAQ,iBAAiB;AAC5B,eACE,oBAAC,mBAAgB,gBAAgB,cAC/B,8BAAC,cAAW,MAAM,aAAa,MAAM,gBAAgB,qBAAsB,GAAG,aAAa,GAC7F;AAAA,IAEJ,OAAO;AACL,eAAS,oBAAC,cAAW,MAAM,aAAa,MAAM,gBAAgB,cAAe,GAAG,aAAa;AAAA,IAC/F;AACA,WACE;AAAA,MAAC,cAAc;AAAA,MAAd;AAAA,QAEC,OAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,sBAAsB,wBAAwB;AAAA,UAC9C,WAAW,aAAa;AAAA,QAC1B;AAAA,QAEC;AAAA;AAAA,MAXI,aAAa;AAAA,IAYpB;AAAA,EAEJ,CAAC;AAED,YAAU,iBAAiB,SAAS,SAAS,eAAe;AAE5D,MAAI,QAAQ,YAAY;AACtB,cAAU;AAAA,MACR,oBAAC,cAA4B,OAAM,OAAM,UAAU,GAAG,UAAU,6BAAhD,YAA2E;AAAA,MAC3F,GAAG;AAAA,IACL;AAAA,EACF;AACA,QAAM,EAAE,YAAY,eAAe,YAAY,oBAAoB,IAAI;AACvE,MAAI,cAAc,eAAe;AAC/B,UAAM,MACJ;AAAA,MAAC,cAAc;AAAA,MAAd;AAAA,QAEC,OAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QAEA,8BAAC,mBAAgB,gBAAgB,iCAAkC,mBAAQ;AAAA;AAAA,MARvE;AAAA,IASN;AAEF,cAAU,CAAC,GAAG;AAAA,EAChB;AAEA,SAAO;AACT;AAEA,SAAS,cACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACA,KACa;AACb,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAoB,EAAE,SAAS,OAAO,UAAU,CAAC,EAAE,CAAC;AAChG,QAAM,CAAC,YAAY,aAAa,IAAI,SAAiC;AACrE,QAAM,UAAU,OAA2B,IAAI;AAC/C,QAAM,kBAAkB,OAA4B;AAEpD;AAAA,IACE;AAAA,IACA,OAAO;AAAA,MACL,IAAI,OAAO;AACT,eAAO,QAAQ;AAAA,MACjB;AAAA,MACA,UAAU;AACR,wBAAgB,SAAS,QAAQ;AAAA,MACnC;AAAA,IACF;AAAA,IACA,CAAC;AAAA,EACH;AAEA,QAAM,kBAAkB,CAAC,QAAqB,cAAsB;AAClE,QAAI,UAAU;AACd,WAAO,MAAM;AACb,UAAM,gBAAgB,YAClB,eAAe,SAAS,UAAU,CAAC,MAAO,EAAkB,QAAQ,SAAS,IAC7E;AACJ,UAAM,gBAAgB,cAAc,MAAM;AAE1C,QAAI,iBAAiB,KAAK,eAAe;AACvC,qBAAe,SAAS,OAAO,eAAe,CAAC;AAC/C,gBAAU;AAAA,IACZ,WAAW,CAAC,eAAe;AACzB,UAAI,iBAAiB,GAAG;AACtB,uBAAe,SAAS,aAAa,IAAI;AACzC,kBAAU;AAAA,MACZ,OAAO;AACL,uBAAe,SAAS,KAAK,MAAM;AACnC,kBAAU;AAAA,MACZ;AAAA,IACF;AACA,QAAI,SAAS;AACX,wBAAkB,EAAE,GAAG,eAAe,CAAC;AAAA,IACzC;AAAA,EACF;AAEA,QAAM,YAAY,QAAQ,MAAM,IAAI,UAAU,OAAO,cAAc,GAAG,CAAC,KAAK,CAAC;AAC7E,QAAM,aAAa,iBAAiB,UAAU,cAAc,cAAc,IAAI,qBAAqB,SAAS;AAC5G,QAAM,WAAW,WAAW,YAAY,iBAAiB;AAAA,IACvD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,YAAU,MAAM;AAEd,QAAI,iBAAiB;AACnB,wBAAkB,EAAE,SAAS,OAAO,UAAU,CAAC,EAAE,CAAC;AAAA,IACpD;AAAA,EACF,GAAG,CAAC,eAAe,CAAC;AAEpB,YAAU,MAAM;AAEd,UAAM,OAAO,QAAQ;AAErB,SAAK,CAAC,eAAe,OAAO,KAAK,eAAe,eAAe;AAC7D,cAAQ;AAAA,QACN;AAAA,MACF;AAAA,IACF;AAEA,eAAW,MAAM;AACf,UAAI,cAAc;AAClB,sBAAgB,UAAU,mBAAmB,MAAM,SAAS;AAAA,QAC1D,eAAe,sBAAsB;AAAA,QACrC,gBAAgB;AAAA,QAChB,UAAU,eAA2B;AACnC,wBAAc,aAAa;AAE3B,cAAI,aAAa;AAEf,0BAAc;AACd,uBAAW,MAAM,KAAK,wBAAwB,GAAG,CAAC;AAAA,UACpD;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH,GAAG,CAAC;AAAA,EACN,GAAG,CAAC,OAAO,OAAO,CAAC;AAEnB,YAAU,MAAM;AAEd,UAAM,eAAe,gBAAgB;AACrC,QAAI,cAAc;AAChB,mBAAa,UAAU,sBAAsB,cAAc;AAAA,IAC7D;AAAA,EACF,GAAG,CAAC,oBAAoB,cAAc,CAAC;AAEvC,SACE,oBAAC,QAAK,YAAY,UAAU,YAAY,MAAO,GAAG,WAAW,KAAK,SAC/D,UACH;AAEJ;AAoBO,MAAM,WAAqB,WAAW,aAAa;",
+  "names": []
+}

package/autogrid.obj.js

@@ -0,0 +1,6 @@
+const css = new CSSStyleSheet();
+css.replaceSync(`.auto-grid-comparation-selection{--vaadin-field-default-width:2em}.auto-grid-comparation-selection>vaadin-select-value-button{--_lumo-text-field-overflow-mask-image:none!important;color:var(--lumo-secondary-text-color)}.auto-grid-comparation-selection::part(toggle-button){display:none}.auto-grid-string-filter{display:flex}.auto-grid-string-filter vaadin-text-field{flex:1 1 0;width:100px}.auto-grid-boolean-filter{display:flex}.auto-grid-boolean-filter vaadin-select{flex:1 1 0;width:80px}.auto-grid-boolean-filter vaadin-select-item{font-size:14px}.auto-grid-number-filter{display:flex}.auto-grid-number-filter vaadin-number-field{flex:1 1 0;width:100px}.auto-grid-number-filter vaadin-select::part(input-field){border-bottom-right-radius:0;border-top-right-radius:0}.auto-grid-number-filter vaadin-number-field::part(input-field){border-bottom-left-radius:0;border-top-left-radius:0}.auto-grid-enum-filter{display:flex}.auto-grid-enum-filter vaadin-select{flex:1 1 0;width:120px}.auto-grid-enum-filter vaadin-select-item{font-size:14px}.auto-grid-date-filter{display:flex}.auto-grid-date-filter vaadin-date-picker{flex:1 1 0;width:120px}.auto-grid-date-filter vaadin-select::part(input-field){border-bottom-right-radius:0;border-top-right-radius:0}.auto-grid-date-filter vaadin-date-picker::part(input-field){border-bottom-left-radius:0;border-top-left-radius:0}.auto-grid-time-filter{display:flex}.auto-grid-time-filter vaadin-time-picker{flex:1 1 0;width:100px}.auto-grid-time-filter vaadin-select::part(input-field){border-bottom-right-radius:0;border-top-right-radius:0}.auto-grid-time-filter vaadin-time-picker::part(input-field){border-bottom-left-radius:0;border-top-left-radius:0}`);
+export {
+  css as default
+};
+//# sourceMappingURL=autogrid.obj.js.map

package/autogrid.obj.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["src/autogrid.obj.css"],
+  "sourcesContent": ["const css = new CSSStyleSheet();css.replaceSync(`.auto-grid-comparation-selection{--vaadin-field-default-width:2em}.auto-grid-comparation-selection>vaadin-select-value-button{--_lumo-text-field-overflow-mask-image:none!important;color:var(--lumo-secondary-text-color)}.auto-grid-comparation-selection::part(toggle-button){display:none}.auto-grid-string-filter{display:flex}.auto-grid-string-filter vaadin-text-field{flex:1 1 0;width:100px}.auto-grid-boolean-filter{display:flex}.auto-grid-boolean-filter vaadin-select{flex:1 1 0;width:80px}.auto-grid-boolean-filter vaadin-select-item{font-size:14px}.auto-grid-number-filter{display:flex}.auto-grid-number-filter vaadin-number-field{flex:1 1 0;width:100px}.auto-grid-number-filter vaadin-select::part(input-field){border-bottom-right-radius:0;border-top-right-radius:0}.auto-grid-number-filter vaadin-number-field::part(input-field){border-bottom-left-radius:0;border-top-left-radius:0}.auto-grid-enum-filter{display:flex}.auto-grid-enum-filter vaadin-select{flex:1 1 0;width:120px}.auto-grid-enum-filter vaadin-select-item{font-size:14px}.auto-grid-date-filter{display:flex}.auto-grid-date-filter vaadin-date-picker{flex:1 1 0;width:120px}.auto-grid-date-filter vaadin-select::part(input-field){border-bottom-right-radius:0;border-top-right-radius:0}.auto-grid-date-filter vaadin-date-picker::part(input-field){border-bottom-left-radius:0;border-top-left-radius:0}.auto-grid-time-filter{display:flex}.auto-grid-time-filter vaadin-time-picker{flex:1 1 0;width:100px}.auto-grid-time-filter vaadin-select::part(input-field){border-bottom-right-radius:0;border-top-right-radius:0}.auto-grid-time-filter vaadin-time-picker::part(input-field){border-bottom-left-radius:0;border-top-left-radius:0}`);export { css as default };"],
+  "mappings": "AAAA,MAAM,MAAM,IAAI,cAAc;AAAE,IAAI,YAAY,8pDAA8pD;",
+  "names": []
+}

package/crud.d.js

@@ -0,0 +1 @@
+//# sourceMappingURL=crud.d.js.map

package/crud.d.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/crud.d.ts

@@ -0,0 +1,17 @@
+import type FilterUnion from './types/com/vaadin/hilla/crud/filter/FilterUnion.js';
+import type Pageable from './types/com/vaadin/hilla/mappedtypes/Pageable';
+
+export interface FormService<T> {
+  save(value: T): Promise<T | undefined>;
+  delete(id: any): Promise<void>;
+}
+
+export interface ListService<T> {
+  list(request: Pageable, filter: FilterUnion | undefined): Promise<T[]>;
+}
+
+export interface CountService<T> {
+  count(filter: FilterUnion | undefined): Promise<number>;
+}
+
+export interface CrudService<T> extends FormService<T>, ListService<T> {}

package/data-provider.d.ts

@@ -0,0 +1,56 @@
+import type { GridDataProviderCallback, GridDataProviderParams, GridElement } from '@vaadin/react-components/Grid';
+import type { CountService, ListService } from './crud';
+import type FilterUnion from './types/com/vaadin/hilla/crud/filter/FilterUnion';
+import type Sort from './types/com/vaadin/hilla/mappedtypes/Sort';
+type MaybeCountService<TItem> = Partial<CountService<TItem>>;
+type ListAndMaybeCountService<TItem> = ListService<TItem> & MaybeCountService<TItem>;
+type ListAndCountService<TItem> = CountService<TItem> & ListService<TItem>;
+type PageRequest = {
+    pageNumber: number;
+    pageSize: number;
+    sort: Sort;
+};
+type DataPage<TItem> = {
+    items: TItem[];
+    pageRequest: PageRequest;
+};
+export type ItemCounts = {
+    totalCount?: number;
+    filteredCount?: number;
+};
+type AfterLoadCallback = (result: ItemCounts) => void;
+type DataProviderOptions = {
+    initialFilter?: FilterUnion;
+    loadTotalCount?: boolean;
+    afterLoad?: AfterLoadCallback;
+};
+export declare function isCountService<TItem>(service: ListAndMaybeCountService<TItem>): service is ListAndCountService<TItem>;
+export declare abstract class DataProvider<TItem> {
+    protected readonly grid: GridElement;
+    protected readonly service: ListAndMaybeCountService<TItem>;
+    protected readonly loadTotalCount?: boolean;
+    protected readonly afterLoadCallback?: AfterLoadCallback;
+    protected filter: FilterUnion | undefined;
+    protected totalCount: number | undefined;
+    protected filteredCount: number | undefined;
+    constructor(grid: GridElement, service: ListAndMaybeCountService<TItem>, options?: DataProviderOptions);
+    refresh(): void;
+    setFilter(filter: FilterUnion | undefined): void;
+    protected load(params: GridDataProviderParams<TItem>, callback: GridDataProviderCallback<TItem>): Promise<void>;
+    protected fetchPage(params: GridDataProviderParams<TItem>): Promise<DataPage<TItem>>;
+    protected abstract fetchTotalCount(page: DataPage<TItem>): Promise<number | undefined> | number | undefined;
+    protected abstract fetchFilteredCount(page: DataPage<TItem>): Promise<number | undefined> | number | undefined;
+}
+export declare class InfiniteDataProvider<TItem> extends DataProvider<TItem> {
+    protected fetchTotalCount(): undefined;
+    protected fetchFilteredCount(page: DataPage<TItem>): number | undefined;
+}
+export declare class FixedSizeDataProvider<TItem> extends DataProvider<TItem> {
+    service: ListAndCountService<TItem>;
+    constructor(grid: GridElement, service: ListAndMaybeCountService<TItem>, options?: DataProviderOptions);
+    protected fetchTotalCount(): Promise<number | undefined>;
+    protected fetchFilteredCount(): Promise<number | undefined>;
+}
+export declare function createDataProvider<TItem>(grid: GridElement, service: ListAndMaybeCountService<TItem>, options?: DataProviderOptions): DataProvider<TItem>;
+export {};
+//# sourceMappingURL=data-provider.d.ts.map

package/data-provider.d.ts.map

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

package/data-provider.js

@@ -0,0 +1,121 @@
+import Direction from "./types/org/springframework/data/domain/Sort/Direction";
+function createSort(params) {
+  return {
+    orders: params.sortOrders.filter((order) => order.direction != null).map((order) => ({
+      property: order.path,
+      direction: order.direction === "asc" ? Direction.ASC : Direction.DESC,
+      ignoreCase: false
+    }))
+  };
+}
+function isCountService(service) {
+  return !!service.count;
+}
+class DataProvider {
+  grid;
+  service;
+  loadTotalCount;
+  afterLoadCallback;
+  filter;
+  totalCount;
+  filteredCount;
+  constructor(grid, service, options = {}) {
+    this.grid = grid;
+    this.service = service;
+    this.filter = options.initialFilter;
+    this.loadTotalCount = options.loadTotalCount;
+    this.afterLoadCallback = options.afterLoad;
+    this.grid.dataProvider = this.load.bind(this);
+  }
+  refresh() {
+    this.totalCount = void 0;
+    this.filteredCount = void 0;
+    this.grid.clearCache();
+  }
+  setFilter(filter) {
+    this.filter = filter;
+    this.refresh();
+  }
+  async load(params, callback) {
+    const page = await this.fetchPage(params);
+    this.filteredCount = await this.fetchFilteredCount(page);
+    if (this.loadTotalCount) {
+      this.totalCount = await this.fetchTotalCount(page);
+    }
+    callback(page.items, this.filteredCount);
+    if (this.afterLoadCallback) {
+      this.afterLoadCallback({
+        totalCount: this.totalCount,
+        filteredCount: this.filteredCount
+      });
+    }
+  }
+  async fetchPage(params) {
+    const sort = createSort(params);
+    const pageNumber = params.page;
+    const { pageSize } = params;
+    const pageRequest = {
+      pageNumber,
+      pageSize,
+      sort
+    };
+    const items = await this.service.list(pageRequest, this.filter);
+    return { items, pageRequest };
+  }
+}
+class InfiniteDataProvider extends DataProvider {
+  // cannot be static, otherwise it does not implement superclass
+  // eslint-disable-next-line @typescript-eslint/class-methods-use-this
+  fetchTotalCount() {
+    return void 0;
+  }
+  fetchFilteredCount(page) {
+    const { items, pageRequest } = page;
+    const { pageNumber, pageSize } = pageRequest;
+    let infiniteScrollingSize;
+    if (items.length === pageSize) {
+      infiniteScrollingSize = (pageNumber + 1) * pageSize + 1;
+      const cacheSize = this.grid._dataProviderController.rootCache.size;
+      if (cacheSize !== void 0 && infiniteScrollingSize < cacheSize) {
+        infiniteScrollingSize = void 0;
+      }
+    } else {
+      infiniteScrollingSize = pageNumber * pageSize + items.length;
+    }
+    return infiniteScrollingSize;
+  }
+}
+class FixedSizeDataProvider extends DataProvider {
+  constructor(grid, service, options = {}) {
+    if (!isCountService(service)) {
+      throw new Error("The provided service does not implement the CountService interface.");
+    }
+    super(grid, service, options);
+  }
+  async fetchTotalCount() {
+    if (this.totalCount !== void 0) {
+      return this.totalCount;
+    }
+    return this.service.count(void 0);
+  }
+  async fetchFilteredCount() {
+    if (this.filteredCount !== void 0) {
+      return this.filteredCount;
+    }
+    return this.service.count(this.filter);
+  }
+}
+function createDataProvider(grid, service, options = {}) {
+  if (isCountService(service)) {
+    return new FixedSizeDataProvider(grid, service, options);
+  }
+  return new InfiniteDataProvider(grid, service, options);
+}
+export {
+  DataProvider,
+  FixedSizeDataProvider,
+  InfiniteDataProvider,
+  createDataProvider,
+  isCountService
+};
+//# sourceMappingURL=data-provider.js.map