@dynatrace/strato-components 1.14.0 → 1.16.0

package/typography/highlight/utils/create-ranged-highlights.js

@@ -0,0 +1,70 @@
+"use strict";
+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 create_ranged_highlights_exports = {};
+__export(create_ranged_highlights_exports, {
+  createRangedHighlights: () => createRangedHighlights
+});
+module.exports = __toCommonJS(create_ranged_highlights_exports);
+var import_logging = require("../../../core/utils/logging.js");
+function collectTextNodes(node, textNodes = []) {
+  if (node.nodeType === Node.TEXT_NODE) {
+    textNodes.push(node);
+  } else {
+    for (const child of Array.from(node.childNodes)) {
+      collectTextNodes(child, textNodes);
+    }
+  }
+  return textNodes;
+}
+function getTextRangeForHighlight(element, terms, caseSensitive) {
+  const textNodes = collectTextNodes(element);
+  const ranges = [];
+  for (const textNode of textNodes) {
+    const textContent = textNode.textContent ?? "";
+    const searchText = caseSensitive ? textContent : textContent.toLocaleLowerCase();
+    for (const term of terms) {
+      const searchTerm = caseSensitive ? term : term.toLocaleLowerCase();
+      let index = 0;
+      while ((index = searchText.indexOf(searchTerm, index)) !== -1) {
+        const range = new Range();
+        range.setStart(textNode, index);
+        range.setEnd(textNode, index + term.length);
+        ranges.push(range);
+        index += term.length;
+      }
+    }
+  }
+  return ranges;
+}
+function createRangedHighlights(targetElement, terms, caseSensitive, highlight) {
+  const storedRanges = [];
+  if (terms.length === 0) {
+    return storedRanges;
+  }
+  const ranges = getTextRangeForHighlight(targetElement, terms, caseSensitive);
+  for (const range of ranges) {
+    try {
+      highlight.add(range);
+      storedRanges.push(range);
+    } catch {
+      (0, import_logging.devLog)("Failed to add range", range);
+    }
+  }
+  return storedRanges;
+}

package/typography/highlight/utils/get-or-create-shared-highlight.d.ts

@@ -0,0 +1,7 @@
+export declare const HIGHLIGHT_NAME = "strato-typography-highlight";
+/**
+ * Gets or creates the shared text highlight.
+ * All Highlight components share the same highlight instance.
+ * @internal
+ */
+export declare function getOrCreateSharedHighlight(): Set<AbstractRange> | Highlight;

package/typography/highlight/utils/get-or-create-shared-highlight.js

@@ -0,0 +1,44 @@
+"use strict";
+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 get_or_create_shared_highlight_exports = {};
+__export(get_or_create_shared_highlight_exports, {
+  HIGHLIGHT_NAME: () => HIGHLIGHT_NAME,
+  getOrCreateSharedHighlight: () => getOrCreateSharedHighlight
+});
+module.exports = __toCommonJS(get_or_create_shared_highlight_exports);
+var import_logging = require("../../../core/utils/logging.js");
+const HIGHLIGHT_NAME = "strato-typography-highlight";
+let sharedHighlight = null;
+function getOrCreateSharedHighlight() {
+  if (sharedHighlight) {
+    return sharedHighlight;
+  }
+  if ("Highlight" in window) {
+    sharedHighlight = new Highlight();
+    if (sharedHighlight instanceof Highlight) {
+      CSS.highlights.set(HIGHLIGHT_NAME, sharedHighlight);
+    }
+  } else {
+    sharedHighlight = /* @__PURE__ */ new Set();
+    (0, import_logging.devLog)(
+      "CSS Highlight API is not supported in this browser. Text highlighting will not be visible."
+    );
+  }
+  return sharedHighlight;
+}

package/typography/link/Link.css

