@tap-payments/os-micro-frontend-shared 0.1.374-test.1 → 0.1.374-test.1-test.2-test.3-test.4

package/build/components/TableHeader/TableView/components/ColumnList.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Box, Typography, Link, Popper, Divider } from '@mui/material';
+import { Reorder } from 'framer-motion';
+import { dragIcon, rightArrow, viewIcon } from '../../../../constants/index.js';
+import { Checkbox, MenuItem } from '../../../index.js';
+import { isDateColumn, getColumnCheckState } from '../utils';
+import { ColumnListContainer, SelectAllHeader, ColumnItemRow, DragIconWrapper, CheckboxWrapper, SubmenuPaper, checkboxSx } from '../styles';
+export const ColumnList = ({ selectedColumns, columnNames, allSelected, someSelected, hoveredColumn, anchorEl, onReorder, onColumnToggle, onSubItemToggle, onSelectAll, onResetToDefault, onSubmenuEnter, onSubmenuLeave, onCancelClose, }) => {
+    return (_jsxs(ColumnListContainer, { children: [_jsxs(SelectAllHeader, { children: [_jsx(DragIconWrapper, { children: _jsx("img", { src: viewIcon, alt: "drag", style: { width: 16, height: 16, opacity: 0.5 } }) }), _jsx(CheckboxWrapper, Object.assign({ onClick: (e) => {
+                            e.stopPropagation();
+                            onSelectAll();
+                        } }, { children: _jsx(Checkbox, { checked: allSelected, indeterminate: someSelected, size: "small", sx: checkboxSx, onChange: (e) => {
+                                e.stopPropagation();
+                                onSelectAll();
+                            }, onClick: (e) => {
+                                e.stopPropagation();
+                            } }) })), _jsx(Typography, Object.assign({ onClick: (e) => {
+                            e.stopPropagation();
+                            onSelectAll();
+                        }, sx: { flex: 1, fontSize: 13, fontWeight: 500, color: 'text.primary', ml: 0.75, cursor: 'pointer' } }, { children: "Select All" })), _jsx(Link, Object.assign({ component: "button", type: "button", onClick: (e) => {
+                            e.stopPropagation();
+                            onResetToDefault();
+                        }, underline: "none", sx: { fontSize: 13, fontWeight: 500, cursor: 'pointer', color: 'common.blue' } }, { children: "Reset to default" }))] }), _jsx(Box, Object.assign({ sx: { flex: 1, overflowY: 'auto', minHeight: 0 } }, { children: _jsx(Reorder.Group, Object.assign({ axis: "y", onReorder: onReorder, values: columnNames, style: { listStyle: 'none', padding: 0, margin: 0 } }, { children: selectedColumns.map((column) => {
+                        var _a;
+                        const isDate = isDateColumn(column.name);
+                        const hasSubmenu = column.menuItems && column.menuItems.length > 0;
+                        const { checked, indeterminate } = getColumnCheckState(column);
+                        return (_jsxs(Reorder.Item, Object.assign({ value: column.name, drag: !isDate, dragListener: !isDate, transition: { duration: 0 }, whileDrag: { zIndex: 9999, boxShadow: '0 4px 12px rgba(0,0,0,0.15)', scale: 1 }, style: {
+                                listStyle: 'none',
+                                margin: 0,
+                                padding: 0,
+                                position: 'relative',
+                                zIndex: 1,
+                                backgroundColor: '#fff',
+                                width: '100%',
+                                willChange: 'transform',
+                            }, onDragStart: (e) => {
+                                const target = e.target;
+                                if (target.closest('[role="checkbox"]') ||
+                                    target.closest('input[type="checkbox"]') ||
+                                    target.closest('[class*="CheckboxWrapper"]')) {
+                                    e.preventDefault();
+                                }
+                            } }, { children: [_jsxs(ColumnItemRow, Object.assign({ isHovered: hoveredColumn === column.name, isDate: isDate, onMouseEnter: (e) => hasSubmenu && onSubmenuEnter(column.name, e.currentTarget), onMouseLeave: () => hasSubmenu && onSubmenuLeave(), onClick: (e) => {
+                                        if (e.target.closest('[role="checkbox"]') || e.target.closest('input[type="checkbox"]')) {
+                                            e.stopPropagation();
+                                        }
+                                    }, sx: { width: '100%', position: 'relative' } }, { children: [_jsx(DragIconWrapper, { children: _jsx("img", { src: dragIcon, alt: "drag", draggable: false, style: { width: 16, height: 16, cursor: isDate ? 'default' : 'grab', pointerEvents: 'none' } }) }), _jsx(CheckboxWrapper, Object.assign({ onMouseDown: (e) => {
+                                                e.stopPropagation();
+                                            }, onPointerDown: (e) => {
+                                                e.stopPropagation();
+                                            } }, { children: _jsx(Checkbox, { checked: checked, indeterminate: indeterminate, onChange: (e) => {
+                                                    e.stopPropagation();
+                                                    onColumnToggle(column.name);
+                                                }, onClick: (e) => {
+                                                    e.stopPropagation();
+                                                }, disabled: isDate, size: "small", sx: checkboxSx }) })), _jsx(Typography, Object.assign({ sx: { flex: 1, fontSize: 13, fontWeight: 400, color: 'text.primary', ml: 1 } }, { children: column.label || column.name })), hasSubmenu && (_jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', ml: 1, flexShrink: 0 } }, { children: _jsx("img", { src: rightArrow, alt: "arrow", style: { width: 12, height: 12 } }) })))] })), hasSubmenu && (_jsx(Popper, Object.assign({ open: hoveredColumn === column.name, anchorEl: anchorEl, placement: "right-start", sx: { zIndex: 10000 }, modifiers: [
+                                        {
+                                            name: 'offset',
+                                            options: {
+                                                offset: [0, 0],
+                                            },
+                                        },
+                                    ] }, { children: _jsxs(Box, Object.assign({ onMouseEnter: onCancelClose, onMouseLeave: onSubmenuLeave, sx: { display: 'flex', pl: 0.5 } }, { children: [_jsx(Box, { sx: { width: 8, height: '100%', position: 'absolute', left: -8, top: 0, bottom: 0 } }), _jsx(SubmenuPaper, { children: (_a = column.menuItems) === null || _a === void 0 ? void 0 : _a.map((subItem, subItemIndex) => {
+                                                    var _a, _b;
+                                                    return (_jsxs(React.Fragment, { children: [_jsx(MenuItem, Object.assign({ isSelected: subItem.selected, onClick: () => onSubItemToggle(column.name, subItem.name) }, { children: subItem.label || subItem.name })), subItemIndex < ((_b = (_a = column.menuItems) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) - 1 && _jsx(Divider, {})] }, subItem.name));
+                                                }) })] })) })))] }), column.name));
+                    }) })) }))] }));
+};

package/build/components/TableHeader/TableView/components/ViewsSubmenu.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { ViewsSubmenuProps } from '../types';
+export declare const ViewsSubmenu: React.FC<ViewsSubmenuProps>;

package/build/components/TableHeader/TableView/components/ViewsSubmenu.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useMemo } from 'react';
+import { Box, Typography, Divider, Popper } from '@mui/material';
+import { Reorder } from 'framer-motion';
+import { Checkbox, MenuItem } from '../../../index.js';
+import { blackRightArrowIcon } from '../../../../constants/index.js';
+import { getColumnCheckState, isDateColumn } from '../utils';
+import { ResetHeaderBox, ResetCheckboxSx, ColumnItemsContainer, SubmenuPaper } from '../styles';
+import { useNestedSubmenu } from '../hooks/useNestedSubmenu';
+export const ViewsSubmenu = ({ columns, allCurrentSelected, someCurrentSelected, onSelectAll, onReset, onColumnToggle, onNestedItemToggle, onReorder, anchorEl, isModified = false, }) => {
+    const { hoveredNestedColumn, nestedSubmenuAnchorEl, openNestedSubmenu, closeNestedSubmenu, cancelNestedClose } = useNestedSubmenu();
+    const columnNames = useMemo(() => columns.map((col) => col.name), [columns]);
+    return (_jsxs(_Fragment, { children: [_jsxs(ResetHeaderBox, { children: [_jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: 1 } }, { children: _jsx(Checkbox, { checked: allCurrentSelected, indeterminate: someCurrentSelected, onChange: (e) => {
+                                e.stopPropagation();
+                                onSelectAll();
+                            }, onClick: (e) => {
+                                e.stopPropagation();
+                            }, sx: ResetCheckboxSx }) })), _jsx(Typography, Object.assign({ component: "button", onClick: (e) => {
+                            e.stopPropagation();
+                            onReset();
+                        }, sx: {
+                            fontSize: 11,
+                            fontWeight: 500,
+                            color: '#1F88D0',
+                            background: 'none',
+                            border: 'none',
+                            cursor: 'pointer',
+                            padding: 0,
+                            opacity: isModified ? 1 : 0.5,
+                            '&:hover': {
+                                textDecoration: 'underline',
+                            },
+                        } }, { children: "Reset" }))] }), _jsx(Divider, {}), _jsx(ColumnItemsContainer, { children: _jsx(Reorder.Group, Object.assign({ axis: "y", onReorder: onReorder, values: columnNames, style: { listStyle: 'none', padding: 0, margin: 0 } }, { children: columns.map((column, columnIndex) => {
+                        var _a;
+                        const hasNestedSubmenu = column.menuItems && column.menuItems.length > 0;
+                        const { checked, indeterminate } = getColumnCheckState(column);
+                        const isDate = isDateColumn(column.name);
+                        return (_jsxs(Reorder.Item, Object.assign({ value: column.name, drag: !isDate, dragListener: !isDate, transition: { duration: 0 }, whileDrag: { zIndex: 9999, boxShadow: '0 4px 12px rgba(0,0,0,0.15)', scale: 1.02 }, style: {
+                                listStyle: 'none',
+                                margin: 0,
+                                padding: 0,
+                                position: 'relative',
+                                zIndex: 1,
+                                backgroundColor: '#fff',
+                                width: '100%',
+                                willChange: 'transform',
+                            }, onDragStart: (e) => {
+                                const target = e.target;
+                                if (target.closest('[role="checkbox"]') ||
+                                    target.closest('input[type="checkbox"]') ||
+                                    target.closest('[class*="CheckboxWrapper"]')) {
+                                    e.preventDefault();
+                                }
+                            } }, { children: [_jsxs(Box, Object.assign({ sx: { position: 'relative' }, onMouseEnter: (e) => hasNestedSubmenu && openNestedSubmenu(column.name, e.currentTarget), onMouseLeave: () => hasNestedSubmenu && closeNestedSubmenu() }, { children: [_jsxs(Box, Object.assign({ sx: {
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                justifyContent: 'space-between',
+                                                width: '100%',
+                                            } }, { children: [_jsx(MenuItem, Object.assign({ isSelected: hasNestedSubmenu ? checked : column.selected, isIndeterminate: hasNestedSubmenu ? indeterminate : false, onClick: () => onColumnToggle(column.name), sx: { flex: 1, display: 'flex', alignItems: 'center' } }, { children: _jsx("span", { children: column.label || column.name }) })), hasNestedSubmenu && (_jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', pr: 1, pointerEvents: 'none' } }, { children: _jsx("img", { src: blackRightArrowIcon, alt: "arrow", style: { height: 12 } }) })))] })), hasNestedSubmenu && (_jsx(Popper, Object.assign({ open: hoveredNestedColumn === column.name, anchorEl: nestedSubmenuAnchorEl, placement: "right-start", sx: { zIndex: 10000 }, modifiers: [
+                                                {
+                                                    name: 'offset',
+                                                    options: {
+                                                        offset: [0, 0],
+                                                    },
+                                                },
+                                            ] }, { children: _jsxs(Box, Object.assign({ onMouseEnter: cancelNestedClose, onMouseLeave: closeNestedSubmenu, sx: { display: 'flex', pl: 0.5 } }, { children: [_jsx(Box, { sx: { width: 8, height: '100%', position: 'absolute', left: -8, top: 0, bottom: 0 } }), _jsx(SubmenuPaper, { children: (_a = column.menuItems) === null || _a === void 0 ? void 0 : _a.map((subItem, subItemIndex) => {
+                                                            var _a, _b;
+                                                            return (_jsxs(React.Fragment, { children: [_jsx(MenuItem, Object.assign({ isSelected: subItem.selected, onClick: () => onNestedItemToggle(column.name, subItem.name) }, { children: subItem.label || subItem.name })), subItemIndex < ((_b = (_a = column.menuItems) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) - 1 && _jsx(Divider, {})] }, subItem.name));
+                                                        }) })] })) })))] })), columnIndex < columns.length - 1 && _jsx(Divider, {})] }), column.name));
+                    }) })) })] }));
+};

