ehscan-react-components 0.1.27 → 0.1.29

package/dist/DropDown.d.ts

@@ -7,6 +7,7 @@ type DropDownProps = {
     addItem: (index: number) => void;
     searchTerm: string;
     maxDropDownEntries?: number;
+    maxDropDownHeight?: number;
 };
 export declare const DropDown: import("react").ForwardRefExoticComponent<DropDownProps & import("react").RefAttributes<DropDownHandle>>;
 export {};

package/dist/DropDown.js

@@ -1,6 +1,6 @@
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useState, useRef, forwardRef, useImperativeHandle } from "react";
-export const DropDown = forwardRef(({ openDropDown, display, addItem, searchTerm, maxDropDownEntries }, ref) => {
+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);
     useImperativeHandle(ref, () => ({
@@ -57,7 +57,7 @@ export const DropDown = forwardRef(({ openDropDown, display, addItem, searchTerm
             top: rect.bottom - 10,
             left: rect.left,
             width: rect.width,
-            maxHeight: distanceToBottom - 50
+            maxHeight: maxDropDownHeight || distanceToBottom - 50
         });
     };
     useEffect(() => {

package/dist/TextAreaDropDown.d.ts

@@ -12,6 +12,7 @@ interface Props {
     placeholder?: string;
     maxLength?: number;
     addClass?: string;
+    maxDropDownHeight?: number;
 }
 export declare const TextAreaDropDown: React.FC<Props>;
 export default TextAreaDropDown;

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, maxDropDownHeight = 200 }) => {
     const childRef = useRef(null);
     const textareaRef = useRef(null);
     const searchInput = useRef(null);
@@ -25,9 +25,11 @@ export const TextAreaDropDown = ({ id, tabIndex, label, value, editable = true,
     const [searchTerm, setSearchTerm] = useState('');
     const [filterItems, setFilterItem] = useState([]);
     useEffect(() => {
-        if (!width)
+        if (!width || width === 0)
             return;
+        console.log('handleResize in TextAreaDropDown vai width');
         setOpenDropDown(false);
+        setWidth(width);
     }, [width]);
     useEffect(() => {
         if (!textareaRef.current)
@@ -35,13 +37,10 @@ export const TextAreaDropDown = ({ id, tabIndex, label, value, editable = true,
         const handleResize = () => {
             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) {
+            if (newWidth !== width)
                 setWidth(newWidth);
-            }
         };
-        // Initial check
         handleResize();
-        // Listen to window resize
         window.addEventListener('resize', handleResize);
         return () => {
             window.removeEventListener('resize', handleResize);
@@ -132,6 +131,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, maxDropDownHeight: maxDropDownHeight, openDropDown: openDropDown, display: filterItems, addItem: addItem, maxDropDownEntries: maxDropDownEntries, searchTerm: searchTerm })] }));
 };
 export default TextAreaDropDown;

package/dist/style/input-dropdown.css

@@ -102,7 +102,6 @@ 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 {
@@ -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;

package/package.json

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