@contember/react-form 1.3.0-alpha.14

package/dist/development/contexts.js

@@ -0,0 +1,14 @@
+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];
+export {
+  FormErrorContext,
+  FormFieldIdContext,
+  useFormError,
+  useFormFieldId
+};
+//# sourceMappingURL=contexts.js.map

package/dist/development/contexts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"contexts.js","sources":["../../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;"}

package/dist/development/hooks/useFormInputValidationHandler.cjs

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const reactBinding = require("@contember/react-binding");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const useFormInputValidationHandler = (field) => {
+  const accessorGetter = field.getAccessor;
+  const validationMessage = React.useRef();
+  const [focus, setFocus] = React__namespace.useState(false);
+  const inputRef = React__namespace.useRef(null);
+  reactBinding.useEntityBeforePersist(React.useCallback(() => {
+    if (validationMessage.current) {
+      accessorGetter().addError(validationMessage.current);
+    }
+  }, [accessorGetter]));
+  React.useEffect(() => {
+    if (!inputRef.current) {
+      return;
+    }
+    const input = inputRef.current;
+    const valid = input.validity?.valid;
+    const message = valid ? void 0 : input?.validationMessage;
+    if (message !== validationMessage.current) {
+      validationMessage.current = message;
+      if (!message || !focus) {
+        accessorGetter().clearErrors();
+      }
+      if (!focus && message) {
+        accessorGetter().addError(message);
+      }
+    }
+  });
+  return {
+    ref: inputRef,
+    onFocus: React.useCallback(() => {
+      setFocus(true);
+    }, []),
+    onBlur: React.useCallback(() => {
+      setFocus(false);
+      accessorGetter().clearErrors();
+      if (validationMessage.current) {
+        accessorGetter().addError(validationMessage.current);
+      }
+    }, [accessorGetter])
+  };
+};
+exports.useFormInputValidationHandler = useFormInputValidationHandler;
+//# sourceMappingURL=useFormInputValidationHandler.cjs.map

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

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

package/dist/development/hooks/useFormInputValidationHandler.js

@@ -0,0 +1,48 @@
+import * as React from "react";
+import { useRef, useCallback, useEffect } from "react";
+import { useEntityBeforePersist } from "@contember/react-binding";
+const useFormInputValidationHandler = (field) => {
+  const accessorGetter = field.getAccessor;
+  const validationMessage = useRef();
+  const [focus, setFocus] = React.useState(false);
+  const inputRef = React.useRef(null);
+  useEntityBeforePersist(useCallback(() => {
+    if (validationMessage.current) {
+      accessorGetter().addError(validationMessage.current);
+    }
+  }, [accessorGetter]));
+  useEffect(() => {
+    if (!inputRef.current) {
+      return;
+    }
+    const input = inputRef.current;
+    const valid = input.validity?.valid;
+    const message = valid ? void 0 : input?.validationMessage;
+    if (message !== validationMessage.current) {
+      validationMessage.current = message;
+      if (!message || !focus) {
+        accessorGetter().clearErrors();
+      }
+      if (!focus && message) {
+        accessorGetter().addError(message);
+      }
+    }
+  });
+  return {
+    ref: inputRef,
+    onFocus: useCallback(() => {
+      setFocus(true);
+    }, []),
+    onBlur: useCallback(() => {
+      setFocus(false);
+      accessorGetter().clearErrors();
+      if (validationMessage.current) {
+        accessorGetter().addError(validationMessage.current);
+      }
+    }, [accessorGetter])
+  };
+};
+export {
+  useFormInputValidationHandler
+};
+//# sourceMappingURL=useFormInputValidationHandler.js.map

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

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

