@tap-payments/os-micro-frontend-shared 0.1.21 → 0.1.22

package/build/components/StatusBar/StatusBar.js

@@ -36,18 +36,23 @@ function StatusBar({ isFilteredIdsShown, onStatusChange, availableStatuses, stat
                         }
                     } })));
             }
-            const isCurrentStatusDropdown = !isMultiSelection && ((_b = s.status) === null || _b === void 0 ? void 0 : _b.includes(status || ''));
+            if (!s.status)
+                return null;
+            const formattedStatuses = (s.status.map((item) => (typeof item === 'string' ? { value: item } : item)).filter(Boolean) ||
+                []);
+            const isCurrentStatusDropdown = !isMultiSelection && !!status && formattedStatuses.some((item) => (item === null || item === void 0 ? void 0 : item.value) === status);
             const variant = isCurrentStatusDropdown ? 'active' : 'inActive';
-            const statusLabel = isCurrentStatusDropdown && !isMultiSelection ? status : s.status[0];
+            const statusLabel = isCurrentStatusDropdown && !isMultiSelection ? status : (_b = formattedStatuses[0]) === null || _b === void 0 ? void 0 : _b.value;
             return (_jsx("div", { children: _jsx(StatusButton, Object.assign({}, s, { label: t(statusLabel || ''), variant: variant, onButtonBodyClick: (buttonStatus) => {
                         handleStatusChange(buttonStatus);
-                    }, dropdownOptions: s.status.map((stat) => ({
-                        label: t(stat || ''),
+                    }, dropdownOptions: formattedStatuses.map((stat) => ({
+                        label: t((stat === null || stat === void 0 ? void 0 : stat.value) || ''),
                         onClick: () => {
-                            handleStatusChange(stat);
+                            handleStatusChange(stat.value);
                         },
-                        status: stat,
-                    })) })) }, (_c = s === null || s === void 0 ? void 0 : s.status) === null || _c === void 0 ? void 0 : _c[0]));
+                        status: stat === null || stat === void 0 ? void 0 : stat.value,
+                        icon: stat.icon,
+                    })) })) }, (_c = formattedStatuses[0]) === null || _c === void 0 ? void 0 : _c.value));
         }) }));
 }
 export default memo(StatusBar);

package/build/components/StatusBar/index.d.ts

@@ -1,3 +1,3 @@
 import StatusBar from './StatusBar';
 export default StatusBar;
-export { type AvailableStatus } from './type';
+export { type AvailableStatus, type DetailedStatusItem } from './type';

package/build/components/StatusBar/type.d.ts

@@ -1,12 +1,17 @@
 /// <reference types="react" />
 import { StatusButtonProps } from '../StatusButton';
 import { TableHeaderStatus } from '../../types/index.js';
+export type DetailedStatusItem<T> = {
+    value: T extends Array<unknown> ? T[number] : T;
+    icon?: React.ReactNode;
+};
 export type AvailableStatus<T extends TableHeaderStatus | TableHeaderStatus[] = undefined> = StatusButtonProps & {
-    status?: T;
+    status?: T | DetailedStatusItem<T>[];
     render?: <IStatus extends T>(controls: {
         status: IStatus;
-        onChange: (selected?: AvailableStatus<T>['status']) => void;
+        onChange: (selected?: T) => void;
     }, options?: Omit<AvailableStatus<T>, 'render'> & {
         index: number;
     }) => React.ReactNode;
 };
+export type TerminalStatus = 'ACTIVE' | 'INACTIVE' | 'DEACTIVATED' | 'FAULTY' | 'CANCELLED' | 'ARCHIVED' | (string & {});

package/build/components/StatusBar/type.js

@@ -1 +1,7 @@
+const test = [
+    {
+        status: [{ value: 'ACTIVE' }, { value: 'ACTIVE', icon: '' }],
+    },
+];
+console.log(test);
 export {};

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

@@ -1,14 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo, useCallback, useMemo, useRef, useState } from 'react';
+import { memo, useCallback, useMemo, useState } from 'react';
 import Box from '@mui/material/Box';
 import { pinIcon, unpinIcon } from '../../../../../constants/index.js';
 import ColumnFilter from '../../../components/ColumnFilter';
