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

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

@@ -1,5 +1,14 @@
+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 { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { memo } from 'react';
+import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import ClickAwayListener from '@mui/material/ClickAwayListener';
 import { Icon, StyledButton } from '../../index.js';
@@ -11,17 +20,51 @@ import { useViewsManager } from './hooks';
 import { useViewSelector } from './hooks/useViewSelector';
 function ViewSelector({ onViewChange, setIsViewVisible, setTableViews, tableViews: externalTableViews, resetTableViews, customViews: externalCustomViews, onCreateCustomView, onEditCustomView, onDeleteCustomView, tableMode = 'default', onTableViewsChange, onCustomViewsChange, templates, lang = 'en', apiMetadata, }) {
     const { t } = useTranslation();
-    // Map tableMode to viewMode: 'sheet' → 'sheet', 'default' → 'advanced'
-    const mode = tableMode === 'sheet' ? 'sheet' : 'advanced';
-    const { defaultColumns, setDefaultColumns, internalTableViews, setInternalTableViews, internalCustomViews, setInternalCustomViews, defaultTemplate, } = useViewsManager({
-        mode,
+    // Use tableMode directly - no conversion needed
+    const { defaultColumns, updateDefaultColumns, defaultTemplate, customViews: internalCustomViews, allTemplates, setInternalCustomViews, } = useViewsManager({
+        tableMode,
         templates,
         lang,
     });
-    const tableViews = externalTableViews !== null && externalTableViews !== void 0 ? externalTableViews : internalTableViews;
     const customViews = externalCustomViews !== null && externalCustomViews !== void 0 ? externalCustomViews : internalCustomViews;
-    const { anchorViewEl, defaultViewEl, setDefaultViewElement, isCreateDialogOpen, editingView, selectedViewInfo, shouldUseCurrentState, handleViewButtonClick, handleCloseViewDropdown, handleSelectedViewInfo, handleOpenCreateDialog, handleOpenEditDialog, handleCloseCreateDialog, handleSaveView, handleDeleteView, handleResetViews, handleTableViewsChange, updateSelectedView, } = useViewSelector({
-        mode,
+    // Callback when default template is modified and saved
+    const handleSaveDefaultColumns = useCallback((columns) => __awaiter(this, void 0, void 0, function* () {
+        if (!(defaultTemplate === null || defaultTemplate === void 0 ? void 0 : defaultTemplate.templateId))
+            return;
+        // Update local state first
+        updateDefaultColumns(columns);
+        // Build layout for API
+        // Map TableMode to layout section code: 'default' → 'Advanced', 'sheet' → 'Sheet'
+        const layout = {
+            code: tableMode === 'sheet' ? 'Sheet' : 'Advanced',
+            columns: columns.map((col, idx) => {
+                var _a, _b;
+                return ({
+                    code: col.name,
+                    name: [{ text: typeof col.label === 'string' ? col.label : col.name, lang }],
+                    order: idx + 1,
+                    default: (_a = col.selected) !== null && _a !== void 0 ? _a : false,
+                    fields: (_b = col.menuItems) === null || _b === void 0 ? void 0 : _b.map((item) => {
+                        var _a;
+                        return ({
+                            code: item.name,
+                            name: [{ text: typeof item.label === 'string' ? item.label : item.name, lang }],
+                            order: null,
+                            default: (_a = item.selected) !== null && _a !== void 0 ? _a : false,
+                        });
+                    }),
+                });
+            }),
+        };
+        // Call parent to persist
+        yield (onEditCustomView === null || onEditCustomView === void 0 ? void 0 : onEditCustomView(defaultTemplate.templateId, {
+            name: defaultTemplate.label,
+            selectedColumns: columns,
+            layout,
+        }));
+    }), [defaultTemplate, tableMode, lang, onEditCustomView, updateDefaultColumns]);
+    const { anchorViewEl, defaultViewEl, setDefaultViewElement, isCreateDialogOpen, editingView, selectedViewInfo, shouldUseCurrentState, currentViewColumns, handleViewButtonClick, handleCloseViewDropdown, handleSelectedViewInfo, handleOpenCreateDialog, handleOpenEditDialog, handleCloseCreateDialog, handleSaveView, handleDeleteView, handleResetViews, handleTableViewsChange, updateSelectedView, updateCurrentViewColumns, } = useViewSelector({
+        mode: tableMode,
         onViewChange,
         onTableViewsChange,
         onCustomViewsChange,
@@ -30,17 +73,16 @@ function ViewSelector({ onViewChange, setIsViewVisible, setTableViews, tableView
         onDeleteCustomView,
         resetTableViews,
         setTableViews,
-        tableViews,
+        tableViews: externalTableViews !== null && externalTableViews !== void 0 ? externalTableViews : [],
         customViews,
         defaultColumns,
         defaultTemplate,
+        allTemplates,
         setInternalCustomViews,
-        setInternalTableViews,
-        setDefaultColumns,
         apiMetadata,
     });
-    return (_jsxs(_Fragment, { children: [_jsx(ClickAwayListener, Object.assign({ onClickAway: handleCloseViewDropdown }, { children: _jsxs(ViewWrapper, Object.assign({ sx: { width: '32px' }, "data-testid": "ViewSelector" }, { children: [_jsx(StyledButton, Object.assign({ title: t('tableView'), "data-testid": "ViewSelector_button", onClick: handleViewButtonClick }, { children: _jsx(Icon, { src: viewIcon, alt: "view", sx: { width: 14, height: 14 } }) })), _jsx(ViewsDropdown, { open: Boolean(defaultViewEl), anchorEl: anchorViewEl, setSelectedViewInfo: handleSelectedViewInfo, selectedViewInfo: selectedViewInfo, onSelect: (e, selectedView) => {
+    return (_jsxs(_Fragment, { children: [_jsx(ClickAwayListener, Object.assign({ onClickAway: handleCloseViewDropdown }, { children: _jsxs(ViewWrapper, Object.assign({ sx: { width: '32px' }, "data-testid": "ViewSelector" }, { children: [_jsx(StyledButton, Object.assign({ title: t('tableView'), "data-testid": "ViewSelector_button", onClick: handleViewButtonClick }, { children: _jsx(Icon, { src: viewIcon, alt: "view", sx: { width: 14, height: 14 } }) })), _jsx(ViewsDropdown, { open: Boolean(defaultViewEl), anchorEl: anchorViewEl, setSelectedViewInfo: handleSelectedViewInfo, selectedViewInfo: selectedViewInfo, onSelect: (e) => {
                                 setDefaultViewElement(defaultViewEl ? null : e.currentTarget);
-                            }, setViews: handleResetViews, tableViews: tableViews, setTableViews: handleTableViewsChange, onCreateCustomView: handleOpenCreateDialog, customViews: customViews, onEditCustomView: handleOpenEditDialog, defaultColumns: defaultColumns, setDefaultColumns: setDefaultColumns, updateSelectedView: updateSelectedView })] })) })), _jsx(CreateViewDialog, { open: isCreateDialogOpen, onClose: handleCloseCreateDialog, availableColumns: defaultColumns, defaultColumns: defaultColumns, onCreate: handleSaveView, editingView: editingView, onDelete: handleDeleteView, tableViews: shouldUseCurrentState ? defaultColumns : undefined, mode: mode })] }));
+                            }, setViews: handleResetViews, onCreateCustomView: handleOpenCreateDialog, customViews: customViews, onEditCustomView: handleOpenEditDialog, onSaveDefaultColumns: handleSaveDefaultColumns, defaultColumns: defaultColumns, setDefaultColumns: updateDefaultColumns, updateSelectedView: updateSelectedView, mode: tableMode, defaultTemplate: defaultTemplate })] })) })), _jsx(CreateViewDialog, { open: isCreateDialogOpen, onClose: handleCloseCreateDialog, availableColumns: defaultColumns, defaultColumns: defaultColumns, onCreate: handleSaveView, editingView: editingView, onDelete: handleDeleteView, tableViews: shouldUseCurrentState ? currentViewColumns : undefined, mode: tableMode })] }));
 }
 export default memo(ViewSelector);

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

@@ -1,5 +1,5 @@
 import React from 'react';
 import type { ViewsDropdownProps } from './types';
-declare function ViewsDropdown({ open, selectedViewInfo, setSelectedViewInfo, onSelect, setViews, anchorEl, onCreateCustomView, customViews, onEditCustomView, defaultColumns, setDefaultColumns, updateSelectedView, }: Readonly<ViewsDropdownProps>): import("react/jsx-runtime").JSX.Element;
+declare function ViewsDropdown({ open, selectedViewInfo, setSelectedViewInfo, onSelect, setViews, anchorEl, onCreateCustomView, customViews, onEditCustomView, onSaveDefaultColumns, defaultColumns, setDefaultColumns, updateSelectedView, mode, defaultTemplate, }: Readonly<ViewsDropdownProps>): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof ViewsDropdown>;
 export default _default;

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

@@ -8,177 +8,136 @@ import Button from '@mui/material/Button';
 import { useTranslation } from 'react-i18next';
 import { bluePlusIcon, editIcon, smallBlueCheckIcon, blackRightArrowIcon } from '../../../constants/index.js';
 import { Menu, Tooltip } from '../../index.js';
-import { useSubmenuHover, useOriginalColumns, useNestedSubmenu } from './hooks';
+import { useSubmenuHover, useOriginalColumns } from './hooks';
 import { MAX_CUSTOM_VIEWS } from './constants';
-import { defaultViewList } from './data';
 import { ViewsSubmenu } from './components/ViewsSubmenu';
 import { ListStyled, DropdownStyled, MenuItem as StyledMenuItem, Space, SpaceAfter, SubmenuContainer, SaveCustomViewBox, SaveCustomViewInnerBox, ButtonsContainer, CancelButtonSx, OkayButtonSx, ModifiedTextSx, } from './styles';
 import { deepCloneColumns, toggleSingleColumn, toggleSubItem, getSubmenuItems, hasSubmenu, areAllCurrentColumnsSelected, areSomeCurrentColumnsSelected, toggleAllCurrentColumns, areColumnsEqual, } from './utils';
-function ViewsDropdown({ open, selectedViewInfo, setSelectedViewInfo, onSelect, setViews, anchorEl, onCreateCustomView, customViews = [], onEditCustomView, defaultColumns = [], setDefaultColumns, updateSelectedView, }) {
+function ViewsDropdown({ open, selectedViewInfo, setSelectedViewInfo, onSelect, setViews, anchorEl, onCreateCustomView, customViews = [], onEditCustomView, onSaveDefaultColumns, defaultColumns = [], setDefaultColumns, updateSelectedView, mode = 'default', defaultTemplate, }) {
     const { t } = useTranslation();
     const { hoveredColumn: hoveredItem, anchorEl: submenuAnchorEl, openSubmenu: handleMenuItemHover, closeSubmenu: handleMenuItemLeave, cancelClose: handleSubmenuEnter, forceClose: forceCloseSubmenu, } = useSubmenuHover();
     const [hoveredCustomView, setHoveredCustomView] = React.useState(null);
-    const [isDefaultModified, setIsDefaultModified] = React.useState(false);
-    const [baselineColumns, setBaselineColumns] = React.useState([]);
-    const [isOkayClicked, setIsOkayClicked] = React.useState(false);
-    const prevDefaultColumnsRef = React.useRef(defaultColumns);
+    const [isModified, setIsModified] = React.useState(false);
+    // Track original columns when submenu opens
     const { originalColumns, saveOriginalState, clearOriginalState } = useOriginalColumns(defaultColumns);
-    // Reset modification state when defaultColumns change (e.g., mode change)
-    React.useEffect(() => {
-        // Check if defaultColumns actually changed (new reference or different content)
-        if (prevDefaultColumnsRef.current !== defaultColumns) {
-            prevDefaultColumnsRef.current = defaultColumns;
-            setIsDefaultModified(false);
-            setBaselineColumns([]);
-            clearOriginalState();
+    // Build the view list (default template + custom views)
+    // Use actual defaultTemplate from props instead of static defaultViewList
+    const viewList = useMemo(() => {
+        const list = [];
+        if (defaultTemplate) {
+            list.push(defaultTemplate);
         }
-    }, [defaultColumns, clearOriginalState]);
-    // Wrapper to restore state when submenu closes without clicking Okay
-    const handleSubmenuLeave = () => {
-        // If submenu closes without clicking Okay, restore original state
-        if (!isOkayClicked && originalColumns.length > 0 && setDefaultColumns) {
-            const restoredColumns = deepCloneColumns(originalColumns);
-            setDefaultColumns(restoredColumns);
-            setIsDefaultModified(false);
-            setBaselineColumns([]);
-            clearOriginalState();
-        }
-        setIsOkayClicked(false);
-        forceCloseSubmenu();
-    };
-    const { hoveredNestedColumn, nestedSubmenuAnchorEl, openNestedSubmenu, closeNestedSubmenu, cancelNestedClose } = useNestedSubmenu();
-    // Default templates are merged into built-in Default view, so no need to sort
-    const viewList = [...defaultViewList, ...customViews];
+        return [...list, ...customViews];
+    }, [defaultTemplate, customViews]);
+    // Get columns for hovered submenu
+    const currentSubmenuColumns = useMemo(() => {
+        if (!hoveredItem)
+            return [];
+        const item = viewList.find((i) => i.id === hoveredItem);
+        return item ? getSubmenuItems(item, defaultColumns) : [];
+    }, [hoveredItem, defaultColumns, viewList]);
+    const allCurrentSelected = useMemo(() => areAllCurrentColumnsSelected(currentSubmenuColumns), [currentSubmenuColumns]);
+    const someCurrentSelected = useMemo(() => areSomeCurrentColumnsSelected(currentSubmenuColumns, allCurrentSelected), [currentSubmenuColumns, allCurrentSelected]);
+    // Check if columns have been modified from original
+    const hasChanges = useMemo(() => {
+        if (originalColumns.length === 0)
+            return false;
+        return !areColumnsEqual(defaultColumns, originalColumns);
+    }, [defaultColumns, originalColumns]);
+    // Handle clicking on a view item
     const handleViewClick = (item) => {
-        // Mark as if Okay was clicked to prevent restoring original state
-        // When clicking directly on a view item, user wants to apply the view as-is
-        setIsOkayClicked(true);
-        // Close submenu immediately when clicking on a view (don't wait for hover to end)
         forceCloseSubmenu();
-        // Clear original state since we're committing to this view
         clearOriginalState();
-        if (item.columns)
-            setViews === null || setViews === void 0 ? void 0 : setViews(item.columns);
-        // For default view, construct a complete view object with submenu (defaultColumns)
-        // For custom views, pass the view object as-is
         let viewToPass;
-        if (item.id === 'default') {
-            // Create a complete default view with current default columns
-            viewToPass = {
-                id: 'default',
-                label: item.label,
-                submenu: defaultColumns,
-                columns: defaultColumns.map((col) => col.name),
-            };
+        if (item.default) {
+            // For default template, use defaultColumns (which is the default template's working copy)
+            const columns = defaultColumns.length > 0 ? defaultColumns : (defaultTemplate === null || defaultTemplate === void 0 ? void 0 : defaultTemplate.submenu) || [];
+            viewToPass = Object.assign(Object.assign({}, item), { submenu: deepCloneColumns(columns), columns: columns.map((col) => col.name) });
         }
         else if (item.isCustom) {
             viewToPass = item;
         }
-        else {
-            viewToPass = undefined;
-        }
-        // Update selected view info with the view object - this will trigger view change
         setSelectedViewInfo(item, viewToPass);
     };
+    // Toggle column selection
     const toggleColumnSelection = (columnName) => {
         if (!setDefaultColumns)
             return;
         const newColumns = toggleSingleColumn(defaultColumns, columnName);
         setDefaultColumns(newColumns);
     };
+    // Toggle nested item
     const toggleNestedItem = (columnName, subItemName) => {
         if (!setDefaultColumns)
             return;
         const newColumns = toggleSubItem(defaultColumns, columnName, subItemName);
         setDefaultColumns(newColumns);
     };
-    const getHoveredSubmenu = () => {
-        if (!hoveredItem)
-            return [];
-        const item = viewList.find((i) => i.id === hoveredItem);
-        return item ? getSubmenuItems(item, defaultColumns) : [];
+    // Reorder columns
+    const handleReorder = (reorderedColumnNames) => {
+        if (!setDefaultColumns)
+            return;
+        const reorderedColumns = reorderedColumnNames
+            .map((name) => defaultColumns.find((column) => column.name === name))
+            .filter((column) => Boolean(column));
+        setDefaultColumns(reorderedColumns);
     };
-    const currentSubmenuColumns = useMemo(() => getHoveredSubmenu(), [hoveredItem, defaultColumns, viewList]);
-    const originalSubmenuColumns = useMemo(() => {
-        if (!hoveredItem || originalColumns.length === 0)
-            return [];
-        const item = viewList.find((i) => i.id === hoveredItem);
-        return item ? getSubmenuItems(item, originalColumns) : [];
-    }, [hoveredItem, originalColumns, viewList]);
-    const isSubmenuModified = useMemo(() => {
-        if (originalSubmenuColumns.length === 0)
-            return true;
-        return !areColumnsEqual(currentSubmenuColumns, originalSubmenuColumns);
-    }, [currentSubmenuColumns, originalSubmenuColumns]);
-    const allCurrentSelected = useMemo(() => areAllCurrentColumnsSelected(currentSubmenuColumns), [currentSubmenuColumns]);
-    const someCurrentSelected = useMemo(() => areSomeCurrentColumnsSelected(currentSubmenuColumns, allCurrentSelected), [currentSubmenuColumns, allCurrentSelected]);
+    // Select all columns
     const handleSelectAll = () => {
         if (!setDefaultColumns)
             return;
-        const shouldSelectAll = !allCurrentSelected;
-        const newColumns = toggleAllCurrentColumns(defaultColumns, shouldSelectAll);
+        const newColumns = toggleAllCurrentColumns(defaultColumns, !allCurrentSelected);
         setDefaultColumns(newColumns);
     };
+    // Reset to original
     const handleReset = () => {
         if (!setDefaultColumns || originalColumns.length === 0)
             return;
-        const restoredColumns = deepCloneColumns(originalColumns);
-        setDefaultColumns([...restoredColumns]);
-        setIsDefaultModified(false);
-        setBaselineColumns([]);
+        setDefaultColumns(deepCloneColumns(originalColumns));
     };
-    const handleSaveAsCustomView = (e) => {
-        e.stopPropagation();
-        setIsOkayClicked(true); // Mark that a valid action was taken, don't restore on close
+    // Open submenu
+    const handleOpenSubmenu = (itemId, element) => {
+        saveOriginalState();
+        handleMenuItemHover(itemId, element);
+    };
+    // Close submenu and restore if no changes saved
+    const handleSubmenuLeave = () => {
+        // Restore original columns if not saved
+        if (originalColumns.length > 0 && setDefaultColumns) {
+            setDefaultColumns(deepCloneColumns(originalColumns));
+        }
         clearOriginalState();
         forceCloseSubmenu();
-        onCreateCustomView === null || onCreateCustomView === void 0 ? void 0 : onCreateCustomView(true); // Use current state when saving from submenu
     };
+    // Cancel changes
     const handleCancel = () => {
         if (setDefaultColumns && originalColumns.length > 0) {
-            const restoredColumns = deepCloneColumns(originalColumns);
-            setDefaultColumns(restoredColumns);
-            // Reset modified state when canceling
-            setIsDefaultModified(false);
-            setBaselineColumns([]);
+            setDefaultColumns(deepCloneColumns(originalColumns));
         }
         clearOriginalState();
-        setIsOkayClicked(false);
         forceCloseSubmenu();
     };
+    // Save changes
     const handleOkay = () => {
-        if (originalColumns.length > 0) {
-            const hasChanges = !areColumnsEqual(defaultColumns, originalColumns);
-            setIsDefaultModified(hasChanges);
-            if (hasChanges) {
-                setBaselineColumns(deepCloneColumns(originalColumns));
-            }
-            else {
-                setBaselineColumns([]);
+        const isViewingDefault = selectedViewInfo.id === (defaultTemplate === null || defaultTemplate === void 0 ? void 0 : defaultTemplate.id);
+        if (hasChanges && isViewingDefault) {
+            // Save the modified columns
+            onSaveDefaultColumns === null || onSaveDefaultColumns === void 0 ? void 0 : onSaveDefaultColumns(defaultColumns);
+            setIsModified(true);
+            // Update the selected view
+            if (updateSelectedView && defaultTemplate) {
+                updateSelectedView(Object.assign(Object.assign({}, defaultTemplate), { submenu: deepCloneColumns(defaultColumns), columns: defaultColumns.map((col) => col.name) }));
             }
         }
-        // Always update selected view when Okay is clicked to ensure parent re-renders
-        if (selectedViewInfo.id === 'default' && defaultColumns.length > 0 && updateSelectedView) {
-            const defaultViewWithColumns = {
-                id: 'default',
-                label: selectedViewInfo.label || 'Default',
-                submenu: [...defaultColumns],
-                columns: defaultColumns.map((col) => col.name),
-            };
-            updateSelectedView(defaultViewWithColumns);
-        }
-        setIsOkayClicked(true); // Mark that Okay was clicked so we don't restore on close
         clearOriginalState();
         forceCloseSubmenu();
     };
-    const handleOpenSubmenu = (itemId, element) => {
-        saveOriginalState();
-        setIsOkayClicked(false); // Reset flag when opening submenu
-        if (itemId === 'default' && baselineColumns.length > 0) {
-            const hasChanges = !areColumnsEqual(defaultColumns, baselineColumns);
-            setIsDefaultModified(hasChanges);
-        }
-        handleMenuItemHover(itemId, element);
+    // Save as custom view
+    const handleSaveAsCustomView = (e) => {
+        e.stopPropagation();
+        clearOriginalState();
+        forceCloseSubmenu();
+        onCreateCustomView === null || onCreateCustomView === void 0 ? void 0 : onCreateCustomView(true);
     };
     const shouldDimNewCustomView = customViews.length >= MAX_CUSTOM_VIEWS;
     return (_jsxs(DropdownStyled, Object.assign({ "data-testid": "ViewsDropdown" }, { children: [_jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: "bottom-start" }, { children: _jsxs(ListStyled, { children: [_jsx(Typography, Object.assign({ sx: {
@@ -201,14 +160,7 @@ function ViewsDropdown({ open, selectedViewInfo, setSelectedViewInfo, onSelect,
                                 else if (hasSubmenu(item, defaultColumns)) {
                                     handleMenuItemLeave();
                                 }
-                            }, onClick: () => handleViewClick(item), sx: {
-                                position: 'relative',
-                                cursor: 'pointer',
-                                pr: 1.5,
-                            } }, { children: [item.id === selectedViewInfo.id ? (_jsx("img", { style: {
-                                        width: 15,
-                                        height: 15,
-                                    }, className: "check-icon", src: smallBlueCheckIcon, alt: "check" })) : (_jsx(Space, {})), _jsxs("span", Object.assign({ style: { flex: 1, fontSize: 11 } }, { children: [item.label, item.id === 'default' && isDefaultModified && _jsx("span", Object.assign({ style: ModifiedTextSx }, { children: "(Modified)" }))] })), item.isCustom && hoveredCustomView === item.id && (_jsx("img", { src: editIcon, alt: "edit", style: { width: 12, height: 12, cursor: 'pointer' }, onClick: (e) => {
+                            }, onClick: () => handleViewClick(item), sx: { position: 'relative', cursor: 'pointer', pr: 1.5 } }, { children: [item.id === selectedViewInfo.id ? _jsx("img", { style: { width: 15, height: 15 }, src: smallBlueCheckIcon, alt: "check" }) : _jsx(Space, {}), _jsxs("span", Object.assign({ style: { flex: 1, fontSize: 11 } }, { children: [item.label, item.default && item.id === selectedViewInfo.id && isModified && _jsx("span", Object.assign({ style: ModifiedTextSx }, { children: "(Modified)" }))] })), item.isCustom && hoveredCustomView === item.id && (_jsx("img", { src: editIcon, alt: "edit", style: { width: 12, height: 12, cursor: 'pointer' }, onClick: (e) => {
                                         e.stopPropagation();
                                         onEditCustomView === null || onEditCustomView === void 0 ? void 0 : onEditCustomView(item);
                                     } })), !item.isCustom && hasSubmenu(item, defaultColumns) && _jsx("img", { src: blackRightArrowIcon, alt: "arrow", style: { height: 12 } })] }), item.id))), _jsx(Tooltip, Object.assign({ title: "Limit reached. Delete a view to create a new one.", placement: "left", disableHoverListener: !shouldDimNewCustomView }, { children: _jsxs(StyledMenuItem, Object.assign({ sx: {
@@ -222,22 +174,11 @@ function ViewsDropdown({ open, selectedViewInfo, setSelectedViewInfo, onSelect,
                                     }
                                     e.stopPropagation();
                                     handleSubmenuLeave();
-                                    onCreateCustomView === null || onCreateCustomView === void 0 ? void 0 : onCreateCustomView(false); // Don't use current state for "New Custom View"
-                                } }, { children: [_jsx(Space, {}), _jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: 0.5 } }, { children: [_jsx("img", { src: bluePlusIcon, alt: "icon", style: { opacity: shouldDimNewCustomView ? 0.5 : 1, width: 10, height: 10 } }), _jsx("span", Object.assign({ style: { color: shouldDimNewCustomView ? '#999' : '#1F88D0', fontSize: 11, fontWeight: 500 } }, { children: t('New Custom View') }))] })), _jsx(SpaceAfter, {})] })) }))] }) })), hoveredItem && submenuAnchorEl && getHoveredSubmenu().length > 0 && (_jsx(Menu, Object.assign({ open: Boolean(hoveredItem), anchorEl: submenuAnchorEl, placement: "auto-end", onMouseEnter: handleSubmenuEnter, onMouseLeave: handleSubmenuLeave, modifiers: [
-                    {
-                        name: 'offset',
-                        options: {
-                            offset: [-4, 0],
-                        },
-                    },
-                    {
-                        name: 'preventOverflow',
-                        enabled: true,
-                    },
-                    {
-                        name: 'flip',
-                        enabled: true,
-                    },
-                ] }, { children: _jsxs(SubmenuContainer, { children: [_jsx(ViewsSubmenu, { columns: getHoveredSubmenu(), allCurrentSelected: allCurrentSelected, someCurrentSelected: someCurrentSelected, onSelectAll: handleSelectAll, onReset: handleReset, onColumnToggle: toggleColumnSelection, onNestedItemToggle: toggleNestedItem, anchorEl: submenuAnchorEl, isModified: isSubmenuModified }), _jsx(SaveCustomViewBox, { children: _jsx(Tooltip, Object.assign({ title: "Limit reached. Delete a view to create a new one.", placement: "left", disableHoverListener: !shouldDimNewCustomView }, { children: _jsxs(SaveCustomViewInnerBox, Object.assign({ disabled: shouldDimNewCustomView, onClick: shouldDimNewCustomView ? undefined : handleSaveAsCustomView }, { children: [_jsx(Typography, Object.assign({ sx: { fontSize: 11, color: 'text.secondary' } }, { children: "Save as a custom view" })), _jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: 0.5 } }, { children: [_jsx("img", { src: bluePlusIcon, alt: "add", style: { width: 10, height: 10, opacity: shouldDimNewCustomView ? 0.5 : 1 } }), _jsx(Typography, Object.assign({ sx: { fontSize: 10, fontWeight: 600, color: shouldDimNewCustomView ? '#999' : '#1F88D0' } }, { children: "Custom View" }))] }))] })) })) }), _jsxs(ButtonsContainer, { children: [_jsx(Button, Object.assign({ variant: "text", onClick: handleCancel, sx: CancelButtonSx }, { children: "Cancel" })), _jsx(Button, Object.assign({ variant: "contained", onClick: handleOkay, sx: OkayButtonSx }, { children: "Okay" }))] })] }) })))] })));
+                                    onCreateCustomView === null || onCreateCustomView === void 0 ? void 0 : onCreateCustomView(false);
+                                } }, { children: [_jsx(Space, {}), _jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: 0.5 } }, { children: [_jsx("img", { src: bluePlusIcon, alt: "icon", style: { opacity: shouldDimNewCustomView ? 0.5 : 1, width: 10, height: 10 } }), _jsx("span", Object.assign({ style: { color: shouldDimNewCustomView ? '#999' : '#1F88D0', fontSize: 11, fontWeight: 500 } }, { children: t('New Custom View') }))] })), _jsx(SpaceAfter, {})] })) }))] }) })), hoveredItem && submenuAnchorEl && currentSubmenuColumns.length > 0 && (_jsx(Menu, Object.assign({ open: Boolean(hoveredItem), anchorEl: submenuAnchorEl, placement: "auto-end", onMouseEnter: handleSubmenuEnter, onMouseLeave: handleSubmenuLeave, modifiers: [
+                    { name: 'offset', options: { offset: [-4, 0] } },
+                    { name: 'preventOverflow', enabled: true },
+                    { name: 'flip', enabled: true },
+                ] }, { children: _jsxs(SubmenuContainer, { children: [_jsx(ViewsSubmenu, { columns: currentSubmenuColumns, allCurrentSelected: allCurrentSelected, someCurrentSelected: someCurrentSelected, onSelectAll: handleSelectAll, onReset: handleReset, onColumnToggle: toggleColumnSelection, onNestedItemToggle: toggleNestedItem, onReorder: handleReorder, anchorEl: submenuAnchorEl, isModified: hasChanges }), _jsx(SaveCustomViewBox, { children: _jsx(Tooltip, Object.assign({ title: "Limit reached. Delete a view to create a new one.", placement: "left", disableHoverListener: !shouldDimNewCustomView }, { children: _jsxs(SaveCustomViewInnerBox, Object.assign({ disabled: shouldDimNewCustomView, onClick: shouldDimNewCustomView ? undefined : handleSaveAsCustomView }, { children: [_jsx(Typography, Object.assign({ sx: { fontSize: 11, color: 'text.secondary' } }, { children: "Save as a custom view" })), _jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: 0.5 } }, { children: [_jsx("img", { src: bluePlusIcon, alt: "add", style: { width: 10, height: 10, opacity: shouldDimNewCustomView ? 0.5 : 1 } }), _jsx(Typography, Object.assign({ sx: { fontSize: 10, fontWeight: 600, color: shouldDimNewCustomView ? '#999' : '#1F88D0' } }, { children: "Custom View" }))] }))] })) })) }), _jsxs(ButtonsContainer, { children: [_jsx(Button, Object.assign({ variant: "text", onClick: handleCancel, sx: CancelButtonSx }, { children: "Cancel" })), _jsx(Button, Object.assign({ variant: "contained", onClick: handleOkay, sx: OkayButtonSx }, { children: "Okay" }))] })] }) })))] })));
 }
 export default React.memo(ViewsDropdown);

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

