@ringcentral/juno 2.34.0 → 2.35.1

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.
@@ -13,7 +13,6 @@ var _RcPresence = react_1.forwardRef(function (inProps, ref) {
13
13
  var sizeProps = {
14
14
  iconSizeValue: utils_1.RcPresenceSizes[size][0],
15
15
  borderSizeValue: utils_1.RcPresenceSizes[borderSize || size][1],
16
- borderSize: borderSize,
17
16
  type: type,
18
17
  };
19
18
  var symbol = (function () {
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import { PresenceSizeProps } from '../Presence';
3
- export declare const PresenceContainer: import("styled-components").StyledComponentClass<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & PresenceSizeProps, import("../../../foundation").RcTheme, React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & PresenceSizeProps>;
4
3
  export declare const _StyledPresence: React.ForwardRefExoticComponent<PresenceSizeProps & React.RefAttributes<any>>;
5
4
  export declare const StyledPresence: import("styled-components").StyledComponentClass<PresenceSizeProps & React.RefAttributes<any>, import("../../../foundation").RcTheme, Pick<PresenceSizeProps & React.RefAttributes<any>, "ref" | "key" | "color" | "type" | "iconSizeValue" | "borderSizeValue"> & {
6
5
  theme?: import("../../../foundation").RcTheme | undefined;
7
6
  } & PresenceSizeProps>;
7
+ export declare const PresenceContainer: import("styled-components").StyledComponentClass<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & PresenceSizeProps, import("../../../foundation").RcTheme, React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & PresenceSizeProps>;
@@ -5,19 +5,14 @@ var react_1 = tslib_1.__importStar(require("react"));
5
5
  var foundation_1 = require("../../../foundation");
6
6
  var Icon_1 = require("../../Icon");
7
7
  var utils_1 = require("../utils");
8
- exports.PresenceContainer = foundation_1.styled.div(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n ", "\n"], ["\n ",
9
- "\n"])), function (_a) {
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 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
- });
13
8
  exports._StyledPresence = react_1.forwardRef(function (_a, ref) {
14
- var color = _a.color, type = _a.type, rest = tslib_1.__rest(_a, ["color", "type"]);
15
- return react_1.default.createElement("div", tslib_1.__assign({ ref: ref }, rest));
9
+ var color = _a.color, type = _a.type, iconSizeValue = _a.iconSizeValue, borderSizeValue = _a.borderSizeValue, rest = tslib_1.__rest(_a, ["color", "type", "iconSizeValue", "borderSizeValue"]);
10
+ return (react_1.default.createElement("div", tslib_1.__assign({ ref: ref }, rest)));
16
11
  });
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 ",
12
+ exports.StyledPresence = foundation_1.styled(exports._StyledPresence)(templateObject_2 || (templateObject_2 = 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
13
  ";\n"])), function (_a) {
19
14
  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 ", ";\n ", " {\n svg {\n width: ", "px;\n height: ", "px;\n }\n }\n "], ["\n width: ", "px;\n height: ", "px;\n background: ",
15
+ return foundation_1.css(templateObject_1 || (templateObject_1 = 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
16
  ";\n ",
22
17
  ";\n ", " {\n svg {\n width: ", "px;\n height: ", "px;\n }\n }\n "])), iconSizeValue, iconSizeValue, color
23
18
  ? foundation_1.getParsePaletteColor(color)
@@ -27,4 +22,9 @@ exports.StyledPresence = foundation_1.styled(exports._StyledPresence)(templateOb
27
22
  size: borderSizeValue,
28
23
  }), Icon_1.RcIcon, iconSizeValue, iconSizeValue);
29
24
  });
