@nolwenture/formik-jsonschema-form 1.0.0-beta.22 → 1.0.0-beta.26

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 (110) hide show
  1. package/README.md +1 -1
  2. package/dist/cjs/Form/fields/ArrayField/ArrayField.js +5 -3
  3. package/dist/cjs/Form/fields/BooleanField/BooleanField.js +3 -2
  4. package/dist/cjs/Form/fields/DateField/DateField.js +3 -2
  5. package/dist/cjs/Form/fields/FileUploadField/FileUploadField.js +3 -2
  6. package/dist/cjs/Form/fields/MultipleChoiceField/MultipleChoiceField.js +3 -2
  7. package/dist/cjs/Form/fields/NullField/NullField.js +3 -2
  8. package/dist/cjs/Form/fields/ObjectField/ObjectField.js +6 -5
  9. package/dist/cjs/Form/fields/RadioField/RadioField.js +3 -2
  10. package/dist/cjs/Form/fields/SearchableMultiTagSelectField/SearchableMultiTagSelectField.js +3 -2
  11. package/dist/cjs/Form/fields/SearchableSelectField/SearchableSelectField.js +3 -2
  12. package/dist/cjs/Form/fields/StringField/StringField.js +4 -3
  13. package/dist/cjs/Form/fields/TextAreaField/TextAreaField.js +3 -2
  14. package/dist/cjs/Form/fields/ToggleField/ToggleField.js +3 -2
  15. package/dist/cjs/Form/fields/index.js +0 -1
  16. package/dist/cjs/Form/index.js +0 -4
  17. package/dist/cjs/Form/templates/CollapsibleObjectFieldTemplate/CollapsibleObjectFieldTemplate.js +2 -2
  18. package/dist/cjs/Form/templates/CollapsibleObjectFieldTemplate/styledComponents.js +2 -1
  19. package/dist/cjs/Form/templates/index.js +0 -1
  20. package/dist/cjs/FormView/components/Field.js +4 -5
  21. package/dist/cjs/FormView/fields/ArrayField.js +3 -2
  22. package/dist/cjs/FormView/fields/BooleanField.js +3 -2
  23. package/dist/cjs/FormView/fields/MultipleChoiceField.js +3 -2
  24. package/dist/cjs/FormView/fields/NullField.js +3 -2
  25. package/dist/cjs/FormView/fields/ObjectField/ObjectField.js +3 -5
  26. package/dist/cjs/FormView/fields/StringField.js +3 -2
  27. package/dist/cjs/FormView/fields/TextAreaField.js +3 -2
  28. package/dist/cjs/FormView/index.js +0 -4
  29. package/dist/cjs/FormView/templates/index.js +0 -4
  30. package/dist/cjs/common/index.js +19 -0
  31. package/dist/cjs/common/types/index.js +1 -0
  32. package/dist/cjs/index.js +27 -5
  33. package/dist/esm/Form/fields/ArrayField/ArrayField.js +5 -3
  34. package/dist/esm/Form/fields/BooleanField/BooleanField.js +3 -2
  35. package/dist/esm/Form/fields/DateField/DateField.js +3 -2
  36. package/dist/esm/Form/fields/FileUploadField/FileUploadField.js +3 -2
  37. package/dist/esm/Form/fields/MultipleChoiceField/MultipleChoiceField.js +3 -2
  38. package/dist/esm/Form/fields/NullField/NullField.js +3 -2
  39. package/dist/esm/Form/fields/ObjectField/ObjectField.js +6 -5
  40. package/dist/esm/Form/fields/RadioField/RadioField.js +3 -2
  41. package/dist/esm/Form/fields/SearchableMultiTagSelectField/SearchableMultiTagSelectField.js +3 -2
  42. package/dist/esm/Form/fields/SearchableSelectField/SearchableSelectField.js +3 -2
  43. package/dist/esm/Form/fields/StringField/StringField.js +4 -3
  44. package/dist/esm/Form/fields/TextAreaField/TextAreaField.js +3 -2
  45. package/dist/esm/Form/fields/ToggleField/ToggleField.js +3 -2
  46. package/dist/esm/Form/fields/index.js +0 -1
  47. package/dist/esm/Form/index.js +0 -4
  48. package/dist/esm/Form/templates/CollapsibleObjectFieldTemplate/CollapsibleObjectFieldTemplate.js +2 -2
  49. package/dist/esm/Form/templates/CollapsibleObjectFieldTemplate/styledComponents.js +2 -1
  50. package/dist/esm/Form/templates/index.js +0 -1
  51. package/dist/esm/FormView/components/Field.js +4 -5
  52. package/dist/esm/FormView/fields/ArrayField.js +3 -2
  53. package/dist/esm/FormView/fields/BooleanField.js +3 -2
  54. package/dist/esm/FormView/fields/MultipleChoiceField.js +3 -2
  55. package/dist/esm/FormView/fields/NullField.js +3 -2
  56. package/dist/esm/FormView/fields/ObjectField/ObjectField.js +3 -5
  57. package/dist/esm/FormView/fields/StringField.js +3 -2
  58. package/dist/esm/FormView/fields/TextAreaField.js +3 -2
  59. package/dist/esm/FormView/index.js +0 -4
  60. package/dist/esm/FormView/templates/index.js +0 -4
  61. package/dist/esm/common/index.js +3 -0
  62. package/dist/esm/common/types/index.js +1 -0
  63. package/dist/esm/index.js +4 -2
  64. package/dist/types/Form/fields/index.d.ts +20 -17
  65. package/dist/types/Form/index.d.ts +0 -4
  66. package/dist/types/Form/templates/ArrayFieldTemplate/ArrayFieldTemplate.d.ts +1 -1
  67. package/dist/types/Form/templates/CollapsibleObjectFieldTemplate/CollapsibleObjectFieldTemplate.d.ts +2 -2
  68. package/dist/types/Form/templates/CollapsibleObjectFieldTemplate/styledComponents.d.ts +1 -1
  69. package/dist/types/Form/templates/FieldTemplate/FieldTemplate.d.ts +1 -1
  70. package/dist/types/Form/templates/ObjectFieldTemplate/ObjectFieldTemplate.d.ts +1 -1
  71. package/dist/types/Form/templates/index.d.ts +8 -9
  72. package/dist/types/FormView/index.d.ts +0 -4
  73. package/dist/types/FormView/templates/ArrayFieldTemplate/ArrayFieldTemplate.d.ts +1 -1
  74. package/dist/types/FormView/templates/FieldTemplate/FieldTemplate.d.ts +1 -1
  75. package/dist/types/FormView/templates/ObjectFieldTemplate/ObjectFieldTemplate.d.ts +1 -1
  76. package/dist/types/FormView/templates/index.d.ts +7 -5
  77. package/dist/types/common/index.d.ts +3 -0
  78. package/dist/types/common/types/Field.d.ts +1 -1
  79. package/dist/types/common/types/Templates.d.ts +20 -0
  80. package/dist/types/common/types/index.d.ts +1 -0
  81. package/dist/types/index.d.ts +4 -2
  82. package/dist/types/utils/getTypes.d.ts +1 -1
  83. package/package.json +18 -7
  84. package/dist/cjs/Form/templates/CollapsibleObjectFieldTemplate/types.js +0 -2
  85. package/dist/cjs/Form/templates/FieldTemplate/types.js +0 -2
  86. package/dist/cjs/Form/templates/ObjectFieldTemplate/types.js +0 -2
  87. package/dist/cjs/FormView/templates/ArrayFieldTemplate/types.js +0 -2
  88. package/dist/cjs/FormView/templates/CollapsibleObjectFieldTemplate/CollapsibleObjectFieldTemplate.js +0 -5
  89. package/dist/cjs/FormView/templates/CollapsibleObjectFieldTemplate/index.js +0 -37
  90. package/dist/cjs/FormView/templates/FieldTemplate/types.js +0 -2
  91. package/dist/cjs/FormView/templates/ObjectFieldTemplate/types.js +0 -2
  92. package/dist/esm/Form/templates/CollapsibleObjectFieldTemplate/types.js +0 -1
  93. package/dist/esm/Form/templates/FieldTemplate/types.js +0 -1
  94. package/dist/esm/Form/templates/ObjectFieldTemplate/types.js +0 -1
  95. package/dist/esm/FormView/templates/ArrayFieldTemplate/types.js +0 -1
  96. package/dist/esm/FormView/templates/CollapsibleObjectFieldTemplate/CollapsibleObjectFieldTemplate.js +0 -2
  97. package/dist/esm/FormView/templates/CollapsibleObjectFieldTemplate/index.js +0 -1
  98. package/dist/esm/FormView/templates/FieldTemplate/types.js +0 -1
  99. package/dist/esm/FormView/templates/ObjectFieldTemplate/types.js +0 -1
  100. package/dist/types/Form/templates/ArrayFieldTemplate/types.d.ts +0 -7
  101. package/dist/types/Form/templates/CollapsibleObjectFieldTemplate/types.d.ts +0 -9
  102. package/dist/types/Form/templates/FieldTemplate/types.d.ts +0 -7
  103. package/dist/types/Form/templates/ObjectFieldTemplate/types.d.ts +0 -8
  104. package/dist/types/FormView/templates/ArrayFieldTemplate/types.d.ts +0 -7
  105. package/dist/types/FormView/templates/CollapsibleObjectFieldTemplate/CollapsibleObjectFieldTemplate.d.ts +0 -1
  106. package/dist/types/FormView/templates/CollapsibleObjectFieldTemplate/index.d.ts +0 -1
  107. package/dist/types/FormView/templates/FieldTemplate/types.d.ts +0 -7
  108. package/dist/types/FormView/templates/ObjectFieldTemplate/types.d.ts +0 -8
  109. /package/dist/cjs/{Form/templates/ArrayFieldTemplate/types.js → common/types/Templates.js} +0 -0
  110. /package/dist/esm/{Form/templates/ArrayFieldTemplate/types.js → common/types/Templates.js} +0 -0
