@tap-payments/os-micro-frontend-shared 0.1.20-test.1 → 0.1.20-test.1-test.2

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

@@ -0,0 +1,20 @@
+interface UseTableDataProps<T = unknown> {
+    rows: T[];
+    isLoading?: boolean;
+    error?: Error | null;
+    isFetchingNextPage?: boolean;
+    areAllRowsLoaded?: boolean;
+}
+export declare const useTableData: <T = unknown>({ rows, isLoading, error, isFetchingNextPage, areAllRowsLoaded }: UseTableDataProps<T>) => {
+    isDelayedFetchingNextPage: boolean;
+    lastItemIndex: number;
+    areTotalRowsNotFillingHeight: boolean;
+    itemsCount: number;
+    isError: boolean;
+    tableLoading: boolean;
+    tableError: boolean;
+    tableEmpty: boolean;
+    hasTimeoutError: boolean;
+    showNoDataView: boolean;
+};
+export {};

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

@@ -0,0 +1,40 @@
+import { useMemo } from 'react';
+import { useDelayToSetValue } from '../../../../hooks/index.js';
+import { isHeightNotFullyFilledByRows, isNotFoundError, isTimeoutError, hasError } from '../../../../utils/index.js';
+const isAxiosError = (error) => {
+    return error !== null && 'isAxiosError' in error && error.isAxiosError === true;
+};
+export const useTableData = ({ rows, isLoading, error, isFetchingNextPage, areAllRowsLoaded }) => {
+    const isDelayedFetchingNextPage = useDelayToSetValue({
+        value: isFetchingNextPage,
+        delay: 1000,
+    });
+    const tableStates = useMemo(() => {
+        const isError = hasError(error || null);
+        const tableLoading = isLoading !== null && isLoading !== void 0 ? isLoading : true;
+        const axiosError = error && isAxiosError(error) ? error : null;
+        const tableError = !isLoading && rows.length === 0 && isError && !isNotFoundError(axiosError);
+        const tableEmpty = !isLoading && rows.length === 0;
+        const hasTimeoutError = isTimeoutError(axiosError);
+        const showNoDataView = tableLoading || tableError || tableEmpty || hasTimeoutError;
+        return {
+            isError,
+            tableLoading,
+            tableError,
+            tableEmpty,
+            hasTimeoutError,
+            showNoDataView,
+        };
+    }, [rows.length, isLoading, error]);
+    const tableMetrics = useMemo(() => {
+        const lastItemIndex = rows.length - 1;
+        const areTotalRowsNotFillingHeight = isHeightNotFullyFilledByRows(rows.length) && !tableStates.tableLoading;
+        const itemsCount = (isDelayedFetchingNextPage !== null && isDelayedFetchingNextPage !== void 0 ? isDelayedFetchingNextPage : false) || areAllRowsLoaded ? rows.length + 1 : rows.length;
+        return {
+            lastItemIndex,
+            areTotalRowsNotFillingHeight,
+            itemsCount,
+        };
+    }, [rows.length, tableStates.tableLoading, isDelayedFetchingNextPage, areAllRowsLoaded]);
+    return Object.assign(Object.assign(Object.assign({}, tableStates), tableMetrics), { isDelayedFetchingNextPage: isDelayedFetchingNextPage !== null && isDelayedFetchingNextPage !== void 0 ? isDelayedFetchingNextPage : false });
+};

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export interface TableState {
+    selectedCell: string | null;
+    selectedColumn: string | null;
+    showBackDrop: boolean;
+}
+export declare const useTableState: () => {
+    selectedCell: string | null;
+    selectedColumn: string | null;
+    showBackDrop: boolean;
+    setShowBackdrop: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    handleCellClick: (rowIndex: number, columnIndex: number, event: React.MouseEvent, pinnedType?: 'start' | 'end') => void;
+    handleColumnClick: (columnIndex: number, event: React.MouseEvent, pinnedType?: 'start' | 'end') => void;
+    resetSelection: () => void;
+};

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

