@ringcentral/juno 2.32.0 → 2.34.0

package/es6/components/Badge/Badge.js

@@ -5,8 +5,7 @@ import MuiBadge from '@material-ui/core/Badge';
 import { capitalize } from '@material-ui/core/utils';
 import { combineClasses, combineProps, logInDev, styled, useChange, useForkRef, useThemeProps, } from '../../foundation';
 import { RcBox } from '../Box';
-import { RcPresence } from '../Presence';
-import { BadgeStyle } from './styles';
+import { BadgeStyle, DefaultDotComponent } from './styles';
 import { RcBadgeClasses, useRoundBadgeOffset } from './utils';
 var _RcBadge = forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'RcBadge' });
@@ -41,7 +40,7 @@ var _RcBadge = forwardRef(function (inProps, ref) {
                 var OmitChildren = _a.children, rest = __rest(_a, ["children"]);
                 var _b = anchorOrigin, horizontal = _b.horizontal, vertical = _b.vertical;
                 var addClassName = "MuiBadge-anchorOrigin" + capitalize(vertical) + capitalize(horizontal) + capitalize(overlap);
-                var DotComponent = dotComponent !== null && dotComponent !== void 0 ? dotComponent : RcPresence;
+                var DotComponent = dotComponent !== null && dotComponent !== void 0 ? dotComponent : DefaultDotComponent;
                 var applyDotProps = combineProps({ className: clsx(addClassName, RcBadgeClasses.badge) }, dotProps);
                 return (React.createElement("div", __assign({}, rest, { ref: ref }),
                     children,

package/es6/components/Badge/styles/BadgeStyle.js

@@ -1,5 +1,5 @@
 import { __makeTemplateObject } from "tslib";
-import { css, fakeBorder, getParsePaletteColor, } from '../../../foundation';
+import { css, fakeBorder, getParsePaletteColor, palette2, styled, } from '../../../foundation';
 import { RcBadgeClasses, roundBadgeMarginKey } from '../utils';
 export var BadgeStyle = function (_a) {
     var badgeContent = _a.badgeContent, overlap = _a.overlap, variant = _a.variant, textColor = _a.textColor, borderColor = _a.borderColor, max = _a.max, color = _a.color;
@@ -19,4 +19,5 @@ export var BadgeStyle = function (_a) {
         ? fakeBorder({ color: borderCurrColor, radius: 'round' })
         : css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n              border-color: ", ";\n            "], ["\n              border-color: ", ";\n            "])), borderCurrColor)), isStandard && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        height: 18px;\n        min-width: 18px;\n        padding: ", ";\n      "], ["\n        height: 18px;\n        min-width: 18px;\n        padding: ", ";\n      "])), !manyChar && 0), overlapNone && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        position: unset;\n        transform: unset;\n\n        &.", " {\n          transform: scale(0);\n        }\n      "], ["\n        position: unset;\n        transform: unset;\n\n        &.", " {\n          transform: scale(0);\n        }\n      "])), RcBadgeClasses.invisible));
 };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+export var DefaultDotComponent = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  border-radius: 50%;\n  width: 8px;\n  height: 8px;\n  border: 2px solid ", ";\n"], ["\n  border-radius: 50%;\n  width: 8px;\n  height: 8px;\n  border: 2px solid ", ";\n"])), palette2('neutral', 'l01'));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/es6/components/Presence/Presence.js

@@ -1,25 +1,39 @@
-import { __assign, __makeTemplateObject } from "tslib";
-import React, { forwardRef, useMemo } from 'react';
+import { __assign, __makeTemplateObject, __rest } from "tslib";
+import React, { forwardRef } from 'react';
 import { styled, useThemeProps, } from '../../foundation';
 import { RcIcon } from '../Icon';
-import { Attended, Unattended } from './assets';
-import { StyledDND, StyledPresence } from './styles';
+import { Unattended, Dnd, Check, Offline, Default } from './assets';
+import { StyledPresence, PresenceContainer } from './styles';
+import { RcPresenceColors, RcPresenceSizes } from './utils';
 var _RcPresence = forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'RcPresence' });
