@elliemae/ds-tooltip 2.0.0-alpha.9 → 2.0.0-next.12

package/cjs/v1/DSTooltip.js

@@ -2,17 +2,20 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _jsx = require('@babel/runtime/helpers/jsx');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 require('react');
 var reactDesc = require('react-desc');
 var dsClassnames = require('@elliemae/ds-classnames');
-var getComponentFromProps = require('@elliemae/ds-utilities/getComponentFromProps');
+var dsUtilities = require('@elliemae/ds-utilities');
 var constants = require('@elliemae/ds-shared/constants');
 var DSPopper = require('@elliemae/ds-popper');
-var interaction = require('@elliemae/ds-popper/interaction');
-var positions = require('@elliemae/ds-popper/positions');
 var TooltipType = require('./TooltipType.js');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -21,7 +24,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
-var getComponentFromProps__default = /*#__PURE__*/_interopDefaultLegacy(getComponentFromProps);
 var DSPopper__default = /*#__PURE__*/_interopDefaultLegacy(DSPopper);
 
 const _excluded = ["containerProps", "innerRef", "placement", "title", "delayClose", "delayOpen", "interactionType", "triggerComponent", "className", "isOpen", "onOpen", "springAnimationComponent", "tooltipType", "showArrow", "zIndex"];
@@ -69,7 +71,7 @@ const DSTooltip = _ref => {
   return /*#__PURE__*/_jsx__default["default"](DSPopper__default["default"], {
     blockName: tooltipBlockName,
     contentComponent: /*#__PURE__*/jsxRuntime.jsx(TooltipContainer, _objectSpread(_objectSpread(_objectSpread({}, containerProps), otherTooltipProps), {}, {
-      className: `tooltip-container--${tooltipType} ${className}`,
+      className: "tooltip-container--".concat(tooltipType, " ").concat(className),
       innerRef: innerRef,
       children: Content
     })),
@@ -81,21 +83,19 @@ const DSTooltip = _ref => {
     placement: placement,
     showArrow: tooltipType === TooltipType.TooltipType.TOOLTIP ? showArrow : false,
     springAnimationComponent: springAnimationComponent,
-    triggerComponent: getComponentFromProps__default["default"](triggerComponent),
+    triggerComponent: dsUtilities.getComponentFromProps(triggerComponent),
     zIndex: zIndex
   });
 };
 
 const tooltipProps = {
   containerProps: reactDesc.PropTypes.object.description('Set of Properties attached to the main container'),
-  placement: reactDesc.PropTypes.oneOf(positions.positions).description('Tooltip position').defaultValue(DSPopper.PopperPositions.TOP),
+  placement: reactDesc.PropTypes.oneOf(DSPopper.positions).description('Tooltip position').defaultValue(DSPopper.PopperPositions.TOP),
   title: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.element]).description('Tooltip content').isRequired,
   delayClose: reactDesc.PropTypes.string.description('Delay to close the tooltip').defaultValue(constants.DEFAULT_DELAY_CLOSE),
   delayOpen: reactDesc.PropTypes.string.description('Delay to open the tooltip ').defaultValue(constants.DEFAULT_DELAY_OPEN),
-  interactionType: reactDesc.PropTypes.oneOf(interaction.interactions).description('A type indicating how to open/close the tooltip').defaultValue(DSPopper.PopperInteractions.HOVER),
-  triggerComponent: reactDesc.PropTypes.element.description(`The component that will open/close the tooltip. 
-    Cannot be used with disabled elements. 
-    https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled`).isRequired,
+  interactionType: reactDesc.PropTypes.oneOf(DSPopper.interactions).description('A type indicating how to open/close the tooltip').defaultValue(DSPopper.PopperInteractions.HOVER),
+  triggerComponent: reactDesc.PropTypes.element.description("The component that will open/close the tooltip. \n    Cannot be used with disabled elements. \n    https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled").isRequired,
   isOpen: reactDesc.PropTypes.bool.description('Whether the tooltip is visible or not').defaultValue(undefined),
   onOpen: reactDesc.PropTypes.func.description('Handler when the tooltip opens'),
   springAnimationComponent: reactDesc.PropTypes.element.description('Spring animation component'),

package/cjs/v2/DSTooltip.js

@@ -4,6 +4,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var react = require('react');
 var reactDesc = require('react-desc');
 var DSPortal = require('@elliemae/ds-portal');
