@contember/react-form 2.1.0-alpha.36 → 2.1.0-alpha.39

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (138) hide show
  1. package/dist/development/index.cjs +30 -0
  2. package/dist/development/index.cjs.map +1 -0
  3. package/dist/development/index.js +30 -0
  4. package/dist/development/index.js.map +1 -0
  5. package/dist/development/src/components/FormCheckbox.cjs +83 -0
  6. package/dist/development/src/components/FormCheckbox.cjs.map +1 -0
  7. package/dist/development/src/components/FormCheckbox.js +67 -0
  8. package/dist/development/src/components/FormCheckbox.js.map +1 -0
  9. package/dist/development/src/components/FormError.cjs +22 -0
  10. package/dist/development/src/components/FormError.cjs.map +1 -0
  11. package/dist/development/src/components/FormError.js +22 -0
  12. package/dist/development/src/components/FormError.js.map +1 -0
  13. package/dist/development/src/components/FormFieldScope.cjs +33 -0
  14. package/dist/development/src/components/FormFieldScope.cjs.map +1 -0
  15. package/dist/development/src/components/FormFieldScope.js +33 -0
  16. package/dist/development/src/components/FormFieldScope.js.map +1 -0
  17. package/dist/development/src/components/FormFieldStateProvider.cjs +56 -0
  18. package/dist/development/src/components/FormFieldStateProvider.cjs.map +1 -0
  19. package/dist/development/src/components/FormFieldStateProvider.js +56 -0
  20. package/dist/development/src/components/FormFieldStateProvider.js.map +1 -0
  21. package/dist/development/src/components/FormHasManyRelationScope.cjs +33 -0
  22. package/dist/development/src/components/FormHasManyRelationScope.cjs.map +1 -0
  23. package/dist/development/src/components/FormHasManyRelationScope.js +33 -0
  24. package/dist/development/src/components/FormHasManyRelationScope.js.map +1 -0
  25. package/dist/development/src/components/FormHasOneRelationScope.cjs +33 -0
  26. package/dist/development/src/components/FormHasOneRelationScope.cjs.map +1 -0
  27. package/dist/development/src/components/FormHasOneRelationScope.js +33 -0
  28. package/dist/development/src/components/FormHasOneRelationScope.js.map +1 -0
  29. package/dist/development/src/components/FormInput.cjs +62 -0
  30. package/dist/development/src/components/FormInput.cjs.map +1 -0
  31. package/dist/development/src/components/FormInput.js +62 -0
  32. package/dist/development/src/components/FormInput.js.map +1 -0
  33. package/dist/development/src/components/FormLabel.cjs +34 -0
  34. package/dist/development/src/components/FormLabel.cjs.map +1 -0
  35. package/dist/development/src/components/FormLabel.js +34 -0
  36. package/dist/development/src/components/FormLabel.js.map +1 -0
  37. package/dist/development/src/components/FormRadioInput.cjs +55 -0
  38. package/dist/development/src/components/FormRadioInput.cjs.map +1 -0
  39. package/dist/development/src/components/FormRadioInput.js +55 -0
  40. package/dist/development/src/components/FormRadioInput.js.map +1 -0
  41. package/dist/development/src/contexts.cjs +13 -0
  42. package/dist/development/src/contexts.cjs.map +1 -0
  43. package/dist/development/src/contexts.js +13 -0
  44. package/dist/development/src/contexts.js.map +1 -0
  45. package/dist/development/src/hooks/useFormInputValidationHandler.cjs +80 -0
  46. package/dist/development/src/hooks/useFormInputValidationHandler.cjs.map +1 -0
  47. package/dist/development/src/hooks/useFormInputValidationHandler.js +64 -0
  48. package/dist/development/src/hooks/useFormInputValidationHandler.js.map +1 -0
  49. package/dist/development/src/internal/useFormInputHandler.cjs +122 -0
  50. package/dist/development/src/internal/useFormInputHandler.cjs.map +1 -0
  51. package/dist/development/src/internal/useFormInputHandler.js +122 -0
  52. package/dist/development/src/internal/useFormInputHandler.js.map +1 -0
  53. package/dist/production/index.cjs +30 -0
  54. package/dist/production/index.cjs.map +1 -0
  55. package/dist/production/index.js +30 -0
  56. package/dist/production/index.js.map +1 -0
  57. package/dist/production/src/components/FormCheckbox.cjs +71 -0
  58. package/dist/production/src/components/FormCheckbox.cjs.map +1 -0
  59. package/dist/production/src/components/FormCheckbox.js +55 -0
  60. package/dist/production/src/components/FormCheckbox.js.map +1 -0
  61. package/dist/production/src/components/FormError.cjs +22 -0
  62. package/dist/production/src/components/FormError.cjs.map +1 -0
  63. package/dist/production/src/components/FormError.js +22 -0
  64. package/dist/production/src/components/FormError.js.map +1 -0
  65. package/dist/production/src/components/FormFieldScope.cjs +25 -0
  66. package/dist/production/src/components/FormFieldScope.cjs.map +1 -0
  67. package/dist/production/src/components/FormFieldScope.js +25 -0
  68. package/dist/production/src/components/FormFieldScope.js.map +1 -0
  69. package/dist/production/src/components/FormFieldStateProvider.cjs +34 -0
  70. package/dist/production/src/components/FormFieldStateProvider.cjs.map +1 -0
  71. package/dist/production/src/components/FormFieldStateProvider.js +34 -0
  72. package/dist/production/src/components/FormFieldStateProvider.js.map +1 -0
  73. package/dist/production/src/components/FormHasManyRelationScope.cjs +25 -0
  74. package/dist/production/src/components/FormHasManyRelationScope.cjs.map +1 -0
  75. package/dist/production/src/components/FormHasManyRelationScope.js +25 -0
  76. package/dist/production/src/components/FormHasManyRelationScope.js.map +1 -0
  77. package/dist/production/src/components/FormHasOneRelationScope.cjs +25 -0
  78. package/dist/production/src/components/FormHasOneRelationScope.cjs.map +1 -0
  79. package/dist/production/src/components/FormHasOneRelationScope.js +25 -0
  80. package/dist/production/src/components/FormHasOneRelationScope.js.map +1 -0
  81. package/dist/production/src/components/FormInput.cjs +50 -0
  82. package/dist/production/src/components/FormInput.cjs.map +1 -0
  83. package/dist/production/src/components/FormInput.js +50 -0
  84. package/dist/production/src/components/FormInput.js.map +1 -0
  85. package/dist/production/src/components/FormLabel.cjs +26 -0
  86. package/dist/production/src/components/FormLabel.cjs.map +1 -0
  87. package/dist/production/src/components/FormLabel.js +26 -0
  88. package/dist/production/src/components/FormLabel.js.map +1 -0
  89. package/dist/production/src/components/FormRadioInput.cjs +43 -0
  90. package/dist/production/src/components/FormRadioInput.cjs.map +1 -0
  91. package/dist/production/src/components/FormRadioInput.js +43 -0
  92. package/dist/production/src/components/FormRadioInput.js.map +1 -0
  93. package/dist/production/src/contexts.cjs +13 -0
  94. package/dist/production/src/contexts.cjs.map +1 -0
  95. package/dist/production/src/contexts.js +13 -0
  96. package/dist/production/src/contexts.js.map +1 -0
  97. package/dist/production/src/hooks/useFormInputValidationHandler.cjs +80 -0
  98. package/dist/production/src/hooks/useFormInputValidationHandler.cjs.map +1 -0
  99. package/dist/production/src/hooks/useFormInputValidationHandler.js +64 -0
  100. package/dist/production/src/hooks/useFormInputValidationHandler.js.map +1 -0
  101. package/dist/production/src/internal/useFormInputHandler.cjs +122 -0
  102. package/dist/production/src/internal/useFormInputHandler.cjs.map +1 -0
  103. package/dist/production/src/internal/useFormInputHandler.js +122 -0
  104. package/dist/production/src/internal/useFormInputHandler.js.map +1 -0
  105. package/dist/types/components/FormCheckbox.d.ts +11 -0
  106. package/dist/types/components/FormCheckbox.d.ts.map +1 -0
  107. package/dist/types/components/FormError.d.ts +7 -0
  108. package/dist/types/components/FormError.d.ts.map +1 -0
  109. package/dist/types/components/FormFieldScope.d.ts +9 -0
  110. package/dist/types/components/FormFieldScope.d.ts.map +1 -0
  111. package/dist/types/components/FormFieldStateProvider.d.ts +36 -0
  112. package/dist/types/components/FormFieldStateProvider.d.ts.map +1 -0
  113. package/dist/types/components/FormHasManyRelationScope.d.ts +12 -0
  114. package/dist/types/components/FormHasManyRelationScope.d.ts.map +1 -0
  115. package/dist/types/components/FormHasOneRelationScope.d.ts +9 -0
  116. package/dist/types/components/FormHasOneRelationScope.d.ts.map +1 -0
  117. package/dist/types/components/FormInput.d.ts +13 -0
  118. package/dist/types/components/FormInput.d.ts.map +1 -0
  119. package/dist/types/components/FormLabel.d.ts +5 -0
  120. package/dist/types/components/FormLabel.d.ts.map +1 -0
  121. package/dist/types/components/FormRadioInput.d.ts +11 -0
  122. package/dist/types/components/FormRadioInput.d.ts.map +1 -0
  123. package/dist/types/components/index.d.ts +10 -0
  124. package/dist/types/components/index.d.ts.map +1 -0
  125. package/dist/types/contexts.d.ts +12 -0
  126. package/dist/types/contexts.d.ts.map +1 -0
  127. package/dist/types/hooks/index.d.ts +2 -0
  128. package/dist/types/hooks/index.d.ts.map +1 -0
  129. package/dist/types/hooks/useFormInputValidationHandler.d.ts +8 -0
  130. package/dist/types/hooks/useFormInputValidationHandler.d.ts.map +1 -0
  131. package/dist/types/index.d.ts +5 -0
  132. package/dist/types/index.d.ts.map +1 -0
  133. package/dist/types/internal/useFormInputHandler.d.ts +4 -0
  134. package/dist/types/internal/useFormInputHandler.d.ts.map +1 -0
  135. package/dist/types/tsconfig.tsbuildinfo +1 -0
  136. package/dist/types/types/index.d.ts +23 -0
  137. package/dist/types/types/index.d.ts.map +1 -0
  138. package/package.json +9 -9
