@salutejs/plasma-new-hope 0.268.0-dev.0 → 0.268.2-canary.1780.13373736245.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (82) hide show
  1. package/cjs/components/Popover/Popover.js +10 -2
  2. package/cjs/components/Popover/Popover.js.map +1 -1
  3. package/cjs/components/Popover/hooks/usePopoverOffset.js +48 -0
  4. package/cjs/components/Popover/hooks/usePopoverOffset.js.map +1 -0
  5. package/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js +10 -4
  6. package/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js.map +1 -1
  7. package/cjs/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +21 -28
  8. package/cjs/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js.map +1 -1
  9. package/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.js +10 -4
  10. package/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.js.map +1 -1
  11. package/cjs/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js +21 -28
  12. package/cjs/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js.map +1 -1
  13. package/cjs/components/Tabs/utils/index.js +26 -0
  14. package/cjs/components/Tabs/utils/index.js.map +1 -0
  15. package/cjs/components/Tooltip/Tooltip.js +1 -1
  16. package/cjs/components/Tooltip/Tooltip.js.map +1 -1
  17. package/emotion/cjs/components/Popover/Popover.js +10 -2
  18. package/emotion/cjs/components/Popover/hooks/usePopoverOffset.js +51 -0
  19. package/emotion/cjs/components/Tabs/Tabs.template-doc.mdx +7 -2
  20. package/emotion/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js +10 -4
  21. package/emotion/cjs/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +11 -18
  22. package/emotion/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.js +10 -4
  23. package/emotion/cjs/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js +11 -18
  24. package/emotion/cjs/components/Tabs/utils/index.js +24 -0
  25. package/emotion/cjs/components/Tooltip/Tooltip.js +2 -2
  26. package/emotion/cjs/examples/plasma_b2c/components/Popover/Popover.stories.tsx +27 -2
  27. package/emotion/es/components/Popover/Popover.js +10 -2
  28. package/emotion/es/components/Popover/hooks/usePopoverOffset.js +45 -0
  29. package/emotion/es/components/Tabs/Tabs.template-doc.mdx +7 -2
  30. package/emotion/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js +11 -5
  31. package/emotion/es/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +12 -19
  32. package/emotion/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.js +11 -5
  33. package/emotion/es/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js +12 -19
  34. package/emotion/es/components/Tabs/utils/index.js +18 -0
  35. package/emotion/es/components/Tooltip/Tooltip.js +2 -2
  36. package/emotion/es/examples/plasma_b2c/components/Popover/Popover.stories.tsx +27 -2
  37. package/es/components/Popover/Popover.js +10 -2
  38. package/es/components/Popover/Popover.js.map +1 -1
  39. package/es/components/Popover/hooks/usePopoverOffset.js +44 -0
  40. package/es/components/Popover/hooks/usePopoverOffset.js.map +1 -0
  41. package/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js +11 -5
  42. package/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js.map +1 -1
  43. package/es/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +12 -19
  44. package/es/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js.map +1 -1
  45. package/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.js +11 -5
  46. package/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.js.map +1 -1
  47. package/es/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js +12 -19
  48. package/es/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js.map +1 -1
  49. package/es/components/Tabs/utils/index.js +21 -0
  50. package/es/components/Tabs/utils/index.js.map +1 -0
  51. package/es/components/Tooltip/Tooltip.js +1 -1
  52. package/es/components/Tooltip/Tooltip.js.map +1 -1
  53. package/package.json +2 -2
  54. package/styled-components/cjs/components/Popover/Popover.js +10 -2
  55. package/styled-components/cjs/components/Popover/hooks/usePopoverOffset.js +51 -0
  56. package/styled-components/cjs/components/Tabs/Tabs.template-doc.mdx +7 -2
  57. package/styled-components/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js +10 -4
  58. package/styled-components/cjs/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +11 -18
  59. package/styled-components/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.js +10 -4
  60. package/styled-components/cjs/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js +11 -18
  61. package/styled-components/cjs/components/Tabs/utils/index.js +24 -0
  62. package/styled-components/cjs/components/Tooltip/Tooltip.js +1 -1
  63. package/styled-components/cjs/examples/plasma_b2c/components/Popover/Popover.stories.tsx +27 -2
  64. package/styled-components/es/components/Popover/Popover.js +10 -2
  65. package/styled-components/es/components/Popover/hooks/usePopoverOffset.js +45 -0
  66. package/styled-components/es/components/Tabs/Tabs.template-doc.mdx +7 -2
  67. package/styled-components/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js +11 -5
  68. package/styled-components/es/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +12 -19
  69. package/styled-components/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.js +11 -5
  70. package/styled-components/es/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js +12 -19
  71. package/styled-components/es/components/Tabs/utils/index.js +18 -0
  72. package/styled-components/es/components/Tooltip/Tooltip.js +1 -1
  73. package/styled-components/es/examples/plasma_b2c/components/Popover/Popover.stories.tsx +27 -2
  74. package/types/components/Popover/Popover.d.ts.map +1 -1
  75. package/types/components/Popover/hooks/usePopoverOffset.d.ts +9 -0
  76. package/types/components/Popover/hooks/usePopoverOffset.d.ts.map +1 -0
  77. package/types/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.d.ts.map +1 -1
  78. package/types/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.d.ts.map +1 -1
  79. package/types/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.d.ts.map +1 -1
  80. package/types/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.d.ts.map +1 -1
  81. package/types/components/Tabs/utils/index.d.ts +4 -0
  82. package/types/components/Tabs/utils/index.d.ts.map +1 -0
@@ -11,6 +11,7 @@ var _Icon = /*#__PURE__*/require("../../../../_Icon");
11
11
  var _tokens = /*#__PURE__*/require("../../../tokens");
12
12
  var _utils = /*#__PURE__*/require("../../../../../utils");
13
13
  var _TabsContext = /*#__PURE__*/require("../../../TabsContext");
14
+ var _utils2 = /*#__PURE__*/require("../../../utils");
14
15
  var _base = /*#__PURE__*/require("./variations/_size/base");
15
16
  var _base2 = /*#__PURE__*/require("./variations/_view/base");
16
17
  var _base3 = /*#__PURE__*/require("./variations/_disabled/base");
@@ -91,13 +92,7 @@ var horizontalTabsRoot = exports.horizontalTabsRoot = function horizontalTabsRoo
91
92
  return;
92
93
  }
93
94
  var scrollLeft = Math.round(scrollRef.current.scrollLeft);
94
- var firstOverflowingTab = refs.items.slice().reverse().find(function (item) {
95
- if (!item.current || item.current.offsetLeft === undefined) {
96
- return;
97
- }
98
- var tabStartX = item.current.offsetLeft;
99
- return tabStartX < scrollLeft;
100
- });
95
+ var firstOverflowingTab = (0, _utils2.getFirstOverflowingTab)(refs.items.slice().reverse(), scrollLeft);
101
96
  firstOverflowingTab === null || firstOverflowingTab === void 0 || (_firstOverflowingTab$ = firstOverflowingTab.current) === null || _firstOverflowingTab$ === void 0 || _firstOverflowingTab$.scrollIntoView({
102
97
  block: 'nearest',
103
98
  inline: 'start'
@@ -109,13 +104,7 @@ var horizontalTabsRoot = exports.horizontalTabsRoot = function horizontalTabsRoo
109
104
  return;
110
105
  }
111
106
  var scrollRight = Math.round(scrollRef.current.scrollLeft + scrollRef.current.clientWidth);
112
- var lastOverflowingTab = refs.items.find(function (item) {
113
- if (!item.current || item.current.offsetLeft === undefined) {
114
- return;
115
- }
116
- var tabEndX = item.current.offsetLeft + item.current.offsetWidth;
117
- return tabEndX > scrollRight;
118
- });
107
+ var lastOverflowingTab = (0, _utils2.getLastOverflowingTab)(refs.items, scrollRight);
119
108
  lastOverflowingTab === null || lastOverflowingTab === void 0 || (_lastOverflowingTab$c = lastOverflowingTab.current) === null || _lastOverflowingTab$c === void 0 || _lastOverflowingTab$c.scrollIntoView({
120
109
  block: 'nearest',
121
110
  inline: 'end'
@@ -190,18 +179,22 @@ var horizontalTabsRoot = exports.horizontalTabsRoot = function horizontalTabsRoo
190
179
  });
191
180
  }
192
181
  }, [index]);
