@tap-payments/os-micro-frontend-shared 0.1.224-test.7 → 0.1.224-test.8

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

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

package/build/components/StatusBar/StatusBar.js

@@ -14,7 +14,7 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { Fragment, memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import StatusButton from '../StatusButton';
-function StatusBar({ isFilteredIdsShown, availableStatuses, status, onStatusChange, }) {
+function StatusBar({ isFilteredIdsShown, availableStatuses, status, onStatusChange, buttonWidth, }) {
     const { t } = useTranslation();
     const getButtonStatus = useCallback((buttonStatus) => {
         return buttonStatus === status && !isFilteredIdsShown ? 'active' : 'inActive';
@@ -33,7 +33,7 @@ function StatusBar({ isFilteredIdsShown, availableStatuses, status, onStatusChan
                         if (!Array.isArray(s.status)) {
                             handleStatusChange(s.status);
                         }
-                    } })));
+                    }, buttonWidth: buttonWidth })));
             }
             const statusItems = s.status;
             if (!statusItems)
@@ -47,7 +47,7 @@ function StatusBar({ isFilteredIdsShown, availableStatuses, status, onStatusChan
                         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));
+                    })), buttonWidth: buttonWidth })) }, (_c = formattedStatuses[0]) === null || _c === void 0 ? void 0 : _c.value));
         }) }));
 }
 export default memo(StatusBar);

package/build/components/StatusButton/StatusButton.js

@@ -19,7 +19,7 @@ import { ChevronContainer, Label, LabelWrapper, StyledStatusIcon, StyledDropdown
 import { statusButtonIcons } from './constant';
 const StatusButton = memo((props) => {
     var _a;
-    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 { variant = 'inActive', badgeCount, icon, label, dropdownOptions, selectedStatus: initialStatus, onButtonBodyClick, iconMapper = statusButtonIcons, buttonWidth } = props, restProps = __rest(props, ["variant", "badgeCount", "icon", "label", "dropdownOptions", "selectedStatus", "onButtonBodyClick", "iconMapper", "buttonWidth"]);
     const [buttonClicks, setButtonClicks] = useState(0);
     const { t } = useTranslation();
     const buttonRef = useRef(null);
@@ -75,6 +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, buttonWidth: buttonWidth, 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/style.d.ts

@@ -6,11 +6,13 @@ export declare const statusButtonVariants: {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
     }, "disabled" | "color" | "style" | "className" | "classes" | "tabIndex" | "children" | "sx" | "variant" | "size" | "fullWidth" | "href" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<Theme> & {
         icon?: string | undefined;
+        buttonWidth?: string | number | undefined;
     }, {}, {}>;
     inActive: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
     }, "disabled" | "color" | "style" | "className" | "classes" | "tabIndex" | "children" | "sx" | "variant" | "size" | "fullWidth" | "href" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<Theme> & {
         icon?: string | undefined;
+        buttonWidth?: string | number | undefined;
     }, {}, {}>;
 };
 export type StatusButtonVariant = keyof typeof statusButtonVariants;

package/build/components/StatusButton/style.js

@@ -1,11 +1,11 @@
 import { styled, Button, Box, alpha } from '@mui/material';
 import Dropdown from '../DropdownMenu';
-const baseButtonStyle = (theme) => (Object.assign(Object.assign({}, theme.typography.subtitle1), { borderRadius: '50px', borderWidth: '1px', borderStyle: 'solid', minWidth: '135.11px', height: '32px', display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '8px', textTransform: 'none', transition: 'none', paddingInline: theme.spacing(2) }));
-const ActiveButton = styled(Button)(({ theme }) => (Object.assign(Object.assign({}, baseButtonStyle(theme)), { background: theme.palette.background.gradient.shadedBlue, color: theme.palette.common.white, '&:hover': {
+const baseButtonStyle = (theme, buttonWidth) => (Object.assign(Object.assign({}, theme.typography.subtitle1), { borderRadius: '50px', borderWidth: '1px', borderStyle: 'solid', minWidth: buttonWidth !== null && buttonWidth !== void 0 ? buttonWidth : '135.11px', height: '32px', display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '8px', textTransform: 'none', transition: 'none', paddingInline: theme.spacing(2) }));
+const ActiveButton = styled(Button)(({ theme, buttonWidth }) => (Object.assign(Object.assign({}, baseButtonStyle(theme, buttonWidth)), { background: theme.palette.background.gradient.shadedBlue, color: theme.palette.common.white, '&:hover': {
         background: theme.palette.background.gradient.shadedBlue,
         opacity: 0.8,
     } })));
-const InActiveButton = styled(Button)(({ theme }) => (Object.assign(Object.assign({}, baseButtonStyle(theme)), { backgroundColor: theme.palette.common.white, borderColor: theme.palette.grey[100], color: theme.palette.text.primary, '&:hover': {
+const InActiveButton = styled(Button)(({ theme, buttonWidth }) => (Object.assign(Object.assign({}, baseButtonStyle(theme, buttonWidth)), { backgroundColor: theme.palette.common.white, borderColor: theme.palette.grey[100], color: theme.palette.text.primary, '&:hover': {
         backgroundColor: theme.palette.common.white,
         opacity: 0.7,
     } })));

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

@@ -29,6 +29,7 @@ export interface StatusButtonProps extends Omit<ButtonProps, 'variant' | 'childr
     dropdownOptions?: Array<MenuItemI & {
         status: TableHeaderStatus;
     }>;
+    buttonWidth?: number | string;
 }
 export interface ChevronIconProps {
     isActive?: boolean;

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