25
+ exports.PresenceContainer = foundation_1.styled.div(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n ", "\n"], ["\n ",
26
+ "\n"])), function (_a) {
27
+ var iconSizeValue = _a.iconSizeValue, borderSizeValue = _a.borderSizeValue;
28
+ return foundation_1.css(templateObject_3 || (templateObject_3 = 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);
29
+ });
30
30
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
@@ -35,8 +35,9 @@ var _MoreMenuTabs = react_1.forwardRef(function (props, ref) {
35
35
  var moreTabRef = react_1.useRef(null);
36
36
  var sentinelStartRef = react_1.useRef(null);
37
37
  var tabsRef = foundation_1.useForkRef(innerRef, ref);
38
+ var _c = foundation_1.useRcPortalWindowContext().externalWindow, externalWindow = _c === void 0 ? window : _c;
38
39
  var mountStateRef = foundation_1.useMountState();
39
- var _c = tslib_1.__read(react_1.useState(function () {
40
+ var _d = tslib_1.__read(react_1.useState(function () {
40
41
  var tabsInfo = getTabsInfoFromChildren(childrenProp);
41
42
  if (!tabsInfo) {
42
43
  return {
@@ -50,7 +51,7 @@ var _MoreMenuTabs = react_1.forwardRef(function (props, ref) {
50
51
  tab: tabsInfo,
51
52
  menu: [],
52
53
  };
53
- }), 2), groupInfo = _c[0], setGroupInfo = _c[1];
54
+ }), 2), groupInfo = _d[0], setGroupInfo = _d[1];
54
55
  var throttleCalculateGroupInfo = foundation_1.useThrottle(function () {
55
56
  var e_1, _a;
56
57
  var _b;
@@ -66,17 +67,15 @@ var _MoreMenuTabs = react_1.forwardRef(function (props, ref) {
66
67
  try {
67
68
  for (var allTabs_1 = tslib_1.__values(allTabs), allTabs_1_1 = allTabs_1.next(); !allTabs_1_1.done; allTabs_1_1 = allTabs_1.next()) {
68
69
  var tabEl = allTabs_1_1.value;
69
- if (tabEl instanceof HTMLElement) {
70
- if (typeof tabEl.dataset['tabOriginIndex'] === 'string') {
71
- var tabOriginIndex = Number(tabEl.dataset['tabOriginIndex']);
72
- var elSize = tabEl[sizeKey];
73
- allTabsSize[tabOriginIndex] = elSize;
74
- allTabsSizeSumWidthoutMoreButton += elSize;
75
- }
76
- else if (typeof tabEl.dataset['tabMoreButton'] === 'string') {
77
- var elSize = tabEl[sizeKey];
78
- moreButtonSize = elSize;
79
- }
70
+ if (typeof tabEl.dataset['tabOriginIndex'] === 'string') {
71
+ var tabOriginIndex = Number(tabEl.dataset['tabOriginIndex']);
72
+ var elSize = tabEl[sizeKey];
73
+ allTabsSize[tabOriginIndex] = elSize;
74
+ allTabsSizeSumWidthoutMoreButton += elSize;
75
+ }
76
+ else if (typeof tabEl.dataset['tabMoreButton'] === 'string') {
77
+ var elSize = tabEl[sizeKey];
78
+ moreButtonSize = elSize;
80
79
  }
81
80
  }
82
81
  }
@@ -139,7 +138,7 @@ var _MoreMenuTabs = react_1.forwardRef(function (props, ref) {
139
138
  var tablist = (_b = innerRef.current) === null || _b === void 0 ? void 0 : _b.querySelector('[role="tablist"]');
140
139
  if (!tablist)
141
140
  return;
142
- var resizeObserver = foundation_1.getResizeObserver(throttleCalculateGroupInfo);
141
+ var resizeObserver = foundation_1.getResizeObserver(throttleCalculateGroupInfo, externalWindow);
143
142
  resizeObserver.observe(tablist);
144
143
  try {
145
144
  for (var _c = tslib_1.__values(Array.from(tablist.children)), _d = _c.next(); !_d.done; _d = _c.next()) {
@@ -157,19 +156,19 @@ var _MoreMenuTabs = react_1.forwardRef(function (props, ref) {
157
156
  }
158
157
  finally { if (e_2) throw e_2.error; }
159
158
  }
160
- var mutationObserver = new MutationObserver(function (mutations) {
159
+ var mutationObserver = new externalWindow.MutationObserver(function (mutations) {
161
160
  var e_3, _a;
162
161
  try {
163
162
  for (var mutations_1 = tslib_1.__values(mutations), mutations_1_1 = mutations_1.next(); !mutations_1_1.done; mutations_1_1 = mutations_1.next()) {
164
163
  var mutation = mutations_1_1.value;
165
164
  if (mutation.type === 'childList') {
166
165
  mutation.removedNodes.forEach(function (removedNode) {
167
- if (removedNode instanceof Element) {
166
+ if (removedNode.getAttribute('role') === 'tab') {
168
167
  resizeObserver.unobserve(removedNode);
169
168
  }
170
169
  });
171
170
  mutation.addedNodes.forEach(function (addedNode) {
172
- if (addedNode instanceof Element) {
171
+ if (addedNode.getAttribute('role') === 'tab') {
173
172
  resizeObserver.observe(addedNode,
174
173
  // TODO: remove this, after remove ResizeObserver polyfill
175
174
  // @ts-ignore
@@ -11,7 +11,6 @@ var _RcPresence = forwardRef(function (inProps, ref) {
11
11
  var sizeProps = {
12
12
  iconSizeValue: RcPresenceSizes[size][0],
13
13
  borderSizeValue: RcPresenceSizes[borderSize || size][1],
14
- borderSize: borderSize,
15
14
  type: type,
16
15
  };
17
16
  var symbol = (function () {
@@ -3,19 +3,14 @@ import React, { forwardRef } from 'react';
3
3
  import { css, getParsePaletteColor, palette2, styled, fakeBorder, } from '../../../foundation';
4
4
  import { RcIcon } from '../../Icon';
5
5
  import { RcPresenceBackgroundColors } from '../utils';
6
- export var PresenceContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n"], ["\n ",
7
- "\n"])), function (_a) {
8
- var iconSizeValue = _a.iconSizeValue, borderSizeValue = _a.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
- });
11
6
  export var _StyledPresence = forwardRef(function (_a, ref) {
12
- var color = _a.color, type = _a.type, rest = __rest(_a, ["color", "type"]);
13
- return React.createElement("div", __assign({ ref: ref }, rest));
7
+ var color = _a.color, type = _a.type, iconSizeValue = _a.iconSizeValue, borderSizeValue = _a.borderSizeValue, rest = __rest(_a, ["color", "type", "iconSizeValue", "borderSizeValue"]);
8
+ return (React.createElement("div", __assign({ ref: ref }, rest)));
14
9
  });
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 ",
10
+ 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 ",
16
11
  ";\n"])), function (_a) {
17
12
  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 ", ";\n ", " {\n svg {\n width: ", "px;\n height: ", "px;\n }\n }\n "], ["\n width: ", "px;\n height: ", "px;\n background: ",
13
+ return css(templateObject_1 || (templateObject_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: ",
19
14
  ";\n ",
20
15
  ";\n ", " {\n svg {\n width: ", "px;\n height: ", "px;\n }\n }\n "])), iconSizeValue, iconSizeValue, color
21
16
  ? getParsePaletteColor(color)
@@ -25,4 +20,9 @@ export var StyledPresence = styled(_StyledPresence)(templateObject_4 || (templat
25
20
  size: borderSizeValue,
26
21
  }), RcIcon, iconSizeValue, iconSizeValue);
27
22
  });
23
+ export var PresenceContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n ", "\n"], ["\n ",
24
+ "\n"])), function (_a) {
25
+ var iconSizeValue = _a.iconSizeValue, borderSizeValue = _a.borderSizeValue;
26
+ return css(templateObject_3 || (templateObject_3 = __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);
27
+ });
28
28
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
@@ -1,7 +1,7 @@
1
1
  import { __assign, __makeTemplateObject, __read, __rest, __spread, __values } from "tslib";
2
2
  import MuiTabs from '@material-ui/core/Tabs';
3
3
  import React, { cloneElement, forwardRef, isValidElement, useEffect, useRef, useState, } from 'react';
4
- import { getResizeObserver, styled, useForkRef, useMountState, useOnReRender, useThrottle, } from '../../../../foundation';
4
+ import { getResizeObserver, styled, useForkRef, useMountState, useOnReRender, useThrottle, useRcPortalWindowContext, } from '../../../../foundation';
5
5
  import { DEFAULT_MORE_MENU_TAB_LABEL, MoreMenuTab, } from '../MoreMenuTab';
6
6
  import { MoreMenuTabSentinel } from './MoreMenuTabSentinel';
7
7
  // with of more button with a icon
@@ -33,8 +33,9 @@ var _MoreMenuTabs = forwardRef(function (props, ref) {
33
33
  var moreTabRef = useRef(null);
34
34
  var sentinelStartRef = useRef(null);
35
35
  var tabsRef = useForkRef(innerRef, ref);
36
+ var _c = useRcPortalWindowContext().externalWindow, externalWindow = _c === void 0 ? window : _c;
36
37
  var mountStateRef = useMountState();
37
- var _c = __read(useState(function () {
38
+ var _d = __read(useState(function () {
38
39
  var tabsInfo = getTabsInfoFromChildren(childrenProp);
39
40
  if (!tabsInfo) {
40
41
  return {
@@ -48,7 +49,7 @@ var _MoreMenuTabs = forwardRef(function (props, ref) {
48
49
  tab: tabsInfo,
49
50
  menu: [],
50
51
  };
51
- }), 2), groupInfo = _c[0], setGroupInfo = _c[1];
52
+ }), 2), groupInfo = _d[0], setGroupInfo = _d[1];
52
53
  var throttleCalculateGroupInfo = useThrottle(function () {
53
54
  var e_1, _a;
54
55
  var _b;
@@ -64,17 +65,15 @@ var _MoreMenuTabs = forwardRef(function (props, ref) {
64
65
  try {
65
66
  for (var allTabs_1 = __values(allTabs), allTabs_1_1 = allTabs_1.next(); !allTabs_1_1.done; allTabs_1_1 = allTabs_1.next()) {
66
67
  var tabEl = allTabs_1_1.value;
67
- if (tabEl instanceof HTMLElement) {
68
- if (typeof tabEl.dataset['tabOriginIndex'] === 'string') {
69
- var tabOriginIndex = Number(tabEl.dataset['tabOriginIndex']);
70
- var elSize = tabEl[sizeKey];
71
- allTabsSize[tabOriginIndex] = elSize;
72
- allTabsSizeSumWidthoutMoreButton += elSize;
73
- }
74
- else if (typeof tabEl.dataset['tabMoreButton'] === 'string') {
75
- var elSize = tabEl[sizeKey];
76
- moreButtonSize = elSize;
77
- }
68
+ if (typeof tabEl.dataset['tabOriginIndex'] === 'string') {
69
+ var tabOriginIndex = Number(tabEl.dataset['tabOriginIndex']);
70
+ var elSize = tabEl[sizeKey];
71
+ allTabsSize[tabOriginIndex] = elSize;
72
+ allTabsSizeSumWidthoutMoreButton += elSize;
73
+ }
74
+ else if (typeof tabEl.dataset['tabMoreButton'] === 'string') {
75
+ var elSize = tabEl[sizeKey];
76
+ moreButtonSize = elSize;
78
77
  }
79
78
  }
80
79
  }
@@ -137,7 +136,7 @@ var _MoreMenuTabs = forwardRef(function (props, ref) {
137
136
  var tablist = (_b = innerRef.current) === null || _b === void 0 ? void 0 : _b.querySelector('[role="tablist"]');
138
137
  if (!tablist)
139
138
  return;
140
- var resizeObserver = getResizeObserver(throttleCalculateGroupInfo);
139
+ var resizeObserver = getResizeObserver(throttleCalculateGroupInfo, externalWindow);
141
140
  resizeObserver.observe(tablist);
142
141
  try {
143
142
  for (var _c = __values(Array.from(tablist.children)), _d = _c.next(); !_d.done; _d = _c.next()) {
@@ -155,19 +154,19 @@ var _MoreMenuTabs = forwardRef(function (props, ref) {
155
154
  }
156
155
  finally { if (e_2) throw e_2.error; }
157
156
  }
158
- var mutationObserver = new MutationObserver(function (mutations) {
157
+ var mutationObserver = new externalWindow.MutationObserver(function (mutations) {
159
158
  var e_3, _a;
160
159
  try {
161
160
  for (var mutations_1 = __values(mutations), mutations_1_1 = mutations_1.next(); !mutations_1_1.done; mutations_1_1 = mutations_1.next()) {
162
161
  var mutation = mutations_1_1.value;
163
162
  if (mutation.type === 'childList') {
164
163
  mutation.removedNodes.forEach(function (removedNode) {
165
- if (removedNode instanceof Element) {
164
+ if (removedNode.getAttribute('role') === 'tab') {
166
165
  resizeObserver.unobserve(removedNode);
167
166
  }
168
167
  });
169
168
  mutation.addedNodes.forEach(function (addedNode) {
170
- if (addedNode instanceof Element) {
169
+ if (addedNode.getAttribute('role') === 'tab') {
171
170
  resizeObserver.observe(addedNode,
172
171
  // TODO: remove this, after remove ResizeObserver polyfill
173
172
  // @ts-ignore
@@ -44,7 +44,7 @@ export var useTouchMouseEvent = function (_a, _b) {
44
44
  var isInside;
45
45
  if (actionRef && e.touches.length < 2 && e.changedTouches.length < 2) {
46
46
  var touch = e.touches[0] || e.changedTouches[0];
47
- var elm = document.elementFromPoint(touch.pageX, touch.pageY);
47
+ var elm = document.elementFromPoint(touch.clientX, touch.clientY);
48
48
  isInside = !!elm && checkInside(elm);
49
49
  }
50
50
  onTouchEndArg === null || onTouchEndArg === void 0 ? void 0 : onTouchEndArg(e, isInside);
@@ -46,7 +46,7 @@ exports.useTouchMouseEvent = function (_a, _b) {
46
46
  var isInside;
47
47
  if (actionRef && e.touches.length < 2 && e.changedTouches.length < 2) {
48
48
  var touch = e.touches[0] || e.changedTouches[0];
49
- var elm = document.elementFromPoint(touch.pageX, touch.pageY);
49
+ var elm = document.elementFromPoint(touch.clientX, touch.clientY);
50
50
  isInside = !!elm && checkInside(elm);
51
51
  }
52
52
  onTouchEndArg === null || onTouchEndArg === void 0 ? void 0 : onTouchEndArg(e, isInside);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ringcentral/juno",
3
- "version": "2.34.0",
3
+ "version": "2.35.1",
4
4
  "author": "RingCentral",
5
5
  "license": "MIT",
6
6
  "main": "./index.js",