@nolwenture/formik-jsonschema-form 0.26.2 → 0.26.4

package/dist/cjs/fields/ArrayField.js

@@ -0,0 +1,115 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ArrayField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const formik_1 = require("formik");
+const react_1 = require("react");
+const Form_1 = require("../Form");
+const hooks_1 = require("../hooks");
+const styledComponents_1 = require("../styledComponents");
+const templates_1 = require("../templates");
+const utils_1 = require("../utils");
+const appendArray = (values) => {
+    return values ? [...values, ""] : [""];
+};
+const removeFromArray = (values, index) => {
+    return [...values.slice(0, index), ...values.slice(index + 1)];
+};
+const moveInArray = (values, index, direction) => {
+    if (direction === -1) {
+        return [
+            ...values.slice(0, index - 1),
+            values[index],
+            values[index - 1],
+            ...values.slice(index + 1),
+        ];
+    }
+    else {
+        return [
+            ...values.slice(0, index),
+            values[index + 1],
+            values[index],
+            ...values.slice(index + 2),
+        ];
+    }
+};
+const ArrayField = (props) => {
+    const { fields: { SchemaField }, templates: { ArrayFieldTemplate }, components: { ArrayFieldItem, ArrayFieldList, ArrayFieldItemButtons, ArrayFieldAddButton, ArrayFieldRemoveButton, ArrayFieldUpButton, ArrayFieldDownButton, }, useItemsAsAdditionalItems, } = (0, react_1.useContext)(Form_1.FormRegistry);
+    (0, hooks_1.useSetDefault)(props);
+    const { name, schema, uiSchema } = props;
+    const { type, props: inputProps } = (0, hooks_1.useExtractUiSchema)(uiSchema);
+    const [{ value }, _, { setValue }] = (0, formik_1.useField)(name);
+    const { items, additionalItems, } = (0, react_1.useMemo)(() => {
+        let items = schema.items && typeof schema.items !== "boolean" ? schema.items : [];
+        if (!Array.isArray(items)) {
+            items = [items];
+        }
+        return useItemsAsAdditionalItems && !schema.additionalItems
+            ? {
+                items: [],
+                additionalItems: items.filter((item) => typeof item !== "boolean")[0],
+            }
+            : {
+                items: items.filter((item) => typeof item !== "boolean"),
+                additionalItems: typeof schema.additionalItems !== "boolean"
+                    ? schema.additionalItems
+                    : undefined,
+            };
+    }, [schema]);
+    const enums = (0, react_1.useMemo)(() => (0, utils_1.getEnums)(props), [props]);
+    //This whole mess would give backwards compatibility, but maybe we don't do it
+    // const {
+    //   items,
+    //   additionalItems,
+    // }: {
+    //   items: Schema[];
+    //   additionalItems: Schema | undefined;
+    // } = useMemo(
+    //   () =>
+    //     !schema.additionalItems
+    //       ? {
+    //           additionalItems:
+    //             typeof schema.items !== "boolean"
+    //               ? Array.isArray(schema.items)
+    //                 ? typeof schema.items[0] !== "boolean"
+    //                   ? schema.items[0]
+    //                   : undefined
+    //                 : typeof schema.items !== "boolean"
+    //                 ? schema.items
+    //                 : undefined
+    //               : undefined,
+    //           items: [],
+    //         }
+    //       : {
+    //           additionalItems:
+    //             typeof schema.additionalItems !== "boolean"
+    //               ? schema.additionalItems
+    //               : undefined,
+    //           items: schema.items
+    //             ? Array.isArray(schema.items)
+    //               ? (schema.items.filter(
+    //                   (item) => typeof item !== "boolean"
+    //                 ) as Schema[])
+    //               : typeof schema.items !== "boolean"
+    //               ? [schema.items]
+    //               : []
+    //             : [],
+    //         },
+    //   [schema]
+    // );
+    // Backwards compatibility ends
+    const { disabled } = (0, hooks_1.useExtractUiSchema)(uiSchema);
+    const valueArray = Array.isArray(value) ? value : undefined;
+    return schema.anyOf !== undefined ? ((0, jsx_runtime_1.jsx)(templates_1.FieldTemplate, { ...props, "data-fjsf-array": name, children: (0, jsx_runtime_1.jsx)(styledComponents_1.FieldInput, { type,
+            ...inputProps, name: name, formikAs: "select", multiple: enums?.type === "multiSelect", 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: typeof itemSchema !== "boolean" ? itemSchema : {}, uiSchema: uiSchema?.[index] || uiSchema?.items, 
+                            // "true" will prevent validation for required array fields
+                            // since a value always exists in the array
+                            forceDefaultValue: false }) }, index))), (valueArray?.slice(items.length) || []).map((_, index) => ((0, jsx_runtime_1.jsxs)(ArrayFieldItem, { children: [(0, jsx_runtime_1.jsx)(SchemaField, { name: `${name}[${index + items.length}]`, schema: additionalItems && typeof additionalItems !== "boolean"
+                                    ? additionalItems
+                                    : {}, uiSchema: {
+                                    disabled,
+                                    ...(uiSchema?.[index + items.length] || uiSchema?.items),
+                                } }), (0, jsx_runtime_1.jsxs)(ArrayFieldItemButtons, { children: [(0, jsx_runtime_1.jsx)(ArrayFieldRemoveButton, { ...(uiSchema?.["ui:removeButtonOptions"]?.props ?? {}), onClick: () => setValue(removeFromArray(value, index + items.length)), children: uiSchema?.["ui:removeButtonOptions"]?.content ?? "-" }), value.length > 1 && index > 0 && ((0, jsx_runtime_1.jsx)(ArrayFieldUpButton, { ...(uiSchema?.["ui:upButtonOptions"]?.props ?? {}), onClick: () => setValue(moveInArray(value, index + items.length, -1)), children: uiSchema?.["ui:upButtonOptions"]?.content ?? "↑" })), value.length > 1 &&
+                                        index < value?.slice(items.length).length - 1 && ((0, jsx_runtime_1.jsx)(ArrayFieldDownButton, { ...(uiSchema?.["ui:downButtonOptions"]?.props ?? {}), onClick: () => setValue(moveInArray(value, index + items.length, 1)), children: uiSchema?.["ui:downButtonOptions"]?.content ?? "↓" }))] })] }, index)))] }), additionalItems && ((0, jsx_runtime_1.jsx)(ArrayFieldAddButton, { ...(uiSchema?.["ui:addButtonOptions"]?.props ?? {}), onClick: () => setValue(appendArray(value)), children: uiSchema?.["ui:addButtonOptions"]?.content ?? "+" }))] }));
+};
+exports.ArrayField = ArrayField;

