@liveblocks/react-ui/dist/components/internal/Tooltip.js

A set of React pre-built components for the Liveblocks products. Liveblocks is the all-in-one toolkit to build collaborative products like Figma, Notion, and more.

"use client";
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
export { TooltipProvider } from '@radix-ui/react-tooltip';
import { forwardRef, useMemo } from 'react';
import { useLiveblocksUiConfig } from '../../config.js';
import { FLOATING_ELEMENT_SIDE_OFFSET, FLOATING_ELEMENT_COLLISION_PADDING } from '../../constants.js';
import { cn } from '../../utils/cn.js';
import { isApple } from '../../utils/is-apple.js';


const ALT_KEY = { title: "Alt", key: "\u2325" };
const COMMAND_KEY = { title: "Command", key: "\u2318" };
const CONTROL_KEY = { title: "Ctrl", key: "\u2303" };
const SHIFT_KEY = { title: "Shift", key: "\u21E7" };
const ENTER_KEY = { title: "Enter", key: "\u23CE" };
const SPACE_KEY = { title: "Space", key: "\u2423" };
const ESCAPE_KEY = { title: "Escape", key: "\u238B" };
const KEYS = {
  alt: () => ALT_KEY,
  mod: () => isApple() ? COMMAND_KEY : CONTROL_KEY,
  control: () => CONTROL_KEY,
  ctrl: () => CONTROL_KEY,
  command: () => COMMAND_KEY,
  cmd: () => COMMAND_KEY,
  shift: () => SHIFT_KEY,
  enter: () => ENTER_KEY,
  " ": () => SPACE_KEY,
  space: () => SPACE_KEY,
  escape: () => ESCAPE_KEY,
  esc: () => ESCAPE_KEY
};
function getShortcutKbdFromKeymap(keymap) {
  const keys = keymap.split("-");
  return /* @__PURE__ */ jsx(Fragment, { children: keys.map((key, index) => {
    const lowerKey = key.toLowerCase();
    if (lowerKey in KEYS) {
      return /* @__PURE__ */ jsx(
        ShortcutTooltipKey,
        {
          name: lowerKey
        },
        index
      );
    }
    return /* @__PURE__ */ jsx("span", { children: key }, index);
  }) });
}
const Tooltip = forwardRef(
  ({ children, content, multiline, className, ...props }, forwardedRef) => {
    const { portalContainer } = useLiveblocksUiConfig();
    return /* @__PURE__ */ jsxs(TooltipPrimitive.Root, { disableHoverableContent: true, children: [
      /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { asChild: true, ref: forwardedRef, children }),
      /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
        TooltipPrimitive.Content,
        {
          className: cn(
            "lb-root lb-portal lb-tooltip",
            multiline && "lb-tooltip:multiline",
            className
          ),
          side: "top",
          align: "center",
          sideOffset: FLOATING_ELEMENT_SIDE_OFFSET,
          collisionPadding: FLOATING_ELEMENT_COLLISION_PADDING,
          ...props,
          children: content
        }
      ) })
    ] });
  }
);
const ShortcutTooltip = forwardRef(({ children, content, shortcut, ...props }, forwardedRef) => {
  const shortcutKbd = useMemo(() => {
    return shortcut ? getShortcutKbdFromKeymap(shortcut) : null;
  }, [shortcut]);
  return /* @__PURE__ */ jsx(
    Tooltip,
    {
      content: /* @__PURE__ */ jsxs(Fragment, { children: [
        content,
        shortcutKbd && /* @__PURE__ */ jsx("kbd", { className: "lb-tooltip-shortcut", children: shortcutKbd })
      ] }),
      ...props,
      ref: forwardedRef,
      children
    }
  );
});
function ShortcutTooltipKey({ name, ...props }) {
  const { title, key } = useMemo(() => KEYS[name]?.(), [name]);
  return /* @__PURE__ */ jsx("abbr", { title, ...props, children: key });
}

export { ShortcutTooltip, Tooltip };
//# sourceMappingURL=Tooltip.js.map