@@ -27,23 +33,24 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-const DSTooltipV2 = ({
-  containerProps = {},
-  innerRef,
-  placement = tooltipPositions.tooltipPositions.BOTTOM,
-  title = '',
-  delayClose = constants.DEFAULT_DELAY_CLOSE,
-  delayOpen = constants.DEFAULT_DELAY_OPEN,
-  triggerComponent = null,
-  className = '',
-  getIsOpen = () => null,
-  onOpen = () => null,
-  tooltipType = TooltipType.TooltipType.TOOLTIP,
-  showArrow = true,
-  offset = [0, 14],
-  zIndex = 10,
-  extraModifiers = {}
-}) => {
+const DSTooltipV2 = _ref => {
+  let {
+    containerProps = {},
+    innerRef,
+    placement = tooltipPositions.tooltipPositions.BOTTOM,
+    title = '',
+    delayClose = constants.DEFAULT_DELAY_CLOSE,
+    delayOpen = constants.DEFAULT_DELAY_OPEN,
+    triggerComponent = null,
+    className = '',
+    getIsOpen = () => null,
+    onOpen = () => null,
+    tooltipType = TooltipType.TooltipType.TOOLTIP,
+    showArrow = true,
+    offset = [0, 14],
+    zIndex = 10,
+    extraModifiers = {}
+  } = _ref;
   const [showTooltip, setShowTooltip] = react.useState(false);
   const [isAnimating, setIsAnimating] = react.useState(false);
   const [referenceElement, setReferenceElement] = react.useState(triggerComponent);

package/cjs/v2/DSTooltipArrow.js

@@ -13,24 +13,27 @@ var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
 var _svg;
 
-const DSTooltipArrow = ({
-  placement,
-  style,
-  arrowElementRef
-}) => /*#__PURE__*/jsxRuntime.jsx(styles.StyledTooltipArrow, {
-  "data-placement": placement,
-  style: style,
-  ref: arrowElementRef,
-  "data-testid": "ds-tooltip-arrow",
-  children: _svg || (_svg = /*#__PURE__*/_jsx__default["default"]("svg", {
-    viewBox: "0 0 30 30"
-  }, void 0, /*#__PURE__*/_jsx__default["default"]("path", {
-    className: "stroke",
-    d: "M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26 C26.7,29,24.6,28.1,23.7,27.1z"
-  }), /*#__PURE__*/_jsx__default["default"]("path", {
-    className: "fill",
-    d: "M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z"
-  })))
-}, "popper-arrow");
+const DSTooltipArrow = _ref => {
+  let {
+    placement,
+    style,
+    arrowElementRef
+  } = _ref;
+  return /*#__PURE__*/jsxRuntime.jsx(styles.StyledTooltipArrow, {
+    "data-placement": placement,
+    style: style,
+    ref: arrowElementRef,
+    "data-testid": "ds-tooltip-arrow",
+    children: _svg || (_svg = /*#__PURE__*/_jsx__default["default"]("svg", {
+      viewBox: "0 0 30 30"
+    }, void 0, /*#__PURE__*/_jsx__default["default"]("path", {
+      className: "stroke",
+      d: "M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26 C26.7,29,24.6,28.1,23.7,27.1z"
+    }), /*#__PURE__*/_jsx__default["default"]("path", {
+      className: "fill",
+      d: "M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z"
+    })))
+  }, "popper-arrow");
+};
 
 exports.DSTooltipArrow = DSTooltipArrow;

package/cjs/v2/propTypes.js

@@ -13,9 +13,7 @@ const tooltipV2Props = {
   title: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.element]).description('Tooltip content').isRequired,
   delayClose: reactDesc.PropTypes.number.description('Delay to close the tooltip').defaultValue(constants.DEFAULT_DELAY_CLOSE),
   delayOpen: reactDesc.PropTypes.number.description('Delay to open the tooltip ').defaultValue(constants.DEFAULT_DELAY_OPEN),
-  triggerComponent: reactDesc.PropTypes.element.description(`The component that will open/close the tooltip. 
-      Cannot be used with disabled elements. 
-      https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled`).isRequired,
+  triggerComponent: reactDesc.PropTypes.element.description("The component that will open/close the tooltip. \n      Cannot be used with disabled elements. \n      https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled").isRequired,
   getIsOpen: reactDesc.PropTypes.func.description('Whether the tooltip is visible or not'),
   onOpen: reactDesc.PropTypes.func.description('Callback when the tooltip opens'),
   showArrow: reactDesc.PropTypes.bool.description('Whether to show an arrow or not').defaultValue(true),

package/cjs/v2/styles.js

@@ -2,54 +2,49 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var styled = require('styled-components');
 var dsSystem = require('@elliemae/ds-system');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-const showAnimation = dsSystem.kfrm`
-    from {
-      opacity: 0;
-      transform: scale(0.8);
-    }
-
-    to {
-      opacity: 1;
-      transform: scale(1);
-      visibility: visible;
-    }
-`;
-const hideAnimation = dsSystem.kfrm`
-    0% {
-      opacity: 1;
-      transform: scale(1);
-    }
-
-    100% {
-      opacity: 0;
-      transform: scale(0.8);
-    }
-`;
+var _templateObject, _templateObject2, _templateObject3;
+const showAnimation = dsSystem.kfrm(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n    from {\n      opacity: 0;\n      transform: scale(0.8);\n    }\n\n    to {\n      opacity: 1;\n      transform: scale(1);\n      visibility: visible;\n    }\n"])));
+const hideAnimation = dsSystem.kfrm(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n    0% {\n      opacity: 1;\n      transform: scale(1);\n    }\n\n    100% {\n      opacity: 0;\n      transform: scale(0.8);\n    }\n"])));
 const StyledTooltipContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-1dtjf9j-0"
 })(["&[data-popper-reference-hidden='true']{display:none;pointer-events:none;}"]);
 const StyledAnimatedTooltip = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-1dtjf9j-1"
-})(["text-align:center;min-width:", ";max-width:250px;min-height:24px;padding:", ";position:relative;background-color:white;border-radius:2px;font-size:13px;color:", ";box-shadow:0 1px 5px 0 rgb(0 0 0 / 13%),0 2px 4px 0 rgb(0 0 0 / 20%);filter:drop-shadow(0 4px 8px rgba(0,0,0,0.2));visibility:", ";", " transition:visibility 0.1s ease-in;"], ({
-  theme
-}) => theme.space.l, ({
-  theme
-}) => `${theme.space.xxxs} ${theme.space.xs}`, ({
-  theme
-}) => theme.colors.neutral[600], ({
-  showTooltip
-}) => showTooltip ? 'visible' : 'hidden', ({
-  showTooltip
-}) => dsSystem.css`
-      animation: ${showTooltip ? showAnimation : hideAnimation} 0.1s ease-in;
-    `);
+})(["text-align:center;min-width:", ";max-width:250px;min-height:24px;padding:", ";position:relative;background-color:white;border-radius:2px;font-size:13px;color:", ";box-shadow:0 1px 5px 0 rgb(0 0 0 / 13%),0 2px 4px 0 rgb(0 0 0 / 20%);filter:drop-shadow(0 4px 8px rgba(0,0,0,0.2));visibility:", ";", " transition:visibility 0.1s ease-in;"], _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.space.l;
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return "".concat(theme.space.xxxs, " ").concat(theme.space.xs);
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.colors.neutral[600];
+}, _ref4 => {
+  let {
+    showTooltip
+  } = _ref4;
+  return showTooltip ? 'visible' : 'hidden';
+}, _ref5 => {
+  let {
+    showTooltip
+  } = _ref5;
+  return dsSystem.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n      animation: ", " 0.1s ease-in;\n    "])), showTooltip ? showAnimation : hideAnimation);
+});
 const StyledTriggerComponentContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-1dtjf9j-2"
 })(["display:inline-block;"]);

