Reconfigured scroll ref prop (deephaven#2071)

bmingles · Jun 12, 2024 · 805490f · 805490f
1 parent 1496da5
commit 805490f
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 19 deletions.
diff --git a/packages/components/src/spectrum/comboBox/ComboBox.tsx b/packages/components/src/spectrum/comboBox/ComboBox.tsx
@@ -16,17 +16,17 @@ export function ComboBox({
   const {
     defaultSelectedKey,
     disabledKeys,
+    ref,
     selectedKey,
-    scrollRef,
     ...comboBoxProps
   } = usePickerProps(props);
 
   return (
     <SpectrumComboBox
       // eslint-disable-next-line react/jsx-props-no-spreading
       {...comboBoxProps}
-      ref={scrollRef as FocusableRef<HTMLElement>}
       UNSAFE_className={cl('dh-combobox', UNSAFE_className)}
+      ref={ref as FocusableRef<HTMLElement>}
       // Type assertions are necessary here since Spectrum types don't account
       // for number and boolean key values even though they are valid runtime
       // values.

diff --git a/packages/components/src/spectrum/picker/Picker.tsx b/packages/components/src/spectrum/picker/Picker.tsx
@@ -2,7 +2,6 @@ import {
   Picker as SpectrumPicker,
   SpectrumPickerProps,
 } from '@adobe/react-spectrum';
-import type { DOMRef } from '@react-types/shared';
 import cl from 'classnames';
 import type { NormalizedItem } from '../utils';
 import type { PickerProps } from './PickerProps';
@@ -19,19 +18,13 @@ export function Picker({
   UNSAFE_className,
   ...props
 }: PickerProps): JSX.Element {
-  const {
-    defaultSelectedKey,
-    disabledKeys,
-    selectedKey,
-    scrollRef,
-    ...pickerProps
-  } = usePickerProps(props);
+  const { defaultSelectedKey, disabledKeys, selectedKey, ...pickerProps } =
+    usePickerProps<PickerProps, HTMLDivElement>(props);
 
   return (
     <SpectrumPicker
       // eslint-disable-next-line react/jsx-props-no-spreading
       {...pickerProps}
-      ref={scrollRef as DOMRef<HTMLDivElement>}
       UNSAFE_className={cl('dh-picker', UNSAFE_className)}
       // Type assertions are necessary here since Spectrum types don't account
       // for number and boolean key values even though they are valid runtime

diff --git a/packages/components/src/spectrum/picker/usePickerProps.ts b/packages/components/src/spectrum/picker/usePickerProps.ts
@@ -19,11 +19,11 @@ import usePickerItemScale from './usePickerItemScale';
 import usePickerScrollOnOpen from './usePickerScrollOnOpen';
 
 /** Props that are derived. */
-export type UsePickerDerivedProps = {
+export type UsePickerDerivedProps<THtml extends HTMLElement> = {
   children: (SectionElement<unknown> | ItemElement<unknown>)[];
   defaultSelectedKey?: ItemKey | undefined;
+  ref: DOMRef<THtml>;
   selectedKey?: ItemKey | null | undefined;
-  scrollRef: DOMRef<HTMLElement>;
   onOpenChange: (isOpen: boolean) => void;
   onSelectionChange: ((key: ItemKey | null) => void) | undefined;
 };
@@ -41,15 +41,20 @@ export type UsePickerPassthroughProps<TProps> = Omit<
   | 'onSelectionChange'
 >;
 
-export type UsePickerProps<TProps> = UsePickerDerivedProps &
-  UsePickerPassthroughProps<TProps>;
+export type UsePickerProps<
+  TProps,
+  THtml extends HTMLElement,
+> = UsePickerDerivedProps<THtml> & UsePickerPassthroughProps<TProps>;
 
 /**
  * Derive props for Picker components (e.g. Picker and ComboBox). Specifically
  * handles wrapping children items and initial scroll position when the picker
  * is opened.
  */
-export function usePickerProps<TProps>({
+export function usePickerProps<
+  TProps,
+  THtml extends HTMLElement = HTMLElement,
+>({
   children,
   defaultSelectedKey,
   selectedKey,
@@ -59,7 +64,7 @@ export function usePickerProps<TProps>({
   onScroll = EMPTY_FUNCTION,
   onSelectionChange: onSelectionChangeHandler,
   ...props
-}: PickerPropsT<TProps>): UsePickerProps<TProps> {
+}: PickerPropsT<TProps>): UsePickerProps<TProps, THtml> {
   const { itemHeight } = usePickerItemScale();
 
   const tooltipOptions = useMemo(
@@ -86,7 +91,7 @@ export function usePickerProps<TProps>({
     topOffset: PICKER_TOP_OFFSET,
   });
 
-  const { ref: scrollRef, onOpenChange } = usePickerScrollOnOpen({
+  const { ref, onOpenChange } = usePickerScrollOnOpen<THtml>({
     getInitialScrollPosition,
     onScroll,
     onOpenChange: onOpenChangeHandler,
@@ -95,9 +100,9 @@ export function usePickerProps<TProps>({
   return {
     ...props,
     defaultSelectedKey,
+    ref,
     selectedKey,
     children: items,
-    scrollRef,
     onOpenChange,
     onSelectionChange: onChangeMaybeUncontrolled,
   };