@tap-payments/os-micro-frontend-shared 0.0.157-alpha.10 → 0.0.157-alpha.11

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, useCallback, useMemo, 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';
@@ -20,12 +20,13 @@ import { statusButtonIcons } from './constant';
 export const StatusButton = memo((props) => {
     var _a;
     const { variant = 'inActive', badgeCount, icon, label, dropdownOptions, onButtonBodyClick } = props, restProps = __rest(props, ["variant", "badgeCount", "icon", "label", "dropdownOptions", "onButtonBodyClick"]);
+    const [buttonClicks, setButtonClicks] = useState(0);
     const { t } = useTranslation();
     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);
+    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]);
@@ -35,6 +36,12 @@ export const StatusButton = memo((props) => {
         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);
     }, []);
@@ -49,6 +56,7 @@ export const StatusButton = memo((props) => {
         (_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;

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.157-alpha.10",
+  "version": "0.0.157-alpha.11",
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",