@vaadin/hilla-react-form 24.4.0-alpha2 → 24.4.0-alpha21

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.
package/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAGL,KAAK,aAAa,EAClB,KAAK,mBAAmB,EAIxB,KAAK,wBAAwB,EAM7B,KAAK,SAAS,EACd,KAAK,KAAK,EACV,KAAK,UAAU,EAChB,MAAM,wBAAwB,CAAC;AAahC,MAAM,MAAM,oBAAoB,GAAG,QAAQ,CAAC;IAC1C,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,IAAI,IAAI,CAAC;IACf,QAAQ,IAAI,IAAI,CAAC;IACjB,OAAO,IAAI,IAAI,CAAC;IAChB,GAAG,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,IAAI,CAAC;CACxC,CAAC,CAAC;AAEH,MAAM,MAAM,cAAc,GAAG,CAAC,KAAK,EAAE,aAAa,KAAK,oBAAoB,CAAC;AAE5E,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,aAAa,IAAI,QAAQ,CAAC;IAChE,YAAY,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;IACxB,KAAK,EAAE,OAAO,CAAC;IACf,MAAM,EAAE,SAAS,UAAU,EAAE,CAAC;IAC9B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,CAAC,CAAC;IACT,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,cAAc,CAAC;IACtB,SAAS,EAAE,aAAa,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC/C,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,aAAa,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC/C,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,SAAS,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IACnD,aAAa,CAAC,UAAU,EAAE,aAAa,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IACpE,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC;IAC5C,UAAU,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;IACnC,QAAQ,IAAI,OAAO,CAAC,SAAS,UAAU,EAAE,CAAC,CAAC;CAC5C,CAAC,CAAC;AAEH,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,aAAa,IAAI,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,GACnG,QAAQ,CAAC;IACP,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;IAChB,UAAU,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IACvC,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IAChC,MAAM,IAAI,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC,CAAC;IAC/C,KAAK,IAAI,IAAI,CAAC;IACd,KAAK,IAAI,IAAI,CAAC;IACd,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,CAAC;IAC/C,MAAM,IAAI,IAAI,CAAC;CAChB,CAAC,CAAC;AAsIL,wBAAgB,OAAO,CAAC,CAAC,SAAS,aAAa,EAC7C,KAAK,EAAE,wBAAwB,CAAC,CAAC,CAAC,EAClC,MAAM,CAAC,EAAE,mBAAmB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GACrC,aAAa,CAAC,CAAC,CAAC,CA6BlB;AAED,wBAAgB,WAAW,CAAC,CAAC,SAAS,aAAa,EAAE,KAAK,EAAE,CAAC,GAAG,iBAAiB,CAAC,CAAC,CAAC,CAOnF"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["src/index.ts"],"names":[],"mappings":"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"}
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-form"}/${feature}` : "@vaadin/hilla-react-form",
6
- version: "24.4.0-alpha2"
6
+ version: "24.4.0-alpha21"
7
7
  });
8
8
  }