package/build/components/TableHeader/TableView/components/index.d.ts

@@ -0,0 +1,2 @@
+export { ColumnList } from './ColumnList';
+export { ViewsSubmenu } from './ViewsSubmenu';

package/build/components/TableHeader/TableView/components/index.js

@@ -0,0 +1,2 @@
+export { ColumnList } from './ColumnList';
+export { ViewsSubmenu } from './ViewsSubmenu';

package/build/components/TableHeader/TableView/constants.d.ts

@@ -0,0 +1,10 @@
+export declare const DIALOG_WIDTH = 450;
+export declare const DIALOG_HEIGHT = 600;
+export declare const SUBMENU_CLOSE_DELAY = 150;
+export declare const MAX_CUSTOM_VIEWS = 3;
+export declare const TEMPLATE_NAME_MAX_LENGTH = 20;
+export declare const DATE_COLUMN_CONFIG: {
+    readonly name: "date";
+    readonly label: "Date";
+    readonly selected: true;
+};

package/build/components/TableHeader/TableView/constants.js

@@ -0,0 +1,10 @@
+export const DIALOG_WIDTH = 450;
+export const DIALOG_HEIGHT = 600;
+export const SUBMENU_CLOSE_DELAY = 150;
+export const MAX_CUSTOM_VIEWS = 3;
+export const TEMPLATE_NAME_MAX_LENGTH = 20;
+export const DATE_COLUMN_CONFIG = {
+    name: 'date',
+    label: 'Date',
+    selected: true,
+};

