react-sticky-kit 0.1.5 → 0.2.0

package/README.md

@@ -4,15 +4,24 @@
   <a href="https://www.npmjs.com/package/react-sticky-kit" target="_blank">
     <img src="https://img.shields.io/npm/v/react-sticky-kit.svg?style=flat-square" alt="NPM Version" />
   </a>
+  <a href="https://img.shields.io/npm/dm/react-sticky-kit?style=flat-square" target="_blank">
+    <img src="https://img.shields.io/npm/dm/react-sticky-kit?style=flat-square" alt="NPM Downloads" />
+  </a>
   <a href="https://github.com/oe/react-sticky-kit" target="_blank">
     <img src="https://img.shields.io/github/stars/oe/react-sticky-kit?style=flat-square" alt="GitHub Stars" />
   </a>
   <a href="https://github.com/oe/react-sticky-kit/actions" target="_blank">
-    <img src="https://github.com/oe/react-sticky-kit/actions/workflows/ci.yml/badge.svg" alt="Build Status" />
+    <img src="https://img.shields.io/github/actions/workflow/status/oe/react-sticky-kit/ci.yml?style=flat-square" alt="Build Status" />
   </a>
   <a href="https://github.com/oe/react-sticky-kit/blob/main/LICENSE" target="_blank">
     <img src="https://img.shields.io/github/license/oe/react-sticky-kit?style=flat-square" alt="License" />
   </a>
+  <a href="https://www.typescriptlang.org/" target="_blank">
+    <img src="https://img.shields.io/badge/TypeScript-5.0%2B-blue?logo=typescript&style=flat-square" alt="TypeScript" />
+  </a>
+  <a href="#ssr-ssg-support" target="_blank">
+    <img src="https://img.shields.io/badge/SSR%2FSSG-Compatible-brightgreen?style=flat-square" alt="SSR/SSG Compatible" />
+  </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.
@@ -22,6 +31,8 @@ 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
 - 🧪 Includes demo pages for real-world scenarios
@@ -36,6 +47,9 @@ yarn add react-sticky-kit
 pnpm add react-sticky-kit
 ```
 
+## Demo
+- [Apple iOS Contact App](https://codesandbox.io/p/sandbox/dreamy-hofstadter-v9dzfz)
+
 ## Usage
 
 ```tsx
@@ -63,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                                 |
@@ -81,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:
@@ -93,8 +146,55 @@ 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
+
+React Sticky Kit supports Server-Side Rendering (SSR) and Static Site Generation (SSG), working seamlessly with frameworks like Next.js, Gatsby, Astro, and more.
+
+### Next.js Example
+
+```tsx
+// pages/index.tsx
+import { StickyContainer, StickyItem } from 'react-sticky-kit'
+import 'react-sticky-kit/dist/style.css'
+
+export default function Home() {
+  return (
+    <StickyContainer>
+      <StickyItem>
+        <header>Sticky Header</header>
+      </StickyItem>
+      <main>Content...</main>
+    </StickyContainer>
+  )
+}
+```
+
+### Astro Example
+
+```astro
+---
+// src/pages/index.astro
+import { StickyContainer, StickyItem } from 'react-sticky-kit'
+import 'react-sticky-kit/dist/style.css'
+---
+
+<html>
+  <head>...</head>
+  <body>
+    <StickyContainer client:load>
+      <StickyItem>
+        <header>Sticky Header</header>
+      </StickyItem>
+      <div>Content...</div>
+    </StickyContainer>
+  </body>
+</html>
+```
 
 ## License
 

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

package/dist/react-sticky.umd.js

