@tap-payments/os-micro-frontend-shared 0.1.411 → 0.1.412-test.1

package/build/components/VirtualTables/SheetViewVirtualTable/SheetViewVirtualTable.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { ISheetViewVirtualTable } from './types';
-declare function SheetViewVirtualTable({ columns, rows, threshold, showHeader, headerProps, rowProps, footerProps, rowHeight, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded, tableBodyStyles, tableTitle, onStartDrag, onColumnPin, clearBackdropVisibilityTimeout, isPinnable, tableMode, overscanCount, windowId, serviceCode, customNoDataComponent, }: Readonly<ISheetViewVirtualTable>): import("react/jsx-runtime").JSX.Element;
+declare function SheetViewVirtualTable({ columns, rows, threshold, showHeader, headerProps, rowProps, footerProps, rowHeight, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded, tableBodyStyles, tableTitle, onStartDrag, onColumnPin, clearBackdropVisibilityTimeout, isPinnable, tableMode, overscanCount, windowId, serviceCode, customNoDataComponent, defaultSkeleton, }: Readonly<ISheetViewVirtualTable>): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof SheetViewVirtualTable>;
 export default _default;

package/build/components/VirtualTables/SheetViewVirtualTable/SheetViewVirtualTable.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { memo, useCallback, useMemo, useRef, useEffect } from 'react';
 import { SHEET_VIEW_TABLE_THRESHOLD } from '../../../constants/index.js';
+import { getProcessedColumns } from '../../../utils/index.js';
 import TableFooter from '../components/TableFooter/TableFooter';
 import { SheetViewTableContainer } from '../components/style';
 import { SheetViewVirtualTableWrapper } from './style';
