@dynatrace/strato-components 0.84.21 → 0.84.42

package/typography/TextEllipsis/TextEllipsis.js

@@ -0,0 +1,167 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var TextEllipsis_exports = {};
+__export(TextEllipsis_exports, {
+  TextEllipsis: () => TextEllipsis
+});
+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_utils = require("../utils.js");
+function getFontProps(textWrapper) {
+  const computedStyle = window.getComputedStyle(textWrapper, null);
+  return {
+    fontStyle: computedStyle.getPropertyValue("font-style"),
+    fontWeight: computedStyle.getPropertyValue("font-weight"),
+    fontSize: computedStyle.getPropertyValue("font-size"),
+    fontFamily: computedStyle.getPropertyValue("font-family")
+  };
+}
+function isNativeEllipsisActive(textWrapper, containerWidth) {
+  const textWidth = Math.floor(textWrapper.getBoundingClientRect().width * 100) / 100;
+  return textWidth > containerWidth;
+}
+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_utils._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);
+    }
+  }
+  return false;
+}
+const ComputedTextEllipsis = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwardedRef) => {
+  const {
+    children,
+    truncationMode = "end",
+    onTextOverflow,
+    className: consumerClassName,
+    style: consumerStyle,
+    "data-testid": dataTestId,
+    "data-dtrum-mask": dataDtrumMask,
+    "data-dtrum-allow": dataDtrumAllow,
+    ...remainingProps
+  } = props;
+  const { ref: observerContainerRef } = (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)([
+    observerContainerRef,
+    (instance) => {
+      containerRef.current = instance;
+    },
+    forwardedRef
+  ]);
+  const containerWidth = containerRef.current?.getBoundingClientRect().width;
+  const fontsUpdated = (0, import_useFontsUpdated._useFontsUpdated)();
+  (0, import_react.useLayoutEffect)(() => {
+    ellipsisStateRef.current = renderEllipsizedText(
+      children,
+      truncationMode,
+      containerRef,
+      ellipsisStateRef.current,
+      onTextOverflow
+    );
+  }, [containerWidth, children, truncationMode, fontsUpdated, onTextOverflow]);
+  return /* @__PURE__ */ import_react.default.createElement(
+    "span",
+    {
+      ref: mergedRef,
+      "aria-label": children,
+      "data-ellipsis": true,
+      "data-testid": dataTestId,
+      "data-dtrum-mask": dataDtrumMask,
+      "data-dtrum-allow": dataDtrumAllow,
+      className: (0, import_clsx.default)((0, import_TextEllipsis_css.textEllipsisCSS)({ truncationMode }), consumerClassName),
+      style: consumerStyle,
+      ...remainingProps
+    },
+    /* @__PURE__ */ import_react.default.createElement("span", null, children)
+  );
+});
+const CssTextEllipsis = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwardedRef) => {
+  const {
+    children,
+    truncationMode = "end",
+    onTextOverflow,
+    className: consumerClassName,
+    style: consumerStyle,
+    "data-testid": dataTestId,
+    ...remainingProps
+  } = props;
+  return /* @__PURE__ */ import_react.default.createElement(
+    "span",
+    {
+      ref: forwardedRef,
+      "aria-label": children,
+      "data-ellipsis": true,
+      "data-testid": dataTestId,
+      className: (0, import_clsx.default)((0, import_TextEllipsis_css.textEllipsisCSS)({ truncationMode }), consumerClassName),
+      style: consumerStyle,
+      ...remainingProps
+    },
+    /* @__PURE__ */ import_react.default.createElement("span", null, children)
+  );
+});
+const TextEllipsis = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwardedRef) => {
+  const cssOnlyEllipsis = !props.onTextOverflow && props.truncationMode !== "middle";
+  return cssOnlyEllipsis ? /* @__PURE__ */ import_react.default.createElement(CssTextEllipsis, { ref: forwardedRef, ...props }) : /* @__PURE__ */ import_react.default.createElement(ComputedTextEllipsis, { ref: forwardedRef, ...props });
+});
+TextEllipsis.displayName = "TextEllipsis";

package/typography/TextEllipsis/TextEllipsis.sty.d.ts

@@ -0,0 +1,15 @@
+export declare const textEllipsisCSS: import("@vanilla-extract/recipes").RuntimeFn<{
+    truncationMode: {
+        start: {
+            textOverflow: "ellipsis";
+            direction: "rtl";
+            textAlign: "left";
+        };
+        middle: {
+            textOverflow: "clip";
+        };
+        end: {
+            textOverflow: "ellipsis";
+        };
+    };
+}>;

