"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// packages/block-editor/src/components/inserter/category-tabs/index.js
var category_tabs_exports = {};
__export(category_tabs_exports, {
  default: () => category_tabs_default
});
module.exports = __toCommonJS(category_tabs_exports);
var import_compose = require("@wordpress/compose");
var import_components = require("@wordpress/components");
var import_element = require("@wordpress/element");
var import_lock_unlock = require("../../../lock-unlock");
var import_jsx_runtime = require("react/jsx-runtime");
var { Tabs } = (0, import_lock_unlock.unlock)(import_components.privateApis);
function CategoryTabs({
  categories,
  selectedCategory,
  onSelectCategory,
  children
}) {
  const ANIMATION_DURATION = 0.25;
  const disableMotion = (0, import_compose.useReducedMotion)();
  const defaultTransition = {
    type: "tween",
    duration: disableMotion ? 0 : ANIMATION_DURATION,
    ease: [0.6, 0, 0.4, 1]
  };
  const previousSelectedCategory = (0, import_compose.usePrevious)(selectedCategory);
  const selectedTabId = selectedCategory ? selectedCategory.name : null;
  const [activeTabId, setActiveId] = (0, import_element.useState)();
  const firstTabId = categories?.[0]?.name;
  if (selectedTabId === null && !activeTabId && firstTabId) {
    setActiveId(firstTabId);
  }
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
    Tabs,
    {
      selectOnMove: false,
      selectedTabId,
      orientation: "vertical",
      onSelect: (categoryId) => {
        onSelectCategory(
          categories.find(
            (category) => category.name === categoryId
          )
        );
      },
      activeTabId,
      onActiveTabIdChange: setActiveId,
      children: [
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tabs.TabList, { className: "block-editor-inserter__category-tablist", children: categories.map((category) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          Tabs.Tab,
          {
            tabId: category.name,
            "aria-current": category === selectedCategory ? "true" : void 0,
            children: category.label
          },
          category.name
        )) }),
        categories.map((category) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          Tabs.TabPanel,
          {
            tabId: category.name,
            focusable: false,
            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
              import_components.__unstableMotion.div,
              {
                className: "block-editor-inserter__category-panel",
                initial: !previousSelectedCategory ? "closed" : "open",
                animate: "open",
                variants: {
                  open: {
                    transform: "translateX( 0 )",
                    transitionEnd: {
                      zIndex: "1"
                    }
                  },
                  closed: {
                    transform: "translateX( -100% )",
                    zIndex: "-1"
                  }
                },
                transition: defaultTransition,
                children
              }
            )
          },
          category.name
        ))
      ]
    }
  );
}
var category_tabs_default = CategoryTabs;
//# sourceMappingURL=index.js.map