@@ -0,0 +1,31 @@
+import { useState, useCallback } from 'react';
+export const useTableState = () => {
+    const [selectedCell, setSelectedCell] = useState(null);
+    const [selectedColumn, setSelectedColumn] = useState(null);
+    const [showBackDrop, setShowBackdrop] = useState(false);
+    const handleCellClick = useCallback((rowIndex, columnIndex, event, pinnedType) => {
+        event.stopPropagation();
+        const cellKey = `${pinnedType !== null && pinnedType !== void 0 ? pinnedType : 'default'}-${rowIndex}-${columnIndex}`;
+        setSelectedCell((prev) => (prev === cellKey ? null : cellKey));
+        setSelectedColumn(null);
+    }, []);
+    const handleColumnClick = useCallback((columnIndex, event, pinnedType) => {
+        event.stopPropagation();
+        const columnKey = `${pinnedType !== null && pinnedType !== void 0 ? pinnedType : 'default'}-${columnIndex}`;
+        setSelectedColumn((prev) => (prev === columnKey ? null : columnKey));
+        setSelectedCell(null);
+    }, []);
+    const resetSelection = useCallback(() => {
+        setSelectedCell(null);
+        setSelectedColumn(null);
+    }, []);
+    return {
+        selectedCell,
+        selectedColumn,
+        showBackDrop,
+        setShowBackdrop,
+        handleCellClick,
+        handleColumnClick,
+        resetSelection,
+    };
+};

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

@@ -0,0 +1,44 @@
+/// <reference types="react" />
+import type { IColumnProps } from '../../../../types/index.js';
+import type { TableRowProps } from '@mui/material/TableRow';
+interface UseVirtualTableContainerProps<T = unknown> {
+    rowHeight: number;
+    areAllRowsLoaded?: boolean;
+    rows: T[];
+    isDelayedFetchingNextPage: boolean;
+    rowProps?: TableRowProps & {
+        onRowClick?: (row: T, index: number) => void;
+    };
+    scrollToIndex?: number;
+    footerProps?: {
+        totalCount?: number;
+    };
+    isError: boolean;
+    selectedCell: string | null;
+    selectedColumn: string | null;
+    handleCellClick: (rowIndex: number, columnIndex: number, event: React.MouseEvent, pinnedType?: 'start' | 'end') => void;
+}
+export declare const useVirtualTableContainer: <T = unknown>({ rowHeight, areAllRowsLoaded, rows, isDelayedFetchingNextPage, rowProps, scrollToIndex, footerProps, isError, selectedCell, selectedColumn, handleCellClick, }: UseVirtualTableContainerProps<T>) => {
+    getItemSize: (index: number, height: number) => number;
+    getItemDataForContainer: (columnsData: IColumnProps[], isPinnedColumn: boolean, height: number) => {
+        columns: any;
+        isLoading: any;
+        rows: any;
+        rowProps: any;
+        scrollToIndex: any;
+        totalCount: any;
+        lastItemIndex: any;
+        isError: any;
+        areAllRowsLoaded: any;
+        limit: any;
+        newLoadedRowsEndIndex: any;
+        isSheetView: boolean;
+        isPinned: any;
+        selectedCell: any;
+        selectedColumn: any;
+        onCellClick: any;
+        containerHeight: any;
+        rowHeight: any;
+    };
+};
+export {};

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

@@ -0,0 +1,53 @@
+import { useCallback, useMemo } from 'react';
+import memoize from 'memoize-one';
+const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToIndex, lastItemIndex, totalCount, isError, areAllRowsLoaded, isPinned, selectedCell, selectedColumn, onCellClick, containerHeight, rowHeight) => ({
+    columns,
+    isLoading,
+    rows,
+    rowProps,
+    scrollToIndex,
+    totalCount,
+    lastItemIndex,
+    isError,
+    areAllRowsLoaded,
+    limit: totalCount,
+    newLoadedRowsEndIndex: lastItemIndex,
+    isSheetView: true,
+    isPinned,
+    selectedCell,
+    selectedColumn,
+    onCellClick,
+    containerHeight,
+    rowHeight,
+}));
+export const useVirtualTableContainer = ({ rowHeight, areAllRowsLoaded, rows, isDelayedFetchingNextPage, rowProps, scrollToIndex, footerProps, isError, selectedCell, selectedColumn, handleCellClick, }) => {
+    const getItemSize = useCallback((index, height) => {
+        const isLastRow = areAllRowsLoaded && index === rows.length;
+        if (isLastRow) {
+            const usedHeight = rows.length * rowHeight;
+            const remainingHeight = height - usedHeight;
+            const minimumLastRowHeight = rowHeight * 2;
+            return Math.max(remainingHeight, minimumLastRowHeight);
+        }
+        return rowHeight;
+    }, [areAllRowsLoaded, rows.length, rowHeight]);
+    const commonItemDataParams = useMemo(() => {
+        var _a;
+        return [
+            isDelayedFetchingNextPage,
+            rows,
+            rowProps,
+            scrollToIndex,
+            rows.length - 1,
+            (_a = footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount) !== null && _a !== void 0 ? _a : 0,
+            isError,
+            areAllRowsLoaded,
+        ];
+    }, [isDelayedFetchingNextPage, rows, rowProps, scrollToIndex, footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount, isError, areAllRowsLoaded]);
+    const commonItemDataSuffix = useMemo(() => [selectedCell, selectedColumn, handleCellClick], [selectedCell, selectedColumn, handleCellClick]);
+    const getItemDataForContainer = useCallback((columnsData, isPinnedColumn, height) => createItemData(columnsData, ...commonItemDataParams, isPinnedColumn, ...commonItemDataSuffix, height, rowHeight), [commonItemDataParams, commonItemDataSuffix, rowHeight]);
+    return {
+        getItemSize,
+        getItemDataForContainer,
+    };
+};

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

