Get Highlighter to work

lib/components/Highlighter.tsx

@@ -1,28 +1,15 @@
-import {
-  createContext,
-  type ReactNode,
-  useState,
-  useEffect,
-  useMemo,
-  /*
-  useContext,
-  type ReactElement,
-  useRef,
-  cloneElement,
-  forwardRef
-  */
-} from 'react';
-import { useLocation } from 'react-router-dom';
+import { createContext, type ReactNode, useState, useEffect, useMemo, useContext } from 'react';
+import { useLocation, ScrollRestoration } from 'react-router-dom';
 
 const defaultHighlightDuration = 1000;
 const defaultTransitionDuration = 1000;
 // TODO: Add props to override these defaults, if the need arises
-/*
-const defaultHighlightClassName = 'z-0 inset-[-1em] shadow-[0_0_10px_0_#757575] rounded-lg bg-white';
+const defaultHighlightClassName =
+  'z-0 inset-[-1em] shadow-[0_0_10px_0_#757575] rounded-lg bg-white';
 const defaultHighlightedClassName = 'opacity-1';
 const defaultUnhighlightedClassName = 'opacity-0';
 const defaultClassName = 'z1';
-*/
+
 interface HighlighterContextProps {
   highlighted: string | null;
   transitionDuration: number;
@@ -46,26 +33,21 @@ export const Highlighter = ({
 }: HighlighterProps) => {
   const { hash } = useLocation();
   const [highlighted, setHighlighted] = useState<string | null>(null);
-  const [timer, setTimer] = useState<number | null>(null);
 
   const timerDuration =
     (highlightDuration ?? defaultHighlightDuration) +
     (transitionDuration ?? defaultTransitionDuration);
 
   useEffect(() => {
     setHighlighted(hash.substring(1));
-  }, [hash]);
 
-  useEffect(() => {
-    if (timer) {
-      clearTimeout(timer);
-    }
-    setTimer(
-      highlighted
-        ? (setTimeout(() => setHighlighted(null), timerDuration) as unknown as number)
-        : null,
-    );
-  }, [highlighted, timer, timerDuration]);
+    const timeoutId = setTimeout(() => {
+      setHighlighted(null);
+    }, timerDuration);
+
+    // Cleanup function to clear the timeout if the component unmounts
+    return () => clearTimeout(timeoutId);
+  }, [hash, timerDuration]);
 
   const value = useMemo<HighlighterContextProps>(
     () => ({
@@ -75,34 +57,21 @@ export const Highlighter = ({
     [highlighted, transitionDuration],
   );
 
-  return <HighlighterContext.Provider value={value}>{children}</HighlighterContext.Provider>;
+  return (
+    <>
+      <ScrollRestoration />
+      <HighlighterContext.Provider value={value}>{children}</HighlighterContext.Provider>
+    </>
+  );
 };
 
 interface HighlightProps {
+  id: string;
   children?: ReactNode;
 }
 
-export const Highlight = ({ children: child }: HighlightProps) => {
-  return <>{child}</>;
-  /*
+export const Highlight = ({ id, children: child }: HighlightProps) => {
   const { highlighted, transitionDuration } = useContext(HighlighterContext);
-  const ref = useRef<HTMLElement | null>(null);
-
-  const { Child, id, children } = useMemo(() => {
-    const { id, children } = (child as ReactElement).props;
-    const Child = forwardRef<HTMLElement, HighlightProps>(({ children }, ref) =>
-      cloneElement(child as ReactElement, { ref, children })
-    );
-    return { Child, id, children };
-  }, [child]);
-
-  useEffect(() => {
-    if (ref.current) {
-      if (getComputedStyle(ref.current).position === 'static') {
-        ref.current.style.position = 'relative';
-      }
-    }
-  }, []);
 
   if (!child) {
     return null;
@@ -117,18 +86,20 @@ export const Highlight = ({ children: child }: HighlightProps) => {
   }`;
 
   return (
-    <Child ref={ref}>
+    <div className="relative">
       <div
         className={highlightClassName}
         style={{
           position: 'absolute',
-          transition: `all ${transitionDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`
+          transition: `all ${transitionDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`,
         }}
       />
-      <div className={defaultClassName} style={{ position: 'relative' }}>
-        {children}
+      <div
+        className={defaultClassName}
+        style={{ position: 'relative' }}
+      >
+        {child}
       </div>
-    </Child>
+    </div>
   );
-  */
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toyota-research-institute/rse-react-library",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "description": "RSE React component libraries with Vite, Tailwind, Material Tailwind and Storybook.",
   "author": "TRI",
   "license": "MIT",