@contember/react-form 2.0.0-alpha.8 → 2.0.0-beta.1

package/dist/development/src/contexts.cjs

@@ -1,14 +1,13 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const reactUtils = require("@contember/react-utils");
-const FormFieldIdContext_ = reactUtils.createContext("FormFieldIdContext", void 0);
-const FormFieldIdContext = FormFieldIdContext_[0];
-const useFormFieldId = FormFieldIdContext_[1];
-const FormErrorContext_ = reactUtils.createContext("FormErrorContext", void 0);
-const FormErrorContext = FormErrorContext_[0];
-const useFormError = FormErrorContext_[1];
-exports.FormErrorContext = FormErrorContext;
-exports.FormFieldIdContext = FormFieldIdContext;
+const FormFieldStateContext_ = reactUtils.createContext("FormFieldStateContext", void 0);
+const FormFieldStateContext = FormFieldStateContext_[0];
+const useFormFieldState = FormFieldStateContext_[1];
+const useFormFieldId = () => useFormFieldState()?.htmlId;
+const useFormError = () => useFormFieldState()?.errors;
+exports.FormFieldStateContext = FormFieldStateContext;
 exports.useFormError = useFormError;
 exports.useFormFieldId = useFormFieldId;
+exports.useFormFieldState = useFormFieldState;
 //# sourceMappingURL=contexts.cjs.map

package/dist/development/src/contexts.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"contexts.cjs","sources":["../../../../packages/react-form/src/contexts.ts"],"sourcesContent":["import { createContext } from '@contember/react-utils'\nimport { ErrorAccessor } from '@contember/react-binding'\n\nconst FormFieldIdContext_ = createContext<string | undefined>('FormFieldIdContext', undefined)\n/** @internal */\nexport const FormFieldIdContext = FormFieldIdContext_[0]\nexport const useFormFieldId = FormFieldIdContext_[1]\n\nconst FormErrorContext_ = createContext<ErrorAccessor.Error[] | undefined>('FormErrorContext', undefined)\n/** @internal */\nexport const FormErrorContext = FormErrorContext_[0]\nexport const useFormError = FormErrorContext_[1]\n"],"names":["createContext"],"mappings":";;;AAGA,MAAM,sBAAsBA,WAAkC,cAAA,sBAAsB,MAAS;AAEhF,MAAA,qBAAqB,oBAAoB,CAAC;AAC1C,MAAA,iBAAiB,oBAAoB,CAAC;AAEnD,MAAM,oBAAoBA,WAAiD,cAAA,oBAAoB,MAAS;AAE3F,MAAA,mBAAmB,kBAAkB,CAAC;AACtC,MAAA,eAAe,kBAAkB,CAAC;;;;;"}
+{"version":3,"file":"contexts.cjs","sources":["../../../../packages/react-form/src/contexts.tsx"],"sourcesContent":["import { createContext } from '@contember/react-utils'\nimport { FormFieldState } from './types'\n\n\nconst FormFieldStateContext_ = createContext<FormFieldState | undefined>('FormFieldStateContext', undefined)\nexport const FormFieldStateContext = FormFieldStateContext_[0]\nexport const useFormFieldState = FormFieldStateContext_[1]\n\n\n/**\n * @deprecated use `useFormState` instead\n */\nexport const useFormFieldId = () => useFormFieldState()?.htmlId\n\n/**\n * @deprecated use `useFormState` instead\n */\nexport const useFormError = () => useFormFieldState()?.errors\n"],"names":["createContext"],"mappings":";;;AAIA,MAAM,yBAAyBA,WAA0C,cAAA,yBAAyB,MAAS;AAC9F,MAAA,wBAAwB,uBAAuB,CAAC;AAChD,MAAA,oBAAoB,uBAAuB,CAAC;AAM5C,MAAA,iBAAiB,MAAM,qBAAqB;AAK5C,MAAA,eAAe,MAAM,qBAAqB;;;;;"}

package/dist/development/src/contexts.js

@@ -1,14 +1,13 @@
 import { createContext } from "@contember/react-utils";
-const FormFieldIdContext_ = createContext("FormFieldIdContext", void 0);
-const FormFieldIdContext = FormFieldIdContext_[0];
-const useFormFieldId = FormFieldIdContext_[1];
-const FormErrorContext_ = createContext("FormErrorContext", void 0);
-const FormErrorContext = FormErrorContext_[0];
-const useFormError = FormErrorContext_[1];
+const FormFieldStateContext_ = createContext("FormFieldStateContext", void 0);
+const FormFieldStateContext = FormFieldStateContext_[0];
+const useFormFieldState = FormFieldStateContext_[1];
+const useFormFieldId = () => useFormFieldState()?.htmlId;
+const useFormError = () => useFormFieldState()?.errors;
 export {
-  FormErrorContext,
-  FormFieldIdContext,
+  FormFieldStateContext,
   useFormError,
-  useFormFieldId
+  useFormFieldId,
+  useFormFieldState
 };
 //# sourceMappingURL=contexts.js.map

package/dist/development/src/contexts.js.map

@@ -1 +1 @@
-{"version":3,"file":"contexts.js","sources":["../../../../packages/react-form/src/contexts.ts"],"sourcesContent":["import { createContext } from '@contember/react-utils'\nimport { ErrorAccessor } from '@contember/react-binding'\n\nconst FormFieldIdContext_ = createContext<string | undefined>('FormFieldIdContext', undefined)\n/** @internal */\nexport const FormFieldIdContext = FormFieldIdContext_[0]\nexport const useFormFieldId = FormFieldIdContext_[1]\n\nconst FormErrorContext_ = createContext<ErrorAccessor.Error[] | undefined>('FormErrorContext', undefined)\n/** @internal */\nexport const FormErrorContext = FormErrorContext_[0]\nexport const useFormError = FormErrorContext_[1]\n"],"names":[],"mappings":";AAGA,MAAM,sBAAsB,cAAkC,sBAAsB,MAAS;AAEhF,MAAA,qBAAqB,oBAAoB,CAAC;AAC1C,MAAA,iBAAiB,oBAAoB,CAAC;AAEnD,MAAM,oBAAoB,cAAiD,oBAAoB,MAAS;AAE3F,MAAA,mBAAmB,kBAAkB,CAAC;AACtC,MAAA,eAAe,kBAAkB,CAAC;"}
+{"version":3,"file":"contexts.js","sources":["../../../../packages/react-form/src/contexts.tsx"],"sourcesContent":["import { createContext } from '@contember/react-utils'\nimport { FormFieldState } from './types'\n\n\nconst FormFieldStateContext_ = createContext<FormFieldState | undefined>('FormFieldStateContext', undefined)\nexport const FormFieldStateContext = FormFieldStateContext_[0]\nexport const useFormFieldState = FormFieldStateContext_[1]\n\n\n/**\n * @deprecated use `useFormState` instead\n */\nexport const useFormFieldId = () => useFormFieldState()?.htmlId\n\n/**\n * @deprecated use `useFormState` instead\n */\nexport const useFormError = () => useFormFieldState()?.errors\n"],"names":[],"mappings":";AAIA,MAAM,yBAAyB,cAA0C,yBAAyB,MAAS;AAC9F,MAAA,wBAAwB,uBAAuB,CAAC;AAChD,MAAA,oBAAoB,uBAAuB,CAAC;AAM5C,MAAA,iBAAiB,MAAM,qBAAqB;AAK5C,MAAA,eAAe,MAAM,qBAAqB;"}

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