@@ -1,3 +1,5 @@
 export { default as SheetViewVirtualTable } from './SheetViewVirtualTable';
 export { default as SheetViewTableHeader } from './components/SheetViewTableHeader';
 export * from './style';
+export * from './hooks';
+export * from './components';

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

@@ -1,3 +1,5 @@
 export { default as SheetViewVirtualTable } from './SheetViewVirtualTable';
 export { default as SheetViewTableHeader } from './components/SheetViewTableHeader';
 export * from './style';
+export * from './hooks';
+export * from './components';

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

@@ -0,0 +1,89 @@
+import type { IColumnProps, IVirtualTable, TablePosition, SortingOrder, TableFooterProps } from '../../../types/index.js';
+import { type TableHeadProps } from '@mui/material/TableHead';
+import { type CSSProperties } from 'react';
+export interface ISheetViewVirtualTable extends Omit<IVirtualTable, 'isSheetView'> {
+    onColumnPin?: (columnId: string, isPinned: boolean) => void;
+    isPinnable?: boolean;
+    clearBackdropVisibilityTimeout?: number;
+}
+export interface SheetViewTableHeaderProps {
+    columns: IColumnProps[];
+    headerProps?: TableHeadProps;
+    columnsSorting?: IVirtualTable['columnsSorting'];
+    onColumnSort?: IVirtualTable['onColumnSort'];
+    showBackDrop: boolean;
+    pinnedColumns?: string[];
+    onColumnPin?: (columnId: string, position: 'start' | 'end' | 'unpin') => void;
+    isPinnable?: boolean;
+    lastColumnId?: string | null;
+    selectedColumn?: string | null;
+    onColumnClick?: (columnIndex: number, event: React.MouseEvent, pinnedType?: 'start' | 'end') => void;
+    tablePosition?: TablePosition;
+    hasPinnedStart?: boolean;
+    hasPinnedEnd?: boolean;
+}
+export interface VirtualTableContainerProps {
+    columnsData: IColumnProps[];
+    containerKey: 'pinnedStart' | 'pinnedEnd' | 'scrollable';
+    isPinned?: boolean;
+    fixedWidth?: number;
+}
+export interface CommonTableProps {
+    showHeader?: boolean;
+    columnsSorting?: Record<string, SortingOrder>;
+    onColumnSort?: (columnsSorting: Record<string, SortingOrder>) => void;
+    headerProps?: TableHeadProps;
+    showBackDrop: boolean;
+    onColumnPin: (columnId: string, position: 'start' | 'end' | 'unpin') => void;
+    isPinnable: boolean;
+    lastColumnId?: string | null;
+    selectedColumn?: string | null;
+    onColumnClick?: (columnIndex: number, event: React.MouseEvent, pinnedType?: 'start' | 'end') => void;
+    tableTitle?: string;
+    areAllRowsLoaded?: boolean;
+    isFetchingNextPage?: boolean;
+    scrollToIndex?: number;
+    isLoading?: boolean;
+    isError: boolean;
+    hasTimeoutError: boolean;
+    tableMode?: string;
+    showNoDataView: boolean;
+    tableBodyStyles?: CSSProperties;
+}
+export interface PinnedColumnProps extends CommonTableProps {
+    position: 'start' | 'end';
+    columnsData: IColumnProps[];
+    columnsWidth: number;
+    pinnedColumnsList: string[];
+    hasPinnedStart: boolean;
+    hasPinnedEnd: boolean;
+    createVirtualTableContainer: (columnsData: IColumnProps[], containerKey: 'pinnedStart' | 'pinnedEnd' | 'scrollable', isPinned?: boolean, fixedWidth?: number) => JSX.Element;
+    tableLoading: boolean;
+}
+export interface MainTableProps extends CommonTableProps {
+    hasPinnedStart: boolean;
+    hasPinnedEnd: boolean;
+    unpinnedColumnsData: IColumnProps[];
+    pinnedStartColumns: string[];
+    pinnedEndColumns: string[];
+    createVirtualTableContainer: (columnsData: IColumnProps[], containerKey: 'pinnedStart' | 'pinnedEnd' | 'scrollable', isPinned?: boolean, fixedWidth?: number) => JSX.Element;
+    tableLoading: boolean;
+}
+export interface NoDataViewProps extends CommonTableProps {
+    tableLoading: boolean;
+    tableError: boolean;
+    tableEmpty: boolean;
+    hasTimeoutError: boolean;
+    orderedColumns: IColumnProps[];
+    error?: Error | null;
+    triggerDataRefetch?: () => Promise<unknown>;
+    footerProps?: TableFooterProps;
+}
+export interface LoadingMainTableProps extends CommonTableProps {
+    hasPinnedStart: boolean;
+    hasPinnedEnd: boolean;
+    unpinnedColumnsData: IColumnProps[];
+    pinnedStartColumns: string[];
+    pinnedEndColumns: string[];
+    tableLoading: boolean;
+}

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

