@codezee/sixtify-brahma 0.2.192 → 0.2.194

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

@@ -0,0 +1,117 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColumnArrangerDialog = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const iconoir_react_1 = require("iconoir-react");
+const fromPairs_1 = __importDefault(require("lodash/fromPairs"));
+const react_1 = require("react");
+const react_hook_form_1 = require("react-hook-form");
+const ColumnArrangerForm_1 = require("./ColumnArrangerForm");
+const useRefinedColumns_1 = require("./hooks/useRefinedColumns");
+const DebouncedInput_1 = require("../SearchFilterRow/DebouncedInput");
+const SmartButton_1 = require("../SmartButton");
+const SmartDialog_1 = require("../SmartDialog");
+const SmartSwitch_1 = require("../SmartSwitch");
+const ColumnArrangerDialog = ({ open, onClose, title = "Column Chooser", columns = [], grouping = [], onSave, }) => {
+    const theme = (0, material_1.useTheme)();
+    const reFinedColumn = (0, useRefinedColumns_1.useRefinedColumns)({ columns });
+    const { butterflyBlue, iron } = theme.palette.app.color;
+    const [searchTerm, setSearchTerm] = (0, react_1.useState)("");
+    const { control } = (0, react_hook_form_1.useForm)({
+        defaultValues: {
+            column_list: false, // OFF = show all
+        },
+    });
+    // Watch the column_list switch value
+    const columnListFilter = (0, react_hook_form_1.useWatch)({
+        control,
+        name: "column_list",
+        defaultValue: false,
+    });
+    // Clear search term when dialog closes
+    (0, react_1.useEffect)(() => {
+        if (!open) {
+            setSearchTerm("");
+        }
+    }, [open]);
+    return ((0, jsx_runtime_1.jsx)(ColumnArrangerForm_1.ColumnArrangerForm, { columns: reFinedColumn, filterVisibleOnly: columnListFilter, searchTerm: searchTerm, grouping: grouping, children: ({ columnList, reset, getValues }) => ((0, jsx_runtime_1.jsx)(SmartDialog_1.SmartDialog, { open: open, onClose: () => {
+                setSearchTerm("");
+                reset();
+                onClose();
+            }, width: 450, actions: (0, jsx_runtime_1.jsxs)("div", { style: {
+                    display: "flex",
+                    justifyContent: "space-between",
+                    padding: "10px 24px",
+                    borderTop: `1px solid ${iron[300]}`,
+                    gap: 2,
+                }, children: [(0, jsx_runtime_1.jsx)(SmartButton_1.SmartButton, { onClick: () => {
+                            reset();
+                            setSearchTerm("");
+                        }, onMouseEnter: (e) => {
+                            e.currentTarget.style.backgroundColor = "#f5f5f5";
+                        }, onMouseLeave: (e) => {
+                            e.currentTarget.style.backgroundColor = "white";
+                        }, children: "Reset" }), (0, jsx_runtime_1.jsx)(SmartButton_1.SmartButton, { onClick: () => {
+                            const values = getValues();
+                            setSearchTerm("");
+                            const result = (0, fromPairs_1.default)(values.columns.map((col) => {
+                                return [
+                                    col.accessorKey,
+                                    {
+                                        hide: col.hide,
+                                        align: col.align ?? "left",
+                                        header: col.header,
+                                    },
+                                ];
+                            }));
+                            onSave(result);
+                            onClose();
+                        }, onMouseEnter: (e) => {
+                            e.currentTarget.style.opacity = "0.9";
+                        }, onMouseLeave: (e) => {
+                            e.currentTarget.style.opacity = "1";
+                        }, style: {
+                            backgroundColor: butterflyBlue[900],
+                            color: "white",
+                        }, children: "Save" })] }), children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                            display: "flex",
+                            flexDirection: "row",
+                            alignItems: "center",
+                            justifyContent: "space-between",
+                            padding: "5px 24px",
+                            borderBottom: `1px solid ${iron[300]}`,
+                        }, children: [(0, jsx_runtime_1.jsx)("p", { style: {
+                                    fontWeight: 500,
+                                    fontSize: "18px",
+                                    color: iron[900],
+                                    lineHeight: "1px",
+                                }, children: title }), (0, jsx_runtime_1.jsx)(iconoir_react_1.Xmark, { width: 20, height: 20, strokeWidth: 2, onClick: () => {
+                                    setSearchTerm("");
+                                    onClose();
+                                    reset();
+                                }, style: {
+                                    border: `1px solid ${iron[700]}`,
+                                    borderRadius: "5px",
+                                    color: iron[900],
+                                } })] }), (0, jsx_runtime_1.jsx)("div", { style: {
+                            padding: "8px 24px",
+                            display: "flex",
+                            flexDirection: "column",
+                            gap: "12px",
+                        }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                                display: "flex",
+                                flexDirection: "row",
+                                alignItems: "center",
+                                justifyContent: "space-between",
+                            }, children: [(0, jsx_runtime_1.jsx)(DebouncedInput_1.DebouncedInput, { value: searchTerm, onChange: (value) => setSearchTerm(value), placeholder: "Search by label...", debounce: 300, inputFontSize: "13px", inputHeight: "14px", style: { width: "80%" } }, open ? "dialog-open" : "dialog-closed"), (0, jsx_runtime_1.jsx)(SmartSwitch_1.SmartSwitch, { name: "column_list", control: control })] }) }), (0, jsx_runtime_1.jsx)("div", { style: {
+                            maxHeight: "600px",
+                            minHeight: "500px",
+                            overflowY: "auto",
+                            outline: "none",
+                        }, children: columnList })] }) })) }));
+};
+exports.ColumnArrangerDialog = ColumnArrangerDialog;

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

