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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/build/components/RightLeftExpandingCenterChip/RightLeftExpandingCenterChip.js +12 -1
  2. package/build/components/RightLeftExpandingCenterChip/style.js +11 -2
  3. package/build/components/RightLeftExpandingCenterChip/useRightLeftExpandingCenterChip.js +2 -2
  4. package/build/components/Window/Window.js +2 -16
  5. package/package.json +1 -1
package/build/components/RightLeftExpandingCenterChip/RightLeftExpandingCenterChip.js CHANGED
@@ -17,7 +17,18 @@ import { useRightLeftExpandingCenterChip, DEFAULT_CHIP_MIN_WIDTH } from './useRi
17
17
  function RightLeftExpandingCenterChip(_a) {
18
18
  var { leftIcons = [], rightIcons = [], centerIcon, expandableCenter, expandedZIndex = 1000 } = _a, props = __rest(_a, ["leftIcons", "rightIcons", "centerIcon", "expandableCenter", "expandedZIndex"]);
19
19
  const { isHovering, handleMouseEnter, handleMouseLeave, centerWrapRef, centerContentRef, centerChipRef, anchors, leftChipRefs, rightChipRefs, leftOffsets, rightOffsets, expandableInnerRef, expandedMV, shiftX, rightShift, leftHoverWidth, rightHoverWidth, } = useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerIcon, expandableCenter });
20
- 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: {
20
+ 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: {
21
+ borderRadius: expandableCenter && isHovering ? '12px 0 0 12px' : '12px',
22
+ borderRight: expandableCenter && isHovering ? 'none' : undefined,
23
+ paddingInlineEnd: '2px',
24
+ } }, { 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: {
25
+ width: expandedMV,
26
+ position: 'absolute',
27
+ left: 'calc(100% - 1px)',
28
+ top: 0,
29
+ height: '24px',
30
+ zIndex: 1,
31
+ }, 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: {
21
32
  right: `calc(100% - ${anchors.left}px)`,
22
33
  top: '50%',
23
34
  position: 'absolute',
package/build/components/RightLeftExpandingCenterChip/style.js CHANGED
@@ -78,17 +78,26 @@ export const CenterContent = styled(motion.span)(() => ({
78
78
  alignItems: 'center',
79
79
  transform: 'translateZ(0)',
80
80
  }));
81
- export const ExpandableContainer = styled(motion.span)(() => ({
81
+ export const ExpandableContainer = styled(motion.span)(({ theme }) => ({
82
82
  display: 'inline-flex',
83
83
  whiteSpace: 'nowrap',
84
84
  overflow: 'hidden',
85
85
  boxSizing: 'border-box',
86
86
  willChange: 'width',
87
+ border: `1px solid ${theme.palette.divider}`,
88
+ borderLeft: 'none',
89
+ borderRadius: '0 12px 12px 0',
90
+ backgroundColor: theme.palette.background.paper,
91
+ height: '24px',
92
+ alignItems: 'center',
87
93
  }));
88
94
  export const ExpandableInner = styled(motion.span)(() => ({
89
95
  display: 'inline-flex',
90
96
  whiteSpace: 'nowrap',
91
- paddingLeft: `${CHIP_GAP}px`,
97
+ paddingLeft: '1px',
98
+ paddingRight: '8px',
99
+ alignItems: 'center',
100
+ height: '100%',
92
101
  }));
93
102
  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 })));
94
103
  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 CHANGED
@@ -1,5 +1,5 @@
1
1
  import { useRef, useEffect, useState, useMemo, useCallback, useLayoutEffect } from 'react';
2
- import { animate, useMotionValue, useTransform } from 'framer-motion';
2
+ import { animate, useMotionValue } from 'framer-motion';
3
3
  import { CHIP_GAP } from './style';
4
4
  export const DEFAULT_CHIP_MIN_WIDTH = 24;
5
5
  export function useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerIcon, expandableCenter }) {
@@ -30,7 +30,7 @@ export function useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerI
30
30
  return a.left === b.left && a.right === b.right;
31
31
  }, []);
32
32
  const expandedMV = useMotionValue(0);
