@tap-payments/os-micro-frontend-shared 0.1.35 → 0.1.36-test.2

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2025 Tap Payments
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2025 Tap Payments
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,12 +1,12 @@
-# os-micro-frontend-shared
-
-## Publishing Workflow
-
-1. Update version in package.json
-2. Commit changes
-3. Create and push a tag:
-
-```bash
-npm version patch  # or minor, major
-git push origin main --tags
-```
+# os-micro-frontend-shared
+
+## Publishing Workflow
+
+1. Update version in package.json
+2. Commit changes
+3. Create and push a tag:
+
+```bash
+npm version patch  # or minor, major
+git push origin main --tags
+```

package/build/components/RightLeftExpandingCenterChip/RightLeftExpandingCenterChip.js

@@ -17,7 +17,18 @@ import { useRightLeftExpandingCenterChip, DEFAULT_CHIP_MIN_WIDTH } from './useRi
 function RightLeftExpandingCenterChip(_a) {
     var { leftIcons = [], rightIcons = [], centerIcon, expandableCenter, expandedZIndex = 1000 } = _a, props = __rest(_a, ["leftIcons", "rightIcons", "centerIcon", "expandableCenter", "expandedZIndex"]);
     const { isHovering, handleMouseEnter, handleMouseLeave, centerWrapRef, centerContentRef, centerChipRef, anchors, leftChipRefs, rightChipRefs, leftOffsets, rightOffsets, expandableInnerRef, expandedMV, shiftX, rightShift, leftHoverWidth, rightHoverWidth, } = useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerIcon, expandableCenter });
-    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")) })), _jsxs(CenterChip, Object.assign({ "data-testid": "CenterChip", ref: centerChipRef, layout: true, onMouseEnter: handleMouseEnter }, { children: [_jsx(CenterContent, Object.assign({ "data-testid": "CenterContent", ref: centerContentRef, layout: true }, { children: centerIcon })), _jsx(AnimatePresence, Object.assign({ initial: false }, { children: expandableCenter && (_jsx(ExpandableContainer, Object.assign({ "data-testid": "ExpandableContainer", style: { width: expandedMV }, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.2, ease: 'easeOut' } }, { children: _jsx(ExpandableInner, Object.assign({ "data-testid": "ExpandableInner", ref: expandableInnerRef, layout: true }, { children: expandableCenter })) }), "expandable-center")) }))] })), _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: {
+    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: {
+                                    borderRadius: expandableCenter && isHovering ? '12px 0 0 12px' : '12px',
+                                    borderRight: expandableCenter && isHovering ? 'none' : undefined,
+                                    paddingInlineEnd: '2px',
+                                } }, { children: _jsx(CenterContent, Object.assign({ "data-testid": "CenterContent", ref: centerContentRef }, { children: centerIcon })) })), _jsx(AnimatePresence, Object.assign({ initial: false }, { children: expandableCenter && isHovering && (_jsx(ExpandableContainer, Object.assign({ "data-testid": "ExpandableContainer", style: {
+                                        width: expandedMV,
+                                        position: 'absolute',
+                                        left: 'calc(100% - 1px)',
+                                        top: 0,
+                                        height: '24px',
+                                        zIndex: 1,
+                                    }, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.2, ease: 'easeOut' } }, { children: _jsx(ExpandableInner, Object.assign({ "data-testid": "ExpandableInner", ref: expandableInnerRef }, { children: expandableCenter })) }), "expandable-center")) })), _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%',
                                 position: 'absolute',

package/build/components/RightLeftExpandingCenterChip/style.js

@@ -78,17 +78,26 @@ export const CenterContent = styled(motion.span)(() => ({
     alignItems: 'center',
     transform: 'translateZ(0)',
 }));
-export const ExpandableContainer = styled(motion.span)(() => ({
+export const ExpandableContainer = styled(motion.span)(({ theme }) => ({
     display: 'inline-flex',
     whiteSpace: 'nowrap',
     overflow: 'hidden',
     boxSizing: 'border-box',
     willChange: 'width',
+    border: `1px solid ${theme.palette.divider}`,
+    borderLeft: 'none',
+    borderRadius: '0 12px 12px 0',
+    backgroundColor: theme.palette.background.paper,
+    height: '24px',
+    alignItems: 'center',
 }));
 export const ExpandableInner = styled(motion.span)(() => ({
     display: 'inline-flex',
     whiteSpace: 'nowrap',
-    paddingLeft: `${CHIP_GAP}px`,
+    paddingLeft: '1px',
+    paddingRight: '8px',
+    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 })));

package/build/components/RightLeftExpandingCenterChip/useRightLeftExpandingCenterChip.js

@@ -1,5 +1,5 @@
 import { useRef, useEffect, useState, useMemo, useCallback, useLayoutEffect } from 'react';
-import { animate, useMotionValue, useTransform } from 'framer-motion';
+import { animate, useMotionValue } from 'framer-motion';
 import { CHIP_GAP } from './style';
 export const DEFAULT_CHIP_MIN_WIDTH = 24;
 export function useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerIcon, expandableCenter }) {
@@ -30,7 +30,7 @@ export function useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerI
         return a.left === b.left && a.right === b.right;
     }, []);
     const expandedMV = useMotionValue(0);
-    const shiftX = useTransform(expandedMV, (v) => v / 2);
+    const shiftX = useMotionValue(0);
     const leftOffsets = useMemo(() => {
         if (!leftWidths.length)
             return [];

package/build/components/VirtualTables/components/TableRow.js

@@ -13,6 +13,7 @@ function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = n
         const formattedValue = format ? format({ value, row, index }) : value;
         return render ? render({ row, column, index, value: row[column === null || column === void 0 ? void 0 : column.id] }) : _jsx(_Fragment, { children: formattedValue });
     };
+    console.log({ isSheetView });
     const content = useMemo(() => (_jsx(_Fragment, { children: columns.map((column, colIndex) => {
             var _a, _b;
             const cellKey = `${(_a = column.pinned) !== null && _a !== void 0 ? _a : 'default'}-${index}-${colIndex}`;

package/build/components/VirtualTables/components/style.js

@@ -38,6 +38,7 @@ export const StyledCell = styled(TableCell, {
         position: 'relative',
         borderTop: '1px solid transparent',
         borderLeft: '1px solid transparent',
+        overflow: 'hidden',
         '&:before': {
             content: '""',
             borderRight: isLast ? 'none' : '1px solid transparent',

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.35",
-  "testVersion": 1,
+  "version": "0.1.36-test.2",
+  "testVersion": 2,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",
@@ -131,4 +131,4 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   }
-}
+}