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

package/dist/cjs/Form/fields/ObjectField/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 ObjectFieldSection_1 = require("./ObjectFieldSection");
+const styledComponents = __importStar(require("./styledComponents"));
+exports.fields = __importStar(require("./ObjectField"));
+const components = { ...styledComponents, ObjectFieldSection: ObjectFieldSection_1.ObjectFieldSection };
+exports.components = components;

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

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ObjectFieldSectionTitle = exports.ObjectFieldSectionWrapper = exports.ObjectFieldAddButton = exports.ObjectFieldRemoveButton = exports.ObjectFieldDownButton = exports.ObjectFieldUpButton = exports.ObjectFieldLineButton = exports.ObjectFieldButton = exports.ObjectFieldItemButtons = exports.ObjectFieldItem = exports.ObjectFieldList = void 0;
+const styled_components_1 = require("styled-components");
+exports.ObjectFieldList = styled_components_1.styled.ul `
+  color: ${(props) => props.theme.text.default};
+  list-style-type: none;
+  padding: 0;
+`;
+exports.ObjectFieldItem = styled_components_1.styled.li `
+  color: ${(props) => props.theme.text.default};
+  display: flex;
+`;
+exports.ObjectFieldItemButtons = styled_components_1.styled.div `
+  display: flex;
+  margin: ${(props) => props.theme.spacing.s};
+`;
+exports.ObjectFieldButton = styled_components_1.styled.a `
+  background-color: ${(props) => props.theme.intent.none};
+  border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.border.default}`};
+  color: ${(props) => props.theme.neutral[900]};
+  cursor: pointer;
+  display: inline-block;
+  font-weight: ${(props) => props.theme.typography.weight.bold};
+  height: ${(props) => props.theme.spacing.l};
+  line-height: ${(props) => props.theme.spacing.l};
+  width: auto;
+  padding: ${(props) => `${props.theme.spacing.xs} ${props.theme.spacing.s}`};
+  text-align: center;
+`;
+exports.ObjectFieldLineButton = (0, styled_components_1.styled)(exports.ObjectFieldButton) ``;
+exports.ObjectFieldUpButton = (0, styled_components_1.styled)(exports.ObjectFieldLineButton) ``;
+exports.ObjectFieldDownButton = (0, styled_components_1.styled)(exports.ObjectFieldLineButton) ``;
+exports.ObjectFieldRemoveButton = (0, styled_components_1.styled)(exports.ObjectFieldLineButton) ``;
+exports.ObjectFieldAddButton = (0, styled_components_1.styled)(exports.ObjectFieldButton) ``;
+exports.ObjectFieldSectionWrapper = styled_components_1.styled.fieldset ``;
+exports.ObjectFieldSectionTitle = styled_components_1.styled.legend ``;

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

@@ -0,0 +1,16 @@
+"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 utils_1 = require("../../../utils");
+const hooks_1 = require("../../hooks");
+const FormRegistry_1 = require("../../FormRegistry");
+const RadioField = (props) => {
+    const { templates: { FieldTemplate }, components: { RadioFieldInput }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
+    (0, hooks_1.useSetDefault)(props);
+    const { name, uiSchema } = props;
+    const { label, props: inputProps } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
+    return ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, "data-fjsf-boolean": name, children: (0, jsx_runtime_1.jsx)(RadioFieldInput, { inputProps: inputProps, label: label, name: name }) }));
+};
+exports.RadioField = RadioField;

package/dist/cjs/Form/fields/RadioField/RadioFieldInput.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioFieldInput = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const FormRegistry_1 = require("../../FormRegistry");
+const RadioFieldInput = ({ label, inputProps, name, className, }) => {
+    const { components: { RadioFieldContainer, RadioFieldElement, RadioFieldInputElement, RadioFieldLabelTrue, RadioFieldLabelFalse, }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
+    return ((0, jsx_runtime_1.jsxs)(RadioFieldContainer, { className: className, children: [(0, jsx_runtime_1.jsxs)(RadioFieldElement, { children: [(0, jsx_runtime_1.jsx)(RadioFieldInputElement, { ...inputProps, name: name, type: "radio", value: "true" }), (0, jsx_runtime_1.jsx)(RadioFieldLabelTrue, { children: label?.true ?? "true" })] }), (0, jsx_runtime_1.jsxs)(RadioFieldElement, { children: [(0, jsx_runtime_1.jsx)(RadioFieldInputElement, { ...inputProps, name: name, type: "radio", value: "false" }), (0, jsx_runtime_1.jsx)(RadioFieldLabelFalse, { children: label?.false ?? "false" })] })] }));
+};
+exports.RadioFieldInput = RadioFieldInput;

package/dist/cjs/Form/fields/RadioField/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 RadioFieldInput_1 = require("./RadioFieldInput");
+const styledComponents = __importStar(require("./styledComponents"));
+exports.fields = __importStar(require("./RadioField"));
+const components = { ...styledComponents, RadioFieldInput: RadioFieldInput_1.RadioFieldInput };
+exports.components = components;

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioFieldLabelFalse = exports.RadioFieldLabelTrue = exports.RadioFieldLabel = exports.RadioFieldInputElement = exports.RadioFieldElement = exports.RadioFieldContainer = void 0;
+const styled_components_1 = require("styled-components");
+const FieldInput_1 = require("../../components/FieldInput");
+const common_1 = require("../../styles/common");
+exports.RadioFieldContainer = styled_components_1.styled.div `
+  color: ${(props) => props.theme.text.default};
+  display: flex;
+  font-family: ${(props) => props.theme.typography.fontFamily.base};
+  gap: ${(props) => props.theme.spacing.l};
+  ${common_1.commonRadioStyles}
+`;
+exports.RadioFieldElement = styled_components_1.styled.label `
+  display: inline-flex;
+  align-items: center;
+`;
+exports.RadioFieldInputElement = (0, styled_components_1.styled)(FieldInput_1.FieldInput) `
+  margin: unset;
+  margin-top: ${(props) => props.theme.spacing.xxs};
+`;
+exports.RadioFieldLabel = styled_components_1.styled.span `
+  margin-left: ${(props) => props.theme.spacing.xs};
+  line-height: ${(props) => props.theme.typography.lineHeight.small};
+`;
+exports.RadioFieldLabelTrue = (0, styled_components_1.styled)(exports.RadioFieldLabel) ``;
+exports.RadioFieldLabelFalse = (0, styled_components_1.styled)(exports.RadioFieldLabel) ``;

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

@@ -3,12 +3,11 @@ 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 utils_1 = require("../../../utils");
+const FormRegistry_1 = require("../../FormRegistry");
+const constants_1 = require("../../../common/constants");
 const useFieldComponent = (schema, uiSchema, fields) => {
-    const { field } = (0, hooks_1.useExtractUiSchema)(uiSchema);
+    const { field } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
     if (typeof field === "function") {
         return field;
     }
@@ -19,14 +18,14 @@ const useFieldComponent = (schema, uiSchema, fields) => {
     if (Array.isArray(schemaType)) {
         schemaType = schemaType[0];
     }
-    const componentName = types_1.COMPONENT_TYPES[schemaType || "any"];
-    return componentName in fields
-        ? fields[componentName]
-        : fields.UnsupportedField;
+    const fieldName = constants_1.COMPONENT_TYPES[schemaType || "any"];
+    return fieldName in fields
+        ? fields[fieldName]
+        : () => ((0, jsx_runtime_1.jsxs)("p", { style: { color: "red" }, children: ["!!! Unsupported field \"", fieldName, "\" !!!"] }));
 };
 const SchemaField = (props) => {
     const { schema, uiSchema } = props;
-    const { fields, definitions, uiSchemaDefinitions } = (0, react_1.useContext)(Form_1.FormRegistry);
+    const { fields, definitions, uiSchemaDefinitions } = (0, react_1.useContext)(FormRegistry_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 = {

package/dist/cjs/Form/fields/SchemaField/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("./SchemaField"));

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchableMultiTagSelectField = 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 SearchableMultiTagSelectField = (props) => {
+    const { templates: { FieldTemplate }, components: { SearchableMultiTagSelectFieldInput }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
+    (0, hooks_1.useSetDefault)(props);
+    const { name, uiSchema } = props;
+    const { placeholder, emptySearchMessage, props: inputProps, } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
+    const enums = (0, react_1.useMemo)(() => (0, utils_1.getEnums)(props), [props]);
+    return ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, "data-fjsf-array": name, children: (0, jsx_runtime_1.jsx)(SearchableMultiTagSelectFieldInput, { ...inputProps, name: name, placeholder: placeholder, emptySearchMessage: emptySearchMessage, enums: enums }) }));
+};
+exports.SearchableMultiTagSelectField = SearchableMultiTagSelectField;

package/dist/cjs/Form/fields/SearchableMultiTagSelectField/SearchableMultiTagSelectFieldInput.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchableMultiTagSelectFieldInput = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const FormRegistry_1 = require("../../FormRegistry");
+const SearchableMultiTagSelectFieldInput = ({ name, placeholder, enums, emptySearchMessage, closeElement, className, }) => {
+    const { components: { FieldInput, SearchableMultiTagSelectFieldBadge, SearchableMultiTagSelectFieldBadgeCloseElement, SearchableMultiTagSelectFieldBadgeContainer, SearchableMultiTagSelectFieldContainer, SearchableMultiTagSelectFieldInputElement, SearchableMultiTagSelectFieldOptionList, SearchableMultiTagSelectFieldOptionListItem, SearchableMultiTagSelectFieldOptionListWithoutItem, SearchableMultiTagSelectFieldSearchContainer, }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
+    const [search, setSearch] = (0, react_1.useState)("");
+    const searchIncludedInEnum = () => {
+        const hasValue = enums?.values.map((value) => value.title.toLowerCase().includes(search.toLowerCase()));
+        return hasValue?.includes(true);
+    };
+    return ((0, jsx_runtime_1.jsx)(FieldInput, { className: className, name: name, multiple: true, children: ({ field, form: { setFieldValue }, meta, }) => ((0, jsx_runtime_1.jsxs)(SearchableMultiTagSelectFieldContainer, { className: className, children: [(0, jsx_runtime_1.jsx)(FieldInput, { id: className, type: "hidden", ...field }), (0, jsx_runtime_1.jsxs)(SearchableMultiTagSelectFieldSearchContainer, { children: [(0, jsx_runtime_1.jsx)(SearchableMultiTagSelectFieldInputElement, { id: className + "_id", className: className, type: "text", onChange: (e) => {
+                                setSearch(e.currentTarget.value);
+                            }, placeholder: placeholder, value: search }), search.length > 0 && ((0, jsx_runtime_1.jsx)(SearchableMultiTagSelectFieldOptionList, { children: searchIncludedInEnum() ? (enums?.values
+                                .filter((item) => !(field.value ?? []).includes(item.const))
+                                .filter((value) => value.title.toLowerCase().includes(search.toLowerCase()))
+                                .map((option, index) => ((0, jsx_runtime_1.jsx)(SearchableMultiTagSelectFieldOptionListItem, { value: option.const, onClick: () => {
+                                    setFieldValue(name, [
+                                        ...new Set([...(field.value ?? []), option.const]),
+                                    ]);
+                                    setSearch("");
+                                }, children: option.title }, index)))) : ((0, jsx_runtime_1.jsx)(SearchableMultiTagSelectFieldOptionListWithoutItem, { children: emptySearchMessage ?? "No match found" })) }))] }), (0, jsx_runtime_1.jsx)(SearchableMultiTagSelectFieldBadgeContainer, { children: (field.value ?? []).map((value) => ((0, jsx_runtime_1.jsxs)(SearchableMultiTagSelectFieldBadge, { children: [enums?.values.find((option) => option.const === value)
+                                ?.title, (0, jsx_runtime_1.jsx)(SearchableMultiTagSelectFieldBadgeCloseElement, { onClick: () => setFieldValue(name, field.value.filter((v) => v !== value)), children: closeElement ?? "✕" })] }, value))) }), meta.touched && meta.error && ((0, jsx_runtime_1.jsx)("div", { className: "error", children: meta.error }))] })) }));
+};
+exports.SearchableMultiTagSelectFieldInput = SearchableMultiTagSelectFieldInput;

package/dist/cjs/Form/fields/SearchableMultiTagSelectField/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 SearchableMultiTagSelectFieldInput_1 = require("./SearchableMultiTagSelectFieldInput");
+const styledComponents = __importStar(require("./styledComponents"));
+exports.fields = __importStar(require("./SearchableMultiTagSelectField"));
+const components = { ...styledComponents, SearchableMultiTagSelectFieldInput: SearchableMultiTagSelectFieldInput_1.SearchableMultiTagSelectFieldInput };
+exports.components = components;

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

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchableMultiTagSelectFieldOptionListWithoutItem = exports.SearchableMultiTagSelectFieldOptionListItem = exports.SearchableMultiTagSelectFieldOptionList = exports.SearchableMultiTagSelectFieldBadgeCloseElement = exports.SearchableMultiTagSelectFieldBadge = exports.SearchableMultiTagSelectFieldBadgeContainer = exports.SearchableMultiTagSelectFieldInputElement = exports.SearchableMultiTagSelectFieldSearchContainer = exports.SearchableMultiTagSelectFieldContainer = void 0;
+const styled_components_1 = require("styled-components");
+const FieldInput_1 = require("../../components/FieldInput");
+const common_1 = require("../../styles/common");
+exports.SearchableMultiTagSelectFieldContainer = styled_components_1.styled.div `
+  display: flex;
+  flex-direction: column;
+  font-family: ${(props) => props.theme.typography.fontFamily.base};
+  ${common_1.commonInputStyles}
+`;
+exports.SearchableMultiTagSelectFieldSearchContainer = styled_components_1.styled.div `
+  display: inline-block;
+  position: relative;
+  width: fit-content;
+`;
+exports.SearchableMultiTagSelectFieldInputElement = (0, styled_components_1.styled)(FieldInput_1.FieldInput) `
+  width: 100%;
+`;
+exports.SearchableMultiTagSelectFieldBadgeContainer = styled_components_1.styled.div `
+  font-family: ${(props) => props.theme.typography.fontFamily.base};
+  margin: ${(props) => `${props.theme.spacing.xs} 0`};
+  display: inline-flex;
+  gap: ${(props) => props.theme.strokeWidth.thin};
+`;
+exports.SearchableMultiTagSelectFieldBadge = styled_components_1.styled.span `
+  color: ${(props) => props.theme.background.input};
+  background: ${(props) => props.theme.text.default};
+  padding: ${(props) => `0 ${props.theme.spacing.xs} 0 ${props.theme.spacing.s}`};
+  border-radius: ${(props) => props.theme.borderRadius.none};
+  display: flex;
+  margin-right: ${(props) => props.theme.spacing.xs};
+`;
+exports.SearchableMultiTagSelectFieldBadgeCloseElement = styled_components_1.styled.span `
+  cursor: pointer;
+  margin-left: ${(props) => props.theme.spacing.s};
+  font-size: ${(props) => props.theme.typography.size.s};
+  align-self: baseline;
+  font-family: ${(props) => props.theme.typography.fontFamily.base};
+`;
+exports.SearchableMultiTagSelectFieldOptionList = styled_components_1.styled.ul `
+  width: 100%;
+  padding: unset;
+  margin: unset;
+  border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.border.default}`};
+  border-radius: ${(props) => props.theme.borderRadius.s};
+  position: absolute;
+  background: ${(props) => props.theme.background.default};
+  top: 100%;
+  z-index: 1000;
+`;
+exports.SearchableMultiTagSelectFieldOptionListItem = styled_components_1.styled.li `
+  cursor: pointer;
+  list-style-type: none;
+  padding: ${(props) => `${props.theme.spacing.xxs} ${props.theme.spacing.xs}`};
+  height: ${(props) => props.theme.spacing.xl};
+  &:hover {
+    background: ${(props) => props.theme.background.input};
+  }
+`;
+exports.SearchableMultiTagSelectFieldOptionListWithoutItem = styled_components_1.styled.li `
+  cursor: default;
+  color: ${(props) => props.theme.background.default};
+  list-style-type: none;
+  padding: ${(props) => `${props.theme.spacing.xxs} ${props.theme.spacing.xs}`};
+  height: ${(props) => props.theme.spacing.xl};
+`;

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

