@nolwenture/formik-jsonschema-form 0.26.8 → 1.0.0-beta.2

package/dist/cjs/Form/fields/ArrayField/styledComponents.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ArrayFieldAddButton = exports.ArrayFieldRemoveButton = exports.ArrayFieldDownButton = exports.ArrayFieldUpButton = exports.ArrayFieldLineButton = exports.ArrayFieldButton = exports.ArrayFieldItemButtons = exports.ArrayFieldItem = exports.ArrayFieldList = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const styledComponents_1 = require("../ObjectField/styledComponents");
+exports.ArrayFieldList = styledComponents_1.ObjectFieldList;
+exports.ArrayFieldItem = styledComponents_1.ObjectFieldItem;
+exports.ArrayFieldItemButtons = styledComponents_1.ObjectFieldItemButtons;
+exports.ArrayFieldButton = (0, styled_components_1.default)(styledComponents_1.ObjectFieldButton) ``;
+exports.ArrayFieldLineButton = (0, styled_components_1.default)(exports.ArrayFieldButton) ``;
+exports.ArrayFieldUpButton = (0, styled_components_1.default)(exports.ArrayFieldLineButton) ``;
+exports.ArrayFieldDownButton = (0, styled_components_1.default)(exports.ArrayFieldLineButton) ``;
+exports.ArrayFieldRemoveButton = (0, styled_components_1.default)(exports.ArrayFieldLineButton) ``;
+exports.ArrayFieldAddButton = (0, styled_components_1.default)(exports.ArrayFieldButton) ``;

package/dist/cjs/{fields → Form/fields/BooleanField}/BooleanField.js

@@ -3,14 +3,15 @@ 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 hooks_1 = require("../../hooks");
+const FormRegistry_1 = require("../../FormRegistry");
+const utils_1 = require("../../../utils");
 const BooleanField = (props) => {
-    const { templates: { FieldTemplate }, components: { FieldInput, BooleanFieldWrapper }, } = (0, react_1.useContext)(Form_1.FormRegistry);
+    const { templates: { FieldTemplate }, components: { FieldInput, BooleanFieldWrapper }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
     (0, hooks_1.useSetDefault)(props);
     const { name, uiSchema } = props;
-    const { label, props: inputProps } = (0, hooks_1.useExtractUiSchema)(uiSchema);
+    const { label, props: inputProps } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [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({

package/dist/cjs/Form/fields/BooleanField/index.js

@@ -0,0 +1,28 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fields = exports.components = void 0;
+exports.components = __importStar(require("./styledComponents"));
+exports.fields = __importStar(require("./BooleanField"));

package/dist/cjs/Form/fields/BooleanField/styledComponents.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BooleanFieldWrapper = void 0;
+const styled_components_1 = require("styled-components");
+const common_1 = require("../../styles/common");
+exports.BooleanFieldWrapper = styled_components_1.styled.div `
+  align-items: center;
+  color: ${(props) => props.theme.text.default};
+  cursor: pointer;
+  display: flex;
+  font-family: ${(props) => props.theme.typography.fontFamily.base};
+  gap: ${(props) => props.theme.spacing.s};
+
+  ${common_1.commonCheckboxStyles}
+`;

package/dist/cjs/Form/fields/DateField/DateField.js

@@ -0,0 +1,17 @@
+"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 utils_1 = require("../../../utils");
+const hooks_1 = require("../../hooks");
+const FormRegistry_1 = require("../../FormRegistry");
+const styledComponents_1 = require("./styledComponents");
+const DateField = (props) => {
+    const { templates: { FieldTemplate }, components: { FieldInput }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
+    (0, hooks_1.useSetDefault)(props);
+    const { name, uiSchema } = props;
+    const { props: inputProps } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
+    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, { ...inputProps, name: name, type: "date" }) }) }));
+};
+exports.DateField = DateField;

package/dist/cjs/Form/fields/DateField/index.js

@@ -0,0 +1,28 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fields = exports.components = void 0;
+exports.components = __importStar(require("./styledComponents"));
+exports.fields = __importStar(require("./DateField"));