@@ -15,12 +15,12 @@ export declare const Label: import("@emotion/styled").StyledComponent<import("@m
 }, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export declare const Title: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "m" | "order" | "p" | "style" | "color" | "className" | "classes" | "children" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "boxSizing" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
+}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "m" | "order" | "p" | "style" | "color" | "border" | "borderColor" | "borderBottom" | "flex" | "display" | "alignItems" | "className" | "classes" | "children" | "borderTop" | "borderRight" | "borderLeft" | "borderRadius" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignContent" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "boxSizing" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
     component?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export declare const ValueWrapper: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "m" | "order" | "p" | "style" | "color" | "className" | "classes" | "children" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "boxSizing" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
+}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "m" | "order" | "p" | "style" | "color" | "border" | "borderColor" | "borderBottom" | "flex" | "display" | "alignItems" | "className" | "classes" | "children" | "borderTop" | "borderRight" | "borderLeft" | "borderRadius" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignContent" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "boxSizing" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
     component?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export declare const Value: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {

package/build/components/VirtualTables/components/TableRow.js

@@ -3,7 +3,7 @@ import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { memo, useMemo } from 'react';
 import { areEqual } from 'react-window';
 import { StyledCell, StyledTableRow } from './style';
-import { getSelectionStyles } from '../utils/getSelectionStyles';
+import { getSelectionStyles } from '../../../utils/index.js';
 function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = null, selectedColumn = null, onCellClick, isLastRow = false, }) {
     const renderCell = (column) => {
         const { render, format, selector } = column;

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

@@ -13,7 +13,7 @@ export declare const ListItemStyled: import("@emotion/styled").StyledComponent<i
 }, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export declare const ItemText: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "m" | "order" | "p" | "style" | "color" | "className" | "classes" | "children" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "boxSizing" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
+}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "m" | "order" | "p" | "style" | "color" | "border" | "borderColor" | "borderBottom" | "flex" | "display" | "alignItems" | "className" | "classes" | "children" | "borderTop" | "borderRight" | "borderLeft" | "borderRadius" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignContent" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "boxSizing" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
     component?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export declare const ItemTextWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export declare const TitleStyled: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "m" | "order" | "p" | "style" | "color" | "className" | "classes" | "children" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "boxSizing" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
+}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "m" | "order" | "p" | "style" | "color" | "border" | "borderColor" | "borderBottom" | "flex" | "display" | "alignItems" | "className" | "classes" | "children" | "borderTop" | "borderRight" | "borderLeft" | "borderRadius" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignContent" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "boxSizing" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
     component?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export declare const StyledWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/build/utils/index.d.ts

@@ -40,3 +40,4 @@ export * from './toggleOptions';
 export * from './flag';
 export * from './encrypt';
 export * from './day';
+export * from './style';

package/build/utils/index.js

@@ -40,3 +40,4 @@ export * from './toggleOptions';
 export * from './flag';
 export * from './encrypt';
 export * from './day';
