react-virtuoso - npm Package Compare versions

Comparing version 0.0.0-prepend to 0.0.0-semantic-release

dist/index.d.ts

@@ -88,2 +88,7 @@ import { default as React_2 } from 'react';
 
+export declare interface ElementDimensions {
+    width: number;
+    height: number;
+}
+
 /**
@@ -117,2 +122,7 @@ * Passed to the Components.FillerRow custom component
 
+export declare interface Gap {
+    row: number;
+    column: number;
+}
+
 export declare interface GridComponents<Context = any> {
@@ -165,2 +175,4 @@ /**
 
+export declare type GridIndexLocation = FlatIndexLocationWithAlign | number;
+
 export declare interface GridItem<D> {
@@ -175,6 +187,8 @@ index: number;
 
-export declare interface GridItemProps {
+/**
+ * Passed to the Components.Item custom component
+ */
+export declare type GridItemProps = Pick<React_2.ComponentProps<'div'>, 'style' | 'children' | 'className'> & {
     'data-index': number;
-    className?: string;
-}
+} & React_2.RefAttributes<HTMLDivElement>;
 
@@ -184,5 +198,5 @@ /**
  */
-export declare type GridListProps = Pick<React_2.ComponentPropsWithRef<'div'>, 'style' | 'children' | 'ref' | 'className'> & {
-    'data-test-id': string;
-};
+export declare type GridListProps = Pick<React_2.ComponentProps<'div'>, 'style' | 'children' | 'className'> & {
+    'data-testid': string;
+} & React_2.RefAttributes<HTMLDivElement>;
 
@@ -200,2 +214,9 @@ export declare type GridRootProps = Omit<React_2.HTMLProps<HTMLDivElement>, 'ref' | 'data'>;
 
+export declare interface GridStateSnapshot {
+    viewport: ElementDimensions;
+    item: ElementDimensions;
+    gap: Gap;
+    scrollTop: number;
+}
+
 export declare interface GroupContent<C> {
@@ -219,2 +240,6 @@ (index: number, context: C): React_2.ReactNode;
     autoscrollToBottom(): void;
+    /**
+     * Obtains the internal size state of the component, so that it can be restored later. This does not include the data items.
+     */
+    getState(stateCb: StateCallback): void;
 }
@@ -245,3 +270,3 @@
      * You can also prepend more items to the first group, for example:
-     * \{ groupCounts: [20, 30], firstItemIndex: 1000 \} can become \{ groupCounts: [10, 30, 30], firstItemIndex: 980 \}
+     * `{ groupCounts: [20, 30], firstItemIndex: 1000 }` can become `{ groupCounts: [10, 30, 30], firstItemIndex: 980 }`
      *
@@ -269,3 +294,3 @@ * Warning: the firstItemIndex should **be a positive number**, based on the total amount of items to be displayed.
 
