@tap-payments/os-micro-frontend-shared 0.0.171 → 0.0.173

package/build/components/Button/StyledButton/StyledButton.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BoxProps } from '@mui/material';
+import { BoxProps } from '@mui/material/Box';
 export interface StyledButtonProps extends BoxProps {
     title?: string;
     isActive?: boolean;

package/build/components/Button/StyledButton/StyledButton.js

@@ -11,8 +11,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo } from 'react';
-import { Button } from './style';
 import Tooltip from '../../Tooltip';
+import { Button } from './style';
 function StyledButton(_a) {
     var { children, title } = _a, props = __rest(_a, ["children", "title"]);
     return (_jsx(Tooltip, Object.assign({ title: title }, { children: _jsx(Button, Object.assign({}, props, { children: children })) })));

package/build/components/FileUpload/FileUpload.js

@@ -3,12 +3,12 @@ import { memo, useEffect, useMemo, useState } from 'react';
 import Box from '@mui/material/Box';
 import { useDropzone } from 'react-dropzone';
 import { useTranslation } from 'react-i18next';
+import Icon from '../Icon';
 import { blueCircleCheckIcon, redVerifyIcon, trashBinIcon, uploadBlueIcon } from '../../constants/index.js';
 import { readableFileSize } from '../../utils/index.js';
 import { Wrapper, Title, Format, FileUploader, Content, Upload, TextWrapper, Maximum, UploadAgain, StyledButton, SendBulkContainer } from './style';
 import CircularProgressWithLabel from '../CircularProgressWithLabel';
 import Button from '../Button/StyledButton';
-import Icon from '../Icon';
 function FileUpload({ accept, footer, options, isCreateLoading, progress, error, subtitleComponent, isSuccess: isUploadSuccess, onConfirm, isSendDisabled, }) {
     const { t } = useTranslation();
     const [selectedFiles, setSelectedFiles] = useState([]);

package/build/components/TableHeader_V2/components/StatusButtons/StatusButton.js

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { memo, useRef, useState } from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import StyledBadge, { BadgeVariants } from '../../../CountBadge';
 import { convertToNumber, formatNumber } from '../../../../utils/index.js';
@@ -18,37 +18,56 @@ import { ChevronIcon } from './ChevronIcon';
 import { ChevronContainer, Label, LabelWrapper, StyledStatusIcon, StyledDropdown, statusButtonVariants } from './style';
 import { statusButtonIcons } from './constant';
 export const StatusButton = memo((props) => {
-    var _a, _b;
+    var _a;
     const { variant = 'inActive', badgeCount, icon, label, dropdownOptions, onButtonBodyClick } = props, restProps = __rest(props, ["variant", "badgeCount", "icon", "label", "dropdownOptions", "onButtonBodyClick"]);
-    const [anchorEl, setAnchorEl] = useState(null);
-    const buttonRef = useRef(null);
-    const [lastActiveStatus, setLastActiveStatus] = useState((_a = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions[0]) === null || _a === void 0 ? void 0 : _a.status);
+    const [buttonClicks, setButtonClicks] = useState(0);
     const { t } = useTranslation();
-    const open = Boolean(anchorEl);
-    const handleClose = () => {
+    const buttonRef = useRef(null);
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [selectedStatus, setSelectedStatus] = useState((_a = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions[0]) === null || _a === void 0 ? void 0 : _a.status);
+    const hasDropdown = useMemo(() => Boolean(dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.length), [dropdownOptions]);
+    const isDropdownOpen = Boolean(anchorEl) && buttonClicks > 1;
+    const isActiveVariant = variant === 'active';
+    const badgeVariant = useMemo(() => (isActiveVariant ? BadgeVariants.ACTIVE : BadgeVariants.INACTIVE), [isActiveVariant]);
+    const statusIcon = useMemo(() => (icon ? _jsx(StyledStatusIcon, { icon: icon, variant: variant, src: statusButtonIcons[icon], alt: `${icon}-icon` }) : null), [icon, variant]);
+    const statusBadge = useMemo(() => {
+        if (!badgeCount || Number.isNaN(convertToNumber(badgeCount)))
+            return null;
+        return _jsx(StyledBadge, Object.assign({ variant: badgeVariant }, { children: formatNumber(Number(badgeCount)) }));
+    }, [badgeCount, badgeVariant]);
+    const dropdownIcon = useMemo(() => (hasDropdown ? _jsx(ChevronIcon, { isActive: isActiveVariant }) : null), [hasDropdown, isActiveVariant]);
+    useEffect(() => {
+        if (!isActiveVariant) {
+            setButtonClicks(0);
+            setAnchorEl(null);
+        }
+    }, [isActiveVariant]);
+    const handleDropdownClose = useCallback(() => {
         setAnchorEl(null);
-    };
-    const Button = statusButtonVariants[variant];
-    const hasDropdown = dropdownOptions && dropdownOptions.length > 0;
-    const statusIcon = icon ? _jsx(StyledStatusIcon, { icon: icon, variant: variant, src: statusButtonIcons[icon], alt: `${icon}-icon` }) : null;
-    const statusBadge = badgeCount && !Number.isNaN(convertToNumber(badgeCount)) ? (_jsx(StyledBadge, Object.assign({ variant: variant === 'active' ? BadgeVariants.ACTIVE : BadgeVariants.INACTIVE }, { children: formatNumber(Number(badgeCount)) }))) : null;
-    const dropdownIcon = hasDropdown ? _jsx(ChevronIcon, { isActive: variant === 'active' }) : null;
-    return (_jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ "data-testid": "StatusButton" }, restProps, { ref: buttonRef, onClick: (e) => {
-                    var _a, _b;
-                    (_a = props === null || props === void 0 ? void 0 : props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
-                    onButtonBodyClick === null || onButtonBodyClick === void 0 ? void 0 : onButtonBodyClick(lastActiveStatus || ((_b = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions[0]) === null || _b === void 0 ? void 0 : _b.status) || 'all');
-                }, sx: Object.assign({}, (hasDropdown && {
+    }, []);
+    const handleDropdownToggle = useCallback(() => {
+        if (!hasDropdown)
+            return;
+        setAnchorEl(isDropdownOpen ? null : buttonRef.current);
+    }, [hasDropdown, isDropdownOpen]);
+    const handleButtonClick = useCallback((e) => {
+        var _a, _b;
+        e.stopPropagation();
+        (_a = props === null || props === void 0 ? void 0 : props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+        onButtonBodyClick === null || onButtonBodyClick === void 0 ? void 0 : onButtonBodyClick(selectedStatus || ((_b = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions[0]) === null || _b === void 0 ? void 0 : _b.status) || 'all');
+        handleDropdownToggle();
+        setButtonClicks((prev) => prev + 1);
+    }, [props, onButtonBodyClick, selectedStatus, dropdownOptions, handleDropdownToggle]);
+    const handleMenuItemClick = useCallback((item) => (e) => {
+        var _a;
+        (_a = item === null || item === void 0 ? void 0 : item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, e);
+        setSelectedStatus(item.status);
+        handleDropdownClose();
+    }, [handleDropdownClose]);
+    const menuItems = useMemo(() => (dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((item) => (Object.assign(Object.assign({}, item), { onClick: handleMenuItemClick(item) })))) || [], [dropdownOptions, handleMenuItemClick]);
+    const ButtonComponent = statusButtonVariants[variant];
+    const displayLabel = selectedStatus ? t(selectedStatus) : label;
+    return (_jsxs(_Fragment, { children: [_jsx(ButtonComponent, Object.assign({ "data-testid": "StatusButton" }, restProps, { ref: buttonRef, onClick: handleButtonClick, sx: Object.assign({}, (hasDropdown && {
                     paddingInlineEnd: '27px',
-                })) }, { children: _jsxs(LabelWrapper, Object.assign({ onClick: (e) => {
-                        e.stopPropagation();
-                        e.preventDefault();
-                        if (hasDropdown) {
-                            setAnchorEl(buttonRef.current);
-                        }
-                    } }, { children: [_jsxs(Label, Object.assign({ variant: variant }, { children: [statusIcon, lastActiveStatus ? t(lastActiveStatus) : label, statusBadge] })), dropdownIcon && _jsx(ChevronContainer, { children: dropdownIcon })] })) })), open && (_jsx(StyledDropdown, { open: open, onClose: handleClose, anchorEl: anchorEl, menuItems: (_b = (dropdownOptions || [])) === null || _b === void 0 ? void 0 : _b.map((item) => (Object.assign(Object.assign({}, item), { onClick: (e) => {
-                        var _a;
-                        (_a = item === null || item === void 0 ? void 0 : item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, e);
-                        setLastActiveStatus(item.status);
-                        handleClose();
-                    } }))) }))] }));
+                })) }, { children: _jsxs(LabelWrapper, { children: [_jsxs(Label, Object.assign({ variant: variant }, { children: [statusIcon, displayLabel, statusBadge] })), dropdownIcon && _jsx(ChevronContainer, { children: dropdownIcon })] }) })), isDropdownOpen && hasDropdown && (_jsx(StyledDropdown, { open: isDropdownOpen, onClose: handleDropdownClose, anchorEl: anchorEl, menuItems: menuItems }))] }));
 });

