pixel-react 1.22.5 → 1.22.6

package/lib/components/AutoTruncateText/AutoTruncateText.js

@@ -1,48 +1,56 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo, useLayoutEffect, useRef } from 'react';
 import './AutoTruncateText.scss';
-import { useResizeSignal } from './useResizeSignal';
+import { subscribe } from './resizeObserverService';
 const AutoTruncateText = memo(({ children, className, lines = 1, interactive = false, placement = 'bottom', allowedHtml = false, tooltipText = "" }) => {
     const textRef = useRef(null);
-    const signal = useResizeSignal(textRef);
+    const isSingleLine = lines <= 1;
+    const normalizedPlacement = placement?.toLowerCase();
+    // Several lines: whether the clamp cuts text off is measured in the resize
+    // observer's callback, after layout, and written after every read
     useLayoutEffect(() => {
         const el = textRef.current;
-        if (!el)
-            return;
-        const normalizedPlacement = placement?.toLowerCase();
-        const truncated = lines > 1
-            ? el.scrollHeight > el.clientHeight + 0.5
-            : el.scrollWidth > el.clientWidth + 0.5;
-        if (interactive) {
-            el.setAttribute('data-tooltip-interactive', 'true');
-        }
-        if (normalizedPlacement) {
-            el.setAttribute('data-tooltip-placement', normalizedPlacement);
-        }
-        if (truncated) {
-            if (allowedHtml) {
-                el.setAttribute('data-tooltip', tooltipText);
-                el.setAttribute('data-tooltip-allowhtml', 'true');
-            }
-            else {
-                const text = tooltipText || el.textContent?.trim() || '';
-                if (text) {
+        if (!el || isSingleLine)
+            return undefined;
+        return subscribe(el, () => {
+            const truncated = el.scrollHeight > el.clientHeight + 0.5;
+            const text = allowedHtml
+                ? tooltipText
+                : tooltipText || el.textContent?.trim() || '';
+            return () => {
+                if (truncated && text) {
                     el.setAttribute('data-tooltip', text);
+                    if (allowedHtml)
+                        el.setAttribute('data-tooltip-allowhtml', 'true');
                 }
-            }
-        }
-        else {
-            el.removeAttribute('data-tooltip');
-            el.removeAttribute('data-tooltip-allowhtml');
-        }
-    }, [signal, children, interactive, lines, placement]);
+                else {
+                    el.removeAttribute('data-tooltip');
+                    el.removeAttribute('data-tooltip-allowhtml');
+                }
+            };
+        });
+    }, [children, isSingleLine, allowedHtml, tooltipText]);
+    // One line: TooltipService checks the cut-off itself when the text is
+    // hovered, so nothing is measured while it mounts (e.g. one per table row)
+    const showsWhenCutOff = isSingleLine && (!allowedHtml || !!tooltipText);
+    const tooltipProps = {
+        ...(showsWhenCutOff ? { 'data-tooltip-overflow': '' } : {}),
+        ...(showsWhenCutOff && tooltipText ? { 'data-tooltip': tooltipText } : {}),
+        ...(showsWhenCutOff && allowedHtml
+            ? { 'data-tooltip-allowhtml': 'true' }
+            : {}),
+        ...(interactive ? { 'data-tooltip-interactive': 'true' } : {}),
+        ...(normalizedPlacement
+            ? { 'data-tooltip-placement': normalizedPlacement }
+            : {}),
+    };
     const textContent = typeof children === 'string' ? children : '';
     return (_jsx("div", { ref: textRef, className: className ? `ff-ellipsis ${className}` : 'ff-ellipsis', style: {
             display: lines > 1 ? '-webkit-box' : 'block',
             WebkitLineClamp: lines > 1 ? lines : undefined,
             WebkitBoxOrient: lines > 1 ? 'vertical' : undefined,
             whiteSpace: lines === 1 ? 'nowrap' : 'normal',
-        }, role: "text", "aria-label": textContent || 'Truncated text', children: children }));
+        }, role: "text", "aria-label": textContent || 'Truncated text', ...tooltipProps, children: children }));
 });
 AutoTruncateText.displayName = 'AutoTruncateText';
 export default AutoTruncateText;

package/lib/components/AutoTruncateText/AutoTruncateText.js.map