+export * from './style';

package/build/utils/style.d.ts

@@ -0,0 +1,9 @@
+interface GetSelectionStylesParams {
+    isSelected: boolean;
+    isCellSelected: boolean;
+    isColumnSelected: boolean;
+    isLastRow: boolean;
+}
+type SelectionStyles = Record<string, string | Record<string, string>>;
+export declare const getSelectionStyles: ({ isSelected, isCellSelected, isColumnSelected, isLastRow }: GetSelectionStylesParams) => SelectionStyles;
+export {};

package/build/utils/style.js

@@ -0,0 +1,62 @@
+const SELECTION_COLORS = {
+    primary: '#1F88D0',
+    background: 'white',
+    border: '#F2F2F2',
+    transparent: 'transparent',
+};
+const BORDER_STYLES = {
+    thin: '1px',
+    thick: '1.5px',
+    none: '0px',
+};
+const CELL_DIMENSIONS = {
+    minHeight: '28px',
+    fullHeight: '100%',
+};
+export const getSelectionStyles = ({ isSelected, isCellSelected, isColumnSelected, isLastRow }) => {
+    if (!isSelected) {
+        return {};
+    }
+    if (isCellSelected && !isColumnSelected) {
+        return getSingleCellSelectionStyles();
+    }
+    if (isColumnSelected) {
+        return getColumnSelectionStyles(isLastRow);
+    }
+    return {};
+};
+const getSingleCellSelectionStyles = () => ({
+    border: `${BORDER_STYLES.thin} solid ${SELECTION_COLORS.primary}`,
+    backgroundColor: SELECTION_COLORS.background,
+    color: SELECTION_COLORS.primary,
+    '&:before': {
+        border: `${BORDER_STYLES.thin} solid ${SELECTION_COLORS.primary}`,
+    },
+});
+const getColumnSelectionStyles = (isLastRow) => {
+    const borderWidth = getBorderWidthForColumn(isLastRow);
+    const borderBottom = getBorderBottomForColumn(isLastRow);
+    return {
+        borderWidth,
+        borderStyle: 'solid',
+        borderColor: SELECTION_COLORS.primary,
+        borderBottom,
+        height: CELL_DIMENSIONS.fullHeight,
+        minHeight: CELL_DIMENSIONS.minHeight,
+        display: 'flex',
+        alignItems: 'center',
+        '&:before': {
+            borderWidth,
+            borderBottom: isLastRow
+                ? `${BORDER_STYLES.thick} solid ${SELECTION_COLORS.primary}`
+                : `${BORDER_STYLES.thin} solid ${SELECTION_COLORS.transparent}`,
+        },
+    };
+};
+const getBorderWidthForColumn = (isLastRow) => {
+    const { none, thick } = BORDER_STYLES;
+    return isLastRow ? `${none} ${thick} ${thick} ${thick}` : `${none} ${thick} ${none} ${thick}`;
+};
+const getBorderBottomForColumn = (isLastRow) => {
+    return isLastRow ? `${BORDER_STYLES.thick} solid ${SELECTION_COLORS.primary}` : `${BORDER_STYLES.thin} solid ${SELECTION_COLORS.border}`;
+};

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.20-test.1",
-  "testVersion": 1,
+  "version": "0.1.20-test.1-test.2",
+  "testVersion": 2,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",

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

@@ -1,14 +0,0 @@
-/// <reference types="react" />
-import type { IColumnProps } from '../../../../../types/index.js';
-import { SheetViewTableHeaderProps } from './type';
-interface TableCellProps extends Pick<SheetViewTableHeaderProps, 'onColumnSort' | 'columnsSorting' | 'onColumnPin' | 'isPinnable' | 'lastColumnId' | 'onColumnClick' | 'pinnedColumns'> {
-    column: IColumnProps;
-    colIndex: number;
-    isFirst: boolean;
-    isLast: boolean;
-    isSelected: boolean;
-    isDefaultPinned: boolean;
-}
-declare function TableCell({ column: { header, id, align, headerStyle, sortable, filter, pinnable, width, order, tableViewId, pinned }, colIndex, isFirst, isLast, isSelected, isDefaultPinned, onColumnSort, columnsSorting, onColumnPin, isPinnable, lastColumnId, onColumnClick, pinnedColumns, }: TableCellProps): import("react/jsx-runtime").JSX.Element;
-declare const _default: import("react").MemoExoticComponent<typeof TableCell>;
-export default _default;

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