package/dist/development/index.cjs

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const contexts = require("./contexts.cjs");
+const FormError = require("./components/FormError.cjs");
+const FormCheckbox = require("./components/FormCheckbox.cjs");
+const FormFieldScope = require("./components/FormFieldScope.cjs");
+const FormHasOneRelationScope = require("./components/FormHasOneRelationScope.cjs");
+const FormHasManyRelationScope = require("./components/FormHasManyRelationScope.cjs");
+const FormInput = require("./components/FormInput.cjs");
+const FormLabel = require("./components/FormLabel.cjs");
+const FormRadioInput = require("./components/FormRadioInput.cjs");
+const useFormInputValidationHandler = require("./hooks/useFormInputValidationHandler.cjs");
+exports.FormErrorContext = contexts.FormErrorContext;
+exports.FormFieldIdContext = contexts.FormFieldIdContext;
+exports.useFormError = contexts.useFormError;
+exports.useFormFieldId = contexts.useFormFieldId;
+exports.FormError = FormError.FormError;
+exports.FormCheckbox = FormCheckbox.FormCheckbox;
+exports.FormFieldScope = FormFieldScope.FormFieldScope;
+exports.FormHasOneRelationScope = FormHasOneRelationScope.FormHasOneRelationScope;
+exports.FormHasManyRelationScope = FormHasManyRelationScope.FormHasManyRelationScope;
+exports.FormInput = FormInput.FormInput;
+exports.FormLabel = FormLabel.FormLabel;
+exports.FormRadioInput = FormRadioInput.FormRadioInput;
+exports.useFormInputValidationHandler = useFormInputValidationHandler.useFormInputValidationHandler;
+//# sourceMappingURL=index.cjs.map

package/dist/development/index.cjs.map

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

package/dist/development/index.js

@@ -0,0 +1,26 @@
+import { FormErrorContext, FormFieldIdContext, useFormError, useFormFieldId } from "./contexts.js";
+import { FormError } from "./components/FormError.js";
+import { FormCheckbox } from "./components/FormCheckbox.js";
+import { FormFieldScope } from "./components/FormFieldScope.js";
+import { FormHasOneRelationScope } from "./components/FormHasOneRelationScope.js";
+import { FormHasManyRelationScope } from "./components/FormHasManyRelationScope.js";
+import { FormInput } from "./components/FormInput.js";
+import { FormLabel } from "./components/FormLabel.js";
+import { FormRadioInput } from "./components/FormRadioInput.js";
+import { useFormInputValidationHandler } from "./hooks/useFormInputValidationHandler.js";
+export {
+  FormCheckbox,
+  FormError,
+  FormErrorContext,
+  FormFieldIdContext,
+  FormFieldScope,
+  FormHasManyRelationScope,
+  FormHasOneRelationScope,
+  FormInput,
+  FormLabel,
+  FormRadioInput,
+  useFormError,
+  useFormFieldId,
+  useFormInputValidationHandler
+};
+//# sourceMappingURL=index.js.map

package/dist/development/index.js.map

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