package/dist/cjs/fields/BooleanField.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BooleanField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Form_1 = require("../Form");
+const hooks_1 = require("../hooks");
+const formik_1 = require("formik");
+const BooleanField = (props) => {
+    const { templates: { FieldTemplate }, components: { FieldInput, BooleanFieldWrapper }, } = (0, react_1.useContext)(Form_1.FormRegistry);
+    (0, hooks_1.useSetDefault)(props);
+    const { name, uiSchema } = props;
+    const { label, props: inputProps } = (0, hooks_1.useExtractUiSchema)(uiSchema);
+    const { values, setValues } = (0, formik_1.useFormikContext)();
+    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, { ...inputProps, name: name, type: "checkbox" }), (0, jsx_runtime_1.jsx)("span", { onClick: () => {
+                        setValues({
+                            ...values,
+                            [name]: !values?.[name],
+                        });
+                    }, children: label })] }) }));
+};
+exports.BooleanField = BooleanField;

package/dist/cjs/fields/DateField.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Form_1 = require("../Form");
+const hooks_1 = require("../hooks");
+const DateField = (props) => {
+    const { templates: { FieldTemplate }, components: { FieldInput }, } = (0, react_1.useContext)(Form_1.FormRegistry);
+    (0, hooks_1.useSetDefault)(props);
+    const { name, uiSchema } = props;
+    const { props: inputProps } = (0, hooks_1.useExtractUiSchema)(uiSchema);
+    return ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, "data-fjsf-string": name, children: (0, jsx_runtime_1.jsx)(FieldInput, { ...inputProps, name: name, type: "date" }) }));
+};
+exports.DateField = DateField;

