@cloudscape-design/components 3.0.615 → 3.0.616

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (62) hide show
  1. package/icon/icons.js +1 -1
  2. package/icon/interfaces.d.ts +1 -1
  3. package/icon/interfaces.d.ts.map +1 -1
  4. package/icon/interfaces.js.map +1 -1
  5. package/internal/direction.d.ts +6 -0
  6. package/internal/direction.d.ts.map +1 -1
  7. package/internal/direction.js +10 -0
  8. package/internal/direction.js.map +1 -1
  9. package/internal/environment.js +1 -1
  10. package/internal/environment.json +1 -1
  11. package/internal/manifest.json +1 -1
  12. package/internal/utils/handle-key.d.ts +4 -3
  13. package/internal/utils/handle-key.d.ts.map +1 -1
  14. package/internal/utils/handle-key.js +7 -1
  15. package/internal/utils/handle-key.js.map +1 -1
  16. package/package.json +1 -1
  17. package/table/body-cell/styles.css.js +43 -43
  18. package/table/body-cell/styles.scoped.css +173 -161
  19. package/table/body-cell/styles.selectors.js +43 -43
  20. package/table/expandable-rows/styles.css.js +3 -3
  21. package/table/expandable-rows/styles.scoped.css +17 -11
  22. package/table/expandable-rows/styles.selectors.js +3 -3
  23. package/table/header-cell/styles.css.js +26 -25
  24. package/table/header-cell/styles.scoped.css +58 -50
  25. package/table/header-cell/styles.selectors.js +26 -25
  26. package/table/internal.d.ts.map +1 -1
  27. package/table/internal.js +6 -3
  28. package/table/internal.js.map +1 -1
  29. package/table/no-data-cell.js +5 -5
  30. package/table/no-data-cell.js.map +1 -1
  31. package/table/resizer/index.d.ts.map +1 -1
  32. package/table/resizer/index.js +42 -32
  33. package/table/resizer/index.js.map +1 -1
  34. package/table/resizer/resizer-lookup.d.ts.map +1 -1
  35. package/table/resizer/resizer-lookup.js +2 -2
  36. package/table/resizer/resizer-lookup.js.map +1 -1
  37. package/table/sticky-columns/interfaces.d.ts +9 -9
  38. package/table/sticky-columns/interfaces.d.ts.map +1 -1
  39. package/table/sticky-columns/interfaces.js.map +1 -1
  40. package/table/sticky-columns/use-sticky-columns.d.ts +3 -3
  41. package/table/sticky-columns/use-sticky-columns.d.ts.map +1 -1
  42. package/table/sticky-columns/use-sticky-columns.js +33 -29
  43. package/table/sticky-columns/use-sticky-columns.js.map +1 -1
  44. package/table/sticky-columns/utils.d.ts.map +1 -1
  45. package/table/sticky-columns/utils.js +16 -14
  46. package/table/sticky-columns/utils.js.map +1 -1
  47. package/table/sticky-scrollbar/use-sticky-scrollbar.d.ts.map +1 -1
  48. package/table/sticky-scrollbar/use-sticky-scrollbar.js +15 -10
  49. package/table/sticky-scrollbar/use-sticky-scrollbar.js.map +1 -1
  50. package/table/sticky-scrolling.d.ts.map +1 -1
  51. package/table/sticky-scrolling.js +6 -5
  52. package/table/sticky-scrolling.js.map +1 -1
  53. package/table/table-role/grid-navigation.d.ts.map +1 -1
  54. package/table/table-role/grid-navigation.js +35 -44
  55. package/table/table-role/grid-navigation.js.map +1 -1
  56. package/table/use-column-widths.d.ts.map +1 -1
  57. package/table/use-column-widths.js +2 -2
  58. package/table/use-column-widths.js.map +1 -1
  59. package/table/use-sticky-header.js +2 -2
  60. package/table/use-sticky-header.js.map +1 -1
  61. package/table/utils.js +3 -3
  62. 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 isStuckToTheLeft;
38
- private isStuckToTheRight;
39
- private padLeft;
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;AAOtB,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,CA4D7C;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,gBAAgB,CAAS;IACjC,OAAO,CAAC,iBAAiB,CAAS;IAClC,OAAO,CAAC,OAAO,CAAS;;IAMjB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB;IAiBpD,OAAO,CAAC,YAAY;IAgBpB,OAAO,CAAC,kBAAkB,CAiCxB;IAEF,OAAO,CAAC,iBAAiB,CAEvB;IAEF,OAAO,CAAC,SAAS,CAuBf;CACH"}
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.scrollPaddingLeft = state.scrollPaddingLeft + 'px';
55
- wrapperRef.current.style.scrollPaddingRight = state.scrollPaddingRight + 'px';
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.left = (state === null || state === void 0 ? void 0 : state.offset.left) !== undefined ? `${state.offset.left}px` : '';
120
- cellElement.style.right = (state === null || state === void 0 ? void 0 : state.offset.right) !== undefined ? `${state.offset.right}px` : '';
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: { scrollPaddingLeft: 0, scrollPaddingRight: 0 } });
147
+ super({ cellState: new Map(), wrapperState: { scrollPaddingInlineStart: 0, scrollPaddingInlineEnd: 0 } });
145
148
  this.cellOffsets = {
146
149
  offsets: new Map(),
147
- stickyWidthLeft: 0,
148
- stickyWidthRight: 0,
150
+ stickyWidthInlineStart: 0,
151
+ stickyWidthInlineEnd: 0,
149
152
  };
