From ad5700121544645de15c64a8fc943a1aeaaa9588 Mon Sep 17 00:00:00 2001 From: Brian Ingles Date: Wed, 12 Jun 2024 15:10:08 -0500 Subject: [PATCH] Exposed DOMRefValue more explicitly (#2071) --- .../components/src/SearchableCombobox.tsx | 5 ++- .../src/spectrum/listView/ListViewWrapper.tsx | 2 +- .../spectrum/picker/usePickerScrollOnOpen.ts | 10 +++--- .../react-hooks/src/SpectrumUtils.test.ts | 12 +++---- packages/react-hooks/src/SpectrumUtils.ts | 33 ++++++++----------- .../useSpectrumDisableSpellcheckRef.test.ts | 9 ++--- .../src/useSpectrumDisableSpellcheckRef.ts | 8 ++--- 7 files changed, 34 insertions(+), 45 deletions(-) diff --git a/packages/components/src/SearchableCombobox.tsx b/packages/components/src/SearchableCombobox.tsx index 5848315419..33af6ab35c 100644 --- a/packages/components/src/SearchableCombobox.tsx +++ b/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 @@ -12,7 +11,7 @@ export interface SearchableComboboxProps > { getItemDisplayText: (item: TItem | null | undefined) => string | null; getKey: (item: TItem | null | undefined) => TKey | null; - scrollRef: React.RefObject>; + scrollRef: React.RefObject; onSelectionChange: (key: TKey | null) => void; } diff --git a/packages/components/src/spectrum/listView/ListViewWrapper.tsx b/packages/components/src/spectrum/listView/ListViewWrapper.tsx index 7aff7f9884..b08f98e87d 100644 --- a/packages/components/src/spectrum/listView/ListViewWrapper.tsx +++ b/packages/components/src/spectrum/listView/ListViewWrapper.tsx @@ -46,7 +46,7 @@ export function ListViewWrapper( // 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 ); return ( diff --git a/packages/components/src/spectrum/picker/usePickerScrollOnOpen.ts b/packages/components/src/spectrum/picker/usePickerScrollOnOpen.ts index d9ad3114f4..6e0c5bc0e6 100644 --- a/packages/components/src/spectrum/picker/usePickerScrollOnOpen.ts +++ b/packages/components/src/spectrum/picker/usePickerScrollOnOpen.ts @@ -11,8 +11,8 @@ export interface UsePickerScrollOnOpenOptions { onOpenChange?: (isOpen: boolean) => void; } -export interface UsePickerScrollOnOpenResult { - ref: DOMRef; +export interface UsePickerScrollOnOpenResult { + ref: DOMRef; 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({ getInitialScrollPosition, onScroll, onOpenChange, -}: UsePickerScrollOnOpenOptions): UsePickerScrollOnOpenResult { +}: UsePickerScrollOnOpenOptions): UsePickerScrollOnOpenResult { const { ref, onOpenChange: popoverOnOpenChange } = usePopoverOnScrollRef( - findSpectrumPickerScrollArea, + findSpectrumPickerScrollArea, onScroll, getInitialScrollPosition ); diff --git a/packages/react-hooks/src/SpectrumUtils.test.ts b/packages/react-hooks/src/SpectrumUtils.test.ts index 5e7dc6ad25..9fb99afe31 100644 --- a/packages/react-hooks/src/SpectrumUtils.test.ts +++ b/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(), - ref: createMockProxy(), + ref: createMockProxy(), }; beforeEach(() => { @@ -49,7 +49,7 @@ describe('extractSpectrumHTMLElement', () => { describe('extractSpectrumLastChildHTMLElement', () => { const mock = { - ref: createMockProxy(), + ref: createMockProxy(), }; 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], + ['span', findSpectrumPopoverScrollArea], // 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({ + ? createMockProxy({ UNSAFE_getDOMNode: () => el.component, }) : null; diff --git a/packages/react-hooks/src/SpectrumUtils.ts b/packages/react-hooks/src/SpectrumUtils.ts index 2f48b318ce..41e2ab3656 100644 --- a/packages/react-hooks/src/SpectrumUtils.ts +++ b/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 = - DOMRefValue; - /** * 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 | 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 | null): HTMLElement | null { const maybeHTMLElement = ref?.UNSAFE_getDOMNode().lastElementChild; return identityExtractHTMLElement(maybeHTMLElement); } @@ -51,9 +48,9 @@ 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 | null): HTMLElement | null { return findSpectrumPopoverScrollArea(ref, 'input'); } @@ -61,9 +58,9 @@ export function findSpectrumComboBoxScrollArea( * 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 | 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 | null, triggerElementType: K): HTMLElement | null { const maybeHTMLElement = ref?.UNSAFE_getDOMNode(); const trigger = maybeHTMLElement?.querySelector(triggerElementType); const popupId = trigger?.getAttribute('aria-controls'); diff --git a/packages/react-hooks/src/useSpectrumDisableSpellcheckRef.test.ts b/packages/react-hooks/src/useSpectrumDisableSpellcheckRef.test.ts index 1185f27510..e02a4172c8 100644 --- a/packages/react-hooks/src/useSpectrumDisableSpellcheckRef.test.ts +++ b/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(), + ref: createMockProxy(), rootEl: createMockProxy(), }; diff --git a/packages/react-hooks/src/useSpectrumDisableSpellcheckRef.ts b/packages/react-hooks/src/useSpectrumDisableSpellcheckRef.ts index 4016e792be..33fb7ab266 100644 --- a/packages/react-hooks/src/useSpectrumDisableSpellcheckRef.ts +++ b/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