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

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

@@ -1,143 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext, useEffect, useMemo, useRef, useState, } from "react";
-import { useField } from "formik";
-import { extractUiSchema, getEnums } from "../../../utils";
-import { useSetDefault } from "../../hooks";
-import { FormRegistry } from "../../FormRegistry";
-export const SearchableSelectField = (props) => {
-    const { templates, components: { SearchableSelectFieldContainer, SearchableSelectFieldDropdownContainer, SearchableSelectFieldListOption, SearchableSelectFieldListExpand, SearchableSelectFieldNotFound, SearchableSelectFieldInputElement, SearchableSelectFieldClearButton, SearchableSelectFieldInputContainer, }, } = useContext(FormRegistry);
-    useSetDefault(props);
-    const ListOption = (props) => {
-        const { isActive, children, ...rest } = props;
-        const ref = useRef();
-        useEffect(() => {
-            if (isActive) {
-                ref.current.scrollIntoView({
-                    behavior: "auto",
-                    block: "center",
-                    inline: "center",
-                });
-            }
-        }, [isActive]);
-        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, } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
-    const dropdownOptions = {
-        show: false,
-        height: "",
-        width: "",
-        perPage: 20,
-        ...dropdown,
-    };
-    const [{ value }, __, { setValue }] = useField(name);
-    const enums = useMemo(() => getEnums(props), [props]);
-    const options = enums?.values || [];
-    const [showOptions, setShowOptions] = useState(dropdownOptions?.show);
-    const [searchTerm, setSearchTerm] = useState(() => options.find((option) => option.const === value)?.title ?? "");
-    const [displayedItems, setDisplayedItems] = useState([]);
-    const [itemsToShow, setItemsToShow] = useState(dropdownOptions.perPage);
-    const [selectedItemIndex, setSelectedItemIndex] = useState(-1);
-    const moreRef = useRef(null);
-    const containerRef = useRef(null);
-    const loadMoreItems = () => {
-        setItemsToShow((prev) => prev + dropdownOptions.perPage);
-    };
-    useEffect(() => {
-        setDisplayedItems(options
-            .filter((option) => (option.title?.toLowerCase() ?? "").includes(searchTerm.toLowerCase()))
-            .slice(0, itemsToShow));
-    }, [itemsToShow, options, searchTerm]);
-    const handleKeyPress = (event) => {
-        if (showOptions) {
-            switch (event.key) {
-                case "ArrowUp": {
-                    const calcValue = selectedItemIndex - 1;
-                    const newValue = calcValue < -1 ? -1 : calcValue;
-                    return setSelectedItemIndex(newValue);
-                }
-                case "ArrowDown": {
-                    const calcValue = selectedItemIndex + 1;
-                    const newValue = calcValue >= displayedItems.length - 1
-                        ? displayedItems.length - 1
-                        : calcValue;
-                    return setSelectedItemIndex(newValue);
-                }
-                case "Escape": {
-                    return setShowOptions(false);
-                }
-                case "Enter": {
-                    const item = displayedItems[selectedItemIndex];
-                    if (item) {
-                        return handleSelect(item);
-                    }
-                    return;
-                }
-            }
-        }
-    };
-    useEffect(() => {
-        // attach the event listener
-        document.addEventListener("keydown", handleKeyPress);
-        // remove the event listener
-        return () => {
-            document.removeEventListener("keydown", handleKeyPress);
-        };
-    }, [handleKeyPress]);
-    const handleSearchChange = (event) => {
-        if (schema.readOnly)
-            return;
-        setSearchTerm(event.target.value);
-        setItemsToShow(dropdownOptions.perPage);
-        setShowOptions(true);
-        setSelectedItemIndex(-1);
-        onChange?.(event);
-    };
-    const handleSelect = (item) => {
-        setSearchTerm(item.title ?? "");
-        setValue(item.const);
-        setShowOptions(false);
-        onSelect?.(item.const);
-    };
-    const handleFocus = () => {
-        if (schema.readOnly)
-            return;
-        setShowOptions(true);
-    };
-    const handleBlur = (event) => {
-        if (containerRef.current &&
-            !containerRef.current.contains(event.relatedTarget)) {
-            setShowOptions(false);
-        }
-    };
-    const handleClear = () => {
-        if (schema.readOnly)
-            return;
-        setSearchTerm("");
-        setValue(undefined);
-    };
-    const filteredOptions = options.filter((option) => (option.title?.toLowerCase() ?? "").includes(searchTerm.toLowerCase()));
-    const showMoreOption = displayedItems.length < filteredOptions.length &&
-        displayedItems.length >= dropdownOptions.perPage;
-    const fieldDataAttribute = schema.type === "string"
-        ? { "data-fjsf-string": name }
-        : { "data-fjsf-number": name };
-    const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
-        templates[props.uiSchema?.["ui:template"]]) ??
-        templates.FieldTemplate;
-    return (_jsx(SelectedFieldTemplate, { ...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, readOnly: schema.readOnly }), searchTerm && !hideClearButton && (_jsx(SearchableSelectFieldClearButton, { onClick: handleClear, disabled: schema.readOnly, children: clearButtonText ?? "✕" }))] }), showOptions && !schema.readOnly && (_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
-                                ? {
-                                    backgroundColor: hoverColors.backgroundColor,
-                                    color: hoverColors.color,
-                                }
-                                : {}, 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

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

@@ -1,50 +0,0 @@
-import { readableColor } from "polished";
-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.button `
-  background-color: ${(props) => props.theme.color.palette.neutral[500]};
-  border-radius: ${(props) => props.theme.borderRadius.circle};
-  bottom: 0;
-  color: ${(props) => readableColor(props.theme.color.palette.neutral[500])};
-  cursor: pointer;
-  font-size: ${(props) => props.theme.typography.size.small};
-  height: 1rem;
-  line-height: 1rem;
-  margin: auto;
-  min-width: 1rem;
-  position: absolute;
-  right: ${(props) => props.theme.spacing.xs};
-  text-align: center;
-  top: 0;
-`;
-export const SearchableSelectFieldInputContainer = styled.div `
-  display: flex;
-`;

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

@@ -1,40 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext, useMemo } from "react";
-import { useFormikContext } from "formik";
-import { extractUiSchema, getEnums } from "../../../utils";
-import { FormRegistry } from "../../FormRegistry";
-import { useSetDefault } from "../../hooks";
-import { StringFieldWrapper } from "./styledComponents";
-export const StringField = (props) => {
-    const { templates, components: { FieldInput, SelectFieldInput }, } = useContext(FormRegistry);
-    useSetDefault(props);
-    const { name, uiSchema = {}, schema } = props;
-    const { type, placeholder, props: inputProps, } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
-    const enums = useMemo(() => getEnums(props), [props]);
-    const form = useFormikContext();
-    const fieldDataAttribute = schema.type === "string"
-        ? { "data-fjsf-string": name }
-        : { "data-fjsf-number": name };
-    const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
-        templates[props.uiSchema?.["ui:template"]]) ??
-        templates.FieldTemplate;
-    switch (enums?.type) {
-        case "select":
-            return (_jsx(SelectedFieldTemplate, { ...props, ...fieldDataAttribute, children: _jsx(StringFieldWrapper, { children: _jsxs(SelectFieldInput, { type,
-                        readOnly: props.schema.readOnly,
-                        ...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: [_jsx("option", { value: "", disabled: false,
-                                hidden: true,
-                                ...uiSchema["ui:placeholderOptionOptions"]?.props, children: placeholder }), enums?.values.map((option, index) => (_jsx("option", { value: option.const.toString(), children: option.title }, index)))] }) }) }));
-        default:
-            return (_jsx(SelectedFieldTemplate, { ...props, ...fieldDataAttribute, children: _jsx(StringFieldWrapper, { children: _jsx(FieldInput, { type,
-                        placeholder,
-                        readOnly: props.schema.readOnly,
-                        ...inputProps, name: name }) }) }));
-    }
-};

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

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

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

