@stratakit/bricks/dist/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
    })]
  });
});
var Tooltip_default = Tooltip;
export {
  Tooltip_default as default
};