@cwellt_software/cwellt-reactjs-lib 1.2.14 → 1.2.15

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

@@ -1,393 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
-import { getContrastColor } from "../../../../common/functions/colorManipulation";
-import { CwTag } from "../../../display/text/tag/CwTag";
-import { CwDropdownContainer } from "../dropdown/CwDropdownContainer";
-import { CwHeadFilter } from "./CwHeadFilter";
-import { CwOptionList } from "./CwOptionList";
-//#endregion
-export function CwMultiselect(CwelltCustomFilterTabProps) {
-    //#region Reference
-    const refOptionListContent = useRef(null);
-    const containerRef = useRef(null);
-    //#endregion
-    //#region Hooks
-    const [isShowDropDownfiltered, setShowDropDownfiltered] = useState(false);
-    // const [tagValue, setTagValue] = useState<{
-    // 	tagDesc: string;
-    // 	bgContent: string;
-    // 	bgTag: string;
-    // 	color: string;
-    // }[]>([]);
-    // Hook active label filter item tab [ All ]
-    const [isActive_filter_item_all, setActive_filter_item_all] = useState(true);
-    // Hook active laberl fitler item tab [ e.g.: Duty ]
-    const [isActive_filter_item, setActive_filter_item] = useState(null);
-    // Hook isSelected option list
-    //const [isSelected_optionList, setSelected_optionList] = useState<{ [key: string]: boolean }>({});
-    //#endregion
-    //#region Functions
-    //#region CwelltFilterTabMultiSelect [ properties functions ]
-    //#region onClearValue
-    const clearValue = (e_clear) => {
-        // List items to remove class and be visible
-        // Item searched
-        const itemSearched = document.getElementsByClassName("item-search");
-        // Item hidden
-        const itemHidden = document.getElementsByClassName("hidden-item");
-        // Item searcched
-        if (itemSearched.length > 0) {
-            for (let i = 0; i <= itemSearched.length; i++) {
-                itemSearched[i]?.classList.remove("item-search");
-            }
-        }
-        // Item hidden
-        if (itemHidden.length > 0) {
-            for (let i = 0; i <= itemHidden.length; i++) {
-                itemHidden[i]?.classList.remove("hidden-item");
-            }
-        }
-        // optionList [ disbaled active className according their text ]
-        const parent = e_clear.currentTarget.parentElement.parentElement;
-        const optionActive = parent.getElementsByClassName("option-active");
-        const valueIds = [];
-        const resultList = [];
-        if (optionActive.length > 0) {
-            CwelltCustomFilterTabProps.onclickHandleChange(valueIds, resultList);
-            Array.from(optionActive).forEach(index => {
-                const optionActive_array = index;
-                optionActive_array.classList.remove("option-active");
-            });
-        }
-    };
-    //#endregion
-    //#region onChangeSearch
-    const onChangeSearch = (e_onchange) => {
-        const filterText_lowerCase = e_onchange.currentTarget.value.toLowerCase();
-        // Tags for filtering
-        const listTag = document.getElementsByClassName("cw-multiselect-option-list");
-        for (let i = 0; i <= listTag.length; i++) {
-            if (listTag[i] !== undefined) {
-                const textTagValue = listTag[i].textContent;
-                // Writting
-                if (textTagValue?.toLowerCase().includes(filterText_lowerCase)) {
-                    listTag[i].classList.add("item-search");
-                }
-                else {
-                    listTag[i].classList.add("hidden-item");
-                }
-                // remove written
-                if (!textTagValue?.toLowerCase().includes(filterText_lowerCase)) {
-                    listTag[i].classList.remove("item-search");
-                }
-                else {
-                    listTag[i].classList.remove("hidden-item");
-                }
-                if (filterText_lowerCase === "") {
-                    listTag[i].classList.remove("item-search");
-                }
-            }
-        }
-        // Length of string > 0 show dropDownContainerComp
-        if (e_onchange.currentTarget.value.length > 0) {
-            setShowDropDownfiltered(true);
-        }
-    };
-    //#endregion
-    //#region onKeyPressInput
-    const onKeyPressSearch = (event_onKeypress) => {
-        //#region Variables
-        const keyPressed = event_onKeypress.key;
-        const optionSearched = document.getElementsByClassName("item-search");
-        //#endregion
-        // first item selected or same text
-        const optionArray = Array.from(optionSearched);
-        if (optionArray.length > 0 && keyPressed === "Enter" && event_onKeypress.currentTarget.value !== "") {
-            const firstElement_optionList = optionArray[0];
-            const textContent = firstElement_optionList.textContent;
-            const elementList = CwelltCustomFilterTabProps.selectListsItems?.find(e => e.find(el => el.description === textContent));
-            const element = elementList?.find(el => el.description === textContent);
-            if (element !== undefined) {
-                const exist = CwelltCustomFilterTabProps.selectedListsItems?.some(s => s.description === textContent);
-                if (exist === false) {
-                    handleClickTag(element);
-                }
-            }
-            const optionList_item_hidden = document.getElementsByClassName("hidden-item");
-            if (optionList_item_hidden.length > 0) {
-                Array.from(optionList_item_hidden).forEach(index => {
-                    const optionList_hidden_array = index;
-                    if (optionList_hidden_array.classList.contains("hidden-item")) {
-                        optionList_hidden_array.classList.remove("hidden-item");
-                    }
-                });
-            }
-        }
-    };
-    //#endregion
-    //#region ShowDropDownFilter
-    const showDropDownfiltered = () => {
-        setShowDropDownfiltered(!isShowDropDownfiltered);
-    };
-    //#endregion
-    class SelectListTest {
-        description;
-        key;
-        type;
-        typeName;
-        val;
-        value;
-        active;
-    }
-    const handleClickTag = (e) => {
-        const preList = CwelltCustomFilterTabProps.selectedListsItems || [];
-        const valueIds = [];
-        const resultList = preList?.map(s => {
-            const item = new SelectListTest();
-            item.description = s.description;
-            item.key = s.type + "_" + s.id;
-            item.type = s.type;
-            item.val = s.id;
-            item.value = item.key;
-            item.active = s.active ?? false;
-            valueIds.push(item.key);
-            return item;
-        });
-        const a = new SelectListTest();
-        a.description = e.description;
-        a.key = e.type + "_" + e.id;
-        a.type = e.type;
-        a.val = e.id;
-        a.value = a.key;
-        a.active = e.active;
-        const exist = resultList?.some(item => item.key === a.key);
-        if (exist) {
-            a.active = false;
-            const list = resultList?.filter(item => item.key !== a.key);
-            const values = valueIds.filter(v => v !== a.key);
-            CwelltCustomFilterTabProps.onclickHandleChange(values, list);
-        }
-        else {
-            a.active = true;
-            resultList?.push(a);
-            valueIds.push(a.key);
-            CwelltCustomFilterTabProps.onclickHandleChange(valueIds, resultList);
-        }
-        // // Selected item option list
-        // setSelected_optionList((prevSelectedStates) => ({
-        // 	...prevSelectedStates,
-        // 	[a.key]: !prevSelectedStates[a.key],
-        // }));
-        // clear filter by text after clicked in option list
-        const optionList_item_hidden = document.getElementsByClassName("hidden-item");
-        if (optionList_item_hidden.length > 0) {
-            Array.from(optionList_item_hidden).forEach(index => {
-                const optionList_hidden_array = index;
-                if (optionList_hidden_array.classList.contains("hidden-item")) {
-                    optionList_hidden_array.classList.remove("hidden-item");
-                }
-            });
-        }
-        // Check click from option list has custom tag header of custom filter tab
-        const tagActive = document.getElementsByClassName("multiselect-active-tag");
-        const optionList = document.getElementsByClassName("cw-multiselect-option-list");
-        if (tagActive.length > 0 && optionList.length > 0) {
-            Array.from(tagActive).forEach(_index => {
-                Array.from(optionList).forEach(index => {
-                    const optionList_array = index;
-                    const optionId = optionList_array.getAttribute('data-id');
-                    if (optionId === (e.type + "_" + e.id)) {
-                        optionList_array.classList.remove("option-active");
-                    }
-                });
-            });
-        }
-        const optionList_desc = document.getElementsByClassName("option-active");
-        if (optionList_desc.length > 0) {
-            Array.from(optionList_desc).forEach(index => {
-                const optionList_desc_array = index;
-                if (optionList_desc_array.innerText === a.description) {
-                    optionList_desc_array.classList.remove("option-active");
-                }
-            });
-        }
-        //  Click to  hide dropDownContainer
-        setShowDropDownfiltered(false);
-    };
-    // [ click custom tag ]
-    const closeTagHandle = (e) => {
-        const preList = CwelltCustomFilterTabProps.selectedListsItems;
-        const valueIds = [];
-        const resultList = preList?.map(s => {
-            const item = new SelectListTest();
-            item.description = s.description;
-            item.key = s.type + "_" + s.id;
-            item.type = s.type;
-            item.val = s.id;
-            item.value = item.key;
-            valueIds.push(item.key);
-            return item;
-        });
-        const a = new SelectListTest();
-        a.description = e.description;
-        a.key = e.type + "_" + e.id;
-        a.type = e.type;
-        a.val = e.id;
-        a.value = a.key;
-        const resultListFilter = resultList?.filter(item => item.key !== a.key);
-        const valueIdsFilter = valueIds.filter(item => item !== a.key);
-        CwelltCustomFilterTabProps.onclickHandleChange(valueIdsFilter, resultListFilter);
-        // // Selected item option list - remove active option list
-        // setSelected_optionList((prevSelectedStates) => ({
-        // 	...prevSelectedStates,
-        // 	[a.key]: false[a.key],
-        // }));
-        const optionList_active = document.getElementsByClassName("option-active");
-        if (optionList_active.length > 0) {
-            Array.from(optionList_active).forEach(index => {
-                const optionList_active_array = index;
-                const optionId = optionList_active_array.getAttribute('data-id');
-                if (optionId === (e.type + "_" + e.id)) {
-                    optionList_active_array.classList.remove("option-active");
-                }
-            });
-        }
-    };
-    //#endregion
-    //#region DropDownContainer [ properties functions ]
-    //#region onKeyDownDropDownContainer [  press ESC dropDownContainer dissapear - ArrowUp && ArrowDown ]
-    const onKeyDownDropDownContent = (event_onKeyDown) => {
-        const items = document.querySelectorAll(".cw-multiselect-option-list");
-        let optionIndex = Array.from(items).findIndex(item => item.classList.contains("keyboard-focus"));
-        if (event_onKeyDown.key === "Escape") {
-            // DropDown disappear
-            setShowDropDownfiltered(false);
-        }
-        // KeyDown
-        if (event_onKeyDown.key === "ArrowDown") {
-            event_onKeyDown.preventDefault();
-            removeHighlight();
-            optionIndex = getNextIndex(optionIndex, items.length);
-            highlightOption(optionIndex);
-        }
-        // KeyUp
-        if (event_onKeyDown.key === "ArrowUp") {
-            event_onKeyDown.preventDefault();
-            removeHighlight();
-            optionIndex = getPreviousIndex(optionIndex, items.length);
-            highlightOption(optionIndex);
-        }
-    };
-    const removeHighlight = () => {
-        const highlightedItem = document.querySelector(".keyboard-focus");
-        if (highlightedItem) {
-            highlightedItem.classList.remove("keyboard-focus");
-        }
-    };
-    const getNextIndex = (currentIndex, length) => {
-        return (currentIndex + 1) % length;
-    };
-    const getPreviousIndex = (currentIndex, length) => {
-        return (currentIndex - 1 + length) % length;
-    };
-    const highlightOption = (index) => {
-        const items = document.querySelectorAll(".cw-multiselect-option-list");
-        const item = items[index];
-        item.classList.add("keyboard-focus");
-    };
-    //#endregion
-    //#region onMouseLeave
-    const handleInputBlur = () => {
-        setTimeout(() => {
-            if (!containerRef.current?.contains(document.activeElement)) {
-                setShowDropDownfiltered(false);
-            }
-        }, 150);
-    };
-    useEffect(() => {
-        const handleClickOutside = (event) => {
-            if (containerRef.current && !containerRef.current.contains(event.target)) {
-                setShowDropDownfiltered(false);
-            }
-        };
-        document.addEventListener('mousedown', handleClickOutside);
-        return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    }, []);
-    //#endregion
-    // Click filter item button
-    const clickFilter_item = (id) => {
-        // content items - looking for className by it - corresponded by their current group
-        const contentItems = document.getElementsByClassName(id);
-        const contentAll = document.getElementsByClassName("multiselect-tag-group");
-        if (contentAll.length > 0) {
-            Array.from(contentAll).forEach(index => {
-                const contentAll_array = index;
-                contentAll_array.classList.add("hidden-group");
-            });
-        }
-        if (contentItems.length > 0) {
-            Array.from(contentItems).forEach(index => {
-                const contentItems_array = index;
-                contentItems_array.classList.remove("hidden-group");
-            });
-        }
-        // Adding custom className acitive
-        setActive_filter_item(id);
-        // Remove active className [ label tab : ( ALL ) ]
-        setActive_filter_item_all(false);
-    };
-    const showAllItem = () => {
-        //let currentBtn = e.currentTarget;
-        const contentAll = document.getElementsByClassName("multiselect-tag-group");
-        if (contentAll.length > 0) {
-            Array.from(contentAll).forEach(index => {
-                const contentAll_array = index;
-                contentAll_array.classList.remove("hidden-group");
-                // active className - all
-                setActive_filter_item_all(true);
-                setActive_filter_item("");
-            });
-        }
-    };
-    //#endregion
-    useEffect(() => {
-        if (CwelltCustomFilterTabProps.selectedListsItems) {
-            const allOptions = document.getElementsByClassName("cw-multiselect-option-list");
-            Array.from(allOptions).forEach(option => {
-                option.classList.remove("option-active");
-            });
-            CwelltCustomFilterTabProps.selectedListsItems.forEach(selectedItem => {
-                Array.from(allOptions).forEach(option => {
-                    const optionElement = option;
-                    if (optionElement.innerText === selectedItem.description) {
-                        optionElement.classList.add("option-active");
-                    }
-                });
-            });
-        }
-    }, [CwelltCustomFilterTabProps.selectedListsItems]);
-    return (_jsx("div", { ref: containerRef, children: _jsx(CwHeadFilter, { Id: CwelltCustomFilterTabProps.id, onChangeSearch: (e_onchange) => onChangeSearch(e_onchange), onClearValue: (e_clear) => clearValue(e_clear), onKeypressInput: onKeyPressSearch, onShowDropDown: showDropDownfiltered, placeholder_desc: CwelltCustomFilterTabProps.placeholder, style: CwelltCustomFilterTabProps.style, onBlur: handleInputBlur, 
-            // onMouseLeave={onMouseLeave_dropDownContainer}
-            className: CwelltCustomFilterTabProps.selectedListsItems?.length === 0
-                ? "cw-filter-tab-multi-select-show-icon"
-                : "cw-filter-tab-multi-select-hidden-icon", tagValueContent: _jsx("div", { className: "cw-flex-row cw-gap-small", children: CwelltCustomFilterTabProps.selectedListsItems?.map((s, index) => {
-                    return s.type !== undefined ? (_jsx(CwTag, { styleTag: {
-                            background: s.color,
-                            color: getContrastColor(s.color),
-                        }, idTag: s.type + "_" + s.id, closableTag: true, onClickClosableTag: () => closeTagHandle(s), "data-id": s.type + "_" + s.id, className: "multiselect-active-tag", children: s.description }, index)) : (_jsx("div", {}));
-                }) }), children: _jsx(CwDropdownContainer, { dropDownState: isShowDropDownfiltered, idDropDownContainer: CwelltCustomFilterTabProps.idDropDownContainer, onKeyDownDropDownContainer: (event_onKeyDown) => onKeyDownDropDownContent(event_onKeyDown), children: _jsxs("div", { className: "cw-multiselect-dropdown", children: [_jsxs("header", { children: [_jsx("label", { "data-active": isActive_filter_item_all, onClick: showAllItem, children: "ALL" }), CwelltCustomFilterTabProps.selectListsItems?.map((slArray, i) => (_jsx("label", { "data-active": isActive_filter_item === 'content_' + i, 
-                                    // todo : giving parameter by id to search by their corresponding group it list options and className content with their id in this case key ( i ) by .map function
-                                    onClick: () => clickFilter_item("content_" + i), id: "content_" + i, children: slArray.length > 0 && slArray[0].typeName !== undefined
-                                        ? slArray[0].typeName
-                                        : slArray.length > 0
-                                            ? slArray[0].type
-                                            : "" }, i)))] }), _jsx("div", { className: "cw-multiselect-tags-container", children: CwelltCustomFilterTabProps.selectListsItems?.map((slArray, i) => (_jsx("div", { id: "content_" + i, className: `multiselect-tag-group content_${i}`, ref: refOptionListContent, children: slArray.map(sl => {
-                                    const isSelected = CwelltCustomFilterTabProps.selectedListsItems?.some(selected => selected.type === sl.type && selected.id === sl.id) || false;
-                                    return (_jsx(CwOptionList, { idOptionList: sl.type + "_" + sl.id, value: sl.type + "_" + sl.id, title: sl.description, onClick: () => handleClickTag(sl), isSelected: sl.active, "data-id": sl.type + "_" + sl.id, children: _jsx(CwTag, { styleTag: {
-                                                background: sl.color,
-                                                color: getContrastColor(sl.color),
-                                            }, closableTag: isSelected, children: sl.description }) }, sl.type + "_" + sl.id));
-                                }) }, "group" + i))) })] }) }) }) }));
-}

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

