@ringcentral/juno 2.8.1 → 2.11.0

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

@@ -15,7 +15,7 @@ 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, IconProps = props.IconProps, 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", "IconProps", "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 _b = props.buttonRef, buttonRef = _b === void 0 ? ref : _b, _c = props.IconProps, IconProps = _c === void 0 ? {} : _c, 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", "IconProps", "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';
@@ -31,7 +31,10 @@ var _RcIconButton = memo(forwardRef(function (inProps, ref) {
         _a));
     var iconButton = (function () {
         var _a, _b;
-        var icon = React.isValidElement(children) || children === '' ? children : (React.createElement(RcIcon, __assign({ symbol: symbol, className: classes.icon, loading: loading, size: "inherit", CircularProgressProps: CircularProgressProps }, IconProps), children));
+        // `color` already handle in StyledIconButton
+        // eslint-disable-next-line @typescript-eslint/no-shadow
+        var color = IconProps.color, IconPropsWithoutColor = __rest(IconProps, ["color"]);
+        var icon = React.isValidElement(children) || children === '' ? children : (React.createElement(RcIcon, __assign({ symbol: symbol, className: classes.icon, loading: loading, size: "inherit", CircularProgressProps: CircularProgressProps }, IconPropsWithoutColor), children));
         var iconButton = (React.createElement(RcButtonBase, __assign({ ref: buttonRef, disableRipple: ((_b = (_a = theme.props) === null || _a === void 0 ? void 0 : _a.MuiButtonBase) === null || _b === void 0 ? void 0 : _b.disableRipple) || isPlain, type: type, disabled: disabled, "aria-label": ariaLabel || tooltipTitle || title, title: title, "aria-disabled": disabled, className: IconClassName, TouchRippleProps: combineProps({
                 classes: RcIconButtonTouchRippleClasses,
             }, TouchRippleProps) }, rest), icon));

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, fakeBorder, } from '../../../../foundation';
+import { backgroundTransition, css, focusVisible, focusVisibleColor, getParsePaletteColor, nonTouchHoverMedia, palette2, paletteContrastText, px, radius, setOpacity, shadows, fakeBorder, opacity, } from '../../../../foundation';
 import { RcIconButtonClasses, RcIconButtonFocusVisibleInsetSize, RcIconButtonSizes, RcIconButtonTouchRippleClasses, } from '../utils';
 export var getFocusVisibleInsetSize = function (_a) {
     var size = _a.size;
@@ -17,7 +17,8 @@ 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, disableRipple = _a.disableRipple, elevation = _a.elevation, disabledFakeBorder = _a.disabledFakeBorder, 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, _b = _a.IconProps, IconProps = _b === void 0 ? {} : _b;
+    var iconColor = IconProps.color;
     var iconSize = RcIconButtonSizes[size];
     var isCircle = ['plain', 'round', 'inverse', 'contained'].includes(variant);
     var isPlain = variant === 'plain';
@@ -26,7 +27,9 @@ export var iconButtonStyle = function (_a) {
     var isContained = variant === 'contained';
     var containerSize = px(isPlain ? iconSize : iconSize * 2);
     var mainColor = getParsePaletteColor(color);
-    var mainColorContrast = paletteContrastText(mainColor);
+    var containedColor = iconColor
+        ? getParsePaletteColor(iconColor)
+        : paletteContrastText(mainColor);
     var currRadius = radiusProp || (isOutline ? 'lg' : isCircle ? 'circle' : 'zero');
     var persistBgColor = setOpacity(mainColor, isInverse ? '16' : '12');
     var defaultShadow = isContained ? shadows('1') : undefined;
@@ -38,12 +41,13 @@ export var iconButtonStyle = function (_a) {
             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    font-size: ", ";\n\n    ", " {\n      &:hover {\n        background-color: ", ";\n\n        color: ", ";\n      }\n    }\n\n    &:active {\n      color: ", ";\n    }\n\n    ", " {\n      background-color: ", ";\n\n      &:active {\n        color: ", ";\n      }\n\n      ", ";\n    }\n\n    &.", " {\n      background-color: ", ";\n    }\n\n    &.", " {\n      color: ", ";\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          color: ", ";\n        }\n      }\n\n      ", " {\n        &:before {\n          background-color: ", ";\n        }\n\n        color: ", ";\n      }\n\n      &:active {\n        ", "\n\n        color: ", ";\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    ",
+    return css(templateObject_8 || (templateObject_8 = __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    font-size: ", ";\n\n    ", " {\n      &:hover {\n        background-color: ", ";\n\n        color: ", ";\n      }\n    }\n\n    &:active {\n      color: ", ";\n    }\n\n    ", " {\n      background-color: ", ";\n\n      &:active {\n        color: ", ";\n      }\n\n      ", ";\n    }\n\n    &.", " {\n      background-color: ", ";\n    }\n\n    &.", " {\n      color: ", ";\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        ", "\n      }\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          color: ", ";\n        }\n      }\n\n      ", " {\n        &:before {\n          background-color: ", ";\n        }\n\n        color: ", ";\n      }\n\n      &:active {\n        ", "\n\n        color: ", ";\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    font-size: ",
         ";\n\n    ", " {\n      &:hover {\n        background-color: ",
         ";\n\n        color: ", ";\n      }\n    }\n\n    &:active {\n      color: ", ";\n    }\n\n    ", " {\n      background-color: ",
         ";\n\n      &:active {\n        color: ", ";\n      }\n\n      ", ";\n    }\n\n    &.", " {\n      background-color: ", ";\n    }\n\n    &.", " {\n      color: ",
-        ";\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          color: ", ";\n        }\n      }\n\n      ", " {\n        &:before {\n          background-color: ", ";\n        }\n\n        color: ", ";\n      }\n\n      &:active {\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        ",
+        "\n      }\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          color: ", ";\n        }\n      }\n\n      ", " {\n        &:before {\n          background-color: ", ";\n        }\n\n        color: ", ";\n      }\n\n      &:active {\n        ",
         "\n\n        color: ", ";\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
@@ -62,13 +66,17 @@ export var iconButtonStyle = function (_a) {
         ? 'transparent'
         : setOpacity(mainColor, isInverse ? '32' : '16'), setOpacity(mainColor, '88'), isPlain && plainIconButtonFocusStyle({ radius: currRadius }), RcIconButtonClasses.persistBg, persistBgColor, RcIconButtonClasses.disabled, useColorWhenDisabled
         ? setOpacity(mainColor, '32')
-        : palette2('disabled', 'f02'), isInverse && setOpacity(mainColor, '12'), RcIconButtonClasses.invisible, RcIconButtonClasses.outline, palette2('neutral', 'l03'), RcIconButtonClasses.contained, mainColorContrast, mainColor, radiusValue, contrastColorBorder, nonTouchHoverMedia, setOpacity(mainColorContrast, '08'), mainColorContrast, focusVisible, setOpacity(mainColorContrast, '16'), 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')), mainColorContrast, RcIconButtonClasses.inverse, contrastColorBorder, RcIconButtonTouchRippleClasses.ripplePulsate, 
+        : palette2('disabled', 'f02'), isInverse && setOpacity(mainColor, '12'), RcIconButtonClasses.invisible, RcIconButtonClasses.outline, palette2('neutral', 'l03'), RcIconButtonClasses.contained, containedColor, mainColor, RcIconButtonClasses.disabled, function () {
+        if (useColorWhenDisabled)
+            return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n              color: ", ";\n              background-color: ", ";\n              opacity: ", ";\n            "], ["\n              color: ", ";\n              background-color: ", ";\n              opacity: ", ";\n            "])), containedColor, mainColor, opacity('32'));
+        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n            background-color: ", ";\n            color: ", ";\n          "], ["\n            background-color: ", ";\n            color: ", ";\n          "])), palette2('disabled', 'b01'), palette2('disabled', 'f01'));
+    }, radiusValue, contrastColorBorder, nonTouchHoverMedia, setOpacity(containedColor, '08'), containedColor, focusVisible, setOpacity(containedColor, '16'), containedColor, disableRipple && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n          &:before {\n            background-color: ", ";\n          }\n        "], ["\n          &:before {\n            background-color: ", ";\n          }\n        "])), setOpacity(containedColor, '24')), containedColor, 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_5 || (templateObject_5 = __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_7 || (templateObject_7 = __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, templateObject_6;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

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

@@ -1,13 +1,12 @@
 import { __assign, __makeTemplateObject, __read, __rest, __values } from "tslib";
 import React, { forwardRef, useEffect, useImperativeHandle, useRef, } from 'react';
-import { styled, useDebounce, useEventCallback, useForkRef, useKeyboardMoveFocus, useOnlyOneFocusable, useThemeProps, } from '../../../foundation';
+import { styled, useEventCallback, useForkRef, useKeyboardMoveFocus, useOnlyOneFocusable, useThemeProps, } from '../../../foundation';
 import { RcIconButtonClasses } from '../../Buttons/IconButton/utils';
 import { RcVisuallyHidden } from '../../VisuallyHidden';
 import { RcDialPadButton } from '../DialPadButton';
 import { useRcDialerContext } from '../utils';
 import { DialPadStyle } from './styles';
 import { ACCEPTABLE_KEYS, DIALER_PAD_ICONS, DIALER_PAD_PLUS, useKeyAudio, } from './utils';
-var DEBOUNCE_TIME = 30;
 var _RcDialPad = forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'RcDialPad' });
     var sounds = props.sounds, volume = props.volume, autoSize = props.autoSize, 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", "autoSize", "muted", "classes", "onChange", "longPressDelay", "action", "persistBgTime", "control", "getDialPadButtonProps", "externalWindow"]);
@@ -61,7 +60,7 @@ var _RcDialPad = forwardRef(function (inProps, ref) {
         (_a = onInsertRef === null || onInsertRef === void 0 ? void 0 : onInsertRef.current) === null || _a === void 0 ? void 0 : _a.call(onInsertRef, value, reason);
         onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(value, reason);
     };
-    var handleKeyboardEffect = useDebounce(function (value, isKeyup) {
+    var handleKeyboardEffect = useEventCallback(function (value, isKeyup) {
         var _a, _b;
         if (isKeyup) {
             handleChange(value, 'customKeyboard');
@@ -72,7 +71,7 @@ var _RcDialPad = forwardRef(function (inProps, ref) {
                 (_b = hiddenRef.current) === null || _b === void 0 ? void 0 : _b.focus();
             }
         }
-    }, DEBOUNCE_TIME);
+    });
     var handleKeyEffect = useEventCallback(function (value, reason) {
         handleChange(value, reason);
     });

package/es6/components/Dialog/Dialog.js

@@ -6,6 +6,7 @@ import { useUnmountPortalHandler } from '../PortalHost';
 import { DialogStyle } from './styles';
 import { RcDialogClasses } from './utils';
 import { RcDialogContext } from './utils/DialogContext';
+import { HasPortalParentProvider } from '../PortalHost/context/HasPortalParentContext';
 var _RcDialog = forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'RcDialog' });
     if (process.env.NODE_ENV !== 'production') {
@@ -42,8 +43,9 @@ var _RcDialog = forwardRef(function (inProps, ref) {
     var TransitionProps = __assign(__assign({ 
         // TODO: remove after upgrade to mui v5
         role: 'presentation' }, TransitionPropsProp), { onExited: onExited });
-    return (React.createElement(MuiDialog, __assign({ ref: ref, fullWidth: fullWidth, container: externalWindow === null || externalWindow === void 0 ? void 0 : externalWindow.document.body, maxWidth: maxWidth, fullScreen: size === 'fullScreen' ? true : undefined, classes: classes, TransitionProps: TransitionProps }, rest),
-        React.createElement(RcDialogContext.Provider, { value: contextValue }, children)));
+    return (React.createElement(HasPortalParentProvider, null,
+        React.createElement(MuiDialog, __assign({ ref: ref, fullWidth: fullWidth, container: externalWindow === null || externalWindow === void 0 ? void 0 : externalWindow.document.body, maxWidth: maxWidth, fullScreen: size === 'fullScreen' ? true : undefined, classes: classes, TransitionProps: TransitionProps }, rest),
+            React.createElement(RcDialogContext.Provider, { value: contextValue }, children))));
 });
 var RcDialog = styled(_RcDialog)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), DialogStyle);
 RcDialog.defaultProps = {};

package/es6/components/Drawer/Drawer.js

@@ -4,9 +4,11 @@ import MuiDrawer from '@material-ui/core/Drawer';
 import { combineClasses, combineProps, styled, useRcPortalWindowContext, useThemeProps, } from '../../foundation';
 import { DrawerStyle } from './styles';
 import { RcDrawerClasses } from './utils';
+import { usePortalManagerWithID, useUnmountPortalHandler } from '../PortalHost';
+import { HasPortalParentProvider } from '../PortalHost/context/HasPortalParentContext';
 var _RcDrawer = forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'RcDrawer' });
-    var inlinePaper = props.inlinePaper, radius = props.radius, classesProp = props.classes, children = props.children, PaperPropsProp = props.PaperProps, onClose = props.onClose, rest = __rest(props, ["inlinePaper", "radius", "classes", "children", "PaperProps", "onClose"]);
+    var inlinePaper = props.inlinePaper, radius = props.radius, classesProp = props.classes, children = props.children, PaperPropsProp = props.PaperProps, onClose = props.onClose, SlidePropsProp = props.SlideProps, rest = __rest(props, ["inlinePaper", "radius", "classes", "children", "PaperProps", "onClose", "SlideProps"]);
     var externalWindow = useRcPortalWindowContext().externalWindow;
     var PaperProps = useMemo(function () {
         var _a;
@@ -23,7 +25,11 @@ var _RcDrawer = forwardRef(function (inProps, ref) {
             _a), PaperPropsProp);
     }, [PaperPropsProp, inlinePaper, onClose]);
     var classes = useMemo(function () { return combineClasses(RcDrawerClasses, classesProp); }, [classesProp]);
-    return (React.createElement(MuiDrawer, __assign({}, rest, { ref: ref, container: externalWindow === null || externalWindow === void 0 ? void 0 : externalWindow.document.body, classes: classes, onClose: onClose, PaperProps: PaperProps }), children));
+    var onExited = useUnmountPortalHandler(SlidePropsProp === null || SlidePropsProp === void 0 ? void 0 : SlidePropsProp.onExited);
+    var managerWithID = usePortalManagerWithID();
+    var SlideProps = __assign(__assign(__assign({}, SlidePropsProp), { onExited: onExited }), (managerWithID ? { appear: true } : {}));
+    return (React.createElement(HasPortalParentProvider, null,
+        React.createElement(MuiDrawer, __assign({}, rest, { ref: ref, container: externalWindow === null || externalWindow === void 0 ? void 0 : externalWindow.document.body, classes: classes, onClose: onClose, PaperProps: PaperProps, SlideProps: SlideProps }), children)));
 });
 var RcDrawer = styled(_RcDrawer)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), DrawerStyle);
 RcDrawer.defaultProps = {

package/es6/components/Forms/TextField/TextField.js

@@ -2,11 +2,12 @@ import { __assign, __makeTemplateObject, __read, __rest } from "tslib";
 import React, { forwardRef, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import MuiTextField from '@material-ui/core/TextField';
 import { DeleteCircle } from '@ringcentral/juno-icon';
-import { clearReactReferencesInNode, combineClasses, combineProps, styled, useDeprecatedCheck, useEventCallback, useForkRef, useThemeProps, } from '../../../foundation';
+import { clearReactReferencesInNode, combineClasses, combineProps, styled, useControlled, useDeprecatedCheck, useEventCallback, useForkRef, useThemeProps, } from '../../../foundation';
 import { useRcFormContext } from '../Form/Form/FormContext';
 import { ClearIconButton, TextFieldStyle } from './styles';
 import { RcOutlineTextFieldIconSizes, RcOutlineTextFieldInputClasses, RcTextFieldClasses, RcTextFieldFormHelperTextClasses, RcTextFieldInputClasses, RcTextFieldInputLabelClasses, } from './utils';
 var combineOutlineClasses = combineClasses(RcTextFieldInputClasses, RcOutlineTextFieldInputClasses);
+var displayName = 'RcTextField';
 var _RcTextField = forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'RcTextField' });
     if (process.env.NODE_ENV !== 'production') {
@@ -38,7 +39,9 @@ var _RcTextField = forwardRef(function (inProps, ref) {
     // TODO: remove when remove focusOnMount
     _a = props.autoFocus, 
     // TODO: remove when remove focusOnMount
-    autoFocusProp = _a === void 0 ? focusOnMount : _a, InputPropsProp = props.InputProps, error = props.error, helperText = props.helperText, defaultValue = props.defaultValue, inputRefProp = props.inputRef, _b = props.autoSelect, autoSelect = _b === void 0 ? selectOnMount : _b, autoFocusDelay = props.autoFocusDelay, clearLabel = props.clearLabel, clearButtonProps = props.clearButtonProps, clearBtn = props.clearBtn, validate = props.validate, onChange = props.onChange, onBlur = props.onBlur, onFocus = props.onFocus, onClear = props.onClear, id = props.id, 
+    autoFocusProp = _a === void 0 ? focusOnMount : _a, InputPropsProp = props.InputProps, error = props.error, helperText = props.helperText, 
+    // no need assign to MuiTextField
+    defaultValue = props.defaultValue, inputRefProp = props.inputRef, _b = props.autoSelect, autoSelect = _b === void 0 ? selectOnMount : _b, autoFocusDelay = props.autoFocusDelay, clearLabel = props.clearLabel, clearButtonProps = props.clearButtonProps, clearBtn = props.clearBtn, validate = props.validate, onChange = props.onChange, onBlur = props.onBlur, onFocus = props.onFocus, onClear = props.onClear, id = props.id, 
     // #region outline pick props
     variant = props.variant, radius = props.radius, size = props.size, align = props.align, textVariant = props.textVariant, gutterBottom = props.gutterBottom, color = props.color, 
     // #endregion
@@ -161,10 +164,22 @@ var _RcTextField = forwardRef(function (inProps, ref) {
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    return (React.createElement(MuiTextField, __assign({}, rest, events, { id: id, value: valueProp, onChange: onChange, defaultValue: defaultValue, error: validate ? !!validateMessage : error, helperText: validateMessage || helperText, classes: classes, FormHelperTextProps: FormHelperTextProps, InputLabelProps: InputLabelProps, InputProps: InputProps, inputRef: inputRef, ref: ref })));
+    return (React.createElement(MuiTextField, __assign({}, rest, events, { id: id, value: valueProp, onChange: onChange, error: validate ? !!validateMessage : error, helperText: validateMessage || helperText, classes: classes, FormHelperTextProps: FormHelperTextProps, InputLabelProps: InputLabelProps, InputProps: InputProps, inputRef: inputRef, ref: ref })));
 });
 /** @release */
-var RcTextField = styled(_RcTextField)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), TextFieldStyle);
+var RcTextField = styled(_RcTextField).attrs(function (_a) {
+    var _b = _a.defaultValue, defaultValue = _b === void 0 ? '' : _b, valueProp = _a.value, onChangeProp = _a.onChange, rest = __rest(_a, ["defaultValue", "value", "onChange"]);
+    var _c = __read(useControlled({
+        default: defaultValue,
+        controlled: valueProp,
+        name: displayName,
+    }), 2), value = _c[0], setValue = _c[1];
+    var onChange = function (event) {
+        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(event);
+        setValue(event.target.value);
+    };
+    return __assign(__assign({}, rest), { value: value, onChange: onChange });
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), TextFieldStyle);
 RcTextField.defaultProps = {
     clearBtn: true,
     variant: 'standard',
@@ -172,6 +187,6 @@ RcTextField.defaultProps = {
     size: 'medium',
     textVariant: 'subheading1',
 };
-RcTextField.displayName = 'RcTextField';
+RcTextField.displayName = displayName;
 export { RcOutlineTextFieldIconSizes, RcTextField };
 var templateObject_1;

package/es6/components/PortalHost/context/HasPortalParentContext.js

@@ -0,0 +1,6 @@
+import React, { createContext } from 'react';
+export var HasPortalParentContext = createContext(false);
+export var HasPortalParentProvider = function (_a) {
+    var children = _a.children;
+    return (React.createElement(HasPortalParentContext.Provider, { value: true }, children));
+};

package/es6/components/PortalHost/utils/usePortalManagerWithID.js

@@ -1,10 +1,11 @@
 import { useContext } from 'react';
 import { PortalIDContext, PortalManagerContext } from '../context';
+import { HasPortalParentContext } from '../context/HasPortalParentContext';
 export var usePortalManagerWithID = function () {
     var manager = useContext(PortalManagerContext);
     var id = useContext(PortalIDContext);
-    if (manager && id !== undefined) {
-        return { manager: manager, id: id };
-    }
-    return undefined;
+    var hasPortalParent = useContext(HasPortalParentContext);
+    if (hasPortalParent || !manager || id === undefined)
+        return undefined;
+    return { manager: manager, id: id };
 };

package/es6/components/Snackbar/Snackbar.js

@@ -7,13 +7,15 @@ import { useUnmountPortalHandler } from '../PortalHost';
 import { RcSnackbarContent } from './SnackbarContent';
 import { SnackbarStyle } from './styles';
 import { RcSnackbarClasses } from './utils';
+import { HasPortalParentProvider } from '../PortalHost/context/HasPortalParentContext';
 var _RcSnackbar = forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'RcSnackbar' });
     var classesProp = props.classes, size = props.size, type = props.type, message = props.message, action = props.action, ContentProps = props.ContentProps, children = props.children, TransitionPropsProp = props.TransitionProps, rest = __rest(props, ["classes", "size", "type", "message", "action", "ContentProps", "children", "TransitionProps"]);
     var classes = useMemo(function () { return combineClasses(RcSnackbarClasses, classesProp); }, [classesProp]);
     var onExited = useUnmountPortalHandler(TransitionPropsProp === null || TransitionPropsProp === void 0 ? void 0 : TransitionPropsProp.onExited);
     var TransitionProps = __assign(__assign({}, TransitionPropsProp), { onExited: onExited });