193
- (0, _react.useEffect)(function () {
182
+ (0, _react.useLayoutEffect)(function () {
194
183
  var _scrollRef$current, _scrollRef$current2;
195
184
  setLastItemVisible(((_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.scrollWidth) === ((_scrollRef$current2 = scrollRef.current) === null || _scrollRef$current2 === void 0 ? void 0 : _scrollRef$current2.clientWidth));
196
185
  }, []);
197
186
 
198
187
  // Этот хук компенсирует появление левой стрелки при прокрутке
199
- (0, _react.useEffect)(function () {
188
+ (0, _react.useLayoutEffect)(function () {
189
+ var _lastOverflowingTab$c2;
200
190
  if (firstItemVisible || !scrollRef.current || !leftArrowRef.current) {
201
191
  return;
202
192
  }
203
- scrollRef.current.scrollTo({
204
- left: Math.round(scrollRef.current.scrollLeft + leftArrowRef.current.clientWidth)
193
+ var scrollRight = Math.round(scrollRef.current.scrollLeft + scrollRef.current.clientWidth);
194
+ var lastOverflowingTab = (0, _utils2.getLastOverflowingTab)(refs.items, scrollRight);
195
+ lastOverflowingTab === null || lastOverflowingTab === void 0 || (_lastOverflowingTab$c2 = lastOverflowingTab.current) === null || _lastOverflowingTab$c2 === void 0 || _lastOverflowingTab$c2.scrollIntoView({
196
+ block: 'nearest',
197
+ inline: 'end'
205
198
  });
206
199
  }, [firstItemVisible, scrollRef, leftArrowRef]);
207
200
  return /*#__PURE__*/_react["default"].createElement(_TabsContext.TabsContext.Provider, {
@@ -61,6 +61,16 @@ var verticalTabItemRoot = exports.verticalTabItemRoot = function verticalTabItem
61
61
  return refs.unregister(innerRef);
62
62
  };
63
63
  }, [refs]);
64
+ (0, _react.useLayoutEffect)(function () {
65
+ var _innerRef$current;
66
+ if (!selected) {
67
+ return;
68
+ }
69
+ (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 || _innerRef$current.scrollIntoView({
70
+ block: 'nearest',
71
+ inline: 'nearest'
72
+ });
73
+ }, [selected]);
64
74
  var onItemFocus = (0, _react.useCallback)(function (event) {
65
75
  if (disabled) {
66
76
  return;
@@ -85,10 +95,6 @@ var verticalTabItemRoot = exports.verticalTabItemRoot = function verticalTabItem
85
95
  refs.setCurrent(focusIndex);
86
96
  }, [refs, innerRef, onIndexChange, disabled]);
87
97
  var handleClick = function handleClick(event) {
88
- event.currentTarget.scrollIntoView({
89
- block: 'nearest',
90
- inline: 'nearest'
91
- });
92
98
  if (!onClick) {
93
99
  return;
94
100
  }
@@ -11,6 +11,7 @@ var _tokens = /*#__PURE__*/require("../../../tokens");
11
11
  var _utils = /*#__PURE__*/require("../../../../../utils");
12
12
  var _TabsContext = /*#__PURE__*/require("../../../TabsContext");
13
13
  var _Icon = /*#__PURE__*/require("../../../../_Icon");
14
+ var _utils2 = /*#__PURE__*/require("../../../utils");
14
15
  var _VerticalTabs = /*#__PURE__*/require("./VerticalTabs.styles");
15
16
  var _base = /*#__PURE__*/require("./variations/_size/base");
16
17
  var _base2 = /*#__PURE__*/require("./variations/_view/base");
@@ -78,13 +79,7 @@ var verticalTabsRoot = exports.verticalTabsRoot = function verticalTabsRoot(Root
78
79
  return;
79
80
  }
80
81
  var scrollTop = Math.round(scrollRef.current.scrollTop);
81
- var firstOverflowingTab = refs.items.slice().reverse().find(function (item) {
82
- if (!item.current || item.current.offsetTop === undefined) {
83
- return;
84
- }
85
- var tabStartY = item.current.offsetTop;
86
- return tabStartY < scrollTop;
87
- });
82
+ var firstOverflowingTab = (0, _utils2.getFirstOverflowingTab)(refs.items.slice().reverse(), scrollTop);
88
83
  firstOverflowingTab === null || firstOverflowingTab === void 0 || (_firstOverflowingTab$ = firstOverflowingTab.current) === null || _firstOverflowingTab$ === void 0 || _firstOverflowingTab$.scrollIntoView({
89
84
  block: 'start',
90
85
  inline: 'nearest'
@@ -96,13 +91,7 @@ var verticalTabsRoot = exports.verticalTabsRoot = function verticalTabsRoot(Root
96
91
  return;
97
92
  }
98
93
  var scrollBottom = Math.round(scrollRef.current.scrollTop + scrollRef.current.clientHeight);
99
- var lastOverflowingTab = refs.items.find(function (item) {
100
- if (!item.current || item.current.offsetTop === undefined) {
101
- return;
102
- }
103
- var tabEndY = item.current.offsetTop + item.current.offsetHeight;
104
- return tabEndY > scrollBottom;
105
- });
94
+ var lastOverflowingTab = (0, _utils2.getLastOverflowingTab)(refs.items, scrollBottom);
106
95
  lastOverflowingTab === null || lastOverflowingTab === void 0 || (_lastOverflowingTab$c = lastOverflowingTab.current) === null || _lastOverflowingTab$c === void 0 || _lastOverflowingTab$c.scrollIntoView({
107
96
  block: 'end',
108
97
  inline: 'nearest'
@@ -168,18 +157,22 @@ var verticalTabsRoot = exports.verticalTabsRoot = function verticalTabsRoot(Root
168
157
  });
169
158
  }
170
159
  }, [index]);
171
- (0, _react.useEffect)(function () {
160
+ (0, _react.useLayoutEffect)(function () {
172
161
  var _scrollRef$current, _scrollRef$current2;
173
162
  setLastItemVisible(((_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.scrollHeight) === ((_scrollRef$current2 = scrollRef.current) === null || _scrollRef$current2 === void 0 ? void 0 : _scrollRef$current2.clientHeight));
174
163
  }, []);
175
164
 
176
165
  // Этот хук компенсирует появление верхней стрелки при прокрутке
177
- (0, _react.useEffect)(function () {
166
+ (0, _react.useLayoutEffect)(function () {
167
+ var _lastOverflowingTab$c2;
178
168
  if (firstItemVisible || !scrollRef.current || !upArrowRef.current) {
179
169
  return;
180
170
  }
181
- scrollRef.current.scrollTo({
182
- top: Math.round(scrollRef.current.scrollTop + upArrowRef.current.clientHeight)
171
+ var scrollBottom = Math.round(scrollRef.current.scrollTop + scrollRef.current.clientHeight);
172
+ var lastOverflowingTab = (0, _utils2.getLastOverflowingTab)(refs.items, scrollBottom);
173
+ lastOverflowingTab === null || lastOverflowingTab === void 0 || (_lastOverflowingTab$c2 = lastOverflowingTab.current) === null || _lastOverflowingTab$c2 === void 0 || _lastOverflowingTab$c2.scrollIntoView({
174
+ block: 'end',
175
+ inline: 'nearest'
183
176
  });
184
177
  }, [firstItemVisible, scrollRef, upArrowRef]);
185
178
  return /*#__PURE__*/_react["default"].createElement(_TabsContext.TabsContext.Provider, {
@@ -0,0 +1,24 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.getLastOverflowingTab = exports.getFirstOverflowingTab = void 0;
7
+ var getFirstOverflowingTab = exports.getFirstOverflowingTab = function getFirstOverflowingTab(items, maxScroll) {
8
+ return items.find(function (item) {
9
+ if (!item.current || item.current.offsetLeft === undefined) {
10
+ return;
11
+ }
12
+ var tabStartX = item.current.offsetLeft;
13
+ return tabStartX < maxScroll;
14
+ });
15
+ };
16
+ var getLastOverflowingTab = exports.getLastOverflowingTab = function getLastOverflowingTab(items, minScroll) {
17
+ return items.find(function (item) {
18
+ if (!item.current || item.current.offsetLeft === undefined) {
19
+ return;
20
+ }
21
+ var tabEndX = item.current.offsetLeft + item.current.offsetWidth;
22
+ return tabEndX > minScroll;
23
+ });
24
+ };
@@ -35,7 +35,7 @@ var Popover = /*#__PURE__*/(0, _engines.component)(_Popover.popoverConfig);
35
35
  var StyledPopover = /*#__PURE__*/(0, _base["default"])(Popover, {
36
36
  target: "ecc7g4f0",
37
37
  label: "plasma-new-hope__StyledPopover"
38
- })(_Popover.popoverTokens.arrowMaskWidth, ":var(", _Tooltip2.tokens.arrowMaskWidth, ");", _Popover.popoverTokens.arrowMaskHeight, ":var(", _Tooltip2.tokens.arrowMaskHeight, ");", _Popover.popoverTokens.arrowMaskImage, ":var(", _Tooltip2.tokens.arrowMaskImage, ");", _Popover.popoverTokens.arrowBackground, ":var(", _Tooltip2.tokens.arrowBackground, ");", _Popover.popoverTokens.arrowHeight, ":var(", _Tooltip2.tokens.arrowHeight, ");", _Popover.popoverTokens.arrowEdgeMargin, ":var(", _Tooltip2.tokens.arrowEdgeMargin, ");" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvVG9vbHRpcC9Ub29sdGlwLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFxQnFDIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvVG9vbHRpcC9Ub29sdGlwLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyB1c2VFZmZlY3QsIGZvcndhcmRSZWYsIHVzZVN0YXRlLCB1c2VSZWYgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmltcG9ydCB7IFJvb3RQcm9wcywgY29tcG9uZW50IH0gZnJvbSAnLi4vLi4vZW5naW5lcyc7XG5pbXBvcnQgeyBwb3BvdmVyQ29uZmlnLCBwb3BvdmVyVG9rZW5zIH0gZnJvbSAnLi4vUG9wb3Zlcic7XG5pbXBvcnQgeyBjeCB9IGZyb20gJy4uLy4uL3V0aWxzJztcblxuaW1wb3J0IHsgVG9vbHRpcFByb3BzIH0gZnJvbSAnLi9Ub29sdGlwLnR5cGVzJztcbmltcG9ydCB7IFN0eWxlZENvbnRlbnRMZWZ0LCBUb29sdGlwUm9vdCB9IGZyb20gJy4vVG9vbHRpcC5zdHlsZXMnO1xuaW1wb3J0IHsgYmFzZSBhcyB2aWV3Q1NTIH0gZnJvbSAnLi92YXJpYXRpb25zL192aWV3L2Jhc2UnO1xuaW1wb3J0IHsgYmFzZSBhcyBzaXplQ1NTIH0gZnJvbSAnLi92YXJpYXRpb25zL19zaXplL2Jhc2UnO1xuaW1wb3J0IHsgdG9rZW5zIH0gZnJvbSAnLi9Ub29sdGlwLnRva2Vucyc7XG5cbmNvbnN0IEVTQ0FQRV9LRVlDT0RFID0gMjc7XG5cbmNvbnN0IGdldFN0cmluZ1ZhbHVlID0gKHZhbHVlPzogbnVtYmVyIHwgc3RyaW5nKSA9PiB7XG4gICAgcmV0dXJuIHR5cGVvZiB2YWx1ZSA9PT0gJ251bWJlcicgPyBgJHt2YWx1ZX1yZW1gIDogdmFsdWU7XG59O1xuXG5jb25zdCBQb3BvdmVyID0gY29tcG9uZW50KHBvcG92ZXJDb25maWcpO1xuXG5jb25zdCBTdHlsZWRQb3BvdmVyID0gc3R5bGVkKFBvcG92ZXIpYFxuICAgICR7cG9wb3ZlclRva2Vucy5hcnJvd01hc2tXaWR0aH06IHZhcigke3Rva2Vucy5hcnJvd01hc2tXaWR0aH0pO1xuICAgICR7cG9wb3ZlclRva2Vucy5hcnJvd01hc2tIZWlnaHR9OiB2YXIoJHt0b2tlbnMuYXJyb3dNYXNrSGVpZ2h0fSk7XG4gICAgJHtwb3BvdmVyVG9rZW5zLmFycm93TWFza0ltYWdlfTogdmFyKCR7dG9rZW5zLmFycm93TWFza0ltYWdlfSk7XG4gICAgJHtwb3BvdmVyVG9rZW5zLmFycm93QmFja2dyb3VuZH06IHZhcigke3Rva2Vucy5hcnJvd0JhY2tncm91bmR9KTtcbiAgICAke3BvcG92ZXJUb2tlbnMuYXJyb3dIZWlnaHR9OiB2YXIoJHt0b2tlbnMuYXJyb3dIZWlnaHR9KTtcbiAgICAke3BvcG92ZXJUb2tlbnMuYXJyb3dFZGdlTWFyZ2lufTogdmFyKCR7dG9rZW5zLmFycm93RWRnZU1hcmdpbn0pO1xuYDtcblxuLyoqXG4gKiDQmtC+0LzQv9C+0L3QtdC90YIg0LTQu9GPINGC0LXQutGB0YLQvtCy0YvRhSDQv9C+0LTRgdC60LDQt9C+0LouINCe0YHQvdC+0LLQvdC+0LUg0L/RgNC10LTQvdCw0LfQvdCw0YfQtdC90LjQtSDigJQg0L/QvtC00L/QuNGB0Lgg0Log0LHQu9C+0LrQsNC8LlxuICovXG5cbmV4cG9ydCBjb25zdCB0b29sdGlwUm9vdCA9IChSb290OiBSb290UHJvcHM8SFRNTERpdkVsZW1lbnQsIE9taXQ8VG9vbHRpcFByb3BzLCAnb3BlbmVkJyB8ICd0ZXh0Jz4+KSA9PlxuICAgIGZvcndhcmRSZWY8SFRNTERpdkVsZW1lbnQsIFRvb2x0aXBQcm9wcz4oXG4gICAgICAgIChcbiAgICAgICAgICAgIHtcbiAgICAgICAgICAgICAgICBpZCxcbiAgICAgICAgICAgICAgICB0ZXh0LFxuICAgICAgICAgICAgICAgIG9wZW5lZCxcbiAgICAgICAgICAgICAgICBpc1Zpc2libGUsXG4gICAgICAgICAgICAgICAgaXNPcGVuLFxuICAgICAgICAgICAgICAgIGhhc0Fycm93ID0gdHJ1ZSxcbiAgICAgICAgICAgICAgICBhcnJvdyxcbiAgICAgICAgICAgICAgICBhbmltYXRlZCxcbiAgICAgICAgICAgICAgICBvZmZzZXQgPSBbMCwgOF0sXG4gICAgICAgICAgICAgICAgbWluV2lkdGgsXG4gICAgICAgICAgICAgICAgbWF4V2lkdGgsXG4gICAgICAgICAgICAgICAgcGxhY2VtZW50ID0gJ2JvdHRvbScsXG4gICAgICAgICAgICAgICAgdXNlUG9ydGFsID0gdHJ1ZSxcbiAgICAgICAgICAgICAgICB0YXJnZXQsXG4gICAgICAgICAgICAgICAgY2hpbGRyZW4sXG4gICAgICAgICAgICAgICAgb25EaXNtaXNzLFxuICAgICAgICAgICAgICAgIHZpZXcsXG4gICAgICAgICAgICAgICAgc2l6ZSxcbiAgICAgICAgICAgICAgICBjb250ZW50TGVmdCxcbiAgICAgICAgICAgICAgICB6SW5kZXggPSAnOTIwMCcsXG4gICAgICAgICAgICAgICAgY2xhc3NOYW1lLFxuICAgICAgICAgICAgICAgIHN0eWxlLFxuICAgICAgICAgICAgICAgIGhvdmVyVGltZW91dCA9IDMwMCxcbiAgICAgICAgICAgICAgICB0cmlnZ2VyLFxuICAgICAgICAgICAgICAgIC4uLnJlc3RcbiAgICAgICAgICAgIH0sXG4gICAgICAgICAgICBvdXRlclJlZixcbiAgICAgICAgKSA9PiB7XG4gICAgICAgICAgICBjb25zdCBbcmVmLCBzZXRSZWZdID0gdXNlU3RhdGU8SFRNTERpdkVsZW1lbnQgfCBudWxsPihudWxsKTtcbiAgICAgICAgICAgIGNvbnN0IHRpbWVvdXRSZWYgPSB1c2VSZWY8bnVtYmVyIHwgdW5kZWZpbmVkPigpO1xuICAgICAgICAgICAgY29uc3QgW2lzT3BlbmVkLCBzZXRJc09wZW5lZF0gPSB1c2VTdGF0ZShmYWxzZSk7XG4gICAgICAgICAgICBjb25zdCBbaXNIb3ZlcmVkLCBzZXRJc0hvdmVyZWRdID0gdXNlU3RhdGUoZmFsc2UpO1xuXG4gICAgICAgICAgICAvLyBUT0RPINGD0LHRgNCw0YLRjCDQv9C+0YHQu9C1INC+0YLQutCw0LfQsCDQvtGCINGB0YLQsNGA0L7Qs9C+IEFQSVxuICAgICAgICAgICAgY29uc3QgaW5uZXJJc09wZW4gPSBCb29sZWFuKGlzVmlzaWJsZSB8fCBpc09wZW4gfHwgb3BlbmVkKTtcbiAgICAgICAgICAgIGNvbnN0IGlubmVySGFzQXJyb3cgPSBhcnJvdyB8fCBoYXNBcnJvdztcbiAgICAgICAgICAgIGNvbnN0IHNob3dUb29sdGlwID0gaW5uZXJJc09wZW4gJiYgQm9vbGVhbih0ZXh0KTtcblxuICAgICAgICAgICAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAgICAgICAgICAgICBjb25zdCBvbktleURvd24gPSAoZXZlbnQ6IEtleWJvYXJkRXZlbnQpID0+IHtcbiAgICAgICAgICAgICAgICAgICAgaWYgKGV2ZW50LmtleUNvZGUgPT09IEVTQ0FQRV9LRVlDT0RFKSB7XG4gICAgICAgICAgICAgICAgICAgICAgICBvbkRpc21pc3M/LigpO1xuICAgICAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgfTtcblxuICAgICAgICAgICAgICAgIHdpbmRvdy5hZGRFdmVudExpc3RlbmVyKCdrZXlkb3duJywgb25LZXlEb3duKTtcblxuICAgICAgICAgICAgICAgIHJldHVybiAoKSA9PiB7XG4gICAgICAgICAgICAgICAgICAgIHdpbmRvdy5yZW1vdmVFdmVudExpc3RlbmVyKCdrZXlkb3duJywgb25LZXlEb3duKTtcbiAgICAgICAgICAgICAgICB9O1xuICAgICAgICAgICAgfSwgW10pO1xuXG4gICAgICAgICAgICBjb25zdCBvbk1vdXNlRW50ZXIgPSAoKSA9PiB7XG4gICAgICAgICAgICAgICAgY2xlYXJUaW1lb3V0KHRpbWVvdXRSZWYuY3VycmVudCk7XG4gICAgICAgICAgICAgICAgc2V0SXNIb3ZlcmVkKHRydWUpO1xuICAgICAgICAgICAgfTtcblxuICAgICAgICAgICAgY29uc3Qgb25Nb3VzZUxlYXZlID0gKCkgPT4ge1xuICAgICAgICAgICAgICAgIHRpbWVvdXRSZWYuY3VycmVudCA9IHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgICAgICAgICAgICAgICBzZXRJc0hvdmVyZWQoZmFsc2UpO1xuICAgICAgICAgICAgICAgIH0sIGhvdmVyVGltZW91dCk7XG4gICAgICAgICAgICB9O1xuXG4gICAgICAgICAgICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgICAgICAgICAgICAgIHJldHVybiAoKSA9PiBjbGVhclRpbWVvdXQodGltZW91dFJlZi5jdXJyZW50KTtcbiAgICAgICAgICAgIH0sIFt0cmlnZ2VyXSk7XG5cbiAgICAgICAgICAgIGNvbnN0IG9uVG9nZ2xlID0gKGlzT3BlbjogYm9vbGVhbikgPT4ge1xuICAgICAgICAgICAgICAgIGlmICh0cmlnZ2VyID09PSAnaG92ZXInKSB7XG4gICAgICAgICAgICAgICAgICAgIGlmIChpc09wZW4pIHtcbiAgICAgICAgICAgICAgICAgICAgICAgIGNsZWFyVGltZW91dCh0aW1lb3V0UmVmLmN1cnJlbnQpO1xuICAgICAgICAgICAgICAgICAgICAgICAgc2V0SXNPcGVuZWQodHJ1ZSk7XG4gICAgICAgICAgICAgICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgICAgICAgICAgICAgICB0aW1lb3V0UmVmLmN1cnJlbnQgPSBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBzZXRJc09wZW5lZChmYWxzZSk7XG4gICAgICAgICAgICAgICAgICAgICAgICB9LCBob3ZlclRpbWVvdXQpO1xuICAgICAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICAgICAgICAgICAgc2V0SXNPcGVuZWQoaXNPcGVuKTtcbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICB9O1xuXG4gICAgICAgICAgICByZXR1cm4gKFxuICAgICAgICAgICAgICAgIDxTdHlsZWRQb3BvdmVyXG4gICAgICAgICAgICAgICAgICAgIG9wZW5lZD17c2hvd1Rvb2x0aXAgfHwgaXNPcGVuZWQgfHwgaXNIb3ZlcmVkfVxuICAgICAgICAgICAgICAgICAgICBwbGFjZW1lbnQ9e3BsYWNlbWVudH1cbiAgICAgICAgICAgICAgICAgICAgb2Zmc2V0PXtvZmZzZXR9XG4gICAgICAgICAgICAgICAgICAgIHpJbmRleD17ekluZGV4fVxuICAgICAgICAgICAgICAgICAgICB0YXJnZXQ9e3RhcmdldCB8fCBjaGlsZHJlbn1cbiAgICAgICAgICAgICAgICAgICAgdXNlUG9ydGFsPXt1c2VQb3J0YWx9XG4gICAgICAgICAgICAgICAgICAgIGhhc0Fycm93PXtpbm5lckhhc0Fycm93fVxuICAgICAgICAgICAgICAgICAgICBhcmlhLWhpZGRlbj17IWlubmVySXNPcGVufVxuICAgICAgICAgICAgICAgICAgICBhcmlhLWxpdmU9XCJwb2xpdGVcIlxuICAgICAgICAgICAgICAgICAgICByb2xlPVwidG9vbHRpcFwiXG4gICAgICAgICAgICAgICAgICAgIGFuaW1hdGVkPXthbmltYXRlZH1cbiAgICAgICAgICAgICAgICAgICAgY2xhc3NOYW1lPXtjeChyZWY/LmNsYXNzTGlzdC50b1N0cmluZygpKX1cbiAgICAgICAgICAgICAgICAgICAgey4uLigodHJpZ2dlciA9PT0gJ2hvdmVyJyB8fCB0cmlnZ2VyID09PSAnY2xpY2snKSAmJiB7IHRyaWdnZXIsIG9uVG9nZ2xlIH0pfVxuICAgICAgICAgICAgICAgICAgICB7Li4ucmVzdH1cbiAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICAgIDxSb290XG4gICAgICAgICAgICAgICAgICAgICAgICB2aWV3PXt2aWV3fVxuICAgICAgICAgICAgICAgICAgICAgICAgc2l6ZT17c2l6ZX1cbiAgICAgICAgICAgICAgICAgICAgICAgIHJlZj17c2V0UmVmfVxuICAgICAgICAgICAgICAgICAgICAgICAgY2xhc3NOYW1lPXtjbGFzc05hbWV9XG4gICAgICAgICAgICAgICAgICAgICAgICBzdHlsZT17c3R5bGV9XG4gICAgICAgICAgICAgICAgICAgICAgICB7Li4uKHRyaWdnZXIgPT09ICdob3ZlcicgJiYgeyBvbk1vdXNlRW50ZXIsIG9uTW91c2VMZWF2ZSB9KX1cbiAgICAgICAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgICAgICAgICAgPFRvb2x0aXBSb290XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgcmVmPXtvdXRlclJlZn1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBpZD17aWR9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgbWF4V2lkdGg9e2dldFN0cmluZ1ZhbHVlKG1heFdpZHRoKX1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBtaW5XaWR0aD17Z2V0U3RyaW5nVmFsdWUobWluV2lkdGgpfVxuICAgICAgICAgICAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIHtjb250ZW50TGVmdCAmJiA8U3R5bGVkQ29udGVudExlZnQ+e2NvbnRlbnRMZWZ0fTwvU3R5bGVkQ29udGVudExlZnQ+fVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIHt0ZXh0fVxuICAgICAgICAgICAgICAgICAgICAgICAgPC9Ub29sdGlwUm9vdD5cbiAgICAgICAgICAgICAgICAgICAgPC9Sb290PlxuICAgICAgICAgICAgICAgIDwvU3R5bGVkUG9wb3Zlcj5cbiAgICAgICAgICAgICk7XG4gICAgICAgIH0sXG4gICAgKTtcblxuZXhwb3J0IGNvbnN0IHRvb2x0aXBDb25maWcgPSB7XG4gICAgbmFtZTogJ1Rvb2x0aXAnLFxuICAgIHRhZzogJ2RpdicsXG4gICAgbGF5b3V0OiB0b29sdGlwUm9vdCxcbiAgICBiYXNlOiAnJyxcbiAgICB2YXJpYXRpb25zOiB7XG4gICAgICAgIHZpZXc6IHtcbiAgICAgICAgICAgIGNzczogdmlld0NTUyxcbiAgICAgICAgfSxcbiAgICAgICAgc2l6ZToge1xuICAgICAgICAgICAgY3NzOiBzaXplQ1NTLFxuICAgICAgICB9LFxuICAgIH0sXG4gICAgZGVmYXVsdHM6IHtcbiAgICAgICAgdmlldzogJ2RlZmF1bHQnLFxuICAgICAgICBzaXplOiAnbScsXG4gICAgfSxcbn07XG4iXX0= */"));
38
+ })(_Popover.popoverTokens.arrowMaskWidth, ":var(", _Tooltip2.tokens.arrowMaskWidth, ");", _Popover.popoverTokens.arrowMaskHeight, ":var(", _Tooltip2.tokens.arrowMaskHeight, ");", _Popover.popoverTokens.arrowMaskImage, ":var(", _Tooltip2.tokens.arrowMaskImage, ");", _Popover.popoverTokens.arrowBackground, ":var(", _Tooltip2.tokens.arrowBackground, ");", _Popover.popoverTokens.arrowHeight, ":var(", _Tooltip2.tokens.arrowHeight, ");", _Popover.popoverTokens.arrowEdgeMargin, ":var(", _Tooltip2.tokens.arrowEdgeMargin, ");" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvVG9vbHRpcC9Ub29sdGlwLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFxQnFDIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvVG9vbHRpcC9Ub29sdGlwLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyB1c2VFZmZlY3QsIGZvcndhcmRSZWYsIHVzZVN0YXRlLCB1c2VSZWYgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmltcG9ydCB7IFJvb3RQcm9wcywgY29tcG9uZW50IH0gZnJvbSAnLi4vLi4vZW5naW5lcyc7XG5pbXBvcnQgeyBwb3BvdmVyQ29uZmlnLCBwb3BvdmVyVG9rZW5zIH0gZnJvbSAnLi4vUG9wb3Zlcic7XG5pbXBvcnQgeyBjeCB9IGZyb20gJy4uLy4uL3V0aWxzJztcblxuaW1wb3J0IHsgVG9vbHRpcFByb3BzIH0gZnJvbSAnLi9Ub29sdGlwLnR5cGVzJztcbmltcG9ydCB7IFN0eWxlZENvbnRlbnRMZWZ0LCBUb29sdGlwUm9vdCB9IGZyb20gJy4vVG9vbHRpcC5zdHlsZXMnO1xuaW1wb3J0IHsgYmFzZSBhcyB2aWV3Q1NTIH0gZnJvbSAnLi92YXJpYXRpb25zL192aWV3L2Jhc2UnO1xuaW1wb3J0IHsgYmFzZSBhcyBzaXplQ1NTIH0gZnJvbSAnLi92YXJpYXRpb25zL19zaXplL2Jhc2UnO1xuaW1wb3J0IHsgdG9rZW5zIH0gZnJvbSAnLi9Ub29sdGlwLnRva2Vucyc7XG5cbmNvbnN0IEVTQ0FQRV9LRVlDT0RFID0gMjc7XG5cbmNvbnN0IGdldFN0cmluZ1ZhbHVlID0gKHZhbHVlPzogbnVtYmVyIHwgc3RyaW5nKSA9PiB7XG4gICAgcmV0dXJuIHR5cGVvZiB2YWx1ZSA9PT0gJ251bWJlcicgPyBgJHt2YWx1ZX1yZW1gIDogdmFsdWU7XG59O1xuXG5jb25zdCBQb3BvdmVyID0gY29tcG9uZW50KHBvcG92ZXJDb25maWcpO1xuXG5jb25zdCBTdHlsZWRQb3BvdmVyID0gc3R5bGVkKFBvcG92ZXIpYFxuICAgICR7cG9wb3ZlclRva2Vucy5hcnJvd01hc2tXaWR0aH06IHZhcigke3Rva2Vucy5hcnJvd01hc2tXaWR0aH0pO1xuICAgICR7cG9wb3ZlclRva2Vucy5hcnJvd01hc2tIZWlnaHR9OiB2YXIoJHt0b2tlbnMuYXJyb3dNYXNrSGVpZ2h0fSk7XG4gICAgJHtwb3BvdmVyVG9rZW5zLmFycm93TWFza0ltYWdlfTogdmFyKCR7dG9rZW5zLmFycm93TWFza0ltYWdlfSk7XG4gICAgJHtwb3BvdmVyVG9rZW5zLmFycm93QmFja2dyb3VuZH06IHZhcigke3Rva2Vucy5hcnJvd0JhY2tncm91bmR9KTtcbiAgICAke3BvcG92ZXJUb2tlbnMuYXJyb3dIZWlnaHR9OiB2YXIoJHt0b2tlbnMuYXJyb3dIZWlnaHR9KTtcbiAgICAke3BvcG92ZXJUb2tlbnMuYXJyb3dFZGdlTWFyZ2lufTogdmFyKCR7dG9rZW5zLmFycm93RWRnZU1hcmdpbn0pO1xuYDtcblxuLyoqXG4gKiDQmtC+0LzQv9C+0L3QtdC90YIg0LTQu9GPINGC0LXQutGB0YLQvtCy0YvRhSDQv9C+0LTRgdC60LDQt9C+0LouINCe0YHQvdC+0LLQvdC+0LUg0L/RgNC10LTQvdCw0LfQvdCw0YfQtdC90LjQtSDigJQg0L/QvtC00L/QuNGB0Lgg0Log0LHQu9C+0LrQsNC8LlxuICovXG5cbmV4cG9ydCBjb25zdCB0b29sdGlwUm9vdCA9IChSb290OiBSb290UHJvcHM8SFRNTERpdkVsZW1lbnQsIE9taXQ8VG9vbHRpcFByb3BzLCAnb3BlbmVkJyB8ICd0ZXh0Jz4+KSA9PlxuICAgIGZvcndhcmRSZWY8SFRNTERpdkVsZW1lbnQsIFRvb2x0aXBQcm9wcz4oXG4gICAgICAgIChcbiAgICAgICAgICAgIHtcbiAgICAgICAgICAgICAgICBpZCxcbiAgICAgICAgICAgICAgICB0ZXh0LFxuICAgICAgICAgICAgICAgIG9wZW5lZCxcbiAgICAgICAgICAgICAgICBpc1Zpc2libGUsXG4gICAgICAgICAgICAgICAgaXNPcGVuLFxuICAgICAgICAgICAgICAgIGhhc0Fycm93ID0gdHJ1ZSxcbiAgICAgICAgICAgICAgICBhcnJvdyxcbiAgICAgICAgICAgICAgICBhbmltYXRlZCxcbiAgICAgICAgICAgICAgICBvZmZzZXQgPSBbMywgOF0sXG4gICAgICAgICAgICAgICAgbWluV2lkdGgsXG4gICAgICAgICAgICAgICAgbWF4V2lkdGgsXG4gICAgICAgICAgICAgICAgcGxhY2VtZW50ID0gJ2JvdHRvbScsXG4gICAgICAgICAgICAgICAgdXNlUG9ydGFsID0gdHJ1ZSxcbiAgICAgICAgICAgICAgICB0YXJnZXQsXG4gICAgICAgICAgICAgICAgY2hpbGRyZW4sXG4gICAgICAgICAgICAgICAgb25EaXNtaXNzLFxuICAgICAgICAgICAgICAgIHZpZXcsXG4gICAgICAgICAgICAgICAgc2l6ZSxcbiAgICAgICAgICAgICAgICBjb250ZW50TGVmdCxcbiAgICAgICAgICAgICAgICB6SW5kZXggPSAnOTIwMCcsXG4gICAgICAgICAgICAgICAgY2xhc3NOYW1lLFxuICAgICAgICAgICAgICAgIHN0eWxlLFxuICAgICAgICAgICAgICAgIGhvdmVyVGltZW91dCA9IDMwMCxcbiAgICAgICAgICAgICAgICB0cmlnZ2VyLFxuICAgICAgICAgICAgICAgIC4uLnJlc3RcbiAgICAgICAgICAgIH0sXG4gICAgICAgICAgICBvdXRlclJlZixcbiAgICAgICAgKSA9PiB7XG4gICAgICAgICAgICBjb25zdCBbcmVmLCBzZXRSZWZdID0gdXNlU3RhdGU8SFRNTERpdkVsZW1lbnQgfCBudWxsPihudWxsKTtcbiAgICAgICAgICAgIGNvbnN0IHRpbWVvdXRSZWYgPSB1c2VSZWY8bnVtYmVyIHwgdW5kZWZpbmVkPigpO1xuICAgICAgICAgICAgY29uc3QgW2lzT3BlbmVkLCBzZXRJc09wZW5lZF0gPSB1c2VTdGF0ZShmYWxzZSk7XG4gICAgICAgICAgICBjb25zdCBbaXNIb3ZlcmVkLCBzZXRJc0hvdmVyZWRdID0gdXNlU3RhdGUoZmFsc2UpO1xuXG4gICAgICAgICAgICAvLyBUT0RPINGD0LHRgNCw0YLRjCDQv9C+0YHQu9C1INC+0YLQutCw0LfQsCDQvtGCINGB0YLQsNGA0L7Qs9C+IEFQSVxuICAgICAgICAgICAgY29uc3QgaW5uZXJJc09wZW4gPSBCb29sZWFuKGlzVmlzaWJsZSB8fCBpc09wZW4gfHwgb3BlbmVkKTtcbiAgICAgICAgICAgIGNvbnN0IGlubmVySGFzQXJyb3cgPSBhcnJvdyB8fCBoYXNBcnJvdztcbiAgICAgICAgICAgIGNvbnN0IHNob3dUb29sdGlwID0gaW5uZXJJc09wZW4gJiYgQm9vbGVhbih0ZXh0KTtcblxuICAgICAgICAgICAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAgICAgICAgICAgICBjb25zdCBvbktleURvd24gPSAoZXZlbnQ6IEtleWJvYXJkRXZlbnQpID0+IHtcbiAgICAgICAgICAgICAgICAgICAgaWYgKGV2ZW50LmtleUNvZGUgPT09IEVTQ0FQRV9LRVlDT0RFKSB7XG4gICAgICAgICAgICAgICAgICAgICAgICBvbkRpc21pc3M/LigpO1xuICAgICAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgfTtcblxuICAgICAgICAgICAgICAgIHdpbmRvdy5hZGRFdmVudExpc3RlbmVyKCdrZXlkb3duJywgb25LZXlEb3duKTtcblxuICAgICAgICAgICAgICAgIHJldHVybiAoKSA9PiB7XG4gICAgICAgICAgICAgICAgICAgIHdpbmRvdy5yZW1vdmVFdmVudExpc3RlbmVyKCdrZXlkb3duJywgb25LZXlEb3duKTtcbiAgICAgICAgICAgICAgICB9O1xuICAgICAgICAgICAgfSwgW10pO1xuXG4gICAgICAgICAgICBjb25zdCBvbk1vdXNlRW50ZXIgPSAoKSA9PiB7XG4gICAgICAgICAgICAgICAgY2xlYXJUaW1lb3V0KHRpbWVvdXRSZWYuY3VycmVudCk7XG4gICAgICAgICAgICAgICAgc2V0SXNIb3ZlcmVkKHRydWUpO1xuICAgICAgICAgICAgfTtcblxuICAgICAgICAgICAgY29uc3Qgb25Nb3VzZUxlYXZlID0gKCkgPT4ge1xuICAgICAgICAgICAgICAgIHRpbWVvdXRSZWYuY3VycmVudCA9IHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgICAgICAgICAgICAgICBzZXRJc0hvdmVyZWQoZmFsc2UpO1xuICAgICAgICAgICAgICAgIH0sIGhvdmVyVGltZW91dCk7XG4gICAgICAgICAgICB9O1xuXG4gICAgICAgICAgICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgICAgICAgICAgICAgIHJldHVybiAoKSA9PiBjbGVhclRpbWVvdXQodGltZW91dFJlZi5jdXJyZW50KTtcbiAgICAgICAgICAgIH0sIFt0cmlnZ2VyXSk7XG5cbiAgICAgICAgICAgIGNvbnN0IG9uVG9nZ2xlID0gKGlzT3BlbjogYm9vbGVhbikgPT4ge1xuICAgICAgICAgICAgICAgIGlmICh0cmlnZ2VyID09PSAnaG92ZXInKSB7XG4gICAgICAgICAgICAgICAgICAgIGlmIChpc09wZW4pIHtcbiAgICAgICAgICAgICAgICAgICAgICAgIGNsZWFyVGltZW91dCh0aW1lb3V0UmVmLmN1cnJlbnQpO1xuICAgICAgICAgICAgICAgICAgICAgICAgc2V0SXNPcGVuZWQodHJ1ZSk7XG4gICAgICAgICAgICAgICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgICAgICAgICAgICAgICB0aW1lb3V0UmVmLmN1cnJlbnQgPSBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBzZXRJc09wZW5lZChmYWxzZSk7XG4gICAgICAgICAgICAgICAgICAgICAgICB9LCBob3ZlclRpbWVvdXQpO1xuICAgICAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICAgICAgICAgICAgc2V0SXNPcGVuZWQoaXNPcGVuKTtcbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICB9O1xuXG4gICAgICAgICAgICByZXR1cm4gKFxuICAgICAgICAgICAgICAgIDxTdHlsZWRQb3BvdmVyXG4gICAgICAgICAgICAgICAgICAgIG9wZW5lZD17c2hvd1Rvb2x0aXAgfHwgaXNPcGVuZWQgfHwgaXNIb3ZlcmVkfVxuICAgICAgICAgICAgICAgICAgICBwbGFjZW1lbnQ9e3BsYWNlbWVudH1cbiAgICAgICAgICAgICAgICAgICAgb2Zmc2V0PXtvZmZzZXR9XG4gICAgICAgICAgICAgICAgICAgIHpJbmRleD17ekluZGV4fVxuICAgICAgICAgICAgICAgICAgICB0YXJnZXQ9e3RhcmdldCB8fCBjaGlsZHJlbn1cbiAgICAgICAgICAgICAgICAgICAgdXNlUG9ydGFsPXt1c2VQb3J0YWx9XG4gICAgICAgICAgICAgICAgICAgIGhhc0Fycm93PXtpbm5lckhhc0Fycm93fVxuICAgICAgICAgICAgICAgICAgICBhcmlhLWhpZGRlbj17IWlubmVySXNPcGVufVxuICAgICAgICAgICAgICAgICAgICBhcmlhLWxpdmU9XCJwb2xpdGVcIlxuICAgICAgICAgICAgICAgICAgICByb2xlPVwidG9vbHRpcFwiXG4gICAgICAgICAgICAgICAgICAgIGFuaW1hdGVkPXthbmltYXRlZH1cbiAgICAgICAgICAgICAgICAgICAgY2xhc3NOYW1lPXtjeChyZWY/LmNsYXNzTGlzdC50b1N0cmluZygpKX1cbiAgICAgICAgICAgICAgICAgICAgey4uLigodHJpZ2dlciA9PT0gJ2hvdmVyJyB8fCB0cmlnZ2VyID09PSAnY2xpY2snKSAmJiB7IHRyaWdnZXIsIG9uVG9nZ2xlIH0pfVxuICAgICAgICAgICAgICAgICAgICB7Li4ucmVzdH1cbiAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICAgIDxSb290XG4gICAgICAgICAgICAgICAgICAgICAgICB2aWV3PXt2aWV3fVxuICAgICAgICAgICAgICAgICAgICAgICAgc2l6ZT17c2l6ZX1cbiAgICAgICAgICAgICAgICAgICAgICAgIHJlZj17c2V0UmVmfVxuICAgICAgICAgICAgICAgICAgICAgICAgY2xhc3NOYW1lPXtjbGFzc05hbWV9XG4gICAgICAgICAgICAgICAgICAgICAgICBzdHlsZT17c3R5bGV9XG4gICAgICAgICAgICAgICAgICAgICAgICB7Li4uKHRyaWdnZXIgPT09ICdob3ZlcicgJiYgeyBvbk1vdXNlRW50ZXIsIG9uTW91c2VMZWF2ZSB9KX1cbiAgICAgICAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgICAgICAgICAgPFRvb2x0aXBSb290XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgcmVmPXtvdXRlclJlZn1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBpZD17aWR9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgbWF4V2lkdGg9e2dldFN0cmluZ1ZhbHVlKG1heFdpZHRoKX1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBtaW5XaWR0aD17Z2V0U3RyaW5nVmFsdWUobWluV2lkdGgpfVxuICAgICAgICAgICAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIHtjb250ZW50TGVmdCAmJiA8U3R5bGVkQ29udGVudExlZnQ+e2NvbnRlbnRMZWZ0fTwvU3R5bGVkQ29udGVudExlZnQ+fVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIHt0ZXh0fVxuICAgICAgICAgICAgICAgICAgICAgICAgPC9Ub29sdGlwUm9vdD5cbiAgICAgICAgICAgICAgICAgICAgPC9Sb290PlxuICAgICAgICAgICAgICAgIDwvU3R5bGVkUG9wb3Zlcj5cbiAgICAgICAgICAgICk7XG4gICAgICAgIH0sXG4gICAgKTtcblxuZXhwb3J0IGNvbnN0IHRvb2x0aXBDb25maWcgPSB7XG4gICAgbmFtZTogJ1Rvb2x0aXAnLFxuICAgIHRhZzogJ2RpdicsXG4gICAgbGF5b3V0OiB0b29sdGlwUm9vdCxcbiAgICBiYXNlOiAnJyxcbiAgICB2YXJpYXRpb25zOiB7XG4gICAgICAgIHZpZXc6IHtcbiAgICAgICAgICAgIGNzczogdmlld0NTUyxcbiAgICAgICAgfSxcbiAgICAgICAgc2l6ZToge1xuICAgICAgICAgICAgY3NzOiBzaXplQ1NTLFxuICAgICAgICB9LFxuICAgIH0sXG4gICAgZGVmYXVsdHM6IHtcbiAgICAgICAgdmlldzogJ2RlZmF1bHQnLFxuICAgICAgICBzaXplOiAnbScsXG4gICAgfSxcbn07XG4iXX0= */"));
39
39
 
40
40
  /**
41
41
  * Компонент для текстовых подсказок. Основное предназначение — подписи к блокам.
@@ -53,7 +53,7 @@ var tooltipRoot = exports.tooltipRoot = function tooltipRoot(Root) {
53
53
  arrow = _ref.arrow,
54
54
  animated = _ref.animated,
55
55
  _ref$offset = _ref.offset,
56
- offset = _ref$offset === void 0 ? [0, 8] : _ref$offset,
56
+ offset = _ref$offset === void 0 ? [3, 8] : _ref$offset,
57
57
  minWidth = _ref.minWidth,
58
58
  maxWidth = _ref.maxWidth,
59
59
  _ref$placement = _ref.placement,
@@ -5,18 +5,40 @@ import type { StoryObj, Meta } from '@storybook/react';
5
5
 
6
6
  import { Button } from '../Button/Button';
7
7
  import { WithTheme } from '../../../_helpers';
8
+ import { IconDisclosureRight } from '../../../../components/_Icon';
9
+ import { IconButton } from '../IconButton/IconButton';
8
10
 
9
- import { Popover } from './Popover';
11
+ import { Popover, PopoverPlacement } from './Popover';
10
12
 
11
13
  import './style.css';
12
14
 
15
+ const placements: Array<PopoverPlacement> = [
16
+ 'top',
17
+ 'top-start',
18
+ 'top-end',
19
+
20
+ 'bottom',
21
+ 'bottom-start',
22
+ 'bottom-end',
23
+
24
+ 'left',
25
+ 'left-start',
26
+ 'left-end',
27
+
28
+ 'right',
29
+ 'right-start',
30
+ 'right-end',
31
+
32
+ 'auto',
33
+ ];
34
+
13
35
  const meta: Meta<typeof Popover> = {
14
36
  title: 'b2c/Overlay/Popover',
15
37
  decorators: [WithTheme],
16
38
  component: Popover,
17
39
  argTypes: {
18
40
  placement: {
19
- options: ['top', 'bottom', 'right', 'left', 'auto'],
41
+ options: placements,
20
42
  control: {
21
43
  type: 'select',
22
44
  },
@@ -116,5 +138,8 @@ const StoryDefault = (args: StoryPopoverProps) => {
116
138
  };
117
139
 
118
140
  export const Default: StoryObj<StoryPopoverProps> = {
141
+ args: {
142
+ placement: 'bottom-start',
143
+ },
119
144
  render: (args) => <StoryDefault {...args} />,
120
145
  };
@@ -23,6 +23,7 @@ import { Portal } from '../Portal';
23
23
  import { base as viewCSS } from './variations/_view/base';
24
24
  import { StyledArrow, StyledPopover, StyledRoot, StyledWrapper } from './Popover.styles';
25
25
  import { classes } from './Popover.tokens';
26
+ import { usePopoverOffset } from './hooks/usePopoverOffset';
26
27
  export var ESCAPE_KEYCODE = 27;
27
28
  export var POPOVER_PORTAL_ID = 'plasma-popover-root';
28
29
 
@@ -66,6 +67,7 @@ export var popoverRoot = function popoverRoot(Root) {
66
67
  var popoverRef = useRef(null);
67
68
  var handleRef = useForkRef(rootRef, outerRootRef);
68
69
  var portalRef = useRef(null);
70
+ var targetRef = useRef(null);
69
71
  var trapRef = useFocusTrap(innerIsOpen && isFocusTrapped);
70
72
  var popoverForkRef = useForkRef(popoverRef, trapRef);
71
73
  var _useState = useState(null),
@@ -84,6 +86,11 @@ export var popoverRoot = function popoverRoot(Root) {
84
86
  var isAuto = isAutoArray || placement.startsWith('auto');
85
87
  var openClass = innerIsOpen && shouldRender ? classes.open : undefined;
86
88
  var animatedClass = animated ? classes.animate : undefined;
89
+ var offsetInner = usePopoverOffset({
90
+ handleRef: targetRef,
91
+ placement: placement,
92
+ offsetOuter: offset
93
+ });
87
94
  var _usePopper = usePopper(rootRef.current, popoverRef.current, {
88
95
  // TODO: #1121
89
96
  // eslint-disable-next-line no-nested-ternary
@@ -96,7 +103,7 @@ export var popoverRoot = function popoverRoot(Root) {
96
103
  }, {
97
104
  name: 'offset',
98
105
  options: {
99
- offset: [offset[0], offset[1]]
106
+ offset: [offsetInner[0], offsetInner[1]]
100
107
  }
101
108
  }, {
102
109
  name: 'flip',
@@ -227,7 +234,8 @@ export var popoverRoot = function popoverRoot(Root) {
227
234
  }, /*#__PURE__*/React.createElement(StyledWrapper, {
228
235
  className: cx(classes.wrapper, ! /*#__PURE__*/isValidElement(target) && classes.targetAsRef),
229
236
  onMouseEnter: onMouseEnter,
230
- onMouseLeave: onMouseLeave
237
+ onMouseLeave: onMouseLeave,
238
+ ref: targetRef
231
239
  }, /*#__PURE__*/React.createElement(StyledRoot, {
232
240
  ref: handleRef,
233
241
  onClick: onClick,
@@ -0,0 +1,45 @@
1
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
2
+ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
3
+ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
4
+ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
5
+ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
6
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
7
+ import { useEffect, useState } from 'react';
8
+ var allowedPlacements = ['top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-start', 'left-end', 'right-start', 'right-end'];
9
+ var widthThreshold = 28;
10
+ var offsetXStartThreshold = 17;
11
+ var offsetXEndThreshold = 19;
12
+ export var usePopoverOffset = function usePopoverOffset(_ref) {
13
+ var handleRef = _ref.handleRef,
14
+ placement = _ref.placement,
15
+ offsetOuter = _ref.offsetOuter;
16
+ var _useState = useState(offsetOuter),
17
+ _useState2 = _slicedToArray(_useState, 2),
18
+ offset = _useState2[0],
19
+ setOffset = _useState2[1];
20
+ useEffect(function () {
21
+ var refElement = handleRef.current;
22
+ if (!refElement || !allowedPlacements.includes(placement)) {
23
+ setOffset(offsetOuter);
24
+ return;
25
+ }
26
+ var _refElement$getBoundi = refElement.getBoundingClientRect(),
27
+ width = _refElement$getBoundi.width,
28
+ height = _refElement$getBoundi.height;
29
+ var isVertical = (placement === null || placement === void 0 ? void 0 : placement.startsWith('top')) || (placement === null || placement === void 0 ? void 0 : placement.startsWith('bottom'));
30
+ var isEnd = placement === null || placement === void 0 ? void 0 : placement.endsWith('end');
31
+ var isStart = placement === null || placement === void 0 ? void 0 : placement.endsWith('start');
32
+ var offsetX = offsetOuter[0];
33
+ var offsetY = offsetOuter[1];
34
+ if (isVertical) {
35
+ if ((isStart || isEnd) && width < widthThreshold) {
36
+ offsetX = isEnd ? offsetXStartThreshold - width / 2 + offsetOuter[0] : -offsetXStartThreshold + width / 2 - offsetOuter[0];
37
+ }
38
+ }
39
+ if (!isVertical && (isStart || isEnd) && height < widthThreshold) {
40
+ offsetX = isStart ? -offsetXEndThreshold + height / 2 : offsetXEndThreshold - height / 2;
41
+ }
42
+ setOffset([offsetX, offsetY]);
43
+ }, [handleRef, placement, offsetOuter]);
44
+ return offset;
45
+ };
@@ -97,18 +97,21 @@ export function App() {
97
97
  ```
98
98
 
99
99
  ### Пример с прокруткой
100
+ При выборе таба происходит прокрутка до выбранного таба.
100
101
 
101
102
  ```tsx live
102
103
  import React, { useState } from 'react';
103
- import { Tabs, TabItem } from '@salutejs/{{ package }}';
104
+ import { Tabs, TabItem, Button } from '@salutejs/plasma-web';
104
105
  import { IconClock } from '@salutejs/plasma-icons';
105
106
 
106
107
  export function App() {
107
108
  const items = Array(8).fill(0);
108
109
  const [index, setIndex] = useState(0);
109
110
 
111
+ const specificIndex = 6;
112
+
110
113
  return (
111
- <div>
114
+ <div style=\{{ display:'flex', flexDirection: 'column', gap: '1rem' }}>
112
115
  <Tabs view="divider" size="xs" style=\{{ width: '15rem' }}>
113
116
  {items.map((_, i) => (
114
117
  <TabItem
@@ -124,6 +127,8 @@ export function App() {
124
127
  </TabItem>
125
128
  ))}
126
129
  </Tabs>
130
+
131
+ <Button onClick={() => setIndex(specificIndex)}>{`Выбрать элемент ${specificIndex + 1}`}</Button>
127
132
  </div>
128
133
  );
129
134
  }
@@ -8,7 +8,7 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
8
8
  function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
9
9
  function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
10
10
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
11
- import React, { forwardRef, useRef, useContext, useEffect, useCallback } from 'react';
11
+ import React, { forwardRef, useRef, useContext, useEffect, useCallback, useLayoutEffect } from 'react';
12
12
  import { useForkRef } from '@salutejs/plasma-core';
13
13
  import { classes } from '../../../tokens';
14
14
  import { cx } from '../../../../../utils';
@@ -62,6 +62,16 @@ export var horizontalTabItemRoot = function horizontalTabItemRoot(Root) {
62
62
  return refs.unregister(innerRef);
63
63
  };
64
64
  }, [refs]);
65
+ useLayoutEffect(function () {
66
+ var _innerRef$current;
67
+ if (!selected) {
68
+ return;
69
+ }
70
+ (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 || _innerRef$current.scrollIntoView({
71
+ block: 'nearest',
72
+ inline: 'nearest'
73
+ });
74
+ }, [selected]);
65
75
  var onItemFocus = useCallback(function (event) {
66
76
  if (disabled) {
67
77
  return;
@@ -87,10 +97,6 @@ export var horizontalTabItemRoot = function horizontalTabItemRoot(Root) {
87
97
  refs.setCurrent(focusIndex);
88
98
  }, [refs, innerRef, onIndexChange, disabled]);
89
99
  var handleClick = function handleClick(event) {
90
- event.currentTarget.scrollIntoView({
91
- block: 'nearest',
92
- inline: 'nearest'
93
- });
94
100
  if (!onClick) {
95
101
  return;
96
102
  }
@@ -8,12 +8,13 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
8
8
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
9
9
  function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
10
10
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
11
- import React, { forwardRef, useCallback, useMemo, useState, useEffect, useRef } from 'react';
11
+ import React, { forwardRef, useCallback, useMemo, useState, useRef, useLayoutEffect } from 'react';
12
12
  import { safeUseId } from '@salutejs/plasma-core';
13
13
  import { IconDisclosureLeft, IconDisclosureRight } from '../../../../_Icon';
14
14
  import { classes } from '../../../tokens';
15
15
  import { cx } from '../../../../../utils';
16
16
  import { TabItemRefs, TabsContext } from '../../../TabsContext';
17
+ import { getFirstOverflowingTab, getLastOverflowingTab } from '../../../utils';
17
18
  import { base as sizeCSS } from './variations/_size/base';
18
19
  import { base as viewCSS } from './variations/_view/base';
19
20
  import { base as disabledCSS } from './variations/_disabled/base';
@@ -82,13 +83,7 @@ export var horizontalTabsRoot = function horizontalTabsRoot(Root) {
82
83
  return;
83
84
  }
84
85
  var scrollLeft = Math.round(scrollRef.current.scrollLeft);
85
- var firstOverflowingTab = refs.items.slice().reverse().find(function (item) {
86
- if (!item.current || item.current.offsetLeft === undefined) {
87
- return;
88
- }
89
- var tabStartX = item.current.offsetLeft;
90
- return tabStartX < scrollLeft;
91
- });
86
+ var firstOverflowingTab = getFirstOverflowingTab(refs.items.slice().reverse(), scrollLeft);
92
87
  firstOverflowingTab === null || firstOverflowingTab === void 0 || (_firstOverflowingTab$ = firstOverflowingTab.current) === null || _firstOverflowingTab$ === void 0 || _firstOverflowingTab$.scrollIntoView({
93
88
  block: 'nearest',
94
89
  inline: 'start'
@@ -100,13 +95,7 @@ export var horizontalTabsRoot = function horizontalTabsRoot(Root) {
100
95
  return;
101
96
  }
102
97
  var scrollRight = Math.round(scrollRef.current.scrollLeft + scrollRef.current.clientWidth);
103
- var lastOverflowingTab = refs.items.find(function (item) {
104
- if (!item.current || item.current.offsetLeft === undefined) {
105
- return;
106
- }
107
- var tabEndX = item.current.offsetLeft + item.current.offsetWidth;
108
- return tabEndX > scrollRight;
109
- });
98
+ var lastOverflowingTab = getLastOverflowingTab(refs.items, scrollRight);
110
99
  lastOverflowingTab === null || lastOverflowingTab === void 0 || (_lastOverflowingTab$c = lastOverflowingTab.current) === null || _lastOverflowingTab$c === void 0 || _lastOverflowingTab$c.scrollIntoView({
111
100
  block: 'nearest',
112
101
  inline: 'end'
@@ -181,18 +170,22 @@ export var horizontalTabsRoot = function horizontalTabsRoot(Root) {
181
170
  });
182
171
  }
183
172
  }, [index]);
184
- useEffect(function () {
173
+ useLayoutEffect(function () {
185
174
  var _scrollRef$current, _scrollRef$current2;
186
175
  setLastItemVisible(((_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.scrollWidth) === ((_scrollRef$current2 = scrollRef.current) === null || _scrollRef$current2 === void 0 ? void 0 : _scrollRef$current2.clientWidth));
187
176
  }, []);
188
177
 
189
178
  // Этот хук компенсирует появление левой стрелки при прокрутке
190
- useEffect(function () {
179
+ useLayoutEffect(function () {
180
+ var _lastOverflowingTab$c2;
191
181
  if (firstItemVisible || !scrollRef.current || !leftArrowRef.current) {
192
182
  return;
193
183
  }
194
- scrollRef.current.scrollTo({
195
- left: Math.round(scrollRef.current.scrollLeft + leftArrowRef.current.clientWidth)
184
+ var scrollRight = Math.round(scrollRef.current.scrollLeft + scrollRef.current.clientWidth);
185
+ var lastOverflowingTab = getLastOverflowingTab(refs.items, scrollRight);
186
+ lastOverflowingTab === null || lastOverflowingTab === void 0 || (_lastOverflowingTab$c2 = lastOverflowingTab.current) === null || _lastOverflowingTab$c2 === void 0 || _lastOverflowingTab$c2.scrollIntoView({
187
+ block: 'nearest',
188
+ inline: 'end'
196
189
  });
197
190
  }, [firstItemVisible, scrollRef, leftArrowRef]);
198
191
  return /*#__PURE__*/React.createElement(TabsContext.Provider, {
@@ -8,7 +8,7 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
8
8
  function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
9
9
  function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
10
10
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
11
- import React, { forwardRef, useRef, useContext, useEffect, useCallback } from 'react';
11
+ import React, { forwardRef, useRef, useContext, useEffect, useCallback, useLayoutEffect } from 'react';
12
12
  import { useForkRef } from '@salutejs/plasma-core';
13
13
  import { classes } from '../../../tokens';
14
14
  import { cx } from '../../../../../utils';
@@ -53,6 +53,16 @@ export var verticalTabItemRoot = function verticalTabItemRoot(Root) {
53
53
  return refs.unregister(innerRef);
54
54
  };
55
55
  }, [refs]);
56
+ useLayoutEffect(function () {
57
+ var _innerRef$current;
58
+ if (!selected) {
59
+ return;
60
+ }
61
+ (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 || _innerRef$current.scrollIntoView({
62
+ block: 'nearest',
63
+ inline: 'nearest'
64
+ });
65
+ }, [selected]);
56
66
  var onItemFocus = useCallback(function (event) {
57
67
  if (disabled) {
58
68
  return;
@@ -77,10 +87,6 @@ export var verticalTabItemRoot = function verticalTabItemRoot(Root) {
77
87
  refs.setCurrent(focusIndex);
78
88
  }, [refs, innerRef, onIndexChange, disabled]);
79
89
  var handleClick = function handleClick(event) {
80
- event.currentTarget.scrollIntoView({
81
- block: 'nearest',
82
- inline: 'nearest'
83
- });
84
90
  if (!onClick) {
85
91
  return;
86
92
  }