@ably/ui 17.11.0-dev.672950e8 → 17.11.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "17.11.0-dev.672950e8",
+  "version": "17.11.2",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",
@@ -21,24 +21,23 @@
     "workerDirectory": "./public"
   },
   "devDependencies": {
-    "@storybook/addon-docs": "^10.0.0",
-    "@storybook/addon-themes": "^10.1.4",
-    "@storybook/addon-vitest": "^10.0.0",
-    "@storybook/react-vite": "^10.0.0",
+    "@storybook/addon-docs": "^10.1.10",
+    "@storybook/addon-themes": "^10.1.10",
+    "@storybook/addon-vitest": "^10.1.10",
+    "@storybook/react-vite": "^10.1.10",
     "@svgr/core": "^8.1.0",
     "@svgr/plugin-jsx": "^8.1.0",
     "@svgr/plugin-svgo": "^8.1.0",
     "@swc/cli": "^0.7.8",
     "@swc/core": "^1.13.5",
     "@tailwindcss/container-queries": "^0.1.1",
-    "@testing-library/react": "^16.3.0",
     "@types/js-cookie": "^3.0.6",
     "@types/node": "^20",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
     "@types/svg-sprite": "^0.0.39",
-    "@typescript-eslint/eslint-plugin": "^8.25.0",
-    "@typescript-eslint/parser": "^8.25.0",
+    "@typescript-eslint/eslint-plugin": "^8.49.0",
+    "@typescript-eslint/parser": "^8.49.0",
     "@vitejs/plugin-react-swc": "^4.0.1",
     "@vitest/browser": "3.2.4",
     "@vitest/coverage-v8": "3.2.4",
@@ -49,17 +48,17 @@
     "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-react-hooks": "^7.0.0",
     "eslint-plugin-react-perf": "^3.3.3",
-    "eslint-plugin-storybook": "^10.0.0",
+    "eslint-plugin-storybook": "^10.1.10",
     "heroicons": "^2.2.0",
     "http-server": "14.1.1",
-    "jsdom": "^27.0.0",
+    "jsdom": "^27.3.0",
     "mixpanel-browser": "^2.60.0",
     "msw": "2.12.0",
     "msw-storybook-addon": "^2.0.5",
     "playwright": "^1.49.1",
-    "posthog-js": "^1.217.4",
+    "posthog-js": "^1.304.0",
     "prettier": "^3.2.5",
-    "storybook": "^10.0.0",
+    "storybook": "^10.1.10",
     "svg-sprite": "^2.0.4",
     "tailwindcss": "^3.3.6",
     "ts-node": "^10.9.2",

package/core/Header/types.js

@@ -1,2 +0,0 @@
-export{};
-//# sourceMappingURL=types.js.map

package/core/Header/types.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/core/Header/types.ts"],"sourcesContent":["export type ThemedScrollpoint = {\n  id: string;\n  className: string;\n};\n"],"names":[],"mappings":"AAAA,QAGE"}

package/core/Meganav/MeganavProductTile.js

@@ -1,2 +0,0 @@
-import React from"react";import cn from"../utils/cn";import{products}from"../ProductTile/data";import ProductIcon from"../ProductTile/ProductIcon";import ProductLabel from"../ProductTile/ProductLabel";import ProductDescription from"../ProductTile/ProductDescription";const CONTAINER_GAP_RATIO=3;const MeganavProductTile=({name,productLink,showDescription=true,showLabel=true,size="40px",animateIcons=false})=>{const{icon,hoverIcon,label,unavailable,description}=products[name]??{};const numericalSize=parseInt(size,10);return React.createElement("a",{href:productLink?productLink:"#",className:cn("transition-colors group/product-tile","flex flex-col p-3 rounded-lg gap-2","bg-neutral-000 dark:bg-neutral-1300",{"hover:bg-neutral-100 dark:hover:bg-neutral-1200":!unavailable},{"pointer-events-auto":!unavailable},{"pointer-events-none":unavailable}),"aria-hidden":unavailable},React.createElement("span",{className:cn("items-center flex"),style:{gap:numericalSize/CONTAINER_GAP_RATIO}},React.createElement(ProductIcon,{size:numericalSize,name:icon,hoverName:animateIcons?hoverIcon:undefined,unavailable:!!unavailable,selected:false}),React.createElement(ProductLabel,{label:label,unavailable:!!unavailable,numericalSize:numericalSize,showLabel:showLabel,selected:false})),React.createElement(ProductDescription,{description:description,unavailable:!!unavailable,showDescription:showDescription,selected:false}))};export default MeganavProductTile;
-//# sourceMappingURL=MeganavProductTile.js.map

package/core/Meganav/MeganavProductTile.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/core/Meganav/MeganavProductTile.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"../utils/cn\";\nimport { products } from \"../ProductTile/data\";\nimport ProductIcon from \"../ProductTile/ProductIcon\";\nimport ProductLabel from \"../ProductTile/ProductLabel\";\nimport ProductDescription from \"../ProductTile/ProductDescription\";\nimport { ProductTileProps } from \"../ProductTile\";\n\nconst CONTAINER_GAP_RATIO = 3;\n\nconst MeganavProductTile = ({\n  name,\n  productLink,\n  showDescription = true,\n  showLabel = true,\n  size = \"40px\",\n  animateIcons = false,\n}: ProductTileProps & { productLink?: string }) => {\n  const { icon, hoverIcon, label, unavailable, description } =\n    products[name] ?? {};\n  const numericalSize = parseInt(size, 10);\n\n  return (\n    <a\n      href={productLink ? productLink : \"#\"}\n      className={cn(\n        \"transition-colors group/product-tile\",\n        \"flex flex-col p-3 rounded-lg gap-2\",\n        \"bg-neutral-000 dark:bg-neutral-1300\",\n        {\n          \"hover:bg-neutral-100 dark:hover:bg-neutral-1200\": !unavailable,\n        },\n        { \"pointer-events-auto\": !unavailable },\n        { \"pointer-events-none\": unavailable },\n      )}\n      aria-hidden={unavailable}\n    >\n      <span\n        className={cn(\"items-center flex\")}\n        style={{\n          gap: numericalSize / CONTAINER_GAP_RATIO,\n        }}\n      >\n        <ProductIcon\n          size={numericalSize}\n          name={icon}\n          hoverName={animateIcons ? hoverIcon : undefined}\n          unavailable={!!unavailable}\n          selected={false}\n        />\n        <ProductLabel\n          label={label}\n          unavailable={!!unavailable}\n          numericalSize={numericalSize}\n          showLabel={showLabel}\n          selected={false}\n        />\n      </span>\n      <ProductDescription\n        description={description}\n        unavailable={!!unavailable}\n        showDescription={showDescription}\n        selected={false}\n      />\n    </a>\n  );\n};\n\nexport default MeganavProductTile;\n"],"names":["React","cn","products","ProductIcon","ProductLabel","ProductDescription","CONTAINER_GAP_RATIO","MeganavProductTile","name","productLink","showDescription","showLabel","size","animateIcons","icon","hoverIcon","label","unavailable","description","numericalSize","parseInt","a","href","className","aria-hidden","span","style","gap","hoverName","undefined","selected"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,OAAQ,aAAc,AAC7B,QAASC,QAAQ,KAAQ,qBAAsB,AAC/C,QAAOC,gBAAiB,4BAA6B,AACrD,QAAOC,iBAAkB,6BAA8B,AACvD,QAAOC,uBAAwB,mCAAoC,CAGnE,MAAMC,oBAAsB,EAE5B,MAAMC,mBAAqB,CAAC,CAC1BC,IAAI,CACJC,WAAW,CACXC,gBAAkB,IAAI,CACtBC,UAAY,IAAI,CAChBC,KAAO,MAAM,CACbC,aAAe,KAAK,CACwB,IAC5C,KAAM,CAAEC,IAAI,CAAEC,SAAS,CAAEC,KAAK,CAAEC,WAAW,CAAEC,WAAW,CAAE,CACxDhB,QAAQ,CAACM,KAAK,EAAI,CAAC,EACrB,MAAMW,cAAgBC,SAASR,KAAM,IAErC,OACE,oBAACS,KACCC,KAAMb,YAAcA,YAAc,IAClCc,UAAWtB,GACT,uCACA,qCACA,sCACA,CACE,kDAAmD,CAACgB,WACtD,EACA,CAAE,sBAAuB,CAACA,WAAY,EACtC,CAAE,sBAAuBA,WAAY,GAEvCO,cAAaP,aAEb,oBAACQ,QACCF,UAAWtB,GAAG,qBACdyB,MAAO,CACLC,IAAKR,cAAgBb,mBACvB,GAEA,oBAACH,aACCS,KAAMO,cACNX,KAAMM,KACNc,UAAWf,aAAeE,UAAYc,UACtCZ,YAAa,CAAC,CAACA,YACfa,SAAU,QAEZ,oBAAC1B,cACCY,MAAOA,MACPC,YAAa,CAAC,CAACA,YACfE,cAAeA,cACfR,UAAWA,UACXmB,SAAU,SAGd,oBAACzB,oBACCa,YAAaA,YACbD,YAAa,CAAC,CAACA,YACfP,gBAAiBA,gBACjBoB,SAAU,QAIlB,CAEA,gBAAevB,kBAAmB"}

package/core/hooks/use-content-height.js

@@ -1,2 +0,0 @@
-import{useState,useEffect,useRef}from"react";export function useContentHeight(ref,initialHeight=0){const[contentHeight,setContentHeight]=useState(initialHeight);const observerRef=useRef(null);useEffect(()=>{const element=ref.current;if(!element){return}observerRef.current=new ResizeObserver(entries=>{requestAnimationFrame(()=>{const entry=entries[0];if(entry&&entry.contentRect){const newHeight=Math.round(entry.contentRect.height);setContentHeight(newHeight)}})});observerRef.current.observe(element);return()=>{observerRef.current?.disconnect();observerRef.current=null}},[ref]);return contentHeight}
-//# sourceMappingURL=use-content-height.js.map

package/core/hooks/use-content-height.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/core/hooks/use-content-height.ts"],"sourcesContent":["import { useState, useEffect, useRef, RefObject } from \"react\";\n\n/**\n * Custom hook that tracks the content height of an element using ResizeObserver.\n * This eliminates forced reflows by using the browser's native resize observation API\n * instead of synchronous clientHeight/getBoundingClientRect queries.\n *\n * @param ref - React ref to the element to observe\n * @param initialHeight - Initial height value (default: 0)\n * @returns Current content height in pixels\n */\nexport function useContentHeight(\n  ref: RefObject<HTMLElement>,\n  initialHeight = 0\n): number {\n  const [contentHeight, setContentHeight] = useState<number>(initialHeight);\n  const observerRef = useRef<ResizeObserver | null>(null);\n\n  useEffect(() => {\n    const element = ref.current;\n\n    if (!element) {\n      return;\n    }\n\n    observerRef.current = new ResizeObserver((entries) => {\n      requestAnimationFrame(() => {\n        const entry = entries[0];\n        if (entry && entry.contentRect) {\n          const newHeight = Math.round(entry.contentRect.height);\n          setContentHeight(newHeight);\n        }\n      });\n    });\n\n    observerRef.current.observe(element);\n\n    return () => {\n      observerRef.current?.disconnect();\n      observerRef.current = null;\n    };\n  }, [ref]);\n\n  return contentHeight;\n}\n"],"names":["useState","useEffect","useRef","useContentHeight","ref","initialHeight","contentHeight","setContentHeight","observerRef","element","current","ResizeObserver","entries","requestAnimationFrame","entry","contentRect","newHeight","Math","round","height","observe","disconnect"],"mappings":"AAAA,OAASA,QAAQ,CAAEC,SAAS,CAAEC,MAAM,KAAmB,OAAQ,AAW/D,QAAO,SAASC,iBACdC,GAA2B,CAC3BC,cAAgB,CAAC,EAEjB,KAAM,CAACC,cAAeC,iBAAiB,CAAGP,SAAiBK,eAC3D,MAAMG,YAAcN,OAA8B,MAElDD,UAAU,KACR,MAAMQ,QAAUL,IAAIM,OAAO,CAE3B,GAAI,CAACD,QAAS,CACZ,MACF,CAEAD,YAAYE,OAAO,CAAG,IAAIC,eAAe,AAACC,UACxCC,sBAAsB,KACpB,MAAMC,MAAQF,OAAO,CAAC,EAAE,CACxB,GAAIE,OAASA,MAAMC,WAAW,CAAE,CAC9B,MAAMC,UAAYC,KAAKC,KAAK,CAACJ,MAAMC,WAAW,CAACI,MAAM,EACrDZ,iBAAiBS,UACnB,CACF,EACF,GAEAR,YAAYE,OAAO,CAACU,OAAO,CAACX,SAE5B,MAAO,KACLD,YAAYE,OAAO,EAAEW,YACrBb,CAAAA,YAAYE,OAAO,CAAG,IACxB,CACF,EAAG,CAACN,IAAI,EAER,OAAOE,aACT"}

