@ringcentral/juno 2.5.0 → 2.8.0

package/components/InlineEditable/InlineEditable.d.ts

@@ -199,7 +199,7 @@ declare const RcInlineEditable: import("styled-components").StyledComponentClass
      * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
      */
     inputProps?: import("@material-ui/core").InputBaseComponentProps | undefined;
-} & Pick<React.DOMAttributes<HTMLDivElement>, "onFocus" | "onBlur" | "onKeyDown" | "onMouseDown"> & RcClassesProps<"label" | "placeholder" | "textField" | "saving"> & React.RefAttributes<any>, "ref" | "key" | "className" | "color" | "style" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "onMouseDown" | "title" | "classes" | "placeholder" | "value" | "variant" | "disabled" | "fullWidth" | "TooltipProps" | "inputProps" | "multiline" | "maxLength" | "tooltipTitle" | "automationId" | "saving" | "shouldRemoveNode" | "onSave"> & {
+} & Pick<React.DOMAttributes<HTMLDivElement>, "onFocus" | "onBlur" | "onKeyDown" | "onMouseDown"> & RcClassesProps<"label" | "placeholder" | "textField" | "saving"> & React.RefAttributes<any>, "ref" | "key" | "className" | "color" | "style" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "onMouseDown" | "title" | "classes" | "placeholder" | "value" | "variant" | "disabled" | "fullWidth" | "TooltipProps" | "inputProps" | "tooltipTitle" | "multiline" | "maxLength" | "automationId" | "saving" | "shouldRemoveNode" | "onSave"> & {
     theme?: import("../../foundation").RcTheme | undefined;
 }>;
 export { RcInlineEditable };

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

