@ringcentral/juno 2.45.1 → 3.0.0-alpha.0

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

@@ -1,4 +1,4 @@
-import { __read, __spread } from "tslib";
+import { __read, __spreadArray } from "tslib";
 import { Asterisk, Hash, Svg0, Svg1, Svg2, Svg3, Svg4, Svg5, Svg6, Svg7, Svg8, Svg9, } from '@ringcentral/juno-icon';
 export var DIALER_PAD_ICONS = [
     [Svg1, '1', ''],
@@ -15,9 +15,9 @@ export var DIALER_PAD_ICONS = [
     [Hash, '#', ''],
 ];
 export var DIALER_PAD_PLUS = '+';
-export var ACCEPTABLE_KEYS = __spread(DIALER_PAD_ICONS.map(function (_a) {
+export var ACCEPTABLE_KEYS = __spreadArray(__spreadArray([], __read(DIALER_PAD_ICONS.map(function (_a) {
     var _b = __read(_a, 2), value = _b[1];
     return value;
-}), [
+})), false), [
     DIALER_PAD_PLUS,
-]);
+], false);

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

@@ -1,3 +1,4 @@
 export * from './DialPadUtils';
+export * from './types';
 export * from './useDialKeyboard';
 export * from './useKeyAudio';

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

@@ -0,0 +1 @@
+export {};

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

@@ -1,4 +1,4 @@
-import { __read, __spread } from "tslib";
+import { __read, __spreadArray } from "tslib";
 import { useRef } from 'react';
 import { useEventCallback } from '../../../../foundation';
 import { ACCEPTABLE_KEYS } from './DialPadUtils';
@@ -22,7 +22,7 @@ export var useDialKeyboard = function (_a) {
         e.stopPropagation();
         var buffer = keyBufferRef.current;
         if (!buffer.includes(key)) {
-            keyBufferRef.current = __spread(buffer, [key]);
+            keyBufferRef.current = __spreadArray(__spreadArray([], __read(buffer), false), [key], false);
             (_a = control.current) === null || _a === void 0 ? void 0 : _a.handleKeyboardEffect(key, false);
         }
     });

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

@@ -16,8 +16,7 @@ var RcDialogActions = styled(_RcDialogActions).attrs(function (props) {
     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 });
+    return __assign(__assign({}, toProps), { direction: direction, reverse: reverse });
 })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), DialogActionsStyle);
 RcDialogActions.defaultProps = {};
 RcDialogActions.displayName = 'RcDialogActions';

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

@@ -1,4 +1,4 @@
-import { __makeTemplateObject, __read, __spread } from "tslib";
+import { __makeTemplateObject, __read, __spreadArray } from "tslib";
 import { css, spacing } from '../../../../foundation';
 import { RcDialogContentClasses } from '../../DialogContent/utils';
 import { RcDialogActionsSizes } from '../utils';
@@ -8,19 +8,14 @@ export var DialogActionsStyle = function (props) {
     var isVertical = direction === 'vertical';
     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' && 
+    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, __spreadArray([], __read(RcDialogActionsSizes[size]), false)), 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_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_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_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, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

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

@@ -1,8 +1,8 @@
-import { __makeTemplateObject, __read, __spread } from "tslib";
+import { __makeTemplateObject, __read, __spreadArray } from "tslib";
 import { css, palette2, spacing } from '../../../../foundation';
 import { getRcDialogContentSpacings, RcDialogContentClasses } from '../utils';
 export var DialogContentStyle = function (props) {
     var size = props.size, dividers = props.dividers;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: ", ";\n    color: ", ";\n\n    &.", " {\n      border-color: ", ";\n    }\n  "], ["\n    padding: ", ";\n    color: ", ";\n\n    &.", " {\n      border-color: ", ";\n    }\n  "])), spacing.apply(void 0, __spread(getRcDialogContentSpacings(dividers)[size])), palette2('neutral', 'f04'), RcDialogContentClasses.dividers, palette2('neutral', 'l02'));
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: ", ";\n    color: ", ";\n\n    &.", " {\n      border-color: ", ";\n    }\n  "], ["\n    padding: ", ";\n    color: ", ";\n\n    &.", " {\n      border-color: ", ";\n    }\n  "])), spacing.apply(void 0, __spreadArray([], __read(getRcDialogContentSpacings(dividers)[size]), false)), palette2('neutral', 'f04'), RcDialogContentClasses.dividers, palette2('neutral', 'l02'));
 };
 var templateObject_1;

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

@@ -10,7 +10,7 @@ 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: RcDialogTitleTypographyVariant[size], 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).attrs(useDialogDefaultProps)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), DialogTitleStyle);
 RcDialogTitle.defaultProps = {};

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