package/dist/cjs/fields/FileUploadField.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileUploadField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Form_1 = require("../Form");
+const hooks_1 = require("../hooks");
+const formik_1 = require("formik");
+const FileUploadContext_1 = require("../FileUploadContext");
+const FileUploadField = (props) => {
+    const { templates: { FieldTemplate }, components: { FileUploadField }, } = (0, react_1.useContext)(Form_1.FormRegistry);
+    (0, hooks_1.useSetDefault)(props);
+    const { name, uiSchema } = props;
+    const { props: inputProps } = (0, hooks_1.useExtractUiSchema)(uiSchema);
+    const { setFieldValue, values } = (0, formik_1.useFormikContext)();
+    const value = (0, formik_1.getIn)(values, name);
+    const { uploadFile, fetchFile, removeFile } = (0, react_1.useContext)(FileUploadContext_1.FileUploadContext);
+    const [uploadedFile, setUploadedFile] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        (async () => setUploadedFile(await fetchFile(value)))();
+    }, [value]);
+    const [uploadProgress, setUploadProgress] = (0, react_1.useState)(0);
+    const handleFileUpload = async (file, setFieldValue) => {
+        const formData = new FormData();
+        formData.append("file", file);
+        try {
+            // Simulate slower upload progress with manual updates in order to show bar at all for fast uploads
+            let fakeProgress = 0;
+            const interval = setInterval(() => {
+                fakeProgress += 10;
+                if (fakeProgress <= 100) {
+                    setUploadProgress(fakeProgress);
+                }
+                else {
+                    clearInterval(interval);
+                }
+            }, 100);
+            const result = await uploadFile({
+                data: formData,
+                onUploadProgress: (progressEvent) => {
+                    const totalLength = progressEvent.total;
+                    if (totalLength !== null && totalLength !== undefined) {
+                        const progress = Math.round((progressEvent.loaded * 100) / totalLength);
+                        if (progress === 100) {
+                            setUploadProgress(progress);
+                        }
+                    }
+                },
+            });
+            setFieldValue(name, result);
+        }
+        catch (error) {
+            console.error("File upload failed", error);
+        }
+    };
+    const handleRemoveFile = async (setFieldValue) => {
+        if (uploadedFile?.name) {
+            await removeFile(uploadedFile.name);
+            setUploadProgress(0);
+            setFieldValue(name, null);
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, "data-fjsf-object": name, children: (0, jsx_runtime_1.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 }) }));
+};
+exports.FileUploadField = FileUploadField;

package/dist/cjs/fields/MultipleChoiceField.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultipleChoiceField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Form_1 = require("../Form");
+const hooks_1 = require("../hooks");
+const getEnums_1 = require("../utils/getEnums");
+const formik_1 = require("formik");
+const MultipleChoiceField = (props) => {
+    const { templates: { FieldTemplate }, components: { MultipleChoiceField }, } = (0, react_1.useContext)(Form_1.FormRegistry);
+    (0, hooks_1.useSetDefault)(props);
+    const { name, uiSchema, schema } = props;
+    const { props: inputProps, style } = (0, hooks_1.useExtractUiSchema)(uiSchema);
+    const enums = (0, react_1.useMemo)(() => (0, getEnums_1.getEnums)(props), [props]);
+    const { values } = (0, formik_1.useFormikContext)();
+    const value = (0, formik_1.getIn)(values, name);
+    const form = (0, formik_1.useFormikContext)();
+    const fieldDataAttribute = (() => {
+        switch (schema?.type) {
+            case "array":
+                return { "data-fjsf-array": name };
+            case "number":
+                return { "data-fjsf-number": name };
+            case "string":
+            default:
+                return { "data-fjsf-string": name };
+        }
+    })();
+    return ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, ...fieldDataAttribute, children: (0, jsx_runtime_1.jsx)(MultipleChoiceField, { inputProps: inputProps, name: name, enums: enums, style: style, value: value, form: form }) }));
+};
+exports.MultipleChoiceField = MultipleChoiceField;

