@nolwenture/formik-jsonschema-form 0.20.0 → 0.21.0

package/dist/fields/SearchableSelectField.js

@@ -1,21 +1,48 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 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 { useContext, useEffect, useMemo, useRef, useState, } from "react";
 import { useField } from "formik";
+import { FormRegistry } from "../Form";
+import { useExtractUiSchema, useSetDefault } from "../hooks";
 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 ListOption = (props) => {
+        const { isActive, children } = props, rest = __rest(props, ["isActive", "children"]);
+        const ref = useRef();
+        useEffect(() => {
+            if (isActive) {
+                ref.current.scrollIntoView({
+                    behavior: "smooth",
+                    block: "center",
+                    inline: "center",
+                });
+            }
+        }, [isActive]);
+        return (_jsx(SearchListOption, Object.assign({ ref: ref }, rest, { children: children })));
+    };
+    const { name, uiSchema, onChange } = props;
+    const { props: inputProps, placeholder, clearButtonText, expandText, notFoundMessage, hoverColors = {}, hideClearButton = false, showOptionsMenu = false, // makes CSS styling easier
+     } = 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 [showOptions, setShowOptions] = useState(showOptionsMenu);
     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 [selectedItem, setSelectedItem] = useState(-1);
     const moreRef = useRef(null);
     const containerRef = useRef(null);
     const loadMoreItems = () => {
@@ -26,10 +53,48 @@ export const SearchableSelectField = (props) => {
             .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 handleKeyPress = (event) => {
+        if (showOptions) {
+            switch (event.key) {
+                case "ArrowUp": {
+                    const calcValue = selectedItem - 1;
+                    const newValue = calcValue < -1 ? -1 : calcValue;
+                    return setSelectedItem(newValue);
+                }
+                case "ArrowDown": {
+                    const calcValue = selectedItem + 1;
+                    const newValue = calcValue >= displayedItems.length - 1
+                        ? displayedItems.length - 1
+                        : calcValue;
+                    return setSelectedItem(newValue);
+                }
+                case "Escape": {
+                    return setShowOptions(false);
+                }
+                case "Enter": {
+                    const item = displayedItems[selectedItem];
+                    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) => {
         setSearchTerm(event.target.value);
         setItemsToShow(10);
         setShowOptions(true);
+        setSelectedItem(-1);
+        onChange === null || onChange === void 0 ? void 0 : onChange(event);
     };
     const handleSelect = (item) => {
         var _a;
@@ -53,5 +118,10 @@ export const SearchableSelectField = (props) => {
     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..." }))] }))] }) })));
+    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 && !hideClearButton && (_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(ListOption, { isActive: index === selectedItem, style: index === selectedItem
+                                ? {
+                                    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 !== 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/utils/createValidationSchema.js

@@ -123,10 +123,11 @@ export function createValidationSchema(schema, definitions = {}, condition) {
     const schemaDefinitions = Object.assign(Object.assign({}, definitions), ((_a = schema.definitions) !== null && _a !== void 0 ? _a : {}));
     const requiredFields = schema.required;
     function getValue(schema, key) {
-        const type = schema.type;
+        let type = schema.type;
         let yupSchema;
         if (schema.properties) {
             yupSchema = createValidationSchema(schema, schemaDefinitions);
+            type = type !== null && type !== void 0 ? type : "object";
         }
         else {
             yupSchema = getYupType(type);

package/package.json

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