@cwellt_software/cwellt-reactjs-lib 1.1.6 → 1.2.0

package/dist/src/components/control/action/contextmenu/CwContextMenu.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import styles from "./cw-context-menu.module.css";
+/**
+ * A context menu that is rendered when the user clicks on a button.
+ * @author NVS
+ * @example
+ * <ContextMenu
+ *  options={['Option 1', 'Option 2', 'Option 3']}
+ *  onSelect={(option) => console.log(`Selected: ${option}`)}
+ * >
+ *   <div>Right-click me!</div>
+ * </ContextMenu>
+ */
+export const CwContextMenu = ({ children, options, offset, onSelect }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [position, setPosition] = useState({ x: 0, y: 0 });
+    const menuRef = useRef(null);
+    const handleContextMenu = (event) => {
+        event.preventDefault();
+        setIsOpen(true);
+        setPosition({ x: event.clientX, y: event.clientY });
+    };
+    const handleOptionClick = (option) => {
+        onSelect(option);
+        setIsOpen(false);
+    };
+    useEffect(() => {
+        const handleOutsideClick = (event) => {
+            if (menuRef.current && !menuRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handleOutsideClick);
+        return () => {
+            document.removeEventListener("mousedown", handleOutsideClick);
+        };
+    }, []);
+    return (_jsxs("div", { onContextMenu: handleContextMenu, children: [children, isOpen && (_jsx("div", { ref: menuRef, className: styles["context-menu"], style: {
+                    top: position.y + (offset?.y || 0),
+                    left: position.x + (offset?.x || 0),
+                }, children: options.map(option => (_jsx("div", { onClick: () => handleOptionClick(option), className: styles["context-menu-item"], children: option }, option))) }))] }));
+};

package/dist/src/components/control/action/contextual-menu/CwContextualMenu.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+export function CwDataItem(cwBoxItemsProps) {
+    return (_jsx("div", { id: cwBoxItemsProps.id, className: "cwelltBoxItems", style: cwBoxItemsProps.style, children: _jsx("span", { className: "cwelltBoxItemsText cwelltFont1em_required", style: cwBoxItemsProps.styleDataItem, children: cwBoxItemsProps.children }) }));
+}
+export function CwContextualMenu(CwelltRightClickProps) {
+    //#region Hooks
+    const [isVisibleContextMenu, setVisibleContextMenu] = useState(false);
+    const [resetClassName, setResetClassName] = useState("");
+    const [positionRightClick, setpositionRightClick] = useState({ x: 0, y: 0 });
+    //#endregion
+    //#region Functions
+    const onShowContextMenu = (e) => {
+        e.preventDefault();
+        setVisibleContextMenu(true);
+        const newPosition = {
+            x: e.clientX - e.currentTarget.getBoundingClientRect().left,
+            y: e.clientY - e.currentTarget.getBoundingClientRect().top
+        };
+        setpositionRightClick(newPosition);
+        toggleClassName();
+    };
+    const toggleClassName = () => {
+        setTimeout(() => {
+            setResetClassName("cwellt_fade_out");
+        });
+        setTimeout(() => {
+            setResetClassName("cwellt_fade_in");
+        }, 500);
+    };
+    const onMouseLeaveContextMenuContainer = () => {
+        setVisibleContextMenu(false);
+    };
+    const onClickContextMenuContainer = () => {
+        setVisibleContextMenu(false);
+        CwelltRightClickProps.onClick;
+    };
+    const onKeyUpContextMenu = (e) => {
+        if (e.key === "Escape") {
+            // context menu dissapear
+            setVisibleContextMenu(false);
+        }
+        if (e.key === "Enter") {
+            // context menu dissapear
+            setVisibleContextMenu(false);
+        }
+    };
+    //#endregion
+    return (_jsxs("div", { className: "cwelltContextMenu_container", onContextMenu: onShowContextMenu, onMouseLeave: onMouseLeaveContextMenuContainer, onClick: onClickContextMenuContainer, style: { position: "relative" }, onKeyUp: e => onKeyUpContextMenu(e), tabIndex: 0, children: [CwelltRightClickProps.children, _jsx("div", { id: "contextMenu", className: isVisibleContextMenu ? "cwelltContextMenu " + resetClassName : "cwelltContextMenuHide " + resetClassName, style: {
+                    top: positionRightClick.y,
+                    left: positionRightClick.x
+                }, children: CwelltRightClickProps.dataSourceContextMenu?.map(indexDataItem => {
+                    return (_jsx(CwDataItem, { id: indexDataItem.idDataItem, style: indexDataItem.style, styleDataItem: indexDataItem.styleDataItem, children: indexDataItem.dataItemContent }));
+                }) })] }));
+}

package/dist/src/components/control/action/search/CwSearch.d.ts

@@ -1,9 +1,13 @@
 import React, { type HTMLProps } from "react";
 import { CwSelectList } from "../../../../common/classes/CwSelectList";
+import { type CwIconProps } from "../../../../components/display/graphics/icon/CwIcon";
+import { CwLabelProps } from "../../../../components/display/text/label/CwLabel";
+import { CwAlignProps } from "../../../../components/layout/align/CwAlign";
 export interface CwSearchInputProps extends HTMLProps<HTMLDivElement> {
     selectList: Array<CwSelectList>;
-    labelName?: string;
-    labelPosition?: string;
+    labelProps?: CwLabelProps;
+    iconProps?: CwIconProps;
+    alignProps?: CwAlignProps;
     handleChange?: (value: any) => void;
     placeholder?: string;
     className?: string;

package/dist/src/components/control/action/search/CwSearch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CwSearch.d.ts","sourceRoot":"","sources":["../../../../../../src/components/control/action/search/CwSearch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAuB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,yCAAyC,CAAC;AAEvE,MAAM,WAAW,kBAAmB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACpE,UAAU,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,KAAK,CAAC,SAAS,CAAC;CACzD;AAED,wBAAgB,aAAa,CAAC,YAAY,EAAE,KAAK,CAAC,iBAAiB,CAAC,kBAAkB,CAAC,2CAyItF"}
+{"version":3,"file":"CwSearch.d.ts","sourceRoot":"","sources":["../../../../../../src/components/control/action/search/CwSearch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAuB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,yCAAyC,CAAC;AAEvE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,qDAAqD,CAAC;AAC/F,OAAO,EAAW,YAAY,EAAE,MAAM,mDAAmD,CAAC;AAC1F,OAAO,EAAW,YAAY,EAAE,MAAM,6CAA6C,CAAC;AAEpF,MAAM,WAAW,kBAAmB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACpE,UAAU,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;IAEhC,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,UAAU,CAAC,EAAE,YAAY,CAAC;IAE1B,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,KAAK,CAAC,SAAS,CAAC;CACzD;AAED,wBAAgB,aAAa,CAAC,YAAY,EAAE,KAAK,CAAC,iBAAiB,CAAC,kBAAkB,CAAC,2CAgKtF"}

package/dist/src/components/control/action/search/CwSearch.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+export function CwSearchInput(optionsProps) {
+    const [searchText, setSearchText] = useState("");
+    const [filteredOptions, setFilteredOptions] = useState([]);
+    const [_selectedOption, setSelectedOption] = useState(null);
+    // Make default value selection when loading the component
+    useEffect(() => {
+        if (optionsProps.defaultValue && optionsProps.selectList && optionsProps.selectList.length > 0) {
+            const defaultOption = optionsProps.selectList.find(option => option.id === optionsProps.defaultValue?.toString());
+            if (defaultOption) {
+                setSearchText(defaultOption.description);
+                setSelectedOption(defaultOption);
+                // Notify the parent component if there is a handleChange
+                if (optionsProps.handleChange) {
+                    optionsProps.handleChange(defaultOption.id);
+                }
+            }
+        }
+    }, [optionsProps.defaultValue, optionsProps.selectList]);
+    const handleInputChange = (event) => {
+        const text = event.target.value;
+        setSearchText(text);
+        if (text === "") {
+            setFilteredOptions([]);
+            setSelectedOption(null);
+            // Notify that there is no selection
+            if (optionsProps.handleChange) {
+                optionsProps.handleChange("");
+            }
+        }
+        else {
+            // Filter options based on search text in any text property
+            const filtered = optionsProps.selectList.filter((option) => {
+                // Search all properties of the object
+                return Object.keys(option).some(key => {
+                    const value = option[key];
+                    // Verify that the value is a string or number and contains the search text
+                    return (typeof value === 'string' || typeof value === 'number') &&
+                        String(value).toLowerCase().includes(text.toLowerCase());
+                });
+            });
+            setFilteredOptions(filtered);
+        }
+    };
+    const handleOptionSelect = (option) => {
+        setSearchText(option.description);
+        setSelectedOption(option);
+        if (optionsProps.handleChange) {
+            optionsProps.handleChange(option.id);
+        }
+        // Remove the filtered options when selecting one
+        setFilteredOptions([]);
+    };
+    const handleClearClick = () => {
+        setSearchText("");
+        setFilteredOptions([]);
+        setSelectedOption(null);
+    };
+    return (_jsxs("div", { className: "cwSearchInputComp", style: optionsProps.style, id: optionsProps.id, children: [_jsxs("div", { className: optionsProps.labelPosition === "inline"
+                    ? "cw-flex-row "
+                    : optionsProps.labelPosition === "column"
+                        ? "cw-flex-column"
+                        : "cw-flex-row ", children: [optionsProps.labelName && (_jsx("label", { className: optionsProps.disabled === true
+                            ? "cw_label_text cw_label_text_disabled" + " " + optionsProps.labelClassName
+                            : "cw_label_text" + " " + optionsProps.labelClassName, children: optionsProps.labelName })), _jsx("input", { type: "text", value: searchText, onChange: handleInputChange, placeholder: "Search...", className: "cw_input_search", disabled: optionsProps.disabled }), searchText && (_jsx("button", { className: "cw-button-icon cwi-close cw-input-search-clear", onClick: handleClearClick }))] }), filteredOptions.length > 0 && (_jsx("div", { className: "cw-input-search-dropdown", children: _jsx("ul", { children: filteredOptions.map((option) => (_jsx("li", { onClick: () => handleOptionSelect(option), children: option.description }, option.id))) }) }))] }));
+}

package/dist/src/components/control/action/tooltip-dialog/CwTooltipDialog.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CwAlign } from "../../../../components/layout/align/CwAlign";
+export var CwTooltipDialogType;
+(function (CwTooltipDialogType) {
+    CwTooltipDialogType["warn"] = "exclamation-triangle";
+    CwTooltipDialogType["error"] = "times-circle";
+    CwTooltipDialogType["info"] = "info-circle";
+})(CwTooltipDialogType || (CwTooltipDialogType = {}));
+export default function CwTooltipDialog(props) {
+    return (_jsxs("div", { style: { position: "relative" }, children: [props.children, props.getIsOpen && (_jsxs("div", { className: "cw-tooltip-dialog", style: { width: props._width ?? "auto", height: props._height ?? "auto" }, children: [_jsx("span", { children: props.text }), _jsxs(CwAlign, { children: [...props.buttons] })] }))] }));
+}

package/dist/src/components/control/choice/checkbox/CwCheckbox.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function CwCheckbox(CwCheckboxProps) {
+    const handleChange = (e) => {
+        CwCheckboxProps.onChange?.(e.target.checked);
+    };
+    const inputElement = (_jsx("input", { id: CwCheckboxProps.id, type: "checkbox", checked: CwCheckboxProps.checked, onChange: e => handleChange(e), className: CwCheckboxProps.className ?? '', style: CwCheckboxProps.style, disabled: CwCheckboxProps.disabled }));
+    if (!CwCheckboxProps.labelName) {
+        return inputElement;
+    }
+    return (_jsxs("div", { className: CwCheckboxProps.labelPosition === "inline"
+            ? "cw_checkboxContent cwellt_flex_row" + " " + CwCheckboxProps.classNameContainer
+            : CwCheckboxProps.labelPosition === "column"
+                ? "cw_checkboxContent cwellt_flex_column" + " " + CwCheckboxProps.classNameContainer
+                : "cw_checkboxContent cwellt_flex_row" + " " + CwCheckboxProps.classNameContainer, style: CwCheckboxProps.styleContainer, children: [inputElement, CwCheckboxProps.labelName ? (_jsx("label", { htmlFor: CwCheckboxProps.id, className: CwCheckboxProps.labelClassName, children: CwCheckboxProps.labelName })) : null] }));
+}

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

@@ -0,0 +1,99 @@
+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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,10 @@
+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.d.ts

@@ -24,7 +24,7 @@ export interface CwMultiFilterProps {
  * - `Category`: Group the filter belongs to
  * - `ID`: Unique identifier for the filter
  * - `PrimaryColor`: Background color of the tag
- * - `OnPrimaryColor`: Text color of the tag
+ * - `OnPrimaryColor`: (Optional, deprecated) Text color of the tag - contrast is now calculated automatically
  *
  * ```
  * ╭───────────────────────────────────────────────────────────────╮
@@ -66,7 +66,6 @@ export interface CwMultiFilterProps {
  *       Value: "admin",
  *       Category: "Roles",
  *       ID: "Roles_admin",
- *       OnPrimaryColor: hexToRGB("#2050a8"),
  *       PrimaryColor: hexToRGB("#cedcff")
  *     },
  *     {
@@ -74,7 +73,6 @@ export interface CwMultiFilterProps {
  *       Value: "user",
  *       Category: "Roles",
  *       ID: "Roles_user",
- *       OnPrimaryColor: hexToRGB("#2050a8"),
  *       PrimaryColor: hexToRGB("#cedcff")
  *     },
  *     {
@@ -82,7 +80,6 @@ export interface CwMultiFilterProps {
  *       Value: "IT",
  *       Category: "Departments",
  *       ID: "Departments_IT",
- *       OnPrimaryColor: hexToRGB("#a82037"),
  *       PrimaryColor: hexToRGB("#ffceda")
  *     },
  *     {
@@ -90,7 +87,6 @@ export interface CwMultiFilterProps {
  *       Value: "HR",
  *       Category: "Departments",
  *       ID: "Departments_HR",
- *       OnPrimaryColor: hexToRGB("#a82037"),
  *       PrimaryColor: hexToRGB("#ffceda")
  *     }
  *   ]);

package/dist/src/components/control/choice/multi-filter/CwMultiFilter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CwMultiFilter.d.ts","sourceRoot":"","sources":["../../../../../../src/components/control/choice/multi-filter/CwMultiFilter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,EAA+B,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAoB,qBAAqB,EAAE,KAAK,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAGpH,MAAM,WAAW,kBAAkB;IAClC,qDAAqD;IACrD,EAAE,EAAE,MAAM,CAAC;IACX,sGAAsG;IACtG,oBAAoB,EAAE,CAAC,YAAY,EAAE,GAAG,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACrE,uCAAuC;IACvC,OAAO,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAChC,4CAA4C;IAC5C,YAAY,EAAE,GAAG,CAAC,qBAAqB,CAAC,CAAC;IACzC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8IG;AACH,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA+OhD,CAAC"}
+{"version":3,"file":"CwMultiFilter.d.ts","sourceRoot":"","sources":["../../../../../../src/components/control/choice/multi-filter/CwMultiFilter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,EAA+B,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAoB,qBAAqB,EAAE,KAAK,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAGpH,MAAM,WAAW,kBAAkB;IAClC,qDAAqD;IACrD,EAAE,EAAE,MAAM,CAAC;IACX,sGAAsG;IACtG,oBAAoB,EAAE,CAAC,YAAY,EAAE,GAAG,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACrE,uCAAuC;IACvC,OAAO,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAChC,4CAA4C;IAC5C,YAAY,EAAE,GAAG,CAAC,qBAAqB,CAAC,CAAC;IACzC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0IG;AACH,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAiPhD,CAAC"}