@@ -15,7 +15,7 @@ var _RcIconButton = memo(forwardRef(function (inProps, ref) {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         useDeprecatedCheck(RcIconButton, props, rcIconButtonWarning);
     }
-    var _b = props.buttonRef, buttonRef = _b === void 0 ? ref : _b, className = props.className, classesProp = props.classes, children = props.children, title = props.title, disabledFakeBorder = props.disabledFakeBorder, symbol = props.symbol, disabled = props.disabled, invisible = props.invisible, type = props.type, loading = props.loading, TouchRippleProps = props.TouchRippleProps, variant = props.variant, CircularProgressProps = props.CircularProgressProps, color = props.color, shouldPersistBg = props.shouldPersistBg, stretchIcon = props.stretchIcon, iconColor = props.iconColor, iconSize = props.iconSize, disableTouchRipple = props.disableTouchRipple, useColorWhenDisabled = props.useColorWhenDisabled, size = props.size, radius = props.radius, elevation = props.elevation, activeElevation = props.activeElevation, aRef = props.aRef, tooltipTitle = props.tooltipTitle, tooltipForceHide = props.tooltipForceHide, disableToolTip = props.disableToolTip, alwaysEnableTooltip = props.alwaysEnableTooltip, tooltipPlacement = props.tooltipPlacement, ariaLabel = props.ariaLabel, popperProps = props.popperProps, externalLink = props.externalLink, download = props.download, autoFocus = props.autoFocus, href = props.href, rest = __rest(props, ["buttonRef", "className", "classes", "children", "title", "disabledFakeBorder", "symbol", "disabled", "invisible", "type", "loading", "TouchRippleProps", "variant", "CircularProgressProps", "color", "shouldPersistBg", "stretchIcon", "iconColor", "iconSize", "disableTouchRipple", "useColorWhenDisabled", "size", "radius", "elevation", "activeElevation", "aRef", "tooltipTitle", "tooltipForceHide", "disableToolTip", "alwaysEnableTooltip", "tooltipPlacement", "ariaLabel", "popperProps", "externalLink", "download", "autoFocus", "href"]);
+    var _b = props.buttonRef, buttonRef = _b === void 0 ? ref : _b, IconProps = props.IconProps, className = props.className, classesProp = props.classes, children = props.children, title = props.title, disabledFakeBorder = props.disabledFakeBorder, symbol = props.symbol, disabled = props.disabled, invisible = props.invisible, type = props.type, loading = props.loading, TouchRippleProps = props.TouchRippleProps, variant = props.variant, CircularProgressProps = props.CircularProgressProps, color = props.color, shouldPersistBg = props.shouldPersistBg, stretchIcon = props.stretchIcon, iconColor = props.iconColor, iconSize = props.iconSize, disableTouchRipple = props.disableTouchRipple, useColorWhenDisabled = props.useColorWhenDisabled, size = props.size, radius = props.radius, elevation = props.elevation, activeElevation = props.activeElevation, aRef = props.aRef, tooltipTitle = props.tooltipTitle, tooltipForceHide = props.tooltipForceHide, disableToolTip = props.disableToolTip, alwaysEnableTooltip = props.alwaysEnableTooltip, tooltipPlacement = props.tooltipPlacement, ariaLabel = props.ariaLabel, popperProps = props.popperProps, externalLink = props.externalLink, download = props.download, autoFocus = props.autoFocus, href = props.href, rest = __rest(props, ["buttonRef", "IconProps", "className", "classes", "children", "title", "disabledFakeBorder", "symbol", "disabled", "invisible", "type", "loading", "TouchRippleProps", "variant", "CircularProgressProps", "color", "shouldPersistBg", "stretchIcon", "iconColor", "iconSize", "disableTouchRipple", "useColorWhenDisabled", "size", "radius", "elevation", "activeElevation", "aRef", "tooltipTitle", "tooltipForceHide", "disableToolTip", "alwaysEnableTooltip", "tooltipPlacement", "ariaLabel", "popperProps", "externalLink", "download", "autoFocus", "href"]);
     var theme = useTheme();
     var isOutline = variant === 'outline';
     var isContained = variant === 'contained';
@@ -31,7 +31,7 @@ var _RcIconButton = memo(forwardRef(function (inProps, ref) {
         _a));
     var iconButton = (function () {
         var _a, _b;
-        var icon = React.isValidElement(children) || children === '' ? children : (React.createElement(RcIcon, { symbol: symbol, className: classes.icon, loading: loading, CircularProgressProps: CircularProgressProps }, children));
+        var icon = React.isValidElement(children) || children === '' ? children : (React.createElement(RcIcon, __assign({ symbol: symbol, className: classes.icon, loading: loading, CircularProgressProps: CircularProgressProps }, IconProps), children));
         var iconButton = (React.createElement(RcButtonBase, __assign({ ref: buttonRef, disableRipple: ((_b = (_a = theme.props) === null || _a === void 0 ? void 0 : _a.MuiButtonBase) === null || _b === void 0 ? void 0 : _b.disableRipple) || isPlain, type: type, disabled: disabled, "aria-label": ariaLabel || tooltipTitle || title, title: title, "aria-disabled": disabled, className: IconClassName, TouchRippleProps: combineProps({
                 classes: RcIconButtonTouchRippleClasses,
             }, TouchRippleProps) }, rest), icon));

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

@@ -1,14 +1,11 @@
 import { __makeTemplateObject } from "tslib";
 import { backgroundTransition, css, focusVisible, focusVisibleColor, getParsePaletteColor, nonTouchHoverMedia, palette2, paletteContrastText, px, radius, setOpacity, shadows, fakeBorder, } from '../../../../foundation';
-import { RcIcon } from '../../../Icon';
 import { RcIconButtonClasses, RcIconButtonFocusVisibleInsetSize, RcIconButtonSizes, RcIconButtonTouchRippleClasses, } from '../utils';
 export var getFocusVisibleInsetSize = function (_a) {
     var size = _a.size;
     var inset = RcIconButtonFocusVisibleInsetSize[size];
     return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      top: -", "px;\n      right: -", "px;\n      bottom: -", "px;\n      left: -", "px;\n    "], ["\n      top: -", "px;\n      right: -", "px;\n      bottom: -", "px;\n      left: -", "px;\n    "])), inset, inset, inset, inset);
 };
-// * text inside button should also set style
-var childrenClass = "&," + RcIcon;
 var containedVariantTransitions = function (_a) {
     var theme = _a.theme;
     return theme.transitions.create(['background-color', 'box-shadow', 'border'], {
@@ -41,13 +38,13 @@ export var iconButtonStyle = function (_a) {
             radius: currRadius,
             pseudo: true,
         });
-    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n\n    width: ", ";\n    height: ", ";\n    color: ", ";\n    border-radius: ", ";\n    transition: ", ";\n    cursor: ", ";\n    background-color: ", ";\n    box-shadow: ", ";\n\n    ", ";\n\n    ", " {\n      font-size: ", ";\n    }\n\n    ", " {\n      &:hover {\n        background-color: ", ";\n\n        ", " {\n          color: ", ";\n        }\n      }\n    }\n\n    &:active {\n      ", " {\n        color: ", ";\n      }\n    }\n\n    ", " {\n      background-color: ", ";\n\n      &:active {\n        ", " {\n          color: ", ";\n        }\n      }\n\n      ", ";\n    }\n\n    &.", " {\n      background-color: ", ";\n    }\n\n    &.", " {\n      ", " {\n        color: ", ";\n      }\n\n      background-color: ", ";\n    }\n\n    &.", " {\n      opacity: 0;\n      visibility: hidden;\n      width: 0;\n      height: 0;\n    }\n\n    &.", " {\n      border: 1px solid ", ";\n    }\n\n    &.", " {\n      color: ", ";\n      background-color: ", ";\n\n      &:before {\n        content: '';\n        left: 0;\n        right: 0;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n        border-radius: ", ";\n        position: absolute;\n      }\n\n      ", ";\n\n      ", " {\n        &:hover {\n          &:before {\n            background-color: ", ";\n          }\n\n          ", " {\n            color: ", ";\n          }\n        }\n      }\n\n      ", " {\n        &:before {\n          background-color: ", ";\n        }\n\n        ", " {\n          color: ", ";\n        }\n      }\n\n      &:active {\n        ", "\n\n        ", " {\n          color: ", ";\n        }\n      }\n    }\n\n    &.", " {\n      ", ";\n    }\n\n    .", " {\n      border-radius: 0;\n      animation-name: none;\n      opacity: 0;\n    }\n\n    ", "\n  "], ["\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n\n    width: ", ";\n    height: ", ";\n    color: ", ";\n    border-radius: ", ";\n    transition: ", ";\n    cursor: ", ";\n    background-color: ", ";\n    box-shadow: ", ";\n\n    ",
-        ";\n\n    ", " {\n      font-size: ",
-        ";\n    }\n\n    ", " {\n      &:hover {\n        background-color: ",
-        ";\n\n        ", " {\n          color: ", ";\n        }\n      }\n    }\n\n    &:active {\n      ", " {\n        color: ", ";\n      }\n    }\n\n    ", " {\n      background-color: ",
-        ";\n\n      &:active {\n        ", " {\n          color: ", ";\n        }\n      }\n\n      ", ";\n    }\n\n    &.", " {\n      background-color: ", ";\n    }\n\n    &.", " {\n      ", " {\n        color: ",
-        ";\n      }\n\n      background-color: ", ";\n    }\n\n    &.", " {\n      opacity: 0;\n      visibility: hidden;\n      width: 0;\n      height: 0;\n    }\n\n    &.", " {\n      border: 1px solid ", ";\n    }\n\n    &.", " {\n      color: ", ";\n      background-color: ", ";\n\n      &:before {\n        content: '';\n        left: 0;\n        right: 0;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n        border-radius: ", ";\n        position: absolute;\n      }\n\n      ", ";\n\n      ", " {\n        &:hover {\n          &:before {\n            background-color: ", ";\n          }\n\n          ", " {\n            color: ", ";\n          }\n        }\n      }\n\n      ", " {\n        &:before {\n          background-color: ", ";\n        }\n\n        ", " {\n          color: ", ";\n        }\n      }\n\n      &:active {\n        ",
-        "\n\n        ", " {\n          color: ", ";\n        }\n      }\n    }\n\n    &.", " {\n      ", ";\n    }\n\n    .", " {\n      border-radius: 0;\n      animation-name: none;\n      opacity: 0;\n    }\n\n    "
+    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n\n    width: ", ";\n    height: ", ";\n    color: ", ";\n    border-radius: ", ";\n    transition: ", ";\n    cursor: ", ";\n    background-color: ", ";\n    box-shadow: ", ";\n\n    ", ";\n\n    font-size: ", ";\n\n    ", " {\n      &:hover {\n        background-color: ", ";\n\n        color: ", ";\n      }\n    }\n\n    &:active {\n      color: ", ";\n    }\n\n    ", " {\n      background-color: ", ";\n\n      &:active {\n        color: ", ";\n      }\n\n      ", ";\n    }\n\n    &.", " {\n      background-color: ", ";\n    }\n\n    &.", " {\n      color: ", ";\n\n      background-color: ", ";\n    }\n\n    &.", " {\n      opacity: 0;\n      visibility: hidden;\n      width: 0;\n      height: 0;\n    }\n\n    &.", " {\n      border: 1px solid ", ";\n    }\n\n    &.", " {\n      color: ", ";\n      background-color: ", ";\n\n      &:before {\n        content: '';\n        left: 0;\n        right: 0;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n        border-radius: ", ";\n        position: absolute;\n      }\n\n      ", ";\n\n      ", " {\n        &:hover {\n          &:before {\n            background-color: ", ";\n          }\n\n          color: ", ";\n        }\n      }\n\n      ", " {\n        &:before {\n          background-color: ", ";\n        }\n\n        color: ", ";\n      }\n\n      &:active {\n        ", "\n\n        color: ", ";\n      }\n    }\n\n    &.", " {\n      ", ";\n    }\n\n    .", " {\n      border-radius: 0;\n      animation-name: none;\n      opacity: 0;\n    }\n\n    ", "\n  "], ["\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n\n    width: ", ";\n    height: ", ";\n    color: ", ";\n    border-radius: ", ";\n    transition: ", ";\n    cursor: ", ";\n    background-color: ", ";\n    box-shadow: ", ";\n\n    ",
+        ";\n\n    font-size: ",
+        ";\n\n    ", " {\n      &:hover {\n        background-color: ",
+        ";\n\n        color: ", ";\n      }\n    }\n\n    &:active {\n      color: ", ";\n    }\n\n    ", " {\n      background-color: ",
+        ";\n\n      &:active {\n        color: ", ";\n      }\n\n      ", ";\n    }\n\n    &.", " {\n      background-color: ", ";\n    }\n\n    &.", " {\n      color: ",
+        ";\n\n      background-color: ", ";\n    }\n\n    &.", " {\n      opacity: 0;\n      visibility: hidden;\n      width: 0;\n      height: 0;\n    }\n\n    &.", " {\n      border: 1px solid ", ";\n    }\n\n    &.", " {\n      color: ", ";\n      background-color: ", ";\n\n      &:before {\n        content: '';\n        left: 0;\n        right: 0;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n        border-radius: ", ";\n        position: absolute;\n      }\n\n      ", ";\n\n      ", " {\n        &:hover {\n          &:before {\n            background-color: ", ";\n          }\n\n          color: ", ";\n        }\n      }\n\n      ", " {\n        &:before {\n          background-color: ", ";\n        }\n\n        color: ", ";\n      }\n\n      &:active {\n        ",
+        "\n\n        color: ", ";\n      }\n    }\n\n    &.", " {\n      ", ";\n    }\n\n    .", " {\n      border-radius: 0;\n      animation-name: none;\n      opacity: 0;\n    }\n\n    "
         /**
          * that is equilateral triangle, the third Side length is
          * Math.sqrt(2) = 1.414213562373095, so we scale that
@@ -55,17 +52,17 @@ export var iconButtonStyle = function (_a) {
          */
         ,
         "\n  "])), containerSize, containerSize, mainColor, radiusValue, backgroundTransition, disabled ? 'default' : 'pointer', (shouldPersistBg || isInverse) && persistBgColor, nowShadow, nowShadow && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      transition: ", ";\n\n      &:active {\n        box-shadow: ", ";\n      }\n    "], ["\n      transition: ", ";\n\n      &:active {\n        box-shadow: ",
-        ";\n      }\n    "])), containedVariantTransitions, shadows(activeElevation !== null && activeElevation !== void 0 ? activeElevation : (elevation ? Math.min(+elevation + 11, 24) : '12'))), childrenClass, stretchIcon
+        ";\n      }\n    "])), containedVariantTransitions, shadows(activeElevation !== null && activeElevation !== void 0 ? activeElevation : (elevation ? Math.min(+elevation + 11, 24) : '12'))), stretchIcon
         ? containerSize
         : px(isOutline
             ? iconSize * 1.2 // keep size same as before
             : iconSize), nonTouchHoverMedia, isPlain
         ? 'transparent'