package/dist/cjs/Form/fields/DateField/styledComponents.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateFieldWrapper = void 0;
+const styled_components_1 = require("styled-components");
+const common_1 = require("../../styles/common");
+exports.DateFieldWrapper = styled_components_1.styled.div `
+    ${common_1.commonInputStyles}
+    ${common_1.datePickerIconStyles}
+`;

package/dist/cjs/{fields → Form/fields/FileUploadField}/FileUploadField.js

@@ -3,15 +3,16 @@ 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 utils_1 = require("../../../utils");
+const FileUploadContext_1 = require("../../../common/FileUploadContext");
+const hooks_1 = require("../../hooks");
+const FormRegistry_1 = require("../../FormRegistry");
 const FileUploadField = (props) => {
-    const { templates: { FieldTemplate }, components: { FileUploadField }, } = (0, react_1.useContext)(Form_1.FormRegistry);
+    const { templates: { FieldTemplate }, components: { FileUploadFieldInput }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
     (0, hooks_1.useSetDefault)(props);
     const { name, uiSchema } = props;
-    const { props: inputProps } = (0, hooks_1.useExtractUiSchema)(uiSchema);
+    const { props: inputProps } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [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);
@@ -60,6 +61,6 @@ const FileUploadField = (props) => {
             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 }) }));
+    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 }) }));
 };
 exports.FileUploadField = FileUploadField;

package/dist/cjs/Form/fields/FileUploadField/FileUploadFieldInput.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileUploadFieldInput = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const FormRegistry_1 = require("../../FormRegistry");
+const FileUploadFieldInput = ({ name, uploadedFile, handleFileUpload, value, setFieldValue, className, uploadProgress, handleRemoveFile, removeButton, uploadButtonText, infoText, hideRemoveButton, }) => {
+    const { components: { FileUploadFieldContainer, FileUploadFieldFileUploadButton, FileUploadFieldHiddenFileInput, FileUploadFieldFileInfoText, FileUploadFieldFileItemContainer, FileUploadFieldRemoveButton, FileUploadFieldProgressBarContainer, FileUploadFieldProgressBar, FileUploadFieldProgressText, }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
+    return ((0, jsx_runtime_1.jsxs)(FileUploadFieldContainer, { className: className, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(FileUploadFieldFileUploadButton, { type: "button", onClick: () => document.getElementById(name)?.click(), children: uploadButtonText ?? "Choose File" }), (0, jsx_runtime_1.jsx)(FileUploadFieldHiddenFileInput, { id: name, name: name, type: "file", onChange: (event) => {
+                            const file = event.currentTarget.files[0];
+                            if (file) {
+                                handleFileUpload(file, setFieldValue);
+                                event.target.value = null;
+                            }
+                        } }), !value ? ((0, jsx_runtime_1.jsx)(FileUploadFieldFileInfoText, { children: infoText ?? "No file chosen" })) : null] }), uploadedFile && value && ((0, jsx_runtime_1.jsx)(FileUploadFieldFileItemContainer, { children: uploadProgress === 100 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { children: uploadedFile.name }), !hideRemoveButton && ((0, jsx_runtime_1.jsx)(FileUploadFieldRemoveButton, { type: "button", onClick: () => handleRemoveFile(setFieldValue), ...removeButton?.props, style: {
+                                color: "red",
+                                fontWeight: "bold",
+                                ...(removeButton?.props?.style ?? {}),
+                            }, children: removeButton?.content ?? "X" }))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { children: uploadedFile.name }), (0, jsx_runtime_1.jsxs)(FileUploadFieldProgressBarContainer, { children: [(0, jsx_runtime_1.jsx)(FileUploadFieldProgressBar, { "$progress": uploadProgress }), (0, jsx_runtime_1.jsxs)(FileUploadFieldProgressText, { children: [uploadProgress, "%"] })] })] })) }))] }));
+};
+exports.FileUploadFieldInput = FileUploadFieldInput;

package/dist/cjs/Form/fields/FileUploadField/index.js