9
9
  import {
@@ -62,14 +62,18 @@ function useFields(node) {
62
62
  element: void 0,
63
63
  errorMessage: "",
64
64
  invalid: false,
65
+ changeBlurHandler() {
66
+ fieldState.updateValue();
67
+ fieldState.markVisited();
68
+ },
65
69
  markVisited() {
66
70
  n.visited = true;
67
71
  },
68
72
  ref(element) {
69
73
  if (!element) {
70
- fieldState.element?.removeEventListener("change", fieldState.updateValue);
74
+ fieldState.element?.removeEventListener("change", fieldState.changeBlurHandler);
71
75
  fieldState.element?.removeEventListener("input", fieldState.updateValue);
72
- fieldState.element?.removeEventListener("blur", fieldState.markVisited);
76
+ fieldState.element?.removeEventListener("blur", fieldState.changeBlurHandler);
73
77
  fieldState.strategy?.removeEventListeners();
74
78
  fieldState.element = void 0;
75
79
  fieldState.strategy = void 0;
@@ -80,9 +84,9 @@ function useFields(node) {
80
84
  }
81
85
  if (fieldState.element !== element) {
82
86
  fieldState.element = element;
83
- fieldState.element.addEventListener("change", fieldState.updateValue);
87
+ fieldState.element.addEventListener("change", fieldState.changeBlurHandler);
84
88
  fieldState.element.addEventListener("input", fieldState.updateValue);
85
- fieldState.element.addEventListener("blur", fieldState.markVisited);
89
+ fieldState.element.addEventListener("blur", fieldState.changeBlurHandler);
86
90
  fieldState.strategy = getDefaultFieldStrategy(element, model);
87
91
  }
88
92
  },
@@ -102,7 +106,7 @@ function useFields(node) {
102
106
  if (fieldState.strategy) {
103
107
  const valueFromField = convertFieldValue(model, fieldState.strategy.value);
104
108
  if (valueFromField !== n.value && !(Number.isNaN(n.value) && Number.isNaN(valueFromField))) {
105
- fieldState.strategy.value = n.value;
109
+ fieldState.strategy.value = Number.isNaN(n.value) ? "" : n.value;
106
110
  }
107
111
  if (fieldState.required !== n.required) {
108
112
  fieldState.required = n.required;
package/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../scripts/register.js", "src/index.ts"],
4
- "sourcesContent": ["export function __REGISTER__(feature) {\n window.Vaadin ??= {};\n window.Vaadin.registrations ??= [];\n window.Vaadin.registrations.push({\n is: feature ? `${__NAME__}/${feature}` : __NAME__,\n version: __VERSION__,\n });\n}\n", "/* eslint-disable @typescript-eslint/unbound-method */\nimport {\n _fromString,\n _validity,\n type AbstractModel,\n type BinderConfiguration,\n type BinderNode,\n BinderRoot,\n CHANGED,\n type DetachedModelConstructor,\n type FieldStrategy,\n getBinderNode,\n getDefaultFieldStrategy,\n hasFromString,\n isFieldElement,\n type Validator,\n type Value,\n type ValueError,\n} from '@vaadin/hilla-lit-form';\nimport { useEffect, useMemo, useReducer, useRef } from 'react';\nimport type { Writable } from 'type-fest';\n\n// @ts-expect-error: esbuild injection\n// eslint-disable-next-line @typescript-eslint/no-unsafe-call\n__REGISTER__();\n\nfunction useUpdate() {\n const [_, update] = useReducer((x: number) => x + 1, 0);\n return update;\n}\n\nexport type FieldDirectiveResult = Readonly<{\n name: string;\n onBlur(): void;\n onChange(): void;\n onInput(): void;\n ref(element: HTMLElement | null): void;\n}>;\n\nexport type FieldDirective = (model: AbstractModel) => FieldDirectiveResult;\n\nexport type UseFormPartResult<M extends AbstractModel> = Readonly<{\n defaultValue?: Value<M>;\n dirty: boolean;\n errors: readonly ValueError[];\n invalid: boolean;\n model: M;\n name: string;\n field: FieldDirective;\n ownErrors: ReadonlyArray<ValueError<Value<M>>>;\n required: boolean;\n validators: ReadonlyArray<Validator<Value<M>>>;\n value?: Value<M>;\n visited: boolean;\n addValidator(validator: Validator<Value<M>>): void;\n setValidators(validators: ReadonlyArray<Validator<Value<M>>>): void;\n setValue(value: Value<M> | undefined): void;\n setVisited(visited: boolean): void;\n validate(): Promise<readonly ValueError[]>;\n}>;\n\nexport type UseFormResult<M extends AbstractModel> = Omit<UseFormPartResult<M>, 'setValue' | 'value'> &\n Readonly<{\n value: Value<M>;\n submitting: boolean;\n setDefaultValue(value: Value<M>): void;\n setValue(value: Value<M>): void;\n submit(): Promise<Value<M> | undefined | void>;\n reset(): void;\n clear(): void;\n read(value: Value<M> | null | undefined): void;\n update(): void;\n }>;\n\ntype FieldState<T = unknown> = {\n required: boolean;\n invalid: boolean;\n errorMessage: string;\n strategy?: FieldStrategy<T>;\n element?: HTMLElement;\n updateValue(): void;\n markVisited(): void;\n ref(element: HTMLElement | null): void;\n};\n\nfunction convertFieldValue<T extends AbstractModel>(model: T, fieldValue: unknown) {\n return typeof fieldValue === 'string' && hasFromString(model) ? model[_fromString](fieldValue) : fieldValue;\n}\n\nfunction getFormPart<M extends AbstractModel>(node: BinderNode<M>): Omit<UseFormPartResult<M>, 'field'> {\n return {\n addValidator: node.addValidator.bind(node),\n defaultValue: node.defaultValue,\n dirty: node.dirty,\n errors: node.errors,\n invalid: node.invalid,\n model: node.model,\n name: node.name,\n ownErrors: node.ownErrors,\n required: node.required,\n setValidators(validators) {\n node.validators = validators;\n },\n setValue(value) {\n node.value = value;\n },\n setVisited(visited: boolean) {\n node.visited = visited;\n },\n validate: node.validate.bind(node),\n validators: node.validators,\n value: node.value,\n visited: node.visited,\n };\n}\n\nfunction useFields<M extends AbstractModel>(node: BinderNode<M>): FieldDirective {\n return useMemo(() => {\n const registry = new WeakMap<AbstractModel, FieldState>();\n\n return ((model: AbstractModel) => {\n const n = getBinderNode(model);\n\n let fieldState = registry.get(model);\n\n if (!fieldState) {\n fieldState = {\n element: undefined,\n errorMessage: '',\n invalid: false,\n markVisited() {\n n.visited = true;\n },\n ref(element: HTMLElement | null) {\n if (!element) {\n fieldState!.element?.removeEventListener('change', fieldState!.updateValue);\n fieldState!.element?.removeEventListener('input', fieldState!.updateValue);\n fieldState!.element?.removeEventListener('blur', fieldState!.markVisited);\n fieldState!.strategy?.removeEventListeners();\n fieldState!.element = undefined;\n fieldState!.strategy = undefined;\n return;\n }\n\n if (!isFieldElement(element)) {\n throw new TypeError(`Element '${element.localName}' is not a form element`);\n }\n\n if (fieldState!.element !== element) {\n fieldState!.element = element;\n fieldState!.element.addEventListener('change', fieldState!.updateValue);\n fieldState!.element.addEventListener('input', fieldState!.updateValue);\n fieldState!.element.addEventListener('blur', fieldState!.markVisited);\n fieldState!.strategy = getDefaultFieldStrategy(element, model);\n }\n },\n required: false,\n strategy: undefined,\n updateValue() {\n if (fieldState!.strategy) {\n // Remove invalid flag, so that .checkValidity() in Vaadin Components\n // does not interfere with errors from Hilla.\n fieldState!.strategy.invalid = false;\n // When bad input is detected, skip reading new value in binder state\n fieldState!.strategy.checkValidity();\n n[_validity] = fieldState!.strategy.validity;\n n.value = convertFieldValue(model, fieldState!.strategy.value);\n }\n },\n };\n\n registry.set(model, fieldState);\n }\n\n if (fieldState.strategy) {\n const valueFromField = convertFieldValue(model, fieldState.strategy.value);\n if (valueFromField !== n.value && !(Number.isNaN(n.value) && Number.isNaN(valueFromField))) {\n fieldState.strategy.value = n.value;\n }\n\n if (fieldState.required !== n.required) {\n fieldState.required = n.required;\n fieldState.strategy.required = n.required;\n }\n\n const firstError = n.ownErrors.at(0);\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n const errorMessage = firstError?.message ?? '';\n if (fieldState.errorMessage !== errorMessage) {\n fieldState.errorMessage = errorMessage;\n fieldState.strategy.errorMessage = errorMessage;\n }\n\n // Make sure invalid state is always in sync\n fieldState.invalid = n.invalid;\n fieldState.strategy.invalid = n.invalid;\n }\n\n return {\n name: n.name,\n ref: fieldState.ref,\n };\n }) as FieldDirective;\n }, [node]);\n}\n\nexport function useForm<M extends AbstractModel>(\n Model: DetachedModelConstructor<M>,\n config?: BinderConfiguration<Value<M>>,\n): UseFormResult<M> {\n const configRef = useRef<Writable<BinderConfiguration<Value<M>>>>({});\n configRef.current.onSubmit = config?.onSubmit;\n configRef.current.onChange = config?.onChange;\n const update = useUpdate();\n const binder = useMemo(() => new BinderRoot(Model, configRef.current), [Model]);\n const field = useFields(binder);\n\n useEffect(() => {\n binder.addEventListener(CHANGED.type, update);\n }, [binder]);\n\n return {\n ...getFormPart(binder),\n clear: binder.clear.bind(binder),\n field,\n read: binder.read.bind(binder),\n reset: binder.reset.bind(binder),\n setDefaultValue(defaultValue) {\n binder.defaultValue = defaultValue;\n },\n setValue(value) {\n binder.value = value;\n },\n submit: binder.submit.bind(binder),\n value: binder.value,\n submitting: binder.submitting,\n update,\n };\n}\n\nexport function useFormPart<M extends AbstractModel>(model: M): UseFormPartResult<M> {\n const binderNode = getBinderNode(model);\n const field = useFields(binderNode);\n return {\n ...getFormPart(binderNode),\n field,\n };\n}\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["export function __REGISTER__(feature) {\n window.Vaadin ??= {};\n window.Vaadin.registrations ??= [];\n window.Vaadin.registrations.push({\n is: feature ? `${__NAME__}/${feature}` : __NAME__,\n version: __VERSION__,\n });\n}\n", "/* eslint-disable @typescript-eslint/unbound-method */\nimport {\n _fromString,\n _validity,\n type AbstractModel,\n type BinderConfiguration,\n type BinderNode,\n BinderRoot,\n CHANGED,\n type DetachedModelConstructor,\n type FieldStrategy,\n getBinderNode,\n getDefaultFieldStrategy,\n hasFromString,\n isFieldElement,\n type Validator,\n type Value,\n type ValueError,\n} from '@vaadin/hilla-lit-form';\nimport { useEffect, useMemo, useReducer, useRef } from 'react';\nimport type { Writable } from 'type-fest';\n\n// @ts-expect-error: esbuild injection\n// eslint-disable-next-line @typescript-eslint/no-unsafe-call\n__REGISTER__();\n\nfunction useUpdate() {\n const [_, update] = useReducer((x: number) => x + 1, 0);\n return update;\n}\n\nexport type FieldDirectiveResult = Readonly<{\n name: string;\n onBlur(): void;\n onChange(): void;\n onInput(): void;\n ref(element: HTMLElement | null): void;\n}>;\n\nexport type FieldDirective = (model: AbstractModel) => FieldDirectiveResult;\n\nexport type UseFormPartResult<M extends AbstractModel> = Readonly<{\n defaultValue?: Value<M>;\n dirty: boolean;\n errors: readonly ValueError[];\n invalid: boolean;\n model: M;\n name: string;\n field: FieldDirective;\n ownErrors: ReadonlyArray<ValueError<Value<M>>>;\n required: boolean;\n validators: ReadonlyArray<Validator<Value<M>>>;\n value?: Value<M>;\n visited: boolean;\n addValidator(validator: Validator<Value<M>>): void;\n setValidators(validators: ReadonlyArray<Validator<Value<M>>>): void;\n setValue(value: Value<M> | undefined): void;\n setVisited(visited: boolean): void;\n validate(): Promise<readonly ValueError[]>;\n}>;\n\nexport type UseFormResult<M extends AbstractModel> = Omit<UseFormPartResult<M>, 'setValue' | 'value'> &\n Readonly<{\n value: Value<M>;\n submitting: boolean;\n setDefaultValue(value: Value<M>): void;\n setValue(value: Value<M>): void;\n submit(): Promise<Value<M> | undefined | void>;\n reset(): void;\n clear(): void;\n read(value: Value<M> | null | undefined): void;\n update(): void;\n }>;\n\ntype FieldState<T = unknown> = {\n required: boolean;\n invalid: boolean;\n errorMessage: string;\n strategy?: FieldStrategy<T>;\n element?: HTMLElement;\n changeBlurHandler(): void;\n updateValue(): void;\n markVisited(): void;\n ref(element: HTMLElement | null): void;\n};\n\nfunction convertFieldValue<T extends AbstractModel>(model: T, fieldValue: unknown) {\n return typeof fieldValue === 'string' && hasFromString(model) ? model[_fromString](fieldValue) : fieldValue;\n}\n\nfunction getFormPart<M extends AbstractModel>(node: BinderNode<M>): Omit<UseFormPartResult<M>, 'field'> {\n return {\n addValidator: node.addValidator.bind(node),\n defaultValue: node.defaultValue,\n dirty: node.dirty,\n errors: node.errors,\n invalid: node.invalid,\n model: node.model,\n name: node.name,\n ownErrors: node.ownErrors,\n required: node.required,\n setValidators(validators) {\n node.validators = validators;\n },\n setValue(value) {\n node.value = value;\n },\n setVisited(visited: boolean) {\n node.visited = visited;\n },\n validate: node.validate.bind(node),\n validators: node.validators,\n value: node.value,\n visited: node.visited,\n };\n}\n\nfunction useFields<M extends AbstractModel>(node: BinderNode<M>): FieldDirective {\n return useMemo(() => {\n const registry = new WeakMap<AbstractModel, FieldState>();\n\n return ((model: AbstractModel) => {\n const n = getBinderNode(model);\n\n let fieldState = registry.get(model);\n\n if (!fieldState) {\n fieldState = {\n element: undefined,\n errorMessage: '',\n invalid: false,\n changeBlurHandler() {\n fieldState!.updateValue();\n fieldState!.markVisited();\n },\n markVisited() {\n n.visited = true;\n },\n ref(element: HTMLElement | null) {\n if (!element) {\n fieldState!.element?.removeEventListener('change', fieldState!.changeBlurHandler);\n fieldState!.element?.removeEventListener('input', fieldState!.updateValue);\n fieldState!.element?.removeEventListener('blur', fieldState!.changeBlurHandler);\n fieldState!.strategy?.removeEventListeners();\n fieldState!.element = undefined;\n fieldState!.strategy = undefined;\n return;\n }\n\n if (!isFieldElement(element)) {\n throw new TypeError(`Element '${element.localName}' is not a form element`);\n }\n\n if (fieldState!.element !== element) {\n fieldState!.element = element;\n fieldState!.element.addEventListener('change', fieldState!.changeBlurHandler);\n fieldState!.element.addEventListener('input', fieldState!.updateValue);\n fieldState!.element.addEventListener('blur', fieldState!.changeBlurHandler);\n fieldState!.strategy = getDefaultFieldStrategy(element, model);\n }\n },\n required: false,\n strategy: undefined,\n updateValue() {\n if (fieldState!.strategy) {\n // Remove invalid flag, so that .checkValidity() in Vaadin Components\n // does not interfere with errors from Hilla.\n fieldState!.strategy.invalid = false;\n // When bad input is detected, skip reading new value in binder state\n fieldState!.strategy.checkValidity();\n n[_validity] = fieldState!.strategy.validity;\n n.value = convertFieldValue(model, fieldState!.strategy.value);\n }\n },\n };\n\n registry.set(model, fieldState);\n }\n\n if (fieldState.strategy) {\n const valueFromField = convertFieldValue(model, fieldState.strategy.value);\n if (valueFromField !== n.value && !(Number.isNaN(n.value) && Number.isNaN(valueFromField))) {\n fieldState.strategy.value = Number.isNaN(n.value) ? '' : n.value;\n }\n\n if (fieldState.required !== n.required) {\n fieldState.required = n.required;\n fieldState.strategy.required = n.required;\n }\n\n const firstError = n.ownErrors.at(0);\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n const errorMessage = firstError?.message ?? '';\n if (fieldState.errorMessage !== errorMessage) {\n fieldState.errorMessage = errorMessage;\n fieldState.strategy.errorMessage = errorMessage;\n }\n\n // Make sure invalid state is always in sync\n fieldState.invalid = n.invalid;\n fieldState.strategy.invalid = n.invalid;\n }\n\n return {\n name: n.name,\n ref: fieldState.ref,\n };\n }) as FieldDirective;\n }, [node]);\n}\n\nexport function useForm<M extends AbstractModel>(\n Model: DetachedModelConstructor<M>,\n config?: BinderConfiguration<Value<M>>,\n): UseFormResult<M> {\n const configRef = useRef<Writable<BinderConfiguration<Value<M>>>>({});\n configRef.current.onSubmit = config?.onSubmit;\n configRef.current.onChange = config?.onChange;\n const update = useUpdate();\n const binder = useMemo(() => new BinderRoot(Model, configRef.current), [Model]);\n const field = useFields(binder);\n\n useEffect(() => {\n binder.addEventListener(CHANGED.type, update);\n }, [binder]);\n\n return {\n ...getFormPart(binder),\n clear: binder.clear.bind(binder),\n field,\n read: binder.read.bind(binder),\n reset: binder.reset.bind(binder),\n setDefaultValue(defaultValue) {\n binder.defaultValue = defaultValue;\n },\n setValue(value) {\n binder.value = value;\n },\n submit: binder.submit.bind(binder),\n value: binder.value,\n submitting: binder.submitting,\n update,\n };\n}\n\nexport function useFormPart<M extends AbstractModel>(model: M): UseFormPartResult<M> {\n const binderNode = getBinderNode(model);\n const field = useFields(binderNode);\n return {\n ...getFormPart(binderNode),\n field,\n };\n}\n"],
5
+ "mappings": "AAAO,SAAS,aAAa,SAAS;AACpC,SAAO,WAAW,CAAC;AACnB,SAAO,OAAO,kBAAkB,CAAC;AACjC,SAAO,OAAO,cAAc,KAAK;AAAA,IAC/B,IAAI,UAAU,GAAG,0BAAQ,IAAI,OAAO,KAAK;AAAA,IACzC,SAAS;AAAA,EACX,CAAC;AACH;ACNA;AAAA,EACE;AAAA,EACA;AAAA,EAIA;AAAA,EACA;AAAA,EAGA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AACP,SAAS,WAAW,SAAS,YAAY,cAAc;AAKvD,aAAa;AAEb,SAAS,YAAY;AACnB,QAAM,CAAC,GAAG,MAAM,IAAI,WAAW,CAAC,MAAc,IAAI,GAAG,CAAC;AACtD,SAAO;AACT;AAyDA,SAAS,kBAA2C,OAAU,YAAqB;AACjF,SAAO,OAAO,eAAe,YAAY,cAAc,KAAK,IAAI,MAAM,WAAW,EAAE,UAAU,IAAI;AACnG;AAEA,SAAS,YAAqC,MAA0D;AACtG,SAAO;AAAA,IACL,cAAc,KAAK,aAAa,KAAK,IAAI;AAAA,IACzC,cAAc,KAAK;AAAA,IACnB,OAAO,KAAK;AAAA,IACZ,QAAQ,KAAK;AAAA,IACb,SAAS,KAAK;AAAA,IACd,OAAO,KAAK;AAAA,IACZ,MAAM,KAAK;AAAA,IACX,WAAW,KAAK;AAAA,IAChB,UAAU,KAAK;AAAA,IACf,cAAc,YAAY;AACxB,WAAK,aAAa;AAAA,IACpB;AAAA,IACA,SAAS,OAAO;AACd,WAAK,QAAQ;AAAA,IACf;AAAA,IACA,WAAW,SAAkB;AAC3B,WAAK,UAAU;AAAA,IACjB;AAAA,IACA,UAAU,KAAK,SAAS,KAAK,IAAI;AAAA,IACjC,YAAY,KAAK;AAAA,IACjB,OAAO,KAAK;AAAA,IACZ,SAAS,KAAK;AAAA,EAChB;AACF;AAEA,SAAS,UAAmC,MAAqC;AAC/E,SAAO,QAAQ,MAAM;AACnB,UAAM,WAAW,oBAAI,QAAmC;AAExD,WAAQ,CAAC,UAAyB;AAChC,YAAM,IAAI,cAAc,KAAK;AAE7B,UAAI,aAAa,SAAS,IAAI,KAAK;AAEnC,UAAI,CAAC,YAAY;AACf,qBAAa;AAAA,UACX,SAAS;AAAA,UACT,cAAc;AAAA,UACd,SAAS;AAAA,UACT,oBAAoB;AAClB,uBAAY,YAAY;AACxB,uBAAY,YAAY;AAAA,UAC1B;AAAA,UACA,cAAc;AACZ,cAAE,UAAU;AAAA,UACd;AAAA,UACA,IAAI,SAA6B;AAC/B,gBAAI,CAAC,SAAS;AACZ,yBAAY,SAAS,oBAAoB,UAAU,WAAY,iBAAiB;AAChF,yBAAY,SAAS,oBAAoB,SAAS,WAAY,WAAW;AACzE,yBAAY,SAAS,oBAAoB,QAAQ,WAAY,iBAAiB;AAC9E,yBAAY,UAAU,qBAAqB;AAC3C,yBAAY,UAAU;AACtB,yBAAY,WAAW;AACvB;AAAA,YACF;AAEA,gBAAI,CAAC,eAAe,OAAO,GAAG;AAC5B,oBAAM,IAAI,UAAU,YAAY,QAAQ,SAAS,yBAAyB;AAAA,YAC5E;AAEA,gBAAI,WAAY,YAAY,SAAS;AACnC,yBAAY,UAAU;AACtB,yBAAY,QAAQ,iBAAiB,UAAU,WAAY,iBAAiB;AAC5E,yBAAY,QAAQ,iBAAiB,SAAS,WAAY,WAAW;AACrE,yBAAY,QAAQ,iBAAiB,QAAQ,WAAY,iBAAiB;AAC1E,yBAAY,WAAW,wBAAwB,SAAS,KAAK;AAAA,YAC/D;AAAA,UACF;AAAA,UACA,UAAU;AAAA,UACV,UAAU;AAAA,UACV,cAAc;AACZ,gBAAI,WAAY,UAAU;AAGxB,yBAAY,SAAS,UAAU;AAE/B,yBAAY,SAAS,cAAc;AACnC,gBAAE,SAAS,IAAI,WAAY,SAAS;AACpC,gBAAE,QAAQ,kBAAkB,OAAO,WAAY,SAAS,KAAK;AAAA,YAC/D;AAAA,UACF;AAAA,QACF;AAEA,iBAAS,IAAI,OAAO,UAAU;AAAA,MAChC;AAEA,UAAI,WAAW,UAAU;AACvB,cAAM,iBAAiB,kBAAkB,OAAO,WAAW,SAAS,KAAK;AACzE,YAAI,mBAAmB,EAAE,SAAS,EAAE,OAAO,MAAM,EAAE,KAAK,KAAK,OAAO,MAAM,cAAc,IAAI;AAC1F,qBAAW,SAAS,QAAQ,OAAO,MAAM,EAAE,KAAK,IAAI,KAAK,EAAE;AAAA,QAC7D;AAEA,YAAI,WAAW,aAAa,EAAE,UAAU;AACtC,qBAAW,WAAW,EAAE;AACxB,qBAAW,SAAS,WAAW,EAAE;AAAA,QACnC;AAEA,cAAM,aAAa,EAAE,UAAU,GAAG,CAAC;AAEnC,cAAM,eAAe,YAAY,WAAW;AAC5C,YAAI,WAAW,iBAAiB,cAAc;AAC5C,qBAAW,eAAe;AAC1B,qBAAW,SAAS,eAAe;AAAA,QACrC;AAGA,mBAAW,UAAU,EAAE;AACvB,mBAAW,SAAS,UAAU,EAAE;AAAA,MAClC;AAEA,aAAO;AAAA,QACL,MAAM,EAAE;AAAA,QACR,KAAK,WAAW;AAAA,MAClB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AACX;AAEO,SAAS,QACd,OACA,QACkB;AAClB,QAAM,YAAY,OAAgD,CAAC,CAAC;AACpE,YAAU,QAAQ,WAAW,QAAQ;AACrC,YAAU,QAAQ,WAAW,QAAQ;AACrC,QAAM,SAAS,UAAU;AACzB,QAAM,SAAS,QAAQ,MAAM,IAAI,WAAW,OAAO,UAAU,OAAO,GAAG,CAAC,KAAK,CAAC;AAC9E,QAAM,QAAQ,UAAU,MAAM;AAE9B,YAAU,MAAM;AACd,WAAO,iBAAiB,QAAQ,MAAM,MAAM;AAAA,EAC9C,GAAG,CAAC,MAAM,CAAC;AAEX,SAAO;AAAA,IACL,GAAG,YAAY,MAAM;AAAA,IACrB,OAAO,OAAO,MAAM,KAAK,MAAM;AAAA,IAC/B;AAAA,IACA,MAAM,OAAO,KAAK,KAAK,MAAM;AAAA,IAC7B,OAAO,OAAO,MAAM,KAAK,MAAM;AAAA,IAC/B,gBAAgB,cAAc;AAC5B,aAAO,eAAe;AAAA,IACxB;AAAA,IACA,SAAS,OAAO;AACd,aAAO,QAAQ;AAAA,IACjB;AAAA,IACA,QAAQ,OAAO,OAAO,KAAK,MAAM;AAAA,IACjC,OAAO,OAAO;AAAA,IACd,YAAY,OAAO;AAAA,IACnB;AAAA,EACF;AACF;AAEO,SAAS,YAAqC,OAAgC;AACnF,QAAM,aAAa,cAAc,KAAK;AACtC,QAAM,QAAQ,UAAU,UAAU;AAClC,SAAO;AAAA,IACL,GAAG,YAAY,UAAU;AAAA,IACzB;AAAA,EACF;AACF;",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/hilla-react-form",
3
- "version": "24.4.0-alpha2",
3
+ "version": "24.4.0-alpha21",
4
4
  "description": "Hilla form utils for React",
5
5
  "main": "index.js",
6
6
  "module": "index.js",
@@ -46,7 +46,7 @@
46
46
  "access": "public"
47
47
  },
48
48
  "dependencies": {
49
- "@vaadin/hilla-lit-form": "24.4.0-alpha2"
49
+ "@vaadin/hilla-lit-form": "24.4.0-alpha21"
50
50
  },
51
51
  "peerDependencies": {
52
52
  "react": "^18"