@codezee/sixtify-brahma 0.2.193 → 0.2.194

package/packages/shared-components/dist/SmartGrid/Components/ColumnChooser/ColumnItem.js

@@ -0,0 +1,122 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColumnItem = ColumnItem;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styles_1 = require("@mui/material/styles");
+const iconoir_react_1 = require("iconoir-react");
+const react_1 = require("react");
+const react_hook_form_1 = require("react-hook-form");
+const DebouncedInput_1 = require("../SearchFilterRow/DebouncedInput");
+const SmartAlignments_1 = require("../SmartAlignments");
+const SmartSwitch_1 = require("../SmartSwitch");
+function ColumnItem({ field, control, index, setValue, }) {
+    const theme = (0, styles_1.useTheme)();
+    const { iron } = theme.palette.app.color;
+    // State for editing mode
+    const [isEditing, setIsEditing] = (0, react_1.useState)(false);
+    const [editedHeaderName, setEditedHeaderName] = (0, react_1.useState)("");
+    const [previousHeaderName, setPreviousHeaderName] = (0, react_1.useState)("");
+    const inputContainerRef = (0, react_1.useRef)(null);
+    // Watch the actual form value for the header to get real-time updates
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const watchedHeader = (0, react_hook_form_1.useWatch)({
+        control,
+        name: `columns.${index}.header`,
+    });
+    // Watch the hide value to determine if Edit and Align should be disabled
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const watchedHide = (0, react_hook_form_1.useWatch)({
+        control,
+        name: `columns.${index}.hide`,
+    });
+    // Column is hidden when hide is true, so Edit and Align should be disabled
+    const isColumnHidden = Boolean(!watchedHide);
+    // Get current header name as string - use watched value if available, otherwise fallback to field
+    const currentHeaderName = typeof watchedHeader === "string"
+        ? watchedHeader
+        : // eslint-disable-next-line sonarjs/no-nested-conditional
+            typeof field.header === "string"
+                ? field.header
+                : (field.header?.toString() ?? "");
+    // Initialize edited header name when entering edit mode
+    (0, react_1.useEffect)(() => {
+        if (isEditing) {
+            const headerName = currentHeaderName;
+            setEditedHeaderName(headerName);
+            setPreviousHeaderName(headerName);
+            // Focus input after a brief delay to ensure it's rendered
+            setTimeout(() => {
+                const input = inputContainerRef.current?.querySelector("input");
+                if (input) {
+                    input.focus();
+                    input.select();
+                }
+            }, 0);
+        }
+    }, [isEditing, currentHeaderName]);
+    // Exit edit mode if column becomes hidden
+    (0, react_1.useEffect)(() => {
+        if (isColumnHidden && isEditing) {
+            setIsEditing(false);
+            setEditedHeaderName(previousHeaderName);
+        }
+    }, [isColumnHidden, isEditing, previousHeaderName]);
+    const handleEditAction = (e) => {
+        e.stopPropagation();
+        // Prevent editing if column is hidden
+        if (isColumnHidden) {
+            return;
+        }
+        setIsEditing(true);
+    };
+    const handleSave = (value) => {
+        const trimmedValue = value.trim();
+        // If empty, revert to previous value
+        if (trimmedValue === "") {
+            setEditedHeaderName(previousHeaderName);
+            setIsEditing(false);
+            return;
+        }
+        // Update the header in the form using setValue
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        setValue(`columns.${index}.header`, trimmedValue, {
+            shouldValidate: true,
+            shouldDirty: true,
+        });
+        setPreviousHeaderName(trimmedValue);
+        setIsEditing(false);
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === "Enter") {
+            e.preventDefault();
+            e.stopPropagation();
+            handleSave(editedHeaderName);
+        }
+        else if (e.key === "Escape") {
+            e.preventDefault();
+            e.stopPropagation();
+            setEditedHeaderName(previousHeaderName);
+            setIsEditing(false);
+        }
+    };
+    const handleBlur = () => {
+        handleSave(editedHeaderName);
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { style: { padding: "0px 20px", border: `1px solid ${iron[700]}` }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                display: "flex",
+                flexDirection: "row",
+                alignItems: "center",
+                justifyContent: "space-between",
+                height: "45px",
+            }, children: [isEditing ? ((0, jsx_runtime_1.jsx)("div", { ref: inputContainerRef, style: { flex: 1, minWidth: 0 }, children: (0, jsx_runtime_1.jsx)(DebouncedInput_1.DebouncedInput, { value: editedHeaderName, onChange: (value) => setEditedHeaderName(value), onKeyDown: handleKeyDown, onBlur: handleBlur, debounce: 0, inputFontSize: "12px", inputHeight: "14px", style: { width: "200px" }, onClick: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), placeholder: "Enter header name" }) })) : ((0, jsx_runtime_1.jsx)("p", { style: {
+                        fontSize: "13px",
+                        fontWeight: 500,
+                        cursor: "pointer",
+                    }, onDoubleClick: handleEditAction, children: currentHeaderName })), (0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", gap: "10px", alignItems: "center" }, children: [!isEditing && ((0, jsx_runtime_1.jsx)(iconoir_react_1.EditPencil, { width: 18, height: 18, onClick: handleEditAction, style: {
+                                border: `1px solid ${iron[700]}`,
+                                borderRadius: "4px",
+                                padding: "4px",
+                                cursor: isColumnHidden ? "not-allowed" : "pointer",
+                                opacity: isColumnHidden ? 0.5 : 1,
+                            } })), (0, jsx_runtime_1.jsx)(SmartAlignments_1.SmartAlignments, { control: control, name: `columns.${index}.align`, defaultValue: field.align ?? "left", disabled: isColumnHidden }), (0, jsx_runtime_1.jsx)(SmartSwitch_1.SmartSwitch, { control: control, name: `columns.${index}.hide` })] })] }) }));
+}

