ehscan-react-components 0.1.23 → 0.1.24

package/README.md

@@ -3,6 +3,7 @@
 - Button
 - Window
 - TextArea
+- TextAreaDropDown
 
 # Styling
 
@@ -96,19 +97,3 @@
 
 All notable changes to this project will be documented in this file.
 ---
-
-
-## [1.0.5] - 2027-11-11
-### Fixed
-- Setter now supports functional update (like React’s setState)
-
-## [1.0.4] - 2027-10-22
-### Added
-- Added UseClickSetter
-  - Only Clicking purpose
-
-## [1.0.3] - 2025-10-22
-### Fixed
-- Optimized listener notifications:
-  - Only listeners subscribed to a changed or removed key are notified.
-  - Previously, all listeners were notified on every state change.

package/dist/Components.d.ts

@@ -1,3 +1,4 @@
 export { Button } from './Button';
 export { Window } from './Window';
 export { TextArea } from './TextArea';
+export { TextAreaDropDown } from './TextAreaDropDown';

package/dist/Components.js

@@ -2,3 +2,4 @@
 export { Button } from './Button';
 export { Window } from './Window';
 export { TextArea } from './TextArea';
+export { TextAreaDropDown } from './TextAreaDropDown';

package/dist/DropDown.d.ts

@@ -0,0 +1,12 @@
+export type DropDownHandle = {
+    calc: () => void;
+};
+type DropDownProps = {
+    openDropDown: boolean;
+    display: string[];
+    addItem: (index: number) => void;
+    searchTerm: string;
+    maxDropDownEntries?: number;
+};
+export declare const DropDown: import("react").ForwardRefExoticComponent<DropDownProps & import("react").RefAttributes<DropDownHandle>>;
+export {};

package/dist/DropDown.js

@@ -0,0 +1,86 @@
+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) => {
+    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 }) => {
+        if (!searchTerm) {
+            const sliced = text.slice(0, maxLength);
+            return (_jsxs("div", { children: [sliced, text.length > maxLength && '…'] }));
+        }
+        const searchWords = searchTerm
+            .toLowerCase()
+            .split(/\s+/)
+            .filter(Boolean);
+        if (searchWords.length === 0) {
+            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);
+            if (index !== -1 && (firstMatchIndex === -1 || index < firstMatchIndex)) {
+                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;
+                }
+            }
+        }
+        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 && '…'] }));
+    };
+    const calcDropDown = () => {
+        if (!(containerRef === null || containerRef === void 0 ? void 0 : containerRef.current))
+            return;
+        const rect = containerRef.current.getBoundingClientRect();
+        const distanceToBottom = window.innerHeight - rect.bottom;
+        setPosition({
+            top: rect.bottom - 5,
+            left: rect.left,
+            width: rect.width,
+            maxHeight: distanceToBottom - 50
+        });
+    };
+    useEffect(() => {
+        if (openDropDown && containerRef.current) {
+            calcDropDown();
+        }
+        ;
+    }, [openDropDown]);
+    const addDropDownItem = (index) => {
+        addItem(index);
+        setTimeout(() => {
+            calcDropDown();
+        }, 50);
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "ext-window-dropdown-edge", ref: containerRef }), openDropDown && (_jsxs("div", { className: "ext-window-dropdown", style: {
+                    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))) })] }))] }));
+});

package/dist/TextAreaDropDown.d.ts

@@ -0,0 +1,16 @@
+import './style/input-dropdown.css';
+type Action = "add" | "remove";
+interface Props {
+    id?: string;
+    tabIndex?: number;
+    editable?: boolean;
+    label?: string;
+    required?: boolean;
+    value: string[];
+    dropdownValue: string[];
+    onChange: (value: string, action: Action) => void;
+    placeholder?: string;
+    maxLength?: number;
+}
+export declare const TextAreaDropDown: React.FC<Props>;
+export default TextAreaDropDown;

package/dist/TextAreaDropDown.js