package/dist/development/internal/useFormInputHandler.cjs

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const useFormInputHandler = (field) => {
+  return React.useMemo(() => {
+    const schema = field.schema;
+    const columnType = schema.type;
+    const handlerFactory = ColumnTypeHandlerFactories[columnType];
+    if (!handlerFactory) {
+      throw new Error(`Column type ${columnType} is not supported yet`);
+    }
+    return handlerFactory(schema, field.getAccessor);
+  }, [field.getAccessor, field.schema]);
+};
+const ColumnTypeHandlerFactories = {
+  Integer: () => ({
+    parseValue: (value) => {
+      if (value === "") {
+        return null;
+      }
+      const parsed = parseInt(value, 10);
+      return isNaN(parsed) ? null : parsed;
+    },
+    formatValue: (value) => {
+      return value === null ? "" : value.toString(10);
+    },
+    defaultInputProps: {
+      type: "number"
+    }
+  }),
+  Double: () => ({
+    parseValue: (value) => {
+      if (value === "") {
+        return null;
+      }
+      const parsed = parseFloat(value);
+      return isNaN(parsed) ? null : parsed;
+    },
+    formatValue: (value) => {
+      return value === null ? "" : value.toString(10);
+    },
+    defaultInputProps: {
+      type: "number"
+    }
+  }),
+  String: (schema, field) => ({
+    parseValue: (value) => {
+      if (value === "" && schema.nullable && field().valueOnServer === null) {
+        return null;
+      }
+      return value;
+    },
+    formatValue: (value) => value ?? ""
+  }),
+  Date: () => ({
+    parseValue: (value) => {
+      if (value === "") {
+        return null;
+      }
+      const parsed = Date.parse(value);
+      return isNaN(parsed) ? null : new Date(parsed);
+    },
+    formatValue: (value) => {
+      const parsed = value ? Date.parse(value) : null;
+      return !parsed || isNaN(parsed) ? "" : new Date(parsed).toISOString().split("T")[0];
+    },
+    defaultInputProps: {
+      type: "date"
+    }
+  }),
+  DateTime: () => ({
+    parseValue: (value) => {
+      if (value === "") {
+        return null;
+      }
+      const parsed = Date.parse(value);
+      return isNaN(parsed) ? null : new Date(parsed);
+    },
+    formatValue: (value) => {
+      const parsed = value ? Date.parse(value) : null;
+      return !parsed || isNaN(parsed) ? "" : new Date(parsed).toISOString().substring(0, 16);
+    },
+    defaultInputProps: {
+      type: "datetime-local"
+    }
+  }),
+  Bool: () => {
+    throw new Error("Boolean column type is not supported yet");
+  },
+  Enum: () => {
+    throw new Error("Enum column type is not supported yet");
+  },
+  Uuid: () => {
+    throw new Error("UUID column type is not supported yet");
+  }
+};
+exports.useFormInputHandler = useFormInputHandler;
+//# sourceMappingURL=useFormInputHandler.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useFormInputHandler.cjs","sources":["../../../src/internal/useFormInputHandler.ts"],"sourcesContent":["import { FieldAccessor, SchemaColumn, SchemaKnownColumnType } from '@contember/react-binding'\nimport * as React from 'react'\nimport { useMemo } from 'react'\n\nexport const useFormInputHandler = (field: FieldAccessor) => {\n\treturn useMemo(() => {\n\t\tconst schema = field.schema\n\t\tconst columnType = schema.type\n\t\tconst handlerFactory = ColumnTypeHandlerFactories[columnType as SchemaKnownColumnType]\n\t\tif (!handlerFactory) {\n\t\t\tthrow new Error(`Column type ${columnType} is not supported yet`)\n\t\t}\n\t\treturn handlerFactory(schema, field.getAccessor)\n\t}, [field.getAccessor, field.schema])\n}\n\ntype ColumnTypeHandlerFactory = (column: SchemaColumn, getAccessor: FieldAccessor.GetFieldAccessor) => {\n\tparseValue: (value: string) => any\n\tformatValue: (value: any) => string\n\tdefaultInputProps?: React.InputHTMLAttributes<HTMLInputElement>\n}\n\nconst ColumnTypeHandlerFactories: Record<SchemaKnownColumnType, ColumnTypeHandlerFactory> = {\n\tInteger: () => ({\n\t\tparseValue: (value: string) => {\n\t\t\tif (value === '') {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tconst parsed = parseInt(value, 10)\n\t\t\treturn isNaN(parsed) ? null : parsed\n\t\t},\n\t\tformatValue: (value: number | null) => {\n\t\t\treturn value === null ? '' : value.toString(10)\n\t\t},\n\t\tdefaultInputProps: {\n\t\t\ttype: 'number',\n\t\t},\n\t}),\n\tDouble: () => ({\n\t\tparseValue: (value: string) => {\n\t\t\tif (value === '') {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tconst parsed = parseFloat(value)\n\t\t\treturn isNaN(parsed) ? null : parsed\n\t\t},\n\t\tformatValue: (value: number | null) => {\n\t\t\treturn value === null ? '' : value.toString(10)\n\t\t},\n\t\tdefaultInputProps: {\n\t\t\ttype: 'number',\n\t\t},\n\t}),\n\tString: (schema, field) => ({\n\t\tparseValue: (value: string) => {\n\t\t\tif (value === '' && schema.nullable && field().valueOnServer === null) {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\treturn value\n\t\t},\n\t\tformatValue: (value: string | null) => value ?? '',\n\t}),\n\tDate: () => ({\n\t\tparseValue: (value: string) => {\n\t\t\tif (value === '') {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tconst parsed = Date.parse(value)\n\t\t\treturn isNaN(parsed) ? null : new Date(parsed)\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\t\t\tconst parsed = Date.parse(value)\n\t\t\treturn isNaN(parsed) ? null : new Date(parsed)\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().substring(0, 16)\n\t\t},\n\t\tdefaultInputProps: {\n\t\t\ttype: 'datetime-local',\n\t\t},\n\t}),\n\tBool: () => {\n\t\tthrow new Error('Boolean column type is not supported yet')\n\t},\n\tEnum: () => {\n\t\tthrow new Error('Enum column type is not supported yet')\n\t},\n\tUuid: () => {\n\t\tthrow new Error('UUID column type is not supported yet')\n\t},\n}\n"],"names":["useMemo"],"mappings":"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"}