-        : setOpacity(mainColor, isInverse ? '24' : '08'), childrenClass, setOpacity(mainColor, '88'), childrenClass, mainColor, focusVisible, isPlain
+        : setOpacity(mainColor, isInverse ? '24' : '08'), setOpacity(mainColor, '88'), mainColor, focusVisible, isPlain
         ? 'transparent'
-        : setOpacity(mainColor, isInverse ? '32' : '16'), childrenClass, setOpacity(mainColor, '88'), isPlain && plainIconButtonFocusStyle({ radius: currRadius }), RcIconButtonClasses.persistBg, persistBgColor, RcIconButtonClasses.disabled, childrenClass, useColorWhenDisabled
+        : setOpacity(mainColor, isInverse ? '32' : '16'), setOpacity(mainColor, '88'), isPlain && plainIconButtonFocusStyle({ radius: currRadius }), RcIconButtonClasses.persistBg, persistBgColor, RcIconButtonClasses.disabled, useColorWhenDisabled
         ? setOpacity(mainColor, '32')
-        : palette2('disabled', 'f02'), isInverse && setOpacity(mainColor, '12'), RcIconButtonClasses.invisible, RcIconButtonClasses.outline, palette2('neutral', 'l03'), RcIconButtonClasses.contained, mainColorContrast, mainColor, radiusValue, contrastColorBorder, nonTouchHoverMedia, setOpacity(mainColorContrast, '08'), childrenClass, mainColorContrast, focusVisible, setOpacity(mainColorContrast, '16'), childrenClass, mainColorContrast, disableRipple && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n          &:before {\n            background-color: ", ";\n          }\n        "], ["\n          &:before {\n            background-color: ", ";\n          }\n        "])), setOpacity(mainColorContrast, '24')), childrenClass, mainColorContrast, RcIconButtonClasses.inverse, contrastColorBorder, RcIconButtonTouchRippleClasses.ripplePulsate, 
+        : palette2('disabled', 'f02'), isInverse && setOpacity(mainColor, '12'), RcIconButtonClasses.invisible, RcIconButtonClasses.outline, palette2('neutral', 'l03'), RcIconButtonClasses.contained, mainColorContrast, mainColor, radiusValue, contrastColorBorder, nonTouchHoverMedia, setOpacity(mainColorContrast, '08'), mainColorContrast, focusVisible, setOpacity(mainColorContrast, '16'), mainColorContrast, disableRipple && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n          &:before {\n            background-color: ", ";\n          }\n        "], ["\n          &:before {\n            background-color: ", ";\n          }\n        "])), setOpacity(mainColorContrast, '24')), mainColorContrast, RcIconButtonClasses.inverse, contrastColorBorder, RcIconButtonTouchRippleClasses.ripplePulsate, 
     /**
      * that is equilateral triangle, the third Side length is
      * Math.sqrt(2) = 1.414213562373095, so we scale that

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

@@ -3,14 +3,14 @@ import React, { forwardRef, useEffect, useImperativeHandle, useRef, } from 'reac
 import { styled, useDebounce, useEventCallback, useForkRef, useKeyboardMoveFocus, useOnlyOneFocusable, useThemeProps, } from '../../../foundation';
 import { RcIconButtonClasses } from '../../Buttons/IconButton/utils';
 import { RcVisuallyHidden } from '../../VisuallyHidden';
-import { DialPadButton } from '../DialPadButton';
+import { RcDialPadButton } from '../DialPadButton';
 import { useRcDialerContext } from '../utils';
-import { keypadContainerStyle } from './styles';
+import { DialPadStyle } from './styles';
 import { ACCEPTABLE_KEYS, DIALER_PAD_ICONS, DIALER_PAD_PLUS, useKeyAudio, } from './utils';
 var DEBOUNCE_TIME = 30;
 var _RcDialPad = forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'RcDialPad' });
-    var sounds = props.sounds, volume = props.volume, muted = props.muted, classes = props.classes, onChangeProp = props.onChange, longPressDelay = props.longPressDelay, action = props.action, persistBgTime = props.persistBgTime, control = props.control, getDialPadButtonProps = props.getDialPadButtonProps, _a = props.externalWindow, externalWindow = _a === void 0 ? window : _a, divProps = __rest(props, ["sounds", "volume", "muted", "classes", "onChange", "longPressDelay", "action", "persistBgTime", "control", "getDialPadButtonProps", "externalWindow"]);
+    var sounds = props.sounds, volume = props.volume, autoSize = props.autoSize, muted = props.muted, classes = props.classes, onChangeProp = props.onChange, longPressDelay = props.longPressDelay, action = props.action, persistBgTime = props.persistBgTime, control = props.control, getDialPadButtonProps = props.getDialPadButtonProps, _a = props.externalWindow, externalWindow = _a === void 0 ? window : _a, divProps = __rest(props, ["sounds", "volume", "autoSize", "muted", "classes", "onChange", "longPressDelay", "action", "persistBgTime", "control", "getDialPadButtonProps", "externalWindow"]);
     var containerRef = useRef(null);
     var hiddenRef = useRef(null);
     var keyTimerMapRef = useRef({});
@@ -106,7 +106,7 @@ var _RcDialPad = forwardRef(function (inProps, ref) {
             var ariaLabelArr = additionLabel
                 ? [key, additionLabel]
                 : [key];
-            return (React.createElement(DialPadButton, __assign({ classes: classes, symbol: symbol, key: key, value: key, onKeyEffect: handleKeyEffect }, getItemProps(index), { "aria-label": ariaLabelArr.join(','), onKeyDown: onKeyFocusedIndexHandle }, (_b = {}, _b[dialButtonKey] = key, _b), getDialPadButtonProps === null || getDialPadButtonProps === void 0 ? void 0 : getDialPadButtonProps(key), (key === '0'
+            return (React.createElement(RcDialPadButton, __assign({ classes: classes, symbol: symbol, key: key, value: key, onKeyEffect: handleKeyEffect }, getItemProps(index), { "aria-label": ariaLabelArr.join(','), onKeyDown: onKeyFocusedIndexHandle }, (_b = {}, _b[dialButtonKey] = key, _b), getDialPadButtonProps === null || getDialPadButtonProps === void 0 ? void 0 : getDialPadButtonProps(key), (key === '0'
                 ? {
                     longPressValue: DIALER_PAD_PLUS,
                     longPressDelay: longPressDelay,
@@ -115,7 +115,7 @@ var _RcDialPad = forwardRef(function (inProps, ref) {
         })));
 });
 /** @release */
