@tap-payments/os-micro-frontend-shared 0.1.30-test.3 → 0.1.31-test.10

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

@@ -8,7 +8,9 @@ export declare const useTableState: () => {
     selectedCell: string | null;
     selectedColumn: string | null;
     showBackDrop: boolean;
+    selectedChip: string | null;
     setShowBackdrop: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    handleChipClick: (rowIndex: number, columnIndex: number, event: React.MouseEvent, chipIndex: number, pinnedType?: 'start' | 'end') => void;
     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

@@ -2,28 +2,47 @@ import { useState, useCallback } from 'react';
 export const useTableState = () => {
     const [selectedCell, setSelectedCell] = useState(null);
     const [selectedColumn, setSelectedColumn] = useState(null);
+    const [selectedChip, setSelectedChip] = useState(null);
     const [showBackDrop, setShowBackdrop] = useState(false);
+    const handleChipClick = useCallback((rowIndex, columnIndex, event, chipIndex, pinnedType) => {
+        event.stopPropagation();
+        const chipKey = `${pinnedType !== null && pinnedType !== void 0 ? pinnedType : 'default'}-${rowIndex}-${columnIndex}-${chipIndex}`;
+        const cellKey = `${pinnedType !== null && pinnedType !== void 0 ? pinnedType : 'default'}-${rowIndex}-${columnIndex}`;
+        const isChipAlreadySelected = selectedChip === chipKey;
+        if (isChipAlreadySelected) {
+            setSelectedChip(null);
+            setSelectedCell(null);
+            return;
+        }
+        setSelectedChip(chipKey);
+        setSelectedCell(cellKey);
+    }, [selectedChip, setSelectedChip, setSelectedCell]);
     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);
+        setSelectedChip(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);
+        setSelectedChip(null);
     }, []);
     const resetSelection = useCallback(() => {
         setSelectedCell(null);
         setSelectedColumn(null);
+        setSelectedChip(null);
     }, []);
     return {
         selectedCell,
         selectedColumn,
         showBackDrop,
+        selectedChip,
         setShowBackdrop,
+        handleChipClick,
         handleCellClick,
         handleColumnClick,
         resetSelection,

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import type { IColumnProps } from '../../../../types/index.js';
+import type { IColumnProps, TableChipProps } from '../../../../types/index.js';
 import type { TableRowProps } from '@mui/material/TableRow';
-interface UseVirtualTableContainerProps<T = unknown> {
+interface UseVirtualTableContainerProps<T = unknown> extends TableChipProps {
     rowHeight: number;
     areAllRowsLoaded?: boolean;
     rows: T[];
@@ -16,9 +16,11 @@ interface UseVirtualTableContainerProps<T = unknown> {
     isError: boolean;
     selectedCell: string | null;
     selectedColumn: string | null;
+    selectedChip: string | null;
     handleCellClick: (rowIndex: number, columnIndex: number, event: React.MouseEvent, pinnedType?: 'start' | 'end') => void;
+    handleChipClick: (rowIndex: number, columnIndex: number, event: React.MouseEvent, chipIndex: number, pinnedType?: 'start' | 'end') => void;
 }
-export declare const useVirtualTableContainer: <T = unknown>({ rowHeight, areAllRowsLoaded, rows, isDelayedFetchingNextPage, rowProps, scrollToIndex, footerProps, isError, selectedCell, selectedColumn, handleCellClick, }: UseVirtualTableContainerProps<T>) => {
+export declare const useVirtualTableContainer: <T = unknown>({ rowHeight, areAllRowsLoaded, rows, isDelayedFetchingNextPage, rowProps, scrollToIndex, footerProps, isError, selectedCell, selectedColumn, selectedChip, handleCellClick, handleChipClick, }: UseVirtualTableContainerProps<T>) => {
     getItemSize: (index: number, height: number) => number;
     getItemDataForContainer: (columnsData: IColumnProps[], isPinnedColumn: boolean, height: number) => {
         columns: any;
@@ -36,7 +38,9 @@ export declare const useVirtualTableContainer: <T = unknown>({ rowHeight, areAll
         isPinned: any;
         selectedCell: any;
         selectedColumn: any;
+        selectedChip: any;
         onCellClick: any;
+        onChipClick: any;
         containerHeight: any;
         rowHeight: any;
     };

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

@@ -1,6 +1,6 @@
 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) => ({
+const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToIndex, lastItemIndex, totalCount, isError, areAllRowsLoaded, isPinned, selectedCell, selectedColumn, selectedChip, onCellClick, onChipClick, containerHeight, rowHeight) => ({
     columns,
     isLoading,
     rows,
@@ -16,11 +16,13 @@ const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToInde
     isPinned,
     selectedCell,
     selectedColumn,
+    selectedChip,
     onCellClick,
+    onChipClick,
     containerHeight,
     rowHeight,
 }));
-export const useVirtualTableContainer = ({ rowHeight, areAllRowsLoaded, rows, isDelayedFetchingNextPage, rowProps, scrollToIndex, footerProps, isError, selectedCell, selectedColumn, handleCellClick, }) => {
+export const useVirtualTableContainer = ({ rowHeight, areAllRowsLoaded, rows, isDelayedFetchingNextPage, rowProps, scrollToIndex, footerProps, isError, selectedCell, selectedColumn, selectedChip, handleCellClick, handleChipClick, }) => {
     const getItemSize = useCallback((index, height) => {
         const isLastRow = areAllRowsLoaded && index === rows.length;
         if (isLastRow) {
@@ -44,7 +46,7 @@ export const useVirtualTableContainer = ({ rowHeight, areAllRowsLoaded, rows, is
             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 commonItemDataSuffix = useMemo(() => [selectedCell, selectedColumn, selectedChip, handleCellClick, handleChipClick], [selectedCell, selectedColumn, selectedChip, handleCellClick, handleChipClick]);
     const getItemDataForContainer = useCallback((columnsData, isPinnedColumn, height) => createItemData(columnsData, ...commonItemDataParams, isPinnedColumn, ...commonItemDataSuffix, height, rowHeight), [commonItemDataParams, commonItemDataSuffix, rowHeight]);
     return {
         getItemSize,

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { TableRowProps } from '@mui/material';
+import { type TableRowProps } from '@mui/material';
 import type { IColumnProps } from '../../../types/index.js';
 interface ITableRowProps<R = any> {
     row: R;
@@ -13,9 +13,11 @@ interface ITableRowProps<R = any> {
     isSheetView?: boolean;
     selectedCell?: string | null;
     selectedColumn?: string | null;
+    selectedChip?: string | null;
     onCellClick?: (rowIndex: number, columnIndex: number, event: React.MouseEvent, pinnedType?: 'start' | 'end') => void;
+    onChipClick?: (rowIndex: number, columnIndex: number, event: React.MouseEvent, chipIndex: number, pinnedType?: 'start' | 'end') => void;
     isLastRow?: boolean;
 }
-declare function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell, selectedColumn, onCellClick, isLastRow, }: Readonly<ITableRowProps>): import("react/jsx-runtime").JSX.Element;
+declare function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell, selectedColumn, selectedChip, onCellClick, isLastRow, onChipClick, }: Readonly<ITableRowProps>): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof TableRow>;
 export default _default;

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

@@ -1,17 +1,21 @@
 import { createElement as _createElement } from "react";
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { memo, useMemo } from 'react';
+import { Box } from '@mui/material';
 import { areEqual } from 'react-window';
 import { StyledCell, StyledTableRow } from './style';
 import { getSelectionStyles } from '../../../utils/index.js';
-function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = null, selectedColumn = null, onCellClick, isLastRow = false, }) {
-    const renderCell = (column) => {
+function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = null, selectedColumn = null, selectedChip = null, onCellClick, isLastRow = false, onChipClick, }) {
+    const renderCell = (column, rowIndex, colIndex) => {
         const { render, format, selector } = column;
+        const handleChipClick = (event, chipIndex) => {
+            onChipClick === null || onChipClick === void 0 ? void 0 : onChipClick(rowIndex, colIndex, event, chipIndex, column.pinned);
+        };
         if (!(column === null || column === void 0 ? void 0 : column.id) || !row)
             return null;
         const value = selector ? selector({ row, index, value: row[column === null || column === void 0 ? void 0 : column.id] }) : row[column === null || column === void 0 ? void 0 : column.id];
         const formattedValue = format ? format({ value, row, index }) : value;
-        return render ? render({ row, column, index, value: row[column === null || column === void 0 ? void 0 : column.id] }) : _jsx(_Fragment, { children: formattedValue });
+        return render ? (render({ row, column, index, value: row[column === null || column === void 0 ? void 0 : column.id], chipSelection: { onChipClick: handleChipClick, rowIndex, colIndex, selectedChip } })) : (_jsx(_Fragment, { children: formattedValue }));
     };
     const content = useMemo(() => (_jsx(_Fragment, { children: columns.map((column, colIndex) => {
             var _a, _b;
@@ -34,8 +38,10 @@ function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = n
                 effectiveFirst = isFirstColumn && column.pinned !== 'start';
                 effectiveLast = isLastColumn && column.pinned !== 'end';
             }
-            return (_jsx(StyledCell, Object.assign({ component: "div", "data-testid": "TableRow_TableCell", "data-column-id": column.id, "data-column-width": column.width, "data-column-width-used": column.width, "data-column-align": column.align, "data-column-order": column.order, "data-column-header": typeof column.header === 'string' ? column.header : 'component', "data-column-sortable": !!column.sortable, "data-column-filterable": !!column.filter, isFirst: effectiveFirst, isLast: effectiveLast, onClick: (event) => onCellClick === null || onCellClick === void 0 ? void 0 : onCellClick(index, colIndex, event, column.pinned), sx: Object.assign(Object.assign({ width: column.width, minWidth: column.width, textAlign: column.align, justifyContent: column.align === 'right' ? 'flex-end' : 'flex-start', cursor: onCellClick ? 'pointer' : 'default' }, selectionStyles), column.cellStyle), isSheetView: isSheetView, isSelected: isCellSelected }, { children: renderCell(column) }), `${column.id}-${colIndex}`));
-        }) })), [columns, row, index, selectedCell, selectedColumn, onCellClick, isLastRow]);
+            return (_jsx(StyledCell, Object.assign({ component: "div", "data-testid": "TableRow_TableCell", "data-column-id": column.id, "data-column-width": column.width, "data-column-width-used": column.width, "data-column-align": column.align, "data-column-order": column.order, "data-column-header": typeof column.header === 'string' ? column.header : 'component', "data-column-sortable": !!column.sortable, "data-column-filterable": !!column.filter, isFirst: effectiveFirst, isLast: effectiveLast, onClick: (event) => {
+                    onCellClick === null || onCellClick === void 0 ? void 0 : onCellClick(index, colIndex, event, column.pinned);
+                }, sx: Object.assign(Object.assign({ width: column.width, minWidth: column.width, textAlign: column.align, justifyContent: column.align === 'right' ? 'flex-end' : 'flex-start', cursor: onCellClick ? 'pointer' : 'default' }, selectionStyles), column.cellStyle), isSheetView: isSheetView, isSelected: isCellSelected }, { children: _jsx(Box, Object.assign({ sx: { position: 'relative', zIndex: 1, width: '100%' } }, { children: renderCell(column, index, colIndex) })) }), `${column.id}-${colIndex}`));
+        }) })), [columns, row, index, selectedCell, selectedColumn, onCellClick, isLastRow, selectedChip, isSheetView]);
     return (_createElement(StyledTableRow, Object.assign({ "data-testid": "TableRow", onClick: rowProps === null || rowProps === void 0 ? void 0 : rowProps.onRowClick, showShadowHighlight: rowProps === null || rowProps === void 0 ? void 0 : rowProps.showShadowHighlight, showLoadedStyle: rowProps === null || rowProps === void 0 ? void 0 : rowProps.showLoadedStyle, component: "article" }, rowProps, { key: index, isSheetView: isSheetView }), content));
 }
 export default memo(TableRow, areEqual);

package/build/components/VirtualTables/components/virtualScroll/ListItemWrapper.js

@@ -57,7 +57,7 @@ function ListItemWrapper(_a) {
     const row = rows[index];
     const isLoadingRow = isLoading && index === lastItemIndex + 1;
     const isLoadedRow = index <= newLoadedRowsEndIndex;
-    const rowClickHandler = React.useCallback(createRowClickHandler(row, rowProps === null || rowProps === void 0 ? void 0 : rowProps.onRowClick), [row, rowProps === null || rowProps === void 0 ? void 0 : rowProps.onRowClick]);
+    const rowClickHandler = React.useCallback(() => createRowClickHandler(row, rowProps === null || rowProps === void 0 ? void 0 : rowProps.onRowClick), [row, rowProps === null || rowProps === void 0 ? void 0 : rowProps.onRowClick]);
     const memoizedRowProps = React.useMemo(() => (Object.assign(Object.assign({ showShadowHighlight: scrollToIndex === index, showLoadedStyle: isLoadedRow }, rowProps), { onClick: rowClickHandler })), [scrollToIndex, index, isLoadedRow, rowProps, rowClickHandler]);
     const renderSheetViewLoadingRow = React.useCallback((lastRowContent) => {
         return (_jsx(Box, Object.assign({ sx: {

package/build/components/index.d.ts

@@ -97,3 +97,4 @@ export { default as AppServices } from './AppServices';
 export { default as ScrollLoader } from './ScrollLoader';
 export * from './ScrollLoader';
 export * from './TooltipChip';
+export * from './RightLeftExpandingCenterChip';

package/build/components/index.js

@@ -97,3 +97,4 @@ export { default as AppServices } from './AppServices';
 export { default as ScrollLoader } from './ScrollLoader';
 export * from './ScrollLoader';
 export * from './TooltipChip';
+export * from './RightLeftExpandingCenterChip';

package/build/constants/assets.d.ts

@@ -523,3 +523,4 @@ export declare const deactivatedCircle: string;
 export declare const exclamationOutlinedCircle: string;
 export declare const outlinedCircle: string;
 export declare const greenCheck2ACE00: string;
+export declare const blueCopyIcon: string;

package/build/constants/assets.js

@@ -527,3 +527,4 @@ export const deactivatedCircle = `${lightUrl}/deactivatedCircle.svg`;
 export const exclamationOutlinedCircle = `${lightUrl}/exclamationOutlinedCircle.svg`;
 export const outlinedCircle = `${lightUrl}/outlinedCircle.svg`;
 export const greenCheck2ACE00 = `${lightUrl}/greenCheck2ACE00.svg`;
+export const blueCopyIcon = `${lightUrl}/blueCopyIcon.svg`;

package/build/types/table.d.ts

@@ -47,11 +47,21 @@ export interface TableFooterProps extends BoxProps {
     maximized?: boolean;
     children?: React.ReactNode;
 }
+export interface TableChipProps {
+    onChipClick?: (rowIndex: number, columnIndex: number, event: React.MouseEvent, chipIndex: number, pinnedType?: 'start' | 'end') => void;
+}
+export interface ChipSelection {
+    onChipClick?: (event: React.MouseEvent, chipIndex: number) => void;
+    colIndex?: number;
+    rowIndex?: number;
+    selectedChip?: string | null;
+}
 export interface IRenderAttr<R, C> {
     row: R;
     column: C;
     index: number;
     value: any;
+    chipSelection?: ChipSelection;
 }
 export interface IFormatAttr<R> {
     value: string | Record<string, any> | number;

package/build/utils/style.d.ts

@@ -1,3 +1,9 @@
+export declare const SELECTION_COLORS: {
+    readonly primary: "#1F88D0";
+    readonly background: "white";
+    readonly border: "#F2F2F2";
+    readonly transparent: "transparent";
+};
 interface GetSelectionStylesParams {
     isSelected: boolean;
     isCellSelected: boolean;

package/build/utils/style.js

@@ -1,4 +1,4 @@
-const SELECTION_COLORS = {
+export const SELECTION_COLORS = {
     primary: '#1F88D0',
     background: 'white',
     border: '#F2F2F2',

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.30-test.3",
-  "testVersion": 3,
+  "version": "0.1.31-test.10",
+  "testVersion": 10,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",