From 33b5e3a3bd4e6cf8e786074a21e990abf8541a00 Mon Sep 17 00:00:00 2001 From: inokawa <48897392+inokawa@users.noreply.github.com> Date: Thu, 29 Aug 2024 20:42:35 +0900 Subject: [PATCH] Change default pointer-events style from "auto" to undefined --- src/react/VGrid.tsx | 2 +- src/react/Virtualizer.tsx | 2 +- src/react/WindowVirtualizer.tsx | 2 +- .../__snapshots__/VGrid.rtl.spec.tsx.snap | 2 +- src/react/__snapshots__/VGrid.spec.tsx.snap | 20 ++++---- .../__snapshots__/VGrid.ssr.spec.tsx.snap | 4 +- .../__snapshots__/VList.rtl.spec.tsx.snap | 4 +- src/react/__snapshots__/VList.spec.tsx.snap | 46 +++++++++---------- .../__snapshots__/VList.ssr.spec.tsx.snap | 8 ++-- .../__snapshots__/Virtualizer.spec.tsx.snap | 2 +- .../WindowVirtualizer.rtl.spec.tsx.snap | 4 +- .../WindowVirtualizer.spec.tsx.snap | 40 ++++++++-------- .../WindowVirtualizer.ssr.spec.tsx.snap | 8 ++-- src/solid/Virtualizer.tsx | 3 +- src/solid/WindowVirtualizer.tsx | 3 +- src/svelte/VList.svelte | 2 +- src/svelte/utils.ts | 13 +++++- src/vue/Virtualizer.tsx | 2 +- src/vue/WindowVirtualizer.tsx | 2 +- src/vue/__snapshots__/VList.spec.ts.snap | 34 +++++++------- src/vue/__snapshots__/VList.ssr.spec.ts.snap | 4 +- .../WindowVirtualizer.spec.ts.snap | 30 ++++++------ 22 files changed, 124 insertions(+), 113 deletions(-) diff --git a/src/react/VGrid.tsx b/src/react/VGrid.tsx index b49d7c89c..b3b5e5e30 100644 --- a/src/react/VGrid.tsx +++ b/src/react/VGrid.tsx @@ -404,7 +404,7 @@ export const VGrid = forwardRef( vScrollDirection !== SCROLL_IDLE || hScrollDirection !== SCROLL_IDLE ? "none" - : "auto", + : undefined, }} > {items} diff --git a/src/react/Virtualizer.tsx b/src/react/Virtualizer.tsx index 2ad5b6589..c1c924174 100644 --- a/src/react/Virtualizer.tsx +++ b/src/react/Virtualizer.tsx @@ -370,7 +370,7 @@ export const Virtualizer = forwardRef( visibility: "hidden", // TODO replace with other optimization methods width: isHorizontal ? totalSize : "100%", height: isHorizontal ? "100%" : totalSize, - pointerEvents: scrollDirection !== SCROLL_IDLE ? "none" : "auto", + pointerEvents: scrollDirection !== SCROLL_IDLE ? "none" : undefined, }} > {items} diff --git a/src/react/WindowVirtualizer.tsx b/src/react/WindowVirtualizer.tsx index e1199c025..c82a36fe6 100644 --- a/src/react/WindowVirtualizer.tsx +++ b/src/react/WindowVirtualizer.tsx @@ -267,7 +267,7 @@ export const WindowVirtualizer = forwardRef< visibility: "hidden", // TODO replace with other optimization methods width: isHorizontal ? totalSize : "100%", height: isHorizontal ? "100%" : totalSize, - pointerEvents: scrollDirection !== SCROLL_IDLE ? "none" : "auto", + pointerEvents: scrollDirection !== SCROLL_IDLE ? "none" : undefined, }} > {items} diff --git a/src/react/__snapshots__/VGrid.rtl.spec.tsx.snap b/src/react/__snapshots__/VGrid.rtl.spec.tsx.snap index 625920474..26b0e072c 100644 --- a/src/react/__snapshots__/VGrid.rtl.spec.tsx.snap +++ b/src/react/__snapshots__/VGrid.rtl.spec.tsx.snap @@ -6,7 +6,7 @@ exports[`rtl > should work 1`] = ` style="overflow: auto; contain: strict; width: 100%; height: 100%;" >
should render 1 children 1`] = ` style="overflow: auto; contain: strict; width: 100%; height: 100%;" >
should render 4x4 children 1`] = ` style="overflow: auto; contain: strict; width: 100%; height: 100%;" >
should render 100x100 children 1`] = ` style="overflow: auto; contain: strict; width: 100%; height: 100%;" >
should render 1000x1000 children 1`] = ` style="overflow: auto; contain: strict; width: 100%; height: 100%;" >
should render 10000x10000 children 1`] = ` style="overflow: auto; contain: strict; width: 100%; height: 100%;" >
should render component 1`] = ` style="overflow: auto; contain: strict; width: 100%; height: 100%;" >
should render fragments 1`] = ` style="overflow: auto; contain: strict; width: 100%; height: 100%;" >
should render non elements 1`] = ` style="overflow: auto; contain: strict; width: 100%; height: 100%;" >
should render with given width / height 1`] = ` style="overflow: auto; contain: strict; width: 100px; height: 100px;" >
should render items with renderToStaticMarkup and vertical 1`] = `"
0-0
0-1
0-2
0-3
0-4
0-5
0-6
0-7
0-8
0-9
0-10
0-11
0-12
0-13
0-14
0-15
0-16
0-17
0-18
0-19
0-20
0-21
0-22
0-23
1-0
1-1
1-2
1-3
1-4
1-5
1-6
1-7
1-8
1-9
1-10
1-11
1-12
1-13
1-14
1-15
1-16
1-17
1-18
1-19
1-20
1-21
1-22
1-23
2-0
2-1
2-2
2-3
2-4
2-5
2-6
2-7
2-8
2-9
2-10
2-11
2-12
2-13
2-14
2-15
2-16
2-17
2-18
2-19
2-20
2-21
2-22
2-23
3-0
3-1
3-2
3-3
3-4
3-5
3-6
3-7
3-8
3-9
3-10
3-11
3-12
3-13
3-14
3-15
3-16
3-17
3-18
3-19
3-20
3-21
3-22
3-23
4-0
4-1
4-2
4-3
4-4
4-5
4-6
4-7
4-8
4-9
4-10
4-11
4-12
4-13
4-14
4-15
4-16
4-17
4-18
4-19
4-20
4-21
4-22
4-23
5-0
5-1
5-2
5-3
5-4
5-5
5-6
5-7
5-8
5-9
5-10
5-11
5-12
5-13
5-14
5-15
5-16
5-17
5-18
5-19
5-20
5-21
5-22
5-23
6-0
6-1
6-2
6-3
6-4
6-5
6-6
6-7
6-8
6-9
6-10
6-11
6-12
6-13
6-14
6-15
6-16
6-17
6-18
6-19
6-20
6-21
6-22
6-23
7-0
7-1
7-2
7-3
7-4
7-5
7-6
7-7
7-8
7-9
7-10
7-11
7-12
7-13
7-14
7-15
7-16
7-17
7-18
7-19
7-20
7-21
7-22
7-23
8-0
8-1
8-2
8-3
8-4
8-5
8-6
8-7
8-8
8-9
8-10
8-11
8-12
8-13
8-14
8-15
8-16
8-17
8-18
8-19
8-20
8-21
8-22
8-23
9-0
9-1
9-2
9-3
9-4
9-5
9-6
9-7
9-8
9-9
9-10
9-11
9-12
9-13
9-14
9-15
9-16
9-17
9-18
9-19
9-20
9-21
9-22
9-23
10-0
10-1
10-2
10-3
10-4
10-5
10-6
10-7
10-8
10-9
10-10
10-11
10-12
10-13
10-14
10-15
10-16
10-17
10-18
10-19
10-20
10-21
10-22
10-23
11-0
11-1
11-2
11-3
11-4
11-5
11-6
11-7
11-8
11-9
11-10
11-11
11-12
11-13
11-14
11-15
11-16
11-17
11-18
11-19
11-20
11-21
11-22
11-23
12-0
12-1
12-2
12-3
12-4
12-5
12-6
12-7
12-8
12-9
12-10
12-11
12-12
12-13
12-14
12-15
12-16
12-17
12-18
12-19
12-20
12-21
12-22
12-23
13-0
13-1
13-2
13-3
13-4
13-5
13-6
13-7
13-8
13-9
13-10
13-11
13-12
13-13
13-14
13-15
13-16
13-17
13-18
13-19
13-20
13-21
13-22
13-23
"`; +exports[`SSR > should render items with renderToStaticMarkup and vertical 1`] = `"
0-0
0-1
0-2
0-3
0-4
0-5
0-6
0-7
0-8
0-9
0-10
0-11
0-12
0-13
0-14
0-15
0-16
0-17
0-18
0-19
0-20
0-21
0-22
0-23
1-0
1-1
1-2
1-3
1-4
1-5
1-6
1-7
1-8
1-9
1-10
1-11
1-12
1-13
1-14
1-15
1-16
1-17
1-18
1-19
1-20
1-21
1-22
1-23
2-0
2-1
2-2
2-3
2-4
2-5
2-6
2-7
2-8
2-9
2-10
2-11
2-12
2-13
2-14
2-15
2-16
2-17
2-18
2-19
2-20
2-21
2-22
2-23
3-0
3-1
3-2
3-3
3-4
3-5
3-6
3-7
3-8
3-9
3-10
3-11
3-12
3-13
3-14
3-15
3-16
3-17
3-18
3-19
3-20
3-21
3-22
3-23
4-0
4-1
4-2
4-3
4-4
4-5
4-6
4-7
4-8
4-9
4-10
4-11
4-12
4-13
4-14
4-15
4-16
4-17
4-18
4-19
4-20
4-21
4-22
4-23
5-0
5-1
5-2
5-3
5-4
5-5
5-6
5-7
5-8
5-9
5-10
5-11
5-12
5-13
5-14
5-15
5-16
5-17
5-18
5-19
5-20
5-21
5-22
5-23
6-0
6-1
6-2
6-3
6-4
6-5
6-6
6-7
6-8
6-9
6-10
6-11
6-12
6-13
6-14
6-15
6-16
6-17
6-18
6-19
6-20
6-21
6-22
6-23
7-0
7-1
7-2
7-3
7-4
7-5
7-6
7-7
7-8
7-9
7-10
7-11
7-12
7-13
7-14
7-15
7-16
7-17
7-18
7-19
7-20
7-21
7-22
7-23
8-0
8-1
8-2
8-3
8-4
8-5
8-6
8-7
8-8
8-9
8-10
8-11
8-12
8-13
8-14
8-15
8-16
8-17
8-18
8-19
8-20
8-21
8-22
8-23
9-0
9-1
9-2
9-3
9-4
9-5
9-6
9-7
9-8
9-9
9-10
9-11
9-12
9-13
9-14
9-15
9-16
9-17
9-18
9-19
9-20
9-21
9-22
9-23
10-0
10-1
10-2
10-3
10-4
10-5
10-6
10-7
10-8
10-9
10-10
10-11
10-12
10-13
10-14
10-15
10-16
10-17
10-18
10-19
10-20
10-21
10-22
10-23
11-0
11-1
11-2
11-3
11-4
11-5
11-6
11-7
11-8
11-9
11-10
11-11
11-12
11-13
11-14
11-15
11-16
11-17
11-18
11-19
11-20
11-21
11-22
11-23
12-0
12-1
12-2
12-3
12-4
12-5
12-6
12-7
12-8
12-9
12-10
12-11
12-12
12-13
12-14
12-15
12-16
12-17
12-18
12-19
12-20
12-21
12-22
12-23
13-0
13-1
13-2
13-3
13-4
13-5
13-6
13-7
13-8
13-9
13-10
13-11
13-12
13-13
13-14
13-15
13-16
13-17
13-18
13-19
13-20
13-21
13-22
13-23
"`; -exports[`SSR > should render items with renderToString and vertical 1`] = `"
0-0
0-1
0-2
0-3
0-4
0-5
0-6
0-7
0-8
0-9
0-10
0-11
0-12
0-13
0-14
0-15
0-16
0-17
0-18
0-19
0-20
0-21
0-22
0-23
1-0
1-1
1-2
1-3
1-4
1-5
1-6
1-7
1-8
1-9
1-10
1-11
1-12
1-13
1-14
1-15
1-16
1-17
1-18
1-19
1-20
1-21
1-22
1-23
2-0
2-1
2-2
2-3
2-4
2-5
2-6
2-7
2-8
2-9
2-10
2-11
2-12
2-13
2-14
2-15
2-16
2-17
2-18
2-19
2-20
2-21
2-22
2-23
3-0
3-1
3-2
3-3
3-4
3-5
3-6
3-7
3-8
3-9
3-10
3-11
3-12
3-13
3-14
3-15
3-16
3-17
3-18
3-19
3-20
3-21
3-22
3-23
4-0
4-1
4-2
4-3
4-4
4-5
4-6
4-7
4-8
4-9
4-10
4-11
4-12
4-13
4-14
4-15
4-16
4-17
4-18
4-19
4-20
4-21
4-22
4-23
5-0
5-1
5-2
5-3
5-4
5-5
5-6
5-7
5-8
5-9
5-10
5-11
5-12
5-13
5-14
5-15
5-16
5-17
5-18
5-19
5-20
5-21
5-22
5-23
6-0
6-1
6-2
6-3
6-4
6-5
6-6
6-7
6-8
6-9
6-10
6-11
6-12
6-13
6-14
6-15
6-16
6-17
6-18
6-19
6-20
6-21
6-22
6-23
7-0
7-1
7-2
7-3
7-4
7-5
7-6
7-7
7-8
7-9
7-10
7-11
7-12
7-13
7-14
7-15
7-16
7-17
7-18
7-19
7-20
7-21
7-22
7-23
8-0
8-1
8-2
8-3
8-4
8-5
8-6
8-7
8-8
8-9
8-10
8-11
8-12
8-13
8-14
8-15
8-16
8-17
8-18
8-19
8-20
8-21
8-22
8-23
9-0
9-1
9-2
9-3
9-4
9-5
9-6
9-7
9-8
9-9
9-10
9-11
9-12
9-13
9-14
9-15
9-16
9-17
9-18
9-19
9-20
9-21
9-22
9-23
10-0
10-1
10-2
10-3
10-4
10-5
10-6
10-7
10-8
10-9
10-10
10-11
10-12
10-13
10-14
10-15
10-16
10-17
10-18
10-19
10-20
10-21
10-22
10-23
11-0
11-1
11-2
11-3
11-4
11-5
11-6
11-7
11-8
11-9
11-10
11-11
11-12
11-13
11-14
11-15
11-16
11-17
11-18
11-19
11-20
11-21
11-22
11-23
12-0
12-1
12-2
12-3
12-4
12-5
12-6
12-7
12-8
12-9
12-10
12-11
12-12
12-13
12-14
12-15
12-16
12-17
12-18
12-19
12-20
12-21
12-22
12-23
13-0
13-1
13-2
13-3
13-4
13-5
13-6
13-7
13-8
13-9
13-10
13-11
13-12
13-13
13-14
13-15
13-16
13-17
13-18
13-19
13-20
13-21
13-22
13-23
"`; +exports[`SSR > should render items with renderToString and vertical 1`] = `"
0-0
0-1
0-2
0-3
0-4
0-5
0-6
0-7
0-8
0-9
0-10
0-11
0-12
0-13
0-14
0-15
0-16
0-17
0-18
0-19
0-20
0-21
0-22
0-23
1-0
1-1
1-2
1-3
1-4
1-5
1-6
1-7
1-8
1-9
1-10
1-11
1-12
1-13
1-14
1-15
1-16
1-17
1-18
1-19
1-20
1-21
1-22
1-23
2-0
2-1
2-2
2-3
2-4
2-5
2-6
2-7
2-8
2-9
2-10
2-11
2-12
2-13
2-14
2-15
2-16
2-17
2-18
2-19
2-20
2-21
2-22
2-23
3-0
3-1
3-2
3-3
3-4
3-5
3-6
3-7
3-8
3-9
3-10
3-11
3-12
3-13
3-14
3-15
3-16
3-17
3-18
3-19
3-20
3-21
3-22
3-23
4-0
4-1
4-2
4-3
4-4
4-5
4-6
4-7
4-8
4-9
4-10
4-11
4-12
4-13
4-14
4-15
4-16
4-17
4-18
4-19
4-20
4-21
4-22
4-23
5-0
5-1
5-2
5-3
5-4
5-5
5-6
5-7
5-8
5-9
5-10
5-11
5-12
5-13
5-14
5-15
5-16
5-17
5-18
5-19
5-20
5-21
5-22
5-23
6-0
6-1
6-2
6-3
6-4
6-5
6-6
6-7
6-8
6-9
6-10
6-11
6-12
6-13
6-14
6-15
6-16
6-17
6-18
6-19
6-20
6-21
6-22
6-23
7-0
7-1
7-2
7-3
7-4
7-5
7-6
7-7
7-8
7-9
7-10
7-11
7-12
7-13
7-14
7-15
7-16
7-17
7-18
7-19
7-20
7-21
7-22
7-23
8-0
8-1
8-2
8-3
8-4
8-5
8-6
8-7
8-8
8-9
8-10
8-11
8-12
8-13
8-14
8-15
8-16
8-17
8-18
8-19
8-20
8-21
8-22
8-23
9-0
9-1
9-2
9-3
9-4
9-5
9-6
9-7
9-8
9-9
9-10
9-11
9-12
9-13
9-14
9-15
9-16
9-17
9-18
9-19
9-20
9-21
9-22
9-23
10-0
10-1
10-2
10-3
10-4
10-5
10-6
10-7
10-8
10-9
10-10
10-11
10-12
10-13
10-14
10-15
10-16
10-17
10-18
10-19
10-20
10-21
10-22
10-23
11-0
11-1
11-2
11-3
11-4
11-5
11-6
11-7
11-8
11-9
11-10
11-11
11-12
11-13
11-14
11-15
11-16
11-17
11-18
11-19
11-20
11-21
11-22
11-23
12-0
12-1
12-2
12-3
12-4
12-5
12-6
12-7
12-8
12-9
12-10
12-11
12-12
12-13
12-14
12-15
12-16
12-17
12-18
12-19
12-20
12-21
12-22
12-23
13-0
13-1
13-2
13-3
13-4
13-5
13-6
13-7
13-8
13-9
13-10
13-11
13-12
13-13
13-14
13-15
13-16
13-17
13-18
13-19
13-20
13-21
13-22
13-23
"`; diff --git a/src/react/__snapshots__/VList.rtl.spec.tsx.snap b/src/react/__snapshots__/VList.rtl.spec.tsx.snap index a52c2fcf3..122740693 100644 --- a/src/react/__snapshots__/VList.rtl.spec.tsx.snap +++ b/src/react/__snapshots__/VList.rtl.spec.tsx.snap @@ -6,7 +6,7 @@ exports[`rtl > should not work in vertical 1`] = ` style="display: block; overflow-y: auto; contain: strict; width: 100%; height: 100%;" >
should work in horizontal 1`] = ` style="display: inline-block; overflow-x: auto; contain: strict; width: 100%; height: 100%;" >
should render 1 children 1`] = ` style="display: inline-block; overflow-x: auto; contain: strict; width: 100%; height: 100%;" >
should render 5 children 1`] = ` style="display: inline-block; overflow-x: auto; contain: strict; width: 100%; height: 100%;" >
should render 100 children 1`] = ` style="display: inline-block; overflow-x: auto; contain: strict; width: 100%; height: 100%;" >
should render 1000 children 1`] = ` style="display: inline-block; overflow-x: auto; contain: strict; width: 100%; height: 100%;" >
should render 10000 children 1`] = ` style="display: inline-block; overflow-x: auto; contain: strict; width: 100%; height: 100%;" >
should render component 1`] = ` style="display: inline-block; overflow-x: auto; contain: strict; width: 100%; height: 100%;" >
should render fragments 1`] = ` style="display: inline-block; overflow-x: auto; contain: strict; width: 100%; height: 100%;" >
should render non elements 1`] = ` style="display: inline-block; overflow-x: auto; contain: strict; width: 100%; height: 100%;" >
should render with given width / height 1`] = ` style="display: inline-block; overflow-x: auto; contain: strict; width: 100px; height: 800px;" >
should render many items 1`] = ` style="visibility: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 100%;" >
should render 0 children 1`] = ` style="display: block; overflow-y: auto; contain: strict; width: 100%; height: 100%;" >
@@ -574,7 +574,7 @@ exports[`vertical > should render 1 children 1`] = ` style="display: block; overflow-y: auto; contain: strict; width: 100%; height: 100%;" >
should render 5 children 1`] = ` style="display: block; overflow-y: auto; contain: strict; width: 100%; height: 100%;" >
should render 100 children 1`] = ` style="display: block; overflow-y: auto; contain: strict; width: 100%; height: 100%;" >
should render 1000 children 1`] = ` style="display: block; overflow-y: auto; contain: strict; width: 100%; height: 100%;" >
should render 10000 children 1`] = ` style="display: block; overflow-y: auto; contain: strict; width: 100%; height: 100%;" >
should render component 1`] = ` style="display: block; overflow-y: auto; contain: strict; width: 100%; height: 100%;" >
should render fragments 1`] = ` style="display: block; overflow-y: auto; contain: strict; width: 100%; height: 100%;" >
should render non elements 1`] = ` style="display: block; overflow-y: auto; contain: strict; width: 100%; height: 100%;" >
should render with given width / height 1`] = ` style="display: block; overflow-y: auto; contain: strict; width: 100px; height: 800px;" >
should render items with renderToStaticMarkup and horizontal 1`] = `"
0
1
2
3
4
5
6
7
8
9
10
11
12
13
"`; +exports[`SSR > should render items with renderToStaticMarkup and horizontal 1`] = `"
0
1
2
3
4
5
6
7
8
9
10
11
12
13
"`; -exports[`SSR > should render items with renderToStaticMarkup and vertical 1`] = `"
0
1
2
3
4
5
6
7
8
9
10
11
12
13
"`; +exports[`SSR > should render items with renderToStaticMarkup and vertical 1`] = `"
0
1
2
3
4
5
6
7
8
9
10
11
12
13
"`; -exports[`SSR > should render items with renderToString and horizontal 1`] = `"
0
1
2
3
4
5
6
7
8
9
10
11
12
13
"`; +exports[`SSR > should render items with renderToString and horizontal 1`] = `"
0
1
2
3
4
5
6
7
8
9
10
11
12
13
"`; -exports[`SSR > should render items with renderToString and vertical 1`] = `"
0
1
2
3
4
5
6
7
8
9
10
11
12
13
"`; +exports[`SSR > should render items with renderToString and vertical 1`] = `"
0
1
2
3
4
5
6
7
8
9
10
11
12
13
"`; diff --git a/src/react/__snapshots__/Virtualizer.spec.tsx.snap b/src/react/__snapshots__/Virtualizer.spec.tsx.snap index 6b6461a48..05c91b8a0 100644 --- a/src/react/__snapshots__/Virtualizer.spec.tsx.snap +++ b/src/react/__snapshots__/Virtualizer.spec.tsx.snap @@ -6,7 +6,7 @@ exports[`should change components 1`] = ` style="overflow-y: auto;" >
  • should not work in vertical 1`] = `
    should not work in vertical 1`] = ` exports[`rtl > should work in horizontal 1`] = `
    should render 1 children 1`] = `
    should render 1 children 1`] = ` exports[`horizontal > should render 5 children 1`] = `
    should render 5 children 1`] = ` exports[`horizontal > should render 100 children 1`] = `
    should render 100 children 1`] = ` exports[`horizontal > should render 1000 children 1`] = `
    should render 1000 children 1`] = ` exports[`horizontal > should render 10000 children 1`] = `
    should render 10000 children 1`] = ` exports[`horizontal > should render component 1`] = `
    should render component 1`] = ` exports[`horizontal > should render fragments 1`] = `
    should render fragments 1`] = ` exports[`horizontal > should render non elements 1`] = `
    should render with given width / height 1`] = ` style="width: 100px; height: 800px;" >
    should render with given width / height 1`] = ` exports[`should pass index to items 1`] = `
    should render 1 children 1`] = `
    should render 1 children 1`] = ` exports[`vertical > should render 5 children 1`] = `
    should render 5 children 1`] = ` exports[`vertical > should render 100 children 1`] = `
    should render 100 children 1`] = ` exports[`vertical > should render 1000 children 1`] = `
    should render 1000 children 1`] = ` exports[`vertical > should render 10000 children 1`] = `
    should render 10000 children 1`] = ` exports[`vertical > should render component 1`] = `
    should render component 1`] = ` exports[`vertical > should render fragments 1`] = `
    should render fragments 1`] = ` exports[`vertical > should render non elements 1`] = `
    should render with given width / height 1`] = ` style="width: 100px; height: 800px;" >
    should render items with renderToStaticMarkup and horizontal 1`] = `"
    0
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    "`; +exports[`SSR > should render items with renderToStaticMarkup and horizontal 1`] = `"
    0
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    "`; -exports[`SSR > should render items with renderToStaticMarkup and vertical 1`] = `"
    0
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    "`; +exports[`SSR > should render items with renderToStaticMarkup and vertical 1`] = `"
    0
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    "`; -exports[`SSR > should render items with renderToString and horizontal 1`] = `"
    0
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    "`; +exports[`SSR > should render items with renderToString and horizontal 1`] = `"
    0
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    "`; -exports[`SSR > should render items with renderToString and vertical 1`] = `"
    0
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    "`; +exports[`SSR > should render items with renderToString and vertical 1`] = `"
    0
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    "`; diff --git a/src/solid/Virtualizer.tsx b/src/solid/Virtualizer.tsx index ac07ddd23..ab180aad8 100644 --- a/src/solid/Virtualizer.tsx +++ b/src/solid/Virtualizer.tsx @@ -298,7 +298,8 @@ export const Virtualizer = (props: VirtualizerProps): JSX.Element => { visibility: "hidden", // TODO replace with other optimization methods width: horizontal ? totalSize() + "px" : "100%", height: horizontal ? "100%" : totalSize() + "px", - "pointer-events": scrollDirection() !== SCROLL_IDLE ? "none" : "auto", + "pointer-events": + scrollDirection() !== SCROLL_IDLE ? "none" : undefined, }} > ( visibility: "hidden", // TODO replace with other optimization methods width: horizontal ? totalSize() + "px" : "100%", height: horizontal ? "100%" : totalSize() + "px", - "pointer-events": scrollDirection() !== SCROLL_IDLE ? "none" : "auto", + "pointer-events": + scrollDirection() !== SCROLL_IDLE ? "none" : undefined, }} > diff --git a/src/svelte/utils.ts b/src/svelte/utils.ts index 552822973..9fcd785dd 100644 --- a/src/svelte/utils.ts +++ b/src/svelte/utils.ts @@ -1,4 +1,5 @@ import { afterUpdate, beforeUpdate } from "svelte"; +import { NULL } from "../core/utils"; export const onUpdate = (cb: () => void, before?: boolean) => { (before ? beforeUpdate : afterUpdate)(() => { @@ -6,8 +7,16 @@ export const onUpdate = (cb: () => void, before?: boolean) => { }); }; -export const styleToString = (obj: Record): string => { - return Object.keys(obj).reduce((acc, k) => acc + `${k}:${obj[k]};`, ""); +export const styleToString = ( + obj: Record +): string => { + return Object.keys(obj).reduce((acc, k) => { + const value = obj[k]; + if (value == NULL) { + return acc; + } + return acc + `${k}:${value};`; + }, ""); }; export const defaultGetKey = (_data: unknown, i: number) => "_" + i; diff --git a/src/vue/Virtualizer.tsx b/src/vue/Virtualizer.tsx index afe0b87a1..d2eec86a4 100644 --- a/src/vue/Virtualizer.tsx +++ b/src/vue/Virtualizer.tsx @@ -273,7 +273,7 @@ export const Virtualizer = /*#__PURE__*/ defineComponent({ visibility: "hidden", // TODO replace with other optimization methods width: isHorizontal ? totalSize + "px" : "100%", height: isHorizontal ? "100%" : totalSize + "px", - pointerEvents: scrollDirection !== SCROLL_IDLE ? "none" : "auto", + pointerEvents: scrollDirection !== SCROLL_IDLE ? "none" : undefined, }} > {items} diff --git a/src/vue/WindowVirtualizer.tsx b/src/vue/WindowVirtualizer.tsx index 0eb296221..9c50867b3 100644 --- a/src/vue/WindowVirtualizer.tsx +++ b/src/vue/WindowVirtualizer.tsx @@ -180,7 +180,7 @@ export const WindowVirtualizer = /*#__PURE__*/ defineComponent({ visibility: "hidden", // TODO replace with other optimization methods width: isHorizontal ? totalSize + "px" : "100%", height: isHorizontal ? "100%" : totalSize + "px", - pointerEvents: scrollDirection !== SCROLL_IDLE ? "none" : "auto", + pointerEvents: scrollDirection !== SCROLL_IDLE ? "none" : undefined, }} > {items} diff --git a/src/vue/__snapshots__/VList.spec.ts.snap b/src/vue/__snapshots__/VList.spec.ts.snap index 1863baa37..dfff51e6d 100644 --- a/src/vue/__snapshots__/VList.spec.ts.snap +++ b/src/vue/__snapshots__/VList.spec.ts.snap @@ -7,7 +7,7 @@ exports[`horizontal > should render 0 children 1`] = ` style="display: inline-block; overflow-x: auto; contain: strict; width: 100%; height: 100%;" >
    @@ -21,7 +21,7 @@ exports[`horizontal > should render 1 children 1`] = ` style="display: inline-block; overflow-x: auto; contain: strict; width: 100%; height: 100%;" >
    should render 5 children 1`] = ` style="display: inline-block; overflow-x: auto; contain: strict; width: 100%; height: 100%;" >
    should render 100 children 1`] = ` style="display: inline-block; overflow-x: auto; contain: strict; width: 100%; height: 100%;" >
    should render 1000 children 1`] = ` style="display: inline-block; overflow-x: auto; contain: strict; width: 100%; height: 100%;" >
    should render 10000 children 1`] = ` style="display: inline-block; overflow-x: auto; contain: strict; width: 100%; height: 100%;" >
    should render component 1`] = ` style="display: inline-block; overflow-x: auto; contain: strict; width: 100%; height: 100%;" >
    should render with given width / height 1`] = ` style="display: inline-block; overflow-x: auto; contain: strict; width: 100px; height: 800px;" >
    should render 0 children 1`] = ` style="display: block; overflow-y: auto; contain: strict; width: 100%; height: 100%;" >
    @@ -370,7 +370,7 @@ exports[`vertical > should render 1 children 1`] = ` style="display: block; overflow-y: auto; contain: strict; width: 100%; height: 100%;" >
    should render 5 children 1`] = ` style="display: block; overflow-y: auto; contain: strict; width: 100%; height: 100%;" >
    should render 100 children 1`] = ` style="display: block; overflow-y: auto; contain: strict; width: 100%; height: 100%;" >
    should render 1000 children 1`] = ` style="display: block; overflow-y: auto; contain: strict; width: 100%; height: 100%;" >
    should render 10000 children 1`] = ` style="display: block; overflow-y: auto; contain: strict; width: 100%; height: 100%;" >
    should render component 1`] = ` style="display: block; overflow-y: auto; contain: strict; width: 100%; height: 100%;" >
    should render with given width / height 1`] = ` style="display: block; overflow-y: auto; contain: strict; width: 100px; height: 800px;" >
    should render items with renderToString and horizontal 1`] = `"
    0
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    "`; +exports[`SSR > should render items with renderToString and horizontal 1`] = `"
    0
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    "`; -exports[`SSR > should render items with renderToString and vertical 1`] = `"
    0
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    "`; +exports[`SSR > should render items with renderToString and vertical 1`] = `"
    0
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    "`; diff --git a/src/vue/__snapshots__/WindowVirtualizer.spec.ts.snap b/src/vue/__snapshots__/WindowVirtualizer.spec.ts.snap index d37af09ef..698dddb34 100644 --- a/src/vue/__snapshots__/WindowVirtualizer.spec.ts.snap +++ b/src/vue/__snapshots__/WindowVirtualizer.spec.ts.snap @@ -4,7 +4,7 @@ exports[`horizontal > should render 0 children 1`] = `
    @@ -14,7 +14,7 @@ exports[`horizontal > should render 1 children 1`] = `
    should render 5 children 1`] = `
    should render 100 children 1`] = `
    should render 1000 children 1`] = `
    should render 10000 children 1`] = `
    should render component 1`] = `