@tap-payments/os-micro-frontend-shared 0.1.439 → 0.1.440

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

@@ -18,7 +18,6 @@ function ViewsDropdown({ open, selectedViewInfo, setSelectedViewInfo, anchorEl,
     const { t } = useTranslation();
     const { hoveredColumn: hoveredViewId, anchorEl: submenuAnchorEl, openSubmenu, closeSubmenu, cancelClose, forceClose } = useSubmenuHover();
     const [hoveredCustomId, setHoveredCustomId] = React.useState(null);
-    const [showModifiedBadge, setShowModifiedBadge] = React.useState(false);
     const [draftColumns, setDraftColumns] = React.useState(null);
     const { originalColumns, saveOriginalState, clearOriginalState } = useOriginalColumns(defaultColumns);
     const views = useMemo(() => {
@@ -82,7 +81,6 @@ function ViewsDropdown({ open, selectedViewInfo, setSelectedViewInfo, anchorEl,
         if (isDefaultView && defaultTemplate && colsToApply.length) {
             if (draftHasChanges) {
                 onSaveDefaultColumns === null || onSaveDefaultColumns === void 0 ? void 0 : onSaveDefaultColumns(colsToApply);
-                setShowModifiedBadge(true);
             }
             updateSelectedView === null || updateSelectedView === void 0 ? void 0 : updateSelectedView(Object.assign(Object.assign({}, defaultTemplate), { id: String(defaultTemplate.id), submenu: deepCloneColumns(colsToApply), columns: colsToApply.map((c) => c.name) }));
         }
@@ -136,7 +134,7 @@ function ViewsDropdown({ open, selectedViewInfo, setSelectedViewInfo, anchorEl,
                                     setHoveredCustomId(null);
                                 else if (hasSubmenu(item, defaultColumns))
                                     closeSubmenu();
-                            }, onClick: () => selectView(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 && showModifiedBadge && _jsx("span", Object.assign({ style: ModifiedTextSx }, { children: "(Modified)" }))] })), item.isCustom && hoveredCustomId === item.id && (_jsx("img", { src: editIcon, alt: "edit", style: { width: 12, height: 12, cursor: 'pointer' }, onClick: (e) => {
+                            }, onClick: () => selectView(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 && modifiedFromBase && _jsx("span", Object.assign({ style: ModifiedTextSx }, { children: "(Modified)" }))] })), item.isCustom && hoveredCustomId === item.id && (_jsx("img", { src: editIcon, alt: "edit", style: { width: 12, height: 12, cursor: 'pointer' }, onClick: (e) => {
                                         e.stopPropagation();
                                         onClose === null || onClose === void 0 ? void 0 : onClose();
                                         onEditCustomView === null || onEditCustomView === void 0 ? void 0 : onEditCustomView(item);

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { memo, useCallback, useState } from 'react';
+import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import ClickAwayListener from '@mui/material/ClickAwayListener';
 import { Icon, StyledButton } from '../../index.js';
@@ -10,9 +10,7 @@ import { ViewWrapper } from './styles';
 import { useViewsManager } from './hooks';
 import { useViewsMenu } from './hooks/useViewsMenu';
 function ViewsMenu({ onViewChange, templates, onCreateCustomView, onEditCustomView, onDeleteCustomView, onUpdateDefaultView, tableMode = 'default', lang = 'en', }) {
-    var _a;
     const { t } = useTranslation();
-    const [modifiedModes, setModifiedModes] = useState({});
     const { defaultColumns, defaultTemplate, customViews, allTemplates, baseDefaultColumns } = useViewsManager({
         tableMode,
         templates,
@@ -32,10 +30,7 @@ function ViewsMenu({ onViewChange, templates, onCreateCustomView, onEditCustomVi
         if (!(defaultTemplate === null || defaultTemplate === void 0 ? void 0 : defaultTemplate.id))
             return;
         onUpdateDefaultView === null || onUpdateDefaultView === void 0 ? void 0 : onUpdateDefaultView(columns);
-        setModifiedModes((current) => (Object.assign(Object.assign({}, current), { [tableMode]: true })));
-    }, [defaultTemplate, tableMode, onUpdateDefaultView]);
-    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, 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 ? initialColumnsForCreate !== null && initialColumnsForCreate !== void 0 ? initialColumnsForCreate : currentViewColumns : undefined, mode: tableMode })] }));
+    }, [defaultTemplate, onUpdateDefaultView]);
+    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, setSelectedViewInfo: handleSelectedViewInfo, selectedViewInfo: selectedViewInfo, onCreateCustomView: handleOpenCreateDialog, customViews: customViews, onEditCustomView: handleOpenEditDialog, onSaveDefaultColumns: handleSaveDefaultColumns, defaultColumns: defaultColumns, 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 ? initialColumnsForCreate !== null && initialColumnsForCreate !== void 0 ? initialColumnsForCreate : currentViewColumns : undefined, mode: tableMode })] }));
 }
 export default memo(ViewsMenu);

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

