@elliemae/ds-tooltip 2.3.0-alpha.7 → 2.3.0-next.1

package/cjs/index.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var DSTooltip = require('./v1/DSTooltip.js');
+var DSTooltip$1 = require('./v2/DSTooltip.js');
+var tooltipPositions = require('./v2/utils/tooltipPositions.js');
+var TooltipType = require('./v2/TooltipType.js');
+var index = require('./v3/index.js');
+
+
+
+exports.DSTooltip = DSTooltip.DSTooltip;
+exports.TooltipContainer = DSTooltip.TooltipContainer;
+exports.TooltipText = DSTooltip.TooltipText;
+exports.TooltipWithSchema = DSTooltip.TooltipWithSchema;
+exports["default"] = DSTooltip.DSTooltip;
+exports.DSTooltipV2 = DSTooltip$1.DSTooltipV2;
+exports.TooltipV2WithSchema = DSTooltip$1.TooltipV2WithSchema;
+exports.tooltipPositions = tooltipPositions.tooltipPositions;
+exports.TooltipType = TooltipType.TooltipType;
+exports.DSTooltipV3 = index.DSTooltipV3;
+exports.DSTooltipV3WithSchema = index.DSTooltipV3WithSchema;

package/cjs/v1/DSTooltip.js

@@ -0,0 +1,115 @@
+'use strict';
+
+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 dsUtilities = require('@elliemae/ds-utilities');
+var constants = require('@elliemae/ds-shared/constants');
+var DSPopper = require('@elliemae/ds-popper');
+var TooltipType = require('./TooltipType.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+var DSPopper__default = /*#__PURE__*/_interopDefaultLegacy(DSPopper);
+
+const _excluded = ["containerProps", "innerRef", "placement", "title", "delayClose", "delayOpen", "interactionType", "triggerComponent", "className", "isOpen", "onOpen", "springAnimationComponent", "tooltipType", "showArrow", "zIndex"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const blockName = 'tooltip';
+const TooltipContainer = dsClassnames.aggregatedClasses('div')(blockName, false, false, {
+  propsToRemoveFromFinalElement: ['isHovered', 'isDragged']
+});
+const TooltipText = dsClassnames.aggregatedClasses('span')(blockName, 'text', false, {
+  propsToRemoveFromFinalElement: ['isHovered', 'isDragged']
+});
+
+const DSTooltip = _ref => {
+  let {
+    containerProps = {},
+    innerRef,
+    placement = DSPopper.PopperPositions.TOP,
+    title = '',
+    delayClose = constants.DEFAULT_DELAY_CLOSE,
+    delayOpen = constants.DEFAULT_DELAY_OPEN,
+    interactionType = DSPopper.PopperInteractions.HOVER,
+    triggerComponent = null,
+    className = '',
+    isOpen = undefined,
+    onOpen = () => null,
+    springAnimationComponent = undefined,
+    tooltipType = TooltipType.TooltipType.TOOLTIP,
+    showArrow = true,
+    zIndex
+  } = _ref,
+      otherTooltipProps = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+  const {
+    cssClassName: tooltipBlockName
+  } = dsClassnames.convertPropToCssClassName(blockName);
+  let Content = title;
+
+  if (typeof title === 'string') {
+    Content = /*#__PURE__*/_jsx__default["default"](TooltipText, {}, void 0, title);
+  }
+
+  return /*#__PURE__*/_jsx__default["default"](DSPopper__default["default"], {
+    blockName: tooltipBlockName,
+    contentComponent: /*#__PURE__*/jsxRuntime.jsx(TooltipContainer, _objectSpread(_objectSpread(_objectSpread({}, containerProps), otherTooltipProps), {}, {
+      className: "tooltip-container--".concat(tooltipType, " ").concat(className),
+      innerRef: innerRef,
+      children: Content
+    })),
+    delayClose: delayClose,
+    delayOpen: delayOpen,
+    interactionType: interactionType,
+    isOpen: isOpen,
+    onOpen: onOpen,
+    placement: placement,
+    showArrow: tooltipType === TooltipType.TooltipType.TOOLTIP ? showArrow : false,
+    springAnimationComponent: springAnimationComponent,
+    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(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(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'),
+  showArrow: reactDesc.PropTypes.bool.description('Whether to show an arrow or not').defaultValue(true),
+  className: reactDesc.PropTypes.string.description('css class'),
+  tooltipType: reactDesc.PropTypes.oneOf(['tooltip', 'toolbar']).description('Type of tooltip').defaultValue(TooltipType.TooltipType.TOOLTIP),
+  zIndex: reactDesc.PropTypes.number.description('z-index value assigned to the tooltip').defaultValue(undefined),
+  innerRef: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.func, reactDesc.PropTypes.object]).description('Ref to the tooltip container element')
+};
+const TooltipWithSchema = reactDesc.describe(DSTooltip);
+TooltipWithSchema.propTypes = tooltipProps;
+
+exports.DSTooltip = DSTooltip;
+exports.TooltipContainer = TooltipContainer;
+exports.TooltipText = TooltipText;
+exports.TooltipWithSchema = TooltipWithSchema;
+exports["default"] = DSTooltip;

package/cjs/v1/TooltipType.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const TooltipType = {
+  TOOLTIP: 'tooltip',
+  TOOLBAR: 'toolbar'
+};
+
+exports.TooltipType = TooltipType;

package/cjs/v2/DSTooltip.js

@@ -0,0 +1,147 @@
+'use strict';
+
+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');
+var constants = require('@elliemae/ds-shared/constants');
+var reactPopper = require('react-popper');
+var tooltipPositions = require('./utils/tooltipPositions.js');
+var TooltipType = require('./TooltipType.js');
+var styles = require('./styles.js');
+var DSTooltipArrow = require('./DSTooltipArrow.js');
+var propTypes = require('./propTypes.js');
+var setMultipleRefs = require('./utils/setMultipleRefs.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var DSPortal__default = /*#__PURE__*/_interopDefaultLegacy(DSPortal);
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+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);
+  const [popperElement, setPopperElement] = react.useState(null);
+  const [arrowElement, setArrowElement] = react.useState(null);
+  const timerOpen = react.useRef(null);
+  const timerClosed = react.useRef(null);
+  const {
+    styles: styles$1,
+    attributes
+  } = reactPopper.usePopper(referenceElement, popperElement, {
+    placement,
+    modifiers: [{
+      name: 'hide',
+      enabled: true
+    }, {
+      name: 'offset',
+      enabled: true,
+      options: {
+        offset: tooltipType === TooltipType.TooltipType.TOOLBAR ? [0, 0] : offset
+      }
+    }, {
+      name: 'arrow',
+      options: {
+        element: arrowElement
+      }
+    }, _objectSpread({}, extraModifiers)]
+  });
+  const handleShowTooltipOn = react.useCallback(() => {
+    timerOpen.current = setTimeout(() => {
+      setShowTooltip(true);
+      setIsAnimating(true);
+      getIsOpen(true);
+      onOpen();
+    }, delayOpen);
+  }, [delayOpen, getIsOpen, onOpen]);
+  const handleShowTooltipOff = react.useCallback(() => {
+    timerClosed.current = setTimeout(() => {
+      setShowTooltip(false);
+      setIsAnimating(true);
+      getIsOpen(false);
+    }, delayClose);
+  }, [delayClose, getIsOpen]);
+  const handleKeyDown = react.useCallback(e => {
+    if (e.key === 'Escape') {
+      e.target.blur();
+    }
+  }, []);
+  const checkAnimationStatus = react.useCallback(() => {
+    if (!showTooltip) {
+      setIsAnimating(false);
+    }
+  }, [showTooltip]);
+  react.useEffect(() => () => {
+    clearTimeout(timerClosed.current);
+    clearTimeout(timerOpen.current);
+  }, []);
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(styles.StyledTriggerComponentContainer, {
+      ref: setReferenceElement,
+      onMouseEnter: handleShowTooltipOn,
+      onMouseLeave: handleShowTooltipOff,
+      onFocus: handleShowTooltipOn,
+      onBlur: handleShowTooltipOff,
+      onKeyDown: handleKeyDown,
+      children: triggerComponent
+    }), isAnimating || showTooltip ? /*#__PURE__*/_jsx__default["default"](DSPortal__default["default"], {}, void 0, /*#__PURE__*/jsxRuntime.jsx(styles.StyledTooltipContainer, _objectSpread(_objectSpread(_objectSpread({
+      className: className,
+      showTooltip: showTooltip,
+      tooltipType: tooltipType,
+      "data-testid": "ds-tooltip-container",
+      ref: ref => setMultipleRefs.setMultipleRefs(setPopperElement, innerRef)(ref),
+      style: _objectSpread(_objectSpread({}, styles$1.popper), {}, {
+        zIndex
+      })
+    }, containerProps), attributes.popper), {}, {
+      children: /*#__PURE__*/_jsx__default["default"](styles.StyledAnimatedTooltip, {
+        showTooltip: showTooltip,
+        "data-testid": "ds-tooltip",
+        onAnimationEnd: checkAnimationStatus
+      }, void 0, /*#__PURE__*/_jsx__default["default"](styles.StyledTooltipText, {}, void 0, title), tooltipType === TooltipType.TooltipType.TOOLTIP && showArrow ? /*#__PURE__*/_jsx__default["default"](DSTooltipArrow.DSTooltipArrow, {
+        arrowElementRef: setArrowElement,
+        style: styles$1.arrow,
+        placement: attributes.popper ? attributes.popper['data-popper-placement'] : 'bottom'
+      }) : null)
+    }))) : null]
+  });
+};
+
+const TooltipV2WithSchema = reactDesc.describe(DSTooltipV2);
+TooltipV2WithSchema.propTypes = propTypes.tooltipV2Props;
+
+exports.DSTooltipV2 = DSTooltipV2;
+exports.TooltipV2WithSchema = TooltipV2WithSchema;

