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

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

@@ -20,7 +20,7 @@ function ViewSelector({ onViewChange, setIsViewVisible, setTableViews, tableView
     });
     const tableViews = externalTableViews !== null && externalTableViews !== void 0 ? externalTableViews : internalTableViews;
     const customViews = externalCustomViews !== null && externalCustomViews !== void 0 ? externalCustomViews : internalCustomViews;
-    const { anchorViewEl, defaultViewEl, setDefaultViewElement, isCreateDialogOpen, editingView, selectedViewInfo, shouldUseCurrentState, handleViewButtonClick, handleCloseViewDropdown, handleSelectedViewInfo, handleOpenCreateDialog, handleOpenEditDialog, handleCloseCreateDialog, handleSaveView, handleDeleteView, handleResetViews, handleTableViewsChange, } = useViewSelector({
+    const { anchorViewEl, defaultViewEl, setDefaultViewElement, isCreateDialogOpen, editingView, selectedViewInfo, shouldUseCurrentState, handleViewButtonClick, handleCloseViewDropdown, handleSelectedViewInfo, handleOpenCreateDialog, handleOpenEditDialog, handleCloseCreateDialog, handleSaveView, handleDeleteView, handleResetViews, handleTableViewsChange, updateSelectedView, } = useViewSelector({
         mode,
         onViewChange,
         onTableViewsChange,
@@ -40,6 +40,6 @@ function ViewSelector({ onViewChange, setIsViewVisible, setTableViews, tableView
     });
     return (_jsxs(_Fragment, { children: [_jsx(ClickAwayListener, Object.assign({ onClickAway: handleCloseViewDropdown }, { children: _jsxs(ViewWrapper, Object.assign({ sx: { width: '32px' }, "data-testid": "ViewSelector" }, { children: [_jsx(StyledButton, Object.assign({ title: t('tableView'), "data-testid": "ViewSelector_button", onClick: handleViewButtonClick }, { children: _jsx(Icon, { src: viewIcon, alt: "view", sx: { width: 14, height: 14 } }) })), _jsx(ViewsDropdown, { open: Boolean(defaultViewEl), anchorEl: anchorViewEl, setSelectedViewInfo: handleSelectedViewInfo, selectedViewInfo: selectedViewInfo, onSelect: (e, selectedView) => {
                                 setDefaultViewElement(defaultViewEl ? null : e.currentTarget);
-                            }, setViews: handleResetViews, tableViews: tableViews, setTableViews: handleTableViewsChange, onCreateCustomView: handleOpenCreateDialog, customViews: customViews, onEditCustomView: handleOpenEditDialog, defaultColumns: defaultColumns, setDefaultColumns: setDefaultColumns, onViewChange: onViewChange })] })) })), _jsx(CreateViewDialog, { open: isCreateDialogOpen, onClose: handleCloseCreateDialog, availableColumns: defaultColumns, defaultColumns: defaultColumns, onCreate: handleSaveView, editingView: editingView, onDelete: handleDeleteView, tableViews: shouldUseCurrentState ? defaultColumns : undefined, mode: mode })] }));
+                            }, setViews: handleResetViews, tableViews: tableViews, setTableViews: handleTableViewsChange, onCreateCustomView: handleOpenCreateDialog, customViews: customViews, onEditCustomView: handleOpenEditDialog, defaultColumns: defaultColumns, setDefaultColumns: setDefaultColumns, updateSelectedView: updateSelectedView })] })) })), _jsx(CreateViewDialog, { open: isCreateDialogOpen, onClose: handleCloseCreateDialog, availableColumns: defaultColumns, defaultColumns: defaultColumns, onCreate: handleSaveView, editingView: editingView, onDelete: handleDeleteView, tableViews: shouldUseCurrentState ? defaultColumns : undefined, mode: mode })] }));
 }
 export default memo(ViewSelector);

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

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

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

