@dynatrace/strato-components 0.85.100 → 0.85.120

package/typography/text-ellipsis/TextEllipsis.js

@@ -33,12 +33,12 @@ module.exports = __toCommonJS(TextEllipsis_exports);
 var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
 var import_use_resize_observer = __toESM(require("use-resize-observer"));
-var import_TextEllipsis_css = require("./TextEllipsis.sty.js");
 var import_useFontsUpdated = require("../../core/hooks/useFontsUpdated.js");
 var import_useMergeRefs = require("../../core/hooks/useMergeRefs.js");
-var import_utils2 = require("../utils.js");
-function getFontProps(textWrapper) {
-  const computedStyle = window.getComputedStyle(textWrapper, null);
+var import_utils = require("../utils.js");
+var import_TextEllipsis_css = require("./TextEllipsis.sty.js");
+function getFontProps(innerSpanElement) {
+  const computedStyle = window.getComputedStyle(innerSpanElement, null);
   return {
     fontStyle: computedStyle.getPropertyValue("font-style"),
     fontWeight: computedStyle.getPropertyValue("font-weight"),
@@ -46,50 +46,51 @@ function getFontProps(textWrapper) {
     fontFamily: computedStyle.getPropertyValue("font-family")
   };
 }
-function isNativeEllipsisActive(textWrapper, containerWidth) {
+function isNativeEllipsisActive(innerSpanElement, containerWidth) {
   const originalTextWidth = Math.max(
-    textWrapper.getBoundingClientRect().width,
-    textWrapper.scrollWidth
+    innerSpanElement.getBoundingClientRect().width,
+    innerSpanElement.scrollWidth
   );
   const textWidth = Math.floor(originalTextWidth * 100) / 100;
   return textWidth > containerWidth;
 }
+function resetFullText(innerSpanElement, originalText) {
+  if (innerSpanElement.textContent !== originalText) {
+    innerSpanElement.textContent = originalText;
+  }
+}
+function getWidth(element) {
+  return Math.max(element.getBoundingClientRect().width, element.clientWidth);
+}
+function getContainerWidth(containerElement) {
+  return Math.ceil(getWidth(containerElement) * 100) / 100;
+}
+function onTextOverflowCallback(current, wasEllipsized, onTextOverflow) {
+  if (onTextOverflow && current !== wasEllipsized) {
+    onTextOverflow(current);
+  }
+}
 function renderEllipsizedText(originalText, truncationMode, containerRef, wasEllipsized, onTextOverflow) {
   const containerElement = containerRef.current;
-  const textWrapper = containerElement?.firstElementChild || null;
-  if (containerElement !== null && textWrapper !== null) {
-    if (textWrapper.textContent !== originalText) {
-      textWrapper.textContent = originalText;
-    }
-    const containerWidth = Math.ceil(containerElement.getBoundingClientRect().width * 100) / 100;
-    if (truncationMode === "middle") {
-      if (isNativeEllipsisActive(textWrapper, containerWidth)) {
-        const ellipsizedText = (0, import_utils2._centerEllipsizeText)(
-          originalText,
-          getFontProps(textWrapper),
-          containerWidth
-        );
-        textWrapper.textContent = ellipsizedText;
-        if (ellipsizedText !== originalText) {
-          if (onTextOverflow && !wasEllipsized) {
-            onTextOverflow(true);
-          }
-          return true;
-        }
-      }
-      if (onTextOverflow && wasEllipsized) {
-        onTextOverflow(false);
-      }
-    } else if (isNativeEllipsisActive(textWrapper, containerWidth)) {
-      if (onTextOverflow && !wasEllipsized) {
-        onTextOverflow(true);
-      }
-      return true;
-    } else if (onTextOverflow && wasEllipsized) {
-      onTextOverflow(false);
-    }
+  const innerSpanElement = containerElement?.firstElementChild || null;
+  if (containerElement === null || innerSpanElement === null) {
+    return false;
+  }
+  resetFullText(innerSpanElement, originalText);
+  const containerWidth = getContainerWidth(containerElement);
+  if (!isNativeEllipsisActive(innerSpanElement, containerWidth)) {
+    onTextOverflowCallback(false, wasEllipsized, onTextOverflow);
+    return false;
+  }
+  if (truncationMode === "middle") {
+    innerSpanElement.textContent = (0, import_utils.centerEllipsizeText)(
+      originalText,
+      getFontProps(innerSpanElement),
+      containerWidth
+    );
   }
-  return false;
+  onTextOverflowCallback(true, wasEllipsized, onTextOverflow);
+  return true;
 }
 const ComputedTextEllipsis = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwardedRef) => {
   const {
@@ -103,7 +104,7 @@ const ComputedTextEllipsis = /* @__PURE__ */ (0, import_react.forwardRef)((props
     "data-dtrum-allow": dataDtrumAllow,
     ...remainingProps
   } = props;
-  const { ref: observerContainerRef } = (0, import_use_resize_observer.default)();
+  const { ref: observerContainerRef, width } = (0, import_use_resize_observer.default)();
   const containerRef = (0, import_react.useRef)(null);
   const ellipsisStateRef = (0, import_react.useRef)(false);
   const mergedRef = (0, import_useMergeRefs.useMergeRefs)([
@@ -113,8 +114,7 @@ const ComputedTextEllipsis = /* @__PURE__ */ (0, import_react.forwardRef)((props
     },
     forwardedRef
   ]);
-  const containerWidth = containerRef.current?.getBoundingClientRect().width;
-  const fontsUpdated = (0, import_useFontsUpdated._useFontsUpdated)();
+  const fontsUpdated = (0, import_useFontsUpdated.useFontsUpdated)();
   (0, import_react.useLayoutEffect)(() => {
     ellipsisStateRef.current = renderEllipsizedText(
       children,
@@ -123,7 +123,7 @@ const ComputedTextEllipsis = /* @__PURE__ */ (0, import_react.forwardRef)((props
       ellipsisStateRef.current,
       onTextOverflow
     );
-  }, [containerWidth, children, truncationMode, fontsUpdated, onTextOverflow]);
+  }, [width, children, truncationMode, fontsUpdated, onTextOverflow]);
   return /* @__PURE__ */ import_react.default.createElement(
     "span",
     {

package/typography/text-ellipsis/TextEllipsis.sty.js

@@ -22,4 +22,4 @@ __export(TextEllipsis_css_exports, {
 module.exports = __toCommonJS(TextEllipsis_css_exports);
 var import_TextEllipsis_css_ts_vanilla = require("./TextEllipsis.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var textEllipsisCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1mnpbqs0-0-85-100", variantClassNames: { truncationMode: { start: "_1mnpbqs1-0-85-100", middle: "_1mnpbqs2-0-85-100", end: "_1mnpbqs3-0-85-100" } }, defaultVariants: {}, compoundVariants: [] });
+var textEllipsisCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1mnpbqs0-0-85-120", variantClassNames: { truncationMode: { start: "_1mnpbqs1-0-85-120", middle: "_1mnpbqs2-0-85-120", end: "_1mnpbqs3-0-85-120" } }, defaultVariants: {}, compoundVariants: [] });

package/typography/utils.d.ts

@@ -1,20 +1,23 @@
 /**
+ * Properties describing how a piece of text is formatted.
  * @internal
- * Properties describing how a piece of text is formatted. */
-export type _Font = {
+ */
+export type Font = {
     fontStyle?: string;
     fontWeight?: string;
     fontSize: string;
     fontFamily: string;
 };
 /**
+ * The Unicode character representing an ellipsis.
  * @internal
- * The Unicode character representing an ellipsis. */
-export declare const _ELLIPSIS_CHARACTER = "\u2026";
+ */
+export declare const ELLIPSIS_CHARACTER = "\u2026";
 /**
+ * Max iterations for finding the perfect truncated text for a given width
  * @internal
- * Max iterations for finding the perfect truncated text for a given width */
-export declare const _ELLIPSIS_APPROXIMATION_THRESHOLD = 15;
+ */
+export declare const ELLIPSIS_APPROXIMATION_THRESHOLD = 15;
 /**
  * Calculates the width of formatted text in pixels.
  *
@@ -22,14 +25,14 @@ export declare const _ELLIPSIS_APPROXIMATION_THRESHOLD = 15;
  * @param textFont - The font settings for the text
  * @internal
  */
-export declare function _getTextWidth(text: string, textFont: _Font): number;
+export declare function getTextWidth(text: string, textFont: Font): number;
 /**
- * @internal
  * Calculates the height of formatted text in pixels.
  * @param text - The text to calculate the height of
  * @param textFont - The font settings for the text
+ * @internal
  */
-export declare function _getTextHeight(text: string, textFont: _Font): number;
+export declare function getTextHeight(text: string, textFont: Font): number;
 /**
  * Cuts off text that exceeds the maximum width in the center and
  * concatenates both shortened ends of the text with an ellipsis.
@@ -39,14 +42,14 @@ export declare function _getTextHeight(text: string, textFont: _Font): number;
  * @param maxWidthInPx - If the text's width exceeds this value, the text will be truncated to a string whose width is guaranteed to be below it
  * @internal
  */
-export declare function _centerEllipsizeText(originalText: string, textFont: _Font, maxWidthInPx: number): string;
+export declare function centerEllipsizeText(originalText: string, textFont: Font, maxWidthInPx: number): string;
 /**
  * Returns an object containing the width of a given formatted text and the
  * width of an ellipsis character with the same text format or `null`
  * if the text width does not exceed its maximum available width.
  * @internal
  */
-export declare function _calculateEllipsisInfo(originalText: string, textFont: _Font, maxWidthInPx: number): {
+export declare function calculateEllipsisInfo(originalText: string, textFont: Font, maxWidthInPx: number): {
     ellipsisWidth: number;
     avgLetterWidth: number;
 } | null;

package/typography/utils.js

@@ -17,18 +17,18 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var utils_exports = {};
 __export(utils_exports, {
-  _ELLIPSIS_APPROXIMATION_THRESHOLD: () => _ELLIPSIS_APPROXIMATION_THRESHOLD,
-  _ELLIPSIS_CHARACTER: () => _ELLIPSIS_CHARACTER,
-  _calculateEllipsisInfo: () => _calculateEllipsisInfo,
-  _centerEllipsizeText: () => _centerEllipsizeText,
-  _getTextHeight: () => _getTextHeight,
-  _getTextWidth: () => _getTextWidth
+  ELLIPSIS_APPROXIMATION_THRESHOLD: () => ELLIPSIS_APPROXIMATION_THRESHOLD,
+  ELLIPSIS_CHARACTER: () => ELLIPSIS_CHARACTER,
+  calculateEllipsisInfo: () => calculateEllipsisInfo,
+  centerEllipsizeText: () => centerEllipsizeText,
+  getTextHeight: () => getTextHeight,
+  getTextWidth: () => getTextWidth
 });
 module.exports = __toCommonJS(utils_exports);
-const _ELLIPSIS_CHARACTER = "\u2026";
-const _ELLIPSIS_APPROXIMATION_THRESHOLD = 15;
+const ELLIPSIS_CHARACTER = "\u2026";
+const ELLIPSIS_APPROXIMATION_THRESHOLD = 15;
 let inMemContext2d;
-function _getTextWidth(text, textFont) {
+function getTextWidth(text, textFont) {
   const context = getCanvasContext2d();
   context.font = getFontString(textFont);
   const textMetrics = context.measureText(text);
@@ -38,15 +38,15 @@ function _getTextWidth(text, textFont) {
   const actualTextWidth = Math.abs(textMetrics.actualBoundingBoxLeft) + Math.abs(textMetrics.actualBoundingBoxRight);
   return Math.ceil(actualTextWidth);
 }
-function _getTextHeight(text, textFont) {
+function getTextHeight(text, textFont) {
   const context = getCanvasContext2d();
   context.font = getFontString(textFont);
   const textMetrics = context.measureText(text);
   const actualTextHeight = Math.abs(textMetrics.actualBoundingBoxAscent) + Math.abs(textMetrics.actualBoundingBoxDescent);
   return Math.ceil(actualTextHeight);
 }
-function _centerEllipsizeText(originalText, textFont, maxWidthInPx) {
-  const ellipsisInfo = _calculateEllipsisInfo(
+function centerEllipsizeText(originalText, textFont, maxWidthInPx) {
+  const ellipsisInfo = calculateEllipsisInfo(
     originalText,
     textFont,
     maxWidthInPx
@@ -57,7 +57,7 @@ function _centerEllipsizeText(originalText, textFont, maxWidthInPx) {
   const { ellipsisWidth, avgLetterWidth } = ellipsisInfo;
   const availableTextWidth = maxWidthInPx - ellipsisWidth;
   if (availableTextWidth <= ellipsisWidth) {
-    return _ELLIPSIS_CHARACTER;
+    return ELLIPSIS_CHARACTER;
   }
   const initialPrefixSuffixLength = Math.floor(availableTextWidth / avgLetterWidth / 2) + 1;
   let prefix;
@@ -72,10 +72,10 @@ function _centerEllipsizeText(originalText, textFont, maxWidthInPx) {
     suffixLength -= attempt % 2 === 0 ? 1 : 0;
     prefix = originalText.substring(0, prefixLength);
     suffix = originalText.substring(originalText.length - suffixLength);
-    ellipsizedText = `${prefix}${_ELLIPSIS_CHARACTER}${suffix}`;
-    approximatedTextWidth = _getTextWidth(ellipsizedText, textFont);
+    ellipsizedText = `${prefix}${ELLIPSIS_CHARACTER}${suffix}`;
+    approximatedTextWidth = getTextWidth(ellipsizedText, textFont);
     attempt++;
-  } while (attempt <= _ELLIPSIS_APPROXIMATION_THRESHOLD && approximatedTextWidth >= maxWidthInPx);
+  } while (attempt <= ELLIPSIS_APPROXIMATION_THRESHOLD && approximatedTextWidth >= maxWidthInPx);
   return ellipsizedText;
 }
 function getFontString(textFont) {
@@ -92,15 +92,15 @@ function getFontString(textFont) {
     )
   ).join(" ");
 }
-function _calculateEllipsisInfo(originalText, textFont, maxWidthInPx) {
+function calculateEllipsisInfo(originalText, textFont, maxWidthInPx) {
   const originalTextLength = originalText.length;
   if (originalTextLength <= 1) {
     return null;
   }
-  const textWidth = _getTextWidth(originalText, textFont);
+  const textWidth = getTextWidth(originalText, textFont);
   const avgLetterWidth = textWidth / originalTextLength;
   return textWidth > maxWidthInPx ? {
-    ellipsisWidth: _getTextWidth(_ELLIPSIS_CHARACTER, textFont),
+    ellipsisWidth: getTextWidth(ELLIPSIS_CHARACTER, textFont),
     avgLetterWidth
   } : null;
 }