package/build/components/TableHeader/TableView/data.d.ts

@@ -0,0 +1,5 @@
+import type { ColumnViewProps } from '../../../types/index.js';
+import type { ViewMenuItem } from './types';
+export declare const advancedColumns: ColumnViewProps[];
+export declare const sheetColumns: ColumnViewProps[];
+export declare const defaultViewList: ViewMenuItem[];

package/build/components/TableHeader/TableView/data.js

@@ -0,0 +1,48 @@
+export const advancedColumns = [
+    {
+        name: 'customer',
+        label: 'Customer',
+        selected: true,
+        menuItems: [
+            { name: 'customer_id', label: 'ID', selected: true },
+            { name: 'customer_name', label: 'Name', selected: true },
+            { name: 'customer_email', label: 'Email', selected: true },
+            { name: 'customer_phone', label: 'Phone', selected: false },
+        ],
+    },
+    {
+        name: 'transaction',
+        label: 'Transaction',
+        selected: true,
+        menuItems: [
+            { name: 'transaction_id', label: 'Transaction ID', selected: true },
+            { name: 'transaction_amount', label: 'Amount', selected: true },
+            { name: 'transaction_status', label: 'Status', selected: false },
+            { name: 'transaction_type', label: 'Type', selected: false },
+        ],
+    },
+    {
+        name: 'payment',
+        label: 'Payment',
+        selected: false,
+        menuItems: [
+            { name: 'payment_method', label: 'Method', selected: false },
+            { name: 'payment_card', label: 'Card', selected: false },
+            { name: 'payment_bank', label: 'Bank', selected: false },
+        ],
+    },
+];
+export const sheetColumns = [
+    { name: 'customerID', label: 'Customer ID', selected: true },
+    { name: 'customerName', label: 'Customer Name', selected: true },
+    { name: 'amount', label: 'Amount', selected: true },
+    { name: 'status', label: 'Status', selected: false },
+    { name: 'currency', label: 'Currency', selected: false },
+    { name: 'reference', label: 'Reference', selected: true },
+];
+export const defaultViewList = [
+    {
+        label: 'Default',
+        id: 'default',
+    },
+];

