@ringcentral/juno 2.31.0-hotfix.2 → 2.31.0-hotfix.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/components/Badge/Badge.js +1 -2
  2. package/components/Badge/styles/BadgeStyle.d.ts +3 -0
  3. package/components/Badge/styles/BadgeStyle.js +2 -1
  4. package/components/Presence/Presence.js +3 -3
  5. package/components/Presence/styles/StyledPresence.js +10 -5
  6. package/components/Tabs/TabList/TabList.js +8 -6
  7. package/components/Tabs/Tabs/MoreMenuTab/MoreMenuTab.d.ts +1 -1
  8. package/components/Tabs/Tabs/MoreMenuTab/MoreMenuTab.js +14 -4
  9. package/es6/components/Badge/Badge.js +2 -3
  10. package/es6/components/Badge/styles/BadgeStyle.js +3 -2
  11. package/es6/components/Presence/Presence.js +4 -4
  12. package/es6/components/Presence/styles/StyledPresence.js +11 -6
  13. package/es6/components/Tabs/TabList/TabList.js +8 -6
  14. package/es6/components/Tabs/Tabs/MoreMenuTab/MoreMenuTab.js +14 -4
  15. package/package.json +1 -1
package/components/Badge/Badge.js CHANGED
@@ -7,7 +7,6 @@ var Badge_1 = tslib_1.__importDefault(require("@material-ui/core/Badge"));
7
7
  var utils_1 = require("@material-ui/core/utils");
8
8
  var foundation_1 = require("../../foundation");
9
9
  var Box_1 = require("../Box");
10
- var Presence_1 = require("../Presence");
11
10
  var styles_1 = require("./styles");
12
11
  var utils_2 = require("./utils");
