@elliemae/ds-truncated-tooltip-text 3.1.4-rc.1 → 3.1.5-rc.10
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/SimpleTruncatedTooltipText.js +3 -3
- package/dist/cjs/SimpleTruncatedTooltipText.js.map +2 -2
- package/dist/cjs/TooltipTextProvider.js +1 -9
- package/dist/cjs/TooltipTextProvider.js.map +2 -2
- package/dist/esm/SimpleTruncatedTooltipText.js +5 -5
- package/dist/esm/SimpleTruncatedTooltipText.js.map +2 -2
- package/dist/esm/TooltipTextProvider.js +1 -9
- package/dist/esm/TooltipTextProvider.js.map +2 -2
- package/package.json +6 -6
|
@@ -91,9 +91,10 @@ const SimpleTruncatedTooltipText = (props) => {
|
|
|
91
91
|
onMouseLeave: handleMouseLeave
|
|
92
92
|
};
|
|
93
93
|
}, [showTooltip, handleMouseEnter, handleMouseLeave]);
|
|
94
|
+
const theme = (0, import_react.useContext)(import_ds_system.ThemeContext);
|
|
94
95
|
const PurePopover = (0, import_react.useMemo)(() => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, tooltipState.visible ? /* @__PURE__ */ import_react.default.createElement(import_ds_popover.DSPopover, {
|
|
95
96
|
boundaries: "window",
|
|
96
|
-
style: { pointerEvents: "none", zIndex },
|
|
97
|
+
style: { pointerEvents: "none", zIndex: zIndex ?? theme.zIndex.tooltip },
|
|
97
98
|
placement,
|
|
98
99
|
content: tooltipState.value,
|
|
99
100
|
referenceEl: tooltipState.reference,
|
|
@@ -137,8 +138,7 @@ SimpleTruncatedTooltipText.defaultProps = {
|
|
|
137
138
|
textOptions: {},
|
|
138
139
|
value: "",
|
|
139
140
|
placement: import_ds_popover.PopperPositions.TOP,
|
|
140
|
-
tooltipDelay: 200
|
|
141
|
-
zIndex: 110
|
|
141
|
+
tooltipDelay: 200
|
|
142
142
|
};
|
|
143
143
|
var SimpleTruncatedTooltipText_default = SimpleTruncatedTooltipText;
|
|
144
144
|
//# sourceMappingURL=SimpleTruncatedTooltipText.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/SimpleTruncatedTooltipText.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { useCancellableDelayedCallback } from '@elliemae/ds-utilities';\nimport PropTypes from 'prop-types';\nimport { styled } from '@elliemae/ds-system';\nimport { DSPopover, PopperPositions as positions } from '@elliemae/ds-popover';\n\nconst dsTestId = 'DS-SimpleTruncateText';\n\nconst isEllipsisActive = ({ offsetWidth, scrollWidth }) => offsetWidth < scrollWidth;\n\nconst initialTooltipState = (value = '', options = {}) => ({\n reference: null,\n visible: false,\n value,\n options,\n});\n// reduce the possibility of error showing the tooltip(text-overflow: ellipsis) https://jira.elliemae.io/browse/PUI-1755\nconst Text = styled.span`\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n display: inline-block;\n max-width: 100%;\n`;\n\nconst SimpleTruncatedTooltipText = (props) => {\n const { containerProps, tooltipDelay, placement, value, zIndex, tooltipOptions, textOptions } = props;\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useCallback, useContext, useMemo, useState } from 'react';\nimport { useCancellableDelayedCallback } from '@elliemae/ds-utilities';\nimport PropTypes from 'prop-types';\nimport { styled, ThemeContext } from '@elliemae/ds-system';\nimport { DSPopover, PopperPositions as positions } from '@elliemae/ds-popover';\n\nconst dsTestId = 'DS-SimpleTruncateText';\n\nconst isEllipsisActive = ({ offsetWidth, scrollWidth }) => offsetWidth < scrollWidth;\n\nconst initialTooltipState = (value = '', options = {}) => ({\n reference: null,\n visible: false,\n value,\n options,\n});\n// reduce the possibility of error showing the tooltip(text-overflow: ellipsis) https://jira.elliemae.io/browse/PUI-1755\nconst Text = styled.span`\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n display: inline-block;\n max-width: 100%;\n`;\n\nconst SimpleTruncatedTooltipText = (props) => {\n const { containerProps, tooltipDelay, placement, value, zIndex, tooltipOptions, textOptions } = props;\n // not using \"usePopoverProviderState\" because usePopoverState has memory leak issues\n const [tooltipState, setTooltipState] = useState(initialTooltipState(value, tooltipOptions));\n const show = useCallback(\n (newState) => {\n setTooltipState({ ...tooltipState, ...newState, visible: true });\n },\n [tooltipState],\n );\n const hideTooltip = useCallback(\n (newState) => {\n setTooltipState({ ...tooltipState, ...newState, visible: false });\n },\n [tooltipState],\n );\n const [showTooltip, cancelShowTooltip] = useCancellableDelayedCallback(show, tooltipDelay);\n\n const handleMouseEnter = useCallback(\n (e) => {\n const { target } = e;\n // we search for the closest parent with data-testid matching this component\n // this is required because the target may not be this component itself\n // when the user gives JSX as a value.\n // JSX as a value is required for features like text highlight during research\n // wich would still allow the truncation behaviour (see tree view for example)\n // when the target has the test-id itself target===SimpleTruncatedTextEl\n const SimpleTruncatedTextEl = target.closest(`[data-testid=\"${dsTestId}\"]`);\n if (SimpleTruncatedTextEl && isEllipsisActive(SimpleTruncatedTextEl)) {\n showTooltip({ value, reference: SimpleTruncatedTextEl });\n }\n },\n [showTooltip, value],\n );\n\n const handleMouseLeave = useCallback(() => {\n cancelShowTooltip();\n hideTooltip({ reference: null });\n }, [hideTooltip, cancelShowTooltip]);\n\n const handlers = useMemo(() => {\n if (!showTooltip) return {};\n return {\n onMouseEnter: handleMouseEnter,\n onMouseLeave: handleMouseLeave,\n };\n }, [showTooltip, handleMouseEnter, handleMouseLeave]);\n\n const theme = useContext(ThemeContext);\n\n const PurePopover = useMemo(\n () => (\n <>\n {tooltipState.visible ? (\n <DSPopover\n boundaries=\"window\"\n style={{ pointerEvents: 'none', zIndex: zIndex ?? theme.zIndex.tooltip }}\n placement={placement}\n content={tooltipState.value}\n referenceEl={tooltipState.reference}\n visible={tooltipState.visible}\n showArrow\n />\n ) : null}\n </>\n ),\n [tooltipState, placement, zIndex],\n );\n const PureText = useMemo(\n () => (\n <>\n <Text\n {...(containerProps && { ...containerProps })}\n {...(textOptions && { ...textOptions })}\n {...(handlers && { ...handlers })}\n data-testid={dsTestId} // this is used by mouse enter too. required to support value as JSX\n >\n {value}\n </Text>\n </>\n ),\n [containerProps, textOptions, handlers, value],\n );\n\n const PureSimpleTruncatedTooltipText = useMemo(\n () => (\n <>\n {PureText}\n {PurePopover}\n </>\n ),\n [PureText, PurePopover],\n );\n\n return PureSimpleTruncatedTooltipText;\n};\n\nSimpleTruncatedTooltipText.propTypes = {\n containerProps: PropTypes.object,\n tooltipOptions: PropTypes.object,\n textOptions: PropTypes.object,\n /** Text that when truncated will trigger the tooltip interaction */\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.node]),\n /** Position of the tooltip */\n placement: PropTypes.oneOf([\n positions.AUTO_START,\n positions.AUTO_END,\n positions.AUTO,\n positions.TOP_START,\n positions.TOP,\n positions.TOP_END,\n positions.RIGHT_START,\n positions.RIGHT,\n positions.RIGHT_END,\n positions.BOTTOM_START,\n positions.BOTTOM,\n positions.BOTTOM_END,\n positions.LEFT_START,\n positions.LEFT,\n positions.LEFT_END,\n ]),\n /** Delay to show the tooltip */\n tooltipDelay: PropTypes.number,\n /** override default zIndex */\n zIndex: PropTypes.number,\n};\n\nSimpleTruncatedTooltipText.defaultProps = {\n containerProps: {},\n tooltipOptions: {},\n textOptions: {},\n value: '',\n placement: positions.TOP,\n tooltipDelay: 200,\n};\n\nexport { SimpleTruncatedTooltipText };\nexport default SimpleTruncatedTooltipText;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkE;AAClE,0BAA8C;AAC9C,wBAAsB;AACtB,uBAAqC;AACrC,wBAAwD;AAExD,MAAM,WAAW;AAEjB,MAAM,mBAAmB,CAAC,EAAE,aAAa,kBAAkB,cAAc;AAEzE,MAAM,sBAAsB,CAAC,QAAQ,IAAI,UAAU,CAAC,MAAO;AAAA,EACzD,WAAW;AAAA,EACX,SAAS;AAAA,EACT;AAAA,EACA;AACF;AAEA,MAAM,OAAO,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQpB,MAAM,6BAA6B,CAAC,UAAU;AAC5C,QAAM,EAAE,gBAAgB,cAAc,WAAW,OAAO,QAAQ,gBAAgB,gBAAgB;AAEhG,QAAM,CAAC,cAAc,mBAAmB,2BAAS,oBAAoB,OAAO,cAAc,CAAC;AAC3F,QAAM,OAAO,8BACX,CAAC,aAAa;AACZ,oBAAgB,gDAAK,eAAiB,WAAtB,EAAgC,SAAS,KAAK,EAAC;AAAA,EACjE,GACA,CAAC,YAAY,CACf;AACA,QAAM,cAAc,8BAClB,CAAC,aAAa;AACZ,oBAAgB,gDAAK,eAAiB,WAAtB,EAAgC,SAAS,MAAM,EAAC;AAAA,EAClE,GACA,CAAC,YAAY,CACf;AACA,QAAM,CAAC,aAAa,qBAAqB,uDAA8B,MAAM,YAAY;AAEzF,QAAM,mBAAmB,8BACvB,CAAC,MAAM;AACL,UAAM,EAAE,WAAW;AAOnB,UAAM,wBAAwB,OAAO,QAAQ,iBAAiB,YAAY;AAC1E,QAAI,yBAAyB,iBAAiB,qBAAqB,GAAG;AACpE,kBAAY,EAAE,OAAO,WAAW,sBAAsB,CAAC;AAAA,IACzD;AAAA,EACF,GACA,CAAC,aAAa,KAAK,CACrB;AAEA,QAAM,mBAAmB,8BAAY,MAAM;AACzC,sBAAkB;AAClB,gBAAY,EAAE,WAAW,KAAK,CAAC;AAAA,EACjC,GAAG,CAAC,aAAa,iBAAiB,CAAC;AAEnC,QAAM,WAAW,0BAAQ,MAAM;AAC7B,QAAI,CAAC;AAAa,aAAO,CAAC;AAC1B,WAAO;AAAA,MACL,cAAc;AAAA,MACd,cAAc;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,aAAa,kBAAkB,gBAAgB,CAAC;AAEpD,QAAM,QAAQ,6BAAW,6BAAY;AAErC,QAAM,cAAc,0BAClB,MACE,wFACG,aAAa,UACZ,mDAAC;AAAA,IACC,YAAW;AAAA,IACX,OAAO,EAAE,eAAe,QAAQ,QAAQ,UAAU,MAAM,OAAO,QAAQ;AAAA,IACvE;AAAA,IACA,SAAS,aAAa;AAAA,IACtB,aAAa,aAAa;AAAA,IAC1B,SAAS,aAAa;AAAA,IACtB,WAAS;AAAA,GACX,IACE,IACN,GAEF,CAAC,cAAc,WAAW,MAAM,CAClC;AACA,QAAM,WAAW,0BACf,MACE,wFACE,mDAAC,qEACM,kBAAkB,mBAAK,kBACvB,eAAe,mBAAK,eACpB,YAAY,mBAAK,YAHvB;AAAA,IAIC,eAAa;AAAA,MAEZ,KACH,CACF,GAEF,CAAC,gBAAgB,aAAa,UAAU,KAAK,CAC/C;AAEA,QAAM,iCAAiC,0BACrC,MACE,wFACG,UACA,WACH,GAEF,CAAC,UAAU,WAAW,CACxB;AAEA,SAAO;AACT;AAEA,2BAA2B,YAAY;AAAA,EACrC,gBAAgB,0BAAU;AAAA,EAC1B,gBAAgB,0BAAU;AAAA,EAC1B,aAAa,0BAAU;AAAA,EAEvB,OAAO,0BAAU,UAAU,CAAC,0BAAU,QAAQ,0BAAU,QAAQ,0BAAU,IAAI,CAAC;AAAA,EAE/E,WAAW,0BAAU,MAAM;AAAA,IACzB,kCAAU;AAAA,IACV,kCAAU;AAAA,IACV,kCAAU;AAAA,IACV,kCAAU;AAAA,IACV,kCAAU;AAAA,IACV,kCAAU;AAAA,IACV,kCAAU;AAAA,IACV,kCAAU;AAAA,IACV,kCAAU;AAAA,IACV,kCAAU;AAAA,IACV,kCAAU;AAAA,IACV,kCAAU;AAAA,IACV,kCAAU;AAAA,IACV,kCAAU;AAAA,IACV,kCAAU;AAAA,EACZ,CAAC;AAAA,EAED,cAAc,0BAAU;AAAA,EAExB,QAAQ,0BAAU;AACpB;AAEA,2BAA2B,eAAe;AAAA,EACxC,gBAAgB,CAAC;AAAA,EACjB,gBAAgB,CAAC;AAAA,EACjB,aAAa,CAAC;AAAA,EACd,OAAO;AAAA,EACP,WAAW,kCAAU;AAAA,EACrB,cAAc;AAChB;AAGA,IAAO,qCAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -60,15 +60,7 @@ var import_ds_popover = require("@elliemae/ds-popover");
|
|
|
60
60
|
const TruncatedTooltipContext = import_react.default.createContext();
|
|
61
61
|
const { Provider } = TruncatedTooltipContext;
|
|
62
62
|
function TooltipTextProvider(_a) {
|
|
63
|
-
var _b = _a, {
|
|
64
|
-
children,
|
|
65
|
-
tooltipDelay = 200,
|
|
66
|
-
placement = "top"
|
|
67
|
-
} = _b, tooltipOptions = __objRest(_b, [
|
|
68
|
-
"children",
|
|
69
|
-
"tooltipDelay",
|
|
70
|
-
"placement"
|
|
71
|
-
]);
|
|
63
|
+
var _b = _a, { children, tooltipDelay = 200, placement = "top" } = _b, tooltipOptions = __objRest(_b, ["children", "tooltipDelay", "placement"]);
|
|
72
64
|
const {
|
|
73
65
|
show: showTooltip,
|
|
74
66
|
hide: hideTooltip,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/TooltipTextProvider.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useMemo, useState } from 'react';\nimport { DSPopover, usePopoverProviderState } from '@elliemae/ds-popover';\n\nconst TruncatedTooltipContext = React.createContext();\n\nconst { Provider } = TruncatedTooltipContext;\n\nfunction TooltipTextProvider({
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAyC;AACzC,wBAAmD;AAEnD,MAAM,0BAA0B,qBAAM,cAAc;AAEpD,MAAM,EAAE,aAAa;AAErB,6BAA6B,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useMemo, useState } from 'react';\nimport { DSPopover, usePopoverProviderState } from '@elliemae/ds-popover';\n\nconst TruncatedTooltipContext = React.createContext();\n\nconst { Provider } = TruncatedTooltipContext;\n\nfunction TooltipTextProvider({ children, tooltipDelay = 200, placement = 'top', ...tooltipOptions }) {\n const {\n show: showTooltip,\n hide: hideTooltip,\n state: tooltipState,\n } = usePopoverProviderState({ delay: tooltipDelay });\n const [zIndex, setZIndex] = useState(110);\n\n const value = useMemo(\n () => ({\n showTooltip,\n hideTooltip,\n setZIndex,\n }),\n [],\n );\n\n return (\n <Provider value={value}>\n {children}\n {tooltipState.visible ? (\n <DSPopover\n boundaries=\"window\"\n placement={placement}\n showArrow\n {...tooltipOptions}\n {...(tooltipState.options || {})}\n content={tooltipState.value}\n referenceEl={tooltipState.reference}\n style={{ pointerEvents: 'none', zIndex }}\n visible={tooltipState.visible}\n />\n ) : null}\n </Provider>\n );\n}\n\nTooltipTextProvider.propTypes = {};\nTooltipTextProvider.defaultProps = {};\n\nexport { TooltipTextProvider, TruncatedTooltipContext };\nexport default TooltipTextProvider;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAyC;AACzC,wBAAmD;AAEnD,MAAM,0BAA0B,qBAAM,cAAc;AAEpD,MAAM,EAAE,aAAa;AAErB,6BAA6B,IAAwE;AAAxE,eAAE,YAAU,eAAe,KAAK,YAAY,UAA5C,IAAsD,2BAAtD,IAAsD,CAApD,YAAU,gBAAoB;AAC3D,QAAM;AAAA,IACJ,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,MACL,+CAAwB,EAAE,OAAO,aAAa,CAAC;AACnD,QAAM,CAAC,QAAQ,aAAa,2BAAS,GAAG;AAExC,QAAM,QAAQ,0BACZ,MAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF,IACA,CAAC,CACH;AAEA,SACE,mDAAC;AAAA,IAAS;AAAA,KACP,UACA,aAAa,UACZ,mDAAC;AAAA,IACC,YAAW;AAAA,IACX;AAAA,IACA,WAAS;AAAA,KACL,iBACC,aAAa,WAAW,CAAC,IAL/B;AAAA,IAMC,SAAS,aAAa;AAAA,IACtB,aAAa,aAAa;AAAA,IAC1B,OAAO,EAAE,eAAe,QAAQ,OAAO;AAAA,IACvC,SAAS,aAAa;AAAA,IACxB,IACE,IACN;AAEJ;AAEA,oBAAoB,YAAY,CAAC;AACjC,oBAAoB,eAAe,CAAC;AAGpC,IAAO,8BAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -18,10 +18,10 @@ 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, { useCallback, useMemo, useState } from "react";
|
|
21
|
+
import React2, { useCallback, useContext, useMemo, useState } from "react";
|
|
22
22
|
import { useCancellableDelayedCallback } from "@elliemae/ds-utilities";
|
|
23
23
|
import PropTypes from "prop-types";
|
|
24
|
-
import { styled } from "@elliemae/ds-system";
|
|
24
|
+
import { styled, ThemeContext } from "@elliemae/ds-system";
|
|
25
25
|
import { DSPopover, PopperPositions as positions } from "@elliemae/ds-popover";
|
|
26
26
|
const dsTestId = "DS-SimpleTruncateText";
|
|
27
27
|
const isEllipsisActive = ({ offsetWidth, scrollWidth }) => offsetWidth < scrollWidth;
|
|
@@ -67,9 +67,10 @@ const SimpleTruncatedTooltipText = (props) => {
|
|
|
67
67
|
onMouseLeave: handleMouseLeave
|
|
68
68
|
};
|
|
69
69
|
}, [showTooltip, handleMouseEnter, handleMouseLeave]);
|
|
70
|
+
const theme = useContext(ThemeContext);
|
|
70
71
|
const PurePopover = useMemo(() => /* @__PURE__ */ React2.createElement(React2.Fragment, null, tooltipState.visible ? /* @__PURE__ */ React2.createElement(DSPopover, {
|
|
71
72
|
boundaries: "window",
|
|
72
|
-
style: { pointerEvents: "none", zIndex },
|
|
73
|
+
style: { pointerEvents: "none", zIndex: zIndex ?? theme.zIndex.tooltip },
|
|
73
74
|
placement,
|
|
74
75
|
content: tooltipState.value,
|
|
75
76
|
referenceEl: tooltipState.reference,
|
|
@@ -113,8 +114,7 @@ SimpleTruncatedTooltipText.defaultProps = {
|
|
|
113
114
|
textOptions: {},
|
|
114
115
|
value: "",
|
|
115
116
|
placement: positions.TOP,
|
|
116
|
-
tooltipDelay: 200
|
|
117
|
-
zIndex: 110
|
|
117
|
+
tooltipDelay: 200
|
|
118
118
|
};
|
|
119
119
|
var SimpleTruncatedTooltipText_default = SimpleTruncatedTooltipText;
|
|
120
120
|
export {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/SimpleTruncatedTooltipText.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { useCancellableDelayedCallback } from '@elliemae/ds-utilities';\nimport PropTypes from 'prop-types';\nimport { styled } from '@elliemae/ds-system';\nimport { DSPopover, PopperPositions as positions } from '@elliemae/ds-popover';\n\nconst dsTestId = 'DS-SimpleTruncateText';\n\nconst isEllipsisActive = ({ offsetWidth, scrollWidth }) => offsetWidth < scrollWidth;\n\nconst initialTooltipState = (value = '', options = {}) => ({\n reference: null,\n visible: false,\n value,\n options,\n});\n// reduce the possibility of error showing the tooltip(text-overflow: ellipsis) https://jira.elliemae.io/browse/PUI-1755\nconst Text = styled.span`\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n display: inline-block;\n max-width: 100%;\n`;\n\nconst SimpleTruncatedTooltipText = (props) => {\n const { containerProps, tooltipDelay, placement, value, zIndex, tooltipOptions, textOptions } = props;\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AACA;AACA;AACA;AAEA,MAAM,WAAW;AAEjB,MAAM,mBAAmB,CAAC,EAAE,aAAa,kBAAkB,cAAc;AAEzE,MAAM,sBAAsB,CAAC,QAAQ,IAAI,UAAU,CAAC,MAAO;AAAA,EACzD,WAAW;AAAA,EACX,SAAS;AAAA,EACT;AAAA,EACA;AACF;AAEA,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQpB,MAAM,6BAA6B,CAAC,UAAU;AAC5C,QAAM,EAAE,gBAAgB,cAAc,WAAW,OAAO,QAAQ,gBAAgB,gBAAgB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useCallback, useContext, useMemo, useState } from 'react';\nimport { useCancellableDelayedCallback } from '@elliemae/ds-utilities';\nimport PropTypes from 'prop-types';\nimport { styled, ThemeContext } from '@elliemae/ds-system';\nimport { DSPopover, PopperPositions as positions } from '@elliemae/ds-popover';\n\nconst dsTestId = 'DS-SimpleTruncateText';\n\nconst isEllipsisActive = ({ offsetWidth, scrollWidth }) => offsetWidth < scrollWidth;\n\nconst initialTooltipState = (value = '', options = {}) => ({\n reference: null,\n visible: false,\n value,\n options,\n});\n// reduce the possibility of error showing the tooltip(text-overflow: ellipsis) https://jira.elliemae.io/browse/PUI-1755\nconst Text = styled.span`\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n display: inline-block;\n max-width: 100%;\n`;\n\nconst SimpleTruncatedTooltipText = (props) => {\n const { containerProps, tooltipDelay, placement, value, zIndex, tooltipOptions, textOptions } = props;\n // not using \"usePopoverProviderState\" because usePopoverState has memory leak issues\n const [tooltipState, setTooltipState] = useState(initialTooltipState(value, tooltipOptions));\n const show = useCallback(\n (newState) => {\n setTooltipState({ ...tooltipState, ...newState, visible: true });\n },\n [tooltipState],\n );\n const hideTooltip = useCallback(\n (newState) => {\n setTooltipState({ ...tooltipState, ...newState, visible: false });\n },\n [tooltipState],\n );\n const [showTooltip, cancelShowTooltip] = useCancellableDelayedCallback(show, tooltipDelay);\n\n const handleMouseEnter = useCallback(\n (e) => {\n const { target } = e;\n // we search for the closest parent with data-testid matching this component\n // this is required because the target may not be this component itself\n // when the user gives JSX as a value.\n // JSX as a value is required for features like text highlight during research\n // wich would still allow the truncation behaviour (see tree view for example)\n // when the target has the test-id itself target===SimpleTruncatedTextEl\n const SimpleTruncatedTextEl = target.closest(`[data-testid=\"${dsTestId}\"]`);\n if (SimpleTruncatedTextEl && isEllipsisActive(SimpleTruncatedTextEl)) {\n showTooltip({ value, reference: SimpleTruncatedTextEl });\n }\n },\n [showTooltip, value],\n );\n\n const handleMouseLeave = useCallback(() => {\n cancelShowTooltip();\n hideTooltip({ reference: null });\n }, [hideTooltip, cancelShowTooltip]);\n\n const handlers = useMemo(() => {\n if (!showTooltip) return {};\n return {\n onMouseEnter: handleMouseEnter,\n onMouseLeave: handleMouseLeave,\n };\n }, [showTooltip, handleMouseEnter, handleMouseLeave]);\n\n const theme = useContext(ThemeContext);\n\n const PurePopover = useMemo(\n () => (\n <>\n {tooltipState.visible ? (\n <DSPopover\n boundaries=\"window\"\n style={{ pointerEvents: 'none', zIndex: zIndex ?? theme.zIndex.tooltip }}\n placement={placement}\n content={tooltipState.value}\n referenceEl={tooltipState.reference}\n visible={tooltipState.visible}\n showArrow\n />\n ) : null}\n </>\n ),\n [tooltipState, placement, zIndex],\n );\n const PureText = useMemo(\n () => (\n <>\n <Text\n {...(containerProps && { ...containerProps })}\n {...(textOptions && { ...textOptions })}\n {...(handlers && { ...handlers })}\n data-testid={dsTestId} // this is used by mouse enter too. required to support value as JSX\n >\n {value}\n </Text>\n </>\n ),\n [containerProps, textOptions, handlers, value],\n );\n\n const PureSimpleTruncatedTooltipText = useMemo(\n () => (\n <>\n {PureText}\n {PurePopover}\n </>\n ),\n [PureText, PurePopover],\n );\n\n return PureSimpleTruncatedTooltipText;\n};\n\nSimpleTruncatedTooltipText.propTypes = {\n containerProps: PropTypes.object,\n tooltipOptions: PropTypes.object,\n textOptions: PropTypes.object,\n /** Text that when truncated will trigger the tooltip interaction */\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.node]),\n /** Position of the tooltip */\n placement: PropTypes.oneOf([\n positions.AUTO_START,\n positions.AUTO_END,\n positions.AUTO,\n positions.TOP_START,\n positions.TOP,\n positions.TOP_END,\n positions.RIGHT_START,\n positions.RIGHT,\n positions.RIGHT_END,\n positions.BOTTOM_START,\n positions.BOTTOM,\n positions.BOTTOM_END,\n positions.LEFT_START,\n positions.LEFT,\n positions.LEFT_END,\n ]),\n /** Delay to show the tooltip */\n tooltipDelay: PropTypes.number,\n /** override default zIndex */\n zIndex: PropTypes.number,\n};\n\nSimpleTruncatedTooltipText.defaultProps = {\n containerProps: {},\n tooltipOptions: {},\n textOptions: {},\n value: '',\n placement: positions.TOP,\n tooltipDelay: 200,\n};\n\nexport { SimpleTruncatedTooltipText };\nexport default SimpleTruncatedTooltipText;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -35,15 +35,7 @@ import { DSPopover, usePopoverProviderState } from "@elliemae/ds-popover";
|
|
|
35
35
|
const TruncatedTooltipContext = React2.createContext();
|
|
36
36
|
const { Provider } = TruncatedTooltipContext;
|
|
37
37
|
function TooltipTextProvider(_a) {
|
|
38
|
-
var _b = _a, {
|
|
39
|
-
children,
|
|
40
|
-
tooltipDelay = 200,
|
|
41
|
-
placement = "top"
|
|
42
|
-
} = _b, tooltipOptions = __objRest(_b, [
|
|
43
|
-
"children",
|
|
44
|
-
"tooltipDelay",
|
|
45
|
-
"placement"
|
|
46
|
-
]);
|
|
38
|
+
var _b = _a, { children, tooltipDelay = 200, placement = "top" } = _b, tooltipOptions = __objRest(_b, ["children", "tooltipDelay", "placement"]);
|
|
47
39
|
const {
|
|
48
40
|
show: showTooltip,
|
|
49
41
|
hide: hideTooltip,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/TooltipTextProvider.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useMemo, useState } from 'react';\nimport { DSPopover, usePopoverProviderState } from '@elliemae/ds-popover';\n\nconst TruncatedTooltipContext = React.createContext();\n\nconst { Provider } = TruncatedTooltipContext;\n\nfunction TooltipTextProvider({
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AAEA,MAAM,0BAA0B,OAAM,cAAc;AAEpD,MAAM,EAAE,aAAa;AAErB,6BAA6B,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useMemo, useState } from 'react';\nimport { DSPopover, usePopoverProviderState } from '@elliemae/ds-popover';\n\nconst TruncatedTooltipContext = React.createContext();\n\nconst { Provider } = TruncatedTooltipContext;\n\nfunction TooltipTextProvider({ children, tooltipDelay = 200, placement = 'top', ...tooltipOptions }) {\n const {\n show: showTooltip,\n hide: hideTooltip,\n state: tooltipState,\n } = usePopoverProviderState({ delay: tooltipDelay });\n const [zIndex, setZIndex] = useState(110);\n\n const value = useMemo(\n () => ({\n showTooltip,\n hideTooltip,\n setZIndex,\n }),\n [],\n );\n\n return (\n <Provider value={value}>\n {children}\n {tooltipState.visible ? (\n <DSPopover\n boundaries=\"window\"\n placement={placement}\n showArrow\n {...tooltipOptions}\n {...(tooltipState.options || {})}\n content={tooltipState.value}\n referenceEl={tooltipState.reference}\n style={{ pointerEvents: 'none', zIndex }}\n visible={tooltipState.visible}\n />\n ) : null}\n </Provider>\n );\n}\n\nTooltipTextProvider.propTypes = {};\nTooltipTextProvider.defaultProps = {};\n\nexport { TooltipTextProvider, TruncatedTooltipContext };\nexport default TooltipTextProvider;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AAEA,MAAM,0BAA0B,OAAM,cAAc;AAEpD,MAAM,EAAE,aAAa;AAErB,6BAA6B,IAAwE;AAAxE,eAAE,YAAU,eAAe,KAAK,YAAY,UAA5C,IAAsD,2BAAtD,IAAsD,CAApD,YAAU,gBAAoB;AAC3D,QAAM;AAAA,IACJ,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,MACL,wBAAwB,EAAE,OAAO,aAAa,CAAC;AACnD,QAAM,CAAC,QAAQ,aAAa,SAAS,GAAG;AAExC,QAAM,QAAQ,QACZ,MAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF,IACA,CAAC,CACH;AAEA,SACE,qCAAC;AAAA,IAAS;AAAA,KACP,UACA,aAAa,UACZ,qCAAC;AAAA,IACC,YAAW;AAAA,IACX;AAAA,IACA,WAAS;AAAA,KACL,iBACC,aAAa,WAAW,CAAC,IAL/B;AAAA,IAMC,SAAS,aAAa;AAAA,IACtB,aAAa,aAAa;AAAA,IAC1B,OAAO,EAAE,eAAe,QAAQ,OAAO;AAAA,IACvC,SAAS,aAAa;AAAA,IACxB,IACE,IACN;AAEJ;AAEA,oBAAoB,YAAY,CAAC;AACjC,oBAAoB,eAAe,CAAC;AAGpC,IAAO,8BAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-truncated-tooltip-text",
|
|
3
|
-
"version": "3.1.
|
|
3
|
+
"version": "3.1.5-rc.10",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Truncated Tooltip Text",
|
|
6
6
|
"files": [
|
|
@@ -51,11 +51,11 @@
|
|
|
51
51
|
"indent": 4
|
|
52
52
|
},
|
|
53
53
|
"dependencies": {
|
|
54
|
-
"@elliemae/ds-popover": "3.1.
|
|
55
|
-
"@elliemae/ds-popper": "3.1.
|
|
56
|
-
"@elliemae/ds-system": "3.1.
|
|
57
|
-
"@elliemae/ds-tooltip": "3.1.
|
|
58
|
-
"@elliemae/ds-utilities": "3.1.
|
|
54
|
+
"@elliemae/ds-popover": "3.1.5-rc.10",
|
|
55
|
+
"@elliemae/ds-popper": "3.1.5-rc.10",
|
|
56
|
+
"@elliemae/ds-system": "3.1.5-rc.10",
|
|
57
|
+
"@elliemae/ds-tooltip": "3.1.5-rc.10",
|
|
58
|
+
"@elliemae/ds-utilities": "3.1.5-rc.10",
|
|
59
59
|
"prop-types": "~15.8.1"
|
|
60
60
|
},
|
|
61
61
|
"devDependencies": {
|