adwaita-web/dist/components/PopoverMenu.js

A GTK inspired toolkit designed to build awesome web apps

import React, { useState } from "react";
import { hasKey } from "../utils/hasKey";
import useControlled from "../utils/useControlled";
import { PageSwitcher } from "./PageSwitcher";
import { Popover } from "./Popover";
function PopoverMenu({
  children,
  pages: getPages,
  open: openProp,
  onChangeOpen,
  ...rest
}) {
  const [page, setPage] = useState(0);
  const [isOpen, setOpen] = useControlled(openProp, false, onChangeOpen);
  const controls = {
    close: () => setOpen(false),
    back: () => setPage(0),
    open: () => setOpen(true),
    change: (key) => setPage(pages.findIndex((p) => typeof p === "object" && p !== null && hasKey(p, "key") && p.key === key))
  };
  const pages = getPages(controls);
  const content = /* @__PURE__ */ React.createElement(PageSwitcher, {
    expand: true,
    transition: "horizontal",
    pages,
    activePage: page,
    mainPage: 0,
    useMainPageDimensions: "width"
  });
  return /* @__PURE__ */ React.createElement(Popover, {
    placement: "bottom",
    ...rest,
    open: isOpen,
    content,
    onOpen: controls.open,
    onClose: controls.close,
    onDidClose: controls.back
  }, children);
}
export {
  PopoverMenu
};