@ringcentral/juno 1.11.2 → 1.11.3-beta.5620-d9154e6b

package/components/PortalHost/utils/useUnmountPortalHandler.d.ts

@@ -0,0 +1,5 @@
+export interface UseUnmountPortalHandler {
+    <F extends (...args: any[]) => any>(handler?: F): F;
+    (): () => void;
+}
+export declare const useUnmountPortalHandler: UseUnmountPortalHandler;

package/components/PortalHost/utils/useUnmountPortalHandler.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var foundation_1 = require("../../../foundation");
+var PortalManager_1 = require("../PortalManager");
+var usePortalManagerWithID_1 = require("./usePortalManagerWithID");
+exports.useUnmountPortalHandler = function (handler) {
+    var managerWithID = usePortalManagerWithID_1.usePortalManagerWithID();
+    var handleExited = foundation_1.useEventCallback(function (node) {
+        handler === null || handler === void 0 ? void 0 : handler(node);
+        if (managerWithID) {
+            var manager = managerWithID.manager, id = managerWithID.id;
+            manager[PortalManager_1.UnmountSymbol](id);
+        }
+    });
+    return handleExited;
+};

package/components/Snackbar/Snackbar.js

@@ -40,14 +40,16 @@ var Slide_1 = __importDefault(require("@material-ui/core/Slide"));
 var Snackbar_1 = __importDefault(require("@material-ui/core/Snackbar"));
 var react_1 = __importStar(require("react"));
 var foundation_1 = require("../../foundation");
+var PortalHost_1 = require("../PortalHost");
 var SnackbarContent_1 = require("./SnackbarContent");
 var styles_1 = require("./styles");
 var utils_1 = require("./utils");
 var _RcSnackbar = react_1.forwardRef(function (inProps, ref) {
     var props = foundation_1.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, rest = __rest(props, ["classes", "size", "type", "message", "action", "ContentProps", "children"]);
+    var classesProp = props.classes, size = props.size, type = props.type, message = props.message, action = props.action, ContentProps = props.ContentProps, children = props.children, onExitedProp = props.onExited, rest = __rest(props, ["classes", "size", "type", "message", "action", "ContentProps", "children", "onExited"]);
     var classes = react_1.useMemo(function () { return foundation_1.combineClasses(utils_1.RcSnackbarClasses, classesProp); }, [classesProp]);
-    return (react_1.default.createElement(Snackbar_1.default, __assign({ ref: ref, classes: classes }, rest), children || (react_1.default.createElement(SnackbarContent_1.RcSnackbarContent, __assign({ size: size, type: type, message: message, action: action }, ContentProps)))));
+    var onExited = PortalHost_1.useUnmountPortalHandler(onExitedProp);
+    return (react_1.default.createElement(Snackbar_1.default, __assign({ ref: ref, classes: classes }, rest, { onExited: onExited }), children || (react_1.default.createElement(SnackbarContent_1.RcSnackbarContent, __assign({ size: size, type: type, message: message, action: action }, ContentProps)))));
 });
 var RcSnackbar = foundation_1.styled(_RcSnackbar)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.SnackbarStyle);
 exports.RcSnackbar = RcSnackbar;

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