@@ -1,4 +1,4 @@
-import { __makeTemplateObject, __read, __spread } from "tslib";
+import { __makeTemplateObject, __read, __spreadArray } from "tslib";
 import { css, palette2, spacing } from '../../../../foundation';
 import { RcDialogTitleSpacings } from '../utils';
 export var DialogTitleStyle = function (props) {
@@ -8,6 +8,6 @@ export var DialogTitleStyle = function (props) {
             ? 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);
+    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, __spreadArray([], __read(paddingValue), false)), display);
 };
 var templateObject_1;

package/es6/components/Dialog/styles/DialogStyle.js

@@ -5,10 +5,8 @@ export var DialogStyle = function (props) {
     var size = props.size, theme = props.theme, fullScreen = props.fullScreen;
     return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    .", " {\n      max-width: ", ";\n    }\n\n    ", "\n  "], ["\n    .", " {\n      max-width: ", ";\n    }\n\n    "
         // make sure `fullScreen` can work correctly when `maxWidth` is `xs`
-        ,
-        "\n  "])), RcDialogClasses.paper, RcDialogMaxWidths[size], 
+        , "\n  "])), RcDialogClasses.paper, RcDialogMaxWidths[size], 
     // make sure `fullScreen` can work correctly when `maxWidth` is `xs`
-    !fullScreen && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        .", " {\n          max-width: ", ";\n\n          &.", " {\n            ", " {\n              max-width: calc(100% - 64px);\n            }\n          }\n        }\n      "], ["\n        .", " {\n          max-width: ", ";\n\n          &.", " {\n            ",
-        " {\n              max-width: calc(100% - 64px);\n            }\n          }\n        }\n      "])), RcDialogClasses.paperWidthXs, px(Math.max(theme.breakpoints.values.xs, 400)), RcDialogClasses.paperScrollBody, theme.breakpoints.down(Math.max(theme.breakpoints.values.xs, 400) + 32 * 2)));
+    !fullScreen && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        .", " {\n          max-width: ", ";\n\n          &.", " {\n            ", " {\n              max-width: calc(100% - 64px);\n            }\n          }\n        }\n      "], ["\n        .", " {\n          max-width: ", ";\n\n          &.", " {\n            ", " {\n              max-width: calc(100% - 64px);\n            }\n          }\n        }\n      "])), RcDialogClasses.paperWidthXs, px(Math.max(theme.breakpoints.values.xs, 400)), RcDialogClasses.paperScrollBody, theme.breakpoints.down(Math.max(theme.breakpoints.values.xs, 400) + 32 * 2)));
 };
 var templateObject_1, templateObject_2;

package/es6/components/Divider/styles/StyledDivider.js

@@ -3,8 +3,7 @@ import { css, getParsePaletteColor, palette2, spacing, typography, } from '../..
 var full = '100%';
 export var DividerStyle = function (_a) {
     var vertical = _a.vertical, size = _a.size, color = _a.color, title = _a.title, titleBgColor = _a.titleBgColor;
-    var volume = (size === 'bold' ? 2 : 1) + "px";
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    position: relative;\n    margin: 0;\n    border: 0;\n    flex-shrink: 0;\n    overflow: initial;\n\n    width: ", ";\n    height: ", ";\n    background-color: ", ";\n\n    ", ";\n  "], ["\n    position: relative;\n    margin: 0;\n    border: 0;\n    flex-shrink: 0;\n    overflow: initial;\n\n    width: ", ";\n    height: ", ";\n    background-color: ", ";\n\n    ",
-        ";\n  "])), vertical ? volume : full, vertical ? full : volume, getParsePaletteColor(color, null, false), !(vertical || !title) && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      &::after {\n        content: '", "';\n        ", ";\n        color: ", ";\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        padding: ", ";\n        transform: translate(-50%, -50%);\n        background-color: ", ";\n      }\n    "], ["\n      &::after {\n        content: '", "';\n        ", ";\n        color: ", ";\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        padding: ", ";\n        transform: translate(-50%, -50%);\n        background-color: ", ";\n      }\n    "])), title, typography('caption1'), palette2('neutral', 'f06'), spacing(0, 4), getParsePaletteColor(titleBgColor)));
+    var volume = "".concat(size === 'bold' ? 2 : 1, "px");
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    position: relative;\n    margin: 0;\n    border: 0;\n    flex-shrink: 0;\n    overflow: initial;\n\n    width: ", ";\n    height: ", ";\n    background-color: ", ";\n\n    ", ";\n  "], ["\n    position: relative;\n    margin: 0;\n    border: 0;\n    flex-shrink: 0;\n    overflow: initial;\n\n    width: ", ";\n    height: ", ";\n    background-color: ", ";\n\n    ", ";\n  "])), vertical ? volume : full, vertical ? full : volume, getParsePaletteColor(color, null, false), !(vertical || !title) && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      &::after {\n        content: '", "';\n        ", ";\n        color: ", ";\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        padding: ", ";\n        transform: translate(-50%, -50%);\n        background-color: ", ";\n      }\n    "], ["\n      &::after {\n        content: '", "';\n        ", ";\n        color: ", ";\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        padding: ", ";\n        transform: translate(-50%, -50%);\n        background-color: ", ";\n      }\n    "])), title, typography('caption1'), palette2('neutral', 'f06'), spacing(0, 4), getParsePaletteColor(titleBgColor)));
 };
 var templateObject_1, templateObject_2;

