@nolwenture/formik-jsonschema-form 0.26.0 → 0.26.2

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 (73) hide show
  1. package/dist/Form.js +3 -3
  2. package/dist/Form.stories.js +9 -32
  3. package/dist/FormEditor.js +3 -12
  4. package/dist/FormPdf.js +3 -3
  5. package/dist/FormPdf.stories.js +7 -30
  6. package/dist/fields/AnyField.js +3 -3
  7. package/dist/fields/ArrayField.js +9 -9
  8. package/dist/fields/BooleanField.js +6 -3
  9. package/dist/fields/DateField.js +1 -1
  10. package/dist/fields/FileUploadField.js +9 -18
  11. package/dist/fields/MultipleChoiceField.js +2 -2
  12. package/dist/fields/NullField.js +1 -1
  13. package/dist/fields/NumberField.js +4 -2
  14. package/dist/fields/ObjectField.js +11 -23
  15. package/dist/fields/RadioField.js +1 -1
  16. package/dist/fields/SchemaField.js +6 -2
  17. package/dist/fields/SearchMultiTagSelectField.js +1 -1
  18. package/dist/fields/SearchableSelectField.js +19 -25
  19. package/dist/fields/StringField.js +11 -9
  20. package/dist/fields/TextAreaField.js +1 -1
  21. package/dist/fields/ToggleField.js +1 -1
  22. package/dist/fields/stories/AnyField.stories.js +22 -31
  23. package/dist/fields/stories/ArrayField.stories.js +64 -73
  24. package/dist/fields/stories/BooleanField.stories.js +6 -15
  25. package/dist/fields/stories/DateField.stories.js +4 -13
  26. package/dist/fields/stories/FileUploadField.stories.js +9 -18
  27. package/dist/fields/stories/MultipleChoiceField.stories.js +24 -33
  28. package/dist/fields/stories/NullField.stories.js +3 -12
  29. package/dist/fields/stories/NumberField.stories.js +4 -13
  30. package/dist/fields/stories/ObjectField.stories.js +11 -20
  31. package/dist/fields/stories/RadioField.stories.js +8 -17
  32. package/dist/fields/stories/SchemaField.stories.js +24 -17
  33. package/dist/fields/stories/SearchMultiTagSelectField.stories.js +8 -17
  34. package/dist/fields/stories/StringField.stories.js +17 -26
  35. package/dist/fields/stories/TextAreaField.stories.js +4 -13
  36. package/dist/fields/stories/ToggleField.stories.js +6 -15
  37. package/dist/hooks/useExtractUiSchema.js +13 -16
  38. package/dist/pdfFields/AnyField.js +3 -3
  39. package/dist/pdfFields/ArrayField.js +3 -4
  40. package/dist/pdfFields/BooleanField.js +1 -1
  41. package/dist/pdfFields/DateField.js +4 -2
  42. package/dist/pdfFields/EJSField.js +1 -2
  43. package/dist/pdfFields/MultipleChoiceField.js +2 -3
  44. package/dist/pdfFields/NullField.js +1 -1
  45. package/dist/pdfFields/NumberField.js +4 -2
  46. package/dist/pdfFields/ObjectField.js +7 -19
  47. package/dist/pdfFields/RadioField.js +7 -2
  48. package/dist/pdfFields/SchemaField.js +6 -2
  49. package/dist/pdfFields/SearchMultiTagSelectField.js +1 -1
  50. package/dist/pdfFields/SearchableSelectField.js +1 -1
  51. package/dist/pdfFields/StringField.js +2 -3
  52. package/dist/pdfFields/TextAreaField.js +1 -1
  53. package/dist/pdfFields/ToggleField.js +7 -2
  54. package/dist/pdfTemplates/ArrayFieldTemplate.js +1 -1
  55. package/dist/pdfTemplates/CollapsibleObjectFieldTemplate.js +1 -1
  56. package/dist/pdfTemplates/FieldTemplate.js +1 -1
  57. package/dist/pdfTemplates/ObjectFieldTemplate.js +1 -1
  58. package/dist/styledComponents.js +39 -59
  59. package/dist/templates/ArrayFieldTemplate.js +6 -14
  60. package/dist/templates/CollapsibleObjectFieldTemplate.js +6 -14
  61. package/dist/templates/FieldTemplate.js +6 -14
  62. package/dist/templates/ObjectFieldTemplate.js +6 -14
  63. package/dist/utils/__tests/createInitialValues.test.js +2 -11
  64. package/dist/utils/__tests/createValidationSchema.test.js +30 -35
  65. package/dist/utils/__tests/solveReferences.test.js +4 -8
  66. package/dist/utils/createInitialValues.js +9 -7
  67. package/dist/utils/createValidationSchema.js +19 -32
  68. package/dist/utils/getEnums.js +2 -2
  69. package/dist/utils/getTitleAndDescription.js +7 -9
  70. package/dist/utils/hasReferences.js +2 -2
  71. package/dist/utils/resolveSchema.js +16 -30
  72. package/dist/utils/solveReferences.js +3 -4
  73. package/package.json +9 -9
package/dist/Form.js CHANGED
@@ -34,9 +34,9 @@ export const Form = (props) => {
34
34
  const schemaDefinitions = schema.definitions;
35
35
  const uiSchemaDefinitions = uiSchema.definitions;
36
36
  const registry = {
37
- fields: Object.assign(Object.assign({}, defaultFields), fields),
38
- templates: Object.assign(Object.assign({}, defaultTemplates), templates),
39
- components: Object.assign(Object.assign({}, defaultComponents), components),
37
+ fields: { ...defaultFields, ...fields },
38
+ templates: { ...defaultTemplates, ...templates },
39
+ components: { ...defaultComponents, ...components },
40
40
  definitions: schemaDefinitions,
41
41
  uiSchemaDefinitions,
42
42
  formContext,
@@ -1,23 +1,3 @@
1
- var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
2
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3
- return new (P || (P = Promise))(function (resolve, reject) {
4
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
5
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
6
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
7
- step((generator = generator.apply(thisArg, _arguments || [])).next());
8
- });
9
- };
10
- var __rest = (this && this.__rest) || function (s, e) {
11
- var t = {};
12
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
13
- t[p] = s[p];
14
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
15
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
16
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
17
- t[p[i]] = s[p[i]];
18
- }
19
- return t;
20
- };
21
1
  import { jsx as _jsx } from "react/jsx-runtime";
