@ringcentral/juno 2.12.3 → 2.13.1

package/components/Card/CardHoverActions/styles/CardHoverActionsStyle.js

@@ -12,6 +12,7 @@ exports.hoverTransition = function (_a) {
     });
 };
 exports.CardHoverActionsStyle = function () {
-    return foundation_1.css(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n    position: absolute;\n    right: 0;\n    top: 0;\n    padding: ", ";\n    transition: ", ";\n  "], ["\n    position: absolute;\n    right: 0;\n    top: 0;\n    padding: ", ";\n    transition: ", ";\n  "])), foundation_1.spacing(4), exports.hoverTransition);
+    return foundation_1.css(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n    position: absolute;\n    right: 0;\n    top: 0;\n    padding: ", ";\n    transition: ", ";\n    ", "\n    z-index: 1;\n  "], ["\n    position: absolute;\n    right: 0;\n    top: 0;\n    padding: ", ";\n    transition: ", ";\n    ",
+        "\n    z-index: 1;\n  "])), foundation_1.spacing(4), exports.hoverTransition, '' /* make sure `CardHoverActions` would not be covered by `CardActionArea`  */);
 };
 var templateObject_1;

package/components/Dialog/styles/DialogStyle.js

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

package/components/Dialog/utils/DialogUtils.js

@@ -1,7 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var foundation_1 = require("../../../foundation");
-exports.RcDialogClasses = foundation_1.RcClasses(['paper', 'root', 'paperFullScreen'], 'RcDialog');
+exports.RcDialogClasses = foundation_1.RcClasses([
+    'paper',
+    'root',
+    'paperFullScreen',
+    'paperWidthXs',
+    'paperScrollBody',
+    'paperFullScreen',
+], 'RcDialog');
 exports.RcDialogMaxWidths = {
     xsmall: '272px',
     small: null,

package/es6/components/Card/CardHoverActions/styles/CardHoverActionsStyle.js

@@ -10,6 +10,7 @@ export var hoverTransition = function (_a) {
     });
 };
 export var CardHoverActionsStyle = function () {
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: absolute;\n    right: 0;\n    top: 0;\n    padding: ", ";\n    transition: ", ";\n  "], ["\n    position: absolute;\n    right: 0;\n    top: 0;\n    padding: ", ";\n    transition: ", ";\n  "])), spacing(4), hoverTransition);
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: absolute;\n    right: 0;\n    top: 0;\n    padding: ", ";\n    transition: ", ";\n    ", "\n    z-index: 1;\n  "], ["\n    position: absolute;\n    right: 0;\n    top: 0;\n    padding: ", ";\n    transition: ", ";\n    ",
+        "\n    z-index: 1;\n  "])), spacing(4), hoverTransition, '' /* make sure `CardHoverActions` would not be covered by `CardActionArea`  */);
 };
 var templateObject_1;

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

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

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

@@ -1,5 +1,12 @@
 import { RcClasses } from '../../../foundation';
-export var RcDialogClasses = RcClasses(['paper', 'root', 'paperFullScreen'], 'RcDialog');
+export var RcDialogClasses = RcClasses([
+    'paper',
+    'root',
+    'paperFullScreen',
+    'paperWidthXs',
+    'paperScrollBody',
+    'paperFullScreen',
+], 'RcDialog');
 export var RcDialogMaxWidths = {
     xsmall: '272px',
     small: null,

package/foundation/hooks/useEventListener/useEventListener.d.ts

@@ -1,4 +1,3 @@
-import { SyntheticEvent } from 'react';
 import { RefOrElementOrCallback } from '../../utils';
 export declare type UseEventListenerAction = {
     listen: () => void;
@@ -12,5 +11,5 @@ export declare type UseEventListenerConfig = {
      */
     startImmediately?: boolean;
 };
-export declare function useEventListener<T = SyntheticEvent>(target: RefOrElementOrCallback | EventTarget, key: string, callback: (event?: T) => void, config?: UseEventListenerConfig): UseEventListenerAction;
-export declare function useEventListener<T = SyntheticEvent>(target: RefOrElementOrCallback | EventTarget, key: string, callback: (event?: T) => void, options?: AddEventListenerOptions | boolean, config?: UseEventListenerConfig): UseEventListenerAction;
+export declare function useEventListener<T = Event>(target: RefOrElementOrCallback | EventTarget, key: string, callback: (event: T) => void, config?: UseEventListenerConfig): UseEventListenerAction;
+export declare function useEventListener<T = Event>(target: RefOrElementOrCallback | EventTarget, key: string, callback: (event: T) => void, options?: AddEventListenerOptions | boolean, config?: UseEventListenerConfig): UseEventListenerAction;

package/package.json

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