13
12
  var _RcBadge = react_1.forwardRef(function (inProps, ref) {
@@ -43,7 +42,7 @@ var _RcBadge = react_1.forwardRef(function (inProps, ref) {
43
42
  var OmitChildren = _a.children, rest = tslib_1.__rest(_a, ["children"]);
44
43
  var _b = anchorOrigin, horizontal = _b.horizontal, vertical = _b.vertical;
45
44
  var addClassName = "MuiBadge-anchorOrigin" + utils_1.capitalize(vertical) + utils_1.capitalize(horizontal) + utils_1.capitalize(overlap);
46
- var DotComponent = dotComponent !== null && dotComponent !== void 0 ? dotComponent : Presence_1.RcPresence;
45
+ var DotComponent = dotComponent !== null && dotComponent !== void 0 ? dotComponent : styles_1.DefaultDotComponent;
47
46
  var applyDotProps = foundation_1.combineProps({ className: clsx_1.default(addClassName, utils_2.RcBadgeClasses.badge) }, dotProps);
48
47
  return (react_1.default.createElement("div", tslib_1.__assign({}, rest, { ref: ref }),
49
48
  children,
package/components/Badge/styles/BadgeStyle.d.ts CHANGED
@@ -1,3 +1,6 @@
1
+ /// <reference types="react" />
2
+ /// <reference types="styled-jsx" />
1
3
  import { RcThemedStyled } from '../../../foundation';
2
4
  import { RcBadgeProps } from '../Badge';
3
5
  export declare const BadgeStyle: RcThemedStyled<RcBadgeProps, any>;
6
+ export declare const DefaultDotComponent: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("../../../foundation").RcTheme, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
package/components/Badge/styles/BadgeStyle.js CHANGED
@@ -21,4 +21,5 @@ exports.BadgeStyle = function (_a) {
21
21
  ? foundation_1.fakeBorder({ color: borderCurrColor, radius: 'round' })
22
22
  : foundation_1.css(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n border-color: ", ";\n "], ["\n border-color: ", ";\n "])), borderCurrColor)), isStandard && foundation_1.css(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n height: 18px;\n min-width: 18px;\n padding: ", ";\n "], ["\n height: 18px;\n min-width: 18px;\n padding: ", ";\n "])), !manyChar && 0), overlapNone && foundation_1.css(templateObject_4 || (templateObject_4 = tslib_1.__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 "])), utils_1.RcBadgeClasses.invisible));
23
23
  };
24
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
24
+ exports.DefaultDotComponent = foundation_1.styled.div(templateObject_6 || (templateObject_6 = tslib_1.__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"])), foundation_1.palette2('neutral', 'l01'));
25
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
package/components/Presence/Presence.js CHANGED
@@ -9,7 +9,7 @@ var styles_1 = require("./styles");
9
9
  var utils_1 = require("./utils");
10
10
  var _RcPresence = react_1.forwardRef(function (inProps, ref) {
11
11
  var props = foundation_1.useThemeProps({ props: inProps, name: 'RcPresence' });
12
- var type = props.type, color = props.color, size = props.size, borderSize = props.borderSize;
12
+ var type = props.type, color = props.color, size = props.size, borderSize = props.borderSize, rest = tslib_1.__rest(props, ["type", "color", "size", "borderSize"]);
13
13
  var sizeProps = {
14
14
  iconSizeValue: utils_1.RcPresenceSizes[size][0],
15
15
  borderSizeValue: utils_1.RcPresenceSizes[borderSize || size][1],
@@ -33,8 +33,8 @@ var _RcPresence = react_1.forwardRef(function (inProps, ref) {
33
33
  return assets_1.Default;
34
34
  }
35
35
  })();
36
- return (react_1.default.createElement(styles_1.PresenceContainer, tslib_1.__assign({}, sizeProps),
37
- react_1.default.createElement(styles_1.StyledPresence, tslib_1.__assign({ ref: ref }, sizeProps, { color: color }),
36
+ return (react_1.default.createElement(styles_1.PresenceContainer, tslib_1.__assign({ ref: ref }, sizeProps, rest),
37
+ react_1.default.createElement(styles_1.StyledPresence, tslib_1.__assign({}, sizeProps, { color: color }),
38
38
  react_1.default.createElement(Icon_1.RcIcon, { symbol: symbol, color: color || utils_1.RcPresenceColors[type], size: "inherit" }))));
39
39
  });
40
40
  /** @release */
package/components/Presence/styles/StyledPresence.js CHANGED
@@ -8,7 +8,7 @@ var utils_1 = require("../utils");
8
8
  exports.PresenceContainer = foundation_1.styled.div(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n ", "\n"], ["\n ",
9
9
  "\n"])), function (_a) {
10
10
  var iconSizeValue = _a.iconSizeValue, borderSizeValue = _a.borderSizeValue;
11
- return foundation_1.css(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n display: flex;\n justify-content: center;\n background-color: ", ";\n border-radius: 50%;\n width: ", "px;\n height: ", "px;\n padding: ", "px;\n "], ["\n display: flex;\n justify-content: center;\n background-color: ", ";\n border-radius: 50%;\n width: ", "px;\n height: ", "px;\n padding: ", "px;\n "])), foundation_1.palette2('neutral', 'l01'), iconSizeValue, iconSizeValue, borderSizeValue);
11
+ return foundation_1.css(templateObject_1 || (templateObject_1 = tslib_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);
12
12
  });
13
13
  exports._StyledPresence = react_1.forwardRef(function (_a, ref) {
14
14
  var color = _a.color, type = _a.type, rest = tslib_1.__rest(_a, ["color", "type"]);
@@ -16,10 +16,15 @@ exports._StyledPresence = react_1.forwardRef(function (_a, ref) {
16
16
  });
17
17
  exports.StyledPresence = foundation_1.styled(exports._StyledPresence)(templateObject_4 || (templateObject_4 = tslib_1.__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 ",
18
18
  ";\n"])), function (_a) {
19
- var type = _a.type, iconSizeValue = _a.iconSizeValue, color = _a.color;
20
- return foundation_1.css(templateObject_3 || (templateObject_3 = tslib_1.__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: ",
21
- ";\n\n ", " {\n svg {\n width: ", "px;\n height: ", "px;\n }\n }\n "])), iconSizeValue, iconSizeValue, color
19
+ var type = _a.type, iconSizeValue = _a.iconSizeValue, borderSizeValue = _a.borderSizeValue, color = _a.color;
20
+ return foundation_1.css(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n width: ", "px;\n height: ", "px;\n background: ", ";\n margin: ", "px;\n ", ";\n ", " {\n svg {\n width: ", "px;\n height: ", "px;\n }\n }\n "], ["\n width: ", "px;\n height: ", "px;\n background: ",
21
+ ";\n margin: ", "px;\n ",
22
+ ";\n ", " {\n svg {\n width: ", "px;\n height: ", "px;\n }\n }\n "])), iconSizeValue, iconSizeValue, color
22
23
  ? foundation_1.getParsePaletteColor(color)
23
- : utils_1.RcPresenceBackgroundColors[type] || foundation_1.palette2('neutral', 'l01'), Icon_1.RcIcon, iconSizeValue, iconSizeValue);
24
+ : utils_1.RcPresenceBackgroundColors[type] || foundation_1.palette2('neutral', 'l01'), borderSizeValue, foundation_1.fakeBorder({
25
+ inset: false,
26
+ color: foundation_1.palette2('neutral', 'l01'),
27
+ size: borderSizeValue,
28
+ }), Icon_1.RcIcon, iconSizeValue, iconSizeValue);
24
29
  });
25
30
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
package/components/Tabs/TabList/TabList.js CHANGED
@@ -20,13 +20,15 @@ var _RcTabList = react_1.forwardRef(function (inProps, ref) {
20
20
  if (context === null) {
21
21
  throw new TypeError('[RcTabList] No TabContext provided');
22
22
  }
23
- var children = react_1.default.Children.map(childrenProp, function (child) {
24
- var value = child.props.value;
25
- return react_1.default.cloneElement(child, {
26
- 'aria-controls': TabContext_1.getPanelId(context, value),
27
- id: TabContext_1.getTabId(context, value),
23
+ var children = react_1.useMemo(function () {
24
+ return react_1.default.Children.map(childrenProp, function (child) {
25
+ var value = child.props.value;
26
+ return react_1.default.cloneElement(child, {
27
+ 'aria-controls': TabContext_1.getPanelId(context, value),
28
+ id: TabContext_1.getTabId(context, value),
29
+ });
28
30
  });
29
- });
31
+ }, [childrenProp, context]);
30
32
  return (react_1.default.createElement(Tabs_1.RcTabs, tslib_1.__assign({}, rest, { ref: ref, classes: classes, value: context.value }), children));
31
33
  });
32
34
  var RcTabList = foundation_1.styled(_RcTabList)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), styles_1.TabListStyle);
package/components/Tabs/Tabs/MoreMenuTab/MoreMenuTab.d.ts CHANGED
@@ -13,7 +13,7 @@ declare type MoreMenuTabProps = {
13
13
  TooltipProps?: RcBaseProps<RcTooltipProps, 'children'>;
14
14
  onChange?: (event: React.MouseEvent<HTMLLIElement>, value: any) => void;
15
15
  orientation?: 'horizontal' | 'vertical';
16
- MoreIcon?: JSX.Element;
16
+ MoreIcon?: JSX.Element | ((isMenuOpen: boolean) => JSX.Element);
17
17
  } & RcBaseProps<RcTabProps, 'onChange'>;
18
18
  declare const DEFAULT_MORE_MENU_TAB_LABEL = "more_menu_tab";
19
19
  /** inner component */
package/components/Tabs/Tabs/MoreMenuTab/MoreMenuTab.js CHANGED
@@ -18,13 +18,23 @@ var _MoreMenuTab = react_1.forwardRef(function (props, ref) {
18
18
  var menuIdProp = MenuProps.id, onMenuCloseProp = MenuProps.onClose, MenuPropsRest = tslib_1.__rest(MenuProps, ["id", "onClose"]);
19
19
  var menuId = foundation_1.useId(menuIdProp);
20
20
  var _c = tslib_1.__read(react_1.useState(null), 2), anchorEl = _c[0], setAnchorEl = _c[1];
21
- var MoreIcon = react_1.useMemo(function () {
22
- var Icon = MoreIconProp || (react_1.default.createElement(Icon_1.RcIcon, { size: "medium", color: "neutral.f04", symbol: juno_icon_1.MoreHoriz }));
21
+ var open = Boolean(anchorEl);
22
+ var MoreIcon = (function () {
23
+ var Icon;
24
+ if (!MoreIconProp) {
25
+ Icon = (react_1.default.createElement(Icon_1.RcIcon, { size: "medium", color: "neutral.f04", symbol: juno_icon_1.MoreHoriz }));
26
+ }
27
+ else if (typeof MoreIconProp === 'function') {
28
+ Icon = MoreIconProp(open);
29
+ }
30
+ else {
31
+ Icon = MoreIconProp;
32
+ }
23
33
  if (TooltipProps === null || TooltipProps === void 0 ? void 0 : TooltipProps.title) {
24
34
  return react_1.default.createElement(Tooltip_1.RcTooltip, tslib_1.__assign({}, TooltipProps), Icon);
25
35
  }
26
36
  return Icon;
27
- }, [MoreIconProp, TooltipProps]);
37
+ })();
28
38
  var handleTabClick = foundation_1.useEventCallback(function (event) {
29
39
  setAnchorEl(event.currentTarget);
30
40
  });
@@ -49,7 +59,7 @@ var _MoreMenuTab = react_1.forwardRef(function (props, ref) {
49
59
  }, [MenuItemComponent, menuItems, onChange]);
50
60
  return (react_1.default.createElement(react_1.default.Fragment, null,
51
61
  react_1.default.createElement(Tab_1.RcTab, tslib_1.__assign({}, rest, { ref: ref, onClick: handleTabClick, label: MoreIcon, value: DEFAULT_MORE_MENU_TAB_LABEL, "aria-haspopup": "true", "aria-controls": menuId })),
52
- react_1.default.createElement(Menu_1.RcMenu, tslib_1.__assign({ autoClose: true }, MenuPropsRest, { id: menuId, anchorEl: anchorEl, open: Boolean(anchorEl), variant: "menu", onClose: handleMenuClose }), MenuList)));
62
+ react_1.default.createElement(Menu_1.RcMenu, tslib_1.__assign({ autoClose: true }, MenuPropsRest, { id: menuId, anchorEl: anchorEl, open: open, variant: "menu", onClose: handleMenuClose }), MenuList)));
53
63
  });
54
64
  /** inner component */
55
65
  var MoreMenuTab = foundation_1.styled(_MoreMenuTab)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), styles_1.MoreMenuTabStyle);