package/dist/development/internal/useFormInputHandler.js

@@ -0,0 +1,98 @@
+import { useMemo } from "react";
+const useFormInputHandler = (field) => {
+  return useMemo(() => {
+    const schema = field.schema;
+    const columnType = schema.type;
+    const handlerFactory = ColumnTypeHandlerFactories[columnType];
+    if (!handlerFactory) {
+      throw new Error(`Column type ${columnType} is not supported yet`);
+    }
+    return handlerFactory(schema, field.getAccessor);
+  }, [field.getAccessor, field.schema]);
+};
+const ColumnTypeHandlerFactories = {
+  Integer: () => ({
+    parseValue: (value) => {
+      if (value === "") {
+        return null;
+      }
+      const parsed = parseInt(value, 10);
+      return isNaN(parsed) ? null : parsed;
+    },
+    formatValue: (value) => {
+      return value === null ? "" : value.toString(10);
+    },
+    defaultInputProps: {
+      type: "number"
+    }
+  }),
+  Double: () => ({
+    parseValue: (value) => {
+      if (value === "") {
+        return null;
+      }
+      const parsed = parseFloat(value);
+      return isNaN(parsed) ? null : parsed;
+    },
+    formatValue: (value) => {
+      return value === null ? "" : value.toString(10);
+    },
+    defaultInputProps: {
+      type: "number"
+    }
+  }),
+  String: (schema, field) => ({
+    parseValue: (value) => {
+      if (value === "" && schema.nullable && field().valueOnServer === null) {
+        return null;
+      }
+      return value;
+    },
+    formatValue: (value) => value ?? ""
+  }),
+  Date: () => ({
+    parseValue: (value) => {
+      if (value === "") {
+        return null;
+      }
+      const parsed = Date.parse(value);
+      return isNaN(parsed) ? null : new Date(parsed);
+    },
+    formatValue: (value) => {
+      const parsed = value ? Date.parse(value) : null;
+      return !parsed || isNaN(parsed) ? "" : new Date(parsed).toISOString().split("T")[0];
+    },
+    defaultInputProps: {
+      type: "date"
+    }
+  }),
+  DateTime: () => ({
+    parseValue: (value) => {
+      if (value === "") {
+        return null;
+      }
+      const parsed = Date.parse(value);
+      return isNaN(parsed) ? null : new Date(parsed);
+    },
+    formatValue: (value) => {
+      const parsed = value ? Date.parse(value) : null;
+      return !parsed || isNaN(parsed) ? "" : new Date(parsed).toISOString().substring(0, 16);
+    },
+    defaultInputProps: {
+      type: "datetime-local"
+    }
+  }),
+  Bool: () => {
+    throw new Error("Boolean column type is not supported yet");
+  },
+  Enum: () => {
+    throw new Error("Enum column type is not supported yet");
+  },
+  Uuid: () => {
+    throw new Error("UUID column type is not supported yet");
+  }
+};
+export {
+  useFormInputHandler
+};
+//# sourceMappingURL=useFormInputHandler.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useFormInputHandler.js","sources":["../../../src/internal/useFormInputHandler.ts"],"sourcesContent":["import { FieldAccessor, SchemaColumn, SchemaKnownColumnType } from '@contember/react-binding'\nimport * as React from 'react'\nimport { useMemo } from 'react'\n\nexport const useFormInputHandler = (field: FieldAccessor) => {\n\treturn useMemo(() => {\n\t\tconst schema = field.schema\n\t\tconst columnType = schema.type\n\t\tconst handlerFactory = ColumnTypeHandlerFactories[columnType as SchemaKnownColumnType]\n\t\tif (!handlerFactory) {\n\t\t\tthrow new Error(`Column type ${columnType} is not supported yet`)\n\t\t}\n\t\treturn handlerFactory(schema, field.getAccessor)\n\t}, [field.getAccessor, field.schema])\n}\n\ntype ColumnTypeHandlerFactory = (column: SchemaColumn, getAccessor: FieldAccessor.GetFieldAccessor) => {\n\tparseValue: (value: string) => any\n\tformatValue: (value: any) => string\n\tdefaultInputProps?: React.InputHTMLAttributes<HTMLInputElement>\n}\n\nconst ColumnTypeHandlerFactories: Record<SchemaKnownColumnType, ColumnTypeHandlerFactory> = {\n\tInteger: () => ({\n\t\tparseValue: (value: string) => {\n\t\t\tif (value === '') {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tconst parsed = parseInt(value, 10)\n\t\t\treturn isNaN(parsed) ? null : parsed\n\t\t},\n\t\tformatValue: (value: number | null) => {\n\t\t\treturn value === null ? '' : value.toString(10)\n\t\t},\n\t\tdefaultInputProps: {\n\t\t\ttype: 'number',\n\t\t},\n\t}),\n\tDouble: () => ({\n\t\tparseValue: (value: string) => {\n\t\t\tif (value === '') {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tconst parsed = parseFloat(value)\n\t\t\treturn isNaN(parsed) ? null : parsed\n\t\t},\n\t\tformatValue: (value: number | null) => {\n\t\t\treturn value === null ? '' : value.toString(10)\n\t\t},\n\t\tdefaultInputProps: {\n\t\t\ttype: 'number',\n\t\t},\n\t}),\n\tString: (schema, field) => ({\n\t\tparseValue: (value: string) => {\n\t\t\tif (value === '' && schema.nullable && field().valueOnServer === null) {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\treturn value\n\t\t},\n\t\tformatValue: (value: string | null) => value ?? '',\n\t}),\n\tDate: () => ({\n\t\tparseValue: (value: string) => {\n\t\t\tif (value === '') {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tconst parsed = Date.parse(value)\n\t\t\treturn isNaN(parsed) ? null : new Date(parsed)\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\t\t\tconst parsed = Date.parse(value)\n\t\t\treturn isNaN(parsed) ? null : new Date(parsed)\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().substring(0, 16)\n\t\t},\n\t\tdefaultInputProps: {\n\t\t\ttype: 'datetime-local',\n\t\t},\n\t}),\n\tBool: () => {\n\t\tthrow new Error('Boolean column type is not supported yet')\n\t},\n\tEnum: () => {\n\t\tthrow new Error('Enum column type is not supported yet')\n\t},\n\tUuid: () => {\n\t\tthrow new Error('UUID column type is not supported yet')\n\t},\n}\n"],"names":[],"mappings":"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"}

