@cloudscape-design/components 3.0.615 → 3.0.617
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/icon/icons.js +1 -1
- package/icon/interfaces.d.ts +1 -1
- package/icon/interfaces.d.ts.map +1 -1
- package/icon/interfaces.js.map +1 -1
- package/internal/direction.d.ts +6 -0
- package/internal/direction.d.ts.map +1 -1
- package/internal/direction.js +10 -0
- package/internal/direction.js.map +1 -1
- package/internal/environment.js +1 -1
- package/internal/environment.json +1 -1
- package/internal/generated/styles/tokens.d.ts +346 -1
- package/internal/generated/styles/tokens.js +346 -1
- package/internal/manifest.json +1 -1
- package/internal/utils/handle-key.d.ts +4 -3
- package/internal/utils/handle-key.d.ts.map +1 -1
- package/internal/utils/handle-key.js +7 -1
- package/internal/utils/handle-key.js.map +1 -1
- package/package.json +1 -1
- package/table/body-cell/styles.css.js +43 -43
- package/table/body-cell/styles.scoped.css +173 -161
- package/table/body-cell/styles.selectors.js +43 -43
- package/table/expandable-rows/styles.css.js +3 -3
- package/table/expandable-rows/styles.scoped.css +17 -11
- package/table/expandable-rows/styles.selectors.js +3 -3
- package/table/header-cell/styles.css.js +26 -25
- package/table/header-cell/styles.scoped.css +58 -50
- package/table/header-cell/styles.selectors.js +26 -25
- package/table/internal.d.ts.map +1 -1
- package/table/internal.js +6 -3
- package/table/internal.js.map +1 -1
- package/table/no-data-cell.js +5 -5
- package/table/no-data-cell.js.map +1 -1
- package/table/resizer/index.d.ts.map +1 -1
- package/table/resizer/index.js +42 -32
- package/table/resizer/index.js.map +1 -1
- package/table/resizer/resizer-lookup.d.ts.map +1 -1
- package/table/resizer/resizer-lookup.js +2 -2
- package/table/resizer/resizer-lookup.js.map +1 -1
- package/table/sticky-columns/interfaces.d.ts +9 -9
- package/table/sticky-columns/interfaces.d.ts.map +1 -1
- package/table/sticky-columns/interfaces.js.map +1 -1
- package/table/sticky-columns/use-sticky-columns.d.ts +3 -3
- package/table/sticky-columns/use-sticky-columns.d.ts.map +1 -1
- package/table/sticky-columns/use-sticky-columns.js +33 -29
- package/table/sticky-columns/use-sticky-columns.js.map +1 -1
- package/table/sticky-columns/utils.d.ts.map +1 -1
- package/table/sticky-columns/utils.js +16 -14
- package/table/sticky-columns/utils.js.map +1 -1
- package/table/sticky-scrollbar/use-sticky-scrollbar.d.ts.map +1 -1
- package/table/sticky-scrollbar/use-sticky-scrollbar.js +15 -10
- package/table/sticky-scrollbar/use-sticky-scrollbar.js.map +1 -1
- package/table/sticky-scrolling.d.ts.map +1 -1
- package/table/sticky-scrolling.js +6 -5
- package/table/sticky-scrolling.js.map +1 -1
- package/table/table-role/grid-navigation.d.ts.map +1 -1
- package/table/table-role/grid-navigation.js +35 -44
- package/table/table-role/grid-navigation.js.map +1 -1
- package/table/use-column-widths.d.ts.map +1 -1
- package/table/use-column-widths.js +2 -2
- package/table/use-column-widths.js.map +1 -1
- package/table/use-sticky-header.js +2 -2
- package/table/use-sticky-header.js.map +1 -1
- package/table/utils.js +3 -3
- package/table/utils.js.map +1 -1
|
@@ -34,9 +34,9 @@ interface UpdateCellStylesProps {
|
|
|
34
34
|
}
|
|
35
35
|
export default class StickyColumnsStore extends AsyncStore<StickyColumnsState> {
|
|
36
36
|
private cellOffsets;
|
|
37
|
-
private
|
|
38
|
-
private
|
|
39
|
-
private
|
|
37
|
+
private isStuckToTheInlineStart;
|
|
38
|
+
private isStuckToTheInlineEnd;
|
|
39
|
+
private padInlineStart;
|
|
40
40
|
constructor();
|
|
41
41
|
updateCellStyles(props: UpdateCellStylesProps): void;
|
|
42
42
|
private updateScroll;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-sticky-columns.d.ts","sourceRoot":"","sources":["../../../../src/table/sticky-columns/use-sticky-columns.ts"],"names":[],"mappings":"AAGA,OAAO,KAAkD,MAAM,OAAO,CAAC;AACvE,OAAO,UAAU,EAAE,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAG9E,OAAO,EAEL,sBAAsB,EACtB,kBAAkB,EAClB,kBAAkB,EAEnB,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"use-sticky-columns.d.ts","sourceRoot":"","sources":["../../../../src/table/sticky-columns/use-sticky-columns.ts"],"names":[],"mappings":"AAGA,OAAO,KAAkD,MAAM,OAAO,CAAC;AACvE,OAAO,UAAU,EAAE,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAG9E,OAAO,EAEL,sBAAsB,EACtB,kBAAkB,EAClB,kBAAkB,EAEnB,MAAM,cAAc,CAAC;AAQtB,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,kBAAkB,CAAC,kBAAkB,CAAC,CAAC;IAC9C,KAAK,EAAE;QACL,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAC/B,CAAC;IACF,IAAI,EAAE;QACJ,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;QACtC,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;QACxC,IAAI,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,GAAG,WAAW,KAAK,IAAI,CAAC;KACjE,CAAC;CACH;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,cAAc,EACd,kBAAkB,EAClB,iBAAiB,GAClB,EAAE,kBAAkB,GAAG,kBAAkB,CAgGzC;AAED,UAAU,wBAAwB;IAChC,aAAa,EAAE,kBAAkB,CAAC;IAClC,QAAQ,EAAE,WAAW,CAAC;IACtB,YAAY,EAAE,CAAC,MAAM,EAAE,IAAI,GAAG,sBAAsB,KAAK,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAClF;AAED,UAAU,gBAAgB;IACxB,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,wBAAgB,mBAAmB,CAAC,EAClC,aAAa,EACb,QAAQ,EACR,YAAY,GACb,EAAE,wBAAwB,GAAG,gBAAgB,CA8D7C;AAED,UAAU,qBAAqB;IAC7B,OAAO,EAAE,WAAW,CAAC;IACrB,KAAK,EAAE,WAAW,CAAC;IACnB,KAAK,EAAE,GAAG,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;IACrC,cAAc,EAAE,SAAS,WAAW,EAAE,CAAC;IACvC,kBAAkB,EAAE,MAAM,CAAC;IAC3B,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,UAAU,CAAC,kBAAkB,CAAC;IAC5E,OAAO,CAAC,WAAW,CAIjB;IACF,OAAO,CAAC,uBAAuB,CAAS;IACxC,OAAO,CAAC,qBAAqB,CAAS;IACtC,OAAO,CAAC,cAAc,CAAS;;IAMxB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB;IAiBpD,OAAO,CAAC,YAAY;IAiBpB,OAAO,CAAC,kBAAkB,CAiCxB;IAEF,OAAO,CAAC,iBAAiB,CAEvB;IAEF,OAAO,CAAC,SAAS,CAuBf;CACH"}
|
|
@@ -5,6 +5,7 @@ import AsyncStore from '../../area-chart/async-store';
|
|
|
5
5
|
import clsx from 'clsx';
|
|
6
6
|
import { useResizeObserver, useStableCallback } from '@cloudscape-design/component-toolkit/internal';
|
|
7
7
|
import { isCellStatesEqual, isWrapperStatesEqual, updateCellOffsets } from './utils';
|
|
8
|
+
import { getScrollInlineStart, getLogicalBoundingClientRect } from '../../internal/direction';
|
|
8
9
|
// We allow the table to have a minimum of 148px of available space besides the sum of the widths of the sticky columns
|
|
9
10
|
// This value is an UX recommendation and is approximately 1/3 of our smallest breakpoint (465px)
|
|
10
11
|
const MINIMUM_SCROLLABLE_SPACE = 148;
|
|
@@ -51,8 +52,8 @@ export function useStickyColumns({ visibleColumns, stickyColumnsFirst, stickyCol
|
|
|
51
52
|
return;
|
|
52
53
|
}
|
|
53
54
|
if (wrapperRef.current) {
|
|
54
|
-
wrapperRef.current.style.
|
|
55
|
-
wrapperRef.current.style.
|
|
55
|
+
wrapperRef.current.style.scrollPaddingInlineStart = state.scrollPaddingInlineStart + 'px';
|
|
56
|
+
wrapperRef.current.style.scrollPaddingInlineEnd = state.scrollPaddingInlineEnd + 'px';
|
|
56
57
|
}
|
|
57
58
|
};
|
|
58
59
|
const unsubscribe = store.subscribe(selector, (newState, prevState) => updateWrapperStyles(selector(newState), selector(prevState)));
|
|
@@ -116,8 +117,10 @@ export function useStickyCellStyles({ stickyColumns, columnId, getClassName, })
|
|
|
116
117
|
cellElement.classList.remove(key);
|
|
117
118
|
}
|
|
118
119
|
});
|
|
119
|
-
cellElement.style.
|
|
120
|
-
|
|
120
|
+
cellElement.style.insetInlineStart =
|
|
121
|
+
(state === null || state === void 0 ? void 0 : state.offset.insetInlineStart) !== undefined ? `${state.offset.insetInlineStart}px` : '';
|
|
122
|
+
cellElement.style.insetInlineEnd =
|
|
123
|
+
(state === null || state === void 0 ? void 0 : state.offset.insetInlineEnd) !== undefined ? `${state.offset.insetInlineEnd}px` : '';
|
|
121
124
|
}
|
|
122
125
|
};
|
|
123
126
|
// If the node is not null (i.e., the table cell is being mounted or updated, not unmounted),
|
|
@@ -141,15 +144,15 @@ export function useStickyCellStyles({ stickyColumns, columnId, getClassName, })
|
|
|
141
144
|
}
|
|
142
145
|
export default class StickyColumnsStore extends AsyncStore {
|
|
143
146
|
constructor() {
|
|
144
|
-
super({ cellState: new Map(), wrapperState: {
|
|
147
|
+
super({ cellState: new Map(), wrapperState: { scrollPaddingInlineStart: 0, scrollPaddingInlineEnd: 0 } });
|
|
145
148
|
this.cellOffsets = {
|
|
146
149
|
offsets: new Map(),
|
|
147
|
-
|
|
148
|
-
|
|
150
|
+
stickyWidthInlineStart: 0,
|
|
151
|
+
stickyWidthInlineEnd: 0,
|
|
149
152
|
};
|
|
150
|
-
this.
|
|
151
|
-
this.
|
|
152
|
-
this.
|
|
153
|
+
this.isStuckToTheInlineStart = false;
|
|
154
|
+
this.isStuckToTheInlineEnd = false;
|
|
155
|
+
this.padInlineStart = false;
|
|
153
156
|
this.generateCellStyles = (props) => {
|
|
154
157
|
const isEnabled = this.isEnabled(props);
|
|
155
158
|
const lastLeftStickyColumnIndex = props.stickyColumnsFirst - 1;
|
|
@@ -158,10 +161,10 @@ export default class StickyColumnsStore extends AsyncStore {
|
|
|
158
161
|
var _a, _b, _c, _d;
|
|
159
162
|
let stickySide = 'non-sticky';
|
|
160
163
|
if (index < props.stickyColumnsFirst) {
|
|
161
|
-
stickySide = '
|
|
164
|
+
stickySide = 'inline-start';
|
|
162
165
|
}
|
|
163
166
|
else if (index >= props.visibleColumns.length - props.stickyColumnsLast) {
|
|
164
|
-
stickySide = '
|
|
167
|
+
stickySide = 'inline-end';
|
|
165
168
|
}
|
|
166
169
|
if (!isEnabled || stickySide === 'non-sticky') {
|
|
167
170
|
return acc;
|
|
@@ -171,12 +174,12 @@ export default class StickyColumnsStore extends AsyncStore {
|
|
|
171
174
|
const stickyColumnOffsetLeft = (_b = (_a = this.cellOffsets.offsets.get(columnId)) === null || _a === void 0 ? void 0 : _a.first) !== null && _b !== void 0 ? _b : 0;
|
|
172
175
|
const stickyColumnOffsetRight = (_d = (_c = this.cellOffsets.offsets.get(columnId)) === null || _c === void 0 ? void 0 : _c.last) !== null && _d !== void 0 ? _d : 0;
|
|
173
176
|
acc.set(columnId, {
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
+
padInlineStart: isFirstColumn && this.padInlineStart,
|
|
178
|
+
lastInsetInlineStart: this.isStuckToTheInlineStart && lastLeftStickyColumnIndex === index,
|
|
179
|
+
lastInsetInlineEnd: this.isStuckToTheInlineEnd && lastRightStickyColumnIndex === index,
|
|
177
180
|
offset: {
|
|
178
|
-
|
|
179
|
-
|
|
181
|
+
insetInlineStart: stickySide === 'inline-start' ? stickyColumnOffsetLeft : undefined,
|
|
182
|
+
insetInlineEnd: stickySide === 'inline-end' ? stickyColumnOffsetRight : undefined,
|
|
180
183
|
},
|
|
181
184
|
});
|
|
182
185
|
return acc;
|
|
@@ -190,13 +193,13 @@ export default class StickyColumnsStore extends AsyncStore {
|
|
|
190
193
|
if (noStickyColumns) {
|
|
191
194
|
return false;
|
|
192
195
|
}
|
|
193
|
-
const wrapperWidth = props.wrapper
|
|
194
|
-
const tableWidth = props.table
|
|
196
|
+
const wrapperWidth = getLogicalBoundingClientRect(props.wrapper).inlineSize;
|
|
197
|
+
const tableWidth = getLogicalBoundingClientRect(props.table).inlineSize;
|
|
195
198
|
const isWrapperScrollable = tableWidth > wrapperWidth;
|
|
196
199
|
if (!isWrapperScrollable) {
|
|
197
200
|
return false;
|
|
198
201
|
}
|
|
199
|
-
const totalStickySpace = this.cellOffsets.
|
|
202
|
+
const totalStickySpace = this.cellOffsets.stickyWidthInlineStart + this.cellOffsets.stickyWidthInlineEnd;
|
|
200
203
|
const tablePaddingLeft = parseFloat(getComputedStyle(props.table).paddingLeft) || 0;
|
|
201
204
|
const tablePaddingRight = parseFloat(getComputedStyle(props.table).paddingRight) || 0;
|
|
202
205
|
const hasEnoughScrollableSpace = totalStickySpace + MINIMUM_SCROLLABLE_SPACE + tablePaddingLeft + tablePaddingRight < wrapperWidth;
|
|
@@ -215,23 +218,24 @@ export default class StickyColumnsStore extends AsyncStore {
|
|
|
215
218
|
this.set(() => ({
|
|
216
219
|
cellState: this.generateCellStyles(props),
|
|
217
220
|
wrapperState: {
|
|
218
|
-
|
|
219
|
-
|
|
221
|
+
scrollPaddingInlineStart: this.cellOffsets.stickyWidthInlineStart,
|
|
222
|
+
scrollPaddingInlineEnd: this.cellOffsets.stickyWidthInlineEnd,
|
|
220
223
|
},
|
|
221
224
|
}));
|
|
222
225
|
}
|
|
223
226
|
}
|
|
224
227
|
updateScroll(props) {
|
|
225
|
-
const
|
|
228
|
+
const wrapperScrollInlineStart = getScrollInlineStart(props.wrapper);
|
|
226
229
|
const wrapperScrollWidth = props.wrapper.scrollWidth;
|
|
227
230
|
const wrapperClientWidth = props.wrapper.clientWidth;
|
|
228
|
-
const
|
|
229
|
-
const
|
|
230
|
-
this.
|
|
231
|
-
// Math.ceil() is used here to address an edge-case in certain browsers, where they return non-integer
|
|
231
|
+
const tablePaddingInlineStart = parseFloat(getComputedStyle(props.table).paddingInlineStart) || 0;
|
|
232
|
+
const tablePaddingInlineEnd = parseFloat(getComputedStyle(props.table).paddingInlineEnd) || 0;
|
|
233
|
+
this.isStuckToTheInlineStart = wrapperScrollInlineStart > tablePaddingInlineStart;
|
|
234
|
+
// Math.ceil() is used here to address an edge-case in certain browsers, where they return non-integer wrapperScrollInlineStart values
|
|
232
235
|
// which are lower than expected (sub-pixel difference), resulting in the table always being in the "stuck to the right" state
|
|
233
|
-
this.
|
|
234
|
-
|
|
236
|
+
this.isStuckToTheInlineEnd =
|
|
237
|
+
Math.ceil(wrapperScrollInlineStart) < wrapperScrollWidth - wrapperClientWidth - tablePaddingInlineEnd;
|
|
238
|
+
this.padInlineStart = tablePaddingInlineStart !== 0 && this.isStuckToTheInlineStart;
|
|
235
239
|
}
|
|
236
240
|
}
|
|
237
241
|
//# sourceMappingURL=use-sticky-columns.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-sticky-columns.js","sourceRoot":"","sources":["../../../../src/table/sticky-columns/use-sticky-columns.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useCallback, useEffect, useMemo, useRef } from 'react';\nimport AsyncStore, { ReadonlyAsyncStore } from '../../area-chart/async-store';\nimport clsx from 'clsx';\nimport { useResizeObserver, useStableCallback } from '@cloudscape-design/component-toolkit/internal';\nimport {\n CellOffsets,\n StickyColumnsCellState,\n StickyColumnsProps,\n StickyColumnsState,\n StickyColumnsWrapperState,\n} from './interfaces';\nimport { isCellStatesEqual, isWrapperStatesEqual, updateCellOffsets } from './utils';\n\n// We allow the table to have a minimum of 148px of available space besides the sum of the widths of the sticky columns\n// This value is an UX recommendation and is approximately 1/3 of our smallest breakpoint (465px)\nconst MINIMUM_SCROLLABLE_SPACE = 148;\n\nexport interface StickyColumnsModel {\n store: ReadonlyAsyncStore<StickyColumnsState>;\n style: {\n wrapper?: React.CSSProperties;\n };\n refs: {\n table: React.RefCallback<HTMLElement>;\n wrapper: React.RefCallback<HTMLElement>;\n cell: (columnId: PropertyKey, node: null | HTMLElement) => void;\n };\n}\n\nexport function useStickyColumns({\n visibleColumns,\n stickyColumnsFirst,\n stickyColumnsLast,\n}: StickyColumnsProps): StickyColumnsModel {\n const store = useMemo(() => new StickyColumnsStore(), []);\n const wrapperRef = useRef<HTMLElement>(null) as React.MutableRefObject<null | HTMLElement>;\n const tableRef = useRef<HTMLElement>(null) as React.MutableRefObject<null | HTMLElement>;\n const cellsRef = useRef(new Map<PropertyKey, HTMLElement>());\n\n const hasStickyColumns = stickyColumnsFirst + stickyColumnsLast > 0;\n\n const updateStickyStyles = useStableCallback(() => {\n if (wrapperRef.current && tableRef.current) {\n store.updateCellStyles({\n wrapper: wrapperRef.current,\n table: tableRef.current,\n cells: cellsRef.current,\n visibleColumns,\n stickyColumnsFirst,\n stickyColumnsLast,\n });\n }\n });\n\n useResizeObserver(wrapperRef, updateStickyStyles);\n\n useResizeObserver(tableRef, updateStickyStyles);\n\n useEffect(() => {\n if (wrapperRef.current && tableRef.current) {\n store.updateCellStyles({\n wrapper: wrapperRef.current,\n table: tableRef.current,\n cells: cellsRef.current,\n visibleColumns,\n stickyColumnsFirst,\n stickyColumnsLast,\n });\n }\n }, [store, stickyColumnsFirst, stickyColumnsLast, visibleColumns]);\n\n // Update wrapper styles imperatively to avoid unnecessary re-renders.\n useEffect(() => {\n if (!hasStickyColumns) {\n return;\n }\n\n const selector = (state: StickyColumnsState) => state.wrapperState;\n\n const updateWrapperStyles = (state: StickyColumnsWrapperState, prev: StickyColumnsWrapperState) => {\n if (isWrapperStatesEqual(state, prev)) {\n return;\n }\n\n if (wrapperRef.current) {\n wrapperRef.current.style.scrollPaddingLeft = state.scrollPaddingLeft + 'px';\n wrapperRef.current.style.scrollPaddingRight = state.scrollPaddingRight + 'px';\n }\n };\n\n const unsubscribe = store.subscribe(selector, (newState, prevState) =>\n updateWrapperStyles(selector(newState), selector(prevState))\n );\n return unsubscribe;\n }, [store, hasStickyColumns]);\n\n const setWrapper = useCallback(\n (node: null | HTMLElement) => {\n if (wrapperRef.current) {\n wrapperRef.current.removeEventListener('scroll', updateStickyStyles);\n }\n if (node && hasStickyColumns) {\n node.addEventListener('scroll', updateStickyStyles);\n }\n wrapperRef.current = node;\n },\n [hasStickyColumns, updateStickyStyles]\n );\n\n const setTable = useCallback((node: null | HTMLElement) => {\n tableRef.current = node;\n }, []);\n\n const setCell = useCallback((columnId: PropertyKey, node: null | HTMLElement) => {\n if (node) {\n cellsRef.current.set(columnId, node);\n } else {\n cellsRef.current.delete(columnId);\n }\n }, []);\n\n return {\n store,\n style: {\n // Provide wrapper styles as props so that a re-render won't cause invalidation.\n wrapper: hasStickyColumns ? { ...store.get().wrapperState } : undefined,\n },\n refs: { wrapper: setWrapper, table: setTable, cell: setCell },\n };\n}\n\ninterface UseStickyCellStylesProps {\n stickyColumns: StickyColumnsModel;\n columnId: PropertyKey;\n getClassName: (styles: null | StickyColumnsCellState) => Record<string, boolean>;\n}\n\ninterface StickyCellStyles {\n ref: React.RefCallback<HTMLElement>;\n className?: string;\n style?: React.CSSProperties;\n}\n\nexport function useStickyCellStyles({\n stickyColumns,\n columnId,\n getClassName,\n}: UseStickyCellStylesProps): StickyCellStyles {\n const setCell = stickyColumns.refs.cell;\n\n // unsubscribeRef to hold the function to unsubscribe from the store's updates\n const unsubscribeRef = useRef<null | (() => void)>(null);\n\n // refCallback updates the cell ref and sets up the store subscription\n const refCallback = useCallback(\n (cellElement: null | HTMLElement) => {\n if (unsubscribeRef.current) {\n // Unsubscribe before we do any updates to avoid leaving any subscriptions hanging\n unsubscribeRef.current();\n }\n\n // Update cellRef and the store's state to point to the new DOM node\n setCell(columnId, cellElement);\n\n // Update cell styles imperatively to avoid unnecessary re-renders.\n const selector = (state: StickyColumnsState) => state.cellState.get(columnId) ?? null;\n\n const updateCellStyles = (state: null | StickyColumnsCellState, prev: null | StickyColumnsCellState) => {\n if (isCellStatesEqual(state, prev)) {\n return;\n }\n\n const className = getClassName(state);\n if (cellElement) {\n Object.keys(className).forEach(key => {\n if (className[key]) {\n cellElement.classList.add(key);\n } else {\n cellElement.classList.remove(key);\n }\n });\n cellElement.style.left = state?.offset.left !== undefined ? `${state.offset.left}px` : '';\n cellElement.style.right = state?.offset.right !== undefined ? `${state.offset.right}px` : '';\n }\n };\n\n // If the node is not null (i.e., the table cell is being mounted or updated, not unmounted),\n // set up a new subscription to the store's updates\n if (cellElement) {\n unsubscribeRef.current = stickyColumns.store.subscribe(selector, (newState, prevState) => {\n updateCellStyles(selector(newState), selector(prevState));\n });\n }\n },\n\n // getClassName is expected to be pure\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [columnId, setCell, stickyColumns.store]\n );\n\n // Provide cell styles as props so that a re-render won't cause invalidation.\n const cellStyles = stickyColumns.store.get().cellState.get(columnId);\n return {\n ref: refCallback,\n className: cellStyles ? clsx(getClassName(cellStyles)) : undefined,\n style: cellStyles?.offset ?? undefined,\n };\n}\n\ninterface UpdateCellStylesProps {\n wrapper: HTMLElement;\n table: HTMLElement;\n cells: Map<PropertyKey, HTMLElement>;\n visibleColumns: readonly PropertyKey[];\n stickyColumnsFirst: number;\n stickyColumnsLast: number;\n}\n\nexport default class StickyColumnsStore extends AsyncStore<StickyColumnsState> {\n private cellOffsets: CellOffsets = {\n offsets: new Map(),\n stickyWidthLeft: 0,\n stickyWidthRight: 0,\n };\n private isStuckToTheLeft = false;\n private isStuckToTheRight = false;\n private padLeft = false;\n\n constructor() {\n super({ cellState: new Map(), wrapperState: { scrollPaddingLeft: 0, scrollPaddingRight: 0 } });\n }\n\n public updateCellStyles(props: UpdateCellStylesProps) {\n const hasStickyColumns = props.stickyColumnsFirst + props.stickyColumnsLast > 0;\n const hadStickyColumns = this.cellOffsets.offsets.size > 0;\n\n if (hasStickyColumns || hadStickyColumns) {\n this.updateScroll(props);\n this.updateCellOffsets(props);\n this.set(() => ({\n cellState: this.generateCellStyles(props),\n wrapperState: {\n scrollPaddingLeft: this.cellOffsets.stickyWidthLeft,\n scrollPaddingRight: this.cellOffsets.stickyWidthRight,\n },\n }));\n }\n }\n\n private updateScroll(props: UpdateCellStylesProps) {\n const wrapperScrollLeft = props.wrapper.scrollLeft;\n const wrapperScrollWidth = props.wrapper.scrollWidth;\n const wrapperClientWidth = props.wrapper.clientWidth;\n const tablePaddingLeft = parseFloat(getComputedStyle(props.table).paddingLeft) || 0;\n const tablePaddingRight = parseFloat(getComputedStyle(props.table).paddingRight) || 0;\n\n this.isStuckToTheLeft = wrapperScrollLeft > tablePaddingLeft;\n\n // Math.ceil() is used here to address an edge-case in certain browsers, where they return non-integer wrapperScrollLeft values\n // which are lower than expected (sub-pixel difference), resulting in the table always being in the \"stuck to the right\" state\n this.isStuckToTheRight = Math.ceil(wrapperScrollLeft) < wrapperScrollWidth - wrapperClientWidth - tablePaddingRight;\n\n this.padLeft = tablePaddingLeft !== 0 && this.isStuckToTheLeft;\n }\n\n private generateCellStyles = (props: UpdateCellStylesProps): Map<PropertyKey, StickyColumnsCellState> => {\n const isEnabled = this.isEnabled(props);\n const lastLeftStickyColumnIndex = props.stickyColumnsFirst - 1;\n const lastRightStickyColumnIndex = props.visibleColumns.length - props.stickyColumnsLast;\n\n return props.visibleColumns.reduce((acc, columnId, index) => {\n let stickySide = 'non-sticky';\n if (index < props.stickyColumnsFirst) {\n stickySide = 'left';\n } else if (index >= props.visibleColumns.length - props.stickyColumnsLast) {\n stickySide = 'right';\n }\n\n if (!isEnabled || stickySide === 'non-sticky') {\n return acc;\n }\n\n // Determine the offset of the sticky column using the `cellOffsets` state object\n const isFirstColumn = index === 0;\n const stickyColumnOffsetLeft = this.cellOffsets.offsets.get(columnId)?.first ?? 0;\n const stickyColumnOffsetRight = this.cellOffsets.offsets.get(columnId)?.last ?? 0;\n\n acc.set(columnId, {\n padLeft: isFirstColumn && this.padLeft,\n lastLeft: this.isStuckToTheLeft && lastLeftStickyColumnIndex === index,\n lastRight: this.isStuckToTheRight && lastRightStickyColumnIndex === index,\n offset: {\n left: stickySide === 'left' ? stickyColumnOffsetLeft : undefined,\n right: stickySide === 'right' ? stickyColumnOffsetRight : undefined,\n },\n });\n return acc;\n }, new Map<PropertyKey, StickyColumnsCellState>());\n };\n\n private updateCellOffsets = (props: UpdateCellStylesProps): void => {\n this.cellOffsets = updateCellOffsets(props.cells, props);\n };\n\n private isEnabled = (props: UpdateCellStylesProps): boolean => {\n const noStickyColumns = props.stickyColumnsFirst + props.stickyColumnsLast === 0;\n if (noStickyColumns) {\n return false;\n }\n\n const wrapperWidth = props.wrapper.getBoundingClientRect().width;\n const tableWidth = props.table.getBoundingClientRect().width;\n const isWrapperScrollable = tableWidth > wrapperWidth;\n if (!isWrapperScrollable) {\n return false;\n }\n\n const totalStickySpace = this.cellOffsets.stickyWidthLeft + this.cellOffsets.stickyWidthRight;\n const tablePaddingLeft = parseFloat(getComputedStyle(props.table).paddingLeft) || 0;\n const tablePaddingRight = parseFloat(getComputedStyle(props.table).paddingRight) || 0;\n const hasEnoughScrollableSpace =\n totalStickySpace + MINIMUM_SCROLLABLE_SPACE + tablePaddingLeft + tablePaddingRight < wrapperWidth;\n if (!hasEnoughScrollableSpace) {\n return false;\n }\n\n return true;\n };\n}\n"]}
|
|
1
|
+
{"version":3,"file":"use-sticky-columns.js","sourceRoot":"","sources":["../../../../src/table/sticky-columns/use-sticky-columns.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAc,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACvE,OAAO,UAAkC,MAAM,8BAA8B,CAAC;AAC9E,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AAQrG,OAAO,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AACrF,OAAO,EAAE,oBAAoB,EAAE,4BAA4B,EAAE,MAAM,0BAA0B,CAAC;AAE9F,uHAAuH;AACvH,iGAAiG;AACjG,MAAM,wBAAwB,GAAG,GAAG,CAAC;AAcrC,MAAM,UAAU,gBAAgB,CAAC,EAC/B,cAAc,EACd,kBAAkB,EAClB,iBAAiB,GACE;IACnB,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,kBAAkB,EAAE,EAAE,EAAE,CAAC,CAAC;IAC1D,MAAM,UAAU,GAAG,MAAM,CAAc,IAAI,CAA+C,CAAC;IAC3F,MAAM,QAAQ,GAAG,MAAM,CAAc,IAAI,CAA+C,CAAC;IACzF,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,GAAG,EAA4B,CAAC,CAAC;IAE7D,MAAM,gBAAgB,GAAG,kBAAkB,GAAG,iBAAiB,GAAG,CAAC,CAAC;IAEpE,MAAM,kBAAkB,GAAG,iBAAiB,CAAC,GAAG,EAAE;QAChD,IAAI,UAAU,CAAC,OAAO,IAAI,QAAQ,CAAC,OAAO,EAAE;YAC1C,KAAK,CAAC,gBAAgB,CAAC;gBACrB,OAAO,EAAE,UAAU,CAAC,OAAO;gBAC3B,KAAK,EAAE,QAAQ,CAAC,OAAO;gBACvB,KAAK,EAAE,QAAQ,CAAC,OAAO;gBACvB,cAAc;gBACd,kBAAkB;gBAClB,iBAAiB;aAClB,CAAC,CAAC;SACJ;IACH,CAAC,CAAC,CAAC;IAEH,iBAAiB,CAAC,UAAU,EAAE,kBAAkB,CAAC,CAAC;IAElD,iBAAiB,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CAAC;IAEhD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,UAAU,CAAC,OAAO,IAAI,QAAQ,CAAC,OAAO,EAAE;YAC1C,KAAK,CAAC,gBAAgB,CAAC;gBACrB,OAAO,EAAE,UAAU,CAAC,OAAO;gBAC3B,KAAK,EAAE,QAAQ,CAAC,OAAO;gBACvB,KAAK,EAAE,QAAQ,CAAC,OAAO;gBACvB,cAAc;gBACd,kBAAkB;gBAClB,iBAAiB;aAClB,CAAC,CAAC;SACJ;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,cAAc,CAAC,CAAC,CAAC;IAEnE,sEAAsE;IACtE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,gBAAgB,EAAE;YACrB,OAAO;SACR;QAED,MAAM,QAAQ,GAAG,CAAC,KAAyB,EAAE,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC;QAEnE,MAAM,mBAAmB,GAAG,CAAC,KAAgC,EAAE,IAA+B,EAAE,EAAE;YAChG,IAAI,oBAAoB,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE;gBACrC,OAAO;aACR;YAED,IAAI,UAAU,CAAC,OAAO,EAAE;gBACtB,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,wBAAwB,GAAG,KAAK,CAAC,wBAAwB,GAAG,IAAI,CAAC;gBAC1F,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,sBAAsB,GAAG,KAAK,CAAC,sBAAsB,GAAG,IAAI,CAAC;aACvF;QACH,CAAC,CAAC;QAEF,MAAM,WAAW,GAAG,KAAK,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,EAAE,CACpE,mBAAmB,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC,CAAC,CAC7D,CAAC;QACF,OAAO,WAAW,CAAC;IACrB,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAE9B,MAAM,UAAU,GAAG,WAAW,CAC5B,CAAC,IAAwB,EAAE,EAAE;QAC3B,IAAI,UAAU,CAAC,OAAO,EAAE;YACtB,UAAU,CAAC,OAAO,CAAC,mBAAmB,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CAAC;SACtE;QACD,IAAI,IAAI,IAAI,gBAAgB,EAAE;YAC5B,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CAAC;SACrD;QACD,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC;IAC5B,CAAC,EACD,CAAC,gBAAgB,EAAE,kBAAkB,CAAC,CACvC,CAAC;IAEF,MAAM,QAAQ,GAAG,WAAW,CAAC,CAAC,IAAwB,EAAE,EAAE;QACxD,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;IAC1B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,OAAO,GAAG,WAAW,CAAC,CAAC,QAAqB,EAAE,IAAwB,EAAE,EAAE;QAC9E,IAAI,IAAI,EAAE;YACR,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;SACtC;aAAM;YACL,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;SACnC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO;QACL,KAAK;QACL,KAAK,EAAE;YACL,gFAAgF;YAChF,OAAO,EAAE,gBAAgB,CAAC,CAAC,mBAAM,KAAK,CAAC,GAAG,EAAE,CAAC,YAAY,EAAG,CAAC,CAAC,SAAS;SACxE;QACD,IAAI,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE;KAC9D,CAAC;AACJ,CAAC;AAcD,MAAM,UAAU,mBAAmB,CAAC,EAClC,aAAa,EACb,QAAQ,EACR,YAAY,GACa;;IACzB,MAAM,OAAO,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC;IAExC,8EAA8E;IAC9E,MAAM,cAAc,GAAG,MAAM,CAAsB,IAAI,CAAC,CAAC;IAEzD,sEAAsE;IACtE,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,WAA+B,EAAE,EAAE;QAClC,IAAI,cAAc,CAAC,OAAO,EAAE;YAC1B,kFAAkF;YAClF,cAAc,CAAC,OAAO,EAAE,CAAC;SAC1B;QAED,oEAAoE;QACpE,OAAO,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC;QAE/B,mEAAmE;QACnE,MAAM,QAAQ,GAAG,CAAC,KAAyB,EAAE,EAAE,WAAC,OAAA,MAAA,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,mCAAI,IAAI,CAAA,EAAA,CAAC;QAEtF,MAAM,gBAAgB,GAAG,CAAC,KAAoC,EAAE,IAAmC,EAAE,EAAE;YACrG,IAAI,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE;gBAClC,OAAO;aACR;YAED,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;YACtC,IAAI,WAAW,EAAE;gBACf,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;oBACnC,IAAI,SAAS,CAAC,GAAG,CAAC,EAAE;wBAClB,WAAW,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;qBAChC;yBAAM;wBACL,WAAW,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;qBACnC;gBACH,CAAC,CAAC,CAAC;gBACH,WAAW,CAAC,KAAK,CAAC,gBAAgB;oBAChC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,CAAC,gBAAgB,MAAK,SAAS,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,gBAAgB,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;gBAC3F,WAAW,CAAC,KAAK,CAAC,cAAc;oBAC9B,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,CAAC,cAAc,MAAK,SAAS,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,cAAc,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;aACxF;QACH,CAAC,CAAC;QAEF,6FAA6F;QAC7F,mDAAmD;QACnD,IAAI,WAAW,EAAE;YACf,cAAc,CAAC,OAAO,GAAG,aAAa,CAAC,KAAK,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,EAAE;gBACvF,gBAAgB,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC;YAC5D,CAAC,CAAC,CAAC;SACJ;IACH,CAAC;IAED,sCAAsC;IACtC,uDAAuD;IACvD,CAAC,QAAQ,EAAE,OAAO,EAAE,aAAa,CAAC,KAAK,CAAC,CACzC,CAAC;IAEF,6EAA6E;IAC7E,MAAM,UAAU,GAAG,aAAa,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IACrE,OAAO;QACL,GAAG,EAAE,WAAW;QAChB,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS;QAClE,KAAK,EAAE,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,MAAM,mCAAI,SAAS;KACvC,CAAC;AACJ,CAAC;AAWD,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,UAA8B;IAU5E;QACE,KAAK,CAAC,EAAE,SAAS,EAAE,IAAI,GAAG,EAAE,EAAE,YAAY,EAAE,EAAE,wBAAwB,EAAE,CAAC,EAAE,sBAAsB,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;QAVpG,gBAAW,GAAgB;YACjC,OAAO,EAAE,IAAI,GAAG,EAAE;YAClB,sBAAsB,EAAE,CAAC;YACzB,oBAAoB,EAAE,CAAC;SACxB,CAAC;QACM,4BAAuB,GAAG,KAAK,CAAC;QAChC,0BAAqB,GAAG,KAAK,CAAC;QAC9B,mBAAc,GAAG,KAAK,CAAC;QAwCvB,uBAAkB,GAAG,CAAC,KAA4B,EAA4C,EAAE;YACtG,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;YACxC,MAAM,yBAAyB,GAAG,KAAK,CAAC,kBAAkB,GAAG,CAAC,CAAC;YAC/D,MAAM,0BAA0B,GAAG,KAAK,CAAC,cAAc,CAAC,MAAM,GAAG,KAAK,CAAC,iBAAiB,CAAC;YAEzF,OAAO,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;;gBAC1D,IAAI,UAAU,GAAG,YAAY,CAAC;gBAC9B,IAAI,KAAK,GAAG,KAAK,CAAC,kBAAkB,EAAE;oBACpC,UAAU,GAAG,cAAc,CAAC;iBAC7B;qBAAM,IAAI,KAAK,IAAI,KAAK,CAAC,cAAc,CAAC,MAAM,GAAG,KAAK,CAAC,iBAAiB,EAAE;oBACzE,UAAU,GAAG,YAAY,CAAC;iBAC3B;gBAED,IAAI,CAAC,SAAS,IAAI,UAAU,KAAK,YAAY,EAAE;oBAC7C,OAAO,GAAG,CAAC;iBACZ;gBAED,iFAAiF;gBACjF,MAAM,aAAa,GAAG,KAAK,KAAK,CAAC,CAAC;gBAClC,MAAM,sBAAsB,GAAG,MAAA,MAAA,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,0CAAE,KAAK,mCAAI,CAAC,CAAC;gBAClF,MAAM,uBAAuB,GAAG,MAAA,MAAA,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,0CAAE,IAAI,mCAAI,CAAC,CAAC;gBAElF,GAAG,CAAC,GAAG,CAAC,QAAQ,EAAE;oBAChB,cAAc,EAAE,aAAa,IAAI,IAAI,CAAC,cAAc;oBACpD,oBAAoB,EAAE,IAAI,CAAC,uBAAuB,IAAI,yBAAyB,KAAK,KAAK;oBACzF,kBAAkB,EAAE,IAAI,CAAC,qBAAqB,IAAI,0BAA0B,KAAK,KAAK;oBACtF,MAAM,EAAE;wBACN,gBAAgB,EAAE,UAAU,KAAK,cAAc,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,SAAS;wBACpF,cAAc,EAAE,UAAU,KAAK,YAAY,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,SAAS;qBAClF;iBACF,CAAC,CAAC;gBACH,OAAO,GAAG,CAAC;YACb,CAAC,EAAE,IAAI,GAAG,EAAuC,CAAC,CAAC;QACrD,CAAC,CAAC;QAEM,sBAAiB,GAAG,CAAC,KAA4B,EAAQ,EAAE;YACjE,IAAI,CAAC,WAAW,GAAG,iBAAiB,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QAC3D,CAAC,CAAC;QAEM,cAAS,GAAG,CAAC,KAA4B,EAAW,EAAE;YAC5D,MAAM,eAAe,GAAG,KAAK,CAAC,kBAAkB,GAAG,KAAK,CAAC,iBAAiB,KAAK,CAAC,CAAC;YACjF,IAAI,eAAe,EAAE;gBACnB,OAAO,KAAK,CAAC;aACd;YAED,MAAM,YAAY,GAAG,4BAA4B,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;YAC5E,MAAM,UAAU,GAAG,4BAA4B,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC;YACxE,MAAM,mBAAmB,GAAG,UAAU,GAAG,YAAY,CAAC;YACtD,IAAI,CAAC,mBAAmB,EAAE;gBACxB,OAAO,KAAK,CAAC;aACd;YAED,MAAM,gBAAgB,GAAG,IAAI,CAAC,WAAW,CAAC,sBAAsB,GAAG,IAAI,CAAC,WAAW,CAAC,oBAAoB,CAAC;YACzG,MAAM,gBAAgB,GAAG,UAAU,CAAC,gBAAgB,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;YACpF,MAAM,iBAAiB,GAAG,UAAU,CAAC,gBAAgB,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;YACtF,MAAM,wBAAwB,GAC5B,gBAAgB,GAAG,wBAAwB,GAAG,gBAAgB,GAAG,iBAAiB,GAAG,YAAY,CAAC;YACpG,IAAI,CAAC,wBAAwB,EAAE;gBAC7B,OAAO,KAAK,CAAC;aACd;YAED,OAAO,IAAI,CAAC;QACd,CAAC,CAAC;IAlGF,CAAC;IAEM,gBAAgB,CAAC,KAA4B;QAClD,MAAM,gBAAgB,GAAG,KAAK,CAAC,kBAAkB,GAAG,KAAK,CAAC,iBAAiB,GAAG,CAAC,CAAC;QAChF,MAAM,gBAAgB,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,IAAI,GAAG,CAAC,CAAC;QAE3D,IAAI,gBAAgB,IAAI,gBAAgB,EAAE;YACxC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;YACzB,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;YAC9B,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC;gBACd,SAAS,EAAE,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC;gBACzC,YAAY,EAAE;oBACZ,wBAAwB,EAAE,IAAI,CAAC,WAAW,CAAC,sBAAsB;oBACjE,sBAAsB,EAAE,IAAI,CAAC,WAAW,CAAC,oBAAoB;iBAC9D;aACF,CAAC,CAAC,CAAC;SACL;IACH,CAAC;IAEO,YAAY,CAAC,KAA4B;QAC/C,MAAM,wBAAwB,GAAG,oBAAoB,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QACrE,MAAM,kBAAkB,GAAG,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC;QACrD,MAAM,kBAAkB,GAAG,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC;QACrD,MAAM,uBAAuB,GAAG,UAAU,CAAC,gBAAgB,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC;QAClG,MAAM,qBAAqB,GAAG,UAAU,CAAC,gBAAgB,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;QAE9F,IAAI,CAAC,uBAAuB,GAAG,wBAAwB,GAAG,uBAAuB,CAAC;QAElF,sIAAsI;QACtI,8HAA8H;QAC9H,IAAI,CAAC,qBAAqB;YACxB,IAAI,CAAC,IAAI,CAAC,wBAAwB,CAAC,GAAG,kBAAkB,GAAG,kBAAkB,GAAG,qBAAqB,CAAC;QAExG,IAAI,CAAC,cAAc,GAAG,uBAAuB,KAAK,CAAC,IAAI,IAAI,CAAC,uBAAuB,CAAC;IACtF,CAAC;CAiEF","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useCallback, useEffect, useMemo, useRef } from 'react';\nimport AsyncStore, { ReadonlyAsyncStore } from '../../area-chart/async-store';\nimport clsx from 'clsx';\nimport { useResizeObserver, useStableCallback } from '@cloudscape-design/component-toolkit/internal';\nimport {\n CellOffsets,\n StickyColumnsCellState,\n StickyColumnsProps,\n StickyColumnsState,\n StickyColumnsWrapperState,\n} from './interfaces';\nimport { isCellStatesEqual, isWrapperStatesEqual, updateCellOffsets } from './utils';\nimport { getScrollInlineStart, getLogicalBoundingClientRect } from '../../internal/direction';\n\n// We allow the table to have a minimum of 148px of available space besides the sum of the widths of the sticky columns\n// This value is an UX recommendation and is approximately 1/3 of our smallest breakpoint (465px)\nconst MINIMUM_SCROLLABLE_SPACE = 148;\n\nexport interface StickyColumnsModel {\n store: ReadonlyAsyncStore<StickyColumnsState>;\n style: {\n wrapper?: React.CSSProperties;\n };\n refs: {\n table: React.RefCallback<HTMLElement>;\n wrapper: React.RefCallback<HTMLElement>;\n cell: (columnId: PropertyKey, node: null | HTMLElement) => void;\n };\n}\n\nexport function useStickyColumns({\n visibleColumns,\n stickyColumnsFirst,\n stickyColumnsLast,\n}: StickyColumnsProps): StickyColumnsModel {\n const store = useMemo(() => new StickyColumnsStore(), []);\n const wrapperRef = useRef<HTMLElement>(null) as React.MutableRefObject<null | HTMLElement>;\n const tableRef = useRef<HTMLElement>(null) as React.MutableRefObject<null | HTMLElement>;\n const cellsRef = useRef(new Map<PropertyKey, HTMLElement>());\n\n const hasStickyColumns = stickyColumnsFirst + stickyColumnsLast > 0;\n\n const updateStickyStyles = useStableCallback(() => {\n if (wrapperRef.current && tableRef.current) {\n store.updateCellStyles({\n wrapper: wrapperRef.current,\n table: tableRef.current,\n cells: cellsRef.current,\n visibleColumns,\n stickyColumnsFirst,\n stickyColumnsLast,\n });\n }\n });\n\n useResizeObserver(wrapperRef, updateStickyStyles);\n\n useResizeObserver(tableRef, updateStickyStyles);\n\n useEffect(() => {\n if (wrapperRef.current && tableRef.current) {\n store.updateCellStyles({\n wrapper: wrapperRef.current,\n table: tableRef.current,\n cells: cellsRef.current,\n visibleColumns,\n stickyColumnsFirst,\n stickyColumnsLast,\n });\n }\n }, [store, stickyColumnsFirst, stickyColumnsLast, visibleColumns]);\n\n // Update wrapper styles imperatively to avoid unnecessary re-renders.\n useEffect(() => {\n if (!hasStickyColumns) {\n return;\n }\n\n const selector = (state: StickyColumnsState) => state.wrapperState;\n\n const updateWrapperStyles = (state: StickyColumnsWrapperState, prev: StickyColumnsWrapperState) => {\n if (isWrapperStatesEqual(state, prev)) {\n return;\n }\n\n if (wrapperRef.current) {\n wrapperRef.current.style.scrollPaddingInlineStart = state.scrollPaddingInlineStart + 'px';\n wrapperRef.current.style.scrollPaddingInlineEnd = state.scrollPaddingInlineEnd + 'px';\n }\n };\n\n const unsubscribe = store.subscribe(selector, (newState, prevState) =>\n updateWrapperStyles(selector(newState), selector(prevState))\n );\n return unsubscribe;\n }, [store, hasStickyColumns]);\n\n const setWrapper = useCallback(\n (node: null | HTMLElement) => {\n if (wrapperRef.current) {\n wrapperRef.current.removeEventListener('scroll', updateStickyStyles);\n }\n if (node && hasStickyColumns) {\n node.addEventListener('scroll', updateStickyStyles);\n }\n wrapperRef.current = node;\n },\n [hasStickyColumns, updateStickyStyles]\n );\n\n const setTable = useCallback((node: null | HTMLElement) => {\n tableRef.current = node;\n }, []);\n\n const setCell = useCallback((columnId: PropertyKey, node: null | HTMLElement) => {\n if (node) {\n cellsRef.current.set(columnId, node);\n } else {\n cellsRef.current.delete(columnId);\n }\n }, []);\n\n return {\n store,\n style: {\n // Provide wrapper styles as props so that a re-render won't cause invalidation.\n wrapper: hasStickyColumns ? { ...store.get().wrapperState } : undefined,\n },\n refs: { wrapper: setWrapper, table: setTable, cell: setCell },\n };\n}\n\ninterface UseStickyCellStylesProps {\n stickyColumns: StickyColumnsModel;\n columnId: PropertyKey;\n getClassName: (styles: null | StickyColumnsCellState) => Record<string, boolean>;\n}\n\ninterface StickyCellStyles {\n ref: React.RefCallback<HTMLElement>;\n className?: string;\n style?: React.CSSProperties;\n}\n\nexport function useStickyCellStyles({\n stickyColumns,\n columnId,\n getClassName,\n}: UseStickyCellStylesProps): StickyCellStyles {\n const setCell = stickyColumns.refs.cell;\n\n // unsubscribeRef to hold the function to unsubscribe from the store's updates\n const unsubscribeRef = useRef<null | (() => void)>(null);\n\n // refCallback updates the cell ref and sets up the store subscription\n const refCallback = useCallback(\n (cellElement: null | HTMLElement) => {\n if (unsubscribeRef.current) {\n // Unsubscribe before we do any updates to avoid leaving any subscriptions hanging\n unsubscribeRef.current();\n }\n\n // Update cellRef and the store's state to point to the new DOM node\n setCell(columnId, cellElement);\n\n // Update cell styles imperatively to avoid unnecessary re-renders.\n const selector = (state: StickyColumnsState) => state.cellState.get(columnId) ?? null;\n\n const updateCellStyles = (state: null | StickyColumnsCellState, prev: null | StickyColumnsCellState) => {\n if (isCellStatesEqual(state, prev)) {\n return;\n }\n\n const className = getClassName(state);\n if (cellElement) {\n Object.keys(className).forEach(key => {\n if (className[key]) {\n cellElement.classList.add(key);\n } else {\n cellElement.classList.remove(key);\n }\n });\n cellElement.style.insetInlineStart =\n state?.offset.insetInlineStart !== undefined ? `${state.offset.insetInlineStart}px` : '';\n cellElement.style.insetInlineEnd =\n state?.offset.insetInlineEnd !== undefined ? `${state.offset.insetInlineEnd}px` : '';\n }\n };\n\n // If the node is not null (i.e., the table cell is being mounted or updated, not unmounted),\n // set up a new subscription to the store's updates\n if (cellElement) {\n unsubscribeRef.current = stickyColumns.store.subscribe(selector, (newState, prevState) => {\n updateCellStyles(selector(newState), selector(prevState));\n });\n }\n },\n\n // getClassName is expected to be pure\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [columnId, setCell, stickyColumns.store]\n );\n\n // Provide cell styles as props so that a re-render won't cause invalidation.\n const cellStyles = stickyColumns.store.get().cellState.get(columnId);\n return {\n ref: refCallback,\n className: cellStyles ? clsx(getClassName(cellStyles)) : undefined,\n style: cellStyles?.offset ?? undefined,\n };\n}\n\ninterface UpdateCellStylesProps {\n wrapper: HTMLElement;\n table: HTMLElement;\n cells: Map<PropertyKey, HTMLElement>;\n visibleColumns: readonly PropertyKey[];\n stickyColumnsFirst: number;\n stickyColumnsLast: number;\n}\n\nexport default class StickyColumnsStore extends AsyncStore<StickyColumnsState> {\n private cellOffsets: CellOffsets = {\n offsets: new Map(),\n stickyWidthInlineStart: 0,\n stickyWidthInlineEnd: 0,\n };\n private isStuckToTheInlineStart = false;\n private isStuckToTheInlineEnd = false;\n private padInlineStart = false;\n\n constructor() {\n super({ cellState: new Map(), wrapperState: { scrollPaddingInlineStart: 0, scrollPaddingInlineEnd: 0 } });\n }\n\n public updateCellStyles(props: UpdateCellStylesProps) {\n const hasStickyColumns = props.stickyColumnsFirst + props.stickyColumnsLast > 0;\n const hadStickyColumns = this.cellOffsets.offsets.size > 0;\n\n if (hasStickyColumns || hadStickyColumns) {\n this.updateScroll(props);\n this.updateCellOffsets(props);\n this.set(() => ({\n cellState: this.generateCellStyles(props),\n wrapperState: {\n scrollPaddingInlineStart: this.cellOffsets.stickyWidthInlineStart,\n scrollPaddingInlineEnd: this.cellOffsets.stickyWidthInlineEnd,\n },\n }));\n }\n }\n\n private updateScroll(props: UpdateCellStylesProps) {\n const wrapperScrollInlineStart = getScrollInlineStart(props.wrapper);\n const wrapperScrollWidth = props.wrapper.scrollWidth;\n const wrapperClientWidth = props.wrapper.clientWidth;\n const tablePaddingInlineStart = parseFloat(getComputedStyle(props.table).paddingInlineStart) || 0;\n const tablePaddingInlineEnd = parseFloat(getComputedStyle(props.table).paddingInlineEnd) || 0;\n\n this.isStuckToTheInlineStart = wrapperScrollInlineStart > tablePaddingInlineStart;\n\n // Math.ceil() is used here to address an edge-case in certain browsers, where they return non-integer wrapperScrollInlineStart values\n // which are lower than expected (sub-pixel difference), resulting in the table always being in the \"stuck to the right\" state\n this.isStuckToTheInlineEnd =\n Math.ceil(wrapperScrollInlineStart) < wrapperScrollWidth - wrapperClientWidth - tablePaddingInlineEnd;\n\n this.padInlineStart = tablePaddingInlineStart !== 0 && this.isStuckToTheInlineStart;\n }\n\n private generateCellStyles = (props: UpdateCellStylesProps): Map<PropertyKey, StickyColumnsCellState> => {\n const isEnabled = this.isEnabled(props);\n const lastLeftStickyColumnIndex = props.stickyColumnsFirst - 1;\n const lastRightStickyColumnIndex = props.visibleColumns.length - props.stickyColumnsLast;\n\n return props.visibleColumns.reduce((acc, columnId, index) => {\n let stickySide = 'non-sticky';\n if (index < props.stickyColumnsFirst) {\n stickySide = 'inline-start';\n } else if (index >= props.visibleColumns.length - props.stickyColumnsLast) {\n stickySide = 'inline-end';\n }\n\n if (!isEnabled || stickySide === 'non-sticky') {\n return acc;\n }\n\n // Determine the offset of the sticky column using the `cellOffsets` state object\n const isFirstColumn = index === 0;\n const stickyColumnOffsetLeft = this.cellOffsets.offsets.get(columnId)?.first ?? 0;\n const stickyColumnOffsetRight = this.cellOffsets.offsets.get(columnId)?.last ?? 0;\n\n acc.set(columnId, {\n padInlineStart: isFirstColumn && this.padInlineStart,\n lastInsetInlineStart: this.isStuckToTheInlineStart && lastLeftStickyColumnIndex === index,\n lastInsetInlineEnd: this.isStuckToTheInlineEnd && lastRightStickyColumnIndex === index,\n offset: {\n insetInlineStart: stickySide === 'inline-start' ? stickyColumnOffsetLeft : undefined,\n insetInlineEnd: stickySide === 'inline-end' ? stickyColumnOffsetRight : undefined,\n },\n });\n return acc;\n }, new Map<PropertyKey, StickyColumnsCellState>());\n };\n\n private updateCellOffsets = (props: UpdateCellStylesProps): void => {\n this.cellOffsets = updateCellOffsets(props.cells, props);\n };\n\n private isEnabled = (props: UpdateCellStylesProps): boolean => {\n const noStickyColumns = props.stickyColumnsFirst + props.stickyColumnsLast === 0;\n if (noStickyColumns) {\n return false;\n }\n\n const wrapperWidth = getLogicalBoundingClientRect(props.wrapper).inlineSize;\n const tableWidth = getLogicalBoundingClientRect(props.table).inlineSize;\n const isWrapperScrollable = tableWidth > wrapperWidth;\n if (!isWrapperScrollable) {\n return false;\n }\n\n const totalStickySpace = this.cellOffsets.stickyWidthInlineStart + this.cellOffsets.stickyWidthInlineEnd;\n const tablePaddingLeft = parseFloat(getComputedStyle(props.table).paddingLeft) || 0;\n const tablePaddingRight = parseFloat(getComputedStyle(props.table).paddingRight) || 0;\n const hasEnoughScrollableSpace =\n totalStickySpace + MINIMUM_SCROLLABLE_SPACE + tablePaddingLeft + tablePaddingRight < wrapperWidth;\n if (!hasEnoughScrollableSpace) {\n return false;\n }\n\n return true;\n };\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/table/sticky-columns/utils.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,sBAAsB,EAAE,kBAAkB,EAAE,yBAAyB,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/table/sticky-columns/utils.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,sBAAsB,EAAE,kBAAkB,EAAE,yBAAyB,EAAE,MAAM,cAAc,CAAC;AAGlH,wBAAgB,iBAAiB,CAAC,EAAE,EAAE,IAAI,GAAG,sBAAsB,EAAE,EAAE,EAAE,IAAI,GAAG,sBAAsB,GAAG,OAAO,CAW/G;AAED,wBAAgB,oBAAoB,CAAC,EAAE,EAAE,yBAAyB,EAAE,EAAE,EAAE,yBAAyB,GAAG,OAAO,CAK1G;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC,WAAW,EAAE,WAAW,CAAC,EAAE,KAAK,EAAE,kBAAkB,GAAG,WAAW,CA6B9G"}
|
|
@@ -1,35 +1,37 @@
|
|
|
1
1
|
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
+
import { getLogicalBoundingClientRect } from '../../internal/direction';
|
|
3
4
|
export function isCellStatesEqual(s1, s2) {
|
|
4
5
|
if (s1 && s2) {
|
|
5
|
-
return (s1.
|
|
6
|
-
s1.
|
|
7
|
-
s1.
|
|
8
|
-
s1.offset.
|
|
9
|
-
s1.offset.
|
|
6
|
+
return (s1.padInlineStart === s2.padInlineStart &&
|
|
7
|
+
s1.lastInsetInlineStart === s2.lastInsetInlineStart &&
|
|
8
|
+
s1.lastInsetInlineEnd === s2.lastInsetInlineEnd &&
|
|
9
|
+
s1.offset.insetInlineStart === s2.offset.insetInlineStart &&
|
|
10
|
+
s1.offset.insetInlineEnd === s2.offset.insetInlineEnd);
|
|
10
11
|
}
|
|
11
12
|
return s1 === s2;
|
|
12
13
|
}
|
|
13
14
|
export function isWrapperStatesEqual(s1, s2) {
|
|
14
|
-
return s1.
|
|
15
|
+
return (s1.scrollPaddingInlineStart === s2.scrollPaddingInlineStart &&
|
|
16
|
+
s1.scrollPaddingInlineEnd === s2.scrollPaddingInlineEnd);
|
|
15
17
|
}
|
|
16
18
|
export function updateCellOffsets(cells, props) {
|
|
17
|
-
var _a, _b, _c, _d
|
|
19
|
+
var _a, _b, _c, _d;
|
|
18
20
|
const totalColumns = props.visibleColumns.length;
|
|
19
21
|
const firstColumnsWidths = [];
|
|
20
22
|
for (let i = 0; i < Math.min(totalColumns, props.stickyColumnsFirst); i++) {
|
|
21
23
|
const element = cells.get(props.visibleColumns[i]);
|
|
22
|
-
const cellWidth =
|
|
23
|
-
firstColumnsWidths[i] = ((
|
|
24
|
+
const cellWidth = element ? getLogicalBoundingClientRect(element).inlineSize : 0;
|
|
25
|
+
firstColumnsWidths[i] = ((_a = firstColumnsWidths[i - 1]) !== null && _a !== void 0 ? _a : 0) + cellWidth;
|
|
24
26
|
}
|
|
25
27
|
const lastColumnsWidths = [];
|
|
26
28
|
for (let i = 0; i < Math.min(totalColumns, props.stickyColumnsLast); i++) {
|
|
27
29
|
const element = cells.get(props.visibleColumns[totalColumns - 1 - i]);
|
|
28
|
-
const cellWidth =
|
|
29
|
-
lastColumnsWidths[i] = ((
|
|
30
|
+
const cellWidth = element ? getLogicalBoundingClientRect(element).inlineSize : 0;
|
|
31
|
+
lastColumnsWidths[i] = ((_b = lastColumnsWidths[i - 1]) !== null && _b !== void 0 ? _b : 0) + cellWidth;
|
|
30
32
|
}
|
|
31
|
-
const
|
|
32
|
-
const
|
|
33
|
+
const stickyWidthInlineStart = (_c = firstColumnsWidths[props.stickyColumnsFirst - 1]) !== null && _c !== void 0 ? _c : 0;
|
|
34
|
+
const stickyWidthInlineEnd = (_d = lastColumnsWidths[props.stickyColumnsLast - 1]) !== null && _d !== void 0 ? _d : 0;
|
|
33
35
|
const offsets = props.visibleColumns.reduce((map, columnId, columnIndex) => {
|
|
34
36
|
var _a, _b;
|
|
35
37
|
return map.set(columnId, {
|
|
@@ -37,6 +39,6 @@ export function updateCellOffsets(cells, props) {
|
|
|
37
39
|
last: (_b = lastColumnsWidths[totalColumns - 1 - columnIndex - 1]) !== null && _b !== void 0 ? _b : 0,
|
|
38
40
|
});
|
|
39
41
|
}, new Map());
|
|
40
|
-
return { offsets,
|
|
42
|
+
return { offsets, stickyWidthInlineStart, stickyWidthInlineEnd };
|
|
41
43
|
}
|
|
42
44
|
//# sourceMappingURL=utils.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/table/sticky-columns/utils.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;
|
|
1
|
+
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/table/sticky-columns/utils.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { CellOffsets, StickyColumnsCellState, StickyColumnsProps, StickyColumnsWrapperState } from './interfaces';\nimport { getLogicalBoundingClientRect } from '../../internal/direction';\n\nexport function isCellStatesEqual(s1: null | StickyColumnsCellState, s2: null | StickyColumnsCellState): boolean {\n if (s1 && s2) {\n return (\n s1.padInlineStart === s2.padInlineStart &&\n s1.lastInsetInlineStart === s2.lastInsetInlineStart &&\n s1.lastInsetInlineEnd === s2.lastInsetInlineEnd &&\n s1.offset.insetInlineStart === s2.offset.insetInlineStart &&\n s1.offset.insetInlineEnd === s2.offset.insetInlineEnd\n );\n }\n return s1 === s2;\n}\n\nexport function isWrapperStatesEqual(s1: StickyColumnsWrapperState, s2: StickyColumnsWrapperState): boolean {\n return (\n s1.scrollPaddingInlineStart === s2.scrollPaddingInlineStart &&\n s1.scrollPaddingInlineEnd === s2.scrollPaddingInlineEnd\n );\n}\n\nexport function updateCellOffsets(cells: Map<PropertyKey, HTMLElement>, props: StickyColumnsProps): CellOffsets {\n const totalColumns = props.visibleColumns.length;\n\n const firstColumnsWidths: number[] = [];\n for (let i = 0; i < Math.min(totalColumns, props.stickyColumnsFirst); i++) {\n const element = cells.get(props.visibleColumns[i]);\n const cellWidth = element ? getLogicalBoundingClientRect(element).inlineSize : 0;\n firstColumnsWidths[i] = (firstColumnsWidths[i - 1] ?? 0) + cellWidth;\n }\n\n const lastColumnsWidths: number[] = [];\n for (let i = 0; i < Math.min(totalColumns, props.stickyColumnsLast); i++) {\n const element = cells.get(props.visibleColumns[totalColumns - 1 - i]);\n const cellWidth = element ? getLogicalBoundingClientRect(element).inlineSize : 0;\n lastColumnsWidths[i] = (lastColumnsWidths[i - 1] ?? 0) + cellWidth;\n }\n\n const stickyWidthInlineStart = firstColumnsWidths[props.stickyColumnsFirst - 1] ?? 0;\n const stickyWidthInlineEnd = lastColumnsWidths[props.stickyColumnsLast - 1] ?? 0;\n const offsets = props.visibleColumns.reduce(\n (map, columnId, columnIndex) =>\n map.set(columnId, {\n first: firstColumnsWidths[columnIndex - 1] ?? 0,\n last: lastColumnsWidths[totalColumns - 1 - columnIndex - 1] ?? 0,\n }),\n new Map()\n );\n\n return { offsets, stickyWidthInlineStart, stickyWidthInlineEnd };\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-sticky-scrollbar.d.ts","sourceRoot":"","sources":["../../../../src/table/sticky-scrollbar/use-sticky-scrollbar.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"use-sticky-scrollbar.d.ts","sourceRoot":"","sources":["../../../../src/table/sticky-scrollbar/use-sticky-scrollbar.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAOvD,eAAO,MAAM,cAAc,YAChB,WAAW,GAAG,IAAI,aAChB,WAAW,GAAG,IAAI,eAChB,WAAW,GAAG,IAAI,sBACX,WAAW,GAAG,IAAI,sBAClB,OAAO,0BACH,MAAM,SAkD/B,CAAC;AAEF,wBAAgB,kBAAkB,CAChC,YAAY,EAAE,SAAS,CAAC,cAAc,CAAC,EACvC,mBAAmB,EAAE,SAAS,CAAC,cAAc,CAAC,EAC9C,QAAQ,EAAE,SAAS,CAAC,gBAAgB,CAAC,EACrC,UAAU,EAAE,SAAS,CAAC,cAAc,CAAC,EACrC,YAAY,EAAE,MAAM,EACpB,eAAe,EAAE,OAAO,QAyEzB"}
|
|
@@ -6,15 +6,16 @@ import styles from './styles.css.js';
|
|
|
6
6
|
import { getContainingBlock, supportsStickyPosition } from '../../internal/utils/dom';
|
|
7
7
|
import { getOverflowParents } from '../../internal/utils/scrollable-containers';
|
|
8
8
|
import { browserScrollbarSize } from '../../internal/utils/browser-scrollbar-size';
|
|
9
|
+
import { getLogicalBoundingClientRect } from '../../internal/direction.js';
|
|
9
10
|
export const updatePosition = (tableEl, wrapperEl, scrollbarEl, scrollbarContentEl, hasContainingBlock, consideredFooterHeight) => {
|
|
10
11
|
if (!tableEl || !scrollbarEl || !wrapperEl) {
|
|
11
12
|
return;
|
|
12
13
|
}
|
|
13
|
-
const {
|
|
14
|
-
const {
|
|
14
|
+
const { inlineSize: tableInlineSize } = getLogicalBoundingClientRect(tableEl);
|
|
15
|
+
const { inlineSize: wrapperInlineSize } = getLogicalBoundingClientRect(wrapperEl);
|
|
15
16
|
// using 15 px as a height of transparent scrollbar on mac
|
|
16
17
|
const scrollbarHeight = browserScrollbarSize().height;
|
|
17
|
-
const areaIsScrollable =
|
|
18
|
+
const areaIsScrollable = tableInlineSize > wrapperInlineSize;
|
|
18
19
|
if (!areaIsScrollable) {
|
|
19
20
|
scrollbarEl.classList.remove(styles['sticky-scrollbar-visible']);
|
|
20
21
|
}
|
|
@@ -23,6 +24,10 @@ export const updatePosition = (tableEl, wrapperEl, scrollbarEl, scrollbarContent
|
|
|
23
24
|
// that's why syncing it separately
|
|
24
25
|
if (!scrollbarEl.classList.contains(styles['sticky-scrollbar-visible'])) {
|
|
25
26
|
requestAnimationFrame(() => {
|
|
27
|
+
/**
|
|
28
|
+
* We don't need to use getScrollInlineStart here instead of scrollLeft because
|
|
29
|
+
* the negative value isn't being used in computation.
|
|
30
|
+
*/
|
|
26
31
|
scrollbarEl.scrollLeft = wrapperEl.scrollLeft;
|
|
27
32
|
});
|
|
28
33
|
}
|
|
@@ -33,17 +38,17 @@ export const updatePosition = (tableEl, wrapperEl, scrollbarEl, scrollbarContent
|
|
|
33
38
|
}
|
|
34
39
|
}
|
|
35
40
|
if (scrollbarHeight && scrollbarEl && scrollbarContentEl) {
|
|
36
|
-
scrollbarEl.style.
|
|
37
|
-
scrollbarContentEl.style.
|
|
41
|
+
scrollbarEl.style.blockSize = `${scrollbarHeight}px`;
|
|
42
|
+
scrollbarContentEl.style.blockSize = `${scrollbarHeight}px`;
|
|
38
43
|
}
|
|
39
44
|
if (tableEl && wrapperEl && scrollbarContentEl && scrollbarEl) {
|
|
40
|
-
const wrapperElRect = wrapperEl
|
|
41
|
-
const tableElRect = tableEl
|
|
42
|
-
scrollbarEl.style.
|
|
43
|
-
scrollbarContentEl.style.
|
|
45
|
+
const wrapperElRect = getLogicalBoundingClientRect(wrapperEl);
|
|
46
|
+
const tableElRect = getLogicalBoundingClientRect(tableEl);
|
|
47
|
+
scrollbarEl.style.inlineSize = `${wrapperElRect.inlineSize}px`;
|
|
48
|
+
scrollbarContentEl.style.inlineSize = `${tableElRect.inlineSize}px`;
|
|
44
49
|
// when using sticky scrollbars in containers
|
|
45
50
|
// we agreed to ignore dynamic bottom calculations for footer overlap
|
|
46
|
-
scrollbarEl.style.
|
|
51
|
+
scrollbarEl.style.insetBlockEnd = hasContainingBlock ? '0px' : `${consideredFooterHeight}px`;
|
|
47
52
|
}
|
|
48
53
|
};
|
|
49
54
|
export function useStickyScrollbar(scrollbarRef, scrollbarContentRef, tableRef, wrapperRef, footerHeight, offsetScrollbar) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-sticky-scrollbar.js","sourceRoot":"","sources":["../../../../src/table/sticky-scrollbar/use-sticky-scrollbar.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAa,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AACtF,OAAO,EAAE,kBAAkB,EAAE,MAAM,4CAA4C,CAAC;AAChF,OAAO,EAAE,oBAAoB,EAAE,MAAM,6CAA6C,CAAC;
|
|
1
|
+
{"version":3,"file":"use-sticky-scrollbar.js","sourceRoot":"","sources":["../../../../src/table/sticky-scrollbar/use-sticky-scrollbar.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { ResizeObserver } from '@juggle/resize-observer';\nimport { RefObject, useEffect, useState } from 'react';\nimport styles from './styles.css.js';\nimport { getContainingBlock, supportsStickyPosition } from '../../internal/utils/dom';\nimport { getOverflowParents } from '../../internal/utils/scrollable-containers';\nimport { browserScrollbarSize } from '../../internal/utils/browser-scrollbar-size';\nimport { getLogicalBoundingClientRect } from '../../internal/direction.js';\n\nexport const updatePosition = (\n tableEl: HTMLElement | null,\n wrapperEl: HTMLElement | null,\n scrollbarEl: HTMLElement | null,\n scrollbarContentEl: HTMLElement | null,\n hasContainingBlock: boolean,\n consideredFooterHeight: number\n) => {\n if (!tableEl || !scrollbarEl || !wrapperEl) {\n return;\n }\n\n const { inlineSize: tableInlineSize } = getLogicalBoundingClientRect(tableEl);\n const { inlineSize: wrapperInlineSize } = getLogicalBoundingClientRect(wrapperEl);\n\n // using 15 px as a height of transparent scrollbar on mac\n const scrollbarHeight = browserScrollbarSize().height;\n const areaIsScrollable = tableInlineSize > wrapperInlineSize;\n\n if (!areaIsScrollable) {\n scrollbarEl.classList.remove(styles['sticky-scrollbar-visible']);\n } else {\n // when scrollbar is not displayed scrollLeft property cannot be set by useScrollSync\n // that's why syncing it separately\n if (!scrollbarEl.classList.contains(styles['sticky-scrollbar-visible'])) {\n requestAnimationFrame(() => {\n /**\n * We don't need to use getScrollInlineStart here instead of scrollLeft because\n * the negative value isn't being used in computation.\n */\n scrollbarEl.scrollLeft = wrapperEl.scrollLeft;\n });\n }\n\n scrollbarEl.classList.add(styles['sticky-scrollbar-visible']);\n if (!scrollbarHeight) {\n /* istanbul ignore next: covered by screenshot tests */\n scrollbarEl.classList.add(styles['sticky-scrollbar-native-invisible']);\n }\n }\n\n if (scrollbarHeight && scrollbarEl && scrollbarContentEl) {\n scrollbarEl.style.blockSize = `${scrollbarHeight}px`;\n scrollbarContentEl.style.blockSize = `${scrollbarHeight}px`;\n }\n\n if (tableEl && wrapperEl && scrollbarContentEl && scrollbarEl) {\n const wrapperElRect = getLogicalBoundingClientRect(wrapperEl);\n const tableElRect = getLogicalBoundingClientRect(tableEl);\n scrollbarEl.style.inlineSize = `${wrapperElRect.inlineSize}px`;\n scrollbarContentEl.style.inlineSize = `${tableElRect.inlineSize}px`;\n\n // when using sticky scrollbars in containers\n // we agreed to ignore dynamic bottom calculations for footer overlap\n scrollbarEl.style.insetBlockEnd = hasContainingBlock ? '0px' : `${consideredFooterHeight}px`;\n }\n};\n\nexport function useStickyScrollbar(\n scrollbarRef: RefObject<HTMLDivElement>,\n scrollbarContentRef: RefObject<HTMLDivElement>,\n tableRef: RefObject<HTMLTableElement>,\n wrapperRef: RefObject<HTMLDivElement>,\n footerHeight: number,\n offsetScrollbar: boolean\n) {\n // We don't take into account containing-block calculations because that would\n // unnecessarily overcomplicate the position logic. For now, we assume that a\n // containing block, if present, is below the app layout and above the overflow\n // parent, which is a pretty safe assumption.\n const [hasContainingBlock, setHasContainingBlock] = useState(false);\n // We don't take into account footer height when the overflow parent is child of document body.\n // Because in this case, we think the footer is outside the overflow parent.\n const [hasOverflowParent, setHasOverflowParent] = useState(false);\n const consideredFooterHeight = hasContainingBlock || hasOverflowParent ? 0 : footerHeight;\n\n const wrapperEl = wrapperRef.current;\n useEffect(() => {\n if (wrapperEl && supportsStickyPosition()) {\n setHasContainingBlock(!!getContainingBlock(wrapperEl));\n setHasOverflowParent(!!getOverflowParents(wrapperEl)[0]);\n }\n }, [wrapperEl]);\n\n // Update scrollbar position wrapper or table size change.\n useEffect(() => {\n if (supportsStickyPosition() && wrapperRef.current && tableRef.current) {\n const observer = new ResizeObserver(() => {\n if (scrollbarContentRef.current) {\n updatePosition(\n tableRef.current,\n wrapperRef.current,\n scrollbarRef.current,\n scrollbarContentRef.current,\n hasContainingBlock,\n consideredFooterHeight\n );\n }\n });\n // Scrollbar width must be in sync with wrapper width.\n observer.observe(wrapperRef.current);\n // Scrollbar content width must be in sync with table width.\n observer.observe(tableRef.current);\n return () => {\n observer.disconnect();\n };\n }\n }, [\n scrollbarContentRef,\n scrollbarRef,\n tableRef,\n wrapperRef,\n consideredFooterHeight,\n hasContainingBlock,\n offsetScrollbar,\n ]);\n\n // Update scrollbar position when window resizes (vertically).\n useEffect(() => {\n if (supportsStickyPosition()) {\n const resizeHandler = () => {\n updatePosition(\n tableRef.current,\n wrapperRef.current,\n scrollbarRef.current,\n scrollbarContentRef.current,\n hasContainingBlock,\n consideredFooterHeight\n );\n };\n resizeHandler();\n window.addEventListener('resize', resizeHandler);\n return () => {\n window.removeEventListener('resize', resizeHandler);\n };\n }\n }, [tableRef, wrapperRef, scrollbarRef, scrollbarContentRef, hasContainingBlock, consideredFooterHeight]);\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sticky-scrolling.d.ts","sourceRoot":"","sources":["../../../src/table/sticky-scrolling.ts"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"sticky-scrolling.d.ts","sourceRoot":"","sources":["../../../src/table/sticky-scrolling.ts"],"names":[],"mappings":";AAKA;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CACrC,YAAY,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,EACxD,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC;;yBAWzB,WAAW,GAAG,IAAI;EAc/C;AAED;;;;;;;GAOG;AACH,wBAAgB,wBAAwB,CAAC,SAAS,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,UAInF;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,QAQhE"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
3
3
|
import { getOverflowParents } from '../internal/utils/scrollable-containers';
|
|
4
|
+
import { getLogicalBoundingClientRect } from '../internal/direction';
|
|
4
5
|
/**
|
|
5
6
|
* @param containerRef ref to surrounding container with sticky element
|
|
6
7
|
* @param stickyRef ref to sticky element scrolled inside of containerRef
|
|
@@ -21,8 +22,8 @@ export default function stickyScrolling(containerRef, stickyRef) {
|
|
|
21
22
|
if (!item || !containerRef.current || !stickyRef.current) {
|
|
22
23
|
return;
|
|
23
24
|
}
|
|
24
|
-
const stickyBottom = stickyRef.current
|
|
25
|
-
const scrollingOffset = stickyBottom - item
|
|
25
|
+
const stickyBottom = getLogicalBoundingClientRect(stickyRef.current).insetBlockEnd;
|
|
26
|
+
const scrollingOffset = stickyBottom - getLogicalBoundingClientRect(item).insetBlockStart;
|
|
26
27
|
if (scrollingOffset > 0) {
|
|
27
28
|
scrollUpBy(scrollingOffset, containerRef.current);
|
|
28
29
|
}
|
|
@@ -41,9 +42,9 @@ export default function stickyScrolling(containerRef, stickyRef) {
|
|
|
41
42
|
* @param containerOffset caused by borders or paddings
|
|
42
43
|
*/
|
|
43
44
|
export function calculateScrollingOffset(container, sticky) {
|
|
44
|
-
const stickyRect = sticky
|
|
45
|
-
const containerRect = container
|
|
46
|
-
return stickyRect.
|
|
45
|
+
const stickyRect = getLogicalBoundingClientRect(sticky);
|
|
46
|
+
const containerRect = getLogicalBoundingClientRect(container);
|
|
47
|
+
return stickyRect.insetBlockStart - containerRect.insetBlockStart;
|
|
47
48
|
}
|
|
48
49
|
/**
|
|
49
50
|
* Scrolls suitable parent of container up by amount of pixels
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sticky-scrolling.js","sourceRoot":"","sources":["../../../src/table/sticky-scrolling.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;
|
|
1
|
+
{"version":3,"file":"sticky-scrolling.js","sourceRoot":"","sources":["../../../src/table/sticky-scrolling.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAC7E,OAAO,EAAE,4BAA4B,EAAE,MAAM,uBAAuB,CAAC;AAErE;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CACrC,YAAwD,EACxD,SAAqD;IAErD,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE;YAC/C,OAAO;SACR;QACD,MAAM,eAAe,GAAG,wBAAwB,CAAC,YAAY,CAAC,OAAO,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;QAC1F,IAAI,eAAe,GAAG,CAAC,EAAE;YACvB,UAAU,CAAC,eAAe,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;SACnD;IACH,CAAC,CAAC;IACF,MAAM,YAAY,GAAG,CAAC,IAAwB,EAAE,EAAE;QAChD,IAAI,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE;YACxD,OAAO;SACR;QACD,MAAM,YAAY,GAAG,4BAA4B,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,aAAa,CAAC;QACnF,MAAM,eAAe,GAAG,YAAY,GAAG,4BAA4B,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC;QAC1F,IAAI,eAAe,GAAG,CAAC,EAAE;YACvB,UAAU,CAAC,eAAe,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;SACnD;IACH,CAAC,CAAC;IACF,OAAO;QACL,WAAW;QACX,YAAY;KACb,CAAC;AACJ,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,wBAAwB,CAAC,SAAsB,EAAE,MAAmB;IAClF,MAAM,UAAU,GAAG,4BAA4B,CAAC,MAAM,CAAC,CAAC;IACxD,MAAM,aAAa,GAAG,4BAA4B,CAAC,SAAS,CAAC,CAAC;IAC9D,OAAO,UAAU,CAAC,eAAe,GAAG,aAAa,CAAC,eAAe,CAAC;AACpE,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,UAAU,CAAC,MAAc,EAAE,SAAsB;IAC/D,MAAM,MAAM,GAAG,kBAAkB,CAAC,SAAS,CAAC,CAAC;IAC7C,IAAI,MAAM,CAAC,MAAM,EAAE;QACjB,qCAAqC;QACrC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,IAAI,MAAM,CAAC;KAC/B;SAAM;QACL,MAAM,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,MAAM,CAAC,WAAW,GAAG,MAAM,EAAE,CAAC,CAAC;KACvD;AACH,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { getOverflowParents } from '../internal/utils/scrollable-containers';\nimport { getLogicalBoundingClientRect } from '../internal/direction';\n\n/**\n * @param containerRef ref to surrounding container with sticky element\n * @param stickyRef ref to sticky element scrolled inside of containerRef\n * @param containerOffset offset between header and container\n * originating borders or paddings\n */\nexport default function stickyScrolling(\n containerRef: React.MutableRefObject<HTMLElement | null>,\n stickyRef: React.MutableRefObject<HTMLElement | null>\n) {\n const scrollToTop = () => {\n if (!containerRef.current || !stickyRef.current) {\n return;\n }\n const scrollingOffset = calculateScrollingOffset(containerRef.current, stickyRef.current);\n if (scrollingOffset > 0) {\n scrollUpBy(scrollingOffset, containerRef.current);\n }\n };\n const scrollToItem = (item: HTMLElement | null) => {\n if (!item || !containerRef.current || !stickyRef.current) {\n return;\n }\n const stickyBottom = getLogicalBoundingClientRect(stickyRef.current).insetBlockEnd;\n const scrollingOffset = stickyBottom - getLogicalBoundingClientRect(item).insetBlockStart;\n if (scrollingOffset > 0) {\n scrollUpBy(scrollingOffset, containerRef.current);\n }\n };\n return {\n scrollToTop,\n scrollToItem,\n };\n}\n\n/**\n * Calculates the scrolling offset between container and\n * sticky element with container offset caused by border\n * or padding\n * @param container\n * @param sticky element inside of container\n * @param containerOffset caused by borders or paddings\n */\nexport function calculateScrollingOffset(container: HTMLElement, sticky: HTMLElement) {\n const stickyRect = getLogicalBoundingClientRect(sticky);\n const containerRect = getLogicalBoundingClientRect(container);\n return stickyRect.insetBlockStart - containerRect.insetBlockStart;\n}\n\n/**\n * Scrolls suitable parent of container up by amount of pixels\n * @param amount pixels to be scrolled up\n * @param container used to determine next parent element for scrolling\n */\nexport function scrollUpBy(amount: number, container: HTMLElement) {\n const parent = getOverflowParents(container);\n if (parent.length) {\n // Take next overflow parent in stack\n parent[0].scrollTop -= amount;\n } else {\n window.scrollTo({ top: window.pageYOffset - amount });\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"grid-navigation.d.ts","sourceRoot":"","sources":["../../../../src/table/table-role/grid-navigation.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAe,mBAAmB,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"grid-navigation.d.ts","sourceRoot":"","sources":["../../../../src/table/table-role/grid-navigation.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAe,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAWhE;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,EAAE,kBAAkB,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,mBAAmB,eAoC/G"}
|