@tap-payments/os-micro-frontend-shared 0.1.33 → 0.1.34

package/build/components/LeftPeekRightExpandingChip/style.js

@@ -0,0 +1,64 @@
+import { styled } from '@mui/material/styles';
+import { motion } from 'framer-motion';
+export const CHIP_GAP = 3;
+export const DEFAULT_CHIP_MIN_WIDTH = 24;
+export const Root = styled('div')(() => ({
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+}));
+export const Container = styled(motion.div)(() => ({
+    position: 'relative',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+}));
+export const PeekStack = styled('div')(() => ({
+    position: 'relative',
+    display: 'inline-block',
+    width: 0,
+    height: 24,
+    pointerEvents: 'none',
+}));
+export const PeekChip = styled(motion.div)(({ theme }) => ({
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: 12,
+    height: 24,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    background: theme.palette.background.paper,
+    fontSize: 12,
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    boxSizing: 'border-box',
+    whiteSpace: 'nowrap',
+    lineHeight: 1,
+    transition: 'width 180ms ease-out, padding 180ms ease-out',
+}));
+export const MainChip = styled(motion.div)(({ theme }) => ({
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: 12,
+    height: 24,
+    minWidth: 24,
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    background: theme.palette.background.paper,
+    overflow: 'hidden',
+    position: 'relative',
+    boxSizing: 'border-box',
+    whiteSpace: 'nowrap',
+    fontSize: 12,
+    lineHeight: 1,
+}));
+export const tableCellSx = {
+    position: 'relative',
+    overflow: 'visible',
+    zIndex: 1,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+};

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

@@ -0,0 +1,7 @@
+import type { SxProps } from '@mui/material';
+import type { ReactNode } from 'react';
+export interface LeftPeekRightExpandingChipProps {
+    icons: ReactNode[];
+    expandedZIndex?: number;
+    sx?: SxProps;
+}

package/build/components/LeftPeekRightExpandingChip/type.js

@@ -0,0 +1 @@
+export {};

package/build/components/LeftPeekRightExpandingChip/useLeftPeekRightExpandingChip.d.ts

@@ -0,0 +1,26 @@
+import { type ReactNode } from 'react';
+export interface UseLeftPeekRightExpandingChipArgs {
+    icons: ReactNode[];
+}
+export interface PeekChipComputedItem {
+    key: string;
+    rIdx: number;
+    origIdx: number;
+    offX: number;
+    hoverX: number;
+    zIndex: number;
+    refCb: (el: HTMLDivElement | null) => void;
+    content: ReactNode;
+}
+export declare function useLeftPeekRightExpandingChip({ icons }: UseLeftPeekRightExpandingChipArgs): {
+    isHovering: boolean;
+    handleMouseEnter: () => void;
+    handleRootMouseLeave: () => void;
+    rootRef: import("react").MutableRefObject<HTMLDivElement | null>;
+    mainChipRef: import("react").MutableRefObject<HTMLDivElement | null>;
+    peekItems: PeekChipComputedItem[];
+    mainShiftX: number;
+    mainIcon: ReactNode;
+    guardLeft: number;
+    guardWidth: number;
+};

package/build/components/LeftPeekRightExpandingChip/useLeftPeekRightExpandingChip.js