package/dist/cjs/fields/NullField.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NullField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Form_1 = require("../Form");
+const NullField = (props) => {
+    const { templates: { FieldTemplate }, } = (0, react_1.useContext)(Form_1.FormRegistry);
+    const { name, uiSchema } = props;
+    return (0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, "data-fjsf-null": name });
+};
+exports.NullField = NullField;

package/dist/cjs/fields/NumberField.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NumberField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const StringField_1 = require("./StringField");
+const NumberField = (props) => {
+    return ((0, jsx_runtime_1.jsx)(StringField_1.StringField, { ...props, uiSchema: {
+            ...props.uiSchema,
+            "ui:props": { ...(props.uiSchema?.["ui:props"] || {}), type: "number" },
+        } }));
+};
+exports.NumberField = NumberField;

package/dist/cjs/fields/ObjectField.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ObjectField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const formik_1 = require("formik");
+const react_1 = require("react");
+const Form_1 = require("../Form");
+const types_1 = require("../types");
+const resolveSchema_1 = require("../utils/resolveSchema");
+const hooks_1 = require("../hooks");
+const styledComponents_1 = require("../styledComponents");
+const utils_1 = require("../utils");
+const useObjectField = (name) => {
+    if (!name) {
+        const { values = {}, setValues } = (0, formik_1.useFormikContext)();
+        return { value: values, setValue: setValues };
+    }
+    const [{ value = {} }, _, { setValue }] = (0, formik_1.useField)(name);
+    return { value, setValue };
+};
+const ObjectField = (props) => {
+    const { fields: { SchemaField }, templates: { ObjectFieldTemplate, CollapsibleObjectFieldTemplate }, components: { ObjectFieldItem, ObjectFieldItemButtons }, hideUnmarkedAdditionalProperties, } = (0, react_1.useContext)(Form_1.FormRegistry);
+    (0, hooks_1.useSetDefault)(props);
+    const { name, schema, uiSchema } = props;
+    const { value, setValue } = useObjectField(name);
+    const [{ properties, additionalProperties, required }, valuesToRemove] = (0, react_1.useMemo)(() => {
+        return (0, resolveSchema_1.resolveSchema)(schema, value);
+    }, [schema, value]);
+    (0, react_1.useEffect)(() => {
+        if (valuesToRemove.length > 0) {
+            const newValue = valuesToRemove.reduce((prevValue, key) => {
+                const { [key]: _removedProperty, ...newValue } = prevValue;
+                return newValue;
+            }, value);
+            setValue(newValue);
+        }
+    }, [valuesToRemove]);
+    const propertyKeys = (0, react_1.useMemo)(() => Object.keys(properties || {}), [properties]);
+    const additionalValues = (0, react_1.useMemo)(() => Object.fromEntries(Object.entries(value || {}).filter(([key, value]) => !propertyKeys.includes(key))), [value, propertyKeys]);
+    const FieldTemplateComponent = props.uiSchema?.props?.isCollapsible
+        ? CollapsibleObjectFieldTemplate
+        : ObjectFieldTemplate;
+    const orderedProperties = (0, utils_1.orderByUiSchema)(uiSchema?.["ui:order"], Object.keys(properties || {}));
+    return ((0, jsx_runtime_1.jsxs)(FieldTemplateComponent, { ...props, "data-fjsf-object": name, children: [(orderedProperties ?? Object.keys(properties || {}))
+                .map((childName) => {
+                const childSchema = properties?.[childName];
+                if (!childSchema)
+                    return undefined;
+                return ((0, jsx_runtime_1.jsx)(SchemaField, { required: required?.includes(childName), name: name ? [name, childName].join(".") : childName, schema: typeof childSchema !== "boolean" ? childSchema : {}, uiSchema: uiSchema?.[childName] }, childName));
+            })
+                .filter((x) => x), (!hideUnmarkedAdditionalProperties || additionalProperties) &&
+                Object.entries(additionalValues || {}).map(([childName]) => ((0, jsx_runtime_1.jsxs)(ObjectFieldItem, { children: [(0, jsx_runtime_1.jsx)(SchemaField, { required: required?.includes(childName), name: name ? [name, childName].join(".") : childName, schema: typeof schema.additionalProperties !== "boolean"
+                                ? schema.additionalProperties
+                                : {}, uiSchema: uiSchema?.[childName] }, childName), (0, jsx_runtime_1.jsx)(ObjectFieldItemButtons, { children: (0, styledComponents_1.getObjectFieldButton)({
+                                purpose: types_1.ObjectFieldButtonPurpose.REMOVE,
+                                onClick: () => {
+                                    const { [childName]: _removedProperty, ...newValue } = value;
+                                    setValue(newValue);
+                                },
+                                uiSchema: uiSchema,
+                            }) })] }, childName))), additionalProperties &&
+                (0, styledComponents_1.getObjectFieldButton)({
+                    purpose: types_1.ObjectFieldButtonPurpose.ADD,
+                    onClick: () => {
+                        const key = prompt("Give key");
+                        if (key) {
+                            setValue({ ...value, [key]: undefined });
+                        }
+                    },
+                    uiSchema: uiSchema,
+                })] }));
+};
+exports.ObjectField = ObjectField;