@@ -0,0 +1,137 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+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, }) => {
+    const childRef = useRef(null);
+    const textareaRef = useRef(null);
+    const searchInput = useRef(null);
+    const [charCount, setCharCount] = useState(value.length);
+    const generatedId = useId(); // unique fallback for aria linking
+    const textareaId = id || `textarea-${generatedId}`;
+    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)
+            return;
+        setOpenDropDown(false);
+    }, [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;
+            if (newWidth !== width) {
+                setWidth(newWidth);
+            }
+        };
+        // Initial check
+        handleResize();
+        // Listen to window resize
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [maxDropDownEntries]);
+    useEffect(() => {
+        setTags(value);
+        setCharCount(value.length);
+        if (dropdownValue === undefined)
+            return;
+        setMaxDropDownEntries(dropdownValue.length);
+    }, [value]);
+    const handleKeyDown = (e) => {
+        if (newBtn && e.key === 'Enter' && searchTerm !== '') {
+            createItem();
+            return;
+        }
+        if (e.key === "Backspace" && searchTerm === "" && value.length > 0) {
+            if (tags === null || tags === void 0 ? void 0 : tags.length) {
+                removeTag(tags[tags.length - 1]);
+            }
+        }
+    };
+    useEffect(() => {
+        if (searchTerm === undefined || value === undefined)
+            return;
+        const dropDownEntry = dropdownValue.filter(tag => !value.includes(tag));
+        if (!searchTerm || searchTerm === '') {
+            setFilterItem(dropDownEntry);
+            return;
+        }
+        const filterAndProcessItems = () => __awaiter(void 0, void 0, void 0, function* () {
+            const searchWords = searchTerm
+                .toLowerCase()
+                .split(/\s+/) // split by whitespace
+                .filter(Boolean); // remove empty strings
+            const filtered = yield Promise.all(// some ✅ ANY search word should match (common) | All shall match -> every
+            dropDownEntry
+                .filter(item => searchWords.every(word => item.toLowerCase().includes(word.toLowerCase())))
+                .map((item) => __awaiter(void 0, void 0, void 0, function* () { return item; })));
+            setFilterItem(filtered);
+        });
+        filterAndProcessItems();
+    }, [searchTerm, value]);
+    const removeTag = (tagToRemove) => {
+        var _a;
+        onChange(tagToRemove, 'remove');
+        if (childRef.current)
+            (_a = childRef.current) === null || _a === void 0 ? void 0 : _a.calc();
+    };
+    const addItem = (entry) => {
+        var _a;
+        if (entry === undefined || !filterItems[entry])
+            return;
+        const newValue = filterItems[entry];
+        console.log(newValue);
+        onChange(newValue, 'add');
+        if (!searchInput.current)
+            return;
+        searchInput.current.focus();
+        if (childRef.current)
+            (_a = childRef.current) === null || _a === void 0 ? void 0 : _a.calc();
+    };
+    const createItem = () => {
+        var _a;
+        if (searchTerm === undefined || searchTerm === '')
+            return;
+        onChange(searchTerm, 'add');
+        if (!searchInput.current)
+            return;
+        searchInput.current.value = '';
+        searchInput.current.focus();
+        setSearchTerm("");
+        if (childRef.current)
+            (_a = childRef.current) === null || _a === void 0 ? void 0 : _a.calc();
+    };
+    const [newBtn, setNewBtn] = useState(false);
+    useEffect(() => {
+        if (searchTerm === undefined)
+            return;
+        if (dropdownValue.includes(searchTerm)) {
+            setNewBtn(false);
+        }
+        else {
+            if (searchTerm !== '')
+                setNewBtn(true);
+        }
+    }, [searchTerm]);
+    if (!tags)
+        return null;
+    return (_jsxs("div", { className: "ext-textarea-wrapper", 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 })] }));
+};
+export default TextAreaDropDown;

package/dist/style/input-dropdown.css

