@dynatrace/strato-components 1.4.0 → 1.6.0

package/typography/text-ellipsis/TextEllipsis.d.ts

@@ -1,4 +1,4 @@
-import React, { type HTMLAttributes } from 'react';
+import { type HTMLAttributes } from 'react';
 import { type DataTestId } from '../../core/types/data-props.js';
 import { type MaskingProps } from '../../core/types/masking-props.js';
 import { type StylingProps } from '../../core/types/styling-props.js';
@@ -29,4 +29,4 @@ export interface TextEllipsisProps extends HTMLAttributes<HTMLSpanElement>, Styl
  * when writing your own components.
  * @public
  */
-export declare const TextEllipsis: (props: TextEllipsisProps & React.RefAttributes<HTMLSpanElement>) => React.ReactElement | null;
+export declare const TextEllipsis: (props: TextEllipsisProps & import("react").RefAttributes<HTMLSpanElement>) => React.ReactElement | null;

package/typography/text-ellipsis/TextEllipsis.js

@@ -1,3 +1,4 @@
+"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -30,13 +31,14 @@ __export(TextEllipsis_exports, {
   TextEllipsis: () => TextEllipsis
 });
 module.exports = __toCommonJS(TextEllipsis_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_clsx = __toESM(require("clsx"));
-var import_react = __toESM(require("react"));
+var import_react = require("react");
 var import_use_resize_observer = __toESM(require("use-resize-observer"));
 var import_useFontsUpdated = require("../../core/hooks/useFontsUpdated.js");
 var import_useMergeRefs = require("../../core/hooks/useMergeRefs.js");
 var import_utils = require("../utils.js");
-var styles = __toESM(require("./TextEllipsis.sty.js"));
+var import_TextEllipsis_css = require("./TextEllipsis.sty.js");
 function getFontProps(innerSpanElement) {
   const computedStyle = window.getComputedStyle(innerSpanElement, null);
   return {
@@ -124,7 +126,7 @@ const ComputedTextEllipsis = /* @__PURE__ */ (0, import_react.forwardRef)((props
       onTextOverflow
     );
   }, [width, children, truncationMode, fontsUpdated, onTextOverflow]);
-  return /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "span",
     {
       ref: mergedRef,
@@ -134,13 +136,13 @@ const ComputedTextEllipsis = /* @__PURE__ */ (0, import_react.forwardRef)((props
       "data-testid": dataTestId,
       "data-dtrum-mask": dataDtrumMask,
       "data-dtrum-allow": dataDtrumAllow,
-      className: (0, import_clsx.default)(styles.ellipsis({ truncationMode }), consumerClassName, {
-        [styles.isActive]: ellipsisStateRef.current
+      className: (0, import_clsx.default)((0, import_TextEllipsis_css.ellipsisCSS)({ truncationMode }), consumerClassName, {
+        [import_TextEllipsis_css.isActiveCSS]: ellipsisStateRef.current
       }),
       style: consumerStyle,
-      ...remainingProps
-    },
-    /* @__PURE__ */ import_react.default.createElement("span", null, children)
+      ...remainingProps,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children })
+    }
   );
 });
 const CssTextEllipsis = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwardedRef) => {
@@ -153,18 +155,18 @@ const CssTextEllipsis = /* @__PURE__ */ (0, import_react.forwardRef)((props, for
     "data-testid": dataTestId,
     ...remainingProps
   } = props;
-  return /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "span",
     {
       ref: forwardedRef,
       "aria-label": children,
       "data-ellipsis": true,
       "data-testid": dataTestId,
-      className: (0, import_clsx.default)(styles.ellipsis({ truncationMode }), consumerClassName),
+      className: (0, import_clsx.default)((0, import_TextEllipsis_css.ellipsisCSS)({ truncationMode }), consumerClassName),
       style: consumerStyle,
-      ...remainingProps
-    },
-    /* @__PURE__ */ import_react.default.createElement("span", null, children)
+      ...remainingProps,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children })
+    }
   );
 });
 const TextEllipsis = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwardedRef) => {
@@ -172,11 +174,11 @@ const TextEllipsis = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwar
   return cssOnlyEllipsis ? (
     /* eslint-disable-next-line deprecated-jsx-props/deprecated-props -- The plugin can not properly analyze spread props:
     https://github.com/sebakerckhof/eslint-plugin-deprecated-jsx-props?tab=readme-ov-file#configuration, the deprecations here are in the HTMLAttributes type, which is fine. */
-    /* @__PURE__ */ import_react.default.createElement(CssTextEllipsis, { ref: forwardedRef, ...props })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CssTextEllipsis, { ref: forwardedRef, ...props })
   ) : (
     /* eslint-disable-next-line deprecated-jsx-props/deprecated-props -- The plugin can not properly analyze spread props:
     https://github.com/sebakerckhof/eslint-plugin-deprecated-jsx-props?tab=readme-ov-file#configuration, the deprecations here are in the HTMLAttributes type, which is fine. */
-    /* @__PURE__ */ import_react.default.createElement(ComputedTextEllipsis, { ref: forwardedRef, ...props })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ComputedTextEllipsis, { ref: forwardedRef, ...props })
   );
 });
 TextEllipsis.displayName = "TextEllipsis";

package/typography/text-ellipsis/TextEllipsis.sty.d.ts

@@ -1,10 +1,15 @@
-export declare const isActive: string;
-export declare const ellipsis: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const isActiveCSS: string;
+export declare const ellipsisCSS: import("@vanilla-extract/recipes").RuntimeFn<{
     truncationMode: {
         start: {
             textOverflow: "ellipsis";
             direction: "rtl";
             textAlign: "left";
+            selectors: {
+                '&::after': {
+                    content: "‎";
+                };
+            };
         };
         middle: {
             textOverflow: "clip";

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

@@ -1,3 +1,4 @@
+"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -17,11 +18,11 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var TextEllipsis_css_exports = {};
 __export(TextEllipsis_css_exports, {
-  ellipsis: () => ellipsis,
-  isActive: () => isActive
+  ellipsisCSS: () => ellipsisCSS,
+  isActiveCSS: () => isActiveCSS
 });
 module.exports = __toCommonJS(TextEllipsis_css_exports);
 var import_TextEllipsis_css_ts_vanilla = require("./TextEllipsis.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var ellipsis = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1mnpbqs1-1-4-0", variantClassNames: { truncationMode: { start: "_1mnpbqs2-1-4-0", middle: "_1mnpbqs3-1-4-0", end: "_1mnpbqs4-1-4-0" } }, defaultVariants: {}, compoundVariants: [] });
-var isActive = "_1mnpbqs0-1-4-0";
+var ellipsisCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1mnpbqs1-1-6-0", variantClassNames: { truncationMode: { start: "_1mnpbqs2-1-6-0", middle: "_1mnpbqs3-1-6-0", end: "_1mnpbqs4-1-6-0" } }, defaultVariants: {}, compoundVariants: [] });
+var isActiveCSS = "_1mnpbqs0-1-6-0";

package/typography/utils.js

@@ -1,3 +1,4 @@
+"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;