package/dist/cjs/fields/RadioField.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Form_1 = require("../Form");
+const hooks_1 = require("../hooks");
+const RadioField = (props) => {
+    const { templates: { FieldTemplate }, components: { RadioButtonField }, } = (0, react_1.useContext)(Form_1.FormRegistry);
+    (0, hooks_1.useSetDefault)(props);
+    const { name, uiSchema } = props;
+    const { label, props: inputProps } = (0, hooks_1.useExtractUiSchema)(uiSchema);
+    return ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, "data-fjsf-boolean": name, children: (0, jsx_runtime_1.jsx)(RadioButtonField, { inputProps: inputProps, label: label, name: name }) }));
+};
+exports.RadioField = RadioField;

package/dist/cjs/fields/SchemaField.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SchemaField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const utils_1 = require("../utils");
+const hooks_1 = require("../hooks");
+const Form_1 = require("../Form");
+const types_1 = require("./types");
+const useFieldComponent = (schema, uiSchema, fields) => {
+    const { field } = (0, hooks_1.useExtractUiSchema)(uiSchema);
+    if (typeof field === "function") {
+        return field;
+    }
+    if (typeof field === "string" && field in fields) {
+        return fields[field];
+    }
+    let schemaType = (0, utils_1.getSchemaType)(schema);
+    if (Array.isArray(schemaType)) {
+        schemaType = schemaType[0];
+    }
+    const componentName = types_1.COMPONENT_TYPES[schemaType || "any"];
+    return componentName in fields
+        ? fields[componentName]
+        : fields.UnsupportedField;
+};
+const SchemaField = (props) => {
+    const { schema, uiSchema } = props;
+    const { fields, definitions, uiSchemaDefinitions } = (0, react_1.useContext)(Form_1.FormRegistry);
+    const schemaSolvedForReferences = (0, react_1.useMemo)(() => (0, utils_1.solveReferences)(schema, definitions, uiSchema, uiSchemaDefinitions), [schema, definitions]);
+    const FieldComponent = useFieldComponent(schemaSolvedForReferences.schema, schemaSolvedForReferences.uiSchema, fields);
+    const newProps = {
+        ...props,
+        schema: schemaSolvedForReferences.schema,
+        uiSchema: schemaSolvedForReferences.uiSchema,
+    };
+    return (0, jsx_runtime_1.jsx)(FieldComponent, { ...newProps });
+};
+exports.SchemaField = SchemaField;