package/typography/TextEllipsis/TextEllipsis.sty.js

@@ -0,0 +1,25 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var TextEllipsis_css_exports = {};
+__export(TextEllipsis_css_exports, {
+  textEllipsisCSS: () => textEllipsisCSS
+});
+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: "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: [] });

package/typography/index.d.ts

@@ -0,0 +1,28 @@
+export { Blockquote } from './BlockQuote/Blockquote.js';
+export type { BlockquoteProps } from './BlockQuote/Blockquote.js';
+export { Code } from './Code/Code.js';
+export type { CodeProps } from './Code/Code.js';
+export { Emphasis } from './Emphasis/Emphasis.js';
+export type { EmphasisProps } from './Emphasis/Emphasis.js';
+export { ExternalLink } from './ExternalLink/ExternalLink.js';
+export type { ExternalLinkProps } from './ExternalLink/ExternalLink.js';
+export { Heading } from './Heading/Heading.js';
+export type { HeadingProps } from './Heading/Heading.js';
+export { Highlight } from './Highlight/Highlight.js';
+export type { HighlightProps } from './Highlight/Highlight.js';
+export { Link } from './Link/Link.js';
+export type { LinkProps } from './Link/Link.js';
+export { List } from './List/List.js';
+export type { ListProps } from './List/List.js';
+export { Paragraph } from './Paragraph/Paragraph.js';
+export type { ParagraphProps } from './Paragraph/Paragraph.js';
+export { Strikethrough } from './Strikethrough/Strikethrough.js';
+export type { StrikethroughProps } from './Strikethrough/Strikethrough.js';
+export { Strong } from './Strong/Strong.js';
+export type { StrongProps } from './Strong/Strong.js';
+export { Text } from './Text/Text.js';
+export type { TextOwnProps, TextProps } from './Text/Text.js';
+export { TextEllipsis } from './TextEllipsis/TextEllipsis.js';
+export type { TextEllipsisProps, _TruncationMode, } from './TextEllipsis/TextEllipsis.js';
+export { _calculateEllipsisInfo, _getTextHeight, _centerEllipsizeText, _getTextWidth, _ELLIPSIS_APPROXIMATION_THRESHOLD, _ELLIPSIS_CHARACTER, } from './utils.js';
+export type { _Font } from './utils.js';

package/typography/index.js

@@ -0,0 +1,54 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var typography_exports = {};
+__export(typography_exports, {
+  Blockquote: () => import_Blockquote.Blockquote,
+  Code: () => import_Code.Code,
+  Emphasis: () => import_Emphasis.Emphasis,
+  ExternalLink: () => import_ExternalLink.ExternalLink,
+  Heading: () => import_Heading.Heading,
+  Highlight: () => import_Highlight.Highlight,
+  Link: () => import_Link.Link,
+  List: () => import_List.List,
+  Paragraph: () => import_Paragraph.Paragraph,
+  Strikethrough: () => import_Strikethrough.Strikethrough,
+  Strong: () => import_Strong.Strong,
+  Text: () => import_Text.Text,
+  TextEllipsis: () => import_TextEllipsis.TextEllipsis,
+  _ELLIPSIS_APPROXIMATION_THRESHOLD: () => import_utils._ELLIPSIS_APPROXIMATION_THRESHOLD,
+  _ELLIPSIS_CHARACTER: () => import_utils._ELLIPSIS_CHARACTER,
+  _calculateEllipsisInfo: () => import_utils._calculateEllipsisInfo,
+  _centerEllipsizeText: () => import_utils._centerEllipsizeText,
+  _getTextHeight: () => import_utils._getTextHeight,
+  _getTextWidth: () => import_utils._getTextWidth
+});
+module.exports = __toCommonJS(typography_exports);
+var import_Blockquote = require("./BlockQuote/Blockquote.js");
+var import_Code = require("./Code/Code.js");
+var import_Emphasis = require("./Emphasis/Emphasis.js");
+var import_ExternalLink = require("./ExternalLink/ExternalLink.js");
+var import_Heading = require("./Heading/Heading.js");
+var import_Highlight = require("./Highlight/Highlight.js");
+var import_Link = require("./Link/Link.js");
+var import_List = require("./List/List.js");
+var import_Paragraph = require("./Paragraph/Paragraph.js");
+var import_Strikethrough = require("./Strikethrough/Strikethrough.js");
+var import_Strong = require("./Strong/Strong.js");
+var import_Text = require("./Text/Text.js");
+var import_TextEllipsis = require("./TextEllipsis/TextEllipsis.js");
+var import_utils = require("./utils.js");

package/typography/utils.d.ts

