@cwellt_software/cwellt-reactjs-lib 1.2.0 → 1.2.2

package/dist/src/components/control/choice/deprecated/MultiSelect_deprecated_.js

@@ -1,99 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Select, Tag } from "antd";
-import * as React from "react";
-const { Option, OptGroup } = Select;
-export class MultiSelect extends React.Component {
-    constructor(Props) {
-        super(Props);
-        this.state = {
-            selected: null,
-            isVisibleDropDown: false,
-            activeClassName: ""
-        };
-    }
-    componentDidMount() {
-        this.setState({
-            selected: this.props.selectedItems?.map((s) => ({
-                type: s.type,
-                id: s.id,
-                despription: s.despription,
-                color: s.color
-            }))
-        });
-        this.onClickSelect = this.onClickSelect.bind(this);
-    }
-    onClickSelect = () => {
-        this.setState({
-            isVisibleDropDown: !this.state.isVisibleDropDown
-        });
-        this.setState({
-            activeClassName: "cwelltSelectDropDown_active"
-        });
-    };
-    handleOnDropDownVisibleChange = () => {
-        const dropDown_content = document.getElementsByClassName("cwelltSelectDropDown");
-        for (let i = 0; i <= dropDown_content.length; i++) {
-            dropDown_content[i]?.addEventListener("mouseleave", () => {
-                this.setState({
-                    isVisibleDropDown: false
-                });
-            });
-        }
-    };
-    onKeyUpSelect = (e_KeyUp_select) => {
-        if (e_KeyUp_select.key === "Enter" || e_KeyUp_select.key === "Escape") {
-            this.setState({
-                isVisibleDropDown: false
-            });
-        }
-        else {
-            this.setState({
-                isVisibleDropDown: true
-            });
-        }
-    };
-    // mouseHover dropDown active
-    onMouseHoverDropDownActive = () => {
-        const dropDown_active = document.getElementsByClassName("cwelltSelectDropDown_active");
-        const itemArray = () => {
-            Array.from(dropDown_active).forEach(index => {
-                const dropDown = index;
-                dropDown.addEventListener("mouseover", () => { });
-            });
-            return true;
-        };
-        if (dropDown_active.length > 0 && itemArray()) {
-            return true;
-        }
-        else {
-            return false;
-        }
-    };
-    //  clicl cwelltDropDown
-    onMouseLeaveMultiSelect = (event_mouseLeave) => {
-        const post = event_mouseLeave.currentTarget.getBoundingClientRect();
-        const posCursorY = event_mouseLeave.clientY;
-        if (posCursorY > post.bottom && this.state.isVisibleDropDown === true) {
-            this.setState({
-                isVisibleDropDown: true
-            });
-        }
-        else {
-            this.setState({
-                isVisibleDropDown: false
-            });
-        }
-    };
-    render() {
-        return (_jsx("div", { style: {
-                display: "flex",
-                flexDirection: "row",
-                alignItems: "flexStart",
-                width: "100%"
-            }, id: "contentMultiSelect", onMouseLeave: e => this.onMouseLeaveMultiSelect(e), children: _jsx("div", { style: { flex: 1 }, children: _jsx(Select, { autoClearSearchValue: true, mode: "multiple", allowClear: true, style: { width: "100%" }, onChange: this.props.handleChange, optionFilterProp: "description", virtual: true, showArrow: true, size: "middle", className: this.props.selectedItems?.length === 0
-                        ? "cwelltMultiSelect cwelltSelect cwelltSelectSimple cwelltMultiSelect_searchIcon"
-                        : "cwelltMultiSelect cwelltSelect cwelltSelectSimple", placeholder: "Search or filter...", dropdownClassName: this.state.isVisibleDropDown
-                        ? " cwelltSelectDropDown cwelltSelectDropDown_active"
-                        : "cwelltSelectDropDown", value: this.props.selectedItems?.map(s => s.type + "_" + s.id), onClick: () => this.onClickSelect(), open: this.state.isVisibleDropDown, onDropdownVisibleChange: () => this.handleOnDropDownVisibleChange(), onKeyUp: e_KeyUp_select => this.onKeyUpSelect(e_KeyUp_select), children: this.props.selectLists.map((slArray, i) => (_jsx(OptGroup, { label: slArray.length > 0 ? slArray[0]?.type : "", children: slArray.map(sl => (_jsx(Option, { value: sl.type + "_" + sl.id, type: sl.type, description: sl.description, val: sl.id, children: _jsx(Tag, { color: sl.color, children: sl.description }) }, sl.type + "_" + sl.id))) }, "_" + i))) }) }) }));
-    }
-}

