@vaadin/hilla-react-crud 24.4.0-alpha9 → 24.4.0-beta2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/autoform.d.ts +8 -1
  2. package/autoform.d.ts.map +1 -1
  3. package/autoform.js +5 -1
  4. package/autoform.js.map +2 -2
  5. package/autogrid-columns.d.ts.map +1 -1
  6. package/autogrid-columns.js +3 -3
  7. package/autogrid-columns.js.map +2 -2
  8. package/autogrid.d.ts +7 -1
  9. package/autogrid.d.ts.map +1 -1
  10. package/autogrid.js +5 -0
  11. package/autogrid.js.map +2 -2
  12. package/index.js +1 -1
  13. package/package.json +7 -6
  14. package/util.js +1 -1
package/autoform.d.ts CHANGED
@@ -147,6 +147,13 @@ export type AutoFormProps<M extends AbstractModel = AbstractModel> = ComponentSt
147
147
  * but don't exist in the model, will be ignored.
148
148
  */
149
149
  visibleFields?: string[];
150
+ /**
151
+ * Defines the fields to hide in the form, keeping the default order. This takes
152
+ * an array of property names. Properties that are not included in this
153
+ * array will not be hidden in the form, and properties that are included,
154
+ * but don't exist in the model, will be ignored.
155
+ */
156
+ hiddenFields?: string[];
150
157
  /**
151
158
  * Allows to customize the FormLayout used by default. This is especially useful
152
159
  * to define the `responsiveSteps`. See the
@@ -224,5 +231,5 @@ export type AutoFormProps<M extends AbstractModel = AbstractModel> = ComponentSt
224
231
  * />
225
232
  * ```
226
233
  */
227
- export declare function AutoForm<M extends AbstractModel>({ service, model, itemIdProperty, item, onSubmitError, onSubmitSuccess, disabled, layoutRenderer: LayoutRenderer, visibleFields, formLayoutProps, fieldOptions, style, id, className, deleteButtonVisible, onDeleteSuccess, onDeleteError, }: AutoFormProps<M>): JSX.Element;
234
+ export declare function AutoForm<M extends AbstractModel>({ service, model, itemIdProperty, item, onSubmitError, onSubmitSuccess, disabled, layoutRenderer: LayoutRenderer, visibleFields, hiddenFields, formLayoutProps, fieldOptions, style, id, className, deleteButtonVisible, onDeleteSuccess, onDeleteError, }: AutoFormProps<M>): JSX.Element;
228
235
  //# sourceMappingURL=autoform.d.ts.map
