@spaced-out/ui-design-system/lib/components/Tooltip/Tooltip.js

Sense UI components library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.getElevationValue = exports.Tooltip = exports.ELEVATION_TYPES = exports.DELAY_MOTION_DURATION_TYPES = void 0;
var React = _interopRequireWildcard(require("react"));
var _react2 = require("@floating-ui/react");
var ELEVATION = _interopRequireWildcard(require("../../styles/variables/_elevation"));
var MOTION = _interopRequireWildcard(require("../../styles/variables/_motion"));
var _space = require("../../styles/variables/_space");
var _classify = require("../../utils/classify");
var _qa = require("../../utils/qa");
var _string = require("../../utils/string");
var _Truncate = require("../Truncate");
var _TooltipModule = _interopRequireDefault(require("./Tooltip.module.css"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const DELAY_MOTION_DURATION_TYPES = exports.DELAY_MOTION_DURATION_TYPES = Object.freeze({
  none: 'none',
  fast: 'fast',
  normal: 'normal',
  slow: 'slow',
  slower: 'slower',
  slowest: 'slowest'
});
const ELEVATION_TYPES = exports.ELEVATION_TYPES = Object.freeze({
  none: 'none',
  card: 'card',
  tooltip: 'tooltip',
  menu: 'menu',
  backdrop: 'backdrop',
  modal: 'modal',
  toast: 'toast'
});
const getElevationValue = elevation => {
  const elevationKey = 'elevation' + (0, _string.capitalize)(elevation);
  return ELEVATION[elevationKey] || elevation;
};
exports.getElevationValue = getElevationValue;
const Tooltip = _ref => {
  let {
    classNames,
    children,
    title,
    body,
    placement = 'top',
    bodyMaxLines = 2,
    titleMaxLines = 1,
    delayMotionDuration = 'none',
    elevation = 'tooltip',
    hidden,
    testId
  } = _ref;
  const [isOpen, setIsOpen] = React.useState(false);
  const {
    refs,
    floatingStyles,
    context,
    strategy
  } = (0, _react2.useFloating)({
    open: isOpen,
    onOpenChange: setIsOpen,
    placement,
    // Make sure the tooltip stays on the screen
    whileElementsMounted: _react2.autoUpdate,
    middleware: [(0, _react2.offset)(parseInt(_space.spaceXXSmall)), (0, _react2.flip)({
      fallbackAxisSideDirection: 'start'
    }), (0, _react2.shift)()]
  });
  const motionDurationToken = 'motionDuration' + (0, _string.capitalize)(delayMotionDuration);
  const hoverDelay = Number.isNaN(parseInt(MOTION[motionDurationToken])) ? 0 : parseInt(MOTION[motionDurationToken]);
  const {
    getReferenceProps,
    getFloatingProps
  } = (0, _react2.useInteractions)([(0, _react2.useHover)(context, {
    delay: {
      open: hoverDelay,
      close: 0
    }
  }), (0, _react2.useFocus)(context), (0, _react2.useRole)(context, {
    role: 'tooltip'
  }), (0, _react2.useDismiss)(context)]);

  // Type guard to ensure children is a ReactElement
  if (! /*#__PURE__*/React.isValidElement(children)) {
    throw new Error('Tooltip children must be a valid React element');
  }
  const childElement = children;

  // Note(Nishant): Preserve the consumer's ref (React 19 safe)
  const mergedRef = (0, _react2.useMergeRefs)([refs.setReference, childElement.ref ?? null]);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/React.cloneElement(childElement, getReferenceProps({
      ...childElement.props,
      ref: mergedRef
    })), isOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.FloatingPortal, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
        children: !hidden && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
          ref: refs.setFloating,
          "data-testid": (0, _qa.generateTestId)({
            base: testId,
            slot: 'tooltip'
          }),
          className: (0, _classify.classify)(_TooltipModule.default.tooltip, classNames?.tooltip),
          style: {
            position: strategy,
            ...floatingStyles,
            '--tooltip-elevation': getElevationValue(elevation)
          },
          ...getFloatingProps(),
          children: [!!title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Truncate.Truncate, {
            line: titleMaxLines,
            wordBreak: "initial",
            testId: (0, _qa.generateTestId)({
              base: testId,
              slot: 'title'
            }),
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
              "data-testid": (0, _qa.generateTestId)({
                base: testId,
                slot: 'title'
              }),
              className: (0, _classify.classify)(_TooltipModule.default.title, classNames?.title),
              children: title
            })
          }), !!body && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Truncate.Truncate, {
            line: bodyMaxLines,
            wordBreak: "initial",
            testId: (0, _qa.generateTestId)({
              base: testId,
              slot: 'body'
            }),
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
              "data-testid": (0, _qa.generateTestId)({
                base: testId,
                slot: 'body'
              }),
              className: (0, _classify.classify)(_TooltipModule.default.body, {
                [_TooltipModule.default.hasTitle]: !!title
              }, classNames?.body),
              children: body
            })
          })]
        })
      })
    })]
  });
};
exports.Tooltip = Tooltip;