pixel-react 1.21.99 → 1.22.0

package/lib/components/AutoTruncateText/resizeObserverService.js

@@ -2,9 +2,7 @@
  * resizeObserverService.ts
  */
 const subscribers = new Map();
-// Created on first use, so importing this needs no ResizeObserver (e.g. SSR)
-let observer = null;
-const getObserver = () => (observer ??= new ResizeObserver(entries => {
+const observer = new ResizeObserver(entries => {
     requestAnimationFrame(() => {
         for (const entry of entries) {
             const callback = subscribers.get(entry.target);
@@ -12,15 +10,15 @@ const getObserver = () => (observer ??= new ResizeObserver(entries => {
                 callback();
         }
     });
-}));
+});
 /**
  * Register an element to the SINGLE global observer.
  */
 export const subscribe = (el, callback) => {
     subscribers.set(el, callback);
-    getObserver().observe(el);
+    observer.observe(el);
     return () => {
-        getObserver().unobserve(el);
+        observer.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,6EAA6E;AAC7E,IAAI,QAAQ,GAA0B,IAAI,CAAC;AAE3C,MAAM,WAAW,GAAG,GAAG,EAAE,CACvB,CAAC,QAAQ,KAAK,IAAI,cAAc,CAAC,OAAO,CAAC,EAAE;IACzC,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,CAAC;AAEN;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAW,EAAE,QAAoB,EAAE,EAAE;IAC7D,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"}
+{"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"}

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

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

package/lib/components/HighlightText/HighlightText.js

@@ -1,146 +1,22 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import './HighlightText.scss';
-import { Fragment, isValidElement, memo, useId, useLayoutEffect, useRef, useState, } from 'react';
-import { subscribe } from '../AutoTruncateText/resizeObserverService';
-import useInteractiveAncestor from '../../hooks/useInteractiveAncestor';
+import classNames from 'classnames';
+import { Fragment } from 'react';
 // Function to escape special characters in the search term
 const escapeRegExp = (text) => {
     return text?.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
 };
-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 }),
-        'data-tooltip-hoverable': '',
-        tabIndex: focusable ? 0 : undefined,
-    };
-};
-// One-line ellipsis cut-off, measured again when the text or its size changes
-const useIsClipped = (ref, enabled, text) => {
-    const [isClipped, setIsClipped] = useState(false);
-    useLayoutEffect(() => {
-        const element = ref.current;
-        if (!enabled || !element)
-            return undefined;
-        const measure = () => setIsClipped(element.scrollWidth > element.clientWidth + 0.5);
-        measure();
-        return subscribe(element, measure);
-    }, [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 HighlightText = ({ text = '', highlight = '', onlyExactMatch = false, }) => {
+    if (!highlight) {
+        return (_jsx("span", { "aria-label": `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;
+    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 }));
     }
-    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);
-            })));
+    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 MemoizedHighlightText = memo(HighlightText, arePropsEqual);
-MemoizedHighlightText.displayName = 'HighlightText';
-export default MemoizedHighlightText;
+export default HighlightText;
 //# 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":"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"}
+{"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"}

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

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

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

@@ -1,46 +1,5 @@
-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 */
-    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/TooltipService/TooltipService.js

@@ -1,8 +1,7 @@
 import { useEffect } from 'react';
-import tippy, { hideAll } from 'tippy.js';
+import { delegate, hideAll } from 'tippy.js';
 import 'tippy.js/dist/tippy.css';
 import './TooltipService.scss';
-const TOOLTIP_TARGET = '[data-tooltip], [data-tooltip-id], [data-tooltip-overflow]';
 const VALID_PLACEMENTS = new Set([
     'auto',
     'auto-start',
@@ -20,30 +19,6 @@ const VALID_PLACEMENTS = new Set([
     'left-start',
     'left-end',
 ]);
-const TOOLTIP_PROPS = {
-    arrow: false,
-    theme: 'ff-global-tooltip',
-    appendTo: () => document.body,
-    allowHTML: true,
-    popperOptions: {
-        modifiers: [
-            {
-                name: 'preventOverflow',
-                options: {
-                    altAxis: true,
-                    padding: 8,
-                },
-            },
-            {
-                name: 'flip',
-                options: {
-                    padding: 8,
-                    fallbackPlacements: ['top', 'right', 'left'],
-                },
-            },
-        ],
-    },
-};
 const getTooltipContent = (reference) => {
     const contentNode = document.createElement('div');
     // Accept template content via id
@@ -70,12 +45,7 @@ const getTooltipContent = (reference) => {
             return contentNode;
         }
     }
-    // An overflow-only element without its own text shows the text it cuts off
-    const rawText = reference.getAttribute('data-tooltip') ||
-        (reference.hasAttribute('data-tooltip-overflow')
-            ? reference.textContent
-            : '') ||
-        '';
+    const rawText = reference.getAttribute('data-tooltip') || '';
     if (!rawText.trim())
         return '';
     const text = rawText
@@ -109,185 +79,118 @@ const getTooltipContent = (reference) => {
     }
     return contentNode;
 };
-// One-line ellipsis cut-off, read only when the element is hovered
-const isClipped = (element) => element.scrollWidth > element.clientWidth + 0.5;
-// The innermost element with something to show. A `data-tooltip-overflow`
-// element counts only while its text is cut off; otherwise the next one out is tried.
-const findTooltipTarget = (start) => {
-    let element = start.closest(TOOLTIP_TARGET);
-    while (element) {
-        const overflowOnly = element.hasAttribute('data-tooltip-overflow');
-        if ((!overflowOnly || isClipped(element)) &&
-            getTooltipContent(element) !== '') {
-            return element;
-        }
-        element = element.parentElement?.closest(TOOLTIP_TARGET) ?? null;
-    }
-    return null;
-};
-// Tippy's own ARIA, except where it would be wrong: a hoverable tooltip is not
-// interactive, so it still describes its element and sets no aria-expanded;
-// and text shown only because an ellipsis cuts it off repeats what the element
-// already says, so it is not added as a description
-const getAria = (reference) => {
-    if (reference.hasAttribute('data-tooltip-interactive'))
-        return {};
-    const repeatsOwnText = reference.hasAttribute('data-tooltip-overflow') &&
-        !reference.hasAttribute('data-tooltip') &&
-        !reference.hasAttribute('data-tooltip-id');
-    if (!repeatsOwnText && !reference.hasAttribute('data-tooltip-hoverable')) {
-        return {};
-    }
-    return {
-        aria: { expanded: false, content: repeatsOwnText ? null : 'describedby' },
-    };
-};
-const getPlacement = (reference) => {
-    //  placement attribute for tooltip
-    const normalizedPlacement = reference
-        .getAttribute('data-tooltip-placement')
-        ?.trim()
-        .toLowerCase();
-    return normalizedPlacement && VALID_PLACEMENTS.has(normalizedPlacement)
-        ? normalizedPlacement
-        : 'bottom';
-};
-/**
- * Shows at most one tooltip at a time. The instance is created when its element
- * is hovered or focused and destroyed when it hides, so nothing is kept for
- * elements that were hovered and later removed (e.g. virtualized rows).
- */
-const startTooltips = () => {
-    let active = null;
-    // Closed with Escape: stays hidden until the pointer or focus leaves it
-    let dismissed = null;
-    // While a tooltip shows: refresh it when its attributes change, and drop it
-    // when its element leaves the page
-    const activeObserver = new MutationObserver((records) => {
-        if (!active)
-            return;
-        if (!active.reference.isConnected) {
-            destroyActive();
-            return;
-        }
-        if (records.some((record) => record.type === 'attributes')) {
-            const content = getTooltipContent(active.reference);
-            if (content === '') {
-                destroyActive();
-            }
-            else {
-                active.setContent(content);
+const TooltipService = () => {
+    useEffect(() => {
+        const hideTooltipsOnScroll = (event) => {
+            const target = event.target;
+            if (target instanceof Element && target.closest('[data-tippy-root]')) {
+                return;
             }
-        }
-    });
-    const destroyActive = () => {
-        activeObserver.disconnect();
-        active?.destroy();
-        active = null;
-    };
-    const show = (reference) => {
-        destroyActive();
-        // Another copy of this service (e.g. from a second bundle) already handles it
-        if (reference._tippy)
-            return;
-        active = tippy(reference, {
-            ...TOOLTIP_PROPS,
-            content: getTooltipContent(reference),
-            placement: getPlacement(reference),
-            // This is  specific tooltip attributefor interactive. A hoverable
-            // tooltip uses it only so the pointer can move onto it (WCAG 1.4.13).
-            interactive: reference.hasAttribute('data-tooltip-interactive') ||
-                reference.hasAttribute('data-tooltip-hoverable'),
-            ...getAria(reference),
-            showOnCreate: true,
-            onShow(instance) {
-                if (!instance.reference.isConnected)
+            hideAll({ duration: 0 });
+        };
+        window.addEventListener('scroll', hideTooltipsOnScroll, true);
+        const instance = delegate(document.body, {
+            target: '[data-tooltip], [data-tooltip-id]',
+            arrow: false,
+            placement: 'bottom',
+            theme: 'ff-global-tooltip',
+            appendTo: document.body,
+            allowHTML: true,
+            popperOptions: {
+                modifiers: [
+                    {
+                        name: 'preventOverflow',
+                        options: {
+                            altAxis: true,
+                            padding: 8,
+                        },
+                    },
+                    {
+                        name: 'flip',
+                        options: {
+                            padding: 8,
+                            fallbackPlacements: ['top', 'right', 'left'],
+                        },
+                    },
+                ],
+            },
+            content(reference) {
+                return getTooltipContent(reference);
+            },
+            onShow(tippyInstance) {
+                const { reference } = tippyInstance;
+                if (!document.body.contains(reference)) {
                     return false;
+                }
+                const latestContent = getTooltipContent(reference);
+                // If no tooltip content is currently available, prevent showing.
+                if (latestContent === '') {
+                    return false;
+                }
+                // This is  specific tooltip attributefor interactive
+                const isInteractive = tippyInstance.reference.hasAttribute('data-tooltip-interactive');
+                //  placement attribute for tooltip
+                const rawPlacement = tippyInstance.reference.getAttribute('data-tooltip-placement');
+                const normalizedPlacement = rawPlacement?.trim().toLowerCase();
+                const placement = normalizedPlacement && VALID_PLACEMENTS.has(normalizedPlacement)
+                    ? normalizedPlacement
+                    : 'bottom';
+                tippyInstance.setProps({
+                    interactive: isInteractive,
+                    placement,
+                    content: latestContent,
+                });
             },
-            onMount(instance) {
-                const isExplicitlyInteractive = instance.reference.hasAttribute('data-tooltip-interactive');
-                if (!isExplicitlyInteractive) {
-                    const tippyBox = instance.popper.querySelector('.tippy-box');
-                    if (tippyBox && tippyBox.scrollHeight > tippyBox.clientHeight) {
-                        instance.setProps({ interactive: true });
+            onCreate(tippyInstance) {
+                const attrObserver = new MutationObserver(() => {
+                    if (tippyInstance.state.isVisible) {
+                        const newContent = getTooltipContent(tippyInstance.reference);
+                        if (newContent === '') {
+                            tippyInstance.hide();
+                        }
+                        else {
+                            tippyInstance.setContent(newContent);
+                        }
                     }
+                });
+                attrObserver.observe(tippyInstance.reference, {
+                    attributes: true,
+                    attributeFilter: ['data-tooltip', 'data-tooltip-id'],
+                });
+                tippyInstance._attrObserver = attrObserver;
+                const parentEl = tippyInstance.reference.parentElement;
+                if (parentEl) {
+                    const domObserver = new MutationObserver(() => {
+                        if (!document.body.contains(tippyInstance.reference)) {
+                            tippyInstance.hide();
+                            tippyInstance.destroy();
+                        }
+                    });
+                    domObserver.observe(parentEl, { childList: true });
+                    tippyInstance._domObserver = domObserver;
                 }
             },
-            onHidden(instance) {
-                if (instance === active) {
-                    destroyActive();
-                }
-                else {
-                    instance.destroy();
+            onDestroy(tippyInstance) {
+                tippyInstance._attrObserver?.disconnect();
+                tippyInstance._domObserver?.disconnect();
+            },
+            onMount(tippyInstance) {
+                const isExplicitlyInteractive = tippyInstance.reference.hasAttribute('data-tooltip-interactive');
+                if (!isExplicitlyInteractive) {
+                    const tippyBox = tippyInstance.popper.querySelector('.tippy-box');
+                    if (tippyBox && tippyBox.scrollHeight > tippyBox.clientHeight) {
+                        tippyInstance.setProps({ interactive: true });
+                    }
                 }
             },
         });
-        activeObserver.observe(reference, {
-            attributes: true,
-            attributeFilter: ['data-tooltip', 'data-tooltip-id'],
-        });
-        activeObserver.observe(document.body, { childList: true, subtree: true });
-    };
-    const handlePointerOrFocus = (event) => {
-        const { target } = event;
-        if (!(target instanceof Element))
-            return;
-        // Moving into an interactive tooltip keeps it open
-        if (active?.popper.contains(target))
-            return;
-        if (dismissed && !dismissed.contains(target))
-            dismissed = null;
-        // Nothing new under the pointer: the shown tooltip hides itself on mouseleave
-        const closest = target.closest(TOOLTIP_TARGET);
-        if (!closest || closest === active?.reference)
-            return;
-        const reference = findTooltipTarget(closest);
-        if (reference &&
-            reference !== active?.reference &&
-            reference !== dismissed) {
-            show(reference);
-        }
-    };
-    // Escape hides the tooltip without moving the pointer or focus (WCAG 1.4.13)
-    const hideOnEscape = (event) => {
-        if (event.key !== 'Escape' || !active)
-            return;
-        dismissed = active.reference;
-        destroyActive();
-    };
-    const hideTooltipsOnScroll = (event) => {
-        const target = event.target;
-        if (target instanceof Element && target.closest('[data-tippy-root]')) {
-            return;
-        }
-        hideAll({ duration: 0 });
-        destroyActive();
-    };
-    document.addEventListener('mouseover', handlePointerOrFocus);
-    document.addEventListener('focusin', handlePointerOrFocus);
-    document.addEventListener('keydown', hideOnEscape);
-    window.addEventListener('scroll', hideTooltipsOnScroll, true);
-    return () => {
-        document.removeEventListener('mouseover', handlePointerOrFocus);
-        document.removeEventListener('focusin', handlePointerOrFocus);
-        document.removeEventListener('keydown', hideOnEscape);
-        window.removeEventListener('scroll', hideTooltipsOnScroll, true);
-        destroyActive();
-    };
-};
-// Every mounted TooltipService shares one set of listeners
-let mountedServices = 0;
-let stopTooltips = null;
-const TooltipService = () => {
-    useEffect(() => {
-        mountedServices += 1;
-        if (mountedServices === 1)
-            stopTooltips = startTooltips();
         return () => {
-            mountedServices -= 1;
-            if (mountedServices === 0) {
-                stopTooltips?.();
-                stopTooltips = null;
+            window.removeEventListener('scroll', hideTooltipsOnScroll, true);
+            if (Array.isArray(instance)) {
+                instance.forEach((i) => i.destroy());
+            }
+            else {
+                instance.destroy();
             }
         };
     }, []);