-var RcDialPad = styled(_RcDialPad)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), keypadContainerStyle);
+var RcDialPad = styled(_RcDialPad)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), DialPadStyle);
 RcDialPad.defaultProps = {
     persistBgTime: 200,
     volume: 1,

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

@@ -1,4 +1,11 @@
 import { __makeTemplateObject } from "tslib";
 import { css } from '../../../../foundation';
-export var keypadContainerStyle = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n"])));
-var templateObject_1;
+import { RcIcon } from '../../../Icon';
+import { RcDialPadButton } from '../../DialPadButton';
+var itemScale = "27.59%";
+export var DialPadStyle = function (_a) {
+    var _b = _a.autoSize, autoSize = _b === void 0 ? true : _b;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex;\n    flex-wrap: wrap;\n\n    ", "\n  "], ["\n    display: flex;\n    flex-wrap: wrap;\n\n    ",
+        "\n  "])), autoSize && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      justify-content: space-between;\n\n      ", " {\n        width: ", ";\n        height: 0;\n        padding-top: ", ";\n\n        ", " {\n          position: absolute;\n          top: 0;\n          left: 0;\n          svg {\n            height: 100%;\n            width: 100%;\n          }\n        }\n      }\n    "], ["\n      justify-content: space-between;\n\n      ", " {\n        width: ", ";\n        height: 0;\n        padding-top: ", ";\n\n        ", " {\n          position: absolute;\n          top: 0;\n          left: 0;\n          svg {\n            height: 100%;\n            width: 100%;\n          }\n        }\n      }\n    "])), RcDialPadButton, itemScale, itemScale, RcIcon));
+};
+var templateObject_1, templateObject_2;

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { styled, useLongPress } from '../../../foundation';
 import { RcIconButton } from '../../Buttons';
 import { buttonWrapperStyle } from './styles';
