@ringcentral/juno 2.20.3 → 2.21.2

package/components/Buttons/IconButton/IconButton.js

@@ -17,7 +17,7 @@ var _RcIconButton = react_1.memo(react_1.forwardRef(function (inProps, ref) {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         foundation_1.useDeprecatedCheck(RcIconButton, props, IconButtonProps_1.rcIconButtonWarning);
     }
-    var _b = props.buttonRef, buttonRef = _b === void 0 ? ref : _b, _c = props.IconProps, IconProps = _c === void 0 ? {} : _c, 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 = tslib_1.__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 _b = props.buttonRef, buttonRef = _b === void 0 ? ref : _b, _c = props.IconProps, IconProps = _c === void 0 ? {} : _c, 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, href = props.href, rest = tslib_1.__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", "href"]);
     var theme = foundation_1.useTheme();
     var isOutline = variant === 'outline';
     var isContained = variant === 'contained';

package/components/Buttons/IconButton/deprecated/IconButtonProps.d.ts

@@ -45,8 +45,6 @@ declare type RcIconButtonProps = RcIconButtonBaseProps & {
     as?: ElementType | keyof JSX.IntrinsicElements;
 } & RcIconButtonDeprecatedProps & RcBaseProps<RcIconProps, 'color' | 'children' | 'size'>;
 declare type RcIconButtonDeprecatedProps = {
-    /** @deprecated don't have any logic below, now need anymore */
-    autoFocus?: boolean;
     /**
      * @deprecated
      * enable tooltip even button is disabled. default with false

package/components/Downshift/Downshift.js

@@ -307,7 +307,7 @@ var _RcDownshift = react_1.memo(react_1.forwardRef(function (inProps, ref) {
                 maxLength: maxLength, containerRef: inputContainerRef }, getInputAriaProps(TextFieldProps === null || TextFieldProps === void 0 ? void 0 : TextFieldProps.inputProps)),
         }, rest), { value: inputValue, clearBtn: false })),
         !helperText && screenReaderText && (react_1.default.createElement(VisuallyHidden_1.RcVisuallyHidden, { id: describedbyId }, screenReaderText)),
-        react_1.default.createElement(styles_1.StyledPopper, tslib_1.__assign({ open: open, position: position, component: PopperComponent, placement: "bottom-start", anchorEl: anchorElRef.current, "data-test-automation-id": "suggestions-list", popperRef: popperRef, 
+        react_1.default.createElement(styles_1.StyledPopper, tslib_1.__assign({ open: open, position: position, component: PopperComponent, placement: "bottom-start", anchorEl: anchorElRef.current, "data-test-automation-id": "suggestions-list", popperRef: popperRef, modifiers: { fixOffsets: utils_1.fixOffsetsModifer }, 
             // * view type in popper.js
             popperOptions: {
                 onUpdate: function (e) {

package/components/Downshift/utils/fixOffsetsModifer.d.ts

@@ -0,0 +1,5 @@
+export declare const fixOffsetsModifer: {
+    order: number;
+    enabled: boolean;
+    fn: (data: any) => any;
+};

package/components/Downshift/utils/fixOffsetsModifer.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+exports.fixOffsetsModifer = {
+    order: 890,
+    enabled: true,
+    fn: function (data) {
+        var e_1, _a;
+        try {
+            for (var _b = tslib_1.__values([
+                'transform',
+                'msTransform',
+                'WebkitTransform',
+                'MozTransform',
+                'OTransform',
+            ]), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var property = _c.value;
+                var tranformValue = data.styles[property];
+                if (tranformValue) {
+                    var matchValue = tranformValue.match(/translate3d\((\d+)px, (\d+)px, 0\)/);
+                    if (matchValue) {
+                        var dpr = window.devicePixelRatio;
+                        var x = Math.round(Number(matchValue[1]) * dpr) / dpr;
+                        var y = Math.round(Number(matchValue[2]) * dpr) / dpr;
+                        data.styles.transform = "translate3d(" + x + "px, " + y + "px, 0)";
+                    }
+                }
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+        return data;
+    },
+};

package/components/Downshift/utils/index.d.ts

@@ -5,3 +5,4 @@ export * from './useDownshift';
 export * from './useDownshiftError';
 export * from './useDownshiftGroup';
 export * from './useDownshiftTag';
+export * from './fixOffsetsModifer';

package/components/Downshift/utils/index.js

@@ -6,3 +6,4 @@ tslib_1.__exportStar(require("./useDownshift"), exports);
 tslib_1.__exportStar(require("./useDownshiftError"), exports);
 tslib_1.__exportStar(require("./useDownshiftGroup"), exports);
 tslib_1.__exportStar(require("./useDownshiftTag"), exports);
+tslib_1.__exportStar(require("./fixOffsetsModifer"), exports);

package/components/Downshift/utils/useDownshiftTag.js

@@ -187,10 +187,12 @@ exports.useDownshiftTag = function (_a) {
                 }
             },
             onDelete: function (e) {
+                var _a;
                 // * left button clicked
                 if (e.button === 0) {
                     removeTag(selectedItem);
                     setFocused(false);
+                    (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
                 }
             },
         }, restTagProps);

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, _c = props.IconProps, IconProps = _c === void 0 ? {} : _c, 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 _b = props.buttonRef, buttonRef = _b === void 0 ? ref : _b, _c = props.IconProps, IconProps = _c === void 0 ? {} : _c, 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, 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", "href"]);
     var theme = useTheme();
     var isOutline = variant === 'outline';
     var isContained = variant === 'contained';

package/es6/components/Downshift/Downshift.js

@@ -9,7 +9,7 @@ import { ClearIconButton } from '../Forms/TextField/styles/ClearIconButton';
 import { RcVisuallyHidden } from '../VisuallyHidden';
 import { ArrowDownButton, DownshiftStyle, EndAdornment, RcDownshiftInput, StyledPopper, StyledTextField, } from './styles';
 import { RcSuggestionList } from './SuggestionList';
-import { DEFAULT_GET_OPTION_LABEL, DEFAULT_KEY_TO_CHIPS, DEFAULT_LIMIT_CHIPS, RcDownshiftDefaultFilterOptions, RcDownshiftInputClasses, useDownshift, useDownshiftError, } from './utils';
+import { DEFAULT_GET_OPTION_LABEL, DEFAULT_KEY_TO_CHIPS, DEFAULT_LIMIT_CHIPS, fixOffsetsModifer, RcDownshiftDefaultFilterOptions, RcDownshiftInputClasses, useDownshift, useDownshiftError, } from './utils';
 /**
  * default transition style for grow when not virtualize
  */
@@ -303,7 +303,7 @@ var _RcDownshift = memo(forwardRef(function (inProps, ref) {
                 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({ open: open, position: position, component: PopperComponent, placement: "bottom-start", anchorEl: anchorElRef.current, "data-test-automation-id": "suggestions-list", popperRef: popperRef, 
+        React.createElement(StyledPopper, __assign({ open: open, position: position, component: PopperComponent, placement: "bottom-start", anchorEl: anchorElRef.current, "data-test-automation-id": "suggestions-list", popperRef: popperRef, modifiers: { fixOffsets: fixOffsetsModifer }, 
             // * view type in popper.js
             popperOptions: {
                 onUpdate: function (e) {

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

@@ -0,0 +1,37 @@
+import { __values } from "tslib";
+export var fixOffsetsModifer = {
+    order: 890,
+    enabled: true,
+    fn: function (data) {
+        var e_1, _a;
+        try {
+            for (var _b = __values([
+                'transform',
+                'msTransform',
+                'WebkitTransform',
+                'MozTransform',
+                'OTransform',
+            ]), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var property = _c.value;
+                var tranformValue = data.styles[property];
+                if (tranformValue) {
+                    var matchValue = tranformValue.match(/translate3d\((\d+)px, (\d+)px, 0\)/);
+                    if (matchValue) {
+                        var dpr = window.devicePixelRatio;
+                        var x = Math.round(Number(matchValue[1]) * dpr) / dpr;
+                        var y = Math.round(Number(matchValue[2]) * dpr) / dpr;
+                        data.styles.transform = "translate3d(" + x + "px, " + y + "px, 0)";
+                    }
+                }
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+        return data;
+    },
+};

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

@@ -3,3 +3,4 @@ export * from './useDownshift';
 export * from './useDownshiftError';
 export * from './useDownshiftGroup';
 export * from './useDownshiftTag';
+export * from './fixOffsetsModifer';

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

@@ -185,10 +185,12 @@ export var useDownshiftTag = function (_a) {
                 }
             },
             onDelete: function (e) {
+                var _a;
                 // * left button clicked
                 if (e.button === 0) {
                     removeTag(selectedItem);
                     setFocused(false);
+                    (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
                 }
             },
         }, restTagProps);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ringcentral/juno",
-  "version": "2.20.3",
+  "version": "2.21.2",
   "author": "RingCentral",
   "license": "MIT",
   "main": "./index.js",