package/README.md CHANGED
@@ -630,7 +630,7 @@ const collapsibleSchema: Schema = {
630
630
  };
631
631
 
632
632
  const collapsibleUiSchema: UiSchema = {
633
- colObject: { "ui:props": { isCollapsible: true } },
633
+ colObject: { "ui:options": { isCollapsible: true } },
634
634
  };
635
635
  ```
636
636
 
@@ -32,7 +32,7 @@ const moveInArray = (values, index, direction) => {
32
32
  }
33
33
  };
34
34
  const ArrayField = (props) => {
35
- const { fields: { SchemaField }, templates: { ArrayFieldTemplate, FieldTemplate }, components: { SelectFieldInput, ArrayFieldItem, ArrayFieldItemButtons, ArrayFieldList, ArrayFieldAddButton, ArrayFieldRemoveButton, ArrayFieldUpButton, ArrayFieldDownButton, }, useItemsAsAdditionalItems, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
35
+ const { fields: { SchemaField }, templates, components: { SelectFieldInput, ArrayFieldItem, ArrayFieldItemButtons, ArrayFieldList, ArrayFieldAddButton, ArrayFieldRemoveButton, ArrayFieldUpButton, ArrayFieldDownButton, }, useItemsAsAdditionalItems, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
36
36
  (0, hooks_1.useSetDefault)(props);
37
37
  const { name, schema, uiSchema } = props;
38
38
  const { type, props: inputProps } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
@@ -99,9 +99,11 @@ const ArrayField = (props) => {
99
99
  const { disabled } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
100
100
  const valueArray = Array.isArray(value) ? value : undefined;
101
101
  const preventManipulation = disabled || schema.readOnly;
102
- return schema.anyOf !== undefined ? ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, "data-fjsf-array": name, children: (0, jsx_runtime_1.jsx)(SelectFieldInput, { type,
102
+ const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
103
+ const SelectedArrayFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.ArrayFieldTemplate;
104
+ return schema.anyOf !== undefined ? ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, "data-fjsf-array": name, children: (0, jsx_runtime_1.jsx)(SelectFieldInput, { type,
103
105
  readOnly: schema.readOnly,
104
- ...inputProps, name: name, formikAs: "select", multiple: enums?.type === utils_1.EnumsTypes.MULTI_SELECT, children: enums?.values.map((option, index) => ((0, jsx_runtime_1.jsx)("option", { value: option.const, children: option.title }, index))) }) })) : ((0, jsx_runtime_1.jsxs)(ArrayFieldTemplate, { ...props, "data-fjsf-array": name, children: [(0, jsx_runtime_1.jsxs)(ArrayFieldList, { children: [(items || []).map((itemSchema, index) => ((0, jsx_runtime_1.jsx)(ArrayFieldItem, { children: (0, jsx_runtime_1.jsx)(SchemaField, { name: `${name}[${index}]`, schema: prepareChildSchema(itemSchema, schema), uiSchema: {
106
+ ...inputProps, name: name, formikAs: "select", multiple: enums?.type === utils_1.EnumsTypes.MULTI_SELECT, children: enums?.values.map((option, index) => ((0, jsx_runtime_1.jsx)("option", { value: option.const, children: option.title }, index))) }) })) : ((0, jsx_runtime_1.jsxs)(SelectedArrayFieldTemplate, { ...props, "data-fjsf-array": name, children: [(0, jsx_runtime_1.jsxs)(ArrayFieldList, { children: [(items || []).map((itemSchema, index) => ((0, jsx_runtime_1.jsx)(ArrayFieldItem, { children: (0, jsx_runtime_1.jsx)(SchemaField, { name: `${name}[${index}]`, schema: prepareChildSchema(itemSchema, schema), uiSchema: {
105
107
  disabled,
106
108
  ...(uiSchema?.[index] || uiSchema?.items),
107
109
  },
@@ -8,12 +8,13 @@ const hooks_1 = require("../../hooks");
8
8
  const FormRegistry_1 = require("../../FormRegistry");
9
9
  const utils_1 = require("../../../utils");
10
10
  const BooleanField = (props) => {
11
- const { templates: { FieldTemplate }, components: { FieldInput, BooleanFieldWrapper }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
11
+ const { templates, components: { FieldInput, BooleanFieldWrapper }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
12
12
  (0, hooks_1.useSetDefault)(props);
13
13
  const { name, uiSchema } = props;
14
14
  const { label, props: inputProps } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
15
15
  const { values, setValues } = (0, formik_1.useFormikContext)();
16
- return ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, "data-fjsf-boolean": name, children: (0, jsx_runtime_1.jsxs)(BooleanFieldWrapper, { children: [(0, jsx_runtime_1.jsx)(FieldInput, { readOnly: props.schema.readOnly, ...inputProps, name: name, type: "checkbox" }), (0, jsx_runtime_1.jsx)("span", { onClick: () => {
16
+ const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
17
+ return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, "data-fjsf-boolean": name, children: (0, jsx_runtime_1.jsxs)(BooleanFieldWrapper, { children: [(0, jsx_runtime_1.jsx)(FieldInput, { readOnly: props.schema.readOnly, ...inputProps, name: name, type: "checkbox" }), (0, jsx_runtime_1.jsx)("span", { onClick: () => {
17
18
  setValues({
18
19
  ...values,
19
20
  [name]: !values?.[name],
@@ -8,10 +8,11 @@ const hooks_1 = require("../../hooks");
8
8
  const FormRegistry_1 = require("../../FormRegistry");
9
9
  const styledComponents_1 = require("./styledComponents");
10
10
  const DateField = (props) => {
11
- const { templates: { FieldTemplate }, components: { FieldInput }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
11
+ const { templates, components: { FieldInput }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
12
12
  (0, hooks_1.useSetDefault)(props);
13
13
  const { name, uiSchema } = props;
14
14
  const { props: inputProps } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
15
- return ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, "data-fjsf-string": name, children: (0, jsx_runtime_1.jsx)(styledComponents_1.DateFieldWrapper, { children: (0, jsx_runtime_1.jsx)(FieldInput, { readOnly: props.schema.readOnly, ...inputProps, name: name, type: "date" }) }) }));
15
+ const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
16
+ return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, "data-fjsf-string": name, children: (0, jsx_runtime_1.jsx)(styledComponents_1.DateFieldWrapper, { children: (0, jsx_runtime_1.jsx)(FieldInput, { readOnly: props.schema.readOnly, ...inputProps, name: name, type: "date" }) }) }));
16
17
  };
17
18
  exports.DateField = DateField;
@@ -9,7 +9,7 @@ const FileUploadContext_1 = require("../../../common/FileUploadContext");
9
9
  const hooks_1 = require("../../hooks");
10
10
  const FormRegistry_1 = require("../../FormRegistry");
11
11
  const FileUploadField = (props) => {
12
- const { templates: { FieldTemplate }, components: { FileUploadFieldInput }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
12
+ const { templates, components: { FileUploadFieldInput }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
13
13
  (0, hooks_1.useSetDefault)(props);
14
14
  const { name, uiSchema } = props;
15
15
  const { props: inputProps } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
@@ -61,6 +61,7 @@ const FileUploadField = (props) => {
61
61
  setFieldValue(name, null);
62
62
  }
63
63
  };
64
- return ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, "data-fjsf-object": name, children: (0, jsx_runtime_1.jsx)(FileUploadFieldInput, { ...inputProps, name: name, value: value, handleRemoveFile: handleRemoveFile, uploadedFile: uploadedFile, setFieldValue: setFieldValue, handleFileUpload: handleFileUpload, uploadProgress: uploadProgress, removeButton: uiSchema["ui:removeButton"], uploadButtonText: uiSchema["ui:uploadButtonText"], infoText: uiSchema["ui:infoText"], hideRemoveButton: inputProps?.removeButton.hidden }) }));
64
+ const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
65
+ return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, "data-fjsf-object": name, children: (0, jsx_runtime_1.jsx)(FileUploadFieldInput, { ...inputProps, name: name, value: value, handleRemoveFile: handleRemoveFile, uploadedFile: uploadedFile, setFieldValue: setFieldValue, handleFileUpload: handleFileUpload, uploadProgress: uploadProgress, removeButton: uiSchema["ui:removeButton"], uploadButtonText: uiSchema["ui:uploadButtonText"], infoText: uiSchema["ui:infoText"], hideRemoveButton: inputProps?.removeButton.hidden }) }));
65
66
  };
66
67
  exports.FileUploadField = FileUploadField;
@@ -8,7 +8,7 @@ const utils_1 = require("../../../utils");
8
8
  const hooks_1 = require("../../hooks");
9
9
  const FormRegistry_1 = require("../../FormRegistry");
10
10
  const MultipleChoiceField = (props) => {
11
- const { templates: { FieldTemplate }, components: { MultipleChoiceFieldInput }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
11
+ const { templates, components: { MultipleChoiceFieldInput }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
12
12
  (0, hooks_1.useSetDefault)(props);
13
13
  const { name, uiSchema, schema } = props;
14
14
  const { props: inputProps, style } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
@@ -27,6 +27,7 @@ const MultipleChoiceField = (props) => {
27
27
  return { "data-fjsf-string": name };
28
28
  }
29
29
  })();
30
- return ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, ...fieldDataAttribute, children: (0, jsx_runtime_1.jsx)(MultipleChoiceFieldInput, { inputProps: { readOnly: props.schema.readOnly, ...inputProps }, name: name, enums: enums, style: style, value: value, form: form }) }));
30
+ const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
31
+ return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, ...fieldDataAttribute, children: (0, jsx_runtime_1.jsx)(MultipleChoiceFieldInput, { inputProps: { readOnly: props.schema.readOnly, ...inputProps }, name: name, enums: enums, style: style, value: value, form: form }) }));
31
32
  };
32
33
  exports.MultipleChoiceField = MultipleChoiceField;
@@ -5,8 +5,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const react_1 = require("react");
6
6
  const FormRegistry_1 = require("../../FormRegistry");
7
7
  const NullField = (props) => {
8
- const { templates: { FieldTemplate }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
8
+ const { templates } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
9
9
  const { name, uiSchema } = props;
10
- return (0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, "data-fjsf-null": name });
10
+ const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
11
+ return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, "data-fjsf-null": name }));
11
12
  };
12
13
  exports.NullField = NullField;
@@ -17,7 +17,7 @@ const useObjectField = (name) => {
17
17
  return { value, setValue };
18
18
  };
19
19
  const ObjectField = (props) => {
20
- const { fields: { SchemaField }, templates: { ObjectFieldTemplate, CollapsibleObjectFieldTemplate }, components: { ObjectFieldItem, ObjectFieldItemButtons, ObjectFieldButton, ObjectFieldAddButton, ObjectFieldRemoveButton, ObjectFieldUpButton, ObjectFieldDownButton, ObjectFieldSection, }, hideUnmarkedAdditionalProperties, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
20
+ const { fields: { SchemaField }, templates, components: { ObjectFieldItem, ObjectFieldItemButtons, ObjectFieldButton, ObjectFieldAddButton, ObjectFieldRemoveButton, ObjectFieldUpButton, ObjectFieldDownButton, ObjectFieldSection, }, hideUnmarkedAdditionalProperties, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
21
21
  (0, hooks_1.useSetDefault)(props);
22
22
  const { name, schema, uiSchema } = props;
23
23
  const { value, setValue } = useObjectField(name);
@@ -35,9 +35,6 @@ const ObjectField = (props) => {
35
35
  }, [valuesToRemove]);
36
36
  const propertyKeys = (0, react_1.useMemo)(() => Object.keys(properties || {}), [properties]);
37
37
  const additionalValues = (0, react_1.useMemo)(() => Object.fromEntries(Object.entries(value || {}).filter(([key, value]) => !propertyKeys.includes(key))), [value, propertyKeys]);
38
- const FieldTemplateComponent = props.uiSchema?.["ui:options"]?.isCollapsible
39
- ? CollapsibleObjectFieldTemplate
40
- : ObjectFieldTemplate;
41
38
  const orderedProperties = (0, utils_1.orderByUiSchema)(uiSchema?.["ui:order"], Object.keys(properties || {}));
42
39
  const orderedAddProperties = (0, utils_1.orderByUiSchema)(uiSchema?.["ui:order"], Object.keys(additionalValues || {}));
43
40
  const additionalPropertiesInOrder = (0, utils_1.orderAdditionalProperties)(orderedAddProperties, Object.keys(additionalValues || {}));
@@ -55,7 +52,11 @@ const ObjectField = (props) => {
55
52
  return ((0, jsx_runtime_1.jsx)(ObjectFieldButton, { ...(uiSchema?.["ui:customButtonOptions"]?.props ?? {}), onClick: onClick, children: uiSchema?.["ui:customButtonOptions"]?.content ?? "" }));
56
53
  }
57
54
  };
58
- return ((0, jsx_runtime_1.jsxs)(FieldTemplateComponent, { ...props, "data-fjsf-object": name, children: [orderedProperties
55
+ const SelectedObjectFieldTemplate = templates[props.uiSchema?.["ui:template"]] ??
56
+ (props.uiSchema?.["ui:options"]?.isCollapsible
57
+ ? templates.CollapsibleObjectFieldTemplate
58
+ : templates.ObjectFieldTemplate);
59
+ return ((0, jsx_runtime_1.jsxs)(SelectedObjectFieldTemplate, { ...props, "data-fjsf-object": name, children: [orderedProperties
59
60
  .map((child) => {
60
61
  if (typeof child === "string") {
61
62
  const childSchema = properties?.[child];
@@ -7,10 +7,11 @@ const utils_1 = require("../../../utils");
7
7
  const hooks_1 = require("../../hooks");
8
8
  const FormRegistry_1 = require("../../FormRegistry");
9
9
  const RadioField = (props) => {
10
- const { templates: { FieldTemplate }, components: { RadioFieldInput }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
10
+ const { templates, components: { RadioFieldInput }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
11
11
  (0, hooks_1.useSetDefault)(props);
12
12
  const { name, uiSchema } = props;
13
13
  const { label, props: inputProps } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
14
- return ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, "data-fjsf-boolean": name, children: (0, jsx_runtime_1.jsx)(RadioFieldInput, { inputProps: { readOnly: props.schema.readOnly, ...inputProps }, label: label, name: name }) }));
14
+ const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
15
+ return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, "data-fjsf-boolean": name, children: (0, jsx_runtime_1.jsx)(RadioFieldInput, { inputProps: { readOnly: props.schema.readOnly, ...inputProps }, label: label, name: name }) }));
15
16
  };
16
17
  exports.RadioField = RadioField;
@@ -7,11 +7,12 @@ const utils_1 = require("../../../utils");
7
7
  const hooks_1 = require("../../hooks");
8
8
  const FormRegistry_1 = require("../../FormRegistry");
9
9
  const SearchableMultiTagSelectField = (props) => {
10
- const { templates: { FieldTemplate }, components: { SearchableMultiTagSelectFieldInput }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
10
+ const { templates, components: { SearchableMultiTagSelectFieldInput }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
11
11
  (0, hooks_1.useSetDefault)(props);
12
12
  const { name, uiSchema } = props;
13
13
  const { placeholder, emptySearchMessage, props: inputProps, } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
14
14
  const enums = (0, react_1.useMemo)(() => (0, utils_1.getEnums)(props), [props]);
15
- return ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, "data-fjsf-array": name, children: (0, jsx_runtime_1.jsx)(SearchableMultiTagSelectFieldInput, { ...inputProps, name: name, placeholder: placeholder, emptySearchMessage: emptySearchMessage, enums: enums }) }));
15
+ const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
16
+ return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, "data-fjsf-array": name, children: (0, jsx_runtime_1.jsx)(SearchableMultiTagSelectFieldInput, { ...inputProps, name: name, placeholder: placeholder, emptySearchMessage: emptySearchMessage, enums: enums }) }));
16
17
  };
17
18
  exports.SearchableMultiTagSelectField = SearchableMultiTagSelectField;
@@ -8,7 +8,7 @@ const utils_1 = require("../../../utils");
8
8
  const hooks_1 = require("../../hooks");
9
9
  const FormRegistry_1 = require("../../FormRegistry");
10
10
  const SearchableSelectField = (props) => {
11
- const { templates: { FieldTemplate }, components: { SearchableSelectFieldContainer, SearchableSelectFieldDropdownContainer, SearchableSelectFieldListOption, SearchableSelectFieldListExpand, SearchableSelectFieldNotFound, SearchableSelectFieldInputElement, SearchableSelectFieldClearButton, SearchableSelectFieldInputContainer, }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
11
+ const { templates, components: { SearchableSelectFieldContainer, SearchableSelectFieldDropdownContainer, SearchableSelectFieldListOption, SearchableSelectFieldListExpand, SearchableSelectFieldNotFound, SearchableSelectFieldInputElement, SearchableSelectFieldClearButton, SearchableSelectFieldInputContainer, }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
12
12
  (0, hooks_1.useSetDefault)(props);
13
13
  const ListOption = (props) => {
14
14
  const { isActive, children, ...rest } = props;
@@ -119,7 +119,8 @@ const SearchableSelectField = (props) => {
119
119
  const fieldDataAttribute = schema.type === "string"
120
120
  ? { "data-fjsf-string": name }
121
121
  : { "data-fjsf-number": name };
122
- return ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, ...fieldDataAttribute, children: (0, jsx_runtime_1.jsxs)(SearchableSelectFieldContainer, { ref: containerRef, onBlur: handleBlur, children: [(0, jsx_runtime_1.jsxs)(SearchableSelectFieldInputContainer, { children: [(0, jsx_runtime_1.jsx)(SearchableSelectFieldInputElement, { ...inputProps, name: name, type: "text", placeholder: placeholder, value: searchTerm, onChange: handleSearchChange, onFocus: handleFocus }), searchTerm && !hideClearButton && ((0, jsx_runtime_1.jsx)(SearchableSelectFieldClearButton, { onClick: handleClear, children: clearButtonText ?? "✕" }))] }), showOptions && ((0, jsx_runtime_1.jsxs)(SearchableSelectFieldDropdownContainer, { role: "dropdown-list",
122
+ const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
123
+ return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, ...fieldDataAttribute, children: (0, jsx_runtime_1.jsxs)(SearchableSelectFieldContainer, { ref: containerRef, onBlur: handleBlur, children: [(0, jsx_runtime_1.jsxs)(SearchableSelectFieldInputContainer, { children: [(0, jsx_runtime_1.jsx)(SearchableSelectFieldInputElement, { ...inputProps, name: name, type: "text", placeholder: placeholder, value: searchTerm, onChange: handleSearchChange, onFocus: handleFocus }), searchTerm && !hideClearButton && ((0, jsx_runtime_1.jsx)(SearchableSelectFieldClearButton, { onClick: handleClear, children: clearButtonText ?? "✕" }))] }), showOptions && ((0, jsx_runtime_1.jsxs)(SearchableSelectFieldDropdownContainer, { role: "dropdown-list",
123
124
  //ref={moreRef} //TODO
124
125
  style: {
125
126
  maxHeight: dropdownOptions.height,
@@ -9,7 +9,7 @@ const FormRegistry_1 = require("../../FormRegistry");
9
9
  const hooks_1 = require("../../hooks");
10
10
  const styledComponents_1 = require("./styledComponents");
11
11
  const StringField = (props) => {
12
- const { templates: { FieldTemplate }, components: { FieldInput, SelectFieldInput }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
12
+ const { templates, components: { FieldInput, SelectFieldInput }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
13
13
  (0, hooks_1.useSetDefault)(props);
14
14
  const { name, uiSchema = {}, schema } = props;
15
15
  const { type, placeholder, props: inputProps, } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
@@ -18,9 +18,10 @@ const StringField = (props) => {
18
18
  const fieldDataAttribute = schema.type === "string"
19
19
  ? { "data-fjsf-string": name }
20
20
  : { "data-fjsf-number": name };
21
+ const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
21
22
  switch (enums?.type) {
22
23
  case "select":
23
- return ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, ...fieldDataAttribute, children: (0, jsx_runtime_1.jsx)(styledComponents_1.StringFieldWrapper, { children: (0, jsx_runtime_1.jsxs)(SelectFieldInput, { type,
24
+ return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, ...fieldDataAttribute, children: (0, jsx_runtime_1.jsx)(styledComponents_1.StringFieldWrapper, { children: (0, jsx_runtime_1.jsxs)(SelectFieldInput, { type,
24
25
  readOnly: props.schema.readOnly,
25
26
  ...inputProps, name: name, formikAs: "select", onChange: (e) => {
26
27
  const selectedOption = enums?.values.find((option) => option.const.toString() === e.target.value);
@@ -32,7 +33,7 @@ const StringField = (props) => {
32
33
  hidden: true,
33
34
  ...uiSchema["ui:placeholderOptionOptions"]?.props, children: placeholder }), enums?.values.map((option, index) => ((0, jsx_runtime_1.jsx)("option", { value: option.const.toString(), children: option.title }, index)))] }) }) }));
34
35
  default:
35
- return ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, ...fieldDataAttribute, children: (0, jsx_runtime_1.jsx)(styledComponents_1.StringFieldWrapper, { children: (0, jsx_runtime_1.jsx)(FieldInput, { type,
36
+ return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, ...fieldDataAttribute, children: (0, jsx_runtime_1.jsx)(styledComponents_1.StringFieldWrapper, { children: (0, jsx_runtime_1.jsx)(FieldInput, { type,
36
37
  placeholder,
37
38
  readOnly: props.schema.readOnly,
38
39
  ...inputProps, name: name }) }) }));
@@ -7,10 +7,11 @@ const utils_1 = require("../../../utils");
7
7
  const FormRegistry_1 = require("../../FormRegistry");
8
8
  const hooks_1 = require("../../hooks");
9
9
  const TextAreaField = (props) => {
10
- const { templates: { FieldTemplate }, components: { TextAreaFieldInput }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
10
+ const { templates, components: { TextAreaFieldInput }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
11
11
  (0, hooks_1.useSetDefault)(props);
12
12
  const { name, uiSchema } = props;
13
13
  const { props: inputProps } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
14
- return ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, "data-fjsf-string": name, children: (0, jsx_runtime_1.jsx)(TextAreaFieldInput, { readOnly: props.schema.readOnly, ...inputProps, name: name, formikAs: "textarea" }) }));
14
+ const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
15
+ return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, "data-fjsf-string": name, children: (0, jsx_runtime_1.jsx)(TextAreaFieldInput, { readOnly: props.schema.readOnly, ...inputProps, name: name, formikAs: "textarea" }) }));
15
16
  };
16
17
  exports.TextAreaField = TextAreaField;
@@ -7,10 +7,11 @@ const utils_1 = require("../../../utils");
7
7
  const hooks_1 = require("../../hooks");
8
8
  const FormRegistry_1 = require("../../FormRegistry");
9
9
  const ToggleField = (props) => {
10
- const { templates: { FieldTemplate }, components: { ToggleFieldInput }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
10
+ const { templates, components: { ToggleFieldInput }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
11
11
  (0, hooks_1.useSetDefault)(props);
12
12
  const { name, uiSchema } = props;
13
13
  const { props: inputProps } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
14
- return ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, "data-fjsf-boolean": name, children: (0, jsx_runtime_1.jsx)(ToggleFieldInput, { inputProps: { readOnly: props.schema.readOnly, ...inputProps }, name: name }) }));
14
+ const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
15
+ return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, "data-fjsf-boolean": name, children: (0, jsx_runtime_1.jsx)(ToggleFieldInput, { inputProps: { readOnly: props.schema.readOnly, ...inputProps }, name: name }) }));
15
16
  };
16
17
  exports.ToggleField = ToggleField;
@@ -34,7 +34,6 @@ var __importStar = (this && this.__importStar) || (function () {
34
34
  })();
35
35
  Object.defineProperty(exports, "__esModule", { value: true });
36
36
  exports.fields = exports.fieldComponents = void 0;
37
- //Please keep this in alphabetical order
38
37
  const AnyField = __importStar(require("./AnyField"));
39
38
  const ArrayField = __importStar(require("./ArrayField"));
40
39
  const BooleanField = __importStar(require("./BooleanField"));
@@ -15,10 +15,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
15
15
  };
16
16
  Object.defineProperty(exports, "__esModule", { value: true });
17
17
  exports.FormTemplates = exports.FormFields = exports.FormComponents = void 0;
18
- __exportStar(require("../utils"), exports);
19
- __exportStar(require("../common/types"), exports);
20
- __exportStar(require("../common/constants"), exports);
21
- __exportStar(require("../common/FileUploadContext"), exports);
22
18
  __exportStar(require("./hooks"), exports);
23
19
  const fields_1 = require("./fields");
24
20
  Object.defineProperty(exports, "FormFields", { enumerable: true, get: function () { return fields_1.fields; } });
@@ -8,7 +8,7 @@ const FormRegistry_1 = require("../../FormRegistry");
8
8
  const styledComponents_1 = require("./styledComponents");
9
9
  const CollapsibleObjectFieldTemplate = (props) => {
10
10
  const { components } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
11
- const { Toggle, ChildWrapper, RequiredIndicator, Icon, Description, Title, Wrapper, Help, Info, } = (0, styledComponents_1.getComponents)(components);
11
+ const { Toggle, ChildrenWrapper, RequiredIndicator, Icon, Description, Title, Wrapper, Help, Info, } = (0, styledComponents_1.getComponents)(components);
12
12
  const { children, name, uiSchema, ...otherProps } = props;
13
13
  const title = (0, utils_1.getTitle)(props);
14
14
  const description = (0, utils_1.getDescription)(props);
@@ -29,6 +29,6 @@ const CollapsibleObjectFieldTemplate = (props) => {
29
29
  };
30
30
  const [collapsed, setCollapsed] = (0, react_1.useState)(isCollapsedOnLoad);
31
31
  const hide = collapsed;
32
- return ((0, jsx_runtime_1.jsxs)(Wrapper, { ...mergedWrapperProps, children: [title && ((0, jsx_runtime_1.jsx)(Toggle, { onClick: () => setCollapsed(!collapsed), ariaExpanded: !hide, ariaLabel: ariaLabel ?? name, children: (0, jsx_runtime_1.jsxs)(Title, { style: { display: "flex", alignItems: "center" }, ...titleProps, children: [title, props?.required && (0, jsx_runtime_1.jsx)(RequiredIndicator, {}), (0, jsx_runtime_1.jsx)(Icon, { children: hide ? collapsedIcon ?? "▸" : openIcon ?? "▾" })] }) })), info && (0, jsx_runtime_1.jsx)(Info, { ...info }), description && ((0, jsx_runtime_1.jsx)(Description, { ...descriptionProps, children: description })), !hide && (0, jsx_runtime_1.jsx)(Wrapper, { children: children }), help && (0, jsx_runtime_1.jsx)(Help, { ...helpProps, children: help })] }));
32
+ return ((0, jsx_runtime_1.jsxs)(Wrapper, { ...mergedWrapperProps, children: [title && ((0, jsx_runtime_1.jsx)(Toggle, { onClick: () => setCollapsed(!collapsed), ariaExpanded: !hide, ariaLabel: ariaLabel ?? name, children: (0, jsx_runtime_1.jsxs)(Title, { style: { display: "flex", alignItems: "center" }, ...titleProps, children: [title, props?.required && (0, jsx_runtime_1.jsx)(RequiredIndicator, {}), (0, jsx_runtime_1.jsx)(Icon, { children: hide ? collapsedIcon ?? "▸" : openIcon ?? "▾" })] }) })), info && (0, jsx_runtime_1.jsx)(Info, { ...info }), description && ((0, jsx_runtime_1.jsx)(Description, { ...descriptionProps, children: description })), !hide && (0, jsx_runtime_1.jsx)(ChildrenWrapper, { children: children }), help && (0, jsx_runtime_1.jsx)(Help, { ...helpProps, children: help })] }));
33
33
  };
34
34
  exports.CollapsibleObjectFieldTemplate = CollapsibleObjectFieldTemplate;
@@ -41,6 +41,7 @@ function getComponents(components) {
41
41
  components.ObjectFieldTemplateErrorMessage ??
42
42
  components.ErrorMessage,
43
43
  Toggle: components.CollapsibleObjectFieldTemplateToggle,
44
- ChildWrapper: components.CollapsibleObjectFieldTemplateToggle,
44
+ ChildrenWrapper: components.CollapsibleObjectFieldTemplateWrapper ??
45
+ components.ObjectFieldTemplateWrapper,
45
46
  };
46
47
  }
@@ -34,7 +34,6 @@ var __importStar = (this && this.__importStar) || (function () {
34
34
  })();
35
35
  Object.defineProperty(exports, "__esModule", { value: true });
36
36
  exports.templates = exports.templateComponents = void 0;
37
- //Please keep this in alphabetical order
38
37
  const ArrayFieldTemplate = __importStar(require("./ArrayFieldTemplate"));
39
38
  const CollapsibleObjectFieldTemplate = __importStar(require("./CollapsibleObjectFieldTemplate"));
40
39
  const FieldTemplate = __importStar(require("./FieldTemplate"));
@@ -11,8 +11,8 @@ const getStyle_1 = require("../../utils/getStyle");
11
11
  exports.FieldWrapper = styled_components_1.default.div `