package/es6/components/DnD/Draggable/Draggable.js

@@ -1,4 +1,4 @@
-import { __assign, __makeTemplateObject, __read, __rest, __spread } from "tslib";
+import { __assign, __makeTemplateObject, __read, __rest, __spreadArray } from "tslib";
 import React, { forwardRef } from 'react';
 import clsx from 'clsx';
 import { Draggable as RBDDraggable, } from 'react-beautiful-dnd';
@@ -17,7 +17,7 @@ var _RcDraggable = forwardRef(function (inProps, ref) {
         provided.draggableProps.style = directionOnlyStyle;
         provided.draggableProps['className'] = clsx(RcDraggableClasses.root, classes === null || classes === void 0 ? void 0 : classes.root, snapshot.isDragging &&
             clsx(RcDraggableClasses.isDragging, classes === null || classes === void 0 ? void 0 : classes.isDragging));
-        return children.apply(void 0, __spread([provided, snapshot], args));
+        return children.apply(void 0, __spreadArray([provided, snapshot], __read(args), false));
     }));
 });
 var RcDraggable = styled(_RcDraggable)(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));

package/es6/components/DnD/Draggable/utils/DraggableUtils.js

@@ -12,7 +12,7 @@ export var getDirectionOnlyItemStyle = function (direction, style) {
         style.transform.match(/translate\((-?\d+)px,\s+(-?\d+)px\)/);
     if (currentTransformMatch) {
         var transform = parseInt(currentTransformMatch[isVertical ? 2 : 1], 10);
-        overrideStyles['transform'] = "translate(" + (isVertical ? 0 : transform) + "px, " + (isVertical ? transform : 0) + "px)";
+        overrideStyles['transform'] = "translate(".concat(isVertical ? 0 : transform, "px, ").concat(isVertical ? transform : 0, "px)");
     }
     return __assign(__assign({}, style), overrideStyles);
 };

package/es6/components/DnD/Droppable/Droppable.js

@@ -1,4 +1,4 @@
-import { __assign, __makeTemplateObject, __read, __rest, __spread } from "tslib";
+import { __assign, __makeTemplateObject, __read, __rest, __spreadArray } from "tslib";
 import React, { forwardRef } from 'react';
 import { Droppable as RBDDroppable, } from 'react-beautiful-dnd';
 import { styled, useThemeProps } from '../../../foundation';
@@ -10,7 +10,7 @@ var _RcDroppable = forwardRef(function (inProps, ref) {
         for (var _i = 0; _i < arguments.length; _i++) {
             args[_i] = arguments[_i];
         }
-        return children.apply(void 0, __spread(args));
+        return children.apply(void 0, __spreadArray([], __read(args), false));
     }));
 });
 var RcDroppable = styled(_RcDroppable)(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));

package/es6/components/Downshift/Downshift.js

