@semcore/ellipsis 16.0.12-prerelease.37 → 16.1.0-prerelease.0
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/CHANGELOG.md +6 -0
- package/lib/cjs/Ellipsis.js +230 -178
- package/lib/cjs/Ellipsis.js.map +1 -1
- package/lib/cjs/index.d.js.map +1 -1
- package/lib/cjs/index.js +4 -4
- package/lib/cjs/useResizeObserver.js +13 -10
- package/lib/cjs/useResizeObserver.js.map +1 -1
- package/lib/es6/Ellipsis.js +219 -167
- package/lib/es6/Ellipsis.js.map +1 -1
- package/lib/es6/index.d.js.map +1 -1
- package/lib/es6/useResizeObserver.js +11 -7
- package/lib/es6/useResizeObserver.js.map +1 -1
- package/lib/esm/Ellipsis.mjs +192 -169
- package/lib/esm/useResizeObserver.mjs +7 -6
- package/lib/types/index.d.ts +5 -6
- package/package.json +6 -6
- package/tsconfig.json +3 -3
- package/lib/cjs/utils.js +0 -55
- package/lib/cjs/utils.js.map +0 -1
- package/lib/es6/utils.js +0 -47
- package/lib/es6/utils.js.map +0 -1
- package/lib/esm/utils.mjs +0 -50
|
@@ -1,12 +1,13 @@
|
|
|
1
|
+
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
1
2
|
import canUseDOM from "@semcore/core/lib/utils/canUseDOM";
|
|
2
3
|
import useEnhancedEffect from "@semcore/core/lib/utils/use/useEnhancedEffect";
|
|
3
4
|
import React from "react";
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
var useResizeObserver = function useResizeObserver2(ref, hookOverride) {
|
|
6
|
+
var _React$useState = React.useState(0), _React$useState2 = _slicedToArray(_React$useState, 2), width = _React$useState2[0], setWidth = _React$useState2[1];
|
|
7
|
+
var handleResize = React.useCallback(function(entries) {
|
|
7
8
|
setWidth(entries[0].contentRect.width);
|
|
8
9
|
}, []);
|
|
9
|
-
useEnhancedEffect(()
|
|
10
|
+
useEnhancedEffect(function() {
|
|
10
11
|
if (!ref.current) {
|
|
11
12
|
return;
|
|
12
13
|
}
|
|
@@ -14,11 +15,11 @@ const useResizeObserver = (ref, hookOverride) => {
|
|
|
14
15
|
return;
|
|
15
16
|
}
|
|
16
17
|
if (canUseDOM()) {
|
|
17
|
-
|
|
18
|
+
var ro = new ResizeObserver(function(entries) {
|
|
18
19
|
handleResize(entries);
|
|
19
20
|
});
|
|
20
21
|
ro.observe(ref.current);
|
|
21
|
-
return ()
|
|
22
|
+
return function() {
|
|
22
23
|
ro.disconnect();
|
|
23
24
|
};
|
|
24
25
|
}
|
package/lib/types/index.d.ts
CHANGED
|
@@ -1,9 +1,11 @@
|
|
|
1
|
-
import type { Box, BoxProps } from '@semcore/base-components';
|
|
2
1
|
import type { UnknownProperties, Intergalactic } from '@semcore/core';
|
|
2
|
+
import type { Box, BoxProps } from '@semcore/flex-box';
|
|
3
3
|
import type { TooltipProps } from '@semcore/tooltip';
|
|
4
4
|
import type Tooltip from '@semcore/tooltip';
|
|
5
5
|
import type { RefObject } from 'react';
|
|
6
6
|
|
|
7
|
+
/** @deprecated */
|
|
8
|
+
export interface IEllipsisProps extends EllipsisProps, UnknownProperties {}
|
|
7
9
|
export type EllipsisProps = BoxProps &
|
|
8
10
|
Partial<TooltipProps> & {
|
|
9
11
|
/**
|
|
@@ -40,14 +42,11 @@ declare const useResizeObserver: (
|
|
|
40
42
|
ref: RefObject<HTMLElement>,
|
|
41
43
|
hookOverride?: { width: number },
|
|
42
44
|
) => { width: number };
|
|
43
|
-
|
|
44
|
-
* @deprecated. Use Text with ellipsis property for @semcore/typography.
|
|
45
|
-
*/
|
|
45
|
+
|
|
46
46
|
declare const Ellipsis: Intergalactic.Component<'div', EllipsisProps> & {
|
|
47
47
|
Content: typeof Box;
|
|
48
48
|
Popper: typeof Tooltip.Popper;
|
|
49
49
|
};
|
|
50
50
|
|
|
51
|
-
export default Ellipsis;
|
|
52
|
-
|
|
53
51
|
export { useResizeObserver };
|
|
52
|
+
export default Ellipsis;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/ellipsis",
|
|
3
3
|
"description": "Semrush Ellipsis Component",
|
|
4
|
-
"version": "16.0
|
|
4
|
+
"version": "16.1.0-prerelease.0",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -14,15 +14,15 @@
|
|
|
14
14
|
"types": "./lib/types/index.d.ts"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@semcore/tooltip": "
|
|
17
|
+
"@semcore/tooltip": "16.1.0-prerelease.0",
|
|
18
|
+
"@semcore/flex-box": "16.1.0-prerelease.0"
|
|
18
19
|
},
|
|
19
20
|
"peerDependencies": {
|
|
20
|
-
"@semcore/base-components": "^
|
|
21
|
+
"@semcore/base-components": "^16.6.0-prerelease.0"
|
|
21
22
|
},
|
|
22
23
|
"devDependencies": {
|
|
23
|
-
"@semcore/
|
|
24
|
-
"@semcore/
|
|
25
|
-
"@semcore/testing-utils": "1.0.0"
|
|
24
|
+
"@semcore/testing-utils": "1.0.0",
|
|
25
|
+
"@semcore/core": "16.6.0-prerelease.0"
|
|
26
26
|
},
|
|
27
27
|
"repository": {
|
|
28
28
|
"type": "git",
|
package/tsconfig.json
CHANGED
package/lib/cjs/utils.js
DELETED
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.isTextOverflowing = isTextOverflowing;
|
|
7
|
-
exports.setFontSettings = void 0;
|
|
8
|
-
const setFontSettings = (element, styleElement) => {
|
|
9
|
-
element.style.fontFamily = styleElement.getPropertyValue('font-family');
|
|
10
|
-
element.style.fontSize = styleElement.getPropertyValue('font-size');
|
|
11
|
-
element.style.fontWeight = styleElement.getPropertyValue('font-weight');
|
|
12
|
-
element.style.lineHeight = styleElement.getPropertyValue('line-height');
|
|
13
|
-
element.style.fontFeatureSettings = styleElement.getPropertyValue('font-feature-settings');
|
|
14
|
-
element.style.fontVariantNumeric = styleElement.getPropertyValue('font-variant-numeric');
|
|
15
|
-
};
|
|
16
|
-
exports.setFontSettings = setFontSettings;
|
|
17
|
-
function isTextOverflowing(element, multiline, text) {
|
|
18
|
-
if (!element) return false;
|
|
19
|
-
const {
|
|
20
|
-
height: currentHeight,
|
|
21
|
-
width: currentWidth
|
|
22
|
-
} = element.getBoundingClientRect();
|
|
23
|
-
const measuringElement = createMeasurerElement(element, text);
|
|
24
|
-
let isOverflowing = false;
|
|
25
|
-
document.body.appendChild(measuringElement);
|
|
26
|
-
if (multiline) {
|
|
27
|
-
measuringElement.style.width = `${currentWidth}px`;
|
|
28
|
-
const width = measuringElement.scrollWidth;
|
|
29
|
-
const height = measuringElement.getBoundingClientRect().height;
|
|
30
|
-
if (Math.ceil(currentHeight) < height || Math.ceil(currentWidth) < width) {
|
|
31
|
-
isOverflowing = true;
|
|
32
|
-
}
|
|
33
|
-
} else {
|
|
34
|
-
measuringElement.style.whiteSpace = 'nowrap';
|
|
35
|
-
isOverflowing = Math.ceil(currentWidth) < measuringElement.getBoundingClientRect().width;
|
|
36
|
-
}
|
|
37
|
-
document.body.removeChild(measuringElement);
|
|
38
|
-
return isOverflowing;
|
|
39
|
-
}
|
|
40
|
-
function createMeasurerElement(element, text) {
|
|
41
|
-
const styleElement = window.getComputedStyle(element, null);
|
|
42
|
-
const temporaryElement = document.createElement('temporary-block');
|
|
43
|
-
temporaryElement.style.display = styleElement.getPropertyValue('display');
|
|
44
|
-
temporaryElement.style.padding = styleElement.getPropertyValue('padding');
|
|
45
|
-
temporaryElement.style.position = 'absolute';
|
|
46
|
-
temporaryElement.style.right = '0%';
|
|
47
|
-
temporaryElement.style.bottom = '0%';
|
|
48
|
-
temporaryElement.style.visibility = 'hidden';
|
|
49
|
-
temporaryElement.style.whiteSpace = styleElement.getPropertyValue('white-space');
|
|
50
|
-
temporaryElement.style.wordWrap = styleElement.getPropertyValue('word-wrap');
|
|
51
|
-
setFontSettings(temporaryElement, styleElement);
|
|
52
|
-
temporaryElement.textContent = text ?? element.textContent;
|
|
53
|
-
return temporaryElement;
|
|
54
|
-
}
|
|
55
|
-
//# sourceMappingURL=utils.js.map
|
package/lib/cjs/utils.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","names":["setFontSettings","element","styleElement","style","fontFamily","getPropertyValue","fontSize","fontWeight","lineHeight","fontFeatureSettings","fontVariantNumeric","exports","isTextOverflowing","multiline","text","height","currentHeight","width","currentWidth","getBoundingClientRect","measuringElement","createMeasurerElement","isOverflowing","document","body","appendChild","scrollWidth","Math","ceil","whiteSpace","removeChild","window","getComputedStyle","temporaryElement","createElement","display","padding","position","right","bottom","visibility","wordWrap","textContent"],"sources":["../../src/utils.ts"],"sourcesContent":["export const setFontSettings = (element: HTMLElement, styleElement: CSSStyleDeclaration): void => {\n element.style.fontFamily = styleElement.getPropertyValue('font-family');\n element.style.fontSize = styleElement.getPropertyValue('font-size');\n element.style.fontWeight = styleElement.getPropertyValue('font-weight');\n element.style.lineHeight = styleElement.getPropertyValue('line-height');\n element.style.fontFeatureSettings =\n styleElement.getPropertyValue('font-feature-settings');\n element.style.fontVariantNumeric = styleElement.getPropertyValue('font-variant-numeric');\n};\n\nexport function isTextOverflowing(element: HTMLElement | null, multiline: boolean, text: string): boolean {\n if (!element) return false;\n\n const { height: currentHeight, width: currentWidth } = element.getBoundingClientRect();\n const measuringElement = createMeasurerElement(element, text);\n let isOverflowing = false;\n\n document.body.appendChild(measuringElement);\n if (multiline) {\n measuringElement.style.width = `${currentWidth}px`;\n\n const width = measuringElement.scrollWidth;\n const height = measuringElement.getBoundingClientRect().height;\n\n if (Math.ceil(currentHeight) < height || Math.ceil(currentWidth) < width) {\n isOverflowing = true;\n }\n } else {\n measuringElement.style.whiteSpace = 'nowrap';\n isOverflowing = Math.ceil(currentWidth) < measuringElement.getBoundingClientRect().width;\n }\n\n document.body.removeChild(measuringElement);\n\n return isOverflowing;\n}\n\nfunction createMeasurerElement(element: HTMLElement, text?: string) {\n const styleElement = window.getComputedStyle(element, null);\n const temporaryElement = document.createElement('temporary-block');\n temporaryElement.style.display = styleElement.getPropertyValue('display');\n temporaryElement.style.padding = styleElement.getPropertyValue('padding');\n temporaryElement.style.position = 'absolute';\n temporaryElement.style.right = '0%';\n temporaryElement.style.bottom = '0%';\n temporaryElement.style.visibility = 'hidden';\n temporaryElement.style.whiteSpace = styleElement.getPropertyValue('white-space');\n temporaryElement.style.wordWrap = styleElement.getPropertyValue('word-wrap');\n\n setFontSettings(temporaryElement, styleElement);\n\n temporaryElement.textContent = text ?? element.textContent;\n return temporaryElement;\n}\n"],"mappings":"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","ignoreList":[]}
|
package/lib/es6/utils.js
DELETED
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
export const setFontSettings = (element, styleElement) => {
|
|
2
|
-
element.style.fontFamily = styleElement.getPropertyValue('font-family');
|
|
3
|
-
element.style.fontSize = styleElement.getPropertyValue('font-size');
|
|
4
|
-
element.style.fontWeight = styleElement.getPropertyValue('font-weight');
|
|
5
|
-
element.style.lineHeight = styleElement.getPropertyValue('line-height');
|
|
6
|
-
element.style.fontFeatureSettings = styleElement.getPropertyValue('font-feature-settings');
|
|
7
|
-
element.style.fontVariantNumeric = styleElement.getPropertyValue('font-variant-numeric');
|
|
8
|
-
};
|
|
9
|
-
export function isTextOverflowing(element, multiline, text) {
|
|
10
|
-
if (!element) return false;
|
|
11
|
-
const {
|
|
12
|
-
height: currentHeight,
|
|
13
|
-
width: currentWidth
|
|
14
|
-
} = element.getBoundingClientRect();
|
|
15
|
-
const measuringElement = createMeasurerElement(element, text);
|
|
16
|
-
let isOverflowing = false;
|
|
17
|
-
document.body.appendChild(measuringElement);
|
|
18
|
-
if (multiline) {
|
|
19
|
-
measuringElement.style.width = `${currentWidth}px`;
|
|
20
|
-
const width = measuringElement.scrollWidth;
|
|
21
|
-
const height = measuringElement.getBoundingClientRect().height;
|
|
22
|
-
if (Math.ceil(currentHeight) < height || Math.ceil(currentWidth) < width) {
|
|
23
|
-
isOverflowing = true;
|
|
24
|
-
}
|
|
25
|
-
} else {
|
|
26
|
-
measuringElement.style.whiteSpace = 'nowrap';
|
|
27
|
-
isOverflowing = Math.ceil(currentWidth) < measuringElement.getBoundingClientRect().width;
|
|
28
|
-
}
|
|
29
|
-
document.body.removeChild(measuringElement);
|
|
30
|
-
return isOverflowing;
|
|
31
|
-
}
|
|
32
|
-
function createMeasurerElement(element, text) {
|
|
33
|
-
const styleElement = window.getComputedStyle(element, null);
|
|
34
|
-
const temporaryElement = document.createElement('temporary-block');
|
|
35
|
-
temporaryElement.style.display = styleElement.getPropertyValue('display');
|
|
36
|
-
temporaryElement.style.padding = styleElement.getPropertyValue('padding');
|
|
37
|
-
temporaryElement.style.position = 'absolute';
|
|
38
|
-
temporaryElement.style.right = '0%';
|
|
39
|
-
temporaryElement.style.bottom = '0%';
|
|
40
|
-
temporaryElement.style.visibility = 'hidden';
|
|
41
|
-
temporaryElement.style.whiteSpace = styleElement.getPropertyValue('white-space');
|
|
42
|
-
temporaryElement.style.wordWrap = styleElement.getPropertyValue('word-wrap');
|
|
43
|
-
setFontSettings(temporaryElement, styleElement);
|
|
44
|
-
temporaryElement.textContent = text ?? element.textContent;
|
|
45
|
-
return temporaryElement;
|
|
46
|
-
}
|
|
47
|
-
//# sourceMappingURL=utils.js.map
|
package/lib/es6/utils.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","names":["setFontSettings","element","styleElement","style","fontFamily","getPropertyValue","fontSize","fontWeight","lineHeight","fontFeatureSettings","fontVariantNumeric","isTextOverflowing","multiline","text","height","currentHeight","width","currentWidth","getBoundingClientRect","measuringElement","createMeasurerElement","isOverflowing","document","body","appendChild","scrollWidth","Math","ceil","whiteSpace","removeChild","window","getComputedStyle","temporaryElement","createElement","display","padding","position","right","bottom","visibility","wordWrap","textContent"],"sources":["../../src/utils.ts"],"sourcesContent":["export const setFontSettings = (element: HTMLElement, styleElement: CSSStyleDeclaration): void => {\n element.style.fontFamily = styleElement.getPropertyValue('font-family');\n element.style.fontSize = styleElement.getPropertyValue('font-size');\n element.style.fontWeight = styleElement.getPropertyValue('font-weight');\n element.style.lineHeight = styleElement.getPropertyValue('line-height');\n element.style.fontFeatureSettings =\n styleElement.getPropertyValue('font-feature-settings');\n element.style.fontVariantNumeric = styleElement.getPropertyValue('font-variant-numeric');\n};\n\nexport function isTextOverflowing(element: HTMLElement | null, multiline: boolean, text: string): boolean {\n if (!element) return false;\n\n const { height: currentHeight, width: currentWidth } = element.getBoundingClientRect();\n const measuringElement = createMeasurerElement(element, text);\n let isOverflowing = false;\n\n document.body.appendChild(measuringElement);\n if (multiline) {\n measuringElement.style.width = `${currentWidth}px`;\n\n const width = measuringElement.scrollWidth;\n const height = measuringElement.getBoundingClientRect().height;\n\n if (Math.ceil(currentHeight) < height || Math.ceil(currentWidth) < width) {\n isOverflowing = true;\n }\n } else {\n measuringElement.style.whiteSpace = 'nowrap';\n isOverflowing = Math.ceil(currentWidth) < measuringElement.getBoundingClientRect().width;\n }\n\n document.body.removeChild(measuringElement);\n\n return isOverflowing;\n}\n\nfunction createMeasurerElement(element: HTMLElement, text?: string) {\n const styleElement = window.getComputedStyle(element, null);\n const temporaryElement = document.createElement('temporary-block');\n temporaryElement.style.display = styleElement.getPropertyValue('display');\n temporaryElement.style.padding = styleElement.getPropertyValue('padding');\n temporaryElement.style.position = 'absolute';\n temporaryElement.style.right = '0%';\n temporaryElement.style.bottom = '0%';\n temporaryElement.style.visibility = 'hidden';\n temporaryElement.style.whiteSpace = styleElement.getPropertyValue('white-space');\n temporaryElement.style.wordWrap = styleElement.getPropertyValue('word-wrap');\n\n setFontSettings(temporaryElement, styleElement);\n\n temporaryElement.textContent = text ?? element.textContent;\n return temporaryElement;\n}\n"],"mappings":"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","ignoreList":[]}
|
package/lib/esm/utils.mjs
DELETED
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
const setFontSettings = (element, styleElement) => {
|
|
2
|
-
element.style.fontFamily = styleElement.getPropertyValue("font-family");
|
|
3
|
-
element.style.fontSize = styleElement.getPropertyValue("font-size");
|
|
4
|
-
element.style.fontWeight = styleElement.getPropertyValue("font-weight");
|
|
5
|
-
element.style.lineHeight = styleElement.getPropertyValue("line-height");
|
|
6
|
-
element.style.fontFeatureSettings = styleElement.getPropertyValue("font-feature-settings");
|
|
7
|
-
element.style.fontVariantNumeric = styleElement.getPropertyValue("font-variant-numeric");
|
|
8
|
-
};
|
|
9
|
-
function isTextOverflowing(element, multiline, text) {
|
|
10
|
-
if (!element) return false;
|
|
11
|
-
const {
|
|
12
|
-
height: currentHeight,
|
|
13
|
-
width: currentWidth
|
|
14
|
-
} = element.getBoundingClientRect();
|
|
15
|
-
const measuringElement = createMeasurerElement(element, text);
|
|
16
|
-
let isOverflowing = false;
|
|
17
|
-
document.body.appendChild(measuringElement);
|
|
18
|
-
if (multiline) {
|
|
19
|
-
measuringElement.style.width = `${currentWidth}px`;
|
|
20
|
-
const width = measuringElement.scrollWidth;
|
|
21
|
-
const height = measuringElement.getBoundingClientRect().height;
|
|
22
|
-
if (Math.ceil(currentHeight) < height || Math.ceil(currentWidth) < width) {
|
|
23
|
-
isOverflowing = true;
|
|
24
|
-
}
|
|
25
|
-
} else {
|
|
26
|
-
measuringElement.style.whiteSpace = "nowrap";
|
|
27
|
-
isOverflowing = Math.ceil(currentWidth) < measuringElement.getBoundingClientRect().width;
|
|
28
|
-
}
|
|
29
|
-
document.body.removeChild(measuringElement);
|
|
30
|
-
return isOverflowing;
|
|
31
|
-
}
|
|
32
|
-
function createMeasurerElement(element, text) {
|
|
33
|
-
const styleElement = window.getComputedStyle(element, null);
|
|
34
|
-
const temporaryElement = document.createElement("temporary-block");
|
|
35
|
-
temporaryElement.style.display = styleElement.getPropertyValue("display");
|
|
36
|
-
temporaryElement.style.padding = styleElement.getPropertyValue("padding");
|
|
37
|
-
temporaryElement.style.position = "absolute";
|
|
38
|
-
temporaryElement.style.right = "0%";
|
|
39
|
-
temporaryElement.style.bottom = "0%";
|
|
40
|
-
temporaryElement.style.visibility = "hidden";
|
|
41
|
-
temporaryElement.style.whiteSpace = styleElement.getPropertyValue("white-space");
|
|
42
|
-
temporaryElement.style.wordWrap = styleElement.getPropertyValue("word-wrap");
|
|
43
|
-
setFontSettings(temporaryElement, styleElement);
|
|
44
|
-
temporaryElement.textContent = text ?? element.textContent;
|
|
45
|
-
return temporaryElement;
|
|
46
|
-
}
|
|
47
|
-
export {
|
|
48
|
-
isTextOverflowing,
|
|
49
|
-
setFontSettings
|
|
50
|
-
};
|