-var _DialPadButton = function (props) {
+var _RcDialPadButton = function (props) {
     var value = props.value, longPressValue = props.longPressValue, longPressDelay = props.longPressDelay, onKeyEffect = props.onKeyEffect, rest = __rest(props, ["value", "longPressValue", "longPressDelay", "onKeyEffect"]);
     var isPressEvent = typeof longPressDelay === 'number' && typeof longPressValue === 'string';
     var _a = useLongPress({
@@ -18,7 +18,7 @@ var _DialPadButton = function (props) {
     }, rest, { delay: longPressDelay }), ref = _a.ref, events = __rest(_a, ["ref"]);
     return (React.createElement(RcIconButton, __assign({ ref: ref, variant: "round", stretchIcon: true }, rest, events)));
 };
-var DialPadButton = styled(_DialPadButton)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), buttonWrapperStyle);
-DialPadButton.displayName = 'DialPadButton';
-export { DialPadButton };
+var RcDialPadButton = styled(_RcDialPadButton)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), buttonWrapperStyle);
+RcDialPadButton.displayName = 'RcDialPadButton';
+export { RcDialPadButton };
 var templateObject_1;

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

@@ -1,6 +1,5 @@
 import { __makeTemplateObject } from "tslib";
 import { css, palette2 } from '../../../../foundation';
 import { RcIcon } from '../../../Icon';
