@stratakit/structures/dist/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
  });
}
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
  });
});
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
    })
  });
});
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
    })]
  });
});
var Popover_default = Popover;
export {
  Popover_default as default
};