diff --git a/packages/components/src/spectrum/ItemContent.tsx b/packages/components/src/spectrum/ItemContent.tsx index e085b8372a..fa85d9bb5d 100644 --- a/packages/components/src/spectrum/ItemContent.tsx +++ b/packages/components/src/spectrum/ItemContent.tsx @@ -28,9 +28,9 @@ export function ItemContent({ tooltipOptions, }: ItemContentProps): JSX.Element | null { const { + checkOverflowRef, isOverflowing: isTextOverflowing, - ref: checkTextOverflowRef, - reset: resetIsOverflowing, + resetIsOverflowing, } = useCheckOverflowRef(); const [previousContent, setPreviousContent] = useState(content); @@ -66,7 +66,7 @@ export function ItemContent({ isElementOfType(el, Text) ? cloneElement(el, { ...el.props, - ref: checkTextOverflowRef, + ref: checkOverflowRef, UNSAFE_className: cl( el.props.UNSAFE_className, stylesCommon.spectrumEllipsis @@ -79,7 +79,7 @@ export function ItemContent({ if (typeof content === 'string' || typeof content === 'number') { content = ( {content} diff --git a/packages/react-hooks/src/useCheckOverflowRef.ts b/packages/react-hooks/src/useCheckOverflowRef.ts index 48f00df370..aefabd6478 100644 --- a/packages/react-hooks/src/useCheckOverflowRef.ts +++ b/packages/react-hooks/src/useCheckOverflowRef.ts @@ -2,9 +2,11 @@ import { useCallback, useState } from 'react'; import type { DOMRefValue } from '@react-types/shared'; export interface CheckOverflowRefResult { + checkOverflowRef: ( + elRef: DOMRefValue | null + ) => void; isOverflowing: boolean; - ref: (elRef: DOMRefValue | null) => void; - reset: () => void; + resetIsOverflowing: () => void; } export function useCheckOverflowRef(): CheckOverflowRefResult { @@ -15,7 +17,7 @@ export function useCheckOverflowRef(): CheckOverflowRefResult { * overflowing so we know whether to render a tooltip showing the full content * or not. */ - const ref = useCallback( + const checkOverflowRef = useCallback( (elRef: DOMRefValue | null) => { const el = elRef?.UNSAFE_getDOMNode(); @@ -30,14 +32,14 @@ export function useCheckOverflowRef(): CheckOverflowRefResult { [] ); - const reset = useCallback(() => { + const resetIsOverflowing = useCallback(() => { setIsOverflowing(false); }, []); return { isOverflowing, - ref, - reset, + checkOverflowRef, + resetIsOverflowing, }; }