Allow to pass onListboxScroll callback to SelectNext

hypothesis · Jul 4, 2024 · e5d0882 · e5d0882
1 parent d56bb7b
commit e5d0882
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 1 deletion.
diff --git a/src/components/input/SelectNext.tsx b/src/components/input/SelectNext.tsx
@@ -1,5 +1,5 @@
 import classnames from 'classnames';
-import type { ComponentChildren, RefObject } from 'preact';
+import type { ComponentChildren, JSX, RefObject } from 'preact';
 import {
   useCallback,
   useContext,
@@ -298,6 +298,9 @@ export type SelectProps<T> = CompositeProps &
      * Defaults to true, as long as the browser supports it.
      */
     listboxAsPopover?: boolean;
+
+    /** A callback passed to the listbox onScroll */
+    onListboxScroll?: JSX.HTMLAttributes<HTMLUListElement>['onScroll'];
   };
 
 function SelectMain<T>({
@@ -311,6 +314,7 @@ function SelectMain<T>({
   buttonClasses,
   listboxClasses,
   containerClasses,
+  onListboxScroll,
   right = false,
   multiple = false,
   'aria-label': ariaLabel,
@@ -460,6 +464,7 @@ function SelectMain<T>({
           // handle boolean values correctly for this attribute (it will set
           // `popover="false"` instead of removing the attribute).
           popover={listboxAsPopover ? 'auto' : undefined}
+          onScroll={onListboxScroll}
         >
           {children}
         </ul>

diff --git a/src/pattern-library/components/patterns/prototype/SelectNextPage.tsx b/src/pattern-library/components/patterns/prototype/SelectNextPage.tsx
@@ -450,6 +450,21 @@ export default function SelectNextPage() {
               withSource
             />
           </Library.Example>
+          <Library.Example title="onListboxScroll">
+            <Library.Info>
+              <Library.InfoItem label="description">
+                A callback passed to the listbox <code>onScroll</code>.
+              </Library.InfoItem>
+              <Library.InfoItem label="type">
+                <code>
+                  () {'=>'} void {'|'} undefined
+                </code>
+              </Library.InfoItem>
+              <Library.InfoItem label="default">
+                <code>undefined</code>
+              </Library.InfoItem>
+            </Library.Info>
+          </Library.Example>
         </Library.Pattern>
 
         <Library.Pattern title="SelectNext.Option component API">