@dynatrace/strato-components 1.15.0 → 1.16.1
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/buttons/button/Button.css +16 -16
- package/buttons/button/Button.js +4 -1
- package/buttons/button/Button.sty.js +4 -4
- package/buttons/intent-button/IntentButton.d.ts +1 -0
- package/buttons/intent-button/IntentButton.js +4 -1
- package/content/progress/ProgressBar.css +71 -71
- package/content/progress/ProgressBar.sty.js +5 -5
- package/content/progress/ProgressBarIcon.css +2 -2
- package/content/progress/ProgressBarIcon.sty.js +1 -1
- package/content/progress/ProgressBarLabel.css +3 -3
- package/content/progress/ProgressBarLabel.sty.js +1 -1
- package/content/progress/ProgressBarValue.css +5 -5
- package/content/progress/ProgressBarValue.sty.js +1 -1
- package/content/progress/ProgressCircle.css +40 -40
- package/content/progress/ProgressCircle.sty.d.ts +13 -7
- package/content/progress/ProgressCircle.sty.js +5 -5
- package/content/skeleton/Skeleton.css +7 -7
- package/content/skeleton/Skeleton.js +2 -2
- package/content/skeleton/Skeleton.sty.js +5 -5
- package/content/skeleton/SkeletonText.js +3 -3
- package/core/components/app-root/AppRoot.js +3 -1
- package/core/hooks/useBehavioralTrackingProps.d.ts +2 -0
- package/core/hooks/useBehavioralTrackingProps.js +46 -0
- package/core/index.d.ts +1 -0
- package/core/styles/focusRing.css +66 -66
- package/core/styles/focusRing.sty.d.ts +34 -10
- package/core/styles/focusRing.sty.js +2 -2
- package/core/types/behavior-tracking-props.d.ts +33 -0
- package/core/types/behavior-tracking-props.js +16 -0
- package/core/utils/colorUtils.css +60 -60
- package/core/utils/colorUtils.sty.d.ts +15 -5
- package/core/utils/colorUtils.sty.js +2 -2
- package/esm/buttons/button/Button.css +16 -16
- package/esm/buttons/button/Button.js +4 -1
- package/esm/buttons/button/Button.js.map +2 -2
- package/esm/buttons/button/Button.sty.js +4 -4
- package/esm/buttons/button/Button.sty.js.map +1 -1
- package/esm/buttons/index.js.map +2 -2
- package/esm/buttons/intent-button/IntentButton.js +4 -1
- package/esm/buttons/intent-button/IntentButton.js.map +2 -2
- package/esm/content/progress/ProgressBar.css +71 -71
- package/esm/content/progress/ProgressBar.sty.js +5 -5
- package/esm/content/progress/ProgressBar.sty.js.map +1 -1
- package/esm/content/progress/ProgressBarIcon.css +2 -2
- package/esm/content/progress/ProgressBarIcon.sty.js +1 -1
- package/esm/content/progress/ProgressBarIcon.sty.js.map +1 -1
- package/esm/content/progress/ProgressBarLabel.css +3 -3
- package/esm/content/progress/ProgressBarLabel.sty.js +1 -1
- package/esm/content/progress/ProgressBarLabel.sty.js.map +1 -1
- package/esm/content/progress/ProgressBarValue.css +5 -5
- package/esm/content/progress/ProgressBarValue.sty.js +1 -1
- package/esm/content/progress/ProgressBarValue.sty.js.map +1 -1
- package/esm/content/progress/ProgressCircle.css +40 -40
- package/esm/content/progress/ProgressCircle.sty.js +5 -5
- package/esm/content/progress/ProgressCircle.sty.js.map +1 -1
- package/esm/content/skeleton/Skeleton.css +7 -7
- package/esm/content/skeleton/Skeleton.js +1 -1
- package/esm/content/skeleton/Skeleton.js.map +1 -1
- package/esm/content/skeleton/Skeleton.sty.js +5 -5
- package/esm/content/skeleton/Skeleton.sty.js.map +1 -1
- package/esm/content/skeleton/SkeletonText.js +1 -1
- package/esm/content/skeleton/SkeletonText.js.map +1 -1
- package/esm/core/components/app-root/AppRoot.js +3 -1
- package/esm/core/components/app-root/AppRoot.js.map +2 -2
- package/esm/core/hooks/useBehavioralTrackingProps.js +27 -0
- package/esm/core/hooks/useBehavioralTrackingProps.js.map +7 -0
- package/esm/core/index.js.map +1 -1
- package/esm/core/styles/focusRing.css +66 -66
- package/esm/core/styles/focusRing.sty.js +2 -2
- package/esm/core/styles/focusRing.sty.js.map +1 -1
- package/esm/core/types/behavior-tracking-props.js +1 -0
- package/esm/core/types/behavior-tracking-props.js.map +7 -0
- package/esm/core/utils/colorUtils.css +60 -60
- package/esm/core/utils/colorUtils.sty.js +2 -2
- package/esm/core/utils/colorUtils.sty.js.map +1 -1
- package/esm/layouts/container/Container.css +4 -4
- package/esm/layouts/container/Container.sty.js +1 -1
- package/esm/layouts/container/Container.sty.js.map +1 -1
- package/esm/layouts/divider/Divider.css +6 -6
- package/esm/layouts/divider/Divider.sty.js +1 -1
- package/esm/layouts/divider/Divider.sty.js.map +1 -1
- package/esm/layouts/surface/Surface.css +39 -39
- package/esm/layouts/surface/Surface.sty.js +2 -2
- package/esm/layouts/surface/Surface.sty.js.map +1 -1
- package/esm/layouts/surface/variables.sty.js +1 -1
- package/esm/layouts/surface/variables.sty.js.map +1 -1
- package/esm/styles/colorUtils.css +60 -60
- package/esm/styles/colorUtils.sty.js +2 -2
- package/esm/styles/colorUtils.sty.js.map +1 -1
- package/esm/styles/container.css +47 -47
- package/esm/styles/container.sty.js +2 -2
- package/esm/styles/container.sty.js.map +1 -1
- package/esm/styles/ellipsis.css +1 -1
- package/esm/styles/ellipsis.sty.js +1 -1
- package/esm/styles/ellipsis.sty.js.map +1 -1
- package/esm/styles/field.css +153 -153
- package/esm/styles/field.sty.js +2 -2
- package/esm/styles/field.sty.js.map +1 -1
- package/esm/styles/sprinkles.css +262 -262
- package/esm/styles/sprinkles.sty.js +1 -1
- package/esm/styles/sprinkles.sty.js.map +1 -1
- package/esm/styles/textStyle.css +8 -8
- package/esm/styles/textStyle.sty.js +1 -1
- package/esm/styles/textStyle.sty.js.map +1 -1
- package/esm/typography/block-quote/Blockquote.css +2 -2
- package/esm/typography/block-quote/Blockquote.sty.js +1 -1
- package/esm/typography/block-quote/Blockquote.sty.js.map +1 -1
- package/esm/typography/code/Code.css +1 -1
- package/esm/typography/code/Code.sty.js +1 -1
- package/esm/typography/code/Code.sty.js.map +1 -1
- package/esm/typography/emphasis/Emphasis.css +1 -1
- package/esm/typography/emphasis/Emphasis.sty.js +1 -1
- package/esm/typography/emphasis/Emphasis.sty.js.map +1 -1
- package/esm/typography/external-link/ExternalLink.css +6 -8
- package/esm/typography/external-link/ExternalLink.js +1 -1
- package/esm/typography/external-link/ExternalLink.js.map +2 -2
- package/esm/typography/external-link/ExternalLink.sty.js +1 -1
- package/esm/typography/external-link/ExternalLink.sty.js.map +1 -1
- package/esm/typography/heading/Heading.css +7 -7
- package/esm/typography/heading/Heading.sty.js +1 -1
- package/esm/typography/heading/Heading.sty.js.map +1 -1
- package/esm/typography/highlight/Highlight.css +2 -2
- package/esm/typography/highlight/Highlight.sty.js +1 -1
- package/esm/typography/highlight/Highlight.sty.js.map +1 -1
- package/esm/typography/link/Link.css +3 -3
- package/esm/typography/link/Link.sty.js +1 -1
- package/esm/typography/link/Link.sty.js.map +1 -1
- package/esm/typography/list/List.css +4 -4
- package/esm/typography/list/List.sty.js +2 -2
- package/esm/typography/list/List.sty.js.map +1 -1
- package/esm/typography/paragraph/Paragraph.css +3 -3
- package/esm/typography/paragraph/Paragraph.sty.js +1 -1
- package/esm/typography/paragraph/Paragraph.sty.js.map +1 -1
- package/esm/typography/strikethrough/Strikethrough.css +1 -1
- package/esm/typography/strikethrough/Strikethrough.sty.js +1 -1
- package/esm/typography/strikethrough/Strikethrough.sty.js.map +1 -1
- package/esm/typography/strong/Strong.css +1 -1
- package/esm/typography/strong/Strong.sty.js +1 -1
- package/esm/typography/strong/Strong.sty.js.map +1 -1
- package/esm/typography/text/Text.css +3 -3
- package/esm/typography/text/Text.sty.js +1 -1
- package/esm/typography/text/Text.sty.js.map +1 -1
- package/esm/typography/text-ellipsis/TextEllipsis.css +6 -6
- package/esm/typography/text-ellipsis/TextEllipsis.sty.js +2 -2
- package/esm/typography/text-ellipsis/TextEllipsis.sty.js.map +1 -1
- package/esm/typography/utils.js +17 -9
- package/esm/typography/utils.js.map +2 -2
- package/layouts/container/Container.css +4 -4
- package/layouts/container/Container.sty.js +1 -1
- package/layouts/divider/Divider.css +6 -6
- package/layouts/divider/Divider.sty.js +1 -1
- package/layouts/surface/Surface.css +39 -39
- package/layouts/surface/Surface.sty.d.ts +19 -6
- package/layouts/surface/Surface.sty.js +2 -2
- package/layouts/surface/variables.sty.js +1 -1
- package/package.json +6 -6
- package/styles/colorUtils.css +60 -60
- package/styles/colorUtils.sty.d.ts +15 -5
- package/styles/colorUtils.sty.js +2 -2
- package/styles/container.css +47 -47
- package/styles/container.sty.d.ts +16 -6
- package/styles/container.sty.js +2 -2
- package/styles/ellipsis.css +1 -1
- package/styles/ellipsis.sty.js +1 -1
- package/styles/field.css +153 -153
- package/styles/field.sty.d.ts +24 -17
- package/styles/field.sty.js +2 -2
- package/styles/sprinkles.css +262 -262
- package/styles/sprinkles.sty.d.ts +12 -12
- package/styles/sprinkles.sty.js +1 -1
- package/styles/textStyle.css +8 -8
- package/styles/textStyle.sty.js +1 -1
- package/typography/block-quote/Blockquote.css +2 -2
- package/typography/block-quote/Blockquote.sty.js +1 -1
- package/typography/code/Code.css +1 -1
- package/typography/code/Code.sty.js +1 -1
- package/typography/emphasis/Emphasis.css +1 -1
- package/typography/emphasis/Emphasis.sty.js +1 -1
- package/typography/external-link/ExternalLink.css +6 -8
- package/typography/external-link/ExternalLink.js +1 -1
- package/typography/external-link/ExternalLink.sty.js +1 -1
- package/typography/heading/Heading.css +7 -7
- package/typography/heading/Heading.sty.js +1 -1
- package/typography/highlight/Highlight.css +2 -2
- package/typography/highlight/Highlight.sty.js +1 -1
- package/typography/link/Link.css +3 -3
- package/typography/link/Link.sty.js +1 -1
- package/typography/list/List.css +4 -4
- package/typography/list/List.sty.js +2 -2
- package/typography/paragraph/Paragraph.css +3 -3
- package/typography/paragraph/Paragraph.sty.js +1 -1
- package/typography/strikethrough/Strikethrough.css +1 -1
- package/typography/strikethrough/Strikethrough.sty.js +1 -1
- package/typography/strong/Strong.css +1 -1
- package/typography/strong/Strong.sty.js +1 -1
- package/typography/text/Text.css +3 -3
- package/typography/text/Text.sty.js +1 -1
- package/typography/text-ellipsis/TextEllipsis.css +6 -6
- package/typography/text-ellipsis/TextEllipsis.sty.js +2 -2
- package/typography/utils.js +17 -9
package/typography/utils.js
CHANGED
|
@@ -27,9 +27,17 @@ __export(utils_exports, {
|
|
|
27
27
|
});
|
|
28
28
|
module.exports = __toCommonJS(utils_exports);
|
|
29
29
|
var import_user_preferences = require("@dynatrace-sdk/user-preferences");
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
30
|
+
let localizedSegmenter;
|
|
31
|
+
function getLocalizedSegmenter() {
|
|
32
|
+
if (localizedSegmenter) {
|
|
33
|
+
return localizedSegmenter;
|
|
34
|
+
}
|
|
35
|
+
const segmenter = new Intl.Segmenter((0, import_user_preferences.getLanguage)(), {
|
|
36
|
+
granularity: "grapheme"
|
|
37
|
+
});
|
|
38
|
+
localizedSegmenter = segmenter;
|
|
39
|
+
return localizedSegmenter;
|
|
40
|
+
}
|
|
33
41
|
const ELLIPSIS_CHARACTER = "\u2026";
|
|
34
42
|
const ELLIPSIS_APPROXIMATION_THRESHOLD = 15;
|
|
35
43
|
let inMemContext2d;
|
|
@@ -72,9 +80,10 @@ function centerEllipsizeText(originalText, textFont, maxWidthInPx) {
|
|
|
72
80
|
let attempt = 1;
|
|
73
81
|
let prefixLength = initialPrefixSuffixLength;
|
|
74
82
|
let suffixLength = initialPrefixSuffixLength;
|
|
75
|
-
const
|
|
76
|
-
|
|
77
|
-
|
|
83
|
+
const segmenter = getLocalizedSegmenter();
|
|
84
|
+
const originalSegmentedText = Array.from(segmenter.segment(originalText)).map(
|
|
85
|
+
(segment) => segment.segment
|
|
86
|
+
);
|
|
78
87
|
do {
|
|
79
88
|
const originalSegmentedTextCopy = [...originalSegmentedText];
|
|
80
89
|
prefixLength -= attempt % 2 === 1 ? 1 : 0;
|
|
@@ -102,9 +111,8 @@ function getFontString(textFont) {
|
|
|
102
111
|
).join(" ");
|
|
103
112
|
}
|
|
104
113
|
function calculateEllipsisInfo(originalText, textFont, maxWidthInPx) {
|
|
105
|
-
const
|
|
106
|
-
|
|
107
|
-
).length;
|
|
114
|
+
const segmenter = getLocalizedSegmenter();
|
|
115
|
+
const originalTextLength = Array.from(segmenter.segment(originalText)).length;
|
|
108
116
|
if (originalTextLength <= 1) {
|
|
109
117
|
return null;
|
|
110
118
|
}
|