150
- this.isStuckToTheLeft = false;
151
- this.isStuckToTheRight = false;
152
- this.padLeft = false;
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 = 'left';
164
+ stickySide = 'inline-start';
162
165
  }
163
166
  else if (index >= props.visibleColumns.length - props.stickyColumnsLast) {
164
- stickySide = 'right';
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
- padLeft: isFirstColumn && this.padLeft,
175
- lastLeft: this.isStuckToTheLeft && lastLeftStickyColumnIndex === index,
176
- lastRight: this.isStuckToTheRight && lastRightStickyColumnIndex === index,
177
+ padInlineStart: isFirstColumn && this.padInlineStart,
178
+ lastInsetInlineStart: this.isStuckToTheInlineStart && lastLeftStickyColumnIndex === index,
179
+ lastInsetInlineEnd: this.isStuckToTheInlineEnd && lastRightStickyColumnIndex === index,
177
180
  offset: {
178
- left: stickySide === 'left' ? stickyColumnOffsetLeft : undefined,
179
- right: stickySide === 'right' ? stickyColumnOffsetRight : undefined,
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.getBoundingClientRect().width;
194
- const tableWidth = props.table.getBoundingClientRect().width;
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.stickyWidthLeft + this.cellOffsets.stickyWidthRight;
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
- scrollPaddingLeft: this.cellOffsets.stickyWidthLeft,
219
- scrollPaddingRight: this.cellOffsets.stickyWidthRight,
221
+ scrollPaddingInlineStart: this.cellOffsets.stickyWidthInlineStart,
222
+ scrollPaddingInlineEnd: this.cellOffsets.stickyWidthInlineEnd,
220
223
  },
221
224
  }));
222
225
  }
223
226
  }
