@jetbrains/ring-ui 8.0.0-beta.1 → 8.0.0-beta.11

package/components/dialog/dialog.js

@@ -2,20 +2,19 @@ import { createRef, PureComponent } from 'react';
 import * as React from 'react';
 import { createPortal } from 'react-dom';
 import classNames from 'classnames';
-import closeIcon from '@jetbrains/icons/close';
 import { AdaptiveIsland } from '../island/island';
 import getUID from '../global/get-uid';
 import dataTests from '../global/data-tests';
 import Shortcuts from '../shortcuts/shortcuts';
 import TabTrap from '../tab-trap/tab-trap';
-import Button from '../button/button';
 import { normalizePopupTarget, PopupTarget, PopupTargetContext } from '../popup/popup.target';
 import { getPopupContainer } from '../popup/popup';
+import getViewportSize from '../global/get-viewport-size';
 import { preventerFactory as scrollPreventerFactory } from './dialog-body-scroll-preventer';
+import DialogControls from './dialog-controls';
+import { fitGeometry, getNativeTabIndex, getResizeMinimum, getTrapDisabled, moveGeometry, resizeGeometry, } from './dialog-geometry';
 import styles from './dialog.css';
-/**
- * @name Dialog
- */
+/** @name Dialog */
 function noop() { }
 export default class Dialog extends PureComponent {
     static defaultProps = {
@@ -25,21 +24,22 @@ export default class Dialog extends PureComponent {
         onCloseClick: noop,
         onCloseAttempt: noop,
         showCloseButton: false,
-        closeButtonInside: false,
+        movable: true,
+        resizable: true,
         shortcutOptions: { modal: false },
         trapFocus: false,
         autoFocusFirst: true,
+        native: true,
         modal: true,
         preventBodyScroll: true,
     };
-    state = {
-        shortcutsScope: getUID('ring-dialog-'),
-    };
+    state = { shortcutsScope: getUID('ring-dialog-'), geometry: null, resized: false };
     componentDidMount() {
         const { show, native } = this.props;
         if (native && show) {
             this.toggleNativeDialog();
         }
+        window.addEventListener('resize', this.fitGeometryToViewport);
         this.toggleScrollPreventer();
     }
     componentDidUpdate(prevProps) {
@@ -49,15 +49,23 @@ export default class Dialog extends PureComponent {
         }
         if (prevProps.show !== this.props.show) {
             this.toggleScrollPreventer();
+            if (show) {
+                this.fitGeometryToViewport();
+            }
+            else {
+                this.interaction = null;
+            }
         }
     }
     componentWillUnmount() {
+        window.removeEventListener('resize', this.fitGeometryToViewport);
+        this.interaction = null;
         this.scrollPreventer.reset();
     }
     scrollPreventer = scrollPreventerFactory(getUID('preventer-'));
     uid = getUID('dialog-');
     toggleNativeDialog() {
-        const { show, modal } = this.props;
+        const { show, modal, autoFocusFirst } = this.props;
         if (this.nativeDialog.current) {
             if (show) {
                 this.nativeDialog.current.removeAttribute('open');
@@ -67,6 +75,9 @@ export default class Dialog extends PureComponent {
                 else {
                     this.nativeDialog.current.show();
                 }
+                if (!autoFocusFirst && !this.nativeDialog.current.querySelector('[autofocus]')) {
+                    this.nativeDialog.current.focus();
+                }
             }
             else {
                 this.nativeDialog.current.close();
@@ -99,42 +110,112 @@ export default class Dialog extends PureComponent {
                 this.props.onCloseAttempt(event);
             }
         };
-        return {
-            esc: onEscape,
-        };
+        return { esc: onEscape };
     };
     dialog;
-    dialogRef = (tabTrap) => {
-        this.dialog = tabTrap && tabTrap.node;
+    dialogRef = (tabTrapObj) => {
+        this.dialog = tabTrapObj && tabTrapObj.node;
     };
     nativeDialog = createRef();
+    innerContainer = createRef();
+    interaction = null;
+    resizeMinimum = null;
+    fitGeometryToViewport = () => {
+        this.setState(({ geometry }) => {
+            if (!geometry) {
+                return null;
+            }
+            const { width, height } = getViewportSize();
+            return { geometry: fitGeometry(geometry, width, height) };
+        });
+    };
+    startInteraction = (event, direction) => {
+        if ((event.button ?? 0) !== 0 || !this.innerContainer.current) {
+            return;
+        }
+        const { left, top, width, height } = this.innerContainer.current.getBoundingClientRect();
+        const resizeMinimum = this.resizeMinimum ?? getResizeMinimum(this.innerContainer.current.firstElementChild);
+        if (direction !== 'move') {
+            this.resizeMinimum = resizeMinimum;
+        }
+        this.interaction = {
+            pointerId: event.pointerId,
+            direction,
+            startX: event.clientX,
+            startY: event.clientY,
+            ...resizeMinimum,
+            geometry: { left, top, width, height },
+        };
+        this.setState(({ resized }) => ({ geometry: { left, top, width, height }, resized: resized || direction !== 'move' }));
+        event.currentTarget.setPointerCapture?.(event.pointerId);
+        event.preventDefault();
+    };
+    continueInteraction = (event) => {
+        const interaction = this.interaction;
+        if (!interaction || interaction.pointerId !== event.pointerId) {
+            return;
+        }
+        const dx = event.clientX - interaction.startX;
+        const dy = event.clientY - interaction.startY;
+        const { width: viewportWidth, height: viewportHeight } = getViewportSize();
+        const start = interaction.geometry;
+        if (interaction.direction === 'move') {
+            this.setState({ geometry: moveGeometry(start, dx, dy, viewportWidth, viewportHeight) });
+            return;
+        }
+        this.setState({
+            geometry: resizeGeometry(interaction, dx, dy, viewportWidth, viewportHeight),
+            resized: true,
+        });
+    };
+    stopInteraction = (event) => {
+        if (this.interaction?.pointerId !== event.pointerId) {
+            return;
+        }
+        this.interaction = null;
+        if (event.currentTarget.hasPointerCapture?.(event.pointerId)) {
+            event.currentTarget.releasePointerCapture?.(event.pointerId);
+        }
+    };
+    startMove = (event) => {
+        const target = event.target;
+        if (!this.props.movable || !(target instanceof Element)) {
+            return;
+        }
+        const handle = target.closest('[data-ring-dialog-move-handle], [data-ring-island-header]');
+        if (handle?.parentElement === event.currentTarget) {
+            this.startInteraction(event, 'move');
+        }
+    };
     render() {
-        const { show, showCloseButton, onOverlayClick, onCloseAttempt, onEscPress, onCloseClick, children, className, contentClassName, trapFocus, 'data-test': dataTest, closeButtonInside, portalTarget, label, closeButtonTitle, dense, shortcutOptions, native, modal, preventBodyScroll, ...restProps } = this.props;
+        const { show, showCloseButton, onOverlayClick, onCloseAttempt, onEscPress, onCloseClick, children, className, contentClassName, trapFocus, 'data-test': dataTest, portalTarget, label, closeButtonTitle, dense, shortcutOptions, native, modal, preventBodyScroll, movable, resizable, autoFocusFirst, focusBackOnClose, focusBackOnExit, trapDisabled, ...restProps } = this.props;
         const classes = classNames(styles.container, className);
         const shortcutsMap = this.getShortcutsMap();
         const content = (<>
-        <Shortcuts map={shortcutsMap} scope={this.state.shortcutsScope} options={this.props.shortcutOptions}/>
+        <Shortcuts disabled={!show} map={shortcutsMap} scope={this.state.shortcutsScope} options={shortcutOptions}/>
         {(onOverlayClick !== noop || onCloseAttempt !== noop) && (<div 
             // click handler is duplicated in close button
             role='presentation' className={styles.clickableOverlay} onClick={this.handleClick} data-test='ring-dialog-overlay'/>)}
-        <div className={styles.innerContainer}>
+        <div ref={this.innerContainer} data-test='ring-dialog-inner-container' className={classNames(styles.innerContainer, { [styles.resized]: this.state.resized })} style={this.state.geometry
+                ? {
+                    position: 'fixed',
+                    left: this.state.geometry.left,
+                    top: this.state.geometry.top,
+                    width: this.state.resized ? this.state.geometry.width : undefined,
+                    height: this.state.resized ? this.state.geometry.height : undefined,
+                }
+                : undefined}>
           <AdaptiveIsland className={classNames(styles.content, contentClassName, {
                 [styles.dense]: dense,
-                [styles.contentCloseButtonOutside]: !closeButtonInside,
-                [styles.contentCloseButtonInside]: closeButtonInside,
-            })} data-test='ring-dialog' role='dialog' aria-label={label}>
+                [styles.movable]: movable,
+            })} data-test='ring-dialog' role={native ? undefined : 'dialog'} aria-label={native ? undefined : label} onPointerDown={this.startMove} onPointerMove={this.continueInteraction} onPointerUp={this.stopInteraction} onPointerCancel={this.stopInteraction} onLostPointerCapture={this.stopInteraction}>
             {children}
-            {showCloseButton && (<Button icon={closeIcon} data-test='ring-dialog-close-button' className={classNames(styles.closeButton, {
-                    [styles.closeButtonOutside]: !closeButtonInside,
-                    [styles.closeButtonInside]: closeButtonInside,
-                })} iconClassName={classNames(styles.closeIcon, {
-                    [styles.closeIconOutside]: !closeButtonInside,
-                })} onClick={this.onCloseClick} title={closeButtonTitle} aria-label={closeButtonTitle || 'close dialog'}/>)}
+            <DialogControls movable={movable} resizable={resizable} showCloseButton={showCloseButton} closeButtonTitle={closeButtonTitle} onCloseClick={this.onCloseClick} onStartInteraction={this.startInteraction} onStopInteraction={this.stopInteraction}/>
           </AdaptiveIsland>
         </div>
       </>);
         if (native) {
-            return (<dialog className={classNames(styles.nativeDialog, className)} ref={this.nativeDialog} data-rg-modal-dialog-container={modal ? '' : undefined}>
+            return (<dialog {...restProps} aria-label={label} className={classNames(styles.nativeDialog, className)} data-test={dataTests('ring-dialog-container', dataTest)} ref={this.nativeDialog} tabIndex={getNativeTabIndex(autoFocusFirst)} onCancel={event => event.preventDefault()} data-rg-modal-dialog-container={modal ? '' : undefined}>
           <PopupTarget id={this.uid} className={styles.popupTarget}>
             {target => (<>
                 {content}
@@ -157,7 +238,7 @@ export default class Dialog extends PureComponent {
                     }
                 }
                 return createPortal(<PopupTarget id={this.uid} className={styles.popupTarget}>
-                {target => (<TabTrap trapDisabled={!trapFocus} data-test={dataTests('ring-dialog-container', dataTest)} data-rg-modal-dialog-container='' ref={this.dialogRef} className={classes} role='presentation' {...restProps}>
+                {target => (<TabTrap trapDisabled={getTrapDisabled(trapFocus, trapDisabled)} autoFocusFirst={autoFocusFirst} focusBackOnClose={focusBackOnClose} focusBackOnExit={focusBackOnExit} data-test={dataTests('ring-dialog-container', dataTest)} data-rg-modal-dialog-container='' ref={this.dialogRef} className={classes} role='presentation' {...restProps}>
                     {content}
                     {target}
                   </TabTrap>)}

package/components/dropdown-menu/dropdown-menu.d.ts

@@ -1,4 +1,4 @@
-import { type ReactElement, type HTMLAttributes, type SyntheticEvent, type Ref, type ReactNode } from 'react';
+import { type ReactElement, type HTMLAttributes, type SyntheticEvent, type ReactNode } from 'react';
 import { type SelectHandlerParams } from '../list/list';
 import { type AnchorProps, type DropdownAttrs, type DropdownChildrenFunction } from '../dropdown/dropdown';
 import PopupMenu, { type PopupMenuAttrs } from '../popup-menu/popup-menu';
@@ -10,6 +10,7 @@ export interface DropdownAnchorWrapperProps extends AnchorProps {
 }
 type OnSelectHandler<T> = ((item: ListDataItem<T>, event: Event | SyntheticEvent, params?: SelectHandlerParams) => void) | undefined;
 export interface DropdownMenuProps<T = unknown> extends Omit<DropdownAttrs, 'anchor' | 'onSelect' | 'children'> {
+    ref?: React.Ref<PopupMenu<T> | null>;
     anchor: ReactElement | ReactNode[] | string | ((props: AnchorProps, ariaProps: HTMLAttributes<HTMLElement>) => ReactElement | null);
     data?: readonly ListDataItem<T>[] | undefined;
     ariaLabel?: string | null | undefined;
@@ -17,9 +18,8 @@ export interface DropdownMenuProps<T = unknown> extends Omit<DropdownAttrs, 'anc
     menuProps?: PopupMenuAttrs<T> | null | undefined;
     children?: DropdownChildrenFunction;
 }
-declare const _default: (<T = unknown>(props: DropdownMenuProps<T> & {
-    ref?: Ref<PopupMenu>;
-}) => ReactElement | null) & {
+declare function DropdownMenu<T = unknown>({ ref, id, anchor, ariaLabel, data, onSelect, menuProps, children, ...restDropdownProps }: DropdownMenuProps<T>): import("react").JSX.Element;
+declare const _default: typeof DropdownMenu & {
     ListProps: {
         Type: typeof import("../list/consts").Type;
         Dimension: {

package/components/dropdown-menu/dropdown-menu.js

@@ -1,4 +1,4 @@
-import { forwardRef, cloneElement, useState, } from 'react';
+import { cloneElement, useState, } from 'react';
 import List, { ActiveItemContext } from '../list/list';
 import Dropdown from '../dropdown/dropdown';
 import PopupMenu from '../popup-menu/popup-menu';
@@ -31,11 +31,11 @@ function renderDropdownMenuChildren({ children, popupMenuProps }) {
     }
     return (popupProps) => children({ ...popupProps, ...popupMenuProps });
 }
-const DropdownMenu = forwardRef(function DropdownMenu({ id, anchor, ariaLabel, data, onSelect, menuProps, children, ...restDropdownProps }, forwardedRef) {
+function DropdownMenu({ ref, id, anchor, ariaLabel, data, onSelect, menuProps, children, ...restDropdownProps }) {
     const [uid] = useState(() => getUID('dropdown-menu-list'));
     const listId = id || uid;
     const popupMenuProps = {
-        ref: forwardedRef,
+        ref,
         id: listId,
         ariaLabel: ariaLabel || defaultAriaLabel,
         closeOnSelect: true,
@@ -51,5 +51,5 @@ const DropdownMenu = forwardRef(function DropdownMenu({ id, anchor, ariaLabel, d
         {renderDropdownMenuChildren({ children, popupMenuProps })}
       </Dropdown>
     </ActiveItemContext.Provider>);
-});
+}
 export default Object.assign(DropdownMenu, { ListProps: List.ListProps });

package/components/editable-heading/editable-heading.d.ts

@@ -29,5 +29,4 @@ export type EditableHeadingProps = Omit<InputHTMLAttributes<HTMLInputElement | H
     translations?: EditableHeadingTranslations;
 };
 export declare const EditableHeading: (props: EditableHeadingProps) => React.JSX.Element;
-declare const _default: React.MemoExoticComponent<(props: EditableHeadingProps) => React.JSX.Element>;
-export default _default;
+export default EditableHeading;

package/components/editable-heading/editable-heading.js

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useEffectEvent, useLayoutEffect } from 'react';
 import * as React from 'react';
 import classNames from 'classnames';
 import Heading, { Levels } from '../heading/heading';
@@ -6,7 +6,6 @@ import Button from '../button/button';
 import { Size } from '../input/input';
 import getUID from '../global/get-uid';
 import Shortcuts from '../shortcuts/shortcuts';
-import useEventCallback from '../global/use-event-callback';
 import inputStyles from '../input/input.css';
 import styles from './editable-heading.css';
 export { Levels };
@@ -46,36 +45,30 @@ export const EditableHeading = (props) => {
     });
     const headingClasses = classNames(styles.heading, headingClassName, size !== Size.AUTO && styles[`size${size}`]);
     const inputClasses = classNames('ring-js-shortcuts', styles.input, styles.textarea, { [styles.textareaNotOverflow]: !isOverflow }, size !== Size.AUTO && inputStyles[`size${size}`], level !== Levels.H4 && styles[`level${level}`], inputClassName);
-    const stretch = (el) => {
-        if (!el || !el.style) {
-            return;
-        }
-        el.style.height = '0';
-        const { paddingTop, paddingBottom } = window.getComputedStyle(el);
-        el.style.height = `${el.scrollHeight - parseFloat(paddingTop) - parseFloat(paddingBottom)}px`;
-    };
-    const checkValue = (el) => {
+    const checkValue = React.useCallback((el) => {
         if (multiline && el && el.scrollHeight >= el.clientHeight) {
-            stretch(el);
+            el.style.height = '0';
+            const { paddingTop, paddingBottom } = window.getComputedStyle(el);
+            el.style.height = `${el.scrollHeight - parseFloat(paddingTop) - parseFloat(paddingBottom)}px`;
         }
-    };
-    const checkOverflow = (el) => {
+    }, [multiline]);
+    const checkOverflow = React.useCallback((el) => {
         const scrollHeight = el.scrollHeight || 0;
         const clientHeight = el.clientHeight || 0;
         const scrollTop = el.scrollTop || 0;
         setIsScrolledToBottom(scrollHeight - clientHeight <= scrollTop);
         setIsOverflow(scrollHeight > clientHeight);
-    };
+    }, []);
     const onHeadingMouseDown = () => {
         setIsMouseDown(true);
     };
-    const onMouseMove = useEventCallback(() => {
+    const onMouseMove = useEffectEvent(() => {
         if (!isMouseDown) {
             return;
         }
         setIsInSelectionMode(true);
     });
-    const onMouseUp = useEventCallback(() => {
+    const onMouseUp = useEffectEvent(() => {
         if (isMouseDown && !isInSelectionMode && !disabled) {
             onEdit();
         }
@@ -101,6 +94,12 @@ export const EditableHeading = (props) => {
         setIsInFocus(false);
         onBlur?.(e);
     };
+    useLayoutEffect(() => {
+        if (multiline && isEditing && textAreaRef.current) {
+            checkValue(textAreaRef.current);
+            checkOverflow(textAreaRef.current);
+        }
+    }, [checkOverflow, checkValue, isEditing, multiline]);
     useEffect(() => {
         window.addEventListener('mousemove', onMouseMove);
         window.addEventListener('mouseup', onMouseUp);
@@ -108,7 +107,7 @@ export const EditableHeading = (props) => {
             window.removeEventListener('mousemove', onMouseMove);
             window.removeEventListener('mouseup', onMouseUp);
         };
-    }, [onMouseMove, onMouseUp]);
+    }, []);
     return (<>
       <div className={classes}>
         {!disabled && isEditing ? (<>
@@ -140,4 +139,4 @@ export const EditableHeading = (props) => {
       {isEditing && error && (<div className={classNames(styles.errorText, size !== Size.AUTO && inputStyles[`size${size}`])}>{error}</div>)}
     </>);
 };
-export default React.memo(EditableHeading);
+export default EditableHeading;

package/components/global/compose-refs.d.ts

@@ -1,2 +1,3 @@
 import { type Ref } from 'react';
-export declare function createComposedRef<T>(): import("memoize-one").MemoizedFn<(...refs: (Ref<T> | undefined)[]) => (value: T | null) => void>;
+export declare function createComposedRef<T>(): import("memoize-one").MemoizedFn<(...refs: (Ref<T> | undefined)[]) => (value: T | null) => () => void>;
+export declare function useComposedRef<T>(...refs: (Ref<T> | undefined)[]): Ref<T>;

package/components/global/compose-refs.js

@@ -1,14 +1,30 @@
+import { useMemo } from 'react';
 import memoizeOne from 'memoize-one';
 function composeRefs(...refs) {
-    return (value) => refs.forEach(ref => {
-        if (typeof ref === 'function') {
-            ref(value);
-        }
-        else if (ref) {
-            ref.current = value;
-        }
-    });
+    return (value) => {
+        const cleanups = [];
+        refs.forEach(ref => {
+            if (typeof ref === 'function') {
+                const cleanup = ref(value);
+                if (typeof cleanup === 'function') {
+                    cleanups.push(cleanup);
+                }
+            }
+            else if (ref) {
+                ref.current = value;
+            }
+        });
+        return () => cleanups.forEach(cleanup => cleanup());
+    };
 }
 export function createComposedRef() {
     return memoizeOne((composeRefs));
 }
+export function useComposedRef(...refs) {
+    /**
+     * The React Compiler doesn't allow non-literal arrays in useMemo
+     * dependency lists, so we still use memoizeOne under the hood.
+     */
+    const composer = useMemo(() => createComposedRef(), []);
+    return composer(...refs);
+}

package/components/global/create-stateful-context.js

@@ -1,16 +1,16 @@
-import { createContext, memo, useContext, useEffect, useState } from 'react';
+import { createContext, memo, use, useEffect, useState } from 'react';
 export default function createStatefulContext(initialValue, name = '') {
     const ValueContext = createContext(initialValue);
     const UpdateContext = createContext(() => { });
     function Provider({ children }) {
         const [value, update] = useState(initialValue);
-        return (<ValueContext.Provider value={value}>
-        <UpdateContext.Provider value={update}>{children}</UpdateContext.Provider>
-      </ValueContext.Provider>);
+        return (<ValueContext value={value}>
+        <UpdateContext value={update}>{children}</UpdateContext>
+      </ValueContext>);
     }
     Provider.displayName = `${name}Provider`;
     function useUpdate(value, skipUpdate) {
-        const update = useContext(UpdateContext);
+        const update = use(UpdateContext);
         useEffect(() => {
             if (!skipUpdate) {
                 update(value);

package/components/global/focus-with-temporary-tabindex.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Focuses an element, temporarily adding `tabindex="0"` if necessary.
+ *
+ * If the element does not already have a `tabindex` attribute, one is
+ * added before focusing and automatically removed when the element loses
+ * focus.
+ *
+ * This is useful when implementing roving tabindex patterns on elements
+ * that are not normally focusable.
+ */
+export declare function focusWithTemporaryTabIndex(element: HTMLElement): void;

package/components/global/focus-with-temporary-tabindex.js

@@ -0,0 +1,21 @@
+/**
+ * Focuses an element, temporarily adding `tabindex="0"` if necessary.
+ *
+ * If the element does not already have a `tabindex` attribute, one is
+ * added before focusing and automatically removed when the element loses
+ * focus.
+ *
+ * This is useful when implementing roving tabindex patterns on elements
+ * that are not normally focusable.
+ */
+export function focusWithTemporaryTabIndex(element) {
+    if (!element.hasAttribute('tabindex')) {
+        element.tabIndex = 0;
+        function onBlur() {
+            element.removeAttribute('tabindex');
+            element.removeEventListener('blur', onBlur);
+        }
+        element.addEventListener('blur', onBlur);
+    }
+    element.focus();
+}

package/components/global/get-viewport-size.d.ts

@@ -0,0 +1,5 @@
+declare const getViewportSize: () => {
+    width: number;
+    height: number;
+};
+export default getViewportSize;

package/components/global/get-viewport-size.js

@@ -0,0 +1,5 @@
+const getViewportSize = () => ({
+    width: document.documentElement.clientWidth || window.innerWidth,
+    height: document.documentElement.clientHeight || window.innerHeight,
+});
+export default getViewportSize;

package/components/global/intersection-observer-context.d.ts

@@ -1,26 +1,46 @@
 import { type RefObject } from 'react';
 /**
+ * Provides access to a shared `IntersectionObserver` instance
+ * via the {@link IntersectionObserverContext} context.
+ *
+ * @see IntersectionObserverContext
+ */
+export interface IntersectionObserverHandle {
+    /**
+     * Starts observing an element.
+     *
+     * Returns a cleanup function that stops observing it.
+     */
+    observe(element: Element, isIntersecting: (isIntersecting: boolean) => void): () => void;
+}
+/**
+ * Multiple components can share a single `IntersectionObserver` instance through this context.
+ *
  * Usage:
  *
  * ```tsx
- * <IntersectionObserverContext.Provider value={useIntersectionObserverHandle()}>
+ * <IntersectionObserverContext value={useIntersectionObserverHandle()}>
  *   <YourComponent />
- * </IntersectionObserverContext.Provider>
+ * </IntersectionObserverContext>
  *
  * function YourComponent() {
  *   // Contains the current isIntersecting value
  *   const isIntersecting = useIsIntersecting(elementRef);
- *   // Or, to get updates instead:
- *   useIsIntersectingListener(elementRef, newIsIntersecting => {
- *     // ...
+ *
+ *   // Or, to manually work with the IntersectionObserverHandle:
+ *   const handle = use(IntersectionObserverContext);
+ *   useEffect(() => {
+ *     return handle.observe(elementRef.current, isIntersecting => { ... })
  *   })
  * }
  * ```
  */
-export declare const IntersectionObserverContext: import("react").Context<IntersectionObserverHandle | null>;
-export declare function useIntersectionObserverHandle(rootRef?: RefObject<HTMLElement | null>, rootMargin?: number, scrollMargin?: number): IntersectionObserverHandle | null;
-export interface IntersectionObserverHandle {
-    observe(element: Element, setIsIntersecting: (isIntersecting: boolean) => void): () => void;
-}
+export declare const IntersectionObserverContext: import("react").Context<IntersectionObserverHandle>;
+/**
+ * Creates an IntersectionObserverHandle suitable for {@link IntersectionObserverContext}.
+ */
+export declare function useIntersectionObserverHandle(rootRef?: RefObject<HTMLElement | null>, rootMargin?: number, scrollMargin?: number): IntersectionObserverHandle;
+/**
+ * Returns whether the referenced element is currently intersecting.
+ */
 export declare function useIsIntersecting(elementRef: RefObject<Element | null>): boolean;
-export declare function useIsIntersectingListener(elementRef: RefObject<Element | null>, onChange: (isIntersecting: boolean) => void): void;