@@ -64,7 +64,10 @@ export const ColumnList = ({ selectedColumns, columnNames, allSelected, someSele
                                         },
                                     ] }, { children: _jsxs(Box, Object.assign({ onMouseEnter: onCancelClose, onMouseLeave: onSubmenuLeave, sx: { display: 'flex', pl: 0.5 } }, { children: [_jsx(Box, { sx: { width: 8, height: '100%', position: 'absolute', left: -8, top: 0, bottom: 0 } }), _jsx(SubmenuPaper, { children: (_a = column.menuItems) === null || _a === void 0 ? void 0 : _a.map((subItem, subItemIndex) => {
                                                     var _a, _b;
-                                                    return (_jsxs(React.Fragment, { children: [_jsx(MenuItem, Object.assign({ isSelected: subItem.selected, onClick: () => onSubItemToggle(column.name, subItem.name) }, { children: subItem.label || subItem.name })), subItemIndex < ((_b = (_a = column.menuItems) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) - 1 && _jsx(Divider, {})] }, subItem.name));
+                                                    return (_jsxs(React.Fragment, { children: [_jsx(MenuItem, Object.assign({ isSelected: subItem.selected, isDisabled: isDate, onClick: () => {
+                                                                    if (!isDate)
+                                                                        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

@@ -62,7 +62,10 @@ export const ViewsSubmenu = ({ columns, allCurrentSelected, someCurrentSelected,
                                                         }
                                                     }, 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, 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));
+                                                            return (_jsxs(React.Fragment, { children: [_jsx(MenuItem, Object.assign({ isSelected: subItem.selected, isDisabled: isDate, onClick: () => {
+                                                                            if (!isDate)
+                                                                                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

@@ -23,3 +23,17 @@ export declare const DATE_COLUMN_CONFIG: {
     readonly isDefaultPinned: true;
     readonly pinnable: true;
 };
+export declare const CUSTOM_TABLE_REQUIRED_COLUMN_LABELS: {
+    readonly date: "Date";
+    readonly index: "Index";
+};
+export declare const CUSTOM_TABLE_MODE_ALIASES: {
+    sheet: string[];
+    default: string[];
+    text: string[];
+};
+export declare const OTHER_SECTION_CODE: {
+    readonly sheet: "Advanced";
+    readonly default: "Sheet";
+    readonly text: "text";
+};

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

@@ -23,3 +23,17 @@ export const DATE_COLUMN_CONFIG = {
     isDefaultPinned: true,
     pinnable: true,
 };
+export const CUSTOM_TABLE_REQUIRED_COLUMN_LABELS = {
+    date: 'Date',
+    index: 'Index',
+};
+export const CUSTOM_TABLE_MODE_ALIASES = {
+    sheet: ['sheet'],
+    default: ['advanced', 'default'],
+    text: ['text'],
+};
+export const OTHER_SECTION_CODE = {
+    sheet: 'Advanced',
+    default: 'Sheet',
+    text: 'text',
+};

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

@@ -8,25 +8,32 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { useCallback, useMemo, useState } from 'react';
+import { OTHER_SECTION_CODE } from '../constants';
+import { handleTemplateUpdate, mapColumnsToLayoutSection, convertTemplateToColumnsView, replaceTemplateInList, updateCurrentTemplate, addRequiredColumns, } from '../utils';
 import { updateColumnSelection } from '../../../../utils/index.js';
-import { handleTemplateUpdate, templateToViewMenuItem, mapColumnsToLayoutSection, convertTemplateToColumnsView, convertTemplatesToColumnsView, isTemplateMatchingId, replaceTemplateInList, updateCurrentTemplate, } from '../utils';
 export function useCustomTableViews({ templates, setTemplates, createTemplate, updateTemplate, deleteTemplate, tableMode, lang = 'en', columnModifiers, }) {
-    const [selectedView, setSelectedView] = useState(undefined);
+    const defaultTemplate = useMemo(() => templates.find((t) => t.default), [templates]);
+    const [selectedTemplateId, setSelectedTemplateId] = useState(() => defaultTemplate === null || defaultTemplate === void 0 ? void 0 : defaultTemplate.id);
     const onCreateCustomView = useCallback(({ name, layout }) => __awaiter(this, void 0, void 0, function* () {
-        var _a;
+        var _a, _b, _c, _d;
         const created = yield createTemplate({ name, layout: [layout] });
         if (created) {
-            const normalized = handleTemplateUpdate(created);
+            const otherCode = (_a = OTHER_SECTION_CODE[tableMode]) !== null && _a !== void 0 ? _a : OTHER_SECTION_CODE.default;
+            const hasOtherSection = (_b = created.layout) === null || _b === void 0 ? void 0 : _b.some((s) => { var _a; return ((_a = s.code) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === otherCode.toLowerCase(); });
+            const templateWithOtherLayout = hasOtherSection
+                ? created
+                : Object.assign(Object.assign({}, created), { layout: [...((_c = created.layout) !== null && _c !== void 0 ? _c : []), { code: otherCode, columns: [] }] });
+            const normalized = handleTemplateUpdate(templateWithOtherLayout);
             setTemplates((prev) => [...prev, normalized]);
-            setSelectedView(templateToViewMenuItem(normalized, tableMode));
-            return { id: created.id, name: (_a = created.name) !== null && _a !== void 0 ? _a : '' };
+            setSelectedTemplateId(normalized.id);
+            return { id: created.id, name: (_d = created.name) !== null && _d !== void 0 ? _d : '' };
         }
     }), [createTemplate, setTemplates, tableMode]);
     const onDeleteCustomView = useCallback((templateId) => __awaiter(this, void 0, void 0, function* () {
         yield deleteTemplate(templateId);
-        setTemplates((prev) => prev.filter((t) => !isTemplateMatchingId(t, templateId)));
-        setSelectedView((current) => ((current === null || current === void 0 ? void 0 : current.id) === templateId ? undefined : current));
-    }), [deleteTemplate, setTemplates]);
+        setTemplates((prev) => prev.filter((t) => t.id !== templateId));
+        setSelectedTemplateId((current) => (current === templateId ? defaultTemplate === null || defaultTemplate === void 0 ? void 0 : defaultTemplate.id : current));
+    }), [deleteTemplate, setTemplates, defaultTemplate]);
     const onUpdateDefaultView = useCallback((columns) => {
         const defaultTemplate = templates.find((t) => t.default);
         if (!defaultTemplate)
@@ -37,15 +44,15 @@ export function useCustomTableViews({ templates, setTemplates, createTemplate, u
         setTemplates((prev) => replaceTemplateInList(prev, (t) => t.default, updatedDefault));
     }, [templates, tableMode, lang, setTemplates]);
     const onEditCustomView = useCallback((viewId, data) => __awaiter(this, void 0, void 0, function* () {
-        const template = templates.find((t) => isTemplateMatchingId(t, viewId));
+        const template = templates.find((t) => t.id === viewId);
         const { name, layout } = updateCurrentTemplate(template, data);
         const updated = yield updateTemplate(viewId, { name, layout });
         if (updated) {
             const normalized = handleTemplateUpdate(updated);
-            setTemplates((prev) => replaceTemplateInList(prev, (t) => isTemplateMatchingId(t, viewId), normalized));
-            setSelectedView(templateToViewMenuItem(normalized, tableMode));
+            setTemplates((prev) => replaceTemplateInList(prev, (t) => t.id === viewId, normalized));
+            setSelectedTemplateId(normalized.id);
         }
-    }), [templates, tableMode, updateTemplate, setTemplates]);
+    }), [templates, updateTemplate, setTemplates]);
     const customViews = useMemo(() => ({
         templates,
         onCreateCustomView,
@@ -54,52 +61,24 @@ export function useCustomTableViews({ templates, setTemplates, createTemplate, u
         onUpdateDefaultView,
     }), [templates, onCreateCustomView, onEditCustomView, onDeleteCustomView, onUpdateDefaultView]);
     const onViewChange = useCallback((view) => {
-        setSelectedView(view);
-    }, []);
-    const selectedViewSignature = useMemo(() => {
-        var _a, _b, _c;
-        if (!selectedView)
-            return '';
-        const submenuSignature = ((_a = selectedView.submenu) !== null && _a !== void 0 ? _a : []).map((item) => {
-            var _a;
-            return ({
-                name: item.name,
-                selected: item.selected,
-                menuItems: ((_a = item.menuItems) !== null && _a !== void 0 ? _a : []).map((menuItem) => ({
-                    name: menuItem.name,
-                    selected: menuItem.selected,
-                })),
-            });
-        });
-        const columnsSignature = (_b = selectedView.columns) !== null && _b !== void 0 ? _b : [];
-        const viewWithLayout = selectedView;
-        const layoutSignature = ((_c = viewWithLayout.layout) !== null && _c !== void 0 ? _c : []).map((layout) => {
-            var _a;
-            return ({
-                code: layout.code,
-                columns: ((_a = layout.columns) !== null && _a !== void 0 ? _a : []).map((col) => col.code),
-            });
-        });
-        return JSON.stringify({
-            id: selectedView.id,
-            columns: columnsSignature,
-            submenu: submenuSignature,
-            layout: layoutSignature,
-        });
-    }, [selectedView]);
+        var _a;
+        if (!defaultTemplate) {
+            setSelectedTemplateId(undefined);
+            return;
+        }
+        if (!(view === null || view === void 0 ? void 0 : view.id) || view.id === 'default') {
+            setSelectedTemplateId(defaultTemplate.id);
+            return;
+        }
+        const matchingTemplate = templates.find((t) => t.id === view.id);
+        setSelectedTemplateId((_a = matchingTemplate === null || matchingTemplate === void 0 ? void 0 : matchingTemplate.id) !== null && _a !== void 0 ? _a : defaultTemplate.id);
+    }, [templates, defaultTemplate]);
     const columnsViewData = useMemo(() => {
-        const currentSelectedView = selectedView;
+        var _a;
+        const selectedTemplate = (_a = templates.find((t) => (selectedTemplateId ? t.id === selectedTemplateId : false))) !== null && _a !== void 0 ? _a : defaultTemplate;
         let templateColumnsView = [];
-        if (currentSelectedView) {
-            const viewWithLayout = currentSelectedView;
-            const hasLayout = !!viewWithLayout.layout;
-            templateColumnsView = convertTemplateToColumnsView(viewWithLayout, tableMode);
-            if (templateColumnsView.length === 0 && !hasLayout && (templates === null || templates === void 0 ? void 0 : templates.length) > 0) {
-                templateColumnsView = convertTemplatesToColumnsView(templates, tableMode);
-            }
-        }
-        if (templateColumnsView.length === 0 && !currentSelectedView && (templates === null || templates === void 0 ? void 0 : templates.length) > 0) {
-            templateColumnsView = convertTemplatesToColumnsView(templates, tableMode);
+        if (selectedTemplate) {
+            templateColumnsView = convertTemplateToColumnsView(selectedTemplate, tableMode);
         }
         if (templateColumnsView.length === 0) {
             return [];
@@ -113,14 +92,14 @@ export function useCustomTableViews({ templates, setTemplates, createTemplate, u
                     selected: mod.selected,
                 });
             }
-            return result;
+            return addRequiredColumns(result, tableMode);
         }
-        return templateColumnsView;
-    }, [tableMode, templates, selectedView === null || selectedView === void 0 ? void 0 : selectedView.id, selectedViewSignature, columnModifiers]);
+        return addRequiredColumns(templateColumnsView, tableMode);
+    }, [tableMode, templates, selectedTemplateId, defaultTemplate, columnModifiers]);
     return {
         customViews,
         onViewChange,
         columnsViewData,
-        selectedViewId: selectedView === null || selectedView === void 0 ? void 0 : selectedView.id,
+        selectedViewId: selectedTemplateId,
     };
 }

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

@@ -1,6 +1,8 @@
-import { useMemo } from 'react';
+import { useMemo, useRef } from 'react';
 import { mapTemplatesToMenuItems, deepCloneColumns } from '../utils';
 export const useViewsManager = ({ tableMode, templates, lang = 'en' }) => {
+    var _a;
+    const initialDefaultColumnsRef = useRef({});
     const parsedData = useMemo(() => {
         if (!templates || templates.length === 0) {
             return {
@@ -19,6 +21,9 @@ export const useViewsManager = ({ tableMode, templates, lang = 'en' }) => {
             defaultColumns,
         };
     }, [templates, tableMode, lang]);
+    if (!initialDefaultColumnsRef.current[tableMode] && parsedData.defaultColumns.length > 0) {
+        initialDefaultColumnsRef.current[tableMode] = parsedData.defaultColumns;
+    }
     return {
         menuItems: parsedData.menuItems,
         defaultItem: parsedData.defaultItem,
@@ -27,6 +32,6 @@ export const useViewsManager = ({ tableMode, templates, lang = 'en' }) => {
         customViews: parsedData.menuItems,
         defaultTemplate: parsedData.defaultItem,
         allTemplates: parsedData.allItems,
-        baseDefaultColumns: parsedData.defaultColumns,
+        baseDefaultColumns: (_a = initialDefaultColumnsRef.current[tableMode]) !== null && _a !== void 0 ? _a : parsedData.defaultColumns,
     };
 };

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

@@ -98,16 +98,26 @@ export const useViewsMenu = ({ mode, onViewChange, onCreateCustomView, onEditCus
         setAnchorEl(null);
     }, []);
     const handleOpenEditDialog = useCallback((view) => {
-        setEditingView(view);
+        var _a;
+        const latestView = (_a = allTemplates.find((templateView) => templateView.id === view.id)) !== null && _a !== void 0 ? _a : view;
+        setEditingView(latestView);
         setShouldUseCurrentState(true);
         setIsCreateDialogOpen(true);
-    }, []);
+    }, [allTemplates]);
     const handleCloseCreateDialog = useCallback(() => {
         setIsCreateDialogOpen(false);
         setEditingView(null);
         setShouldUseCurrentState(false);
         setInitialColumnsForCreate(null);
     }, []);
+    useEffect(() => {
+        if (!isCreateDialogOpen || !(editingView === null || editingView === void 0 ? void 0 : editingView.id))
+            return;
+        const latestEditingView = allTemplates.find((view) => view.id === editingView.id);
+        if (latestEditingView) {
+            setEditingView(latestEditingView);
+        }
+    }, [isCreateDialogOpen, editingView === null || editingView === void 0 ? void 0 : editingView.id, allTemplates]);
     const handleSaveView = useCallback((data) => __awaiter(void 0, void 0, void 0, function* () {
         if (editingView) {
             const viewId = editingView.id;

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

@@ -125,8 +125,6 @@ export interface ViewsDropdownProps {
     setSelectedViewInfo: (selected: ViewOption, viewMenuItem?: ViewMenuItem) => void;
     anchorEl: Element | null;
     onClose?: () => void;
-    defaultModified?: boolean;
-    onMarkDefaultModified?: () => void;
     onCreateCustomView?: (useCurrentState?: boolean, initialColumns?: ColumnViewProps[]) => void;
     customViews?: ViewMenuItem[];
     onEditCustomView?: (view: ViewMenuItem) => void;

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

@@ -0,0 +1,17 @@
+import type { ColumnsView, TableMode } from '../../../../types/index.js';
+import type { Template } from '../types';
+import { updateColumnSelection } from '../../../../utils/index.js';
+export { updateColumnSelection };
+export declare const getLayoutCodesForMode: (mode: TableMode) => string[];
+export declare const getOtherModeSectionCode: (mode: TableMode) => string;
+export declare const buildRequiredColumnView: (code: 'date' | 'index', sortOrder: number) => {
+    code: "date" | "index";
+    name: {
+        text: "Date" | "Index";
+        lang: string;
+    }[];
+    selected: boolean;
+    sort_order: number;
+};
+export declare const addRequiredColumns: (columns: ColumnsView[], mode: TableMode) => ColumnsView[];
+export declare const hasLayoutSectionForMode: (template: Template | undefined, mode: TableMode) => boolean;

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

@@ -0,0 +1,30 @@
+import { CUSTOM_TABLE_MODE_ALIASES, OTHER_SECTION_CODE, CUSTOM_TABLE_REQUIRED_COLUMN_LABELS } from '../constants';
+import { isTableSheetMode, updateColumnSelection } from '../../../../utils/index.js';
+export { updateColumnSelection };
+const getColumnKey = (column) => { var _a, _b, _c, _d; return (_d = ((_a = column.code) !== null && _a !== void 0 ? _a : (_c = (_b = column.name) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.text)) === null || _d === void 0 ? void 0 : _d.toLowerCase(); };
+export const getLayoutCodesForMode = (mode) => { var _a; return [...((_a = CUSTOM_TABLE_MODE_ALIASES[mode]) !== null && _a !== void 0 ? _a : CUSTOM_TABLE_MODE_ALIASES.default)]; };
+export const getOtherModeSectionCode = (mode) => { var _a; return (_a = OTHER_SECTION_CODE[mode]) !== null && _a !== void 0 ? _a : OTHER_SECTION_CODE.default; };
+export const buildRequiredColumnView = (code, sortOrder) => ({
+    code,
+    name: [{ text: CUSTOM_TABLE_REQUIRED_COLUMN_LABELS[code], lang: 'en' }],
+    selected: true,
+    sort_order: sortOrder,
+});
+export const addRequiredColumns = (columns, mode) => {
+    var _a, _b;
+    const updatedColumns = [...columns];
+    const existingDate = updatedColumns.find((column) => getColumnKey(column) === 'date');
+    const dateColumn = existingDate ? Object.assign(Object.assign({}, existingDate), { code: (_a = existingDate.code) !== null && _a !== void 0 ? _a : 'date', selected: true }) : buildRequiredColumnView('date', 1);
+    const existingIndex = updatedColumns.find((column) => getColumnKey(column) === 'index');
+    const indexColumn = isTableSheetMode(mode)
+        ? existingIndex
+            ? Object.assign(Object.assign({}, existingIndex), { code: (_b = existingIndex.code) !== null && _b !== void 0 ? _b : 'index', selected: true }) : buildRequiredColumnView('index', 0)
+        : undefined;
+    const restColumns = updatedColumns.filter((column) => {
+        const key = getColumnKey(column);
+        return key !== 'index' && key !== 'date';
+    });
+    const orderedColumns = isTableSheetMode(mode) ? [indexColumn, dateColumn, ...restColumns] : [dateColumn, ...restColumns];
+    return orderedColumns.filter((column) => Boolean(column));
+};
+export const hasLayoutSectionForMode = (template, mode) => { var _a, _b; return (_b = (_a = template === null || template === void 0 ? void 0 : template.layout) === null || _a === void 0 ? void 0 : _a.some((section) => { var _a, _b; return getLayoutCodesForMode(mode).includes((_b = (_a = section.code) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== null && _b !== void 0 ? _b : ''); })) !== null && _b !== void 0 ? _b : false; };

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

@@ -2,5 +2,5 @@ export { isDateColumn, transformLayoutToColumns, getColumnsByMode, convertColumn
 export { createCustomViewMenuItem, setViewAsDefault, transformTemplatesToViewMenuItems, mapTemplatesToMenuItems, getSubmenuItems, getSubmenuItemsForDisplay, hasSubmenu, } from './viewMenu';
 export { getColumnCheckState, toggleColumn, toggleSubItem, toggleAllColumns, areAllColumnsSelected, areSomeColumnsSelected, isValidTemplateName, deepCloneColumns, toggleSingleColumn, toggleAllCurrentColumns, areAllCurrentColumnsSelected, areSomeCurrentColumnsSelected, normalizeColumnsSelected, areColumnsEqual, resetColumnsToDefault, initializeEditingColumns, initializeCreateColumns, initializeCreateColumnsWithCurrentState, } from './columnState';
 export { getSubmenuFromTemplateLayout, getColumnOrder, handleTemplateUpdate, templateToViewMenuItem, convertTemplateToColumnsView, convertTemplatesToColumnsView, } from './templateToColumnsView';
-export { isTemplateMatchingId, replaceTemplateInList, updateCurrentTemplate } from './templateState';
-export type { TemplateLike } from './templateState';
+export { replaceTemplateInList, updateCurrentTemplate } from './templateState';
+export { getLayoutCodesForMode, getOtherModeSectionCode, buildRequiredColumnView, addRequiredColumns, hasLayoutSectionForMode, updateColumnSelection, } from './customTableViews';

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

@@ -2,4 +2,5 @@ export { isDateColumn, transformLayoutToColumns, getColumnsByMode, convertColumn
 export { createCustomViewMenuItem, setViewAsDefault, transformTemplatesToViewMenuItems, mapTemplatesToMenuItems, getSubmenuItems, getSubmenuItemsForDisplay, hasSubmenu, } from './viewMenu';
 export { getColumnCheckState, toggleColumn, toggleSubItem, toggleAllColumns, areAllColumnsSelected, areSomeColumnsSelected, isValidTemplateName, deepCloneColumns, toggleSingleColumn, toggleAllCurrentColumns, areAllCurrentColumnsSelected, areSomeCurrentColumnsSelected, normalizeColumnsSelected, areColumnsEqual, resetColumnsToDefault, initializeEditingColumns, initializeCreateColumns, initializeCreateColumnsWithCurrentState, } from './columnState';
 export { getSubmenuFromTemplateLayout, getColumnOrder, handleTemplateUpdate, templateToViewMenuItem, convertTemplateToColumnsView, convertTemplatesToColumnsView, } from './templateToColumnsView';
-export { isTemplateMatchingId, replaceTemplateInList, updateCurrentTemplate } from './templateState';
+export { replaceTemplateInList, updateCurrentTemplate } from './templateState';
+export { getLayoutCodesForMode, getOtherModeSectionCode, buildRequiredColumnView, addRequiredColumns, hasLayoutSectionForMode, updateColumnSelection, } from './customTableViews';

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

@@ -1,9 +1,6 @@
 import type { LayoutSection, Template } from '../types';
-/** Minimal template shape for state helpers (id required for matching) */
-export type TemplateLike = Pick<Template, 'id'> & Partial<Pick<Template, 'name' | 'default' | 'layout'>>;
-export declare function isTemplateMatchingId(template: TemplateLike, id: string): boolean;
 export declare function replaceTemplateInList<T>(prev: T[], match: (t: T) => boolean, replacement: T): T[];
-export declare function updateCurrentTemplate(template: TemplateLike | undefined, editData: {
+export declare function updateCurrentTemplate(template: Template | undefined, editData: {
     name?: string;
     layout?: LayoutSection | LayoutSection[];
 }): {

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

@@ -1,6 +1,3 @@
-export function isTemplateMatchingId(template, id) {
-    return template.id === id;
-}
 export function replaceTemplateInList(prev, match, replacement) {
     const idx = prev.findIndex(match);
     if (idx === -1)

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

@@ -23,7 +23,8 @@ export const transformTemplatesToViewMenuItems = (templates, mode = 'sheet', lan
         const withDate = columns.some((c) => { var _a; return ((_a = c.name) !== null && _a !== void 0 ? _a : '').toLowerCase() === 'date'; }) ? columns : [dateColumn, ...columns];
         const dateIndex = withDate.findIndex((c) => { var _a; return ((_a = c.name) !== null && _a !== void 0 ? _a : '').toLowerCase() === 'date'; });
         const withDateFirst = dateIndex > 0 ? [withDate[dateIndex], ...withDate.filter((c) => { var _a; return ((_a = c.name) !== null && _a !== void 0 ? _a : '').toLowerCase() !== 'date'; })] : withDate;
-        const finalColumns = [indexColumn, ...withDateFirst];
+        const withoutIndex = withDateFirst.filter((c) => { var _a; return ((_a = c.name) !== null && _a !== void 0 ? _a : '').toLowerCase() !== 'index'; });
+        const finalColumns = [indexColumn, ...withoutIndex];
         const item = {
             id: template.default ? 'default' : viewId,
             label: template.name,

package/build/utils/columns.d.ts

@@ -1,11 +1,5 @@
 import type { IColumnProps, ColumnViewProps, ColumnsView } from '../types/index.js';
-export declare function filterShownColumns<T>(columns: Array<IColumnProps<T & {
-    actions: string;
-    action_icon?: string;
-}>>, tableViews: ColumnViewProps[]): IColumnProps<T & {
-    actions: string;
-    action_icon?: string | undefined;
-}>[];
+export declare function filterShownColumns(columns: IColumnProps[], tableViews: ColumnViewProps[], isCustomView?: boolean): IColumnProps<any>[];
 export declare function isParameterSelected(columns: ColumnViewProps[], columnId: string, parameter: string): boolean;
 export declare function mapDataToViews(columnData?: ColumnsView[], language?: string): ColumnViewProps[];
 export declare function mapViewsToData(columns: ColumnViewProps[]): ColumnsView[];

package/build/utils/columns.js

@@ -1,6 +1,6 @@
 import startCase from 'lodash/startCase';
 import { getNameText } from './index.js';
-export function filterShownColumns(columns, tableViews) {
+export function filterShownColumns(columns, tableViews, isCustomView) {
     return columns.filter((column) => {
         var _a, _b, _c, _d, _e;
         const columnId = (_a = column === null || column === void 0 ? void 0 : column.id) === null || _a === void 0 ? void 0 : _a.toString();
@@ -13,7 +13,8 @@ export function filterShownColumns(columns, tableViews) {
         const isColumnWithMenuItems = !!column.tableViewId && (((_b = selectedColumn === null || selectedColumn === void 0 ? void 0 : selectedColumn.menuItems) === null || _b === void 0 ? void 0 : _b.length) || 0) > 0;
         const isMenuItemSelected = (_d = (_c = selectedColumn === null || selectedColumn === void 0 ? void 0 : selectedColumn.menuItems) === null || _c === void 0 ? void 0 : _c.find((item) => { var _a, _b, _c; return ((_a = item.name) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_c = (_b = column.tableViewId) === null || _b === void 0 ? void 0 : _b.toString()) === null || _c === void 0 ? void 0 : _c.toLowerCase()); })) === null || _d === void 0 ? void 0 : _d.selected;
         const isColumnSelected = !!selectedColumn && (isMenuItemSelected || !isColumnWithMenuItems);
-        const isBasicColumn = ['actions', 'action_icon'].includes((_e = columnId === null || columnId === void 0 ? void 0 : columnId.toLowerCase()) !== null && _e !== void 0 ? _e : '');
+        const customViewFixedColumns = isCustomView ? ['index', 'date'] : [];
+        const isBasicColumn = ['actions', 'action_icon', ...customViewFixedColumns].includes((_e = columnId === null || columnId === void 0 ? void 0 : columnId.toLowerCase()) !== null && _e !== void 0 ? _e : '');
         if (isColumnSelected || isBasicColumn) {
             return true;
         }
@@ -32,14 +33,13 @@ export function isParameterSelected(columns, columnId, parameter) {
 export function mapDataToViews(columnData, language) {
     var _a;
     return (((_a = columnData === null || columnData === void 0 ? void 0 : columnData.filter((c) => { var _a, _b; return !!((_b = (_a = c.name) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.text); })) === null || _a === void 0 ? void 0 : _a.map((column) => {
-        var _a;
+        var _a, _b, _c;
         return ({
             code: column.code,
             label: getNameText(column.name, language),
             name: getNameText(column.name, language) || '',
             selected: (column === null || column === void 0 ? void 0 : column.selected) !== false,
-            menuItems: (_a = column.fields
-                .map((field) => {
+            menuItems: (_c = (_b = (_a = column.fields) === null || _a === void 0 ? void 0 : _a.map((field) => {
                 var _a, _b;
                 return (_b = (_a = field.parameters) === null || _a === void 0 ? void 0 : _a.filter((p) => !!p.code)) === null || _b === void 0 ? void 0 : _b.map((param) => {
                     return {
@@ -48,8 +48,7 @@ export function mapDataToViews(columnData, language) {
                         selected: (param === null || param === void 0 ? void 0 : param.selected) !== false,
                     };
                 });
-            })
-                .flat()) === null || _a === void 0 ? void 0 : _a.filter((item) => !!item.name),
+            })) === null || _b === void 0 ? void 0 : _b.flat()) === null || _c === void 0 ? void 0 : _c.filter((item) => !!item.name),
         });
     })) || []);
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.1.439",
+  "version": "0.1.440",
   "testVersion": 0,
   "type": "module",
   "main": "build/index.js",