@@ -0,0 +1,52 @@
+/**
+ * @internal
+ * Properties describing how a piece of text is formatted. */
+export type _Font = {
+    fontStyle?: string;
+    fontWeight?: string;
+    fontSize: string;
+    fontFamily: string;
+};
+/**
+ * @internal
+ * The Unicode character representing an ellipsis. */
+export declare const _ELLIPSIS_CHARACTER = "\u2026";
+/**
+ * @internal
+ * Max iterations for finding the perfect truncated text for a given width */
+export declare const _ELLIPSIS_APPROXIMATION_THRESHOLD = 15;
+/**
+ * Calculates the width of formatted text in pixels.
+ *
+ * @param text - The text to calculate the width of
+ * @param textFont - The font settings for the text
+ * @internal
+ */
+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
+ */
+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.
+ *
+ * @param originalText - The text to be truncated if its width exceeds <code>maxWidthInPx</code>
+ * @param textFont - Different font settings to be considered when determining the width of the text
+ * @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;
+/**
+ * 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): {
+    ellipsisWidth: number;
+    avgLetterWidth: number;
+} | null;

package/typography/utils.js

@@ -0,0 +1,119 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+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
+});
+module.exports = __toCommonJS(utils_exports);
+const _ELLIPSIS_CHARACTER = "\u2026";
+const _ELLIPSIS_APPROXIMATION_THRESHOLD = 15;
+let inMemContext2d;
+function _getTextWidth(text, textFont) {
+  const context = getCanvasContext2d();
+  context.font = getFontString(textFont);
+  const textMetrics = context.measureText(text);
+  if (textMetrics.width < 0) {
+    return textMetrics.width;
+  }
+  const actualTextWidth = Math.abs(textMetrics.actualBoundingBoxLeft) + Math.abs(textMetrics.actualBoundingBoxRight);
+  return Math.ceil(actualTextWidth);
+}
+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(
+    originalText,
+    textFont,
+    maxWidthInPx
+  );
+  if (ellipsisInfo === null) {
+    return originalText;
+  }
+  const { ellipsisWidth, avgLetterWidth } = ellipsisInfo;
+  const availableTextWidth = maxWidthInPx - ellipsisWidth;
+  if (availableTextWidth <= ellipsisWidth) {
+    return _ELLIPSIS_CHARACTER;
+  }
+  const initialPrefixSuffixLength = Math.floor(availableTextWidth / avgLetterWidth / 2) + 1;
+  let prefix;
+  let suffix;
+  let ellipsizedText;
+  let approximatedTextWidth;
+  let attempt = 1;
+  let prefixLength = initialPrefixSuffixLength;
+  let suffixLength = initialPrefixSuffixLength;
+  do {
+    prefixLength -= attempt % 2 === 1 ? 1 : 0;
+    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);
+    attempt++;
+  } while (attempt <= _ELLIPSIS_APPROXIMATION_THRESHOLD && approximatedTextWidth >= maxWidthInPx);
+  return ellipsizedText;
+}
+function getFontString(textFont) {
+  const { fontStyle, fontWeight, fontSize, fontFamily } = textFont;
+  return [
+    fontStyle === "normal" ? "" : fontStyle,
+    fontWeight === "400" ? "" : fontWeight,
+    fontSize,
+    fontFamily
+  ].filter((value) => value !== void 0 && value !== "").map(
+    (value) => (
+      // we need to resolve CSS variables manually because they are not supported by the canvas API
+      value?.trim().startsWith("var(") ? value.replace(/^\s*var\(--[0-9A-Za-z-]+,\s*([^)]+)\)\s*$/, "$1") : value
+    )
+  ).join(" ");
+}
+function _calculateEllipsisInfo(originalText, textFont, maxWidthInPx) {
+  const originalTextLength = originalText.length;
+  if (originalTextLength <= 1) {
+    return null;
+  }
+  const textWidth = _getTextWidth(originalText, textFont);
+  const avgLetterWidth = textWidth / originalTextLength;
+  return textWidth > maxWidthInPx ? {
+    ellipsisWidth: _getTextWidth(_ELLIPSIS_CHARACTER, textFont),
+    avgLetterWidth
+  } : null;
+}
+function getCanvasContext2d() {
+  if (!inMemContext2d) {
+    const context = document.createElement("canvas").getContext("2d");
+    if (context !== null) {
+      context.imageSmoothingEnabled = false;
+      context.imageSmoothingQuality = "low";
+      inMemContext2d = context;
+    } else {
+      throw new Error("Failed to create a Canvas 2D context");
+    }
+  }
+  return inMemContext2d;
+}