-    var type = props.type, size = props.size;
-    var innerChildren = useMemo(function () {
+    var type = props.type, color = props.color, size = props.size, borderSize = props.borderSize, rest = __rest(props, ["type", "color", "size", "borderSize"]);
+    var sizeProps = {
+        iconSizeValue: RcPresenceSizes[size][0],
+        borderSizeValue: RcPresenceSizes[borderSize || size][1],
+        borderSize: borderSize,
+        type: type,
+    };
+    var symbol = (function () {
         switch (type) {
             case 'DND':
-                return React.createElement(StyledDND, { size: size });
+                return Dnd;
+            case 'available':
             case 'attended':
-                return React.createElement(RcIcon, { symbol: Attended, color: "neutral.f01", size: "inherit" });
+                return Check;
             case 'unAttended':
-                return (React.createElement(RcIcon, { symbol: Unattended, color: "neutral.f01", size: "inherit" }));
+                return Unattended;
+            case 'offline':
+            case 'unavailable':
+            case 'notReady':
+                return Offline;
             default:
-                return null;
+                return Default;
         }
-    }, [size, type]);
-    return (React.createElement(StyledPresence, __assign({ ref: ref }, props), innerChildren));
+    })();
+    return (React.createElement(PresenceContainer, __assign({ ref: ref }, sizeProps, rest),
+        React.createElement(StyledPresence, __assign({}, sizeProps, { color: color }),
+            React.createElement(RcIcon, { symbol: symbol, color: color || RcPresenceColors[type], size: "inherit" }))));
 });
 /** @release */
 var RcPresence = styled(_RcPresence)(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));

package/es6/components/Presence/assets/Check.js

@@ -0,0 +1,7 @@
+import { __assign } from "tslib";
+import React, { forwardRef, memo } from 'react';
+var Check = memo(forwardRef(function (props, svgRef) { return (React.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", ref: svgRef }, props),
+    React.createElement("path", { id: "Shape", d: "M16,0A16,16,0,1,0,32,16,16,16,0,0,0,16,0Zm8.62,10.38L17.51,23.72A2.19,2.19,0,0,1,16,24.89h-.41a2.17,2.17,0,0,1-1.37-.53L8,19a2.22,2.22,0,0,1,2.38-3.7,1.76,1.76,0,0,1,.39.32L14.9,19.2,20.71,8.3a2.21,2.21,0,0,1,2.95-1.06,2.15,2.15,0,0,1,1.15,1.25,2.23,2.23,0,0,1-.08,1.7l-.11.21Z" }))); }));
+Check.displayName = 'Check';
+Check['iconName'] = 'check';
+export default Check;

package/es6/components/Presence/assets/Default.js

@@ -0,0 +1,7 @@
+import { __assign } from "tslib";
+import React, { forwardRef, memo } from 'react';
+var Default = memo(forwardRef(function (props, svgRef) { return (React.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", ref: svgRef }, props),
+    React.createElement("circle", { cx: "16", cy: "16", r: "16" }))); }));
+Default.displayName = 'Default';
+Default['iconName'] = 'default';
+export default Default;

package/es6/components/Presence/assets/Dnd.js

@@ -0,0 +1,7 @@
+import { __assign } from "tslib";
+import React, { forwardRef, memo } from 'react';
+var Dnd = memo(forwardRef(function (props, svgRef) { return (React.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", ref: svgRef }, props),
+    React.createElement("path", { d: "M16,0A16,16,0,1,0,32,16,16,16,0,0,0,16,0Zm8.44,18.22H7.56a2.22,2.22,0,1,1,0-4.44H24.44a2.22,2.22,0,1,1,0,4.44Z" }))); }));
+Dnd.displayName = 'Dnd';
+Dnd['iconName'] = 'dnd';
+export default Dnd;

package/es6/components/Presence/assets/Offline.js

@@ -0,0 +1,7 @@
+import { __assign } from "tslib";
+import React, { forwardRef, memo } from 'react';
+var Offline = memo(forwardRef(function (props, svgRef) { return (React.createElement("svg", __assign({ viewBox: "0 0 32 32", ref: svgRef }, props),
+    React.createElement("path", { d: "M16,0A16,16,0,1,0,32,16,16,16,0,0,0,16,0Zm0,27.2A11.2,11.2,0,1,1,27.2,16,11.19,11.19,0,0,1,16,27.2Z" }))); }));
+Offline.displayName = 'Offline';
+Offline['iconName'] = 'offline';
+export default Offline;

package/es6/components/Presence/assets/Unattended.js