package/es6/components/Badge/Badge.js CHANGED
@@ -5,8 +5,7 @@ import MuiBadge from '@material-ui/core/Badge';
5
5
  import { capitalize } from '@material-ui/core/utils';
6
6
  import { combineClasses, combineProps, logInDev, styled, useChange, useForkRef, useThemeProps, } from '../../foundation';
7
7
  import { RcBox } from '../Box';
8
- import { RcPresence } from '../Presence';
9
- import { BadgeStyle } from './styles';
8
+ import { BadgeStyle, DefaultDotComponent } from './styles';
10
9
  import { RcBadgeClasses, useRoundBadgeOffset } from './utils';
11
10
  var _RcBadge = forwardRef(function (inProps, ref) {
12
11
  var props = useThemeProps({ props: inProps, name: 'RcBadge' });
@@ -41,7 +40,7 @@ var _RcBadge = forwardRef(function (inProps, ref) {
41
40
  var OmitChildren = _a.children, rest = __rest(_a, ["children"]);
42
41
  var _b = anchorOrigin, horizontal = _b.horizontal, vertical = _b.vertical;
43
42
  var addClassName = "MuiBadge-anchorOrigin" + capitalize(vertical) + capitalize(horizontal) + capitalize(overlap);
44
- var DotComponent = dotComponent !== null && dotComponent !== void 0 ? dotComponent : RcPresence;
43
+ var DotComponent = dotComponent !== null && dotComponent !== void 0 ? dotComponent : DefaultDotComponent;
45
44
  var applyDotProps = combineProps({ className: clsx(addClassName, RcBadgeClasses.badge) }, dotProps);
46
45
  return (React.createElement("div", __assign({}, rest, { ref: ref }),
47
46
  children,
package/es6/components/Badge/styles/BadgeStyle.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { __makeTemplateObject } from "tslib";
2
- import { css, fakeBorder, getParsePaletteColor, } from '../../../foundation';
2
+ import { css, fakeBorder, getParsePaletteColor, palette2, styled, } from '../../../foundation';
3
3
  import { RcBadgeClasses, roundBadgeMarginKey } from '../utils';
4
4
  export var BadgeStyle = function (_a) {
5
5
  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) {
19
19
  ? fakeBorder({ color: borderCurrColor, radius: 'round' })
20
20
  : 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));
21
21
  };
22
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
22
+ 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'));
23
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
package/es6/components/Presence/Presence.js CHANGED
@@ -1,4 +1,4 @@
1
- import { __assign, __makeTemplateObject } from "tslib";
1
+ import { __assign, __makeTemplateObject, __rest } from "tslib";
2
2
  import React, { forwardRef } from 'react';
3
3
  import { styled, useThemeProps, } from '../../foundation';
4
4
  import { RcIcon } from '../Icon';
@@ -7,7 +7,7 @@ import { StyledPresence, PresenceContainer } from './styles';
7
7
  import { RcPresenceColors, RcPresenceSizes } from './utils';
8
8
  var _RcPresence = forwardRef(function (inProps, ref) {
9
9
  var props = useThemeProps({ props: inProps, name: 'RcPresence' });
10
- var type = props.type, color = props.color, size = props.size, borderSize = props.borderSize;
10
+ var type = props.type, color = props.color, size = props.size, borderSize = props.borderSize, rest = __rest(props, ["type", "color", "size", "borderSize"]);
11
11
  var sizeProps = {
12
12
  iconSizeValue: RcPresenceSizes[size][0],
13
13
  borderSizeValue: RcPresenceSizes[borderSize || size][1],
@@ -31,8 +31,8 @@ var _RcPresence = forwardRef(function (inProps, ref) {
31
31
  return Default;
32
32
  }
33
33
  })();
34
- return (React.createElement(PresenceContainer, __assign({}, sizeProps),
35
- React.createElement(StyledPresence, __assign({ ref: ref }, sizeProps, { color: color }),
34
+ return (React.createElement(PresenceContainer, __assign({ ref: ref }, sizeProps, rest),
35
+ React.createElement(StyledPresence, __assign({}, sizeProps, { color: color }),
36
36
  React.createElement(RcIcon, { symbol: symbol, color: color || RcPresenceColors[type], size: "inherit" }))));
37
37
  });
38
38
  /** @release */
package/es6/components/Presence/styles/StyledPresence.js CHANGED
@@ -1,12 +1,12 @@
1
1
  import { __assign, __makeTemplateObject, __rest } from "tslib";
2
2
  import React, { forwardRef } from 'react';
3
- import { css, getParsePaletteColor, palette2, styled, } from '../../../foundation';
3
+ import { css, getParsePaletteColor, palette2, styled, fakeBorder, } from '../../../foundation';
4
4
  import { RcIcon } from '../../Icon';
5
5
  import { RcPresenceBackgroundColors } from '../utils';
6
6
  export var PresenceContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n"], ["\n ",
7
7
  "\n"])), function (_a) {
8
8
  var iconSizeValue = _a.iconSizeValue, borderSizeValue = _a.borderSizeValue;
9
- return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n background-color: ", ";\n border-radius: 50%;\n width: ", "px;\n height: ", "px;\n padding: ", "px;\n "], ["\n display: flex;\n justify-content: center;\n background-color: ", ";\n border-radius: 50%;\n width: ", "px;\n height: ", "px;\n padding: ", "px;\n "])), palette2('neutral', 'l01'), iconSizeValue, iconSizeValue, borderSizeValue);
9
+ 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);
10
10
  });
11
11
  export var _StyledPresence = forwardRef(function (_a, ref) {
12
12
  var color = _a.color, type = _a.type, rest = __rest(_a, ["color", "type"]);
@@ -14,10 +14,15 @@ export var _StyledPresence = forwardRef(function (_a, ref) {
14
14
  });
15
15
  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 ",
16
16
  ";\n"])), function (_a) {
17
- var type = _a.type, iconSizeValue = _a.iconSizeValue, color = _a.color;
18
- 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: ",
19
- ";\n\n ", " {\n svg {\n width: ", "px;\n height: ", "px;\n }\n }\n "])), iconSizeValue, iconSizeValue, color
17
+ var type = _a.type, iconSizeValue = _a.iconSizeValue, borderSizeValue = _a.borderSizeValue, color = _a.color;
18
+ return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: ", "px;\n height: ", "px;\n background: ", ";\n margin: ", "px;\n ", ";\n ", " {\n svg {\n width: ", "px;\n height: ", "px;\n }\n }\n "], ["\n width: ", "px;\n height: ", "px;\n background: ",
19
+ ";\n margin: ", "px;\n ",
20
+ ";\n ", " {\n svg {\n width: ", "px;\n height: ", "px;\n }\n }\n "])), iconSizeValue, iconSizeValue, color
20
21
  ? getParsePaletteColor(color)