@@ -1 +1 @@
-{"version":3,"file":"AutoTruncateText.js","sourceRoot":"","sources":["../../../src/components/AutoTruncateText/AutoTruncateText.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"AutoTruncateText.js","sourceRoot":"","sources":["../../../src/components/AutoTruncateText/AutoTruncateText.tsx"],"names":[],"mappings":"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"}

package/lib/components/AutoTruncateText/resizeObserverService.d.ts

@@ -2,6 +2,14 @@
  * resizeObserverService.ts
  */
 /**
- * Register an element to the SINGLE global observer.
+ * Reads sizes and may return a function that writes to the DOM. Every read
+ * runs before any write, so a write never makes the next read lay out again.
  */
-export declare const subscribe: (el: Element, callback: () => void) => () => void;
+type ResizeCallback = () => void | (() => void);
+/**
+ * Register an element to the SINGLE global observer. The observer reports a
+ * newly observed element once, after its first layout, so subscribing is also
+ * how a subscriber gets its first measurement.
+ */
+export declare const subscribe: (el: Element, callback: ResizeCallback) => () => void;
+export {};

package/lib/components/AutoTruncateText/resizeObserverService.js

@@ -2,23 +2,30 @@
  * resizeObserverService.ts
  */
 const subscribers = new Map();
-const observer = new ResizeObserver(entries => {
-    requestAnimationFrame(() => {
-        for (const entry of entries) {
-            const callback = subscribers.get(entry.target);
-            if (callback)
-                callback();
-        }
-    });
-});
+// Created on first use, so importing this needs no ResizeObserver (e.g. SSR)
+let observer = null;
+// Callbacks run inside the observer's callback, where layout is already done,
+// so they can read sizes for free. A frame later the next commit may have
+// changed the DOM, and the same read would force a layout per element.
+const getObserver = () => (observer ??= new ResizeObserver(entries => {
+    const writes = [];
+    for (const entry of entries) {
+        const write = subscribers.get(entry.target)?.();
+        if (typeof write === 'function')
+            writes.push(write);
+    }
+    writes.forEach(write => write());
+}));
 /**
- * Register an element to the SINGLE global observer.
+ * Register an element to the SINGLE global observer. The observer reports a
+ * newly observed element once, after its first layout, so subscribing is also
+ * how a subscriber gets its first measurement.
  */
 export const subscribe = (el, callback) => {
     subscribers.set(el, callback);
-    observer.observe(el);
+    getObserver().observe(el);
     return () => {
-        observer.unobserve(el);
+        getObserver().unobserve(el);
         subscribers.delete(el);
     };
 };

package/lib/components/AutoTruncateText/resizeObserverService.js.map

@@ -1 +1 @@
-{"version":3,"file":"resizeObserverService.js","sourceRoot":"","sources":["../../../src/components/AutoTruncateText/resizeObserverService.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,WAAW,GAAG,IAAI,GAAG,EAAuB,CAAC;AAEnD,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,OAAO,CAAC,EAAE;IAC5C,qBAAqB,CAAC,GAAG,EAAE;QACzB,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE,CAAC;YAC5B,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;YAC/C,IAAI,QAAQ;gBAAE,QAAQ,EAAE,CAAC;QAC3B,CAAC;IACH,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAW,EAAE,QAAoB,EAAE,EAAE;IAC7D,WAAW,CAAC,GAAG,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAC;IAC9B,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;IAErB,OAAO,GAAG,EAAE;QACV,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;QACvB,WAAW,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IACzB,CAAC,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"resizeObserverService.js","sourceRoot":"","sources":["../../../src/components/AutoTruncateText/resizeObserverService.ts"],"names":[],"mappings":"AAAA;;GAEG;AAQH,MAAM,WAAW,GAAG,IAAI,GAAG,EAA2B,CAAC;AAEvD,6EAA6E;AAC7E,IAAI,QAAQ,GAA0B,IAAI,CAAC;AAE3C,8EAA8E;AAC9E,0EAA0E;AAC1E,uEAAuE;AACvE,MAAM,WAAW,GAAG,GAAG,EAAE,CACvB,CAAC,QAAQ,KAAK,IAAI,cAAc,CAAC,OAAO,CAAC,EAAE;IACzC,MAAM,MAAM,GAAmB,EAAE,CAAC;IAClC,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE,CAAC;QAC5B,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,EAAE,CAAC;QAChD,IAAI,OAAO,KAAK,KAAK,UAAU;YAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACtD,CAAC;IACD,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC;AACnC,CAAC,CAAC,CAAC,CAAC;AAEN;;;;GAIG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAW,EAAE,QAAwB,EAAE,EAAE;IACjE,WAAW,CAAC,GAAG,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAC;IAC9B,WAAW,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;IAE1B,OAAO,GAAG,EAAE;QACV,WAAW,EAAE,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;QAC5B,WAAW,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IACzB,CAAC,CAAC;AACJ,CAAC,CAAC"}

package/lib/components/HighlightText/HighlightText.d.ts

@@ -1,4 +1,4 @@
 import { HighlightTextProps } from './types';
 import './HighlightText.scss';
-declare const HighlightText: React.FC<HighlightTextProps>;
-export default HighlightText;
+declare const MemoizedHighlightText: import("react").MemoExoticComponent<({ text, segments, highlight, onlyExactMatch, color, fontWeight, tooltip, truncate, }: HighlightTextProps) => import("react").JSX.Element>;
+export default MemoizedHighlightText;

package/lib/components/HighlightText/HighlightText.js

@@ -1,22 +1,153 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import './HighlightText.scss';
-import classNames from 'classnames';
-import { Fragment } from 'react';
+import { Fragment, isValidElement, memo, useId, useLayoutEffect, useRef, useState, } from 'react';
+import { subscribe } from '../AutoTruncateText/resizeObserverService';
+import useInteractiveAncestor from '../../hooks/useInteractiveAncestor';
 // Function to escape special characters in the search term
 const escapeRegExp = (text) => {
     return text?.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
 };
-const HighlightText = ({ text = '', highlight = '', onlyExactMatch = false, }) => {
-    if (!highlight) {
-        return (_jsx("span", { "aria-label": `Text: ${text}`, children: text }));
+const getSegmentText = (segment) => typeof segment === 'string' ? segment : (segment.text ?? '');
+const getTextStyle = (color, fontWeight) => color || fontWeight ? { color, fontWeight } : undefined;
+// Text goes in `data-tooltip`. JSX cannot, so it is rendered into a hidden
+// element that `data-tooltip-id` points to, and TooltipService copies its HTML.
+// The pointer can move onto the tooltip (WCAG 1.4.13), and the element takes
+// focus so keyboard users get the tooltip too (WCAG 2.1.1).
+const getTooltipProps = (tooltip, templateId, focusable) => {
+    if (!tooltip)
+        return {};
+    return {
+        ...(isValidElement(tooltip)
+            ? { 'data-tooltip-id': templateId }
+            : {
+                'data-tooltip': tooltip,
+                // Keeps line breaks, e.g. one `name: value` per line
+                'data-tooltip-multiline': typeof tooltip === 'string' && tooltip.includes('\n')
+                    ? ''
+                    : undefined,
+            }),
+        'data-tooltip-hoverable': '',
+        tabIndex: focusable ? 0 : undefined,
+    };
+};
+// One-line ellipsis cut-off, measured again when the text or its size changes.
+// Measured only in the resize observer's callback, after layout: reading the
+// width here, during the commit, forced a layout for every row that mounted.
+// Subscribing again when the text changes gets a fresh report.
+const useIsClipped = (ref, enabled, text) => {
+    const [isClipped, setIsClipped] = useState(false);
+    useLayoutEffect(() => {
+        const element = ref.current;
+        if (!enabled || !element)
+            return undefined;
+        return subscribe(element, () => setIsClipped(element.scrollWidth > element.clientWidth + 0.5));
+    }, [ref, enabled, text]);
+    return enabled && isClipped;
+};
+// Where the search term occurs in the whole text, ignoring case
+const findMatches = (text, highlight) => {
+    const ranges = [];
+    const regex = new RegExp(escapeRegExp(highlight), 'gi');
+    for (let match = regex.exec(text); match; match = regex.exec(text)) {
+        ranges.push([match.index, match.index + match[0].length]);
+    }
+    return ranges;
+};
+// One segment's text, with the matches that overlap it marked. `start` is where
+// the segment begins in the whole text, so a match can run across segments.
+const markMatches = (text, start, ranges) => {
+    const end = start + text.length;
+    const nodes = [];
+    let cursor = start;
+    for (const [matchStart, matchEnd] of ranges) {
+        if (matchStart >= end)
+            break;
+        if (matchEnd <= start)
+            continue;
+        const from = Math.max(matchStart, start);
+        const to = Math.min(matchEnd, end);
+        if (from > cursor)
+            nodes.push(text.slice(cursor - start, from - start));
+        nodes.push(_jsx("mark", { className: "ff-highlight-bg", children: text.slice(from - start, to - start) }, `highlight-${from}`));
+        cursor = to;
     }
-    const escapedHighlight = escapeRegExp(highlight); // Escape special characters
-    const parts = text?.split(new RegExp(`(${escapedHighlight})`, 'gi')); // Use escaped string in the regex
-    if (onlyExactMatch) {
-        const isTextEqualsHighlight = text.toLowerCase() === highlight.toLowerCase();
-        return (_jsx("span", { className: classNames(isTextEqualsHighlight ? 'ff-highlight-bg' : ''), "aria-label": `Highlighted text: ${text}`, children: text }));
+    if (!nodes.length)
+        return text;
+    if (cursor < end)
+        nodes.push(text.slice(cursor - start));
+    return nodes;
+};
+const HighlightText = ({ text = '', segments, highlight = '', onlyExactMatch = false, color, fontWeight, tooltip, truncate = false, }) => {
+    const rowRef = useRef(null);
+    const tooltipId = `ff-highlight-tooltip-${useId().replace(/:/g, '')}`;
+    const query = String(highlight ?? '');
+    const fullText = segments ? segments.map(getSegmentText).join('') : text;
+    const isExactMatch = !!query && onlyExactMatch && fullText.toLowerCase() === query.toLowerCase();
+    const ranges = query && !onlyExactMatch ? findMatches(fullText, query) : [];
+    // Without a tooltip, TooltipService shows the full text while it is cut off
+    const showsOverflow = truncate && !tooltip;
+    const hasTooltip = !!tooltip ||
+        showsOverflow ||
+        !!segments?.some((segment) => typeof segment !== 'string' && !!segment.tooltip);
+    const isClipped = useIsClipped(rowRef, showsOverflow, fullText);
+    // Inside a control (e.g. a button), that control takes focus instead
+    const focusable = !useInteractiveAncestor(rowRef, hasTooltip);
+    let offset = 0;
+    const content = (segments ?? [text]).map((segment, index) => {
+        const value = getSegmentText(segment);
+        const marked = markMatches(value, offset, ranges);
+        offset += value.length;
+        if (typeof segment === 'string') {
+            return _jsx(Fragment, { children: marked }, `segment-${index}`);
+        }
+        return (_jsx("span", { style: getTextStyle(segment.color, segment.fontWeight), ...getTooltipProps(segment.tooltip, `${tooltipId}-${index}`, focusable), children: marked }, `segment-${index}`));
+    });
+    const templates = [
+        { id: tooltipId, tooltip },
+        ...(segments ?? []).map((segment, index) => ({
+            id: `${tooltipId}-${index}`,
+            tooltip: typeof segment === 'string' ? undefined : segment.tooltip,
+        })),
+    ].filter((template) => isValidElement(template.tooltip));
+    // The row takes focus only while its full text is hidden
+    const rowTooltipProps = showsOverflow
+        ? {
+            'data-tooltip-overflow': '',
+            'data-tooltip-hoverable': '',
+            tabIndex: focusable && isClipped ? 0 : undefined,
+        }
+        : getTooltipProps(tooltip, tooltipId, focusable);
+    return (_jsxs(_Fragment, { children: [_jsx("span", { ref: rowRef, className: truncate ? 'ff-highlight-text--truncate' : undefined, style: getTextStyle(color, fontWeight), ...rowTooltipProps, children: isExactMatch ? (_jsx("mark", { className: "ff-highlight-bg", children: content })) : (content) }), templates.map((template) => (_jsx("span", { id: template.id, hidden: true, children: template.tooltip }, template.id)))] }));
+};
+const isSameSegment = (a, b) => typeof a === 'string' || typeof b === 'string'
+    ? a === b
+    : a.text === b.text &&
+        a.color === b.color &&
+        a.fontWeight === b.fontWeight &&
+        a.tooltip === b.tooltip;
+// Segments are compared by value (a JSX tooltip by reference), so rows that
+// rebuild the same segments on every render (e.g. in a virtualized table) do
+// not re-render
+const arePropsEqual = (prev, next) => {
+    const keys = Object.keys({
+        ...prev,
+        ...next,
+    });
+    if (keys.some((key) => key !== 'segments' && !Object.is(prev[key], next[key]))) {
+        return false;
     }
-    return (_jsx("span", { "aria-label": `Highlighted text: ${text}`, children: parts.map((part, index) => part?.toLowerCase() === highlight?.toLowerCase() ? (_jsx("span", { className: "ff-highlight-bg", children: part }, `highlight-${index}-${part}`)) : (_jsx(Fragment, { children: part }, `normal-${index}-${part}`))) }));
+    const { segments: before } = prev;
+    const { segments: after } = next;
+    return (before === after ||
+        (!!before &&
+            !!after &&
+            before.length === after.length &&
+            before.every((segment, index) => {
+                const other = after[index];
+                return other !== undefined && isSameSegment(segment, other);
+            })));
 };
-export default HighlightText;
+const MemoizedHighlightText = memo(HighlightText, arePropsEqual);
+MemoizedHighlightText.displayName = 'HighlightText';
+export default MemoizedHighlightText;
 //# sourceMappingURL=HighlightText.js.map

package/lib/components/HighlightText/HighlightText.js.map

@@ -1 +1 @@
-{"version":3,"file":"HighlightText.js","sourceRoot":"","sources":["../../../src/components/HighlightText/HighlightText.tsx"],"names":[],"mappings":";AACA,OAAO,sBAAsB,CAAC;AAC9B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,2DAA2D;AAC3D,MAAM,YAAY,GAAG,CAAC,IAAY,EAAU,EAAE;IAC5C,OAAO,IAAI,EAAE,OAAO,CAAC,qBAAqB,EAAE,MAAM,CAAC,CAAC,CAAC,oCAAoC;AAC3F,CAAC,CAAC;AAEF,MAAM,aAAa,GAAiC,CAAC,EACnD,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,EAAE,EACd,cAAc,GAAG,KAAK,GACvB,EAAE,EAAE;IACH,IAAI,CAAC,SAAS,EAAE,CAAC;QACf,OAAO,CACL,6BAAkB,SAAS,IAAI,EAAE,YAAG,IAAI,GAAQ,CACjD,CAAC;IACJ,CAAC;IAED,MAAM,gBAAgB,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,4BAA4B;IAC9E,MAAM,KAAK,GAAG,IAAI,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,IAAI,gBAAgB,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,kCAAkC;IAExG,IAAI,cAAc,EAAE,CAAC;QACnB,MAAM,qBAAqB,GACzB,IAAI,CAAC,WAAW,EAAE,KAAK,SAAS,CAAC,WAAW,EAAE,CAAC;QACjD,OAAO,CACL,eACE,SAAS,EAAE,UAAU,CAAC,qBAAqB,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,CAAC,gBACzD,qBAAqB,IAAI,EAAE,YAEtC,IAAI,GACA,CACR,CAAC;IACJ,CAAC;IAED,OAAO,CACL,6BAAkB,qBAAqB,IAAI,EAAE,YAC1C,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CACzB,IAAI,EAAE,WAAW,EAAE,KAAK,SAAS,EAAE,WAAW,EAAE,CAAC,CAAC,CAAC,CACjD,eAAyC,SAAS,EAAC,iBAAiB,YACjE,IAAI,IADI,aAAa,KAAK,IAAI,IAAI,EAAE,CAEhC,CACR,CAAC,CAAC,CAAC,CACF,KAAC,QAAQ,cAAkC,IAAI,IAAhC,UAAU,KAAK,IAAI,IAAI,EAAE,CAAmB,CAC5D,CACF,GACI,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"HighlightText.js","sourceRoot":"","sources":["../../../src/components/HighlightText/HighlightText.tsx"],"names":[],"mappings":"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"}

package/lib/components/HighlightText/index.d.ts

@@ -1 +1,2 @@
 export { default } from './HighlightText';
+export type { HighlightTextProps, HighlightTextPart, HighlightTextSegment, } from './types';

package/lib/components/HighlightText/types.d.ts

@@ -1,5 +1,51 @@
+import type { CSSProperties, ReactElement } from 'react';
+/** A styled part of the text, e.g. a variable inside a step name */
+export interface HighlightTextPart {
+    text: string;
+    /**
+     * Needs the same contrast as `color` on the row. Colour alone must not tell
+     * kinds of parts apart (WCAG 1.4.1): a tooltip can say what the part is.
+     */
+    color?: string;
+    fontWeight?: CSSProperties['fontWeight'];
+    /**
+     * Shown on hover over this part only. Text or JSX, as for `tooltip` below.
+     * A line break (`\n`) in text starts a new line, e.g. for an element's name
+     * and type; prefer that over JSX in long lists, since JSX tooltips render a
+     * hidden copy in every row.
+     */
+    tooltip?: string | ReactElement;
+}
+/** Plain text, or a styled part */
+export type HighlightTextSegment = string | HighlightTextPart;
 export interface HighlightTextProps {
     text?: string;
+    /**
+     * Use instead of `text` when parts need their own colour or tooltip.
+     * Search highlighting runs on the joined text, so a match can span parts.
+     */
+    segments?: HighlightTextSegment[];
     highlight?: String;
     onlyExactMatch?: boolean;
+    /**
+     * Text colour: any CSS colour value or variable, e.g. `var(--brand-color)`.
+     * WCAG 1.4.6 (AAA) needs 7:1 contrast with the background (4.5:1 for large
+     * text), also against the search highlight.
+     */
+    color?: string;
+    fontWeight?: CSSProperties['fontWeight'];
+    /**
+     * Shown on hover or keyboard focus, through the global TooltipService. The
+     * text takes focus for it, except inside another control (e.g. a button),
+     * which should then carry the tooltip itself. Escape hides it. JSX is copied
+     * into the tooltip as HTML, so it is static: event handlers inside it do not
+     * run.
+     */
+    tooltip?: string | ReactElement;
+    /**
+     * Keep to one line and end with an ellipsis when it does not fit. The full
+     * text shows on hover or focus, only while it is cut off (unless `tooltip`
+     * is set); the row takes focus only then.
+     */
+    truncate?: boolean;
 }

package/lib/components/Icon/iconList.js

@@ -680,10 +680,9 @@ import RecorderResumePlaybackIcon from '../../assets/icons/recorder_resume_playb
 import RecorderStopPlaybackIcon from '../../assets/icons/recorder_stop_playback_icon.svg?react';
 import RecorderResumeRecordingIcon from '../../assets/icons/recorder_resume_recording_icon.svg?react';
 import RecorderStopRecordingIcon from '../../assets/icons/recorder_stop_recording_icon.svg?react';
-import ImageIcon from '../../assets/icons/image.svg?react';
 import Reports from '../../assets/icons/reports.svg?react';
 import Code_404 from '../../assets/icons/code_404.svg?react';
-import Mansit_Bt_Icon from '../../assets/icons/mantis_bt_icon.svg?react';
+import Mantis_Bt_Icon from '../../assets/icons/mantis_bt_icon.svg?react';
 Components['success'] = ToastSuccessIcon;
 Components['setting_icon'] = SettingIcon;
 Components['create_manual_auto_mark'] = CreateManualTag;
@@ -1369,9 +1368,8 @@ Components['recorder_resume_playback_icon'] = RecorderResumePlaybackIcon;
 Components['recorder_stop_playback_icon'] = RecorderStopPlaybackIcon;
 Components['recorder_resume_recording_icon'] = RecorderResumeRecordingIcon;
 Components['recorder_stop_recording_icon'] = RecorderStopRecordingIcon;
-Components['image'] = ImageIcon;
 Components['reports'] = Reports;
 Components['code_404'] = Code_404;
-Components['mantis_bt_icon'] = Mansit_Bt_Icon;
+Components['mantis_bt_icon'] = Mantis_Bt_Icon;
 export default Components;
 //# sourceMappingURL=iconList.js.map