@tap-payments/os-micro-frontend-shared 0.0.141 → 0.0.142

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 (3) hide show
  1. package/build/components/TableCells/CustomCells/SourceMergedCell/SourceMergedCell.d.ts +1 -1
  2. package/build/components/TableCells/CustomCells/SourceMergedCell/SourceMergedCell.js +66 -69
  3. package/package.json +1 -1
package/build/components/TableCells/CustomCells/SourceMergedCell/SourceMergedCell.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import { SourceMergedCellProps } from './type';
2
- declare function SourceMergedCell({ icons, isTextShown, centerIconKey, collapsedViewIcon, isReversed, tableMode, ...props }: Readonly<SourceMergedCellProps>): void;
2
+ declare function SourceMergedCell({ icons, isTextShown, centerIconKey, collapsedViewIcon, isReversed, tableMode, ...props }: Readonly<SourceMergedCellProps>): import("react/jsx-runtime").JSX.Element;
3
3
  export default SourceMergedCell;
package/build/components/TableCells/CustomCells/SourceMergedCell/SourceMergedCell.js CHANGED
@@ -17,86 +17,83 @@ import { getIconXTranslation } from './utils';
17
17
  import CollapsedViewIcon from './CollapsedViewIcon';
18
18
  function SourceMergedCell(_a) {
19
19
  var { icons, isTextShown, centerIconKey, collapsedViewIcon, isReversed = false, tableMode } = _a, props = __rest(_a, ["icons", "isTextShown", "centerIconKey", "collapsedViewIcon", "isReversed", "tableMode"]);
20
- function SourceMergedCell(_a) {
21
- var { icons, isTextShown, centerIconKey, collapsedViewIcon, isReversed = false, tableMode } = _a, props = __rest(_a, ["icons", "isTextShown", "centerIconKey", "collapsedViewIcon", "isReversed", "tableMode"]);
22
- const iconsList = useMemo(() => icons.filter((icon) => Boolean(icon.icon)), [icons]);
23
- const [isHovering, setIsHovering] = useState(false);
24
- const centerIconIndex = Math.max(centerIconKey ? iconsList.findIndex((icon) => icon.key === centerIconKey) : 0, 0);
25
- const iconRefs = useRef([]);
26
- const [iconMeasurements, setIconMeasurements] = useState(new Map());
27
- const isSheetMode = tableMode === 'sheet';
28
- useEffect(() => {
29
- if (isSheetMode)
30
- return;
31
- setTimeout(() => {
32
- const tableMode = isTextShown ? 'text' : 'default';
33
- const newMeasurements = new Map();
34
- iconRefs.current.forEach((ref, index) => {
35
- if (ref) {
36
- const width = ref.getBoundingClientRect().width;
37
- const existingMeasurement = iconMeasurements.get(index) || { default: 0, text: 0 };
38
- newMeasurements.set(index, Object.assign(Object.assign({}, existingMeasurement), { [tableMode]: width }));
39
- }
40
- });
41
- setIconMeasurements(new Map([...iconMeasurements, ...newMeasurements]));
42
- }, 50);
43
- }, [iconsList, isTextShown, isHovering, isSheetMode]);
44
- const hasPreviousIcon = (isReversed && iconsList.length > 1) || centerIconIndex > 0;
45
- const hasNextIcon = !isReversed && centerIconIndex < iconsList.length - 1;
46
- if (isSheetMode) {
47
- return (_jsx(TableCell, Object.assign({}, props, { "data-testid": "StatusCell", sx: {
48
- position: 'relative',
49
- overflow: 'visible',
50
- zIndex: 101,
51
- } }, { children: _jsx(SheetModeContainer, { children: iconsList === null || iconsList === void 0 ? void 0 : iconsList.map((icon, index) => (_jsx(SheetModeStatusWrapper, Object.assign({ "data-testid": `StatusWrapper-${icon.key}` }, { children: _jsx(SheetModeIconContainer, { children: icon.icon }) }), `StatusWrapper-${icon.key}-${index}`))) }) })));
52
- }
20
+ const iconsList = useMemo(() => icons.filter((icon) => Boolean(icon.icon)), [icons]);
21
+ const [isHovering, setIsHovering] = useState(false);
22
+ const centerIconIndex = Math.max(centerIconKey ? iconsList.findIndex((icon) => icon.key === centerIconKey) : 0, 0);
23
+ const iconRefs = useRef([]);
24
+ const [iconMeasurements, setIconMeasurements] = useState(new Map());
25
+ const isSheetMode = tableMode === 'sheet';
26
+ useEffect(() => {
27
+ if (isSheetMode)
28
+ return;
29
+ setTimeout(() => {
30
+ const tableMode = isTextShown ? 'text' : 'default';
31
+ const newMeasurements = new Map();
32
+ iconRefs.current.forEach((ref, index) => {
33
+ if (ref) {
34
+ const width = ref.getBoundingClientRect().width;
35
+ const existingMeasurement = iconMeasurements.get(index) || { default: 0, text: 0 };
36
+ newMeasurements.set(index, Object.assign(Object.assign({}, existingMeasurement), { [tableMode]: width }));
37
+ }
38
+ });
39
+ setIconMeasurements(new Map([...iconMeasurements, ...newMeasurements]));
40
+ }, 50);
41
+ }, [iconsList, isTextShown, isHovering, isSheetMode]);
42
+ const hasPreviousIcon = (isReversed && iconsList.length > 1) || centerIconIndex > 0;
43
+ const hasNextIcon = !isReversed && centerIconIndex < iconsList.length - 1;
44
+ if (isSheetMode) {
53
45
  return (_jsx(TableCell, Object.assign({}, props, { "data-testid": "StatusCell", sx: {
54
46
  position: 'relative',
55
47
  overflow: 'visible',
56
48
  zIndex: 101,
57
- } }, { children: _jsx(StatusContainer, Object.assign({ animate: isHovering ? 'hover' : 'initial', onMouseEnter: () => setIsHovering(true), onMouseLeave: () => setIsHovering(false), initial: "initial", sx: {
58
- minHeight: '20px',
59
- maxWidth: '55px',
60
- }, isReversed: isReversed }, { children: _jsxs(_Fragment, { children: [_jsx(CollapsedViewIcon, { hasPreviousIcon: hasPreviousIcon, hasNextIcon: hasNextIcon, isTextShown: isTextShown, collapsedViewIcon: collapsedViewIcon, sx: props.sx }, 'collapsedViewIcon'), iconsList === null || iconsList === void 0 ? void 0 : iconsList.map((icon, index) => {
61
- if (!icon)
62
- return;
63
- const tableMode = isTextShown ? 'text' : 'default';
64
- const xHoverPosition = getIconXTranslation({
65
- iconsList: iconsList.map((iconObj, i) => {
66
- const measurements = iconMeasurements.get(i);
67
- return Object.assign(Object.assign({}, iconObj), { width: {
68
- default: (measurements === null || measurements === void 0 ? void 0 : measurements.default) || 0,
69
- text: (measurements === null || measurements === void 0 ? void 0 : measurements.text) || 0,
70
- } });
71
- }),
72
- tableMode: tableMode,
73
- centerIndex: centerIconIndex,
74
- iconIndex: index,
75
- });
76
- return (_jsx(StatusWrapper, Object.assign({ ref: (el) => (iconRefs.current[index] = el), "data-testid": `StatusWrapper-${icon.key}`, variants: {
49
+ } }, { children: _jsx(SheetModeContainer, { children: iconsList === null || iconsList === void 0 ? void 0 : iconsList.map((icon, index) => (_jsx(SheetModeStatusWrapper, Object.assign({ "data-testid": `StatusWrapper-${icon.key}` }, { children: _jsx(SheetModeIconContainer, { children: icon.icon }) }), `StatusWrapper-${icon.key}-${index}`))) }) })));
50
+ }
51
+ return (_jsx(TableCell, Object.assign({}, props, { "data-testid": "StatusCell", sx: {
52
+ position: 'relative',
53
+ overflow: 'visible',
54
+ zIndex: 101,
55
+ } }, { children: _jsx(StatusContainer, Object.assign({ animate: isHovering ? 'hover' : 'initial', onMouseEnter: () => setIsHovering(true), onMouseLeave: () => setIsHovering(false), initial: "initial", sx: {
56
+ minHeight: '20px',
57
+ maxWidth: '55px',
58
+ }, isReversed: isReversed }, { children: _jsxs(_Fragment, { children: [_jsx(CollapsedViewIcon, { hasPreviousIcon: hasPreviousIcon, hasNextIcon: hasNextIcon, isTextShown: isTextShown, collapsedViewIcon: collapsedViewIcon, sx: props.sx }, 'collapsedViewIcon'), iconsList === null || iconsList === void 0 ? void 0 : iconsList.map((icon, index) => {
59
+ if (!icon)
60
+ return;
61
+ const tableMode = isTextShown ? 'text' : 'default';
62
+ const xHoverPosition = getIconXTranslation({
63
+ iconsList: iconsList.map((iconObj, i) => {
64
+ const measurements = iconMeasurements.get(i);
65
+ return Object.assign(Object.assign({}, iconObj), { width: {
66
+ default: (measurements === null || measurements === void 0 ? void 0 : measurements.default) || 0,
67
+ text: (measurements === null || measurements === void 0 ? void 0 : measurements.text) || 0,
68
+ } });
69
+ }),
70
+ tableMode: tableMode,
71
+ centerIndex: centerIconIndex,
72
+ iconIndex: index,
73
+ });
74
+ return (_jsx(StatusWrapper, Object.assign({ ref: (el) => (iconRefs.current[index] = el), "data-testid": `StatusWrapper-${icon.key}`, variants: {
75
+ initial: {
76
+ x: 0,
77
+ opacity: 0,
78
+ },
79
+ hover: {
80
+ x: isReversed ? -xHoverPosition : xHoverPosition,
81
+ zIndex: 100 - Math.abs(centerIconIndex - index),
82
+ opacity: 1,
83
+ },
84
+ }, transition: {
85
+ default: { duration: 0.3, ease: 'easeInOut' },
86
+ opacity: { duration: 0.0, ease: 'linear' },
87
+ } }, { children: _jsx(StatusIcon, Object.assign({ isTextShown: isTextShown, variants: {
77
88
  initial: {
78
- x: 0,
79
89
  opacity: 0,
80
90
  },
81
91
  hover: {
82
- x: isReversed ? -xHoverPosition : xHoverPosition,
83
- zIndex: 100 - Math.abs(centerIconIndex - index),
84
92
  opacity: 1,
85
93
  },
86
94
  }, transition: {
87
- default: { duration: 0.3, ease: 'easeInOut' },
88
95
  opacity: { duration: 0.0, ease: 'linear' },
89
- } }, { children: _jsx(StatusIcon, Object.assign({ isTextShown: isTextShown, variants: {
90
- initial: {
91
- opacity: 0,
92
- },
93
- hover: {
94
- opacity: 1,
95
- },
96
- }, transition: {
97
- opacity: { duration: 0.0, ease: 'linear' },
98
- } }, { children: icon.icon })) }), `StatusWrapper-${icon.key}-${index}`));
99
- })] }) })) })));
100
- }
96
+ } }, { children: icon.icon })) }), `StatusWrapper-${icon.key}-${index}`));
97
+ })] }) })) })));
101
98
  }
102
99
  export default SourceMergedCell;
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.0.141",
4
+ "version": "0.0.142",
5
5
  "type": "module",
6
6
  "main": "build/index.js",
7
7
  "module": "build/index.js",