@dynatrace/strato-components 0.85.60 → 0.85.70

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 (33) hide show
  1. package/buttons/intent-button/useIntentButton.js +4 -1
  2. package/core/utils/isBrowser.js +3 -1
  3. package/esm/buttons/intent-button/useIntentButton.js +4 -1
  4. package/esm/buttons/intent-button/useIntentButton.js.map +2 -2
  5. package/esm/core/utils/isBrowser.js +3 -1
  6. package/esm/core/utils/isBrowser.js.map +2 -2
  7. package/esm/typography/highlight/Highlight.js.map +2 -2
  8. package/esm/typography/text-ellipsis/TextEllipsis.js +9 -1
  9. package/esm/typography/text-ellipsis/TextEllipsis.js.map +2 -2
  10. package/package.json +1 -1
  11. package/testing/custom-render.d.ts +3 -1
  12. package/testing/jest/jest-preset.d.ts +3 -0
  13. package/testing/jest/jest-preset.js +3 -0
  14. package/testing/mocks/bounding-client-rect-mock.d.ts +6 -2
  15. package/testing/mocks/canvas-mock.d.ts +4 -1
  16. package/testing/mocks/create-mock-element.d.ts +3 -1
  17. package/testing/mocks/create-range-mock.d.ts +4 -1
  18. package/testing/mocks/dom-rect-mock.d.ts +8 -1
  19. package/testing/mocks/fetch-mock.d.ts +4 -1
  20. package/testing/mocks/intersection-observer-mock.d.ts +4 -1
  21. package/testing/mocks/match-media-mock.d.ts +4 -1
  22. package/testing/mocks/offset-height-mock.d.ts +6 -2
  23. package/testing/mocks/offset-width-mock.d.ts +6 -2
  24. package/testing/mocks/pointer-event-mock.d.ts +6 -2
  25. package/testing/mocks/resize-observer-mock.d.ts +6 -2
  26. package/testing/mocks/screen-size-mock.d.ts +6 -2
  27. package/testing/mocks/scroll-into-view-mock.d.ts +2 -0
  28. package/testing/mocks/scroll-width-mock.d.ts +6 -2
  29. package/testing/mocks/select-mock.d.ts +1 -0
  30. package/testing/mocks/table-virtualization-mock.d.ts +4 -1
  31. package/testing/mocks/text-ellipsis-mock.d.ts +6 -2
  32. package/testing/setup.d.ts +6 -2
  33. package/typography/text-ellipsis/TextEllipsis.js +9 -1
@@ -32,7 +32,10 @@ function useIntentButton(payload, appId, intentId, onClickProp) {
32
32
  [appId, intentId, payload]
33
33
  );
34
34
  const triggerIntent = (0, import_react.useCallback)(() => {
35
- appId && intentId ? (0, import_navigation.sendIntent)(payload, appId, intentId) : (0, import_navigation.sendIntent)(payload);
35
+ appId && intentId ? (0, import_navigation.sendIntent)(payload, {
36
+ recommendedAppId: appId,
37
+ recommendedIntentId: intentId
38
+ }) : (0, import_navigation.sendIntent)(payload);
36
39
  }, [appId, intentId, payload]);
