@luomus/laji-form 15.1.56 → 15.1.57

package/lib/components/widgets/SelectWidget.js

@@ -91,12 +91,12 @@ function SearchableDrowndown(props) {
         : "", [enumOptions]);
     const [filterTerm, setFilterTerm] = react_1.useState(undefined);
     const [isOpen, show, hide] = utils_1.useBooleanSetter(false);
-    const displayedEnums = react_1.useMemo(() => {
+    const filteredEnums = react_1.useMemo(() => {
         return filterTerm !== undefined && filterTerm !== ""
             ? enumOptions.filter(({ label }) => label.toLowerCase().match(filterTerm.toLowerCase()))
             : enumOptions;
     }, [filterTerm, enumOptions]);
-    const [activeIdx, activeIdxUp, activeIdxDown, setActiveIdx] = useRangeIncrementor((displayedEnums || []).length, getDefaultActiveIdx(displayedEnums, value));
+    const [activeIdx, activeIdxUp, activeIdxDown, setActiveIdx] = useRangeIncrementor((filteredEnums || []).length, getDefaultActiveIdx(filteredEnums, value));
     const inputValue = filterTerm !== null && filterTerm !== void 0 ? filterTerm : getLabelFromValue(value);
     const showAndSelectText = react_1.useCallback(() => {
         var _a;
@@ -111,9 +111,9 @@ function SearchableDrowndown(props) {
     const onItemSelected = react_1.useCallback((item) => {
         onChange(item.value);
         setFilterTerm(undefined);
-        setActiveIdx(displayedEnums.findIndex(enu => enu.value === item.value));
+        setActiveIdx(enumOptions.findIndex(enu => enu.value === item.value));
         hide();
-    }, [displayedEnums, hide, onChange, setActiveIdx]);
+    }, [enumOptions, hide, onChange, setActiveIdx]);
     const onBlur = react_1.useCallback((e) => {
         // Fixes the issue that when user tries to click an enum item, `setOpen(false)`
         // hides the enum list, so the elem list item is hidden before the click, thus never
@@ -121,14 +121,14 @@ function SearchableDrowndown(props) {
         if (e.relatedTarget && utils_1.isDescendant(containerRef.current, e.relatedTarget)) {
             return;
         }
-        if (activeIdx !== undefined && displayedEnums[activeIdx]) {
-            onItemSelected(displayedEnums[activeIdx]);
+        if (activeIdx !== undefined && filteredEnums[activeIdx]) {
+            onItemSelected(filteredEnums[activeIdx]);
         }
         else {
             setFilterTerm(undefined);
         }
         hide();
-    }, [activeIdx, displayedEnums, hide, onItemSelected]);
+    }, [activeIdx, filteredEnums, hide, onItemSelected]);
     const onKeyDown = react_1.useCallback((e) => {
         switch (e.key) {
             case "ArrowDown":
@@ -150,22 +150,22 @@ function SearchableDrowndown(props) {
                 e.preventDefault();
                 break;
             case "Enter":
-                if (activeIdx !== undefined && displayedEnums) {
-                    onItemSelected(displayedEnums[activeIdx]);
+                if (activeIdx !== undefined && filteredEnums) {
+                    onItemSelected(filteredEnums[activeIdx]);
                 }
                 e.preventDefault();
                 break;
             case "Escape":
                 setFilterTerm(undefined);
-                setActiveIdx(getDefaultActiveIdx(displayedEnums, value));
+                setActiveIdx(getDefaultActiveIdx(filteredEnums, value));
                 e.preventDefault();
                 break;
         }
-    }, [activeIdx, activeIdxDown, activeIdxUp, displayedEnums, isOpen, onItemSelected, setActiveIdx, showAndSelectText, value]);
+    }, [activeIdx, activeIdxDown, activeIdxUp, filteredEnums, isOpen, onItemSelected, setActiveIdx, showAndSelectText, value]);
     return (React.createElement("div", { onBlur: onBlur, onKeyDown: onKeyDown, ref: containerRef, style: { position: "relative" }, className: "laji-form-dropdown-container" },
         React.createElement(FormControl, { disabled: disabled || readonly, id: id, onClick: showAndSelectText, onFocus: showAndSelectText, value: inputValue, onChange: onInputChange, autoComplete: "off", ref: inputRef }),
         React.createElement(Caret, null),
-        React.createElement("div", { className: `laji-form-dropdown laji-form-dropdown-${isOpen ? "open" : "closed"}`, style: { position: "absolute" }, tabIndex: -1, ref: dropdownRef }, displayedEnums.map((oneOf, idx) => {
+        React.createElement("div", { className: `laji-form-dropdown laji-form-dropdown-${isOpen ? "open" : "closed"}`, style: { position: "absolute" }, tabIndex: -1, ref: dropdownRef }, filteredEnums.map((oneOf, idx) => {
             var _a;
             return (React.createElement(ListItem, { key: (_a = oneOf.value) !== null && _a !== void 0 ? _a : "", onSelected: onItemSelected, active: idx === activeIdx }, oneOf));
         }))));
@@ -189,7 +189,7 @@ function SearchableMultiDrowndown(props) {
     React.useEffect(() => {
         setFilterTerm(inputValue);
     }, [inputValue]);
-    const displayedEnums = React.useMemo(() => {
+    const filteredEnums = React.useMemo(() => {
         if (!enumOptions) {
             return [];
         }
@@ -201,7 +201,7 @@ function SearchableMultiDrowndown(props) {
                 || label.toLowerCase().match(filterTerm.toLowerCase()))
             : notAlreadySelected;
     }, [filterTerm, enumOptions, value]);
-    const [activeIdx, activeIdxUp, activeIdxDown, setActiveIdx] = useRangeIncrementor((displayedEnums || []).length, undefined);
+    const [activeIdx, activeIdxUp, activeIdxDown, setActiveIdx] = useRangeIncrementor((filteredEnums || []).length, undefined);
     const onItemSelected = react_1.useCallback((item) => {
         var _a;
         onChange([...(value || []), item.value]);
@@ -263,13 +263,13 @@ function SearchableMultiDrowndown(props) {
         }
         setBlurred();
         hide();
-        if (activeIdx !== undefined && displayedEnums[activeIdx]) {
-            onItemSelectedByBlur(displayedEnums[activeIdx]);
+        if (activeIdx !== undefined && filteredEnums[activeIdx]) {
+            onItemSelectedByBlur(filteredEnums[activeIdx]);
         }
         else {
             setUserTypedInputValue("");
         }
-    }, [activeIdx, displayedEnums, hide, onItemSelectedByBlur, setBlurred]);
+    }, [activeIdx, filteredEnums, hide, onItemSelectedByBlur, setBlurred]);
     const onKeyDown = react_1.useCallback((e) => {
         switch (e.key) {
             case "ArrowDown":
@@ -281,7 +281,7 @@ function SearchableMultiDrowndown(props) {
                 e.preventDefault();
                 break;
             case "Enter":
-                activeIdx !== undefined && displayedEnums && onItemSelected(displayedEnums[activeIdx]);
+                activeIdx !== undefined && filteredEnums && onItemSelected(filteredEnums[activeIdx]);
                 e.preventDefault();
                 break;
             case "Escape":
@@ -297,7 +297,7 @@ function SearchableMultiDrowndown(props) {
                 }
                 break;
         }
-    }, [activeIdx, activeIdxDown, activeIdxUp, displayedEnums, inputValue, onChange, onItemSelected, setActiveIdx, value]);
+    }, [activeIdx, activeIdxDown, activeIdxUp, filteredEnums, inputValue, onChange, onItemSelected, setActiveIdx, value]);
     /* eslint-disable @typescript-eslint/no-non-null-assertion */
     const onDelete = react_1.useCallback((enu) => {
         const filtered = value.filter(v => v !== enu.value);
@@ -320,7 +320,7 @@ function SearchableMultiDrowndown(props) {
             React.createElement("input", { disabled: disabled || readonly, id: id, onFocus: onFocus, value: inputValue, onChange: onInputChange, autoComplete: "off", ref: inputRef }),
             loading && React.createElement(react_spinner_1.default, null)),
         React.createElement(Caret, null),
-        React.createElement("div", { className: `laji-form-dropdown laji-form-dropdown-${isOpen ? "open" : "closed"}`, style: { position: "absolute", zIndex: 99999 }, tabIndex: -1 }, displayedEnums.map((oneOf, idx) => {
+        React.createElement("div", { className: `laji-form-dropdown laji-form-dropdown-${isOpen ? "open" : "closed"}`, style: { position: "absolute", zIndex: 99999 }, tabIndex: -1 }, filteredEnums.map((oneOf, idx) => {
             var _a;
             return (React.createElement(ListItem, { key: (_a = oneOf.value) !== null && _a !== void 0 ? _a : "", onSelected: onItemSelected, active: idx === activeIdx }, oneOf));
         }))));
@@ -340,6 +340,6 @@ function ListItem({ onSelected, active, children }) {
     }, [children, onSelected]);
     return (React.createElement("div", { onClick: onClick, className: utils_1.classNames("laji-form-dropdown-item", active && "active"), tabIndex: -1 }, children.label));
 }
-const getDefaultActiveIdx = (displayedEnums, value) => value !== undefined && value !== ""
-    ? displayedEnums.findIndex(item => item.value === value)
+const getDefaultActiveIdx = (filteredEnums, value) => value !== undefined && value !== ""
+    ? filteredEnums.findIndex(item => item.value === value)
     : 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luomus/laji-form",
-  "version": "15.1.56",
+  "version": "15.1.57",
   "description": "React module capable of building dynamic forms from Laji form json schemas",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",