@@ -38,8 +38,11 @@ const useFormInputValidationHandler = (field) => {
     const message = valid ? void 0 : input?.validationMessage;
     const previousMessage = validationMessage.current;
     validationMessage.current = message;
+    const accessor = accessorGetter();
     if (!message) {
-      accessorGetter().clearErrors();
+      if (previousMessage) {
+        clearSpecificError(accessor, previousMessage);
+      }
       return;
     }
     if (message === previousMessage) {
@@ -49,8 +52,8 @@ const useFormInputValidationHandler = (field) => {
       return;
     }
     if (!focus || !!previousMessage) {
-      accessorGetter().clearErrors();
-      accessorGetter().addError(message);
+      accessor.clearErrors();
+      accessor.addError(message);
     }
   });
   return {
@@ -67,5 +70,11 @@ const useFormInputValidationHandler = (field) => {
     }, [accessorGetter])
   };
 };
+const clearSpecificError = (field, message) => {
+  const errors = field.errors?.errors ?? [];
+  const error = errors.filter((e) => !(e.type === "validation" && e.message === message));
+  field.clearErrors();
+  error.forEach((e) => field.addError(e));
+};
 exports.useFormInputValidationHandler = useFormInputValidationHandler;
 //# sourceMappingURL=useFormInputValidationHandler.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"useFormInputValidationHandler.cjs","sources":["../../../../../packages/react-form/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;;"}
+{"version":3,"file":"useFormInputValidationHandler.cjs","sources":["../../../../../packages/react-form/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\tconst accessor = accessorGetter()\n\t\t// if there is no message, we want to clear the error\n\t\tif (!message) {\n\t\t\tif (previousMessage) {\n\t\t\t\tclearSpecificError(accessor, previousMessage)\n\t\t\t}\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\taccessor.clearErrors()\n\t\t\taccessor.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\nconst clearSpecificError = (field: FieldAccessor<any>, message: string) => {\n\tconst errors = field.errors?.errors ?? []\n\tconst error = errors.filter(e => !(e.type === 'validation' && e.message === message))\n\tfield.clearErrors()\n\terror.forEach(e => field.addError(e))\n}\n"],"names":["useRef","React","useEntityBeforePersist","useCallback","useEffect"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAIa,MAAA,gCAAgC,CAAC,UAA8B;AAC3E,QAAM,iBAAiB,MAAM;AAC7B,QAAM,oBAAoBA,MAAAA,OAAe;AACzC,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,IAAA;AAAA,EACpD,GACE,CAAC,cAAc,CAAC,CAAC;AAEpBC,QAAAA,UAAU,MAAM;AACX,QAAA,CAAC,SAAS,SAAS;AACtB;AAAA,IAAA;AAGD,UAAM,QAAQ,SAAS;AACjB,UAAA,QAAQ,MAAM,UAAU;AAExB,UAAA,UAAU,QAAQ,SAAY,OAAO;AAC3C,UAAM,kBAAkB,kBAAkB;AAC1C,sBAAkB,UAAU;AAE5B,UAAM,WAAW,eAAe;AAEhC,QAAI,CAAC,SAAS;AACb,UAAI,iBAAiB;AACpB,2BAAmB,UAAU,eAAe;AAAA,MAAA;AAE7C;AAAA,IAAA;AAED,QAAI,YAAY,iBAAiB;AAChC;AAAA,IAAA;AAGG,QAAA,CAAC,MAAM,WAAW;AACrB;AAAA,IAAA;AAKD,QAAI,CAAC,SAAS,CAAC,CAAC,iBAAiB;AAChC,eAAS,YAAY;AACrB,eAAS,SAAS,OAAO;AAAA,IAAA;AAAA,EAC1B,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,YAAY;AAC7B,UAAI,kBAAkB,SAAS;AACf,yBAAE,SAAS,kBAAkB,OAAO;AAAA,MAAA;AAAA,IAErD,GAAG,CAAC,cAAc,CAAC;AAAA,EACpB;AACD;AAEA,MAAM,qBAAqB,CAAC,OAA2B,YAAoB;AAC1E,QAAM,SAAS,MAAM,QAAQ,UAAU,CAAC;AAClC,QAAA,QAAQ,OAAO,OAAO,CAAK,MAAA,EAAE,EAAE,SAAS,gBAAgB,EAAE,YAAY,QAAQ;AACpF,QAAM,YAAY;AAClB,QAAM,QAAQ,CAAA,MAAK,MAAM,SAAS,CAAC,CAAC;AACrC;;"}

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

@@ -20,8 +20,11 @@ const useFormInputValidationHandler = (field) => {
     const message = valid ? void 0 : input?.validationMessage;
     const previousMessage = validationMessage.current;
     validationMessage.current = message;
+    const accessor = accessorGetter();
     if (!message) {
-      accessorGetter().clearErrors();
+      if (previousMessage) {
+        clearSpecificError(accessor, previousMessage);
+      }
       return;
     }
     if (message === previousMessage) {
@@ -31,8 +34,8 @@ const useFormInputValidationHandler = (field) => {
       return;
     }
     if (!focus || !!previousMessage) {
-      accessorGetter().clearErrors();
-      accessorGetter().addError(message);
+      accessor.clearErrors();
+      accessor.addError(message);
     }
   });
   return {
@@ -49,6 +52,12 @@ const useFormInputValidationHandler = (field) => {
     }, [accessorGetter])
   };
 };
+const clearSpecificError = (field, message) => {
+  const errors = field.errors?.errors ?? [];
+  const error = errors.filter((e) => !(e.type === "validation" && e.message === message));
+  field.clearErrors();
+  error.forEach((e) => field.addError(e));
+};
 export {
   useFormInputValidationHandler
 };

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