package/build/components/TableHeader/TableView/hooks/index.d.ts

@@ -1,3 +1,9 @@
 export { useSubMenu } from './useSubMenu';
 export { useViewColumns } from './useViewColumns';
 export { useColumnItem } from './useColumnItem';
+export { useViewsManager } from './useViewsManager';
+export { useViewSelector } from './useViewSelector';
+export { useSubmenuHover } from './useSubmenuHover';
+export { useOriginalColumns } from './useOriginalColumns';
+export { useNestedSubmenu } from './useNestedSubmenu';
+export { useCreateViewDialog } from './useCreateViewDialog';

package/build/components/TableHeader/TableView/hooks/index.js

@@ -1,3 +1,9 @@
 export { useSubMenu } from './useSubMenu';
 export { useViewColumns } from './useViewColumns';
 export { useColumnItem } from './useColumnItem';
+export { useViewsManager } from './useViewsManager';
+export { useViewSelector } from './useViewSelector';
+export { useSubmenuHover } from './useSubmenuHover';
+export { useOriginalColumns } from './useOriginalColumns';
+export { useNestedSubmenu } from './useNestedSubmenu';
+export { useCreateViewDialog } from './useCreateViewDialog';

package/build/components/TableHeader/TableView/hooks/useCreateViewDialog.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import type { ColumnViewProps } from '../../../../types/index.js';
+import type { UseCreateViewDialogProps } from '../types';
+export declare const useCreateViewDialog: ({ open, availableColumns, defaultColumns, editingView, tableViews }: UseCreateViewDialogProps) => {
+    templateName: string;
+    setTemplateName: import("react").Dispatch<import("react").SetStateAction<string>>;
+    selectedColumns: ColumnViewProps[];
+    columnNames: string[];
+    allSelected: boolean;
+    someSelected: boolean;
+    isNameValid: boolean;
+    hoveredColumn: string | null;
+    anchorEl: HTMLElement | null;
+    openSubmenu: (columnName: string, element: HTMLElement) => void;
+    closeSubmenu: () => void;
+    cancelClose: () => void;
+    handleReorder: (reorderedNames: string[]) => void;
+    handleColumnToggle: (columnName: string) => void;
+    handleSubItemToggle: (columnName: string, subItemName: string) => void;
+    handleSelectAll: () => void;
+    handleResetToDefault: () => void;
+};