package/dist/cjs/fields/SearchMultiTagSelectField.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchMultiTagSelectField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Form_1 = require("../Form");
+const getEnums_1 = require("../utils/getEnums");
+const hooks_1 = require("../hooks");
+const styledComponents_1 = require("../styledComponents");
+const SearchMultiTagSelectField = (props) => {
+    const { templates: { FieldTemplate }, } = (0, react_1.useContext)(Form_1.FormRegistry);
+    (0, hooks_1.useSetDefault)(props);
+    const { name, uiSchema } = props;
+    const { placeholder, emptySearchMessage, props: inputProps, } = (0, hooks_1.useExtractUiSchema)(uiSchema);
+    const enums = (0, react_1.useMemo)(() => (0, getEnums_1.getEnums)(props), [props]);
+    return ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, "data-fjsf-array": name, children: (0, jsx_runtime_1.jsx)(styledComponents_1.SearchableMultiTagSelectField, { ...inputProps, name: name, placeholder: placeholder, emptySearchMessage: emptySearchMessage, enums: enums }) }));
+};
+exports.SearchMultiTagSelectField = SearchMultiTagSelectField;

package/dist/cjs/fields/SearchableSelectField.js

@@ -0,0 +1,132 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchableSelectField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const formik_1 = require("formik");
+const Form_1 = require("../Form");
+const hooks_1 = require("../hooks");
+const utils_1 = require("../utils");
+const SearchableSelectField = (props) => {
+    const { templates: { FieldTemplate }, components: { SearchableSelectContainer, SearchDropdownContainer, SearchListOption, SearchListExpand, SearchNotFound, SearchInput, SearchClearButton, SearchInputContainer, }, } = (0, react_1.useContext)(Form_1.FormRegistry);
+    (0, hooks_1.useSetDefault)(props);
+    const ListOption = (props) => {
+        const { isActive, children, ...rest } = props;
+        const ref = (0, react_1.useRef)();
+        (0, react_1.useEffect)(() => {
+            if (isActive) {
+                ref.current.scrollIntoView({
+                    behavior: "auto",
+                    block: "center",
+                    inline: "center",
+                });
+            }
+        }, [isActive]);
+        return ((0, jsx_runtime_1.jsx)(SearchListOption, { ref: ref, ...rest, children: children }));
+    };
+    const { name, uiSchema, schema, onChange, onSelect } = props;
+    const { props: inputProps, placeholder, clearButtonText, expandText, notFoundMessage, hoverColors = { backgroundColor: "", color: "" }, hideClearButton = false, dropdown, } = (0, hooks_1.useExtractUiSchema)(uiSchema);
+    const dropdownOptions = {
+        show: false,
+        height: "",
+        width: "",
+        perPage: 20,
+        ...dropdown,
+    };
+    const [{ value }, __, { setValue }] = (0, formik_1.useField)(name);
+    const enums = (0, react_1.useMemo)(() => (0, utils_1.getEnums)(props), [props]);
+    const options = enums?.values || [];
+    const [showOptions, setShowOptions] = (0, react_1.useState)(dropdownOptions?.show);
+    const [searchTerm, setSearchTerm] = (0, react_1.useState)(() => options.find((option) => option.const === value)?.title ?? "");
+    const [displayedItems, setDisplayedItems] = (0, react_1.useState)([]);
+    const [itemsToShow, setItemsToShow] = (0, react_1.useState)(dropdownOptions.perPage);
+    const [selectedItemIndex, setSelectedItemIndex] = (0, react_1.useState)(-1);
+    const moreRef = (0, react_1.useRef)(null);
+    const containerRef = (0, react_1.useRef)(null);
+    const loadMoreItems = () => {
+        setItemsToShow((prev) => prev + dropdownOptions.perPage);
+    };
+    (0, react_1.useEffect)(() => {
+        setDisplayedItems(options
+            .filter((option) => (option.title?.toLowerCase() ?? "").includes(searchTerm.toLowerCase()))
+            .slice(0, itemsToShow));
+    }, [itemsToShow, options, searchTerm]);
+    const handleKeyPress = (event) => {
+        if (showOptions) {
+            switch (event.key) {
+                case "ArrowUp": {
+                    const calcValue = selectedItemIndex - 1;
+                    const newValue = calcValue < -1 ? -1 : calcValue;
+                    return setSelectedItemIndex(newValue);
+                }
+                case "ArrowDown": {
+                    const calcValue = selectedItemIndex + 1;
+                    const newValue = calcValue >= displayedItems.length - 1
+                        ? displayedItems.length - 1
+                        : calcValue;
+                    return setSelectedItemIndex(newValue);
+                }
+                case "Escape": {
+                    return setShowOptions(false);
+                }
+                case "Enter": {
+                    const item = displayedItems[selectedItemIndex];
+                    if (item) {
+                        return handleSelect(item);
+                    }
+                    return;
+                }
+            }
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        // attach the event listener
+        document.addEventListener("keydown", handleKeyPress);
+        // remove the event listener
+        return () => {
+            document.removeEventListener("keydown", handleKeyPress);
+        };
+    }, [handleKeyPress]);
+    const handleSearchChange = (event) => {
+        setSearchTerm(event.target.value);
+        setItemsToShow(dropdownOptions.perPage);
+        setShowOptions(true);
+        setSelectedItemIndex(-1);
+        onChange?.(event);
+    };
+    const handleSelect = (item) => {
+        setSearchTerm(item.title ?? "");
+        setValue(item.const);
+        setShowOptions(false);
+        onSelect?.(item.const);
+    };
+    const handleFocus = () => {
+        setShowOptions(true);
+    };
+    const handleBlur = (event) => {
+        if (containerRef.current &&
+            !containerRef.current.contains(event.relatedTarget)) {
+            setShowOptions(false);
+        }
+    };
+    const handleClear = () => {
+        setSearchTerm("");
+        setValue(undefined);
+    };
+    const filteredOptions = options.filter((option) => (option.title?.toLowerCase() ?? "").includes(searchTerm.toLowerCase()));
+    const showMoreOption = displayedItems.length < filteredOptions.length &&
+        displayedItems.length >= dropdownOptions.perPage;
+    const fieldDataAttribute = schema.type === "string"
+        ? { "data-fjsf-string": name }
+        : { "data-fjsf-number": name };
+    return ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, ...fieldDataAttribute, children: (0, jsx_runtime_1.jsxs)(SearchableSelectContainer, { ref: containerRef, onBlur: handleBlur, children: [(0, jsx_runtime_1.jsxs)(SearchInputContainer, { children: [(0, jsx_runtime_1.jsx)(SearchInput, { ...inputProps, name: name, type: "text", placeholder: placeholder, value: searchTerm, onChange: handleSearchChange, onFocus: handleFocus }), searchTerm && !hideClearButton && ((0, jsx_runtime_1.jsx)(SearchClearButton, { onClick: handleClear, children: clearButtonText ?? "x" }))] }), showOptions && ((0, jsx_runtime_1.jsxs)(SearchDropdownContainer, { role: "dropdown-list", ref: moreRef, style: {
+                        maxHeight: dropdownOptions.height,
+                        width: dropdownOptions.width,
+                    }, children: [displayedItems.length > 0 ? (displayedItems.map((item, index) => ((0, jsx_runtime_1.jsx)(ListOption, { isActive: index === selectedItemIndex, className: index === selectedItemIndex ? "selected-item-active" : "", style: index === selectedItemIndex
+                                ? {
+                                    backgroundColor: hoverColors.backgroundColor,
+                                    color: hoverColors.color,
+                                }
+                                : {}, role: "filtered-list", onClick: () => handleSelect(item), onMouseDown: (e) => e.preventDefault(), children: item.title }, index)))) : ((0, jsx_runtime_1.jsx)(SearchNotFound, { onMouseDown: (e) => e.preventDefault(), children: notFoundMessage ?? "No match found" })), showMoreOption && ((0, jsx_runtime_1.jsx)(SearchListExpand, { ref: moreRef, onMouseDown: (e) => e.preventDefault(), onClick: loadMoreItems, children: expandText ?? "More..." }))] }))] }) }));
+};
+exports.SearchableSelectField = SearchableSelectField;

