@tap-payments/os-micro-frontend-shared 0.1.373-test.3-test.4-test.5-test.6 → 0.1.373-test.3-test.4-test.5-test.6-test.7-test.8

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

@@ -46,16 +46,9 @@ function CreateViewDialog({ open, onClose, onCreate, availableColumns = [], defa
             return;
         setIsLoading(true);
         try {
-            if (editingView) {
-                // On update: send whole layout with current selected/default (true/false) for every column and field
-                const layout = convertColumnsToLayoutSection(selectedColumns, mode);
-                yield (onCreate === null || onCreate === void 0 ? void 0 : onCreate({ name: templateName, selectedColumns, layout }));
-            }
-            else {
-                const columnsToCreate = selectedColumns.filter((col) => col.selected);
-                const layout = convertColumnsToLayoutSection(columnsToCreate, mode);
-                yield (onCreate === null || onCreate === void 0 ? void 0 : onCreate({ name: templateName, selectedColumns: columnsToCreate, layout }));
-            }
+            const columnsToCreate = selectedColumns.filter((col) => col.selected);
+            const layout = convertColumnsToLayoutSection(columnsToCreate, mode);
+            yield (onCreate === null || onCreate === void 0 ? void 0 : onCreate({ name: templateName, selectedColumns: columnsToCreate, layout }));
             onClose();
         }
         catch (error) {

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

@@ -71,6 +71,6 @@ function ViewsMenu({ onViewChange, onCreateCustomView, onEditCustomView, onDelet
     });
     return (_jsxs(_Fragment, { children: [_jsx(ClickAwayListener, Object.assign({ onClickAway: handleCloseViewDropdown }, { children: _jsxs(ViewWrapper, Object.assign({ sx: { width: '32px' }, "data-testid": "ViewsMenu" }, { children: [_jsx(StyledButton, Object.assign({ title: t('tableView'), "data-testid": "ViewsMenu_button", onClick: handleViewButtonClick }, { children: _jsx(Icon, { src: viewIcon, alt: "view", sx: { width: 14, height: 14 } }) })), _jsx(ViewsDropdown, { open: Boolean(anchorEl), anchorEl: anchorEl, onClose: handleCloseViewDropdown, defaultModified: (_a = modifiedModes[tableMode]) !== null && _a !== void 0 ? _a : false, onMarkDefaultModified: () => {
                                 setModifiedModes((current) => (Object.assign(Object.assign({}, current), { [tableMode]: true })));
-                            }, setSelectedViewInfo: handleSelectedViewInfo, selectedViewInfo: selectedViewInfo, onCreateCustomView: handleOpenCreateDialog, customViews: customViews, onEditCustomView: handleOpenEditDialog, onSaveDefaultColumns: handleSaveDefaultColumns, defaultColumns: defaultColumns, setDefaultColumns: updateDefaultColumns, updateSelectedView: updateSelectedView, baseDefaultColumns: baseDefaultColumns, mode: tableMode, defaultTemplate: defaultTemplate })] })) })), _jsx(CreateViewDialog, { open: isCreateDialogOpen, onClose: handleCloseCreateDialog, availableColumns: editingView && baseDefaultColumns.length > 0 ? baseDefaultColumns : defaultColumns, defaultColumns: defaultColumns, onCreate: handleSaveView, editingView: editingView, onDelete: handleDeleteView, tableViews: shouldUseCurrentState ? currentViewColumns : undefined, mode: tableMode })] }));
+                            }, setSelectedViewInfo: handleSelectedViewInfo, selectedViewInfo: selectedViewInfo, onCreateCustomView: handleOpenCreateDialog, customViews: customViews, onEditCustomView: handleOpenEditDialog, onSaveDefaultColumns: handleSaveDefaultColumns, defaultColumns: defaultColumns, setDefaultColumns: updateDefaultColumns, updateSelectedView: updateSelectedView, baseDefaultColumns: baseDefaultColumns, 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(ViewsMenu);

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

@@ -22,9 +22,9 @@ export const ColumnList = ({ selectedColumns, columnNames, allSelected, someSele
                             e.stopPropagation();
                             onResetToDefault();
                         }, underline: "none", sx: { fontSize: 13, fontWeight: 500, cursor: 'pointer', color: 'common.blue' } }, { children: "Reset to default" }))] }), _jsx(Box, Object.assign({ sx: { flex: 1, overflowY: 'auto', minHeight: 0 } }, { children: _jsx(Reorder.Group, Object.assign({ axis: "y", onReorder: onReorder, values: columnNames, style: { listStyle: 'none', padding: 0, margin: 0 } }, { children: selectedColumns.map((column) => {
-                        var _a, _b;
+                        var _a;
                         const isDate = isDateColumn(column.name);
-                        const hasSubmenu = !isDate && Boolean((_a = column.menuItems) === null || _a === void 0 ? void 0 : _a.length);
+                        const hasSubmenu = column.menuItems && column.menuItems.length > 0;
                         const { checked, indeterminate } = getColumnCheckState(column);
                         return (_jsxs(Reorder.Item, Object.assign({ value: column.name, drag: !isDate, dragListener: !isDate, transition: { duration: 0 }, whileDrag: { zIndex: 9999, boxShadow: '0 4px 12px rgba(0,0,0,0.15)', scale: 1 }, style: {
                                 listStyle: 'none',
@@ -62,9 +62,9 @@ export const ColumnList = ({ selectedColumns, columnNames, allSelected, someSele
                                                 offset: [0, 0],
                                             },
                                         },
-                                    ] }, { children: _jsxs(Box, Object.assign({ onMouseEnter: onCancelClose, onMouseLeave: onSubmenuLeave, sx: { display: 'flex', pl: 0.5 } }, { children: [_jsx(Box, { sx: { width: 8, height: '100%', position: 'absolute', left: -8, top: 0, bottom: 0 } }), _jsx(SubmenuPaper, { children: (_b = column.menuItems) === null || _b === void 0 ? void 0 : _b.map((subItem, subItemIndex) => {
+                                    ] }, { children: _jsxs(Box, Object.assign({ onMouseEnter: onCancelClose, onMouseLeave: onSubmenuLeave, sx: { display: 'flex', pl: 0.5 } }, { children: [_jsx(Box, { sx: { width: 8, height: '100%', position: 'absolute', left: -8, top: 0, bottom: 0 } }), _jsx(SubmenuPaper, { children: (_a = column.menuItems) === null || _a === void 0 ? void 0 : _a.map((subItem, subItemIndex) => {
                                                     var _a, _b;
-                                                    return (_jsxs(React.Fragment, { children: [_jsx(MenuItem, Object.assign({ isSelected: subItem.selected, isDisabled: isDateColumn(subItem.name), onClick: () => !isDateColumn(subItem.name) && onSubItemToggle(column.name, subItem.name) }, { children: subItem.label || subItem.name })), subItemIndex < ((_b = (_a = column.menuItems) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) - 1 && _jsx(Divider, {})] }, subItem.name));
+                                                    return (_jsxs(React.Fragment, { children: [_jsx(MenuItem, Object.assign({ isSelected: subItem.selected, onClick: () => onSubItemToggle(column.name, subItem.name) }, { children: subItem.label || subItem.name })), subItemIndex < ((_b = (_a = column.menuItems) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) - 1 && _jsx(Divider, {})] }, subItem.name));
                                                 }) })] })) })))] }), column.name));
                     }) })) }))] }));
 };

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