@@ -18,8 +18,9 @@ export declare function useHighlightScroll({ containerHeighRef, scrollToIndex, }
      * Scroll to target highlighted index
      * @param prevHighlightedIndex previous highlightedIndex
      * @param currHighlightedIndex current highlightedIndex
+     * @param topHighlightIndex top highlighIndex for check should scroll when init
      */
-    scrollToHighlightedIndex: (prevHighlightedIndex: number, currHighlightedIndex: number) => void;
+    scrollToHighlightedIndex: (prevHighlightedIndex: number, currHighlightedIndex: number, topHighlightIndex?: number) => void;
     /**
      * set to virtuoso `scrollerRef` prop, auto bind inner `scrollerRef`
      */

package/components/Virtuoso/utils/useHighlightScroll.js

@@ -8,9 +8,10 @@ function useHighlightScroll(_a) {
     var containerHeighRef = _a.containerHeighRef, scrollToIndex = _a.scrollToIndex;
     var renderedItemsRef = react_1.useRef([]);
     var scrollerRef = react_1.useRef();
-    var scrollToHighlightedIndex = function (prevHighlightedIndex, currHighlightedIndex) {
+    var scrollToHighlightedIndex = function (prevHighlightedIndex, currHighlightedIndex, topHighlightIndex) {
+        if (topHighlightIndex === void 0) { topHighlightIndex = 0; }
         if (!scrollerRef.current) {
-            if (currHighlightedIndex !== 0) {
+            if (currHighlightedIndex !== topHighlightIndex) {
                 setTimeout(function () {
                     scrollToIndex({
                         index: currHighlightedIndex,
@@ -86,6 +87,7 @@ function useHighlightScroll(_a) {
          * Scroll to target highlighted index
          * @param prevHighlightedIndex previous highlightedIndex
          * @param currHighlightedIndex current highlightedIndex
+         * @param topHighlightIndex top highlighIndex for check should scroll when init
          */
         scrollToHighlightedIndex: scrollToHighlightedIndex,
         /**

package/components/index.d.ts

@@ -33,6 +33,7 @@ export * from './Popover';
 export * from './Popper';
 export * from './PopupBox';
 export * from './Portal';
+export * from './PortalHost';
 export * from './Presence';
 export * from './Progress';
 export * from './Rating';
@@ -49,6 +50,6 @@ export * from './Toolbar';
 export * from './Tooltip';
 export * from './Transitions';
 export * from './Typography';
-export * from './Virtuoso';
 export * from './VirtualizedMenu';
+export * from './Virtuoso';
 export * from './VisuallyHidden';

package/components/index.js

@@ -38,6 +38,7 @@ __export(require("./Popover"));
 __export(require("./Popper"));
 __export(require("./PopupBox"));
 __export(require("./Portal"));
+__export(require("./PortalHost"));
 __export(require("./Presence"));
 __export(require("./Progress"));
 __export(require("./Rating"));
@@ -54,6 +55,6 @@ __export(require("./Toolbar"));
 __export(require("./Tooltip"));
 __export(require("./Transitions"));
 __export(require("./Typography"));
-__export(require("./Virtuoso"));
 __export(require("./VirtualizedMenu"));
+__export(require("./Virtuoso"));
 __export(require("./VisuallyHidden"));

package/es6/components/Dialog/Dialog.js

@@ -26,15 +26,20 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import MuiDialog from '@material-ui/core/Dialog';
 import React, { forwardRef, useMemo } from 'react';
-import { combineClasses, styled, useRcPortalWindowContext, useThemeProps, } from '../../foundation';
+import { combineClasses, styled, useRcPortalWindowContext, useThemeProps, withDeprecatedCheck, } from '../../foundation';
+import { useUnmountPortalHandler } from '../PortalHost';
 import { DialogStyle } from './styles';
 import { RcDialogClasses } from './utils';
+import { RcDialogContext } from './utils/DialogContext';
 var _RcDialog = forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'RcDialog' });
-    var classesProp = props.classes, size = props.size, children = props.children, rest = __rest(props, ["classes", "size", "children"]);
+    var classesProp = props.classes, _a = props.size, size = _a === void 0 ? 'medium' : _a, maxWidthProp = props.maxWidth, _b = props.fullWidth, fullWidth = _b === void 0 ? true : _b, childrenSize = props.childrenSize, children = props.children, onExitedProp = props.onExited, rest = __rest(props, ["classes", "size", "maxWidth", "fullWidth", "childrenSize", "children", "onExited"]);
     var classes = useMemo(function () { return combineClasses(RcDialogClasses, classesProp); }, [classesProp]);
     var externalWindow = useRcPortalWindowContext().externalWindow;
+    var onExited = useUnmountPortalHandler(onExitedProp);
     var maxWidth = useMemo(function () {
+        if (maxWidthProp)
+            return maxWidthProp;
         switch (size) {
             case 'fullScreen':
             case 'xsmall':
@@ -47,14 +52,21 @@ var _RcDialog = forwardRef(function (inProps, ref) {
             default:
                 return 'xs';
         }
-    }, [size]);
-    return (React.createElement(MuiDialog, __assign({ ref: ref, container: externalWindow === null || externalWindow === void 0 ? void 0 : externalWindow.document.body, maxWidth: maxWidth, fullScreen: size === 'fullScreen' ? true : undefined, classes: classes }, rest), children));
+    }, [maxWidthProp, size]);
+    var contextValue = useMemo(function () { return ({ size: childrenSize }); }, [
+        childrenSize,
+    ]);
+    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 }, rest, { onExited: onExited }),
+        React.createElement(RcDialogContext.Provider, { value: contextValue }, children)));
 });
-var RcDialog = styled(_RcDialog)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), DialogStyle);
-RcDialog.defaultProps = {
-    size: 'medium',
-    fullWidth: true,
-};
+var RcDialog = styled(withDeprecatedCheck(_RcDialog, [
+    {
+        prop: 'size',
+        time: '2021-11',
+        comment: "\n   * please use `maxWidth` and `fullScreen` directly\n   *\n   * - 'fullScreen' => false\n   * - 'large' => `md`\n   * - 'medium' => `sm`\n   * - 'small' => `xs`\n   * - 'xsmall' => no longer exist, should custom by yourself\n   */",
+    },
+], 'RcDialog'))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), DialogStyle);
+RcDialog.defaultProps = {};
 RcDialog.displayName = 'RcDialog';
-export { RcDialog };
+export { RcDialog, RcDialogContext };
 var templateObject_1;

package/es6/components/Dialog/DialogActions/DialogActions.js

@@ -27,18 +27,24 @@ var __rest = (this && this.__rest) || function (s, e) {
 import MuiDialogActions from '@material-ui/core/DialogActions';
 import React, { forwardRef, useMemo } from 'react';
 import { combineClasses, styled, useThemeProps, } from '../../../foundation';
+import { useDialogDefaultProps } from '../utils';
 import { DialogActionsStyle } from './styles';
 import { RcDialogActionsClasses } from './utils';
 var _RcDialogActions = forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'RcDialogActions' });
-    var classesProp = props.classes, size = props.size, children = props.children, rest = __rest(props, ["classes", "size", "children"]);
+    var classesProp = props.classes, size = props.size, children = props.children, reverse = props.reverse, rest = __rest(props, ["classes", "size", "children", "reverse"]);
     var classes = useMemo(function () { return combineClasses(RcDialogActionsClasses, classesProp); }, [classesProp]);
     return (React.createElement(MuiDialogActions, __assign({}, rest, { ref: ref, classes: classes, disableSpacing: true }), children));
 });
-var RcDialogActions = styled(_RcDialogActions)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), DialogActionsStyle);
-RcDialogActions.defaultProps = {
-    size: 'medium',
-};
+var RcDialogActions = styled(_RcDialogActions).attrs(function (props) {
+    var _a, _b;
+    var toProps = useDialogDefaultProps(props);
+    var direction = (_a = toProps.direction) !== null && _a !== void 0 ? _a : (toProps.size === 'small' ? 'vertical' : 'horizontal');
+    var reverse = (_b = toProps.reverse) !== null && _b !== void 0 ? _b : direction === 'vertical';
+    return __assign(__assign({}, toProps), { direction: direction,
+        reverse: reverse });
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), DialogActionsStyle);
+RcDialogActions.defaultProps = {};
 RcDialogActions.displayName = 'RcDialogActions';
 export { RcDialogActions };
 var templateObject_1;

package/es6/components/Dialog/DialogActions/styles/DialogActionsStyle.js

@@ -23,15 +23,27 @@ var __spread = (this && this.__spread) || function () {
     return ar;
 };
 import { css, spacing } from '../../../../foundation';
+import { RcDialogContentClasses } from '../../DialogContent/utils';
 import { RcDialogActionsSizes } from '../utils';
+var itemSpace = spacing(2);
 export var DialogActionsStyle = function (props) {
-    var size = props.size, direction = props.direction, disableSpacing = props.disableSpacing;
-    var args = RcDialogActionsSizes[size];
-    var paddingValue = args.length > 0 ? spacing.apply(void 0, __spread(args)) : spacing(2, 6, 6);
+    var size = props.size, reverse = props.reverse, direction = props.direction, disableSpacing = props.disableSpacing;
     var isVertical = direction === 'vertical';
-    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    padding: ", ";\n    flex-direction: ", ";\n\n    ", "\n  "], ["\n    padding: ", ";\n    flex-direction: ", ";\n\n    ",
-        "\n  "])), paddingValue, isVertical && 'column-reverse', !disableSpacing && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        > * + * {\n          ", ";\n        }\n      "], ["\n        > * + * {\n          ",
+    var columnDirection = reverse ? 'column-reverse' : 'column';
+    var rowDirection = reverse ? 'row-reverse' : 'row';
+    return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    padding: ", ";\n    flex-direction: ", ";\n\n    ", "\n\n    ", ";\n  "], ["\n    padding: ", ";\n    flex-direction: ", ";\n\n    ",
+        "\n\n    ",
+        ";\n  "])), spacing.apply(void 0, __spread(RcDialogActionsSizes[size])), isVertical ? columnDirection : rowDirection, size === 'medium' && 
+    /**
+     * use && because first is component selector, second one is dynamic selector with different props
+     * @see https://styled-components.com/docs/faqs#why-do-my-dom-nodes-have-two-classes
+     */
+    css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        .", " + && {\n          padding-top: ", ";\n        }\n      "], ["\n        .", " + && {\n          padding-top: ", ";\n        }\n      "])), RcDialogContentClasses.dividers, spacing(5)), !disableSpacing && css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n        > * + * {\n          ", ";\n        }\n      "], ["\n        > * + * {\n          ",
         ";\n        }\n      "])), isVertical