@@ -1,3 +0,0 @@
-import { styled } from "styled-components";
-import { CommonFieldWrapper } from "../../styles/common";
-export const StringFieldWrapper = styled(CommonFieldWrapper) ``;

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

@@ -1,17 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext, useMemo } from "react";
-import { extractUiSchema } from "../../../utils";
-import { FormRegistry } from "../../FormRegistry";
-import { useSetDefault } from "../../hooks";
-export const TextAreaField = (props) => {
-    const { templates, components: { TextAreaFieldInput }, } = useContext(FormRegistry);
-    useSetDefault(props);
-    const { name, uiSchema } = props;
-    const { placeholder, 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-string": name, children: _jsx(TextAreaFieldInput, { placeholder,
-            readOnly: props.schema.readOnly,
-            ...inputProps, name: name, formikAs: "textarea" }) }));
-};

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

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

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

@@ -1,11 +0,0 @@
-import styled from "styled-components";
-import { FieldInput } from "../../components/FieldInput";
-export const TextAreaFieldInput = styled(FieldInput) `
-  background-color: ${(props) => props.theme.color.background.input};
-  color: ${(props) => props.theme.color.text.default};
-  display: inline-block;
-  font-family: ${(props) => props.theme.typography.fontFamily.base};
-  font-size: ${(props) => props.theme.typography.size.base};
-  min-height: 5rem;
-  padding: ${(props) => props.theme.spacing.s};
-`;