@@ -0,0 +1,106 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { CHIP_GAP, DEFAULT_CHIP_MIN_WIDTH } from './style';
+export function useLeftPeekRightExpandingChip({ icons }) {
+    var _a;
+    const [isHovering, setIsHovering] = useState(false);
+    const [rightWidths, setRightWidths] = useState([]);
+    const rootRef = useRef(null);
+    const mainChipRef = useRef(null);
+    const rightChipRefs = useRef([]);
+    const hoverTimeoutRef = useRef(null);
+    const safeIcons = icons !== null && icons !== void 0 ? icons : [];
+    const lastIndex = Math.max(0, ((_a = safeIcons.length) !== null && _a !== void 0 ? _a : 1) - 1);
+    const mainIcon = safeIcons[lastIndex];
+    const peekIcons = safeIcons.slice(0, lastIndex);
+    const { peekItems, mainShiftX, guardLeft, guardWidth } = useMemo(() => {
+        const n = peekIcons.length;
+        const measured = rightWidths.length === n && rightWidths.every((w) => w > 0);
+        const anchorOffXAll = -6 * n;
+        const totalPeekWidth = measured ? rightWidths.reduce((acc, w) => acc + w, 0) : n * DEFAULT_CHIP_MIN_WIDTH;
+        const gapsTotal = Math.max(0, n - 1) * CHIP_GAP;
+        const mainShift = Math.round(isHovering ? anchorOffXAll + totalPeekWidth + CHIP_GAP * n : 0);
+        const anchorRIdx = n - 1;
+        const anchorOffXEach = -6 * (anchorRIdx + 1);
+        const items = [];
+        for (let rIdx = 0; rIdx < n; rIdx++) {
+            const origIdx = n - 1 - rIdx;
+            const offX = -6 * (rIdx + 1);
+            const cumWidthBefore = measured
+                ? rightWidths.slice(0, origIdx).reduce((acc, w) => acc + w, 0) + CHIP_GAP * origIdx
+                : (DEFAULT_CHIP_MIN_WIDTH + CHIP_GAP) * origIdx;
+            const hoverX = Math.round(rIdx === anchorRIdx ? anchorOffXEach : anchorOffXEach + cumWidthBefore);
+            items.push({
+                key: `peek-${rIdx}`,
+                rIdx,
+                origIdx,
+                offX,
+                hoverX,
+                zIndex: n - rIdx,
+                refCb: (el) => {
+                    rightChipRefs.current[origIdx] = el;
+                },
+                content: peekIcons[origIdx],
+            });
+        }
+        const guardLeft = anchorOffXEach;
+        const guardWidth = totalPeekWidth + gapsTotal;
+        return { peekItems: items, mainShiftX: mainShift, guardLeft, guardWidth };
+    }, [peekIcons, rightWidths, isHovering]);
+    const clearHoverTimeout = useCallback(() => {
+        if (hoverTimeoutRef.current) {
+            clearTimeout(hoverTimeoutRef.current);
+            hoverTimeoutRef.current = null;
+        }
+    }, []);
+    const measureRightWidths = useCallback(() => {
+        const TARGET_PADDING_X = 12;
+        const BORDER_X = 2;
+        const next = peekIcons.map((_, origIdx) => {
+            const el = rightChipRefs.current[origIdx];
+            if (!el)
+                return DEFAULT_CHIP_MIN_WIDTH;
+            const contentWidth = el.scrollWidth || DEFAULT_CHIP_MIN_WIDTH;
+            const target = Math.max(DEFAULT_CHIP_MIN_WIDTH, contentWidth + TARGET_PADDING_X + BORDER_X);
+            return Math.ceil(target);
+        });
+        setRightWidths((prev) => {
+            if (prev.length === next.length && prev.every((v, i) => v === next[i]))
+                return prev;
+            return next;
+        });
+    }, [peekIcons.length]);
+    const handleMouseEnter = useCallback(() => {
+        clearHoverTimeout();
+        setIsHovering(true);
+    }, [clearHoverTimeout]);
+    const handleRootMouseLeave = useCallback(() => {
+        clearHoverTimeout();
+        hoverTimeoutRef.current = setTimeout(() => setIsHovering(false), 120);
+    }, [clearHoverTimeout]);
+    useEffect(() => {
+        return () => clearHoverTimeout();
+    }, [clearHoverTimeout]);
+    useEffect(() => {
+        measureRightWidths();
+    }, [peekIcons.length]);
+    useEffect(() => {
+        if (!isHovering)
+            return;
+        const id = window.requestAnimationFrame(() => {
+            measureRightWidths();
+        });
+        return () => window.cancelAnimationFrame(id);
+    }, [isHovering, measureRightWidths]);
+    return {
+        isHovering,
+        handleMouseEnter,
+        handleRootMouseLeave,
+        rootRef,
+        mainChipRef,
+        peekItems,
+        mainShiftX,
+        mainIcon,
+        guardLeft,
+        guardWidth,
+    };
+}

package/build/components/RightLeftExpandingCenterChip/useRightLeftExpandingCenterChip.js