33
- const shiftX = useTransform(expandedMV, (v) => v / 2);
33
+ const shiftX = useMotionValue(0);
34
34
  const leftOffsets = useMemo(() => {
35
35
  if (!leftWidths.length)
36
36
  return [];
package/build/components/Window/Window.js CHANGED
@@ -5,7 +5,6 @@ import { Resizable } from 're-resizable';
5
5
  import { APP_WINDOW_Z_INDEX, FOOTER_HEIGHT, HEADER_HEIGHT } from '../../constants/index.js';
6
6
  import { contentStyle, ContentWrapper, initalStyle, resizableMainStyle, AppContainerWrapper, AppContainerContainer } from './style';
7
7
  function WindowWrapper({ children, id, onResize, isMaximized, isMinimized, dragControls, onClick, options: { width, height, minHeight, minWidth, maxHeight, maxWidth, order, openOrder = 1 }, }) {
8
- var _a, _b, _c, _d;
9
8
  const [isDrag, setIsDrag] = useState(true);
10
9
  const modalRef = useRef(null);
11
10
  const constraintsRef = useRef(null);
@@ -20,27 +19,14 @@ function WindowWrapper({ children, id, onResize, isMaximized, isMinimized, dragC
20
19
  const resizableStyle = useMemo(() => (Object.assign(Object.assign(Object.assign({}, resizableMainStyle), { maxWidth: width, borderRadius: !isMaximized ? 12 : '0 !important' }), (!isMaximized && {
21
20
  top: 0,
22
21
  }))), [isMaximized, width]);
23
- const dragConstraints = useMemo(() => {
24
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
25
- return ({
26
- right: Number((_a = modalRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) + Number((_b = modalRef.current) === null || _b === void 0 ? void 0 : _b.offsetLeft) - 10,
27
- left: -(Number((_c = modalRef.current) === null || _c === void 0 ? void 0 : _c.clientWidth) + Number((_d = modalRef.current) === null || _d === void 0 ? void 0 : _d.offsetLeft) - 10),
28
- top: -(Number((_e = modalRef.current) === null || _e === void 0 ? void 0 : _e.clientHeight) + Number((_f = constraintsRef.current) === null || _f === void 0 ? void 0 : _f.offsetTop) - 10),
29
- bottom: Number((_g = modalRef.current) === null || _g === void 0 ? void 0 : _g.clientHeight) +
30
- Number((_j = (_h = constraintsRef.current) === null || _h === void 0 ? void 0 : _h.parentElement) === null || _j === void 0 ? void 0 : _j.offsetHeight) -
31
- Number((_k = constraintsRef.current) === null || _k === void 0 ? void 0 : _k.offsetTop) -
32
- Number((_l = modalRef.current) === null || _l === void 0 ? void 0 : _l.offsetHeight) -
33
- 10,
34
- });
35
- }, [(_a = constraintsRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight, (_b = constraintsRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth, (_c = modalRef.current) === null || _c === void 0 ? void 0 : _c.clientWidth, (_d = modalRef.current) === null || _d === void 0 ? void 0 : _d.clientHeight]);
36
22
  useEffect(() => {
37
23
  var _a;
38
24
  (_a = resizableRef.current) === null || _a === void 0 ? void 0 : _a.updateSize({
39
25
  width: isMaximized ? '100vw' : width,
40
26
  height: isMaximized ? '100vh' : '100%',
41
27
  });
42
- }, [isMaximized]);
43
- return (_jsx(AppContainerWrapper, Object.assign({ id: "app-container-wrapper", "data-testid": "AppContainerWrapper" }, { children: _jsx(AppContainerContainer, Object.assign({ "data-testid": "AppContainerContainer" }, { children: _jsx(motion.div, Object.assign({ id: "app-content", "data-add-id": id, "data-testid": "AppContent", ref: constraintsRef, initial: initalStyle }, { children: _jsx(ContentWrapper, Object.assign({ id: "content-wrapper", drag: !isMaximized && isDrag, dragMomentum: false, dragConstraints: dragConstraints, onDragStart: onClick, onDragEnter: onClick, onClick: onClick, dragControls: dragControls, dragListener: false, style: Object.assign(Object.assign(Object.assign({}, (order && {
28
+ }, [isMaximized, width]);
29
+ return (_jsx(AppContainerWrapper, Object.assign({ id: "app-container-wrapper", "data-testid": "AppContainerWrapper" }, { children: _jsx(AppContainerContainer, Object.assign({ "data-testid": "AppContainerContainer" }, { children: _jsx(motion.div, Object.assign({ id: "app-content", "data-add-id": id, "data-testid": "AppContent", ref: constraintsRef, initial: initalStyle }, { children: _jsx(ContentWrapper, Object.assign({ id: "content-wrapper", drag: !isMaximized && isDrag, dragMomentum: false, dragConstraints: false, onDragStart: onClick, onDragEnter: onClick, onClick: onClick, dragControls: dragControls, dragListener: false, style: Object.assign(Object.assign(Object.assign({}, (order && {
44
30
  zIndex: Number(order) + APP_WINDOW_Z_INDEX,
45
31
  })), contentStyle), { height }), initial: Object.assign({ marginInline: 'auto', scale: 0, left: 0 }, (!isMaximized && {
46
32
  left: 48 * (openOrder - 1),
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@tap-payments/os-micro-frontend-shared",
3
3
  "description": "Shared components and utilities for Tap Payments micro frontends",
4
- "version": "0.1.35",
4
+ "version": "0.1.36",
5
5
  "testVersion": 1,
6
6
  "type": "module",
7
7
  "main": "build/index.js",