@tap-payments/os-micro-frontend-shared 0.1.202 → 0.1.203

package/build/components/MultiSelectDropdownButton/MultiSelectDropdownButton.js

@@ -3,7 +3,7 @@ import { memo, useState } from 'react';
 import { Popper } from '@mui/material';
 import { ButtonLabel } from './style';
 import CustomBackdrop from '../CustomBackdrop';
-import StatusButton from '../StatusButton';
+import StatusButton from './components/StatusButton';
 import ListColumnFilter from '../VirtualTables/components/ColumnFilter/List';
 import { downArrowIcon } from '../../constants/index.js';
 function MultiSelectDropdownButton({ buttonLabel, onClear, onConfirm, dropdownItems, apiKey, data, styles, buttonDisabled, }) {

package/build/components/MultiSelectDropdownButton/components/StatusButton.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { ButtonProps } from '@mui/material';
+import { StatusButtonVariant } from '../../StatusButton/style';
+interface StatusButtonProps extends Omit<ButtonProps, 'variant' | 'children'> {
+    variant?: StatusButtonVariant;
+    badgeCount: number;
+    label: ReactNode;
+}
+declare const StatusButton: import("react").MemoExoticComponent<(props: StatusButtonProps) => import("react/jsx-runtime").JSX.Element>;
+export default StatusButton;

package/build/components/MultiSelectDropdownButton/components/StatusButton.js

@@ -0,0 +1,34 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useMemo, useRef } from 'react';
+import StyledBadge, { BadgeVariants } from '../../CountBadge';
+import { convertToNumber, formatNumber } from '../../../utils/index.js';
+import { Label, LabelWrapper, statusButtonVariants } from '../../StatusButton/style';
+const StatusButton = memo((props) => {
+    const { variant = 'inActive', badgeCount, label } = props, restProps = __rest(props, ["variant", "badgeCount", "label"]);
+    const buttonRef = useRef(null);
+    // Memoized computed values
+    const statusBadge = useMemo(() => {
+        if (!badgeCount || Number.isNaN(convertToNumber(badgeCount)))
+            return null;
+        return _jsx(StyledBadge, Object.assign({ variant: BadgeVariants.INACTIVE }, { children: formatNumber(Number(badgeCount)) }));
+    }, [badgeCount]);
+    const handleButtonClick = useCallback((e) => {
+        var _a;
+        e.stopPropagation();
+        (_a = props === null || props === void 0 ? void 0 : props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    }, [props]);
+    const ButtonComponent = statusButtonVariants[variant];
+    return (_jsx(ButtonComponent, Object.assign({ "data-testid": "MultiSelectStatusButton" }, restProps, { ref: buttonRef, onClick: handleButtonClick }, { children: _jsx(LabelWrapper, { children: _jsxs(Label, Object.assign({ variant: variant }, { children: [label, statusBadge] })) }) })));
+});
+export default StatusButton;

package/build/components/StatusBar/StatusBar.d.ts

@@ -6,6 +6,6 @@ interface StatusBarProps<IStatus extends TableHeaderStatus | TableHeaderStatus[]
     isFilteredIdsShown?: boolean;
     onStatusChange?: (status?: IStatus) => void;
 }
-declare function StatusBar<IStatus extends TableHeaderStatus | TableHeaderStatus[] = undefined>({ isFilteredIdsShown, onStatusChange, availableStatuses, status, }: StatusBarProps<IStatus>): import("react/jsx-runtime").JSX.Element;
+declare function StatusBar<IStatus extends TableHeaderStatus | TableHeaderStatus[] = undefined>({ isFilteredIdsShown, availableStatuses, status, onStatusChange, }: Readonly<StatusBarProps<IStatus>>): import("react/jsx-runtime").JSX.Element;
 declare const _default: typeof StatusBar;
 export default _default;

package/build/components/StatusBar/StatusBar.js