22
2
  import { action } from "@storybook/addon-actions";
23
3
  import styled from "styled-components";
@@ -44,14 +24,11 @@ const meta = {
44
24
  schema: { control: { type: "object" } },
45
25
  uiSchema: { control: { type: "object" } },
46
26
  },
47
- render: (_a) => {
48
- var args = __rest(_a, []);
49
- return (_jsx(MockFileUploadProvider, { children: _jsx(Formik, { initialValues: {}, onSubmit: (values, formikHelpers) => __awaiter(void 0, void 0, void 0, function* () {
50
- action("onSubmit(_, formHelper)")(formikHelpers);
51
- action("onSubmit(values)")(values);
52
- formikHelpers.setSubmitting(false);
53
- }), children: _jsx(Form, Object.assign({}, args)) }) }));
54
- },
27
+ render: ({ ...args }) => (_jsx(MockFileUploadProvider, { children: _jsx(Formik, { initialValues: {}, onSubmit: async (values, formikHelpers) => {
28
+ action("onSubmit(_, formHelper)")(formikHelpers);
29
+ action("onSubmit(values)")(values);
30
+ formikHelpers.setSubmitting(false);
31
+ }, children: _jsx(Form, { ...args }) }) })),
55
32
  };
56
33
  export default meta;
57
34
  export const Simple = {
@@ -96,11 +73,11 @@ export const CompleteSchema = {
96
73
  },
97
74
  };
98
75
  export const StrictlyTyped = () => {
99
- return (_jsx(Formik, { initialValues: { firstName: "", lastName: "" }, onSubmit: (values, formikHelpers) => __awaiter(void 0, void 0, void 0, function* () {
76
+ return (_jsx(Formik, { initialValues: { firstName: "", lastName: "" }, onSubmit: async (values, formikHelpers) => {
100
77
  action("onSubmit(_, formHelper)")(formikHelpers);
101
78
  action("onSubmit(values)")(values);
102
79
  formikHelpers.setSubmitting(false);
103
- }), children: _jsx(Form, { schema: simpleSchema }) }));
80
+ }, children: _jsx(Form, { schema: simpleSchema }) }));
104
81
  };
105
82
  /*** CUSTOMIZATION ***/
106
83
  const CustomizedForm = styled(Form) `
@@ -122,11 +99,11 @@ const CustomizedRequiredIndicator = styled(styledComponents.RequiredIndicator) `
122
99
  color: aqua;
123
100
  `;
124
101
  export const StylesCustomized = () => {
125
- return (_jsx(Formik, { initialValues: {}, onSubmit: (values, formikHelpers) => __awaiter(void 0, void 0, void 0, function* () {
102
+ return (_jsx(Formik, { initialValues: {}, onSubmit: async (values, formikHelpers) => {
126
103
  action("onSubmit(_, formHelper)")(formikHelpers);
127
104
  action("onSubmit(values)")(values);
128
105
  formikHelpers.setSubmitting(false);
129
- }), children: _jsx(CustomizedForm, { schema: simpleSchema, uiSchema: {
106
+ }, children: _jsx(CustomizedForm, { schema: simpleSchema, uiSchema: {
130
107
  age: {
131
108
  props: {
132
109
  wrapper: {
@@ -1,12 +1,3 @@
1
- var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
2
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3
- return new (P || (P = Promise))(function (resolve, reject) {
4
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
5
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
6
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
7
- step((generator = generator.apply(thisArg, _arguments || [])).next());
8
- });
9
- };
10
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
11
2
  import { useEffect, useState } from "react";
12
3
  import { Formik } from "formik";
@@ -18,12 +9,12 @@ export const FormEditor = (props) => {
18
9
  uiSchema: {},
19
10
  });
20
11
  useEffect(() => console.log(editorGeneratedSchemas), [editorGeneratedSchemas]);
21
- return (_jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [_jsxs("div", { children: [_jsx("h1", { children: "Editor" }), _jsx(Formik, { initialValues: { schema: {}, uiSchema: {} }, onSubmit: (values, formikHelpers) => __awaiter(void 0, void 0, void 0, function* () {
12
+ return (_jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [_jsxs("div", { children: [_jsx("h1", { children: "Editor" }), _jsx(Formik, { initialValues: { schema: {}, uiSchema: {} }, onSubmit: async (values, formikHelpers) => {
22
13
  setEditorGeneratedSchemas(values);
23
14
  formikHelpers.setSubmitting(false);
24
- }), children: _jsx(Form, Object.assign({}, formEditorSchemas)) })] }), _jsxs("div", { children: [_jsx("h1", { children: "Preview" }), _jsx(Formik, { initialValues: {}, onSubmit: (values, formikHelpers) => __awaiter(void 0, void 0, void 0, function* () {
15
+ }, children: _jsx(Form, { ...formEditorSchemas }) })] }), _jsxs("div", { children: [_jsx("h1", { children: "Preview" }), _jsx(Formik, { initialValues: {}, onSubmit: async (values, formikHelpers) => {
25
16
  // action("onSubmit(_, formHelper)")(formikHelpers);
26
17
  // action("onSubmit(values)")(values);
27
18
  formikHelpers.setSubmitting(false);
28
- }), children: _jsx(Form, Object.assign({}, editorGeneratedSchemas)) })] })] }));
19
+ }, children: _jsx(Form, { ...editorGeneratedSchemas }) })] })] }));
29
20
  };
package/dist/FormPdf.js CHANGED
@@ -33,9 +33,9 @@ export const FormPdf = (props) => {
33
33
  const schemaDefinitions = schema.definitions;
34
34
  const uiSchemaDefinitions = uiSchema.definitions;
35
35
  const registry = {
36
- fields: Object.assign(Object.assign({}, defaultFields), fields),
37
- templates: Object.assign(Object.assign({}, defaultTemplates), templates),
38
- components: Object.assign(Object.assign({}, defaultComponents), components),
36
+ fields: { ...defaultFields, ...fields },
37
+ templates: { ...defaultTemplates, ...templates },
38
+ components: { ...defaultComponents, ...components },
39
39
  definitions: schemaDefinitions,
40
40
  uiSchemaDefinitions,
41
41
  formContext,
@@ -1,23 +1,3 @@
1
- var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
2
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3
- return new (P || (P = Promise))(function (resolve, reject) {
4
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
5
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
6
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
7
- step((generator = generator.apply(thisArg, _arguments || [])).next());
8
- });
9
- };
10
- var __rest = (this && this.__rest) || function (s, e) {
11
- var t = {};
12
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
13
- t[p] = s[p];
14
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
15
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
16
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
17
- t[p[i]] = s[p[i]];
18
- }
19
- return t;
20
- };
21
1
  import { jsx as _jsx } from "react/jsx-runtime";
22
2
  import { action } from "@storybook/addon-actions";
23
3
  import { Formik } from "formik";
@@ -36,14 +16,11 @@ const meta = {
36
16
  uiSchema: { control: { type: "object" } },
37
17
  values: {},
38
18
  },
39
- render: (_a) => {
40
- var args = __rest(_a, []);
41
- return (_jsx(Formik, { initialValues: args.values, onSubmit: (values, formikHelpers) => __awaiter(void 0, void 0, void 0, function* () {
42
- action("onSubmit(_, formHelper)")(formikHelpers);
43
- action("onSubmit(values)")(values);
44
- formikHelpers.setSubmitting(false);
45
- }), children: _jsx(FormPdf, Object.assign({}, args)) }));
46
- },
19
+ render: ({ ...args }) => (_jsx(Formik, { initialValues: args.values, onSubmit: async (values, formikHelpers) => {
20
+ action("onSubmit(_, formHelper)")(formikHelpers);
21
+ action("onSubmit(values)")(values);
22
+ formikHelpers.setSubmitting(false);
23
+ }, children: _jsx(FormPdf, { ...args }) })),
47
24
  };
48
25
  export default meta;
49
26
  export const SimplePdf = {
@@ -106,11 +83,11 @@ const CustomizedStringFieldPdf = styled(StringFieldPdf) `
106
83
  color: purple;