package/cjs/v2/DSTooltipArrow.js

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var styles = require('./styles.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+var _svg;
+
+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/TooltipType.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const TooltipType = {
+  TOOLTIP: 'tooltip',
+  TOOLBAR: 'toolbar'
+};
+
+exports.TooltipType = TooltipType;

package/cjs/v2/index.d.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/cjs/v2/propTypes.js

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reactDesc = require('react-desc');
+var constants = require('@elliemae/ds-shared/constants');
+var TooltipType = require('./TooltipType.js');
+var tooltipPositions = require('./utils/tooltipPositions.js');
+
+const tooltipV2Props = {
+  containerProps: reactDesc.PropTypes.object.description('Set of Properties attached to the main container'),
+  placement: reactDesc.PropTypes.oneOf(Object.values(tooltipPositions.tooltipPositions)).description('Tooltip position').defaultValue(tooltipPositions.tooltipPositions.TOP),
+  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. \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),
+  className: reactDesc.PropTypes.string.description('css class'),
+  tooltipType: reactDesc.PropTypes.oneOf(['tooltip', 'toolbar']).description('Type of tooltip').defaultValue(TooltipType.TooltipType.TOOLTIP),
+  zIndex: reactDesc.PropTypes.number.description('z-index value assigned to the tooltip').defaultValue(undefined),
+  innerRef: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.func, reactDesc.PropTypes.object]).description('Ref to the tooltip container element'),
+  offset: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.number).description('Custom Offset for the tooltip [x, y]')
+};
+
+exports.tooltipV2Props = tooltipV2Props;