package/build/components/TableHeader/TableView/hooks/useCreateViewDialog.js

@@ -0,0 +1,88 @@
+import { useState, useEffect, useMemo, useRef } from 'react';
+import { DATE_COLUMN_CONFIG, TEMPLATE_NAME_MAX_LENGTH } from '../constants';
+import { initializeEditingColumns, initializeCreateColumns, initializeCreateColumnsWithCurrentState, resetColumnsToDefault, toggleColumn, toggleSubItem, toggleAllColumns, areAllColumnsSelected, areSomeColumnsSelected, isValidTemplateName, } from '../utils';
+import { useSubmenuHover } from './useSubmenuHover';
+export const useCreateViewDialog = ({ open, availableColumns, defaultColumns, editingView, tableViews = [] }) => {
+    const [templateName, setTemplateName] = useState(() => (editingView === null || editingView === void 0 ? void 0 : editingView.label) || '');
+    const [selectedColumns, setSelectedColumns] = useState([]);
+    const previousOpenRef = useRef(false);
+    const { hoveredColumn, anchorEl, openSubmenu, closeSubmenu, cancelClose } = useSubmenuHover();
+    const dateColumn = DATE_COLUMN_CONFIG;
+    useEffect(() => {
+        var _a, _b;
+        if (!open) {
+            previousOpenRef.current = false;
+            return;
+        }
+        const wasClosed = !previousOpenRef.current;
+        if (wasClosed && open) {
+            if (editingView) {
+                // Use the saved submenu from editingView if available, otherwise fall back to defaultColumns
+                const savedColumns = editingView.submenu && editingView.submenu.length > 0
+                    ? editingView.submenu
+                    : defaultColumns;
+                const otherColumns = initializeEditingColumns(savedColumns, availableColumns);
+                setSelectedColumns([dateColumn, ...otherColumns]);
+                // Ensure templateName is set to editingView.label (fallback to empty string if undefined)
+                const nameToSet = ((_a = editingView.label) === null || _a === void 0 ? void 0 : _a.trim()) || '';
+                setTemplateName(nameToSet);
+            }
+            else {
+                const otherColumns = tableViews && tableViews.length > 0
+                    ? initializeCreateColumnsWithCurrentState(availableColumns, tableViews)
+                    : initializeCreateColumns(availableColumns);
+                setSelectedColumns([dateColumn, ...otherColumns]);
+                setTemplateName('');
+            }
+        }
+        else if (open && editingView) {
+            // Update templateName when editingView changes while dialog is open
+            const nameToSet = ((_b = editingView.label) === null || _b === void 0 ? void 0 : _b.trim()) || '';
+            setTemplateName(nameToSet);
+        }
+        previousOpenRef.current = open;
+    }, [open, editingView === null || editingView === void 0 ? void 0 : editingView.id, editingView === null || editingView === void 0 ? void 0 : editingView.label, editingView === null || editingView === void 0 ? void 0 : editingView.submenu, availableColumns, defaultColumns, tableViews, dateColumn]);
+    const columnNames = useMemo(() => selectedColumns.map((col) => col.name), [selectedColumns]);
+    const allSelected = useMemo(() => areAllColumnsSelected(selectedColumns), [selectedColumns]);
+    const someSelected = useMemo(() => areSomeColumnsSelected(selectedColumns, allSelected), [selectedColumns, allSelected]);
+    const isNameValid = useMemo(() => isValidTemplateName(templateName, TEMPLATE_NAME_MAX_LENGTH), [templateName]);
+    const handleReorder = (reorderedNames) => {
+        const reorderedColumns = reorderedNames
+            .map((name) => selectedColumns.find((col) => col.name === name))
+            .filter((col) => Boolean(col));
+        setSelectedColumns(reorderedColumns);
+    };
+    const handleColumnToggle = (columnName) => {
+        setSelectedColumns((prev) => toggleColumn(prev, columnName));
+    };
+    const handleSubItemToggle = (columnName, subItemName) => {
+        setSelectedColumns((prev) => toggleSubItem(prev, columnName, subItemName));
+    };
+    const handleSelectAll = () => {
+        setSelectedColumns((prev) => toggleAllColumns(prev, !allSelected));
+    };
+    const handleResetToDefault = () => {
+        const columnsSource = defaultColumns.length > 0 ? defaultColumns : availableColumns;
+        const otherColumns = resetColumnsToDefault(columnsSource);
+        setSelectedColumns([dateColumn, ...otherColumns]);
+    };
+    return {
+        templateName,
+        setTemplateName,
+        selectedColumns,
+        columnNames,
+        allSelected,
+        someSelected,
+        isNameValid,
+        hoveredColumn,
+        anchorEl,
+        openSubmenu,
+        closeSubmenu,
+        cancelClose,
+        handleReorder,
+        handleColumnToggle,
+        handleSubItemToggle,
+        handleSelectAll,
+        handleResetToDefault,
+    };
+};

