@tap-payments/os-micro-frontend-shared 0.1.30-test.3 → 0.1.31-test.4

package/build/components/RightLeftExpandingCenterChip/style.js

@@ -0,0 +1,104 @@
+import { styled } from '@mui/material/styles';
+import { motion } from 'framer-motion';
+export const CHIP_GAP = 3;
+export const CenterIconWrapper = styled(motion.div)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 0,
+    minWidth: 0,
+    height: 'auto',
+    lineHeight: 1,
+    position: 'relative',
+    zIndex: 1001,
+    fontSize: '12px',
+    color: theme.palette.text.primary,
+}));
+export const CenterShiftWrapper = styled(motion.div)(() => ({
+    display: 'inline-flex',
+}));
+export const LeftExpandIcon = styled(motion.span)(({ theme }) => ({
+    position: 'static',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 0,
+    overflow: 'visible',
+    margin: 0,
+    padding: 0,
+    fontSize: '10px',
+    lineHeight: 1,
+    color: theme.palette.text.secondary,
+    fontWeight: 'bold',
+    userSelect: 'none',
+}));
+export const RightExpandIcon = styled(motion.span)(({ theme }) => ({
+    position: 'static',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 0,
+    overflow: 'visible',
+    margin: 0,
+    padding: 0,
+    fontSize: '10px',
+    lineHeight: 1,
+    color: theme.palette.text.secondary,
+    fontWeight: 'bold',
+    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' })));
+export const PeekContainer = styled(motion.div)(() => ({
+    position: 'relative',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: 24,
+    overflow: 'visible',
+}));
+const baseChipStyles = (theme) => ({
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: '12px',
+    backgroundColor: theme.palette.background.paper,
+    paddingInline: '8px',
+    height: '24px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    lineHeight: 1,
+    fontSize: 12,
+    boxSizing: 'border-box',
+    whiteSpace: 'nowrap',
+    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' })));
+export const CenterContent = styled(motion.span)(() => ({
+    display: 'inline-flex',
+    alignItems: 'center',
+    transform: 'translateZ(0)',
+}));
+export const ExpandableContainer = styled(motion.span)(() => ({
+    display: 'inline-flex',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    boxSizing: 'border-box',
+    willChange: 'width',
+}));
+export const ExpandableInner = styled(motion.span)(() => ({
+    display: 'inline-flex',
+    whiteSpace: 'nowrap',
+    paddingLeft: `${CHIP_GAP}px`,
+}));
+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 ExpandChip = styled(motion.div)(({ theme }) => (Object.assign(Object.assign({}, baseChipStyles(theme)), { minWidth: 24, flex: '0 0 auto', display: 'inline-flex' })));
+export const tableCellSx = {
+    position: 'relative',
+    overflow: 'visible',
+    zIndex: 101,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: '20px',
+};

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

@@ -0,0 +1,10 @@
+import type React from 'react';
+import type { SxProps } from '@mui/material';
+export interface RightLeftExpandingCenterChipProps {
+    leftIcons?: React.ReactNode[];
+    rightIcons?: React.ReactNode[];
+    centerIcon: React.ReactNode;
+    expandableCenter?: React.ReactNode;
+    sx?: SxProps;
+    expandedZIndex?: number;
+}

package/build/components/RightLeftExpandingCenterChip/type.js

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

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

@@ -0,0 +1,31 @@
+import { type ReactNode } from 'react';
+export declare const DEFAULT_CHIP_MIN_WIDTH = 24;
+export type UseRightLeftExpandingCenterChipArgs = {
+    leftIcons: ReactNode[];
+    rightIcons: ReactNode[];
+    centerIcon: ReactNode;
+    expandableCenter?: ReactNode;
+};
+export declare function useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerIcon, expandableCenter }: UseRightLeftExpandingCenterChipArgs): {
+    isHovering: boolean;
+    handleMouseEnter: () => void;
+    handleMouseLeave: () => void;
+    centerWrapRef: import("react").MutableRefObject<HTMLDivElement | null>;
+    centerContentRef: import("react").MutableRefObject<HTMLSpanElement | null>;
+    centerChipRef: import("react").MutableRefObject<HTMLDivElement | null>;
+    anchors: {
+        left: number;
+        right: number;
+    };
+    leftChipRefs: import("react").MutableRefObject<(HTMLDivElement | null)[]>;
+    rightChipRefs: import("react").MutableRefObject<(HTMLDivElement | null)[]>;
+    leftOffsets: number[];
+    rightOffsets: number[];
+    expandableInnerRef: import("react").MutableRefObject<HTMLSpanElement | null>;
+    expandableWidth: number;
+    expandedMV: import("framer-motion").MotionValue<number>;
+    shiftX: import("framer-motion").MotionValue<number>;
+    rightShift: number;
+    leftHoverWidth: number;
+    rightHoverWidth: number;
+};

package/build/components/RightLeftExpandingCenterChip/useRightLeftExpandingCenterChip.js

@@ -0,0 +1,156 @@
+import { useRef, useEffect, useState, useMemo, useCallback } from 'react';
+import { animate, useMotionValue, useTransform } from 'framer-motion';
+import { CHIP_GAP } from './style';
+export const DEFAULT_CHIP_MIN_WIDTH = 24;
+export function useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerIcon, expandableCenter }) {
+    const [isHovering, setIsHovering] = useState(false);
+    const [anchors, setAnchors] = useState({ left: 0, right: 0 });
+    const [leftWidths, setLeftWidths] = useState([]);
+    const [rightWidths, setRightWidths] = useState([]);
+    const [expandableWidth, setExpandableWidth] = useState(0);
+    const hoverTimeoutRef = useRef(null);
+    const centerWrapRef = useRef(null);
+    const centerContentRef = useRef(null);
+    const centerChipRef = useRef(null);
+    const leftChipRefs = useRef([]);
+    const rightChipRefs = useRef([]);
+    const expandableInnerRef = useRef(null);
+    const resizeRaf = useRef(null);
+    const expandedMV = useMotionValue(0);
+    const shiftX = useTransform(expandedMV, (v) => v / 2);
+    const leftOffsets = useMemo(() => {
+        if (!leftWidths.length)
+            return [];
+        const acc = [];
+        let sum = CHIP_GAP + leftWidths[0] / 2;
+        acc.push(sum);
+        for (let i = 1; i < leftWidths.length; i++) {
+            sum += leftWidths[i - 1] / 2 + CHIP_GAP + leftWidths[i] / 2;
+            acc.push(sum);
+        }
+        return acc;
+    }, [leftWidths]);
+    const rightOffsets = useMemo(() => {
+        if (!rightWidths.length)
+            return [];
+        const acc = [];
+        let sum = CHIP_GAP + rightWidths[0] / 2;
+        acc.push(sum);
+        for (let i = 1; i < rightWidths.length; i++) {
+            sum += rightWidths[i - 1] / 2 + CHIP_GAP + rightWidths[i] / 2;
+            acc.push(sum);
+        }
+        return acc;
+    }, [rightWidths]);
+    const rightShift = isHovering && expandableCenter ? expandableWidth + CHIP_GAP : 0;
+    const maxRightShift = expandableCenter ? expandableWidth + CHIP_GAP : 0;
+    const handleMouseEnter = useCallback(() => {
+        if (hoverTimeoutRef.current)
+            clearTimeout(hoverTimeoutRef.current);
+        setIsHovering(true);
+    }, []);
+    const handleMouseLeave = useCallback(() => {
+        if (hoverTimeoutRef.current)
+            clearTimeout(hoverTimeoutRef.current);
+        hoverTimeoutRef.current = setTimeout(() => setIsHovering(false), 120);
+    }, []);
+    const measureAnchors = useCallback(() => {
+        var _a;
+        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);
+    }, []);
+    const onResize = useCallback(() => {
+        if (resizeRaf.current)
+            cancelAnimationFrame(resizeRaf.current);
+        resizeRaf.current = requestAnimationFrame(() => {
+            measureAnchors();
+            measureStackChipWidths();
+            measureExpandableWidth();
+        });
+    }, [measureAnchors, measureStackChipWidths, measureExpandableWidth]);
+    useEffect(() => {
+        return () => {
+            if (hoverTimeoutRef.current)
+                clearTimeout(hoverTimeoutRef.current);
+        };
+    }, []);
+    useEffect(() => {
+        measureAnchors();
+    }, [centerIcon, measureAnchors]);
+    useEffect(() => {
+        measureStackChipWidths();
+    }, [leftIcons, rightIcons, measureStackChipWidths]);
+    useEffect(() => {
+        measureExpandableWidth();
+    }, [expandableCenter, measureExpandableWidth]);
+    useEffect(() => {
+        onResize();
+        window.addEventListener('resize', onResize);
+        return () => {
+            window.removeEventListener('resize', onResize);
+            if (resizeRaf.current)
+                cancelAnimationFrame(resizeRaf.current);
+        };
+    }, [onResize]);
+    useEffect(() => {
+        const target = isHovering && expandableCenter ? expandableWidth + CHIP_GAP : 0;
+        const controls = animate(expandedMV, target, { duration: 0.2, ease: 'easeOut' });
+        return () => controls.stop();
+    }, [isHovering, expandableCenter, expandableWidth, expandedMV]);
+    const leftHoverWidth = useMemo(() => {
+        var _a;
+        if (!leftOffsets.length)
+            return 0;
+        const last = leftOffsets.length - 1;
+        const lastWidth = (_a = leftWidths[last]) !== null && _a !== void 0 ? _a : DEFAULT_CHIP_MIN_WIDTH;
+        const farthest = leftOffsets[last] + lastWidth / 2;
+        return farthest + CHIP_GAP;
+    }, [leftOffsets, leftWidths]);
+    const rightHoverWidth = useMemo(() => {
+        var _a;
+        if (!rightOffsets.length)
+            return 0;
+        const last = rightOffsets.length - 1;
+        const lastWidth = (_a = rightWidths[last]) !== null && _a !== void 0 ? _a : DEFAULT_CHIP_MIN_WIDTH;
+        const farthest = maxRightShift + rightOffsets[last] + lastWidth / 2;
+        return farthest + CHIP_GAP;
+    }, [rightOffsets, rightWidths, maxRightShift]);
+    return {
+        isHovering,
+        handleMouseEnter,
+        handleMouseLeave,
+        centerWrapRef,
+        centerContentRef,
+        centerChipRef,
+        anchors,
+        leftChipRefs,
+        rightChipRefs,
+        leftOffsets,
+        rightOffsets,
+        expandableInnerRef,
+        expandableWidth,
+        expandedMV,
+        shiftX,
+        rightShift,
+        leftHoverWidth,
+        rightHoverWidth,
+    };
+}

package/build/components/index.d.ts

@@ -97,3 +97,6 @@ export { default as AppServices } from './AppServices';
 export { default as ScrollLoader } from './ScrollLoader';
 export * from './ScrollLoader';
 export * from './TooltipChip';
+export * from './RightLeftExpandingCenterChip';
+export * from './RadioButton';
+export * from './RadioGroup';

package/build/components/index.js

@@ -97,3 +97,6 @@ export { default as AppServices } from './AppServices';
 export { default as ScrollLoader } from './ScrollLoader';
 export * from './ScrollLoader';
 export * from './TooltipChip';
+export * from './RightLeftExpandingCenterChip';
+export * from './RadioButton';
+export * from './RadioGroup';

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.30-test.3",
-  "testVersion": 3,
+  "version": "0.1.31-test.4",
+  "testVersion": 4,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",