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

package/build/utils/skeletonColumns.d.ts

@@ -0,0 +1,4 @@
+import type { IColumnProps } from '../types/index.js';
+export declare const DEFAULT_SKELETON_WIDTHS: string[];
+export declare const generateSkeletonColumns: (staticWidths?: string[]) => IColumnProps[];
+export declare const getProcessedColumns: <T = unknown>(columns: readonly IColumnProps<T>[], isLoading: boolean, defaultSkeleton: boolean) => IColumnProps<T>[];

package/build/utils/skeletonColumns.js

@@ -0,0 +1,17 @@
+export const DEFAULT_SKELETON_WIDTHS = ['120px', '180px', '100px', '150px', '200px', '140px', '160px', '110px', '190px', '130px'];
+export const generateSkeletonColumns = (staticWidths = DEFAULT_SKELETON_WIDTHS) => {
+    return staticWidths.map((width, index) => ({
+        id: `skeleton-col-${index}`,
+        header: '',
+        width,
+        order: index,
+        hidden: false,
+        sortable: false,
+    }));
+};
+export const getProcessedColumns = (columns, isLoading, defaultSkeleton) => {
+    if (defaultSkeleton && isLoading) {
+        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.2-test.3-test.4-test.5-test.6-test.7",
-  "testVersion": 7,
+  "version": "0.1.373-test.2",
+  "testVersion": 2,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",

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

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-import type { ViewSelectorProps } from './types';
-declare function ViewSelector({ onViewChange, setIsViewVisible, setTableViews, tableViews: externalTableViews, resetTableViews, customViews: externalCustomViews, onCreateCustomView, onEditCustomView, onDeleteCustomView, tableMode, onTableViewsChange, onCustomViewsChange, templates, lang, apiMetadata, }: ViewSelectorProps): import("react/jsx-runtime").JSX.Element;
-declare const _default: import("react").MemoExoticComponent<typeof ViewSelector>;
-export default _default;

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

@@ -1,46 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import ClickAwayListener from '@mui/material/ClickAwayListener';
-import { Icon, StyledButton } from '../../index.js';
-import { viewIcon } from '../../../constants/index.js';
-import ViewsDropdown from './ViewsDropdown';
-import CreateViewDialog from './CreateViewDialog';
-import { ViewWrapper } from './styles';
-import { useViewsManager } from './hooks';
-import { useViewSelector } from './hooks/useViewSelector';
-function ViewSelector({ onViewChange, setIsViewVisible, setTableViews, tableViews: externalTableViews, resetTableViews, customViews: externalCustomViews, onCreateCustomView, onEditCustomView, onDeleteCustomView, tableMode = 'default', onTableViewsChange, onCustomViewsChange, templates, lang = 'en', apiMetadata, }) {
-    const { t } = useTranslation();
-    // Map tableMode to viewMode: 'sheet' → 'sheet', 'default' → 'advanced'
-    const mode = tableMode === 'sheet' ? 'sheet' : 'advanced';
-    const { defaultColumns, setDefaultColumns, internalTableViews, setInternalTableViews, internalCustomViews, setInternalCustomViews, defaultTemplate, } = useViewsManager({
-        mode,
-        templates,
-        lang,
-    });
-    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, updateSelectedView, } = useViewSelector({
-        mode,
-        onViewChange,
-        onTableViewsChange,
-        onCustomViewsChange,
-        onCreateCustomView,
-        onEditCustomView,
-        onDeleteCustomView,
-        resetTableViews,
-        setTableViews,
-        tableViews,
-        customViews,
-        defaultColumns,
-        defaultTemplate,
-        setInternalCustomViews,
-        setInternalTableViews,
-        setDefaultColumns,
-        apiMetadata,
-    });
-    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, 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/hooks/useViewSelector.d.ts

@@ -1,59 +0,0 @@
-import { type MouseEvent } from 'react';
-import type { ColumnViewProps } from '../../../../types/index.js';
-import type { ViewMenuItem, LayoutSection, ViewMode, TemplateAPIMetadata } from '../types';
-import type { ViewOption } from '../../type';
-export interface UseViewSelectorProps {
-    mode: ViewMode;
-    onViewChange?: (selectedView?: ViewMenuItem) => void;
-    onTableViewsChange?: (tableViews: ColumnViewProps[]) => void;
-    onCustomViewsChange?: (customViews: ViewMenuItem[]) => void;
-    onCreateCustomView?: (data: {
-        name: string;
-        selectedColumns: ColumnViewProps[];
-        layout: LayoutSection;
-    }) => Promise<void>;
-    onEditCustomView?: (viewId: string, data: {
-        name: string;
-        selectedColumns: ColumnViewProps[];
-        layout: LayoutSection;
-    }) => Promise<void>;
-    onDeleteCustomView?: (viewId: string) => Promise<void>;
-    resetTableViews?: (view: {
-        id: string;
-        label: string;
-    }) => void;
-    setTableViews?: (columns: ColumnViewProps[]) => void;
-    tableViews: ColumnViewProps[];
-    customViews: ViewMenuItem[];
-    defaultColumns: ColumnViewProps[];
-    defaultTemplate?: ViewMenuItem;
-    setInternalCustomViews: (views: ViewMenuItem[]) => void;
-    setInternalTableViews: (views: ColumnViewProps[]) => void;
-    setDefaultColumns?: (columns: ColumnViewProps[]) => void;
-    apiMetadata?: TemplateAPIMetadata;
-}
-export declare const useViewSelector: ({ mode, onViewChange, onTableViewsChange, onCustomViewsChange, onCreateCustomView, onEditCustomView, onDeleteCustomView, resetTableViews, setTableViews, tableViews, customViews, defaultColumns, defaultTemplate, setInternalCustomViews, setInternalTableViews, setDefaultColumns, apiMetadata, }: UseViewSelectorProps) => {
-    anchorViewEl: HTMLDivElement | null;
-    defaultViewEl: HTMLDivElement | null;
-    setDefaultViewElement: import("react").Dispatch<import("react").SetStateAction<HTMLDivElement | null>>;
-    isCreateDialogOpen: boolean;
-    editingView: ViewMenuItem | null;
-    selectedViewInfo: ViewOption;
-    shouldUseCurrentState: boolean;
-    handleViewButtonClick: (event: MouseEvent<HTMLDivElement>) => void;
-    handleCloseViewDropdown: () => void;
-    handleClose: () => void;
-    handleSelectedViewInfo: (selected: ViewOption, viewMenuItem?: ViewMenuItem) => void;
-    handleOpenCreateDialog: (useCurrentState?: boolean) => void;
-    handleOpenEditDialog: (view: ViewMenuItem) => void;
-    handleCloseCreateDialog: () => void;
-    handleSaveView: (data: {
-        name: string;
-        selectedColumns: ColumnViewProps[];
-        layout: LayoutSection;
-    }) => Promise<void>;
-    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

@@ -1,193 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-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, apiMetadata, }) => {
-    const [anchorViewEl, setAnchorViewEl] = useState(null);
-    const [defaultViewEl, setDefaultViewElement] = useState(null);
-    const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
-    const [editingView, setEditingView] = useState(null);
-    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) {
-            const updatedView = customViews.find((view) => view.id === editingView.id);
-            if (updatedView && updatedView !== editingView) {
-                setEditingView(updatedView);
-            }
-        }
-    }, [customViews, editingView]);
-    // Update selectedView when customViews changes to ensure it reflects the latest saved state
-    useEffect(() => {
-        if (selectedView && selectedView.isCustom && customViews.length > 0) {
-            const updatedView = customViews.find((view) => view.id === selectedView.id);
-            if (updatedView) {
-                // Compare submenu to detect changes (deep comparison would be better, but this works for now)
-                const submenuChanged = JSON.stringify(updatedView.submenu) !== JSON.stringify(selectedView.submenu);
-                const labelChanged = updatedView.label !== selectedView.label;
-                if (submenuChanged || labelChanged) {
-                    // Create a new object reference to ensure React detects the change
-                    const newSelectedView = Object.assign(Object.assign({}, updatedView), { submenu: updatedView.submenu ? [...updatedView.submenu] : undefined });
-                    setSelectedView(newSelectedView);
-                    onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(newSelectedView);
-                }
-            }
-        }
-    }, [customViews, selectedView, onViewChange]);
-    // 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;
-        setSelectedView(initialView);
-        onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(initialView);
-        hasInitializedRef.current = true;
-    }, [defaultTemplate, onViewChange]);
-    const handleTableViewsChange = useCallback((newTableViews) => {
-        const setTableViewsState = setTableViews !== null && setTableViews !== void 0 ? setTableViews : setInternalTableViews;
-        setTableViewsState(newTableViews);
-        onTableViewsChange === null || onTableViewsChange === void 0 ? void 0 : onTableViewsChange(newTableViews);
-    }, [setTableViews, setInternalTableViews, onTableViewsChange]);
-    const handleCustomViewsChange = useCallback((newCustomViews) => {
-        setInternalCustomViews(newCustomViews);
-        onCustomViewsChange === null || onCustomViewsChange === void 0 ? void 0 : onCustomViewsChange(newCustomViews);
-    }, [setInternalCustomViews, onCustomViewsChange]);
-    const handleViewButtonClick = useCallback((event) => {
-        setAnchorViewEl(event.currentTarget);
-        setDefaultViewElement(event.currentTarget);
-    }, []);
-    const handleCloseViewDropdown = useCallback(() => {
-        setDefaultViewElement(null);
-    }, []);
-    const handleClose = useCallback(() => {
-        setAnchorViewEl(null);
-        setDefaultViewElement(null);
-        setSelectedViewInfo({ label: 'Default', id: 'default' });
-    }, []);
-    const handleSelectedViewInfo = useCallback((selected, viewMenuItem) => {
-        setSelectedViewInfo(selected);
-        // Update selected view and notify parent
-        const newSelectedView = viewMenuItem || undefined;
-        setSelectedView(newSelectedView);
-        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);
-        setIsCreateDialogOpen(true);
-        setDefaultViewElement(null);
-    }, []);
-    const handleOpenEditDialog = useCallback((view) => {
-        setEditingView(view);
-        setShouldUseCurrentState(true);
-        setIsCreateDialogOpen(true);
-    }, []);
-    const handleCloseCreateDialog = useCallback(() => {
-        setIsCreateDialogOpen(false);
-        setEditingView(null);
-        setShouldUseCurrentState(false);
-    }, []);
-    const handleSaveView = useCallback((data) => __awaiter(void 0, void 0, void 0, function* () {
-        try {
-            if (editingView) {
-                // Use templateId for API calls, not the internal view id
-                const templateId = editingView.templateId || editingView.id;
-                yield (onEditCustomView === null || onEditCustomView === void 0 ? void 0 : onEditCustomView(templateId, data));
-                // Update state after promise resolves successfully
-                const updatedView = Object.assign(Object.assign({}, editingView), { label: data.name, columns: data.selectedColumns.map((col) => col.name), submenu: data.selectedColumns });
-                const updatedViews = customViews.map((view) => (view.id === editingView.id ? updatedView : view));
-                handleCustomViewsChange(updatedViews);
-                // If the updated view is currently selected, update selectedView to reflect changes
-                // Create a new object reference to ensure React detects the change
-                if ((selectedView === null || selectedView === void 0 ? void 0 : selectedView.id) === editingView.id) {
-                    const newSelectedView = Object.assign(Object.assign({}, updatedView), { submenu: [...updatedView.submenu] });
-                    setSelectedView(newSelectedView);
-                    onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(newSelectedView);
-                }
-            }
-            else {
-                yield (onCreateCustomView === null || onCreateCustomView === void 0 ? void 0 : onCreateCustomView(data));
-                // Update state after promise resolves successfully
-                const newView = createCustomViewMenuItem(data.name, data.selectedColumns);
-                const updatedViews = [...customViews, newView];
-                handleCustomViewsChange(updatedViews);
-            }
-        }
-        catch (error) {
-            // Error will be handled by the toast in CreateViewDialog
-            throw error;
-        }
-    }), [editingView, customViews, handleCustomViewsChange, onEditCustomView, onCreateCustomView, selectedView, onViewChange]);
-    const handleDeleteView = useCallback((viewId) => __awaiter(void 0, void 0, void 0, function* () {
-        try {
-            // Find the view to get its templateId
-            const viewToDelete = customViews.find((view) => view.id === viewId);
-            const templateId = (viewToDelete === null || viewToDelete === void 0 ? void 0 : viewToDelete.templateId) || viewId;
-            yield (onDeleteCustomView === null || onDeleteCustomView === void 0 ? void 0 : onDeleteCustomView(templateId));
-            // Update state after promise resolves successfully
-            const updatedViews = customViews.filter((view) => view.id !== viewId);
-            handleCustomViewsChange(updatedViews);
-            // If the deleted view was selected, reset to default
-            if ((selectedView === null || selectedView === void 0 ? void 0 : selectedView.id) === viewId) {
-                setSelectedView(undefined);
-                onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(undefined);
-            }
-        }
-        catch (error) {
-            // Error will be handled by the toast in CreateViewDialog
-            throw error;
-        }
-    }), [customViews, handleCustomViewsChange, onDeleteCustomView, selectedView, onViewChange]);
-    const handleResetViews = useCallback((views) => {
-        if (resetTableViews) {
-            resetTableViews({ id: views[0], label: views[0] });
-        }
-        else {
-            // Reset to default columns from templates
-            handleTableViewsChange([...defaultColumns]);
-        }
-    }, [resetTableViews, defaultColumns, handleTableViewsChange]);
-    return {
-        // State
-        anchorViewEl,
-        defaultViewEl,
-        setDefaultViewElement,
-        isCreateDialogOpen,
-        editingView,
-        selectedViewInfo,
-        shouldUseCurrentState,
-        // Handlers
-        handleViewButtonClick,
-        handleCloseViewDropdown,
-        handleClose,
-        handleSelectedViewInfo,
-        handleOpenCreateDialog,
-        handleOpenEditDialog,
-        handleCloseCreateDialog,
-        handleSaveView,
-        handleDeleteView,
-        handleResetViews,
-        handleTableViewsChange,
-        updateSelectedView,
-    };
-};