@tap-payments/os-micro-frontend-shared 0.1.62 → 0.1.63-test.3

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.
@@ -44,9 +44,7 @@ function SheetViewTableHeaderCell({ column: { header, id, align, headerStyle, so
44
44
  right: 0,
45
45
  left: 0,
46
46
  bottom: 0,
47
- } }, headerStyle)) }, { children: _jsxs(TableHeaderInner, Object.assign({ onClick: handleHeaderInnerClick }, { children: [typeof header === 'function' ? (header()) : (_jsx(Box, Object.assign({ "data-testid": "SheetViewTableHeader_columns_header", sx: { maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, { children: header && _jsx(HeaderText, Object.assign({ "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell_header_text" }, { children: header })) }))), filter && (_jsx(ColumnFilter, Object.assign({}, filter, { anchorEl: columnFilterEl, setAnchorEl: setColumnFilterEl, onClose: (event) => {
48
- onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(colIndex, event, pinned);
49
- } }))), sortable && (_jsx(ColumnSort, { columnId: id, onColumnSort: onColumnSort, columnsSorting: columnsSorting, onClick: (e) => {
47
+ } }, headerStyle)) }, { children: _jsxs(TableHeaderInner, Object.assign({ onClick: handleHeaderInnerClick }, { children: [typeof header === 'function' ? (header()) : (_jsx(Box, Object.assign({ "data-testid": "SheetViewTableHeader_columns_header", sx: { maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, { children: header && _jsx(HeaderText, Object.assign({ "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell_header_text" }, { children: header })) }))), filter && _jsx(ColumnFilter, Object.assign({}, filter, { anchorEl: columnFilterEl, setAnchorEl: setColumnFilterEl })), sortable && (_jsx(ColumnSort, { columnId: id, onColumnSort: onColumnSort, columnsSorting: columnsSorting, onClick: (e) => {
50
48
  onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(colIndex, e, pinned);
51
49
  } })), isPinnable && pinnable && !isDefaultPinned && !isLast && (_jsx(PinIconContainer, Object.assign({ onClick: (event) => {
52
50
  event.stopPropagation();
@@ -1,26 +1,43 @@
1
- import { useRef, useCallback } from 'react';
1
+ import { useRef, useCallback, useEffect } from 'react';
2
2
  export const useSynchronizedScroll = () => {
3
3
  const pinnedStartVirtualListRef = useRef(null);
4
4
  const scrollableVirtualListRef = useRef(null);
5
5
  const pinnedEndVirtualListRef = useRef(null);
6
6
  const isScrollingSyncRef = useRef(false);
7
+ const lastScrollOffsetRef = useRef(0);
8
+ const syncTimeoutRef = useRef(null);
9
+ const clearSyncTimeout = useCallback(() => {
10
+ if (syncTimeoutRef.current) {
11
+ clearTimeout(syncTimeoutRef.current);
12
+ syncTimeoutRef.current = null;
13
+ }
14
+ }, []);
15
+ useEffect(() => {
16
+ return () => {
17
+ clearSyncTimeout();
18
+ };
19
+ }, [clearSyncTimeout]);
7
20
  const handleScroll = useCallback(({ scrollOffset }, source) => {
8
21
  if (isScrollingSyncRef.current)
9
22
  return;
23
+ clearSyncTimeout();
24
+ lastScrollOffsetRef.current = scrollOffset;
10
25
  isScrollingSyncRef.current = true;
11
- if (source !== 'start' && pinnedStartVirtualListRef.current) {
12
- pinnedStartVirtualListRef.current.scrollTo(scrollOffset);
13
- }
14
- if (source !== 'end' && pinnedEndVirtualListRef.current) {
15
- pinnedEndVirtualListRef.current.scrollTo(scrollOffset);
16
- }
17
- if (source !== 'scrollable' && scrollableVirtualListRef.current) {
18
- scrollableVirtualListRef.current.scrollTo(scrollOffset);
19
- }
20
- requestAnimationFrame(() => {
21
- isScrollingSyncRef.current = false;
22
- });
23
- }, []);
26
+ syncTimeoutRef.current = setTimeout(() => {
27
+ if (source !== 'start' && pinnedStartVirtualListRef.current) {
28
+ pinnedStartVirtualListRef.current.scrollTo(scrollOffset);
29
+ }
30
+ if (source !== 'end' && pinnedEndVirtualListRef.current) {
31
+ pinnedEndVirtualListRef.current.scrollTo(scrollOffset);
32
+ }
33
+ if (source !== 'scrollable' && scrollableVirtualListRef.current) {
34
+ scrollableVirtualListRef.current.scrollTo(scrollOffset);
35
+ }
36
+ requestAnimationFrame(() => {
37
+ isScrollingSyncRef.current = false;
38
+ });
39
+ }, 0);
40
+ }, [clearSyncTimeout]);
24
41
  return {
25
42
  pinnedStartVirtualListRef,
26
43
  scrollableVirtualListRef,
@@ -25,13 +25,16 @@ const VirtualScrollList = React.forwardRef((_a, ref) => {
25
25
  const renderedScrollTopRef = useRef(0);
26
26
  const scrollTopRef = useRef(undefined);
27
27
  const scrollLocked = useRef(false);
28
+ const isExternalScroll = useRef(false);
28
29
  const internalListRef = useRef(null);
29
30
  const listRef = ref || externalListRef || internalListRef;
30
31
  const scrollTo = useCallback(() => {
31
32
  var _a, _b;
32
33
  clearTimer();
33
34
  if (scrollTopRef.current !== undefined && listRef.current) {
34
- scrollLocked.current = false;
35
+ if (!isExternalScroll.current) {
36
+ scrollLocked.current = false;
37
+ }
35
38
  renderedScrollTopRef.current = scrollTopRef.current;
36
39
  scrollTopRef.current = undefined;
37
40
  handleBackDropVisibility();
@@ -45,6 +48,7 @@ const VirtualScrollList = React.forwardRef((_a, ref) => {
45
48
  scrollTopRef.current = event.currentTarget.scrollTop;
46
49
  if (!scrollLocked.current) {
47
50
  scrollLocked.current = true;
51
+ isExternalScroll.current = false;
48
52
  scrollTo();
49
53
  }
50
54
  }, [scrollTo]);
@@ -57,7 +61,22 @@ const VirtualScrollList = React.forwardRef((_a, ref) => {
57
61
  const itemDataInternal = React.useMemo(() => (Object.assign(Object.assign({}, itemData), { renderedScrollTopRef })), [itemData]);
58
62
  const handleOnScroll = React.useCallback((props) => {
59
63
  onScroll === null || onScroll === void 0 ? void 0 : onScroll(props);
60
- scrollLocked.current = scrollTo();
64
+ const isExternal = onScroll !== undefined;
65
+ if (isExternal) {
66
+ isExternalScroll.current = true;
67
+ }
68
+ requestAnimationFrame(() => {
69
+ if (!isExternalScroll.current || scrollTopRef.current !== undefined) {
70
+ if (scrollTo()) {
71
+ if (isExternal) {
72
+ setTimeout(() => {
73
+ isExternalScroll.current = false;
74
+ scrollLocked.current = false;
75
+ }, 16);
76
+ }
77
+ }
78
+ }
79
+ });
61
80
  }, [scrollTo, onScroll]);
62
81
  return (_jsx(VirtualScrollOuterProvider, Object.assign({ value: handleScroll }, { children: _jsx(VariableSizeList, Object.assign({ ref: listRef, "data-testid": "VirtualScrollList", itemData: itemDataInternal, outerElementType: VirtualScrollOuter, innerElementType: VirtualScrollInner }, restProps, { onScroll: handleOnScroll }, { children: children })) })));
63
82
  });
@@ -27,7 +27,7 @@ export declare const chargeTableCellWidth: {
27
27
  readonly reference: {
28
28
  readonly default: "95px";
29
29
  readonly text: "180px";
30
- readonly sheet: "985px";
30
+ readonly sheet: "250px";
31
31
  };
32
32
  readonly order: {
33
33
  readonly default: "80px";
@@ -27,7 +27,7 @@ export const chargeTableCellWidth = {
27
27
  reference: {
28
28
  default: '95px',
29
29
  text: '180px',
30
- sheet: '985px',
30
+ sheet: '250px',
31
31
  },
32
32
  order: {
33
33
  default: '80px',
package/package.json CHANGED
@@ -1,135 +1,135 @@
1
- {
2
- "name": "@tap-payments/os-micro-frontend-shared",
3
- "description": "Shared components and utilities for Tap Payments micro frontends",
4
- "version": "0.1.62",
5
- "testVersion": 2,
6
- "type": "module",
7
- "main": "build/index.js",
8
- "module": "build/index.js",
9
- "types": "build/index.d.ts",
10
- "exports": {
11
- ".": {
12
- "types": "./build/index.d.ts",
13
- "import": "./build/index.js",
14
- "require": "./build/index.js"
15
- },
16
- "./constants": {
17
- "types": "./build/constants/index.d.ts",
18
- "import": "./build/constants/index.js",
19
- "require": "./build/constants/index.js"
20
- },
21
- "./components": {
22
- "types": "./build/components/index.d.ts",
23
- "import": "./build/components/index.js",
24
- "require": "./build/components/index.js"
25
- },
26
- "./components/*": {
27
- "types": "./build/components/*/index.d.ts",
28
- "import": "./build/components/*/index.js",
29
- "require": "./build/components/*/index.js"
30
- },
31
- "./hooks": {
32
- "types": "./build/hooks/index.d.ts",
33
- "import": "./build/hooks/index.js",
34
- "require": "./build/hooks/index.js"
35
- },
36
- "./utils": {
37
- "types": "./build/utils/index.d.ts",
38
- "import": "./build/utils/index.js",
39
- "require": "./build/utils/index.js"
40
- },
41
- "./theme": {
42
- "types": "./build/theme/index.d.ts",
43
- "import": "./build/theme/index.js",
44
- "require": "./build/theme/index.js"
45
- },
46
- "./types": {
47
- "types": "./build/types/index.d.ts",
48
- "import": "./build/types/index.js",
49
- "require": "./build/types/index.js"
50
- }
51
- },
52
- "license": "MIT",
53
- "author": {
54
- "name": "Ahmed Sharkawy",
55
- "email": "a.elsharkawy@tap.company"
56
- },
57
- "files": [
58
- "build",
59
- "readme.md"
60
- ],
61
- "scripts": {
62
- "ts:build": "rm -rf build && tsc -p tsconfig.npm.json && tsc-alias -p tsconfig.npm.json",
63
- "push:local": "yarn ts:build && yalc publish --push",
64
- "push": "npm run ts:build && npm publish --access public",
65
- "push:test": "node scripts/increment-test-version.cjs && npm run ts:build && npm publish --access public --tag test && node scripts/restore-version.cjs",
66
- "dev": "vite",
67
- "build": "tsc -b && vite build ",
68
- "prettier": "prettier --list-different \"src/**/*.{md,mdx,ts,js,tsx,jsx,json}\"",
69
- "prettier:fix": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,md,css,json}\"",
70
- "lint": "eslint . --color",
71
- "lint:fix": "eslint src --fix --color",
72
- "preview": "vite preview",
73
- "prepare": "husky"
74
- },
75
- "dependencies": {
76
- "@emotion/react": "^11.11.0",
77
- "@emotion/styled": "^11.11.0",
78
- "@hookform/resolvers": "^3.3.1",
79
- "@mui/material": "^5.12.3",
80
- "@uiw/react-json-view": "^2.0.0-alpha.16",
81
- "axios": "^1.4.0",
82
- "dayjs": "^1.11.8",
83
- "framer-motion": "10.11.0",
84
- "i18next": "^22.4.15",
85
- "memoize-one": "^6.0.0",
86
- "re-resizable": "^6.9.9",
87
- "react": "^18.2.0",
88
- "react-currency-input-field": "^3.6.11",
89
- "react-dom": "^18.2.0",
90
- "react-draggable": "^4.4.6",
91
- "react-dropzone": "^14.2.3",
92
- "react-hook-form": "^7.45.4",
93
- "react-hot-toast": "^2.4.1",
94
- "react-i18next": "^12.2.2",
95
- "react-multi-date-picker": "^4.1.2",
96
- "react-router-dom": "^7.7.0",
97
- "react-virtualized-auto-sizer": "^1.0.20",
98
- "react-window": "^1.8.9",
99
- "react-window-infinite-loader": "^1.0.9",
100
- "react18-input-otp": "^1.1.4",
101
- "recharts": "^2.15.1"
102
- },
103
- "devDependencies": {
104
- "@eslint/js": "^9.17.0",
105
- "@testing-library/jest-dom": "^5.16.5",
106
- "@types/lodash": "^4.17.15",
107
- "@types/react": "^18.2.6",
108
- "@types/react-dom": "^18.3.5",
109
- "@types/react-virtualized-auto-sizer": "^1.0.8",
110
- "@types/react-window": "^1.8.5",
111
- "@types/react-window-infinite-loader": "^1.0.6",
112
- "@vitejs/plugin-react": "^4.3.4",
113
- "eslint": "^9.17.0",
114
- "eslint-plugin-react-hooks": "^5.0.0",
115
- "eslint-plugin-react-refresh": "^0.4.16",
116
- "globals": "^15.14.0",
117
- "husky": "^8.0.3",
118
- "lint-staged": "^13.2.2",
119
- "prettier": "^2.8.8",
120
- "tsc-alias": "^1.8.16",
121
- "typescript": "5.0.2",
122
- "typescript-eslint": "^8.18.2",
123
- "vite": "6.0.5",
124
- "vite-tsconfig-paths": "^4.2.0"
125
- },
126
- "lint-staged": {
127
- "src/**/*.{ts,tsx,json,js,jsx}": [
128
- "yarn run prettier:fix",
129
- "yarn run lint"
130
- ]
131
- },
132
- "publishConfig": {
133
- "registry": "https://registry.npmjs.org/"
134
- }
135
- }
1
+ {
2
+ "name": "@tap-payments/os-micro-frontend-shared",
3
+ "description": "Shared components and utilities for Tap Payments micro frontends",
4
+ "version": "0.1.63-test.3",
5
+ "testVersion": 3,
6
+ "type": "module",
7
+ "main": "build/index.js",
8
+ "module": "build/index.js",
9
+ "types": "build/index.d.ts",
10
+ "exports": {
11
+ ".": {
12
+ "types": "./build/index.d.ts",
13
+ "import": "./build/index.js",
14
+ "require": "./build/index.js"
15
+ },
16
+ "./constants": {
17
+ "types": "./build/constants/index.d.ts",
18
+ "import": "./build/constants/index.js",
19
+ "require": "./build/constants/index.js"
20
+ },
21
+ "./components": {
22
+ "types": "./build/components/index.d.ts",
23
+ "import": "./build/components/index.js",
24
+ "require": "./build/components/index.js"
25
+ },
26
+ "./components/*": {
27
+ "types": "./build/components/*/index.d.ts",
28
+ "import": "./build/components/*/index.js",
29
+ "require": "./build/components/*/index.js"
30
+ },
31
+ "./hooks": {
32
+ "types": "./build/hooks/index.d.ts",
33
+ "import": "./build/hooks/index.js",
34
+ "require": "./build/hooks/index.js"
35
+ },
36
+ "./utils": {
37
+ "types": "./build/utils/index.d.ts",
38
+ "import": "./build/utils/index.js",
39
+ "require": "./build/utils/index.js"
40
+ },
41
+ "./theme": {
42
+ "types": "./build/theme/index.d.ts",
43
+ "import": "./build/theme/index.js",
44
+ "require": "./build/theme/index.js"
45
+ },
46
+ "./types": {
47
+ "types": "./build/types/index.d.ts",
48
+ "import": "./build/types/index.js",
49
+ "require": "./build/types/index.js"
50
+ }
51
+ },
52
+ "license": "MIT",
53
+ "author": {
54
+ "name": "Ahmed Sharkawy",
55
+ "email": "a.elsharkawy@tap.company"
56
+ },
57
+ "files": [
58
+ "build",
59
+ "readme.md"
60
+ ],
61
+ "scripts": {
62
+ "ts:build": "rm -rf build && tsc -p tsconfig.npm.json && tsc-alias -p tsconfig.npm.json",
63
+ "push:local": "yarn ts:build && yalc publish --push",
64
+ "push": "npm run ts:build && npm publish --access public",
65
+ "push:test": "node scripts/increment-test-version.cjs && npm run ts:build && npm publish --access public --tag test && node scripts/restore-version.cjs",
66
+ "dev": "vite",
67
+ "build": "tsc -b && vite build ",
68
+ "prettier": "prettier --list-different \"src/**/*.{md,mdx,ts,js,tsx,jsx,json}\"",
69
+ "prettier:fix": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,md,css,json}\"",
70
+ "lint": "eslint . --color",
71
+ "lint:fix": "eslint src --fix --color",
72
+ "preview": "vite preview",
73
+ "prepare": "husky"
74
+ },
75
+ "dependencies": {
76
+ "@emotion/react": "^11.11.0",
77
+ "@emotion/styled": "^11.11.0",
78
+ "@hookform/resolvers": "^3.3.1",
79
+ "@mui/material": "^5.12.3",
80
+ "@uiw/react-json-view": "^2.0.0-alpha.16",
81
+ "axios": "^1.4.0",
82
+ "dayjs": "^1.11.8",
83
+ "framer-motion": "10.11.0",
84
+ "i18next": "^22.4.15",
85
+ "memoize-one": "^6.0.0",
86
+ "re-resizable": "^6.9.9",
87
+ "react": "^18.2.0",
88
+ "react-currency-input-field": "^3.6.11",
89
+ "react-dom": "^18.2.0",
90
+ "react-draggable": "^4.4.6",
91
+ "react-dropzone": "^14.2.3",
92
+ "react-hook-form": "^7.45.4",
93
+ "react-hot-toast": "^2.4.1",
94
+ "react-i18next": "^12.2.2",
95
+ "react-multi-date-picker": "^4.1.2",
96
+ "react-router-dom": "^7.7.0",
97
+ "react-virtualized-auto-sizer": "^1.0.20",
98
+ "react-window": "^1.8.9",
99
+ "react-window-infinite-loader": "^1.0.9",
100
+ "react18-input-otp": "^1.1.4",
101
+ "recharts": "^2.15.1"
102
+ },
103
+ "devDependencies": {
104
+ "@eslint/js": "^9.17.0",
105
+ "@testing-library/jest-dom": "^5.16.5",
106
+ "@types/lodash": "^4.17.15",
107
+ "@types/react": "^18.2.6",
108
+ "@types/react-dom": "^18.3.5",
109
+ "@types/react-virtualized-auto-sizer": "^1.0.8",
110
+ "@types/react-window": "^1.8.5",
111
+ "@types/react-window-infinite-loader": "^1.0.6",
112
+ "@vitejs/plugin-react": "^4.3.4",
113
+ "eslint": "^9.17.0",
114
+ "eslint-plugin-react-hooks": "^5.0.0",
115
+ "eslint-plugin-react-refresh": "^0.4.16",
116
+ "globals": "^15.14.0",
117
+ "husky": "^8.0.3",
118
+ "lint-staged": "^13.2.2",
119
+ "prettier": "^2.8.8",
120
+ "tsc-alias": "^1.8.16",
121
+ "typescript": "5.0.2",
122
+ "typescript-eslint": "^8.18.2",
123
+ "vite": "6.0.5",
124
+ "vite-tsconfig-paths": "^4.2.0"
125
+ },
126
+ "lint-staged": {
127
+ "src/**/*.{ts,tsx,json,js,jsx}": [
128
+ "yarn run prettier:fix",
129
+ "yarn run lint"
130
+ ]
131
+ },
132
+ "publishConfig": {
133
+ "registry": "https://registry.npmjs.org/"
134
+ }
135
+ }