@vaadin/hilla-react-crud 24.4.0-alpha1

package/autoform-field.d.ts

@@ -0,0 +1,122 @@
+import { type Validator } from '@vaadin/hilla-lit-form';
+import type { FieldDirectiveResult, UseFormResult } from '@vaadin/hilla-react-form';
+import { type CSSProperties, type JSX } from 'react';
+import type { PropertyInfo } from './model-info.js';
+export type AutoFormFieldProps = Readonly<{
+    propertyInfo: PropertyInfo;
+    form: UseFormResult<any>;
+    options: FieldOptions;
+    disabled?: boolean;
+}>;
+type CustomFormFieldProps = FieldDirectiveResult & Readonly<{
+    label?: string;
+    disabled?: boolean;
+}>;
+export type FieldOptions = Readonly<{
+    /**
+     * The id to apply to the field.
+     */
+    id?: string;
+    /**
+     * The class names to add to the field.
+     */
+    className?: string;
+    /**
+     * The style to apply to the field.
+     */
+    style?: CSSProperties;
+    /**
+     * The label to show for the field. If not specified, a human-readable label
+     * is generated from the property name.
+     */
+    label?: string;
+    /**
+     * The placeholder to when the field is empty.
+     *
+     * Note that some field types, such as checkbox, do not support a placeholder.
+     */
+    placeholder?: string;
+    /**
+     * The helper text to display below the field.
+     *
+     * Note that some field types, such as checkbox, do not support a helper text.
+     */
+    helperText?: string;
+    /**
+     * The number of columns to span. This value is passed to the underlying
+     * FormLayout, unless a custom layout is used. In that case, the value is
+     * ignored.
+     */
+    colspan?: number;
+    /**
+     * Whether the field should be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Whether the field should be readonly.
+     */
+    readonly?: boolean;
+    /**
+     * The element to render for the field. This allows customizing field props
+     * that are not supported by the field options, or to render a different field
+     * component. Other field options are automatically applied to the element,
+     * and the element is automatically bound to the form. If not specified, a
+     * default field element is rendered based on the property type.
+     *
+     * The element must be a field component, such as TextField, TextArea,
+     * NumberField, etc., otherwise form binding will not work. For more
+     * sophisticated customizations, use the `renderer` option.
+     *
+     * If the field options also specify a renderer function, then the element is
+     * ignored.
+     *
+     * Example enabling the clear button for a text field:
+     * ```tsx
+     * {
+     *   element: <TextField clearButtonVisible />
+     * }
+     * ```
+     *
+     * Example rendering a text area instead of a text field:
+     * ```tsx
+     * {
+     *   element: <TextArea />
+     * }
+     * ```
+     */
+    element?: JSX.Element;
+    /**
+     * Allows to specify a custom renderer for the field, for example to render a
+     * custom type of field or apply an additional layout around the field. The
+     * renderer receives field props that must be applied to the custom field
+     * component in order to connect it to the form.
+     *
+     * In order to customize one of the default fields, or render a different type
+     * of field, consider using the `element` option instead.
+     *
+     * Example:
+     * ```tsx
+     * {
+     *   renderer: ({ field }) => (
+     *     <div>
+     *       <TextArea {...field} />
+     *       <p>Number of words: {calculateNumberOfWords()}</p>
+     *     </div>
+     *   )
+     * }
+     * ```
+     */
+    renderer?(props: {
+        field: CustomFormFieldProps;
+    }): JSX.Element;
+    /**
+     * Validators to apply to the field. The validators are added to the form
+     * when the field is rendered.
+     * UseMemo is recommended for the validators, so that they are not recreated
+     * on every render.
+     */
+    validators?: Validator[];
+}>;
+export declare function AutoFormField(props: AutoFormFieldProps): JSX.Element | null;
+export {};
+//# sourceMappingURL=autoform-field.d.ts.map