-        ? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                margin-bottom: ", ";\n              "], ["\n                margin-bottom: ", ";\n              "])), spacing(4)) : css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                margin-left: ", ";\n              "], ["\n                margin-left: ", ";\n              "])), spacing(2))));
+        ? css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                ", "\n              "], ["\n                ",
+            "\n              "])), reverse
+            ? css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                      margin-bottom: ", ";\n                    "], ["\n                      margin-bottom: ", ";\n                    "])), itemSpace) : css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                      margin-top: ", ";\n                    "], ["\n                      margin-top: ", ";\n                    "])), itemSpace)) : css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n                ", "\n              "], ["\n                ",
+        "\n              "])), reverse
+        ? css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n                      margin-right: ", ";\n                    "], ["\n                      margin-right: ", ";\n                    "])), itemSpace) : css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n                      margin-left: ", ";\n                    "], ["\n                      margin-left: ", ";\n                    "])), itemSpace))));
 };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

package/es6/components/Dialog/DialogActions/utils/DialogActionsUtils.js

@@ -1,9 +1,6 @@
 import { RcClasses } from '../../../../foundation';
 export var RcDialogActionsClasses = RcClasses([], 'RcDialogActions');
 export var RcDialogActionsSizes = {
-    xsmall: [2, 3.5, 4],
-    small: [],
-    medium: [],
-    large: [],
-    fullScreen: [],
+    small: [4],
+    medium: [3, 6, 6],
 };

package/es6/components/Dialog/DialogContent/DialogContent.js

@@ -27,6 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import MuiDialogContent from '@material-ui/core/DialogContent';
 import React, { forwardRef, useMemo } from 'react';
 import { combineClasses, styled, useThemeProps, } from '../../../foundation';
+import { useDialogDefaultProps } from '../utils';
 import { DialogContentStyle } from './styles';
 import { RcDialogContentClasses } from './utils';
 var _RcDialogContent = forwardRef(function (inProps, ref) {
@@ -35,10 +36,8 @@ var _RcDialogContent = forwardRef(function (inProps, ref) {
     var classes = useMemo(function () { return combineClasses(RcDialogContentClasses, classesProp); }, [classesProp]);
     return (React.createElement(MuiDialogContent, __assign({}, rest, { ref: ref, classes: classes }), children));
 });
-var RcDialogContent = styled(_RcDialogContent)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), DialogContentStyle);
-RcDialogContent.defaultProps = {
-    size: 'medium',
-};
+var RcDialogContent = styled(_RcDialogContent).attrs(useDialogDefaultProps)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), DialogContentStyle);
+RcDialogContent.defaultProps = {};
 RcDialogContent.displayName = 'RcDialogContent';
 export { RcDialogContent };
 var templateObject_1;

package/es6/components/Dialog/DialogContent/styles/DialogContentStyle.js

@@ -23,11 +23,9 @@ var __spread = (this && this.__spread) || function () {
     return ar;
 };
 import { css, palette2, spacing } from '../../../../foundation';