@@ -1,7 +1,7 @@
 import { __assign } from "tslib";
 import React, { forwardRef, memo } from 'react';
 var Unattended = memo(forwardRef(function (props, svgRef) { return (React.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", ref: svgRef }, props),
-    React.createElement("path", { d: "M24.27 2L16 10.271 7.73 2 2 7.73 10.271 16 2 24.27 7.73 30 16 21.729 24.27 30 30 24.27 21.729 16 30 7.73z" }))); }));
+    React.createElement("path", { d: "M16,0A16,16,0,1,0,32,16,16,16,0,0,0,16,0Zm7.54,20.39a2.23,2.23,0,0,1-3.15,3.15h0L16,19.15l-4.39,4.39a2.23,2.23,0,0,1-3.15-3.15h0L12.85,16,8.46,11.61a2.23,2.23,0,0,1,3.15-3.15L16,12.85l4.39-4.39a2.23,2.23,0,0,1,3.15,3.15h0L19.15,16Z" }))); }));
 Unattended.displayName = 'Unattended';
 Unattended['iconName'] = 'unattended';
 export default Unattended;

package/es6/components/Presence/assets/index.js

@@ -1,2 +1,5 @@
-export { default as Attended } from './Attended';
 export { default as Unattended } from './Unattended';
+export { default as Check } from './Check';
+export { default as Default } from './Default';
+export { default as Offline } from './Offline';
+export { default as Dnd } from './Dnd';

package/es6/components/Presence/styles/StyledPresence.js

@@ -1,22 +1,28 @@
 import { __assign, __makeTemplateObject, __rest } from "tslib";
 import React, { forwardRef } from 'react';
-import { css, getParsePaletteColor, palette2, px, styled, } from '../../../foundation';
+import { css, getParsePaletteColor, palette2, styled, fakeBorder, } from '../../../foundation';
 import { RcIcon } from '../../Icon';
-import { RcPresenceAvailableIconSizes, RcPresenceColors, RcPresenceSizes, } from '../utils';
+import { RcPresenceBackgroundColors } from '../utils';
+export var PresenceContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ",
+    "\n"])), function (_a) {
+    var iconSizeValue = _a.iconSizeValue, borderSizeValue = _a.borderSizeValue;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      display: flex;\n      justify-content: center;\n      width: ", "px;\n      height: ", "px;\n      padding: ", "px;\n    "], ["\n      display: flex;\n      justify-content: center;\n      width: ", "px;\n      height: ", "px;\n      padding: ", "px;\n    "])), iconSizeValue, iconSizeValue, borderSizeValue);
+});
 export var _StyledPresence = forwardRef(function (_a, ref) {
-    var color = _a.color, borderSize = _a.borderSize, type = _a.type, size = _a.size, rest = __rest(_a, ["color", "borderSize", "type", "size"]);
-    return (React.createElement("div", __assign({ ref: ref }, rest)));
+    var color = _a.color, type = _a.type, rest = __rest(_a, ["color", "type"]);
+    return React.createElement("div", __assign({ ref: ref }, rest));
 });
-export var StyledPresence = styled(_StyledPresence)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-shrink: 0;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  box-sizing: content-box;\n\n  ", ";\n"], ["\n  display: flex;\n  flex-shrink: 0;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  box-sizing: content-box;\n\n  ",
+export var StyledPresence = styled(_StyledPresence)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-shrink: 0;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  box-sizing: content-box;\n\n  ", ";\n"], ["\n  display: flex;\n  flex-shrink: 0;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  box-sizing: content-box;\n\n  ",
     ";\n"])), function (_a) {
-    var size = _a.size, borderSize = _a.borderSize, type = _a.type, color = _a.color;
-    var sizeValue = px(RcPresenceSizes[size][0]);
-    var availableSize = RcPresenceAvailableIconSizes[size];
-    var iconSizeValue = px(availableSize[0]);
-    var scaleRate = availableSize[1];
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      width: ", ";\n      height: ", ";\n      border: ", "px solid\n        ", ";\n      background: ", ";\n\n      ", " {\n        transform: ", ";\n\n        svg {\n          width: ", ";\n          height: ", ";\n        }\n      }\n    "], ["\n      width: ", ";\n      height: ", ";\n      border: ", "px solid\n        ", ";\n      background: ",
-        ";\n\n      ", " {\n        transform: ", ";\n\n        svg {\n          width: ", ";\n          height: ", ";\n        }\n      }\n    "])), sizeValue, sizeValue, RcPresenceSizes[borderSize || size][1], palette2('neutral', 'l01'), color
+    var type = _a.type, iconSizeValue = _a.iconSizeValue, borderSizeValue = _a.borderSizeValue, color = _a.color;
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      width: ", "px;\n      height: ", "px;\n      background: ", ";\n      ", ";\n      ", " {\n        svg {\n          width: ", "px;\n          height: ", "px;\n        }\n      }\n    "], ["\n      width: ", "px;\n      height: ", "px;\n      background: ",
+        ";\n      ",
+        ";\n      ", " {\n        svg {\n          width: ", "px;\n          height: ", "px;\n        }\n      }\n    "])), iconSizeValue, iconSizeValue, color
         ? getParsePaletteColor(color)