@@ -0,0 +1,31 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.components = exports.fields = void 0;
+const FileUploadFieldInput_1 = require("./FileUploadFieldInput");
+const styledComponents = __importStar(require("./styledComponents"));
+exports.fields = __importStar(require("./FileUploadField"));
+const components = { ...styledComponents, FileUploadFieldInput: FileUploadFieldInput_1.FileUploadFieldInput };
+exports.components = components;

package/dist/cjs/Form/fields/FileUploadField/styledComponents.js

@@ -0,0 +1,63 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileUploadFieldContainer = exports.FileUploadFieldFileInfoText = exports.FileUploadFieldRemoveButton = exports.FileUploadFieldFileItemContainer = exports.FileUploadFieldProgressText = exports.FileUploadFieldProgressBar = exports.FileUploadFieldProgressBarContainer = exports.FileUploadFieldHiddenFileInput = exports.FileUploadFieldFileUploadButton = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const polished_1 = require("polished");
+exports.FileUploadFieldFileUploadButton = styled_components_1.default.button `
+  background-color: ${(props) => props.theme.intent.none};
+  color: ${(props) => (0, polished_1.readableColor)(props.theme.intent.none)};
+  padding: ${(props) => `${props.theme.spacing.s} ${props.theme.spacing.xl}`};
+  border: none;
+  border-radius: ${(props) => props.theme.borderRadius.none};
+  cursor: pointer;
+  font-family: ${(props) => props.theme.typography.fontFamily.base};
+  font-size: ${(props) => props.theme.typography.size.base};
+`;
+exports.FileUploadFieldHiddenFileInput = styled_components_1.default.input `
+  display: none;
+`;
+exports.FileUploadFieldProgressBarContainer = styled_components_1.default.div `
+  width: 7.5rem;
+  height: ${(props) => props.theme.spacing.xl};
+  border-radius: ${(props) => props.theme.strokeWidth.thick};
+  background-color: ${(props) => props.theme.background.input};
+  position: relative;
+  margin-left: ${(props) => props.theme.spacing.s};
+`;
+exports.FileUploadFieldProgressBar = styled_components_1.default.div `
+  width: ${(props) => props.$progress}%;
+  height: 100%;
+  background-color: ${(props) => props.theme.neutral[500]};
+  border-radius: ${(props) => props.theme.strokeWidth.thick};
+  transition: width 0.2s ease;
+`;
+exports.FileUploadFieldProgressText = styled_components_1.default.span `
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: ${(props) => props.theme.neutral[200]};
+  font-family: ${(props) => props.theme.typography.fontFamily.base};
+  font-weight: ${(props) => props.theme.typography.weight.bold};
+`;
+exports.FileUploadFieldFileItemContainer = styled_components_1.default.div `
+  margin-bottom: ${(props) => props.theme.spacing.s};
+  display: flex;
+  align-items: center;
+`;
+exports.FileUploadFieldRemoveButton = styled_components_1.default.button `
+  margin-left: ${(props) => props.theme.spacing.s};
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+`;
+exports.FileUploadFieldFileInfoText = styled_components_1.default.span `
+  margin-left: ${(props) => props.theme.spacing.s};
+  font-family: ${(props) => props.theme.typography.fontFamily.base};
+  font-size: ${(props) => props.theme.typography.size.base};
+  color: ${(props) => props.theme.text.default};
+`;
+exports.FileUploadFieldContainer = styled_components_1.default.div ``;

package/dist/cjs/{fields → Form/fields/MultipleChoiceField}/MultipleChoiceField.js

@@ -3,16 +3,16 @@ 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 utils_1 = require("../../../utils");
+const hooks_1 = require("../../hooks");
+const FormRegistry_1 = require("../../FormRegistry");
 const MultipleChoiceField = (props) => {
-    const { templates: { FieldTemplate }, components: { MultipleChoiceField }, } = (0, react_1.useContext)(Form_1.FormRegistry);
+    const { templates: { FieldTemplate }, components: { MultipleChoiceFieldInput }, } = (0, react_1.useContext)(FormRegistry_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 { props: inputProps, style } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
+    const enums = (0, react_1.useMemo)(() => (0, utils_1.getEnums)(props), [props]);
     const { values } = (0, formik_1.useFormikContext)();
     const value = (0, formik_1.getIn)(values, name);
     const form = (0, formik_1.useFormikContext)();
@@ -27,6 +27,6 @@ const MultipleChoiceField = (props) => {
                 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 }) }));
