@stratakit/structures/dist/DEV/Popover.js

Medium-sized component structures for the Strata design system

import { jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import * as AkPopover from "@ariakit/react/popover";
import { PortalContext } from "@ariakit/react/portal";
import { useStoreState } from "@ariakit/react/store";
import { Button } from "@stratakit/bricks";
import {
  forwardRef,
  usePopoverApi,
  useUnreactiveCallback
} from "@stratakit/foundations/secret-internals";
import cx from "classnames";
import { useInit } from "./~utils.useInit.js";
function PopoverProvider(props) {
  const { children, open, setOpen, placement = "bottom-start" } = props;
  return /* @__PURE__ */ jsx(
    AkPopover.PopoverProvider,
    {
      open,
      setOpen,
      placement,
      children
    }
  );
}
DEV: PopoverProvider.displayName = "PopoverProvider";
const PopoverDisclosure = forwardRef(
  (props, forwardedRef) => {
    const store = AkPopover.usePopoverContext();
    const open = useStoreState(store, "open");
    const defaultId = React.useId();
    return /* @__PURE__ */ jsx(
      AkPopover.PopoverDisclosure,
      {
        id: defaultId,
        render: /* @__PURE__ */ jsx(Button, {}),
        ...props,
        "data-has-popover-open": open || void 0,
        ref: forwardedRef
      }
    );
  }
);
DEV: PopoverDisclosure.displayName = "PopoverDisclosure";
const PopoverRoot = forwardRef(
  (props, forwardedRef) => {
    const { children, unmountOnHide, ...rest } = props;
    const store = AkPopover.usePopoverContext();
    const popoverElement = useStoreState(store, "popoverElement");
    const open = useStoreState(store, "open");
    const setOpen = useUnreactiveCallback(store?.setOpen);
    const popoverProps = usePopoverApi({
      element: popoverElement,
      open,
      setOpen
    });
    const contentElement = useStoreState(store, "contentElement");
    const triggerId = useStoreState(
      store,
      (state) => state?.disclosureElement?.id
    );
    const labelledBy = props["aria-label"] ? void 0 : triggerId;
    return /* @__PURE__ */ jsx(
      AkPopover.Popover,
      {
        "aria-labelledby": labelledBy,
        portal: true,
        unmountOnHide,
        ...rest,
        gutter: 8,
        style: { ...popoverProps.style, ...props.style },
        wrapperProps: { popover: popoverProps.popover },
        className: cx("\u{1F95D}Popover", props.className),
        ref: forwardedRef,
        children: /* @__PURE__ */ jsx(PortalContext.Provider, { value: contentElement ?? null, children })
      }
    );
  }
);
DEV: PopoverRoot.displayName = "PopoverRoot";
const Popover = forwardRef((props, forwardedRef) => {
  useInit();
  const { children, content, open, setOpen, placement, ...rest } = props;
  return /* @__PURE__ */ jsxs(PopoverProvider, { open, setOpen, placement, children: [
    /* @__PURE__ */ jsx(PopoverDisclosure, { render: children }),
    /* @__PURE__ */ jsx(PopoverRoot, { ...rest, ref: forwardedRef, children: content })
  ] });
});
DEV: Popover.displayName = "Popover";
var Popover_default = Popover;
export {
  Popover_default as default
};