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

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";
'use strict';

var jsxRuntime = require('react/jsx-runtime');
var TooltipPrimitive = require('@radix-ui/react-tooltip');
var react = require('react');
var config = require('../../config.cjs');
var constants = require('../../constants.cjs');
var classNames = require('../../utils/class-names.cjs');
var isApple = require('../../utils/is-apple.cjs');

function _interopNamespaceDefault(e) {
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(n, k, d.get ? d : {
          enumerable: true,
          get: function () { return e[k]; }
        });
      }
    });
  }
  n.default = e;
  return Object.freeze(n);
}

var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(TooltipPrimitive);


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.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__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
    children: keys.map((key, index) => {
      const lowerKey = key.toLowerCase();
      if (lowerKey in KEYS) {
        return /* @__PURE__ */ jsxRuntime.jsx(ShortcutTooltipKey, {
          name: lowerKey
        }, index);
      }
      return /* @__PURE__ */ jsxRuntime.jsx("span", {
        children: key
      }, index);
    })
  });
}
const Tooltip = react.forwardRef(
  ({ children, content, multiline, className, ...props }, forwardedRef) => {
    const { portalContainer } = config.useLiveblocksUIConfig();
    return /* @__PURE__ */ jsxRuntime.jsxs(TooltipPrimitive__namespace.Root, {
      disableHoverableContent: true,
      children: [
        /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Trigger, {
          asChild: true,
          ref: forwardedRef,
          children
        }),
        /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Portal, {
          container: portalContainer,
          children: /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Content, {
            className: classNames.classNames(
              "lb-root lb-portal lb-tooltip",
              multiline && "lb-tooltip:multiline",
              className
            ),
            side: "top",
            align: "center",
            sideOffset: constants.FLOATING_ELEMENT_SIDE_OFFSET,
            collisionPadding: constants.FLOATING_ELEMENT_COLLISION_PADDING,
            ...props,
            children: content
          })
        })
      ]
    });
  }
);
const ShortcutTooltip = react.forwardRef(({ children, content, shortcut, ...props }, forwardedRef) => {
  const shortcutKbd = react.useMemo(() => {
    return shortcut ? getShortcutKbdFromKeymap(shortcut) : null;
  }, [shortcut]);
  return /* @__PURE__ */ jsxRuntime.jsx(Tooltip, {
    content: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
      children: [
        content,
        shortcutKbd && /* @__PURE__ */ jsxRuntime.jsx("kbd", {
          className: "lb-tooltip-shortcut",
          children: shortcutKbd
        })
      ]
    }),
    ...props,
    ref: forwardedRef,
    children
  });
});
function ShortcutTooltipKey({ name, ...props }) {
  const { title, key } = react.useMemo(() => KEYS[name]?.(), [name]);
  return /* @__PURE__ */ jsxRuntime.jsx("abbr", {
    title,
    ...props,
    children: key
  });
}

Object.defineProperty(exports, 'TooltipProvider', {
  enumerable: true,
  get: function () { return TooltipPrimitive.TooltipProvider; }
});
exports.ShortcutTooltip = ShortcutTooltip;
exports.Tooltip = Tooltip;
//# sourceMappingURL=Tooltip.cjs.map