ehscan-react-components 0.1.25 → 0.1.27

package/dist/DropDown.js

@@ -3,14 +3,12 @@ import { useEffect, useState, useRef, forwardRef, useImperativeHandle } from "re
 export const DropDown = forwardRef(({ openDropDown, display, addItem, searchTerm, maxDropDownEntries }, ref) => {
     const [position, setPosition] = useState({ top: 0, left: 0, width: 0, maxHeight: 0 });
     const containerRef = useRef(null);
-    // Expose functions to parent
     useImperativeHandle(ref, () => ({
         calc: () => {
             console.log("calc");
             setTimeout(() => {
                 calcDropDown();
             }, 50);
-            // parent will implement actual state change, this is just the hook
         },
     }));
     const HighlightedText = ({ text, searchTerm, maxLength = 150 }) => {
@@ -26,7 +24,6 @@ export const DropDown = forwardRef(({ openDropDown, display, addItem, searchTerm
             return _jsx("div", { children: text.slice(0, maxLength) });
         }
         const lowerText = text.toLowerCase();
-        // Find first match position
         let firstMatchIndex = -1;
         for (let word of searchWords) {
             const index = lowerText.indexOf(word);
@@ -34,14 +31,12 @@ export const DropDown = forwardRef(({ openDropDown, display, addItem, searchTerm
                 firstMatchIndex = index;
             }
         }
-        // Determine slice window
         let sliceStart = 0;
         let sliceEnd = maxLength;
         if (firstMatchIndex > -1) {
             const foundWord = searchWords.find(w => lowerText.includes(w));
             if (firstMatchIndex > -1 && foundWord) {
                 const matchEnd = firstMatchIndex + foundWord.length;
-                //    const matchEnd = firstMatchIndex + searchWords.find(w => lowerText.includes(w)).length;
                 if (matchEnd > maxLength) {
                     sliceEnd = Math.min(text.length, matchEnd);
                     sliceStart = sliceEnd - maxLength;
@@ -49,7 +44,6 @@ export const DropDown = forwardRef(({ openDropDown, display, addItem, searchTerm
             }
         }
         const displayText = text.slice(sliceStart, sliceEnd);
-        // Build a regex that matches all words
         const highlightRegex = new RegExp(`(${searchWords.join('|')})`, 'gi');
         const parts = displayText.split(highlightRegex);
         return (_jsxs(_Fragment, { children: [sliceStart > 0 && '…', parts.map((part, i) => searchWords.includes(part.toLowerCase()) ? (_jsx("span", { className: "highlight-words", children: part }, i)) : (_jsx("span", { children: part }, i))), sliceEnd < text.length && '…'] }));
@@ -60,7 +54,7 @@ export const DropDown = forwardRef(({ openDropDown, display, addItem, searchTerm
         const rect = containerRef.current.getBoundingClientRect();
         const distanceToBottom = window.innerHeight - rect.bottom;
         setPosition({
-            top: rect.bottom - 5,
+            top: rect.bottom - 10,
             left: rect.left,
             width: rect.width,
             maxHeight: distanceToBottom - 50
@@ -78,7 +72,7 @@ export const DropDown = forwardRef(({ openDropDown, display, addItem, searchTerm
             calcDropDown();
         }, 50);
     };
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "ext-window-dropdown-edge", ref: containerRef }), openDropDown && (_jsxs("div", { className: "ext-window-dropdown", style: {
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "ext-window-dropdown-edge", ref: containerRef }), openDropDown && display.length > 0 && (_jsxs("div", { className: "ext-window-dropdown", style: {
                     top: position.top,
                     left: position.left,
                     width: position.width

package/dist/style/input-dropdown.css

@@ -106,7 +106,7 @@ input:-webkit-autofill:active {
 }
 
 .ext-textarea-box-dropdown.open {
-    border-radius: var(--ext-textarea-box-border-radius) var(--ext-textarea-box-border-radius) var(--ext-dropdown-border-radius) var(--ext-dropdown-border-radius) ;
+    border-radius: var(--ext-textarea-box-border-radius) var(--ext-textarea-box-border-radius) var(--ext-dropdown-border-radius) var(--ext-dropdown-border-radius);
 }
 
 .ext-textarea-wrapper {
@@ -194,7 +194,7 @@ input:-webkit-autofill:active {
     box-sizing: border-box;
     resize: none;
     overflow: hidden;
-    padding: 10px;
+    padding: var(--ext-textarea-dropdown-inner-padding, 10px);
     line-height: 1.5;
     display: flex;
     flex-wrap: wrap;
@@ -212,7 +212,6 @@ input:-webkit-autofill:active {
     margin: 3px;
     background-color: var(--textarea-tag-bck-clr, white);
     color: var(--textarea-tag-clr, darkblue);
-    padding: 5px 7px;
     border-radius: 6px;
     font-size: 90%;
     font-weight: 400;
@@ -223,8 +222,9 @@ input:-webkit-autofill:active {
     overflow: hidden;
     gap: 5px;
     flex: 0 0 auto;
-    padding: 6px 10px;
-    border-radius: 6px;
+    padding: 0 var(--loop-padding, 10px);
+    height: var(--loop-height, 20px);
+    border-radius: var(----loop-border-radius, 6px);
     align-items: center;
     justify-content: center;
     box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
@@ -237,7 +237,7 @@ input:-webkit-autofill:active {
     border-radius: 50px;
 }
 
-.textarea-tag-erase:hover{
+.textarea-tag-erase:hover {
     background-color: lightgray;
     cursor: pointer;
 }
@@ -295,6 +295,7 @@ input:-webkit-autofill:active {
     text-align: end;
     font-size: 80%;
     font-weight: 600;
+    border-radius: var(--ext-dropdown-border-radius) var(--ext-dropdown-border-radius) 0 0;
 }
 
 .textarea-tag.input {
@@ -325,14 +326,14 @@ input:-webkit-autofill:active {
     grid-template-columns: 1fr auto;
     align-items: center;
     justify-content: center;
-    gap: 10px;
 }
 
 .search-x-input {
     padding: 5px 7px;
     background-color: transparent;
-   border: 1px dashed white;
-   border-radius: 4px;
+    border: 1px dashed white;
+    border-radius: 4px;
+    margin: 0 10px 0 0;
 }
 
 .search-x-btn {
@@ -369,6 +370,8 @@ input:-webkit-autofill:active {
     cursor: pointer;
 }
 
-.search-x-input > input{
-    width: -webkit-fill-available;
+.search-x-input>input {
+    min-width: 0;
+    width: 100%;
+    box-sizing: border-box;
 }

package/package.json

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