morphing-scroll 2.5.3 → 2.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +232 -215
  2. package/cjs/index.js +1 -1
  3. package/esm/index.js +1 -1
  4. package/package.json +1 -1
  5. package/types/index.d.ts +95 -48
  6. package/types/intersectionTracker.d.ts +27 -31
  7. package/types/morphScroll.d.ts +142 -156
  8. package/types/resizeTracker.d.ts +17 -21
package/README.md CHANGED
@@ -7,9 +7,6 @@
7
7
  - [About](#-about-)
8
8
  - [Installation](#-installation-)
9
9
  - [API](#-api-)
10
- - [MorphScroll](#-morphscroll)
11
- - [Resizetracker](#-resizetracker)
12
- - [Intersectiontracker](#-intersectiontracker)
13
10
  - [License](#-license-)
14
11
 
15
12
  <h2></h2>
@@ -51,10 +48,7 @@ import Morph from "morphing-scroll";
51
48
  Start using the `MorphScroll` component by defining the required `size` prop. For better precision and control, it's recommended to begin by understanding the `objectsSize` and `progressTrigger` props, which are explained below.
52
49
 
53
50
  > **✦ Note:**
54
- > `MorphScroll` supports both **ESM** and **CommonJS** builds:
55
- >
56
- > - **Modern bundlers** (e.g. _Vite_, _Webpack 5_, _esbuild_) use the **ESM** (`import`) build
57
- > - **Node.js** (and older environments) use the **CommonJS** (`require`) build
51
+ > `MorphScroll` supports both **ESM** (`import`) and **CommonJS** (`require`) builds.
58
52
 
59
53
  <h2></h2>
60
54
 
@@ -62,22 +56,20 @@ Start using the `MorphScroll` component by defining the required `size` prop. Fo
62
56
 
63
57
  <ul><div>
64
58
 
65
- #### ♦ MorphScroll
66
-
67
- `MorphScroll` is the main component of the library responsible for displaying your data.
59
+ <details><summary><b>MorphScroll</b>: <em>main component of the library responsible for displaying your data</em></summary>
68
60
 
69
61
  - #### Props:
70
62
 
71
63
  <ul><div>
72
64
 
73
- ##### **GENERAL SETTINGS**:
65
+ ###### **— GENERAL SETTINGS —**
74
66
 
75
- <details><summary><b><code>className</code></b>: <em>Additional classes.</em></summary><br /><ul><div>
67
+ <details><summary><b><code>className</code></b></summary><br /><ul><div>
76
68
  <b>Type:</b><br />
77
69
  string<br />
78
70
  <br />
79
- <b>Description:</b> <em><br />
80
- This parameter allows you to add additional classes to the component.</em><br />
71
+ <b>Description:</b><em><br />
72
+ allows you to add additional classes to the component.</em><br />
81
73
  <br />
82
74
  <b>Example:</b>
83
75
 
@@ -91,14 +83,14 @@ This parameter allows you to add additional classes to the component.</em><br />
91
83
 
92
84
  <h2></h2>
93
85
 
94
- <details><summary><b><code>children</code></b>: <em>Custom user content.</em></summary><br /><ul><div>
86
+ <details><summary><b><code>children</code></b></summary><br /><ul><div>
95
87
  <b>Type:</b><br />
96
88
  React.ReactNode<br />
97
89
  <br />
98
- <b>Description:</b> <em><br />
99
- This is where you can pass your list elements.<br />
90
+ <b>Description:</b><em><br />
91
+ allows you to add custom content to the component.<br />
100
92
  Make sure to provide unique keys for each list item, as per React's rules. The <code>MorphScroll</code> component ensures that the cells it generates will use the same keys as your list items, allowing it to render the correct cells for the current list.<br />
101
- Additionally, <code>MorphScroll</code> handles a passed <mark>null</mark> value the same way as <mark>undefined</mark>, rendering nothing in both cases.</em><br />
93
+ Additionally, <code>MorphScroll</code> handles a passed <b>null</b> value the same way as <b>undefined</b>, rendering nothing in both cases.</em><br />
102
94
  <br />
103
95
  <b>Example:</b>
104
96
 
@@ -110,23 +102,23 @@ Additionally, <code>MorphScroll</code> handles a passed <mark>null</mark> value
110
102
 
111
103
  <h2></h2>
112
104
 
113
- ##### **SCROLL SETTINGS**:
105
+ ###### **— SCROLL SETTINGS —**
114
106
 
115
- <details><summary><b><code>type</code></b>: <em>Type of progress element.</em></summary><br /><ul><div>
107
+ <details><summary><b><code>type</code></b></summary><br /><ul><div>
116
108
  <b>Type:</b><br />
117
109
  "scroll" | "slider" | "sliderMenu"<br />
118
110
  <br />
119
111
  <b>Default:</b><br />
120
112
  "scroll"<br />
121
113
  <br />
122
- <b>Description:</b> <em><br />
123
- This parameter defines how the provided <code>progressElement</code> behaves within <code>progressTrigger</code> and how you interact with it.<br />
114
+ <b>Description:</b><em><br />
115
+ defines how the provided <code>progressElement</code> behaves within <code>progressTrigger</code> and how you interact with it.<br />
124
116
  <br />
125
- <mark>scroll</mark> - This is the default value and represents a standard scrollbar.<br />
117
+ <b>scroll</b> - This is the default value and represents a standard scrollbar.<br />
126
118
  <br />
127
- <mark>slider</mark> - It displays distinct elements indicating the number of full scroll steps within the list.<br />
119
+ <b>slider</b> - It displays distinct elements indicating the number of full scroll steps within the list.<br />
128
120
  <br />
129
- <mark>sliderMenu</mark> - It behaves like a <code>slider</code>, but now the <code>progressElement</code> is a menu, an you can provide custom buttons as an array in the <code>progressElement</code>.</em><br />
121
+ <b>sliderMenu</b> - It behaves like a <code>slider</code>, but now the <code>progressElement</code> is a menu, an you can provide custom buttons as an array in the <code>progressElement</code>.</em><br />
130
122
  <br />
131
123
  <b>Example:</b>
132
124
 
@@ -142,15 +134,15 @@ This parameter defines how the provided <code>progressElement</code> behaves wit
142
134
 
143
135
  <h2></h2>
144
136
 
145
- <details><summary><b><code>direction</code></b>: <em>Scrolling direction.</em></summary><br /><ul><div>
137
+ <details><summary><b><code>direction</code></b></summary><br /><ul><div>
146
138
  <b>Type:</b><br />
147
139
  "x" | "y" | "hybrid"<br />
148
140
  <br />
149
141
  <b>Default:</b><br />
150
142
  "y"<br />
151
143
  <br />
152
- <b>Description:</b> <em><br />
153
- This parameter changes the scroll or slider type direction based on the provided value.<br />
144
+ <b>Description:</b><em><br />
145
+ changes the scroll or slider type direction based on the provided value.<br />
154
146
  You can set the value to horizontal, vertical or hybrid positions to customize the component according to your needs.</em><br />
155
147
  <br />
156
148
  <b>Example:</b>
@@ -167,9 +159,10 @@ You can set the value to horizontal, vertical or hybrid positions to customize t
167
159
 
168
160
  <h2></h2>
169
161
 
170
- <details><summary><b><code>scrollPosition</code></b>: <em>Scroll position and additional options.</em></summary><br /><ul><div>
162
+ <details><summary><b><code>scrollPosition</code></b></summary><br /><ul><div>
171
163
  <b>Type:</b><br />
172
- {<br />
164
+ number | "end" | (number | "end")[]<br />
165
+ | {<br />
173
166
  <ul>
174
167
  value: number | "end" | (number | "end")[];<br />
175
168
  duration?: number;<br />
@@ -180,29 +173,26 @@ You can set the value to horizontal, vertical or hybrid positions to customize t
180
173
  <b>Default:</b><br />
181
174
  { duration: 200; updater: false }<br />
182
175
  <br />
183
- <b>Description:</b> <em><br />
184
- This parameter allows you to set custom scroll values.<br />
176
+ <b>Description:</b><em><br />
177
+ allows you to set custom scroll values.<br />
185
178
  <br />
186
179
  <code>value</code>:<br />
187
180
  <ul>
188
- <li><mark>number</mark> - Sets the scroll position to a specific value.</li>
189
- <li><mark>"end"</mark> - Scrolls to the bottom of the list upon loading, which is useful for scenarios like chat message lists. When new elements are appended to the list, the scroll position will update automatically. However, to prevent unwanted scrolling when adding elements to the beginning of the list, this property will not trigger.</li>
181
+ <li><b>number</b> - Sets position to a specific value.</li>
182
+ <li><b>"end"</b> - Sets position to the end of the list.</li>
190
183
  </ul>
191
- You can also provide an array of two values to specific positions ( e.g., [ x, y ] axes ) for hybrid directions.</code>.<br />
184
+ You can also provide an array of two values to specific positions ( e.g., [ x, y ] axes ) for hybrid directions.</code><br />
192
185
  <br />
193
186
  <code>duration</code>:<br />
194
- This property determines the animation speed for scrolling in <b>ms</b>.<br />
187
+ property determines the animation speed for scrolling in <b>ms</b>.<br />
195
188
  <br />
196
189
  <code>updater</code>:<br />
197
- This property is a helper for the <code>value</code> property. When setting the same scroll value repeatedly (e.g., clicking a button to scroll to the top), React does not register the update. To force an update, toggle updater within setState, e.g.,<br />
198
- <code>setScroll((prev) => ({ ...prev, value: 0, updater: <b>!prev.updater</b> }))</code></em><br />
190
+ property is a helper for the <code>value</code>. When setting the same scroll value repeatedly, React does not register the update and you can use it to force an update</em><br />
199
191
  <br />
200
192
  <b>Example:</b>
201
193
 
202
194
  ```tsx
203
- <MorphScroll {...props}
204
- scrollPosition={{ value: 100; duration: 100 }}
205
- >
195
+ <MorphScroll {...props} scrollPosition={100}>
206
196
  {children}
207
197
  </MorphScroll>
208
198
  ```
@@ -213,12 +203,12 @@ This property is a helper for the <code>value</code> property. When setting the
213
203
 
214
204
  <h2></h2>
215
205
 
216
- <details><summary><b><code>onScrollValue</code></b>: <em>Callback for scroll value.</em></summary><br /><ul><div>
206
+ <details><summary><b><code>onScrollValue</code></b></summary><br /><ul><div>
217
207
  <b>Type:</b><br />
218
208
  ( left: number, top: number ) => void<br />
219
209
  <br />
220
- <b>Description:</b> <em><br />
221
- This parameter accepts a callback function that is triggered on every scroll event. The callback receives the current scroll top and left position as a number. The return value of the callback can be used to determine custom behavior based on the scroll value.</em><br />
210
+ <b>Description:</b><em><br />
211
+ accepts a callback function that is triggered on every scroll event. The callback receives the current scroll top and left position as a number. The return value of the callback can be used to determine custom behavior based on the scroll value.</em><br />
222
212
  <br />
223
213
  <b>Example:</b>
224
214
 
@@ -236,12 +226,12 @@ This parameter accepts a callback function that is triggered on every scroll eve
236
226
 
237
227
  <h2></h2>
238
228
 
239
- <details><summary><b><code>isScrolling</code></b>: <em>Callback function for scroll status.</em></summary><br /><ul><div>
229
+ <details><summary><b><code>isScrolling</code></b></summary><br /><ul><div>
240
230
  <b>Type:</b><br />
241
231
  ( motion: boolean ) => void<br />
242
232
  <br />
243
- <b>Description:</b> <em><br />
244
- This parameter accepts a callback function that is triggered whenever the scroll status changes. The callback receives a boolean value, where <code>true</code> indicates that scrolling is in progress, and <code>false</code> indicates that scrolling has stopped. This can be useful for triggering additional actions, such as pausing animations or loading indicators based on the scroll state.</em><br />
233
+ <b>Description:</b><em><br />
234
+ accepts a callback function that is triggered whenever the scroll status changes. The callback receives a boolean value, where <code>true</code> indicates that scrolling is in progress, and <code>false</code> indicates that scrolling has stopped. This can be useful for triggering additional actions, such as pausing animations or loading indicators based on the scroll state.</em><br />
245
235
  <br />
246
236
  <b>Example:</b>
247
237
 
@@ -260,23 +250,25 @@ This parameter accepts a callback function that is triggered whenever the scroll
260
250
 
261
251
  <h2></h2>
262
252
 
263
- ##### **VISUAL SETTINGS**:
253
+ ###### **— VISUAL SETTINGS —**
264
254
 
265
- <details><summary><b><code>size</code> REQUIRED</b>: <em>[width, height] dimension of <b>MorphScroll</b>.</em></summary><br /><ul><div>
255
+ <details><summary><b><code>size</code></b> REQUIRED</summary><br /><ul><div>
266
256
  <b>Type:</b><br />
267
257
  number | number[] | "auto"<br />
268
258
  <br />
269
- <b>Description:</b> <em><br />
270
- This parameter sets the width and height of the <code>MorphScroll</code>.<br />
259
+ <b>Description:</b><em><br />
260
+ sets the width and height of the <code>MorphScroll</code>.<br />
271
261
  <br />
272
- <mark>number</mark> - Sets a fixed size in pixels. It can be 1 number if you want to set the same width and height, or an array of 2 numbers.<br />
262
+ <code>number</code>:<br />
263
+ sets a fixed size in pixels. It can be 1 number if you want to set the same width and height, or an array of 2 numbers.<br />
273
264
  <br />
274
- <mark>"auto"</mark> - Adds the <code>ResizeTracker</code> component to measure the width and height of the area where <code>MorphScroll</code> is added. The dimensions will automatically adjust when the container changes.</em><br />
265
+ <code>"auto"</code>:<br />
266
+ adds the <code>ResizeTracker</code> component to measure the width and height of the area where <code>MorphScroll</code> is added. The dimensions will automatically adjust when the container changes.</em><br />
275
267
  <br />
276
268
  <b>Example:</b>
277
269
 
278
270
  ```tsx
279
- <MorphScroll {...props} size={[100, 400]}>
271
+ <MorphScroll {...props} size={100}>
280
272
  {children}
281
273
  </MorphScroll>
282
274
  ```
@@ -287,27 +279,31 @@ This parameter sets the width and height of the <code>MorphScroll</code>.<br />
287
279
 
288
280
  <h2></h2>
289
281
 
290
- <details><summary><b><code>objectsSize</code></b>: <em>[width, height] dimension of cells for each object.</em></summary><br /><ul><div>
282
+ <details><summary><b><code>objectsSize</code></b></summary><br /><ul><div>
291
283
  <b>Type:</b><br />
292
284
  number | "size" | "firstChild" | "none"<br />
293
- | (number | "size" | "firstChild" | "none")[]<br />
285
+ | ( number | "size" | "firstChild" | "none" )[]<br />
294
286
  <br />
295
287
  <b>Default:</b><br />
296
- If you don't provide any value, the default value will be taken from <code>size</code><br />
288
+ If you don't provide any value, the default value will be taken from <code>size</code>.<br />
297
289
  <br />
298
- <b>Description:</b> <em><br />
299
- This parameter defines the [width, height] of cells for each of your objects.<br />
290
+ <b>Description:</b><em><br />
291
+ defines the <b>[width, height]</b> of cells for each of your objects.<br />
300
292
  <br />
301
- <mark>number</mark> - Sets a fixed size for your custom objects.<br />
293
+ <code>number</code>:<br />
294
+ sets a fixed size for your custom objects.<br />
302
295
  <br />
303
- <mark>"size"</mark> - The dimensions will be taken from <code>size</code>.<br />
296
+ <code>"size"</code>:<br />
297
+ the dimensions will be taken from <code>size</code>.<br />
304
298
  <br />
305
- <mark>"firstChild"</mark> - Creates a <code>ResizeTracker</code> wrapper for the first child of your list. This wrapper will calculate the size of the first child, and these dimensions will be applied to all cells in the list.<br />
299
+ <code>"firstChild"</code>:<br />
300
+ creates a <code>ResizeTracker</code> wrapper for the first child of your list. This wrapper will calculate the size of the first child, and these dimensions will be applied to all cells in the list.<br />
306
301
  This can be useful if you want to change the size of objects in your list dynamically, e.g., when reducing the size of the user's screen.<br />
307
302
  <br />
308
- <mark>"none"</mark> - Cells will still be created, but <code>MorphScroll</code> will not calculate their sizes-they will simply wrap your objects.<br />
303
+ <code>"none"</code>:<br />
304
+ cells will still be created, but <code>MorphScroll</code> will not calculate their sizes-they will simply wrap your objects.<br />
309
305
  <br />
310
- <mark>undefined</mark> - If no value is provided, the default behavior is partially inferred from the <code>size</code> prop:
306
+ If no value is provided, the default behavior is partially inferred from the <code>size</code> prop:
311
307
  <ul>
312
308
  <li>When <code>direction="x"</code>, the height from <code>size</code> will be used, behaving as if you had passed <code>objectsSize=["size", "none"]</code>.</li>
313
309
  <li>When <code>direction="y"</code>, the width from <code>size</code> will be used, behaving as if you had passed <code>objectsSize=["none", "size"]</code>.</li>
@@ -316,13 +312,13 @@ This can be useful if you want to change the size of objects in your list dynami
316
312
  ✦ Note:<br />
317
313
  <ul>
318
314
  <li>All types can be used as 1 value, or an array of 2 values.</li>
319
- <li><mark>"none"</mark> is not compatible with <code>render</code>.</li>
315
+ <li><b>"none"</b> is not compatible with <code>render</code>.</li>
320
316
  </ul></em><br />
321
317
  <br />
322
318
  <b>Example:</b>
323
319
 
324
320
  ```tsx
325
- <MorphScroll {...props} objectsSize={[80, 80]}>
321
+ <MorphScroll {...props} objectsSize={[70, 100]}>
326
322
  {children}
327
323
  </MorphScroll>
328
324
  ```
@@ -333,23 +329,23 @@ This can be useful if you want to change the size of objects in your list dynami
333
329
 
334
330
  <h2></h2>
335
331
 
336
- <details><summary><b><code>crossCount</code></b>: <em>Number of cells in each direction.</em></summary><br /><ul><div>
332
+ <details><summary><b><code>crossCount</code></b></summary><br /><ul><div>
337
333
  <b>Type:</b><br />
338
334
  number<br />
339
335
  <br />
340
- <b>Description:</b> <em><br />
341
- This parameter defines the number of <b>columns</b> (<code>direction="y"</code>, <code>direction="hybrid"</code> + <code>elementsDirection="column"</code>) or <b>rows</b> (<code>direction="x"</code>, <code>direction="hybrid"</code> + <code>elementsDirection="row"</code>).<br />
336
+ <b>Description:</b><em><br />
337
+ defines the number of <b>columns</b> or <b>rows</b>.<br />
342
338
  <br />
343
339
  ✦ Note:<br />
344
340
  <ul>
345
- <li>If you use <mark>"x"</mark> or <mark>"y"</mark> for the <code>direction</code> parameter, <code>crossCount</code> only limits the <b>maximum</b> number of columns or rows.</li>
346
- <li>If you use <mark>"hybrid"</mark> for the <code>direction</code> parameter, <code>crossCount</code> defines the <b>exact</b> number of columns or rows in dependence of the <code>elementsDirection</code>, but not exceeding the total number of passed elements.</li>
341
+ <li>If you use <b>"x"</b> or <b>"y"</b> for the <code>direction</code> parameter, <code>crossCount</code> only limits the <b>maximum</b> number of columns or rows.</li>
342
+ <li>If you use <b>"hybrid"</b> for the <code>direction</code> parameter, <code>crossCount</code> defines the <b>exact</b> number of columns or rows in dependence of the <code>elementsDirection</code>, but not exceeding the total number of passed elements.</li>
347
343
  </ul></em><br />
348
344
  <br />
349
345
  <b>Example:</b>
350
346
 
351
347
  ```tsx
352
- <MorphScroll {...props} crossCount={3}>
348
+ <MorphScroll {...props} crossCount={2}>
353
349
  {children}
354
350
  </MorphScroll>
355
351
  ```
@@ -360,15 +356,15 @@ This parameter defines the number of <b>columns</b> (<code>direction="y"</code>,
360
356
 
361
357
  <h2></h2>
362
358
 
363
- <details><summary><b><code>gap</code></b>: <em>Gap between cells.</em></summary><br /><ul><div>
359
+ <details><summary><b><code>gap</code></b></summary><br /><ul><div>
364
360
  <b>Type:</b><br />
365
361
  number | number[]<br />
366
362
  <br />
367
- <b>Description:</b> <em><br />
368
- This parameter allows you to set spacing in pixels between list items for rows and columns.<br />
363
+ <b>Description:</b><em><br />
364
+ allows you to set spacing in pixels between list items for rows and columns.<br />
369
365
  <br />
370
366
  ✦ Note:<br />
371
- It can be 1 number or an array of 2 numbers.</em><br />
367
+ it can be 1 number or an array of 2 numbers.</em><br />
372
368
  <br />
373
369
  <b>Example:</b>
374
370
 
@@ -384,15 +380,15 @@ It can be 1 number or an array of 2 numbers.</em><br />
384
380
 
385
381
  <h2></h2>
386
382
 
387
- <details><summary><b><code>wrapperMargin</code></b>: <em>Margin for the <b>.ms-objects-wrapper</b>.</em></summary><br /><ul><div>
383
+ <details><summary><b><code>wrapperMargin</code></b></summary><br /><ul><div>
388
384
  <b>Type:</b><br />
389
385
  number | number[]<br />
390
386
  <br />
391
- <b>Description:</b> <em><br />
392
- This parameter defines the spacing between the list items and their wrapper, effectively increasing the width or height of the scrollable area.<br />
387
+ <b>Description:</b><em><br />
388
+ defines the spacing between the list items and their wrapper, effectively increasing the width or height of the scrollable area.<br />
393
389
  <br />
394
390
  ✦ Note:<br />
395
- Can be 1 number or an array of 2 or 4 numbers in pixels.</em><br />
391
+ can be 1 number or an array of 2 or 4 numbers in pixels.</em><br />
396
392
  <br />
397
393
  <b>Example:</b>
398
394
 
@@ -408,15 +404,15 @@ Can be 1 number or an array of 2 or 4 numbers in pixels.</em><br />
408
404
 
409
405
  <h2></h2>
410
406
 
411
- <details><summary><b><code>wrapperMinSize</code></b>: <em>Minimum height or width of the <b>.ms-objects-wrapper</b>.</em></summary><br /><ul><div>
407
+ <details><summary><b><code>wrapperMinSize</code></b></summary><br /><ul><div>
412
408
  <b>Type:</b><br />
413
409
  number | "full" | (number | "full")[]<br />
414
410
  <br />
415
- <b>Description:</b> <em><br />
416
- This parameter defines the minimum height or width of the <b>.ms-objects-wrapper</b>, to which CSS properties like <code>min-height</code> or <code>min-width</code> will be applied.<br />
411
+ <b>Description:</b><em><br />
412
+ defines the minimum height or width of the <b>.ms-objects-wrapper</b>, to which CSS properties like <code>min-height</code> or <code>min-width</code> will be applied.<br />
417
413
  <br />
418
414
  ✦ Note:<br />
419
- Can be used as 1 value, or an array of 2 values.</em><br />
415
+ can be used as 1 value, or an array of 2 values.</em><br />
420
416
  <br />
421
417
  <b>Example:</b>
422
418
 
@@ -432,21 +428,24 @@ Can be used as 1 value, or an array of 2 values.</em><br />
432
428
 
433
429
  <h2></h2>
434
430
 
435
- <details><summary><b><code>wrapperAlign</code></b>: <em>[horizontal, vertical] aligns your content when it is smaller than the <code>size</code>.</em></summary><br /><ul><div>
431
+ <details><summary><b><code>wrapperAlign</code></b></summary><br /><ul><div>
436
432
  <b>Type:</b><br />
437
433
  "start" | "center" | "end"<br />
438
434
  | ("start" | "center" | "end")[]<br />
439
435
  <br />
440
- <b>Description:</b> <em><br />
441
- This parameter aligns the <b>.ms-objects-wrapper</b>, which contains all the provided elements, relative to the scroll or the <code>size</code>.<br />
436
+ <b>Default:</b><br />
437
+ "start"<br />
438
+ <br />
439
+ <b>Description:</b><em><br />
440
+ aligns the <b>.ms-objects-wrapper</b>, which contains all the provided elements, relative to the scroll or the <code>size</code>.<br />
442
441
  <br />
443
442
  ✦ Note:<br />
444
- Use 1 value to align one or both axes, or an array of 2 values to align both axes.</em><br />
443
+ use 1 value to align one or both axes, or an array of 2 values to align both axes.</em><br />
445
444
  <br />
446
445
  <b>Example:</b>
447
446
 
448
447
  ```tsx
449
- <MorphScroll {...props} wrapperAlign={["center", "center"]}>
448
+ <MorphScroll {...props} wrapperAlign="center">
450
449
  {children}
451
450
  </MorphScroll>
452
451
  ```
@@ -457,10 +456,13 @@ Use 1 value to align one or both axes, or an array of 2 values to align both axe
457
456
 
458
457
  <h2></h2>
459
458
 
460
- <details><summary><b><code>elementsAlign</code></b>: <em>Aligns the objects inside <code>MorphScroll</code>.</em></summary><br /><ul><div>
459
+ <details><summary><b><code>elementsAlign</code></b></summary><br /><ul><div>
461
460
  <b>Type:</b><br />
462
461
  "start" | "center" | "end"<br />
463
462
  <br />
463
+ <b>Default:</b><br />
464
+ "start"<br />
465
+ <br />
464
466
  <b>Example:</b>
465
467
 
466
468
  ```tsx
@@ -475,15 +477,15 @@ Use 1 value to align one or both axes, or an array of 2 values to align both axe
475
477
 
476
478
  <h2></h2>
477
479
 
478
- <details><summary><b><code>elementsDirection</code></b>: <em>Direction of the provided elements.</em></summary><br /><ul><div>
480
+ <details><summary><b><code>elementsDirection</code></b></summary><br /><ul><div>
479
481
  <b>Type:</b><br />
480
482
  "row" | "column"<br />
481
483
  <br />
482
484
  <b>Default:</b><br />
483
485
  "row"<br />
484
486
  <br />
485
- <b>Description:</b> <em><br />
486
- This parameter changes the order of the provided elements based on the provided value.</em><br />
487
+ <b>Description:</b><em><br />
488
+ changes the order of the provided elements based on the provided value.</em><br />
487
489
  <br />
488
490
  <b>Example:</b>
489
491
 
@@ -499,23 +501,23 @@ This parameter changes the order of the provided elements based on the provided
499
501
 
500
502
  <h2></h2>
501
503
 
502
- <details><summary><b><code>edgeGradient</code></b>: <em>Gradient overlay at the edges of the scroll area.</em></summary><br /><ul><div>
504
+ <details><summary><b><code>edgeGradient</code></b></summary><br /><ul><div>
503
505
  <b>Type:</b><br />
504
- boolean | { color?: string; size?: number }<br />
506
+ boolean | string | { color?: string; size?: number }<br />
505
507
  <br />
506
508
  <b>Default:</b><br />
507
509
  { size: 40 }<br />
508
510
  <br />
509
- <b>Description:</b> <em><br />
510
- This parameter creates two edge elements responsible for darkening the edges of the scroll when it overflows.<br />
511
+ <b>Description:</b><em><br />
512
+ parameter creates two edge elements responsible for darkening the edges of the scroll when it overflows.<br />
511
513
  <br />
512
514
  <code>color</code>:<br />
513
- The property accepts any valid color format.
515
+ property accepts any valid color format.
514
516
  If you provide it, the library will generate a gradient transitioning from the custom color to transparent.
515
- If you provide just <mark>true</mark>, the edge elements will have no color, allowing for custom styling via CSS classes.<br />
517
+ If you provide just <b>true</b>, the edge elements will have no color, allowing for custom styling via CSS class <code>.ms-edge</code>.<br />
516
518
  <br />
517
519
  <code>size</code>:<br />
518
- The property changes the height for horizontal and width for vertical <b>.ms-edge</b>.</em><br />
520
+ property changes the height of the edges for the horizontal and the width of the edges for the vertical.</em><br />
519
521
  <br />
520
522
  <b>Example:</b>
521
523
 
@@ -534,49 +536,64 @@ The property changes the height for horizontal and width for vertical <b>.ms-edg
534
536
 
535
537
  <h2></h2>
536
538
 
537
- ##### **PROGRESSBAR**:
538
-
539
- <details><summary><b><code>progressTrigger</code></b>: <em>Triggers for the scroll progress.</em></summary><br /><ul><div>
539
+ <details><summary><b><code>progressTrigger</code></b></summary><br /><ul><div>
540
540
  <b>Type:</b><br />
541
541
  {<br />
542
542
  <ul>
543
543
  wheel?: boolean | { changeDirection?: boolean; changeDirectionKey?: string };<br />
544
544
  content?: boolean;<br />
545
545
  progressElement?: boolean | React.ReactNode | React.ReactNode[];<br />
546
- arrows?: boolean | { size?: number; element?: React.ReactNode };<br />
546
+ arrows?: boolean | React.ReactNode<br />
547
+ | {<br />
548
+ <ul>
549
+ element?: React.ReactNode;<br />
550
+ size?: number;<br />
551
+ contentReduce?: boolean;<br />
552
+ loop?: boolean;<br />
553
+ </ul>
554
+ };<br />
547
555
  </ul>
548
556
  }<br />
549
557
  <br />
550
558
  <b>Default:</b><br />
551
559
  { wheel: true }<br />
552
560
  <br />
553
- <b>Description:</b> <em><br />
554
- This is one of the most important properties, allowing you to define how users interact with the progress bar and customize its appearance.<br />
561
+ <b>Description:</b><em><br />
562
+ this is one of the most important properties, allowing you to define how users interact with the progress bar and customize its appearance.<br />
563
+ <br />
564
+ <code><b>wheel</b></code>:<br />
565
+ determines whether the progress bar responds to mouse wheel scrolling<br />
555
566
  <br />
556
- <code>wheel</code>:<br />
557
- Determines whether the progress bar responds to mouse wheel scrolling.<br />
558
- If you use <code>direction="hybrid"</code>, you can use:
567
+ If you use <code>direction="hybrid"</code>, you can use:<br />
559
568
  <ul>
560
- <li><code>changeDirection</code>: allows switching the scroll direction with the mouse wheel.</li>
561
- <li><code>changeDirectionKey</code>: enables switching the scroll direction by pressing a specific key (default: <mark>"KeyX"</mark>).<br />
562
- To disable this behavior, pass an empty string.<br />
563
- <a href="https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_code_values">more about keys</a></li>
569
+ <li><code>changeDirection</code>: allows switching the scroll direction with the mouse wheel.</li><br />
570
+ <li><code>changeDirectionKey</code>: enables switching the scroll direction by pressing a specific key (default: <b>"KeyX"</b>).<br />
571
+ To disable this behavior, pass an empty string.<br />
572
+ <a href="https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_code_values">more about keys</a></li>
564
573
  </ul>
565
574
  <br />
566
- <code>content</code>:<br />
567
- This parameter enables interaction by clicking and dragging anywhere within the scrollable content to move it.<br />
575
+ <code><b>content</b></code>:<br />
576
+ enables interaction by clicking and dragging anywhere within the scrollable content to move it.<br />
568
577
  <br />
569
- <code>progressElement</code>:<br />
570
- This parameter determines how the scroll progress is managed.<br />
578
+ <code><b>progressElement</b></code>:<br />
579
+ determines how the scroll progress is managed<br />
571
580
  <br />
572
581
  <ul>
573
- <li>When using <code>type="scroll"</code>, you can provide a custom scroll element. If it's not ready yet, simply set <mark>true</mark> instead — this will fall back to the browser’s default scrollbar.</li><br />
582
+ <li>When using <code>type="scroll"</code>, you can provide a custom scroll element. If it's not ready yet, simply set <b>true</b> instead — this will fall back to the browser’s default scrollbar.</li><br />
574
583
  <li>When using <code>type="slider"</code>, a <b>.ms-slider</b> element is automatically generated. It contains multiple <b>ms-slider-element</b> elements that visually represent the scroll progress. One of them will always have the <code>active</code> class depending on the current position.</li><br />
575
- <li>When using <code>type="sliderMenu"</code>, everything is the same as with <mark>"slider"</mark> but you can pass an array of custom buttons to <code>progressElement</code>. These buttons act as a navigation menu, allowing users to jump to specific sections.</li>
584
+ <li>When using <code>type="sliderMenu"</code>, everything is the same as with <b>"slider"</b> but you can pass an array of custom buttons to <code>progressElement</code>. These buttons act as a navigation menu, allowing users to jump to specific sections.</li>
576
585
  </ul>
577
586
  <br />
578
- <code>arrows</code>:<br />
579
- This parameter allows you to add custom arrows to the progress bar. You can either specify a <code>size</code> for the arrows and provide a custom element.<br />
587
+ <code><b>arrows</b></code>:<br />
588
+ allows you to add custom arrows to the progress bar<br />
589
+ <br />
590
+ <ul>
591
+ <li><code>element</code>: the custom arrow element.</li><br />
592
+ <li><code>size</code>: adds a custom size to the arrow.</li><br />
593
+ <li><code>contentReduce</code>: this parameter reduces the size of the scroll content by the arrow size.</li><br />
594
+ <li><code>loop</code>: enables infinite scrolling.</li>
595
+ </ul>
596
+ You can either specify a <code>size</code> for the arrows and provide a custom element.
580
597
  <br />
581
598
  ✦ Note:<br />
582
599
  <ul>
@@ -601,21 +618,18 @@ This parameter allows you to add custom arrows to the progress bar. You can eith
601
618
 
602
619
  <h2></h2>
603
620
 
604
- <details><summary><b><code>progressReverse</code></b>: <em>Reverse your progress bar position.</em></summary><br /><ul><div>
621
+ <details><summary><b><code>progressReverse</code></b></summary><br /><ul><div>
605
622
  <b>Type:</b><br />
606
623
  boolean | boolean[]<br />
607
624
  <br />
608
625
  <b>Default:</b><br />
609
626
  false<br />
610
627
  <br />
611
- <b>Description:</b> <em><br />
612
- This parameter changes the position of the progress bar based on the direction property.<br />
628
+ <b>Description:</b><em><br />
629
+ this parameter changes the position of the progress bar in the opposite direction and depends on the <code>direction</code> property.<br />
613
630
  <br />
614
- <ul>
615
- <li>If <code>direction="x"</code>, the progress bar appears on the left by default and moves to the right when set to <mark>true</mark>.</li>
616
- <li>If <code>direction="y"</code>, the progress bar appears at the bottom by default and moves to the top when set to <mark>true</mark>.</li>
617
- <li>If <code>direction="hybrid"</code>, both horizontal and vertical progress bars are used with the same logic as above. And in this case, you can also pass an array of booleans to control each bar individually.</li>
618
- </ul></em><br />
631
+ ✦ Note:<br />
632
+ use it like an array to set different values for each direction when using <code>direction="hybrid"</code>.</em><br />
619
633
  <br />
620
634
  <b>Example:</b>
621
635
 
@@ -631,15 +645,15 @@ This parameter changes the position of the progress bar based on the direction p
631
645
 
632
646
  <h2></h2>
633
647
 
634
- <details><summary><b><code>scrollBarOnHover</code></b>: <em>Progress bar hover visibility.</em></summary><br /><ul><div>
648
+ <details><summary><b><code>scrollBarOnHover</code></b></summary><br /><ul><div>
635
649
  <b>Type:</b><br />
636
650
  boolean<br />
637
651
  <br />
638
652
  <b>Default:</b><br />
639
653
  false<br />
640
654
  <br />
641
- <b>Description:</b> <em><br />
642
- This parameter controls the visibility of the progress bar regardless of the <code>type</code> value.<br />
655
+ <b>Description:</b><em><br />
656
+ this parameter controls the visibility of the progress bar regardless of the <code>type</code> value.<br />
643
657
  When you use it, the <b>"hover"</b> class is applied to the <b>.ms-bar</b> when the cursor is over it (or the finger touches it on touchscreens), and <b>"leave"</b> is applied when it is no longer hovered. This allows you to easily customize its appearance on interaction.</em><br />
644
658
  <br />
645
659
  <b>Example:</b>
@@ -656,16 +670,16 @@ When you use it, the <b>"hover"</b> class is applied to the <b>.ms-bar</b> when
656
670
 
657
671
  <h2></h2>
658
672
 
659
- <details><summary><b><code>scrollBarEdge</code></b>: <em>Scroll bar margin at its edges.</em></summary><br /><ul><div>
673
+ <details><summary><b><code>scrollBarEdge</code></b></summary><br /><ul><div>
660
674
  <b>Type:</b><br />
661
675
  number | number[]<br />
662
676
  <br />
663
- <b>Description:</b> <em><br />
664
- Defines the margin (in pixels) applied to the edges of the scroll bar, effectively reducing its size.<br />
677
+ <b>Description:</b><em><br />
678
+ defines the margin (in pixels) applied to the edges of the scroll bar, effectively reducing its size.<br />
665
679
  If you use <code>direction="hybrid"</code>, you can also pass an array of numbers to control each bar individually.<br />
666
680
  <br />
667
681
  ✦ Note:<br />
668
- This parameter is only used when <code>type="scroll"</code> is set.</em><br />
682
+ this parameter is only used when <code>type="scroll"</code> is set.</em><br />
669
683
  <br />
670
684
  <b>Example:</b>
671
685
 
@@ -681,18 +695,18 @@ This parameter is only used when <code>type="scroll"</code> is set.</em><br />
681
695
 
682
696
  <h2></h2>
683
697
 
684
- <details><summary><b><code>thumbMinSize</code></b>: <em>Scroll bar thumb minimum size.</em></summary><br /><ul><div>
698
+ <details><summary><b><code>thumbMinSize</code></b></summary><br /><ul><div>
685
699
  <b>Type:</b><br />
686
700
  number<br />
687
701
  <br />
688
702
  <b>Default:</b><br />
689
703
  30<br />
690
704
  <br />
691
- <b>Description:</b> <em><br />
692
- If the scrollable content is long, this option sets the minimum size (in pixels) of the scroll bar thumb automatically.<br />
705
+ <b>Description:</b><em><br />
706
+ if the scrollable content is long, this option sets the minimum size (in pixels) of the scroll bar thumb automatically.<br />
693
707
  <br />
694
708
  ✦ Note:<br />
695
- This parameter is only used when <code>type="scroll"</code> is set.</em><br />
709
+ this parameter is only used when <code>type="scroll"</code> is set.</em><br />
696
710
  <br />
697
711
  <b>Example:</b>
698
712
 
@@ -708,11 +722,12 @@ This parameter is only used when <code>type="scroll"</code> is set.</em><br />
708
722
 
709
723
  <h2></h2>
710
724
 
711
- ##### **OPTIMIZATIONS**:
725
+ ###### **— OPTIMIZATIONS —**
712
726
 
713
- <details><summary><b><code>render</code></b>: <em>Rendering strategy for performance optimization.</em></summary><br /><ul><div>
727
+ <details><summary><b><code>render</code></b></summary><br /><ul><div>
714
728
  <b>Type:</b><br />
715
- {<br />
729
+ "lazy" | "virtual"<br />
730
+ | {<br />
716
731
  <ul>
717
732
  type: "lazy" | "virtual";<br />
718
733
  rootMargin?: number | number[];<br />
@@ -720,21 +735,21 @@ This parameter is only used when <code>type="scroll"</code> is set.</em><br />
720
735
  </ul>
721
736
  }<br />
722
737
  <br />
723
- <b>Description:</b> <em><br />
724
- This parameter adds a gradual rendering of the content as it enters the viewport.<br />
738
+ <b>Description:</b><em><br />
739
+ this parameter adds a gradual rendering of the content as it enters the viewport.<br />
725
740
  When used, a container is created for each scrollable object, and its absolute positioning is calculated based on scroll position and area dimensions.<br />
726
741
  <br />
727
742
  <code>type</code>:<br />
728
743
  <ul>
729
- <li>With <mark>"lazy"</mark>, content is not deleted when it leaves the viewport.</li>
730
- <li>With <mark>"virtual"</mark>, content is deleted when it leaves the viewport.</li>
744
+ <li><b>"lazy"</b> - content is not deleted when it leaves the viewport.</li>
745
+ <li><b>"virtual"</b> - content is deleted when it leaves the viewport.</li>
731
746
  </ul>
732
747
  <br />
733
748
  <code>rootMargin</code>:<br />
734
- This property controls the threshold for loading content. It can be a single number or an array of 2 <b>[ top-bottom, left-right ]</b> or 4 <b>[ top, right, bottom, left ]</b> numbers. It is the distance for loading from the root element ( <b>.ms-element</b> ) in pixels.<br />
749
+ controls the threshold for loading content. It can be a single number or an array of 2 or 4 numbers. It is the distance for loading from the root element ( <b>.ms-element</b> ) in pixels.<br />
735
750
  <br />
736
751
  <code>stopLoadOnScroll</code>:<br />
737
- This property controls whether to stop loading content when scrolling.<br />
752
+ controls whether to stop loading content when scrolling.<br />
738
753
  <br />
739
754
  ✦ Note:<br />
740
755
  <code>render</code> is not compatible with <code>objectsSize: "none"</code>.</em><br />
@@ -742,7 +757,7 @@ This property controls whether to stop loading content when scrolling.<br />
742
757
  <b>Example:</b>
743
758
 
744
759
  ```tsx
745
- <MorphScroll {...props} render={{ type: "virtual" }}>
760
+ <MorphScroll {...props} render="virtual">
746
761
  {children}
747
762
  </MorphScroll>
748
763
  ```
@@ -753,34 +768,34 @@ This property controls whether to stop loading content when scrolling.<br />
753
768
 
754
769
  <h2></h2>
755
770
 
756
- <details><summary><b><code>emptyElements</code></b>: <em>Handling of empty scroll elements.</em></summary><br /><ul><div>
771
+ <details><summary><b><code>emptyElements</code></b></summary><br /><ul><div>
757
772
  <b>Type:</b><br />
758
773
  {<br />
759
774
  <ul>
760
775
  mode: "clear" | "fallback" | { fallback: React.ReactNode };<br />
761
- clickTrigger?: { selector: string; delay?: number };<br />
776
+ clickTrigger?: string | { selector: string; delay?: number };<br />
762
777
  </ul>
763
778
  }<br />
764
779
  <br />
765
- <b>Description:</b> <em><br />
766
- This option will allow you to delete or replace empty list items during the first rendering, or to start this process by clicking.<br />
780
+ <b>Description:</b><em><br />
781
+ this option will allow you to delete or replace empty list items during the first rendering, or to start this process by clicking<br />
767
782
  <br />
768
783
  <code>mode</code>:<br />
769
784
  <ul>
770
- <li><mark>"clear"</mark> – automatically removes empty elements.</li>
771
- <li><mark>"fallback"</mark> – replaces empty elements with the value from the <code>fallback</code> props.</li>
772
- <li><mark>{ fallback: React.ReactNode }</mark> – if you need a different element than in <code>fallback</code> to replace empty elements, you can use this option.</li>
785
+ <li><b>"clear"</b> – automatically removes empty elements.</li>
786
+ <li><b>"fallback"</b> – replaces empty elements with the value from the <code>fallback</code> props.</li>
787
+ <li><b>{ fallback: React.ReactNode }</b> – if you need a different element than in <code>fallback</code> to replace empty elements, you can use this option.</li>
773
788
  </ul>
774
789
  <br />
775
790
  <code>clickTrigger</code>:<br />
776
- In case if elements are removed via a click action, use this option. It accepts an object with a <code>selector</code> ( such as a delete button’s class ) and <code>delay</code> ( in <b>ms</b> ) to wait before removing the elements.<br />
791
+ in case if elements are removed via a click action, use this option. It accepts an object with a <code>selector</code> ( such as a delete button’s class ) and <code>delay</code> ( in <b>ms</b> ) to wait before removing the elements.<br />
777
792
  <br />
778
793
  ✦ Note:<br />
779
794
  <ul>
780
795
  <li>The cleanup runs on the initial render, when the number of elements changes, on scroll, and on click if you use <code>clickTrigger</code>.</li>
781
796
  <li>If you use <code>clickTrigger</code>:<br />
782
797
  - consider increasing <code>delay</code>, since the cleanup may run before removal.<br />
783
- - the wrapper <code>ms-object-box</code> also gets the <code>remove</code> class, which you can use e.g. for fade-out animations.</li>
798
+ - the wrapper <code>.ms-object-box</code> also gets the <code>remove</code> class, which you can use e.g. for fade-out animations.</li>
784
799
  </ul></em>
785
800
  <br />
786
801
  <b>Example:</b>
@@ -790,7 +805,7 @@ In case if elements are removed via a click action, use this option. It accepts
790
805
  {...props}
791
806
  emptyElements={{
792
807
  mode: "clear",
793
- clickTrigger: { selector: ".close-button" },
808
+ clickTrigger: ".close-button",
794
809
  }}
795
810
  >
796
811
  {children}
@@ -803,15 +818,15 @@ In case if elements are removed via a click action, use this option. It accepts
803
818
 
804
819
  <h2></h2>
805
820
 
806
- <details><summary><b><code>suspending</code></b>: <em>Adds React Suspense.</em></summary><br /><ul><div>
821
+ <details><summary><b><code>suspending</code></b></summary><br /><ul><div>
807
822
  <b>Type:</b><br />
808
823
  boolean<br />
809
824
  <br />
810
825
  <b>Default:</b><br />
811
826
  false<br />
812
827
  <br />
813
- <b>Description:</b> <em><br />
814
- This parameter adds React Suspense to the MorphScroll component for asynchronous rendering.</em><br />
828
+ <b>Description:</b><em><br />
829
+ adds React Suspense to the MorphScroll component for async rendering.</em><br />
815
830
  <br />
816
831
  <b>Example:</b>
817
832
 
@@ -825,17 +840,18 @@ This parameter adds React Suspense to the MorphScroll component for asynchronous
825
840
 
826
841
  <h2></h2>
827
842
 
828
- <details><summary><b><code>fallback</code></b>: <em>Fallback element.</em></summary><br /><ul><div>
843
+ <details><summary><b><code>fallback</code></b></summary><br /><ul><div>
829
844
  <b>Type:</b><br />
830
845
  React.ReactNode<br />
831
846
  <br />
832
- <b>Description:</b> <em><br />
833
- This parameter sets the fallback element to display during loading or placeholder.<br />
847
+ <b>Description:</b><em><br />
848
+ sets the fallback element to display during loading or placeholder.<br />
849
+ <br />
834
850
  It will be used when:
835
851
  <ul>
836
- <li><code>suspending</code> is set to <mark>true</mark>.</li>
837
- <li><code>render.stopLoadOnScroll</code> is set to <mark>true</mark>.</li>
838
- <li><code>emptyElements.mode</code> is set to <mark>"fallback"</mark>.</li>
852
+ <li><code>suspending</code> is set to <b>true</b>.</li>
853
+ <li><code>render.stopLoadOnScroll</code> is set to <b>true</b>.</li>
854
+ <li><code>emptyElements.mode</code> is set to <b>"fallback"</b>.</li>
839
855
  </ul></em><br />
840
856
  <br />
841
857
  <b>Example:</b>
@@ -849,23 +865,22 @@ It will be used when:
849
865
  </div></ul></details>
850
866
 
851
867
  </div></ul>
868
+ </details>
852
869
 
853
870
  <h2></h2>
854
871
 
855
- #### ♦ ResizeTracker
856
-
857
- `ResizeTracker` is a React component that monitors changes to an element’s size. It provides updated dimensions via a render-prop function whenever the observed element is resized.
872
+ <details><summary><b>ResizeTracker</b>: <em>component that monitors changes to an element’s size</em></summary>
858
873
 
859
874
  - #### Props:
860
875
 
861
876
  <ul><div>
862
877
 
863
- <details><summary><b><code>className</code></b>: <em>Additional classes.</em></summary><br /><ul><div>
878
+ <details><summary><b><code>className</code></b></summary><br /><ul><div>
864
879
  <b>Type:</b><br />
865
880
  string<br />
866
881
  <br />
867
- <b>Description:</b> <em><br />
868
- This parameter allows you to add additional classes to the component.</em><br />
882
+ <b>Description:</b><em><br />
883
+ allows you to add additional classes to the component.</em><br />
869
884
  <br />
870
885
  <b>Example:</b>
871
886
 
@@ -877,12 +892,12 @@ This parameter allows you to add additional classes to the component.</em><br />
877
892
 
878
893
  <h2></h2>
879
894
 
880
- <details><summary><b><code>children</code></b>: <em>Custom user content.</em></summary><br /><ul><div>
895
+ <details><summary><b><code>children</code></b></summary><br /><ul><div>
881
896
  <b>Type:</b><br />
882
897
  React.ReactNode<br />
883
898
  <br />
884
- <b>Description:</b> <em><br />
885
- This parameter allows you to add custom content to the component.</em><br />
899
+ <b>Description:</b><em><br />
900
+ allows you to add custom content to the component.</em><br />
886
901
  <br />
887
902
  <b>Example:</b>
888
903
 
@@ -894,7 +909,7 @@ This parameter allows you to add custom content to the component.</em><br />
894
909
 
895
910
  <h2></h2>
896
911
 
897
- <details><summary><b><code>style</code></b>: <em>Applies inline styles to the container.</em></summary><br /><ul><div>
912
+ <details><summary><b><code>style</code></b></summary><br /><ul><div>
898
913
  <b>Type:</b><br />
899
914
  React.CSSProperties<br />
900
915
  <br />
@@ -908,20 +923,20 @@ React.CSSProperties<br />
908
923
 
909
924
  <h2></h2>
910
925
 
911
- <details><summary><b><code>measure</code></b>: <em>Defines the measurement strategy.</em></summary><br /><ul><div>
926
+ <details><summary><b><code>measure</code></b></summary><br /><ul><div>
912
927
  <b>Type:</b><br />
913
928
  "inner" | "outer" | "all"<br />
914
929
  <br />
915
930
  <b>Default:</b><br />
916
931
  "inner"<br />
917
932
  <br />
918
- <b>Description:</b><br />
919
- <em>This prop determines what is being measured by automatically applying inline styles that affect width and height.<br />
933
+ <b>Description:</b><em><br />
934
+ determines what is being measured by automatically applying inline styles that affect width and height.<br />
920
935
  <br />
921
936
  <ul>
922
- <li><mark>"inner"</mark> sets <code>width: "max-content"</code> and <code>height: "max-content"</code>, measuring the size of child elements.</li>
923
- <li><mark>"outer"</mark> measures the parent element by setting <code>minWidth: "100%"</code> and <code>minHeight: "100%"</code>.</li>
924
- <li><mark>"all"</mark> value combines the styles of both <code>"inner"</code> and <code>"outer"</code>, allowing measurement of both the parent and child elements.</li>
937
+ <li><b>"inner"</b> sets <code>width: "max-content"</code> and <code>height: "max-content"</code>, measuring the size of child elements.</li>
938
+ <li><b>"outer"</b> measures the parent element by setting <code>minWidth: "100%"</code> and <code>minHeight: "100%"</code>.</li>
939
+ <li><b>"all"</b> value combines the styles of both <code>"inner"</code> and <code>"outer"</code>, allowing measurement of both the parent and child elements.</li>
925
940
  </ul>
926
941
  <br />
927
942
  ✦ Note: <br />
@@ -937,12 +952,12 @@ Be cautious when overriding styles via the <code>style</code> prop, as it may in
937
952
 
938
953
  <h2></h2>
939
954
 
940
- <details><summary><b><code>onResize</code></b>: <em>Callback triggered on size changes.</em></summary><br /><ul><div>
955
+ <details><summary><b><code>onResize</code></b></summary><br /><ul><div>
941
956
  <b>Type:</b><br />
942
957
  (rect: Partial<DOMRectReadOnly>) => void<br />
943
958
  <br />
944
- <b>Description:</b><br />
945
- <em>A callback function that is triggered whenever the observed element's dimensions change.<br />
959
+ <b>Description:</b><em><br />
960
+ callback function that is triggered whenever the observed element's dimensions change.<br />
946
961
  The function receives an object containing the updated size properties.</em><br />
947
962
  <br />
948
963
  <b>Example:</b>
@@ -963,26 +978,26 @@ The function receives an object containing the updated size properties.</em><br
963
978
 
964
979
  </div></ul>
965
980
 
966
- - #### Link:
981
+ - #### Links:
967
982
 
968
983
  [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
969
984
 
970
- <h2></h2>
985
+ </details>
971
986
 
972
- #### ♦ IntersectionTracker
987
+ <h2></h2>
973
988
 
974
- `IntersectionTracker` is a React component for tracking the intersection of an element with the viewport.
989
+ <details><summary><b>IntersectionTracker</b>: <em>component for tracking the intersection of an element with the viewport</em></summary>
975
990
 
976
991
  - #### Props:
977
992
 
978
993
  <ul><div>
979
994
 
980
- <details><summary><b><code>className</code></b>: <em>Additional classes.</em></summary><br /><ul><div>
995
+ <details><summary><b><code>className</code></b></summary><br /><ul><div>
981
996
  <b>Type:</b><br />
982
997
  string<br />
983
998
  <br />
984
- <b>Description:</b> <em><br />
985
- This parameter allows you to add additional classes to the component.</em><br />
999
+ <b>Description:</b><em><br />
1000
+ allows you to add additional classes to the component.</em><br />
986
1001
  <br />
987
1002
  <b>Example:</b>
988
1003
 
@@ -994,7 +1009,7 @@ This parameter allows you to add additional classes to the component.</em><br />
994
1009
 
995
1010
  <h2></h2>
996
1011
 
997
- <details><summary><b><code>children</code></b>: <em>Custom user content.</em></summary><br /><ul><div>
1012
+ <details><summary><b><code>children</code></b></summary><br /><ul><div>
998
1013
  <b>Type:</b><br />
999
1014
  React.ReactNode<br />
1000
1015
  <br />
@@ -1008,7 +1023,7 @@ React.ReactNode<br />
1008
1023
 
1009
1024
  <h2></h2>
1010
1025
 
1011
- <details><summary><b><code>style</code></b>: <em>Applies inline styles to the container.</em></summary><br /><ul><div>
1026
+ <details><summary><b><code>style</code></b></summary><br /><ul><div>
1012
1027
  <b>Type:</b><br />
1013
1028
  React.CSSProperties<br />
1014
1029
  <br />
@@ -1024,15 +1039,15 @@ React.CSSProperties<br />
1024
1039
 
1025
1040
  <h2></h2>
1026
1041
 
1027
- <details><summary><b><code>root</code></b>: <em>Defines the observation area.</em></summary><br /><ul><div>
1042
+ <details><summary><b><code>root</code></b></summary><br /><ul><div>
1028
1043
  <b>Type:</b><br />
1029
1044
  Element | null<br />
1030
1045
  <br />
1031
1046
  <b>Default:</b><br />
1032
1047
  null (window)<br />
1033
1048
  <br />
1034
- <b>Description:</b> <em><br />
1035
- Specifies the element that serves as the bounding box for the intersection observation.
1049
+ <b>Description:</b><em><br />
1050
+ specifies the element that serves as the bounding box for the intersection observation.
1036
1051
  If provided, it must be an ancestor of the observed element.</em><br />
1037
1052
  <br />
1038
1053
  <b>Example:</b>
@@ -1047,15 +1062,15 @@ If provided, it must be an ancestor of the observed element.</em><br />
1047
1062
 
1048
1063
  <h2></h2>
1049
1064
 
1050
- <details><summary><b><code>rootMargin</code></b>: <em>Sets the margin around the root element.</em></summary><br /><ul><div>
1065
+ <details><summary><b><code>rootMargin</code></b></summary><br /><ul><div>
1051
1066
  <b>Type:</b><br />
1052
1067
  number | number[]<br />
1053
1068
  <br />
1054
- <b>Description:</b> <em><br />
1055
- Defines an offset around the root element, expanding or shrinking the observed area.<br />
1069
+ <b>Description:</b><em><br />
1070
+ defines an offset around the root element, expanding or shrinking the observed area.<br />
1056
1071
  <br />
1057
1072
  ✦ Note:<br />
1058
- It can be a single number or an array of 2 <b>[ top-bottom, left-right ]</b> or 4 <b>[ top, right, bottom, left ]</b> numbers.</em><br />
1073
+ it can be a single number or an array of 2 <b>[ top-bottom, left-right ]</b> or 4 <b>[ top, right, bottom, left ]</b> numbers.</em><br />
1059
1074
  <br />
1060
1075
  <b>Example:</b>
1061
1076
 
@@ -1067,15 +1082,15 @@ It can be a single number or an array of 2 <b>[ top-bottom, left-right ]</b> or
1067
1082
 
1068
1083
  <h2></h2>
1069
1084
 
1070
- <details><summary><b><code>threshold</code></b>: <em>Defines when the callback <code>onIntersection</code> and content visibility should be triggered.</em></summary><br /><ul><div>
1085
+ <details><summary><b><code>threshold</code></b></summary><br /><ul><div>
1071
1086
  <b>Type:</b><br />
1072
1087
  number | number[]<br />
1073
1088
  <br />
1074
1089
  <b>Default:</b><br />
1075
1090
  0<br />
1076
1091
  <br />
1077
- <b>Description:</b> <em><br />
1078
- Specifies at what percentage of the observed element’s visibility the callback should be executed.<br />
1092
+ <b>Description:</b><em><br />
1093
+ specifies at what percentage of the observed element’s visibility the callback should be executed.<br />
1079
1094
  <br />
1080
1095
  ✦ Note:<br />
1081
1096
  <ul>
@@ -1093,15 +1108,15 @@ Specifies at what percentage of the observed element’s visibility the callback
1093
1108
 
1094
1109
  <h2></h2>
1095
1110
 
1096
- <details><summary><b><code>visibleContent</code></b>: <em>Makes all elements always visible.</em></summary><br /><ul><div>
1111
+ <details><summary><b><code>visibleContent</code></b></summary><br /><ul><div>
1097
1112
  <b>Type:</b><br />
1098
1113
  boolean<br />
1099
1114
  <br />
1100
1115
  <b>Default:</b><br />
1101
1116
  false<br />
1102
1117
  <br />
1103
- <b>Description:</b> <em><br />
1104
- If set to <mark>true</mark>, the tracked elements will always be visible, regardless of their actual intersection status.<br />
1118
+ <b>Description:</b><em><br />
1119
+ if set to <b>true</b>, the tracked elements will always be visible, regardless of their actual intersection status.<br />
1105
1120
  This is useful for testing purposes or when using the <code>onIntersection</code> callback, ensuring that it reliably triggers whenever the element enters the viewport, even if all elements are already visible.</em><br />
1106
1121
  <br />
1107
1122
  <b>Example:</b>
@@ -1114,15 +1129,15 @@ This is useful for testing purposes or when using the <code>onIntersection</code
1114
1129
 
1115
1130
  <h2></h2>
1116
1131
 
1117
- <details><summary><b><code>onIntersection</code></b>: <em>Callback function triggered when the element becomes visible.</em></summary><br /><ul><div>
1132
+ <details><summary><b><code>onIntersection</code></b></summary><br /><ul><div>
1118
1133
  <b>Type:</b><br />
1119
1134
  (entry: IntersectionObserverEntry) => void<br />
1120
1135
  <br />
1121
- <b>Description:</b> <em><br />
1122
- A callback function that is called when the observed element enters or leaves the viewport or the area defined by the <code>root</code> property. This can be used to load new list items for <code>MorphScroll</code>.<br />
1136
+ <b>Description:</b><em><br />
1137
+ callback function that is called when the observed element enters or leaves the viewport or the area defined by the <code>root</code> property. This can be used to load new list items for <code>MorphScroll</code>.<br />
1123
1138
  <br />
1124
1139
  ✦ Note:<br />
1125
- The <code>IntersectionObserverEntry</code> object provides details about the intersection state, including:<br />
1140
+ the <code>IntersectionObserverEntry</code> object provides details about the intersection state, including:<br />
1126
1141
  <ul>
1127
1142
  <li><code>boundingClientRect</code>: The bounding rectangle of the element relative to the viewport.</li>
1128
1143
  <li><code>intersectionRatio</code>: The percentage of the element that is visible in the viewport.</li>
@@ -1150,10 +1165,12 @@ The <code>IntersectionObserverEntry</code> object provides details about the int
1150
1165
 
1151
1166
  </div></ul>
1152
1167
 
1153
- - #### Link:
1168
+ - #### Links:
1154
1169
 
1155
1170
  [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
1156
1171
 
1172
+ </details>
1173
+
1157
1174
  </div></ul>
1158
1175
 
1159
1176
  <h2></h2>