@codezee/sixtify-brahma 0.2.207 → 0.2.209

package/packages/shared-components/dist/SmartGrid/Components/FacetedFilter/FacetedFilter.js

@@ -1,195 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FacetedFilter = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const icons_material_1 = require("@mui/icons-material");
-const material_1 = require("@mui/material");
-const react_1 = require("react");
-const Tooltip_1 = require("../../../Tooltip");
-const DebouncedInput_1 = require("../SearchFilterRow/DebouncedInput");
-const useGetDynamicOptionData_1 = require("./hooks/useGetDynamicOptionData");
-const VirtualCheckboxList_1 = require("./VirtualCheckboxList");
-const FacetedFilter = ({ header, resetAllFilters, }) => {
-    const theme = (0, material_1.useTheme)();
-    const { butterflyBlue, iron, mirage } = theme.palette.app.color;
-    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
-    const [searchValue, setSearchValue] = (0, react_1.useState)("");
-    const [localFilterData, setLocalFilterData] = (0, react_1.useState)(undefined);
-    const popoverRef = (0, react_1.useRef)(null);
-    const buttonRef = (0, react_1.useRef)(null);
-    const handleClickAway = (0, react_1.useCallback)(() => {
-        setIsOpen(false);
-        setSearchValue("");
-    }, []);
-    const columnDef = header.column.columnDef;
-    const { facetedFilter, filterVariant } = columnDef;
-    const { getFilterValue, setFilterValue } = header.column;
-    // Check if this column has both faceted filter and filter variant
-    const isCombinedFilter = facetedFilter && filterVariant;
-    const filterValue = isCombinedFilter
-        ? (getFilterValue()?.facets ?? [])
-        : (getFilterValue() ?? []);
-    const { filteredOptions } = (0, useGetDynamicOptionData_1.useGetDynamicOptionData)({
-        header,
-        isOpen,
-        searchValue,
-    });
-    const isOptionsEmpty = !filteredOptions.length;
-    const isNoneMode = filterValue.length === 1 && filterValue[0] === "allData";
-    const allSelected = (0, react_1.useMemo)(() => {
-        const valueToUse = localFilterData ?? filterValue;
-        const isCurrentNoneMode = valueToUse.length === 1 && valueToUse[0] === "allData";
-        if (isOptionsEmpty || isCurrentNoneMode) {
-            return false;
-        }
-        if (valueToUse.length === 0) {
-            return false;
-        }
-        // Use Set for O(1) lookups instead of O(n) array.includes()
-        const valueSet = new Set(valueToUse);
-        return filteredOptions.every((opt) => valueSet.has(String(opt)));
-    }, [filterValue, localFilterData, filteredOptions, isOptionsEmpty]);
-    const manageIntermidiate = (0, react_1.useMemo)(() => {
-        const valueToUse = localFilterData ?? filterValue;
-        const isCurrentNoneMode = valueToUse.length === 1 && valueToUse[0] === "allData";
-        if (isOptionsEmpty || isCurrentNoneMode || allSelected) {
-            return false;
-        }
-        // Use Set for O(1) lookups instead of O(n) array.includes()
-        const valueSet = new Set(valueToUse);
-        const selectedFilteredCount = filteredOptions.filter((opt) => valueSet.has(String(opt))).length;
-        return (selectedFilteredCount > 0 &&
-            selectedFilteredCount < filteredOptions.length);
-    }, [
-        filterValue,
-        localFilterData,
-        filteredOptions,
-        isOptionsEmpty,
-        allSelected,
-        searchValue,
-    ]);
-    const activeFilterCount = isNoneMode ? 0 : filterValue.length;
-    const checkedMap = (0, react_1.useMemo)(() => {
-        const valueToUse = localFilterData ?? filterValue;
-        const isCurrentNoneMode = valueToUse.length === 1 && valueToUse[0] === "allData";
-        if (isOptionsEmpty || isCurrentNoneMode) {
-            return {};
-        }
-        return Object.fromEntries(valueToUse.map((val) => [val, true]));
-    }, [filterValue, localFilterData, filteredOptions, isOptionsEmpty]);
-    const handleToggle = (value) => {
-        const valueStr = String(value);
-        const currentLocal = localFilterData ?? filterValue;
-        const newFilterValue = currentLocal.includes(valueStr)
-            ? currentLocal.filter((v) => v !== valueStr)
-            : [...currentLocal, valueStr];
-        setLocalFilterData(newFilterValue);
-    };
-    const handleSelectAll = () => {
-        const allOptions = filteredOptions.map(String);
-        const valueToUse = localFilterData ?? filterValue;
-        // Use Set for O(1) lookups instead of O(n*m) array operations
-        const valueSet = new Set(valueToUse);
-        const isAllSelected = valueToUse.length > 0 && allOptions.every((opt) => valueSet.has(opt));
-        // Use startTransition to make state updates non-blocking for large datasets
-        if (isAllSelected) {
-            setLocalFilterData([]);
-        }
-        else {
-            setLocalFilterData(allOptions);
-        }
-    };
-    // useCallback is needed here because handleApply and handleReset are passed as onClick props
-    // to Button components, ensuring stable references for event handlers
-    const handleApply = (0, react_1.useCallback)(() => {
-        if (localFilterData !== undefined) {
-            if (isCombinedFilter) {
-                // Update only the facets part of the combined filter
-                const currentFilter = getFilterValue() ?? {
-                    facets: [],
-                    search: "",
-                };
-                const newFilter = { ...currentFilter, facets: localFilterData };
-                setFilterValue(newFilter);
-            }
-            else {
-                setFilterValue(localFilterData);
-            }
-        }
-        setIsOpen(false);
-        setSearchValue("");
-    }, [localFilterData, header.column, isCombinedFilter]);
-    // useCallback is needed here because handleApply and handleReset are passed as onClick props
-    // to Button components, ensuring stable references for event handlers
-    const handleReset = (0, react_1.useCallback)(() => {
-        if (isCombinedFilter) {
-            // Reset only the facets part of the combined filter
-            const currentFilter = getFilterValue() ?? {
-                facets: [],
-                search: "",
-            };
-            const newFilter = { ...currentFilter, facets: [] };
-            setFilterValue(newFilter);
-        }
-        else {
-            setFilterValue(undefined);
-        }
-        setLocalFilterData(undefined);
-        setSearchValue("");
-        setIsOpen(false);
-    }, [header.column, isCombinedFilter]);
-    (0, react_1.useMemo)(() => {
-        if (resetAllFilters) {
-            handleReset();
-        }
-    }, [resetAllFilters]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: { position: "relative" }, children: [(0, jsx_runtime_1.jsxs)(material_1.IconButton, { ref: buttonRef, onClick: (e) => {
-                    e.stopPropagation();
-                    setIsOpen(!isOpen);
-                }, sx: { padding: 0, position: "relative" }, children: [(0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { toolTipLabel: "Faceted Filter", children: (0, jsx_runtime_1.jsx)(icons_material_1.FilterListRounded, { sx: { fontSize: "20px" } }) }), activeFilterCount > 0 && ((0, jsx_runtime_1.jsx)("span", { style: {
-                            backgroundColor: butterflyBlue[900],
-                            border: `2px solid ${iron[600]}`,
-                            borderRadius: "50%",
-                            color: iron[600],
-                            fontSize: "10px",
-                            fontWeight: "bold",
-                            height: "6px",
-                            position: "absolute",
-                            right: 0,
-                            top: 1,
-                            width: "6px",
-                        } }))] }), isOpen && ((0, jsx_runtime_1.jsx)(material_1.ClickAwayListener, { onClickAway: handleClickAway, children: (0, jsx_runtime_1.jsxs)("div", { ref: popoverRef, role: "presentation", "data-faceted-filter-popover": "true", onClick: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), onMouseUp: (e) => e.stopPropagation(), onMouseMove: (e) => e.stopPropagation(), onPointerDown: (e) => e.stopPropagation(), onPointerUp: (e) => e.stopPropagation(), onPointerMove: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), style: {
-                        backgroundColor: iron[600],
-                        borderRadius: "6px",
-                        boxShadow: `0 0 20px ${mirage[50]}`,
-                        display: "flex",
-                        flexDirection: "column",
-                        height: "290px",
-                        left: 0,
-                        padding: "8px",
-                        position: "absolute",
-                        top: "40px",
-                        width: "206px",
-                        zIndex: 50,
-                    }, children: [(0, jsx_runtime_1.jsx)(DebouncedInput_1.DebouncedInput, { onChange: (value) => setSearchValue(String(value)), value: searchValue, inputHeight: "10px", style: { width: "100%" } }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { onClick: handleSelectAll, sx: {
-                                alignItems: "center",
-                                cursor: "pointer",
-                                display: "flex",
-                                fontSize: "12px",
-                                fontWeight: "600",
-                                gap: "4px",
-                            }, children: [(0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: allSelected, indeterminate: manageIntermidiate, onChange: handleSelectAll, size: "small", style: {
-                                        color: allSelected && !isOptionsEmpty ? butterflyBlue[900] : "",
-                                        padding: "4px",
-                                    }, disabled: isOptionsEmpty }), "Select All"] }), isOptionsEmpty ? ((0, jsx_runtime_1.jsx)("div", { style: {
-                                fontSize: "12px",
-                                padding: "8px",
-                                textAlign: "center",
-                            }, children: "No options found" })) : ((0, jsx_runtime_1.jsx)(VirtualCheckboxList_1.VirtualCheckboxList, { options: filteredOptions, checkedMap: checkedMap, onToggle: handleToggle })), (0, jsx_runtime_1.jsxs)("div", { style: {
-                                borderTop: `1px solid ${iron[700]}`,
-                                display: "flex",
-                                justifyContent: "space-between",
-                                paddingTop: "8px",
-                            }, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "text", size: "small", sx: { fontSize: "12px", height: "22px", minWidth: "40px" }, onClick: handleReset, children: "Reset" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", size: "small", sx: { fontSize: "12px", height: "22px", minWidth: "40px" }, onClick: handleApply, disableElevation: true, children: "Apply" })] })] }) }))] }));
-};
-exports.FacetedFilter = FacetedFilter;

package/packages/shared-components/dist/SmartGrid/Components/FacetedFilter/VirtualCheckboxList.js

@@ -1,117 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.VirtualCheckboxList = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
-const luxon_1 = require("luxon");
-const react_1 = require("react");
-const helper_1 = require("../../utils/helper");
-exports.VirtualCheckboxList = (0, react_1.memo)(({ checkedMap, onToggle, options }) => {
-    const theme = (0, material_1.useTheme)();
-    const { butterflyBlue, sapphireBlue } = theme.palette.app.color;
-    const containerRef = (0, react_1.useRef)(null);
-    const [visibleRange, setVisibleRange] = (0, react_1.useState)({ end: 20, start: 0 });
-    const [isMouseDown, setIsMouseDown] = (0, react_1.useState)(false);
-    const [dragMode, setDragMode] = (0, react_1.useState)(null);
-    const ITEM_HEIGHT = 25;
-    const BUFFER = 5;
-    const CONTAINER_HEIGHT = 200;
-    const handleScroll = (0, react_1.useCallback)(() => {
-        if (!containerRef.current) {
-            return;
-        }
-        const scrollTop = containerRef.current.scrollTop;
-        const start = Math.max(0, Math.floor(scrollTop / ITEM_HEIGHT) - BUFFER);
-        const end = Math.min(options.length, Math.ceil((scrollTop + CONTAINER_HEIGHT) / ITEM_HEIGHT) + BUFFER);
-        if (start !== visibleRange.start || end !== visibleRange.end) {
-            setVisibleRange({ end, start });
-        }
-    }, [options.length, visibleRange.start, visibleRange.end]);
-    const visibleItems = (0, react_1.useMemo)(() => {
-        return options.slice(visibleRange.start, visibleRange.end);
-    }, [options, visibleRange.start, visibleRange.end]);
-    // useCallback is used to memoize the handler and prevent unnecessary re-creations
-    // when passed to event listeners inside the list items.
-    const handleMouseDown = (0, react_1.useCallback)((value) => {
-        setIsMouseDown(true);
-        const isAlreadyChecked = checkedMap[value];
-        setDragMode(isAlreadyChecked ? "unCheck" : "check");
-        onToggle(value);
-    }, [onToggle, checkedMap]);
-    // useCallback ensures stable reference when attached to multiple items’ mouse events,
-    // avoiding re-binding on every render and improving performance.
-    const handleMouseEnter = (0, react_1.useCallback)((value) => {
-        if (isMouseDown && dragMode) {
-            const isChecked = checkedMap[value];
-            if ((dragMode === "check" && !isChecked) ||
-                (dragMode === "unCheck" && isChecked)) {
-                onToggle(value);
-            }
-        }
-    }, [isMouseDown, dragMode, checkedMap, onToggle]);
-    // useCallback memoizes this function so the global mouseup listener
-    // remains stable across renders, preventing multiple event bindings.
-    const handleMouseUp = (0, react_1.useCallback)(() => {
-        setIsMouseDown(false);
-        setDragMode(null);
-    }, []);
-    // Stop drag globally when mouse released anywhere
-    (0, react_1.useMemo)(() => {
-        document.addEventListener("mouseup", handleMouseUp);
-        return () => document.removeEventListener("mouseup", handleMouseUp);
-    }, [handleMouseUp]);
-    return ((0, jsx_runtime_1.jsx)("div", { ref: containerRef, role: "presentation", onScroll: handleScroll, onClick: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), onMouseUp: (e) => e.stopPropagation(), onMouseMove: (e) => e.stopPropagation(), onPointerDown: (e) => e.stopPropagation(), onPointerUp: (e) => e.stopPropagation(), onPointerMove: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), style: {
-            display: "flex",
-            flexDirection: "column",
-            height: "300px",
-            maxHeight: `${CONTAINER_HEIGHT}px`,
-            overflowY: "auto",
-            position: "relative",
-            userSelect: "none",
-        }, children: (0, jsx_runtime_1.jsx)("div", { style: {
-                height: `${options.length * ITEM_HEIGHT}px`,
-                position: "relative",
-            }, children: (0, jsx_runtime_1.jsx)("div", { style: {
-                    position: "absolute",
-                    top: `${visibleRange.start * ITEM_HEIGHT}px`,
-                    width: "100%",
-                }, children: visibleItems.map((value) => {
-                    const isChecked = checkedMap[value] || false;
-                    const getLabel = () => {
-                        if (typeof value === "string") {
-                            if (!(0, helper_1.isFullISODate)(value)) {
-                                return value;
-                            }
-                            const dt = luxon_1.DateTime.fromISO(value, { zone: "utc" });
-                            return dt.isValid ? (0, helper_1.formatDateValue)(value) : value;
-                        }
-                        return String(value);
-                    };
-                    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { onMouseDown: (e) => {
-                            e.stopPropagation();
-                            handleMouseDown(value);
-                        }, onMouseUp: (e) => e.stopPropagation(), onMouseEnter: (e) => {
-                            e.stopPropagation();
-                            handleMouseEnter(value);
-                        }, onMouseMove: (e) => e.stopPropagation(), onPointerDown: (e) => e.stopPropagation(), onPointerUp: (e) => e.stopPropagation(), onPointerMove: (e) => e.stopPropagation(), onClick: (e) => e.stopPropagation(), style: {
-                            backgroundColor: isChecked
-                                ? sapphireBlue[400]
-                                : "transparent",
-                            cursor: "pointer",
-                        }, flexDirection: "row", alignItems: "center", gap: "5px", height: `${ITEM_HEIGHT}px`, children: [(0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: isChecked, onChange: (e) => {
-                                    e.stopPropagation();
-                                    onToggle(value);
-                                }, onMouseDown: (e) => e.stopPropagation(), onMouseUp: (e) => e.stopPropagation(), onPointerDown: (e) => e.stopPropagation(), onClick: (e) => e.stopPropagation(), size: "small", style: {
-                                    color: isChecked ? butterflyBlue[900] : "",
-                                    padding: "4px",
-                                } }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", color: "black", sx: {
-                                    WebkitBoxOrient: "vertical",
-                                    WebkitLineClamp: "1",
-                                    // eslint-disable-next-line sort-keys
-                                    display: "-webkit-box",
-                                    overflow: "hidden",
-                                    textOverflow: "ellipsis",
-                                }, children: getLabel() })] }, value));
-                }) }) }) }));
-});
-exports.VirtualCheckboxList.displayName = "VirtualCheckboxList";

