@tap-payments/os-micro-frontend-shared 0.1.136-test.4 → 0.1.136-test.5

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

@@ -24,20 +24,26 @@ function SheetViewTableHeaderCell({ column: { header, id, align, headerStyle, so
             }
         }
     };
-    const onOpenFilterDropdown = () => {
+    const onOpenFilterDropdown = useCallback(() => {
         setColumnFilterEl(cellRef.current);
-    };
-    const handleCellClick = (event) => {
+    }, []);
+    const handleCellClick = useCallback((event) => {
         // Only fire column click when clicking on the cell itself, not on child elements
         if (event.target === event.currentTarget) {
             onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(colIndex, event, pinned);
         }
-    };
-    const handleHeaderInnerClick = (event) => {
+    }, [onColumnClick, colIndex, pinned]);
+    const handleHeaderInnerClick = useCallback((event) => {
         // Prevent event bubbling to parent cell
         event.stopPropagation();
         onOpenFilterDropdown();
-    };
+    }, [onOpenFilterDropdown]);
+    // Memoize filter props to prevent object recreation on every render
+    const memoizedFilterProps = useMemo(() => {
+        if (!filter)
+            return null;
+        return Object.assign(Object.assign({}, filter), { anchorEl: columnFilterEl, setAnchorEl: setColumnFilterEl });
+    }, [filter, columnFilterEl]);
     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: handleCellClick, 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: '0.5px solid transparent', borderColor: isSelected ? '#1F88D0' : '#F2F2F2', borderBottom: isSelected ? '0.5px solid transparent' : '0.5px solid #F2F2F2', backgroundColor: isSelected ? '#F2F2F2' : '#FCFCFC', minHeight: '28px', position: 'relative', '&:before': {
                 content: '""',
                 borderBottom: 'none',
@@ -46,7 +52,7 @@ function SheetViewTableHeaderCell({ column: { header, id, align, headerStyle, so
                 right: 0,
                 left: 0,
                 bottom: 0,
-            } }, headerStyle)) }, { children: _jsxs(TableHeaderInner, Object.assign({ onClick: handleHeaderInnerClick }, { 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 })), sortable && (_jsx(ColumnSort, { columnId: id, onColumnSort: onColumnSort, columnsSorting: columnsSorting, onClick: (e) => {
+            } }, headerStyle)) }, { children: _jsxs(TableHeaderInner, Object.assign({ onClick: handleHeaderInnerClick }, { 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 })) }))), memoizedFilterProps && _jsx(ColumnFilter, Object.assign({}, memoizedFilterProps)), 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();

package/build/components/VirtualTables/components/ColumnFilter/ColumnFilter.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { memo, useMemo } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import Box from '@mui/material/Box';
 import Popper from '@mui/material/Popper';
 import { closeIcon, columnIcon, whiteFilterIcon } from '../../../../constants/index.js';
