@pega/cosmos-react-core 9.0.0-build.9.8 → 9.0.0

package/lib/hooks/useFocusWithin.js

@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback, useRef } from 'react';
-import { getAllPopovers, isInstance, normalizeTargets } from '../utils';
+import { getAllPopovers, getParentWindow, isInstance, normalizeTargets } from '../utils';
 import useConfiguration from './useConfiguration';
 const getElements = (els) => normalizeTargets(els)
     .flatMap(el => [el, ...getAllPopovers(el)])
@@ -13,7 +13,6 @@ const useFocusWithin = (els, onFocusChange) => {
     const [hasFocus, setFocus] = useState(false);
     const focusedElRef = useRef(null);
     const { portalTarget } = useConfiguration();
-    const windowContext = portalTarget?.ownerDocument?.defaultView || window;
     const handlerAbortControllerRef = useRef();
     useEffect(() => {
         return () => {
@@ -53,14 +52,20 @@ const useFocusWithin = (els, onFocusChange) => {
             handlerAbortController.abort();
         };
         // For keyboard and SR navigation - wait for 'focusin'.
-        windowContext?.document?.addEventListener('focusin', handler, {
+        // attach to root node of the first element is enough, since all should share the same root
+        (elements[0] ?? portalTarget)
+            ?.getRootNode({ composed: false })
+            .addEventListener('focusin', handler, {
             once: true,
             signal: handlerAbortController.signal
         });
         // For mouse and touch navigation - wait for 'mouseup'.
         // The chosen event need to occur before 'click' to allow the given callback code finish before
         // 'click' handlers.
-        windowContext?.document?.addEventListener('mouseup', handler, {
+        // attach to root node of the first element is enough, since all should share the same root
+        (elements[0] ?? portalTarget)
+            ?.getRootNode({ composed: true })
+            .addEventListener('mouseup', handler, {
             once: true,
             signal: handlerAbortController.signal
         });
@@ -73,11 +78,11 @@ const useFocusWithin = (els, onFocusChange) => {
         };
         try {
             // When in iframe, we need to listen to parent window events as well.
-            window.parent?.document.addEventListener('focusin', parentWindowHandler, {
+            getParentWindow()?.document.addEventListener('focusin', parentWindowHandler, {
                 once: true,
                 signal: handlerAbortController.signal
             });
-            window.parent?.document.addEventListener('mouseup', parentWindowHandler, {
+            getParentWindow()?.document.addEventListener('mouseup', parentWindowHandler, {
                 once: true,
                 signal: handlerAbortController.signal
             });

package/lib/hooks/useFocusWithin.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFocusWithin.js","sourceRoot":"","sources":["../../src/hooks/useFocusWithin.ts"],"names":[],"mappings":"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","sourcesContent":["import { useState, useEffect, useCallback, useRef } from 'react';\nimport type { RefObject } from 'react';\n\nimport { getAllPopovers, isInstance, normalizeTargets } from '../utils';\n\nimport useConfiguration from './useConfiguration';\n\nconst getElements = <T extends HTMLElement = HTMLElement>(\n  els: (T | null | RefObject<T | null>)[]\n) =>\n  normalizeTargets(els)\n    .flatMap(el => [el, ...getAllPopovers(el)])\n    .filter((el): el is HTMLElement => isInstance(el, HTMLElement));\n\n/** Hook for properly handling focus state of children components.\n * @example const hasFocus = useFocusWithin([containerRef, ...], (isFocused, element) => { doSomething; });\n * @param onFocusChange Callback function that is invoked with the current focus state and the current element when any child elements takes focus or all of them lose focus.\n * @returns * hasFocus:: A boolean indicating if the ref element has focus or not.\n */\nconst useFocusWithin = <T extends HTMLElement = HTMLElement>(\n  els: (T | null | RefObject<T | null>)[],\n  onFocusChange?: (isFocused: boolean, element: T | Element | null) => void\n): boolean => {\n  const [hasFocus, setFocus] = useState(false);\n  const focusedElRef = useRef<T | Element | null>(null);\n  const { portalTarget } = useConfiguration();\n  const windowContext = portalTarget?.ownerDocument?.defaultView || window;\n\n  const handlerAbortControllerRef = useRef<AbortController>();\n  useEffect(() => {\n    return () => {\n      handlerAbortControllerRef.current?.abort();\n    };\n  }, []);\n\n  const onBlur = useCallback(\n    (e: FocusEvent | Event) => {\n      if (!hasFocus) return;\n\n      const relatedTarget = isInstance(e, FocusEvent) ? e.relatedTarget : null;\n\n      // Gather observed elements along with their popovers to probe for element which gains focus.\n      const elements = normalizeTargets(els).flatMap(el => [el, ...getAllPopovers(el)]);\n\n      if (isInstance(relatedTarget, Node)) {\n        // changing focus to another relevant child doesn't count\n        const focusedEl = elements.find(el => el?.contains(relatedTarget));\n        if (focusedEl) {\n          // ... just update the currently focused item\n          focusedElRef.current = focusedEl;\n          return;\n        }\n      }\n\n      // Code below is similar to the useOuterEvent hook, but single-shot only and need to be attached\n      // after blur event only. Due to various order of events between browsers and OSes, we need to\n      // postpone calling 'onBlur' callback until next element gets focus or on outer click to check\n      // if the relevant element contains the target element, which means the focus is retained.\n      const handlerAbortController = new AbortController();\n      const handler = (fe: Event | FocusEvent | MouseEvent) => {\n        if (\n          !elements.some(el => {\n            return fe.composedPath().some(target => {\n              return isInstance(target, Node) && el.contains(target);\n            });\n          })\n        ) {\n          setFocus(false);\n          onFocusChange?.(false, focusedElRef.current);\n          focusedElRef.current = null;\n        }\n        handlerAbortController.abort();\n      };\n\n      // For keyboard and SR navigation - wait for 'focusin'.\n      windowContext?.document?.addEventListener('focusin', handler, {\n        once: true,\n        signal: handlerAbortController.signal\n      });\n\n      // For mouse and touch navigation - wait for 'mouseup'.\n      // The chosen event need to occur before 'click' to allow the given callback code finish before\n      // 'click' handlers.\n      windowContext?.document?.addEventListener('mouseup', handler, {\n        once: true,\n        signal: handlerAbortController.signal\n      });\n\n      // For parent window we do not need to verify element placement in DOM.\n      const parentWindowHandler = () => {\n        setFocus(false);\n        onFocusChange?.(false, focusedElRef.current);\n        focusedElRef.current = null;\n        handlerAbortController.abort();\n      };\n\n      try {\n        // When in iframe, we need to listen to parent window events as well.\n        window.parent?.document.addEventListener('focusin', parentWindowHandler, {\n          once: true,\n          signal: handlerAbortController.signal\n        });\n        window.parent?.document.addEventListener('mouseup', parentWindowHandler, {\n          once: true,\n          signal: handlerAbortController.signal\n        });\n      } catch {\n        // IFrame parent document is not accessible when cross-origin.\n        // Don't attach handlers in that case.\n      }\n\n      handlerAbortControllerRef.current = handlerAbortController;\n    },\n    [hasFocus, onFocusChange, els]\n  );\n\n  const onFocus = useCallback(\n    (e: Event | FocusEvent) => {\n      if (!hasFocus) {\n        setFocus(true);\n        const targetEl = e.currentTarget as T;\n        onFocusChange?.(true, targetEl);\n        focusedElRef.current = targetEl;\n      }\n    },\n    [hasFocus, onFocusChange]\n  );\n\n  useEffect(() => {\n    const elements = getElements(els);\n\n    // Programmatically trigger focus callback on initial render to handle autoFocus\n    elements.forEach(el => {\n      if (el?.contains(document.activeElement)) {\n        onFocus(new FocusEvent('focusin', { relatedTarget: document.activeElement }));\n      }\n    });\n  }, []);\n\n  useEffect(() => {\n    const elements = normalizeTargets(els);\n\n    elements.forEach(el => {\n      el?.addEventListener('focusin', onFocus);\n      el?.addEventListener('popover:focusin', onFocus);\n      el?.addEventListener('focusout', onBlur);\n      el?.addEventListener('popover:focusout', onBlur);\n    });\n    return () => {\n      elements.forEach(el => {\n        el?.removeEventListener('focusin', onFocus);\n        el?.removeEventListener('popover:focusin', onFocus);\n        el?.removeEventListener('focusout', onBlur);\n        el?.removeEventListener('popover:focusout', onBlur);\n      });\n    };\n  }, [els, onFocus, onBlur]);\n\n  return hasFocus;\n};\n\nexport default useFocusWithin;\n"]}
+{"version":3,"file":"useFocusWithin.js","sourceRoot":"","sources":["../../src/hooks/useFocusWithin.ts"],"names":[],"mappings":"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","sourcesContent":["import { useState, useEffect, useCallback, useRef } from 'react';\nimport type { RefObject } from 'react';\n\nimport { getAllPopovers, getParentWindow, isInstance, normalizeTargets } from '../utils';\n\nimport useConfiguration from './useConfiguration';\n\nconst getElements = <T extends HTMLElement = HTMLElement>(\n  els: (T | null | RefObject<T | null>)[]\n) =>\n  normalizeTargets(els)\n    .flatMap(el => [el, ...getAllPopovers(el)])\n    .filter((el): el is HTMLElement => isInstance(el, HTMLElement));\n\n/** Hook for properly handling focus state of children components.\n * @example const hasFocus = useFocusWithin([containerRef, ...], (isFocused, element) => { doSomething; });\n * @param onFocusChange Callback function that is invoked with the current focus state and the current element when any child elements takes focus or all of them lose focus.\n * @returns * hasFocus:: A boolean indicating if the ref element has focus or not.\n */\nconst useFocusWithin = <T extends HTMLElement = HTMLElement>(\n  els: (T | null | RefObject<T | null>)[],\n  onFocusChange?: (isFocused: boolean, element: T | Element | null) => void\n): boolean => {\n  const [hasFocus, setFocus] = useState(false);\n  const focusedElRef = useRef<T | Element | null>(null);\n  const { portalTarget } = useConfiguration();\n\n  const handlerAbortControllerRef = useRef<AbortController>();\n  useEffect(() => {\n    return () => {\n      handlerAbortControllerRef.current?.abort();\n    };\n  }, []);\n\n  const onBlur = useCallback(\n    (e: FocusEvent | Event) => {\n      if (!hasFocus) return;\n\n      const relatedTarget = isInstance(e, FocusEvent) ? e.relatedTarget : null;\n\n      // Gather observed elements along with their popovers to probe for element which gains focus.\n      const elements = normalizeTargets(els).flatMap(el => [el, ...getAllPopovers(el)]);\n\n      if (isInstance(relatedTarget, Node)) {\n        // changing focus to another relevant child doesn't count\n        const focusedEl = elements.find(el => el?.contains(relatedTarget));\n        if (focusedEl) {\n          // ... just update the currently focused item\n          focusedElRef.current = focusedEl;\n          return;\n        }\n      }\n\n      // Code below is similar to the useOuterEvent hook, but single-shot only and need to be attached\n      // after blur event only. Due to various order of events between browsers and OSes, we need to\n      // postpone calling 'onBlur' callback until next element gets focus or on outer click to check\n      // if the relevant element contains the target element, which means the focus is retained.\n      const handlerAbortController = new AbortController();\n      const handler = (fe: Event | FocusEvent | MouseEvent) => {\n        if (\n          !elements.some(el => {\n            return fe.composedPath().some(target => {\n              return isInstance(target, Node) && el.contains(target);\n            });\n          })\n        ) {\n          setFocus(false);\n          onFocusChange?.(false, focusedElRef.current);\n          focusedElRef.current = null;\n        }\n        handlerAbortController.abort();\n      };\n\n      // For keyboard and SR navigation - wait for 'focusin'.\n      // attach to root node of the first element is enough, since all should share the same root\n      (elements[0] ?? portalTarget)\n        ?.getRootNode({ composed: false })\n        .addEventListener('focusin', handler, {\n          once: true,\n          signal: handlerAbortController.signal\n        });\n\n      // For mouse and touch navigation - wait for 'mouseup'.\n      // The chosen event need to occur before 'click' to allow the given callback code finish before\n      // 'click' handlers.\n      // attach to root node of the first element is enough, since all should share the same root\n      (elements[0] ?? portalTarget)\n        ?.getRootNode({ composed: true })\n        .addEventListener('mouseup', handler, {\n          once: true,\n          signal: handlerAbortController.signal\n        });\n\n      // For parent window we do not need to verify element placement in DOM.\n      const parentWindowHandler = () => {\n        setFocus(false);\n        onFocusChange?.(false, focusedElRef.current);\n        focusedElRef.current = null;\n        handlerAbortController.abort();\n      };\n\n      try {\n        // When in iframe, we need to listen to parent window events as well.\n        getParentWindow()?.document.addEventListener('focusin', parentWindowHandler, {\n          once: true,\n          signal: handlerAbortController.signal\n        });\n        getParentWindow()?.document.addEventListener('mouseup', parentWindowHandler, {\n          once: true,\n          signal: handlerAbortController.signal\n        });\n      } catch {\n        // IFrame parent document is not accessible when cross-origin.\n        // Don't attach handlers in that case.\n      }\n\n      handlerAbortControllerRef.current = handlerAbortController;\n    },\n    [hasFocus, onFocusChange, els]\n  );\n\n  const onFocus = useCallback(\n    (e: Event | FocusEvent) => {\n      if (!hasFocus) {\n        setFocus(true);\n        const targetEl = e.currentTarget as T;\n        onFocusChange?.(true, targetEl);\n        focusedElRef.current = targetEl;\n      }\n    },\n    [hasFocus, onFocusChange]\n  );\n\n  useEffect(() => {\n    const elements = getElements(els);\n\n    // Programmatically trigger focus callback on initial render to handle autoFocus\n    elements.forEach(el => {\n      if (el?.contains(document.activeElement)) {\n        onFocus(new FocusEvent('focusin', { relatedTarget: document.activeElement }));\n      }\n    });\n  }, []);\n\n  useEffect(() => {\n    const elements = normalizeTargets(els);\n\n    elements.forEach(el => {\n      el?.addEventListener('focusin', onFocus);\n      el?.addEventListener('popover:focusin', onFocus);\n      el?.addEventListener('focusout', onBlur);\n      el?.addEventListener('popover:focusout', onBlur);\n    });\n    return () => {\n      elements.forEach(el => {\n        el?.removeEventListener('focusin', onFocus);\n        el?.removeEventListener('popover:focusin', onFocus);\n        el?.removeEventListener('focusout', onBlur);\n        el?.removeEventListener('popover:focusout', onBlur);\n      });\n    };\n  }, [els, onFocus, onBlur]);\n\n  return hasFocus;\n};\n\nexport default useFocusWithin;\n"]}

package/lib/hooks/useHighlight.d.ts

@@ -0,0 +1,12 @@
+import type { RefObject } from 'react';
+import type { DefaultTheme } from 'styled-components';
+export declare const HIGHLIGHT_NAME = "search-highlight";
+export declare const createHighlightStyles: (theme: DefaultTheme) => import("styled-components").RuleSet<object>;
+/**
+ * @example useHighlight(ref, /search/gi);
+ * @param ref - A ref to the DOM element whose text nodes should be searched.
+ * @param pattern - A RegExp to match against text content. Ranges for each match are highlighted.
+ */
+declare const useHighlight: (ref: RefObject<Element | null>, pattern?: RegExp) => void;
+export default useHighlight;
+//# sourceMappingURL=useHighlight.d.ts.map

package/lib/hooks/useHighlight.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHighlight.d.ts","sourceRoot":"","sources":["../../src/hooks/useHighlight.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAatD,eAAO,MAAM,cAAc,qBAAqB,CAAC;AAEjD,eAAO,MAAM,qBAAqB,GAAI,OAAO,YAAY,gDAMxD,CAAC;AAKF;;;;GAIG;AACH,QAAA,MAAM,YAAY,GAAI,KAAK,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,UAAU,MAAM,SAgCrE,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/hooks/useHighlight.js

@@ -0,0 +1,55 @@
+import { useEffect } from 'react';
+import { css } from 'styled-components';
+import { isInstance } from '../utils';
+function* getTextNodes(rootNode) {
+    const walker = document.createTreeWalker(rootNode, NodeFilter.SHOW_TEXT);
+    let node = walker.nextNode();
+    while (node !== null) {
+        if (isInstance(node, Text))
+            yield node;
+        node = walker.nextNode();
+    }
+}
+export const HIGHLIGHT_NAME = 'search-highlight';
+export const createHighlightStyles = (theme) => css `
+  ::highlight(${HIGHLIGHT_NAME}) {
+    color: ${theme.base.colors.black};
+    background-color: ${theme.components.mark['background-color']};
+    font-weight: ${theme.components.mark['font-weight']};
+  }
+`;
+// Single shared Highlight instance — each hook call adds/removes its own ranges.
+const sharedHighlight = new Highlight();
+/**
+ * @example useHighlight(ref, /search/gi);
+ * @param ref - A ref to the DOM element whose text nodes should be searched.
+ * @param pattern - A RegExp to match against text content. Ranges for each match are highlighted.
+ */
+const useHighlight = (ref, pattern) => {
+    const source = pattern?.source;
+    const flags = pattern?.flags;
+    useEffect(() => {
+        if (!source || !ref.current || !CSS.highlights)
+            return;
+        CSS.highlights.set(HIGHLIGHT_NAME, sharedHighlight);
+        const ranges = [];
+        const effectiveFlags = flags ?? '';
+        const globalPattern = new RegExp(source, effectiveFlags.includes('g') ? effectiveFlags : `${effectiveFlags}g`);
+        for (const textNode of getTextNodes(ref.current)) {
+            for (const match of (textNode.textContent ?? '').matchAll(globalPattern)) {
+                const range = new Range();
+                range.setStart(textNode, match.index);
+                range.setEnd(textNode, match.index + match[0].length);
+                ranges.push(range);
+                sharedHighlight.add(range);
+            }
+        }
+        return () => {
+            for (const range of ranges) {
+                sharedHighlight.delete(range);
+            }
+        };
+    }, [source, flags]);
+};
+export default useHighlight;
+//# sourceMappingURL=useHighlight.js.map

package/lib/hooks/useHighlight.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHighlight.js","sourceRoot":"","sources":["../../src/hooks/useHighlight.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGxC,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,QAAQ,CAAC,CAAC,YAAY,CAAC,QAAc;IACnC,MAAM,MAAM,GAAG,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IACzE,IAAI,IAAI,GAAgB,MAAM,CAAC,QAAQ,EAAE,CAAC;IAC1C,OAAO,IAAI,KAAK,IAAI,EAAE,CAAC;QACrB,IAAI,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC;YAAE,MAAM,IAAI,CAAC;QACvC,IAAI,GAAG,MAAM,CAAC,QAAQ,EAAE,CAAC;IAC3B,CAAC;AACH,CAAC;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,kBAAkB,CAAC;AAEjD,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAAmB,EAAE,EAAE,CAAC,GAAG,CAAA;gBACjD,cAAc;aACjB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;wBACZ,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,kBAAkB,CAAC;mBAC9C,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC;;CAEtD,CAAC;AAEF,iFAAiF;AACjF,MAAM,eAAe,GAAG,IAAI,SAAS,EAAE,CAAC;AAExC;;;;GAIG;AACH,MAAM,YAAY,GAAG,CAAC,GAA8B,EAAE,OAAgB,EAAE,EAAE;IACxE,MAAM,MAAM,GAAG,OAAO,EAAE,MAAM,CAAC;IAC/B,MAAM,KAAK,GAAG,OAAO,EAAE,KAAK,CAAC;IAE7B,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,MAAM,IAAI,CAAC,GAAG,CAAC,OAAO,IAAI,CAAC,GAAG,CAAC,UAAU;YAAE,OAAO;QAEvD,GAAG,CAAC,UAAU,CAAC,GAAG,CAAC,cAAc,EAAE,eAAe,CAAC,CAAC;QAEpD,MAAM,MAAM,GAAY,EAAE,CAAC;QAC3B,MAAM,cAAc,GAAG,KAAK,IAAI,EAAE,CAAC;QACnC,MAAM,aAAa,GAAG,IAAI,MAAM,CAC9B,MAAM,EACN,cAAc,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,GAAG,cAAc,GAAG,CACrE,CAAC;QAEF,KAAK,MAAM,QAAQ,IAAI,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACjD,KAAK,MAAM,KAAK,IAAI,CAAC,QAAQ,CAAC,WAAW,IAAI,EAAE,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC;gBACzE,MAAM,KAAK,GAAG,IAAI,KAAK,EAAE,CAAC;gBAC1B,KAAK,CAAC,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;gBACtC,KAAK,CAAC,MAAM,CAAC,QAAQ,EAAE,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;gBACtD,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBACnB,eAAe,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;YAC7B,CAAC;QACH,CAAC;QAED,OAAO,GAAG,EAAE;YACV,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE,CAAC;gBAC3B,eAAe,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YAChC,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC;AACtB,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { useEffect } from 'react';\nimport type { RefObject } from 'react';\nimport { css } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\n\nimport { isInstance } from '../utils';\n\nfunction* getTextNodes(rootNode: Node): Generator<Text> {\n  const walker = document.createTreeWalker(rootNode, NodeFilter.SHOW_TEXT);\n  let node: Node | null = walker.nextNode();\n  while (node !== null) {\n    if (isInstance(node, Text)) yield node;\n    node = walker.nextNode();\n  }\n}\n\nexport const HIGHLIGHT_NAME = 'search-highlight';\n\nexport const createHighlightStyles = (theme: DefaultTheme) => css`\n  ::highlight(${HIGHLIGHT_NAME}) {\n    color: ${theme.base.colors.black};\n    background-color: ${theme.components.mark['background-color']};\n    font-weight: ${theme.components.mark['font-weight']};\n  }\n`;\n\n// Single shared Highlight instance — each hook call adds/removes its own ranges.\nconst sharedHighlight = new Highlight();\n\n/**\n * @example useHighlight(ref, /search/gi);\n * @param ref - A ref to the DOM element whose text nodes should be searched.\n * @param pattern - A RegExp to match against text content. Ranges for each match are highlighted.\n */\nconst useHighlight = (ref: RefObject<Element | null>, pattern?: RegExp) => {\n  const source = pattern?.source;\n  const flags = pattern?.flags;\n\n  useEffect(() => {\n    if (!source || !ref.current || !CSS.highlights) return;\n\n    CSS.highlights.set(HIGHLIGHT_NAME, sharedHighlight);\n\n    const ranges: Range[] = [];\n    const effectiveFlags = flags ?? '';\n    const globalPattern = new RegExp(\n      source,\n      effectiveFlags.includes('g') ? effectiveFlags : `${effectiveFlags}g`\n    );\n\n    for (const textNode of getTextNodes(ref.current)) {\n      for (const match of (textNode.textContent ?? '').matchAll(globalPattern)) {\n        const range = new Range();\n        range.setStart(textNode, match.index);\n        range.setEnd(textNode, match.index + match[0].length);\n        ranges.push(range);\n        sharedHighlight.add(range);\n      }\n    }\n\n    return () => {\n      for (const range of ranges) {\n        sharedHighlight.delete(range);\n      }\n    };\n  }, [source, flags]);\n};\n\nexport default useHighlight;\n"]}