37
40
  const onClick = (0, import_react.useCallback)(
38
41
  (event) => {
@@ -21,5 +21,7 @@ __export(isBrowser_exports, {
21
21
  });
22
22
  module.exports = __toCommonJS(isBrowser_exports);
23
23
  const isBrowser = (() => {
24
- return !!(typeof window !== "undefined" && window.document && window.document.createElement);
24
+ return !!(typeof window !== "undefined" && window.document && /* eslint-disable-next-line deprecation/deprecation --
25
+ one overload of createElement is deprecated, apparently our plugin does not get that */
26
+ window.document.createElement);
25
27
  })();
@@ -13,7 +13,10 @@ function useIntentButton(payload, appId, intentId, onClickProp) {
13
13
  [appId, intentId, payload]
14
14
  );
15
15
  const triggerIntent = useCallback(() => {
16
- appId && intentId ? sendIntent(payload, appId, intentId) : sendIntent(payload);
16
+ appId && intentId ? sendIntent(payload, {
17
+ recommendedAppId: appId,
18
+ recommendedIntentId: intentId
19
+ }) : sendIntent(payload);
17
20
  }, [appId, intentId, payload]);
18
21
  const onClick = useCallback(
19
22
  (event) => {
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/buttons/intent-button/useIntentButton.ts"],
4
- "sourcesContent": ["import { useCallback, useMemo } from 'react';\n\nimport {\n getIntentLink,\n type IntentPayload,\n sendIntent,\n} from '@dynatrace-sdk/navigation';\n\n/**\n * return shared intent button logic\n * @param payload - an intent payload\n * @returns intentLink and triggerIntent\n * @internal\n */\nexport function useIntentButton(\n payload: IntentPayload,\n appId?: string,\n intentId?: string,\n onClickProp?: React.MouseEventHandler,\n) {\n /**\n * Contains the url created via the getIntentLink SDK method.\n * @returns a url to be used\n */\n const href = useMemo(\n () =>\n // SDK documentation is invalid. appId & intentId are in fact mandatory.\n // This is why the ternary is necessary to ensure to call the correct signature.\n appId && intentId\n ? getIntentLink(payload, appId, intentId)\n : getIntentLink(payload),\n [appId, intentId, payload],\n );\n\n /**\n * Sends intent to shell.\n * @returns void\n */\n const triggerIntent = useCallback(() => {\n // SDK documentation is invalid. appId & intentId are in fact mandatory.\n // This is why the ternary is necessary to ensure to call the correct signature.\n appId && intentId\n ? sendIntent(payload, appId, intentId)\n : sendIntent(payload);\n }, [appId, intentId, payload]);\n\n /**\n * Mouse event handler, send intent on left button click without using any modifiers.\n */\n const onClick = useCallback(\n (event: React.MouseEvent) => {\n onClickProp?.(event);\n if (event.isDefaultPrevented()) {\n // already handled\n return;\n }\n\n const nativeEvent = event.nativeEvent;\n\n if (\n nativeEvent.button !== 0 ||\n nativeEvent.metaKey ||\n nativeEvent.ctrlKey ||\n nativeEvent.shiftKey\n ) {\n return; // let the browser handle the event\n }\n\n event.preventDefault();\n triggerIntent();\n },\n [onClickProp, triggerIntent],\n );\n\n /**\n * KeyDown event handler, sent intent on Space and ENTER\n */\n const onKeyDown = useCallback(\n (event: React.KeyboardEvent) => {\n const nativeEvent = event.nativeEvent;\n\n if (nativeEvent.code !== 'Space' && nativeEvent.code !== 'Enter') {\n return; // let the browser handle the event\n }\n\n event.preventDefault();\n\n // open intent link in new tab while pressing ctrl/meta\n if (nativeEvent.metaKey || nativeEvent.ctrlKey) {\n window.open(href);\n return;\n }\n\n // open intent link in new window\n if (nativeEvent.shiftKey) {\n window.open(href, '_blank', 'menubar');\n return;\n }\n\n // let the shell handle the intent\n triggerIntent();\n },\n [href, triggerIntent],\n );\n\n return { href, onClick, onKeyDown };\n}\n"],
5
- "mappings": "AAAA,SAAS,aAAa,eAAe;AAErC;AAAA,EACE;AAAA,EAEA;AAAA,OACK;AAQA,SAAS,gBACd,SACA,OACA,UACA,aACA;AAKA,QAAM,OAAO;AAAA,IACX;AAAA;AAAA;AAAA,MAGE,SAAS,WACL,cAAc,SAAS,OAAO,QAAQ,IACtC,cAAc,OAAO;AAAA;AAAA,IAC3B,CAAC,OAAO,UAAU,OAAO;AAAA,EAC3B;AAMA,QAAM,gBAAgB,YAAY,MAAM;AAGtC,aAAS,WACL,WAAW,SAAS,OAAO,QAAQ,IACnC,WAAW,OAAO;AAAA,EACxB,GAAG,CAAC,OAAO,UAAU,OAAO,CAAC;AAK7B,QAAM,UAAU;AAAA,IACd,CAAC,UAA4B;AAC3B,oBAAc,KAAK;AACnB,UAAI,MAAM,mBAAmB,GAAG;AAE9B;AAAA,MACF;AAEA,YAAM,cAAc,MAAM;AAE1B,UACE,YAAY,WAAW,KACvB,YAAY,WACZ,YAAY,WACZ,YAAY,UACZ;AACA;AAAA,MACF;AAEA,YAAM,eAAe;AACrB,oBAAc;AAAA,IAChB;AAAA,IACA,CAAC,aAAa,aAAa;AAAA,EAC7B;AAKA,QAAM,YAAY;AAAA,IAChB,CAAC,UAA+B;AAC9B,YAAM,cAAc,MAAM;AAE1B,UAAI,YAAY,SAAS,WAAW,YAAY,SAAS,SAAS;AAChE;AAAA,MACF;AAEA,YAAM,eAAe;AAGrB,UAAI,YAAY,WAAW,YAAY,SAAS;AAC9C,eAAO,KAAK,IAAI;AAChB;AAAA,MACF;AAGA,UAAI,YAAY,UAAU;AACxB,eAAO,KAAK,MAAM,UAAU,SAAS;AACrC;AAAA,MACF;AAGA,oBAAc;AAAA,IAChB;AAAA,IACA,CAAC,MAAM,aAAa;AAAA,EACtB;AAEA,SAAO,EAAE,MAAM,SAAS,UAAU;AACpC;",
4
+ "sourcesContent": ["import { useCallback, useMemo } from 'react';\n\nimport {\n getIntentLink,\n type IntentPayload,\n sendIntent,\n} from '@dynatrace-sdk/navigation';\n\n/**\n * return shared intent button logic\n * @param payload - an intent payload\n * @returns intentLink and triggerIntent\n * @internal\n */\nexport function useIntentButton(\n payload: IntentPayload,\n appId?: string,\n intentId?: string,\n onClickProp?: React.MouseEventHandler,\n) {\n /**\n * Contains the url created via the getIntentLink SDK method.\n * @returns a url to be used\n */\n const href = useMemo(\n () =>\n // SDK documentation is invalid. appId & intentId are in fact mandatory.\n // This is why the ternary is necessary to ensure to call the correct signature.\n appId && intentId\n ? getIntentLink(payload, appId, intentId)\n : getIntentLink(payload),\n [appId, intentId, payload],\n );\n\n /**\n * Sends intent to shell.\n * @returns void\n */\n const triggerIntent = useCallback(() => {\n // SDK documentation is invalid. appId & intentId are in fact mandatory.\n // This is why the ternary is necessary to ensure to call the correct signature.\n appId && intentId\n ? sendIntent(payload, {\n recommendedAppId: appId,\n recommendedIntentId: intentId,\n })\n : sendIntent(payload);\n }, [appId, intentId, payload]);\n\n /**\n * Mouse event handler, send intent on left button click without using any modifiers.\n */\n const onClick = useCallback(\n (event: React.MouseEvent) => {\n onClickProp?.(event);\n if (event.isDefaultPrevented()) {\n // already handled\n return;\n }\n\n const nativeEvent = event.nativeEvent;\n\n if (\n nativeEvent.button !== 0 ||\n nativeEvent.metaKey ||\n nativeEvent.ctrlKey ||\n nativeEvent.shiftKey\n ) {\n return; // let the browser handle the event\n }\n\n event.preventDefault();\n triggerIntent();\n },\n [onClickProp, triggerIntent],\n );\n\n /**\n * KeyDown event handler, sent intent on Space and ENTER\n */\n const onKeyDown = useCallback(\n (event: React.KeyboardEvent) => {\n const nativeEvent = event.nativeEvent;\n\n if (nativeEvent.code !== 'Space' && nativeEvent.code !== 'Enter') {\n return; // let the browser handle the event\n }\n\n event.preventDefault();\n\n // open intent link in new tab while pressing ctrl/meta\n if (nativeEvent.metaKey || nativeEvent.ctrlKey) {\n window.open(href);\n return;\n }\n\n // open intent link in new window\n if (nativeEvent.shiftKey) {\n window.open(href, '_blank', 'menubar');\n return;\n }\n\n // let the shell handle the intent\n triggerIntent();\n },\n [href, triggerIntent],\n );\n\n return { href, onClick, onKeyDown };\n}\n"],
5
+ "mappings": "AAAA,SAAS,aAAa,eAAe;AAErC;AAAA,EACE;AAAA,EAEA;AAAA,OACK;AAQA,SAAS,gBACd,SACA,OACA,UACA,aACA;AAKA,QAAM,OAAO;AAAA,IACX;AAAA;AAAA;AAAA,MAGE,SAAS,WACL,cAAc,SAAS,OAAO,QAAQ,IACtC,cAAc,OAAO;AAAA;AAAA,IAC3B,CAAC,OAAO,UAAU,OAAO;AAAA,EAC3B;AAMA,QAAM,gBAAgB,YAAY,MAAM;AAGtC,aAAS,WACL,WAAW,SAAS;AAAA,MAClB,kBAAkB;AAAA,MAClB,qBAAqB;AAAA,IACvB,CAAC,IACD,WAAW,OAAO;AAAA,EACxB,GAAG,CAAC,OAAO,UAAU,OAAO,CAAC;AAK7B,QAAM,UAAU;AAAA,IACd,CAAC,UAA4B;AAC3B,oBAAc,KAAK;AACnB,UAAI,MAAM,mBAAmB,GAAG;AAE9B;AAAA,MACF;AAEA,YAAM,cAAc,MAAM;AAE1B,UACE,YAAY,WAAW,KACvB,YAAY,WACZ,YAAY,WACZ,YAAY,UACZ;AACA;AAAA,MACF;AAEA,YAAM,eAAe;AACrB,oBAAc;AAAA,IAChB;AAAA,IACA,CAAC,aAAa,aAAa;AAAA,EAC7B;AAKA,QAAM,YAAY;AAAA,IAChB,CAAC,UAA+B;AAC9B,YAAM,cAAc,MAAM;AAE1B,UAAI,YAAY,SAAS,WAAW,YAAY,SAAS,SAAS;AAChE;AAAA,MACF;AAEA,YAAM,eAAe;AAGrB,UAAI,YAAY,WAAW,YAAY,SAAS;AAC9C,eAAO,KAAK,IAAI;AAChB;AAAA,MACF;AAGA,UAAI,YAAY,UAAU;AACxB,eAAO,KAAK,MAAM,UAAU,SAAS;AACrC;AAAA,MACF;AAGA,oBAAc;AAAA,IAChB;AAAA,IACA,CAAC,MAAM,aAAa;AAAA,EACtB;AAEA,SAAO,EAAE,MAAM,SAAS,UAAU;AACpC;",
6
6
  "names": []
7
7
  }
@@ -1,5 +1,7 @@
1
1
  const isBrowser = (() => {
2
- return !!(typeof window !== "undefined" && window.document && window.document.createElement);
2
+ return !!(typeof window !== "undefined" && window.document && /* eslint-disable-next-line deprecation/deprecation --
3
+ one overload of createElement is deprecated, apparently our plugin does not get that */
4
+ window.document.createElement);
3
5
  })();
4
6
  export {
5
7
  isBrowser
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/core/utils/isBrowser.ts"],
4
- "sourcesContent": ["/**\n * @internal\n *\n * Whether the code is currently executed in a browser\n * @see {@link https://github.com/chakra-ui/chakra-ui/blob/main/packages/utils/src/dom.ts}\n */\nexport const isBrowser = (() => {\n return !!(\n typeof window !== 'undefined' &&\n window.document &&\n window.document.createElement\n );\n})();\n"],
5
- "mappings": "AAMO,MAAM,aAAa,MAAM;AAC9B,SAAO,CAAC,EACN,OAAO,WAAW,eAClB,OAAO,YACP,OAAO,SAAS;AAEpB,GAAG;",
4
+ "sourcesContent": ["/**\n * @internal\n *\n * Whether the code is currently executed in a browser\n * @see {@link https://github.com/chakra-ui/chakra-ui/blob/main/packages/utils/src/dom.ts}\n */\nexport const isBrowser = (() => {\n return !!(\n typeof window !== 'undefined' &&\n window.document &&\n /* eslint-disable-next-line deprecation/deprecation --\n one overload of createElement is deprecated, apparently our plugin does not get that */\n window.document.createElement\n );\n})();\n"],
5
+ "mappings": "AAMO,MAAM,aAAa,MAAM;AAC9B,SAAO,CAAC,EACN,OAAO,WAAW,eAClB,OAAO;AAAA;AAAA,EAGP,OAAO,SAAS;AAEpB,GAAG;",
6
6
  "names": []
7
7
  }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/typography/highlight/Highlight.tsx"],
4
- "sourcesContent": ["import clsx from 'clsx';\nimport React, { ReactElement, ReactNode, ReactText } from 'react';\n\nimport { highlightCSS } from './Highlight.sty.js';\nimport { type DataTestId, type WithChildren } from '../../core/index.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\n\n/**\n * The props for the Heading component.\n * @public\n */\nexport interface HighlightProps extends WithChildren, DataTestId, MaskingProps {\n /**\n * Either a substring or an array of multiple different substrings that\n * should be highlighted in the projected content.\n * Every occurrence of the string(s) is highlighted accordingly.\n */\n term: string | string[];\n\n /**\n * Property that determines whether the highlighting search is case-sensitive.\n * If set to `true`, the component searches for case sensitive occurrences.\n * @defaultValue false\n */\n caseSensitive?: boolean;\n}\n\nconst HTML_CHARS_OVERRIDES: [RegExp, string][] = [\n [/&lt;/g, '<'],\n [/&gt;/g, '>'],\n [/&amp;/g, '&'],\n [/&nbsp;/g, ' '],\n];\n\n/** Escapes all characters that could be dangerous for a regular expression */\nfunction escapeRegExp(text: string): string {\n return text.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&'); // $& means the whole matched string\n}\n\n/** Highlights all occurences of a list of terms within a ReactNode. */\nfunction highlightChildren(\n children: ReactNode,\n term: string | string[],\n caseSensitive: boolean,\n dataTestId?: string,\n dataDtrumMask?: boolean,\n dataDtrumAllow?: boolean,\n) {\n const terms = (() => {\n if (Array.isArray(term)) {\n return term.filter((t) => t);\n }\n\n return term ? [term] : [];\n })();\n\n return terms.length > 0\n ? React.Children.map(children, (child: ReactNode) =>\n highlightRecursive(\n child,\n terms,\n caseSensitive,\n dataTestId,\n dataDtrumMask,\n dataDtrumAllow,\n ),\n )\n : children;\n}\n\n/**\n * Iterates over all children of a ReactNode recursively to look\n * for a list of terms and highlights them.\n */\nfunction highlightRecursive(\n sourceElement: ReactNode,\n terms: string[],\n caseSensitive: boolean,\n dataTestId?: string,\n dataDtrumMask?: boolean,\n dataDtrumAllow?: boolean,\n): ReactNode {\n if (!sourceElement) {\n return sourceElement;\n }\n\n if (React.isValidElement(sourceElement)) {\n const children = React.Children.map(sourceElement.props.children, (child) =>\n highlightRecursive(\n child,\n terms,\n caseSensitive,\n dataTestId,\n dataDtrumMask,\n dataDtrumAllow,\n ),\n );\n\n return React.cloneElement(sourceElement, sourceElement.props, children);\n }\n\n return highlightLeafElement(\n sourceElement as ReactText,\n terms,\n caseSensitive,\n dataTestId,\n dataDtrumMask,\n dataDtrumAllow,\n );\n}\n\n/** Highlights parts of the text that match a certain group of terms. */\nfunction highlightLeafElement(\n textContent: ReactText,\n terms: string[],\n caseSensitive: boolean,\n dataTestId?: string,\n dataDtrumMask?: boolean,\n dataDtrumAllow?: boolean,\n): ReactNode {\n if (terms.length === 0) {\n return textContent;\n }\n\n const sanitizedTextContent = HTML_CHARS_OVERRIDES.reduce(\n (text, [needle, replacement]) => text.replace(needle, replacement),\n `${textContent}`,\n );\n const termsInLowerCase = terms.map((t) => t.toLowerCase());\n\n return getTextTokens(sanitizedTextContent, terms, caseSensitive).map(\n (token: string) =>\n termsInLowerCase.includes(token.toLowerCase()) ? (\n <mark\n role=\"mark\"\n className={clsx(highlightCSS)}\n data-dtrum-mask={dataDtrumMask}\n data-dtrum-allow={dataDtrumAllow}\n >\n {token}\n </mark>\n ) : (\n <span>{token}</span>\n ),\n );\n}\n\n/**\n * Splits text into an array of strings where a given list of terms\n * acts as separator strings.\n */\nfunction getTextTokens(\n textContent: ReactText,\n terms: string[],\n caseSensitive: boolean,\n): string[] {\n const flags = caseSensitive ? 'gm' : 'gmi';\n const regExp = new RegExp(\n `(${terms.map((t) => escapeRegExp(t)).join('|')})`,\n flags,\n );\n\n return textContent\n .toString()\n .split(regExp)\n .filter((s) => s.length > 0);\n}\n\n/**\n * Use the `Highlight` component to highlight one or more substrings within a\n * text.\n * @public\n */\nexport const Highlight = (props: HighlightProps): ReactElement => {\n const {\n children,\n term,\n caseSensitive = false,\n 'data-testid': dataTestId,\n 'data-dtrum-mask': dataDtrumMask,\n 'data-dtrum-allow': dataDtrumAllow,\n } = props;\n\n return (\n <>\n {highlightChildren(\n children,\n term,\n caseSensitive,\n dataTestId,\n dataDtrumMask,\n dataDtrumAllow,\n )}\n </>\n );\n};\n\n(Highlight as typeof Highlight & { displayName: string }).displayName =\n 'Highlight';\n"],
5
- "mappings": "AAAA,OAAO,UAAU;AACjB,OAAO,WAAmD;AAE1D,SAAS,oBAAoB;AAwB7B,MAAM,uBAA2C;AAAA,EAC/C,CAAC,SAAS,GAAG;AAAA,EACb,CAAC,SAAS,GAAG;AAAA,EACb,CAAC,UAAU,GAAG;AAAA,EACd,CAAC,WAAW,GAAG;AACjB;AAGA,SAAS,aAAa,MAAsB;AAC1C,SAAO,KAAK,QAAQ,uBAAuB,MAAM;AACnD;AAGA,SAAS,kBACP,UACA,MACA,eACA,YACA,eACA,gBACA;AACA,QAAM,SAAS,MAAM;AACnB,QAAI,MAAM,QAAQ,IAAI,GAAG;AACvB,aAAO,KAAK,OAAO,CAAC,MAAM,CAAC;AAAA,IAC7B;AAEA,WAAO,OAAO,CAAC,IAAI,IAAI,CAAC;AAAA,EAC1B,GAAG;AAEH,SAAO,MAAM,SAAS,IAClB,MAAM,SAAS;AAAA,IAAI;AAAA,IAAU,CAAC,UAC5B;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF,IACA;AACN;AAMA,SAAS,mBACP,eACA,OACA,eACA,YACA,eACA,gBACW;AACX,MAAI,CAAC,eAAe;AAClB,WAAO;AAAA,EACT;AAEA,MAAI,MAAM,eAAe,aAAa,GAAG;AACvC,UAAM,WAAW,MAAM,SAAS;AAAA,MAAI,cAAc,MAAM;AAAA,MAAU,CAAC,UACjE;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAEA,WAAO,MAAM,aAAa,eAAe,cAAc,OAAO,QAAQ;AAAA,EACxE;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAGA,SAAS,qBACP,aACA,OACA,eACA,YACA,eACA,gBACW;AACX,MAAI,MAAM,WAAW,GAAG;AACtB,WAAO;AAAA,EACT;AAEA,QAAM,uBAAuB,qBAAqB;AAAA,IAChD,CAAC,MAAM,CAAC,QAAQ,WAAW,MAAM,KAAK,QAAQ,QAAQ,WAAW;AAAA,IACjE,GAAG,WAAW;AAAA,EAChB;AACA,QAAM,mBAAmB,MAAM,IAAI,CAAC,MAAM,EAAE,YAAY,CAAC;AAEzD,SAAO,cAAc,sBAAsB,OAAO,aAAa,EAAE;AAAA,IAC/D,CAAC,UACC,iBAAiB,SAAS,MAAM,YAAY,CAAC,IAC3C;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAW,KAAK,YAAY;AAAA,QAC5B,mBAAiB;AAAA,QACjB,oBAAkB;AAAA;AAAA,MAEjB;AAAA,IACH,IAEA,oCAAC,cAAM,KAAM;AAAA,EAEnB;AACF;AAMA,SAAS,cACP,aACA,OACA,eACU;AACV,QAAM,QAAQ,gBAAgB,OAAO;AACrC,QAAM,SAAS,IAAI;AAAA,IACjB,IAAI,MAAM,IAAI,CAAC,MAAM,aAAa,CAAC,CAAC,EAAE,KAAK,GAAG,CAAC;AAAA,IAC/C;AAAA,EACF;AAEA,SAAO,YACJ,SAAS,EACT,MAAM,MAAM,EACZ,OAAO,CAAC,MAAM,EAAE,SAAS,CAAC;AAC/B;AAOO,MAAM,YAAY,CAAC,UAAwC;AAChE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,EACtB,IAAI;AAEJ,SACE,0DACG;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CACF;AAEJ;AAEC,UAAyD,cACxD;",
4
+ "sourcesContent": ["import clsx from 'clsx';\nimport React, { ReactElement, ReactNode } from 'react';\n\nimport { highlightCSS } from './Highlight.sty.js';\nimport { type DataTestId, type WithChildren } from '../../core/index.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\n\n/**\n * The props for the Heading component.\n * @public\n */\nexport interface HighlightProps extends WithChildren, DataTestId, MaskingProps {\n /**\n * Either a substring or an array of multiple different substrings that\n * should be highlighted in the projected content.\n * Every occurrence of the string(s) is highlighted accordingly.\n */\n term: string | string[];\n\n /**\n * Property that determines whether the highlighting search is case-sensitive.\n * If set to `true`, the component searches for case sensitive occurrences.\n * @defaultValue false\n */\n caseSensitive?: boolean;\n}\n\nconst HTML_CHARS_OVERRIDES: [RegExp, string][] = [\n [/&lt;/g, '<'],\n [/&gt;/g, '>'],\n [/&amp;/g, '&'],\n [/&nbsp;/g, ' '],\n];\n\n/** Escapes all characters that could be dangerous for a regular expression */\nfunction escapeRegExp(text: string): string {\n return text.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&'); // $& means the whole matched string\n}\n\n/** Highlights all occurences of a list of terms within a ReactNode. */\nfunction highlightChildren(\n children: ReactNode,\n term: string | string[],\n caseSensitive: boolean,\n dataTestId?: string,\n dataDtrumMask?: boolean,\n dataDtrumAllow?: boolean,\n) {\n const terms = (() => {\n if (Array.isArray(term)) {\n return term.filter((t) => t);\n }\n\n return term ? [term] : [];\n })();\n\n return terms.length > 0\n ? React.Children.map(children, (child: ReactNode) =>\n highlightRecursive(\n child,\n terms,\n caseSensitive,\n dataTestId,\n dataDtrumMask,\n dataDtrumAllow,\n ),\n )\n : children;\n}\n\n/**\n * Iterates over all children of a ReactNode recursively to look\n * for a list of terms and highlights them.\n */\nfunction highlightRecursive(\n sourceElement: ReactNode,\n terms: string[],\n caseSensitive: boolean,\n dataTestId?: string,\n dataDtrumMask?: boolean,\n dataDtrumAllow?: boolean,\n): ReactNode {\n if (!sourceElement) {\n return sourceElement;\n }\n\n if (React.isValidElement(sourceElement)) {\n const children = React.Children.map(sourceElement.props.children, (child) =>\n highlightRecursive(\n child,\n terms,\n caseSensitive,\n dataTestId,\n dataDtrumMask,\n dataDtrumAllow,\n ),\n );\n\n return React.cloneElement(sourceElement, sourceElement.props, children);\n }\n\n return highlightLeafElement(\n sourceElement as string | number,\n terms,\n caseSensitive,\n dataTestId,\n dataDtrumMask,\n dataDtrumAllow,\n );\n}\n\n/** Highlights parts of the text that match a certain group of terms. */\nfunction highlightLeafElement(\n textContent: string | number,\n terms: string[],\n caseSensitive: boolean,\n dataTestId?: string,\n dataDtrumMask?: boolean,\n dataDtrumAllow?: boolean,\n): ReactNode {\n if (terms.length === 0) {\n return textContent;\n }\n\n const sanitizedTextContent = HTML_CHARS_OVERRIDES.reduce(\n (text, [needle, replacement]) => text.replace(needle, replacement),\n `${textContent}`,\n );\n const termsInLowerCase = terms.map((t) => t.toLowerCase());\n\n return getTextTokens(sanitizedTextContent, terms, caseSensitive).map(\n (token: string) =>\n termsInLowerCase.includes(token.toLowerCase()) ? (\n <mark\n role=\"mark\"\n className={clsx(highlightCSS)}\n data-dtrum-mask={dataDtrumMask}\n data-dtrum-allow={dataDtrumAllow}\n >\n {token}\n </mark>\n ) : (\n <span>{token}</span>\n ),\n );\n}\n\n/**\n * Splits text into an array of strings where a given list of terms\n * acts as separator strings.\n */\nfunction getTextTokens(\n textContent: string | number,\n terms: string[],\n caseSensitive: boolean,\n): string[] {\n const flags = caseSensitive ? 'gm' : 'gmi';\n const regExp = new RegExp(\n `(${terms.map((t) => escapeRegExp(t)).join('|')})`,\n flags,\n );\n\n return textContent\n .toString()\n .split(regExp)\n .filter((s) => s.length > 0);\n}\n\n/**\n * Use the `Highlight` component to highlight one or more substrings within a\n * text.\n * @public\n */\nexport const Highlight = (props: HighlightProps): ReactElement => {\n const {\n children,\n term,\n caseSensitive = false,\n 'data-testid': dataTestId,\n 'data-dtrum-mask': dataDtrumMask,\n 'data-dtrum-allow': dataDtrumAllow,\n } = props;\n\n return (\n <>\n {highlightChildren(\n children,\n term,\n caseSensitive,\n dataTestId,\n dataDtrumMask,\n dataDtrumAllow,\n )}\n </>\n );\n};\n\n(Highlight as typeof Highlight & { displayName: string }).displayName =\n 'Highlight';\n"],
5
+ "mappings": "AAAA,OAAO,UAAU;AACjB,OAAO,WAAwC;AAE/C,SAAS,oBAAoB;AAwB7B,MAAM,uBAA2C;AAAA,EAC/C,CAAC,SAAS,GAAG;AAAA,EACb,CAAC,SAAS,GAAG;AAAA,EACb,CAAC,UAAU,GAAG;AAAA,EACd,CAAC,WAAW,GAAG;AACjB;AAGA,SAAS,aAAa,MAAsB;AAC1C,SAAO,KAAK,QAAQ,uBAAuB,MAAM;AACnD;AAGA,SAAS,kBACP,UACA,MACA,eACA,YACA,eACA,gBACA;AACA,QAAM,SAAS,MAAM;AACnB,QAAI,MAAM,QAAQ,IAAI,GAAG;AACvB,aAAO,KAAK,OAAO,CAAC,MAAM,CAAC;AAAA,IAC7B;AAEA,WAAO,OAAO,CAAC,IAAI,IAAI,CAAC;AAAA,EAC1B,GAAG;AAEH,SAAO,MAAM,SAAS,IAClB,MAAM,SAAS;AAAA,IAAI;AAAA,IAAU,CAAC,UAC5B;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF,IACA;AACN;AAMA,SAAS,mBACP,eACA,OACA,eACA,YACA,eACA,gBACW;AACX,MAAI,CAAC,eAAe;AAClB,WAAO;AAAA,EACT;AAEA,MAAI,MAAM,eAAe,aAAa,GAAG;AACvC,UAAM,WAAW,MAAM,SAAS;AAAA,MAAI,cAAc,MAAM;AAAA,MAAU,CAAC,UACjE;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAEA,WAAO,MAAM,aAAa,eAAe,cAAc,OAAO,QAAQ;AAAA,EACxE;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAGA,SAAS,qBACP,aACA,OACA,eACA,YACA,eACA,gBACW;AACX,MAAI,MAAM,WAAW,GAAG;AACtB,WAAO;AAAA,EACT;AAEA,QAAM,uBAAuB,qBAAqB;AAAA,IAChD,CAAC,MAAM,CAAC,QAAQ,WAAW,MAAM,KAAK,QAAQ,QAAQ,WAAW;AAAA,IACjE,GAAG,WAAW;AAAA,EAChB;AACA,QAAM,mBAAmB,MAAM,IAAI,CAAC,MAAM,EAAE,YAAY,CAAC;AAEzD,SAAO,cAAc,sBAAsB,OAAO,aAAa,EAAE;AAAA,IAC/D,CAAC,UACC,iBAAiB,SAAS,MAAM,YAAY,CAAC,IAC3C;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAW,KAAK,YAAY;AAAA,QAC5B,mBAAiB;AAAA,QACjB,oBAAkB;AAAA;AAAA,MAEjB;AAAA,IACH,IAEA,oCAAC,cAAM,KAAM;AAAA,EAEnB;AACF;AAMA,SAAS,cACP,aACA,OACA,eACU;AACV,QAAM,QAAQ,gBAAgB,OAAO;AACrC,QAAM,SAAS,IAAI;AAAA,IACjB,IAAI,MAAM,IAAI,CAAC,MAAM,aAAa,CAAC,CAAC,EAAE,KAAK,GAAG,CAAC;AAAA,IAC/C;AAAA,EACF;AAEA,SAAO,YACJ,SAAS,EACT,MAAM,MAAM,EACZ,OAAO,CAAC,MAAM,EAAE,SAAS,CAAC;AAC/B;AAOO,MAAM,YAAY,CAAC,UAAwC;AAChE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,EACtB,IAAI;AAEJ,SACE,0DACG;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CACF;AAEJ;AAEC,UAAyD,cACxD;",
6
6
  "names": []
7
7
  }
@@ -134,7 +134,15 @@ const CssTextEllipsis = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
134
134
  });
