"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// packages/block-editor/src/components/inserter/menu.js
var menu_exports = {};
__export(menu_exports, {
  PrivateInserterMenu: () => PrivateInserterMenu,
  default: () => menu_default
});
module.exports = __toCommonJS(menu_exports);
var import_clsx = __toESM(require("clsx"));
var import_element = require("@wordpress/element");
var import_components = require("@wordpress/components");
var import_ui = require("@wordpress/ui");
var import_i18n = require("@wordpress/i18n");
var import_compose = require("@wordpress/compose");
var import_data = require("@wordpress/data");
var import_tips = __toESM(require("./tips.cjs"));
var import_preview_panel = __toESM(require("./preview-panel.cjs"));
var import_block_types_tab = __toESM(require("./block-types-tab.cjs"));
var import_block_patterns_tab = __toESM(require("./block-patterns-tab/index.cjs"));
var import_pattern_category_previews = require("./block-patterns-tab/pattern-category-previews.cjs");
var import_media_tab = require("./media-tab/index.cjs");
var import_search_results = __toESM(require("./search-results.cjs"));
var import_use_insertion_point = __toESM(require("./hooks/use-insertion-point.cjs"));
var import_store = require("../../store/index.cjs");
var import_tabbed_sidebar = __toESM(require("../tabbed-sidebar/index.cjs"));
var import_use_zoom_out = require("../../hooks/use-zoom-out.cjs");
var import_lock_unlock = require("../../lock-unlock.cjs");
var import_jsx_runtime = require("react/jsx-runtime");
var NOOP = () => {
};
function InserterMenu({
  rootClientId,
  clientId,
  isAppender,
  __experimentalInsertionIndex,
  onSelect,
  showInserterHelpPanel,
  showMostUsedBlocks,
  __experimentalFilterValue = "",
  shouldFocusBlock = true,
  onPatternCategorySelection,
  onClose,
  __experimentalInitialTab,
  __experimentalInitialCategory
}, ref) {
  const { isZoomOutMode, hasSectionRootClientId } = (0, import_data.useSelect)((select) => {
    const { isZoomOut, getSectionRootClientId } = (0, import_lock_unlock.unlock)(
      select(import_store.store)
    );
    return {
      isZoomOutMode: isZoomOut(),
      hasSectionRootClientId: !!getSectionRootClientId()
    };
  }, []);
  const [filterValue, setFilterValue, delayedFilterValue] = (0, import_compose.useDebouncedInput)(__experimentalFilterValue);
  const [hoveredItem, setHoveredItem] = (0, import_element.useState)(null);
  const [selectedPatternCategory, setSelectedPatternCategory] = (0, import_element.useState)(
    __experimentalInitialCategory
  );
  const [patternFilter, setPatternFilter] = (0, import_element.useState)("all");
  const [selectedMediaCategory, setSelectedMediaCategory] = (0, import_element.useState)(null);
  const isLargeViewport = (0, import_compose.useViewportMatch)("large");
  const isMobileViewport = (0, import_compose.useViewportMatch)("medium", "<");
  const maybeCloseInserter = isMobileViewport ? onClose : NOOP;
  function getInitialTab() {
    if (__experimentalInitialTab) {
      return __experimentalInitialTab;
    }
    if (isZoomOutMode) {
      return "patterns";
    }
    return "blocks";
  }
  const [selectedTab, setSelectedTab] = (0, import_element.useState)(getInitialTab());
  const shouldUseZoomOut = hasSectionRootClientId && (selectedTab === "patterns" || selectedTab === "media");
  (0, import_use_zoom_out.useZoomOut)(shouldUseZoomOut && isLargeViewport);
  const [destinationRootClientId, onInsertBlocks, onToggleInsertionPoint] = (0, import_use_insertion_point.default)({
    rootClientId,
    clientId,
    isAppender,
    insertionIndex: __experimentalInsertionIndex,
    shouldFocusBlock
  });
  const blockTypesTabRef = (0, import_element.useRef)();
  const onInsert = (0, import_element.useCallback)(
    (blocks, meta, shouldForceFocusBlock, _rootClientId) => {
      onInsertBlocks(
        blocks,
        meta,
        shouldForceFocusBlock,
        _rootClientId
      );
      onSelect(blocks);
      maybeCloseInserter();
      window.requestAnimationFrame(() => {
        if (!shouldFocusBlock && !blockTypesTabRef.current?.contains(
          ref.current.ownerDocument.activeElement
        )) {
          blockTypesTabRef.current?.querySelector("button").focus();
        }
      });
    },
    [onInsertBlocks, maybeCloseInserter, onSelect, ref, shouldFocusBlock]
  );
  const onInsertPattern = (0, import_element.useCallback)(
    (blocks, patternName, ...args) => {
      onToggleInsertionPoint(false);
      onInsertBlocks(blocks, { patternName }, ...args);
      onSelect();
      maybeCloseInserter();
    },
    [onInsertBlocks, maybeCloseInserter, onSelect, onToggleInsertionPoint]
  );
  const onHover = (0, import_element.useCallback)(
    (item) => {
      onToggleInsertionPoint(item);
      setHoveredItem(item);
    },
    [onToggleInsertionPoint, setHoveredItem]
  );
  const onClickPatternCategory = (0, import_element.useCallback)(
    (patternCategory, filter) => {
      setSelectedPatternCategory(patternCategory);
      setPatternFilter(filter);
      onPatternCategorySelection?.();
    },
    [setSelectedPatternCategory, onPatternCategorySelection]
  );
  const showPatternPanel = selectedTab === "patterns" && !delayedFilterValue && !!selectedPatternCategory;
  const showMediaPanel = selectedTab === "media" && !!selectedMediaCategory;
  const [isScrolled, setIsScrolled] = (0, import_element.useState)(false);
  const blocksPanelRef = (0, import_element.useRef)(null);
  const patternsPanelRef = (0, import_element.useRef)(null);
  const mediaPanelRef = (0, import_element.useRef)(null);
  (0, import_element.useEffect)(() => {
    const handleScroll = (event) => {
      setIsScrolled(event.currentTarget.scrollTop > 0);
    };
    const panels = [
      blocksPanelRef.current,
      patternsPanelRef.current,
      mediaPanelRef.current
    ].filter(Boolean);
    panels.forEach(
      (panel) => panel.addEventListener("scroll", handleScroll)
    );
    return () => {
      panels.forEach(
        (panel) => panel.removeEventListener("scroll", handleScroll)
      );
    };
  }, []);
  const inserterSearch = (0, import_element.useMemo)(() => {
    if (selectedTab === "media") {
      return null;
    }
    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
        import_components.SearchControl,
        {
          className: (0, import_clsx.default)("block-editor-inserter__search", {
            "is-scrolled": isScrolled
          }),
          onChange: (value) => {
            if (hoveredItem) {
              setHoveredItem(null);
            }
            setFilterValue(value);
          },
          value: filterValue,
          label: (0, import_i18n.__)("Search"),
          placeholder: (0, import_i18n.__)("Search")
        }
      ),
      !!delayedFilterValue && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
        import_search_results.default,
        {
          filterValue: delayedFilterValue,
          onSelect,
          onHover,
          rootClientId,
          clientId,
          isAppender,
          __experimentalInsertionIndex,
          showBlockDirectory: true,
          shouldFocusBlock,
          prioritizePatterns: selectedTab === "patterns"
        }
      )
    ] });
  }, [
    selectedTab,
    hoveredItem,
    setHoveredItem,
    setFilterValue,
    filterValue,
    delayedFilterValue,
    onSelect,
    onHover,
    shouldFocusBlock,
    clientId,
    rootClientId,
    __experimentalInsertionIndex,
    isAppender,
    isScrolled
  ]);
  const blocksTab = (0, import_element.useMemo)(() => {
    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "block-editor-inserter__block-list", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
        import_block_types_tab.default,
        {
          ref: blockTypesTabRef,
          rootClientId: destinationRootClientId,
          onInsert,
          onHover,
          showMostUsedBlocks
        }
      ) }),
      showInserterHelpPanel && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "block-editor-inserter__tips", children: [
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.VisuallyHidden, { render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", {}), children: (0, import_i18n.__)("A tip for using the block editor") }),
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tips.default, {})
      ] })
    ] });
  }, [
    destinationRootClientId,
    onInsert,
    onHover,
    showMostUsedBlocks,
    showInserterHelpPanel
  ]);
  const patternsTab = (0, import_element.useMemo)(() => {
    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      import_block_patterns_tab.default,
      {
        rootClientId: destinationRootClientId,
        onInsert: onInsertPattern,
        onSelectCategory: onClickPatternCategory,
        selectedCategory: selectedPatternCategory,
        children: showPatternPanel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          import_pattern_category_previews.PatternCategoryPreviews,
          {
            rootClientId: destinationRootClientId,
            onInsert: onInsertPattern,
            category: selectedPatternCategory,
            patternFilter,
            showTitlesAsTooltip: true
          }
        )
      }
    );
  }, [
    destinationRootClientId,
    onInsertPattern,
    onClickPatternCategory,
    patternFilter,
    selectedPatternCategory,
    showPatternPanel
  ]);
  const mediaTab = (0, import_element.useMemo)(() => {
    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      import_media_tab.MediaTab,
      {
        rootClientId: destinationRootClientId,
        selectedCategory: selectedMediaCategory,
        onSelectCategory: setSelectedMediaCategory,
        onInsert,
        children: showMediaPanel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          import_media_tab.MediaCategoryPanel,
          {
            rootClientId: destinationRootClientId,
            onInsert,
            category: selectedMediaCategory
          }
        )
      }
    );
  }, [
    destinationRootClientId,
    onInsert,
    selectedMediaCategory,
    setSelectedMediaCategory,
    showMediaPanel
  ]);
  const handleSetSelectedTab = (value) => {
    if (value !== "patterns") {
      setSelectedPatternCategory(null);
    }
    setSelectedTab(value);
  };
  const tabsRef = (0, import_element.useRef)();
  (0, import_element.useLayoutEffect)(() => {
    if (tabsRef.current) {
      window.requestAnimationFrame(() => {
        tabsRef.current.querySelector('[role="tab"][aria-selected="true"]')?.focus();
      });
    }
  }, []);
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
    "div",
    {
      className: (0, import_clsx.default)("block-editor-inserter__menu", {
        "show-panel": showPatternPanel || showMediaPanel,
        "is-zoom-out": isZoomOutMode
      }),
      ref,
      children: [
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "block-editor-inserter__main-area", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          import_tabbed_sidebar.default,
          {
            ref: tabsRef,
            onSelect: handleSetSelectedTab,
            onClose,
            selectedTab,
            closeButtonLabel: (0, import_i18n.__)("Close Block Inserter"),
            tabs: [
              {
                name: "blocks",
                title: (0, import_i18n.__)("Blocks"),
                panelRef: blocksPanelRef,
                panel: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
                  inserterSearch,
                  selectedTab === "blocks" && !delayedFilterValue && blocksTab
                ] })
              },
              {
                name: "patterns",
                title: (0, import_i18n.__)("Patterns"),
                panelRef: patternsPanelRef,
                panel: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
                  inserterSearch,
                  selectedTab === "patterns" && !delayedFilterValue && patternsTab
                ] })
              },
              {
                name: "media",
                title: (0, import_i18n.__)("Media"),
                panelRef: mediaPanelRef,
                panel: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
                  inserterSearch,
                  mediaTab
                ] })
              }
            ]
          }
        ) }),
        showInserterHelpPanel && hoveredItem && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          import_components.Popover,
          {
            className: "block-editor-inserter__preview-container__popover",
            placement: "right-start",
            offset: 16,
            focusOnMount: false,
            animate: false,
            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_preview_panel.default, { item: hoveredItem })
          }
        )
      ]
    }
  );
}
var PrivateInserterMenu = (0, import_element.forwardRef)(InserterMenu);
function PublicInserterMenu(props, ref) {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    PrivateInserterMenu,
    {
      ...props,
      onPatternCategorySelection: NOOP,
      ref
    }
  );
}
var menu_default = (0, import_element.forwardRef)(PublicInserterMenu);
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  PrivateInserterMenu
});
//# sourceMappingURL=menu.cjs.map