@@ -0,0 +1,374 @@
+._ewb:hover::-webkit-scrollbar-thumb {
+    background: #555;
+    width: 6px;
+}
+
+._ewb::-webkit-scrollbar {
+    width: 6px;
+    background-color: var(--ext-textarea-box-bck-clr);
+}
+
+._ewb:hover::-webkit-scrollbar {
+    width: 6px;
+}
+
+._ewb::-webkit-scrollbar-thumb {
+    background-color: white;
+    border-radius: 12px;
+}
+
+input,
+textarea,
+.ext-textarea-wrapper {
+    height: 100%;
+    font-family: Arial, sans-serif;
+    font-family: Inter, sans-serif;
+    font-style: normal;
+    font-weight: 400;
+    font-optical-sizing: auto;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizelegibility;
+    letter-spacing: 0.072px;
+    overflow: hidden;
+}
+
+input::placeholder,
+textarea::placeholder {
+    color: var(--d-input-placeholder-clr, black);
+    opacity: 1;
+    font-size: 12;
+    font-weight: 300;
+    padding: 0
+}
+
+input[type="text"],
+input[type="email"],
+textarea {
+    color: var(--input-clr, black);
+    text-align: var(--input-align);
+    background-color: var(--d-input-bck-clr, transparent);
+    outline: none;
+    border: none;
+}
+
+textarea {
+    resize: none;
+    overflow: hidden;
+    min-height: 30px;
+}
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+    -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
+    box-shadow: 0 0 0px 1000px transparent inset !important;
+    -webkit-text-fill-color: var(--input-clr);
+    background-clip: padding-box !important;
+    transition: background-color 9999s ease-in-out 0s;
+    background-color: red;
+}
+
+/* textarea */
+/* Main Wrapper */
+.ext-textarea-wrapper {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.ext-textarea-lable {
+    padding: 5px 0 0 10px;
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+}
+
+.ext-textarea-lable-title {
+    flex: 1;
+}
+
+.ext-textarea-lable-btn {
+    background-color: aquamarine;
+    display: flex;
+    gap: 10px;
+}
+
+.ext-textarea-box,
+.ext-textarea-box-dropdown {
+    width: 100%;
+    background-color: var(--ext-textarea-box-bck-clr, lightgray);
+    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) ;
+}
+
+.ext-textarea-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.ext-textarea-label {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.ext-textarea-label-title {
+    flex: 1;
+    color: darkblue;
+    font-weight: 800;
+}
+
+.ext-textarea-label-btns {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.form-container-count {
+    font-size: 0.85rem;
+    color: #666;
+}
+
+.form-container-clear {
+    border: none;
+    background: none;
+    color: #007aff;
+    cursor: pointer;
+    font-size: 0.85rem;
+}
+
+.ext-textarea {
+    font-size: var(--input-txt-size);
+    border: none;
+    outline: none;
+    width: 100%;
+    font-weight: var(--d-font-weight);
+    display: grid;
+    justify-content: left;
+    align-items: center;
+    background-color: transparent;
+    color: var(--input-clr);
+    box-sizing: border-box;
+    resize: none;
+    overflow: hidden;
+    padding: 10px;
+    line-height: 1.5;
+}
+
+.ext-textarea.highlight {
+    border-color: green;
+    border-width: 3px;
+    border-style: solid;
+}
+
+.ext-textarea-svg-close {
+    background-color: #007aff;
+    border-radius: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+
+/* DropDown */
+
+.ext-textarea-dropdown-inner {
+    font-size: var(--input-txt-size, 14px);
+    border: none;
+    outline: none;
+    width: 100%;
+    font-weight: var(--d-font-weight, 400);
+    justify-content: left;
+    align-items: center;
+    background-color: transparent;
+    color: var(--input-clr);
+    box-sizing: border-box;
+    resize: none;
+    overflow: hidden;
+    padding: 10px;
+    line-height: 1.5;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.textarea-tag {
+    display: flex;
+    width: fit-content;
+    position: relative;
+    float: left;
+    margin: 3px 0;
+}
+
+.textarea-tag.loop {
+    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;
+    line-height: 1.3;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    gap: 5px;
+    flex: 0 0 auto;
+    padding: 6px 10px;
+    border-radius: 6px;
+    align-items: center;
+    justify-content: center;
+    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
+}
+
+.textarea-tag-erase {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50px;
+}
+
+.textarea-tag-erase:hover{
+    background-color: lightgray;
+    cursor: pointer;
+}
+
+.highlight-words {
+    background-color: yellow;
+}
+
+.ext-window-dropdown-edge {
+    height: 0;
+    width: 100%;
+}
+
+.ext-window-dropdown {
+    position: fixed;
+    background-color: white;
+    border: 1px solid #ccc;
+    border-radius: var(--ext-dropdown-border-radius);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+    transition: opacity 0.3s ease, max-height 0.2s ease;
+    opacity: 1;
+    z-index: 1000;
+}
+
+.ext-window-dropdown-wrapper {
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    max-height: 200px;
+    overflow-y: auto;
+}
+
+.dropdown-item {
+    width: -webkit-fill-available;
+    font-weight: 300;
+    font-size: 90%;
+    background-color: wheat;
+    position: relative;
+    display: block;
+    padding: 5px 10px;
+    border-radius: 10px;
+}
+
+.dropdown-item:hover {
+    background-color: lightblue;
+    cursor: pointer;
+}
+
+.dropdown-amount-row {
+    width: -webkit-fill-available;
+    background-color: yellow;
+    color: #007aff;
+    padding: 5px 10px;
+    text-align: end;
+    font-size: 80%;
+    font-weight: 600;
+}
+
+.textarea-tag.input {
+    height: 25px;
+    background-color: transparent;
+    border-radius: 10px;
+    padding: 0 0 2px 5px;
+    --input-clr: black;
+}
+
+.textarea-tag.btn {
+    background-color: #007aff;
+    color: white;
+}
+
+.search-x-wrapper {
+    position: relative;
+    float: left;
+    margin: 3px;
+    margin: 3px;
+    background-color: var(--textarea-tag-bck-clr, transparent);
+    gap: 10px;
+    flex: 1 1 auto;
+}
+
+.search-x {
+    display: grid;
+    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;
+}
+
+.search-x-btn {
+    border-radius: 12px;
+    color: var(--textarea-tag-clr, white);
+    background-color: var(--textarea-tag-bck-clr, #007aff);
+    font-size: 90%;
+    font-weight: 500;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    width: fit-content;
+    height: 80%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    opacity: 0;
+    max-width: 0;
+    --animate-s: .5s;
+    transition: opacity var(--animate-s) ease, max-width var(--animate-s) ease, padding var(--animate-s);
+}
+
+.search-x-btn.show {
+    opacity: 1;
+    max-width: fit-content;
+    padding: 0 10px;
+}
+
+.search-x-btn:hover {
+    filter: brightness(1.1);
+    color: white;
+    cursor: pointer;
+}
+
+.search-x-input > input{
+    width: -webkit-fill-available;
+}

package/dist/style/input.css

@@ -1,5 +1,4 @@
 /* textarea */
-
 .ext-textarea-wrapper {
     position: relative;
     display: flex;

package/package.json

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