@elliemae/ds-tooltip 1.57.0-rc.12 → 1.57.0-rc.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/v3/index.js +6 -7
- package/cjs/v3/index.js.map +1 -1
- package/cjs/v3/styleds.js +7 -7
- package/cjs/v3/styleds.js.map +1 -1
- package/esm/v3/index.js +7 -8
- package/esm/v3/index.js.map +1 -1
- package/esm/v3/styleds.js +7 -7
- package/esm/v3/styleds.js.map +1 -1
- package/package.json +9 -9
package/cjs/v3/index.js
CHANGED
|
@@ -105,13 +105,11 @@ var DSTooltipV3 = function DSTooltipV3(props) {
|
|
|
105
105
|
if (key === 'Escape') hideTooltip();
|
|
106
106
|
}, [hideTooltip]);
|
|
107
107
|
useGlobalKeyboardListener(handleEscKey);
|
|
108
|
-
return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(
|
|
108
|
+
return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("span", {
|
|
109
109
|
onMouseEnter: onMouseEnter,
|
|
110
110
|
onMouseLeave: onMouseLeave,
|
|
111
111
|
onFocus: onFocus,
|
|
112
|
-
onBlur: onBlur
|
|
113
|
-
ref: setReferenceElement,
|
|
114
|
-
"data-testid": "".concat(v3_TooltipV3DatatestId.TooltipV3DatatestId.TRIGGER_WRAPPER).concat(id !== '' ? "_".concat(id) : '')
|
|
112
|
+
onBlur: onBlur
|
|
115
113
|
}, /*#__PURE__*/React__default['default'].createElement(dsPopperjs.DSPopperJS, _extends__default['default']({
|
|
116
114
|
referenceElement: referenceElement,
|
|
117
115
|
showPopover: showPopover,
|
|
@@ -120,9 +118,10 @@ var DSTooltipV3 = function DSTooltipV3(props) {
|
|
|
120
118
|
"data-testid": "".concat(v3_TooltipV3DatatestId.TooltipV3DatatestId.TOOLTIP_TEXT_WRAPPER).concat(id !== '' ? "_".concat(id) : '')
|
|
121
119
|
}, /*#__PURE__*/React__default['default'].createElement(v3_styleds.StyledTooltipContainer, null, /*#__PURE__*/React__default['default'].createElement(v3_styleds.StyledTooltipText, {
|
|
122
120
|
textAlign: textAlign
|
|
123
|
-
}, text), /*#__PURE__*/React__default['default'].createElement(v3_styleds.StyledMouseOverDetectionBox, {
|
|
124
|
-
|
|
125
|
-
|
|
121
|
+
}, text), /*#__PURE__*/React__default['default'].createElement(v3_styleds.StyledMouseOverDetectionBox, null)))), /*#__PURE__*/React__default['default'].createElement(v3_styleds.StyledTriggerWrapper, {
|
|
122
|
+
ref: setReferenceElement,
|
|
123
|
+
"data-testid": "".concat(v3_TooltipV3DatatestId.TooltipV3DatatestId.TRIGGER_WRAPPER).concat(id !== '' ? "_".concat(id) : '')
|
|
124
|
+
}, children)));
|
|
126
125
|
};
|
|
127
126
|
|
|
128
127
|
DSTooltipV3.propTypes = v3_propsTypes.dsTooltipPropTypes;
|
package/cjs/v3/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/v3/index.tsx"],"sourcesContent":["/* eslint-disable max-lines */\nimport React, { useState, useCallback, useEffect } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { describe } from 'react-desc';\n\nimport { dsTooltipPropTypes } from './propsTypes';\nimport { useWithDefaultProps } from './config/useWithDefaultProps';\nimport { TooltipV3DatatestId } from './TooltipV3DatatestId';\nimport {
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/v3/index.tsx"],"sourcesContent":["/* eslint-disable max-lines */\nimport React, { useState, useCallback, useEffect } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { describe } from 'react-desc';\n\nimport { dsTooltipPropTypes } from './propsTypes';\nimport { useWithDefaultProps } from './config/useWithDefaultProps';\nimport { TooltipV3DatatestId } from './TooltipV3DatatestId';\nimport {\n StyledTooltipContainer,\n StyledTooltipText,\n StyledMouseOverDetectionBox,\n StyledTriggerWrapper,\n} from './styleds';\nimport type { TooltipV3PropsT } from './index.d';\n\nconst useGlobalKeyboardListener = (func) => {\n useEffect(() => {\n document.addEventListener('keydown', func);\n return () => document.removeEventListener('keydown', func);\n }, [func]);\n};\n\nconst DSTooltipV3: React.ComponentType<TooltipV3PropsT> = (props) => {\n const { text, children, onOpen, onClose, id, textAlign, ...extraPopperJsProps } = useWithDefaultProps(props);\n\n const [isFocused, setIsFocused] = useState(false);\n const [isHover, setIsHover] = useState(false);\n const [latestOpenInteraction, setLatestOpenInteraction] = useState('');\n\n const [referenceElement, setReferenceElement] = useState<HTMLSpanElement>();\n const [showPopover, setShowPopover] = useState(false);\n const showTooltip = useCallback(() => {\n setShowPopover(true);\n onOpen();\n }, [onOpen]);\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 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 const onMouseLeave = useCallback(() => {\n setIsHover(false);\n if (!isFocused || latestOpenInteraction === 'onMouseEnter') hideTooltip();\n }, [hideTooltip, isFocused, latestOpenInteraction]);\n\n const handleEscKey = useCallback(\n ({ key }) => {\n if (key === 'Escape') hideTooltip();\n },\n [hideTooltip],\n );\n\n useGlobalKeyboardListener(handleEscKey);\n\n return (\n <>\n {/* The <div> element is catching the \"ESC\" key to close the tooltip, there is no valid aria role for this */}\n {/* eslint-disable-next-line max-len */}\n {/* https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-static-element-interactions.md#case-the-event-handler-is-only-being-used-to-capture-bubbled-events */}\n {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n <span onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} onFocus={onFocus} onBlur={onBlur}>\n <DSPopperJS referenceElement={referenceElement} showPopover={showPopover} withoutPortal {...extraPopperJsProps}>\n <div data-testid={`${TooltipV3DatatestId.TOOLTIP_TEXT_WRAPPER}${id !== '' ? `_${id}` : ''}`}>\n <StyledTooltipContainer>\n <StyledTooltipText textAlign={textAlign}>{text}</StyledTooltipText>\n <StyledMouseOverDetectionBox />\n </StyledTooltipContainer>\n </div>\n </DSPopperJS>\n <StyledTriggerWrapper\n ref={setReferenceElement}\n data-testid={`${TooltipV3DatatestId.TRIGGER_WRAPPER}${id !== '' ? `_${id}` : ''}`}\n >\n {children}\n </StyledTriggerWrapper>\n </span>\n </>\n );\n};\n\nDSTooltipV3.propTypes = dsTooltipPropTypes;\n\nconst DSTooltipV3WithSchema = describe(DSTooltipV3).description('A tooltip component');\nDSTooltipV3WithSchema.propTypes = dsTooltipPropTypes;\n\nexport { DSTooltipV3, DSTooltipV3WithSchema };\nexport default DSTooltipV3;\n"],"names":["useGlobalKeyboardListener","func","useEffect","document","addEventListener","removeEventListener","DSTooltipV3","props","useWithDefaultProps","text","children","onOpen","onClose","id","textAlign","extraPopperJsProps","useState","isFocused","setIsFocused","isHover","setIsHover","latestOpenInteraction","setLatestOpenInteraction","referenceElement","setReferenceElement","showPopover","setShowPopover","showTooltip","useCallback","hideTooltip","onFocus","onBlur","onMouseEnter","onMouseLeave","handleEscKey","key","React","DSPopperJS","TooltipV3DatatestId","TOOLTIP_TEXT_WRAPPER","StyledTooltipContainer","StyledTooltipText","StyledMouseOverDetectionBox","StyledTriggerWrapper","TRIGGER_WRAPPER","propTypes","dsTooltipPropTypes","DSTooltipV3WithSchema","describe","description"],"mappings":"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"}
|
package/cjs/v3/styleds.js
CHANGED
|
@@ -8,11 +8,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
8
8
|
|
|
9
9
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
10
10
|
|
|
11
|
-
var StyledTriggerContainer = /*#__PURE__*/styled__default['default'].div.withConfig({
|
|
12
|
-
componentId: "sc-18a4gem-0"
|
|
13
|
-
})(["width:fit-content;"]);
|
|
14
11
|
var StyledTooltipContainer = /*#__PURE__*/styled__default['default'].div.withConfig({
|
|
15
|
-
componentId: "sc-18a4gem-
|
|
12
|
+
componentId: "sc-18a4gem-0"
|
|
16
13
|
})(["text-align:center;min-width:", ";max-width:250px;min-height:30px;display:grid;align-items:center;padding:", ";position:relative;background-color:white;border-radius:2px;font-size:13px;color:", ";box-shadow:0 1px 5px 0 rgb(0 0 0 / 13%),0 2px 4px 0 rgb(0 0 0 / 20%);filter:drop-shadow(0 4px 8px rgba(0,0,0,0.2));transition:visibility 0.1s ease-in;"], function (_ref) {
|
|
17
14
|
var theme = _ref.theme;
|
|
18
15
|
return theme.space.l;
|
|
@@ -24,17 +21,20 @@ var StyledTooltipContainer = /*#__PURE__*/styled__default['default'].div.withCon
|
|
|
24
21
|
return theme.colors.neutral[600];
|
|
25
22
|
});
|
|
26
23
|
var StyledTooltipText = /*#__PURE__*/styled__default['default'].div.withConfig({
|
|
27
|
-
componentId: "sc-18a4gem-
|
|
24
|
+
componentId: "sc-18a4gem-1"
|
|
28
25
|
})(["white-space:normal;word-wrap:break-word;display:inline-block;text-align:", ";"], function (_ref4) {
|
|
29
26
|
var textAlign = _ref4.textAlign;
|
|
30
27
|
return textAlign;
|
|
31
28
|
});
|
|
32
29
|
var StyledMouseOverDetectionBox = /*#__PURE__*/styled__default['default'].div.withConfig({
|
|
33
|
-
componentId: "sc-18a4gem-
|
|
30
|
+
componentId: "sc-18a4gem-2"
|
|
34
31
|
})(["position:absolute;top:-15px;right:-15px;width:calc(100% + 30px);height:calc(100% + 30px);z-index:-1;"]);
|
|
32
|
+
var StyledTriggerWrapper = /*#__PURE__*/styled__default['default'].div.withConfig({
|
|
33
|
+
componentId: "sc-18a4gem-3"
|
|
34
|
+
})(["display:inline-block;"]);
|
|
35
35
|
|
|
36
36
|
exports.StyledMouseOverDetectionBox = StyledMouseOverDetectionBox;
|
|
37
37
|
exports.StyledTooltipContainer = StyledTooltipContainer;
|
|
38
38
|
exports.StyledTooltipText = StyledTooltipText;
|
|
39
|
-
exports.
|
|
39
|
+
exports.StyledTriggerWrapper = StyledTriggerWrapper;
|
|
40
40
|
//# sourceMappingURL=styleds.js.map
|
package/cjs/v3/styleds.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styleds.js","sources":["../../../src/v3/styleds.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nexport const
|
|
1
|
+
{"version":3,"file":"styleds.js","sources":["../../../src/v3/styleds.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledTooltipContainer = styled.div`\n text-align: center;\n min-width: ${({ theme }) => theme.space.l};\n max-width: 250px;\n min-height: 30px;\n display: grid;\n align-items: center;\n padding: ${({ theme }) => `${theme.space.xxxs} ${theme.space.xs}`};\n position: relative;\n background-color: white;\n border-radius: 2px;\n font-size: 13px;\n color: ${({ theme }) => theme.colors.neutral[600]};\n box-shadow: 0 1px 5px 0 rgb(0 0 0 / 13%), 0 2px 4px 0 rgb(0 0 0 / 20%);\n filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));\n transition: visibility 0.1s ease-in;\n`;\n\nexport const StyledTooltipText = styled.div<{ textAlign: string }>`\n white-space: normal;\n word-wrap: break-word;\n display: inline-block;\n text-align: ${({ textAlign }) => textAlign};\n`;\n\nexport const StyledMouseOverDetectionBox = styled.div`\n position: absolute;\n top: -15px;\n right: -15px;\n width: calc(100% + 30px);\n height: calc(100% + 30px);\n z-index: -1;\n`;\n\nexport const StyledTriggerWrapper = styled.div`\n display: inline-block;\n`;\n"],"names":["StyledTooltipContainer","styled","div","theme","space","l","xxxs","xs","colors","neutral","StyledTooltipText","textAlign","StyledMouseOverDetectionBox","StyledTriggerWrapper"],"mappings":";;;;;;;;;;IAEaA,sBAAsB,gBAAGC,0BAAM,CAACC,GAAV;AAAA;AAAA,kWAEpB;AAAA,MAAGC,KAAH,QAAGA,KAAH;AAAA,SAAeA,KAAK,CAACC,KAAN,CAAYC,CAA3B;AAAA,CAFoB,EAOtB;AAAA,MAAGF,KAAH,SAAGA,KAAH;AAAA,mBAAkBA,KAAK,CAACC,KAAN,CAAYE,IAA9B,cAAsCH,KAAK,CAACC,KAAN,CAAYG,EAAlD;AAAA,CAPsB,EAYxB;AAAA,MAAGJ,KAAH,SAAGA,KAAH;AAAA,SAAeA,KAAK,CAACK,MAAN,CAAaC,OAAb,CAAqB,GAArB,CAAf;AAAA,CAZwB;IAkBtBC,iBAAiB,gBAAGT,0BAAM,CAACC,GAAV;AAAA;AAAA,sFAId;AAAA,MAAGS,SAAH,SAAGA,SAAH;AAAA,SAAmBA,SAAnB;AAAA,CAJc;IAOjBC,2BAA2B,gBAAGX,0BAAM,CAACC,GAAV;AAAA;AAAA;IAS3BW,oBAAoB,gBAAGZ,0BAAM,CAACC,GAAV;AAAA;AAAA;;;;;;;"}
|
package/esm/v3/index.js
CHANGED
|
@@ -7,7 +7,7 @@ import { describe } from 'react-desc';
|
|
|
7
7
|
import { dsTooltipPropTypes } from './propsTypes.js';
|
|
8
8
|
import { useWithDefaultProps } from './config/useWithDefaultProps.js';
|
|
9
9
|
import { TooltipV3DatatestId } from './TooltipV3DatatestId.js';
|
|
10
|
-
import {
|
|
10
|
+
import { StyledTooltipContainer, StyledTooltipText, StyledMouseOverDetectionBox, StyledTriggerWrapper } from './styleds.js';
|
|
11
11
|
import '@elliemae/ds-props-helpers';
|
|
12
12
|
import 'styled-components';
|
|
13
13
|
|
|
@@ -94,13 +94,11 @@ var DSTooltipV3 = function DSTooltipV3(props) {
|
|
|
94
94
|
if (key === 'Escape') hideTooltip();
|
|
95
95
|
}, [hideTooltip]);
|
|
96
96
|
useGlobalKeyboardListener(handleEscKey);
|
|
97
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(
|
|
97
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
|
|
98
98
|
onMouseEnter: onMouseEnter,
|
|
99
99
|
onMouseLeave: onMouseLeave,
|
|
100
100
|
onFocus: onFocus,
|
|
101
|
-
onBlur: onBlur
|
|
102
|
-
ref: setReferenceElement,
|
|
103
|
-
"data-testid": "".concat(TooltipV3DatatestId.TRIGGER_WRAPPER).concat(id !== '' ? "_".concat(id) : '')
|
|
101
|
+
onBlur: onBlur
|
|
104
102
|
}, /*#__PURE__*/React.createElement(DSPopperJS, _extends({
|
|
105
103
|
referenceElement: referenceElement,
|
|
106
104
|
showPopover: showPopover,
|
|
@@ -109,9 +107,10 @@ var DSTooltipV3 = function DSTooltipV3(props) {
|
|
|
109
107
|
"data-testid": "".concat(TooltipV3DatatestId.TOOLTIP_TEXT_WRAPPER).concat(id !== '' ? "_".concat(id) : '')
|
|
110
108
|
}, /*#__PURE__*/React.createElement(StyledTooltipContainer, null, /*#__PURE__*/React.createElement(StyledTooltipText, {
|
|
111
109
|
textAlign: textAlign
|
|
112
|
-
}, text), /*#__PURE__*/React.createElement(StyledMouseOverDetectionBox, {
|
|
113
|
-
|
|
114
|
-
|
|
110
|
+
}, text), /*#__PURE__*/React.createElement(StyledMouseOverDetectionBox, null)))), /*#__PURE__*/React.createElement(StyledTriggerWrapper, {
|
|
111
|
+
ref: setReferenceElement,
|
|
112
|
+
"data-testid": "".concat(TooltipV3DatatestId.TRIGGER_WRAPPER).concat(id !== '' ? "_".concat(id) : '')
|
|
113
|
+
}, children)));
|
|
115
114
|
};
|
|
116
115
|
|
|
117
116
|
DSTooltipV3.propTypes = dsTooltipPropTypes;
|
package/esm/v3/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/v3/index.tsx"],"sourcesContent":["/* eslint-disable max-lines */\nimport React, { useState, useCallback, useEffect } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { describe } from 'react-desc';\n\nimport { dsTooltipPropTypes } from './propsTypes';\nimport { useWithDefaultProps } from './config/useWithDefaultProps';\nimport { TooltipV3DatatestId } from './TooltipV3DatatestId';\nimport {
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/v3/index.tsx"],"sourcesContent":["/* eslint-disable max-lines */\nimport React, { useState, useCallback, useEffect } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { describe } from 'react-desc';\n\nimport { dsTooltipPropTypes } from './propsTypes';\nimport { useWithDefaultProps } from './config/useWithDefaultProps';\nimport { TooltipV3DatatestId } from './TooltipV3DatatestId';\nimport {\n StyledTooltipContainer,\n StyledTooltipText,\n StyledMouseOverDetectionBox,\n StyledTriggerWrapper,\n} from './styleds';\nimport type { TooltipV3PropsT } from './index.d';\n\nconst useGlobalKeyboardListener = (func) => {\n useEffect(() => {\n document.addEventListener('keydown', func);\n return () => document.removeEventListener('keydown', func);\n }, [func]);\n};\n\nconst DSTooltipV3: React.ComponentType<TooltipV3PropsT> = (props) => {\n const { text, children, onOpen, onClose, id, textAlign, ...extraPopperJsProps } = useWithDefaultProps(props);\n\n const [isFocused, setIsFocused] = useState(false);\n const [isHover, setIsHover] = useState(false);\n const [latestOpenInteraction, setLatestOpenInteraction] = useState('');\n\n const [referenceElement, setReferenceElement] = useState<HTMLSpanElement>();\n const [showPopover, setShowPopover] = useState(false);\n const showTooltip = useCallback(() => {\n setShowPopover(true);\n onOpen();\n }, [onOpen]);\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 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 const onMouseLeave = useCallback(() => {\n setIsHover(false);\n if (!isFocused || latestOpenInteraction === 'onMouseEnter') hideTooltip();\n }, [hideTooltip, isFocused, latestOpenInteraction]);\n\n const handleEscKey = useCallback(\n ({ key }) => {\n if (key === 'Escape') hideTooltip();\n },\n [hideTooltip],\n );\n\n useGlobalKeyboardListener(handleEscKey);\n\n return (\n <>\n {/* The <div> element is catching the \"ESC\" key to close the tooltip, there is no valid aria role for this */}\n {/* eslint-disable-next-line max-len */}\n {/* https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-static-element-interactions.md#case-the-event-handler-is-only-being-used-to-capture-bubbled-events */}\n {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n <span onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} onFocus={onFocus} onBlur={onBlur}>\n <DSPopperJS referenceElement={referenceElement} showPopover={showPopover} withoutPortal {...extraPopperJsProps}>\n <div data-testid={`${TooltipV3DatatestId.TOOLTIP_TEXT_WRAPPER}${id !== '' ? `_${id}` : ''}`}>\n <StyledTooltipContainer>\n <StyledTooltipText textAlign={textAlign}>{text}</StyledTooltipText>\n <StyledMouseOverDetectionBox />\n </StyledTooltipContainer>\n </div>\n </DSPopperJS>\n <StyledTriggerWrapper\n ref={setReferenceElement}\n data-testid={`${TooltipV3DatatestId.TRIGGER_WRAPPER}${id !== '' ? `_${id}` : ''}`}\n >\n {children}\n </StyledTriggerWrapper>\n </span>\n </>\n );\n};\n\nDSTooltipV3.propTypes = dsTooltipPropTypes;\n\nconst DSTooltipV3WithSchema = describe(DSTooltipV3).description('A tooltip component');\nDSTooltipV3WithSchema.propTypes = dsTooltipPropTypes;\n\nexport { DSTooltipV3, DSTooltipV3WithSchema };\nexport default DSTooltipV3;\n"],"names":["useGlobalKeyboardListener","func","useEffect","document","addEventListener","removeEventListener","DSTooltipV3","props","useWithDefaultProps","text","children","onOpen","onClose","id","textAlign","extraPopperJsProps","useState","isFocused","setIsFocused","isHover","setIsHover","latestOpenInteraction","setLatestOpenInteraction","referenceElement","setReferenceElement","showPopover","setShowPopover","showTooltip","useCallback","hideTooltip","onFocus","onBlur","onMouseEnter","onMouseLeave","handleEscKey","key","TooltipV3DatatestId","TOOLTIP_TEXT_WRAPPER","TRIGGER_WRAPPER","propTypes","dsTooltipPropTypes","DSTooltipV3WithSchema","describe","description"],"mappings":"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"}
|
package/esm/v3/styleds.js
CHANGED
|
@@ -1,10 +1,7 @@
|
|
|
1
1
|
import styled from 'styled-components';
|
|
2
2
|
|
|
3
|
-
var StyledTriggerContainer = /*#__PURE__*/styled.div.withConfig({
|
|
4
|
-
componentId: "sc-18a4gem-0"
|
|
5
|
-
})(["width:fit-content;"]);
|
|
6
3
|
var StyledTooltipContainer = /*#__PURE__*/styled.div.withConfig({
|
|
7
|
-
componentId: "sc-18a4gem-
|
|
4
|
+
componentId: "sc-18a4gem-0"
|
|
8
5
|
})(["text-align:center;min-width:", ";max-width:250px;min-height:30px;display:grid;align-items:center;padding:", ";position:relative;background-color:white;border-radius:2px;font-size:13px;color:", ";box-shadow:0 1px 5px 0 rgb(0 0 0 / 13%),0 2px 4px 0 rgb(0 0 0 / 20%);filter:drop-shadow(0 4px 8px rgba(0,0,0,0.2));transition:visibility 0.1s ease-in;"], function (_ref) {
|
|
9
6
|
var theme = _ref.theme;
|
|
10
7
|
return theme.space.l;
|
|
@@ -16,14 +13,17 @@ var StyledTooltipContainer = /*#__PURE__*/styled.div.withConfig({
|
|
|
16
13
|
return theme.colors.neutral[600];
|
|
17
14
|
});
|
|
18
15
|
var StyledTooltipText = /*#__PURE__*/styled.div.withConfig({
|
|
19
|
-
componentId: "sc-18a4gem-
|
|
16
|
+
componentId: "sc-18a4gem-1"
|
|
20
17
|
})(["white-space:normal;word-wrap:break-word;display:inline-block;text-align:", ";"], function (_ref4) {
|
|
21
18
|
var textAlign = _ref4.textAlign;
|
|
22
19
|
return textAlign;
|
|
23
20
|
});
|
|
24
21
|
var StyledMouseOverDetectionBox = /*#__PURE__*/styled.div.withConfig({
|
|
25
|
-
componentId: "sc-18a4gem-
|
|
22
|
+
componentId: "sc-18a4gem-2"
|
|
26
23
|
})(["position:absolute;top:-15px;right:-15px;width:calc(100% + 30px);height:calc(100% + 30px);z-index:-1;"]);
|
|
24
|
+
var StyledTriggerWrapper = /*#__PURE__*/styled.div.withConfig({
|
|
25
|
+
componentId: "sc-18a4gem-3"
|
|
26
|
+
})(["display:inline-block;"]);
|
|
27
27
|
|
|
28
|
-
export { StyledMouseOverDetectionBox, StyledTooltipContainer, StyledTooltipText,
|
|
28
|
+
export { StyledMouseOverDetectionBox, StyledTooltipContainer, StyledTooltipText, StyledTriggerWrapper };
|
|
29
29
|
//# sourceMappingURL=styleds.js.map
|
package/esm/v3/styleds.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styleds.js","sources":["../../../src/v3/styleds.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nexport const
|
|
1
|
+
{"version":3,"file":"styleds.js","sources":["../../../src/v3/styleds.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledTooltipContainer = styled.div`\n text-align: center;\n min-width: ${({ theme }) => theme.space.l};\n max-width: 250px;\n min-height: 30px;\n display: grid;\n align-items: center;\n padding: ${({ theme }) => `${theme.space.xxxs} ${theme.space.xs}`};\n position: relative;\n background-color: white;\n border-radius: 2px;\n font-size: 13px;\n color: ${({ theme }) => theme.colors.neutral[600]};\n box-shadow: 0 1px 5px 0 rgb(0 0 0 / 13%), 0 2px 4px 0 rgb(0 0 0 / 20%);\n filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));\n transition: visibility 0.1s ease-in;\n`;\n\nexport const StyledTooltipText = styled.div<{ textAlign: string }>`\n white-space: normal;\n word-wrap: break-word;\n display: inline-block;\n text-align: ${({ textAlign }) => textAlign};\n`;\n\nexport const StyledMouseOverDetectionBox = styled.div`\n position: absolute;\n top: -15px;\n right: -15px;\n width: calc(100% + 30px);\n height: calc(100% + 30px);\n z-index: -1;\n`;\n\nexport const StyledTriggerWrapper = styled.div`\n display: inline-block;\n`;\n"],"names":["StyledTooltipContainer","styled","div","theme","space","l","xxxs","xs","colors","neutral","StyledTooltipText","textAlign","StyledMouseOverDetectionBox","StyledTriggerWrapper"],"mappings":";;IAEaA,sBAAsB,gBAAGC,MAAM,CAACC,GAAV;AAAA;AAAA,kWAEpB;AAAA,MAAGC,KAAH,QAAGA,KAAH;AAAA,SAAeA,KAAK,CAACC,KAAN,CAAYC,CAA3B;AAAA,CAFoB,EAOtB;AAAA,MAAGF,KAAH,SAAGA,KAAH;AAAA,mBAAkBA,KAAK,CAACC,KAAN,CAAYE,IAA9B,cAAsCH,KAAK,CAACC,KAAN,CAAYG,EAAlD;AAAA,CAPsB,EAYxB;AAAA,MAAGJ,KAAH,SAAGA,KAAH;AAAA,SAAeA,KAAK,CAACK,MAAN,CAAaC,OAAb,CAAqB,GAArB,CAAf;AAAA,CAZwB;IAkBtBC,iBAAiB,gBAAGT,MAAM,CAACC,GAAV;AAAA;AAAA,sFAId;AAAA,MAAGS,SAAH,SAAGA,SAAH;AAAA,SAAmBA,SAAnB;AAAA,CAJc;IAOjBC,2BAA2B,gBAAGX,MAAM,CAACC,GAAV;AAAA;AAAA;IAS3BW,oBAAoB,gBAAGZ,MAAM,CAACC,GAAV;AAAA;AAAA;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-tooltip",
|
|
3
|
-
"version": "1.57.0-rc.
|
|
3
|
+
"version": "1.57.0-rc.13",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "Ellie Mae - Dim Sum - Tooltip",
|
|
6
6
|
"module": "esm/index.js",
|
|
@@ -16,14 +16,14 @@
|
|
|
16
16
|
"build": "node ../../scripts/build/build.js"
|
|
17
17
|
},
|
|
18
18
|
"dependencies": {
|
|
19
|
-
"@elliemae/ds-basic": "1.57.0-rc.
|
|
20
|
-
"@elliemae/ds-classnames": "1.57.0-rc.
|
|
21
|
-
"@elliemae/ds-popper": "1.57.0-rc.
|
|
22
|
-
"@elliemae/ds-popperjs": "1.57.0-rc.
|
|
23
|
-
"@elliemae/ds-portal": "1.57.0-rc.
|
|
24
|
-
"@elliemae/ds-shared": "1.57.0-rc.
|
|
25
|
-
"@elliemae/ds-system": "1.57.0-rc.
|
|
26
|
-
"@elliemae/ds-utilities": "1.57.0-rc.
|
|
19
|
+
"@elliemae/ds-basic": "1.57.0-rc.13",
|
|
20
|
+
"@elliemae/ds-classnames": "1.57.0-rc.13",
|
|
21
|
+
"@elliemae/ds-popper": "1.57.0-rc.13",
|
|
22
|
+
"@elliemae/ds-popperjs": "1.57.0-rc.13",
|
|
23
|
+
"@elliemae/ds-portal": "1.57.0-rc.13",
|
|
24
|
+
"@elliemae/ds-shared": "1.57.0-rc.13",
|
|
25
|
+
"@elliemae/ds-system": "1.57.0-rc.13",
|
|
26
|
+
"@elliemae/ds-utilities": "1.57.0-rc.13",
|
|
27
27
|
"@popperjs/core": "2.9.2",
|
|
28
28
|
"react-desc": "^4.1.2",
|
|
29
29
|
"react-popper": "2.2.5"
|