package/dist/src/components/control/choice/dropdown/CwDropdown.js

@@ -1,27 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
-export function CwDropdown(optionsProps) {
-    const [selectedOption, setSelectedOption] = useState(optionsProps.defaultSelected || "");
-    useEffect(() => {
-        if (optionsProps.defaultSelected !== undefined && optionsProps.defaultSelected !== selectedOption) {
-            setSelectedOption(optionsProps.defaultSelected);
-            if (optionsProps.handleChange) {
-                optionsProps.handleChange(optionsProps.defaultSelected);
-            }
-        }
-    }, [optionsProps.defaultSelected, selectedOption, optionsProps.handleChange]);
-    const handleOptionSelect = (event) => {
-        const selectedValue = event.target.value;
-        setSelectedOption(selectedValue);
-        if (optionsProps.handleChange) {
-            optionsProps.handleChange(selectedValue);
-        }
-    };
-    return (_jsxs("div", { className: optionsProps.labelPosition === "inline"
-            ? "cwellt_flex cwellt_flex_row cwellt_align_items_center cwDropDownComp" + " " + optionsProps.className
-            : optionsProps.labelPosition === "column"
-                ? "cwellt_flex cwellt_flex_column cwellt_align-items_baseline cwDropDownComp" + " " + optionsProps.className
-                : "cwellt_flex cwellt_flex_row cwellt_align_items_center cwDropDownComp" + " " + optionsProps.className, style: optionsProps.style, id: optionsProps.id, children: [_jsx("label", { className: optionsProps.disabled === true
-                    ? "cw_label_text cw_label_text_disabled" + " " + optionsProps.labelClassName
-                    : "cw_label_text" + " " + optionsProps.labelClassName, children: optionsProps.labelName }), _jsx("select", { value: selectedOption, onChange: handleOptionSelect, className: "cw_select", style: optionsProps.styleSelect, disabled: optionsProps.disabled || optionsProps.selectList.length === 0, children: optionsProps.selectList.length === 0 ? (_jsx("option", { value: "", className: "cw_option", disabled: true, children: "No data" })) : (_jsxs(_Fragment, { children: [_jsx("option", { value: "", className: "cw_option", children: optionsProps.placeholder }), optionsProps.selectList.map(option => (_jsx("option", { value: option.id, className: "cw_option", style: optionsProps.styleOption, children: option.description }, option.id)))] })) })] }));
-}

package/dist/src/components/control/choice/dropdown/CwDropdownContainer.js

@@ -1,30 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { useEffect } from "react";
-export function CwDropdownContainer(dropDownContainerProps) {
-    // #region
-    // - Ref dropDownContainer
-    const dropDownContainer_ref = React.createRef();
-    // - Ref list container
-    const dropDown_listContainer = React.createRef();
-    // #endregion
-    // #region Functions
-    const onKeyPressDropDownContainer = (event_keyDown) => {
-        dropDownContainerProps.onKeyDownDropDownContainer(event_keyDown);
-    };
-    const onMouseLeaveDropDownContainer = (event_onMouseLeave) => {
-        if (typeof dropDownContainerProps.onMouseLeaveDropDownContainer === "function") {
-            dropDownContainerProps.onMouseLeaveDropDownContainer(event_onMouseLeave);
-        }
-    };
-    // #endregion
-    // #region UseEffect
-    useEffect(() => {
-        window.addEventListener("keydown", onKeyPressDropDownContainer);
-        return () => {
-            window.removeEventListener("keydown", onKeyPressDropDownContainer);
-        };
-    }, []);
-    // #endregion
-    return (_jsx("div", { className: `cw-dropdown-container ${dropDownContainerProps.className || ''}`, onKeyDown: onKeyPressDropDownContainer, onMouseLeave: onMouseLeaveDropDownContainer, tabIndex: 0, hidden: !dropDownContainerProps.dropDownState, children: _jsx("div", { className: "cw-dropdown-list", id: dropDownContainerProps.idDropDownContainer, ref: dropDownContainer_ref, children: _jsx("div", { ref: dropDown_listContainer, children: dropDownContainerProps.children }) }) }));
-}

