@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 { classNames } from '../../utils/class-names.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: classNames(
              "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