@stratakit/bricks/dist/DEV/Tooltip.js

Small, modular components for StrataKit

import { jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { useStoreState } from "@ariakit/react/store";
import * as AkTooltip from "@ariakit/react/tooltip";
import {
  forwardRef,
  useEventHandlers,
  usePopoverApi,
  useUnreactiveCallback
} from "@stratakit/foundations/secret-internals";
import cx from "classnames";
import { useInit } from "./~utils.useInit.js";
import { TooltipContext } from "./Tooltip.internal.js";
const Tooltip = forwardRef((props, forwardedRef) => {
  useInit();
  const generatedId = React.useId();
  const context = React.useContext(TooltipContext);
  const {
    content,
    children,
    type = "description",
    id = generatedId,
    defaultOpen: defaultOpenProp,
    open: openProp,
    setOpen: setOpenProp,
    unmountOnHide = type === "none",
    placement = context.placement,
    ...rest
  } = props;
  const store = AkTooltip.useTooltipStore();
  const open = useStoreState(store, "open");
  const popoverElement = useStoreState(store, "popoverElement");
  const setOpen = useUnreactiveCallback(store.setOpen);
  const popoverProps = usePopoverApi({
    element: popoverElement,
    open,
    setOpen
  });
  return /* @__PURE__ */ jsxs(
    AkTooltip.TooltipProvider,
    {
      store,
      defaultOpen: defaultOpenProp,
      open: openProp,
      setOpen: setOpenProp,
      placement,
      children: [
        /* @__PURE__ */ jsx(
          AkTooltip.TooltipAnchor,
          {
            render: children,
            onContextMenu: useEventHandlers(
              children.props?.onContextMenu,
              (event) => {
                const isButton = event.currentTarget.localName === "button" || event.currentTarget.role === "button";
                if (!isButton) return;
                event.preventDefault();
                store.setOpen(true);
              }
            ),
            "data-has-popover-open": open || void 0,
            ...type === "description" && { "aria-describedby": id },
            ...type === "label" && { "aria-labelledby": id }
          }
        ),
        /* @__PURE__ */ jsx(
          AkTooltip.Tooltip,
          {
            portal: true,
            ...rest,
            unmountOnHide,
            className: cx("\u{1F95D}Tooltip", props.className),
            ref: forwardedRef,
            id,
            style: { ...popoverProps.style, ...props.style },
            wrapperProps: { popover: popoverProps.popover },
            children: content
          }
        )
      ]
    }
  );
});
DEV: Tooltip.displayName = "Tooltip";
var Tooltip_default = Tooltip;
export {
  Tooltip_default as default
};