@nolwenture/formik-jsonschema-form 0.17.0 → 0.19.0

package/README.md

@@ -409,6 +409,8 @@ export function MyFormComponent() {
 Enum fields are fields with multiple options to either choose `oneOf` or `anyOf` from.
 There is an alternative field implementation for "anyOf" that when given `"ui:field": "SearchMultiTagSelectField"` results in a searchable multi tag select field.
 
+A searchable single select field is also available for `oneOf` and `enum`. To use it, add the following to the field's uiSchema: `"ui:field": "SearchableSelectField"`
+
 The type of the field holding the enum is defined by its return value. `oneOf` enums will only return a single value and therefore, the type of the returned value is used as the field type (in the following example, "number" is the correct field type).
 
 `anyOf`enums will return the value(s) inside an array, even if only one option was selected. Therefore, the correct field type for the field holding the `anyOf`-enum is "array".
@@ -451,6 +453,16 @@ const schema = {
         { const: 4, title: "four" },
       ],
     },
+    enumSearchableOneOf: {
+      type: "string",
+      title: "Enum searchable select oneOf",
+      oneOf: [
+        { const: "one", title: "One" },
+        { const: "two", title: "Two" },
+        { const: "three", title: "Three" },
+        { const: "four", title: "Four" },
+      ],
+    },
   },
 };
 
@@ -462,6 +474,15 @@ const uiSchema = {
       emptySearchMessage: "...no matching results found",
     },
   },