@@ -0,0 +1,17 @@
+import { type ReactNode } from "react";
+import type { AppColumnDef } from "../../types";
+export type ColumnArrangerFormProps<T> = {
+    columns: AppColumnDef<T>[];
+    filterVisibleOnly?: boolean;
+    searchTerm?: string;
+    grouping?: string[];
+    children: (args: {
+        columnList: ReactNode;
+        reset: (values?: AppColumnDef<T> | Record<string, unknown>) => void;
+        getValues: () => {
+            columns: AppColumnDef<T>[];
+        };
+    }) => JSX.Element;
+};
+export declare const ColumnArrangerForm: <T>({ columns, filterVisibleOnly, searchTerm, children, grouping, }: ColumnArrangerFormProps<T>) => JSX.Element;
+//# sourceMappingURL=ColumnArrangerForm.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnArrangerForm.d.ts","sourceRoot":"","sources":["../../../../src/SmartGrid/Components/ColumnChooser/ColumnArrangerForm.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAI3D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAMhD,MAAM,MAAM,uBAAuB,CAAC,CAAC,IAAI;IACvC,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE;QACf,UAAU,EAAE,SAAS,CAAC;QACtB,KAAK,EAAE,CAAC,MAAM,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;QACpE,SAAS,EAAE,MAAM;YAAE,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAA;SAAE,CAAC;KACjD,KAAK,GAAG,CAAC,OAAO,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,CAAC,EAAG,iEAMpC,uBAAuB,CAAC,CAAC,CAAC,gBA+D5B,CAAC"}

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

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColumnArrangerForm = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_hook_form_1 = require("react-hook-form");
+const ColumnArranger_1 = require("./ColumnArranger");
+const ColumnArrangerForm = ({ columns, filterVisibleOnly = false, searchTerm = "", children, grouping, }) => {
+    const lockedColumns = (0, react_1.useMemo)(() => columns.filter((col) => !("hide" in col)), [columns]);
+    const unlockedColumns = (0, react_1.useMemo)(() => columns
+        .filter((col) => "hide" in col)
+        .map((col) => ({
+        ...col,
+        hide: !col.hide,
+        align: col.align ?? "left",
+    })), [columns]);
+    const { control, reset, getValues, setValue } = (0, react_hook_form_1.useForm)({
+        defaultValues: {
+            columns: unlockedColumns,
+        },
+    });
+    const wrappedReset = (values) => {
+        reset({
+            columns: values
+                ? // eslint-disable-next-line sonarjs/no-nested-conditional
+                    Array.isArray(values)
+                        ? values
+                        : [values]
+                : unlockedColumns,
+        });
+    };
+    const { fields } = (0, react_hook_form_1.useFieldArray)({
+        name: "columns",
+        control,
+    });
+    // Update form values when unlockedColumns changes (e.g., when grouping changes)
+    // Use reset to fully update the form and trigger field array re-render
+    (0, react_1.useEffect)(() => {
+        reset({ columns: unlockedColumns }, { keepDefaultValues: false });
+    }, [unlockedColumns, reset]);
+    return children({
+        reset: wrappedReset,
+        getValues,
+        columnList: ((0, jsx_runtime_1.jsx)(ColumnArranger_1.ColumnArranger, { fields: fields, lockedColumns: lockedColumns, control: control, setValue: setValue, filterVisibleOnly: filterVisibleOnly, searchTerm: searchTerm, grouping: grouping })),
+    });
+};
+exports.ColumnArrangerForm = ColumnArrangerForm;

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

@@ -0,0 +1,16 @@
+import { type Control, type FieldArrayWithId, type UseFormSetValue } from "react-hook-form";
+import type { AppColumnDef } from "../../types";
+export type ColumnItemProps<T> = {
+    field: FieldArrayWithId<{
+        columns: AppColumnDef<T>[];
+    }, "columns">;
+    control: Control<{
+        columns: AppColumnDef<T>[];
+    }>;
+    index: number;
+    setValue: UseFormSetValue<{
+        columns: AppColumnDef<T>[];
+    }>;
+};
+export declare function ColumnItem<T>({ field, control, index, setValue, }: Readonly<ColumnItemProps<T>>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ColumnItem.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnItem.d.ts","sourceRoot":"","sources":["../../../../src/SmartGrid/Components/ColumnChooser/ColumnItem.tsx"],"names":[],"mappings":"AASA,OAAO,EACL,KAAK,OAAO,EACZ,KAAK,gBAAgB,EACrB,KAAK,eAAe,EAErB,MAAM,iBAAiB,CAAC;AAKzB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI;IAC/B,KAAK,EAAE,gBAAgB,CAAC;QAAE,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAA;KAAE,EAAE,SAAS,CAAC,CAAC;IACnE,OAAO,EAAE,OAAO,CAAC;QAAE,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAA;KAAE,CAAC,CAAC;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,eAAe,CAAC;QAAE,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAA;KAAE,CAAC,CAAC;CAC3D,CAAC;AAEF,wBAAgB,UAAU,CAAC,CAAC,EAAE,EAC5B,KAAK,EACL,OAAO,EACP,KAAK,EACL,QAAQ,GACT,EAAE,QAAQ,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,2CA4L9B"}

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"}