package/dist/src/components/control/choice/dropdown/CwDropdownFilter.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function CwDropdownFilter(props) {
-    // Determine visibility state
-    const isVisible = props.DropDownFilterState ?? false;
-    // Generate CSS classes
-    const containerClassName = `cw-dropdown-filter ${props.isNested ? 'dropdown-nested' : ''}`.trim();
-    // Only apply inline styles for width override if provided
-    const inlineStyles = props.width ? { width: props.width } : undefined;
-    return (_jsxs("div", { id: props.IdContent, className: containerClassName, children: [props.children, isVisible && (_jsx("nav", { className: "cw-dropdown-menu", style: inlineStyles, onMouseLeave: props.onMouseLeave, id: props.idDropDownFilter, role: "menu", children: _jsx("ul", { role: "none", children: props.DataSourceDropDownItem?.map((item) => (_jsx("li", { id: item.IdDropDown_filter, role: "menuitem", children: item.dropDownFilter_desc }, item.IdDropDown_filter))) }) }))] }));
-}

package/dist/src/components/control/choice/multi-filter/CwMultiFilter.js

@@ -1,298 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createElement as _createElement } from "react";
-import { useEffect, useRef, useState } from "react";
-import { CwMultiFilterTag } from "./components/tag/CwMultiFilterTag";
-import styles from "./cw-multi-filter.module.css";
-/**
- * A multiple filter selector, a MULTI-SELECT even. Allows users to select and filter items based on tags.
- * @remark
- * The CwMultiFilter component provides a user interface for selecting multiple filter options
- * organized by categories. Each filter option is represented as a clickable tag with customizable
- * colors. The component manages the selection state internally but reports changes via a callback.
- *
- * Filter tags should include the following properties:
- * - `Name`: Display name of the filter
- * - `Value`: Actual value used for filtering logic
- * - `Category`: Group the filter belongs to
- * - `ID`: Unique identifier for the filter
- * - `PrimaryColor`: Background color of the tag
- * - `OnPrimaryColor`: Text color of the tag
- *
- * ```
- * ╭───────────────────────────────────────────────────────────────╮
- * │ ╭──────────╮ ╭──────────╮ ╭──────────╮                        │
- * │ │FilterA x │ │FilterC x │ │FilterB x │  FilterC│          X   │
- * │ ╰──────────╯ ╰──────────╯ ╰──────────╯                        │
- * ╰───────────────────────────────────────────────────────────────╯
- *  │ (All) (CategoryA) (CategoryB)                               │
- *  │─────────────────────────────────────────────────────────────│
- *  │ ╭────────╮                                                  │
- *  │ │FilterF │                                                  │
- *  │ ╰────────╯                                                  │
- *  ╰─────────────────────────────────────────────────────────────╯
- * ```
-    * @example
- * ```tsx
- * import { CwMultiFilter, type CwMultiFilterTagProps, type ICwMultiFilterTag } from "cwellt-reactjs-lib";
- * import { useCallback, useState } from "react";
- * import { hexToRGB } from "../common/functions/color";
- *
- * function FilterExample() {
- *   // State to track selected filter tags
- *   const [selectedTags, setSelectedTags] = useState(new Set<CwMultiFilterTagProps>());
- *
- *   // Sample data to filter
- *   const [users, setUsers] = useState([
- *     { id: 1, name: "John", role: "admin", department: "IT" },
- *     { id: 2, name: "Sarah", role: "user", department: "HR" },
- *     // More users...
- *   ]);
- *
- *   // Filtered users based on selected tags
- *   const [filteredUsers, setFilteredUsers] = useState(users);
- *
- *   // Define filter options
- *   const filterOptions = new Set([
- *     {
- *       Name: "Admin",
- *       Value: "admin",
- *       Category: "Roles",
- *       ID: "Roles_admin",
- *       OnPrimaryColor: hexToRGB("#2050a8"),
- *       PrimaryColor: hexToRGB("#cedcff")
- *     },
- *     {
- *       Name: "User",
- *       Value: "user",
- *       Category: "Roles",
- *       ID: "Roles_user",
- *       OnPrimaryColor: hexToRGB("#2050a8"),
- *       PrimaryColor: hexToRGB("#cedcff")
- *     },
- *     {
- *       Name: "IT",
- *       Value: "IT",
- *       Category: "Departments",
- *       ID: "Departments_IT",
- *       OnPrimaryColor: hexToRGB("#a82037"),
- *       PrimaryColor: hexToRGB("#ffceda")
- *     },
- *     {
- *       Name: "HR",
- *       Value: "HR",
- *       Category: "Departments",
- *       ID: "Departments_HR",
- *       OnPrimaryColor: hexToRGB("#a82037"),
- *       PrimaryColor: hexToRGB("#ffceda")
- *     }
- *   ]);
- *
- *   // Handle filter changes
- *   const onChangeFilters = useCallback((tags: Set<ICwMultiFilterTag>) => {
- *     setSelectedTags(tags);
- *     const tagsArray = Array.from(tags);
- *
- *     // Get values for each category
- *     const roleValues = tagsArray
- *       .filter(tag => tag.Category === "Roles")
- *       .map(tag => tag.Value);
- *
- *     const departmentValues = tagsArray
- *       .filter(tag => tag.Category === "Departments")
- *       .map(tag => tag.Value);
- *
- *     // Apply filters
- *     if (tagsArray.length === 0) {
- *       // No filters applied
- *       setFilteredUsers(users);
- *     } else {
- *       let filtered = users;
- *
- *       if (roleValues.length > 0) {
- *         filtered = filtered.filter(user => roleValues.includes(user.role));
- *       }
- *
- *       if (departmentValues.length > 0) {
- *         filtered = filtered.filter(user => departmentValues.includes(user.department));
- *       }
- *
- *       setFilteredUsers(filtered);
- *     }
- *   }, [users]);
- *
- *   return (
- *     <div>
- *       <h2>Filter Users</h2>
- *       <div style={{ width: "50%" }}>
- *         <CwMultiFilter
- *           id="user-filter"
- *           allTags={filterOptions}
- *           onChangeSelectedTags={onChangeFilters}
- *           selectedTags={selectedTags}
- *         />
- *       </div>
- *       <div style={{ marginTop: "20px" }}>
- *         <h3>Filtered Results ({filteredUsers.length})</h3>
- *         <ul>
- *           {filteredUsers.map(user => (
- *             <li key={user.id}>{user.name} - {user.role} ({user.department})</li>
- *           ))}
- *         </ul>
- *       </div>
- *     </div>
- *   );
- * }
- * ```
- * @param {CwMultiFilterProps} props
- * @returns Set the `onChange` callback to a function to check for changes in the selected filters
- */
-export const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, style }) => {
-    const [filteredTags, setFilteredTags] = useState(new Set());
-    const [inputTextValue, setInputTextValue] = useState("");
-    const [isPanelOpen, setIsPanelOpen] = useState(false);
-    const [selectedCategory, setSelectedCategory] = useState("All");
-    const componentRef = useRef(null);
-    const inputRef = useRef(null);
-    useEffect(() => {
-        function handleClickOutside(event) {
-            if (componentRef.current && !componentRef.current.contains(event.target)) {
-                setIsPanelOpen(false);
-                setFilteredTags(new Set());
-                setSelectedCategory("All");
-                setInputTextValue("");
-            }
-        }
-        document.addEventListener("mousedown", handleClickOutside);
-        return () => {
-            document.removeEventListener("mousedown", handleClickOutside);
-        };
-    }, []);
-    const categoriesMappedToTags = () => {
-        const categoriesMap = new Map();
-        allTags.forEach(tag => {
-            const category = categoriesMap.get(tag.Category) || new Set();
-            category.add(tag);
-            categoriesMap.set(tag.Category, category);
-        });
-        return categoriesMap;
-    };
-    const handleClickCategory = (category) => {
-        setSelectedCategory(category);
-        setFilteredTags(category != "All" ? (categoriesMappedToTags().get(category) ?? new Set()) : new Set());
-    };
-    const rgbAString = (r, g, b) => {
-        return `rgb(${r}, ${g}, ${b})`;
-    };
-    const getColor = (category) => {
-        const test = categoriesMappedToTags().get(category)?.values().next().value;
-        if (test !== undefined) {
-            return {
-                onPrimary: rgbAString(test.OnPrimaryColor.r, test.OnPrimaryColor.g, test.OnPrimaryColor.b),
-                primary: rgbAString(test.PrimaryColor.r, test.PrimaryColor.g, test.PrimaryColor.b),
-            };
-        }
-        else {
-            return {
-                onPrimary: "var(--cw-color-on-primary)",
-                primary: "var(--cw-color-primary)"
-            };
-        }
-    };
-    const handleInputText = (input) => {
-        if (selectedCategory !== "All")
-            setSelectedCategory("All");
-        input = input.trimStart();
-        setInputTextValue(input);
-        if (input !== "") {
-            const newFilterTags = Array.from(allTags).filter(tag => !Array.from(selectedTags).some(t => t.ID === tag.ID) &&
-                tag.Name.replaceAll(" ", "").toLowerCase().includes(input.replaceAll(" ", "").toLowerCase()));
-            setFilteredTags(new Set(newFilterTags));
-        }
-        else {
-            setFilteredTags(new Set());
-        }
-    };
-    const addTag = (newTag) => {
-        newTag.Selected = true;
-        newTag.Removable = true;
-        newTag.Selectable = false;
-        if (selectedTags.has(newTag) || Array.from(selectedTags).some(t => t.ID === newTag.ID)) {
-            return;
-        }
-        else {
-            const updatedTags = new Set(selectedTags).add(newTag);
-            onChangeSelectedTags?.(updatedTags);
-            setInputTextValue("");
-            //setFilteredTags(allTags);
-        }
-    };
-    const removeTag = (id) => {
-        const updatedTags = new Set(selectedTags);
-        const toDelete = Array.from(updatedTags).find(i => i.ID === id);
-        if (toDelete) {
-            toDelete.Selected = false;
-            toDelete.Selectable = true;
-            toDelete.Removable = false;
-            updatedTags.delete(toDelete);
-        }
-        onChangeSelectedTags?.(updatedTags);
-    };
-    useEffect(() => {
-        // force to load all tags on first render
-        if (selectedCategory === "All" && filteredTags.size === 0)
-            setFilteredTags(new Set());
-    }, [allTags]);
-    const handleDivClick = () => {
-        if (inputRef !== null) {
-            inputRef.current?.focus();
-        }
-    };
-    return (_jsxs("form", { ref: componentRef, id: id, className: styles["cw-multi-filter"], style: style, onSubmit: (e) => {
-            e.preventDefault();
-        }, children: [_jsxs("div", { onClick: handleDivClick, className: styles["cw-multi-filter-search"], style: isPanelOpen ? { outline: "1px solid var(--cw-color-primary)", outlineOffset: "-2px" } : {}, children: [_jsxs("ul", { id: id + "_selected_filters", children: [Array.from(selectedTags).map(tag => (_createElement(CwMultiFilterTag, { ...tag, key: tag.ID, Selectable: false, Removable: true, OnRemove: () => removeTag(tag.ID) }))), _jsx("input", { type: "text", id: id + "_input", ref: inputRef, value: inputTextValue, spellCheck: false, onFocus: () => setIsPanelOpen(true), onChange: e => handleInputText(e.target.value), autoComplete: "off", placeholder: "Write to filter", onKeyDown: e => {
-                                    switch (e.key) {
-                                        case "Enter":
-                                        case "Tab":
-                                            if (inputTextValue.trim().length > 0 && filteredTags.size > 0) {
-                                                const foundTag = Array.from(filteredTags)[0];
-                                                if (foundTag) {
-                                                    addTag(foundTag);
-                                                }
-                                            }
-                                            break;
-                                        case "Backspace": {
-                                            if (inputTextValue === "" && selectedTags.size > 0) {
-                                                removeTag(Array.from(selectedTags).toReversed()[0].ID);
-                                            }
-                                            break;
-                                        }
-                                    }
-                                } })] }), selectedTags.size > 0 ? (_jsx("input", { type: "reset", value: "\u00D7", onClick: e => {
-                            e.preventDefault();
-                            onChangeSelectedTags?.(new Set());
-                        } })) : null] }), _jsxs("section", { className: styles["cw-multi-filter-catalog-container"], "data-display-none": !isPanelOpen, children: [_jsxs("nav", { children: [_jsx("button", { style: selectedCategory === "All"
-                                    ? {
-                                        backgroundColor: "var(--cw-color-primary-container)",
-                                        color: "var(--cw-color-primary)",
-                                        outline: "2px solid var(--cw-color-primary)",
-                                        outlineOffset: "-2px",
-                                        fontWeight: 400
-                                    }
-                                    : {}, onClick: () => handleClickCategory("All"), children: "SEARCH IN ALL CATEGORIES" }), Array.from(categoriesMappedToTags().keys()).map(category => (_jsx("button", { style: selectedCategory === category
-                                    ? {
-                                        backgroundColor: getColor(category).primary,
-                                        color: getColor(category).onPrimary,
-                                        outline: "2px solid " + getColor(category).onPrimary,
-                                        outlineOffset: "-2px",
-                                        fontWeight: 400
-                                    }
-                                    : {
-                                        backgroundColor: getColor(category).primary,
-                                        color: getColor(category).onPrimary,
-                                    }, onClick: () => handleClickCategory(category), children: category }, category)))] }), _jsx("ul", { children: Array.from(filteredTags).map((props) => (_jsx(CwMultiFilterTag, { ...props, Selectable: true, Removable: false, Selected: Array.from(selectedTags).some(p => p.ID === props.ID), OnSelect: () => {
-                                if (Array.from(selectedTags).some(p => p.ID === props.ID))
-                                    removeTag(props.ID);
-                                else
-                                    addTag(props);
-                            } }, props.ID))) })] })] }));
-};

