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

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

@@ -117,10 +117,11 @@ function ViewsDropdown({ open, selectedViewInfo, setSelectedViewInfo, anchorEl,
     }
     function goToCreateCustomView(e) {
         e.stopPropagation();
+        const colsToUse = (draftColumns === null || draftColumns === void 0 ? void 0 : draftColumns.length) ? draftColumns : defaultColumns;
+        onCreateCustomView === null || onCreateCustomView === void 0 ? void 0 : onCreateCustomView(true, colsToUse);
         setDraftColumns(null);
         clearOriginalState();
         forceClose();
-        onCreateCustomView === null || onCreateCustomView === void 0 ? void 0 : onCreateCustomView(true);
     }
     return (_jsxs(DropdownStyled, Object.assign({ "data-testid": "ViewsDropdown" }, { children: [_jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: "bottom-start" }, { children: _jsxs(ListStyled, { children: [_jsx(Typography, Object.assign({ sx: { paddingX: 1.25, py: 1.1, fontWeight: 500, fontSize: 11, color: '#8D8D94' } }, { children: "View" })), _jsx(Divider, {}), views.map((item) => (_jsxs(StyledMenuItem, Object.assign({ onMouseEnter: (e) => {
                                 if (item.isCustom)
@@ -144,8 +145,9 @@ function ViewsDropdown({ open, selectedViewInfo, setSelectedViewInfo, anchorEl,
                                     e.stopPropagation();
                                     if (atCustomViewLimit)
                                         return;
-                                    discardAndClose();
-                                    onCreateCustomView === null || onCreateCustomView === void 0 ? void 0 : onCreateCustomView(false);
+                                    const colsToUse = (draftColumns === null || draftColumns === void 0 ? void 0 : draftColumns.length) ? draftColumns : defaultColumns;
+                                    onCreateCustomView === null || onCreateCustomView === void 0 ? void 0 : onCreateCustomView(true, colsToUse);
+                                    forceClose();
                                 } }, { children: [_jsx(Space, {}), _jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: 0.5 } }, { children: [_jsx("img", { src: bluePlusIcon, alt: "", style: { opacity: atCustomViewLimit ? 0.5 : 1, width: 10, height: 10 } }), _jsx("span", Object.assign({ style: { color: atCustomViewLimit ? '#999' : '#1F88D0', fontSize: 11, fontWeight: 500 } }, { children: t('New Custom View') }))] })), _jsx(SpaceAfter, {})] })) }))] }) })), hoveredViewId && submenuAnchorEl && submenuColumns.length > 0 && (_jsx(Menu, Object.assign({ open: true, anchorEl: submenuAnchorEl, placement: "auto-end", onMouseEnter: cancelClose, onMouseLeave: discardAndClose }, { children: _jsxs(SubmenuContainer, { children: [_jsx(ViewsSubmenu, { columns: submenuColumns, allCurrentSelected: allSelected, someCurrentSelected: someSelected, onSelectAll: selectAllColumns, onReset: resetToBaseDefault, onColumnToggle: toggleColumn, onNestedItemToggle: toggleNested, onReorder: reorderColumns, anchorEl: submenuAnchorEl, isModified: modifiedFromBase }), _jsx(SaveCustomViewBox, { children: _jsx(Tooltip, Object.assign({ title: "Limit reached. Delete a view to create a new one.", placement: "left", disableHoverListener: !atCustomViewLimit }, { children: _jsxs(SaveCustomViewInnerBox, Object.assign({ disabled: atCustomViewLimit, onClick: atCustomViewLimit ? undefined : goToCreateCustomView }, { children: [_jsx(Typography, Object.assign({ sx: { fontSize: 11, color: 'text.secondary' } }, { children: "Save as a custom view" })), _jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: 0.5 } }, { children: [_jsx("img", { src: bluePlusIcon, alt: "", style: { width: 10, height: 10, opacity: atCustomViewLimit ? 0.5 : 1 } }), _jsx(Typography, Object.assign({ sx: { fontSize: 10, fontWeight: 600, color: atCustomViewLimit ? '#999' : '#1F88D0' } }, { children: "Custom View" }))] }))] })) })) }), _jsxs(ButtonsContainer, { children: [_jsx(Button, Object.assign({ variant: "text", onClick: discardAndClose, sx: CancelButtonSx }, { children: "Cancel" })), _jsx(Button, Object.assign({ variant: "contained", onClick: applyAndClose, sx: OkayButtonSx }, { children: "Okay" }))] })] }) })))] })));
 }
 export default React.memo(ViewsDropdown);

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

@@ -59,7 +59,7 @@ function ViewsMenu({ onViewChange, onCreateCustomView, onEditCustomView, onDelet
         }));
         setModifiedModes((current) => (Object.assign(Object.assign({}, current), { [tableMode]: true })));
     }), [defaultTemplate, tableMode, lang, onEditCustomView, updateDefaultColumns]);