package/autoform.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"autoform.d.ts","sourceRoot":"","sources":["src/autoform.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"autoform.d.ts","sourceRoot":"","sources":["src/autoform.tsx"],"names":[],"mappings":"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"}
package/autoform.js CHANGED
@@ -27,6 +27,7 @@ function AutoForm({
27
27
  disabled,
28
28
  layoutRenderer: LayoutRenderer,
29
29
  visibleFields,
30
+ hiddenFields,
30
31
  formLayoutProps,
31
32
  fieldOptions,
32
33
  style,
@@ -136,7 +137,10 @@ function AutoForm({
136
137
  propertyInfo.name
137
138
  );
138
139
  }
139
- const visibleProperties = visibleFields ? modelInfo.getProperties(visibleFields) : getDefaultProperties(modelInfo);
140
+ let visibleProperties = visibleFields ? modelInfo.getProperties(visibleFields) : getDefaultProperties(modelInfo);
141
+ if (hiddenFields) {
142
+ visibleProperties = visibleProperties.filter(({ name }) => !hiddenFields.includes(name));
143
+ }
140
144
  const fields = visibleProperties.map(createAutoFormField);
141
145
  const layout = LayoutRenderer ? /* @__PURE__ */ jsx(LayoutRenderer, { form, children: fields }) : /* @__PURE__ */ jsx(FormLayout, { ...formLayoutProps, children: fields });
142
146
  return /* @__PURE__ */ jsxs("div", { className: `auto-form ${className ?? ""}`, id, style, "data-testid": "auto-form", children: [
package/autoform.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["src/autoform.tsx"],
4
- "sourcesContent": ["import { EndpointError } from '@vaadin/hilla-frontend';\nimport { type AbstractModel, type DetachedModelConstructor, ValidationError, type Value } from '@vaadin/hilla-lit-form';\nimport { useForm, type UseFormResult } from '@vaadin/hilla-react-form';\nimport { Button } from '@vaadin/react-components/Button.js';\nimport { ConfirmDialog } from '@vaadin/react-components/ConfirmDialog';\nimport { FormLayout } from '@vaadin/react-components/FormLayout';\nimport { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';\nimport {\n type ComponentType,\n type JSX,\n type KeyboardEvent,\n type ReactElement,\n useEffect,\n useMemo,\n useState,\n} from 'react';\nimport { AutoFormField, type AutoFormFieldProps, type FieldOptions } from './autoform-field.js';\nimport css from './autoform.obj.js';\nimport type { FormService } from './crud.js';\nimport { getDefaultProperties, ModelInfo, type PropertyInfo } from './model-info.js';\nimport { type ComponentStyleProps, registerStylesheet } from './util.js';\n\nregisterStylesheet(css);\n\nexport const emptyItem = Symbol();\n\n/**\n * An event that is fired when an error occurs while submitting the form.\n */\nexport type SubmitErrorEvent = {\n /**\n * The error that occurred.\n */\n error: EndpointError;\n /**\n * A function that can be used to set a custom error message. This will be\n * shown in the form at the same position as the default error message.\n * You are not required to call this function if you want to handle the\n * error differently.\n */\n setMessage(message: string): void;\n};\n\n/**\n * An event that is fired when the form has been successfully submitted.\n */\nexport type SubmitEvent<TItem> = {\n /**\n * The item that was submitted, as returned by the service.\n */\n item: TItem;\n};\n\n/**\n * An event that is fired when an error occurs while deleting an item.\n */\nexport type DeleteErrorEvent = {\n /**\n * The error that occurred.\n */\n error: EndpointError;\n /**\n * A function that can be used to set a custom error message. This will be\n * shown in the form at the same position as the default error message.\n * You are not required to call this function if you want to handle the\n * error differently.\n */\n setMessage(message: string): void;\n};\n\n/**\n * An event that is fired when the form has been successfully deleted.\n */\nexport type DeleteEvent<TItem> = {\n /**\n * The item that was deleted, as returned by the service.\n */\n item: TItem;\n};\n\nexport type AutoFormLayoutRendererProps<M extends AbstractModel> = Readonly<{\n form: UseFormResult<M>;\n children: ReadonlyArray<ReactElement<AutoFormFieldProps>>;\n}>;\n\nexport type AutoFormProps<M extends AbstractModel = AbstractModel> = ComponentStyleProps &\n Readonly<{\n /**\n * The service to use for saving and deleting items. This must be a\n * TypeScript service that has been generated by Hilla from a backend Java\n * service that implements the `com.vaadin.hilla.crud.FormService` interface.\n */\n service: FormService<Value<M>>;\n /**\n * The entity model to use, which determines which fields to show in the\n * form. This must be a Typescript model class that has been generated by\n * Hilla from a backend Java class. The model must match with the type of\n * the items handled by the service. For example, a `PersonModel` can be\n * used with a service that handles `Person` instances.\n *\n * By default, the form shows fields for all properties of the model which\n * have a type that is supported. Use the `visibleFields` option to customize\n * which fields to show and in which order.\n */\n model: DetachedModelConstructor<M>;\n /**\n * The property to use to detect an item's ID. The item ID is required for\n * deleting items via the `FormService.delete` method. The delete button\n * will not be shown if no item ID can be found.\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 * The item to edit in the form. The form fields are automatically populated\n * with values from the item's properties. In order to create a new item,\n * either pass `null`, or leave this prop as undefined.\n *\n * Use the `onSubmitSuccess` callback to get notified when the item has been\n * saved.\n *\n * When submitting a new item (i.e. when `item` is null or undefined), the\n * form will be automatically cleared, allowing to submit another new item.\n * In order to keep editing the same item after submitting, set the `item`\n * prop to the new item.\n */\n item?: Value<M> | typeof emptyItem | null;\n /**\n * Whether the form should be disabled. This disables all form fields and\n * all buttons.\n */\n disabled?: boolean;\n /**\n * Allows to customize the layout of the form by providing a custom\n * renderer. The renderer receives the form instance and the pre-rendered\n * fields as props. The renderer can either reuse the pre-rendered fields in\n * the custom layout, or render custom fields and connect them to the form\n * manually.\n *\n * Check the component documentation for details and examples.\n *\n * Example using pre-rendered fields:\n * ```tsx\n * <AutoForm layoutRenderer={({ children }) =>\n * <VerticalLayout>\n * {children}\n * <p>All data is collected anonymously.</p>\n * </VerticalLayout>\n * } />\n * ```\n *\n * Example rendering custom fields:\n * ```tsx\n * <AutoForm layoutRenderer={({ form }) =>\n * <VerticalLayout>\n * <TextField {...form.field(form.model.name)} />\n * ...\n * </VerticalLayout>\n * } />\n * ```\n */\n layoutRenderer?: ComponentType<AutoFormLayoutRendererProps<M>>;\n /**\n * Defines the fields to show in the form, and in which order. This takes\n * an array of property names. Properties that are not included in this\n * array will not be shown in the form, and properties that are included,\n * but don't exist in the model, will be ignored.\n */\n visibleFields?: string[];\n /**\n * Allows to customize the FormLayout used by default. This is especially useful\n * to define the `responsiveSteps`. See the\n * {@link https://hilla.dev/docs/react/components/form-layout | FormLayout documentation}\n * for details.\n */\n formLayoutProps?: ComponentStyleProps & Pick<Parameters<typeof FormLayout>[0], 'responsiveSteps'>;\n /**\n * Allows to customize individual fields of the form. This takes an object\n * where the keys are property names, and the values are options for the\n * respective field for editing that property.\n */\n fieldOptions?: Record<string, FieldOptions>;\n /**\n * Whether to show the delete button in the form. This is disabled by\n * default. If enabled, the delete button will only be shown when editing\n * an existing item, which means that `item` is not null. The delete button\n * will also only be shown if an item has a discernible ID. See the\n * `itemIdProperty` prop for details how the item ID is detected.\n *\n * Use the `onDeleteSuccess` callback to get notified when the item has been\n * deleted.\n *\n * NOTE: This only hides the button, it does not prevent from calling the\n * delete method on the service. To completely disable deleting, you must\n * override the `delete` method in the backend Java service to either throw\n * an exception or annotate it with `@DenyAll` to prevent access.\n */\n deleteButtonVisible?: boolean;\n /**\n * A callback that will be called if an unexpected error occurs while\n * submitting the form.\n *\n * Note that this will not be called for validation errors, which are\n * handled automatically.\n */\n onSubmitError?({ error }: SubmitErrorEvent): void;\n /**\n * A callback that will be called after the form has been successfully\n * submitted and the item has been saved.\n *\n * When submitting a new item (i.e. when `item` is null or undefined), the\n * form will be automatically cleared, allowing to submit another new item.\n * In order to keep editing the same item after submitting, set the `item`\n * prop to the new item.\n */\n onSubmitSuccess?({ item }: SubmitEvent<Value<M>>): void;\n /**\n * A callback that will be called if an unexpected error occurs while\n * deleting an item.\n */\n onDeleteError?({ error }: DeleteErrorEvent): void;\n /**\n * A callback that will be called after the form has been successfully\n * deleted.\n */\n onDeleteSuccess?({ item }: DeleteEvent<Value<M>>): void;\n }>;\n\n/**\n * Auto Form is a component that automatically generates a form for editing,\n * updating and deleting items from a backend service.\n *\n * Example usage:\n * ```tsx\n * import { AutoForm } from '@vaadin/hilla-react-crud';\n * import PersonService from 'Frontend/generated/endpoints';\n * import PersonModel from 'Frontend/generated/com/example/application/Person';\n *\n * <AutoForm\n * service={PersonService}\n * model={PersonModel}\n * onSubmitSuccess={({ item }) => {\n * console.log('Submitted item:', item);\n * }}\n * />\n * ```\n */\nexport function AutoForm<M extends AbstractModel>({\n service,\n model,\n itemIdProperty,\n item = emptyItem,\n onSubmitError,\n onSubmitSuccess,\n disabled,\n layoutRenderer: LayoutRenderer,\n visibleFields,\n formLayoutProps,\n fieldOptions,\n style,\n id,\n className,\n deleteButtonVisible,\n onDeleteSuccess,\n onDeleteError,\n}: AutoFormProps<M>): JSX.Element {\n const form = useForm(model, {\n onSubmit: async (formItem) => service.save(formItem),\n });\n const [formError, setFormError] = useState<JSX.Element | string>('');\n const [showDeleteDialog, setShowDeleteDialog] = useState(false);\n const modelInfo = useMemo(() => new ModelInfo(model, itemIdProperty), [model]);\n\n const isEditMode = item !== undefined && item !== null && item !== emptyItem;\n const showDeleteButton = deleteButtonVisible && isEditMode && modelInfo.idProperty;\n const isSubmitDisabled = !!disabled || (isEditMode && !form.dirty);\n\n useEffect(() => {\n if (item !== emptyItem) {\n form.read(item);\n } else {\n form.clear();\n }\n }, [item]);\n\n function handleSubmitError(error: unknown) {\n if (error instanceof ValidationError) {\n const nonPropertyErrorMessages = error.errors\n .filter((validationError) => !validationError.property)\n .map((validationError) => validationError.validatorMessage ?? validationError.message);\n if (nonPropertyErrorMessages.length > 0) {\n setFormError(\n <>\n Validation errors:\n <ul>\n {nonPropertyErrorMessages.map((message, index) => (\n <li key={index}>{message}</li>\n ))}\n </ul>\n </>,\n );\n }\n } else if (error instanceof EndpointError) {\n if (onSubmitError) {\n onSubmitError({ error, setMessage: setFormError });\n } else {\n setFormError(error.message);\n }\n } else {\n throw error;\n }\n }\n\n async function handleSubmit(): Promise<void> {\n try {\n setFormError('');\n const newItem = await form.submit();\n if (newItem === undefined) {\n // If update returns an empty object, then no update was performed\n throw new EndpointError('No update performed');\n } else if (onSubmitSuccess) {\n onSubmitSuccess({ item: newItem });\n }\n // Automatically clear the form after submitting a new item.\n // Otherwise, there would be no way for the developer to clear it, as the\n // there is no new value to set for the item prop to trigger the above\n // effect in case the prop is already null, undefined or the empty item.\n if (!item || item === emptyItem) {\n form.clear();\n }\n } catch (error) {\n handleSubmitError(error);\n }\n }\n\n function deleteItem() {\n setShowDeleteDialog(true);\n }\n\n async function confirmDelete() {\n // At this point, item can not be null or emptyItem\n const deletedItem = item as Value<M>;\n try {\n const idProperty = modelInfo.idProperty!;\n // eslint-disable-next-line\n const id = (item as any)[idProperty.name];\n await service.delete(id);\n if (onDeleteSuccess) {\n onDeleteSuccess({ item: deletedItem });\n }\n } catch (error) {\n if (error instanceof EndpointError) {\n if (onDeleteError) {\n onDeleteError({ error, setMessage: setFormError });\n } else {\n setFormError(error.message);\n }\n } else {\n throw error;\n }\n } finally {\n setShowDeleteDialog(false);\n }\n }\n\n function cancelDelete() {\n setShowDeleteDialog(false);\n }\n\n const handleKeyDown = (event: KeyboardEvent): void => {\n if (event.key === 'Enter' && !isSubmitDisabled) {\n // eslint-disable-next-line no-void\n void handleSubmit();\n }\n };\n\n function createAutoFormField(propertyInfo: PropertyInfo): JSX.Element {\n const fieldOptionsForProperty = fieldOptions?.[propertyInfo.name] ?? {};\n\n return (\n <AutoFormField\n key={propertyInfo.name}\n propertyInfo={propertyInfo}\n form={form}\n disabled={disabled}\n options={fieldOptionsForProperty}\n />\n );\n }\n\n const visibleProperties = visibleFields ? modelInfo.getProperties(visibleFields) : getDefaultProperties(modelInfo);\n\n const fields = visibleProperties.map(createAutoFormField);\n\n const layout = LayoutRenderer ? (\n <LayoutRenderer form={form}>{fields}</LayoutRenderer>\n ) : (\n <FormLayout {...formLayoutProps}>{fields}</FormLayout>\n );\n\n return (\n <div className={`auto-form ${className ?? ''}`} id={id} style={style} data-testid=\"auto-form\">\n <VerticalLayout className=\"auto-form-fields\" onKeyDown={handleKeyDown}>\n {layout}\n {formError ? <div style={{ color: 'var(--lumo-error-color)' }}>{formError}</div> : <></>}\n </VerticalLayout>\n <div className=\"auto-form-toolbar\">\n <Button\n theme=\"primary\"\n disabled={isSubmitDisabled}\n // eslint-disable-next-line @typescript-eslint/no-misused-promises\n onClick={handleSubmit}\n >\n Submit\n </Button>\n {form.dirty ? (\n <Button theme=\"tertiary\" onClick={() => form.reset()}>\n Discard\n </Button>\n ) : null}\n {showDeleteButton && (\n <Button className=\"auto-form-delete-button\" theme=\"tertiary error\" onClick={deleteItem}>\n Delete...\n </Button>\n )}\n </div>\n {showDeleteDialog && (\n <ConfirmDialog\n opened\n header=\"Delete item\"\n confirmTheme=\"error\"\n cancelButtonVisible\n // eslint-disable-next-line\n onConfirm={confirmDelete}\n onCancel={cancelDelete}\n >\n Are you sure you want to delete the selected item?\n </ConfirmDialog>\n )}\n </div>\n );\n}\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import { EndpointError } from '@vaadin/hilla-frontend';\nimport { type AbstractModel, type DetachedModelConstructor, ValidationError, type Value } from '@vaadin/hilla-lit-form';\nimport { useForm, type UseFormResult } from '@vaadin/hilla-react-form';\nimport { Button } from '@vaadin/react-components/Button.js';\nimport { ConfirmDialog } from '@vaadin/react-components/ConfirmDialog';\nimport { FormLayout } from '@vaadin/react-components/FormLayout';\nimport { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';\nimport {\n type ComponentType,\n type JSX,\n type KeyboardEvent,\n type ReactElement,\n useEffect,\n useMemo,\n useState,\n} from 'react';\nimport { AutoFormField, type AutoFormFieldProps, type FieldOptions } from './autoform-field.js';\nimport css from './autoform.obj.js';\nimport type { FormService } from './crud.js';\nimport { getDefaultProperties, ModelInfo, type PropertyInfo } from './model-info.js';\nimport { type ComponentStyleProps, registerStylesheet } from './util.js';\n\nregisterStylesheet(css);\n\nexport const emptyItem = Symbol();\n\n/**\n * An event that is fired when an error occurs while submitting the form.\n */\nexport type SubmitErrorEvent = {\n /**\n * The error that occurred.\n */\n error: EndpointError;\n /**\n * A function that can be used to set a custom error message. This will be\n * shown in the form at the same position as the default error message.\n * You are not required to call this function if you want to handle the\n * error differently.\n */\n setMessage(message: string): void;\n};\n\n/**\n * An event that is fired when the form has been successfully submitted.\n */\nexport type SubmitEvent<TItem> = {\n /**\n * The item that was submitted, as returned by the service.\n */\n item: TItem;\n};\n\n/**\n * An event that is fired when an error occurs while deleting an item.\n */\nexport type DeleteErrorEvent = {\n /**\n * The error that occurred.\n */\n error: EndpointError;\n /**\n * A function that can be used to set a custom error message. This will be\n * shown in the form at the same position as the default error message.\n * You are not required to call this function if you want to handle the\n * error differently.\n */\n setMessage(message: string): void;\n};\n\n/**\n * An event that is fired when the form has been successfully deleted.\n */\nexport type DeleteEvent<TItem> = {\n /**\n * The item that was deleted, as returned by the service.\n */\n item: TItem;\n};\n\nexport type AutoFormLayoutRendererProps<M extends AbstractModel> = Readonly<{\n form: UseFormResult<M>;\n children: ReadonlyArray<ReactElement<AutoFormFieldProps>>;\n}>;\n\nexport type AutoFormProps<M extends AbstractModel = AbstractModel> = ComponentStyleProps &\n Readonly<{\n /**\n * The service to use for saving and deleting items. This must be a\n * TypeScript service that has been generated by Hilla from a backend Java\n * service that implements the `com.vaadin.hilla.crud.FormService` interface.\n */\n service: FormService<Value<M>>;\n /**\n * The entity model to use, which determines which fields to show in the\n * form. This must be a Typescript model class that has been generated by\n * Hilla from a backend Java class. The model must match with the type of\n * the items handled by the service. For example, a `PersonModel` can be\n * used with a service that handles `Person` instances.\n *\n * By default, the form shows fields for all properties of the model which\n * have a type that is supported. Use the `visibleFields` option to customize\n * which fields to show and in which order.\n */\n model: DetachedModelConstructor<M>;\n /**\n * The property to use to detect an item's ID. The item ID is required for\n * deleting items via the `FormService.delete` method. The delete button\n * will not be shown if no item ID can be found.\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 * The item to edit in the form. The form fields are automatically populated\n * with values from the item's properties. In order to create a new item,\n * either pass `null`, or leave this prop as undefined.\n *\n * Use the `onSubmitSuccess` callback to get notified when the item has been\n * saved.\n *\n * When submitting a new item (i.e. when `item` is null or undefined), the\n * form will be automatically cleared, allowing to submit another new item.\n * In order to keep editing the same item after submitting, set the `item`\n * prop to the new item.\n */\n item?: Value<M> | typeof emptyItem | null;\n /**\n * Whether the form should be disabled. This disables all form fields and\n * all buttons.\n */\n disabled?: boolean;\n /**\n * Allows to customize the layout of the form by providing a custom\n * renderer. The renderer receives the form instance and the pre-rendered\n * fields as props. The renderer can either reuse the pre-rendered fields in\n * the custom layout, or render custom fields and connect them to the form\n * manually.\n *\n * Check the component documentation for details and examples.\n *\n * Example using pre-rendered fields:\n * ```tsx\n * <AutoForm layoutRenderer={({ children }) =>\n * <VerticalLayout>\n * {children}\n * <p>All data is collected anonymously.</p>\n * </VerticalLayout>\n * } />\n * ```\n *\n * Example rendering custom fields:\n * ```tsx\n * <AutoForm layoutRenderer={({ form }) =>\n * <VerticalLayout>\n * <TextField {...form.field(form.model.name)} />\n * ...\n * </VerticalLayout>\n * } />\n * ```\n */\n layoutRenderer?: ComponentType<AutoFormLayoutRendererProps<M>>;\n /**\n * Defines the fields to show in the form, and in which order. This takes\n * an array of property names. Properties that are not included in this\n * array will not be shown in the form, and properties that are included,\n * but don't exist in the model, will be ignored.\n */\n visibleFields?: string[];\n /**\n * Defines the fields to hide in the form, keeping the default order. This takes\n * an array of property names. Properties that are not included in this\n * array will not be hidden in the form, and properties that are included,\n * but don't exist in the model, will be ignored.\n */\n hiddenFields?: string[];\n /**\n * Allows to customize the FormLayout used by default. This is especially useful\n * to define the `responsiveSteps`. See the\n * {@link https://hilla.dev/docs/react/components/form-layout | FormLayout documentation}\n * for details.\n */\n formLayoutProps?: ComponentStyleProps & Pick<Parameters<typeof FormLayout>[0], 'responsiveSteps'>;\n /**\n * Allows to customize individual fields of the form. This takes an object\n * where the keys are property names, and the values are options for the\n * respective field for editing that property.\n */\n fieldOptions?: Record<string, FieldOptions>;\n /**\n * Whether to show the delete button in the form. This is disabled by\n * default. If enabled, the delete button will only be shown when editing\n * an existing item, which means that `item` is not null. The delete button\n * will also only be shown if an item has a discernible ID. See the\n * `itemIdProperty` prop for details how the item ID is detected.\n *\n * Use the `onDeleteSuccess` callback to get notified when the item has been\n * deleted.\n *\n * NOTE: This only hides the button, it does not prevent from calling the\n * delete method on the service. To completely disable deleting, you must\n * override the `delete` method in the backend Java service to either throw\n * an exception or annotate it with `@DenyAll` to prevent access.\n */\n deleteButtonVisible?: boolean;\n /**\n * A callback that will be called if an unexpected error occurs while\n * submitting the form.\n *\n * Note that this will not be called for validation errors, which are\n * handled automatically.\n */\n onSubmitError?({ error }: SubmitErrorEvent): void;\n /**\n * A callback that will be called after the form has been successfully\n * submitted and the item has been saved.\n *\n * When submitting a new item (i.e. when `item` is null or undefined), the\n * form will be automatically cleared, allowing to submit another new item.\n * In order to keep editing the same item after submitting, set the `item`\n * prop to the new item.\n */\n onSubmitSuccess?({ item }: SubmitEvent<Value<M>>): void;\n /**\n * A callback that will be called if an unexpected error occurs while\n * deleting an item.\n */\n onDeleteError?({ error }: DeleteErrorEvent): void;\n /**\n * A callback that will be called after the form has been successfully\n * deleted.\n */\n onDeleteSuccess?({ item }: DeleteEvent<Value<M>>): void;\n }>;\n\n/**\n * Auto Form is a component that automatically generates a form for editing,\n * updating and deleting items from a backend service.\n *\n * Example usage:\n * ```tsx\n * import { AutoForm } from '@vaadin/hilla-react-crud';\n * import PersonService from 'Frontend/generated/endpoints';\n * import PersonModel from 'Frontend/generated/com/example/application/Person';\n *\n * <AutoForm\n * service={PersonService}\n * model={PersonModel}\n * onSubmitSuccess={({ item }) => {\n * console.log('Submitted item:', item);\n * }}\n * />\n * ```\n */\nexport function AutoForm<M extends AbstractModel>({\n service,\n model,\n itemIdProperty,\n item = emptyItem,\n onSubmitError,\n onSubmitSuccess,\n disabled,\n layoutRenderer: LayoutRenderer,\n visibleFields,\n hiddenFields,\n formLayoutProps,\n fieldOptions,\n style,\n id,\n className,\n deleteButtonVisible,\n onDeleteSuccess,\n onDeleteError,\n}: AutoFormProps<M>): JSX.Element {\n const form = useForm(model, {\n onSubmit: async (formItem) => service.save(formItem),\n });\n const [formError, setFormError] = useState<JSX.Element | string>('');\n const [showDeleteDialog, setShowDeleteDialog] = useState(false);\n const modelInfo = useMemo(() => new ModelInfo(model, itemIdProperty), [model]);\n\n const isEditMode = item !== undefined && item !== null && item !== emptyItem;\n const showDeleteButton = deleteButtonVisible && isEditMode && modelInfo.idProperty;\n const isSubmitDisabled = !!disabled || (isEditMode && !form.dirty);\n\n useEffect(() => {\n if (item !== emptyItem) {\n form.read(item);\n } else {\n form.clear();\n }\n }, [item]);\n\n function handleSubmitError(error: unknown) {\n if (error instanceof ValidationError) {\n const nonPropertyErrorMessages = error.errors\n .filter((validationError) => !validationError.property)\n .map((validationError) => validationError.validatorMessage ?? validationError.message);\n if (nonPropertyErrorMessages.length > 0) {\n setFormError(\n <>\n Validation errors:\n <ul>\n {nonPropertyErrorMessages.map((message, index) => (\n <li key={index}>{message}</li>\n ))}\n </ul>\n </>,\n );\n }\n } else if (error instanceof EndpointError) {\n if (onSubmitError) {\n onSubmitError({ error, setMessage: setFormError });\n } else {\n setFormError(error.message);\n }\n } else {\n throw error;\n }\n }\n\n async function handleSubmit(): Promise<void> {\n try {\n setFormError('');\n const newItem = await form.submit();\n if (newItem === undefined) {\n // If update returns an empty object, then no update was performed\n throw new EndpointError('No update performed');\n } else if (onSubmitSuccess) {\n onSubmitSuccess({ item: newItem });\n }\n // Automatically clear the form after submitting a new item.\n // Otherwise, there would be no way for the developer to clear it, as the\n // there is no new value to set for the item prop to trigger the above\n // effect in case the prop is already null, undefined or the empty item.\n if (!item || item === emptyItem) {\n form.clear();\n }\n } catch (error) {\n handleSubmitError(error);\n }\n }\n\n function deleteItem() {\n setShowDeleteDialog(true);\n }\n\n async function confirmDelete() {\n // At this point, item can not be null or emptyItem\n const deletedItem = item as Value<M>;\n try {\n const idProperty = modelInfo.idProperty!;\n // eslint-disable-next-line\n const id = (item as any)[idProperty.name];\n await service.delete(id);\n if (onDeleteSuccess) {\n onDeleteSuccess({ item: deletedItem });\n }\n } catch (error) {\n if (error instanceof EndpointError) {\n if (onDeleteError) {\n onDeleteError({ error, setMessage: setFormError });\n } else {\n setFormError(error.message);\n }\n } else {\n throw error;\n }\n } finally {\n setShowDeleteDialog(false);\n }\n }\n\n function cancelDelete() {\n setShowDeleteDialog(false);\n }\n\n const handleKeyDown = (event: KeyboardEvent): void => {\n if (event.key === 'Enter' && !isSubmitDisabled) {\n // eslint-disable-next-line no-void\n void handleSubmit();\n }\n };\n\n function createAutoFormField(propertyInfo: PropertyInfo): JSX.Element {\n const fieldOptionsForProperty = fieldOptions?.[propertyInfo.name] ?? {};\n\n return (\n <AutoFormField\n key={propertyInfo.name}\n propertyInfo={propertyInfo}\n form={form}\n disabled={disabled}\n options={fieldOptionsForProperty}\n />\n );\n }\n\n let visibleProperties = visibleFields ? modelInfo.getProperties(visibleFields) : getDefaultProperties(modelInfo);\n\n // When using `hiddenFields`, remove fields to hide using their `name`\n if (hiddenFields) {\n visibleProperties = visibleProperties.filter(({ name }) => !hiddenFields.includes(name));\n }\n\n const fields = visibleProperties.map(createAutoFormField);\n\n const layout = LayoutRenderer ? (\n <LayoutRenderer form={form}>{fields}</LayoutRenderer>\n ) : (\n <FormLayout {...formLayoutProps}>{fields}</FormLayout>\n );\n\n return (\n <div className={`auto-form ${className ?? ''}`} id={id} style={style} data-testid=\"auto-form\">\n <VerticalLayout className=\"auto-form-fields\" onKeyDown={handleKeyDown}>\n {layout}\n {formError ? <div style={{ color: 'var(--lumo-error-color)' }}>{formError}</div> : <></>}\n </VerticalLayout>\n <div className=\"auto-form-toolbar\">\n <Button\n theme=\"primary\"\n disabled={isSubmitDisabled}\n // eslint-disable-next-line @typescript-eslint/no-misused-promises\n onClick={handleSubmit}\n >\n Submit\n </Button>\n {form.dirty ? (\n <Button theme=\"tertiary\" onClick={() => form.reset()}>\n Discard\n </Button>\n ) : null}\n {showDeleteButton && (\n <Button className=\"auto-form-delete-button\" theme=\"tertiary error\" onClick={deleteItem}>\n Delete...\n </Button>\n )}\n </div>\n {showDeleteDialog && (\n <ConfirmDialog\n opened\n header=\"Delete item\"\n confirmTheme=\"error\"\n cancelButtonVisible\n // eslint-disable-next-line\n onConfirm={confirmDelete}\n onCancel={cancelDelete}\n >\n Are you sure you want to delete the selected item?\n </ConfirmDialog>\n )}\n </div>\n );\n}\n"],
5
+ "mappings": "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",
6
6
  "names": ["id"]
7
7
  }
package/autogrid-columns.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"autogrid-columns.d.ts","sourceRoot":"","sources":["src/autogrid-columns.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AAW9E,OAAO,EAIL,KAAK,iBAAiB,EAKvB,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAEjD,MAAM,MAAM,aAAa,GAAG,iBAAiB,GAAG,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,EAAE,yBAAyB,CAAC,CAAC;AA+EtG,wBAAgB,gBAAgB,CAC9B,YAAY,EAAE,YAAY,EAC1B,mBAAmB,EAAE,aAAa,GAAG,SAAS,GAC7C,aAAa,CAWf"}
1
+ {"version":3,"file":"autogrid-columns.d.ts","sourceRoot":"","sources":["src/autogrid-columns.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AAW9E,OAAO,EAIL,KAAK,iBAAiB,EAKvB,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAEjD,MAAM,MAAM,aAAa,GAAG,iBAAiB,GAAG,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,EAAE,yBAAyB,CAAC,CAAC;AAgFtG,wBAAgB,gBAAgB,CAC9B,YAAY,EAAE,YAAY,EAC1B,mBAAmB,EAAE,aAAa,GAAG,SAAS,GAC7C,aAAa,CAWf"}
package/autogrid-columns.js CHANGED
@@ -17,7 +17,7 @@ import {
17
17
  StringHeaderFilter,
18
18
  TimeHeaderFilter
19
19
  } from "./header-filter";
20
- function getTypeColumnOptions(propertyInfo) {
20
+ function getTypeColumnOptions(propertyInfo, customColumnOptions) {
21
21
  switch (propertyInfo.type) {
22
22
  case "integer":
23
23
  return {
@@ -81,7 +81,7 @@ function getTypeColumnOptions(propertyInfo) {
81
81
  case "object":
82
82
  return {
83
83
  autoWidth: true,
84
- renderer: AutoGridJsonRenderer,
84
+ renderer: customColumnOptions?.path !== void 0 && customColumnOptions.renderer == null ? null : AutoGridJsonRenderer,
85
85
  headerFilterRenderer: NoHeaderFilter
86
86
  };
87
87
  default:
@@ -92,7 +92,7 @@ function getTypeColumnOptions(propertyInfo) {
92
92
  }
93
93
  }
94
94
  function getColumnOptions(propertyInfo, customColumnOptions) {
95
- const typeColumnOptions = getTypeColumnOptions(propertyInfo);
95
+ const typeColumnOptions = getTypeColumnOptions(propertyInfo, customColumnOptions);
96
96
  const headerFilterRenderer = customColumnOptions?.filterable === false ? NoHeaderFilter : typeColumnOptions.headerFilterRenderer ?? NoHeaderFilter;
97
97
  return customColumnOptions ? { ...typeColumnOptions, headerFilterRenderer, ...customColumnOptions } : typeColumnOptions;
98
98
  }
package/autogrid-columns.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["src/autogrid-columns.tsx"],
4
- "sourcesContent": ["import type { GridColumnProps } from '@vaadin/react-components/GridColumn.js';\nimport {\n AutoGridBooleanRenderer,\n AutoGridDateRenderer,\n AutoGridDateTimeRenderer,\n AutoGridDecimalRenderer,\n AutoGridEnumRenderer,\n AutoGridIntegerRenderer,\n AutoGridJsonRenderer,\n AutoGridTimeRenderer,\n} from './autogrid-renderers';\nimport {\n BooleanHeaderFilter,\n DateHeaderFilter,\n EnumHeaderFilter,\n type HeaderFilterProps,\n NoHeaderFilter,\n NumberHeaderFilter,\n StringHeaderFilter,\n TimeHeaderFilter,\n} from './header-filter';\nimport type { PropertyInfo } from './model-info';\n\nexport type ColumnOptions = HeaderFilterProps & Omit<GridColumnProps<any>, 'dangerouslySetInnerHTML'>;\n\n// eslint-disable-next-line consistent-return\nfunction getTypeColumnOptions(propertyInfo: PropertyInfo): ColumnOptions {\n // eslint-disable-next-line default-case\n switch (propertyInfo.type) {\n case 'integer':\n return {\n autoWidth: true,\n textAlign: 'end',\n flexGrow: 0,\n renderer: AutoGridIntegerRenderer,\n headerFilterRenderer: NumberHeaderFilter,\n };\n case 'decimal':\n return {\n autoWidth: true,\n textAlign: 'end',\n flexGrow: 0,\n renderer: AutoGridDecimalRenderer,\n headerFilterRenderer: NumberHeaderFilter,\n };\n case 'boolean':\n return {\n autoWidth: true,\n textAlign: 'end',\n flexGrow: 0,\n renderer: AutoGridBooleanRenderer,\n headerFilterRenderer: BooleanHeaderFilter,\n };\n case 'date':\n return {\n autoWidth: true,\n textAlign: 'end',\n flexGrow: 0,\n renderer: AutoGridDateRenderer,\n headerFilterRenderer: DateHeaderFilter,\n };\n case 'time':\n return {\n autoWidth: true,\n textAlign: 'end',\n flexGrow: 0,\n renderer: AutoGridTimeRenderer,\n headerFilterRenderer: TimeHeaderFilter,\n };\n case 'datetime':\n return {\n autoWidth: true,\n textAlign: 'end',\n flexGrow: 0,\n renderer: AutoGridDateTimeRenderer,\n headerFilterRenderer: DateHeaderFilter,\n };\n case 'enum':\n return {\n autoWidth: true,\n renderer: AutoGridEnumRenderer,\n headerFilterRenderer: EnumHeaderFilter,\n };\n case 'string':\n return {\n autoWidth: true,\n headerFilterRenderer: StringHeaderFilter,\n };\n case 'object':\n return {\n autoWidth: true,\n renderer: AutoGridJsonRenderer,\n headerFilterRenderer: NoHeaderFilter,\n };\n default:\n return {\n autoWidth: true,\n headerFilterRenderer: NoHeaderFilter,\n };\n }\n}\n\nexport function getColumnOptions(\n propertyInfo: PropertyInfo,\n customColumnOptions: ColumnOptions | undefined,\n): ColumnOptions {\n const typeColumnOptions = getTypeColumnOptions(propertyInfo);\n const headerFilterRenderer =\n customColumnOptions?.filterable === false\n ? NoHeaderFilter\n : typeColumnOptions.headerFilterRenderer ?? NoHeaderFilter;\n // TODO: Remove eslint-disable when all TypeScript version issues are resolved\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n return customColumnOptions\n ? { ...typeColumnOptions, headerFilterRenderer, ...customColumnOptions }\n : typeColumnOptions;\n}\n"],
5
- "mappings": "AACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAMP,SAAS,qBAAqB,cAA2C;AAEvE,UAAQ,aAAa,MAAM;AAAA,IACzB,KAAK;AACH,aAAO;AAAA,QACL,WAAW;AAAA,QACX,WAAW;AAAA,QACX,UAAU;AAAA,QACV,UAAU;AAAA,QACV,sBAAsB;AAAA,MACxB;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,WAAW;AAAA,QACX,WAAW;AAAA,QACX,UAAU;AAAA,QACV,UAAU;AAAA,QACV,sBAAsB;AAAA,MACxB;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,WAAW;AAAA,QACX,WAAW;AAAA,QACX,UAAU;AAAA,QACV,UAAU;AAAA,QACV,sBAAsB;AAAA,MACxB;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,WAAW;AAAA,QACX,WAAW;AAAA,QACX,UAAU;AAAA,QACV,UAAU;AAAA,QACV,sBAAsB;AAAA,MACxB;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,WAAW;AAAA,QACX,WAAW;AAAA,QACX,UAAU;AAAA,QACV,UAAU;AAAA,QACV,sBAAsB;AAAA,MACxB;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,WAAW;AAAA,QACX,WAAW;AAAA,QACX,UAAU;AAAA,QACV,UAAU;AAAA,QACV,sBAAsB;AAAA,MACxB;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,WAAW;AAAA,QACX,UAAU;AAAA,QACV,sBAAsB;AAAA,MACxB;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,WAAW;AAAA,QACX,sBAAsB;AAAA,MACxB;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,WAAW;AAAA,QACX,UAAU;AAAA,QACV,sBAAsB;AAAA,MACxB;AAAA,IACF;AACE,aAAO;AAAA,QACL,WAAW;AAAA,QACX,sBAAsB;AAAA,MACxB;AAAA,EACJ;AACF;AAEO,SAAS,iBACd,cACA,qBACe;AACf,QAAM,oBAAoB,qBAAqB,YAAY;AAC3D,QAAM,uBACJ,qBAAqB,eAAe,QAChC,iBACA,kBAAkB,wBAAwB;AAGhD,SAAO,sBACH,EAAE,GAAG,mBAAmB,sBAAsB,GAAG,oBAAoB,IACrE;AACN;",
4
+ "sourcesContent": ["import type { GridColumnProps } from '@vaadin/react-components/GridColumn.js';\nimport {\n AutoGridBooleanRenderer,\n AutoGridDateRenderer,\n AutoGridDateTimeRenderer,\n AutoGridDecimalRenderer,\n AutoGridEnumRenderer,\n AutoGridIntegerRenderer,\n AutoGridJsonRenderer,\n AutoGridTimeRenderer,\n} from './autogrid-renderers';\nimport {\n BooleanHeaderFilter,\n DateHeaderFilter,\n EnumHeaderFilter,\n type HeaderFilterProps,\n NoHeaderFilter,\n NumberHeaderFilter,\n StringHeaderFilter,\n TimeHeaderFilter,\n} from './header-filter';\nimport type { PropertyInfo } from './model-info';\n\nexport type ColumnOptions = HeaderFilterProps & Omit<GridColumnProps<any>, 'dangerouslySetInnerHTML'>;\n\n// eslint-disable-next-line consistent-return\nfunction getTypeColumnOptions(propertyInfo: PropertyInfo, customColumnOptions?: ColumnOptions): ColumnOptions {\n // eslint-disable-next-line default-case\n switch (propertyInfo.type) {\n case 'integer':\n return {\n autoWidth: true,\n textAlign: 'end',\n flexGrow: 0,\n renderer: AutoGridIntegerRenderer,\n headerFilterRenderer: NumberHeaderFilter,\n };\n case 'decimal':\n return {\n autoWidth: true,\n textAlign: 'end',\n flexGrow: 0,\n renderer: AutoGridDecimalRenderer,\n headerFilterRenderer: NumberHeaderFilter,\n };\n case 'boolean':\n return {\n autoWidth: true,\n textAlign: 'end',\n flexGrow: 0,\n renderer: AutoGridBooleanRenderer,\n headerFilterRenderer: BooleanHeaderFilter,\n };\n case 'date':\n return {\n autoWidth: true,\n textAlign: 'end',\n flexGrow: 0,\n renderer: AutoGridDateRenderer,\n headerFilterRenderer: DateHeaderFilter,\n };\n case 'time':\n return {\n autoWidth: true,\n textAlign: 'end',\n flexGrow: 0,\n renderer: AutoGridTimeRenderer,\n headerFilterRenderer: TimeHeaderFilter,\n };\n case 'datetime':\n return {\n autoWidth: true,\n textAlign: 'end',\n flexGrow: 0,\n renderer: AutoGridDateTimeRenderer,\n headerFilterRenderer: DateHeaderFilter,\n };\n case 'enum':\n return {\n autoWidth: true,\n renderer: AutoGridEnumRenderer,\n headerFilterRenderer: EnumHeaderFilter,\n };\n case 'string':\n return {\n autoWidth: true,\n headerFilterRenderer: StringHeaderFilter,\n };\n case 'object':\n return {\n autoWidth: true,\n renderer:\n customColumnOptions?.path !== undefined && customColumnOptions.renderer == null ? null : AutoGridJsonRenderer,\n headerFilterRenderer: NoHeaderFilter,\n };\n default:\n return {\n autoWidth: true,\n headerFilterRenderer: NoHeaderFilter,\n };\n }\n}\n\nexport function getColumnOptions(\n propertyInfo: PropertyInfo,\n customColumnOptions: ColumnOptions | undefined,\n): ColumnOptions {\n const typeColumnOptions = getTypeColumnOptions(propertyInfo, customColumnOptions);\n const headerFilterRenderer =\n customColumnOptions?.filterable === false\n ? NoHeaderFilter\n : typeColumnOptions.headerFilterRenderer ?? NoHeaderFilter;\n // TODO: Remove eslint-disable when all TypeScript version issues are resolved\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n return customColumnOptions\n ? { ...typeColumnOptions, headerFilterRenderer, ...customColumnOptions }\n : typeColumnOptions;\n}\n"],
5
+ "mappings": "AACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAMP,SAAS,qBAAqB,cAA4B,qBAAoD;AAE5G,UAAQ,aAAa,MAAM;AAAA,IACzB,KAAK;AACH,aAAO;AAAA,QACL,WAAW;AAAA,QACX,WAAW;AAAA,QACX,UAAU;AAAA,QACV,UAAU;AAAA,QACV,sBAAsB;AAAA,MACxB;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,WAAW;AAAA,QACX,WAAW;AAAA,QACX,UAAU;AAAA,QACV,UAAU;AAAA,QACV,sBAAsB;AAAA,MACxB;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,WAAW;AAAA,QACX,WAAW;AAAA,QACX,UAAU;AAAA,QACV,UAAU;AAAA,QACV,sBAAsB;AAAA,MACxB;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,WAAW;AAAA,QACX,WAAW;AAAA,QACX,UAAU;AAAA,QACV,UAAU;AAAA,QACV,sBAAsB;AAAA,MACxB;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,WAAW;AAAA,QACX,WAAW;AAAA,QACX,UAAU;AAAA,QACV,UAAU;AAAA,QACV,sBAAsB;AAAA,MACxB;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,WAAW;AAAA,QACX,WAAW;AAAA,QACX,UAAU;AAAA,QACV,UAAU;AAAA,QACV,sBAAsB;AAAA,MACxB;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,WAAW;AAAA,QACX,UAAU;AAAA,QACV,sBAAsB;AAAA,MACxB;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,WAAW;AAAA,QACX,sBAAsB;AAAA,MACxB;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,WAAW;AAAA,QACX,UACE,qBAAqB,SAAS,UAAa,oBAAoB,YAAY,OAAO,OAAO;AAAA,QAC3F,sBAAsB;AAAA,MACxB;AAAA,IACF;AACE,aAAO;AAAA,QACL,WAAW;AAAA,QACX,sBAAsB;AAAA,MACxB;AAAA,EACJ;AACF;AAEO,SAAS,iBACd,cACA,qBACe;AACf,QAAM,oBAAoB,qBAAqB,cAAc,mBAAmB;AAChF,QAAM,uBACJ,qBAAqB,eAAe,QAChC,iBACA,kBAAkB,wBAAwB;AAGhD,SAAO,sBACH,EAAE,GAAG,mBAAmB,sBAAsB,GAAG,oBAAoB,IACrE;AACN;",
6
6
  "names": []
7
7
  }
package/autogrid.d.ts CHANGED
@@ -60,6 +60,12 @@ interface AutoGridOwnProps<TItem> {
60
60
  * can be specified using dot notation, e.g. `address.street`.
61
61
  */
62
62
  visibleColumns?: string[];
63
+ /**
64
+ * Allows to customize which columns to hide. This must be an array of property
65
+ * names that are defined in the model. Nested properties can be specified using
66
+ * dot notation, e.g. `address.street`.
67
+ */
68
+ hiddenColumns?: string[];
63
69
  /**
64
70
  * Disables header filters, which are otherwise enabled by default.
65
71
  */
@@ -107,7 +113,7 @@ interface AutoGridOwnProps<TItem> {
107
113
  footerCountRenderer?: ComponentType<ItemCounts>;
108
114
  }
109
115
  export type AutoGridProps<TItem> = GridProps<TItem> & Readonly<AutoGridOwnProps<TItem>>;
110
- 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;
116
+ declare function AutoGridInner<TItem>({ service, model, itemIdProperty, experimentalFilter, visibleColumns, hiddenColumns, noHeaderFilters, customColumns, columnOptions, rowNumbers, totalCount, filteredCount, footerCountRenderer, ...gridProps }: AutoGridProps<TItem>, ref: ForwardedRef<AutoGridRef<TItem>>): JSX.Element;
111
117
  type AutoGrid = <TItem>(props: AutoGridProps<TItem> & {
112
118
  ref?: ForwardedRef<AutoGridRef<TItem>>;
113
119
  }) => ReturnType<typeof AutoGridInner>;
package/autogrid.d.ts.map CHANGED
@@ -1 +1 @@
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,CAkHb;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"}
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;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB;;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;AA+JxF,iBAAS,aAAa,CAAC,KAAK,EAC1B,EACE,OAAO,EACP,KAAK,EACL,cAAc,EACd,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,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,CAmHb;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 CHANGED
@@ -102,6 +102,9 @@ function useColumns(properties, setColumnFilter, options) {
102
102
  );
103
103
  });
104
104
  columns = addCustomColumns(columns, options, setColumnFilter);
105
+ if (options.hiddenColumns) {
106
+ columns = columns.filter(({ key }) => !(key && options.hiddenColumns?.includes(key)));
107
+ }
105
108
  if (options.rowNumbers) {
106
109
  columns = [
107
110
  /* @__PURE__ */ jsx(GridColumn, { width: "4em", flexGrow: 0, renderer: AutoGridRowNumberRenderer }, "rownumbers"),
@@ -133,6 +136,7 @@ function AutoGridInner({
133
136
  itemIdProperty,
134
137
  experimentalFilter,
135
138
  visibleColumns,
139
+ hiddenColumns,
136
140
  noHeaderFilters,
137
141
  customColumns,
138
142
  columnOptions,
@@ -184,6 +188,7 @@ function AutoGridInner({
184
188
  const properties = visibleColumns ? modelInfo.getProperties(visibleColumns) : getDefaultProperties(modelInfo);
185
189
  const children = useColumns(properties, setHeaderFilter, {
186
190
  visibleColumns,
191
+ hiddenColumns,
187
192
  noHeaderFilters,
188
193
  customColumns,
189
194
  columnOptions,
package/autogrid.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["src/autogrid.tsx"],
4
- "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?.reset();\n gridRef.current?.clearCache();\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 // 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 // Sets the data provider, should be done only once\n const grid = gridRef.current!;\n // Wait for the sorting headers to be rendered so that the sorting state is correct for the first data provider call\n const timeoutId = setTimeout(() => {\n let firstUpdate = true;\n const dataProvider = createDataProvider(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 dataProviderRef.current = dataProvider;\n // eslint-disable-next-line @typescript-eslint/no-misused-promises\n gridRef.current!.dataProvider = dataProvider.load.bind(dataProvider);\n }, 1);\n\n return () => clearTimeout(timeoutId);\n }, [model, service]);\n\n useEffect(() => {\n // Update the filtering, whenever the filter changes\n const dataProvider = dataProviderRef.current;\n const grid = gridRef.current;\n if (grid && dataProvider) {\n dataProvider.setFilter(experimentalFilter ?? internalFilter);\n grid.clearCache();\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 '@vaadin/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"],
5
- "mappings": "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",
4
+ "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 * Allows to customize which columns to hide. This must be an array of property\n * names that are defined in the model. Nested properties can be specified using\n * dot notation, e.g. `address.street`.\n */\n hiddenColumns?: 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 hiddenColumns?: 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 // When using `hiddenColumns` option, remove columns to hide using their `key`\n if (options.hiddenColumns) {\n columns = columns.filter(({ key }) => !(key && options.hiddenColumns?.includes(key)));\n }\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 hiddenColumns,\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?.reset();\n gridRef.current?.clearCache();\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 hiddenColumns,\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 // 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 // Sets the data provider, should be done only once\n const grid = gridRef.current!;\n // Wait for the sorting headers to be rendered so that the sorting state is correct for the first data provider call\n const timeoutId = setTimeout(() => {\n let firstUpdate = true;\n const dataProvider = createDataProvider(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 dataProviderRef.current = dataProvider;\n // eslint-disable-next-line @typescript-eslint/no-misused-promises\n gridRef.current!.dataProvider = dataProvider.load.bind(dataProvider);\n }, 1);\n\n return () => clearTimeout(timeoutId);\n }, [model, service]);\n\n useEffect(() => {\n // Update the filtering, whenever the filter changes\n const dataProvider = dataProviderRef.current;\n const grid = gridRef.current;\n if (grid && dataProvider) {\n dataProvider.setFilter(experimentalFilter ?? internalFilter);\n grid.clearCache();\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 '@vaadin/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"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/index.js CHANGED
@@ -3,7 +3,7 @@ function __REGISTER__(feature) {
3
3
  window.Vaadin.registrations ??= [];
4
4
  window.Vaadin.registrations.push({
5
5
  is: feature ? `${"@vaadin/hilla-react-crud"}/${feature}` : "@vaadin/hilla-react-crud",
6
- version: "24.4.0-alpha9"
6
+ version: "24.4.0-beta2"
7
7
  });
8
8
  }
9
9
  export * from "./autogrid-feature.js";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/hilla-react-crud",
3
- "version": "24.4.0-alpha9",
3
+ "version": "24.4.0-beta2",
4
4
  "description": "Hilla CRUD utils for React",
5
5
  "main": "index.js",
6
6
  "module": "index.js",
@@ -56,13 +56,14 @@
56
56
  "access": "public"
57
57
  },
58
58
  "dependencies": {
59
- "@vaadin/hilla-frontend": "24.4.0-alpha9",
60
- "@vaadin/hilla-lit-form": "24.4.0-alpha9",
61
- "@vaadin/hilla-react-form": "24.4.0-alpha9",
62
- "@vaadin/react-components": "24.4.0-alpha15"
59
+ "@vaadin/hilla-frontend": "24.4.0-beta2",
60
+ "@vaadin/hilla-lit-form": "24.4.0-beta2",
61
+ "@vaadin/hilla-react-form": "24.4.0-beta2",
62
+ "@vaadin/react-components": "24.4.0-beta2"
63
63
  },
64
64
  "peerDependencies": {
65
- "react": "^18"
65
+ "react": "^18",
66
+ "react-dom": "^18"
66
67
  },
67
68
  "devDependencies": {
68
69
  "@esm-bundle/chai": "^4.3.4-fix.0",
package/util.js CHANGED
@@ -3,7 +3,7 @@ function __REGISTER__(feature) {
3
3
  window.Vaadin.registrations ??= [];
4
4
  window.Vaadin.registrations.push({
5
5
  is: feature ? `${"@vaadin/hilla-react-crud"}/${feature}` : "@vaadin/hilla-react-crud",
6
- version: "24.4.0-alpha9"
6
+ version: "24.4.0-beta2"
7
7
  });
8
8
  }
9
9
  import { jsx } from "react/jsx-runtime";