package/build/components/TableHeader/TableView/hooks/useDialogPosition.d.ts

@@ -0,0 +1,8 @@
+export declare const useDialogPosition: (dialogWidth: number, dialogHeight: number) => {
+    position: {
+        x: number;
+        y: number;
+    };
+    resetPosition: () => void;
+    updatePosition: (x: number, y: number) => void;
+};

package/build/components/TableHeader/TableView/hooks/useDialogPosition.js

@@ -0,0 +1,16 @@
+import { useState, useCallback } from 'react';
+export const useDialogPosition = (dialogWidth, dialogHeight) => {
+    const [position, setPosition] = useState({ x: 0, y: 0 });
+    const resetPosition = useCallback(() => {
+        const centerX = window.innerWidth / 2 - dialogWidth / 2;
+        const centerY = window.innerHeight / 2 - dialogHeight / 2;
+        setPosition({
+            x: Math.max(0, centerX),
+            y: Math.max(0, centerY),
+        });
+    }, [dialogWidth, dialogHeight]);
+    const updatePosition = useCallback((x, y) => {
+        setPosition({ x, y });
+    }, []);
+    return { position, resetPosition, updatePosition };
+};

package/build/components/TableHeader/TableView/hooks/useNestedSubmenu.d.ts

@@ -0,0 +1,7 @@
+export declare const useNestedSubmenu: () => {
+    hoveredNestedColumn: string | null;
+    nestedSubmenuAnchorEl: HTMLElement | null;
+    openNestedSubmenu: (columnName: string, element: HTMLElement) => void;
+    closeNestedSubmenu: () => void;
+    cancelNestedClose: () => void;
+};

package/build/components/TableHeader/TableView/hooks/useNestedSubmenu.js

