@ringcentral/juno 2.4.1 → 2.5.0

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

@@ -5,41 +5,41 @@ var tslib_1 = require("tslib");
 var u = tslib_1.__importStar(require("@virtuoso.dev/urx"));
 var domIOSystem_1 = require("./domIOSystem");
 var listStateSystem_1 = require("./listStateSystem");
+var loggerSystem_1 = require("./loggerSystem");
 var sizeSystem_1 = require("./sizeSystem");
 var stateFlagsSystem_1 = require("./stateFlagsSystem");
 /**
  * Fixes upward scrolling by calculating and compensation from changed item heights, using scrollBy.
  */
 exports.upwardScrollFixSystem = u.system(function (_a) {
-    var _b = tslib_1.__read(_a, 4), _c = _b[0], scrollBy = _c.scrollBy, scrollTop = _c.scrollTop, scrollDirection = _c.scrollDirection, deviation = _c.deviation, scrollingInProgress = _c.scrollingInProgress, isScrolling = _b[1].isScrolling, listState = _b[2].listState, _d = _b[3], beforeUnshiftWith = _d.beforeUnshiftWith, sizes = _d.sizes;
-    var deviationOffset = u.streamFromEmitter(u.pipe(listState, u.withLatestFrom(scrollTop, scrollDirection, scrollingInProgress), u.filter(function (_a) {
-        var _b = tslib_1.__read(_a, 4), scrollTop = _b[1], scrollDirection = _b[2], scrollingInProgress = _b[3];
-        return (!scrollingInProgress && scrollTop !== 0 && scrollDirection === domIOSystem_1.UP);
-    }), u.map(function (_a) {
-        var _b = tslib_1.__read(_a, 1), state = _b[0];
-        return state;
-    }), u.scan(function (_a, _b) {
-        var _c = tslib_1.__read(_a, 2), prevItems = _c[1];
-        var items = _b.items;
+    var _b = tslib_1.__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 = tslib_1.__read(_a, 3), prevItems = _c[1], prevTotalCount = _c[2];
+        var 
+        // @ts-ignore
+        _d = tslib_1.__read(_b, 2), _e = _d[0], items = _e.items, totalCount = _e.totalCount, lastJumpDueToItemResize = _d[1];
         var newDev = 0;
-        if (prevItems.length > 0 && items.length > 0) {
-            var firstItemIndex = items[0].originalIndex;
-            var prevFirstItemIndex = prevItems[0].originalIndex;
-            var atStart = firstItemIndex === 0 && prevFirstItemIndex === 0;
-            if (!atStart) {
-                // Handles an item taller than the viewport
-                if (firstItemIndex === prevFirstItemIndex) {
-                    newDev = items[0].size - prevItems[0].size;
-                }
-                else {
+        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;
+                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) {
-                            newDev = item.offset - prevItem.offset;
+                        if (item.offset !== prevItem.offset || onlyItem) {
+                            newDev =
+                                item.offset -
+                                    prevItem.offset +
+                                    item.size -
+                                    prevItem.size;
                             return "break";
                         }
                     };
@@ -50,13 +50,21 @@ exports.upwardScrollFixSystem = u.system(function (_a) {
                     }
                 }
             }
+            if (newDev !== 0) {
+                newDev += lastJumpDueToItemResize;
+            }
         }
-        return [newDev, items];
-    }, [0, []]), u.filter(function (_a) {
+        return [newDev, items, totalCount];
+    }, [0, [], 0]), u.filter(function (_a) {
         var _b = tslib_1.__read(_a, 1), amount = _b[0];
         return amount !== 0;
+    }), u.withLatestFrom(scrollTop, scrollDirection, scrollingInProgress, log, isAtBottom, atBottomState), u.filter(function (_a) {
+        var _b = tslib_1.__read(_a, 4), scrollTop = _b[1], scrollDirection = _b[2], scrollingInProgress = _b[3];
+        // console.log({ amount, scrollTop, scrollDirection, scrollingInProgress, isAtBottom, atBottomState })
+        return (!scrollingInProgress && scrollTop !== 0 && scrollDirection === stateFlagsSystem_1.UP); // && (isAtBottom ? amount > 0 : true)
     }), u.map(function (_a) {
-        var _b = tslib_1.__read(_a, 1), amount = _b[0];
+        var _b = tslib_1.__read(_a, 5), _c = tslib_1.__read(_b[0], 1), amount = _c[0], log = _b[4];
+        log('Upward scrolling compensation', { amount: amount }, loggerSystem_1.LogLevel.DEBUG);
         return amount;
     })));
     u.connect(u.pipe(deviationOffset, u.withLatestFrom(deviation), u.map(function (_a) {
@@ -81,9 +89,12 @@ exports.upwardScrollFixSystem = u.system(function (_a) {
             u.publish(scrollBy, { top: -offset, behavior: 'auto' });
         }
     });
+    u.connect(u.pipe(shiftWithOffset, u.map(function (offset) {
+        return { top: -offset };
+    })), scrollBy);
     u.connect(u.pipe(beforeUnshiftWith, u.withLatestFrom(sizes), u.map(function (_a) {
         var _b = tslib_1.__read(_a, 2), offset = _b[0], lastSize = _b[1].lastSize;
         return offset * lastSize;
     })), deviationOffset);
     return { deviation: deviation };
-}, u.tup(domIOSystem_1.domIOSystem, stateFlagsSystem_1.stateFlagsSystem, listStateSystem_1.listStateSystem, sizeSystem_1.sizeSystem));
+}, u.tup(domIOSystem_1.domIOSystem, stateFlagsSystem_1.stateFlagsSystem, listStateSystem_1.listStateSystem, sizeSystem_1.sizeSystem, loggerSystem_1.loggerSystem));

package/components/Virtuoso/react-virtuoso/utils/correctItemSize.d.ts

@@ -0,0 +1 @@
+export declare function correctItemSize(el: HTMLElement, dimension: 'height' | 'width'): number;

package/components/Virtuoso/react-virtuoso/utils/correctItemSize.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function correctItemSize(el, dimension) {
+    return Math.round(el.getBoundingClientRect()[dimension]);
+}
+exports.correctItemSize = correctItemSize;

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

@@ -1,32 +1,35 @@
 import * as u from '@virtuoso.dev/urx';
 import { WindowViewportInfo } from './interfaces';
 export declare const windowScrollerSystem: u.SystemSpec<[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>;
-}>], ([{ scrollTop, scrollTo }]: [{
+}>], ([{ scrollTo, scrollContainerState }]: [{
+    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>;
 }]) => {
     useWindowScroll: u.StatefulStream<boolean>;
-    windowScrollTop: u.Stream<number>;
+    customScrollParent: u.StatefulStream<HTMLElement | undefined>;
+    windowScrollContainerState: u.Stream<[number, number]>;
     windowViewportRect: u.Stream<WindowViewportInfo>;
     windowScrollTo: u.Stream<ScrollToOptions>;
 }>;

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

@@ -4,15 +4,16 @@ var tslib_1 = require("tslib");
 var u = tslib_1.__importStar(require("@virtuoso.dev/urx"));
 var domIOSystem_1 = require("./domIOSystem");
 exports.windowScrollerSystem = u.system(function (_a) {
-    var _b = tslib_1.__read(_a, 1), _c = _b[0], scrollTop = _c.scrollTop, scrollTo = _c.scrollTo;
+    var _b = tslib_1.__read(_a, 1), _c = _b[0], scrollTo = _c.scrollTo, scrollContainerState = _c.scrollContainerState;
+    var windowScrollContainerState = u.stream();
     var windowViewportRect = u.stream();
-    var windowScrollTop = u.stream();
     var windowScrollTo = u.stream();
     var useWindowScroll = u.statefulStream(false);
-    u.connect(u.pipe(u.combineLatest(windowScrollTop, windowViewportRect), u.map(function (_a) {
-        var _b = tslib_1.__read(_a, 2), windowScrollTop = _b[0], offsetTop = _b[1].offsetTop;
-        return Math.max(0, windowScrollTop - offsetTop);
-    })), scrollTop);
+    var customScrollParent = u.statefulStream(undefined);
+    u.connect(u.pipe(u.combineLatest(windowScrollContainerState, windowViewportRect), u.map(function (_a) {
+        var _b = tslib_1.__read(_a, 2), _c = tslib_1.__read(_b[0], 2), windowScrollTop = _c[0], scrollHeight = _c[1], offsetTop = _b[1].offsetTop;
+        return [Math.max(0, windowScrollTop - offsetTop), scrollHeight];
+    })), scrollContainerState);
     u.connect(u.pipe(scrollTo, u.withLatestFrom(windowViewportRect), u.map(function (_a) {
         var _b = tslib_1.__read(_a, 2), scrollTo = _b[0], offsetTop = _b[1].offsetTop;
         return tslib_1.__assign(tslib_1.__assign({}, scrollTo), { top: scrollTo.top + offsetTop });
@@ -20,8 +21,9 @@ exports.windowScrollerSystem = u.system(function (_a) {
     return {
         // config
         useWindowScroll: useWindowScroll,
+        customScrollParent: customScrollParent,
         // input
-        windowScrollTop: windowScrollTop,
+        windowScrollContainerState: windowScrollContainerState,
         windowViewportRect: windowViewportRect,
         // signals
         windowScrollTo: windowScrollTo,

package/components/Virtuoso/utils/useHighlightScroll.d.ts

@@ -30,4 +30,8 @@ export declare function useHighlightScroll({ containerHeighRef, scrollToIndex, }
      */
     itemsRendered: (e: ListItem<any>[]) => ListItem<any>[];
 };
+/**
+ * modify virtuoso style to fix safari scroll bug
+ */
+export declare function modifyVlScrollerStyle(scrollElm: HTMLElement, position?: 'absolute' | 'unset'): void;
 export {};

package/components/Virtuoso/utils/useHighlightScroll.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("react");
+var foundation_1 = require("../../../foundation");
 /**
  * scroll into current highlight index
  */
@@ -101,3 +102,19 @@ function useHighlightScroll(_a) {
     };
 }
 exports.useHighlightScroll = useHighlightScroll;
+/**
+ * modify virtuoso style to fix safari scroll bug
+ */
+function modifyVlScrollerStyle(scrollElm, position) {
+    if (position === void 0) { position = 'absolute'; }
+    if (scrollElm) {
+        scrollElm.style.transition = foundation_1.fixWebKitTransitionStyle;
+        if (position) {
+            var viewPortElm = scrollElm.firstChild;
+            if (viewPortElm) {
+                viewPortElm.style.position = position;
+            }
+        }
+    }
+}
+exports.modifyVlScrollerStyle = modifyVlScrollerStyle;

package/es6/components/Buttons/IconButton/IconButton.js

@@ -1,7 +1,7 @@
 import { __assign, __makeTemplateObject, __rest } from "tslib";
-import React, { forwardRef, memo } from 'react';
+import React, { forwardRef, memo, useMemo } from 'react';
 import clsx from 'clsx';
-import { combineProps, styled, useDeprecatedCheck, useTheme, useThemeProps, } from '../../../foundation';
+import { combineProps, styled, useDeprecatedCheck, useTheme, useThemeProps, combineClasses, } from '../../../foundation';
 import { RcIcon } from '../../Icon';
 import { RcTooltip, withTooltip } from '../../Tooltip';
 import { RcButtonBase } from '../ButtonBase';
@@ -15,16 +15,19 @@ var _RcIconButton = memo(forwardRef(function (inProps, ref) {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         useDeprecatedCheck(RcIconButton, props, rcIconButtonWarning);
     }
-    var _b = props.buttonRef, buttonRef = _b === void 0 ? ref : _b, className = props.className, classes = props.classes, children = props.children, title = props.title, symbol = props.symbol, disabled = props.disabled, invisible = props.invisible, type = props.type, loading = props.loading, TouchRippleProps = props.TouchRippleProps, variant = props.variant, CircularProgressProps = props.CircularProgressProps, color = props.color, shouldPersistBg = props.shouldPersistBg, stretchIcon = props.stretchIcon, iconColor = props.iconColor, iconSize = props.iconSize, disableTouchRipple = props.disableTouchRipple, useColorWhenDisabled = props.useColorWhenDisabled, size = props.size, radius = props.radius, elevation = props.elevation, activeElevation = props.activeElevation, aRef = props.aRef, tooltipTitle = props.tooltipTitle, tooltipForceHide = props.tooltipForceHide, disableToolTip = props.disableToolTip, alwaysEnableTooltip = props.alwaysEnableTooltip, tooltipPlacement = props.tooltipPlacement, ariaLabel = props.ariaLabel, popperProps = props.popperProps, externalLink = props.externalLink, download = props.download, autoFocus = props.autoFocus, href = props.href, rest = __rest(props, ["buttonRef", "className", "classes", "children", "title", "symbol", "disabled", "invisible", "type", "loading", "TouchRippleProps", "variant", "CircularProgressProps", "color", "shouldPersistBg", "stretchIcon", "iconColor", "iconSize", "disableTouchRipple", "useColorWhenDisabled", "size", "radius", "elevation", "activeElevation", "aRef", "tooltipTitle", "tooltipForceHide", "disableToolTip", "alwaysEnableTooltip", "tooltipPlacement", "ariaLabel", "popperProps", "externalLink", "download", "autoFocus", "href"]);
+    var _b = props.buttonRef, buttonRef = _b === void 0 ? ref : _b, className = props.className, classesProp = props.classes, children = props.children, title = props.title, disabledFakeBorder = props.disabledFakeBorder, symbol = props.symbol, disabled = props.disabled, invisible = props.invisible, type = props.type, loading = props.loading, TouchRippleProps = props.TouchRippleProps, variant = props.variant, CircularProgressProps = props.CircularProgressProps, color = props.color, shouldPersistBg = props.shouldPersistBg, stretchIcon = props.stretchIcon, iconColor = props.iconColor, iconSize = props.iconSize, disableTouchRipple = props.disableTouchRipple, useColorWhenDisabled = props.useColorWhenDisabled, size = props.size, radius = props.radius, elevation = props.elevation, activeElevation = props.activeElevation, aRef = props.aRef, tooltipTitle = props.tooltipTitle, tooltipForceHide = props.tooltipForceHide, disableToolTip = props.disableToolTip, alwaysEnableTooltip = props.alwaysEnableTooltip, tooltipPlacement = props.tooltipPlacement, ariaLabel = props.ariaLabel, popperProps = props.popperProps, externalLink = props.externalLink, download = props.download, autoFocus = props.autoFocus, href = props.href, rest = __rest(props, ["buttonRef", "className", "classes", "children", "title", "disabledFakeBorder", "symbol", "disabled", "invisible", "type", "loading", "TouchRippleProps", "variant", "CircularProgressProps", "color", "shouldPersistBg", "stretchIcon", "iconColor", "iconSize", "disableTouchRipple", "useColorWhenDisabled", "size", "radius", "elevation", "activeElevation", "aRef", "tooltipTitle", "tooltipForceHide", "disableToolTip", "alwaysEnableTooltip", "tooltipPlacement", "ariaLabel", "popperProps", "externalLink", "download", "autoFocus", "href"]);
     var theme = useTheme();
     var isOutline = variant === 'outline';
     var isContained = variant === 'contained';
+    var isInverse = variant === 'inverse';
     var isPlain = variant === 'plain';
-    var IconClassName = clsx(className, classes.root, RcIconButtonClasses.root, (_a = {},
-        _a[RcIconButtonClasses.disabled] = disabled,
-        _a[RcIconButtonClasses.invisible] = invisible,
-        _a[RcIconButtonClasses.outline] = isOutline,
-        _a[RcIconButtonClasses.contained] = isContained,
+    var classes = useMemo(function () { return combineClasses(RcIconButtonClasses, classesProp); }, [classesProp]);
+    var IconClassName = clsx(className, classes.root, (_a = {},
+        _a[classes.disabled] = disabled,
+        _a[classes.invisible] = invisible,
+        _a[classes.outline] = isOutline,
+        _a[classes.contained] = isContained,
+        _a[classes.inverse] = isInverse,
         _a));
     var iconButton = (function () {
         var _a, _b;
@@ -55,7 +58,6 @@ RcIconButton.defaultProps = {
     type: 'button',
     focusRipple: true,
     disableTouchRipple: true,
-    centerRipple: true,
     classes: {},
     useRcTooltip: true,
 };

package/es6/components/Buttons/IconButton/styles/StyledIconButton.js

@@ -1,5 +1,5 @@
 import { __makeTemplateObject } from "tslib";
-import { backgroundTransition, css, focusVisible, focusVisibleColor, getParsePaletteColor, nonTouchHoverMedia, palette2, paletteContrastText, px, radius, setOpacity, shadows, } from '../../../../foundation';
+import { backgroundTransition, css, focusVisible, focusVisibleColor, getParsePaletteColor, nonTouchHoverMedia, palette2, paletteContrastText, px, radius, setOpacity, shadows, fakeBorder, } from '../../../../foundation';
 import { RcIcon } from '../../../Icon';
 import { RcIconButtonClasses, RcIconButtonFocusVisibleInsetSize, RcIconButtonSizes, RcIconButtonTouchRippleClasses, } from '../utils';
 export var getFocusVisibleInsetSize = function (_a) {
@@ -20,7 +20,7 @@ export var plainIconButtonFocusStyle = function (_a) {
     return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  &:after {\n    content: '';\n    position: absolute;\n    ", ";\n    box-shadow: 0 0 0 1px ", ";\n    border-radius: ", ";\n    pointer-events: none;\n    z-index: 1;\n  }\n"], ["\n  &:after {\n    content: '';\n    position: absolute;\n    ", ";\n    box-shadow: 0 0 0 1px ", ";\n    border-radius: ", ";\n    pointer-events: none;\n    z-index: 1;\n  }\n"])), getFocusVisibleInsetSize, focusVisibleColor, radius(radiusProp));
 };
 export var iconButtonStyle = function (_a) {
-    var variant = _a.variant, size = _a.size, stretchIcon = _a.stretchIcon, color = _a.color, disabled = _a.disabled, useColorWhenDisabled = _a.useColorWhenDisabled, shouldPersistBg = _a.shouldPersistBg, radiusProp = _a.radius, elevation = _a.elevation, activeElevation = _a.activeElevation;
+    var variant = _a.variant, size = _a.size, stretchIcon = _a.stretchIcon, color = _a.color, disabled = _a.disabled, useColorWhenDisabled = _a.useColorWhenDisabled, shouldPersistBg = _a.shouldPersistBg, radiusProp = _a.radius, disableRipple = _a.disableRipple, elevation = _a.elevation, disabledFakeBorder = _a.disabledFakeBorder, activeElevation = _a.activeElevation;
     var iconSize = RcIconButtonSizes[size];
     var isCircle = ['plain', 'round', 'inverse', 'contained'].includes(variant);
     var isPlain = variant === 'plain';
@@ -34,19 +34,27 @@ export var iconButtonStyle = function (_a) {
     var persistBgColor = setOpacity(mainColor, isInverse ? '16' : '12');
     var defaultShadow = isContained ? shadows('1') : undefined;
     var nowShadow = elevation !== undefined ? shadows(elevation) : defaultShadow;
-    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n\n    width: ", ";\n    height: ", ";\n    color: ", ";\n    border-radius: ", ";\n    transition: ", ";\n    cursor: ", ";\n    background-color: ", ";\n    box-shadow: ", ";\n\n    ", ";\n\n    ", " {\n      font-size: ", ";\n    }\n\n    ", " {\n      &:hover {\n        background-color: ", ";\n\n        ", " {\n          color: ", ";\n        }\n      }\n    }\n\n    &:active {\n      ", " {\n        color: ", ";\n      }\n    }\n\n    ", " {\n      background-color: ", ";\n\n      &:active {\n        ", " {\n          color: ", ";\n        }\n      }\n\n      ", ";\n    }\n\n    &.", " {\n      background-color: ", ";\n    }\n\n    &.", " {\n      ", " {\n        color: ", ";\n      }\n\n      background-color: ", ";\n    }\n\n    &.", " {\n      opacity: 0;\n      visibility: hidden;\n      width: 0;\n      height: 0;\n    }\n\n    &.", " {\n      border: 1px solid ", ";\n    }\n\n    &.", " {\n      color: ", ";\n      background-color: ", ";\n\n      ", " {\n        &:hover {\n          background-color: ", ";\n\n          ", " {\n            color: ", ";\n          }\n        }\n      }\n\n      ", " {\n        background-color: ", ";\n\n        ", " {\n          color: ", ";\n        }\n      }\n\n      &:active {\n        background-color: ", ";\n\n        ", " {\n          color: ", ";\n        }\n      }\n    }\n\n    .", " {\n      border-radius: 0;\n      animation-name: none;\n      opacity: 0;\n    }\n\n    ", "\n  "], ["\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n\n    width: ", ";\n    height: ", ";\n    color: ", ";\n    border-radius: ", ";\n    transition: ", ";\n    cursor: ", ";\n    background-color: ", ";\n    box-shadow: ", ";\n\n    ",
+    var radiusValue = radius(currRadius);
+    var contrastColorBorder = !disabledFakeBorder &&
+        fakeBorder({
+            color: palette2('highContrast'),
+            radius: currRadius,
+            pseudo: true,
+        });
+    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n\n    width: ", ";\n    height: ", ";\n    color: ", ";\n    border-radius: ", ";\n    transition: ", ";\n    cursor: ", ";\n    background-color: ", ";\n    box-shadow: ", ";\n\n    ", ";\n\n    ", " {\n      font-size: ", ";\n    }\n\n    ", " {\n      &:hover {\n        background-color: ", ";\n\n        ", " {\n          color: ", ";\n        }\n      }\n    }\n\n    &:active {\n      ", " {\n        color: ", ";\n      }\n    }\n\n    ", " {\n      background-color: ", ";\n\n      &:active {\n        ", " {\n          color: ", ";\n        }\n      }\n\n      ", ";\n    }\n\n    &.", " {\n      background-color: ", ";\n    }\n\n    &.", " {\n      ", " {\n        color: ", ";\n      }\n\n      background-color: ", ";\n    }\n\n    &.", " {\n      opacity: 0;\n      visibility: hidden;\n      width: 0;\n      height: 0;\n    }\n\n    &.", " {\n      border: 1px solid ", ";\n    }\n\n    &.", " {\n      color: ", ";\n      background-color: ", ";\n\n      &:before {\n        content: '';\n        left: 0;\n        right: 0;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n        border-radius: ", ";\n        position: absolute;\n      }\n\n      ", ";\n\n      ", " {\n        &:hover {\n          &:before {\n            background-color: ", ";\n          }\n\n          ", " {\n            color: ", ";\n          }\n        }\n      }\n\n      ", " {\n        &:before {\n          background-color: ", ";\n        }\n\n        ", " {\n          color: ", ";\n        }\n      }\n\n      &:active {\n        ", "\n\n        ", " {\n          color: ", ";\n        }\n      }\n    }\n\n    &.", " {\n      ", ";\n    }\n\n    .", " {\n      border-radius: 0;\n      animation-name: none;\n      opacity: 0;\n    }\n\n    ", "\n  "], ["\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n\n    width: ", ";\n    height: ", ";\n    color: ", ";\n    border-radius: ", ";\n    transition: ", ";\n    cursor: ", ";\n    background-color: ", ";\n    box-shadow: ", ";\n\n    ",
         ";\n\n    ", " {\n      font-size: ",
         ";\n    }\n\n    ", " {\n      &:hover {\n        background-color: ",
         ";\n\n        ", " {\n          color: ", ";\n        }\n      }\n    }\n\n    &:active {\n      ", " {\n        color: ", ";\n      }\n    }\n\n    ", " {\n      background-color: ",
         ";\n\n      &:active {\n        ", " {\n          color: ", ";\n        }\n      }\n\n      ", ";\n    }\n\n    &.", " {\n      background-color: ", ";\n    }\n\n    &.", " {\n      ", " {\n        color: ",
-        ";\n      }\n\n      background-color: ", ";\n    }\n\n    &.", " {\n      opacity: 0;\n      visibility: hidden;\n      width: 0;\n      height: 0;\n    }\n\n    &.", " {\n      border: 1px solid ", ";\n    }\n\n    &.", " {\n      color: ", ";\n      background-color: ", ";\n\n      ", " {\n        &:hover {\n          background-color: ", ";\n\n          ", " {\n            color: ", ";\n          }\n        }\n      }\n\n      ", " {\n        background-color: ", ";\n\n        ", " {\n          color: ", ";\n        }\n      }\n\n      &:active {\n        background-color: ", ";\n\n        ", " {\n          color: ", ";\n        }\n      }\n    }\n\n    .", " {\n      border-radius: 0;\n      animation-name: none;\n      opacity: 0;\n    }\n\n    "
+        ";\n      }\n\n      background-color: ", ";\n    }\n\n    &.", " {\n      opacity: 0;\n      visibility: hidden;\n      width: 0;\n      height: 0;\n    }\n\n    &.", " {\n      border: 1px solid ", ";\n    }\n\n    &.", " {\n      color: ", ";\n      background-color: ", ";\n\n      &:before {\n        content: '';\n        left: 0;\n        right: 0;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n        border-radius: ", ";\n        position: absolute;\n      }\n\n      ", ";\n\n      ", " {\n        &:hover {\n          &:before {\n            background-color: ", ";\n          }\n\n          ", " {\n            color: ", ";\n          }\n        }\n      }\n\n      ", " {\n        &:before {\n          background-color: ", ";\n        }\n\n        ", " {\n          color: ", ";\n        }\n      }\n\n      &:active {\n        ",
+        "\n\n        ", " {\n          color: ", ";\n        }\n      }\n    }\n\n    &.", " {\n      ", ";\n    }\n\n    .", " {\n      border-radius: 0;\n      animation-name: none;\n      opacity: 0;\n    }\n\n    "
         /**
          * that is equilateral triangle, the third Side length is
          * Math.sqrt(2) = 1.414213562373095, so we scale that
          * to make that full with this square
          */
         ,
-        "\n  "])), containerSize, containerSize, mainColor, radius(currRadius), backgroundTransition, disabled ? 'default' : 'pointer', (shouldPersistBg || isInverse) && persistBgColor, nowShadow, nowShadow && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      transition: ", ";\n\n      &:active {\n        box-shadow: ", ";\n      }\n    "], ["\n      transition: ", ";\n\n      &:active {\n        box-shadow: ",
+        "\n  "])), containerSize, containerSize, mainColor, radiusValue, backgroundTransition, disabled ? 'default' : 'pointer', (shouldPersistBg || isInverse) && persistBgColor, nowShadow, nowShadow && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      transition: ", ";\n\n      &:active {\n        box-shadow: ", ";\n      }\n    "], ["\n      transition: ", ";\n\n      &:active {\n        box-shadow: ",
         ";\n      }\n    "])), containedVariantTransitions, shadows(activeElevation !== null && activeElevation !== void 0 ? activeElevation : (elevation ? Math.min(+elevation + 11, 24) : '12'))), childrenClass, stretchIcon
         ? containerSize
         : px(isOutline
@@ -57,13 +65,13 @@ export var iconButtonStyle = function (_a) {
         ? 'transparent'
         : setOpacity(mainColor, isInverse ? '32' : '16'), childrenClass, setOpacity(mainColor, '88'), isPlain && plainIconButtonFocusStyle({ radius: currRadius }), RcIconButtonClasses.persistBg, persistBgColor, RcIconButtonClasses.disabled, childrenClass, useColorWhenDisabled
         ? setOpacity(mainColor, '32')
-        : palette2('disabled', 'f02'), isInverse && setOpacity(mainColor, '12'), RcIconButtonClasses.invisible, RcIconButtonClasses.outline, palette2('neutral', 'l03'), RcIconButtonClasses.contained, mainColorContrast, mainColor, nonTouchHoverMedia, setOpacity(mainColor, '08', true), childrenClass, mainColorContrast, focusVisible, setOpacity(mainColor, '16', true), childrenClass, mainColorContrast, setOpacity(mainColor, '24', true), childrenClass, mainColorContrast, RcIconButtonTouchRippleClasses.ripplePulsate, 
+        : palette2('disabled', 'f02'), isInverse && setOpacity(mainColor, '12'), RcIconButtonClasses.invisible, RcIconButtonClasses.outline, palette2('neutral', 'l03'), RcIconButtonClasses.contained, mainColorContrast, mainColor, radiusValue, contrastColorBorder, nonTouchHoverMedia, setOpacity(mainColorContrast, '08'), childrenClass, mainColorContrast, focusVisible, setOpacity(mainColorContrast, '16'), childrenClass, mainColorContrast, disableRipple && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n          &:before {\n            background-color: ", ";\n          }\n        "], ["\n          &:before {\n            background-color: ", ";\n          }\n        "])), setOpacity(mainColorContrast, '24')), childrenClass, mainColorContrast, RcIconButtonClasses.inverse, contrastColorBorder, RcIconButtonTouchRippleClasses.ripplePulsate, 
     /**
      * that is equilateral triangle, the third Side length is
      * Math.sqrt(2) = 1.414213562373095, so we scale that
      * to make that full with this square
      */
     !isPlain &&
-        !['circle', 'round'].includes(currRadius) && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        .", " {\n          transform: scale(1.41421357);\n        }\n      "], ["\n        .", " {\n          transform: scale(1.41421357);\n        }\n      "])), RcIconButtonTouchRippleClasses.child));
+        !['circle', 'round'].includes(currRadius) && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        .", " {\n          transform: scale(1.41421357);\n        }\n      "], ["\n        .", " {\n          transform: scale(1.41421357);\n        }\n      "])), RcIconButtonTouchRippleClasses.child));
 };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/es6/components/Buttons/IconButton/utils/IconButtonUtils.js

@@ -1,6 +1,14 @@
 import { omit, RcClasses } from '../../../../foundation';
 import { RcIconSizes } from '../../../Icon/utils';
-export var RcIconButtonClasses = RcClasses(['root', 'disabled', 'invisible', 'outline', 'contained', 'persistBg'], 'RcIconButton');
+export var RcIconButtonClasses = RcClasses([
+    'root',
+    'disabled',
+    'invisible',
+    'outline',
+    'contained',
+    'inverse',
+    'persistBg',
+], 'RcIconButton');
 export var RcIconButtonTouchRippleClasses = RcClasses(['ripplePulsate', 'child'], 'RcIconButtonTouchRipple');
 export var RcIconButtonSizes = omit(RcIconSizes, ['inherit']);
 export var RcIconButtonFocusVisibleInsetSize = {

package/es6/components/Dialer/DialPad/DialPad.js

@@ -10,17 +10,17 @@ import { ACCEPTABLE_KEYS, DIALER_PAD_ICONS, DIALER_PAD_PLUS, useKeyAudio, } from
 var DEBOUNCE_TIME = 30;
 var _RcDialPad = forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'RcDialPad' });
-    var sounds = props.sounds, volume = props.volume, muted = props.muted, classes = props.classes, onChangeProp = props.onChange, longPressDelay = props.longPressDelay, action = props.action, persistBgTime = props.persistBgTime, control = props.control, getDialPadButtonProps = props.getDialPadButtonProps, divProps = __rest(props, ["sounds", "volume", "muted", "classes", "onChange", "longPressDelay", "action", "persistBgTime", "control", "getDialPadButtonProps"]);
+    var sounds = props.sounds, volume = props.volume, muted = props.muted, classes = props.classes, onChangeProp = props.onChange, longPressDelay = props.longPressDelay, action = props.action, persistBgTime = props.persistBgTime, control = props.control, getDialPadButtonProps = props.getDialPadButtonProps, _a = props.externalWindow, externalWindow = _a === void 0 ? window : _a, divProps = __rest(props, ["sounds", "volume", "muted", "classes", "onChange", "longPressDelay", "action", "persistBgTime", "control", "getDialPadButtonProps", "externalWindow"]);
     var containerRef = useRef(null);
     var hiddenRef = useRef(null);
     var keyTimerMapRef = useRef({});
     var forkRef = useForkRef(containerRef, ref);
-    var _a = useRcDialerContext(), onInsertRef = _a.onInsertRef, dialPadActionRef = _a.dialPadActionRef;
+    var _b = useRcDialerContext(), onInsertRef = _b.onInsertRef, dialPadActionRef = _b.dialPadActionRef;
     var focusedIndexRef = useRef(0);
-    var _b = useOnlyOneFocusable({
+    var _c = useOnlyOneFocusable({
         focusedIndexRef: focusedIndexRef,
         containerRef: containerRef,
-    }), focusIndex = _b.focusIndex, getItemProps = _b.getItemProps, moveFocusedId = _b.moveFocusedId;
+    }), focusIndex = _c.focusIndex, getItemProps = _c.getItemProps, moveFocusedId = _c.moveFocusedId;
     var dialButtonKey = moveFocusedId + "-dial-button";
     var onKeyFocusedIndexHandle = useKeyboardMoveFocus({
         options: DIALER_PAD_ICONS,
@@ -64,11 +64,11 @@ var _RcDialPad = forwardRef(function (inProps, ref) {
     var handleKeyboardEffect = useDebounce(function (value, isKeyup) {
         var _a, _b;
         if (isKeyup) {
-            handleChange(value, 'keyboard');
+            handleChange(value, 'customKeyboard');
             var toIndex = ACCEPTABLE_KEYS.findIndex(function (x) { return x === value; });
             focusedIndexRef.current = toIndex;
             // * mean that current focus on that dialPad, move focus to dialPad container
-            if (((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.getAttribute(dialButtonKey)) !== null) {
+            if (((_a = externalWindow.document.activeElement) === null || _a === void 0 ? void 0 : _a.getAttribute(dialButtonKey)) !== null) {
                 (_b = hiddenRef.current) === null || _b === void 0 ? void 0 : _b.focus();
             }
         }

package/es6/components/Dialer/DialTextField/DialTextField.js

@@ -8,9 +8,9 @@ import { DialTextFieldStyle } from './styles';
 import { getDialPadValueOnlyRegex, useFixedEndSelection } from './utils';
 var _RcDialTextField = forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'RcDialTextField' });
-    var children = props.children, value = props.value, onChange = props.onChange, onEmit = props.onEmit, onKeyPress = props.onKeyPress, onKeyDown = props.onKeyDown, onKeyUp = props.onKeyUp, inputRefProp = props.inputRef, inputPropsProp = props.inputProps, InputPropsProp = props.InputProps, onlyAllowKeypadValue = props.onlyAllowKeypadValue, keypadMode = props.keypadMode, rest = __rest(props, ["children", "value", "onChange", "onEmit", "onKeyPress", "onKeyDown", "onKeyUp", "inputRef", "inputProps", "InputProps", "onlyAllowKeypadValue", "keypadMode"]);
+    var children = props.children, value = props.value, onChange = props.onChange, onEmit = props.onEmit, onKeyPress = props.onKeyPress, onKeyDown = props.onKeyDown, onKeyUp = props.onKeyUp, inputRefProp = props.inputRef, inputPropsProp = props.inputProps, InputPropsProp = props.InputProps, onlyAllowKeypadValue = props.onlyAllowKeypadValue, keypadMode = props.keypadMode, _a = props.externalWindow, externalWindow = _a === void 0 ? window : _a, rest = __rest(props, ["children", "value", "onChange", "onEmit", "onKeyPress", "onKeyDown", "onKeyUp", "inputRef", "inputProps", "InputProps", "onlyAllowKeypadValue", "keypadMode", "externalWindow"]);
     var dialerContext = useRcDialerContext();
-    var _a = useFixedEndSelection(), inputRef = _a.ref, onKeypadModeFocus = _a.onFocus, onKeypadModeKeyDown = _a.onKeyDown, onKeypadModeClick = _a.onClick;
+    var _b = useFixedEndSelection(), inputRef = _b.ref, onKeypadModeFocus = _b.onFocus, onKeypadModeKeyDown = _b.onKeyDown, onKeypadModeClick = _b.onClick;
     var forkContextRef = useForkRef(dialerContext.inputRef, inputRef);
     var forkInputRef = useForkRef(inputRefProp, forkContextRef);
     var scrollToPositionRef = useRef();
@@ -18,7 +18,7 @@ var _RcDialTextField = forwardRef(function (inProps, ref) {
     var maxLength = keypadMode ? undefined : inputPropsProp === null || inputPropsProp === void 0 ? void 0 : inputPropsProp.maxLength;
     var checkNotReFocus = useEventCallback(function (reason, isFocus) {
         var elm = inputRef.current;
-        var isInputFocus = isFocus !== null && isFocus !== void 0 ? isFocus : document.activeElement === elm;
+        var isInputFocus = isFocus !== null && isFocus !== void 0 ? isFocus : externalWindow.document.activeElement === elm;
         if (reason !== 'click' && !isInputFocus) {
             // ! both keydown and touch, only when focus need re-focus
             isNotTriggerRefocusRef.current = true;
@@ -42,7 +42,7 @@ var _RcDialTextField = forwardRef(function (inProps, ref) {
     useImperativeHandle(dialerContext.onDeleteRef, function () { return function (e, reason) {
         var elm = inputRef.current;
         if (elm && (value === null || value === void 0 ? void 0 : value.length)) {
-            var isFocus = document.activeElement === elm;
+            var isFocus = externalWindow.document.activeElement === elm;
             var toPosition = void 0;
             var toValue = void 0;
             if (isFocus) {
@@ -71,14 +71,14 @@ var _RcDialTextField = forwardRef(function (inProps, ref) {
                 onChange === null || onChange === void 0 ? void 0 : onChange(toValue);
             }
         }
-    }; }, [checkNotReFocus, inputRef, onChange, value]);
+    }; }, [checkNotReFocus, externalWindow, inputRef, onChange, value]);
     /**
      * outside change value via this method, with check current input state
      */
     useImperativeHandle(dialerContext.onInsertRef, function () { return function (addValue, reason) {
         var elm = inputRef.current;
         if (elm) {
-            var isFocus = document.activeElement === elm;
+            var isFocus = externalWindow.document.activeElement === elm;
             var toPosition = void 0;
             var toValue = void 0;
             // * when keypadMode also add value at latest
@@ -104,6 +104,7 @@ var _RcDialTextField = forwardRef(function (inProps, ref) {
         }
     }; }, [
         checkNotReFocus,
+        externalWindow,
         inputRef,
         keypadMode,
         maxLength,

package/es6/components/Downshift/SuggestionList/SuggestionList.js

@@ -7,7 +7,7 @@ import { RcBox } from '../../Box';
 import { RcIconButton } from '../../Buttons/IconButton';
 import { RcMenuItem } from '../../Menu/MenuItem';
 import { menuListBoundaryPadding, StyledMenuListPadding, } from '../../VirtualizedMenu/styles';
-import { useDynamicHeight, useHighlightScroll, Virtuoso, } from '../../Virtuoso';
+import { modifyVlScrollerStyle, useDynamicHeight, useHighlightScroll, Virtuoso, } from '../../Virtuoso';
 import { SuggestionListStyle } from './styles';
 import { RcSuggestionListClasses } from './utils';
 var SuggestionListContext = createContext(null);
@@ -166,7 +166,10 @@ var SuggestionList = forwardRef(function (inProps, ref) {
     }, [componentsProp, PaddingComponent]);
     return (React.createElement(SuggestionListContext.Provider, { value: listRef },
         React.createElement(Virtuoso, __assign({ ref: forkVlRef, totalCount: itemCount, data: itemData, className: className, components: components, itemContent: itemContent }, getMenuProps(), combineProps({
-            scrollerRef: scrollerRefFn,
+            scrollerRef: function (scrollElm) {
+                scrollerRefFn(scrollElm);
+                modifyVlScrollerStyle(scrollElm, position);
+            },
             itemsRendered: itemsRendered,
             totalListHeightChanged: totalListHeightChanged,
             style: style,

package/es6/components/Table/TableCell/TableCell.js

@@ -6,7 +6,7 @@ import { TableCellStyle } from './styles';
 import { RcTableCellClasses } from './utils';
 import { RcButtonBase } from '../../Buttons';
 import { RcIcon } from '../../Icon';
-import { JumpToLatest as AscSortIcon, JumpToUnread as DescSortIcon, } from '@ringcentral/juno-icon';
+import { JumpToLatest as DescSortIcon, JumpToUnread as AscSortIcon, } from '@ringcentral/juno-icon';
 import clsx from 'clsx';
 import { RcTableContext } from '../context';
 var _RcTableCell = forwardRef(function (props, ref) {
@@ -21,7 +21,7 @@ var _RcTableCell = forwardRef(function (props, ref) {
                     _a[classes.activeSort] = activeSort,
                     _a)) },
                 childrenProp,
-                React.createElement(RcIcon, { size: "small", className: classes.sortIcon, symbol: sortDirection === 'asc' ? DescSortIcon : AscSortIcon })));
+                React.createElement(RcIcon, { size: "small", className: classes.sortIcon, symbol: sortDirection === 'asc' ? AscSortIcon : DescSortIcon })));
         }
         return childrenProp;
     }, [activeSort, childrenProp, classes, sortDirection]);

package/es6/components/Table/TableCell/styles/TableCellStyle.js

@@ -2,12 +2,14 @@ import { __makeTemplateObject } from "tslib";
 import { css, fakeBorder, focusVisible, palette2, px, spacing, typography, } from '../../../../foundation';
 import { RcTableCellClasses } from '../utils';
 var SizeMap = {
+    xlarge: 64,
     large: 56,
     medium: 48,
     small: 40,
 };
+var HeadTypography = typography('caption2');
 export var TableCellStyle = function (prop) {
     var size = prop.size, sortDirection = prop.sortDirection;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    box-sizing: border-box;\n    padding: ", ";\n    min-width: 96px;\n\n    &.", " {\n      min-width: unset;\n      padding: ", ";\n    }\n\n    &.", " {\n      padding: unset;\n    }\n\n    &.", " {\n      ", "\n      height: 40px;\n      border-bottom: 1px solid ", ";\n      color: ", ";\n      background-color: ", ";\n\n      padding: ", ";\n\n      .", " {\n        opacity: 0;\n        padding: ", ";\n      }\n\n      .", " {\n        color: ", ";\n\n        .", " {\n          opacity: 1;\n          color: ", ";\n        }\n      }\n\n      .", " {\n        display: inline-flex;\n        justify-content: flex-start;\n        flex-direction: inherit;\n        align-items: center;\n\n        height: 100%;\n        width: 100%;\n        padding: ", ";\n\n        ", " {\n          color: ", ";\n        }\n\n        &:hover {\n          background-color: ", ";\n\n          .", " {\n            opacity: 1;\n          }\n        }\n\n        ", " {\n          ", "\n          background-color: ", ";\n        }\n      }\n    }\n\n    &.", " {\n      ", "\n      color: ", ";\n\n      padding: ", ";\n      height: ", ";\n    }\n  "], ["\n    box-sizing: border-box;\n    padding: ", ";\n    min-width: 96px;\n\n    &.", " {\n      min-width: unset;\n      padding: ", ";\n    }\n\n    &.", " {\n      padding: unset;\n    }\n\n    &.", " {\n      ", "\n      height: 40px;\n      border-bottom: 1px solid ", ";\n      color: ", ";\n      background-color: ", ";\n\n      padding: ", ";\n\n      .", " {\n        opacity: 0;\n        padding: ", ";\n      }\n\n      .", " {\n        color: ", ";\n\n        .", " {\n          opacity: 1;\n          color: ", ";\n        }\n      }\n\n      .", " {\n        display: inline-flex;\n        justify-content: flex-start;\n        flex-direction: inherit;\n        align-items: center;\n\n        height: 100%;\n        width: 100%;\n        padding: ", ";\n\n        ", " {\n          color: ", ";\n        }\n\n        &:hover {\n          background-color: ", ";\n\n          .", " {\n            opacity: 1;\n          }\n        }\n\n        ", " {\n          ", "\n          background-color: ", ";\n        }\n      }\n    }\n\n    &.", " {\n      ", "\n      color: ", ";\n\n      padding: ", ";\n      height: ", ";\n    }\n  "])), spacing(0, 2), RcTableCellClasses.paddingCheckbox, spacing(0, 0, 0, 2), RcTableCellClasses.paddingNone, RcTableCellClasses.head, typography('caption2'), palette2('neutral', 'l02'), palette2('neutral', 'f05'), palette2('neutral', 'b02'), Boolean(sortDirection) && 'unset', RcTableCellClasses.sortIcon, spacing(0, 2), RcTableCellClasses.activeSort, palette2('interactive', 'f01'), RcTableCellClasses.sortIcon, palette2('neutral', 'f04'), RcTableCellClasses.sortButton, spacing(0, 2), RcTableCellClasses.sortIcon, palette2('neutral', 'f04'), palette2('neutral', 'b03'), RcTableCellClasses.sortIcon, focusVisible, fakeBorder({ color: palette2('interactive', 'f01') }), palette2('neutral', 'b03'), RcTableCellClasses.body, typography('body1'), palette2('neutral', 'f06'), size === 'auto' && spacing(3, 2), size !== 'auto' && px(SizeMap[size]));
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    box-sizing: border-box;\n    padding: ", ";\n    min-width: 96px;\n\n    &.", " {\n      min-width: unset;\n      padding: ", ";\n    }\n\n    &.", " {\n      padding: unset;\n    }\n\n    &.", " {\n      ", "\n      height: 40px;\n      border-bottom: 1px solid ", ";\n      color: ", ";\n      background-color: ", ";\n\n      padding: ", ";\n\n      .", " {\n        opacity: 0;\n        padding: ", ";\n      }\n\n      .", " {\n        color: ", ";\n\n        .", " {\n          opacity: 1;\n          color: ", ";\n        }\n      }\n\n      .", " {\n        ", "\n        display: inline-flex;\n        justify-content: flex-start;\n        flex-direction: inherit;\n        align-items: center;\n\n        height: 100%;\n        width: 100%;\n        padding: ", ";\n\n        ", " {\n          color: ", ";\n        }\n\n        &:hover {\n          background-color: ", ";\n\n          .", " {\n            opacity: 1;\n          }\n        }\n\n        ", " {\n          ", "\n          background-color: ", ";\n        }\n      }\n    }\n\n    &.", " {\n      ", "\n      color: ", ";\n\n      padding: ", ";\n      height: ", ";\n    }\n  "], ["\n    box-sizing: border-box;\n    padding: ", ";\n    min-width: 96px;\n\n    &.", " {\n      min-width: unset;\n      padding: ", ";\n    }\n\n    &.", " {\n      padding: unset;\n    }\n\n    &.", " {\n      ", "\n      height: 40px;\n      border-bottom: 1px solid ", ";\n      color: ", ";\n      background-color: ", ";\n\n      padding: ", ";\n\n      .", " {\n        opacity: 0;\n        padding: ", ";\n      }\n\n      .", " {\n        color: ", ";\n\n        .", " {\n          opacity: 1;\n          color: ", ";\n        }\n      }\n\n      .", " {\n        ", /** cover user agent stylesheet */ "\n        display: inline-flex;\n        justify-content: flex-start;\n        flex-direction: inherit;\n        align-items: center;\n\n        height: 100%;\n        width: 100%;\n        padding: ", ";\n\n        ", " {\n          color: ", ";\n        }\n\n        &:hover {\n          background-color: ", ";\n\n          .", " {\n            opacity: 1;\n          }\n        }\n\n        ", " {\n          ", "\n          background-color: ", ";\n        }\n      }\n    }\n\n    &.", " {\n      ", "\n      color: ", ";\n\n      padding: ", ";\n      height: ", ";\n    }\n  "])), spacing(0, 2), RcTableCellClasses.paddingCheckbox, spacing(0, 0, 0, 2), RcTableCellClasses.paddingNone, RcTableCellClasses.head, HeadTypography, palette2('neutral', 'l02'), palette2('neutral', 'f05'), palette2('neutral', 'b02'), Boolean(sortDirection) && 'unset', RcTableCellClasses.sortIcon, spacing(0, 2), RcTableCellClasses.activeSort, palette2('interactive', 'f01'), RcTableCellClasses.sortIcon, palette2('neutral', 'f04'), RcTableCellClasses.sortButton, HeadTypography /** cover user agent stylesheet */, spacing(0, 2), RcTableCellClasses.sortIcon, palette2('neutral', 'f04'), palette2('neutral', 'b03'), RcTableCellClasses.sortIcon, focusVisible, fakeBorder({ color: palette2('interactive', 'f01') }), palette2('neutral', 'b03'), RcTableCellClasses.body, typography('body1'), palette2('neutral', 'f06'), size === 'auto' && spacing(3, 2), size !== 'auto' && px(SizeMap[size]));
 };
 var templateObject_1;

package/es6/components/VirtualizedMenu/VirtualizedMenu.js

@@ -1,7 +1,7 @@
 import { __assign, __makeTemplateObject, __rest } from "tslib";
-import React, { forwardRef, useMemo, useRef } from 'react';
+import React, { forwardRef, useEffect, useMemo, useRef } from 'react';
 import clsx from 'clsx';
-import { combineClasses, combineProps, styled, useEventCallback, useForkRef, useRcPortalWindowContext, useThemeProps, } from '../../foundation';
+import { combineClasses, combineProps, styled, useEventCallback, useForceUpdate, useForkRef, useRcPortalWindowContext, useSleep, useThemeProps, } from '../../foundation';
 import { RcPopover } from '../Popover';
 import { VirtualizedMenuStyle } from './styles';
 import { RcVirtualizedMenuClasses } from './utils';
@@ -48,6 +48,17 @@ var _RcVirtualizedMenu = forwardRef(function (inProps, ref) {
             }
         }
     });
+    var forceUpdate = useForceUpdate();
+    var sleep = useSleep().sleep;
+    // TODO: fix that when that work
+    useEffect(function () {
+        if (open) {
+            sleep(200).then(function () {
+                forceUpdate();
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open]);
     return (React.createElement(RcPopover, __assign({ ref: handleRef, container: document.body, classes: PopoverClasses, onClose: onClose, open: open, transitionDuration: transitionDuration, PaperProps: PaperProps, TransitionProps: TransitionProps }, rest),
         React.createElement(RcVirtualizedMenuList, __assign({ position: "unset", action: menuListActionRef, autoFocus: autoFocus, autoFocusItem: autoFocusItem, maxHeight: maxHeight, variant: variant, onKeyDown: handleListKeyDown }, MenuListProps, { className: clsx(classes.list, MenuListProps.className) }), children)));
 });