@@ -1,4 +1,4 @@
-import { useRef, useEffect, useState, useMemo, useCallback } from 'react';
+import { useRef, useEffect, useState, useMemo, useCallback, useLayoutEffect } from 'react';
 import { animate, useMotionValue, useTransform } from 'framer-motion';
 import { CHIP_GAP } from './style';
 export const DEFAULT_CHIP_MIN_WIDTH = 24;
@@ -16,6 +16,19 @@ export function useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerI
     const rightChipRefs = useRef([]);
     const expandableInnerRef = useRef(null);
     const resizeRaf = useRef(null);
+    const arraysEqual = useCallback((a, b) => {
+        if (a === b)
+            return true;
+        if (a.length !== b.length)
+            return false;
+        for (let i = 0; i < a.length; i++)
+            if (a[i] !== b[i])
+                return false;
+        return true;
+    }, []);
+    const anchorsEqual = useCallback((a, b) => {
+        return a.left === b.left && a.right === b.right;
+    }, []);
     const expandedMV = useMotionValue(0);
     const shiftX = useTransform(expandedMV, (v) => v / 2);
     const leftOffsets = useMemo(() => {
@@ -54,53 +67,49 @@ export function useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerI
             clearTimeout(hoverTimeoutRef.current);
         hoverTimeoutRef.current = setTimeout(() => setIsHovering(false), 120);
     }, []);
-    const measureAnchors = useCallback(() => {
-        var _a;
+    const measureAll = useCallback(() => {
+        var _a, _b, _c;
         const wrap = centerWrapRef.current;
         const chip = centerChipRef.current;
         const content = centerContentRef.current;
-        if (!wrap)
-            return;
-        const wrapRect = wrap.getBoundingClientRect();
-        const targetRect = (_a = (chip !== null && chip !== void 0 ? chip : content)) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        if (!targetRect)
-            return;
-        const left = targetRect.left - wrapRect.left;
-        const right = targetRect.right - wrapRect.left;
-        setAnchors({ left, right });
-    }, []);
-    const measureStackChipWidths = useCallback(() => {
-        setLeftWidths(leftChipRefs.current.map((el) => (el ? el.offsetWidth : DEFAULT_CHIP_MIN_WIDTH)));
-        setRightWidths(rightChipRefs.current.map((el) => (el ? el.offsetWidth : DEFAULT_CHIP_MIN_WIDTH)));
-    }, []);
-    const measureExpandableWidth = useCallback(() => {
-        var _a, _b;
-        setExpandableWidth((_b = (_a = expandableInnerRef.current) === null || _a === void 0 ? void 0 : _a.scrollWidth) !== null && _b !== void 0 ? _b : 0);
-    }, []);
+        let nextAnchors = anchors;
+        if (wrap) {
+            const wrapRect = wrap.getBoundingClientRect();
+            const targetRect = (_a = (chip !== null && chip !== void 0 ? chip : content)) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            if (targetRect) {
+                const left = Math.round(targetRect.left - wrapRect.left);
+                const right = Math.round(targetRect.right - wrapRect.left);
+                nextAnchors = { left, right };
+            }
+        }
+        const nextLeftWidths = leftChipRefs.current.map((el) => (el ? el.offsetWidth : DEFAULT_CHIP_MIN_WIDTH));
+        const nextRightWidths = rightChipRefs.current.map((el) => (el ? el.offsetWidth : DEFAULT_CHIP_MIN_WIDTH));
+        const nextExpandableWidth = (_c = (_b = expandableInnerRef.current) === null || _b === void 0 ? void 0 : _b.scrollWidth) !== null && _c !== void 0 ? _c : 0;
+        if (!anchorsEqual(anchors, nextAnchors))
+            setAnchors(nextAnchors);
+        if (!arraysEqual(leftWidths, nextLeftWidths))
+            setLeftWidths(nextLeftWidths);
+        if (!arraysEqual(rightWidths, nextRightWidths))
+            setRightWidths(nextRightWidths);
+        if (expandableWidth !== nextExpandableWidth)
+            setExpandableWidth(nextExpandableWidth);
+    }, [anchors, leftWidths, rightWidths, expandableWidth, anchorsEqual, arraysEqual]);
     const onResize = useCallback(() => {
         if (resizeRaf.current)
             cancelAnimationFrame(resizeRaf.current);
         resizeRaf.current = requestAnimationFrame(() => {
-            measureAnchors();
-            measureStackChipWidths();
-            measureExpandableWidth();
+            measureAll();
         });
-    }, [measureAnchors, measureStackChipWidths, measureExpandableWidth]);
+    }, [measureAll]);
     useEffect(() => {
         return () => {
             if (hoverTimeoutRef.current)
                 clearTimeout(hoverTimeoutRef.current);
         };
     }, []);