-var itemScale = "27.59%";
-export var buttonWrapperStyle = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  && {\n    width: ", ";\n    height: 0;\n  }\n\n  padding-top: ", ";\n\n  ", " {\n    position: absolute;\n    top: 0;\n    left: 0;\n    svg {\n      height: 100%;\n      width: 100%;\n      path:first-child {\n        fill: ", ";\n      }\n      path:nth-child(2) {\n        fill: ", ";\n      }\n    }\n  }\n"], ["\n  && {\n    width: ", ";\n    height: 0;\n  }\n\n  padding-top: ", ";\n\n  ", " {\n    position: absolute;\n    top: 0;\n    left: 0;\n    svg {\n      height: 100%;\n      width: 100%;\n      path:first-child {\n        fill: ", ";\n      }\n      path:nth-child(2) {\n        fill: ", ";\n      }\n    }\n  }\n"])), itemScale, itemScale, RcIcon, palette2('neutral', 'f06'), palette2('neutral', 'f04'));
+export var buttonWrapperStyle = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", " {\n    svg {\n      path:first-child {\n        fill: ", ";\n      }\n      path:nth-child(2) {\n        fill: ", ";\n      }\n    }\n  }\n"], ["\n  ", " {\n    svg {\n      path:first-child {\n        fill: ", ";\n      }\n      path:nth-child(2) {\n        fill: ", ";\n      }\n    }\n  }\n"])), RcIcon, palette2('neutral', 'f06'), palette2('neutral', 'f04'));
 var templateObject_1;

package/es6/foundation/hooks/useEventListener/useEventListener.js

@@ -1,4 +1,4 @@
-import { __read } from "tslib";
+import { __assign, __rest } from "tslib";
 import { useEffect, useRef } from 'react';
 import { getRefElement } from '../../utils';
 import { useEventCallback } from '../useEventCallback';
