[CLOV-1600][BpkScrollableCalendar] Bump react-window to v2#4477
Closed
kerrie-wu wants to merge 4 commits into
Closed
[CLOV-1600][BpkScrollableCalendar] Bump react-window to v2#4477kerrie-wu wants to merge 4 commits into
kerrie-wu wants to merge 4 commits into
Conversation
react-window v2 is a major rewrite: List replaces VariableSizeList, render-prop becomes rowComponent + rowProps, auto-sizing is built-in (no more AutoSizer), resetAfterIndex is gone (rowProps changes are auto-detected), initialScrollOffset is replaced by listRef.scrollToRow, and TS types ship with the package. - Bump react-window ^1.8.7 -> ^2.0.0 - Drop react-virtualized-auto-sizer (v2 has built-in sizing) - Drop @types/react-window (v2 ships its own types) - Rewrite BpkScrollableCalendarGridList for v2 API - Preserve sentinelRef + ResizeObserver font-scaling logic Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Skyscanner Artifactory's X-Ray policy returns 403 for react-window@2.2.7 (and its transitive color@5/color-convert@3/color-name@2/color-string@2 deps that we don't already cache). Local install resolved through artifactory because of user-level npm config; the project .npmrc points to the public registry. Rewrite the resolved URLs in packages/package-lock.json from artifactory.skyscannertools.net to registry.npmjs.org for these 5 deps. Integrity hashes are unchanged (verified the public tarball produces the same sha512), and @skyscanner/* scoped packages keep their artifactory URLs. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Contributor
|
Visit https://backpack.github.io/storybook-prs/4477 to see this build running in a browser. |
react-window v2's List uses ResizeObserver internally for auto-sizing, which jsdom does not provide. Three test files (BpkScrollableCalendar, BpkScrollableCalendarGridList, accessibility) need the mock; reusing the per-file pattern already used elsewhere in the repo (bpk-component-chatbot-input, bpk-component-price-range, bpk-component-slider). v2 also defaults the outer element to role="list", but our rows render calendar grids (role="grid") and headings, not listitems — axe flagged this as aria-required-children. Pass role="presentation" to opt out of the implicit list semantics. Snapshots still need regenerating (v2 emits different DOM); that is left for the next jest -u pass. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
react-window v2 emits a different DOM tree than v1's AutoSizer + List combination. In jsdom the new defaultHeight path also renders more month rows than the v1 0x0 AutoSizer fallback did, so the snapshots grow even though the rendered output is correct. Verified manually: - role="presentation" appears on the v2 List outer div (our override) - rows are tagged with data-react-window-index - bpk-scrollable-calendar-grid contents are unchanged Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Contributor
|
Visit https://backpack.github.io/storybook-prs/4477 to see this build running in a browser. |
Contributor
This was referenced May 26, 2026
8 tasks
Contributor
|
Closing this older draft in favour of #4668, which reapplies the CLOV-1600 react-window v2 migration onto the current main repository structure. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
CLOV-1600. Migrates the only
react-windowconsumer (BpkScrollableCalendarGridList) from v1 to v2.v2 is an upstream rewrite, not a rename:
ListreplacesVariableSizeList; render-prop becomesrowComponent+rowPropsreact-virtualized-auto-sizerresetAfterIndexis gone — v2 auto-reacts torowPropschangesinitialScrollOffsetis gone — replaced by imperativelistRef.scrollToRow(...)@types/react-windowno longer neededChanges
react-window^1.8.7→^2.0.0(lockfile resolves to2.2.7)react-virtualized-auto-sizer(only consumer was this file)@types/react-window(v2 has built-in types; upstream README explicitly drops it)BpkScrollableCalendarGridList.tsx:List+useListRef+ module-levelRowcomponent +rowHeightfunctionuseEffect+listRef.current?.scrollToRow({ index, align: 'start', behavior: 'instant' })replacesinitialScrollOffsetresetAfterIndexeffect (v2 auto-detectsrowPropschanges)AutoSizerwrapper<div>+ResizeObserverfor browser font scaling — independent of react-windowdir-drivenstyle={{ direction: 'rtl' }}utils.ts(getMonthsArray,getMonthItemHeights) unchanged — outputs are still pixel heights consumed by the newrowHeightfunction.Migration mapping
VariableSizeListListitemCountrowCountitemSize={fn}rowHeight={fn}<List>{rowRenderer}</List><List rowComponent={Row} rowProps={...} />ref.current.resetAfterIndex(0)initialScrollOffsetlistRef.current?.scrollToRow({ index, align, behavior })<AutoSizer>wrapperTest plan
npm run lintpassesnpm run typecheckpasses (verified locally — exit 0)npm run jest packages/bpk-component-scrollable-calendar— snapshots regenerated viajest -u, diff reviewed (DOM structure differs becauseAutoSizerwrapper is removed and v2 emits different inner markup)overscanCountstill in effect, no jank<html dir="rtl">renders right-to-leftAutoSizeronDateClick,selectionConfiguration,focusedDate,aria-hiddenpropagation unchangeddefaultHeight={estimatedMonthItemHeight}covers the initial render pathNotes
useEffect+ imperativescrollToRowmay produce a brief frame at the top before scrolling. To be confirmed visually in Storybook; if unacceptable, can defer mountingListuntil the sentinelResizeObserverfirst fires.🤖 Generated with Claude Code