package/packages/shared-components/dist/SmartGrid/Components/ColumnChooser/LockedColumnItem.d.ts

@@ -0,0 +1,6 @@
+import type { AppColumnDef } from "../../types";
+export type LockedColumnItemProps<T> = {
+    column: AppColumnDef<T>;
+};
+export declare function LockedColumnItem<T>({ column, }: Readonly<LockedColumnItemProps<T>>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LockedColumnItem.d.ts.map

package/packages/shared-components/dist/SmartGrid/Components/ColumnChooser/LockedColumnItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LockedColumnItem.d.ts","sourceRoot":"","sources":["../../../../src/SmartGrid/Components/ColumnChooser/LockedColumnItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,MAAM,MAAM,qBAAqB,CAAC,CAAC,IAAI;IAAE,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC,CAAA;CAAE,CAAC;AAEnE,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,EAClC,MAAM,GACP,EAAE,QAAQ,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,2CAsBpC"}

package/packages/shared-components/dist/SmartGrid/Components/ColumnChooser/LockedColumnItem.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LockedColumnItem = LockedColumnItem;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const iconoir_react_1 = require("iconoir-react");
+function LockedColumnItem({ column, }) {
+    const theme = (0, material_1.useTheme)();
+    const { iron } = theme.palette.app.color;
+    return ((0, jsx_runtime_1.jsx)("div", { style: { padding: "0px 20px", border: `1px solid ${iron[700]}` }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                display: "flex",
+                flexDirection: "row",
+                alignItems: "center",
+                justifyContent: "space-between",
+                height: "38px",
+            }, children: [(0, jsx_runtime_1.jsx)("p", { style: { fontSize: "14px" }, children: column.header?.toString() }), (0, jsx_runtime_1.jsx)(iconoir_react_1.Lock, { color: iron[800] })] }) }));
+}

package/packages/shared-components/dist/SmartGrid/Components/ColumnChooser/hooks/useRefinedColumns.d.ts

@@ -0,0 +1,13 @@
+import type { AppColumnDef } from "../../../types";
+type RefinedColumn = {
+    accessorKey: string;
+    hide?: boolean;
+    header: string;
+    align?: "left" | "center" | "right";
+};
+type useRefinedColumnsArgs<T> = {
+    columns: AppColumnDef<T>[];
+};
+export declare const useRefinedColumns: <T>({ columns }: useRefinedColumnsArgs<T>) => RefinedColumn[];
+export {};
+//# sourceMappingURL=useRefinedColumns.d.ts.map