package/core/hooks/use-themed-scrollpoints.js

@@ -1,2 +0,0 @@
-import{useState,useEffect,useRef}from"react";const HEADER_HEIGHT=64;export function useThemedScrollpoints(scrollpoints){const[activeClassName,setActiveClassName]=useState(scrollpoints.length>0?scrollpoints[0].className:"");const previousClassNameRef=useRef(activeClassName);const observerRef=useRef(null);useEffect(()=>{if(scrollpoints.length===0){return}observerRef.current=new IntersectionObserver(entries=>{requestAnimationFrame(()=>{for(const entry of entries){if(entry.isIntersecting){const scrollpoint=scrollpoints.find(sp=>sp.id===entry.target.id);if(scrollpoint&&scrollpoint.className!==previousClassNameRef.current){previousClassNameRef.current=scrollpoint.className;setActiveClassName(scrollpoint.className);return}}}})},{rootMargin:`-${HEADER_HEIGHT}px 0px 0px 0px`,threshold:0});scrollpoints.forEach(({id})=>{const element=document.getElementById(id);if(element){observerRef.current?.observe(element)}else{console.warn(`useThemedScrollpoints: Element with id "${id}" not found in DOM`)}});return()=>{observerRef.current?.disconnect();observerRef.current=null}},[scrollpoints]);return activeClassName}
-//# sourceMappingURL=use-themed-scrollpoints.js.map

