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

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

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const contexts = require("../contexts.cjs");
+const emptyArr = [];
+const FormFieldStateProvider = ({ children, required = false, errors = emptyArr, dirty = false, htmlId, field }) => {
+  const generatedId = React.useId();
+  htmlId ?? (htmlId = generatedId);
+  const value = React.useMemo(() => ({ htmlId, required, errors, dirty, field }), [htmlId, required, errors, dirty, field]);
+  return /* @__PURE__ */ jsxRuntime.jsx(contexts.FormFieldStateContext.Provider, { value, children });
+};
+const FormFieldIdContext = {
+  /**
+   * @deprecated use `FormFieldStateProvider` instead
+   */
+  Provider: ({ children, value }) => {
+    const state = contexts.useFormFieldState();
+    return /* @__PURE__ */ jsxRuntime.jsx(FormFieldStateProvider, { ...state, htmlId: value, children });
+  }
+};
+const FormErrorContext = {
+  /**
+   * @deprecated use `FormFieldStateProvider` instead
+   */
+  Provider: ({ children, value }) => {
+    const state = contexts.useFormFieldState();
+    return /* @__PURE__ */ jsxRuntime.jsx(FormFieldStateProvider, { ...state, errors: value, children });
+  }
+};
+exports.FormErrorContext = FormErrorContext;
+exports.FormFieldIdContext = FormFieldIdContext;
+exports.FormFieldStateProvider = FormFieldStateProvider;
+//# sourceMappingURL=FormFieldStateProvider.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldStateProvider.cjs","sources":["../../../../../packages/react-form/src/components/FormFieldStateProvider.tsx"],"sourcesContent":["import { ErrorAccessor } from '@contember/react-binding'\nimport { useEffect, useId, useMemo } from 'react'\nimport { FormFieldStateContext, useFormFieldState } from '../contexts'\nimport { FormFieldState } from '../types'\n\nconst emptyArr: [] = []\n\nexport type FormFieldStateProvider =\n\t& Partial<FormFieldState>\n\t& {\n\t\tchildren: React.ReactNode\n\t}\n\nexport const FormFieldStateProvider = ({ children, required = false, errors = emptyArr, dirty = false, htmlId, field }: FormFieldStateProvider) => {\n\tconst generatedId = useId()\n\thtmlId ??= generatedId\n\tconst value = useMemo(() => ({ htmlId, required, errors, dirty, field }), [htmlId, required, errors, dirty, field])\n\treturn <FormFieldStateContext.Provider value={value}>{children}</FormFieldStateContext.Provider>\n}\n\n/**\n * BC for\n * \t<FormFieldIdContext.Provider value={id}>\n * \t<FormErrorContext.Provider value={[]}>\n */\n\n/**\n * @deprecated use `FormFieldStateProvider` instead\n */\nexport const FormFieldIdContext = {\n\t/**\n\t * @deprecated use `FormFieldStateProvider` instead\n\t */\n\tProvider: ({ children, value }: { children: React.ReactNode; value: string }) => {\n\t\tconst state = useFormFieldState()\n\t\tif (import.meta.env.DEV) {\n\t\t\t// eslint-disable-next-line react-hooks/rules-of-hooks\n\t\t\tuseEffect(() => {\n\t\t\t\tconsole.warn('FormFieldIdContext.Provider is deprecated, use FormFieldStateProvider instead')\n\t\t\t}, [])\n\t\t}\n\t\treturn (\n\t\t\t<FormFieldStateProvider {...state} htmlId={value}>\n\t\t\t\t{children}\n\t\t\t</FormFieldStateProvider>\n\t\t)\n\t},\n}\n\n/**\n * @deprecated use `FormFieldStateProvider` instead\n */\nexport const FormErrorContext = {\n\t/**\n\t * @deprecated use `FormFieldStateProvider` instead\n\t */\n\tProvider: ({ children, value }: { children: React.ReactNode; value: ErrorAccessor.Error[] }) => {\n\t\tconst state = useFormFieldState()\n\t\tif (import.meta.env.DEV) {\n\t\t\t// eslint-disable-next-line react-hooks/rules-of-hooks\n\t\t\tuseEffect(() => {\n\t\t\t\tconsole.warn('FormErrorContext.Provider is deprecated, use FormFieldStateProvider instead')\n\t\t\t}, [])\n\t\t}\n\t\treturn (\n\t\t\t<FormFieldStateProvider {...state} errors={value}>\n\t\t\t\t{children}\n\t\t\t</FormFieldStateProvider>\n\t\t)\n\t},\n}\n"],"names":["useId","useMemo","FormFieldStateContext","useFormFieldState"],"mappings":";;;;;AAKA,MAAM,WAAe,CAAC;AAQf,MAAM,yBAAyB,CAAC,EAAE,UAAU,WAAW,OAAO,SAAS,UAAU,QAAQ,OAAO,QAAQ,MAAA,MAAoC;AAClJ,QAAM,cAAcA,MAAAA,MAAM;AACf,aAAA,SAAA;AACX,QAAM,QAAQC,MAAAA,QAAQ,OAAO,EAAE,QAAQ,UAAU,QAAQ,OAAO,MAAM,IAAI,CAAC,QAAQ,UAAU,QAAQ,OAAO,KAAK,CAAC;AAClH,wCAAQC,SAAAA,sBAAsB,UAAtB,EAA+B,OAAe,UAAS;AAChE;AAWO,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA,EAIjC,UAAU,CAAC,EAAE,UAAU,YAA0D;AAChF,UAAM,QAAQC,SAAAA,kBAAkB;0CAQ9B,wBAAwB,EAAA,GAAG,OAAO,QAAQ,OACzC,UACF;AAAA,EAAA;AAGH;AAKO,MAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA,EAI/B,UAAU,CAAC,EAAE,UAAU,YAAyE;AAC/F,UAAM,QAAQA,SAAAA,kBAAkB;0CAQ9B,wBAAwB,EAAA,GAAG,OAAO,QAAQ,OACzC,UACF;AAAA,EAAA;AAGH;;;;"}

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

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import { useId, useMemo } from "react";
+import { FormFieldStateContext, useFormFieldState } from "../contexts.js";
+const emptyArr = [];
+const FormFieldStateProvider = ({ children, required = false, errors = emptyArr, dirty = false, htmlId, field }) => {
+  const generatedId = useId();
+  htmlId ?? (htmlId = generatedId);
+  const value = useMemo(() => ({ htmlId, required, errors, dirty, field }), [htmlId, required, errors, dirty, field]);
+  return /* @__PURE__ */ jsx(FormFieldStateContext.Provider, { value, children });
+};
+const FormFieldIdContext = {
+  /**
+   * @deprecated use `FormFieldStateProvider` instead
+   */
+  Provider: ({ children, value }) => {
+    const state = useFormFieldState();
+    return /* @__PURE__ */ jsx(FormFieldStateProvider, { ...state, htmlId: value, children });
+  }
+};
+const FormErrorContext = {
+  /**
+   * @deprecated use `FormFieldStateProvider` instead
+   */
+  Provider: ({ children, value }) => {
+    const state = useFormFieldState();
+    return /* @__PURE__ */ jsx(FormFieldStateProvider, { ...state, errors: value, children });
+  }
+};
+export {
+  FormErrorContext,
+  FormFieldIdContext,
+  FormFieldStateProvider
+};
+//# sourceMappingURL=FormFieldStateProvider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldStateProvider.js","sources":["../../../../../packages/react-form/src/components/FormFieldStateProvider.tsx"],"sourcesContent":["import { ErrorAccessor } from '@contember/react-binding'\nimport { useEffect, useId, useMemo } from 'react'\nimport { FormFieldStateContext, useFormFieldState } from '../contexts'\nimport { FormFieldState } from '../types'\n\nconst emptyArr: [] = []\n\nexport type FormFieldStateProvider =\n\t& Partial<FormFieldState>\n\t& {\n\t\tchildren: React.ReactNode\n\t}\n\nexport const FormFieldStateProvider = ({ children, required = false, errors = emptyArr, dirty = false, htmlId, field }: FormFieldStateProvider) => {\n\tconst generatedId = useId()\n\thtmlId ??= generatedId\n\tconst value = useMemo(() => ({ htmlId, required, errors, dirty, field }), [htmlId, required, errors, dirty, field])\n\treturn <FormFieldStateContext.Provider value={value}>{children}</FormFieldStateContext.Provider>\n}\n\n/**\n * BC for\n * \t<FormFieldIdContext.Provider value={id}>\n * \t<FormErrorContext.Provider value={[]}>\n */\n\n/**\n * @deprecated use `FormFieldStateProvider` instead\n */\nexport const FormFieldIdContext = {\n\t/**\n\t * @deprecated use `FormFieldStateProvider` instead\n\t */\n\tProvider: ({ children, value }: { children: React.ReactNode; value: string }) => {\n\t\tconst state = useFormFieldState()\n\t\tif (import.meta.env.DEV) {\n\t\t\t// eslint-disable-next-line react-hooks/rules-of-hooks\n\t\t\tuseEffect(() => {\n\t\t\t\tconsole.warn('FormFieldIdContext.Provider is deprecated, use FormFieldStateProvider instead')\n\t\t\t}, [])\n\t\t}\n\t\treturn (\n\t\t\t<FormFieldStateProvider {...state} htmlId={value}>\n\t\t\t\t{children}\n\t\t\t</FormFieldStateProvider>\n\t\t)\n\t},\n}\n\n/**\n * @deprecated use `FormFieldStateProvider` instead\n */\nexport const FormErrorContext = {\n\t/**\n\t * @deprecated use `FormFieldStateProvider` instead\n\t */\n\tProvider: ({ children, value }: { children: React.ReactNode; value: ErrorAccessor.Error[] }) => {\n\t\tconst state = useFormFieldState()\n\t\tif (import.meta.env.DEV) {\n\t\t\t// eslint-disable-next-line react-hooks/rules-of-hooks\n\t\t\tuseEffect(() => {\n\t\t\t\tconsole.warn('FormErrorContext.Provider is deprecated, use FormFieldStateProvider instead')\n\t\t\t}, [])\n\t\t}\n\t\treturn (\n\t\t\t<FormFieldStateProvider {...state} errors={value}>\n\t\t\t\t{children}\n\t\t\t</FormFieldStateProvider>\n\t\t)\n\t},\n}\n"],"names":[],"mappings":";;;AAKA,MAAM,WAAe,CAAC;AAQf,MAAM,yBAAyB,CAAC,EAAE,UAAU,WAAW,OAAO,SAAS,UAAU,QAAQ,OAAO,QAAQ,MAAA,MAAoC;AAClJ,QAAM,cAAc,MAAM;AACf,aAAA,SAAA;AACX,QAAM,QAAQ,QAAQ,OAAO,EAAE,QAAQ,UAAU,QAAQ,OAAO,MAAM,IAAI,CAAC,QAAQ,UAAU,QAAQ,OAAO,KAAK,CAAC;AAClH,6BAAQ,sBAAsB,UAAtB,EAA+B,OAAe,UAAS;AAChE;AAWO,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA,EAIjC,UAAU,CAAC,EAAE,UAAU,YAA0D;AAChF,UAAM,QAAQ,kBAAkB;+BAQ9B,wBAAwB,EAAA,GAAG,OAAO,QAAQ,OACzC,UACF;AAAA,EAAA;AAGH;AAKO,MAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA,EAI/B,UAAU,CAAC,EAAE,UAAU,YAAyE;AAC/F,UAAM,QAAQ,kBAAkB;+BAQ9B,wBAAwB,EAAA,GAAG,OAAO,QAAQ,OACzC,UACF;AAAA,EAAA;AAGH;"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"FormHasManyRelationScope.cjs","sources":["../../../../../packages/react-form/src/components/FormHasManyRelationScope.tsx"],"sourcesContent":["import { SugaredRelativeEntityList, useEntityList } from '@contember/react-binding'\nimport * as React from 'react'\nimport { useId } from 'react'\nimport { FormErrorContext, FormFieldIdContext } from '../contexts'\n\nconst emptyArr: [] = []\n\nexport type FormHasManyRelationScopeProps = {\n\tfield: SugaredRelativeEntityList['field']\n\tchildren: React.ReactNode\n}\n\nexport const FormHasManyRelationScope = ({ field, children }: FormHasManyRelationScopeProps) => {\n\tconst id = useId()\n\tconst entityRelation = useEntityList({ field })\n\tconst errors = entityRelation.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","useEntityList","jsx","FormFieldIdContext","FormErrorContext"],"mappings":";;;;;;AAKA,MAAM,WAAe,CAAA;AAOd,MAAM,2BAA2B,CAAC,EAAE,OAAO,eAA8C;AAC/F,QAAM,KAAKA,MAAAA;AACX,QAAM,iBAAiBC,aAAAA,cAAc,EAAE,MAAO,CAAA;AACxC,QAAA,SAAS,eAAe,QAAQ;AACtC,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":"FormHasManyRelationScope.cjs","sources":["../../../../../packages/react-form/src/components/FormHasManyRelationScope.tsx"],"sourcesContent":["import { HasManyRelationMarker, SugaredRelativeEntityList, useEntityList } from '@contember/react-binding'\nimport * as React from 'react'\nimport { FormFieldStateProvider } from './FormFieldStateProvider'\nimport { useMemo } from 'react'\n\nexport type FormHasManyRelationScopeProps = {\n\tfield: SugaredRelativeEntityList['field']\n\torderBy?: SugaredRelativeEntityList['orderBy']\n\tlimit?: SugaredRelativeEntityList['limit']\n\toffset?: SugaredRelativeEntityList['offset']\n\tchildren: React.ReactNode\n\trequired?: boolean\n}\n\nexport const FormHasManyRelationScope = ({ children, required, ...props }: FormHasManyRelationScopeProps) => {\n\tconst entityRelation = useEntityList(props)\n\tconst entityName = entityRelation.getParent()!.name\n\tconst marker = entityRelation.getMarker() as HasManyRelationMarker\n\tconst fieldName = marker.parameters.field\n\tconst fieldInfo = useMemo(() => ({ entityName, fieldName }), [entityName, fieldName])\n\n\treturn (\n\t\t<FormFieldStateProvider\n\t\t\terrors={entityRelation.errors?.errors}\n\t\t\tdirty={entityRelation.hasUnpersistedChanges}\n\t\t\trequired={required}\n\t\t\tfield={fieldInfo}\n\t\t>\n\t\t\t{children}\n\t\t</FormFieldStateProvider>\n\t)\n}\n"],"names":["useEntityList","useMemo","jsx","FormFieldStateProvider"],"mappings":";;;;;;AAcO,MAAM,2BAA2B,CAAC,EAAE,UAAU,UAAU,GAAG,YAA2C;AACtG,QAAA,iBAAiBA,2BAAc,KAAK;AACpC,QAAA,aAAa,eAAe,UAAA,EAAa;AACzC,QAAA,SAAS,eAAe,UAAU;AAClC,QAAA,YAAY,OAAO,WAAW;AAC9B,QAAA,YAAYC,cAAQ,OAAO,EAAE,YAAY,cAAc,CAAC,YAAY,SAAS,CAAC;AAGnF,SAAAC,2BAAA;AAAA,IAACC,uBAAA;AAAA,IAAA;AAAA,MACA,QAAQ,eAAe,QAAQ;AAAA,MAC/B,OAAO,eAAe;AAAA,MACtB;AAAA,MACA,OAAO;AAAA,MAEN;AAAA,IAAA;AAAA,EACF;AAEF;;"}

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