@@ -0,0 +1,34 @@
+import { useState, useRef, useCallback } from 'react';
+import { SUBMENU_CLOSE_DELAY } from '../constants';
+export const useNestedSubmenu = () => {
+    const [hoveredNestedColumn, setHoveredNestedColumn] = useState(null);
+    const [nestedSubmenuAnchorEl, setNestedSubmenuAnchorEl] = useState(null);
+    const nestedCloseTimeoutRef = useRef(null);
+    const openNestedSubmenu = useCallback((columnName, element) => {
+        if (nestedCloseTimeoutRef.current) {
+            clearTimeout(nestedCloseTimeoutRef.current);
+            nestedCloseTimeoutRef.current = null;
+        }
+        setHoveredNestedColumn(columnName);
+        setNestedSubmenuAnchorEl(element);
+    }, []);
+    const closeNestedSubmenu = useCallback(() => {
+        nestedCloseTimeoutRef.current = setTimeout(() => {
+            setHoveredNestedColumn(null);
+            setNestedSubmenuAnchorEl(null);
+        }, SUBMENU_CLOSE_DELAY);
+    }, []);
+    const cancelNestedClose = useCallback(() => {
+        if (nestedCloseTimeoutRef.current) {
+            clearTimeout(nestedCloseTimeoutRef.current);
+            nestedCloseTimeoutRef.current = null;
+        }
+    }, []);
+    return {
+        hoveredNestedColumn,
+        nestedSubmenuAnchorEl,
+        openNestedSubmenu,
+        closeNestedSubmenu,
+        cancelNestedClose,
+    };
+};

package/build/components/TableHeader/TableView/hooks/useOriginalColumns.d.ts

@@ -0,0 +1,6 @@
+import type { ColumnViewProps } from '../../../../types/index.js';
+export declare const useOriginalColumns: (defaultColumns: ColumnViewProps[]) => {
+    originalColumns: ColumnViewProps[];
+    saveOriginalState: () => void;
+    clearOriginalState: () => void;
+};

package/build/components/TableHeader/TableView/hooks/useOriginalColumns.js

@@ -0,0 +1,18 @@
+import { useState, useCallback } from 'react';
+export const useOriginalColumns = (defaultColumns) => {
+    const [originalColumns, setOriginalColumns] = useState([]);
+    const saveOriginalState = useCallback(() => {
+        setOriginalColumns(defaultColumns.map((col) => {
+            var _a;
+            return (Object.assign(Object.assign({}, col), { selected: col.selected, menuItems: (_a = col.menuItems) === null || _a === void 0 ? void 0 : _a.map((item) => (Object.assign(Object.assign({}, item), { selected: item.selected }))) }));
+        }));
+    }, [defaultColumns]);
+    const clearOriginalState = useCallback(() => {
+        setOriginalColumns([]);
+    }, []);
+    return {
+        originalColumns,
+        saveOriginalState,
+        clearOriginalState,
+    };
+};

package/build/components/TableHeader/TableView/hooks/useSubmenuHover.d.ts

@@ -0,0 +1,8 @@
+export declare const useSubmenuHover: () => {
+    hoveredColumn: string | null;
+    anchorEl: HTMLElement | null;
+    openSubmenu: (columnName: string, element: HTMLElement) => void;
+    closeSubmenu: () => void;
+    cancelClose: () => void;
+    forceClose: () => void;
+};

package/build/components/TableHeader/TableView/hooks/useSubmenuHover.js

@@ -0,0 +1,43 @@
+import { useState, useRef, useCallback } from 'react';
+import { SUBMENU_CLOSE_DELAY } from '../constants';
+export const useSubmenuHover = () => {
+    const [hoveredColumn, setHoveredColumn] = useState(null);
+    const [anchorEl, setAnchorEl] = useState(null);
+    const closeTimeoutRef = useRef(null);
+    const openSubmenu = useCallback((columnName, element) => {
+        if (closeTimeoutRef.current) {
+            clearTimeout(closeTimeoutRef.current);
+            closeTimeoutRef.current = null;
+        }
+        setHoveredColumn(columnName);
+        setAnchorEl(element);
+    }, []);
+    const closeSubmenu = useCallback(() => {
+        closeTimeoutRef.current = setTimeout(() => {
+            setHoveredColumn(null);
+            setAnchorEl(null);
+        }, SUBMENU_CLOSE_DELAY);
+    }, []);
+    const cancelClose = useCallback(() => {
+        if (closeTimeoutRef.current) {
+            clearTimeout(closeTimeoutRef.current);
+            closeTimeoutRef.current = null;
+        }
+    }, []);
+    const forceClose = useCallback(() => {
+        if (closeTimeoutRef.current) {
+            clearTimeout(closeTimeoutRef.current);
+            closeTimeoutRef.current = null;
+        }
+        setHoveredColumn(null);
+        setAnchorEl(null);
+    }, []);
+    return {
+        hoveredColumn,
+        anchorEl,
+        openSubmenu,
+        closeSubmenu,
+        cancelClose,
+        forceClose,
+    };
+};

