@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,
  usePopoverApi
} from "@stratakit/foundations/secret-internals";
import cx from "classnames";
const Tooltip = forwardRef((props, forwardedRef) => {
  const generatedId = React.useId();
  const {
    content,
    children,
    type = "description",
    id = generatedId,
    defaultOpen: defaultOpenProp,
    open: openProp,
    setOpen: setOpenProp,
    unmountOnHide = type === "none",
    placement,
    ...rest
  } = props;
  const store = AkTooltip.useTooltipStore();
  const open = useStoreState(store, "open");
  const popoverElement = useStoreState(store, "popoverElement");
  const popoverProps = usePopoverApi({ element: popoverElement, open });
  return /* @__PURE__ */ jsxs(
    AkTooltip.TooltipProvider,
    {
      store,
      defaultOpen: defaultOpenProp,
      open: openProp,
      setOpen: setOpenProp,
      placement,
      children: [
        /* @__PURE__ */ jsx(
          AkTooltip.TooltipAnchor,
          {
            render: children,
            "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
};