@@ -17,13 +17,14 @@ import { useEventCallback } from '../useEventCallback';
  * useEventListener(window, 'keyup', () => console.log('window key up'))
  * ```
  */
-export function useEventListener(target) {
-    var o = [];
-    for (var _i = 1; _i < arguments.length; _i++) {
-        o[_i - 1] = arguments[_i];
+export function useEventListener(target, key, callback) {
+    var args = [];
+    for (var _i = 3; _i < arguments.length; _i++) {
+        args[_i - 3] = arguments[_i];
     }
-    var _a = __read(o, 3), key = _a[0], cb = _a[1], options = _a[2];
-    var listener = useEventCallback(cb);
+    var _a = getListenerOverloadOption(args), options = _a.options, config = _a.config;
+    var _b = (config || {}).startImmediately, startImmediately = _b === void 0 ? true : _b;
+    var listener = useEventCallback(callback);
     var cancelRef = useRef(function () { });
     var bindRef = useRef(function () { });
     var currentRefElm = getRefElement(target);
@@ -38,7 +39,9 @@ export function useEventListener(target) {
         cancelRef.current = function () {
             return currentElm.removeEventListener(key, listener, options);
         };
-        bindRef.current();
+        if (startImmediately) {
+            bindRef.current();
+        }
         return cancelRef.current;
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [target, currentRefElm]);
@@ -47,3 +50,19 @@ export function useEventListener(target) {
         remove: function () { return cancelRef.current(); },
     };
 }
+function getListenerOverloadOption(args) {
+    var options;
+    var config;
+    if (typeof args[0] === 'boolean') {
+        options = args[0];
+        config = args[1];
+    }
+    else {
+        var _a = __assign(__assign({}, (args[0] || {})), (args[1] || {})), startImmediately = _a.startImmediately, restOptions = __rest(_a, ["startImmediately"]);
+        options = restOptions;
+        config = {
+            startImmediately: startImmediately,
+        };
+    }
+    return { options: options, config: config };
+}

package/es6/foundation/hooks/useGlobalListener/createGlobalListener.js

@@ -0,0 +1,81 @@
+import { getRefElement } from '../../utils';
+export var globalListenerEventMap = new Map();
+/**
+ * create globalListener handler for share one listener event
+ *
+ * @example
+ * ```ts
+ * const globalListener = createGlobalListener('focus', () => { console.log('focus') });
+ * const globalListener2 = createGlobalListener('focus', () => { console.log('focus') });
+ * globalListener.listen();
+ * globalListener2.listen();
+ *
+ * => // that will only create an event listener on window, but every callback will get emit value when event triggered
+ * ```
+ */
+export var createGlobalListener = function (key, listener, options, _a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.customKey, customKey = _c === void 0 ? key : _c, _d = _b.target, targetProp = _d === void 0 ? window : _d;
+    var listening = false;
+    var getMapValue = function () { return globalListenerEventMap.get(customKey); };
+    var addListener = function () {
+        if (listening)
+            return;
+        var savedEvent = getMapValue();
+        if (!(savedEvent === null || savedEvent === void 0 ? void 0 : savedEvent.exec)) {
+            var exec = function (e) {
+                var event = getMapValue();
+                event === null || event === void 0 ? void 0 : event.listeners.forEach(function (c) { return c(e); });
+            };
+            globalListenerEventMap.set(customKey, {
+                exec: exec,
+                listeners: new Set([listener]),
+            });
+            var target = getRefElement(targetProp);
+            target === null || target === void 0 ? void 0 : target.addEventListener(key, exec, options);
+        }
+        else {
+            savedEvent.listeners.add(listener);
+        }
+        listening = true;
+    };
+    var removeListener = function () {
+        if (!listening)
+            return;
+        listening = false;
+        var _savedEvent = getMapValue();
+        if (!_savedEvent)
+            return;
+        var listeners = _savedEvent.listeners;
+        listeners.delete(listener);
+        if (listeners.size === 0) {
+            var target = getRefElement(targetProp);
+            target === null || target === void 0 ? void 0 : target.removeEventListener(key, _savedEvent.exec, options);
+            globalListenerEventMap.delete(customKey);
+        }
+    };
+    return {
+        listen: function () { return addListener(); },
+        /**
+         * remove listener
+         */
+        remove: function () { return removeListener(); },
+        /**
+         * current listener state
+         */
+        get state() {
+            return {
+                /**
+                 * current listener state count
+                 */
+                get count() {
+                    var _a;
+                    return ((_a = getMapValue()) === null || _a === void 0 ? void 0 : _a.listeners.size) || 0;
+                },
+                /**
+                 * is that be listening
+                 */
+                listening: listening,
+            };
+        },
+    };
+};

package/es6/foundation/hooks/useGlobalListener/index.js

@@ -1 +1,2 @@
+export * from './createGlobalListener';
 export * from './useGlobalListener';

package/es6/foundation/hooks/useGlobalListener/useGlobalListener.js

@@ -1,89 +1,8 @@
+import { __assign, __rest } from "tslib";
 import { useEffect, useRef } from 'react';
 import { getRefElement, logInDev } from '../../utils';
 import { useEventCallback } from '../useEventCallback';
-export var globalListenerEventMap = new Map();
-/**
- * create globalListener handler for share one listener event
- *
- * @example
- * ```ts
- * const globalListener = createGlobalListener('focus', () => { console.log('focus') });
- * const globalListener2 = createGlobalListener('focus', () => { console.log('focus') });
- * globalListener.listen();
- * globalListener2.listen();
- *
- * => // that will only create an event listener on window, but every callback will get emit value when event triggered
- * ```
- */
-export var createGlobalListener = function (key, listener, _a) {
-    var _b = _a === void 0 ? {} : _a, _c = _b.customKey, customKey = _c === void 0 ? key : _c, _d = _b.target, targetProp = _d === void 0 ? window : _d;
-    var listening = false;
-    var getMapValue = function () { return globalListenerEventMap.get(customKey); };
-    var addListener = function () {
-        if (listening)
-            return;
-        var savedEvent = getMapValue();
-        if (!(savedEvent === null || savedEvent === void 0 ? void 0 : savedEvent.exec)) {
-            var exec = function (e) {
-                var event = getMapValue();
-                event === null || event === void 0 ? void 0 : event.listeners.forEach(function (c) { return c(e); });
-            };
-            globalListenerEventMap.set(customKey, {
-                exec: exec,
-                listeners: new Set([listener]),
-            });
-            var target = getRefElement(targetProp);
-            target === null || target === void 0 ? void 0 : target.addEventListener(key, exec);
-        }
-        else {
-            savedEvent.listeners.add(listener);
-        }
-        listening = true;
-    };
-    var removeListener = function () {
-        if (!listening)
-            return;
-        listening = false;
-        var _savedEvent = getMapValue();
-        if (!_savedEvent)
-            return;
-        var listeners = _savedEvent.listeners;
-        listeners.delete(listener);
-        if (listeners.size === 0) {
-            var target = getRefElement(targetProp);
-            target === null || target === void 0 ? void 0 : target.removeEventListener(key, _savedEvent.exec);
-            globalListenerEventMap.delete(customKey);
-        }
-    };
-    return {
-        /**
-         * bind listener again
-         */
-        listen: function () { return addListener(); },
-        /**
-         * remove listener
-         */
-        remove: function () { return removeListener(); },
-        /**
-         * current listener state
-         */
-        get state() {
-            return {
-                /**
-                 * current listener state count
-                 */
-                get count() {
-                    var _a;
-                    return ((_a = getMapValue()) === null || _a === void 0 ? void 0 : _a.listeners.size) || 0;
-                },
-                /**
-                 * is that be listening
-                 */
-                listening: listening,
-            };
-        },
-    };
-};
+import { createGlobalListener, } from './createGlobalListener';
 /**
  * bind global event, when you bind same key event,
  * that will reuse one event listener and trigger both callback once that listener be triggered.
@@ -91,40 +10,91 @@ export var createGlobalListener = function (key, listener, _a) {
  * also you can control listener with method `listen` and `remove`
  * and get listener `state` for check listener count number and current listing state.
  *
- * - `key` `options` only work when set first time, never change after first render
+ * config:
+ * - `target`: custom binding event target, default is `window`
+ * - `customKey`: custom key for determining different event group, default is same as `key`
+ * - `startImmediately`: start listener immediately, default is `true`
+ *
+ * * `key`, `options` only work when set first time, never change after first render
  *
  * @example
  * ```ts
  * useGlobalListener('keyup', () => console.log('window key up1'))
