@tap-payments/os-micro-frontend-shared 0.1.376 → 0.1.377-test.1

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

@@ -0,0 +1,86 @@
+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,27 @@
+import { useState, useRef, useCallback } from 'react';
+export const useNestedSubmenu = () => {
+    const [hoveredNestedColumn, setHoveredNestedColumn] = useState(null);
+    const [nestedSubmenuAnchorEl, setNestedSubmenuAnchorEl] = useState(null);
+    const nestedCloseTimeoutRef = useRef(null);
+    const openNestedSubmenu = useCallback((columnName, element) => {
+        setHoveredNestedColumn(columnName);
+        setNestedSubmenuAnchorEl(element);
+    }, []);
+    const closeNestedSubmenu = useCallback(() => {
+        setHoveredNestedColumn(null);
+        setNestedSubmenuAnchorEl(null);
+    }, []);
+    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/useViewsManager.d.ts

@@ -0,0 +1,9 @@
+import type { ColumnViewProps } from '../../../../types/index.js';
+import type { UseViewsManagerProps, ViewMenuItem } from '../types';
+export declare const useViewsManager: ({ tableMode, templates, lang }: UseViewsManagerProps) => {
+    defaultTemplate: ViewMenuItem | undefined;
+    customViews: ViewMenuItem[];
+    allTemplates: ViewMenuItem[];
+    defaultColumns: ColumnViewProps[];
+    updateDefaultColumns: (columns: ColumnViewProps[]) => void;
+};

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

@@ -0,0 +1,62 @@
+import { useState, useEffect, useMemo, useCallback } from 'react';
+import { transformTemplatesToViewMenuItems, deepCloneColumns } from '../utils';
+export const useViewsManager = ({ tableMode, templates, lang = 'en' }) => {
+    const parsedTemplates = useMemo(() => {
+        if (!templates || templates.length === 0) {
+            return {
+                customViews: [],
+                defaultTemplate: undefined,
+                templateDefaultColumns: [],
+                allTemplates: [],
+            };
+        }
+        const { customViews, defaultTemplate } = transformTemplatesToViewMenuItems(templates, tableMode, lang);
+        const allTemplates = defaultTemplate ? [defaultTemplate, ...customViews] : customViews;
+        return {
+            customViews,
+            defaultTemplate,
+            templateDefaultColumns: (defaultTemplate === null || defaultTemplate === void 0 ? void 0 : defaultTemplate.submenu) || [],
+            allTemplates,
+        };
+    }, [templates, tableMode, lang]);
+    const [defaultColumns, setDefaultColumns] = useState([]);
+    const [initializedMode, setInitializedMode] = useState(null);
+    useEffect(() => {
+        if (initializedMode !== tableMode && parsedTemplates.templateDefaultColumns.length > 0) {
+            setDefaultColumns(deepCloneColumns(parsedTemplates.templateDefaultColumns));
+            setInitializedMode(tableMode);
+        }
+    }, [tableMode, parsedTemplates.templateDefaultColumns, initializedMode]);
+    const updateDefaultColumns = useCallback((columns) => {
+        setDefaultColumns(deepCloneColumns(columns));
+    }, []);
+    const updatedDefaultTemplate = useMemo(() => {
+        if (!parsedTemplates.defaultTemplate) {
+            return parsedTemplates.defaultTemplate;
+        }
+        const columnsToUse = initializedMode !== tableMode ? parsedTemplates.templateDefaultColumns : defaultColumns;
+        if (columnsToUse.length === 0) {
+            return parsedTemplates.defaultTemplate;
+        }
+        return Object.assign(Object.assign({}, parsedTemplates.defaultTemplate), { submenu: columnsToUse, columns: columnsToUse.map((col) => col.name) });
+    }, [parsedTemplates.defaultTemplate, parsedTemplates.templateDefaultColumns, defaultColumns, initializedMode, tableMode]);
+    const updatedAllTemplates = useMemo(() => {
+        if (!updatedDefaultTemplate) {
+            return parsedTemplates.customViews;
+        }
+        return [updatedDefaultTemplate, ...parsedTemplates.customViews];
+    }, [updatedDefaultTemplate, parsedTemplates.customViews]);
+    const effectiveDefaultColumns = useMemo(() => {
+        if (initializedMode !== tableMode && defaultColumns.length === 0) {
+            return parsedTemplates.templateDefaultColumns;
+        }
+        return defaultColumns.length > 0 ? defaultColumns : parsedTemplates.templateDefaultColumns;
+    }, [initializedMode, tableMode, defaultColumns, parsedTemplates.templateDefaultColumns]);
+    return {
+        defaultTemplate: updatedDefaultTemplate,
+        customViews: parsedTemplates.customViews,
+        allTemplates: updatedAllTemplates,
+        defaultColumns: effectiveDefaultColumns,
+        updateDefaultColumns,
+    };
+};

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

@@ -0,0 +1,44 @@
+import { type MouseEvent } from 'react';
+import type { ColumnViewProps, TableMode } from '../../../../types/index.js';
+import type { ViewMenuItem, LayoutSection } from '../types';
+import type { ViewOption } from '../../type';
+export interface UseViewsMenuProps {
+    mode: TableMode;
+    onViewChange?: (selectedView?: 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>;
+    defaultColumns: ColumnViewProps[];
+    defaultTemplate?: ViewMenuItem;
+    allTemplates: ViewMenuItem[];
+}
+export declare const useViewsMenu: ({ mode, onViewChange, onCreateCustomView, onEditCustomView, onDeleteCustomView, defaultColumns, defaultTemplate, allTemplates, }: UseViewsMenuProps) => {
+    anchorEl: 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>;
+    updateSelectedView: (updatedView: ViewMenuItem) => void;
+};

package/build/components/TableHeader/TableView/hooks/useViewsMenu.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, useRef } from 'react';
+import { deepCloneColumns } from '../utils';
+export const useViewsMenu = ({ mode, onViewChange, onCreateCustomView, onEditCustomView, onDeleteCustomView, defaultColumns, defaultTemplate, allTemplates, }) => {
+    const [anchorEl, setAnchorEl] = 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);
+    const [currentViewColumns, setCurrentViewColumns] = useState([]);
+    const hasInitializedRef = useRef(false);
+    const getViewForParent = useCallback((view) => {
+        var _a;
+        const selectedColumns = ((_a = view.submenu) === null || _a === void 0 ? void 0 : _a.filter((col) => col.selected)) || [];
+        return Object.assign(Object.assign({}, view), { submenu: selectedColumns, columns: selectedColumns.map((col) => col.name) });
+    }, []);
+    useEffect(() => {
+        if (hasInitializedRef.current)
+            return;
+        if (!defaultTemplate)
+            return;
+        setSelectedView(defaultTemplate);
+        setCurrentViewColumns(deepCloneColumns(defaultColumns));
+        onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(getViewForParent(defaultTemplate));
+        hasInitializedRef.current = true;
+    }, [defaultTemplate, defaultColumns, onViewChange, getViewForParent]);
+    useEffect(() => {
+        if (!hasInitializedRef.current)
+            return;
+        if ((selectedView === null || selectedView === void 0 ? void 0 : selectedView.default) && defaultColumns.length > 0) {
+            setCurrentViewColumns(deepCloneColumns(defaultColumns));
+        }
+    }, [defaultColumns, selectedView === null || selectedView === void 0 ? void 0 : selectedView.default]);
+    const lastSyncedModeRef = useRef(null);
+    useEffect(() => {
+        if (!hasInitializedRef.current)
+            return;
+        if (!selectedView)
+            return;
+        const needsSync = lastSyncedModeRef.current !== mode;
+        if (!needsSync)
+            return;
+        if (selectedView.default) {
+            if (defaultColumns.length === 0)
+                return;
+            const newView = Object.assign(Object.assign({}, selectedView), { submenu: deepCloneColumns(defaultColumns), columns: defaultColumns.map((col) => col.name) });
+            setSelectedView(newView);
+            setCurrentViewColumns(deepCloneColumns(defaultColumns));
+            lastSyncedModeRef.current = mode;
+            onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(getViewForParent(newView));
+        }
+        else {
+            const updatedTemplate = allTemplates.find((t) => t.templateId === selectedView.templateId || t.id === selectedView.id);
+            if (updatedTemplate && updatedTemplate.submenu && updatedTemplate.submenu.length > 0) {
+                const newView = Object.assign(Object.assign({}, updatedTemplate), { submenu: deepCloneColumns(updatedTemplate.submenu) });
+                setSelectedView(newView);
+                setCurrentViewColumns(deepCloneColumns(updatedTemplate.submenu));
+                lastSyncedModeRef.current = mode;
+                onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(getViewForParent(newView));
+            }
+        }
+    }, [mode, defaultColumns, selectedView, allTemplates, onViewChange]);
+    useEffect(() => {
+        if (!hasInitializedRef.current)
+            return;
+        if (!selectedView)
+            return;
+        const updatedTemplate = allTemplates.find((t) => {
+            const templateId = t.templateId || t.id;
+            const selectedId = selectedView.templateId || selectedView.id;
+            return templateId === selectedId;
+        });
+        if (!updatedTemplate)
+            return;
+        const currentSubmenu = selectedView.submenu || [];
+        const updatedSubmenu = updatedTemplate.submenu || [];
+        const hasChanged = currentSubmenu.length !== updatedSubmenu.length ||
+            currentSubmenu.some((col, idx) => {
+                const updatedCol = updatedSubmenu[idx];
+                if (!updatedCol)
+                    return true;
+                return col.selected !== updatedCol.selected || col.name !== updatedCol.name;
+            });
+        if (hasChanged) {
+            const fullView = Object.assign(Object.assign({}, updatedTemplate), { submenu: deepCloneColumns(updatedTemplate.submenu || []) });
+            setSelectedView(fullView);
+            setCurrentViewColumns(deepCloneColumns(updatedTemplate.submenu || []));
+            const viewForParent = getViewForParent(fullView);
+            onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(viewForParent);
+        }
+    }, [allTemplates, selectedView, onViewChange]);
+    const handleViewButtonClick = useCallback((event) => {
+        setAnchorEl((current) => (current ? null : event.currentTarget));
+    }, []);
+    const handleCloseViewDropdown = useCallback(() => {
+        setAnchorEl(null);
+    }, []);
+    const handleSelectedViewInfo = useCallback((selected, viewMenuItem) => {
+        setSelectedViewInfo(selected);
+        const newSelectedView = viewMenuItem || undefined;
+        setSelectedView(newSelectedView);
+        setCurrentViewColumns(deepCloneColumns((newSelectedView === null || newSelectedView === void 0 ? void 0 : newSelectedView.submenu) || []));
+        onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(newSelectedView ? getViewForParent(newSelectedView) : undefined);
+        handleCloseViewDropdown();
+    }, [handleCloseViewDropdown, onViewChange, getViewForParent]);
+    const updateSelectedView = useCallback((updatedView) => {
+        const viewWithNewRefs = Object.assign(Object.assign({}, updatedView), { submenu: updatedView.submenu ? [...updatedView.submenu] : undefined, columns: updatedView.columns ? [...updatedView.columns] : undefined });
+        setSelectedView(viewWithNewRefs);
+        setCurrentViewColumns(deepCloneColumns(viewWithNewRefs.submenu || []));
+        setSelectedViewInfo({ id: viewWithNewRefs.id, label: viewWithNewRefs.label });
+        onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(getViewForParent(viewWithNewRefs));
+    }, [onViewChange, getViewForParent]);
+    const handleOpenCreateDialog = useCallback((useCurrentState = false) => {
+        setEditingView(null);
+        setShouldUseCurrentState(useCurrentState);
+        setIsCreateDialogOpen(true);
+        setAnchorEl(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* () {
+        if (editingView) {
+            const templateId = editingView.templateId || editingView.id;
+            yield (onEditCustomView === null || onEditCustomView === void 0 ? void 0 : onEditCustomView(templateId, data));
+        }
+        else {
+            yield (onCreateCustomView === null || onCreateCustomView === void 0 ? void 0 : onCreateCustomView(data));
+        }
+    }), [editingView, onEditCustomView, onCreateCustomView]);
+    const handleDeleteView = useCallback((viewId) => __awaiter(void 0, void 0, void 0, function* () {
+        const viewToDelete = allTemplates.find((view) => view.id === viewId || view.templateId === viewId);
+        const templateId = (viewToDelete === null || viewToDelete === void 0 ? void 0 : viewToDelete.templateId) || viewId;
+        yield (onDeleteCustomView === null || onDeleteCustomView === void 0 ? void 0 : onDeleteCustomView(templateId));
+        if ((selectedView === null || selectedView === void 0 ? void 0 : selectedView.id) === viewId || (selectedView === null || selectedView === void 0 ? void 0 : selectedView.templateId) === viewId) {
+            setSelectedView(defaultTemplate);
+            setCurrentViewColumns(deepCloneColumns(defaultColumns));
+            if (defaultTemplate) {
+                onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(getViewForParent(defaultTemplate));
+            }
+        }
+    }), [allTemplates, onDeleteCustomView, selectedView, defaultTemplate, defaultColumns, onViewChange, getViewForParent]);
+    return {
+        anchorEl,
+        isCreateDialogOpen,
+        editingView,
+        selectedViewInfo,
+        shouldUseCurrentState,
+        selectedView,
+        currentViewColumns,
+        handleViewButtonClick,
+        handleCloseViewDropdown,
+        handleSelectedViewInfo,
+        handleOpenCreateDialog,
+        handleOpenEditDialog,
+        handleCloseCreateDialog,
+        handleSaveView,
+        handleDeleteView,
+        updateSelectedView,
+    };
+};

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

@@ -1,3 +1,12 @@
-import TableView from './TableView';
-export * from './TableView';
-export default TableView;
+export { default } from './TableView';
+export { default as TableView } from './TableView';
+export { default as DefaultViews } from './DefaultViews';
+export { default as CustomViews } from './CustomViews';
+export { default as ViewsMenu } from './ViewsMenu';
+export { default as ViewsDropdown } from './ViewsDropdown';
+export { default as CreateViewDialog } from './CreateViewDialog';
+export type { ViewMenuItem, CreateCustomViewDialogProps, LayoutSection, ColumnItem, FieldItem, Template, CreateTemplatePayload, UpdateTemplatePayload, } from './types';
+export { transformLayoutToColumns, getColumnsByMode, createCustomViewMenuItem, setViewAsDefault, transformTemplatesToViewMenuItems, convertColumnsToLayoutSection, isDateColumn, getColumnCheckState, } from './utils';
+export { useSubmenuHover, useViewsManager, useViewsMenu } from './hooks';
+export { DIALOG_WIDTH, DIALOG_HEIGHT, MAX_CUSTOM_VIEWS, TEMPLATE_NAME_MAX_LENGTH } from './constants';
+export { defaultViewList, advancedColumns, sheetColumns } from './data';

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

@@ -1,3 +1,11 @@
-import TableView from './TableView';
-export * from './TableView';
-export default TableView;
+export { default } from './TableView';
+export { default as TableView } from './TableView';
+export { default as DefaultViews } from './DefaultViews';
+export { default as CustomViews } from './CustomViews';
+export { default as ViewsMenu } from './ViewsMenu';
+export { default as ViewsDropdown } from './ViewsDropdown';
+export { default as CreateViewDialog } from './CreateViewDialog';
+export { transformLayoutToColumns, getColumnsByMode, createCustomViewMenuItem, setViewAsDefault, transformTemplatesToViewMenuItems, convertColumnsToLayoutSection, isDateColumn, getColumnCheckState, } from './utils';
+export { useSubmenuHover, useViewsManager, useViewsMenu } from './hooks';
+export { DIALOG_WIDTH, DIALOG_HEIGHT, MAX_CUSTOM_VIEWS, TEMPLATE_NAME_MAX_LENGTH } from './constants';
+export { defaultViewList, advancedColumns, sheetColumns } from './data';