@nolwenture/formik-jsonschema-form 2.0.2 → 3.0.0-beta.1

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

@@ -1,186 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useField, useFormikContext } from "formik";
-import { useContext, useEffect, useMemo } from "react";
-import { ObjectFieldWrapper } from "./styledComponents";
-import { extractUiSchema, getHiddenProperties, immutablySwapItems, orderAdditionalProperties, orderByUiSchema, resolveSchema, } from "../../../utils";
-import { useSetDefault } from "../../hooks";
-import { FormRegistry } from "../../FormRegistry";
-import { ObjectFieldButtonPurpose } from "./types";
-const DEFAULT_FIELD = {
-    type: "string",
-    _fieldType: "string",
-    "ui:title": "",
-};
-const useObjectField = (name) => {
-    if (!name) {
-        const { values = {}, setValues } = useFormikContext();
-        return { value: values, setValue: setValues };
-    }
-    const [{ value = {} }, _, { setValue }] = useField(name);
-    return { value, setValue };
-};
-export const ObjectField = (props) => {
-    const { fields: { SchemaField }, templates, components: { ObjectFieldItem, ObjectFieldItemButtons, ObjectFieldButton, ObjectFieldAddButton, ObjectFieldRemoveButton, ObjectFieldUpButton, ObjectFieldDownButton, ObjectFieldSection, }, hideUnmarkedAdditionalProperties, onAdditionalPropertyOrderChange, } = useContext(FormRegistry);
-    useSetDefault(props);
-    const { name, schema, uiSchema } = props;
-    const { type, props: inputProps, isCollapsible, order, disabled, } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
-    const { value, setValue } = useObjectField(name);
-    const [{ properties, additionalProperties, required }, valuesToRemove] = useMemo(() => {
-        return resolveSchema(schema, value);
-    }, [schema, value]);
-    useEffect(() => {
-        if (valuesToRemove.length > 0) {
-            const newValue = valuesToRemove.reduce((prevValue, key) => {
-                const { [key]: _removedProperty, ...newValue } = prevValue;
-                return newValue;
-            }, value);
-            setValue(newValue);
-        }
-    }, [valuesToRemove]);
-    const propertyKeys = useMemo(() => Object.keys(properties || {}), [properties]);
-    const additionalPropertyKeys = useMemo(() => Object.keys(value || {}).filter((key) => !propertyKeys.includes(key)), [value, propertyKeys]);
-    const orderedProperties = orderByUiSchema(order, propertyKeys);
-    const hiddenProperties = getHiddenProperties(order, propertyKeys);
-    const orderedAdditionalProperties = orderAdditionalProperties(order, additionalPropertyKeys);
-    const hiddenAdditionalProperties = getHiddenProperties(order, additionalPropertyKeys);
-    const getObjectFieldButton = ({ purpose, onClick, uiSchema, }) => {
-        const { removeButton, upButton, downButton, addButton, customButton } = extractUiSchema(uiSchema);
-        switch (purpose) {
-            case ObjectFieldButtonPurpose.ADD:
-                return (_jsx(ObjectFieldAddButton, { ...(addButton?.props ?? {}), onClick: onClick, children: addButton?.content ?? "+" }));
-            case ObjectFieldButtonPurpose.REMOVE:
-                return (_jsx(ObjectFieldRemoveButton, { ...(removeButton?.props ?? {}), onClick: onClick, children: removeButton?.content ?? "-" }));
-            case ObjectFieldButtonPurpose.MOVE_UP:
-                return (_jsx(ObjectFieldUpButton, { ...(upButton?.props ?? {}), onClick: onClick, children: upButton?.content ?? "↑" }));
-            case ObjectFieldButtonPurpose.MOVE_DOWN:
-                return (_jsx(ObjectFieldDownButton, { ...(downButton?.props ?? {}), onClick: onClick, children: downButton?.content ?? "↓" }));
-            default:
-                return (_jsx(ObjectFieldButton, { ...(customButton?.props ?? {}), onClick: onClick, children: customButton?.content ?? "" }));
-        }
-    };
-    const SelectedObjectFieldTemplate = (uiSchema?.["ui:template"] &&
-        templates[uiSchema?.["ui:template"]]) ??
-        (isCollapsible
-            ? templates.CollapsibleObjectFieldTemplate
-            : templates.ObjectFieldTemplate);
-    const showAdditionalProperties = !hideUnmarkedAdditionalProperties || !!additionalProperties;
-    return (_jsx(ObjectFieldWrapper, { children: _jsxs(SelectedObjectFieldTemplate, { ...props, "data-fjsf-object": name || "ROOT", "data-fjsf-level": !name ? 0 : name.split(".").length, children: [orderedProperties
-                    .map((child) => {
-                    if (typeof child === "string") {
-                        const childSchema = properties?.[child];
-                        if (!childSchema)
-                            return undefined;
-                        const childUiSchema = {
-                            ...(uiSchema?.properties ?? {}),
-                            ...(uiSchema?.[`> ${child}`] ?? uiSchema?.[child] ?? {}),
-                        };
-                        return (_jsx(SchemaField, { required: required?.includes(child), name: name ? [name, child].join(".") : child, schema: prepareChildSchema(childSchema, schema), uiSchema: childUiSchema }, 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;
-                                const childUiSchema = {
-                                    ...(uiSchema?.properties ?? {}),
-                                    ...(uiSchema?.[`> ${child2}`] ??
-                                        uiSchema?.[child2] ??
-                                        {}),
-                                };
-                                return (_jsx(SchemaField, { name: name ? [name, child2].join(".") : child2, schema: prepareChildSchema(childSchema, schema), uiSchema: childUiSchema }, child2));
-                            }) }, fields.join("_")));
-                    }
-                })
-                    .filter((x) => x), hiddenProperties.map((child) => {
-                    const childSchema = properties?.[child];
-                    if (!childSchema)
-                        return undefined;
-                    const childUiSchema = {
-                        ...(uiSchema?.properties ?? {}),
-                        ...(uiSchema?.[`> ${child}`] ?? uiSchema?.[child] ?? {}),
-                    };
-                    return (_jsx(SchemaField, { required: required?.includes(child), name: name ? [name, child].join(".") : child, schema: prepareChildSchema(childSchema, schema), uiSchema: {
-                            ...childUiSchema,
-                            props: {
-                                ...childUiSchema?.props,
-                                wrapper: {
-                                    ...childUiSchema?.props?.wrapper,
-                                    style: {
-                                        ...childUiSchema?.props?.wrapper?.style,
-                                        display: "none",
-                                    },
-                                },
-                            },
-                        }, style: { display: "none" } }, child));
-                }), showAdditionalProperties &&
-                    orderedAdditionalProperties.map((childName, index) => {
-                        const childUiSchema = {
-                            ...(uiSchema?.additionalProperties ?? {}),
-                            ...(uiSchema?.properties ?? {}),
-                            ...(uiSchema?.[`> ${childName}`] ?? uiSchema?.[childName] ?? {}),
-                        };
-                        return (_jsxs(ObjectFieldItem, { children: [_jsx(SchemaField, { required: required?.includes(childName), name: name ? [name, childName].join(".") : childName, schema: prepareChildSchema(schema.additionalProperties, schema), uiSchema: childUiSchema }, childName), _jsxs(ObjectFieldItemButtons, { children: [onAdditionalPropertyOrderChange &&
-                                            index > 0 &&
-                                            getObjectFieldButton({
-                                                purpose: ObjectFieldButtonPurpose.MOVE_UP,
-                                                onClick: () => {
-                                                    onAdditionalPropertyOrderChange(name, orderedAdditionalProperties, immutablySwapItems(orderedAdditionalProperties, index, index - 1));
-                                                },
-                                                uiSchema,
-                                            }), onAdditionalPropertyOrderChange &&
-                                            index < orderedAdditionalProperties.length - 1 &&
-                                            getObjectFieldButton({
-                                                purpose: ObjectFieldButtonPurpose.MOVE_DOWN,
-                                                onClick: () => {
-                                                    onAdditionalPropertyOrderChange(name, orderedAdditionalProperties, immutablySwapItems(orderedAdditionalProperties, index, index + 1));
-                                                },
-                                                uiSchema,
-                                            }), getObjectFieldButton({
-                                            purpose: ObjectFieldButtonPurpose.REMOVE,
-                                            onClick: () => {
-                                                const { [childName]: _removedProperty, ...newValue } = value;
-                                                setValue(newValue);
-                                                if (onAdditionalPropertyOrderChange) {
-                                                    const nextOrder = orderedAdditionalProperties.filter((k) => k !== childName);
-                                                    onAdditionalPropertyOrderChange(name, orderedAdditionalProperties, nextOrder);
-                                                }
-                                            },
-                                            uiSchema,
-                                        })] })] }, childName));
-                    }), showAdditionalProperties &&
-                    hiddenAdditionalProperties.map((childName) => {
-                        const childUiSchema = {
-                            ...(uiSchema?.additionalProperties ?? {}),
-                            ...(uiSchema?.properties ?? {}),
-                            ...(uiSchema?.[`> ${childName}`] ?? uiSchema?.[childName] ?? {}),
-                        };
-                        return (_jsx(ObjectFieldItem, { style: { display: "none" }, children: _jsx(SchemaField, { required: required?.includes(childName), name: name ? [name, childName].join(".") : childName, schema: prepareChildSchema(schema.additionalProperties, schema), uiSchema: childUiSchema }, childName) }, childName));
-                    }), additionalProperties &&
-                    getObjectFieldButton({
-                        purpose: ObjectFieldButtonPurpose.ADD,
-                        onClick: () => {
-                            const key = prompt("Give key");
-                            if (!key)
-                                return;
-                            if (Object.prototype.hasOwnProperty.call(value, key))
-                                return;
-                            const newValue = { ...value, [key]: DEFAULT_FIELD };
-                            setValue(newValue);
-                            if (onAdditionalPropertyOrderChange) {
-                                const nextOrder = [...orderedAdditionalProperties, key];
-                                onAdditionalPropertyOrderChange(name, orderedAdditionalProperties, nextOrder);
-                            }
-                        },
-                        uiSchema,
-                    })] }) }));
-};
-function prepareChildSchema(childSchema, parentSchema) {
-    if (!childSchema || typeof childSchema === "boolean") {
-        return {};
-    }
-    if (parentSchema.readOnly) {
-        return { ...childSchema, readOnly: parentSchema.readOnly };
-    }
-    return childSchema;
-}

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

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

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