package/core/hooks/use-themed-scrollpoints.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/core/hooks/use-themed-scrollpoints.ts"],"sourcesContent":["import { useState, useEffect, useRef } from \"react\";\nimport { ThemedScrollpoint } from \"../Header/types\";\n\nconst HEADER_HEIGHT = 64;\n\nexport function useThemedScrollpoints(\n  scrollpoints: ThemedScrollpoint[]\n): string {\n  const [activeClassName, setActiveClassName] = useState<string>(\n    scrollpoints.length > 0 ? scrollpoints[0].className : \"\"\n  );\n\n  const previousClassNameRef = useRef<string>(activeClassName);\n  const observerRef = useRef<IntersectionObserver | null>(null);\n\n  useEffect(() => {\n    if (scrollpoints.length === 0) {\n      return;\n    }\n\n    observerRef.current = new IntersectionObserver(\n      (entries) => {\n        requestAnimationFrame(() => {\n          for (const entry of entries) {\n            if (entry.isIntersecting) {\n              const scrollpoint = scrollpoints.find(\n                (sp) => sp.id === entry.target.id\n              );\n\n              if (scrollpoint && scrollpoint.className !== previousClassNameRef.current) {\n                previousClassNameRef.current = scrollpoint.className;\n                setActiveClassName(scrollpoint.className);\n                return;\n              }\n            }\n          }\n        });\n      },\n      {\n        rootMargin: `-${HEADER_HEIGHT}px 0px 0px 0px`,\n        threshold: 0,\n      }\n    );\n\n    scrollpoints.forEach(({ id }) => {\n      const element = document.getElementById(id);\n      if (element) {\n        observerRef.current?.observe(element);\n      } else {\n        console.warn(\n          `useThemedScrollpoints: Element with id \"${id}\" not found in DOM`\n        );\n      }\n    });\n\n    return () => {\n      observerRef.current?.disconnect();\n      observerRef.current = null;\n    };\n  }, [scrollpoints]);\n\n  return activeClassName;\n}\n"],"names":["useState","useEffect","useRef","HEADER_HEIGHT","useThemedScrollpoints","scrollpoints","activeClassName","setActiveClassName","length","className","previousClassNameRef","observerRef","current","IntersectionObserver","entries","requestAnimationFrame","entry","isIntersecting","scrollpoint","find","sp","id","target","rootMargin","threshold","forEach","element","document","getElementById","observe","console","warn","disconnect"],"mappings":"AAAA,OAASA,QAAQ,CAAEC,SAAS,CAAEC,MAAM,KAAQ,OAAQ,CAGpD,MAAMC,cAAgB,EAEtB,QAAO,SAASC,sBACdC,YAAiC,EAEjC,KAAM,CAACC,gBAAiBC,mBAAmB,CAAGP,SAC5CK,aAAaG,MAAM,CAAG,EAAIH,YAAY,CAAC,EAAE,CAACI,SAAS,CAAG,IAGxD,MAAMC,qBAAuBR,OAAeI,iBAC5C,MAAMK,YAAcT,OAAoC,MAExDD,UAAU,KACR,GAAII,aAAaG,MAAM,GAAK,EAAG,CAC7B,MACF,CAEAG,YAAYC,OAAO,CAAG,IAAIC,qBACxB,AAACC,UACCC,sBAAsB,KACpB,IAAK,MAAMC,SAASF,QAAS,CAC3B,GAAIE,MAAMC,cAAc,CAAE,CACxB,MAAMC,YAAcb,aAAac,IAAI,CACnC,AAACC,IAAOA,GAAGC,EAAE,GAAKL,MAAMM,MAAM,CAACD,EAAE,EAGnC,GAAIH,aAAeA,YAAYT,SAAS,GAAKC,qBAAqBE,OAAO,CAAE,CACzEF,qBAAqBE,OAAO,CAAGM,YAAYT,SAAS,CACpDF,mBAAmBW,YAAYT,SAAS,EACxC,MACF,CACF,CACF,CACF,EACF,EACA,CACEc,WAAY,CAAC,CAAC,EAAEpB,cAAc,cAAc,CAAC,CAC7CqB,UAAW,CACb,GAGFnB,aAAaoB,OAAO,CAAC,CAAC,CAAEJ,EAAE,CAAE,IAC1B,MAAMK,QAAUC,SAASC,cAAc,CAACP,IACxC,GAAIK,QAAS,CACXf,YAAYC,OAAO,EAAEiB,QAAQH,QAC/B,KAAO,CACLI,QAAQC,IAAI,CACV,CAAC,wCAAwC,EAAEV,GAAG,kBAAkB,CAAC,CAErE,CACF,GAEA,MAAO,KACLV,YAAYC,OAAO,EAAEoB,YACrBrB,CAAAA,YAAYC,OAAO,CAAG,IACxB,CACF,EAAG,CAACP,aAAa,EAEjB,OAAOC,eACT"}

