@mindlogic-ai/logician-ui 4.0.0-alpha.19 → 4.0.0-alpha.21
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.
- package/dist/components/FileList/FileList.d.ts.map +1 -1
- package/dist/components/FileList/FileList.js +2 -0
- package/dist/components/FileList/FileList.js.map +1 -1
- package/dist/components/FileList/FileList.mjs +2 -0
- package/dist/components/FileList/FileList.mjs.map +1 -1
- package/dist/components/Table/TableContext.d.ts +8 -0
- package/dist/components/Table/TableContext.d.ts.map +1 -1
- package/dist/components/Table/TableContext.js +52 -7
- package/dist/components/Table/TableContext.js.map +1 -1
- package/dist/components/Table/TableContext.mjs +53 -8
- package/dist/components/Table/TableContext.mjs.map +1 -1
- package/dist/components/Table/Td.d.ts.map +1 -1
- package/dist/components/Table/Td.js +3 -1
- package/dist/components/Table/Td.js.map +1 -1
- package/dist/components/Table/Td.mjs +3 -1
- package/dist/components/Table/Td.mjs.map +1 -1
- package/dist/components/Table/Th.d.ts.map +1 -1
- package/dist/components/Table/Th.js +3 -1
- package/dist/components/Table/Th.js.map +1 -1
- package/dist/components/Table/Th.mjs +3 -1
- package/dist/components/Table/Th.mjs.map +1 -1
- package/dist/components/Table/useRegisterStickyWidth.d.ts +34 -11
- package/dist/components/Table/useRegisterStickyWidth.d.ts.map +1 -1
- package/dist/components/Table/useRegisterStickyWidth.js +29 -12
- package/dist/components/Table/useRegisterStickyWidth.js.map +1 -1
- package/dist/components/Table/useRegisterStickyWidth.mjs +29 -12
- package/dist/components/Table/useRegisterStickyWidth.mjs.map +1 -1
- package/package.json +1 -1
- package/src/components/FileList/FileList.tsx +2 -0
- package/src/components/Table/TableContext.tsx +71 -11
- package/src/components/Table/Td.tsx +3 -0
- package/src/components/Table/Th.tsx +3 -0
- package/src/components/Table/contextStability.test.tsx +140 -0
- package/src/components/Table/stickyWidth.test.tsx +138 -0
- package/src/components/Table/useRegisterStickyWidth.ts +50 -12
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileList.d.ts","sourceRoot":"","sources":["../../../src/components/FileList/FileList.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAKtE,eAAO,MAAM,QAAQ;6DAKlB,cAAc;;
|
|
1
|
+
{"version":3,"file":"FileList.d.ts","sourceRoot":"","sources":["../../../src/components/FileList/FileList.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAKtE,eAAO,MAAM,QAAQ;6DAKlB,cAAc;;CAyFhB,CAAC"}
|
|
@@ -49,6 +49,8 @@ const FileList = ({ files, onFileDelete, onFileDownload, visibleCount = 3, }) =>
|
|
|
49
49
|
: undefined, border: 0, borderBottom: "1px solid", borderBottomColor: "border.subtle", progress: file.progress, error: file.error, fileSize: file.size, isDeleting: deletingFileIds.has(file.id) }) }, file.id))) }), shouldShowLoadMoreButton && (jsxRuntime.jsxs(react.Button, { onClick: handleFileLoadMore, alignSelf: "stretch", w: "100%", variant: "ghost", display: "flex", gap: 1, css: {
|
|
50
50
|
all: 'unset',
|
|
51
51
|
display: 'flex',
|
|
52
|
+
width: '100%',
|
|
53
|
+
justifyContent: 'center',
|
|
52
54
|
gap: '0.25rem',
|
|
53
55
|
cursor: 'pointer',
|
|
54
56
|
}, children: [jsxRuntime.jsxs(Subtitle.Subtitle, { color: "fg.subtle", children: [translate('see_more'), " (", visibleCount, "/", files.length, ")"] }), jsxRuntime.jsx(index.ChevronDownIcon, { color: "fg.subtle" })] }))] }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileList.js","sources":["../../../src/components/FileList/FileList.tsx"],"sourcesContent":[null],"names":["useState","useTranslate","_jsxs","Box","_jsx","List","FileItem","Button","Subtitle","ChevronDownIcon"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"FileList.js","sources":["../../../src/components/FileList/FileList.tsx"],"sourcesContent":[null],"names":["useState","useTranslate","_jsxs","Box","_jsx","List","FileItem","Button","Subtitle","ChevronDownIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;AASO,MAAM,QAAQ,GAAG,CAAC,EACvB,KAAK,EACL,YAAY,EACZ,cAAc,EACd,YAAY,GAAG,CAAC,GACD,KAAI;AACnB,IAAA,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAGA,cAAQ,CAC5D,YAAY,IAAI,CAAC,CAClB;AACD,IAAA,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAGA,cAAQ,CACpD,IAAI,GAAG,EAAE,CACV;AACD,IAAA,MAAM,SAAS,GAAGC,yBAAY,EAAE;IAChC,MAAM,wBAAwB,GAAG,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,mBAAmB;IAE5E,MAAM,kBAAkB,GAAG,MAAK;QAC9B,sBAAsB,CAAC,CAAC,IAAI,KAAK,IAAI,GAAG,CAAC,CAAC;AAC5C,IAAA,CAAC;AAED,IAAA,MAAM,gBAAgB,GAAG,OAAO,IAAgC,KAAI;QAClE,IAAI,CAAC,YAAY,IAAI,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC;YAAE;AAEnD,QAAA,kBAAkB,CAAC,CAAC,IAAI,KAAK,IAAI,GAAG,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAExD,QAAA,IAAI;AACF,YAAA,MAAM,YAAY,CAAC,IAAI,CAAC;QAC1B;gBAAU;AACR,YAAA,kBAAkB,CAAC,CAAC,IAAI,KAAI;AAC1B,gBAAA,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC;AAC5B,gBAAA,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC;AACtB,gBAAA,OAAO,MAAM;AACf,YAAA,CAAC,CAAC;QACJ;AACF,IAAA,CAAC;AAED,IAAA,IAAI,KAAK,EAAE,MAAM,IAAI,CAAC;AAAE,QAAA,OAAO,IAAI;AAEnC,IAAA,QACEC,eAAA,CAACC,SAAG,IACF,CAAC,EAAC,MAAM,EACR,MAAM,EAAC,WAAW,EAClB,WAAW,EAAC,eAAe,EAC3B,YAAY,EAAC,IAAI,EACjB,QAAQ,EAAC,QAAQ,aAEjBC,cAAA,CAACC,UAAI,CAAC,IAAI,EAAA,EAAA,QAAA,EACP,KAAK,EAAE,KAAK,CAAC,CAAC,EAAE,mBAAmB,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,MAC7CD,eAACC,UAAI,CAAC,IAAI,EAAA,EAAe,SAAS,EAAC,MAAM,EAAA,QAAA,EACvCD,eAACE,iBAAQ,EAAA,EACP,QAAQ,EAAE,IAAI,CAAC,IAAI,EACnB,YAAY,EACV,YAAY,GAAG,MAAM,gBAAgB,CAAC,IAAI,CAAC,GAAG,SAAS,EAEzD,cAAc,EACZ,cAAc,IAAI,IAAI,CAAC;8BACnB,MAAM,cAAc,GAAG,IAAI;AAC7B,8BAAE,SAAS,EAEf,MAAM,EAAE,CAAC,EACT,YAAY,EAAC,WAAW,EACxB,iBAAiB,EAAC,eAAe,EACjC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,IAAI,EACnB,UAAU,EAAE,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,EAAA,CACxC,IAlBY,IAAI,CAAC,EAAE,CAmBX,CACb,CAAC,EAAA,CACQ,EACX,wBAAwB,KACvBJ,eAAA,CAACK,YAAM,IACL,OAAO,EAAE,kBAAkB,EAC3B,SAAS,EAAC,SAAS,EACnB,CAAC,EAAC,MAAM,EACR,OAAO,EAAC,OAAO,EACf,OAAO,EAAC,MAAM,EACd,GAAG,EAAE,CAAC,EACN,GAAG,EAAE;AACH,oBAAA,GAAG,EAAE,OAAO;AACZ,oBAAA,OAAO,EAAE,MAAM;AACf,oBAAA,KAAK,EAAE,MAAM;AACb,oBAAA,cAAc,EAAE,QAAQ;AACxB,oBAAA,GAAG,EAAE,SAAS;AACd,oBAAA,MAAM,EAAE,SAAS;AAClB,iBAAA,EAAA,QAAA,EAAA,CAEDL,eAAA,CAACM,iBAAQ,EAAA,EAAC,KAAK,EAAC,WAAW,EAAA,QAAA,EAAA,CACxB,SAAS,CAAC,UAAU,CAAC,EAAA,IAAA,EAAI,YAAY,EAAA,GAAA,EAAG,KAAK,CAAC,MAAM,EAAA,GAAA,CAAA,EAAA,CAC5C,EACXJ,cAAA,CAACK,qBAAe,EAAA,EAAC,KAAK,EAAC,WAAW,EAAA,CAAG,CAAA,EAAA,CAC9B,CACV,CAAA,EAAA,CACG;AAEV;AAEA,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
|
|
@@ -47,6 +47,8 @@ const FileList = ({ files, onFileDelete, onFileDownload, visibleCount = 3, }) =>
|
|
|
47
47
|
: undefined, border: 0, borderBottom: "1px solid", borderBottomColor: "border.subtle", progress: file.progress, error: file.error, fileSize: file.size, isDeleting: deletingFileIds.has(file.id) }) }, file.id))) }), shouldShowLoadMoreButton && (jsxs(Button, { onClick: handleFileLoadMore, alignSelf: "stretch", w: "100%", variant: "ghost", display: "flex", gap: 1, css: {
|
|
48
48
|
all: 'unset',
|
|
49
49
|
display: 'flex',
|
|
50
|
+
width: '100%',
|
|
51
|
+
justifyContent: 'center',
|
|
50
52
|
gap: '0.25rem',
|
|
51
53
|
cursor: 'pointer',
|
|
52
54
|
}, children: [jsxs(Subtitle, { color: "fg.subtle", children: [translate('see_more'), " (", visibleCount, "/", files.length, ")"] }), jsx(ChevronDownIcon, { color: "fg.subtle" })] }))] }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileList.mjs","sources":["../../../src/components/FileList/FileList.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"FileList.mjs","sources":["../../../src/components/FileList/FileList.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
@@ -7,6 +7,14 @@ export interface TableScrollState {
|
|
|
7
7
|
interface TableContextValue extends TableScrollState {
|
|
8
8
|
setContainerRef: (node: HTMLDivElement | null) => void;
|
|
9
9
|
registerStickyColumn: (direction: 'left' | 'right', index: number, width: number) => void;
|
|
10
|
+
/**
|
|
11
|
+
* Whether a width is already known for this sticky column.
|
|
12
|
+
*
|
|
13
|
+
* Reads a ref, not state, so a caller can ask without subscribing to width
|
|
14
|
+
* changes — body cells use it to skip measuring a column the header has
|
|
15
|
+
* already measured. See {@link useRegisterStickyWidth}.
|
|
16
|
+
*/
|
|
17
|
+
hasStickyWidth: (direction: 'left' | 'right', index: number) => boolean;
|
|
10
18
|
getStickyOffset: (direction: 'left' | 'right', index: number) => number;
|
|
11
19
|
isLastStickyColumn: (direction: 'left' | 'right', index: number) => boolean;
|
|
12
20
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableContext.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEZ,SAAS,
|
|
1
|
+
{"version":3,"file":"TableContext.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEZ,SAAS,EAOV,MAAM,OAAO,CAAC;AAEf,MAAM,WAAW,gBAAgB;IAC/B,aAAa,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;CACtB;AASD,UAAU,iBAAkB,SAAQ,gBAAgB;IAClD,eAAe,EAAE,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC;IACvD,oBAAoB,EAAE,CACpB,SAAS,EAAE,MAAM,GAAG,OAAO,EAC3B,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,KACV,IAAI,CAAC;IACV;;;;;;OAMG;IACH,cAAc,EAAE,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACxE,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxE,kBAAkB,EAAE,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;CAC7E;AAID,eAAO,MAAM,eAAe,yBAM3B,CAAC;AAEF,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAmMtD,CAAC"}
|
|
@@ -58,11 +58,29 @@ const TableProvider = ({ children }) => {
|
|
|
58
58
|
updateScrollState();
|
|
59
59
|
}
|
|
60
60
|
}, [updateScrollState]);
|
|
61
|
+
/*
|
|
62
|
+
* A ref mirror of the widths above, so `hasStickyWidth` can answer without
|
|
63
|
+
* making its caller a subscriber. Every body cell subscribing to width state
|
|
64
|
+
* would re-render the whole table on the first measurement of any column.
|
|
65
|
+
*/
|
|
66
|
+
const stickyColumnsRef = React.useRef({ left: {}, right: {} });
|
|
67
|
+
const hasStickyWidth = React.useCallback((direction, index) => stickyColumnsRef.current[direction][index] !== undefined, []);
|
|
61
68
|
// Register a sticky column with its (measured) width. Rounds to whole pixels
|
|
62
69
|
// and bails when unchanged so the ResizeObserver-driven callers can't
|
|
63
70
|
// ping-pong on sub-pixel differences and spin the render loop.
|
|
64
71
|
const registerStickyColumn = React.useCallback((direction, index, width) => {
|
|
65
72
|
const rounded = Math.round(width);
|
|
73
|
+
// The ref is written here rather than in an effect so `hasStickyWidth` is
|
|
74
|
+
// already true for the next cell that mounts in the same commit — without
|
|
75
|
+
// that, every cell of a column measures before the first state update
|
|
76
|
+
// lands, which is exactly the cost this is meant to avoid.
|
|
77
|
+
stickyColumnsRef.current = {
|
|
78
|
+
...stickyColumnsRef.current,
|
|
79
|
+
[direction]: {
|
|
80
|
+
...stickyColumnsRef.current[direction],
|
|
81
|
+
[index]: rounded,
|
|
82
|
+
},
|
|
83
|
+
};
|
|
66
84
|
setStickyColumns((prev) => {
|
|
67
85
|
const side = prev[direction];
|
|
68
86
|
if (side[index] === rounded)
|
|
@@ -113,13 +131,40 @@ const TableProvider = ({ children }) => {
|
|
|
113
131
|
window.removeEventListener('resize', handleResize);
|
|
114
132
|
};
|
|
115
133
|
}, [updateScrollState]);
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
134
|
+
/*
|
|
135
|
+
* Memoised, because an object literal here is a new value on *every* render of
|
|
136
|
+
* this provider, and a new context value re-renders every consumer —
|
|
137
|
+
* `Th`/`Td`/`Tr` all call `useTableContext()`. React propagates a context
|
|
138
|
+
* change into subtrees that `React.memo` has already bailed out of, so a
|
|
139
|
+
* memoised row does not stop it: the cells inside re-render anyway.
|
|
140
|
+
*
|
|
141
|
+
* In a virtualised table that is the dominant cost of scrolling. Measured on a
|
|
142
|
+
* consumer's 12,000-row admin table (production build): one scroll step that
|
|
143
|
+
* mounted a single new row re-rendered `Td` **794 times** — every cell of every
|
|
144
|
+
* rendered row, each one re-running Chakra's runtime style resolution. Wall
|
|
145
|
+
* time was ~1,050ms per step and did not depend on how many rows the step
|
|
146
|
+
* actually brought in (1.8 rows and 7.3 rows cost the same), which is the
|
|
147
|
+
* signature of a whole-table re-render rather than incremental work.
|
|
148
|
+
*
|
|
149
|
+
* With this memo the value changes only when `scrollState` or the registered
|
|
150
|
+
* sticky widths change, so a scroll that alters neither costs nothing.
|
|
151
|
+
*/
|
|
152
|
+
const value = React.useMemo(() => ({
|
|
153
|
+
...scrollState,
|
|
154
|
+
setContainerRef,
|
|
155
|
+
registerStickyColumn,
|
|
156
|
+
hasStickyWidth,
|
|
157
|
+
getStickyOffset,
|
|
158
|
+
isLastStickyColumn,
|
|
159
|
+
}), [
|
|
160
|
+
scrollState,
|
|
161
|
+
setContainerRef,
|
|
162
|
+
registerStickyColumn,
|
|
163
|
+
hasStickyWidth,
|
|
164
|
+
getStickyOffset,
|
|
165
|
+
isLastStickyColumn,
|
|
166
|
+
]);
|
|
167
|
+
return (jsxRuntime.jsx(TableContext.Provider, { value: value, children: children }));
|
|
123
168
|
};
|
|
124
169
|
|
|
125
170
|
exports.TableProvider = TableProvider;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableContext.js","sources":["../../../src/components/Table/TableContext.tsx"],"sourcesContent":[null],"names":["createContext","useContext","useRef","useState","useCallback","useEffect","_jsx"],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"file":"TableContext.js","sources":["../../../src/components/Table/TableContext.tsx"],"sourcesContent":[null],"names":["createContext","useContext","useRef","useState","useCallback","useEffect","useMemo","_jsx"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx } from 'react/jsx-runtime';
|
|
3
|
-
import { createContext, useContext, useRef, useState, useCallback, useEffect } from 'react';
|
|
3
|
+
import { createContext, useContext, useRef, useState, useCallback, useEffect, useMemo } from 'react';
|
|
4
4
|
|
|
5
5
|
const TableContext = createContext(null);
|
|
6
6
|
const useTableContext = () => {
|
|
@@ -56,11 +56,29 @@ const TableProvider = ({ children }) => {
|
|
|
56
56
|
updateScrollState();
|
|
57
57
|
}
|
|
58
58
|
}, [updateScrollState]);
|
|
59
|
+
/*
|
|
60
|
+
* A ref mirror of the widths above, so `hasStickyWidth` can answer without
|
|
61
|
+
* making its caller a subscriber. Every body cell subscribing to width state
|
|
62
|
+
* would re-render the whole table on the first measurement of any column.
|
|
63
|
+
*/
|
|
64
|
+
const stickyColumnsRef = useRef({ left: {}, right: {} });
|
|
65
|
+
const hasStickyWidth = useCallback((direction, index) => stickyColumnsRef.current[direction][index] !== undefined, []);
|
|
59
66
|
// Register a sticky column with its (measured) width. Rounds to whole pixels
|
|
60
67
|
// and bails when unchanged so the ResizeObserver-driven callers can't
|
|
61
68
|
// ping-pong on sub-pixel differences and spin the render loop.
|
|
62
69
|
const registerStickyColumn = useCallback((direction, index, width) => {
|
|
63
70
|
const rounded = Math.round(width);
|
|
71
|
+
// The ref is written here rather than in an effect so `hasStickyWidth` is
|
|
72
|
+
// already true for the next cell that mounts in the same commit — without
|
|
73
|
+
// that, every cell of a column measures before the first state update
|
|
74
|
+
// lands, which is exactly the cost this is meant to avoid.
|
|
75
|
+
stickyColumnsRef.current = {
|
|
76
|
+
...stickyColumnsRef.current,
|
|
77
|
+
[direction]: {
|
|
78
|
+
...stickyColumnsRef.current[direction],
|
|
79
|
+
[index]: rounded,
|
|
80
|
+
},
|
|
81
|
+
};
|
|
64
82
|
setStickyColumns((prev) => {
|
|
65
83
|
const side = prev[direction];
|
|
66
84
|
if (side[index] === rounded)
|
|
@@ -111,13 +129,40 @@ const TableProvider = ({ children }) => {
|
|
|
111
129
|
window.removeEventListener('resize', handleResize);
|
|
112
130
|
};
|
|
113
131
|
}, [updateScrollState]);
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
132
|
+
/*
|
|
133
|
+
* Memoised, because an object literal here is a new value on *every* render of
|
|
134
|
+
* this provider, and a new context value re-renders every consumer —
|
|
135
|
+
* `Th`/`Td`/`Tr` all call `useTableContext()`. React propagates a context
|
|
136
|
+
* change into subtrees that `React.memo` has already bailed out of, so a
|
|
137
|
+
* memoised row does not stop it: the cells inside re-render anyway.
|
|
138
|
+
*
|
|
139
|
+
* In a virtualised table that is the dominant cost of scrolling. Measured on a
|
|
140
|
+
* consumer's 12,000-row admin table (production build): one scroll step that
|
|
141
|
+
* mounted a single new row re-rendered `Td` **794 times** — every cell of every
|
|
142
|
+
* rendered row, each one re-running Chakra's runtime style resolution. Wall
|
|
143
|
+
* time was ~1,050ms per step and did not depend on how many rows the step
|
|
144
|
+
* actually brought in (1.8 rows and 7.3 rows cost the same), which is the
|
|
145
|
+
* signature of a whole-table re-render rather than incremental work.
|
|
146
|
+
*
|
|
147
|
+
* With this memo the value changes only when `scrollState` or the registered
|
|
148
|
+
* sticky widths change, so a scroll that alters neither costs nothing.
|
|
149
|
+
*/
|
|
150
|
+
const value = useMemo(() => ({
|
|
151
|
+
...scrollState,
|
|
152
|
+
setContainerRef,
|
|
153
|
+
registerStickyColumn,
|
|
154
|
+
hasStickyWidth,
|
|
155
|
+
getStickyOffset,
|
|
156
|
+
isLastStickyColumn,
|
|
157
|
+
}), [
|
|
158
|
+
scrollState,
|
|
159
|
+
setContainerRef,
|
|
160
|
+
registerStickyColumn,
|
|
161
|
+
hasStickyWidth,
|
|
162
|
+
getStickyOffset,
|
|
163
|
+
isLastStickyColumn,
|
|
164
|
+
]);
|
|
165
|
+
return (jsx(TableContext.Provider, { value: value, children: children }));
|
|
121
166
|
};
|
|
122
167
|
|
|
123
168
|
export { TableProvider, useTableContext };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableContext.mjs","sources":["../../../src/components/Table/TableContext.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;
|
|
1
|
+
{"version":3,"file":"TableContext.mjs","sources":["../../../src/components/Table/TableContext.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Td.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Td.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAI/C,eAAO,MAAM,EAAE;yIAaZ,cAAc,GAAG;QAAE,IAAI,CAAC,EAAE,OAAO,CAAA;KAAE;;
|
|
1
|
+
{"version":3,"file":"Td.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Td.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAI/C,eAAO,MAAM,EAAE;yIAaZ,cAAc,GAAG;QAAE,IAAI,CAAC,EAAE,OAAO,CAAA;KAAE;;CAyHrC,CAAC"}
|
|
@@ -53,7 +53,7 @@ const Td = ({ wrap, isSticky = false, stickyDirection = 'left', stickyIndex = 0,
|
|
|
53
53
|
...style,
|
|
54
54
|
}, ...htmlProps, children: children }));
|
|
55
55
|
}
|
|
56
|
-
const { registerStickyColumn, getStickyOffset, isLastStickyColumn, ...scrollState } = tableContext;
|
|
56
|
+
const { registerStickyColumn, hasStickyWidth, getStickyOffset, isLastStickyColumn, ...scrollState } = tableContext;
|
|
57
57
|
// Keep this column's width registered so the cumulative sticky offsets stay
|
|
58
58
|
// correct across layout changes (font swap, resize, fit -> overflow).
|
|
59
59
|
useRegisterStickyWidth.useRegisterStickyWidth(cellRef, {
|
|
@@ -61,6 +61,8 @@ const Td = ({ wrap, isSticky = false, stickyDirection = 'left', stickyIndex = 0,
|
|
|
61
61
|
direction: stickyDirection,
|
|
62
62
|
index: stickyIndex,
|
|
63
63
|
register: registerStickyColumn,
|
|
64
|
+
hasWidth: hasStickyWidth,
|
|
65
|
+
role: 'body',
|
|
64
66
|
});
|
|
65
67
|
// Get the sticky offset based on the column's position
|
|
66
68
|
const stickyOffset = isSticky
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Td.js","sources":["../../../src/components/Table/Td.tsx"],"sourcesContent":[null],"names":["useRef","useTableContext","useToken","_jsx","useRegisterStickyWidth","getStickyStyles","Table"],"mappings":";;;;;;;;;;AAQO,MAAM,EAAE,GAAG,CAAC,EACjB,IAAI,EACJ,QAAQ,GAAG,KAAK,EAChB,eAAe,GAAG,MAAM,EACxB,WAAW,GAAG,CAAC,EACf,MAAM,EACN,KAAK,EACL,SAAS,EACT,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,GAAG,IAAI,EAC6B,KAAI;AACxC,IAAA,MAAM,OAAO,GAAGA,YAAM,CAAuB,IAAI,CAAC;AAClD,IAAA,MAAM,YAAY,GAAGC,4BAAe,EAAE;;IAGtC,MAAM,YAAY,GAAGC,cAAQ,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;IAC5C,MAAM,aAAa,GAAGA,cAAQ,CAAC,WAAW,EAAE,GAAG,CAAC;IAChD,MAAM,YAAY,GAAGA,cAAQ,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;;IAG5C,IAAI,CAAC,YAAY,EAAE;;AAEjB,QAAA,MAAM,SAAS,GAAG;YAChB,SAAS;YACT,OAAO;YACP,YAAY;YACZ,YAAY;;SAEb;AAED,QAAA,QACEC,cAAA,CAAA,IAAA,EAAA,EACE,GAAG,EAAE,OAAO,EACZ,KAAK,EAAE;AACL,gBAAA,KAAK,EAAE,SAAS;AAChB,gBAAA,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,aAAa;AACnC,sBAAE,aAAa,CAAC,CAAC;AACjB,sBAAE,aAAa;AACjB,gBAAA,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;AACpC,sBAAE,YAAY,CAAC,CAAC;AAChB,sBAAE,YAAY;AAChB,gBAAA,aAAa,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;AACvC,sBAAE,YAAY,CAAC,CAAC;AAChB,sBAAE,YAAY;AAChB,gBAAA,QAAQ,EAAE,QAAQ;AAClB,gBAAA,YAAY,EAAE,UAAU;AACxB,gBAAA,kBAAkB,EAAE;AAClB,sBAAE,KAAK,CAAC,OAAO,CAAC,YAAY;AAC1B,0BAAE,YAAY,CAAC,CAAC;AAChB,0BAAE;AACJ,sBAAE,SAAS;AACb,gBAAA,IAAI;AACF,sBAAE;AACE,wBAAA,UAAU,EAAE,QAAQ;AACpB,wBAAA,QAAQ,EAAE,YAAY;AACtB,wBAAA,YAAY,EAAE,YAAY;AAC3B;sBACD,EAAE,CAAC;AACP,gBAAA,GAAG,KAAK;AACT,aAAA,EAAA,GACG,SAAS,EAAA,QAAA,EAEZ,QAAQ,EAAA,CACN;IAET;AAEA,IAAA,MAAM,EACJ,oBAAoB,EACpB,eAAe,EACf,kBAAkB,EAClB,GAAG,WAAW,EACf,GAAG,YAAY;;;IAIhBC,6CAAsB,CAAC,OAAO,EAAE;QAC9B,QAAQ;AACR,QAAA,SAAS,EAAE,eAAe;AAC1B,QAAA,KAAK,EAAE,WAAW;AAClB,QAAA,QAAQ,EAAE,oBAAoB;
|
|
1
|
+
{"version":3,"file":"Td.js","sources":["../../../src/components/Table/Td.tsx"],"sourcesContent":[null],"names":["useRef","useTableContext","useToken","_jsx","useRegisterStickyWidth","getStickyStyles","Table"],"mappings":"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"}
|
|
@@ -51,7 +51,7 @@ const Td = ({ wrap, isSticky = false, stickyDirection = 'left', stickyIndex = 0,
|
|
|
51
51
|
...style,
|
|
52
52
|
}, ...htmlProps, children: children }));
|
|
53
53
|
}
|
|
54
|
-
const { registerStickyColumn, getStickyOffset, isLastStickyColumn, ...scrollState } = tableContext;
|
|
54
|
+
const { registerStickyColumn, hasStickyWidth, getStickyOffset, isLastStickyColumn, ...scrollState } = tableContext;
|
|
55
55
|
// Keep this column's width registered so the cumulative sticky offsets stay
|
|
56
56
|
// correct across layout changes (font swap, resize, fit -> overflow).
|
|
57
57
|
useRegisterStickyWidth(cellRef, {
|
|
@@ -59,6 +59,8 @@ const Td = ({ wrap, isSticky = false, stickyDirection = 'left', stickyIndex = 0,
|
|
|
59
59
|
direction: stickyDirection,
|
|
60
60
|
index: stickyIndex,
|
|
61
61
|
register: registerStickyColumn,
|
|
62
|
+
hasWidth: hasStickyWidth,
|
|
63
|
+
role: 'body',
|
|
62
64
|
});
|
|
63
65
|
// Get the sticky offset based on the column's position
|
|
64
66
|
const stickyOffset = isSticky
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Td.mjs","sources":["../../../src/components/Table/Td.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;;;;AAQO,MAAM,EAAE,GAAG,CAAC,EACjB,IAAI,EACJ,QAAQ,GAAG,KAAK,EAChB,eAAe,GAAG,MAAM,EACxB,WAAW,GAAG,CAAC,EACf,MAAM,EACN,KAAK,EACL,SAAS,EACT,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,GAAG,IAAI,EAC6B,KAAI;AACxC,IAAA,MAAM,OAAO,GAAG,MAAM,CAAuB,IAAI,CAAC;AAClD,IAAA,MAAM,YAAY,GAAG,eAAe,EAAE;;IAGtC,MAAM,YAAY,GAAG,QAAQ,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;IAC5C,MAAM,aAAa,GAAG,QAAQ,CAAC,WAAW,EAAE,GAAG,CAAC;IAChD,MAAM,YAAY,GAAG,QAAQ,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;;IAG5C,IAAI,CAAC,YAAY,EAAE;;AAEjB,QAAA,MAAM,SAAS,GAAG;YAChB,SAAS;YACT,OAAO;YACP,YAAY;YACZ,YAAY;;SAEb;AAED,QAAA,QACEA,GAAA,CAAA,IAAA,EAAA,EACE,GAAG,EAAE,OAAO,EACZ,KAAK,EAAE;AACL,gBAAA,KAAK,EAAE,SAAS;AAChB,gBAAA,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,aAAa;AACnC,sBAAE,aAAa,CAAC,CAAC;AACjB,sBAAE,aAAa;AACjB,gBAAA,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;AACpC,sBAAE,YAAY,CAAC,CAAC;AAChB,sBAAE,YAAY;AAChB,gBAAA,aAAa,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;AACvC,sBAAE,YAAY,CAAC,CAAC;AAChB,sBAAE,YAAY;AAChB,gBAAA,QAAQ,EAAE,QAAQ;AAClB,gBAAA,YAAY,EAAE,UAAU;AACxB,gBAAA,kBAAkB,EAAE;AAClB,sBAAE,KAAK,CAAC,OAAO,CAAC,YAAY;AAC1B,0BAAE,YAAY,CAAC,CAAC;AAChB,0BAAE;AACJ,sBAAE,SAAS;AACb,gBAAA,IAAI;AACF,sBAAE;AACE,wBAAA,UAAU,EAAE,QAAQ;AACpB,wBAAA,QAAQ,EAAE,YAAY;AACtB,wBAAA,YAAY,EAAE,YAAY;AAC3B;sBACD,EAAE,CAAC;AACP,gBAAA,GAAG,KAAK;AACT,aAAA,EAAA,GACG,SAAS,EAAA,QAAA,EAEZ,QAAQ,EAAA,CACN;IAET;AAEA,IAAA,MAAM,EACJ,oBAAoB,EACpB,eAAe,EACf,kBAAkB,EAClB,GAAG,WAAW,EACf,GAAG,YAAY;;;IAIhB,sBAAsB,CAAC,OAAO,EAAE;QAC9B,QAAQ;AACR,QAAA,SAAS,EAAE,eAAe;AAC1B,QAAA,KAAK,EAAE,WAAW;AAClB,QAAA,QAAQ,EAAE,oBAAoB;
|
|
1
|
+
{"version":3,"file":"Td.mjs","sources":["../../../src/components/Table/Td.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Th.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Th.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAY,MAAM,kBAAkB,CAAC;AAGnD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAI/C,eAAO,MAAM,EAAE,
|
|
1
|
+
{"version":3,"file":"Th.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Th.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAY,MAAM,kBAAkB,CAAC;AAGnD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAI/C,eAAO,MAAM,EAAE,2IAqJd,CAAC"}
|
|
@@ -49,7 +49,7 @@ const Th = React.forwardRef(({ isSticky = false, stickyDirection = 'left', stick
|
|
|
49
49
|
...style,
|
|
50
50
|
}, ...htmlProps, children: children }));
|
|
51
51
|
}
|
|
52
|
-
const { registerStickyColumn, getStickyOffset, isLastStickyColumn, ...scrollState } = tableContext;
|
|
52
|
+
const { registerStickyColumn, hasStickyWidth, getStickyOffset, isLastStickyColumn, ...scrollState } = tableContext;
|
|
53
53
|
// Keep this column's width registered so the cumulative sticky offsets stay
|
|
54
54
|
// correct across layout changes (font swap, resize, fit -> overflow).
|
|
55
55
|
useRegisterStickyWidth.useRegisterStickyWidth(measureNodeRef, {
|
|
@@ -57,6 +57,8 @@ const Th = React.forwardRef(({ isSticky = false, stickyDirection = 'left', stick
|
|
|
57
57
|
direction: stickyDirection,
|
|
58
58
|
index: stickyIndex,
|
|
59
59
|
register: registerStickyColumn,
|
|
60
|
+
hasWidth: hasStickyWidth,
|
|
61
|
+
role: 'header',
|
|
60
62
|
});
|
|
61
63
|
// Combine refs (forwarded ref and internal ref)
|
|
62
64
|
const setRefs = React.useCallback((node) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Th.js","sources":["../../../src/components/Table/Th.tsx"],"sourcesContent":[null],"names":["forwardRef","useTableContext","useRef","useToken","useCallback","_jsx","useRegisterStickyWidth","getStickyStyles","Table"],"mappings":";;;;;;;;;;AAQO,MAAM,EAAE,GAAGA,gBAAU,CAI1B,CACE,EACE,QAAQ,GAAG,KAAK,EAChB,eAAe,GAAG,MAAM,EACxB,WAAW,GAAG,CAAC,EACf,KAAK,EACL,SAAS,EACT,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,GAAG,IAAI,EACR,EACD,YAAY,KACV;AACF,IAAA,MAAM,YAAY,GAAGC,4BAAe,EAAE;AACtC,IAAA,MAAM,cAAc,GAAGC,YAAM,CAA8B,IAAI,CAAC;IAChE,MAAM,aAAa,GAAGC,cAAQ,CAAC,WAAW,EAAE,UAAU,CAAC;IACvD,MAAM,YAAY,GAAGA,cAAQ,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;;IAG5C,IAAI,CAAC,YAAY,EAAE;;AAEjB,QAAA,MAAM,SAAS,GAAG;YAChB,SAAS;YACT,OAAO;YACP,YAAY;YACZ,YAAY;;SAEb;;AAGD,QAAA,MAAM,mBAAmB,GAAGC,iBAAW,CACrC,CAAC,IAAiC,KAAI;;AAEpC,YAAA,cAAc,CAAC,OAAO,GAAG,IAAI;;AAG7B,YAAA,IAAI,OAAO,YAAY,KAAK,UAAU,EAAE;gBACtC,YAAY,CAAC,IAAI,CAAC;YACpB;iBAAO,IAAI,YAAY,EAAE;AACvB,gBAAA,YAAY,CAAC,OAAO,GAAG,IAAI;YAC7B;AACF,QAAA,CAAC,EACD,CAAC,YAAY,CAAC,CACf;AAED,QAAA,QACEC,cAAA,CAAA,IAAA,EAAA,EACE,GAAG,EAAE,mBAAmB,EACxB,KAAK,EAAE;AACL,gBAAA,KAAK,EAAE,SAAS;AAChB,gBAAA,UAAU,EAAE,SAAS;AACrB,gBAAA,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,aAAa;AACnC,sBAAE,aAAa,CAAC,CAAC;AACjB,sBAAE,aAAa;AACjB,gBAAA,QAAQ,EAAE,QAAQ;AAClB,gBAAA,YAAY,EAAE,UAAU;AACxB,gBAAA,kBAAkB,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;AAC5C,sBAAE,YAAY,CAAC,CAAC;AAChB,sBAAE,YAAY;AAChB,gBAAA,GAAG,KAAK;AACT,aAAA,EAAA,GACG,SAAS,EAAA,QAAA,EAEZ,QAAQ,EAAA,CACN;IAET;AAEA,IAAA,MAAM,EACJ,oBAAoB,EACpB,eAAe,EACf,kBAAkB,EAClB,GAAG,WAAW,EACf,GAAG,YAAY;;;IAIhBC,6CAAsB,CAAC,cAAc,EAAE;QACrC,QAAQ;AACR,QAAA,SAAS,EAAE,eAAe;AAC1B,QAAA,KAAK,EAAE,WAAW;AAClB,QAAA,QAAQ,EAAE,oBAAoB;
|
|
1
|
+
{"version":3,"file":"Th.js","sources":["../../../src/components/Table/Th.tsx"],"sourcesContent":[null],"names":["forwardRef","useTableContext","useRef","useToken","useCallback","_jsx","useRegisterStickyWidth","getStickyStyles","Table"],"mappings":"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"}
|
|
@@ -47,7 +47,7 @@ const Th = forwardRef(({ isSticky = false, stickyDirection = 'left', stickyIndex
|
|
|
47
47
|
...style,
|
|
48
48
|
}, ...htmlProps, children: children }));
|
|
49
49
|
}
|
|
50
|
-
const { registerStickyColumn, getStickyOffset, isLastStickyColumn, ...scrollState } = tableContext;
|
|
50
|
+
const { registerStickyColumn, hasStickyWidth, getStickyOffset, isLastStickyColumn, ...scrollState } = tableContext;
|
|
51
51
|
// Keep this column's width registered so the cumulative sticky offsets stay
|
|
52
52
|
// correct across layout changes (font swap, resize, fit -> overflow).
|
|
53
53
|
useRegisterStickyWidth(measureNodeRef, {
|
|
@@ -55,6 +55,8 @@ const Th = forwardRef(({ isSticky = false, stickyDirection = 'left', stickyIndex
|
|
|
55
55
|
direction: stickyDirection,
|
|
56
56
|
index: stickyIndex,
|
|
57
57
|
register: registerStickyColumn,
|
|
58
|
+
hasWidth: hasStickyWidth,
|
|
59
|
+
role: 'header',
|
|
58
60
|
});
|
|
59
61
|
// Combine refs (forwarded ref and internal ref)
|
|
60
62
|
const setRefs = useCallback((node) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Th.mjs","sources":["../../../src/components/Table/Th.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;;;;AAQO,MAAM,EAAE,GAAG,UAAU,CAI1B,CACE,EACE,QAAQ,GAAG,KAAK,EAChB,eAAe,GAAG,MAAM,EACxB,WAAW,GAAG,CAAC,EACf,KAAK,EACL,SAAS,EACT,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,GAAG,IAAI,EACR,EACD,YAAY,KACV;AACF,IAAA,MAAM,YAAY,GAAG,eAAe,EAAE;AACtC,IAAA,MAAM,cAAc,GAAG,MAAM,CAA8B,IAAI,CAAC;IAChE,MAAM,aAAa,GAAG,QAAQ,CAAC,WAAW,EAAE,UAAU,CAAC;IACvD,MAAM,YAAY,GAAG,QAAQ,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;;IAG5C,IAAI,CAAC,YAAY,EAAE;;AAEjB,QAAA,MAAM,SAAS,GAAG;YAChB,SAAS;YACT,OAAO;YACP,YAAY;YACZ,YAAY;;SAEb;;AAGD,QAAA,MAAM,mBAAmB,GAAG,WAAW,CACrC,CAAC,IAAiC,KAAI;;AAEpC,YAAA,cAAc,CAAC,OAAO,GAAG,IAAI;;AAG7B,YAAA,IAAI,OAAO,YAAY,KAAK,UAAU,EAAE;gBACtC,YAAY,CAAC,IAAI,CAAC;YACpB;iBAAO,IAAI,YAAY,EAAE;AACvB,gBAAA,YAAY,CAAC,OAAO,GAAG,IAAI;YAC7B;AACF,QAAA,CAAC,EACD,CAAC,YAAY,CAAC,CACf;AAED,QAAA,QACEA,GAAA,CAAA,IAAA,EAAA,EACE,GAAG,EAAE,mBAAmB,EACxB,KAAK,EAAE;AACL,gBAAA,KAAK,EAAE,SAAS;AAChB,gBAAA,UAAU,EAAE,SAAS;AACrB,gBAAA,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,aAAa;AACnC,sBAAE,aAAa,CAAC,CAAC;AACjB,sBAAE,aAAa;AACjB,gBAAA,QAAQ,EAAE,QAAQ;AAClB,gBAAA,YAAY,EAAE,UAAU;AACxB,gBAAA,kBAAkB,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;AAC5C,sBAAE,YAAY,CAAC,CAAC;AAChB,sBAAE,YAAY;AAChB,gBAAA,GAAG,KAAK;AACT,aAAA,EAAA,GACG,SAAS,EAAA,QAAA,EAEZ,QAAQ,EAAA,CACN;IAET;AAEA,IAAA,MAAM,EACJ,oBAAoB,EACpB,eAAe,EACf,kBAAkB,EAClB,GAAG,WAAW,EACf,GAAG,YAAY;;;IAIhB,sBAAsB,CAAC,cAAc,EAAE;QACrC,QAAQ;AACR,QAAA,SAAS,EAAE,eAAe;AAC1B,QAAA,KAAK,EAAE,WAAW;AAClB,QAAA,QAAQ,EAAE,oBAAoB;
|
|
1
|
+
{"version":3,"file":"Th.mjs","sources":["../../../src/components/Table/Th.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":"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"}
|
|
@@ -5,21 +5,44 @@ interface UseRegisterStickyWidthOptions {
|
|
|
5
5
|
direction: StickyDirection;
|
|
6
6
|
index: number;
|
|
7
7
|
register: (direction: StickyDirection, index: number, width: number) => void;
|
|
8
|
+
/**
|
|
9
|
+
* Whether some cell has already measured this column. Body cells use it to
|
|
10
|
+
* skip; header cells ignore it (they are the authority).
|
|
11
|
+
*/
|
|
12
|
+
hasWidth: (direction: StickyDirection, index: number) => boolean;
|
|
13
|
+
/**
|
|
14
|
+
* `header` — one cell per column, mounted for the table's lifetime. It owns
|
|
15
|
+
* the measurement and keeps a `ResizeObserver` so the width follows later
|
|
16
|
+
* layout changes.
|
|
17
|
+
*
|
|
18
|
+
* `body` — one cell per column *per row*. It measures only when no width is
|
|
19
|
+
* known yet (a table with no header row) and never observes.
|
|
20
|
+
*/
|
|
21
|
+
role: 'header' | 'body';
|
|
8
22
|
}
|
|
9
23
|
/**
|
|
10
|
-
* Keep a sticky
|
|
24
|
+
* Keep a sticky column's measured width registered with the table context, so
|
|
25
|
+
* the cumulative sticky offsets stay correct across layout changes — a web-font
|
|
26
|
+
* swap that reflows the text, a window/sidebar resize, or the columns shrinking
|
|
27
|
+
* when the table goes from fitting its container to overflowing it. Without a
|
|
28
|
+
* live measurement the offsets are computed once from stale widths and the
|
|
29
|
+
* pinned columns visibly detach (a gap opens and neighbours collapse).
|
|
11
30
|
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
-
* from stale widths and the pinned columns visibly detach (an empty gap opens
|
|
18
|
-
* between them and neighbouring columns collapse).
|
|
31
|
+
* **A column's width is one number, so it is measured once — by the header.**
|
|
32
|
+
* Every cell used to measure itself and attach its own `ResizeObserver`. In a
|
|
33
|
+
* static table that is merely redundant; in a virtualised one it is the
|
|
34
|
+
* dominant cost of scrolling, because rows mount and unmount continuously and
|
|
35
|
+
* each mount forces a synchronous layout.
|
|
19
36
|
*
|
|
20
|
-
*
|
|
21
|
-
*
|
|
37
|
+
* Measured on a 12,000-row admin table (production build, 10 scroll steps):
|
|
38
|
+
* 680 `getBoundingClientRect` calls and 280 `ResizeObserver`s created — 68
|
|
39
|
+
* measurements and 28 observers per scroll step, for three sticky columns whose
|
|
40
|
+
* widths never changed. `getBoundingClientRect` alone was 11.9% of profiled CPU.
|
|
41
|
+
*
|
|
42
|
+
* Body cells still measure when nothing else has: a table with sticky columns
|
|
43
|
+
* and no header row would otherwise get zero offsets. In that case the first
|
|
44
|
+
* body cell to mount supplies the width and the rest skip.
|
|
22
45
|
*/
|
|
23
|
-
export declare function useRegisterStickyWidth(ref: RefObject<HTMLTableCellElement | null>, { isSticky, direction, index, register }: UseRegisterStickyWidthOptions): void;
|
|
46
|
+
export declare function useRegisterStickyWidth(ref: RefObject<HTMLTableCellElement | null>, { isSticky, direction, index, register, hasWidth, role, }: UseRegisterStickyWidthOptions): void;
|
|
24
47
|
export {};
|
|
25
48
|
//# sourceMappingURL=useRegisterStickyWidth.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useRegisterStickyWidth.d.ts","sourceRoot":"","sources":["../../../src/components/Table/useRegisterStickyWidth.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEjD,UAAU,6BAA6B;IACrC,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,eAAe,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,SAAS,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"useRegisterStickyWidth.d.ts","sourceRoot":"","sources":["../../../src/components/Table/useRegisterStickyWidth.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEjD,UAAU,6BAA6B;IACrC,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,eAAe,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,SAAS,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7E;;;OAGG;IACH,QAAQ,EAAE,CAAC,SAAS,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACjE;;;;;;;OAOG;IACH,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAC;CACzB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,sBAAsB,CACpC,GAAG,EAAE,SAAS,CAAC,oBAAoB,GAAG,IAAI,CAAC,EAC3C,EACE,QAAQ,EACR,SAAS,EACT,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,IAAI,GACL,EAAE,6BAA6B,QAyBjC"}
|
|
@@ -4,24 +4,41 @@
|
|
|
4
4
|
var React = require('react');
|
|
5
5
|
|
|
6
6
|
/**
|
|
7
|
-
* Keep a sticky
|
|
7
|
+
* Keep a sticky column's measured width registered with the table context, so
|
|
8
|
+
* the cumulative sticky offsets stay correct across layout changes — a web-font
|
|
9
|
+
* swap that reflows the text, a window/sidebar resize, or the columns shrinking
|
|
10
|
+
* when the table goes from fitting its container to overflowing it. Without a
|
|
11
|
+
* live measurement the offsets are computed once from stale widths and the
|
|
12
|
+
* pinned columns visibly detach (a gap opens and neighbours collapse).
|
|
8
13
|
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
* from stale widths and the pinned columns visibly detach (an empty gap opens
|
|
15
|
-
* between them and neighbouring columns collapse).
|
|
14
|
+
* **A column's width is one number, so it is measured once — by the header.**
|
|
15
|
+
* Every cell used to measure itself and attach its own `ResizeObserver`. In a
|
|
16
|
+
* static table that is merely redundant; in a virtualised one it is the
|
|
17
|
+
* dominant cost of scrolling, because rows mount and unmount continuously and
|
|
18
|
+
* each mount forces a synchronous layout.
|
|
16
19
|
*
|
|
17
|
-
*
|
|
18
|
-
*
|
|
20
|
+
* Measured on a 12,000-row admin table (production build, 10 scroll steps):
|
|
21
|
+
* 680 `getBoundingClientRect` calls and 280 `ResizeObserver`s created — 68
|
|
22
|
+
* measurements and 28 observers per scroll step, for three sticky columns whose
|
|
23
|
+
* widths never changed. `getBoundingClientRect` alone was 11.9% of profiled CPU.
|
|
24
|
+
*
|
|
25
|
+
* Body cells still measure when nothing else has: a table with sticky columns
|
|
26
|
+
* and no header row would otherwise get zero offsets. In that case the first
|
|
27
|
+
* body cell to mount supplies the width and the rest skip.
|
|
19
28
|
*/
|
|
20
|
-
function useRegisterStickyWidth(ref, { isSticky, direction, index, register }) {
|
|
29
|
+
function useRegisterStickyWidth(ref, { isSticky, direction, index, register, hasWidth, role, }) {
|
|
21
30
|
React.useEffect(() => {
|
|
22
31
|
const node = ref.current;
|
|
23
32
|
if (!isSticky || !node)
|
|
24
33
|
return;
|
|
34
|
+
if (role === 'body') {
|
|
35
|
+
// Header already measured this column (the usual case) — nothing to do,
|
|
36
|
+
// and crucially no observer to attach and tear down on every scroll.
|
|
37
|
+
if (hasWidth(direction, index))
|
|
38
|
+
return;
|
|
39
|
+
register(direction, index, node.getBoundingClientRect().width);
|
|
40
|
+
return;
|
|
41
|
+
}
|
|
25
42
|
register(direction, index, node.getBoundingClientRect().width);
|
|
26
43
|
if (typeof ResizeObserver === 'undefined')
|
|
27
44
|
return;
|
|
@@ -30,7 +47,7 @@ function useRegisterStickyWidth(ref, { isSticky, direction, index, register }) {
|
|
|
30
47
|
});
|
|
31
48
|
observer.observe(node);
|
|
32
49
|
return () => observer.disconnect();
|
|
33
|
-
}, [ref, isSticky, direction, index, register]);
|
|
50
|
+
}, [ref, isSticky, direction, index, register, hasWidth, role]);
|
|
34
51
|
}
|
|
35
52
|
|
|
36
53
|
exports.useRegisterStickyWidth = useRegisterStickyWidth;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useRegisterStickyWidth.js","sources":["../../../src/components/Table/useRegisterStickyWidth.ts"],"sourcesContent":[null],"names":["useEffect"],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"useRegisterStickyWidth.js","sources":["../../../src/components/Table/useRegisterStickyWidth.ts"],"sourcesContent":[null],"names":["useEffect"],"mappings":";;;;;AAyBA;;;;;;;;;;;;;;;;;;;;;;AAsBG;SACa,sBAAsB,CACpC,GAA2C,EAC3C,EACE,QAAQ,EACR,SAAS,EACT,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,IAAI,GAC0B,EAAA;IAEhCA,eAAS,CAAC,MAAK;AACb,QAAA,MAAM,IAAI,GAAG,GAAG,CAAC,OAAO;AACxB,QAAA,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI;YAAE;AAExB,QAAA,IAAI,IAAI,KAAK,MAAM,EAAE;;;AAGnB,YAAA,IAAI,QAAQ,CAAC,SAAS,EAAE,KAAK,CAAC;gBAAE;AAChC,YAAA,QAAQ,CAAC,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;YAC9D;QACF;AAEA,QAAA,QAAQ,CAAC,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;QAE9D,IAAI,OAAO,cAAc,KAAK,WAAW;YAAE;AAE3C,QAAA,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,MAAK;AACvC,YAAA,QAAQ,CAAC,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;AAChE,QAAA,CAAC,CAAC;AACF,QAAA,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC;AAEtB,QAAA,OAAO,MAAM,QAAQ,CAAC,UAAU,EAAE;AACpC,IAAA,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,CAAC;AACjE;;;;"}
|
|
@@ -2,24 +2,41 @@
|
|
|
2
2
|
import { useEffect } from 'react';
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
|
-
* Keep a sticky
|
|
5
|
+
* Keep a sticky column's measured width registered with the table context, so
|
|
6
|
+
* the cumulative sticky offsets stay correct across layout changes — a web-font
|
|
7
|
+
* swap that reflows the text, a window/sidebar resize, or the columns shrinking
|
|
8
|
+
* when the table goes from fitting its container to overflowing it. Without a
|
|
9
|
+
* live measurement the offsets are computed once from stale widths and the
|
|
10
|
+
* pinned columns visibly detach (a gap opens and neighbours collapse).
|
|
6
11
|
*
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
* from stale widths and the pinned columns visibly detach (an empty gap opens
|
|
13
|
-
* between them and neighbouring columns collapse).
|
|
12
|
+
* **A column's width is one number, so it is measured once — by the header.**
|
|
13
|
+
* Every cell used to measure itself and attach its own `ResizeObserver`. In a
|
|
14
|
+
* static table that is merely redundant; in a virtualised one it is the
|
|
15
|
+
* dominant cost of scrolling, because rows mount and unmount continuously and
|
|
16
|
+
* each mount forces a synchronous layout.
|
|
14
17
|
*
|
|
15
|
-
*
|
|
16
|
-
*
|
|
18
|
+
* Measured on a 12,000-row admin table (production build, 10 scroll steps):
|
|
19
|
+
* 680 `getBoundingClientRect` calls and 280 `ResizeObserver`s created — 68
|
|
20
|
+
* measurements and 28 observers per scroll step, for three sticky columns whose
|
|
21
|
+
* widths never changed. `getBoundingClientRect` alone was 11.9% of profiled CPU.
|
|
22
|
+
*
|
|
23
|
+
* Body cells still measure when nothing else has: a table with sticky columns
|
|
24
|
+
* and no header row would otherwise get zero offsets. In that case the first
|
|
25
|
+
* body cell to mount supplies the width and the rest skip.
|
|
17
26
|
*/
|
|
18
|
-
function useRegisterStickyWidth(ref, { isSticky, direction, index, register }) {
|
|
27
|
+
function useRegisterStickyWidth(ref, { isSticky, direction, index, register, hasWidth, role, }) {
|
|
19
28
|
useEffect(() => {
|
|
20
29
|
const node = ref.current;
|
|
21
30
|
if (!isSticky || !node)
|
|
22
31
|
return;
|
|
32
|
+
if (role === 'body') {
|
|
33
|
+
// Header already measured this column (the usual case) — nothing to do,
|
|
34
|
+
// and crucially no observer to attach and tear down on every scroll.
|
|
35
|
+
if (hasWidth(direction, index))
|
|
36
|
+
return;
|
|
37
|
+
register(direction, index, node.getBoundingClientRect().width);
|
|
38
|
+
return;
|
|
39
|
+
}
|
|
23
40
|
register(direction, index, node.getBoundingClientRect().width);
|
|
24
41
|
if (typeof ResizeObserver === 'undefined')
|
|
25
42
|
return;
|
|
@@ -28,7 +45,7 @@ function useRegisterStickyWidth(ref, { isSticky, direction, index, register }) {
|
|
|
28
45
|
});
|
|
29
46
|
observer.observe(node);
|
|
30
47
|
return () => observer.disconnect();
|
|
31
|
-
}, [ref, isSticky, direction, index, register]);
|
|
48
|
+
}, [ref, isSticky, direction, index, register, hasWidth, role]);
|
|
32
49
|
}
|
|
33
50
|
|
|
34
51
|
export { useRegisterStickyWidth };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useRegisterStickyWidth.mjs","sources":["../../../src/components/Table/useRegisterStickyWidth.ts"],"sourcesContent":[null],"names":[],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"useRegisterStickyWidth.mjs","sources":["../../../src/components/Table/useRegisterStickyWidth.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAyBA;;;;;;;;;;;;;;;;;;;;;;AAsBG;SACa,sBAAsB,CACpC,GAA2C,EAC3C,EACE,QAAQ,EACR,SAAS,EACT,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,IAAI,GAC0B,EAAA;IAEhC,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,IAAI,GAAG,GAAG,CAAC,OAAO;AACxB,QAAA,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI;YAAE;AAExB,QAAA,IAAI,IAAI,KAAK,MAAM,EAAE;;;AAGnB,YAAA,IAAI,QAAQ,CAAC,SAAS,EAAE,KAAK,CAAC;gBAAE;AAChC,YAAA,QAAQ,CAAC,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;YAC9D;QACF;AAEA,QAAA,QAAQ,CAAC,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;QAE9D,IAAI,OAAO,cAAc,KAAK,WAAW;YAAE;AAE3C,QAAA,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,MAAK;AACvC,YAAA,QAAQ,CAAC,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;AAChE,QAAA,CAAC,CAAC;AACF,QAAA,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC;AAEtB,QAAA,OAAO,MAAM,QAAQ,CAAC,UAAU,EAAE;AACpC,IAAA,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,CAAC;AACjE;;;;"}
|
package/package.json
CHANGED
|
@@ -4,6 +4,7 @@ import React, {
|
|
|
4
4
|
useCallback,
|
|
5
5
|
useContext,
|
|
6
6
|
useEffect,
|
|
7
|
+
useMemo,
|
|
7
8
|
useRef,
|
|
8
9
|
useState,
|
|
9
10
|
} from 'react';
|
|
@@ -28,6 +29,14 @@ interface TableContextValue extends TableScrollState {
|
|
|
28
29
|
index: number,
|
|
29
30
|
width: number
|
|
30
31
|
) => void;
|
|
32
|
+
/**
|
|
33
|
+
* Whether a width is already known for this sticky column.
|
|
34
|
+
*
|
|
35
|
+
* Reads a ref, not state, so a caller can ask without subscribing to width
|
|
36
|
+
* changes — body cells use it to skip measuring a column the header has
|
|
37
|
+
* already measured. See {@link useRegisterStickyWidth}.
|
|
38
|
+
*/
|
|
39
|
+
hasStickyWidth: (direction: 'left' | 'right', index: number) => boolean;
|
|
31
40
|
getStickyOffset: (direction: 'left' | 'right', index: number) => number;
|
|
32
41
|
isLastStickyColumn: (direction: 'left' | 'right', index: number) => boolean;
|
|
33
42
|
}
|
|
@@ -103,12 +112,36 @@ export const TableProvider: React.FC<TableProviderProps> = ({ children }) => {
|
|
|
103
112
|
[updateScrollState]
|
|
104
113
|
);
|
|
105
114
|
|
|
115
|
+
/*
|
|
116
|
+
* A ref mirror of the widths above, so `hasStickyWidth` can answer without
|
|
117
|
+
* making its caller a subscriber. Every body cell subscribing to width state
|
|
118
|
+
* would re-render the whole table on the first measurement of any column.
|
|
119
|
+
*/
|
|
120
|
+
const stickyColumnsRef = useRef<StickyColumnInfo>({ left: {}, right: {} });
|
|
121
|
+
|
|
122
|
+
const hasStickyWidth = useCallback(
|
|
123
|
+
(direction: 'left' | 'right', index: number) =>
|
|
124
|
+
stickyColumnsRef.current[direction][index] !== undefined,
|
|
125
|
+
[]
|
|
126
|
+
);
|
|
127
|
+
|
|
106
128
|
// Register a sticky column with its (measured) width. Rounds to whole pixels
|
|
107
129
|
// and bails when unchanged so the ResizeObserver-driven callers can't
|
|
108
130
|
// ping-pong on sub-pixel differences and spin the render loop.
|
|
109
131
|
const registerStickyColumn = useCallback(
|
|
110
132
|
(direction: 'left' | 'right', index: number, width: number) => {
|
|
111
133
|
const rounded = Math.round(width);
|
|
134
|
+
// The ref is written here rather than in an effect so `hasStickyWidth` is
|
|
135
|
+
// already true for the next cell that mounts in the same commit — without
|
|
136
|
+
// that, every cell of a column measures before the first state update
|
|
137
|
+
// lands, which is exactly the cost this is meant to avoid.
|
|
138
|
+
stickyColumnsRef.current = {
|
|
139
|
+
...stickyColumnsRef.current,
|
|
140
|
+
[direction]: {
|
|
141
|
+
...stickyColumnsRef.current[direction],
|
|
142
|
+
[index]: rounded,
|
|
143
|
+
},
|
|
144
|
+
};
|
|
112
145
|
setStickyColumns((prev) => {
|
|
113
146
|
const side = prev[direction];
|
|
114
147
|
if (side[index] === rounded) return prev;
|
|
@@ -177,17 +210,44 @@ export const TableProvider: React.FC<TableProviderProps> = ({ children }) => {
|
|
|
177
210
|
};
|
|
178
211
|
}, [updateScrollState]);
|
|
179
212
|
|
|
213
|
+
/*
|
|
214
|
+
* Memoised, because an object literal here is a new value on *every* render of
|
|
215
|
+
* this provider, and a new context value re-renders every consumer —
|
|
216
|
+
* `Th`/`Td`/`Tr` all call `useTableContext()`. React propagates a context
|
|
217
|
+
* change into subtrees that `React.memo` has already bailed out of, so a
|
|
218
|
+
* memoised row does not stop it: the cells inside re-render anyway.
|
|
219
|
+
*
|
|
220
|
+
* In a virtualised table that is the dominant cost of scrolling. Measured on a
|
|
221
|
+
* consumer's 12,000-row admin table (production build): one scroll step that
|
|
222
|
+
* mounted a single new row re-rendered `Td` **794 times** — every cell of every
|
|
223
|
+
* rendered row, each one re-running Chakra's runtime style resolution. Wall
|
|
224
|
+
* time was ~1,050ms per step and did not depend on how many rows the step
|
|
225
|
+
* actually brought in (1.8 rows and 7.3 rows cost the same), which is the
|
|
226
|
+
* signature of a whole-table re-render rather than incremental work.
|
|
227
|
+
*
|
|
228
|
+
* With this memo the value changes only when `scrollState` or the registered
|
|
229
|
+
* sticky widths change, so a scroll that alters neither costs nothing.
|
|
230
|
+
*/
|
|
231
|
+
const value = useMemo(
|
|
232
|
+
() => ({
|
|
233
|
+
...scrollState,
|
|
234
|
+
setContainerRef,
|
|
235
|
+
registerStickyColumn,
|
|
236
|
+
hasStickyWidth,
|
|
237
|
+
getStickyOffset,
|
|
238
|
+
isLastStickyColumn,
|
|
239
|
+
}),
|
|
240
|
+
[
|
|
241
|
+
scrollState,
|
|
242
|
+
setContainerRef,
|
|
243
|
+
registerStickyColumn,
|
|
244
|
+
hasStickyWidth,
|
|
245
|
+
getStickyOffset,
|
|
246
|
+
isLastStickyColumn,
|
|
247
|
+
]
|
|
248
|
+
);
|
|
249
|
+
|
|
180
250
|
return (
|
|
181
|
-
<TableContext.Provider
|
|
182
|
-
value={{
|
|
183
|
-
...scrollState,
|
|
184
|
-
setContainerRef,
|
|
185
|
-
registerStickyColumn,
|
|
186
|
-
getStickyOffset,
|
|
187
|
-
isLastStickyColumn,
|
|
188
|
-
}}
|
|
189
|
-
>
|
|
190
|
-
{children}
|
|
191
|
-
</TableContext.Provider>
|
|
251
|
+
<TableContext.Provider value={value}>{children}</TableContext.Provider>
|
|
192
252
|
);
|
|
193
253
|
};
|
|
@@ -78,6 +78,7 @@ export const Td = ({
|
|
|
78
78
|
|
|
79
79
|
const {
|
|
80
80
|
registerStickyColumn,
|
|
81
|
+
hasStickyWidth,
|
|
81
82
|
getStickyOffset,
|
|
82
83
|
isLastStickyColumn,
|
|
83
84
|
...scrollState
|
|
@@ -90,6 +91,8 @@ export const Td = ({
|
|
|
90
91
|
direction: stickyDirection,
|
|
91
92
|
index: stickyIndex,
|
|
92
93
|
register: registerStickyColumn,
|
|
94
|
+
hasWidth: hasStickyWidth,
|
|
95
|
+
role: 'body',
|
|
93
96
|
});
|
|
94
97
|
|
|
95
98
|
// Get the sticky offset based on the column's position
|
|
@@ -82,6 +82,7 @@ export const Th = forwardRef<
|
|
|
82
82
|
|
|
83
83
|
const {
|
|
84
84
|
registerStickyColumn,
|
|
85
|
+
hasStickyWidth,
|
|
85
86
|
getStickyOffset,
|
|
86
87
|
isLastStickyColumn,
|
|
87
88
|
...scrollState
|
|
@@ -94,6 +95,8 @@ export const Th = forwardRef<
|
|
|
94
95
|
direction: stickyDirection,
|
|
95
96
|
index: stickyIndex,
|
|
96
97
|
register: registerStickyColumn,
|
|
98
|
+
hasWidth: hasStickyWidth,
|
|
99
|
+
role: 'header',
|
|
97
100
|
});
|
|
98
101
|
|
|
99
102
|
// Combine refs (forwarded ref and internal ref)
|
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
import { ReactNode, useMemo, useState } from 'react';
|
|
2
|
+
import { fireEvent, render, screen } from '@testing-library/react';
|
|
3
|
+
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
|
4
|
+
|
|
5
|
+
import { LogicianProvider } from '../LogicianProvider';
|
|
6
|
+
import { Table } from './Table';
|
|
7
|
+
import { TableContainer } from './TableContainer';
|
|
8
|
+
import { useTableContext } from './TableContext';
|
|
9
|
+
import { Tbody } from './Tbody';
|
|
10
|
+
import { Td } from './Td';
|
|
11
|
+
import { Tr } from './Tr';
|
|
12
|
+
|
|
13
|
+
/**
|
|
14
|
+
* 표의 컨텍스트 값이 렌더마다 새 객체면, **표 안의 모든 셀이 다시 그려진다**.
|
|
15
|
+
*
|
|
16
|
+
* `Th`/`Td`/`Tr` 은 전부 `useTableContext()` 를 부른다. 컨텍스트 변경은
|
|
17
|
+
* `React.memo` 를 우회한다 — React 는 이미 bail-out 된 서브트리 **안으로** 변경을
|
|
18
|
+
* 전파하므로, 행을 memo 로 감싸도 그 안의 셀은 다시 그려진다.
|
|
19
|
+
*
|
|
20
|
+
* 가상 스크롤 표에서는 이것이 스크롤 비용 그 자체가 된다. 실측(소비자의 12,000행
|
|
21
|
+
* 관리자 표, 프로덕션 빌드): **새 행 하나만 마운트하는 스크롤 한 칸이 `Td` 를 794번**
|
|
22
|
+
* 다시 그렸다. 한 칸에 ~1,050ms 였고, 그 값은 그 칸이 실제로 몇 행을 새로 들였는지와
|
|
23
|
+
* **무관했다**(1.8행과 7.3행이 같은 비용) — 증분 작업이 아니라 표 전체가 다시
|
|
24
|
+
* 그려지고 있다는 신호다.
|
|
25
|
+
*
|
|
26
|
+
* 그래서 이 테스트는 오프셋이 맞는지가 아니라 **`Td` 가 몇 번 그려지는지**를 센다.
|
|
27
|
+
* 그것이 회귀했던 값이고, 다음 변경이 조용히 되돌릴 값이다.
|
|
28
|
+
*/
|
|
29
|
+
let tdRenders = 0;
|
|
30
|
+
|
|
31
|
+
/**
|
|
32
|
+
* `Td` 자신을 셀 수는 없으니(패키지 내부 컴포넌트다) **같은 것을 구독하는 대역**을
|
|
33
|
+
* 센다 — `useTableContext()` 를 부르는 컴포넌트. 표 안에서 다시 그려지는 모집단이
|
|
34
|
+
* 정확히 이것이다(`Th`/`Td`/`Tr` 이 전부 이 훅을 부른다).
|
|
35
|
+
*
|
|
36
|
+
* 이 대역이 셀 안에 있어야 의미가 있다: 행 엘리먼트가 고정돼 있어도 컨텍스트 변경은
|
|
37
|
+
* bail-out 된 서브트리 안으로 전파되므로, 여기서 세는 숫자가 곧 스크롤 한 칸의
|
|
38
|
+
* 실제 재렌더 수다.
|
|
39
|
+
*/
|
|
40
|
+
const ContextProbe = ({ children }: { children: ReactNode }) => {
|
|
41
|
+
useTableContext();
|
|
42
|
+
tdRenders += 1;
|
|
43
|
+
return <>{children}</>;
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
const CountingTd = ({ children }: { children: ReactNode }) => (
|
|
47
|
+
<Td>
|
|
48
|
+
<ContextProbe>{children}</ContextProbe>
|
|
49
|
+
</Td>
|
|
50
|
+
);
|
|
51
|
+
|
|
52
|
+
beforeEach(() => {
|
|
53
|
+
// jsdom 에는 없다 — Chakra 의 provider 가 부팅하면서 부른다.
|
|
54
|
+
vi.stubGlobal('matchMedia', (query: string) => ({
|
|
55
|
+
matches: false,
|
|
56
|
+
media: query,
|
|
57
|
+
onchange: null,
|
|
58
|
+
addListener: () => {},
|
|
59
|
+
removeListener: () => {},
|
|
60
|
+
addEventListener: () => {},
|
|
61
|
+
removeEventListener: () => {},
|
|
62
|
+
dispatchEvent: () => false,
|
|
63
|
+
}));
|
|
64
|
+
tdRenders = 0;
|
|
65
|
+
});
|
|
66
|
+
|
|
67
|
+
/**
|
|
68
|
+
* 표를 그대로 둔 채 **표 위쪽만** 다시 그린다 — 가상 스크롤 목록이 스크롤 중에
|
|
69
|
+
* 하는 일이 정확히 이것이다(보이는 구간이 바뀌어 리스트 컴포넌트가 다시 그려진다).
|
|
70
|
+
* 행 엘리먼트는 같은 것을 다시 넘기므로, 셀이 다시 그려질 이유는 컨텍스트뿐이다.
|
|
71
|
+
*/
|
|
72
|
+
const Harness = ({ rowCount }: { rowCount: number }) => {
|
|
73
|
+
const [tick, setTick] = useState(0);
|
|
74
|
+
/*
|
|
75
|
+
* 행 엘리먼트를 고정한다 — 실제 목록에서 행이 `React.memo` 로 bail-out 되는 것과
|
|
76
|
+
* 같은 상황이다. 이렇게 해야 "부모가 다시 그려졌으니 자식도 다시 그려졌다"는
|
|
77
|
+
* 평범한 이유가 빠지고, 셀이 다시 그려질 수 있는 경로가 **컨텍스트 하나만** 남는다.
|
|
78
|
+
*/
|
|
79
|
+
const body = useMemo(
|
|
80
|
+
() => (
|
|
81
|
+
<Tbody>
|
|
82
|
+
{Array.from({ length: rowCount }, (_, i) => (
|
|
83
|
+
<Tr key={i}>
|
|
84
|
+
<CountingTd>row {i}</CountingTd>
|
|
85
|
+
</Tr>
|
|
86
|
+
))}
|
|
87
|
+
</Tbody>
|
|
88
|
+
),
|
|
89
|
+
[rowCount]
|
|
90
|
+
);
|
|
91
|
+
return (
|
|
92
|
+
<LogicianProvider>
|
|
93
|
+
<button type="button" onClick={() => setTick((t) => t + 1)}>
|
|
94
|
+
rerender
|
|
95
|
+
</button>
|
|
96
|
+
<span data-testid="tick">{tick}</span>
|
|
97
|
+
<TableContainer>
|
|
98
|
+
<Table>{body}</Table>
|
|
99
|
+
</TableContainer>
|
|
100
|
+
</LogicianProvider>
|
|
101
|
+
);
|
|
102
|
+
};
|
|
103
|
+
|
|
104
|
+
describe('table context identity', () => {
|
|
105
|
+
it('re-rendering the table owner does not re-render every cell', () => {
|
|
106
|
+
render(<Harness rowCount={40} />);
|
|
107
|
+
const afterMount = tdRenders;
|
|
108
|
+
expect(afterMount, '40행이 마운트되지 않았다').toBeGreaterThanOrEqual(40);
|
|
109
|
+
|
|
110
|
+
tdRenders = 0;
|
|
111
|
+
fireEvent.click(screen.getByText('rerender'));
|
|
112
|
+
expect(screen.getByTestId('tick')).toHaveTextContent('1');
|
|
113
|
+
|
|
114
|
+
// 스크롤 상태도 sticky 너비도 바뀌지 않았으므로 셀은 하나도 다시 그려질 이유가
|
|
115
|
+
// 없다. 컨텍스트 값이 리터럴이면 40개가 전부 다시 그려진다.
|
|
116
|
+
expect(
|
|
117
|
+
tdRenders,
|
|
118
|
+
'표 주인이 다시 그려졌다는 이유만으로 모든 셀이 다시 그려졌다 — ' +
|
|
119
|
+
'컨텍스트 값이 렌더마다 새 객체다'
|
|
120
|
+
).toBe(0);
|
|
121
|
+
});
|
|
122
|
+
|
|
123
|
+
it('the cell count does not scale with row count on a parent re-render', () => {
|
|
124
|
+
const rerenderCost = (rowCount: number) => {
|
|
125
|
+
const view = render(<Harness rowCount={rowCount} />);
|
|
126
|
+
tdRenders = 0;
|
|
127
|
+
fireEvent.click(screen.getByText('rerender'));
|
|
128
|
+
const cost = tdRenders;
|
|
129
|
+
view.unmount();
|
|
130
|
+
return cost;
|
|
131
|
+
};
|
|
132
|
+
const small = rerenderCost(10);
|
|
133
|
+
const large = rerenderCost(100);
|
|
134
|
+
|
|
135
|
+
expect(
|
|
136
|
+
large,
|
|
137
|
+
`행이 10배인데 재렌더도 ${small} → ${large} 로 따라 늘었다 — 스크롤 비용이 행 수에 비례한다`
|
|
138
|
+
).toBe(small);
|
|
139
|
+
});
|
|
140
|
+
});
|
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { render } from '@testing-library/react';
|
|
3
|
+
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
|
4
|
+
|
|
5
|
+
import { LogicianProvider } from '../LogicianProvider';
|
|
6
|
+
import { Table } from './Table';
|
|
7
|
+
import { TableContainer } from './TableContainer';
|
|
8
|
+
import { Tbody } from './Tbody';
|
|
9
|
+
import { Td } from './Td';
|
|
10
|
+
import { Th } from './Th';
|
|
11
|
+
import { Thead } from './Thead';
|
|
12
|
+
import { Tr } from './Tr';
|
|
13
|
+
|
|
14
|
+
/**
|
|
15
|
+
* A column's width is one number, so it should be measured once — by the header.
|
|
16
|
+
*
|
|
17
|
+
* Before this, every cell measured itself and attached its own `ResizeObserver`.
|
|
18
|
+
* In a static table that is redundant; in a virtualised one it is the dominant
|
|
19
|
+
* cost of scrolling, because rows mount and unmount continuously and each mount
|
|
20
|
+
* forces a synchronous layout. Measured on a 12,000-row admin table (production
|
|
21
|
+
* build): 68 `getBoundingClientRect` calls and 28 observers created *per scroll
|
|
22
|
+
* step*, for three sticky columns whose widths never changed.
|
|
23
|
+
*
|
|
24
|
+
* These count the calls rather than assert on offsets, because the number of
|
|
25
|
+
* measurements is the thing that regressed and the thing a future change would
|
|
26
|
+
* silently undo.
|
|
27
|
+
*/
|
|
28
|
+
const counters = { gbcr: 0, observers: 0 };
|
|
29
|
+
|
|
30
|
+
beforeEach(() => {
|
|
31
|
+
// jsdom 에는 없다 — Chakra 의 provider 가 부팅하면서 부른다.
|
|
32
|
+
vi.stubGlobal('matchMedia', (query: string) => ({
|
|
33
|
+
matches: false,
|
|
34
|
+
media: query,
|
|
35
|
+
onchange: null,
|
|
36
|
+
addListener: () => {},
|
|
37
|
+
removeListener: () => {},
|
|
38
|
+
addEventListener: () => {},
|
|
39
|
+
removeEventListener: () => {},
|
|
40
|
+
dispatchEvent: () => false,
|
|
41
|
+
}));
|
|
42
|
+
counters.gbcr = 0;
|
|
43
|
+
counters.observers = 0;
|
|
44
|
+
vi.spyOn(Element.prototype, 'getBoundingClientRect').mockImplementation(
|
|
45
|
+
function (this: Element) {
|
|
46
|
+
counters.gbcr += 1;
|
|
47
|
+
return {
|
|
48
|
+
width: 120,
|
|
49
|
+
height: 40,
|
|
50
|
+
top: 0,
|
|
51
|
+
left: 0,
|
|
52
|
+
right: 120,
|
|
53
|
+
bottom: 40,
|
|
54
|
+
x: 0,
|
|
55
|
+
y: 0,
|
|
56
|
+
toJSON: () => ({}),
|
|
57
|
+
} as DOMRect;
|
|
58
|
+
}
|
|
59
|
+
);
|
|
60
|
+
class CountingResizeObserver {
|
|
61
|
+
constructor() {
|
|
62
|
+
counters.observers += 1;
|
|
63
|
+
}
|
|
64
|
+
observe() {}
|
|
65
|
+
unobserve() {}
|
|
66
|
+
disconnect() {}
|
|
67
|
+
}
|
|
68
|
+
vi.stubGlobal('ResizeObserver', CountingResizeObserver);
|
|
69
|
+
});
|
|
70
|
+
|
|
71
|
+
const rows = (n: number) =>
|
|
72
|
+
Array.from({ length: n }, (_, i) => (
|
|
73
|
+
<Tr key={i}>
|
|
74
|
+
<Td isSticky stickyDirection="left" stickyIndex={0}>
|
|
75
|
+
row {i}
|
|
76
|
+
</Td>
|
|
77
|
+
<Td>other</Td>
|
|
78
|
+
</Tr>
|
|
79
|
+
));
|
|
80
|
+
|
|
81
|
+
/** 표 컴포넌트가 Chakra 위에 있어서 provider 없이는 렌더되지 않는다. */
|
|
82
|
+
const inProvider = (ui: ReactNode) => <LogicianProvider>{ui}</LogicianProvider>;
|
|
83
|
+
|
|
84
|
+
const withHeader = (rowCount: number) =>
|
|
85
|
+
inProvider(
|
|
86
|
+
<TableContainer>
|
|
87
|
+
<Table>
|
|
88
|
+
<Thead>
|
|
89
|
+
<Tr>
|
|
90
|
+
<Th isSticky stickyDirection="left" stickyIndex={0}>
|
|
91
|
+
name
|
|
92
|
+
</Th>
|
|
93
|
+
<Th>other</Th>
|
|
94
|
+
</Tr>
|
|
95
|
+
</Thead>
|
|
96
|
+
<Tbody>{rows(rowCount)}</Tbody>
|
|
97
|
+
</Table>
|
|
98
|
+
</TableContainer>
|
|
99
|
+
);
|
|
100
|
+
|
|
101
|
+
describe('sticky column width — measured once, not once per row', () => {
|
|
102
|
+
it('one observer for the column, however many rows there are', () => {
|
|
103
|
+
render(withHeader(30));
|
|
104
|
+
expect(
|
|
105
|
+
counters.observers,
|
|
106
|
+
'한 열의 너비는 하나인데 행마다 관찰자를 달고 있다'
|
|
107
|
+
).toBe(1);
|
|
108
|
+
});
|
|
109
|
+
|
|
110
|
+
it('adding rows does not add measurements', () => {
|
|
111
|
+
render(withHeader(5));
|
|
112
|
+
const withFive = counters.gbcr;
|
|
113
|
+
counters.gbcr = 0;
|
|
114
|
+
render(withHeader(50));
|
|
115
|
+
expect(
|
|
116
|
+
counters.gbcr,
|
|
117
|
+
'행이 10배가 됐는데 측정 횟수가 따라 늘었다 — 가상 스크롤에서 이게 스크롤 비용이 된다'
|
|
118
|
+
).toBeLessThanOrEqual(withFive);
|
|
119
|
+
});
|
|
120
|
+
|
|
121
|
+
it('a table with no header row still gets a width', () => {
|
|
122
|
+
// 헤더가 없으면 아무도 재지 않아 오프셋이 전부 0이 된다. 그때는 첫 본문 셀이
|
|
123
|
+
// 대신 잰다 — 그래서 body 셀의 측정을 통째로 없애지 않았다.
|
|
124
|
+
render(
|
|
125
|
+
inProvider(
|
|
126
|
+
<TableContainer>
|
|
127
|
+
<Table>
|
|
128
|
+
<Tbody>{rows(20)}</Tbody>
|
|
129
|
+
</Table>
|
|
130
|
+
</TableContainer>
|
|
131
|
+
)
|
|
132
|
+
);
|
|
133
|
+
expect(
|
|
134
|
+
counters.gbcr,
|
|
135
|
+
'헤더 없는 표에서 아무도 너비를 재지 않았다'
|
|
136
|
+
).toBeGreaterThan(0);
|
|
137
|
+
});
|
|
138
|
+
});
|
|
@@ -7,30 +7,68 @@ interface UseRegisterStickyWidthOptions {
|
|
|
7
7
|
direction: StickyDirection;
|
|
8
8
|
index: number;
|
|
9
9
|
register: (direction: StickyDirection, index: number, width: number) => void;
|
|
10
|
+
/**
|
|
11
|
+
* Whether some cell has already measured this column. Body cells use it to
|
|
12
|
+
* skip; header cells ignore it (they are the authority).
|
|
13
|
+
*/
|
|
14
|
+
hasWidth: (direction: StickyDirection, index: number) => boolean;
|
|
15
|
+
/**
|
|
16
|
+
* `header` — one cell per column, mounted for the table's lifetime. It owns
|
|
17
|
+
* the measurement and keeps a `ResizeObserver` so the width follows later
|
|
18
|
+
* layout changes.
|
|
19
|
+
*
|
|
20
|
+
* `body` — one cell per column *per row*. It measures only when no width is
|
|
21
|
+
* known yet (a table with no header row) and never observes.
|
|
22
|
+
*/
|
|
23
|
+
role: 'header' | 'body';
|
|
10
24
|
}
|
|
11
25
|
|
|
12
26
|
/**
|
|
13
|
-
* Keep a sticky
|
|
27
|
+
* Keep a sticky column's measured width registered with the table context, so
|
|
28
|
+
* the cumulative sticky offsets stay correct across layout changes — a web-font
|
|
29
|
+
* swap that reflows the text, a window/sidebar resize, or the columns shrinking
|
|
30
|
+
* when the table goes from fitting its container to overflowing it. Without a
|
|
31
|
+
* live measurement the offsets are computed once from stale widths and the
|
|
32
|
+
* pinned columns visibly detach (a gap opens and neighbours collapse).
|
|
14
33
|
*
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
*
|
|
20
|
-
* from stale widths and the pinned columns visibly detach (an empty gap opens
|
|
21
|
-
* between them and neighbouring columns collapse).
|
|
34
|
+
* **A column's width is one number, so it is measured once — by the header.**
|
|
35
|
+
* Every cell used to measure itself and attach its own `ResizeObserver`. In a
|
|
36
|
+
* static table that is merely redundant; in a virtualised one it is the
|
|
37
|
+
* dominant cost of scrolling, because rows mount and unmount continuously and
|
|
38
|
+
* each mount forces a synchronous layout.
|
|
22
39
|
*
|
|
23
|
-
*
|
|
24
|
-
*
|
|
40
|
+
* Measured on a 12,000-row admin table (production build, 10 scroll steps):
|
|
41
|
+
* 680 `getBoundingClientRect` calls and 280 `ResizeObserver`s created — 68
|
|
42
|
+
* measurements and 28 observers per scroll step, for three sticky columns whose
|
|
43
|
+
* widths never changed. `getBoundingClientRect` alone was 11.9% of profiled CPU.
|
|
44
|
+
*
|
|
45
|
+
* Body cells still measure when nothing else has: a table with sticky columns
|
|
46
|
+
* and no header row would otherwise get zero offsets. In that case the first
|
|
47
|
+
* body cell to mount supplies the width and the rest skip.
|
|
25
48
|
*/
|
|
26
49
|
export function useRegisterStickyWidth(
|
|
27
50
|
ref: RefObject<HTMLTableCellElement | null>,
|
|
28
|
-
{
|
|
51
|
+
{
|
|
52
|
+
isSticky,
|
|
53
|
+
direction,
|
|
54
|
+
index,
|
|
55
|
+
register,
|
|
56
|
+
hasWidth,
|
|
57
|
+
role,
|
|
58
|
+
}: UseRegisterStickyWidthOptions
|
|
29
59
|
) {
|
|
30
60
|
useEffect(() => {
|
|
31
61
|
const node = ref.current;
|
|
32
62
|
if (!isSticky || !node) return;
|
|
33
63
|
|
|
64
|
+
if (role === 'body') {
|
|
65
|
+
// Header already measured this column (the usual case) — nothing to do,
|
|
66
|
+
// and crucially no observer to attach and tear down on every scroll.
|
|
67
|
+
if (hasWidth(direction, index)) return;
|
|
68
|
+
register(direction, index, node.getBoundingClientRect().width);
|
|
69
|
+
return;
|
|
70
|
+
}
|
|
71
|
+
|
|
34
72
|
register(direction, index, node.getBoundingClientRect().width);
|
|
35
73
|
|
|
36
74
|
if (typeof ResizeObserver === 'undefined') return;
|
|
@@ -41,5 +79,5 @@ export function useRegisterStickyWidth(
|
|
|
41
79
|
observer.observe(node);
|
|
42
80
|
|
|
43
81
|
return () => observer.disconnect();
|
|
44
|
-
}, [ref, isSticky, direction, index, register]);
|
|
82
|
+
}, [ref, isSticky, direction, index, register, hasWidth, role]);
|
|
45
83
|
}
|