12
12
  color: ${(props) => props.theme.color.text.default};
13
13
  font-family: ${(props) => props.theme.typography.fontFamily.base};
14
- margin: ${(props) => `${props.theme.spacing.l} 0 `};
15
- width: clamp(20rem, 100%, 70rem);
14
+ margin: ${(props) => `0 0 ${props.theme.spacing.s} 0 `};
15
+ width: min(100%, 70rem);
16
16
  `;
17
17
  exports.FieldTitle = styled_components_1.default.label `
18
18
  break-before: avoid;
@@ -22,7 +22,6 @@ exports.FieldTitle = styled_components_1.default.label `
22
22
  font-size: ${(props) => props.theme.typography.size.base};
23
23
  font-weight: ${(props) => props.theme.typography.weight.bold};
24
24
  margin: ${(props) => `${props.theme.spacing.xs} 0`};
25
- padding-top: ${(props) => props.theme.spacing.s};
26
25
  width: 100%;
27
26
  `;
28
27
  exports.FieldDescription = styled_components_1.default.div `
@@ -39,7 +38,7 @@ exports.StringFieldValue = styled_components_1.default.div `
39
38
  break-before: avoid;
40
39
  color: ${(props) => props.theme.color.text.default};
41
40
  font-family: ${(props) => props.theme.typography.fontFamily.base};