224
227
  updateScroll(props) {
225
- const wrapperScrollLeft = props.wrapper.scrollLeft;
228
+ const wrapperScrollInlineStart = getScrollInlineStart(props.wrapper);
226
229
  const wrapperScrollWidth = props.wrapper.scrollWidth;
227
230
  const wrapperClientWidth = props.wrapper.clientWidth;
228
- const tablePaddingLeft = parseFloat(getComputedStyle(props.table).paddingLeft) || 0;
229
- const tablePaddingRight = parseFloat(getComputedStyle(props.table).paddingRight) || 0;
230
- this.isStuckToTheLeft = wrapperScrollLeft > tablePaddingLeft;
231
- // Math.ceil() is used here to address an edge-case in certain browsers, where they return non-integer wrapperScrollLeft values
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.isStuckToTheRight = Math.ceil(wrapperScrollLeft) < wrapperScrollWidth - wrapperClientWidth - tablePaddingRight;
234
- this.padLeft = tablePaddingLeft !== 0 && this.isStuckToTheLeft;
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":"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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';\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;AAElH,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,CAE1G;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC,WAAW,EAAE,WAAW,CAAC,EAAE,KAAK,EAAE,kBAAkB,GAAG,WAAW,CA6B9G"}
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.padLeft === s2.padLeft &&
6
- s1.lastLeft === s2.lastLeft &&
7
- s1.lastRight === s2.lastRight &&
8
- s1.offset.left === s2.offset.left &&
9
- s1.offset.right === s2.offset.right);
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.scrollPaddingLeft === s2.scrollPaddingLeft && s1.scrollPaddingRight === s2.scrollPaddingRight;
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, _e, _f;
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 = (_a = element === null || element === void 0 ? void 0 : element.getBoundingClientRect().width) !== null && _a !== void 0 ? _a : 0;
23
- firstColumnsWidths[i] = ((_b = firstColumnsWidths[i - 1]) !== null && _b !== void 0 ? _b : 0) + cellWidth;
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 = (_c = element === null || element === void 0 ? void 0 : element.getBoundingClientRect().width) !== null && _c !== void 0 ? _c : 0;
29
- lastColumnsWidths[i] = ((_d = lastColumnsWidths[i - 1]) !== null && _d !== void 0 ? _d : 0) + cellWidth;
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 stickyWidthLeft = (_e = firstColumnsWidths[props.stickyColumnsFirst - 1]) !== null && _e !== void 0 ? _e : 0;
32
- const stickyWidthRight = (_f = lastColumnsWidths[props.stickyColumnsLast - 1]) !== null && _f !== void 0 ? _f : 0;
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, stickyWidthLeft, stickyWidthRight };
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":"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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';\n\nexport function isCellStatesEqual(s1: null | StickyColumnsCellState, s2: null | StickyColumnsCellState): boolean {\n if (s1 && s2) {\n return (\n s1.padLeft === s2.padLeft &&\n s1.lastLeft === s2.lastLeft &&\n s1.lastRight === s2.lastRight &&\n s1.offset.left === s2.offset.left &&\n s1.offset.right === s2.offset.right\n );\n }\n return s1 === s2;\n}\n\nexport function isWrapperStatesEqual(s1: StickyColumnsWrapperState, s2: StickyColumnsWrapperState): boolean {\n return s1.scrollPaddingLeft === s2.scrollPaddingLeft && s1.scrollPaddingRight === s2.scrollPaddingRight;\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?.getBoundingClientRect().width ?? 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?.getBoundingClientRect().width ?? 0;\n lastColumnsWidths[i] = (lastColumnsWidths[i - 1] ?? 0) + cellWidth;\n }\n\n const stickyWidthLeft = firstColumnsWidths[props.stickyColumnsFirst - 1] ?? 0;\n const stickyWidthRight = 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, stickyWidthLeft, stickyWidthRight };\n}\n"]}
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;AAMvD,eAAO,MAAM,cAAc,YAChB,WAAW,GAAG,IAAI,aAChB,WAAW,GAAG,IAAI,eAChB,WAAW,GAAG,IAAI,sBACX,WAAW,GAAG,IAAI,sBAClB,OAAO,0BACH,MAAM,SA8C/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"}
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 { width: tableWidth } = tableEl.getBoundingClientRect();
14
- const { width: wrapperWidth } = wrapperEl.getBoundingClientRect();
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 = tableWidth > wrapperWidth;
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.height = `${scrollbarHeight}px`;
37
- scrollbarContentEl.style.height = `${scrollbarHeight}px`;
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.getBoundingClientRect();
41
- const tableElRect = tableEl.getBoundingClientRect();
42
- scrollbarEl.style.width = `${wrapperElRect.width}px`;
43
- scrollbarContentEl.style.width = `${tableElRect.width}px`;
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.bottom = hasContainingBlock ? '0px' : `${consideredFooterHeight}px`;
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":"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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';\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 { width: tableWidth } = tableEl.getBoundingClientRect();\n const { width: wrapperWidth } = wrapperEl.getBoundingClientRect();\n\n // using 15 px as a height of transparent scrollbar on mac\n const scrollbarHeight = browserScrollbarSize().height;\n const areaIsScrollable = tableWidth > wrapperWidth;\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 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.height = `${scrollbarHeight}px`;\n scrollbarContentEl.style.height = `${scrollbarHeight}px`;\n }\n\n if (tableEl && wrapperEl && scrollbarContentEl && scrollbarEl) {\n const wrapperElRect = wrapperEl.getBoundingClientRect();\n const tableElRect = tableEl.getBoundingClientRect();\n scrollbarEl.style.width = `${wrapperElRect.width}px`;\n scrollbarContentEl.style.width = `${tableElRect.width}px`;\n\n // when using sticky scrollbars in containers\n // we agreed to ignore dynamic bottom calculations for footer overlap\n scrollbarEl.style.bottom = 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
+ {"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":";AAIA;;;;;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
+ {"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.getBoundingClientRect().bottom;
25
- const scrollingOffset = stickyBottom - item.getBoundingClientRect().top;
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.getBoundingClientRect();
45
- const containerRect = container.getBoundingClientRect();
46
- return stickyRect.top - containerRect.top;
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;AAE7E;;;;;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,SAAS,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC;QACtE,MAAM,eAAe,GAAG,YAAY,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC,GAAG,CAAC;QACxE,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,MAAM,CAAC,qBAAqB,EAAE,CAAC;IAClD,MAAM,aAAa,GAAG,SAAS,CAAC,qBAAqB,EAAE,CAAC;IACxD,OAAO,UAAU,CAAC,GAAG,GAAG,aAAa,CAAC,GAAG,CAAC;AAC5C,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';\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 = stickyRef.current.getBoundingClientRect().bottom;\n const scrollingOffset = stickyBottom - item.getBoundingClientRect().top;\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 = sticky.getBoundingClientRect();\n const containerRect = container.getBoundingClientRect();\n return stickyRect.top - containerRect.top;\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
+ {"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;AAUhE;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,EAAE,kBAAkB,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,mBAAmB,eAoC/G"}
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"}