-import { StyledCell, TableHeaderInner } from '../../../components/style';
+import { StyledCell } from '../../../components/style';
 import { PinIconContainer, HeaderText } from '../../style';
 import ColumnSort from '../../../../VirtualTables/components/ColumnSort';
 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, }) {
     const [columnFilterEl, setColumnFilterEl] = useState(null);
-    const cellRef = useRef(null);
     const checkIsPanned = useCallback((columnId) => pinnedColumns === null || pinnedColumns === void 0 ? void 0 : pinnedColumns.includes(columnId), [pinnedColumns]);
     const isPinned = useMemo(() => checkIsPanned(id), [id, checkIsPanned]);
     const handlePinClick = (columnId) => {
@@ -24,11 +23,9 @@ function TableCell({ column: { header, id, align, headerStyle, sortable, filter,
             }
         }
     };
-    const onOpenFilterDropdown = () => {
-        setColumnFilterEl(cellRef.current);
-    };
-    return (_jsx(StyledCell, Object.assign({ "data-id": id, component: "div", "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell", "data-column-id": id, "data-column-width": width, "data-column-width-used": width, "data-column-align": align, "data-column-order": order, "data-column-header": typeof header === 'string' ? header : 'component', "data-column-sortable": !!sortable, "data-column-filterable": !!filter, "data-column-pinned": isPinned, isFirst: isFirst, isLast: isLast, isSheetView: true, ref: cellRef, onClick: (event) => {
+    return (_jsxs(StyledCell, Object.assign({ "data-id": id, component: "div", "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell", "data-column-id": id, "data-column-width": width, "data-column-width-used": width, "data-column-align": align, "data-column-order": order, "data-column-header": typeof header === 'string' ? header : 'component', "data-column-sortable": !!sortable, "data-column-filterable": !!filter, "data-column-pinned": isPinned, isFirst: isFirst, isLast: isLast, isSheetView: true, onClick: (event) => {
             onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(colIndex, event, pinned);
+            setColumnFilterEl(event.currentTarget);
         }, sx: (theme) => (Object.assign({ display: 'flex', gap: theme.spacing(0.5), alignItems: 'center', justifyContent: align === 'right' ? 'flex-end' : 'flex-start', width, textAlign: align, overflow: 'unset', cursor: 'pointer', boxSizing: 'border-box', border: isSelected ? '1px solid #1F88D0' : '1px solid #F2F2F2', backgroundColor: isSelected ? '#F2F2F2' : '#FCFCFC', minHeight: isSelected ? '28px' : 'auto', position: 'relative', '&:before': {
                 content: '""',
                 border: isSelected ? '1px solid #1F88D0' : '1px solid transparent',
@@ -37,13 +34,13 @@ function TableCell({ column: { header, id, align, headerStyle, sortable, filter,
                 right: 0,
                 left: 0,
                 bottom: 0,
-            } }, headerStyle)) }, { children: _jsxs(TableHeaderInner, Object.assign({ onClick: onOpenFilterDropdown }, { children: [typeof header === 'function' ? (header()) : (_jsx(Box, Object.assign({ "data-testid": "SheetViewTableHeader_columns_header", sx: { maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, { children: header && _jsx(HeaderText, Object.assign({ "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell_header_text" }, { children: header })) }))), filter && (_jsx(ColumnFilter, Object.assign({}, filter, { anchorEl: columnFilterEl, setAnchorEl: setColumnFilterEl, onClose: (event) => {
-                        onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(colIndex, event, pinned);
-                    } }))), sortable && (_jsx(ColumnSort, { columnId: id, onColumnSort: onColumnSort, columnsSorting: columnsSorting, onClick: (e) => {
-                        onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(colIndex, e, pinned);
-                    } })), isPinnable && pinnable && !isDefaultPinned && !isLast && (_jsx(PinIconContainer, Object.assign({ onClick: (event) => {
-                        event.stopPropagation();
-                        handlePinClick(id);
-                    }, title: isPinned ? 'Unpin column' : 'Pin column' }, { children: _jsx("img", { src: isPinned ? unpinIcon : pinIcon, alt: "pin-icon" }) })))] })) })));
+            } }, headerStyle)) }, { children: [typeof header === 'function' ? (header()) : (_jsx(Box, Object.assign({ "data-testid": "SheetViewTableHeader_columns_header", sx: { maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, { children: header && _jsx(HeaderText, Object.assign({ "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell_header_text" }, { children: header })) }))), filter && (_jsx(ColumnFilter, Object.assign({}, filter, { anchorEl: columnFilterEl, setAnchorEl: setColumnFilterEl, onClose: (event) => {
+                    onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(colIndex, event, pinned);
+                } }))), sortable && (_jsx(ColumnSort, { columnId: id, onColumnSort: onColumnSort, columnsSorting: columnsSorting, onClick: (e) => {
+                    onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(colIndex, e, pinned);
+                } })), isPinnable && pinnable && !isDefaultPinned && !isLast && (_jsx(PinIconContainer, Object.assign({ onClick: (event) => {
+                    event.stopPropagation();
+                    handlePinClick(id);
+                }, title: isPinned ? 'Unpin column' : 'Pin column' }, { children: _jsx("img", { src: isPinned ? unpinIcon : pinIcon, alt: "pin-icon" }) })))] })));
 }
 export default memo(TableCell);

package/build/components/VirtualTables/components/TableHeader/components/TableCell/TableCell.js

@@ -1,14 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useState } from 'react';
+import { useState } from 'react';
 import Box from '@mui/material/Box';
 import ColumnFilter from '../../../../../VirtualTables/components/ColumnFilter';
 import ColumnSort from '../../../../../VirtualTables/components/ColumnSort';
-import { StyledCell, TableHeaderInner } from '../../../../../VirtualTables/components/style';
+import { StyledCell } from '../../../../../VirtualTables/components/style';
 export function TableCell({ column: { header, id, align, headerStyle, sortable, filter, width, order }, isFirst, isLast, isSheetView, onColumnSort, columnsSorting, }) {
     const [columnFilterEl, setColumnFilterEl] = useState(null);
-    const cellRef = useRef(null);
-    const onOpenFilterDropdown = () => {
-        setColumnFilterEl(cellRef.current);
-    };
-    return (_jsx(StyledCell, Object.assign({ "data-id": id, component: "div", "data-testid": "VirtualTable_TableHeader_StyledCell", "data-column-id": id, "data-column-width": width, "data-column-width-used": width, "data-column-align": align, "data-column-order": order, "data-column-header": typeof header === 'string' ? header : 'component', "data-column-sortable": !!sortable, "data-column-filterable": !!filter, isFirst: isFirst, isLast: isLast, ref: cellRef, sx: (theme) => (Object.assign({ paddingInline: '0.6875rem', paddingLeft: isFirst ? '0' : '0.6875rem', paddingRight: isLast ? '0' : '0.6875rem', display: 'flex', gap: theme.spacing(0.5), alignItems: 'center', justifyContent: align === 'right' ? 'flex-end' : 'flex-start', width: width, textAlign: align, overflow: 'unset', fontWeight: 600 }, headerStyle)), isSheetView: isSheetView }, { children: _jsxs(TableHeaderInner, Object.assign({ onClick: onOpenFilterDropdown }, { children: [typeof header === 'function' ? (header()) : (_jsx(Box, Object.assign({ "data-testid": "TableHeader_columns_header", sx: { maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, { children: header && (_jsx("span", Object.assign({ style: { textOverflow: 'ellipsis', width: '80%', overflow: 'hidden' }, "data-testid": "VirtualTable_TableHeader_StyledCell_header_text" }, { children: header }))) }))), filter && _jsx(ColumnFilter, Object.assign({}, filter, { anchorEl: columnFilterEl, setAnchorEl: setColumnFilterEl })), sortable && _jsx(ColumnSort, { onColumnSort: onColumnSort, columnsSorting: columnsSorting, columnId: id })] })) })));
+    return (_jsxs(StyledCell, Object.assign({ "data-id": id, component: "div", "data-testid": "VirtualTable_TableHeader_StyledCell", "data-column-id": id, "data-column-width": width, "data-column-width-used": width, "data-column-align": align, "data-column-order": order, "data-column-header": typeof header === 'string' ? header : 'component', "data-column-sortable": !!sortable, "data-column-filterable": !!filter, isFirst: isFirst, isLast: isLast, onClick: (event) => {
+            setColumnFilterEl(event.currentTarget);
+        }, sx: (theme) => (Object.assign({ paddingInline: '0.6875rem', paddingLeft: isFirst ? '0' : '0.6875rem', paddingRight: isLast ? '0' : '0.6875rem', display: 'flex', gap: theme.spacing(0.5), alignItems: 'center', justifyContent: align === 'right' ? 'flex-end' : 'flex-start', width: width, textAlign: align, overflow: 'unset', fontWeight: 600 }, headerStyle)), isSheetView: isSheetView }, { children: [typeof header === 'function' ? (header()) : (_jsx(Box, Object.assign({ "data-testid": "TableHeader_columns_header", sx: { maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, { children: header && (_jsx("span", Object.assign({ style: { textOverflow: 'ellipsis', width: '80%', overflow: 'hidden' }, "data-testid": "VirtualTable_TableHeader_StyledCell_header_text" }, { children: header }))) }))), filter && _jsx(ColumnFilter, Object.assign({}, filter, { anchorEl: columnFilterEl, setAnchorEl: setColumnFilterEl })), sortable && _jsx(ColumnSort, { onColumnSort: onColumnSort, columnsSorting: columnsSorting, columnId: id })] })));
 }

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

@@ -19,9 +19,6 @@ export declare const StyledCell: import("@emotion/styled").StyledComponent<impor
     isSheetView?: boolean | undefined;
     isSelected?: boolean | undefined;
 }, {}, {}>;
-export declare const TableHeaderInner: 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>, {}, {}>;
 interface StyledVirtualListProps {
     areTotalRowsNotFillingHeight: boolean;
     isSheetView?: boolean;

package/build/components/VirtualTables/components/style.js

@@ -49,12 +49,6 @@ export const StyledCell = styled(TableCell, {
         },
     }));
 });
-export const TableHeaderInner = styled(Box)(({ theme }) => ({
-    zIndex: 1,
-    display: 'flex',
-    gap: theme.spacing(0.5),
-    alignItems: 'center',
-}));
 export const StyledVirtualList = styled(VirtualScrollList, {
     shouldForwardProp: (prop) => !['areTotalRowsNotFillingHeight', 'isSheetView'].includes(prop),
 })(({ theme, areTotalRowsNotFillingHeight, isSheetView }) => (Object.assign({ backgroundColor: areTotalRowsNotFillingHeight ? 'transparent' : theme.palette.background.default }, (isSheetView && {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.1.21",
+  "version": "0.1.22",
   "testVersion": 0,
   "type": "module",
   "main": "build/index.js",