package/packages/shared-components/dist/SmartGrid/Components/ColumnChooser/hooks/useRefinedColumns.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRefinedColumns.d.ts","sourceRoot":"","sources":["../../../../../src/SmartGrid/Components/ColumnChooser/hooks/useRefinedColumns.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEnD,KAAK,aAAa,GAAG;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;CACrC,CAAC;AAEF,KAAK,qBAAqB,CAAC,CAAC,IAAI;IAC9B,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;CAC5B,CAAC;AACF,eAAO,MAAM,iBAAiB,GAAI,CAAC,EAAE,aAAa,qBAAqB,CAAC,CAAC,CAAC,oBAqBzE,CAAC"}

package/packages/shared-components/dist/SmartGrid/Components/ColumnChooser/hooks/useRefinedColumns.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRefinedColumns = void 0;
+const react_1 = require("react");
+const useRefinedColumns = ({ columns }) => {
+    return (0, react_1.useMemo)(() => {
+        return columns
+            .filter((col) => !!col.accessorKey)
+            .map(({ accessorKey, hide, header, align }) => {
+            const result = {
+                accessorKey: accessorKey ?? "",
+                header: header,
+            };
+            if (hide !== undefined) {
+                result.hide = hide;
+            }
+            if (align !== undefined) {
+                result.align = align;
+            }
+            return result;
+        });
+    }, [columns]);
+};
+exports.useRefinedColumns = useRefinedColumns;