package/dist/src/components/control/choice/multi-filter/components/tag/CwMultiFilterTag.js

@@ -1,17 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CwIcon } from "../../../../../display/graphics/icon/CwIcon";
-import styles from "./cw-multi-filter-tag.module.css";
-export const CwMultiFilterTag = props => {
-    const { ID, Name, Value, Category, Removable, PrimaryColor, OnPrimaryColor, Selectable, Selected, OnSelect } = props;
-    const BackgroundColor = `rgb(${PrimaryColor.r},${PrimaryColor.g},${PrimaryColor.b})`;
-    const TextColor = `rgb(${OnPrimaryColor.r},${OnPrimaryColor.g},${OnPrimaryColor.b})`;
-    return (_jsxs("li", { className: styles["cw-multifilter-tag"], "data-selected": !!props.Selected, "data-removable": !!props.Removable, style: {
-            color: TextColor,
-            backgroundColor: BackgroundColor,
-            opacity: Selected && !Removable ? "0.5" : "1",
-            outlineColor: TextColor
-        }, onClick: () => {
-            if (Selectable)
-                OnSelect?.(props);
-        }, children: [_jsx("span", { id: ID, "data-value": Value, "data-category": Category, children: Name }), Removable && (_jsx("span", { onClick: () => props.OnRemove?.(props), children: _jsx(CwIcon, { iconId: "close" }) }))] }));
-};

