@wordpress/preferences/build-module/components/preferences-modal-tabs/index.js

Utilities for managing WordPress preferences.

// packages/preferences/src/components/preferences-modal-tabs/index.tsx
import { useViewportMatch } from "@wordpress/compose";
import {
  Navigator,
  __experimentalItemGroup as ItemGroup,
  __experimentalItem as Item,
  __experimentalHStack as HStack,
  __experimentalText as Text,
  __experimentalTruncate as Truncate,
  FlexItem,
  Card,
  CardHeader,
  CardBody,
  privateApis as componentsPrivateApis
} from "@wordpress/components";
import { useMemo, useState } from "@wordpress/element";
import { chevronLeft, chevronRight, Icon } from "@wordpress/icons";
import { isRTL, __ } from "@wordpress/i18n";
import { unlock } from "../../lock-unlock";
import { jsx, jsxs } from "react/jsx-runtime";
var { Tabs } = unlock(componentsPrivateApis);
var PREFERENCES_MENU = "preferences-menu";
function PreferencesModalTabs({
  sections
}) {
  const isLargeViewport = useViewportMatch("medium");
  const [activeMenu, setActiveMenu] = useState(PREFERENCES_MENU);
  const { tabs, sectionsContentMap } = useMemo(() => {
    let mappedTabs = {
      tabs: [],
      sectionsContentMap: {}
    };
    if (sections.length) {
      mappedTabs = sections.reduce(
        (accumulator, { name, tabLabel: title, content }) => {
          accumulator.tabs.push({ name, title });
          accumulator.sectionsContentMap[name] = content;
          return accumulator;
        },
        { tabs: [], sectionsContentMap: {} }
      );
    }
    return mappedTabs;
  }, [sections]);
  let modalContent;
  if (isLargeViewport) {
    modalContent = /* @__PURE__ */ jsx("div", { className: "preferences__tabs", children: /* @__PURE__ */ jsxs(
      Tabs,
      {
        defaultTabId: activeMenu !== PREFERENCES_MENU ? activeMenu : void 0,
        onSelect: setActiveMenu,
        orientation: "vertical",
        children: [
          /* @__PURE__ */ jsx(Tabs.TabList, { className: "preferences__tabs-tablist", children: tabs.map((tab) => /* @__PURE__ */ jsx(
            Tabs.Tab,
            {
              tabId: tab.name,
              className: "preferences__tabs-tab",
              children: tab.title
            },
            tab.name
          )) }),
          tabs.map((tab) => /* @__PURE__ */ jsx(
            Tabs.TabPanel,
            {
              tabId: tab.name,
              className: "preferences__tabs-tabpanel",
              focusable: false,
              children: sectionsContentMap[tab.name] || null
            },
            tab.name
          ))
        ]
      }
    ) });
  } else {
    modalContent = /* @__PURE__ */ jsxs(Navigator, { initialPath: "/", className: "preferences__provider", children: [
      /* @__PURE__ */ jsx(Navigator.Screen, { path: "/", children: /* @__PURE__ */ jsx(Card, { isBorderless: true, size: "small", children: /* @__PURE__ */ jsx(CardBody, { children: /* @__PURE__ */ jsx(ItemGroup, { children: tabs.map((tab) => {
        return (
          // @ts-expect-error: Navigator.Button is currently typed in a way that prevents Item from being passed in
          /* @__PURE__ */ jsx(
            Navigator.Button,
            {
              path: `/${tab.name}`,
              as: Item,
              isAction: true,
              children: /* @__PURE__ */ jsxs(HStack, { justify: "space-between", children: [
                /* @__PURE__ */ jsx(FlexItem, { children: /* @__PURE__ */ jsx(Truncate, { children: tab.title }) }),
                /* @__PURE__ */ jsx(FlexItem, { children: /* @__PURE__ */ jsx(
                  Icon,
                  {
                    icon: isRTL() ? chevronLeft : chevronRight
                  }
                ) })
              ] })
            },
            tab.name
          )
        );
      }) }) }) }) }),
      sections.length && sections.map((section) => {
        return /* @__PURE__ */ jsx(
          Navigator.Screen,
          {
            path: `/${section.name}`,
            children: /* @__PURE__ */ jsxs(Card, { isBorderless: true, size: "large", children: [
              /* @__PURE__ */ jsxs(
                CardHeader,
                {
                  isBorderless: false,
                  justify: "left",
                  size: "small",
                  gap: "6",
                  as: "div",
                  children: [
                    /* @__PURE__ */ jsx(
                      Navigator.BackButton,
                      {
                        icon: isRTL() ? chevronRight : chevronLeft,
                        label: __("Back")
                      }
                    ),
                    /* @__PURE__ */ jsx(Text, { size: "16", children: section.tabLabel })
                  ]
                }
              ),
              /* @__PURE__ */ jsx(CardBody, { children: section.content })
            ] })
          },
          `${section.name}-menu`
        );
      })
    ] });
  }
  return modalContent;
}
export {
  PreferencesModalTabs as default
};
//# sourceMappingURL=index.js.map