@ringcentral/juno 2.4.0 → 2.5.0-beta.0

package/components/Virtuoso/react-virtuoso/initialTopMostItemIndexSystem.d.ts

@@ -1,5 +1,13 @@
 import * as u from '@virtuoso.dev/urx';
-export declare const initialTopMostItemIndexSystem: u.SystemSpec<[u.SystemSpec<never[], () => {
+import { IndexLocation } from './scrollToIndexSystem';
+export declare function getInitialTopMostItemIndexNumber(location: IndexLocation, totalCount: number): number;
+export declare const initialTopMostItemIndexSystem: u.SystemSpec<[u.SystemSpec<[u.SystemSpec<never[], () => {
+    log: u.StatefulStream<import("./loggerSystem").Log>;
+    logLevel: u.StatefulStream<import("./loggerSystem").LogLevel>;
+}>], ([{ log }]: [{
+    log: u.StatefulStream<import("./loggerSystem").Log>;
+    logLevel: u.StatefulStream<import("./loggerSystem").LogLevel>;
+}]) => {
     data: u.StatefulStream<import("./sizeSystem").Data>;
     totalCount: u.Stream<number>;
     sizeRanges: u.Stream<import("./sizeSystem").SizeRange[]>;
@@ -7,25 +15,35 @@ export declare const initialTopMostItemIndexSystem: u.SystemSpec<[u.SystemSpec<n
     defaultItemSize: u.StatefulStream<number | undefined>;
     fixedItemSize: u.StatefulStream<number | undefined>;
     unshiftWith: u.Stream<number>;
+    shiftWith: u.Stream<number>;
+    shiftWithOffset: u.Stream<number>;
     beforeUnshiftWith: u.Stream<number>;
     firstItemIndex: u.StatefulStream<number>;
     sizes: u.StatefulStream<import("./sizeSystem").SizeState>;
     listRefresh: u.Stream<boolean>;
+    statefulTotalCount: u.StatefulStream<number>;
     trackItemSizes: u.StatefulStream<boolean>;
     itemSize: u.StatefulStream<import("./sizeSystem").SizeFunction>;
 }>, u.SystemSpec<never[], () => {
+    scrollContainerState: u.Stream<[number, number]>;
     scrollTop: u.Stream<number>;
     viewportHeight: u.Stream<number>;
     headerHeight: u.StatefulStream<number>;
     footerHeight: u.StatefulStream<number>;
+    scrollHeight: u.Stream<number>;
     smoothScrollTargetReached: u.Stream<true>;
     scrollTo: u.Stream<ScrollToOptions>;
     scrollBy: u.Stream<ScrollToOptions>;
-    scrollDirection: u.StatefulStream<import("./domIOSystem").ScrollDirection>;
     statefulScrollTop: u.StatefulStream<number>;
     deviation: u.StatefulStream<number>;
     scrollingInProgress: u.StatefulStream<boolean>;
-}>, u.SystemSpec<[u.SystemSpec<never[], () => {
+}>, u.SystemSpec<[u.SystemSpec<[u.SystemSpec<never[], () => {
+    log: u.StatefulStream<import("./loggerSystem").Log>;
+    logLevel: u.StatefulStream<import("./loggerSystem").LogLevel>;
+}>], ([{ log }]: [{
+    log: u.StatefulStream<import("./loggerSystem").Log>;
+    logLevel: u.StatefulStream<import("./loggerSystem").LogLevel>;
+}]) => {
     data: u.StatefulStream<import("./sizeSystem").Data>;
     totalCount: u.Stream<number>;
     sizeRanges: u.Stream<import("./sizeSystem").SizeRange[]>;
@@ -33,25 +51,32 @@ export declare const initialTopMostItemIndexSystem: u.SystemSpec<[u.SystemSpec<n
     defaultItemSize: u.StatefulStream<number | undefined>;
     fixedItemSize: u.StatefulStream<number | undefined>;
     unshiftWith: u.Stream<number>;
+    shiftWith: u.Stream<number>;
+    shiftWithOffset: u.Stream<number>;
     beforeUnshiftWith: u.Stream<number>;
     firstItemIndex: u.StatefulStream<number>;
     sizes: u.StatefulStream<import("./sizeSystem").SizeState>;
     listRefresh: u.Stream<boolean>;
+    statefulTotalCount: u.StatefulStream<number>;
     trackItemSizes: u.StatefulStream<boolean>;
     itemSize: u.StatefulStream<import("./sizeSystem").SizeFunction>;
 }>, u.SystemSpec<never[], () => {
+    scrollContainerState: u.Stream<[number, number]>;
     scrollTop: u.Stream<number>;
     viewportHeight: u.Stream<number>;
     headerHeight: u.StatefulStream<number>;
     footerHeight: u.StatefulStream<number>;
+    scrollHeight: u.Stream<number>;
     smoothScrollTargetReached: u.Stream<true>;
     scrollTo: u.Stream<ScrollToOptions>;
     scrollBy: u.Stream<ScrollToOptions>;
-    scrollDirection: u.StatefulStream<import("./domIOSystem").ScrollDirection>;
     statefulScrollTop: u.StatefulStream<number>;
     deviation: u.StatefulStream<number>;
     scrollingInProgress: u.StatefulStream<boolean>;
-}>], ([{ sizes, totalCount, listRefresh }, { scrollingInProgress, viewportHeight, scrollTo, smoothScrollTargetReached, headerHeight, footerHeight, },]: [{
+}>, u.SystemSpec<never[], () => {
+    log: u.StatefulStream<import("./loggerSystem").Log>;
+    logLevel: u.StatefulStream<import("./loggerSystem").LogLevel>;
+}>], ([{ sizes, totalCount, listRefresh }, { scrollingInProgress, viewportHeight, scrollTo, smoothScrollTargetReached, headerHeight, footerHeight, }, { log },]: [{
     data: u.StatefulStream<import("./sizeSystem").Data>;
     totalCount: u.Stream<number>;
     sizeRanges: u.Stream<import("./sizeSystem").SizeRange[]>;
@@ -59,31 +84,44 @@ export declare const initialTopMostItemIndexSystem: u.SystemSpec<[u.SystemSpec<n
     defaultItemSize: u.StatefulStream<number | undefined>;
     fixedItemSize: u.StatefulStream<number | undefined>;
     unshiftWith: u.Stream<number>;
+    shiftWith: u.Stream<number>;
+    shiftWithOffset: u.Stream<number>;
     beforeUnshiftWith: u.Stream<number>;
     firstItemIndex: u.StatefulStream<number>;
     sizes: u.StatefulStream<import("./sizeSystem").SizeState>;
     listRefresh: u.Stream<boolean>;
+    statefulTotalCount: u.StatefulStream<number>;
     trackItemSizes: u.StatefulStream<boolean>;
     itemSize: u.StatefulStream<import("./sizeSystem").SizeFunction>;
 }, {
+    scrollContainerState: u.Stream<[number, number]>;
     scrollTop: u.Stream<number>;
     viewportHeight: u.Stream<number>;
     headerHeight: u.StatefulStream<number>;
     footerHeight: u.StatefulStream<number>;
+    scrollHeight: u.Stream<number>;
     smoothScrollTargetReached: u.Stream<true>;
     scrollTo: u.Stream<ScrollToOptions>;
     scrollBy: u.Stream<ScrollToOptions>;
-    scrollDirection: u.StatefulStream<import("./domIOSystem").ScrollDirection>;
     statefulScrollTop: u.StatefulStream<number>;
     deviation: u.StatefulStream<number>;
     scrollingInProgress: u.StatefulStream<boolean>;
+}, {
+    log: u.StatefulStream<import("./loggerSystem").Log>;
+    logLevel: u.StatefulStream<import("./loggerSystem").LogLevel>;
 }]) => {
-    scrollToIndex: u.Stream<import("./scrollToIndexSystem").IndexLocation>;
+    scrollToIndex: u.Stream<number | import("./interfaces").IndexLocationWithAlign>;
     topListHeight: u.StatefulStream<number>;
-}>, u.SystemSpec<never[], () => {
+}>, u.SystemSpec<[u.SystemSpec<never[], () => {
+    log: u.StatefulStream<import("./loggerSystem").Log>;
+    logLevel: u.StatefulStream<import("./loggerSystem").LogLevel>;
+}>], ([{ log }]: [{
+    log: u.StatefulStream<import("./loggerSystem").Log>;
+    logLevel: u.StatefulStream<import("./loggerSystem").LogLevel>;
+}]) => {
     propsReady: u.StatefulStream<boolean>;
     didMount: u.Stream<boolean>;
-}>], ([{ sizes, listRefresh }, { scrollTop }, { scrollToIndex }, { didMount },]: [{
+}>], ([{ sizes, listRefresh, defaultItemSize }, { scrollTop }, { scrollToIndex }, { didMount },]: [{
     data: u.StatefulStream<import("./sizeSystem").Data>;
     totalCount: u.Stream<number>;
     sizeRanges: u.Stream<import("./sizeSystem").SizeRange[]>;
@@ -91,31 +129,35 @@ export declare const initialTopMostItemIndexSystem: u.SystemSpec<[u.SystemSpec<n
     defaultItemSize: u.StatefulStream<number | undefined>;
     fixedItemSize: u.StatefulStream<number | undefined>;
     unshiftWith: u.Stream<number>;
+    shiftWith: u.Stream<number>;
+    shiftWithOffset: u.Stream<number>;
     beforeUnshiftWith: u.Stream<number>;
     firstItemIndex: u.StatefulStream<number>;
     sizes: u.StatefulStream<import("./sizeSystem").SizeState>;
     listRefresh: u.Stream<boolean>;
+    statefulTotalCount: u.StatefulStream<number>;
     trackItemSizes: u.StatefulStream<boolean>;
     itemSize: u.StatefulStream<import("./sizeSystem").SizeFunction>;
 }, {
+    scrollContainerState: u.Stream<[number, number]>;
     scrollTop: u.Stream<number>;
     viewportHeight: u.Stream<number>;
     headerHeight: u.StatefulStream<number>;
     footerHeight: u.StatefulStream<number>;
+    scrollHeight: u.Stream<number>;
     smoothScrollTargetReached: u.Stream<true>;
     scrollTo: u.Stream<ScrollToOptions>;
     scrollBy: u.Stream<ScrollToOptions>;
-    scrollDirection: u.StatefulStream<import("./domIOSystem").ScrollDirection>;
     statefulScrollTop: u.StatefulStream<number>;
     deviation: u.StatefulStream<number>;
     scrollingInProgress: u.StatefulStream<boolean>;
 }, {
-    scrollToIndex: u.Stream<import("./scrollToIndexSystem").IndexLocation>;
+    scrollToIndex: u.Stream<number | import("./interfaces").IndexLocationWithAlign>;
     topListHeight: u.StatefulStream<number>;
 }, {
     propsReady: u.StatefulStream<boolean>;
     didMount: u.Stream<boolean>;
 }]) => {
     scrolledToInitialItem: u.StatefulStream<boolean>;
-    initialTopMostItemIndex: u.StatefulStream<number>;
+    initialTopMostItemIndex: u.StatefulStream<number | import("./interfaces").IndexLocationWithAlign>;
 }>;

package/components/Virtuoso/react-virtuoso/initialTopMostItemIndexSystem.js

@@ -7,23 +7,39 @@ var domIOSystem_1 = require("./domIOSystem");
 var propsReadySystem_1 = require("./propsReadySystem");
 var scrollToIndexSystem_1 = require("./scrollToIndexSystem");
 var sizeSystem_1 = require("./sizeSystem");
+function getInitialTopMostItemIndexNumber(location, totalCount) {
+    var lastIndex = totalCount - 1;
+    var index = typeof location === 'number'
+        ? location
+        : location.index === 'LAST'
+            ? lastIndex
+            : location.index;
+    return index;
+}
+exports.getInitialTopMostItemIndexNumber = getInitialTopMostItemIndexNumber;
 exports.initialTopMostItemIndexSystem = u.system(function (_a) {
-    var _b = tslib_1.__read(_a, 4), _c = _b[0], sizes = _c.sizes, listRefresh = _c.listRefresh, scrollTop = _b[1].scrollTop, scrollToIndex = _b[2].scrollToIndex, didMount = _b[3].didMount;
+    var _b = tslib_1.__read(_a, 4), _c = _b[0], sizes = _c.sizes, listRefresh = _c.listRefresh, defaultItemSize = _c.defaultItemSize, scrollTop = _b[1].scrollTop, scrollToIndex = _b[2].scrollToIndex, didMount = _b[3].didMount;
     var scrolledToInitialItem = u.statefulStream(true);
     var initialTopMostItemIndex = u.statefulStream(0);
-    u.connect(u.pipe(didMount, u.withLatestFrom(initialTopMostItemIndex), u.filter(function (_a) {
-        var _b = tslib_1.__read(_a, 2), index = _b[1];
-        return index !== 0;
+    u.connect(u.pipe(didMount, u.withLatestFrom(initialTopMostItemIndex), 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    u.filter(function (_a) {
+        var _b = tslib_1.__read(_a, 2), location = _b[1];
+        return !!location;
     }), u.mapTo(false)), scrolledToInitialItem);
-    u.subscribe(u.pipe(listRefresh, u.withLatestFrom(scrolledToInitialItem, sizes), u.filter(function (_a) {
-        var _b = tslib_1.__read(_a, 3), scrolledToInitialItem = _b[1], sizeTree = _b[2].sizeTree;
-        return !AATree_1.empty(sizeTree) && !scrolledToInitialItem;
+    u.subscribe(u.pipe(u.combineLatest(listRefresh, didMount), u.withLatestFrom(scrolledToInitialItem, sizes, defaultItemSize), u.filter(function (_a) {
+        var _b = tslib_1.__read(_a, 4), _c = tslib_1.__read(_b[0], 2), didMount = _c[1], scrolledToInitialItem = _b[1], sizeTree = _b[2].sizeTree, defaultItemSize = _b[3];
+        return (didMount &&
+            (!AATree_1.empty(sizeTree) || defaultItemSize !== undefined) &&
+            !scrolledToInitialItem);
     }), u.withLatestFrom(initialTopMostItemIndex)), function (_a) {
         var _b = tslib_1.__read(_a, 2), initialTopMostItemIndex = _b[1];
-        u.handleNext(scrollTop, function () {
-            u.publish(scrolledToInitialItem, true);
+        setTimeout(function () {
+            u.handleNext(scrollTop, function () {
+                u.publish(scrolledToInitialItem, true);
+            });
+            u.publish(scrollToIndex, initialTopMostItemIndex);
         });
-        u.publish(scrollToIndex, initialTopMostItemIndex);
     });
     return {
         scrolledToInitialItem: scrolledToInitialItem,

package/components/Virtuoso/react-virtuoso/interfaces.d.ts

@@ -1,13 +1,14 @@
-import { ComponentPropsWithRef, ComponentType, CSSProperties, Key, ReactNode } from 'react';
+import { ComponentPropsWithRef, ComponentType, Key, ReactNode } from 'react';
 export interface ListRange {
     startIndex: number;
     endIndex: number;
 }
-export interface ItemContent<D> {
-    (index: number, data: D): ReactNode;
+export interface ItemContent<D, C> {
+    (index: number, data: D, context: C): ReactNode;
 }
-export interface GroupItemContent<D> {
-    (index: number, groupIndex: number, data: D): ReactNode;
+export declare type FixedHeaderContent = (() => React.ReactChildren | React.ReactNode) | null;
+export interface GroupItemContent<D, C> {
+    (index: number, groupIndex: number, data: D, context: C): ReactNode;
 }
 export interface GroupContent {
     (index: number): ReactNode;
@@ -24,10 +25,19 @@ export interface GroupProps {
     'data-known-size': number;
 }
 export declare type TopItemListProps = Pick<ComponentPropsWithRef<'div'>, 'style' | 'children'>;
+export declare type TableProps = Pick<ComponentPropsWithRef<'table'>, 'style'>;
+/**
+ * Passed to the Components.TableBody custom component
+ */
+export declare type TableBodyProps = Pick<ComponentPropsWithRef<'tbody'>, 'style' | 'children' | 'ref' | 'className'> & {
+    'data-test-id': string;
+};
 /**
  * Passed to the Components.List custom component
  */
-export declare type ListProps = Pick<ComponentPropsWithRef<'div'>, 'style' | 'children' | 'ref'>;
+export declare type ListProps = Pick<ComponentPropsWithRef<'div'>, 'style' | 'children' | 'ref'> & {
+    'data-test-id': string;
+};
 /**
  * Passed to the Components.List custom component
  */
@@ -35,61 +45,142 @@ export declare type GridListProps = Pick<ComponentPropsWithRef<'div'>, 'style' |
 /**
  * Passed to the Components.Scroller custom component
  */
-export declare type ScrollerProps = Pick<ComponentPropsWithRef<'div'>, 'style' | 'children' | 'tabIndex' | 'ref'>;
+export declare type ScrollerProps = Pick<ComponentPropsWithRef<'div'>, 'style' | 'children' | 'tabIndex' | 'ref'> & {
+    'data-test-id'?: string;
+    'data-virtuoso-scroller'?: boolean;
+};
 /**
  * Passed to the Components.ScrollSeekPlaceholder custom component
  */
 export interface ScrollSeekPlaceholderProps {
     index: number;
     height: number;
+    groupIndex?: number;
+    type: 'group' | 'item';
+}
+/**
+ * Passed to the GridComponents.ScrollSeekPlaceholder custom component
+ */
+export interface GridScrollSeekPlaceholderProps {
+    index: number;
+    height: number;
+    width: number;
 }
 /**
  * Customize the Virtuoso rendering by passing a set of custom components.
  */
-export interface Components {
+export interface Components<Context = unknown> {
     /**
      * Set to render a component at the top of the list.
      *
      * The header remains above the top items and does not remain sticky.
      */
-    Header?: ComponentType;
+    Header?: ComponentType<{
+        context?: Context;
+    }>;
     /**
      * Set to render a component at the bottom of the list.
      */
-    Footer?: ComponentType;
+    Footer?: ComponentType<{
+        context?: Context;
+    }>;
     /**
      * Set to customize the item wrapping element. Use only if you would like to render list from elements different than a `div`.
      */
-    Item?: ComponentType<ItemProps>;
+    Item?: ComponentType<ItemProps & {
+        context?: Context;
+    }>;
     /**
      * Set to customize the group item wrapping element. Use only if you would like to render list from elements different than a `div`.
      */
-    Group?: ComponentType<GroupProps>;
+    Group?: ComponentType<GroupProps & {
+        context?: Context;
+    }>;
     /**
      * Set to customize the top list item wrapping element. Use if you would like to render list from elements different than a `div`
      * or you want to set a custom z-index for the sticky position.
      */
-    TopItemList?: ComponentType<TopItemListProps>;
+    TopItemList?: ComponentType<TopItemListProps & {
+        context?: Context;
+    }>;
     /**
      * Set to customize the outermost scrollable element. This should not be necessary in general,
      * as the component passes its HTML attribute props to it.
      */
-    Scroller?: ComponentType<ScrollerProps>;
+    Scroller?: ComponentType<ScrollerProps & {
+        context?: Context;
+    }>;
     /**
      * Set to customize the items wrapper. Use only if you would like to render list from elements different than a `div`.
      */
-    List?: ComponentType<ListProps>;
+    List?: ComponentType<ListProps & {
+        context?: Context;
+    }>;
     /**
      * Set to render a custom UI when the list is empty.
      */
-    EmptyPlaceholder?: ComponentType;
+    EmptyPlaceholder?: ComponentType<{
+        context?: Context;
+    }>;
     /**
      * Set to render an item placeholder when the user scrolls fast.  See the `scrollSeek` property for more details.
      */
-    ScrollSeekPlaceholder?: ComponentType<ScrollSeekPlaceholderProps>;
+    ScrollSeekPlaceholder?: ComponentType<ScrollSeekPlaceholderProps & {
+        context?: Context;
+    }>;
 }
-export interface ComputeItemKey {
-    (index: number): Key;
+/**
+ * Customize the TableVirtuoso rendering by passing a set of custom components.
+ */
+export interface TableComponents<Context = unknown> {
+    /**
+     * Set to customize the wrapping `table` element.
+     *
+     */
+    Table?: ComponentType<TableProps & {
+        context?: Context;
+    }>;
+    /**
+     * Set to render a fixed header at the top of the table (`thead`). use [[fixedHeaderHeight]] to set the contents
+     *
+     */
+    TableHead?: ComponentType<{
+        context?: Context;
+    }>;
+    /**
+     * Set to customize the item wrapping element. Default is `tr`.
+     */
+    TableRow?: ComponentType<ItemProps & {
+        context?: Context;
+    }>;
+    /**
+     * Set to customize the outermost scrollable element. This should not be necessary in general,
+     * as the component passes its HTML attribute props to it.
+     */
+    Scroller?: ComponentType<ScrollerProps & {
+        context?: Context;
+    }>;
+    /**
+     * Set to customize the items wrapper. Default is `tbody`.
+     */
+    TableBody?: ComponentType<TableBodyProps & {
+        context?: Context;
+    }>;
+    /**
+     * Set to render a custom UI when the list is empty.
+     */
+    EmptyPlaceholder?: ComponentType<{
+        context?: Context;
+    }>;
+    /**
+     * Set to render an item placeholder when the user scrolls fast.  See the `scrollSeek` property for more details.
+     */
+    ScrollSeekPlaceholder?: ComponentType<ScrollSeekPlaceholderProps & {
+        context?: Context;
+    }>;
+}
+export interface ComputeItemKey<D, C> {
+    (index: number, item: D, context: C): Key;
 }
 export interface ScrollSeekToggle {
     (velocity: number, range: ListRange): boolean;
@@ -132,7 +223,7 @@ export interface IndexLocationWithAlign {
     /**
      * The index of the item to scroll to.
      */
-    index: number;
+    index: number | 'LAST';
     /**
      * How to position the item in the viewport.
      */
@@ -147,38 +238,53 @@ export interface IndexLocationWithAlign {
     offset?: number;
 }
 export declare type ListRootProps = Omit<React.HTMLProps<'div'>, 'ref' | 'data'>;
+export declare type TableRootProps = Omit<React.HTMLProps<'table'>, 'ref' | 'data'>;
 export declare type GridRootProps = Omit<React.HTMLProps<'div'>, 'ref' | 'data'>;
 export interface GridItem {
     'data-index': number;
     className?: string;
 }
-export interface GridComponents {
+export interface GridComponents<Context = any> {
     /**
      * Set to customize the item wrapping element. Use only if you would like to render list from elements different than a `div`.
      */
-    Item?: ComponentType<GridItem>;
+    Item?: ComponentType<GridItem & {
+        context?: Context;
+    }>;
     /**
      * Set to customize the outermost scrollable element. This should not be necessary in general,
      * as the component passes its HTML attribute props to it.
      */
-    Scroller?: ComponentType<ScrollerProps>;
+    Scroller?: ComponentType<ScrollerProps & {
+        context?: Context;
+    }>;
     /**
      * Set to customize the items wrapper. Use only if you would like to render list from elements different than a `div`.
      */
-    List?: ComponentType<GridListProps>;
+    List?: ComponentType<GridListProps & {
+        context?: Context;
+    }>;
     /**
      * Set to render an item placeholder when the user scrolls fast.
      * See the `scrollSeekConfiguration` property for more details.
      */
-    ScrollSeekPlaceholder?: ComponentType<{
-        style: CSSProperties;
+    ScrollSeekPlaceholder?: ComponentType<GridScrollSeekPlaceholderProps & {
+        context?: Context;
     }>;
 }
-export interface GridItemContent {
-    (index: number): ReactNode;
+export interface GridComputeItemKey {
+    (index: number): Key;
+}
+export interface GridItemContent<C> {
+    (index: number, context: C): ReactNode;
 }
 export interface WindowViewportInfo {
     offsetTop: number;
     visibleHeight: number;
     visibleWidth: number;
 }
+export interface ScrollIntoViewLocation {
+    index: number;
+    behavior?: 'auto' | 'smooth';
+    done?: () => void;
+}