@ringcentral/juno 2.9.0 → 2.12.0

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);
     });
@@ -106,7 +105,7 @@ var _RcDialPad = forwardRef(function (inProps, ref) {
             var ariaLabelArr = additionLabel
                 ? [key, additionLabel]
                 : [key];
-            return (React.createElement(RcDialPadButton, __assign({ classes: classes, symbol: symbol, key: key, value: key, onKeyEffect: handleKeyEffect }, getItemProps(index), { "aria-label": ariaLabelArr.join(','), onKeyDown: onKeyFocusedIndexHandle }, (_b = {}, _b[dialButtonKey] = key, _b), getDialPadButtonProps === null || getDialPadButtonProps === void 0 ? void 0 : getDialPadButtonProps(key), (key === '0'
+            return (React.createElement(RcDialPadButton, __assign({ classes: classes, symbol: symbol, key: key, value: key, onKeyEffect: handleKeyEffect, externalWindow: externalWindow }, getItemProps(index), { "aria-label": ariaLabelArr.join(','), onKeyDown: onKeyFocusedIndexHandle }, (_b = {}, _b[dialButtonKey] = key, _b), getDialPadButtonProps === null || getDialPadButtonProps === void 0 ? void 0 : getDialPadButtonProps(key), (key === '0'
                 ? {
                     longPressValue: DIALER_PAD_PLUS,
                     longPressDelay: longPressDelay,

package/es6/components/Dialer/DialPadButton/DialPadButton.js

@@ -4,9 +4,9 @@ import { styled, useLongPress } from '../../../foundation';
 import { RcIconButton } from '../../Buttons';
 import { buttonWrapperStyle } from './styles';
 var _RcDialPadButton = function (props) {
-    var value = props.value, longPressValue = props.longPressValue, longPressDelay = props.longPressDelay, onKeyEffect = props.onKeyEffect, rest = __rest(props, ["value", "longPressValue", "longPressDelay", "onKeyEffect"]);
+    var value = props.value, longPressValue = props.longPressValue, longPressDelay = props.longPressDelay, onKeyEffect = props.onKeyEffect, _a = props.externalWindow, externalWindow = _a === void 0 ? window : _a, rest = __rest(props, ["value", "longPressValue", "longPressDelay", "onKeyEffect", "externalWindow"]);
     var isPressEvent = typeof longPressDelay === 'number' && typeof longPressValue === 'string';
-    var _a = useLongPress({
+    var _b = useLongPress({
         onTap: function (e, reason) {
             onKeyEffect(value, reason);
         },
@@ -15,7 +15,7 @@ var _RcDialPadButton = function (props) {
                 onKeyEffect(longPressValue, reason);
             }
             : undefined,
-    }, rest, { delay: longPressDelay }), ref = _a.ref, events = __rest(_a, ["ref"]);
+    }, rest, { delay: longPressDelay, externalWindow: externalWindow }), ref = _b.ref, events = __rest(_b, ["ref"]);
     return (React.createElement(RcIconButton, __assign({ ref: ref, variant: "round", stretchIcon: true }, rest, events)));
 };
 var RcDialPadButton = styled(_RcDialPadButton)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), buttonWrapperStyle);

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/context/index.js

@@ -1,2 +1,3 @@
+export * from './HasPortalParentContext';
 export * from './PortalIDContext';
 export * from './PortalManagerContext';

package/es6/components/PortalHost/index.js

@@ -1,4 +1,5 @@
 export * from './Connectable';
+export { HasPortalParentProvider } from './context';
 export * from './PortalHost';
 export * from './PortalManager';
 export * from './utils';

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);
         }

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

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

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

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

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

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

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

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

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

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