@elliemae/ds-tooltip 1.60.0 → 2.0.0-alpha.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (100) hide show
  1. package/cjs/index.js +16 -43
  2. package/cjs/v1/DSTooltip.js +54 -57
  3. package/cjs/v1/TooltipType.js +1 -2
  4. package/cjs/v2/DSTooltip.js +91 -129
  5. package/cjs/v2/DSTooltipArrow.js +25 -23
  6. package/cjs/v2/TooltipType.js +1 -2
  7. package/cjs/v2/index.d.js +0 -1
  8. package/cjs/v2/propTypes.js +5 -6
  9. package/cjs/v2/styles.js +28 -19
  10. package/cjs/v2/utils/setMultipleRefs.js +10 -5
  11. package/cjs/v2/utils/tooltipPositions.js +1 -2
  12. package/cjs/v3/TooltipV3DatatestId.js +1 -2
  13. package/cjs/v3/config/useWithDefaultProps.js +3 -6
  14. package/cjs/v3/index.d.js +0 -1
  15. package/cjs/v3/index.js +77 -82
  16. package/cjs/v3/propsTypes.js +1 -2
  17. package/cjs/v3/styleds.js +20 -13
  18. package/esm/index.js +0 -27
  19. package/esm/v1/DSTooltip.js +47 -50
  20. package/esm/v1/TooltipType.js +1 -2
  21. package/esm/v2/DSTooltip.js +80 -116
  22. package/esm/v2/DSTooltipArrow.js +23 -21
  23. package/esm/v2/TooltipType.js +1 -2
  24. package/esm/v2/index.d.js +0 -1
  25. package/esm/v2/propTypes.js +1 -2
  26. package/esm/v2/styles.js +27 -18
  27. package/esm/v2/utils/setMultipleRefs.js +10 -5
  28. package/esm/v2/utils/tooltipPositions.js +1 -2
  29. package/esm/v3/TooltipV3DatatestId.js +1 -2
  30. package/esm/v3/config/useWithDefaultProps.js +3 -6
  31. package/esm/v3/index.d.js +0 -1
  32. package/esm/v3/index.js +68 -72
  33. package/esm/v3/propsTypes.js +1 -2
  34. package/esm/v3/styleds.js +20 -13
  35. package/package.json +103 -20
  36. package/types/index.d.ts +6 -0
  37. package/types/v1/DSTooltip.d.ts +106 -0
  38. package/types/v1/TooltipType.d.ts +4 -0
  39. package/types/v2/DSTooltip.d.ts +70 -0
  40. package/types/v2/DSTooltipArrow.d.ts +4 -0
  41. package/types/v2/TooltipType.d.ts +5 -0
  42. package/types/v2/propTypes.d.ts +60 -0
  43. package/types/v2/styles.d.ts +7 -0
  44. package/types/v2/tests/DSTooltipV2.test.d.ts +1 -0
  45. package/types/v2/utils/setMultipleRefs.d.ts +1 -0
  46. package/types/v2/utils/tooltipPositions.d.ts +15 -0
  47. package/types/v3/TooltipV3DatatestId.d.ts +4 -0
  48. package/types/v3/config/useWithDefaultProps.d.ts +2 -0
  49. package/types/v3/index.d.ts +6 -0
  50. package/types/v3/propsTypes.d.ts +103 -0
  51. package/types/v3/styleds.d.ts +6 -0
  52. package/cjs/index.js.map +0 -1
  53. package/cjs/v1/DSTooltip.js.map +0 -1
  54. package/cjs/v1/TooltipType.js.map +0 -1
  55. package/cjs/v2/DSTooltip.js.map +0 -1
  56. package/cjs/v2/DSTooltipArrow.js.map +0 -1
  57. package/cjs/v2/TooltipType.js.map +0 -1
  58. package/cjs/v2/index.d.js.map +0 -1
  59. package/cjs/v2/propTypes.js.map +0 -1
  60. package/cjs/v2/styles.js.map +0 -1
  61. package/cjs/v2/utils/setMultipleRefs.js.map +0 -1
  62. package/cjs/v2/utils/tooltipPositions.js.map +0 -1
  63. package/cjs/v3/TooltipV3DatatestId.js.map +0 -1
  64. package/cjs/v3/config/useWithDefaultProps.js.map +0 -1
  65. package/cjs/v3/index.d.js.map +0 -1
  66. package/cjs/v3/index.js.map +0 -1
  67. package/cjs/v3/propsTypes.js.map +0 -1
  68. package/cjs/v3/styleds.js.map +0 -1
  69. package/esm/index.js.map +0 -1
  70. package/esm/v1/DSTooltip.js.map +0 -1
  71. package/esm/v1/TooltipType.js.map +0 -1
  72. package/esm/v2/DSTooltip.js.map +0 -1
  73. package/esm/v2/DSTooltipArrow.js.map +0 -1
  74. package/esm/v2/TooltipType.js.map +0 -1
  75. package/esm/v2/index.d.js.map +0 -1
  76. package/esm/v2/propTypes.js.map +0 -1
  77. package/esm/v2/styles.js.map +0 -1
  78. package/esm/v2/utils/setMultipleRefs.js.map +0 -1
  79. package/esm/v2/utils/tooltipPositions.js.map +0 -1
  80. package/esm/v3/TooltipV3DatatestId.js.map +0 -1
  81. package/esm/v3/config/useWithDefaultProps.js.map +0 -1
  82. package/esm/v3/index.d.js.map +0 -1
  83. package/esm/v3/index.js.map +0 -1
  84. package/esm/v3/propsTypes.js.map +0 -1
  85. package/esm/v3/styleds.js.map +0 -1
  86. package/v1/DSTooltip/package.json +0 -10
  87. package/v1/TooltipType/package.json +0 -10
  88. package/v2/DSTooltip/package.json +0 -10
  89. package/v2/DSTooltipArrow/package.json +0 -10
  90. package/v2/TooltipType/package.json +0 -10
  91. package/v2/package.json +0 -10
  92. package/v2/propTypes/package.json +0 -10
  93. package/v2/styles/package.json +0 -10
  94. package/v2/utils/setMultipleRefs/package.json +0 -10
  95. package/v2/utils/tooltipPositions/package.json +0 -10
  96. package/v3/TooltipV3DatatestId/package.json +0 -10
  97. package/v3/config/useWithDefaultProps/package.json +0 -10
  98. package/v3/package.json +0 -10
  99. package/v3/propsTypes/package.json +0 -10
  100. package/v3/styleds/package.json +0 -10