21
- : RcPresenceBackgroundColors[type] || palette2('neutral', 'l01'), RcIcon, iconSizeValue, iconSizeValue);
22
+ : RcPresenceBackgroundColors[type] || palette2('neutral', 'l01'), borderSizeValue, fakeBorder({
23
+ inset: false,
24
+ color: palette2('neutral', 'l01'),
25
+ size: borderSizeValue,
26
+ }), RcIcon, iconSizeValue, iconSizeValue);
22
27
  });
23
28
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
package/es6/components/Tabs/TabList/TabList.js CHANGED
@@ -18,13 +18,15 @@ var _RcTabList = forwardRef(function (inProps, ref) {
18
18
  if (context === null) {
19
19
  throw new TypeError('[RcTabList] No TabContext provided');
20
20
  }
21
- var children = React.Children.map(childrenProp, function (child) {
22
- var value = child.props.value;
23
- return React.cloneElement(child, {
24
- 'aria-controls': getPanelId(context, value),
25
- id: getTabId(context, value),
21
+ var children = useMemo(function () {
22
+ return React.Children.map(childrenProp, function (child) {
23
+ var value = child.props.value;
24
+ return React.cloneElement(child, {
25
+ 'aria-controls': getPanelId(context, value),
26
+ id: getTabId(context, value),
27
+ });
26
28
  });
27
- });
29
+ }, [childrenProp, context]);
28
30
  return (React.createElement(RcTabs, __assign({}, rest, { ref: ref, classes: classes, value: context.value }), children));
29
31
  });
30
32
  var RcTabList = styled(_RcTabList)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), TabListStyle);