-        : RcPresenceColors[type], RcIcon, scaleRate && "scale(" + scaleRate + ")", iconSizeValue, iconSizeValue);
+        : RcPresenceBackgroundColors[type] || palette2('neutral', 'l01'), fakeBorder({
+        inset: false,
+        color: palette2('neutral', 'l01'),
+        size: borderSizeValue,
+    }), RcIcon, iconSizeValue, iconSizeValue);
 });
-var templateObject_1, templateObject_2;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/es6/components/Presence/styles/index.js

@@ -1,2 +1 @@
-export * from './StyledDND';
 export * from './StyledPresence';

package/es6/components/Presence/utils/RcPresenceUtils.js

@@ -2,30 +2,11 @@ import { palette2 } from '../../../foundation';
 // first is width, second is border
 export var RcPresenceSizes = {
     xxsmall: [8, 1],
-    xsmall: [8, 2],
+    xsmall: [10, 1],
     small: [10, 2],
-    medium: [10, 3],
-    large: [14, 3],
-    xlarge: [18, 3],
-};
-// width, height
-export var RcPresenceInnerIconSizes = {
-    xxsmall: [4, 2],
-    xsmall: [6, 2],
-    small: [6, 2],
-    medium: [6, 2],
-    large: [10, 4],
-    xlarge: [14, 4],
-};
-// use scale rate to make that be odd value
-// width, scaleRate
-export var RcPresenceAvailableIconSizes = {
-    xxsmall: [10, 0.5],
-    xsmall: [10, 0.5],
-    small: [6, undefined],
-    medium: [6, undefined],
-    large: [10, undefined],
-    xlarge: [12, undefined],
+    medium: [12, 2],
+    large: [16, 2],
+    xlarge: [20, 2],
 };
 var presenceOn = palette2('presence', 'available');
 var presenceBusy = palette2('presence', 'busy');
@@ -45,3 +26,17 @@ export var RcPresenceColors = {
     notReady: presenceOff,
     offline: presenceOff,
 };
+export var RcPresenceBackgroundColors = {
+    // positive
+    available: '#FFFFFF',
+    attended: '#FFFFFF',
+    // negative
+    unAttended: '#FFFFFF',
+    onCall: '#FFFFFF',
+    inMeeting: '#FFFFFF',
+    DND: '#FFFFFF',
+    busy: '#FFFFFF',
+    unavailable: palette2('neutral', 'l01'),
+    notReady: palette2('neutral', 'l01'),
+    offline: palette2('neutral', 'l01'),
+};

package/es6/components/Tabs/TabList/TabList.js

@@ -18,13 +18,15 @@ var _RcTabList = forwardRef(function (inProps, ref) {
     if (context === null) {
         throw new TypeError('[RcTabList] No TabContext provided');
     }
-    var children = React.Children.map(childrenProp, function (child) {
-        var value = child.props.value;
-        return React.cloneElement(child, {
-            'aria-controls': getPanelId(context, value),
-            id: getTabId(context, value),
+    var children = useMemo(function () {
+        return React.Children.map(childrenProp, function (child) {
+            var value = child.props.value;
+            return React.cloneElement(child, {
+                'aria-controls': getPanelId(context, value),
+                id: getTabId(context, value),
+            });
         });
-    });
+    }, [childrenProp, context]);
     return (React.createElement(RcTabs, __assign({}, rest, { ref: ref, classes: classes, value: context.value }), children));
 });
 var RcTabList = styled(_RcTabList)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), TabListStyle);

package/es6/components/Tabs/Tabs/MoreMenuTab/MoreMenuTab.js

@@ -7,7 +7,6 @@ import { RcListItemIcon, RcListItemText } from '../../../List';
 import { RcMenu, RcMenuItem, } from '../../../Menu';
 import { RcTooltip } from '../../../Tooltip';
 import { RcTab } from '../../Tab';