package/dist/cjs/fields/StringField.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StringField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Form_1 = require("../Form");
+const getEnums_1 = require("../utils/getEnums");
+const hooks_1 = require("../hooks");
+const formik_1 = require("formik");
+const StringField = (props) => {
+    const { templates: { FieldTemplate }, components: { FieldInput }, } = (0, react_1.useContext)(Form_1.FormRegistry);
+    (0, hooks_1.useSetDefault)(props);
+    const { name, uiSchema = {}, schema } = props;
+    const { type, placeholder, props: inputProps } = (0, hooks_1.useExtractUiSchema)(uiSchema);
+    const enums = (0, react_1.useMemo)(() => (0, getEnums_1.getEnums)(props), [props]);
+    const form = (0, formik_1.useFormikContext)();
+    const fieldDataAttribute = schema.type === "string"
+        ? { "data-fjsf-string": name }
+        : { "data-fjsf-number": name };
+    switch (enums?.type) {
+        case "select":
+            return ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, ...fieldDataAttribute, children: (0, jsx_runtime_1.jsxs)(FieldInput, { type,
+                    ...inputProps, name: name, formikAs: "select", onChange: (e) => {
+                        const selectedOption = enums?.values.find((option) => option.const.toString() === e.target.value);
+                        const selectedValue = selectedOption
+                            ? selectedOption.const
+                            : e.target.value;
+                        form?.setFieldValue(name, selectedValue);
+                    }, children: [(0, jsx_runtime_1.jsx)("option", { value: "", disabled: false,
+                            hidden: true,
+                            ...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)))] }) }));
+        default:
+            return ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, ...fieldDataAttribute, children: (0, jsx_runtime_1.jsx)(FieldInput, { type,
+                    placeholder,
+                    ...inputProps, name: name }) }));
+    }
+};
+exports.StringField = StringField;