@@ -4,11 +4,11 @@ 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 utils_1 = require("../../../utils");
+const hooks_1 = require("../../hooks");
+const FormRegistry_1 = require("../../FormRegistry");
 const SearchableSelectField = (props) => {
-    const { templates: { FieldTemplate }, components: { SearchableSelectContainer, SearchDropdownContainer, SearchListOption, SearchListExpand, SearchNotFound, SearchInput, SearchClearButton, SearchInputContainer, }, } = (0, react_1.useContext)(Form_1.FormRegistry);
+    const { templates: { FieldTemplate }, components: { SearchableSelectFieldContainer, SearchableSelectFieldDropdownContainer, SearchableSelectFieldListOption, SearchableSelectFieldListExpand, SearchableSelectFieldNotFound, SearchableSelectFieldInputElement, SearchableSelectFieldClearButton, SearchableSelectFieldInputContainer, }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
     (0, hooks_1.useSetDefault)(props);
     const ListOption = (props) => {
         const { isActive, children, ...rest } = props;
@@ -22,10 +22,10 @@ const SearchableSelectField = (props) => {
                 });
             }
         }, [isActive]);
-        return ((0, jsx_runtime_1.jsx)(SearchListOption, { ref: ref, ...rest, children: children }));
+        return ((0, jsx_runtime_1.jsx)(SearchableSelectFieldListOption, { 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 { props: inputProps, placeholder, clearButtonText, expandText, notFoundMessage, hoverColors = { backgroundColor: "", color: "" }, hideClearButton = false, dropdown, } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
     const dropdownOptions = {
         show: false,
         height: "",
@@ -119,7 +119,9 @@ const SearchableSelectField = (props) => {
     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: {
+    return ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, ...fieldDataAttribute, children: (0, jsx_runtime_1.jsxs)(SearchableSelectFieldContainer, { ref: containerRef, onBlur: handleBlur, children: [(0, jsx_runtime_1.jsxs)(SearchableSelectFieldInputContainer, { children: [(0, jsx_runtime_1.jsx)(SearchableSelectFieldInputElement, { ...inputProps, name: name, type: "text", placeholder: placeholder, value: searchTerm, onChange: handleSearchChange, onFocus: handleFocus }), searchTerm && !hideClearButton && ((0, jsx_runtime_1.jsx)(SearchableSelectFieldClearButton, { onClick: handleClear, children: clearButtonText ?? "✕" }))] }), showOptions && ((0, jsx_runtime_1.jsxs)(SearchableSelectFieldDropdownContainer, { role: "dropdown-list", 
+                    //ref={moreRef} //TODO
+                    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
@@ -127,6 +129,10 @@ const SearchableSelectField = (props) => {
                                     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..." }))] }))] }) }));
+                                : {}, role: "filtered-list", onClick: () => handleSelect(item), onMouseDown: (e) => e.preventDefault(), children: item.title }, index)))) : ((0, jsx_runtime_1.jsx)(SearchableSelectFieldNotFound, { onMouseDown: (e) => e.preventDefault(), children: notFoundMessage ?? "No match found" })), showMoreOption && ((0, jsx_runtime_1.jsx)(SearchableSelectFieldListExpand
+                        //ref={moreRef} //TODO
+                        , { 
+                            //ref={moreRef} //TODO
+                            onMouseDown: (e) => e.preventDefault(), onClick: loadMoreItems, children: expandText ?? "More..." }))] }))] }) }));
 };
 exports.SearchableSelectField = SearchableSelectField;

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

