@ringcentral/juno 2.5.0-beta.0 → 2.7.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

@@ -1,7 +1,7 @@
 import { __assign, __makeTemplateObject, __rest } from "tslib";
-import React, { forwardRef, memo } from 'react';
+import React, { forwardRef, memo, useMemo } from 'react';
 import clsx from 'clsx';
-import { combineProps, styled, useDeprecatedCheck, useTheme, useThemeProps, } from '../../../foundation';
+import { combineProps, styled, useDeprecatedCheck, useTheme, useThemeProps, combineClasses, } from '../../../foundation';
 import { RcIcon } from '../../Icon';
 import { RcTooltip, withTooltip } from '../../Tooltip';
 import { RcButtonBase } from '../ButtonBase';
@@ -15,20 +15,23 @@ 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, classes = props.classes, children = props.children, title = props.title, 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", "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';
+    var isInverse = variant === 'inverse';
     var isPlain = variant === 'plain';
-    var IconClassName = clsx(className, classes.root, RcIconButtonClasses.root, (_a = {},
-        _a[RcIconButtonClasses.disabled] = disabled,
-        _a[RcIconButtonClasses.invisible] = invisible,
-        _a[RcIconButtonClasses.outline] = isOutline,
-        _a[RcIconButtonClasses.contained] = isContained,
+    var classes = useMemo(function () { return combineClasses(RcIconButtonClasses, classesProp); }, [classesProp]);
+    var IconClassName = clsx(className, classes.root, (_a = {},
+        _a[classes.disabled] = disabled,
+        _a[classes.invisible] = invisible,
+        _a[classes.outline] = isOutline,
+        _a[classes.contained] = isContained,
+        _a[classes.inverse] = isInverse,
         _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));
@@ -55,7 +58,6 @@ RcIconButton.defaultProps = {
     type: 'button',
     focusRipple: true,
     disableTouchRipple: true,
-    centerRipple: true,
     classes: {},
     useRcTooltip: true,
 };

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

@@ -1,5 +1,5 @@
 import { __makeTemplateObject } from "tslib";
-import { backgroundTransition, css, focusVisible, focusVisibleColor, getParsePaletteColor, nonTouchHoverMedia, palette2, paletteContrastText, px, radius, setOpacity, shadows, } from '../../../../foundation';
+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) {
@@ -20,7 +20,7 @@ export var plainIconButtonFocusStyle = function (_a) {
     return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  &:after {\n    content: '';\n    position: absolute;\n    ", ";\n    box-shadow: 0 0 0 1px ", ";\n    border-radius: ", ";\n    pointer-events: none;\n    z-index: 1;\n  }\n"], ["\n  &:after {\n    content: '';\n    position: absolute;\n    ", ";\n    box-shadow: 0 0 0 1px ", ";\n    border-radius: ", ";\n    pointer-events: none;\n    z-index: 1;\n  }\n"])), getFocusVisibleInsetSize, focusVisibleColor, radius(radiusProp));
 };
 export var iconButtonStyle = function (_a) {
-    var variant = _a.variant, size = _a.size, stretchIcon = _a.stretchIcon, color = _a.color, disabled = _a.disabled, useColorWhenDisabled = _a.useColorWhenDisabled, shouldPersistBg = _a.shouldPersistBg, radiusProp = _a.radius, elevation = _a.elevation, activeElevation = _a.activeElevation;
+    var variant = _a.variant, size = _a.size, stretchIcon = _a.stretchIcon, color = _a.color, disabled = _a.disabled, useColorWhenDisabled = _a.useColorWhenDisabled, shouldPersistBg = _a.shouldPersistBg, radiusProp = _a.radius, disableRipple = _a.disableRipple, elevation = _a.elevation, disabledFakeBorder = _a.disabledFakeBorder, activeElevation = _a.activeElevation;
     var iconSize = RcIconButtonSizes[size];
     var isCircle = ['plain', 'round', 'inverse', 'contained'].includes(variant);
     var isPlain = variant === 'plain';
@@ -34,19 +34,27 @@ export var iconButtonStyle = function (_a) {
     var persistBgColor = setOpacity(mainColor, isInverse ? '16' : '12');
     var defaultShadow = isContained ? shadows('1') : undefined;
     var nowShadow = elevation !== undefined ? shadows(elevation) : defaultShadow;
-    return css(templateObject_5 || (templateObject_5 = __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      ", " {\n        &:hover {\n          background-color: ", ";\n\n          ", " {\n            color: ", ";\n          }\n        }\n      }\n\n      ", " {\n        background-color: ", ";\n\n        ", " {\n          color: ", ";\n        }\n      }\n\n      &:active {\n        background-color: ", ";\n\n        ", " {\n          color: ", ";\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    ",
+    var radiusValue = radius(currRadius);
+    var contrastColorBorder = !disabledFakeBorder &&
+        fakeBorder({
+            color: palette2('highContrast'),
+            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          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    ", " {\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      ", " {\n        &:hover {\n          background-color: ", ";\n\n          ", " {\n            color: ", ";\n          }\n        }\n      }\n\n      ", " {\n        background-color: ", ";\n\n        ", " {\n          color: ", ";\n        }\n      }\n\n      &:active {\n        background-color: ", ";\n\n        ", " {\n          color: ", ";\n        }\n      }\n    }\n\n    .", " {\n      border-radius: 0;\n      animation-name: none;\n      opacity: 0;\n    }\n\n    "
+        ";\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          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
          * to make that full with this square
          */
         ,
-        "\n  "])), containerSize, containerSize, mainColor, radius(currRadius), 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  "])), 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
         ? containerSize
         : px(isOutline
@@ -57,13 +65,13 @@ export var iconButtonStyle = function (_a) {
         ? 'transparent'
         : setOpacity(mainColor, isInverse ? '32' : '16'), childrenClass, setOpacity(mainColor, '88'), isPlain && plainIconButtonFocusStyle({ radius: currRadius }), RcIconButtonClasses.persistBg, persistBgColor, RcIconButtonClasses.disabled, childrenClass, useColorWhenDisabled
         ? setOpacity(mainColor, '32')
-        : palette2('disabled', 'f02'), isInverse && setOpacity(mainColor, '12'), RcIconButtonClasses.invisible, RcIconButtonClasses.outline, palette2('neutral', 'l03'), RcIconButtonClasses.contained, mainColorContrast, mainColor, nonTouchHoverMedia, setOpacity(mainColor, '08', true), childrenClass, mainColorContrast, focusVisible, setOpacity(mainColor, '16', true), childrenClass, mainColorContrast, setOpacity(mainColor, '24', true), childrenClass, mainColorContrast, 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
      * to make that full with this square
      */
     !isPlain &&
-        !['circle', 'round'].includes(currRadius) && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        .", " {\n          transform: scale(1.41421357);\n        }\n      "], ["\n        .", " {\n          transform: scale(1.41421357);\n        }\n      "])), RcIconButtonTouchRippleClasses.child));
+        !['circle', 'round'].includes(currRadius) && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        .", " {\n          transform: scale(1.41421357);\n        }\n      "], ["\n        .", " {\n          transform: scale(1.41421357);\n        }\n      "])), RcIconButtonTouchRippleClasses.child));
 };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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

@@ -1,6 +1,14 @@
 import { omit, RcClasses } from '../../../../foundation';
 import { RcIconSizes } from '../../../Icon/utils';
-export var RcIconButtonClasses = RcClasses(['root', 'disabled', 'invisible', 'outline', 'contained', 'persistBg'], 'RcIconButton');
+export var RcIconButtonClasses = RcClasses([
+    'root',
+    'disabled',
+    'invisible',
+    'outline',
+    'contained',
+    'inverse',
+    'persistBg',
+], 'RcIconButton');
 export var RcIconButtonTouchRippleClasses = RcClasses(['ripplePulsate', 'child'], 'RcIconButtonTouchRipple');
 export var RcIconButtonSizes = omit(RcIconSizes, ['inherit']);
 export var RcIconButtonFocusVisibleInsetSize = {

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

@@ -3,24 +3,24 @@ 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, divProps = __rest(props, ["sounds", "volume", "muted", "classes", "onChange", "longPressDelay", "action", "persistBgTime", "control", "getDialPadButtonProps"]);
+    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({});
     var forkRef = useForkRef(containerRef, ref);
-    var _a = useRcDialerContext(), onInsertRef = _a.onInsertRef, dialPadActionRef = _a.dialPadActionRef;
+    var _b = useRcDialerContext(), onInsertRef = _b.onInsertRef, dialPadActionRef = _b.dialPadActionRef;
     var focusedIndexRef = useRef(0);
-    var _b = useOnlyOneFocusable({
+    var _c = useOnlyOneFocusable({
         focusedIndexRef: focusedIndexRef,
         containerRef: containerRef,
-    }), focusIndex = _b.focusIndex, getItemProps = _b.getItemProps, moveFocusedId = _b.moveFocusedId;
+    }), focusIndex = _c.focusIndex, getItemProps = _c.getItemProps, moveFocusedId = _c.moveFocusedId;
     var dialButtonKey = moveFocusedId + "-dial-button";
     var onKeyFocusedIndexHandle = useKeyboardMoveFocus({
         options: DIALER_PAD_ICONS,
@@ -64,11 +64,11 @@ var _RcDialPad = forwardRef(function (inProps, ref) {
     var handleKeyboardEffect = useDebounce(function (value, isKeyup) {
         var _a, _b;
         if (isKeyup) {
-            handleChange(value, 'keyboard');
+            handleChange(value, 'customKeyboard');
             var toIndex = ACCEPTABLE_KEYS.findIndex(function (x) { return x === value; });
             focusedIndexRef.current = toIndex;
             // * mean that current focus on that dialPad, move focus to dialPad container
-            if (((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.getAttribute(dialButtonKey)) !== null) {
+            if (((_a = externalWindow.document.activeElement) === null || _a === void 0 ? void 0 : _a.getAttribute(dialButtonKey)) !== null) {
                 (_b = hiddenRef.current) === null || _b === void 0 ? void 0 : _b.focus();
             }
         }
@@ -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/components/Dialer/DialTextField/DialTextField.js

@@ -8,9 +8,9 @@ import { DialTextFieldStyle } from './styles';
 import { getDialPadValueOnlyRegex, useFixedEndSelection } from './utils';
 var _RcDialTextField = forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'RcDialTextField' });
-    var children = props.children, value = props.value, onChange = props.onChange, onEmit = props.onEmit, onKeyPress = props.onKeyPress, onKeyDown = props.onKeyDown, onKeyUp = props.onKeyUp, inputRefProp = props.inputRef, inputPropsProp = props.inputProps, InputPropsProp = props.InputProps, onlyAllowKeypadValue = props.onlyAllowKeypadValue, keypadMode = props.keypadMode, rest = __rest(props, ["children", "value", "onChange", "onEmit", "onKeyPress", "onKeyDown", "onKeyUp", "inputRef", "inputProps", "InputProps", "onlyAllowKeypadValue", "keypadMode"]);
+    var children = props.children, value = props.value, onChange = props.onChange, onEmit = props.onEmit, onKeyPress = props.onKeyPress, onKeyDown = props.onKeyDown, onKeyUp = props.onKeyUp, inputRefProp = props.inputRef, inputPropsProp = props.inputProps, InputPropsProp = props.InputProps, onlyAllowKeypadValue = props.onlyAllowKeypadValue, keypadMode = props.keypadMode, _a = props.externalWindow, externalWindow = _a === void 0 ? window : _a, rest = __rest(props, ["children", "value", "onChange", "onEmit", "onKeyPress", "onKeyDown", "onKeyUp", "inputRef", "inputProps", "InputProps", "onlyAllowKeypadValue", "keypadMode", "externalWindow"]);
     var dialerContext = useRcDialerContext();
-    var _a = useFixedEndSelection(), inputRef = _a.ref, onKeypadModeFocus = _a.onFocus, onKeypadModeKeyDown = _a.onKeyDown, onKeypadModeClick = _a.onClick;
+    var _b = useFixedEndSelection(), inputRef = _b.ref, onKeypadModeFocus = _b.onFocus, onKeypadModeKeyDown = _b.onKeyDown, onKeypadModeClick = _b.onClick;
     var forkContextRef = useForkRef(dialerContext.inputRef, inputRef);
     var forkInputRef = useForkRef(inputRefProp, forkContextRef);
     var scrollToPositionRef = useRef();
@@ -18,7 +18,7 @@ var _RcDialTextField = forwardRef(function (inProps, ref) {
     var maxLength = keypadMode ? undefined : inputPropsProp === null || inputPropsProp === void 0 ? void 0 : inputPropsProp.maxLength;
     var checkNotReFocus = useEventCallback(function (reason, isFocus) {
         var elm = inputRef.current;
-        var isInputFocus = isFocus !== null && isFocus !== void 0 ? isFocus : document.activeElement === elm;
+        var isInputFocus = isFocus !== null && isFocus !== void 0 ? isFocus : externalWindow.document.activeElement === elm;
         if (reason !== 'click' && !isInputFocus) {
             // ! both keydown and touch, only when focus need re-focus
             isNotTriggerRefocusRef.current = true;
@@ -42,7 +42,7 @@ var _RcDialTextField = forwardRef(function (inProps, ref) {
     useImperativeHandle(dialerContext.onDeleteRef, function () { return function (e, reason) {
         var elm = inputRef.current;
         if (elm && (value === null || value === void 0 ? void 0 : value.length)) {
-            var isFocus = document.activeElement === elm;
+            var isFocus = externalWindow.document.activeElement === elm;
             var toPosition = void 0;
             var toValue = void 0;
             if (isFocus) {
@@ -71,14 +71,14 @@ var _RcDialTextField = forwardRef(function (inProps, ref) {
                 onChange === null || onChange === void 0 ? void 0 : onChange(toValue);
             }
         }
-    }; }, [checkNotReFocus, inputRef, onChange, value]);
+    }; }, [checkNotReFocus, externalWindow, inputRef, onChange, value]);
     /**
      * outside change value via this method, with check current input state
      */
     useImperativeHandle(dialerContext.onInsertRef, function () { return function (addValue, reason) {
         var elm = inputRef.current;
         if (elm) {
-            var isFocus = document.activeElement === elm;
+            var isFocus = externalWindow.document.activeElement === elm;
             var toPosition = void 0;
             var toValue = void 0;
             // * when keypadMode also add value at latest
@@ -104,6 +104,7 @@ var _RcDialTextField = forwardRef(function (inProps, ref) {
         }
     }; }, [
         checkNotReFocus,
+        externalWindow,
         inputRef,
         keypadMode,
         maxLength,

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';