@wordpress/block-editor/build/components/navigable-toolbar/index.js

Generic block editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _element = require("@wordpress/element");

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _components = require("@wordpress/components");

var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));

var _dom = require("@wordpress/dom");

var _keyboardShortcuts = require("@wordpress/keyboard-shortcuts");

/**
 * WordPress dependencies
 */
function hasOnlyToolbarItem(elements) {
  const dataProp = 'toolbarItem';
  return !elements.some(element => !(dataProp in element.dataset));
}

function getAllToolbarItemsIn(container) {
  return Array.from(container.querySelectorAll('[data-toolbar-item]'));
}

function hasFocusWithin(container) {
  return container.contains(container.ownerDocument.activeElement);
}

function focusFirstTabbableIn(container) {
  const [firstTabbable] = _dom.focus.tabbable.find(container);

  if (firstTabbable) {
    firstTabbable.focus({
      // When focusing newly mounted toolbars,
      // the position of the popover is often not right on the first render
      // This prevents the layout shifts when focusing the dialogs.
      preventScroll: true
    });
  }
}

function useIsAccessibleToolbar(ref) {
  /*
   * By default, we'll assume the starting accessible state of the Toolbar
   * is true, as it seems to be the most common case.
   *
   * Transitioning from an (initial) false to true state causes the
   * <Toolbar /> component to mount twice, which is causing undesired
   * side-effects. These side-effects appear to only affect certain
   * E2E tests.
   *
   * This was initial discovered in this pull-request:
   * https://github.com/WordPress/gutenberg/pull/23425
   */
  const initialAccessibleToolbarState = true; // By default, it's gonna render NavigableMenu. If all the tabbable elements
  // inside the toolbar are ToolbarItem components (or derived components like
  // ToolbarButton), then we can wrap them with the accessible Toolbar
  // component.

  const [isAccessibleToolbar, setIsAccessibleToolbar] = (0, _element.useState)(initialAccessibleToolbarState);
  const determineIsAccessibleToolbar = (0, _element.useCallback)(() => {
    const tabbables = _dom.focus.tabbable.find(ref.current);

    const onlyToolbarItem = hasOnlyToolbarItem(tabbables);

    if (!onlyToolbarItem) {
      (0, _deprecated.default)('Using custom components as toolbar controls', {
        since: '5.6',
        alternative: 'ToolbarItem, ToolbarButton or ToolbarDropdownMenu components',
        link: 'https://developer.wordpress.org/block-editor/components/toolbar-button/#inside-blockcontrols'
      });
    }

    setIsAccessibleToolbar(onlyToolbarItem);
  }, []);
  (0, _element.useLayoutEffect)(() => {
    // Toolbar buttons may be rendered asynchronously, so we use
    // MutationObserver to check if the toolbar subtree has been modified.
    const observer = new window.MutationObserver(determineIsAccessibleToolbar);
    observer.observe(ref.current, {
      childList: true,
      subtree: true
    });
    return () => observer.disconnect();
  }, [isAccessibleToolbar]);
  return isAccessibleToolbar;
}

function useToolbarFocus(ref, focusOnMount, isAccessibleToolbar, defaultIndex, onIndexChange, shouldUseKeyboardFocusShortcut) {
  // Make sure we don't use modified versions of this prop.
  const [initialFocusOnMount] = (0, _element.useState)(focusOnMount);
  const [initialIndex] = (0, _element.useState)(defaultIndex);
  const focusToolbar = (0, _element.useCallback)(() => {
    focusFirstTabbableIn(ref.current);
  }, []);

  const focusToolbarViaShortcut = () => {
    if (shouldUseKeyboardFocusShortcut) {
      focusToolbar();
    }
  }; // Focus on toolbar when pressing alt+F10 when the toolbar is visible.


  (0, _keyboardShortcuts.useShortcut)('core/block-editor/focus-toolbar', focusToolbarViaShortcut);
  (0, _element.useEffect)(() => {
    if (initialFocusOnMount) {
      focusToolbar();
    }
  }, [isAccessibleToolbar, initialFocusOnMount, focusToolbar]);
  (0, _element.useEffect)(() => {
    // Store ref so we have access on useEffect cleanup: https://legacy.reactjs.org/blog/2020/08/10/react-v17-rc.html#effect-cleanup-timing
    const navigableToolbarRef = ref.current; // If initialIndex is passed, we focus on that toolbar item when the
    // toolbar gets mounted and initial focus is not forced.
    // We have to wait for the next browser paint because block controls aren't
    // rendered right away when the toolbar gets mounted.

    let raf = 0;

    if (!initialFocusOnMount) {
      raf = window.requestAnimationFrame(() => {
        const items = getAllToolbarItemsIn(navigableToolbarRef);
        const index = initialIndex || 0;

        if (items[index] && hasFocusWithin(navigableToolbarRef)) {
          items[index].focus({
            // When focusing newly mounted toolbars,
            // the position of the popover is often not right on the first render
            // This prevents the layout shifts when focusing the dialogs.
            preventScroll: true
          });
        }
      });
    }

    return () => {
      window.cancelAnimationFrame(raf);
      if (!onIndexChange || !navigableToolbarRef) return; // When the toolbar element is unmounted and onIndexChange is passed, we
      // pass the focused toolbar item index so it can be hydrated later.

      const items = getAllToolbarItemsIn(navigableToolbarRef);
      const index = items.findIndex(item => item.tabIndex === 0);
      onIndexChange(index);
    };
  }, [initialIndex, initialFocusOnMount]);
}

function NavigableToolbar({
  children,
  focusOnMount,
  shouldUseKeyboardFocusShortcut = true,
  __experimentalInitialIndex: initialIndex,
  __experimentalOnIndexChange: onIndexChange,
  ...props
}) {
  const ref = (0, _element.useRef)();
  const isAccessibleToolbar = useIsAccessibleToolbar(ref);
  useToolbarFocus(ref, focusOnMount, isAccessibleToolbar, initialIndex, onIndexChange, shouldUseKeyboardFocusShortcut);

  if (isAccessibleToolbar) {
    return (0, _element.createElement)(_components.Toolbar, (0, _extends2.default)({
      label: props['aria-label'],
      ref: ref
    }, props), children);
  }

  return (0, _element.createElement)(_components.NavigableMenu, (0, _extends2.default)({
    orientation: "horizontal",
    role: "toolbar",
    ref: ref
  }, props), children);
}

var _default = NavigableToolbar;
exports.default = _default;
//# sourceMappingURL=index.js.map