package/cjs/v2/utils/setMultipleRefs.js

@@ -2,7 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const setMultipleRefs = (...refs) => {
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+
+const setMultipleRefs = function () {
+  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
+    refs[_key] = arguments[_key];
+  }
+
   const filteredRefs = refs.filter(Boolean);
   if (!filteredRefs.length) return null;
   if (filteredRefs.length === 0) return filteredRefs[0];

package/cjs/v3/config/useWithDefaultProps.js

@@ -10,7 +10,8 @@ const noop = () => {};
 const defaultProps = {
   onOpen: noop,
   onClose: noop,
-  id: ''
+  id: '',
+  textAlign: 'left'
 };
 const useWithDefaultProps = props => dsPropsHelpers.useMemoMergePropsWithDefault(props, defaultProps);
 

package/cjs/v3/index.js

@@ -5,6 +5,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _jsx = require('@babel/runtime/helpers/jsx');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var react = require('react');
 var dsPopperjs = require('@elliemae/ds-popperjs');
 var reactDesc = require('react-desc');
@@ -20,12 +26,21 @@ var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_definePropert
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
 
-const _excluded = ["text", "children", "onOpen", "onClose", "id"];
+var _StyledMouseOverDetec;
+
+const _excluded = ["text", "children", "onOpen", "onClose", "id", "textAlign"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
+const useGlobalKeyboardListener = func => {
+  react.useEffect(() => {
+    document.addEventListener('keydown', func);
+    return () => document.removeEventListener('keydown', func);
+  }, [func]);
+};
+
 const DSTooltipV3 = props => {
   const _useWithDefaultProps = useWithDefaultProps.useWithDefaultProps(props),
         {
@@ -33,10 +48,14 @@ const DSTooltipV3 = props => {
     children,
     onOpen,
     onClose,
-    id
+    id,
+    textAlign
   } = _useWithDefaultProps,
         extraPopperJsProps = _objectWithoutProperties__default["default"](_useWithDefaultProps, _excluded);
 
+  const [isFocused, setIsFocused] = react.useState(false);
+  const [isHover, setIsHover] = react.useState(false);
+  const [latestOpenInteraction, setLatestOpenInteraction] = react.useState('');
   const [referenceElement, setReferenceElement] = react.useState();
   const [showPopover, setShowPopover] = react.useState(false);
   const showTooltip = react.useCallback(() => {
@@ -47,29 +66,57 @@ const DSTooltipV3 = props => {
     setShowPopover(false);
     onClose();
   }, [onClose]);
-  const handleEscKey = react.useCallback(({
-    key
-  }) => {
+  const onFocus = react.useCallback(() => {
+    setIsFocused(true);
+
+    if (!showPopover) {
+      showTooltip();
+      setLatestOpenInteraction('onFocus');
+    }
+  }, [showPopover, showTooltip]);
+  const onBlur = react.useCallback(() => {
+    setIsFocused(false);
+    if (!isHover || latestOpenInteraction === 'onFocus') hideTooltip();
+  }, [hideTooltip, isHover, latestOpenInteraction]);
+  const onMouseEnter = react.useCallback(() => {
+    setIsHover(true);
+
+    if (!showPopover) {
+      showTooltip();
+      setLatestOpenInteraction('onMouseEnter');
+    }
+  }, [showPopover, showTooltip]);
+  const onMouseLeave = react.useCallback(() => {
+    setIsHover(false);
+    if (!isFocused || latestOpenInteraction === 'onMouseEnter') hideTooltip();
+  }, [hideTooltip, isFocused, latestOpenInteraction]);
+  const handleEscKey = react.useCallback(_ref => {
+    let {
+      key
+    } = _ref;
     if (key === 'Escape') hideTooltip();
   }, [hideTooltip]);
-  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/jsxRuntime.jsx(dsPopperjs.DSPopperJS, _objectSpread(_objectSpread({
-      referenceElement: referenceElement,
-      showPopover: showPopover
-    }, extraPopperJsProps), {}, {
-      children: /*#__PURE__*/_jsx__default["default"]("div", {
-        "data-testid": `${TooltipV3DatatestId.TooltipV3DatatestId.TOOLTIP_TEXT_WRAPPER}${id !== '' ? `_${id}` : ''}`
-      }, void 0, /*#__PURE__*/_jsx__default["default"](styleds.StyledTooltipContainer, {}, void 0, /*#__PURE__*/_jsx__default["default"](styleds.StyledTooltipText, {}, void 0, text)))
-    })), /*#__PURE__*/jsxRuntime.jsx("div", {
-      onMouseOver: showTooltip,
-      onFocus: showTooltip,
-      onMouseOut: hideTooltip,
-      onBlur: hideTooltip,
-      onKeyDown: handleEscKey,
+  useGlobalKeyboardListener(handleEscKey);
+  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: /*#__PURE__*/jsxRuntime.jsxs(styleds.StyledTriggerWrapper, {
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave,
+      onFocus: onFocus,
+      onBlur: onBlur,
       ref: setReferenceElement,
-      "data-testid": `${TooltipV3DatatestId.TooltipV3DatatestId.TRIGGER_WRAPPER}${id !== '' ? `_${id}` : ''}`,
-      children: children
-    })]
+      "data-testid": "".concat(TooltipV3DatatestId.TooltipV3DatatestId.TRIGGER_WRAPPER).concat(id !== '' ? "_".concat(id) : ''),
+      children: [/*#__PURE__*/jsxRuntime.jsx(dsPopperjs.DSPopperJS, _objectSpread(_objectSpread({
+        referenceElement: referenceElement,
+        showPopover: showPopover,
+        withoutPortal: true
+      }, extraPopperJsProps), {}, {
+        children: /*#__PURE__*/_jsx__default["default"]("div", {
+          "data-testid": "".concat(TooltipV3DatatestId.TooltipV3DatatestId.TOOLTIP_TEXT_WRAPPER).concat(id !== '' ? "_".concat(id) : '')
+        }, void 0, /*#__PURE__*/_jsx__default["default"](styleds.StyledTooltipContainer, {}, void 0, /*#__PURE__*/_jsx__default["default"](styleds.StyledTooltipText, {
+          textAlign: textAlign
+        }, void 0, text), _StyledMouseOverDetec || (_StyledMouseOverDetec = /*#__PURE__*/_jsx__default["default"](styleds.StyledMouseOverDetectionBox, {}))))
+      })), children]
+    })
   });
 };
 

package/cjs/v3/propsTypes.js

@@ -6,9 +6,14 @@ var reactDesc = require('react-desc');
 
 const dsTooltipPropTypes = {
   /**
-   * Tooltip text to be displayed on hover
+   * Tooltip text to be displayed on hover/focus
    */
-  text: reactDesc.PropTypes.string.description('Tooltip text to be displayed on hover').isRequired,
+  text: reactDesc.PropTypes.string.description('Tooltip text to be displayed on hover/focus').isRequired,
+
+  /**
+   * Tooltip text alignment
+   */
+  textAlign: reactDesc.PropTypes.oneOf(['left', 'right', 'center', 'justify', 'initial', 'inherit']).description('Tooltip text alignment').defaultValue('left'),
 
   /**
    * Element to tie the tooltip to, must be a single node
@@ -31,6 +36,16 @@ const dsTooltipPropTypes = {
    */
   boundaryElement: reactDesc.PropTypes.element.description('Bounding element to calculate upon, defaults to "clippingParents",' + 'which are the scrolling containers that may cause element to be partially or fully cut off').defaultValue(undefined),
 
+  /**
+   *  Whether or not the popper context menu should be animated
+   */
+  withoutAnimation: reactDesc.PropTypes.bool.description('Whether or not the popper context menu should be animated').defaultValue(false),
+
+  /**
+   *  Popper context menus Animation duration in ms
+   */
+  animationDuration: reactDesc.PropTypes.number.description('Popper context menus Animation duration in ms').defaultValue(100),
+
   /**
    *  When using portal, the container in which to append the DOM content, defaults to document body
    */

package/cjs/v3/styleds.js

@@ -10,16 +10,38 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 const StyledTooltipContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-18a4gem-0"
-})(["text-align:center;min-width:", ";max-width:250px;min-height:24px;padding:", ";position:relative;background-color:white;border-radius:2px;font-size:13px;color:", ";box-shadow:0 1px 5px 0 rgb(0 0 0 / 13%),0 2px 4px 0 rgb(0 0 0 / 20%);filter:drop-shadow(0 4px 8px rgba(0,0,0,0.2));transition:visibility 0.1s ease-in;"], ({
-  theme
-}) => theme.space.l, ({
-  theme
-}) => `${theme.space.xxxs} ${theme.space.xs}`, ({
-  theme
-}) => theme.colors.neutral[600]);
+})(["text-align:center;min-width:", ";max-width:250px;min-height:30px;display:grid;align-items:center;padding:", ";position:relative;background-color:white;border-radius:2px;font-size:13px;color:", ";"], _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.space.l;
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return "".concat(theme.space.xxxs, " ").concat(theme.space.xs);
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.colors.neutral[600];
+});
 const StyledTooltipText = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-18a4gem-1"
