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

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

@@ -0,0 +1,5 @@
+import { FileUploadFieldInput } from "./FileUploadFieldInput";
+import * as styledComponents from "./styledComponents";
+export * as fields from "./FileUploadField";
+const components = { ...styledComponents, FileUploadFieldInput };
+export { components };

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

@@ -0,0 +1,57 @@
+import styled from "styled-components";
+import { readableColor } from "polished";
+export const FileUploadFieldFileUploadButton = styled.button `
+  background-color: ${(props) => props.theme.intent.none};
+  color: ${(props) => 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};
+`;
+export const FileUploadFieldHiddenFileInput = styled.input `
+  display: none;
+`;
+export const FileUploadFieldProgressBarContainer = styled.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};
+`;
+export const FileUploadFieldProgressBar = styled.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;
+`;
+export const FileUploadFieldProgressText = styled.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};
+`;
+export const FileUploadFieldFileItemContainer = styled.div `
+  margin-bottom: ${(props) => props.theme.spacing.s};
+  display: flex;
+  align-items: center;
+`;
+export const FileUploadFieldRemoveButton = styled.button `
+  margin-left: ${(props) => props.theme.spacing.s};
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+`;
+export const FileUploadFieldFileInfoText = styled.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};
+`;
+export const FileUploadFieldContainer = styled.div ``;

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

@@ -1,14 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext, useMemo } from "react";
-import { FormRegistry } from "../Form";
-import { useExtractUiSchema, useSetDefault } from "../hooks";
-import { getEnums } from "../utils/getEnums";
 import { getIn, useFormikContext } from "formik";
+import { extractUiSchema, getEnums } from "../../../utils";
+import { useSetDefault } from "../../hooks";
+import { FormRegistry } from "../../FormRegistry";
 export const MultipleChoiceField = (props) => {
-    const { templates: { FieldTemplate }, components: { MultipleChoiceField }, } = useContext(FormRegistry);
+    const { templates: { FieldTemplate }, components: { MultipleChoiceFieldInput }, } = useContext(FormRegistry);
     useSetDefault(props);
     const { name, uiSchema, schema } = props;
-    const { props: inputProps, style } = useExtractUiSchema(uiSchema);
+    const { props: inputProps, style } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
     const enums = useMemo(() => getEnums(props), [props]);
     const { values } = useFormikContext();
     const value = getIn(values, name);
@@ -24,5 +24,5 @@ export const MultipleChoiceField = (props) => {
                 return { "data-fjsf-string": name };
         }
     })();
-    return (_jsx(FieldTemplate, { ...props, ...fieldDataAttribute, children: _jsx(MultipleChoiceField, { inputProps: inputProps, name: name, enums: enums, style: style, value: value, form: form }) }));
+    return (_jsx(FieldTemplate, { ...props, ...fieldDataAttribute, children: _jsx(MultipleChoiceFieldInput, { inputProps: inputProps, name: name, enums: enums, style: style, value: value, form: form }) }));
 };

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

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { getStyle } from "../../../utils/getStyle";
+import { FormRegistry } from "../../FormRegistry";
+import { EnumsTypes } from "../../../utils";
+export const MultipleChoiceFieldInput = ({ inputProps, name, className, enums, style, value, form, }) => {
+    const { components: { MultipleChoiceFieldContainer, MultipleChoiceFieldElement, MultipleChoiceFieldInputElement, MultipleChoiceFieldLabel, }, } = useContext(FormRegistry);
+    const isMultiSelect = enums.type === 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 (_jsx(MultipleChoiceFieldContainer, { className: className, style: getStyle(style ?? ""), children: enums.values.map((v) => {
+            const optionValue = v.const;
+            return (_jsxs(MultipleChoiceFieldElement, { "data-fjsf-enum-value": optionValue, children: [_jsx(MultipleChoiceFieldInputElement, { ...inputProps, name: name, type: isMultiSelect ? "checkbox" : "radio", value: optionValue !== undefined ? optionValue.toString() : "", checked: isChecked(optionValue), onChange: () => handleChange(optionValue) }), _jsx(MultipleChoiceFieldLabel, { children: v.title })] }, optionValue !== undefined ? optionValue.toString() : "undefined"));
+        }) }));
+};

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

