@contember/react-form 1.3.0-alpha.25 → 1.3.0-alpha.27

package/dist/development/components/FormCheckbox.cjs

@@ -37,15 +37,15 @@ const FormCheckbox = reactBinding.Component(({ field, isNonbearing, defaultValue
     if (!checkboxRef) {
       return;
     }
-    ref.current = checkboxRef;
-    if (value === null) {
-      checkboxRef.indeterminate = true;
-    }
+    checkboxRef.indeterminate = value === null;
   }, [checkboxRef, ref, value]);
   return /* @__PURE__ */ jsxDevRuntime.jsxDEV(
     SlotInput,
     {
-      ref: setCheckboxRef,
+      ref: (it) => {
+        ref.current = checkboxRef;
+        setCheckboxRef(it);
+      },
       type: "checkbox",
       checked: accessor.value === true,
       "data-state": value === null ? "indeterminate" : value ? "checked" : "unchecked",
@@ -62,7 +62,7 @@ const FormCheckbox = reactBinding.Component(({ field, isNonbearing, defaultValue
     false,
     {
       fileName: "/__w/interface/interface/packages/react-form/src/components/FormCheckbox.tsx",
-      lineNumber: 38,
+      lineNumber: 35,
       columnNumber: 4
     },
     void 0

package/dist/development/components/FormCheckbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormCheckbox.cjs","sources":["../../../src/components/FormCheckbox.tsx"],"sourcesContent":["import * as React from 'react'\nimport { ChangeEventHandler, ReactElement, useCallback, useEffect } from 'react'\nimport { Component, Field, OptionallyVariableFieldValue, SugaredRelativeSingleField, TreeNodeEnvironmentFactory, useField } from '@contember/react-binding'\nimport { useFormError, useFormFieldId } from '../contexts'\nimport { dataAttribute } from '@contember/utilities'\nimport { useFormInputValidationHandler } from '../hooks'\nimport { Slot } from '@radix-ui/react-slot'\n\nconst SlotInput = Slot as React.ForwardRefExoticComponent<React.RefAttributes<HTMLInputElement> & React.InputHTMLAttributes<HTMLInputElement>>\n\nexport interface FormCheckboxProps {\n\tfield: SugaredRelativeSingleField['field']\n\tisNonbearing?: boolean\n\tdefaultValue?: OptionallyVariableFieldValue\n\tchildren: ReactElement<HTMLInputElement, 'input'>\n}\n\nexport const FormCheckbox = Component<FormCheckboxProps>(({ field, isNonbearing, defaultValue, ...props }) => {\n\tconst id = useFormFieldId()\n\tconst accessor = useField<boolean>(field)\n\tconst value = accessor.value\n\tconst errors = useFormError() ?? accessor.errors?.errors ?? []\n\tconst accessorGetter = accessor.getAccessor\n\tconst { ref, onFocus, onBlur } = useFormInputValidationHandler(accessor)\n\tconst [checkboxRef, setCheckboxRef] = React.useState<HTMLInputElement | null>(null)\n\n\tuseEffect(() => {\n\t\tif (!checkboxRef) {\n\t\t\treturn\n\t\t}\n\t\t(ref as any).current = checkboxRef\n\t\tif (value === null) {\n\t\t\tcheckboxRef.indeterminate = true\n\t\t}\n\t}, [checkboxRef, ref, value])\n\n\treturn (\n\t\t\t<SlotInput\n\t\t\t\tref={setCheckboxRef}\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tchecked={accessor.value === true}\n\t\t\t\tdata-state={value === null ? 'indeterminate' : (value ? 'checked' : 'unchecked')}\n\t\t\t\tdata-invalid={dataAttribute(errors.length > 0)}\n\t\t\t\tid={`${id}-input`}\n\t\t\t\tonFocus={onFocus}\n\t\t\t\tonBlur={onBlur}\n\t\t\t\tonChange={useCallback<ChangeEventHandler<HTMLInputElement>>(e => {\n\t\t\t\t\taccessorGetter().updateValue(e.target.checked)\n\t\t\t\t}, [accessorGetter])}\n\t\t\t\t{...props}\n\t\t\t/>\n\t)\n}, ({ field, isNonbearing, defaultValue }, env) => {\n\tconst node = TreeNodeEnvironmentFactory.createEnvironmentForField(env, { field }).getSubTreeNode()\n\tconst resolvedDefaultValue = defaultValue !== undefined ? defaultValue : (node.field.defaultValue ?? (node.field.nullable ? null : false))\n\n\treturn <Field field={field} isNonbearing={isNonbearing} defaultValue={resolvedDefaultValue} />\n})\n"],"names":["Slot","Component","useFormFieldId","useField","useFormError","useFormInputValidationHandler","React","useEffect","jsxDEV","dataAttribute","useCallback","this","TreeNodeEnvironmentFactory","Field"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAM,YAAYA,UAAAA;AASL,MAAA,eAAeC,uBAA6B,CAAC,EAAE,OAAO,cAAc,cAAc,GAAG,YAAY;AAC7G,QAAM,KAAKC,SAAAA;AACL,QAAA,WAAWC,sBAAkB,KAAK;AACxC,QAAM,QAAQ,SAAS;AACvB,QAAM,SAASC,SAAAA,aAAa,KAAK,SAAS,QAAQ,UAAU;AAC5D,QAAM,iBAAiB,SAAS;AAChC,QAAM,EAAE,KAAK,SAAS,OAAO,IAAIC,8BAAAA,8BAA8B,QAAQ;AACvE,QAAM,CAAC,aAAa,cAAc,IAAIC,iBAAM,SAAkC,IAAI;AAElFC,QAAAA,UAAU,MAAM;AACf,QAAI,CAAC,aAAa;AACjB;AAAA,IACD;AACC,QAAY,UAAU;AACvB,QAAI,UAAU,MAAM;AACnB,kBAAY,gBAAgB;AAAA,IAC7B;AAAA,EACE,GAAA,CAAC,aAAa,KAAK,KAAK,CAAC;AAG1B,SAAAC,8BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,KAAK;AAAA,MACL,MAAK;AAAA,MACL,SAAS,SAAS,UAAU;AAAA,MAC5B,cAAY,UAAU,OAAO,kBAAmB,QAAQ,YAAY;AAAA,MACpE,gBAAcC,UAAA,cAAc,OAAO,SAAS,CAAC;AAAA,MAC7C,IAAI,GAAG,EAAE;AAAA,MACT;AAAA,MACA;AAAA,MACA,UAAUC,MAAAA,YAAkD,CAAK,MAAA;AAChE,uBAAiB,EAAA,YAAY,EAAE,OAAO,OAAO;AAAA,MAAA,GAC3C,CAAC,cAAc,CAAC;AAAA,MAClB,GAAG;AAAA,IAAA;AAAA,IAZL;AAAA,IAAA;AAAA,IAAA;AAAA,MAAA,UAAA;AAAA,MAAA,YAAA;AAAA,MAAA,cAAA;AAAA,IAAA;AAAA,IAAAC;AAAAA,EAAA;AAeH,GAAG,CAAC,EAAE,OAAO,cAAc,aAAA,GAAgB,QAAQ;AAC5C,QAAA,OAAOC,wCAA2B,0BAA0B,KAAK,EAAE,MAAO,CAAA,EAAE;AAC5E,QAAA,uBAAuB,iBAAiB,SAAY,eAAgB,KAAK,MAAM,iBAAiB,KAAK,MAAM,WAAW,OAAO;AAEnI,SAAQJ,8BAAA,OAAAK,oBAAA,EAAM,OAAc,cAA4B,cAAc,qBAA/D,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAqF,GAAAF,MAAA;AAC7F,CAAC;;"}
+{"version":3,"file":"FormCheckbox.cjs","sources":["../../../src/components/FormCheckbox.tsx"],"sourcesContent":["import * as React from 'react'\nimport { ChangeEventHandler, ReactElement, useCallback, useEffect } from 'react'\nimport { Component, Field, OptionallyVariableFieldValue, SugaredRelativeSingleField, TreeNodeEnvironmentFactory, useField } from '@contember/react-binding'\nimport { useFormError, useFormFieldId } from '../contexts'\nimport { dataAttribute } from '@contember/utilities'\nimport { useFormInputValidationHandler } from '../hooks'\nimport { Slot } from '@radix-ui/react-slot'\n\nconst SlotInput = Slot as React.ForwardRefExoticComponent<React.RefAttributes<HTMLInputElement> & React.InputHTMLAttributes<HTMLInputElement>>\n\nexport interface FormCheckboxProps {\n\tfield: SugaredRelativeSingleField['field']\n\tisNonbearing?: boolean\n\tdefaultValue?: OptionallyVariableFieldValue\n\tchildren: ReactElement<HTMLInputElement, 'input'>\n}\n\nexport const FormCheckbox = Component<FormCheckboxProps>(({ field, isNonbearing, defaultValue, ...props }) => {\n\tconst id = useFormFieldId()\n\tconst accessor = useField<boolean>(field)\n\tconst value = accessor.value\n\tconst errors = useFormError() ?? accessor.errors?.errors ?? []\n\tconst accessorGetter = accessor.getAccessor\n\tconst { ref, onFocus, onBlur } = useFormInputValidationHandler(accessor)\n\tconst [checkboxRef, setCheckboxRef] = React.useState<HTMLInputElement | null>(null)\n\n\tuseEffect(() => {\n\t\tif (!checkboxRef) {\n\t\t\treturn\n\t\t}\n\t\tcheckboxRef.indeterminate = value === null\n\t}, [checkboxRef, ref, value])\n\n\treturn (\n\t\t\t<SlotInput\n\t\t\t\tref={it => {\n\t\t\t\t\t(ref as any).current = checkboxRef\n\t\t\t\t\tsetCheckboxRef(it)\n\t\t\t\t}}\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tchecked={accessor.value === true}\n\t\t\t\tdata-state={value === null ? 'indeterminate' : (value ? 'checked' : 'unchecked')}\n\t\t\t\tdata-invalid={dataAttribute(errors.length > 0)}\n\t\t\t\tid={`${id}-input`}\n\t\t\t\tonFocus={onFocus}\n\t\t\t\tonBlur={onBlur}\n\t\t\t\tonChange={useCallback<ChangeEventHandler<HTMLInputElement>>(e => {\n\t\t\t\t\taccessorGetter().updateValue(e.target.checked)\n\t\t\t\t}, [accessorGetter])}\n\t\t\t\t{...props}\n\t\t\t/>\n\t)\n}, ({ field, isNonbearing, defaultValue }, env) => {\n\tconst node = TreeNodeEnvironmentFactory.createEnvironmentForField(env, { field }).getSubTreeNode()\n\tconst resolvedDefaultValue = defaultValue !== undefined ? defaultValue : (node.field.defaultValue ?? (node.field.nullable ? null : false))\n\n\treturn <Field field={field} isNonbearing={isNonbearing} defaultValue={resolvedDefaultValue} />\n})\n"],"names":["Slot","Component","useFormFieldId","useField","useFormError","useFormInputValidationHandler","React","useEffect","jsxDEV","dataAttribute","useCallback","this","TreeNodeEnvironmentFactory","Field"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAM,YAAYA,UAAAA;AASL,MAAA,eAAeC,uBAA6B,CAAC,EAAE,OAAO,cAAc,cAAc,GAAG,YAAY;AAC7G,QAAM,KAAKC,SAAAA;AACL,QAAA,WAAWC,sBAAkB,KAAK;AACxC,QAAM,QAAQ,SAAS;AACvB,QAAM,SAASC,SAAAA,aAAa,KAAK,SAAS,QAAQ,UAAU;AAC5D,QAAM,iBAAiB,SAAS;AAChC,QAAM,EAAE,KAAK,SAAS,OAAO,IAAIC,8BAAAA,8BAA8B,QAAQ;AACvE,QAAM,CAAC,aAAa,cAAc,IAAIC,iBAAM,SAAkC,IAAI;AAElFC,QAAAA,UAAU,MAAM;AACf,QAAI,CAAC,aAAa;AACjB;AAAA,IACD;AACA,gBAAY,gBAAgB,UAAU;AAAA,EACpC,GAAA,CAAC,aAAa,KAAK,KAAK,CAAC;AAG1B,SAAAC,8BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,KAAK,CAAM,OAAA;AACT,YAAY,UAAU;AACvB,uBAAe,EAAE;AAAA,MAClB;AAAA,MACA,MAAK;AAAA,MACL,SAAS,SAAS,UAAU;AAAA,MAC5B,cAAY,UAAU,OAAO,kBAAmB,QAAQ,YAAY;AAAA,MACpE,gBAAcC,UAAA,cAAc,OAAO,SAAS,CAAC;AAAA,MAC7C,IAAI,GAAG,EAAE;AAAA,MACT;AAAA,MACA;AAAA,MACA,UAAUC,MAAAA,YAAkD,CAAK,MAAA;AAChE,uBAAiB,EAAA,YAAY,EAAE,OAAO,OAAO;AAAA,MAAA,GAC3C,CAAC,cAAc,CAAC;AAAA,MAClB,GAAG;AAAA,IAAA;AAAA,IAfL;AAAA,IAAA;AAAA,IAAA;AAAA,MAAA,UAAA;AAAA,MAAA,YAAA;AAAA,MAAA,cAAA;AAAA,IAAA;AAAA,IAAAC;AAAAA,EAAA;AAkBH,GAAG,CAAC,EAAE,OAAO,cAAc,aAAA,GAAgB,QAAQ;AAC5C,QAAA,OAAOC,wCAA2B,0BAA0B,KAAK,EAAE,MAAO,CAAA,EAAE;AAC5E,QAAA,uBAAuB,iBAAiB,SAAY,eAAgB,KAAK,MAAM,iBAAiB,KAAK,MAAM,WAAW,OAAO;AAEnI,SAAQJ,8BAAA,OAAAK,oBAAA,EAAM,OAAc,cAA4B,cAAc,qBAA/D,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAqF,GAAAF,MAAA;AAC7F,CAAC;;"}

package/dist/development/components/FormCheckbox.js

@@ -19,15 +19,15 @@ const FormCheckbox = Component(({ field, isNonbearing, defaultValue, ...props })
     if (!checkboxRef) {
       return;
     }
-    ref.current = checkboxRef;
-    if (value === null) {
-      checkboxRef.indeterminate = true;
-    }
+    checkboxRef.indeterminate = value === null;
   }, [checkboxRef, ref, value]);
   return /* @__PURE__ */ jsxDEV(
     SlotInput,
     {
-      ref: setCheckboxRef,
+      ref: (it) => {
+        ref.current = checkboxRef;
+        setCheckboxRef(it);
+      },
       type: "checkbox",
       checked: accessor.value === true,
       "data-state": value === null ? "indeterminate" : value ? "checked" : "unchecked",
@@ -44,7 +44,7 @@ const FormCheckbox = Component(({ field, isNonbearing, defaultValue, ...props })
     false,
     {
       fileName: "/__w/interface/interface/packages/react-form/src/components/FormCheckbox.tsx",
-      lineNumber: 38,
+      lineNumber: 35,
       columnNumber: 4
     },
     void 0

package/dist/development/components/FormCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormCheckbox.js","sources":["../../../src/components/FormCheckbox.tsx"],"sourcesContent":["import * as React from 'react'\nimport { ChangeEventHandler, ReactElement, useCallback, useEffect } from 'react'\nimport { Component, Field, OptionallyVariableFieldValue, SugaredRelativeSingleField, TreeNodeEnvironmentFactory, useField } from '@contember/react-binding'\nimport { useFormError, useFormFieldId } from '../contexts'\nimport { dataAttribute } from '@contember/utilities'\nimport { useFormInputValidationHandler } from '../hooks'\nimport { Slot } from '@radix-ui/react-slot'\n\nconst SlotInput = Slot as React.ForwardRefExoticComponent<React.RefAttributes<HTMLInputElement> & React.InputHTMLAttributes<HTMLInputElement>>\n\nexport interface FormCheckboxProps {\n\tfield: SugaredRelativeSingleField['field']\n\tisNonbearing?: boolean\n\tdefaultValue?: OptionallyVariableFieldValue\n\tchildren: ReactElement<HTMLInputElement, 'input'>\n}\n\nexport const FormCheckbox = Component<FormCheckboxProps>(({ field, isNonbearing, defaultValue, ...props }) => {\n\tconst id = useFormFieldId()\n\tconst accessor = useField<boolean>(field)\n\tconst value = accessor.value\n\tconst errors = useFormError() ?? accessor.errors?.errors ?? []\n\tconst accessorGetter = accessor.getAccessor\n\tconst { ref, onFocus, onBlur } = useFormInputValidationHandler(accessor)\n\tconst [checkboxRef, setCheckboxRef] = React.useState<HTMLInputElement | null>(null)\n\n\tuseEffect(() => {\n\t\tif (!checkboxRef) {\n\t\t\treturn\n\t\t}\n\t\t(ref as any).current = checkboxRef\n\t\tif (value === null) {\n\t\t\tcheckboxRef.indeterminate = true\n\t\t}\n\t}, [checkboxRef, ref, value])\n\n\treturn (\n\t\t\t<SlotInput\n\t\t\t\tref={setCheckboxRef}\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tchecked={accessor.value === true}\n\t\t\t\tdata-state={value === null ? 'indeterminate' : (value ? 'checked' : 'unchecked')}\n\t\t\t\tdata-invalid={dataAttribute(errors.length > 0)}\n\t\t\t\tid={`${id}-input`}\n\t\t\t\tonFocus={onFocus}\n\t\t\t\tonBlur={onBlur}\n\t\t\t\tonChange={useCallback<ChangeEventHandler<HTMLInputElement>>(e => {\n\t\t\t\t\taccessorGetter().updateValue(e.target.checked)\n\t\t\t\t}, [accessorGetter])}\n\t\t\t\t{...props}\n\t\t\t/>\n\t)\n}, ({ field, isNonbearing, defaultValue }, env) => {\n\tconst node = TreeNodeEnvironmentFactory.createEnvironmentForField(env, { field }).getSubTreeNode()\n\tconst resolvedDefaultValue = defaultValue !== undefined ? defaultValue : (node.field.defaultValue ?? (node.field.nullable ? null : false))\n\n\treturn <Field field={field} isNonbearing={isNonbearing} defaultValue={resolvedDefaultValue} />\n})\n"],"names":["this"],"mappings":";;;;;;;;AAQA,MAAM,YAAY;AASL,MAAA,eAAe,UAA6B,CAAC,EAAE,OAAO,cAAc,cAAc,GAAG,YAAY;AAC7G,QAAM,KAAK;AACL,QAAA,WAAW,SAAkB,KAAK;AACxC,QAAM,QAAQ,SAAS;AACvB,QAAM,SAAS,aAAa,KAAK,SAAS,QAAQ,UAAU;AAC5D,QAAM,iBAAiB,SAAS;AAChC,QAAM,EAAE,KAAK,SAAS,OAAO,IAAI,8BAA8B,QAAQ;AACvE,QAAM,CAAC,aAAa,cAAc,IAAI,MAAM,SAAkC,IAAI;AAElF,YAAU,MAAM;AACf,QAAI,CAAC,aAAa;AACjB;AAAA,IACD;AACC,QAAY,UAAU;AACvB,QAAI,UAAU,MAAM;AACnB,kBAAY,gBAAgB;AAAA,IAC7B;AAAA,EACE,GAAA,CAAC,aAAa,KAAK,KAAK,CAAC;AAG1B,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,KAAK;AAAA,MACL,MAAK;AAAA,MACL,SAAS,SAAS,UAAU;AAAA,MAC5B,cAAY,UAAU,OAAO,kBAAmB,QAAQ,YAAY;AAAA,MACpE,gBAAc,cAAc,OAAO,SAAS,CAAC;AAAA,MAC7C,IAAI,GAAG,EAAE;AAAA,MACT;AAAA,MACA;AAAA,MACA,UAAU,YAAkD,CAAK,MAAA;AAChE,uBAAiB,EAAA,YAAY,EAAE,OAAO,OAAO;AAAA,MAAA,GAC3C,CAAC,cAAc,CAAC;AAAA,MAClB,GAAG;AAAA,IAAA;AAAA,IAZL;AAAA,IAAA;AAAA,IAAA;AAAA,MAAA,UAAA;AAAA,MAAA,YAAA;AAAA,MAAA,cAAA;AAAA,IAAA;AAAA,IAAAA;AAAAA,EAAA;AAeH,GAAG,CAAC,EAAE,OAAO,cAAc,aAAA,GAAgB,QAAQ;AAC5C,QAAA,OAAO,2BAA2B,0BAA0B,KAAK,EAAE,MAAO,CAAA,EAAE;AAC5E,QAAA,uBAAuB,iBAAiB,SAAY,eAAgB,KAAK,MAAM,iBAAiB,KAAK,MAAM,WAAW,OAAO;AAEnI,SAAQ,uBAAA,OAAA,EAAM,OAAc,cAA4B,cAAc,qBAA/D,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAqF,GAAAA,MAAA;AAC7F,CAAC;"}
+{"version":3,"file":"FormCheckbox.js","sources":["../../../src/components/FormCheckbox.tsx"],"sourcesContent":["import * as React from 'react'\nimport { ChangeEventHandler, ReactElement, useCallback, useEffect } from 'react'\nimport { Component, Field, OptionallyVariableFieldValue, SugaredRelativeSingleField, TreeNodeEnvironmentFactory, useField } from '@contember/react-binding'\nimport { useFormError, useFormFieldId } from '../contexts'\nimport { dataAttribute } from '@contember/utilities'\nimport { useFormInputValidationHandler } from '../hooks'\nimport { Slot } from '@radix-ui/react-slot'\n\nconst SlotInput = Slot as React.ForwardRefExoticComponent<React.RefAttributes<HTMLInputElement> & React.InputHTMLAttributes<HTMLInputElement>>\n\nexport interface FormCheckboxProps {\n\tfield: SugaredRelativeSingleField['field']\n\tisNonbearing?: boolean\n\tdefaultValue?: OptionallyVariableFieldValue\n\tchildren: ReactElement<HTMLInputElement, 'input'>\n}\n\nexport const FormCheckbox = Component<FormCheckboxProps>(({ field, isNonbearing, defaultValue, ...props }) => {\n\tconst id = useFormFieldId()\n\tconst accessor = useField<boolean>(field)\n\tconst value = accessor.value\n\tconst errors = useFormError() ?? accessor.errors?.errors ?? []\n\tconst accessorGetter = accessor.getAccessor\n\tconst { ref, onFocus, onBlur } = useFormInputValidationHandler(accessor)\n\tconst [checkboxRef, setCheckboxRef] = React.useState<HTMLInputElement | null>(null)\n\n\tuseEffect(() => {\n\t\tif (!checkboxRef) {\n\t\t\treturn\n\t\t}\n\t\tcheckboxRef.indeterminate = value === null\n\t}, [checkboxRef, ref, value])\n\n\treturn (\n\t\t\t<SlotInput\n\t\t\t\tref={it => {\n\t\t\t\t\t(ref as any).current = checkboxRef\n\t\t\t\t\tsetCheckboxRef(it)\n\t\t\t\t}}\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tchecked={accessor.value === true}\n\t\t\t\tdata-state={value === null ? 'indeterminate' : (value ? 'checked' : 'unchecked')}\n\t\t\t\tdata-invalid={dataAttribute(errors.length > 0)}\n\t\t\t\tid={`${id}-input`}\n\t\t\t\tonFocus={onFocus}\n\t\t\t\tonBlur={onBlur}\n\t\t\t\tonChange={useCallback<ChangeEventHandler<HTMLInputElement>>(e => {\n\t\t\t\t\taccessorGetter().updateValue(e.target.checked)\n\t\t\t\t}, [accessorGetter])}\n\t\t\t\t{...props}\n\t\t\t/>\n\t)\n}, ({ field, isNonbearing, defaultValue }, env) => {\n\tconst node = TreeNodeEnvironmentFactory.createEnvironmentForField(env, { field }).getSubTreeNode()\n\tconst resolvedDefaultValue = defaultValue !== undefined ? defaultValue : (node.field.defaultValue ?? (node.field.nullable ? null : false))\n\n\treturn <Field field={field} isNonbearing={isNonbearing} defaultValue={resolvedDefaultValue} />\n})\n"],"names":["this"],"mappings":";;;;;;;;AAQA,MAAM,YAAY;AASL,MAAA,eAAe,UAA6B,CAAC,EAAE,OAAO,cAAc,cAAc,GAAG,YAAY;AAC7G,QAAM,KAAK;AACL,QAAA,WAAW,SAAkB,KAAK;AACxC,QAAM,QAAQ,SAAS;AACvB,QAAM,SAAS,aAAa,KAAK,SAAS,QAAQ,UAAU;AAC5D,QAAM,iBAAiB,SAAS;AAChC,QAAM,EAAE,KAAK,SAAS,OAAO,IAAI,8BAA8B,QAAQ;AACvE,QAAM,CAAC,aAAa,cAAc,IAAI,MAAM,SAAkC,IAAI;AAElF,YAAU,MAAM;AACf,QAAI,CAAC,aAAa;AACjB;AAAA,IACD;AACA,gBAAY,gBAAgB,UAAU;AAAA,EACpC,GAAA,CAAC,aAAa,KAAK,KAAK,CAAC;AAG1B,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,KAAK,CAAM,OAAA;AACT,YAAY,UAAU;AACvB,uBAAe,EAAE;AAAA,MAClB;AAAA,MACA,MAAK;AAAA,MACL,SAAS,SAAS,UAAU;AAAA,MAC5B,cAAY,UAAU,OAAO,kBAAmB,QAAQ,YAAY;AAAA,MACpE,gBAAc,cAAc,OAAO,SAAS,CAAC;AAAA,MAC7C,IAAI,GAAG,EAAE;AAAA,MACT;AAAA,MACA;AAAA,MACA,UAAU,YAAkD,CAAK,MAAA;AAChE,uBAAiB,EAAA,YAAY,EAAE,OAAO,OAAO;AAAA,MAAA,GAC3C,CAAC,cAAc,CAAC;AAAA,MAClB,GAAG;AAAA,IAAA;AAAA,IAfL;AAAA,IAAA;AAAA,IAAA;AAAA,MAAA,UAAA;AAAA,MAAA,YAAA;AAAA,MAAA,cAAA;AAAA,IAAA;AAAA,IAAAA;AAAAA,EAAA;AAkBH,GAAG,CAAC,EAAE,OAAO,cAAc,aAAA,GAAgB,QAAQ;AAC5C,QAAA,OAAO,2BAA2B,0BAA0B,KAAK,EAAE,MAAO,CAAA,EAAE;AAC5E,QAAA,uBAAuB,iBAAiB,SAAY,eAAgB,KAAK,MAAM,iBAAiB,KAAK,MAAM,WAAW,OAAO;AAEnI,SAAQ,uBAAA,OAAA,EAAM,OAAc,cAA4B,cAAc,qBAA/D,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAqF,GAAAA,MAAA;AAC7F,CAAC;"}

package/dist/development/components/FormInput.cjs

@@ -9,11 +9,11 @@ const useFormInputHandler = require("../internal/useFormInputHandler.cjs");
 const contexts = require("../contexts.cjs");
 const useFormInputValidationHandler = require("../hooks/useFormInputValidationHandler.cjs");
 const SlotInput = reactSlot.Slot;
-const FormInput = reactBinding.Component(({ field, isNonbearing, defaultValue, ...props }) => {
+const FormInput = reactBinding.Component(({ field, isNonbearing, defaultValue, formatValue: formatValueIn, parseValue: parseValueIn, ...props }) => {
   const id = contexts.useFormFieldId();
   const accessor = reactBinding.useField(field);
   const errors = contexts.useFormError() ?? accessor.errors?.errors ?? [];
-  const { parseValue, formatValue, defaultInputProps } = useFormInputHandler.useFormInputHandler(accessor);
+  const { parseValue, formatValue, defaultInputProps } = useFormInputHandler.useFormInputHandler(accessor, { formatValue: formatValueIn, parseValue: parseValueIn });
   const accessorGetter = accessor.getAccessor;
   const { ref, onFocus, onBlur } = useFormInputValidationHandler.useFormInputValidationHandler(accessor);
   return /* @__PURE__ */ jsxDevRuntime.jsxDEV(
@@ -36,7 +36,7 @@ const FormInput = reactBinding.Component(({ field, isNonbearing, defaultValue, .
     false,
     {
       fileName: "/__w/interface/interface/packages/react-form/src/components/FormInput.tsx",
-      lineNumber: 29,
+      lineNumber: 32,
       columnNumber: 3
     },
     void 0
@@ -44,7 +44,7 @@ const FormInput = reactBinding.Component(({ field, isNonbearing, defaultValue, .
 }, ({ field, isNonbearing, defaultValue }) => {
   return /* @__PURE__ */ jsxDevRuntime.jsxDEV(reactBinding.Field, { field, isNonbearing, defaultValue }, void 0, false, {
     fileName: "/__w/interface/interface/packages/react-form/src/components/FormInput.tsx",
-    lineNumber: 45,
+    lineNumber: 48,
     columnNumber: 9
   }, void 0);
 });

package/dist/development/components/FormInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormInput.cjs","sources":["../../../src/components/FormInput.tsx"],"sourcesContent":["import * as React from 'react'\nimport { ChangeEventHandler, ComponentType, useCallback } from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { Component, Field, OptionallyVariableFieldValue, SugaredRelativeSingleField, useField } from '@contember/react-binding'\nimport { dataAttribute } from '@contember/utilities'\nimport { useFormInputHandler } from '../internal/useFormInputHandler'\nimport { useFormError, useFormFieldId } from '../contexts'\nimport { useFormInputValidationHandler } from '../hooks/useFormInputValidationHandler'\n\ntype InputProps = React.JSX.IntrinsicElements['input']\nconst SlotInput = Slot as ComponentType<InputProps>\n\nexport interface FormInputProps {\n\tfield: SugaredRelativeSingleField['field']\n\tisNonbearing?: boolean\n\tdefaultValue?: OptionallyVariableFieldValue\n\tchildren: React.ReactElement\n}\n\nexport const FormInput = Component<FormInputProps>(({ field, isNonbearing, defaultValue, ...props }) => {\n\tconst id = useFormFieldId()\n\tconst accessor = useField(field)\n\tconst errors = useFormError() ?? accessor.errors?.errors ?? []\n\tconst { parseValue, formatValue, defaultInputProps } = useFormInputHandler(accessor)\n\tconst accessorGetter = accessor.getAccessor\n\tconst { ref, onFocus, onBlur } = useFormInputValidationHandler(accessor)\n\n\treturn (\n\t\t<SlotInput\n\t\t\tref={ref}\n\t\t\tvalue={formatValue(accessor.value)}\n\t\t\tdata-invalid={dataAttribute(errors.length > 0)}\n\t\t\tonFocus={onFocus}\n\t\t\tonBlur={onBlur}\n\t\t\tonChange={useCallback<ChangeEventHandler<HTMLInputElement>>(e => {\n\t\t\t\taccessorGetter().updateValue(parseValue(e.target.value))\n\t\t\t}, [accessorGetter, parseValue])}\n\t\t\t{...defaultInputProps}\n\t\t\tid={id ? `${id}-input` : undefined}\n\t\t\trequired={!accessor.schema.nullable}\n\t\t\t{...props}\n\t\t/>\n\t)\n}, ({ field, isNonbearing, defaultValue }) => {\n\treturn <Field field={field} isNonbearing={isNonbearing} defaultValue={defaultValue} />\n})\n"],"names":["Slot","Component","useFormFieldId","useField","useFormError","useFormInputHandler","useFormInputValidationHandler","jsxDEV","dataAttribute","useCallback","this","Field"],"mappings":";;;;;;;;;;AAUA,MAAM,YAAYA,UAAAA;AASL,MAAA,YAAYC,uBAA0B,CAAC,EAAE,OAAO,cAAc,cAAc,GAAG,YAAY;AACvG,QAAM,KAAKC,SAAAA;AACL,QAAA,WAAWC,sBAAS,KAAK;AAC/B,QAAM,SAASC,SAAAA,aAAa,KAAK,SAAS,QAAQ,UAAU;AAC5D,QAAM,EAAE,YAAY,aAAa,kBAAkB,IAAIC,oBAAAA,oBAAoB,QAAQ;AACnF,QAAM,iBAAiB,SAAS;AAChC,QAAM,EAAE,KAAK,SAAS,OAAO,IAAIC,8BAAAA,8BAA8B,QAAQ;AAGtE,SAAAC,8BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACA;AAAA,MACA,OAAO,YAAY,SAAS,KAAK;AAAA,MACjC,gBAAcC,UAAA,cAAc,OAAO,SAAS,CAAC;AAAA,MAC7C;AAAA,MACA;AAAA,MACA,UAAUC,MAAAA,YAAkD,CAAK,MAAA;AAChE,uBAAA,EAAiB,YAAY,WAAW,EAAE,OAAO,KAAK,CAAC;AAAA,MAAA,GACrD,CAAC,gBAAgB,UAAU,CAAC;AAAA,MAC9B,GAAG;AAAA,MACJ,IAAI,KAAK,GAAG,EAAE,WAAW;AAAA,MACzB,UAAU,CAAC,SAAS,OAAO;AAAA,MAC1B,GAAG;AAAA,IAAA;AAAA,IAZL;AAAA,IAAA;AAAA,IAAA;AAAA,MAAA,UAAA;AAAA,MAAA,YAAA;AAAA,MAAA,cAAA;AAAA,IAAA;AAAA,IAAAC;AAAAA,EAAA;AAeF,GAAG,CAAC,EAAE,OAAO,cAAc,mBAAmB;AAC7C,SAAQH,8BAAA,OAAAI,aAAA,OAAA,EAAM,OAAc,cAA4B,aAAjD,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAA6E,GAAAD,MAAA;AACrF,CAAC;;"}
+{"version":3,"file":"FormInput.cjs","sources":["../../../src/components/FormInput.tsx"],"sourcesContent":["import * as React from 'react'\nimport { ChangeEventHandler, ComponentType, useCallback } from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { Component, Field, OptionallyVariableFieldValue, SugaredRelativeSingleField, useField } from '@contember/react-binding'\nimport { dataAttribute } from '@contember/utilities'\nimport { useFormInputHandler } from '../internal/useFormInputHandler'\nimport { useFormError, useFormFieldId } from '../contexts'\nimport { useFormInputValidationHandler } from '../hooks/useFormInputValidationHandler'\nimport { FormInputHandler } from '../types'\n\ntype InputProps = React.JSX.IntrinsicElements['input']\nconst SlotInput = Slot as ComponentType<InputProps>\n\nexport interface FormInputProps {\n\tfield: SugaredRelativeSingleField['field']\n\tisNonbearing?: boolean\n\tdefaultValue?: OptionallyVariableFieldValue\n\tchildren: React.ReactElement\n\tformatValue?: FormInputHandler['formatValue']\n\tparseValue?: FormInputHandler['parseValue']\n}\n\nexport const FormInput = Component<FormInputProps>(({ field, isNonbearing, defaultValue, formatValue: formatValueIn, parseValue: parseValueIn, ...props }) => {\n\tconst id = useFormFieldId()\n\tconst accessor = useField(field)\n\tconst errors = useFormError() ?? accessor.errors?.errors ?? []\n\tconst { parseValue, formatValue, defaultInputProps } = useFormInputHandler(accessor, { formatValue: formatValueIn, parseValue: parseValueIn })\n\tconst accessorGetter = accessor.getAccessor\n\tconst { ref, onFocus, onBlur } = useFormInputValidationHandler(accessor)\n\n\treturn (\n\t\t<SlotInput\n\t\t\tref={ref}\n\t\t\tvalue={formatValue(accessor.value)}\n\t\t\tdata-invalid={dataAttribute(errors.length > 0)}\n\t\t\tonFocus={onFocus}\n\t\t\tonBlur={onBlur}\n\t\t\tonChange={useCallback<ChangeEventHandler<HTMLInputElement>>(e => {\n\t\t\t\taccessorGetter().updateValue(parseValue(e.target.value))\n\t\t\t}, [accessorGetter, parseValue])}\n\t\t\t{...defaultInputProps}\n\t\t\tid={id ? `${id}-input` : undefined}\n\t\t\trequired={!accessor.schema.nullable}\n\t\t\t{...props}\n\t\t/>\n\t)\n}, ({ field, isNonbearing, defaultValue }) => {\n\treturn <Field field={field} isNonbearing={isNonbearing} defaultValue={defaultValue} />\n})\n"],"names":["Slot","Component","useFormFieldId","useField","useFormError","useFormInputHandler","useFormInputValidationHandler","jsxDEV","dataAttribute","useCallback","this","Field"],"mappings":";;;;;;;;;;AAWA,MAAM,YAAYA,UAAAA;AAWX,MAAM,YAAYC,aAAA,UAA0B,CAAC,EAAE,OAAO,cAAc,cAAc,aAAa,eAAe,YAAY,cAAc,GAAG,YAAY;AAC7J,QAAM,KAAKC,SAAAA;AACL,QAAA,WAAWC,sBAAS,KAAK;AAC/B,QAAM,SAASC,SAAAA,aAAa,KAAK,SAAS,QAAQ,UAAU;AAC5D,QAAM,EAAE,YAAY,aAAa,kBAAsB,IAAAC,oBAAA,oBAAoB,UAAU,EAAE,aAAa,eAAe,YAAY,aAAc,CAAA;AAC7I,QAAM,iBAAiB,SAAS;AAChC,QAAM,EAAE,KAAK,SAAS,OAAO,IAAIC,8BAAAA,8BAA8B,QAAQ;AAGtE,SAAAC,8BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACA;AAAA,MACA,OAAO,YAAY,SAAS,KAAK;AAAA,MACjC,gBAAcC,UAAA,cAAc,OAAO,SAAS,CAAC;AAAA,MAC7C;AAAA,MACA;AAAA,MACA,UAAUC,MAAAA,YAAkD,CAAK,MAAA;AAChE,uBAAA,EAAiB,YAAY,WAAW,EAAE,OAAO,KAAK,CAAC;AAAA,MAAA,GACrD,CAAC,gBAAgB,UAAU,CAAC;AAAA,MAC9B,GAAG;AAAA,MACJ,IAAI,KAAK,GAAG,EAAE,WAAW;AAAA,MACzB,UAAU,CAAC,SAAS,OAAO;AAAA,MAC1B,GAAG;AAAA,IAAA;AAAA,IAZL;AAAA,IAAA;AAAA,IAAA;AAAA,MAAA,UAAA;AAAA,MAAA,YAAA;AAAA,MAAA,cAAA;AAAA,IAAA;AAAA,IAAAC;AAAAA,EAAA;AAeF,GAAG,CAAC,EAAE,OAAO,cAAc,mBAAmB;AAC7C,SAAQH,8BAAA,OAAAI,aAAA,OAAA,EAAM,OAAc,cAA4B,aAAjD,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAA6E,GAAAD,MAAA;AACrF,CAAC;;"}

package/dist/development/components/FormInput.js

@@ -7,11 +7,11 @@ import { useFormInputHandler } from "../internal/useFormInputHandler.js";
 import { useFormFieldId, useFormError } from "../contexts.js";
 import { useFormInputValidationHandler } from "../hooks/useFormInputValidationHandler.js";
 const SlotInput = Slot;
-const FormInput = Component(({ field, isNonbearing, defaultValue, ...props }) => {
+const FormInput = Component(({ field, isNonbearing, defaultValue, formatValue: formatValueIn, parseValue: parseValueIn, ...props }) => {
   const id = useFormFieldId();
   const accessor = useField(field);
   const errors = useFormError() ?? accessor.errors?.errors ?? [];
-  const { parseValue, formatValue, defaultInputProps } = useFormInputHandler(accessor);
+  const { parseValue, formatValue, defaultInputProps } = useFormInputHandler(accessor, { formatValue: formatValueIn, parseValue: parseValueIn });
   const accessorGetter = accessor.getAccessor;
   const { ref, onFocus, onBlur } = useFormInputValidationHandler(accessor);
   return /* @__PURE__ */ jsxDEV(
@@ -34,7 +34,7 @@ const FormInput = Component(({ field, isNonbearing, defaultValue, ...props }) =>
     false,
     {
       fileName: "/__w/interface/interface/packages/react-form/src/components/FormInput.tsx",
-      lineNumber: 29,
+      lineNumber: 32,
       columnNumber: 3
     },
     void 0
@@ -42,7 +42,7 @@ const FormInput = Component(({ field, isNonbearing, defaultValue, ...props }) =>
 }, ({ field, isNonbearing, defaultValue }) => {
   return /* @__PURE__ */ jsxDEV(Field, { field, isNonbearing, defaultValue }, void 0, false, {
     fileName: "/__w/interface/interface/packages/react-form/src/components/FormInput.tsx",
-    lineNumber: 45,
+    lineNumber: 48,
     columnNumber: 9
   }, void 0);
 });

package/dist/development/components/FormInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormInput.js","sources":["../../../src/components/FormInput.tsx"],"sourcesContent":["import * as React from 'react'\nimport { ChangeEventHandler, ComponentType, useCallback } from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { Component, Field, OptionallyVariableFieldValue, SugaredRelativeSingleField, useField } from '@contember/react-binding'\nimport { dataAttribute } from '@contember/utilities'\nimport { useFormInputHandler } from '../internal/useFormInputHandler'\nimport { useFormError, useFormFieldId } from '../contexts'\nimport { useFormInputValidationHandler } from '../hooks/useFormInputValidationHandler'\n\ntype InputProps = React.JSX.IntrinsicElements['input']\nconst SlotInput = Slot as ComponentType<InputProps>\n\nexport interface FormInputProps {\n\tfield: SugaredRelativeSingleField['field']\n\tisNonbearing?: boolean\n\tdefaultValue?: OptionallyVariableFieldValue\n\tchildren: React.ReactElement\n}\n\nexport const FormInput = Component<FormInputProps>(({ field, isNonbearing, defaultValue, ...props }) => {\n\tconst id = useFormFieldId()\n\tconst accessor = useField(field)\n\tconst errors = useFormError() ?? accessor.errors?.errors ?? []\n\tconst { parseValue, formatValue, defaultInputProps } = useFormInputHandler(accessor)\n\tconst accessorGetter = accessor.getAccessor\n\tconst { ref, onFocus, onBlur } = useFormInputValidationHandler(accessor)\n\n\treturn (\n\t\t<SlotInput\n\t\t\tref={ref}\n\t\t\tvalue={formatValue(accessor.value)}\n\t\t\tdata-invalid={dataAttribute(errors.length > 0)}\n\t\t\tonFocus={onFocus}\n\t\t\tonBlur={onBlur}\n\t\t\tonChange={useCallback<ChangeEventHandler<HTMLInputElement>>(e => {\n\t\t\t\taccessorGetter().updateValue(parseValue(e.target.value))\n\t\t\t}, [accessorGetter, parseValue])}\n\t\t\t{...defaultInputProps}\n\t\t\tid={id ? `${id}-input` : undefined}\n\t\t\trequired={!accessor.schema.nullable}\n\t\t\t{...props}\n\t\t/>\n\t)\n}, ({ field, isNonbearing, defaultValue }) => {\n\treturn <Field field={field} isNonbearing={isNonbearing} defaultValue={defaultValue} />\n})\n"],"names":["this"],"mappings":";;;;;;;;AAUA,MAAM,YAAY;AASL,MAAA,YAAY,UAA0B,CAAC,EAAE,OAAO,cAAc,cAAc,GAAG,YAAY;AACvG,QAAM,KAAK;AACL,QAAA,WAAW,SAAS,KAAK;AAC/B,QAAM,SAAS,aAAa,KAAK,SAAS,QAAQ,UAAU;AAC5D,QAAM,EAAE,YAAY,aAAa,kBAAkB,IAAI,oBAAoB,QAAQ;AACnF,QAAM,iBAAiB,SAAS;AAChC,QAAM,EAAE,KAAK,SAAS,OAAO,IAAI,8BAA8B,QAAQ;AAGtE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACA;AAAA,MACA,OAAO,YAAY,SAAS,KAAK;AAAA,MACjC,gBAAc,cAAc,OAAO,SAAS,CAAC;AAAA,MAC7C;AAAA,MACA;AAAA,MACA,UAAU,YAAkD,CAAK,MAAA;AAChE,uBAAA,EAAiB,YAAY,WAAW,EAAE,OAAO,KAAK,CAAC;AAAA,MAAA,GACrD,CAAC,gBAAgB,UAAU,CAAC;AAAA,MAC9B,GAAG;AAAA,MACJ,IAAI,KAAK,GAAG,EAAE,WAAW;AAAA,MACzB,UAAU,CAAC,SAAS,OAAO;AAAA,MAC1B,GAAG;AAAA,IAAA;AAAA,IAZL;AAAA,IAAA;AAAA,IAAA;AAAA,MAAA,UAAA;AAAA,MAAA,YAAA;AAAA,MAAA,cAAA;AAAA,IAAA;AAAA,IAAAA;AAAAA,EAAA;AAeF,GAAG,CAAC,EAAE,OAAO,cAAc,mBAAmB;AAC7C,SAAQ,uBAAA,OAAA,EAAM,OAAc,cAA4B,aAAjD,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAA6E,GAAAA,MAAA;AACrF,CAAC;"}
+{"version":3,"file":"FormInput.js","sources":["../../../src/components/FormInput.tsx"],"sourcesContent":["import * as React from 'react'\nimport { ChangeEventHandler, ComponentType, useCallback } from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { Component, Field, OptionallyVariableFieldValue, SugaredRelativeSingleField, useField } from '@contember/react-binding'\nimport { dataAttribute } from '@contember/utilities'\nimport { useFormInputHandler } from '../internal/useFormInputHandler'\nimport { useFormError, useFormFieldId } from '../contexts'\nimport { useFormInputValidationHandler } from '../hooks/useFormInputValidationHandler'\nimport { FormInputHandler } from '../types'\n\ntype InputProps = React.JSX.IntrinsicElements['input']\nconst SlotInput = Slot as ComponentType<InputProps>\n\nexport interface FormInputProps {\n\tfield: SugaredRelativeSingleField['field']\n\tisNonbearing?: boolean\n\tdefaultValue?: OptionallyVariableFieldValue\n\tchildren: React.ReactElement\n\tformatValue?: FormInputHandler['formatValue']\n\tparseValue?: FormInputHandler['parseValue']\n}\n\nexport const FormInput = Component<FormInputProps>(({ field, isNonbearing, defaultValue, formatValue: formatValueIn, parseValue: parseValueIn, ...props }) => {\n\tconst id = useFormFieldId()\n\tconst accessor = useField(field)\n\tconst errors = useFormError() ?? accessor.errors?.errors ?? []\n\tconst { parseValue, formatValue, defaultInputProps } = useFormInputHandler(accessor, { formatValue: formatValueIn, parseValue: parseValueIn })\n\tconst accessorGetter = accessor.getAccessor\n\tconst { ref, onFocus, onBlur } = useFormInputValidationHandler(accessor)\n\n\treturn (\n\t\t<SlotInput\n\t\t\tref={ref}\n\t\t\tvalue={formatValue(accessor.value)}\n\t\t\tdata-invalid={dataAttribute(errors.length > 0)}\n\t\t\tonFocus={onFocus}\n\t\t\tonBlur={onBlur}\n\t\t\tonChange={useCallback<ChangeEventHandler<HTMLInputElement>>(e => {\n\t\t\t\taccessorGetter().updateValue(parseValue(e.target.value))\n\t\t\t}, [accessorGetter, parseValue])}\n\t\t\t{...defaultInputProps}\n\t\t\tid={id ? `${id}-input` : undefined}\n\t\t\trequired={!accessor.schema.nullable}\n\t\t\t{...props}\n\t\t/>\n\t)\n}, ({ field, isNonbearing, defaultValue }) => {\n\treturn <Field field={field} isNonbearing={isNonbearing} defaultValue={defaultValue} />\n})\n"],"names":["this"],"mappings":";;;;;;;;AAWA,MAAM,YAAY;AAWX,MAAM,YAAY,UAA0B,CAAC,EAAE,OAAO,cAAc,cAAc,aAAa,eAAe,YAAY,cAAc,GAAG,YAAY;AAC7J,QAAM,KAAK;AACL,QAAA,WAAW,SAAS,KAAK;AAC/B,QAAM,SAAS,aAAa,KAAK,SAAS,QAAQ,UAAU;AAC5D,QAAM,EAAE,YAAY,aAAa,kBAAsB,IAAA,oBAAoB,UAAU,EAAE,aAAa,eAAe,YAAY,aAAc,CAAA;AAC7I,QAAM,iBAAiB,SAAS;AAChC,QAAM,EAAE,KAAK,SAAS,OAAO,IAAI,8BAA8B,QAAQ;AAGtE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACA;AAAA,MACA,OAAO,YAAY,SAAS,KAAK;AAAA,MACjC,gBAAc,cAAc,OAAO,SAAS,CAAC;AAAA,MAC7C;AAAA,MACA;AAAA,MACA,UAAU,YAAkD,CAAK,MAAA;AAChE,uBAAA,EAAiB,YAAY,WAAW,EAAE,OAAO,KAAK,CAAC;AAAA,MAAA,GACrD,CAAC,gBAAgB,UAAU,CAAC;AAAA,MAC9B,GAAG;AAAA,MACJ,IAAI,KAAK,GAAG,EAAE,WAAW;AAAA,MACzB,UAAU,CAAC,SAAS,OAAO;AAAA,MAC1B,GAAG;AAAA,IAAA;AAAA,IAZL;AAAA,IAAA;AAAA,IAAA;AAAA,MAAA,UAAA;AAAA,MAAA,YAAA;AAAA,MAAA,cAAA;AAAA,IAAA;AAAA,IAAAA;AAAAA,EAAA;AAeF,GAAG,CAAC,EAAE,OAAO,cAAc,mBAAmB;AAC7C,SAAQ,uBAAA,OAAA,EAAM,OAAc,cAA4B,aAAjD,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAA6E,GAAAA,MAAA;AACrF,CAAC;"}

package/dist/development/hooks/useFormInputValidationHandler.cjs

@@ -36,14 +36,21 @@ const useFormInputValidationHandler = (field) => {
     const input = inputRef.current;
     const valid = input.validity?.valid;
     const message = valid ? void 0 : input?.validationMessage;
-    if (message !== validationMessage.current) {
-      validationMessage.current = message;
-      if (!message || !focus) {
-        accessorGetter().clearErrors();
-      }
-      if (!focus && message) {
-        accessorGetter().addError(message);
-      }
+    const previousMessage = validationMessage.current;
+    validationMessage.current = message;
+    if (!message) {
+      accessorGetter().clearErrors();
+      return;
+    }
+    if (message === previousMessage) {
+      return;
+    }
+    if (!field.isTouched) {
+      return;
+    }
+    if (!focus || !!previousMessage) {
+      accessorGetter().clearErrors();
+      accessorGetter().addError(message);
     }
   });
   return {

package/dist/development/hooks/useFormInputValidationHandler.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useFormInputValidationHandler.cjs","sources":["../../../src/hooks/useFormInputValidationHandler.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useCallback, useEffect, useRef } from 'react'\nimport { FieldAccessor, useEntityBeforePersist } from '@contember/react-binding'\n\nexport const useFormInputValidationHandler = (field: FieldAccessor<any>) => {\n\tconst accessorGetter = field.getAccessor\n\tconst validationMessage = useRef<string>()\n\tconst [focus, setFocus] = React.useState(false)\n\tconst inputRef = React.useRef<HTMLInputElement>(null)\n\tuseEntityBeforePersist(useCallback(() => {\n\t\tif (validationMessage.current) {\n\t\t\taccessorGetter().addError(validationMessage.current)\n\t\t}\n\t}, [accessorGetter]))\n\n\tuseEffect(() => {\n\t\tif (!inputRef.current) {\n\t\t\treturn\n\t\t}\n\t\tconst input = inputRef.current\n\t\tconst valid = input.validity?.valid\n\t\tconst message = valid ? undefined : input?.validationMessage\n\t\tif (message !== validationMessage.current) {\n\t\t\tvalidationMessage.current = message\n\t\t\tif (!message || !focus) {\n\t\t\t\taccessorGetter().clearErrors()\n\t\t\t}\n\t\t\tif (!focus && message) {\n\t\t\t\taccessorGetter().addError(message)\n\t\t\t}\n\t\t}\n\t})\n\n\treturn {\n\t\tref: inputRef,\n\t\tonFocus: useCallback(() => {\n\t\t\tsetFocus(true)\n\t\t}, []),\n\t\tonBlur: useCallback(() => {\n\t\t\tsetFocus(false)\n\t\t\taccessorGetter().clearErrors()\n\t\t\tif (validationMessage.current) {\n\t\t\t\taccessorGetter().addError(validationMessage.current)\n\t\t\t}\n\t\t}, [accessorGetter]),\n\t}\n}\n"],"names":["useRef","React","useEntityBeforePersist","useCallback","useEffect"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAIa,MAAA,gCAAgC,CAAC,UAA8B;AAC3E,QAAM,iBAAiB,MAAM;AAC7B,QAAM,oBAAoBA,MAAAA;AAC1B,QAAM,CAAC,OAAO,QAAQ,IAAIC,iBAAM,SAAS,KAAK;AACxC,QAAA,WAAWA,iBAAM,OAAyB,IAAI;AACpDC,eAAA,uBAAuBC,kBAAY,MAAM;AACxC,QAAI,kBAAkB,SAAS;AACf,uBAAE,SAAS,kBAAkB,OAAO;AAAA,IACpD;AAAA,EAAA,GACE,CAAC,cAAc,CAAC,CAAC;AAEpBC,QAAAA,UAAU,MAAM;AACX,QAAA,CAAC,SAAS,SAAS;AACtB;AAAA,IACD;AACA,UAAM,QAAQ,SAAS;AACjB,UAAA,QAAQ,MAAM,UAAU;AACxB,UAAA,UAAU,QAAQ,SAAY,OAAO;AACvC,QAAA,YAAY,kBAAkB,SAAS;AAC1C,wBAAkB,UAAU;AACxB,UAAA,CAAC,WAAW,CAAC,OAAO;AACvB,uBAAA,EAAiB;MAClB;AACI,UAAA,CAAC,SAAS,SAAS;AACP,uBAAA,EAAE,SAAS,OAAO;AAAA,MAClC;AAAA,IACD;AAAA,EAAA,CACA;AAEM,SAAA;AAAA,IACN,KAAK;AAAA,IACL,SAASD,kBAAY,MAAM;AAC1B,eAAS,IAAI;AAAA,IACd,GAAG,EAAE;AAAA,IACL,QAAQA,kBAAY,MAAM;AACzB,eAAS,KAAK;AACd,qBAAA,EAAiB;AACjB,UAAI,kBAAkB,SAAS;AACf,yBAAE,SAAS,kBAAkB,OAAO;AAAA,MACpD;AAAA,IAAA,GACE,CAAC,cAAc,CAAC;AAAA,EAAA;AAErB;;"}
+{"version":3,"file":"useFormInputValidationHandler.cjs","sources":["../../../src/hooks/useFormInputValidationHandler.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useCallback, useEffect, useRef } from 'react'\nimport { FieldAccessor, useEntityBeforePersist } from '@contember/react-binding'\n\nexport const useFormInputValidationHandler = (field: FieldAccessor<any>) => {\n\tconst accessorGetter = field.getAccessor\n\tconst validationMessage = useRef<string>()\n\tconst [focus, setFocus] = React.useState(false)\n\tconst inputRef = React.useRef<HTMLInputElement>(null)\n\tuseEntityBeforePersist(useCallback(() => {\n\t\tif (validationMessage.current) {\n\t\t\taccessorGetter().addError(validationMessage.current)\n\t\t}\n\t}, [accessorGetter]))\n\n\tuseEffect(() => {\n\t\tif (!inputRef.current) {\n\t\t\treturn\n\t\t}\n\n\t\tconst input = inputRef.current\n\t\tconst valid = input.validity?.valid\n\n\t\tconst message = valid ? undefined : input?.validationMessage\n\t\tconst previousMessage = validationMessage.current\n\t\tvalidationMessage.current = message\n\n\t\t// if there is no message, we want to clear the error\n\t\tif (!message) {\n\t\t\taccessorGetter().clearErrors()\n\t\t\treturn\n\t\t}\n\t\tif (message === previousMessage) {\n\t\t\treturn\n\t\t}\n\t\t// if the input is not touched, we don't want to show the error message\n\t\tif (!field.isTouched) {\n\t\t\treturn\n\t\t}\n\n\t\t// if the input is not focused, we want to show the error message\n\t\t// also, even the input is focused, we want to replace the previous message\n\t\tif (!focus || !!previousMessage) {\n\t\t\taccessorGetter().clearErrors()\n\t\t\taccessorGetter().addError(message)\n\t\t}\n\t})\n\n\treturn {\n\t\tref: inputRef,\n\t\tonFocus: useCallback(() => {\n\t\t\tsetFocus(true)\n\t\t}, []),\n\t\tonBlur: useCallback(() => {\n\t\t\tsetFocus(false)\n\t\t\taccessorGetter().clearErrors()\n\t\t\tif (validationMessage.current) {\n\t\t\t\taccessorGetter().addError(validationMessage.current)\n\t\t\t}\n\t\t}, [accessorGetter]),\n\t}\n}\n"],"names":["useRef","React","useEntityBeforePersist","useCallback","useEffect"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAIa,MAAA,gCAAgC,CAAC,UAA8B;AAC3E,QAAM,iBAAiB,MAAM;AAC7B,QAAM,oBAAoBA,MAAAA;AAC1B,QAAM,CAAC,OAAO,QAAQ,IAAIC,iBAAM,SAAS,KAAK;AACxC,QAAA,WAAWA,iBAAM,OAAyB,IAAI;AACpDC,eAAA,uBAAuBC,kBAAY,MAAM;AACxC,QAAI,kBAAkB,SAAS;AACf,uBAAE,SAAS,kBAAkB,OAAO;AAAA,IACpD;AAAA,EAAA,GACE,CAAC,cAAc,CAAC,CAAC;AAEpBC,QAAAA,UAAU,MAAM;AACX,QAAA,CAAC,SAAS,SAAS;AACtB;AAAA,IACD;AAEA,UAAM,QAAQ,SAAS;AACjB,UAAA,QAAQ,MAAM,UAAU;AAExB,UAAA,UAAU,QAAQ,SAAY,OAAO;AAC3C,UAAM,kBAAkB,kBAAkB;AAC1C,sBAAkB,UAAU;AAG5B,QAAI,CAAC,SAAS;AACb,qBAAA,EAAiB;AACjB;AAAA,IACD;AACA,QAAI,YAAY,iBAAiB;AAChC;AAAA,IACD;AAEI,QAAA,CAAC,MAAM,WAAW;AACrB;AAAA,IACD;AAIA,QAAI,CAAC,SAAS,CAAC,CAAC,iBAAiB;AAChC,qBAAA,EAAiB;AACF,qBAAA,EAAE,SAAS,OAAO;AAAA,IAClC;AAAA,EAAA,CACA;AAEM,SAAA;AAAA,IACN,KAAK;AAAA,IACL,SAASD,kBAAY,MAAM;AAC1B,eAAS,IAAI;AAAA,IACd,GAAG,EAAE;AAAA,IACL,QAAQA,kBAAY,MAAM;AACzB,eAAS,KAAK;AACd,qBAAA,EAAiB;AACjB,UAAI,kBAAkB,SAAS;AACf,yBAAE,SAAS,kBAAkB,OAAO;AAAA,MACpD;AAAA,IAAA,GACE,CAAC,cAAc,CAAC;AAAA,EAAA;AAErB;;"}

package/dist/development/hooks/useFormInputValidationHandler.js

@@ -18,14 +18,21 @@ const useFormInputValidationHandler = (field) => {
     const input = inputRef.current;
     const valid = input.validity?.valid;
     const message = valid ? void 0 : input?.validationMessage;
-    if (message !== validationMessage.current) {
-      validationMessage.current = message;
-      if (!message || !focus) {
-        accessorGetter().clearErrors();
-      }
-      if (!focus && message) {
-        accessorGetter().addError(message);
-      }
+    const previousMessage = validationMessage.current;
+    validationMessage.current = message;
+    if (!message) {
+      accessorGetter().clearErrors();
+      return;
+    }
+    if (message === previousMessage) {
+      return;
+    }
+    if (!field.isTouched) {
+      return;
+    }
+    if (!focus || !!previousMessage) {
+      accessorGetter().clearErrors();
+      accessorGetter().addError(message);
     }
   });
   return {

package/dist/development/hooks/useFormInputValidationHandler.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFormInputValidationHandler.js","sources":["../../../src/hooks/useFormInputValidationHandler.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useCallback, useEffect, useRef } from 'react'\nimport { FieldAccessor, useEntityBeforePersist } from '@contember/react-binding'\n\nexport const useFormInputValidationHandler = (field: FieldAccessor<any>) => {\n\tconst accessorGetter = field.getAccessor\n\tconst validationMessage = useRef<string>()\n\tconst [focus, setFocus] = React.useState(false)\n\tconst inputRef = React.useRef<HTMLInputElement>(null)\n\tuseEntityBeforePersist(useCallback(() => {\n\t\tif (validationMessage.current) {\n\t\t\taccessorGetter().addError(validationMessage.current)\n\t\t}\n\t}, [accessorGetter]))\n\n\tuseEffect(() => {\n\t\tif (!inputRef.current) {\n\t\t\treturn\n\t\t}\n\t\tconst input = inputRef.current\n\t\tconst valid = input.validity?.valid\n\t\tconst message = valid ? undefined : input?.validationMessage\n\t\tif (message !== validationMessage.current) {\n\t\t\tvalidationMessage.current = message\n\t\t\tif (!message || !focus) {\n\t\t\t\taccessorGetter().clearErrors()\n\t\t\t}\n\t\t\tif (!focus && message) {\n\t\t\t\taccessorGetter().addError(message)\n\t\t\t}\n\t\t}\n\t})\n\n\treturn {\n\t\tref: inputRef,\n\t\tonFocus: useCallback(() => {\n\t\t\tsetFocus(true)\n\t\t}, []),\n\t\tonBlur: useCallback(() => {\n\t\t\tsetFocus(false)\n\t\t\taccessorGetter().clearErrors()\n\t\t\tif (validationMessage.current) {\n\t\t\t\taccessorGetter().addError(validationMessage.current)\n\t\t\t}\n\t\t}, [accessorGetter]),\n\t}\n}\n"],"names":[],"mappings":";;;AAIa,MAAA,gCAAgC,CAAC,UAA8B;AAC3E,QAAM,iBAAiB,MAAM;AAC7B,QAAM,oBAAoB;AAC1B,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAS,KAAK;AACxC,QAAA,WAAW,MAAM,OAAyB,IAAI;AACpD,yBAAuB,YAAY,MAAM;AACxC,QAAI,kBAAkB,SAAS;AACf,uBAAE,SAAS,kBAAkB,OAAO;AAAA,IACpD;AAAA,EAAA,GACE,CAAC,cAAc,CAAC,CAAC;AAEpB,YAAU,MAAM;AACX,QAAA,CAAC,SAAS,SAAS;AACtB;AAAA,IACD;AACA,UAAM,QAAQ,SAAS;AACjB,UAAA,QAAQ,MAAM,UAAU;AACxB,UAAA,UAAU,QAAQ,SAAY,OAAO;AACvC,QAAA,YAAY,kBAAkB,SAAS;AAC1C,wBAAkB,UAAU;AACxB,UAAA,CAAC,WAAW,CAAC,OAAO;AACvB,uBAAA,EAAiB;MAClB;AACI,UAAA,CAAC,SAAS,SAAS;AACP,uBAAA,EAAE,SAAS,OAAO;AAAA,MAClC;AAAA,IACD;AAAA,EAAA,CACA;AAEM,SAAA;AAAA,IACN,KAAK;AAAA,IACL,SAAS,YAAY,MAAM;AAC1B,eAAS,IAAI;AAAA,IACd,GAAG,EAAE;AAAA,IACL,QAAQ,YAAY,MAAM;AACzB,eAAS,KAAK;AACd,qBAAA,EAAiB;AACjB,UAAI,kBAAkB,SAAS;AACf,yBAAE,SAAS,kBAAkB,OAAO;AAAA,MACpD;AAAA,IAAA,GACE,CAAC,cAAc,CAAC;AAAA,EAAA;AAErB;"}
+{"version":3,"file":"useFormInputValidationHandler.js","sources":["../../../src/hooks/useFormInputValidationHandler.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useCallback, useEffect, useRef } from 'react'\nimport { FieldAccessor, useEntityBeforePersist } from '@contember/react-binding'\n\nexport const useFormInputValidationHandler = (field: FieldAccessor<any>) => {\n\tconst accessorGetter = field.getAccessor\n\tconst validationMessage = useRef<string>()\n\tconst [focus, setFocus] = React.useState(false)\n\tconst inputRef = React.useRef<HTMLInputElement>(null)\n\tuseEntityBeforePersist(useCallback(() => {\n\t\tif (validationMessage.current) {\n\t\t\taccessorGetter().addError(validationMessage.current)\n\t\t}\n\t}, [accessorGetter]))\n\n\tuseEffect(() => {\n\t\tif (!inputRef.current) {\n\t\t\treturn\n\t\t}\n\n\t\tconst input = inputRef.current\n\t\tconst valid = input.validity?.valid\n\n\t\tconst message = valid ? undefined : input?.validationMessage\n\t\tconst previousMessage = validationMessage.current\n\t\tvalidationMessage.current = message\n\n\t\t// if there is no message, we want to clear the error\n\t\tif (!message) {\n\t\t\taccessorGetter().clearErrors()\n\t\t\treturn\n\t\t}\n\t\tif (message === previousMessage) {\n\t\t\treturn\n\t\t}\n\t\t// if the input is not touched, we don't want to show the error message\n\t\tif (!field.isTouched) {\n\t\t\treturn\n\t\t}\n\n\t\t// if the input is not focused, we want to show the error message\n\t\t// also, even the input is focused, we want to replace the previous message\n\t\tif (!focus || !!previousMessage) {\n\t\t\taccessorGetter().clearErrors()\n\t\t\taccessorGetter().addError(message)\n\t\t}\n\t})\n\n\treturn {\n\t\tref: inputRef,\n\t\tonFocus: useCallback(() => {\n\t\t\tsetFocus(true)\n\t\t}, []),\n\t\tonBlur: useCallback(() => {\n\t\t\tsetFocus(false)\n\t\t\taccessorGetter().clearErrors()\n\t\t\tif (validationMessage.current) {\n\t\t\t\taccessorGetter().addError(validationMessage.current)\n\t\t\t}\n\t\t}, [accessorGetter]),\n\t}\n}\n"],"names":[],"mappings":";;;AAIa,MAAA,gCAAgC,CAAC,UAA8B;AAC3E,QAAM,iBAAiB,MAAM;AAC7B,QAAM,oBAAoB;AAC1B,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAS,KAAK;AACxC,QAAA,WAAW,MAAM,OAAyB,IAAI;AACpD,yBAAuB,YAAY,MAAM;AACxC,QAAI,kBAAkB,SAAS;AACf,uBAAE,SAAS,kBAAkB,OAAO;AAAA,IACpD;AAAA,EAAA,GACE,CAAC,cAAc,CAAC,CAAC;AAEpB,YAAU,MAAM;AACX,QAAA,CAAC,SAAS,SAAS;AACtB;AAAA,IACD;AAEA,UAAM,QAAQ,SAAS;AACjB,UAAA,QAAQ,MAAM,UAAU;AAExB,UAAA,UAAU,QAAQ,SAAY,OAAO;AAC3C,UAAM,kBAAkB,kBAAkB;AAC1C,sBAAkB,UAAU;AAG5B,QAAI,CAAC,SAAS;AACb,qBAAA,EAAiB;AACjB;AAAA,IACD;AACA,QAAI,YAAY,iBAAiB;AAChC;AAAA,IACD;AAEI,QAAA,CAAC,MAAM,WAAW;AACrB;AAAA,IACD;AAIA,QAAI,CAAC,SAAS,CAAC,CAAC,iBAAiB;AAChC,qBAAA,EAAiB;AACF,qBAAA,EAAE,SAAS,OAAO;AAAA,IAClC;AAAA,EAAA,CACA;AAEM,SAAA;AAAA,IACN,KAAK;AAAA,IACL,SAAS,YAAY,MAAM;AAC1B,eAAS,IAAI;AAAA,IACd,GAAG,EAAE;AAAA,IACL,QAAQ,YAAY,MAAM;AACzB,eAAS,KAAK;AACd,qBAAA,EAAiB;AACjB,UAAI,kBAAkB,SAAS;AACf,yBAAE,SAAS,kBAAkB,OAAO;AAAA,MACpD;AAAA,IAAA,GACE,CAAC,cAAc,CAAC;AAAA,EAAA;AAErB;"}

package/dist/development/internal/useFormInputHandler.cjs

@@ -1,18 +1,30 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const useFormInputHandler = (field) => {
+const useFormInputHandler = (field, { formatValue, parseValue }) => {
   return React.useMemo(() => {
     const schema = field.schema;
     const columnType = schema.type;
-    const handlerFactory = ColumnTypeHandlerFactories[columnType];
-    if (!handlerFactory) {
-      throw new Error(`Column type ${columnType} is not supported yet`);
-    }
-    return handlerFactory(schema, field.getAccessor);
-  }, [field.getAccessor, field.schema]);
+    const handlerFactory = ColumnTypeHandlerFactories[columnType] ?? defaultHandlerFactory;
+    const handler = handlerFactory(schema, field.getAccessor);
+    return {
+      defaultInputProps: handler.defaultInputProps,
+      formatValue: formatValue ?? handler.formatValue,
+      parseValue: parseValue ?? handler.parseValue
+    };
+  }, [field.getAccessor, field.schema, formatValue, parseValue]);
 };
+const defaultHandlerFactory = (schema, field) => ({
+  parseValue: (value) => {
+    if (value === "" && schema.nullable && field().valueOnServer === null) {
+      return null;
+    }
+    return value;
+  },
+  formatValue: (value) => value ?? ""
+});
 const ColumnTypeHandlerFactories = {
+  String: defaultHandlerFactory,
   Integer: () => ({
     parseValue: (value) => {
       if (value === "") {
@@ -43,15 +55,6 @@ const ColumnTypeHandlerFactories = {
       type: "number"
     }
   }),
-  String: (schema, field) => ({
-    parseValue: (value) => {
-      if (value === "" && schema.nullable && field().valueOnServer === null) {
-        return null;
-      }
-      return value;
-    },
-    formatValue: (value) => value ?? ""
-  }),
   Date: () => ({
     parseValue: (value) => {
       if (value === "") {
@@ -84,15 +87,9 @@ const ColumnTypeHandlerFactories = {
       type: "datetime-local"
     }
   }),
-  Bool: () => {
-    throw new Error("Boolean column type is not supported yet");
-  },
-  Enum: () => {
-    throw new Error("Enum column type is not supported yet");
-  },
-  Uuid: () => {
-    throw new Error("UUID column type is not supported yet");
-  }
+  Bool: void 0,
+  Enum: void 0,
+  Uuid: void 0
 };
 const toLocalDate = (date) => {
   const pad = (num, length = 2) => {

package/dist/development/internal/useFormInputHandler.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useFormInputHandler.cjs","sources":["../../../src/internal/useFormInputHandler.ts"],"sourcesContent":["import { FieldAccessor, SchemaColumn, SchemaKnownColumnType } from '@contember/react-binding'\nimport * as React from 'react'\nimport { useMemo } from 'react'\n\nexport const useFormInputHandler = (field: FieldAccessor) => {\n\treturn useMemo(() => {\n\t\tconst schema = field.schema\n\t\tconst columnType = schema.type\n\t\tconst handlerFactory = ColumnTypeHandlerFactories[columnType as SchemaKnownColumnType]\n\t\tif (!handlerFactory) {\n\t\t\tthrow new Error(`Column type ${columnType} is not supported yet`)\n\t\t}\n\t\treturn handlerFactory(schema, field.getAccessor)\n\t}, [field.getAccessor, field.schema])\n}\n\ntype ColumnTypeHandlerFactory = (column: SchemaColumn, getAccessor: FieldAccessor.GetFieldAccessor) => {\n\tparseValue: (value: string) => any\n\tformatValue: (value: any) => string\n\tdefaultInputProps?: React.InputHTMLAttributes<HTMLInputElement>\n}\n\nconst ColumnTypeHandlerFactories: Record<SchemaKnownColumnType, ColumnTypeHandlerFactory> = {\n\tInteger: () => ({\n\t\tparseValue: (value: string) => {\n\t\t\tif (value === '') {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tconst parsed = parseInt(value, 10)\n\t\t\treturn isNaN(parsed) ? null : parsed\n\t\t},\n\t\tformatValue: (value: number | null) => {\n\t\t\treturn value === null ? '' : value.toString(10)\n\t\t},\n\t\tdefaultInputProps: {\n\t\t\ttype: 'number',\n\t\t},\n\t}),\n\tDouble: () => ({\n\t\tparseValue: (value: string) => {\n\t\t\tif (value === '') {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tconst parsed = parseFloat(value)\n\t\t\treturn isNaN(parsed) ? null : parsed\n\t\t},\n\t\tformatValue: (value: number | null) => {\n\t\t\treturn value === null ? '' : value.toString(10)\n\t\t},\n\t\tdefaultInputProps: {\n\t\t\ttype: 'number',\n\t\t},\n\t}),\n\tString: (schema, field) => ({\n\t\tparseValue: (value: string) => {\n\t\t\tif (value === '' && schema.nullable && field().valueOnServer === null) {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\treturn value\n\t\t},\n\t\tformatValue: (value: string | null) => value ?? '',\n\t}),\n\tDate: () => ({\n\t\tparseValue: (value: string) => {\n\t\t\tif (value === '') {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tconst parsed = Date.parse(value)\n\t\t\treturn isNaN(parsed) ? null : (new Date(parsed)).toISOString().split('T')[0]\n\t\t},\n\t\tformatValue: (value: string | null) => {\n\t\t\tconst parsed = value ? Date.parse(value) : null\n\t\t\treturn !parsed || isNaN(parsed) ? '' : new Date(parsed).toISOString().split('T')[0]\n\t\t},\n\t\tdefaultInputProps: {\n\t\t\ttype: 'date',\n\t\t},\n\t}),\n\tDateTime: () => ({\n\t\tparseValue: (value: string) => {\n\t\t\tif (value === '') {\n\t\t\t\treturn null\n\t\t\t}\n\n\t\t\tconst parsed = Date.parse(value)\n\t\t\treturn isNaN(parsed) ? null : (new Date(parsed)).toISOString()\n\t\t},\n\t\tformatValue: (value: string | null) => {\n\t\t\tconst parsed = value ? Date.parse(value) : null\n\t\t\treturn !parsed || isNaN(parsed) ? '' : toLocalDate(new Date(parsed))\n\t\t},\n\t\tdefaultInputProps: {\n\t\t\ttype: 'datetime-local',\n\t\t},\n\t}),\n\tBool: () => {\n\t\tthrow new Error('Boolean column type is not supported yet')\n\t},\n\tEnum: () => {\n\t\tthrow new Error('Enum column type is not supported yet')\n\t},\n\tUuid: () => {\n\t\tthrow new Error('UUID column type is not supported yet')\n\t},\n}\n\nconst toLocalDate = (date: Date) => {\n\tconst pad = (num: number, length: number = 2) => {\n\t\tconst str = num.toString()\n\t\treturn '0'.repeat(Math.max(0, length - str.length)) + str\n\t}\n\n\treturn pad(date.getFullYear(), 4) +\n\t\t'-' + pad(date.getMonth() + 1) +\n\t\t'-' + pad(date.getDate()) +\n\t\t'T' + pad(date.getHours()) +\n\t\t':' + pad(date.getMinutes()) +\n\t\t':' + pad(date.getSeconds())\n}\n"],"names":["useMemo"],"mappings":"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"}
+{"version":3,"file":"useFormInputHandler.cjs","sources":["../../../src/internal/useFormInputHandler.ts"],"sourcesContent":["import { FieldAccessor, SchemaColumn, SchemaKnownColumnType } from '@contember/react-binding'\nimport { useMemo } from 'react'\nimport { FormInputHandler } from '../types'\n\nexport const useFormInputHandler = (field: FieldAccessor, { formatValue, parseValue }: Partial<FormInputHandler>): FormInputHandler => {\n\treturn useMemo(() => {\n\t\tconst schema = field.schema\n\t\tconst columnType = schema.type\n\t\tconst handlerFactory = ColumnTypeHandlerFactories[columnType as SchemaKnownColumnType] ?? defaultHandlerFactory\n\t\tconst handler = handlerFactory(schema, field.getAccessor)\n\t\treturn {\n\t\t\tdefaultInputProps: handler.defaultInputProps,\n\t\t\tformatValue: formatValue ?? handler.formatValue,\n\t\t\tparseValue: parseValue ?? handler.parseValue,\n\t\t}\n\t}, [field.getAccessor, field.schema, formatValue, parseValue])\n}\n\ntype ColumnTypeHandlerFactory = (column: SchemaColumn, getAccessor: FieldAccessor.GetFieldAccessor) => FormInputHandler\n\nconst defaultHandlerFactory: ColumnTypeHandlerFactory = (schema, field) => ({\n\tparseValue: (value: string) => {\n\t\tif (value === '' && schema.nullable && field().valueOnServer === null) {\n\t\t\treturn null\n\t\t}\n\t\treturn value\n\t},\n\tformatValue: (value: string | null) => value ?? '',\n})\n\nconst ColumnTypeHandlerFactories: Record<SchemaKnownColumnType, ColumnTypeHandlerFactory | undefined> = {\n\tString: defaultHandlerFactory,\n\tInteger: () => ({\n\t\tparseValue: (value: string) => {\n\t\t\tif (value === '') {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tconst parsed = parseInt(value, 10)\n\t\t\treturn isNaN(parsed) ? null : parsed\n\t\t},\n\t\tformatValue: (value: number | null) => {\n\t\t\treturn value === null ? '' : value.toString(10)\n\t\t},\n\t\tdefaultInputProps: {\n\t\t\ttype: 'number',\n\t\t},\n\t}),\n\tDouble: () => ({\n\t\tparseValue: (value: string) => {\n\t\t\tif (value === '') {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tconst parsed = parseFloat(value)\n\t\t\treturn isNaN(parsed) ? null : parsed\n\t\t},\n\t\tformatValue: (value: number | null) => {\n\t\t\treturn value === null ? '' : value.toString(10)\n\t\t},\n\t\tdefaultInputProps: {\n\t\t\ttype: 'number',\n\t\t},\n\t}),\n\n\tDate: () => ({\n\t\tparseValue: (value: string) => {\n\t\t\tif (value === '') {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tconst parsed = Date.parse(value)\n\t\t\treturn isNaN(parsed) ? null : (new Date(parsed)).toISOString().split('T')[0]\n\t\t},\n\t\tformatValue: (value: string | null) => {\n\t\t\tconst parsed = value ? Date.parse(value) : null\n\t\t\treturn !parsed || isNaN(parsed) ? '' : new Date(parsed).toISOString().split('T')[0]\n\t\t},\n\t\tdefaultInputProps: {\n\t\t\ttype: 'date',\n\t\t},\n\t}),\n\tDateTime: () => ({\n\t\tparseValue: (value: string) => {\n\t\t\tif (value === '') {\n\t\t\t\treturn null\n\t\t\t}\n\n\t\t\tconst parsed = Date.parse(value)\n\t\t\treturn isNaN(parsed) ? null : (new Date(parsed)).toISOString()\n\t\t},\n\t\tformatValue: (value: string | null) => {\n\t\t\tconst parsed = value ? Date.parse(value) : null\n\t\t\treturn !parsed || isNaN(parsed) ? '' : toLocalDate(new Date(parsed))\n\t\t},\n\t\tdefaultInputProps: {\n\t\t\ttype: 'datetime-local',\n\t\t},\n\t}),\n\tBool: undefined,\n\tEnum: undefined,\n\tUuid: undefined,\n}\n\nconst toLocalDate = (date: Date) => {\n\tconst pad = (num: number, length: number = 2) => {\n\t\tconst str = num.toString()\n\t\treturn '0'.repeat(Math.max(0, length - str.length)) + str\n\t}\n\n\treturn pad(date.getFullYear(), 4) +\n\t\t'-' + pad(date.getMonth() + 1) +\n\t\t'-' + pad(date.getDate()) +\n\t\t'T' + pad(date.getHours()) +\n\t\t':' + pad(date.getMinutes()) +\n\t\t':' + pad(date.getSeconds())\n}\n"],"names":["useMemo"],"mappings":"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"}

package/dist/development/internal/useFormInputHandler.js

@@ -1,16 +1,28 @@
 import { useMemo } from "react";
-const useFormInputHandler = (field) => {
+const useFormInputHandler = (field, { formatValue, parseValue }) => {
   return useMemo(() => {
     const schema = field.schema;
     const columnType = schema.type;
-    const handlerFactory = ColumnTypeHandlerFactories[columnType];
-    if (!handlerFactory) {
-      throw new Error(`Column type ${columnType} is not supported yet`);
-    }
-    return handlerFactory(schema, field.getAccessor);
-  }, [field.getAccessor, field.schema]);
+    const handlerFactory = ColumnTypeHandlerFactories[columnType] ?? defaultHandlerFactory;
+    const handler = handlerFactory(schema, field.getAccessor);
+    return {
+      defaultInputProps: handler.defaultInputProps,
+      formatValue: formatValue ?? handler.formatValue,
+      parseValue: parseValue ?? handler.parseValue
+    };
+  }, [field.getAccessor, field.schema, formatValue, parseValue]);
 };
+const defaultHandlerFactory = (schema, field) => ({
+  parseValue: (value) => {
+    if (value === "" && schema.nullable && field().valueOnServer === null) {
+      return null;
+    }
+    return value;
+  },
+  formatValue: (value) => value ?? ""
+});
 const ColumnTypeHandlerFactories = {
+  String: defaultHandlerFactory,
   Integer: () => ({
     parseValue: (value) => {
       if (value === "") {
@@ -41,15 +53,6 @@ const ColumnTypeHandlerFactories = {
       type: "number"
     }
   }),
-  String: (schema, field) => ({
-    parseValue: (value) => {
-      if (value === "" && schema.nullable && field().valueOnServer === null) {
-        return null;
-      }
-      return value;
-    },
-    formatValue: (value) => value ?? ""
-  }),
   Date: () => ({
     parseValue: (value) => {
       if (value === "") {
@@ -82,15 +85,9 @@ const ColumnTypeHandlerFactories = {
       type: "datetime-local"
     }
   }),
-  Bool: () => {
-    throw new Error("Boolean column type is not supported yet");
-  },
-  Enum: () => {
-    throw new Error("Enum column type is not supported yet");
-  },
-  Uuid: () => {
-    throw new Error("UUID column type is not supported yet");
-  }
+  Bool: void 0,
+  Enum: void 0,
+  Uuid: void 0
 };
 const toLocalDate = (date) => {
   const pad = (num, length = 2) => {

package/dist/development/internal/useFormInputHandler.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFormInputHandler.js","sources":["../../../src/internal/useFormInputHandler.ts"],"sourcesContent":["import { FieldAccessor, SchemaColumn, SchemaKnownColumnType } from '@contember/react-binding'\nimport * as React from 'react'\nimport { useMemo } from 'react'\n\nexport const useFormInputHandler = (field: FieldAccessor) => {\n\treturn useMemo(() => {\n\t\tconst schema = field.schema\n\t\tconst columnType = schema.type\n\t\tconst handlerFactory = ColumnTypeHandlerFactories[columnType as SchemaKnownColumnType]\n\t\tif (!handlerFactory) {\n\t\t\tthrow new Error(`Column type ${columnType} is not supported yet`)\n\t\t}\n\t\treturn handlerFactory(schema, field.getAccessor)\n\t}, [field.getAccessor, field.schema])\n}\n\ntype ColumnTypeHandlerFactory = (column: SchemaColumn, getAccessor: FieldAccessor.GetFieldAccessor) => {\n\tparseValue: (value: string) => any\n\tformatValue: (value: any) => string\n\tdefaultInputProps?: React.InputHTMLAttributes<HTMLInputElement>\n}\n\nconst ColumnTypeHandlerFactories: Record<SchemaKnownColumnType, ColumnTypeHandlerFactory> = {\n\tInteger: () => ({\n\t\tparseValue: (value: string) => {\n\t\t\tif (value === '') {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tconst parsed = parseInt(value, 10)\n\t\t\treturn isNaN(parsed) ? null : parsed\n\t\t},\n\t\tformatValue: (value: number | null) => {\n\t\t\treturn value === null ? '' : value.toString(10)\n\t\t},\n\t\tdefaultInputProps: {\n\t\t\ttype: 'number',\n\t\t},\n\t}),\n\tDouble: () => ({\n\t\tparseValue: (value: string) => {\n\t\t\tif (value === '') {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tconst parsed = parseFloat(value)\n\t\t\treturn isNaN(parsed) ? null : parsed\n\t\t},\n\t\tformatValue: (value: number | null) => {\n\t\t\treturn value === null ? '' : value.toString(10)\n\t\t},\n\t\tdefaultInputProps: {\n\t\t\ttype: 'number',\n\t\t},\n\t}),\n\tString: (schema, field) => ({\n\t\tparseValue: (value: string) => {\n\t\t\tif (value === '' && schema.nullable && field().valueOnServer === null) {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\treturn value\n\t\t},\n\t\tformatValue: (value: string | null) => value ?? '',\n\t}),\n\tDate: () => ({\n\t\tparseValue: (value: string) => {\n\t\t\tif (value === '') {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tconst parsed = Date.parse(value)\n\t\t\treturn isNaN(parsed) ? null : (new Date(parsed)).toISOString().split('T')[0]\n\t\t},\n\t\tformatValue: (value: string | null) => {\n\t\t\tconst parsed = value ? Date.parse(value) : null\n\t\t\treturn !parsed || isNaN(parsed) ? '' : new Date(parsed).toISOString().split('T')[0]\n\t\t},\n\t\tdefaultInputProps: {\n\t\t\ttype: 'date',\n\t\t},\n\t}),\n\tDateTime: () => ({\n\t\tparseValue: (value: string) => {\n\t\t\tif (value === '') {\n\t\t\t\treturn null\n\t\t\t}\n\n\t\t\tconst parsed = Date.parse(value)\n\t\t\treturn isNaN(parsed) ? null : (new Date(parsed)).toISOString()\n\t\t},\n\t\tformatValue: (value: string | null) => {\n\t\t\tconst parsed = value ? Date.parse(value) : null\n\t\t\treturn !parsed || isNaN(parsed) ? '' : toLocalDate(new Date(parsed))\n\t\t},\n\t\tdefaultInputProps: {\n\t\t\ttype: 'datetime-local',\n\t\t},\n\t}),\n\tBool: () => {\n\t\tthrow new Error('Boolean column type is not supported yet')\n\t},\n\tEnum: () => {\n\t\tthrow new Error('Enum column type is not supported yet')\n\t},\n\tUuid: () => {\n\t\tthrow new Error('UUID column type is not supported yet')\n\t},\n}\n\nconst toLocalDate = (date: Date) => {\n\tconst pad = (num: number, length: number = 2) => {\n\t\tconst str = num.toString()\n\t\treturn '0'.repeat(Math.max(0, length - str.length)) + str\n\t}\n\n\treturn pad(date.getFullYear(), 4) +\n\t\t'-' + pad(date.getMonth() + 1) +\n\t\t'-' + pad(date.getDate()) +\n\t\t'T' + pad(date.getHours()) +\n\t\t':' + pad(date.getMinutes()) +\n\t\t':' + pad(date.getSeconds())\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useFormInputHandler.js","sources":["../../../src/internal/useFormInputHandler.ts"],"sourcesContent":["import { FieldAccessor, SchemaColumn, SchemaKnownColumnType } from '@contember/react-binding'\nimport { useMemo } from 'react'\nimport { FormInputHandler } from '../types'\n\nexport const useFormInputHandler = (field: FieldAccessor, { formatValue, parseValue }: Partial<FormInputHandler>): FormInputHandler => {\n\treturn useMemo(() => {\n\t\tconst schema = field.schema\n\t\tconst columnType = schema.type\n\t\tconst handlerFactory = ColumnTypeHandlerFactories[columnType as SchemaKnownColumnType] ?? defaultHandlerFactory\n\t\tconst handler = handlerFactory(schema, field.getAccessor)\n\t\treturn {\n\t\t\tdefaultInputProps: handler.defaultInputProps,\n\t\t\tformatValue: formatValue ?? handler.formatValue,\n\t\t\tparseValue: parseValue ?? handler.parseValue,\n\t\t}\n\t}, [field.getAccessor, field.schema, formatValue, parseValue])\n}\n\ntype ColumnTypeHandlerFactory = (column: SchemaColumn, getAccessor: FieldAccessor.GetFieldAccessor) => FormInputHandler\n\nconst defaultHandlerFactory: ColumnTypeHandlerFactory = (schema, field) => ({\n\tparseValue: (value: string) => {\n\t\tif (value === '' && schema.nullable && field().valueOnServer === null) {\n\t\t\treturn null\n\t\t}\n\t\treturn value\n\t},\n\tformatValue: (value: string | null) => value ?? '',\n})\n\nconst ColumnTypeHandlerFactories: Record<SchemaKnownColumnType, ColumnTypeHandlerFactory | undefined> = {\n\tString: defaultHandlerFactory,\n\tInteger: () => ({\n\t\tparseValue: (value: string) => {\n\t\t\tif (value === '') {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tconst parsed = parseInt(value, 10)\n\t\t\treturn isNaN(parsed) ? null : parsed\n\t\t},\n\t\tformatValue: (value: number | null) => {\n\t\t\treturn value === null ? '' : value.toString(10)\n\t\t},\n\t\tdefaultInputProps: {\n\t\t\ttype: 'number',\n\t\t},\n\t}),\n\tDouble: () => ({\n\t\tparseValue: (value: string) => {\n\t\t\tif (value === '') {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tconst parsed = parseFloat(value)\n\t\t\treturn isNaN(parsed) ? null : parsed\n\t\t},\n\t\tformatValue: (value: number | null) => {\n\t\t\treturn value === null ? '' : value.toString(10)\n\t\t},\n\t\tdefaultInputProps: {\n\t\t\ttype: 'number',\n\t\t},\n\t}),\n\n\tDate: () => ({\n\t\tparseValue: (value: string) => {\n\t\t\tif (value === '') {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tconst parsed = Date.parse(value)\n\t\t\treturn isNaN(parsed) ? null : (new Date(parsed)).toISOString().split('T')[0]\n\t\t},\n\t\tformatValue: (value: string | null) => {\n\t\t\tconst parsed = value ? Date.parse(value) : null\n\t\t\treturn !parsed || isNaN(parsed) ? '' : new Date(parsed).toISOString().split('T')[0]\n\t\t},\n\t\tdefaultInputProps: {\n\t\t\ttype: 'date',\n\t\t},\n\t}),\n\tDateTime: () => ({\n\t\tparseValue: (value: string) => {\n\t\t\tif (value === '') {\n\t\t\t\treturn null\n\t\t\t}\n\n\t\t\tconst parsed = Date.parse(value)\n\t\t\treturn isNaN(parsed) ? null : (new Date(parsed)).toISOString()\n\t\t},\n\t\tformatValue: (value: string | null) => {\n\t\t\tconst parsed = value ? Date.parse(value) : null\n\t\t\treturn !parsed || isNaN(parsed) ? '' : toLocalDate(new Date(parsed))\n\t\t},\n\t\tdefaultInputProps: {\n\t\t\ttype: 'datetime-local',\n\t\t},\n\t}),\n\tBool: undefined,\n\tEnum: undefined,\n\tUuid: undefined,\n}\n\nconst toLocalDate = (date: Date) => {\n\tconst pad = (num: number, length: number = 2) => {\n\t\tconst str = num.toString()\n\t\treturn '0'.repeat(Math.max(0, length - str.length)) + str\n\t}\n\n\treturn pad(date.getFullYear(), 4) +\n\t\t'-' + pad(date.getMonth() + 1) +\n\t\t'-' + pad(date.getDate()) +\n\t\t'T' + pad(date.getHours()) +\n\t\t':' + pad(date.getMinutes()) +\n\t\t':' + pad(date.getSeconds())\n}\n"],"names":[],"mappings":"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"}

package/dist/production/components/FormCheckbox.cjs

@@ -37,15 +37,15 @@ const FormCheckbox = reactBinding.Component(({ field, isNonbearing, defaultValue
     if (!checkboxRef) {
       return;
     }
-    ref.current = checkboxRef;
-    if (value === null) {
-      checkboxRef.indeterminate = true;
-    }
+    checkboxRef.indeterminate = value === null;
   }, [checkboxRef, ref, value]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     SlotInput,
     {
-      ref: setCheckboxRef,
+      ref: (it) => {
+        ref.current = checkboxRef;
+        setCheckboxRef(it);
+      },
       type: "checkbox",
       checked: accessor.value === true,
       "data-state": value === null ? "indeterminate" : value ? "checked" : "unchecked",

package/dist/production/components/FormCheckbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormCheckbox.cjs","sources":["../../../src/components/FormCheckbox.tsx"],"sourcesContent":["import * as React from 'react'\nimport { ChangeEventHandler, ReactElement, useCallback, useEffect } from 'react'\nimport { Component, Field, OptionallyVariableFieldValue, SugaredRelativeSingleField, TreeNodeEnvironmentFactory, useField } from '@contember/react-binding'\nimport { useFormError, useFormFieldId } from '../contexts'\nimport { dataAttribute } from '@contember/utilities'\nimport { useFormInputValidationHandler } from '../hooks'\nimport { Slot } from '@radix-ui/react-slot'\n\nconst SlotInput = Slot as React.ForwardRefExoticComponent<React.RefAttributes<HTMLInputElement> & React.InputHTMLAttributes<HTMLInputElement>>\n\nexport interface FormCheckboxProps {\n\tfield: SugaredRelativeSingleField['field']\n\tisNonbearing?: boolean\n\tdefaultValue?: OptionallyVariableFieldValue\n\tchildren: ReactElement<HTMLInputElement, 'input'>\n}\n\nexport const FormCheckbox = Component<FormCheckboxProps>(({ field, isNonbearing, defaultValue, ...props }) => {\n\tconst id = useFormFieldId()\n\tconst accessor = useField<boolean>(field)\n\tconst value = accessor.value\n\tconst errors = useFormError() ?? accessor.errors?.errors ?? []\n\tconst accessorGetter = accessor.getAccessor\n\tconst { ref, onFocus, onBlur } = useFormInputValidationHandler(accessor)\n\tconst [checkboxRef, setCheckboxRef] = React.useState<HTMLInputElement | null>(null)\n\n\tuseEffect(() => {\n\t\tif (!checkboxRef) {\n\t\t\treturn\n\t\t}\n\t\t(ref as any).current = checkboxRef\n\t\tif (value === null) {\n\t\t\tcheckboxRef.indeterminate = true\n\t\t}\n\t}, [checkboxRef, ref, value])\n\n\treturn (\n\t\t\t<SlotInput\n\t\t\t\tref={setCheckboxRef}\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tchecked={accessor.value === true}\n\t\t\t\tdata-state={value === null ? 'indeterminate' : (value ? 'checked' : 'unchecked')}\n\t\t\t\tdata-invalid={dataAttribute(errors.length > 0)}\n\t\t\t\tid={`${id}-input`}\n\t\t\t\tonFocus={onFocus}\n\t\t\t\tonBlur={onBlur}\n\t\t\t\tonChange={useCallback<ChangeEventHandler<HTMLInputElement>>(e => {\n\t\t\t\t\taccessorGetter().updateValue(e.target.checked)\n\t\t\t\t}, [accessorGetter])}\n\t\t\t\t{...props}\n\t\t\t/>\n\t)\n}, ({ field, isNonbearing, defaultValue }, env) => {\n\tconst node = TreeNodeEnvironmentFactory.createEnvironmentForField(env, { field }).getSubTreeNode()\n\tconst resolvedDefaultValue = defaultValue !== undefined ? defaultValue : (node.field.defaultValue ?? (node.field.nullable ? null : false))\n\n\treturn <Field field={field} isNonbearing={isNonbearing} defaultValue={resolvedDefaultValue} />\n})\n"],"names":["Slot","Component","useFormFieldId","useField","useFormError","useFormInputValidationHandler","React","useEffect","jsx","dataAttribute","useCallback","TreeNodeEnvironmentFactory","Field"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAM,YAAYA,UAAAA;AASL,MAAA,eAAeC,uBAA6B,CAAC,EAAE,OAAO,cAAc,cAAc,GAAG,YAAY;AAC7G,QAAM,KAAKC,SAAAA;AACL,QAAA,WAAWC,sBAAkB,KAAK;AACxC,QAAM,QAAQ,SAAS;AACvB,QAAM,SAASC,SAAAA,aAAa,KAAK,SAAS,QAAQ,UAAU;AAC5D,QAAM,iBAAiB,SAAS;AAChC,QAAM,EAAE,KAAK,SAAS,OAAO,IAAIC,8BAAAA,8BAA8B,QAAQ;AACvE,QAAM,CAAC,aAAa,cAAc,IAAIC,iBAAM,SAAkC,IAAI;AAElFC,QAAAA,UAAU,MAAM;AACf,QAAI,CAAC,aAAa;AACjB;AAAA,IACD;AACC,QAAY,UAAU;AACvB,QAAI,UAAU,MAAM;AACnB,kBAAY,gBAAgB;AAAA,IAC7B;AAAA,EACE,GAAA,CAAC,aAAa,KAAK,KAAK,CAAC;AAG1B,SAAAC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,KAAK;AAAA,MACL,MAAK;AAAA,MACL,SAAS,SAAS,UAAU;AAAA,MAC5B,cAAY,UAAU,OAAO,kBAAmB,QAAQ,YAAY;AAAA,MACpE,gBAAcC,UAAA,cAAc,OAAO,SAAS,CAAC;AAAA,MAC7C,IAAI,GAAG,EAAE;AAAA,MACT;AAAA,MACA;AAAA,MACA,UAAUC,MAAAA,YAAkD,CAAK,MAAA;AAChE,uBAAiB,EAAA,YAAY,EAAE,OAAO,OAAO;AAAA,MAAA,GAC3C,CAAC,cAAc,CAAC;AAAA,MAClB,GAAG;AAAA,IAAA;AAAA,EAAA;AAGR,GAAG,CAAC,EAAE,OAAO,cAAc,aAAA,GAAgB,QAAQ;AAC5C,QAAA,OAAOC,wCAA2B,0BAA0B,KAAK,EAAE,MAAO,CAAA,EAAE;AAC5E,QAAA,uBAAuB,iBAAiB,SAAY,eAAgB,KAAK,MAAM,iBAAiB,KAAK,MAAM,WAAW,OAAO;AAEnI,SAAQH,2BAAAA,IAAAI,aAAAA,OAAA,EAAM,OAAc,cAA4B,cAAc,qBAAsB,CAAA;AAC7F,CAAC;;"}
+{"version":3,"file":"FormCheckbox.cjs","sources":["../../../src/components/FormCheckbox.tsx"],"sourcesContent":["import * as React from 'react'\nimport { ChangeEventHandler, ReactElement, useCallback, useEffect } from 'react'\nimport { Component, Field, OptionallyVariableFieldValue, SugaredRelativeSingleField, TreeNodeEnvironmentFactory, useField } from '@contember/react-binding'\nimport { useFormError, useFormFieldId } from '../contexts'\nimport { dataAttribute } from '@contember/utilities'\nimport { useFormInputValidationHandler } from '../hooks'\nimport { Slot } from '@radix-ui/react-slot'\n\nconst SlotInput = Slot as React.ForwardRefExoticComponent<React.RefAttributes<HTMLInputElement> & React.InputHTMLAttributes<HTMLInputElement>>\n\nexport interface FormCheckboxProps {\n\tfield: SugaredRelativeSingleField['field']\n\tisNonbearing?: boolean\n\tdefaultValue?: OptionallyVariableFieldValue\n\tchildren: ReactElement<HTMLInputElement, 'input'>\n}\n\nexport const FormCheckbox = Component<FormCheckboxProps>(({ field, isNonbearing, defaultValue, ...props }) => {\n\tconst id = useFormFieldId()\n\tconst accessor = useField<boolean>(field)\n\tconst value = accessor.value\n\tconst errors = useFormError() ?? accessor.errors?.errors ?? []\n\tconst accessorGetter = accessor.getAccessor\n\tconst { ref, onFocus, onBlur } = useFormInputValidationHandler(accessor)\n\tconst [checkboxRef, setCheckboxRef] = React.useState<HTMLInputElement | null>(null)\n\n\tuseEffect(() => {\n\t\tif (!checkboxRef) {\n\t\t\treturn\n\t\t}\n\t\tcheckboxRef.indeterminate = value === null\n\t}, [checkboxRef, ref, value])\n\n\treturn (\n\t\t\t<SlotInput\n\t\t\t\tref={it => {\n\t\t\t\t\t(ref as any).current = checkboxRef\n\t\t\t\t\tsetCheckboxRef(it)\n\t\t\t\t}}\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tchecked={accessor.value === true}\n\t\t\t\tdata-state={value === null ? 'indeterminate' : (value ? 'checked' : 'unchecked')}\n\t\t\t\tdata-invalid={dataAttribute(errors.length > 0)}\n\t\t\t\tid={`${id}-input`}\n\t\t\t\tonFocus={onFocus}\n\t\t\t\tonBlur={onBlur}\n\t\t\t\tonChange={useCallback<ChangeEventHandler<HTMLInputElement>>(e => {\n\t\t\t\t\taccessorGetter().updateValue(e.target.checked)\n\t\t\t\t}, [accessorGetter])}\n\t\t\t\t{...props}\n\t\t\t/>\n\t)\n}, ({ field, isNonbearing, defaultValue }, env) => {\n\tconst node = TreeNodeEnvironmentFactory.createEnvironmentForField(env, { field }).getSubTreeNode()\n\tconst resolvedDefaultValue = defaultValue !== undefined ? defaultValue : (node.field.defaultValue ?? (node.field.nullable ? null : false))\n\n\treturn <Field field={field} isNonbearing={isNonbearing} defaultValue={resolvedDefaultValue} />\n})\n"],"names":["Slot","Component","useFormFieldId","useField","useFormError","useFormInputValidationHandler","React","useEffect","jsx","dataAttribute","useCallback","TreeNodeEnvironmentFactory","Field"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAM,YAAYA,UAAAA;AASL,MAAA,eAAeC,uBAA6B,CAAC,EAAE,OAAO,cAAc,cAAc,GAAG,YAAY;AAC7G,QAAM,KAAKC,SAAAA;AACL,QAAA,WAAWC,sBAAkB,KAAK;AACxC,QAAM,QAAQ,SAAS;AACvB,QAAM,SAASC,SAAAA,aAAa,KAAK,SAAS,QAAQ,UAAU;AAC5D,QAAM,iBAAiB,SAAS;AAChC,QAAM,EAAE,KAAK,SAAS,OAAO,IAAIC,8BAAAA,8BAA8B,QAAQ;AACvE,QAAM,CAAC,aAAa,cAAc,IAAIC,iBAAM,SAAkC,IAAI;AAElFC,QAAAA,UAAU,MAAM;AACf,QAAI,CAAC,aAAa;AACjB;AAAA,IACD;AACA,gBAAY,gBAAgB,UAAU;AAAA,EACpC,GAAA,CAAC,aAAa,KAAK,KAAK,CAAC;AAG1B,SAAAC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,KAAK,CAAM,OAAA;AACT,YAAY,UAAU;AACvB,uBAAe,EAAE;AAAA,MAClB;AAAA,MACA,MAAK;AAAA,MACL,SAAS,SAAS,UAAU;AAAA,MAC5B,cAAY,UAAU,OAAO,kBAAmB,QAAQ,YAAY;AAAA,MACpE,gBAAcC,UAAA,cAAc,OAAO,SAAS,CAAC;AAAA,MAC7C,IAAI,GAAG,EAAE;AAAA,MACT;AAAA,MACA;AAAA,MACA,UAAUC,MAAAA,YAAkD,CAAK,MAAA;AAChE,uBAAiB,EAAA,YAAY,EAAE,OAAO,OAAO;AAAA,MAAA,GAC3C,CAAC,cAAc,CAAC;AAAA,MAClB,GAAG;AAAA,IAAA;AAAA,EAAA;AAGR,GAAG,CAAC,EAAE,OAAO,cAAc,aAAA,GAAgB,QAAQ;AAC5C,QAAA,OAAOC,wCAA2B,0BAA0B,KAAK,EAAE,MAAO,CAAA,EAAE;AAC5E,QAAA,uBAAuB,iBAAiB,SAAY,eAAgB,KAAK,MAAM,iBAAiB,KAAK,MAAM,WAAW,OAAO;AAEnI,SAAQH,2BAAAA,IAAAI,aAAAA,OAAA,EAAM,OAAc,cAA4B,cAAc,qBAAsB,CAAA;AAC7F,CAAC;;"}

package/dist/production/components/FormCheckbox.js

@@ -19,15 +19,15 @@ const FormCheckbox = Component(({ field, isNonbearing, defaultValue, ...props })
     if (!checkboxRef) {
       return;
     }
-    ref.current = checkboxRef;
-    if (value === null) {
-      checkboxRef.indeterminate = true;
-    }
+    checkboxRef.indeterminate = value === null;
   }, [checkboxRef, ref, value]);
   return /* @__PURE__ */ jsx(
     SlotInput,
     {
-      ref: setCheckboxRef,
+      ref: (it) => {
+        ref.current = checkboxRef;
+        setCheckboxRef(it);
+      },
       type: "checkbox",
       checked: accessor.value === true,
       "data-state": value === null ? "indeterminate" : value ? "checked" : "unchecked",

package/dist/production/components/FormCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormCheckbox.js","sources":["../../../src/components/FormCheckbox.tsx"],"sourcesContent":["import * as React from 'react'\nimport { ChangeEventHandler, ReactElement, useCallback, useEffect } from 'react'\nimport { Component, Field, OptionallyVariableFieldValue, SugaredRelativeSingleField, TreeNodeEnvironmentFactory, useField } from '@contember/react-binding'\nimport { useFormError, useFormFieldId } from '../contexts'\nimport { dataAttribute } from '@contember/utilities'\nimport { useFormInputValidationHandler } from '../hooks'\nimport { Slot } from '@radix-ui/react-slot'\n\nconst SlotInput = Slot as React.ForwardRefExoticComponent<React.RefAttributes<HTMLInputElement> & React.InputHTMLAttributes<HTMLInputElement>>\n\nexport interface FormCheckboxProps {\n\tfield: SugaredRelativeSingleField['field']\n\tisNonbearing?: boolean\n\tdefaultValue?: OptionallyVariableFieldValue\n\tchildren: ReactElement<HTMLInputElement, 'input'>\n}\n\nexport const FormCheckbox = Component<FormCheckboxProps>(({ field, isNonbearing, defaultValue, ...props }) => {\n\tconst id = useFormFieldId()\n\tconst accessor = useField<boolean>(field)\n\tconst value = accessor.value\n\tconst errors = useFormError() ?? accessor.errors?.errors ?? []\n\tconst accessorGetter = accessor.getAccessor\n\tconst { ref, onFocus, onBlur } = useFormInputValidationHandler(accessor)\n\tconst [checkboxRef, setCheckboxRef] = React.useState<HTMLInputElement | null>(null)\n\n\tuseEffect(() => {\n\t\tif (!checkboxRef) {\n\t\t\treturn\n\t\t}\n\t\t(ref as any).current = checkboxRef\n\t\tif (value === null) {\n\t\t\tcheckboxRef.indeterminate = true\n\t\t}\n\t}, [checkboxRef, ref, value])\n\n\treturn (\n\t\t\t<SlotInput\n\t\t\t\tref={setCheckboxRef}\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tchecked={accessor.value === true}\n\t\t\t\tdata-state={value === null ? 'indeterminate' : (value ? 'checked' : 'unchecked')}\n\t\t\t\tdata-invalid={dataAttribute(errors.length > 0)}\n\t\t\t\tid={`${id}-input`}\n\t\t\t\tonFocus={onFocus}\n\t\t\t\tonBlur={onBlur}\n\t\t\t\tonChange={useCallback<ChangeEventHandler<HTMLInputElement>>(e => {\n\t\t\t\t\taccessorGetter().updateValue(e.target.checked)\n\t\t\t\t}, [accessorGetter])}\n\t\t\t\t{...props}\n\t\t\t/>\n\t)\n}, ({ field, isNonbearing, defaultValue }, env) => {\n\tconst node = TreeNodeEnvironmentFactory.createEnvironmentForField(env, { field }).getSubTreeNode()\n\tconst resolvedDefaultValue = defaultValue !== undefined ? defaultValue : (node.field.defaultValue ?? (node.field.nullable ? null : false))\n\n\treturn <Field field={field} isNonbearing={isNonbearing} defaultValue={resolvedDefaultValue} />\n})\n"],"names":[],"mappings":";;;;;;;;AAQA,MAAM,YAAY;AASL,MAAA,eAAe,UAA6B,CAAC,EAAE,OAAO,cAAc,cAAc,GAAG,YAAY;AAC7G,QAAM,KAAK;AACL,QAAA,WAAW,SAAkB,KAAK;AACxC,QAAM,QAAQ,SAAS;AACvB,QAAM,SAAS,aAAa,KAAK,SAAS,QAAQ,UAAU;AAC5D,QAAM,iBAAiB,SAAS;AAChC,QAAM,EAAE,KAAK,SAAS,OAAO,IAAI,8BAA8B,QAAQ;AACvE,QAAM,CAAC,aAAa,cAAc,IAAI,MAAM,SAAkC,IAAI;AAElF,YAAU,MAAM;AACf,QAAI,CAAC,aAAa;AACjB;AAAA,IACD;AACC,QAAY,UAAU;AACvB,QAAI,UAAU,MAAM;AACnB,kBAAY,gBAAgB;AAAA,IAC7B;AAAA,EACE,GAAA,CAAC,aAAa,KAAK,KAAK,CAAC;AAG1B,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,KAAK;AAAA,MACL,MAAK;AAAA,MACL,SAAS,SAAS,UAAU;AAAA,MAC5B,cAAY,UAAU,OAAO,kBAAmB,QAAQ,YAAY;AAAA,MACpE,gBAAc,cAAc,OAAO,SAAS,CAAC;AAAA,MAC7C,IAAI,GAAG,EAAE;AAAA,MACT;AAAA,MACA;AAAA,MACA,UAAU,YAAkD,CAAK,MAAA;AAChE,uBAAiB,EAAA,YAAY,EAAE,OAAO,OAAO;AAAA,MAAA,GAC3C,CAAC,cAAc,CAAC;AAAA,MAClB,GAAG;AAAA,IAAA;AAAA,EAAA;AAGR,GAAG,CAAC,EAAE,OAAO,cAAc,aAAA,GAAgB,QAAQ;AAC5C,QAAA,OAAO,2BAA2B,0BAA0B,KAAK,EAAE,MAAO,CAAA,EAAE;AAC5E,QAAA,uBAAuB,iBAAiB,SAAY,eAAgB,KAAK,MAAM,iBAAiB,KAAK,MAAM,WAAW,OAAO;AAEnI,SAAQ,oBAAA,OAAA,EAAM,OAAc,cAA4B,cAAc,qBAAsB,CAAA;AAC7F,CAAC;"}
+{"version":3,"file":"FormCheckbox.js","sources":["../../../src/components/FormCheckbox.tsx"],"sourcesContent":["import * as React from 'react'\nimport { ChangeEventHandler, ReactElement, useCallback, useEffect } from 'react'\nimport { Component, Field, OptionallyVariableFieldValue, SugaredRelativeSingleField, TreeNodeEnvironmentFactory, useField } from '@contember/react-binding'\nimport { useFormError, useFormFieldId } from '../contexts'\nimport { dataAttribute } from '@contember/utilities'\nimport { useFormInputValidationHandler } from '../hooks'\nimport { Slot } from '@radix-ui/react-slot'\n\nconst SlotInput = Slot as React.ForwardRefExoticComponent<React.RefAttributes<HTMLInputElement> & React.InputHTMLAttributes<HTMLInputElement>>\n\nexport interface FormCheckboxProps {\n\tfield: SugaredRelativeSingleField['field']\n\tisNonbearing?: boolean\n\tdefaultValue?: OptionallyVariableFieldValue\n\tchildren: ReactElement<HTMLInputElement, 'input'>\n}\n\nexport const FormCheckbox = Component<FormCheckboxProps>(({ field, isNonbearing, defaultValue, ...props }) => {\n\tconst id = useFormFieldId()\n\tconst accessor = useField<boolean>(field)\n\tconst value = accessor.value\n\tconst errors = useFormError() ?? accessor.errors?.errors ?? []\n\tconst accessorGetter = accessor.getAccessor\n\tconst { ref, onFocus, onBlur } = useFormInputValidationHandler(accessor)\n\tconst [checkboxRef, setCheckboxRef] = React.useState<HTMLInputElement | null>(null)\n\n\tuseEffect(() => {\n\t\tif (!checkboxRef) {\n\t\t\treturn\n\t\t}\n\t\tcheckboxRef.indeterminate = value === null\n\t}, [checkboxRef, ref, value])\n\n\treturn (\n\t\t\t<SlotInput\n\t\t\t\tref={it => {\n\t\t\t\t\t(ref as any).current = checkboxRef\n\t\t\t\t\tsetCheckboxRef(it)\n\t\t\t\t}}\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tchecked={accessor.value === true}\n\t\t\t\tdata-state={value === null ? 'indeterminate' : (value ? 'checked' : 'unchecked')}\n\t\t\t\tdata-invalid={dataAttribute(errors.length > 0)}\n\t\t\t\tid={`${id}-input`}\n\t\t\t\tonFocus={onFocus}\n\t\t\t\tonBlur={onBlur}\n\t\t\t\tonChange={useCallback<ChangeEventHandler<HTMLInputElement>>(e => {\n\t\t\t\t\taccessorGetter().updateValue(e.target.checked)\n\t\t\t\t}, [accessorGetter])}\n\t\t\t\t{...props}\n\t\t\t/>\n\t)\n}, ({ field, isNonbearing, defaultValue }, env) => {\n\tconst node = TreeNodeEnvironmentFactory.createEnvironmentForField(env, { field }).getSubTreeNode()\n\tconst resolvedDefaultValue = defaultValue !== undefined ? defaultValue : (node.field.defaultValue ?? (node.field.nullable ? null : false))\n\n\treturn <Field field={field} isNonbearing={isNonbearing} defaultValue={resolvedDefaultValue} />\n})\n"],"names":[],"mappings":";;;;;;;;AAQA,MAAM,YAAY;AASL,MAAA,eAAe,UAA6B,CAAC,EAAE,OAAO,cAAc,cAAc,GAAG,YAAY;AAC7G,QAAM,KAAK;AACL,QAAA,WAAW,SAAkB,KAAK;AACxC,QAAM,QAAQ,SAAS;AACvB,QAAM,SAAS,aAAa,KAAK,SAAS,QAAQ,UAAU;AAC5D,QAAM,iBAAiB,SAAS;AAChC,QAAM,EAAE,KAAK,SAAS,OAAO,IAAI,8BAA8B,QAAQ;AACvE,QAAM,CAAC,aAAa,cAAc,IAAI,MAAM,SAAkC,IAAI;AAElF,YAAU,MAAM;AACf,QAAI,CAAC,aAAa;AACjB;AAAA,IACD;AACA,gBAAY,gBAAgB,UAAU;AAAA,EACpC,GAAA,CAAC,aAAa,KAAK,KAAK,CAAC;AAG1B,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,KAAK,CAAM,OAAA;AACT,YAAY,UAAU;AACvB,uBAAe,EAAE;AAAA,MAClB;AAAA,MACA,MAAK;AAAA,MACL,SAAS,SAAS,UAAU;AAAA,MAC5B,cAAY,UAAU,OAAO,kBAAmB,QAAQ,YAAY;AAAA,MACpE,gBAAc,cAAc,OAAO,SAAS,CAAC;AAAA,MAC7C,IAAI,GAAG,EAAE;AAAA,MACT;AAAA,MACA;AAAA,MACA,UAAU,YAAkD,CAAK,MAAA;AAChE,uBAAiB,EAAA,YAAY,EAAE,OAAO,OAAO;AAAA,MAAA,GAC3C,CAAC,cAAc,CAAC;AAAA,MAClB,GAAG;AAAA,IAAA;AAAA,EAAA;AAGR,GAAG,CAAC,EAAE,OAAO,cAAc,aAAA,GAAgB,QAAQ;AAC5C,QAAA,OAAO,2BAA2B,0BAA0B,KAAK,EAAE,MAAO,CAAA,EAAE;AAC5E,QAAA,uBAAuB,iBAAiB,SAAY,eAAgB,KAAK,MAAM,iBAAiB,KAAK,MAAM,WAAW,OAAO;AAEnI,SAAQ,oBAAA,OAAA,EAAM,OAAc,cAA4B,cAAc,qBAAsB,CAAA;AAC7F,CAAC;"}