react-sticky-kit 0.2.0 → 0.3.0

package/README.md

@@ -31,7 +31,7 @@ A lightweight, flexible React sticky container and item component library. Easil
 - 📦 Simple API: `<StickyContainer>` and `<StickyItem>`
 - 🧩 Supports `replace`, `stack`, and `none` sticky modes
 - 🏷️ Customizable offset, z-index (baseZIndex), and sticky logic
-- 🖥️ Flexible reference containers (window, DOM elements, refs)
+- 🖥️ Viewport-relative sticky offsets, including updates on nested scroll events
 - 🔄 Supports SSR/SSG (Next.js, Gatsby, Astro, etc.)
 - 🧪 Handles edge cases: empty sections, dynamic heights, zero-height headers, long headers, etc.
 - ⚡️ Written in TypeScript, fully typed
@@ -84,7 +84,7 @@ export default function Example() {
 | `baseZIndex`                | `number`                                             | `200`       | Base z-index for sticky items. Should be greater than the number of sticky items.            |
 |                             |                                                      |             | In `replace` mode, z-index = baseZIndex - index; in `stack` mode, z-index = baseZIndex + index. |
 | `onStickyItemsHeightChange` | `(height: number) => void`                          |             | Callback when total sticky height changes                                                   |
-| `constraint`                | `'none'`                                             |             | Define the constraint for sticky behavior. 'none' = no constraints (CSS-like behavior) |
+| `constraint`                | `'none'`                                             |             | Define the constraint for sticky behavior. 'none' = no container boundary |
 
 ### `<StickyItem />`
 | Prop    | Type                                 | Default | Description                                 |
@@ -113,14 +113,9 @@ function Example() {
         <div>Content...</div>
       </StickyContainer>
       
-      {/* 2. No constraints (like CSS position:sticky) */}
+      {/* 2. No container boundary */}
       <StickyContainer constraint="none">
-        <StickyItem><div>Always sticky like CSS position:sticky</div></StickyItem>
-        <div>Content...</div>
-      </StickyContainer>
-    </div>
-  );
-}
+        <StickyItem><div>Sticky even after the container leaves</div></StickyItem>
         <div>Content...</div>
       </StickyContainer>
     </div>
@@ -130,7 +125,7 @@ function Example() {
 
 ### Special behavior of `constraint="none"`
 
-When you set `constraint="none"`, the sticky items will always stick when they reach the top of the viewport, regardless of their parent container's visibility. This exactly matches the behavior of native CSS `position: sticky`.
+When you set `constraint="none"`, the sticky items will always stick when they reach the top of the viewport, regardless of their parent container's visibility. Offsets remain relative to the viewport; this differs from native CSS `position: sticky`, which is constrained by its scrolling ancestor.
 
 In contrast, the default behavior (without specifying a constraint) only makes items sticky when their parent container is visible in the viewport.
 
@@ -158,7 +153,7 @@ React Sticky Kit supports Server-Side Rendering (SSR) and Static Site Generation
 ### Next.js Example
 
 ```tsx
-// pages/index.tsx
+// app/page.tsx (Next.js App Router)
 import { StickyContainer, StickyItem } from 'react-sticky-kit'
 import 'react-sticky-kit/dist/style.css'
 
@@ -174,28 +169,89 @@ export default function Home() {
 }
 ```
 
+For Pages Router, import the global stylesheet from `pages/_app.tsx`.
+
 ### Astro Example
 
+Create a React component containing both `StickyContainer` and `StickyItem`, then
+hydrate it from Astro:
+
 ```astro
 ---
-// src/pages/index.astro
-import { StickyContainer, StickyItem } from 'react-sticky-kit'
-import 'react-sticky-kit/dist/style.css'
+import StickyLayout from '../components/StickyLayout.tsx'
+import 'react-sticky-kit/style'
 ---
+<StickyLayout client:load />
+```
 
-<html>
-  <head>...</head>
-  <body>
-    <StickyContainer client:load>
-      <StickyItem>
-        <header>Sticky Header</header>
-      </StickyItem>
-      <div>Content...</div>
-    </StickyContainer>
-  </body>
-</html>
+## Compatibility and updates
+
+React 17 and later are supported. Import the stylesheet explicitly, using either
+`react-sticky-kit/style` or `react-sticky-kit/dist/style.css`. ESM, CommonJS and the
+UMD browser build are available; UMD requires a global `React`.
+
+The built entry points include `"use client"` for Next.js App Router. Pages Router
+and server rendering remain supported; sticky layout is applied after mounting.
+For Astro, wrap the sticky layout in a React component and hydrate that component
+as a single island.
+
+Sticky offsets use the viewport, even when an event comes from a nested scrolling
+element. Ancestor transforms and overflow clipping can affect fixed positioning;
+use native CSS `position: sticky` if you need offsets relative to a scrolling ancestor.
+
+When available, `ResizeObserver` updates dynamic content heights and widths, and
+tracks ancestor and preceding sibling sizes that can move the container. Shared,
+scoped `MutationObserver` subscriptions refresh these observations when the surrounding
+DOM structure or relevant classes/styles change. Observers and global scroll/resize
+listeners are shared across containers. No continuous polling is used.
+Without `ResizeObserver`, measurements update on scroll, window resize and component
+commits. Native browser scroll anchoring can move the viewport when content above
+it changes; sticky positions follow the resulting viewport.
+
+Wrapper padding, borders and `box-sizing` are accounted for when preserving the
+placeholder and content width. Definite inline heights are retained. Fixed headers
+also follow horizontal scrolling. Per-item layout metrics are cached and invalidated
+by observed dimension changes, window resize, relevant DOM changes and React
+commits. Inactive or fully replaced headers do not have their content heights measured during scrolling.
+`onStickyItemsHeightChange` reports the final total once per animation frame, after
+all scheduled containers have applied their styles, when it changes, including zero when no items remain sticky. It does not emit transient
+per-item totals or callbacks after the container unmounts.
+
+## Performance
+
+Scheduled containers share one animation frame. Their geometry reads finish before
+any sticky styles are written, and unchanged layouts skip repeated style handling.
+Inactive content heights are not measured.
+Prefer grouping related sections in one container rather than mounting a container
+for every row. Large numbers of simultaneously stacked headers still require
+per-frame geometry reads. See the [performance audit](docs/performance.md) for
+stress-test findings and limitations.
+
+## Development
+
+Use Node.js 22.22.2+ or 24.15.0+ and the pnpm version pinned in `package.json`.
+The development tools require these versions; the published library keeps its
+React 17+ peer dependency range and targets ES2018.
+
+```bash
+pnpm install --frozen-lockfile
+pnpm type-check
+pnpm lint
+pnpm test
+pnpm build
+pnpm check:package
+pnpm check:compatibility # installs the tarball with React 17, 18 and 19
+pnpm exec playwright install --with-deps chromium firefox webkit
+pnpm test:browser
 ```
 
+TypeScript 6 is used for development while the ESLint TypeScript plugin supports
+versions below 6.1. Generated declarations use the existing public component API.
+
+## Publish steps
+
+`pnpm pub`
+
 ## License
 
 MIT

package/dist/context.d.cts

@@ -0,0 +1,29 @@
+export declare const MIN_BASE_Z_INDEX = 20;
+export declare const DEFAULT_BASE_Z_INDEX = 200;
+/** Replace the previous item, stack below it, or disable sticky behavior. */
+export type IStickyMode = 'replace' | 'stack' | 'none';
+export interface IStickyItemMeasurement {
+    height: number;
+    wrapperHeight: number;
+    width: number;
+    left: number;
+}
+export interface IStickyItemHandle {
+    el: HTMLElement;
+    content: HTMLElement;
+    mode: Exclude<IStickyMode, 'none'>;
+    measure: (rect: DOMRect) => IStickyItemMeasurement;
+    invalidate: () => void;
+    apply: (layout: (IStickyItemMeasurement & {
+        top: number;
+        index: number;
+    }) | null) => void;
+}
+export interface IStickyGroupContextValue {
+    baseZIndex: number;
+    register: (handle: IStickyItemHandle) => () => void;
+    scheduleUpdate: () => void;
+    mode: IStickyMode;
+}
+export declare const StickyGroupContext: import("react").Context<IStickyGroupContextValue | null>;
+export declare function useStickyContext(): IStickyGroupContextValue | null;

package/dist/context.d.ts

@@ -0,0 +1,29 @@
+export declare const MIN_BASE_Z_INDEX = 20;
+export declare const DEFAULT_BASE_Z_INDEX = 200;
+/** Replace the previous item, stack below it, or disable sticky behavior. */
+export type IStickyMode = 'replace' | 'stack' | 'none';
+export interface IStickyItemMeasurement {
+    height: number;
+    wrapperHeight: number;
+    width: number;
+    left: number;
+}
+export interface IStickyItemHandle {
+    el: HTMLElement;
+    content: HTMLElement;
+    mode: Exclude<IStickyMode, 'none'>;
+    measure: (rect: DOMRect) => IStickyItemMeasurement;
+    invalidate: () => void;
+    apply: (layout: (IStickyItemMeasurement & {
+        top: number;
+        index: number;
+    }) | null) => void;
+}
+export interface IStickyGroupContextValue {
+    baseZIndex: number;
+    register: (handle: IStickyItemHandle) => () => void;
+    scheduleUpdate: () => void;
+    mode: IStickyMode;
+}
+export declare const StickyGroupContext: import("react").Context<IStickyGroupContextValue | null>;
+export declare function useStickyContext(): IStickyGroupContextValue | null;

package/dist/index.d.cts

@@ -0,0 +1,34 @@
+import React from 'react';
+export type { IStickyMode } from './context.cjs';
+export * from './sticky-item.cjs';
+export interface IStickyContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    /**
+     * The offset from the top of the viewport for sticky elements. Default is 0.
+     */
+    offsetTop?: number;
+    /**
+     * base z-index for sticky items. Default is 200. minimum z-index is 20.
+     * * - When using the `replace` mode, the z-index of a `StickyItem` is calculated as `baseZIndex` minus its index within the container.
+     * * - When using the `stack` mode, the z-index of a `StickyItem` is calculated as `baseZIndex` plus its index.
+     * * should be greater than number of sticky items in the container.
+     * * use it when you need nest StickyContainer or need to change z-index of sticky items.
+     */
+    baseZIndex?: number;
+    /**
+     * Default sticky mode for the group. 'none' disables sticky behavior.
+     */
+    defaultMode?: 'replace' | 'stack' | 'none';
+    /**
+     * Callback triggered when the total height of all currently sticky items changes.
+     * @param height The total height of all sticky items inside the container.
+     */
+    onStickyItemsHeightChange?: (height: number) => void;
+    /**
+     * Define the constraint for sticky behavior
+     * - undefined (default): Sticky items will stop being sticky when StickyContainer leaves viewport
+     * - 'none': No container boundary; offsets remain viewport-relative
+     */
+    constraint?: 'none';
+}
+export declare function StickyContainer({ children, offsetTop, baseZIndex, onStickyItemsHeightChange, defaultMode, constraint, className, ...rest }: IStickyContainerProps): React.ReactElement<any, any>;