135
135
  const TextEllipsis = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
136
136
  const cssOnlyEllipsis = !props.onTextOverflow && props.truncationMode !== "middle";
137
- return cssOnlyEllipsis ? /* @__PURE__ */ React.createElement(CssTextEllipsis, { ref: forwardedRef, ...props }) : /* @__PURE__ */ React.createElement(ComputedTextEllipsis, { ref: forwardedRef, ...props });
137
+ return cssOnlyEllipsis ? (
138
+ /* eslint-disable-next-line deprecated-jsx-props/deprecated-props -- The plugin can not properly analyze spread props:
139
+ 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. */
140
+ /* @__PURE__ */ React.createElement(CssTextEllipsis, { ref: forwardedRef, ...props })
141
+ ) : (
142
+ /* eslint-disable-next-line deprecated-jsx-props/deprecated-props -- The plugin can not properly analyze spread props:
143
+ 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. */
144
+ /* @__PURE__ */ React.createElement(ComputedTextEllipsis, { ref: forwardedRef, ...props })
145
+ );
138
146
  });
139
147
  TextEllipsis.displayName = "TextEllipsis";
140
148
  export {
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/typography/text-ellipsis/TextEllipsis.tsx"],
4
- "sourcesContent": ["import clsx from 'clsx';\nimport React, {\n forwardRef,\n HTMLAttributes,\n RefObject,\n useLayoutEffect,\n useRef,\n} from 'react';\nimport useResizeObserver from 'use-resize-observer';\n\nimport { textEllipsisCSS } from './TextEllipsis.sty.js';\nimport { _useFontsUpdated } from '../../core/hooks/useFontsUpdated.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.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 { type _Font } from '../utils.js';\nimport { _centerEllipsizeText } from '../utils.js';\n\n/**\n * Available modes for how overly long text is truncated and where the ellipsis is placed.\n * @internal\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 StylingProps,\n DataTestId,\n MaskingProps {\n /** The children (as text) passed to the component. */\n children: string;\n /**\n * The mode used for for truncating the text, either at the start, in the middle or at the end.\n * @defaultValue 'end'\n */\n truncationMode?: 'start' | 'middle' | 'end';\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 textWrapper - The HTML element to extract the CSS properties from\n */\nfunction getFontProps(textWrapper: HTMLSpanElement): _Font {\n const computedStyle = window.getComputedStyle(textWrapper, 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 textWrapper: HTMLSpanElement,\n containerWidth: number,\n): boolean {\n const textWidth =\n Math.floor(textWrapper.getBoundingClientRect().width * 100) / 100;\n\n return textWidth > containerWidth;\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 <code>maxWidthInPx</code>\n * @param truncationMode - The mode used for 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 */\nfunction renderEllipsizedText(\n originalText: string,\n truncationMode: TextEllipsisProps['truncationMode'],\n containerRef: RefObject<HTMLSpanElement>,\n wasEllipsized: boolean,\n onTextOverflow?: (ellipsized: boolean) => void,\n): boolean {\n const containerElement = containerRef.current;\n const textWrapper: HTMLSpanElement | null =\n (containerElement?.firstElementChild as HTMLSpanElement) || null;\n\n if (containerElement !== null && textWrapper !== null) {\n if (textWrapper.textContent !== originalText) {\n textWrapper.textContent = originalText; // always reset to full text before measuring container width\n }\n\n const containerWidth =\n Math.ceil(containerElement.getBoundingClientRect().width * 100) / 100;\n\n if (truncationMode === 'middle') {\n if (isNativeEllipsisActive(textWrapper, containerWidth)) {\n const ellipsizedText = _centerEllipsizeText(\n originalText,\n getFontProps(textWrapper),\n containerWidth,\n );\n textWrapper.textContent = ellipsizedText;\n\n if (ellipsizedText !== originalText) {\n if (onTextOverflow && !wasEllipsized) {\n onTextOverflow(true);\n }\n\n return true;\n }\n }\n\n if (onTextOverflow && wasEllipsized) {\n onTextOverflow(false);\n }\n } else if (isNativeEllipsisActive(textWrapper, containerWidth)) {\n if (onTextOverflow && !wasEllipsized) {\n onTextOverflow(true);\n }\n\n return true;\n } else if (onTextOverflow && wasEllipsized) {\n onTextOverflow(false);\n }\n }\n\n return false;\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 // resize observer is needed to re-render the component in case of resizing\n const { ref: observerContainerRef } = 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 const containerWidth = containerRef.current?.getBoundingClientRect().width;\n const fontsUpdated = _useFontsUpdated();\n\n useLayoutEffect(() => {\n ellipsisStateRef.current = renderEllipsizedText(\n children,\n truncationMode,\n containerRef,\n ellipsisStateRef.current,\n onTextOverflow,\n );\n }, [containerWidth, children, truncationMode, fontsUpdated, onTextOverflow]);\n\n return (\n <span\n ref={mergedRef}\n aria-label={children}\n data-ellipsis\n data-testid={dataTestId}\n data-dtrum-mask={dataDtrumMask}\n data-dtrum-allow={dataDtrumAllow}\n className={clsx(textEllipsisCSS({ truncationMode }), consumerClassName)}\n style={consumerStyle}\n {...remainingProps}\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-testid': dataTestId,\n ...remainingProps\n } = props;\n\n return (\n <span\n ref={forwardedRef}\n aria-label={children}\n data-ellipsis\n data-testid={dataTestId}\n className={clsx(textEllipsisCSS({ truncationMode }), consumerClassName)}\n style={consumerStyle}\n {...remainingProps}\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 'TextEllipsis';\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import clsx from 'clsx';\nimport React, {\n forwardRef,\n HTMLAttributes,\n RefObject,\n useLayoutEffect,\n useRef,\n} from 'react';\nimport useResizeObserver from 'use-resize-observer';\n\nimport { textEllipsisCSS } from './TextEllipsis.sty.js';\nimport { _useFontsUpdated } from '../../core/hooks/useFontsUpdated.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.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 { type _Font } from '../utils.js';\nimport { _centerEllipsizeText } from '../utils.js';\n\n/**\n * Available modes for how overly long text is truncated and where the ellipsis is placed.\n * @internal\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 StylingProps,\n DataTestId,\n MaskingProps {\n /** The children (as text) passed to the component. */\n children: string;\n /**\n * The mode used for for truncating the text, either at the start, in the middle or at the end.\n * @defaultValue 'end'\n */\n truncationMode?: 'start' | 'middle' | 'end';\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 textWrapper - The HTML element to extract the CSS properties from\n */\nfunction getFontProps(textWrapper: HTMLSpanElement): _Font {\n const computedStyle = window.getComputedStyle(textWrapper, 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 textWrapper: HTMLSpanElement,\n containerWidth: number,\n): boolean {\n const textWidth =\n Math.floor(textWrapper.getBoundingClientRect().width * 100) / 100;\n\n return textWidth > containerWidth;\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 <code>maxWidthInPx</code>\n * @param truncationMode - The mode used for 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 */\nfunction renderEllipsizedText(\n originalText: string,\n truncationMode: TextEllipsisProps['truncationMode'],\n containerRef: RefObject<HTMLSpanElement>,\n wasEllipsized: boolean,\n onTextOverflow?: (ellipsized: boolean) => void,\n): boolean {\n const containerElement = containerRef.current;\n const textWrapper: HTMLSpanElement | null =\n (containerElement?.firstElementChild as HTMLSpanElement) || null;\n\n if (containerElement !== null && textWrapper !== null) {\n if (textWrapper.textContent !== originalText) {\n textWrapper.textContent = originalText; // always reset to full text before measuring container width\n }\n\n const containerWidth =\n Math.ceil(containerElement.getBoundingClientRect().width * 100) / 100;\n\n if (truncationMode === 'middle') {\n if (isNativeEllipsisActive(textWrapper, containerWidth)) {\n const ellipsizedText = _centerEllipsizeText(\n originalText,\n getFontProps(textWrapper),\n containerWidth,\n );\n textWrapper.textContent = ellipsizedText;\n\n if (ellipsizedText !== originalText) {\n if (onTextOverflow && !wasEllipsized) {\n onTextOverflow(true);\n }\n\n return true;\n }\n }\n\n if (onTextOverflow && wasEllipsized) {\n onTextOverflow(false);\n }\n } else if (isNativeEllipsisActive(textWrapper, containerWidth)) {\n if (onTextOverflow && !wasEllipsized) {\n onTextOverflow(true);\n }\n\n return true;\n } else if (onTextOverflow && wasEllipsized) {\n onTextOverflow(false);\n }\n }\n\n return false;\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 // resize observer is needed to re-render the component in case of resizing\n const { ref: observerContainerRef } = 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 const containerWidth = containerRef.current?.getBoundingClientRect().width;\n const fontsUpdated = _useFontsUpdated();\n\n useLayoutEffect(() => {\n ellipsisStateRef.current = renderEllipsizedText(\n children,\n truncationMode,\n containerRef,\n ellipsisStateRef.current,\n onTextOverflow,\n );\n }, [containerWidth, children, truncationMode, fontsUpdated, onTextOverflow]);\n\n return (\n <span\n ref={mergedRef}\n aria-label={children}\n data-ellipsis\n data-testid={dataTestId}\n data-dtrum-mask={dataDtrumMask}\n data-dtrum-allow={dataDtrumAllow}\n className={clsx(textEllipsisCSS({ truncationMode }), consumerClassName)}\n style={consumerStyle}\n {...remainingProps}\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-testid': dataTestId,\n ...remainingProps\n } = props;\n\n return (\n <span\n ref={forwardedRef}\n aria-label={children}\n data-ellipsis\n data-testid={dataTestId}\n className={clsx(textEllipsisCSS({ truncationMode }), consumerClassName)}\n style={consumerStyle}\n {...remainingProps}\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 /* eslint-disable-next-line deprecated-jsx-props/deprecated-props -- The plugin can not properly analyze spread props:\n 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. */\n <CssTextEllipsis ref={forwardedRef} {...props} />\n ) : (\n /* eslint-disable-next-line deprecated-jsx-props/deprecated-props -- The plugin can not properly analyze spread props:\n 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. */\n <ComputedTextEllipsis ref={forwardedRef} {...props} />\n );\n});\n\n(TextEllipsis as typeof TextEllipsis & { displayName: string }).displayName =\n 'TextEllipsis';\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dynatrace/strato-components",
3
- "version": "0.85.60",
3
+ "version": "0.85.70",
4
4
  "private": false,
5
5
  "license": "Apache-2.0",
6
6
  "lang": "lang/uncompiled",
@@ -4,7 +4,9 @@ type RenderWithIntlOptions = {
4
4
  locale?: string;
5
5
  timeZone?: string;
6
6
  } & Omit<RenderOptions, 'queries'>;
7
- /** Wrapper to render components with all required providers */
7
+ /** Wrapper to render components with all required providers
8
+ * @deprecated The testing subpackage is deprecated. Please switch to the `@dynatrace/strato-components-testing` package.
9
+ */
8
10
  export declare const customRender: (ui: React.ReactElement, { locale, timeZone, wrapper: CustomWrapper, ...renderOptions }?: RenderWithIntlOptions) => RenderResult;
9
11
  export * from '@testing-library/react';
10
12
  export { customRender as render };
@@ -1,3 +1,6 @@
1
+ /**
2
+ * @deprecated The testing subpackage is deprecated. Please switch to the `@dynatrace/strato-components-testing` package.
3
+ */
1
4
  export declare const stratoPreset: {
2
5
  moduleNameMapper: {
3
6
  nanoid: string;
@@ -1,6 +1,9 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.stratoPreset = void 0;
4
+ /**
5
+ * @deprecated The testing subpackage is deprecated. Please switch to the `@dynatrace/strato-components-testing` package.
6
+ */
4
7
  exports.stratoPreset = {
5
8
  moduleNameMapper: {
6
9
  nanoid: '<rootDir>/node_modules/nanoid/index.cjs',
@@ -1,4 +1,8 @@
1
- /** Mocks the `getBoundingClientRect()` function on all HTMLElements. */
1
+ /** Mocks the `getBoundingClientRect()` function on all HTMLElements.
2
+ * @deprecated The testing subpackage is deprecated. Please switch to the `@dynatrace/strato-components-testing` package.
3
+ */
2
4
  export declare function setupGetBoundingClientRectMock(widthOrMockFn: number | (() => DOMRect | null), height?: number, x?: number, y?: number, top?: number, right?: number, bottom?: number, left?: number): void;
3
- /** Clears mocked `getBoundingClientRect()` function on HTMLElements. */
5
+ /** Clears mocked `getBoundingClientRect()` function on HTMLElements.
6
+ * @deprecated The testing subpackage is deprecated. Please switch to the `@dynatrace/strato-components-testing` package.
7
+ */
4
8
  export declare function clearGetBoundingClientRectMock(): void;
@@ -5,7 +5,10 @@
5
5
  * a reasonable value for each given string.
6
6
  *
7
7
  * @param mockTextWidth - The value returned by the `measureText()` mock for all strings
8
+ * @deprecated The testing subpackage is deprecated. Please switch to the `@dynatrace/strato-components-testing` package.
8
9
  */
9
10
  export declare function setupCanvasMeasureTextMock(mockTextWidth?: number): void;
10
- /** Clears mocked `getContext()` function on HTMLCanvasElements. */
11
+ /** Clears mocked `getContext()` function on HTMLCanvasElements.
12
+ * @deprecated The testing subpackage is deprecated. Please switch to the `@dynatrace/strato-components-testing` package.
13
+ */
11
14
  export declare function clearCanvasMeasureTextMock(): void;
@@ -1,4 +1,6 @@
1
- /** Creates a mock element: https://github.com/jsdom/jsdom/issues/653 */
1
+ /** Creates a mock element: https://github.com/jsdom/jsdom/issues/653
2
+ * @deprecated The testing subpackage is deprecated.
3
+ */
2
4
  export declare function createMockElement(
3
5
  /** Element tag name */
4
6
  elementOrTag: HTMLElement | string,
@@ -1,7 +1,10 @@
1
1
  /**
2
2
  * Mocks the `document.createRange()` function so it returns
3
3
  * a valid `Range` object.
4
+ * @deprecated The testing subpackage is deprecated.
4
5
  */
5
6
  export declare function setupCreateRangeMock(): void;
6
- /** Clears mocked `document.createRange()` function. */
7
+ /** Clears mocked `document.createRange()` function.
8
+ * @deprecated The testing subpackage is deprecated.
9
+ */
7
10
  export declare function clearCreateRangeMock(): void;
@@ -1,12 +1,19 @@
1
- /** Creates a DOMRect instance. Unspecified values default to `0`. */
1
+ /** Creates a DOMRect instance. Unspecified values default to `0`.
2
+ * @deprecated The testing subpackage is deprecated. Please switch to the `@dynatrace/strato-components-testing` package.
3
+ */
2
4
  export declare function createDOMRect(width: number, height?: number, x?: number, y?: number, top?: number, right?: number, bottom?: number, left?: number): DOMRect;
5
+ /**
6
+ * @deprecated The testing subpackage is deprecated. Please switch to the `@dynatrace/strato-components-testing` package.
7
+ */
3
8
  export declare const FALLBACK_DOM_RECT: DOMRect;
4
9
  /**
5
10
  * Mock the domRect since jsdom doesn't provide it
6
11
  * @param mockDomRect - Override values for DOMRect
12
+ * @deprecated The testing subpackage is deprecated. Please switch to the `@dynatrace/strato-components-testing` package.
7
13
  */
8
14
  export declare function setupDomRectMock(mockDomRect?: DOMRect): void;
9
15
  /**
10
16
  * reset the DomRect
17
+ * @deprecated The testing subpackage is deprecated. Please switch to the `@dynatrace/strato-components-testing` package.
11
18
  */
12
19
  export declare function clearDomRectMock(): void;
@@ -1,6 +1,9 @@
1
1
  /**
2
2
  * Mocks the global `fetch` function since JSDom has no implementation
3
+ * @deprecated The testing subpackage is deprecated.
3
4
  */
4
5
  export declare function setupFetchMock(mockedValue?: any): void;
5
- /** Clears mocked `fetch` function. */
6
+ /** Clears mocked `fetch` function.
7
+ * @deprecated The testing subpackage is deprecated.
8
+ */
6
9
  export declare function clearFetchMock(): void;
@@ -1,7 +1,10 @@
1
1
  /**
2
2
  * Mocks the IntersectionObserver
3
3
  * @param entries - entries for the callback function which is called when IntersectionObserver.observe is invoked
4
+ * @deprecated The testing subpackage is deprecated.
4
5
  */
5
6
  export declare function setupIntersectionObserverMock(entries?: any): void;
6
- /** Clears `IntersectionObserver` mock. */
7
+ /** Clears `IntersectionObserver` mock.
8
+ * @deprecated The testing subpackage is deprecated.
9
+ */
7
10
  export declare function clearIntersectionObserverMock(): void;
@@ -1,7 +1,10 @@
1
1
  /**
2
2
  * Mock the match media on the window object
3
3
  * @param isMatching - whether or not the match query matches
4
+ * @deprecated The testing subpackage is deprecated.
4
5
  */
5
6
  export declare function setupMatchMediaMock(isMatching?: boolean): void;
6
- /** Clear the Match Media mock */
7
+ /** Clear the Match Media mock
8
+ * @deprecated The testing subpackage is deprecated.
9
+ */
7
10
  export declare function clearMatchMediaMock(): void;
@@ -1,4 +1,8 @@
1
- /** Mocks the return value of the offsetHeight property on all HTMLElements. */
1
+ /** Mocks the return value of the offsetHeight property on all HTMLElements.
2
+ * @deprecated The testing subpackage is deprecated.
3
+ */
2
4
  export declare function setupOffsetHeightMock(containerHeightOrMockFn: number | (() => number)): void;
3
- /** Clears mocked offsetHeight property on HTMLElements. */
5
+ /** Clears mocked offsetHeight property on HTMLElements.
6
+ * @deprecated The testing subpackage is deprecated.
7
+ */
4
8
  export declare function clearOffsetHeightMock(): void;
@@ -1,4 +1,8 @@
1
- /** Mocks the return value of the offsetWidth property on all HTMLElements. */
1
+ /** Mocks the return value of the offsetWidth property on all HTMLElements.
2
+ * @deprecated The testing subpackage is deprecated.
3
+ */
2
4
  export declare function setupOffsetWidthMock(containerWidthOrMockFn: number | (() => number)): void;
3
- /** Clears mocked offsetWidth property on HTMLElements. */
5
+ /** Clears mocked offsetWidth property on HTMLElements.
6
+ * @deprecated The testing subpackage is deprecated.
7
+ */
4
8
  export declare function clearOffsetWidthMock(): void;
@@ -1,4 +1,8 @@
1
- /** Mocks `PointerEvent`. */
1
+ /** Mocks `PointerEvent`.
2
+ * @deprecated The testing subpackage is deprecated.
3
+ */
2
4
  export declare function setupPointerEventMock(): void;
3
- /** Clears `PointerEvent` mock. */
5
+ /** Clears `PointerEvent` mock.
6
+ * @deprecated The testing subpackage is deprecated.
7
+ */
4
8
  export declare function clearPointerEventMock(): void;
@@ -1,7 +1,11 @@
1
1
  import type { PartialDeep } from 'type-fest';
2
- /** Mock the Resize Observer */
2
+ /** Mock the Resize Observer
3
+ * @deprecated The testing subpackage is deprecated. Please switch to the `@dynatrace/strato-components-testing` package.
4
+ */
3
5
  export declare function setupResizeObserverMock(
4
6
  /** When the Resize Observer should return specific results, you can pass them here */
5
7
  mockedObserveCallbackValue?: PartialDeep<ResizeObserverEntry>[]): void;
6
- /** Clear the Resize Observer */
8
+ /** Clear the Resize Observer
9
+ * @deprecated The testing subpackage is deprecated. Please switch to the `@dynatrace/strato-components-testing` package.
10
+ */
7
11
  export declare function clearResizeObserverMock(): void;
@@ -1,4 +1,8 @@
1
- /** Mocks the width and height on `window.screen` */
1
+ /** Mocks the width and height on `window.screen`
2
+ * @deprecated The testing subpackage is deprecated.
3
+ */
2
4
  export declare function setupScreenSizeMock(width?: number, height?: number): void;
3
- /** Clears mocked width and height on `window.screen`. */
5
+ /** Clears mocked width and height on `window.screen`.
6
+ * @deprecated The testing subpackage is deprecated.
7
+ */
4
8
  export declare function clearScreenSizeMock(): void;
@@ -1,8 +1,10 @@
1
1
  /**
2
2
  * Mock the scrollIntoView function since jsdom doesn't provide it
3
+ * @deprecated The testing subpackage is deprecated.
3
4
  */
4
5
  export declare function setupScrollIntoViewMock(): void;
5
6
  /**
6
7
  * reset the scrollIntoView
8
+ * @deprecated The testing subpackage is deprecated.
7
9
  */
8
10
  export declare function clearScrollIntoViewMock(): void;
@@ -1,4 +1,8 @@
1
- /** Mocks the return value of the `scrollWidth` property on all `HTMLElements`. */
1
+ /** Mocks the return value of the `scrollWidth` property on all `HTMLElements`.
2
+ * @deprecated The testing subpackage is deprecated. Please switch to the `@dynatrace/strato-components-testing` package.
3
+ */
2
4
  export declare function setupScrollWidthMock(scrollWidth: number): void;
3
- /** Clears mocked `scrollWidth` property on `HTMLElements`. */
5
+ /** Clears mocked `scrollWidth` property on `HTMLElements`.
6
+ * @deprecated The testing subpackage is deprecated. Please switch to the `@dynatrace/strato-components-testing` package.
7
+ */
4
8
  export declare function clearScrollWidthMock(): void;
@@ -6,5 +6,6 @@
6
6
  * (Mainly usefull when accessing different options than the first)
7
7
  *
8
8
  * @internal
9
+ * @deprecated The testing subpackage is deprecated.
9
10
  */
10
11
  export declare function _setupSelectMocks(): void;
@@ -1,7 +1,10 @@
1
1
  /**
2
2
  * Mocks virtualisation scrolling away by setting the containers height to something really tall.
3
3
  * Table virtualization will also rely on jest fake timers.
4
+ * @deprecated The testing subpackage is deprecated.
4
5
  */
5
6
  export declare function setupTableVirtualizationMock(containerHeight?: number): void;
6
- /** Clears the TableVirtualizationMock */
7
+ /** Clears the TableVirtualizationMock
8
+ * @deprecated The testing subpackage is deprecated.
9
+ */
7
10
  export declare function clearTableVirtualizationMock(): void;
@@ -1,4 +1,8 @@
1
- /** Mocks DOM properties and functions required for the TextEllipsis component to work. */
1
+ /** Mocks DOM properties and functions required for the TextEllipsis component to work.
2
+ * @deprecated The testing subpackage is deprecated. Please switch to the `@dynatrace/strato-components-testing` package.
3
+ */
2
4
  export declare function setupTextEllipsisMock(containerWidth?: number, textWidth?: number, mockCanvas?: boolean): void;
3
- /** Clears mocked DOM properties and functions required for the TextEllipsis component to work. */
5
+ /** Clears mocked DOM properties and functions required for the TextEllipsis component to work.
6
+ * @deprecated The testing subpackage is deprecated. Please switch to the `@dynatrace/strato-components-testing` package.
7
+ */
4
8
  export declare function clearTextEllipsisMock(): void;
@@ -1,4 +1,8 @@
1
- /** Sets up design-system mocks. */
1
+ /** Sets up design-system mocks.
2
+ * @deprecated The testing subpackage is deprecated. Please switch to the `@dynatrace/strato-components-testing` package.
3
+ */
2
4
  export declare function setup(): void;
3
- /** Resets design-system mocks. */
5
+ /** Resets design-system mocks.
6
+ * @deprecated The testing subpackage is deprecated. Please switch to the `@dynatrace/strato-components-testing` package.
7
+ */
4
8
  export declare function clear(): void;
@@ -162,6 +162,14 @@ const CssTextEllipsis = /* @__PURE__ */ (0, import_react.forwardRef)((props, for
162
162
  });
163
163
  const TextEllipsis = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwardedRef) => {
164
164
  const cssOnlyEllipsis = !props.onTextOverflow && props.truncationMode !== "middle";
165
- return cssOnlyEllipsis ? /* @__PURE__ */ import_react.default.createElement(CssTextEllipsis, { ref: forwardedRef, ...props }) : /* @__PURE__ */ import_react.default.createElement(ComputedTextEllipsis, { ref: forwardedRef, ...props });
165
+ return cssOnlyEllipsis ? (
166
+ /* eslint-disable-next-line deprecated-jsx-props/deprecated-props -- The plugin can not properly analyze spread props:
167
+ 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. */
168
+ /* @__PURE__ */ import_react.default.createElement(CssTextEllipsis, { ref: forwardedRef, ...props })
169
+ ) : (
170
+ /* eslint-disable-next-line deprecated-jsx-props/deprecated-props -- The plugin can not properly analyze spread props:
171
+ 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. */
172
+ /* @__PURE__ */ import_react.default.createElement(ComputedTextEllipsis, { ref: forwardedRef, ...props })
173
+ );
166
174
  });
167
175
  TextEllipsis.displayName = "TextEllipsis";