@@ -1,36 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { useEffect } from "react";
-export function CwOptionList(optionListProps) {
-    //#region References
-    // - Ref : optionList
-    const optionListSelected_ref = React.createRef();
-    const optionListSelected_input_ref = React.createRef();
-    //#endregion
-    //#region Hooks
-    // - Hooks : selected optionList
-    // const [isSelectedOptionList, setIsSelectedOptionList] = useState(optionListProps.isSelected || false);
-    //#endregion
-    //#region Functions
-    const onClickSelectOptionList = (event_click) => {
-        // - click of custom component
-        // onSelectedOptionList();
-        // - click of property interface
-        optionListProps.onClick(event_click);
-    };
-    const onKeyPressOptionList = (event_onKeyPress) => {
-        if (typeof optionListProps.onKeyPress === "function") {
-            optionListProps.onKeyPress(event_onKeyPress);
-        }
-    };
-    //#endregion
-    //#region Useffect
-    useEffect(() => {
-        window.addEventListener("keypress", onKeyPressOptionList);
-        return () => {
-            window.removeEventListener("keypress", onKeyPressOptionList);
-        };
-    }, []);
-    //#endregion
-    return (_jsxs("div", { className: `cw-multiselect-option-list${optionListProps.isSelected ? ' option-active' : ''}`, onClick: event_click => onClickSelectOptionList(event_click), id: optionListProps.idOptionList, ref: optionListSelected_ref, "aria-value-text": optionListProps.value, onKeyPress: event_onKeyPress => onKeyPressOptionList(event_onKeyPress), style: optionListProps.style, children: [_jsx("label", { htmlFor: optionListProps.idOptionList, children: optionListProps.children }), _jsx("input", { type: "checkbox", value: optionListProps.value, ref: optionListSelected_input_ref, id: optionListProps.idOptionList, onClick: optionListProps.onChangeOptionList })] }));
-}

