@elliemae/ds-tooltip 3.0.0-alpha.0 → 3.0.0-alpha.1
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 +65 -22
- package/dist/cjs/v1/DSTooltip.js.map +1 -1
- package/dist/cjs/v2/DSTooltip.js +21 -6
- package/dist/cjs/v2/DSTooltip.js.map +1 -1
- package/dist/cjs/v3/DSTooltipV3.js +138 -0
- package/dist/cjs/v3/DSTooltipV3.js.map +7 -0
- package/dist/cjs/v3/constants.js +50 -0
- package/dist/cjs/v3/constants.js.map +7 -0
- package/dist/cjs/v3/{config/useWithDefaultProps.js → defaultProps.js} +7 -8
- package/dist/cjs/v3/defaultProps.js.map +7 -0
- package/dist/cjs/v3/index.js +2 -88
- package/dist/cjs/v3/index.js.map +2 -2
- package/dist/cjs/v3/{propsTypes.js → propTypes.js} +11 -35
- package/dist/cjs/v3/propTypes.js.map +7 -0
- package/dist/cjs/v3/{styleds.js → styles.js} +6 -6
- package/dist/cjs/v3/styles.js.map +7 -0
- package/dist/cjs/v3/{index.d.js → utils.js} +17 -3
- package/dist/cjs/v3/utils.js.map +7 -0
- package/dist/esm/v1/DSTooltip.js +67 -22
- package/dist/esm/v1/DSTooltip.js.map +1 -1
- package/dist/esm/v2/DSTooltip.js +23 -6
- package/dist/esm/v2/DSTooltip.js.map +1 -1
- package/dist/esm/v3/DSTooltipV3.js +111 -0
- package/dist/esm/v3/DSTooltipV3.js.map +7 -0
- package/dist/esm/v3/constants.js +21 -0
- package/dist/esm/v3/constants.js.map +7 -0
- package/dist/esm/v3/defaultProps.js +14 -0
- package/dist/esm/v3/defaultProps.js.map +7 -0
- package/dist/esm/v3/index.js +2 -89
- package/dist/esm/v3/index.js.map +2 -2
- package/dist/esm/v3/{propsTypes.js → propTypes.js} +8 -32
- package/dist/esm/v3/propTypes.js.map +7 -0
- package/dist/esm/v3/{styleds.js → styles.js} +3 -3
- package/dist/esm/v3/styles.js.map +7 -0
- package/dist/esm/v3/utils.js +12 -0
- package/dist/esm/v3/utils.js.map +7 -0
- package/package.json +11 -10
- package/dist/cjs/v3/config/useWithDefaultProps.js.map +0 -7
- package/dist/cjs/v3/index.d.js.map +0 -7
- package/dist/cjs/v3/propsTypes.js.map +0 -7
- package/dist/cjs/v3/styleds.js.map +0 -7
- package/dist/esm/v3/config/useWithDefaultProps.js +0 -15
- package/dist/esm/v3/config/useWithDefaultProps.js.map +0 -7
- package/dist/esm/v3/index.d.js +0 -2
- package/dist/esm/v3/index.d.js.map +0 -7
- package/dist/esm/v3/propsTypes.js.map +0 -7
- package/dist/esm/v3/styleds.js.map +0 -7
- package/dist/types/index.d.ts +0 -6
- package/dist/types/v1/DSTooltip.d.ts +0 -89
- package/dist/types/v1/TooltipType.d.ts +0 -4
- package/dist/types/v2/DSTooltip.d.ts +0 -70
- package/dist/types/v2/DSTooltipArrow.d.ts +0 -4
- package/dist/types/v2/TooltipType.d.ts +0 -5
- package/dist/types/v2/propTypes.d.ts +0 -60
- package/dist/types/v2/styles.d.ts +0 -7
- package/dist/types/v2/tests/DSTooltipV2.test.d.ts +0 -1
- package/dist/types/v2/utils/setMultipleRefs.d.ts +0 -1
- package/dist/types/v2/utils/tooltipPositions.d.ts +0 -15
- package/dist/types/v3/TooltipV3DatatestId.d.ts +0 -4
- package/dist/types/v3/config/useWithDefaultProps.d.ts +0 -2
- package/dist/types/v3/index.d.ts +0 -6
- package/dist/types/v3/propsTypes.d.ts +0 -103
- package/dist/types/v3/styleds.d.ts +0 -6
package/dist/cjs/v1/DSTooltip.js
CHANGED
|
@@ -1,10 +1,39 @@
|
|
|
1
1
|
var __create = Object.create;
|
|
2
2
|
var __defProp = Object.defineProperty;
|
|
3
|
+
var __defProps = Object.defineProperties;
|
|
3
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
6
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
8
|
var __getProtoOf = Object.getPrototypeOf;
|
|
6
9
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
10
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
11
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
12
|
+
var __spreadValues = (a, b) => {
|
|
13
|
+
for (var prop in b || (b = {}))
|
|
14
|
+
if (__hasOwnProp.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
if (__getOwnPropSymbols)
|
|
17
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
18
|
+
if (__propIsEnum.call(b, prop))
|
|
19
|
+
__defNormalProp(a, prop, b[prop]);
|
|
20
|
+
}
|
|
21
|
+
return a;
|
|
22
|
+
};
|
|
23
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
7
24
|
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
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
|
+
};
|
|
8
37
|
var __export = (target, all) => {
|
|
9
38
|
for (var name in all)
|
|
10
39
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -48,24 +77,40 @@ const TooltipContainer = (0, import_ds_classnames.aggregatedClasses)("div")(bloc
|
|
|
48
77
|
const TooltipText = (0, import_ds_classnames.aggregatedClasses)("span")(blockName, "text", false, {
|
|
49
78
|
propsToRemoveFromFinalElement: ["isHovered", "isDragged"]
|
|
50
79
|
});
|
|
51
|
-
const DSTooltip = ({
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
}
|
|
80
|
+
const DSTooltip = (_a) => {
|
|
81
|
+
var _b = _a, {
|
|
82
|
+
containerProps = {},
|
|
83
|
+
innerRef,
|
|
84
|
+
placement = import_ds_popper.PopperPositions.TOP,
|
|
85
|
+
title = "",
|
|
86
|
+
delayClose = import_constants.DEFAULT_DELAY_CLOSE,
|
|
87
|
+
delayOpen = import_constants.DEFAULT_DELAY_OPEN,
|
|
88
|
+
interactionType = import_ds_popper.PopperInteractions.HOVER,
|
|
89
|
+
triggerComponent = null,
|
|
90
|
+
className = "",
|
|
91
|
+
isOpen = void 0,
|
|
92
|
+
onOpen = () => null,
|
|
93
|
+
springAnimationComponent = void 0,
|
|
94
|
+
tooltipType = import_TooltipType.TooltipType.TOOLTIP,
|
|
95
|
+
showArrow = true,
|
|
96
|
+
zIndex
|
|
97
|
+
} = _b, otherTooltipProps = __objRest(_b, [
|
|
98
|
+
"containerProps",
|
|
99
|
+
"innerRef",
|
|
100
|
+
"placement",
|
|
101
|
+
"title",
|
|
102
|
+
"delayClose",
|
|
103
|
+
"delayOpen",
|
|
104
|
+
"interactionType",
|
|
105
|
+
"triggerComponent",
|
|
106
|
+
"className",
|
|
107
|
+
"isOpen",
|
|
108
|
+
"onOpen",
|
|
109
|
+
"springAnimationComponent",
|
|
110
|
+
"tooltipType",
|
|
111
|
+
"showArrow",
|
|
112
|
+
"zIndex"
|
|
113
|
+
]);
|
|
69
114
|
const { cssClassName: tooltipBlockName } = (0, import_ds_classnames.convertPropToCssClassName)(blockName);
|
|
70
115
|
let Content = title;
|
|
71
116
|
if (typeof title === "string") {
|
|
@@ -73,12 +118,10 @@ const DSTooltip = ({
|
|
|
73
118
|
}
|
|
74
119
|
return /* @__PURE__ */ import_react.default.createElement(import_ds_popper.DSPopper, {
|
|
75
120
|
blockName: tooltipBlockName,
|
|
76
|
-
contentComponent: /* @__PURE__ */ import_react.default.createElement(TooltipContainer, {
|
|
77
|
-
...containerProps,
|
|
78
|
-
...otherTooltipProps,
|
|
121
|
+
contentComponent: /* @__PURE__ */ import_react.default.createElement(TooltipContainer, __spreadProps(__spreadValues(__spreadValues({}, containerProps), otherTooltipProps), {
|
|
79
122
|
className: `tooltip-container--${tooltipType} ${className}`,
|
|
80
123
|
innerRef
|
|
81
|
-
}, Content),
|
|
124
|
+
}), Content),
|
|
82
125
|
delayClose,
|
|
83
126
|
delayOpen,
|
|
84
127
|
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 { describe, PropTypes } from 'react-desc';\nimport {\n aggregatedClasses,\n convertPropToCssClassName,\n} from '@elliemae/ds-classnames';\nimport { getComponentFromProps } from '@elliemae/ds-utilities';\nimport {\n DEFAULT_DELAY_OPEN,\n DEFAULT_DELAY_CLOSE,\n} from '@elliemae/ds-shared/constants';\nimport { DSPopper,\n PopperPositions,\n PopperInteractions,\n interactions,\n positions\n} 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(\n blockName,\n );\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(\n 'Set of Properties attached to the main container',\n ),\n placement: PropTypes.oneOf(positions)\n .description('Tooltip position')\n .defaultValue(PopperPositions.TOP),\n title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).description(\n 'Tooltip content',\n ).isRequired,\n delayClose: PropTypes.string\n .description('Delay to close the tooltip')\n .defaultValue(DEFAULT_DELAY_CLOSE),\n delayOpen: PropTypes.string\n .description('Delay to open the tooltip ')\n .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\n .description('Whether the tooltip is visible or not')\n .defaultValue(undefined),\n onOpen: PropTypes.func.description('Handler when the tooltip opens'),\n springAnimationComponent: PropTypes.element.description(\n 'Spring animation component',\n ),\n showArrow: PropTypes.bool\n .description('Whether to show an arrow or not')\n .defaultValue(true),\n className: PropTypes.string.description('css class'),\n tooltipType: PropTypes.oneOf(['tooltip', 'toolbar'])\n .description('Type of tooltip')\n .defaultValue(TooltipType.TOOLTIP),\n zIndex: PropTypes.number\n .description('z-index value assigned to the tooltip')\n .defaultValue(undefined),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description(\n 'Ref to the tooltip container element',\n ),\n};\n\nDSTooltip.propTypes = tooltipProps;\n\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": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/v2/DSTooltip.js
CHANGED
|
@@ -1,9 +1,26 @@
|
|
|
1
1
|
var __create = Object.create;
|
|
2
2
|
var __defProp = Object.defineProperty;
|
|
3
|
+
var __defProps = Object.defineProperties;
|
|
3
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
6
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
8
|
var __getProtoOf = Object.getPrototypeOf;
|
|
6
9
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
10
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
11
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
12
|
+
var __spreadValues = (a, b) => {
|
|
13
|
+
for (var prop in b || (b = {}))
|
|
14
|
+
if (__hasOwnProp.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
if (__getOwnPropSymbols)
|
|
17
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
18
|
+
if (__propIsEnum.call(b, prop))
|
|
19
|
+
__defNormalProp(a, prop, b[prop]);
|
|
20
|
+
}
|
|
21
|
+
return a;
|
|
22
|
+
};
|
|
23
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
7
24
|
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
25
|
var __export = (target, all) => {
|
|
9
26
|
for (var name in all)
|
|
@@ -78,7 +95,7 @@ const DSTooltipV2 = ({
|
|
|
78
95
|
}
|
|
79
96
|
},
|
|
80
97
|
{ name: "arrow", options: { element: arrowElement } },
|
|
81
|
-
{
|
|
98
|
+
__spreadValues({}, extraModifiers)
|
|
82
99
|
]
|
|
83
100
|
});
|
|
84
101
|
const handleShowTooltipOn = (0, import_react.useCallback)(() => {
|
|
@@ -117,16 +134,14 @@ const DSTooltipV2 = ({
|
|
|
117
134
|
onFocus: handleShowTooltipOn,
|
|
118
135
|
onBlur: handleShowTooltipOff,
|
|
119
136
|
onKeyDown: handleKeyDown
|
|
120
|
-
}, triggerComponent), isAnimating || showTooltip ? /* @__PURE__ */ import_react.default.createElement(import_ds_portal.DSPortal, null, /* @__PURE__ */ import_react.default.createElement(import_styles.StyledTooltipContainer, {
|
|
137
|
+
}, triggerComponent), isAnimating || showTooltip ? /* @__PURE__ */ import_react.default.createElement(import_ds_portal.DSPortal, null, /* @__PURE__ */ import_react.default.createElement(import_styles.StyledTooltipContainer, __spreadValues(__spreadValues({
|
|
121
138
|
className,
|
|
122
139
|
showTooltip,
|
|
123
140
|
tooltipType,
|
|
124
141
|
"data-testid": "ds-tooltip-container",
|
|
125
142
|
ref: (ref) => (0, import_setMultipleRefs.setMultipleRefs)(setPopperElement, innerRef)(ref),
|
|
126
|
-
style: {
|
|
127
|
-
|
|
128
|
-
...attributes.popper
|
|
129
|
-
}, /* @__PURE__ */ import_react.default.createElement(import_styles.StyledAnimatedTooltip, {
|
|
143
|
+
style: __spreadProps(__spreadValues({}, styles.popper), { zIndex })
|
|
144
|
+
}, containerProps), attributes.popper), /* @__PURE__ */ import_react.default.createElement(import_styles.StyledAnimatedTooltip, {
|
|
130
145
|
showTooltip,
|
|
131
146
|
"data-testid": "ds-tooltip",
|
|
132
147
|
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 } from 'react';\nimport { describe } from 'react-desc';\nimport { DSPortal } from '@elliemae/ds-portal';\nimport { DEFAULT_DELAY_OPEN, DEFAULT_DELAY_CLOSE } from '@elliemae/ds-shared/constants';\nimport { usePopper } from 'react-popper';\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 = 10,\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 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 }}\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;\n\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;ACAA,YAAuB;ADCvB,mBAAgE;AAChE,wBAAyB;AACzB,uBAAyB;AACzB,uBAAwD;AACxD,0BAA0B;AAC1B,8BAAiC;AACjC,yBAA4B;AAC5B,oBAKO;AACP,4BAA+B;AAE/B,uBAA+B;AAC/B,6BAAgC;AAEhC,MAAM,cAAc,CAAC;AAAA,EACnB,iBAAiB;AAAA,EACjB;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;AAAA,EACb,SAAS;AAAA,EACT,iBAAiB;AAAA,MACmB;AACpC,QAAM,CAAC,aAAa,kBAAkB,2BAAkB;AACxD,QAAM,CAAC,aAAa,kBAAkB,2BAAkB;AACxD,QAAM,CAAC,kBAAkB,uBAAuB,2BAA6B;AAC7E,QAAM,CAAC,eAAe,oBAAoB,2BAAgC;AAC1E,QAAM,CAAC,cAAc,mBAAmB,2BAAgC;AACxE,QAAM,YAAY,yBAAO;AACzB,QAAM,cAAc,yBAAO;AAE3B,QAAM,EAAE,QAAQ,eAAe,mCAAU,kBAAkB,eAAe;AAAA,IACxE;AAAA,IACA,WAAW;AAAA,MACT,EAAE,MAAM,QAAQ,SAAS;AAAA,MACzB;AAAA,QACE,MAAM;AAAA,QACN,SAAS;AAAA,QACT,SAAS;AAAA,UACP,QAAQ,gBAAgB,+BAAY,UAAU,CAAC,GAAG,KAAK;AAAA;AAAA;AAAA,MAG3D,EAAE,MAAM,SAAS,SAAS,EAAE,SAAS;AAAA,MACrC,mBAAK;AAAA;AAAA;AAIT,QAAM,sBAAsB,8BAAY,MAAM;AAC5C,cAAU,UAAU,WAAW,MAAM;AACnC,qBAAe;AACf,qBAAe;AACf,gBAAU;AACV;AAAA,OACC;AAAA,KACF,CAAC,WAAW,WAAW;AAE1B,QAAM,uBAAuB,8BAAY,MAAM;AAC7C,gBAAY,UAAU,WAAW,MAAM;AACrC,qBAAe;AACf,qBAAe;AACf,gBAAU;AAAA,OACT;AAAA,KACF,CAAC,YAAY;AAEhB,QAAM,gBAAgB,8BAAY,CAAC,MAAM;AACvC,QAAI,EAAE,QAAQ,UAAU;AACtB,QAAE,OAAO;AAAA;AAAA,KAEV;AAEH,QAAM,uBAAuB,8BAAY,MAAM;AAC7C,QAAI,CAAC,aAAa;AAChB,qBAAe;AAAA;AAAA,KAEhB,CAAC;AAEJ,8BACE,MAAM,MAAM;AACV,iBAAa,YAAY;AACzB,iBAAa,UAAU;AAAA,KAEzB;AAGF,SACE,wFACE,mDAAC,+CAAD;AAAA,IACE,KAAK;AAAA,IACL,cAAc;AAAA,IACd,cAAc;AAAA,IACd,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,WAAW;AAAA,KAEV,mBAEF,eAAe,cACd,mDAAC,2BAAD,MACE,mDAAC,sCAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAY;AAAA,IACZ,KAAK,CAAC,QAAQ,4CAAgB,kBAAkB,UAAU;AAAA,IAC1D,OAAO,iCAAK,OAAO,SAAZ,EAAoB;AAAA,KACvB,iBACA,WAAW,SAEf,mDAAC,qCAAD;AAAA,IACE;AAAA,IACA,eAAY;AAAA,IACZ,gBAAgB;AAAA,KAEhB,mDAAC,iCAAD,MAAoB,QACnB,gBAAgB,+BAAY,WAAW,YACtC,mDAAC,sCAAD;AAAA,IACE,iBAAiB;AAAA,IACjB,OAAO,OAAO;AAAA,IACd,WAAW,WAAW,SAAS,WAAW,OAAO,2BAA2B;AAAA,OAE5E,UAIR;AAAA;AAKV,YAAY,YAAY;AAExB,MAAM,sBAAsB,gCAAS;AACrC,oBAAoB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
9
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
10
|
+
var __spreadValues = (a, b) => {
|
|
11
|
+
for (var prop in b || (b = {}))
|
|
12
|
+
if (__hasOwnProp.call(b, prop))
|
|
13
|
+
__defNormalProp(a, prop, b[prop]);
|
|
14
|
+
if (__getOwnPropSymbols)
|
|
15
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
16
|
+
if (__propIsEnum.call(b, prop))
|
|
17
|
+
__defNormalProp(a, prop, b[prop]);
|
|
18
|
+
}
|
|
19
|
+
return a;
|
|
20
|
+
};
|
|
21
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
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
|
+
var __export = (target, all) => {
|
|
35
|
+
for (var name in all)
|
|
36
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
37
|
+
};
|
|
38
|
+
var __reExport = (target, module2, copyDefault, desc) => {
|
|
39
|
+
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
40
|
+
for (let key of __getOwnPropNames(module2))
|
|
41
|
+
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
42
|
+
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
43
|
+
}
|
|
44
|
+
return target;
|
|
45
|
+
};
|
|
46
|
+
var __toESM = (module2, isNodeMode) => {
|
|
47
|
+
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
48
|
+
};
|
|
49
|
+
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
50
|
+
return (module2, temp) => {
|
|
51
|
+
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
52
|
+
};
|
|
53
|
+
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
54
|
+
var DSTooltipV3_exports = {};
|
|
55
|
+
__export(DSTooltipV3_exports, {
|
|
56
|
+
DSTooltipV3: () => DSTooltipV3,
|
|
57
|
+
DSTooltipV3WithSchema: () => DSTooltipV3WithSchema,
|
|
58
|
+
default: () => DSTooltipV3_default
|
|
59
|
+
});
|
|
60
|
+
var React = __toESM(require("react"));
|
|
61
|
+
var import_react = __toESM(require("react"));
|
|
62
|
+
var import_ds_popperjs = require("@elliemae/ds-popperjs");
|
|
63
|
+
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
64
|
+
var import_propTypes = require("./propTypes");
|
|
65
|
+
var import_TooltipV3DatatestId = require("./TooltipV3DatatestId");
|
|
66
|
+
var import_defaultProps = require("./defaultProps");
|
|
67
|
+
var import_styles = require("./styles");
|
|
68
|
+
var import_utils = require("./utils");
|
|
69
|
+
const DSTooltipV3 = (props) => {
|
|
70
|
+
const _a = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_defaultProps.defaultProps), { text, children, onOpen, onClose, id, textAlign, wrapWords } = _a, extraPopperJsProps = __objRest(_a, ["text", "children", "onOpen", "onClose", "id", "textAlign", "wrapWords"]);
|
|
71
|
+
const [isFocused, setIsFocused] = (0, import_react.useState)(false);
|
|
72
|
+
const [isHover, setIsHover] = (0, import_react.useState)(false);
|
|
73
|
+
const [latestOpenInteraction, setLatestOpenInteraction] = (0, import_react.useState)("");
|
|
74
|
+
const [referenceElement, setReferenceElement] = (0, import_react.useState)();
|
|
75
|
+
const [showPopover, setShowPopover] = (0, import_react.useState)(false);
|
|
76
|
+
const showTooltip = (0, import_react.useCallback)(() => {
|
|
77
|
+
setShowPopover(true);
|
|
78
|
+
onOpen();
|
|
79
|
+
}, [onOpen]);
|
|
80
|
+
const hideTooltip = (0, import_react.useCallback)(() => {
|
|
81
|
+
setShowPopover(false);
|
|
82
|
+
onClose();
|
|
83
|
+
}, [onClose]);
|
|
84
|
+
const onFocus = (0, import_react.useCallback)(() => {
|
|
85
|
+
setIsFocused(true);
|
|
86
|
+
if (!showPopover) {
|
|
87
|
+
showTooltip();
|
|
88
|
+
setLatestOpenInteraction("onFocus");
|
|
89
|
+
}
|
|
90
|
+
}, [showPopover, showTooltip]);
|
|
91
|
+
const onBlur = (0, import_react.useCallback)(() => {
|
|
92
|
+
setIsFocused(false);
|
|
93
|
+
if (!isHover || latestOpenInteraction === "onFocus")
|
|
94
|
+
hideTooltip();
|
|
95
|
+
}, [hideTooltip, isHover, latestOpenInteraction]);
|
|
96
|
+
const onMouseEnter = (0, import_react.useCallback)(() => {
|
|
97
|
+
setIsHover(true);
|
|
98
|
+
if (!showPopover) {
|
|
99
|
+
showTooltip();
|
|
100
|
+
setLatestOpenInteraction("onMouseEnter");
|
|
101
|
+
}
|
|
102
|
+
}, [showPopover, showTooltip]);
|
|
103
|
+
const onMouseLeave = (0, import_react.useCallback)(() => {
|
|
104
|
+
setIsHover(false);
|
|
105
|
+
if (!isFocused || latestOpenInteraction === "onMouseEnter")
|
|
106
|
+
hideTooltip();
|
|
107
|
+
}, [hideTooltip, isFocused, latestOpenInteraction]);
|
|
108
|
+
const handleEscKey = (0, import_react.useCallback)(({ key }) => {
|
|
109
|
+
if (key === "Escape")
|
|
110
|
+
hideTooltip();
|
|
111
|
+
}, [hideTooltip]);
|
|
112
|
+
(0, import_utils.useGlobalKeyboardListener)(handleEscKey);
|
|
113
|
+
return /* @__PURE__ */ import_react.default.createElement(import_styles.StyledTriggerWrapper, {
|
|
114
|
+
onMouseEnter,
|
|
115
|
+
onMouseLeave,
|
|
116
|
+
onPointerEnter: onMouseEnter,
|
|
117
|
+
onPointerLeave: onMouseLeave,
|
|
118
|
+
onFocus,
|
|
119
|
+
onBlur,
|
|
120
|
+
ref: setReferenceElement,
|
|
121
|
+
"data-testid": `${import_TooltipV3DatatestId.TooltipV3DatatestId.TRIGGER_WRAPPER}${id !== "" ? `_${id}` : ""}`
|
|
122
|
+
}, /* @__PURE__ */ import_react.default.createElement(import_ds_popperjs.DSPopperJS, __spreadValues({
|
|
123
|
+
referenceElement,
|
|
124
|
+
showPopover,
|
|
125
|
+
withoutPortal: true
|
|
126
|
+
}, extraPopperJsProps), /* @__PURE__ */ import_react.default.createElement("div", {
|
|
127
|
+
"data-testid": `${import_TooltipV3DatatestId.TooltipV3DatatestId.TOOLTIP_TEXT_WRAPPER}${id !== "" ? `_${id}` : ""}`
|
|
128
|
+
}, /* @__PURE__ */ import_react.default.createElement(import_styles.StyledTooltipContainer, null, /* @__PURE__ */ import_react.default.createElement(import_styles.StyledTooltipText, {
|
|
129
|
+
textAlign,
|
|
130
|
+
wrapWords
|
|
131
|
+
}, text), /* @__PURE__ */ import_react.default.createElement(import_styles.StyledMouseOverDetectionBox, null)))), children);
|
|
132
|
+
};
|
|
133
|
+
DSTooltipV3.propTypes = import_propTypes.propTypes;
|
|
134
|
+
const DSTooltipV3WithSchema = (0, import_ds_props_helpers.describe)(DSTooltipV3);
|
|
135
|
+
DSTooltipV3WithSchema.propTypes = import_propTypes.propTypes;
|
|
136
|
+
var DSTooltipV3_default = DSTooltipV3;
|
|
137
|
+
module.exports = __toCommonJS(DSTooltipV3_exports);
|
|
138
|
+
//# sourceMappingURL=DSTooltipV3.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/v3/DSTooltipV3.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useState, useCallback } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { useMemoMergePropsWithDefault, describe } from '@elliemae/ds-props-helpers';\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 = (props: DSTooltipV3T.Props): JSX.Element => {\n const { text, children, onOpen, onClose, id, textAlign, wrapWords, ...extraPopperJsProps } =\n useMemoMergePropsWithDefault<DSTooltipV3T.InternalProps>(props, defaultProps);\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 referenceElement={referenceElement} showPopover={showPopover} withoutPortal {...extraPopperJsProps}>\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;\n\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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAA6C;AAC7C,yBAA2B;AAC3B,8BAAuD;AACvD,uBAA0B;AAC1B,iCAAoC;AACpC,0BAA6B;AAC7B,oBAA6G;AAC7G,mBAA0C;AAG1C,MAAM,cAAc,CAAC,UAA2C;AAC9D,QACE,+DAAyD,OAAO,mCAD1D,QAAM,UAAU,QAAQ,SAAS,IAAI,WAAW,cACtD,IADoE,+BACpE,IADoE,CAA9D,QAAM,YAAU,UAAQ,WAAS,MAAI,aAAW;AAGxD,QAAM,CAAC,WAAW,gBAAgB,2BAAkB;AACpD,QAAM,CAAC,SAAS,cAAc,2BAAkB;AAChD,QAAM,CAAC,uBAAuB,4BAA4B,2BAAiB;AAC3E,QAAM,CAAC,kBAAkB,uBAAuB;AAChD,QAAM,CAAC,aAAa,kBAAkB,2BAAkB;AAExD,QAAM,cAAc,8BAAY,MAAM;AACpC,mBAAe;AACf;AAAA,KACC,CAAC;AAEJ,QAAM,cAAc,8BAAY,MAAM;AACpC,mBAAe;AACf;AAAA,KACC,CAAC;AAEJ,QAAM,UAAU,8BAAY,MAAM;AAChC,iBAAa;AACb,QAAI,CAAC,aAAa;AAChB;AACA,+BAAyB;AAAA;AAAA,KAE1B,CAAC,aAAa;AAEjB,QAAM,SAAS,8BAAY,MAAM;AAC/B,iBAAa;AACb,QAAI,CAAC,WAAW,0BAA0B;AAAW;AAAA,KACpD,CAAC,aAAa,SAAS;AAE1B,QAAM,eAAe,8BAAY,MAAM;AACrC,eAAW;AACX,QAAI,CAAC,aAAa;AAChB;AACA,+BAAyB;AAAA;AAAA,KAE1B,CAAC,aAAa;AAEjB,QAAM,eAAe,8BAAY,MAAM;AACrC,eAAW;AACX,QAAI,CAAC,aAAa,0BAA0B;AAAgB;AAAA,KAC3D,CAAC,aAAa,WAAW;AAE5B,QAAM,eAAe,8BACnB,CAAC,EAAE,UAA2B;AAC5B,QAAI,QAAQ;AAAU;AAAA,KAExB,CAAC;AAGH,8CAA0B;AAC1B,SACE,mDAAC,oCAAD;AAAA,IACE;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,+BAAD;AAAA,IAAY;AAAA,IAAoC;AAAA,IAA0B,eAAa;AAAA,KAAK,qBAC1F,mDAAC,OAAD;AAAA,IAAK,eAAa,GAAG,+CAAoB,uBAAuB,OAAO,KAAK,IAAI,OAAO;AAAA,KACrF,mDAAC,sCAAD,MACE,mDAAC,iCAAD;AAAA,IAAmB;AAAA,IAAsB;AAAA,KACtC,OAEH,mDAAC,2CAAD,UAKL;AAAA;AAKP,YAAY,YAAY;AAExB,MAAM,wBAAwB,sCAAS;AACvC,sBAAsB,YAAY;AAIlC,IAAO,sBAAQ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __reExport = (target, module2, copyDefault, desc) => {
|
|
13
|
+
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(module2))
|
|
15
|
+
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
16
|
+
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return target;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (module2, isNodeMode) => {
|
|
21
|
+
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
22
|
+
};
|
|
23
|
+
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
+
return (module2, temp) => {
|
|
25
|
+
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
+
};
|
|
27
|
+
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
+
var constants_exports = {};
|
|
29
|
+
__export(constants_exports, {
|
|
30
|
+
PLACEMENT: () => PLACEMENT,
|
|
31
|
+
TEXT_ALIGNMENT: () => TEXT_ALIGNMENT
|
|
32
|
+
});
|
|
33
|
+
var React = __toESM(require("react"));
|
|
34
|
+
const PLACEMENT = [
|
|
35
|
+
"top-start",
|
|
36
|
+
"top",
|
|
37
|
+
"top-end",
|
|
38
|
+
"right-start",
|
|
39
|
+
"right",
|
|
40
|
+
"right-end",
|
|
41
|
+
"bottom-end",
|
|
42
|
+
"bottom",
|
|
43
|
+
"bottom-start",
|
|
44
|
+
"left-end",
|
|
45
|
+
"left",
|
|
46
|
+
"left-start"
|
|
47
|
+
];
|
|
48
|
+
const TEXT_ALIGNMENT = ["left", "right", "center", "justify", "initial", "inherit"];
|
|
49
|
+
module.exports = __toCommonJS(constants_exports);
|
|
50
|
+
//# sourceMappingURL=constants.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/v3/constants.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["export const PLACEMENT = [\n 'top-start',\n 'top',\n 'top-end',\n 'right-start',\n 'right',\n 'right-end',\n 'bottom-end',\n 'bottom',\n 'bottom-start',\n 'left-end',\n 'left',\n 'left-start',\n] as const;\n\nexport const TEXT_ALIGNMENT = ['left', 'right', 'center', 'justify', 'initial', 'inherit'] as const;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,YAAY;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAGK,MAAM,iBAAiB,CAAC,QAAQ,SAAS,UAAU,WAAW,WAAW;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -25,20 +25,19 @@ var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
|
25
25
|
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
26
|
};
|
|
27
27
|
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
-
var
|
|
29
|
-
__export(
|
|
30
|
-
|
|
28
|
+
var defaultProps_exports = {};
|
|
29
|
+
__export(defaultProps_exports, {
|
|
30
|
+
defaultProps: () => defaultProps
|
|
31
31
|
});
|
|
32
32
|
var React = __toESM(require("react"));
|
|
33
|
-
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
34
33
|
const noop = () => {
|
|
35
34
|
};
|
|
36
35
|
const defaultProps = {
|
|
37
36
|
onOpen: noop,
|
|
38
37
|
onClose: noop,
|
|
39
38
|
id: "",
|
|
40
|
-
textAlign: "left"
|
|
39
|
+
textAlign: "left",
|
|
40
|
+
wrapWords: false
|
|
41
41
|
};
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
//# sourceMappingURL=useWithDefaultProps.js.map
|
|
42
|
+
module.exports = __toCommonJS(defaultProps_exports);
|
|
43
|
+
//# sourceMappingURL=defaultProps.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/v3/defaultProps.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["import type { DSTooltipV3T } from './propTypes';\n\nconst noop = () => {};\n\nexport const defaultProps: DSTooltipV3T.DefaultProps = {\n onOpen: noop,\n onClose: noop,\n id: '',\n textAlign: 'left',\n wrapWords: false,\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,MAAM,OAAO,MAAM;AAAA;AAEZ,MAAM,eAA0C;AAAA,EACrD,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,WAAW;AAAA,EACX,WAAW;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/dist/cjs/v3/index.js
CHANGED
|
@@ -5,10 +5,6 @@ var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
|
5
5
|
var __getProtoOf = Object.getPrototypeOf;
|
|
6
6
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
7
|
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
-
var __export = (target, all) => {
|
|
9
|
-
for (var name in all)
|
|
10
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
-
};
|
|
12
8
|
var __reExport = (target, module2, copyDefault, desc) => {
|
|
13
9
|
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
14
10
|
for (let key of __getOwnPropNames(module2))
|
|
@@ -26,90 +22,8 @@ var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
|
26
22
|
};
|
|
27
23
|
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
24
|
var v3_exports = {};
|
|
29
|
-
__export(v3_exports, {
|
|
30
|
-
DSTooltipV3: () => DSTooltipV3,
|
|
31
|
-
DSTooltipV3WithSchema: () => DSTooltipV3WithSchema,
|
|
32
|
-
default: () => v3_default
|
|
33
|
-
});
|
|
34
25
|
var React = __toESM(require("react"));
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
var import_react_desc = require("react-desc");
|
|
38
|
-
var import_propsTypes = require("./propsTypes");
|
|
39
|
-
var import_useWithDefaultProps = require("./config/useWithDefaultProps");
|
|
40
|
-
var import_TooltipV3DatatestId = require("./TooltipV3DatatestId");
|
|
41
|
-
var import_styleds = require("./styleds");
|
|
42
|
-
const useGlobalKeyboardListener = (func) => {
|
|
43
|
-
(0, import_react.useEffect)(() => {
|
|
44
|
-
document.addEventListener("keydown", func);
|
|
45
|
-
return () => document.removeEventListener("keydown", func);
|
|
46
|
-
}, [func]);
|
|
47
|
-
};
|
|
48
|
-
const DSTooltipV3 = (props) => {
|
|
49
|
-
const { text, children, onOpen, onClose, id, textAlign, ...extraPopperJsProps } = (0, import_useWithDefaultProps.useWithDefaultProps)(props);
|
|
50
|
-
const [isFocused, setIsFocused] = (0, import_react.useState)(false);
|
|
51
|
-
const [isHover, setIsHover] = (0, import_react.useState)(false);
|
|
52
|
-
const [latestOpenInteraction, setLatestOpenInteraction] = (0, import_react.useState)("");
|
|
53
|
-
const [referenceElement, setReferenceElement] = (0, import_react.useState)();
|
|
54
|
-
const [showPopover, setShowPopover] = (0, import_react.useState)(false);
|
|
55
|
-
const showTooltip = (0, import_react.useCallback)(() => {
|
|
56
|
-
setShowPopover(true);
|
|
57
|
-
onOpen();
|
|
58
|
-
}, [onOpen]);
|
|
59
|
-
const hideTooltip = (0, import_react.useCallback)(() => {
|
|
60
|
-
setShowPopover(false);
|
|
61
|
-
onClose();
|
|
62
|
-
}, [onClose]);
|
|
63
|
-
const onFocus = (0, import_react.useCallback)(() => {
|
|
64
|
-
setIsFocused(true);
|
|
65
|
-
if (!showPopover) {
|
|
66
|
-
showTooltip();
|
|
67
|
-
setLatestOpenInteraction("onFocus");
|
|
68
|
-
}
|
|
69
|
-
}, [showPopover, showTooltip]);
|
|
70
|
-
const onBlur = (0, import_react.useCallback)(() => {
|
|
71
|
-
setIsFocused(false);
|
|
72
|
-
if (!isHover || latestOpenInteraction === "onFocus")
|
|
73
|
-
hideTooltip();
|
|
74
|
-
}, [hideTooltip, isHover, latestOpenInteraction]);
|
|
75
|
-
const onMouseEnter = (0, import_react.useCallback)(() => {
|
|
76
|
-
setIsHover(true);
|
|
77
|
-
if (!showPopover) {
|
|
78
|
-
showTooltip();
|
|
79
|
-
setLatestOpenInteraction("onMouseEnter");
|
|
80
|
-
}
|
|
81
|
-
}, [showPopover, showTooltip]);
|
|
82
|
-
const onMouseLeave = (0, import_react.useCallback)(() => {
|
|
83
|
-
setIsHover(false);
|
|
84
|
-
if (!isFocused || latestOpenInteraction === "onMouseEnter")
|
|
85
|
-
hideTooltip();
|
|
86
|
-
}, [hideTooltip, isFocused, latestOpenInteraction]);
|
|
87
|
-
const handleEscKey = (0, import_react.useCallback)(({ key }) => {
|
|
88
|
-
if (key === "Escape")
|
|
89
|
-
hideTooltip();
|
|
90
|
-
}, [hideTooltip]);
|
|
91
|
-
useGlobalKeyboardListener(handleEscKey);
|
|
92
|
-
return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_styleds.StyledTriggerWrapper, {
|
|
93
|
-
onMouseEnter,
|
|
94
|
-
onMouseLeave,
|
|
95
|
-
onFocus,
|
|
96
|
-
onBlur,
|
|
97
|
-
ref: setReferenceElement,
|
|
98
|
-
"data-testid": `${import_TooltipV3DatatestId.TooltipV3DatatestId.TRIGGER_WRAPPER}${id !== "" ? `_${id}` : ""}`
|
|
99
|
-
}, /* @__PURE__ */ import_react.default.createElement(import_ds_popperjs.DSPopperJS, {
|
|
100
|
-
referenceElement,
|
|
101
|
-
showPopover,
|
|
102
|
-
withoutPortal: true,
|
|
103
|
-
...extraPopperJsProps
|
|
104
|
-
}, /* @__PURE__ */ import_react.default.createElement("div", {
|
|
105
|
-
"data-testid": `${import_TooltipV3DatatestId.TooltipV3DatatestId.TOOLTIP_TEXT_WRAPPER}${id !== "" ? `_${id}` : ""}`
|
|
106
|
-
}, /* @__PURE__ */ import_react.default.createElement(import_styleds.StyledTooltipContainer, null, /* @__PURE__ */ import_react.default.createElement(import_styleds.StyledTooltipText, {
|
|
107
|
-
textAlign
|
|
108
|
-
}, text), /* @__PURE__ */ import_react.default.createElement(import_styleds.StyledMouseOverDetectionBox, null)))), children));
|
|
109
|
-
};
|
|
110
|
-
DSTooltipV3.propTypes = import_propsTypes.dsTooltipPropTypes;
|
|
111
|
-
const DSTooltipV3WithSchema = (0, import_react_desc.describe)(DSTooltipV3).description("A tooltip component");
|
|
112
|
-
DSTooltipV3WithSchema.propTypes = import_propsTypes.dsTooltipPropTypes;
|
|
113
|
-
var v3_default = DSTooltipV3;
|
|
26
|
+
__reExport(v3_exports, require("./DSTooltipV3"));
|
|
27
|
+
__reExport(v3_exports, require("./TooltipV3DatatestId"));
|
|
114
28
|
module.exports = __toCommonJS(v3_exports);
|
|
115
29
|
//# sourceMappingURL=index.js.map
|
package/dist/cjs/v3/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/v3/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["export * from './DSTooltipV3';\nexport * from './TooltipV3DatatestId';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA,YAAuB;ADAvB,uBAAc;AACd,uBAAc;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|