-})(["white-space:normal;word-wrap:break-word;display:inline-block;"]);
+})(["white-space:normal;word-wrap:break-word;display:inline-block;text-align:", ";"], _ref4 => {
+  let {
+    textAlign
+  } = _ref4;
+  return textAlign;
+});
+const StyledMouseOverDetectionBox = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-18a4gem-2"
+})(["position:absolute;top:-15px;right:-15px;width:calc(100% + 30px);height:calc(100% + 30px);z-index:-1;"]);
+const StyledTriggerWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-18a4gem-3"
+})(["display:inline-block;width:100%;"]);
 
+exports.StyledMouseOverDetectionBox = StyledMouseOverDetectionBox;
 exports.StyledTooltipContainer = StyledTooltipContainer;
 exports.StyledTooltipText = StyledTooltipText;
+exports.StyledTriggerWrapper = StyledTriggerWrapper;

package/esm/v1/DSTooltip.js

@@ -1,14 +1,17 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import 'react';
 import { PropTypes, describe } from 'react-desc';
 import { aggregatedClasses, convertPropToCssClassName } from '@elliemae/ds-classnames';
-import getComponentFromProps from '@elliemae/ds-utilities/getComponentFromProps';
+import { getComponentFromProps } from '@elliemae/ds-utilities';
 import { DEFAULT_DELAY_CLOSE, DEFAULT_DELAY_OPEN } from '@elliemae/ds-shared/constants';