107
84
  `;
108
85
  export const StylesCustomized = () => {
109
- return (_jsx(Formik, { initialValues: { firstName: "Doro", lastName: "Heck", age: 31 }, onSubmit: (values, formikHelpers) => __awaiter(void 0, void 0, void 0, function* () {
86
+ return (_jsx(Formik, { initialValues: { firstName: "Doro", lastName: "Heck", age: 31 }, onSubmit: async (values, formikHelpers) => {
110
87
  action("onSubmit(_, formHelper)")(formikHelpers);
111
88
  action("onSubmit(values)")(values);
112
89
  formikHelpers.setSubmitting(false);
113
- }), children: _jsx(CustomizedForm, { schema: simpleSchema, uiSchema: {
90
+ }, children: _jsx(CustomizedForm, { schema: simpleSchema, uiSchema: {
114
91
  age: {
115
92
  props: {
116
93
  wrapper: {
@@ -11,11 +11,11 @@ export const AnyField = (props) => {
11
11
  const enrichedSchema = useMemo(() => {
12
12
  switch (type) {
13
13
  case "object":
14
- return Object.assign(Object.assign({}, (schema || {})), { type, additionalProperties: {} });
14
+ return { ...(schema || {}), type, additionalProperties: {} };
15
15
  case "array":
16
- return Object.assign(Object.assign({}, (schema || {})), { type, additionalItems: {} });
16
+ return { ...(schema || {}), type, additionalItems: {} };
17
17
  default:
18
- return Object.assign(Object.assign({}, (schema || {})), { type });
18
+ return { ...(schema || {}), type };
19
19
  }
20
20
  }, [type, schema]);
21
21
  return (_jsxs("div", { children: [_jsx("select", { value: type, onChange: (event) => setType(event.target.value), children: Object.keys(COMPONENT_TYPES).map((type) => (_jsx("option", { value: type, children: type }, type))) }), _jsx(SchemaField, { name: name, schema: enrichedSchema, uiSchema: uiSchema })] }));
@@ -31,7 +31,6 @@ const moveInArray = (values, index, direction) => {
31
31
  }
32
32
  };
33
33
  export const ArrayField = (props) => {
34
- var _a, _b, _c, _d;
35
34
  const { fields: { SchemaField }, templates: { ArrayFieldTemplate }, components: { ArrayFieldItem, ArrayFieldList, ArrayFieldItemButtons, ArrayFieldAddButton, ArrayFieldRemoveButton, ArrayFieldUpButton, ArrayFieldDownButton, }, useItemsAsAdditionalItems, } = useContext(FormRegistry);
36
35
  useSetDefault(props);
37
36
  const { name, schema, uiSchema } = props;
@@ -98,14 +97,15 @@ export const ArrayField = (props) => {
98
97
  // Backwards compatibility ends
99
98
  const { disabled } = useExtractUiSchema(uiSchema);
100
99
  const valueArray = Array.isArray(value) ? value : undefined;
101
- return schema.anyOf !== undefined ? (_jsx(FieldTemplate, Object.assign({}, props, { "data-fjsf-array": name, children: _jsx(FieldInput, Object.assign({ type }, inputProps, { name: name, formikAs: "select", multiple: (enums === null || enums === void 0 ? void 0 : enums.type) === "multiSelect", children: enums === null || enums === void 0 ? void 0 : enums.values.map((option, index) => (_jsx("option", { value: option.const, children: option.title }, index))) })) }))) : (_jsxs(ArrayFieldTemplate, Object.assign({}, props, { "data-fjsf-array": name, children: [_jsxs(ArrayFieldList, { children: [(items || []).map((itemSchema, index) => (_jsx(ArrayFieldItem, { children: _jsx(SchemaField, { name: `${name}[${index}]`, schema: typeof itemSchema !== "boolean" ? itemSchema : {}, uiSchema: (uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema[index]) || (uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema.items),
100
+ return schema.anyOf !== undefined ? (_jsx(FieldTemplate, { ...props, "data-fjsf-array": name, children: _jsx(FieldInput, { type,
101
+ ...inputProps, name: name, formikAs: "select", multiple: enums?.type === "multiSelect", children: enums?.values.map((option, index) => (_jsx("option", { value: option.const, children: option.title }, index))) }) })) : (_jsxs(ArrayFieldTemplate, { ...props, "data-fjsf-array": name, children: [_jsxs(ArrayFieldList, { children: [(items || []).map((itemSchema, index) => (_jsx(ArrayFieldItem, { children: _jsx(SchemaField, { name: `${name}[${index}]`, schema: typeof itemSchema !== "boolean" ? itemSchema : {}, uiSchema: uiSchema?.[index] || uiSchema?.items,
102
102
  // "true" will prevent validation for required array fields
103
103
  // since a value always exists in the array
104
- forceDefaultValue: false }) }, index))), ((valueArray === null || valueArray === void 0 ? void 0 : valueArray.slice(items.length)) || []).map((_, index) => {
105
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
106
- return (_jsxs(ArrayFieldItem, { children: [_jsx(SchemaField, { name: `${name}[${index + items.length}]`, schema: additionalItems && typeof additionalItems !== "boolean"
107
- ? additionalItems
108
- : {}, uiSchema: Object.assign({ disabled }, ((uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema[index + items.length]) || (uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema.items))) }), _jsxs(ArrayFieldItemButtons, { children: [_jsx(ArrayFieldRemoveButton, Object.assign({}, ((_b = (_a = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:removeButtonOptions"]) === null || _a === void 0 ? void 0 : _a.props) !== null && _b !== void 0 ? _b : {}), { onClick: () => setValue(removeFromArray(value, index + items.length)), children: (_d = (_c = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:removeButtonOptions"]) === null || _c === void 0 ? void 0 : _c.content) !== null && _d !== void 0 ? _d : "-" })), value.length > 1 && index > 0 && (_jsx(ArrayFieldUpButton, Object.assign({}, ((_f = (_e = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:upButtonOptions"]) === null || _e === void 0 ? void 0 : _e.props) !== null && _f !== void 0 ? _f : {}), { onClick: () => setValue(moveInArray(value, index + items.length, -1)), children: (_h = (_g = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:upButtonOptions"]) === null || _g === void 0 ? void 0 : _g.content) !== null && _h !== void 0 ? _h : "↑" }))), value.length > 1 &&
109
- index < (value === null || value === void 0 ? void 0 : value.slice(items.length).length) - 1 && (_jsx(ArrayFieldDownButton, Object.assign({}, ((_k = (_j = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:downButtonOptions"]) === null || _j === void 0 ? void 0 : _j.props) !== null && _k !== void 0 ? _k : {}), { onClick: () => setValue(moveInArray(value, index + items.length, 1)), children: (_m = (_l = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:downButtonOptions"]) === null || _l === void 0 ? void 0 : _l.content) !== null && _m !== void 0 ? _m : "↓" })))] })] }, index));
110
- })] }), additionalItems && (_jsx(ArrayFieldAddButton, Object.assign({}, ((_b = (_a = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:addButtonOptions"]) === null || _a === void 0 ? void 0 : _a.props) !== null && _b !== void 0 ? _b : {}), { onClick: () => setValue(appendArray(value)), children: (_d = (_c = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:addButtonOptions"]) === null || _c === void 0 ? void 0 : _c.content) !== null && _d !== void 0 ? _d : "+" })))] })));
104
+ forceDefaultValue: false }) }, index))), (valueArray?.slice(items.length) || []).map((_, index) => (_jsxs(ArrayFieldItem, { children: [_jsx(SchemaField, { name: `${name}[${index + items.length}]`, schema: additionalItems && typeof additionalItems !== "boolean"
105
+ ? additionalItems
106
+ : {}, uiSchema: {
107
+ disabled,
108
+ ...(uiSchema?.[index + items.length] || uiSchema?.items),
109
+ } }), _jsxs(ArrayFieldItemButtons, { children: [_jsx(ArrayFieldRemoveButton, { ...(uiSchema?.["ui:removeButtonOptions"]?.props ?? {}), onClick: () => setValue(removeFromArray(value, index + items.length)), children: uiSchema?.["ui:removeButtonOptions"]?.content ?? "-" }), value.length > 1 && index > 0 && (_jsx(ArrayFieldUpButton, { ...(uiSchema?.["ui:upButtonOptions"]?.props ?? {}), onClick: () => setValue(moveInArray(value, index + items.length, -1)), children: uiSchema?.["ui:upButtonOptions"]?.content ?? "↑" })), value.length > 1 &&
110
+ index < value?.slice(items.length).length - 1 && (_jsx(ArrayFieldDownButton, { ...(uiSchema?.["ui:downButtonOptions"]?.props ?? {}), onClick: () => setValue(moveInArray(value, index + items.length, 1)), children: uiSchema?.["ui:downButtonOptions"]?.content ?? "↓" }))] })] }, index)))] }), additionalItems && (_jsx(ArrayFieldAddButton, { ...(uiSchema?.["ui:addButtonOptions"]?.props ?? {}), onClick: () => setValue(appendArray(value)), children: uiSchema?.["ui:addButtonOptions"]?.content ?? "+" }))] }));
111
111
  };
@@ -9,7 +9,10 @@ export const BooleanField = (props) => {
9
9
  const { name, uiSchema } = props;
10
10
  const { label, props: inputProps } = useExtractUiSchema(uiSchema);
11
11
  const { values, setValues } = useFormikContext();
12
- return (_jsx(FieldTemplate, Object.assign({}, props, { "data-fjsf-boolean": name, children: _jsxs(BooleanFieldWrapper, { children: [_jsx(FieldInput, Object.assign({}, inputProps, { name: name, type: "checkbox" })), _jsx("span", { onClick: () => {
13
- setValues(Object.assign(Object.assign({}, values), { [name]: !(values === null || values === void 0 ? void 0 : values[name]) }));
14
- }, children: label })] }) })));
12
+ return (_jsx(FieldTemplate, { ...props, "data-fjsf-boolean": name, children: _jsxs(BooleanFieldWrapper, { children: [_jsx(FieldInput, { ...inputProps, name: name, type: "checkbox" }), _jsx("span", { onClick: () => {
13
+ setValues({
14
+ ...values,
15
+ [name]: !values?.[name],
16
+ });
17
+ }, children: label })] }) }));
15
18
  };
@@ -7,5 +7,5 @@ export const DateField = (props) => {
7
7
  useSetDefault(props);
8
8
  const { name, uiSchema } = props;
9
9
  const { props: inputProps } = useExtractUiSchema(uiSchema);
10
- return (_jsx(FieldTemplate, Object.assign({}, props, { "data-fjsf-string": name, children: _jsx(FieldInput, Object.assign({}, inputProps, { name: name, type: "date" })) })));
10
+ return (_jsx(FieldTemplate, { ...props, "data-fjsf-string": name, children: _jsx(FieldInput, { ...inputProps, name: name, type: "date" }) }));
11
11
  };
@@ -1,12 +1,3 @@
1
- var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
2
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3
- return new (P || (P = Promise))(function (resolve, reject) {
4
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
5
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
6
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
7
- step((generator = generator.apply(thisArg, _arguments || [])).next());
8
- });
9
- };
10
1
  import { jsx as _jsx } from "react/jsx-runtime";
11
2
  import { useContext, useEffect, useState } from "react";
12
3
  import { FormRegistry } from "../Form";
@@ -23,10 +14,10 @@ export const FileUploadField = (props) => {
23
14
  const { uploadFile, fetchFile, removeFile } = useContext(FileUploadContext);
24
15
  const [uploadedFile, setUploadedFile] = useState(null);
25
16
  useEffect(() => {
26
- (() => __awaiter(void 0, void 0, void 0, function* () { return setUploadedFile(yield fetchFile(value)); }))();
17
+ (async () => setUploadedFile(await fetchFile(value)))();
27
18
  }, [value]);
28
19
  const [uploadProgress, setUploadProgress] = useState(0);
29
- const handleFileUpload = (file, setFieldValue) => __awaiter(void 0, void 0, void 0, function* () {
20
+ const handleFileUpload = async (file, setFieldValue) => {
30
21
  const formData = new FormData();
31
22
  formData.append("file", file);
32
23
  try {
@@ -41,7 +32,7 @@ export const FileUploadField = (props) => {
41
32
  clearInterval(interval);
42
33
  }
43
34
  }, 100);
44
- const result = yield uploadFile({
35
+ const result = await uploadFile({
45
36
  data: formData,
46
37
  onUploadProgress: (progressEvent) => {
47
38
  const totalLength = progressEvent.total;
@@ -58,13 +49,13 @@ export const FileUploadField = (props) => {
58
49
  catch (error) {
59
50
  console.error("File upload failed", error);
60
51
  }
61
- });
62
- const handleRemoveFile = (setFieldValue) => __awaiter(void 0, void 0, void 0, function* () {
63
- if (uploadedFile === null || uploadedFile === void 0 ? void 0 : uploadedFile.name) {
64
- yield removeFile(uploadedFile.name);
52
+ };
53
+ const handleRemoveFile = async (setFieldValue) => {
54
+ if (uploadedFile?.name) {
55
+ await removeFile(uploadedFile.name);
65
56
  setUploadProgress(0);
66
57
  setFieldValue(name, null);
67
58
  }
68
- });
69
- return (_jsx(FieldTemplate, Object.assign({}, props, { "data-fjsf-object": name, children: _jsx(FileUploadField, Object.assign({}, 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 === null || inputProps === void 0 ? void 0 : inputProps.removeButton.hidden })) })));
59
+ };
60
+ return (_jsx(FieldTemplate, { ...props, "data-fjsf-object": name, children: _jsx(FileUploadField, { ...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 }) }));
70
61
  };
@@ -14,7 +14,7 @@ export const MultipleChoiceField = (props) => {
14
14
  const value = getIn(values, name);
15
15
  const form = useFormikContext();
16
16
  const fieldDataAttribute = (() => {
17
- switch (schema === null || schema === void 0 ? void 0 : schema.type) {
17
+ switch (schema?.type) {
18
18
  case "array":
19
19
  return { "data-fjsf-array": name };
20
20
  case "number":
@@ -24,5 +24,5 @@ export const MultipleChoiceField = (props) => {
24
24
  return { "data-fjsf-string": name };
25
25
  }
26
26
  })();
27
- return (_jsx(FieldTemplate, Object.assign({}, props, fieldDataAttribute, { children: _jsx(MultipleChoiceField, { inputProps: inputProps, name: name, enums: enums, style: style, value: value, form: form }) })));
27
+ return (_jsx(FieldTemplate, { ...props, ...fieldDataAttribute, children: _jsx(MultipleChoiceField, { inputProps: inputProps, name: name, enums: enums, style: style, value: value, form: form }) }));
28
28
  };
@@ -4,5 +4,5 @@ import { FormRegistry } from "../Form";
4
4
  export const NullField = (props) => {
5
5
  const { templates: { FieldTemplate }, } = useContext(FormRegistry);
6
6
  const { name, uiSchema } = props;
7
- return _jsx(FieldTemplate, Object.assign({}, props, { "data-fjsf-null": name }));
7
+ return _jsx(FieldTemplate, { ...props, "data-fjsf-null": name });
8
8
  };
@@ -1,6 +1,8 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { StringField } from "./StringField";
3
3
  export const NumberField = (props) => {
4
- var _a;
5
- return (_jsx(StringField, Object.assign({}, props, { uiSchema: Object.assign(Object.assign({}, props.uiSchema), { "ui:props": Object.assign(Object.assign({}, (((_a = props.uiSchema) === null || _a === void 0 ? void 0 : _a["ui:props"]) || {})), { type: "number" }) }) })));
4
+ return (_jsx(StringField, { ...props, uiSchema: {
5
+ ...props.uiSchema,
6
+ "ui:props": { ...(props.uiSchema?.["ui:props"] || {}), type: "number" },
7
+ } }));
6
8
  };
@@ -1,14 +1,3 @@
1
- var __rest = (this && this.__rest) || function (s, e) {
2
- var t = {};
3
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
- t[p] = s[p];
5
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
- t[p[i]] = s[p[i]];
9
- }
10
- return t;
11
- };
12
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
13
2
  import { useField, useFormikContext } from "formik";
14
3
  import { useContext, useEffect, useMemo } from "react";
@@ -27,7 +16,6 @@ const useObjectField = (name) => {
27
16
  return { value, setValue };
28
17
  };
29
18
  export const ObjectField = (props) => {
30
- var _a, _b;
31
19
  const { fields: { SchemaField }, templates: { ObjectFieldTemplate, CollapsibleObjectFieldTemplate }, components: { ObjectFieldItem, ObjectFieldItemButtons }, hideUnmarkedAdditionalProperties, } = useContext(FormRegistry);
32
20
  useSetDefault(props);
33
21
  const { name, schema, uiSchema } = props;
@@ -38,7 +26,7 @@ export const ObjectField = (props) => {
38
26
  useEffect(() => {
39
27
  if (valuesToRemove.length > 0) {
40
28
  const newValue = valuesToRemove.reduce((prevValue, key) => {
41
- const _a = prevValue, _b = key, _removedProperty = _a[_b], newValue = __rest(_a, [typeof _b === "symbol" ? _b : _b + ""]);
29
+ const { [key]: _removedProperty, ...newValue } = prevValue;
42
30
  return newValue;
43
31
  }, value);
44
32
  setValue(newValue);
@@ -46,24 +34,24 @@ export const ObjectField = (props) => {
46
34
  }, [valuesToRemove]);
47
35
  const propertyKeys = useMemo(() => Object.keys(properties || {}), [properties]);
48
36
  const additionalValues = useMemo(() => Object.fromEntries(Object.entries(value || {}).filter(([key, value]) => !propertyKeys.includes(key))), [value, propertyKeys]);
49
- const FieldTemplateComponent = ((_b = (_a = props.uiSchema) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.isCollapsible)
37
+ const FieldTemplateComponent = props.uiSchema?.props?.isCollapsible
50
38
  ? CollapsibleObjectFieldTemplate
51
39
  : ObjectFieldTemplate;
52
- const orderedProperties = orderByUiSchema(uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:order"], Object.keys(properties || {}));
53
- return (_jsxs(FieldTemplateComponent, Object.assign({}, props, { "data-fjsf-object": name, children: [(orderedProperties !== null && orderedProperties !== void 0 ? orderedProperties : Object.keys(properties || {}))
40
+ const orderedProperties = orderByUiSchema(uiSchema?.["ui:order"], Object.keys(properties || {}));
41
+ return (_jsxs(FieldTemplateComponent, { ...props, "data-fjsf-object": name, children: [(orderedProperties ?? Object.keys(properties || {}))
54
42
  .map((childName) => {
55
- const childSchema = properties === null || properties === void 0 ? void 0 : properties[childName];
43
+ const childSchema = properties?.[childName];
56
44
  if (!childSchema)
57
45
  return undefined;
58
- return (_jsx(SchemaField, { required: required === null || required === void 0 ? void 0 : required.includes(childName), name: name ? [name, childName].join(".") : childName, schema: typeof childSchema !== "boolean" ? childSchema : {}, uiSchema: uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema[childName] }, childName));
46
+ return (_jsx(SchemaField, { required: required?.includes(childName), name: name ? [name, childName].join(".") : childName, schema: typeof childSchema !== "boolean" ? childSchema : {}, uiSchema: uiSchema?.[childName] }, childName));
59
47
  })
60
48
  .filter((x) => x), (!hideUnmarkedAdditionalProperties || additionalProperties) &&
61
- Object.entries(additionalValues || {}).map(([childName]) => (_jsxs(ObjectFieldItem, { children: [_jsx(SchemaField, { required: required === null || required === void 0 ? void 0 : required.includes(childName), name: name ? [name, childName].join(".") : childName, schema: typeof schema.additionalProperties !== "boolean"
49
+ Object.entries(additionalValues || {}).map(([childName]) => (_jsxs(ObjectFieldItem, { children: [_jsx(SchemaField, { required: required?.includes(childName), name: name ? [name, childName].join(".") : childName, schema: typeof schema.additionalProperties !== "boolean"
62
50
  ? schema.additionalProperties
63
- : {}, uiSchema: uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema[childName] }, childName), _jsx(ObjectFieldItemButtons, { children: getObjectFieldButton({
51
+ : {}, uiSchema: uiSchema?.[childName] }, childName), _jsx(ObjectFieldItemButtons, { children: getObjectFieldButton({
64
52
  purpose: ObjectFieldButtonPurpose.REMOVE,
65
53
  onClick: () => {
66
- const _a = value, _b = childName, _removedProperty = _a[_b], newValue = __rest(_a, [typeof _b === "symbol" ? _b : _b + ""]);
54
+ const { [childName]: _removedProperty, ...newValue } = value;
67
55
  setValue(newValue);
68
56
  },
69
57
  uiSchema: uiSchema,
@@ -73,9 +61,9 @@ export const ObjectField = (props) => {
73
61
  onClick: () => {
74
62
  const key = prompt("Give key");
75
63
  if (key) {
76
- setValue(Object.assign(Object.assign({}, value), { [key]: undefined }));
64
+ setValue({ ...value, [key]: undefined });
77
65
  }
78
66
  },
79
67
  uiSchema: uiSchema,
80
- })] })));
68
+ })] }));
81
69
  };
@@ -7,5 +7,5 @@ export const RadioField = (props) => {
7
7
  useSetDefault(props);
8
8
  const { name, uiSchema } = props;
9
9
  const { label, props: inputProps } = useExtractUiSchema(uiSchema);
10
- return (_jsx(FieldTemplate, Object.assign({}, props, { "data-fjsf-boolean": name, children: _jsx(RadioButtonField, { inputProps: inputProps, label: label, name: name }) })));
10
+ return (_jsx(FieldTemplate, { ...props, "data-fjsf-boolean": name, children: _jsx(RadioButtonField, { inputProps: inputProps, label: label, name: name }) }));
11
11
  };
@@ -26,6 +26,10 @@ export const SchemaField = (props) => {
26
26
  const { fields, definitions, uiSchemaDefinitions } = useContext(FormRegistry);
27
27
  const schemaSolvedForReferences = useMemo(() => solveReferences(schema, definitions, uiSchema, uiSchemaDefinitions), [schema, definitions]);
28
28
  const FieldComponent = useFieldComponent(schemaSolvedForReferences.schema, schemaSolvedForReferences.uiSchema, fields);
29
- const newProps = Object.assign(Object.assign({}, props), { schema: schemaSolvedForReferences.schema, uiSchema: schemaSolvedForReferences.uiSchema });
30
- return _jsx(FieldComponent, Object.assign({}, newProps));
29
+ const newProps = {
30
+ ...props,
31
+ schema: schemaSolvedForReferences.schema,
32
+ uiSchema: schemaSolvedForReferences.uiSchema,
33
+ };
34
+ return _jsx(FieldComponent, { ...newProps });
31
35
  };
@@ -10,5 +10,5 @@ export const SearchMultiTagSelectField = (props) => {
10
10
  const { name, uiSchema } = props;
11
11
  const { placeholder, emptySearchMessage, props: inputProps, } = useExtractUiSchema(uiSchema);
12
12
  const enums = useMemo(() => getEnums(props), [props]);
13
- return (_jsx(FieldTemplate, Object.assign({}, props, { "data-fjsf-array": name, children: _jsx(SearchableMultiTagSelectField, Object.assign({}, inputProps, { name: name, placeholder: placeholder, emptySearchMessage: emptySearchMessage, enums: enums })) })));
13
+ return (_jsx(FieldTemplate, { ...props, "data-fjsf-array": name, children: _jsx(SearchableMultiTagSelectField, { ...inputProps, name: name, placeholder: placeholder, emptySearchMessage: emptySearchMessage, enums: enums }) }));
14
14
  };
@@ -1,14 +1,3 @@
1
- var __rest = (this && this.__rest) || function (s, e) {
2
- var t = {};
3
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
- t[p] = s[p];
5
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
- t[p[i]] = s[p[i]];
9
- }
10
- return t;
11
- };
12
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
13
2
  import { useContext, useEffect, useMemo, useRef, useState, } from "react";
14
3
  import { useField } from "formik";
@@ -19,7 +8,7 @@ export const SearchableSelectField = (props) => {
19
8
  const { templates: { FieldTemplate }, components: { SearchableSelectContainer, SearchDropdownContainer, SearchListOption, SearchListExpand, SearchNotFound, SearchInput, SearchClearButton, SearchInputContainer, }, } = useContext(FormRegistry);
20
9
  useSetDefault(props);
21
10
  const ListOption = (props) => {
22
- const { isActive, children } = props, rest = __rest(props, ["isActive", "children"]);
11
+ const { isActive, children, ...rest } = props;
23
12
  const ref = useRef();
24
13
  useEffect(() => {
25
14
  if (isActive) {
@@ -30,16 +19,22 @@ export const SearchableSelectField = (props) => {
30
19
  });
31
20
  }
32
21
  }, [isActive]);
33
- return (_jsx(SearchListOption, Object.assign({ ref: ref }, rest, { children: children })));
22
+ return (_jsx(SearchListOption, { ref: ref, ...rest, children: children }));
34
23
  };
35
24
  const { name, uiSchema, schema, onChange, onSelect } = props;
36
25
  const { props: inputProps, placeholder, clearButtonText, expandText, notFoundMessage, hoverColors = { backgroundColor: "", color: "" }, hideClearButton = false, dropdown, } = useExtractUiSchema(uiSchema);
37
- const dropdownOptions = Object.assign({ show: false, height: "", width: "", perPage: 20 }, dropdown);
26
+ const dropdownOptions = {
27
+ show: false,
28
+ height: "",
29
+ width: "",
30
+ perPage: 20,
31
+ ...dropdown,
32
+ };
38
33
  const [{ value }, __, { setValue }] = useField(name);
39
34
  const enums = useMemo(() => getEnums(props), [props]);
40
- const options = (enums === null || enums === void 0 ? void 0 : enums.values) || [];
41
- const [showOptions, setShowOptions] = useState(dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.show);
42
- const [searchTerm, setSearchTerm] = useState(() => { var _a, _b; return (_b = (_a = options.find((option) => option.const === value)) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : ""; });
35
+ const options = enums?.values || [];
36
+ const [showOptions, setShowOptions] = useState(dropdownOptions?.show);
37
+ const [searchTerm, setSearchTerm] = useState(() => options.find((option) => option.const === value)?.title ?? "");
43
38
  const [displayedItems, setDisplayedItems] = useState([]);
44
39
  const [itemsToShow, setItemsToShow] = useState(dropdownOptions.perPage);
45
40
  const [selectedItemIndex, setSelectedItemIndex] = useState(-1);
@@ -50,7 +45,7 @@ export const SearchableSelectField = (props) => {
50
45
  };
51
46
  useEffect(() => {
52
47
  setDisplayedItems(options
53
- .filter((option) => { var _a, _b; return ((_b = (_a = option.title) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== null && _b !== void 0 ? _b : "").includes(searchTerm.toLowerCase()); })
48
+ .filter((option) => (option.title?.toLowerCase() ?? "").includes(searchTerm.toLowerCase()))
54
49
  .slice(0, itemsToShow));
55
50
  }, [itemsToShow, options, searchTerm]);
56
51
  const handleKeyPress = (event) => {
@@ -94,14 +89,13 @@ export const SearchableSelectField = (props) => {
94
89
  setItemsToShow(dropdownOptions.perPage);
95
90
  setShowOptions(true);
96
91
  setSelectedItemIndex(-1);
97
- onChange === null || onChange === void 0 ? void 0 : onChange(event);
92
+ onChange?.(event);
98
93
  };
99
94
  const handleSelect = (item) => {
100
- var _a;
101
- setSearchTerm((_a = item.title) !== null && _a !== void 0 ? _a : "");
95
+ setSearchTerm(item.title ?? "");
102
96
  setValue(item.const);
103
97
  setShowOptions(false);
104
- onSelect === null || onSelect === void 0 ? void 0 : onSelect(item.const);
98
+ onSelect?.(item.const);
105
99
  };
106
100
  const handleFocus = () => {
107
101
  setShowOptions(true);
@@ -116,13 +110,13 @@ export const SearchableSelectField = (props) => {
116
110
  setSearchTerm("");
117
111
  setValue(undefined);
118
112
  };
119
- const filteredOptions = options.filter((option) => { var _a, _b; return ((_b = (_a = option.title) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== null && _b !== void 0 ? _b : "").includes(searchTerm.toLowerCase()); });
113
+ const filteredOptions = options.filter((option) => (option.title?.toLowerCase() ?? "").includes(searchTerm.toLowerCase()));
120
114
  const showMoreOption = displayedItems.length < filteredOptions.length &&
121
115
  displayedItems.length >= dropdownOptions.perPage;
122
116
  const fieldDataAttribute = schema.type === "string"
123
117
  ? { "data-fjsf-string": name }
124
118
  : { "data-fjsf-number": name };
125
- return (_jsx(FieldTemplate, Object.assign({}, props, fieldDataAttribute, { children: _jsxs(SearchableSelectContainer, { ref: containerRef, onBlur: handleBlur, children: [_jsxs(SearchInputContainer, { children: [_jsx(SearchInput, Object.assign({}, inputProps, { name: name, type: "text", placeholder: placeholder, value: searchTerm, onChange: handleSearchChange, onFocus: handleFocus })), searchTerm && !hideClearButton && (_jsx(SearchClearButton, { onClick: handleClear, children: clearButtonText !== null && clearButtonText !== void 0 ? clearButtonText : "x" }))] }), showOptions && (_jsxs(SearchDropdownContainer, { role: "dropdown-list", ref: moreRef, style: {
119
+ return (_jsx(FieldTemplate, { ...props, ...fieldDataAttribute, children: _jsxs(SearchableSelectContainer, { ref: containerRef, onBlur: handleBlur, children: [_jsxs(SearchInputContainer, { children: [_jsx(SearchInput, { ...inputProps, name: name, type: "text", placeholder: placeholder, value: searchTerm, onChange: handleSearchChange, onFocus: handleFocus }), searchTerm && !hideClearButton && (_jsx(SearchClearButton, { onClick: handleClear, children: clearButtonText ?? "x" }))] }), showOptions && (_jsxs(SearchDropdownContainer, { role: "dropdown-list", ref: moreRef, style: {
126
120
  maxHeight: dropdownOptions.height,
127
121
  width: dropdownOptions.width,
128
122
  }, children: [displayedItems.length > 0 ? (displayedItems.map((item, index) => (_jsx(ListOption, { isActive: index === selectedItemIndex, className: index === selectedItemIndex ? "selected-item-active" : "", style: index === selectedItemIndex
@@ -130,5 +124,5 @@ export const SearchableSelectField = (props) => {
130
124
  backgroundColor: hoverColors.backgroundColor,
131
125
  color: hoverColors.color,
132
126
  }
133
- : {}, role: "filtered-list", onClick: () => handleSelect(item), onMouseDown: (e) => e.preventDefault(), children: item.title }, index)))) : (_jsx(SearchNotFound, { onMouseDown: (e) => e.preventDefault(), children: notFoundMessage !== null && notFoundMessage !== void 0 ? notFoundMessage : "No match found" })), showMoreOption && (_jsx(SearchListExpand, { ref: moreRef, onMouseDown: (e) => e.preventDefault(), onClick: loadMoreItems, children: expandText !== null && expandText !== void 0 ? expandText : "More..." }))] }))] }) })));
127
+ : {}, role: "filtered-list", onClick: () => handleSelect(item), onMouseDown: (e) => e.preventDefault(), children: item.title }, index)))) : (_jsx(SearchNotFound, { onMouseDown: (e) => e.preventDefault(), children: notFoundMessage ?? "No match found" })), showMoreOption && (_jsx(SearchListExpand, { ref: moreRef, onMouseDown: (e) => e.preventDefault(), onClick: loadMoreItems, children: expandText ?? "More..." }))] }))] }) }));
134
128
  };