@@ -1,13 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React from 'react';
+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 } from '../utils';
+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, anchorEl, isModified = false, }) => {
+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();
@@ -28,25 +30,42 @@ export const ViewsSubmenu = ({ columns, allCurrentSelected, someCurrentSelected,
                             '&:hover': {
                                 textDecoration: 'underline',
                             },
-                        } }, { children: "Reset" }))] }), _jsx(Divider, {}), _jsx(ColumnItemsContainer, { children: columns.map((column, columnIndex) => {
-                    var _a;
-                    const hasNestedSubmenu = column.menuItems && column.menuItems.length > 0;
-                    const { checked, indeterminate } = getColumnCheckState(column);
-                    return (_jsxs(React.Fragment, { 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: "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));
-                }) })] }));
+                                            ] }, { 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/hooks/useViewSelector.d.ts

@@ -1,9 +1,9 @@
 import { type MouseEvent } from 'react';
-import type { ColumnViewProps } from '../../../../types/index.js';
-import type { ViewMenuItem, LayoutSection, ViewMode, TemplateAPIMetadata } from '../types';
+import type { ColumnViewProps, TableMode } from '../../../../types/index.js';
+import type { ViewMenuItem, LayoutSection, TemplateAPIMetadata } from '../types';
 import type { ViewOption } from '../../type';
 export interface UseViewSelectorProps {
-    mode: ViewMode;
+    mode: TableMode;
     onViewChange?: (selectedView?: ViewMenuItem) => void;
     onTableViewsChange?: (tableViews: ColumnViewProps[]) => void;
     onCustomViewsChange?: (customViews: ViewMenuItem[]) => void;
@@ -27,12 +27,11 @@ export interface UseViewSelectorProps {
     customViews: ViewMenuItem[];
     defaultColumns: ColumnViewProps[];
     defaultTemplate?: ViewMenuItem;
+    allTemplates: ViewMenuItem[];
     setInternalCustomViews: (views: ViewMenuItem[]) => void;
-    setInternalTableViews: (views: ColumnViewProps[]) => void;
-    setDefaultColumns?: (columns: ColumnViewProps[]) => void;
     apiMetadata?: TemplateAPIMetadata;
 }
-export declare const useViewSelector: ({ mode, onViewChange, onTableViewsChange, onCustomViewsChange, onCreateCustomView, onEditCustomView, onDeleteCustomView, resetTableViews, setTableViews, tableViews, customViews, defaultColumns, defaultTemplate, setInternalCustomViews, setInternalTableViews, setDefaultColumns, apiMetadata, }: UseViewSelectorProps) => {
+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>>;
@@ -40,9 +39,10 @@ export declare const useViewSelector: ({ mode, onViewChange, onTableViewsChange,
     editingView: ViewMenuItem | null;
     selectedViewInfo: ViewOption;
     shouldUseCurrentState: boolean;
+    selectedView: ViewMenuItem | undefined;
+    currentViewColumns: ColumnViewProps[];
     handleViewButtonClick: (event: MouseEvent<HTMLDivElement>) => void;
     handleCloseViewDropdown: () => void;
-    handleClose: () => void;
     handleSelectedViewInfo: (selected: ViewOption, viewMenuItem?: ViewMenuItem) => void;
     handleOpenCreateDialog: (useCurrentState?: boolean) => void;
     handleOpenEditDialog: (view: ViewMenuItem) => void;
@@ -56,4 +56,5 @@ export declare const useViewSelector: ({ mode, onViewChange, onTableViewsChange,
     handleResetViews: (views: string[]) => void;
     handleTableViewsChange: (newTableViews: ColumnViewProps[]) => void;
     updateSelectedView: (updatedView: ViewMenuItem) => void;
+    updateCurrentViewColumns: (columns: ColumnViewProps[]) => void;
 };