@@ -1,13 +1,23 @@
 import { jsx } from "react/jsx-runtime";
 import { useEntityList } from "@contember/react-binding";
-import { useId } from "react";
-import { FormFieldIdContext, FormErrorContext } from "../contexts.js";
-const emptyArr = [];
-const FormHasManyRelationScope = ({ field, children }) => {
-  const id = useId();
-  const entityRelation = useEntityList({ field });
-  const errors = entityRelation.errors?.errors;
-  return /* @__PURE__ */ jsx(FormFieldIdContext.Provider, { value: id, children: /* @__PURE__ */ jsx(FormErrorContext.Provider, { value: errors ?? emptyArr, children }) });
+import { FormFieldStateProvider } from "./FormFieldStateProvider.js";
+import { useMemo } from "react";
+const FormHasManyRelationScope = ({ children, required, ...props }) => {
+  const entityRelation = useEntityList(props);
+  const entityName = entityRelation.getParent().name;
+  const marker = entityRelation.getMarker();
+  const fieldName = marker.parameters.field;
+  const fieldInfo = useMemo(() => ({ entityName, fieldName }), [entityName, fieldName]);
+  return /* @__PURE__ */ jsx(
+    FormFieldStateProvider,
+    {
+      errors: entityRelation.errors?.errors,
+      dirty: entityRelation.hasUnpersistedChanges,
+      required,
+      field: fieldInfo,
+      children
+    }
+  );
 };
 export {
   FormHasManyRelationScope

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

@@ -1 +1 @@
-{"version":3,"file":"FormHasManyRelationScope.js","sources":["../../../../../packages/react-form/src/components/FormHasManyRelationScope.tsx"],"sourcesContent":["import { SugaredRelativeEntityList, useEntityList } from '@contember/react-binding'\nimport * as React from 'react'\nimport { useId } from 'react'\nimport { FormErrorContext, FormFieldIdContext } from '../contexts'\n\nconst emptyArr: [] = []\n\nexport type FormHasManyRelationScopeProps = {\n\tfield: SugaredRelativeEntityList['field']\n\tchildren: React.ReactNode\n}\n\nexport const FormHasManyRelationScope = ({ field, children }: FormHasManyRelationScopeProps) => {\n\tconst id = useId()\n\tconst entityRelation = useEntityList({ field })\n\tconst errors = entityRelation.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,2BAA2B,CAAC,EAAE,OAAO,eAA8C;AAC/F,QAAM,KAAK;AACX,QAAM,iBAAiB,cAAc,EAAE,MAAO,CAAA;AACxC,QAAA,SAAS,eAAe,QAAQ;AACtC,SACE,oBAAA,mBAAmB,UAAnB,EAA4B,OAAO,IACnC,UAAA,oBAAC,iBAAiB,UAAjB,EAA0B,OAAO,UAAU,UAC1C,UACF,EACD,CAAA;AAEF;"}
+{"version":3,"file":"FormHasManyRelationScope.js","sources":["../../../../../packages/react-form/src/components/FormHasManyRelationScope.tsx"],"sourcesContent":["import { HasManyRelationMarker, SugaredRelativeEntityList, useEntityList } from '@contember/react-binding'\nimport * as React from 'react'\nimport { FormFieldStateProvider } from './FormFieldStateProvider'\nimport { useMemo } from 'react'\n\nexport type FormHasManyRelationScopeProps = {\n\tfield: SugaredRelativeEntityList['field']\n\torderBy?: SugaredRelativeEntityList['orderBy']\n\tlimit?: SugaredRelativeEntityList['limit']\n\toffset?: SugaredRelativeEntityList['offset']\n\tchildren: React.ReactNode\n\trequired?: boolean\n}\n\nexport const FormHasManyRelationScope = ({ children, required, ...props }: FormHasManyRelationScopeProps) => {\n\tconst entityRelation = useEntityList(props)\n\tconst entityName = entityRelation.getParent()!.name\n\tconst marker = entityRelation.getMarker() as HasManyRelationMarker\n\tconst fieldName = marker.parameters.field\n\tconst fieldInfo = useMemo(() => ({ entityName, fieldName }), [entityName, fieldName])\n\n\treturn (\n\t\t<FormFieldStateProvider\n\t\t\terrors={entityRelation.errors?.errors}\n\t\t\tdirty={entityRelation.hasUnpersistedChanges}\n\t\t\trequired={required}\n\t\t\tfield={fieldInfo}\n\t\t>\n\t\t\t{children}\n\t\t</FormFieldStateProvider>\n\t)\n}\n"],"names":[],"mappings":";;;;AAcO,MAAM,2BAA2B,CAAC,EAAE,UAAU,UAAU,GAAG,YAA2C;AACtG,QAAA,iBAAiB,cAAc,KAAK;AACpC,QAAA,aAAa,eAAe,UAAA,EAAa;AACzC,QAAA,SAAS,eAAe,UAAU;AAClC,QAAA,YAAY,OAAO,WAAW;AAC9B,QAAA,YAAY,QAAQ,OAAO,EAAE,YAAY,cAAc,CAAC,YAAY,SAAS,CAAC;AAGnF,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,QAAQ,eAAe,QAAQ;AAAA,MAC/B,OAAO,eAAe;AAAA,MACtB;AAAA,MACA,OAAO;AAAA,MAEN;AAAA,IAAA;AAAA,EACF;AAEF;"}

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

@@ -1,15 +1,25 @@
 "use strict";
 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 FormHasOneRelationScope = ({ field, children }) => {
-  const id = React.useId();
+const FormFieldStateProvider = require("./FormFieldStateProvider.cjs");
+const React = require("react");
+const FormHasOneRelationScope = ({ field, children, required }) => {
   const entityRelation = reactBinding.useEntity({ field });
-  const errors = entityRelation.errors?.errors;
-  return /* @__PURE__ */ jsxRuntime.jsx(contexts.FormFieldIdContext.Provider, { value: id, children: /* @__PURE__ */ jsxRuntime.jsx(contexts.FormErrorContext.Provider, { value: errors ?? emptyArr, children }) });
+  const marker = entityRelation.getMarker();
+  const fieldName = marker.parameters.field;
+  const entityName = entityRelation.getParent().name;
+  const fieldInfo = React.useMemo(() => ({ entityName, fieldName }), [entityName, fieldName]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    FormFieldStateProvider.FormFieldStateProvider,
+    {
+      errors: entityRelation.errors?.errors,
+      dirty: entityRelation.hasUnpersistedChanges,
+      required,
+      field: fieldInfo,
+      children
+    }
+  );
 };
 exports.FormHasOneRelationScope = FormHasOneRelationScope;
 //# sourceMappingURL=FormHasOneRelationScope.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"FormHasOneRelationScope.cjs","sources":["../../../../../packages/react-form/src/components/FormHasOneRelationScope.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useId } from 'react'\nimport { FormErrorContext, FormFieldIdContext } from '../contexts'\nimport { SugaredRelativeSingleEntity, useEntity } from '@contember/react-binding'\n\nconst emptyArr: [] = []\n\nexport type FormHasOneRelationScopeProps = {\n\tfield: SugaredRelativeSingleEntity['field']\n\tchildren: React.ReactNode\n}\n\nexport const FormHasOneRelationScope = ({ field, children }: FormHasOneRelationScopeProps) => {\n\tconst id = useId()\n\tconst entityRelation = useEntity({ field })\n\tconst errors = entityRelation.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","useEntity","jsx","FormFieldIdContext","FormErrorContext"],"mappings":";;;;;;AAKA,MAAM,WAAe,CAAA;AAOd,MAAM,0BAA0B,CAAC,EAAE,OAAO,eAA6C;AAC7F,QAAM,KAAKA,MAAAA;AACX,QAAM,iBAAiBC,aAAAA,UAAU,EAAE,MAAO,CAAA;AACpC,QAAA,SAAS,eAAe,QAAQ;AACtC,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":"FormHasOneRelationScope.cjs","sources":["../../../../../packages/react-form/src/components/FormHasOneRelationScope.tsx"],"sourcesContent":["import * as React from 'react'\nimport { HasOneRelationMarker, SugaredRelativeSingleEntity, useEntity } from '@contember/react-binding'\nimport { FormFieldStateProvider } from './FormFieldStateProvider'\nimport { useMemo } from 'react'\n\nexport type FormHasOneRelationScopeProps = {\n\tfield: SugaredRelativeSingleEntity['field']\n\tchildren: React.ReactNode\n\trequired?: boolean\n}\n\nexport const FormHasOneRelationScope = ({ field, children, required }: FormHasOneRelationScopeProps) => {\n\tconst entityRelation = useEntity({ field })\n\tconst marker = entityRelation.getMarker() as HasOneRelationMarker\n\tconst fieldName = marker.parameters.field\n\tconst entityName = entityRelation.getParent()!.name\n\tconst fieldInfo = useMemo(() => ({ entityName, fieldName }), [entityName, fieldName])\n\treturn (\n\t\t<FormFieldStateProvider\n\t\t\terrors={entityRelation.errors?.errors}\n\t\t\tdirty={entityRelation.hasUnpersistedChanges}\n\t\t\trequired={required}\n\t\t\tfield={fieldInfo}\n\t\t>\n\t\t\t{children}\n\t\t</FormFieldStateProvider>\n\t)\n}\n"],"names":["useEntity","useMemo","jsx","FormFieldStateProvider"],"mappings":";;;;;;AAWO,MAAM,0BAA0B,CAAC,EAAE,OAAO,UAAU,eAA6C;AACvG,QAAM,iBAAiBA,aAAAA,UAAU,EAAE,OAAO;AACpC,QAAA,SAAS,eAAe,UAAU;AAClC,QAAA,YAAY,OAAO,WAAW;AAC9B,QAAA,aAAa,eAAe,UAAA,EAAa;AACzC,QAAA,YAAYC,cAAQ,OAAO,EAAE,YAAY,cAAc,CAAC,YAAY,SAAS,CAAC;AAEnF,SAAAC,2BAAA;AAAA,IAACC,uBAAA;AAAA,IAAA;AAAA,MACA,QAAQ,eAAe,QAAQ;AAAA,MAC/B,OAAO,eAAe;AAAA,MACtB;AAAA,MACA,OAAO;AAAA,MAEN;AAAA,IAAA;AAAA,EACF;AAEF;;"}

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

@@ -1,13 +1,23 @@
 import { jsx } from "react/jsx-runtime";
-import { useId } from "react";
-import { FormFieldIdContext, FormErrorContext } from "../contexts.js";
 import { useEntity } from "@contember/react-binding";
-const emptyArr = [];
-const FormHasOneRelationScope = ({ field, children }) => {
-  const id = useId();
+import { FormFieldStateProvider } from "./FormFieldStateProvider.js";
+import { useMemo } from "react";
+const FormHasOneRelationScope = ({ field, children, required }) => {
   const entityRelation = useEntity({ field });
-  const errors = entityRelation.errors?.errors;
-  return /* @__PURE__ */ jsx(FormFieldIdContext.Provider, { value: id, children: /* @__PURE__ */ jsx(FormErrorContext.Provider, { value: errors ?? emptyArr, children }) });
+  const marker = entityRelation.getMarker();
+  const fieldName = marker.parameters.field;
+  const entityName = entityRelation.getParent().name;
+  const fieldInfo = useMemo(() => ({ entityName, fieldName }), [entityName, fieldName]);
+  return /* @__PURE__ */ jsx(
+    FormFieldStateProvider,
+    {
+      errors: entityRelation.errors?.errors,
+      dirty: entityRelation.hasUnpersistedChanges,
+      required,
+      field: fieldInfo,
+      children
+    }
+  );
 };
 export {
   FormHasOneRelationScope

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

@@ -1 +1 @@
-{"version":3,"file":"FormHasOneRelationScope.js","sources":["../../../../../packages/react-form/src/components/FormHasOneRelationScope.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useId } from 'react'\nimport { FormErrorContext, FormFieldIdContext } from '../contexts'\nimport { SugaredRelativeSingleEntity, useEntity } from '@contember/react-binding'\n\nconst emptyArr: [] = []\n\nexport type FormHasOneRelationScopeProps = {\n\tfield: SugaredRelativeSingleEntity['field']\n\tchildren: React.ReactNode\n}\n\nexport const FormHasOneRelationScope = ({ field, children }: FormHasOneRelationScopeProps) => {\n\tconst id = useId()\n\tconst entityRelation = useEntity({ field })\n\tconst errors = entityRelation.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,0BAA0B,CAAC,EAAE,OAAO,eAA6C;AAC7F,QAAM,KAAK;AACX,QAAM,iBAAiB,UAAU,EAAE,MAAO,CAAA;AACpC,QAAA,SAAS,eAAe,QAAQ;AACtC,SACE,oBAAA,mBAAmB,UAAnB,EAA4B,OAAO,IACnC,UAAA,oBAAC,iBAAiB,UAAjB,EAA0B,OAAO,UAAU,UAC1C,UACF,EACD,CAAA;AAEF;"}
+{"version":3,"file":"FormHasOneRelationScope.js","sources":["../../../../../packages/react-form/src/components/FormHasOneRelationScope.tsx"],"sourcesContent":["import * as React from 'react'\nimport { HasOneRelationMarker, SugaredRelativeSingleEntity, useEntity } from '@contember/react-binding'\nimport { FormFieldStateProvider } from './FormFieldStateProvider'\nimport { useMemo } from 'react'\n\nexport type FormHasOneRelationScopeProps = {\n\tfield: SugaredRelativeSingleEntity['field']\n\tchildren: React.ReactNode\n\trequired?: boolean\n}\n\nexport const FormHasOneRelationScope = ({ field, children, required }: FormHasOneRelationScopeProps) => {\n\tconst entityRelation = useEntity({ field })\n\tconst marker = entityRelation.getMarker() as HasOneRelationMarker\n\tconst fieldName = marker.parameters.field\n\tconst entityName = entityRelation.getParent()!.name\n\tconst fieldInfo = useMemo(() => ({ entityName, fieldName }), [entityName, fieldName])\n\treturn (\n\t\t<FormFieldStateProvider\n\t\t\terrors={entityRelation.errors?.errors}\n\t\t\tdirty={entityRelation.hasUnpersistedChanges}\n\t\t\trequired={required}\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,0BAA0B,CAAC,EAAE,OAAO,UAAU,eAA6C;AACvG,QAAM,iBAAiB,UAAU,EAAE,OAAO;AACpC,QAAA,SAAS,eAAe,UAAU;AAClC,QAAA,YAAY,OAAO,WAAW;AAC9B,QAAA,aAAa,eAAe,UAAA,EAAa;AACzC,QAAA,YAAY,QAAQ,OAAO,EAAE,YAAY,cAAc,CAAC,YAAY,SAAS,CAAC;AAEnF,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,QAAQ,eAAe,QAAQ;AAAA,MAC/B,OAAO,eAAe;AAAA,MACtB;AAAA,MACA,OAAO;AAAA,MAEN;AAAA,IAAA;AAAA,EACF;AAEF;"}

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

@@ -10,9 +10,12 @@ const contexts = require("../contexts.cjs");
 const useFormInputValidationHandler = require("../hooks/useFormInputValidationHandler.cjs");
 const SlotInput = reactSlot.Slot;
 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 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 required = formState?.required ?? !accessor.schema.nullable;
   const { parseValue, formatValue, defaultInputProps } = useFormInputHandler.useFormInputHandler(accessor, { formatValue: formatValueIn, parseValue: parseValueIn });
   const accessorGetter = accessor.getAccessor;
   const { ref, onFocus, onBlur } = useFormInputValidationHandler.useFormInputValidationHandler(accessor);
@@ -21,7 +24,9 @@ const FormInput = reactBinding.Component(({ field, isNonbearing, defaultValue, f
     {
       ref,
       value: formatValue(accessor.value),
-      "data-invalid": utilities.dataAttribute(errors.length > 0),
+      "data-invalid": utilities.dataAttribute(hasErrors),
+      "data-dirty": utilities.dataAttribute(dirty),
+      "data-required": utilities.dataAttribute(required),
       onFocus,
       onBlur,
       onChange: React.useCallback((e) => {
@@ -29,7 +34,7 @@ const FormInput = reactBinding.Component(({ field, isNonbearing, defaultValue, f
       }, [accessorGetter, parseValue]),
       ...defaultInputProps,
       id: id ? `${id}-input` : void 0,
-      required: !accessor.schema.nullable,
+      required,
       ...props
     }
   );

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

@@ -1 +1 @@
-{"version":3,"file":"FormInput.cjs","sources":["../../../../../packages/react-form/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","jsx","dataAttribute","useCallback","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,2BAAA;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,EAAA;AAGP,GAAG,CAAC,EAAE,OAAO,cAAc,mBAAmB;AAC7C,SAAQF,2BAAAA,IAAAG,aAAAA,OAAA,EAAM,OAAc,cAA4B,aAA4B,CAAA;AACrF,CAAC;;"}
+{"version":3,"file":"FormInput.cjs","sources":["../../../../../packages/react-form/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 { useFormFieldState } 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 accessor = useField(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 required = formState?.required ?? !accessor.schema.nullable\n\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(hasErrors)}\n\t\t\tdata-dirty={dataAttribute(dirty)}\n\t\t\tdata-required={dataAttribute(required)}\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={required}\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","useField","useFormFieldState","useFormInputHandler","useFormInputValidationHandler","jsx","dataAttribute","useCallback","Field"],"mappings":";;;;;;;;;;AAWA,MAAM,YAAYA,UAAA;AAWX,MAAM,YAAYC,aAAA,UAA0B,CAAC,EAAE,OAAO,cAAc,cAAc,aAAa,eAAe,YAAY,cAAc,GAAG,YAAY;AACvJ,QAAA,WAAWC,sBAAS,KAAK;AAE/B,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,WAAW,WAAW,YAAY,CAAC,SAAS,OAAO;AAEzD,QAAM,EAAE,YAAY,aAAa,kBAAsB,IAAAC,oBAAA,oBAAoB,UAAU,EAAE,aAAa,eAAe,YAAY,aAAA,CAAc;AAC7I,QAAM,iBAAiB,SAAS;AAChC,QAAM,EAAE,KAAK,SAAS,OAAO,IAAIC,8BAAAA,8BAA8B,QAAQ;AAGtE,SAAAC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACA;AAAA,MACA,OAAO,YAAY,SAAS,KAAK;AAAA,MACjC,gBAAcC,wBAAc,SAAS;AAAA,MACrC,cAAYA,wBAAc,KAAK;AAAA,MAC/B,iBAAeA,wBAAc,QAAQ;AAAA,MACrC;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;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EACL;AAEF,GAAG,CAAC,EAAE,OAAO,cAAc,mBAAmB;AAC7C,SAAQF,2BAAAA,IAAAG,aAAAA,OAAA,EAAM,OAAc,cAA4B,aAA4B,CAAA;AACrF,CAAC;;"}

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

@@ -4,13 +4,16 @@ import { Slot } from "@radix-ui/react-slot";
 import { Component, useField, Field } from "@contember/react-binding";
 import { dataAttribute } from "@contember/utilities";
 import { useFormInputHandler } from "../internal/useFormInputHandler.js";
-import { useFormFieldId, useFormError } from "../contexts.js";
+import { useFormFieldState } from "../contexts.js";
 import { useFormInputValidationHandler } from "../hooks/useFormInputValidationHandler.js";
 const SlotInput = Slot;
 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 formState = useFormFieldState();
+  const id = formState?.htmlId;
+  const hasErrors = (formState?.errors.length ?? accessor.errors?.errors?.length ?? 0) > 0;
+  const dirty = formState?.dirty ?? accessor.hasUnpersistedChanges;
+  const required = formState?.required ?? !accessor.schema.nullable;
   const { parseValue, formatValue, defaultInputProps } = useFormInputHandler(accessor, { formatValue: formatValueIn, parseValue: parseValueIn });
   const accessorGetter = accessor.getAccessor;
   const { ref, onFocus, onBlur } = useFormInputValidationHandler(accessor);
@@ -19,7 +22,9 @@ const FormInput = Component(({ field, isNonbearing, defaultValue, formatValue: f
     {
       ref,
       value: formatValue(accessor.value),
-      "data-invalid": dataAttribute(errors.length > 0),
+      "data-invalid": dataAttribute(hasErrors),
+      "data-dirty": dataAttribute(dirty),
+      "data-required": dataAttribute(required),
       onFocus,
       onBlur,
       onChange: useCallback((e) => {
@@ -27,7 +32,7 @@ const FormInput = Component(({ field, isNonbearing, defaultValue, formatValue: f
       }, [accessorGetter, parseValue]),
       ...defaultInputProps,
       id: id ? `${id}-input` : void 0,
-      required: !accessor.schema.nullable,
+      required,
       ...props
     }
   );

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

@@ -1 +1 @@
-{"version":3,"file":"FormInput.js","sources":["../../../../../packages/react-form/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":[],"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,EAAA;AAGP,GAAG,CAAC,EAAE,OAAO,cAAc,mBAAmB;AAC7C,SAAQ,oBAAA,OAAA,EAAM,OAAc,cAA4B,aAA4B,CAAA;AACrF,CAAC;"}
+{"version":3,"file":"FormInput.js","sources":["../../../../../packages/react-form/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 { useFormFieldState } 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 accessor = useField(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 required = formState?.required ?? !accessor.schema.nullable\n\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(hasErrors)}\n\t\t\tdata-dirty={dataAttribute(dirty)}\n\t\t\tdata-required={dataAttribute(required)}\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={required}\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":[],"mappings":";;;;;;;;AAWA,MAAM,YAAY;AAWX,MAAM,YAAY,UAA0B,CAAC,EAAE,OAAO,cAAc,cAAc,aAAa,eAAe,YAAY,cAAc,GAAG,YAAY;AACvJ,QAAA,WAAW,SAAS,KAAK;AAE/B,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,WAAW,WAAW,YAAY,CAAC,SAAS,OAAO;AAEzD,QAAM,EAAE,YAAY,aAAa,kBAAsB,IAAA,oBAAoB,UAAU,EAAE,aAAa,eAAe,YAAY,aAAA,CAAc;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,SAAS;AAAA,MACrC,cAAY,cAAc,KAAK;AAAA,MAC/B,iBAAe,cAAc,QAAQ;AAAA,MACrC;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;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EACL;AAEF,GAAG,CAAC,EAAE,OAAO,cAAc,mBAAmB;AAC7C,SAAQ,oBAAA,OAAA,EAAM,OAAc,cAA4B,aAA4B,CAAA;AACrF,CAAC;"}

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

@@ -6,16 +6,18 @@ const utilities = require("@contember/utilities");
 const contexts = require("../contexts.cjs");
 const reactBinding = require("@contember/react-binding");
 const FormLabel = (props) => {
-  const id = contexts.useFormFieldId();
-  const errors = contexts.useFormError();
-  if (errors === void 0 || id === void 0) {
-    throw new reactBinding.BindingError("FormLabel must be used inside a FormField");
+  const formState = contexts.useFormFieldState();
+  if (!formState) {
+    throw new reactBinding.BindingError("FormError must be used inside a FormField");
   }
+  const { errors, htmlId, dirty, required } = formState;
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactSlot.Slot,
     {
       "data-invalid": utilities.dataAttribute(errors.length > 0),
-      ...{ htmlFor: `${id}-input` },
+      "data-dirty": utilities.dataAttribute(dirty),
+      "data-required": utilities.dataAttribute(required),
+      ...htmlId ? { htmlFor: `${htmlId}-input` } : {},
       ...props
     }
   );

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

@@ -1 +1 @@
-{"version":3,"file":"FormLabel.cjs","sources":["../../../../../packages/react-form/src/components/FormLabel.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { dataAttribute } from '@contember/utilities'\nimport { useFormError, useFormFieldId } from '../contexts'\nimport { BindingError } from '@contember/react-binding'\n\nexport const FormLabel = (props: {\n\tchildren: React.ReactElement\n}) => {\n\tconst id = useFormFieldId()\n\tconst errors = useFormError()\n\tif (errors === undefined || id === undefined) {\n\t\tthrow new BindingError('FormLabel must be used inside a FormField')\n\t}\n\treturn (\n\t\t<Slot\n\t\t\tdata-invalid={dataAttribute(errors.length > 0)}\n\t\t\t{...{ htmlFor: `${id}-input` }}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n"],"names":["useFormFieldId","useFormError","BindingError","jsx","Slot","dataAttribute"],"mappings":";;;;;;;AAMa,MAAA,YAAY,CAAC,UAEpB;AACL,QAAM,KAAKA,SAAAA;AACX,QAAM,SAASC,SAAAA;AACX,MAAA,WAAW,UAAa,OAAO,QAAW;AACvC,UAAA,IAAIC,aAAAA,aAAa,2CAA2C;AAAA,EACnE;AAEC,SAAAC,2BAAA;AAAA,IAACC,UAAA;AAAA,IAAA;AAAA,MACA,gBAAcC,UAAA,cAAc,OAAO,SAAS,CAAC;AAAA,MAC5C,GAAG,EAAE,SAAS,GAAG,EAAE,SAAS;AAAA,MAC5B,GAAG;AAAA,IAAA;AAAA,EAAA;AAGP;;"}
+{"version":3,"file":"FormLabel.cjs","sources":["../../../../../packages/react-form/src/components/FormLabel.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { dataAttribute } from '@contember/utilities'\nimport { useFormFieldState } from '../contexts'\nimport { BindingError } from '@contember/react-binding'\n\nexport const FormLabel = (props: {\n\tchildren: React.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, dirty, required } = formState\n\treturn (\n\t\t<Slot\n\t\t\tdata-invalid={dataAttribute(errors.length > 0)}\n\t\t\tdata-dirty={dataAttribute(dirty)}\n\t\t\tdata-required={dataAttribute(required)}\n\t\t\t{...(htmlId ? { htmlFor: `${htmlId}-input` } : {})}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n"],"names":["useFormFieldState","BindingError","jsx","Slot","dataAttribute"],"mappings":";;;;;;;AAMa,MAAA,YAAY,CAAC,UAEpB;AACL,QAAM,YAAYA,SAAAA,kBAAkB;AACpC,MAAI,CAAC,WAAW;AACT,UAAA,IAAIC,0BAAa,2CAA2C;AAAA,EAAA;AAEnE,QAAM,EAAE,QAAQ,QAAQ,OAAO,SAAa,IAAA;AAE3C,SAAAC,2BAAA;AAAA,IAACC,UAAA;AAAA,IAAA;AAAA,MACA,gBAAcC,UAAA,cAAc,OAAO,SAAS,CAAC;AAAA,MAC7C,cAAYA,wBAAc,KAAK;AAAA,MAC/B,iBAAeA,wBAAc,QAAQ;AAAA,MACpC,GAAI,SAAS,EAAE,SAAS,GAAG,MAAM,SAAA,IAAa,CAAC;AAAA,MAC/C,GAAG;AAAA,IAAA;AAAA,EACL;AAEF;;"}

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

@@ -1,19 +1,21 @@
 import { jsx } from "react/jsx-runtime";
 import { Slot } from "@radix-ui/react-slot";
 import { dataAttribute } from "@contember/utilities";
-import { useFormFieldId, useFormError } from "../contexts.js";
+import { useFormFieldState } from "../contexts.js";
 import { BindingError } from "@contember/react-binding";
 const FormLabel = (props) => {
-  const id = useFormFieldId();
-  const errors = useFormError();
-  if (errors === void 0 || id === void 0) {
-    throw new BindingError("FormLabel must be used inside a FormField");
+  const formState = useFormFieldState();
+  if (!formState) {
+    throw new BindingError("FormError must be used inside a FormField");
   }
+  const { errors, htmlId, dirty, required } = formState;
   return /* @__PURE__ */ jsx(
     Slot,
     {
       "data-invalid": dataAttribute(errors.length > 0),
-      ...{ htmlFor: `${id}-input` },
+      "data-dirty": dataAttribute(dirty),
+      "data-required": dataAttribute(required),
+      ...htmlId ? { htmlFor: `${htmlId}-input` } : {},
       ...props
     }
   );

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

@@ -1 +1 @@
-{"version":3,"file":"FormLabel.js","sources":["../../../../../packages/react-form/src/components/FormLabel.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { dataAttribute } from '@contember/utilities'\nimport { useFormError, useFormFieldId } from '../contexts'\nimport { BindingError } from '@contember/react-binding'\n\nexport const FormLabel = (props: {\n\tchildren: React.ReactElement\n}) => {\n\tconst id = useFormFieldId()\n\tconst errors = useFormError()\n\tif (errors === undefined || id === undefined) {\n\t\tthrow new BindingError('FormLabel must be used inside a FormField')\n\t}\n\treturn (\n\t\t<Slot\n\t\t\tdata-invalid={dataAttribute(errors.length > 0)}\n\t\t\t{...{ htmlFor: `${id}-input` }}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n"],"names":[],"mappings":";;;;;AAMa,MAAA,YAAY,CAAC,UAEpB;AACL,QAAM,KAAK;AACX,QAAM,SAAS;AACX,MAAA,WAAW,UAAa,OAAO,QAAW;AACvC,UAAA,IAAI,aAAa,2CAA2C;AAAA,EACnE;AAEC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,gBAAc,cAAc,OAAO,SAAS,CAAC;AAAA,MAC5C,GAAG,EAAE,SAAS,GAAG,EAAE,SAAS;AAAA,MAC5B,GAAG;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"FormLabel.js","sources":["../../../../../packages/react-form/src/components/FormLabel.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { dataAttribute } from '@contember/utilities'\nimport { useFormFieldState } from '../contexts'\nimport { BindingError } from '@contember/react-binding'\n\nexport const FormLabel = (props: {\n\tchildren: React.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, dirty, required } = formState\n\treturn (\n\t\t<Slot\n\t\t\tdata-invalid={dataAttribute(errors.length > 0)}\n\t\t\tdata-dirty={dataAttribute(dirty)}\n\t\t\tdata-required={dataAttribute(required)}\n\t\t\t{...(htmlId ? { htmlFor: `${htmlId}-input` } : {})}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n"],"names":[],"mappings":";;;;;AAMa,MAAA,YAAY,CAAC,UAEpB;AACL,QAAM,YAAY,kBAAkB;AACpC,MAAI,CAAC,WAAW;AACT,UAAA,IAAI,aAAa,2CAA2C;AAAA,EAAA;AAEnE,QAAM,EAAE,QAAQ,QAAQ,OAAO,SAAa,IAAA;AAE3C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,gBAAc,cAAc,OAAO,SAAS,CAAC;AAAA,MAC7C,cAAY,cAAc,KAAK;AAAA,MAC/B,iBAAe,cAAc,QAAQ;AAAA,MACpC,GAAI,SAAS,EAAE,SAAS,GAAG,MAAM,SAAA,IAAa,CAAC;AAAA,MAC/C,GAAG;AAAA,IAAA;AAAA,EACL;AAEF;"}

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

@@ -2,33 +2,37 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const reactBinding = require("@contember/react-binding");
-const React = require("react");
+const utilities = require("@contember/utilities");
 const reactSlot = require("@radix-ui/react-slot");
+const React = require("react");
 const contexts = require("../contexts.cjs");
-const utilities = require("@contember/utilities");
 const useFormInputValidationHandler = require("../hooks/useFormInputValidationHandler.cjs");
 const SlotInput = reactSlot.Slot;
 const FormRadioInput = reactBinding.Component(({ field, value, defaultValue, isNonbearing, ...props }) => {
-  const id = contexts.useFormFieldId();
   const accessor = reactBinding.useField(field);
-  const errors = contexts.useFormError() ?? accessor.errors?.errors ?? [];
+  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 accessorGetter = accessor.getAccessor;
   const { ref, onFocus, onBlur } = useFormInputValidationHandler.useFormInputValidationHandler(accessor);
+  const handleChange = React.useCallback((e) => {
+    accessorGetter().updateValue(value);
+  }, [accessorGetter, value]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     SlotInput,
     {
       ref,
       type: "radio",
-      value,
+      value: typeof value === "string" ? value : void 0,
       checked: accessor.value === value,
-      "data-invalid": utilities.dataAttribute(errors.length > 0),
-      name: id + "-input",
-      id: `${id}-input-${value}`,
+      "data-invalid": utilities.dataAttribute(hasErrors),
+      "data-dirty": utilities.dataAttribute(dirty),
+      name: id ? id + "-input" : void 0,
+      id: id ? `${id}-input` : void 0,
       onFocus,
       onBlur,
-      onChange: React.useCallback((e) => {
-        accessorGetter().updateValue(value);
-      }, [accessorGetter, value]),
+      onChange: handleChange,
       ...props
     }
   );

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

@@ -1 +1 @@
-{"version":3,"file":"FormRadioInput.cjs","sources":["../../../../../packages/react-form/src/components/FormRadioInput.tsx"],"sourcesContent":["import { Component, Field, OptionallyVariableFieldValue, SugaredRelativeSingleField, useField } from '@contember/react-binding'\nimport * as React from 'react'\nimport { ChangeEventHandler, useCallback } from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { useFormError, useFormFieldId } from '../contexts'\nimport { useFormInputValidationHandler } from '../hooks'\nimport { dataAttribute } from '@contember/utilities'\n\nconst SlotInput = Slot as React.ForwardRefExoticComponent<React.RefAttributes<HTMLInputElement> & React.InputHTMLAttributes<HTMLInputElement>>\n\nexport interface FormRadioItemProps {\n\tfield: SugaredRelativeSingleField['field']\n\tvalue: string\n\tisNonbearing?: boolean\n\tdefaultValue?: OptionallyVariableFieldValue\n\tchildren: React.ReactNode\n}\n\nexport const FormRadioInput = Component<FormRadioItemProps>(({ field, value, defaultValue, isNonbearing, ...props }) => {\n\tconst id = useFormFieldId()\n\tconst accessor = useField<string>(field)\n\tconst errors = useFormError() ?? accessor.errors?.errors ?? []\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\ttype=\"radio\"\n\t\t\tvalue={value}\n\t\t\tchecked={accessor.value === value}\n\t\t\tdata-invalid={dataAttribute(errors.length > 0)}\n\t\t\tname={id + '-input'}\n\t\t\tid={`${id}-input-${value}`}\n\t\t\tonFocus={onFocus}\n\t\t\tonBlur={onBlur}\n\t\t\tonChange={useCallback<ChangeEventHandler<HTMLInputElement>>(e => {\n\t\t\t\taccessorGetter().updateValue(value)\n\t\t\t}, [accessorGetter, value])}\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","useFormInputValidationHandler","jsx","dataAttribute","useCallback","Field"],"mappings":";;;;;;;;;AAQA,MAAM,YAAYA,UAAAA;AAUL,MAAA,iBAAiBC,aAAAA,UAA8B,CAAC,EAAE,OAAO,OAAO,cAAc,cAAc,GAAG,YAAY;AACvH,QAAM,KAAKC,SAAAA;AACL,QAAA,WAAWC,sBAAiB,KAAK;AACvC,QAAM,SAASC,SAAAA,aAAa,KAAK,SAAS,QAAQ,UAAU;AAC5D,QAAM,iBAAiB,SAAS;AAChC,QAAM,EAAE,KAAK,SAAS,OAAO,IAAIC,8BAAAA,8BAA8B,QAAQ;AAGtE,SAAAC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACA;AAAA,MACA,MAAK;AAAA,MACL;AAAA,MACA,SAAS,SAAS,UAAU;AAAA,MAC5B,gBAAcC,UAAA,cAAc,OAAO,SAAS,CAAC;AAAA,MAC7C,MAAM,KAAK;AAAA,MACX,IAAI,GAAG,EAAE,UAAU,KAAK;AAAA,MACxB;AAAA,MACA;AAAA,MACA,UAAUC,MAAAA,YAAkD,CAAK,MAAA;AACjD,uBAAA,EAAE,YAAY,KAAK;AAAA,MAAA,GAChC,CAAC,gBAAgB,KAAK,CAAC;AAAA,MACzB,GAAG;AAAA,IAAA;AAAA,EAAA;AAGP,GAAG,CAAC,EAAE,OAAO,cAAc,mBAAmB;AAC7C,SAAQF,2BAAAA,IAAAG,aAAAA,OAAA,EAAM,OAAc,cAA4B,aAA4B,CAAA;AACrF,CAAC;;"}
+{"version":3,"file":"FormRadioInput.cjs","sources":["../../../../../packages/react-form/src/components/FormRadioInput.tsx"],"sourcesContent":["import { Component, Field, OptionallyVariableFieldValue, SugaredRelativeSingleField, useField } from '@contember/react-binding'\nimport { dataAttribute } from '@contember/utilities'\nimport { Slot } from '@radix-ui/react-slot'\nimport * as React from 'react'\nimport { ChangeEventHandler, useCallback } from 'react'\nimport { useFormFieldState } from '../contexts'\nimport { useFormInputValidationHandler } from '../hooks'\n\nconst SlotInput = Slot as React.ForwardRefExoticComponent<React.RefAttributes<HTMLInputElement> & React.InputHTMLAttributes<HTMLInputElement>>\n\nexport interface FormRadioItemProps {\n\tfield: SugaredRelativeSingleField['field']\n\tvalue: string | null | number | boolean\n\tisNonbearing?: boolean\n\tdefaultValue?: OptionallyVariableFieldValue\n\tchildren: React.ReactNode\n}\n\nexport const FormRadioInput = Component<FormRadioItemProps>(({ field, value, defaultValue, isNonbearing, ...props }) => {\n\tconst accessor = useField(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\n\tconst accessorGetter = accessor.getAccessor\n\tconst { ref, onFocus, onBlur } = useFormInputValidationHandler(accessor)\n\n\tconst handleChange = useCallback<ChangeEventHandler<HTMLInputElement>>(e => {\n\t\taccessorGetter().updateValue(value)\n\t}, [accessorGetter, value])\n\n\treturn (\n\t\t<SlotInput\n\t\t\tref={ref}\n\t\t\ttype=\"radio\"\n\t\t\tvalue={typeof value === 'string' ? value : undefined}\n\t\t\tchecked={accessor.value === value}\n\t\t\tdata-invalid={dataAttribute(hasErrors)}\n\t\t\tdata-dirty={dataAttribute(dirty)}\n\t\t\tname={id ? id + '-input' : undefined}\n\t\t\tid={id ? `${id}-input` : undefined}\n\t\t\tonFocus={onFocus}\n\t\t\tonBlur={onBlur}\n\t\t\tonChange={handleChange}\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","useField","useFormFieldState","useFormInputValidationHandler","useCallback","jsx","dataAttribute","Field"],"mappings":";;;;;;;;;AAQA,MAAM,YAAYA,UAAA;AAUL,MAAA,iBAAiBC,aAAAA,UAA8B,CAAC,EAAE,OAAO,OAAO,cAAc,cAAc,GAAG,YAAY;AACjH,QAAA,WAAWC,sBAAS,KAAK;AAE/B,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;AAE3C,QAAM,iBAAiB,SAAS;AAChC,QAAM,EAAE,KAAK,SAAS,OAAO,IAAIC,8BAAAA,8BAA8B,QAAQ;AAEjE,QAAA,eAAeC,kBAAkD,CAAK,MAAA;AAC5D,mBAAA,EAAE,YAAY,KAAK;AAAA,EAAA,GAChC,CAAC,gBAAgB,KAAK,CAAC;AAGzB,SAAAC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACA;AAAA,MACA,MAAK;AAAA,MACL,OAAO,OAAO,UAAU,WAAW,QAAQ;AAAA,MAC3C,SAAS,SAAS,UAAU;AAAA,MAC5B,gBAAcC,wBAAc,SAAS;AAAA,MACrC,cAAYA,wBAAc,KAAK;AAAA,MAC/B,MAAM,KAAK,KAAK,WAAW;AAAA,MAC3B,IAAI,KAAK,GAAG,EAAE,WAAW;AAAA,MACzB;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACT,GAAG;AAAA,IAAA;AAAA,EACL;AAEF,GAAG,CAAC,EAAE,OAAO,cAAc,mBAAmB;AAC7C,SAAQD,2BAAAA,IAAAE,aAAAA,OAAA,EAAM,OAAc,cAA4B,aAA2B,CAAA;AACpF,CAAC;;"}

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

@@ -1,32 +1,36 @@
 import { jsx } from "react/jsx-runtime";
 import { Component, useField, Field } from "@contember/react-binding";
-import { useCallback } from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { useFormFieldId, useFormError } from "../contexts.js";
 import { dataAttribute } from "@contember/utilities";
+import { Slot } from "@radix-ui/react-slot";
+import { useCallback } from "react";
+import { useFormFieldState } from "../contexts.js";
 import { useFormInputValidationHandler } from "../hooks/useFormInputValidationHandler.js";
 const SlotInput = Slot;
 const FormRadioInput = Component(({ field, value, defaultValue, isNonbearing, ...props }) => {
-  const id = useFormFieldId();
   const accessor = useField(field);
-  const errors = useFormError() ?? accessor.errors?.errors ?? [];
+  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 accessorGetter = accessor.getAccessor;
   const { ref, onFocus, onBlur } = useFormInputValidationHandler(accessor);
+  const handleChange = useCallback((e) => {
+    accessorGetter().updateValue(value);
+  }, [accessorGetter, value]);
   return /* @__PURE__ */ jsx(
     SlotInput,
     {
       ref,
       type: "radio",
-      value,
+      value: typeof value === "string" ? value : void 0,
       checked: accessor.value === value,
-      "data-invalid": dataAttribute(errors.length > 0),
-      name: id + "-input",
-      id: `${id}-input-${value}`,
+      "data-invalid": dataAttribute(hasErrors),
+      "data-dirty": dataAttribute(dirty),
+      name: id ? id + "-input" : void 0,
+      id: id ? `${id}-input` : void 0,
       onFocus,
       onBlur,
-      onChange: useCallback((e) => {
-        accessorGetter().updateValue(value);
-      }, [accessorGetter, value]),
+      onChange: handleChange,
       ...props
     }
   );