ehscan-react-components 0.1.34 → 0.1.36

package/dist/DropDown.js

@@ -3,6 +3,47 @@ import { useEffect, useState, useRef, forwardRef, useImperativeHandle } from "re
 export const DropDown = forwardRef(({ openDropDown, display, addItem, searchTerm, maxDropDownEntries, maxDropDownHeight }, ref) => {
     const [position, setPosition] = useState({ top: 0, left: 0, width: 0, maxHeight: 0 });
     const containerRef = useRef(null);
+    const [tabId, setTabId] = useState(undefined);
+    const itemRefs = useRef([]);
+    useEffect(() => {
+        if (!openDropDown || display.length === 0)
+            return;
+        const handleKeyDown = (e) => {
+            if (e.key === 'ArrowDown') {
+                setTabId(prevTabId => {
+                    var _a;
+                    const next = prevTabId === undefined || prevTabId >= display.length - 1 ? 0 : prevTabId + 1;
+                    // scroll into view
+                    (_a = itemRefs.current[next]) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'nearest',
+                    });
+                    return next;
+                });
+            }
+            if (e.key === 'ArrowUp') {
+                setTabId(prevTabId => {
+                    var _a;
+                    const next = prevTabId === undefined || prevTabId <= 0 ? display.length - 1 : prevTabId - 1;
+                    (_a = itemRefs.current[next]) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'nearest',
+                    });
+                    return next;
+                });
+            }
+            if (e.key === "Enter" && tabId !== undefined) {
+                console.log('use', display[tabId]);
+                addItem(tabId);
+                setTabId(0);
+            }
+            // Add other keys here if needed
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown); // cleanup
+        };
+    }, [openDropDown, display, tabId]);
     useImperativeHandle(ref, () => ({
         calc: () => {
             console.log("calc");
@@ -76,5 +117,5 @@ export const DropDown = forwardRef(({ openDropDown, display, addItem, searchTerm
                     top: position.top,
                     left: position.left,
                     width: position.width
-                }, children: [maxDropDownEntries !== undefined && (_jsxs("div", { className: "dropdown-amount-row", children: [display.length, " / ", maxDropDownEntries, " entries"] })), _jsx("div", { className: "ext-window-dropdown-wrapper _ewb", style: { maxHeight: `${position.maxHeight}px`, }, children: display.map((item, index) => (_jsx("div", { className: "dropdown-item", onClick: () => addDropDownItem(index), children: _jsx(HighlightedText, { text: item, searchTerm: searchTerm }) }, index))) })] }))] }));
+                }, children: [maxDropDownEntries !== undefined && (_jsxs("div", { className: "dropdown-amount-row", children: [display.length, " / ", maxDropDownEntries, " entries"] })), _jsx("div", { className: "ext-window-dropdown-wrapper _ewb", style: { maxHeight: `${position.maxHeight}px`, }, children: display.map((item, index) => (_jsx("div", { ref: el => { itemRefs.current[index] = el; }, className: `dropdown-item ${index === tabId ? 'focused' : ''}`, tabIndex: 0, onClick: () => addDropDownItem(index), onFocus: () => setTabId(index), children: _jsx(HighlightedText, { text: item, searchTerm: searchTerm }) }, index))) })] }))] }));
 });

package/dist/TextAreaDropDown.js

@@ -123,9 +123,9 @@ export const TextAreaDropDown = ({ id, tabIndex, alwaysOpenDropDown, closeComman
         }
     };
     const blurInput = () => {
-        setOpenDropDown(false);
-        setNewBtn(false);
-        setSearchTerm('');
+        // setOpenDropDown(false)
+        // setNewBtn(false)
+        // setSearchTerm('')
     };
     if (!tags)
         return null;

package/dist/style/input-dropdown.css

@@ -375,4 +375,8 @@ input:-webkit-autofill:active {
     min-width: 0;
     width: 100%;
     box-sizing: border-box;
+}
+
+.dropdown-item.focused{
+    border: 1px solid red
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ehscan-react-components",
-  "version": "0.1.34",
+  "version": "0.1.36",
   "description": "components",
   "main": "dist/Components.js",
   "types": "dist/Components.d.ts",