@@ -7,7 +7,9 @@ import { blackRightArrowIcon } from '../../../../constants/index.js';
 import { getColumnCheckState, isDateColumn } from '../utils';
 import { ResetHeaderBox, ResetCheckboxSx, ColumnItemsContainer, SubmenuPaper } from '../styles';
 import { useNestedSubmenu } from '../hooks/useNestedSubmenu';
-export const ViewsSubmenu = ({ columns, allCurrentSelected, someCurrentSelected, onSelectAll, onReset, onColumnToggle, onNestedItemToggle, onReorder, anchorEl, isModified = false, }) => {
+export const ViewsSubmenu = ({ columns, allCurrentSelected, someCurrentSelected, onSelectAll, onReset, onColumnToggle, onNestedItemToggle, onReorder, 
+// anchorEl required by interface but unused in this component
+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) => {
@@ -31,10 +33,10 @@ export const ViewsSubmenu = ({ columns, allCurrentSelected, someCurrentSelected,
                             pointerEvents: isModified ? 'auto' : 'none',
                             '&:hover': isModified ? { textDecoration: 'underline' } : undefined,
                         } }, { 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, _b;
-                        const isDate = isDateColumn(column.name);
-                        const hasNestedSubmenu = !isDate && Boolean((_a = column.menuItems) === null || _a === void 0 ? void 0 : _a.length);
+                        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,
@@ -60,9 +62,9 @@ export const ViewsSubmenu = ({ columns, allCurrentSelected, someCurrentSelected,
                                                         if (!isDate) {
                                                             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 } }, { 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: (_b = column.menuItems) === null || _b === void 0 ? void 0 : _b.map((subItem, subItemIndex) => {
+                                                    }, 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 } }, { 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, isDisabled: isDateColumn(subItem.name), onClick: () => !isDateColumn(subItem.name) && 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));
+                                                            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/constants.d.ts

@@ -7,9 +7,4 @@ export declare const DATE_COLUMN_CONFIG: {
     readonly name: "date";
     readonly label: "Date";
     readonly selected: true;
-    readonly menuItems: undefined;
-    readonly order: 1;
-    readonly pinned: "start";
-    readonly isDefaultPinned: true;
-    readonly pinnable: true;
 };

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

@@ -7,9 +7,4 @@ export const DATE_COLUMN_CONFIG = {
     name: 'date',
     label: 'Date',
     selected: true,
-    menuItems: undefined,
-    order: 1,
-    pinned: 'start',
-    isDefaultPinned: true,
-    pinnable: true,
 };

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

@@ -1,6 +1,6 @@
 import { useState, useEffect, useMemo, useRef } from 'react';
 import { DATE_COLUMN_CONFIG, TEMPLATE_NAME_MAX_LENGTH } from '../constants';
-import { isDateColumn, initializeCreateColumns, initializeCreateColumnsWithCurrentState, toggleColumn, toggleSubItem, toggleAllColumns, areAllColumnsSelected, areSomeColumnsSelected, isValidTemplateName, deepCloneColumns as copyColumns, } from '../utils';
+import { initializeEditingColumns, initializeCreateColumns, initializeCreateColumnsWithCurrentState, toggleColumn, toggleSubItem, toggleAllColumns, areAllColumnsSelected, areSomeColumnsSelected, isValidTemplateName, deepCloneColumns, } 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) || '');
@@ -10,7 +10,7 @@ export const useCreateViewDialog = ({ open, availableColumns, defaultColumns, ed
     const { hoveredColumn, anchorEl, openSubmenu, closeSubmenu, cancelClose } = useSubmenuHover();
     const dateColumn = DATE_COLUMN_CONFIG;
     useEffect(() => {
-        var _a, _b, _c;
+        var _a, _b;
         if (!open) {
             previousOpenRef.current = false;
             return;
@@ -18,21 +18,12 @@ export const useCreateViewDialog = ({ open, availableColumns, defaultColumns, ed
         const wasClosed = !previousOpenRef.current;
         if (wasClosed && open) {
             if (editingView) {
-                // Use template's submenu as source of truth so selection state is preserved (don't rely on name matching vs availableColumns)
-                const submenu = ((_a = editingView.submenu) === null || _a === void 0 ? void 0 : _a.length) ? copyColumns(editingView.submenu) : [];
-                const templateNonDate = submenu.filter((c) => !isDateColumn(c.name));
-                const templateWithDateFirst = [dateColumn, ...templateNonDate];
-                const templateNames = new Set(templateWithDateFirst.map((c) => c.name));
-                const missingFromAvailable = availableColumns
-                    .filter((col) => !isDateColumn(col.name) && !templateNames.has(col.name))
-                    .map((col) => {
-                    var _a;
-                    return (Object.assign(Object.assign({}, col), { selected: false, menuItems: (_a = col.menuItems) === null || _a === void 0 ? void 0 : _a.map((item) => (Object.assign(Object.assign({}, item), { selected: false }))) }));
-                });
-                const columnsToSet = [...templateWithDateFirst, ...missingFromAvailable];
+                const savedColumns = editingView.submenu && editingView.submenu.length > 0 ? editingView.submenu : defaultColumns;
+                const otherColumns = initializeEditingColumns(savedColumns, availableColumns);
+                const columnsToSet = [dateColumn, ...otherColumns];
                 setSelectedColumns(columnsToSet);
-                initialColumnsRef.current = copyColumns(columnsToSet);
-                const nameToSet = ((_b = editingView.label) === null || _b === void 0 ? void 0 : _b.trim()) || '';
+                initialColumnsRef.current = deepCloneColumns(columnsToSet);
+                const nameToSet = ((_a = editingView.label) === null || _a === void 0 ? void 0 : _a.trim()) || '';
                 setTemplateName(nameToSet);
             }
             else {
@@ -41,15 +32,16 @@ export const useCreateViewDialog = ({ open, availableColumns, defaultColumns, ed
                     : initializeCreateColumns(availableColumns);
                 const columnsToSet = [dateColumn, ...otherColumns];
                 setSelectedColumns(columnsToSet);
-                initialColumnsRef.current = copyColumns(columnsToSet);
+                initialColumnsRef.current = deepCloneColumns(columnsToSet);
                 setTemplateName('');
             }
         }
         else if (open && editingView) {
-            const nameToSet = ((_c = editingView.label) === null || _c === void 0 ? void 0 : _c.trim()) || '';
+            const nameToSet = ((_b = editingView.label) === null || _b === void 0 ? void 0 : _b.trim()) || '';
             setTemplateName(nameToSet);
         }
         previousOpenRef.current = open;
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- intentionally depend on editingView fields only to avoid unnecessary resets when object reference changes
     }, [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]);
@@ -72,7 +64,7 @@ export const useCreateViewDialog = ({ open, availableColumns, defaultColumns, ed
     };
     const handleResetToDefault = () => {
         if (initialColumnsRef.current.length > 0) {
-            setSelectedColumns(copyColumns(initialColumnsRef.current));
+            setSelectedColumns(deepCloneColumns(initialColumnsRef.current));
         }
     };
     return {

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

@@ -1,57 +1,63 @@
 import { useState, useEffect, useMemo, useCallback } from 'react';
 import { transformTemplatesToViewMenuItems, deepCloneColumns } from '../utils';
 export const useViewsManager = ({ tableMode, templates, lang = 'en' }) => {
-    const viewMenuFromTemplates = useMemo(() => {
-        var _a, _b;
-        const { customViews, defaultTemplate, defaultTemplateColumns } = transformTemplatesToViewMenuItems(templates !== null && templates !== void 0 ? templates : [], tableMode, lang);
-        const templateColumns = (_b = (_a = defaultTemplate === null || defaultTemplate === void 0 ? void 0 : defaultTemplate.submenu) !== null && _a !== void 0 ? _a : defaultTemplateColumns) !== null && _b !== void 0 ? _b : [];
+    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: templateColumns,
+            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 && viewMenuFromTemplates.templateDefaultColumns.length > 0) {
-            setDefaultColumns(deepCloneColumns(viewMenuFromTemplates.templateDefaultColumns));
+        if (initializedMode !== tableMode && parsedTemplates.templateDefaultColumns.length > 0) {
+            setDefaultColumns(deepCloneColumns(parsedTemplates.templateDefaultColumns));
             setInitializedMode(tableMode);
         }
-    }, [tableMode, viewMenuFromTemplates.templateDefaultColumns, initializedMode]);
+    }, [tableMode, parsedTemplates.templateDefaultColumns, initializedMode]);
     const updateDefaultColumns = useCallback((columns) => {
         setDefaultColumns(deepCloneColumns(columns));
     }, []);
     const updatedDefaultTemplate = useMemo(() => {
-        if (!viewMenuFromTemplates.defaultTemplate) {
-            return viewMenuFromTemplates.defaultTemplate;
+        if (!parsedTemplates.defaultTemplate) {
+            return parsedTemplates.defaultTemplate;
         }
-        const columnsToUse = initializedMode !== tableMode ? viewMenuFromTemplates.templateDefaultColumns : defaultColumns;
+        const columnsToUse = initializedMode !== tableMode ? parsedTemplates.templateDefaultColumns : defaultColumns;
         if (columnsToUse.length === 0) {
-            return viewMenuFromTemplates.defaultTemplate;
+            return parsedTemplates.defaultTemplate;
         }
-        return Object.assign(Object.assign({}, viewMenuFromTemplates.defaultTemplate), { submenu: columnsToUse, columns: columnsToUse.map((col) => col.name) });
-    }, [viewMenuFromTemplates.defaultTemplate, viewMenuFromTemplates.templateDefaultColumns, defaultColumns, initializedMode, tableMode]);
+        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 viewMenuFromTemplates.customViews;
+            return parsedTemplates.customViews;
         }
-        return [updatedDefaultTemplate, ...viewMenuFromTemplates.customViews];
-    }, [updatedDefaultTemplate, viewMenuFromTemplates.customViews]);
-    const currentDefaultColumns = useMemo(() => {
+        return [updatedDefaultTemplate, ...parsedTemplates.customViews];
+    }, [updatedDefaultTemplate, parsedTemplates.customViews]);
+    const effectiveDefaultColumns = useMemo(() => {
         if (initializedMode !== tableMode && defaultColumns.length === 0) {
-            return viewMenuFromTemplates.templateDefaultColumns;
+            return parsedTemplates.templateDefaultColumns;
         }
-        return defaultColumns.length > 0 ? defaultColumns : viewMenuFromTemplates.templateDefaultColumns;
-    }, [initializedMode, tableMode, defaultColumns, viewMenuFromTemplates.templateDefaultColumns]);
+        return defaultColumns.length > 0 ? defaultColumns : parsedTemplates.templateDefaultColumns;
+    }, [initializedMode, tableMode, defaultColumns, parsedTemplates.templateDefaultColumns]);
     return {
         defaultTemplate: updatedDefaultTemplate,
-        customViews: viewMenuFromTemplates.customViews,
+        customViews: parsedTemplates.customViews,
         allTemplates: updatedAllTemplates,
-        defaultColumns: currentDefaultColumns,
-        baseDefaultColumns: viewMenuFromTemplates.templateDefaultColumns,
+        defaultColumns: effectiveDefaultColumns,
+        baseDefaultColumns: parsedTemplates.templateDefaultColumns,
         updateDefaultColumns,
     };
 };

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

@@ -9,7 +9,10 @@ export interface UseViewsMenuProps {
         name: string;
         selectedColumns: ColumnViewProps[];
         layout: LayoutSection;
-    }) => Promise<void>;
+    }) => Promise<{
+        templateId: string;
+        name: string;
+    } | void>;
     onEditCustomView?: (viewId: string, data: {
         name: string;
         selectedColumns: ColumnViewProps[];

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

@@ -16,10 +16,12 @@ export const useViewsMenu = ({ mode, onViewChange, onCreateCustomView, onEditCus
     const [selectedViewInfo, setSelectedViewInfo] = useState({ id: 'default', label: 'Default' });
     const [shouldUseCurrentState, setShouldUseCurrentState] = useState(false);
     const [selectedView, setSelectedView] = useState(undefined);
+    /** Template id of the currently selected view (custom view). Used to re-select after templates refetch. */
+    const [selectedTemplateId, setSelectedTemplateId] = useState(null);
+    /** After create, we may receive templateId from parent; once allTemplates includes it, select that view. */
+    const [pendingSelectedTemplateId, setPendingSelectedTemplateId] = useState(null);
     const [currentViewColumns, setCurrentViewColumns] = useState([]);
     const hasInitializedRef = useRef(false);
-    const pendingSelectAfterCreateRef = useRef(false);
-    const allTemplatesLengthRef = useRef(allTemplates.length);
     const getViewForParent = useCallback((view) => {
         var _a;
         const selectedColumns = ((_a = view.submenu) === null || _a === void 0 ? void 0 : _a.filter((col) => col.selected)) || [];
@@ -70,6 +72,7 @@ export const useViewsMenu = ({ mode, onViewChange, onCreateCustomView, onEditCus
                 onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(getViewForParent(newView));
             }
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- getViewForParent is stable from parent
     }, [mode, defaultColumns, selectedView, allTemplates, onViewChange]);
     useEffect(() => {
         if (!hasInitializedRef.current)
@@ -96,25 +99,28 @@ export const useViewsMenu = ({ mode, onViewChange, onCreateCustomView, onEditCus
             const fullView = Object.assign(Object.assign({}, updatedTemplate), { submenu: deepCloneColumns(updatedTemplate.submenu || []) });
             setSelectedView(fullView);
             setCurrentViewColumns(deepCloneColumns(updatedTemplate.submenu || []));
+            setSelectedTemplateId(updatedTemplate.templateId || updatedTemplate.id);
             const viewForParent = getViewForParent(fullView);
             onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(viewForParent);
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- getViewForParent is stable from parent
     }, [allTemplates, selectedView, onViewChange]);
+    // After create: when allTemplates includes the new template (parent refetched), select it
     useEffect(() => {
-        const prevLength = allTemplatesLengthRef.current;
-        allTemplatesLengthRef.current = allTemplates.length;
-        if (!pendingSelectAfterCreateRef.current || allTemplates.length === 0 || allTemplates.length <= prevLength)
+        var _a;
+        if (!pendingSelectedTemplateId || allTemplates.length === 0)
             return;
-        const customViews = allTemplates.filter((t) => t.isCustom);
-        if (customViews.length === 0)
+        const newTemplate = allTemplates.find((t) => (t.templateId || t.id) === pendingSelectedTemplateId);
+        if (!((_a = newTemplate === null || newTemplate === void 0 ? void 0 : newTemplate.submenu) === null || _a === void 0 ? void 0 : _a.length))
             return;
-        const newView = customViews[customViews.length - 1];
-        setSelectedView(newView);
-        setCurrentViewColumns(deepCloneColumns(newView.submenu || []));
-        setSelectedViewInfo({ id: newView.id, label: newView.label });
-        onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(getViewForParent(newView));
-        pendingSelectAfterCreateRef.current = false;
-    }, [allTemplates, onViewChange, getViewForParent]);
+        const fullView = Object.assign(Object.assign({}, newTemplate), { submenu: deepCloneColumns(newTemplate.submenu) });
+        setSelectedView(fullView);
+        setSelectedViewInfo({ id: fullView.id, label: fullView.label });
+        setCurrentViewColumns(deepCloneColumns(newTemplate.submenu));
+        setSelectedTemplateId(pendingSelectedTemplateId);
+        setPendingSelectedTemplateId(null);
+        onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(getViewForParent(fullView));
+    }, [allTemplates, pendingSelectedTemplateId, onViewChange, getViewForParent]);
     const handleViewButtonClick = useCallback((event) => {
         setAnchorEl((current) => (current ? null : event.currentTarget));
     }, []);
@@ -126,6 +132,11 @@ export const useViewsMenu = ({ mode, onViewChange, onCreateCustomView, onEditCus
         const newSelectedView = viewMenuItem || undefined;
         setSelectedView(newSelectedView);
         setCurrentViewColumns(deepCloneColumns((newSelectedView === null || newSelectedView === void 0 ? void 0 : newSelectedView.submenu) || []));
+        const templateId = (newSelectedView === null || newSelectedView === void 0 ? void 0 : newSelectedView.isCustom)
+            ? newSelectedView.templateId || newSelectedView.id
+            : null;
+        setSelectedTemplateId(templateId);
+        setPendingSelectedTemplateId(null);
         onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(newSelectedView ? getViewForParent(newSelectedView) : undefined);
         handleCloseViewDropdown();
     }, [handleCloseViewDropdown, onViewChange, getViewForParent]);
@@ -158,13 +169,17 @@ export const useViewsMenu = ({ mode, onViewChange, onCreateCustomView, onEditCus
             yield (onEditCustomView === null || onEditCustomView === void 0 ? void 0 : onEditCustomView(templateId, data));
             const updatedView = Object.assign(Object.assign({}, editingView), { label: data.name, submenu: deepCloneColumns(data.selectedColumns), columns: data.selectedColumns.map((c) => c.name) });
             setSelectedView(updatedView);
-            setCurrentViewColumns(deepCloneColumns(data.selectedColumns));
             setSelectedViewInfo({ id: updatedView.id, label: updatedView.label });
+            setCurrentViewColumns(deepCloneColumns(data.selectedColumns));
+            setSelectedTemplateId(templateId);
+            setPendingSelectedTemplateId(null);
             onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(getViewForParent(updatedView));
         }
         else {
-            yield (onCreateCustomView === null || onCreateCustomView === void 0 ? void 0 : onCreateCustomView(data));
-            pendingSelectAfterCreateRef.current = true;
+            const created = yield (onCreateCustomView === null || onCreateCustomView === void 0 ? void 0 : onCreateCustomView(data));
+            if (created === null || created === void 0 ? void 0 : created.templateId) {
+                setPendingSelectedTemplateId(created.templateId);
+            }
         }
     }), [editingView, onEditCustomView, onCreateCustomView, onViewChange, getViewForParent]);
     const handleDeleteView = useCallback((viewId) => __awaiter(void 0, void 0, void 0, function* () {
@@ -173,7 +188,10 @@ export const useViewsMenu = ({ mode, onViewChange, onCreateCustomView, onEditCus
         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);
+            setSelectedViewInfo(defaultTemplate ? { id: defaultTemplate.id, label: defaultTemplate.label } : { id: 'default', label: 'Default' });
             setCurrentViewColumns(deepCloneColumns(defaultColumns));
+            setSelectedTemplateId(null);
+            setPendingSelectedTemplateId(null);
             if (defaultTemplate) {
                 onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(getViewForParent(defaultTemplate));
             }

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

@@ -5,7 +5,7 @@ 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 type { ViewMenuItem, CreateCustomViewDialogProps, CreateOrEditViewPayload, ColumnChange, 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';

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

@@ -211,7 +211,7 @@ export const SubmenuPaper = styled(Paper)(() => ({
     boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
     borderRadius: '8px',
 }));
-export const SubmenuItem = styled(Box)(({ theme }) => ({
+export const SubmenuItem = styled(Box)(() => ({
     display: 'flex',
     alignItems: 'center',
     padding: '8px 12px',

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

@@ -77,6 +77,18 @@ export interface TemplatesList {
     has_more: boolean;
     templates: Template[];
 }
+/** Payload for create or edit view (name, selected columns, and layout section) */
+export interface CreateOrEditViewPayload {
+    name: string;
+    selectedColumns: ColumnViewProps[];
+    layout: LayoutSection;
+}
+/** Represents a column or sub-item selection change (e.g. for diffing) */
+export interface ColumnChange {
+    columnName: string;
+    selected: boolean;
+    subItemName?: string;
+}
 export interface CreateCustomViewDialogProps {
     open: boolean;
     onClose: () => void;
@@ -107,12 +119,11 @@ export interface ViewsMenuProps {
         name: string;
         selectedColumns: ColumnViewProps[];
         layout: LayoutSection;
-    }) => Promise<void>;
-    onEditCustomView?: (viewId: string, data: {
+    }) => Promise<{
+        templateId: string;
         name: string;
-        selectedColumns: ColumnViewProps[];
-        layout: LayoutSection;
-    }) => Promise<void>;
+    } | void>;
+    onEditCustomView?: (viewId: string, data: CreateOrEditViewPayload) => Promise<void>;
     onDeleteCustomView?: (viewId: string) => Promise<void>;
     tableMode?: TableMode;
     templates: Template[];

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

@@ -43,7 +43,8 @@ export declare const transformTemplatesToViewMenuItems: (templates: Array<{
  */
 export declare const convertColumnsToLayoutSection: (columns: ColumnViewProps[], mode: TableMode, lang?: string) => LayoutSection;
 /**
- * Initialize columns for editing mode
+ * Initialize columns for editing mode.
+ * Preserves the order from editingColumns (saved view), then appends any columns from availableColumns not in the saved view.
  */
 export declare const initializeEditingColumns: (editingColumns: ColumnViewProps[], availableColumns: ColumnViewProps[]) => ColumnViewProps[];
 /**
@@ -51,7 +52,8 @@ export declare const initializeEditingColumns: (editingColumns: ColumnViewProps[
  */
 export declare const initializeCreateColumns: (availableColumns: ColumnViewProps[]) => ColumnViewProps[];
 /**
- * Initialize columns for create mode with current tableViews state (preserves checked/unchecked values)
+ * Initialize columns for create mode with current tableViews state (preserves checked/unchecked values).
+ * Preserves the order from currentTableViews (current table columns), then appends any columns from availableColumns not in the table.
  */
 export declare const initializeCreateColumnsWithCurrentState: (availableColumns: ColumnViewProps[], currentTableViews: ColumnViewProps[]) => ColumnViewProps[];
 /**

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

@@ -110,7 +110,6 @@ export const transformTemplatesToViewMenuItems = (templates, mode = 'sheet', lan
         const section = template.layout.find((s) => s.code.toLowerCase() === sectionCode);
         const columns = section ? transformLayoutToColumns([section], lang) : [];
         // Handle id as either string or object
-        const templateIdString = typeof template.id === 'string' ? template.id : template.templateId;
         const viewId = typeof template.id === 'string' ? template.id : template.templateId;
         // Always include date column at the beginning
         const dateColumn = DATE_COLUMN_CONFIG;
@@ -184,16 +183,31 @@ export const convertColumnsToLayoutSection = (columns, mode, lang = 'en') => {
     };
 };
 /**
- * Initialize columns for editing mode
+ * Initialize columns for editing mode.
+ * Preserves the order from editingColumns (saved view), then appends any columns from availableColumns not in the saved view.
  */
 export const initializeEditingColumns = (editingColumns, availableColumns) => {
-    return availableColumns
-        .filter((col) => !isDateColumn(col.name))
-        .map((col) => {
-        var _a;
-        const savedCol = editingColumns.find((ec) => ec.name === col.name);
-        return (savedCol || Object.assign(Object.assign({}, col), { selected: false, menuItems: (_a = col.menuItems) === null || _a === void 0 ? void 0 : _a.map((item) => (Object.assign(Object.assign({}, item), { selected: false }))) }));
-    });
+    var _a, _b;
+    const editingOrder = editingColumns.filter((col) => !isDateColumn(col.name)).map((col) => col.name);
+    const availableByName = new Map(availableColumns.filter((c) => !isDateColumn(c.name)).map((c) => [c.name, c]));
+    const result = [];
+    for (const name of editingOrder) {
+        const savedCol = editingColumns.find((ec) => ec.name === name);
+        const availCol = availableByName.get(name);
+        if (availCol) {
+            result.push(savedCol !== null && savedCol !== void 0 ? savedCol : Object.assign(Object.assign({}, availCol), { selected: false, menuItems: (_a = availCol.menuItems) === null || _a === void 0 ? void 0 : _a.map((item) => (Object.assign(Object.assign({}, item), { selected: false }))) }));
+        }
+        else if (savedCol) {
+            result.push(savedCol);
+        }
+    }
+    for (const [, availCol] of availableByName) {
+        if (!editingOrder.includes(availCol.name)) {
+            const savedCol = editingColumns.find((ec) => ec.name === availCol.name);
+            result.push(savedCol !== null && savedCol !== void 0 ? savedCol : Object.assign(Object.assign({}, availCol), { selected: false, menuItems: (_b = availCol.menuItems) === null || _b === void 0 ? void 0 : _b.map((item) => (Object.assign(Object.assign({}, item), { selected: false }))) }));
+        }
+    }
+    return result;
 };
 /**
  * Initialize columns for create mode (all unchecked except date)
@@ -207,23 +221,34 @@ export const initializeCreateColumns = (availableColumns) => {
     });
 };
 /**
- * Initialize columns for create mode with current tableViews state (preserves checked/unchecked values)
+ * Initialize columns for create mode with current tableViews state (preserves checked/unchecked values).
+ * Preserves the order from currentTableViews (current table columns), then appends any columns from availableColumns not in the table.
  */
 export const initializeCreateColumnsWithCurrentState = (availableColumns, currentTableViews) => {
-    return availableColumns
-        .filter((col) => !isDateColumn(col.name))
-        .map((col) => {
-        var _a, _b, _c;
-        const currentCol = currentTableViews.find((tc) => tc.name === col.name);
-        if (currentCol) {
-            return Object.assign(Object.assign({}, col), { selected: (_a = currentCol.selected) !== null && _a !== void 0 ? _a : false, menuItems: (_b = col.menuItems) === null || _b === void 0 ? void 0 : _b.map((item) => {
+    var _a, _b, _c, _d;
+    const availableByName = new Map(availableColumns.filter((c) => !isDateColumn(c.name)).map((c) => [c.name, c]));
+    const currentOrder = currentTableViews.filter((c) => !isDateColumn(c.name)).map((c) => c.name);
+    const result = [];
+    for (const name of currentOrder) {
+        const currentCol = currentTableViews.find((tc) => tc.name === name);
+        const availCol = availableByName.get(name);
+        if (availCol && currentCol) {
+            result.push(Object.assign(Object.assign({}, availCol), { selected: (_a = currentCol.selected) !== null && _a !== void 0 ? _a : false, menuItems: (_b = availCol.menuItems) === null || _b === void 0 ? void 0 : _b.map((item) => {
                     var _a, _b;
                     const currentMenuItem = (_a = currentCol.menuItems) === null || _a === void 0 ? void 0 : _a.find((mi) => mi.name === item.name);
                     return Object.assign(Object.assign({}, item), { selected: (_b = currentMenuItem === null || currentMenuItem === void 0 ? void 0 : currentMenuItem.selected) !== null && _b !== void 0 ? _b : false });
-                }) });
+                }) }));
         }
-        return Object.assign(Object.assign({}, col), { selected: false, menuItems: (_c = col.menuItems) === null || _c === void 0 ? void 0 : _c.map((item) => (Object.assign(Object.assign({}, item), { selected: false }))) });
-    });
+        else if (availCol) {
+            result.push(Object.assign(Object.assign({}, availCol), { selected: false, menuItems: (_c = availCol.menuItems) === null || _c === void 0 ? void 0 : _c.map((item) => (Object.assign(Object.assign({}, item), { selected: false }))) }));
+        }
+    }
+    for (const [, availCol] of availableByName) {
+        if (!currentOrder.includes(availCol.name)) {
+            result.push(Object.assign(Object.assign({}, availCol), { selected: false, menuItems: (_d = availCol.menuItems) === null || _d === void 0 ? void 0 : _d.map((item) => (Object.assign(Object.assign({}, item), { selected: false }))) }));
+        }
+    }
+    return result;
 };
 /**
  * Reset columns to their default selection state
@@ -353,22 +378,24 @@ export const getSubmenuItems = (item, defaultColumns) => {
     else {
         columns = item.submenu || [];
     }
-    // Always include date column at the beginning if it's not already present (date column submenu disabled)
+    // Always include date column at the beginning if it's not already present
     const hasDateColumn = columns.some((col) => col.name.toLowerCase() === 'date');
     if (!hasDateColumn) {
-        const dateColumn = Object.assign({}, DATE_COLUMN_CONFIG);
+        const dateColumn = {
+            name: 'date',
+            label: 'Date',
+            selected: true,
+        };
         return [dateColumn, ...columns];
     }
-    // Ensure date column is first and strip submenu from date (date column submenu disabled); always apply date pin/order config
+    // Ensure date column is first
     const dateColumnIndex = columns.findIndex((col) => col.name.toLowerCase() === 'date');
     if (dateColumnIndex > 0) {
-        const dateCol = columns[dateColumnIndex];
-        const dateColumn = Object.assign(Object.assign(Object.assign({}, DATE_COLUMN_CONFIG), dateCol), { menuItems: undefined });
+        const dateColumn = columns[dateColumnIndex];
         const otherColumns = columns.filter((col) => col.name.toLowerCase() !== 'date');
         return [dateColumn, ...otherColumns];
     }
-    return columns.map((col) => col.name.toLowerCase() === 'date'
-        ? Object.assign(Object.assign(Object.assign({}, DATE_COLUMN_CONFIG), col), { menuItems: undefined }) : col);
+    return columns;
 };
 /**
  * Check if a view menu item has submenu

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

@@ -6,4 +6,4 @@ export { default as FiltersRowWrapper } from './FiltersRowWrapper';
 export { default as FiltersRow } from './FiltersRow';
 export * from './style';
 export * from './type';
-export type { Template, LayoutSection, ViewMenuItem } from './TableView/types';
+export type { Template, LayoutSection, ViewMenuItem, ColumnChange, CreateOrEditViewPayload } from './TableView/types';

package/build/components/TableHeader/type.d.ts

@@ -49,7 +49,10 @@ export interface TableHeaderProps<IStatus extends TableHeaderStatus | TableHeade
         name: string;
         selectedColumns: ColumnViewProps[];
         layout: LayoutSection;
-    }) => Promise<void>;
+    }) => Promise<{
+        templateId: string;
+        name: string;
+    } | void>;
     onEditCustomView?: (viewId: string, data: {
         name: string;
         selectedColumns: ColumnViewProps[];

package/build/components/VirtualTables/SheetViewVirtualTable/SheetViewVirtualTable.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { ISheetViewVirtualTable } from './types';
-declare function SheetViewVirtualTable({ columns: inputColumns, rows, threshold, showHeader, headerProps, rowProps, footerProps, rowHeight, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded, tableBodyStyles, tableTitle, onStartDrag, onColumnPin, clearBackdropVisibilityTimeout, isPinnable, tableMode, overscanCount, windowId, serviceCode, customNoDataComponent, defaultSkeleton, }: Readonly<ISheetViewVirtualTable>): import("react/jsx-runtime").JSX.Element;
+declare function SheetViewVirtualTable({ columns, rows, threshold, showHeader, headerProps, rowProps, footerProps, rowHeight, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded, tableBodyStyles, tableTitle, onStartDrag, onColumnPin, clearBackdropVisibilityTimeout, isPinnable, tableMode, overscanCount, windowId, serviceCode, customNoDataComponent, }: Readonly<ISheetViewVirtualTable>): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof SheetViewVirtualTable>;
 export default _default;

package/build/components/VirtualTables/SheetViewVirtualTable/SheetViewVirtualTable.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { memo, useCallback, useMemo, useRef, useEffect } from 'react';
 import { SHEET_VIEW_TABLE_THRESHOLD } from '../../../constants/index.js';
-import { getProcessedColumns } from '../../../utils/index.js';
 import TableFooter from '../components/TableFooter/TableFooter';
 import { SheetViewTableContainer } from '../components/style';
 import { SheetViewVirtualTableWrapper } from './style';
@@ -9,9 +8,7 @@ import { usePinnedColumns, useSynchronizedScroll, useTableState, useTableData, u
 import { useColumnResize, useColumnResizeWithPinned, applyColumnWidths } from './features/resize';
 import { ResizeOverlay } from './features/resize/components';
 import { PinnedColumn, MainTable, LoadingMainTable, NoDataView, VirtualTable } from './components';
-function SheetViewVirtualTable({ columns: inputColumns, rows, threshold = SHEET_VIEW_TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, rowHeight = 28, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded = false, tableBodyStyles, tableTitle, onStartDrag, onColumnPin, clearBackdropVisibilityTimeout = 100, isPinnable = false, tableMode, overscanCount, windowId, serviceCode, customNoDataComponent, defaultSkeleton = false, }) {
-    // Use skeleton columns when loading and defaultSkeleton is true (same behavior as VirtualTable)
-    const columns = useMemo(() => getProcessedColumns(inputColumns, isLoading !== null && isLoading !== void 0 ? isLoading : false, defaultSkeleton), [inputColumns, isLoading, defaultSkeleton]);
+function SheetViewVirtualTable({ columns, rows, threshold = SHEET_VIEW_TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, rowHeight = 28, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded = false, tableBodyStyles, tableTitle, onStartDrag, onColumnPin, clearBackdropVisibilityTimeout = 100, isPinnable = false, tableMode, overscanCount, windowId, serviceCode, customNoDataComponent, }) {
     // Custom hooks for state management
     const { selectedCell, selectedColumn, selectedRow, showBackDrop, setShowBackdrop, handleCellClick, handleColumnClick, handleChipClick, selectedChip, } = useTableState();
     // Refs and state for resize indicator positioning

package/build/components/VirtualTables/VirtualTable/VirtualTable.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import type { IVirtualTable } from '../../../types/index.js';
-declare function VirtualTable({ columns: inputColumns, rows, threshold, showHeader, headerProps, rowProps, footerProps, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded, tableBodyStyles, tableMode, tableTitle, onStartDrag, isSheetView, isMinimized, footerComponent, customNoDataComponent, defaultSkeleton, }: Readonly<IVirtualTable>): import("react/jsx-runtime").JSX.Element;
+declare function VirtualTable({ columns, rows, threshold, showHeader, headerProps, rowProps, footerProps, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded, tableBodyStyles, tableMode, tableTitle, onStartDrag, isSheetView, isMinimized, footerComponent, customNoDataComponent, defaultSkeleton, }: Readonly<IVirtualTable>): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof VirtualTable>;
 export default _default;

package/build/components/VirtualTables/VirtualTable/VirtualTable.js

@@ -34,7 +34,7 @@ const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToInde
     areAllRowsLoaded,
     isSheetView,
 }));
-function VirtualTable({ columns: inputColumns, rows, threshold = TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded = false, tableBodyStyles, tableMode, tableTitle, onStartDrag, isSheetView = false, isMinimized, footerComponent, customNoDataComponent, defaultSkeleton = false, }) {
+function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded = false, tableBodyStyles, tableMode, tableTitle, onStartDrag, isSheetView = false, isMinimized, footerComponent, customNoDataComponent, defaultSkeleton = false, }) {
     var _a;
     const theme = useTheme();
     const onPointerDown = (e) => {
@@ -58,8 +58,8 @@ function VirtualTable({ columns: inputColumns, rows, threshold = TABLE_THRESHOLD
     const tableEmpty = !isLoading && rows.length === 0;
     const hasTimeoutError = isTimeoutError(error);
     const lastItemIndex = rows.length - 1;
-    const columns = useMemo(() => getProcessedColumns(inputColumns, isLoading !== null && isLoading !== void 0 ? isLoading : false, defaultSkeleton), [inputColumns, isLoading, defaultSkeleton]);
-    const shownColumns = useMemo(() => columns.filter((column) => !column.hidden), [columns]);
+    const processedColumns = useMemo(() => getProcessedColumns(columns, isLoading !== null && isLoading !== void 0 ? isLoading : false, defaultSkeleton), [columns, isLoading, defaultSkeleton]);
+    const shownColumns = useMemo(() => processedColumns.filter((column) => !column.hidden), [processedColumns]);
     const orderedColumns = useMemo(() => shownColumns.sort((a, b) => { var _a, _b; return ((_a = a === null || a === void 0 ? void 0 : a.order) !== null && _a !== void 0 ? _a : 1000000) - ((_b = b === null || b === void 0 ? void 0 : b.order) !== null && _b !== void 0 ? _b : 1000000); }), [shownColumns]);
     const areTotalRowsNotFillingHeight = isHeightNotFullyFilledByRows(rows.length) && !tableLoading;
     const itemsCount = isDelayedFetchingNextPage || (areAllRowsLoaded && !areTotalRowsNotFillingHeight) ? rows.length + 1 : rows.length;

package/build/types/column.d.ts

@@ -40,12 +40,4 @@ export interface ColumnViewProps {
     disabled?: boolean;
     sx?: SxProps<Theme>;
     menuSx?: SxProps<Theme>;
-    /** Table column order (date column should always be 1) */
-    order?: number;
-    /** Pinned position (date column should always be 'start') */
-    pinned?: 'start' | 'end';
-    /** Whether column is pinned by default (date column should always be true) */
-    isDefaultPinned?: boolean;
-    /** Whether column can be pinned (date column should always be true) */
-    pinnable?: boolean;
 }

package/build/utils/skeletonColumns.d.ts

@@ -1,8 +1,4 @@
 import type { IColumnProps } from '../types/index.js';
 export declare const DEFAULT_SKELETON_WIDTHS: string[];
 export declare const generateSkeletonColumns: (staticWidths?: string[]) => IColumnProps[];
-/**
- * Returns columns to display: when loading and defaultSkeleton is true, returns skeleton columns
- * (with date column first so it shows skeleton); otherwise returns the given columns.
- */
 export declare const getProcessedColumns: <T = unknown>(columns: readonly IColumnProps<T>[], isLoading: boolean, defaultSkeleton: boolean) => IColumnProps<T>[];

package/build/utils/skeletonColumns.js

@@ -1,16 +1,4 @@
 export const DEFAULT_SKELETON_WIDTHS = ['120px', '180px', '100px', '150px', '200px', '140px', '160px', '110px', '190px', '130px'];
-/** Date column config for skeleton so the date column shows skeleton like other columns */
-const SKELETON_DATE_COLUMN = {
-    id: 'date',
-    header: '',
-    width: DEFAULT_SKELETON_WIDTHS[0],
-    order: 1,
-    pinned: 'start',
-    isDefaultPinned: true,
-    pinnable: true,
-    hidden: false,
-    sortable: false,
-};
 export const generateSkeletonColumns = (staticWidths = DEFAULT_SKELETON_WIDTHS) => {
     return staticWidths.map((width, index) => ({
         id: `skeleton-col-${index}`,
@@ -21,14 +9,9 @@ export const generateSkeletonColumns = (staticWidths = DEFAULT_SKELETON_WIDTHS)
         sortable: false,
     }));
 };
-/**
- * Returns columns to display: when loading and defaultSkeleton is true, returns skeleton columns
- * (with date column first so it shows skeleton); otherwise returns the given columns.
- */
 export const getProcessedColumns = (columns, isLoading, defaultSkeleton) => {
     if (defaultSkeleton && isLoading) {
-        const restSkeleton = generateSkeletonColumns(DEFAULT_SKELETON_WIDTHS.slice(1)).map((col, i) => (Object.assign(Object.assign({}, col), { order: i + 2 })));
-        return [SKELETON_DATE_COLUMN, ...restSkeleton];
+        return generateSkeletonColumns();
     }
     return [...columns];
 };

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.1.373-test.3-test.4-test.5-test.6",
-  "testVersion": 6,
+  "version": "0.1.373-test.3-test.4-test.5-test.6-test.7-test.8",
+  "testVersion": 8,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",