package/dist/src/components/control/choice/multiselect/CwHeadFilter.js

@@ -1,80 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { useEffect, useRef, useState } from "react";
-import { CwIcon } from "../../../display/graphics/icon/CwIcon";
-export function CwHeadFilter(cwelltFilterTabMultiSelectProps) {
-    // - Reference div content input search
-    const headContent_ref = React.createRef();
-    const optionList = document.getElementsByClassName("cw-multiselect-option-list");
-    const refContent = useRef(null);
-    // - Hooks show clear button
-    const [_isShowClearButton, setShowClearButton] = useState(false);
-    // - Hooks value of input search
-    const [inputValue, setInputValue] = useState("");
-    // Ref [ input ] ( cwellt_headFilterTab )
-    const headInputFitlerTab_ref = useRef(null);
-    const headFilter_content_tags_ref = useRef(null);
-    // cwellt_headFilterTab [ onclick ( show dropDown and enable input .focus() )]
-    const onClickHeaderFilterTab = () => {
-        // Show and hide dropDownContainer - onShowDropDown [ interface ]
-        cwelltFilterTabMultiSelectProps.onShowDropDown();
-        // Click on dropDown enable input - [ ref : headFitlerTab_ref ] and evaluating not null
-        if (headInputFitlerTab_ref.current) {
-            headInputFitlerTab_ref.current.focus();
-        }
-    };
-    // - on change input search
-    const onChangeInputSearch = (event_onChangeInput) => {
-        // let searchInput_length = event_onChangeInput.currentTarget.value.length;
-        // if (searchInput_length > 0) {
-        // 	setShowClearButton(true);
-        // } else {
-        // 	setShowClearButton(false);
-        // }
-        setInputValue(event_onChangeInput.currentTarget.value);
-        // - onChangeSearch
-        cwelltFilterTabMultiSelectProps.onChangeSearch(event_onChangeInput);
-    };
-    // - clear input value
-    const onClearInputValue = (e) => {
-        setInputValue("");
-        setShowClearButton(false);
-        // onClearValue
-        cwelltFilterTabMultiSelectProps.onClearValue(e);
-    };
-    // - onKeyPress
-    const onKeyPressInput = (event_keyPress) => {
-        if (typeof cwelltFilterTabMultiSelectProps.onKeypressInput === "function") {
-            cwelltFilterTabMultiSelectProps.onKeypressInput(event_keyPress);
-            // clear input field
-            if (event_keyPress.key === "Enter") {
-                setInputValue("");
-            }
-        }
-    };
-    const handleBlur = (event) => {
-        if (typeof cwelltFilterTabMultiSelectProps.onBlur === "function") {
-            cwelltFilterTabMultiSelectProps.onBlur(event);
-        }
-    };
-    const clickOptionList = () => {
-        if (optionList.length > 0) {
-            Array.from(optionList).forEach(index => {
-                const optionListItem = index;
-                optionListItem.addEventListener("click", () => {
-                    setInputValue("");
-                });
-            });
-        }
-    };
-    //#region useEffect
-    useEffect(() => {
-        window.addEventListener("keypress", onKeyPressInput);
-        clickOptionList();
-        return () => {
-            window.removeEventListener("keypress", onKeyPressInput);
-        };
-    });
-    //#endregion
-    return (_jsxs("div", { className: cwelltFilterTabMultiSelectProps.className + " cw-headfilter", style: cwelltFilterTabMultiSelectProps.style, id: cwelltFilterTabMultiSelectProps.Id, onMouseLeave: cwelltFilterTabMultiSelectProps.onMouseLeave, ref: refContent, children: [_jsxs("div", { className: "cw-headfilter-wrapper", onClick: () => onClickHeaderFilterTab(), children: [_jsx(CwIcon, { iconId: "search", size: "large" }), _jsxs("div", { className: "cw-headfilter-content", children: [_jsx("div", { className: "cw-flex-row cw-gap-small cw-align-left-center cw-flex-wrap", ref: headFilter_content_tags_ref, children: cwelltFilterTabMultiSelectProps.tagValueContent }), _jsx("div", { className: "headFilter_search_content", ref: headContent_ref, children: _jsx("input", { id: "headFilter_inputSearch", value: inputValue, onKeyPress: event_keyPress => onKeyPressInput(event_keyPress), onBlur: handleBlur, type: "search", onChange: event_onChangeInput => onChangeInputSearch(event_onChangeInput), placeholder: cwelltFilterTabMultiSelectProps.placeholder_desc, ref: headInputFitlerTab_ref }) })] }), _jsx(CwIcon, { iconId: "close-circle", onClick: (e) => onClearInputValue(e) })] }), cwelltFilterTabMultiSelectProps.children] }));
-}