@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.
- package/cjs/index.js +16 -43
- package/cjs/v1/DSTooltip.js +54 -57
- package/cjs/v1/TooltipType.js +1 -2
- package/cjs/v2/DSTooltip.js +91 -129
- package/cjs/v2/DSTooltipArrow.js +25 -23
- package/cjs/v2/TooltipType.js +1 -2
- package/cjs/v2/index.d.js +0 -1
- package/cjs/v2/propTypes.js +5 -6
- package/cjs/v2/styles.js +28 -19
- package/cjs/v2/utils/setMultipleRefs.js +10 -5
- package/cjs/v2/utils/tooltipPositions.js +1 -2
- package/cjs/v3/TooltipV3DatatestId.js +1 -2
- package/cjs/v3/config/useWithDefaultProps.js +3 -6
- package/cjs/v3/index.d.js +0 -1
- package/cjs/v3/index.js +77 -82
- package/cjs/v3/propsTypes.js +1 -2
- package/cjs/v3/styleds.js +20 -13
- package/esm/index.js +0 -27
- package/esm/v1/DSTooltip.js +47 -50
- package/esm/v1/TooltipType.js +1 -2
- package/esm/v2/DSTooltip.js +80 -116
- package/esm/v2/DSTooltipArrow.js +23 -21
- package/esm/v2/TooltipType.js +1 -2
- package/esm/v2/index.d.js +0 -1
- package/esm/v2/propTypes.js +1 -2
- package/esm/v2/styles.js +27 -18
- package/esm/v2/utils/setMultipleRefs.js +10 -5
- package/esm/v2/utils/tooltipPositions.js +1 -2
- package/esm/v3/TooltipV3DatatestId.js +1 -2
- package/esm/v3/config/useWithDefaultProps.js +3 -6
- package/esm/v3/index.d.js +0 -1
- package/esm/v3/index.js +68 -72
- package/esm/v3/propsTypes.js +1 -2
- package/esm/v3/styleds.js +20 -13
- package/package.json +103 -20
- package/types/index.d.ts +6 -0
- package/types/v1/DSTooltip.d.ts +106 -0
- package/types/v1/TooltipType.d.ts +4 -0
- package/types/v2/DSTooltip.d.ts +70 -0
- package/types/v2/DSTooltipArrow.d.ts +4 -0
- package/types/v2/TooltipType.d.ts +5 -0
- package/types/v2/propTypes.d.ts +60 -0
- package/types/v2/styles.d.ts +7 -0
- package/types/v2/tests/DSTooltipV2.test.d.ts +1 -0
- package/types/v2/utils/setMultipleRefs.d.ts +1 -0
- package/types/v2/utils/tooltipPositions.d.ts +15 -0
- package/types/v3/TooltipV3DatatestId.d.ts +4 -0
- package/types/v3/config/useWithDefaultProps.d.ts +2 -0
- package/types/v3/index.d.ts +6 -0
- package/types/v3/propsTypes.d.ts +103 -0
- package/types/v3/styleds.d.ts +6 -0
- package/cjs/index.js.map +0 -1
- package/cjs/v1/DSTooltip.js.map +0 -1
- package/cjs/v1/TooltipType.js.map +0 -1
- package/cjs/v2/DSTooltip.js.map +0 -1
- package/cjs/v2/DSTooltipArrow.js.map +0 -1
- package/cjs/v2/TooltipType.js.map +0 -1
- package/cjs/v2/index.d.js.map +0 -1
- package/cjs/v2/propTypes.js.map +0 -1
- package/cjs/v2/styles.js.map +0 -1
- package/cjs/v2/utils/setMultipleRefs.js.map +0 -1
- package/cjs/v2/utils/tooltipPositions.js.map +0 -1
- package/cjs/v3/TooltipV3DatatestId.js.map +0 -1
- package/cjs/v3/config/useWithDefaultProps.js.map +0 -1
- package/cjs/v3/index.d.js.map +0 -1
- package/cjs/v3/index.js.map +0 -1
- package/cjs/v3/propsTypes.js.map +0 -1
- package/cjs/v3/styleds.js.map +0 -1
- package/esm/index.js.map +0 -1
- package/esm/v1/DSTooltip.js.map +0 -1
- package/esm/v1/TooltipType.js.map +0 -1
- package/esm/v2/DSTooltip.js.map +0 -1
- package/esm/v2/DSTooltipArrow.js.map +0 -1
- package/esm/v2/TooltipType.js.map +0 -1
- package/esm/v2/index.d.js.map +0 -1
- package/esm/v2/propTypes.js.map +0 -1
- package/esm/v2/styles.js.map +0 -1
- package/esm/v2/utils/setMultipleRefs.js.map +0 -1
- package/esm/v2/utils/tooltipPositions.js.map +0 -1
- package/esm/v3/TooltipV3DatatestId.js.map +0 -1
- package/esm/v3/config/useWithDefaultProps.js.map +0 -1
- package/esm/v3/index.d.js.map +0 -1
- package/esm/v3/index.js.map +0 -1
- package/esm/v3/propsTypes.js.map +0 -1
- package/esm/v3/styleds.js.map +0 -1
- package/v1/DSTooltip/package.json +0 -10
- package/v1/TooltipType/package.json +0 -10
- package/v2/DSTooltip/package.json +0 -10
- package/v2/DSTooltipArrow/package.json +0 -10
- package/v2/TooltipType/package.json +0 -10
- package/v2/package.json +0 -10
- package/v2/propTypes/package.json +0 -10
- package/v2/styles/package.json +0 -10
- package/v2/utils/setMultipleRefs/package.json +0 -10
- package/v2/utils/tooltipPositions/package.json +0 -10
- package/v3/TooltipV3DatatestId/package.json +0 -10
- package/v3/config/useWithDefaultProps/package.json +0 -10
- package/v3/package.json +0 -10
- package/v3/propsTypes/package.json +0 -10
- package/v3/styleds/package.json +0 -10
package/cjs/v2/propTypes.js
CHANGED
|
@@ -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
|
|
8
|
-
var
|
|
7
|
+
var TooltipType = require('./TooltipType.js');
|
|
8
|
+
var tooltipPositions = require('./utils/tooltipPositions.js');
|
|
9
9
|
|
|
10
|
-
|
|
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(
|
|
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(
|
|
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
|
-
|
|
16
|
-
|
|
17
|
-
|
|
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
|
-
|
|
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;"],
|
|
23
|
-
|
|
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
|
-
},
|
|
26
|
-
|
|
27
|
+
}, _ref2 => {
|
|
28
|
+
let {
|
|
29
|
+
theme
|
|
30
|
+
} = _ref2;
|
|
27
31
|
return "".concat(theme.space.xxxs, " ").concat(theme.space.xs);
|
|
28
|
-
},
|
|
29
|
-
|
|
32
|
+
}, _ref3 => {
|
|
33
|
+
let {
|
|
34
|
+
theme
|
|
35
|
+
} = _ref3;
|
|
30
36
|
return theme.colors.neutral[600];
|
|
31
|
-
},
|
|
32
|
-
|
|
37
|
+
}, _ref4 => {
|
|
38
|
+
let {
|
|
39
|
+
showTooltip
|
|
40
|
+
} = _ref4;
|
|
33
41
|
return showTooltip ? 'visible' : 'hidden';
|
|
34
|
-
},
|
|
35
|
-
|
|
36
|
-
|
|
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
|
-
|
|
48
|
+
const StyledTriggerComponentContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
|
|
39
49
|
componentId: "sc-1dtjf9j-2"
|
|
40
50
|
})(["display:inline-block;"]);
|
|
41
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
16
|
+
const filteredRefs = refs.filter(Boolean);
|
|
11
17
|
if (!filteredRefs.length) return null;
|
|
12
18
|
if (filteredRefs.length === 0) return filteredRefs[0];
|
|
13
|
-
return
|
|
14
|
-
filteredRefs.forEach(
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
8
|
+
const noop = () => {};
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
const defaultProps = {
|
|
11
11
|
onOpen: noop,
|
|
12
12
|
onClose: noop,
|
|
13
13
|
id: '',
|
|
14
14
|
textAlign: 'left'
|
|
15
15
|
};
|
|
16
|
-
|
|
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
package/cjs/v3/index.js
CHANGED
|
@@ -2,81 +2,71 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var
|
|
6
|
-
var
|
|
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
|
-
|
|
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
|
|
12
|
-
var
|
|
13
|
-
var
|
|
14
|
-
var
|
|
15
|
-
require('
|
|
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
|
|
21
|
-
var
|
|
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
|
|
29
|
+
var _StyledMouseOverDetec;
|
|
26
30
|
|
|
27
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
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
|
-
|
|
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
|
-
|
|
65
|
+
const hideTooltip = react.useCallback(() => {
|
|
76
66
|
setShowPopover(false);
|
|
77
67
|
onClose();
|
|
78
68
|
}, [onClose]);
|
|
79
|
-
|
|
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
|
-
|
|
77
|
+
const onBlur = react.useCallback(() => {
|
|
88
78
|
setIsFocused(false);
|
|
89
79
|
if (!isHover || latestOpenInteraction === 'onFocus') hideTooltip();
|
|
90
80
|
}, [hideTooltip, isHover, latestOpenInteraction]);
|
|
91
|
-
|
|
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
|
-
|
|
89
|
+
const onMouseLeave = react.useCallback(() => {
|
|
100
90
|
setIsHover(false);
|
|
101
91
|
if (!isFocused || latestOpenInteraction === 'onMouseEnter') hideTooltip();
|
|
102
92
|
}, [hideTooltip, isFocused, latestOpenInteraction]);
|
|
103
|
-
|
|
104
|
-
|
|
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__*/
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
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.
|
|
127
|
-
|
|
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[
|
|
133
|
-
//# sourceMappingURL=index.js.map
|
|
128
|
+
exports["default"] = DSTooltipV3;
|
package/cjs/v3/propsTypes.js
CHANGED
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var reactDesc = require('react-desc');
|
|
6
6
|
|
|
7
|
-
|
|
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
|
-
|
|
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:", ";"],
|
|
14
|
-
|
|
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
|
-
},
|
|
17
|
-
|
|
18
|
+
}, _ref2 => {
|
|
19
|
+
let {
|
|
20
|
+
theme
|
|
21
|
+
} = _ref2;
|
|
18
22
|
return "".concat(theme.space.xxxs, " ").concat(theme.space.xs);
|
|
19
|
-
},
|
|
20
|
-
|
|
23
|
+
}, _ref3 => {
|
|
24
|
+
let {
|
|
25
|
+
theme
|
|
26
|
+
} = _ref3;
|
|
21
27
|
return theme.colors.neutral[600];
|
|
22
28
|
});
|
|
23
|
-
|
|
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:", ";"],
|
|
26
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|