package/dist/index.d.ts

@@ -1,56 +1,34 @@
-import { default as default_2 } from 'react';
-import { JSX } from 'react/jsx-runtime';
-
-export declare interface IStickyContainerProps extends default_2.HTMLAttributes<HTMLDivElement> {
-    children: default_2.ReactNode;
-    /**
-     * The offset from the top of the viewport for sticky elements. Default is 0.
-     */
-    offsetTop?: number;
-    /**
-     * base z-index for sticky items. Default is 200. minimum z-index is 20.
-     * * - When using the `replace` mode, the z-index of a `StickyItem` is calculated as `baseZIndex` minus its index within the container.
-     * * - When using the `stack` mode, the z-index of a `StickyItem` is calculated as `baseZIndex` plus its index.
-     * * should be greater than number of sticky items in the container.
-     * * for performance reasons, when baseZIndex is changed, the component will not re-render.
-     * * use it when you need nest StickyContainer or need to change z-index of sticky items.
-     */
-    baseZIndex?: number;
-    /**
-     * Default sticky mode for the group. 'none' disables sticky behavior.
-     */
-    defaultMode?: 'replace' | 'stack' | 'none';
-    /**
-     * Callback triggered when the total height of all currently sticky items changes.
-     * @param height The total height of all sticky items inside the container.
-     */
-    onStickyItemsHeightChange?: (height: number) => void;
-    /**
-     * Define the constraint for sticky behavior
-     * - undefined (default): Sticky items will stop being sticky when StickyContainer leaves viewport
-     * - 'none': No constraints, similar to CSS position:sticky behavior
-     */
-    constraint?: 'none';
-}
-
-export declare interface IStickyItemProps extends default_2.HTMLAttributes<HTMLDivElement> {
-    children: default_2.ReactNode;
-    /**
-     * Sticky mode for this item. Defaults to the StickyContainer's mode if not specified.
-     */
-    mode?: IStickyMode;
-}
-
-/**
- * Sticky mode:
- * - 'replace': This item replaces the previous sticky item; its height is set to the previous sticky item's height.
- * - 'stack': This item stacks on top of previous sticky items; its height is set to 0.
- * - 'none': This item is not sticky.
- */
-export declare type IStickyMode = 'replace' | 'stack' | 'none';
-
-export declare function StickyContainer({ children, offsetTop, baseZIndex, onStickyItemsHeightChange, defaultMode, constraint, ...rest }: IStickyContainerProps): JSX.Element;
-
-export declare function StickyItem({ mode, children, className, ...rest }: IStickyItemProps): JSX.Element;
-
-export { }
+import React from 'react';
+export type { IStickyMode } from './context.js';
+export * from './sticky-item.js';
+export interface IStickyContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    /**
+     * The offset from the top of the viewport for sticky elements. Default is 0.
+     */
+    offsetTop?: number;
+    /**
+     * base z-index for sticky items. Default is 200. minimum z-index is 20.
+     * * - When using the `replace` mode, the z-index of a `StickyItem` is calculated as `baseZIndex` minus its index within the container.
+     * * - When using the `stack` mode, the z-index of a `StickyItem` is calculated as `baseZIndex` plus its index.
+     * * should be greater than number of sticky items in the container.
+     * * use it when you need nest StickyContainer or need to change z-index of sticky items.
+     */
+    baseZIndex?: number;
+    /**
+     * Default sticky mode for the group. 'none' disables sticky behavior.
+     */
+    defaultMode?: 'replace' | 'stack' | 'none';
+    /**
+     * Callback triggered when the total height of all currently sticky items changes.
+     * @param height The total height of all sticky items inside the container.
+     */
+    onStickyItemsHeightChange?: (height: number) => void;
+    /**
+     * Define the constraint for sticky behavior
+     * - undefined (default): Sticky items will stop being sticky when StickyContainer leaves viewport
+     * - 'none': No container boundary; offsets remain viewport-relative
+     */
+    constraint?: 'none';
+}
+export declare function StickyContainer({ children, offsetTop, baseZIndex, onStickyItemsHeightChange, defaultMode, constraint, className, ...rest }: IStickyContainerProps): React.ReactElement<any, any>;

package/dist/layout-observer.d.cts

@@ -0,0 +1,2 @@
+/** Share observations of ancestors and preceding siblings across all containers. */
+export declare function observeLayoutChanges(container: HTMLElement, callback: () => void): () => void;

package/dist/layout-observer.d.ts

@@ -0,0 +1,2 @@
+/** Share observations of ancestors and preceding siblings across all containers. */
+export declare function observeLayoutChanges(container: HTMLElement, callback: () => void): () => void;

package/dist/react-sticky.cjs

