@monolith-forensics/monolith-ui 1.1.29 → 1.1.30

package/dist/Table/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Table";
+export { Column } from "./Table";

package/dist/Table/index.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Column = exports.default = void 0;
+var Table_1 = require("./Table");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Table_1).default; } });
+var Table_2 = require("./Table");
+Object.defineProperty(exports, "Column", { enumerable: true, get: function () { return Table_2.Column; } });

package/dist/TagBox/TagBox.d.ts

@@ -0,0 +1,39 @@
+import { ReactNode } from "react";
+import { Variant, Size } from "../core";
+type Option = {
+    label: string;
+    value: any;
+    group?: string;
+    data?: any;
+};
+interface TagBoxProps {
+    className?: string;
+    data?: Option[] | string[];
+    placeholder?: string;
+    arrow?: boolean;
+    defaultValue?: Option[];
+    grouped?: boolean;
+    searchFn?: (value: string) => void;
+    onChange?: (value: any[]) => void;
+    onScroll?: () => void;
+    onSearch?: (value: string) => void;
+    onItemAdded?: (value: any) => void;
+    size?: Size;
+    variant?: Variant;
+    width?: string;
+    allowCustomValue?: boolean;
+    searchable?: boolean;
+    clearable?: boolean;
+    openOnFocus?: boolean;
+    label?: string;
+    description?: string;
+    required?: boolean;
+    error?: string;
+    loading?: boolean;
+    renderOption?: (item: Option | string) => ReactNode;
+    TooltipContent?: (props: {
+        data: any;
+    }) => JSX.Element;
+}
+declare const TagBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<TagBoxProps, never>> & string & Omit<({ className, data, placeholder, arrow, defaultValue, grouped, searchFn, onChange, onScroll, onSearch, onItemAdded, size, variant, width, allowCustomValue, searchable, clearable, openOnFocus, label, description, required, error, loading, renderOption, TooltipContent, }: TagBoxProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export default TagBox;

package/dist/TagBox/TagBox.js

@@ -0,0 +1,590 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_components_1 = __importDefault(require("styled-components"));
+const react_1 = require("@floating-ui/react");
+const react_2 = require("react");
+const __1 = require("..");
+const core_1 = require("../core");
+const StyledInputContainer = styled_components_1.default.div `
+  position: relative;
+  cursor: pointer;
+
+  user-select: none;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  user-select: none;
+
+  pointer-events: all;
+  outline: none;
+
+  padding: ${({ size }) => size === "xs"
+    ? "2px 8px"
+    : size === "sm"
+        ? "4px 10px"
+        : size === "md"
+            ? "6px 12px"
+            : size === "lg"
+                ? "7px 14px"
+                : size === "xl"
+                    ? "8px 16px"
+                    : "4px 10px"};
+
+  border-radius: 5px;
+  transition: border 0.1s ease-in-out;
+  border: 1px solid
+    ${({ theme, variant }) => {
+    switch (variant) {
+        case "filled":
+            return "transparent";
+        case "outlined":
+            return theme.palette.input.border;
+        case "text":
+            return "transparent";
+        default:
+            return theme.palette.input.border;
+    }
+}};
+  font-weight: 500;
+  color: ${(props) => props.theme.palette.text.primary};
+  font-size: ${({ size }) => size === "xs"
+    ? "12px"
+    : size === "sm"
+        ? "14px"
+        : size === "md"
+            ? "16px"
+            : size === "lg"
+                ? "18px"
+                : size === "xl"
+                    ? "20px"
+                    : "12px"};
+
+  width: 100%;
+  min-height: ${({ size }) => size === "xs"
+    ? "26px"
+    : size === "sm"
+        ? "30px"
+        : size === "md"
+            ? "36px"
+            : size === "lg"
+                ? "42px"
+                : size === "xl"
+                    ? "50px"
+                    : "26px"};
+
+  &[data-button-right="true"] {
+    padding-right: 36px;
+  }
+
+  background-color: ${({ theme, variant }) => {
+    switch (variant) {
+        case "filled":
+            return theme.palette.input.background;
+        case "outlined":
+            return theme.palette.input.background;
+        case "text":
+            return "transparent";
+        default:
+            return theme.palette.input.background;
+    }
+}};
+
+  &[readOnly] {
+    cursor: pointer;
+  }
+
+  & [data-has-space="true"] {
+    padding-left: 4px;
+  }
+
+  & [data-selected="true"] {
+    background-color: ${(props) => props.theme.palette.primary.main}50;
+  }
+
+  &[data-empty="true"] {
+    color: ${(props) => props.theme.palette.input.placeholder};
+    div {
+      color: ${(props) => props.theme.palette.input.placeholder};
+    }
+  }
+
+  & [data-default-btn="true"] {
+    color: ${(props) => props.theme.palette.text.secondary};
+    div {
+      color: ${(props) => props.theme.palette.text.secondary};
+    }
+  }
+
+  &[data-open="true"] {
+    border: 1px solid ${(props) => props.theme.palette.primary.main};
+  }
+
+  &:focus-within {
+    border: 1px solid ${(props) => props.theme.palette.primary.main};
+  }
+
+  &:focus {
+    border: 1px solid ${(props) => props.theme.palette.primary.main};
+  }
+`;
+// styled input with forwardRef
+const StyledInput = (0, styled_components_1.default)((_a) => {
+    var { className, inputRef } = _a, props = __rest(_a, ["className", "inputRef"]);
+    return ((0, jsx_runtime_1.jsx)(__1.Input, Object.assign({ ref: inputRef, className: className + " mfTagBox-input" }, props)));
+}) `
+  &.mfTagBox-input {
+    pointer-events: all;
+    outline: none;
+    background: transparent;
+    flex: 1;
+    appearance: none;
+    border: 0;
+    color: inherit;
+
+    height: 100%;
+    padding: 0px;
+    min-height: 0px;
+
+    min-width: 100px;
+
+    &:focus {
+      border: 0;
+    }
+  }
+`;
+const GroupTitle = (0, styled_components_1.default)((_a) => {
+    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: className }, props, { children: [(0, jsx_runtime_1.jsx)("div", { className: "group-line" }), (0, jsx_runtime_1.jsx)("div", { className: "group-label", children: children }), (0, jsx_runtime_1.jsx)("div", { className: "group-line" })] })));
+}) `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+
+  color: ${(props) => props.theme.palette.text.secondary};
+
+  padding: ${({ size }) => size === "xs"
+    ? "2px 8px"
+    : size === "sm"
+        ? "4px 10px"
+        : size === "md"
+            ? "4px 12px"
+            : size === "lg"
+                ? "5px 14px"
+                : size === "xl"
+                    ? "6px 16px"
+                    : "2px 8px"};
+
+  .group-label {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: fit-content;
+    min-width: fit-content;
+
+    font-weight: 500;
+
+    font-size: ${({ size }) => size === "xs"
+    ? "11px"
+    : size === "sm"
+        ? "13px"
+        : size === "md"
+            ? "15px"
+            : size === "lg"
+                ? "17px"
+                : size === "xl"
+                    ? "19px"
+                    : "11px"};
+  }
+
+  .group-line {
+    border-top: 1px solid ${(props) => props.theme.palette.divider};
+    width: 100%;
+  }
+`;
+const PillContainer = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  flex-wrap: wrap;
+  flex-grow: 1;
+
+  &[data-empty="true"] {
+    display: none;
+  }
+`;
+const StyledInnerContainer = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  &[data-button-right="true"] {
+    padding-right: 30px;
+  }
+`;
+const ExtendedStyledContent = (0, styled_components_1.default)(core_1.StyledContent) `
+  overflow-y: auto;
+`;
+const StyledItem = styled_components_1.default.div `
+  line-height: 1;
+  color: ${(props) => props.theme.palette.text.primary};
+  border-radius: 3px;
+  display: flex;
+  align-items: center;
+  min-height: 25px;
+  padding: 7px 10px;
+  position: relative;
+  user-select: none;
+  outline: none;
+
+  cursor: pointer;
+
+  font-family: "Arial", sans-serif;
+  font-size: ${({ size }) => size === "xs"
+    ? "11px"
+    : size === "sm"
+        ? "13px"
+        : size === "md"
+            ? "15px"
+            : size === "lg"
+                ? "17px"
+                : size === "xl"
+                    ? "19px"
+                    : "11px"};
+
+  &[data-disabled] {
+    color: ${(props) => props.theme.palette.text.secondary};
+    pointer-events: "none";
+  }
+
+  &:hover {
+    background-color: ${(props) => props.theme.palette.action.hover};
+    color: ${(props) => props.theme.palette.text.primary};
+  }
+
+  &[data-selected="true"] {
+    display: none;
+    color: ${(props) => props.theme.palette.primary.main};
+  }
+
+  &[data-highlighted="true"] {
+    background-color: ${(props) => props.theme.palette.divider};
+    color: ${(props) => props.theme.palette.text.primary};
+  }
+`;
+const TagBox = (0, styled_components_1.default)(({ className, data = [], placeholder = "Select tags", arrow = true, defaultValue = [], grouped, searchFn, onChange, onScroll, onSearch, onItemAdded, size = "sm", variant = "outlined", width = "100%", allowCustomValue = false, searchable = false, clearable = false, openOnFocus = true, label, description, required = false, error, loading = false, renderOption, TooltipContent, }) => {
+    var _a, _b, _c, _d, _e, _f;
+    const isObjectArray = (_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.hasOwnProperty("label");
+    const [isOpen, setIsOpen] = (0, react_2.useState)(false);
+    const [selectedItems, setSelectedItems] = (0, react_2.useState)(defaultValue);
+    const [preSelected, setPreSelected] = (0, react_2.useState)(null);
+    const [customItems, setCustomItems] = (0, react_2.useState)([]);
+    const [searchValue, setSearchValue] = (0, react_2.useState)("");
+    const inputRef = (0, react_2.useRef)(null);
+    const scrollContainerRef = (0, react_2.useRef)(null);
+    const filteredItems = data
+        .concat(customItems) // Add custom items to the list
+        .filter((item) => {
+        const isSelected = !!selectedItems.find((selectedItem) => isObjectArray
+            ? selectedItem.value === item.value
+            : selectedItem === item);
+        return !isSelected;
+    })
+        .filter((item) => {
+        const itemValue = (isObjectArray ? item.label : item);
+        return itemValue.toLowerCase().includes(searchValue.toLowerCase());
+    })
+        .sort((a, b) => {
+        if (grouped) {
+            const aValue = a.group;
+            const bValue = b.group;
+            return aValue.localeCompare(bValue);
+        }
+        // return current sort order
+        return 0;
+    });
+    const groupedItems = grouped
+        ? filteredItems.reduce((acc, item) => {
+            if (!item.group) {
+                item.group = "Other";
+            }
+            if (acc[item.group]) {
+                acc[item.group].push(item);
+            }
+            else {
+                acc[item.group] = [item];
+            }
+            return acc;
+        }, {})
+        : {};
+    const groups = grouped
+        ? Object.keys(groupedItems)
+            .map((group) => ({
+            label: group,
+            items: groupedItems[group],
+        }))
+            .sort((a, b) => a.label.localeCompare(b.label))
+        : [];
+    const { refs, floatingStyles, update } = (0, react_1.useFloating)({
+        open: isOpen,
+        onOpenChange: setIsOpen,
+        placement: "bottom-start",
+        strategy: "absolute",
+        // Handle collisions with the viewport
+        middleware: [(0, react_1.flip)(), (0, react_1.offset)(5)],
+    });
+    const toggleOpen = () => {
+        setIsOpen((prev) => {
+            var _a;
+            if (!prev) {
+                if (inputRef.current) {
+                    const inputEl = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current;
+                    (_a = inputEl === null || inputEl === void 0 ? void 0 : inputEl.focus) === null || _a === void 0 ? void 0 : _a.call(inputEl);
+                }
+            }
+            return !prev;
+        });
+    };
+    const handleClear = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current)
+            inputRef.current.value = "";
+        onChange === null || onChange === void 0 ? void 0 : onChange([]);
+        setSelectedItems([]);
+        setSearchValue("");
+        searchFn === null || searchFn === void 0 ? void 0 : searchFn("");
+        setIsOpen(false);
+    };
+    const handleChangeSelection = (0, react_2.useCallback)((option) => {
+        setSelectedItems((prev) => {
+            onChange === null || onChange === void 0 ? void 0 : onChange([...prev, option]);
+            return [...prev, option];
+        });
+    }, [onChange]);
+    const handleFocus = () => {
+        var _a, _b;
+        if (openOnFocus) {
+            setIsOpen(true);
+        }
+        if (searchable) {
+            (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        else if (allowCustomValue) {
+            (_b = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    };
+    const handleItemClick = (item) => {
+        var _a;
+        if ((_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.value)
+            inputRef.current.value = "";
+        setSearchValue("");
+        handleChangeSelection(item);
+    };
+    const handleRemoveItem = (item, index) => {
+        setSelectedItems((prev) => {
+            const newItems = prev.filter((prevItem, idx) => isObjectArray
+                ? prevItem.value !== item.value
+                : idx !== index);
+            onChange === null || onChange === void 0 ? void 0 : onChange(newItems);
+            return newItems;
+        });
+    };
+    const handleAddItem = (0, react_2.useCallback)((newItem) => {
+        const existingItem = data.concat(customItems).find((item) => {
+            return isObjectArray
+                ? item.label.toLowerCase() === newItem.toLowerCase()
+                : item.toLowerCase() === newItem.toLowerCase();
+        });
+        if (!existingItem) {
+            const newValue = isObjectArray
+                ? { label: newItem, value: newItem }
+                : newItem;
+            setCustomItems([...customItems, newValue]);
+            handleChangeSelection(newValue);
+            onItemAdded === null || onItemAdded === void 0 ? void 0 : onItemAdded(newValue);
+        }
+        else {
+            // check if the item is already selected
+            const isSelected = !!selectedItems.find((selectedItem) => isObjectArray
+                ? selectedItem.value ===
+                    existingItem.value
+                : selectedItem === existingItem);
+            if (!isSelected) {
+                handleChangeSelection(existingItem);
+            }
+        }
+    }, [
+        onItemAdded,
+        isObjectArray,
+        data,
+        handleChangeSelection,
+        selectedItems,
+        customItems,
+    ]);
+    const handleKeyDown = (e) => {
+        var _a, _b;
+        const currentInputValue = (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.value;
+        // Escape key
+        if (e.key === "Escape") {
+            const reference = (_b = refs === null || refs === void 0 ? void 0 : refs.reference) === null || _b === void 0 ? void 0 : _b.current;
+            reference === null || reference === void 0 ? void 0 : reference.blur();
+            setSearchValue("");
+            update();
+            setIsOpen(false);
+        }
+        // Enter key
+        if (e.key === "Enter") {
+            if (preSelected) {
+                handleItemClick(preSelected);
+                setPreSelected(null);
+                setSearchValue("");
+                update();
+                return;
+            }
+            else if (currentInputValue &&
+                currentInputValue !== "" &&
+                allowCustomValue) {
+                handleAddItem(currentInputValue);
+                inputRef.current.value = "";
+                setSearchValue("");
+                update();
+            }
+            else {
+                // TODO: decide what to do when user presses enter after typing a search value
+            }
+            // toggleOpen();
+            // setIsOpen(false);
+        }
+        // Backspace key
+        if (e.key === "Backspace" && currentInputValue === "") {
+            setSelectedItems((prev) => {
+                const newItems = prev.slice(0, prev.length - 1);
+                onChange === null || onChange === void 0 ? void 0 : onChange(newItems);
+                return newItems;
+            });
+        }
+        // Arrow down
+        if (e.key === "ArrowDown") {
+            e.preventDefault();
+            setPreSelected((prev) => {
+                let newItem = filteredItems[0]; // Loop back to the first item
+                const index = filteredItems.findIndex((item) => isObjectArray
+                    ? item.value === (prev === null || prev === void 0 ? void 0 : prev.value)
+                    : item === prev);
+                if (index < filteredItems.length - 1) {
+                    newItem = filteredItems[index + 1];
+                }
+                return newItem;
+            });
+        }
+        // Arrow up
+        if (e.key === "ArrowUp") {
+            e.preventDefault();
+            setPreSelected((prev) => {
+                let newItem = filteredItems[filteredItems.length - 1]; // Loop back to the last item
+                const index = filteredItems.findIndex((item) => isObjectArray
+                    ? item.value === (prev === null || prev === void 0 ? void 0 : prev.value)
+                    : item === prev);
+                if (index > 0) {
+                    newItem = filteredItems[index - 1];
+                }
+                return newItem;
+            });
+        }
+        // Tab key
+        if (e.key === "Tab") {
+            setIsOpen(false);
+        }
+    };
+    // Close on outside click
+    (0, react_2.useEffect)(() => {
+        const close = (e) => {
+            var _a, _b;
+            const target = e.target;
+            const referenceElement = (_a = refs === null || refs === void 0 ? void 0 : refs.reference) === null || _a === void 0 ? void 0 : _a.current;
+            const floatingElement = (_b = refs === null || refs === void 0 ? void 0 : refs.floating) === null || _b === void 0 ? void 0 : _b.current;
+            if (floatingElement && // Check if the floating element exists
+                target !== referenceElement && // Check if the target is not the reference (input)
+                !referenceElement.contains(target) && // Check if the target is not inside the reference (input)
+                !floatingElement.contains(target) // Check if the target is not inside the floating element (content)
+            ) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener("click", close);
+        return () => document.removeEventListener("click", close);
+    }, [refs.floating, refs.reference]);
+    // update when selection changes
+    (0, react_2.useEffect)(() => {
+        update();
+    }, [selectedItems]);
+    const referenceEl = (_b = refs === null || refs === void 0 ? void 0 : refs.reference) === null || _b === void 0 ? void 0 : _b.current;
+    const contentWidth = ((_e = (_d = (_c = referenceEl === null || referenceEl === void 0 ? void 0 : referenceEl.getClientRects) === null || _c === void 0 ? void 0 : _c.call(referenceEl)) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.width) || "100%";
+    const scrollEl = scrollContainerRef === null || scrollContainerRef === void 0 ? void 0 : scrollContainerRef.current;
+    const scrollActive = scrollEl
+        ? (scrollEl === null || scrollEl === void 0 ? void 0 : scrollEl.scrollHeight) > (scrollEl === null || scrollEl === void 0 ? void 0 : scrollEl.clientHeight)
+        : false;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: className + " mfTagBox", children: [label && ((0, jsx_runtime_1.jsx)(__1.FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), (0, jsx_runtime_1.jsxs)(StyledInputContainer, { className: "styledInputContainer", ref: refs.setReference, onMouseDown: () => {
+                    setIsOpen(true);
+                    handleFocus();
+                }, onFocus: handleFocus, size: size, variant: variant, onKeyDown: handleKeyDown, "data-open": isOpen, children: [(0, jsx_runtime_1.jsx)(StyledInnerContainer, { size: size, "data-button-right": arrow || clearable, children: (0, jsx_runtime_1.jsxs)(PillContainer, { size: size, children: [selectedItems.map((item, index) => ((0, jsx_runtime_1.jsx)(__1.Pill, { size: "xs", onRemove: () => handleRemoveItem(item, index), children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (item === null || item === void 0 ? void 0 : item.label) || item })) }, index))), (searchable ||
+                                    allowCustomValue ||
+                                    selectedItems.length === 0) && ((0, jsx_runtime_1.jsx)(StyledInput, { inputRef: inputRef, onChange: (e) => {
+                                        if (searchFn !== undefined) {
+                                            searchFn === null || searchFn === void 0 ? void 0 : searchFn(e.target.value);
+                                        }
+                                        else {
+                                            setSearchValue(e.target.value);
+                                        }
+                                        update();
+                                    }, placeholder: placeholder, size: size, readOnly: !(searchable || allowCustomValue) }))] }) }), clearable &&
+                        (selectedItems.length > 0 || !!((_f = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _f === void 0 ? void 0 : _f.value)) ? ((0, jsx_runtime_1.jsx)(core_1.ClearButton, { onClick: handleClear })) : arrow ? ((0, jsx_runtime_1.jsx)(core_1.ArrowButton, { onClick: (e) => {
+                            e.preventDefault();
+                        }, onMouseDown: (e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            toggleOpen();
+                        } })) : null] }), isOpen && ((0, jsx_runtime_1.jsx)(core_1.StyledFloatContainer, { ref: refs.setFloating, style: floatingStyles, className: "mfFloating", children: (0, jsx_runtime_1.jsx)(ExtendedStyledContent, { className: "mfFloatingContent", style: { width: contentWidth, maxWidth: contentWidth }, variant: variant, onScroll: onScroll, "data-scroll-active": scrollActive, "data-empty": filteredItems.length === 0, children: !loading && grouped
+                        ? groups.map((group) => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(GroupTitle, { size: size, children: group.label }), group.items.map((item, index) => {
+                                    return ((0, jsx_runtime_1.jsx)(__1.Tooltip, { content: TooltipContent ? ((0, jsx_runtime_1.jsx)(TooltipContent, { data: item.data })) : null, side: "left", children: (0, jsx_runtime_1.jsx)(StyledItem, { className: "mfFloatingItem", onClick: (e) => {
+                                                e.preventDefault();
+                                                e.stopPropagation();
+                                                handleItemClick(item);
+                                            }, "data-highlighted": isObjectArray
+                                                ? (preSelected === null || preSelected === void 0 ? void 0 : preSelected.value) ===
+                                                    item.value
+                                                : preSelected === item, size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (item === null || item === void 0 ? void 0 : item.label) || item })) }, index) }, index));
+                                })] }, group.label)))
+                        : filteredItems.map((item, index) => {
+                            return ((0, jsx_runtime_1.jsx)(__1.Tooltip, { content: TooltipContent ? ((0, jsx_runtime_1.jsx)(TooltipContent, { data: item.data })) : null, side: "left", children: (0, jsx_runtime_1.jsx)(StyledItem, { className: "mfFloatingItem", onClick: (e) => {
+                                        e.preventDefault();
+                                        e.stopPropagation();
+                                        handleItemClick(item);
+                                    }, "data-highlighted": isObjectArray
+                                        ? (preSelected === null || preSelected === void 0 ? void 0 : preSelected.value) ===
+                                            item.value
+                                        : preSelected === item, size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (item === null || item === void 0 ? void 0 : item.label) || item })) }, index) }, index));
+                        }) }) }))] }));
+}) `
+  position: relative;
+  cursor: pointer;
+`;
+exports.default = TagBox;

package/dist/TagBox/TagBoxStyles.d.ts

@@ -0,0 +1,11 @@
+export declare const TagBoxContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TagBoxInner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TagsContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TagBoxInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
+export declare const Tag: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TagText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TagKillButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>, "ref"> & {
+    ref?: ((instance: SVGSVGElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<SVGSVGElement> | null | undefined;
+}, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const TagBoxOptions: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TagBoxOption: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;