@procore/core-react/dist/Tooltip/Tooltip.js

React library of Procore Design Guidelines

function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
var _excluded = ["children", "placement"],
  _excluded2 = ["children", "initialIsVisible", "overlay", "placement", "trigger"];
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) { _defineProperty(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; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return 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); }
import { Help } from '@procore/core-icons';
import React from 'react';
import { OverlayTrigger } from '../OverlayTrigger';
import { useI18nContext } from '../_hooks/I18n';
import { addSubcomponents } from '../_utils/addSubcomponents';
import { StyledContainer, StyledTooltip, StyledTooltipButton } from './Tooltip.styles';
/** For the inline typography without all those button styles */
export var TooltipIconOnlyButton = /*#__PURE__*/React.forwardRef(function TooltipDefaultTrigger(props, ref) {
  var I18n = useI18nContext();
  return /*#__PURE__*/React.createElement(StyledTooltipButton, _extends({
    "aria-label": I18n.t('core.form.field.tooltipHelp')
  }, props, {
    ref: ref
  }), /*#__PURE__*/React.createElement(Help, {
    size: "sm"
  }));
});
var Content = /*#__PURE__*/React.forwardRef(function Content(_ref, ref) {
  var children = _ref.children,
    placement = _ref.placement,
    props = _objectWithoutProperties(_ref, _excluded);
  // For most consistent results: First render an empty aria-live container, then add content.
  // const [showContent, setShowContent] = React.useState(false)
  // React.useEffect(() => {
  //   const id = window.setTimeout(() => setShowContent(true), 10)
  //   return () => window.clearTimeout(id)
  // }, [])

  return /*#__PURE__*/React.createElement(StyledContainer, {
    "aria-live": "polite",
    ref: ref
  }, /*#__PURE__*/React.createElement(StyledTooltip, props, children));
});
var Tooltip_ = /*#__PURE__*/React.forwardRef(function Tooltip(_ref2, ref) {
  var children = _ref2.children,
    _ref2$initialIsVisibl = _ref2.initialIsVisible,
    initialIsVisible = _ref2$initialIsVisibl === void 0 ? false : _ref2$initialIsVisibl,
    overlay = _ref2.overlay,
    _ref2$placement = _ref2.placement,
    placement = _ref2$placement === void 0 ? 'top' : _ref2$placement,
    _ref2$trigger = _ref2.trigger,
    trigger = _ref2$trigger === void 0 ? ['hover', 'focus'] : _ref2$trigger,
    props = _objectWithoutProperties(_ref2, _excluded2);
  var overlayNode = /*#__PURE__*/React.isValidElement(overlay) ? /*#__PURE__*/React.cloneElement(overlay, {
    placement: placement
  }) : /*#__PURE__*/React.createElement(Content, null, overlay);
  return /*#__PURE__*/React.createElement(OverlayTrigger, _objectSpread(_objectSpread({
    role: 'tooltip',
    passA11yPropsToOverlay: true
  }, props), {}, {
    initialIsVisible: initialIsVisible,
    overlay: overlayNode,
    placement: placement,
    ref: ref,
    restoreFocusOnHide: false,
    trigger: trigger,
    shrinkOverlay: true,
    arrow: true
  }), children);
});
Tooltip_.displayName = 'Tooltip';
Content.displayName = 'Tooltip.Content';

/**

 We use tooltips to display additional descriptive information about an element
 or item to the user. For example, we could use them to explain a specific term
 or phrase, to denote the specific format required (e.g. mm/dd/yyy), or to
 clarify certain information (e.g. why a button is disabled).

 They can be displayed by hover or focus of an focusable element in the product or by
 hovering or focusing an icon button next to an element. Provide a focusable child.

 @since 10.19.0

 @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-tooltip--demo)

 @see [Design Guidelines](https://design.procore.com/tooltip)

 */
export var Tooltip = addSubcomponents({
  Content: Content
}, Tooltip_);
//# sourceMappingURL=Tooltip.js.map