-import DSPopper, { PopperPositions, PopperInteractions } from '@elliemae/ds-popper';
-import { interactions } from '@elliemae/ds-popper/interaction';
-import { positions } from '@elliemae/ds-popper/positions';
+import DSPopper, { positions, PopperPositions, interactions, PopperInteractions } from '@elliemae/ds-popper';
 import { TooltipType } from './TooltipType.js';
 import { jsx } from 'react/jsx-runtime';
 
@@ -57,7 +60,7 @@ const DSTooltip = _ref => {
   return /*#__PURE__*/_jsx(DSPopper, {
     blockName: tooltipBlockName,
     contentComponent: /*#__PURE__*/jsx(TooltipContainer, _objectSpread(_objectSpread(_objectSpread({}, containerProps), otherTooltipProps), {}, {
-      className: `tooltip-container--${tooltipType} ${className}`,
+      className: "tooltip-container--".concat(tooltipType, " ").concat(className),
       innerRef: innerRef,
       children: Content
     })),
@@ -81,9 +84,7 @@ const tooltipProps = {
   delayClose: PropTypes.string.description('Delay to close the tooltip').defaultValue(DEFAULT_DELAY_CLOSE),
   delayOpen: PropTypes.string.description('Delay to open the tooltip ').defaultValue(DEFAULT_DELAY_OPEN),
   interactionType: PropTypes.oneOf(interactions).description('A type indicating how to open/close the tooltip').defaultValue(PopperInteractions.HOVER),
-  triggerComponent: PropTypes.element.description(`The component that will open/close the tooltip. 
-    Cannot be used with disabled elements. 
-    https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled`).isRequired,
+  triggerComponent: PropTypes.element.description("The component that will open/close the tooltip. \n    Cannot be used with disabled elements. \n    https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled").isRequired,
   isOpen: PropTypes.bool.description('Whether the tooltip is visible or not').defaultValue(undefined),
   onOpen: PropTypes.func.description('Handler when the tooltip opens'),
   springAnimationComponent: PropTypes.element.description('Spring animation component'),

package/esm/v2/DSTooltip.js

@@ -1,5 +1,11 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { useState, useRef, useCallback, useEffect } from 'react';
 import { describe } from 'react-desc';
 import DSPortal from '@elliemae/ds-portal';
@@ -17,23 +23,24 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-const DSTooltipV2 = ({
-  containerProps = {},
-  innerRef,
-  placement = tooltipPositions.BOTTOM,
-  title = '',
-  delayClose = DEFAULT_DELAY_CLOSE,
-  delayOpen = DEFAULT_DELAY_OPEN,
-  triggerComponent = null,
-  className = '',
-  getIsOpen = () => null,
-  onOpen = () => null,
-  tooltipType = TooltipType.TOOLTIP,
-  showArrow = true,
-  offset = [0, 14],
-  zIndex = 10,
-  extraModifiers = {}
-}) => {
+const DSTooltipV2 = _ref => {
+  let {
+    containerProps = {},
+    innerRef,
+    placement = tooltipPositions.BOTTOM,
+    title = '',
+    delayClose = DEFAULT_DELAY_CLOSE,
+    delayOpen = DEFAULT_DELAY_OPEN,
+    triggerComponent = null,
+    className = '',
+    getIsOpen = () => null,
+    onOpen = () => null,
+    tooltipType = TooltipType.TOOLTIP,
+    showArrow = true,
+    offset = [0, 14],
+    zIndex = 10,
+    extraModifiers = {}
+  } = _ref;
   const [showTooltip, setShowTooltip] = useState(false);
   const [isAnimating, setIsAnimating] = useState(false);
   const [referenceElement, setReferenceElement] = useState(triggerComponent);

package/esm/v2/DSTooltipArrow.js

@@ -5,24 +5,27 @@ import { jsx } from 'react/jsx-runtime';
 
 var _svg;
 
-const DSTooltipArrow = ({
-  placement,
-  style,
-  arrowElementRef
-}) => /*#__PURE__*/jsx(StyledTooltipArrow, {
-  "data-placement": placement,
-  style: style,
-  ref: arrowElementRef,
-  "data-testid": "ds-tooltip-arrow",
-  children: _svg || (_svg = /*#__PURE__*/_jsx("svg", {
-    viewBox: "0 0 30 30"
-  }, void 0, /*#__PURE__*/_jsx("path", {
-    className: "stroke",
-    d: "M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26 C26.7,29,24.6,28.1,23.7,27.1z"
-  }), /*#__PURE__*/_jsx("path", {
-    className: "fill",
-    d: "M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z"
-  })))
-}, "popper-arrow");
+const DSTooltipArrow = _ref => {
+  let {
+    placement,
+    style,
+    arrowElementRef
+  } = _ref;
+  return /*#__PURE__*/jsx(StyledTooltipArrow, {
+    "data-placement": placement,
+    style: style,
+    ref: arrowElementRef,
+    "data-testid": "ds-tooltip-arrow",
+    children: _svg || (_svg = /*#__PURE__*/_jsx("svg", {
+      viewBox: "0 0 30 30"
+    }, void 0, /*#__PURE__*/_jsx("path", {
+      className: "stroke",
+      d: "M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26 C26.7,29,24.6,28.1,23.7,27.1z"
+    }), /*#__PURE__*/_jsx("path", {
+      className: "fill",
+      d: "M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z"
+    })))
+  }, "popper-arrow");
+};
 
 export { DSTooltipArrow };

package/esm/v2/propTypes.js

@@ -9,9 +9,7 @@ const tooltipV2Props = {
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).description('Tooltip content').isRequired,
   delayClose: PropTypes.number.description('Delay to close the tooltip').defaultValue(DEFAULT_DELAY_CLOSE),
   delayOpen: PropTypes.number.description('Delay to open the tooltip ').defaultValue(DEFAULT_DELAY_OPEN),
-  triggerComponent: PropTypes.element.description(`The component that will open/close the tooltip. 
-      Cannot be used with disabled elements. 
-      https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled`).isRequired,
+  triggerComponent: PropTypes.element.description("The component that will open/close the tooltip. \n      Cannot be used with disabled elements. \n      https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled").isRequired,
   getIsOpen: PropTypes.func.description('Whether the tooltip is visible or not'),
   onOpen: PropTypes.func.description('Callback when the tooltip opens'),
   showArrow: PropTypes.bool.description('Whether to show an arrow or not').defaultValue(true),

package/esm/v2/styles.js

@@ -1,47 +1,41 @@
+import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
 import styled from 'styled-components';
 import { kfrm, css } from '@elliemae/ds-system';
 
-const showAnimation = kfrm`
-    from {
-      opacity: 0;
-      transform: scale(0.8);
-    }
-
-    to {
-      opacity: 1;
-      transform: scale(1);
-      visibility: visible;
-    }
-`;
-const hideAnimation = kfrm`
-    0% {
-      opacity: 1;
-      transform: scale(1);
-    }
-
-    100% {
-      opacity: 0;
-      transform: scale(0.8);
-    }
-`;
+var _templateObject, _templateObject2, _templateObject3;
+const showAnimation = kfrm(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    from {\n      opacity: 0;\n      transform: scale(0.8);\n    }\n\n    to {\n      opacity: 1;\n      transform: scale(1);\n      visibility: visible;\n    }\n"])));
+const hideAnimation = kfrm(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    0% {\n      opacity: 1;\n      transform: scale(1);\n    }\n\n    100% {\n      opacity: 0;\n      transform: scale(0.8);\n    }\n"])));
 const StyledTooltipContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1dtjf9j-0"
 })(["&[data-popper-reference-hidden='true']{display:none;pointer-events:none;}"]);
 const StyledAnimatedTooltip = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1dtjf9j-1"
-})(["text-align:center;min-width:", ";max-width:250px;min-height:24px;padding:", ";position:relative;background-color:white;border-radius:2px;font-size:13px;color:", ";box-shadow:0 1px 5px 0 rgb(0 0 0 / 13%),0 2px 4px 0 rgb(0 0 0 / 20%);filter:drop-shadow(0 4px 8px rgba(0,0,0,0.2));visibility:", ";", " transition:visibility 0.1s ease-in;"], ({
-  theme
-}) => theme.space.l, ({
-  theme
-}) => `${theme.space.xxxs} ${theme.space.xs}`, ({
-  theme
-}) => theme.colors.neutral[600], ({
-  showTooltip
-}) => showTooltip ? 'visible' : 'hidden', ({
-  showTooltip
-}) => css`
-      animation: ${showTooltip ? showAnimation : hideAnimation} 0.1s ease-in;
-    `);
+})(["text-align:center;min-width:", ";max-width:250px;min-height:24px;padding:", ";position:relative;background-color:white;border-radius:2px;font-size:13px;color:", ";box-shadow:0 1px 5px 0 rgb(0 0 0 / 13%),0 2px 4px 0 rgb(0 0 0 / 20%);filter:drop-shadow(0 4px 8px rgba(0,0,0,0.2));visibility:", ";", " transition:visibility 0.1s ease-in;"], _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.space.l;
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return "".concat(theme.space.xxxs, " ").concat(theme.space.xs);
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.colors.neutral[600];
+}, _ref4 => {
+  let {
+    showTooltip
+  } = _ref4;
+  return showTooltip ? 'visible' : 'hidden';
+}, _ref5 => {
+  let {
+    showTooltip
+  } = _ref5;
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      animation: ", " 0.1s ease-in;\n    "])), showTooltip ? showAnimation : hideAnimation);
+});
 const StyledTriggerComponentContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1dtjf9j-2"
 })(["display:inline-block;"]);