package/dist/esm/Form/fields/ToggleField/ToggleField.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 ToggleField = (props) => {
-    const { templates, components: { ToggleFieldInput }, } = useContext(FormRegistry);
-    useSetDefault(props);
-    const { name, uiSchema } = props;
-    const { 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(ToggleFieldInput, { inputProps: { readOnly: props.schema.readOnly, ...inputProps }, name: name }) }));
-};

package/dist/esm/Form/fields/ToggleField/ToggleFieldInput.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 ToggleFieldInput = ({ inputProps, name, className, }) => {
-    const { components: { ToggleFieldLabel, ToggleFieldInputElement, ToggleFieldToggle, }, } = useContext(FormRegistry);
-    return (_jsxs(ToggleFieldLabel, { className: className, children: [_jsx(ToggleFieldInputElement, { ...inputProps, name: name, type: "checkbox" }), _jsx(ToggleFieldToggle, {})] }));
-};

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

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

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

@@ -1,55 +0,0 @@
-import { styled } from "styled-components";
-import { FieldInput } from "../../components/FieldInput";
-export const ToggleFieldToggle = styled.span `
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  height: 1rem;
-  background: ${(props) => props.theme.color.intent.default.none};
-  border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.color.border.default}`};
-  -webkit-transition: 0.4s;
-  transition: 0.4s;
-  border-radius: ${(props) => props.theme.borderRadius.circle};
-
-  &:before {
-    position: absolute;
-    content: "";
-    height: 0.9rem;
-    width: 0.9rem;
-    background: ${(props) => props.theme.color.background.default};
-    -webkit-transition: 0.4s;
-    transition: 0.4s;
-    border-radius: ${(props) => props.theme.borderRadius.circle};
-    top: 0.05rem;
-    left: 0.13rem;
-  }
-`;
-export const ToggleFieldLabel = styled.label `
-  position: relative;
-  display: inline-block;
-  width: 2rem;
-
-  &:has(input[readonly]) {
-    pointer-events: none;
-  }
-`;
-export const ToggleFieldInputElement = styled(FieldInput) `
-  opacity: 0;
-  width: 0;
-  height: 0;
-
-  &:checked + ${ToggleFieldToggle} {
-    //background: ${(props) => props.theme.color.background.input};
-  }
-
-  &:focus + ${ToggleFieldToggle} {
-    ${(props) => props.theme.focus.default};
-  }
-
-  &:checked + ${ToggleFieldToggle}:before {
-    transform: translateX(0.75rem);
-  }
-`;

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

@@ -1,57 +0,0 @@
-import * as AnyField from "./AnyField";
-import * as ArrayField from "./ArrayField";
-import * as BooleanField from "./BooleanField";
-import * as DateField from "./DateField";
-import * as FileUploadField from "./FileUploadField";
-import * as FilesUploadField from "./FilesUploadField";
-import * as MultipleChoiceField from "./MultipleChoiceField";
-import * as NullField from "./NullField";
-import * as NumberField from "./NumberField";
-import * as ObjectField from "./ObjectField";
-import * as RadioField from "./RadioField";
-import * as SchemaField from "./SchemaField";
-import * as SearchableMultiTagSelectField from "./SearchableMultiTagSelectField";
-import * as SearchableSelectField from "./SearchableSelectField";
-import * as StringField from "./StringField";
-import * as TextAreaField from "./TextAreaField";
-import * as ToggleField from "./ToggleField";
-//Please keep this in alphabetical order
-export const fieldComponents = {
-    //...AnyField.components, // AnyField doesn't have components
-    ...ArrayField.components,
-    ...BooleanField.components,
-    //...DateField.components, // DateField uses FieldInput (maybe it should wrap it)
-    ...FileUploadField.components,
-    ...FilesUploadField.components,
-    ...MultipleChoiceField.components,
-    //...NullField.components, // NullField doesn't have components
-    //...NumberField.components, // NumberField uses StringField (maybe bit too directly)
-    ...ObjectField.components,
-    ...RadioField.components,
-    //...SchemaField.components,  // SchemaField doesn't have components
-    ...SearchableMultiTagSelectField.components,
-    ...SearchableSelectField.components,
-    //...StringField.components, // StringField uses FieldInput (maybe it should wrap it)
-    ...TextAreaField.components,
-    ...ToggleField.components,
-};
-//Please keep this in alphabetical order
-export const fields = {
-    ...AnyField.fields,
-    ...ArrayField.fields,
-    ...BooleanField.fields,
-    ...DateField.fields,
-    ...FileUploadField.fields,
-    ...FilesUploadField.fields,
-    ...MultipleChoiceField.fields,
-    ...NullField.fields,
-    ...NumberField.fields,
-    ...ObjectField.fields,
-    ...RadioField.fields,
-    ...SchemaField.fields,
-    ...SearchableMultiTagSelectField.fields,
-    ...SearchableSelectField.fields,
-    ...StringField.fields,
-    ...TextAreaField.fields,
-    ...ToggleField.fields,
-};

package/dist/esm/Form/hooks/index.js

@@ -1 +0,0 @@
-export * from "./useSetDefault";

package/dist/esm/Form/hooks/useSetDefault.js

@@ -1,28 +0,0 @@
-import { useEffect } from "react";
-import { useField } from "formik";
-import { getDefaultValueForType } from "../../utils";
-export const useSetDefault = (props) => {
-    if (!props.name)
-        return;
-    const [{ value }, , { setValue }] = useField(props.name);
-    useEffect(() => {
-        let newValue = value;
-        if (!newValue) {
-            if (props.schema.default !== undefined) {
-                if (props.schema.format === "date" && props.schema.default === "now") {
-                    const today = new Date().toISOString().split("T")[0];
-                    newValue = today;
-                }
-                else {
-                    newValue = props.schema.default;
-                }
-            }
-            else if (props.forceDefaultValue) {
-                newValue = getDefaultValueForType(props.schema.type);
-            }
-        }
-        if (newValue && newValue !== value) {
-            setValue(newValue);
-        }
-    }, []);
-};

package/dist/esm/Form/index.js

@@ -1,7 +0,0 @@
-export * from "./hooks";
-import { fields as FormFields } from "./fields";
-import { components as FormComponents } from "./components";
-import { templates as FormTemplates } from "./templates";
-export * from "./Form";
-export * from "./FormRegistry";
-export { FormComponents, FormFields, FormTemplates };