package/build/components/TableHeader/TableView/hooks/useViewSelector.d.ts

@@ -0,0 +1,60 @@
+import { type MouseEvent } from 'react';
+import type { ColumnViewProps, TableMode } from '../../../../types/index.js';
+import type { ViewMenuItem, LayoutSection, TemplateAPIMetadata } from '../types';
+import type { ViewOption } from '../../type';
+export interface UseViewSelectorProps {
+    mode: TableMode;
+    onViewChange?: (selectedView?: ViewMenuItem) => void;
+    onTableViewsChange?: (tableViews: ColumnViewProps[]) => void;
+    onCustomViewsChange?: (customViews: ViewMenuItem[]) => void;
+    onCreateCustomView?: (data: {
+        name: string;
+        selectedColumns: ColumnViewProps[];
+        layout: LayoutSection;
+    }) => Promise<void>;
+    onEditCustomView?: (viewId: string, data: {
+        name: string;
+        selectedColumns: ColumnViewProps[];
+        layout: LayoutSection;
+    }) => Promise<void>;
+    onDeleteCustomView?: (viewId: string) => Promise<void>;
+    resetTableViews?: (view: {
+        id: string;
+        label: string;
+    }) => void;
+    setTableViews?: (columns: ColumnViewProps[]) => void;
+    tableViews: ColumnViewProps[];
+    customViews: ViewMenuItem[];
+    defaultColumns: ColumnViewProps[];
+    defaultTemplate?: ViewMenuItem;
+    allTemplates: ViewMenuItem[];
+    setInternalCustomViews: (views: ViewMenuItem[]) => void;
+    apiMetadata?: TemplateAPIMetadata;
+}
+export declare const useViewSelector: ({ mode, onViewChange, onTableViewsChange, onCustomViewsChange, onCreateCustomView, onEditCustomView, onDeleteCustomView, resetTableViews, setTableViews, tableViews, customViews, defaultColumns, defaultTemplate, allTemplates, setInternalCustomViews, apiMetadata, }: UseViewSelectorProps) => {
+    anchorViewEl: HTMLDivElement | null;
+    defaultViewEl: HTMLDivElement | null;
+    setDefaultViewElement: import("react").Dispatch<import("react").SetStateAction<HTMLDivElement | null>>;
+    isCreateDialogOpen: boolean;
+    editingView: ViewMenuItem | null;
+    selectedViewInfo: ViewOption;
+    shouldUseCurrentState: boolean;
+    selectedView: ViewMenuItem | undefined;
+    currentViewColumns: ColumnViewProps[];
+    handleViewButtonClick: (event: MouseEvent<HTMLDivElement>) => void;
+    handleCloseViewDropdown: () => void;
+    handleSelectedViewInfo: (selected: ViewOption, viewMenuItem?: ViewMenuItem) => void;
+    handleOpenCreateDialog: (useCurrentState?: boolean) => void;
+    handleOpenEditDialog: (view: ViewMenuItem) => void;
+    handleCloseCreateDialog: () => void;
+    handleSaveView: (data: {
+        name: string;
+        selectedColumns: ColumnViewProps[];
+        layout: LayoutSection;
+    }) => Promise<void>;
+    handleDeleteView: (viewId: string) => Promise<void>;
+    handleResetViews: (views: string[]) => void;
+    handleTableViewsChange: (newTableViews: ColumnViewProps[]) => void;
+    updateSelectedView: (updatedView: ViewMenuItem) => void;
+    updateCurrentViewColumns: (columns: ColumnViewProps[]) => void;
+};