package/dist/src/components/control/choice/option/CwOption.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * Option to display in the CwSelect
- * @remarks
- * Must be child of CwSelect
- * @example
- * <CwSelect>
- *   <CwOption>A</CwOption>
- *   <CwOption>B</CwOption>
- *   <CwOption>C</CwOption>
- * </CwSelect>
- */
-export function CwOption(props) {
-    const { text, ...optionProps } = props;
-    return (_jsx("option", { className: "cw-option", ...optionProps, children: optionProps.children ?? text }));
-}

package/dist/src/components/control/choice/select/CwSelect.js

@@ -1,36 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CwButton } from "../../../../components/control/action/button/CwButton";
-import { CwIcon } from "../../../../components/display/graphics/icon/CwIcon";
-import { CwLabel } from "../../../../components/display/text/label/CwLabel";
-import { CwAlign } from "../../../../components/layout/align/CwAlign";
-import { CwOption } from "../option/CwOption";
-/**
- * Input for selecting an option from a list
- * @remarks
- * ```txt
- * CwIcon  CwLabel     CwSelect        CwButton
- *  ↑      ↑           ↑               ↑
- *              ╭────────────────────╮╭════╮
- *  ⌂   Cat:    │  Choose a cat   ╲╱ │║ Ok ║
- *              ╰────────────────────╯╰════╯
- *              │ Orange             │ ← CwOption
- *              ├────────────────────┤
- *              │ Black              │ ← CwOption
- *              ├────────────────────┤
- *              │ White              │ ← CwOption
- *              ╰────────────────────╯
- * ```
- * @example
- * <CwSelect name="cat" iconProps={{iconId:"pet"}} labelProps={{children:"Cat:"}}>
- *   <CwOption value="" > - Choose a cat - </CwOption>
- *   <CwOption value="o" >Orange</CwOption>
- *   <CwOption value="b" >Black</CwOption>
- *   <CwOption value="w" >White</CwOption>
- * </CwSelect>
- */
-export function CwSelect(props) {
-    const { alignProps, labelProps, buttonProps, iconProps, placeholder, children, ...selectProps } = props;
-    const flexDirection = alignProps?.flexDirection;
-    const dataDirection = flexDirection ? { 'data-direction': flexDirection } : {};
-    return (_jsx("div", { className: "cw-select", ...dataDirection, children: _jsxs(CwAlign, { ...alignProps, itemProp: selectProps.required === true ? "required" : "", children: [labelProps && (_jsxs(CwLabel, { ...labelProps, children: [iconProps && _jsx(CwIcon, { ...iconProps }), labelProps.text] })), _jsxs("select", { ...selectProps, children: [placeholder && _jsx(CwOption, { value: "", children: placeholder }), children] }), buttonProps && _jsx(CwButton, { ...buttonProps })] }) }));
-}