package/dist/production/components/FormCheckbox.cjs

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const reactBinding = require("@contember/react-binding");
+const contexts = require("../contexts.cjs");
+const utilities = require("@contember/utilities");
+const reactSlot = require("@radix-ui/react-slot");
+const useFormInputValidationHandler = require("../hooks/useFormInputValidationHandler.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+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 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);
+  React.useEffect(() => {
+    if (!checkboxRef) {
+      return;
+    }
+    ref.current = checkboxRef;
+    if (value === null) {
+      checkboxRef.indeterminate = true;
+    }
+  }, [checkboxRef, ref, value]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SlotInput,
+    {
+      ref: setCheckboxRef,
+      type: "checkbox",
+      checked: accessor.value === true,
+      "data-state": value === null ? "indeterminate" : value ? "checked" : "unchecked",
+      "data-invalid": utilities.dataAttribute(errors.length > 0),
+      id: `${id}-input`,
+      onFocus,
+      onBlur,
+      onChange: React.useCallback((e) => {
+        accessorGetter().updateValue(e.target.checked);
+      }, [accessorGetter]),
+      ...props
+    }
+  );
+}, ({ field, isNonbearing, defaultValue }, env) => {
+  const node = reactBinding.TreeNodeEnvironmentFactory.createEnvironmentForField(env, { field }).getSubTreeNode();
+  const resolvedDefaultValue = defaultValue !== void 0 ? defaultValue : node.field.defaultValue ?? (node.field.nullable ? null : false);
+  return /* @__PURE__ */ jsxRuntime.jsx(reactBinding.Field, { field, isNonbearing, defaultValue: resolvedDefaultValue });
+});
+exports.FormCheckbox = FormCheckbox;
+//# sourceMappingURL=FormCheckbox.cjs.map

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

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