@@ -4,12 +4,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var reactDesc = require('react-desc');
6
6
  var constants = require('@elliemae/ds-shared/constants');
7
- var v2_TooltipType = require('./TooltipType.js');
8
- var v2_utils_tooltipPositions = require('./utils/tooltipPositions.js');
7
+ var TooltipType = require('./TooltipType.js');
8
+ var tooltipPositions = require('./utils/tooltipPositions.js');
9
9
 
10
- var tooltipV2Props = {
10
+ const tooltipV2Props = {
11
11
  containerProps: reactDesc.PropTypes.object.description('Set of Properties attached to the main container'),
12
- placement: reactDesc.PropTypes.oneOf(Object.values(v2_utils_tooltipPositions.tooltipPositions)).description('Tooltip position').defaultValue(v2_utils_tooltipPositions.tooltipPositions.TOP),
12
+ placement: reactDesc.PropTypes.oneOf(Object.values(tooltipPositions.tooltipPositions)).description('Tooltip position').defaultValue(tooltipPositions.tooltipPositions.TOP),
13
13
  title: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.element]).description('Tooltip content').isRequired,
14
14
  delayClose: reactDesc.PropTypes.number.description('Delay to close the tooltip').defaultValue(constants.DEFAULT_DELAY_CLOSE),
15
15
  delayOpen: reactDesc.PropTypes.number.description('Delay to open the tooltip ').defaultValue(constants.DEFAULT_DELAY_OPEN),