package/dist/src/components/control/choice/toggle/CwToggle.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CwIcon } from "../../../../components/display/graphics/icon/CwIcon";
-export function CwToggle(props) {
-    const { labelProps, labelText, iconProps, alignment = "row", className, ...inputProps } = props;
-    const displayText = labelText || labelProps?.text;
-    return (_jsx("div", { className: `cw-toggle${className ? ` ${className}` : ''}`, children: _jsxs("label", { className: "cw-toggle-label", "data-direction": alignment, children: [displayText && (_jsxs("span", { className: "cw-icon-text", children: [iconProps && _jsx(CwIcon, { ...iconProps }), displayText] })), _jsx("input", { 
-                    //data-color={color}
-                    type: "checkbox", ...inputProps })] }) }));
-}

package/dist/src/components/control/input/any/CwInput.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function CwInput(CwInputProps) {
-    const handleChange = (e) => {
-        CwInputProps.onChange(e.target.value);
-    };
-    const handleClearClick = () => {
-        CwInputProps.onChange("");
-    };
-    return (_jsxs("div", { className: CwInputProps.labelPosition === "column"
-            ? "cw-flex-column"
-            : "cw-flex-row ", children: [_jsx("label", { className: CwInputProps.disabled === true
-                    ? CwInputProps.labelClassName + " " + "cw_label_text cw_label_text_disabled"
-                    : CwInputProps.labelClassName + " " + "cw_label_text", children: CwInputProps.labelName }), _jsx("input", { id: CwInputProps.id, type: "text", value: CwInputProps.value, onChange: e => handleChange(e), className: CwInputProps.className + " " + "cw_input", placeholder: CwInputProps.placeholder === undefined ? "Write a text please" : CwInputProps.placeholder, style: CwInputProps.style, disabled: CwInputProps.disabled, required: CwInputProps.required }), CwInputProps.value && (
-            // if the component is disabled do not show clear button
-            _jsx("button", { className: "cw_button_clear cwellt_flex cwellt_justify_center cwellt_align_items_center", onClick: handleClearClick }))] }));
-}