@@ -14,7 +14,7 @@ import { defaultViewList } from './data';
 import { ViewsSubmenu } from './components/ViewsSubmenu';
 import { ListStyled, DropdownStyled, MenuItem as StyledMenuItem, Space, SpaceAfter, SubmenuContainer, SaveCustomViewBox, SaveCustomViewInnerBox, ButtonsContainer, CancelButtonSx, OkayButtonSx, ModifiedTextSx, } from './styles';
 import { deepCloneColumns, toggleSingleColumn, toggleSubItem, getSubmenuItems, hasSubmenu, areAllCurrentColumnsSelected, areSomeCurrentColumnsSelected, toggleAllCurrentColumns, areColumnsEqual, } from './utils';
-function ViewsDropdown({ open, selectedViewInfo, setSelectedViewInfo, onSelect, setViews, anchorEl, onCreateCustomView, customViews = [], onEditCustomView, defaultColumns = [], setDefaultColumns, onViewChange, }) {
+function ViewsDropdown({ open, selectedViewInfo, setSelectedViewInfo, onSelect, setViews, anchorEl, onCreateCustomView, customViews = [], onEditCustomView, defaultColumns = [], setDefaultColumns, updateSelectedView, }) {
     const { t } = useTranslation();
     const { hoveredColumn: hoveredItem, anchorEl: submenuAnchorEl, openSubmenu: handleMenuItemHover, closeSubmenu: handleMenuItemLeave, cancelClose: handleSubmenuEnter, forceClose: forceCloseSubmenu, } = useSubmenuHover();
     const [hoveredCustomView, setHoveredCustomView] = React.useState(null);
@@ -123,15 +123,15 @@ function ViewsDropdown({ open, selectedViewInfo, setSelectedViewInfo, onSelect,
             setIsDefaultModified(hasChanges);
             if (hasChanges) {
                 setBaselineColumns(deepCloneColumns(originalColumns));
-                // Update table when default columns change and default view is selected
-                if (selectedViewInfo.id === 'default' && defaultColumns.length > 0) {
+                // Update selected view internally and notify parent via callback
+                if (selectedViewInfo.id === 'default' && defaultColumns.length > 0 && updateSelectedView) {
                     const defaultViewWithColumns = {
                         id: 'default',
                         label: 'Default',
                         submenu: [...defaultColumns],
                         columns: defaultColumns.map((col) => col.name),
                     };
-                    onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(defaultViewWithColumns);
+                    updateSelectedView(defaultViewWithColumns);
                 }
             }
             else {

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

@@ -54,4 +54,5 @@ export declare const useViewSelector: ({ mode, onViewChange, onTableViewsChange,
     handleDeleteView: (viewId: string) => Promise<void>;
     handleResetViews: (views: string[]) => void;
     handleTableViewsChange: (newTableViews: ColumnViewProps[]) => void;
+    updateSelectedView: (updatedView: ViewMenuItem) => void;
 };

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

@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { useState, useCallback, useEffect } from 'react';
+import { useState, useCallback, useEffect, useRef } from 'react';
 import { createCustomViewMenuItem } from '../utils';
 export const useViewSelector = ({ mode, onViewChange, onTableViewsChange, onCustomViewsChange, onCreateCustomView, onEditCustomView, onDeleteCustomView, resetTableViews, setTableViews, tableViews, customViews, defaultColumns, defaultTemplate, setInternalCustomViews, setInternalTableViews, setDefaultColumns, }) => {
     const [anchorViewEl, setAnchorViewEl] = useState(null);
@@ -17,6 +17,7 @@ export const useViewSelector = ({ mode, onViewChange, onTableViewsChange, onCust
     const [selectedViewInfo, setSelectedViewInfo] = useState({ id: 'default', label: 'Default' });
     const [shouldUseCurrentState, setShouldUseCurrentState] = useState(false);
     const [selectedView, setSelectedView] = useState(undefined);
+    const hasInitializedRef = useRef(false);
     // Update editingView when customViews changes to ensure it reflects the latest saved state
     useEffect(() => {
         if (editingView && customViews.length > 0) {
@@ -43,14 +44,18 @@ export const useViewSelector = ({ mode, onViewChange, onTableViewsChange, onCust
             }
         }
     }, [customViews, selectedView, onViewChange]);
-    // Notify parent of initial view on mount
+    // Notify parent of initial view on mount only
     useEffect(() => {
+        // Only initialize once on mount, don't reset if user has already selected a view
+        if (hasInitializedRef.current)
+            return;
         // Use defaultTemplate if available, otherwise undefined (built-in default view)
         const initialView = defaultTemplate || undefined;
         console.log('initialView', initialView);
         setSelectedView(initialView);
         onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(initialView);
-    }, [onViewChange, defaultTemplate]);
+        hasInitializedRef.current = true;
+    }, [defaultTemplate, onViewChange]);
     const handleTableViewsChange = useCallback((newTableViews) => {
         const setTableViewsState = setTableViews !== null && setTableViews !== void 0 ? setTableViews : setInternalTableViews;
         setTableViewsState(newTableViews);
@@ -81,6 +86,13 @@ export const useViewSelector = ({ mode, onViewChange, onTableViewsChange, onCust
         onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(newSelectedView);
         handleCloseViewDropdown();
     }, [handleCloseViewDropdown, onViewChange]);
+    // Internal function to update selected view and notify parent
+    // Used when default columns change via "Okay" button
+    const updateSelectedView = useCallback((updatedView) => {
+        setSelectedView(updatedView);
+        setSelectedViewInfo({ id: updatedView.id, label: updatedView.label });
+        onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(updatedView);
+    }, [onViewChange, setSelectedViewInfo]);
     const handleOpenCreateDialog = useCallback((useCurrentState = false) => {
         setEditingView(null);
         setShouldUseCurrentState(useCurrentState);
@@ -173,5 +185,6 @@ export const useViewSelector = ({ mode, onViewChange, onTableViewsChange, onCust
         handleDeleteView,
         handleResetViews,
         handleTableViewsChange,
+        updateSelectedView,
     };
 };

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

@@ -350,18 +350,24 @@ export const ResetCheckboxSx = {
 };
 export const SubmenuContainer = styled(Box)(() => ({
     minWidth: 200,
+    display: 'flex',
+    flexDirection: 'column',
+    maxHeight: '80vh',
+    overflow: 'hidden',
 }));
 export const ColumnItemsContainer = styled(Box)(() => ({
-    maxHeight: 300,
+    flex: 1,
     overflowY: 'auto',
     paddingLeft: 6,
     paddingRight: 6,
+    minHeight: 0,
 }));
 export const SaveCustomViewBox = styled(Box)(() => ({
     paddingLeft: 8,
     paddingRight: 8,
     paddingTop: 8,
     paddingBottom: 8,
+    flexShrink: 0,
 }));
 export const SaveCustomViewInnerBox = styled(Box)(({ disabled }) => ({
     width: '100%',
@@ -376,7 +382,7 @@ export const SaveCustomViewInnerBox = styled(Box)(({ disabled }) => ({
     cursor: disabled ? 'not-allowed' : 'pointer',
     opacity: disabled ? 0.5 : 1,
 }));
-export const ButtonsContainer = styled(Box)(() => ({
+export const ButtonsContainer = styled(Box)(({ theme }) => ({
     display: 'flex',
     justifyContent: 'flex-end',
     gap: 12,
@@ -384,6 +390,9 @@ export const ButtonsContainer = styled(Box)(() => ({
     paddingBottom: 8,
     paddingLeft: 12,
     paddingRight: 12,
+    flexShrink: 0,
+    borderTop: '1px solid',
+    borderColor: theme.palette.divider,
 }));
 export const CancelButtonSx = {
     fontSize: 11,

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

@@ -132,7 +132,7 @@ export interface ViewsDropdownProps {
     onEditCustomView?: (view: ViewMenuItem) => void;
     defaultColumns?: ColumnViewProps[];
     setDefaultColumns?: (columns: ColumnViewProps[]) => void;
-    onViewChange?: (selectedView?: ViewMenuItem) => void;
+    updateSelectedView?: (view: ViewMenuItem) => void;
 }
 export interface ColumnListProps {
     selectedColumns: ColumnViewProps[];

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