-import { RcDialogContentClasses, RcDialogContentSpacings } from '../utils';
+import { RcDialogContentClasses, getRcDialogContentSpacings } from '../utils';
 export var DialogContentStyle = function (props) {
-    var size = props.size;
-    var args = RcDialogContentSpacings[size];
-    var paddingValue = args.length > 0 ? spacing.apply(void 0, __spread(args)) : spacing(0, 6, 3);
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: ", ";\n\n    &.", " {\n      border-color: ", ";\n    }\n  "], ["\n    padding: ", ";\n\n    &.", " {\n      border-color: ", ";\n    }\n  "])), paddingValue, RcDialogContentClasses.dividers, palette2('neutral', 'l02'));
+    var size = props.size, dividers = props.dividers;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: ", ";\n\n    &.", " {\n      border-color: ", ";\n    }\n  "], ["\n    padding: ", ";\n\n    &.", " {\n      border-color: ", ";\n    }\n  "])), spacing.apply(void 0, __spread(getRcDialogContentSpacings(dividers)[size])), RcDialogContentClasses.dividers, palette2('neutral', 'l02'));
 };
 var templateObject_1;

package/es6/components/Dialog/DialogContent/utils/DialogContentUtils.js

@@ -1,9 +1,9 @@
 import { RcClasses } from '../../../../foundation';
 export var RcDialogContentClasses = RcClasses(['dividers'], 'RcDialogContent');
-export var RcDialogContentSpacings = {
-    xsmall: [0, 3.5, 3],
-    small: [],
-    medium: [],
-    large: [],
-    fullScreen: [],
+export var getRcDialogContentSpacings = function (isDividers) {
+    var spacings = {
+        small: isDividers ? [3, 4] : [0, 4, 1],
+        medium: isDividers ? [3, 6] : [0, 6, 3],
+    };
+    return spacings;
 };

package/es6/components/Dialog/DialogContentText/DialogContentText.js

@@ -29,6 +29,7 @@ import React, { forwardRef, useMemo } from 'react';
 import { combineClasses, styled, useThemeProps, } from '../../../foundation';
 import { TypographyStyle } from '../../Typography/styles';
 import { MuiDefaultColor, RcCustomTypographyVariant, } from '../../Typography/utils';
+import { useDialogDefaultProps } from '../utils';
 import { DialogContentTextStyle } from './styles';
 import { RcDialogContentTextClasses } from './utils';
 var _RcDialogContentText = forwardRef(function (inProps, ref) {
@@ -36,7 +37,7 @@ var _RcDialogContentText = forwardRef(function (inProps, ref) {
         props: inProps,
         name: 'RcDialogContentText',
     });
-    var colorProp = props.color, componentProp = props.component, classesProp = props.classes, variant = props.variant, weight = props.weight, children = props.children, rest = __rest(props, ["color", "component", "classes", "variant", "weight", "children"]);
+    var colorProp = props.color, componentProp = props.component, classesProp = props.classes, variant = props.variant, weight = props.weight, size = props.size, children = props.children, rest = __rest(props, ["color", "component", "classes", "variant", "weight", "size", "children"]);
     var component = componentProp || RcCustomTypographyVariant[variant];
     var classes = useMemo(function () { return combineClasses(RcDialogContentTextClasses, classesProp); }, [classesProp]);
     var color = useMemo(function () {
@@ -46,11 +47,11 @@ var _RcDialogContentText = forwardRef(function (inProps, ref) {
     // * for use html view variant
     , __assign({ "data-variant": variant, "data-color": color, color: color, ref: ref, classes: classes, component: component }, rest), children));
 });
-var RcDialogContentText = styled(_RcDialogContentText)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), DialogContentTextStyle, TypographyStyle);
-RcDialogContentText.defaultProps = {
-    color: 'neutral.f04',
-    variant: 'inherit',
-};
+var RcDialogContentText = styled(_RcDialogContentText).attrs(function (props) {
+    var toProps = useDialogDefaultProps(props);
+    return __assign({ variant: toProps.size === 'small' ? 'caption1' : 'body1', color: 'neutral.f04' }, toProps);
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), DialogContentTextStyle, TypographyStyle);
+RcDialogContentText.defaultProps = {};
 RcDialogContentText.displayName = 'RcDialogContentText';
 export { RcDialogContentText };
 var templateObject_1;

package/es6/components/Dialog/DialogContentText/styles/DialogContentTextStyle.js

@@ -3,7 +3,9 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import { css } from '../../../../foundation';
-export var DialogContentTextStyle = function () {
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+export var DialogContentTextStyle = function (_a) {
+    var gutterBottom = _a.gutterBottom;
+    // that is mui but, that not work with gutterBottom set
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    margin-bottom: ", ";\n  "], ["\n    margin-bottom: ", ";\n  "])), gutterBottom === false && 0);
 };
 var templateObject_1;

package/es6/components/Dialog/DialogTitle/DialogTitle.js

@@ -28,18 +28,17 @@ import MuiDialogTitle from '@material-ui/core/DialogTitle';
 import React, { forwardRef, useMemo } from 'react';
 import { combineClasses, styled, useThemeProps, } from '../../../foundation';
 import { RcTypography } from '../../Typography';
+import { useDialogDefaultProps } from '../utils';
 import { DialogTitleStyle } from './styles';
-import { RcDialogTitleClasses } from './utils';
+import { RcDialogTitleClasses, RcDialogTitleTypographyVariant } from './utils';
 var _RcDialogTitle = forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'RcDialogTitle' });
     var classesProp = props.classes, display = props.display, space = props.space, children = props.children, disableTypography = props.disableTypography, size = props.size, rest = __rest(props, ["classes", "display", "space", "children", "disableTypography", "size"]);
     var classes = useMemo(function () { return combineClasses(RcDialogTitleClasses, classesProp); }, [classesProp]);
-    return (React.createElement(MuiDialogTitle, __assign({}, rest, { disableTypography: true, ref: ref, classes: classes }), disableTypography ? (children) : (React.createElement(RcTypography, { variant: "title2", component: "h2" }, children))));
+    return (React.createElement(MuiDialogTitle, __assign({}, rest, { disableTypography: true, ref: ref, classes: classes }), disableTypography ? (children) : (React.createElement(RcTypography, { variant: RcDialogTitleTypographyVariant[size], component: "h2" }, children))));
 });