-    return (React.createElement(MuiSnackbar, __assign({ ref: ref, classes: classes, TransitionProps: TransitionProps }, rest), children || (React.createElement(RcSnackbarContent, __assign({ size: size, type: type, message: message, action: action }, ContentProps)))));
+    return (React.createElement(HasPortalParentProvider, null,
+        React.createElement(MuiSnackbar, __assign({ ref: ref, classes: classes, TransitionProps: TransitionProps }, rest), children || (React.createElement(RcSnackbarContent, __assign({ size: size, type: type, message: message, action: action }, ContentProps))))));
 });
 var RcSnackbar = styled(_RcSnackbar)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), SnackbarStyle);
 RcSnackbar.defaultProps = {

package/es6/components/Tabs/Tabs/MoreMenuTabs/MoreMenuTabs.js

@@ -78,18 +78,14 @@ var _MoreMenuTabs = forwardRef(function (props, ref) {
         tabRefsMapRef.current = tabRefs_1;
         tabsTabChildRef.current = tabsTabDefaultChild_1;
     }
-    // get real render size when render
-    useEffect(function () {
-        if (childrenProp === prevChildrenProp) {
-            return;
-        }
+    var updateAllTabsSize = function () {
         var tabRefsMap = tabRefsMapRef.current;
+        var allTabsSize = __assign({}, DEFAULT_SIZE);
         if (tabRefsMap && tabRefsMap.size !== 0) {
-            var allTabsSize_1 = __assign({}, DEFAULT_SIZE);
             tabRefsMap.forEach(function (value, key) {
                 var _a = getDomBoundingClientSize(value.ref.current), width = _a.width, height = _a.height;
-                allTabsSize_1.width += width;
-                allTabsSize_1.height += height;
+                allTabsSize.width += width;
+                allTabsSize.height += height;
                 var newRef = {
                     ref: value.ref,
                     size: { width: width, height: height },
@@ -98,8 +94,16 @@ var _MoreMenuTabs = forwardRef(function (props, ref) {
                 };
                 tabRefsMap.set(key, newRef);
             });
-            allTabsSizeRef.current = allTabsSize_1;
+            allTabsSizeRef.current = allTabsSize;
+        }
+        return allTabsSize;
+    };
+    // get real render size when render
+    useEffect(function () {
+        if (childrenProp === prevChildrenProp) {
+            return;
         }
+        updateAllTabsSize();
         var moreElm = moreTabRef === null || moreTabRef === void 0 ? void 0 : moreTabRef.current;
         if (moreElm) {
             var size = getDomBoundingClientSize(moreElm);
@@ -130,12 +134,12 @@ var _MoreMenuTabs = forwardRef(function (props, ref) {
             }
         };
         var computeWhetherToUseMoreMode = function (tabsSize, allTabsSize) {
-            if (allTabsSize.width === 0 ||
-                allTabsSize.height === 0 ||
-                tabsSize.width === 0 ||
-                tabsSize.height === 0) {
+            if (tabsSize.width === 0 || tabsSize.height === 0) {
                 return false;
             }
+            if (allTabsSize.width === 0 || allTabsSize.height === 0) {
+                allTabsSize = updateAllTabsSize();
+            }
             if (!isVertical) {
                 return allTabsSize.width > tabsSize.width;
             }

package/es6/components/VirtualizedMenu/VirtualizedMenu.js

@@ -1,8 +1,9 @@
 import { __assign, __makeTemplateObject, __rest } from "tslib";
-import React, { forwardRef, useEffect, useMemo, useRef } from 'react';
+import React, { forwardRef, useMemo, useRef } from 'react';
 import clsx from 'clsx';
-import { combineClasses, combineProps, styled, useEventCallback, useForceUpdate, useForkRef, useRcPortalWindowContext, useSleep, useThemeProps, } from '../../foundation';
+import { combineClasses, combineProps, styled, useEventCallback, useForkRef, useRcPortalWindowContext, useThemeProps, } from '../../foundation';
 import { RcPopover } from '../Popover';
+import { RcFade } from '../Transitions';
 import { VirtualizedMenuStyle } from './styles';
 import { RcVirtualizedMenuClasses } from './utils';
 import { RcVirtualizedMenuList, } from './VirtualizedMenuList';
@@ -48,18 +49,9 @@ 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),
+    return (React.createElement(RcPopover, __assign({ ref: handleRef, container: document.body, classes: PopoverClasses, onClose: onClose, open: open, 
+        // FIXME: workaround for virtualized menu height incorrect issue
+        TransitionComponent: RcFade, 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)));
 });
 var RcVirtualizedMenu = styled(_RcVirtualizedMenu)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), VirtualizedMenuStyle);

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

@@ -2,7 +2,7 @@ var _a;
 import { __assign, __read, __rest } from "tslib";
 /* eslint-disable no-console */
 import * as React from 'react';
-import { createElement } from 'react';
+import { createElement, } from 'react';
 import { systemToComponent } from '@virtuoso.dev/react-urx';
 import { compose, connect, distinctUntilChanged, getValue, map, noop, pipe, publish, statefulStream, statefulStreamFromEmitter, stream, subscribe, system, tup, withLatestFrom, } from '@virtuoso.dev/urx';
 import useChangedListContentsSizes from './hooks/useChangedChildSizes';
@@ -11,6 +11,7 @@ import useScrollTop from './hooks/useScrollTop';
 import useSize from './hooks/useSize';
 import useWindowViewportRectRef from './hooks/useWindowViewportRect';
 import { listSystem } from './listSystem';
+import conditionalFlushSync from './utils/conditionalFlushSync';
 import { correctItemSize } from './utils/correctItemSize';
 import { positionStickyCssValue } from './utils/positionStickyCssValue';
 export function identity(value) {
@@ -122,10 +123,19 @@ var GROUP_STYLE = {
     zIndex: 1,
     overflowAnchor: 'none',
 };
+var ITEM_STYLE = { overflowAnchor: 'none' };
 export var Items = React.memo(function VirtuosoItems(_a) {
     var _b = _a.showTopList, showTopList = _b === void 0 ? false : _b;
     var listState = useEmitterValue('listState');
-    var deviation = useEmitterValue('deviation');
+    var _c = __read(React.useState(0), 2), deviation = _c[0], setDeviation = _c[1];
+    var react18ConcurrentRendering = useEmitterValue('react18ConcurrentRendering');
+    useEmitter('deviation', function (value) {
+        if (deviation !== value) {
+            conditionalFlushSync(react18ConcurrentRendering)(function () {
+                return setDeviation(value);
+            });
+        }
+    });
     var sizeRanges = usePublisher('sizeRanges');
     var useWindowScroll = useEmitterValue('useWindowScroll');
     var customScrollParent = useEmitterValue('customScrollParent');
@@ -174,7 +184,7 @@ export var Items = React.memo(function VirtuosoItems(_a) {
         if (item.type === 'group') {
             return createElement(GroupComponent, __assign(__assign({}, contextPropIfNotDomElement(GroupComponent, context)), { key: key, 'data-index': index, 'data-known-size': item.size, 'data-item-index': item.index, style: GROUP_STYLE }), groupContent(item.index));
         }
-        return createElement(ItemComponent, __assign(__assign({}, contextPropIfNotDomElement(ItemComponent, context)), { key: key, 'data-index': index, 'data-known-size': item.size, 'data-item-index': item.index, 'data-item-group-index': item.groupIndex, style: { overflowAnchor: 'none' } }), hasGroups
+        return createElement(ItemComponent, __assign(__assign({}, contextPropIfNotDomElement(ItemComponent, context)), { key: key, 'data-index': index, 'data-known-size': item.size, 'data-item-index': item.index, 'data-item-group-index': item.groupIndex, style: ITEM_STYLE }), hasGroups
             ? itemContent(item.index, item.groupIndex, item.data, context)
             : itemContent(item.index, item.data, context));
     }));
@@ -330,6 +340,7 @@ export var List = (_a = systemToComponent(combinedSystem, {
         customScrollParent: 'customScrollParent',
         scrollerRef: 'scrollerRef',
         logLevel: 'logLevel',
+        react18ConcurrentRendering: 'react18ConcurrentRendering',
         // deprecated
         item: 'item',
         group: 'group',

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

@@ -9,6 +9,7 @@ import useSize from './hooks/useSize';
 import useWindowViewportRectRef from './hooks/useWindowViewportRect';
 import { buildScroller, buildWindowScroller, contextPropIfNotDomElement, identity, viewportStyle, } from './List';
 import { listSystem } from './listSystem';
+import conditionalFlushSync from './utils/conditionalFlushSync';
 import { correctItemSize } from './utils/correctItemSize';
 var tableComponentPropsSystem = system(function () {
     var itemContent = statefulStream(function (index) { return React.createElement("td", null,
@@ -37,6 +38,7 @@ var tableComponentPropsSystem = system(function () {
         ScrollerComponent: distinctProp('Scroller', 'div'),
         EmptyPlaceholder: distinctProp('EmptyPlaceholder'),
         ScrollSeekPlaceholder: distinctProp('ScrollSeekPlaceholder'),
+        FillerRow: distinctProp('FillerRow'),
     };
 });
 var combinedSystem = system(function (_a) {
@@ -48,14 +50,22 @@ var DefaultScrollSeekPlaceholder = function (_a) {
     return (React.createElement("tr", null,
         React.createElement("td", { style: { height: height } })));
 };
-var FillerRow = function (_a) {
+var DefaultFillerRow = function (_a) {
     var height = _a.height;
     return (React.createElement("tr", null,
         React.createElement("td", { style: { height: height, padding: 0, border: 0 } })));
 };
 export var Items = React.memo(function VirtuosoItems() {
     var listState = useEmitterValue('listState');
-    var deviation = useEmitterValue('deviation');
+    var _a = __read(React.useState(0), 2), deviation = _a[0], setDeviation = _a[1];
+    var react18ConcurrentRendering = useEmitterValue('react18ConcurrentRendering');
+    useEmitter('deviation', function (value) {
+        if (deviation !== value) {
+            conditionalFlushSync(react18ConcurrentRendering)(function () {
+                return setDeviation(value);
+            });
+        }
+    });
     var sizeRanges = usePublisher('sizeRanges');
     var useWindowScroll = useEmitterValue('useWindowScroll');
     var customScrollParent = useEmitterValue('customScrollParent');
@@ -71,6 +81,7 @@ export var Items = React.memo(function VirtuosoItems() {
     var ref = useChangedListContentsSizes(sizeRanges, itemSize, trackItemSizes, scrollContainerStateCallback, log, customScrollParent);
     var EmptyPlaceholder = useEmitterValue('EmptyPlaceholder');
     var ScrollSeekPlaceholder = useEmitterValue('ScrollSeekPlaceholder') || DefaultScrollSeekPlaceholder;
+    var FillerRow = useEmitterValue('FillerRow') || DefaultFillerRow;
     var TableBodyComponent = useEmitterValue('TableBodyComponent');
     var TableRowComponent = useEmitterValue('TableRowComponent');
     var computeItemKey = useEmitterValue('computeItemKey');
@@ -155,6 +166,7 @@ export var Table = (_a = systemToComponent(combinedSystem, {
         customScrollParent: 'customScrollParent',
         scrollerRef: 'scrollerRef',
         logLevel: 'logLevel',
+        react18ConcurrentRendering: 'react18ConcurrentRendering',
     },
     methods: {
         scrollToIndex: 'scrollToIndex',

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

@@ -1,4 +1,3 @@
-import { __read } from "tslib";
 import * as u from '@virtuoso.dev/urx';
 export var domIOSystem = u.system(function () {
     var scrollContainerState = u.stream();
@@ -13,12 +12,13 @@ export var domIOSystem = u.system(function () {
     var scrollTo = u.stream();
     var scrollBy = u.stream();
     var scrollingInProgress = u.statefulStream(false);
+    var react18ConcurrentRendering = u.statefulStream(false);
     u.connect(u.pipe(scrollContainerState, u.map(function (_a) {
-        var _b = __read(_a, 1), scrollTop = _b[0];
+        var scrollTop = _a.scrollTop;
         return scrollTop;
     })), scrollTop);
     u.connect(u.pipe(scrollContainerState, u.map(function (_a) {
-        var _b = __read(_a, 2), scrollHeight = _b[1];
+        var scrollHeight = _a.scrollHeight;
         return scrollHeight;
     })), scrollHeight);
     u.connect(scrollTop, statefulScrollTop);
@@ -31,6 +31,7 @@ export var domIOSystem = u.system(function () {
         footerHeight: footerHeight,
         scrollHeight: scrollHeight,
         smoothScrollTargetReached: smoothScrollTargetReached,
+        react18ConcurrentRendering: react18ConcurrentRendering,
         // signals
         scrollTo: scrollTo,
         scrollBy: scrollBy,

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

@@ -1,4 +1,5 @@
 import { __read } from "tslib";
+/* eslint-disable @typescript-eslint/no-unsafe-call */
 import * as u from '@virtuoso.dev/urx';
 import { domIOSystem } from './domIOSystem';
 import { initialTopMostItemIndexSystem } from './initialTopMostItemIndexSystem';

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

@@ -1,4 +1,3 @@
-/* eslint-disable no-continue */
 import { useRcPortalWindowContext } from '../../../../foundation';
 import { LogLevel } from '../loggerSystem';
 import useSize from './useSize';
@@ -17,15 +16,11 @@ export default function useChangedListContentsSizes(callback, itemSize, enabled,
                     ? externalWindow.pageYOffset ||
                         externalWindow.document.documentElement.scrollTop
                     : scrollableElement.scrollTop;
-        customScrollParent
-            ? scrollContainerStateCallback([
-                Math.max(scrollTop, 0),
-                customScrollParent.scrollHeight,
-            ])
-            : scrollContainerStateCallback([
-                Math.max(scrollTop, 0),
-                scrollableElement.scrollHeight,
-            ]);
+        scrollContainerStateCallback({
+            scrollTop: Math.max(scrollTop, 0),
+            scrollHeight: (customScrollParent !== null && customScrollParent !== void 0 ? customScrollParent : scrollableElement).scrollHeight,
+            viewportHeight: (customScrollParent !== null && customScrollParent !== void 0 ? customScrollParent : scrollableElement).offsetHeight,
+        });
         if (ranges !== null) {
             callback(ranges);
         }