ehscan-react-components 0.1.30 → 0.1.32

package/dist/TextAreaDropDown.d.ts

@@ -3,6 +3,8 @@ type Action = "add" | "remove";
 interface Props {
     id?: string;
     tabIndex?: number;
+    alwaysOpenDropDown?: boolean;
+    closeCommand?: any;
     editable?: boolean;
     label?: string;
     required?: boolean;

package/dist/TextAreaDropDown.js

@@ -11,7 +11,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState, useId, useEffect } from "react";
 import { DropDown } from "./DropDown";
 import './style/input-dropdown.css';
-export const TextAreaDropDown = ({ id, tabIndex, label, value, editable = true, required = false, dropdownValue, onChange, placeholder = 'select or create new entry', maxLength = 500, addClass, maxDropDownHeight = 200 }) => {
+export const TextAreaDropDown = ({ id, tabIndex, alwaysOpenDropDown, closeCommand, label, value, editable = true, required = false, dropdownValue, onChange, placeholder = 'select or create new entry', maxLength = 500, addClass, maxDropDownHeight = 200 }) => {
     const childRef = useRef(null);
     const textareaRef = useRef(null);
     const searchInput = useRef(null);
@@ -21,32 +21,8 @@ export const TextAreaDropDown = ({ id, tabIndex, label, value, editable = true,
     const [openDropDown, setOpenDropDown] = useState(false);
     const [maxDropDownEntries, setMaxDropDownEntries] = useState(undefined);
     const [tags, setTags] = useState(undefined);
-    const [width, setWidth] = useState(0);
     const [searchTerm, setSearchTerm] = useState('');
     const [filterItems, setFilterItem] = useState([]);
-    useEffect(() => {
-        if (!width || width === 0)
-            return;
-        console.log('handleResize in TextAreaDropDown vai width');
-        setOpenDropDown(false);
-        setWidth(width);
-    }, [width]);
-    useEffect(() => {
-        if (!textareaRef.current)
-            return;
-        const handleResize = () => {
-            var _a;
-            const newWidth = (_a = textareaRef === null || textareaRef === void 0 ? void 0 : textareaRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth;
-            console.log(newWidth);
-            if (newWidth !== width)
-                setWidth(newWidth);
-        };
-        handleResize();
-        window.addEventListener('resize', handleResize);
-        return () => {
-            window.removeEventListener('resize', handleResize);
-        };
-    }, [maxDropDownEntries]);
     useEffect(() => {
         setTags(value);
         setCharCount(value.length);
@@ -130,8 +106,18 @@ export const TextAreaDropDown = ({ id, tabIndex, label, value, editable = true,
                 setNewBtn(true);
         }
     }, [searchTerm]);
+    useEffect(() => {
+        if (!closeCommand)
+            return;
+        setOpenDropDown(false);
+    }, [closeCommand]);
+    const focusInput = () => {
+        if (alwaysOpenDropDown || filterItems.length > 0) {
+            setOpenDropDown(true);
+        }
+    };
     if (!tags)
         return null;
-    return (_jsxs("div", { className: `ext-textarea-wrapper-dropdown ${addClass}`, ref: textareaRef, children: [label && (_jsxs("div", { className: "ext-textarea-label", children: [_jsxs("label", { className: "ext-textarea-label-title", htmlFor: textareaId, children: [label, " ", required && _jsx("span", { className: "required", children: "*" })] }), _jsxs("div", { className: "ext-textarea-label-btns", children: [editable && charCount > 0 && (_jsxs("div", { className: "form-container-count", children: [charCount, " / ", maxLength] })), editable && charCount > 0 && (_jsx("div", { className: "ext-textarea-svg-close", "aria-label": `Clear ${label !== null && label !== void 0 ? label : "text area"}` }))] })] })), _jsx("div", { className: `ext-textarea-box-dropdown${openDropDown ? ' open' : ''}`, onClick: () => setOpenDropDown(true), children: _jsxs("div", { className: "ext-textarea-dropdown-inner", children: [tags.map((item, index) => (_jsxs("div", { className: "textarea-tag loop", children: [_jsx("div", { children: item }), _jsx("div", { className: "textarea-tag-erase", onClick: () => removeTag(tags[index]), children: _jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("line", { x1: "8", y1: "8", x2: "16", y2: "16", stroke: "#333", strokeWidth: "1", strokeLinecap: "round" }), _jsx("line", { x1: "16", y1: "8", x2: "8", y2: "16", stroke: "#333", strokeWidth: "1", strokeLinecap: "round" })] }) })] }, index))), _jsx("div", { className: "search-x-wrapper", children: _jsxs("div", { className: "search-x", children: [_jsx("div", { className: "search-x-input", children: _jsx("input", { type: "text", tabIndex: tabIndex, ref: searchInput, onFocus: () => setOpenDropDown(true), placeholder: placeholder, value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), onKeyDown: handleKeyDown }) }), _jsx("div", { className: `search-x-btn${newBtn ? ' show' : ''}`, onClick: () => createItem(), children: newBtn && 'create new one' })] }) })] }) }), _jsx(DropDown, { ref: childRef, maxDropDownHeight: maxDropDownHeight, openDropDown: openDropDown, display: filterItems, addItem: addItem, maxDropDownEntries: maxDropDownEntries, searchTerm: searchTerm })] }));
+    return (_jsxs("div", { className: `ext-textarea-wrapper-dropdown ${addClass}`, ref: textareaRef, children: [label && (_jsxs("div", { className: "ext-textarea-label", children: [_jsxs("label", { className: "ext-textarea-label-title", htmlFor: textareaId, children: [label, " ", required && _jsx("span", { className: "required", children: "*" })] }), _jsxs("div", { className: "ext-textarea-label-btns", children: [editable && charCount > 0 && (_jsxs("div", { className: "form-container-count", children: [charCount, " / ", maxLength] })), editable && charCount > 0 && (_jsx("div", { className: "ext-textarea-svg-close", "aria-label": `Clear ${label !== null && label !== void 0 ? label : "text area"}` }))] })] })), _jsx("div", { className: `ext-textarea-box-dropdown${openDropDown ? ' open' : ''}`, onClick: () => setOpenDropDown(true), children: _jsxs("div", { className: "ext-textarea-dropdown-inner", children: [tags.map((item, index) => (_jsxs("div", { className: "textarea-tag loop", children: [_jsx("div", { children: item }), _jsx("div", { className: "textarea-tag-erase", onClick: () => removeTag(tags[index]), children: _jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("line", { x1: "8", y1: "8", x2: "16", y2: "16", stroke: "#333", strokeWidth: "1", strokeLinecap: "round" }), _jsx("line", { x1: "16", y1: "8", x2: "8", y2: "16", stroke: "#333", strokeWidth: "1", strokeLinecap: "round" })] }) })] }, index))), _jsx("div", { className: "search-x-wrapper", children: _jsxs("div", { className: "search-x", children: [_jsx("div", { className: "search-x-input", children: _jsx("input", { type: "text", tabIndex: tabIndex, ref: searchInput, onFocus: () => focusInput(), placeholder: placeholder, value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), onKeyDown: handleKeyDown }) }), _jsx("div", { className: `search-x-btn${newBtn ? ' show' : ''}`, onClick: () => createItem(), children: newBtn && 'create new one' })] }) })] }) }), _jsx(DropDown, { ref: childRef, maxDropDownHeight: maxDropDownHeight, openDropDown: openDropDown, display: filterItems, addItem: addItem, maxDropDownEntries: maxDropDownEntries, searchTerm: searchTerm })] }));
 };
 export default TextAreaDropDown;

package/dist/style/input-dropdown.css

@@ -106,6 +106,8 @@ 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);
+    background-color: var(--ext-textarea-focus-bck-clr, lavender);
+    border-radius: var(--ext-textarea-border-radius, 20px);
 }
 
 .ext-textarea-wrapper {

package/package.json

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