// packages/block-editor/src/components/inserter/category-tabs/index.js
import { usePrevious, useReducedMotion } from "@wordpress/compose";
import {
  privateApis as componentsPrivateApis,
  __unstableMotion as motion
} from "@wordpress/components";
import { useState } from "@wordpress/element";
import { unlock } from "../../../lock-unlock";
import { jsx, jsxs } from "react/jsx-runtime";
var { Tabs } = unlock(componentsPrivateApis);
function CategoryTabs({
  categories,
  selectedCategory,
  onSelectCategory,
  children
}) {
  const ANIMATION_DURATION = 0.25;
  const disableMotion = useReducedMotion();
  const defaultTransition = {
    type: "tween",
    duration: disableMotion ? 0 : ANIMATION_DURATION,
    ease: [0.6, 0, 0.4, 1]
  };
  const previousSelectedCategory = usePrevious(selectedCategory);
  const selectedTabId = selectedCategory ? selectedCategory.name : null;
  const [activeTabId, setActiveId] = useState();
  const firstTabId = categories?.[0]?.name;
  if (selectedTabId === null && !activeTabId && firstTabId) {
    setActiveId(firstTabId);
  }
  return /* @__PURE__ */ jsxs(
    Tabs,
    {
      selectOnMove: false,
      selectedTabId,
      orientation: "vertical",
      onSelect: (categoryId) => {
        onSelectCategory(
          categories.find(
            (category) => category.name === categoryId
          )
        );
      },
      activeTabId,
      onActiveTabIdChange: setActiveId,
      children: [
        /* @__PURE__ */ jsx(Tabs.TabList, { className: "block-editor-inserter__category-tablist", children: categories.map((category) => /* @__PURE__ */ jsx(
          Tabs.Tab,
          {
            tabId: category.name,
            "aria-current": category === selectedCategory ? "true" : void 0,
            children: category.label
          },
          category.name
        )) }),
        categories.map((category) => /* @__PURE__ */ jsx(
          Tabs.TabPanel,
          {
            tabId: category.name,
            focusable: false,
            children: /* @__PURE__ */ jsx(
              motion.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;
export {
  category_tabs_default as default
};
//# sourceMappingURL=index.js.map