@@ -0,0 +1,5 @@
+import { MultipleChoiceFieldInput } from "./MultipleChoiceFieldInput";
+import * as styledComponents from "./styledComponents";
+export * as fields from "./MultipleChoiceField";
+const components = { ...styledComponents, MultipleChoiceFieldInput };
+export { components };

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

@@ -0,0 +1,11 @@
+import styled from "styled-components";
+import { RadioFieldContainer, RadioFieldElement, RadioFieldInputElement, RadioFieldLabel, } from "../RadioField/styledComponents";
+import { commonCheckboxStyles, commonRadioStyles } from "../../styles/common";
+export const MultipleChoiceFieldContainer = styled(RadioFieldContainer) `
+    ${commonCheckboxStyles}
+    ${commonRadioStyles}
+    font-family: ${(props) => props.theme.typography.fontFamily.base};
+`;
+export const MultipleChoiceFieldElement = styled(RadioFieldElement) ``;
+export const MultipleChoiceFieldInputElement = styled(RadioFieldInputElement) ``;
+export const MultipleChoiceFieldLabel = styled(RadioFieldLabel) ``;

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext } from "react";
-import { FormRegistry } from "../Form";
+import { FormRegistry } from "../../FormRegistry";
 export const NullField = (props) => {
     const { templates: { FieldTemplate }, } = useContext(FormRegistry);
     const { name, uiSchema } = props;

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

@@ -0,0 +1 @@
+export * as fields from "./NullField";

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StringField } from "../StringField/StringField";
+import { NumberFieldWrapper } from "./styledComponents";
+export const NumberField = (props) => {
+    return (_jsx(NumberFieldWrapper, { children: _jsx(StringField, { ...props, uiSchema: {
+                ...props.uiSchema,
+                "ui:props": {
+                    ...(props.uiSchema?.["ui:props"] || {}),
+                    type: "number",
+                },
+            } }) }));
+};

package/dist/esm/Form/fields/NumberField/index.js

@@ -0,0 +1,2 @@
+export * as components from "./styledComponents";
+export * as fields from "./NumberField";

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

@@ -0,0 +1,5 @@
+import { styled } from "styled-components";
+import { commonInputStyles } from "../../styles/common";
+export const NumberFieldWrapper = styled.div `
+    ${commonInputStyles}
+`;

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

@@ -1,12 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useField, useFormikContext } from "formik";
 import { useContext, useEffect, useMemo } from "react";