-    useEffect(() => {
-        measureAnchors();
-    }, [centerIcon, measureAnchors]);
-    useEffect(() => {
-        measureStackChipWidths();
-    }, [leftIcons, rightIcons, measureStackChipWidths]);
-    useEffect(() => {
-        measureExpandableWidth();
-    }, [expandableCenter, measureExpandableWidth]);
+    useLayoutEffect(() => {
+        measureAll();
+    }, [centerIcon, leftIcons, rightIcons, expandableCenter, measureAll]);
     useEffect(() => {
         onResize();
         window.addEventListener('resize', onResize);

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

@@ -18,4 +18,5 @@ export declare const statusButtonIcons: {
     authenticated: string;
     paidOut: string;
     scheduled: string;
+    checked: string;
 };

package/build/components/StatusButton/constant.js

@@ -1,4 +1,4 @@
-import { initiatedIcon, abandonedIcon, cancelledIcon, reportsIcon, searchIcon, chevronDownIcon, unAuthorizedIcon, settlementInitiatedIcon, unCapturedIcon, capturedIcon, authorizedIcon, openFlagIcon, closedFlagIcon, reverseActionIcon, authenticatedIcon, unauthenticatedIcon, paidOutFilterIcon, scheduledFilterIcon, } from '../../constants/index.js';
+import { initiatedIcon, abandonedIcon, cancelledIcon, reportsIcon, searchIcon, chevronDownIcon, unAuthorizedIcon, settlementInitiatedIcon, unCapturedIcon, capturedIcon, authorizedIcon, openFlagIcon, closedFlagIcon, reverseActionIcon, authenticatedIcon, unauthenticatedIcon, paidOutFilterIcon, scheduledFilterIcon, completedBlackIcon, } from '../../constants/index.js';
 export const statusButtonIcons = {
     inProgress: initiatedIcon,
     initiated: initiatedIcon,
@@ -19,4 +19,5 @@ export const statusButtonIcons = {
     authenticated: authenticatedIcon,
     paidOut: paidOutFilterIcon,
     scheduled: scheduledFilterIcon,
+    checked: completedBlackIcon,
 };

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

@@ -20,7 +20,7 @@ export declare const CountBadge: import("@emotion/styled").StyledComponent<impor
 }, {}, {}>;
 export declare const StatusIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme> & {
     variant: StatusButtonVariant;
-    icon?: "search" | "scheduled" | "paidOut" | "reversed" | "initiated" | "captured" | "unCaptured" | "inProgress" | "abandoned" | "cancelled" | "authorized" | "unauthenticated" | "authenticated" | "unSettled" | "reports" | "chevronDown" | "unAuthorized" | "openFlag" | "closedFlag" | undefined;
+    icon?: "search" | "scheduled" | "paidOut" | "reversed" | "checked" | "initiated" | "captured" | "unCaptured" | "inProgress" | "abandoned" | "cancelled" | "authorized" | "unauthenticated" | "authenticated" | "unSettled" | "reports" | "chevronDown" | "unAuthorized" | "openFlag" | "closedFlag" | undefined;
 }, React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const StyledFilterName: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme>, React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
 export declare const StyledDropdown: import("@emotion/styled").StyledComponent<import("../DropdownMenu").IProps & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
@@ -35,5 +35,5 @@ export declare const LabelWrapper: import("@emotion/styled").StyledComponent<imp
 }, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
 export declare const StyledStatusIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme> & {
     variant: StatusButtonVariant;
-    icon?: "search" | "scheduled" | "paidOut" | "reversed" | "initiated" | "captured" | "unCaptured" | "inProgress" | "abandoned" | "cancelled" | "authorized" | "unauthenticated" | "authenticated" | "unSettled" | "reports" | "chevronDown" | "unAuthorized" | "openFlag" | "closedFlag" | undefined;
+    icon?: "search" | "scheduled" | "paidOut" | "reversed" | "checked" | "initiated" | "captured" | "unCaptured" | "inProgress" | "abandoned" | "cancelled" | "authorized" | "unauthenticated" | "authenticated" | "unSettled" | "reports" | "chevronDown" | "unAuthorized" | "openFlag" | "closedFlag" | undefined;
 }, React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;

package/build/components/index.d.ts

@@ -100,3 +100,4 @@ export * from './TooltipChip';
 export * from './RightLeftExpandingCenterChip';
 export * from './RadioButton';
 export * from './RadioGroup';
+export * from './LeftPeekRightExpandingChip';

package/build/components/index.js

@@ -100,3 +100,4 @@ export * from './TooltipChip';
 export * from './RightLeftExpandingCenterChip';
 export * from './RadioButton';
 export * from './RadioGroup';
+export * from './LeftPeekRightExpandingChip';

package/build/constants/assets.d.ts

@@ -309,6 +309,7 @@ export declare const destinationSuccessTableIcon: string;
 export declare const authenticationFailedTableIcon: string;
 export declare const authenticatedIcon: string;
 export declare const scheduledFilterIcon: string;
+export declare const completedBlackIcon: string;
 export declare const paidOutFilterIcon: string;
 export declare const unauthenticatedIcon: string;
 export declare const authenticationAttemptedIcon: string;

package/build/constants/assets.js

@@ -313,6 +313,7 @@ export const destinationSuccessTableIcon = `${appBaseUrl}/destinationSuccess.svg
 export const authenticationFailedTableIcon = `${lightUrl}/status/authenticationFailed.svg`;
 export const authenticatedIcon = `${lightUrl}/status/table/authenticated.svg`;
 export const scheduledFilterIcon = `${lightUrl}/paidOutFilterIcon.svg`;
+export const completedBlackIcon = `${lightUrl}/completedBlackIcon.svg`;
 export const paidOutFilterIcon = `${lightUrl}/scheduledFilterIcon.svg`;
 export const unauthenticatedIcon = `${lightUrl}/status/unauthenticated.svg`;
 export const authenticationAttemptedIcon = `${lightUrl}/status/authenticationAttempted.svg`;

package/build/types/table.d.ts

@@ -19,7 +19,7 @@ export interface TableStatus<T> {
     filterStatus: T;
     totalCount?: number;
 }
-export type TableHeaderStatus = 'all' | 'initiated' | 'captured' | 'unCaptured' | 'inProgress' | 'abandoned' | 'cancelled' | 'reversed' | 'unsettled' | 'unauthorized' | 'completed' | 'authorized' | 'refunded' | 'paidOut' | 'pending' | 'cleared' | 'open' | 'revered' | 'unauthenticated' | 'authenticated' | 'issued' | 'drafted' | 'scheduled' | 'paid' | 'outstanding' | 'draft' | 'expired' | 'transacted' | 'settled' | 'unSettled' | 'summary' | 'chargeSettlements' | 'refundSettlements' | 'destinationSettlements' | 'chargebackSettlements' | 'used' | 'active' | 'expired' | 'consumed' | 'notActive' | 'signedUp' | (string & {}) | undefined;
+export type TableHeaderStatus = 'all' | 'initiated' | 'captured' | 'unCaptured' | 'inProgress' | 'abandoned' | 'cancelled' | 'reversed' | 'unsettled' | 'unauthorized' | 'completed' | 'authorized' | 'refunded' | 'paidOut' | 'pending' | 'cleared' | 'open' | 'revered' | 'unauthenticated' | 'authenticated' | 'issued' | 'drafted' | 'scheduled' | 'paid' | 'outstanding' | 'draft' | 'expired' | 'transacted' | 'settled' | 'unSettled' | 'summary' | 'chargeSettlements' | 'refundSettlements' | 'destinationSettlements' | 'chargebackSettlements' | 'used' | 'active' | 'expired' | 'consumed' | 'notActive' | 'signedUp' | 'checked' | (string & {}) | undefined;
 export interface IColumnProps<R = any> {
     header?: string | (() => React.ReactNode);
     render?: (props: IRenderAttr<R, IColumnProps<R>>) => React.ReactNode;

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.33",
+  "version": "0.1.34",
   "testVersion": 0,
   "type": "module",
   "main": "build/index.js",