ehscan-react-components 0.1.26 → 0.1.28

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, maxLength = 500, addClass, }) => {
+export const TextAreaDropDown = ({ id, tabIndex, label, value, editable = true, required = false, dropdownValue, onChange, placeholder = 'select or create new entry', maxLength = 500, addClass, }) => {
     const childRef = useRef(null);
     const textareaRef = useRef(null);
     const searchInput = useRef(null);
@@ -27,6 +27,7 @@ export const TextAreaDropDown = ({ id, tabIndex, label, value, editable = true,
     useEffect(() => {
         if (!width)
             return;
+        console.log('handleResize in TextAreaDropDown vai width');
         setOpenDropDown(false);
     }, [width]);
     useEffect(() => {
@@ -36,6 +37,7 @@ export const TextAreaDropDown = ({ id, tabIndex, label, value, editable = true,
             var _a;
             const newWidth = (_a = textareaRef === null || textareaRef === void 0 ? void 0 : textareaRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth;
             if (newWidth !== width) {
+                console.log('handleResize in TextAreaDropDown');
                 setWidth(newWidth);
             }
         };
@@ -132,6 +134,6 @@ export const TextAreaDropDown = ({ id, tabIndex, label, value, editable = true,
     }, [searchTerm]);
     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", ref: searchInput, onFocus: () => setOpenDropDown(true), placeholder: "select or create new entry", 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, 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: () => 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, openDropDown: openDropDown, display: filterItems, addItem: addItem, maxDropDownEntries: maxDropDownEntries, searchTerm: searchTerm })] }));
 };
 export default TextAreaDropDown;

package/dist/style/input-dropdown.css

@@ -102,11 +102,10 @@ input:-webkit-autofill:active {
     border-radius: var(--ext-textarea-box-border-radius, 10px);
     display: flex;
     position: relative;
-    --ext-dropdown-border-radius: 20px;
 }
 
 .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 +193,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 +211,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 +221,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 +236,7 @@ input:-webkit-autofill:active {
     border-radius: 50px;
 }
 
-.textarea-tag-erase:hover{
+.textarea-tag-erase:hover {
     background-color: lightgray;
     cursor: pointer;
 }
@@ -255,7 +254,7 @@ input:-webkit-autofill:active {
     position: fixed;
     background-color: white;
     border: 1px solid #ccc;
-    border-radius: var(--ext-dropdown-border-radius);
+    border-radius: var(--ext-dropdown-border-radius, 20px);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
     transition: opacity 0.3s ease, max-height 0.2s ease;
     opacity: 1;
@@ -331,8 +330,9 @@ input:-webkit-autofill:active {
 .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 +369,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.26",
+  "version": "0.1.28",
   "description": "components",
   "main": "dist/Components.js",
   "types": "dist/Components.d.ts",