@elliemae/ds-tooltip 3.3.0-next.4 → 3.3.0-next.7
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/dist/cjs/v1/DSTooltip.js +22 -65
- package/dist/cjs/v1/DSTooltip.js.map +1 -1
- package/dist/cjs/v2/DSTooltip.js +6 -21
- package/dist/cjs/v2/DSTooltip.js.map +1 -1
- package/dist/cjs/v3/DSTooltipV3.js +5 -30
- package/dist/cjs/v3/DSTooltipV3.js.map +1 -1
- package/dist/esm/v1/DSTooltip.js +22 -67
- package/dist/esm/v1/DSTooltip.js.map +1 -1
- package/dist/esm/v2/DSTooltip.js +6 -23
- package/dist/esm/v2/DSTooltip.js.map +1 -1
- package/dist/esm/v3/DSTooltipV3.js +5 -32
- package/dist/esm/v3/DSTooltipV3.js.map +1 -1
- package/package.json +9 -9
package/dist/cjs/v1/DSTooltip.js
CHANGED
|
@@ -1,39 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
var __create = Object.create;
|
|
3
3
|
var __defProp = Object.defineProperty;
|
|
4
|
-
var __defProps = Object.defineProperties;
|
|
5
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
7
5
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
8
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
9
6
|
var __getProtoOf = Object.getPrototypeOf;
|
|
10
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
11
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
12
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
13
|
-
var __spreadValues = (a, b) => {
|
|
14
|
-
for (var prop in b || (b = {}))
|
|
15
|
-
if (__hasOwnProp.call(b, prop))
|
|
16
|
-
__defNormalProp(a, prop, b[prop]);
|
|
17
|
-
if (__getOwnPropSymbols)
|
|
18
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
19
|
-
if (__propIsEnum.call(b, prop))
|
|
20
|
-
__defNormalProp(a, prop, b[prop]);
|
|
21
|
-
}
|
|
22
|
-
return a;
|
|
23
|
-
};
|
|
24
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
25
|
-
var __objRest = (source, exclude) => {
|
|
26
|
-
var target = {};
|
|
27
|
-
for (var prop in source)
|
|
28
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
29
|
-
target[prop] = source[prop];
|
|
30
|
-
if (source != null && __getOwnPropSymbols)
|
|
31
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
32
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
33
|
-
target[prop] = source[prop];
|
|
34
|
-
}
|
|
35
|
-
return target;
|
|
36
|
-
};
|
|
37
8
|
var __export = (target, all) => {
|
|
38
9
|
for (var name in all)
|
|
39
10
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -71,40 +42,24 @@ const TooltipContainer = (0, import_ds_classnames.aggregatedClasses)("div")(bloc
|
|
|
71
42
|
const TooltipText = (0, import_ds_classnames.aggregatedClasses)("span")(blockName, "text", false, {
|
|
72
43
|
propsToRemoveFromFinalElement: ["isHovered", "isDragged"]
|
|
73
44
|
});
|
|
74
|
-
const DSTooltip = (
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
"containerProps",
|
|
93
|
-
"innerRef",
|
|
94
|
-
"placement",
|
|
95
|
-
"title",
|
|
96
|
-
"delayClose",
|
|
97
|
-
"delayOpen",
|
|
98
|
-
"interactionType",
|
|
99
|
-
"triggerComponent",
|
|
100
|
-
"className",
|
|
101
|
-
"isOpen",
|
|
102
|
-
"onOpen",
|
|
103
|
-
"springAnimationComponent",
|
|
104
|
-
"tooltipType",
|
|
105
|
-
"showArrow",
|
|
106
|
-
"zIndex"
|
|
107
|
-
]);
|
|
45
|
+
const DSTooltip = ({
|
|
46
|
+
containerProps = {},
|
|
47
|
+
innerRef,
|
|
48
|
+
placement = import_ds_popper.PopperPositions.TOP,
|
|
49
|
+
title = "",
|
|
50
|
+
delayClose = import_ds_shared.DEFAULT_DELAY_CLOSE,
|
|
51
|
+
delayOpen = import_ds_shared.DEFAULT_DELAY_OPEN,
|
|
52
|
+
interactionType = import_ds_popper.PopperInteractions.HOVER,
|
|
53
|
+
triggerComponent = null,
|
|
54
|
+
className = "",
|
|
55
|
+
isOpen = void 0,
|
|
56
|
+
onOpen = () => null,
|
|
57
|
+
springAnimationComponent = void 0,
|
|
58
|
+
tooltipType = import_TooltipType.TooltipType.TOOLTIP,
|
|
59
|
+
showArrow = true,
|
|
60
|
+
zIndex,
|
|
61
|
+
...otherTooltipProps
|
|
62
|
+
}) => {
|
|
108
63
|
const { cssClassName: tooltipBlockName } = (0, import_ds_classnames.convertPropToCssClassName)(blockName);
|
|
109
64
|
let Content = title;
|
|
110
65
|
if (typeof title === "string") {
|
|
@@ -112,10 +67,12 @@ const DSTooltip = (_a) => {
|
|
|
112
67
|
}
|
|
113
68
|
return /* @__PURE__ */ import_react.default.createElement(import_ds_popper.DSPopper, {
|
|
114
69
|
blockName: tooltipBlockName,
|
|
115
|
-
contentComponent: /* @__PURE__ */ import_react.default.createElement(TooltipContainer,
|
|
70
|
+
contentComponent: /* @__PURE__ */ import_react.default.createElement(TooltipContainer, {
|
|
71
|
+
...containerProps,
|
|
72
|
+
...otherTooltipProps,
|
|
116
73
|
className: `tooltip-container--${tooltipType} ${className}`,
|
|
117
74
|
innerRef
|
|
118
|
-
}
|
|
75
|
+
}, Content),
|
|
119
76
|
delayClose,
|
|
120
77
|
delayOpen,
|
|
121
78
|
interactionType,
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/v1/DSTooltip.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable max-lines */\nimport React from 'react';\nimport { aggregatedClasses, convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport { describe, PropTypes, getComponentFromProps } from '@elliemae/ds-utilities';\nimport { DEFAULT_DELAY_OPEN, DEFAULT_DELAY_CLOSE } from '@elliemae/ds-shared';\nimport { DSPopper, PopperPositions, PopperInteractions, interactions, positions } from '@elliemae/ds-popper';\nimport { TooltipType } from './TooltipType';\n\nconst blockName = 'tooltip';\n\nconst TooltipContainer = aggregatedClasses('div')(blockName, false, false, {\n propsToRemoveFromFinalElement: ['isHovered', 'isDragged'],\n});\nconst TooltipText = aggregatedClasses('span')(blockName, 'text', false, {\n propsToRemoveFromFinalElement: ['isHovered', 'isDragged'],\n});\n\nconst DSTooltip = ({\n containerProps = {},\n innerRef,\n placement = PopperPositions.TOP,\n title = '',\n delayClose = DEFAULT_DELAY_CLOSE,\n delayOpen = DEFAULT_DELAY_OPEN,\n interactionType = PopperInteractions.HOVER,\n triggerComponent = null,\n className = '',\n isOpen = undefined,\n onOpen = () => null,\n springAnimationComponent = undefined,\n tooltipType = TooltipType.TOOLTIP,\n showArrow = true,\n zIndex,\n ...otherTooltipProps\n}) => {\n const { cssClassName: tooltipBlockName } = convertPropToCssClassName(blockName);\n\n let Content = title;\n if (typeof title === 'string') {\n Content = <TooltipText>{title}</TooltipText>;\n }\n return (\n <DSPopper\n blockName={tooltipBlockName}\n contentComponent={\n <TooltipContainer\n {...containerProps}\n {...otherTooltipProps}\n className={`tooltip-container--${tooltipType} ${className}`}\n innerRef={innerRef}\n >\n {Content}\n </TooltipContainer>\n }\n delayClose={delayClose}\n delayOpen={delayOpen}\n interactionType={interactionType}\n isOpen={isOpen}\n onOpen={onOpen}\n placement={placement}\n showArrow={tooltipType === TooltipType.TOOLTIP ? showArrow : false}\n springAnimationComponent={springAnimationComponent}\n triggerComponent={getComponentFromProps(triggerComponent)}\n zIndex={zIndex}\n />\n );\n};\n\nconst tooltipProps = {\n containerProps: PropTypes.object.description('Set of Properties attached to the main container'),\n placement: PropTypes.oneOf(positions).description('Tooltip position').defaultValue(PopperPositions.TOP),\n title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).description('Tooltip content').isRequired,\n delayClose: PropTypes.string.description('Delay to close the tooltip').defaultValue(DEFAULT_DELAY_CLOSE),\n delayOpen: PropTypes.string.description('Delay to open the tooltip ').defaultValue(DEFAULT_DELAY_OPEN),\n interactionType: PropTypes.oneOf(interactions)\n .description('A type indicating how to open/close the tooltip')\n .defaultValue(PopperInteractions.HOVER),\n triggerComponent: PropTypes.element.description(\n `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`,\n ).isRequired,\n isOpen: PropTypes.bool.description('Whether the tooltip is visible or not').defaultValue(undefined),\n onOpen: PropTypes.func.description('Handler when the tooltip opens'),\n springAnimationComponent: PropTypes.element.description('Spring animation component'),\n showArrow: PropTypes.bool.description('Whether to show an arrow or not').defaultValue(true),\n className: PropTypes.string.description('css class'),\n tooltipType: PropTypes.oneOf(['tooltip', 'toolbar']).description('Type of tooltip').defaultValue(TooltipType.TOOLTIP),\n zIndex: PropTypes.number.description('z-index value assigned to the tooltip').defaultValue(undefined),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('Ref to the tooltip container element'),\n};\n\nDSTooltip.propTypes = tooltipProps;\nDSTooltip.displayName = 'DSTooltip';\nconst TooltipWithSchema = describe(DSTooltip);\nTooltipWithSchema.propTypes = tooltipProps;\n\nexport { DSTooltip, TooltipContainer, TooltipText, TooltipWithSchema };\nexport default DSTooltip;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkB;AAClB,2BAA6D;AAC7D,0BAA2D;AAC3D,uBAAwD;AACxD,uBAAuF;AACvF,yBAA4B;AAE5B,MAAM,YAAY;AAElB,MAAM,mBAAmB,4CAAkB,KAAK,EAAE,WAAW,OAAO,OAAO;AAAA,EACzE,+BAA+B,CAAC,aAAa,WAAW;AAC1D,CAAC;AACD,MAAM,cAAc,4CAAkB,MAAM,EAAE,WAAW,QAAQ,OAAO;AAAA,EACtE,+BAA+B,CAAC,aAAa,WAAW;AAC1D,CAAC;AAED,MAAM,YAAY,CAAC;AAAA,EACjB,iBAAiB,CAAC;AAAA,EAClB;AAAA,EACA,YAAY,iCAAgB;AAAA,EAC5B,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,kBAAkB,oCAAmB;AAAA,EACrC,mBAAmB;AAAA,EACnB,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,SAAS,MAAM;AAAA,EACf,2BAA2B;AAAA,EAC3B,cAAc,+BAAY;AAAA,EAC1B,YAAY;AAAA,EACZ;AAAA,KACG;AAAA,MACC;AACJ,QAAM,EAAE,cAAc,qBAAqB,oDAA0B,SAAS;AAE9E,MAAI,UAAU;AACd,MAAI,OAAO,UAAU,UAAU;AAC7B,cAAU,mDAAC,mBAAa,KAAM;AAAA,EAChC;AACA,SACE,mDAAC;AAAA,IACC,WAAW;AAAA,IACX,kBACE,mDAAC;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,WAAW,sBAAsB,eAAe;AAAA,MAChD;AAAA,OAEC,OACH;AAAA,IAEF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW,gBAAgB,+BAAY,UAAU,YAAY;AAAA,IAC7D;AAAA,IACA,kBAAkB,+CAAsB,gBAAgB;AAAA,IACxD;AAAA,GACF;AAEJ;AAEA,MAAM,eAAe;AAAA,EACnB,gBAAgB,8BAAU,OAAO,YAAY,kDAAkD;AAAA,EAC/F,WAAW,8BAAU,MAAM,0BAAS,EAAE,YAAY,kBAAkB,EAAE,aAAa,iCAAgB,GAAG;AAAA,EACtG,OAAO,8BAAU,UAAU,CAAC,8BAAU,QAAQ,8BAAU,OAAO,CAAC,EAAE,YAAY,iBAAiB,EAAE;AAAA,EACjG,YAAY,8BAAU,OAAO,YAAY,4BAA4B,EAAE,aAAa,oCAAmB;AAAA,EACvG,WAAW,8BAAU,OAAO,YAAY,4BAA4B,EAAE,aAAa,mCAAkB;AAAA,EACrG,iBAAiB,8BAAU,MAAM,6BAAY,EAC1C,YAAY,iDAAiD,EAC7D,aAAa,oCAAmB,KAAK;AAAA,EACxC,kBAAkB,8BAAU,QAAQ,YAClC;AAAA;AAAA,0EAGF,EAAE;AAAA,EACF,QAAQ,8BAAU,KAAK,YAAY,uCAAuC,EAAE,aAAa,MAAS;AAAA,EAClG,QAAQ,8BAAU,KAAK,YAAY,gCAAgC;AAAA,EACnE,0BAA0B,8BAAU,QAAQ,YAAY,4BAA4B;AAAA,EACpF,WAAW,8BAAU,KAAK,YAAY,iCAAiC,EAAE,aAAa,IAAI;AAAA,EAC1F,WAAW,8BAAU,OAAO,YAAY,WAAW;AAAA,EACnD,aAAa,8BAAU,MAAM,CAAC,WAAW,SAAS,CAAC,EAAE,YAAY,iBAAiB,EAAE,aAAa,+BAAY,OAAO;AAAA,EACpH,QAAQ,8BAAU,OAAO,YAAY,uCAAuC,EAAE,aAAa,MAAS;AAAA,EACpG,UAAU,8BAAU,UAAU,CAAC,8BAAU,MAAM,8BAAU,MAAM,CAAC,EAAE,YAAY,sCAAsC;AACtH;AAEA,UAAU,YAAY;AACtB,UAAU,cAAc;AACxB,MAAM,oBAAoB,kCAAS,SAAS;AAC5C,kBAAkB,YAAY;AAG9B,IAAO,oBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/v2/DSTooltip.js
CHANGED
|
@@ -1,27 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
var __create = Object.create;
|
|
3
3
|
var __defProp = Object.defineProperty;
|
|
4
|
-
var __defProps = Object.defineProperties;
|
|
5
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
7
5
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
8
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
9
6
|
var __getProtoOf = Object.getPrototypeOf;
|
|
10
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
11
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
12
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
13
|
-
var __spreadValues = (a, b) => {
|
|
14
|
-
for (var prop in b || (b = {}))
|
|
15
|
-
if (__hasOwnProp.call(b, prop))
|
|
16
|
-
__defNormalProp(a, prop, b[prop]);
|
|
17
|
-
if (__getOwnPropSymbols)
|
|
18
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
19
|
-
if (__propIsEnum.call(b, prop))
|
|
20
|
-
__defNormalProp(a, prop, b[prop]);
|
|
21
|
-
}
|
|
22
|
-
return a;
|
|
23
|
-
};
|
|
24
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
25
8
|
var __export = (target, all) => {
|
|
26
9
|
for (var name in all)
|
|
27
10
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -91,7 +74,7 @@ const DSTooltipV2 = ({
|
|
|
91
74
|
}
|
|
92
75
|
},
|
|
93
76
|
{ name: "arrow", options: { element: arrowElement } },
|
|
94
|
-
|
|
77
|
+
{ ...extraModifiers }
|
|
95
78
|
]
|
|
96
79
|
});
|
|
97
80
|
const handleShowTooltipOn = (0, import_react.useCallback)(() => {
|
|
@@ -131,14 +114,16 @@ const DSTooltipV2 = ({
|
|
|
131
114
|
onFocus: handleShowTooltipOn,
|
|
132
115
|
onBlur: handleShowTooltipOff,
|
|
133
116
|
onKeyDown: handleKeyDown
|
|
134
|
-
}, triggerComponent), isAnimating || showTooltip ? /* @__PURE__ */ import_react.default.createElement(import_ds_portal.DSPortal, null, /* @__PURE__ */ import_react.default.createElement(import_styles.StyledTooltipContainer,
|
|
117
|
+
}, triggerComponent), isAnimating || showTooltip ? /* @__PURE__ */ import_react.default.createElement(import_ds_portal.DSPortal, null, /* @__PURE__ */ import_react.default.createElement(import_styles.StyledTooltipContainer, {
|
|
135
118
|
className,
|
|
136
119
|
showTooltip,
|
|
137
120
|
tooltipType,
|
|
138
121
|
"data-testid": "ds-tooltip-container",
|
|
139
122
|
ref: (ref) => (0, import_setMultipleRefs.setMultipleRefs)(setPopperElement, innerRef)(ref),
|
|
140
|
-
style:
|
|
141
|
-
|
|
123
|
+
style: { ...styles.popper, zIndex: zIndex ?? theme.zIndex.tooltip },
|
|
124
|
+
...containerProps,
|
|
125
|
+
...attributes.popper
|
|
126
|
+
}, /* @__PURE__ */ import_react.default.createElement(import_styles.StyledAnimatedTooltip, {
|
|
142
127
|
showTooltip,
|
|
143
128
|
"data-testid": "ds-tooltip",
|
|
144
129
|
onAnimationEnd: checkAnimationStatus
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/v2/DSTooltip.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useState, useCallback, useEffect, useRef, useContext } from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { DSPortal } from '@elliemae/ds-portal';\nimport { DEFAULT_DELAY_OPEN, DEFAULT_DELAY_CLOSE } from '@elliemae/ds-shared';\nimport { usePopper } from 'react-popper';\nimport { ThemeContext } from '@elliemae/ds-system';\nimport { tooltipPositions } from './utils/tooltipPositions';\nimport { TooltipType } from './TooltipType';\nimport {\n StyledTooltipContainer,\n StyledTriggerComponentContainer,\n StyledTooltipText,\n StyledAnimatedTooltip,\n} from './styles';\nimport { DSTooltipArrow } from './DSTooltipArrow';\nimport { DSTooltipT } from '.';\nimport { tooltipV2Props } from './propTypes';\nimport { setMultipleRefs } from './utils/setMultipleRefs';\n\nconst DSTooltipV2 = ({\n containerProps = {},\n innerRef,\n placement = tooltipPositions.BOTTOM,\n title = '',\n delayClose = DEFAULT_DELAY_CLOSE,\n delayOpen = DEFAULT_DELAY_OPEN,\n triggerComponent = null,\n className = '',\n getIsOpen = () => null,\n onOpen = () => null,\n tooltipType = TooltipType.TOOLTIP,\n showArrow = true,\n offset = [0, 14],\n zIndex,\n extraModifiers = {},\n}: DSTooltipT): React.ReactElement => {\n const [showTooltip, setShowTooltip] = useState<boolean>(false);\n const [isAnimating, setIsAnimating] = useState<boolean>(false);\n const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(triggerComponent);\n const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);\n const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null);\n const timerOpen = useRef(null);\n const timerClosed = useRef(null);\n\n const { styles, attributes } = usePopper(referenceElement, popperElement, {\n placement,\n modifiers: [\n { name: 'hide', enabled: true },\n {\n name: 'offset',\n enabled: true,\n options: {\n offset: tooltipType === TooltipType.TOOLBAR ? [0, 0] : offset,\n },\n },\n { name: 'arrow', options: { element: arrowElement } },\n { ...extraModifiers },\n ],\n });\n\n const handleShowTooltipOn = useCallback(() => {\n timerOpen.current = setTimeout(() => {\n setShowTooltip(true);\n setIsAnimating(true);\n getIsOpen(true);\n onOpen();\n }, delayOpen);\n }, [delayOpen, getIsOpen, onOpen]);\n\n const handleShowTooltipOff = useCallback(() => {\n timerClosed.current = setTimeout(() => {\n setShowTooltip(false);\n setIsAnimating(true);\n getIsOpen(false);\n }, delayClose);\n }, [delayClose, getIsOpen]);\n\n const handleKeyDown = useCallback((e) => {\n if (e.key === 'Escape') {\n e.target.blur();\n }\n }, []);\n\n const checkAnimationStatus = useCallback(() => {\n if (!showTooltip) {\n setIsAnimating(false);\n }\n }, [showTooltip]);\n\n useEffect(\n () => () => {\n clearTimeout(timerClosed.current);\n clearTimeout(timerOpen.current);\n },\n [],\n );\n\n const theme = useContext(ThemeContext);\n\n return (\n <>\n <StyledTriggerComponentContainer\n ref={setReferenceElement}\n onMouseEnter={handleShowTooltipOn}\n onMouseLeave={handleShowTooltipOff}\n onFocus={handleShowTooltipOn}\n onBlur={handleShowTooltipOff}\n onKeyDown={handleKeyDown}\n >\n {triggerComponent}\n </StyledTriggerComponentContainer>\n {isAnimating || showTooltip ? (\n <DSPortal>\n <StyledTooltipContainer\n className={className}\n showTooltip={showTooltip}\n tooltipType={tooltipType}\n data-testid=\"ds-tooltip-container\"\n ref={(ref) => setMultipleRefs(setPopperElement, innerRef)(ref)}\n style={{ ...styles.popper, zIndex: zIndex ?? theme.zIndex.tooltip }}\n {...containerProps}\n {...attributes.popper}\n >\n <StyledAnimatedTooltip\n showTooltip={showTooltip}\n data-testid=\"ds-tooltip\"\n onAnimationEnd={checkAnimationStatus}\n >\n <StyledTooltipText>{title}</StyledTooltipText>\n {tooltipType === TooltipType.TOOLTIP && showArrow ? (\n <DSTooltipArrow\n arrowElementRef={setArrowElement}\n style={styles.arrow}\n placement={attributes.popper ? attributes.popper['data-popper-placement'] : 'bottom'}\n />\n ) : null}\n </StyledAnimatedTooltip>\n </StyledTooltipContainer>\n </DSPortal>\n ) : null}\n </>\n );\n};\n\nDSTooltipV2.propTypes = tooltipV2Props;\nDSTooltipV2.displayName = 'DSTooltipV2';\nconst TooltipV2WithSchema = describe(DSTooltipV2);\nTooltipV2WithSchema.propTypes = tooltipV2Props;\n\nexport { DSTooltipV2, TooltipV2WithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAA4E;AAC5E,0BAAyB;AACzB,uBAAyB;AACzB,uBAAwD;AACxD,0BAA0B;AAC1B,uBAA6B;AAC7B,8BAAiC;AACjC,yBAA4B;AAC5B,oBAKO;AACP,4BAA+B;AAE/B,uBAA+B;AAC/B,6BAAgC;AAEhC,MAAM,cAAc,CAAC;AAAA,EACnB,iBAAiB,CAAC;AAAA,EAClB;AAAA,EACA,YAAY,yCAAiB;AAAA,EAC7B,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,mBAAmB;AAAA,EACnB,YAAY;AAAA,EACZ,YAAY,MAAM;AAAA,EAClB,SAAS,MAAM;AAAA,EACf,cAAc,+BAAY;AAAA,EAC1B,YAAY;AAAA,EACZ,SAAS,CAAC,GAAG,EAAE;AAAA,EACf;AAAA,EACA,iBAAiB,CAAC;AAAA,MACkB;AACpC,QAAM,CAAC,aAAa,kBAAkB,2BAAkB,KAAK;AAC7D,QAAM,CAAC,aAAa,kBAAkB,2BAAkB,KAAK;AAC7D,QAAM,CAAC,kBAAkB,uBAAuB,2BAA6B,gBAAgB;AAC7F,QAAM,CAAC,eAAe,oBAAoB,2BAAgC,IAAI;AAC9E,QAAM,CAAC,cAAc,mBAAmB,2BAAgC,IAAI;AAC5E,QAAM,YAAY,yBAAO,IAAI;AAC7B,QAAM,cAAc,yBAAO,IAAI;AAE/B,QAAM,EAAE,QAAQ,eAAe,mCAAU,kBAAkB,eAAe;AAAA,IACxE;AAAA,IACA,WAAW;AAAA,MACT,EAAE,MAAM,QAAQ,SAAS,KAAK;AAAA,MAC9B;AAAA,QACE,MAAM;AAAA,QACN,SAAS;AAAA,QACT,SAAS;AAAA,UACP,QAAQ,gBAAgB,+BAAY,UAAU,CAAC,GAAG,CAAC,IAAI;AAAA,QACzD;AAAA,MACF;AAAA,MACA,EAAE,MAAM,SAAS,SAAS,EAAE,SAAS,aAAa,EAAE;AAAA,MACpD,EAAE,GAAG,eAAe;AAAA,IACtB;AAAA,EACF,CAAC;AAED,QAAM,sBAAsB,8BAAY,MAAM;AAC5C,cAAU,UAAU,WAAW,MAAM;AACnC,qBAAe,IAAI;AACnB,qBAAe,IAAI;AACnB,gBAAU,IAAI;AACd,aAAO;AAAA,IACT,GAAG,SAAS;AAAA,EACd,GAAG,CAAC,WAAW,WAAW,MAAM,CAAC;AAEjC,QAAM,uBAAuB,8BAAY,MAAM;AAC7C,gBAAY,UAAU,WAAW,MAAM;AACrC,qBAAe,KAAK;AACpB,qBAAe,IAAI;AACnB,gBAAU,KAAK;AAAA,IACjB,GAAG,UAAU;AAAA,EACf,GAAG,CAAC,YAAY,SAAS,CAAC;AAE1B,QAAM,gBAAgB,8BAAY,CAAC,MAAM;AACvC,QAAI,EAAE,QAAQ,UAAU;AACtB,QAAE,OAAO,KAAK;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,uBAAuB,8BAAY,MAAM;AAC7C,QAAI,CAAC,aAAa;AAChB,qBAAe,KAAK;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,WAAW,CAAC;AAEhB,8BACE,MAAM,MAAM;AACV,iBAAa,YAAY,OAAO;AAChC,iBAAa,UAAU,OAAO;AAAA,EAChC,GACA,CAAC,CACH;AAEA,QAAM,QAAQ,6BAAW,6BAAY;AAErC,SACE,wFACE,mDAAC;AAAA,IACC,KAAK;AAAA,IACL,cAAc;AAAA,IACd,cAAc;AAAA,IACd,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,WAAW;AAAA,KAEV,gBACH,GACC,eAAe,cACd,mDAAC,iCACC,mDAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAY;AAAA,IACZ,KAAK,CAAC,QAAQ,4CAAgB,kBAAkB,QAAQ,EAAE,GAAG;AAAA,IAC7D,OAAO,EAAE,GAAG,OAAO,QAAQ,QAAQ,UAAU,MAAM,OAAO,QAAQ;AAAA,IACjE,GAAG;AAAA,IACH,GAAG,WAAW;AAAA,KAEf,mDAAC;AAAA,IACC;AAAA,IACA,eAAY;AAAA,IACZ,gBAAgB;AAAA,KAEhB,mDAAC,uCAAmB,KAAM,GACzB,gBAAgB,+BAAY,WAAW,YACtC,mDAAC;AAAA,IACC,iBAAiB;AAAA,IACjB,OAAO,OAAO;AAAA,IACd,WAAW,WAAW,SAAS,WAAW,OAAO,2BAA2B;AAAA,GAC9E,IACE,IACN,CACF,CACF,IACE,IACN;AAEJ;AAEA,YAAY,YAAY;AACxB,YAAY,cAAc;AAC1B,MAAM,sBAAsB,kCAAS,WAAW;AAChD,oBAAoB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -3,34 +3,8 @@ var __create = Object.create;
|
|
|
3
3
|
var __defProp = Object.defineProperty;
|
|
4
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
5
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
7
6
|
var __getProtoOf = Object.getPrototypeOf;
|
|
8
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
9
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
10
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
11
|
-
var __spreadValues = (a, b) => {
|
|
12
|
-
for (var prop in b || (b = {}))
|
|
13
|
-
if (__hasOwnProp.call(b, prop))
|
|
14
|
-
__defNormalProp(a, prop, b[prop]);
|
|
15
|
-
if (__getOwnPropSymbols)
|
|
16
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
17
|
-
if (__propIsEnum.call(b, prop))
|
|
18
|
-
__defNormalProp(a, prop, b[prop]);
|
|
19
|
-
}
|
|
20
|
-
return a;
|
|
21
|
-
};
|
|
22
|
-
var __objRest = (source, exclude) => {
|
|
23
|
-
var target = {};
|
|
24
|
-
for (var prop in source)
|
|
25
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
26
|
-
target[prop] = source[prop];
|
|
27
|
-
if (source != null && __getOwnPropSymbols)
|
|
28
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
29
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
30
|
-
target[prop] = source[prop];
|
|
31
|
-
}
|
|
32
|
-
return target;
|
|
33
|
-
};
|
|
34
8
|
var __export = (target, all) => {
|
|
35
9
|
for (var name in all)
|
|
36
10
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -63,7 +37,7 @@ var import_defaultProps = require("./defaultProps");
|
|
|
63
37
|
var import_styles = require("./styles");
|
|
64
38
|
var import_utils = require("./utils");
|
|
65
39
|
const DSTooltipV3 = (props) => {
|
|
66
|
-
const
|
|
40
|
+
const { text, children, onOpen, onClose, id, textAlign, wrapWords, ...extraPopperJsProps } = (0, import_ds_utilities.useMemoMergePropsWithDefault)(props, import_defaultProps.defaultProps);
|
|
67
41
|
const theme = (0, import_react.useContext)(import_ds_system.ThemeContext);
|
|
68
42
|
const [isFocused, setIsFocused] = (0, import_react.useState)(false);
|
|
69
43
|
const [isHover, setIsHover] = (0, import_react.useState)(false);
|
|
@@ -116,11 +90,12 @@ const DSTooltipV3 = (props) => {
|
|
|
116
90
|
onBlur,
|
|
117
91
|
ref: setReferenceElement,
|
|
118
92
|
"data-testid": `${import_TooltipV3DatatestId.TooltipV3DatatestId.TRIGGER_WRAPPER}${id !== "" ? `_${id}` : ""}`
|
|
119
|
-
}, /* @__PURE__ */ import_react.default.createElement(import_ds_popperjs.DSPopperJS,
|
|
93
|
+
}, /* @__PURE__ */ import_react.default.createElement(import_ds_popperjs.DSPopperJS, {
|
|
120
94
|
referenceElement,
|
|
121
95
|
showPopover,
|
|
122
|
-
zIndex: theme.zIndex.tooltip
|
|
123
|
-
|
|
96
|
+
zIndex: theme.zIndex.tooltip,
|
|
97
|
+
...extraPopperJsProps
|
|
98
|
+
}, /* @__PURE__ */ import_react.default.createElement("div", {
|
|
124
99
|
"data-testid": `${import_TooltipV3DatatestId.TooltipV3DatatestId.TOOLTIP_TEXT_WRAPPER}${id !== "" ? `_${id}` : ""}`
|
|
125
100
|
}, /* @__PURE__ */ import_react.default.createElement(import_styles.StyledTooltipContainer, null, /* @__PURE__ */ import_react.default.createElement(import_styles.StyledTooltipText, {
|
|
126
101
|
textAlign,
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/v3/DSTooltipV3.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useState, useCallback, useContext } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { useMemoMergePropsWithDefault, describe } from '@elliemae/ds-utilities';\nimport { ThemeContext } from '@elliemae/ds-system';\nimport { propTypes } from './propTypes';\nimport { TooltipV3DatatestId } from './TooltipV3DatatestId';\nimport { defaultProps } from './defaultProps';\nimport { StyledTooltipContainer, StyledTooltipText, StyledMouseOverDetectionBox, StyledTriggerWrapper } from './styles';\nimport { useGlobalKeyboardListener } from './utils';\nimport type { DSTooltipV3T } from './propTypes';\n\nconst DSTooltipV3: React.ComponentType<DSTooltipV3T.Props> = (props) => {\n const { text, children, onOpen, onClose, id, textAlign, wrapWords, ...extraPopperJsProps } =\n useMemoMergePropsWithDefault<DSTooltipV3T.InternalProps>(props, defaultProps);\n\n const theme = useContext(ThemeContext);\n\n const [isFocused, setIsFocused] = useState<boolean>(false);\n const [isHover, setIsHover] = useState<boolean>(false);\n const [latestOpenInteraction, setLatestOpenInteraction] = useState<string>('');\n const [referenceElement, setReferenceElement] = useState<HTMLSpanElement | null>();\n const [showPopover, setShowPopover] = useState<boolean>(false);\n\n const showTooltip = useCallback(() => {\n setShowPopover(true);\n onOpen();\n }, [onOpen]);\n\n const hideTooltip = useCallback(() => {\n setShowPopover(false);\n onClose();\n }, [onClose]);\n\n const onFocus = useCallback(() => {\n setIsFocused(true);\n if (!showPopover) {\n showTooltip();\n setLatestOpenInteraction('onFocus');\n }\n }, [showPopover, showTooltip]);\n\n const onBlur = useCallback(() => {\n setIsFocused(false);\n if (!isHover || latestOpenInteraction === 'onFocus') hideTooltip();\n }, [hideTooltip, isHover, latestOpenInteraction]);\n\n const onMouseEnter = useCallback(() => {\n setIsHover(true);\n if (!showPopover) {\n showTooltip();\n setLatestOpenInteraction('onMouseEnter');\n }\n }, [showPopover, showTooltip]);\n\n const onMouseLeave = useCallback(() => {\n setIsHover(false);\n if (!isFocused || latestOpenInteraction === 'onMouseEnter') hideTooltip();\n }, [hideTooltip, isFocused, latestOpenInteraction]);\n\n const handleEscKey = useCallback(\n ({ key }: { key: string }) => {\n if (key === 'Escape') hideTooltip();\n },\n [hideTooltip],\n );\n\n useGlobalKeyboardListener(handleEscKey);\n return (\n <StyledTriggerWrapper\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n onPointerEnter={onMouseEnter}\n onPointerLeave={onMouseLeave}\n onFocus={onFocus}\n onBlur={onBlur}\n ref={setReferenceElement}\n data-testid={`${TooltipV3DatatestId.TRIGGER_WRAPPER}${id !== '' ? `_${id}` : ''}`}\n >\n <DSPopperJS\n referenceElement={referenceElement}\n showPopover={showPopover}\n zIndex={theme.zIndex.tooltip}\n {...extraPopperJsProps}\n >\n <div data-testid={`${TooltipV3DatatestId.TOOLTIP_TEXT_WRAPPER}${id !== '' ? `_${id}` : ''}`}>\n <StyledTooltipContainer>\n <StyledTooltipText textAlign={textAlign} wrapWords={wrapWords}>\n {text}\n </StyledTooltipText>\n <StyledMouseOverDetectionBox />\n </StyledTooltipContainer>\n </div>\n </DSPopperJS>\n\n {children}\n </StyledTriggerWrapper>\n );\n};\n\nDSTooltipV3.propTypes = propTypes;\nDSTooltipV3.displayName = 'DSTooltipV3';\nconst DSTooltipV3WithSchema = describe(DSTooltipV3);\nDSTooltipV3WithSchema.propTypes = propTypes;\n\nexport { DSTooltipV3, DSTooltipV3WithSchema };\n\nexport default DSTooltipV3;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAyD;AACzD,yBAA2B;AAC3B,0BAAuD;AACvD,uBAA6B;AAC7B,uBAA0B;AAC1B,iCAAoC;AACpC,0BAA6B;AAC7B,oBAA6G;AAC7G,mBAA0C;AAG1C,MAAM,cAAuD,CAAC,UAAU;AACtE,QAAM,EAAE,MAAM,UAAU,QAAQ,SAAS,IAAI,WAAW,cAAc,uBACpE,sDAAyD,OAAO,gCAAY;AAE9E,QAAM,QAAQ,6BAAW,6BAAY;AAErC,QAAM,CAAC,WAAW,gBAAgB,2BAAkB,KAAK;AACzD,QAAM,CAAC,SAAS,cAAc,2BAAkB,KAAK;AACrD,QAAM,CAAC,uBAAuB,4BAA4B,2BAAiB,EAAE;AAC7E,QAAM,CAAC,kBAAkB,uBAAuB,2BAAiC;AACjF,QAAM,CAAC,aAAa,kBAAkB,2BAAkB,KAAK;AAE7D,QAAM,cAAc,8BAAY,MAAM;AACpC,mBAAe,IAAI;AACnB,WAAO;AAAA,EACT,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,cAAc,8BAAY,MAAM;AACpC,mBAAe,KAAK;AACpB,YAAQ;AAAA,EACV,GAAG,CAAC,OAAO,CAAC;AAEZ,QAAM,UAAU,8BAAY,MAAM;AAChC,iBAAa,IAAI;AACjB,QAAI,CAAC,aAAa;AAChB,kBAAY;AACZ,+BAAyB,SAAS;AAAA,IACpC;AAAA,EACF,GAAG,CAAC,aAAa,WAAW,CAAC;AAE7B,QAAM,SAAS,8BAAY,MAAM;AAC/B,iBAAa,KAAK;AAClB,QAAI,CAAC,WAAW,0BAA0B;AAAW,kBAAY;AAAA,EACnE,GAAG,CAAC,aAAa,SAAS,qBAAqB,CAAC;AAEhD,QAAM,eAAe,8BAAY,MAAM;AACrC,eAAW,IAAI;AACf,QAAI,CAAC,aAAa;AAChB,kBAAY;AACZ,+BAAyB,cAAc;AAAA,IACzC;AAAA,EACF,GAAG,CAAC,aAAa,WAAW,CAAC;AAE7B,QAAM,eAAe,8BAAY,MAAM;AACrC,eAAW,KAAK;AAChB,QAAI,CAAC,aAAa,0BAA0B;AAAgB,kBAAY;AAAA,EAC1E,GAAG,CAAC,aAAa,WAAW,qBAAqB,CAAC;AAElD,QAAM,eAAe,8BACnB,CAAC,EAAE,UAA2B;AAC5B,QAAI,QAAQ;AAAU,kBAAY;AAAA,EACpC,GACA,CAAC,WAAW,CACd;AAEA,8CAA0B,YAAY;AACtC,SACE,mDAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL,eAAa,GAAG,+CAAoB,kBAAkB,OAAO,KAAK,IAAI,OAAO;AAAA,KAE7E,mDAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA,QAAQ,MAAM,OAAO;AAAA,IACpB,GAAG;AAAA,KAEJ,mDAAC;AAAA,IAAI,eAAa,GAAG,+CAAoB,uBAAuB,OAAO,KAAK,IAAI,OAAO;AAAA,KACrF,mDAAC,4CACC,mDAAC;AAAA,IAAkB;AAAA,IAAsB;AAAA,KACtC,IACH,GACA,mDAAC,+CAA4B,CAC/B,CACF,CACF,GAEC,QACH;AAEJ;AAEA,YAAY,YAAY;AACxB,YAAY,cAAc;AAC1B,MAAM,wBAAwB,kCAAS,WAAW;AAClD,sBAAsB,YAAY;AAIlC,IAAO,sBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/v1/DSTooltip.js
CHANGED
|
@@ -1,35 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __defProps = Object.defineProperties;
|
|
4
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
5
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
6
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
8
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
9
|
-
var __spreadValues = (a, b) => {
|
|
10
|
-
for (var prop in b || (b = {}))
|
|
11
|
-
if (__hasOwnProp.call(b, prop))
|
|
12
|
-
__defNormalProp(a, prop, b[prop]);
|
|
13
|
-
if (__getOwnPropSymbols)
|
|
14
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
15
|
-
if (__propIsEnum.call(b, prop))
|
|
16
|
-
__defNormalProp(a, prop, b[prop]);
|
|
17
|
-
}
|
|
18
|
-
return a;
|
|
19
|
-
};
|
|
20
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
21
|
-
var __objRest = (source, exclude) => {
|
|
22
|
-
var target = {};
|
|
23
|
-
for (var prop in source)
|
|
24
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
25
|
-
target[prop] = source[prop];
|
|
26
|
-
if (source != null && __getOwnPropSymbols)
|
|
27
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
28
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
29
|
-
target[prop] = source[prop];
|
|
30
|
-
}
|
|
31
|
-
return target;
|
|
32
|
-
};
|
|
33
2
|
import * as React from "react";
|
|
34
3
|
import React2 from "react";
|
|
35
4
|
import { aggregatedClasses, convertPropToCssClassName } from "@elliemae/ds-classnames";
|
|
@@ -44,40 +13,24 @@ const TooltipContainer = aggregatedClasses("div")(blockName, false, false, {
|
|
|
44
13
|
const TooltipText = aggregatedClasses("span")(blockName, "text", false, {
|
|
45
14
|
propsToRemoveFromFinalElement: ["isHovered", "isDragged"]
|
|
46
15
|
});
|
|
47
|
-
const DSTooltip = (
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
"containerProps",
|
|
66
|
-
"innerRef",
|
|
67
|
-
"placement",
|
|
68
|
-
"title",
|
|
69
|
-
"delayClose",
|
|
70
|
-
"delayOpen",
|
|
71
|
-
"interactionType",
|
|
72
|
-
"triggerComponent",
|
|
73
|
-
"className",
|
|
74
|
-
"isOpen",
|
|
75
|
-
"onOpen",
|
|
76
|
-
"springAnimationComponent",
|
|
77
|
-
"tooltipType",
|
|
78
|
-
"showArrow",
|
|
79
|
-
"zIndex"
|
|
80
|
-
]);
|
|
16
|
+
const DSTooltip = ({
|
|
17
|
+
containerProps = {},
|
|
18
|
+
innerRef,
|
|
19
|
+
placement = PopperPositions.TOP,
|
|
20
|
+
title = "",
|
|
21
|
+
delayClose = DEFAULT_DELAY_CLOSE,
|
|
22
|
+
delayOpen = DEFAULT_DELAY_OPEN,
|
|
23
|
+
interactionType = PopperInteractions.HOVER,
|
|
24
|
+
triggerComponent = null,
|
|
25
|
+
className = "",
|
|
26
|
+
isOpen = void 0,
|
|
27
|
+
onOpen = () => null,
|
|
28
|
+
springAnimationComponent = void 0,
|
|
29
|
+
tooltipType = TooltipType.TOOLTIP,
|
|
30
|
+
showArrow = true,
|
|
31
|
+
zIndex,
|
|
32
|
+
...otherTooltipProps
|
|
33
|
+
}) => {
|
|
81
34
|
const { cssClassName: tooltipBlockName } = convertPropToCssClassName(blockName);
|
|
82
35
|
let Content = title;
|
|
83
36
|
if (typeof title === "string") {
|
|
@@ -85,10 +38,12 @@ const DSTooltip = (_a) => {
|
|
|
85
38
|
}
|
|
86
39
|
return /* @__PURE__ */ React2.createElement(DSPopper, {
|
|
87
40
|
blockName: tooltipBlockName,
|
|
88
|
-
contentComponent: /* @__PURE__ */ React2.createElement(TooltipContainer,
|
|
41
|
+
contentComponent: /* @__PURE__ */ React2.createElement(TooltipContainer, {
|
|
42
|
+
...containerProps,
|
|
43
|
+
...otherTooltipProps,
|
|
89
44
|
className: `tooltip-container--${tooltipType} ${className}`,
|
|
90
45
|
innerRef
|
|
91
|
-
}
|
|
46
|
+
}, Content),
|
|
92
47
|
delayClose,
|
|
93
48
|
delayOpen,
|
|
94
49
|
interactionType,
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v1/DSTooltip.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React from 'react';\nimport { aggregatedClasses, convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport { describe, PropTypes, getComponentFromProps } from '@elliemae/ds-utilities';\nimport { DEFAULT_DELAY_OPEN, DEFAULT_DELAY_CLOSE } from '@elliemae/ds-shared';\nimport { DSPopper, PopperPositions, PopperInteractions, interactions, positions } from '@elliemae/ds-popper';\nimport { TooltipType } from './TooltipType';\n\nconst blockName = 'tooltip';\n\nconst TooltipContainer = aggregatedClasses('div')(blockName, false, false, {\n propsToRemoveFromFinalElement: ['isHovered', 'isDragged'],\n});\nconst TooltipText = aggregatedClasses('span')(blockName, 'text', false, {\n propsToRemoveFromFinalElement: ['isHovered', 'isDragged'],\n});\n\nconst DSTooltip = ({\n containerProps = {},\n innerRef,\n placement = PopperPositions.TOP,\n title = '',\n delayClose = DEFAULT_DELAY_CLOSE,\n delayOpen = DEFAULT_DELAY_OPEN,\n interactionType = PopperInteractions.HOVER,\n triggerComponent = null,\n className = '',\n isOpen = undefined,\n onOpen = () => null,\n springAnimationComponent = undefined,\n tooltipType = TooltipType.TOOLTIP,\n showArrow = true,\n zIndex,\n ...otherTooltipProps\n}) => {\n const { cssClassName: tooltipBlockName } = convertPropToCssClassName(blockName);\n\n let Content = title;\n if (typeof title === 'string') {\n Content = <TooltipText>{title}</TooltipText>;\n }\n return (\n <DSPopper\n blockName={tooltipBlockName}\n contentComponent={\n <TooltipContainer\n {...containerProps}\n {...otherTooltipProps}\n className={`tooltip-container--${tooltipType} ${className}`}\n innerRef={innerRef}\n >\n {Content}\n </TooltipContainer>\n }\n delayClose={delayClose}\n delayOpen={delayOpen}\n interactionType={interactionType}\n isOpen={isOpen}\n onOpen={onOpen}\n placement={placement}\n showArrow={tooltipType === TooltipType.TOOLTIP ? showArrow : false}\n springAnimationComponent={springAnimationComponent}\n triggerComponent={getComponentFromProps(triggerComponent)}\n zIndex={zIndex}\n />\n );\n};\n\nconst tooltipProps = {\n containerProps: PropTypes.object.description('Set of Properties attached to the main container'),\n placement: PropTypes.oneOf(positions).description('Tooltip position').defaultValue(PopperPositions.TOP),\n title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).description('Tooltip content').isRequired,\n delayClose: PropTypes.string.description('Delay to close the tooltip').defaultValue(DEFAULT_DELAY_CLOSE),\n delayOpen: PropTypes.string.description('Delay to open the tooltip ').defaultValue(DEFAULT_DELAY_OPEN),\n interactionType: PropTypes.oneOf(interactions)\n .description('A type indicating how to open/close the tooltip')\n .defaultValue(PopperInteractions.HOVER),\n triggerComponent: PropTypes.element.description(\n `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`,\n ).isRequired,\n isOpen: PropTypes.bool.description('Whether the tooltip is visible or not').defaultValue(undefined),\n onOpen: PropTypes.func.description('Handler when the tooltip opens'),\n springAnimationComponent: PropTypes.element.description('Spring animation component'),\n showArrow: PropTypes.bool.description('Whether to show an arrow or not').defaultValue(true),\n className: PropTypes.string.description('css class'),\n tooltipType: PropTypes.oneOf(['tooltip', 'toolbar']).description('Type of tooltip').defaultValue(TooltipType.TOOLTIP),\n zIndex: PropTypes.number.description('z-index value assigned to the tooltip').defaultValue(undefined),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('Ref to the tooltip container element'),\n};\n\nDSTooltip.propTypes = tooltipProps;\nDSTooltip.displayName = 'DSTooltip';\nconst TooltipWithSchema = describe(DSTooltip);\nTooltipWithSchema.propTypes = tooltipProps;\n\nexport { DSTooltip, TooltipContainer, TooltipText, TooltipWithSchema };\nexport default DSTooltip;\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,YAAY;AAElB,MAAM,mBAAmB,kBAAkB,KAAK,EAAE,WAAW,OAAO,OAAO;AAAA,EACzE,+BAA+B,CAAC,aAAa,WAAW;AAC1D,CAAC;AACD,MAAM,cAAc,kBAAkB,MAAM,EAAE,WAAW,QAAQ,OAAO;AAAA,EACtE,+BAA+B,CAAC,aAAa,WAAW;AAC1D,CAAC;AAED,MAAM,YAAY,CAAC;AAAA,EACjB,iBAAiB,CAAC;AAAA,EAClB;AAAA,EACA,YAAY,gBAAgB;AAAA,EAC5B,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,kBAAkB,mBAAmB;AAAA,EACrC,mBAAmB;AAAA,EACnB,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,SAAS,MAAM;AAAA,EACf,2BAA2B;AAAA,EAC3B,cAAc,YAAY;AAAA,EAC1B,YAAY;AAAA,EACZ;AAAA,KACG;AAAA,MACC;AACJ,QAAM,EAAE,cAAc,qBAAqB,0BAA0B,SAAS;AAE9E,MAAI,UAAU;AACd,MAAI,OAAO,UAAU,UAAU;AAC7B,cAAU,qCAAC,mBAAa,KAAM;AAAA,EAChC;AACA,SACE,qCAAC;AAAA,IACC,WAAW;AAAA,IACX,kBACE,qCAAC;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,WAAW,sBAAsB,eAAe;AAAA,MAChD;AAAA,OAEC,OACH;AAAA,IAEF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW,gBAAgB,YAAY,UAAU,YAAY;AAAA,IAC7D;AAAA,IACA,kBAAkB,sBAAsB,gBAAgB;AAAA,IACxD;AAAA,GACF;AAEJ;AAEA,MAAM,eAAe;AAAA,EACnB,gBAAgB,UAAU,OAAO,YAAY,kDAAkD;AAAA,EAC/F,WAAW,UAAU,MAAM,SAAS,EAAE,YAAY,kBAAkB,EAAE,aAAa,gBAAgB,GAAG;AAAA,EACtG,OAAO,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,OAAO,CAAC,EAAE,YAAY,iBAAiB,EAAE;AAAA,EACjG,YAAY,UAAU,OAAO,YAAY,4BAA4B,EAAE,aAAa,mBAAmB;AAAA,EACvG,WAAW,UAAU,OAAO,YAAY,4BAA4B,EAAE,aAAa,kBAAkB;AAAA,EACrG,iBAAiB,UAAU,MAAM,YAAY,EAC1C,YAAY,iDAAiD,EAC7D,aAAa,mBAAmB,KAAK;AAAA,EACxC,kBAAkB,UAAU,QAAQ,YAClC;AAAA;AAAA,0EAGF,EAAE;AAAA,EACF,QAAQ,UAAU,KAAK,YAAY,uCAAuC,EAAE,aAAa,MAAS;AAAA,EAClG,QAAQ,UAAU,KAAK,YAAY,gCAAgC;AAAA,EACnE,0BAA0B,UAAU,QAAQ,YAAY,4BAA4B;AAAA,EACpF,WAAW,UAAU,KAAK,YAAY,iCAAiC,EAAE,aAAa,IAAI;AAAA,EAC1F,WAAW,UAAU,OAAO,YAAY,WAAW;AAAA,EACnD,aAAa,UAAU,MAAM,CAAC,WAAW,SAAS,CAAC,EAAE,YAAY,iBAAiB,EAAE,aAAa,YAAY,OAAO;AAAA,EACpH,QAAQ,UAAU,OAAO,YAAY,uCAAuC,EAAE,aAAa,MAAS;AAAA,EACpG,UAAU,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,CAAC,EAAE,YAAY,sCAAsC;AACtH;AAEA,UAAU,YAAY;AACtB,UAAU,cAAc;AACxB,MAAM,oBAAoB,SAAS,SAAS;AAC5C,kBAAkB,YAAY;AAG9B,IAAO,oBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/v2/DSTooltip.js
CHANGED
|
@@ -1,23 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __defProps = Object.defineProperties;
|
|
4
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
5
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
6
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
8
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
9
|
-
var __spreadValues = (a, b) => {
|
|
10
|
-
for (var prop in b || (b = {}))
|
|
11
|
-
if (__hasOwnProp.call(b, prop))
|
|
12
|
-
__defNormalProp(a, prop, b[prop]);
|
|
13
|
-
if (__getOwnPropSymbols)
|
|
14
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
15
|
-
if (__propIsEnum.call(b, prop))
|
|
16
|
-
__defNormalProp(a, prop, b[prop]);
|
|
17
|
-
}
|
|
18
|
-
return a;
|
|
19
|
-
};
|
|
20
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
21
2
|
import * as React from "react";
|
|
22
3
|
import React2, { useState, useCallback, useEffect, useRef, useContext } from "react";
|
|
23
4
|
import { describe } from "@elliemae/ds-utilities";
|
|
@@ -72,7 +53,7 @@ const DSTooltipV2 = ({
|
|
|
72
53
|
}
|
|
73
54
|
},
|
|
74
55
|
{ name: "arrow", options: { element: arrowElement } },
|
|
75
|
-
|
|
56
|
+
{ ...extraModifiers }
|
|
76
57
|
]
|
|
77
58
|
});
|
|
78
59
|
const handleShowTooltipOn = useCallback(() => {
|
|
@@ -112,14 +93,16 @@ const DSTooltipV2 = ({
|
|
|
112
93
|
onFocus: handleShowTooltipOn,
|
|
113
94
|
onBlur: handleShowTooltipOff,
|
|
114
95
|
onKeyDown: handleKeyDown
|
|
115
|
-
}, triggerComponent), isAnimating || showTooltip ? /* @__PURE__ */ React2.createElement(DSPortal, null, /* @__PURE__ */ React2.createElement(StyledTooltipContainer,
|
|
96
|
+
}, triggerComponent), isAnimating || showTooltip ? /* @__PURE__ */ React2.createElement(DSPortal, null, /* @__PURE__ */ React2.createElement(StyledTooltipContainer, {
|
|
116
97
|
className,
|
|
117
98
|
showTooltip,
|
|
118
99
|
tooltipType,
|
|
119
100
|
"data-testid": "ds-tooltip-container",
|
|
120
101
|
ref: (ref) => setMultipleRefs(setPopperElement, innerRef)(ref),
|
|
121
|
-
style:
|
|
122
|
-
|
|
102
|
+
style: { ...styles.popper, zIndex: zIndex ?? theme.zIndex.tooltip },
|
|
103
|
+
...containerProps,
|
|
104
|
+
...attributes.popper
|
|
105
|
+
}, /* @__PURE__ */ React2.createElement(StyledAnimatedTooltip, {
|
|
123
106
|
showTooltip,
|
|
124
107
|
"data-testid": "ds-tooltip",
|
|
125
108
|
onAnimationEnd: checkAnimationStatus
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/DSTooltip.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useState, useCallback, useEffect, useRef, useContext } from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { DSPortal } from '@elliemae/ds-portal';\nimport { DEFAULT_DELAY_OPEN, DEFAULT_DELAY_CLOSE } from '@elliemae/ds-shared';\nimport { usePopper } from 'react-popper';\nimport { ThemeContext } from '@elliemae/ds-system';\nimport { tooltipPositions } from './utils/tooltipPositions';\nimport { TooltipType } from './TooltipType';\nimport {\n StyledTooltipContainer,\n StyledTriggerComponentContainer,\n StyledTooltipText,\n StyledAnimatedTooltip,\n} from './styles';\nimport { DSTooltipArrow } from './DSTooltipArrow';\nimport { DSTooltipT } from '.';\nimport { tooltipV2Props } from './propTypes';\nimport { setMultipleRefs } from './utils/setMultipleRefs';\n\nconst DSTooltipV2 = ({\n containerProps = {},\n innerRef,\n placement = tooltipPositions.BOTTOM,\n title = '',\n delayClose = DEFAULT_DELAY_CLOSE,\n delayOpen = DEFAULT_DELAY_OPEN,\n triggerComponent = null,\n className = '',\n getIsOpen = () => null,\n onOpen = () => null,\n tooltipType = TooltipType.TOOLTIP,\n showArrow = true,\n offset = [0, 14],\n zIndex,\n extraModifiers = {},\n}: DSTooltipT): React.ReactElement => {\n const [showTooltip, setShowTooltip] = useState<boolean>(false);\n const [isAnimating, setIsAnimating] = useState<boolean>(false);\n const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(triggerComponent);\n const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);\n const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null);\n const timerOpen = useRef(null);\n const timerClosed = useRef(null);\n\n const { styles, attributes } = usePopper(referenceElement, popperElement, {\n placement,\n modifiers: [\n { name: 'hide', enabled: true },\n {\n name: 'offset',\n enabled: true,\n options: {\n offset: tooltipType === TooltipType.TOOLBAR ? [0, 0] : offset,\n },\n },\n { name: 'arrow', options: { element: arrowElement } },\n { ...extraModifiers },\n ],\n });\n\n const handleShowTooltipOn = useCallback(() => {\n timerOpen.current = setTimeout(() => {\n setShowTooltip(true);\n setIsAnimating(true);\n getIsOpen(true);\n onOpen();\n }, delayOpen);\n }, [delayOpen, getIsOpen, onOpen]);\n\n const handleShowTooltipOff = useCallback(() => {\n timerClosed.current = setTimeout(() => {\n setShowTooltip(false);\n setIsAnimating(true);\n getIsOpen(false);\n }, delayClose);\n }, [delayClose, getIsOpen]);\n\n const handleKeyDown = useCallback((e) => {\n if (e.key === 'Escape') {\n e.target.blur();\n }\n }, []);\n\n const checkAnimationStatus = useCallback(() => {\n if (!showTooltip) {\n setIsAnimating(false);\n }\n }, [showTooltip]);\n\n useEffect(\n () => () => {\n clearTimeout(timerClosed.current);\n clearTimeout(timerOpen.current);\n },\n [],\n );\n\n const theme = useContext(ThemeContext);\n\n return (\n <>\n <StyledTriggerComponentContainer\n ref={setReferenceElement}\n onMouseEnter={handleShowTooltipOn}\n onMouseLeave={handleShowTooltipOff}\n onFocus={handleShowTooltipOn}\n onBlur={handleShowTooltipOff}\n onKeyDown={handleKeyDown}\n >\n {triggerComponent}\n </StyledTriggerComponentContainer>\n {isAnimating || showTooltip ? (\n <DSPortal>\n <StyledTooltipContainer\n className={className}\n showTooltip={showTooltip}\n tooltipType={tooltipType}\n data-testid=\"ds-tooltip-container\"\n ref={(ref) => setMultipleRefs(setPopperElement, innerRef)(ref)}\n style={{ ...styles.popper, zIndex: zIndex ?? theme.zIndex.tooltip }}\n {...containerProps}\n {...attributes.popper}\n >\n <StyledAnimatedTooltip\n showTooltip={showTooltip}\n data-testid=\"ds-tooltip\"\n onAnimationEnd={checkAnimationStatus}\n >\n <StyledTooltipText>{title}</StyledTooltipText>\n {tooltipType === TooltipType.TOOLTIP && showArrow ? (\n <DSTooltipArrow\n arrowElementRef={setArrowElement}\n style={styles.arrow}\n placement={attributes.popper ? attributes.popper['data-popper-placement'] : 'bottom'}\n />\n ) : null}\n </StyledAnimatedTooltip>\n </StyledTooltipContainer>\n </DSPortal>\n ) : null}\n </>\n );\n};\n\nDSTooltipV2.propTypes = tooltipV2Props;\nDSTooltipV2.displayName = 'DSTooltipV2';\nconst TooltipV2WithSchema = describe(DSTooltipV2);\nTooltipV2WithSchema.propTypes = tooltipV2Props;\n\nexport { DSTooltipV2, TooltipV2WithSchema };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,32 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
4
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
6
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
7
|
-
var __spreadValues = (a, b) => {
|
|
8
|
-
for (var prop in b || (b = {}))
|
|
9
|
-
if (__hasOwnProp.call(b, prop))
|
|
10
|
-
__defNormalProp(a, prop, b[prop]);
|
|
11
|
-
if (__getOwnPropSymbols)
|
|
12
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
13
|
-
if (__propIsEnum.call(b, prop))
|
|
14
|
-
__defNormalProp(a, prop, b[prop]);
|
|
15
|
-
}
|
|
16
|
-
return a;
|
|
17
|
-
};
|
|
18
|
-
var __objRest = (source, exclude) => {
|
|
19
|
-
var target = {};
|
|
20
|
-
for (var prop in source)
|
|
21
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
22
|
-
target[prop] = source[prop];
|
|
23
|
-
if (source != null && __getOwnPropSymbols)
|
|
24
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
25
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
26
|
-
target[prop] = source[prop];
|
|
27
|
-
}
|
|
28
|
-
return target;
|
|
29
|
-
};
|
|
30
2
|
import * as React from "react";
|
|
31
3
|
import React2, { useState, useCallback, useContext } from "react";
|
|
32
4
|
import { DSPopperJS } from "@elliemae/ds-popperjs";
|
|
@@ -38,7 +10,7 @@ import { defaultProps } from "./defaultProps";
|
|
|
38
10
|
import { StyledTooltipContainer, StyledTooltipText, StyledMouseOverDetectionBox, StyledTriggerWrapper } from "./styles";
|
|
39
11
|
import { useGlobalKeyboardListener } from "./utils";
|
|
40
12
|
const DSTooltipV3 = (props) => {
|
|
41
|
-
const
|
|
13
|
+
const { text, children, onOpen, onClose, id, textAlign, wrapWords, ...extraPopperJsProps } = useMemoMergePropsWithDefault(props, defaultProps);
|
|
42
14
|
const theme = useContext(ThemeContext);
|
|
43
15
|
const [isFocused, setIsFocused] = useState(false);
|
|
44
16
|
const [isHover, setIsHover] = useState(false);
|
|
@@ -91,11 +63,12 @@ const DSTooltipV3 = (props) => {
|
|
|
91
63
|
onBlur,
|
|
92
64
|
ref: setReferenceElement,
|
|
93
65
|
"data-testid": `${TooltipV3DatatestId.TRIGGER_WRAPPER}${id !== "" ? `_${id}` : ""}`
|
|
94
|
-
}, /* @__PURE__ */ React2.createElement(DSPopperJS,
|
|
66
|
+
}, /* @__PURE__ */ React2.createElement(DSPopperJS, {
|
|
95
67
|
referenceElement,
|
|
96
68
|
showPopover,
|
|
97
|
-
zIndex: theme.zIndex.tooltip
|
|
98
|
-
|
|
69
|
+
zIndex: theme.zIndex.tooltip,
|
|
70
|
+
...extraPopperJsProps
|
|
71
|
+
}, /* @__PURE__ */ React2.createElement("div", {
|
|
99
72
|
"data-testid": `${TooltipV3DatatestId.TOOLTIP_TEXT_WRAPPER}${id !== "" ? `_${id}` : ""}`
|
|
100
73
|
}, /* @__PURE__ */ React2.createElement(StyledTooltipContainer, null, /* @__PURE__ */ React2.createElement(StyledTooltipText, {
|
|
101
74
|
textAlign,
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v3/DSTooltipV3.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useState, useCallback, useContext } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { useMemoMergePropsWithDefault, describe } from '@elliemae/ds-utilities';\nimport { ThemeContext } from '@elliemae/ds-system';\nimport { propTypes } from './propTypes';\nimport { TooltipV3DatatestId } from './TooltipV3DatatestId';\nimport { defaultProps } from './defaultProps';\nimport { StyledTooltipContainer, StyledTooltipText, StyledMouseOverDetectionBox, StyledTriggerWrapper } from './styles';\nimport { useGlobalKeyboardListener } from './utils';\nimport type { DSTooltipV3T } from './propTypes';\n\nconst DSTooltipV3: React.ComponentType<DSTooltipV3T.Props> = (props) => {\n const { text, children, onOpen, onClose, id, textAlign, wrapWords, ...extraPopperJsProps } =\n useMemoMergePropsWithDefault<DSTooltipV3T.InternalProps>(props, defaultProps);\n\n const theme = useContext(ThemeContext);\n\n const [isFocused, setIsFocused] = useState<boolean>(false);\n const [isHover, setIsHover] = useState<boolean>(false);\n const [latestOpenInteraction, setLatestOpenInteraction] = useState<string>('');\n const [referenceElement, setReferenceElement] = useState<HTMLSpanElement | null>();\n const [showPopover, setShowPopover] = useState<boolean>(false);\n\n const showTooltip = useCallback(() => {\n setShowPopover(true);\n onOpen();\n }, [onOpen]);\n\n const hideTooltip = useCallback(() => {\n setShowPopover(false);\n onClose();\n }, [onClose]);\n\n const onFocus = useCallback(() => {\n setIsFocused(true);\n if (!showPopover) {\n showTooltip();\n setLatestOpenInteraction('onFocus');\n }\n }, [showPopover, showTooltip]);\n\n const onBlur = useCallback(() => {\n setIsFocused(false);\n if (!isHover || latestOpenInteraction === 'onFocus') hideTooltip();\n }, [hideTooltip, isHover, latestOpenInteraction]);\n\n const onMouseEnter = useCallback(() => {\n setIsHover(true);\n if (!showPopover) {\n showTooltip();\n setLatestOpenInteraction('onMouseEnter');\n }\n }, [showPopover, showTooltip]);\n\n const onMouseLeave = useCallback(() => {\n setIsHover(false);\n if (!isFocused || latestOpenInteraction === 'onMouseEnter') hideTooltip();\n }, [hideTooltip, isFocused, latestOpenInteraction]);\n\n const handleEscKey = useCallback(\n ({ key }: { key: string }) => {\n if (key === 'Escape') hideTooltip();\n },\n [hideTooltip],\n );\n\n useGlobalKeyboardListener(handleEscKey);\n return (\n <StyledTriggerWrapper\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n onPointerEnter={onMouseEnter}\n onPointerLeave={onMouseLeave}\n onFocus={onFocus}\n onBlur={onBlur}\n ref={setReferenceElement}\n data-testid={`${TooltipV3DatatestId.TRIGGER_WRAPPER}${id !== '' ? `_${id}` : ''}`}\n >\n <DSPopperJS\n referenceElement={referenceElement}\n showPopover={showPopover}\n zIndex={theme.zIndex.tooltip}\n {...extraPopperJsProps}\n >\n <div data-testid={`${TooltipV3DatatestId.TOOLTIP_TEXT_WRAPPER}${id !== '' ? `_${id}` : ''}`}>\n <StyledTooltipContainer>\n <StyledTooltipText textAlign={textAlign} wrapWords={wrapWords}>\n {text}\n </StyledTooltipText>\n <StyledMouseOverDetectionBox />\n </StyledTooltipContainer>\n </div>\n </DSPopperJS>\n\n {children}\n </StyledTriggerWrapper>\n );\n};\n\nDSTooltipV3.propTypes = propTypes;\nDSTooltipV3.displayName = 'DSTooltipV3';\nconst DSTooltipV3WithSchema = describe(DSTooltipV3);\nDSTooltipV3WithSchema.propTypes = propTypes;\n\nexport { DSTooltipV3, DSTooltipV3WithSchema };\n\nexport default DSTooltipV3;\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,MAAM,cAAuD,CAAC,UAAU;AACtE,QAAM,EAAE,MAAM,UAAU,QAAQ,SAAS,IAAI,WAAW,cAAc,uBACpE,6BAAyD,OAAO,YAAY;AAE9E,QAAM,QAAQ,WAAW,YAAY;AAErC,QAAM,CAAC,WAAW,gBAAgB,SAAkB,KAAK;AACzD,QAAM,CAAC,SAAS,cAAc,SAAkB,KAAK;AACrD,QAAM,CAAC,uBAAuB,4BAA4B,SAAiB,EAAE;AAC7E,QAAM,CAAC,kBAAkB,uBAAuB,SAAiC;AACjF,QAAM,CAAC,aAAa,kBAAkB,SAAkB,KAAK;AAE7D,QAAM,cAAc,YAAY,MAAM;AACpC,mBAAe,IAAI;AACnB,WAAO;AAAA,EACT,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,cAAc,YAAY,MAAM;AACpC,mBAAe,KAAK;AACpB,YAAQ;AAAA,EACV,GAAG,CAAC,OAAO,CAAC;AAEZ,QAAM,UAAU,YAAY,MAAM;AAChC,iBAAa,IAAI;AACjB,QAAI,CAAC,aAAa;AAChB,kBAAY;AACZ,+BAAyB,SAAS;AAAA,IACpC;AAAA,EACF,GAAG,CAAC,aAAa,WAAW,CAAC;AAE7B,QAAM,SAAS,YAAY,MAAM;AAC/B,iBAAa,KAAK;AAClB,QAAI,CAAC,WAAW,0BAA0B;AAAW,kBAAY;AAAA,EACnE,GAAG,CAAC,aAAa,SAAS,qBAAqB,CAAC;AAEhD,QAAM,eAAe,YAAY,MAAM;AACrC,eAAW,IAAI;AACf,QAAI,CAAC,aAAa;AAChB,kBAAY;AACZ,+BAAyB,cAAc;AAAA,IACzC;AAAA,EACF,GAAG,CAAC,aAAa,WAAW,CAAC;AAE7B,QAAM,eAAe,YAAY,MAAM;AACrC,eAAW,KAAK;AAChB,QAAI,CAAC,aAAa,0BAA0B;AAAgB,kBAAY;AAAA,EAC1E,GAAG,CAAC,aAAa,WAAW,qBAAqB,CAAC;AAElD,QAAM,eAAe,YACnB,CAAC,EAAE,UAA2B;AAC5B,QAAI,QAAQ;AAAU,kBAAY;AAAA,EACpC,GACA,CAAC,WAAW,CACd;AAEA,4BAA0B,YAAY;AACtC,SACE,qCAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL,eAAa,GAAG,oBAAoB,kBAAkB,OAAO,KAAK,IAAI,OAAO;AAAA,KAE7E,qCAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA,QAAQ,MAAM,OAAO;AAAA,IACpB,GAAG;AAAA,KAEJ,qCAAC;AAAA,IAAI,eAAa,GAAG,oBAAoB,uBAAuB,OAAO,KAAK,IAAI,OAAO;AAAA,KACrF,qCAAC,8BACC,qCAAC;AAAA,IAAkB;AAAA,IAAsB;AAAA,KACtC,IACH,GACA,qCAAC,iCAA4B,CAC/B,CACF,CACF,GAEC,QACH;AAEJ;AAEA,YAAY,YAAY;AACxB,YAAY,cAAc;AAC1B,MAAM,wBAAwB,SAAS,WAAW;AAClD,sBAAsB,YAAY;AAIlC,IAAO,sBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-tooltip",
|
|
3
|
-
"version": "3.3.0-next.
|
|
3
|
+
"version": "3.3.0-next.7",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Tooltip",
|
|
6
6
|
"files": [
|
|
@@ -95,14 +95,14 @@
|
|
|
95
95
|
"indent": 4
|
|
96
96
|
},
|
|
97
97
|
"dependencies": {
|
|
98
|
-
"@elliemae/ds-button": "3.3.0-next.
|
|
99
|
-
"@elliemae/ds-classnames": "3.3.0-next.
|
|
100
|
-
"@elliemae/ds-popper": "3.3.0-next.
|
|
101
|
-
"@elliemae/ds-popperjs": "3.3.0-next.
|
|
102
|
-
"@elliemae/ds-portal": "3.3.0-next.
|
|
103
|
-
"@elliemae/ds-shared": "3.3.0-next.
|
|
104
|
-
"@elliemae/ds-system": "3.3.0-next.
|
|
105
|
-
"@elliemae/ds-utilities": "3.3.0-next.
|
|
98
|
+
"@elliemae/ds-button": "3.3.0-next.7",
|
|
99
|
+
"@elliemae/ds-classnames": "3.3.0-next.7",
|
|
100
|
+
"@elliemae/ds-popper": "3.3.0-next.7",
|
|
101
|
+
"@elliemae/ds-popperjs": "3.3.0-next.7",
|
|
102
|
+
"@elliemae/ds-portal": "3.3.0-next.7",
|
|
103
|
+
"@elliemae/ds-shared": "3.3.0-next.7",
|
|
104
|
+
"@elliemae/ds-system": "3.3.0-next.7",
|
|
105
|
+
"@elliemae/ds-utilities": "3.3.0-next.7",
|
|
106
106
|
"@popperjs/core": "~2.11.5",
|
|
107
107
|
"react-popper": "~2.3.0"
|
|
108
108
|
},
|