@@ -196,13 +196,13 @@ var _RcDownshift = memo(forwardRef(function (inProps, ref) {
         : nameError || allowPlainHelperText
             ? helperTextProp
             : undefined;
-    var describedbyId = InputProps.id + "-helper-text";
+    var describedbyId = "".concat(InputProps.id, "-helper-text");
     var FormHelperTextProps = FormHelperTextPropsProp || {};
     var screenReaderText = useMemo(function () {
         if (!screenReader || !selectedItems.length)
             return;
         var entry = screenReader.entry, entries = screenReader.entries;
-        return ("" + (selectedItems.length === 1 ? entry : entries)).trim();
+        return "".concat(selectedItems.length === 1 ? entry : entries).trim();
     }, [screenReader, selectedItems.length]);
     if (screenReaderText) {
         if (!helperText) {
@@ -210,7 +210,7 @@ var _RcDownshift = memo(forwardRef(function (inProps, ref) {
         }
         else if (helperText) {
             FormHelperTextProps['aria-label'] =
-                (screenReaderText + " " + helperText).trim();
+                "".concat(screenReaderText, " ").concat(helperText).trim();
         }
     }
     var toTextFieldRef = useForkRef(textFieldRef, ref);
@@ -240,7 +240,8 @@ var _RcDownshift = memo(forwardRef(function (inProps, ref) {
                 if (InputItem) {
                     // TODO: should remove when all migrate
                     var isError = (emailError && emailError === ((_a = selectedItem.label) === null || _a === void 0 ? void 0 : _a.trim())) ||
-                        (selectedItem.id && (errorSelectedItems === null || errorSelectedItems === void 0 ? void 0 : errorSelectedItems.includes(selectedItem.id))) ||
+                        (selectedItem.id &&
+                            (errorSelectedItems === null || errorSelectedItems === void 0 ? void 0 : errorSelectedItems.includes(selectedItem.id))) ||
                         selectedItem.isError ||
                         selectedItem.error;
                     return (React.createElement(InputItem, __assign({}, selectedItem, itemChipProps, { isError: isError })));
@@ -291,16 +292,15 @@ var _RcDownshift = memo(forwardRef(function (inProps, ref) {
     // * that root element for animation host
     React.createElement(React.Fragment, null,
         isOpen && (React.createElement(RcSuggestionList, __assign({ selectedIndex: isAutocomplete ? autoCompleteSelectedIndex : undefined, 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, position: "unset", virtualize: virtualize }, SuggestionListProps))),
-        isRenderNoOptions && (renderNoOptions === null || renderNoOptions === void 0 ? void 0 : renderNoOptions(getNoOptionsProps, noOptionItem))));
+        isRenderNoOptions &&
+            (renderNoOptions === null || renderNoOptions === void 0 ? void 0 : renderNoOptions(getNoOptionsProps, noOptionItem))));
     var prevMenuChildren = usePrevious(function () { return menuChildren; });
     return (React.createElement(React.Fragment, null,
         React.createElement(StyledTextField, __assign({ renderInput: renderInput, hasTags: hasTags, ref: toTextFieldRef, inputRef: inputRef, "data-test-automation-id": automationId, fullWidth: fullWidth, placeholder: !hasTags ? placeholder : undefined, label: label, focused: isDownshiftFocused, disabled: disabled, required: required, color: color, 
             // * if below one of tag is error, that main downshift default will be error
             error: error !== null && error !== void 0 ? error : oneOfTagError, FormHelperTextProps: FormHelperTextProps, InputProps: TextFieldInputProps, helperText: helperText }, combineProps({
             InputLabelProps: getLabelProps(),
-            inputProps: __assign({ startAdornment: startAdornment,
-                containerClassName: containerClassName,
-                maxLength: maxLength, containerRef: inputContainerRef }, getInputAriaProps(TextFieldProps === null || TextFieldProps === void 0 ? void 0 : TextFieldProps.inputProps)),
+            inputProps: __assign({ startAdornment: startAdornment, containerClassName: containerClassName, maxLength: maxLength, containerRef: inputContainerRef }, getInputAriaProps(TextFieldProps === null || TextFieldProps === void 0 ? void 0 : TextFieldProps.inputProps)),
         }, rest), { value: inputValue, clearBtn: false })),
         !helperText && screenReaderText && (React.createElement(RcVisuallyHidden, { id: describedbyId }, screenReaderText)),
         React.createElement(StyledPopper, __assign({ ref: popperElementRef, open: open, position: position, component: PopperComponent, placement: "bottom-start", anchorEl: anchorElRef.current, "data-test-automation-id": "suggestions-list", popperRef: popperRef, 

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

@@ -34,7 +34,7 @@ var SuggestionList = forwardRef(function (inProps, ref) {
         onContainerHeightChange: function (changeHeight) {
             var scroller = scrollerRef.current;
             if (scroller === null || scroller === void 0 ? void 0 : scroller.style) {
-                scroller.style.height = changeHeight + "px";
+                scroller.style.height = "".concat(changeHeight, "px");
                 onUpdatePopper === null || onUpdatePopper === void 0 ? void 0 : onUpdatePopper();
             }
         },
@@ -48,7 +48,7 @@ var SuggestionList = forwardRef(function (inProps, ref) {
                 case 0:
                     toIndex = location.index;
                     if (!virtualize) {
-                        toElm_1 = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("[data-item-index=\"" + toIndex + "\"]");
+                        toElm_1 = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("[data-item-index=\"".concat(toIndex, "\"]"));
                         toElm_1 === null || toElm_1 === void 0 ? void 0 : toElm_1.scrollIntoView({ block: 'nearest', inline: 'nearest' });
                         return [2 /*return*/, true];
                     }
@@ -61,7 +61,7 @@ var SuggestionList = forwardRef(function (inProps, ref) {
                     return [4 /*yield*/, sleep(0)];
                 case 1:
                     _d.sent();
-                    toElm = (_c = listRef.current) === null || _c === void 0 ? void 0 : _c.querySelector("[data-item-index=\"" + toIndex + "\"]");
+                    toElm = (_c = listRef.current) === null || _c === void 0 ? void 0 : _c.querySelector("[data-item-index=\"".concat(toIndex, "\"]"));
                     if (toElm) {
                         return [2 /*return*/, true];
                     }
@@ -117,7 +117,8 @@ var SuggestionList = forwardRef(function (inProps, ref) {
                 className: clsx(classes.toggle, (_a = {},
                     _a[classes.expanded] = (_d = option.group) === null || _d === void 0 ? void 0 : _d.expanded,
                     _a)),
-            }) : undefined;
+            })
+            : undefined;
         var itemProps = getItemProps({
             item: option,
             index: index,

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

@@ -114,7 +114,7 @@ export var useSuggestionList = function (_a) {
         var isGroupTitle = item === (currGroup === null || currGroup === void 0 ? void 0 : currGroup.options[0]);
         var itemCount = optionItems.length;
         var groupOrder = (currGroup === null || currGroup === void 0 ? void 0 : currGroup.order) || 0;
-        return combineProps(__assign({ id: currUniqueId + "-option-" + index, onClick: function (e) {
+        return combineProps(__assign({ id: "".concat(currUniqueId, "-option-").concat(index), onClick: function (e) {
                 selectItem(e, item);
             }, onMouseOver: function () {
                 if (highlightedIndexRef.current !== index &&
@@ -141,7 +141,7 @@ export var useSuggestionList = function (_a) {
     };
     var getInputProps = function (props) {
         return combineProps({
-            id: currUniqueId + "-input",
+            id: "".concat(currUniqueId, "-input"),
             autoComplete: 'off',
             onChange: function (e) {
                 var changeValue = e.target.value;
@@ -189,28 +189,28 @@ export var useSuggestionList = function (_a) {
             'aria-autocomplete': 'list',
             'aria-expanded': true,
             'aria-haspopup': true,
-            'aria-owns': currUniqueId + "-menu",
+            'aria-owns': "".concat(currUniqueId, "-menu"),
             'aria-activedescendant': highlightedIndexRef.current > -1
-                ? currUniqueId + "-option-" + highlightedIndexRef.current
+                ? "".concat(currUniqueId, "-option-").concat(highlightedIndexRef.current)
                 : undefined,
         }, props);
     };
     var getLabelProps = function (props) {
         return combineProps({
-            htmlFor: currUniqueId + "-input",
-            id: currUniqueId + "-label",
+            htmlFor: "".concat(currUniqueId, "-input"),
+            id: "".concat(currUniqueId, "-label"),
         }, props);
     };
     var getMenuProps = function (restMenuProps) {
         return combineProps({
-            'aria-labelledby': currUniqueId + "-label",
-            id: currUniqueId + "-menu",
+            'aria-labelledby': "".concat(currUniqueId, "-label"),
+            id: "".concat(currUniqueId, "-menu"),
             role: 'listbox',
         }, restMenuProps);
     };
     var getClearButtonProps = function (props) {
         return combineProps({
-            id: currUniqueId + "-clear-button",
+            id: "".concat(currUniqueId, "-clear-button"),
             onClick: function (e) {
                 onClear === null || onClear === void 0 ? void 0 : onClear(e);
                 reset(true);

package/es6/components/Downshift/styles/StyledPopper.js

@@ -7,8 +7,7 @@ var _StyledPopper = forwardRef(function (_a, ref) {
     var position = _a.position, _b = _a.component, Component = _b === void 0 ? RcPopper : _b, rest = __rest(_a, ["position", "component"]);
     return React.createElement(Component, __assign({ ref: ref }, rest));
 });
-export var StyledPopper = styled(_StyledPopper)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  > div {\n    box-shadow: ", ";\n    background-color: ", ";\n    overflow: hidden;\n\n    ", "\n  }\n"], ["\n  > div {\n    box-shadow: ", ";\n    background-color: ", ";\n    overflow: hidden;\n\n    ",
-    "\n  }\n"])), shadows('1'), palette2('neutral', 'elevation'), function (_a) {
+export var StyledPopper = styled(_StyledPopper)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  > div {\n    box-shadow: ", ";\n    background-color: ", ";\n    overflow: hidden;\n\n    ", "\n  }\n"], ["\n  > div {\n    box-shadow: ", ";\n    background-color: ", ";\n    overflow: hidden;\n\n    ", "\n  }\n"])), shadows('1'), palette2('neutral', 'elevation'), function (_a) {
     var position = _a.position;
     return position === 'top-start'
         ? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            border-top-right-radius: ", ";\n            border-top-left-radius: ", ";\n          "], ["\n            border-top-right-radius: ", ";\n            border-top-left-radius: ", ";\n          "])), radiusLg, radiusLg) : css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            border-bottom-right-radius: ", ";\n            border-bottom-left-radius: ", ";\n          "], ["\n            border-bottom-right-radius: ", ";\n            border-bottom-left-radius: ", ";\n          "])), radiusLg, radiusLg);

package/es6/components/Downshift/utils/DownshiftUtils.js

@@ -22,7 +22,8 @@ export var RcDownshiftDefaultRenderNoOptions = function (getNoOptionsProps) {
 export var RcDownshiftDefaultFilterOptions = function (options, _a) {
     var inputValue = _a.inputValue, getOptionLabel = _a.getOptionLabel, selectedItems = _a.selectedItems;
     return options.filter(function (item) {
-        return selectedItems.indexOf(item) < 0 && (getOptionLabel === null || getOptionLabel === void 0 ? void 0 : getOptionLabel(item).toLowerCase().startsWith((inputValue === null || inputValue === void 0 ? void 0 : inputValue.toLowerCase()) || ''));
+        return selectedItems.indexOf(item) < 0 &&
+            (getOptionLabel === null || getOptionLabel === void 0 ? void 0 : getOptionLabel(item).toLowerCase().startsWith((inputValue === null || inputValue === void 0 ? void 0 : inputValue.toLowerCase()) || ''));
     });
 };
 /**
@@ -36,7 +37,9 @@ export var RcAutocompleteDefaultFilterOptions = function (options, _a) {
     if (!inputChanged) {
         return options;
     }
-    return options.filter(function (item) { return getOptionLabel === null || getOptionLabel === void 0 ? void 0 : getOptionLabel(item).toLowerCase().startsWith((inputValue === null || inputValue === void 0 ? void 0 : inputValue.toLowerCase()) || ''); });
+    return options.filter(function (item) {
+        return getOptionLabel === null || getOptionLabel === void 0 ? void 0 : getOptionLabel(item).toLowerCase().startsWith((inputValue === null || inputValue === void 0 ? void 0 : inputValue.toLowerCase()) || '');
+    });
 };
 export var downshiftComponentName = 'RcDownshift';
 export function stringArrToRegExp(keyToTags) {

package/es6/components/Downshift/utils/SelectItem.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,4 +1,6 @@
 export * from './DownshiftUtils';
+export * from './SelectItem';
+export * from './useDownshift.interface';
 export * from './useDownshift';
 export * from './useDownshiftError';
 export * from './useDownshiftGroup';

package/es6/components/Downshift/utils/useDownshift.interface.js

@@ -0,0 +1 @@
+export {};

package/es6/components/Downshift/utils/useDownshift.js

@@ -1,4 +1,4 @@
-import { __assign, __awaiter, __generator, __read, __rest, __spread } from "tslib";
+import { __assign, __awaiter, __generator, __read, __rest, __spreadArray } from "tslib";
 import { useCallback, useLayoutEffect, useMemo, useRef, } from 'react';
 import { combineProps, getSelectionPosition, useChange, useControlled, useId, useSleep, } from '../../../foundation';
 import { useSuggestionList } from '../SuggestionList/utils/useSuggestionList';
@@ -77,9 +77,9 @@ export var useDownshift = function (_a) {
             if (item && freeSolo) {
                 switch (addNoOptionItem) {
                     case 'first':
-                        return __spread([item], results);
+                        return __spreadArray([item], __read(results), false);
                     case 'last':
-                        return __spread(results, [item]);
+                        return __spreadArray(__spreadArray([], __read(results), false), [item], false);
                     default:
                         break;
                 }
@@ -91,7 +91,7 @@ export var useDownshift = function (_a) {
             // * only when not set render no options will auto add item
             if (item && freeSolo && !renderNoOptions) {
                 // * when outside not use filter, that will be original array, must use spread
-                return __spread(results, [item]);
+                return __spreadArray(__spreadArray([], __read(results), false), [item], false);
             }
         }
         return results;
@@ -471,12 +471,12 @@ export var useDownshift = function (_a) {
     };
     var getInputAriaProps = function (props) {
         var suggestionListInputAriaProps = getSuggestionListInputAriaProps(props);
-        return combineProps(__assign(__assign({}, suggestionListInputAriaProps), { readOnly: readOnly, unselectable: readOnly ? 'on' : undefined, 'aria-owns': isOpen ? downshiftId + "-menu" : undefined, 'aria-expanded': !!isOpen }), props);
+        return combineProps(__assign(__assign({}, suggestionListInputAriaProps), { readOnly: readOnly, unselectable: readOnly ? 'on' : undefined, 'aria-owns': isOpen ? "".concat(downshiftId, "-menu") : undefined, 'aria-expanded': !!isOpen }), props);
     };
     var getPopperProps = function (restPopperProps) {
         var _a;
         return combineProps({
-            id: downshiftId + "-popper",
+            id: "".concat(downshiftId, "-popper"),
             style: { width: (_a = wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth },
             role: 'presentation',
             onMouseDown: function (e) {
@@ -488,7 +488,7 @@ export var useDownshift = function (_a) {
     var getToggleButtonProps = function (props) {
         return combineProps({
             disabled: (!isOpen && optionItems.length === 0) || disabled || readOnly,
-            id: downshiftId + "-toggle-button",
+            id: "".concat(downshiftId, "-toggle-button"),
             onMouseDown: function (e) {
                 e.preventDefault();
                 e.stopPropagation();

package/es6/components/Downshift/utils/useDownshiftGroup.js

@@ -1,4 +1,4 @@
-import { __assign, __read, __spread } from "tslib";
+import { __assign, __read, __spreadArray } from "tslib";
 import { useMemo } from 'react';
 import { combineProps, logInDev, omit, useDepsChange, useEventCallback, useRefState, } from '../../../foundation';
 export var useDownshiftGroup = function (_a) {
@@ -75,7 +75,7 @@ export var useDownshiftGroup = function (_a) {
                     newGroup_1.options[0].group = newGroup_1;
                     if (isTitleGroup) {
                         var groupTitleOption_1 = {
-                            id: id + "-" + group,
+                            id: "".concat(id, "-").concat(group),
                             label: group,
                             disabled: true,
                             // * here cause by self Type reference
@@ -136,10 +136,10 @@ export var useDownshiftGroup = function (_a) {
             if (group)
                 group.expanded = expended;
             return prev;
-        }, __spread(optionsGroupList));
+        }, __spreadArray([], __read(optionsGroupList), false));
         return addExpandedResult.reduce(function (prev, curr) {
             if (curr.expanded) {
-                prev.push.apply(prev, __spread(curr.options));
+                prev.push.apply(prev, __spreadArray([], __read(curr.options), false));
             }
             else {
                 prev.push(curr.options[0]);

package/es6/components/Downshift/utils/useDownshiftTag.js

@@ -1,4 +1,4 @@
-import { __assign, __read, __rest, __spread } from "tslib";
+import { __assign, __read, __rest, __spreadArray } from "tslib";
 import { useMemo, useRef, useState } from 'react';
 import uniqueId from 'lodash/uniqueId';
 import { combineProps, useControlled, useEventCallback, useKeyboardMoveFocus, useRefState, } from '../../../foundation';
@@ -34,7 +34,7 @@ export var useDownshiftTag = function (_a) {
             inputElm === null || inputElm === void 0 ? void 0 : inputElm.focus();
         }
         else {
-            (_a = textFieldElm === null || textFieldElm === void 0 ? void 0 : textFieldElm.querySelector("[data-tag-index=\"" + tagToFocus + "\"]")) === null || _a === void 0 ? void 0 : _a.focus();
+            (_a = textFieldElm === null || textFieldElm === void 0 ? void 0 : textFieldElm.querySelector("[data-tag-index=\"".concat(tagToFocus, "\"]"))) === null || _a === void 0 ? void 0 : _a.focus();
         }
     };
     var focusTag = useEventCallback(function (tagToFocus, focus) {
@@ -47,10 +47,10 @@ export var useDownshiftTag = function (_a) {
     });
     /** when return `true` mean add item success */
     var checkAndAddFreeSolo = function (_a, e) {
-        var _b = _a === void 0 ? {} : _a, selectedItem = _b.selectedItem, value = _b.value;
-        var _c;
+        var _b;
+        var _c = _a === void 0 ? {} : _a, selectedItem = _c.selectedItem, value = _c.value;
         var isAddItem = false;
-        var currentValue = value !== null && value !== void 0 ? value : (_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.value;
+        var currentValue = value !== null && value !== void 0 ? value : (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.value;
         if (!(getStopCreateFreeSolo === null || getStopCreateFreeSolo === void 0 ? void 0 : getStopCreateFreeSolo()) &&
             !selectedItem &&
             freeSolo &&
@@ -67,14 +67,14 @@ export var useDownshiftTag = function (_a) {
                     onMaxFreeSolo === null || onMaxFreeSolo === void 0 ? void 0 : onMaxFreeSolo(maxFreeSolo);
                 }
                 if (items.length > 0) {
-                    setTags(__spread(tags, items.map(function (label) {
+                    setTags(__spreadArray(__spreadArray([], __read(tags), false), __read(items.map(function (label) {
                         return ({
                             id: uniqueId(DOWNSHIFT_ID_TOKEN),
                             isSuggestion: false,
                             freeSolo: true,
                             label: label,
                         });
-                    })));
+                    })), false));
                     isAddItem = true;
                 }
             }
@@ -88,7 +88,7 @@ export var useDownshiftTag = function (_a) {
     var removeTag = function (selectedItem) {
         var selectedItemIndex = tags.indexOf(selectedItem);
         if (selectedItemIndex > -1) {
-            setTags(__spread(tags.slice(0, selectedItemIndex), tags.slice(selectedItemIndex + 1)));
+            setTags(__spreadArray(__spreadArray([], __read(tags.slice(0, selectedItemIndex)), false), __read(tags.slice(selectedItemIndex + 1)), false));
         }
     };
     var addTag = function (selectedItem) {
@@ -103,7 +103,7 @@ export var useDownshiftTag = function (_a) {
             }
         }
         if (multiple) {
-            setTags(__spread(tags, [selectedItem]));
+            setTags(__spreadArray(__spreadArray([], __read(tags), false), [selectedItem], false));
         }
         else {
             setTags([selectedItem]);
@@ -138,7 +138,7 @@ export var useDownshiftTag = function (_a) {
             // TODO: wait for input can complete that.
             // role: 'option',
             role: 'button',
-            key: downshiftId + "-selected-item-" + index,
+            key: "".concat(downshiftId, "-selected-item-").concat(index),
             'data-tag-index': index,
             'data-item-last': index === tags.length - 1,
             onClick: function (e) {

package/es6/components/Drawer/styles/DrawerStyle.js

@@ -14,7 +14,6 @@ export var DrawerStyle = function (props) {
             .map(function (x) { return (x === 1 ? radiusValue : 0); })
             .join(' ');
     })();
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    .", " {\n      border-radius: ", ";\n\n      ", "\n    }\n  "], ["\n    .", " {\n      border-radius: ", ";\n\n      ",
-        "\n    }\n  "])), RcDrawerClasses.paper, currRadiusValue, inlinePaper && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        background: transparent;\n        box-shadow: none;\n        align-items: center;\n        justify-content: center;\n        overflow: unset;\n\n        ", " {\n          border-radius: ", ";\n        }\n      "], ["\n        background: transparent;\n        box-shadow: none;\n        align-items: center;\n        justify-content: center;\n        overflow: unset;\n\n        ", " {\n          border-radius: ", ";\n        }\n      "])), RcPaper, currRadiusValue));
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    .", " {\n      border-radius: ", ";\n\n      ", "\n    }\n  "], ["\n    .", " {\n      border-radius: ", ";\n\n      ", "\n    }\n  "])), RcDrawerClasses.paper, currRadiusValue, inlinePaper && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        background: transparent;\n        box-shadow: none;\n        align-items: center;\n        justify-content: center;\n        overflow: unset;\n\n        ", " {\n          border-radius: ", ";\n        }\n      "], ["\n        background: transparent;\n        box-shadow: none;\n        align-items: center;\n        justify-content: center;\n        overflow: unset;\n\n        ", " {\n          border-radius: ", ";\n        }\n      "])), RcPaper, currRadiusValue));
 };
 var templateObject_1, templateObject_2;

package/es6/components/Forms/BaseForm.js

@@ -0,0 +1 @@
+export {};

package/es6/components/Forms/Form/Form/Form.js

@@ -1,4 +1,4 @@
-import { __assign, __read, __rest, __spread } from "tslib";
+import { __assign, __read, __rest, __spreadArray } from "tslib";
 import React, { useCallback, useState } from 'react';
 import { useThemeProps } from '../../../../foundation';
 import { RcFormContext } from './FormContext';
@@ -11,7 +11,7 @@ var RcForm = function (inProps) {
         if (isSubmitting)
             return;
         onBeforeSubmit && onBeforeSubmit();
-        var validateMessages = __spread(fieldManager.values()).map(function (fieldInfo) { return fieldInfo.validate(); })
+        var validateMessages = __spreadArray([], __read(fieldManager.values()), false).map(function (fieldInfo) { return fieldInfo.validate(); })
             .filter(function (msg) { return msg !== false; });
         if (validateMessages.length > 0) {
             onValidateFailed && onValidateFailed();

package/es6/components/Forms/Form/Form/index.js

@@ -1,2 +1,3 @@
 export * from './Form';
 export * from './FormContext';
+export * from './types';

package/es6/components/Forms/Form/Form/types.js

@@ -0,0 +1 @@
+export {};