@ringcentral/juno 2.8.1 → 2.11.0

package/es6/components/Virtuoso/react-virtuoso/hooks/useScrollTop.js

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef } from 'react';
 import * as u from '@virtuoso.dev/urx';
-import { correctItemSize } from '../utils/correctItemSize';
 import { useRcPortalWindowContext } from '../../../../foundation';
+import { correctItemSize } from '../utils/correctItemSize';
 function approximatelyEqual(num1, num2) {
     return Math.abs(num1 - num2) < 1.01;
 }
@@ -21,7 +21,14 @@ export default function useScrollTop(scrollContainerStateCallback, smoothScrollT
         var scrollHeight = el === externalWindow
             ? externalWindow.document.documentElement.scrollHeight
             : el.scrollHeight;
-        scrollContainerStateCallback([Math.max(scrollTop, 0), scrollHeight]);
+        var viewportHeight = el === externalWindow
+            ? externalWindow.innerHeight
+            : el.offsetHeight;
+        scrollContainerStateCallback({
+            scrollTop: Math.max(scrollTop, 0),
+            scrollHeight: scrollHeight,
+            viewportHeight: viewportHeight,
+        });
         if (scrollTopTarget.current !== null) {
             if (scrollTop === scrollTopTarget.current ||
                 scrollTop <= 0 ||
@@ -66,7 +73,7 @@ export default function useScrollTop(scrollContainerStateCallback, smoothScrollT
         if (scrollerElement === externalWindow) {
             // this is not a mistake
             scrollHeight = Math.max(correctItemSize(externalWindow.document.documentElement, 'height'), externalWindow.document.documentElement.scrollHeight);
-            offsetHeight = externalWindow.window.innerHeight;
+            offsetHeight = externalWindow.innerHeight;
             scrollTop = externalWindow.document.documentElement.scrollTop;
         }
         else {
@@ -81,7 +88,11 @@ export default function useScrollTop(scrollContainerStateCallback, smoothScrollT
         // scroller is already at this location
         if (approximatelyEqual(offsetHeight, scrollHeight) ||
             location.top === scrollTop) {
-            scrollContainerStateCallback([scrollTop, scrollHeight]);
+            scrollContainerStateCallback({
+                scrollTop: scrollTop,
+                scrollHeight: scrollHeight,
+                viewportHeight: offsetHeight,
+            });
             if (isSmooth) {
                 smoothScrollTargetReached(true);
             }
@@ -104,9 +115,7 @@ export default function useScrollTop(scrollContainerStateCallback, smoothScrollT
         scrollerElement.scrollTo(location);
     }
     function scrollByCallback(location) {
-        if (scrollTopTarget.current === null) {
-            scrollerRef.current.scrollBy(location);
-        }
+        scrollerRef.current.scrollBy(location);
     }
     return { scrollerRef: scrollerRef, scrollByCallback: scrollByCallback, scrollToCallback: scrollToCallback };
 }

package/es6/components/Virtuoso/react-virtuoso/hooks/useWindowViewportRect.js

@@ -10,8 +10,8 @@ export default function useWindowViewportRectRef(callback, customScrollParent) {
         }
         var rect = element.getBoundingClientRect();
         var visibleWidth = rect.width;
-        var visibleHeight;
-        var offsetTop;
+        // eslint-disable-next-line one-var
+        var visibleHeight, offsetTop;
         if (customScrollParent) {
             var customScrollParentRect = customScrollParent.getBoundingClientRect();
             var deltaTop = rect.top - customScrollParentRect.top;

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

@@ -21,7 +21,7 @@ export var initialTopMostItemIndexSystem = u.system(function (_a) {
     u.connect(u.pipe(didMount, u.withLatestFrom(initialTopMostItemIndex), 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     u.filter(function (_a) {
-        var _b = __read(_a, 2), location = _b[1];
+        var _b = __read(_a, 2), _ = _b[0], location = _b[1];
         return !!location;
     }), u.mapTo(false)), scrolledToInitialItem);
     u.subscribe(u.pipe(u.combineLatest(listRefresh, didMount), u.withLatestFrom(scrolledToInitialItem, sizes, defaultItemSize), u.filter(function (_a) {

package/es6/components/Virtuoso/react-virtuoso/stateFlagsSystem.js

@@ -29,7 +29,7 @@ export var stateFlagsSystem = u.system(function (_a) {
     u.connect(u.pipe(u.duc(scrollTop), u.map(function (top) { return top === 0; }), u.distinctUntilChanged()), isAtTop);
     u.connect(isAtTop, atTopStateChange);
     var atBottomState = u.streamFromEmitter(u.pipe(u.combineLatest(scrollContainerState, u.duc(viewportHeight), u.duc(headerHeight), u.duc(footerHeight), u.duc(atBottomThreshold)), u.scan(function (current, _a) {
-        var _b = __read(_a, 5), _c = __read(_b[0], 2), scrollTop = _c[0], scrollHeight = _c[1], viewportHeight = _b[1], _headerHeight = _b[2], _footerHeight = _b[3], atBottomThreshold = _b[4];
+        var _b = __read(_a, 5), _c = _b[0], scrollTop = _c.scrollTop, scrollHeight = _c.scrollHeight, viewportHeight = _b[1], _headerHeight = _b[2], _footerHeight = _b[3], atBottomThreshold = _b[4];
         var isAtBottom = scrollTop + viewportHeight - scrollHeight > -atBottomThreshold;
         var state = {
             viewportHeight: viewportHeight,
@@ -78,9 +78,10 @@ export var stateFlagsSystem = u.system(function (_a) {
         return prev && prev.atBottom === next.atBottom;
     })));
     var lastJumpDueToItemResize = u.statefulStreamFromEmitter(u.pipe(scrollContainerState, u.scan(function (current, _a) {
-        var _b = __read(_a, 2), scrollTop = _b[0], scrollHeight = _b[1];
+        var scrollTop = _a.scrollTop, scrollHeight = _a.scrollHeight, viewportHeight = _a.viewportHeight;
         if (current.scrollHeight !== scrollHeight) {
-            if (current.scrollTop !== scrollTop) {
+            var atBottom = scrollTop === scrollHeight - viewportHeight;
+            if (current.scrollTop !== scrollTop && atBottom) {
                 return {
                     scrollHeight: scrollHeight,
                     scrollTop: scrollTop,
@@ -106,7 +107,7 @@ export var stateFlagsSystem = u.system(function (_a) {
     u.connect(u.pipe(isAtBottom, u.throttleTime(50)), atBottomStateChange);
     var scrollDirection = u.statefulStream(DOWN);
     u.connect(u.pipe(scrollContainerState, u.map(function (_a) {
-        var _b = __read(_a, 1), scrollTop = _b[0];
+        var scrollTop = _a.scrollTop;
         return scrollTop;
     }), u.distinctUntilChanged(), u.scan(function (acc, scrollTop) {
         // if things change while compensating for items, ignore,

package/es6/components/Virtuoso/react-virtuoso/totalListHeightSystem.js

@@ -7,6 +7,10 @@ export var totalListHeightSystem = u.system(function (_a) {
     var totalListHeightChanged = u.stream();
     var totalListHeight = u.statefulStreamFromEmitter(u.pipe(u.combineLatest(footerHeight, headerHeight, listState), u.map(function (_a) {
         var _b = __read(_a, 3), footerHeight = _b[0], headerHeight = _b[1], listState = _b[2];
+        // FIXME: this footerHeight, headerHeight calculate is not correct, should find where to apply totalListHeightSystem
+        // console.log('-------- [totalListHeightSystem Log] --------');
+        // console.log(footerHeight, headerHeight, listState);
+        // console.log('---------------- [Log End] ----------------');
         return (footerHeight +
             headerHeight +
             listState.offsetBottom +

package/es6/components/Virtuoso/react-virtuoso/upwardScrollFixSystem.js

@@ -1,5 +1,4 @@
 import { __read } from "tslib";
-/* eslint-disable no-continue */
 import * as u from '@virtuoso.dev/urx';
 import { domIOSystem } from './domIOSystem';
 import { listStateSystem } from './listStateSystem';
@@ -11,49 +10,27 @@ import { stateFlagsSystem, UP } from './stateFlagsSystem';
  */
 export var upwardScrollFixSystem = u.system(function (_a) {
     var _b = __read(_a, 5), _c = _b[0], scrollBy = _c.scrollBy, scrollTop = _c.scrollTop, deviation = _c.deviation, scrollingInProgress = _c.scrollingInProgress, _d = _b[1], isScrolling = _d.isScrolling, isAtBottom = _d.isAtBottom, atBottomState = _d.atBottomState, scrollDirection = _d.scrollDirection, lastJumpDueToItemResize = _d.lastJumpDueToItemResize, listState = _b[2].listState, _e = _b[3], beforeUnshiftWith = _e.beforeUnshiftWith, shiftWithOffset = _e.shiftWithOffset, sizes = _e.sizes, log = _b[4].log;
-    var deviationOffset = u.streamFromEmitter(u.pipe(listState, u.withLatestFrom(lastJumpDueToItemResize), u.scan(function (_a, 
-    // @ts-ignore
-    _b) {
-        var _c = __read(_a, 3), prevItems = _c[1], prevTotalCount = _c[2];
-        var 
+    var deviationOffset = u.streamFromEmitter(u.pipe(listState, u.withLatestFrom(lastJumpDueToItemResize), u.scan(function (_a, _b) {
+        var _c = __read(_a, 4), prevItems = _c[1], prevTotalCount = _c[2], prevTotalHeight = _c[3];
+        var _d = __read(_b, 2), 
         // @ts-ignore
-        _d = __read(_b, 2), _e = _d[0], items = _e.items, totalCount = _e.totalCount, lastJumpDueToItemResize = _d[1];
+        _e = _d[0], items = _e.items, totalCount = _e.totalCount, bottom = _e.bottom, offsetBottom = _e.offsetBottom, lastJumpDueToItemResize = _d[1];
+        var totalHeight = bottom + offsetBottom;
         var newDev = 0;
         if (prevTotalCount === totalCount) {
             if (prevItems.length > 0 && items.length > 0) {
-                var firstItemIndex = items[0].originalIndex;
-                var prevFirstItemIndex = prevItems[0].originalIndex;
-                var atStart = firstItemIndex === 0 && prevFirstItemIndex === 0;
-                var onlyItem = items.length === 1;
+                var atStart = items[0].originalIndex === 0 &&
+                    prevItems[0].originalIndex === 0;
                 if (!atStart) {
-                    var _loop_1 = function (index) {
-                        var item = items[index];
-                        var prevItem = prevItems.find(function (pItem) { return pItem.originalIndex === item.originalIndex; });
-                        if (!prevItem) {
-                            return "continue";
-                        }
-                        if (item.offset !== prevItem.offset || onlyItem) {
-                            newDev =
-                                item.offset -
-                                    prevItem.offset +
-                                    item.size -
-                                    prevItem.size;
-                            return "break";
-                        }
-                    };
-                    for (var index = items.length - 1; index >= 0; index--) {
-                        var state_1 = _loop_1(index);
-                        if (state_1 === "break")
-                            break;
+                    newDev = totalHeight - prevTotalHeight;
+                    if (newDev !== 0) {
+                        newDev += lastJumpDueToItemResize;
                     }
                 }
             }
-            if (newDev !== 0) {
-                newDev += lastJumpDueToItemResize;
-            }
         }
-        return [newDev, items, totalCount];
-    }, [0, [], 0]), u.filter(function (_a) {
+        return [newDev, items, totalCount, totalHeight];
+    }, [0, [], 0, 0]), u.filter(function (_a) {
         var _b = __read(_a, 1), amount = _b[0];
         return amount !== 0;
     }), u.withLatestFrom(scrollTop, scrollDirection, scrollingInProgress, log, isAtBottom, atBottomState), u.filter(function (_a) {

package/es6/components/Virtuoso/react-virtuoso/utils/conditionalFlushSync.js

@@ -0,0 +1,4 @@
+import { flushSync } from 'react-dom';
+export default function conditionalFlushSync(flag) {
+    return flag ? flushSync : function (cb) { return cb(); };
+}

package/es6/components/Virtuoso/react-virtuoso/windowScrollerSystem.js

@@ -9,8 +9,12 @@ export var windowScrollerSystem = u.system(function (_a) {
     var useWindowScroll = u.statefulStream(false);
     var customScrollParent = u.statefulStream(undefined);
     u.connect(u.pipe(u.combineLatest(windowScrollContainerState, windowViewportRect), u.map(function (_a) {
-        var _b = __read(_a, 2), _c = __read(_b[0], 2), windowScrollTop = _c[0], scrollHeight = _c[1], offsetTop = _b[1].offsetTop;
-        return [Math.max(0, windowScrollTop - offsetTop), scrollHeight];
+        var _b = __read(_a, 2), _c = _b[0], viewportHeight = _c.viewportHeight, windowScrollTop = _c.scrollTop, scrollHeight = _c.scrollHeight, offsetTop = _b[1].offsetTop;
+        return {
+            scrollTop: Math.max(0, windowScrollTop - offsetTop),
+            scrollHeight: scrollHeight,
+            viewportHeight: viewportHeight,
+        };
     })), scrollContainerState);
     u.connect(u.pipe(scrollTo, u.withLatestFrom(windowViewportRect), u.map(function (_a) {
         var _b = __read(_a, 2), scrollTo = _b[0], offsetTop = _b[1].offsetTop;

package/es6/components/Virtuoso/utils/useHighlightScroll.js

@@ -1,5 +1,4 @@
 import { useRef } from 'react';
-import { fixWebKitTransitionStyle } from '../../../foundation';
 /**
  * scroll into current highlight index
  */
@@ -105,7 +104,7 @@ export function useHighlightScroll(_a) {
 export function modifyVlScrollerStyle(scrollElm, position) {
     if (position === void 0) { position = 'absolute'; }
     if (scrollElm) {
-        scrollElm.style.transition = fixWebKitTransitionStyle;
+        scrollElm.style.transition = 'all 1ms cubic-bezier(0.4, 0, 0.2, 1) 0ms';
         if (position) {
             var viewPortElm = scrollElm.firstChild;
             if (viewPortElm) {

package/es6/foundation/theme/assets/palette.light.json

@@ -39,9 +39,9 @@
         "textHint": "rgba(255,255,255,0.88)"
     },
     "disabled": {
-        "b01": "#B9B9B9",
-        "f01": "#FFFFFF",
-        "f02": "#B9B9B9"
+        "b01": "#E5E5E5",
+        "f01": "#939393",
+        "f02": "#C7C7C7"
     },
     "error": {
         "main": "#D63E39"

package/es6/foundation/theme/createTheme.js

@@ -1,5 +1,5 @@
 import { __assign } from "tslib";
-import { createTheme as createMuiTheme } from '@material-ui/core/styles';
+import { createTheme as createMuiTheme, } from '@material-ui/core/styles';
 import { deepmerge } from '../utils';
 import breakpoints from './assets/breakpoints.json';
 import opacity from './assets/opacity.json';

package/foundation/theme/ThemeHandler.d.ts

@@ -15,7 +15,7 @@ export declare class RcThemeHandler {
     setTheme(themeOptions: RcThemeInput, isEmit?: boolean): RcTheme;
     /** Set Theme Name with read static json file */
     setThemeName(name: string): Promise<void>;
-    read(theme: string): Promise<import("..").DeepPartial<RcTheme>>;
+    read(theme: string): Promise<import("type-fest/source/partial-deep").PartialObjectDeep<Pick<RcTheme, "direction" | "opacity" | "radius" | "props" | "palette" | "typography" | "shape" | "breakpoints" | "mixins" | "overrides" | "shadows" | "transitions" | "zIndex" | "unstable_strictMode">>>;
     loadUrl(url: string): Promise<RcThemeInput>;
 }
 export {};

package/foundation/theme/ThemeSwitcherProvider/ThemeSwitcherProvider.d.ts

@@ -1,7 +1,7 @@
 import { FunctionComponent } from 'react';
 import { RcThemeSwitcherProviderProps } from './ThemeContext';
-export declare const RcDefaultDarkTheme: import("../..").DeepPartial<import("../theme.type").RcTheme>;
-export declare const RcDefaultHighContrastTheme: import("../..").DeepPartial<import("../theme.type").RcTheme>;
+export declare const RcDefaultDarkTheme: import("type-fest/source/partial-deep").PartialObjectDeep<Pick<import("../theme.type").RcTheme, "direction" | "opacity" | "radius" | "props" | "palette" | "typography" | "shape" | "breakpoints" | "mixins" | "overrides" | "shadows" | "transitions" | "zIndex" | "unstable_strictMode">>;
+export declare const RcDefaultHighContrastTheme: import("type-fest/source/partial-deep").PartialObjectDeep<Pick<import("../theme.type").RcTheme, "direction" | "opacity" | "radius" | "props" | "palette" | "typography" | "shape" | "breakpoints" | "mixins" | "overrides" | "shadows" | "transitions" | "zIndex" | "unstable_strictMode">>;
 export declare const RcThemeSwitcherDefaultTheme: {
     defaultTheme: string;
     themeMap: {

package/foundation/theme/assets/palette.light.json

@@ -39,9 +39,9 @@
         "textHint": "rgba(255,255,255,0.88)"
     },
     "disabled": {
-        "b01": "#B9B9B9",
-        "f01": "#FFFFFF",
-        "f02": "#B9B9B9"
+        "b01": "#E5E5E5",
+        "f01": "#939393",
+        "f02": "#C7C7C7"
     },
     "error": {
         "main": "#D63E39"

package/foundation/theme/theme.type.d.ts

@@ -79,7 +79,7 @@ export declare type RcTheme = {
     zIndex: ZIndex;
     shape: Shape;
     breakpoints: Breakpoints;
-} & Omit<MuiTheme, 'palette'> & DefaultTheme & {
+} & Omit<MuiTheme, 'palette' | 'typography'> & DefaultTheme & {
     props?: {
         RcAccordion?: RcAccordionProps;
         RcAccordionDetails?: RcAccordionDetailsProps;
@@ -213,5 +213,5 @@ export declare type RcThemeProps = {
     theme: RcTheme;
 };
 export declare type RcThemedStyled<T = any, K = (themeOptions: RcThemeProps) => any> = (props: ThemedStyledProps<T, RcTheme>) => K;
-export declare type RcThemeInput = DeepPartial<RcTheme>;
+export declare type RcThemeInput = DeepPartial<Omit<RcTheme, 'spacing'>>;
 export {};

package/foundation/typings/deepPartial.d.ts

@@ -1,3 +1 @@
-export declare type DeepPartial<T> = {
-    [P in keyof T]?: T[P] extends Array<infer U> ? Array<DeepPartial<U>> : T[P] extends ReadonlyArray<infer U> ? ReadonlyArray<DeepPartial<U>> : T[P] extends Record<any, any> ? DeepPartial<T[P]> : T[P];
-};
+export type { PartialDeep as DeepPartial } from 'type-fest/source/partial-deep';

package/foundation/utils/deepmerge.d.ts

@@ -1,4 +1,5 @@
+import { DeepPartial } from '../typings';
 /** deep merge two object */
-declare function deepmerge<T>(x: Partial<T>, y: Partial<T>): T;
-declare function deepmerge<T1, T2>(x: Partial<T1>, y: Partial<T2>): T1 & T2;
+declare function deepmerge<T>(x: DeepPartial<T>, y: DeepPartial<T>): T;
+declare function deepmerge<T1, T2>(x: DeepPartial<T1>, y: DeepPartial<T2>): T1 & T2;
 export { deepmerge };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ringcentral/juno",
-  "version": "2.8.1",
+  "version": "2.11.0",
   "author": "RingCentral",
   "license": "MIT",
   "main": "./index.js",
@@ -27,9 +27,10 @@
     "focus-visible": "^5.1.0",
     "lodash": "^4.17.21",
     "react-beautiful-dnd": "^13.0.0",
-    "react-virtuoso": "^2.8.3",
+    "react-virtuoso": "^2.10.1",
     "resize-observer-polyfill": "^1.5.1",
     "typeface-lato": "^0.0.75",
+    "type-fest": "^2.12.2",
     "tslib": ">=2.0.0"
   },
   "peerDependencies": {