@@ -18,11 +18,10 @@ var tooltipV2Props = {
18
18
  onOpen: reactDesc.PropTypes.func.description('Callback when the tooltip opens'),
19
19
  showArrow: reactDesc.PropTypes.bool.description('Whether to show an arrow or not').defaultValue(true),
20
20
  className: reactDesc.PropTypes.string.description('css class'),
21
- tooltipType: reactDesc.PropTypes.oneOf(['tooltip', 'toolbar']).description('Type of tooltip').defaultValue(v2_TooltipType.TooltipType.TOOLTIP),
21
+ tooltipType: reactDesc.PropTypes.oneOf(['tooltip', 'toolbar']).description('Type of tooltip').defaultValue(TooltipType.TooltipType.TOOLTIP),
22
22
  zIndex: reactDesc.PropTypes.number.description('z-index value assigned to the tooltip').defaultValue(undefined),
23
23
  innerRef: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.func, reactDesc.PropTypes.object]).description('Ref to the tooltip container element'),
24
24
  offset: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.number).description('Custom Offset for the tooltip [x, y]')
25
25
  };
26
26
 
27
27
  exports.tooltipV2Props = tooltipV2Props;
28
- //# sourceMappingURL=propTypes.js.map
package/cjs/v2/styles.js CHANGED
@@ -12,36 +12,46 @@ var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_tagged
12
12
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
13
13
 
14
14
  var _templateObject, _templateObject2, _templateObject3;
15
- var 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"])));
16
- var 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"])));
17
- var StyledTooltipContainer = /*#__PURE__*/styled__default['default'].div.withConfig({
15
+ 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"])));
16
+ 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"])));
17
+ const StyledTooltipContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
18
18
  componentId: "sc-1dtjf9j-0"
19
19
  })(["&[data-popper-reference-hidden='true']{display:none;pointer-events:none;}"]);
20
- var StyledAnimatedTooltip = /*#__PURE__*/styled__default['default'].div.withConfig({
20
+ const StyledAnimatedTooltip = /*#__PURE__*/styled__default["default"].div.withConfig({
21
21
  componentId: "sc-1dtjf9j-1"
22
- })(["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;"], function (_ref) {
23
- var theme = _ref.theme;
22
+ })(["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 => {
23
+ let {
24
+ theme
25
+ } = _ref;
24
26
  return theme.space.l;
25
- }, function (_ref2) {
26
- var theme = _ref2.theme;
27
+ }, _ref2 => {
28
+ let {
29
+ theme
30
+ } = _ref2;
27
31
  return "".concat(theme.space.xxxs, " ").concat(theme.space.xs);
28
- }, function (_ref3) {
29
- var theme = _ref3.theme;
32
+ }, _ref3 => {
33
+ let {
34
+ theme
35
+ } = _ref3;
30
36
  return theme.colors.neutral[600];
31
- }, function (_ref4) {
32
- var showTooltip = _ref4.showTooltip;
37
+ }, _ref4 => {
38
+ let {
39
+ showTooltip
40
+ } = _ref4;
33
41
  return showTooltip ? 'visible' : 'hidden';
34
- }, function (_ref5) {
35
- var showTooltip = _ref5.showTooltip;
36
- return dsSystem.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default['default'](["\n animation: ", " 0.1s ease-in;\n "])), showTooltip ? showAnimation : hideAnimation);
42
+ }, _ref5 => {
43
+ let {
44
+ showTooltip
45
+ } = _ref5;
46
+ return dsSystem.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n animation: ", " 0.1s ease-in;\n "])), showTooltip ? showAnimation : hideAnimation);
37
47
  });
38
- var StyledTriggerComponentContainer = /*#__PURE__*/styled__default['default'].div.withConfig({
48
+ const StyledTriggerComponentContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
39
49
  componentId: "sc-1dtjf9j-2"
40
50
  })(["display:inline-block;"]);