package/packages/shared-components/dist/SmartGrid/Components/FacetedFilter/hooks/useGetDynamicOptionData.js

@@ -1,39 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useGetDynamicOptionData = void 0;
-const filter_1 = __importDefault(require("lodash/filter"));
-const isEmpty_1 = __importDefault(require("lodash/isEmpty"));
-const isFunction_1 = __importDefault(require("lodash/isFunction"));
-const isNil_1 = __importDefault(require("lodash/isNil"));
-const sortBy_1 = __importDefault(require("lodash/sortBy"));
-const react_1 = require("react");
-const useGetDynamicOptionData = ({ header, isOpen, searchValue, }) => {
-    const { getFacetedUniqueValues } = header.column;
-    // Get unique values for the column (from TanStack Table)
-    const facetedUniqueValues = (0, react_1.useMemo)(() => {
-        if (!(0, isFunction_1.default)(getFacetedUniqueValues)) {
-            return new Map();
-        }
-        return getFacetedUniqueValues() ?? new Map();
-    }, [header.column, isOpen]);
-    // Sort unique values alphabetically
-    const sortedUniqueValues = (0, react_1.useMemo)(() => {
-        if ((0, isEmpty_1.default)(facetedUniqueValues)) {
-            return [];
-        }
-        const values = Array.from(facetedUniqueValues.keys());
-        return (0, sortBy_1.default)((0, filter_1.default)(values, (v) => !(0, isNil_1.default)(v)), (v) => String(v).toLowerCase());
-    }, [facetedUniqueValues]);
-    // Filter options based on search input
-    const filteredOptions = (0, react_1.useMemo)(() => {
-        if ((0, isEmpty_1.default)(searchValue)) {
-            return sortedUniqueValues;
-        }
-        return (0, filter_1.default)(sortedUniqueValues, (value) => String(value).toLowerCase().includes(searchValue.toLowerCase()));
-    }, [sortedUniqueValues, searchValue]);
-    return { filteredOptions };
-};
-exports.useGetDynamicOptionData = useGetDynamicOptionData;