@@ -1 +1 @@
-(function(g,k){typeof exports=="object"&&typeof module<"u"?k(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],k):(g=typeof globalThis<"u"?globalThis:g||self,k(g.ReactSticky={},g.jsxRuntime,g.React))})(this,function(g,k,s){"use strict";const B=s.createContext(null);function N(){return s.useContext(B)}const $="";function O({mode:u,children:o,className:m,...E}){const e=N(),R=s.useRef(null),C=s.useRef(null),[i,t]=s.useState(!1),n=s.useRef({fixedOffsetTop:(e==null?void 0:e.fixedOffsetTop)||0,isSticky:i,baseZIndex:(e==null?void 0:e.baseZIndex)||20});return n.current.baseZIndex=(e==null?void 0:e.baseZIndex)||20,n.current.fixedOffsetTop=(e==null?void 0:e.fixedOffsetTop)||0,n.current.isSticky=i,s.useEffect(()=>{const f=C.current,l=R.current,d=u||(e==null?void 0:e.mode);if(!e||!l||!f||d==="none"||!d||!e.register){t(!1);return}const a={el:l,update:(y,c,p,I,H)=>{if(!y)return n.current.isSticky&&t(!1),0;if(c<=p){const S=f.getBoundingClientRect().height;let _=p;if(d==="replace"&&typeof I<"u"){const h=I-(p+S);if(h<0&&(_=p+h,h+S<0))return n.current.isSticky&&t(!1),0}return l.style.height=`${S}px`,n.current.isSticky||t(!0),f.style.top=`${_}px`,f.style.width=`${l.offsetWidth}px`,f.style.zIndex=`${n.current.baseZIndex+(d==="replace"?-H:H)}`,d==="replace"?0:S}else t(!1);return 0}};return e.register(a)},[e==null?void 0:e.mode,e==null?void 0:e.register,u]),s.useEffect(()=>{const f=R.current,l=C.current,d=e==null?void 0:e.updateStickyItemsHeight;if(!i||!f||!l||!d)return;const r=d(l.getBoundingClientRect().height);return()=>{x(f,["height"]),x(l,["top","z-index","width"]),r()}},[i,e==null?void 0:e.updateStickyItemsHeight]),k.jsx("div",{className:"oe-sticky-item "+(m||""),...E,ref:R,children:k.jsx("div",{className:"oe-sticky-content "+(i?"is-sticky":""),ref:C,children:o})})}function x(u,o){o.forEach(m=>{u.style.removeProperty(m)})}function T({children:u,offsetTop:o=0,baseZIndex:m,onStickyItemsHeightChange:E,defaultMode:e="replace",...R}){const C=s.useRef(null),i=s.useRef([]),t=s.useRef({fixedOffsetTop:o,defaultMode:e,stickyItemsHeight:0,onStickyItemsHeightChange:E,lastCanSticky:!1});t.current.onStickyItemsHeightChange=E;const n=s.useCallback(()=>{const r=C.current;if(!r)return;const a=r.getBoundingClientRect(),y=t.current,c=y.fixedOffsetTop,p=y.stickyItemsHeight,I=!(a.top>c||a.bottom<c);if(!I){t.current.lastCanSticky!==I&&(r.classList.toggle("can-sticky",!1),i.current.forEach(h=>h.update(!1,0,0,0,0)),t.current.lastCanSticky=I);return}t.current.lastCanSticky=I,p>0&&r.classList.toggle("can-sticky",!0);let H=c,S=a.bottom-(c+p);S>0&&(S=0);const _=i.current.map(h=>h.el.getBoundingClientRect().top);i.current.forEach((h,v)=>{H+=h.update(I,_[v],H+S,_[v+1],v)})},[]),f=s.useCallback(r=>{const a=t.current.stickyItemsHeight+r;return t.current.stickyItemsHeight=a,setTimeout(()=>{var y,c;(c=(y=t.current).onStickyItemsHeightChange)==null||c.call(y,a)},0),()=>{const y=t.current.stickyItemsHeight-r;t.current.stickyItemsHeight=y,setTimeout(()=>{var c,p;(p=(c=t.current).onStickyItemsHeightChange)==null||p.call(c,y)},0)}},[]);s.useEffect(()=>{t.current.fixedOffsetTop=o,t.current.defaultMode=e,setTimeout(()=>{n()},10)},[o,e,n]);const l=s.useCallback(r=>(i.current.push(r),i.current=b(i.current),n(),()=>{i.current=i.current.filter(a=>a!==r),n()}),[n]);s.useEffect(()=>(window.addEventListener("scroll",n,{passive:!0}),window.addEventListener("resize",n,{passive:!0}),()=>{window.removeEventListener("scroll",n),window.removeEventListener("resize",n)}),[n]);const d=s.useMemo(()=>Z(m),[m]);return k.jsx(B.Provider,{value:{register:l,baseZIndex:d,updateStickyItemsHeight:f,fixedOffsetTop:o,mode:e},children:k.jsx("div",{...R,ref:C,className:"oe-sticky-container",children:u})})}function Z(u){return typeof u>"u"?200:Math.max(Number(u)||0,20)}function b(u){return u.sort((o,m)=>{const E=o.el.getBoundingClientRect(),e=m.el.getBoundingClientRect();return E.top-e.top})}g.StickyContainer=T,g.StickyItem=O,Object.defineProperty(g,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.5",
+  "version": "0.2.0",
   "type": "module",
   "description": "A lightweight, flexible React sticky container and item component library supporting multiple sticky modes, advanced layouts, and edge cases.",
   "keywords": [
@@ -20,14 +20,6 @@
   },
   "homepage": "https://github.com/oe/react-sticky-kit#readme",
   "license": "MIT",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview",
-    "type-check": "tsc --noEmit",
-    "lint": "eslint src demo --ext .ts,.tsx,.js,.jsx",
-    "pub": "tsx ./scripts/publish.ts"
-  },
   "files": [
     "dist"
   ],
@@ -36,9 +28,9 @@
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/react-sticky.es.js",
-      "require": "./dist/react-sticky.umd.js",
-      "types": "./dist/index.d.ts"
+      "require": "./dist/react-sticky.umd.js"
     },
     "./style": "./dist/style.css",
     "./dist/style.css": "./dist/style.css"
@@ -49,25 +41,44 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.25.0",
+    "@testing-library/jest-dom": "^6.1.6",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.4.3",
     "@types/node": "^22.15.18",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
     "@typescript-eslint/eslint-plugin": "^8.32.1",
     "@typescript-eslint/parser": "^8.32.1",
     "@vitejs/plugin-react": "^4.0.0",
+    "@vitest/coverage-v8": "^3.1.3",
     "eslint": "^9.26.0",
     "eslint-config-prettier": "^10.1.5",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^5.2.0",
     "globals": "^16.0.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jsdom": "^26.1.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "sass": "^1.88.0",
+    "ts-node": "^10.9.2",
     "tsx": "^4.19.4",
     "typescript": "^5.0.0",
     "typescript-eslint": "^8.30.1",
     "vite": "^4.0.0",
-    "vite-plugin-dts": "^4.5.4"
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^3.1.3"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint src demo --ext .ts,.tsx,.js,.jsx",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "coverage": "vitest run --coverage",
+    "pub": "tsx ./scripts/publish.ts"
   }
-}
+}