@elliemae/ds-tooltip 3.0.4-rc.4 → 3.1.0-next.2
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/v2/DSTooltip.js +4 -2
- package/dist/cjs/v2/DSTooltip.js.map +2 -2
- package/dist/cjs/v3/DSTooltipV3.js +3 -1
- package/dist/cjs/v3/DSTooltipV3.js.map +2 -2
- package/dist/esm/v2/DSTooltip.js +5 -3
- package/dist/esm/v2/DSTooltip.js.map +2 -2
- package/dist/esm/v3/DSTooltipV3.js +4 -2
- package/dist/esm/v3/DSTooltipV3.js.map +2 -2
- package/package.json +9 -9
package/dist/cjs/v2/DSTooltip.js
CHANGED
|
@@ -53,6 +53,7 @@ var import_styles = require("./styles");
|
|
|
53
53
|
var import_DSTooltipArrow = require("./DSTooltipArrow");
|
|
54
54
|
var import_propTypes = require("./propTypes");
|
|
55
55
|
var import_setMultipleRefs = require("./utils/setMultipleRefs");
|
|
56
|
+
var import_styled_components = require("styled-components");
|
|
56
57
|
const DSTooltipV2 = ({
|
|
57
58
|
containerProps = {},
|
|
58
59
|
innerRef,
|
|
@@ -67,7 +68,7 @@ const DSTooltipV2 = ({
|
|
|
67
68
|
tooltipType = import_TooltipType.TooltipType.TOOLTIP,
|
|
68
69
|
showArrow = true,
|
|
69
70
|
offset = [0, 14],
|
|
70
|
-
zIndex
|
|
71
|
+
zIndex,
|
|
71
72
|
extraModifiers = {}
|
|
72
73
|
}) => {
|
|
73
74
|
const [showTooltip, setShowTooltip] = (0, import_react.useState)(false);
|
|
@@ -121,6 +122,7 @@ const DSTooltipV2 = ({
|
|
|
121
122
|
clearTimeout(timerClosed.current);
|
|
122
123
|
clearTimeout(timerOpen.current);
|
|
123
124
|
}, []);
|
|
125
|
+
const theme = (0, import_react.useContext)(import_styled_components.ThemeContext);
|
|
124
126
|
return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_styles.StyledTriggerComponentContainer, {
|
|
125
127
|
ref: setReferenceElement,
|
|
126
128
|
onMouseEnter: handleShowTooltipOn,
|
|
@@ -134,7 +136,7 @@ const DSTooltipV2 = ({
|
|
|
134
136
|
tooltipType,
|
|
135
137
|
"data-testid": "ds-tooltip-container",
|
|
136
138
|
ref: (ref) => (0, import_setMultipleRefs.setMultipleRefs)(setPopperElement, innerRef)(ref),
|
|
137
|
-
style: __spreadProps(__spreadValues({}, styles.popper), { zIndex })
|
|
139
|
+
style: __spreadProps(__spreadValues({}, styles.popper), { zIndex: zIndex ?? theme.zIndex.tooltip })
|
|
138
140
|
}, containerProps), attributes.popper), /* @__PURE__ */ import_react.default.createElement(import_styles.StyledAnimatedTooltip, {
|
|
139
141
|
showTooltip,
|
|
140
142
|
"data-testid": "ds-tooltip",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/v2/DSTooltip.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
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';\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
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useState, useCallback, useEffect, useRef, useContext } from 'react';\nimport { describe } from 'react-desc';\nimport { DSPortal } from '@elliemae/ds-portal';\nimport { DEFAULT_DELAY_OPEN, DEFAULT_DELAY_CLOSE } from '@elliemae/ds-shared';\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';\nimport { ThemeContext } from 'styled-components';\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": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -55,6 +55,7 @@ var React = __toESM(require("react"));
|
|
|
55
55
|
var import_react = __toESM(require("react"));
|
|
56
56
|
var import_ds_popperjs = require("@elliemae/ds-popperjs");
|
|
57
57
|
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
58
|
+
var import_styled_components = require("styled-components");
|
|
58
59
|
var import_propTypes = require("./propTypes");
|
|
59
60
|
var import_TooltipV3DatatestId = require("./TooltipV3DatatestId");
|
|
60
61
|
var import_defaultProps = require("./defaultProps");
|
|
@@ -62,6 +63,7 @@ var import_styles = require("./styles");
|
|
|
62
63
|
var import_utils = require("./utils");
|
|
63
64
|
const DSTooltipV3 = (props) => {
|
|
64
65
|
const _a = (0, import_ds_utilities.useMemoMergePropsWithDefault)(props, import_defaultProps.defaultProps), { text, children, onOpen, onClose, id, textAlign, wrapWords } = _a, extraPopperJsProps = __objRest(_a, ["text", "children", "onOpen", "onClose", "id", "textAlign", "wrapWords"]);
|
|
66
|
+
const theme = (0, import_react.useContext)(import_styled_components.ThemeContext);
|
|
65
67
|
const [isFocused, setIsFocused] = (0, import_react.useState)(false);
|
|
66
68
|
const [isHover, setIsHover] = (0, import_react.useState)(false);
|
|
67
69
|
const [latestOpenInteraction, setLatestOpenInteraction] = (0, import_react.useState)("");
|
|
@@ -116,7 +118,7 @@ const DSTooltipV3 = (props) => {
|
|
|
116
118
|
}, /* @__PURE__ */ import_react.default.createElement(import_ds_popperjs.DSPopperJS, __spreadValues({
|
|
117
119
|
referenceElement,
|
|
118
120
|
showPopover,
|
|
119
|
-
|
|
121
|
+
zIndex: theme.zIndex.tooltip
|
|
120
122
|
}, extraPopperJsProps), /* @__PURE__ */ import_react.default.createElement("div", {
|
|
121
123
|
"data-testid": `${import_TooltipV3DatatestId.TooltipV3DatatestId.TOOLTIP_TEXT_WRAPPER}${id !== "" ? `_${id}` : ""}`
|
|
122
124
|
}, /* @__PURE__ */ import_react.default.createElement(import_styles.StyledTooltipContainer, null, /* @__PURE__ */ import_react.default.createElement(import_styles.StyledTooltipText, {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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-utilities';\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 [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
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,
|
|
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 'styled-components';\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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAyD;AACzD,yBAA2B;AAC3B,0BAAuD;AACvD,+BAA6B;AAC7B,uBAA0B;AAC1B,iCAAoC;AACpC,0BAA6B;AAC7B,oBAA6G;AAC7G,mBAA0C;AAG1C,MAAM,cAAuD,CAAC,UAAU;AACtE,QACE,2DAAyD,OAAO,gCAAY,GADtE,QAAM,UAAU,QAAQ,SAAS,IAAI,WAAW,cACtD,IADoE,+BACpE,IADoE,CAA9D,QAAM,YAAU,UAAQ,WAAS,MAAI,aAAW;AAGxD,QAAM,QAAQ,6BAAW,qCAAY;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,KACjB,qBAEJ,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/v2/DSTooltip.js
CHANGED
|
@@ -18,7 +18,7 @@ var __spreadValues = (a, b) => {
|
|
|
18
18
|
};
|
|
19
19
|
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
20
|
import * as React from "react";
|
|
21
|
-
import React2, { useState, useCallback, useEffect, useRef } from "react";
|
|
21
|
+
import React2, { useState, useCallback, useEffect, useRef, useContext } from "react";
|
|
22
22
|
import { describe } from "react-desc";
|
|
23
23
|
import { DSPortal } from "@elliemae/ds-portal";
|
|
24
24
|
import { DEFAULT_DELAY_OPEN, DEFAULT_DELAY_CLOSE } from "@elliemae/ds-shared";
|
|
@@ -34,6 +34,7 @@ import {
|
|
|
34
34
|
import { DSTooltipArrow } from "./DSTooltipArrow";
|
|
35
35
|
import { tooltipV2Props } from "./propTypes";
|
|
36
36
|
import { setMultipleRefs } from "./utils/setMultipleRefs";
|
|
37
|
+
import { ThemeContext } from "styled-components";
|
|
37
38
|
const DSTooltipV2 = ({
|
|
38
39
|
containerProps = {},
|
|
39
40
|
innerRef,
|
|
@@ -48,7 +49,7 @@ const DSTooltipV2 = ({
|
|
|
48
49
|
tooltipType = TooltipType.TOOLTIP,
|
|
49
50
|
showArrow = true,
|
|
50
51
|
offset = [0, 14],
|
|
51
|
-
zIndex
|
|
52
|
+
zIndex,
|
|
52
53
|
extraModifiers = {}
|
|
53
54
|
}) => {
|
|
54
55
|
const [showTooltip, setShowTooltip] = useState(false);
|
|
@@ -102,6 +103,7 @@ const DSTooltipV2 = ({
|
|
|
102
103
|
clearTimeout(timerClosed.current);
|
|
103
104
|
clearTimeout(timerOpen.current);
|
|
104
105
|
}, []);
|
|
106
|
+
const theme = useContext(ThemeContext);
|
|
105
107
|
return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(StyledTriggerComponentContainer, {
|
|
106
108
|
ref: setReferenceElement,
|
|
107
109
|
onMouseEnter: handleShowTooltipOn,
|
|
@@ -115,7 +117,7 @@ const DSTooltipV2 = ({
|
|
|
115
117
|
tooltipType,
|
|
116
118
|
"data-testid": "ds-tooltip-container",
|
|
117
119
|
ref: (ref) => setMultipleRefs(setPopperElement, innerRef)(ref),
|
|
118
|
-
style: __spreadProps(__spreadValues({}, styles.popper), { zIndex })
|
|
120
|
+
style: __spreadProps(__spreadValues({}, styles.popper), { zIndex: zIndex ?? theme.zIndex.tooltip })
|
|
119
121
|
}, containerProps), attributes.popper), /* @__PURE__ */ React2.createElement(StyledAnimatedTooltip, {
|
|
120
122
|
showTooltip,
|
|
121
123
|
"data-testid": "ds-tooltip",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/DSTooltip.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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';\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
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AAEA;AACA;AAEA,MAAM,cAAc,CAAC;AAAA,EACnB,iBAAiB,CAAC;AAAA,EAClB;AAAA,EACA,YAAY,iBAAiB;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,YAAY;AAAA,EAC1B,YAAY;AAAA,EACZ,SAAS,CAAC,GAAG,EAAE;AAAA,EACf
|
|
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 'react-desc';\nimport { DSPortal } from '@elliemae/ds-portal';\nimport { DEFAULT_DELAY_OPEN, DEFAULT_DELAY_CLOSE } from '@elliemae/ds-shared';\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';\nimport { ThemeContext } from 'styled-components';\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": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -27,9 +27,10 @@ var __objRest = (source, exclude) => {
|
|
|
27
27
|
return target;
|
|
28
28
|
};
|
|
29
29
|
import * as React from "react";
|
|
30
|
-
import React2, { useState, useCallback } from "react";
|
|
30
|
+
import React2, { useState, useCallback, useContext } from "react";
|
|
31
31
|
import { DSPopperJS } from "@elliemae/ds-popperjs";
|
|
32
32
|
import { useMemoMergePropsWithDefault, describe } from "@elliemae/ds-utilities";
|
|
33
|
+
import { ThemeContext } from "styled-components";
|
|
33
34
|
import { propTypes } from "./propTypes";
|
|
34
35
|
import { TooltipV3DatatestId } from "./TooltipV3DatatestId";
|
|
35
36
|
import { defaultProps } from "./defaultProps";
|
|
@@ -37,6 +38,7 @@ import { StyledTooltipContainer, StyledTooltipText, StyledMouseOverDetectionBox,
|
|
|
37
38
|
import { useGlobalKeyboardListener } from "./utils";
|
|
38
39
|
const DSTooltipV3 = (props) => {
|
|
39
40
|
const _a = useMemoMergePropsWithDefault(props, defaultProps), { text, children, onOpen, onClose, id, textAlign, wrapWords } = _a, extraPopperJsProps = __objRest(_a, ["text", "children", "onOpen", "onClose", "id", "textAlign", "wrapWords"]);
|
|
41
|
+
const theme = useContext(ThemeContext);
|
|
40
42
|
const [isFocused, setIsFocused] = useState(false);
|
|
41
43
|
const [isHover, setIsHover] = useState(false);
|
|
42
44
|
const [latestOpenInteraction, setLatestOpenInteraction] = useState("");
|
|
@@ -91,7 +93,7 @@ const DSTooltipV3 = (props) => {
|
|
|
91
93
|
}, /* @__PURE__ */ React2.createElement(DSPopperJS, __spreadValues({
|
|
92
94
|
referenceElement,
|
|
93
95
|
showPopover,
|
|
94
|
-
|
|
96
|
+
zIndex: theme.zIndex.tooltip
|
|
95
97
|
}, extraPopperJsProps), /* @__PURE__ */ React2.createElement("div", {
|
|
96
98
|
"data-testid": `${TooltipV3DatatestId.TOOLTIP_TEXT_WRAPPER}${id !== "" ? `_${id}` : ""}`
|
|
97
99
|
}, /* @__PURE__ */ React2.createElement(StyledTooltipContainer, null, /* @__PURE__ */ React2.createElement(StyledTooltipText, {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v3/DSTooltipV3.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useState, useCallback } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { useMemoMergePropsWithDefault, describe } from '@elliemae/ds-utilities';\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 [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
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,MAAM,cAAuD,CAAC,UAAU;AACtE,QACE,kCAAyD,OAAO,YAAY,GADtE,QAAM,UAAU,QAAQ,SAAS,IAAI,WAAW,cACtD,IADoE,+BACpE,IADoE,CAA9D,QAAM,YAAU,UAAQ,WAAS,MAAI,aAAW;AAGxD,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,
|
|
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 'styled-components';\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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,MAAM,cAAuD,CAAC,UAAU;AACtE,QACE,kCAAyD,OAAO,YAAY,GADtE,QAAM,UAAU,QAAQ,SAAS,IAAI,WAAW,cACtD,IADoE,+BACpE,IADoE,CAA9D,QAAM,YAAU,UAAQ,WAAS,MAAI,aAAW;AAGxD,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,KACjB,qBAEJ,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.0
|
|
3
|
+
"version": "3.1.0-next.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Tooltip",
|
|
6
6
|
"files": [
|
|
@@ -102,14 +102,14 @@
|
|
|
102
102
|
"build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs"
|
|
103
103
|
},
|
|
104
104
|
"dependencies": {
|
|
105
|
-
"@elliemae/ds-button": "3.0
|
|
106
|
-
"@elliemae/ds-classnames": "3.0
|
|
107
|
-
"@elliemae/ds-popper": "3.0
|
|
108
|
-
"@elliemae/ds-popperjs": "3.0
|
|
109
|
-
"@elliemae/ds-portal": "3.0
|
|
110
|
-
"@elliemae/ds-shared": "3.0
|
|
111
|
-
"@elliemae/ds-system": "3.0
|
|
112
|
-
"@elliemae/ds-utilities": "3.0
|
|
105
|
+
"@elliemae/ds-button": "3.1.0-next.2",
|
|
106
|
+
"@elliemae/ds-classnames": "3.1.0-next.2",
|
|
107
|
+
"@elliemae/ds-popper": "3.1.0-next.2",
|
|
108
|
+
"@elliemae/ds-popperjs": "3.1.0-next.2",
|
|
109
|
+
"@elliemae/ds-portal": "3.1.0-next.2",
|
|
110
|
+
"@elliemae/ds-shared": "3.1.0-next.2",
|
|
111
|
+
"@elliemae/ds-system": "3.1.0-next.2",
|
|
112
|
+
"@elliemae/ds-utilities": "3.1.0-next.2",
|
|
113
113
|
"@popperjs/core": "~2.9.3",
|
|
114
114
|
"react-desc": "~4.1.3",
|
|
115
115
|
"react-popper": "~2.2.5"
|