-    const { anchorEl, isCreateDialogOpen, editingView, selectedViewInfo, shouldUseCurrentState, currentViewColumns, handleViewButtonClick, handleCloseViewDropdown, handleSelectedViewInfo, handleOpenCreateDialog, handleOpenEditDialog, handleCloseCreateDialog, handleSaveView, handleDeleteView, updateSelectedView, } = useViewsMenu({
+    const { anchorEl, isCreateDialogOpen, editingView, selectedViewInfo, shouldUseCurrentState, currentViewColumns, initialColumnsForCreate, handleViewButtonClick, handleCloseViewDropdown, handleSelectedViewInfo, handleOpenCreateDialog, handleOpenEditDialog, handleCloseCreateDialog, handleSaveView, handleDeleteView, updateSelectedView, } = useViewsMenu({
         mode: tableMode,
         onViewChange,
         onCreateCustomView,
@@ -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: 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 ? (initialColumnsForCreate !== null && initialColumnsForCreate !== void 0 ? initialColumnsForCreate : currentViewColumns) : undefined, mode: tableMode })] }));
 }
 export default memo(ViewsMenu);

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

@@ -31,10 +31,11 @@ export declare const useViewsMenu: ({ mode, onViewChange, onCreateCustomView, on
     shouldUseCurrentState: boolean;
     selectedView: ViewMenuItem | undefined;
     currentViewColumns: ColumnViewProps[];
+    initialColumnsForCreate: ColumnViewProps[] | null;
     handleViewButtonClick: (event: MouseEvent<HTMLDivElement>) => void;
     handleCloseViewDropdown: () => void;
     handleSelectedViewInfo: (selected: ViewOption, viewMenuItem?: ViewMenuItem) => void;
-    handleOpenCreateDialog: (useCurrentState?: boolean) => void;
+    handleOpenCreateDialog: (useCurrentState?: boolean, initialColumns?: ColumnViewProps[]) => void;
     handleOpenEditDialog: (view: ViewMenuItem) => void;
     handleCloseCreateDialog: () => void;
     handleSaveView: (data: {

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

@@ -20,6 +20,8 @@ export const useViewsMenu = ({ mode, onViewChange, onCreateCustomView, onEditCus
     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);
+    /** When opening create dialog with "current state", dropdown can pass exact columns (e.g. unsaved draft) to use. */
+    const [initialColumnsForCreate, setInitialColumnsForCreate] = useState(null);
     const [currentViewColumns, setCurrentViewColumns] = useState([]);
     const hasInitializedRef = useRef(false);
     const getViewForParent = useCallback((view) => {
@@ -147,9 +149,10 @@ export const useViewsMenu = ({ mode, onViewChange, onCreateCustomView, onEditCus
         setSelectedViewInfo({ id: viewWithNewRefs.id, label: viewWithNewRefs.label });
         onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(getViewForParent(viewWithNewRefs));
     }, [onViewChange, getViewForParent]);
-    const handleOpenCreateDialog = useCallback((useCurrentState = false) => {
+    const handleOpenCreateDialog = useCallback((useCurrentState = false, initialColumns) => {
         setEditingView(null);
         setShouldUseCurrentState(useCurrentState);
+        setInitialColumnsForCreate(initialColumns !== null && initialColumns !== void 0 ? initialColumns : null);
         setIsCreateDialogOpen(true);
         setAnchorEl(null);
     }, []);
@@ -162,6 +165,7 @@ export const useViewsMenu = ({ mode, onViewChange, onCreateCustomView, onEditCus
         setIsCreateDialogOpen(false);
         setEditingView(null);
         setShouldUseCurrentState(false);
+        setInitialColumnsForCreate(null);
     }, []);
     const handleSaveView = useCallback((data) => __awaiter(void 0, void 0, void 0, function* () {
         if (editingView) {
@@ -205,6 +209,7 @@ export const useViewsMenu = ({ mode, onViewChange, onCreateCustomView, onEditCus
         shouldUseCurrentState,
         selectedView,
         currentViewColumns,
+        initialColumnsForCreate,
         handleViewButtonClick,
         handleCloseViewDropdown,
         handleSelectedViewInfo,

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

@@ -137,7 +137,7 @@ export interface ViewsDropdownProps {
     onClose?: () => void;
     defaultModified?: boolean;
     onMarkDefaultModified?: () => void;
-    onCreateCustomView?: (useCurrentState?: boolean) => void;
+    onCreateCustomView?: (useCurrentState?: boolean, initialColumns?: ColumnViewProps[]) => void;
     customViews?: ViewMenuItem[];
     onEditCustomView?: (view: ViewMenuItem) => void;
     onSaveDefaultColumns?: (columns: ColumnViewProps[]) => void;

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

@@ -183,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)
@@ -206,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

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-test.7",
-  "testVersion": 7,
+  "version": "0.1.373-test.3-test.4-test.5-test.6-test.7-test.8-test.9",
+  "testVersion": 9,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",