@tap-payments/os-micro-frontend-shared 0.0.268-test.1 → 0.0.268-test.3

package/build/components/VirtualTable/components/ColumnFilter/ColumnFilter.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
-declare const _default: import("react").ForwardRefExoticComponent<({
+declare const _default: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<({
     onConfirm?: ((filterValues: import("../../../../types/index.js").ColumnFilterValues) => void) | undefined;
     onClear: (apiKeys: string[]) => void;
     onColumnFilterClearClick?: (() => void) | undefined;
     data?: import("../../../../types/index.js").ColumnFilterValues | undefined;
     isOnlyOneFilter?: boolean | undefined;
     wrapperSx?: import("@mui/system").SxProps | undefined;
-} & (import("../../../../types/index.js").IColumnFilterList | import("../../../../types/index.js").IColumnFilterInputs | import("../../../../types/index.js").IColumnFilterCustom)) & import("react").RefAttributes<HTMLDivElement>>;
+} & (import("../../../../types/index.js").IColumnFilterList | import("../../../../types/index.js").IColumnFilterInputs | import("../../../../types/index.js").IColumnFilterCustom)) & import("react").RefAttributes<HTMLDivElement>>>;
 export default _default;

package/build/components/VirtualTable/components/ColumnFilter/ColumnFilter.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, useMemo, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, memo, useMemo, useState } from 'react';
 import Box from '@mui/material/Box';
 import ClickAwayListener from '@mui/material/ClickAwayListener';
 import Popper from '@mui/material/Popper';
@@ -15,7 +15,6 @@ function ColumnFilter(filter, ref) {
     };
     const onCloseDropdown = () => {
         setAnchorEl(null);
-        console.log('close');
     };
     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]);
     const listFilterData = useMemo(() => {
@@ -24,7 +23,11 @@ function ColumnFilter(filter, ref) {
         const rawData = (_a = listFilter === null || listFilter === void 0 ? void 0 : listFilter.data) === null || _a === void 0 ? void 0 : _a[listFilter.apiKey];
         return Array.isArray(rawData) ? rawData : [];
     }, [filter]);
-    const showClearIcon = true;
+    const showClearIcon = useMemo(() => Object.values(filterData || {}).some((value) => {
+        if (typeof value === 'string' || Array.isArray(value))
+            return value.length > 0;
+        return Boolean(value);
+    }) || listFilterData.length > 0, [filterData, listFilterData]);
     const open = Boolean(anchorEl);
     const filterApiKeys = useMemo(() => {
         var _a;
@@ -47,10 +50,10 @@ function ColumnFilter(filter, ref) {
         }
         return null;
     }, [open, filter, anchorEl, setAnchorEl]);
-    return (_jsxs(_Fragment, { children: [_jsx(ClickAwayListener, Object.assign({ onClickAway: onCloseDropdown }, { children: _jsxs(Box, Object.assign({ component: "section", "data-testid": "ColumnFilter", sx: { position: 'relative', display: 'flex', alignItems: 'center' } }, { children: [showClearIcon ? (_jsxs(FilterWrapper, { children: [_jsx(Box, { component: "img", "data-testid": "ColumnFilter_whiteFilterIcon", src: whiteFilterIcon, alt: "filter-icon", sx: { marginInlineEnd: '2px', height: 6 }, onClick: openDropdown, ref: ref }), _jsx(Box, { component: "img", "data-testid": "ColumnFilter_closeIcon", src: closeIcon, alt: "close-icon", onClick: () => {
-                                        filter.onClear(filterApiKeys);
-                                    } })] })) : (_jsx(Box, { component: "img", "data-testid": "ColumnFilter_columnIcon", src: columnIcon, alt: "column-icon", sx: { cursor: 'pointer', marginTop: '2px' }, onClick: openDropdown, ref: ref })), open && _jsx(CustomBackdrop, { onClick: onCloseDropdown, sx: { background: 'red', zIndex: 12 } })] })) })), _jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: "bottom-start", sx: {
-                    zIndex: 9999,
-                } }, { children: renderFilter }))] }));
+    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: onCloseDropdown }, { children: _jsxs(Box, Object.assign({ component: "section", "data-testid": "ColumnFilter", sx: { position: 'relative', display: 'flex', alignItems: 'center' } }, { children: [showClearIcon ? (_jsxs(FilterWrapper, { children: [_jsx(Box, { component: "img", "data-testid": "ColumnFilter_whiteFilterIcon", src: whiteFilterIcon, alt: "filter-icon", sx: { marginInlineEnd: '2px', height: 6 }, onClick: openDropdown, ref: ref }), _jsx(Box, { component: "img", "data-testid": "ColumnFilter_closeIcon", src: closeIcon, alt: "close-icon", onClick: () => {
+                                filter.onClear(filterApiKeys);
+                            } })] })) : (_jsx(Box, { component: "img", "data-testid": "ColumnFilter_columnIcon", src: columnIcon, alt: "column-icon", sx: { cursor: 'pointer', marginTop: '2px' }, onClick: openDropdown, ref: ref })), open && _jsx(CustomBackdrop, { onClick: onCloseDropdown, sx: { zIndex: 12 } }), _jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: "bottom-start", sx: {
+                        zIndex: 9999,
+                    } }, { children: renderFilter }))] })) })));
 }
-export default forwardRef(ColumnFilter);
+export default memo(forwardRef(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.0.268-test.1",
-  "testVersion": 1,
+  "version": "0.0.268-test.3",
+  "testVersion": 3,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",
@@ -131,4 +131,4 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   }
-}
+}