@@ -0,0 +1 @@
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,s)=>(s=n==null?{}:e(i(n)),o(r||!n||!n.__esModule||!a.call(n,`default`)?t(s,`default`,{value:n,enumerable:!0}):s,n));let c=require("react");c=s(c,1);var l=(0,c.createContext)(null);function u(){return(0,c.useContext)(l)}var d=new Map,f=null;function p(e,t){if(typeof ResizeObserver>`u`)return()=>{};f!=null||(f=new ResizeObserver(e=>{let t=new Map;for(let r of e){var n;for(let e of(n=d.get(r.target))==null?[]:n){let n=t.get(e);n?n.push(r):t.set(e,[r])}}for(let[e,n]of t)e(n)}));let n=d.get(e);return n||(n=new Set,d.set(e,n),f.observe(e)),n.add(t),()=>{n.delete(t),n.size||(d.delete(e),f==null||f.unobserve(e)),d.size||(f==null||f.disconnect(),f=null)}}var m=new Map,h=new Map,g=null,_=!1;function v(){for(let e of m.values())e()}function y(){_||(_=!0,Promise.resolve().then(()=>{_=!1,m.size&&b()}))}function b(){let e=new Set,t=new Set;for(let n of m.keys())for(let r=n;r!=null&&r.parentElement;r=r.parentElement){let n=r.parentElement;e.add(n);for(let t=r.previousElementSibling;t&&!e.has(t);t=t.previousElementSibling)e.add(t);if(t.has(n))break;t.add(n)}let n=[...h.keys()].filter(t=>!e.has(t));n.length&&(g==null||g.disconnect());for(let e of n)h.get(e)(),h.delete(e);for(let t of e){let e=!h.has(t);e&&h.set(t,p(t,v)),(e||n.length)&&(g==null||g.observe(t,{childList:!0,attributes:!0,attributeFilter:[`class`,`style`]}))}}function x(e,t){return m.set(e,t),!g&&typeof MutationObserver<`u`&&(g=new MutationObserver(e=>{e.some(e=>e.type===`childList`)&&y(),v()})),y(),()=>{if(m.delete(e),m.size)y();else{g==null||g.disconnect(),g=null;for(let e of h.values())e();h.clear()}}}var S=new Set,C=new Set,w=null;function T(e){S.has(e)&&(C.add(e),w!=null||(w=requestAnimationFrame(O)))}function E(){for(let e of S)T(e)}function D(){for(let e of S)e.resize(),T(e)}function O(){w=null;let e=[...C];C.clear();let t=[],n=[],r=[];for(let n of e)if(S.has(n))try{let e=n.read();e&&t.push({client:n,write:e})}catch(e){r.push(e)}for(let{client:e,write:i}of t)if(S.has(e))try{let t=i();t&&n.push({client:e,notify:t})}catch(e){r.push(e)}for(let{client:e,notify:t}of n)if(S.has(e))try{t()}catch(e){r.push(e)}if(r.length)throw r[0]}function k(e,t){let n={read:e,resize:t};return S.size||(window.addEventListener(`scroll`,E,{passive:!0,capture:!0}),window.addEventListener(`resize`,D,{passive:!0})),S.add(n),T(n),{schedule:()=>T(n),stop:()=>{S.delete(n),C.delete(n),!C.size&&w!==null&&(cancelAnimationFrame(w),w=null),S.size||(window.removeEventListener(`scroll`,E,!0),window.removeEventListener(`resize`,D))}}}function A({mode:e,children:t,className:n,...r}){var i;let a=u(),o=(0,c.useRef)(null),s=(0,c.useRef)(null),l=a==null?void 0:a.register,d=e==null?a==null?void 0:a.mode:e,f=a==null?void 0:a.baseZIndex,p=(i=r.style)==null?void 0:i.height,m=(0,c.useRef)(null),h=a==null?void 0:a.scheduleUpdate;return(0,c.useEffect)(()=>{let e=o.current,t=s.current;if(!e||!t)return;let n=typeof p==`number`?`${p}px`:p==null?``:p;if(j(e,`height`,n),!l||!d||d===`none`)return;let r=p===void 0||[`auto`,`initial`,`unset`,`revert`,`revert-layer`,`fit-content`,`min-content`,`max-content`].includes(String(p)),i=!1,a=null,c=()=>{if(i){i=!1,a=null,t.classList.remove(`is-sticky`),e.style.height=n;for(let e of[`top`,`left`,`width`,`z-index`])t.style.removeProperty(e)}},u=null,h={el:e,content:t,mode:d,apply:n=>{if(n===null){c();return}let{top:o,wrapperHeight:s,width:l,left:u,index:p}=n;a&&a.top===o&&a.wrapperHeight===s&&a.width===l&&a.left===u&&a.index===p||(a=n,r&&j(e,`height`,`${s}px`),j(t,`top`,`${o}px`),j(t,`left`,`${u}px`),j(t,`width`,`${l}px`),j(t,`zIndex`,`${(f==null?200:f)+(d===`replace`?-p:p)}`),i||(i=!0,t.classList.add(`is-sticky`)))},measure:n=>{u!=null||(u=M(e,t));let r=t.getBoundingClientRect().height;return{height:r,wrapperHeight:r+u.heightInset,width:Math.max(0,n.width-u.widthInset),left:n.left+u.leftInset}},invalidate:()=>{u=null,a=null}};m.current=h;let g=l(h);return()=>{m.current=null,g(),c()}},[l,d,f,p]),(0,c.useEffect)(()=>{var e;(e=m.current)==null||e.invalidate(),h==null||h()}),c.default.createElement(`div`,{...r,className:[`oe-sticky-item`,n].filter(Boolean).join(` `),ref:o},c.default.createElement(`div`,{className:`oe-sticky-content`,ref:s},t))}function j(e,t,n){e.style[t]!==n&&(e.style[t]=n)}function M(e,t){let n=getComputedStyle(e),r=getComputedStyle(t),i=e=>Number.parseFloat(e)||0,a=e=>i(e.paddingLeft)+i(e.paddingRight)+i(e.borderLeftWidth)+i(e.borderRightWidth);return{heightInset:n.boxSizing===`border-box`?i(n.paddingTop)+i(n.paddingBottom)+i(n.borderTopWidth)+i(n.borderBottomWidth):0,widthInset:a(n)+(r.boxSizing===`border-box`?0:a(r)),leftInset:i(n.paddingLeft)+i(n.borderLeftWidth)}}function N({children:e,offsetTop:t=0,baseZIndex:n,onStickyItemsHeightChange:r,defaultMode:i=`replace`,constraint:a,className:o,...s}){let u=(0,c.useRef)(null),d=(0,c.useRef)(new Set),f=(0,c.useRef)(null),m=(0,c.useRef)(new Map),h=(0,c.useRef)(!1),g=(0,c.useRef)(null),_=(0,c.useRef)(new Map),v=(0,c.useRef)(0),y=(0,c.useRef)({offsetTop:t,constraint:a,onStickyItemsHeightChange:r}),b=(0,c.useCallback)(()=>{var e;return(e=g.current)==null?void 0:e.schedule()},[]),S=(0,c.useCallback)(()=>{var e;let t=u.current;if(!t)return;let n=y.current,r=t.getBoundingClientRect();if(!(n.constraint===`none`||r.top<=n.offsetTop&&r.bottom>=n.offsetTop))return()=>{if(h.current){t.classList.remove(`can-sticky`);for(let e of d.current)e.apply(null);h.current=!1}if(v.current!==0)return v.current=0,()=>{var e;return(e=n.onStickyItemsHeightChange)==null?void 0:e.call(n,0)}};let i=((e=f.current)==null?f.current=[...d.current]:e).map(e=>({item:e,rect:e.el.getBoundingClientRect()})).sort((e,t)=>{let n=e.rect.top-t.rect.top;return n===0?e.item.el.compareDocumentPosition(t.item.el)&Node.DOCUMENT_POSITION_FOLLOWING?-1:1:n}),a=n.offsetTop,o=0,s=i.map(({item:e,rect:t},n)=>{var r;if(t.top>a)return null;let s=(r=i[n+1])==null?void 0:r.rect.top;if(e.mode===`replace`&&s!==void 0&&s<a)return null;let c=e.measure(t),l=e.mode===`replace`&&s!==void 0?Math.min(a,s-c.height):a;return o+=c.height,e.mode===`stack`&&(a+=c.height),{...c,top:l,index:n}}),c=n.constraint===`none`?0:Math.min(0,r.bottom-n.offsetTop-o);return()=>{if(h.current=s.some(e=>e!==null),t.classList.toggle(`can-sticky`,h.current),i.forEach(({item:e},t)=>{let n=s[t];n&&(n.top+=c),e.apply(n)}),v.current!==o)return v.current=o,()=>{var e;return(e=n.onStickyItemsHeightChange)==null?void 0:e.call(n,o)}}},[]),C=(0,c.useCallback)(e=>{var t;for(let n of e)(t=m.current.get(n.target))==null||t.invalidate();b()},[b]),w=(0,c.useCallback)(()=>{for(let e of d.current)e.invalidate()},[]),T=(0,c.useCallback)(e=>(d.current.add(e),f.current=null,m.current.set(e.el,e),m.current.set(e.content,e),g.current&&(_.current.set(e.el,p(e.el,C)),_.current.set(e.content,p(e.content,C))),b(),()=>{var t,n;(t=_.current.get(e.el))==null||t(),(n=_.current.get(e.content))==null||n(),_.current.delete(e.el),_.current.delete(e.content),m.current.delete(e.el),m.current.delete(e.content),d.current.delete(e),f.current=null,b()}),[b,C]);(0,c.useEffect)(()=>{g.current=k(S,w);let e;if(typeof ResizeObserver<`u`){u.current&&(_.current.set(u.current,p(u.current,C)),e=x(u.current,()=>{w(),b()}));for(let e of d.current)_.current.set(e.el,p(e.el,C)),_.current.set(e.content,p(e.content,C))}let t=_.current;return()=>{var n;(n=g.current)==null||n.stop(),g.current=null,e==null||e();for(let e of t.values())e();t.clear()}},[S,w,b,C]),(0,c.useEffect)(()=>{y.current={offsetTop:t,constraint:a,onStickyItemsHeightChange:r};for(let e of d.current)e.invalidate();b()});let E=n===void 0?200:Math.max(Number(n)||0,20),D=(0,c.useMemo)(()=>({register:T,scheduleUpdate:b,baseZIndex:E,mode:i}),[T,b,E,i]);return c.default.createElement(l.Provider,{value:D},c.default.createElement(`div`,{...s,ref:u,className:[`oe-sticky-container`,o].filter(Boolean).join(` `)},e))}exports.StickyContainer=N,exports.StickyItem=A;