@@ -11,12 +11,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { Fragment, memo, useCallback, useMemo } from 'react';
+import { Fragment, memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import StatusButton from '../StatusButton';
-function StatusBar({ isFilteredIdsShown, onStatusChange, availableStatuses, status, }) {
+function StatusBar({ isFilteredIdsShown, availableStatuses, status, onStatusChange, }) {
     const { t } = useTranslation();
-    const isMultiSelection = useMemo(() => Array.isArray(status), [status]);
     const getButtonStatus = useCallback((buttonStatus) => {
         return buttonStatus === status && !isFilteredIdsShown ? 'active' : 'inActive';
     }, [status, isFilteredIdsShown]);
@@ -39,20 +38,15 @@ function StatusBar({ isFilteredIdsShown, onStatusChange, availableStatuses, stat
             const statusItems = s.status;
             if (!statusItems)
                 return null;
-            const formattedStatuses = (statusItems.filter(Boolean).map((item) => (typeof item === 'string' ? { value: item } : item)) ||
-                []);
-            const isCurrentStatusDropdown = !isMultiSelection && !!status && formattedStatuses.some((item) => (item === null || item === void 0 ? void 0 : item.value) === status);
-            const variant = isCurrentStatusDropdown ? 'active' : 'inActive';
-            const statusLabel = isCurrentStatusDropdown && !isMultiSelection ? status : (_b = formattedStatuses[0]) === null || _b === void 0 ? void 0 : _b.value;
-            return (_jsx("div", { children: _jsx(StatusButton, Object.assign({}, s, { label: t(statusLabel || ''), variant: variant, onButtonBodyClick: (buttonStatus) => {
-                        handleStatusChange(buttonStatus);
-                    }, dropdownOptions: formattedStatuses.map((stat) => ({
+            const formattedStatuses = statusItems.filter(Boolean).map((item) => (typeof item === 'string' ? { value: item } : item)) || [];
+            const hasMatchingDropdownStatus = !!status && formattedStatuses.some((item) => (item === null || item === void 0 ? void 0 : item.value) === status);
+            const variant = hasMatchingDropdownStatus ? 'active' : 'inActive';
+            const selectedStatus = hasMatchingDropdownStatus ? status : (_b = formattedStatuses[0]) === null || _b === void 0 ? void 0 : _b.value;
+            return (_jsx("div", { children: _jsx(StatusButton, Object.assign({}, s, { selectedStatus: selectedStatus, variant: variant, onButtonBodyClick: (buttonStatus) => handleStatusChange(buttonStatus), dropdownOptions: formattedStatuses.map((stat) => ({
                         label: t((stat === null || stat === void 0 ? void 0 : stat.value) || ''),
-                        onClick: () => {
-                            handleStatusChange(stat.value);
-                        },
                         status: stat === null || stat === void 0 ? void 0 : stat.value,
                         icon: stat.icon,
+                        onClick: () => handleStatusChange(stat.value),
                     })) })) }, (_c = formattedStatuses[0]) === null || _c === void 0 ? void 0 : _c.value));
         }) }));
 }

package/build/components/StatusBar/type.js

@@ -1,7 +1 @@
-const test = [
-    {
-        status: [{ value: 'ACTIVE' }, { value: 'ACTIVE', icon: '' }],
-    },
-];
-console.log(test);
 export {};

package/build/components/StatusButton/StatusButton.js

@@ -19,12 +19,12 @@ import { ChevronContainer, Label, LabelWrapper, StyledStatusIcon, StyledDropdown
 import { statusButtonIcons } from './constant';
 const StatusButton = memo((props) => {
     var _a;
-    const { variant = 'inActive', badgeCount, icon, label, dropdownOptions, onButtonBodyClick, iconMapper = statusButtonIcons } = props, restProps = __rest(props, ["variant", "badgeCount", "icon", "label", "dropdownOptions", "onButtonBodyClick", "iconMapper"]);
+    const { variant = 'inActive', badgeCount, icon, label, dropdownOptions, selectedStatus: initialStatus, onButtonBodyClick, iconMapper = statusButtonIcons } = props, restProps = __rest(props, ["variant", "badgeCount", "icon", "label", "dropdownOptions", "selectedStatus", "onButtonBodyClick", "iconMapper"]);
     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 [selectedStatus, setSelectedStatus] = useState(initialStatus !== null && initialStatus !== void 0 ? initialStatus : (_a = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions[0]) === null || _a === void 0 ? void 0 : _a.status);
     // Memoized computed values
     const hasDropdown = useMemo(() => Boolean(dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.length), [dropdownOptions]);
     // only open if button is clicked more than once
@@ -75,8 +75,6 @@ const StatusButton = memo((props) => {
     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, { 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 }))] }));
+    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, { 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 }))] }));
 });
 export default StatusButton;

package/build/components/StatusButton/type.d.ts

@@ -12,6 +12,7 @@ export interface StatusButtonProps extends Omit<ButtonProps, 'variant' | 'childr
     label?: ReactNode | null;
     showDropdownIcon?: boolean;
     totalCount?: number;
+    selectedStatus?: TableHeaderStatus;
     onButtonBodyClick?: (status: TableHeaderStatus) => void;
     /**
      * @description

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.1.202",
+  "version": "0.1.203",
   "testVersion": 8,
   "type": "module",
   "main": "build/index.js",