-var RcDialogTitle = styled(_RcDialogTitle)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), DialogTitleStyle);
-RcDialogTitle.defaultProps = {
-    size: 'medium',
-};
+var RcDialogTitle = styled(_RcDialogTitle).attrs(useDialogDefaultProps)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), DialogTitleStyle);
+RcDialogTitle.defaultProps = {};
 RcDialogTitle.displayName = 'RcDialogTitle';
 export { RcDialogTitle };
 var templateObject_1;

package/es6/components/Dialog/DialogTitle/styles/DialogTitleStyle.js

@@ -26,12 +26,11 @@ import { css, palette2, spacing } from '../../../../foundation';
 import { RcDialogTitleSpacings } from '../utils';
 export var DialogTitleStyle = function (props) {
     var size = props.size, spaceProp = props.space, display = props.display;
-    var sizeSpacing = RcDialogTitleSpacings[size];
     var paddingValue = spaceProp !== undefined
         ? spaceProp instanceof Array
-            ? spacing.apply(void 0, __spread(spaceProp)) : spacing(spaceProp)
-        : sizeSpacing.length > 0
-            ? spacing.apply(void 0, __spread(sizeSpacing)) : null;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    color: ", ";\n\n    padding: ", ";\n\n    display: ", ";\n  "], ["\n    color: ", ";\n\n    padding: ", ";\n\n    display: ", ";\n  "])), palette2('neutral', 'f06'), paddingValue, display);
+            ? spaceProp
+            : [spaceProp]
+        : RcDialogTitleSpacings[size];
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    color: ", ";\n\n    padding: ", ";\n\n    display: ", ";\n  "], ["\n    color: ", ";\n\n    padding: ", ";\n\n    display: ", ";\n  "])), palette2('neutral', 'f06'), spacing.apply(void 0, __spread(paddingValue)), display);
 };
 var templateObject_1;

package/es6/components/Dialog/DialogTitle/utils/DialogTitleUtils.js

@@ -1,9 +1,10 @@
 import { RcClasses } from '../../../../foundation';
 export var RcDialogTitleClasses = RcClasses([], 'RcDialogTitle');
 export var RcDialogTitleSpacings = {
-    xsmall: [4, 3.5],
-    small: [],
-    medium: [],
-    large: [],
-    fullScreen: [],
+    small: [4],
+    medium: [4, 6],
+};
+export var RcDialogTitleTypographyVariant = {
+    small: 'subheading2',
+    medium: 'title2',
 };

package/es6/components/Dialog/utils/DialogContext.js

@@ -0,0 +1,31 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { createContext, useContext } from 'react';
+export var RcDialogContext = createContext({});
+export var useRcDialogContext = function () { return useContext(RcDialogContext); };
+export var useDialogDefaultProps = function (_a) {
+    var theme = _a.theme, props = __rest(_a, ["theme"]);
+    var context = useRcDialogContext();
+    var _b = props.size, size = _b === void 0 ? context.size || 'medium' : _b;
+    return __assign(__assign({}, props), { size: size });
+};

package/es6/components/Dialog/utils/index.js

@@ -1 +1,2 @@
+export * from './DialogContext';
 export * from './DialogUtils';

package/es6/components/Downshift/Downshift.js

@@ -52,8 +52,8 @@ import { RcSuggestionList } from './SuggestionList';
 import { DEFAULT_GET_OPTION_LABEL, DEFAULT_KEY_TO_CHIPS, DEFAULT_LIMIT_CHIPS, RcDownshiftDefaultFilterOptions, RcDownshiftInputClasses, useDownshift, useDownshiftError, } from './utils';
 var _RcDownshift = memo(forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'RcDownshift' });