package/esm/v2/utils/setMultipleRefs.js

@@ -1,4 +1,14 @@
-const setMultipleRefs = (...refs) => {
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+
+const setMultipleRefs = function () {
+  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
+    refs[_key] = arguments[_key];
+  }
+
   const filteredRefs = refs.filter(Boolean);
   if (!filteredRefs.length) return null;
   if (filteredRefs.length === 0) return filteredRefs[0];

package/esm/v3/config/useWithDefaultProps.js

@@ -6,7 +6,8 @@ const noop = () => {};
 const defaultProps = {
   onOpen: noop,
   onClose: noop,
-  id: ''
+  id: '',
+  textAlign: 'left'
 };
 const useWithDefaultProps = props => useMemoMergePropsWithDefault(props, defaultProps);
 

package/esm/v3/index.js

@@ -1,21 +1,36 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import { useState, useCallback } from 'react';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import { useState, useCallback, useEffect } from 'react';
 import { DSPopperJS } from '@elliemae/ds-popperjs';
 import { describe } from 'react-desc';
 import { dsTooltipPropTypes } from './propsTypes.js';
 import { useWithDefaultProps } from './config/useWithDefaultProps.js';
 import { TooltipV3DatatestId } from './TooltipV3DatatestId.js';
-import { StyledTooltipContainer, StyledTooltipText } from './styleds.js';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { StyledTriggerWrapper, StyledTooltipContainer, StyledTooltipText, StyledMouseOverDetectionBox } from './styleds.js';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 
-const _excluded = ["text", "children", "onOpen", "onClose", "id"];
+var _StyledMouseOverDetec;
+
+const _excluded = ["text", "children", "onOpen", "onClose", "id", "textAlign"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
+const useGlobalKeyboardListener = func => {
+  useEffect(() => {
+    document.addEventListener('keydown', func);
+    return () => document.removeEventListener('keydown', func);
+  }, [func]);
+};
+
 const DSTooltipV3 = props => {
   const _useWithDefaultProps = useWithDefaultProps(props),
         {
@@ -23,10 +38,14 @@ const DSTooltipV3 = props => {
     children,
     onOpen,
     onClose,
-    id
+    id,
+    textAlign
   } = _useWithDefaultProps,
         extraPopperJsProps = _objectWithoutProperties(_useWithDefaultProps, _excluded);
 
+  const [isFocused, setIsFocused] = useState(false);
+  const [isHover, setIsHover] = useState(false);
+  const [latestOpenInteraction, setLatestOpenInteraction] = useState('');
   const [referenceElement, setReferenceElement] = useState();
   const [showPopover, setShowPopover] = useState(false);
   const showTooltip = useCallback(() => {
@@ -37,29 +56,57 @@ const DSTooltipV3 = props => {
     setShowPopover(false);
     onClose();
   }, [onClose]);
-  const handleEscKey = useCallback(({
-    key
-  }) => {
+  const onFocus = useCallback(() => {
+    setIsFocused(true);
+
+    if (!showPopover) {
+      showTooltip();
+      setLatestOpenInteraction('onFocus');
+    }
+  }, [showPopover, showTooltip]);
+  const onBlur = useCallback(() => {
+    setIsFocused(false);
+    if (!isHover || latestOpenInteraction === 'onFocus') hideTooltip();
+  }, [hideTooltip, isHover, latestOpenInteraction]);
+  const onMouseEnter = useCallback(() => {
+    setIsHover(true);
+
+    if (!showPopover) {
+      showTooltip();
+      setLatestOpenInteraction('onMouseEnter');
+    }
+  }, [showPopover, showTooltip]);
+  const onMouseLeave = useCallback(() => {
+    setIsHover(false);
+    if (!isFocused || latestOpenInteraction === 'onMouseEnter') hideTooltip();
+  }, [hideTooltip, isFocused, latestOpenInteraction]);
+  const handleEscKey = useCallback(_ref => {
+    let {
+      key
+    } = _ref;
     if (key === 'Escape') hideTooltip();
   }, [hideTooltip]);
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx(DSPopperJS, _objectSpread(_objectSpread({
-      referenceElement: referenceElement,
-      showPopover: showPopover
-    }, extraPopperJsProps), {}, {
-      children: /*#__PURE__*/_jsx("div", {
-        "data-testid": `${TooltipV3DatatestId.TOOLTIP_TEXT_WRAPPER}${id !== '' ? `_${id}` : ''}`
-      }, void 0, /*#__PURE__*/_jsx(StyledTooltipContainer, {}, void 0, /*#__PURE__*/_jsx(StyledTooltipText, {}, void 0, text)))
-    })), /*#__PURE__*/jsx("div", {
-      onMouseOver: showTooltip,
-      onFocus: showTooltip,
-      onMouseOut: hideTooltip,
-      onBlur: hideTooltip,
-      onKeyDown: handleEscKey,
+  useGlobalKeyboardListener(handleEscKey);
+  return /*#__PURE__*/jsx(Fragment, {
+    children: /*#__PURE__*/jsxs(StyledTriggerWrapper, {
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave,
+      onFocus: onFocus,
+      onBlur: onBlur,
       ref: setReferenceElement,
-      "data-testid": `${TooltipV3DatatestId.TRIGGER_WRAPPER}${id !== '' ? `_${id}` : ''}`,
-      children: children
-    })]
+      "data-testid": "".concat(TooltipV3DatatestId.TRIGGER_WRAPPER).concat(id !== '' ? "_".concat(id) : ''),
+      children: [/*#__PURE__*/jsx(DSPopperJS, _objectSpread(_objectSpread({
+        referenceElement: referenceElement,
+        showPopover: showPopover,
+        withoutPortal: true
+      }, extraPopperJsProps), {}, {
+        children: /*#__PURE__*/_jsx("div", {
+          "data-testid": "".concat(TooltipV3DatatestId.TOOLTIP_TEXT_WRAPPER).concat(id !== '' ? "_".concat(id) : '')
+        }, void 0, /*#__PURE__*/_jsx(StyledTooltipContainer, {}, void 0, /*#__PURE__*/_jsx(StyledTooltipText, {
+          textAlign: textAlign
+        }, void 0, text), _StyledMouseOverDetec || (_StyledMouseOverDetec = /*#__PURE__*/_jsx(StyledMouseOverDetectionBox, {}))))
+      })), children]
+    })
   });
 };
 

package/esm/v3/propsTypes.js

@@ -2,9 +2,14 @@ import { PropTypes } from 'react-desc';
 
 const dsTooltipPropTypes = {
   /**
-   * Tooltip text to be displayed on hover
+   * Tooltip text to be displayed on hover/focus
    */
-  text: PropTypes.string.description('Tooltip text to be displayed on hover').isRequired,
+  text: PropTypes.string.description('Tooltip text to be displayed on hover/focus').isRequired,
+
+  /**
+   * Tooltip text alignment
+   */
+  textAlign: PropTypes.oneOf(['left', 'right', 'center', 'justify', 'initial', 'inherit']).description('Tooltip text alignment').defaultValue('left'),
 
   /**
    * Element to tie the tooltip to, must be a single node
@@ -27,6 +32,16 @@ const dsTooltipPropTypes = {
    */
   boundaryElement: PropTypes.element.description('Bounding element to calculate upon, defaults to "clippingParents",' + 'which are the scrolling containers that may cause element to be partially or fully cut off').defaultValue(undefined),
 
+  /**
+   *  Whether or not the popper context menu should be animated
+   */
+  withoutAnimation: PropTypes.bool.description('Whether or not the popper context menu should be animated').defaultValue(false),
+
+  /**
+   *  Popper context menus Animation duration in ms
+   */
+  animationDuration: PropTypes.number.description('Popper context menus Animation duration in ms').defaultValue(100),
+
   /**
    *  When using portal, the container in which to append the DOM content, defaults to document body
    */

package/esm/v3/styleds.js

@@ -2,15 +2,35 @@ import styled from 'styled-components';
 
 const StyledTooltipContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-18a4gem-0"
-})(["text-align:center;min-width:", ";max-width:250px;min-height:24px;padding:", ";position:relative;background-color:white;border-radius:2px;font-size:13px;color:", ";box-shadow:0 1px 5px 0 rgb(0 0 0 / 13%),0 2px 4px 0 rgb(0 0 0 / 20%);filter:drop-shadow(0 4px 8px rgba(0,0,0,0.2));transition:visibility 0.1s ease-in;"], ({
-  theme
-}) => theme.space.l, ({
-  theme
-}) => `${theme.space.xxxs} ${theme.space.xs}`, ({
-  theme
-}) => theme.colors.neutral[600]);
+})(["text-align:center;min-width:", ";max-width:250px;min-height:30px;display:grid;align-items:center;padding:", ";position:relative;background-color:white;border-radius:2px;font-size:13px;color:", ";"], _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.space.l;
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return "".concat(theme.space.xxxs, " ").concat(theme.space.xs);
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.colors.neutral[600];
+});
 const StyledTooltipText = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-18a4gem-1"
-})(["white-space:normal;word-wrap:break-word;display:inline-block;"]);
+})(["white-space:normal;word-wrap:break-word;display:inline-block;text-align:", ";"], _ref4 => {
+  let {
+    textAlign
+  } = _ref4;
+  return textAlign;
+});
+const StyledMouseOverDetectionBox = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-18a4gem-2"
+})(["position:absolute;top:-15px;right:-15px;width:calc(100% + 30px);height:calc(100% + 30px);z-index:-1;"]);
+const StyledTriggerWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-18a4gem-3"
+})(["display:inline-block;width:100%;"]);
 