+  enumSearchableOneOf: {
+    "ui:field": "SearchableSelectField",
+    "ui:options": {
+      placeholder: "Search...",
+      clearButtonText: "Clear",
+      expandText: "More results",
+      emptySearchMessage: "...no matching results found",
+    },
+  },
 };
 ```
 

package/dist/fields/SearchableSelectField.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { FieldProps } from "../types";
+export declare const SearchableSelectField: React.FC<FieldProps>;

package/dist/fields/SearchableSelectField.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef, useContext, useMemo } from "react";
+import { useExtractUiSchema, useSetDefault } from "../hooks";
+import { FormRegistry } from "../Form";
+import { useField } from "formik";
+import { getEnums } from "../utils";
+export const SearchableSelectField = (props) => {
+    const { templates: { FieldTemplate }, components: { SearchableSelectContainer, SearchDropdownContainer, SearchListOption, SearchListExpand, SearchNotFound, SearchInput, SearchClearButton, SearchInputContainer, }, } = useContext(FormRegistry);
+    useSetDefault(props);
+    const { name, uiSchema } = props;
+    const { props: inputProps, placeholder, clearButtonText, expandText, notFoundMessage, } = useExtractUiSchema(uiSchema);
+    const [{ value }, __, { setValue }] = useField(name);
+    const enums = useMemo(() => getEnums(props), [props]);
+    const options = (enums === null || enums === void 0 ? void 0 : enums.values) || [];
+    const [showOptions, setShowOptions] = useState(false);
+    const [searchTerm, setSearchTerm] = useState(() => { var _a, _b; return (_b = (_a = options.find((option) => option.const === value)) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : ""; });
+    const [displayedItems, setDisplayedItems] = useState([]);
+    const [itemsToShow, setItemsToShow] = useState(10);
+    const moreRef = useRef(null);
+    const containerRef = useRef(null);
+    const loadMoreItems = () => {
+        setItemsToShow((prev) => prev + 10);
+    };
+    useEffect(() => {
+        setDisplayedItems(options
+            .filter((option) => { var _a, _b; return ((_b = (_a = option.title) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== null && _b !== void 0 ? _b : "").includes(searchTerm.toLowerCase()); })
+            .slice(0, itemsToShow));
+    }, [itemsToShow, options, searchTerm]);
+    const handleSearchChange = (event) => {
+        setSearchTerm(event.target.value);
+        setItemsToShow(10);
+        setShowOptions(true);
+    };
+    const handleSelect = (item) => {
+        var _a;
+        setSearchTerm((_a = item.title) !== null && _a !== void 0 ? _a : "");
+        setValue(item.const);
+        setShowOptions(false);
+    };
+    const handleFocus = () => {
+        setShowOptions(true);
+    };
+    const handleBlur = (event) => {
+        if (containerRef.current &&
+            !containerRef.current.contains(event.relatedTarget)) {
+            setShowOptions(false);
+        }
+    };
+    const handleClear = () => {
+        setSearchTerm("");
+        setValue(undefined);
+    };
+    const filteredOptions = options.filter((option) => { var _a, _b; return ((_b = (_a = option.title) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== null && _b !== void 0 ? _b : "").includes(searchTerm.toLowerCase()); });
+    const showMoreOption = displayedItems.length < filteredOptions.length &&
+        displayedItems.length >= 10;
+    return (_jsx(FieldTemplate, Object.assign({}, props, { children: _jsxs(SearchableSelectContainer, { ref: containerRef, onBlur: handleBlur, children: [_jsxs(SearchInputContainer, { children: [_jsx(SearchInput, Object.assign({}, inputProps, { name: name, type: "text", placeholder: placeholder, value: searchTerm, onChange: handleSearchChange, onFocus: handleFocus })), searchTerm && (_jsx(SearchClearButton, { onClick: handleClear, children: clearButtonText !== null && clearButtonText !== void 0 ? clearButtonText : "x" }))] }), showOptions && (_jsxs(SearchDropdownContainer, { role: "dropdown-list", ref: moreRef, children: [displayedItems.length > 0 ? (displayedItems.map((item, index) => (_jsx(SearchListOption, { role: "filtered-list", onClick: () => handleSelect(item), onMouseDown: (e) => e.preventDefault(), children: item.title }, index)))) : (_jsx(SearchNotFound, { onMouseDown: (e) => e.preventDefault(), children: notFoundMessage !== null && notFoundMessage !== void 0 ? notFoundMessage : "No match found" })), showMoreOption && (_jsx(SearchListExpand, { ref: moreRef, onMouseDown: (e) => e.preventDefault(), onClick: loadMoreItems, children: expandText !== null && expandText !== void 0 ? expandText : "More..." }))] }))] }) })));
+};

package/dist/fields/index.d.ts

@@ -10,5 +10,6 @@ export * from "./AnyField";
 export * from "./RadioField";
 export * from "./ToggleField";
 export * from "./SearchMultiTagSelectField";
+export * from "./SearchableSelectField";
 export * from "./MultipleChoiceField";
 export * from "./TextAreaField";

package/dist/fields/index.js

@@ -10,5 +10,6 @@ export * from "./AnyField";
 export * from "./RadioField";
 export * from "./ToggleField";
 export * from "./SearchMultiTagSelectField";
+export * from "./SearchableSelectField";
 export * from "./MultipleChoiceField";
 export * from "./TextAreaField";

package/dist/sampleData/completeSchema.js

@@ -68,6 +68,27 @@ export const completeSchema = {
                 { const: "dragon", title: "dragon" },
             ],
         },
+        searchableSelect: {
+            type: "string",
+            title: "Enum searchable select oneOf",
+            description: "Enum searchable select oneOf description",
+            oneOf: [
+                { const: "cat", title: "cat" },
+                { const: "dog", title: "dog" },
+                { const: "bunny", title: "bunny" },
+                { const: "canary", title: "canary" },
+                { const: "hamster", title: "hamster" },
+                { const: "goldfish", title: "goldfish" },
+                { const: "dragon", title: "dragon" },
+                { const: "lizard", title: "lizard" },
+                { const: "frog", title: "frog" },
+                { const: "parrot", title: "parrot" },
+                { const: "turtle", title: "turtle" },
+                { const: "raccoon", title: "raccoon" },
+                { const: "tiger", title: "tiger" },
+                { const: "lion", title: "lion" },
+            ],
+        },
         null: { type: "null", title: "Null", description: "Null description" },
         nested: {
             type: "object",
@@ -293,5 +314,14 @@ export const completeUiSchema = {
             emptySearchMessage: "...no matching results found",
         },
     },
+    searchableSelect: {
+        "ui:field": "SearchableSelectField",
+        "ui:options": {
+            placeholder: "Search...",
+            clearButtonText: "X",
+            expandText: "More results",
+            emptySearchMessage: "...no matching results found",
+        },
+    },
     textArea: { "ui:field": "TextAreaField" },
 };

package/dist/styledComponents.d.ts

@@ -167,6 +167,7 @@ export declare const RadioButtonField: {
 };
 export declare const MultipleChoiceField: ({ inputProps, name, className, enums, style, }: MultipleChoiceFieldProps) => import("react/jsx-runtime").JSX.Element;
 export declare const MultiSelectContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const MultiSelectSearchContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
 export declare const MultiSelectInput: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<Omit<import("styled-components/dist/types").FastOmit<Omit<Omit<any, "as">, "ref"> & {
     ref?: unknown;
 }, never>, "ref"> & {
@@ -184,6 +185,7 @@ export declare const SearchableMultiTagSelectField: {
     ({ name, placeholder, enums, emptySearchMessage, closeElement, className, }: SelectFieldProps): import("react/jsx-runtime").JSX.Element;
     styles: {
         MultiSelectContainerStyle: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+        MultiSelectSearchContainerStyle: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
         MultiSelectInputStyle: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<Omit<import("styled-components/dist/types").FastOmit<Omit<Omit<any, "as">, "ref"> & {
             ref?: unknown;
         }, never>, "ref"> & {
@@ -214,4 +216,28 @@ export declare const Icon: import("styled-components").IStyledComponent<"web", i
 export declare const CollapsibleChildWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
 export declare const CollapsibleObjectFieldWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, never>>;
 export declare const CollapsibleObjectFieldTitle: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>, never>>;
+export declare const SearchableSelectContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<Omit<import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+}, never>> & Omit<import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>, keyof React.Component<any, {}, any>>;
+export declare const SearchDropdownContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<Omit<import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLUListElement | null) => void) | React.RefObject<HTMLUListElement> | null | undefined;
+}, never>> & Omit<import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>>, keyof React.Component<any, {}, any>>;
+export declare const SearchListOption: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<Omit<import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLLIElement | null) => void) | React.RefObject<HTMLLIElement> | null | undefined;
+}, never>> & Omit<import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>>, keyof React.Component<any, {}, any>>;
+export declare const SearchListExpand: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<Omit<import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLLIElement | null) => void) | React.RefObject<HTMLLIElement> | null | undefined;
+}, never>> & Omit<import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>>, keyof React.Component<any, {}, any>>;
+export declare const SearchNotFound: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<Omit<import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLLIElement | null) => void) | React.RefObject<HTMLLIElement> | null | undefined;
+}, never>> & Omit<import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>>, keyof React.Component<any, {}, any>>;
+export declare const SearchInput: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<Omit<import("styled-components/dist/types").FastOmit<Omit<Omit<any, "as">, "ref"> & {
+    ref?: unknown;
+}, never>, "ref"> & {
+    ref?: unknown;
+}, never>> & Omit<import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<Omit<Omit<any, "as">, "ref"> & {
+    ref?: unknown;
+}, never>> & Omit<({ formikAs, ...props }: Omit<formik.FieldAttributes<any>, "as">) => import("react/jsx-runtime").JSX.Element, keyof React.Component<any, {}, any>>, keyof React.Component<any, {}, any>>;
+export declare const SearchClearButton: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>;
+export declare const SearchInputContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
 export {};

package/dist/styledComponents.js

@@ -293,7 +293,14 @@ export const MultiSelectContainer = styled.div `
   display: flex;
   flex-direction: column;
 `;
-export const MultiSelectInput = styled(FieldInput) ``;
+export const MultiSelectSearchContainer = styled.div `
+  display: inline-block;
+  position: relative;
+  width: fit-content;
+`;
+export const MultiSelectInput = styled(FieldInput) `
+  width: 100%;
+`;
 export const MultiSelectBadgeContainer = styled.div `
   margin: 0.3em 0;
   display: inline-flex;
