@tap-payments/os-micro-frontend-shared 0.1.206 → 0.1.208-test.12

package/build/components/Menu/Menu.d.ts

@@ -1,10 +1,10 @@
 import { ReactNode } from 'react';
 import { PopperProps } from '@mui/material/Popper';
-import { SxProps, Theme } from '@mui/material';
+import { BoxProps, SxProps, Theme } from '@mui/material';
 interface MenuProps extends PopperProps {
     children: ReactNode;
     popperSx?: SxProps<Theme>;
+    dropdownProps?: BoxProps;
 }
-declare function Menu({ open, anchorEl, children, sx, placement, popperSx, ...props }: MenuProps): import("react/jsx-runtime").JSX.Element;
-declare const _default: import("react").MemoExoticComponent<typeof Menu>;
+declare const _default: import("react").ForwardRefExoticComponent<Omit<MenuProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export default _default;

package/build/components/Menu/Menu.js

@@ -9,17 +9,21 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo, Children, useMemo } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo, Children, useMemo, forwardRef, useCallback } from 'react';
 import Popper from '@mui/material/Popper';
 import { useScrollWithShadow } from '../Widget/useScrollWithShadow';
-import { listShadowBg } from '../../constants/index.js';
-import { StyledDropdown, ShadowBackground } from './style';
-function Menu(_a) {
-    var { open, anchorEl, children, sx, placement, popperSx } = _a, props = __rest(_a, ["open", "anchorEl", "children", "sx", "placement", "popperSx"]);
+import { StyledDropdown } from './style';
+const Menu = forwardRef((_a, ref) => {
+    var { open, anchorEl, children, sx, placement, popperSx, dropdownProps } = _a, props = __rest(_a, ["open", "anchorEl", "children", "sx", "placement", "popperSx", "dropdownProps"]);
     const { onScrollHandler, showShadow } = useScrollWithShadow();
+    const _b = dropdownProps || {}, { onScroll } = _b, restDropdownProps = __rest(_b, ["onScroll"]);
     const childrenCount = useMemo(() => Children.count(children), [children]);
     const shouldShowShadow = childrenCount > 12 && showShadow;
-    return (_jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: placement || 'bottom-start', sx: popperSx }, props, { children: _jsxs(StyledDropdown, Object.assign({ onScroll: onScrollHandler, className: "MuiPopper-dropdown", sx: sx }, { children: [children, shouldShowShadow && _jsx(ShadowBackground, { component: "img", src: listShadowBg })] })) }), "menu"));
-}
+    const handleScroll = useCallback((e) => {
+        onScrollHandler(e);
+        onScroll === null || onScroll === void 0 ? void 0 : onScroll(e);
+    }, [onScrollHandler, onScroll]);
+    return (_jsx(Popper, Object.assign({ ref: ref, open: open, anchorEl: anchorEl, placement: placement || 'bottom-start', sx: popperSx }, props, { children: _jsx(StyledDropdown, Object.assign({ showShadow: shouldShowShadow, onScroll: handleScroll, className: "MuiPopper-dropdown", sx: sx }, restDropdownProps, { children: children })) }), "menu"));
+});
 export default memo(Menu);

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

@@ -1,9 +1,6 @@
 /// <reference types="react" />
 export declare const StyledDropdown: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").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/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
-export declare const ShadowBackground: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").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/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
-    src: string;
+    showShadow?: boolean | undefined;
 }, {}, {}>;

package/build/components/Menu/style.js

@@ -1,6 +1,6 @@
 import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