@@ -0,0 +1,30 @@
+"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("./SearchableSelectField"));
+//TODO: Export after figuring how to properly export them
+//export type * from "./types";

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

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchableSelectFieldInputContainer = exports.SearchableSelectFieldClearButton = exports.SearchableSelectFieldInputElement = exports.SearchableSelectFieldNotFound = exports.SearchableSelectFieldListExpand = exports.SearchableSelectFieldListOption = exports.SearchableSelectFieldDropdownContainer = exports.SearchableSelectFieldContainer = void 0;
+const styled_components_1 = require("styled-components");
+const FieldInput_1 = require("../../components/FieldInput");
+const styledComponents_1 = require("../SearchableMultiTagSelectField/styledComponents");
+exports.SearchableSelectFieldContainer = (0, styled_components_1.styled)(styledComponents_1.SearchableMultiTagSelectFieldSearchContainer) ``;
+exports.SearchableSelectFieldDropdownContainer = (0, styled_components_1.styled)(styledComponents_1.SearchableMultiTagSelectFieldOptionList) `
+  overflow-y: auto;
+  overflow-x: auto;
+  max-height: 6rem;
+  white-space: nowrap;
+`;
+exports.SearchableSelectFieldListOption = (0, styled_components_1.styled)(styledComponents_1.SearchableMultiTagSelectFieldOptionListItem) `
+  cursor: default;
+`;
+exports.SearchableSelectFieldListExpand = (0, styled_components_1.styled)(styledComponents_1.SearchableMultiTagSelectFieldOptionListItem) `
+  text-decoration: underline;
+  &:hover {
+    background: none;
+  }
+`;
+exports.SearchableSelectFieldNotFound = (0, styled_components_1.styled)(styledComponents_1.SearchableMultiTagSelectFieldOptionListItem) `
+  cursor: default;
+  &:hover {
+    background: none;
+  }
+`;
+exports.SearchableSelectFieldInputElement = (0, styled_components_1.styled)(FieldInput_1.FieldInput) `
+  width: 100%;
+  padding-right: ${(props) => props.theme.spacing.xxl};
+  text-overflow: ellipsis;
+`;
+exports.SearchableSelectFieldClearButton = styled_components_1.styled.span `
+  cursor: pointer;
+  position: absolute;
+  right: ${(props) => props.theme.spacing.xs};
+  bottom: 0;
+  top: 0;
+  margin: auto;
+  background-color: ${(props) => props.theme.neutral[500]};
+  border-radius: ${(props) => props.theme.borderRadius.circle};
+  line-height: 1rem;
+  min-width: 1rem;
+  height: 1rem;
+  text-align: center;
+`;
+exports.SearchableSelectFieldInputContainer = styled_components_1.styled.div `
+  display: flex;
+`;

