@wordpress/editor/build/components/list-view-sidebar/index.js

Enhanced block editor for WordPress posts.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = ListViewSidebar;
var _blockEditor = require("@wordpress/block-editor");
var _compose = require("@wordpress/compose");
var _data = require("@wordpress/data");
var _dom = require("@wordpress/dom");
var _element = require("@wordpress/element");
var _i18n = require("@wordpress/i18n");
var _keyboardShortcuts = require("@wordpress/keyboard-shortcuts");
var _keycodes = require("@wordpress/keycodes");
var _listViewOutline = _interopRequireDefault(require("./list-view-outline"));
var _lockUnlock = require("../../lock-unlock");
var _store = require("../../store");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const {
  TabbedSidebar
} = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
function ListViewSidebar() {
  const {
    setIsListViewOpened
  } = (0, _data.useDispatch)(_store.store);
  const {
    getListViewToggleRef
  } = (0, _lockUnlock.unlock)((0, _data.useSelect)(_store.store));

  // This hook handles focus when the sidebar first renders.
  const focusOnMountRef = (0, _compose.useFocusOnMount)('firstElement');

  // When closing the list view, focus should return to the toggle button.
  const closeListView = (0, _element.useCallback)(() => {
    setIsListViewOpened(false);
    getListViewToggleRef().current?.focus();
  }, [getListViewToggleRef, setIsListViewOpened]);
  const closeOnEscape = (0, _element.useCallback)(event => {
    if (event.keyCode === _keycodes.ESCAPE && !event.defaultPrevented) {
      event.preventDefault();
      closeListView();
    }
  }, [closeListView]);

  // Use internal state instead of a ref to make sure that the component
  // re-renders when the dropZoneElement updates.
  const [dropZoneElement, setDropZoneElement] = (0, _element.useState)(null);
  // Tracks our current tab.
  const [tab, setTab] = (0, _element.useState)('list-view');

  // This ref refers to the sidebar as a whole.
  const sidebarRef = (0, _element.useRef)();
  // This ref refers to the tab panel.
  const tabsRef = (0, _element.useRef)();
  // This ref refers to the list view application area.
  const listViewRef = (0, _element.useRef)();

  // Must merge the refs together so focus can be handled properly in the next function.
  const listViewContainerRef = (0, _compose.useMergeRefs)([focusOnMountRef, listViewRef, setDropZoneElement]);

  /*
   * Callback function to handle list view or outline focus.
   *
   * @param {string} currentTab The current tab. Either list view or outline.
   *
   * @return void
   */
  function handleSidebarFocus(currentTab) {
    // Tab panel focus.
    const tabPanelFocus = _dom.focus.tabbable.find(tabsRef.current)[0];
    // List view tab is selected.
    if (currentTab === 'list-view') {
      // Either focus the list view or the tab panel. Must have a fallback because the list view does not render when there are no blocks.
      const listViewApplicationFocus = _dom.focus.tabbable.find(listViewRef.current)[0];
      const listViewFocusArea = sidebarRef.current.contains(listViewApplicationFocus) ? listViewApplicationFocus : tabPanelFocus;
      listViewFocusArea.focus();
      // Outline tab is selected.
    } else {
      tabPanelFocus.focus();
    }
  }
  const handleToggleListViewShortcut = (0, _element.useCallback)(() => {
    // If the sidebar has focus, it is safe to close.
    if (sidebarRef.current.contains(sidebarRef.current.ownerDocument.activeElement)) {
      closeListView();
    } else {
      // If the list view or outline does not have focus, focus should be moved to it.
      handleSidebarFocus(tab);
    }
  }, [closeListView, tab]);

  // This only fires when the sidebar is open because of the conditional rendering.
  // It is the same shortcut to open but that is defined as a global shortcut and only fires when the sidebar is closed.
  (0, _keyboardShortcuts.useShortcut)('core/editor/toggle-list-view', handleToggleListViewShortcut);
  return (
    /*#__PURE__*/
    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
    (0, _jsxRuntime.jsx)("div", {
      className: "editor-list-view-sidebar",
      onKeyDown: closeOnEscape,
      ref: sidebarRef,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TabbedSidebar, {
        tabs: [{
          name: 'list-view',
          title: (0, _i18n._x)('List View', 'Post overview'),
          panel: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
            className: "editor-list-view-sidebar__list-view-container",
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
              className: "editor-list-view-sidebar__list-view-panel-content",
              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.__experimentalListView, {
                dropZoneElement: dropZoneElement
              })
            })
          }),
          panelRef: listViewContainerRef
        }, {
          name: 'outline',
          title: (0, _i18n._x)('Outline', 'Post overview'),
          panel: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
            className: "editor-list-view-sidebar__list-view-container",
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_listViewOutline.default, {})
          })
        }],
        onClose: closeListView,
        onSelect: tabName => setTab(tabName),
        defaultTabId: "list-view",
        ref: tabsRef,
        closeButtonLabel: (0, _i18n.__)('Close')
      })
    })
  );
}
//# sourceMappingURL=index.js.map