@@ -8,7 +9,9 @@ import { usePinnedColumns, useSynchronizedScroll, useTableState, useTableData, u
 import { useColumnResize, useColumnResizeWithPinned, applyColumnWidths } from './features/resize';
 import { ResizeOverlay } from './features/resize/components';
 import { PinnedColumn, MainTable, LoadingMainTable, NoDataView, VirtualTable } from './components';
-function SheetViewVirtualTable({ columns, rows, threshold = SHEET_VIEW_TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, rowHeight = 28, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded = false, tableBodyStyles, tableTitle, onStartDrag, onColumnPin, clearBackdropVisibilityTimeout = 100, isPinnable = false, tableMode, overscanCount, windowId, serviceCode, customNoDataComponent, }) {
+function SheetViewVirtualTable({ columns, rows, threshold = SHEET_VIEW_TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, rowHeight = 28, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded = false, tableBodyStyles, tableTitle, onStartDrag, onColumnPin, clearBackdropVisibilityTimeout = 100, isPinnable = false, tableMode, overscanCount, windowId, serviceCode, customNoDataComponent, defaultSkeleton = true, }) {
+    // Use skeleton columns (date + action pinned) when loading and defaultSkeleton
+    const processedColumns = useMemo(() => getProcessedColumns(columns, isLoading !== null && isLoading !== void 0 ? isLoading : false, defaultSkeleton), [columns, isLoading, defaultSkeleton]);
     // Custom hooks for state management
     const { selectedCell, selectedColumn, selectedRow, showBackDrop, setShowBackdrop, handleCellClick, handleColumnClick, handleChipClick, selectedChip, } = useTableState();
     // Refs and state for resize indicator positioning
@@ -23,7 +26,7 @@ function SheetViewVirtualTable({ columns, rows, threshold = SHEET_VIEW_TABLE_THR
         areAllRowsLoaded,
     });
     // Column management
-    const { pinnedStartColumns, pinnedEndColumns, handleColumnPin, pinnedStartColumnsData, pinnedEndColumnsData, unpinnedColumnsData, orderedColumns, lastColumnId, } = usePinnedColumns(columns, isPinnable, onColumnPin);
+    const { pinnedStartColumns, pinnedEndColumns, handleColumnPin, pinnedStartColumnsData, pinnedEndColumnsData, unpinnedColumnsData, orderedColumns, lastColumnId, } = usePinnedColumns(processedColumns, isPinnable, onColumnPin);
     // Scroll synchronization
     const { pinnedStartVirtualListRef, scrollableVirtualListRef, pinnedEndVirtualListRef, handleScroll } = useSynchronizedScroll();
     // Reset virtual list cache when row count changes
@@ -36,7 +39,7 @@ function SheetViewVirtualTable({ columns, rows, threshold = SHEET_VIEW_TABLE_THR
     }, [rows.length, pinnedStartVirtualListRef, scrollableVirtualListRef, pinnedEndVirtualListRef]);
     // Column resize functionality
     const { columnWidths, isResizing, resizingColumn, resizeIndicatorX, cursorPosition, startResize, handleColumnClick: handleColumnClickWithResize, } = useColumnResize({
-        columns,
+        columns: processedColumns,
         handleColumnClick,
         windowId,
         serviceCode,

package/build/components/VirtualTables/SheetViewVirtualTable/components/SheetViewTableRowLoading.js

@@ -16,7 +16,6 @@ function SheetViewTableRowLoading({ columns, style, index, animationType, rowInd
     return (_jsx(MUITableRow, Object.assign({ sx: Object.assign(Object.assign({}, style), { display: 'flex', borderBottom: '1px solid #F2F2F2', minHeight: '28px', height: '28px', alignItems: 'center', backgroundColor: useTableBackground ? theme.palette.background.default : 'transparent', '&:hover': {
                 backgroundColor: 'transparent !important',
             } }), component: "div", hover: true }, { children: columns.map((column, colIndex) => {
-            var _a;
             const isLastColumn = colIndex === columns.length - 1;
             const isFirstColumn = colIndex === 0;
             const isPinnedStart = column.pinned === 'start';
@@ -35,7 +34,7 @@ function SheetViewTableRowLoading({ columns, style, index, animationType, rowInd
                     boxSizing: 'border-box',
                     whiteSpace: 'nowrap',
                     overflow: 'hidden',
-                }, component: "div" }, { children: shouldShowActualData ? ((_a = column.render) === null || _a === void 0 ? void 0 : _a.call(column, {
+                }, component: "div" }, { children: shouldShowActualData && column.render ? (column.render({
                     index: rowIndex,
                     row: {},
                     column,

package/build/components/VirtualTables/SheetViewVirtualTable/hooks/usePinnedColumns.js

@@ -2,12 +2,13 @@ import { useState, useCallback, useMemo } from 'react';
 export const usePinnedColumns = (columns, isPinnable, onColumnPin) => {
     const [pinnedStartColumns, setPinnedStartColumns] = useState(() => {
         const userPinned = isPinnable ? columns.filter((c) => c.pinned === 'start').map((c) => c.id) : [];
-        const defaultPinned = columns.filter((c) => c.isDefaultPinned).map((c) => c.id);
+        const defaultPinned = columns.filter((c) => c.isDefaultPinned && c.pinned !== 'end').map((c) => c.id);
         return Array.from(new Set([...defaultPinned, ...userPinned]));
     });
     const [pinnedEndColumns, setPinnedEndColumns] = useState(() => {
+        const defaultPinned = columns.filter((c) => c.isDefaultPinned && c.pinned === 'end').map((c) => c.id);
         if (!isPinnable)
-            return [];
+            return defaultPinned;
         const userPinned = columns.filter((c) => c.pinned === 'end').map((c) => c.id);
         // Automatically pin the last column to the end if no end-pinned columns exist
         const visibleColumns = columns.filter((column) => !column.hidden);

package/build/components/VirtualTables/VirtualTable/VirtualTable.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import type { IVirtualTable } from '../../../types/index.js';
-declare function VirtualTable({ columns, rows, threshold, showHeader, headerProps, rowProps, footerProps, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded, tableBodyStyles, tableMode, tableTitle, onStartDrag, isSheetView, isMinimized, footerComponent, customNoDataComponent, }: Readonly<IVirtualTable>): import("react/jsx-runtime").JSX.Element;
+declare function VirtualTable({ columns, rows, threshold, showHeader, headerProps, rowProps, footerProps, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded, tableBodyStyles, tableMode, tableTitle, onStartDrag, isSheetView, isMinimized, footerComponent, customNoDataComponent, defaultSkeleton, }: Readonly<IVirtualTable>): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof VirtualTable>;
 export default _default;

package/build/components/VirtualTables/VirtualTable/VirtualTable.js

@@ -15,7 +15,7 @@ import AutoSizer from 'react-virtualized-auto-sizer';
 import InfiniteLoader from 'react-window-infinite-loader';
 import { TABLE_ROW_HEIGHT, TABLE_THRESHOLD, TABLE_LIST_OVER_SCAN, SHEET_VIEW_TABLE_ROW_HEIGHT } from '../../../constants/index.js';
 import { useDelayToSetValue } from '../../../hooks/index.js';
-import { isHeightNotFullyFilledByRows, isNotFoundError, isTimeoutError, hasError } from '../../../utils/index.js';
+import { isHeightNotFullyFilledByRows, isNotFoundError, isTimeoutError, hasError, getProcessedColumns } from '../../../utils/index.js';
 import TableFooter from '../components/TableFooter/TableFooter';
 import TableHeader from '../components/TableHeader';
 import TableLastItem from '../components/TableLastItem';
@@ -34,7 +34,7 @@ const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToInde
     areAllRowsLoaded,
     isSheetView,
 }));
-function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded = false, tableBodyStyles, tableMode, tableTitle, onStartDrag, isSheetView = false, isMinimized, footerComponent, customNoDataComponent, }) {
+function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded = false, tableBodyStyles, tableMode, tableTitle, onStartDrag, isSheetView = false, isMinimized, footerComponent, customNoDataComponent, defaultSkeleton = false, }) {
     var _a, _b;
     const theme = useTheme();
     const onPointerDown = (e) => {
@@ -58,7 +58,8 @@ function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader,
     const tableEmpty = !isLoading && rows.length === 0;
     const hasTimeoutError = isTimeoutError(error);
     const lastItemIndex = rows.length - 1;
-    const shownColumns = useMemo(() => columns.filter((column) => !column.hidden), [columns]);
+    const processedColumns = useMemo(() => getProcessedColumns(columns, isLoading !== null && isLoading !== void 0 ? isLoading : false, defaultSkeleton), [columns, isLoading, defaultSkeleton]);
+    const shownColumns = useMemo(() => processedColumns.filter((column) => !column.hidden), [processedColumns]);
     const orderedColumns = useMemo(() => shownColumns.sort((a, b) => { var _a, _b; return ((_a = a === null || a === void 0 ? void 0 : a.order) !== null && _a !== void 0 ? _a : 1000000) - ((_b = b === null || b === void 0 ? void 0 : b.order) !== null && _b !== void 0 ? _b : 1000000); }), [shownColumns]);
     const areTotalRowsNotFillingHeight = isHeightNotFullyFilledByRows(rows.length) && !tableLoading;
     const itemsCount = isDelayedFetchingNextPage || (areAllRowsLoaded && !areTotalRowsNotFillingHeight) ? rows.length + 1 : rows.length;

package/build/components/VirtualTables/components/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 interface TableWrapperProps {
     showNoDataView?: boolean;
 }

package/build/constants/assets.d.ts

@@ -351,6 +351,7 @@ export declare const TAP3DSPROVIDERIcon: string;
 export declare const greyPlusIcon: string;
 export declare const greyMinusIcon: string;
 export declare const noPreviewIcon: string;
+export declare const editIcon: string;
 export declare const viewInvoiceIcon: string;
 export declare const checkoutStatusIcon: string;
 export declare const checkoutStatusBlueIcon: string;

package/build/constants/assets.js

@@ -357,6 +357,7 @@ export const TAP3DSPROVIDERIcon = `${lightUrl}/provider/TAP3DS.svg`;
 export const greyPlusIcon = `${lightUrl}/greyPlusIcon.svg`;
 export const greyMinusIcon = `${lightUrl}/greyMinusIcon.svg`;
 export const noPreviewIcon = `${lightUrl}/noPreviewIcon.svg`;
+export const editIcon = `${lightUrl}/other/editIcon.svg`;
 export const viewInvoiceIcon = `${appBaseUrl}/viewInvoice.svg`;
 export const checkoutStatusIcon = `${appBaseUrl}/checkoutStatus.svg`;
 export const checkoutStatusBlueIcon = `${appBaseUrl}/checkStatusOutBlue.svg`;

package/build/constants/table/cell/authenticationsTableCellWidth.d.ts

@@ -4,6 +4,16 @@ export declare const authenticationsTableCellWidth: {
         readonly text: "180px";
         readonly sheet: "180px";
     };
+    readonly merchant: {
+        readonly default: "115px";
+        readonly text: "150px";
+        readonly sheet: "138px";
+    };
+    readonly brand: {
+        readonly default: "125px";
+        readonly text: "116px";
+        readonly sheet: "116px";
+    };
     readonly payouts: {
         readonly default: "150px";
         readonly text: "250px";

package/build/constants/table/cell/authenticationsTableCellWidth.js

@@ -4,6 +4,16 @@ export const authenticationsTableCellWidth = {
         text: '180px',
         sheet: '180px',
     },
+    merchant: {
+        default: '115px',
+        text: '150px',
+        sheet: '138px',
+    },
+    brand: {
+        default: '125px',
+        text: '116px',
+        sheet: '116px',
+    },
     payouts: {
         default: '150px',
         text: '250px',

package/build/types/table.d.ts

@@ -116,6 +116,7 @@ export interface IVirtualTable<R = any> {
     headerProps?: TableHeadProps;
     isLoading?: boolean;
     isFetchingNextPage?: boolean;
+    defaultSkeleton?: boolean;
     rowProps?: TableRowProps & {
         onRowClick?: (row: R, index: number) => void;
     };

package/build/utils/index.d.ts

@@ -45,3 +45,4 @@ export * from './boolean';
 export * from './columnResizeStorage';
 export * from './timezone';
 export * from './merchantSource';
+export * from './skeletonColumns';

package/build/utils/index.js

@@ -45,3 +45,4 @@ export * from './boolean';
 export * from './columnResizeStorage';
 export * from './timezone';
 export * from './merchantSource';
+export * from './skeletonColumns';

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,55 @@
+export const DEFAULT_SKELETON_WIDTHS = ['120px', '180px', '100px', '150px', '200px', '140px', '160px', '110px', '190px', '130px'];
+/** Index column (pinned start) - always first on loading skeleton */
+const SKELETON_INDEX_COLUMN = {
+    id: 'index',
+    header: '',
+    width: '34px',
+    order: 0,
+    hidden: false,
+    sortable: false,
+    pinned: 'start',
+    isDefaultPinned: true,
+    pinnable: true,
+};
+/** Date column (pinned start) - second on loading skeleton */
+const SKELETON_DATE_COLUMN = {
+    id: 'date',
+    header: '',
+    width: '120px',
+    order: 1,
+    hidden: false,
+    sortable: false,
+    pinned: 'start',
+    isDefaultPinned: true,
+    pinnable: true,
+};
+/** Action icon column (pinned end) - always last on loading skeleton; id must match real table action column (action_icon) */
+const SKELETON_ACTION_ICON_COLUMN = {
+    id: 'action_icon',
+    header: '',
+    width: '36px',
+    order: DEFAULT_SKELETON_WIDTHS.length + 3,
+    hidden: false,
+    sortable: false,
+    pinned: 'end',
+    pinnable: true,
+    isDefaultPinned: true,
+};
+export const generateSkeletonColumns = (staticWidths = DEFAULT_SKELETON_WIDTHS) => {
+    const middleColumns = staticWidths.map((width, index) => ({
+        id: `skeleton-col-${index}`,
+        header: '',
+        width,
+        order: index + 2,
+        hidden: false,
+        sortable: false,
+        pinnable: false,
+    }));
+    return [SKELETON_INDEX_COLUMN, SKELETON_DATE_COLUMN, ...middleColumns, SKELETON_ACTION_ICON_COLUMN];
+};
+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.411",
-  "testVersion": 0,
+  "version": "0.1.412-test.1",
+  "testVersion": 1,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",
@@ -164,4 +164,4 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   }
-}
+}

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

@@ -1,24 +0,0 @@
-/// <reference types="react" />
-export declare const ButtonStyled: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const ViewWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const ListStyled: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const DropdownStyled: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const MenuItem: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
-    addColumnViewEl?: boolean | undefined;
-}, {}, {}>;
-export declare const Space: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const SpaceAfter: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

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

@@ -1,102 +0,0 @@
-import { Box, styled } from '@mui/material';
-export const ButtonStyled = styled(Box)(({ theme }) => ({
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    borderRadius: '4px',
-    background: theme.palette.common.white,
-    padding: '8px',
-    border: '1px solid',
-    borderColor: theme.palette.divider,
-    gap: 8,
-    height: 32,
-    cursor: 'pointer',
-    '&:hover': {
-        border: '1px solid',
-        borderColor: theme.palette.info.dark,
-        boxShadow: theme.shadows[7],
-    },
-}));
-export const ViewWrapper = styled(Box)(({ theme }) => ({
-    background: theme.palette.common.white,
-    display: 'flex',
-    gap: theme.spacing(1),
-    alignItems: 'center',
-    color: theme.palette.text.primary,
-    fontSize: '11px',
-    fontWeight: theme.typography.fontWeightRegular,
-    textTransform: 'capitalize',
-    position: 'relative',
-    transition: '0.5s',
-    '&:after': {
-        content: '""',
-        position: 'absolute',
-        left: -8,
-        right: 0,
-        width: '100%',
-        height: '100%',
-        boxShadow: theme.shadows[11],
-        borderRadius: theme.spacing(0.5),
-        paddingInlineStart: theme.spacing(1),
-        paddingTop: '9px',
-        paddingBottom: '9px',
-        paddingInlineEnd: '9px',
-        zIndex: -1,
-    },
-}));
-export const ListStyled = styled(Box)(({ theme }) => ({
-    background: theme.palette.common.white,
-    borderRadius: theme.spacing(1),
-    boxShadow: theme.shadows[5],
-    border: '1px solid',
-    borderColor: theme.palette.divider,
-    zIndex: 5,
-    fontSize: '11px',
-    width: 192,
-}));
-export const DropdownStyled = styled(Box)(() => ({
-    minWidth: 160,
-    position: 'relative',
-}));
-export const MenuItem = styled(Box, { shouldForwardProp: (props) => props !== 'addColumnViewEl' })(({ theme }) => ({
-    padding: theme.spacing(1),
-    paddingInlineEnd: 2,
-    borderBottom: '1px solid',
-    borderColor: theme.palette.divider,
-    display: 'flex',
-    alignItems: 'center',
-    height: 32,
-    cursor: 'pointer',
-    img: {
-        height: 12,
-    },
-    '.check-icon': {
-        height: 'auto',
-        marginInlineEnd: theme.spacing(1),
-    },
-    '&:hover': {
-        color: theme.palette.info.dark,
-        fontWeight: theme.typography.fontWeightBold,
-    },
-    '&.add-column': {
-        justifyContent: 'space-between',
-        paddingInlineEnd: theme.spacing(1),
-        position: 'relative',
-        border: 'none',
-        zIndex: 5,
-        borderBottom: '1px solid',
-        borderColor: theme.palette.divider,
-        borderTopRightRadius: theme.spacing(1),
-        borderTopLeftRadius: theme.spacing(1),
-        '&:hover': {
-            boxShadow: theme.shadows[6],
-        },
-    },
-}));
-export const Space = styled(Box)(({ theme }) => ({
-    width: 12,
-    marginInlineEnd: theme.spacing(1),
-}));
-export const SpaceAfter = styled(Box)(() => ({
-    width: 16,
-}));

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

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-import { TableHeaderProps } from '../type';
-export interface CustomViewsProps {
-    open: boolean;
-    onSelect: (e: React.MouseEvent<HTMLDivElement>) => void;
-    setTableViews: TableHeaderProps['setTableViews'];
-    tableViews: TableHeaderProps['tableViews'];
-    anchorEl: Element | null;
-    onClose?: () => void;
-}