@ringcentral/juno 2.12.4 → 2.14.0

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/components/Forms/Select/Select.js

@@ -16,7 +16,7 @@ var _RcSelect = react_1.forwardRef(function (inProps, ref) {
     var props = foundation_1.useThemeProps({ props: inProps, name: 'RcSelect' });
     var children = props.children, onChange = props.onChange, defaultValue = props.defaultValue, SelectInputPropsProp = props.SelectInputProps, MenuProps = props.MenuProps, textVariant = props.textVariant, placeholder = props.placeholder, renderValue = props.renderValue, displayEmpty = props.displayEmpty, variant = props.variant, size = props.size, value = props.value, virtualize = props.virtualize, 
     // * below is should pick into TextField props
-    focused = props.focused, gutterBottom = props.gutterBottom, helperText = props.helperText, color = props.color, label = props.label, id = props.id, className = props.className, validate = props.validate, InputProps = props.InputProps, required = props.required, fullWidth = props.fullWidth, disabled = props.disabled, error = props.error, rest = tslib_1.__rest(props, ["children", "onChange", "defaultValue", "SelectInputProps", "MenuProps", "textVariant", "placeholder", "renderValue", "displayEmpty", "variant", "size", "value", "virtualize", "focused", "gutterBottom", "helperText", "color", "label", "id", "className", "validate", "InputProps", "required", "fullWidth", "disabled", "error"]);
+    focused = props.focused, gutterBottom = props.gutterBottom, helperText = props.helperText, color = props.color, label = props.label, id = props.id, className = props.className, title = props.title, validate = props.validate, InputProps = props.InputProps, required = props.required, fullWidth = props.fullWidth, disabled = props.disabled, error = props.error, rest = tslib_1.__rest(props, ["children", "onChange", "defaultValue", "SelectInputProps", "MenuProps", "textVariant", "placeholder", "renderValue", "displayEmpty", "variant", "size", "value", "virtualize", "focused", "gutterBottom", "helperText", "color", "label", "id", "className", "title", "validate", "InputProps", "required", "fullWidth", "disabled", "error"]);
     var hasDefaultValue = foundation_1.hasValue(defaultValue);
     var nonValue = (!foundation_1.hasValue(value) && !hasDefaultValue) ||
         // * if that can't displayEmpty, and that value === '', same as no value
@@ -70,7 +70,7 @@ var _RcSelect = react_1.forwardRef(function (inProps, ref) {
     }, [InputProps, placeholder, nonValue, applyClasses, variant]);
     var valueIsNumber = typeof value === 'number';
     var currValue = valueIsNumber ? value : value || '';
-    return (react_1.default.createElement(utils_1.RcSelectTextField, { ref: ref, id: id, className: className, 
+    return (react_1.default.createElement(utils_1.RcSelectTextField, { ref: ref, id: id, className: className, title: title, 
         // for when that is select type that type will be select onChange, just any for ignore that
         onChange: onChange, color: color, select: true, focused: focused, gutterBottom: gutterBottom, helperText: helperText, label: label, 
         // when that has defaultValue, and that value always to be undefined

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/es6/components/Forms/Select/Select.js

@@ -14,7 +14,7 @@ var _RcSelect = forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'RcSelect' });
     var children = props.children, onChange = props.onChange, defaultValue = props.defaultValue, SelectInputPropsProp = props.SelectInputProps, MenuProps = props.MenuProps, textVariant = props.textVariant, placeholder = props.placeholder, renderValue = props.renderValue, displayEmpty = props.displayEmpty, variant = props.variant, size = props.size, value = props.value, virtualize = props.virtualize, 
     // * below is should pick into TextField props
-    focused = props.focused, gutterBottom = props.gutterBottom, helperText = props.helperText, color = props.color, label = props.label, id = props.id, className = props.className, validate = props.validate, InputProps = props.InputProps, required = props.required, fullWidth = props.fullWidth, disabled = props.disabled, error = props.error, rest = __rest(props, ["children", "onChange", "defaultValue", "SelectInputProps", "MenuProps", "textVariant", "placeholder", "renderValue", "displayEmpty", "variant", "size", "value", "virtualize", "focused", "gutterBottom", "helperText", "color", "label", "id", "className", "validate", "InputProps", "required", "fullWidth", "disabled", "error"]);
+    focused = props.focused, gutterBottom = props.gutterBottom, helperText = props.helperText, color = props.color, label = props.label, id = props.id, className = props.className, title = props.title, validate = props.validate, InputProps = props.InputProps, required = props.required, fullWidth = props.fullWidth, disabled = props.disabled, error = props.error, rest = __rest(props, ["children", "onChange", "defaultValue", "SelectInputProps", "MenuProps", "textVariant", "placeholder", "renderValue", "displayEmpty", "variant", "size", "value", "virtualize", "focused", "gutterBottom", "helperText", "color", "label", "id", "className", "title", "validate", "InputProps", "required", "fullWidth", "disabled", "error"]);
     var hasDefaultValue = hasValue(defaultValue);
     var nonValue = (!hasValue(value) && !hasDefaultValue) ||
         // * if that can't displayEmpty, and that value === '', same as no value
@@ -68,7 +68,7 @@ var _RcSelect = forwardRef(function (inProps, ref) {
     }, [InputProps, placeholder, nonValue, applyClasses, variant]);
     var valueIsNumber = typeof value === 'number';
     var currValue = valueIsNumber ? value : value || '';
-    return (React.createElement(RcSelectTextField, { ref: ref, id: id, className: className, 
+    return (React.createElement(RcSelectTextField, { ref: ref, id: id, className: className, title: title, 
         // for when that is select type that type will be select onChange, just any for ignore that
         onChange: onChange, color: color, select: true, focused: focused, gutterBottom: gutterBottom, helperText: helperText, label: label, 
         // when that has defaultValue, and that value always to be undefined

package/package.json

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