package/core/hooks/use-themed-scrollpoints.test.js

@@ -1,2 +0,0 @@
-import{describe,it,expect,beforeEach,afterEach,vi}from"vitest";import{renderHook,waitFor}from"@testing-library/react";import{useThemedScrollpoints}from"./use-themed-scrollpoints";describe("useThemedScrollpoints",()=>{let observerCallback;let mockObserve;let mockUnobserve;let mockDisconnect;beforeEach(()=>{mockObserve=vi.fn();mockUnobserve=vi.fn();mockDisconnect=vi.fn();global.IntersectionObserver=vi.fn(callback=>{observerCallback=callback;return{observe:mockObserve,unobserve:mockUnobserve,disconnect:mockDisconnect}});global.requestAnimationFrame=vi.fn(cb=>{cb(0);return 0})});afterEach(()=>{vi.clearAllMocks();document.body.innerHTML=""});it("returns first scrollpoint className on mount",()=>{const scrollpoints=[{id:"zone1",className:"theme-light"},{id:"zone2",className:"theme-dark"}];const{result}=renderHook(()=>useThemedScrollpoints(scrollpoints));expect(result.current).toBe("theme-light")});it("returns empty string when no scrollpoints provided",()=>{const{result}=renderHook(()=>useThemedScrollpoints([]));expect(result.current).toBe("")});it("does not create IntersectionObserver when no scrollpoints provided",()=>{renderHook(()=>useThemedScrollpoints([]));expect(IntersectionObserver).not.toHaveBeenCalled()});it("creates IntersectionObserver with correct config",()=>{const scrollpoints=[{id:"zone1",className:"theme-light"}];const elem=document.createElement("div");elem.id="zone1";document.body.appendChild(elem);renderHook(()=>useThemedScrollpoints(scrollpoints));expect(IntersectionObserver).toHaveBeenCalledWith(expect.any(Function),expect.objectContaining({rootMargin:"-64px 0px 0px 0px",threshold:0}))});it("observes all scrollpoint elements that exist in DOM",()=>{const elem1=document.createElement("div");elem1.id="zone1";const elem2=document.createElement("div");elem2.id="zone2";document.body.appendChild(elem1);document.body.appendChild(elem2);const scrollpoints=[{id:"zone1",className:"theme-light"},{id:"zone2",className:"theme-dark"}];renderHook(()=>useThemedScrollpoints(scrollpoints));expect(mockObserve).toHaveBeenCalledTimes(2);expect(mockObserve).toHaveBeenCalledWith(elem1);expect(mockObserve).toHaveBeenCalledWith(elem2)});it("logs warning for missing DOM elements",()=>{const consoleWarn=vi.spyOn(console,"warn").mockImplementation(()=>{});const scrollpoints=[{id:"non-existent",className:"theme"}];renderHook(()=>useThemedScrollpoints(scrollpoints));expect(consoleWarn).toHaveBeenCalledWith(expect.stringContaining('Element with id "non-existent" not found'));consoleWarn.mockRestore()});it("observes existing elements and warns about missing ones",()=>{const consoleWarn=vi.spyOn(console,"warn").mockImplementation(()=>{});const elem=document.createElement("div");elem.id="zone1";document.body.appendChild(elem);const scrollpoints=[{id:"zone1",className:"theme-light"},{id:"missing",className:"theme-dark"}];renderHook(()=>useThemedScrollpoints(scrollpoints));expect(mockObserve).toHaveBeenCalledTimes(1);expect(mockObserve).toHaveBeenCalledWith(elem);expect(consoleWarn).toHaveBeenCalledWith(expect.stringContaining('Element with id "missing" not found'));consoleWarn.mockRestore()});it("updates className when intersection occurs",async()=>{const elem1=document.createElement("div");elem1.id="zone1";const elem2=document.createElement("div");elem2.id="zone2";document.body.appendChild(elem1);document.body.appendChild(elem2);const scrollpoints=[{id:"zone1",className:"theme-light"},{id:"zone2",className:"theme-dark"}];const{result}=renderHook(()=>useThemedScrollpoints(scrollpoints));expect(result.current).toBe("theme-light");observerCallback([{target:elem2,isIntersecting:true}],{});await waitFor(()=>{expect(result.current).toBe("theme-dark")})});it("does not update className if same scrollpoint intersects again",async()=>{const elem=document.createElement("div");elem.id="zone1";document.body.appendChild(elem);const scrollpoints=[{id:"zone1",className:"theme-light"}];const{result}=renderHook(()=>useThemedScrollpoints(scrollpoints));expect(result.current).toBe("theme-light");const renderCount=result.current;observerCallback([{target:elem,isIntersecting:true}],{});expect(result.current).toBe(renderCount)});it("ignores non-intersecting entries",async()=>{const elem1=document.createElement("div");elem1.id="zone1";const elem2=document.createElement("div");elem2.id="zone2";document.body.appendChild(elem1);document.body.appendChild(elem2);const scrollpoints=[{id:"zone1",className:"theme-light"},{id:"zone2",className:"theme-dark"}];const{result}=renderHook(()=>useThemedScrollpoints(scrollpoints));expect(result.current).toBe("theme-light");observerCallback([{target:elem2,isIntersecting:false}],{});expect(result.current).toBe("theme-light")});it("uses first intersecting entry when multiple entries intersect",async()=>{const elem1=document.createElement("div");elem1.id="zone1";const elem2=document.createElement("div");elem2.id="zone2";const elem3=document.createElement("div");elem3.id="zone3";document.body.appendChild(elem1);document.body.appendChild(elem2);document.body.appendChild(elem3);const scrollpoints=[{id:"zone1",className:"theme-light"},{id:"zone2",className:"theme-dark"},{id:"zone3",className:"theme-blue"}];const{result}=renderHook(()=>useThemedScrollpoints(scrollpoints));observerCallback([{target:elem2,isIntersecting:true},{target:elem3,isIntersecting:true}],{});await waitFor(()=>{expect(result.current).toBe("theme-dark")})});it("disconnects observer on unmount",()=>{const elem=document.createElement("div");elem.id="zone1";document.body.appendChild(elem);const scrollpoints=[{id:"zone1",className:"theme-light"}];const{unmount}=renderHook(()=>useThemedScrollpoints(scrollpoints));unmount();expect(mockDisconnect).toHaveBeenCalled()});it("recreates observer when scrollpoints change",()=>{const elem1=document.createElement("div");elem1.id="zone1";const elem2=document.createElement("div");elem2.id="zone2";document.body.appendChild(elem1);document.body.appendChild(elem2);const{rerender}=renderHook(({scrollpoints})=>useThemedScrollpoints(scrollpoints),{initialProps:{scrollpoints:[{id:"zone1",className:"theme-light"}]}});expect(IntersectionObserver).toHaveBeenCalledTimes(1);expect(mockObserve).toHaveBeenCalledTimes(1);rerender({scrollpoints:[{id:"zone1",className:"theme-light"},{id:"zone2",className:"theme-dark"}]});expect(mockDisconnect).toHaveBeenCalledTimes(1);expect(IntersectionObserver).toHaveBeenCalledTimes(2);expect(mockObserve).toHaveBeenCalledTimes(3)});it("uses requestAnimationFrame for state updates",()=>{const elem=document.createElement("div");elem.id="zone1";document.body.appendChild(elem);const scrollpoints=[{id:"zone1",className:"theme-light"},{id:"zone2",className:"theme-dark"}];renderHook(()=>useThemedScrollpoints(scrollpoints));const rafSpy=vi.spyOn(global,"requestAnimationFrame");observerCallback([{target:elem,isIntersecting:true}],{});expect(rafSpy).toHaveBeenCalled();rafSpy.mockRestore()})});
-//# sourceMappingURL=use-themed-scrollpoints.test.js.map

