chore(release): 3.6.1

## [3.6.1](v3.6.0...v3.6.1) (2021-10-23)

### Bug Fixes

* **use-scroller:** unsubscribe from updates when hook has unmounted ([#97](#97)) ([2117625](2117625))

CHANGELOG.md

@@ -1,3 +1,9 @@
+## [3.6.1](https://github.com/jaredLunde/masonic/compare/v3.6.0...v3.6.1) (2021-10-23)
+
+### Bug Fixes
+
+- **use-scroller:** unsubscribe from updates when hook has unmounted ([#97](https://github.com/jaredLunde/masonic/issues/97)) ([2117625](https://github.com/jaredLunde/masonic/commit/2117625fb14b27b5f33a3a8121cbb83a62de5b5c))
+
 # Changelog
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "masonic",
-  "version": "3.6.0",
+  "version": "3.6.1",
   "description": "",
   "license": "MIT",
   "author": "Jared Lunde <jared.lunde@gmail.com> (https://jaredlunde.com/)",

types/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./interval-tree";
 export * from "./list";
 export * from "./masonry";
 export * from "./masonry-scroller";
@@ -8,4 +9,3 @@ export * from "./use-positioner";
 export * from "./use-resize-observer";
 export * from "./use-scroll-to-index";
 export * from "./use-scroller";
-export * from "./interval-tree";

types/list.d.ts

@@ -2,6 +2,8 @@
 import type { MasonryProps } from "./masonry";
 /**
  * This is just a single-column `<Masonry>` component without column-specific props.
+ *
+ * @param props
  */
 export declare function List<Item>(props: ListProps<Item>): JSX.Element;
 export declare namespace List {
@@ -14,6 +16,7 @@ export interface ListProps<Item>
   > {
   /**
    * The amount of vertical space in pixels to add between the list cells.
+   *
    * @default 0
    */
   rowGutter?: number;

types/masonry-scroller.d.ts

@@ -3,6 +3,8 @@ import type { UseMasonryOptions } from "./use-masonry";
 /**
  * A heavily-optimized component that updates `useMasonry()` when the scroll position of the browser `window`
  * changes. This bare-metal component is used by `<Masonry>` under the hood.
+ *
+ * @param props
  */
 export declare function MasonryScroller<Item>(
   props: MasonryScrollerProps<Item>
@@ -17,12 +19,14 @@ export interface MasonryScrollerProps<Item>
    * browser `window` in state, and as a result the rate the masonry grid recalculates its visible cells.
    * The default value of `12` has been very reasonable in my own testing, but if you have particularly
    * heavy `render` components it may be prudent to reduce this number.
+   *
    * @default 12
    */
   scrollFps?: number;
   /**
    * The vertical space in pixels between the top of the grid container and the top
    * of the browser `document.documentElement`.
+   *
    * @default 0
    */
   offset?: number;

types/masonry.d.ts

@@ -7,6 +7,8 @@ import type { UseScrollToIndexOptions } from "./use-scroll-to-index";
  * easiest way to get off and running in your app, before switching to more advanced implementations, if necessary.
  * It will change its column count to fit its container's width and will decide how many rows to render based upon
  * the height of the browser `window`.
+ *
+ * @param props
  */
 export declare function Masonry<Item>(
   props: MasonryProps<Item>
@@ -48,6 +50,7 @@ export interface MasonryProps<Item>
    * browser `window` in state, and as a result the rate the masonry grid recalculates its visible cells.
    * The default value of `12` has been very reasonable in my own testing, but if you have particularly
    * heavy `render` components it may be prudent to reduce this number.
+   *
    * @default 12
    */
   scrollFps?: number;

types/use-container-position.d.ts

@@ -4,9 +4,9 @@ import * as React from "react";
  * from the top of the document. These values are necessary to correctly calculate the number/width
  * of columns to render, as well as the number of rows to render.
  *
- * @param elementRef A `ref` object created by `React.useRef()`. That ref should be provided to the
+ * @param elementRef - A `ref` object created by `React.useRef()`. That ref should be provided to the
  *   `containerRef` property in `useMasonry()`.
- * @param deps You can force this hook to recalculate the `offset` and `width` whenever this
+ * @param deps - You can force this hook to recalculate the `offset` and `width` whenever this
  *   dependencies list changes. A common dependencies list might look like `[windowWidth, windowHeight]`,
  *   which would force the hook to recalculate any time the size of the browser `window` changed.
  */

types/use-infinite-loader.d.ts

@@ -3,7 +3,7 @@
  * hook invokes a callback each time the last rendered index surpasses the total number of items
  * in your items array or the number defined in the `totalItems` option.
  *
- * @param loadMoreItems This callback is invoked when more rows must be loaded. It will be used to
+ * @param loadMoreItems - This callback is invoked when more rows must be loaded. It will be used to
  *  determine when to refresh the list with the newly-loaded data. This callback may be called multiple
  *  times in reaction to a single scroll event, so it's important to memoize its arguments. If you're
  *  creating this callback inside of a functional component, make sure you wrap it in `React.useCallback()`,
@@ -21,24 +21,28 @@ export interface UseInfiniteLoaderOptions<Item> {
   /**
    *  A callback responsible for determining the loaded state of each item. Should return `true`
    * if the item has already been loaded and `false` if not.
+   *
    * @default (index: number, items: any[]) => boolean
    */
   isItemLoaded?: (index: number, items: Item[]) => boolean;
   /**
    * The minimum number of new items to be loaded at a time.  This property can be used to
    * batch requests and reduce HTTP requests.
+   *
    * @default 16
    */
   minimumBatchSize?: number;
   /**
    * The threshold at which to pre-fetch data. A threshold X means that new data should start
    * loading when a user scrolls within X cells of the end of your `items` array.
+   *
    * @default 16
    */
   threshold?: number;
   /**
    * The total number of items you'll need to eventually load (if known). This can
    * be arbitrarily high if not known.
+   *
    * @default 9e9
    */
   totalItems?: number;

types/use-masonry.d.ts

@@ -3,7 +3,27 @@ import type { Positioner } from "./use-positioner";
 /**
  * This hook handles the render phases of the masonry layout and returns the grid as a React element.
  *
- * @param options Options for configuring the masonry layout renderer. See `UseMasonryOptions`.
+ * @param options - Options for configuring the masonry layout renderer. See `UseMasonryOptions`.
+ * @param options.positioner
+ * @param options.resizeObserver
+ * @param options.items
+ * @param options.as
+ * @param options.id
+ * @param options.className
+ * @param options.style
+ * @param options.role
+ * @param options.tabIndex
+ * @param options.containerRef
+ * @param options.itemAs
+ * @param options.itemStyle
+ * @param options.itemHeightEstimate
+ * @param options.itemKey
+ * @param options.overscanBy
+ * @param options.scrollTop
+ * @param options.isScrolling
+ * @param options.height
+ * @param options.render
+ * @param options.onRender
  */
 export declare function useMasonry<Item>({
   positioner,
@@ -49,6 +69,7 @@ export interface UseMasonryOptions<Item> {
   };
   /**
    * This is the type of element the grid container will be rendered as.
+   *
    * @default "div"`
    */
   as?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
@@ -67,11 +88,13 @@ export interface UseMasonryOptions<Item> {
   style?: React.CSSProperties;
   /**
    * Optionally swap out the accessibility `role` prop of the container and its items.
+   *
    * @default "grid"
    */
   role?: "grid" | "list";
   /**
    * Change the `tabIndex` of the grid container.
+   *
    * @default 0
    */
   tabIndex?: number;
@@ -83,6 +106,7 @@ export interface UseMasonryOptions<Item> {
     | React.MutableRefObject<HTMLElement | null>;
   /**
    * This is the type of element the grid items will be rendered as.
+   *
    * @default "div"
    */
   itemAs?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
@@ -95,6 +119,7 @@ export interface UseMasonryOptions<Item> {
    * This value is used for estimating the initial height of the masonry grid. It is important for
    * the UX of the scrolling behavior and in determining how many `items` to render in a batch, so it's
    * wise to set this value with some level accuracy, though it doesn't need to be perfect.
+   *
    * @default 300
    */
   itemHeightEstimate?: number;
@@ -103,6 +128,7 @@ export interface UseMasonryOptions<Item> {
    * if your collection of items is never modified. Setting this property ensures that the component in `render`
    * is reused each time the masonry grid is reflowed. A common pattern would be to return the item's database
    * ID here if there is one, e.g. `data => data.id`
+   *
    * @default (data, index) => index`
    */
   itemKey?: (data: Item, index: number) => string | number;
@@ -116,6 +142,7 @@ export interface UseMasonryOptions<Item> {
      * too high of a vaimport { useForceUpdate } from './use-force-update';
   lue may create too much work for React to handle, so it's best that you tune this
      * value accordingly.
+     *
      * @default 2
      */
   overscanBy?: number;
@@ -140,6 +167,7 @@ export interface UseMasonryOptions<Item> {
    * `will-change: contents;` value to the style string. You can forgo using this prop, but I would
    * not recommend that. The `useScroller()` hook and `<MasonryScroller>` components will help you if
    * you're rendering the grid relative to the browser `window`.
+   *
    * @default false
    */
   isScrolling?: boolean;

types/use-positioner.d.ts

@@ -4,10 +4,15 @@ import * as React from "react";
  * the meat of the grid's layout algorithm, determining which cells to render at a given scroll
  * position, as well as where to place new items in the grid.
  *
- * @param options Properties that determine the number of columns in the grid, as well
+ * @param options - Properties that determine the number of columns in the grid, as well
  *  as their widths.
- * @param deps This hook will create a new positioner, clearing all existing cached positions,
+ * @param options.columnWidth
+ * @param options.width
+ * @param deps - This hook will create a new positioner, clearing all existing cached positions,
  *  whenever the dependencies in this list change.
+ * @param options.columnGutter
+ * @param options.rowGutter
+ * @param options.columnCount
  */
 export declare function usePositioner(
   {
@@ -30,12 +35,14 @@ export interface UsePositionerOptions {
    * columns to fill their container based upon the `columnWidth` and `columnGutter` values.
    * It will never render anything smaller than this width unless its container itself is
    * smaller than its value. This property is optional if you're using a static `columnCount`.
+   *
    * @default 200
    */
   columnWidth?: number;
   /**
    * This sets the horizontal space between grid columns in pixels. If `rowGutter` is not set, this
    * also sets the vertical space between cells within a column in pixels.
+   *
    * @default 0
    */
   columnGutter?: number;
@@ -55,10 +62,10 @@ export interface UsePositionerOptions {
  * Creates a cell positioner for the `useMasonry()` hook. The `usePositioner()` hook uses
  * this utility under the hood.
  *
- * @param columnCount The number of columns in the grid
- * @param columnWidth The width of each column in the grid
- * @param columnGutter The amount of horizontal space between columns in pixels.
- * @param rowGutter The amount of vertical space between cells within a column in pixels (falls back
+ * @param columnCount - The number of columns in the grid
+ * @param columnWidth - The width of each column in the grid
+ * @param columnGutter - The amount of horizontal space between columns in pixels.
+ * @param rowGutter - The amount of vertical space between cells within a column in pixels (falls back
  * to `columnGutter`).
  */
 export declare const createPositioner: (

types/use-resize-observer.d.ts

@@ -4,7 +4,7 @@ import type { Positioner } from "./use-positioner";
  * Creates a resize observer that forces updates to the grid cell positions when mutations are
  * made to cells affecting their height.
  *
- * @param positioner The masonry cell positioner created by the `usePositioner()` hook.
+ * @param positioner - The masonry cell positioner created by the `usePositioner()` hook.
  */
 export declare function useResizeObserver(
   positioner: Positioner
@@ -13,8 +13,8 @@ export declare function useResizeObserver(
  * Creates a resize observer that fires an `updater` callback whenever the height of
  * one or many cells change. The `useResizeObserver()` hook is using this under the hood.
  *
- * @param positioner A cell positioner created by the `usePositioner()` hook or the `createPositioner()` utility
- * @param updater A callback that fires whenever one or many cell heights change.
+ * @param positioner - A cell positioner created by the `usePositioner()` hook or the `createPositioner()` utility
+ * @param updater - A callback that fires whenever one or many cell heights change.
  */
 export declare const createResizeObserver: (
   positioner: Positioner,

types/use-scroll-to-index.d.ts

@@ -4,8 +4,8 @@ import type { Positioner } from "./use-positioner";
  * A hook that creates a callback for scrolling to a specific index in
  * the "items" array.
  *
- * @param positioner A positioner created by the `usePositioner()` hook
- * @param options Configuration options
+ * @param positioner - A positioner created by the `usePositioner()` hook
+ * @param options - Configuration options
  */
 export declare function useScrollToIndex(
   positioner: Positioner,
@@ -15,22 +15,26 @@ export declare type UseScrollToIndexOptions = {
   /**
    * The window element or a React ref for the window element. That is,
    * this is the grid container.
+   *
    * @default window
    */
   element?: Window | HTMLElement | React.RefObject<HTMLElement> | null;
   /**
    * Sets the vertical alignment of the cell within the grid container.
+   *
    * @default "top"
    */
   align?: "center" | "top" | "bottom";
   /**
    * The height of the grid.
+   *
    * @default window.innerHeight
    */
   height?: number;
   /**
    * The vertical space in pixels between the top of the grid container and the top
    * of the window.
+   *
    * @default 0
    */
   offset?: number;

types/use-scroller.d.ts

@@ -3,9 +3,9 @@
  * the y-axis. These values are used for determining which grid cells to render and when
  * to add styles to the masonry container that maximize scroll performance.
  *
- * @param offset The vertical space in pixels between the top of the grid container and the top
+ * @param offset - The vertical space in pixels between the top of the grid container and the top
  *  of the browser `document.documentElement`.
- * @param fps This determines how often (in frames per second) to update the scroll position of the
+ * @param fps - This determines how often (in frames per second) to update the scroll position of the
  *  browser `window` in state, and as a result the rate the masonry grid recalculates its visible cells.
  *  The default value of `12` has been very reasonable in my own testing, but if you have particularly
  *  heavy `render` components it may be prudent to reduce this number.