package/dist/production/components/FormCheckbox.js

@@ -0,0 +1,52 @@
+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 { 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 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);
+  useEffect(() => {
+    if (!checkboxRef) {
+      return;
+    }
+    ref.current = checkboxRef;
+    if (value === null) {
+      checkboxRef.indeterminate = true;
+    }
+  }, [checkboxRef, ref, value]);
+  return /* @__PURE__ */ jsx(
+    SlotInput,
+    {
+      ref: setCheckboxRef,
+      type: "checkbox",
+      checked: accessor.value === true,
+      "data-state": value === null ? "indeterminate" : value ? "checked" : "unchecked",
+      "data-invalid": dataAttribute(errors.length > 0),
+      id: `${id}-input`,
+      onFocus,
+      onBlur,
+      onChange: useCallback((e) => {
+        accessorGetter().updateValue(e.target.checked);
+      }, [accessorGetter]),
+      ...props
+    }
+  );
+}, ({ field, isNonbearing, defaultValue }, env) => {
+  const node = TreeNodeEnvironmentFactory.createEnvironmentForField(env, { field }).getSubTreeNode();
+  const resolvedDefaultValue = defaultValue !== void 0 ? defaultValue : node.field.defaultValue ?? (node.field.nullable ? null : false);
+  return /* @__PURE__ */ jsx(Field, { field, isNonbearing, defaultValue: resolvedDefaultValue });
+});
+export {
+  FormCheckbox
+};
+//# sourceMappingURL=FormCheckbox.js.map

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

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

package/dist/production/components/FormError.cjs

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+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) {
+    throw new reactBinding.BindingError("FormError must be used inside a FormField");
+  }
+  return formatted.map((it, index) => {
+    return React.cloneElement(children, {
+      key: index,
+      ...{ id: `${id}-error-${index}` },
+      children: it
+    });
+  });
+};
+exports.FormError = FormError;
+//# sourceMappingURL=FormError.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormError.cjs","sources":["../../../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;;"}

package/dist/production/components/FormError.js

@@ -0,0 +1,22 @@
+import { useMemo, cloneElement } from "react";
+import { useFormError, useFormFieldId } 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) {
+    throw new BindingError("FormError must be used inside a FormField");
+  }
+  return formatted.map((it, index) => {
+    return cloneElement(children, {
+      key: index,
+      ...{ id: `${id}-error-${index}` },
+      children: it
+    });
+  });
+};
+export {
+  FormError
+};
+//# sourceMappingURL=FormError.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormError.js","sources":["../../../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;"}