@lexical/react/dist/useLexicalRovingTabIndexRef.dev.js

This package provides Lexical components and hooks for React applications.

/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 */

import { RovingTabIndexExtension } from '@lexical/a11y';
import { getExtensionDependencyFromEditor } from '@lexical/extension/getExtensionDependencyFromEditor';
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
import { useRef, useCallback } from 'react';

/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 */

/**
 * Returns a `RefCallback` that registers the attached DOM element as a
 * roving-tabindex container with {@link RovingTabIndexExtension}, and
 * releases it when the element detaches.
 *
 * ```tsx
 * const rovingRef = useLexicalRovingTabIndexRef();
 * return <div ref={rovingRef} role="toolbar">…</div>;
 * ```
 *
 * Multiple elements can use this hook simultaneously — each gets its
 * own independent roving group.
 *
 * Requires `RovingTabIndexExtension` in the editor's extension tree.
 */
function useLexicalRovingTabIndexRef(options = {}) {
  const [editor] = useLexicalComposerContext();
  const {
    orientation,
    itemSelector
  } = options;
  const disposeRef = useRef(null);
  return useCallback(node => {
    if (disposeRef.current !== null) {
      disposeRef.current();
      disposeRef.current = null;
    }
    if (node !== null) {
      const dep = getExtensionDependencyFromEditor(editor, RovingTabIndexExtension);
      disposeRef.current = dep.output.register(node, {
        itemSelector,
        orientation
      });
    }
  }, [editor, orientation, itemSelector]);
}

export { useLexicalRovingTabIndexRef };