package/dist/react-sticky.es.js

@@ -1,157 +1,329 @@
-import { jsx as w } from "react/jsx-runtime";
-import { createContext as Z, useContext as L, useRef as k, useState as T, useEffect as E, useCallback as v, useMemo as _ } from "react";
-const O = 20, A = 200, $ = Z(null);
-function z() {
-  return L($);
+"use client";
+import e, { createContext as t, useCallback as n, useContext as r, useEffect as i, useMemo as a, useRef as o } from "react";
+//#region src/context.ts
+var s = t(null);
+function c() {
+	return r(s);
 }
-function M({ mode: f, children: y, className: h, ...I }) {
-  const e = z(), g = k(null), S = k(null), [m, o] = T(!1), l = k({
-    fixedOffsetTop: (e == null ? void 0 : e.fixedOffsetTop) || 0,
-    isSticky: m,
-    baseZIndex: (e == null ? void 0 : e.baseZIndex) || O
-  });
-  return l.current.baseZIndex = (e == null ? void 0 : e.baseZIndex) || O, l.current.fixedOffsetTop = (e == null ? void 0 : e.fixedOffsetTop) || 0, l.current.isSticky = m, E(() => {
-    const t = S.current, a = g.current, n = f || (e == null ? void 0 : e.mode);
-    if (!e || !a || !t || n === "none" || !n || !e.register) {
-      o(!1);
-      return;
-    }
-    const x = {
-      el: a,
-      update: (B, c, s, r, u) => {
-        if (!B || c > s)
-          return l.current.isSticky && o(!1), 0;
-        const i = t.getBoundingClientRect().height;
-        let p = s;
-        if (n === "replace" && typeof r < "u") {
-          const d = r - (s + i);
-          if (d < 0 && (p = s + d, d + i < 0))
-            return l.current.isSticky && o(!1), 0;
-        }
-        return a.style.height = `${i}px`, l.current.isSticky || o(!0), t.style.top = `${p}px`, t.style.width = `${a.offsetWidth}px`, t.style.zIndex = `${l.current.baseZIndex + (n === "replace" ? -u : u)}`, n === "replace" ? 0 : i;
-      }
-    };
-    return e.register(x);
-  }, [e == null ? void 0 : e.mode, e == null ? void 0 : e.register, f]), E(() => {
-    const t = g.current, a = S.current, n = e == null ? void 0 : e.updateStickyItemsHeight;
-    if (!m || !t || !a || !n)
-      return;
-    const H = n(a.getBoundingClientRect().height);
-    return () => {
-      N(t, ["height"]), N(a, ["top", "z-index", "width"]), H();
-    };
-  }, [m, e == null ? void 0 : e.updateStickyItemsHeight]), /* @__PURE__ */ w("div", { className: "oe-sticky-item " + (h || ""), ...I, ref: g, children: /* @__PURE__ */ w("div", { className: "oe-sticky-content " + (m ? "is-sticky" : ""), ref: S, children: y }) });
+//#endregion
+//#region src/resize-observer.ts
+var l = /* @__PURE__ */ new Map(), u = null;
+function d(e, t) {
+	if (typeof ResizeObserver > "u") return () => {};
+	u != null || (u = new ResizeObserver((e) => {
+		let t = /* @__PURE__ */ new Map();
+		for (let r of e) {
+			var n;
+			for (let e of (n = l.get(r.target)) == null ? [] : n) {
+				let n = t.get(e);
+				n ? n.push(r) : t.set(e, [r]);
+			}
+		}
+		for (let [e, n] of t) e(n);
+	}));
+	let n = l.get(e);
+	return n || (n = /* @__PURE__ */ new Set(), l.set(e, n), u.observe(e)), n.add(t), () => {
+		n.delete(t), n.size || (l.delete(e), u == null || u.unobserve(e)), l.size || (u == null || u.disconnect(), u = null);
+	};
 }
-function N(f, y) {
-  y.forEach((h) => {
-    f.style.removeProperty(h);
-  });
+//#endregion
+//#region src/layout-observer.ts
+var f = /* @__PURE__ */ new Map(), p = /* @__PURE__ */ new Map(), m = null, h = !1;
+function g() {
+	for (let e of f.values()) e();
 }
-function P({
-  children: f,
-  offsetTop: y = 0,
-  baseZIndex: h,
-  onStickyItemsHeightChange: I,
-  defaultMode: e = "replace",
-  constraint: g,
-  ...S
-}) {
-  const m = k(null), o = k([]), l = k(null), t = k({
-    fixedOffsetTop: y,
-    defaultMode: e,
-    stickyItemsHeight: 0,
-    onStickyItemsHeightChange: I,
-    lastCanSticky: !1
-  });
-  t.current.onStickyItemsHeightChange = I;
-  const a = v(() => {
-    var c;
-    return g === "none" ? {
-      top: -1 / 0,
-      bottom: 1 / 0,
-      left: -1 / 0,
-      right: 1 / 0,
-      width: 1 / 0,
-      height: 1 / 0,
-      x: 0,
-      y: 0,
-      toJSON: () => ({})
-    } : ((c = m.current) == null ? void 0 : c.getBoundingClientRect()) || { top: 0, bottom: 0, left: 0, right: 0, width: 0, height: 0, x: 0, y: 0, toJSON: () => ({}) };
-  }, [g]), n = v(() => {
-    const c = m.current;
-    !c || l.current || (l.current = requestAnimationFrame(() => {
-      l.current = null;
-      const s = a(), { fixedOffsetTop: r, stickyItemsHeight: u } = t.current;
-      let i;
-      if (g === "none" ? i = !0 : i = !(s.top > r || s.bottom < r), !i) {
-        t.current.lastCanSticky !== i && (c.classList.toggle("can-sticky", !1), o.current.forEach((C) => C.update(!1, 0, 0, 0, 0)), t.current.lastCanSticky = i);
-        return;
-      }
-      t.current.lastCanSticky = i, u > 0 && c.classList.toggle("can-sticky", !0);
-      let p, d = 0;
-      p = r, d = s.bottom - (r + u), d > 0 && (d = 0);
-      const b = o.current.map((C) => C.el.getBoundingClientRect().top);
-      o.current.forEach((C, R) => {
-        p += C.update(i, b[R], p + d, b[R + 1], R);
-      });
-    }));
-  }, [a, g]), H = v((c) => {
-    const s = t.current.stickyItemsHeight + c;
-    return t.current.stickyItemsHeight = s, setTimeout(() => {
-      var r, u;
-      (u = (r = t.current).onStickyItemsHeightChange) == null || u.call(r, s);
-    }, 0), () => {
-      const r = t.current.stickyItemsHeight - c;
-      t.current.stickyItemsHeight = r, setTimeout(() => {
-        var u, i;
-        (i = (u = t.current).onStickyItemsHeightChange) == null || i.call(u, r);
-      }, 0);
-    };
-  }, []);
-  E(() => {
-    t.current.fixedOffsetTop = y, t.current.defaultMode = e, setTimeout(() => {
-      n();
-    }, 10);
-  }, [y, e, n]);
-  const x = v((c) => (o.current.push(c), o.current = W(o.current), n(), () => {
-    o.current = o.current.filter((s) => s !== c), n();
-  }), [n]);
-  E(() => (window.addEventListener("scroll", n, { passive: !0 }), window.addEventListener("resize", n, { passive: !0 }), () => {
-    window.removeEventListener("scroll", n), window.removeEventListener("resize", n);
-  }), [n]);
-  const B = _(() => D(h), [h]);
-  return /* @__PURE__ */ w(
-    $.Provider,
-    {
-      value: {
-        register: x,
-        baseZIndex: B,
-        updateStickyItemsHeight: H,
-        fixedOffsetTop: y,
-        mode: e
-      },
-      children: /* @__PURE__ */ w(
-        "div",
-        {
-          ...S,
-          ref: m,
-          className: "oe-sticky-container",
-          children: f
-        }
-      )
-    }
-  );
+function _() {
+	h || (h = !0, Promise.resolve().then(() => {
+		h = !1, f.size && v();
+	}));
 }
-function D(f) {
-  return typeof f > "u" ? A : Math.max(Number(f) || 0, O);
+function v() {
+	let e = /* @__PURE__ */ new Set(), t = /* @__PURE__ */ new Set();
+	for (let n of f.keys()) for (let r = n; r != null && r.parentElement; r = r.parentElement) {
+		let n = r.parentElement;
+		e.add(n);
+		for (let t = r.previousElementSibling; t && !e.has(t); t = t.previousElementSibling) e.add(t);
+		if (t.has(n)) break;
+		t.add(n);
+	}
+	let n = [...p.keys()].filter((t) => !e.has(t));
+	n.length && (m == null || m.disconnect());
+	for (let e of n) p.get(e)(), p.delete(e);
+	for (let t of e) {
+		let e = !p.has(t);
+		e && p.set(t, d(t, g)), (e || n.length) && (m == null || m.observe(t, {
+			childList: !0,
+			attributes: !0,
+			attributeFilter: ["class", "style"]
+		}));
+	}
 }
-function W(f) {
-  return f.sort((y, h) => {
-    const I = y.el.getBoundingClientRect(), e = h.el.getBoundingClientRect();
-    return I.top - e.top;
-  });
+function y(e, t) {
+	return f.set(e, t), !m && typeof MutationObserver < "u" && (m = new MutationObserver((e) => {
+		e.some((e) => e.type === "childList") && _(), g();
+	})), _(), () => {
+		if (f.delete(e), f.size) _();
+		else {
+			m == null || m.disconnect(), m = null;
+			for (let e of p.values()) e();
+			p.clear();
+		}
+	};
 }
-export {
-  P as StickyContainer,
-  M as StickyItem
-};
+//#endregion
+//#region src/scheduler.ts
+var b = /* @__PURE__ */ new Set(), x = /* @__PURE__ */ new Set(), S = null;
+function C(e) {
+	b.has(e) && (x.add(e), S != null || (S = requestAnimationFrame(E)));
+}
+function w() {
+	for (let e of b) C(e);
+}
+function T() {
+	for (let e of b) e.resize(), C(e);
+}
+function E() {
+	S = null;
+	let e = [...x];
+	x.clear();
+	let t = [], n = [], r = [];
+	for (let n of e) if (b.has(n)) try {
+		let e = n.read();
+		e && t.push({
+			client: n,
+			write: e
+		});
+	} catch (e) {
+		r.push(e);
+	}
+	for (let { client: e, write: i } of t) if (b.has(e)) try {
+		let t = i();
+		t && n.push({
+			client: e,
+			notify: t
+		});
+	} catch (e) {
+		r.push(e);
+	}
+	for (let { client: e, notify: t } of n) if (b.has(e)) try {
+		t();
+	} catch (e) {
+		r.push(e);
+	}
+	if (r.length) throw r[0];
+}
+function D(e, t) {
+	let n = {
+		read: e,
+		resize: t
+	};
+	return b.size || (window.addEventListener("scroll", w, {
+		passive: !0,
+		capture: !0
+	}), window.addEventListener("resize", T, { passive: !0 })), b.add(n), C(n), {
+		schedule: () => C(n),
+		stop: () => {
+			b.delete(n), x.delete(n), !x.size && S !== null && (cancelAnimationFrame(S), S = null), b.size || (window.removeEventListener("scroll", w, !0), window.removeEventListener("resize", T));
+		}
+	};
+}
+//#endregion
+//#region src/sticky-item.tsx
+function O({ mode: t, children: n, className: r, ...a }) {
+	var s;
+	let l = c(), u = o(null), d = o(null), f = l == null ? void 0 : l.register, p = t == null ? l == null ? void 0 : l.mode : t, m = l == null ? void 0 : l.baseZIndex, h = (s = a.style) == null ? void 0 : s.height, g = o(null), _ = l == null ? void 0 : l.scheduleUpdate;
+	return i(() => {
+		let e = u.current, t = d.current;
+		if (!e || !t) return;
+		let n = typeof h == "number" ? `${h}px` : h == null ? "" : h;
+		if (k(e, "height", n), !f || !p || p === "none") return;
+		let r = h === void 0 || [
+			"auto",
+			"initial",
+			"unset",
+			"revert",
+			"revert-layer",
+			"fit-content",
+			"min-content",
+			"max-content"
+		].includes(String(h)), i = !1, a = null, o = () => {
+			if (i) {
+				i = !1, a = null, t.classList.remove("is-sticky"), e.style.height = n;
+				for (let e of [
+					"top",
+					"left",
+					"width",
+					"z-index"
+				]) t.style.removeProperty(e);
+			}
+		}, s = null, c = {
+			el: e,
+			content: t,
+			mode: p,
+			apply: (n) => {
+				if (n === null) {
+					o();
+					return;
+				}
+				let { top: s, wrapperHeight: c, width: l, left: u, index: d } = n;
+				a && a.top === s && a.wrapperHeight === c && a.width === l && a.left === u && a.index === d || (a = n, r && k(e, "height", `${c}px`), k(t, "top", `${s}px`), k(t, "left", `${u}px`), k(t, "width", `${l}px`), k(t, "zIndex", `${(m == null ? 200 : m) + (p === "replace" ? -d : d)}`), i || (i = !0, t.classList.add("is-sticky")));
+			},
+			measure: (n) => {
+				s != null || (s = A(e, t));
+				let r = t.getBoundingClientRect().height;
+				return {
+					height: r,
+					wrapperHeight: r + s.heightInset,
+					width: Math.max(0, n.width - s.widthInset),
+					left: n.left + s.leftInset
+				};
+			},
+			invalidate: () => {
+				s = null, a = null;
+			}
+		};
+		g.current = c;
+		let l = f(c);
+		return () => {
+			g.current = null, l(), o();
+		};
+	}, [
+		f,
+		p,
+		m,
+		h
+	]), i(() => {
+		var e;
+		(e = g.current) == null || e.invalidate(), _ == null || _();
+	}), /* @__PURE__ */ e.createElement("div", {
+		...a,
+		className: ["oe-sticky-item", r].filter(Boolean).join(" "),
+		ref: u
+	}, /* @__PURE__ */ e.createElement("div", {
+		className: "oe-sticky-content",
+		ref: d
+	}, n));
+}
+function k(e, t, n) {
+	e.style[t] !== n && (e.style[t] = n);
+}
+function A(e, t) {
+	let n = getComputedStyle(e), r = getComputedStyle(t), i = (e) => Number.parseFloat(e) || 0, a = (e) => i(e.paddingLeft) + i(e.paddingRight) + i(e.borderLeftWidth) + i(e.borderRightWidth);
+	return {
+		heightInset: n.boxSizing === "border-box" ? i(n.paddingTop) + i(n.paddingBottom) + i(n.borderTopWidth) + i(n.borderBottomWidth) : 0,
+		widthInset: a(n) + (r.boxSizing === "border-box" ? 0 : a(r)),
+		leftInset: i(n.paddingLeft) + i(n.borderLeftWidth)
+	};
+}
+//#endregion
+//#region src/index.tsx
+function j({ children: t, offsetTop: r = 0, baseZIndex: c, onStickyItemsHeightChange: l, defaultMode: u = "replace", constraint: f, className: p, ...m }) {
+	let h = o(null), g = o(/* @__PURE__ */ new Set()), _ = o(null), v = o(/* @__PURE__ */ new Map()), b = o(!1), x = o(null), S = o(/* @__PURE__ */ new Map()), C = o(0), w = o({
+		offsetTop: r,
+		constraint: f,
+		onStickyItemsHeightChange: l
+	}), T = n(() => {
+		var e;
+		return (e = x.current) == null ? void 0 : e.schedule();
+	}, []), E = n(() => {
+		var e;
+		let t = h.current;
+		if (!t) return;
+		let n = w.current, r = t.getBoundingClientRect();
+		if (!(n.constraint === "none" || r.top <= n.offsetTop && r.bottom >= n.offsetTop)) return () => {
+			if (b.current) {
+				t.classList.remove("can-sticky");
+				for (let e of g.current) e.apply(null);
+				b.current = !1;
+			}
+			if (C.current !== 0) return C.current = 0, () => {
+				var e;
+				return (e = n.onStickyItemsHeightChange) == null ? void 0 : e.call(n, 0);
+			};
+		};
+		let i = ((e = _.current) == null ? _.current = [...g.current] : e).map((e) => ({
+			item: e,
+			rect: e.el.getBoundingClientRect()
+		})).sort((e, t) => {
+			let n = e.rect.top - t.rect.top;
+			return n === 0 ? e.item.el.compareDocumentPosition(t.item.el) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1 : n;
+		}), a = n.offsetTop, o = 0, s = i.map(({ item: e, rect: t }, n) => {
+			var r;
+			if (t.top > a) return null;
+			let s = (r = i[n + 1]) == null ? void 0 : r.rect.top;
+			if (e.mode === "replace" && s !== void 0 && s < a) return null;
+			let c = e.measure(t), l = e.mode === "replace" && s !== void 0 ? Math.min(a, s - c.height) : a;
+			return o += c.height, e.mode === "stack" && (a += c.height), {
+				...c,
+				top: l,
+				index: n
+			};
+		}), c = n.constraint === "none" ? 0 : Math.min(0, r.bottom - n.offsetTop - o);
+		return () => {
+			if (b.current = s.some((e) => e !== null), t.classList.toggle("can-sticky", b.current), i.forEach(({ item: e }, t) => {
+				let n = s[t];
+				n && (n.top += c), e.apply(n);
+			}), C.current !== o) return C.current = o, () => {
+				var e;
+				return (e = n.onStickyItemsHeightChange) == null ? void 0 : e.call(n, o);
+			};
+		};
+	}, []), O = n((e) => {
+		var t;
+		for (let n of e) (t = v.current.get(n.target)) == null || t.invalidate();
+		T();
+	}, [T]), k = n(() => {
+		for (let e of g.current) e.invalidate();
+	}, []), A = n((e) => (g.current.add(e), _.current = null, v.current.set(e.el, e), v.current.set(e.content, e), x.current && (S.current.set(e.el, d(e.el, O)), S.current.set(e.content, d(e.content, O))), T(), () => {
+		var t, n;
+		(t = S.current.get(e.el)) == null || t(), (n = S.current.get(e.content)) == null || n(), S.current.delete(e.el), S.current.delete(e.content), v.current.delete(e.el), v.current.delete(e.content), g.current.delete(e), _.current = null, T();
+	}), [T, O]);
+	i(() => {
+		x.current = D(E, k);
+		let e;
+		if (typeof ResizeObserver < "u") {
+			h.current && (S.current.set(h.current, d(h.current, O)), e = y(h.current, () => {
+				k(), T();
+			}));
+			for (let e of g.current) S.current.set(e.el, d(e.el, O)), S.current.set(e.content, d(e.content, O));
+		}
+		let t = S.current;
+		return () => {
+			var n;
+			(n = x.current) == null || n.stop(), x.current = null, e == null || e();
+			for (let e of t.values()) e();
+			t.clear();
+		};
+	}, [
+		E,
+		k,
+		T,
+		O
+	]), i(() => {
+		w.current = {
+			offsetTop: r,
+			constraint: f,
+			onStickyItemsHeightChange: l
+		};
+		for (let e of g.current) e.invalidate();
+		T();
+	});
+	let j = c === void 0 ? 200 : Math.max(Number(c) || 0, 20), M = a(() => ({
+		register: A,
+		scheduleUpdate: T,
+		baseZIndex: j,
+		mode: u
+	}), [
+		A,
+		T,
+		j,
+		u
+	]);
+	return /* @__PURE__ */ e.createElement(s.Provider, { value: M }, /* @__PURE__ */ e.createElement("div", {
+		...m,
+		ref: h,
+		className: ["oe-sticky-container", p].filter(Boolean).join(" ")
+	}, t));
+}
+//#endregion
+export { j as StickyContainer, O as StickyItem };

package/dist/react-sticky.umd.js

@@ -1 +1 @@
-(function(g,I){typeof exports=="object"&&typeof module<"u"?I(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],I):(g=typeof globalThis<"u"?globalThis:g||self,I(g.ReactSticky={},g.jsxRuntime,g.React))})(this,function(g,I,n){"use strict";const N=n.createContext(null);function w(){return n.useContext(N)}const L="";function O({mode:l,children:h,className:k,...E}){const e=w(),m=n.useRef(null),C=n.useRef(null),[p,o]=n.useState(!1),d=n.useRef({fixedOffsetTop:(e==null?void 0:e.fixedOffsetTop)||0,isSticky:p,baseZIndex:(e==null?void 0:e.baseZIndex)||20});return d.current.baseZIndex=(e==null?void 0:e.baseZIndex)||20,d.current.fixedOffsetTop=(e==null?void 0:e.fixedOffsetTop)||0,d.current.isSticky=p,n.useEffect(()=>{const t=C.current,a=m.current,i=l||(e==null?void 0:e.mode);if(!e||!a||!t||i==="none"||!i||!e.register){o(!1);return}const v={el:a,update:(B,c,u,r,f)=>{if(!B||c>u)return d.current.isSticky&&o(!1),0;const s=t.getBoundingClientRect().height;let S=u;if(i==="replace"&&typeof r<"u"){const y=r-(u+s);if(y<0&&(S=u+y,y+s<0))return d.current.isSticky&&o(!1),0}return a.style.height=`${s}px`,d.current.isSticky||o(!0),t.style.top=`${S}px`,t.style.width=`${a.offsetWidth}px`,t.style.zIndex=`${d.current.baseZIndex+(i==="replace"?-f:f)}`,i==="replace"?0:s}};return e.register(v)},[e==null?void 0:e.mode,e==null?void 0:e.register,l]),n.useEffect(()=>{const t=m.current,a=C.current,i=e==null?void 0:e.updateStickyItemsHeight;if(!p||!t||!a||!i)return;const _=i(a.getBoundingClientRect().height);return()=>{b(t,["height"]),b(a,["top","z-index","width"]),_()}},[p,e==null?void 0:e.updateStickyItemsHeight]),I.jsx("div",{className:"oe-sticky-item "+(k||""),...E,ref:m,children:I.jsx("div",{className:"oe-sticky-content "+(p?"is-sticky":""),ref:C,children:h})})}function b(l,h){h.forEach(k=>{l.style.removeProperty(k)})}function Z({children:l,offsetTop:h=0,baseZIndex:k,onStickyItemsHeightChange:E,defaultMode:e="replace",constraint:m,...C}){const p=n.useRef(null),o=n.useRef([]),d=n.useRef(null),t=n.useRef({fixedOffsetTop:h,defaultMode:e,stickyItemsHeight:0,onStickyItemsHeightChange:E,lastCanSticky:!1});t.current.onStickyItemsHeightChange=E;const a=n.useCallback(()=>{var c;return m==="none"?{top:-1/0,bottom:1/0,left:-1/0,right:1/0,width:1/0,height:1/0,x:0,y:0,toJSON:()=>({})}:((c=p.current)==null?void 0:c.getBoundingClientRect())||{top:0,bottom:0,left:0,right:0,width:0,height:0,x:0,y:0,toJSON:()=>({})}},[m]),i=n.useCallback(()=>{const c=p.current;!c||d.current||(d.current=requestAnimationFrame(()=>{d.current=null;const u=a(),{fixedOffsetTop:r,stickyItemsHeight:f}=t.current;let s;if(m==="none"?s=!0:s=!(u.top>r||u.bottom<r),!s){t.current.lastCanSticky!==s&&(c.classList.toggle("can-sticky",!1),o.current.forEach(R=>R.update(!1,0,0,0,0)),t.current.lastCanSticky=s);return}t.current.lastCanSticky=s,f>0&&c.classList.toggle("can-sticky",!0);let S,y=0;S=r,y=u.bottom-(r+f),y>0&&(y=0);const x=o.current.map(R=>R.el.getBoundingClientRect().top);o.current.forEach((R,H)=>{S+=R.update(s,x[H],S+y,x[H+1],H)})}))},[a,m]),_=n.useCallback(c=>{const u=t.current.stickyItemsHeight+c;return t.current.stickyItemsHeight=u,setTimeout(()=>{var r,f;(f=(r=t.current).onStickyItemsHeightChange)==null||f.call(r,u)},0),()=>{const r=t.current.stickyItemsHeight-c;t.current.stickyItemsHeight=r,setTimeout(()=>{var f,s;(s=(f=t.current).onStickyItemsHeightChange)==null||s.call(f,r)},0)}},[]);n.useEffect(()=>{t.current.fixedOffsetTop=h,t.current.defaultMode=e,setTimeout(()=>{i()},10)},[h,e,i]);const v=n.useCallback(c=>(o.current.push(c),o.current=A(o.current),i(),()=>{o.current=o.current.filter(u=>u!==c),i()}),[i]);n.useEffect(()=>(window.addEventListener("scroll",i,{passive:!0}),window.addEventListener("resize",i,{passive:!0}),()=>{window.removeEventListener("scroll",i),window.removeEventListener("resize",i)}),[i]);const B=n.useMemo(()=>T(k),[k]);return I.jsx(N.Provider,{value:{register:v,baseZIndex:B,updateStickyItemsHeight:_,fixedOffsetTop:h,mode:e},children:I.jsx("div",{...C,ref:p,className:"oe-sticky-container",children:l})})}function T(l){return typeof l>"u"?200:Math.max(Number(l)||0,20)}function A(l){return l.sort((h,k)=>{const E=h.el.getBoundingClientRect(),e=k.el.getBoundingClientRect();return E.top-e.top})}g.StickyContainer=Z,g.StickyItem=O,Object.defineProperty(g,Symbol.toStringTag,{value:"Module"})});
+"use client";(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("react")):typeof define==`function`&&define.amd?define([`exports`,`react`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.ReactSticky={},e.React))})(this,function(e,t){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var n=Object.create,r=Object.defineProperty,i=Object.getOwnPropertyDescriptor,a=Object.getOwnPropertyNames,o=Object.getPrototypeOf,s=Object.prototype.hasOwnProperty,c=(e,t,n,o)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var c=a(t),l=0,u=c.length,d;l<u;l++)d=c[l],!s.call(e,d)&&d!==n&&r(e,d,{get:(e=>t[e]).bind(null,d),enumerable:!(o=i(t,d))||o.enumerable});return e};t=((e,t,i)=>(i=e==null?{}:n(o(e)),c(t||!e||!e.__esModule||!s.call(e,`default`)?r(i,`default`,{value:e,enumerable:!0}):i,e)))(t,1);var l=(0,t.createContext)(null);function u(){return(0,t.useContext)(l)}var d=new Map,f=null;function p(e,t){if(typeof ResizeObserver>`u`)return()=>{};f!=null||(f=new ResizeObserver(e=>{let t=new Map;for(let r of e){var n;for(let e of(n=d.get(r.target))==null?[]:n){let n=t.get(e);n?n.push(r):t.set(e,[r])}}for(let[e,n]of t)e(n)}));let n=d.get(e);return n||(n=new Set,d.set(e,n),f.observe(e)),n.add(t),()=>{n.delete(t),n.size||(d.delete(e),f==null||f.unobserve(e)),d.size||(f==null||f.disconnect(),f=null)}}var m=new Map,h=new Map,g=null,_=!1;function v(){for(let e of m.values())e()}function y(){_||(_=!0,Promise.resolve().then(()=>{_=!1,m.size&&b()}))}function b(){let e=new Set,t=new Set;for(let n of m.keys())for(let r=n;r!=null&&r.parentElement;r=r.parentElement){let n=r.parentElement;e.add(n);for(let t=r.previousElementSibling;t&&!e.has(t);t=t.previousElementSibling)e.add(t);if(t.has(n))break;t.add(n)}let n=[...h.keys()].filter(t=>!e.has(t));n.length&&(g==null||g.disconnect());for(let e of n)h.get(e)(),h.delete(e);for(let t of e){let e=!h.has(t);e&&h.set(t,p(t,v)),(e||n.length)&&(g==null||g.observe(t,{childList:!0,attributes:!0,attributeFilter:[`class`,`style`]}))}}function x(e,t){return m.set(e,t),!g&&typeof MutationObserver<`u`&&(g=new MutationObserver(e=>{e.some(e=>e.type===`childList`)&&y(),v()})),y(),()=>{if(m.delete(e),m.size)y();else{g==null||g.disconnect(),g=null;for(let e of h.values())e();h.clear()}}}var S=new Set,C=new Set,w=null;function T(e){S.has(e)&&(C.add(e),w!=null||(w=requestAnimationFrame(O)))}function E(){for(let e of S)T(e)}function D(){for(let e of S)e.resize(),T(e)}function O(){w=null;let e=[...C];C.clear();let t=[],n=[],r=[];for(let n of e)if(S.has(n))try{let e=n.read();e&&t.push({client:n,write:e})}catch(e){r.push(e)}for(let{client:e,write:i}of t)if(S.has(e))try{let t=i();t&&n.push({client:e,notify:t})}catch(e){r.push(e)}for(let{client:e,notify:t}of n)if(S.has(e))try{t()}catch(e){r.push(e)}if(r.length)throw r[0]}function k(e,t){let n={read:e,resize:t};return S.size||(window.addEventListener(`scroll`,E,{passive:!0,capture:!0}),window.addEventListener(`resize`,D,{passive:!0})),S.add(n),T(n),{schedule:()=>T(n),stop:()=>{S.delete(n),C.delete(n),!C.size&&w!==null&&(cancelAnimationFrame(w),w=null),S.size||(window.removeEventListener(`scroll`,E,!0),window.removeEventListener(`resize`,D))}}}function A({mode:e,children:n,className:r,...i}){var a;let o=u(),s=(0,t.useRef)(null),c=(0,t.useRef)(null),l=o==null?void 0:o.register,d=e==null?o==null?void 0:o.mode:e,f=o==null?void 0:o.baseZIndex,p=(a=i.style)==null?void 0:a.height,m=(0,t.useRef)(null),h=o==null?void 0:o.scheduleUpdate;return(0,t.useEffect)(()=>{let e=s.current,t=c.current;if(!e||!t)return;let n=typeof p==`number`?`${p}px`:p==null?``:p;if(j(e,`height`,n),!l||!d||d===`none`)return;let r=p===void 0||[`auto`,`initial`,`unset`,`revert`,`revert-layer`,`fit-content`,`min-content`,`max-content`].includes(String(p)),i=!1,a=null,o=()=>{if(i){i=!1,a=null,t.classList.remove(`is-sticky`),e.style.height=n;for(let e of[`top`,`left`,`width`,`z-index`])t.style.removeProperty(e)}},u=null,h={el:e,content:t,mode:d,apply:n=>{if(n===null){o();return}let{top:s,wrapperHeight:c,width:l,left:u,index:p}=n;a&&a.top===s&&a.wrapperHeight===c&&a.width===l&&a.left===u&&a.index===p||(a=n,r&&j(e,`height`,`${c}px`),j(t,`top`,`${s}px`),j(t,`left`,`${u}px`),j(t,`width`,`${l}px`),j(t,`zIndex`,`${(f==null?200:f)+(d===`replace`?-p:p)}`),i||(i=!0,t.classList.add(`is-sticky`)))},measure:n=>{u!=null||(u=M(e,t));let r=t.getBoundingClientRect().height;return{height:r,wrapperHeight:r+u.heightInset,width:Math.max(0,n.width-u.widthInset),left:n.left+u.leftInset}},invalidate:()=>{u=null,a=null}};m.current=h;let g=l(h);return()=>{m.current=null,g(),o()}},[l,d,f,p]),(0,t.useEffect)(()=>{var e;(e=m.current)==null||e.invalidate(),h==null||h()}),t.default.createElement(`div`,{...i,className:[`oe-sticky-item`,r].filter(Boolean).join(` `),ref:s},t.default.createElement(`div`,{className:`oe-sticky-content`,ref:c},n))}function j(e,t,n){e.style[t]!==n&&(e.style[t]=n)}function M(e,t){let n=getComputedStyle(e),r=getComputedStyle(t),i=e=>Number.parseFloat(e)||0,a=e=>i(e.paddingLeft)+i(e.paddingRight)+i(e.borderLeftWidth)+i(e.borderRightWidth);return{heightInset:n.boxSizing===`border-box`?i(n.paddingTop)+i(n.paddingBottom)+i(n.borderTopWidth)+i(n.borderBottomWidth):0,widthInset:a(n)+(r.boxSizing===`border-box`?0:a(r)),leftInset:i(n.paddingLeft)+i(n.borderLeftWidth)}}function N({children:e,offsetTop:n=0,baseZIndex:r,onStickyItemsHeightChange:i,defaultMode:a=`replace`,constraint:o,className:s,...c}){let u=(0,t.useRef)(null),d=(0,t.useRef)(new Set),f=(0,t.useRef)(null),m=(0,t.useRef)(new Map),h=(0,t.useRef)(!1),g=(0,t.useRef)(null),_=(0,t.useRef)(new Map),v=(0,t.useRef)(0),y=(0,t.useRef)({offsetTop:n,constraint:o,onStickyItemsHeightChange:i}),b=(0,t.useCallback)(()=>{var e;return(e=g.current)==null?void 0:e.schedule()},[]),S=(0,t.useCallback)(()=>{var e;let t=u.current;if(!t)return;let n=y.current,r=t.getBoundingClientRect();if(!(n.constraint===`none`||r.top<=n.offsetTop&&r.bottom>=n.offsetTop))return()=>{if(h.current){t.classList.remove(`can-sticky`);for(let e of d.current)e.apply(null);h.current=!1}if(v.current!==0)return v.current=0,()=>{var e;return(e=n.onStickyItemsHeightChange)==null?void 0:e.call(n,0)}};let i=((e=f.current)==null?f.current=[...d.current]:e).map(e=>({item:e,rect:e.el.getBoundingClientRect()})).sort((e,t)=>{let n=e.rect.top-t.rect.top;return n===0?e.item.el.compareDocumentPosition(t.item.el)&Node.DOCUMENT_POSITION_FOLLOWING?-1:1:n}),a=n.offsetTop,o=0,s=i.map(({item:e,rect:t},n)=>{var r;if(t.top>a)return null;let s=(r=i[n+1])==null?void 0:r.rect.top;if(e.mode===`replace`&&s!==void 0&&s<a)return null;let c=e.measure(t),l=e.mode===`replace`&&s!==void 0?Math.min(a,s-c.height):a;return o+=c.height,e.mode===`stack`&&(a+=c.height),{...c,top:l,index:n}}),c=n.constraint===`none`?0:Math.min(0,r.bottom-n.offsetTop-o);return()=>{if(h.current=s.some(e=>e!==null),t.classList.toggle(`can-sticky`,h.current),i.forEach(({item:e},t)=>{let n=s[t];n&&(n.top+=c),e.apply(n)}),v.current!==o)return v.current=o,()=>{var e;return(e=n.onStickyItemsHeightChange)==null?void 0:e.call(n,o)}}},[]),C=(0,t.useCallback)(e=>{var t;for(let n of e)(t=m.current.get(n.target))==null||t.invalidate();b()},[b]),w=(0,t.useCallback)(()=>{for(let e of d.current)e.invalidate()},[]),T=(0,t.useCallback)(e=>(d.current.add(e),f.current=null,m.current.set(e.el,e),m.current.set(e.content,e),g.current&&(_.current.set(e.el,p(e.el,C)),_.current.set(e.content,p(e.content,C))),b(),()=>{var t,n;(t=_.current.get(e.el))==null||t(),(n=_.current.get(e.content))==null||n(),_.current.delete(e.el),_.current.delete(e.content),m.current.delete(e.el),m.current.delete(e.content),d.current.delete(e),f.current=null,b()}),[b,C]);(0,t.useEffect)(()=>{g.current=k(S,w);let e;if(typeof ResizeObserver<`u`){u.current&&(_.current.set(u.current,p(u.current,C)),e=x(u.current,()=>{w(),b()}));for(let e of d.current)_.current.set(e.el,p(e.el,C)),_.current.set(e.content,p(e.content,C))}let t=_.current;return()=>{var n;(n=g.current)==null||n.stop(),g.current=null,e==null||e();for(let e of t.values())e();t.clear()}},[S,w,b,C]),(0,t.useEffect)(()=>{y.current={offsetTop:n,constraint:o,onStickyItemsHeightChange:i};for(let e of d.current)e.invalidate();b()});let E=r===void 0?200:Math.max(Number(r)||0,20),D=(0,t.useMemo)(()=>({register:T,scheduleUpdate:b,baseZIndex:E,mode:a}),[T,b,E,a]);return t.default.createElement(l.Provider,{value:D},t.default.createElement(`div`,{...c,ref:u,className:[`oe-sticky-container`,s].filter(Boolean).join(` `)},e))}e.StickyContainer=N,e.StickyItem=A});

package/dist/resize-observer.d.cts

@@ -0,0 +1,3 @@
+type Listener = (entries: ResizeObserverEntry[]) => void;
+export declare function observeResize(target: Element, listener: Listener): () => void;
+export {};

package/dist/resize-observer.d.ts

@@ -0,0 +1,3 @@
+type Listener = (entries: ResizeObserverEntry[]) => void;
+export declare function observeResize(target: Element, listener: Listener): () => void;
+export {};

package/dist/scheduler.d.cts

@@ -0,0 +1,10 @@
+type Write = () => (() => void) | void;
+type Client = {
+    read: () => Write | undefined;
+    resize: () => void;
+};
+export declare function subscribeUpdates(read: Client['read'], invalidate: () => void): {
+    schedule: () => void;
+    stop: () => void;
+};
+export {};

package/dist/scheduler.d.ts

@@ -0,0 +1,10 @@
+type Write = () => (() => void) | void;
+type Client = {
+    read: () => Write | undefined;
+    resize: () => void;
+};
+export declare function subscribeUpdates(read: Client['read'], invalidate: () => void): {
+    schedule: () => void;
+    stop: () => void;
+};
+export {};

package/dist/sticky-item.d.cts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { type IStickyMode } from './context.cjs';
+export interface IStickyItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    /** Sticky mode for this item. Defaults to the StickyContainer's mode. */
+    mode?: IStickyMode;
+}
+export declare function StickyItem({ mode, children, className, ...rest }: IStickyItemProps): React.ReactElement<any, any>;