-import { getKey } from '../MoreMenuTabs/utils';
 import { MoreMenuTabStyle } from './styles';
 var DEFAULT_MORE_MENU_TAB_LABEL = 'more_menu_tab';
 var _MoreMenuTab = forwardRef(function (props, ref) {
@@ -15,13 +14,23 @@ var _MoreMenuTab = forwardRef(function (props, ref) {
     var menuIdProp = MenuProps.id, onMenuCloseProp = MenuProps.onClose, MenuPropsRest = __rest(MenuProps, ["id", "onClose"]);
     var menuId = useId(menuIdProp);
     var _c = __read(useState(null), 2), anchorEl = _c[0], setAnchorEl = _c[1];
-    var MoreIcon = useMemo(function () {
-        var Icon = MoreIconProp || (React.createElement(RcIcon, { size: "medium", color: "neutral.f04", symbol: MoreHorizIcon }));
+    var open = Boolean(anchorEl);
+    var MoreIcon = (function () {
+        var Icon;
+        if (!MoreIconProp) {
+            Icon = (React.createElement(RcIcon, { size: "medium", color: "neutral.f04", symbol: MoreHorizIcon }));
+        }
+        else if (typeof MoreIconProp === 'function') {
+            Icon = MoreIconProp(open);
+        }
+        else {
+            Icon = MoreIconProp;
+        }
         if (TooltipProps === null || TooltipProps === void 0 ? void 0 : TooltipProps.title) {
             return React.createElement(RcTooltip, __assign({}, TooltipProps), Icon);
         }
         return Icon;
-    }, [MoreIconProp, TooltipProps]);
+    })();
     var handleTabClick = useEventCallback(function (event) {
         setAnchorEl(event.currentTarget);
     });
@@ -33,20 +42,20 @@ var _MoreMenuTab = forwardRef(function (props, ref) {
         if (!menuItems || menuItems.length === 0) {
             return null;
         }
-        return menuItems.map(function (item, idx) {
-            var icon = item.icon, label = item.label, value = item.value, disabled = item.disabled, onClick = item.onClick, selected = item.selected, menuItemRest = __rest(item, ["icon", "label", "value", "disabled", "onClick", "selected"]);
+        return menuItems.map(function (item) {
+            var icon = item.icon, label = item.label, value = item.value, disabled = item.disabled, onClick = item.onClick, selected = item.selected, key = item.key, menuItemRest = __rest(item, ["icon", "label", "value", "disabled", "onClick", "selected", "key"]);
             var handleClick = function (event) {
                 onChange === null || onChange === void 0 ? void 0 : onChange(event, value);
                 onClick === null || onClick === void 0 ? void 0 : onClick(event);
             };
-            return (React.createElement(MenuItemComponent, { key: getKey(menuItemRest.key, idx), disabled: disabled, selected: selected, value: value, onClick: handleClick, "data-test-automation-id": menuItemRest['data-test-automation-id'] },
+            return (React.createElement(MenuItemComponent, { key: key, disabled: disabled, selected: selected, value: value, onClick: handleClick, "data-test-automation-id": menuItemRest['data-test-automation-id'] },
                 icon ? React.createElement(RcListItemIcon, null, icon) : null,
                 React.createElement(RcListItemText, { primary: label || value })));
         });
     }, [MenuItemComponent, menuItems, onChange]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(RcTab, __assign({}, rest, { ref: ref, onClick: handleTabClick, label: MoreIcon, value: DEFAULT_MORE_MENU_TAB_LABEL, "aria-haspopup": "true", "aria-controls": menuId })),
-        React.createElement(RcMenu, __assign({ autoClose: true }, MenuPropsRest, { id: menuId, anchorEl: anchorEl, open: Boolean(anchorEl), variant: "menu", onClose: handleMenuClose }), MenuList)));
+        React.createElement(RcTab, __assign({}, rest, { ref: ref, onClick: handleTabClick, label: MoreIcon, value: DEFAULT_MORE_MENU_TAB_LABEL, "aria-haspopup": "true", "aria-controls": menuId, "data-tab-more-button": "" })),
+        React.createElement(RcMenu, __assign({ autoClose: true }, MenuPropsRest, { id: menuId, anchorEl: anchorEl, open: open, variant: "menu", onClose: handleMenuClose }), MenuList)));
 });
 /** inner component */
 var MoreMenuTab = styled(_MoreMenuTab)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), MoreMenuTabStyle);

package/es6/components/Tabs/Tabs/MoreMenuTabs/MoreMenuTabSentinel.js

@@ -0,0 +1,6 @@
+import React, { forwardRef } from 'react';
+export var MoreMenuTabSentinel = forwardRef(function (props, ref) {
+    var onFocus = props.onFocus, id = props.id;
+    return (React.createElement("div", { ref: ref, "aria-hidden": true, style: { position: 'absolute', top: 0, left: 0, height: 0, width: 0 }, tabIndex: -1, "data-tab-sentinel": id, onFocus: onFocus }));
+});
+MoreMenuTabSentinel.displayName = 'MoreMenuTabSentinel';