Exposed DOMRefValue more explicitly (deephaven#2071)

packages/components/src/SearchableCombobox.tsx

@@ -1,8 +1,7 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import { Key, useCallback } from 'react';
 import { ComboBox, Item, SpectrumComboBoxProps } from '@adobe/react-spectrum';
-import type { FocusableRef } from '@react-types/shared';
-import type { ReactSpectrumComponent } from '@deephaven/react-hooks';
+import type { DOMRefValue, FocusableRef } from '@react-types/shared';
 import TextWithTooltip from './TextWithTooltip';
 
 export interface SearchableComboboxProps<TItem, TKey extends Key>
@@ -12,7 +11,7 @@ export interface SearchableComboboxProps<TItem, TKey extends Key>
   > {
   getItemDisplayText: (item: TItem | null | undefined) => string | null;
   getKey: (item: TItem | null | undefined) => TKey | null;
-  scrollRef: React.RefObject<ReactSpectrumComponent<HTMLElement>>;
+  scrollRef: React.RefObject<DOMRefValue>;
   onSelectionChange: (key: TKey | null) => void;
 }
 

packages/components/src/spectrum/listView/ListViewWrapper.tsx

@@ -46,7 +46,7 @@ export function ListViewWrapper<T>(
   // of the parent container and only render the ListView when it has a non-zero
   // height. See https://github.com/adobe/react-spectrum/issues/6213
   const { ref: contentRectRef, contentRect } = useContentRect(
-    extractSpectrumHTMLElement
+    extractSpectrumHTMLElement<HTMLDivElement>
   );
 
   return (

packages/components/src/spectrum/picker/usePickerScrollOnOpen.ts

@@ -11,8 +11,8 @@ export interface UsePickerScrollOnOpenOptions {
   onOpenChange?: (isOpen: boolean) => void;
 }
 
-export interface UsePickerScrollOnOpenResult {
-  ref: DOMRef<HTMLElement>;
+export interface UsePickerScrollOnOpenResult<THtml extends HTMLElement> {
+  ref: DOMRef<THtml>;
   onOpenChange: (isOpen: boolean) => void;
 }
 
@@ -25,13 +25,13 @@ export interface UsePickerScrollOnOpenResult {
  * @return A ref to attach to the Picker and a callback to handle open change
  * events for the Picker.
  */
-export function usePickerScrollOnOpen({
+export function usePickerScrollOnOpen<THtml extends HTMLElement = HTMLElement>({
   getInitialScrollPosition,
   onScroll,
   onOpenChange,
-}: UsePickerScrollOnOpenOptions): UsePickerScrollOnOpenResult {
+}: UsePickerScrollOnOpenOptions): UsePickerScrollOnOpenResult<THtml> {
   const { ref, onOpenChange: popoverOnOpenChange } = usePopoverOnScrollRef(
-    findSpectrumPickerScrollArea,
+    findSpectrumPickerScrollArea<THtml>,
     onScroll,
     getInitialScrollPosition
   );

packages/react-hooks/src/SpectrumUtils.test.ts

@@ -1,4 +1,5 @@
 import { KeyedItem, TestUtils } from '@deephaven/utils';
+import type { DOMRefValue } from '@react-types/shared';
 import {
   createValidationProps,
   extractSpectrumHTMLElement,
@@ -8,7 +9,6 @@ import {
   findSpectrumPopoverScrollArea,
   getPositionOfSelectedItem,
   identityExtractHTMLElement,
-  ReactSpectrumComponent,
 } from './SpectrumUtils';
 
 const { asMock, createMockProxy } = TestUtils;
@@ -31,7 +31,7 @@ describe('createValidationProps', () => {
 describe('extractSpectrumHTMLElement', () => {
   const mock = {
     element: createMockProxy<HTMLDivElement>(),
-    ref: createMockProxy<ReactSpectrumComponent>(),
+    ref: createMockProxy<DOMRefValue>(),
   };
 
   beforeEach(() => {
@@ -49,7 +49,7 @@ describe('extractSpectrumHTMLElement', () => {
 
 describe('extractSpectrumLastChildHTMLElement', () => {
   const mock = {
-    ref: createMockProxy<ReactSpectrumComponent>(),
+    ref: createMockProxy<DOMRefValue>(),
   };
 
   it('should return null if ref is null', () => {
@@ -86,8 +86,8 @@ describe('extractSpectrumLastChildHTMLElement', () => {
 
 describe.each([
   // General popover function
-  ['i', findSpectrumPopoverScrollArea],
-  ['span', findSpectrumPopoverScrollArea],
+  ['i', findSpectrumPopoverScrollArea<keyof HTMLElementTagNameMap>],
+  ['span', findSpectrumPopoverScrollArea<keyof HTMLElementTagNameMap>],
   // Specific consumer functions
   ['input', findSpectrumComboBoxScrollArea],
   ['button', findSpectrumPickerScrollArea],
@@ -128,7 +128,7 @@ describe.each([
       'should find `aria-controls` element of trigger element',
       (hasRef, hasTrigger, hasPopup, shouldFind) => {
         const ref = hasRef
-          ? createMockProxy<ReactSpectrumComponent>({
+          ? createMockProxy<DOMRefValue>({
               UNSAFE_getDOMNode: () => el.component,
             })
           : null;

packages/react-hooks/src/SpectrumUtils.ts

@@ -2,9 +2,6 @@ import type { SpectrumTextFieldProps } from '@adobe/react-spectrum';
 import { KeyedItem } from '@deephaven/utils';
 import type { DOMRefValue } from '@react-types/shared';
 
-export type ReactSpectrumComponent<T extends HTMLElement = HTMLElement> =
-  DOMRefValue<T>;
-
 /**
  * Creates validation props for a Spectrum field. If `isValid` is true, returns
  * empty props. If false, returns  { errorMessage, validationState: 'invalid' }
@@ -29,9 +26,9 @@ export function createValidationProps(
  * Extract DOM node from React Spectrum component ref.
  * @param ref
  */
-export function extractSpectrumHTMLElement(
-  ref: ReactSpectrumComponent | null
-): HTMLElement | null {
+export function extractSpectrumHTMLElement<
+  THtml extends HTMLElement = HTMLElement,
+>(ref: DOMRefValue<THtml> | null): HTMLElement | null {
   return ref?.UNSAFE_getDOMNode() ?? null;
 }
 
@@ -40,9 +37,9 @@ export function extractSpectrumHTMLElement(
  * ref.
  * @param ref
  */
-export function extractSpectrumLastChildHTMLElement(
-  ref: ReactSpectrumComponent | null
-): HTMLElement | null {
+export function extractSpectrumLastChildHTMLElement<
+  THtml extends HTMLElement = HTMLElement,
+>(ref: DOMRefValue<THtml> | null): HTMLElement | null {
   const maybeHTMLElement = ref?.UNSAFE_getDOMNode().lastElementChild;
   return identityExtractHTMLElement(maybeHTMLElement);
 }
@@ -51,19 +48,19 @@ export function extractSpectrumLastChildHTMLElement(
  * Find the popover associated with a given Spectrum ComboBox ref.
  * @param ref The ref to the Spectrum ComboBox component
  */
-export function findSpectrumComboBoxScrollArea(
-  ref: ReactSpectrumComponent | null
-): HTMLElement | null {
+export function findSpectrumComboBoxScrollArea<
+  THtml extends HTMLElement = HTMLElement,
+>(ref: DOMRefValue<THtml> | null): HTMLElement | null {
   return findSpectrumPopoverScrollArea(ref, 'input');
 }
 
 /**
  * Find the popover associated with a given Spectrum Picker ref.
  * @param ref The ref to the Spectrum Picker component
  */
-export function findSpectrumPickerScrollArea(
-  ref: ReactSpectrumComponent | null
-): HTMLElement | null {
+export function findSpectrumPickerScrollArea<
+  THtml extends HTMLElement = HTMLElement,
+>(ref: DOMRefValue<THtml> | null): HTMLElement | null {
   return findSpectrumPopoverScrollArea(ref, 'button');
 }
 
@@ -74,10 +71,8 @@ export function findSpectrumPickerScrollArea(
  */
 export function findSpectrumPopoverScrollArea<
   K extends keyof HTMLElementTagNameMap,
->(
-  ref: ReactSpectrumComponent | null,
-  triggerElementType: K
-): HTMLElement | null {
+  THtml extends HTMLElement = HTMLElement,
+>(ref: DOMRefValue<THtml> | null, triggerElementType: K): HTMLElement | null {
   const maybeHTMLElement = ref?.UNSAFE_getDOMNode();
   const trigger = maybeHTMLElement?.querySelector(triggerElementType);
   const popupId = trigger?.getAttribute('aria-controls');

packages/react-hooks/src/useSpectrumDisableSpellcheckRef.test.ts

@@ -1,9 +1,6 @@
 import { renderHook } from '@testing-library/react-hooks';
-import {
-  ReactSpectrumComponent,
-  SPELLCHECK_FALSE_ATTRIBUTE,
-  TestUtils,
-} from '@deephaven/utils';
+import { DOMRefValue } from '@react-types/shared';
+import { SPELLCHECK_FALSE_ATTRIBUTE, TestUtils } from '@deephaven/utils';
 import useSetAttributesCallback from './useSetAttributesCallback';
 import useSpectrumDisableSpellcheckRef from './useSpectrumDisableSpellcheckRef';
 
@@ -20,7 +17,7 @@ describe('useSpectrumDisableSpellcheckRef', () => {
   const mock = {
     useSetAttributesCallbackResult: jest.fn(),
     selectors: 'mock.selectors',
-    ref: createMockProxy<ReactSpectrumComponent>(),
+    ref: createMockProxy<DOMRefValue>(),
     rootEl: createMockProxy<HTMLDivElement>(),
   };
 

packages/react-hooks/src/useSpectrumDisableSpellcheckRef.ts

@@ -1,8 +1,6 @@
 import { SPELLCHECK_FALSE_ATTRIBUTE } from '@deephaven/utils';
-import {
-  extractSpectrumHTMLElement,
-  ReactSpectrumComponent,
-} from './SpectrumUtils';
+import type { DOMRefValue } from '@react-types/shared';
+import { extractSpectrumHTMLElement } from './SpectrumUtils';
 import useMappedRef from './useMappedRef';
 import useSetAttributesCallback from './useSetAttributesCallback';
 
@@ -15,7 +13,7 @@ import useSetAttributesCallback from './useSetAttributesCallback';
  */
 export function useSpectrumDisableSpellcheckRef(
   selectors?: string
-): (ref: ReactSpectrumComponent | null) => void {
+): (ref: DOMRefValue | null) => void {
   const disableSpellcheck = useSetAttributesCallback(
     SPELLCHECK_FALSE_ATTRIBUTE,
     selectors