Change default pointer-events style from "auto" to undefined

inokawa · Aug 29, 2024 · 33b5e3a · 33b5e3a
1 parent 63e9285
commit 33b5e3a
Show file tree

Hide file tree

Showing 22 changed files with 124 additions and 113 deletions.
diff --git a/src/react/VGrid.tsx b/src/react/VGrid.tsx
@@ -404,7 +404,7 @@ export const VGrid = forwardRef<VGridHandle, VGridProps>(
               vScrollDirection !== SCROLL_IDLE ||
               hScrollDirection !== SCROLL_IDLE
                 ? "none"
-                : "auto",
+                : undefined,
           }}
         >
           {items}

diff --git a/src/react/Virtualizer.tsx b/src/react/Virtualizer.tsx
@@ -370,7 +370,7 @@ export const Virtualizer = forwardRef<VirtualizerHandle, VirtualizerProps>(
           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
@@ -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
@@ -6,7 +6,7 @@ exports[`rtl > should work 1`] = `
     style="overflow: auto; contain: strict; width: 100%; height: 100%;"
   >
     <div
-      style="overflow-anchor: none; flex: 0 0 auto; position: relative; visibility: hidden; width: 10000px; height: 4040px; pointer-events: auto;"
+      style="overflow-anchor: none; flex: 0 0 auto; position: relative; visibility: hidden; width: 10000px; height: 4040px;"
     >
       <div
         style="display: grid; margin: 0px; padding: 0px; position: absolute; top: 0px; right: 0px; visibility: visible; min-height: 50px; min-width: 100px;"

diff --git a/src/react/__snapshots__/VGrid.spec.tsx.snap b/src/react/__snapshots__/VGrid.spec.tsx.snap
@@ -6,7 +6,7 @@ exports[`grid > should render 1 children 1`] = `
     style="overflow: auto; contain: strict; width: 100%; height: 100%;"
   >
     <div
-      style="overflow-anchor: none; flex: 0 0 auto; position: relative; visibility: hidden; width: 100px; height: 50px; pointer-events: auto;"
+      style="overflow-anchor: none; flex: 0 0 auto; position: relative; visibility: hidden; width: 100px; height: 50px;"
     >
       <div
         style="display: grid; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px; visibility: visible; min-height: 50px; min-width: 100px;"
@@ -26,7 +26,7 @@ exports[`grid > should render 4x4 children 1`] = `
     style="overflow: auto; contain: strict; width: 100%; height: 100%;"
   >
     <div
-      style="overflow-anchor: none; flex: 0 0 auto; position: relative; visibility: hidden; width: 400px; height: 200px; pointer-events: auto;"
+      style="overflow-anchor: none; flex: 0 0 auto; position: relative; visibility: hidden; width: 400px; height: 200px;"
     >
       <div
         style="display: grid; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px; visibility: visible; min-height: 50px; min-width: 100px;"
@@ -151,7 +151,7 @@ exports[`grid > should render 100x100 children 1`] = `
     style="overflow: auto; contain: strict; width: 100%; height: 100%;"
   >
     <div
-      style="overflow-anchor: none; flex: 0 0 auto; position: relative; visibility: hidden; width: 10000px; height: 4040px; pointer-events: auto;"
+      style="overflow-anchor: none; flex: 0 0 auto; position: relative; visibility: hidden; width: 10000px; height: 4040px;"
     >
       <div
         style="display: grid; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px; visibility: visible; min-height: 50px; min-width: 100px;"
@@ -276,7 +276,7 @@ exports[`grid > should render 1000x1000 children 1`] = `
     style="overflow: auto; contain: strict; width: 100%; height: 100%;"
   >
     <div
-      style="overflow-anchor: none; flex: 0 0 auto; position: relative; visibility: hidden; width: 100000px; height: 40040px; pointer-events: auto;"
+      style="overflow-anchor: none; flex: 0 0 auto; position: relative; visibility: hidden; width: 100000px; height: 40040px;"
     >
       <div
         style="display: grid; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px; visibility: visible; min-height: 50px; min-width: 100px;"
@@ -401,7 +401,7 @@ exports[`grid > should render 10000x10000 children 1`] = `
     style="overflow: auto; contain: strict; width: 100%; height: 100%;"
   >
     <div
-      style="overflow-anchor: none; flex: 0 0 auto; position: relative; visibility: hidden; width: 1000000px; height: 400040px; pointer-events: auto;"
+      style="overflow-anchor: none; flex: 0 0 auto; position: relative; visibility: hidden; width: 1000000px; height: 400040px;"
     >
       <div
         style="display: grid; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px; visibility: visible; min-height: 50px; min-width: 100px;"
@@ -526,7 +526,7 @@ exports[`grid > should render component 1`] = `
     style="overflow: auto; contain: strict; width: 100%; height: 100%;"
   >
     <div
-      style="overflow-anchor: none; flex: 0 0 auto; position: relative; visibility: hidden; width: 10000px; height: 4040px; pointer-events: auto;"
+      style="overflow-anchor: none; flex: 0 0 auto; position: relative; visibility: hidden; width: 10000px; height: 4040px;"
     >
       <div
         style="display: grid; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px; visibility: visible; min-height: 50px; min-width: 100px;"
@@ -651,7 +651,7 @@ exports[`grid > should render fragments 1`] = `
     style="overflow: auto; contain: strict; width: 100%; height: 100%;"
   >
     <div
-      style="overflow-anchor: none; flex: 0 0 auto; position: relative; visibility: hidden; width: 100px; height: 100px; pointer-events: auto;"
+      style="overflow-anchor: none; flex: 0 0 auto; position: relative; visibility: hidden; width: 100px; height: 100px;"
     >
       <div
         style="display: grid; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px; visibility: visible; min-height: 50px; min-width: 100px;"
@@ -684,7 +684,7 @@ exports[`grid > should render non elements 1`] = `
     style="overflow: auto; contain: strict; width: 100%; height: 100%;"
   >
     <div
-      style="overflow-anchor: none; flex: 0 0 auto; position: relative; visibility: hidden; width: 100px; height: 280px; pointer-events: auto;"
+      style="overflow-anchor: none; flex: 0 0 auto; position: relative; visibility: hidden; width: 100px; height: 280px;"
     >
       <div
         style="display: grid; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px; visibility: visible; min-height: 50px; min-width: 100px;"
@@ -711,7 +711,7 @@ exports[`grid > should render with given width / height 1`] = `
     style="overflow: auto; contain: strict; width: 100px; height: 100px;"
   >
     <div
-      style="overflow-anchor: none; flex: 0 0 auto; position: relative; visibility: hidden; width: 400px; height: 200px; pointer-events: auto;"
+      style="overflow-anchor: none; flex: 0 0 auto; position: relative; visibility: hidden; width: 400px; height: 200px;"
     >
       <div
         style="display: grid; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px; visibility: visible; min-height: 50px; min-width: 100px;"
@@ -841,7 +841,7 @@ exports[`should pass attributes to element 1`] = `
     tabindex="0"
   >
     <div
-      style="overflow-anchor: none; flex: 0 0 auto; position: relative; visibility: hidden; width: 10000px; height: 4040px; pointer-events: auto;"
+      style="overflow-anchor: none; flex: 0 0 auto; position: relative; visibility: hidden; width: 10000px; height: 4040px;"
     >
       <div
         style="display: grid; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px; visibility: visible; min-height: 50px; min-width: 100px;"

diff --git a/src/react/__snapshots__/VGrid.ssr.spec.tsx.snap b/src/react/__snapshots__/VGrid.ssr.spec.tsx.snap
diff --git 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%;"
   >
     <div
-      style="overflow-anchor: none; flex: 0 0 auto; position: relative; visibility: hidden; width: 100%; height: 5000px; pointer-events: auto;"
+      style="overflow-anchor: none; flex: 0 0 auto; position: relative; visibility: hidden; width: 100%; height: 5000px;"
     >
       <div
         style="margin: 0px; padding: 0px; position: absolute; width: 100%; left: 0px; top: 0px; visibility: visible;"
@@ -61,7 +61,7 @@ exports[`rtl > should work in horizontal 1`] = `
     style="display: inline-block; overflow-x: auto; contain: strict; width: 100%; height: 100%;"
   >
     <div
-      style="overflow-anchor: none; flex: 0 0 auto; position: relative; visibility: hidden; width: 10000px; height: 100%; pointer-events: auto;"
+      style="overflow-anchor: none; flex: 0 0 auto; position: relative; visibility: hidden; width: 10000px; height: 100%;"
     >
       <div
         style="margin: 0px; padding: 0px; position: absolute; height: 100%; top: 0px; right: 0px; visibility: visible; display: flex;"