/* wp:polyfill */
"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.SidebarNavigationContext = void 0;
exports.default = SidebarContent;
var _clsx = _interopRequireDefault(require("clsx"));
var _element = require("@wordpress/element");
var _dom = require("@wordpress/dom");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

const SidebarNavigationContext = exports.SidebarNavigationContext = (0, _element.createContext)(() => {});
// Focus a sidebar element after a navigation. The element to focus is either
// specified by `focusSelector` (when navigating back) or it is the first
// tabbable element (usually the "Back" button).
function focusSidebarElement(el, direction, focusSelector) {
  let elementToFocus;
  if (direction === 'back' && focusSelector) {
    elementToFocus = el.querySelector(focusSelector);
  }
  if (direction !== null && !elementToFocus) {
    const [firstTabbable] = _dom.focus.tabbable.find(el);
    elementToFocus = firstTabbable !== null && firstTabbable !== void 0 ? firstTabbable : el;
  }
  elementToFocus?.focus();
}

// Navigation state that is updated when navigating back or forward. Helps us
// manage the animations and also focus.
function createNavState() {
  let state = {
    direction: null,
    focusSelector: null
  };
  return {
    get() {
      return state;
    },
    navigate(direction, focusSelector = null) {
      state = {
        direction,
        focusSelector: direction === 'forward' && focusSelector ? focusSelector : state.focusSelector
      };
    }
  };
}
function SidebarContentWrapper({
  children,
  shouldAnimate
}) {
  const navState = (0, _element.useContext)(SidebarNavigationContext);
  const wrapperRef = (0, _element.useRef)();
  const [navAnimation, setNavAnimation] = (0, _element.useState)(null);
  (0, _element.useLayoutEffect)(() => {
    const {
      direction,
      focusSelector
    } = navState.get();
    focusSidebarElement(wrapperRef.current, direction, focusSelector);
    setNavAnimation(direction);
  }, [navState]);
  const wrapperCls = (0, _clsx.default)('edit-site-sidebar__screen-wrapper',
  /*
   * Some panes do not have sub-panes and therefore
   * should not animate when clicked on.
   */
  shouldAnimate ? {
    'slide-from-left': navAnimation === 'back',
    'slide-from-right': navAnimation === 'forward'
  } : {});
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    ref: wrapperRef,
    className: wrapperCls,
    children: children
  });
}
function SidebarContent({
  routeKey,
  shouldAnimate,
  children
}) {
  const [navState] = (0, _element.useState)(createNavState);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(SidebarNavigationContext.Provider, {
    value: navState,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "edit-site-sidebar__content",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SidebarContentWrapper, {
        shouldAnimate: shouldAnimate,
        children: children
      }, routeKey)
    })
  });
}
//# sourceMappingURL=index.js.map