@@ -1,12 +1,12 @@
-._1iksxp40-1-14-0 {
+._1iksxp40-1-16-0 {
   display: inline;
   color: var(--dt-colors-text-primary-default, #464cce);
   text-decoration: underline;
   overflow-wrap: anywhere;
 }
-._1iksxp40-1-14-0:hover {
+._1iksxp40-1-16-0:hover {
   color: var(--dt-colors-text-primary-default-hover, #3431b3);
 }
-._1iksxp40-1-14-0:active {
+._1iksxp40-1-16-0:active {
   color: var(--dt-colors-text-primary-default-active, #250f98);
 }

package/typography/link/Link.sty.js

@@ -22,4 +22,4 @@ __export(Link_css_exports, {
 });
 module.exports = __toCommonJS(Link_css_exports);
 var import_Link_css_ts_vanilla = require("./Link.css");
-var link = "_1iksxp40-1-14-0";
+var link = "_1iksxp40-1-16-0";

package/typography/list/List.css

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

package/typography/list/List.sty.js

@@ -23,5 +23,5 @@ __export(List_css_exports, {
 });
 module.exports = __toCommonJS(List_css_exports);
 var import_List_css_ts_vanilla = require("./List.css");
-var listCSS = "_16276mt0-1-14-0";
-var listItemCSS = "_16276mt1-1-14-0";
+var listCSS = "_16276mt0-1-16-0";
+var listItemCSS = "_16276mt1-1-16-0";

package/typography/paragraph/Paragraph.css

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

package/typography/paragraph/Paragraph.js

@@ -62,11 +62,7 @@ const Paragraph = /* @__PURE__ */ (0, import_react.forwardRef)((props, ref) => {
       "data-testid": dataTestId,
       "data-dtrum-mask": dataDtrumMask,
       "data-dtrum-allow": dataDtrumAllow,
-      className: (0, import_clsx.default)(
-        (0, import_Paragraph_css.paragraphCSS)({ ellipsis }),
-        (0, import_textStyle_css.textStyleCSS)(),
-        consumerClassName
-      ),
+      className: (0, import_clsx.default)((0, import_Paragraph_css.paragraph)({ ellipsis }), (0, import_textStyle_css.textStyle)(), consumerClassName),
       style: {
         ...consumerStyle,
         "--strato-ellipsis-line-clamp": maxLines

package/typography/paragraph/Paragraph.sty.d.ts

@@ -1,4 +1,4 @@
-export declare const paragraphCSS: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const paragraph: import("@vanilla-extract/recipes").RuntimeFn<{
     ellipsis: {
         singleLine: {
             display: "block";

package/typography/paragraph/Paragraph.sty.js

@@ -18,9 +18,9 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var Paragraph_css_exports = {};
 __export(Paragraph_css_exports, {
-  paragraphCSS: () => paragraphCSS
+  paragraph: () => paragraph
 });
 module.exports = __toCommonJS(Paragraph_css_exports);
 var import_Paragraph_css_ts_vanilla = require("./Paragraph.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var paragraphCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_487p2n0-1-14-0", variantClassNames: { ellipsis: { singleLine: "_487p2n1-1-14-0", multiLine: "_487p2n2-1-14-0" } }, defaultVariants: {}, compoundVariants: [] });
+var paragraph = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_487p2n0-1-16-0", variantClassNames: { ellipsis: { singleLine: "_487p2n1-1-16-0", multiLine: "_487p2n2-1-16-0" } }, defaultVariants: {}, compoundVariants: [] });

package/typography/strikethrough/Strikethrough.css

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

package/typography/strikethrough/Strikethrough.sty.js

@@ -22,4 +22,4 @@ __export(Strikethrough_css_exports, {
 });
 module.exports = __toCommonJS(Strikethrough_css_exports);
 var import_Strikethrough_css_ts_vanilla = require("./Strikethrough.css");
-var strikethroughCSS = "_4oao6y0-1-14-0";
+var strikethroughCSS = "_4oao6y0-1-16-0";

package/typography/strong/Strong.css

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

package/typography/strong/Strong.sty.js

@@ -22,4 +22,4 @@ __export(Strong_css_exports, {
 });
 module.exports = __toCommonJS(Strong_css_exports);
 var import_Strong_css_ts_vanilla = require("./Strong.css");
-var strongCSS = "_wxp4dd0-1-14-0";
+var strongCSS = "_wxp4dd0-1-16-0";

package/typography/text/Text.css

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

package/typography/text/Text.js

@@ -39,7 +39,7 @@ var import_textStyle_css = require("../../styles/textStyle.sty.js");
 const Text = /* @__PURE__ */ (0, import_react.forwardRef)(
   ({
     children,
-    textStyle,
+    textStyle: textStyleProp,
     fontStyle,
     as,
     className: consumerClassName,
@@ -59,8 +59,8 @@ const Text = /* @__PURE__ */ (0, import_react.forwardRef)(
         "data-dtrum-allow": dataDtrumAllow,
         ref,
         className: (0, import_clsx.default)([
-          (0, import_Text_css.textCSS)({ ellipsis }),
-          (fontStyle || textStyle) && (0, import_textStyle_css.textStyleCSS)({ fontStyle, textStyle }),
+          (0, import_Text_css.text)({ ellipsis }),
+          (fontStyle || textStyleProp) && (0, import_textStyle_css.textStyle)({ fontStyle, textStyle: textStyleProp }),
           consumerClassName
         ]),
         style: consumerStyle,

package/typography/text/Text.sty.d.ts

@@ -1,4 +1,4 @@
-export declare const textCSS: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const text: import("@vanilla-extract/recipes").RuntimeFn<{
     ellipsis: {
         singleLine: {
             display: "block";

package/typography/text/Text.sty.js

@@ -18,9 +18,9 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var Text_css_exports = {};
 __export(Text_css_exports, {
-  textCSS: () => textCSS
+  text: () => text
 });
 module.exports = __toCommonJS(Text_css_exports);
 var import_Text_css_ts_vanilla = require("./Text.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var textCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_rup8ap0-1-14-0", variantClassNames: { ellipsis: { singleLine: "_rup8ap1-1-14-0", multiLine: "_rup8ap2-1-14-0" } }, defaultVariants: {}, compoundVariants: [] });
+var text = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_rup8ap0-1-16-0", variantClassNames: { ellipsis: { singleLine: "_rup8ap1-1-16-0", multiLine: "_rup8ap2-1-16-0" } }, defaultVariants: {}, compoundVariants: [] });

package/typography/text-ellipsis/TextEllipsis.css

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

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

@@ -24,5 +24,5 @@ __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 active = "_1mnpbqs0-1-14-0";
-var ellipsis = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1mnpbqs1-1-14-0", variantClassNames: { truncationMode: { start: "_1mnpbqs2-1-14-0", middle: "_1mnpbqs3-1-14-0", end: "_1mnpbqs4-1-14-0" } }, defaultVariants: {}, compoundVariants: [] });
+var active = "_1mnpbqs0-1-16-0";
+var ellipsis = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1mnpbqs1-1-16-0", variantClassNames: { truncationMode: { start: "_1mnpbqs2-1-16-0", middle: "_1mnpbqs3-1-16-0", end: "_1mnpbqs4-1-16-0" } }, defaultVariants: {}, compoundVariants: [] });

package/typography/utils.js

@@ -27,9 +27,17 @@ __export(utils_exports, {
 });
 module.exports = __toCommonJS(utils_exports);
 var import_user_preferences = require("@dynatrace-sdk/user-preferences");
-const localizedSegmenter = new Intl.Segmenter((0, import_user_preferences.getLanguage)(), {
-  granularity: "grapheme"
-});
+let localizedSegmenter;
+function getLocalizedSegmenter() {
+  if (localizedSegmenter) {
+    return localizedSegmenter;
+  }
+  const segmenter = new Intl.Segmenter((0, import_user_preferences.getLanguage)(), {
+    granularity: "grapheme"
+  });
+  localizedSegmenter = segmenter;
+  return localizedSegmenter;
+}
 const ELLIPSIS_CHARACTER = "\u2026";
 const ELLIPSIS_APPROXIMATION_THRESHOLD = 15;
 let inMemContext2d;
@@ -72,9 +80,10 @@ function centerEllipsizeText(originalText, textFont, maxWidthInPx) {
   let attempt = 1;
   let prefixLength = initialPrefixSuffixLength;
   let suffixLength = initialPrefixSuffixLength;
-  const originalSegmentedText = Array.from(
-    localizedSegmenter.segment(originalText)
-  ).map((segment) => segment.segment);
+  const segmenter = getLocalizedSegmenter();
+  const originalSegmentedText = Array.from(segmenter.segment(originalText)).map(
+    (segment) => segment.segment
+  );
   do {
     const originalSegmentedTextCopy = [...originalSegmentedText];
     prefixLength -= attempt % 2 === 1 ? 1 : 0;
@@ -102,9 +111,8 @@ function getFontString(textFont) {
   ).join(" ");
 }
 function calculateEllipsisInfo(originalText, textFont, maxWidthInPx) {
-  const originalTextLength = Array.from(
-    localizedSegmenter.segment(originalText)
-  ).length;
+  const segmenter = getLocalizedSegmenter();
+  const originalTextLength = Array.from(segmenter.segment(originalText)).length;
   if (originalTextLength <= 1) {
     return null;
   }