+ *
  * useGlobalListener('keyup', () => console.log('window key up2'))
- * useGlobalListener('keyup', () => console.log('window key up3'))
+ *
+ * useGlobalListener('touchend', () => console.log('window key up3'), {
+ *  target: someWantHostElement,
+ *  customKey: 'hostTouchend',
+ * })
+ *
+ * useGlobalListener('touchend', () => console.log('window key up3'), { passive: false }, {
+ *  target: someWantHostElement,
+ *  customKey: 'hostTouchend',
+ * })
  *
  * => // that will only create an event listener on `window`, but every callback will get emit value when event triggered
  * ```
  */
-export function useGlobalListener(key, listener, options) {
-    if (options === void 0) { options = {}; }
+export function useGlobalListener(key, listener) {
+    var args = [];
+    for (var _i = 2; _i < arguments.length; _i++) {
+        args[_i - 2] = arguments[_i];
+    }
+    var _a = getListenerOverloadOption(args), options = _a.options, config = _a.config;
+    var _b = config || {}, _c = _b.customKey, customKey = _c === void 0 ? key : _c, _d = _b.target, targetProp = _d === void 0 ? window : _d, _e = _b.startImmediately, startImmediately = _e === void 0 ? true : _e;
     var _listener = useEventCallback(listener);
-    var globalListener = useRef(createGlobalListener(key, _listener, options)).current;
+    var globalListener = useRef(createGlobalListener(key, _listener, options, {
+        customKey: customKey,
+        target: targetProp,
+    })).current;
     if (process.env.NODE_ENV !== 'production') {
-        var _a = options.customKey, customKey_1 = _a === void 0 ? key : _a, _b = options.target, targetProp_1 = _b === void 0 ? window : _b;
         // eslint-disable-next-line react-hooks/rules-of-hooks
         useEffect(function () {
-            var target = getRefElement(targetProp_1);
-            if (target !== window && customKey_1 === key) {
-                logInDev({
-                    component: 'useGlobalListener',
-                    message: 'When you custom binding event target, you must custom key for determining different event group',
-                    level: 'error',
-                });
+            if (customKey === key) {
+                if (Object.keys(options).length > 0) {
+                    logInDev({
+                        component: 'useGlobalListener',
+                        message: 'when have set options, suggest you also bind customKey, otherwise, it may use previous listener without same options',
+                        level: 'warn',
+                    });
+                }
+                var target = getRefElement(targetProp);
+                if (target !== window) {
+                    logInDev({
+                        component: 'useGlobalListener',
+                        message: 'When you custom binding event target, you must custom key for determining different event group',
+                        level: 'error',
+                    });
+                }
             }
             // eslint-disable-next-line react-hooks/exhaustive-deps
         }, []);
     }
     useEffect(function () {
-        globalListener.listen();
+        if (startImmediately) {
+            globalListener.listen();
+        }
         return globalListener.remove;
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     return globalListener;
 }
+function getListenerOverloadOption(args) {
+    var options;
+    var config;
+    if (typeof args[0] === 'boolean') {
+        options = args[0];
+        config = args[1];
+    }
+    else {
+        var _a = __assign(__assign({}, (args[0] || {})), (args[1] || {})), startImmediately = _a.startImmediately, customKey = _a.customKey, target = _a.target, restOptions = __rest(_a, ["startImmediately", "customKey", "target"]);
+        options = restOptions;
+        config = {
+            startImmediately: startImmediately,
+            customKey: customKey,
+            target: target,
+        };
+    }
+    return { options: options, config: config };
+}