Fixing a console warning that was a result of some of the new paramet…

…ers accidentally being passed to a div via spread operator
radix-ui · Sep 11, 2024 · 0ccfa9b · 0ccfa9b
1 parent 89f2124
commit 0ccfa9b
Showing 1 changed file with 79 additions and 71 deletions.
diff --git a/packages/react/select/src/Select.tsx b/packages/react/select/src/Select.tsx
@@ -1390,42 +1390,46 @@ interface SelectScrollUpButtonProps extends Omit<SelectScrollButtonImplProps, 'o
 const SelectScrollUpButton = React.forwardRef<
   SelectScrollUpButtonElement,
   SelectScrollUpButtonProps
->((props: ScopedProps<SelectScrollUpButtonProps>, forwardedRef) => {
-  const contentContext = useSelectContentContext(SCROLL_UP_BUTTON_NAME, props.__scopeSelect);
-  const viewportContext = useSelectViewportContext(SCROLL_UP_BUTTON_NAME, props.__scopeSelect);
-  const [canScrollUp, setCanScrollUp] = React.useState(false);
-  const composedRefs = useComposedRefs(forwardedRef, viewportContext.onScrollButtonChange);
+>(
+  (
+    { hoverScrollFactor, touchScrollFactor, ...props }: ScopedProps<SelectScrollUpButtonProps>,
+    forwardedRef
+  ) => {
+    const contentContext = useSelectContentContext(SCROLL_UP_BUTTON_NAME, props.__scopeSelect);
+    const viewportContext = useSelectViewportContext(SCROLL_UP_BUTTON_NAME, props.__scopeSelect);
+    const [canScrollUp, setCanScrollUp] = React.useState(false);
+    const composedRefs = useComposedRefs(forwardedRef, viewportContext.onScrollButtonChange);
 
-  useLayoutEffect(() => {
-    if (contentContext.viewport && contentContext.isPositioned) {
-      const viewport = contentContext.viewport;
-      function handleScroll() {
-        const canScrollUp = viewport.scrollTop > 0;
-        setCanScrollUp(canScrollUp);
-      }
-      handleScroll();
-      viewport.addEventListener('scroll', handleScroll);
-      return () => viewport.removeEventListener('scroll', handleScroll);
-    }
-  }, [contentContext.viewport, contentContext.isPositioned]);
-
-  return canScrollUp ? (
-    <SelectScrollButtonImpl
-      {...props}
-      ref={composedRefs}
-      onAutoScroll={(pointerAction?: 'move' | 'down') => {
-        const { viewport, selectedItem } = contentContext;
-        if (viewport && selectedItem) {
-          const factor =
-            pointerAction &&
-            (pointerAction === 'move' ? props.hoverScrollFactor : props.touchScrollFactor);
-          viewport.scrollTop =
-            viewport.scrollTop - selectedItem.offsetHeight * Math.abs(factor ?? 1);
+    useLayoutEffect(() => {
+      if (contentContext.viewport && contentContext.isPositioned) {
+        const viewport = contentContext.viewport;
+        function handleScroll() {
+          const canScrollUp = viewport.scrollTop > 0;
+          setCanScrollUp(canScrollUp);
         }
-      }}
-    />
-  ) : null;
-});
+        handleScroll();
+        viewport.addEventListener('scroll', handleScroll);
+        return () => viewport.removeEventListener('scroll', handleScroll);
+      }
+    }, [contentContext.viewport, contentContext.isPositioned]);
+
+    return canScrollUp ? (
+      <SelectScrollButtonImpl
+        {...props}
+        ref={composedRefs}
+        onAutoScroll={(pointerAction?: 'move' | 'down') => {
+          const { viewport, selectedItem } = contentContext;
+          if (viewport && selectedItem) {
+            const factor =
+              pointerAction && (pointerAction === 'move' ? hoverScrollFactor : touchScrollFactor);
+            viewport.scrollTop =
+              viewport.scrollTop - selectedItem.offsetHeight * Math.abs(factor ?? 1);
+          }
+        }}
+      />
+    ) : null;
+  }
+);
 
 SelectScrollUpButton.displayName = SCROLL_UP_BUTTON_NAME;
 
@@ -1444,45 +1448,49 @@ interface SelectScrollDownButtonProps extends Omit<SelectScrollButtonImplProps,
 const SelectScrollDownButton = React.forwardRef<
   SelectScrollDownButtonElement,
   SelectScrollDownButtonProps
->((props: ScopedProps<SelectScrollDownButtonProps>, forwardedRef) => {
-  const contentContext = useSelectContentContext(SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect);
-  const viewportContext = useSelectViewportContext(SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect);
-  const [canScrollDown, setCanScrollDown] = React.useState(false);
-  const composedRefs = useComposedRefs(forwardedRef, viewportContext.onScrollButtonChange);
+>(
+  (
+    { hoverScrollFactor, touchScrollFactor, ...props }: ScopedProps<SelectScrollDownButtonProps>,
+    forwardedRef
+  ) => {
+    const contentContext = useSelectContentContext(SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect);
+    const viewportContext = useSelectViewportContext(SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect);
+    const [canScrollDown, setCanScrollDown] = React.useState(false);
+    const composedRefs = useComposedRefs(forwardedRef, viewportContext.onScrollButtonChange);
 
-  useLayoutEffect(() => {
-    if (contentContext.viewport && contentContext.isPositioned) {
-      const viewport = contentContext.viewport;
-      function handleScroll() {
-        const maxScroll = viewport.scrollHeight - viewport.clientHeight;
-        // we use Math.ceil here because if the UI is zoomed-in
-        // `scrollTop` is not always reported as an integer
-        const canScrollDown = Math.ceil(viewport.scrollTop) < maxScroll;
-        setCanScrollDown(canScrollDown);
-      }
-      handleScroll();
-      viewport.addEventListener('scroll', handleScroll);
-      return () => viewport.removeEventListener('scroll', handleScroll);
-    }
-  }, [contentContext.viewport, contentContext.isPositioned]);
-
-  return canScrollDown ? (
-    <SelectScrollButtonImpl
-      {...props}
-      ref={composedRefs}
-      onAutoScroll={(pointerAction?: 'move' | 'down') => {
-        const { viewport, selectedItem } = contentContext;
-        if (viewport && selectedItem) {
-          const factor =
-            pointerAction &&
-            (pointerAction === 'move' ? props.hoverScrollFactor : props.touchScrollFactor);
-          viewport.scrollTop =
-            viewport.scrollTop + selectedItem.offsetHeight * Math.abs(factor ?? 1);
+    useLayoutEffect(() => {
+      if (contentContext.viewport && contentContext.isPositioned) {
+        const viewport = contentContext.viewport;
+        function handleScroll() {
+          const maxScroll = viewport.scrollHeight - viewport.clientHeight;
+          // we use Math.ceil here because if the UI is zoomed-in
+          // `scrollTop` is not always reported as an integer
+          const canScrollDown = Math.ceil(viewport.scrollTop) < maxScroll;
+          setCanScrollDown(canScrollDown);
         }
-      }}
-    />
-  ) : null;
-});
+        handleScroll();
+        viewport.addEventListener('scroll', handleScroll);
+        return () => viewport.removeEventListener('scroll', handleScroll);
+      }
+    }, [contentContext.viewport, contentContext.isPositioned]);
+
+    return canScrollDown ? (
+      <SelectScrollButtonImpl
+        {...props}
+        ref={composedRefs}
+        onAutoScroll={(pointerAction?: 'move' | 'down') => {
+          const { viewport, selectedItem } = contentContext;
+          if (viewport && selectedItem) {
+            const factor =
+              pointerAction && (pointerAction === 'move' ? hoverScrollFactor : touchScrollFactor);
+            viewport.scrollTop =
+              viewport.scrollTop + selectedItem.offsetHeight * Math.abs(factor ?? 1);
+          }
+        }}
+      />
+    ) : null;
+  }
+);
 
 SelectScrollDownButton.displayName = SCROLL_DOWN_BUTTON_NAME;