package/cjs/v2/styles.js

@@ -0,0 +1,62 @@
+'use strict';
+
+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);
+
+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;"], _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;"]);
+const StyledTooltipText = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-1dtjf9j-3"
+})(["white-space:normal;word-wrap:break-word;display:inline-block;"]);
+const StyledTooltipArrow = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-1dtjf9j-4"
+})(["position:absolute;width:18px;height:18px;pointer-events:none;background-color:transparent;& .stroke{fill:white;}& .fill{fill:white;}&[data-placement^='top']{svg{transform:rotateZ(180deg);}top:98%;}&[data-placement^='right']{svg{transform:rotateZ(-90deg);}right:99.5%;}&[data-placement^='bottom']{bottom:97%;}&[data-placement^='left']{svg{transform:rotateZ(90deg);}left:99.5%;}"]);
+
+exports.StyledAnimatedTooltip = StyledAnimatedTooltip;
+exports.StyledTooltipArrow = StyledTooltipArrow;
+exports.StyledTooltipContainer = StyledTooltipContainer;
+exports.StyledTooltipText = StyledTooltipText;
+exports.StyledTriggerComponentContainer = StyledTriggerComponentContainer;

package/cjs/v2/utils/setMultipleRefs.js

@@ -0,0 +1,30 @@
+'use strict';
+
+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');
+
+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];
+  return newRef => {
+    filteredRefs.forEach(refToBeUpdated => {
+      if (typeof refToBeUpdated === 'function') {
+        refToBeUpdated(newRef);
+      } else if (refToBeUpdated) {
+        refToBeUpdated.current = newRef;
+      }
+    });
+  };
+};
+
+exports.setMultipleRefs = setMultipleRefs;