-export const StyledDropdown = styled(Box)(({ theme }) => ({
+export const StyledDropdown = styled(Box, { shouldForwardProp: (prop) => prop !== 'showShadow' })(({ theme, showShadow }) => ({
     borderRadius: theme.spacing(0.5),
     background: theme.palette.background.default,
     width: 'max-content',
@@ -13,13 +13,11 @@ export const StyledDropdown = styled(Box)(({ theme }) => ({
     '.menu-item + .menu-item': {
         borderTop: `1px solid ${theme.palette.divider}`,
     },
-}));
-export const ShadowBackground = styled(Box)(() => ({
-    width: '100%',
-    height: '34px',
-    objectFit: 'cover',
-    position: 'fixed',
-    bottom: 0,
-    pointerEvents: 'none',
-    zIndex: 999999,
+    '&::after': Object.assign({ content: '""', width: '100%', height: '34px', position: 'fixed', bottom: 0, pointerEvents: 'none', zIndex: 999999, background: 'linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%)', transition: theme.transitions.create('opacity', { duration: 250 }) }, (showShadow
+        ? {
+            opacity: 1,
+        }
+        : {
+            opacity: 0,
+        })),
 }));

package/build/components/TableCells/CustomCells/SalesChannelCell/SalesChannelCellSheet.js

@@ -1,7 +1,7 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { StatusChipWithCopy } from '../../../index.js';
+import { StatusChip, StatusChipWithCopy } from '../../../index.js';
 import { Box, Popover } from '@mui/material';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { StyledSheetContainer } from './style';
 function SalesChannelCellSheet({ channels, selectionProps = {} }) {
     const channelWrapperRef = useRef(null);
@@ -13,12 +13,24 @@ function SalesChannelCellSheet({ channels, selectionProps = {} }) {
             setHasOverflow(channelWrapperRef.current.scrollHeight > 20);
         }
     }, [channels]);
-    return (_jsxs(StyledSheetContainer, { children: [_jsx(Box, Object.assign({ sx: { display: 'flex', flexWrap: 'wrap', gap: hasOverflow ? '8px' : '4px', maxWidth: '367px' }, ref: channelWrapperRef }, { children: channels === null || channels === void 0 ? void 0 : channels.filter((s) => !!s.address).map((channel, index) => {
+    const filteredChannels = useMemo(() => (channels || []).filter((s) => !!s.address), [channels]);
+    return (_jsxs(StyledSheetContainer, { children: [_jsx(Box, Object.assign({ sx: { display: 'flex', flexWrap: 'wrap', gap: hasOverflow ? '8px' : '4px' }, ref: channelWrapperRef }, { children: filteredChannels.map((channel, index) => {
                     var _a, _b;
-                    return (_jsxs(StatusChipWithCopy, Object.assign({ copyText: `${(_a = channel.name) === null || _a === void 0 ? void 0 : _a.en}: ${channel.address}`, chipIndex: index + 1, selectionProps: selectionProps }, { children: [(_b = channel.name) === null || _b === void 0 ? void 0 : _b.en, ": ", channel.address] }), channel.id));
+                    return (_jsxs(StatusChipWithCopy, Object.assign({ copyText: `${(_a = channel.name) === null || _a === void 0 ? void 0 : _a.en}: ${channel.address}`, chipIndex: index + 1, selectionProps: selectionProps, maxWidth: "367px", sx: {
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                            maxWidth: '367px',
+                            '& div': {
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
+                                whiteSpace: 'nowrap',
+                                maxWidth: '367px',
+                            },
+                        } }, { children: [(_b = channel.name) === null || _b === void 0 ? void 0 : _b.en, ": ", channel.address] }), channel.id));
                 }) })), hasOverflow && (_jsx(Box, Object.assign({ onClick: (e) => {
                     setAnchorEl(e.currentTarget.parentElement);
-                }, sx: { height: '18px' } }, { children: _jsx(StatusChipWithCopy, Object.assign({ minWidth: "25", sx: { borderRadius: '24px', overflow: 'hidden' }, copyText: "...", chipIndex: (channels === null || channels === void 0 ? void 0 : channels.length) + 1, selectionProps: selectionProps }, { children: "..." })) }))), _jsx(Popover, Object.assign({ open: open, anchorEl: anchorEl, sx: { minWidth: anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.clientWidth }, onClose: () => {
+                }, sx: { height: '18px' } }, { children: _jsx(StatusChip, Object.assign({ minWidth: "25", sx: { borderRadius: '24px', overflow: 'hidden' }, copyText: "..." }, { children: "..." })) }))), _jsx(Popover, Object.assign({ open: open, anchorEl: anchorEl, sx: { minWidth: anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.clientWidth }, onClose: () => {
                     setAnchorEl(null);
                 }, anchorOrigin: {
                     vertical: 'top',
@@ -34,7 +46,7 @@ function SalesChannelCellSheet({ channels, selectionProps = {} }) {
                             marginTop: '22px',
                         },
                     },
-                } }, { children: _jsx(Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', gap: '4px', padding: '4px' } }, { children: channels === null || channels === void 0 ? void 0 : channels.filter((s) => !!s.address).map((channel, index) => {
+                } }, { children: _jsx(Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', gap: '4px', padding: '4px' } }, { children: filteredChannels.map((channel, index) => {
                         var _a, _b;
                         return (_jsxs(StatusChipWithCopy, Object.assign({ copyText: `${(_a = channel.name) === null || _a === void 0 ? void 0 : _a.en}: ${channel.address}`, chipIndex: index + 1, selectionProps: selectionProps }, { children: [(_b = channel.name) === null || _b === void 0 ? void 0 : _b.en, ": ", channel.address] }), channel.id));
                     }) })) }))] }));

package/build/components/TableCells/CustomCells/SalesChannelCell/style.js

@@ -54,7 +54,7 @@ export const salesChannelAnimation = (index, xDelta, isLastChannel) => ({
 export const StyledSheetContainer = styled(Box)(() => ({
     display: 'flex',
     gap: '4px',
-    maxWidth: '424px',
+    maxWidth: '440px',
     justifyContent: 'space-between',
     height: '18px',
 }));

package/build/components/Widget/useScrollWithShadow.js

@@ -1,14 +1,14 @@
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 export function useScrollWithShadow() {
     const [scrollTop, setScrollTop] = useState(0);
     const [scrollHeight, setScrollHeight] = useState(0);
     const [clientHeight, setClientHeight] = useState(0);
-    const onScrollHandler = (event) => {
+    const onScrollHandler = useCallback((event) => {
         const target = event.target;
         setScrollTop(target.scrollTop);
         setScrollHeight(target.scrollHeight);
         setClientHeight(target.clientHeight);
-    };
+    }, []);
     const showShadow = scrollTop === 0 || clientHeight < scrollHeight - scrollTop - 1;
     return { onScrollHandler, showShadow };
 }

package/build/constants/table/cell/merchantsTableCellWidth.d.ts

@@ -67,7 +67,7 @@ export declare const merchantsTableCellWidth: {
     readonly individual_phone_number: {
         readonly default: "180px";
         readonly text: "180px";
-        readonly sheet: "180px";
+        readonly sheet: "190px";
     };
     readonly entity_legal_name: {
         readonly default: "180px";

package/build/constants/table/cell/merchantsTableCellWidth.js

@@ -67,7 +67,7 @@ export const merchantsTableCellWidth = {
     individual_phone_number: {
         default: '180px',
         text: '180px',
-        sheet: '180px',
+        sheet: '190px',
     },
     entity_legal_name: {
         default: '180px',

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.206",
-  "testVersion": 8,
+  "version": "0.1.208-test.12",
+  "testVersion": 12,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",
@@ -163,4 +163,4 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   }
-}
+}