npm - @dynatrace/strato-components - Versions diffs - 3.8.0 → 3.9.0 - Mend

@dynatrace/strato-components 3.8.0 → 3.9.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.

Files changed (2397) hide show

package/esm/typography/highlight/Highlight.css CHANGED Viewed

@@ -1,8 +1,8 @@
-._lajjl30-3-8-0 {
+._lajjl30-3-9-0 {
   white-space: pre-wrap;
   flex: none;
 }
-._lajjl30-3-8-0::highlight(strato-typography-highlight), ._lajjl30-3-8-0 *::highlight(strato-typography-highlight) {
+._lajjl30-3-9-0::highlight(strato-typography-highlight), ._lajjl30-3-9-0 *::highlight(strato-typography-highlight) {
   color: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
   background: var(--dt-colors-background-container-neutral-accent, #5b5c81);
 }

package/esm/typography/highlight/Highlight.sty.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import "./Highlight.css";
-var wrapper = "_lajjl30-3-8-0";
+var wrapper = "_lajjl30-3-9-0";
 export {
   wrapper
 };

package/esm/typography/highlight/Highlight.sty.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/typography/highlight/Highlight.css.ts"],
-  "sourcesContent": ["import './Highlight.css';\nexport var wrapper = '_lajjl30-3-8-0';"],
+  "sourcesContent": ["import './Highlight.css';\nexport var wrapper = '_lajjl30-3-9-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;",
   "names": []
 }

package/esm/typography/link/Link.css CHANGED Viewed

@@ -1,15 +1,15 @@
-._1iksxp40-3-8-0 {
+._1iksxp40-3-9-0 {
   display: inline;
   color: var(--dt-colors-text-primary-default, #464cce);
   text-decoration: underline;
   overflow-wrap: anywhere;
 }
-._1iksxp40-3-8-0:hover {
+._1iksxp40-3-9-0:hover {
   color: var(--dt-colors-text-primary-default-hover, #3431b3);
 }
-._1iksxp40-3-8-0:active {
+._1iksxp40-3-9-0:active {
   color: var(--dt-colors-text-primary-default-active, #250f98);
 }
-._1iksxp40-3-8-0:focus-visible {
+._1iksxp40-3-9-0:focus-visible {
   text-decoration: none;
 }

package/esm/typography/link/Link.sty.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import "../../core/styles/focusRingStatic.css";
 import "./Link.css";
-var link = "_1iksxp40-3-8-0 _z0fq9b4-3-8-0 _z0fq9be-3-8-0 _z0fq9b5-3-8-0 _z0fq9b9-3-8-0";
+var link = "_1iksxp40-3-9-0 _z0fq9b4-3-9-0 _z0fq9be-3-9-0 _z0fq9b5-3-9-0 _z0fq9b9-3-9-0";
 export {
   link
 };

package/esm/typography/link/Link.sty.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/typography/link/Link.css.ts"],
-  "sourcesContent": ["import '../../core/styles/focusRingStatic.css';\nimport './Link.css';\nexport var link = '_1iksxp40-3-8-0 _z0fq9b4-3-8-0 _z0fq9be-3-8-0 _z0fq9b5-3-8-0 _z0fq9b9-3-8-0';"],
+  "sourcesContent": ["import '../../core/styles/focusRingStatic.css';\nimport './Link.css';\nexport var link = '_1iksxp40-3-9-0 _z0fq9b4-3-9-0 _z0fq9be-3-9-0 _z0fq9b5-3-9-0 _z0fq9b9-3-9-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,OAAO;",
   "names": []
 }

package/esm/typography/list/List.css CHANGED Viewed

@@ -1,16 +1,16 @@
-._16276mt0-3-8-0 {
+._16276mt0-3-9-0 {
   margin: 0;
   padding-left: var(--dt-spacings-size-40, 40px);
 }
-._16276mt0-3-8-0 ._16276mt0-3-8-0 {
+._16276mt0-3-9-0 ._16276mt0-3-9-0 {
   margin-block: var(--dt-spacings-size-4, 4px);
   padding-left: var(--dt-spacings-size-28, 28px);
 }
-._16276mt1-3-8-0 {
+._16276mt1-3-9-0 {
   position: relative;
   overflow-wrap: break-word;
   margin-block: var(--dt-spacings-size-2, 2px);
 }
-._16276mt1-3-8-0::marker {
+._16276mt1-3-9-0::marker {
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
 }

package/esm/typography/list/List.sty.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import "./List.css";
-var listCSS = "_16276mt0-3-8-0";
-var listItemCSS = "_16276mt1-3-8-0";
+var listCSS = "_16276mt0-3-9-0";
+var listItemCSS = "_16276mt1-3-9-0";
 export {
   listCSS,
   listItemCSS

package/esm/typography/list/List.sty.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/typography/list/List.css.ts"],
-  "sourcesContent": ["import './List.css';\nexport var listCSS = '_16276mt0-3-8-0';\nexport var listItemCSS = '_16276mt1-3-8-0';"],
+  "sourcesContent": ["import './List.css';\nexport var listCSS = '_16276mt0-3-9-0';\nexport var listItemCSS = '_16276mt1-3-9-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;AACd,IAAI,cAAc;",
   "names": []
 }

package/esm/typography/paragraph/Paragraph.css CHANGED Viewed

@@ -1,17 +1,17 @@
-._487p2n0-3-8-0 {
+._487p2n0-3-9-0 {
   margin-top: 0;
   margin-bottom: 0;
   overflow-wrap: break-word;
   color: inherit;
   font-style: normal;
 }
-._487p2n1-3-8-0 {
+._487p2n1-3-9-0 {
   display: block;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
 }
-._487p2n2-3-8-0 {
+._487p2n2-3-9-0 {
   display: -webkit-box;
   -webkit-line-clamp: var(--strato-ellipsis-line-clamp);
   -webkit-box-orient: vertical;

package/esm/typography/paragraph/Paragraph.sty.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import "./Paragraph.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var paragraph = _7a468({ defaultClassName: "_487p2n0-3-8-0", variantClassNames: { ellipsis: { singleLine: "_487p2n1-3-8-0", multiLine: "_487p2n2-3-8-0" } }, defaultVariants: {}, compoundVariants: [] });
+var paragraph = _7a468({ defaultClassName: "_487p2n0-3-9-0", variantClassNames: { ellipsis: { singleLine: "_487p2n1-3-9-0", multiLine: "_487p2n2-3-9-0" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   paragraph
 };

package/esm/typography/paragraph/Paragraph.sty.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/typography/paragraph/Paragraph.css.ts"],
-  "sourcesContent": ["import './Paragraph.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var paragraph = _7a468({defaultClassName:'_487p2n0-3-8-0',variantClassNames:{ellipsis:{singleLine:'_487p2n1-3-8-0',multiLine:'_487p2n2-3-8-0'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './Paragraph.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var paragraph = _7a468({defaultClassName:'_487p2n0-3-9-0',variantClassNames:{ellipsis:{singleLine:'_487p2n1-3-9-0',multiLine:'_487p2n2-3-9-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,YAAY,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,UAAS,EAAC,YAAW,kBAAiB,WAAU,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/typography/strikethrough/Strikethrough.css CHANGED Viewed

@@ -1,4 +1,4 @@
-._4oao6y0-3-8-0 {
+._4oao6y0-3-9-0 {
   text-decoration: line-through;
   text-decoration-style: solid;
   overflow-wrap: break-word;

package/esm/typography/strikethrough/Strikethrough.sty.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import "./Strikethrough.css";
-var strikethroughCSS = "_4oao6y0-3-8-0";
+var strikethroughCSS = "_4oao6y0-3-9-0";
 export {
   strikethroughCSS
 };

package/esm/typography/strikethrough/Strikethrough.sty.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/typography/strikethrough/Strikethrough.css.ts"],
-  "sourcesContent": ["import './Strikethrough.css';\nexport var strikethroughCSS = '_4oao6y0-3-8-0';"],
+  "sourcesContent": ["import './Strikethrough.css';\nexport var strikethroughCSS = '_4oao6y0-3-9-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,mBAAmB;",
   "names": []
 }

package/esm/typography/strong/Strong.css CHANGED Viewed

@@ -1,4 +1,4 @@
-._wxp4dd0-3-8-0 {
+._wxp4dd0-3-9-0 {
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
   overflow-wrap: break-word;
 }

package/esm/typography/strong/Strong.sty.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import "./Strong.css";
-var strongCSS = "_wxp4dd0-3-8-0";
+var strongCSS = "_wxp4dd0-3-9-0";
 export {
   strongCSS
 };

package/esm/typography/strong/Strong.sty.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/typography/strong/Strong.css.ts"],
-  "sourcesContent": ["import './Strong.css';\nexport var strongCSS = '_wxp4dd0-3-8-0';"],
+  "sourcesContent": ["import './Strong.css';\nexport var strongCSS = '_wxp4dd0-3-9-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,YAAY;",
   "names": []
 }

package/esm/typography/text/Text.css CHANGED Viewed

@@ -1,16 +1,16 @@
-._rup8ap0-3-8-0 {
+._rup8ap0-3-9-0 {
   margin-top: 0;
   margin-bottom: 0;
   min-width: 0;
   overflow-wrap: break-word;
 }
-._rup8ap1-3-8-0 {
+._rup8ap1-3-9-0 {
   display: block;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
 }
-._rup8ap2-3-8-0 {
+._rup8ap2-3-9-0 {
   display: -webkit-box;
   -webkit-line-clamp: var(--strato-ellipsis-line-clamp);
   -webkit-box-orient: vertical;

package/esm/typography/text/Text.sty.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import "./Text.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var text = _7a468({ defaultClassName: "_rup8ap0-3-8-0", variantClassNames: { ellipsis: { singleLine: "_rup8ap1-3-8-0", multiLine: "_rup8ap2-3-8-0" } }, defaultVariants: {}, compoundVariants: [] });
+var text = _7a468({ defaultClassName: "_rup8ap0-3-9-0", variantClassNames: { ellipsis: { singleLine: "_rup8ap1-3-9-0", multiLine: "_rup8ap2-3-9-0" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   text
 };

package/esm/typography/text/Text.sty.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/typography/text/Text.css.ts"],
-  "sourcesContent": ["import './Text.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var text = _7a468({defaultClassName:'_rup8ap0-3-8-0',variantClassNames:{ellipsis:{singleLine:'_rup8ap1-3-8-0',multiLine:'_rup8ap2-3-8-0'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './Text.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var text = _7a468({defaultClassName:'_rup8ap0-3-9-0',variantClassNames:{ellipsis:{singleLine:'_rup8ap1-3-9-0',multiLine:'_rup8ap2-3-9-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,OAAO,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,UAAS,EAAC,YAAW,kBAAiB,WAAU,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/typography/text-ellipsis/TextEllipsis.css CHANGED Viewed

@@ -1,4 +1,4 @@
-._1mnpbqs1-3-8-0 {
+._1mnpbqs1-3-9-0 {
   display: inline-block;
   box-sizing: border-box;
   vertical-align: middle;
@@ -9,18 +9,18 @@
   text-decoration: inherit;
   width: 100%;
 }
-._1mnpbqs2-3-8-0 {
+._1mnpbqs2-3-9-0 {
   text-overflow: ellipsis;
   direction: rtl;
   text-align: left;
 }
-._1mnpbqs2-3-8-0::after, ._1mnpbqs2-3-8-0::before {
+._1mnpbqs2-3-9-0::after, ._1mnpbqs2-3-9-0::before {
   content: "‎";
 }
-._1mnpbqs3-3-8-0 {
+._1mnpbqs3-3-9-0 {
   text-overflow: clip;
 }
-._1mnpbqs3-3-8-0._1mnpbqs0-3-8-0:after {
+._1mnpbqs3-3-9-0._1mnpbqs0-3-9-0:after {
   content: attr(data-sourcetext) / "";
   color: transparent;
   display: table;
@@ -28,6 +28,6 @@
   line-height: 0;
   user-select: none;
 }
-._1mnpbqs4-3-8-0 {
+._1mnpbqs4-3-9-0 {
   text-overflow: ellipsis;
 }

package/esm/typography/text-ellipsis/TextEllipsis.js CHANGED Viewed

@@ -5,11 +5,11 @@ import {
   useLayoutEffect,
   useRef
 } from "react";
-import useResizeObserver from "use-resize-observer";
 import { useAriaLabelingProps } from "../../core/hooks/useAriaLabelingProps.js";
 import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
 import { useFontsUpdated } from "../../core/hooks/useFontsUpdated.js";
 import { useMergeRefs } from "../../core/hooks/useMergeRefs.js";
+import { useResizeObserver } from "../../core/hooks/useResizeObserver.js";
 import { useSafeForwardProps } from "../../core/hooks/useSafeForwardProps.js";
 import { centerEllipsizeText } from "../utils.js";
 import * as styles from "./TextEllipsis.sty.js";

package/esm/typography/text-ellipsis/TextEllipsis.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/typography/text-ellipsis/TextEllipsis.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  type HTMLAttributes,\n  type RefObject,\n  useLayoutEffect,\n  useRef,\n} from 'react';\nimport useResizeObserver from 'use-resize-observer';\n\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useFontsUpdated } from '../../core/hooks/useFontsUpdated.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport type { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.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 { centerEllipsizeText, type Font } from '../utils.js';\nimport * as styles from './TextEllipsis.sty.js';\n\nconst COMPONENT_NAME = 'TextEllipsis';\n\n/**\n * Available modes for how overly long text is truncated and where the ellipsis is placed.\n * @public\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    AriaLabelingProps,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    BehaviorTrackingProps {\n  /** The children (as text) passed to the component. */\n  children: string;\n  /**\n   * The mode used for truncating the text, either at the start, in the middle or at the end.\n   * @defaultValue 'end'\n   */\n  truncationMode?: TruncationMode;\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 innerSpanElement - The HTML element to extract the CSS properties from\n */\nfunction getFontProps(innerSpanElement: HTMLSpanElement): Font {\n  const computedStyle = window.getComputedStyle(innerSpanElement, 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  innerSpanElement: HTMLSpanElement,\n  containerWidth: number,\n): boolean {\n  // Sometimes there already is an ellipsis, which means `getBoundingClientRect().width` and `containerWidth` are the same.\n  // In that case, `scrollWidth` specifies the actual width of the text if it was fully visible.\n  const originalTextWidth = Math.max(\n    innerSpanElement.getBoundingClientRect().width,\n    innerSpanElement.scrollWidth,\n  );\n  const textWidth = Math.floor(originalTextWidth * 100) / 100;\n\n  return textWidth > containerWidth;\n}\n\nfunction resetFullText(\n  innerSpanElement: HTMLSpanElement,\n  originalText: string,\n) {\n  if (innerSpanElement.textContent !== originalText) {\n    innerSpanElement.textContent = originalText;\n  }\n}\n\nfunction getWidth(element: HTMLSpanElement) {\n  return Math.max(element.getBoundingClientRect().width, element.clientWidth);\n}\n\nfunction getContainerWidth(containerElement: HTMLSpanElement) {\n  return Math.ceil(getWidth(containerElement) * 100) / 100;\n}\n\nfunction onTextOverflowCallback(\n  current: boolean,\n  wasEllipsized: boolean,\n  onTextOverflow: ((ellipsized: boolean) => void) | undefined,\n) {\n  if (onTextOverflow && current !== wasEllipsized) {\n    onTextOverflow(current);\n  }\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 the container width\n * @param truncationMode - The mode used 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 *\n * @returns true, if the given text was ellipsized, false otherwise.\n */\nfunction renderEllipsizedText(\n  originalText: string,\n  truncationMode: TextEllipsisProps['truncationMode'],\n  containerRef: RefObject<HTMLSpanElement | null>,\n  wasEllipsized: boolean,\n  onTextOverflow?: (ellipsized: boolean) => void,\n): boolean {\n  const containerElement = containerRef.current;\n\n  const innerSpanElement: HTMLSpanElement | null =\n    (containerElement?.firstElementChild as HTMLSpanElement) || null;\n\n  if (containerElement === null || innerSpanElement === null) {\n    return false;\n  }\n\n  // always reset to full text before measuring container width\n  resetFullText(innerSpanElement, originalText);\n  const containerWidth = getContainerWidth(containerElement);\n\n  if (!isNativeEllipsisActive(innerSpanElement, containerWidth)) {\n    onTextOverflowCallback(false, wasEllipsized, onTextOverflow);\n    return false;\n  }\n\n  if (truncationMode === 'middle') {\n    innerSpanElement.textContent = centerEllipsizeText(\n      originalText,\n      getFontProps(innerSpanElement),\n      containerWidth,\n    );\n  }\n\n  onTextOverflowCallback(true, wasEllipsized, onTextOverflow);\n  return true;\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  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n  const ariaLabelingProps = useAriaLabelingProps(restProps);\n  const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);\n\n  // resize observer is needed to re-calculate the ellipsis in case of resizing\n  const { ref: observerContainerRef, width } =\n    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\n  const fontsUpdated = useFontsUpdated();\n\n  useLayoutEffect(() => {\n    ellipsisStateRef.current = renderEllipsizedText(\n      children,\n      truncationMode,\n      containerRef,\n      ellipsisStateRef.current,\n      onTextOverflow,\n    );\n  }, [width, children, truncationMode, fontsUpdated, onTextOverflow]);\n\n  return (\n    <span\n      ref={mergedRef}\n      className={clsx(\n        styles.ellipsis({ truncationMode }),\n        {\n          [styles.active]: ellipsisStateRef.current,\n        },\n        consumerClassName,\n      )}\n      style={consumerStyle}\n      data-sourcetext={children}\n      data-ellipsis\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      {...ariaLabelingProps}\n      {...behavioralTrackingProps}\n      {...forwardProps}\n      data-dt-component={COMPONENT_NAME}\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-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'data-testid': dataTestId,\n    ...remainingProps\n  } = props;\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n  const ariaLabelingProps = useAriaLabelingProps(restProps);\n  const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);\n\n  return (\n    <span\n      ref={forwardedRef}\n      data-ellipsis\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      className={clsx(styles.ellipsis({ truncationMode }), consumerClassName)}\n      style={consumerStyle}\n      {...ariaLabelingProps}\n      {...behavioralTrackingProps}\n      {...forwardProps}\n      data-dt-component={COMPONENT_NAME}\n    >\n      <span>{children}</span>\n    </span>\n  );\n});\n\n/**\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 * @public\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  COMPONENT_NAME;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  type HTMLAttributes,\n  type RefObject,\n  useLayoutEffect,\n  useRef,\n} from 'react';\n\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useFontsUpdated } from '../../core/hooks/useFontsUpdated.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useResizeObserver } from '../../core/hooks/useResizeObserver.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport type { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.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 { centerEllipsizeText, type Font } from '../utils.js';\nimport * as styles from './TextEllipsis.sty.js';\n\nconst COMPONENT_NAME = 'TextEllipsis';\n\n/**\n * Available modes for how overly long text is truncated and where the ellipsis is placed.\n * @public\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    AriaLabelingProps,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    BehaviorTrackingProps {\n  /** The children (as text) passed to the component. */\n  children: string;\n  /**\n   * The mode used for truncating the text, either at the start, in the middle or at the end.\n   * @defaultValue 'end'\n   */\n  truncationMode?: TruncationMode;\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 innerSpanElement - The HTML element to extract the CSS properties from\n */\nfunction getFontProps(innerSpanElement: HTMLSpanElement): Font {\n  const computedStyle = window.getComputedStyle(innerSpanElement, 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  innerSpanElement: HTMLSpanElement,\n  containerWidth: number,\n): boolean {\n  // Sometimes there already is an ellipsis, which means `getBoundingClientRect().width` and `containerWidth` are the same.\n  // In that case, `scrollWidth` specifies the actual width of the text if it was fully visible.\n  const originalTextWidth = Math.max(\n    innerSpanElement.getBoundingClientRect().width,\n    innerSpanElement.scrollWidth,\n  );\n  const textWidth = Math.floor(originalTextWidth * 100) / 100;\n\n  return textWidth > containerWidth;\n}\n\nfunction resetFullText(\n  innerSpanElement: HTMLSpanElement,\n  originalText: string,\n) {\n  if (innerSpanElement.textContent !== originalText) {\n    innerSpanElement.textContent = originalText;\n  }\n}\n\nfunction getWidth(element: HTMLSpanElement) {\n  return Math.max(element.getBoundingClientRect().width, element.clientWidth);\n}\n\nfunction getContainerWidth(containerElement: HTMLSpanElement) {\n  return Math.ceil(getWidth(containerElement) * 100) / 100;\n}\n\nfunction onTextOverflowCallback(\n  current: boolean,\n  wasEllipsized: boolean,\n  onTextOverflow: ((ellipsized: boolean) => void) | undefined,\n) {\n  if (onTextOverflow && current !== wasEllipsized) {\n    onTextOverflow(current);\n  }\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 the container width\n * @param truncationMode - The mode used 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 *\n * @returns true, if the given text was ellipsized, false otherwise.\n */\nfunction renderEllipsizedText(\n  originalText: string,\n  truncationMode: TextEllipsisProps['truncationMode'],\n  containerRef: RefObject<HTMLSpanElement | null>,\n  wasEllipsized: boolean,\n  onTextOverflow?: (ellipsized: boolean) => void,\n): boolean {\n  const containerElement = containerRef.current;\n\n  const innerSpanElement: HTMLSpanElement | null =\n    (containerElement?.firstElementChild as HTMLSpanElement) || null;\n\n  if (containerElement === null || innerSpanElement === null) {\n    return false;\n  }\n\n  // always reset to full text before measuring container width\n  resetFullText(innerSpanElement, originalText);\n  const containerWidth = getContainerWidth(containerElement);\n\n  if (!isNativeEllipsisActive(innerSpanElement, containerWidth)) {\n    onTextOverflowCallback(false, wasEllipsized, onTextOverflow);\n    return false;\n  }\n\n  if (truncationMode === 'middle') {\n    innerSpanElement.textContent = centerEllipsizeText(\n      originalText,\n      getFontProps(innerSpanElement),\n      containerWidth,\n    );\n  }\n\n  onTextOverflowCallback(true, wasEllipsized, onTextOverflow);\n  return true;\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  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n  const ariaLabelingProps = useAriaLabelingProps(restProps);\n  const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);\n\n  // resize observer is needed to re-calculate the ellipsis in case of resizing\n  const { ref: observerContainerRef, width } =\n    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\n  const fontsUpdated = useFontsUpdated();\n\n  useLayoutEffect(() => {\n    ellipsisStateRef.current = renderEllipsizedText(\n      children,\n      truncationMode,\n      containerRef,\n      ellipsisStateRef.current,\n      onTextOverflow,\n    );\n  }, [width, children, truncationMode, fontsUpdated, onTextOverflow]);\n\n  return (\n    <span\n      ref={mergedRef}\n      className={clsx(\n        styles.ellipsis({ truncationMode }),\n        {\n          [styles.active]: ellipsisStateRef.current,\n        },\n        consumerClassName,\n      )}\n      style={consumerStyle}\n      data-sourcetext={children}\n      data-ellipsis\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      {...ariaLabelingProps}\n      {...behavioralTrackingProps}\n      {...forwardProps}\n      data-dt-component={COMPONENT_NAME}\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-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'data-testid': dataTestId,\n    ...remainingProps\n  } = props;\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n  const ariaLabelingProps = useAriaLabelingProps(restProps);\n  const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);\n\n  return (\n    <span\n      ref={forwardedRef}\n      data-ellipsis\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      className={clsx(styles.ellipsis({ truncationMode }), consumerClassName)}\n      style={consumerStyle}\n      {...ariaLabelingProps}\n      {...behavioralTrackingProps}\n      {...forwardProps}\n      data-dt-component={COMPONENT_NAME}\n    >\n      <span>{children}</span>\n    </span>\n  );\n});\n\n/**\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 * @public\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  COMPONENT_NAME;\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/typography/text-ellipsis/TextEllipsis.sty.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import "./TextEllipsis.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var active = "_1mnpbqs0-3-8-0";
-var ellipsis = _7a468({ defaultClassName: "_1mnpbqs1-3-8-0", variantClassNames: { truncationMode: { start: "_1mnpbqs2-3-8-0", middle: "_1mnpbqs3-3-8-0", end: "_1mnpbqs4-3-8-0" } }, defaultVariants: {}, compoundVariants: [] });
+var active = "_1mnpbqs0-3-9-0";
+var ellipsis = _7a468({ defaultClassName: "_1mnpbqs1-3-9-0", variantClassNames: { truncationMode: { start: "_1mnpbqs2-3-9-0", middle: "_1mnpbqs3-3-9-0", end: "_1mnpbqs4-3-9-0" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   active,
   ellipsis

package/esm/typography/text-ellipsis/TextEllipsis.sty.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/typography/text-ellipsis/TextEllipsis.css.ts"],
-  "sourcesContent": ["import './TextEllipsis.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var active = '_1mnpbqs0-3-8-0';\nexport var ellipsis = _7a468({defaultClassName:'_1mnpbqs1-3-8-0',variantClassNames:{truncationMode:{start:'_1mnpbqs2-3-8-0',middle:'_1mnpbqs3-3-8-0',end:'_1mnpbqs4-3-8-0'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './TextEllipsis.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var active = '_1mnpbqs0-3-9-0';\nexport var ellipsis = _7a468({defaultClassName:'_1mnpbqs1-3-9-0',variantClassNames:{truncationMode:{start:'_1mnpbqs2-3-9-0',middle:'_1mnpbqs3-3-9-0',end:'_1mnpbqs4-3-9-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,SAAS;AACb,IAAI,WAAW,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,gBAAe,EAAC,OAAM,mBAAkB,QAAO,mBAAkB,KAAI,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }