@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 _string = require("../../utils/string");
var _Truncate = require("../Truncate");
var _TooltipModule = _interopRequireDefault(require("./Tooltip.module.css"));
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); }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
/* eslint-disable flowtype/no-weak-types */

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
  } = _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 = parseInt(MOTION[motionDurationToken]) === NaN ? 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)]);

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