-export { StyledTooltipContainer, StyledTooltipText };
+export { StyledMouseOverDetectionBox, StyledTooltipContainer, StyledTooltipText, StyledTriggerWrapper };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-tooltip",
-  "version": "2.0.0-alpha.9",
+  "version": "2.0.0-next.12",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Tooltip",
   "module": "./esm/index.js",
@@ -92,14 +92,17 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-classnames": "2.0.0-alpha.9",
-    "@elliemae/ds-popper": "2.0.0-alpha.9",
-    "@elliemae/ds-shared": "2.0.0-alpha.9",
-    "@elliemae/ds-system": "2.0.0-alpha.9",
-    "@elliemae/ds-utilities": "2.0.0-alpha.9",
-    "@popperjs/core": "2.9.3",
-    "react-desc": "^4.1.3",
-    "react-popper": "2.2.5"
+    "@elliemae/ds-basic": "2.0.0-next.12",
+    "@elliemae/ds-classnames": "2.0.0-next.12",
+    "@elliemae/ds-popper": "2.0.0-next.12",
+    "@elliemae/ds-popperjs": "2.0.0-next.12",
+    "@elliemae/ds-portal": "2.0.0-next.12",
+    "@elliemae/ds-shared": "2.0.0-next.12",
+    "@elliemae/ds-system": "2.0.0-next.12",
+    "@elliemae/ds-utilities": "2.0.0-next.12",
+    "@popperjs/core": "~2.9.2",
+    "react-desc": "~4.1.3",
+    "react-popper": "~2.2.5"
   },
   "peerDependencies": {
     "react": "^17.0.2",

package/types/v3/propsTypes.d.ts

@@ -1,8 +1,12 @@
 export declare const dsTooltipPropTypes: {
     /**
-     * Tooltip text to be displayed on hover
+     * Tooltip text to be displayed on hover/focus
      */
     text: any;
+    /**
+     * Tooltip text alignment
+     */
+    textAlign: any;
     /**
      * Element to tie the tooltip to, must be a single node
      */
@@ -20,6 +24,14 @@ export declare const dsTooltipPropTypes: {
      *   which are the scrolling containers that may cause the element to be partially or fully cut off.
      */
     boundaryElement: any;
+    /**
+     *  Whether or not the popper context menu should be animated
+     */
+    withoutAnimation: any;
+    /**
+     *  Popper context menus Animation duration in ms
+     */
+    animationDuration: any;
     /**
      *  When using portal, the container in which to append the DOM content, defaults to document body
      */

package/types/v3/styleds.d.ts

@@ -1,2 +1,6 @@
 export declare const StyledTooltipContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledTooltipText: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledTooltipText: import("styled-components").StyledComponent<"div", any, {
+    textAlign: string;
+}, never>;
+export declare const StyledMouseOverDetectionBox: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledTriggerWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/cjs/package.json

@@ -1,7 +0,0 @@
-{
-  "type": "commonjs",
-  "sideEffects": [
-    "*.css",
-    "*.scss"
-  ]
-}

package/esm/package.json

@@ -1,7 +0,0 @@
-{
-  "type": "module",
-  "sideEffects": [
-    "*.css",
-    "*.scss"
-  ]
-}