@tap-payments/os-micro-frontend-shared 0.1.135 → 0.1.136-test.2

package/build/components/RightLeftExpandingCenterChip/RightLeftExpandingCenterChip.d.ts

@@ -1,3 +1,35 @@
 import { RightLeftExpandingCenterChipProps } from './type';
+/**
+ * Component: RightLeftExpandingCenterChip
+ *
+ * Renders a center chip with optional inline expandable content and animated
+ * stacks of chips that expand to the left and right when hovering the center.
+ *
+ * Behavior
+ * - Hover activation: Only when the pointer enters the CenterChip. Hover persists
+ *   across expanded icons and the gaps between them via transparent HoverBridge overlays.
+ *   Hover ends when the pointer leaves the main wrapper (with a small debounce handled
+ *   inside the useRightLeftExpandingCenterChip hook).
+ * - Anchoring: Left/Right expanded sections are anchored to the start/end of the center
+ *   content using measured anchors from the hook.
+ * - Motion & layout:
+ *   - ExpandableContainer width is driven by a MotionValue (expandedMV) based on measured
+ *     width of the expandable content; AnimatePresence provides smooth mount/unmount.
+ *   - The whole center group shifts by shiftX to visually compensate the inline expansion.
+ *   - Left/Right chips slide out using computed offsets derived from measured chip widths.
+ * - Overlay order: expandedZIndex controls the base z-index for expanded sections; individual
+ *   chips stack above this base so later items appear beneath earlier items.
+ *
+ * Props
+ * @param leftIcons - Icons/chips to show expanding to the left while hovering.
+ * @param rightIcons - Icons/chips to show expanding to the right while hovering.
+ * @param centerIcon - Static content inside the center chip.
+ * @param expandableCenterRight - Optional inline content that expands to the right within the center chip.
+ * @param expandableCenterLeft - Optional inline content that expands to the left within the center chip.
+ * @param expandedZIndex - Base z-index for expanded sections and icons (default 1000).
+ * @param props - Additional Box props forwarded to the root container.
+ *
+ * @returns Root Box containing the motion-driven chip UI.
+ */
 declare function RightLeftExpandingCenterChip({ leftIcons, rightIcons, centerIcon, expandableCenterRight, expandableCenterLeft, expandedZIndex, ...props }: Readonly<RightLeftExpandingCenterChipProps>): import("react/jsx-runtime").JSX.Element;
 export default RightLeftExpandingCenterChip;

package/build/components/RightLeftExpandingCenterChip/RightLeftExpandingCenterChip.js

@@ -14,6 +14,38 @@ import Box from '@mui/material/Box';
 import { AnimatePresence } from 'framer-motion';
 import { CenterIconWrapper, ExpandedSection, PeekContainer, CenterChip, LeftPeekChip, RightPeekChip, LeftExpandIcon, RightExpandIcon, ExpandChip, CenterShiftWrapper, CenterContent, ExpandableContainer, ExpandableInner, tableCellSx, CHIP_GAP, HoverBridge, } from './style';
 import { useRightLeftExpandingCenterChip, DEFAULT_CHIP_MIN_WIDTH } from './useRightLeftExpandingCenterChip';
+/**
+ * Component: RightLeftExpandingCenterChip
+ *
+ * Renders a center chip with optional inline expandable content and animated
+ * stacks of chips that expand to the left and right when hovering the center.
+ *
+ * Behavior
+ * - Hover activation: Only when the pointer enters the CenterChip. Hover persists
+ *   across expanded icons and the gaps between them via transparent HoverBridge overlays.
+ *   Hover ends when the pointer leaves the main wrapper (with a small debounce handled
+ *   inside the useRightLeftExpandingCenterChip hook).
+ * - Anchoring: Left/Right expanded sections are anchored to the start/end of the center
+ *   content using measured anchors from the hook.
+ * - Motion & layout:
+ *   - ExpandableContainer width is driven by a MotionValue (expandedMV) based on measured
+ *     width of the expandable content; AnimatePresence provides smooth mount/unmount.
+ *   - The whole center group shifts by shiftX to visually compensate the inline expansion.
+ *   - Left/Right chips slide out using computed offsets derived from measured chip widths.
+ * - Overlay order: expandedZIndex controls the base z-index for expanded sections; individual
+ *   chips stack above this base so later items appear beneath earlier items.
+ *
+ * Props
+ * @param leftIcons - Icons/chips to show expanding to the left while hovering.
+ * @param rightIcons - Icons/chips to show expanding to the right while hovering.
+ * @param centerIcon - Static content inside the center chip.
+ * @param expandableCenterRight - Optional inline content that expands to the right within the center chip.
+ * @param expandableCenterLeft - Optional inline content that expands to the left within the center chip.
+ * @param expandedZIndex - Base z-index for expanded sections and icons (default 1000).
+ * @param props - Additional Box props forwarded to the root container.
+ *
+ * @returns Root Box containing the motion-driven chip UI.
+ */
 function RightLeftExpandingCenterChip(_a) {
     var { leftIcons = [], rightIcons = [], centerIcon, expandableCenterRight, expandableCenterLeft, expandedZIndex = 1000 } = _a, props = __rest(_a, ["leftIcons", "rightIcons", "centerIcon", "expandableCenterRight", "expandableCenterLeft", "expandedZIndex"]);
     const { isHovering, handleMouseEnter, handleMouseLeave, centerWrapRef, centerContentRef, centerChipRef, anchors, leftChipRefs, rightChipRefs, leftOffsets, rightOffsets, expandableRightInnerRef, expandableLeftInnerRef, expandedRightMV, expandedLeftMV, shiftX, rightShift, leftShift, leftHoverWidth, rightHoverWidth, } = useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerIcon, expandableCenterRight, expandableCenterLeft });
