@dynatrace/strato-components 0.85.10 → 0.85.21
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 +1 -0
- package/buttons/index.d.ts +2 -0
- package/buttons/index.js +2 -0
- package/buttons/intent-button/IntentButton.d.ts +44 -0
- package/buttons/intent-button/IntentButton.js +102 -0
- package/buttons/intent-button/useIntentButton.d.ts +12 -0
- package/buttons/intent-button/useIntentButton.js +72 -0
- package/content/index.d.ts +4 -0
- package/content/index.js +5 -1
- package/content/skeleton/Skeleton.css +33 -0
- package/content/skeleton/Skeleton.d.ts +30 -0
- package/content/skeleton/Skeleton.js +60 -0
- package/content/skeleton/Skeleton.sty.d.ts +10 -0
- package/content/skeleton/Skeleton.sty.js +25 -0
- package/content/skeleton/SkeletonText.d.ts +24 -0
- package/content/skeleton/SkeletonText.js +84 -0
- package/esm/buttons/button/Button.css +1 -0
- package/esm/buttons/index.js +2 -0
- package/esm/buttons/index.js.map +2 -2
- package/esm/buttons/intent-button/IntentButton.js +74 -0
- package/esm/buttons/intent-button/IntentButton.js.map +7 -0
- package/esm/buttons/intent-button/useIntentButton.js +57 -0
- package/esm/buttons/intent-button/useIntentButton.js.map +7 -0
- package/esm/content/index.js +5 -1
- package/esm/content/index.js.map +2 -2
- package/esm/content/skeleton/Skeleton.css +33 -0
- package/esm/content/skeleton/Skeleton.js +32 -0
- package/esm/content/skeleton/Skeleton.js.map +7 -0
- package/esm/content/skeleton/Skeleton.sty.js +7 -0
- package/esm/content/skeleton/Skeleton.sty.js.map +7 -0
- package/esm/content/skeleton/SkeletonText.js +56 -0
- package/esm/content/skeleton/SkeletonText.js.map +7 -0
- package/esm/layouts/{Divider → divider}/Divider.css +5 -5
- package/esm/layouts/{Divider → divider}/Divider.js.map +1 -1
- package/esm/layouts/{Divider → divider}/Divider.sty.js +1 -1
- package/esm/layouts/{Divider → divider}/Divider.sty.js.map +2 -2
- package/esm/layouts/helpers/spacingToCss.js +13 -0
- package/esm/layouts/helpers/spacingToCss.js.map +7 -0
- package/esm/layouts/hooks/useLayoutSizeProps.js +15 -0
- package/esm/layouts/hooks/useLayoutSizeProps.js.map +7 -0
- package/esm/layouts/hooks/useLayoutStyles.js +105 -0
- package/esm/layouts/hooks/useLayoutStyles.js.map +7 -0
- package/esm/layouts/hooks/useMarginProps.js +55 -0
- package/esm/layouts/hooks/useMarginProps.js.map +7 -0
- package/esm/layouts/hooks/usePaddingProps.js +59 -0
- package/esm/layouts/hooks/usePaddingProps.js.map +7 -0
- package/esm/layouts/index.js +6 -2
- package/esm/layouts/index.js.map +2 -2
- package/esm/layouts/surface/Surface.css +95 -0
- package/esm/layouts/surface/Surface.js +84 -0
- package/esm/layouts/surface/Surface.js.map +7 -0
- package/esm/layouts/surface/Surface.sty.js +10 -0
- package/esm/layouts/surface/Surface.sty.js.map +7 -0
- package/esm/layouts/surface/variables.sty.js +5 -0
- package/esm/layouts/surface/variables.sty.js.map +7 -0
- package/esm/layouts/types/layout.types.js +1 -0
- package/esm/layouts/types/layout.types.js.map +7 -0
- package/esm/typography/{BlockQuote → block-quote}/Blockquote.css +2 -2
- package/esm/typography/{BlockQuote → block-quote}/Blockquote.js.map +2 -2
- package/esm/typography/{BlockQuote → block-quote}/Blockquote.sty.js +1 -1
- package/esm/typography/{BlockQuote → block-quote}/Blockquote.sty.js.map +2 -2
- package/{typography/Code → esm/typography/code}/Code.css +1 -1
- package/esm/typography/{Code → code}/Code.js.map +2 -2
- package/esm/typography/{Code → code}/Code.sty.js +1 -1
- package/esm/typography/{Code → code}/Code.sty.js.map +2 -2
- package/esm/typography/{Emphasis → emphasis}/Emphasis.css +1 -1
- package/esm/typography/{Emphasis → emphasis}/Emphasis.js.map +2 -2
- package/esm/typography/{Emphasis → emphasis}/Emphasis.sty.js +1 -1
- package/esm/typography/{Emphasis → emphasis}/Emphasis.sty.js.map +2 -2
- package/{typography/ExternalLink → esm/typography/external-link}/ExternalLink.css +6 -6
- package/esm/typography/{ExternalLink → external-link}/ExternalLink.js.map +2 -2
- package/esm/typography/{ExternalLink → external-link}/ExternalLink.sty.js +1 -1
- package/esm/typography/{ExternalLink → external-link}/ExternalLink.sty.js.map +2 -2
- package/esm/typography/{Heading → heading}/Heading.css +7 -7
- package/esm/typography/heading/Heading.js.map +7 -0
- package/esm/typography/heading/Heading.sty.js +7 -0
- package/esm/typography/{Heading → heading}/Heading.sty.js.map +2 -2
- package/esm/typography/{Highlight → highlight}/Highlight.css +1 -1
- package/esm/typography/{Highlight → highlight}/Highlight.js.map +2 -2
- package/esm/typography/{Highlight → highlight}/Highlight.sty.js +1 -1
- package/esm/typography/{Highlight → highlight}/Highlight.sty.js.map +2 -2
- package/esm/typography/index.js +13 -13
- package/esm/typography/index.js.map +1 -1
- package/{typography/Link → esm/typography/link}/Link.css +4 -4
- package/esm/typography/{Link → link}/Link.js +1 -1
- package/esm/typography/link/Link.js.map +7 -0
- package/esm/typography/{Link → link}/Link.sty.js +1 -1
- package/esm/typography/{Link → link}/Link.sty.js.map +2 -2
- package/esm/typography/{List → list}/List.css +4 -4
- package/esm/typography/{List → list}/List.js +1 -1
- package/esm/typography/{List → list}/List.js.map +2 -2
- package/esm/typography/{List → list}/List.sty.js +2 -2
- package/esm/typography/{List → list}/List.sty.js.map +2 -2
- package/esm/typography/{Paragraph → paragraph}/Paragraph.css +3 -3
- package/esm/typography/{Paragraph → paragraph}/Paragraph.js.map +2 -2
- package/esm/typography/{Paragraph → paragraph}/Paragraph.sty.js +1 -1
- package/esm/typography/{Paragraph → paragraph}/Paragraph.sty.js.map +2 -2
- package/{typography/Strikethrough → esm/typography/strikethrough}/Strikethrough.css +1 -1
- package/esm/typography/strikethrough/Strikethrough.js.map +7 -0
- package/esm/typography/{Strikethrough → strikethrough}/Strikethrough.sty.js +1 -1
- package/esm/typography/{Strikethrough → strikethrough}/Strikethrough.sty.js.map +2 -2
- package/{typography/Strong → esm/typography/strong}/Strong.css +1 -1
- package/esm/typography/{Strong → strong}/Strong.js.map +2 -2
- package/esm/typography/{Strong → strong}/Strong.sty.js +1 -1
- package/esm/typography/{Strong → strong}/Strong.sty.js.map +2 -2
- package/{typography/Text → esm/typography/text}/Text.css +3 -3
- package/esm/typography/text/Text.js.map +7 -0
- package/esm/typography/{Text → text}/Text.sty.js +1 -1
- package/esm/typography/{Text → text}/Text.sty.js.map +2 -2
- package/{typography/TextEllipsis → esm/typography/text-ellipsis}/TextEllipsis.css +4 -4
- package/esm/typography/text-ellipsis/TextEllipsis.js.map +7 -0
- package/esm/typography/text-ellipsis/TextEllipsis.sty.js +7 -0
- package/esm/typography/{TextEllipsis → text-ellipsis}/TextEllipsis.sty.js.map +2 -2
- package/lang/en.json +6 -0
- package/lang/ja.json +24 -0
- package/lang/uncompiled/en.json +4 -0
- package/lang/uncompiled/ja.json +14 -1
- package/layouts/{Divider → divider}/Divider.css +5 -5
- package/layouts/{Divider → divider}/Divider.sty.js +1 -1
- package/layouts/helpers/spacingToCss.d.ts +6 -0
- package/layouts/helpers/spacingToCss.js +29 -0
- package/layouts/hooks/useLayoutSizeProps.d.ts +6 -0
- package/layouts/hooks/useLayoutSizeProps.js +33 -0
- package/layouts/hooks/useLayoutStyles.d.ts +7 -0
- package/layouts/hooks/useLayoutStyles.js +123 -0
- package/layouts/hooks/useMarginProps.d.ts +7 -0
- package/layouts/hooks/useMarginProps.js +73 -0
- package/layouts/hooks/usePaddingProps.d.ts +7 -0
- package/layouts/hooks/usePaddingProps.js +77 -0
- package/layouts/index.d.ts +6 -2
- package/layouts/index.js +6 -2
- package/layouts/surface/Surface.css +95 -0
- package/layouts/surface/Surface.d.ts +46 -0
- package/layouts/surface/Surface.js +110 -0
- package/layouts/surface/Surface.sty.d.ts +43 -0
- package/layouts/surface/Surface.sty.js +28 -0
- package/layouts/surface/variables.sty.d.ts +1 -0
- package/layouts/surface/variables.sty.js +23 -0
- package/layouts/types/layout.types.d.ts +64 -0
- package/layouts/types/layout.types.js +15 -0
- package/package.json +2 -2
- package/typography/{BlockQuote → block-quote}/Blockquote.css +2 -2
- package/typography/{BlockQuote → block-quote}/Blockquote.sty.js +1 -1
- package/{esm/typography/Code → typography/code}/Code.css +1 -1
- package/typography/{Code → code}/Code.sty.js +1 -1
- package/typography/{Emphasis → emphasis}/Emphasis.css +1 -1
- package/typography/{Emphasis → emphasis}/Emphasis.sty.js +1 -1
- package/{esm/typography/ExternalLink → typography/external-link}/ExternalLink.css +6 -6
- package/typography/{ExternalLink → external-link}/ExternalLink.sty.js +1 -1
- package/typography/{Heading → heading}/Heading.css +7 -7
- package/typography/{Heading → heading}/Heading.d.ts +3 -2
- package/typography/{Heading → heading}/Heading.sty.js +1 -1
- package/typography/{Highlight → highlight}/Highlight.css +1 -1
- package/typography/{Highlight → highlight}/Highlight.sty.js +1 -1
- package/typography/index.d.ts +26 -26
- package/typography/index.js +13 -13
- package/{esm/typography/Link → typography/link}/Link.css +4 -4
- package/typography/{Link → link}/Link.js +1 -1
- package/typography/{Link → link}/Link.sty.js +1 -1
- package/typography/{List → list}/List.css +4 -4
- package/typography/{List → list}/List.js +1 -1
- package/typography/{List → list}/List.sty.js +2 -2
- package/typography/{Paragraph → paragraph}/Paragraph.css +3 -3
- package/typography/{Paragraph → paragraph}/Paragraph.sty.js +1 -1
- package/{esm/typography/Strikethrough → typography/strikethrough}/Strikethrough.css +1 -1
- package/typography/{Strikethrough → strikethrough}/Strikethrough.d.ts +2 -2
- package/typography/{Strikethrough → strikethrough}/Strikethrough.sty.js +1 -1
- package/{esm/typography/Strong → typography/strong}/Strong.css +1 -1
- package/typography/{Strong → strong}/Strong.sty.js +1 -1
- package/{esm/typography/Text → typography/text}/Text.css +3 -3
- package/typography/{Text → text}/Text.d.ts +3 -2
- package/typography/{Text → text}/Text.sty.js +1 -1
- package/{esm/typography/TextEllipsis → typography/text-ellipsis}/TextEllipsis.css +4 -4
- package/typography/{TextEllipsis → text-ellipsis}/TextEllipsis.d.ts +3 -3
- package/typography/{TextEllipsis → text-ellipsis}/TextEllipsis.sty.js +1 -1
- package/esm/typography/Heading/Heading.js.map +0 -7
- package/esm/typography/Heading/Heading.sty.js +0 -7
- package/esm/typography/Link/Link.js.map +0 -7
- package/esm/typography/Strikethrough/Strikethrough.js.map +0 -7
- package/esm/typography/Text/Text.js.map +0 -7
- package/esm/typography/TextEllipsis/TextEllipsis.js.map +0 -7
- package/esm/typography/TextEllipsis/TextEllipsis.sty.js +0 -7
- package/esm/layouts/{Divider → divider}/Divider.js +0 -0
- package/esm/typography/{BlockQuote → block-quote}/Blockquote.js +0 -0
- package/esm/typography/{Code → code}/Code.js +0 -0
- package/esm/typography/{Emphasis → emphasis}/Emphasis.js +0 -0
- package/esm/typography/{ExternalLink → external-link}/ExternalLink.js +0 -0
- package/esm/typography/{Heading → heading}/Heading.js +0 -0
- package/esm/typography/{Highlight → highlight}/Highlight.js +0 -0
- package/esm/typography/{Paragraph → paragraph}/Paragraph.js +0 -0
- package/esm/typography/{Strikethrough → strikethrough}/Strikethrough.js +0 -0
- package/esm/typography/{Strong → strong}/Strong.js +0 -0
- package/esm/typography/{Text → text}/Text.js +0 -0
- package/esm/typography/{TextEllipsis → text-ellipsis}/TextEllipsis.js +0 -0
- package/layouts/{Divider → divider}/Divider.d.ts +0 -0
- package/layouts/{Divider → divider}/Divider.js +0 -0
- package/layouts/{Divider → divider}/Divider.sty.d.ts +0 -0
- package/typography/{BlockQuote → block-quote}/Blockquote.d.ts +1 -1
- package/typography/{BlockQuote → block-quote}/Blockquote.js +0 -0
- package/typography/{BlockQuote → block-quote}/Blockquote.sty.d.ts +0 -0
- package/typography/{Code → code}/Code.d.ts +1 -1
- package/typography/{Code → code}/Code.js +0 -0
- package/typography/{Code → code}/Code.sty.d.ts +0 -0
- package/typography/{Emphasis → emphasis}/Emphasis.d.ts +1 -1
- package/typography/{Emphasis → emphasis}/Emphasis.js +0 -0
- package/typography/{Emphasis → emphasis}/Emphasis.sty.d.ts +0 -0
- package/typography/{ExternalLink → external-link}/ExternalLink.d.ts +1 -1
- package/typography/{ExternalLink → external-link}/ExternalLink.js +0 -0
- package/typography/{ExternalLink → external-link}/ExternalLink.sty.d.ts +0 -0
- package/typography/{Heading → heading}/Heading.js +0 -0
- package/typography/{Heading → heading}/Heading.sty.d.ts +0 -0
- package/typography/{Highlight → highlight}/Highlight.d.ts +1 -1
- package/typography/{Highlight → highlight}/Highlight.js +0 -0
- package/typography/{Highlight → highlight}/Highlight.sty.d.ts +0 -0
- package/typography/{Link → link}/Link.d.ts +1 -1
- package/typography/{Link → link}/Link.sty.d.ts +0 -0
- package/typography/{List → list}/List.d.ts +1 -1
- package/typography/{List → list}/List.sty.d.ts +0 -0
- package/typography/{Paragraph → paragraph}/Paragraph.d.ts +1 -1
- package/typography/{Paragraph → paragraph}/Paragraph.js +0 -0
- package/typography/{Paragraph → paragraph}/Paragraph.sty.d.ts +0 -0
- package/typography/{Strikethrough → strikethrough}/Strikethrough.js +0 -0
- package/typography/{Strikethrough → strikethrough}/Strikethrough.sty.d.ts +0 -0
- package/typography/{Strong → strong}/Strong.d.ts +1 -1
- /package/typography/{Strong → strong}/Strong.js +0 -0
- /package/typography/{Strong → strong}/Strong.sty.d.ts +0 -0
- /package/typography/{Text → text}/Text.js +0 -0
- /package/typography/{Text → text}/Text.sty.d.ts +0 -0
- /package/typography/{TextEllipsis → text-ellipsis}/TextEllipsis.js +0 -0
- /package/typography/{TextEllipsis → text-ellipsis}/TextEllipsis.sty.d.ts +0 -0
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
.
|
|
1
|
+
.List_listCSS__16276mt0 {
|
|
2
2
|
margin: 0;
|
|
3
3
|
padding-left: var(--dt-spacings-size-40, 40px);
|
|
4
4
|
}
|
|
5
|
-
.
|
|
5
|
+
.List_listCSS__16276mt0 .List_listCSS__16276mt0 {
|
|
6
6
|
margin-block: var(--dt-spacings-size-4, 4px);
|
|
7
7
|
padding-left: var(--dt-spacings-size-28, 28px);
|
|
8
8
|
}
|
|
9
|
-
.
|
|
9
|
+
.List_listItemCSS__16276mt1 {
|
|
10
10
|
position: relative;
|
|
11
11
|
overflow-wrap: break-word;
|
|
12
12
|
margin-block: var(--dt-spacings-size-2, 2px);
|
|
13
13
|
}
|
|
14
|
-
.
|
|
14
|
+
.List_listItemCSS__16276mt1::marker {
|
|
15
15
|
font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
|
|
16
16
|
}
|
|
@@ -33,7 +33,7 @@ module.exports = __toCommonJS(List_exports);
|
|
|
33
33
|
var import_clsx = __toESM(require("clsx"));
|
|
34
34
|
var import_react = __toESM(require("react"));
|
|
35
35
|
var import_List_css = require("./List.sty.js");
|
|
36
|
-
var import_Text = require("../
|
|
36
|
+
var import_Text = require("../text/Text.js");
|
|
37
37
|
function interleaveListItems(listItems) {
|
|
38
38
|
const items = [];
|
|
39
39
|
import_react.default.Children.forEach(listItems, (listItem) => {
|
|
@@ -22,5 +22,5 @@ __export(List_css_exports, {
|
|
|
22
22
|
});
|
|
23
23
|
module.exports = __toCommonJS(List_css_exports);
|
|
24
24
|
var import_List_css_ts_vanilla = require("./List.css");
|
|
25
|
-
var listCSS = "
|
|
26
|
-
var listItemCSS = "
|
|
25
|
+
var listCSS = "List_listCSS__16276mt0";
|
|
26
|
+
var listItemCSS = "List_listItemCSS__16276mt1";
|
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
.
|
|
1
|
+
.Paragraph_paragraphCSS__487p2n0 {
|
|
2
2
|
margin-top: 0;
|
|
3
3
|
margin-bottom: 0;
|
|
4
4
|
overflow-wrap: break-word;
|
|
5
5
|
color: var(--dt-colors-text-neutral-default, #2b2a58);
|
|
6
6
|
font-style: normal;
|
|
7
7
|
}
|
|
8
|
-
.
|
|
8
|
+
.Paragraph_paragraphCSS_ellipsis_singleLine__487p2n1 {
|
|
9
9
|
display: block;
|
|
10
10
|
white-space: nowrap;
|
|
11
11
|
text-overflow: ellipsis;
|
|
12
12
|
overflow: hidden;
|
|
13
13
|
}
|
|
14
|
-
.
|
|
14
|
+
.Paragraph_paragraphCSS_ellipsis_multiLine__487p2n2 {
|
|
15
15
|
display: -webkit-box;
|
|
16
16
|
-webkit-line-clamp: var(--strato-ellipsis-line-clamp);
|
|
17
17
|
-webkit-box-orient: vertical;
|
|
@@ -22,4 +22,4 @@ __export(Paragraph_css_exports, {
|
|
|
22
22
|
module.exports = __toCommonJS(Paragraph_css_exports);
|
|
23
23
|
var import_Paragraph_css_ts_vanilla = require("./Paragraph.css");
|
|
24
24
|
var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
25
|
-
var paragraphCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "
|
|
25
|
+
var paragraphCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "Paragraph_paragraphCSS__487p2n0", variantClassNames: { ellipsis: { singleLine: "Paragraph_paragraphCSS_ellipsis_singleLine__487p2n1", multiLine: "Paragraph_paragraphCSS_ellipsis_multiLine__487p2n2" } }, defaultVariants: {}, compoundVariants: [] });
|
|
@@ -4,12 +4,12 @@ import type { MaskingProps } from '../../core/types/masking-props.js';
|
|
|
4
4
|
/**
|
|
5
5
|
* The props for the Strikethrough component.
|
|
6
6
|
* @public
|
|
7
|
-
|
|
7
|
+
*/
|
|
8
8
|
export interface StrikethroughProps extends WithChildren, StylingProps, DataTestId, MaskingProps {
|
|
9
9
|
}
|
|
10
10
|
/**
|
|
11
|
-
* @public
|
|
12
11
|
* The `Strikethrough` component renders text with a line through it. Use it to
|
|
13
12
|
* represent things that are no longer relevant or accurate.
|
|
13
|
+
* @public
|
|
14
14
|
*/
|
|
15
15
|
export declare const Strikethrough: (props: StrikethroughProps & React.RefAttributes<HTMLElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
|
|
@@ -21,4 +21,4 @@ __export(Strikethrough_css_exports, {
|
|
|
21
21
|
});
|
|
22
22
|
module.exports = __toCommonJS(Strikethrough_css_exports);
|
|
23
23
|
var import_Strikethrough_css_ts_vanilla = require("./Strikethrough.css");
|
|
24
|
-
var strikethroughCSS = "
|
|
24
|
+
var strikethroughCSS = "Strikethrough_strikethroughCSS__4oao6y0";
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
.
|
|
1
|
+
.Text_textCSS__rup8ap0 {
|
|
2
2
|
margin-top: 0;
|
|
3
3
|
margin-bottom: 0;
|
|
4
4
|
min-width: 0;
|
|
5
5
|
overflow-wrap: break-word;
|
|
6
6
|
}
|
|
7
|
-
.
|
|
7
|
+
.Text_textCSS_ellipsis_singleLine__rup8ap1 {
|
|
8
8
|
display: block;
|
|
9
9
|
white-space: nowrap;
|
|
10
10
|
text-overflow: ellipsis;
|
|
11
11
|
overflow: hidden;
|
|
12
12
|
}
|
|
13
|
-
.
|
|
13
|
+
.Text_textCSS_ellipsis_multiLine__rup8ap2 {
|
|
14
14
|
display: -webkit-box;
|
|
15
15
|
-webkit-line-clamp: var(--strato-ellipsis-line-clamp);
|
|
16
16
|
-webkit-box-orient: vertical;
|
|
@@ -7,8 +7,9 @@ import type { PolymorphicComponentProps } from '../../core/types/polymorph.js';
|
|
|
7
7
|
import type { StylingProps } from '../../core/types/styling-props.js';
|
|
8
8
|
import type { WithChildren } from '../../core/types/with-children.js';
|
|
9
9
|
/**
|
|
10
|
+
* The props for the text component without any props coming from polymorphing.
|
|
10
11
|
* @public
|
|
11
|
-
|
|
12
|
+
*/
|
|
12
13
|
export interface TextOwnProps extends WithChildren, DOMProps, AriaLabelingProps, StylingProps, DataTestId, MaskingProps {
|
|
13
14
|
/** Sets the text style. Variants include "base", "base-emphasized", etc. */
|
|
14
15
|
textStyle?: 'base' | 'base-emphasized' | 'small' | 'small-emphasized';
|
|
@@ -20,7 +21,7 @@ export interface TextOwnProps extends WithChildren, DOMProps, AriaLabelingProps,
|
|
|
20
21
|
* Combined props for the text component - polymorphing and own props. */
|
|
21
22
|
export type TextProps<E extends ElementType> = PolymorphicComponentProps<E, TextOwnProps>;
|
|
22
23
|
/**
|
|
23
|
-
* @public
|
|
24
24
|
* Use the `Text` component for text that is rendered without any semantic markup.
|
|
25
|
+
* @public
|
|
25
26
|
*/
|
|
26
27
|
export declare const Text: <E extends ElementType = 'span'>(props: TextProps<E>) => ReactElement | null;
|
|
@@ -22,4 +22,4 @@ __export(Text_css_exports, {
|
|
|
22
22
|
module.exports = __toCommonJS(Text_css_exports);
|
|
23
23
|
var import_Text_css_ts_vanilla = require("./Text.css");
|
|
24
24
|
var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
25
|
-
var textCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "
|
|
25
|
+
var textCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "Text_textCSS__rup8ap0", variantClassNames: { ellipsis: { singleLine: "Text_textCSS_ellipsis_singleLine__rup8ap1", multiLine: "Text_textCSS_ellipsis_multiLine__rup8ap2" } }, defaultVariants: {}, compoundVariants: [] });
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
.
|
|
1
|
+
.TextEllipsis_textEllipsisCSS__1mnpbqs0 {
|
|
2
2
|
display: inline-block;
|
|
3
3
|
box-sizing: border-box;
|
|
4
4
|
vertical-align: middle;
|
|
@@ -9,14 +9,14 @@
|
|
|
9
9
|
text-decoration: inherit;
|
|
10
10
|
width: 100%;
|
|
11
11
|
}
|
|
12
|
-
.
|
|
12
|
+
.TextEllipsis_textEllipsisCSS_truncationMode_start__1mnpbqs1 {
|
|
13
13
|
text-overflow: ellipsis;
|
|
14
14
|
direction: rtl;
|
|
15
15
|
text-align: left;
|
|
16
16
|
}
|
|
17
|
-
.
|
|
17
|
+
.TextEllipsis_textEllipsisCSS_truncationMode_middle__1mnpbqs2 {
|
|
18
18
|
text-overflow: clip;
|
|
19
19
|
}
|
|
20
|
-
.
|
|
20
|
+
.TextEllipsis_textEllipsisCSS_truncationMode_end__1mnpbqs3 {
|
|
21
21
|
text-overflow: ellipsis;
|
|
22
22
|
}
|
|
@@ -5,12 +5,12 @@ import { type StylingProps } from '../../core/types/styling-props.js';
|
|
|
5
5
|
/**
|
|
6
6
|
* Available modes for how overly long text is truncated and where the ellipsis is placed.
|
|
7
7
|
* @internal
|
|
8
|
-
|
|
8
|
+
*/
|
|
9
9
|
export type _TruncationMode = 'start' | 'middle' | 'end';
|
|
10
10
|
/**
|
|
11
11
|
* The props for the TextEllipsis component.
|
|
12
12
|
* @public
|
|
13
|
-
|
|
13
|
+
*/
|
|
14
14
|
export interface TextEllipsisProps extends HTMLAttributes<HTMLSpanElement>, StylingProps, DataTestId, MaskingProps {
|
|
15
15
|
/** The children (as text) passed to the component. */
|
|
16
16
|
children: string;
|
|
@@ -23,10 +23,10 @@ export interface TextEllipsisProps extends HTMLAttributes<HTMLSpanElement>, Styl
|
|
|
23
23
|
onTextOverflow?: (ellipsized: boolean) => void;
|
|
24
24
|
}
|
|
25
25
|
/**
|
|
26
|
-
* @public
|
|
27
26
|
* Use the `TextEllipsis` component to truncate text and show an ellipsis whenever
|
|
28
27
|
* there is insufficient space to render the entire text. While some of our Strato
|
|
29
28
|
* components provide ellipsis out of the box, you need to take care of this yourself
|
|
30
29
|
* when writing your own components.
|
|
30
|
+
* @public
|
|
31
31
|
*/
|
|
32
32
|
export declare const TextEllipsis: (props: TextEllipsisProps & React.RefAttributes<HTMLSpanElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
|
|
@@ -22,4 +22,4 @@ __export(TextEllipsis_css_exports, {
|
|
|
22
22
|
module.exports = __toCommonJS(TextEllipsis_css_exports);
|
|
23
23
|
var import_TextEllipsis_css_ts_vanilla = require("./TextEllipsis.css");
|
|
24
24
|
var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
25
|
-
var textEllipsisCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "
|
|
25
|
+
var textEllipsisCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "TextEllipsis_textEllipsisCSS__1mnpbqs0", variantClassNames: { truncationMode: { start: "TextEllipsis_textEllipsisCSS_truncationMode_start__1mnpbqs1", middle: "TextEllipsis_textEllipsisCSS_truncationMode_middle__1mnpbqs2", end: "TextEllipsis_textEllipsisCSS_truncationMode_end__1mnpbqs3" } }, defaultVariants: {}, compoundVariants: [] });
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../src/typography/Heading/Heading.tsx"],
|
|
4
|
-
"sourcesContent": ["import clsx from 'clsx';\nimport React, { forwardRef } from 'react';\n\nimport { headingCSS } from './Heading.sty.js';\nimport {\n type DataTestId,\n type StylingProps,\n type WithChildren,\n type MaskingProps,\n} from '../../core/index.js';\nimport type { DOMProps } from '../../core/types/dom.js';\nimport type { _HeadingTag } from '../../core/types/heading.js';\n\n/**\n * @public\n * Props used for the Heading component */\nexport interface HeadingProps\n extends DOMProps,\n WithChildren,\n StylingProps,\n DataTestId,\n MaskingProps {\n /**\n * The visual level of the heading.\n * @defaultValue 1\n */\n level?: 1 | 2 | 3 | 4 | 5 | 6;\n /**\n * The polymorphed HTML tag that determines the semantic level of the heading.\n * @defaultValue 'h1'\n */\n as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n}\n\n/**\n * @public\n * Use the `Heading` to render semantic HTML heading elements (`h1`, `h2`, etc.).\n * The component allows you to independently define both the visual and the semantic level of the heading.\n */\nexport const Heading = /* @__PURE__ */ forwardRef<\n HTMLHeadingElement,\n HeadingProps\n>((props, forwardedRef) => {\n const {\n level,\n children,\n as,\n 'data-testid': dataTestId,\n 'data-dtrum-mask': dataDtrumMask,\n 'data-dtrum-allow': dataDtrumAllow,\n className: consumerClassName,\n style: consumerStyle,\n ...remainingProps\n } = props;\n\n const visualLevel = level ?? 1;\n // semantic level\n const HeadingTag: _HeadingTag = as ?? (`h${visualLevel}` as _HeadingTag);\n\n return (\n <HeadingTag\n ref={forwardedRef}\n data-testid={dataTestId}\n data-dtrum-mask={dataDtrumMask}\n data-dtrum-allow={dataDtrumAllow}\n className={clsx(headingCSS({ visualLevel }), consumerClassName)}\n style={consumerStyle}\n {...remainingProps}\n >\n {children}\n </HeadingTag>\n );\n});\n(Heading as typeof Heading & { displayName: string }).displayName = 'Heading';\n"],
|
|
5
|
-
"mappings": "AAAA,OAAO,UAAU;AACjB,OAAO,SAAS,kBAAkB;AAElC,SAAS,kBAAkB;AAoCpB,MAAM,UAA0B,2BAGrC,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,cAAc,SAAS;AAE7B,QAAM,aAA0B,MAAO,IAAI,WAAW;AAEtD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,WAAW,KAAK,WAAW,EAAE,YAAY,CAAC,GAAG,iBAAiB;AAAA,MAC9D,OAAO;AAAA,MACN,GAAG;AAAA;AAAA,IAEH;AAAA,EACH;AAEJ,CAAC;AACA,QAAqD,cAAc;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import "./Heading.css";
|
|
2
|
-
import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
|
|
3
|
-
var headingCSS = _7a468({ defaultClassName: "Heading_headingCSS__u4t9450", variantClassNames: { visualLevel: { "1": "Heading_headingCSS_visualLevel_1__u4t9451", "2": "Heading_headingCSS_visualLevel_2__u4t9452", "3": "Heading_headingCSS_visualLevel_3__u4t9453", "4": "Heading_headingCSS_visualLevel_4__u4t9454", "5": "Heading_headingCSS_visualLevel_5__u4t9455", "6": "Heading_headingCSS_visualLevel_6__u4t9456" } }, defaultVariants: {}, compoundVariants: [] });
|
|
4
|
-
export {
|
|
5
|
-
headingCSS
|
|
6
|
-
};
|
|
7
|
-
//# sourceMappingURL=Heading.sty.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../src/typography/Link/Link.tsx"],
|
|
4
|
-
"sourcesContent": ["import clsx from 'clsx';\nimport React, { ElementType, forwardRef, ReactElement } from 'react';\n\nimport {\n type PolymorphicComponentProps,\n type DataTestId,\n type StylingProps,\n type WithChildren,\n _mergeProps,\n} from '../../core/index.js';\nimport { useFocusRing } from '../../core/styles/useFocusRing.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport { linkCSS } from '../Link/Link.sty.js';\n\n/**\n * The props for the Link component.\n * @public\n */\nexport type LinkProps<E extends ElementType> = PolymorphicComponentProps<\n E,\n WithChildren & StylingProps & DataTestId & MaskingProps\n>;\n\n/**\n * @public\n * Use the `Link` component to navigate to a different page within the application.\n * For external resources in a different domain, use the\n * {@link https://developer.dynatrace.com/design/components/typography/ExternalLink/ | `ExternalLink`}\n * component instead.\n */\nexport const Link: <E extends ElementType = 'a'>(\n props: LinkProps<E>,\n) => ReactElement | null = /* @__PURE__ */ forwardRef(\n <E extends ElementType>(\n {\n children,\n as,\n 'data-testid': dataTestId,\n 'data-dtrum-mask': dataDtrumMask,\n 'data-dtrum-allow': dataDtrumAllow,\n className: consumerClassName,\n style: consumerStyle,\n ...remainingProps\n }: LinkProps<E>,\n ref: typeof remainingProps.ref,\n ) => {\n const { focusProps, focusClassName } = useFocusRing({\n variant: 'primary',\n isMinimal: true,\n });\n const LinkTag = as || 'a';\n\n return (\n <LinkTag\n ref={ref}\n data-testid={dataTestId}\n data-dtrum-mask={dataDtrumMask}\n data-dtrum-allow={dataDtrumAllow}\n className={clsx(focusClassName, linkCSS, consumerClassName)}\n style={consumerStyle}\n {..._mergeProps(\n // Need to cast this one as the inference of mergeProps would generate\n // a not allowed overlap. The remainingProps type is too complex due to the\n // polymorphic inheritance.\n remainingProps as Record<string, unknown>,\n focusProps,\n )}\n >\n {children}\n </LinkTag>\n );\n },\n);\n\n(Link as typeof Link & { displayName: string }).displayName = 'Link';\n"],
|
|
5
|
-
"mappings": "AAAA,OAAO,UAAU;AACjB,OAAO,SAAsB,kBAAgC;AAE7D;AAAA,EAKE;AAAA,OACK;AACP,SAAS,oBAAoB;AAE7B,SAAS,eAAe;AAkBjB,MAAM,OAE8B;AAAA,EACzC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,EAAE,YAAY,eAAe,IAAI,aAAa;AAAA,MAClD,SAAS;AAAA,MACT,WAAW;AAAA,IACb,CAAC;AACD,UAAM,UAAU,MAAM;AAEtB,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,WAAW,KAAK,gBAAgB,SAAS,iBAAiB;AAAA,QAC1D,OAAO;AAAA,QACN,GAAG;AAAA;AAAA;AAAA;AAAA,UAIF;AAAA,UACA;AAAA,QACF;AAAA;AAAA,MAEC;AAAA,IACH;AAAA,EAEJ;AACF;AAEC,KAA+C,cAAc;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../src/typography/Strikethrough/Strikethrough.tsx"],
|
|
4
|
-
"sourcesContent": ["import clsx from 'clsx';\nimport React, { forwardRef } from 'react';\n\nimport { strikethroughCSS } from './Strikethrough.sty.js';\nimport {\n type DataTestId,\n type StylingProps,\n type WithChildren,\n} from '../../core/index.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\n\n/**\n * The props for the Strikethrough component.\n * @public\n * */\nexport interface StrikethroughProps\n extends WithChildren,\n StylingProps,\n DataTestId,\n MaskingProps {}\n\n/**\n * @public\n * The `Strikethrough` component renders text with a line through it. Use it to\n * represent things that are no longer relevant or accurate.\n */\nexport const Strikethrough = /* @__PURE__ */ forwardRef<\n HTMLElement,\n StrikethroughProps\n>((props, ref) => {\n const {\n children,\n 'data-testid': dataTestId,\n 'data-dtrum-mask': dataDtrumMask,\n 'data-dtrum-allow': dataDtrumAllow,\n className: consumerClassName,\n style: consumerStyle,\n ...remainingProps\n } = props;\n\n return (\n <s\n ref={ref}\n data-testid={dataTestId}\n data-dtrum-mask={dataDtrumMask}\n data-dtrum-allow={dataDtrumAllow}\n className={clsx(strikethroughCSS, consumerClassName)}\n style={consumerStyle}\n {...remainingProps}\n >\n {children}\n </s>\n );\n});\n(Strikethrough as typeof Strikethrough & { displayName: string }).displayName =\n 'Strikethrough';\n"],
|
|
5
|
-
"mappings": "AAAA,OAAO,UAAU;AACjB,OAAO,SAAS,kBAAkB;AAElC,SAAS,wBAAwB;AAuB1B,MAAM,gBAAgC,2BAG3C,CAAC,OAAO,QAAQ;AAChB,QAAM;AAAA,IACJ;AAAA,IACA,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EACL,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,WAAW,KAAK,kBAAkB,iBAAiB;AAAA,MACnD,OAAO;AAAA,MACN,GAAG;AAAA;AAAA,IAEH;AAAA,EACH;AAEJ,CAAC;AACA,cAAiE,cAChE;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../src/typography/Text/Text.tsx"],
|
|
4
|
-
"sourcesContent": ["import clsx from 'clsx';\nimport React, { type ElementType, type ReactElement, forwardRef } from 'react';\n\nimport { textCSS } from './Text.sty.js';\nimport type { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { DOMProps } from '../../core/types/dom.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport type { PolymorphicComponentProps } from '../../core/types/polymorph.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\nimport { textStyleCSS } from '../../styles/textStyle.sty.js';\n\n/**\n * @public\n * The props for the text component without any props coming from polymorphing. */\nexport interface TextOwnProps\n extends WithChildren,\n DOMProps,\n AriaLabelingProps,\n StylingProps,\n DataTestId,\n MaskingProps {\n /** Sets the text style. Variants include \"base\", \"base-emphasized\", etc. */\n textStyle?: 'base' | 'base-emphasized' | 'small' | 'small-emphasized';\n /** Sets the font style. Can either be \"text\" or \"code\" */\n fontStyle?: 'text' | 'code';\n}\n\n/**\n * @public\n * Combined props for the text component - polymorphing and own props. */\nexport type TextProps<E extends ElementType> = PolymorphicComponentProps<\n E,\n TextOwnProps\n>;\n\n/**\n * @public\n * Use the `Text` component for text that is rendered without any semantic markup.\n */\nexport const Text: <E extends ElementType = 'span'>(\n props: TextProps<E>,\n) => ReactElement | null = /* @__PURE__ */ forwardRef(\n <E extends ElementType>(\n {\n children,\n textStyle,\n fontStyle,\n as,\n className: consumerClassName,\n style: consumerStyle,\n 'data-testid': dataTestId,\n 'data-dtrum-mask': dataDtrumMask,\n 'data-dtrum-allow': dataDtrumAllow,\n ...remainingProps\n }: TextProps<E>,\n ref: typeof remainingProps.ref,\n ) => {\n const TextTag = as || 'span';\n\n let ellipsis: undefined | 'singleLine' | 'multiLine';\n\n return (\n <TextTag\n data-testid={dataTestId}\n data-dtrum-mask={dataDtrumMask}\n data-dtrum-allow={dataDtrumAllow}\n ref={ref}\n className={clsx([\n textCSS({ ellipsis }),\n (fontStyle || textStyle) && textStyleCSS({ fontStyle, textStyle }),\n consumerClassName,\n ])}\n style={consumerStyle}\n {...remainingProps}\n >\n {children}\n </TextTag>\n );\n },\n);\n\n(Text as typeof Text & { displayName: string }).displayName = 'Text';\n"],
|
|
5
|
-
"mappings": "AAAA,OAAO,UAAU;AACjB,OAAO,SAA8C,kBAAkB;AAEvE,SAAS,eAAe;AAQxB,SAAS,oBAAoB;AA8BtB,MAAM,OAE8B;AAAA,EACzC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,UAAU,MAAM;AAEtB,QAAI;AAEJ,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB;AAAA,QACA,WAAW,KAAK;AAAA,UACd,QAAQ,EAAE,SAAS,CAAC;AAAA,WACnB,aAAa,cAAc,aAAa,EAAE,WAAW,UAAU,CAAC;AAAA,UACjE;AAAA,QACF,CAAC;AAAA,QACD,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,MAEH;AAAA,IACH;AAAA,EAEJ;AACF;AAEC,KAA+C,cAAc;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../src/typography/TextEllipsis/TextEllipsis.tsx"],
|
|
4
|
-
"sourcesContent": ["import clsx from 'clsx';\nimport React, {\n forwardRef,\n HTMLAttributes,\n RefObject,\n useLayoutEffect,\n useRef,\n} from 'react';\nimport useResizeObserver from 'use-resize-observer';\n\nimport { textEllipsisCSS } from './TextEllipsis.sty.js';\nimport { _useFontsUpdated } from '../../core/hooks/useFontsUpdated.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { type DataTestId } from '../../core/types/data-props.js';\nimport { type MaskingProps } from '../../core/types/masking-props.js';\nimport { type StylingProps } from '../../core/types/styling-props.js';\nimport { type _Font } from '../utils.js';\nimport { _centerEllipsizeText } from '../utils.js';\n\n/**\n * Available modes for how overly long text is truncated and where the ellipsis is placed.\n * @internal\n * */\nexport type _TruncationMode = 'start' | 'middle' | 'end';\n\n/**\n * The props for the TextEllipsis component.\n * @public\n * */\nexport interface TextEllipsisProps\n extends HTMLAttributes<HTMLSpanElement>,\n StylingProps,\n DataTestId,\n MaskingProps {\n /** The children (as text) passed to the component. */\n children: string;\n /**\n * The mode used for for truncating the text, either at the start, in the middle or at the end.\n * @defaultValue 'end'\n */\n truncationMode?: 'start' | 'middle' | 'end';\n /** Gets called when text needs to get truncated due to lack of horizontal space. */\n onTextOverflow?: (ellipsized: boolean) => void;\n}\n\n/**\n * Returns an object containing all font-related CSS properties from\n * a given DOM element that are relevant for rendering formatted text\n * in a 2D canvas context.\n *\n * @param textWrapper - The HTML element to extract the CSS properties from\n */\nfunction getFontProps(textWrapper: HTMLSpanElement): _Font {\n const computedStyle = window.getComputedStyle(textWrapper, null);\n\n return {\n fontStyle: computedStyle.getPropertyValue('font-style'),\n fontWeight: computedStyle.getPropertyValue('font-weight'),\n fontSize: computedStyle.getPropertyValue('font-size'),\n fontFamily: computedStyle.getPropertyValue('font-family'),\n };\n}\n\n/**\n * Determines whether a CSS text-ellipsis is currently rendered in a container.\n * Note: `containerWidth` is only passed to avoid unnecessary reflows by calling `getBoundingClientRect()`\n */\nfunction isNativeEllipsisActive(\n textWrapper: HTMLSpanElement,\n containerWidth: number,\n): boolean {\n const textWidth =\n Math.floor(textWrapper.getBoundingClientRect().width * 100) / 100;\n\n return textWidth > containerWidth;\n}\n\n/**\n * Detects whether a given formatted text has enough space within its\n * parent container and applies or removes an ellipsis accordingly.\n *\n * @param originalText - The text to be truncated if its width exceeds <code>maxWidthInPx</code>\n * @param truncationMode - The mode used for for truncating the text, either at the start, in the middle or at the end\n * @param containerRef - Object ref pointing towards the root element of the TextEllipsis component\n * @param wasEllipsized - Whether an ellipsis was applied during the last render cycle\n * @param onTextOverflow - Callback that gets called whenever the state of the ellipsis changes since the last render cycle\n */\nfunction renderEllipsizedText(\n originalText: string,\n truncationMode: TextEllipsisProps['truncationMode'],\n containerRef: RefObject<HTMLSpanElement>,\n wasEllipsized: boolean,\n onTextOverflow?: (ellipsized: boolean) => void,\n): boolean {\n const containerElement = containerRef.current;\n const textWrapper: HTMLSpanElement | null =\n (containerElement?.firstElementChild as HTMLSpanElement) || null;\n\n if (containerElement !== null && textWrapper !== null) {\n if (textWrapper.textContent !== originalText) {\n textWrapper.textContent = originalText; // always reset to full text before measuring container width\n }\n\n const containerWidth =\n Math.ceil(containerElement.getBoundingClientRect().width * 100) / 100;\n\n if (truncationMode === 'middle') {\n if (isNativeEllipsisActive(textWrapper, containerWidth)) {\n const ellipsizedText = _centerEllipsizeText(\n originalText,\n getFontProps(textWrapper),\n containerWidth,\n );\n textWrapper.textContent = ellipsizedText;\n\n if (ellipsizedText !== originalText) {\n if (onTextOverflow && !wasEllipsized) {\n onTextOverflow(true);\n }\n\n return true;\n }\n }\n\n if (onTextOverflow && wasEllipsized) {\n onTextOverflow(false);\n }\n } else if (isNativeEllipsisActive(textWrapper, containerWidth)) {\n if (onTextOverflow && !wasEllipsized) {\n onTextOverflow(true);\n }\n\n return true;\n } else if (onTextOverflow && wasEllipsized) {\n onTextOverflow(false);\n }\n }\n\n return false;\n}\n\nconst ComputedTextEllipsis = /* @__PURE__ */ forwardRef<\n HTMLSpanElement,\n TextEllipsisProps\n>((props, forwardedRef) => {\n const {\n children,\n truncationMode = 'end',\n onTextOverflow,\n className: consumerClassName,\n style: consumerStyle,\n 'data-testid': dataTestId,\n 'data-dtrum-mask': dataDtrumMask,\n 'data-dtrum-allow': dataDtrumAllow,\n ...remainingProps\n } = props;\n\n // resize observer is needed to re-render the component in case of resizing\n const { ref: observerContainerRef } = useResizeObserver<HTMLSpanElement>();\n const containerRef = useRef<HTMLSpanElement | null>(null);\n const ellipsisStateRef = useRef<boolean>(false);\n const mergedRef = useMergeRefs<HTMLSpanElement | null>([\n observerContainerRef,\n (instance: HTMLSpanElement) => {\n containerRef.current = instance;\n },\n forwardedRef,\n ]);\n const containerWidth = containerRef.current?.getBoundingClientRect().width;\n const fontsUpdated = _useFontsUpdated();\n\n useLayoutEffect(() => {\n ellipsisStateRef.current = renderEllipsizedText(\n children,\n truncationMode,\n containerRef,\n ellipsisStateRef.current,\n onTextOverflow,\n );\n }, [containerWidth, children, truncationMode, fontsUpdated, onTextOverflow]);\n\n return (\n <span\n ref={mergedRef}\n aria-label={children}\n data-ellipsis\n data-testid={dataTestId}\n data-dtrum-mask={dataDtrumMask}\n data-dtrum-allow={dataDtrumAllow}\n className={clsx(textEllipsisCSS({ truncationMode }), consumerClassName)}\n style={consumerStyle}\n {...remainingProps}\n >\n <span>{children}</span>\n </span>\n );\n});\n\nconst CssTextEllipsis = /* @__PURE__ */ forwardRef<\n HTMLSpanElement,\n TextEllipsisProps\n>((props, forwardedRef) => {\n const {\n children,\n truncationMode = 'end',\n onTextOverflow,\n className: consumerClassName,\n style: consumerStyle,\n 'data-testid': dataTestId,\n ...remainingProps\n } = props;\n\n return (\n <span\n ref={forwardedRef}\n aria-label={children}\n data-ellipsis\n data-testid={dataTestId}\n className={clsx(textEllipsisCSS({ truncationMode }), consumerClassName)}\n style={consumerStyle}\n {...remainingProps}\n >\n <span>{children}</span>\n </span>\n );\n});\n\n/**\n * @public\n * Use the `TextEllipsis` component to truncate text and show an ellipsis whenever\n * there is insufficient space to render the entire text. While some of our Strato\n * components provide ellipsis out of the box, you need to take care of this yourself\n * when writing your own components.\n */\nexport const TextEllipsis = /* @__PURE__ */ forwardRef<\n HTMLSpanElement,\n TextEllipsisProps\n>((props, forwardedRef) => {\n // in case onTextOverflow is not defined and the ellipsis is start or end\n // we can use css only which is significantly more performant\n const cssOnlyEllipsis =\n !props.onTextOverflow && props.truncationMode !== 'middle';\n\n return cssOnlyEllipsis ? (\n <CssTextEllipsis ref={forwardedRef} {...props} />\n ) : (\n <ComputedTextEllipsis ref={forwardedRef} {...props} />\n );\n});\n\n(TextEllipsis as typeof TextEllipsis & { displayName: string }).displayName =\n 'TextEllipsis';\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import "./TextEllipsis.css";
|
|
2
|
-
import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
|
|
3
|
-
var textEllipsisCSS = _7a468({ defaultClassName: "TextEllipsis_textEllipsisCSS__1n6xzhd0", variantClassNames: { truncationMode: { start: "TextEllipsis_textEllipsisCSS_truncationMode_start__1n6xzhd1", middle: "TextEllipsis_textEllipsisCSS_truncationMode_middle__1n6xzhd2", end: "TextEllipsis_textEllipsisCSS_truncationMode_end__1n6xzhd3" } }, defaultVariants: {}, compoundVariants: [] });
|
|
4
|
-
export {
|
|
5
|
-
textEllipsisCSS
|
|
6
|
-
};
|
|
7
|
-
//# sourceMappingURL=TextEllipsis.sty.js.map
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
@@ -13,7 +13,7 @@ export interface BlockquoteProps extends WithChildren, StylingProps, DataTestId,
|
|
|
13
13
|
cite?: string;
|
|
14
14
|
}
|
|
15
15
|
/**
|
|
16
|
-
* @public
|
|
17
16
|
* The `Blockquote` component wraps longer text blocks and indicates that the passage is quoted from another source.
|
|
17
|
+
* @public
|
|
18
18
|
*/
|
|
19
19
|
export declare const Blockquote: (props: BlockquoteProps & React.RefAttributes<HTMLQuoteElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
|
|
File without changes
|
|
File without changes
|
|
@@ -8,10 +8,10 @@ import type { MaskingProps } from '../../core/types/masking-props.js';
|
|
|
8
8
|
export interface CodeProps extends WithChildren, StylingProps, DataTestId, MaskingProps {
|
|
9
9
|
}
|
|
10
10
|
/**
|
|
11
|
-
* @public
|
|
12
11
|
* Use the `Code` component to display snippets of code inline. If you want to
|
|
13
12
|
* display a block of code, use the
|
|
14
13
|
* {@link https://developer.dynatrace.com/design/components-preview/content/CodeSnippet/ | `CodeSnippet`}
|
|
15
14
|
* component instead.
|
|
15
|
+
* @public
|
|
16
16
|
*/
|
|
17
17
|
export declare const Code: (props: CodeProps & React.RefAttributes<HTMLElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
|
|
File without changes
|
|
File without changes
|
|
@@ -8,7 +8,7 @@ import type { MaskingProps } from '../../core/types/masking-props.js';
|
|
|
8
8
|
export interface EmphasisProps extends WithChildren, StylingProps, DataTestId, MaskingProps {
|
|
9
9
|
}
|
|
10
10
|
/**
|
|
11
|
-
* @public
|
|
12
11
|
* The `Emphasis` component adds visual and semantic emphasis to stressed or essential content.
|
|
12
|
+
* @public
|
|
13
13
|
*/
|
|
14
14
|
export declare const Emphasis: (props: EmphasisProps & React.RefAttributes<HTMLElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
|
|
File without changes
|
|
File without changes
|
|
@@ -12,10 +12,10 @@ export interface ExternalLinkProps extends WithChildren, StylingProps, DataTestI
|
|
|
12
12
|
onClick?: MouseEventHandler;
|
|
13
13
|
}
|
|
14
14
|
/**
|
|
15
|
-
* @public
|
|
16
15
|
* Use the `ExternalLink` component to link outside of the
|
|
17
16
|
* Dynatrace platform. For resources within the Dynatrace platform, use the
|
|
18
17
|
* {@link https://developer.dynatrace.com/design/components/typography/Link/ | `Link`}
|
|
19
18
|
* component instead.
|
|
19
|
+
* @public
|
|
20
20
|
*/
|
|
21
21
|
export declare const ExternalLink: (props: ExternalLinkProps & React.RefAttributes<HTMLAnchorElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
@@ -20,8 +20,8 @@ export interface HighlightProps extends WithChildren, DataTestId, MaskingProps {
|
|
|
20
20
|
caseSensitive?: boolean;
|
|
21
21
|
}
|
|
22
22
|
/**
|
|
23
|
-
* @public
|
|
24
23
|
* Use the `Highlight` component to highlight one or more substrings within a
|
|
25
24
|
* text.
|
|
25
|
+
* @public
|
|
26
26
|
*/
|
|
27
27
|
export declare const Highlight: (props: HighlightProps) => ReactElement;
|
|
File without changes
|
|
File without changes
|
|
@@ -7,10 +7,10 @@ import type { MaskingProps } from '../../core/types/masking-props.js';
|
|
|
7
7
|
*/
|
|
8
8
|
export type LinkProps<E extends ElementType> = PolymorphicComponentProps<E, WithChildren & StylingProps & DataTestId & MaskingProps>;
|
|
9
9
|
/**
|
|
10
|
-
* @public
|
|
11
10
|
* Use the `Link` component to navigate to a different page within the application.
|
|
12
11
|
* For external resources in a different domain, use the
|
|
13
12
|
* {@link https://developer.dynatrace.com/design/components/typography/ExternalLink/ | `ExternalLink`}
|
|
14
13
|
* component instead.
|
|
14
|
+
* @public
|
|
15
15
|
*/
|
|
16
16
|
export declare const Link: <E extends ElementType = 'a'>(props: LinkProps<E>) => ReactElement | null;
|
|
File without changes
|
|
@@ -31,9 +31,9 @@ export interface ListProps<TOrdered extends boolean = false> extends WithChildre
|
|
|
31
31
|
start?: number;
|
|
32
32
|
}
|
|
33
33
|
/**
|
|
34
|
-
* @public
|
|
35
34
|
* The `List` component groups a set of related content in a list and can be arbitrarily nested.
|
|
36
35
|
* List items are preceded by either a consecutive number (for ordered lists) or a bullet point
|
|
37
36
|
* (for unordered lists).
|
|
37
|
+
* @public
|
|
38
38
|
*/
|
|
39
39
|
export declare const List: <TOrdered extends boolean = false>(props: ListProps<TOrdered> & React.RefAttributes<TOrdered extends true ? HTMLOListElement : HTMLUListElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
|
|
File without changes
|
|
@@ -13,7 +13,7 @@ export interface ParagraphProps extends WithChildren, DOMProps, StylingProps, Da
|
|
|
13
13
|
maxLines?: number;
|
|
14
14
|
}
|
|
15
15
|
/**
|
|
16
|
-
* @public
|
|
17
16
|
* The `Paragraph` component displays a block of text with the default text style and supports text truncation.
|
|
17
|
+
* @public
|
|
18
18
|
*/
|
|
19
19
|
export declare const Paragraph: (props: ParagraphProps & React.RefAttributes<HTMLParagraphElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
@@ -8,7 +8,7 @@ import type { MaskingProps } from '../../core/types/masking-props.js';
|
|
|
8
8
|
export interface StrongProps extends WithChildren, StylingProps, DataTestId, MaskingProps {
|
|
9
9
|
}
|
|
10
10
|
/**
|
|
11
|
-
* @public
|
|
12
11
|
* Use the `Strong` component to render text in bold type to emphasize it.
|
|
12
|
+
* @public
|
|
13
13
|
*/
|
|
14
14
|
export declare const Strong: (props: StrongProps & React.RefAttributes<HTMLElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|