@wix/design-system/dist/cjs/Tooltip/Tooltip.js

@wix/design-system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _Popover = _interopRequireDefault(require("../Popover"));
var _RawText = _interopRequireDefault(require("../Text/RawText"));
var _constants = require("./constants");
var _ZIndex = require("../common/ZIndex");
var _TooltipSt = require("./Tooltip.st.css.js");
var _useEventCallback = require("../common/useEventCallback/useEventCallback");
var _excluded = ["onShow", "onHide", "size", "className", "placement", "exitDelay", "enterDelay", "moveArrowTo", "appendTo", "flip", "fixed", "maxWidth", "fluid", "moveBy", "disabled", "children", "zIndex", "textAlign", "content", "inline", "aria-describedby", "aria-labelledby", "interactive"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/Tooltip/Tooltip.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(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 (var _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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Tooltip = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
  var _ref$onShow = _ref.onShow,
    onShow = _ref$onShow === void 0 ? () => ({}) : _ref$onShow,
    _ref$onHide = _ref.onHide,
    onHide = _ref$onHide === void 0 ? () => ({}) : _ref$onHide,
    _ref$size = _ref.size,
    size = _ref$size === void 0 ? 'medium' : _ref$size,
    className = _ref.className,
    _ref$placement = _ref.placement,
    placement = _ref$placement === void 0 ? 'top' : _ref$placement,
    _ref$exitDelay = _ref.exitDelay,
    exitDelay = _ref$exitDelay === void 0 ? 0 : _ref$exitDelay,
    _ref$enterDelay = _ref.enterDelay,
    enterDelay = _ref$enterDelay === void 0 ? 0 : _ref$enterDelay,
    moveArrowTo = _ref.moveArrowTo,
    _ref$appendTo = _ref.appendTo,
    appendTo = _ref$appendTo === void 0 ? 'window' : _ref$appendTo,
    _ref$flip = _ref.flip,
    flip = _ref$flip === void 0 ? true : _ref$flip,
    _ref$fixed = _ref.fixed,
    fixed = _ref$fixed === void 0 ? false : _ref$fixed,
    _ref$maxWidth = _ref.maxWidth,
    maxWidth = _ref$maxWidth === void 0 ? 204 : _ref$maxWidth,
    fluid = _ref.fluid,
    moveBy = _ref.moveBy,
    disabled = _ref.disabled,
    children = _ref.children,
    _ref$zIndex = _ref.zIndex,
    zIndex = _ref$zIndex === void 0 ? _ZIndex.ZIndex.tooltip : _ref$zIndex,
    _ref$textAlign = _ref.textAlign,
    textAlign = _ref$textAlign === void 0 ? 'start' : _ref$textAlign,
    _ref$content = _ref.content,
    content = _ref$content === void 0 ? '' : _ref$content,
    inline = _ref.inline,
    ariaDescribedBy = _ref['aria-describedby'],
    ariaLabelledBy = _ref['aria-labelledby'],
    _ref$interactive = _ref.interactive,
    interactive = _ref$interactive === void 0 ? true : _ref$interactive,
    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
  var _useState = (0, _react.useState)(false),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    shown = _useState2[0],
    setShown = _useState2[1];
  var contentRef = (0, _react.useRef)(null);
  var open = (0, _useEventCallback.useEventCallback)(() => {
    setShown(true);
    onShow == null || onShow();
  });
  var close = (0, _useEventCallback.useEventCallback)(() => {
    setShown(false);
    onHide == null || onHide();
  });
  (0, _react.useImperativeHandle)(ref, () => ({
    open,
    close,
    getContentElement: () => contentRef.current
  }));
  var isDisabled = disabled !== null && disabled !== void 0 ? disabled : false;
  var onFocus = (0, _useEventCallback.useEventCallback)((event, handlers) => {
    var focusableHOC = handlers && handlers.focus;
    var target = event.target;
    try {
      if (process.env.NODE_ENV !== 'test' && target instanceof Element && !target.matches(':focus-visible')) {
        handlers == null || handlers.blur();
        return;
      }
    } catch (e) {
      // browser does not support `matches(':focus-visible')` fallback to original focus behavior
    }
    open();
    return focusableHOC ? handlers.focus() : null;
  });
  var onBlur = (0, _useEventCallback.useEventCallback)((_event, handlers) => {
    var focusableHOC = handlers && handlers.blur;
    close();
    return focusableHOC ? handlers.blur() : null;
  });
  var handleKeyDown = (0, _useEventCallback.useEventCallback)(event => {
    if (event.key === 'Escape' && shown) {
      close();
    }
  });
  (0, _react.useEffect)(() => {
    document.addEventListener('keydown', handleKeyDown);
    return () => {
      document.removeEventListener('keydown', handleKeyDown);
    };
  }, [handleKeyDown]);
  var triggerElement = (0, _react.useMemo)(() => {
    if (typeof children === 'string' || !children) {
      return children;
    }
    if (/*#__PURE__*/_react.default.isValidElement(children)) {
      var ariaProps = ariaLabelledBy ? {
        'aria-labelledby': ariaLabelledBy
      } : {
        'aria-describedby': ariaDescribedBy
      };
      return /*#__PURE__*/_react.default.cloneElement(children, _objectSpread(_objectSpread({}, isDisabled ? {} : {
        onFocus,
        onBlur
      }), ariaProps));
    }
    if (typeof children === 'function') {
      return children({
        onFocus,
        onBlur
      });
    }
    return;
  }, [children, isDisabled, onFocus, onBlur, ariaDescribedBy, ariaLabelledBy]);
  var contentElement = (0, _react.useMemo)(() => {
    var textSize = size === 'small' ? 'tiny' : 'small';
    return /*#__PURE__*/_react.default.createElement("div", {
      style: {
        textAlign
      },
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 156,
        columnNumber: 9
      }
    }, typeof content === 'string' ?
    /*#__PURE__*/
    // @ts-ignore
    _react.default.createElement(_RawText.default, {
      dataHook: _constants.dataHooks.tooltipText,
      size: textSize,
      light: true,
      className: _TooltipSt.classes.text,
      renderChildren: _ref2 => {
        var text = _ref2.text;
        return text;
      },
      renderElement: _ref3 => {
        var element = _ref3.element;
        return element;
      },
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 159,
        columnNumber: 13
      }
    }, content) : content);
  }, [content, textAlign, size]);
  return /*#__PURE__*/_react.default.createElement(_Popover.default, (0, _extends2.default)({
    role: "tooltip",
    showArrow: size !== 'small',
    className: (0, _TooltipSt.st)(_TooltipSt.classes.root, {
      size,
      inline
    }, className),
    placement: placement,
    shown: isDisabled ? false : shown,
    onMouseEnter: isDisabled ? undefined : open,
    onMouseLeave: close,
    onClickOutside: close,
    onEscPress: close,
    "data-size": size,
    hideDelay: exitDelay,
    showDelay: enterDelay,
    moveBy: moveBy,
    moveArrowTo: moveArrowTo,
    appendTo: appendTo,
    id: ariaLabelledBy || ariaDescribedBy,
    flip: flip,
    fixed: fixed,
    maxWidth: maxWidth,
    fluid: fluid,
    disableClickOutsideWhenClosed: true,
    zIndex: zIndex,
    interactive: interactive
  }, rest, {
    theme: "dark",
    timeout: _constants.TIMEOUT,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 177,
      columnNumber: 7
    }
  }), /*#__PURE__*/_react.default.createElement(_Popover.default.Element, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 205,
      columnNumber: 9
    }
  }, triggerElement), /*#__PURE__*/_react.default.createElement(_Popover.default.Content, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 206,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    ref: contentRef,
    style: {
      maxWidth
    },
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 207,
      columnNumber: 11
    }
  }, contentElement)));
});
Tooltip.displayName = 'Tooltip';
var _default = exports.default = Tooltip;
//# sourceMappingURL=Tooltip.js.map