package/dist/sticky-item.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { type IStickyMode } from './context.js';
+export interface IStickyItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    /** Sticky mode for this item. Defaults to the StickyContainer's mode. */
+    mode?: IStickyMode;
+}
+export declare function StickyItem({ mode, children, className, ...rest }: IStickyItemProps): React.ReactElement<any, any>;

package/dist/style.css

@@ -1 +1,2 @@
-.oe-sticky-container{position:relative}.oe-sticky-container.can-sticky .oe-sticky-content.is-sticky{position:fixed}.oe-sticky-item{position:relative}.oe-sticky-content{will-change:top,position}
+.oe-sticky-container,.oe-sticky-item{position:relative}.oe-sticky-content.is-sticky{position:fixed}
+/*$vite$:1*/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-sticky-kit",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "description": "A lightweight, flexible React sticky container and item component library supporting multiple sticky modes, advanced layouts, and edge cases.",
   "keywords": [
@@ -20,17 +20,47 @@
   },
   "homepage": "https://github.com/oe/react-sticky-kit#readme",
   "license": "MIT",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && tsc -p tsconfig.build.json && node scripts/build-types.mjs",
+    "preview": "vite preview",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint src demo test scripts vite.config.ts vitest.config.ts playwright.config.ts",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "coverage": "vitest run --coverage",
+    "pub": "tsx ./scripts/publish.ts",
+    "check:package": "node scripts/check-package.mjs",
+    "test:browser": "playwright test",
+    "prepublishOnly": "pnpm type-check && pnpm lint && pnpm test && pnpm build && pnpm check:package",
+    "check:compatibility": "node scripts/check-compatibility.mjs"
+  },
   "files": [
     "dist"
   ],
