@tap-payments/os-micro-frontend-shared 0.1.20-test.3 → 0.1.21

package/build/components/StatusBar/StatusBar.js

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

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

@@ -1,17 +1,12 @@
 /// <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 | DetailedStatusItem<T>[];
+    status?: T;
     render?: <IStatus extends T>(controls: {
         status: IStatus;
-        onChange: (selected?: T) => void;
+        onChange: (selected?: AvailableStatus<T>['status']) => 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,7 +1 @@
-const test = [
-    {
-        status: [{ value: 'ACTIVE' }, { value: 'ACTIVE', icon: '' }],
-    },
-];
-console.log(test);
 export {};

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

@@ -1,13 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo, useCallback, useMemo, useState } from 'react';
+import { memo, useCallback, useMemo, useRef, useState } from 'react';
 import Box from '@mui/material/Box';
 import { pinIcon, unpinIcon } from '../../../../../constants/index.js';
 import ColumnFilter from '../../../components/ColumnFilter';
-import { StyledCell } from '../../../components/style';
+import { StyledCell, TableHeaderInner } 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) => {
@@ -23,9 +24,11 @@ function TableCell({ column: { header, id, align, headerStyle, sortable, filter,
             }
         }
     };
-    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) => {
+    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) => {
             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',
@@ -34,13 +37,13 @@ function TableCell({ column: { header, id, align, headerStyle, sortable, filter,
                 right: 0,
                 left: 0,
                 bottom: 0,
-            } }, 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" }) })))] })));
+            } }, 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" }) })))] })) })));
 }
 export default memo(TableCell);

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

@@ -1,12 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import Box from '@mui/material/Box';
 import ColumnFilter from '../../../../../VirtualTables/components/ColumnFilter';
 import ColumnSort from '../../../../../VirtualTables/components/ColumnSort';
-import { StyledCell } from '../../../../../VirtualTables/components/style';
+import { StyledCell, TableHeaderInner } 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);
-    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 })] })));
+    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 })] })) })));
 }

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

@@ -19,6 +19,9 @@ 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,6 +49,12 @@ 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,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.3",
-  "testVersion": 3,
+  "version": "0.1.21",
+  "testVersion": 0,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",
@@ -131,4 +131,4 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   }
-}
+}