diff --git a/packages/components/src/spectrum/ItemContent.tsx b/packages/components/src/spectrum/ItemContent.tsx index fa85d9bb5d..729fdcf624 100644 --- a/packages/components/src/spectrum/ItemContent.tsx +++ b/packages/components/src/spectrum/ItemContent.tsx @@ -6,7 +6,7 @@ import { useState, } from 'react'; import cl from 'classnames'; -import { isElementOfType, useCheckOverflowRef } from '@deephaven/react-hooks'; +import { isElementOfType, useCheckOverflow } from '@deephaven/react-hooks'; import { Text } from './Text'; import { TooltipOptions } from './utils'; import ItemTooltip from './ItemTooltip'; @@ -27,11 +27,8 @@ export function ItemContent({ children: content, tooltipOptions, }: ItemContentProps): JSX.Element | null { - const { - checkOverflowRef, - isOverflowing: isTextOverflowing, - resetIsOverflowing, - } = useCheckOverflowRef(); + const { checkOverflow, isOverflowing, resetIsOverflowing } = + useCheckOverflow(); const [previousContent, setPreviousContent] = useState(content); @@ -66,7 +63,7 @@ export function ItemContent({ isElementOfType(el, Text) ? cloneElement(el, { ...el.props, - ref: checkOverflowRef, + ref: checkOverflow, UNSAFE_className: cl( el.props.UNSAFE_className, stylesCommon.spectrumEllipsis @@ -79,7 +76,7 @@ export function ItemContent({ if (typeof content === 'string' || typeof content === 'number') { content = ( {content} @@ -89,7 +86,7 @@ export function ItemContent({ /* eslint-enable no-param-reassign */ const tooltip = - tooltipOptions == null || !isTextOverflowing ? null : ( + tooltipOptions == null || !isOverflowing ? null : ( {content} ); diff --git a/packages/react-hooks/src/index.ts b/packages/react-hooks/src/index.ts index 28f1f8bbe4..bec624de9e 100644 --- a/packages/react-hooks/src/index.ts +++ b/packages/react-hooks/src/index.ts @@ -3,7 +3,7 @@ export * from './SelectionUtils'; export * from './SpectrumUtils'; export * from './useAsyncInterval'; export * from './useCallbackWithAction'; -export * from './useCheckOverflowRef'; +export * from './useCheckOverflow'; export { default as useContextOrThrow } from './useContextOrThrow'; export * from './useDebouncedCallback'; export * from './useDelay'; diff --git a/packages/react-hooks/src/useCheckOverflowRef.ts b/packages/react-hooks/src/useCheckOverflow.ts similarity index 73% rename from packages/react-hooks/src/useCheckOverflowRef.ts rename to packages/react-hooks/src/useCheckOverflow.ts index aefabd6478..b998f46975 100644 --- a/packages/react-hooks/src/useCheckOverflowRef.ts +++ b/packages/react-hooks/src/useCheckOverflow.ts @@ -1,15 +1,13 @@ import { useCallback, useState } from 'react'; import type { DOMRefValue } from '@react-types/shared'; -export interface CheckOverflowRefResult { - checkOverflowRef: ( - elRef: DOMRefValue | null - ) => void; +export interface CheckOverflowResult { + checkOverflow: (elRef: DOMRefValue | null) => void; isOverflowing: boolean; resetIsOverflowing: () => void; } -export function useCheckOverflowRef(): CheckOverflowRefResult { +export function useCheckOverflow(): CheckOverflowResult { const [isOverflowing, setIsOverflowing] = useState(false); /** @@ -17,7 +15,7 @@ export function useCheckOverflowRef(): CheckOverflowRefResult { * overflowing so we know whether to render a tooltip showing the full content * or not. */ - const checkOverflowRef = useCallback( + const checkOverflow = useCallback( (elRef: DOMRefValue | null) => { const el = elRef?.UNSAFE_getDOMNode(); @@ -38,9 +36,9 @@ export function useCheckOverflowRef(): CheckOverflowRefResult { return { isOverflowing, - checkOverflowRef, + checkOverflow, resetIsOverflowing, }; } -export default useCheckOverflowRef; +export default useCheckOverflow;