-export declare type GroupProps = Pick<React_2.ComponentPropsWithRef<'div'>, 'style' | 'children'> & {
+export declare type GroupProps = Pick<React_2.ComponentProps<'div'>, 'style' | 'children'> & {
     'data-index': number;
@@ -289,3 +314,3 @@ 'data-item-index': number;
 
-export declare type ItemProps<D> = Pick<React_2.ComponentPropsWithRef<'div'>, 'style' | 'children'> & {
+export declare type ItemProps<D> = Pick<React_2.ComponentProps<'div'>, 'style' | 'children'> & {
     'data-index': number;
@@ -303,5 +328,5 @@ 'data-item-index': number;
  */
-export declare type ListProps = Pick<React_2.ComponentPropsWithRef<'div'>, 'style' | 'children' | 'ref'> & {
-    'data-test-id': string;
-};
+export declare type ListProps = Pick<React_2.ComponentProps<'div'>, 'style' | 'children'> & {
+    'data-testid': string;
+} & React_2.RefAttributes<HTMLDivElement>;
 
@@ -353,6 +378,6 @@ export declare interface ListRange {
  */
-export declare type ScrollerProps = Pick<React_2.ComponentPropsWithRef<'div'>, 'style' | 'children' | 'tabIndex' | 'ref'> & {
-    'data-test-id'?: string;
+export declare type ScrollerProps = Pick<React_2.ComponentProps<'div'>, 'style' | 'children' | 'tabIndex'> & {
+    'data-testid'?: string;
     'data-virtuoso-scroller'?: boolean;
-};
+} & React_2.RefAttributes<HTMLDivElement>;
 
@@ -426,8 +451,21 @@ export declare type ScrollIntoViewLocation = FlatScrollIntoViewLocation | GroupedScrollIntoViewLocation;
 
+export declare interface SizeRange {
+    startIndex: number;
+    endIndex: number;
+    size: number;
+}
+
+export declare type StateCallback = (state: StateSnapshot) => void;
+
+export declare interface StateSnapshot {
+    ranges: SizeRange[];
+    scrollTop: number;
+}
+
 /**
  * Passed to the Components.TableBody custom component
  */
-export declare type TableBodyProps = Pick<React_2.ComponentPropsWithRef<'tbody'>, 'style' | 'children' | 'ref' | 'className'> & {
-    'data-test-id': string;
-};
+export declare type TableBodyProps = Pick<React_2.ComponentProps<'tbody'>, 'style' | 'children' | 'className'> & {
+    'data-testid': string;
+} & React_2.RefAttributes<HTMLTableSectionElement>;
 
@@ -446,14 +484,14 @@ /**
     /**
-     * Set to render a fixed header at the top of the table (`thead`). use [[fixedHeaderHeight]] to set the contents
+     * Set to render a fixed header at the top of the table (`thead`). use [[fixedHeaderContent]] to set the contents
      *
      */
-    TableHead?: React_2.ComponentType<Pick<React_2.ComponentPropsWithRef<'thead'>, 'style' | 'ref'> & {
+    TableHead?: React_2.ComponentType<Pick<React_2.ComponentProps<'thead'>, 'style' | 'children'> & {
         context?: Context;
-    }>;
+    } & React_2.RefAttributes<HTMLTableSectionElement>>;
     /**
      * Set to render a fixed footer at the bottom of the table (`tfoot`). use [[fixedFooterContent]] to set the contents
      */
-    TableFoot?: React_2.ComponentType<Pick<React_2.ComponentPropsWithRef<'tfoot'>, 'style' | 'ref'> & {
+    TableFoot?: React_2.ComponentType<Pick<React_2.ComponentProps<'tfoot'>, 'style' | 'children'> & {
         context?: Context;
-    }>;
+    } & React_2.RefAttributes<HTMLTableSectionElement>>;
     /**
@@ -498,3 +536,3 @@ * Set to customize the item wrapping element. Default is `tr`.
 
-export declare type TableProps = Pick<React_2.ComponentPropsWithRef<'table'>, 'style' | 'children'>;
+export declare type TableProps = Pick<React_2.ComponentProps<'table'>, 'style' | 'children'>;
 
@@ -512,2 +550,6 @@ export declare type TableRootProps = Omit<React_2.HTMLProps<HTMLTableElement>, 'ref' | 'data'>;
     scrollBy(location: ScrollToOptions): void;
+    /**
+     * Obtains the internal size state of the component, so that it can be restored later. This does not include the data items.
+     */
+    getState(stateCb: StateCallback): void;
 }
@@ -690,5 +732,11 @@
     atBottomThreshold?: number;
+    /**
+     * pass a state obtained from the getState() method to restore the list state - this includes the previously measured item sizes and the scroll location.
+     * Notice that you should still pass the same data and totalCount properties as before, so that the list can match the data with the stored measurements.
+     * This is useful when you want to keep the list state when the component is unmounted and remounted, for example when navigating to a different page.
+     */
+    restoreStateFrom?: StateSnapshot;
 }
 
-export declare type TopItemListProps = Pick<React_2.ComponentPropsWithRef<'div'>, 'style' | 'children'>;
+export declare type TopItemListProps = Pick<React_2.ComponentProps<'div'>, 'style' | 'children'>;
 
@@ -704,3 +752,3 @@ export declare const Virtuoso: <ItemData = any, Context = any>(props: VirtuosoProps<ItemData, Context> & {
 export declare interface VirtuosoGridHandle {
-    scrollToIndex(location: number | IndexLocationWithAlign): void;
+    scrollToIndex(location: GridIndexLocation): void;
     scrollTo(location: ScrollToOptions): void;
@@ -782,2 +830,7 @@ scrollBy(location: ScrollToOptions): void;
     /**
+     * reports when the grid state changes. The reported value can be stored and passed back to `restoreStateFrom` to restore the grid to the same state.
+     */
+    stateChanged?: (state: GridStateSnapshot) => void;
+    restoreStateFrom?: GridStateSnapshot | undefined | null;
+    /**
      * Called with true / false when the list has reached the bottom / gets scrolled up.
@@ -817,2 +870,3 @@ * Can be used to load newer items, like `tail -f`.
     logLevel?: LogLevel;
+    initialTopMostItemIndex?: GridIndexLocation;
 }
@@ -841,2 +895,6 @@
     autoscrollToBottom(): void;
+    /**
+     * Obtains the internal size state of the component, so that it can be restored later. This does not include the data items.
+     */
+    getState(stateCb: StateCallback): void;
 }
@@ -1050,2 +1108,12 @@
     logLevel?: LogLevel;
+    /**
+     * pass a state obtained from the getState() method to restore the list state - this includes the previously measured item sizes and the scroll location.
+     * Notice that you should still pass the same data and totalCount properties as before, so that the list can match the data with the stored measurements.
+     * This is useful when you want to keep the list state when the component is unmounted and remounted, for example when navigating to a different page.
+     */
+    restoreStateFrom?: StateSnapshot;
+    /**
+     * when set, turns the scroller into a horizontal list.
+     */
+    horizontalDirection?: boolean;
 }
@@ -1052,0 +1120,0 @@

package.json

 {
   "name": "react-virtuoso",
   "author": "Petyo Ivanov",
-  "type": "module",
   "sideEffects": false,
-  "version": "0.0.0-prepend",
+  "version": "0.0.0-semantic-release",
   "homepage": "https://virtuoso.dev/",
@@ -35,51 +34,52 @@ "license": "MIT",
   "devDependencies": {
-    "@commitlint/cli": "^12.1.4",
-    "@commitlint/config-conventional": "^12.1.4",
-    "@emotion/core": "^10.1.0",
-    "@emotion/styled": "^10.0.27",
+    "@commitlint/cli": "^17.6.3",
+    "@commitlint/config-conventional": "^17.6.3",
+    "@emotion/core": "^11.0.0",
+    "@emotion/styled": "^11.10.8",
     "@faker-js/faker": "^7.6.0",
-    "@testing-library/react": "^13.4.0",
-    "@ladle/react": "^2.4.5",
-    "@microsoft/api-extractor": "^7.33.7",
-    "@playwright/test": "^1.29.1",
-    "@types/jsdom": "^16.2.3",
-    "@types/lodash": "^4.14.165",
-    "@types/react": "^18.0.5",
-    "@types/react-beautiful-dnd": "^13.0.0",
-    "@types/react-dom": "^18.0.1",
-    "@types/react-router-dom": "^5.1.7",
-    "@types/react-table": "^7.7.10",
-    "@typescript-eslint/eslint-plugin": "^5.47.0",
-    "@typescript-eslint/parser": "^5.47.0",
-    "@vitejs/plugin-react": "^3.0.0",
-    "eslint": "^8.30.0",
-    "eslint-config-prettier": "^8.5.0",
+    "@ladle/react": "^2.12.3",
+    "@playwright/test": "^1.33.0",
+    "@tanstack/react-table": "^8.9.11",
+    "@testing-library/react": "^14.0.0",
+    "@types/jsdom": "^21.1.1",
+    "@types/lodash": "^4.14.194",
+    "@types/react": "^18.2.64",
+    "@types/react-beautiful-dnd": "^13.1.4",
+    "@types/react-dom": "^18.2.21",
+    "@types/react-router-dom": "^5.3.3",
+    "@typescript-eslint/eslint-plugin": "^5.59.2",
+    "@typescript-eslint/parser": "^5.59.2",
+    "@vitejs/plugin-react": "^4.0.0",
+    "clsx": "^1.2.1",
+    "eslint": "^8.39.0",
+    "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-html": "^7.1.0",
-    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-json": "^3.1.0",
-    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.31.11",
+    "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "husky": "^6.0.0",
-    "jsdom": "^20.0.3",
+    "husky": "^8.0.3",
+    "immer": "^10.0.1",
+    "jsdom": "^22.0.0",
     "lodash": "^4.17.21",
-    "playwright": "^1.29.1",
+    "playwright": "^1.33.0",
     "prettier": "^2.2.1",
-    "react": "^18.0.0",
-    "react-beautiful-dnd": "^13.0.0",
-    "react-dom": "^18.0.0",
-    "react-router-dom": "^5.2.0",
-    "react-table": "^7.7.0",
+    "prism-react-renderer": "^1.3.5",
+    "react": "^18.2.0",
+    "react-beautiful-dnd": "^13.1.1",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.14.0",
     "semantic-release": "^19.0.5",
-    "terser": "^5.16.1",
-    "tslib": "^2.0.0",
-    "typescript": "^4.9.4",
-    "vite": "^4.0.0",
-    "vitest": "^0.26.2"
+    "terser": "^5.17.1",
+    "tslib": "^2.5.0",
+    "typedoc": "^0.24.6",
+    "typedoc-plugin-markdown": "^3.15.3",
+    "typescript": "^5.0.4",
+    "vite": "^4.3.5",
+    "vite-plugin-dts": "^2.3.0",
+    "vitest": "^0.31.0"
   },
-  "packageManager": "pnpm@7.21.0",
-  "resolutions": {
-    "@types/react": "^16.14.2"
-  },
+  "packageManager": "pnpm@8.14.3+sha256.2d0363bb6c314daa67087ef07743eea1ba2e2d360c835e8fec6b5575e4ed9484",
   "engines": {
@@ -99,3 +99,3 @@ "node": ">=10"
   "scripts": {
-    "build": "vite build && ./scripts/build-types.sh",
+    "build": "vite build",
     "test": "vitest run",
@@ -106,5 +106,5 @@ "test:watch": "vitest watch",
     "typecheck": "tsc --noEmit -p tsconfig.typecheck.json",
-    "dev": "ladle serve --viteConfig ladle.vite.config.ts",
+    "dev": "LADLE=true ladle serve",
     "semantic-release": "semantic-release"
   }
 }

README.md

@@ -5,6 +5,6 @@ <img src="https://user-images.githubusercontent.com/13347/101237112-ec4c6000-36de-11eb-936d-4b6b7ec94976.png" width="229" />
 
-**React Virtuoso** is the most powerful React virtual list/table component, full stop. Here's why:
+**React Virtuoso** - the most complete React virtualization rendering list/table/grid family of components.
 
 - Variable sized items out of the box; no manual measurements or hard-coding item heights is necessary;
-- Support for [reverse (bottom up) scrolling and prepending items](https://virtuoso.dev/prepend-items/) (chat, feeds, etc);
+- [Chat message list UI](https://virtuoso.dev/virtuoso-message-list/) **NEW**;
 - [Grouped mode with sticky headers](https://virtuoso.dev/grouped-by-first-letter/);
@@ -44,2 +44,7 @@ - [Responsive grid layout](https://virtuoso.dev/grid-responsive-columns/);
 
+## [Message List](https://virtuoso.dev/virtuoso-message-list/)
+
+The Virtuoso message list component is built specifically for human/chatbot conversations. In addition to the virtualized rendering, the component exposes an imperative data management 
+API that gives you the necessary control over the scroll position when older messages are loaded, new messages arrive, and when the user submits a message. The scroll position can update instantly or with a smooth scroll animation.
+
 ## [Grouped Mode](https://virtuoso.dev/grouped-by-first-letter/)
@@ -46,0 +51,0 @@

No alert changes

Improved metrics

Total package byte prevSize

254742

increased by6.84%

Lines of code

5568

increased by5.9%

Number of lines in readme file

108

increased by4.85%

Worsened metrics

Dev dependency count

48

increased by9.09%

Number of package files

6

decreased by-25%

Is type module

No

No dependency changes