@@ -1 +1 @@
-{"version":3,"file":"useFormInputValidationHandler.js","sources":["../../../../../packages/react-form/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;"}
+{"version":3,"file":"useFormInputValidationHandler.js","sources":["../../../../../packages/react-form/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\tconst accessor = accessorGetter()\n\t\t// if there is no message, we want to clear the error\n\t\tif (!message) {\n\t\t\tif (previousMessage) {\n\t\t\t\tclearSpecificError(accessor, previousMessage)\n\t\t\t}\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\taccessor.clearErrors()\n\t\t\taccessor.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\nconst clearSpecificError = (field: FieldAccessor<any>, message: string) => {\n\tconst errors = field.errors?.errors ?? []\n\tconst error = errors.filter(e => !(e.type === 'validation' && e.message === message))\n\tfield.clearErrors()\n\terror.forEach(e => field.addError(e))\n}\n"],"names":[],"mappings":";;;AAIa,MAAA,gCAAgC,CAAC,UAA8B;AAC3E,QAAM,iBAAiB,MAAM;AAC7B,QAAM,oBAAoB,OAAe;AACzC,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,IAAA;AAAA,EACpD,GACE,CAAC,cAAc,CAAC,CAAC;AAEpB,YAAU,MAAM;AACX,QAAA,CAAC,SAAS,SAAS;AACtB;AAAA,IAAA;AAGD,UAAM,QAAQ,SAAS;AACjB,UAAA,QAAQ,MAAM,UAAU;AAExB,UAAA,UAAU,QAAQ,SAAY,OAAO;AAC3C,UAAM,kBAAkB,kBAAkB;AAC1C,sBAAkB,UAAU;AAE5B,UAAM,WAAW,eAAe;AAEhC,QAAI,CAAC,SAAS;AACb,UAAI,iBAAiB;AACpB,2BAAmB,UAAU,eAAe;AAAA,MAAA;AAE7C;AAAA,IAAA;AAED,QAAI,YAAY,iBAAiB;AAChC;AAAA,IAAA;AAGG,QAAA,CAAC,MAAM,WAAW;AACrB;AAAA,IAAA;AAKD,QAAI,CAAC,SAAS,CAAC,CAAC,iBAAiB;AAChC,eAAS,YAAY;AACrB,eAAS,SAAS,OAAO;AAAA,IAAA;AAAA,EAC1B,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,YAAY;AAC7B,UAAI,kBAAkB,SAAS;AACf,yBAAE,SAAS,kBAAkB,OAAO;AAAA,MAAA;AAAA,IAErD,GAAG,CAAC,cAAc,CAAC;AAAA,EACpB;AACD;AAEA,MAAM,qBAAqB,CAAC,OAA2B,YAAoB;AAC1E,QAAM,SAAS,MAAM,QAAQ,UAAU,CAAC;AAClC,QAAA,QAAQ,OAAO,OAAO,CAAK,MAAA,EAAE,EAAE,SAAS,gBAAgB,EAAE,YAAY,QAAQ;AACpF,QAAM,YAAY;AAClB,QAAM,QAAQ,CAAA,MAAK,MAAM,SAAS,CAAC,CAAC;AACrC;"}

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

@@ -1 +1 @@
-{"version":3,"file":"useFormInputHandler.cjs","sources":["../../../../../packages/react-form/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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"}
+{"version":3,"file":"useFormInputHandler.cjs","sources":["../../../../../packages/react-form/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/src/internal/useFormInputHandler.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFormInputHandler.js","sources":["../../../../../packages/react-form/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":";AAIO,MAAM,sBAAsB,CAAC,OAAsB,EAAE,aAAa,iBAA8D;AACtI,SAAO,QAAQ,MAAM;AACpB,UAAM,SAAS,MAAM;AACrB,UAAM,aAAa,OAAO;AACpB,UAAA,iBAAiB,2BAA2B,UAAmC,KAAK;AAC1F,UAAM,UAAU,eAAe,QAAQ,MAAM,WAAW;AACjD,WAAA;AAAA,MACN,mBAAmB,QAAQ;AAAA,MAC3B,aAAa,eAAe,QAAQ;AAAA,MACpC,YAAY,cAAc,QAAQ;AAAA,IAAA;AAAA,EACnC,GACE,CAAC,MAAM,aAAa,MAAM,QAAQ,aAAa,UAAU,CAAC;AAC9D;AAIA,MAAM,wBAAkD,CAAC,QAAQ,WAAW;AAAA,EAC3E,YAAY,CAAC,UAAkB;AAC9B,QAAI,UAAU,MAAM,OAAO,YAAY,MAAM,EAAE,kBAAkB,MAAM;AAC/D,aAAA;AAAA,IACR;AACO,WAAA;AAAA,EACR;AAAA,EACA,aAAa,CAAC,UAAyB,SAAS;AACjD;AAEA,MAAM,6BAAkG;AAAA,EACvG,QAAQ;AAAA,EACR,SAAS,OAAO;AAAA,IACf,YAAY,CAAC,UAAkB;AAC9B,UAAI,UAAU,IAAI;AACV,eAAA;AAAA,MACR;AACM,YAAA,SAAS,SAAS,OAAO,EAAE;AAC1B,aAAA,MAAM,MAAM,IAAI,OAAO;AAAA,IAC/B;AAAA,IACA,aAAa,CAAC,UAAyB;AACtC,aAAO,UAAU,OAAO,KAAK,MAAM,SAAS,EAAE;AAAA,IAC/C;AAAA,IACA,mBAAmB;AAAA,MAClB,MAAM;AAAA,IACP;AAAA,EAAA;AAAA,EAED,QAAQ,OAAO;AAAA,IACd,YAAY,CAAC,UAAkB;AAC9B,UAAI,UAAU,IAAI;AACV,eAAA;AAAA,MACR;AACM,YAAA,SAAS,WAAW,KAAK;AACxB,aAAA,MAAM,MAAM,IAAI,OAAO;AAAA,IAC/B;AAAA,IACA,aAAa,CAAC,UAAyB;AACtC,aAAO,UAAU,OAAO,KAAK,MAAM,SAAS,EAAE;AAAA,IAC/C;AAAA,IACA,mBAAmB;AAAA,MAClB,MAAM;AAAA,IACP;AAAA,EAAA;AAAA,EAGD,MAAM,OAAO;AAAA,IACZ,YAAY,CAAC,UAAkB;AAC9B,UAAI,UAAU,IAAI;AACV,eAAA;AAAA,MACR;AACM,YAAA,SAAS,KAAK,MAAM,KAAK;AAC/B,aAAO,MAAM,MAAM,IAAI,OAAQ,IAAI,KAAK,MAAM,EAAG,YAAY,EAAE,MAAM,GAAG,EAAE,CAAC;AAAA,IAC5E;AAAA,IACA,aAAa,CAAC,UAAyB;AACtC,YAAM,SAAS,QAAQ,KAAK,MAAM,KAAK,IAAI;AAC3C,aAAO,CAAC,UAAU,MAAM,MAAM,IAAI,KAAK,IAAI,KAAK,MAAM,EAAE,YAAY,EAAE,MAAM,GAAG,EAAE,CAAC;AAAA,IACnF;AAAA,IACA,mBAAmB;AAAA,MAClB,MAAM;AAAA,IACP;AAAA,EAAA;AAAA,EAED,UAAU,OAAO;AAAA,IAChB,YAAY,CAAC,UAAkB;AAC9B,UAAI,UAAU,IAAI;AACV,eAAA;AAAA,MACR;AAEM,YAAA,SAAS,KAAK,MAAM,KAAK;AACxB,aAAA,MAAM,MAAM,IAAI,OAAQ,IAAI,KAAK,MAAM,EAAG;IAClD;AAAA,IACA,aAAa,CAAC,UAAyB;AACtC,YAAM,SAAS,QAAQ,KAAK,MAAM,KAAK,IAAI;AACpC,aAAA,CAAC,UAAU,MAAM,MAAM,IAAI,KAAK,YAAY,IAAI,KAAK,MAAM,CAAC;AAAA,IACpE;AAAA,IACA,mBAAmB;AAAA,MAClB,MAAM;AAAA,IACP;AAAA,EAAA;AAAA,EAED,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AACP;AAEA,MAAM,cAAc,CAAC,SAAe;AACnC,QAAM,MAAM,CAAC,KAAa,SAAiB,MAAM;AAC1C,UAAA,MAAM,IAAI;AACT,WAAA,IAAI,OAAO,KAAK,IAAI,GAAG,SAAS,IAAI,MAAM,CAAC,IAAI;AAAA,EAAA;AAGvD,SAAO,IAAI,KAAK,YAAY,GAAG,CAAC,IAC/B,MAAM,IAAI,KAAK,SAAa,IAAA,CAAC,IAC7B,MAAM,IAAI,KAAK,QAAA,CAAS,IACxB,MAAM,IAAI,KAAK,SAAS,CAAC,IACzB,MAAM,IAAI,KAAK,WAAA,CAAY,IAC3B,MAAM,IAAI,KAAK,YAAY;AAC7B;"}
+{"version":3,"file":"useFormInputHandler.js","sources":["../../../../../packages/react-form/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/index.cjs

@@ -4,19 +4,23 @@ const contexts = require("./src/contexts.cjs");
 const FormError = require("./src/components/FormError.cjs");
 const FormCheckbox = require("./src/components/FormCheckbox.cjs");
 const FormFieldScope = require("./src/components/FormFieldScope.cjs");
+const FormFieldStateProvider = require("./src/components/FormFieldStateProvider.cjs");
 const FormHasOneRelationScope = require("./src/components/FormHasOneRelationScope.cjs");
 const FormHasManyRelationScope = require("./src/components/FormHasManyRelationScope.cjs");
 const FormInput = require("./src/components/FormInput.cjs");
 const FormLabel = require("./src/components/FormLabel.cjs");
 const FormRadioInput = require("./src/components/FormRadioInput.cjs");
 const useFormInputValidationHandler = require("./src/hooks/useFormInputValidationHandler.cjs");
-exports.FormErrorContext = contexts.FormErrorContext;
-exports.FormFieldIdContext = contexts.FormFieldIdContext;
+exports.FormFieldStateContext = contexts.FormFieldStateContext;
 exports.useFormError = contexts.useFormError;
 exports.useFormFieldId = contexts.useFormFieldId;
+exports.useFormFieldState = contexts.useFormFieldState;
 exports.FormError = FormError.FormError;
 exports.FormCheckbox = FormCheckbox.FormCheckbox;
 exports.FormFieldScope = FormFieldScope.FormFieldScope;
+exports.FormErrorContext = FormFieldStateProvider.FormErrorContext;
+exports.FormFieldIdContext = FormFieldStateProvider.FormFieldIdContext;
+exports.FormFieldStateProvider = FormFieldStateProvider.FormFieldStateProvider;
 exports.FormHasOneRelationScope = FormHasOneRelationScope.FormHasOneRelationScope;
 exports.FormHasManyRelationScope = FormHasManyRelationScope.FormHasManyRelationScope;
 exports.FormInput = FormInput.FormInput;

package/dist/production/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/production/index.js

@@ -1,7 +1,8 @@
-import { FormErrorContext, FormFieldIdContext, useFormError, useFormFieldId } from "./src/contexts.js";
+import { FormFieldStateContext, useFormError, useFormFieldId, useFormFieldState } from "./src/contexts.js";
 import { FormError } from "./src/components/FormError.js";
 import { FormCheckbox } from "./src/components/FormCheckbox.js";
 import { FormFieldScope } from "./src/components/FormFieldScope.js";
+import { FormErrorContext, FormFieldIdContext, FormFieldStateProvider } from "./src/components/FormFieldStateProvider.js";
 import { FormHasOneRelationScope } from "./src/components/FormHasOneRelationScope.js";
 import { FormHasManyRelationScope } from "./src/components/FormHasManyRelationScope.js";
 import { FormInput } from "./src/components/FormInput.js";
@@ -14,6 +15,8 @@ export {
   FormErrorContext,
   FormFieldIdContext,
   FormFieldScope,
+  FormFieldStateContext,
+  FormFieldStateProvider,
   FormHasManyRelationScope,
   FormHasOneRelationScope,
   FormInput,
@@ -21,6 +24,7 @@ export {
   FormRadioInput,
   useFormError,
   useFormFieldId,
+  useFormFieldState,
   useFormInputValidationHandler
 };
 //# sourceMappingURL=index.js.map

package/dist/production/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

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

@@ -26,10 +26,12 @@ function _interopNamespaceDefault(e) {
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
 const SlotInput = reactSlot.Slot;
 const FormCheckbox = reactBinding.Component(({ field, isNonbearing, defaultValue, ...props }) => {
-  const id = contexts.useFormFieldId();
   const accessor = reactBinding.useField(field);
+  const formState = contexts.useFormFieldState();
+  const id = formState?.htmlId;
+  const hasErrors = (formState?.errors.length ?? accessor.errors?.errors?.length ?? 0) > 0;
+  const dirty = formState?.dirty ?? accessor.hasUnpersistedChanges;
   const value = accessor.value;
-  const errors = contexts.useFormError() ?? accessor.errors?.errors ?? [];
   const accessorGetter = accessor.getAccessor;
   const { ref, onFocus, onBlur } = useFormInputValidationHandler.useFormInputValidationHandler(accessor);
   const [checkboxRef, setCheckboxRef] = React__namespace.useState(null);
@@ -49,8 +51,9 @@ const FormCheckbox = reactBinding.Component(({ field, isNonbearing, defaultValue
       type: "checkbox",
       checked: accessor.value === true,
       "data-state": value === null ? "indeterminate" : value ? "checked" : "unchecked",
-      "data-invalid": utilities.dataAttribute(errors.length > 0),
-      id: `${id}-input`,
+      "data-invalid": utilities.dataAttribute(hasErrors),
+      "data-dirty": utilities.dataAttribute(dirty),
+      id: id ? `${id}-input` : void 0,
       onFocus,
       onBlur,
       onChange: React.useCallback((e) => {

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

@@ -1 +1 @@
-{"version":3,"file":"FormCheckbox.cjs","sources":["../../../../../packages/react-form/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<SlotInput\n\t\t\tref={it => {\n\t\t\t\t(ref as any).current = checkboxRef\n\t\t\t\tsetCheckboxRef(it)\n\t\t\t}}\n\t\t\ttype=\"checkbox\"\n\t\t\tchecked={accessor.value === true}\n\t\t\tdata-state={value === null ? 'indeterminate' : (value ? 'checked' : 'unchecked')}\n\t\t\tdata-invalid={dataAttribute(errors.length > 0)}\n\t\t\tid={`${id}-input`}\n\t\t\tonFocus={onFocus}\n\t\t\tonBlur={onBlur}\n\t\t\tonChange={useCallback<ChangeEventHandler<HTMLInputElement>>(e => {\n\t\t\t\taccessorGetter().updateValue(e.target.checked)\n\t\t\t}, [accessorGetter])}\n\t\t\t{...props}\n\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;AAG3B,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;AAGP,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":["../../../../../packages/react-form/src/components/FormCheckbox.tsx"],"sourcesContent":["import * as React from 'react'\nimport { ChangeEventHandler, ReactElement, useCallback, useEffect } from 'react'\nimport {\n\tComponent,\n\tField,\n\tOptionallyVariableFieldValue,\n\tSugaredRelativeSingleField,\n\tTreeNodeEnvironmentFactory,\n\tuseField,\n} from '@contember/react-binding'\nimport { useFormFieldState } 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 accessor = useField<boolean>(field)\n\n\tconst formState = useFormFieldState()\n\tconst id = formState?.htmlId\n\tconst hasErrors = (formState?.errors.length ?? accessor.errors?.errors?.length ?? 0) > 0\n\tconst dirty = formState?.dirty ?? accessor.hasUnpersistedChanges\n\tconst value = accessor.value\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<SlotInput\n\t\t\tref={it => {\n\t\t\t\t(ref as any).current = checkboxRef\n\t\t\t\tsetCheckboxRef(it)\n\t\t\t}}\n\t\t\ttype=\"checkbox\"\n\t\t\tchecked={accessor.value === true}\n\t\t\tdata-state={value === null ? 'indeterminate' : (value ? 'checked' : 'unchecked')}\n\t\t\tdata-invalid={dataAttribute(hasErrors)}\n\t\t\tdata-dirty={dataAttribute(dirty)}\n\t\t\tid={id ? `${id}-input` : undefined}\n\t\t\tonFocus={onFocus}\n\t\t\tonBlur={onBlur}\n\t\t\tonChange={useCallback<ChangeEventHandler<HTMLInputElement>>(e => {\n\t\t\t\taccessorGetter().updateValue(e.target.checked)\n\t\t\t}, [accessorGetter])}\n\t\t\t{...props}\n\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","useField","useFormFieldState","useFormInputValidationHandler","React","useEffect","jsx","dataAttribute","useCallback","TreeNodeEnvironmentFactory","Field"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAeA,MAAM,YAAYA,UAAA;AASL,MAAA,eAAeC,uBAA6B,CAAC,EAAE,OAAO,cAAc,cAAc,GAAG,YAAY;AACvG,QAAA,WAAWC,sBAAkB,KAAK;AAExC,QAAM,YAAYC,SAAAA,kBAAkB;AACpC,QAAM,KAAK,WAAW;AAChB,QAAA,aAAa,WAAW,OAAO,UAAU,SAAS,QAAQ,QAAQ,UAAU,KAAK;AACjF,QAAA,QAAQ,WAAW,SAAS,SAAS;AAC3C,QAAM,QAAQ,SAAS;AACvB,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,IAAA;AAED,gBAAY,gBAAgB,UAAU;AAAA,EACpC,GAAA,CAAC,aAAa,KAAK,KAAK,CAAC;AAG3B,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,wBAAc,SAAS;AAAA,MACrC,cAAYA,wBAAc,KAAK;AAAA,MAC/B,IAAI,KAAK,GAAG,EAAE,WAAW;AAAA,MACzB;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,EACL;AAEF,GAAG,CAAC,EAAE,OAAO,cAAc,aAAA,GAAgB,QAAQ;AAC5C,QAAA,OAAOC,aAAAA,2BAA2B,0BAA0B,KAAK,EAAE,MAAM,CAAC,EAAE,eAAe;AAC3F,QAAA,uBAAuB,iBAAiB,SAAY,eAAgB,KAAK,MAAM,iBAAiB,KAAK,MAAM,WAAW,OAAO;AAEnI,SAAQH,2BAAAA,IAAAI,aAAAA,OAAA,EAAM,OAAc,cAA4B,cAAc,sBAAsB;AAC7F,CAAC;;"}

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

@@ -2,16 +2,18 @@ import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { useEffect, useCallback } from "react";
 import { Component, useField, TreeNodeEnvironmentFactory, Field } from "@contember/react-binding";
-import { useFormFieldId, useFormError } from "../contexts.js";
+import { useFormFieldState } from "../contexts.js";
 import { dataAttribute } from "@contember/utilities";
 import { Slot } from "@radix-ui/react-slot";
 import { useFormInputValidationHandler } from "../hooks/useFormInputValidationHandler.js";
 const SlotInput = Slot;
 const FormCheckbox = Component(({ field, isNonbearing, defaultValue, ...props }) => {
-  const id = useFormFieldId();
   const accessor = useField(field);
+  const formState = useFormFieldState();
+  const id = formState?.htmlId;
+  const hasErrors = (formState?.errors.length ?? accessor.errors?.errors?.length ?? 0) > 0;
+  const dirty = formState?.dirty ?? accessor.hasUnpersistedChanges;
   const value = accessor.value;
-  const errors = useFormError() ?? accessor.errors?.errors ?? [];
   const accessorGetter = accessor.getAccessor;
   const { ref, onFocus, onBlur } = useFormInputValidationHandler(accessor);
   const [checkboxRef, setCheckboxRef] = React.useState(null);
@@ -31,8 +33,9 @@ const FormCheckbox = Component(({ field, isNonbearing, defaultValue, ...props })
       type: "checkbox",
       checked: accessor.value === true,
       "data-state": value === null ? "indeterminate" : value ? "checked" : "unchecked",
-      "data-invalid": dataAttribute(errors.length > 0),
-      id: `${id}-input`,
+      "data-invalid": dataAttribute(hasErrors),
+      "data-dirty": dataAttribute(dirty),
+      id: id ? `${id}-input` : void 0,
       onFocus,
       onBlur,
       onChange: useCallback((e) => {

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

@@ -1 +1 @@
-{"version":3,"file":"FormCheckbox.js","sources":["../../../../../packages/react-form/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<SlotInput\n\t\t\tref={it => {\n\t\t\t\t(ref as any).current = checkboxRef\n\t\t\t\tsetCheckboxRef(it)\n\t\t\t}}\n\t\t\ttype=\"checkbox\"\n\t\t\tchecked={accessor.value === true}\n\t\t\tdata-state={value === null ? 'indeterminate' : (value ? 'checked' : 'unchecked')}\n\t\t\tdata-invalid={dataAttribute(errors.length > 0)}\n\t\t\tid={`${id}-input`}\n\t\t\tonFocus={onFocus}\n\t\t\tonBlur={onBlur}\n\t\t\tonChange={useCallback<ChangeEventHandler<HTMLInputElement>>(e => {\n\t\t\t\taccessorGetter().updateValue(e.target.checked)\n\t\t\t}, [accessorGetter])}\n\t\t\t{...props}\n\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;AAG3B,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;AAGP,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":["../../../../../packages/react-form/src/components/FormCheckbox.tsx"],"sourcesContent":["import * as React from 'react'\nimport { ChangeEventHandler, ReactElement, useCallback, useEffect } from 'react'\nimport {\n\tComponent,\n\tField,\n\tOptionallyVariableFieldValue,\n\tSugaredRelativeSingleField,\n\tTreeNodeEnvironmentFactory,\n\tuseField,\n} from '@contember/react-binding'\nimport { useFormFieldState } 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 accessor = useField<boolean>(field)\n\n\tconst formState = useFormFieldState()\n\tconst id = formState?.htmlId\n\tconst hasErrors = (formState?.errors.length ?? accessor.errors?.errors?.length ?? 0) > 0\n\tconst dirty = formState?.dirty ?? accessor.hasUnpersistedChanges\n\tconst value = accessor.value\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<SlotInput\n\t\t\tref={it => {\n\t\t\t\t(ref as any).current = checkboxRef\n\t\t\t\tsetCheckboxRef(it)\n\t\t\t}}\n\t\t\ttype=\"checkbox\"\n\t\t\tchecked={accessor.value === true}\n\t\t\tdata-state={value === null ? 'indeterminate' : (value ? 'checked' : 'unchecked')}\n\t\t\tdata-invalid={dataAttribute(hasErrors)}\n\t\t\tdata-dirty={dataAttribute(dirty)}\n\t\t\tid={id ? `${id}-input` : undefined}\n\t\t\tonFocus={onFocus}\n\t\t\tonBlur={onBlur}\n\t\t\tonChange={useCallback<ChangeEventHandler<HTMLInputElement>>(e => {\n\t\t\t\taccessorGetter().updateValue(e.target.checked)\n\t\t\t}, [accessorGetter])}\n\t\t\t{...props}\n\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":";;;;;;;;AAeA,MAAM,YAAY;AASL,MAAA,eAAe,UAA6B,CAAC,EAAE,OAAO,cAAc,cAAc,GAAG,YAAY;AACvG,QAAA,WAAW,SAAkB,KAAK;AAExC,QAAM,YAAY,kBAAkB;AACpC,QAAM,KAAK,WAAW;AAChB,QAAA,aAAa,WAAW,OAAO,UAAU,SAAS,QAAQ,QAAQ,UAAU,KAAK;AACjF,QAAA,QAAQ,WAAW,SAAS,SAAS;AAC3C,QAAM,QAAQ,SAAS;AACvB,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,IAAA;AAED,gBAAY,gBAAgB,UAAU;AAAA,EACpC,GAAA,CAAC,aAAa,KAAK,KAAK,CAAC;AAG3B,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,SAAS;AAAA,MACrC,cAAY,cAAc,KAAK;AAAA,MAC/B,IAAI,KAAK,GAAG,EAAE,WAAW;AAAA,MACzB;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,EACL;AAEF,GAAG,CAAC,EAAE,OAAO,cAAc,aAAA,GAAgB,QAAQ;AAC5C,QAAA,OAAO,2BAA2B,0BAA0B,KAAK,EAAE,MAAM,CAAC,EAAE,eAAe;AAC3F,QAAA,uBAAuB,iBAAiB,SAAY,eAAgB,KAAK,MAAM,iBAAiB,KAAK,MAAM,WAAW,OAAO;AAEnI,SAAQ,oBAAA,OAAA,EAAM,OAAc,cAA4B,cAAc,sBAAsB;AAC7F,CAAC;"}

package/dist/production/src/components/FormError.cjs

@@ -4,16 +4,16 @@ const React = require("react");
 const contexts = require("../contexts.cjs");
 const reactBinding = require("@contember/react-binding");
 const FormError = ({ children, formatter }) => {
-  const errors = contexts.useFormError();
-  const id = contexts.useFormFieldId();
-  const formatted = React.useMemo(() => formatter(errors ?? []), [errors, formatter]);
-  if (errors === void 0 || id === void 0) {
+  const formState = contexts.useFormFieldState();
+  if (!formState) {
     throw new reactBinding.BindingError("FormError must be used inside a FormField");
   }
+  const { errors, htmlId } = formState;
+  const formatted = React.useMemo(() => formatter(errors ?? []).filter((it, index, arr) => arr.indexOf(it) === index), [errors, formatter]);
   return formatted.map((it, index) => {
     return React.cloneElement(children, {
       key: index,
-      ...{ id: `${id}-error-${index}` },
+      ...htmlId ? { id: `${htmlId}-error-${index}` } : {},
       children: it
     });
   });

package/dist/production/src/components/FormError.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormError.cjs","sources":["../../../../../packages/react-form/src/components/FormError.tsx"],"sourcesContent":["import { cloneElement, ReactElement, ReactNode, useMemo } from 'react'\nimport { useFormError, useFormFieldId } from '../contexts'\nimport { BindingError, ErrorAccessor } from '@contember/react-binding'\n\nexport const FormError = ({ children, formatter }: {\n\tformatter: (errors: ErrorAccessor.Error[]) => ReactNode[]\n\tchildren: ReactElement\n}) => {\n\tconst errors = useFormError()\n\tconst id = useFormFieldId()\n\tconst formatted = useMemo(() => formatter(errors ?? []), [errors, formatter])\n\tif (errors === undefined || id === undefined) {\n\t\tthrow new BindingError('FormError must be used inside a FormField')\n\t}\n\treturn formatted.map((it, index) => {\n\t\treturn cloneElement(children, {\n\t\t\tkey: index,\n\t\t\t...{ id: `${id}-error-${index}` },\n\t\t\tchildren: it,\n\t\t})\n\t})\n}\n"],"names":["useFormError","useFormFieldId","useMemo","BindingError","cloneElement"],"mappings":";;;;;AAIO,MAAM,YAAY,CAAC,EAAE,UAAU,gBAGhC;AACL,QAAM,SAASA,SAAAA;AACf,QAAM,KAAKC,SAAAA;AACL,QAAA,YAAYC,cAAQ,MAAM,UAAU,UAAU,CAAE,CAAA,GAAG,CAAC,QAAQ,SAAS,CAAC;AACxE,MAAA,WAAW,UAAa,OAAO,QAAW;AACvC,UAAA,IAAIC,aAAAA,aAAa,2CAA2C;AAAA,EACnE;AACA,SAAO,UAAU,IAAI,CAAC,IAAI,UAAU;AACnC,WAAOC,MAAAA,aAAa,UAAU;AAAA,MAC7B,KAAK;AAAA,MACL,GAAG,EAAE,IAAI,GAAG,EAAE,UAAU,KAAK,GAAG;AAAA,MAChC,UAAU;AAAA,IAAA,CACV;AAAA,EAAA,CACD;AACF;;"}
+{"version":3,"file":"FormError.cjs","sources":["../../../../../packages/react-form/src/components/FormError.tsx"],"sourcesContent":["import { cloneElement, ReactElement, ReactNode, useMemo } from 'react'\nimport { useFormFieldState } from '../contexts'\nimport { BindingError, ErrorAccessor } from '@contember/react-binding'\n\nexport const FormError = ({ children, formatter }: {\n\tformatter: (errors: ErrorAccessor.Error[]) => ReactNode[]\n\tchildren: ReactElement\n}) => {\n\tconst formState = useFormFieldState()\n\tif (!formState) {\n\t\tthrow new BindingError('FormError must be used inside a FormField')\n\t}\n\tconst { errors, htmlId } = formState\n\tconst formatted = useMemo(() => formatter(errors ?? []).filter((it, index, arr) => arr.indexOf(it) === index), [errors, formatter])\n\treturn formatted.map((it, index) => {\n\t\treturn cloneElement(children, {\n\t\t\tkey: index,\n\t\t\t...(htmlId ? { id: `${htmlId}-error-${index}` } : {}),\n\t\t\tchildren: it,\n\t\t})\n\t})\n}\n"],"names":["useFormFieldState","BindingError","useMemo","cloneElement"],"mappings":";;;;;AAIO,MAAM,YAAY,CAAC,EAAE,UAAU,gBAGhC;AACL,QAAM,YAAYA,SAAAA,kBAAkB;AACpC,MAAI,CAAC,WAAW;AACT,UAAA,IAAIC,0BAAa,2CAA2C;AAAA,EAAA;AAE7D,QAAA,EAAE,QAAQ,OAAA,IAAW;AACrB,QAAA,YAAYC,cAAQ,MAAM,UAAU,UAAU,EAAE,EAAE,OAAO,CAAC,IAAI,OAAO,QAAQ,IAAI,QAAQ,EAAE,MAAM,KAAK,GAAG,CAAC,QAAQ,SAAS,CAAC;AAClI,SAAO,UAAU,IAAI,CAAC,IAAI,UAAU;AACnC,WAAOC,MAAAA,aAAa,UAAU;AAAA,MAC7B,KAAK;AAAA,MACL,GAAI,SAAS,EAAE,IAAI,GAAG,MAAM,UAAU,KAAK,GAAG,IAAI,CAAC;AAAA,MACnD,UAAU;AAAA,IAAA,CACV;AAAA,EAAA,CACD;AACF;;"}

package/dist/production/src/components/FormError.js

@@ -1,17 +1,17 @@
 import { useMemo, cloneElement } from "react";
-import { useFormError, useFormFieldId } from "../contexts.js";
+import { useFormFieldState } from "../contexts.js";
 import { BindingError } from "@contember/react-binding";
 const FormError = ({ children, formatter }) => {
-  const errors = useFormError();
-  const id = useFormFieldId();
-  const formatted = useMemo(() => formatter(errors ?? []), [errors, formatter]);
-  if (errors === void 0 || id === void 0) {
+  const formState = useFormFieldState();
+  if (!formState) {
     throw new BindingError("FormError must be used inside a FormField");
   }
+  const { errors, htmlId } = formState;
+  const formatted = useMemo(() => formatter(errors ?? []).filter((it, index, arr) => arr.indexOf(it) === index), [errors, formatter]);
   return formatted.map((it, index) => {
     return cloneElement(children, {
       key: index,
-      ...{ id: `${id}-error-${index}` },
+      ...htmlId ? { id: `${htmlId}-error-${index}` } : {},
       children: it
     });
   });

package/dist/production/src/components/FormError.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormError.js","sources":["../../../../../packages/react-form/src/components/FormError.tsx"],"sourcesContent":["import { cloneElement, ReactElement, ReactNode, useMemo } from 'react'\nimport { useFormError, useFormFieldId } from '../contexts'\nimport { BindingError, ErrorAccessor } from '@contember/react-binding'\n\nexport const FormError = ({ children, formatter }: {\n\tformatter: (errors: ErrorAccessor.Error[]) => ReactNode[]\n\tchildren: ReactElement\n}) => {\n\tconst errors = useFormError()\n\tconst id = useFormFieldId()\n\tconst formatted = useMemo(() => formatter(errors ?? []), [errors, formatter])\n\tif (errors === undefined || id === undefined) {\n\t\tthrow new BindingError('FormError must be used inside a FormField')\n\t}\n\treturn formatted.map((it, index) => {\n\t\treturn cloneElement(children, {\n\t\t\tkey: index,\n\t\t\t...{ id: `${id}-error-${index}` },\n\t\t\tchildren: it,\n\t\t})\n\t})\n}\n"],"names":[],"mappings":";;;AAIO,MAAM,YAAY,CAAC,EAAE,UAAU,gBAGhC;AACL,QAAM,SAAS;AACf,QAAM,KAAK;AACL,QAAA,YAAY,QAAQ,MAAM,UAAU,UAAU,CAAE,CAAA,GAAG,CAAC,QAAQ,SAAS,CAAC;AACxE,MAAA,WAAW,UAAa,OAAO,QAAW;AACvC,UAAA,IAAI,aAAa,2CAA2C;AAAA,EACnE;AACA,SAAO,UAAU,IAAI,CAAC,IAAI,UAAU;AACnC,WAAO,aAAa,UAAU;AAAA,MAC7B,KAAK;AAAA,MACL,GAAG,EAAE,IAAI,GAAG,EAAE,UAAU,KAAK,GAAG;AAAA,MAChC,UAAU;AAAA,IAAA,CACV;AAAA,EAAA,CACD;AACF;"}
+{"version":3,"file":"FormError.js","sources":["../../../../../packages/react-form/src/components/FormError.tsx"],"sourcesContent":["import { cloneElement, ReactElement, ReactNode, useMemo } from 'react'\nimport { useFormFieldState } from '../contexts'\nimport { BindingError, ErrorAccessor } from '@contember/react-binding'\n\nexport const FormError = ({ children, formatter }: {\n\tformatter: (errors: ErrorAccessor.Error[]) => ReactNode[]\n\tchildren: ReactElement\n}) => {\n\tconst formState = useFormFieldState()\n\tif (!formState) {\n\t\tthrow new BindingError('FormError must be used inside a FormField')\n\t}\n\tconst { errors, htmlId } = formState\n\tconst formatted = useMemo(() => formatter(errors ?? []).filter((it, index, arr) => arr.indexOf(it) === index), [errors, formatter])\n\treturn formatted.map((it, index) => {\n\t\treturn cloneElement(children, {\n\t\t\tkey: index,\n\t\t\t...(htmlId ? { id: `${htmlId}-error-${index}` } : {}),\n\t\t\tchildren: it,\n\t\t})\n\t})\n}\n"],"names":[],"mappings":";;;AAIO,MAAM,YAAY,CAAC,EAAE,UAAU,gBAGhC;AACL,QAAM,YAAY,kBAAkB;AACpC,MAAI,CAAC,WAAW;AACT,UAAA,IAAI,aAAa,2CAA2C;AAAA,EAAA;AAE7D,QAAA,EAAE,QAAQ,OAAA,IAAW;AACrB,QAAA,YAAY,QAAQ,MAAM,UAAU,UAAU,EAAE,EAAE,OAAO,CAAC,IAAI,OAAO,QAAQ,IAAI,QAAQ,EAAE,MAAM,KAAK,GAAG,CAAC,QAAQ,SAAS,CAAC;AAClI,SAAO,UAAU,IAAI,CAAC,IAAI,UAAU;AACnC,WAAO,aAAa,UAAU;AAAA,MAC7B,KAAK;AAAA,MACL,GAAI,SAAS,EAAE,IAAI,GAAG,MAAM,UAAU,KAAK,GAAG,IAAI,CAAC;AAAA,MACnD,UAAU;AAAA,IAAA,CACV;AAAA,EAAA,CACD;AACF;"}

package/dist/production/src/components/FormFieldScope.cjs

@@ -2,14 +2,24 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const contexts = require("../contexts.cjs");
 const reactBinding = require("@contember/react-binding");
-const emptyArr = [];
-const FormFieldScope = ({ field, children }) => {
-  const id = React.useId();
+const FormFieldStateProvider = require("./FormFieldStateProvider.cjs");
+const FormFieldScope = ({ field, children, required }) => {
   const fieldAccessor = reactBinding.useField({ field });
-  const errors = fieldAccessor.errors?.errors;
-  return /* @__PURE__ */ jsxRuntime.jsx(contexts.FormFieldIdContext.Provider, { value: id, children: /* @__PURE__ */ jsxRuntime.jsx(contexts.FormErrorContext.Provider, { value: errors ?? emptyArr, children }) });
+  const entityName = fieldAccessor.getParent().name;
+  const fieldName = fieldAccessor.fieldName;
+  const enumName = fieldAccessor.schema.enumName ?? void 0;
+  const fieldInfo = React.useMemo(() => ({ entityName, fieldName, enumName }), [entityName, fieldName, enumName]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    FormFieldStateProvider.FormFieldStateProvider,
+    {
+      errors: fieldAccessor.errors?.errors,
+      required: required ?? !fieldAccessor.schema.nullable,
+      dirty: fieldAccessor.hasUnpersistedChanges,
+      field: fieldInfo,
+      children
+    }
+  );
 };
 exports.FormFieldScope = FormFieldScope;
 //# sourceMappingURL=FormFieldScope.cjs.map

package/dist/production/src/components/FormFieldScope.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldScope.cjs","sources":["../../../../../packages/react-form/src/components/FormFieldScope.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useId } from 'react'\nimport { FormErrorContext, FormFieldIdContext } from '../contexts'\nimport { SugaredRelativeSingleField, useField } from '@contember/react-binding'\n\nconst emptyArr: [] = []\n\nexport type FormFieldScopeProps = {\n\tfield: SugaredRelativeSingleField['field']\n\tchildren: React.ReactNode\n}\n\nexport const FormFieldScope = ({ field, children }: FormFieldScopeProps) => {\n\tconst id = useId()\n\tconst fieldAccessor = useField({ field })\n\tconst errors = fieldAccessor.errors?.errors\n\treturn (\n\t\t<FormFieldIdContext.Provider value={id}>\n\t\t\t<FormErrorContext.Provider value={errors ?? emptyArr}>\n\t\t\t\t{children}\n\t\t\t</FormErrorContext.Provider>\n\t\t</FormFieldIdContext.Provider>\n\t)\n}\n"],"names":["useId","useField","jsx","FormFieldIdContext","FormErrorContext"],"mappings":";;;;;;AAKA,MAAM,WAAe,CAAA;AAOd,MAAM,iBAAiB,CAAC,EAAE,OAAO,eAAoC;AAC3E,QAAM,KAAKA,MAAAA;AACX,QAAM,gBAAgBC,aAAAA,SAAS,EAAE,MAAO,CAAA;AAClC,QAAA,SAAS,cAAc,QAAQ;AACrC,SACEC,2BAAAA,IAAAC,SAAAA,mBAAmB,UAAnB,EAA4B,OAAO,IACnC,UAAAD,2BAAA,IAACE,SAAiB,iBAAA,UAAjB,EAA0B,OAAO,UAAU,UAC1C,UACF,EACD,CAAA;AAEF;;"}
+{"version":3,"file":"FormFieldScope.cjs","sources":["../../../../../packages/react-form/src/components/FormFieldScope.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useMemo } from 'react'\nimport { SugaredRelativeSingleField, useField } from '@contember/react-binding'\nimport { FormFieldStateProvider } from './FormFieldStateProvider'\n\nexport type FormFieldScopeProps = {\n\tfield: SugaredRelativeSingleField['field']\n\tchildren: React.ReactNode\n\trequired?: boolean\n}\n\nexport const FormFieldScope = ({ field, children, required }: FormFieldScopeProps) => {\n\tconst fieldAccessor = useField({ field })\n\tconst entityName = fieldAccessor.getParent().name\n\tconst fieldName = fieldAccessor.fieldName\n\tconst enumName = fieldAccessor.schema.enumName ?? undefined\n\tconst fieldInfo = useMemo(() => ({ entityName, fieldName, enumName }), [entityName, fieldName, enumName])\n\n\treturn (\n\t\t<FormFieldStateProvider\n\t\t\terrors={fieldAccessor.errors?.errors}\n\t\t\trequired={required ?? !fieldAccessor.schema.nullable}\n\t\t\tdirty={fieldAccessor.hasUnpersistedChanges}\n\t\t\tfield={fieldInfo}\n\t\t>\n\t\t\t{children}\n\t\t</FormFieldStateProvider>\n\t)\n}\n"],"names":["useField","useMemo","jsx","FormFieldStateProvider"],"mappings":";;;;;;AAWO,MAAM,iBAAiB,CAAC,EAAE,OAAO,UAAU,eAAoC;AACrF,QAAM,gBAAgBA,aAAAA,SAAS,EAAE,OAAO;AAClC,QAAA,aAAa,cAAc,UAAA,EAAY;AAC7C,QAAM,YAAY,cAAc;AAC1B,QAAA,WAAW,cAAc,OAAO,YAAY;AAClD,QAAM,YAAYC,MAAAA,QAAQ,OAAO,EAAE,YAAY,WAAW,SAAS,IAAI,CAAC,YAAY,WAAW,QAAQ,CAAC;AAGvG,SAAAC,2BAAA;AAAA,IAACC,uBAAA;AAAA,IAAA;AAAA,MACA,QAAQ,cAAc,QAAQ;AAAA,MAC9B,UAAU,YAAY,CAAC,cAAc,OAAO;AAAA,MAC5C,OAAO,cAAc;AAAA,MACrB,OAAO;AAAA,MAEN;AAAA,IAAA;AAAA,EACF;AAEF;;"}

package/dist/production/src/components/FormFieldScope.js

@@ -1,13 +1,23 @@
 import { jsx } from "react/jsx-runtime";
-import { useId } from "react";
-import { FormFieldIdContext, FormErrorContext } from "../contexts.js";
+import { useMemo } from "react";
 import { useField } from "@contember/react-binding";
-const emptyArr = [];
-const FormFieldScope = ({ field, children }) => {
-  const id = useId();
+import { FormFieldStateProvider } from "./FormFieldStateProvider.js";
+const FormFieldScope = ({ field, children, required }) => {
   const fieldAccessor = useField({ field });
-  const errors = fieldAccessor.errors?.errors;
-  return /* @__PURE__ */ jsx(FormFieldIdContext.Provider, { value: id, children: /* @__PURE__ */ jsx(FormErrorContext.Provider, { value: errors ?? emptyArr, children }) });
+  const entityName = fieldAccessor.getParent().name;
+  const fieldName = fieldAccessor.fieldName;
+  const enumName = fieldAccessor.schema.enumName ?? void 0;
+  const fieldInfo = useMemo(() => ({ entityName, fieldName, enumName }), [entityName, fieldName, enumName]);
+  return /* @__PURE__ */ jsx(
+    FormFieldStateProvider,
+    {
+      errors: fieldAccessor.errors?.errors,
+      required: required ?? !fieldAccessor.schema.nullable,
+      dirty: fieldAccessor.hasUnpersistedChanges,
+      field: fieldInfo,
+      children
+    }
+  );
 };
 export {
   FormFieldScope

package/dist/production/src/components/FormFieldScope.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldScope.js","sources":["../../../../../packages/react-form/src/components/FormFieldScope.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useId } from 'react'\nimport { FormErrorContext, FormFieldIdContext } from '../contexts'\nimport { SugaredRelativeSingleField, useField } from '@contember/react-binding'\n\nconst emptyArr: [] = []\n\nexport type FormFieldScopeProps = {\n\tfield: SugaredRelativeSingleField['field']\n\tchildren: React.ReactNode\n}\n\nexport const FormFieldScope = ({ field, children }: FormFieldScopeProps) => {\n\tconst id = useId()\n\tconst fieldAccessor = useField({ field })\n\tconst errors = fieldAccessor.errors?.errors\n\treturn (\n\t\t<FormFieldIdContext.Provider value={id}>\n\t\t\t<FormErrorContext.Provider value={errors ?? emptyArr}>\n\t\t\t\t{children}\n\t\t\t</FormErrorContext.Provider>\n\t\t</FormFieldIdContext.Provider>\n\t)\n}\n"],"names":[],"mappings":";;;;AAKA,MAAM,WAAe,CAAA;AAOd,MAAM,iBAAiB,CAAC,EAAE,OAAO,eAAoC;AAC3E,QAAM,KAAK;AACX,QAAM,gBAAgB,SAAS,EAAE,MAAO,CAAA;AAClC,QAAA,SAAS,cAAc,QAAQ;AACrC,SACE,oBAAA,mBAAmB,UAAnB,EAA4B,OAAO,IACnC,UAAA,oBAAC,iBAAiB,UAAjB,EAA0B,OAAO,UAAU,UAC1C,UACF,EACD,CAAA;AAEF;"}
+{"version":3,"file":"FormFieldScope.js","sources":["../../../../../packages/react-form/src/components/FormFieldScope.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useMemo } from 'react'\nimport { SugaredRelativeSingleField, useField } from '@contember/react-binding'\nimport { FormFieldStateProvider } from './FormFieldStateProvider'\n\nexport type FormFieldScopeProps = {\n\tfield: SugaredRelativeSingleField['field']\n\tchildren: React.ReactNode\n\trequired?: boolean\n}\n\nexport const FormFieldScope = ({ field, children, required }: FormFieldScopeProps) => {\n\tconst fieldAccessor = useField({ field })\n\tconst entityName = fieldAccessor.getParent().name\n\tconst fieldName = fieldAccessor.fieldName\n\tconst enumName = fieldAccessor.schema.enumName ?? undefined\n\tconst fieldInfo = useMemo(() => ({ entityName, fieldName, enumName }), [entityName, fieldName, enumName])\n\n\treturn (\n\t\t<FormFieldStateProvider\n\t\t\terrors={fieldAccessor.errors?.errors}\n\t\t\trequired={required ?? !fieldAccessor.schema.nullable}\n\t\t\tdirty={fieldAccessor.hasUnpersistedChanges}\n\t\t\tfield={fieldInfo}\n\t\t>\n\t\t\t{children}\n\t\t</FormFieldStateProvider>\n\t)\n}\n"],"names":[],"mappings":";;;;AAWO,MAAM,iBAAiB,CAAC,EAAE,OAAO,UAAU,eAAoC;AACrF,QAAM,gBAAgB,SAAS,EAAE,OAAO;AAClC,QAAA,aAAa,cAAc,UAAA,EAAY;AAC7C,QAAM,YAAY,cAAc;AAC1B,QAAA,WAAW,cAAc,OAAO,YAAY;AAClD,QAAM,YAAY,QAAQ,OAAO,EAAE,YAAY,WAAW,SAAS,IAAI,CAAC,YAAY,WAAW,QAAQ,CAAC;AAGvG,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,QAAQ,cAAc,QAAQ;AAAA,MAC9B,UAAU,YAAY,CAAC,cAAc,OAAO;AAAA,MAC5C,OAAO,cAAc;AAAA,MACrB,OAAO;AAAA,MAEN;AAAA,IAAA;AAAA,EACF;AAEF;"}