@@ -41,7 +73,7 @@ function RightLeftExpandingCenterChip(_a) {
                                     opacity: isHovering ? 1 : 0,
                                     pointerEvents: isHovering ? 'auto' : 'none',
                                     borderRadius: '12px 0 0 12px',
-                                    borderRight: 'none',
+                                    borderRight: 'none', // Remove right border for seamless connection
                                 }, initial: false, transition: { duration: 0.2, ease: 'easeOut' } }, { children: _jsx(ExpandableInner, Object.assign({ "data-testid": "ExpandableLeftInner", ref: expandableLeftInnerRef }, { children: expandableCenterLeft })) }))), expandableCenterRight && (_jsx(ExpandableContainer, Object.assign({ "data-testid": "ExpandableRightContainer", style: {
                                     width: expandedRightMV,
                                     position: 'absolute',
@@ -52,7 +84,7 @@ function RightLeftExpandingCenterChip(_a) {
                                     opacity: isHovering ? 1 : 0,
                                     pointerEvents: isHovering ? 'auto' : 'none',
                                     borderRadius: '0 12px 12px 0',
-                                    borderLeft: 'none',
+                                    borderLeft: 'none', // Remove left border for seamless connection
                                 }, initial: false, transition: { duration: 0.2, ease: 'easeOut' } }, { children: _jsx(ExpandableInner, Object.assign({ "data-testid": "ExpandableRightInner", ref: expandableRightInnerRef }, { children: expandableCenterRight })) }))), _jsx(AnimatePresence, Object.assign({ initial: false }, { children: rightIcons.length > 0 && (_jsx(RightPeekChip, { "data-testid": "RightPeekChip", initial: { opacity: 0, scale: 0.95, x: 4 }, animate: isHovering ? { opacity: 0, scale: 0.9, x: 6 } : { opacity: 1, scale: 1, x: 5 }, exit: { opacity: 0, scale: 0.95, x: 4 }, transition: { duration: 0.18, ease: 'easeOut' } }, "right-peek")) }))] })), isHovering && leftIcons.length > 0 && (_jsx(HoverBridge, { "data-testid": "LeftHoverBridge", side: "left", style: { width: leftHoverWidth, right: `calc(100% - ${anchors.left}px)`, zIndex: expandedZIndex, pointerEvents: 'auto' } })), isHovering && rightIcons.length > 0 && (_jsx(HoverBridge, { "data-testid": "RightHoverBridge", side: "right", style: { width: rightHoverWidth, left: `${anchors.right}px`, zIndex: expandedZIndex, pointerEvents: 'auto' } })), _jsx(AnimatePresence, Object.assign({ initial: false }, { children: leftIcons.length > 0 && (_jsx(ExpandedSection, Object.assign({ "data-testid": "LeftExpandedSection", side: "left", style: {
                                 right: `calc(100% - ${anchors.left}px)`,
                                 top: '50%',
@@ -62,6 +94,7 @@ function RightLeftExpandingCenterChip(_a) {
                             }, initial: { opacity: 0, x: 0, y: '-50%' }, animate: isHovering ? { opacity: 1, x: 0, y: '-50%' } : { opacity: 0, x: 0, y: '-50%' }, exit: { opacity: 0, x: 0, y: '-50%' }, transition: { duration: 0.25, ease: 'easeOut' } }, { children: leftIcons.map((icon, index) => {
                                 var _a;
                                 const leftOffset = (_a = leftOffsets[index]) !== null && _a !== void 0 ? _a : (DEFAULT_CHIP_MIN_WIDTH + CHIP_GAP) * (index + 1);
+                                // Add shift to avoid overlap with expandable left content (no gap since it's seamless)
                                 const totalOffset = leftOffset + leftShift;
                                 return (_jsx(LeftExpandIcon, Object.assign({ "data-testid": `LeftExpandIcon-${index}`, initial: { opacity: 0, x: 0 }, animate: isHovering ? { opacity: 1, x: -totalOffset } : { opacity: 0, x: 0 }, exit: { opacity: 0, x: 0 }, transition: { duration: 0.25 + index * 0.04, ease: 'easeOut' }, style: { zIndex: expandedZIndex + (leftIcons.length - index) } }, { children: _jsx(ExpandChip, Object.assign({ "data-testid": `LeftExpandChip-${index}`, ref: (el) => (leftChipRefs.current[index] = el) }, { children: icon })) }), `left-${index}`));
                             }) }), "left-expanded")) })), _jsx(AnimatePresence, Object.assign({ initial: false }, { children: rightIcons.length > 0 && (_jsx(ExpandedSection, Object.assign({ "data-testid": "RightExpandedSection", side: "right", style: {
@@ -73,6 +106,7 @@ function RightLeftExpandingCenterChip(_a) {
                             }, initial: { opacity: 0, x: 0, y: '-50%' }, animate: isHovering ? { opacity: 1, x: 0, y: '-50%' } : { opacity: 0, x: 0, y: '-50%' }, exit: { opacity: 0, x: 0, y: '-50%' }, transition: { duration: 0.25, ease: 'easeOut' } }, { children: rightIcons.map((icon, index) => {
                                 var _a;
                                 const base = (_a = rightOffsets[index]) !== null && _a !== void 0 ? _a : (DEFAULT_CHIP_MIN_WIDTH + CHIP_GAP) * (index + 1);
+                                // Shift accounts for seamless right expandable content
                                 const shift = rightShift;
                                 return (_jsx(RightExpandIcon, Object.assign({ "data-testid": `RightExpandIcon-${index}`, initial: { opacity: 0, x: 0 }, animate: isHovering ? { opacity: 1, x: shift + base } : { opacity: 0, x: 0 }, exit: { opacity: 0, x: 0 }, transition: { duration: 0.25 + index * 0.04, ease: 'easeOut' }, style: { zIndex: expandedZIndex + (rightIcons.length - index) } }, { children: _jsx(ExpandChip, Object.assign({ "data-testid": `RightExpandChip-${index}`, ref: (el) => (rightChipRefs.current[index] = el) }, { children: icon })) }), `right-${index}`));
                             }) }), "right-expanded")) }))] })) })) })));