-  "main": "dist/react-sticky.umd.js",
+  "main": "dist/react-sticky.cjs",
   "module": "dist/react-sticky.es.js",
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/react-sticky.es.js",
-      "require": "./dist/react-sticky.umd.js"
+      "node": {
+        "import": {
+          "types": "./dist/index.d.cts",
+          "default": "./dist/react-sticky.cjs"
+        },
+        "require": {
+          "types": "./dist/index.d.cts",
+          "default": "./dist/react-sticky.cjs"
+        }
+      },
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/react-sticky.es.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/react-sticky.cjs"
+      }
     },
     "./style": "./dist/style.css",
     "./dist/style.css": "./dist/style.css"
@@ -41,44 +71,34 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.25.0",
-    "@testing-library/jest-dom": "^6.1.6",
-    "@testing-library/react": "^14.1.2",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/node": "^22.15.18",
-    "@types/react": "^19.1.2",
-    "@types/react-dom": "^19.1.2",
-    "@typescript-eslint/eslint-plugin": "^8.32.1",
-    "@typescript-eslint/parser": "^8.32.1",
-    "@vitejs/plugin-react": "^4.0.0",
-    "@vitest/coverage-v8": "^3.1.3",
-    "eslint": "^9.26.0",
+    "@playwright/test": "^1.63.0",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "@types/node": "^24.19.1",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@typescript-eslint/eslint-plugin": "^8.71.0",
+    "@typescript-eslint/parser": "^8.71.0",
+    "@vitejs/plugin-react": "^6.1.1",
+    "@vitest/coverage-v8": "^5.0.3",
+    "eslint": "^9.39.4",
     "eslint-config-prettier": "^10.1.5",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
     "globals": "^16.0.0",
-    "identity-obj-proxy": "^3.0.0",
-    "jsdom": "^26.1.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "sass": "^1.88.0",
-    "ts-node": "^10.9.2",
-    "tsx": "^4.19.4",
-    "typescript": "^5.0.0",
-    "typescript-eslint": "^8.30.1",
-    "vite": "^4.0.0",
-    "vite-plugin-dts": "^4.5.4",
-    "vitest": "^3.1.3"
+    "jsdom": "^30.1.1",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "sass": "^1.105.1",
+    "tsx": "^4.23.15",
+    "typescript": "^6.0.3",
+    "vite": "^8.3.2",
+    "vitest": "^5.0.3"
   },
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview",
-    "type-check": "tsc --noEmit",
-    "lint": "eslint src demo --ext .ts,.tsx,.js,.jsx",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "coverage": "vitest run --coverage",
-    "pub": "tsx ./scripts/publish.ts"
-  }
-}
+  "packageManager": "pnpm@12.8.1",
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ]
+}