@@ -1,5 +0,0 @@
-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

@@ -1,47 +0,0 @@
-import { styled } from "styled-components";
-import { CommonFieldWrapper } from "../../styles/common";
-import { Button } from "@nolwenture/component-library/src/components/Button";
-export const IconWrapper = styled.div `
-  display: flex;
-`;
-export const ObjectFieldWrapper = styled(CommonFieldWrapper) ``;
-export const ObjectFieldItem = styled.li `
-  color: ${(props) => props.theme.color.text.default};
-  display: flex;
-`;
-export const ObjectFieldItemButtons = styled.div `
-  align-items: flex-start;
-  display: flex;
-  gap: ${(props) => props.theme.spacing.s};
-  margin: ${(props) => props.theme.spacing.s};
-`;
-export const ObjectFieldButton = styled(Button) `
-  line-height: 1;
-  padding: ${(props) => `${props.theme.spacing.s} ${props.theme.spacing.m}`};
-  justify-content: center;
-`;
-export const ObjectFieldUpButton = styled(ObjectFieldButton) ``;
-export const ObjectFieldDownButton = styled(ObjectFieldButton) ``;
-export const ObjectFieldRemoveButton = styled(ObjectFieldButton) ``;
-export const ObjectFieldAddButton = styled(ObjectFieldButton) ``;
-export const ObjectFieldSectionWrapper = styled.fieldset `
-  display: flex;
-  flex-direction: column;
-  gap: ${(props) => props.theme.spacing.m};
-  padding: ${(props) => props.theme.spacing.s}
-    ${(props) => props.theme.spacing.l} ${(props) => props.theme.spacing.s}
-    ${(props) => props.theme.spacing.s};
-`;
-export const ObjectFieldSectionTitle = styled.legend `
-  display: flex;
-  gap: ${(props) => props.theme.spacing.s};
-  float: left;
-  width: 100%;
-  margin: 0;
-  justify-content: space-between;
-`;
-export const ObjectFieldSectionChildrenWrapper = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: ${(props) => props.theme.spacing.m};
-`;

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

@@ -1,7 +0,0 @@
-export var ObjectFieldButtonPurpose;
-(function (ObjectFieldButtonPurpose) {
-    ObjectFieldButtonPurpose[ObjectFieldButtonPurpose["ADD"] = 0] = "ADD";
-    ObjectFieldButtonPurpose[ObjectFieldButtonPurpose["REMOVE"] = 1] = "REMOVE";
-    ObjectFieldButtonPurpose[ObjectFieldButtonPurpose["MOVE_UP"] = 2] = "MOVE_UP";
-    ObjectFieldButtonPurpose[ObjectFieldButtonPurpose["MOVE_DOWN"] = 3] = "MOVE_DOWN";
-})(ObjectFieldButtonPurpose || (ObjectFieldButtonPurpose = {}));

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

@@ -1,15 +0,0 @@
-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, components: { RadioFieldInput }, } = useContext(FormRegistry);
-    useSetDefault(props);
-    const { name, uiSchema } = props;
-    const { label, props: inputProps } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
-    const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
-        templates[props.uiSchema?.["ui:template"]]) ??
-        templates.FieldTemplate;
-    return (_jsx(SelectedFieldTemplate, { ...props, "data-fjsf-boolean": name, children: _jsx(RadioFieldInput, { inputProps: { readOnly: props.schema.readOnly, ...inputProps }, label: label, name: name }) }));
-};

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

@@ -1,7 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,75 +0,0 @@
-import { styled } from "styled-components";
-import { readableColor } from "polished";
-import { FieldInput } from "../../components/FieldInput";
-import { CommonCheckboxStyles } from "../../styles/common";
-export const RadioFieldContainer = styled(CommonCheckboxStyles) `
-  color: ${(props) => props.theme.color.text.default};
-  display: flex;
-  flex-direction: column;
-  font-family: ${(props) => props.theme.typography.fontFamily.base};
-  gap: ${(props) => props.theme.spacing.s};
-
-  &:has(input[readonly]) {
-    flex-direction: column;
-    gap: ${(props) => props.theme.spacing.xxs};
-  }
-
-  input[type="radio"] {
-    -webkit-appearance: none;
-    appearance: none;
-    background-color: ${(props) => props.theme.color.background.input};
-    border-radius: ${(props) => props.theme.borderRadius.circle};
-    border: ${(props) => props.theme.strokeWidth.thin} solid
-      ${(props) => props.theme.color.border.default};
-    color: ${(props) => readableColor(props.theme.color.background.input)};
-    cursor: pointer;
-    display: grid;
-    font: inherit;
-    height: ${(props) => props.theme.spacing.l};
-    margin: 0;
-    place-content: center;
-    width: ${(props) => props.theme.spacing.l};
-
-    &:before {
-      background-color: CanvasText; //support for forced-colors
-      border-radius: ${(props) => props.theme.borderRadius.circle};
-      content: "";
-      display: inline-block;
-      height: ${(props) => props.theme.spacing.s};
-      transform: scale(0);
-      transition: 0.12s transform ease-in-out;
-      width: ${(props) => props.theme.spacing.s};
-    }
-
-    &:focus {
-      ${(props) => props.theme.focus.default};
-    }
-
-    &:checked {
-      background-color: ${(props) => props.theme.color.intent.default.none};
-
-      &:before {
-        transform: scale(1);
-      }
-    }
-
-    &[readonly] {
-      background-color: transparent;
-    }
-  }
-`;
-export const RadioFieldElement = styled.label `
-  display: inline-flex;
-  align-items: center;
-
-  &:has(input[readonly]) {
-    pointer-events: none;
-  }
-`;
-export const RadioFieldInputElement = styled(FieldInput) ``;
-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/Form/fields/SchemaField/SchemaField.js

@@ -1,34 +0,0 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { useContext, useMemo } from "react";
-import { extractUiSchema, getSchemaType, solveReferences, } from "../../../utils";
-import { FormRegistry } from "../../FormRegistry";
-import { COMPONENT_TYPES } from "../../../common/constants";
-const useFieldComponent = (schema, uiSchema, fields) => {
-    const { field } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
-    if (typeof field === "function") {
-        return field;
-    }
-    if (typeof field === "string" && field in fields) {
-        return fields[field];
-    }
-    let schemaType = getSchemaType(schema);
-    if (Array.isArray(schemaType)) {
-        schemaType = schemaType[0];
-    }
-    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;
-    const { fields, definitions, uiSchemaDefinitions } = useContext(FormRegistry);
-    const schemaSolvedForReferences = useMemo(() => solveReferences(schema, definitions, uiSchema, uiSchemaDefinitions), [schema, definitions]);
-    const FieldComponent = useFieldComponent(schemaSolvedForReferences.schema, schemaSolvedForReferences.uiSchema, fields);
-    const newProps = {
-        ...props,
-        schema: schemaSolvedForReferences.schema,
-        uiSchema: schemaSolvedForReferences.uiSchema,
-    };
-    return _jsx(FieldComponent, { ...newProps });
-};

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

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

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

@@ -1,16 +0,0 @@
-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, components: { SearchableMultiTagSelectFieldInput }, } = useContext(FormRegistry);
-    useSetDefault(props);
-    const { name, uiSchema, schema } = props;
-    const { placeholder, emptySearchMessage, props: inputProps, } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
-    const enums = useMemo(() => getEnums(props), [props]);
-    const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
-        templates[props.uiSchema?.["ui:template"]]) ??
-        templates.FieldTemplate;
-    return (_jsx(SelectedFieldTemplate, { ...props, "data-fjsf-array": name, children: _jsx(SearchableMultiTagSelectFieldInput, { ...inputProps, name: name, placeholder: placeholder, emptySearchMessage: emptySearchMessage, enums: enums, readOnly: schema.readOnly }) }));
-};

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

@@ -1,23 +0,0 @@
-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, disabled, readOnly, }) => {
-    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, readOnly: readOnly, disabled: disabled }), search.length > 0 && !disabled && !readOnly && (_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)), disabled: disabled || readOnly, children: closeElement ?? "✕" })] }, value))) }), meta.touched && meta.error && (_jsx("div", { className: "error", children: meta.error }))] })) }));
-};

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

@@ -1,5 +0,0 @@
-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

@@ -1,68 +0,0 @@
-import { styled } from "styled-components";
-import { FieldInput } from "../../components/FieldInput";
-import { CommonFieldWrapper } from "../../styles/common";
-export const SearchableMultiTagSelectFieldContainer = styled(CommonFieldWrapper) `
-  display: flex;
-  flex-direction: column;
-  font-family: ${(props) => props.theme.typography.fontFamily.base};
-  
-`;
-export const SearchableMultiTagSelectFieldSearchContainer = styled.div `
-  display: flex;
-  flex-direction: column;
-`;
-export const SearchableMultiTagSelectFieldInputElement = styled(FieldInput) `
-`;
-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.div `
-  color: ${(props) => props.theme.color.background.input};
-  background: ${(props) => props.theme.color.text.default};
-  padding: ${(props) => `0 ${props.theme.spacing.s}`};
-  border-radius: ${(props) => props.theme.borderRadius.none};
-  display: flex;
-  margin-right: ${(props) => props.theme.spacing.xs};
-  gap: ${(props) => props.theme.spacing.s};
-`;
-export const SearchableMultiTagSelectFieldBadgeCloseElement = styled.button `
-  background: transparent;
-  color: ${(props) => props.theme.color.background.input};
-  border: none;
-  cursor: pointer;
-  margin: 0;
-  padding: 0;
-  font-size: ${(props) => props.theme.typography.size.small};
-  align-self: center;
-  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.color.border.default}`};
-  border-radius: ${(props) => props.theme.borderRadius.none};
-  position: absolute;
-  background: ${(props) => props.theme.color.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.color.background.input};
-  }
-`;
-export const SearchableMultiTagSelectFieldOptionListWithoutItem = styled.li `
-  cursor: default;
-  color: ${(props) => props.theme.color.background.default};
-  list-style-type: none;
-  padding: ${(props) => `${props.theme.spacing.xxs} ${props.theme.spacing.xs}`};
-  height: ${(props) => props.theme.spacing.xl};
-`;