@@ -0,0 +1 @@
1
+ {"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","jsxDEV","FormFieldStateProvider","this"],"mappings":";;;;;;AAWO,MAAM,0BAA0B,CAAC,EAAE,OAAO,UAAU,eAA6C;AACvG,QAAM,iBAAiBA,aAAAA,UAAU,EAAE,OAAO;AAC1C,QAAM,SAAS,eAAe,UAAA;AAC9B,QAAM,YAAY,OAAO,WAAW;AACpC,QAAM,aAAa,eAAe,UAAA,EAAa;AAC/C,QAAM,YAAYC,cAAQ,OAAO,EAAE,YAAY,cAAc,CAAC,YAAY,SAAS,CAAC;AACpF,SACCC,8BAAAA;AAAAA,IAACC,uBAAAA;AAAAA,IAAA;AAAA,MACA,QAAQ,eAAe,QAAQ;AAAA,MAC/B,OAAO,eAAe;AAAA,MACtB;AAAA,MACA,OAAO;AAAA,MAEN;AAAA,IAAA;AAAA,IANF;AAAA,IAAA;AAAA,IAAA;AAAA,MAAA,UAAA;AAAA,MAAA,YAAA;AAAA,MAAA,cAAA;AAAA,IAAA;AAAA,IAAAC;AAAAA,EAAA;AASF;;"}
@@ -0,0 +1,33 @@
1
+ import { jsxDEV } from "react/jsx-dev-runtime";
2
+ import { useEntity } from "@contember/react-binding";
3
+ import { FormFieldStateProvider } from "./FormFieldStateProvider.js";
4
+ import { useMemo } from "react";
5
+ const FormHasOneRelationScope = ({ field, children, required }) => {
6
+ const entityRelation = useEntity({ field });
7
+ const marker = entityRelation.getMarker();
8
+ const fieldName = marker.parameters.field;
9
+ const entityName = entityRelation.getParent().name;
10
+ const fieldInfo = useMemo(() => ({ entityName, fieldName }), [entityName, fieldName]);
11
+ return /* @__PURE__ */ jsxDEV(
12
+ FormFieldStateProvider,
13
+ {
14
+ errors: entityRelation.errors?.errors,
15
+ dirty: entityRelation.hasUnpersistedChanges,
16
+ required,
17
+ field: fieldInfo,
18
+ children
19
+ },
20
+ void 0,
21
+ false,
22
+ {
23
+ fileName: "/home/runner/work/contember/contember/packages/react-form/src/components/FormHasOneRelationScope.tsx",
24
+ lineNumber: 19,
25
+ columnNumber: 3
26
+ },
27
+ void 0
28
+ );
29
+ };
30
+ export {
31
+ FormHasOneRelationScope
32
+ };
33
+ //# sourceMappingURL=FormHasOneRelationScope.js.map
@@ -0,0 +1 @@
1
+ {"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":["this"],"mappings":";;;;AAWO,MAAM,0BAA0B,CAAC,EAAE,OAAO,UAAU,eAA6C;AACvG,QAAM,iBAAiB,UAAU,EAAE,OAAO;AAC1C,QAAM,SAAS,eAAe,UAAA;AAC9B,QAAM,YAAY,OAAO,WAAW;AACpC,QAAM,aAAa,eAAe,UAAA,EAAa;AAC/C,QAAM,YAAY,QAAQ,OAAO,EAAE,YAAY,cAAc,CAAC,YAAY,SAAS,CAAC;AACpF,SACC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,QAAQ,eAAe,QAAQ;AAAA,MAC/B,OAAO,eAAe;AAAA,MACtB;AAAA,MACA,OAAO;AAAA,MAEN;AAAA,IAAA;AAAA,IANF;AAAA,IAAA;AAAA,IAAA;AAAA,MAAA,UAAA;AAAA,MAAA,YAAA;AAAA,MAAA,cAAA;AAAA,IAAA;AAAA,IAAAA;AAAAA,EAAA;AASF;"}
@@ -0,0 +1,62 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const jsxDevRuntime = require("react/jsx-dev-runtime");
4
+ const React = require("react");
5
+ const reactSlot = require("@radix-ui/react-slot");
6
+ const reactBinding = require("@contember/react-binding");
7
+ const utilities = require("@contember/utilities");
8
+ const useFormInputHandler = require("../internal/useFormInputHandler.cjs");
9
+ const contexts = require("../contexts.cjs");
10
+ const useFormInputValidationHandler = require("../hooks/useFormInputValidationHandler.cjs");
11
+ const reactUtils = require("@contember/react-utils");
12
+ const SlotInput = reactSlot.Slot;
13
+ const FormInput = reactBinding.Component(
14
+ ({ field, isNonbearing, defaultValue, formatValue: formatValueIn, parseValue: parseValueIn, ...props }) => {
15
+ const accessor = reactBinding.useField(field);
16
+ const formState = contexts.useFormFieldState();
17
+ const id = formState?.htmlId;
18
+ const hasErrors = (formState?.errors.length ?? accessor.errors?.errors?.length ?? 0) > 0;
19
+ const dirty = formState?.dirty ?? accessor.hasUnpersistedChanges;
20
+ const required = formState?.required ?? !accessor.schema.nullable;
21
+ const [state, setState] = React.useState(void 0);
22
+ const { parseValue, formatValue, defaultInputProps } = useFormInputHandler.useFormInputHandler(accessor, { formatValue: formatValueIn, parseValue: parseValueIn });
23
+ const accessorGetter = accessor.getAccessor;
24
+ const { ref, onFocus, onBlur } = useFormInputValidationHandler.useFormInputValidationHandler(accessor);
25
+ return /* @__PURE__ */ jsxDevRuntime.jsxDEV(
26
+ SlotInput,
27
+ {
28
+ ref,
29
+ value: formatValue(accessor.value, { state, setState }),
30
+ "data-invalid": utilities.dataAttribute(hasErrors),
31
+ "data-dirty": utilities.dataAttribute(dirty),
32
+ "data-required": utilities.dataAttribute(required),
33
+ onFocus,
34
+ onBlur,
35
+ onChange: reactUtils.useReferentiallyStableCallback((e) => {
36
+ accessorGetter().updateValue(parseValue(e.target.value, { state, setState }));
37
+ }),
38
+ ...defaultInputProps,
39
+ id: id ? `${id}-input` : void 0,
40
+ required,
41
+ ...props
42
+ },
43
+ void 0,
44
+ false,
45
+ {
46
+ fileName: "/home/runner/work/contember/contember/packages/react-form/src/components/FormInput.tsx",
47
+ lineNumber: 41,
48
+ columnNumber: 4
49
+ },
50
+ void 0
51
+ );
52
+ },
53
+ ({ field, isNonbearing, defaultValue }) => {
54
+ return /* @__PURE__ */ jsxDevRuntime.jsxDEV(reactBinding.Field, { field, isNonbearing, defaultValue }, void 0, false, {
55
+ fileName: "/home/runner/work/contember/contember/packages/react-form/src/components/FormInput.tsx",
56
+ lineNumber: 60,
57
+ columnNumber: 10
58
+ }, void 0);
59
+ }
60
+ );
61
+ exports.FormInput = FormInput;
62
+ //# sourceMappingURL=FormInput.cjs.map
@@ -0,0 +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, useState } 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'\nimport { useReferentiallyStableCallback } from '@contember/react-utils'\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>(\n\t({ field, isNonbearing, defaultValue, formatValue: formatValueIn, parseValue: parseValueIn, ...props }) => {\n\t\tconst accessor = useField(field)\n\n\t\tconst formState = useFormFieldState()\n\t\tconst id = formState?.htmlId\n\t\tconst hasErrors = (formState?.errors.length ?? accessor.errors?.errors?.length ?? 0) > 0\n\t\tconst dirty = formState?.dirty ?? accessor.hasUnpersistedChanges\n\t\tconst required = formState?.required ?? !accessor.schema.nullable\n\n\t\tconst [state, setState] = useState<any>(undefined)\n\n\t\tconst { parseValue, formatValue, defaultInputProps } = useFormInputHandler(accessor, { formatValue: formatValueIn, parseValue: parseValueIn })\n\t\tconst accessorGetter = accessor.getAccessor\n\t\tconst { ref, onFocus, onBlur } = useFormInputValidationHandler(accessor)\n\n\t\treturn (\n\t\t\t<SlotInput\n\t\t\t\tref={ref}\n\t\t\t\tvalue={formatValue(accessor.value, { state, setState })}\n\t\t\t\tdata-invalid={dataAttribute(hasErrors)}\n\t\t\t\tdata-dirty={dataAttribute(dirty)}\n\t\t\t\tdata-required={dataAttribute(required)}\n\t\t\t\tonFocus={onFocus}\n\t\t\t\tonBlur={onBlur}\n\t\t\t\tonChange={useReferentiallyStableCallback<ChangeEventHandler<HTMLInputElement>>(e => {\n\t\t\t\t\taccessorGetter().updateValue(parseValue(e.target.value, { state, setState }))\n\t\t\t\t})}\n\t\t\t\t{...defaultInputProps}\n\t\t\t\tid={id ? `${id}-input` : undefined}\n\t\t\t\trequired={required}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t)\n\t},\n\t({ field, isNonbearing, defaultValue }) => {\n\t\treturn <Field field={field} isNonbearing={isNonbearing} defaultValue={defaultValue} />\n\t},\n)\n"],"names":["Slot","Component","useField","useFormFieldState","useState","useFormInputHandler","useFormInputValidationHandler","jsxDEV","dataAttribute","useReferentiallyStableCallback","this","Field"],"mappings":";;;;;;;;;;;AAYA,MAAM,YAAYA,UAAAA;AAWX,MAAM,YAAYC,aAAAA;AAAAA,EACxB,CAAC,EAAE,OAAO,cAAc,cAAc,aAAa,eAAe,YAAY,cAAc,GAAG,YAAY;AAC1G,UAAM,WAAWC,aAAAA,SAAS,KAAK;AAE/B,UAAM,YAAYC,SAAAA,kBAAA;AAClB,UAAM,KAAK,WAAW;AACtB,UAAM,aAAa,WAAW,OAAO,UAAU,SAAS,QAAQ,QAAQ,UAAU,KAAK;AACvF,UAAM,QAAQ,WAAW,SAAS,SAAS;AAC3C,UAAM,WAAW,WAAW,YAAY,CAAC,SAAS,OAAO;AAEzD,UAAM,CAAC,OAAO,QAAQ,IAAIC,MAAAA,SAAc,MAAS;AAEjD,UAAM,EAAE,YAAY,aAAa,kBAAA,IAAsBC,oBAAAA,oBAAoB,UAAU,EAAE,aAAa,eAAe,YAAY,aAAA,CAAc;AAC7I,UAAM,iBAAiB,SAAS;AAChC,UAAM,EAAE,KAAK,SAAS,OAAA,IAAWC,8BAAAA,8BAA8B,QAAQ;AAEvE,WACCC,8BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACA;AAAA,QACA,OAAO,YAAY,SAAS,OAAO,EAAE,OAAO,UAAU;AAAA,QACtD,gBAAcC,UAAAA,cAAc,SAAS;AAAA,QACrC,cAAYA,UAAAA,cAAc,KAAK;AAAA,QAC/B,iBAAeA,UAAAA,cAAc,QAAQ;AAAA,QACrC;AAAA,QACA;AAAA,QACA,UAAUC,WAAAA,+BAAqE,CAAA,MAAK;AACnF,yBAAA,EAAiB,YAAY,WAAW,EAAE,OAAO,OAAO,EAAE,OAAO,SAAA,CAAU,CAAC;AAAA,QAC7E,CAAC;AAAA,QACA,GAAG;AAAA,QACJ,IAAI,KAAK,GAAG,EAAE,WAAW;AAAA,QACzB;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,MAdL;AAAA,MAAA;AAAA,MAAA;AAAA,QAAA,UAAA;AAAA,QAAA,YAAA;AAAA,QAAA,cAAA;AAAA,MAAA;AAAA,MAAAC;AAAAA,IAAA;AAAA,EAiBF;AAAA,EACA,CAAC,EAAE,OAAO,cAAc,mBAAmB;AAC1C,WAAOH,8BAAAA,OAACI,aAAAA,OAAA,EAAM,OAAc,cAA4B,aAAA,GAAjD,QAAA,OAAA;AAAA,MAAA,UAAA;AAAA,MAAA,YAAA;AAAA,MAAA,cAAA;AAAA,IAAA,GAAAD,MAA6E;AAAA,EACrF;AACD;;"}
@@ -0,0 +1,62 @@
1
+ import { jsxDEV } from "react/jsx-dev-runtime";
2
+ import { useState } from "react";
3
+ import { Slot } from "@radix-ui/react-slot";
4
+ import { Component, useField, Field } from "@contember/react-binding";
5
+ import { dataAttribute } from "@contember/utilities";
6
+ import { useFormInputHandler } from "../internal/useFormInputHandler.js";
7
+ import { useFormFieldState } from "../contexts.js";
8
+ import { useFormInputValidationHandler } from "../hooks/useFormInputValidationHandler.js";
9
+ import { useReferentiallyStableCallback } from "@contember/react-utils";
10
+ const SlotInput = Slot;
11
+ const FormInput = Component(
12
+ ({ field, isNonbearing, defaultValue, formatValue: formatValueIn, parseValue: parseValueIn, ...props }) => {
13
+ const accessor = useField(field);
14
+ const formState = useFormFieldState();
15
+ const id = formState?.htmlId;
16
+ const hasErrors = (formState?.errors.length ?? accessor.errors?.errors?.length ?? 0) > 0;
17
+ const dirty = formState?.dirty ?? accessor.hasUnpersistedChanges;
18
+ const required = formState?.required ?? !accessor.schema.nullable;
19
+ const [state, setState] = useState(void 0);
20
+ const { parseValue, formatValue, defaultInputProps } = useFormInputHandler(accessor, { formatValue: formatValueIn, parseValue: parseValueIn });
21
+ const accessorGetter = accessor.getAccessor;
22
+ const { ref, onFocus, onBlur } = useFormInputValidationHandler(accessor);
23
+ return /* @__PURE__ */ jsxDEV(
24
+ SlotInput,
25
+ {
26
+ ref,
27
+ value: formatValue(accessor.value, { state, setState }),
28
+ "data-invalid": dataAttribute(hasErrors),
29
+ "data-dirty": dataAttribute(dirty),
30
+ "data-required": dataAttribute(required),
31
+ onFocus,
32
+ onBlur,
33
+ onChange: useReferentiallyStableCallback((e) => {
34
+ accessorGetter().updateValue(parseValue(e.target.value, { state, setState }));
35
+ }),
36
+ ...defaultInputProps,
37
+ id: id ? `${id}-input` : void 0,
38
+ required,
39
+ ...props
40
+ },
41
+ void 0,
42
+ false,
43
+ {
44
+ fileName: "/home/runner/work/contember/contember/packages/react-form/src/components/FormInput.tsx",
45
+ lineNumber: 41,
46
+ columnNumber: 4
47
+ },
48
+ void 0
49
+ );
50
+ },
51
+ ({ field, isNonbearing, defaultValue }) => {
52
+ return /* @__PURE__ */ jsxDEV(Field, { field, isNonbearing, defaultValue }, void 0, false, {
53
+ fileName: "/home/runner/work/contember/contember/packages/react-form/src/components/FormInput.tsx",
54
+ lineNumber: 60,
55
+ columnNumber: 10
56
+ }, void 0);
57
+ }
58
+ );
59
+ export {
60
+ FormInput
61
+ };
62
+ //# sourceMappingURL=FormInput.js.map
@@ -0,0 +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, useState } 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'\nimport { useReferentiallyStableCallback } from '@contember/react-utils'\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>(\n\t({ field, isNonbearing, defaultValue, formatValue: formatValueIn, parseValue: parseValueIn, ...props }) => {\n\t\tconst accessor = useField(field)\n\n\t\tconst formState = useFormFieldState()\n\t\tconst id = formState?.htmlId\n\t\tconst hasErrors = (formState?.errors.length ?? accessor.errors?.errors?.length ?? 0) > 0\n\t\tconst dirty = formState?.dirty ?? accessor.hasUnpersistedChanges\n\t\tconst required = formState?.required ?? !accessor.schema.nullable\n\n\t\tconst [state, setState] = useState<any>(undefined)\n\n\t\tconst { parseValue, formatValue, defaultInputProps } = useFormInputHandler(accessor, { formatValue: formatValueIn, parseValue: parseValueIn })\n\t\tconst accessorGetter = accessor.getAccessor\n\t\tconst { ref, onFocus, onBlur } = useFormInputValidationHandler(accessor)\n\n\t\treturn (\n\t\t\t<SlotInput\n\t\t\t\tref={ref}\n\t\t\t\tvalue={formatValue(accessor.value, { state, setState })}\n\t\t\t\tdata-invalid={dataAttribute(hasErrors)}\n\t\t\t\tdata-dirty={dataAttribute(dirty)}\n\t\t\t\tdata-required={dataAttribute(required)}\n\t\t\t\tonFocus={onFocus}\n\t\t\t\tonBlur={onBlur}\n\t\t\t\tonChange={useReferentiallyStableCallback<ChangeEventHandler<HTMLInputElement>>(e => {\n\t\t\t\t\taccessorGetter().updateValue(parseValue(e.target.value, { state, setState }))\n\t\t\t\t})}\n\t\t\t\t{...defaultInputProps}\n\t\t\t\tid={id ? `${id}-input` : undefined}\n\t\t\t\trequired={required}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t)\n\t},\n\t({ field, isNonbearing, defaultValue }) => {\n\t\treturn <Field field={field} isNonbearing={isNonbearing} defaultValue={defaultValue} />\n\t},\n)\n"],"names":["this"],"mappings":";;;;;;;;;AAYA,MAAM,YAAY;AAWX,MAAM,YAAY;AAAA,EACxB,CAAC,EAAE,OAAO,cAAc,cAAc,aAAa,eAAe,YAAY,cAAc,GAAG,YAAY;AAC1G,UAAM,WAAW,SAAS,KAAK;AAE/B,UAAM,YAAY,kBAAA;AAClB,UAAM,KAAK,WAAW;AACtB,UAAM,aAAa,WAAW,OAAO,UAAU,SAAS,QAAQ,QAAQ,UAAU,KAAK;AACvF,UAAM,QAAQ,WAAW,SAAS,SAAS;AAC3C,UAAM,WAAW,WAAW,YAAY,CAAC,SAAS,OAAO;AAEzD,UAAM,CAAC,OAAO,QAAQ,IAAI,SAAc,MAAS;AAEjD,UAAM,EAAE,YAAY,aAAa,kBAAA,IAAsB,oBAAoB,UAAU,EAAE,aAAa,eAAe,YAAY,aAAA,CAAc;AAC7I,UAAM,iBAAiB,SAAS;AAChC,UAAM,EAAE,KAAK,SAAS,OAAA,IAAW,8BAA8B,QAAQ;AAEvE,WACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACA;AAAA,QACA,OAAO,YAAY,SAAS,OAAO,EAAE,OAAO,UAAU;AAAA,QACtD,gBAAc,cAAc,SAAS;AAAA,QACrC,cAAY,cAAc,KAAK;AAAA,QAC/B,iBAAe,cAAc,QAAQ;AAAA,QACrC;AAAA,QACA;AAAA,QACA,UAAU,+BAAqE,CAAA,MAAK;AACnF,yBAAA,EAAiB,YAAY,WAAW,EAAE,OAAO,OAAO,EAAE,OAAO,SAAA,CAAU,CAAC;AAAA,QAC7E,CAAC;AAAA,QACA,GAAG;AAAA,QACJ,IAAI,KAAK,GAAG,EAAE,WAAW;AAAA,QACzB;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,MAdL;AAAA,MAAA;AAAA,MAAA;AAAA,QAAA,UAAA;AAAA,QAAA,YAAA;AAAA,QAAA,cAAA;AAAA,MAAA;AAAA,MAAAA;AAAAA,IAAA;AAAA,EAiBF;AAAA,EACA,CAAC,EAAE,OAAO,cAAc,mBAAmB;AAC1C,WAAO,uBAAC,OAAA,EAAM,OAAc,cAA4B,aAAA,GAAjD,QAAA,OAAA;AAAA,MAAA,UAAA;AAAA,MAAA,YAAA;AAAA,MAAA,cAAA;AAAA,IAAA,GAAAA,MAA6E;AAAA,EACrF;AACD;"}
@@ -0,0 +1,34 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const jsxDevRuntime = require("react/jsx-dev-runtime");
4
+ const reactSlot = require("@radix-ui/react-slot");
5
+ const utilities = require("@contember/utilities");
6
+ const contexts = require("../contexts.cjs");
7
+ const reactBinding = require("@contember/react-binding");
8
+ const FormLabel = (props) => {
9
+ const formState = contexts.useFormFieldState();
10
+ if (!formState) {
11
+ throw new reactBinding.BindingError("FormError must be used inside a FormField");
12
+ }
13
+ const { errors, htmlId, dirty, required } = formState;
14
+ return /* @__PURE__ */ jsxDevRuntime.jsxDEV(
15
+ reactSlot.Slot,
16
+ {
17
+ "data-invalid": utilities.dataAttribute(errors.length > 0),
18
+ "data-dirty": utilities.dataAttribute(dirty),
19
+ "data-required": utilities.dataAttribute(required),
20
+ ...htmlId ? { htmlFor: `${htmlId}-input` } : {},
21
+ ...props
22
+ },
23
+ void 0,
24
+ false,
25
+ {
26
+ fileName: "/home/runner/work/contember/contember/packages/react-form/src/components/FormLabel.tsx",
27
+ lineNumber: 16,
28
+ columnNumber: 3
29
+ },
30
+ void 0
31
+ );
32
+ };
33
+ exports.FormLabel = FormLabel;
34
+ //# sourceMappingURL=FormLabel.cjs.map
@@ -0,0 +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 { 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","jsxDEV","Slot","dataAttribute","this"],"mappings":";;;;;;;AAMO,MAAM,YAAY,CAAC,UAEpB;AACL,QAAM,YAAYA,SAAAA,kBAAA;AAClB,MAAI,CAAC,WAAW;AACf,UAAM,IAAIC,aAAAA,aAAa,2CAA2C;AAAA,EACnE;AACA,QAAM,EAAE,QAAQ,QAAQ,OAAO,aAAa;AAC5C,SACCC,8BAAAA;AAAAA,IAACC,UAAAA;AAAAA,IAAA;AAAA,MACA,gBAAcC,UAAAA,cAAc,OAAO,SAAS,CAAC;AAAA,MAC7C,cAAYA,UAAAA,cAAc,KAAK;AAAA,MAC/B,iBAAeA,UAAAA,cAAc,QAAQ;AAAA,MACpC,GAAI,SAAS,EAAE,SAAS,GAAG,MAAM,SAAA,IAAa,CAAA;AAAA,MAC9C,GAAG;AAAA,IAAA;AAAA,IALL;AAAA,IAAA;AAAA,IAAA;AAAA,MAAA,UAAA;AAAA,MAAA,YAAA;AAAA,MAAA,cAAA;AAAA,IAAA;AAAA,IAAAC;AAAAA,EAAA;AAQF;;"}
@@ -0,0 +1,34 @@
1
+ import { jsxDEV } from "react/jsx-dev-runtime";
2
+ import { Slot } from "@radix-ui/react-slot";
3
+ import { dataAttribute } from "@contember/utilities";
4
+ import { useFormFieldState } from "../contexts.js";
5
+ import { BindingError } from "@contember/react-binding";
6
+ const FormLabel = (props) => {
7
+ const formState = useFormFieldState();
8
+ if (!formState) {
9
+ throw new BindingError("FormError must be used inside a FormField");
10
+ }
11
+ const { errors, htmlId, dirty, required } = formState;
12
+ return /* @__PURE__ */ jsxDEV(
13
+ Slot,
14
+ {
15
+ "data-invalid": dataAttribute(errors.length > 0),
16
+ "data-dirty": dataAttribute(dirty),
17
+ "data-required": dataAttribute(required),
18
+ ...htmlId ? { htmlFor: `${htmlId}-input` } : {},
19
+ ...props
20
+ },
21
+ void 0,
22
+ false,
23
+ {
24
+ fileName: "/home/runner/work/contember/contember/packages/react-form/src/components/FormLabel.tsx",
25
+ lineNumber: 16,
26
+ columnNumber: 3
27
+ },
28
+ void 0
29
+ );
30
+ };
31
+ export {
32
+ FormLabel
33
+ };
34
+ //# sourceMappingURL=FormLabel.js.map
@@ -0,0 +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 { 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":["this"],"mappings":";;;;;AAMO,MAAM,YAAY,CAAC,UAEpB;AACL,QAAM,YAAY,kBAAA;AAClB,MAAI,CAAC,WAAW;AACf,UAAM,IAAI,aAAa,2CAA2C;AAAA,EACnE;AACA,QAAM,EAAE,QAAQ,QAAQ,OAAO,aAAa;AAC5C,SACC;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,CAAA;AAAA,MAC9C,GAAG;AAAA,IAAA;AAAA,IALL;AAAA,IAAA;AAAA,IAAA;AAAA,MAAA,UAAA;AAAA,MAAA,YAAA;AAAA,MAAA,cAAA;AAAA,IAAA;AAAA,IAAAA;AAAAA,EAAA;AAQF;"}
@@ -0,0 +1,55 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const jsxDevRuntime = require("react/jsx-dev-runtime");
4
+ const reactBinding = require("@contember/react-binding");
5
+ const utilities = require("@contember/utilities");
6
+ const reactSlot = require("@radix-ui/react-slot");
7
+ const React = require("react");
8
+ const contexts = require("../contexts.cjs");
9
+ const useFormInputValidationHandler = require("../hooks/useFormInputValidationHandler.cjs");
10
+ const SlotInput = reactSlot.Slot;
11
+ const FormRadioInput = reactBinding.Component(({ field, value, defaultValue, isNonbearing, ...props }) => {
12
+ const accessor = reactBinding.useField(field);
13
+ const formState = contexts.useFormFieldState();
14
+ const id = formState?.htmlId;
15
+ const hasErrors = (formState?.errors.length ?? accessor.errors?.errors?.length ?? 0) > 0;
16
+ const dirty = formState?.dirty ?? accessor.hasUnpersistedChanges;
17
+ const accessorGetter = accessor.getAccessor;
18
+ const { ref, onFocus, onBlur } = useFormInputValidationHandler.useFormInputValidationHandler(accessor);
19
+ const handleChange = React.useCallback((e) => {
20
+ accessorGetter().updateValue(value);
21
+ }, [accessorGetter, value]);
22
+ return /* @__PURE__ */ jsxDevRuntime.jsxDEV(
23
+ SlotInput,
24
+ {
25
+ ref,
26
+ type: "radio",
27
+ value: typeof value === "string" ? value : void 0,
28
+ checked: accessor.value === value,
29
+ "data-invalid": utilities.dataAttribute(hasErrors),
30
+ "data-dirty": utilities.dataAttribute(dirty),
31
+ name: id ? id + "-input" : void 0,
32
+ id: id ? `${id}-input` : void 0,
33
+ onFocus,
34
+ onBlur,
35
+ onChange: handleChange,
36
+ ...props
37
+ },
38
+ void 0,
39
+ false,
40
+ {
41
+ fileName: "/home/runner/work/contember/contember/packages/react-form/src/components/FormRadioInput.tsx",
42
+ lineNumber: 35,
43
+ columnNumber: 3
44
+ },
45
+ void 0
46
+ );
47
+ }, ({ field, isNonbearing, defaultValue }) => {
48
+ return /* @__PURE__ */ jsxDevRuntime.jsxDEV(reactBinding.Field, { field, isNonbearing, defaultValue }, void 0, false, {
49
+ fileName: "/home/runner/work/contember/contember/packages/react-form/src/components/FormRadioInput.tsx",
50
+ lineNumber: 51,
51
+ columnNumber: 9
52
+ }, void 0);
53
+ });
54
+ exports.FormRadioInput = FormRadioInput;
55
+ //# sourceMappingURL=FormRadioInput.cjs.map
@@ -0,0 +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 { 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","jsxDEV","dataAttribute","this","Field"],"mappings":";;;;;;;;;AAQA,MAAM,YAAYA,UAAAA;AAUX,MAAM,iBAAiBC,aAAAA,UAA8B,CAAC,EAAE,OAAO,OAAO,cAAc,cAAc,GAAG,YAAY;AACvH,QAAM,WAAWC,aAAAA,SAAS,KAAK;AAE/B,QAAM,YAAYC,SAAAA,kBAAA;AAClB,QAAM,KAAK,WAAW;AACtB,QAAM,aAAa,WAAW,OAAO,UAAU,SAAS,QAAQ,QAAQ,UAAU,KAAK;AACvF,QAAM,QAAQ,WAAW,SAAS,SAAS;AAE3C,QAAM,iBAAiB,SAAS;AAChC,QAAM,EAAE,KAAK,SAAS,OAAA,IAAWC,8BAAAA,8BAA8B,QAAQ;AAEvE,QAAM,eAAeC,kBAAkD,CAAA,MAAK;AAC3E,mBAAA,EAAiB,YAAY,KAAK;AAAA,EACnC,GAAG,CAAC,gBAAgB,KAAK,CAAC;AAE1B,SACCC,8BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACA;AAAA,MACA,MAAK;AAAA,MACL,OAAO,OAAO,UAAU,WAAW,QAAQ;AAAA,MAC3C,SAAS,SAAS,UAAU;AAAA,MAC5B,gBAAcC,UAAAA,cAAc,SAAS;AAAA,MACrC,cAAYA,UAAAA,cAAc,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,IAZL;AAAA,IAAA;AAAA,IAAA;AAAA,MAAA,UAAA;AAAA,MAAA,YAAA;AAAA,MAAA,cAAA;AAAA,IAAA;AAAA,IAAAC;AAAAA,EAAA;AAeF,GAAG,CAAC,EAAE,OAAO,cAAc,mBAAmB;AAC7C,SAAOF,8BAAAA,OAACG,aAAAA,OAAA,EAAM,OAAc,cAA4B,aAAA,GAAjD,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA,GAAAD,MAA6E;AACrF,CAAC;;"}
@@ -0,0 +1,55 @@
1
+ import { jsxDEV } from "react/jsx-dev-runtime";
2
+ import { Component, useField, Field } from "@contember/react-binding";
3
+ import { dataAttribute } from "@contember/utilities";
4
+ import { Slot } from "@radix-ui/react-slot";
5
+ import { useCallback } from "react";
6
+ import { useFormFieldState } from "../contexts.js";
7
+ import { useFormInputValidationHandler } from "../hooks/useFormInputValidationHandler.js";
8
+ const SlotInput = Slot;
9
+ const FormRadioInput = Component(({ field, value, defaultValue, isNonbearing, ...props }) => {
10
+ const accessor = useField(field);
11
+ const formState = useFormFieldState();
12
+ const id = formState?.htmlId;
13
+ const hasErrors = (formState?.errors.length ?? accessor.errors?.errors?.length ?? 0) > 0;
14
+ const dirty = formState?.dirty ?? accessor.hasUnpersistedChanges;
15
+ const accessorGetter = accessor.getAccessor;
16
+ const { ref, onFocus, onBlur } = useFormInputValidationHandler(accessor);
17
+ const handleChange = useCallback((e) => {
18
+ accessorGetter().updateValue(value);
19
+ }, [accessorGetter, value]);
20
+ return /* @__PURE__ */ jsxDEV(
21
+ SlotInput,
22
+ {
23
+ ref,
24
+ type: "radio",
25
+ value: typeof value === "string" ? value : void 0,
26
+ checked: accessor.value === value,
27
+ "data-invalid": dataAttribute(hasErrors),
28
+ "data-dirty": dataAttribute(dirty),
29
+ name: id ? id + "-input" : void 0,
30
+ id: id ? `${id}-input` : void 0,
31
+ onFocus,
32
+ onBlur,
33
+ onChange: handleChange,
34
+ ...props
35
+ },
36
+ void 0,
37
+ false,
38
+ {
39
+ fileName: "/home/runner/work/contember/contember/packages/react-form/src/components/FormRadioInput.tsx",
40
+ lineNumber: 35,
41
+ columnNumber: 3
42
+ },
43
+ void 0
44
+ );
45
+ }, ({ field, isNonbearing, defaultValue }) => {
46
+ return /* @__PURE__ */ jsxDEV(Field, { field, isNonbearing, defaultValue }, void 0, false, {
47
+ fileName: "/home/runner/work/contember/contember/packages/react-form/src/components/FormRadioInput.tsx",
48
+ lineNumber: 51,
49
+ columnNumber: 9
50
+ }, void 0);
51
+ });
52
+ export {
53
+ FormRadioInput
54
+ };
55
+ //# sourceMappingURL=FormRadioInput.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"FormRadioInput.js","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":["this"],"mappings":";;;;;;;AAQA,MAAM,YAAY;AAUX,MAAM,iBAAiB,UAA8B,CAAC,EAAE,OAAO,OAAO,cAAc,cAAc,GAAG,YAAY;AACvH,QAAM,WAAW,SAAS,KAAK;AAE/B,QAAM,YAAY,kBAAA;AAClB,QAAM,KAAK,WAAW;AACtB,QAAM,aAAa,WAAW,OAAO,UAAU,SAAS,QAAQ,QAAQ,UAAU,KAAK;AACvF,QAAM,QAAQ,WAAW,SAAS,SAAS;AAE3C,QAAM,iBAAiB,SAAS;AAChC,QAAM,EAAE,KAAK,SAAS,OAAA,IAAW,8BAA8B,QAAQ;AAEvE,QAAM,eAAe,YAAkD,CAAA,MAAK;AAC3E,mBAAA,EAAiB,YAAY,KAAK;AAAA,EACnC,GAAG,CAAC,gBAAgB,KAAK,CAAC;AAE1B,SACC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA;AAAA,MACA,MAAK;AAAA,MACL,OAAO,OAAO,UAAU,WAAW,QAAQ;AAAA,MAC3C,SAAS,SAAS,UAAU;AAAA,MAC5B,gBAAc,cAAc,SAAS;AAAA,MACrC,cAAY,cAAc,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,IAZL;AAAA,IAAA;AAAA,IAAA;AAAA,MAAA,UAAA;AAAA,MAAA,YAAA;AAAA,MAAA,cAAA;AAAA,IAAA;AAAA,IAAAA;AAAAA,EAAA;AAeF,GAAG,CAAC,EAAE,OAAO,cAAc,mBAAmB;AAC7C,SAAO,uBAAC,OAAA,EAAM,OAAc,cAA4B,aAAA,GAAjD,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA,GAAAA,MAA6E;AACrF,CAAC;"}
@@ -0,0 +1,13 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const reactUtils = require("@contember/react-utils");
4
+ const FormFieldStateContext_ = reactUtils.createContext("FormFieldStateContext", void 0);
5
+ const FormFieldStateContext = FormFieldStateContext_[0];
6
+ const useFormFieldState = FormFieldStateContext_[1];
7
+ const useFormFieldId = () => useFormFieldState()?.htmlId;
8
+ const useFormError = () => useFormFieldState()?.errors;
9
+ exports.FormFieldStateContext = FormFieldStateContext;
10
+ exports.useFormError = useFormError;
11
+ exports.useFormFieldId = useFormFieldId;
12
+ exports.useFormFieldState = useFormFieldState;
13
+ //# sourceMappingURL=contexts.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"contexts.cjs","sources":["../../../../packages/react-form/src/contexts.tsx"],"sourcesContent":["import { createContext } from '@contember/react-utils'\nimport { FormFieldState } from './types'\n\nconst FormFieldStateContext_ = createContext<FormFieldState | undefined>('FormFieldStateContext', undefined)\nexport const FormFieldStateContext = FormFieldStateContext_[0]\nexport const useFormFieldState = FormFieldStateContext_[1]\n\n/**\n * @deprecated use `useFormState` instead\n */\nexport const useFormFieldId = () => useFormFieldState()?.htmlId\n\n/**\n * @deprecated use `useFormState` instead\n */\nexport const useFormError = () => useFormFieldState()?.errors\n"],"names":["createContext"],"mappings":";;;AAGA,MAAM,yBAAyBA,WAAAA,cAA0C,yBAAyB,MAAS;AACpG,MAAM,wBAAwB,uBAAuB,CAAC;AACtD,MAAM,oBAAoB,uBAAuB,CAAC;AAKlD,MAAM,iBAAiB,MAAM,qBAAqB;AAKlD,MAAM,eAAe,MAAM,qBAAqB;;;;;"}
@@ -0,0 +1,13 @@
1
+ import { createContext } from "@contember/react-utils";
2
+ const FormFieldStateContext_ = createContext("FormFieldStateContext", void 0);
3
+ const FormFieldStateContext = FormFieldStateContext_[0];
4
+ const useFormFieldState = FormFieldStateContext_[1];
5
+ const useFormFieldId = () => useFormFieldState()?.htmlId;
6
+ const useFormError = () => useFormFieldState()?.errors;
7
+ export {
8
+ FormFieldStateContext,
9
+ useFormError,
10
+ useFormFieldId,
11
+ useFormFieldState
12
+ };
13
+ //# sourceMappingURL=contexts.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"contexts.js","sources":["../../../../packages/react-form/src/contexts.tsx"],"sourcesContent":["import { createContext } from '@contember/react-utils'\nimport { FormFieldState } from './types'\n\nconst FormFieldStateContext_ = createContext<FormFieldState | undefined>('FormFieldStateContext', undefined)\nexport const FormFieldStateContext = FormFieldStateContext_[0]\nexport const useFormFieldState = FormFieldStateContext_[1]\n\n/**\n * @deprecated use `useFormState` instead\n */\nexport const useFormFieldId = () => useFormFieldState()?.htmlId\n\n/**\n * @deprecated use `useFormState` instead\n */\nexport const useFormError = () => useFormFieldState()?.errors\n"],"names":[],"mappings":";AAGA,MAAM,yBAAyB,cAA0C,yBAAyB,MAAS;AACpG,MAAM,wBAAwB,uBAAuB,CAAC;AACtD,MAAM,oBAAoB,uBAAuB,CAAC;AAKlD,MAAM,iBAAiB,MAAM,qBAAqB;AAKlD,MAAM,eAAe,MAAM,qBAAqB;"}
@@ -0,0 +1,80 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const React = require("react");
4
+ const reactBinding = require("@contember/react-binding");
5
+ function _interopNamespaceDefault(e) {
6
+ const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
7
+ if (e) {
8
+ for (const k in e) {
9
+ if (k !== "default") {
10
+ const d = Object.getOwnPropertyDescriptor(e, k);
11
+ Object.defineProperty(n, k, d.get ? d : {
12
+ enumerable: true,
13
+ get: () => e[k]
14
+ });
15
+ }
16
+ }
17
+ }
18
+ n.default = e;
19
+ return Object.freeze(n);
20
+ }
21
+ const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
22
+ const useFormInputValidationHandler = (field) => {
23
+ const accessorGetter = field.getAccessor;
24
+ const validationMessage = React.useRef(void 0);
25
+ const [focus, setFocus] = React__namespace.useState(false);
26
+ const inputRef = React__namespace.useRef(null);
27
+ reactBinding.useEntityBeforePersist(React.useCallback(() => {
28
+ if (validationMessage.current) {
29
+ accessorGetter().addError(validationMessage.current);
30
+ }
31
+ }, [accessorGetter]));
32
+ React.useEffect(() => {
33
+ if (!inputRef.current) {
34
+ return;
35
+ }
36
+ const input = inputRef.current;
37
+ const valid = input.validity?.valid;
38
+ const message = valid ? void 0 : input?.validationMessage;
39
+ const previousMessage = validationMessage.current;
40
+ validationMessage.current = message;
41
+ const accessor = accessorGetter();
42
+ if (!message) {
43
+ if (previousMessage) {
44
+ clearSpecificError(accessor, previousMessage);
45
+ }
46
+ return;
47
+ }
48
+ if (message === previousMessage) {
49
+ return;
50
+ }
51
+ if (!field.isTouched) {
52
+ return;
53
+ }
54
+ if (!focus || !!previousMessage) {
55
+ accessor.clearErrors();
56
+ accessor.addError(message);
57
+ }
58
+ });
59
+ return {
60
+ ref: inputRef,
61
+ onFocus: React.useCallback(() => {
62
+ setFocus(true);
63
+ }, []),
64
+ onBlur: React.useCallback(() => {
65
+ setFocus(false);
66
+ accessorGetter().clearErrors();
67
+ if (validationMessage.current) {
68
+ accessorGetter().addError(validationMessage.current);
69
+ }
70
+ }, [accessorGetter])
71
+ };
72
+ };
73
+ const clearSpecificError = (field, message) => {
74
+ const errors = field.errors?.errors ?? [];
75
+ const error = errors.filter((e) => !(e.type === "validation" && e.message === message));
76
+ field.clearErrors();
77
+ error.forEach((e) => field.addError(e));
78
+ };
79
+ exports.useFormInputValidationHandler = useFormInputValidationHandler;
80
+ //# sourceMappingURL=useFormInputValidationHandler.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useFormInputValidationHandler.cjs","sources":["../../../../../packages/react-form/src/hooks/useFormInputValidationHandler.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useCallback, useEffect, useRef } from 'react'\nimport { FieldAccessor, useEntityBeforePersist } from '@contember/react-binding'\n\nexport const useFormInputValidationHandler = (field: FieldAccessor<any>) => {\n\tconst accessorGetter = field.getAccessor\n\tconst validationMessage = useRef<string>(undefined)\n\tconst [focus, setFocus] = React.useState(false)\n\tconst inputRef = React.useRef<HTMLInputElement>(null)\n\tuseEntityBeforePersist(useCallback(() => {\n\t\tif (validationMessage.current) {\n\t\t\taccessorGetter().addError(validationMessage.current)\n\t\t}\n\t}, [accessorGetter]))\n\n\tuseEffect(() => {\n\t\tif (!inputRef.current) {\n\t\t\treturn\n\t\t}\n\n\t\tconst input = inputRef.current\n\t\tconst valid = input.validity?.valid\n\n\t\tconst message = valid ? undefined : input?.validationMessage\n\t\tconst previousMessage = validationMessage.current\n\t\tvalidationMessage.current = message\n\n\t\tconst accessor = accessorGetter()\n\t\t// if there is no message, we want to clear the error\n\t\tif (!message) {\n\t\t\tif (previousMessage) {\n\t\t\t\tclearSpecificError(accessor, previousMessage)\n\t\t\t}\n\t\t\treturn\n\t\t}\n\t\tif (message === previousMessage) {\n\t\t\treturn\n\t\t}\n\t\t// if the input is not touched, we don't want to show the error message\n\t\tif (!field.isTouched) {\n\t\t\treturn\n\t\t}\n\n\t\t// if the input is not focused, we want to show the error message\n\t\t// also, even the input is focused, we want to replace the previous message\n\t\tif (!focus || !!previousMessage) {\n\t\t\taccessor.clearErrors()\n\t\t\taccessor.addError(message)\n\t\t}\n\t})\n\n\treturn {\n\t\tref: inputRef,\n\t\tonFocus: useCallback(() => {\n\t\t\tsetFocus(true)\n\t\t}, []),\n\t\tonBlur: useCallback(() => {\n\t\t\tsetFocus(false)\n\t\t\taccessorGetter().clearErrors()\n\t\t\tif (validationMessage.current) {\n\t\t\t\taccessorGetter().addError(validationMessage.current)\n\t\t\t}\n\t\t}, [accessorGetter]),\n\t}\n}\n\nconst clearSpecificError = (field: FieldAccessor<any>, message: string) => {\n\tconst errors = field.errors?.errors ?? []\n\tconst error = errors.filter(e => !(e.type === 'validation' && e.message === message))\n\tfield.clearErrors()\n\terror.forEach(e => field.addError(e))\n}\n"],"names":["useRef","React","useEntityBeforePersist","useCallback","useEffect"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAIO,MAAM,gCAAgC,CAAC,UAA8B;AAC3E,QAAM,iBAAiB,MAAM;AAC7B,QAAM,oBAAoBA,MAAAA,OAAe,MAAS;AAClD,QAAM,CAAC,OAAO,QAAQ,IAAIC,iBAAM,SAAS,KAAK;AAC9C,QAAM,WAAWA,iBAAM,OAAyB,IAAI;AACpDC,eAAAA,uBAAuBC,MAAAA,YAAY,MAAM;AACxC,QAAI,kBAAkB,SAAS;AAC9B,uBAAiB,SAAS,kBAAkB,OAAO;AAAA,IACpD;AAAA,EACD,GAAG,CAAC,cAAc,CAAC,CAAC;AAEpBC,QAAAA,UAAU,MAAM;AACf,QAAI,CAAC,SAAS,SAAS;AACtB;AAAA,IACD;AAEA,UAAM,QAAQ,SAAS;AACvB,UAAM,QAAQ,MAAM,UAAU;AAE9B,UAAM,UAAU,QAAQ,SAAY,OAAO;AAC3C,UAAM,kBAAkB,kBAAkB;AAC1C,sBAAkB,UAAU;AAE5B,UAAM,WAAW,eAAA;AAEjB,QAAI,CAAC,SAAS;AACb,UAAI,iBAAiB;AACpB,2BAAmB,UAAU,eAAe;AAAA,MAC7C;AACA;AAAA,IACD;AACA,QAAI,YAAY,iBAAiB;AAChC;AAAA,IACD;AAEA,QAAI,CAAC,MAAM,WAAW;AACrB;AAAA,IACD;AAIA,QAAI,CAAC,SAAS,CAAC,CAAC,iBAAiB;AAChC,eAAS,YAAA;AACT,eAAS,SAAS,OAAO;AAAA,IAC1B;AAAA,EACD,CAAC;AAED,SAAO;AAAA,IACN,KAAK;AAAA,IACL,SAASD,MAAAA,YAAY,MAAM;AAC1B,eAAS,IAAI;AAAA,IACd,GAAG,CAAA,CAAE;AAAA,IACL,QAAQA,MAAAA,YAAY,MAAM;AACzB,eAAS,KAAK;AACd,qBAAA,EAAiB,YAAA;AACjB,UAAI,kBAAkB,SAAS;AAC9B,yBAAiB,SAAS,kBAAkB,OAAO;AAAA,MACpD;AAAA,IACD,GAAG,CAAC,cAAc,CAAC;AAAA,EAAA;AAErB;AAEA,MAAM,qBAAqB,CAAC,OAA2B,YAAoB;AAC1E,QAAM,SAAS,MAAM,QAAQ,UAAU,CAAA;AACvC,QAAM,QAAQ,OAAO,OAAO,CAAA,MAAK,EAAE,EAAE,SAAS,gBAAgB,EAAE,YAAY,QAAQ;AACpF,QAAM,YAAA;AACN,QAAM,QAAQ,CAAA,MAAK,MAAM,SAAS,CAAC,CAAC;AACrC;;"}
@@ -0,0 +1,64 @@
1
+ import * as React from "react";
2
+ import { useRef, useCallback, useEffect } from "react";
3
+ import { useEntityBeforePersist } from "@contember/react-binding";
4
+ const useFormInputValidationHandler = (field) => {
5
+ const accessorGetter = field.getAccessor;
6
+ const validationMessage = useRef(void 0);
7
+ const [focus, setFocus] = React.useState(false);
8
+ const inputRef = React.useRef(null);
9
+ useEntityBeforePersist(useCallback(() => {
10
+ if (validationMessage.current) {
11
+ accessorGetter().addError(validationMessage.current);
12
+ }
13
+ }, [accessorGetter]));
14
+ useEffect(() => {
15
+ if (!inputRef.current) {
16
+ return;
17
+ }
18
+ const input = inputRef.current;
19
+ const valid = input.validity?.valid;
20
+ const message = valid ? void 0 : input?.validationMessage;
21
+ const previousMessage = validationMessage.current;
22
+ validationMessage.current = message;
23
+ const accessor = accessorGetter();
24
+ if (!message) {
25
+ if (previousMessage) {
26
+ clearSpecificError(accessor, previousMessage);
27
+ }
28
+ return;
29
+ }
30
+ if (message === previousMessage) {
31
+ return;
32
+ }
33
+ if (!field.isTouched) {
34
+ return;
35
+ }
36
+ if (!focus || !!previousMessage) {
37
+ accessor.clearErrors();
38
+ accessor.addError(message);
39
+ }
40
+ });
41
+ return {
42
+ ref: inputRef,
43
+ onFocus: useCallback(() => {
44
+ setFocus(true);
45
+ }, []),
46
+ onBlur: useCallback(() => {
47
+ setFocus(false);
48
+ accessorGetter().clearErrors();
49
+ if (validationMessage.current) {
50
+ accessorGetter().addError(validationMessage.current);
51
+ }
52
+ }, [accessorGetter])
53
+ };
54
+ };
55
+ const clearSpecificError = (field, message) => {
56
+ const errors = field.errors?.errors ?? [];
57
+ const error = errors.filter((e) => !(e.type === "validation" && e.message === message));
58
+ field.clearErrors();
59
+ error.forEach((e) => field.addError(e));
60
+ };
61
+ export {
62
+ useFormInputValidationHandler
63
+ };
64
+ //# sourceMappingURL=useFormInputValidationHandler.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useFormInputValidationHandler.js","sources":["../../../../../packages/react-form/src/hooks/useFormInputValidationHandler.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useCallback, useEffect, useRef } from 'react'\nimport { FieldAccessor, useEntityBeforePersist } from '@contember/react-binding'\n\nexport const useFormInputValidationHandler = (field: FieldAccessor<any>) => {\n\tconst accessorGetter = field.getAccessor\n\tconst validationMessage = useRef<string>(undefined)\n\tconst [focus, setFocus] = React.useState(false)\n\tconst inputRef = React.useRef<HTMLInputElement>(null)\n\tuseEntityBeforePersist(useCallback(() => {\n\t\tif (validationMessage.current) {\n\t\t\taccessorGetter().addError(validationMessage.current)\n\t\t}\n\t}, [accessorGetter]))\n\n\tuseEffect(() => {\n\t\tif (!inputRef.current) {\n\t\t\treturn\n\t\t}\n\n\t\tconst input = inputRef.current\n\t\tconst valid = input.validity?.valid\n\n\t\tconst message = valid ? undefined : input?.validationMessage\n\t\tconst previousMessage = validationMessage.current\n\t\tvalidationMessage.current = message\n\n\t\tconst accessor = accessorGetter()\n\t\t// if there is no message, we want to clear the error\n\t\tif (!message) {\n\t\t\tif (previousMessage) {\n\t\t\t\tclearSpecificError(accessor, previousMessage)\n\t\t\t}\n\t\t\treturn\n\t\t}\n\t\tif (message === previousMessage) {\n\t\t\treturn\n\t\t}\n\t\t// if the input is not touched, we don't want to show the error message\n\t\tif (!field.isTouched) {\n\t\t\treturn\n\t\t}\n\n\t\t// if the input is not focused, we want to show the error message\n\t\t// also, even the input is focused, we want to replace the previous message\n\t\tif (!focus || !!previousMessage) {\n\t\t\taccessor.clearErrors()\n\t\t\taccessor.addError(message)\n\t\t}\n\t})\n\n\treturn {\n\t\tref: inputRef,\n\t\tonFocus: useCallback(() => {\n\t\t\tsetFocus(true)\n\t\t}, []),\n\t\tonBlur: useCallback(() => {\n\t\t\tsetFocus(false)\n\t\t\taccessorGetter().clearErrors()\n\t\t\tif (validationMessage.current) {\n\t\t\t\taccessorGetter().addError(validationMessage.current)\n\t\t\t}\n\t\t}, [accessorGetter]),\n\t}\n}\n\nconst clearSpecificError = (field: FieldAccessor<any>, message: string) => {\n\tconst errors = field.errors?.errors ?? []\n\tconst error = errors.filter(e => !(e.type === 'validation' && e.message === message))\n\tfield.clearErrors()\n\terror.forEach(e => field.addError(e))\n}\n"],"names":[],"mappings":";;;AAIO,MAAM,gCAAgC,CAAC,UAA8B;AAC3E,QAAM,iBAAiB,MAAM;AAC7B,QAAM,oBAAoB,OAAe,MAAS;AAClD,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAS,KAAK;AAC9C,QAAM,WAAW,MAAM,OAAyB,IAAI;AACpD,yBAAuB,YAAY,MAAM;AACxC,QAAI,kBAAkB,SAAS;AAC9B,uBAAiB,SAAS,kBAAkB,OAAO;AAAA,IACpD;AAAA,EACD,GAAG,CAAC,cAAc,CAAC,CAAC;AAEpB,YAAU,MAAM;AACf,QAAI,CAAC,SAAS,SAAS;AACtB;AAAA,IACD;AAEA,UAAM,QAAQ,SAAS;AACvB,UAAM,QAAQ,MAAM,UAAU;AAE9B,UAAM,UAAU,QAAQ,SAAY,OAAO;AAC3C,UAAM,kBAAkB,kBAAkB;AAC1C,sBAAkB,UAAU;AAE5B,UAAM,WAAW,eAAA;AAEjB,QAAI,CAAC,SAAS;AACb,UAAI,iBAAiB;AACpB,2BAAmB,UAAU,eAAe;AAAA,MAC7C;AACA;AAAA,IACD;AACA,QAAI,YAAY,iBAAiB;AAChC;AAAA,IACD;AAEA,QAAI,CAAC,MAAM,WAAW;AACrB;AAAA,IACD;AAIA,QAAI,CAAC,SAAS,CAAC,CAAC,iBAAiB;AAChC,eAAS,YAAA;AACT,eAAS,SAAS,OAAO;AAAA,IAC1B;AAAA,EACD,CAAC;AAED,SAAO;AAAA,IACN,KAAK;AAAA,IACL,SAAS,YAAY,MAAM;AAC1B,eAAS,IAAI;AAAA,IACd,GAAG,CAAA,CAAE;AAAA,IACL,QAAQ,YAAY,MAAM;AACzB,eAAS,KAAK;AACd,qBAAA,EAAiB,YAAA;AACjB,UAAI,kBAAkB,SAAS;AAC9B,yBAAiB,SAAS,kBAAkB,OAAO;AAAA,MACpD;AAAA,IACD,GAAG,CAAC,cAAc,CAAC;AAAA,EAAA;AAErB;AAEA,MAAM,qBAAqB,CAAC,OAA2B,YAAoB;AAC1E,QAAM,SAAS,MAAM,QAAQ,UAAU,CAAA;AACvC,QAAM,QAAQ,OAAO,OAAO,CAAA,MAAK,EAAE,EAAE,SAAS,gBAAgB,EAAE,YAAY,QAAQ;AACpF,QAAM,YAAA;AACN,QAAM,QAAQ,CAAA,MAAK,MAAM,SAAS,CAAC,CAAC;AACrC;"}