@@ -313,13 +320,15 @@ export const MultiSelectBadgeCloseElement = styled.span `
   font-family: sans-serif;
 `;
 export const MultiSelectOptionList = styled.ul `
+  width: 100%;
   padding: unset;
   margin: unset;
   border: 1px solid gray;
   border-radius: 0.2em;
   position: absolute;
   background: white;
-  margin: 1.3em 0;
+  top: 100%;
+  z-index: 1000;
 `;
 export const MultiSelectOptionListItem = styled.li `
   cursor: pointer;
@@ -345,22 +354,23 @@ export const SearchableMultiTagSelectField = ({ name, placeholder, enums, emptyS
     };
     return (_jsx(formik.Field, { className: className, name: name, multiple: true, children: ({ field, form: { setFieldValue }, meta, }) => {
             var _a;
-            return (_jsxs(MultiSelectContainer, { className: className, children: [_jsx(FieldInput, Object.assign({ id: className, type: "hidden" }, field)), _jsx(MultiSelectInput, { id: className + "_id", className: className, type: "text", onChange: (e) => {
-                            setSearch(e.currentTarget.value);
-                        }, placeholder: placeholder, value: search }), _jsx(MultiSelectBadgeContainer, { children: ((_a = field.value) !== null && _a !== void 0 ? _a : []).map((value) => {
+            return (_jsxs(MultiSelectContainer, { className: className, children: [_jsx(FieldInput, Object.assign({ id: className, type: "hidden" }, field)), _jsxs(MultiSelectSearchContainer, { children: [_jsx(MultiSelectInput, { id: className + "_id", className: className, type: "text", onChange: (e) => {
+                                    setSearch(e.currentTarget.value);
+                                }, placeholder: placeholder, value: search }), search.length > 0 && (_jsx(MultiSelectOptionList, { children: searchIncludedInEnum() ? (enums === null || enums === void 0 ? void 0 : enums.values.filter((item) => { var _a; return !((_a = field.value) !== null && _a !== void 0 ? _a : []).includes(item.const); }).filter((value) => value.title.toLowerCase().includes(search.toLowerCase())).map((option, index) => (_jsx(MultiSelectOptionListItem, { value: option.const, onClick: () => {
+                                        var _a;
+                                        setFieldValue(name, [
+                                            ...new Set([...((_a = field.value) !== null && _a !== void 0 ? _a : []), option.const]),
+                                        ]);
+                                        setSearch("");
+                                    }, children: option.title }, index)))) : (_jsx(MultiSelectOptionListWithoutItem, { children: emptySearchMessage !== null && emptySearchMessage !== void 0 ? emptySearchMessage : "No match found" })) }))] }), _jsx(MultiSelectBadgeContainer, { children: ((_a = field.value) !== null && _a !== void 0 ? _a : []).map((value) => {
                             var _a;
                             return (_jsxs(MultiSelectBadge, { children: [(_a = enums === null || enums === void 0 ? void 0 : enums.values.find((option) => option.const === value)) === null || _a === void 0 ? void 0 : _a.title, _jsx(MultiSelectBadgeCloseElement, { onClick: () => setFieldValue(name, field.value.filter((v) => v !== value)), children: closeElement !== null && closeElement !== void 0 ? closeElement : "x" })] }, value));
-                        }) }), search.length > 0 && (_jsx(MultiSelectOptionList, { children: searchIncludedInEnum() ? (enums === null || enums === void 0 ? void 0 : enums.values.filter((item) => { var _a; return !((_a = field.value) !== null && _a !== void 0 ? _a : []).includes(item.const); }).filter((value) => value.title.toLowerCase().includes(search.toLowerCase())).map((option, index) => (_jsx(MultiSelectOptionListItem, { value: option.const, onClick: () => {
-                                var _a;
-                                setFieldValue(name, [
-                                    ...new Set([...((_a = field.value) !== null && _a !== void 0 ? _a : []), option.const]),
-                                ]);
-                                setSearch("");
-                            }, children: option.title }, index)))) : (_jsx(MultiSelectOptionListWithoutItem, { children: emptySearchMessage !== null && emptySearchMessage !== void 0 ? emptySearchMessage : "No match found" })) })), meta.touched && meta.error && (_jsx("div", { className: "error", children: meta.error }))] }));
+                        }) }), meta.touched && meta.error && (_jsx("div", { className: "error", children: meta.error }))] }));
         } }));
 };
 SearchableMultiTagSelectField.styles = {
     MultiSelectContainerStyle: MultiSelectContainer,
+    MultiSelectSearchContainerStyle: MultiSelectSearchContainer,
     MultiSelectInputStyle: MultiSelectInput,
     MultiSelectBadgeContainerStyle: MultiSelectBadgeContainer,
     MultiSelectBadgeStyle: MultiSelectBadge,
@@ -402,3 +412,47 @@ export const Icon = styled.div `
 export const CollapsibleChildWrapper = styled.div ``;
 export const CollapsibleObjectFieldWrapper = ObjectFieldWrapper;
 export const CollapsibleObjectFieldTitle = ObjectFieldTitle;