package/autoform-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"autoform-field.d.ts","sourceRoot":"","sources":["src/autoform-field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6C,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnG,OAAO,KAAK,EAAE,oBAAoB,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAWpF,OAAO,EAIL,KAAK,aAAa,EAClB,KAAK,GAAG,EAGT,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGpD,MAAM,MAAM,kBAAkB,GAAG,QAAQ,CAAC;IACxC,YAAY,EAAE,YAAY,CAAC;IAC3B,IAAI,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IACzB,OAAO,EAAE,YAAY,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC,CAAC;AAEH,KAAK,oBAAoB,GAAG,oBAAoB,GAAG,QAAQ,CAAC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,CAAC;AAEpG,MAAM,MAAM,YAAY,GAAG,QAAQ,CAAC;IAClC;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;;;;;;;;;;;;;;;;;;;;;OA2BG;IACH,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtB;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,QAAQ,CAAC,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,oBAAoB,CAAA;KAAE,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/D;;;;;OAKG;IACH,UAAU,CAAC,EAAE,SAAS,EAAE,CAAC;CAC1B,CAAC,CAAC;AA0EH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAsD3E"}

package/autoform-field.js

@@ -0,0 +1,118 @@
+import { jsx } from "react/jsx-runtime";
+import { _enum } from "@vaadin/hilla-lit-form";
+import { useFormPart } from "@vaadin/hilla-react-form";
+import { Checkbox } from "@vaadin/react-components/Checkbox.js";
+import { DatePicker } from "@vaadin/react-components/DatePicker.js";
+import { DateTimePicker } from "@vaadin/react-components/DateTimePicker.js";
+import { IntegerField } from "@vaadin/react-components/IntegerField.js";
+import { NumberField } from "@vaadin/react-components/NumberField.js";
+import { Select } from "@vaadin/react-components/Select.js";
+import { TextArea } from "@vaadin/react-components/TextArea.js";
+import { TextField } from "@vaadin/react-components/TextField.js";
+import { TimePicker } from "@vaadin/react-components/TimePicker.js";
+import {
+  cloneElement,
+  createElement,
+  useEffect,
+  useMemo
+} from "react";
+import { useDatePickerI18n, useDateTimePickerI18n } from "./locale.js";
+import { convertToTitleCase } from "./util.js";
+function getPropertyModel(form, propertyInfo) {
+  const pathParts = propertyInfo.name.split(".");
+  return pathParts.reduce((model, property) => model ? model[property] : void 0, form.model);
+}
+function renderFieldElement(defaultComponentType, { element, field, fieldProps }, additionalProps = {}) {
+  const fieldElement = element ?? createElement(defaultComponentType);
+  return cloneElement(fieldElement, { ...fieldProps, ...additionalProps, ...fieldElement.props, ...field });
+}
+function AutoFormTextField(props) {
+  return renderFieldElement(TextField, props);
+}
+function AutoFormIntegerField(props) {
+  return renderFieldElement(IntegerField, props);
+}
+function AutoFormDecimalField(props) {
+  return renderFieldElement(NumberField, props);
+}
+function AutoFormDateField(props) {
+  const i18n = useDatePickerI18n();
+  return renderFieldElement(DatePicker, props, { i18n });
+}
+function AutoFormTimeField(props) {
+  return renderFieldElement(TimePicker, props);
+}
+function AutoFormDateTimeField(props) {
+  const i18n = useDateTimePickerI18n();
+  return renderFieldElement(DateTimePicker, props, { i18n });
+}
+function AutoFormEnumField(props) {
+  const enumModel = props.model;
+  const items = Object.keys(enumModel[_enum]).map((value) => ({
+    label: convertToTitleCase(value),
+    value
+  }));
+  return renderFieldElement(Select, props, { items });
+}
+function AutoFormBooleanField(props) {
+  return renderFieldElement(Checkbox, props);
+}
+function AutoFormObjectField({ model, fieldProps }) {
+  const part = useFormPart(model);
+  const jsonString = part.value ? JSON.stringify(part.value) : "";
+  return /* @__PURE__ */ jsx(TextArea, { ...fieldProps, value: jsonString, readonly: true });
+}
+function AutoFormField(props) {
+  const { form, propertyInfo, options } = props;
+  const label = options.label ?? propertyInfo.humanReadableName;
+  const model = getPropertyModel(form, propertyInfo);
+  const field = form.field(model);
+  const formPart = useFormPart(model);
+  const defaultValidators = useMemo(() => formPart.validators, []);
+  const { validators } = options;
+  useEffect(() => {
+    formPart.setValidators([...defaultValidators, ...validators ?? []]);
+  }, [validators]);
+  if (options.renderer) {
+    const customFieldProps = { ...field, disabled: props.disabled, label };
+    return options.renderer({ field: customFieldProps });
+  }
+  const fieldProps = {
+    id: options.id,
+    className: options.className,
+    style: options.style,
+    label,
+    placeholder: options.placeholder,
+    helperText: options.helperText,
+    colspan: options.colspan,
+    disabled: options.disabled ?? props.disabled,
+    readonly: options.readonly
+  };
+  const rendererProps = { model, field, element: options.element, fieldProps };
+  switch (props.propertyInfo.type) {
+    case "string":
+      return /* @__PURE__ */ jsx(AutoFormTextField, { ...rendererProps });
+    case "integer":
+      return /* @__PURE__ */ jsx(AutoFormIntegerField, { ...rendererProps });
+    case "decimal":
+      return /* @__PURE__ */ jsx(AutoFormDecimalField, { ...rendererProps });
+    case "date":
+      return /* @__PURE__ */ jsx(AutoFormDateField, { ...rendererProps });
+    case "time":
+      return /* @__PURE__ */ jsx(AutoFormTimeField, { ...rendererProps });
+    case "datetime":
+      return /* @__PURE__ */ jsx(AutoFormDateTimeField, { ...rendererProps });
+    case "enum":
+      return /* @__PURE__ */ jsx(AutoFormEnumField, { ...rendererProps });
+    case "boolean":
+      return /* @__PURE__ */ jsx(AutoFormBooleanField, { ...rendererProps });
+    case "object":
+      return /* @__PURE__ */ jsx(AutoFormObjectField, { ...rendererProps });
+    default:
+      return null;
+  }
+}
+export {
+  AutoFormField
+};
+//# sourceMappingURL=autoform-field.js.map