@@ -9,18 +9,22 @@ import { FilterWrapper } from './style';
 import CustomBackdrop from '../../../CustomBackdrop';
 function ColumnFilter(filter) {
     const { anchorEl, setAnchorEl, onClose } = filter;
-    const onCloseDropdown = (event) => {
+    const onCloseDropdown = useCallback((event) => {
         event.stopPropagation();
         setAnchorEl(null);
         onClose === null || onClose === void 0 ? void 0 : onClose(event);
-    };
-    const filterData = useMemo(() => { var _a; return ((_a = filter === null || filter === void 0 ? void 0 : filter.options) === null || _a === void 0 ? void 0 : _a.reduce((acc, { apiKey }) => { var _a; return (Object.assign(Object.assign({}, acc), { [apiKey]: (_a = filter === null || filter === void 0 ? void 0 : filter.data) === null || _a === void 0 ? void 0 : _a[apiKey] })); }, {})) || {}; }, [filter]);
+    }, [setAnchorEl, onClose]);
+    const filterData = useMemo(() => { var _a; return ((_a = filter === null || filter === void 0 ? void 0 : filter.options) === null || _a === void 0 ? void 0 : _a.reduce((acc, { apiKey }) => { var _a; return (Object.assign(Object.assign({}, acc), { [apiKey]: (_a = filter === null || filter === void 0 ? void 0 : filter.data) === null || _a === void 0 ? void 0 : _a[apiKey] })); }, {})) || {}; }, [filter === null || filter === void 0 ? void 0 : filter.options, filter === null || filter === void 0 ? void 0 : filter.data]);
+    // Extract derived values for better memoization
+    const isListType = filter.type === 'list';
+    const listApiKey = isListType ? filter.apiKey : '';
     const listFilterData = useMemo(() => {
         var _a;
-        const listFilter = filter;
-        const rawData = (_a = listFilter === null || listFilter === void 0 ? void 0 : listFilter.data) === null || _a === void 0 ? void 0 : _a[listFilter.apiKey];
+        if (!isListType)
+            return [];
+        const rawData = (_a = filter === null || filter === void 0 ? void 0 : filter.data) === null || _a === void 0 ? void 0 : _a[listApiKey];
         return Array.isArray(rawData) ? rawData : [];
-    }, [filter]);
+    }, [isListType, filter === null || filter === void 0 ? void 0 : filter.data, listApiKey]);
     const showClearIcon = useMemo(() => Object.values(filterData || {}).some((value) => {
         if (typeof value === 'string' || Array.isArray(value))
             return value.length > 0;
@@ -29,11 +33,16 @@ function ColumnFilter(filter) {
     const open = Boolean(anchorEl);
     const filterApiKeys = useMemo(() => {
         var _a;
-        if (filter.type === 'list') {
-            return [filter.apiKey];
+        if (isListType) {
+            return [listApiKey];
         }
         return (_a = ((filter === null || filter === void 0 ? void 0 : filter.options) || [])) === null || _a === void 0 ? void 0 : _a.map(({ apiKey }) => apiKey);
-    }, [filter]);
+    }, [isListType, listApiKey, filter === null || filter === void 0 ? void 0 : filter.options]);
+    const clearHandler = useCallback((e) => {
+        e.stopPropagation();
+        setAnchorEl(null);
+        filter.onClear(filterApiKeys);
+    }, [setAnchorEl, filter, filterApiKeys]);
     const renderFilter = useMemo(() => {
         if (filter.type === 'list')
             return _jsx(List, { onCloseDropdown: onCloseDropdown, filter: filter });
@@ -48,11 +57,7 @@ function ColumnFilter(filter) {
             return filter.render(componentSharedProps);
         }
         return null;
-    }, [open, filter, onCloseDropdown]);
-    return (_jsxs(_Fragment, { children: [showClearIcon ? (_jsxs(FilterWrapper, { children: [_jsx(Box, { component: "img", "data-testid": "ColumnFilter_whiteFilterIcon", src: whiteFilterIcon, alt: "filter-icon", sx: { marginInlineEnd: '2px', height: 6 } }), _jsx(Box, { component: "img", "data-testid": "ColumnFilter_closeIcon", src: closeIcon, alt: "close-icon", onClick: (e) => {
-                            e.stopPropagation();
-                            setAnchorEl(null);
-                            filter.onClear(filterApiKeys);
-                        } })] })) : (_jsx(Box, { component: "img", "data-testid": "ColumnFilter_columnIcon", src: columnIcon, alt: "column-icon", sx: { cursor: 'pointer', marginTop: '2px', userSelect: 'none' } })), open && _jsx(CustomBackdrop, { onClick: onCloseDropdown }), _jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: "bottom-start" }, { children: renderFilter }))] }));
+    }, [filter, onCloseDropdown, anchorEl, setAnchorEl]);
+    return (_jsxs(_Fragment, { children: [showClearIcon ? (_jsxs(FilterWrapper, { children: [_jsx(Box, { component: "img", "data-testid": "ColumnFilter_whiteFilterIcon", src: whiteFilterIcon, alt: "filter-icon", sx: { marginInlineEnd: '2px', height: 6 } }), _jsx(Box, { component: "img", "data-testid": "ColumnFilter_closeIcon", src: closeIcon, alt: "close-icon", onClick: clearHandler })] })) : (_jsx(Box, { component: "img", "data-testid": "ColumnFilter_columnIcon", src: columnIcon, alt: "column-icon", sx: { cursor: 'pointer', marginTop: '2px', userSelect: 'none' } })), open && _jsx(CustomBackdrop, { onClick: onCloseDropdown }), _jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: "bottom-start" }, { children: renderFilter }))] }));
 }
 export default memo(ColumnFilter);

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.136-test.4",
-  "testVersion": 4,
+  "version": "0.1.136-test.5",
+  "testVersion": 5,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",