-    var _a = props.itemToString, itemToString = _a === void 0 ? DEFAULT_GET_OPTION_LABEL : _a, _b = props.keyToChips, keyToChips = _b === void 0 ? DEFAULT_KEY_TO_CHIPS : _b, _c = props.limitOfFreeChips, limitOfFreeChips = _c === void 0 ? DEFAULT_LIMIT_CHIPS : _c, minRowHeight = props.minRowHeight, suggestionItems = props.suggestionItems, messageRef = props.messageRef, MenuItem = props.MenuItem, inputLabel = props.inputLabel, nameError = props.nameError, maxLength = props.maxLength, InputItem = props.InputItem, emailError = props.emailError, autoSwitchEmail = props.autoSwitchEmail, enableFreeChips = props.enableFreeChips, inputPlaceholder = props.inputPlaceholder, errorSelectedItems = props.errorSelectedItems, enableAutoTransform = props.enableAutoTransform, allowPlainHelperText = props.allowPlainHelperText, TextFieldProps = props.TextFieldProps, selectedItemsProp = props.selectedItems, automationId = props.automationId, screenReader = props.screenReader, onSelectChange = props.onSelectChange, variant = props.variant, getExpandIconProps = props.getExpandIconProps, groupBy = props.groupBy, _d = props.value, valueProp = _d === void 0 ? selectedItemsProp : _d, _e = props.autoHighlight, autoHighlight = _e === void 0 ? true : _e, _f = props.fullWidth, fullWidth = _f === void 0 ? true : _f, _g = props.clearBtn, clearBtn = _g === void 0 ? false : _g, _h = props.toggleButton, toggleButton = _h === void 0 ? false : _h, _j = props.multiple, multiple = _j === void 0 ? false : _j, clearButtonProps = props.clearButtonProps, onClear = props.onClear, ToggleButtonProps = props.ToggleButtonProps, inputValueProp = props.inputValue, onKeyDownProp = props.onKeyDown, helperTextProp = props.helperText, options = props.options, openOnFocus = props.openOnFocus, _k = props.getOptionLabel, getOptionLabel = _k === void 0 ? itemToString : _k, renderInput = props.renderInput, _l = props.label, label = _l === void 0 ? inputLabel : _l, _m = props.inputRef, inputRefProp = _m === void 0 ? messageRef : _m, _o = props.error, error = _o === void 0 ? nameError : _o, _p = props.placeholder, placeholder = _p === void 0 ? inputPlaceholder : _p, _q = props.freeSolo, freeSolo = _q === void 0 ? enableFreeChips : _q, _r = props.keyToTags, keyToTags = _r === void 0 ? keyToChips : _r, _s = props.maxFreeSolo, maxFreeSolo = _s === void 0 ? limitOfFreeChips : _s, SuggestionListProps = props.SuggestionListProps, _t = props.autoSelect, autoSelect = _t === void 0 ? enableAutoTransform : _t, PopperProps = props.PopperProps, initialIsOpen = props.initialIsOpen, disabled = props.disabled, requiredProp = props.required, _u = props.defaultIsOpen, defaultIsOpen = _u === void 0 ? openOnFocus : _u, _v = props.disableCloseOnSelect, disableCloseOnSelect = _v === void 0 ? defaultIsOpen : _v, _w = props.onChange, onChangeProp = _w === void 0 ? onSelectChange : _w, onInputChangeProp = props.onInputChange, onMaxFreeSolo = props.onMaxFreeSolo, FormHelperTextPropsProp = props.FormHelperTextProps, action = props.action, filterOptions = props.filterOptions, renderOption = props.renderOption, renderTags = props.renderTags, getOptionDisabled = props.getOptionDisabled, renderGroup = props.renderGroup, onGroupExpanded = props.onGroupExpanded, renderNoOptions = props.renderNoOptions, InputPropsProp = props.InputProps, debug = props.debug, disabledItemsHighlightable = props.disabledItemsHighlightable, openProp = props.open, onOpen = props.onOpen, onClose = props.onClose, rest = __rest(props, ["itemToString", "keyToChips", "limitOfFreeChips", "minRowHeight", "suggestionItems", "messageRef", "MenuItem", "inputLabel", "nameError", "maxLength", "InputItem", "emailError", "autoSwitchEmail", "enableFreeChips", "inputPlaceholder", "errorSelectedItems", "enableAutoTransform", "allowPlainHelperText", "TextFieldProps", "selectedItems", "automationId", "screenReader", "onSelectChange", "variant", "getExpandIconProps", "groupBy", "value", "autoHighlight", "fullWidth", "clearBtn", "toggleButton", "multiple", "clearButtonProps", "onClear", "ToggleButtonProps", "inputValue", "onKeyDown", "helperText", "options", "openOnFocus", "getOptionLabel", "renderInput", "label", "inputRef", "error", "placeholder", "freeSolo", "keyToTags", "maxFreeSolo", "SuggestionListProps", "autoSelect", "PopperProps", "initialIsOpen", "disabled", "required", "defaultIsOpen", "disableCloseOnSelect", "onChange", "onInputChange", "onMaxFreeSolo", "FormHelperTextProps", "action", "filterOptions", "renderOption", "renderTags", "getOptionDisabled", "renderGroup", "onGroupExpanded", "renderNoOptions", "InputProps", "debug", "disabledItemsHighlightable", "open", "onOpen", "onClose"]);
-    var _x = __read(useState('bottom'), 2), position = _x[0], setPosition = _x[1];
+    var _a = props.itemToString, itemToString = _a === void 0 ? DEFAULT_GET_OPTION_LABEL : _a, _b = props.keyToChips, keyToChips = _b === void 0 ? DEFAULT_KEY_TO_CHIPS : _b, _c = props.limitOfFreeChips, limitOfFreeChips = _c === void 0 ? DEFAULT_LIMIT_CHIPS : _c, minRowHeight = props.minRowHeight, suggestionItems = props.suggestionItems, messageRef = props.messageRef, MenuItem = props.MenuItem, inputLabel = props.inputLabel, nameError = props.nameError, maxLength = props.maxLength, InputItem = props.InputItem, emailError = props.emailError, autoSwitchEmail = props.autoSwitchEmail, enableFreeChips = props.enableFreeChips, inputPlaceholder = props.inputPlaceholder, errorSelectedItems = props.errorSelectedItems, enableAutoTransform = props.enableAutoTransform, allowPlainHelperText = props.allowPlainHelperText, TextFieldProps = props.TextFieldProps, selectedItemsProp = props.selectedItems, automationId = props.automationId, screenReader = props.screenReader, onSelectChange = props.onSelectChange, variant = props.variant, groupExpanded = props.groupExpanded, _d = props.groupVariant, groupVariant = _d === void 0 ? 'normal' : _d, getExpandIconProps = props.getExpandIconProps, groupBy = props.groupBy, _e = props.value, valueProp = _e === void 0 ? selectedItemsProp : _e, _f = props.autoHighlight, autoHighlight = _f === void 0 ? true : _f, _g = props.fullWidth, fullWidth = _g === void 0 ? true : _g, _h = props.clearBtn, clearBtn = _h === void 0 ? false : _h, _j = props.toggleButton, toggleButton = _j === void 0 ? false : _j, _k = props.multiple, multiple = _k === void 0 ? false : _k, clearButtonProps = props.clearButtonProps, onClear = props.onClear, ToggleButtonProps = props.ToggleButtonProps, inputValueProp = props.inputValue, onKeyDownProp = props.onKeyDown, helperTextProp = props.helperText, options = props.options, openOnFocus = props.openOnFocus, _l = props.getOptionLabel, getOptionLabel = _l === void 0 ? itemToString : _l, renderInput = props.renderInput, _m = props.label, label = _m === void 0 ? inputLabel : _m, _o = props.inputRef, inputRefProp = _o === void 0 ? messageRef : _o, _p = props.error, error = _p === void 0 ? nameError : _p, _q = props.placeholder, placeholder = _q === void 0 ? inputPlaceholder : _q, _r = props.freeSolo, freeSolo = _r === void 0 ? enableFreeChips : _r, _s = props.keyToTags, keyToTags = _s === void 0 ? keyToChips : _s, _t = props.maxFreeSolo, maxFreeSolo = _t === void 0 ? limitOfFreeChips : _t, SuggestionListProps = props.SuggestionListProps, _u = props.autoSelect, autoSelect = _u === void 0 ? enableAutoTransform : _u, PopperProps = props.PopperProps, initialIsOpen = props.initialIsOpen, disabled = props.disabled, requiredProp = props.required, _v = props.defaultIsOpen, defaultIsOpen = _v === void 0 ? openOnFocus : _v, _w = props.disableCloseOnSelect, disableCloseOnSelect = _w === void 0 ? defaultIsOpen : _w, _x = props.onChange, onChangeProp = _x === void 0 ? onSelectChange : _x, onInputChangeProp = props.onInputChange, onMaxFreeSolo = props.onMaxFreeSolo, FormHelperTextPropsProp = props.FormHelperTextProps, action = props.action, filterOptions = props.filterOptions, renderOption = props.renderOption, renderTags = props.renderTags, getOptionDisabled = props.getOptionDisabled, renderGroup = props.renderGroup, onGroupExpanded = props.onGroupExpanded, renderNoOptions = props.renderNoOptions, InputPropsProp = props.InputProps, debug = props.debug, disabledItemsHighlightable = props.disabledItemsHighlightable, openProp = props.open, onOpen = props.onOpen, onClose = props.onClose, rest = __rest(props, ["itemToString", "keyToChips", "limitOfFreeChips", "minRowHeight", "suggestionItems", "messageRef", "MenuItem", "inputLabel", "nameError", "maxLength", "InputItem", "emailError", "autoSwitchEmail", "enableFreeChips", "inputPlaceholder", "errorSelectedItems", "enableAutoTransform", "allowPlainHelperText", "TextFieldProps", "selectedItems", "automationId", "screenReader", "onSelectChange", "variant", "groupExpanded", "groupVariant", "getExpandIconProps", "groupBy", "value", "autoHighlight", "fullWidth", "clearBtn", "toggleButton", "multiple", "clearButtonProps", "onClear", "ToggleButtonProps", "inputValue", "onKeyDown", "helperText", "options", "openOnFocus", "getOptionLabel", "renderInput", "label", "inputRef", "error", "placeholder", "freeSolo", "keyToTags", "maxFreeSolo", "SuggestionListProps", "autoSelect", "PopperProps", "initialIsOpen", "disabled", "required", "defaultIsOpen", "disableCloseOnSelect", "onChange", "onInputChange", "onMaxFreeSolo", "FormHelperTextProps", "action", "filterOptions", "renderOption", "renderTags", "getOptionDisabled", "renderGroup", "onGroupExpanded", "renderNoOptions", "InputProps", "debug", "disabledItemsHighlightable", "open", "onOpen", "onClose"]);
+    var _y = __read(useState('bottom'), 2), position = _y[0], setPosition = _y[1];
     var innerInputRef = useRef(null);
     var textFieldRef = useRef(null);
     var inputRef = useForkRef(inputRefProp, innerInputRef);