package/dist/cjs/Form/fields/SearchableSelectField/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,39 @@
+"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 formik_1 = require("formik");
+const utils_1 = require("../../../utils");
+const FormRegistry_1 = require("../../FormRegistry");
+const hooks_1 = require("../../hooks");
+const styledComponents_1 = require("./styledComponents");
+const StringField = (props) => {
+    const { templates: { FieldTemplate }, components: { FieldInput }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
+    (0, hooks_1.useSetDefault)(props);
+    const { name, uiSchema = {}, schema } = props;
+    const { type, placeholder, props: inputProps, } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
+    const enums = (0, react_1.useMemo)(() => (0, utils_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.jsx)(styledComponents_1.StringFieldWrapper, { 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)(styledComponents_1.StringFieldWrapper, { children: (0, jsx_runtime_1.jsx)(FieldInput, { type,
+                        placeholder,
+                        ...inputProps, name: name }) }) }));
+    }
+};
+exports.StringField = StringField;

package/dist/cjs/Form/fields/StringField/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("./StringField"));

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

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

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

@@ -3,13 +3,14 @@ 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 utils_1 = require("../../../utils");
+const FormRegistry_1 = require("../../FormRegistry");
+const hooks_1 = require("../../hooks");
 const TextAreaField = (props) => {
-    const { templates: { FieldTemplate }, components: { TextAreaInputField }, } = (0, react_1.useContext)(Form_1.FormRegistry);
+    const { templates: { FieldTemplate }, components: { TextAreaFieldInput }, } = (0, react_1.useContext)(FormRegistry_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 }) }));
+    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)(TextAreaFieldInput, { ...inputProps, name: name, formikAs: "textarea" }) }));
 };
 exports.TextAreaField = TextAreaField;