@tap-payments/os-micro-frontend-shared 0.1.373-test.3-test.4-test.5-test.6-test.7-test.8 → 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/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-test.8",
-  "testVersion": 8,
+  "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",