package/build/components/TableHeader_V2/components/TableView/TableView.js

@@ -1,14 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo, useState } from 'react';
-import { Box, ClickAwayListener } from '@mui/material';
+import { ClickAwayListener } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import Tooltip from '../../../Tooltip';
 import { closeXIcon, viewIcon } from '../../../../constants/index.js';
+import { StyledButton } from '../../../Button';
+import Icon from '../../../Icon';
 import CustomViews from './CustomViews';
 import DefaultViews from './DefaultViews';
 import { ButtonStyled, ViewWrapper } from './style';
-import { StyledButton } from '../../../Button';
-import Icon from '../../../Icon';
 function TableView({ onViewChange, setIsViewVisible, setTableViews, tableViews, resetTableViews }) {
     const [anchorViewEl, setAnchorViewEl] = useState(null);
     const [defaultViewEl, setDefaultViewElement] = useState(null);
@@ -37,7 +36,7 @@ function TableView({ onViewChange, setIsViewVisible, setTableViews, tableViews,
         closeViewDropdown();
     };
     if (!anchorViewEl) {
-        return (_jsx(Tooltip, Object.assign({ title: t('tableView'), "data-testid": "TableView_no_anchorViewEl" }, { children: _jsx(Box, { children: _jsx(StyledButton, Object.assign({ onClick: onViewButtonClick, "data-testid": "TableView_no_anchorViewEl_button" }, { children: _jsx(Icon, { src: viewIcon, alt: "view-icon", sx: { width: 14, height: 14 } }) })) }) })));
+        return (_jsx(StyledButton, Object.assign({ title: t('tableView'), onClick: onViewButtonClick, "data-testid": "TableView_no_anchorViewEl_button" }, { children: _jsx(Icon, { src: viewIcon, alt: "view-icon", sx: { width: 14, height: 14 } }) })));
     }
     return (_jsx(ClickAwayListener, Object.assign({ onClickAway: closeViewDropdown }, { children: _jsxs(ViewWrapper, Object.assign({ "data-testid": "TableView" }, { children: [selectedViewInfo.id === 'custom' && (_jsx(CustomViews, { tableViews: tableViews, setTableViews: setTableViews, anchorEl: customViewEl, open: Boolean(customViewEl), onSelect: (e) => {
                         setCustomViewElement(customViewEl ? null : e.currentTarget);

package/build/components/index.d.ts

@@ -21,7 +21,6 @@ export { default as StatusChip } from './StatusChip';
 export { default as SimpleDialog, type SimpleDialogProps } from './SimpleDialog';
 export { default as SearchButton } from './SearchButton';
 export { default as Loaders } from './Loaders';
-export { default as ExportButton } from './ExportButton';
 export { default as DropdownMenu, type IProps, type MenuItemI, StyledIconForDropDown, StyledMenuTitle, StyledOption, StyledSelect, StyledSelectComponent, } from './DropdownMenu';
 export { default as DockButton, type DockButtonProps, type DockButtonWrapperProps } from './DockButton';
 export { default as DateButton } from './DateButton';

package/build/components/index.js

@@ -21,7 +21,6 @@ export { default as StatusChip } from './StatusChip';
 export { default as SimpleDialog } from './SimpleDialog';
 export { default as SearchButton } from './SearchButton';
 export { default as Loaders } from './Loaders';
-export { default as ExportButton } from './ExportButton';
 export { default as DropdownMenu, StyledIconForDropDown, StyledMenuTitle, StyledOption, StyledSelect, StyledSelectComponent, } from './DropdownMenu';
 export { default as DockButton } from './DockButton';
 export { default as DateButton } from './DateButton';

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.0.171",
+  "version": "0.0.173",
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",

package/build/components/ExportButton/ExportButton.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-import type { StatusButtonProps } from '../StatusButton/type';
-declare function SearchButton(props: Omit<StatusButtonProps, 'variant'>): import("react/jsx-runtime").JSX.Element;
-declare const _default: import("react").MemoExoticComponent<typeof SearchButton>;
-export default _default;

package/build/components/ExportButton/ExportButton.js

@@ -1,13 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { memo } from 'react';
-import { styled } from '@mui/material';
-import StatusButton from '../StatusButton';
-const StyledExportButton = styled(StatusButton)(() => ({
-    minWidth: 'auto',
-    borderRadius: '4px',
-    paddingInline: '8px',
-}));
-function SearchButton(props) {
-    return _jsx(StyledExportButton, Object.assign({}, props, { type: "button", variant: "inActive" }));
-}
-export default memo(SearchButton);

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

@@ -1,2 +0,0 @@
-import ExportButton from './ExportButton';
-export default ExportButton;

package/build/components/ExportButton/index.js

@@ -1,2 +0,0 @@
-import ExportButton from './ExportButton';
-export default ExportButton;