@galangel/react-scroll-magic 1.0.1 → 1.0.3

package/README.md

@@ -1,23 +1,46 @@
-# Scroll Component
+<p align="center">
+  <img src="https://img.shields.io/badge/🪄-React_Scroll_Magic-667eea?style=for-the-badge&labelColor=764ba2" alt="React Scroll Magic" />
+</p>
 
-[Live Demo](https://galangel.github.io/react-scroll-magic/)
+<h1 align="center">🪄 React Scroll Magic</h1>
 
-## Overview
+<p align="center">
+  <strong>Create magical scroll experiences with nested sticky headers, collapsible sections, and smooth animations.</strong>
+</p>
 
-The Scroll Magic Component is a React component that provides smooth scrolling functionality for your web application. It allows you to create scroll between items and headers and keep the headers visible.
+<p align="center">
+  <a href="https://www.npmjs.com/package/@galangel/react-scroll-magic"><img src="https://img.shields.io/npm/v/@galangel/react-scroll-magic.svg?style=flat-square&color=667eea" alt="npm version" /></a>
+  <a href="https://www.npmjs.com/package/@galangel/react-scroll-magic"><img src="https://img.shields.io/npm/dm/@galangel/react-scroll-magic.svg?style=flat-square&color=764ba2" alt="npm downloads" /></a>
+  <a href="https://github.com/galangel/react-scroll-magic/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-Apache%202.0-blue.svg?style=flat-square" alt="license" /></a>
+  <img src="https://img.shields.io/badge/TypeScript-Ready-3178c6?style=flat-square&logo=typescript&logoColor=white" alt="TypeScript" />
+  <img src="https://img.shields.io/badge/React-18+-61dafb?style=flat-square&logo=react&logoColor=white" alt="React 18+" />
+</p>
 
-## Features
+<p align="center">
+  <a href="https://galangel.github.io/react-scroll-magic/">📖 Live Demo & Documentation</a>
+</p>
 
-- sticky headers in both directions
-- scroll to header by click
-- typescript
+---
 
-## Installation
+## ✨ Key Features
 
-To install the Scroll Component, use npm or yarn:
+| Feature                   | Description                                                                 |
+| ------------------------- | --------------------------------------------------------------------------- |
+| 📌 **Sticky Headers**     | Headers stick to top as you scroll, with support for nested sticky behavior |
+| 🎯 **Nested Structure**   | Create deeply nested hierarchies with items inside items                    |
+| 📦 **Collapse/Expand**    | Each section with nested content can be collapsed or expanded               |
+| ♾️ **Infinite Scrolling** | Built-in support for loading more items when reaching the bottom            |
+| 🎨 **Fully Customizable** | Complete control over rendering via render props                            |
+| 🔤 **TypeScript Ready**   | Fully typed with comprehensive interfaces                                   |
+
+---
+
+## 🚀 Quick Start
+
+### Installation
 
 ```bash
-npm i @galangel/react-scroll-magic
+npm install @galangel/react-scroll-magic
 ```
 
 or
@@ -26,52 +49,309 @@ or
 yarn add @galangel/react-scroll-magic
 ```
 
-## Usage
+### Basic Usage
+
+```jsx
+import { Scroll } from '@galangel/react-scroll-magic';
+
+const items = [
+  {
+    id: 'section-1',
+    render: ({ collapse }) => (
+      <div style={{ padding: '10px', backgroundColor: '#f0f0f0' }}>
+        Header 1
+        {collapse && (
+          <button onClick={collapse.isOpen ? collapse.close : collapse.open}>{collapse.isOpen ? '▼' : '▶'}</button>
+        )}
+      </div>
+    ),
+    nestedItems: [
+      { render: () => <div style={{ padding: '10px' }}>Item 1.1</div> },
+      { render: () => <div style={{ padding: '10px' }}>Item 1.2</div> },
+    ],
+  },
+  {
+    id: 'section-2',
+    render: () => <div style={{ padding: '10px' }}>Simple Item</div>,
+  },
+];
+
+function App() {
+  return (
+    <div style={{ height: '400px', width: '100%' }}>
+      <Scroll items={items} headerBehavior="push" scrollBehavior="smooth" />
+    </div>
+  );
+}
+```
+
+---
+
+## 📚 API Reference
+
+### Scroll Component Props
+
+| Prop             | Type                              | Default    | Description                                                                            |
+| ---------------- | --------------------------------- | ---------- | -------------------------------------------------------------------------------------- |
+| `items`          | `Items`                           | Required   | Array of items to render. Each item has a `render` function and optional `nestedItems` |
+| `stickTo`        | `'top' \| 'bottom' \| 'all'`      | `'all'`    | Where headers should stick when scrolling                                              |
+| `scrollBehavior` | `'auto' \| 'instant' \| 'smooth'` | `'smooth'` | CSS scroll-behavior when clicking headers                                              |
+| `headerBehavior` | `'stick' \| 'push' \| 'none'`     | `'none'`   | How headers behave when scrolling                                                      |
+| `loading`        | `Loading`                         | Optional   | Configuration for infinite scrolling                                                   |
+
+### Item Structure
+
+```typescript
+interface Item {
+  id?: string; // Optional unique identifier
+  render: (props: {
+    // Render function for the item
+    collapse?: {
+      isOpen: boolean; // Current collapse state
+      open: () => void; // Function to expand
+      close: () => void; // Function to collapse
+    };
+  }) => JSX.Element;
+  nestedItems?: Item[]; // Optional nested items (makes this a header)
+}
+```
 
-Here is a basic example of how to use the Scroll Component in your React application:
+### Loading Type Definition
+
+```typescript
+interface Loading {
+  onBottomReached?: () => Promise<void>; // Callback when user scrolls to bottom
+  render?: (isLoading: boolean) => JSX.Element; // Custom loading indicator renderer
+}
+```
+
+---
+
+## ♾️ Infinite Scrolling Example
 
 ```jsx
-import React from 'react';
-import { ScrollComponent } from '@galangel/react-scroll-magic';
+import React, { useState } from 'react';
+import { Scroll } from '@galangel/react-scroll-magic';
+
+const InfiniteScrollExample = () => {
+  const [items, setItems] = useState([
+    { render: () => <div>Initial Item 1</div> },
+    { render: () => <div>Initial Item 2</div> },
+  ]);
+
+  const loadMoreItems = async () => {
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+
+    const newItems = Array.from({ length: 10 }, (_, i) => ({
+      render: () => <div>New Item {items.length + i + 1}</div>,
+    }));
+
+    setItems((prev) => [...prev, ...newItems]);
+  };
+
+  const loading = {
+    onBottomReached: loadMoreItems,
+    render: (isLoading) => (
+      <div style={{ textAlign: 'center', padding: '20px' }}>{isLoading ? 'Loading...' : 'Load more'}</div>
+    ),
+  };
 
-const App = () => {
   return (
-    <Scroll
-      items={
-        [
-          /* array of items */
-        ]
-      }
-      {...props}
-    />
+    <div style={{ height: '400px', width: '100%' }}>
+      <Scroll items={items} loading={loading} headerBehavior="none" />
+    </div>
   );
 };
+```
+
+---
+
+## 🎨 Styling & CSS Classes
+
+The component uses semantic CSS classes that you can target for custom styling. Here's a complete reference:
+
+### CSS Class Reference
+
+| Class Name                | Element | Description                                     |
+| ------------------------- | ------- | ----------------------------------------------- |
+| `.scroll-list`            | `<ul>`  | Main scroll container element                   |
+| `.scroll-item`            | `<li>`  | Regular list item (items without `nestedItems`) |
+| `.scroll-header`          | `<li>`  | Header item (items with `nestedItems`)          |
+| `.scroll-header.stick`    | `<li>`  | Header with `headerBehavior="stick"`            |
+| `.scroll-header.push`     | `<li>`  | Header with `headerBehavior="push"`             |
+| `.scroll-header.none`     | `<li>`  | Header with `headerBehavior="none"`             |
+| `.scroll-loading`         | `<li>`  | Loading indicator container                     |
+| `.scroll-loading.loading` | `<li>`  | Loading indicator when actively loading         |
+
+### Styling Examples
 
-export default App;
+```css
+/* Main scroll container */
+.scroll-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  overflow-y: auto;
+}
+
+/* All items (headers and regular items) */
+.scroll-item,
+.scroll-header {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/* Regular items */
+.scroll-item {
+  padding: 12px 16px;
+  background-color: #fff;
+  border-bottom: 1px solid #eee;
+}
+
+/* Header items - base styles */
+.scroll-header {
+  padding: 16px 20px;
+  background-color: #f5f5f5;
+  font-weight: 600;
+  cursor: pointer;
+  border-bottom: 1px solid #ddd;
+}
+
+/* Sticky header behavior */
+.scroll-header.stick {
+  position: sticky;
+  /* top/bottom values are set dynamically by the component */
+}
+
+/* Push header behavior */
+.scroll-header.push {
+  position: sticky;
+  /* top value is set dynamically by the component */
+}
+
+/* Header hover effect */
+.scroll-header:hover {
+  background-color: #e8e8e8;
+}
+
+/* Loading indicator */
+.scroll-loading {
+  display: none;
+  padding: 20px;
+  text-align: center;
+}
+
+.scroll-loading.loading {
+  display: block;
+}
+
+/* Loading spinner animation */
+.scroll-loading.loading::after {
+  content: '';
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border: 2px solid #ccc;
+  border-top-color: #667eea;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+```
+
+### Dark Theme Example
+
+```css
+/* Dark theme styling */
+.scroll-list {
+  background-color: #1a202c;
+}
+
+.scroll-item {
+  background-color: #2d3748;
+  color: #e2e8f0;
+  border-bottom: 1px solid #4a5568;
+}
+
+.scroll-header {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: #fff;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.scroll-header:hover {
+  filter: brightness(1.1);
+}
+
+.scroll-loading.loading::after {
+  border-color: #4a5568;
+  border-top-color: #667eea;
+}
+```
+
+### Important Notes
+
+> ⚠️ **Container Height Required**: The scroll container must have a defined height for scrolling to work properly.
+
+```jsx
+<div style={{ height: '400px' }}>
+  {' '}
+  {/* or height: '100vh' */}
+  <Scroll items={items} />
+</div>
 ```
 
-## Props
+---
+
+## 💡 Tips & Best Practices
+
+| Tip                           | Description                                                                                                              |
+| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
+| 🎯 **Use Unique IDs**         | Assign unique `id` properties to items for better performance and scroll-to functionality                                |
+| 🛑 **Stop Propagation**       | When adding click handlers inside items (like collapse buttons), use `e.stopPropagation()` to prevent scroll-to behavior |
+| 📏 **Set Container Height**   | The Scroll component needs a container with a defined height (`height: 100vh` or fixed pixels)                           |
+| 🎨 **headerBehavior: "push"** | The "push" mode creates a natural feel where headers push each other out of view                                         |
 
-The Scroll Component accepts the following props:
+---
 
-| Prop                      | Type                                  | Description                                                     |
-| ------------------------- | ------------------------------------- | --------------------------------------------------------------- |
-| `stickTo`                 | `top`\|`bottom`\|`all`                | how headers should stick                                        |
-| `scrollBehavior`          | `scrollBehavior CSS property`         | how the scrolling should behave when clicking a header          |
-| `headerBehavior`          | `stick`\|`push`\|`none`               | how the headers behave when scrolling                           |
-| `items`                   | `items array`                         | nested structure of items                                       |
-| `loading`                 | `Loading`                             | object containing loading state and optional callbacks          |
-| `loading.onBottomReached` | `() => Promise<void>`                 | Optional callback function triggered when the bottom is reached |
-| `loading.render`          | `(isLoading: boolean) => JSX.Element` | Optional render function for custom loading indicator           |
+## 🤖 Real World Example: AI Chat
 
-## License
+Check out the [AI Chat demo](https://galangel.github.io/react-scroll-magic/?path=/story/examples-ai-chat--ai-chat) showcasing a complex real-world use case with:
 
-This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
+- 💬 **Question → Response Flow**: Messages with nested reasoning steps
+- 🧠 **Collapsible Reasoning**: Auto-collapse when complete
+- 📜 **Deep Nesting**: Four levels of nesting working seamlessly
 
-## Contributing
+---
+
+## 📄 License
+
+This project is licensed under the Apache License 2.0. See the [LICENSE](LICENSE) file for details.
+
+---
+
+## 🤝 Contributing
 
 Contributions are welcome! Please read the [CONTRIBUTING](CONTRIBUTING.md) guidelines before submitting a pull request.
 
-## Contact
+---
+
+## 💬 Contact
+
+For any questions or feedback, please [open an issue](https://github.com/galangel/react-scroll-magic/issues) on GitHub.
+
+---
+
+<p align="center">
+  Made with 🪄 by <a href="https://github.com/galangel">@galangel</a>
+</p>
 
-For any questions or feedback, please open an issue on GitHub.
+<p align="center">
+  <a href="https://www.buymeacoffee.com/galangel"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" height="50" /></a>
+</p>

package/dist/Scroll/story/ai-chat/AIChatDemo.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+
+export declare const AIChatDemo: React.FC;

package/dist/Scroll/story/ai-chat/components/AgentStepHeader.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { AgentStep } from '../types';
+
+interface AgentStepHeaderProps {
+    step: AgentStep;
+    collapse?: {
+        isOpen: boolean;
+        open: () => void;
+        close: () => void;
+    };
+}
+export declare const AgentStepHeader: React.FC<AgentStepHeaderProps>;
+export {};

package/dist/Scroll/story/ai-chat/components/ChatHeader.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+
+interface ChatHeaderProps {
+    isGenerating: boolean;
+}
+export declare const ChatHeader: React.FC<ChatHeaderProps>;
+export {};

package/dist/Scroll/story/ai-chat/components/ChatInput.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+
+interface ChatInputProps {
+    isGenerating: boolean;
+    onGenerate: () => void;
+}
+export declare const ChatInput: React.FC<ChatInputProps>;
+export {};

package/dist/Scroll/story/ai-chat/components/ChatStyles.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+
+export declare const ChatStyles: React.FC;

package/dist/Scroll/story/ai-chat/components/EmptyState.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+
+export declare const EmptyState: React.FC;

package/dist/Scroll/story/ai-chat/components/OutputLineItem.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+
+interface OutputLineItemProps {
+    text: string;
+    isNew?: boolean;
+    indent?: number;
+}
+export declare const OutputLineItem: React.FC<OutputLineItemProps>;
+export {};

package/dist/Scroll/story/ai-chat/components/QuestionBubble.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+
+interface QuestionBubbleProps {
+    question: string;
+    timestamp: string;
+}
+export declare const QuestionBubble: React.FC<QuestionBubbleProps>;
+export {};

package/dist/Scroll/story/ai-chat/components/ReasoningHeader.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+
+interface ReasoningHeaderProps {
+    messageId: string;
+    messageIsComplete?: boolean;
+    collapse?: {
+        isOpen: boolean;
+        open: () => void;
+        close: () => void;
+    };
+}
+export declare const ReasoningHeader: React.FC<ReasoningHeaderProps>;
+export {};

package/dist/Scroll/story/ai-chat/components/SolutionHeader.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+
+interface SolutionHeaderProps {
+    collapse?: {
+        isOpen: boolean;
+        open: () => void;
+        close: () => void;
+    };
+}
+export declare const SolutionHeader: React.FC<SolutionHeaderProps>;
+export {};

package/dist/Scroll/story/ai-chat/components/index.d.ts

@@ -0,0 +1,9 @@
+export { QuestionBubble } from './QuestionBubble';
+export { AgentStepHeader } from './AgentStepHeader';
+export { ReasoningHeader } from './ReasoningHeader';
+export { SolutionHeader } from './SolutionHeader';
+export { OutputLineItem } from './OutputLineItem';
+export { ChatHeader } from './ChatHeader';
+export { ChatInput } from './ChatInput';
+export { EmptyState } from './EmptyState';
+export { ChatStyles } from './ChatStyles';

package/dist/Scroll/story/ai-chat/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { useAutoScroll } from './use-auto-scroll';
+export { useChatMessages } from './use-chat-messages';

package/dist/Scroll/story/ai-chat/hooks/use-auto-scroll.d.ts

@@ -0,0 +1,13 @@
+interface UseAutoScrollOptions {
+    threshold?: number;
+    scrollIdleDelay?: number;
+    hasContent?: boolean;
+}
+interface UseAutoScrollReturn {
+    scrollContainerRef: React.RefObject<HTMLDivElement>;
+    shouldAutoScroll: () => boolean;
+    scrollToBottom: () => void;
+    forceAutoScrollOn: () => void;
+}
+export declare const useAutoScroll: ({ threshold, scrollIdleDelay, hasContent, }?: UseAutoScrollOptions) => UseAutoScrollReturn;
+export {};

package/dist/Scroll/story/ai-chat/hooks/use-chat-messages.d.ts

@@ -0,0 +1,9 @@
+import { ChatMessage } from '../types';
+
+interface UseChatMessagesReturn {
+    messages: ChatMessage[];
+    isGenerating: boolean;
+    generateResponse: () => void;
+}
+export declare const useChatMessages: () => UseChatMessagesReturn;
+export {};

package/dist/Scroll/story/ai-chat/index.d.ts

@@ -0,0 +1,5 @@
+export { AIChatDemo } from './AIChatDemo';
+export * from './types';
+export * from './components';
+export * from './hooks';
+export * from './utils';

package/dist/Scroll/story/ai-chat/index.stories.d.ts

@@ -0,0 +1,7 @@
+import { Preview, StoryObj } from '@storybook/react';
+import { Scroll } from '../../index';
+
+declare const preview: Preview;
+export default preview;
+type Story = StoryObj<typeof Scroll>;
+export declare const AIChat: Story;

package/dist/Scroll/story/ai-chat/types/index.d.ts

@@ -0,0 +1,22 @@
+export interface OutputLine {
+    id: string;
+    text: string;
+}
+export interface AgentStep {
+    id: string;
+    type: 'thinking' | 'searching' | 'analyzing' | 'solution';
+    title: string;
+    outputs: OutputLine[];
+    isComplete: boolean;
+}
+export interface ChatMessage {
+    id: string;
+    question: string;
+    steps: AgentStep[];
+    isComplete: boolean;
+}
+export interface StepConfig {
+    icon: string;
+    title: string;
+    bgColor: string;
+}

package/dist/Scroll/story/ai-chat/utils/convert-to-items.d.ts

@@ -0,0 +1,4 @@
+import { Items } from '../../../types';
+import { ChatMessage } from '../types';
+
+export declare const convertToItems: (messages: ChatMessage[]) => Items;

package/dist/Scroll/story/ai-chat/utils/generate-output-line.d.ts

@@ -0,0 +1,3 @@
+import { AgentStep } from '../types';
+
+export declare const generateOutputLine: (stepType: AgentStep["type"]) => string;

package/dist/Scroll/story/ai-chat/utils/generate-question.d.ts

@@ -0,0 +1 @@
+export declare const generateQuestion: () => string;

package/dist/Scroll/story/ai-chat/utils/index.d.ts

@@ -0,0 +1,4 @@
+export { generateQuestion } from './generate-question';
+export { generateOutputLine } from './generate-output-line';
+export { getStepConfig } from './step-config';
+export { convertToItems } from './convert-to-items';

package/dist/Scroll/story/ai-chat/utils/step-config.d.ts

@@ -0,0 +1,3 @@
+import { AgentStep, StepConfig } from '../types';
+
+export declare const getStepConfig: (type: AgentStep["type"]) => StepConfig;

package/dist/cjs/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("react/jsx-runtime"),l=require("react"),L=(e=[])=>e.slice(0,e.length-1).map((u,m)=>e.slice(0,m+1)),k=l.createContext({getTopHeadersTotalHeight:()=>0,getBottomHeadersTotalHeight:()=>0,scrollToView:()=>{},setListRef:()=>{},stickTo:"all",scrollBehavior:"smooth",headerBehavior:"none",addHeader:()=>{},headerCollaspeOpen:()=>{},headerCollaspeClose:()=>{},collapsedPaths:[]}),z=()=>l.useContext(k),F=({children:e,stickTo:t="all",scrollBehavior:g="smooth",headerBehavior:u="none"})=>{const[m,f]=l.useState(null),[i,r]=l.useState([]),a=l.useRef({}),C=s=>{const n=a.current[s.join("-")],c=n.nextElementSibling;if(m&&c){const S=window.getComputedStyle(c),d=n.getBoundingClientRect().height,o=p(s),j=parseFloat(S.marginTop)+parseFloat(S.marginBottom)+parseFloat(S.paddingTop)+parseFloat(S.paddingBottom)+parseFloat(S.borderTopWidth)+parseFloat(S.borderBottomWidth),x=Math.ceil(t==="bottom"?c.offsetTop-d:c.offsetTop-o-d+j);m.scrollTo({top:x,behavior:g})}},b=(s,n)=>{a.current[n.join("-")]=s},p=(s=[])=>{const n=L(s),c=n.map(o=>o.join("-"));if(u==="stick"){const o=n.reduce((H,y)=>{const P=y[y.length-1],O=Array.from({length:P},(I,w)=>[...y.slice(0,y.length-1),w]).map(I=>I.join("-"));return H.push(...O),H},[]);c.push(...o);const j=s[s.length-1],x=Array.from({length:j},(H,y)=>[...s.slice(0,s.length-1),y]).map(H=>H.join("-"));c.push(...x)}return c.map(o=>a.current[o]).reduce((o,j)=>{var H;return o+((H=j==null?void 0:j.getBoundingClientRect)==null?void 0:H.call(j).height)||0},0)},T=(s=[])=>{const n=s[s.length-1];return Object.entries(a.current).reduce((d,[o,j])=>{const x=o.split("-").map(Number);return x.length===1&&x[0]>n&&d.push(j),d},[]).reduce((d,o)=>{var x;return d+((x=o==null?void 0:o.getBoundingClientRect)==null?void 0:x.call(o).height)||0},0)},R=s=>{const n=s.join("-");i.includes(n)&&r(c=>c.filter(S=>S!==n))},B=s=>{const n=s.join("-");i.includes(n)||r(c=>[...c,n])};return h.jsx(k.Provider,{value:{addHeader:b,getTopHeadersTotalHeight:p,getBottomHeadersTotalHeight:T,stickTo:t,scrollToView:C,setListRef:f,scrollBehavior:g,headerBehavior:u,headerCollaspeOpen:R,headerCollaspeClose:B,collapsedPaths:i},children:e})},M=({path:e,itemId:t,itemRender:g})=>{const{getTopHeadersTotalHeight:u,getBottomHeadersTotalHeight:m,scrollToView:f,stickTo:i,headerBehavior:r,addHeader:a,headerCollaspeClose:C,headerCollaspeOpen:b,collapsedPaths:p}=z(),T=l.useRef(null),R=()=>{f(e)};l.useEffect(()=>{if(T.current){const d=T.current;a(d,e)}},[T]);const B=l.useMemo(()=>{if(r==="stick"){let d="auto",o="auto";return d=i==="top"||i==="all"?u(e):"auto",o=i==="bottom"||i==="all"?m(e):"auto",{top:d,bottom:o,zIndex:100-e.length}}else if(r==="push")return{top:u(e),zIndex:100-e.length}},[r,e,i]),s=l.useCallback(()=>b(e),[b,e]),n=l.useCallback(()=>C(e),[C,e]),c=l.useMemo(()=>p.includes(e.join("-")),[p]),S=l.useMemo(()=>g({collapse:{open:s,close:n,isOpen:!c}}),[g,c,s,n]);return h.jsx("li",{id:t,onClick:R,className:`scroll-header ${r} `,style:{...B},"aria-label":"Scroll Header",role:"heading","aria-level":e.length,ref:T,children:S})},N=({itemRender:e,itemId:t})=>h.jsx("li",{id:t,role:"listitem","aria-label":"Scroll Item",className:"scroll-item ",children:e({})}),E={visibility:"hidden",position:"absolute",width:"0",height:"0"},v=({headerBehavior:e,items:t,path:g=[],collapsedPaths:u})=>{const m=e==="push"?"section":l.Fragment;return h.jsx("section",{children:t.map((f,i)=>{var a;const r=[...g,i];if((a=f.nestedItems)!=null&&a.length){const C=u.includes(r.join("-"))?E:{};return h.jsxs(m,{children:[h.jsx(M,{path:r,itemRender:f.render,itemId:f.id}),h.jsx("section",{style:C,children:v({items:f.nestedItems,headerBehavior:e,path:r,collapsedPaths:u})})]},r.join("-"))}else return h.jsx(N,{itemRender:f.render,itemId:f.id},r.join("-"))})})},V=({loading:e})=>e?h.jsx("li",{role:"listitem","aria-label":"Scroll Loading",className:`scroll-loading ${e?"loading":""}`}):null,W=({items:e,loading:t})=>{const{setListRef:g,headerBehavior:u,collapsedPaths:m,scrollBehavior:f}=z(),[i,r]=l.useState(!1),a=l.useRef(null);l.useEffect(()=>{a.current&&g(a.current)},[a]);const C=l.useCallback(b=>{if(e.length===0||!(t!=null&&t.onBottomReached))return;const p=b.target;Math.floor(p.scrollHeight-p.scrollTop)<p.clientHeight+10&&(p.dataset.loading||(p.dataset.loading="true",r(!0),t.onBottomReached().finally(()=>{p.dataset.loading="",r(!1)})))},[e.length===0,t==null?void 0:t.onBottomReached]);return h.jsxs("ul",{ref:a,className:"scroll-list",onScroll:t!=null&&t.onBottomReached?C:void 0,style:{scrollBehavior:f},children:[v({items:e,headerBehavior:u,collapsedPaths:m}),t!=null&&t.render?t.render(i):h.jsx(V,{loading:i})]})},_=({stickTo:e,scrollBehavior:t,headerBehavior:g,loading:u,items:m})=>h.jsx(F,{headerBehavior:g,stickTo:e,scrollBehavior:t,children:h.jsx(W,{loading:u,items:m})});exports.Scroll=_;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("react/jsx-runtime"),l=require("react"),w=(e=[])=>e.slice(0,e.length-1).map((u,h)=>e.slice(0,h+1)),k=l.createContext({getTopHeadersTotalHeight:()=>0,getBottomHeadersTotalHeight:()=>0,scrollToView:()=>{},setListRef:()=>{},stickTo:"all",scrollBehavior:"smooth",headerBehavior:"none",addHeader:()=>{},headerCollaspeOpen:()=>{},headerCollaspeClose:()=>{},collapsedPaths:[]}),z=()=>l.useContext(k),F=({children:e,stickTo:t="all",scrollBehavior:g="smooth",headerBehavior:u="none"})=>{const[h,p]=l.useState(null),[i,r]=l.useState([]),a=l.useRef({}),b=s=>{const n=a.current[s.join("-")],c=n.nextElementSibling;if(h&&c){const C=window.getComputedStyle(c),d=n.getBoundingClientRect().height,o=f(s),S=parseFloat(C.marginTop)+parseFloat(C.marginBottom)+parseFloat(C.paddingTop)+parseFloat(C.paddingBottom)+parseFloat(C.borderTopWidth)+parseFloat(C.borderBottomWidth),j=Math.ceil(t==="bottom"?c.offsetTop-d:c.offsetTop-o-d+S);h.scrollTo({top:j,behavior:g})}},x=(s,n)=>{a.current[n.join("-")]=s},f=(s=[])=>{const n=w(s),c=n.map(o=>o.join("-"));if(u==="stick"){const o=n.reduce((H,y)=>{const P=y[y.length-1],O=Array.from({length:P},(I,L)=>[...y.slice(0,y.length-1),L]).map(I=>I.join("-"));return H.push(...O),H},[]);c.push(...o);const S=s[s.length-1],j=Array.from({length:S},(H,y)=>[...s.slice(0,s.length-1),y]).map(H=>H.join("-"));c.push(...j)}return c.map(o=>a.current[o]).reduce((o,S)=>{var H;return o+((H=S==null?void 0:S.getBoundingClientRect)==null?void 0:H.call(S).height)||0},0)},T=(s=[])=>{const n=s[s.length-1];return Object.entries(a.current).reduce((d,[o,S])=>{const j=o.split("-").map(Number);return j.length===1&&j[0]>n&&d.push(S),d},[]).reduce((d,o)=>{var j;return d+((j=o==null?void 0:o.getBoundingClientRect)==null?void 0:j.call(o).height)||0},0)},R=s=>{const n=s.join("-");i.includes(n)&&r(c=>c.filter(C=>C!==n))},B=s=>{const n=s.join("-");i.includes(n)||r(c=>[...c,n])};return m.jsx(k.Provider,{value:{addHeader:x,getTopHeadersTotalHeight:f,getBottomHeadersTotalHeight:T,stickTo:t,scrollToView:b,setListRef:p,scrollBehavior:g,headerBehavior:u,headerCollaspeOpen:R,headerCollaspeClose:B,collapsedPaths:i},children:e})},M=({path:e,itemId:t,itemRender:g})=>{const{getTopHeadersTotalHeight:u,getBottomHeadersTotalHeight:h,scrollToView:p,stickTo:i,headerBehavior:r,addHeader:a,headerCollaspeClose:b,headerCollaspeOpen:x,collapsedPaths:f}=z(),T=l.useRef(null),R=()=>{p(e)};l.useEffect(()=>{if(T.current){const d=T.current;a(d,e)}},[T]);const B=l.useMemo(()=>{if(r==="stick"){let d="auto",o="auto";return d=i==="top"||i==="all"?u(e):"auto",o=i==="bottom"||i==="all"?h(e):"auto",{top:d,bottom:o,zIndex:100-e.length}}else if(r==="push")return{top:u(e),zIndex:100-e.length}},[r,e,i]),s=l.useCallback(()=>x(e),[x,e]),n=l.useCallback(()=>b(e),[b,e]),c=l.useMemo(()=>f.includes(e.join("-")),[f]),C=l.useMemo(()=>g({collapse:{open:s,close:n,isOpen:!c}}),[g,c,s,n]);return m.jsx("li",{id:t,onClick:R,className:`scroll-header ${r} `,style:{...B},"aria-label":"Scroll Header",role:"heading","aria-level":e.length,ref:T,children:C})},N=({itemRender:e,itemId:t})=>m.jsx("li",{id:t,role:"listitem","aria-label":"Scroll Item",className:"scroll-item ",children:e({})}),E={display:"none"},v=({headerBehavior:e,items:t,path:g=[],collapsedPaths:u})=>{const h=e==="push"?"section":l.Fragment;return m.jsx("section",{children:t.map((p,i)=>{var a;const r=[...g,i];if((a=p.nestedItems)!=null&&a.length){const x=u.includes(r.join("-"))?E:void 0;return m.jsxs(h,{children:[m.jsx(M,{path:r,itemRender:p.render,itemId:p.id}),m.jsx("section",{style:x,children:v({items:p.nestedItems,headerBehavior:e,path:r,collapsedPaths:u})})]},r.join("-"))}else return m.jsx(N,{itemRender:p.render,itemId:p.id},r.join("-"))})})},V=({loading:e})=>e?m.jsx("li",{role:"listitem","aria-label":"Scroll Loading",className:`scroll-loading ${e?"loading":""}`}):null,W=({items:e,loading:t})=>{const{setListRef:g,headerBehavior:u,collapsedPaths:h,scrollBehavior:p}=z(),[i,r]=l.useState(!1),a=l.useRef(null);l.useEffect(()=>{a.current&&g(a.current)},[a]);const b=l.useCallback(x=>{if(e.length===0||!(t!=null&&t.onBottomReached))return;const f=x.target;Math.floor(f.scrollHeight-f.scrollTop)<f.clientHeight+10&&(f.dataset.loading||(f.dataset.loading="true",r(!0),t.onBottomReached().finally(()=>{f.dataset.loading="",r(!1)})))},[e.length===0,t==null?void 0:t.onBottomReached]);return m.jsxs("ul",{ref:a,className:"scroll-list",onScroll:t!=null&&t.onBottomReached?b:void 0,style:{scrollBehavior:p},children:[v({items:e,headerBehavior:u,collapsedPaths:h}),t!=null&&t.render?t.render(i):m.jsx(V,{loading:i})]})},_=({stickTo:e,scrollBehavior:t,headerBehavior:g,loading:u,items:h})=>m.jsx(F,{headerBehavior:g,stickTo:e,scrollBehavior:t,children:m.jsx(W,{loading:u,items:h})});exports.Scroll=_;

package/dist/es/index.js

@@ -1,6 +1,6 @@
-import { jsx as C, jsxs as w } from "react/jsx-runtime";
-import B, { useState as P, useRef as k, useEffect as L, useMemo as j, useCallback as z } from "react";
-const W = (e = []) => e.slice(0, e.length - 1).map((d, h) => e.slice(0, h + 1)), O = B.createContext({
+import { jsx as C, jsxs as L } from "react/jsx-runtime";
+import B, { useState as P, useRef as k, useEffect as O, useMemo as j, useCallback as z } from "react";
+const W = (e = []) => e.slice(0, e.length - 1).map((d, m) => e.slice(0, m + 1)), w = B.createContext({
   getTopHeadersTotalHeight: () => 0,
   getBottomHeadersTotalHeight: () => 0,
   scrollToView: () => {
@@ -17,40 +17,40 @@ const W = (e = []) => e.slice(0, e.length - 1).map((d, h) => e.slice(0, h + 1)),
   headerCollaspeClose: () => {
   },
   collapsedPaths: []
-}), F = () => B.useContext(O), _ = ({
+}), F = () => B.useContext(w), _ = ({
   children: e,
   stickTo: t = "all",
   scrollBehavior: u = "smooth",
   headerBehavior: d = "none"
 }) => {
-  const [h, m] = P(null), [c, l] = P([]), i = k({}), S = (o) => {
+  const [m, g] = P(null), [c, l] = P([]), i = k({}), b = (o) => {
     const n = i.current[o.join("-")], r = n.nextElementSibling;
-    if (h && r) {
-      const p = window.getComputedStyle(r), a = n.getBoundingClientRect().height, s = g(o), f = parseFloat(p.marginTop) + parseFloat(p.marginBottom) + parseFloat(p.paddingTop) + parseFloat(p.paddingBottom) + parseFloat(p.borderTopWidth) + parseFloat(p.borderBottomWidth), H = Math.ceil(t === "bottom" ? r.offsetTop - a : r.offsetTop - s - a + f);
-      h.scrollTo({ top: H, behavior: u });
+    if (m && r) {
+      const p = window.getComputedStyle(r), a = n.getBoundingClientRect().height, s = h(o), f = parseFloat(p.marginTop) + parseFloat(p.marginBottom) + parseFloat(p.paddingTop) + parseFloat(p.paddingBottom) + parseFloat(p.borderTopWidth) + parseFloat(p.borderBottomWidth), H = Math.ceil(t === "bottom" ? r.offsetTop - a : r.offsetTop - s - a + f);
+      m.scrollTo({ top: H, behavior: u });
     }
-  }, T = (o, n) => {
+  }, S = (o, n) => {
     i.current[n.join("-")] = o;
-  }, g = (o = []) => {
+  }, h = (o = []) => {
     const n = W(o), r = n.map((s) => s.join("-"));
     if (d === "stick") {
-      const s = n.reduce((b, y) => {
+      const s = n.reduce((T, y) => {
         const M = y[y.length - 1], E = Array.from({ length: M }, (v, V) => [
           ...y.slice(0, y.length - 1),
           V
         ]).map((v) => v.join("-"));
-        return b.push(...E), b;
+        return T.push(...E), T;
       }, []);
       r.push(...s);
-      const f = o[o.length - 1], H = Array.from({ length: f }, (b, y) => [
+      const f = o[o.length - 1], H = Array.from({ length: f }, (T, y) => [
         ...o.slice(0, o.length - 1),
         y
-      ]).map((b) => b.join("-"));
+      ]).map((T) => T.join("-"));
       r.push(...H);
     }
     return r.map((s) => i.current[s]).reduce((s, f) => {
-      var b;
-      return s + ((b = f == null ? void 0 : f.getBoundingClientRect) == null ? void 0 : b.call(f).height) || 0;
+      var T;
+      return s + ((T = f == null ? void 0 : f.getBoundingClientRect) == null ? void 0 : T.call(f).height) || 0;
     }, 0);
   }, x = (o = []) => {
     const n = o[o.length - 1];
@@ -69,15 +69,15 @@ const W = (e = []) => e.slice(0, e.length - 1).map((d, h) => e.slice(0, h + 1)),
     c.includes(n) || l((r) => [...r, n]);
   };
   return /* @__PURE__ */ C(
-    O.Provider,
+    w.Provider,
     {
       value: {
-        addHeader: T,
-        getTopHeadersTotalHeight: g,
+        addHeader: S,
+        getTopHeadersTotalHeight: h,
         getBottomHeadersTotalHeight: x,
         stickTo: t,
-        scrollToView: S,
-        setListRef: m,
+        scrollToView: b,
+        setListRef: g,
         scrollBehavior: u,
         headerBehavior: d,
         headerCollaspeOpen: I,
@@ -90,18 +90,18 @@ const W = (e = []) => e.slice(0, e.length - 1).map((d, h) => e.slice(0, h + 1)),
 }, A = ({ path: e, itemId: t, itemRender: u }) => {
   const {
     getTopHeadersTotalHeight: d,
-    getBottomHeadersTotalHeight: h,
-    scrollToView: m,
+    getBottomHeadersTotalHeight: m,
+    scrollToView: g,
     stickTo: c,
     headerBehavior: l,
     addHeader: i,
-    headerCollaspeClose: S,
-    headerCollaspeOpen: T,
-    collapsedPaths: g
+    headerCollaspeClose: b,
+    headerCollaspeOpen: S,
+    collapsedPaths: h
   } = F(), x = k(null), I = () => {
-    m(e);
+    g(e);
   };
-  L(() => {
+  O(() => {
     if (x.current) {
       const a = x.current;
       i(a, e);
@@ -110,10 +110,10 @@ const W = (e = []) => e.slice(0, e.length - 1).map((d, h) => e.slice(0, h + 1)),
   const R = j(() => {
     if (l === "stick") {
       let a = "auto", s = "auto";
-      return a = c === "top" || c === "all" ? d(e) : "auto", s = c === "bottom" || c === "all" ? h(e) : "auto", { top: a, bottom: s, zIndex: 100 - e.length };
+      return a = c === "top" || c === "all" ? d(e) : "auto", s = c === "bottom" || c === "all" ? m(e) : "auto", { top: a, bottom: s, zIndex: 100 - e.length };
     } else if (l === "push")
       return { top: d(e), zIndex: 100 - e.length };
-  }, [l, e, c]), o = z(() => T(e), [T, e]), n = z(() => S(e), [S, e]), r = j(() => g.includes(e.join("-")), [g]), p = j(
+  }, [l, e, c]), o = z(() => S(e), [S, e]), n = z(() => b(e), [b, e]), r = j(() => h.includes(e.join("-")), [h]), p = j(
     () => u({
       collapse: {
         open: o,
@@ -137,49 +137,49 @@ const W = (e = []) => e.slice(0, e.length - 1).map((d, h) => e.slice(0, h + 1)),
       children: p
     }
   );
-}, $ = ({ itemRender: e, itemId: t }) => /* @__PURE__ */ C("li", { id: t, role: "listitem", "aria-label": "Scroll Item", className: "scroll-item ", children: e({}) }), q = { visibility: "hidden", position: "absolute", width: "0", height: "0" }, N = ({ headerBehavior: e, items: t, path: u = [], collapsedPaths: d }) => {
-  const h = e === "push" ? "section" : B.Fragment;
-  return /* @__PURE__ */ C("section", { children: t.map((m, c) => {
+}, $ = ({ itemRender: e, itemId: t }) => /* @__PURE__ */ C("li", { id: t, role: "listitem", "aria-label": "Scroll Item", className: "scroll-item ", children: e({}) }), q = { display: "none" }, N = ({ headerBehavior: e, items: t, path: u = [], collapsedPaths: d }) => {
+  const m = e === "push" ? "section" : B.Fragment;
+  return /* @__PURE__ */ C("section", { children: t.map((g, c) => {
     var i;
     const l = [...u, c];
-    if ((i = m.nestedItems) != null && i.length) {
-      const S = d.includes(l.join("-")) ? q : {};
-      return /* @__PURE__ */ w(h, { children: [
-        /* @__PURE__ */ C(A, { path: l, itemRender: m.render, itemId: m.id }),
-        /* @__PURE__ */ C("section", { style: S, children: N({ items: m.nestedItems, headerBehavior: e, path: l, collapsedPaths: d }) })
+    if ((i = g.nestedItems) != null && i.length) {
+      const S = d.includes(l.join("-")) ? q : void 0;
+      return /* @__PURE__ */ L(m, { children: [
+        /* @__PURE__ */ C(A, { path: l, itemRender: g.render, itemId: g.id }),
+        /* @__PURE__ */ C("section", { style: S, children: N({ items: g.nestedItems, headerBehavior: e, path: l, collapsedPaths: d }) })
       ] }, l.join("-"));
     } else
-      return /* @__PURE__ */ C($, { itemRender: m.render, itemId: m.id }, l.join("-"));
+      return /* @__PURE__ */ C($, { itemRender: g.render, itemId: g.id }, l.join("-"));
   }) });
 }, D = ({ loading: e }) => e ? /* @__PURE__ */ C("li", { role: "listitem", "aria-label": "Scroll Loading", className: `scroll-loading ${e ? "loading" : ""}` }) : null, G = ({ items: e, loading: t }) => {
-  const { setListRef: u, headerBehavior: d, collapsedPaths: h, scrollBehavior: m } = F(), [c, l] = B.useState(!1), i = k(null);
-  L(() => {
+  const { setListRef: u, headerBehavior: d, collapsedPaths: m, scrollBehavior: g } = F(), [c, l] = B.useState(!1), i = k(null);
+  O(() => {
     i.current && u(i.current);
   }, [i]);
-  const S = z(
-    (T) => {
+  const b = z(
+    (S) => {
       if (e.length === 0 || !(t != null && t.onBottomReached)) return;
-      const g = T.target;
-      Math.floor(g.scrollHeight - g.scrollTop) < g.clientHeight + 10 && (g.dataset.loading || (g.dataset.loading = "true", l(!0), t.onBottomReached().finally(() => {
-        g.dataset.loading = "", l(!1);
+      const h = S.target;
+      Math.floor(h.scrollHeight - h.scrollTop) < h.clientHeight + 10 && (h.dataset.loading || (h.dataset.loading = "true", l(!0), t.onBottomReached().finally(() => {
+        h.dataset.loading = "", l(!1);
       })));
     },
     [e.length === 0, t == null ? void 0 : t.onBottomReached]
   );
-  return /* @__PURE__ */ w(
+  return /* @__PURE__ */ L(
     "ul",
     {
       ref: i,
       className: "scroll-list",
-      onScroll: t != null && t.onBottomReached ? S : void 0,
-      style: { scrollBehavior: m },
+      onScroll: t != null && t.onBottomReached ? b : void 0,
+      style: { scrollBehavior: g },
       children: [
-        N({ items: e, headerBehavior: d, collapsedPaths: h }),
+        N({ items: e, headerBehavior: d, collapsedPaths: m }),
         t != null && t.render ? t.render(c) : /* @__PURE__ */ C(D, { loading: c })
       ]
     }
   );
-}, Q = ({ stickTo: e, scrollBehavior: t, headerBehavior: u, loading: d, items: h }) => /* @__PURE__ */ C(_, { headerBehavior: u, stickTo: e, scrollBehavior: t, children: /* @__PURE__ */ C(G, { loading: d, items: h }) });
+}, Q = ({ stickTo: e, scrollBehavior: t, headerBehavior: u, loading: d, items: m }) => /* @__PURE__ */ C(_, { headerBehavior: u, stickTo: e, scrollBehavior: t, children: /* @__PURE__ */ C(G, { loading: d, items: m }) });
 export {
   Q as Scroll
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@galangel/react-scroll-magic",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Powerful scroll component that feels like magic!",
   "author": "Gal Angel <gal0angel@gmail.com> (@gal.angel)",
   "keywords": [