package/packages/shared-components/dist/SmartGrid/Components/FacetedFilter/FacetedFilter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FacetedFilter.d.ts","sourceRoot":"","sources":["../../../../src/SmartGrid/Components/FacetedFilter/FacetedFilter.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AASpD,KAAK,kBAAkB,CAAC,CAAC,IAAI;IAC3B,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;IAC3B,eAAe,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,CAAC,EAAG,8BAG/B,kBAAkB,CAAC,CAAC,CAAC,4CAuUvB,CAAC"}
+{"version":3,"file":"FacetedFilter.d.ts","sourceRoot":"","sources":["../../../../src/SmartGrid/Components/FacetedFilter/FacetedFilter.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AASpD,KAAK,kBAAkB,CAAC,CAAC,IAAI;IAC3B,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;IAC3B,eAAe,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,CAAC,EAAG,8BAG/B,kBAAkB,CAAC,CAAC,CAAC,4CAgVvB,CAAC"}

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

@@ -45,7 +45,9 @@ const FacetedFilter = ({ header, resetAllFilters, }) => {
         if (valueToUse.length === 0) {
             return false;
         }
-        return filteredOptions.every((opt) => valueToUse.includes(String(opt)));
+        // 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;
@@ -53,7 +55,9 @@ const FacetedFilter = ({ header, resetAllFilters, }) => {
         if (isOptionsEmpty || isCurrentNoneMode || allSelected) {
             return false;
         }
-        const selectedFilteredCount = filteredOptions.filter((opt) => valueToUse.includes(String(opt))).length;
+        // 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);
     }, [
@@ -84,8 +88,10 @@ const FacetedFilter = ({ header, resetAllFilters, }) => {
     const handleSelectAll = () => {
         const allOptions = filteredOptions.map(String);
         const valueToUse = localFilterData ?? filterValue;
-        const isAllSelected = valueToUse.length > 0 &&
-            allOptions.every((opt) => valueToUse.includes(opt));
+        // 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([]);
         }
@@ -140,7 +146,7 @@ const FacetedFilter = ({ header, 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, {}) }), activeFilterCount > 0 && ((0, jsx_runtime_1.jsx)("span", { style: {
+                }, 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%",

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

@@ -4,7 +4,9 @@ type GroupAreaOverlayProps<T> = {
     activeDragOver: string | null;
     table: Table<T>;
     defaultGrouping: Array<keyof T>;
+    isOutsideGrid?: boolean;
+    currentGrouping?: string[];
 };
-export declare const GroupAreaOverlay: <T>({ activeDragId, activeDragOver, table, defaultGrouping, }: GroupAreaOverlayProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const GroupAreaOverlay: <T>({ activeDragId, activeDragOver, table, defaultGrouping, isOutsideGrid, currentGrouping, }: GroupAreaOverlayProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=GroupAreaOverlay.d.ts.map

package/packages/shared-components/dist/SmartGrid/Components/Grouped/GroupAreaOverlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GroupAreaOverlay.d.ts","sourceRoot":"","sources":["../../../../src/SmartGrid/Components/Grouped/GroupAreaOverlay.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAGnD,KAAK,qBAAqB,CAAC,CAAC,IAAI;IAC9B,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;IAChB,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,CAAC,EAAG,2DAKlC,qBAAqB,CAAC,CAAC,CAAC,4CAoH1B,CAAC"}
+{"version":3,"file":"GroupAreaOverlay.d.ts","sourceRoot":"","sources":["../../../../src/SmartGrid/Components/Grouped/GroupAreaOverlay.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAInD,KAAK,qBAAqB,CAAC,CAAC,IAAI;IAC9B,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;IAChB,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;IAChC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,CAAC,EAAG,2FAOlC,qBAAqB,CAAC,CAAC,CAAC,4CA4I1B,CAAC"}

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

@@ -5,7 +5,8 @@ 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 GroupAreaOverlay = ({ activeDragId, activeDragOver, table, defaultGrouping = [], }) => {
+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;
@@ -33,16 +34,34 @@ const GroupAreaOverlay = ({ activeDragId, activeDragOver, table, defaultGrouping
                 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;
+                const shouldProhibit = (defaultGrouping.length > 0 && isGroupable && isOverGroupPanel) ||
+                    isAtMaxLimit;
                 // Determine border color and icon based on groupability and drag location
-                const borderColor = shouldProhibit
-                    ? lipstickRed[900]
+                const borderColor = shouldShowHideIcon
+                    ? lipstickRed[700]
                     : // eslint-disable-next-line sonarjs/no-nested-conditional
-                        isOverGroupPanel && !isGroupable
+                        shouldProhibit
                             ? lipstickRed[900]
-                            : iron[700];
+                            : // 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 });
                     }

package/packages/shared-components/dist/SmartGrid/Components/Grouped/GroupedPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GroupedPanel.d.ts","sourceRoot":"","sources":["../../../../src/SmartGrid/Components/Grouped/GroupedPanel.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,KAAK,kBAAkB,CAAC,CAAC,IAAI;IAC3B,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,aAAa,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,KAAK,EAAE,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IACpD,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,CAAC,EAAG,4DAK9B,kBAAkB,CAAC,CAAC,CAAC,4CA0FvB,CAAC"}
+{"version":3,"file":"GroupedPanel.d.ts","sourceRoot":"","sources":["../../../../src/SmartGrid/Components/Grouped/GroupedPanel.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,KAAK,kBAAkB,CAAC,CAAC,IAAI;IAC3B,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,aAAa,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,KAAK,EAAE,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IACpD,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,CAAC,EAAG,4DAK9B,kBAAkB,CAAC,CAAC,CAAC,4CA2GvB,CAAC"}

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

@@ -44,10 +44,19 @@ const GroupedPanel = ({ groupedColumns, onRemoveGroup, table, defaultGrouping =
                         lineHeight: 1.5,
                         margin: 0,
                         padding: 0,
-                    }, children: "Grouped By:" }), (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: groupedColumns, strategy: sortable_1.horizontalListSortingStrategy, children: groupedColumns.map((columnId, index) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(GroupChip_1.GroupChip, { columnId: columnId, onRemove: onRemoveGroup, table: table, defaultGrouping: defaultGrouping }), index < groupedColumns.length - 1 && ((0, jsx_runtime_1.jsx)("span", { style: {
-                                    color: iron[400],
-                                    fontSize: "12px",
-                                    fontWeight: 600,
-                                }, children: ">" }))] }, columnId))) })] })) }));
+                    }, children: "Grouped By:" }), (0, jsx_runtime_1.jsxs)(sortable_1.SortableContext, { items: groupedColumns, strategy: sortable_1.horizontalListSortingStrategy, children: [groupedColumns.map((columnId, index) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(GroupChip_1.GroupChip, { columnId: columnId, onRemove: onRemoveGroup, table: table, defaultGrouping: defaultGrouping }), index < groupedColumns.length - 1 && ((0, jsx_runtime_1.jsx)("span", { style: {
+                                        color: iron[400],
+                                        fontSize: "12px",
+                                        fontWeight: 600,
+                                    }, children: ">" }))] }, columnId))), groupedColumns.length >= 4 && ((0, jsx_runtime_1.jsx)("p", { style: {
+                                color: iron[400],
+                                fontSize: 12,
+                                fontWeight: 400,
+                                lineHeight: 1.5,
+                                margin: 0,
+                                marginLeft: "auto",
+                                padding: 0,
+                                fontStyle: "italic",
+                            }, children: "(Maximum 4 columns)" }))] })] })) }));
 };
 exports.GroupedPanel = GroupedPanel;

