@tap-payments/os-micro-frontend-shared 0.1.386-test.1 → 0.1.386-test.5

package/build/components/RightLeftExpandingCenterChip/RightLeftExpandingCenterChip.js

@@ -10,9 +10,8 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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 { CenterIconWrapper, ExpandedSection, PeekContainer, CenterChip, LeftPeekChip, RightPeekChip, LeftExpandIcon, RightExpandIcon, ExpandChip, CenterShiftWrapper, CenterContent, ExpandableContainer, ExpandableInner, ChipsContainer, CHIP_GAP, HoverBridge, } from './style';
 import { useRightLeftExpandingCenterChip, DEFAULT_CHIP_MIN_WIDTH } from './useRightLeftExpandingCenterChip';
 /**
  * Component: RightLeftExpandingCenterChip
@@ -49,7 +48,7 @@ import { useRightLeftExpandingCenterChip, DEFAULT_CHIP_MIN_WIDTH } from './useRi
 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 });
-    return (_jsx(Box, Object.assign({}, props, { "data-testid": "RightLeftExpandingCenterChipBox", sx: tableCellSx }, { children: _jsx(CenterShiftWrapper, Object.assign({ "data-testid": "CenterShiftWrapper", initial: false, style: { x: shiftX } }, { children: _jsxs(CenterIconWrapper, Object.assign({ "data-testid": "CenterIconWrapper", ref: centerWrapRef, onMouseLeave: handleMouseLeave }, { children: [_jsxs(PeekContainer, Object.assign({ "data-testid": "PeekContainer" }, { children: [_jsx(AnimatePresence, Object.assign({ initial: false }, { children: leftIcons.length > 0 && (_jsx(LeftPeekChip, { "data-testid": "LeftPeekChip", 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' } }, "left-peek")) })), _jsx(CenterChip, Object.assign({ "data-testid": "CenterChip", ref: centerChipRef, onMouseEnter: handleMouseEnter, style: {
+    return (_jsx(ChipsContainer, Object.assign({}, props, { "data-testid": "RightLeftExpandingCenterChipBox" }, { children: _jsx(CenterShiftWrapper, Object.assign({ "data-testid": "CenterShiftWrapper", initial: false, style: { x: shiftX } }, { children: _jsxs(CenterIconWrapper, Object.assign({ "data-testid": "CenterIconWrapper", ref: centerWrapRef, onMouseLeave: handleMouseLeave }, { children: [_jsxs(PeekContainer, Object.assign({ "data-testid": "PeekContainer" }, { children: [_jsx(AnimatePresence, Object.assign({ initial: false }, { children: leftIcons.length > 0 && (_jsx(LeftPeekChip, { "data-testid": "LeftPeekChip", 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' } }, "left-peek")) })), _jsx(CenterChip, Object.assign({ "data-testid": "CenterChip", ref: centerChipRef, onMouseEnter: handleMouseEnter, style: {
                                     borderRadius: (() => {
                                         const hasLeftExpanded = expandableCenterLeft && isHovering;
                                         const hasRightExpanded = expandableCenterRight && isHovering;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { SxProps, Theme } from '@mui/material/styles';
+import { type Theme } from '@mui/material/styles';
 export declare const CHIP_GAP = 3;
 export declare const CenterIconWrapper: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
@@ -3412,4 +3412,6 @@ export declare const ExpandChip: import("@emotion/styled").StyledComponent<{
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
 } & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLDivElement> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
-export declare const tableCellSx: SxProps<Theme>;
+export declare const ChipsContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;

package/build/components/RightLeftExpandingCenterChip/style.js

@@ -1,3 +1,4 @@
+import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
 import { motion } from 'framer-motion';
 // Shared spacing between chips
@@ -118,7 +119,7 @@ export const RightPeekChip = styled(motion.div)(({ theme }) => (Object.assign(Ob
 // 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 = {
+export const ChipsContainer = styled(Box)(() => ({
     position: 'relative',
     overflow: 'visible',
     zIndex: 101,
@@ -126,4 +127,4 @@ export const tableCellSx = {
     alignItems: 'center',
     justifyContent: 'center',
     minHeight: '20px',
-};
+}));

package/build/components/TableCells/CustomCells/DueDateCell/DueDateCell.d.ts

@@ -1,3 +1,3 @@
 import { DueCellProps } from './type';
-declare function DueDateCell({ dueDate, expiryDate, ...props }: DueCellProps): import("react/jsx-runtime").JSX.Element;
+declare function DueDateCell({ dueDate, expiryDate, ...props }: DueCellProps): import("react/jsx-runtime").JSX.Element | null;
 export default DueDateCell;

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

@@ -18,8 +18,11 @@ import { useDueDate } from './useDueDate';
 function DueDateCell(_a) {
     var { dueDate, expiryDate } = _a, props = __rest(_a, ["dueDate", "expiryDate"]);
     const { dueMeta, expiryMeta } = useDueDate(dueDate, expiryDate);
-    return (_jsx(TableCell, Object.assign({}, props, { sx: { position: 'relative', overflow: 'visible' } }, { children: _jsx(RightLeftExpandingCenterChip, { centerIcon: dueMeta && (_jsx(Tooltip, Object.assign({ title: dueMeta.label }, { children: _jsx(DateIcon, { src: dueMeta.icon, alt: "icon" }) }))), rightIcons: [
-                expiryMeta && (_jsx(Tooltip, Object.assign({ title: expiryMeta.label }, { children: _jsx(DateIcon, { src: expiryMeta.icon, alt: "icon" }) }))),
-            ] }) })));
+    if (!dueMeta && !expiryMeta)
+        return null;
+    const renderIcon = (meta) => (_jsx(Tooltip, Object.assign({ title: meta.label }, { children: _jsx(DateIcon, { src: meta.icon, alt: "icon" }) })));
+    const centerIcon = dueMeta ? renderIcon(dueMeta) : expiryMeta ? renderIcon(expiryMeta) : null;
+    const rightIcons = expiryMeta && dueMeta && dueDate ? [renderIcon(expiryMeta)] : [];
+    return (_jsx(TableCell, Object.assign({}, props, { sx: { position: 'relative', overflow: 'visible' } }, { children: _jsx(RightLeftExpandingCenterChip, { sx: { justifyContent: 'flex-start' }, centerIcon: centerIcon, rightIcons: rightIcons }) })));
 }
 export default DueDateCell;

package/build/components/TableCells/CustomCells/DueDateCell/useDueDate.js

@@ -4,16 +4,17 @@ import { useTheme } from '@mui/material/styles';
 import { isValidDate, buildDueMeta, buildExpiryMeta } from './utils';
 export function useDueDate(dueDate, expiryDate) {
     const theme = useTheme();
-    const now = dayjs();
     const dueMeta = useMemo(() => {
         if (!isValidDate(dueDate))
             return null;
+        const now = dayjs();
         return buildDueMeta(dayjs(dueDate), now, theme);
-    }, [dueDate, now, theme]);
+    }, [dueDate, theme]);
     const expiryMeta = useMemo(() => {
         if (!isValidDate(expiryDate))
             return null;
+        const now = dayjs();
         return buildExpiryMeta(dayjs(expiryDate), now);
-    }, [expiryDate, now]);
+    }, [expiryDate]);
     return { dueMeta, expiryMeta };
 }

package/build/components/TableCells/CustomCells/DueDateCell/utils.d.ts

@@ -1,9 +1,10 @@
 import { Dayjs } from 'dayjs';
+import { Theme } from '@mui/material/styles';
 import { DateInput } from './type';
 export declare function formatDate(date?: number): string;
-export declare function buildDueMeta(due: Dayjs, now: Dayjs, theme: any): {
+export declare function buildDueMeta(due: Dayjs, now: Dayjs, theme: Theme): {
     icon: string;
-    color: any;
+    color: string;
     label: string;
 };
 export declare function buildExpiryMeta(expiry: Dayjs, now: Dayjs): {

package/build/components/TableCells/CustomCells/DueDateCell/utils.js

@@ -33,36 +33,26 @@ export function buildDueMeta(due, now, theme) {
     };
 }
 export function buildExpiryMeta(expiry, now) {
+    const expiryTimestamp = expiry.valueOf();
     if (expiry.isBefore(now)) {
         return {
             icon: expiredIcon,
             isExpired: true,
-            label: `Expired on ${formatDate(expiry.valueOf())}`,
+            label: `Expired on ${formatDate(expiryTimestamp)}`,
         };
     }
+    const baseMeta = {
+        icon: timerBlueIcon,
+        isExpired: false,
+    };
     const units = ['day', 'hour', 'minute', 'second'];
     for (const unit of units) {
         const diff = expiry.diff(now, unit);
         if (diff >= 1) {
-            if (unit === 'day' && diff > 1) {
-                return {
-                    icon: timerBlueIcon,
-                    isExpired: false,
-                    label: formatDate(expiry.valueOf()),
-                };
-            }
-            return {
-                icon: timerBlueIcon,
-                isExpired: false,
-                label: `${diff} ${unit}${diff > 1 ? 's' : ''} left`,
-            };
+            return Object.assign(Object.assign({}, baseMeta), { label: `${diff} ${unit}${diff > 1 ? 's' : ''} left` });
         }
     }
-    return {
-        icon: timerBlueIcon,
-        isExpired: false,
-        label: 'Less than a second left',
-    };
+    return Object.assign(Object.assign({}, baseMeta), { label: 'Less than a second left' });
 }
 export function isValidDate(input) {
     return Boolean(input && dayjs(input).isValid());

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.386-test.1",
-  "testVersion": 1,
+  "version": "0.1.386-test.5",
+  "testVersion": 5,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",