react-sticky-kit 0.3.0 → 0.4.0

package/README.md

@@ -24,62 +24,117 @@
   </a>
 </p>
 
-A lightweight, flexible React sticky container and item component library. Easily create sticky headers, sections, and advanced sticky layouts with support for multiple modes and edge cases.
+Coordinate multiple sticky section headers in React. Stack headers using their actual
+heights, replace a section header as the next one arrives, or mix both behaviors
+under a shared viewport offset.
 
-## Features
+**Use native CSS `position: sticky` for a single header or a straightforward grouped
+list.** Choose React Sticky Kit when you need dynamic-height stacking, mixed
+stack/replace behavior, or the total sticky height without maintaining your own
+measurement and scroll logic.
 
-- 📦 Simple API: `<StickyContainer>` and `<StickyItem>`
-- 🧩 Supports `replace`, `stack`, and `none` sticky modes
-- 🏷️ Customizable offset, z-index (baseZIndex), and sticky logic
-- 🖥️ 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
-- 🧪 Includes demo pages for real-world scenarios
+## See the behavior
+
+| Replace section headings | Stack reached headings |
+| --- | --- |
+| ![Replacing section headers while scrolling](docs/assets/replace.gif) | ![Stacking section headers while scrolling](docs/assets/stack.gif) |
+
+- **Replace:** an alphabetical contact list updates its section heading as you scroll.
+- **Stack:** previously reached headings accumulate below the shared offset; their
+  heights are measured automatically, including when content changes.
+- **Mixed:** keep a page title stacked while section headings replace below it.
+
+[Open the live demo](https://app.evecalm.com/react-sticky-kit/) — no installation required.
+Try [replace](https://app.evecalm.com/react-sticky-kit/#replace),
+[stack](https://app.evecalm.com/react-sticky-kit/#stack), or
+[mixed modes](https://app.evecalm.com/react-sticky-kit/#mixed-mode).
+The demo also includes dynamic heights, nested groups and container boundaries.
+To edit an example, use the [contact-list sandbox](https://codesandbox.io/p/sandbox/dreamy-hofstadter-v9dzfz);
+see [running the demo](#run-the-demo) for local development.
+
+## Content taller than the viewport
+
+Keep the existing Container / Item structure and opt into coordinated scrolling:
+
+```tsx
+<StickyContainer defaultMode="stack" overflowBehavior="scroll"
+  offsetTop={16} offsetBottom={16} positionStrategy="auto">
+  <StickyItem><Sidebar /></StickyItem>
+  <main>{content}</main>
+</StickyContainer>
+```
+
+Oversized active items scroll as one group before pinning their top or bottom
+edge. The default behavior remains unchanged. `auto` uses native sticky for
+eligible single short items and falls back to fixed positioning for other cases.
+This is still a viewport-scrolling API, not support for internal scroll frames.
+See [behavior, compatibility checks and measurements](docs/oversized-content.md).
 
 ## Installation
 
 ```bash
 npm install react-sticky-kit
-# or
-yarn add react-sticky-kit
-# or
-pnpm add react-sticky-kit
+# or: pnpm add react-sticky-kit
 ```
 
-## Demo
-- [Apple iOS Contact App](https://codesandbox.io/p/sandbox/dreamy-hofstadter-v9dzfz)
+## Quick start: replacing section headers
 
-## Usage
+Import the stylesheet once. Give sections enough content to scroll; headers replace
+one another within the container's boundary.
 
 ```tsx
 import { StickyContainer, StickyItem } from 'react-sticky-kit';
-// !! Import styles for sticky components
-import 'react-sticky-kit/dist/style.css';
-// or `import 'react-sticky-kit/style';` for more clean style path(require modern bundler tools)
+import 'react-sticky-kit/style';
 
-export default function Example() {
+export default function Sections() {
   return (
-    <StickyContainer offsetTop={48} defaultMode="stack" baseZIndex={300}>
-      <StickyItem>
-        <div>Sticky Header</div>
-      </StickyItem>
-      <div>Content...</div>
-      <StickyItem mode="replace">
-        <div>Another Sticky Header (replace mode)</div>
-      </StickyItem>
-      <div>More Content...</div>
+    <StickyContainer defaultMode="replace" offsetTop={48}>
+      <StickyItem><h2 style={{ margin: 0, padding: 12, background: '#fff' }}>Overview</h2></StickyItem>
+      <section style={{ minHeight: 600 }}>Overview content</section>
+      <StickyItem><h2 style={{ margin: 0, padding: 12, background: '#fff' }}>Details</h2></StickyItem>
+      <section style={{ minHeight: 600 }}>Details content</section>
     </StickyContainer>
   );
 }
 ```
 
+Change `defaultMode` to `"stack"` to retain previously reached headings. To keep a
+page title above replacing section headings, add a first `<StickyItem mode="stack">`.
+Offsets are relative to the **viewport**, including when scrolling an inner element.
+For offsets relative to a scrollable panel, prefer native CSS sticky positioning.
+
+## Which approach should I choose?
+
+| Need | Start with |
+| --- | --- |
+| A single sticky navigation bar or simple grouped list | Native CSS `position: sticky` |
+| A sidebar taller than the viewport | A sidebar-focused solution such as `react-sticky-box` |
+| Dynamic-height headers that stack automatically | React Sticky Kit, `stack` mode |
+| A persistent title above replacing section headings | React Sticky Kit, mixed modes |
+| The current total sticky height | `onStickyItemsHeightChange` |
+| Table columns, built-in virtualization, or hide-on-scroll navigation | A solution designed for that specific interaction |
+
+React Sticky Kit uses fixed positioning while active. It is not a drop-in
+replacement for scroll-container-relative sticky behavior. Ancestor transforms
+and overflow clipping can affect fixed positioning.
+
+React 17/18/19, SSR and TypeScript 5 NodeNext consumers are covered by package
+checks. The ESM artifact is approximately **4.43 kB gzip**, excluding React and CSS;
+there are no additional runtime dependencies. See the
+[performance audit](docs/performance.md) for methods and tradeoffs.
+
+For practical examples and existing-library migration, see the
+[patterns and migration guide](docs/patterns-and-migration.md).
+
 ## Props
 
 ### `<StickyContainer />`
 | Prop                        | Type                                                 | Default     | Description                                                                                 |
 |-----------------------------|------------------------------------------------------|-------------|---------------------------------------------------------------------------------------------|
 | `offsetTop`                 | `number`                                             | `0`         | Offset from the top of the viewport                                                         |
+| `offsetBottom` | `number` | `0` | Bottom space reserved for oversized scrolling groups |
+| `overflowBehavior` | `'pin' \| 'scroll'` | `'pin'` | Opt into coordinated scrolling of oversized active items |
+| `positionStrategy` | `'fixed' \| 'auto'` | `'fixed'` | Opt into native sticky for eligible single short items |
 | `defaultMode`               | `'replace' \| 'stack' \| 'none'`                     | `'replace'` | Default sticky mode for all items                                                           |
 | `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. |
@@ -129,7 +184,11 @@ When you set `constraint="none"`, the sticky items will always stick when they r
 
 In contrast, the default behavior (without specifying a constraint) only makes items sticky when their parent container is visible in the viewport.
 
-## Demo
+## Run the demo
+
+The demo builds as a standalone static site with `pnpm build:demo`. Its relative
+asset paths work when hosted under a repository subdirectory.
+See [deployment instructions](docs/demo-deployment.md) for GitHub Pages setup.
 
 Run the demo locally:
 

package/dist/context.d.cts

@@ -11,6 +11,8 @@ export interface IStickyItemMeasurement {
 export interface IStickyItemHandle {
     el: HTMLElement;
     content: HTMLElement;
+    canNative: boolean;
+    applyNative: (top: number, zIndex: number) => void;
     mode: Exclude<IStickyMode, 'none'>;
     measure: (rect: DOMRect) => IStickyItemMeasurement;
     invalidate: () => void;

package/dist/context.d.ts

@@ -11,6 +11,8 @@ export interface IStickyItemMeasurement {
 export interface IStickyItemHandle {
     el: HTMLElement;
     content: HTMLElement;
+    canNative: boolean;
+    applyNative: (top: number, zIndex: number) => void;
     mode: Exclude<IStickyMode, 'none'>;
     measure: (rect: DOMRect) => IStickyItemMeasurement;
     invalidate: () => void;

package/dist/index.d.cts

@@ -7,6 +7,12 @@ export interface IStickyContainerProps extends React.HTMLAttributes<HTMLDivEleme
      * The offset from the top of the viewport for sticky elements. Default is 0.
      */
     offsetTop?: number;
+    /** Space below oversized groups when overflowBehavior="scroll". */
+    offsetBottom?: number;
+    /** Preserve pinning (default), or scroll oversized active groups as one unit. */
+    overflowBehavior?: 'pin' | 'scroll';
+    /** Opt into native sticky for eligible single, direct-child items. Defaults to fixed. */
+    positionStrategy?: 'fixed' | 'auto';
     /**
      * 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.
@@ -31,4 +37,4 @@ export interface IStickyContainerProps extends React.HTMLAttributes<HTMLDivEleme
      */
     constraint?: 'none';
 }
-export declare function StickyContainer({ children, offsetTop, baseZIndex, onStickyItemsHeightChange, defaultMode, constraint, className, ...rest }: IStickyContainerProps): React.ReactElement<any, any>;
+export declare function StickyContainer({ children, offsetTop, offsetBottom, overflowBehavior, positionStrategy, baseZIndex, onStickyItemsHeightChange, defaultMode, constraint, className, ...rest }: IStickyContainerProps): React.ReactElement<any, any>;

package/dist/index.d.ts

@@ -7,6 +7,12 @@ export interface IStickyContainerProps extends React.HTMLAttributes<HTMLDivEleme
      * The offset from the top of the viewport for sticky elements. Default is 0.
      */
     offsetTop?: number;
+    /** Space below oversized groups when overflowBehavior="scroll". */
+    offsetBottom?: number;
+    /** Preserve pinning (default), or scroll oversized active groups as one unit. */
+    overflowBehavior?: 'pin' | 'scroll';
+    /** Opt into native sticky for eligible single, direct-child items. Defaults to fixed. */
+    positionStrategy?: 'fixed' | 'auto';
     /**
      * 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.
@@ -31,4 +37,4 @@ export interface IStickyContainerProps extends React.HTMLAttributes<HTMLDivEleme
      */
     constraint?: 'none';
 }
-export declare function StickyContainer({ children, offsetTop, baseZIndex, onStickyItemsHeightChange, defaultMode, constraint, className, ...rest }: IStickyContainerProps): React.ReactElement<any, any>;
+export declare function StickyContainer({ children, offsetTop, offsetBottom, overflowBehavior, positionStrategy, baseZIndex, onStickyItemsHeightChange, defaultMode, constraint, className, ...rest }: IStickyContainerProps): React.ReactElement<any, any>;

package/dist/react-sticky.cjs

@@ -1 +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;
+"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=new Set,T=null;function E(e){S.has(e)&&(w.add(e),T!=null||(T=requestAnimationFrame(k)))}function D(){for(let e of C)E(e)}function O(){for(let e of S)e.resize(),E(e)}function k(){T=null;let e=[...w];w.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){var i;((i=r)==null?r=[]:i).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){var a;((a=r)==null?r=[]:a).push(e)}for(let{client:e,notify:t}of n)if(S.has(e))try{t()}catch(e){var o;((o=r)==null?r=[]:o).push(e)}if(r)throw r[0]}function A(e,t){let n={read:e,resize:t};return S.size||(window.addEventListener(`scroll`,D,{passive:!0,capture:!0}),window.addEventListener(`resize`,O,{passive:!0})),S.add(n),C.add(n),E(n),{schedule:()=>E(n),setScrollEnabled:e=>{e?C.add(n):C.delete(n)},stop:()=>{S.delete(n),C.delete(n),w.delete(n),!w.size&&T!==null&&(cancelAnimationFrame(T),T=null),S.size||(window.removeEventListener(`scroll`,D,!0),window.removeEventListener(`resize`,O))}}}function j({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(M(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,u=null,h=()=>{if(a!==null&&(a=null,e.classList.remove(`is-native-sticky`),e.style.removeProperty(`--oe-sticky-top`),e.style.removeProperty(`--oe-sticky-z`)),i){i=!1,u=null,t.classList.remove(`is-sticky`),e.style.height=n;for(let e of[`top`,`left`,`width`,`z-index`])t.style.removeProperty(e)}},g=null,_={canNative:!1,applyNative:(t,n)=>{(a!==t||c!==n)&&(h(),a=t,c=n,e.style.setProperty(`--oe-sticky-top`,`${t}px`),e.style.setProperty(`--oe-sticky-z`,String(n)),e.classList.add(`is-native-sticky`))},el:e,content:t,mode:d,apply:n=>{if(n===null){h();return}a!==null&&h();let{top:o,wrapperHeight:s,width:c,left:l,index:p}=n;u&&u.top===o&&u.wrapperHeight===s&&u.width===c&&u.left===l&&u.index===p||(u=n,r&&M(e,`height`,`${s}px`),M(t,`top`,`${o}px`),M(t,`left`,`${l}px`),M(t,`width`,`${c}px`),M(t,`zIndex`,`${(f==null?200:f)+(d===`replace`?-p:p)}`),i||(i=!0,t.classList.add(`is-sticky`)))},measure:n=>{g!=null||(g=N(e,t));let r=t.getBoundingClientRect().height;return{height:r,wrapperHeight:r+g.heightInset,width:Math.max(0,n.width-g.widthInset),left:n.left+g.leftInset}},invalidate:()=>{g=null,u=null}};m.current=_;let v=l(_);return()=>{m.current=null,v(),h()}},[l,d,f,p]),(0,c.useEffect)(()=>{if(m.current){var e;let t=r.style;m.current.canNative=p===void 0&&(t==null?void 0:t.position)===void 0&&(t==null?void 0:t.top)===void 0&&(t==null?void 0:t.bottom)===void 0&&(t==null?void 0:t.zIndex)===void 0,!m.current.canNative&&(e=o.current)!=null&&e.classList.contains(`is-native-sticky`)&&m.current.apply(null),m.current.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 M(e,t,n){e.style[t]!==n&&(e.style[t]=n)}function N(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 P({children:e,offsetTop:t=0,offsetBottom:n=0,overflowBehavior:r=`pin`,positionStrategy:i=`fixed`,baseZIndex:a,onStickyItemsHeightChange:o,defaultMode:s=`replace`,constraint:u,className:d,...f}){let m=a===void 0?200:Math.max(Number(a)||0,20),h=(0,c.useRef)(null),g=(0,c.useRef)(new Set),_=(0,c.useRef)(null),v=(0,c.useRef)(new Map),y=(0,c.useRef)(!1),b=(0,c.useRef)(null),S=(0,c.useRef)(null),C=(0,c.useRef)(new Map),w=(0,c.useRef)(0),T=(0,c.useRef)(null),E=(0,c.useRef)({offsetTop:t,offsetBottom:n,overflowBehavior:r,positionStrategy:i,baseZIndex:m,constraint:u,onStickyItemsHeightChange:o}),D=(0,c.useCallback)(()=>{var e;return(e=S.current)==null?void 0:e.schedule()},[]),O=(0,c.useCallback)(()=>{var e,t;let n=h.current;if(!n)return;let r=E.current,i=n.getBoundingClientRect(),a=r.constraint===`none`||i.top<=r.offsetTop&&i.bottom>=r.offsetTop,o=r.positionStrategy===`auto`&&b.current!==!1&&g.current.size===1?g.current.values().next().value:void 0;if(r.positionStrategy===`auto`&&r.constraint!==`none`&&o!=null&&o.canNative&&o.el.parentElement===n&&((e=b.current)==null?b.current=F(n,o.el):e)){let e=o.content.getBoundingClientRect().height,t=o.el.getBoundingClientRect();if(t.height<=e+1&&e+r.offsetTop+Math.max(0,r.offsetBottom)<=window.innerHeight){let i=a&&t.top<=r.offsetTop?e:0;return()=>{var e;if((e=S.current)==null||e.setScrollEnabled(!!r.onStickyItemsHeightChange),T.current=null,y.current=!0,n.classList.remove(`can-sticky`),o.applyNative(r.offsetTop,r.baseZIndex),w.current!==i)return w.current=i,()=>{var e;return(e=r.onStickyItemsHeightChange)==null?void 0:e.call(r,i)}}}b.current=!1}if(!a)return()=>{var e;if((e=S.current)==null||e.setScrollEnabled(!0),T.current=null,y.current){n.classList.remove(`can-sticky`);for(let e of g.current)e.apply(null);y.current=!1}if(w.current!==0)return w.current=0,()=>{var e;return(e=r.onStickyItemsHeightChange)==null?void 0:e.call(r,0)}};let s=_.current;if(s)for(let e of s)e.rect=e.item.el.getBoundingClientRect();else s=_.current=[...g.current].map(e=>({item:e,rect:e.el.getBoundingClientRect()}));s.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});let c=r.overflowBehavior===`scroll`,l=c?window.scrollY:0,u=c?T.current:null,d=0,f;if(c){if(u)d=Math.max(-u.maximum,Math.min(0,u.shift-(l-u.scrollY)));else{let e=s[0];if(e&&e.rect.top<=r.offsetTop){f=e.item.measure(e.rect);let t=f.height,n=Math.max(0,t+r.offsetTop+Math.max(0,r.offsetBottom)-window.innerHeight);d=Math.max(-n,Math.min(0,e.rect.top-r.offsetTop))}}}let p=c&&s.every(({item:e})=>e.mode===`replace`),m=r.offsetTop+d,v=0,x=s.map(({item:e,rect:t},n)=>{var r;let i=m-(p?d:0);if(t.top>i)return null;let a=(r=s[n+1])==null?void 0:r.rect.top;if(e.mode===`replace`&&a!==void 0&&a<i)return null;let o=n===0&&f?f:e.measure(t),c=e.mode===`replace`&&a!==void 0?Math.min(m,a-o.height):m;return v+=o.height,e.mode===`stack`&&(m+=o.height),{...o,top:c,index:n}}),C=null;if(c&&v>0){let e=Math.max(0,v+r.offsetTop+Math.max(0,r.offsetBottom)-window.innerHeight),t=Math.max(-e,d);for(let e of x)e&&(e.top+=t-d);C={scrollY:l,shift:t,maximum:e}}let D=r.constraint===`none`?0:Math.min(0,i.bottom-r.offsetTop-v-((t=C==null?void 0:C.shift)==null?0:t));return()=>{var e;if((e=S.current)==null||e.setScrollEnabled(!0),T.current=C,y.current=x.some(e=>e!==null),n.classList.toggle(`can-sticky`,y.current),s.forEach(({item:e},t)=>{let n=x[t];n&&(n.top+=D),e.apply(n)}),w.current!==v)return w.current=v,()=>{var e;return(e=r.onStickyItemsHeightChange)==null?void 0:e.call(r,v)}}},[]),k=(0,c.useCallback)(e=>{var t;b.current=null;for(let n of e)(t=v.current.get(n.target))==null||t.invalidate();D()},[D]),j=(0,c.useCallback)(()=>{b.current=null;for(let e of g.current)e.invalidate()},[]),M=(0,c.useCallback)(e=>(g.current.add(e),b.current=null,_.current=null,v.current.set(e.el,e),v.current.set(e.content,e),S.current&&(C.current.set(e.el,p(e.el,k)),C.current.set(e.content,p(e.content,k))),D(),()=>{var t,n;(t=C.current.get(e.el))==null||t(),(n=C.current.get(e.content))==null||n(),C.current.delete(e.el),C.current.delete(e.content),v.current.delete(e.el),v.current.delete(e.content),g.current.delete(e),b.current=null,_.current=null,D()}),[D,k]);(0,c.useEffect)(()=>{S.current=A(O,j);let e;if(typeof ResizeObserver<`u`){h.current&&(C.current.set(h.current,p(h.current,k)),e=x(h.current,()=>{j(),D()}));for(let e of g.current)C.current.set(e.el,p(e.el,k)),C.current.set(e.content,p(e.content,k))}let t=C.current;return()=>{var n;(n=S.current)==null||n.stop(),S.current=null,e==null||e();for(let e of t.values())e();t.clear()}},[O,j,D,k]),(0,c.useEffect)(()=>{b.current=null,E.current={offsetTop:t,offsetBottom:n,overflowBehavior:r,positionStrategy:i,baseZIndex:m,constraint:u,onStickyItemsHeightChange:o};for(let e of g.current)e.invalidate();D()});let N=(0,c.useMemo)(()=>({register:M,scheduleUpdate:D,baseZIndex:m,mode:s}),[M,D,m,s]);return c.default.createElement(l.Provider,{value:N},c.default.createElement(`div`,{...f,ref:h,className:[`oe-sticky-container`,d].filter(Boolean).join(` `)},e))}function F(e,t){if(typeof ResizeObserver>`u`||typeof CSS>`u`||typeof CSS.supports!=`function`||!CSS.supports(`position`,`sticky`))return!1;for(let n=e;n;n=n.parentElement){let r=getComputedStyle(n);if(n===e&&(r.display.includes(`grid`)||r.display.includes(`flex`)&&!r.flexDirection.startsWith(`column`))&&/^(normal|stretch)$/.test(r.alignItems)&&/^(auto|normal|stretch)$/.test(getComputedStyle(t).alignSelf)||/(auto|scroll|hidden|overlay)/.test(`${r.overflowX} ${r.overflowY}`))return!1}return!0}exports.StickyContainer=P,exports.StickyItem=j;

package/dist/react-sticky.es.js

@@ -72,21 +72,21 @@ function y(e, t) {
 }
 //#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);
+var b = /* @__PURE__ */ new Set(), x = /* @__PURE__ */ new Set(), S = /* @__PURE__ */ new Set(), C = null;
+function w(e) {
+	b.has(e) && (S.add(e), C != null || (C = requestAnimationFrame(D)));
 }
 function T() {
-	for (let e of b) e.resize(), C(e);
+	for (let e of x) w(e);
 }
 function E() {
-	S = null;
-	let e = [...x];
-	x.clear();
-	let t = [], n = [], r = [];
+	for (let e of b) e.resize(), w(e);
+}
+function D() {
+	C = null;
+	let e = [...S];
+	S.clear();
+	let t = [], n = [], r;
 	for (let n of e) if (b.has(n)) try {
 		let e = n.read();
 		e && t.push({
@@ -94,7 +94,8 @@ function E() {
 			write: e
 		});
 	} catch (e) {
-		r.push(e);
+		var i;
+		((i = r) == null ? r = [] : i).push(e);
 	}
 	for (let { client: e, write: i } of t) if (b.has(e)) try {
 		let t = i();
@@ -103,40 +104,45 @@ function E() {
 			notify: t
 		});
 	} catch (e) {
-		r.push(e);
+		var a;
+		((a = r) == null ? r = [] : a).push(e);
 	}
 	for (let { client: e, notify: t } of n) if (b.has(e)) try {
 		t();
 	} catch (e) {
-		r.push(e);
+		var o;
+		((o = r) == null ? r = [] : o).push(e);
 	}
-	if (r.length) throw r[0];
+	if (r) throw r[0];
 }
-function D(e, t) {
+function O(e, t) {
 	let n = {
 		read: e,
 		resize: t
 	};
-	return b.size || (window.addEventListener("scroll", w, {
+	return b.size || (window.addEventListener("scroll", T, {
 		passive: !0,
 		capture: !0
-	}), window.addEventListener("resize", T, { passive: !0 })), b.add(n), C(n), {
-		schedule: () => C(n),
+	}), window.addEventListener("resize", E, { passive: !0 })), b.add(n), x.add(n), w(n), {
+		schedule: () => w(n),
+		setScrollEnabled: (e) => {
+			e ? x.add(n) : x.delete(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));
+			b.delete(n), x.delete(n), S.delete(n), !S.size && C !== null && (cancelAnimationFrame(C), C = null), b.size || (window.removeEventListener("scroll", T, !0), window.removeEventListener("resize", E));
 		}
 	};
 }
 //#endregion
 //#region src/sticky-item.tsx
-function O({ mode: t, children: n, className: r, ...a }) {
+function k({ 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;
+		if (A(e, "height", n), !f || !p || p === "none") return;
 		let r = h === void 0 || [
 			"auto",
 			"initial",
@@ -146,9 +152,9 @@ function O({ mode: t, children: n, className: r, ...a }) {
 			"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;
+		].includes(String(h)), i = !1, a = null, o, s = null, c = () => {
+			if (a !== null && (a = null, e.classList.remove("is-native-sticky"), e.style.removeProperty("--oe-sticky-top"), e.style.removeProperty("--oe-sticky-z")), i) {
+				i = !1, s = null, t.classList.remove("is-sticky"), e.style.height = n;
 				for (let e of [
 					"top",
 					"left",
@@ -156,36 +162,41 @@ function O({ mode: t, children: n, className: r, ...a }) {
 					"z-index"
 				]) t.style.removeProperty(e);
 			}
-		}, s = null, c = {
+		}, l = null, _ = {
+			canNative: !1,
+			applyNative: (t, n) => {
+				(a !== t || o !== n) && (c(), a = t, o = n, e.style.setProperty("--oe-sticky-top", `${t}px`), e.style.setProperty("--oe-sticky-z", String(n)), e.classList.add("is-native-sticky"));
+			},
 			el: e,
 			content: t,
 			mode: p,
 			apply: (n) => {
 				if (n === null) {
-					o();
+					c();
 					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")));
+				a !== null && c();
+				let { top: o, wrapperHeight: l, width: u, left: d, index: f } = n;
+				s && s.top === o && s.wrapperHeight === l && s.width === u && s.left === d && s.index === f || (s = n, r && A(e, "height", `${l}px`), A(t, "top", `${o}px`), A(t, "left", `${d}px`), A(t, "width", `${u}px`), A(t, "zIndex", `${(m == null ? 200 : m) + (p === "replace" ? -f : f)}`), i || (i = !0, t.classList.add("is-sticky")));
 			},
 			measure: (n) => {
-				s != null || (s = A(e, t));
+				l != null || (l = j(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
+					wrapperHeight: r + l.heightInset,
+					width: Math.max(0, n.width - l.widthInset),
+					left: n.left + l.leftInset
 				};
 			},
 			invalidate: () => {
-				s = null, a = null;
+				l = null, s = null;
 			}
 		};
-		g.current = c;
-		let l = f(c);
+		g.current = _;
+		let v = f(_);
 		return () => {
-			g.current = null, l(), o();
+			g.current = null, v(), c();
 		};
 	}, [
 		f,
@@ -193,8 +204,12 @@ function O({ mode: t, children: n, className: r, ...a }) {
 		m,
 		h
 	]), i(() => {
-		var e;
-		(e = g.current) == null || e.invalidate(), _ == null || _();
+		if (g.current) {
+			var e;
+			let t = a.style;
+			g.current.canNative = h === void 0 && (t == null ? void 0 : t.position) === void 0 && (t == null ? void 0 : t.top) === void 0 && (t == null ? void 0 : t.bottom) === void 0 && (t == null ? void 0 : t.zIndex) === void 0, !g.current.canNative && (e = u.current) != null && e.classList.contains("is-native-sticky") && g.current.apply(null), g.current.invalidate();
+		}
+		_ == null || _();
 	}), /* @__PURE__ */ e.createElement("div", {
 		...a,
 		className: ["oe-sticky-item", r].filter(Boolean).join(" "),
@@ -204,10 +219,10 @@ function O({ mode: t, children: n, className: r, ...a }) {
 		ref: d
 	}, n));
 }
-function k(e, t, n) {
+function A(e, t, n) {
 	e.style[t] !== n && (e.style[t] = n);
 }
-function A(e, t) {
+function j(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,
@@ -217,113 +232,174 @@ function A(e, t) {
 }
 //#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({
+function M({ children: t, offsetTop: r = 0, offsetBottom: c = 0, overflowBehavior: l = "pin", positionStrategy: u = "fixed", baseZIndex: f, onStickyItemsHeightChange: p, defaultMode: m = "replace", constraint: h, className: g, ..._ }) {
+	let v = f === void 0 ? 200 : Math.max(Number(f) || 0, 20), b = o(null), x = o(/* @__PURE__ */ new Set()), S = o(null), C = o(/* @__PURE__ */ new Map()), w = o(!1), T = o(null), E = o(null), D = o(/* @__PURE__ */ new Map()), k = o(0), A = o(null), j = o({
 		offsetTop: r,
-		constraint: f,
-		onStickyItemsHeightChange: l
-	}), T = n(() => {
+		offsetBottom: c,
+		overflowBehavior: l,
+		positionStrategy: u,
+		baseZIndex: v,
+		constraint: h,
+		onStickyItemsHeightChange: p
+	}), M = 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;
+		return (e = E.current) == null ? void 0 : e.schedule();
+	}, []), P = n(() => {
+		var e, t;
+		let n = b.current;
+		if (!n) return;
+		let r = j.current, i = n.getBoundingClientRect(), a = r.constraint === "none" || i.top <= r.offsetTop && i.bottom >= r.offsetTop, o = r.positionStrategy === "auto" && T.current !== !1 && x.current.size === 1 ? x.current.values().next().value : void 0;
+		if (r.positionStrategy === "auto" && r.constraint !== "none" && o != null && o.canNative && o.el.parentElement === n && ((e = T.current) == null ? T.current = N(n, o.el) : e)) {
+			let e = o.content.getBoundingClientRect().height, t = o.el.getBoundingClientRect();
+			if (t.height <= e + 1 && e + r.offsetTop + Math.max(0, r.offsetBottom) <= window.innerHeight) {
+				let i = a && t.top <= r.offsetTop ? e : 0;
+				return () => {
+					var e;
+					if ((e = E.current) == null || e.setScrollEnabled(!!r.onStickyItemsHeightChange), A.current = null, w.current = !0, n.classList.remove("can-sticky"), o.applyNative(r.offsetTop, r.baseZIndex), k.current !== i) return k.current = i, () => {
+						var e;
+						return (e = r.onStickyItemsHeightChange) == null ? void 0 : e.call(r, i);
+					};
+				};
+			}
+			T.current = !1;
+		}
+		if (!a) return () => {
+			var e;
+			if ((e = E.current) == null || e.setScrollEnabled(!0), A.current = null, w.current) {
+				n.classList.remove("can-sticky");
+				for (let e of x.current) e.apply(null);
+				w.current = !1;
 			}
-			if (C.current !== 0) return C.current = 0, () => {
+			if (k.current !== 0) return k.current = 0, () => {
 				var e;
-				return (e = n.onStickyItemsHeightChange) == null ? void 0 : e.call(n, 0);
+				return (e = r.onStickyItemsHeightChange) == null ? void 0 : e.call(r, 0);
 			};
 		};
-		let i = ((e = _.current) == null ? _.current = [...g.current] : e).map((e) => ({
+		let s = S.current;
+		if (s) for (let e of s) e.rect = e.item.el.getBoundingClientRect();
+		else s = S.current = [...x.current].map((e) => ({
 			item: e,
 			rect: e.el.getBoundingClientRect()
-		})).sort((e, t) => {
+		}));
+		s.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) => {
+		});
+		let c = r.overflowBehavior === "scroll", l = c ? window.scrollY : 0, u = c ? A.current : null, d = 0, f;
+		if (c) {
+			if (u) d = Math.max(-u.maximum, Math.min(0, u.shift - (l - u.scrollY)));
+			else {
+				let e = s[0];
+				if (e && e.rect.top <= r.offsetTop) {
+					f = e.item.measure(e.rect);
+					let t = f.height, n = Math.max(0, t + r.offsetTop + Math.max(0, r.offsetBottom) - window.innerHeight);
+					d = Math.max(-n, Math.min(0, e.rect.top - r.offsetTop));
+				}
+			}
+		}
+		let p = c && s.every(({ item: e }) => e.mode === "replace"), m = r.offsetTop + d, h = 0, g = s.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,
+			let i = m - (p ? d : 0);
+			if (t.top > i) return null;
+			let a = (r = s[n + 1]) == null ? void 0 : r.rect.top;
+			if (e.mode === "replace" && a !== void 0 && a < i) return null;
+			let o = n === 0 && f ? f : e.measure(t), c = e.mode === "replace" && a !== void 0 ? Math.min(m, a - o.height) : m;
+			return h += o.height, e.mode === "stack" && (m += o.height), {
+				...o,
+				top: c,
 				index: n
 			};
-		}), c = n.constraint === "none" ? 0 : Math.min(0, r.bottom - n.offsetTop - o);
+		}), _ = null;
+		if (c && h > 0) {
+			let e = Math.max(0, h + r.offsetTop + Math.max(0, r.offsetBottom) - window.innerHeight), t = Math.max(-e, d);
+			for (let e of g) e && (e.top += t - d);
+			_ = {
+				scrollY: l,
+				shift: t,
+				maximum: e
+			};
+		}
+		let v = r.constraint === "none" ? 0 : Math.min(0, i.bottom - r.offsetTop - h - ((t = _ == null ? void 0 : _.shift) == null ? 0 : t));
 		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;
+			if ((e = E.current) == null || e.setScrollEnabled(!0), A.current = _, w.current = g.some((e) => e !== null), n.classList.toggle("can-sticky", w.current), s.forEach(({ item: e }, t) => {
+				let n = g[t];
+				n && (n.top += v), e.apply(n);
+			}), k.current !== h) return k.current = h, () => {
 				var e;
-				return (e = n.onStickyItemsHeightChange) == null ? void 0 : e.call(n, o);
+				return (e = r.onStickyItemsHeightChange) == null ? void 0 : e.call(r, h);
 			};
 		};
-	}, []), O = n((e) => {
+	}, []), F = 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(), () => {
+		T.current = null;
+		for (let n of e) (t = C.current.get(n.target)) == null || t.invalidate();
+		M();
+	}, [M]), I = n(() => {
+		T.current = null;
+		for (let e of x.current) e.invalidate();
+	}, []), L = n((e) => (x.current.add(e), T.current = null, S.current = null, C.current.set(e.el, e), C.current.set(e.content, e), E.current && (D.current.set(e.el, d(e.el, F)), D.current.set(e.content, d(e.content, F))), M(), () => {
 		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]);
+		(t = D.current.get(e.el)) == null || t(), (n = D.current.get(e.content)) == null || n(), D.current.delete(e.el), D.current.delete(e.content), C.current.delete(e.el), C.current.delete(e.content), x.current.delete(e), T.current = null, S.current = null, M();
+	}), [M, F]);
 	i(() => {
-		x.current = D(E, k);
+		E.current = O(P, I);
 		let e;
 		if (typeof ResizeObserver < "u") {
-			h.current && (S.current.set(h.current, d(h.current, O)), e = y(h.current, () => {
-				k(), T();
+			b.current && (D.current.set(b.current, d(b.current, F)), e = y(b.current, () => {
+				I(), M();
 			}));
-			for (let e of g.current) S.current.set(e.el, d(e.el, O)), S.current.set(e.content, d(e.content, O));
+			for (let e of x.current) D.current.set(e.el, d(e.el, F)), D.current.set(e.content, d(e.content, F));
 		}
-		let t = S.current;
+		let t = D.current;
 		return () => {
 			var n;
-			(n = x.current) == null || n.stop(), x.current = null, e == null || e();
+			(n = E.current) == null || n.stop(), E.current = null, e == null || e();
 			for (let e of t.values()) e();
 			t.clear();
 		};
 	}, [
-		E,
-		k,
-		T,
-		O
+		P,
+		I,
+		M,
+		F
 	]), i(() => {
-		w.current = {
+		T.current = null, j.current = {
 			offsetTop: r,
-			constraint: f,
-			onStickyItemsHeightChange: l
+			offsetBottom: c,
+			overflowBehavior: l,
+			positionStrategy: u,
+			baseZIndex: v,
+			constraint: h,
+			onStickyItemsHeightChange: p
 		};
-		for (let e of g.current) e.invalidate();
-		T();
+		for (let e of x.current) e.invalidate();
+		M();
 	});
-	let j = c === void 0 ? 200 : Math.max(Number(c) || 0, 20), M = a(() => ({
-		register: A,
-		scheduleUpdate: T,
-		baseZIndex: j,
-		mode: u
+	let R = a(() => ({
+		register: L,
+		scheduleUpdate: M,
+		baseZIndex: v,
+		mode: m
 	}), [
-		A,
-		T,
-		j,
-		u
+		L,
+		M,
+		v,
+		m
 	]);
-	return /* @__PURE__ */ e.createElement(s.Provider, { value: M }, /* @__PURE__ */ e.createElement("div", {
-		...m,
-		ref: h,
-		className: ["oe-sticky-container", p].filter(Boolean).join(" ")
+	return /* @__PURE__ */ e.createElement(s.Provider, { value: R }, /* @__PURE__ */ e.createElement("div", {
+		..._,
+		ref: b,
+		className: ["oe-sticky-container", g].filter(Boolean).join(" ")
 	}, t));
 }
+function N(e, t) {
+	if (typeof ResizeObserver > "u" || typeof CSS > "u" || typeof CSS.supports != "function" || !CSS.supports("position", "sticky")) return !1;
+	for (let n = e; n; n = n.parentElement) {
+		let r = getComputedStyle(n);
+		if (n === e && (r.display.includes("grid") || r.display.includes("flex") && !r.flexDirection.startsWith("column")) && /^(normal|stretch)$/.test(r.alignItems) && /^(auto|normal|stretch)$/.test(getComputedStyle(t).alignSelf) || /(auto|scroll|hidden|overlay)/.test(`${r.overflowX} ${r.overflowY}`)) return !1;
+	}
+	return !0;
+}
 //#endregion
-export { j as StickyContainer, O as StickyItem };
+export { M as StickyContainer, k as StickyItem };

package/dist/react-sticky.umd.js

@@ -1 +1 @@
-"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});
+"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=new Set,T=null;function E(e){S.has(e)&&(w.add(e),T!=null||(T=requestAnimationFrame(k)))}function D(){for(let e of C)E(e)}function O(){for(let e of S)e.resize(),E(e)}function k(){T=null;let e=[...w];w.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){var i;((i=r)==null?r=[]:i).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){var a;((a=r)==null?r=[]:a).push(e)}for(let{client:e,notify:t}of n)if(S.has(e))try{t()}catch(e){var o;((o=r)==null?r=[]:o).push(e)}if(r)throw r[0]}function A(e,t){let n={read:e,resize:t};return S.size||(window.addEventListener(`scroll`,D,{passive:!0,capture:!0}),window.addEventListener(`resize`,O,{passive:!0})),S.add(n),C.add(n),E(n),{schedule:()=>E(n),setScrollEnabled:e=>{e?C.add(n):C.delete(n)},stop:()=>{S.delete(n),C.delete(n),w.delete(n),!w.size&&T!==null&&(cancelAnimationFrame(T),T=null),S.size||(window.removeEventListener(`scroll`,D,!0),window.removeEventListener(`resize`,O))}}}function j({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(M(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,u=null,h=()=>{if(a!==null&&(a=null,e.classList.remove(`is-native-sticky`),e.style.removeProperty(`--oe-sticky-top`),e.style.removeProperty(`--oe-sticky-z`)),i){i=!1,u=null,t.classList.remove(`is-sticky`),e.style.height=n;for(let e of[`top`,`left`,`width`,`z-index`])t.style.removeProperty(e)}},g=null,_={canNative:!1,applyNative:(t,n)=>{(a!==t||o!==n)&&(h(),a=t,o=n,e.style.setProperty(`--oe-sticky-top`,`${t}px`),e.style.setProperty(`--oe-sticky-z`,String(n)),e.classList.add(`is-native-sticky`))},el:e,content:t,mode:d,apply:n=>{if(n===null){h();return}a!==null&&h();let{top:o,wrapperHeight:s,width:c,left:l,index:p}=n;u&&u.top===o&&u.wrapperHeight===s&&u.width===c&&u.left===l&&u.index===p||(u=n,r&&M(e,`height`,`${s}px`),M(t,`top`,`${o}px`),M(t,`left`,`${l}px`),M(t,`width`,`${c}px`),M(t,`zIndex`,`${(f==null?200:f)+(d===`replace`?-p:p)}`),i||(i=!0,t.classList.add(`is-sticky`)))},measure:n=>{g!=null||(g=N(e,t));let r=t.getBoundingClientRect().height;return{height:r,wrapperHeight:r+g.heightInset,width:Math.max(0,n.width-g.widthInset),left:n.left+g.leftInset}},invalidate:()=>{g=null,u=null}};m.current=_;let v=l(_);return()=>{m.current=null,v(),h()}},[l,d,f,p]),(0,t.useEffect)(()=>{if(m.current){var e;let t=i.style;m.current.canNative=p===void 0&&(t==null?void 0:t.position)===void 0&&(t==null?void 0:t.top)===void 0&&(t==null?void 0:t.bottom)===void 0&&(t==null?void 0:t.zIndex)===void 0,!m.current.canNative&&(e=s.current)!=null&&e.classList.contains(`is-native-sticky`)&&m.current.apply(null),m.current.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 M(e,t,n){e.style[t]!==n&&(e.style[t]=n)}function N(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 P({children:e,offsetTop:n=0,offsetBottom:r=0,overflowBehavior:i=`pin`,positionStrategy:a=`fixed`,baseZIndex:o,onStickyItemsHeightChange:s,defaultMode:c=`replace`,constraint:u,className:d,...f}){let m=o===void 0?200:Math.max(Number(o)||0,20),h=(0,t.useRef)(null),g=(0,t.useRef)(new Set),_=(0,t.useRef)(null),v=(0,t.useRef)(new Map),y=(0,t.useRef)(!1),b=(0,t.useRef)(null),S=(0,t.useRef)(null),C=(0,t.useRef)(new Map),w=(0,t.useRef)(0),T=(0,t.useRef)(null),E=(0,t.useRef)({offsetTop:n,offsetBottom:r,overflowBehavior:i,positionStrategy:a,baseZIndex:m,constraint:u,onStickyItemsHeightChange:s}),D=(0,t.useCallback)(()=>{var e;return(e=S.current)==null?void 0:e.schedule()},[]),O=(0,t.useCallback)(()=>{var e,t;let n=h.current;if(!n)return;let r=E.current,i=n.getBoundingClientRect(),a=r.constraint===`none`||i.top<=r.offsetTop&&i.bottom>=r.offsetTop,o=r.positionStrategy===`auto`&&b.current!==!1&&g.current.size===1?g.current.values().next().value:void 0;if(r.positionStrategy===`auto`&&r.constraint!==`none`&&o!=null&&o.canNative&&o.el.parentElement===n&&((e=b.current)==null?b.current=F(n,o.el):e)){let e=o.content.getBoundingClientRect().height,t=o.el.getBoundingClientRect();if(t.height<=e+1&&e+r.offsetTop+Math.max(0,r.offsetBottom)<=window.innerHeight){let i=a&&t.top<=r.offsetTop?e:0;return()=>{var e;if((e=S.current)==null||e.setScrollEnabled(!!r.onStickyItemsHeightChange),T.current=null,y.current=!0,n.classList.remove(`can-sticky`),o.applyNative(r.offsetTop,r.baseZIndex),w.current!==i)return w.current=i,()=>{var e;return(e=r.onStickyItemsHeightChange)==null?void 0:e.call(r,i)}}}b.current=!1}if(!a)return()=>{var e;if((e=S.current)==null||e.setScrollEnabled(!0),T.current=null,y.current){n.classList.remove(`can-sticky`);for(let e of g.current)e.apply(null);y.current=!1}if(w.current!==0)return w.current=0,()=>{var e;return(e=r.onStickyItemsHeightChange)==null?void 0:e.call(r,0)}};let s=_.current;if(s)for(let e of s)e.rect=e.item.el.getBoundingClientRect();else s=_.current=[...g.current].map(e=>({item:e,rect:e.el.getBoundingClientRect()}));s.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});let c=r.overflowBehavior===`scroll`,l=c?window.scrollY:0,u=c?T.current:null,d=0,f;if(c){if(u)d=Math.max(-u.maximum,Math.min(0,u.shift-(l-u.scrollY)));else{let e=s[0];if(e&&e.rect.top<=r.offsetTop){f=e.item.measure(e.rect);let t=f.height,n=Math.max(0,t+r.offsetTop+Math.max(0,r.offsetBottom)-window.innerHeight);d=Math.max(-n,Math.min(0,e.rect.top-r.offsetTop))}}}let p=c&&s.every(({item:e})=>e.mode===`replace`),m=r.offsetTop+d,v=0,x=s.map(({item:e,rect:t},n)=>{var r;let i=m-(p?d:0);if(t.top>i)return null;let a=(r=s[n+1])==null?void 0:r.rect.top;if(e.mode===`replace`&&a!==void 0&&a<i)return null;let o=n===0&&f?f:e.measure(t),c=e.mode===`replace`&&a!==void 0?Math.min(m,a-o.height):m;return v+=o.height,e.mode===`stack`&&(m+=o.height),{...o,top:c,index:n}}),C=null;if(c&&v>0){let e=Math.max(0,v+r.offsetTop+Math.max(0,r.offsetBottom)-window.innerHeight),t=Math.max(-e,d);for(let e of x)e&&(e.top+=t-d);C={scrollY:l,shift:t,maximum:e}}let D=r.constraint===`none`?0:Math.min(0,i.bottom-r.offsetTop-v-((t=C==null?void 0:C.shift)==null?0:t));return()=>{var e;if((e=S.current)==null||e.setScrollEnabled(!0),T.current=C,y.current=x.some(e=>e!==null),n.classList.toggle(`can-sticky`,y.current),s.forEach(({item:e},t)=>{let n=x[t];n&&(n.top+=D),e.apply(n)}),w.current!==v)return w.current=v,()=>{var e;return(e=r.onStickyItemsHeightChange)==null?void 0:e.call(r,v)}}},[]),k=(0,t.useCallback)(e=>{var t;b.current=null;for(let n of e)(t=v.current.get(n.target))==null||t.invalidate();D()},[D]),j=(0,t.useCallback)(()=>{b.current=null;for(let e of g.current)e.invalidate()},[]),M=(0,t.useCallback)(e=>(g.current.add(e),b.current=null,_.current=null,v.current.set(e.el,e),v.current.set(e.content,e),S.current&&(C.current.set(e.el,p(e.el,k)),C.current.set(e.content,p(e.content,k))),D(),()=>{var t,n;(t=C.current.get(e.el))==null||t(),(n=C.current.get(e.content))==null||n(),C.current.delete(e.el),C.current.delete(e.content),v.current.delete(e.el),v.current.delete(e.content),g.current.delete(e),b.current=null,_.current=null,D()}),[D,k]);(0,t.useEffect)(()=>{S.current=A(O,j);let e;if(typeof ResizeObserver<`u`){h.current&&(C.current.set(h.current,p(h.current,k)),e=x(h.current,()=>{j(),D()}));for(let e of g.current)C.current.set(e.el,p(e.el,k)),C.current.set(e.content,p(e.content,k))}let t=C.current;return()=>{var n;(n=S.current)==null||n.stop(),S.current=null,e==null||e();for(let e of t.values())e();t.clear()}},[O,j,D,k]),(0,t.useEffect)(()=>{b.current=null,E.current={offsetTop:n,offsetBottom:r,overflowBehavior:i,positionStrategy:a,baseZIndex:m,constraint:u,onStickyItemsHeightChange:s};for(let e of g.current)e.invalidate();D()});let N=(0,t.useMemo)(()=>({register:M,scheduleUpdate:D,baseZIndex:m,mode:c}),[M,D,m,c]);return t.default.createElement(l.Provider,{value:N},t.default.createElement(`div`,{...f,ref:h,className:[`oe-sticky-container`,d].filter(Boolean).join(` `)},e))}function F(e,t){if(typeof ResizeObserver>`u`||typeof CSS>`u`||typeof CSS.supports!=`function`||!CSS.supports(`position`,`sticky`))return!1;for(let n=e;n;n=n.parentElement){let r=getComputedStyle(n);if(n===e&&(r.display.includes(`grid`)||r.display.includes(`flex`)&&!r.flexDirection.startsWith(`column`))&&/^(normal|stretch)$/.test(r.alignItems)&&/^(auto|normal|stretch)$/.test(getComputedStyle(t).alignSelf)||/(auto|scroll|hidden|overlay)/.test(`${r.overflowX} ${r.overflowY}`))return!1}return!0}e.StickyContainer=P,e.StickyItem=j});

package/dist/scheduler.d.cts

@@ -5,6 +5,7 @@ type Client = {
 };
 export declare function subscribeUpdates(read: Client['read'], invalidate: () => void): {
     schedule: () => void;
+    setScrollEnabled: (enabled: boolean) => void;
     stop: () => void;
 };
 export {};

package/dist/scheduler.d.ts

@@ -5,6 +5,7 @@ type Client = {
 };
 export declare function subscribeUpdates(read: Client['read'], invalidate: () => void): {
     schedule: () => void;
+    setScrollEnabled: (enabled: boolean) => void;
     stop: () => void;
 };
 export {};

package/dist/style.css

@@ -1,2 +1,2 @@
-.oe-sticky-container,.oe-sticky-item{position:relative}.oe-sticky-content.is-sticky{position:fixed}
+.oe-sticky-container,.oe-sticky-item{position:relative}.oe-sticky-content.is-sticky{position:fixed}.oe-sticky-item.is-native-sticky{top:var(--oe-sticky-top);z-index:var(--oe-sticky-z);position:-webkit-sticky;position:sticky}
 /*$vite$:1*/

package/package.json

@@ -1,15 +1,19 @@
 {
   "name": "react-sticky-kit",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "type": "module",
-  "description": "A lightweight, flexible React sticky container and item component library supporting multiple sticky modes, advanced layouts, and edge cases.",
+  "description": "React components for stacked and replacing sticky section headers, with automatic height coordination and viewport offsets.",
   "keywords": [
     "react",
     "sticky",
+    "sticky-header",
+    "sticky-headers",
+    "sticky-section",
+    "stacked-headers",
     "react-sticky",
     "sticky-container",
-    "sticky-item",
-    "z-index"
+    "typescript",
+    "nextjs"
   ],
   "repository": {
     "type": "git",
@@ -18,14 +22,14 @@
   "bugs": {
     "url": "https://github.com/oe/react-sticky-kit/issues"
   },
-  "homepage": "https://github.com/oe/react-sticky-kit#readme",
+  "homepage": "https://app.evecalm.com/react-sticky-kit/",
   "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",
+    "lint": "eslint src demo test scripts vite.config.ts vite.demo.config.ts vitest.config.ts playwright.config.ts",
     "test": "vitest run",
     "test:watch": "vitest",
     "coverage": "vitest run --coverage",
@@ -33,7 +37,8 @@
     "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"
+    "check:compatibility": "node scripts/check-compatibility.mjs",
+    "build:demo": "vite build --config vite.demo.config.ts"
   },
   "files": [
     "dist"