@elliemae/ds-truncated-tooltip-text 2.0.0-alpha.11 → 2.0.0-alpha.12
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/DSTruncateTextWithTooltip.js +75 -0
- package/cjs/DSTruncatedTooltipText.js +15 -7
- package/cjs/SimpleTruncatedTooltipText.js +26 -14
- package/cjs/TooltipTextProvider.js +5 -0
- package/cjs/index.js +3 -0
- package/esm/DSTruncateTextWithTooltip.js +65 -0
- package/esm/DSTruncatedTooltipText.js +15 -7
- package/esm/SimpleTruncatedTooltipText.js +25 -13
- package/esm/TooltipTextProvider.js +5 -0
- package/esm/index.js +1 -0
- package/package.json +11 -6
- package/types/DSTruncateTextWithTooltip.d.ts +8 -0
- package/types/DSTruncatedTooltipText.d.ts +38 -6
- package/types/index.d.ts +1 -0
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
6
|
+
require('core-js/modules/web.dom-collections.iterator.js');
|
|
7
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
8
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
9
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
10
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
11
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
12
|
+
var React = require('react');
|
|
13
|
+
var dsTooltip = require('@elliemae/ds-tooltip');
|
|
14
|
+
var styled = require('styled-components');
|
|
15
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
16
|
+
|
|
17
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
18
|
+
|
|
19
|
+
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
20
|
+
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
21
|
+
|
|
22
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
23
|
+
|
|
24
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
25
|
+
const Text = /*#__PURE__*/styled__default["default"].span.withConfig({
|
|
26
|
+
componentId: "sc-1w57q5j-0"
|
|
27
|
+
})(["text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:inline-block;max-width:100%;:focus{border:none;outline:none;background:", ";}"], props => props.theme.colors.brand['200']);
|
|
28
|
+
const DSTruncateTextWithTooltipDatatestId = 'DS-TruncateTextWithTooltip';
|
|
29
|
+
const DSTruncateTextWithTooltip = _ref => {
|
|
30
|
+
let {
|
|
31
|
+
text,
|
|
32
|
+
tooltipProps = {}
|
|
33
|
+
} = _ref;
|
|
34
|
+
const [textWrapperEl, setTextWrapperEl] = React.useState(); // const textWrapperEl = useRef<HTMLSpanElement>();
|
|
35
|
+
|
|
36
|
+
const [isShowingEllipsis, setIsShowingEllipsis] = React.useState(false); // const isShowingEllipsis = textWrapperEl?.scrollWidth > textWrapperEl?.clientWidth;
|
|
37
|
+
|
|
38
|
+
const resizeObserver = React.useMemo(() => new ResizeObserver(entries => {
|
|
39
|
+
if (entries.length) {
|
|
40
|
+
const [textWrapperEntry] = entries;
|
|
41
|
+
const el = textWrapperEntry.target;
|
|
42
|
+
setIsShowingEllipsis((el === null || el === void 0 ? void 0 : el.scrollWidth) > (el === null || el === void 0 ? void 0 : el.clientWidth));
|
|
43
|
+
}
|
|
44
|
+
}), []);
|
|
45
|
+
React.useEffect(() => {
|
|
46
|
+
if (textWrapperEl) {
|
|
47
|
+
setIsShowingEllipsis((textWrapperEl === null || textWrapperEl === void 0 ? void 0 : textWrapperEl.scrollWidth) > (textWrapperEl === null || textWrapperEl === void 0 ? void 0 : textWrapperEl.clientWidth));
|
|
48
|
+
resizeObserver.observe(textWrapperEl);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
return () => {
|
|
52
|
+
if (textWrapperEl) {
|
|
53
|
+
resizeObserver.unobserve(textWrapperEl);
|
|
54
|
+
}
|
|
55
|
+
};
|
|
56
|
+
}, [resizeObserver, textWrapperEl]);
|
|
57
|
+
if (isShowingEllipsis) return /*#__PURE__*/jsxRuntime.jsx(dsTooltip.DSTooltipV3, _objectSpread(_objectSpread({
|
|
58
|
+
text: text
|
|
59
|
+
}, tooltipProps), {}, {
|
|
60
|
+
children: /*#__PURE__*/jsxRuntime.jsx(Text, {
|
|
61
|
+
ref: setTextWrapperEl,
|
|
62
|
+
tabIndex: 0,
|
|
63
|
+
"data-testid": DSTruncateTextWithTooltipDatatestId,
|
|
64
|
+
children: text
|
|
65
|
+
})
|
|
66
|
+
}));
|
|
67
|
+
return /*#__PURE__*/jsxRuntime.jsx(Text, {
|
|
68
|
+
ref: setTextWrapperEl,
|
|
69
|
+
"data-testid": DSTruncateTextWithTooltipDatatestId,
|
|
70
|
+
children: text
|
|
71
|
+
});
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
exports.DSTruncateTextWithTooltip = DSTruncateTextWithTooltip;
|
|
75
|
+
exports.DSTruncateTextWithTooltipDatatestId = DSTruncateTextWithTooltipDatatestId;
|
|
@@ -2,6 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
6
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
7
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
8
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
9
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
5
10
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
6
11
|
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
7
12
|
var React = require('react');
|
|
@@ -23,23 +28,26 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
23
28
|
|
|
24
29
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
25
30
|
|
|
26
|
-
const isEllipsisActive =
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
31
|
+
const isEllipsisActive = _ref => {
|
|
32
|
+
let {
|
|
33
|
+
offsetWidth,
|
|
34
|
+
scrollWidth
|
|
35
|
+
} = _ref;
|
|
36
|
+
return offsetWidth < scrollWidth;
|
|
37
|
+
}; // reduce the possibility of error showing the tooltip (text-overflow: ellipsis) https://jira.elliemae.io/browse/PUI-1755
|
|
30
38
|
|
|
31
39
|
|
|
32
40
|
const Text = /*#__PURE__*/styled__default["default"].span.withConfig({
|
|
33
41
|
componentId: "sc-1olo1o7-0"
|
|
34
42
|
})(["text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:inline-block;max-width:100%;"]);
|
|
35
43
|
|
|
36
|
-
const DSTruncatedTooltipText =
|
|
44
|
+
const DSTruncatedTooltipText = _ref2 => {
|
|
37
45
|
let {
|
|
38
46
|
containerProps = {},
|
|
39
47
|
value = '',
|
|
40
48
|
zIndex = 110
|
|
41
|
-
} =
|
|
42
|
-
otherTextProps = _objectWithoutProperties__default["default"](
|
|
49
|
+
} = _ref2,
|
|
50
|
+
otherTextProps = _objectWithoutProperties__default["default"](_ref2, _excluded);
|
|
43
51
|
|
|
44
52
|
const tooltipContext = React.useContext(TooltipTextProvider.TruncatedTooltipContext);
|
|
45
53
|
React.useEffect(() => {
|
|
@@ -5,8 +5,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var _jsx2 = require('@babel/runtime/helpers/jsx');
|
|
6
6
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
7
7
|
require('core-js/modules/web.dom-collections.iterator.js');
|
|
8
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
9
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
10
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
11
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
12
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
8
13
|
var React = require('react');
|
|
9
|
-
var
|
|
14
|
+
var dsUtilities = require('@elliemae/ds-utilities');
|
|
10
15
|
var styled = require('styled-components');
|
|
11
16
|
var DSPopover = require('@elliemae/ds-popover');
|
|
12
17
|
var jsxRuntime = require('react/jsx-runtime');
|
|
@@ -23,17 +28,24 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
23
28
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
24
29
|
const dsTestId = 'DS-SimpleTruncateText';
|
|
25
30
|
|
|
26
|
-
const isEllipsisActive =
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
31
|
+
const isEllipsisActive = _ref => {
|
|
32
|
+
let {
|
|
33
|
+
offsetWidth,
|
|
34
|
+
scrollWidth
|
|
35
|
+
} = _ref;
|
|
36
|
+
return offsetWidth < scrollWidth;
|
|
37
|
+
};
|
|
30
38
|
|
|
31
|
-
const initialTooltipState = (
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
39
|
+
const initialTooltipState = function () {
|
|
40
|
+
let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
|
41
|
+
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
42
|
+
return {
|
|
43
|
+
reference: null,
|
|
44
|
+
visible: false,
|
|
45
|
+
value,
|
|
46
|
+
options
|
|
47
|
+
};
|
|
48
|
+
}; // reduce the possibility of error showing the tooltip(text-overflow: ellipsis) https://jira.elliemae.io/browse/PUI-1755
|
|
37
49
|
|
|
38
50
|
|
|
39
51
|
const Text = /*#__PURE__*/styled__default["default"].span.withConfig({
|
|
@@ -62,7 +74,7 @@ const SimpleTruncatedTooltipText = props => {
|
|
|
62
74
|
visible: false
|
|
63
75
|
}));
|
|
64
76
|
}, [tooltipState]);
|
|
65
|
-
const [showTooltip, cancelShowTooltip] =
|
|
77
|
+
const [showTooltip, cancelShowTooltip] = dsUtilities.useCancellableDelayedCallback(show, tooltipDelay);
|
|
66
78
|
const handleMouseEnter = React.useCallback(e => {
|
|
67
79
|
const {
|
|
68
80
|
target
|
|
@@ -108,14 +120,14 @@ const SimpleTruncatedTooltipText = props => {
|
|
|
108
120
|
visible: tooltipState.visible,
|
|
109
121
|
showArrow: true
|
|
110
122
|
}) : null
|
|
111
|
-
}), [tooltipState, placement,
|
|
123
|
+
}), [tooltipState, placement, zIndex]);
|
|
112
124
|
const PureText = React.useMemo(() => /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
|
|
113
125
|
children: /*#__PURE__*/jsxRuntime.jsx(Text, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, containerProps && _objectSpread({}, containerProps)), textOptions && _objectSpread({}, textOptions)), handlers && _objectSpread({}, handlers)), {}, {
|
|
114
126
|
"data-testid": dsTestId // this is used by mouse enter too. required to support value as JSX
|
|
115
127
|
,
|
|
116
128
|
children: value
|
|
117
129
|
}))
|
|
118
|
-
}), [containerProps, textOptions, handlers]);
|
|
130
|
+
}), [containerProps, textOptions, handlers, value]);
|
|
119
131
|
const PureSimpleTruncatedTooltipText = React.useMemo(() => /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
120
132
|
children: [PureText, PurePopover]
|
|
121
133
|
}), [PureText, PurePopover]);
|
|
@@ -6,6 +6,11 @@ var _jsx2 = require('@babel/runtime/helpers/jsx');
|
|
|
6
6
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
7
7
|
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
8
8
|
require('core-js/modules/web.dom-collections.iterator.js');
|
|
9
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
10
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
11
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
12
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
13
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
9
14
|
var React = require('react');
|
|
10
15
|
var DSPopover = require('@elliemae/ds-popover');
|
|
11
16
|
var jsxRuntime = require('react/jsx-runtime');
|
package/cjs/index.js
CHANGED
|
@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var TooltipTextProvider = require('./TooltipTextProvider.js');
|
|
6
6
|
var SimpleTruncatedTooltipText = require('./SimpleTruncatedTooltipText.js');
|
|
7
7
|
var DSTruncatedTooltipText = require('./DSTruncatedTooltipText.js');
|
|
8
|
+
var DSTruncateTextWithTooltip = require('./DSTruncateTextWithTooltip.js');
|
|
8
9
|
|
|
9
10
|
|
|
10
11
|
|
|
@@ -14,3 +15,5 @@ exports.SimpleTruncatedTooltipText = SimpleTruncatedTooltipText.SimpleTruncatedT
|
|
|
14
15
|
exports.DSTruncatedTooltipText = DSTruncatedTooltipText.DSTruncatedTooltipText;
|
|
15
16
|
exports.TruncatedTooltipTextWithSchema = DSTruncatedTooltipText.TruncatedTooltipTextWithSchema;
|
|
16
17
|
exports["default"] = DSTruncatedTooltipText.DSTruncatedTooltipText;
|
|
18
|
+
exports.DSTruncateTextWithTooltip = DSTruncateTextWithTooltip.DSTruncateTextWithTooltip;
|
|
19
|
+
exports.DSTruncateTextWithTooltipDatatestId = DSTruncateTextWithTooltip.DSTruncateTextWithTooltipDatatestId;
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import 'core-js/modules/esnext.async-iterator.filter.js';
|
|
2
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
3
|
+
import 'core-js/modules/esnext.iterator.filter.js';
|
|
4
|
+
import 'core-js/modules/esnext.async-iterator.for-each.js';
|
|
5
|
+
import 'core-js/modules/esnext.iterator.for-each.js';
|
|
6
|
+
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
7
|
+
import 'core-js/modules/web.dom-collections.iterator.js';
|
|
8
|
+
import { useState, useMemo, useEffect } from 'react';
|
|
9
|
+
import { DSTooltipV3 } from '@elliemae/ds-tooltip';
|
|
10
|
+
import styled from 'styled-components';
|
|
11
|
+
import { jsx } from 'react/jsx-runtime';
|
|
12
|
+
|
|
13
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
14
|
+
|
|
15
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
16
|
+
const Text = /*#__PURE__*/styled.span.withConfig({
|
|
17
|
+
componentId: "sc-1w57q5j-0"
|
|
18
|
+
})(["text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:inline-block;max-width:100%;:focus{border:none;outline:none;background:", ";}"], props => props.theme.colors.brand['200']);
|
|
19
|
+
const DSTruncateTextWithTooltipDatatestId = 'DS-TruncateTextWithTooltip';
|
|
20
|
+
const DSTruncateTextWithTooltip = _ref => {
|
|
21
|
+
let {
|
|
22
|
+
text,
|
|
23
|
+
tooltipProps = {}
|
|
24
|
+
} = _ref;
|
|
25
|
+
const [textWrapperEl, setTextWrapperEl] = useState(); // const textWrapperEl = useRef<HTMLSpanElement>();
|
|
26
|
+
|
|
27
|
+
const [isShowingEllipsis, setIsShowingEllipsis] = useState(false); // const isShowingEllipsis = textWrapperEl?.scrollWidth > textWrapperEl?.clientWidth;
|
|
28
|
+
|
|
29
|
+
const resizeObserver = useMemo(() => new ResizeObserver(entries => {
|
|
30
|
+
if (entries.length) {
|
|
31
|
+
const [textWrapperEntry] = entries;
|
|
32
|
+
const el = textWrapperEntry.target;
|
|
33
|
+
setIsShowingEllipsis((el === null || el === void 0 ? void 0 : el.scrollWidth) > (el === null || el === void 0 ? void 0 : el.clientWidth));
|
|
34
|
+
}
|
|
35
|
+
}), []);
|
|
36
|
+
useEffect(() => {
|
|
37
|
+
if (textWrapperEl) {
|
|
38
|
+
setIsShowingEllipsis((textWrapperEl === null || textWrapperEl === void 0 ? void 0 : textWrapperEl.scrollWidth) > (textWrapperEl === null || textWrapperEl === void 0 ? void 0 : textWrapperEl.clientWidth));
|
|
39
|
+
resizeObserver.observe(textWrapperEl);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
return () => {
|
|
43
|
+
if (textWrapperEl) {
|
|
44
|
+
resizeObserver.unobserve(textWrapperEl);
|
|
45
|
+
}
|
|
46
|
+
};
|
|
47
|
+
}, [resizeObserver, textWrapperEl]);
|
|
48
|
+
if (isShowingEllipsis) return /*#__PURE__*/jsx(DSTooltipV3, _objectSpread(_objectSpread({
|
|
49
|
+
text: text
|
|
50
|
+
}, tooltipProps), {}, {
|
|
51
|
+
children: /*#__PURE__*/jsx(Text, {
|
|
52
|
+
ref: setTextWrapperEl,
|
|
53
|
+
tabIndex: 0,
|
|
54
|
+
"data-testid": DSTruncateTextWithTooltipDatatestId,
|
|
55
|
+
children: text
|
|
56
|
+
})
|
|
57
|
+
}));
|
|
58
|
+
return /*#__PURE__*/jsx(Text, {
|
|
59
|
+
ref: setTextWrapperEl,
|
|
60
|
+
"data-testid": DSTruncateTextWithTooltipDatatestId,
|
|
61
|
+
children: text
|
|
62
|
+
});
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
export { DSTruncateTextWithTooltip, DSTruncateTextWithTooltipDatatestId };
|
|
@@ -1,3 +1,8 @@
|
|
|
1
|
+
import 'core-js/modules/esnext.async-iterator.filter.js';
|
|
2
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
3
|
+
import 'core-js/modules/esnext.iterator.filter.js';
|
|
4
|
+
import 'core-js/modules/esnext.async-iterator.for-each.js';
|
|
5
|
+
import 'core-js/modules/esnext.iterator.for-each.js';
|
|
1
6
|
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
2
7
|
import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
|
|
3
8
|
import { useContext, useEffect } from 'react';
|
|
@@ -13,23 +18,26 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
13
18
|
|
|
14
19
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
15
20
|
|
|
16
|
-
const isEllipsisActive =
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
21
|
+
const isEllipsisActive = _ref => {
|
|
22
|
+
let {
|
|
23
|
+
offsetWidth,
|
|
24
|
+
scrollWidth
|
|
25
|
+
} = _ref;
|
|
26
|
+
return offsetWidth < scrollWidth;
|
|
27
|
+
}; // reduce the possibility of error showing the tooltip (text-overflow: ellipsis) https://jira.elliemae.io/browse/PUI-1755
|
|
20
28
|
|
|
21
29
|
|
|
22
30
|
const Text = /*#__PURE__*/styled.span.withConfig({
|
|
23
31
|
componentId: "sc-1olo1o7-0"
|
|
24
32
|
})(["text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:inline-block;max-width:100%;"]);
|
|
25
33
|
|
|
26
|
-
const DSTruncatedTooltipText =
|
|
34
|
+
const DSTruncatedTooltipText = _ref2 => {
|
|
27
35
|
let {
|
|
28
36
|
containerProps = {},
|
|
29
37
|
value = '',
|
|
30
38
|
zIndex = 110
|
|
31
|
-
} =
|
|
32
|
-
otherTextProps = _objectWithoutProperties(
|
|
39
|
+
} = _ref2,
|
|
40
|
+
otherTextProps = _objectWithoutProperties(_ref2, _excluded);
|
|
33
41
|
|
|
34
42
|
const tooltipContext = useContext(TruncatedTooltipContext);
|
|
35
43
|
useEffect(() => {
|
|
@@ -1,8 +1,13 @@
|
|
|
1
|
+
import 'core-js/modules/esnext.async-iterator.filter.js';
|
|
2
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
3
|
+
import 'core-js/modules/esnext.iterator.filter.js';
|
|
4
|
+
import 'core-js/modules/esnext.async-iterator.for-each.js';
|
|
5
|
+
import 'core-js/modules/esnext.iterator.for-each.js';
|
|
1
6
|
import _jsx2 from '@babel/runtime/helpers/esm/jsx';
|
|
2
7
|
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
3
8
|
import 'core-js/modules/web.dom-collections.iterator.js';
|
|
4
9
|
import { useState, useCallback, useMemo } from 'react';
|
|
5
|
-
import { useCancellableDelayedCallback } from '@elliemae/ds-utilities
|
|
10
|
+
import { useCancellableDelayedCallback } from '@elliemae/ds-utilities';
|
|
6
11
|
import styled from 'styled-components';
|
|
7
12
|
import DSPopover, { PopperPositions } from '@elliemae/ds-popover';
|
|
8
13
|
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
|
|
@@ -12,17 +17,24 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
12
17
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
13
18
|
const dsTestId = 'DS-SimpleTruncateText';
|
|
14
19
|
|
|
15
|
-
const isEllipsisActive =
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
20
|
+
const isEllipsisActive = _ref => {
|
|
21
|
+
let {
|
|
22
|
+
offsetWidth,
|
|
23
|
+
scrollWidth
|
|
24
|
+
} = _ref;
|
|
25
|
+
return offsetWidth < scrollWidth;
|
|
26
|
+
};
|
|
19
27
|
|
|
20
|
-
const initialTooltipState = (
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
28
|
+
const initialTooltipState = function () {
|
|
29
|
+
let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
|
30
|
+
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
31
|
+
return {
|
|
32
|
+
reference: null,
|
|
33
|
+
visible: false,
|
|
34
|
+
value,
|
|
35
|
+
options
|
|
36
|
+
};
|
|
37
|
+
}; // reduce the possibility of error showing the tooltip(text-overflow: ellipsis) https://jira.elliemae.io/browse/PUI-1755
|
|
26
38
|
|
|
27
39
|
|
|
28
40
|
const Text = /*#__PURE__*/styled.span.withConfig({
|
|
@@ -97,14 +109,14 @@ const SimpleTruncatedTooltipText = props => {
|
|
|
97
109
|
visible: tooltipState.visible,
|
|
98
110
|
showArrow: true
|
|
99
111
|
}) : null
|
|
100
|
-
}), [tooltipState, placement,
|
|
112
|
+
}), [tooltipState, placement, zIndex]);
|
|
101
113
|
const PureText = useMemo(() => /*#__PURE__*/jsx(Fragment, {
|
|
102
114
|
children: /*#__PURE__*/jsx(Text, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, containerProps && _objectSpread({}, containerProps)), textOptions && _objectSpread({}, textOptions)), handlers && _objectSpread({}, handlers)), {}, {
|
|
103
115
|
"data-testid": dsTestId // this is used by mouse enter too. required to support value as JSX
|
|
104
116
|
,
|
|
105
117
|
children: value
|
|
106
118
|
}))
|
|
107
|
-
}), [containerProps, textOptions, handlers]);
|
|
119
|
+
}), [containerProps, textOptions, handlers, value]);
|
|
108
120
|
const PureSimpleTruncatedTooltipText = useMemo(() => /*#__PURE__*/jsxs(Fragment, {
|
|
109
121
|
children: [PureText, PurePopover]
|
|
110
122
|
}), [PureText, PurePopover]);
|
|
@@ -2,6 +2,11 @@ import _jsx2 from '@babel/runtime/helpers/esm/jsx';
|
|
|
2
2
|
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
3
3
|
import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
|
|
4
4
|
import 'core-js/modules/web.dom-collections.iterator.js';
|
|
5
|
+
import 'core-js/modules/esnext.async-iterator.filter.js';
|
|
6
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
7
|
+
import 'core-js/modules/esnext.iterator.filter.js';
|
|
8
|
+
import 'core-js/modules/esnext.async-iterator.for-each.js';
|
|
9
|
+
import 'core-js/modules/esnext.iterator.for-each.js';
|
|
5
10
|
import React, { useState, useMemo } from 'react';
|
|
6
11
|
import DSPopover, { usePopoverProviderState } from '@elliemae/ds-popover';
|
|
7
12
|
import { jsx } from 'react/jsx-runtime';
|
package/esm/index.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
1
|
export { TooltipTextProvider, TruncatedTooltipContext } from './TooltipTextProvider.js';
|
|
2
2
|
export { SimpleTruncatedTooltipText } from './SimpleTruncatedTooltipText.js';
|
|
3
3
|
export { DSTruncatedTooltipText, TruncatedTooltipTextWithSchema, DSTruncatedTooltipText as default } from './DSTruncatedTooltipText.js';
|
|
4
|
+
export { DSTruncateTextWithTooltip, DSTruncateTextWithTooltipDatatestId } from './DSTruncateTextWithTooltip.js';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-truncated-tooltip-text",
|
|
3
|
-
"version": "2.0.0-alpha.
|
|
3
|
+
"version": "2.0.0-alpha.12",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Truncated Tooltip Text",
|
|
6
6
|
"module": "./esm/index.js",
|
|
@@ -19,6 +19,10 @@
|
|
|
19
19
|
"import": "./esm/SimpleTruncatedTooltipText.js",
|
|
20
20
|
"require": "./cjs/SimpleTruncatedTooltipText.js"
|
|
21
21
|
},
|
|
22
|
+
"./DSTruncateTextWithTooltip": {
|
|
23
|
+
"import": "./esm/DSTruncateTextWithTooltip.js",
|
|
24
|
+
"require": "./cjs/DSTruncateTextWithTooltip.js"
|
|
25
|
+
},
|
|
22
26
|
"./DSTruncatedTooltipText": {
|
|
23
27
|
"import": "./esm/DSTruncatedTooltipText.js",
|
|
24
28
|
"require": "./cjs/DSTruncatedTooltipText.js"
|
|
@@ -44,19 +48,20 @@
|
|
|
44
48
|
"build": "node ../../scripts/build/build.js"
|
|
45
49
|
},
|
|
46
50
|
"dependencies": {
|
|
47
|
-
"@elliemae/ds-popover": "2.0.0-alpha.
|
|
48
|
-
"@elliemae/ds-popper": "2.0.0-alpha.
|
|
49
|
-
"@elliemae/ds-
|
|
51
|
+
"@elliemae/ds-popover": "2.0.0-alpha.12",
|
|
52
|
+
"@elliemae/ds-popper": "2.0.0-alpha.12",
|
|
53
|
+
"@elliemae/ds-tooltip": "2.0.0-alpha.12",
|
|
54
|
+
"@elliemae/ds-utilities": "2.0.0-alpha.12",
|
|
50
55
|
"prop-types": "~15.7.2",
|
|
51
56
|
"react-desc": "~4.1.3"
|
|
52
57
|
},
|
|
53
58
|
"devDependencies": {
|
|
54
|
-
"styled-components": "~5.3.
|
|
59
|
+
"styled-components": "~5.3.3"
|
|
55
60
|
},
|
|
56
61
|
"peerDependencies": {
|
|
57
62
|
"react": "^17.0.2",
|
|
58
63
|
"react-dom": "^17.0.2",
|
|
59
|
-
"styled-components": "^5.3.
|
|
64
|
+
"styled-components": "^5.3.3"
|
|
60
65
|
},
|
|
61
66
|
"publishConfig": {
|
|
62
67
|
"access": "public",
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
interface propsT {
|
|
3
|
+
text: string;
|
|
4
|
+
tooltipProps: Record<string, unknown>;
|
|
5
|
+
}
|
|
6
|
+
export declare const DSTruncateTextWithTooltipDatatestId = "DS-TruncateTextWithTooltip";
|
|
7
|
+
export declare const DSTruncateTextWithTooltip: ({ text, tooltipProps }: propsT) => JSX.Element;
|
|
8
|
+
export {};
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/// <reference path="../../../../shared/typings/react-desc.d.ts" />
|
|
1
2
|
/// <reference types="react" />
|
|
2
3
|
declare const DSTruncatedTooltipText: {
|
|
3
4
|
({ containerProps, value, zIndex, ...otherTextProps }: {
|
|
@@ -20,13 +21,44 @@ declare const DSTruncatedTooltipText: {
|
|
|
20
21
|
zIndex?: undefined;
|
|
21
22
|
};
|
|
22
23
|
propTypes: {
|
|
23
|
-
containerProps:
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
24
|
+
containerProps: {
|
|
25
|
+
defaultValue<T = unknown>(arg: T): {
|
|
26
|
+
deprecated: import("react-desc").PropTypesDescValidator;
|
|
27
|
+
};
|
|
28
|
+
isRequired: import("react-desc").PropTypesDescValidator;
|
|
29
|
+
};
|
|
30
|
+
value: {
|
|
31
|
+
defaultValue<T = unknown>(arg: T): {
|
|
32
|
+
deprecated: import("react-desc").PropTypesDescValidator;
|
|
33
|
+
};
|
|
34
|
+
isRequired: import("react-desc").PropTypesDescValidator;
|
|
35
|
+
};
|
|
36
|
+
tooltipPlacement: {
|
|
37
|
+
defaultValue<T = unknown>(arg: T): {
|
|
38
|
+
deprecated: import("react-desc").PropTypesDescValidator;
|
|
39
|
+
};
|
|
40
|
+
isRequired: import("react-desc").PropTypesDescValidator;
|
|
41
|
+
};
|
|
42
|
+
tooltipDelay: {
|
|
43
|
+
defaultValue<T = unknown>(arg: T): {
|
|
44
|
+
deprecated: import("react-desc").PropTypesDescValidator;
|
|
45
|
+
};
|
|
46
|
+
isRequired: import("react-desc").PropTypesDescValidator;
|
|
47
|
+
};
|
|
48
|
+
zIndex: {
|
|
49
|
+
deprecated: import("react-desc").PropTypesDescValidator;
|
|
50
|
+
};
|
|
28
51
|
};
|
|
29
52
|
};
|
|
30
|
-
declare const TruncatedTooltipTextWithSchema:
|
|
53
|
+
declare const TruncatedTooltipTextWithSchema: {
|
|
54
|
+
(props?: {
|
|
55
|
+
[x: string]: any;
|
|
56
|
+
containerProps?: {} | undefined;
|
|
57
|
+
value?: string | undefined;
|
|
58
|
+
zIndex?: number | undefined;
|
|
59
|
+
} | undefined): JSX.Element;
|
|
60
|
+
propTypes: unknown;
|
|
61
|
+
toTypescript: () => import("react-desc").TypescriptSchema;
|
|
62
|
+
};
|
|
31
63
|
export { DSTruncatedTooltipText, TruncatedTooltipTextWithSchema };
|
|
32
64
|
export default DSTruncatedTooltipText;
|
package/types/index.d.ts
CHANGED