react-sticky-kit 0.1.6 → 0.2.1

package/README.md

@@ -31,6 +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)
 - 🔄 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
@@ -76,13 +77,14 @@ export default function Example() {
 ## Props
 
 ### `<StickyContainer />`
-| Prop                        | Type                                 | Default     | Description                                                                                 |
-|-----------------------------|--------------------------------------|-------------|---------------------------------------------------------------------------------------------|
-| `offsetTop`                 | `number`                             | `0`         | Offset from the top of the viewport                                                         |
-| `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. |
-| `onStickyItemsHeightChange` | `(height: number) => void`            |             | Callback when total sticky height changes                                                   |
+| Prop                        | Type                                                 | Default     | Description                                                                                 |
+|-----------------------------|------------------------------------------------------|-------------|---------------------------------------------------------------------------------------------|
+| `offsetTop`                 | `number`                                             | `0`         | Offset from the top of the viewport                                                         |
+| `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. |
+| `onStickyItemsHeightChange` | `(height: number) => void`                          |             | Callback when total sticky height changes                                                   |
+| `constraint`                | `'none'`                                             |             | Define the constraint for sticky behavior. 'none' = no constraints (CSS-like behavior) |
 
 ### `<StickyItem />`
 | Prop    | Type                                 | Default | Description                                 |
@@ -94,6 +96,44 @@ export default function Example() {
 - **stack**: Sticky items stack on top of each other.
 - **none**: Sticky is disabled for this item.
 
+## Constraint Behavior
+
+The `constraint` prop allows you to control when sticky items should stop being sticky:
+
+```tsx
+import React from 'react';
+import { StickyContainer, StickyItem } from 'react-sticky-kit';
+
+function Example() {
+  return (
+    <div>
+      {/* 1. Default: Container-based constraint */}
+      <StickyContainer>
+        <StickyItem><div>Sticky stops when container leaves viewport</div></StickyItem>
+        <div>Content...</div>
+      </StickyContainer>
+      
+      {/* 2. No constraints (like CSS position:sticky) */}
+      <StickyContainer constraint="none">
+        <StickyItem><div>Always sticky like CSS position:sticky</div></StickyItem>
+        <div>Content...</div>
+      </StickyContainer>
+    </div>
+  );
+}
+        <div>Content...</div>
+      </StickyContainer>
+    </div>
+  );
+}
+```
+
+### 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`.
+
+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 locally:
@@ -106,9 +146,10 @@ pnpm dev
 Open [http://localhost:5173](http://localhost:5173) and switch between demo pages to explore all features and edge cases:
 * [iOS Contact](http://localhost:5173/#ios-contact) a dead simple iOS contact clone
 * [Mixed mode](http://localhost:5173/#mixed-mode) mix replace/stack/none mode
-* [Nested](http://localhost:5173/#dynamic-height) nest sticky containers
-* [Dynamic sticky items](http://localhost:5173/#nested) dynamic sticky items(add/remove)
+* [Nested](http://localhost:5173/#nested) nest sticky containers
+* [Dynamic sticky items](http://localhost:5173/#dynamic) dynamic sticky items(add/remove)
 * [Dynamic offsetTop](http://localhost:5173/#dynamic-offset) dynamic offsetTop that adapts to header height changes
+* [Constraint Demo](http://localhost:5173/#constraint) demo showing different constraint options
 
 ## SSR/SSG Support
 
@@ -155,6 +196,10 @@ import 'react-sticky-kit/dist/style.css'
 </html>
 ```
 
+## Publish steps
+
+`pnpm pub`
+
 ## License
 
 MIT

package/dist/index.d.ts

@@ -25,6 +25,12 @@ export declare interface IStickyContainerProps extends default_2.HTMLAttributes<
      * @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> {
@@ -43,7 +49,7 @@ export declare interface IStickyItemProps extends default_2.HTMLAttributes<HTMLD
  */
 export declare type IStickyMode = 'replace' | 'stack' | 'none';
 
-export declare function StickyContainer({ children, offsetTop, baseZIndex, onStickyItemsHeightChange, defaultMode, ...rest }: IStickyContainerProps): JSX.Element;
+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;
 

package/dist/react-sticky.es.js

@@ -1,142 +1,157 @@
-import { jsx as R } from "react/jsx-runtime";
-import { createContext as b, useContext as Z, useRef as h, useState as L, useEffect as E, useCallback as w, useMemo as N } from "react";
-const x = 20, T = 200, $ = b(null);
-function _() {
-  return Z($);
+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($);
 }
-function F({ mode: u, children: f, className: g, ...k }) {
-  const e = _(), S = h(null), I = h(null), [r, m] = L(!1), t = h({
+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: r,
-    baseZIndex: (e == null ? void 0 : e.baseZIndex) || x
+    isSticky: m,
+    baseZIndex: (e == null ? void 0 : e.baseZIndex) || O
   });
-  return t.current.baseZIndex = (e == null ? void 0 : e.baseZIndex) || x, t.current.fixedOffsetTop = (e == null ? void 0 : e.fixedOffsetTop) || 0, t.current.isSticky = r, E(() => {
-    const n = I.current, a = S.current, l = u || (e == null ? void 0 : e.mode);
-    if (!e || !a || !n || l === "none" || !l || !e.register) {
-      m(!1);
+  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 s = {
+    const x = {
       el: a,
-      update: (d, c, i, o, C) => {
-        if (!d || c > i)
-          return t.current.isSticky && m(!1), 0;
-        const p = n.getBoundingClientRect().height;
-        let H = i;
-        if (l === "replace" && typeof o < "u") {
-          const y = o - (i + p);
-          if (y < 0 && (H = i + y, y + p < 0))
-            return t.current.isSticky && m(!1), 0;
+      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 = `${p}px`, t.current.isSticky || m(!0), n.style.top = `${H}px`, n.style.width = `${a.offsetWidth}px`, n.style.zIndex = `${t.current.baseZIndex + (l === "replace" ? -C : C)}`, l === "replace" ? 0 : p;
+        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(s);
-  }, [e == null ? void 0 : e.mode, e == null ? void 0 : e.register, u]), E(() => {
-    const n = S.current, a = I.current, l = e == null ? void 0 : e.updateStickyItemsHeight;
-    if (!r || !n || !a || !l)
+    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 v = l(a.getBoundingClientRect().height);
+    const H = n(a.getBoundingClientRect().height);
     return () => {
-      O(n, ["height"]), O(a, ["top", "z-index", "width"]), v();
+      N(t, ["height"]), N(a, ["top", "z-index", "width"]), H();
     };
-  }, [r, e == null ? void 0 : e.updateStickyItemsHeight]), /* @__PURE__ */ R("div", { className: "oe-sticky-item " + (g || ""), ...k, ref: S, children: /* @__PURE__ */ R("div", { className: "oe-sticky-content " + (r ? "is-sticky" : ""), ref: I, children: f }) });
+  }, [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 }) });
 }
-function O(u, f) {
-  f.forEach((g) => {
-    u.style.removeProperty(g);
+function N(f, y) {
+  y.forEach((h) => {
+    f.style.removeProperty(h);
   });
 }
-function M({
-  children: u,
-  offsetTop: f = 0,
-  baseZIndex: g,
-  onStickyItemsHeightChange: k,
+function P({
+  children: f,
+  offsetTop: y = 0,
+  baseZIndex: h,
+  onStickyItemsHeightChange: I,
   defaultMode: e = "replace",
+  constraint: g,
   ...S
 }) {
-  const I = h(null), r = h([]), m = h(null), t = h({
-    fixedOffsetTop: f,
+  const m = k(null), o = k([]), l = k(null), t = k({
+    fixedOffsetTop: y,
     defaultMode: e,
     stickyItemsHeight: 0,
-    onStickyItemsHeightChange: k,
+    onStickyItemsHeightChange: I,
     lastCanSticky: !1
   });
-  t.current.onStickyItemsHeightChange = k;
-  const n = w(() => {
-    const s = I.current;
-    !s || m.current || (m.current = requestAnimationFrame(() => {
-      m.current = null;
-      const d = s.getBoundingClientRect(), { fixedOffsetTop: c, stickyItemsHeight: i } = t.current, o = !(d.top > c || d.bottom < c);
-      if (!o) {
-        t.current.lastCanSticky !== o && (s.classList.toggle("can-sticky", !1), r.current.forEach((y) => y.update(!1, 0, 0, 0, 0)), t.current.lastCanSticky = o);
+  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 = o, i > 0 && s.classList.toggle("can-sticky", !0);
-      let C = c, p = d.bottom - (c + i);
-      p > 0 && (p = 0);
-      const H = r.current.map((y) => y.el.getBoundingClientRect().top);
-      r.current.forEach((y, B) => {
-        C += y.update(o, H[B], C + p, H[B + 1], B);
+      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 = w((s) => {
-    const d = t.current.stickyItemsHeight + s;
-    return t.current.stickyItemsHeight = d, setTimeout(() => {
-      var c, i;
-      (i = (c = t.current).onStickyItemsHeightChange) == null || i.call(c, d);
+  }, [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 c = t.current.stickyItemsHeight - s;
-      t.current.stickyItemsHeight = c, setTimeout(() => {
-        var i, o;
-        (o = (i = t.current).onStickyItemsHeightChange) == null || o.call(i, c);
+      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 = f, t.current.defaultMode = e, setTimeout(() => {
+    t.current.fixedOffsetTop = y, t.current.defaultMode = e, setTimeout(() => {
       n();
     }, 10);
-  }, [f, e, n]);
-  const l = w((s) => (r.current.push(s), r.current = z(r.current), n(), () => {
-    r.current = r.current.filter((d) => d !== s), n();
+  }, [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 v = N(() => A(g), [g]);
-  return /* @__PURE__ */ R(
+  const B = _(() => D(h), [h]);
+  return /* @__PURE__ */ w(
     $.Provider,
     {
       value: {
-        register: l,
-        baseZIndex: v,
-        updateStickyItemsHeight: a,
-        fixedOffsetTop: f,
+        register: x,
+        baseZIndex: B,
+        updateStickyItemsHeight: H,
+        fixedOffsetTop: y,
         mode: e
       },
-      children: /* @__PURE__ */ R(
+      children: /* @__PURE__ */ w(
         "div",
         {
           ...S,
-          ref: I,
+          ref: m,
           className: "oe-sticky-container",
-          children: u
+          children: f
         }
       )
     }
   );
 }
-function A(u) {
-  return typeof u > "u" ? T : Math.max(Number(u) || 0, x);
+function D(f) {
+  return typeof f > "u" ? A : Math.max(Number(f) || 0, O);
 }
-function z(u) {
-  return u.sort((f, g) => {
-    const k = f.el.getBoundingClientRect(), e = g.el.getBoundingClientRect();
-    return k.top - e.top;
+function W(f) {
+  return f.sort((y, h) => {
+    const I = y.el.getBoundingClientRect(), e = h.el.getBoundingClientRect();
+    return I.top - e.top;
   });
 }
 export {
-  M as StickyContainer,
-  F as StickyItem
+  P as StickyContainer,
+  M as StickyItem
 };

package/dist/react-sticky.umd.js

@@ -1 +1 @@
-(function(p,m){typeof exports=="object"&&typeof module<"u"?m(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],m):(p=typeof globalThis<"u"?globalThis:p||self,m(p.ReactSticky={},p.jsxRuntime,p.React))})(this,function(p,m,r){"use strict";const B=r.createContext(null);function x(){return r.useContext(B)}const $="";function Z({mode:o,children:l,className:h,...S}){const e=x(),C=r.useRef(null),E=r.useRef(null),[s,k]=r.useState(!1),t=r.useRef({fixedOffsetTop:(e==null?void 0:e.fixedOffsetTop)||0,isSticky:s,baseZIndex:(e==null?void 0:e.baseZIndex)||20});return t.current.baseZIndex=(e==null?void 0:e.baseZIndex)||20,t.current.fixedOffsetTop=(e==null?void 0:e.fixedOffsetTop)||0,t.current.isSticky=s,r.useEffect(()=>{const n=E.current,d=C.current,a=o||(e==null?void 0:e.mode);if(!e||!d||!n||a==="none"||!a||!e.register){k(!1);return}const c={el:d,update:(y,u,i,f,R)=>{if(!y||u>i)return t.current.isSticky&&k(!1),0;const I=n.getBoundingClientRect().height;let _=i;if(a==="replace"&&typeof f<"u"){const g=f-(i+I);if(g<0&&(_=i+g,g+I<0))return t.current.isSticky&&k(!1),0}return d.style.height=`${I}px`,t.current.isSticky||k(!0),n.style.top=`${_}px`,n.style.width=`${d.offsetWidth}px`,n.style.zIndex=`${t.current.baseZIndex+(a==="replace"?-R:R)}`,a==="replace"?0:I}};return e.register(c)},[e==null?void 0:e.mode,e==null?void 0:e.register,o]),r.useEffect(()=>{const n=C.current,d=E.current,a=e==null?void 0:e.updateStickyItemsHeight;if(!s||!n||!d||!a)return;const H=a(d.getBoundingClientRect().height);return()=>{N(n,["height"]),N(d,["top","z-index","width"]),H()}},[s,e==null?void 0:e.updateStickyItemsHeight]),m.jsx("div",{className:"oe-sticky-item "+(h||""),...S,ref:C,children:m.jsx("div",{className:"oe-sticky-content "+(s?"is-sticky":""),ref:E,children:l})})}function N(o,l){l.forEach(h=>{o.style.removeProperty(h)})}function b({children:o,offsetTop:l=0,baseZIndex:h,onStickyItemsHeightChange:S,defaultMode:e="replace",...C}){const E=r.useRef(null),s=r.useRef([]),k=r.useRef(null),t=r.useRef({fixedOffsetTop:l,defaultMode:e,stickyItemsHeight:0,onStickyItemsHeightChange:S,lastCanSticky:!1});t.current.onStickyItemsHeightChange=S;const n=r.useCallback(()=>{const c=E.current;!c||k.current||(k.current=requestAnimationFrame(()=>{k.current=null;const y=c.getBoundingClientRect(),{fixedOffsetTop:u,stickyItemsHeight:i}=t.current,f=!(y.top>u||y.bottom<u);if(!f){t.current.lastCanSticky!==f&&(c.classList.toggle("can-sticky",!1),s.current.forEach(g=>g.update(!1,0,0,0,0)),t.current.lastCanSticky=f);return}t.current.lastCanSticky=f,i>0&&c.classList.toggle("can-sticky",!0);let R=u,I=y.bottom-(u+i);I>0&&(I=0);const _=s.current.map(g=>g.el.getBoundingClientRect().top);s.current.forEach((g,v)=>{R+=g.update(f,_[v],R+I,_[v+1],v)})}))},[]),d=r.useCallback(c=>{const y=t.current.stickyItemsHeight+c;return t.current.stickyItemsHeight=y,setTimeout(()=>{var u,i;(i=(u=t.current).onStickyItemsHeightChange)==null||i.call(u,y)},0),()=>{const u=t.current.stickyItemsHeight-c;t.current.stickyItemsHeight=u,setTimeout(()=>{var i,f;(f=(i=t.current).onStickyItemsHeightChange)==null||f.call(i,u)},0)}},[]);r.useEffect(()=>{t.current.fixedOffsetTop=l,t.current.defaultMode=e,setTimeout(()=>{n()},10)},[l,e,n]);const a=r.useCallback(c=>(s.current.push(c),s.current=O(s.current),n(),()=>{s.current=s.current.filter(y=>y!==c),n()}),[n]);r.useEffect(()=>(window.addEventListener("scroll",n,{passive:!0}),window.addEventListener("resize",n,{passive:!0}),()=>{window.removeEventListener("scroll",n),window.removeEventListener("resize",n)}),[n]);const H=r.useMemo(()=>w(h),[h]);return m.jsx(B.Provider,{value:{register:a,baseZIndex:H,updateStickyItemsHeight:d,fixedOffsetTop:l,mode:e},children:m.jsx("div",{...C,ref:E,className:"oe-sticky-container",children:o})})}function w(o){return typeof o>"u"?200:Math.max(Number(o)||0,20)}function O(o){return o.sort((l,h)=>{const S=l.el.getBoundingClientRect(),e=h.el.getBoundingClientRect();return S.top-e.top})}p.StickyContainer=b,p.StickyItem=Z,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})});
+(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"})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-sticky-kit",
-  "version": "0.1.6",
+  "version": "0.2.1",
   "type": "module",
   "description": "A lightweight, flexible React sticky container and item component library supporting multiple sticky modes, advanced layouts, and edge cases.",
   "keywords": [