+    return ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, ...fieldDataAttribute, children: (0, jsx_runtime_1.jsx)(MultipleChoiceFieldInput, { inputProps: inputProps, name: name, enums: enums, style: style, value: value, form: form }) }));
 };
 exports.MultipleChoiceField = MultipleChoiceField;

package/dist/cjs/Form/fields/MultipleChoiceField/MultipleChoiceFieldInput.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultipleChoiceFieldInput = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const getStyle_1 = require("../../../utils/getStyle");
+const FormRegistry_1 = require("../../FormRegistry");
+const utils_1 = require("../../../utils");
+const MultipleChoiceFieldInput = ({ inputProps, name, className, enums, style, value, form, }) => {
+    const { components: { MultipleChoiceFieldContainer, MultipleChoiceFieldElement, MultipleChoiceFieldInputElement, MultipleChoiceFieldLabel, }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
+    const isMultiSelect = enums.type === utils_1.EnumsTypes.MULTI_SELECT;
+    const currentValue = isMultiSelect
+        ? Array.isArray(value)
+            ? value
+            : []
+        : value;
+    const isChecked = (optionValue) => {
+        if (isMultiSelect && Array.isArray(currentValue)) {
+            return currentValue.includes(optionValue);
+        }
+        return currentValue === optionValue;
+    };
+    const handleChange = (optionValue) => {
+        if (isMultiSelect && Array.isArray(currentValue)) {
+            const newValue = isChecked(optionValue)
+                ? currentValue.filter((v) => v !== optionValue)
+                : [...currentValue, optionValue];
+            form?.setFieldValue(name, newValue);
+        }
+        else {
+            form?.setFieldValue(name, optionValue);
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(MultipleChoiceFieldContainer, { className: className, style: (0, getStyle_1.getStyle)(style ?? ""), children: enums.values.map((v) => {
+            const optionValue = v.const;
+            return ((0, jsx_runtime_1.jsxs)(MultipleChoiceFieldElement, { "data-fjsf-enum-value": optionValue, children: [(0, jsx_runtime_1.jsx)(MultipleChoiceFieldInputElement, { ...inputProps, name: name, type: isMultiSelect ? "checkbox" : "radio", value: optionValue !== undefined ? optionValue.toString() : "", checked: isChecked(optionValue), onChange: () => handleChange(optionValue) }), (0, jsx_runtime_1.jsx)(MultipleChoiceFieldLabel, { children: v.title })] }, optionValue !== undefined ? optionValue.toString() : "undefined"));
+        }) }));
+};
+exports.MultipleChoiceFieldInput = MultipleChoiceFieldInput;

package/dist/cjs/Form/fields/MultipleChoiceField/index.js

@@ -0,0 +1,31 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.components = exports.fields = void 0;
+const MultipleChoiceFieldInput_1 = require("./MultipleChoiceFieldInput");
+const styledComponents = __importStar(require("./styledComponents"));
+exports.fields = __importStar(require("./MultipleChoiceField"));
+const components = { ...styledComponents, MultipleChoiceFieldInput: MultipleChoiceFieldInput_1.MultipleChoiceFieldInput };
+exports.components = components;

package/dist/cjs/Form/fields/MultipleChoiceField/styledComponents.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultipleChoiceFieldLabel = exports.MultipleChoiceFieldInputElement = exports.MultipleChoiceFieldElement = exports.MultipleChoiceFieldContainer = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const styledComponents_1 = require("../RadioField/styledComponents");
+const common_1 = require("../../styles/common");
+exports.MultipleChoiceFieldContainer = (0, styled_components_1.default)(styledComponents_1.RadioFieldContainer) `
+    ${common_1.commonCheckboxStyles}
+    ${common_1.commonRadioStyles}
+    font-family: ${(props) => props.theme.typography.fontFamily.base};
+`;
+exports.MultipleChoiceFieldElement = (0, styled_components_1.default)(styledComponents_1.RadioFieldElement) ``;
+exports.MultipleChoiceFieldInputElement = (0, styled_components_1.default)(styledComponents_1.RadioFieldInputElement) ``;
+exports.MultipleChoiceFieldLabel = (0, styled_components_1.default)(styledComponents_1.RadioFieldLabel) ``;

package/dist/cjs/{fields → Form/fields/NullField}/NullField.js

@@ -3,9 +3,9 @@ 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 FormRegistry_1 = require("../../FormRegistry");
 const NullField = (props) => {
-    const { templates: { FieldTemplate }, } = (0, react_1.useContext)(Form_1.FormRegistry);
+    const { templates: { FieldTemplate }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
     const { name, uiSchema } = props;
     return (0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, "data-fjsf-null": name });
 };

package/dist/cjs/Form/fields/NullField/index.js

@@ -0,0 +1,27 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fields = void 0;
+exports.fields = __importStar(require("./NullField"));

package/dist/cjs/Form/fields/NumberField/NumberField.js

@@ -0,0 +1,16 @@
+"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/StringField");
+const styledComponents_1 = require("./styledComponents");
+const NumberField = (props) => {
+    return ((0, jsx_runtime_1.jsx)(styledComponents_1.NumberFieldWrapper, { children: (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/Form/fields/NumberField/index.js

@@ -0,0 +1,28 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fields = exports.components = void 0;
+exports.components = __importStar(require("./styledComponents"));
+exports.fields = __importStar(require("./NumberField"));

package/dist/cjs/Form/fields/NumberField/styledComponents.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NumberFieldWrapper = void 0;
+const styled_components_1 = require("styled-components");
+const common_1 = require("../../styles/common");
+exports.NumberFieldWrapper = styled_components_1.styled.div `
+    ${common_1.commonInputStyles}
+`;

package/dist/cjs/{fields → Form/fields/ObjectField}/ObjectField.js

@@ -4,12 +4,10 @@ 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 utils_1 = require("../../../utils");
+const hooks_1 = require("../../hooks");
+const FormRegistry_1 = require("../../FormRegistry");
+const types_1 = require("./types");
 const useObjectField = (name) => {
     if (!name) {
         const { values = {}, setValues } = (0, formik_1.useFormikContext)();
@@ -19,12 +17,12 @@ const useObjectField = (name) => {
     return { value, setValue };
 };
 const ObjectField = (props) => {
-    const { fields: { SchemaField }, templates: { ObjectFieldTemplate, CollapsibleObjectFieldTemplate }, components: { ObjectFieldItem, ObjectFieldItemButtons }, hideUnmarkedAdditionalProperties, } = (0, react_1.useContext)(Form_1.FormRegistry);
+    const { fields: { SchemaField }, templates: { ObjectFieldTemplate, CollapsibleObjectFieldTemplate }, components: { ObjectFieldItem, ObjectFieldItemButtons, ObjectFieldButton, ObjectFieldAddButton, ObjectFieldRemoveButton, ObjectFieldUpButton, ObjectFieldDownButton, ObjectFieldSection, }, hideUnmarkedAdditionalProperties, } = (0, react_1.useContext)(FormRegistry_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);
+        return (0, utils_1.resolveSchema)(schema, value);
     }, [schema, value]);
     (0, react_1.useEffect)(() => {
         if (valuesToRemove.length > 0) {
@@ -41,17 +39,42 @@ const ObjectField = (props) => {
         ? 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));
+    const getObjectFieldButton = ({ purpose, onClick, uiSchema, }) => {
+        switch (purpose) {
+            case types_1.ObjectFieldButtonPurpose.ADD:
+                return ((0, jsx_runtime_1.jsx)(ObjectFieldAddButton, { ...(uiSchema?.["ui:addButtonOptions"]?.props ?? {}), onClick: onClick, children: uiSchema?.["ui:addButtonOptions"]?.content ?? "+" }));
+            case types_1.ObjectFieldButtonPurpose.REMOVE:
+                return ((0, jsx_runtime_1.jsx)(ObjectFieldRemoveButton, { ...(uiSchema?.["ui:removeButtonOptions"]?.props ?? {}), onClick: onClick, children: uiSchema?.["ui:removeButtonOptions"]?.content ?? "-" }));
+            case types_1.ObjectFieldButtonPurpose.MOVE_UP:
+                return ((0, jsx_runtime_1.jsx)(ObjectFieldUpButton, { ...(uiSchema?.["ui:upButtonOptions"]?.props ?? {}), onClick: onClick, children: uiSchema?.["ui:upButtonOptions"]?.content ?? "↑" }));
+            case types_1.ObjectFieldButtonPurpose.MOVE_DOWN:
+                return ((0, jsx_runtime_1.jsx)(ObjectFieldDownButton, { ...(uiSchema?.["ui:downButtonOptions"]?.props ?? {}), onClick: onClick, children: uiSchema?.["ui:downButtonOptions"]?.content ?? "↓" }));
+            default:
+                return ((0, jsx_runtime_1.jsx)(ObjectFieldButton, { ...(uiSchema?.["ui:customButtonOptions"]?.props ?? {}), onClick: onClick, children: uiSchema?.["ui:customButtonOptions"]?.content ?? "" }));
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(FieldTemplateComponent, { ...props, "data-fjsf-object": name, children: [orderedProperties
+                .map((child) => {
+                if (typeof child === "string") {
+                    const childSchema = properties?.[child];
+                    if (!childSchema)
+                        return undefined;
+                    return ((0, jsx_runtime_1.jsx)(SchemaField, { required: required?.includes(child), name: name ? [name, child].join(".") : child, schema: typeof childSchema !== "boolean" ? childSchema : {}, uiSchema: uiSchema?.[child] }, child));
+                }
+                else {
+                    const { title, fields, collapsible } = child;
+                    return ((0, jsx_runtime_1.jsx)(ObjectFieldSection, { title: title, collapsible: collapsible, children: fields.map((child2) => {
+                            const childSchema = properties?.[child2];
+                            if (!childSchema)
+                                return undefined;
+                            return ((0, jsx_runtime_1.jsx)(SchemaField, { name: name ? [name, child2].join(".") : child2, schema: typeof childSchema !== "boolean" ? childSchema : {}, uiSchema: uiSchema?.[child2] }, child2));
+                        }) }, fields.join("_")));
+                }
             })
                 .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)({
+                                : {}, uiSchema: uiSchema?.[childName] }, childName), (0, jsx_runtime_1.jsx)(ObjectFieldItemButtons, { children: getObjectFieldButton({
                                 purpose: types_1.ObjectFieldButtonPurpose.REMOVE,
                                 onClick: () => {
                                     const { [childName]: _removedProperty, ...newValue } = value;
@@ -59,7 +82,7 @@ const ObjectField = (props) => {
                                 },
                                 uiSchema: uiSchema,
                             }) })] }, childName))), additionalProperties &&
-                (0, styledComponents_1.getObjectFieldButton)({
+                getObjectFieldButton({
                     purpose: types_1.ObjectFieldButtonPurpose.ADD,
                     onClick: () => {
                         const key = prompt("Give key");

package/dist/cjs/Form/fields/ObjectField/ObjectFieldSection.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ObjectFieldSection = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const FormRegistry_1 = require("../../FormRegistry");
+const ObjectFieldSection = ({ title, collapsible, children, }) => {
+    const [collapsed, setCollapsed] = (0, react_1.useState)(collapsible);
+    const { components: { ObjectFieldSectionWrapper, ObjectFieldSectionTitle }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
+    return ((0, jsx_runtime_1.jsxs)(ObjectFieldSectionWrapper, { children: [(0, jsx_runtime_1.jsxs)(ObjectFieldSectionTitle, { onClick: () => {
+                    if (collapsible) {
+                        setCollapsed((currentState) => !currentState);
+                    }
+                }, children: [collapsible && (collapsed ? "▸" : "▾"), title] }), !collapsed && children] }));
+};
+exports.ObjectFieldSection = ObjectFieldSection;