package/es6/components/Tabs/Tabs/MoreMenuTab/MoreMenuTab.js CHANGED
@@ -15,13 +15,23 @@ var _MoreMenuTab = forwardRef(function (props, ref) {
15
15
  var menuIdProp = MenuProps.id, onMenuCloseProp = MenuProps.onClose, MenuPropsRest = __rest(MenuProps, ["id", "onClose"]);
16
16
  var menuId = useId(menuIdProp);
17
17
  var _c = __read(useState(null), 2), anchorEl = _c[0], setAnchorEl = _c[1];
18
- var MoreIcon = useMemo(function () {
19
- var Icon = MoreIconProp || (React.createElement(RcIcon, { size: "medium", color: "neutral.f04", symbol: MoreHorizIcon }));
18
+ var open = Boolean(anchorEl);
19
+ var MoreIcon = (function () {
20
+ var Icon;
21
+ if (!MoreIconProp) {
22
+ Icon = (React.createElement(RcIcon, { size: "medium", color: "neutral.f04", symbol: MoreHorizIcon }));
23
+ }
24
+ else if (typeof MoreIconProp === 'function') {
25
+ Icon = MoreIconProp(open);
26
+ }
27
+ else {
28
+ Icon = MoreIconProp;
29
+ }
20
30
  if (TooltipProps === null || TooltipProps === void 0 ? void 0 : TooltipProps.title) {
21
31
  return React.createElement(RcTooltip, __assign({}, TooltipProps), Icon);
22
32
  }
23
33
  return Icon;
24
- }, [MoreIconProp, TooltipProps]);
34
+ })();
25
35
  var handleTabClick = useEventCallback(function (event) {
26
36
  setAnchorEl(event.currentTarget);
27
37
  });
@@ -46,7 +56,7 @@ var _MoreMenuTab = forwardRef(function (props, ref) {
46
56
  }, [MenuItemComponent, menuItems, onChange]);
47
57
  return (React.createElement(React.Fragment, null,
48
58
  React.createElement(RcTab, __assign({}, rest, { ref: ref, onClick: handleTabClick, label: MoreIcon, value: DEFAULT_MORE_MENU_TAB_LABEL, "aria-haspopup": "true", "aria-controls": menuId })),
49
- React.createElement(RcMenu, __assign({ autoClose: true }, MenuPropsRest, { id: menuId, anchorEl: anchorEl, open: Boolean(anchorEl), variant: "menu", onClose: handleMenuClose }), MenuList)));
59
+ React.createElement(RcMenu, __assign({ autoClose: true }, MenuPropsRest, { id: menuId, anchorEl: anchorEl, open: open, variant: "menu", onClose: handleMenuClose }), MenuList)));
50
60
  });
51
61
  /** inner component */
52
62
  var MoreMenuTab = styled(_MoreMenuTab)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), MoreMenuTabStyle);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ringcentral/juno",
3
- "version": "2.31.0-hotfix.2",
3
+ "version": "2.31.0-hotfix.4",
4
4
  "author": "RingCentral",
5
5
  "license": "MIT",
6
6
  "main": "./index.js",