@tap-payments/os-micro-frontend-shared 0.1.372-test.4 → 0.1.373-test.1

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,56 @@
+import { type MouseEvent } from 'react';
+import type { ColumnViewProps } from '../../../../types/index.js';
+import type { ViewMenuItem, LayoutSection, ViewMode } from '../types';
+import type { ViewOption } from '../../type';
+export interface UseViewSelectorProps {
+    mode: ViewMode;
+    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;
+    setInternalCustomViews: (views: ViewMenuItem[]) => void;
+    setInternalTableViews: (views: ColumnViewProps[]) => void;
+}
+export declare const useViewSelector: ({ mode, onViewChange, onTableViewsChange, onCustomViewsChange, onCreateCustomView, onEditCustomView, onDeleteCustomView, resetTableViews, setTableViews, tableViews, customViews, defaultColumns, defaultTemplate, setInternalCustomViews, setInternalTableViews, }: 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;
+    handleViewButtonClick: (event: MouseEvent<HTMLDivElement>) => void;
+    handleCloseViewDropdown: () => void;
+    handleClose: () => 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;
+};

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

@@ -0,0 +1,177 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { useState, useCallback, useEffect } from 'react';
+import { createCustomViewMenuItem } from '../utils';
+export const useViewSelector = ({ mode, onViewChange, onTableViewsChange, onCustomViewsChange, onCreateCustomView, onEditCustomView, onDeleteCustomView, resetTableViews, setTableViews, tableViews, customViews, defaultColumns, defaultTemplate, setInternalCustomViews, setInternalTableViews, }) => {
+    const [anchorViewEl, setAnchorViewEl] = useState(null);
+    const [defaultViewEl, setDefaultViewElement] = useState(null);
+    const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
+    const [editingView, setEditingView] = useState(null);
+    const [selectedViewInfo, setSelectedViewInfo] = useState({ id: 'default', label: 'Default' });
+    const [shouldUseCurrentState, setShouldUseCurrentState] = useState(false);
+    const [selectedView, setSelectedView] = useState(undefined);
+    // Update editingView when customViews changes to ensure it reflects the latest saved state
+    useEffect(() => {
+        if (editingView && customViews.length > 0) {
+            const updatedView = customViews.find((view) => view.id === editingView.id);
+            if (updatedView && updatedView !== editingView) {
+                setEditingView(updatedView);
+            }
+        }
+    }, [customViews, editingView]);
+    // Update selectedView when customViews changes to ensure it reflects the latest saved state
+    useEffect(() => {
+        if (selectedView && selectedView.isCustom && customViews.length > 0) {
+            const updatedView = customViews.find((view) => view.id === selectedView.id);
+            if (updatedView) {
+                // Compare submenu to detect changes (deep comparison would be better, but this works for now)
+                const submenuChanged = JSON.stringify(updatedView.submenu) !== JSON.stringify(selectedView.submenu);
+                const labelChanged = updatedView.label !== selectedView.label;
+                if (submenuChanged || labelChanged) {
+                    // Create a new object reference to ensure React detects the change
+                    const newSelectedView = Object.assign(Object.assign({}, updatedView), { submenu: updatedView.submenu ? [...updatedView.submenu] : undefined });
+                    setSelectedView(newSelectedView);
+                    onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(newSelectedView);
+                }
+            }
+        }
+    }, [customViews, selectedView, onViewChange]);
+    // Notify parent of initial view on mount
+    useEffect(() => {
+        // Use defaultTemplate if available, otherwise undefined (built-in default view)
+        const initialView = defaultTemplate || undefined;
+        console.log('initialView', initialView);
+        setSelectedView(initialView);
+        onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(initialView);
+    }, [onViewChange, defaultTemplate]);
+    const handleTableViewsChange = useCallback((newTableViews) => {
+        const setTableViewsState = setTableViews !== null && setTableViews !== void 0 ? setTableViews : setInternalTableViews;
+        setTableViewsState(newTableViews);
+        onTableViewsChange === null || onTableViewsChange === void 0 ? void 0 : onTableViewsChange(newTableViews);
+    }, [setTableViews, setInternalTableViews, onTableViewsChange]);
+    const handleCustomViewsChange = useCallback((newCustomViews) => {
+        setInternalCustomViews(newCustomViews);
+        onCustomViewsChange === null || onCustomViewsChange === void 0 ? void 0 : onCustomViewsChange(newCustomViews);
+    }, [setInternalCustomViews, onCustomViewsChange]);
+    const handleViewButtonClick = useCallback((event) => {
+        setAnchorViewEl(event.currentTarget);
+        setDefaultViewElement(event.currentTarget);
+    }, []);
+    const handleCloseViewDropdown = useCallback(() => {
+        setDefaultViewElement(null);
+    }, []);
+    const handleClose = useCallback(() => {
+        setAnchorViewEl(null);
+        setDefaultViewElement(null);
+        setSelectedViewInfo({ label: 'Default', id: 'default' });
+    }, []);
+    const handleSelectedViewInfo = useCallback((selected, viewMenuItem) => {
+        setSelectedViewInfo(selected);
+        // Update selected view and notify parent
+        const newSelectedView = viewMenuItem || undefined;
+        console.log('newSelectedView', newSelectedView);
+        setSelectedView(newSelectedView);
+        onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(newSelectedView);
+        handleCloseViewDropdown();
+    }, [handleCloseViewDropdown, onViewChange]);
+    const handleOpenCreateDialog = useCallback((useCurrentState = false) => {
+        setEditingView(null);
+        setShouldUseCurrentState(useCurrentState);
+        setIsCreateDialogOpen(true);
+        setDefaultViewElement(null);
+    }, []);
+    const handleOpenEditDialog = useCallback((view) => {
+        setEditingView(view);
+        setShouldUseCurrentState(true);
+        setIsCreateDialogOpen(true);
+    }, []);
+    const handleCloseCreateDialog = useCallback(() => {
+        setIsCreateDialogOpen(false);
+        setEditingView(null);
+        setShouldUseCurrentState(false);
+    }, []);
+    const handleSaveView = useCallback((data) => __awaiter(void 0, void 0, void 0, function* () {
+        try {
+            if (editingView) {
+                yield (onEditCustomView === null || onEditCustomView === void 0 ? void 0 : onEditCustomView(editingView.id, data));
+                // Update state after promise resolves successfully
+                const updatedView = Object.assign(Object.assign({}, editingView), { label: data.name, columns: data.selectedColumns.map((col) => col.name), submenu: data.selectedColumns });
+                const updatedViews = customViews.map((view) => (view.id === editingView.id ? updatedView : view));
+                handleCustomViewsChange(updatedViews);
+                // If the updated view is currently selected, update selectedView to reflect changes
+                // Create a new object reference to ensure React detects the change
+                if ((selectedView === null || selectedView === void 0 ? void 0 : selectedView.id) === editingView.id) {
+                    const newSelectedView = Object.assign(Object.assign({}, updatedView), { submenu: [...updatedView.submenu] });
+                    setSelectedView(newSelectedView);
+                    onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(newSelectedView);
+                }
+            }
+            else {
+                yield (onCreateCustomView === null || onCreateCustomView === void 0 ? void 0 : onCreateCustomView(data));
+                // Update state after promise resolves successfully
+                const newView = createCustomViewMenuItem(data.name, data.selectedColumns);
+                const updatedViews = [...customViews, newView];
+                handleCustomViewsChange(updatedViews);
+            }
+        }
+        catch (error) {
+            // Error will be handled by the toast in CreateViewDialog
+            throw error;
+        }
+    }), [editingView, customViews, handleCustomViewsChange, onEditCustomView, onCreateCustomView, selectedView, onViewChange]);
+    const handleDeleteView = useCallback((viewId) => __awaiter(void 0, void 0, void 0, function* () {
+        try {
+            yield (onDeleteCustomView === null || onDeleteCustomView === void 0 ? void 0 : onDeleteCustomView(viewId));
+            // Update state after promise resolves successfully
+            const updatedViews = customViews.filter((view) => view.id !== viewId);
+            handleCustomViewsChange(updatedViews);
+            // If the deleted view was selected, reset to default
+            if ((selectedView === null || selectedView === void 0 ? void 0 : selectedView.id) === viewId) {
+                setSelectedView(undefined);
+                onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(undefined);
+            }
+        }
+        catch (error) {
+            // Error will be handled by the toast in CreateViewDialog
+            throw error;
+        }
+    }), [customViews, handleCustomViewsChange, onDeleteCustomView, selectedView, onViewChange]);
+    const handleResetViews = useCallback((views) => {
+        if (resetTableViews) {
+            resetTableViews({ id: views[0], label: views[0] });
+        }
+        else {
+            // Reset to default columns from templates
+            handleTableViewsChange([...defaultColumns]);
+        }
+    }, [resetTableViews, defaultColumns, handleTableViewsChange]);
+    return {
+        // State
+        anchorViewEl,
+        defaultViewEl,
+        setDefaultViewElement,
+        isCreateDialogOpen,
+        editingView,
+        selectedViewInfo,
+        shouldUseCurrentState,
+        // Handlers
+        handleViewButtonClick,
+        handleCloseViewDropdown,
+        handleClose,
+        handleSelectedViewInfo,
+        handleOpenCreateDialog,
+        handleOpenEditDialog,
+        handleCloseCreateDialog,
+        handleSaveView,
+        handleDeleteView,
+        handleResetViews,
+        handleTableViewsChange,
+    };
+};

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { ColumnViewProps } from '../../../../types/index.js';
+import type { UseViewsManagerProps, ViewMenuItem } from '../types';
+export declare const useViewsManager: ({ mode, templates, lang }: UseViewsManagerProps) => {
+    defaultColumns: ColumnViewProps[];
+    setDefaultColumns: import("react").Dispatch<import("react").SetStateAction<ColumnViewProps[]>>;
+    internalTableViews: ColumnViewProps[];
+    setInternalTableViews: import("react").Dispatch<import("react").SetStateAction<ColumnViewProps[]>>;
+    internalCustomViews: ViewMenuItem[];
+    setInternalCustomViews: import("react").Dispatch<import("react").SetStateAction<ViewMenuItem[]>>;
+    defaultTemplate: ViewMenuItem | undefined;
+};