41
- var StyledTooltipText = /*#__PURE__*/styled__default['default'].div.withConfig({
51
+ const StyledTooltipText = /*#__PURE__*/styled__default["default"].div.withConfig({
42
52
  componentId: "sc-1dtjf9j-3"
43
53
  })(["white-space:normal;word-wrap:break-word;display:inline-block;"]);
44
- var StyledTooltipArrow = /*#__PURE__*/styled__default['default'].div.withConfig({
54
+ const StyledTooltipArrow = /*#__PURE__*/styled__default["default"].div.withConfig({
45
55
  componentId: "sc-1dtjf9j-4"
46
56
  })(["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%;}"]);
47
57
 
@@ -50,4 +60,3 @@ exports.StyledTooltipArrow = StyledTooltipArrow;
50
60
  exports.StyledTooltipContainer = StyledTooltipContainer;
51
61
  exports.StyledTooltipText = StyledTooltipText;
52
62
  exports.StyledTriggerComponentContainer = StyledTriggerComponentContainer;
53
- //# sourceMappingURL=styles.js.map
@@ -2,16 +2,22 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var setMultipleRefs = function setMultipleRefs() {
5
+ require('core-js/modules/esnext.async-iterator.filter.js');
6
+ require('core-js/modules/esnext.iterator.constructor.js');
7
+ require('core-js/modules/esnext.iterator.filter.js');
8
+ require('core-js/modules/esnext.async-iterator.for-each.js');
9
+ require('core-js/modules/esnext.iterator.for-each.js');
10
+
11
+ const setMultipleRefs = function () {
6
12
  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
7
13
  refs[_key] = arguments[_key];
8
14
  }
9
15
 
10
- var filteredRefs = refs.filter(Boolean);
16
+ const filteredRefs = refs.filter(Boolean);
11
17
  if (!filteredRefs.length) return null;
12
18
  if (filteredRefs.length === 0) return filteredRefs[0];
13
- return function (newRef) {
14
- filteredRefs.forEach(function (refToBeUpdated) {
19
+ return newRef => {
20
+ filteredRefs.forEach(refToBeUpdated => {
15
21
  if (typeof refToBeUpdated === 'function') {
16
22
  refToBeUpdated(newRef);
17
23
  } else if (refToBeUpdated) {
@@ -22,4 +28,3 @@ var setMultipleRefs = function setMultipleRefs() {
22
28
  };
23
29
 
24
30
  exports.setMultipleRefs = setMultipleRefs;
25
- //# sourceMappingURL=setMultipleRefs.js.map
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var tooltipPositions = {
5
+ const tooltipPositions = {
6
6
  TOP: 'top',
7
7
  BOTTOM: 'bottom',
8
8
  RIGHT: 'right',
@@ -18,4 +18,3 @@ var tooltipPositions = {
18
18
  };
19
19
 
20
20
  exports.tooltipPositions = tooltipPositions;
21
- //# sourceMappingURL=tooltipPositions.js.map
@@ -2,10 +2,9 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var TooltipV3DatatestId = {
5
+ const TooltipV3DatatestId = {
6
6
  TRIGGER_WRAPPER: 'ds-tooltip-v3-trigger-wrapper',
7
7
  TOOLTIP_TEXT_WRAPPER: 'ds-tooltip-v3-tooltip-text-wrapper'
8
8
  };
9
9
 
10
10
  exports.TooltipV3DatatestId = TooltipV3DatatestId;
11
- //# sourceMappingURL=TooltipV3DatatestId.js.map
@@ -5,17 +5,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var dsPropsHelpers = require('@elliemae/ds-props-helpers');
6
6
 
7
7
  // eslint-disable-next-line @typescript-eslint/no-empty-function
8
- var noop = function noop() {};
8
+ const noop = () => {};
9
9
 
10
- var defaultProps = {
10
+ const defaultProps = {
11
11
  onOpen: noop,
12
12
  onClose: noop,
13
13
  id: '',
14
14
  textAlign: 'left'
15
15
  };
16
- var useWithDefaultProps = function useWithDefaultProps(props) {
17
- return dsPropsHelpers.useMemoMergePropsWithDefault(props, defaultProps);
18
- };
16
+ const useWithDefaultProps = props => dsPropsHelpers.useMemoMergePropsWithDefault(props, defaultProps);
19
17
 
20
18
  exports.useWithDefaultProps = useWithDefaultProps;
21
- //# sourceMappingURL=useWithDefaultProps.js.map
package/cjs/v3/index.d.js CHANGED
@@ -1,3 +1,2 @@
1
1
  'use strict';
2
2
 
3
- //# sourceMappingURL=index.d.js.map
package/cjs/v3/index.js CHANGED
@@ -2,81 +2,71 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var _extends = require('@babel/runtime/helpers/extends');
6
- var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
5
+ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
6
+ var _jsx = require('@babel/runtime/helpers/jsx');
7
7
  var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
8
- var React = require('react');
8
+ require('core-js/modules/web.dom-collections.iterator.js');
9
+ require('core-js/modules/esnext.async-iterator.filter.js');
10
+ require('core-js/modules/esnext.iterator.constructor.js');
11
+ require('core-js/modules/esnext.iterator.filter.js');
12
+ require('core-js/modules/esnext.async-iterator.for-each.js');
13
+ require('core-js/modules/esnext.iterator.for-each.js');
14
+ var react = require('react');
9
15
  var dsPopperjs = require('@elliemae/ds-popperjs');
10
16
  var reactDesc = require('react-desc');
11
- var v3_propsTypes = require('./propsTypes.js');
12
- var v3_config_useWithDefaultProps = require('./config/useWithDefaultProps.js');
13
- var v3_TooltipV3DatatestId = require('./TooltipV3DatatestId.js');
14
- var v3_styleds = require('./styleds.js');
15
- require('@elliemae/ds-props-helpers');
16
- require('styled-components');
17
+ var propsTypes = require('./propsTypes.js');
18
+ var useWithDefaultProps = require('./config/useWithDefaultProps.js');
19
+ var TooltipV3DatatestId = require('./TooltipV3DatatestId.js');
20
+ var styleds = require('./styleds.js');
21
+ var jsxRuntime = require('react/jsx-runtime');
17
22
 
18
23
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
19
24
 
20
- var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
21
- var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
25
+ var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
26
+ var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
22
27
  var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
23
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
24
28
 
25
- var _excluded = ["text", "children", "onOpen", "onClose", "id", "textAlign"];
29
+ var _StyledMouseOverDetec;
26
30
 
27
- var useGlobalKeyboardListener = function useGlobalKeyboardListener(func) {
28
- React.useEffect(function () {
29
- document.addEventListener('keydown', func);
30
- return function () {
31
- return document.removeEventListener('keydown', func);
32
- };
33
- }, [func]);
34
- };
35
-
36
- var DSTooltipV3 = function DSTooltipV3(props) {
37
- var _useWithDefaultProps = v3_config_useWithDefaultProps.useWithDefaultProps(props),
38
- text = _useWithDefaultProps.text,
39
- children = _useWithDefaultProps.children,
40
- onOpen = _useWithDefaultProps.onOpen,
41
- onClose = _useWithDefaultProps.onClose,
42
- id = _useWithDefaultProps.id,
43
- textAlign = _useWithDefaultProps.textAlign,
44
- extraPopperJsProps = _objectWithoutProperties__default['default'](_useWithDefaultProps, _excluded);
45
-
46
- var _useState = React.useState(false),
47
- _useState2 = _slicedToArray__default['default'](_useState, 2),
48
- isFocused = _useState2[0],
49
- setIsFocused = _useState2[1];
31
+ const _excluded = ["text", "children", "onOpen", "onClose", "id", "textAlign"];
50
32
 
51
- var _useState3 = React.useState(false),
52
- _useState4 = _slicedToArray__default['default'](_useState3, 2),
53
- isHover = _useState4[0],
54
- setIsHover = _useState4[1];
33
+ 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; }
55
34
 
56
- var _useState5 = React.useState(''),
57
- _useState6 = _slicedToArray__default['default'](_useState5, 2),
58
- latestOpenInteraction = _useState6[0],
59
- setLatestOpenInteraction = _useState6[1];
35
+ 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; }
60
36
 
61
- var _useState7 = React.useState(),
62
- _useState8 = _slicedToArray__default['default'](_useState7, 2),
63
- referenceElement = _useState8[0],
64
- setReferenceElement = _useState8[1];
65
-
66
- var _useState9 = React.useState(false),
67
- _useState10 = _slicedToArray__default['default'](_useState9, 2),
68
- showPopover = _useState10[0],
69
- setShowPopover = _useState10[1];
37
+ const useGlobalKeyboardListener = func => {
38
+ react.useEffect(() => {
39
+ document.addEventListener('keydown', func);
40
+ return () => document.removeEventListener('keydown', func);
41
+ }, [func]);
42
+ };
70
43
 
71
- var showTooltip = React.useCallback(function () {
44
+ const DSTooltipV3 = props => {
45
+ const _useWithDefaultProps = useWithDefaultProps.useWithDefaultProps(props),
46
+ {
47
+ text,
48
+ children,
49
+ onOpen,
50
+ onClose,
51
+ id,
52
+ textAlign
53
+ } = _useWithDefaultProps,
54
+ extraPopperJsProps = _objectWithoutProperties__default["default"](_useWithDefaultProps, _excluded);
55
+
56
+ const [isFocused, setIsFocused] = react.useState(false);
57
+ const [isHover, setIsHover] = react.useState(false);
58
+ const [latestOpenInteraction, setLatestOpenInteraction] = react.useState('');
59
+ const [referenceElement, setReferenceElement] = react.useState();
60
+ const [showPopover, setShowPopover] = react.useState(false);
61
+ const showTooltip = react.useCallback(() => {
72
62
  setShowPopover(true);
73
63
  onOpen();
74
64
  }, [onOpen]);
75
- var hideTooltip = React.useCallback(function () {
65
+ const hideTooltip = react.useCallback(() => {
76
66
  setShowPopover(false);
77
67
  onClose();
78
68
  }, [onClose]);
79
- var onFocus = React.useCallback(function () {
69
+ const onFocus = react.useCallback(() => {
80
70
  setIsFocused(true);
81
71
 
82
72
  if (!showPopover) {
@@ -84,11 +74,11 @@ var DSTooltipV3 = function DSTooltipV3(props) {
84
74
  setLatestOpenInteraction('onFocus');
85
75
  }
86
76
  }, [showPopover, showTooltip]);
87
- var onBlur = React.useCallback(function () {
77
+ const onBlur = react.useCallback(() => {
88
78
  setIsFocused(false);
89
79
  if (!isHover || latestOpenInteraction === 'onFocus') hideTooltip();
90
80
  }, [hideTooltip, isHover, latestOpenInteraction]);
91
- var onMouseEnter = React.useCallback(function () {
81
+ const onMouseEnter = react.useCallback(() => {
92
82
  setIsHover(true);
93
83
 
94
84
  if (!showPopover) {
@@ -96,38 +86,43 @@ var DSTooltipV3 = function DSTooltipV3(props) {
96
86
  setLatestOpenInteraction('onMouseEnter');
97
87
  }
98
88
  }, [showPopover, showTooltip]);
99
- var onMouseLeave = React.useCallback(function () {
89
+ const onMouseLeave = react.useCallback(() => {
100
90
  setIsHover(false);
101
91
  if (!isFocused || latestOpenInteraction === 'onMouseEnter') hideTooltip();
102
92
  }, [hideTooltip, isFocused, latestOpenInteraction]);
103
- var handleEscKey = React.useCallback(function (_ref) {
104
- var key = _ref.key;
93
+ const handleEscKey = react.useCallback(_ref => {
94
+ let {
95
+ key
96
+ } = _ref;
105
97
  if (key === 'Escape') hideTooltip();
106
98
  }, [hideTooltip]);
107
99
  useGlobalKeyboardListener(handleEscKey);
108
- return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(v3_styleds.StyledTriggerWrapper, {
109
- onMouseEnter: onMouseEnter,
110
- onMouseLeave: onMouseLeave,
111
- onFocus: onFocus,
112
- onBlur: onBlur,
113
- ref: setReferenceElement,
114
- "data-testid": "".concat(v3_TooltipV3DatatestId.TooltipV3DatatestId.TRIGGER_WRAPPER).concat(id !== '' ? "_".concat(id) : '')
115
- }, /*#__PURE__*/React__default['default'].createElement(dsPopperjs.DSPopperJS, _extends__default['default']({
116
- referenceElement: referenceElement,
117
- showPopover: showPopover,
118
- withoutPortal: true
119
- }, extraPopperJsProps), /*#__PURE__*/React__default['default'].createElement("div", {
120
- "data-testid": "".concat(v3_TooltipV3DatatestId.TooltipV3DatatestId.TOOLTIP_TEXT_WRAPPER).concat(id !== '' ? "_".concat(id) : '')
121
- }, /*#__PURE__*/React__default['default'].createElement(v3_styleds.StyledTooltipContainer, null, /*#__PURE__*/React__default['default'].createElement(v3_styleds.StyledTooltipText, {
122
- textAlign: textAlign
123
- }, text), /*#__PURE__*/React__default['default'].createElement(v3_styleds.StyledMouseOverDetectionBox, null)))), children));
100
+ return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
101
+ children: /*#__PURE__*/jsxRuntime.jsxs(styleds.StyledTriggerWrapper, {
102
+ onMouseEnter: onMouseEnter,
103
+ onMouseLeave: onMouseLeave,
104
+ onFocus: onFocus,
105
+ onBlur: onBlur,
106
+ ref: setReferenceElement,
107
+ "data-testid": "".concat(TooltipV3DatatestId.TooltipV3DatatestId.TRIGGER_WRAPPER).concat(id !== '' ? "_".concat(id) : ''),
108
+ children: [/*#__PURE__*/jsxRuntime.jsx(dsPopperjs.DSPopperJS, _objectSpread(_objectSpread({
109
+ referenceElement: referenceElement,
110
+ showPopover: showPopover,
111
+ withoutPortal: true
112
+ }, extraPopperJsProps), {}, {
113
+ children: /*#__PURE__*/_jsx__default["default"]("div", {
114
+ "data-testid": "".concat(TooltipV3DatatestId.TooltipV3DatatestId.TOOLTIP_TEXT_WRAPPER).concat(id !== '' ? "_".concat(id) : '')
115
+ }, void 0, /*#__PURE__*/_jsx__default["default"](styleds.StyledTooltipContainer, {}, void 0, /*#__PURE__*/_jsx__default["default"](styleds.StyledTooltipText, {
116
+ textAlign: textAlign
117
+ }, void 0, text), _StyledMouseOverDetec || (_StyledMouseOverDetec = /*#__PURE__*/_jsx__default["default"](styleds.StyledMouseOverDetectionBox, {}))))
118
+ })), children]
119
+ })
120
+ });
124
121
  };
125
122
 
126
- DSTooltipV3.propTypes = v3_propsTypes.dsTooltipPropTypes;
127
- var DSTooltipV3WithSchema = reactDesc.describe(DSTooltipV3).description('A tooltip component');
128
- DSTooltipV3WithSchema.propTypes = v3_propsTypes.dsTooltipPropTypes;
123
+ const DSTooltipV3WithSchema = reactDesc.describe(DSTooltipV3).description('A tooltip component');
124
+ DSTooltipV3WithSchema.propTypes = propsTypes.dsTooltipPropTypes;
129
125
 
130
126
  exports.DSTooltipV3 = DSTooltipV3;
131
127
  exports.DSTooltipV3WithSchema = DSTooltipV3WithSchema;
132
- exports['default'] = DSTooltipV3;
133
- //# sourceMappingURL=index.js.map
128
+ exports["default"] = DSTooltipV3;
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var reactDesc = require('react-desc');
6
6
 
7
- var dsTooltipPropTypes = {
7
+ const dsTooltipPropTypes = {
8
8
  /**
9
9
  * Tooltip text to be displayed on hover/focus
10
10
  */
@@ -94,4 +94,3 @@ var dsTooltipPropTypes = {
94
94
  };
95
95
 
96
96
  exports.dsTooltipPropTypes = dsTooltipPropTypes;
97
- //# sourceMappingURL=propsTypes.js.map
package/cjs/v3/styleds.js CHANGED
@@ -8,28 +8,36 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
8
8
 
9
9
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
10
10
 
11
- var StyledTooltipContainer = /*#__PURE__*/styled__default['default'].div.withConfig({
11
+ const StyledTooltipContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
12
12
  componentId: "sc-18a4gem-0"
13
- })(["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:", ";"], function (_ref) {
14
- var theme = _ref.theme;
13
+ })(["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 => {
14
+ let {
15
+ theme
16
+ } = _ref;
15
17
  return theme.space.l;
16
- }, function (_ref2) {
17
- var theme = _ref2.theme;
18
+ }, _ref2 => {
19
+ let {
20
+ theme
21
+ } = _ref2;
18
22
  return "".concat(theme.space.xxxs, " ").concat(theme.space.xs);
19
- }, function (_ref3) {
20
- var theme = _ref3.theme;
23
+ }, _ref3 => {
24
+ let {
25
+ theme
26
+ } = _ref3;
21
27
  return theme.colors.neutral[600];
22
28
  });
23
- var StyledTooltipText = /*#__PURE__*/styled__default['default'].div.withConfig({
29
+ const StyledTooltipText = /*#__PURE__*/styled__default["default"].div.withConfig({
24
30
  componentId: "sc-18a4gem-1"
25
- })(["white-space:normal;word-wrap:break-word;display:inline-block;text-align:", ";"], function (_ref4) {
26
- var textAlign = _ref4.textAlign;
31
+ })(["white-space:normal;word-wrap:break-word;display:inline-block;text-align:", ";"], _ref4 => {
32
+ let {
33
+ textAlign
34
+ } = _ref4;
27
35
  return textAlign;
28
36
  });
29
- var StyledMouseOverDetectionBox = /*#__PURE__*/styled__default['default'].div.withConfig({
37
+ const StyledMouseOverDetectionBox = /*#__PURE__*/styled__default["default"].div.withConfig({
30
38
  componentId: "sc-18a4gem-2"
31
39
  })(["position:absolute;top:-15px;right:-15px;width:calc(100% + 30px);height:calc(100% + 30px);z-index:-1;"]);
32
- var StyledTriggerWrapper = /*#__PURE__*/styled__default['default'].div.withConfig({
40
+ const StyledTriggerWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
33
41
  componentId: "sc-18a4gem-3"
34
42
  })(["display:inline-block;width:100%;"]);
35
43
 
@@ -37,4 +45,3 @@ exports.StyledMouseOverDetectionBox = StyledMouseOverDetectionBox;
37
45
  exports.StyledTooltipContainer = StyledTooltipContainer;
38
46
  exports.StyledTooltipText = StyledTooltipText;
39
47
  exports.StyledTriggerWrapper = StyledTriggerWrapper;
40
- //# sourceMappingURL=styleds.js.map
package/esm/index.js CHANGED
@@ -3,30 +3,3 @@ export { DSTooltipV2, TooltipV2WithSchema } from './v2/DSTooltip.js';
3
3
  export { tooltipPositions } from './v2/utils/tooltipPositions.js';
4
4
  export { TooltipType } from './v2/TooltipType.js';
5
5
  export { DSTooltipV3, DSTooltipV3WithSchema } from './v3/index.js';
6
- import '@babel/runtime/helpers/esm/extends';
7
- import '@babel/runtime/helpers/esm/objectWithoutProperties';
8
- import 'react';
9
- import 'react-desc';
10
- import '@elliemae/ds-classnames';
11
- import '@elliemae/ds-utilities';
12
- import '@elliemae/ds-shared/constants';
13
- import '@elliemae/ds-popper';
14
- import './v1/TooltipType.js';
15
- import '@babel/runtime/helpers/esm/defineProperty';
16
- import '@babel/runtime/helpers/esm/slicedToArray';
17
- import '@elliemae/ds-portal';
18
- import 'react-popper';
19
- import './v2/styles.js';
20
- import '@babel/runtime/helpers/esm/taggedTemplateLiteral';
21
- import 'styled-components';
22
- import '@elliemae/ds-system';
23
- import './v2/DSTooltipArrow.js';
24
- import './v2/propTypes.js';
25
- import './v2/utils/setMultipleRefs.js';
26
- import '@elliemae/ds-popperjs';
27
- import './v3/propsTypes.js';
28
- import './v3/config/useWithDefaultProps.js';
29
- import '@elliemae/ds-props-helpers';
30
- import './v3/TooltipV3DatatestId.js';
31
- import './v3/styleds.js';
32
- //# sourceMappingURL=index.js.map