-import { FormRegistry } from "../Form";
-import { ObjectFieldButtonPurpose } from "../types";
-import { resolveSchema } from "../utils/resolveSchema";
-import { useSetDefault } from "../hooks";
-import { getObjectFieldButton } from "../styledComponents";
-import { orderByUiSchema } from "../utils";
+import { orderByUiSchema, resolveSchema } from "../../../utils";
+import { useSetDefault } from "../../hooks";
+import { FormRegistry } from "../../FormRegistry";
+import { ObjectFieldButtonPurpose } from "./types";
 const useObjectField = (name) => {
     if (!name) {
         const { values = {}, setValues } = useFormikContext();
@@ -16,7 +14,7 @@ const useObjectField = (name) => {
     return { value, setValue };
 };
 export const ObjectField = (props) => {
-    const { fields: { SchemaField }, templates: { ObjectFieldTemplate, CollapsibleObjectFieldTemplate }, components: { ObjectFieldItem, ObjectFieldItemButtons }, hideUnmarkedAdditionalProperties, } = useContext(FormRegistry);
+    const { fields: { SchemaField }, templates: { ObjectFieldTemplate, CollapsibleObjectFieldTemplate }, components: { ObjectFieldItem, ObjectFieldItemButtons, ObjectFieldButton, ObjectFieldAddButton, ObjectFieldRemoveButton, ObjectFieldUpButton, ObjectFieldDownButton, ObjectFieldSection, }, hideUnmarkedAdditionalProperties, } = useContext(FormRegistry);
     useSetDefault(props);
     const { name, schema, uiSchema } = props;
     const { value, setValue } = useObjectField(name);
@@ -38,12 +36,37 @@ export const ObjectField = (props) => {
         ? CollapsibleObjectFieldTemplate
         : ObjectFieldTemplate;
     const orderedProperties = orderByUiSchema(uiSchema?.["ui:order"], Object.keys(properties || {}));
-    return (_jsxs(FieldTemplateComponent, { ...props, "data-fjsf-object": name, children: [(orderedProperties ?? Object.keys(properties || {}))
-                .map((childName) => {
-                const childSchema = properties?.[childName];
-                if (!childSchema)
-                    return undefined;
-                return (_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 ObjectFieldButtonPurpose.ADD:
+                return (_jsx(ObjectFieldAddButton, { ...(uiSchema?.["ui:addButtonOptions"]?.props ?? {}), onClick: onClick, children: uiSchema?.["ui:addButtonOptions"]?.content ?? "+" }));
+            case ObjectFieldButtonPurpose.REMOVE:
+                return (_jsx(ObjectFieldRemoveButton, { ...(uiSchema?.["ui:removeButtonOptions"]?.props ?? {}), onClick: onClick, children: uiSchema?.["ui:removeButtonOptions"]?.content ?? "-" }));
+            case ObjectFieldButtonPurpose.MOVE_UP:
+                return (_jsx(ObjectFieldUpButton, { ...(uiSchema?.["ui:upButtonOptions"]?.props ?? {}), onClick: onClick, children: uiSchema?.["ui:upButtonOptions"]?.content ?? "↑" }));
+            case ObjectFieldButtonPurpose.MOVE_DOWN:
+                return (_jsx(ObjectFieldDownButton, { ...(uiSchema?.["ui:downButtonOptions"]?.props ?? {}), onClick: onClick, children: uiSchema?.["ui:downButtonOptions"]?.content ?? "↓" }));
+            default:
+                return (_jsx(ObjectFieldButton, { ...(uiSchema?.["ui:customButtonOptions"]?.props ?? {}), onClick: onClick, children: uiSchema?.["ui:customButtonOptions"]?.content ?? "" }));
+        }
+    };
+    return (_jsxs(FieldTemplateComponent, { ...props, "data-fjsf-object": name, children: [orderedProperties
+                .map((child) => {
+                if (typeof child === "string") {
+                    const childSchema = properties?.[child];
+                    if (!childSchema)
+                        return undefined;
+                    return (_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 (_jsx(ObjectFieldSection, { title: title, collapsible: collapsible, children: fields.map((child2) => {
+                            const childSchema = properties?.[child2];
+                            if (!childSchema)
+                                return undefined;
+                            return (_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]) => (_jsxs(ObjectFieldItem, { children: [_jsx(SchemaField, { required: required?.includes(childName), name: name ? [name, childName].join(".") : childName, schema: typeof schema.additionalProperties !== "boolean"

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

@@ -0,0 +1,12 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useState } from "react";
+import { FormRegistry } from "../../FormRegistry";
+export const ObjectFieldSection = ({ title, collapsible, children, }) => {
+    const [collapsed, setCollapsed] = useState(collapsible);
+    const { components: { ObjectFieldSectionWrapper, ObjectFieldSectionTitle }, } = useContext(FormRegistry);
+    return (_jsxs(ObjectFieldSectionWrapper, { children: [_jsxs(ObjectFieldSectionTitle, { onClick: () => {
+                    if (collapsible) {
+                        setCollapsed((currentState) => !currentState);
+                    }
+                }, children: [collapsible && (collapsed ? "▸" : "▾"), title] }), !collapsed && children] }));
+};

package/dist/esm/Form/fields/ObjectField/index.js

@@ -0,0 +1,5 @@
+import { ObjectFieldSection } from "./ObjectFieldSection";
+import * as styledComponents from "./styledComponents";
+export * as fields from "./ObjectField";
+const components = { ...styledComponents, ObjectFieldSection };
+export { components };

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

@@ -0,0 +1,34 @@
+import { styled } from "styled-components";
+export const ObjectFieldList = styled.ul `
+  color: ${(props) => props.theme.text.default};
+  list-style-type: none;
+  padding: 0;
+`;
+export const ObjectFieldItem = styled.li `
+  color: ${(props) => props.theme.text.default};
+  display: flex;
+`;
+export const ObjectFieldItemButtons = styled.div `
+  display: flex;
+  margin: ${(props) => props.theme.spacing.s};
+`;
+export const ObjectFieldButton = 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;
+`;
+export const ObjectFieldLineButton = styled(ObjectFieldButton) ``;
+export const ObjectFieldUpButton = styled(ObjectFieldLineButton) ``;
+export const ObjectFieldDownButton = styled(ObjectFieldLineButton) ``;
+export const ObjectFieldRemoveButton = styled(ObjectFieldLineButton) ``;
+export const ObjectFieldAddButton = styled(ObjectFieldButton) ``;
+export const ObjectFieldSectionWrapper = styled.fieldset ``;
+export const ObjectFieldSectionTitle = styled.legend ``;

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useMemo } from "react";
+import { extractUiSchema } from "../../../utils";
+import { useSetDefault } from "../../hooks";
+import { FormRegistry } from "../../FormRegistry";
+export const RadioField = (props) => {
+    const { templates: { FieldTemplate }, components: { RadioFieldInput }, } = useContext(FormRegistry);
+    useSetDefault(props);
+    const { name, uiSchema } = props;
+    const { label, props: inputProps } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
+    return (_jsx(FieldTemplate, { ...props, "data-fjsf-boolean": name, children: _jsx(RadioFieldInput, { inputProps: inputProps, label: label, name: name }) }));
+};

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { FormRegistry } from "../../FormRegistry";
+export const RadioFieldInput = ({ label, inputProps, name, className, }) => {
+    const { components: { RadioFieldContainer, RadioFieldElement, RadioFieldInputElement, RadioFieldLabelTrue, RadioFieldLabelFalse, }, } = useContext(FormRegistry);
+    return (_jsxs(RadioFieldContainer, { className: className, children: [_jsxs(RadioFieldElement, { children: [_jsx(RadioFieldInputElement, { ...inputProps, name: name, type: "radio", value: "true" }), _jsx(RadioFieldLabelTrue, { children: label?.true ?? "true" })] }), _jsxs(RadioFieldElement, { children: [_jsx(RadioFieldInputElement, { ...inputProps, name: name, type: "radio", value: "false" }), _jsx(RadioFieldLabelFalse, { children: label?.false ?? "false" })] })] }));
+};

package/dist/esm/Form/fields/RadioField/index.js

@@ -0,0 +1,5 @@
+import { RadioFieldInput } from "./RadioFieldInput";
+import * as styledComponents from "./styledComponents";
+export * as fields from "./RadioField";
+const components = { ...styledComponents, RadioFieldInput };
+export { components };

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

@@ -0,0 +1,24 @@
+import { styled } from "styled-components";
+import { FieldInput } from "../../components/FieldInput";
+import { commonRadioStyles } from "../../styles/common";
+export const RadioFieldContainer = styled.div `
+  color: ${(props) => props.theme.text.default};
+  display: flex;
+  font-family: ${(props) => props.theme.typography.fontFamily.base};
+  gap: ${(props) => props.theme.spacing.l};
+  ${commonRadioStyles}
+`;
+export const RadioFieldElement = styled.label `
+  display: inline-flex;
+  align-items: center;
+`;
+export const RadioFieldInputElement = styled(FieldInput) `
+  margin: unset;
+  margin-top: ${(props) => props.theme.spacing.xxs};
+`;
+export const RadioFieldLabel = styled.span `
+  margin-left: ${(props) => props.theme.spacing.xs};
+  line-height: ${(props) => props.theme.typography.lineHeight.small};
+`;
+export const RadioFieldLabelTrue = styled(RadioFieldLabel) ``;
+export const RadioFieldLabelFalse = styled(RadioFieldLabel) ``;

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

@@ -1,11 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useContext, useMemo } from "react";
-import { getSchemaType, solveReferences } from "../utils";
-import { useExtractUiSchema } from "../hooks";
-import { FormRegistry } from "../Form";
-import { COMPONENT_TYPES } from "./types";
+import { extractUiSchema, getSchemaType, solveReferences, } from "../../../utils";
+import { FormRegistry } from "../../FormRegistry";
+import { COMPONENT_TYPES } from "../../../common/constants";
 const useFieldComponent = (schema, uiSchema, fields) => {
-    const { field } = useExtractUiSchema(uiSchema);
+    const { field } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
     if (typeof field === "function") {
         return field;
     }
@@ -16,10 +15,10 @@ const useFieldComponent = (schema, uiSchema, fields) => {
     if (Array.isArray(schemaType)) {
         schemaType = schemaType[0];
     }
-    const componentName = COMPONENT_TYPES[schemaType || "any"];
-    return componentName in fields
-        ? fields[componentName]
-        : fields.UnsupportedField;
+    const fieldName = COMPONENT_TYPES[schemaType || "any"];
+    return fieldName in fields
+        ? fields[fieldName]
+        : () => (_jsxs("p", { style: { color: "red" }, children: ["!!! Unsupported field \"", fieldName, "\" !!!"] }));
 };
 export const SchemaField = (props) => {
     const { schema, uiSchema } = props;

package/dist/esm/Form/fields/SchemaField/index.js

@@ -0,0 +1 @@
+export * as fields from "./SchemaField";

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useMemo } from "react";
+import { extractUiSchema, getEnums } from "../../../utils";
+import { useSetDefault } from "../../hooks";
+import { FormRegistry } from "../../FormRegistry";
+export const SearchableMultiTagSelectField = (props) => {
+    const { templates: { FieldTemplate }, components: { SearchableMultiTagSelectFieldInput }, } = useContext(FormRegistry);
+    useSetDefault(props);
+    const { name, uiSchema } = props;
+    const { placeholder, emptySearchMessage, props: inputProps, } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
+    const enums = useMemo(() => getEnums(props), [props]);
+    return (_jsx(FieldTemplate, { ...props, "data-fjsf-array": name, children: _jsx(SearchableMultiTagSelectFieldInput, { ...inputProps, name: name, placeholder: placeholder, emptySearchMessage: emptySearchMessage, enums: enums }) }));
+};

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

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

package/dist/esm/Form/fields/SearchableMultiTagSelectField/index.js

@@ -0,0 +1,5 @@
+import { SearchableMultiTagSelectFieldInput } from "./SearchableMultiTagSelectFieldInput";
+import * as styledComponents from "./styledComponents";
+export * as fields from "./SearchableMultiTagSelectField";
+const components = { ...styledComponents, SearchableMultiTagSelectFieldInput };
+export { components };

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

@@ -0,0 +1,65 @@
+import { styled } from "styled-components";
+import { FieldInput } from "../../components/FieldInput";
+import { commonInputStyles } from "../../styles/common";
+export const SearchableMultiTagSelectFieldContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  font-family: ${(props) => props.theme.typography.fontFamily.base};
+  ${commonInputStyles}
+`;
+export const SearchableMultiTagSelectFieldSearchContainer = styled.div `
+  display: inline-block;
+  position: relative;
+  width: fit-content;
+`;
+export const SearchableMultiTagSelectFieldInputElement = styled(FieldInput) `
+  width: 100%;
+`;
+export const SearchableMultiTagSelectFieldBadgeContainer = 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};
+`;
+export const SearchableMultiTagSelectFieldBadge = 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};
+`;
+export const SearchableMultiTagSelectFieldBadgeCloseElement = 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};
+`;
+export const SearchableMultiTagSelectFieldOptionList = 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;
+`;
+export const SearchableMultiTagSelectFieldOptionListItem = 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};
+  }
+`;
+export const SearchableMultiTagSelectFieldOptionListWithoutItem = 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/esm/{fields → Form/fields/SearchableSelectField}/SearchableSelectField.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext, useEffect, useMemo, useRef, useState, } from "react";
 import { useField } from "formik";
-import { FormRegistry } from "../Form";
-import { useExtractUiSchema, useSetDefault } from "../hooks";
-import { getEnums } from "../utils";
+import { extractUiSchema, getEnums } from "../../../utils";
+import { useSetDefault } from "../../hooks";
+import { FormRegistry } from "../../FormRegistry";
 export const SearchableSelectField = (props) => {
-    const { templates: { FieldTemplate }, components: { SearchableSelectContainer, SearchDropdownContainer, SearchListOption, SearchListExpand, SearchNotFound, SearchInput, SearchClearButton, SearchInputContainer, }, } = useContext(FormRegistry);
+    const { templates: { FieldTemplate }, components: { SearchableSelectFieldContainer, SearchableSelectFieldDropdownContainer, SearchableSelectFieldListOption, SearchableSelectFieldListExpand, SearchableSelectFieldNotFound, SearchableSelectFieldInputElement, SearchableSelectFieldClearButton, SearchableSelectFieldInputContainer, }, } = useContext(FormRegistry);
     useSetDefault(props);
     const ListOption = (props) => {
         const { isActive, children, ...rest } = props;
@@ -19,10 +19,10 @@ export const SearchableSelectField = (props) => {
                 });
             }
         }, [isActive]);
-        return (_jsx(SearchListOption, { ref: ref, ...rest, children: children }));
+        return (_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, } = useExtractUiSchema(uiSchema);
+    const { props: inputProps, placeholder, clearButtonText, expandText, notFoundMessage, hoverColors = { backgroundColor: "", color: "" }, hideClearButton = false, dropdown, } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
     const dropdownOptions = {
         show: false,
         height: "",
@@ -116,7 +116,9 @@ export const SearchableSelectField = (props) => {
     const fieldDataAttribute = schema.type === "string"
         ? { "data-fjsf-string": name }
         : { "data-fjsf-number": name };
-    return (_jsx(FieldTemplate, { ...props, ...fieldDataAttribute, children: _jsxs(SearchableSelectContainer, { ref: containerRef, onBlur: handleBlur, children: [_jsxs(SearchInputContainer, { children: [_jsx(SearchInput, { ...inputProps, name: name, type: "text", placeholder: placeholder, value: searchTerm, onChange: handleSearchChange, onFocus: handleFocus }), searchTerm && !hideClearButton && (_jsx(SearchClearButton, { onClick: handleClear, children: clearButtonText ?? "x" }))] }), showOptions && (_jsxs(SearchDropdownContainer, { role: "dropdown-list", ref: moreRef, style: {
+    return (_jsx(FieldTemplate, { ...props, ...fieldDataAttribute, children: _jsxs(SearchableSelectFieldContainer, { ref: containerRef, onBlur: handleBlur, children: [_jsxs(SearchableSelectFieldInputContainer, { children: [_jsx(SearchableSelectFieldInputElement, { ...inputProps, name: name, type: "text", placeholder: placeholder, value: searchTerm, onChange: handleSearchChange, onFocus: handleFocus }), searchTerm && !hideClearButton && (_jsx(SearchableSelectFieldClearButton, { onClick: handleClear, children: clearButtonText ?? "✕" }))] }), showOptions && (_jsxs(SearchableSelectFieldDropdownContainer, { role: "dropdown-list", 
+                    //ref={moreRef} //TODO
+                    style: {
                         maxHeight: dropdownOptions.height,
                         width: dropdownOptions.width,
                     }, children: [displayedItems.length > 0 ? (displayedItems.map((item, index) => (_jsx(ListOption, { isActive: index === selectedItemIndex, className: index === selectedItemIndex ? "selected-item-active" : "", style: index === selectedItemIndex
@@ -124,5 +126,9 @@ export const SearchableSelectField = (props) => {
                                     backgroundColor: hoverColors.backgroundColor,
                                     color: hoverColors.color,
                                 }
-                                : {}, role: "filtered-list", onClick: () => handleSelect(item), onMouseDown: (e) => e.preventDefault(), children: item.title }, index)))) : (_jsx(SearchNotFound, { onMouseDown: (e) => e.preventDefault(), children: notFoundMessage ?? "No match found" })), showMoreOption && (_jsx(SearchListExpand, { ref: moreRef, onMouseDown: (e) => e.preventDefault(), onClick: loadMoreItems, children: expandText ?? "More..." }))] }))] }) }));
+                                : {}, role: "filtered-list", onClick: () => handleSelect(item), onMouseDown: (e) => e.preventDefault(), children: item.title }, index)))) : (_jsx(SearchableSelectFieldNotFound, { onMouseDown: (e) => e.preventDefault(), children: notFoundMessage ?? "No match found" })), showMoreOption && (_jsx(SearchableSelectFieldListExpand
+                        //ref={moreRef} //TODO
+                        , { 
+                            //ref={moreRef} //TODO
+                            onMouseDown: (e) => e.preventDefault(), onClick: loadMoreItems, children: expandText ?? "More..." }))] }))] }) }));
 };

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

@@ -0,0 +1,4 @@
+export * as components from "./styledComponents";
+export * as fields from "./SearchableSelectField";
+//TODO: Export after figuring how to properly export them
+//export type * from "./types";

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

@@ -0,0 +1,47 @@
+import { styled } from "styled-components";
+import { FieldInput } from "../../components/FieldInput";
+import { SearchableMultiTagSelectFieldSearchContainer, SearchableMultiTagSelectFieldOptionList, SearchableMultiTagSelectFieldOptionListItem, } from "../SearchableMultiTagSelectField/styledComponents";
+export const SearchableSelectFieldContainer = styled(SearchableMultiTagSelectFieldSearchContainer) ``;
+export const SearchableSelectFieldDropdownContainer = styled(SearchableMultiTagSelectFieldOptionList) `
+  overflow-y: auto;
+  overflow-x: auto;
+  max-height: 6rem;
+  white-space: nowrap;
+`;
+export const SearchableSelectFieldListOption = styled(SearchableMultiTagSelectFieldOptionListItem) `
+  cursor: default;
+`;
+export const SearchableSelectFieldListExpand = styled(SearchableMultiTagSelectFieldOptionListItem) `
+  text-decoration: underline;
+  &:hover {
+    background: none;
+  }
+`;
+export const SearchableSelectFieldNotFound = styled(SearchableMultiTagSelectFieldOptionListItem) `
+  cursor: default;
+  &:hover {
+    background: none;
+  }
+`;
+export const SearchableSelectFieldInputElement = styled(FieldInput) `
+  width: 100%;
+  padding-right: ${(props) => props.theme.spacing.xxl};
+  text-overflow: ellipsis;
+`;
+export const SearchableSelectFieldClearButton = 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;
+`;
+export const SearchableSelectFieldInputContainer = styled.div `
+  display: flex;
+`;