42
- margin-bottom: ${(props) => props.theme.spacing.m};
41
+ margin-bottom: ${(props) => props.theme.spacing.l};
43
42
  max-width: 66ch;
44
43
  padding-left: ${(props) => props.theme.spacing.l};
45
44
  white-space: pre-line;
@@ -48,7 +47,7 @@ exports.TextAreaValue = styled_components_1.default.div `
48
47
  break-before: avoid;
49
48
  color: ${(props) => props.theme.color.text.default};
50
49
  font-family: ${(props) => props.theme.typography.fontFamily.base};
51
- margin-bottom: ${(props) => props.theme.spacing.m};
50
+ margin-bottom: ${(props) => props.theme.spacing.l};
52
51
  max-width: 66ch;
53
52
  padding-left: ${(props) => props.theme.spacing.l};
54
53
  white-space: pre-line;
@@ -7,7 +7,7 @@ const react_1 = require("react");
7
7
  const utils_1 = require("../../utils");
8
8
  const FormViewRegistry_1 = require("../FormViewRegistry");
9
9
  const ArrayField = (props) => {
10
- const { fields: { SchemaField }, templates: { ArrayFieldTemplate }, components: { ArrayFieldItem }, } = (0, react_1.useContext)(FormViewRegistry_1.FormViewRegistry);
10
+ const { fields: { SchemaField }, templates, components: { ArrayFieldItem }, } = (0, react_1.useContext)(FormViewRegistry_1.FormViewRegistry);
11
11
  const { name, uiSchema } = props;
12
12
  const [{ value }, _] = (0, formik_1.useField)(name);
13
13
  const findEnumInProps = props.schema.additionalItems
@@ -20,7 +20,8 @@ const ArrayField = (props) => {
20
20
  }
21
21
  return item;
22
22
  }
23
- return ((0, jsx_runtime_1.jsx)(ArrayFieldTemplate, { ...props, children: value &&
23
+ const SelectedArrayFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.ArrayFieldTemplate;
24
+ return ((0, jsx_runtime_1.jsx)(SelectedArrayFieldTemplate, { ...props, children: value &&
24
25
  value.map((item, index) => typeof item === "object" ? ((0, jsx_runtime_1.jsx)(ArrayFieldItem, { children: (0, jsx_runtime_1.jsx)(SchemaField, { name: `${name}[${index}]`, schema: typeof props.schema.additionalItems !== "boolean"
25
26
  ? props.schema.additionalItems
26
27
  : {}, uiSchema: uiSchema }) }, index)) : ((0, jsx_runtime_1.jsx)(ArrayFieldItem, { children: (0, jsx_runtime_1.jsx)("div", { "data-keyword": item, children: getValue(item) }) }, item))) }));
@@ -7,7 +7,7 @@ const formik_1 = require("formik");
7
7
  const utils_1 = require("../../utils");
8
8
  const FormViewRegistry_1 = require("../FormViewRegistry");
9
9
  const BooleanField = (props) => {
10
- const { templates: { FieldTemplate }, components: { BooleanFieldValue, BooleanFieldWrapper }, } = (0, react_1.useContext)(FormViewRegistry_1.FormViewRegistry);
10
+ const { templates, components: { BooleanFieldValue, BooleanFieldWrapper }, } = (0, react_1.useContext)(FormViewRegistry_1.FormViewRegistry);
11
11
  const { name, uiSchema } = props;
12
12
  const { label } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
13
13
  const { values } = (0, formik_1.useFormikContext)();
@@ -25,6 +25,7 @@ const BooleanField = (props) => {
25
25
  }
26
26
  return typeof label === "string" ? label : undefined;
27
27
  }
28
- return ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, children: (0, jsx_runtime_1.jsx)(BooleanFieldWrapper, { children: (0, jsx_runtime_1.jsx)(BooleanFieldValue, { name: name, value: value, label: findLabel(label) }) }) }));
28
+ const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
29
+ return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, children: (0, jsx_runtime_1.jsx)(BooleanFieldWrapper, { children: (0, jsx_runtime_1.jsx)(BooleanFieldValue, { name: name, value: value, label: findLabel(label) }) }) }));
29
30
  };
30
31
  exports.BooleanField = BooleanField;
@@ -7,7 +7,7 @@ const formik_1 = require("formik");
7
7
  const utils_1 = require("../../utils");
8
8
  const FormViewRegistry_1 = require("../FormViewRegistry");
9
9
  const MultipleChoiceField = (props) => {
10
- const { templates: { FieldTemplate }, components: { MultipleChoiceFieldValue }, } = (0, react_1.useContext)(FormViewRegistry_1.FormViewRegistry);
10
+ const { templates, components: { MultipleChoiceFieldValue }, } = (0, react_1.useContext)(FormViewRegistry_1.FormViewRegistry);
11
11
  const { name, uiSchema } = props;
12
12
  const { props: inputProps, style, onlyShowSelected, } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
13
13
  const enums = (0, react_1.useMemo)(() => (0, utils_1.getEnums)(props), [props]);
@@ -16,6 +16,7 @@ const MultipleChoiceField = (props) => {
16
16
  const selected = (0, utils_1.getSelectedEnum)(value, enums);
17
17
  const notSelected = enums?.values?.filter((v) => Array.isArray(value) && !value.includes(v));
18
18
  const hideNotSelected = onlyShowSelected === true || selected === undefined;
19
- return ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, children: (0, jsx_runtime_1.jsx)(MultipleChoiceFieldValue, { inputProps: inputProps, name: name, style: style, selected: selected, notSelected: hideNotSelected ? undefined : notSelected }) }));
19
+ const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
20
+ return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, children: (0, jsx_runtime_1.jsx)(MultipleChoiceFieldValue, { inputProps: inputProps, name: name, style: style, selected: selected, notSelected: hideNotSelected ? undefined : notSelected }) }));
20
21
  };
21
22
  exports.MultipleChoiceField = MultipleChoiceField;
@@ -5,7 +5,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const react_1 = require("react");
6
6
  const FormViewRegistry_1 = require("../FormViewRegistry");
7
7
  const NullField = (props) => {
8
- const { templates: { FieldTemplate }, } = (0, react_1.useContext)(FormViewRegistry_1.FormViewRegistry);
9
- return (0, jsx_runtime_1.jsx)(FieldTemplate, { ...props });
8
+ const { templates } = (0, react_1.useContext)(FormViewRegistry_1.FormViewRegistry);
9
+ const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
10
+ return (0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props });
10
11
  };
11
12
  exports.NullField = NullField;
@@ -15,7 +15,7 @@ const useObjectField = (name) => {
15
15
  return { value, setValue };
16
16
  };
17
17
  const ObjectField = (props) => {
18
- const { fields: { SchemaField }, components: { ObjectFieldSection }, templates: { ObjectFieldTemplate, CollapsibleObjectFieldTemplate }, } = (0, react_1.useContext)(FormViewRegistry_1.FormViewRegistry);
18
+ const { fields: { SchemaField }, components: { ObjectFieldSection }, templates, } = (0, react_1.useContext)(FormViewRegistry_1.FormViewRegistry);
19
19
  const { name, schema, uiSchema } = props;
20
20
  const { value, setValue } = useObjectField(name);
21
21
  const [{ properties }, valuesToRemove] = (0, react_1.useMemo)(() => {
@@ -30,11 +30,9 @@ const ObjectField = (props) => {
30
30
  setValue(newValue);
31
31
  }
32
32
  }, [valuesToRemove]);
33
- const FieldTemplateComponent = props.uiSchema?.["ui:options"]?.isCollapsible
34
- ? CollapsibleObjectFieldTemplate
35
- : ObjectFieldTemplate;
36
33
  const orderedProperties = (0, utils_1.orderByUiSchema)(uiSchema?.["ui:order"], Object.keys(properties || {}));
37
- return ((0, jsx_runtime_1.jsx)(FieldTemplateComponent, { ...props, children: orderedProperties
34
+ const SelectedObjectFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.ObjectFieldTemplate;
35
+ return ((0, jsx_runtime_1.jsx)(SelectedObjectFieldTemplate, { ...props, children: orderedProperties
38
36
  .map((child, index) => {
39
37
  if (typeof child === "string") {
40
38
  const childSchema = properties?.[child];
@@ -7,7 +7,7 @@ const formik_1 = require("formik");
7
7
  const utils_1 = require("../../utils");
8
8
  const FormViewRegistry_1 = require("../FormViewRegistry");
9
9
  const StringField = (props) => {
10
- const { templates: { FieldTemplate }, components: { StringFieldValue }, } = (0, react_1.useContext)(FormViewRegistry_1.FormViewRegistry);
10
+ const { templates, components: { StringFieldValue }, } = (0, react_1.useContext)(FormViewRegistry_1.FormViewRegistry);
11
11
  const { name } = props;
12
12
  const { values } = (0, formik_1.useFormikContext)();
13
13
  const enums = (0, react_1.useMemo)(() => (0, utils_1.getEnums)(props), [props]);
@@ -16,6 +16,7 @@ const StringField = (props) => {
16
16
  value =
17
17
  enums.values.find((element) => element.const === value)?.title ?? value;
18
18
  }
19
- return ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, children: (0, jsx_runtime_1.jsx)(StringFieldValue, { "data-keyword": value, children: value }) }));
19
+ const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
20
+ return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, children: (0, jsx_runtime_1.jsx)(StringFieldValue, { "data-keyword": value, children: value }) }));
20
21
  };
21
22
  exports.StringField = StringField;
@@ -6,10 +6,11 @@ const react_1 = require("react");
6
6
  const formik_1 = require("formik");
7
7
  const FormViewRegistry_1 = require("../FormViewRegistry");
8
8
  const TextAreaField = (props) => {
9
- const { templates: { FieldTemplate }, components: { TextAreaValue }, } = (0, react_1.useContext)(FormViewRegistry_1.FormViewRegistry);
9
+ const { templates, components: { TextAreaValue }, } = (0, react_1.useContext)(FormViewRegistry_1.FormViewRegistry);
10
10
  const { name, uiSchema } = props;
11
11
  const { values } = (0, formik_1.useFormikContext)();
12
12
  const value = (0, formik_1.getIn)(values, name);
13
- return ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, children: (0, jsx_runtime_1.jsx)(TextAreaValue, { children: value }) }));
13
+ const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
14
+ return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, children: (0, jsx_runtime_1.jsx)(TextAreaValue, { children: value }) }));
14
15
  };
15
16
  exports.TextAreaField = TextAreaField;
@@ -15,10 +15,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
15
15
  };
16
16
  Object.defineProperty(exports, "__esModule", { value: true });
17
17
  exports.FormViewTemplates = exports.FormViewFields = exports.FormViewComponents = void 0;
18
- __exportStar(require("../utils"), exports);
19
- __exportStar(require("../common/types"), exports);
20
- __exportStar(require("../common/constants"), exports);
21
- __exportStar(require("../common/FileUploadContext"), exports);
22
18
  const fields_1 = require("./fields");
23
19
  Object.defineProperty(exports, "FormViewFields", { enumerable: true, get: function () { return fields_1.fields; } });
24
20
  const components_1 = require("./components");
@@ -34,15 +34,12 @@ var __importStar = (this && this.__importStar) || (function () {
34
34
  })();
35
35
  Object.defineProperty(exports, "__esModule", { value: true });
36
36
  exports.templates = exports.templateComponents = void 0;
37
- //Please keep this in alphabetical order
38
37
  const ArrayFieldTemplate = __importStar(require("./ArrayFieldTemplate"));
39
38
  const FieldTemplate = __importStar(require("./FieldTemplate"));
40
39
  const ObjectFieldTemplate = __importStar(require("./ObjectFieldTemplate"));
41
- const CollapsibleObjectFieldTemplate = __importStar(require("./CollapsibleObjectFieldTemplate"));
42
40
  //Please keep this in alphabetical order
43
41
  exports.templateComponents = {
44
42
  ...ArrayFieldTemplate.components,
45
- //...CollapsibleObjectFieldTemplate.components, // In print version this should look same as the ObjectFieldTemplate
46
43
  //...FieldTemplate.components, // Field template uses generic components (should it own those?)
47
44
  ...ObjectFieldTemplate.components,
48
45
  };
@@ -51,5 +48,4 @@ exports.templates = {
51
48
  ...ArrayFieldTemplate.templates,
52
49
  ...FieldTemplate.templates,
53
50
  ...ObjectFieldTemplate.templates,
54
- ...CollapsibleObjectFieldTemplate.templates,
55
51
  };
@@ -0,0 +1,19 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ __exportStar(require("./types"), exports);
18
+ __exportStar(require("./constants"), exports);
19
+ __exportStar(require("./FileUploadContext"), exports);
@@ -17,3 +17,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
17
17
  __exportStar(require("./Field"), exports);
18
18
  __exportStar(require("./Form"), exports);
19
19
  __exportStar(require("./Schemas"), exports);
20
+ __exportStar(require("./Templates"), exports);