@@ -1,2 +0,0 @@
-import SheetViewTableHeader from './SheetViewTableHeader';
-export default SheetViewTableHeader;

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

@@ -1,2 +0,0 @@
-import SheetViewTableHeader from './SheetViewTableHeader';
-export default SheetViewTableHeader;

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

@@ -1,19 +0,0 @@
-/// <reference types="react" />
-import { type TableHeadProps } from '@mui/material/TableHead';
-import { IColumnProps, IVirtualTable, TablePosition } from '../../../../../types/index.js';
-export interface SheetViewTableHeaderProps {
-    columns: IColumnProps[];
-    headerProps?: TableHeadProps;
-    columnsSorting?: IVirtualTable['columnsSorting'];
-    onColumnSort?: IVirtualTable['onColumnSort'];
-    showBackDrop: boolean;
-    pinnedColumns?: string[];
-    onColumnPin?: (columnId: string, position: 'start' | 'end' | 'unpin') => void;
-    isPinnable?: boolean;
-    lastColumnId?: string | null;
-    selectedColumn?: string | null;
-    onColumnClick?: (columnIndex: number, event: React.MouseEvent, pinnedType?: 'start' | 'end') => void;
-    tablePosition?: TablePosition;
-    hasPinnedStart?: boolean;
-    hasPinnedEnd?: boolean;
-}

package/build/components/VirtualTables/utils/getSelectionStyles.d.ts

@@ -1,55 +0,0 @@
-interface GetSelectionStylesParams {
-    isSelected: boolean;
-    isCellSelected: boolean;
-    isColumnSelected: boolean;
-    isLastRow: boolean;
-}
-export declare const getSelectionStyles: ({ isSelected, isCellSelected, isColumnSelected, isLastRow }: GetSelectionStylesParams) => {
-    border?: undefined;
-    backgroundColor?: undefined;
-    color?: undefined;
-    '&:before'?: undefined;
-    borderWidth?: undefined;
-    borderStyle?: undefined;
-    borderColor?: undefined;
-    borderBottom?: undefined;
-    height?: undefined;
-    minHeight?: undefined;
-    display?: undefined;
-    alignItems?: undefined;
-} | {
-    border: string;
-    backgroundColor: string;
-    color: string;
-    '&:before': {
-        border: string;
-        borderWidth?: undefined;
-        borderBottom?: undefined;
-    };
-    borderWidth?: undefined;
-    borderStyle?: undefined;
-    borderColor?: undefined;
-    borderBottom?: undefined;
-    height?: undefined;
-    minHeight?: undefined;
-    display?: undefined;
-    alignItems?: undefined;
-} | {
-    borderWidth: string;
-    borderStyle: string;
-    borderColor: string;
-    borderBottom: string;
-    height: string;
-    minHeight: string;
-    display: string;
-    alignItems: string;
-    '&:before': {
-        borderWidth: string;
-        borderBottom: string;
-        border?: undefined;
-    };
-    border?: undefined;
-    backgroundColor?: undefined;
-    color?: undefined;
-};
-export {};

package/build/components/VirtualTables/utils/getSelectionStyles.js

@@ -1,31 +0,0 @@
-export const getSelectionStyles = ({ isSelected, isCellSelected, isColumnSelected, isLastRow }) => {
-    if (!isSelected)
-        return {};
-    if (isCellSelected && !isColumnSelected) {
-        return {
-            border: '1px solid #1F88D0',
-            backgroundColor: 'white',
-            color: '#1F88D0',
-            '&:before': {
-                border: '1px solid #1F88D0',
-            },
-        };
-    }
-    if (isColumnSelected) {
-        return {
-            borderWidth: isLastRow ? '0px 1.5px 1px 1.5px' : '0px 1.5px 0px 1.5px',
-            borderStyle: 'solid',
-            borderColor: '#1F88D0',
-            borderBottom: !isLastRow ? '1px solid #F2F2F2' : '1.5px solid #1F88D0',
-            height: '100%',
-            minHeight: '28px',
-            display: 'flex',
-            alignItems: 'center',
-            '&:before': {
-                borderWidth: isLastRow ? '0px 1.5px 1px 1.5px' : '0px 1.5px 0px 1.5px',
-                borderBottom: !isLastRow ? '1px solid transparent' : '1.5px solid #1F88D0',
-            },
-        };
-    }
-    return {};
-};