@@ -63,7 +63,7 @@ var _RcDownshift = memo(forwardRef(function (inProps, ref) {
     var oneOfTagError = false;
     useDownshiftError({ isNew: isNew, MenuItem: MenuItem, InputItem: InputItem });
     var required = requiredProp || (TextFieldProps === null || TextFieldProps === void 0 ? void 0 : TextFieldProps.required);
-    var _y = useDownshift({
+    var _z = useDownshift({
         open: openProp,
         variant: variant,
         onOpen: onOpen,
@@ -74,6 +74,7 @@ var _RcDownshift = memo(forwardRef(function (inProps, ref) {
         value: valueProp,
         inputValue: inputValueProp,
         getOptionDisabled: getOptionDisabled,
+        groupExpanded: groupVariant === 'normal' ? true : groupExpanded,
         getExpandIconProps: getExpandIconProps,
         options: suggestionItems || options,
         freeSolo: freeSolo,
@@ -89,6 +90,7 @@ var _RcDownshift = memo(forwardRef(function (inProps, ref) {
         openOnFocus: openOnFocus,
         autoHighlight: autoHighlight,
         groupBy: groupBy,
+        groupVariant: groupVariant,
         onChange: onChangeProp,
         onInputChange: onInputChangeProp,
         getOptionLabel: getOptionLabel,
@@ -98,9 +100,9 @@ var _RcDownshift = memo(forwardRef(function (inProps, ref) {
         onKeyDown: onKeyDownProp,
         disabledItemsHighlightable: disabledItemsHighlightable,
         onGroupExpanded: onGroupExpanded,
-    }), focusInput = _y.focusInput, optionItems = _y.optionItems, selectedItems = _y.selectedItems, highlightedIndex = _y.highlightedIndex, getToggleButtonProps = _y.getToggleButtonProps, getTagProps = _y.getTagProps, getTagListBoxProps = _y.getTagListBoxProps, getMenuProps = _y.getMenuProps, getPopperProps = _y.getPopperProps, getInputProps = _y.getInputProps, getInputAriaProps = _y.getInputAriaProps, getLabelProps = _y.getLabelProps, getItemProps = _y.getItemProps, isOpen = _y.isOpen, inputValue = _y.inputValue, isTagsFocus = _y.isTagsFocus, activeIndex = _y.activeIndex, setActiveIndex = _y.setActiveIndex, setHighlightedIndex = _y.setHighlightedIndex, onInputChange = _y.onInputChange, keepHighlightedIndex = _y.keepHighlightedIndex, changeHighlightedIndexReason = _y.changeHighlightedIndexReason, closeMenu = _y.closeMenu, openMenu = _y.openMenu, reset = _y.reset, getClearButtonProps = _y.getClearButtonProps, noOptionItem = _y.noOptionItem, getNoOptionsProps = _y.getNoOptionsProps, isKeepHighlightedIndex = _y.isKeepHighlightedIndex;
+    }), focusInput = _z.focusInput, optionItems = _z.optionItems, optionsGroupList = _z.optionsGroupList, selectedItems = _z.selectedItems, highlightedIndex = _z.highlightedIndex, getToggleButtonProps = _z.getToggleButtonProps, getTagProps = _z.getTagProps, getTagListBoxProps = _z.getTagListBoxProps, getMenuProps = _z.getMenuProps, getPopperProps = _z.getPopperProps, getInputProps = _z.getInputProps, getInputAriaProps = _z.getInputAriaProps, getLabelProps = _z.getLabelProps, getItemProps = _z.getItemProps, isOpen = _z.isOpen, inputValue = _z.inputValue, isTagsFocus = _z.isTagsFocus, activeIndex = _z.activeIndex, setActiveIndex = _z.setActiveIndex, setHighlightedIndex = _z.setHighlightedIndex, onInputChange = _z.onInputChange, keepHighlightedIndex = _z.keepHighlightedIndex, changeHighlightedIndexReason = _z.changeHighlightedIndexReason, closeMenu = _z.closeMenu, openMenu = _z.openMenu, reset = _z.reset, getClearButtonProps = _z.getClearButtonProps, noOptionItem = _z.noOptionItem, getNoOptionsProps = _z.getNoOptionsProps, isKeepHighlightedIndex = _z.isKeepHighlightedIndex;
     var open = Boolean((isOpen || noOptionItem) && textFieldRef.current);
-    var _z = getInputProps(), onBlur = _z.onBlur, InputProps = __rest(_z, ["onBlur"]);
+    var _0 = getInputProps(), onBlur = _0.onBlur, InputProps = __rest(_0, ["onBlur"]);
     var helperText = isNew
         ? helperTextProp
         : nameError || allowPlainHelperText
@@ -161,17 +163,18 @@ var _RcDownshift = memo(forwardRef(function (inProps, ref) {
     var endAdornment = (toggleButton || clearBtn) && (React.createElement(EndAdornment, null,
         clearBtn && (React.createElement(ClearIconButton, __assign({}, getClearButtonProps(clearButtonProps)))),
         toggleButton && (React.createElement(ArrowDownButton, __assign({ variant: "plain", "aria-hidden": true, color: error ? 'danger.f02' : 'neutral.f04', size: "large", symbol: isOpen ? ArrowUp : ArrowDown }, getToggleButtonProps(ToggleButtonProps))))));
-    var _0 = (function () {
+    var _1 = (function () {
         var _a = InputPropsProp || {}, classes = _a.classes, restInputPropsProp = __rest(_a, ["classes"]);
         var toClasses = combineClasses(classes, RcDownshiftInputClasses);
         return {
             containerClassName: toClasses.container,
             TextFieldInputProps: combineProps(__assign(__assign(__assign({ classes: omit(toClasses, ['container']), endAdornment: endAdornment, inputComponent: RcDownshiftInput }, getTagListBoxProps()), InputProps), { onBlur: debug ? undefined : onBlur }), restInputPropsProp),
         };
-    })(), containerClassName = _0.containerClassName, TextFieldInputProps = _0.TextFieldInputProps;
+    })(), containerClassName = _1.containerClassName, TextFieldInputProps = _1.TextFieldInputProps;
     useImperativeHandle(action, function () { return ({
         getActiveIndex: function () { return activeIndex; },
         setActiveIndex: setActiveIndex,
+        getFilterResultItems: function () { return optionItems; },
         getHighlightedIndex: function () { return highlightedIndex; },
         setHighlightedIndex: function (index) {
             return setHighlightedIndex(index, { reason: 'auto', reRender: true });
@@ -210,7 +213,7 @@ var _RcDownshift = memo(forwardRef(function (inProps, ref) {
                     }
                 },
             } }, getPopperProps(PopperProps)),
-            isOpen && (React.createElement(RcSuggestionList, __assign({ highlightedIndex: highlightedIndex, options: optionItems, groupBy: groupBy, renderGroup: renderGroup, MenuItem: MenuItem, renderOption: renderOption, inputValue: inputValue, getItemProps: getItemProps, getMenuProps: getMenuProps, changeHighlightedIndexReason: changeHighlightedIndexReason, getOptionDisabled: getOptionDisabled, isKeepHighlightedIndex: isKeepHighlightedIndex, onUpdatePopper: handleUpdatePopper, maxContainerHeight: 180, getOptionLabel: getOptionLabel }, SuggestionListProps))),
+            isOpen && (React.createElement(RcSuggestionList, __assign({ highlightedIndex: highlightedIndex, optionsGroupList: optionsGroupList, options: optionItems, groupVariant: groupVariant, groupExpanded: groupExpanded, renderGroup: renderGroup, MenuItem: MenuItem, renderOption: renderOption, inputValue: inputValue, getItemProps: getItemProps, getMenuProps: getMenuProps, changeHighlightedIndexReason: changeHighlightedIndexReason, getOptionDisabled: getOptionDisabled, isKeepHighlightedIndex: isKeepHighlightedIndex, onUpdatePopper: handleUpdatePopper, maxContainerHeight: 180, getOptionLabel: getOptionLabel }, SuggestionListProps))),
             isRenderNoOptions && (renderNoOptions === null || renderNoOptions === void 0 ? void 0 : renderNoOptions(getNoOptionsProps, noOptionItem)))));
 }));
 var RcDownshift = styled(withDeprecatedCheck(_RcDownshift, [