@vaadin/hilla-react-crud 24.7.0-alpha8 → 24.7.0-beta1

package/autoform-field.js

@@ -1,118 +1,110 @@
-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";
+import { jsx as _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);
+    const pathParts = propertyInfo.name.split('.');
+    return pathParts.reduce((model, property) => (model ? model[property] : undefined), form.model);
 }
 function renderFieldElement(defaultComponentType, { element, field, fieldProps }, additionalProps = {}) {
-  const fieldElement = element ?? createElement(defaultComponentType);
-  return cloneElement(fieldElement, { ...fieldProps, ...additionalProps, ...fieldElement.props, ...field });
+    const fieldElement = element ?? createElement(defaultComponentType);
+    return cloneElement(fieldElement, { ...fieldProps, ...additionalProps, ...fieldElement.props, ...field });
 }
 function AutoFormTextField(props) {
-  return renderFieldElement(TextField, props);
+    return renderFieldElement(TextField, props);
 }
 function AutoFormIntegerField(props) {
-  return renderFieldElement(IntegerField, props);
+    return renderFieldElement(IntegerField, props);
 }
 function AutoFormDecimalField(props) {
-  return renderFieldElement(NumberField, props);
+    return renderFieldElement(NumberField, props);
 }
 function AutoFormDateField(props) {
-  const i18n = useDatePickerI18n();
-  return renderFieldElement(DatePicker, props, { i18n });
+    const i18n = useDatePickerI18n();
+    return renderFieldElement(DatePicker, props, { i18n });
 }
 function AutoFormTimeField(props) {
-  return renderFieldElement(TimePicker, props);
+    return renderFieldElement(TimePicker, props);
 }
 function AutoFormDateTimeField(props) {
-  const i18n = useDateTimePickerI18n();
-  return renderFieldElement(DateTimePicker, props, { i18n });
+    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 });
+    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);
+    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 });
+    const part = useFormPart(model);
+    const jsonString = part.value ? JSON.stringify(part.value) : '';
+    return _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 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 _jsx(AutoFormTextField, { ...rendererProps });
+        case 'integer':
+            return _jsx(AutoFormIntegerField, { ...rendererProps });
+        case 'decimal':
+            return _jsx(AutoFormDecimalField, { ...rendererProps });
+        case 'date':
+            return _jsx(AutoFormDateField, { ...rendererProps });
+        case 'time':
+            return _jsx(AutoFormTimeField, { ...rendererProps });
+        case 'datetime':
+            return _jsx(AutoFormDateTimeField, { ...rendererProps });
+        case 'enum':
+            return _jsx(AutoFormEnumField, { ...rendererProps });
+        case 'boolean':
+            return _jsx(AutoFormBooleanField, { ...rendererProps });
+        case 'object':
+            return _jsx(AutoFormObjectField, { ...rendererProps });
+        default:
+            return null;
+    }
 }
-export {
-  AutoFormField
-};
-//# sourceMappingURL=autoform-field.js.map
+//# sourceMappingURL=autoform-field.js.map

package/autoform-field.js.map

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

package/autoform.d.ts

@@ -7,54 +7,18 @@ 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<{
@@ -62,174 +26,20 @@ export type AutoFormLayoutRendererProps<M extends AbstractModel> = Readonly<{
     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[];
-    /**
-     * Defines the fields to hide in the form, keeping the default order. This takes
-     * an array of property names. Properties that are not included in this
-     * array will not be hidden in the form, and properties that are included,
-     * but don't exist in the model, will be ignored.
-     */
     hiddenFields?: 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 '@vaadin/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, hiddenFields, formLayoutProps, fieldOptions, style, id, className, deleteButtonVisible, onDeleteSuccess, onDeleteError, }: AutoFormProps<M>): JSX.Element;
-//# sourceMappingURL=autoform.d.ts.map