+export const SearchableSelectContainer = styled(MultiSelectSearchContainer) ``;
+export const SearchDropdownContainer = styled(MultiSelectOptionList) `
+  overflow-y: auto;
+  overflow-x: auto;
+  max-height: 6rem;
+  white-space: nowrap;
+`;
+export const SearchListOption = styled(MultiSelectOptionListItem) `
+  cursor: default;
+`;
+export const SearchListExpand = styled(MultiSelectOptionListItem) `
+  text-decoration: underline;
+  &:hover {
+    background: none;
+  }
+`;
+export const SearchNotFound = styled(MultiSelectOptionListItem) `
+  cursor: default;
+  &:hover {
+    background: none;
+  }
+`;
+export const SearchInput = styled(FieldInput) `
+  width: 100%;
+  padding-right: 1.5em;
+  text-overflow: ellipsis;
+`;
+export const SearchClearButton = styled.span `
+  cursor: pointer;
+  position: absolute;
+  right: 0.3em;
+  bottom: 0;
+  top: 0;
+  margin: auto;
+  background-color: #ccc;
+  border-radius: 50%;
+  line-height: 1em;
+  min-width: 1em;
+  height: 1em;
+  text-align: center;
+`;
+export const SearchInputContainer = styled.div `
+  display: flex;
+`;

package/dist/types.d.ts

@@ -147,6 +147,14 @@ export type ComponentsType = {
     BooleanFieldWrapper: React.FunctionComponent<any>;
     CollapsibleObjectFieldWrapper: React.FunctionComponent<any>;
     CollapsibleObjectFieldTitle: React.FunctionComponent<any>;
+    SearchableSelectContainer: React.FunctionComponent<any>;
+    SearchDropdownContainer: React.FunctionComponent<any>;
+    SearchListOption: React.FunctionComponent<any>;
+    SearchListExpand: React.FunctionComponent<any>;
+    SearchNotFound: React.FunctionComponent<any>;
+    SearchInput: React.FunctionComponent<any>;
+    SearchClearButton: React.FunctionComponent<any>;
+    SearchInputContainer: React.FunctionComponent<any>;
 };
 export declare enum ObjectFieldButtonPurpose {
     ADD = 0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nolwenture/formik-jsonschema-form",
-  "version": "0.17.0",
+  "version": "0.19.0",
   "description": "Formik form generation from json schema",
   "author": "Antti Vikman <antti.vikman@nolwenture.com>",
   "contributors": [