package/packages/shared-components/dist/SmartGrid/Components/HeaderCells/HeaderCell.js

@@ -20,7 +20,7 @@ const HeaderCell = ({ dragAttributes, dragListeners, dragRef, dragTransform, dra
     const transformStyle = dragTransform
         ? utilities_1.CSS.Transform.toString(dragTransform)
         : undefined;
-    const backgroundColor = isReorderable && isDragOver ? slate[700] : slate[800];
+    const backgroundColor = isReorderable && isDragOver ? slate[700] : "#fafafb";
     const draggableAttributes = dragAttributes ?? {};
     const draggableListeners = dragListeners ?? {};
     const manageZIndex = () => {
@@ -89,7 +89,7 @@ const HeaderCell = ({ dragAttributes, dragListeners, dragRef, dragTransform, dra
                 }, children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", { style: {
                                 color: iron[400],
                                 fontFamily: "Poppins",
-                                fontSize: "14px",
+                                fontSize: "13px",
                                 fontWeight: 600,
                                 lineHeight: "20px",
                                 overflow: "hidden",

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

@@ -6,14 +6,14 @@ const material_1 = require("@mui/material");
 const GetRenderInputs_1 = require("./GetRenderInputs");
 const SearchFilterRow = ({ header, resetAllFilters, }) => {
     const theme = (0, material_1.useTheme)();
-    const { iron, slate } = theme.palette.app.color;
+    const { iron } = theme.palette.app.color;
     const headerDyanmicWidth = header.column.getIsPinned()
         ? header.getSize() - 8
         : header.getSize();
     const columnDef = header.column.columnDef;
     const filterVariant = columnDef.filterVariant;
     return ((0, jsx_runtime_1.jsx)("th", { style: {
-            backgroundColor: `${slate[800]}`,
+            backgroundColor: "#fafafb",
             borderBottom: `1px solid ${iron[700]}`,
             height: "40px",
             left: header.column.getIsPinned() === "left"

package/packages/shared-components/dist/SmartGrid/Components/SmartAlignments.d.ts

@@ -0,0 +1,9 @@
+import { type FieldValues, type UseControllerProps } from "react-hook-form";
+import type { SmartColumnAlignmentType } from "../types";
+type SmartAlignmentsProps<P extends FieldValues> = Omit<UseControllerProps<P>, "defaultValue"> & {
+    defaultValue?: SmartColumnAlignmentType;
+    disabled?: boolean;
+};
+export declare const SmartAlignments: <P extends FieldValues>({ name, control, defaultValue, rules, disabled, }: SmartAlignmentsProps<P>) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SmartAlignments.d.ts.map

package/packages/shared-components/dist/SmartGrid/Components/SmartAlignments.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SmartAlignments.d.ts","sourceRoot":"","sources":["../../../src/SmartGrid/Components/SmartAlignments.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAC;AAQzD,KAAK,oBAAoB,CAAC,CAAC,SAAS,WAAW,IAAI,IAAI,CACrD,kBAAkB,CAAC,CAAC,CAAC,EACrB,cAAc,CACf,GAAG;IACF,YAAY,CAAC,EAAE,wBAAwB,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,CAAC,SAAS,WAAW,EAAE,mDAMpD,oBAAoB,CAAC,CAAC,CAAC,4CAgFzB,CAAC"}

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

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SmartAlignments = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const iconoir_react_1 = require("iconoir-react");
+const react_hook_form_1 = require("react-hook-form");
+const SmartAlignments = ({ name, control, defaultValue, rules, disabled = false, }) => {
+    const { field: { value = defaultValue ?? "left", onChange }, } = (0, react_hook_form_1.useController)({
+        name,
+        control,
+        rules,
+    });
+    const alignments = [
+        {
+            value: "left",
+            icon: (0, jsx_runtime_1.jsx)(iconoir_react_1.AlignLeft, { width: 18, height: 18 }),
+            label: "Left",
+        },
+        {
+            value: "center",
+            icon: (0, jsx_runtime_1.jsx)(iconoir_react_1.AlignCenter, { width: 18, height: 18 }),
+            label: "Center",
+        },
+        {
+            value: "right",
+            icon: (0, jsx_runtime_1.jsx)(iconoir_react_1.AlignRight, { width: 18, height: 18 }),
+            label: "Right",
+        },
+    ];
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            display: "inline-flex",
+            backgroundColor: " #FFFFFF",
+            borderRadius: "6px",
+            border: "1px solid #E1E3E5",
+        }, children: alignments.map(({ value: alignmentValue, icon }) => {
+            const Icon = icon;
+            const isSelected = value === alignmentValue;
+            return ((0, jsx_runtime_1.jsx)("button", { onClick: () => {
+                    if (!disabled) {
+                        onChange(alignmentValue);
+                    }
+                }, disabled: disabled, style: {
+                    padding: "4.5px 10px",
+                    backgroundColor: "transparent",
+                    border: "none",
+                    borderRadius: "4px",
+                    cursor: disabled ? "not-allowed" : "pointer",
+                    transition: "background-color 0.15s",
+                    color: disabled ? "rgb(0, 0, 0, 0.5)" : "rgb(0, 0, 0)",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    margin: "0px",
+                    opacity: disabled ? 0.5 : 1,
+                    ...(isSelected
+                        ? {
+                            backgroundColor: "rgb(229, 231, 231)",
+                        }
+                        : {}),
+                }, "aria-label": `Align ${alignmentValue}`, type: "button", children: Icon }, alignmentValue));
+        }) }));
+};
+exports.SmartAlignments = SmartAlignments;

package/packages/shared-components/dist/SmartGrid/Components/SmartButton.d.ts

@@ -0,0 +1,7 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+type SmartButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    children: ReactNode;
+};
+export declare const SmartButton: ({ children, style, ...props }: SmartButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SmartButton.d.ts.map

package/packages/shared-components/dist/SmartGrid/Components/SmartButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SmartButton.d.ts","sourceRoot":"","sources":["../../../src/SmartGrid/Components/SmartButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7D,KAAK,gBAAgB,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAChE,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,+BAIzB,gBAAgB,4CAsBlB,CAAC"}

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SmartButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const SmartButton = ({ children, style, ...props }) => {
+    return ((0, jsx_runtime_1.jsx)("button", { ...props, style: {
+            flex: 1,
+            cursor: "pointer",
+            padding: "8px",
+            backgroundColor: "white",
+            color: "#333",
+            border: "1px solid #ddd",
+            borderRadius: "4px",
+            fontSize: "14px",
+            fontWeight: 500,
+            transition: "all 0.2s",
+            maxWidth: "80px",
+            ...style,
+        }, children: children }));
+};
+exports.SmartButton = SmartButton;

package/packages/shared-components/dist/SmartGrid/Components/SmartDialog.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+import React from "react";
+type SmartDialogProps = {
+    open: boolean;
+    onClose: () => void;
+    children: React.ReactNode;
+    width?: number | string;
+    actions?: ReactNode;
+};
+export declare function SmartDialog({ open, onClose, children, width, actions, }: Readonly<SmartDialogProps>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SmartDialog.d.ts.map

package/packages/shared-components/dist/SmartGrid/Components/SmartDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SmartDialog.d.ts","sourceRoot":"","sources":["../../../src/SmartGrid/Components/SmartDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,KAAK,gBAAgB,GAAG;IACtB,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,KAAW,EACX,OAAO,GACR,EAAE,QAAQ,CAAC,gBAAgB,CAAC,2CAuD5B"}

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

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SmartDialog = SmartDialog;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+function SmartDialog({ open, onClose, children, width = 420, actions, }) {
+    const dialogRef = (0, react_1.useRef)(null);
+    // Sync React state with native dialog
+    (0, react_1.useEffect)(() => {
+        const dialog = dialogRef.current;
+        if (!dialog) {
+            return;
+        }
+        if (open && !dialog.open) {
+            dialog.showModal();
+        }
+        if (!open && dialog.open) {
+            dialog.close();
+        }
+    }, [open]);
+    return (
+    // eslint-disable-next-line sonarjs/mouse-events-a11y
+    (0, jsx_runtime_1.jsx)("dialog", { ref: dialogRef, onCancel: (e) => {
+            e.preventDefault(); // prevent native auto-close
+            onClose();
+        }, onClick: (e) => {
+            if (e.target == dialogRef.current) {
+                onClose();
+            }
+        }, style: {
+            border: "none",
+            background: "transparent",
+            outline: "none",
+            width,
+            padding: 0,
+            borderRadius: 2,
+            backgroundColor: "white",
+            boxShadow: "0 0 10px 0 rgba(0, 0, 0, 0.1)",
+        }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                padding: 0,
+            }, children: [children, actions] }) }));
+}

package/packages/shared-components/dist/SmartGrid/Components/SmartSwitch.d.ts

@@ -0,0 +1,7 @@
+import { type FieldValues, type UseControllerProps } from "react-hook-form";
+type SmartSwitchProps<P extends FieldValues> = UseControllerProps<P> & {
+    label?: string;
+};
+export declare const SmartSwitch: <P extends FieldValues>({ name, control, defaultValue, rules, label, }: SmartSwitchProps<P>) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SmartSwitch.d.ts.map

package/packages/shared-components/dist/SmartGrid/Components/SmartSwitch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SmartSwitch.d.ts","sourceRoot":"","sources":["../../../src/SmartGrid/Components/SmartSwitch.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,iBAAiB,CAAC;AAEzB,KAAK,gBAAgB,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GAAG;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,WAAW,EAAE,gDAMhD,gBAAgB,CAAC,CAAC,CAAC,4CAqErB,CAAC"}

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

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SmartSwitch = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_hook_form_1 = require("react-hook-form");
+const SmartSwitch = ({ name, control, defaultValue, rules, label, }) => {
+    const { field: { value = false, onChange }, } = (0, react_hook_form_1.useController)({ name, control, defaultValue, rules });
+    const handleToggle = () => {
+        onChange(!value);
+    };
+    const containerStyle = {
+        display: "flex",
+        alignItems: "center",
+        gap: "12px",
+    };
+    const labelStyle = {
+        color: "#374151",
+        fontWeight: "500",
+    };
+    const buttonStyle = {
+        position: "relative",
+        width: "42px",
+        height: "20px",
+        background: "transparent",
+        border: "none",
+        cursor: "pointer",
+        outline: "none",
+        padding: "0",
+    };
+    const trackStyle = {
+        position: "absolute",
+        top: "0",
+        left: "0",
+        width: "100%",
+        height: "100%",
+        borderRadius: "11px",
+        backgroundColor: value ? "#38bdf8" : "#e5e7eb",
+        transition: "background-color 0.25s ease",
+    };
+    const circleStyle = {
+        position: "absolute",
+        top: "2px",
+        left: value ? "23px" : "3px",
+        width: "18px",
+        height: "16px",
+        borderRadius: "50%",
+        backgroundColor: "#ffffff",
+        transition: "left 0.25s ease",
+        boxShadow: "0 1px 2px rgba(0, 0, 0, 0.2)",
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { style: containerStyle, children: [label && (0, jsx_runtime_1.jsx)("span", { style: labelStyle, children: label }), (0, jsx_runtime_1.jsxs)("button", { onClick: handleToggle, style: buttonStyle, role: "switch", "aria-checked": value, type: "button", children: [(0, jsx_runtime_1.jsx)("span", { style: trackStyle }), (0, jsx_runtime_1.jsx)("span", { style: circleStyle })] })] }));
+};
+exports.SmartSwitch = SmartSwitch;

package/packages/shared-components/dist/SmartGrid/Components/Svgs/HideIcon.d.ts

@@ -0,0 +1,3 @@
+import type { SVGProps } from "react";
+export declare const HideIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=HideIcon.d.ts.map