package/build/components/RightLeftExpandingCenterChip/style.js

@@ -1,5 +1,6 @@
 import { styled } from '@mui/material/styles';
 import { motion } from 'framer-motion';
+// Shared spacing between chips
 export const CHIP_GAP = 3;
 export const CenterIconWrapper = styled(motion.div)(({ theme }) => ({
     display: 'flex',
@@ -14,10 +15,12 @@ export const CenterIconWrapper = styled(motion.div)(({ theme }) => ({
     fontSize: '12px',
     color: theme.palette.text.primary,
 }));
+// Wrapper that applies the horizontal shift driven by a motion value
 export const CenterShiftWrapper = styled(motion.div)(() => ({
     display: 'inline-flex',
 }));
 export const LeftExpandIcon = styled(motion.span)(({ theme }) => ({
+    // Make wrapper take no layout width; spacing fully controlled by transform
     position: 'static',
     display: 'inline-flex',
     alignItems: 'center',
@@ -32,6 +35,7 @@ export const LeftExpandIcon = styled(motion.span)(({ theme }) => ({
     userSelect: 'none',
 }));
 export const RightExpandIcon = styled(motion.span)(({ theme }) => ({
+    // Make wrapper take no layout width; spacing fully controlled by transform
     position: 'static',
     display: 'inline-flex',
     alignItems: 'center',
@@ -46,7 +50,13 @@ export const RightExpandIcon = styled(motion.span)(({ theme }) => ({
     userSelect: 'none',
 }));
 export const ExpandedSection = styled(motion.div)(({ side }) => (Object.assign(Object.assign(Object.assign({ position: 'absolute', display: 'flex', alignItems: 'center' }, (side === 'left' ? { right: '100%', flexDirection: 'row-reverse', transformOrigin: 'right center' } : {})), (side === 'right' ? { left: '100%', flexDirection: 'row', transformOrigin: 'left center' } : {})), { top: '50%', transform: 'translateY(-50%)', gap: 0, pointerEvents: 'auto', overflow: 'visible' })));
-export const HoverBridge = styled('div')(({ side }) => (Object.assign(Object.assign({ position: 'absolute', top: 0, bottom: 0 }, (side === 'left' ? { right: '100%' } : { left: '100%' })), { pointerEvents: 'auto', background: 'transparent' })));
+// Invisible hover overlays to bridge gaps between chips
+export const HoverBridge = styled('div')(({ side }) => (Object.assign(Object.assign({ position: 'absolute', top: 0, bottom: 0 }, (side === 'left' ? { right: '100%' } : { left: '100%' })), { 
+    // width will be supplied inline via style prop
+    pointerEvents: 'auto', 
+    // transparent but present for hit-testing
+    background: 'transparent' })));
+// --- Peek chips (requested style) ---
 export const PeekContainer = styled(motion.div)(() => ({
     position: 'relative',
     display: 'inline-flex',
@@ -68,35 +78,46 @@ const baseChipStyles = (theme) => ({
     fontSize: 12,
     boxSizing: 'border-box',
     whiteSpace: 'nowrap',
+    // allow chip to grow with content
     overflow: 'visible',
 });
 export const CenterChip = styled(motion.div)(({ theme }) => (Object.assign(Object.assign({}, baseChipStyles(theme)), { position: 'relative', zIndex: 2, minWidth: 24, flex: '0 0 auto', display: 'inline-flex', overflow: 'hidden', willChange: 'transform' })));
+// Static part of the center icon container
 export const CenterContent = styled(motion.span)(() => ({
     display: 'inline-flex',
     alignItems: 'center',
     transform: 'translateZ(0)',
 }));
+// Container that grows in width to reveal the expandable content
 export const ExpandableContainer = styled(motion.span)(({ theme }) => ({
     display: 'inline-flex',
     whiteSpace: 'nowrap',
     overflow: 'hidden',
     boxSizing: 'border-box',
     willChange: 'width',
+    // Style to look like a seamless continuation of the center chip
     border: `1px solid ${theme.palette.divider}`,
     backgroundColor: theme.palette.background.paper,
     height: '24px',
     alignItems: 'center',
-    paddingInline: '0px',
+    paddingInline: '0px', // Match center chip padding
 }));
+// Inner content of the expandable area
 export const ExpandableInner = styled(motion.span)(() => ({
     display: 'inline-flex',
     whiteSpace: 'nowrap',
     alignItems: 'center',
     height: '100%',
 }));
-export const LeftPeekChip = styled(motion.div)(({ theme }) => (Object.assign(Object.assign({}, baseChipStyles(theme)), { position: 'absolute', left: 0, zIndex: 1, pointerEvents: 'none', minWidth: 24, paddingInline: 0 })));
-export const RightPeekChip = styled(motion.div)(({ theme }) => (Object.assign(Object.assign({}, baseChipStyles(theme)), { position: 'absolute', right: 0, zIndex: 1, pointerEvents: 'none', minWidth: 24, paddingInline: 0 })));
+export const LeftPeekChip = styled(motion.div)(({ theme }) => (Object.assign(Object.assign({}, baseChipStyles(theme)), { position: 'absolute', left: 0, zIndex: 1, pointerEvents: 'none', 
+    // ensure circular end even without content
+    minWidth: 24, paddingInline: 0 })));
+export const RightPeekChip = styled(motion.div)(({ theme }) => (Object.assign(Object.assign({}, baseChipStyles(theme)), { position: 'absolute', right: 0, zIndex: 1, pointerEvents: 'none', 
+    // ensure circular end even without content
+    minWidth: 24, paddingInline: 0 })));
+// Chip for expanded icons (left/right lists)
 export const ExpandChip = styled(motion.div)(({ theme }) => (Object.assign(Object.assign({}, baseChipStyles(theme)), { minWidth: 24, flex: '0 0 auto', display: 'inline-flex' })));
+// Styles applied to the containing TableCell
 export const tableCellSx = {
     position: 'relative',
     overflow: 'visible',

package/build/components/RightLeftExpandingCenterChip/useRightLeftExpandingCenterChip.d.ts

@@ -1,4 +1,9 @@
 import { type ReactNode } from 'react';
+/**
+ * Hook: useRightLeftExpandingCenterChip
+ * Encapsulates hover logic, measurement (anchors, chip widths, expandable width),
+ * and motion values for the RightLeftExpandingCenterChip component.
+ */
 export declare const DEFAULT_CHIP_MIN_WIDTH = 24;
 export type UseRightLeftExpandingCenterChipArgs = {
     leftIcons: ReactNode[];

package/build/components/RightLeftExpandingCenterChip/useRightLeftExpandingCenterChip.js

@@ -1,14 +1,25 @@
 import { useRef, useEffect, useState, useMemo, useCallback, useLayoutEffect } from 'react';
 import { animate, useMotionValue } from 'framer-motion';
 import { CHIP_GAP } from './style';
+/**
+ * Hook: useRightLeftExpandingCenterChip
+ * Encapsulates hover logic, measurement (anchors, chip widths, expandable width),
+ * and motion values for the RightLeftExpandingCenterChip component.
+ */
 export const DEFAULT_CHIP_MIN_WIDTH = 24;
 export function useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerIcon, expandableCenterRight, expandableCenterLeft, }) {
+    // =================================
+    // State (move all state to the top)
+    // =================================
     const [isHovering, setIsHovering] = useState(false);
     const [anchors, setAnchors] = useState({ left: 0, right: 0 });
     const [leftWidths, setLeftWidths] = useState([]);
     const [rightWidths, setRightWidths] = useState([]);
     const [expandableRightWidth, setExpandableRightWidth] = useState(0);
     const [expandableLeftWidth, setExpandableLeftWidth] = useState(0);
+    // ======================
+    // Refs (DOM and timers)
+    // ======================
     const hoverTimeoutRef = useRef(null);
     const centerWrapRef = useRef(null);
     const centerContentRef = useRef(null);
@@ -17,7 +28,9 @@ export function useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerI
     const rightChipRefs = useRef([]);
     const expandableRightInnerRef = useRef(null);
     const expandableLeftInnerRef = useRef(null);
+    // rAF id for resize throttling
     const resizeRaf = useRef(null);
+    // Small helpers to avoid unnecessary state updates
     const arraysEqual = useCallback((a, b) => {
         if (a === b)
             return true;
@@ -31,9 +44,16 @@ export function useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerI
     const anchorsEqual = useCallback((a, b) => {
         return a.left === b.left && a.right === b.right;
     }, []);
+    // ======================
+    // Motion values
+    // ======================
     const expandedRightMV = useMotionValue(0);
     const expandedLeftMV = useMotionValue(0);
+    // Center icon stays fixed - no shift needed
     const shiftX = useMotionValue(0);
+    // ======================
+    // Computed values
+    // ======================
     const leftOffsets = useMemo(() => {
         if (!leftWidths.length)
             return [];
@@ -58,21 +78,31 @@ export function useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerI
         }
         return acc;
     }, [rightWidths]);
+    // Right icons shift to account for expandable content without gap
     const rightShift = isHovering && expandableCenterRight ? expandableRightWidth : 0;
+    // Left icons shift to account for expandable content without gap
     const leftShift = isHovering && expandableCenterLeft ? expandableLeftWidth : 0;
+    // Predict max right shift even when not hovering to size hover zone generously
     const maxRightShift = expandableCenterRight ? expandableRightWidth : 0;
+    // ======================
+    // Callbacks
+    // ======================
     const handleMouseEnter = useCallback(() => {
         if (hoverTimeoutRef.current)
             clearTimeout(hoverTimeoutRef.current);
+        // Enter immediately to keep hover active while moving across expanded areas
         setIsHovering(true);
     }, []);
     const handleMouseLeave = useCallback(() => {
         if (hoverTimeoutRef.current)
             clearTimeout(hoverTimeoutRef.current);
+        // Delay hover off to avoid flicker when moving between center and expanded icons
         hoverTimeoutRef.current = setTimeout(() => setIsHovering(false), 120);
     }, []);
+    // Single measurement function to batch reads and writes
     const measureAll = useCallback(() => {
         var _a, _b, _c, _d, _e;
+        // Read DOM
         const wrap = centerWrapRef.current;
         const chip = centerChipRef.current;
         const content = centerContentRef.current;
@@ -81,6 +111,7 @@ export function useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerI
             const wrapRect = wrap.getBoundingClientRect();
             const targetRect = (_a = (chip !== null && chip !== void 0 ? chip : content)) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
             if (targetRect) {
+                // Round to prevent tiny sub-pixel changes causing re-renders
                 const left = Math.round(targetRect.left - wrapRect.left);
                 const right = Math.round(targetRect.right - wrapRect.left);
                 nextAnchors = { left, right };
@@ -90,6 +121,7 @@ export function useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerI
         const nextRightWidths = rightChipRefs.current.map((el) => (el ? el.offsetWidth : DEFAULT_CHIP_MIN_WIDTH));
         const nextExpandableRightWidth = (_c = (_b = expandableRightInnerRef.current) === null || _b === void 0 ? void 0 : _b.scrollWidth) !== null && _c !== void 0 ? _c : 0;
         const nextExpandableLeftWidth = (_e = (_d = expandableLeftInnerRef.current) === null || _d === void 0 ? void 0 : _d.scrollWidth) !== null && _e !== void 0 ? _e : 0;
+        // Write state only if changed
         if (!anchorsEqual(anchors, nextAnchors))
             setAnchors(nextAnchors);
         if (!arraysEqual(leftWidths, nextLeftWidths))
@@ -101,6 +133,7 @@ export function useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerI
         if (expandableLeftWidth !== nextExpandableLeftWidth)
             setExpandableLeftWidth(nextExpandableLeftWidth);
     }, [anchors, leftWidths, rightWidths, expandableRightWidth, expandableLeftWidth, anchorsEqual, arraysEqual]);
+    // rAF-throttled resize handler (memoized)
     const onResize = useCallback(() => {
         if (resizeRaf.current)
             cancelAnimationFrame(resizeRaf.current);
@@ -108,17 +141,22 @@ export function useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerI
             measureAll();
         });
     }, [measureAll]);
+    // ======================
+    // Effects
+    // ======================
     useEffect(() => {
         return () => {
             if (hoverTimeoutRef.current)
                 clearTimeout(hoverTimeoutRef.current);
         };
     }, []);
+    // Perform initial measurements (and when inputs that affect layout change) before paint
     useLayoutEffect(() => {
         measureAll();
     }, [centerIcon, leftIcons, rightIcons, expandableCenterRight, expandableCenterLeft, measureAll]);
+    // Window resize listener effect
     useEffect(() => {
-        onResize();
+        onResize(); // initial measurement on mount
         window.addEventListener('resize', onResize);
         return () => {
             window.removeEventListener('resize', onResize);
@@ -126,16 +164,21 @@ export function useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerI
                 cancelAnimationFrame(resizeRaf.current);
         };
     }, [onResize]);
+    // Animate right expandable content - no gap for seamless connection
     useEffect(() => {
         const target = isHovering && expandableCenterRight ? expandableRightWidth : 0;
         const controls = animate(expandedRightMV, target, { duration: 0.2, ease: 'easeOut' });
         return () => controls.stop();
     }, [isHovering, expandableCenterRight, expandableRightWidth, expandedRightMV]);
+    // Animate left expandable content - no gap for seamless connection
     useEffect(() => {
         const target = isHovering && expandableCenterLeft ? expandableLeftWidth : 0;
         const controls = animate(expandedLeftMV, target, { duration: 0.2, ease: 'easeOut' });
         return () => controls.stop();
     }, [isHovering, expandableCenterLeft, expandableLeftWidth, expandedLeftMV]);
+    // ======================
+    // Derived hover zone widths (adjusted for seamless positioning)
+    // ======================
     const leftHoverWidth = useMemo(() => {
         var _a;
         if (!leftOffsets.length)
@@ -154,27 +197,36 @@ export function useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerI
         const farthest = maxRightShift + rightOffsets[last] + lastWidth / 2;
         return farthest + CHIP_GAP;
     }, [rightOffsets, rightWidths, maxRightShift]);
+    // ======================
+    // Public API
+    // ======================
     return {
+        // hover state/handlers
         isHovering,
         handleMouseEnter,
         handleMouseLeave,
+        // anchors/refs
         centerWrapRef,
         centerContentRef,
         centerChipRef,
         anchors,
+        // chip measurement/offsets
         leftChipRefs,
         rightChipRefs,
         leftOffsets,
         rightOffsets,
+        // expandable area
         expandableRightInnerRef,
         expandableLeftInnerRef,
         expandableRightWidth,
         expandableLeftWidth,
+        // motion values
         expandedRightMV,
         expandedLeftMV,
         shiftX,
         rightShift,
         leftShift,
+        // hover zone widths
         leftHoverWidth,
         rightHoverWidth,
     };

package/build/components/ScrollLoader/ScrollLoader.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from 'react';
 import Stack from '@mui/material/Stack';
-const OFFSET = 50;
+const OFFSET = 50; // px to trigger loading before reaching full bottom
 const isNearBottom = (el, offset = OFFSET) => {
     const scrollBottom = el.scrollTop + el.clientHeight;
     const scrollHeight = el.scrollHeight;
@@ -44,6 +44,7 @@ const ScrollLoader = (props) => {
         el.addEventListener('scroll', handleScroll);
         return () => el.removeEventListener('scroll', handleScroll);
     }, [handleScroll]);
+    // Initially .. auto load the data if the scrollable container allows
     useEffect(() => {
         const el = containerRef.current;
         if (!el || loading || initialChecked)

package/build/components/StatusButton/StatusButton.js

@@ -19,29 +19,34 @@ import { ChevronContainer, Label, LabelWrapper, StyledStatusIcon, StyledDropdown
 import { statusButtonIcons } from './constant';
 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 { variant = 'inActive', badgeCount, icon, label, dropdownOptions, onButtonBodyClick, iconMapper = statusButtonIcons } = props, restProps = __rest(props, ["variant", "badgeCount", "icon", "label", "dropdownOptions", "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);
+    // 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
     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]);
+    // Memoized UI elements
+    const statusIcon = useMemo(() => (icon ? _jsx(StyledStatusIcon, { icon: icon, variant: variant, src: iconMapper[icon], alt: `${icon}-icon` }) : null), [icon, iconMapper, 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]);
+    // Reset button clicks and anchor element when variant changes
     useEffect(() => {
         if (!isActiveVariant) {
             setButtonClicks(0);
             setAnchorEl(null);
         }
     }, [isActiveVariant]);
+    // Event handlers
     const handleDropdownClose = useCallback(() => {
         setAnchorEl(null);
     }, []);
@@ -58,12 +63,15 @@ const StatusButton = memo((props) => {
         handleDropdownToggle();
         setButtonClicks((prev) => prev + 1);
     }, [props, onButtonBodyClick, selectedStatus, dropdownOptions, handleDropdownToggle]);
-    const handleMenuItemClick = useCallback((item) => (e) => {
+    const handleMenuItemClick = useCallback(
+    // eslint-disable-next-line
+    (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]);
+    // Enhanced dropdown menu items
     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;

package/build/components/StatusButton/constant.js

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

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

@@ -1,5 +1,6 @@
 import type React from 'react';
 import { type Theme } from '@mui/material';
+import { StatusButtonProps } from './type';
 export declare const statusButtonVariants: {
     active: 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;
@@ -35,5 +36,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" | "checked" | "initiated" | "captured" | "unCaptured" | "inProgress" | "abandoned" | "cancelled" | "authorized" | "unauthenticated" | "authenticated" | "unSettled" | "reports" | "chevronDown" | "unAuthorized" | "openFlag" | "closedFlag" | undefined;
+    icon?: StatusButtonProps['icon'];
 }, React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;

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

@@ -8,11 +8,23 @@ export interface StatusButtonProps extends Omit<ButtonProps, 'variant' | 'childr
     variant?: StatusButtonVariant;
     badgeCount?: number | string;
     hasDropdown?: boolean;
-    icon?: StatusButtonIcon;
+    icon?: StatusButtonIcon | (string & {});
     label?: ReactNode | null;
     showDropdownIcon?: boolean;
     totalCount?: number;
     onButtonBodyClick?: (status: TableHeaderStatus) => void;
+    /**
+     * @description
+     * `iconMapper` is used as an override for mapping between a given key (statusKey .. ex:`"active"`) and icon src URL
+     * @example
+     * ```js
+     *  iconMapper: {
+     *    active:'http://base-url/active.svg',
+     *    inactive:'http://base-url/inactive.svg',
+     *  }
+     * ```
+     */
+    iconMapper?: Record<StatusButtonIcon | (string & {}), string>;
     dropdownOptions?: Array<MenuItemI & {
         status: TableHeaderStatus;
     }>;

package/build/components/StatusIcons/AuthIcons/constants.js

@@ -27,4 +27,9 @@ export const statusLabels = {
         icon: authenticationDeclinedIcon,
         borderColor: 'rgba(255, 61, 0, 0.10)',
     },
+    // noAuth: {
+    // 	tooltip: 'Not Authenticated',
+    // 	icon: authenticationNoAuthIcon,
+    // 	borderColor: '#F2F2F2'
+    // }
 };

package/build/components/StatusIcons/AuthorizationAutoIcons/CaptureAutoIcon.js

@@ -20,6 +20,17 @@ function CaptureAutoIcon({ voidPercentage, capturePercentage, captureCount, auto
     const formattedAmount = formatAmount(remainingAmount || 0);
     const generateAutoTooltip = useCallback((type) => {
         return `Auto ${type} - ${currency} ${formattedAmount.integerAmount}.${formattedAmount.decimalAmount}`;
+        // if (!lastDate) return `Auto ${type}`
+        // const typeLabel = `Auto ${type} - Scheduled`
+        // const date = dayjs(lastDate).calendar(null, {
+        // 	sameDay: '[for Today at] h:mm A',
+        // 	nextDay: '[for Tomorrow at] h:mm A',
+        // 	lastDay: '[for Yesterday at] h:mm A',
+        // 	sameElse: '[for] MMM DD [at] h:mm A',
+        // 	lastWeek: '[for] MMM DD [at] h:mm A',
+        // 	nextWeek: '[for] MMM DD [at] h:mm A'
+        // })
+        // return `${typeLabel} ${date}`
     }, [currency, formattedAmount.decimalAmount, formattedAmount.integerAmount]);
     const generatePartialTooltip = useCallback((type) => {
         const amount = type === 'Capture' ? captureAmount : voidAmount;

package/build/components/StatusIcons/AuthorizationAutoIcons/VoidAutoIcon.js

@@ -20,6 +20,17 @@ function VoidAutoIcon({ voidPercentage, capturePercentage, voidCount, autoType,
     const formattedAmount = formatAmount(remainingAmount || 0);
     const generateAutoTooltip = useCallback((type) => {
         return `Auto ${type} - ${currency} ${formattedAmount.integerAmount}.${formattedAmount.decimalAmount}`;
+        // if (!lastDate) return `Auto ${type}`
+        // const typeLabel = `Auto ${type} - Scheduled`
+        // const date = dayjs(lastDate).calendar(null, {
+        // 	sameDay: '[for Today at] h:mm A',
+        // 	nextDay: '[for Tomorrow at] h:mm A',
+        // 	lastDay: '[for Yesterday at] h:mm A',
+        // 	sameElse: '[for] MMM DD [at] h:mm A',
+        // 	lastWeek: '[for] MMM DD [at] h:mm A',
+        // 	nextWeek: '[for] MMM DD [at] h:mm A'
+        // })
+        // return `${typeLabel} ${date}`
     }, [currency, formattedAmount.decimalAmount, formattedAmount.integerAmount]);
     const generatePartialTooltip = useCallback((type) => {
         const amount = type === 'Capture' ? captureAmount : voidAmount;

package/build/components/TableCells/CustomCells/ApplicationStatusCell/ApplicationStatusCell.js

@@ -49,7 +49,9 @@ export default function ApplicationStatusCell(_a) {
                     }, borderColor: "transparent" }) })) }), `${app}-${index}`));
     }), [apps, theme]);
     const appsCount = (apps === null || apps === void 0 ? void 0 : apps.length) || 0;
-    return (_jsx(TableCell, Object.assign({}, props, { children: _jsx(StyledAppsCell, { children: appsCount > 0 ? (_jsx(AppsStatusContainer, Object.assign({ layout: true, className: "reference-sources-container", whileHover: "animate", animate: isTooltipOpen ? 'animate' : 'start', sourcesCount: appsCount, variants: { animate: { width: appsCount * (6 + 32) } }, style: {
+    return (_jsx(TableCell, Object.assign({}, props, { children: _jsx(StyledAppsCell, { children: appsCount > 0 ? (_jsx(AppsStatusContainer, Object.assign({ layout: true, className: "reference-sources-container", whileHover: "animate", 
+                // animate when state changes
+                animate: isTooltipOpen ? 'animate' : 'start', sourcesCount: appsCount, variants: { animate: { width: appsCount * (6 + 32) } }, style: {
                     zIndex: 29,
                 } }, { children: appsStatus }))) : null }) })));
 }

package/build/components/TableCells/CustomCells/BrandCell/BrandCell.js

@@ -17,6 +17,7 @@ import { BrandCellContainer, WalletIcon, WalletIconContainer } from './style';
 function BrandCell(_a) {
     var { brandName, brandIcon } = _a, props = __rest(_a, ["brandName", "brandIcon"]);
     const icon = brandIcon ? (_jsx(Tooltip, Object.assign({ title: brandName }, { children: _jsx(WalletIcon, { src: brandIcon, alt: "brand icon", onError: (e) => {
+                // set the default icon if the image is not found
                 e.currentTarget.src = brandPlaceholderIcon;
             } }) }))) : (_jsx(WalletIcon, { src: brandPlaceholderIcon, alt: "brand icon" }));
     return (_jsx(TableCell, Object.assign({ style: {

package/build/components/TableCells/CustomCells/ReferenceCell/ReferenceCell.js

@@ -34,7 +34,9 @@ function ReferenceCell(_a) {
                 } }, { children: isTextShown ? (_jsx(ReferenceTextWrapper, { children: _jsx(ReferenceTextLabel, { children: startCase(reference) }) })) : (_jsx(StyledSourceImage, { src: referenceIcons[reference], alt: reference, sx: Object.assign({}, (reference === 'order' && { width: '11.82px' })) })) })) }), `${reference}-${index}`));
     }), [props, references, isTextShown, theme]);
     const referenceSourcesCount = (ReferenceSources === null || ReferenceSources === void 0 ? void 0 : ReferenceSources.length) || 0;
-    return (_jsx(TableCell, Object.assign({}, props, { children: _jsx(StyledSourceCell, { children: referenceSourcesCount > 0 ? (_jsx(ReferenceSourcesContainer, Object.assign({ layout: true, className: "reference-sources-container", whileHover: "animate", animate: isTooltipOpen ? 'animate' : 'start', sourcesCount: referenceSourcesCount, variants: { animate: { width: referenceSourcesCount * (6 + 32) } }, style: {
+    return (_jsx(TableCell, Object.assign({}, props, { children: _jsx(StyledSourceCell, { children: referenceSourcesCount > 0 ? (_jsx(ReferenceSourcesContainer, Object.assign({ layout: true, className: "reference-sources-container", whileHover: "animate", 
+                // animate when state changes
+                animate: isTooltipOpen ? 'animate' : 'start', sourcesCount: referenceSourcesCount, variants: { animate: { width: referenceSourcesCount * (6 + 32) } }, style: {
                     zIndex: 29,
                 } }, { children: ReferenceSources }))) : null }) })));
 }

package/build/components/TableCells/CustomCells/RefundStatusCell/components/RefundStateIcon.js

@@ -8,6 +8,7 @@ import { RefundStatusIcon } from './RefundStatusIcon';
 export function RefundStateIcon({ status, gatewayTooltip, unCapturedTooltip, acquirerTooltip, errorCode, acquirerCode, gatewayCode, refundTooltip, }) {
     const { t } = useTranslation();
     if (!(unCapturedStatuses === null || unCapturedStatuses === void 0 ? void 0 : unCapturedStatuses.includes(status !== null && status !== void 0 ? status : ''))) {
+        // eslint-disable-next-line
         return _jsx(RefundStatusIcon, { status: status, refundTooltip: refundTooltip });
     }
     return (_jsx(Tooltip, Object.assign({ title: t(camelCase(status)) }, { children: _jsx(ChargeStatusIcon, { chargeStatus: status, gatewayTooltip: gatewayTooltip, chargeTooltip: unCapturedTooltip, acquirerTooltip: acquirerTooltip, errorCode: errorCode, acquirerCode: acquirerCode, gatewayCode: gatewayCode, unCapturedStyles: {