package/autoform-field.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["src/autoform-field.tsx"],
+  "sourcesContent": ["import { _enum, type AbstractModel, type EnumModel, type Validator } from '@vaadin/hilla-lit-form';\nimport type { FieldDirectiveResult, UseFormResult } from '@vaadin/hilla-react-form';\nimport { useFormPart } from '@vaadin/hilla-react-form';\nimport { Checkbox } from '@vaadin/react-components/Checkbox.js';\nimport { DatePicker } from '@vaadin/react-components/DatePicker.js';\nimport { DateTimePicker } from '@vaadin/react-components/DateTimePicker.js';\nimport { IntegerField } from '@vaadin/react-components/IntegerField.js';\nimport { NumberField } from '@vaadin/react-components/NumberField.js';\nimport { Select } from '@vaadin/react-components/Select.js';\nimport { TextArea } from '@vaadin/react-components/TextArea.js';\nimport { TextField } from '@vaadin/react-components/TextField.js';\nimport { TimePicker } from '@vaadin/react-components/TimePicker.js';\nimport {\n  cloneElement,\n  type ComponentType,\n  createElement,\n  type CSSProperties,\n  type JSX,\n  useEffect,\n  useMemo,\n} from 'react';\nimport { useDatePickerI18n, useDateTimePickerI18n } from './locale.js';\nimport type { PropertyInfo } from './model-info.js';\nimport { convertToTitleCase } from './util.js';\n\nexport type AutoFormFieldProps = Readonly<{\n  propertyInfo: PropertyInfo;\n  form: UseFormResult<any>;\n  options: FieldOptions;\n  disabled?: boolean;\n}>;\n\ntype CustomFormFieldProps = FieldDirectiveResult & Readonly<{ label?: string; disabled?: boolean }>;\n\nexport type FieldOptions = Readonly<{\n  /**\n   * The id to apply to the field.\n   */\n  id?: string;\n  /**\n   * The class names to add to the field.\n   */\n  className?: string;\n  /**\n   * The style to apply to the field.\n   */\n  style?: CSSProperties;\n  /**\n   * The label to show for the field. If not specified, a human-readable label\n   * is generated from the property name.\n   */\n  label?: string;\n  /**\n   * The placeholder to when the field is empty.\n   *\n   * Note that some field types, such as checkbox, do not support a placeholder.\n   */\n  placeholder?: string;\n  /**\n   * The helper text to display below the field.\n   *\n   * Note that some field types, such as checkbox, do not support a helper text.\n   */\n  helperText?: string;\n  /**\n   * The number of columns to span. This value is passed to the underlying\n   * FormLayout, unless a custom layout is used. In that case, the value is\n   * ignored.\n   */\n  colspan?: number;\n  /**\n   * Whether the field should be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Whether the field should be readonly.\n   */\n  readonly?: boolean;\n  /**\n   * The element to render for the field. This allows customizing field props\n   * that are not supported by the field options, or to render a different field\n   * component. Other field options are automatically applied to the element,\n   * and the element is automatically bound to the form. If not specified, a\n   * default field element is rendered based on the property type.\n   *\n   * The element must be a field component, such as TextField, TextArea,\n   * NumberField, etc., otherwise form binding will not work. For more\n   * sophisticated customizations, use the `renderer` option.\n   *\n   * If the field options also specify a renderer function, then the element is\n   * ignored.\n   *\n   * Example enabling the clear button for a text field:\n   * ```tsx\n   * {\n   *   element: <TextField clearButtonVisible />\n   * }\n   * ```\n   *\n   * Example rendering a text area instead of a text field:\n   * ```tsx\n   * {\n   *   element: <TextArea />\n   * }\n   * ```\n   */\n  element?: JSX.Element;\n  /**\n   * Allows to specify a custom renderer for the field, for example to render a\n   * custom type of field or apply an additional layout around the field. The\n   * renderer receives field props that must be applied to the custom field\n   * component in order to connect it to the form.\n   *\n   * In order to customize one of the default fields, or render a different type\n   * of field, consider using the `element` option instead.\n   *\n   * Example:\n   * ```tsx\n   * {\n   *   renderer: ({ field }) => (\n   *     <div>\n   *       <TextArea {...field} />\n   *       <p>Number of words: {calculateNumberOfWords()}</p>\n   *     </div>\n   *   )\n   * }\n   * ```\n   */\n  renderer?(props: { field: CustomFormFieldProps }): JSX.Element;\n  /**\n   * Validators to apply to the field. The validators are added to the form\n   * when the field is rendered.\n   * UseMemo is recommended for the validators, so that they are not recreated\n   * on every render.\n   */\n  validators?: Validator[];\n}>;\n\ntype CommonFieldProps = Pick<\n  FieldOptions,\n  'className' | 'colspan' | 'disabled' | 'helperText' | 'id' | 'label' | 'placeholder' | 'readonly' | 'style'\n>;\n\ntype FieldRendererProps = Readonly<{\n  model: AbstractModel;\n  field: FieldDirectiveResult;\n  element?: JSX.Element;\n  fieldProps: CommonFieldProps;\n}>;\n\nfunction getPropertyModel(form: UseFormResult<any>, propertyInfo: PropertyInfo) {\n  const pathParts = propertyInfo.name.split('.');\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n  return pathParts.reduce<any>((model, property) => (model ? model[property] : undefined), form.model);\n}\n\nfunction renderFieldElement(\n  defaultComponentType: ComponentType,\n  { element, field, fieldProps }: FieldRendererProps,\n  additionalProps: any = {},\n) {\n  const fieldElement = element ?? createElement(defaultComponentType);\n  return cloneElement(fieldElement, { ...fieldProps, ...additionalProps, ...fieldElement.props, ...field });\n}\n\nfunction AutoFormTextField(props: FieldRendererProps) {\n  return renderFieldElement(TextField, props);\n}\n\nfunction AutoFormIntegerField(props: FieldRendererProps) {\n  return renderFieldElement(IntegerField, props);\n}\n\nfunction AutoFormDecimalField(props: FieldRendererProps) {\n  return renderFieldElement(NumberField, props);\n}\n\nfunction AutoFormDateField(props: FieldRendererProps) {\n  const i18n = useDatePickerI18n();\n  return renderFieldElement(DatePicker, props, { i18n });\n}\n\nfunction AutoFormTimeField(props: FieldRendererProps) {\n  return renderFieldElement(TimePicker, props);\n}\n\nfunction AutoFormDateTimeField(props: FieldRendererProps) {\n  const i18n = useDateTimePickerI18n();\n  return renderFieldElement(DateTimePicker, props, { i18n });\n}\n\nfunction AutoFormEnumField(props: FieldRendererProps) {\n  const enumModel = props.model as EnumModel;\n  const items = Object.keys(enumModel[_enum]).map((value) => ({\n    label: convertToTitleCase(value),\n    value,\n  }));\n  return renderFieldElement(Select, props, { items });\n}\n\nfunction AutoFormBooleanField(props: FieldRendererProps) {\n  return renderFieldElement(Checkbox, props);\n}\n\nfunction AutoFormObjectField({ model, fieldProps }: FieldRendererProps) {\n  const part = useFormPart(model);\n  const jsonString = part.value ? JSON.stringify(part.value) : '';\n  return <TextArea {...fieldProps} value={jsonString} readonly />;\n}\n\nexport function AutoFormField(props: AutoFormFieldProps): JSX.Element | null {\n  const { form, propertyInfo, options } = props;\n  const label = options.label ?? propertyInfo.humanReadableName;\n  const model = getPropertyModel(form, propertyInfo);\n  const field = form.field(model);\n\n  const formPart = useFormPart(model);\n  const defaultValidators = useMemo(() => formPart.validators, []);\n  const { validators } = options;\n  useEffect(() => {\n    formPart.setValidators([...defaultValidators, ...(validators ?? [])]);\n  }, [validators]);\n\n  if (options.renderer) {\n    const customFieldProps = { ...field, disabled: props.disabled, label };\n    return options.renderer({ field: customFieldProps });\n  }\n\n  const fieldProps: CommonFieldProps = {\n    id: options.id,\n    className: options.className,\n    style: options.style,\n    label,\n    placeholder: options.placeholder,\n    helperText: options.helperText,\n    colspan: options.colspan,\n    disabled: options.disabled ?? props.disabled,\n    readonly: options.readonly,\n  };\n\n  const rendererProps: FieldRendererProps = { model, field, element: options.element, fieldProps };\n\n  switch (props.propertyInfo.type) {\n    case 'string':\n      return <AutoFormTextField {...rendererProps}></AutoFormTextField>;\n    case 'integer':\n      return <AutoFormIntegerField {...rendererProps}></AutoFormIntegerField>;\n    case 'decimal':\n      return <AutoFormDecimalField {...rendererProps}></AutoFormDecimalField>;\n    case 'date':\n      return <AutoFormDateField {...rendererProps}></AutoFormDateField>;\n    case 'time':\n      return <AutoFormTimeField {...rendererProps}></AutoFormTimeField>;\n    case 'datetime':\n      return <AutoFormDateTimeField {...rendererProps}></AutoFormDateTimeField>;\n    case 'enum':\n      return <AutoFormEnumField {...rendererProps}></AutoFormEnumField>;\n    case 'boolean':\n      return <AutoFormBooleanField {...rendererProps}></AutoFormBooleanField>;\n    case 'object':\n      return <AutoFormObjectField {...rendererProps}></AutoFormObjectField>;\n    default:\n      return null;\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/autoform.d.ts

@@ -0,0 +1,228 @@
+import { EndpointError } from '@vaadin/hilla-core';
+import { type AbstractModel, type DetachedModelConstructor, type Value } from '@vaadin/hilla-lit-form';
+import { type UseFormResult } from '@vaadin/hilla-react-form';
+import { FormLayout } from '@vaadin/react-components/FormLayout';
+import { type ComponentType, type JSX, type ReactElement } from 'react';
+import { type AutoFormFieldProps, type FieldOptions } from './autoform-field.js';
+import type { FormService } from './crud.js';
+import { type ComponentStyleProps } from './util.js';
+export declare const emptyItem: unique symbol;
+/**
+ * An event that is fired when an error occurs while submitting the form.
+ */
+export type SubmitErrorEvent = {
+    /**
+     * The error that occurred.
+     */
+    error: EndpointError;
+    /**
+     * A function that can be used to set a custom error message. This will be
+     * shown in the form at the same position as the default error message.
+     * You are not required to call this function if you want to handle the
+     * error differently.
+     */
+    setMessage(message: string): void;
+};
+/**
+ * An event that is fired when the form has been successfully submitted.
+ */
+export type SubmitEvent<TItem> = {
+    /**
+     * The item that was submitted, as returned by the service.
+     */
+    item: TItem;
+};
+/**
+ * An event that is fired when an error occurs while deleting an item.
+ */
+export type DeleteErrorEvent = {
+    /**
+     * The error that occurred.
+     */
+    error: EndpointError;
+    /**
+     * A function that can be used to set a custom error message. This will be
+     * shown in the form at the same position as the default error message.
+     * You are not required to call this function if you want to handle the
+     * error differently.
+     */
+    setMessage(message: string): void;
+};
+/**
+ * An event that is fired when the form has been successfully deleted.
+ */
+export type DeleteEvent<TItem> = {
+    /**
+     * The item that was deleted, as returned by the service.
+     */
+    item: TItem;
+};
+export type AutoFormLayoutRendererProps<M extends AbstractModel> = Readonly<{
+    form: UseFormResult<M>;
+    children: ReadonlyArray<ReactElement<AutoFormFieldProps>>;
+}>;
+export type AutoFormProps<M extends AbstractModel = AbstractModel> = ComponentStyleProps & Readonly<{
+    /**
+     * The service to use for saving and deleting items. This must be a
+     * TypeScript service that has been generated by Hilla from a backend Java
+     * service that implements the `com.vaadin.hilla.crud.FormService` interface.
+     */
+    service: FormService<Value<M>>;
+    /**
+     * The entity model to use, which determines which fields to show in the
+     * form. 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 handled by the service. For example, a `PersonModel` can be
+     * used with a service that handles `Person` instances.
+     *
+     * By default, the form shows fields for all properties of the model which
+     * have a type that is supported. Use the `visibleFields` option to customize
+     * which fields to show and in which order.
+     */
+    model: DetachedModelConstructor<M>;
+    /**
+     * The property to use to detect an item's ID. The item ID is required for
+     * deleting items via the `FormService.delete` method. The delete button
+     * will not be shown if no item ID can be found.
+     *
+     * 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;
+    /**
+     * The item to edit in the form. The form fields are automatically populated
+     * with values from the item's properties. In order to create a new item,
+     * either pass `null`, or leave this prop as undefined.
+     *
+     * Use the `onSubmitSuccess` callback to get notified when the item has been
+     * saved.
+     *
+     * When submitting a new item (i.e. when `item` is null or undefined), the
+     * form will be automatically cleared, allowing to submit another new item.
+     * In order to keep editing the same item after submitting, set the `item`
+     * prop to the new item.
+     */
+    item?: Value<M> | typeof emptyItem | null;
+    /**
+     * Whether the form should be disabled. This disables all form fields and
+     * all buttons.
+     */
+    disabled?: boolean;
+    /**
+     * Allows to customize the layout of the form by providing a custom
+     * renderer. The renderer receives the form instance and the pre-rendered
+     * fields as props. The renderer can either reuse the pre-rendered fields in
+     * the custom layout, or render custom fields and connect them to the form
+     * manually.
+     *
+     * Check the component documentation for details and examples.
+     *
+     * Example using pre-rendered fields:
+     * ```tsx
+     * <AutoForm layoutRenderer={({ children }) =>
+     *   <VerticalLayout>
+     *     {children}
+     *     <p>All data is collected anonymously.</p>
+     *   </VerticalLayout>
+     * } />
+     * ```
+     *
+     * Example rendering custom fields:
+     * ```tsx
+     * <AutoForm layoutRenderer={({ form }) =>
+     *   <VerticalLayout>
+     *     <TextField {...form.field(form.model.name)} />
+     *     ...
+     *   </VerticalLayout>
+     * } />
+     * ```
+     */
+    layoutRenderer?: ComponentType<AutoFormLayoutRendererProps<M>>;
+    /**
+     * Defines the fields to show in the form, and in which order. This takes
+     * an array of property names. Properties that are not included in this
+     * array will not be shown in the form, and properties that are included,
+     * but don't exist in the model, will be ignored.
+     */
+    visibleFields?: string[];
+    /**
+     * Allows to customize the FormLayout used by default. This is especially useful
+     * to define the `responsiveSteps`. See the
+     * {@link https://hilla.dev/docs/react/components/form-layout | FormLayout documentation}
+     * for details.
+     */
+    formLayoutProps?: ComponentStyleProps & Pick<Parameters<typeof FormLayout>[0], 'responsiveSteps'>;
+    /**
+     * Allows to customize individual fields of the form. This takes an object
+     * where the keys are property names, and the values are options for the
+     * respective field for editing that property.
+     */
+    fieldOptions?: Record<string, FieldOptions>;
+    /**
+     * Whether to show the delete button in the form. This is disabled by
+     * default. If enabled, the delete button will only be shown when editing
+     * an existing item, which means that `item` is not null. The delete button
+     * will also only be shown if an item has a discernible ID. See the
+     * `itemIdProperty` prop for details how the item ID is detected.
+     *
+     * Use the `onDeleteSuccess` callback to get notified when the item has been
+     * deleted.
+     *
+     * NOTE: This only hides the button, it does not prevent from calling the
+     * delete method on the service. To completely disable deleting, you must
+     * override the `delete` method in the backend Java service to either throw
+     * an exception or annotate it with `@DenyAll` to prevent access.
+     */
+    deleteButtonVisible?: boolean;
+    /**
+     * A callback that will be called if an unexpected error occurs while
+     * submitting the form.
+     *
+     * Note that this will not be called for validation errors, which are
+     * handled automatically.
+     */
+    onSubmitError?({ error }: SubmitErrorEvent): void;
+    /**
+     * A callback that will be called after the form has been successfully
+     * submitted and the item has been saved.
+     *
+     * When submitting a new item (i.e. when `item` is null or undefined), the
+     * form will be automatically cleared, allowing to submit another new item.
+     * In order to keep editing the same item after submitting, set the `item`
+     * prop to the new item.
+     */
+    onSubmitSuccess?({ item }: SubmitEvent<Value<M>>): void;
+    /**
+     * A callback that will be called if an unexpected error occurs while
+     * deleting an item.
+     */
+    onDeleteError?({ error }: DeleteErrorEvent): void;
+    /**
+     * A callback that will be called after the form has been successfully
+     * deleted.
+     */
+    onDeleteSuccess?({ item }: DeleteEvent<Value<M>>): void;
+}>;
+/**
+ * Auto Form is a component that automatically generates a form for editing,
+ * updating and deleting items from a backend service.
+ *
+ * Example usage:
+ * ```tsx
+ * import { AutoForm } from '@hilla/react-crud';
+ * import PersonService from 'Frontend/generated/endpoints';
+ * import PersonModel from 'Frontend/generated/com/example/application/Person';
+ *
+ * <AutoForm
+ *   service={PersonService}
+ *   model={PersonModel}
+ *   onSubmitSuccess={({ item }) => {
+ *     console.log('Submitted item:', item);
+ *   }}
+ * />
+ * ```
+ */
+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;
+//# sourceMappingURL=autoform.d.ts.map

package/autoform.d.ts.map

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