package/packages/shared-components/dist/SmartGrid/Components/FilterStatusPanel.js

@@ -1,89 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilterStatusPanel = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const icons_material_1 = require("@mui/icons-material");
-const material_1 = require("@mui/material");
-const luxon_1 = require("luxon");
-const react_1 = require("react");
-const helper_1 = require("../utils/helper");
-const FilterStatusPanel = ({ clearAllFilters, table, }) => {
-    const theme = (0, material_1.useTheme)();
-    const { brown, butterflyBlue, iron, slate } = theme.palette.app.color;
-    const { getHeaderGroups } = table;
-    return ((0, jsx_runtime_1.jsx)("div", { style: {
-            backgroundColor: slate[600],
-            borderTop: `1px solid ${iron[700]}`,
-            display: "flex",
-            overflow: "auto",
-            width: "100%",
-        }, children: (() => {
-            // Helper function to extract filter values from different filter types
-            const extractFilterValues = (filter) => {
-                if (!filter) {
-                    return { facets: [], search: [] };
-                }
-                const { facets: filterFacets, search: filterSearch } = filter;
-                // Handle array filters
-                if (Array.isArray(filter)) {
-                    return { facets: filter.map(String), search: [] };
-                }
-                // Handle primitive filters (string/number)
-                if (typeof filter === "string" || typeof filter === "number") {
-                    return {
-                        facets: filter !== "" ? [String(filter)] : [],
-                        search: [],
-                    };
-                }
-                // Handle object filters with facets and search
-                if (typeof filter === "object" && filter != null) {
-                    const facets = Array.isArray(filterFacets) ? filterFacets : [];
-                    const search = filterSearch != null && filterSearch !== ""
-                        ? [String(filterSearch)]
-                        : [];
-                    return { facets, search };
-                }
-                return { facets: [], search: [] };
-            };
-            // Build applied filters list
-            const appliedFilters = getHeaderGroups()
-                .flatMap((group) => group.headers)
-                .map((header) => {
-                const filter = header.column.getFilterValue();
-                const { facets, search } = extractFilterValues(filter);
-                const hasValues = facets.length > 0 || search.length > 0;
-                const getLabel = (value) => {
-                    if (typeof value === "string") {
-                        if (!(0, helper_1.isFullISODate)(value)) {
-                            return value;
-                        }
-                        const dt = luxon_1.DateTime.fromISO(value, { zone: "utc" });
-                        return dt.isValid ? (0, helper_1.formatDateValue)(value) : value;
-                    }
-                    return String(value);
-                };
-                return hasValues ? ((0, jsx_runtime_1.jsxs)(material_1.Stack, { flexDirection: "row", gap: "3px", children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "caption", fontWeight: 600, children: [header.column.columnDef.header, ":"] }), facets.length > 0 && ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", sx: { color: butterflyBlue[900] }, children: facets.map(getLabel).join(", ") })), facets.length > 0 && search.length > 0 && ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", children: "," })), search.length > 0 && ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", sx: { color: brown[900] }, children: search.join(", ") }))] }, header.id)) : null;
-            })
-                .filter(Boolean);
-            // Don't render if no filters applied
-            if (!appliedFilters.length) {
-                return null;
-            }
-            return ((0, jsx_runtime_1.jsxs)("div", { style: {
-                    alignItems: "center",
-                    display: "flex",
-                    gap: "5px",
-                    padding: "5px 0px",
-                }, children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { sx: { borderRight: `2px solid ${iron[700]}`, padding: "0px 5px" }, onClick: clearAllFilters, children: (0, jsx_runtime_1.jsx)(icons_material_1.HighlightOffRounded, { fontSize: "small" }) }), (0, jsx_runtime_1.jsx)("div", { style: {
-                            alignItems: "center",
-                            display: "flex",
-                            gap: "3px",
-                            overflow: "hidden",
-                            textOverflow: "ellipsis",
-                            whiteSpace: "nowrap",
-                        }, children: appliedFilters.map((filter, index) => (
-                        // eslint-disable-next-line sonarjs/no-array-index-key
-                        (0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [index > 0 && (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", children: "," }), filter] }, index))) })] }));
-        })() }));
-};
-exports.FilterStatusPanel = FilterStatusPanel;

package/packages/shared-components/dist/SmartGrid/Components/Grouped/GroupAreaOverlay.js

@@ -1,101 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GroupAreaOverlay = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const core_1 = require("@dnd-kit/core");
-const material_1 = require("@mui/material");
-const iconoir_react_1 = require("iconoir-react");
-const HideIcon_1 = require("../Svgs/HideIcon");
-const GroupAreaOverlay = ({ activeDragId, activeDragOver, table, defaultGrouping = [], isOutsideGrid = false, currentGrouping = [], }) => {
-    const theme = (0, material_1.useTheme)();
-    const { iron, lipstickRed, slate } = theme.palette.app.color;
-    const { getColumn, getHeaderGroups } = table;
-    return ((0, jsx_runtime_1.jsx)(core_1.DragOverlay, { style: {
-            zIndex: 9999,
-        }, children: activeDragId
-            ? (() => {
-                const column = getColumn(activeDragId);
-                if (!column) {
-                    return null;
-                }
-                const { header: columnHeader, id, enableGrouping, } = column.columnDef;
-                const headerLabel = typeof columnHeader === "string"
-                    ? columnHeader
-                    : (id ?? activeDragId);
-                const headerGroups = getHeaderGroups();
-                const header = headerGroups
-                    .flatMap(({ headers }) => headers)
-                    .find(({ column }) => column.id === activeDragId);
-                if (!header) {
-                    return null;
-                }
-                const headerDynamicWidth = header.column.getSize();
-                // Check if column is groupable
-                const isGroupable = enableGrouping === true;
-                // Check if dragging over the group panel
-                const isOverGroupPanel = activeDragOver === "grouping-panel";
-                // Check if this is a grouped chip being dragged
-                const isGroupedChip = currentGrouping.includes(activeDragId);
-                // Check if outside grid and should show hide icon (only for column headers, not grouped chips)
-                const shouldShowHideIcon = isOutsideGrid && !isGroupedChip;
-                // Check if already at max grouping limit (4 columns)
-                const MAX_GROUPING_COLUMNS = 4;
-                const isAtMaxLimit = !isGroupedChip &&
-                    isGroupable &&
-                    currentGrouping.length >= MAX_GROUPING_COLUMNS &&
-                    isOverGroupPanel;
-                // If defaultGrouping exists and enableGrouping is true, prohibit dragging to group area
-                const shouldProhibit = (defaultGrouping.length > 0 && isGroupable && isOverGroupPanel) ||
-                    isAtMaxLimit;
-                // Determine border color and icon based on groupability and drag location
-                const borderColor = shouldShowHideIcon
-                    ? lipstickRed[700]
-                    : // eslint-disable-next-line sonarjs/no-nested-conditional
-                        shouldProhibit
-                            ? lipstickRed[900]
-                            : // eslint-disable-next-line sonarjs/no-nested-conditional
-                                isOverGroupPanel && !isGroupable
-                                    ? lipstickRed[900]
-                                    : iron[700];
-                const manageIcon = () => {
-                    // Show hide icon when dragging outside grid (only for column headers)
-                    if (shouldShowHideIcon) {
-                        return (0, jsx_runtime_1.jsx)(HideIcon_1.HideIcon, { width: 20, height: 20 });
-                    }
-                    if (shouldProhibit) {
-                        return (0, jsx_runtime_1.jsx)(iconoir_react_1.Prohibition, { width: 18, height: 18 });
-                    }
-                    if (isOverGroupPanel && !isGroupable) {
-                        return (0, jsx_runtime_1.jsx)(iconoir_react_1.Prohibition, { width: 18, height: 18 });
-                    }
-                    if (isOverGroupPanel && isGroupable) {
-                        return (0, jsx_runtime_1.jsx)(iconoir_react_1.KeyframesPlus, { width: 18, height: 18 });
-                    }
-                    return (0, jsx_runtime_1.jsx)(iconoir_react_1.Drag, { width: 18, height: 18 });
-                };
-                return ((0, jsx_runtime_1.jsxs)("div", { style: {
-                        alignItems: "center",
-                        backgroundColor: slate[800],
-                        border: `1px solid ${borderColor}`,
-                        borderRadius: "4px",
-                        display: "flex",
-                        gap: "8px",
-                        height: "40px",
-                        minWidth: `${headerDynamicWidth}px`,
-                        padding: "0px 8px",
-                        boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
-                        cursor: "grabbing",
-                    }, children: [manageIcon(), (0, jsx_runtime_1.jsx)("div", { style: {
-                                color: iron[400],
-                                fontFamily: "Poppins",
-                                fontSize: "14px",
-                                fontWeight: 600,
-                                lineHeight: "20px",
-                                overflow: "hidden",
-                                textOverflow: "ellipsis",
-                                whiteSpace: "nowrap",
-                            }, children: headerLabel })] }));
-            })()
-            : null }));
-};
-exports.GroupAreaOverlay = GroupAreaOverlay;

package/packages/shared-components/dist/SmartGrid/Components/Grouped/GroupChip.js

@@ -1,73 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GroupChip = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const sortable_1 = require("@dnd-kit/sortable");
-const utilities_1 = require("@dnd-kit/utilities");
-const material_1 = require("@mui/material");
-const GroupChip = ({ columnId, onRemove, table, defaultGrouping = [], }) => {
-    const theme = (0, material_1.useTheme)();
-    const { butterflyBlue, iron, slate } = theme.palette.app.color;
-    const { attributes, listeners, setNodeRef, transform, transition, isDragging, } = (0, sortable_1.useSortable)({ id: columnId });
-    const column = table.getColumn(columnId);
-    if (!column) {
-        return null;
-    }
-    const style = {
-        transform: utilities_1.CSS.Transform.toString(transform),
-        transition,
-        opacity: isDragging ? 0.5 : 1,
-    };
-    const { header: columnHeader, id } = column.columnDef;
-    // Get header label from column definition
-    const headerLabel = typeof columnHeader === "string" ? columnHeader : (id ?? columnId);
-    const handleRemove = (e) => {
-        e.stopPropagation();
-        onRemove(columnId);
-    };
-    // Optimized: Replace MUI components with native HTML for better performance
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: setNodeRef, style: {
-            ...style,
-            display: "inline-flex",
-            alignItems: "center",
-            backgroundColor: slate[800],
-            border: `1px solid ${iron[700]}`,
-            borderRadius: "16px",
-            height: "28px",
-            padding: "0 8px",
-            cursor: "default",
-        }, children: [!defaultGrouping.length && ((0, jsx_runtime_1.jsx)("div", { ...attributes, ...listeners, style: {
-                    display: "flex",
-                    alignItems: "center",
-                    cursor: isDragging ? "grabbing" : "grab",
-                    touchAction: "none",
-                    padding: "2px",
-                    marginRight: "4px",
-                }, children: (0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { color: iron[400] }, children: (0, jsx_runtime_1.jsx)("path", { d: "M9 5h2v2H9V5zm0 6h2v2H9v-2zm0 6h2v2H9v-2zm4-8h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2z", fill: "currentColor" }) }) })), (0, jsx_runtime_1.jsx)("span", { style: {
-                    fontSize: "12px",
-                    fontWeight: 500,
-                    color: butterflyBlue[900],
-                    overflow: "hidden",
-                    textOverflow: "ellipsis",
-                    whiteSpace: "nowrap",
-                    maxWidth: "150px",
-                }, children: headerLabel }), !defaultGrouping.length && ((0, jsx_runtime_1.jsx)("button", { onClick: handleRemove, type: "button", style: {
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    cursor: "pointer",
-                    padding: "2px",
-                    marginLeft: "4px",
-                    background: "none",
-                    border: "none",
-                    borderRadius: "50%",
-                    width: "18px",
-                    height: "18px",
-                    transition: "background-color 0.2s",
-                }, onMouseEnter: (e) => {
-                    e.currentTarget.style.backgroundColor = slate[700];
-                }, onMouseLeave: (e) => {
-                    e.currentTarget.style.backgroundColor = "transparent";
-                }, children: (0, jsx_runtime_1.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", style: { color: iron[400] }, children: (0, jsx_runtime_1.jsx)("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z", fill: "currentColor" }) }) }))] }));
-};
-exports.GroupChip = GroupChip;