package/cjs/v2/utils/tooltipPositions.js

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const tooltipPositions = {
+  TOP: 'top',
+  BOTTOM: 'bottom',
+  RIGHT: 'right',
+  LEFT: 'left',
+  TOP_START: 'top-start',
+  TOP_END: 'top-end',
+  BOTTOM_START: 'bottom-start',
+  BOTTOM_END: 'bottom-end',
+  RIGHT_START: 'right-start',
+  RIGHT_END: 'right-end',
+  LEFT_START: 'left-start',
+  LEFT_END: 'left-end'
+};
+
+exports.tooltipPositions = tooltipPositions;

package/cjs/v3/TooltipV3DatatestId.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const TooltipV3DatatestId = {
+  TRIGGER_WRAPPER: 'ds-tooltip-v3-trigger-wrapper',
+  TOOLTIP_TEXT_WRAPPER: 'ds-tooltip-v3-tooltip-text-wrapper'
+};
+
+exports.TooltipV3DatatestId = TooltipV3DatatestId;

package/cjs/v3/config/useWithDefaultProps.js

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop = () => {};
+
+const defaultProps = {
+  onOpen: noop,
+  onClose: noop,
+  id: '',
+  textAlign: 'left'
+};
+const useWithDefaultProps = props => dsPropsHelpers.useMemoMergePropsWithDefault(props, defaultProps);
+
+exports.useWithDefaultProps = useWithDefaultProps;

package/cjs/v3/index.d.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/cjs/v3/index.js

@@ -0,0 +1,128 @@
+'use strict';
+
+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');
+var propsTypes = require('./propsTypes.js');
+var useWithDefaultProps = require('./config/useWithDefaultProps.js');
+var TooltipV3DatatestId = require('./TooltipV3DatatestId.js');
+var styleds = require('./styleds.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+
+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); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : 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),
+        {
+    text,
+    children,
+    onOpen,
+    onClose,
+    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(() => {
+    setShowPopover(true);
+    onOpen();
+  }, [onOpen]);
+  const hideTooltip = react.useCallback(() => {
+    setShowPopover(false);
+    onClose();
+  }, [onClose]);
+  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]);
+  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": "".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]
+    })
+  });
+};
+
+const DSTooltipV3WithSchema = reactDesc.describe(DSTooltipV3).description('A tooltip component');
+DSTooltipV3WithSchema.propTypes = propsTypes.dsTooltipPropTypes;
+
+exports.DSTooltipV3 = DSTooltipV3;
+exports.DSTooltipV3WithSchema = DSTooltipV3WithSchema;
+exports["default"] = DSTooltipV3;