package/dist/cjs/fields/TextAreaField.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextAreaField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Form_1 = require("../Form");
+const hooks_1 = require("../hooks");
+const TextAreaField = (props) => {
+    const { templates: { FieldTemplate }, components: { TextAreaInputField }, } = (0, react_1.useContext)(Form_1.FormRegistry);
+    (0, hooks_1.useSetDefault)(props);
+    const { name, uiSchema } = props;
+    const { props: inputProps } = (0, hooks_1.useExtractUiSchema)(uiSchema);
+    return ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, "data-fjsf-string": name, children: (0, jsx_runtime_1.jsx)(TextAreaInputField, { inputProps: inputProps, name: name }) }));
+};
+exports.TextAreaField = TextAreaField;

package/dist/cjs/fields/ToggleField.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToggleField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Form_1 = require("../Form");
+const hooks_1 = require("../hooks");
+const ToggleField = (props) => {
+    const { templates: { FieldTemplate }, components: { ToggleSwitchField }, } = (0, react_1.useContext)(Form_1.FormRegistry);
+    (0, hooks_1.useSetDefault)(props);
+    const { name, uiSchema } = props;
+    const { props: inputProps } = (0, hooks_1.useExtractUiSchema)(uiSchema);
+    return ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, "data-fjsf-boolean": name, children: (0, jsx_runtime_1.jsx)(ToggleSwitchField, { ...inputProps, name: name }) }));
+};
+exports.ToggleField = ToggleField;