package/core/hooks/use-themed-scrollpoints.test.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/core/hooks/use-themed-scrollpoints.test.ts"],"sourcesContent":["/**\n * @vitest-environment jsdom\n */\n\nimport { describe, it, expect, beforeEach, afterEach, vi } from \"vitest\";\nimport { renderHook, waitFor } from \"@testing-library/react\";\nimport { useThemedScrollpoints } from \"./use-themed-scrollpoints\";\n\ndescribe(\"useThemedScrollpoints\", () => {\n  let observerCallback: IntersectionObserverCallback;\n  let mockObserve: ReturnType<typeof vi.fn>;\n  let mockUnobserve: ReturnType<typeof vi.fn>;\n  let mockDisconnect: ReturnType<typeof vi.fn>;\n\n  beforeEach(() => {\n    // Mock IntersectionObserver\n    mockObserve = vi.fn();\n    mockUnobserve = vi.fn();\n    mockDisconnect = vi.fn();\n\n    global.IntersectionObserver = vi.fn((callback) => {\n      observerCallback = callback;\n      return {\n        observe: mockObserve,\n        unobserve: mockUnobserve,\n        disconnect: mockDisconnect,\n      };\n    }) as unknown as typeof IntersectionObserver;\n\n    // Mock requestAnimationFrame\n    global.requestAnimationFrame = vi.fn((cb) => {\n      cb(0);\n      return 0;\n    });\n  });\n\n  afterEach(() => {\n    vi.clearAllMocks();\n    document.body.innerHTML = \"\";\n  });\n\n  it(\"returns first scrollpoint className on mount\", () => {\n    const scrollpoints = [\n      { id: \"zone1\", className: \"theme-light\" },\n      { id: \"zone2\", className: \"theme-dark\" },\n    ];\n\n    const { result } = renderHook(() => useThemedScrollpoints(scrollpoints));\n\n    expect(result.current).toBe(\"theme-light\");\n  });\n\n  it(\"returns empty string when no scrollpoints provided\", () => {\n    const { result } = renderHook(() => useThemedScrollpoints([]));\n    expect(result.current).toBe(\"\");\n  });\n\n  it(\"does not create IntersectionObserver when no scrollpoints provided\", () => {\n    renderHook(() => useThemedScrollpoints([]));\n\n    expect(IntersectionObserver).not.toHaveBeenCalled();\n  });\n\n  it(\"creates IntersectionObserver with correct config\", () => {\n    const scrollpoints = [{ id: \"zone1\", className: \"theme-light\" }];\n\n    // Create DOM element\n    const elem = document.createElement(\"div\");\n    elem.id = \"zone1\";\n    document.body.appendChild(elem);\n\n    renderHook(() => useThemedScrollpoints(scrollpoints));\n\n    expect(IntersectionObserver).toHaveBeenCalledWith(\n      expect.any(Function),\n      expect.objectContaining({\n        rootMargin: \"-64px 0px 0px 0px\",\n        threshold: 0,\n      })\n    );\n  });\n\n  it(\"observes all scrollpoint elements that exist in DOM\", () => {\n    // Create DOM elements\n    const elem1 = document.createElement(\"div\");\n    elem1.id = \"zone1\";\n    const elem2 = document.createElement(\"div\");\n    elem2.id = \"zone2\";\n    document.body.appendChild(elem1);\n    document.body.appendChild(elem2);\n\n    const scrollpoints = [\n      { id: \"zone1\", className: \"theme-light\" },\n      { id: \"zone2\", className: \"theme-dark\" },\n    ];\n\n    renderHook(() => useThemedScrollpoints(scrollpoints));\n\n    expect(mockObserve).toHaveBeenCalledTimes(2);\n    expect(mockObserve).toHaveBeenCalledWith(elem1);\n    expect(mockObserve).toHaveBeenCalledWith(elem2);\n  });\n\n  it(\"logs warning for missing DOM elements\", () => {\n    const consoleWarn = vi.spyOn(console, \"warn\").mockImplementation(() => {});\n\n    const scrollpoints = [{ id: \"non-existent\", className: \"theme\" }];\n\n    renderHook(() => useThemedScrollpoints(scrollpoints));\n\n    expect(consoleWarn).toHaveBeenCalledWith(\n      expect.stringContaining('Element with id \"non-existent\" not found')\n    );\n\n    consoleWarn.mockRestore();\n  });\n\n  it(\"observes existing elements and warns about missing ones\", () => {\n    const consoleWarn = vi.spyOn(console, \"warn\").mockImplementation(() => {});\n\n    // Create only one element\n    const elem = document.createElement(\"div\");\n    elem.id = \"zone1\";\n    document.body.appendChild(elem);\n\n    const scrollpoints = [\n      { id: \"zone1\", className: \"theme-light\" },\n      { id: \"missing\", className: \"theme-dark\" },\n    ];\n\n    renderHook(() => useThemedScrollpoints(scrollpoints));\n\n    expect(mockObserve).toHaveBeenCalledTimes(1);\n    expect(mockObserve).toHaveBeenCalledWith(elem);\n    expect(consoleWarn).toHaveBeenCalledWith(\n      expect.stringContaining('Element with id \"missing\" not found')\n    );\n\n    consoleWarn.mockRestore();\n  });\n\n  it(\"updates className when intersection occurs\", async () => {\n    // Create DOM elements\n    const elem1 = document.createElement(\"div\");\n    elem1.id = \"zone1\";\n    const elem2 = document.createElement(\"div\");\n    elem2.id = \"zone2\";\n    document.body.appendChild(elem1);\n    document.body.appendChild(elem2);\n\n    const scrollpoints = [\n      { id: \"zone1\", className: \"theme-light\" },\n      { id: \"zone2\", className: \"theme-dark\" },\n    ];\n\n    const { result } = renderHook(() => useThemedScrollpoints(scrollpoints));\n\n    // Initial state\n    expect(result.current).toBe(\"theme-light\");\n\n    // Simulate intersection with zone2\n    observerCallback(\n      [\n        {\n          target: elem2,\n          isIntersecting: true,\n        } as unknown as IntersectionObserverEntry,\n      ],\n      {} as IntersectionObserver\n    );\n\n    await waitFor(() => {\n      expect(result.current).toBe(\"theme-dark\");\n    });\n  });\n\n  it(\"does not update className if same scrollpoint intersects again\", async () => {\n    const elem = document.createElement(\"div\");\n    elem.id = \"zone1\";\n    document.body.appendChild(elem);\n\n    const scrollpoints = [{ id: \"zone1\", className: \"theme-light\" }];\n\n    const { result } = renderHook(() => useThemedScrollpoints(scrollpoints));\n\n    expect(result.current).toBe(\"theme-light\");\n\n    // Simulate intersection with same element\n    const renderCount = result.current;\n    observerCallback(\n      [\n        {\n          target: elem,\n          isIntersecting: true,\n        } as unknown as IntersectionObserverEntry,\n      ],\n      {} as IntersectionObserver\n    );\n\n    // Should not trigger re-render (className unchanged)\n    expect(result.current).toBe(renderCount);\n  });\n\n  it(\"ignores non-intersecting entries\", async () => {\n    const elem1 = document.createElement(\"div\");\n    elem1.id = \"zone1\";\n    const elem2 = document.createElement(\"div\");\n    elem2.id = \"zone2\";\n    document.body.appendChild(elem1);\n    document.body.appendChild(elem2);\n\n    const scrollpoints = [\n      { id: \"zone1\", className: \"theme-light\" },\n      { id: \"zone2\", className: \"theme-dark\" },\n    ];\n\n    const { result } = renderHook(() => useThemedScrollpoints(scrollpoints));\n\n    expect(result.current).toBe(\"theme-light\");\n\n    // Simulate non-intersecting entry\n    observerCallback(\n      [\n        {\n          target: elem2,\n          isIntersecting: false,\n        } as unknown as IntersectionObserverEntry,\n      ],\n      {} as IntersectionObserver\n    );\n\n    // Should remain unchanged\n    expect(result.current).toBe(\"theme-light\");\n  });\n\n  it(\"uses first intersecting entry when multiple entries intersect\", async () => {\n    const elem1 = document.createElement(\"div\");\n    elem1.id = \"zone1\";\n    const elem2 = document.createElement(\"div\");\n    elem2.id = \"zone2\";\n    const elem3 = document.createElement(\"div\");\n    elem3.id = \"zone3\";\n    document.body.appendChild(elem1);\n    document.body.appendChild(elem2);\n    document.body.appendChild(elem3);\n\n    const scrollpoints = [\n      { id: \"zone1\", className: \"theme-light\" },\n      { id: \"zone2\", className: \"theme-dark\" },\n      { id: \"zone3\", className: \"theme-blue\" },\n    ];\n\n    const { result } = renderHook(() => useThemedScrollpoints(scrollpoints));\n\n    // Simulate multiple intersections (zone2 and zone3 both intersecting)\n    observerCallback(\n      [\n        {\n          target: elem2,\n          isIntersecting: true,\n        } as unknown as IntersectionObserverEntry,\n        {\n          target: elem3,\n          isIntersecting: true,\n        } as unknown as IntersectionObserverEntry,\n      ],\n      {} as IntersectionObserver\n    );\n\n    await waitFor(() => {\n      // Should use first intersecting entry (zone2)\n      expect(result.current).toBe(\"theme-dark\");\n    });\n  });\n\n  it(\"disconnects observer on unmount\", () => {\n    const elem = document.createElement(\"div\");\n    elem.id = \"zone1\";\n    document.body.appendChild(elem);\n\n    const scrollpoints = [{ id: \"zone1\", className: \"theme-light\" }];\n\n    const { unmount } = renderHook(() => useThemedScrollpoints(scrollpoints));\n\n    unmount();\n\n    expect(mockDisconnect).toHaveBeenCalled();\n  });\n\n  it(\"recreates observer when scrollpoints change\", () => {\n    const elem1 = document.createElement(\"div\");\n    elem1.id = \"zone1\";\n    const elem2 = document.createElement(\"div\");\n    elem2.id = \"zone2\";\n    document.body.appendChild(elem1);\n    document.body.appendChild(elem2);\n\n    const { rerender } = renderHook(\n      ({ scrollpoints }) => useThemedScrollpoints(scrollpoints),\n      {\n        initialProps: {\n          scrollpoints: [{ id: \"zone1\", className: \"theme-light\" }],\n        },\n      }\n    );\n\n    expect(IntersectionObserver).toHaveBeenCalledTimes(1);\n    expect(mockObserve).toHaveBeenCalledTimes(1);\n\n    // Change scrollpoints\n    rerender({\n      scrollpoints: [\n        { id: \"zone1\", className: \"theme-light\" },\n        { id: \"zone2\", className: \"theme-dark\" },\n      ],\n    });\n\n    // Should disconnect old observer and create new one\n    expect(mockDisconnect).toHaveBeenCalledTimes(1);\n    expect(IntersectionObserver).toHaveBeenCalledTimes(2);\n    expect(mockObserve).toHaveBeenCalledTimes(3); // 1 from first render + 2 from second\n  });\n\n  it(\"uses requestAnimationFrame for state updates\", () => {\n    const elem = document.createElement(\"div\");\n    elem.id = \"zone1\";\n    document.body.appendChild(elem);\n\n    const scrollpoints = [\n      { id: \"zone1\", className: \"theme-light\" },\n      { id: \"zone2\", className: \"theme-dark\" },\n    ];\n\n    renderHook(() => useThemedScrollpoints(scrollpoints));\n\n    const rafSpy = vi.spyOn(global, \"requestAnimationFrame\");\n\n    // Simulate intersection\n    observerCallback(\n      [\n        {\n          target: elem,\n          isIntersecting: true,\n        } as unknown as IntersectionObserverEntry,\n      ],\n      {} as IntersectionObserver\n    );\n\n    expect(rafSpy).toHaveBeenCalled();\n\n    rafSpy.mockRestore();\n  });\n});\n"],"names":["describe","it","expect","beforeEach","afterEach","vi","renderHook","waitFor","useThemedScrollpoints","observerCallback","mockObserve","mockUnobserve","mockDisconnect","fn","global","IntersectionObserver","callback","observe","unobserve","disconnect","requestAnimationFrame","cb","clearAllMocks","document","body","innerHTML","scrollpoints","id","className","result","current","toBe","not","toHaveBeenCalled","elem","createElement","appendChild","toHaveBeenCalledWith","any","Function","objectContaining","rootMargin","threshold","elem1","elem2","toHaveBeenCalledTimes","consoleWarn","spyOn","console","mockImplementation","stringContaining","mockRestore","target","isIntersecting","renderCount","elem3","unmount","rerender","initialProps","rafSpy"],"mappings":"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"}