@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.
- package/cjs/components/Popover/Popover.js +10 -2
- package/cjs/components/Popover/Popover.js.map +1 -1
- package/cjs/components/Popover/hooks/usePopoverOffset.js +48 -0
- package/cjs/components/Popover/hooks/usePopoverOffset.js.map +1 -0
- package/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js +10 -4
- package/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js.map +1 -1
- package/cjs/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +21 -28
- package/cjs/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js.map +1 -1
- package/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.js +10 -4
- package/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.js.map +1 -1
- package/cjs/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js +21 -28
- package/cjs/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js.map +1 -1
- package/cjs/components/Tabs/utils/index.js +26 -0
- package/cjs/components/Tabs/utils/index.js.map +1 -0
- package/cjs/components/Tooltip/Tooltip.js +1 -1
- package/cjs/components/Tooltip/Tooltip.js.map +1 -1
- package/emotion/cjs/components/Popover/Popover.js +10 -2
- package/emotion/cjs/components/Popover/hooks/usePopoverOffset.js +51 -0
- package/emotion/cjs/components/Tabs/Tabs.template-doc.mdx +7 -2
- package/emotion/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js +10 -4
- package/emotion/cjs/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +11 -18
- package/emotion/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.js +10 -4
- package/emotion/cjs/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js +11 -18
- package/emotion/cjs/components/Tabs/utils/index.js +24 -0
- package/emotion/cjs/components/Tooltip/Tooltip.js +2 -2
- package/emotion/cjs/examples/plasma_b2c/components/Popover/Popover.stories.tsx +27 -2
- package/emotion/es/components/Popover/Popover.js +10 -2
- package/emotion/es/components/Popover/hooks/usePopoverOffset.js +45 -0
- package/emotion/es/components/Tabs/Tabs.template-doc.mdx +7 -2
- package/emotion/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js +11 -5
- package/emotion/es/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +12 -19
- package/emotion/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.js +11 -5
- package/emotion/es/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js +12 -19
- package/emotion/es/components/Tabs/utils/index.js +18 -0
- package/emotion/es/components/Tooltip/Tooltip.js +2 -2
- package/emotion/es/examples/plasma_b2c/components/Popover/Popover.stories.tsx +27 -2
- package/es/components/Popover/Popover.js +10 -2
- package/es/components/Popover/Popover.js.map +1 -1
- package/es/components/Popover/hooks/usePopoverOffset.js +44 -0
- package/es/components/Popover/hooks/usePopoverOffset.js.map +1 -0
- package/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js +11 -5
- package/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js.map +1 -1
- package/es/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +12 -19
- package/es/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js.map +1 -1
- package/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.js +11 -5
- package/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.js.map +1 -1
- package/es/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js +12 -19
- package/es/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js.map +1 -1
- package/es/components/Tabs/utils/index.js +21 -0
- package/es/components/Tabs/utils/index.js.map +1 -0
- package/es/components/Tooltip/Tooltip.js +1 -1
- package/es/components/Tooltip/Tooltip.js.map +1 -1
- package/package.json +2 -2
- package/styled-components/cjs/components/Popover/Popover.js +10 -2
- package/styled-components/cjs/components/Popover/hooks/usePopoverOffset.js +51 -0
- package/styled-components/cjs/components/Tabs/Tabs.template-doc.mdx +7 -2
- package/styled-components/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js +10 -4
- package/styled-components/cjs/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +11 -18
- package/styled-components/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.js +10 -4
- package/styled-components/cjs/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js +11 -18
- package/styled-components/cjs/components/Tabs/utils/index.js +24 -0
- package/styled-components/cjs/components/Tooltip/Tooltip.js +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Popover/Popover.stories.tsx +27 -2
- package/styled-components/es/components/Popover/Popover.js +10 -2
- package/styled-components/es/components/Popover/hooks/usePopoverOffset.js +45 -0
- package/styled-components/es/components/Tabs/Tabs.template-doc.mdx +7 -2
- package/styled-components/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js +11 -5
- package/styled-components/es/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +12 -19
- package/styled-components/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.js +11 -5
- package/styled-components/es/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js +12 -19
- package/styled-components/es/components/Tabs/utils/index.js +18 -0
- package/styled-components/es/components/Tooltip/Tooltip.js +1 -1
- package/styled-components/es/examples/plasma_b2c/components/Popover/Popover.stories.tsx +27 -2
- package/types/components/Popover/Popover.d.ts.map +1 -1
- package/types/components/Popover/hooks/usePopoverOffset.d.ts +9 -0
- package/types/components/Popover/hooks/usePopoverOffset.d.ts.map +1 -0
- package/types/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.d.ts.map +1 -1
- package/types/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.d.ts.map +1 -1
- package/types/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.d.ts.map +1 -1
- package/types/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.d.ts.map +1 -1
- package/types/components/Tabs/utils/index.d.ts +4 -0
- package/types/components/Tabs/utils/index.d.ts.map +1 -0
@@ -9,12 +9,13 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
|
|
9
9
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
10
10
|
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; }
|
11
11
|
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; }
|
12
|
-
import React, { forwardRef, useCallback, useMemo, useState,
|
12
|
+
import React, { forwardRef, useCallback, useMemo, useState, useLayoutEffect, useRef } from 'react';
|
13
13
|
import { safeUseId } from '@salutejs/plasma-core';
|
14
14
|
import { classes } from '../../../tokens';
|
15
15
|
import { cx } from '../../../../../utils';
|
16
16
|
import { TabItemRefs, TabsContext } from '../../../TabsContext';
|
17
17
|
import { IconDisclosureLeft, IconDisclosureRight } from '../../../../_Icon';
|
18
|
+
import { getFirstOverflowingTab, getLastOverflowingTab } from '../../../utils';
|
18
19
|
import { base, StyledArrow, StyledContent, StyledContentWrapper } from './VerticalTabs.styles';
|
19
20
|
import { base as sizeCSS } from './variations/_size/base';
|
20
21
|
import { base as viewCSS } from './variations/_view/base';
|
@@ -69,13 +70,7 @@ export var verticalTabsRoot = function verticalTabsRoot(Root) {
|
|
69
70
|
return;
|
70
71
|
}
|
71
72
|
var scrollTop = Math.round(scrollRef.current.scrollTop);
|
72
|
-
var firstOverflowingTab = refs.items.slice().reverse()
|
73
|
-
if (!item.current || item.current.offsetTop === undefined) {
|
74
|
-
return;
|
75
|
-
}
|
76
|
-
var tabStartY = item.current.offsetTop;
|
77
|
-
return tabStartY < scrollTop;
|
78
|
-
});
|
73
|
+
var firstOverflowingTab = getFirstOverflowingTab(refs.items.slice().reverse(), scrollTop);
|
79
74
|
firstOverflowingTab === null || firstOverflowingTab === void 0 || (_firstOverflowingTab$ = firstOverflowingTab.current) === null || _firstOverflowingTab$ === void 0 || _firstOverflowingTab$.scrollIntoView({
|
80
75
|
block: 'start',
|
81
76
|
inline: 'nearest'
|
@@ -87,13 +82,7 @@ export var verticalTabsRoot = function verticalTabsRoot(Root) {
|
|
87
82
|
return;
|
88
83
|
}
|
89
84
|
var scrollBottom = Math.round(scrollRef.current.scrollTop + scrollRef.current.clientHeight);
|
90
|
-
var lastOverflowingTab = refs.items
|
91
|
-
if (!item.current || item.current.offsetTop === undefined) {
|
92
|
-
return;
|
93
|
-
}
|
94
|
-
var tabEndY = item.current.offsetTop + item.current.offsetHeight;
|
95
|
-
return tabEndY > scrollBottom;
|
96
|
-
});
|
85
|
+
var lastOverflowingTab = getLastOverflowingTab(refs.items, scrollBottom);
|
97
86
|
lastOverflowingTab === null || lastOverflowingTab === void 0 || (_lastOverflowingTab$c = lastOverflowingTab.current) === null || _lastOverflowingTab$c === void 0 || _lastOverflowingTab$c.scrollIntoView({
|
98
87
|
block: 'end',
|
99
88
|
inline: 'nearest'
|
@@ -159,18 +148,22 @@ export var verticalTabsRoot = function verticalTabsRoot(Root) {
|
|
159
148
|
});
|
160
149
|
}
|
161
150
|
}, [index]);
|
162
|
-
|
151
|
+
useLayoutEffect(function () {
|
163
152
|
var _scrollRef$current, _scrollRef$current2;
|
164
153
|
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));
|
165
154
|
}, []);
|
166
155
|
|
167
156
|
// Этот хук компенсирует появление верхней стрелки при прокрутке
|
168
|
-
|
157
|
+
useLayoutEffect(function () {
|
158
|
+
var _lastOverflowingTab$c2;
|
169
159
|
if (firstItemVisible || !scrollRef.current || !upArrowRef.current) {
|
170
160
|
return;
|
171
161
|
}
|
172
|
-
scrollRef.current.
|
173
|
-
|
162
|
+
var scrollBottom = Math.round(scrollRef.current.scrollTop + scrollRef.current.clientHeight);
|
163
|
+
var lastOverflowingTab = getLastOverflowingTab(refs.items, scrollBottom);
|
164
|
+
lastOverflowingTab === null || lastOverflowingTab === void 0 || (_lastOverflowingTab$c2 = lastOverflowingTab.current) === null || _lastOverflowingTab$c2 === void 0 || _lastOverflowingTab$c2.scrollIntoView({
|
165
|
+
block: 'end',
|
166
|
+
inline: 'nearest'
|
174
167
|
});
|
175
168
|
}, [firstItemVisible, scrollRef, upArrowRef]);
|
176
169
|
return /*#__PURE__*/React.createElement(TabsContext.Provider, {
|
@@ -0,0 +1,18 @@
|
|
1
|
+
export var getFirstOverflowingTab = function getFirstOverflowingTab(items, maxScroll) {
|
2
|
+
return items.find(function (item) {
|
3
|
+
if (!item.current || item.current.offsetLeft === undefined) {
|
4
|
+
return;
|
5
|
+
}
|
6
|
+
var tabStartX = item.current.offsetLeft;
|
7
|
+
return tabStartX < maxScroll;
|
8
|
+
});
|
9
|
+
};
|
10
|
+
export var getLastOverflowingTab = function getLastOverflowingTab(items, minScroll) {
|
11
|
+
return items.find(function (item) {
|
12
|
+
if (!item.current || item.current.offsetLeft === undefined) {
|
13
|
+
return;
|
14
|
+
}
|
15
|
+
var tabEndX = item.current.offsetLeft + item.current.offsetWidth;
|
16
|
+
return tabEndX > minScroll;
|
17
|
+
});
|
18
|
+
};
|
@@ -25,7 +25,7 @@ var Popover = /*#__PURE__*/component(popoverConfig);
|
|
25
25
|
var StyledPopover = /*#__PURE__*/_styled(Popover, {
|
26
26
|
target: "ecc7g4f0",
|
27
27
|
label: "plasma-new-hope__StyledPopover"
|
28
|
-
})(popoverTokens.arrowMaskWidth, ":var(", tokens.arrowMaskWidth, ");", popoverTokens.arrowMaskHeight, ":var(", tokens.arrowMaskHeight, ");", popoverTokens.arrowMaskImage, ":var(", tokens.arrowMaskImage, ");", popoverTokens.arrowBackground, ":var(", tokens.arrowBackground, ");", popoverTokens.arrowHeight, ":var(", tokens.arrowHeight, ");", popoverTokens.arrowEdgeMargin, ":var(", 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+
|
28
|
+
})(popoverTokens.arrowMaskWidth, ":var(", tokens.arrowMaskWidth, ");", popoverTokens.arrowMaskHeight, ":var(", tokens.arrowMaskHeight, ");", popoverTokens.arrowMaskImage, ":var(", tokens.arrowMaskImage, ");", popoverTokens.arrowBackground, ":var(", tokens.arrowBackground, ");", popoverTokens.arrowHeight, ":var(", tokens.arrowHeight, ");", popoverTokens.arrowEdgeMargin, ":var(", 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= */"));
|
29
29
|
|
30
30
|
/**
|
31
31
|
* Компонент для текстовых подсказок. Основное предназначение — подписи к блокам.
|
@@ -43,7 +43,7 @@ export var tooltipRoot = function tooltipRoot(Root) {
|
|
43
43
|
arrow = _ref.arrow,
|
44
44
|
animated = _ref.animated,
|
45
45
|
_ref$offset = _ref.offset,
|
46
|
-
offset = _ref$offset === void 0 ? [
|
46
|
+
offset = _ref$offset === void 0 ? [3, 8] : _ref$offset,
|
47
47
|
minWidth = _ref.minWidth,
|
48
48
|
maxWidth = _ref.maxWidth,
|
49
49
|
_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:
|
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
|
};
|
@@ -6,6 +6,7 @@ import { cx } from '../../utils/index.js';
|
|
6
6
|
import { base } from './variations/_view/base.js';
|
7
7
|
import { StyledWrapper, StyledRoot, StyledPopover, StyledArrow } from './Popover.styles.js';
|
8
8
|
import { classes } from './Popover.tokens.js';
|
9
|
+
import { usePopoverOffset } from './hooks/usePopoverOffset.js';
|
9
10
|
import { useFocusTrap } from '../../hooks/useFocusTrap.js';
|
10
11
|
import { Portal } from '../Portal/Portal.js';
|
11
12
|
|
@@ -53,6 +54,7 @@ var popoverRoot = function popoverRoot(Root) {
|
|
53
54
|
var popoverRef = useRef(null);
|
54
55
|
var handleRef = useForkRef(rootRef, outerRootRef);
|
55
56
|
var portalRef = useRef(null);
|
57
|
+
var targetRef = useRef(null);
|
56
58
|
var trapRef = useFocusTrap(innerIsOpen && isFocusTrapped);
|
57
59
|
var popoverForkRef = useForkRef(popoverRef, trapRef);
|
58
60
|
var _useState = useState(null),
|
@@ -71,6 +73,11 @@ var popoverRoot = function popoverRoot(Root) {
|
|
71
73
|
var isAuto = isAutoArray || placement.startsWith('auto');
|
72
74
|
var openClass = innerIsOpen && shouldRender ? classes.open : undefined;
|
73
75
|
var animatedClass = animated ? classes.animate : undefined;
|
76
|
+
var offsetInner = usePopoverOffset({
|
77
|
+
handleRef: targetRef,
|
78
|
+
placement: placement,
|
79
|
+
offsetOuter: offset
|
80
|
+
});
|
74
81
|
var _usePopper = usePopper(rootRef.current, popoverRef.current, {
|
75
82
|
// TODO: #1121
|
76
83
|
// eslint-disable-next-line no-nested-ternary
|
@@ -83,7 +90,7 @@ var popoverRoot = function popoverRoot(Root) {
|
|
83
90
|
}, {
|
84
91
|
name: 'offset',
|
85
92
|
options: {
|
86
|
-
offset: [
|
93
|
+
offset: [offsetInner[0], offsetInner[1]]
|
87
94
|
}
|
88
95
|
}, {
|
89
96
|
name: 'flip',
|
@@ -214,7 +221,8 @@ var popoverRoot = function popoverRoot(Root) {
|
|
214
221
|
}, /*#__PURE__*/React.createElement(StyledWrapper, {
|
215
222
|
className: cx(classes.wrapper, ! /*#__PURE__*/isValidElement(target) && classes.targetAsRef),
|
216
223
|
onMouseEnter: onMouseEnter,
|
217
|
-
onMouseLeave: onMouseLeave
|
224
|
+
onMouseLeave: onMouseLeave,
|
225
|
+
ref: targetRef
|
218
226
|
}, /*#__PURE__*/React.createElement(StyledRoot, {
|
219
227
|
ref: handleRef,
|
220
228
|
onClick: onClick,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Popover.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import React, { useRef, useCallback, useEffect, useState, forwardRef, isValidElement } from 'react';\nimport { usePopper } from 'react-popper';\nimport { useForkRef } from '@salutejs/plasma-core';\n\nimport type { RootProps } from '../../engines/types';\nimport { useFocusTrap } from '../../hooks';\nimport { cx } from '../../utils';\nimport { Portal } from '../Portal';\n\nimport { base as viewCSS } from './variations/_view/base';\nimport type { PopoverPlacement, PopoverProps } from './Popover.types';\nimport { StyledArrow, StyledPopover, StyledRoot, StyledWrapper } from './Popover.styles';\nimport { classes } from './Popover.tokens';\n\nexport const ESCAPE_KEYCODE = 27;\nexport const POPOVER_PORTAL_ID = 'plasma-popover-root';\n\n/**\n * Всплывающее окно с возможностью позиционирования\n * и вызова по клику либо ховеру.\n */\nexport const popoverRoot = (Root: RootProps<HTMLDivElement, PopoverProps>) =>\n forwardRef<HTMLDivElement, PopoverProps>(\n (\n {\n target,\n children,\n animated,\n isOpen,\n opened,\n trigger = 'click',\n hasArrow,\n frame = 'document',\n className,\n placement = 'auto',\n offset = [0, 0],\n zIndex,\n isFocusTrapped = true,\n closeOnEsc = true,\n preventOverflow = true,\n usePortal = false,\n view,\n onToggle,\n closeOnOverlayClick,\n ...rest\n },\n outerRootRef,\n ) => {\n const innerIsOpen = Boolean(isOpen || opened);\n\n const rootRef = useRef<HTMLDivElement | null>(null);\n const popoverRef = useRef<HTMLDivElement | null>(null);\n const handleRef = useForkRef<HTMLDivElement>(rootRef, outerRootRef);\n const portalRef = useRef<HTMLElement | null>(null);\n\n const trapRef = useFocusTrap(innerIsOpen && isFocusTrapped);\n\n const popoverForkRef = useForkRef<HTMLDivElement>(popoverRef, trapRef);\n\n const [arrowElement, setArrowElement] = useState<HTMLSpanElement | null>(null);\n\n const [, forceRender] = useState(false);\n const [shouldRender, setShouldRender] = useState(innerIsOpen);\n\n const portalContainer =\n (typeof target === 'object' && target !== null && 'current' in target && target.current) || undefined;\n\n const isAutoArray = Array.isArray(placement);\n const isAuto = isAutoArray || (placement as PopoverPlacement).startsWith('auto');\n\n const openClass = innerIsOpen && shouldRender ? classes.open : undefined;\n const animatedClass = animated ? classes.animate : undefined;\n\n const { styles, attributes, forceUpdate } = usePopper(rootRef.current, popoverRef.current, {\n // TODO: #1121\n // eslint-disable-next-line no-nested-ternary\n placement: isAutoArray\n ? placement[0]?.endsWith('start')\n ? 'auto-start'\n : 'auto'\n : (placement as PopoverPlacement),\n modifiers: [\n {\n name: 'preventOverflow',\n options: {\n mainAxis: preventOverflow,\n },\n },\n { name: 'offset', options: { offset: [offset[0], offset[1]] } },\n {\n name: 'flip',\n enabled: isAuto,\n options: {\n allowedAutoPlacements: isAutoArray ? (placement as PopoverPlacement[]) : [],\n },\n },\n {\n name: 'arrow',\n options: {\n element: arrowElement,\n },\n },\n ],\n });\n\n const onEscape = useCallback(\n (event: KeyboardEvent) => {\n if (innerIsOpen && closeOnEsc && event.keyCode === ESCAPE_KEYCODE) {\n onToggle?.(false, event);\n }\n },\n [closeOnEsc, innerIsOpen, onToggle],\n );\n\n const onDocumentClick = useCallback(\n (event: MouseEvent) => {\n if (innerIsOpen && closeOnOverlayClick && onToggle) {\n const targetIsRoot = event.target === rootRef.current;\n const rootHasTarget = rootRef.current?.contains(event.target as Element);\n const popoverRootHasTarget = popoverRef.current?.contains(event.target as Element);\n\n if (!targetIsRoot && !rootHasTarget && !popoverRootHasTarget) {\n onToggle(false, event);\n }\n }\n },\n [closeOnOverlayClick, innerIsOpen, onToggle],\n );\n\n const onClick = useCallback<React.MouseEventHandler>(\n (event) => {\n if (trigger === 'click') {\n const targetIsPopover = event.target === popoverRef.current;\n const rootHasTarget = popoverRef.current?.contains(event.target as Element);\n\n if (!targetIsPopover && !rootHasTarget) {\n onToggle?.(!innerIsOpen, event);\n }\n }\n },\n [trigger, innerIsOpen, onToggle],\n );\n\n const onMouseEnter = useCallback<React.MouseEventHandler>(\n (event) => {\n if (trigger === 'hover') {\n onToggle?.(true, event);\n }\n },\n [trigger, onToggle],\n );\n\n const onMouseLeave = useCallback<React.MouseEventHandler>(\n (event) => {\n if (trigger === 'hover') {\n onToggle?.(false, event);\n }\n },\n [trigger, onToggle],\n );\n\n const onFocus = useCallback<React.FocusEventHandler>(\n (event) => {\n if (trigger === 'hover') {\n onToggle?.(true, event);\n }\n },\n [trigger, onToggle],\n );\n\n const onBlur = useCallback<React.FocusEventHandler>(\n (event) => {\n if (trigger === 'hover') {\n onToggle?.(false, event);\n }\n },\n [trigger, onToggle],\n );\n\n useEffect(() => {\n document.addEventListener('click', onDocumentClick);\n return () => document.removeEventListener('click', onDocumentClick);\n }, [innerIsOpen, onToggle]);\n\n useEffect(() => {\n window.addEventListener('keydown', onEscape);\n return () => window.removeEventListener('keydown', onEscape);\n }, [closeOnEsc, innerIsOpen, onToggle]);\n\n useEffect(() => {\n let portal = document.getElementById(POPOVER_PORTAL_ID);\n\n if (typeof frame !== 'string' && frame && frame.current) {\n portal = frame.current;\n }\n\n if (!usePortal && isValidElement(target)) {\n portal = rootRef.current;\n }\n\n if (!portal) {\n portal = document.createElement('div');\n portal.setAttribute('id', POPOVER_PORTAL_ID);\n\n if (typeof frame === 'string' && frame !== 'document') {\n document.getElementById(frame)?.appendChild(portal);\n } else {\n document.body.appendChild(portal);\n }\n }\n\n portalRef.current = portal;\n\n /**\n * Изменение стейта нужно для того, чтобы Popup\n * отобразился после записи DOM элемента в portalRef.current\n */\n forceRender(true);\n }, []);\n\n useEffect(() => {\n if (!innerIsOpen || !forceUpdate) {\n return;\n }\n\n /*\n * INFO: Метод forceUpdate содержит в себе flushSync и приводит\n * к повторному рендеру компонента, который уже находится в процессе рендера.\n * Данный хак, нужен для того, чтобы это поведение избежать и перенаправить\n * вызов метода в очередь микрозадач.\n */\n Promise.resolve().then(forceUpdate);\n }, [innerIsOpen, children, forceUpdate]);\n\n const handleTransitionEnd = () => {\n if (!innerIsOpen) {\n setShouldRender(false);\n }\n };\n\n useEffect(() => {\n if (innerIsOpen) {\n setShouldRender(true);\n }\n }, [innerIsOpen]);\n\n return (\n <Portal container={portalContainer} disabled={isValidElement(target)}>\n <StyledWrapper\n className={cx(classes.wrapper, !isValidElement(target) && classes.targetAsRef)}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n >\n <StyledRoot\n ref={handleRef}\n onClick={onClick}\n onFocus={onFocus}\n onBlur={onBlur}\n className={cx(className, classes.target)}\n >\n {isValidElement(target) && target}\n </StyledRoot>\n {children && portalRef.current && (\n <Portal container={portalRef.current}>\n <Root view={view} className={className} {...rest}>\n <StyledPopover\n {...attributes.popper}\n onTransitionEnd={handleTransitionEnd}\n className={cx(classes.root, openClass, animatedClass)}\n ref={popoverForkRef}\n style={{\n ...styles.popper,\n display: shouldRender || innerIsOpen ? 'block' : 'none',\n }}\n zIndex={zIndex}\n >\n {hasArrow && (\n <StyledArrow\n className={classes.arrow}\n ref={setArrowElement}\n style={styles.arrow}\n {...attributes.arrow}\n />\n )}\n {children}\n </StyledPopover>\n </Root>\n </Portal>\n )}\n </StyledWrapper>\n </Portal>\n );\n },\n );\n\nexport const popoverConfig = {\n name: 'Popover',\n tag: 'div',\n layout: popoverRoot,\n base: '',\n variations: {\n view: {\n css: viewCSS,\n },\n },\n defaults: {\n view: 'default',\n },\n};\n"],"names":["ESCAPE_KEYCODE","POPOVER_PORTAL_ID","popoverRoot","Root","forwardRef","_ref","outerRootRef","_placement$","target","children","animated","isOpen","opened","_ref$trigger","trigger","hasArrow","_ref$frame","frame","className","_ref$placement","placement","_ref$offset","offset","zIndex","_ref$isFocusTrapped","isFocusTrapped","_ref$closeOnEsc","closeOnEsc","_ref$preventOverflow","preventOverflow","_ref$usePortal","usePortal","view","onToggle","closeOnOverlayClick","rest","_objectWithoutProperties","_excluded","innerIsOpen","Boolean","rootRef","useRef","popoverRef","handleRef","useForkRef","portalRef","trapRef","useFocusTrap","popoverForkRef","_useState","useState","_useState2","_slicedToArray","arrowElement","setArrowElement","_useState3","_useState4","forceRender","_useState5","_useState6","shouldRender","setShouldRender","portalContainer","_typeof","current","undefined","isAutoArray","Array","isArray","isAuto","startsWith","openClass","classes","open","animatedClass","animate","_usePopper","usePopper","endsWith","modifiers","name","options","mainAxis","enabled","allowedAutoPlacements","element","styles","attributes","forceUpdate","onEscape","useCallback","event","keyCode","onDocumentClick","_rootRef$current","_popoverRef$current","targetIsRoot","rootHasTarget","contains","popoverRootHasTarget","onClick","_popoverRef$current2","targetIsPopover","onMouseEnter","onMouseLeave","onFocus","onBlur","useEffect","document","addEventListener","removeEventListener","window","portal","getElementById","isValidElement","createElement","setAttribute","_document$getElementB","appendChild","body","Promise","resolve","then","handleTransitionEnd","React","Portal","container","disabled","StyledWrapper","cx","wrapper","targetAsRef","StyledRoot","ref","_extends","StyledPopover","popper","onTransitionEnd","root","style","_objectSpread","display","StyledArrow","arrow","popoverConfig","tag","layout","base","variations","css","viewCSS","defaults"],"mappings":";;;;;;;;;;;;AAcO,IAAMA,cAAc,GAAG,GAAE;AACzB,IAAMC,iBAAiB,GAAG,sBAAqB;;AAEtD;AACA;AACA;AACA;IACaC,WAAW,GAAG,SAAdA,WAAWA,CAAIC,IAA6C,EAAA;AAAA,EAAA,oBACrEC,UAAU,CACN,UAAAC,IAAA,EAuBIC,YAAY,EACX;AAAA,IAAA,IAAAC,WAAA,CAAA;AAAA,IAAA,IAtBGC,MAAM,GAAAH,IAAA,CAANG,MAAM;MACNC,QAAQ,GAAAJ,IAAA,CAARI,QAAQ;MACRC,QAAQ,GAAAL,IAAA,CAARK,QAAQ;MACRC,MAAM,GAAAN,IAAA,CAANM,MAAM;MACNC,MAAM,GAAAP,IAAA,CAANO,MAAM;MAAAC,YAAA,GAAAR,IAAA,CACNS,OAAO;AAAPA,MAAAA,OAAO,GAAAD,YAAA,KAAG,KAAA,CAAA,GAAA,OAAO,GAAAA,YAAA;MACjBE,QAAQ,GAAAV,IAAA,CAARU,QAAQ;MAAAC,UAAA,GAAAX,IAAA,CACRY,KAAK;AAALA,MAAAA,KAAK,GAAAD,UAAA,KAAG,KAAA,CAAA,GAAA,UAAU,GAAAA,UAAA;MAClBE,SAAS,GAAAb,IAAA,CAATa,SAAS;MAAAC,cAAA,GAAAd,IAAA,CACTe,SAAS;AAATA,MAAAA,SAAS,GAAAD,cAAA,KAAG,KAAA,CAAA,GAAA,MAAM,GAAAA,cAAA;MAAAE,WAAA,GAAAhB,IAAA,CAClBiB,MAAM;MAANA,MAAM,GAAAD,WAAA,KAAG,KAAA,CAAA,GAAA,CAAC,CAAC,EAAE,CAAC,CAAC,GAAAA,WAAA;MACfE,MAAM,GAAAlB,IAAA,CAANkB,MAAM;MAAAC,mBAAA,GAAAnB,IAAA,CACNoB,cAAc;AAAdA,MAAAA,cAAc,GAAAD,mBAAA,KAAG,KAAA,CAAA,GAAA,IAAI,GAAAA,mBAAA;MAAAE,eAAA,GAAArB,IAAA,CACrBsB,UAAU;AAAVA,MAAAA,UAAU,GAAAD,eAAA,KAAG,KAAA,CAAA,GAAA,IAAI,GAAAA,eAAA;MAAAE,oBAAA,GAAAvB,IAAA,CACjBwB,eAAe;AAAfA,MAAAA,eAAe,GAAAD,oBAAA,KAAG,KAAA,CAAA,GAAA,IAAI,GAAAA,oBAAA;MAAAE,cAAA,GAAAzB,IAAA,CACtB0B,SAAS;AAATA,MAAAA,SAAS,GAAAD,cAAA,KAAG,KAAA,CAAA,GAAA,KAAK,GAAAA,cAAA;MACjBE,IAAI,GAAA3B,IAAA,CAAJ2B,IAAI;MACJC,QAAQ,GAAA5B,IAAA,CAAR4B,QAAQ;MACRC,mBAAmB,GAAA7B,IAAA,CAAnB6B,mBAAmB;AAChBC,MAAAA,IAAI,GAAAC,wBAAA,CAAA/B,IAAA,EAAAgC,SAAA,CAAA,CAAA;AAIX,IAAA,IAAMC,WAAW,GAAGC,OAAO,CAAC5B,MAAM,IAAIC,MAAM,CAAC,CAAA;AAE7C,IAAA,IAAM4B,OAAO,GAAGC,MAAM,CAAwB,IAAI,CAAC,CAAA;AACnD,IAAA,IAAMC,UAAU,GAAGD,MAAM,CAAwB,IAAI,CAAC,CAAA;AACtD,IAAA,IAAME,SAAS,GAAGC,UAAU,CAAiBJ,OAAO,EAAElC,YAAY,CAAC,CAAA;AACnE,IAAA,IAAMuC,SAAS,GAAGJ,MAAM,CAAqB,IAAI,CAAC,CAAA;AAElD,IAAA,IAAMK,OAAO,GAAGC,YAAY,CAACT,WAAW,IAAIb,cAAc,CAAC,CAAA;AAE3D,IAAA,IAAMuB,cAAc,GAAGJ,UAAU,CAAiBF,UAAU,EAAEI,OAAO,CAAC,CAAA;AAEtE,IAAA,IAAAG,SAAA,GAAwCC,QAAQ,CAAyB,IAAI,CAAC;MAAAC,UAAA,GAAAC,cAAA,CAAAH,SAAA,EAAA,CAAA,CAAA;AAAvEI,MAAAA,YAAY,GAAAF,UAAA,CAAA,CAAA,CAAA;AAAEG,MAAAA,eAAe,GAAAH,UAAA,CAAA,CAAA,CAAA,CAAA;AAEpC,IAAA,IAAAI,UAAA,GAAwBL,QAAQ,CAAC,KAAK,CAAC;MAAAM,UAAA,GAAAJ,cAAA,CAAAG,UAAA,EAAA,CAAA,CAAA;AAA9BE,MAAAA,WAAW,GAAAD,UAAA,CAAA,CAAA,CAAA,CAAA;AACpB,IAAA,IAAAE,UAAA,GAAwCR,QAAQ,CAACZ,WAAW,CAAC;MAAAqB,UAAA,GAAAP,cAAA,CAAAM,UAAA,EAAA,CAAA,CAAA;AAAtDE,MAAAA,YAAY,GAAAD,UAAA,CAAA,CAAA,CAAA;AAAEE,MAAAA,eAAe,GAAAF,UAAA,CAAA,CAAA,CAAA,CAAA;IAEpC,IAAMG,eAAe,GAChBC,OAAA,CAAOvD,MAAM,CAAK,KAAA,QAAQ,IAAIA,MAAM,KAAK,IAAI,IAAI,SAAS,IAAIA,MAAM,IAAIA,MAAM,CAACwD,OAAO,IAAKC,SAAS,CAAA;AAEzG,IAAA,IAAMC,WAAW,GAAGC,KAAK,CAACC,OAAO,CAAChD,SAAS,CAAC,CAAA;IAC5C,IAAMiD,MAAM,GAAGH,WAAW,IAAK9C,SAAS,CAAsBkD,UAAU,CAAC,MAAM,CAAC,CAAA;IAEhF,IAAMC,SAAS,GAAGjC,WAAW,IAAIsB,YAAY,GAAGY,OAAO,CAACC,IAAI,GAAGR,SAAS,CAAA;IACxE,IAAMS,aAAa,GAAGhE,QAAQ,GAAG8D,OAAO,CAACG,OAAO,GAAGV,SAAS,CAAA;IAE5D,IAAAW,UAAA,GAA4CC,SAAS,CAACrC,OAAO,CAACwB,OAAO,EAAEtB,UAAU,CAACsB,OAAO,EAAE;AACvF;AACA;QACA5C,SAAS,EAAE8C,WAAW,GAChB,CAAA3D,WAAA,GAAAa,SAAS,CAAC,CAAC,CAAC,MAAAb,IAAAA,IAAAA,WAAA,eAAZA,WAAA,CAAcuE,QAAQ,CAAC,OAAO,CAAC,GAC3B,YAAY,GACZ,MAAM,GACT1D,SAA8B;AACrC2D,QAAAA,SAAS,EAAE,CACP;AACIC,UAAAA,IAAI,EAAE,iBAAiB;AACvBC,UAAAA,OAAO,EAAE;AACLC,YAAAA,QAAQ,EAAErD,eAAAA;AACd,WAAA;AACJ,SAAC,EACD;AAAEmD,UAAAA,IAAI,EAAE,QAAQ;AAAEC,UAAAA,OAAO,EAAE;YAAE3D,MAAM,EAAE,CAACA,MAAM,CAAC,CAAC,CAAC,EAAEA,MAAM,CAAC,CAAC,CAAC,CAAA;AAAE,WAAA;AAAE,SAAC,EAC/D;AACI0D,UAAAA,IAAI,EAAE,MAAM;AACZG,UAAAA,OAAO,EAAEd,MAAM;AACfY,UAAAA,OAAO,EAAE;AACLG,YAAAA,qBAAqB,EAAElB,WAAW,GAAI9C,SAAS,GAA0B,EAAA;AAC7E,WAAA;AACJ,SAAC,EACD;AACI4D,UAAAA,IAAI,EAAE,OAAO;AACbC,UAAAA,OAAO,EAAE;AACLI,YAAAA,OAAO,EAAEhC,YAAAA;AACb,WAAA;SACH,CAAA;AAET,OAAC,CAAC;MA9BMiC,MAAM,GAAAV,UAAA,CAANU,MAAM;MAAEC,UAAU,GAAAX,UAAA,CAAVW,UAAU;MAAEC,WAAW,GAAAZ,UAAA,CAAXY,WAAW,CAAA;AAgCvC,IAAA,IAAMC,QAAQ,GAAGC,WAAW,CACxB,UAACC,KAAoB,EAAK;MACtB,IAAIrD,WAAW,IAAIX,UAAU,IAAIgE,KAAK,CAACC,OAAO,KAAK5F,cAAc,EAAE;QAC/DiC,QAAQ,KAAA,IAAA,IAARA,QAAQ,KAARA,KAAAA,CAAAA,IAAAA,QAAQ,CAAG,KAAK,EAAE0D,KAAK,CAAC,CAAA;AAC5B,OAAA;KACH,EACD,CAAChE,UAAU,EAAEW,WAAW,EAAEL,QAAQ,CACtC,CAAC,CAAA;AAED,IAAA,IAAM4D,eAAe,GAAGH,WAAW,CAC/B,UAACC,KAAiB,EAAK;AACnB,MAAA,IAAIrD,WAAW,IAAIJ,mBAAmB,IAAID,QAAQ,EAAE;QAAA,IAAA6D,gBAAA,EAAAC,mBAAA,CAAA;QAChD,IAAMC,YAAY,GAAGL,KAAK,CAACnF,MAAM,KAAKgC,OAAO,CAACwB,OAAO,CAAA;AACrD,QAAA,IAAMiC,aAAa,GAAAH,CAAAA,gBAAA,GAAGtD,OAAO,CAACwB,OAAO,MAAA,IAAA,IAAA8B,gBAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAfA,gBAAA,CAAiBI,QAAQ,CAACP,KAAK,CAACnF,MAAiB,CAAC,CAAA;AACxE,QAAA,IAAM2F,oBAAoB,GAAAJ,CAAAA,mBAAA,GAAGrD,UAAU,CAACsB,OAAO,MAAA,IAAA,IAAA+B,mBAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAlBA,mBAAA,CAAoBG,QAAQ,CAACP,KAAK,CAACnF,MAAiB,CAAC,CAAA;QAElF,IAAI,CAACwF,YAAY,IAAI,CAACC,aAAa,IAAI,CAACE,oBAAoB,EAAE;AAC1DlE,UAAAA,QAAQ,CAAC,KAAK,EAAE0D,KAAK,CAAC,CAAA;AAC1B,SAAA;AACJ,OAAA;KACH,EACD,CAACzD,mBAAmB,EAAEI,WAAW,EAAEL,QAAQ,CAC/C,CAAC,CAAA;AAED,IAAA,IAAMmE,OAAO,GAAGV,WAAW,CACvB,UAACC,KAAK,EAAK;MACP,IAAI7E,OAAO,KAAK,OAAO,EAAE;AAAA,QAAA,IAAAuF,oBAAA,CAAA;QACrB,IAAMC,eAAe,GAAGX,KAAK,CAACnF,MAAM,KAAKkC,UAAU,CAACsB,OAAO,CAAA;AAC3D,QAAA,IAAMiC,aAAa,GAAAI,CAAAA,oBAAA,GAAG3D,UAAU,CAACsB,OAAO,MAAA,IAAA,IAAAqC,oBAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAlBA,oBAAA,CAAoBH,QAAQ,CAACP,KAAK,CAACnF,MAAiB,CAAC,CAAA;AAE3E,QAAA,IAAI,CAAC8F,eAAe,IAAI,CAACL,aAAa,EAAE;UACpChE,QAAQ,KAAA,IAAA,IAARA,QAAQ,KAARA,KAAAA,CAAAA,IAAAA,QAAQ,CAAG,CAACK,WAAW,EAAEqD,KAAK,CAAC,CAAA;AACnC,SAAA;AACJ,OAAA;KACH,EACD,CAAC7E,OAAO,EAAEwB,WAAW,EAAEL,QAAQ,CACnC,CAAC,CAAA;AAED,IAAA,IAAMsE,YAAY,GAAGb,WAAW,CAC5B,UAACC,KAAK,EAAK;MACP,IAAI7E,OAAO,KAAK,OAAO,EAAE;QACrBmB,QAAQ,KAAA,IAAA,IAARA,QAAQ,KAARA,KAAAA,CAAAA,IAAAA,QAAQ,CAAG,IAAI,EAAE0D,KAAK,CAAC,CAAA;AAC3B,OAAA;AACJ,KAAC,EACD,CAAC7E,OAAO,EAAEmB,QAAQ,CACtB,CAAC,CAAA;AAED,IAAA,IAAMuE,YAAY,GAAGd,WAAW,CAC5B,UAACC,KAAK,EAAK;MACP,IAAI7E,OAAO,KAAK,OAAO,EAAE;QACrBmB,QAAQ,KAAA,IAAA,IAARA,QAAQ,KAARA,KAAAA,CAAAA,IAAAA,QAAQ,CAAG,KAAK,EAAE0D,KAAK,CAAC,CAAA;AAC5B,OAAA;AACJ,KAAC,EACD,CAAC7E,OAAO,EAAEmB,QAAQ,CACtB,CAAC,CAAA;AAED,IAAA,IAAMwE,OAAO,GAAGf,WAAW,CACvB,UAACC,KAAK,EAAK;MACP,IAAI7E,OAAO,KAAK,OAAO,EAAE;QACrBmB,QAAQ,KAAA,IAAA,IAARA,QAAQ,KAARA,KAAAA,CAAAA,IAAAA,QAAQ,CAAG,IAAI,EAAE0D,KAAK,CAAC,CAAA;AAC3B,OAAA;AACJ,KAAC,EACD,CAAC7E,OAAO,EAAEmB,QAAQ,CACtB,CAAC,CAAA;AAED,IAAA,IAAMyE,MAAM,GAAGhB,WAAW,CACtB,UAACC,KAAK,EAAK;MACP,IAAI7E,OAAO,KAAK,OAAO,EAAE;QACrBmB,QAAQ,KAAA,IAAA,IAARA,QAAQ,KAARA,KAAAA,CAAAA,IAAAA,QAAQ,CAAG,KAAK,EAAE0D,KAAK,CAAC,CAAA;AAC5B,OAAA;AACJ,KAAC,EACD,CAAC7E,OAAO,EAAEmB,QAAQ,CACtB,CAAC,CAAA;AAED0E,IAAAA,SAAS,CAAC,YAAM;AACZC,MAAAA,QAAQ,CAACC,gBAAgB,CAAC,OAAO,EAAEhB,eAAe,CAAC,CAAA;MACnD,OAAO,YAAA;AAAA,QAAA,OAAMe,QAAQ,CAACE,mBAAmB,CAAC,OAAO,EAAEjB,eAAe,CAAC,CAAA;AAAA,OAAA,CAAA;AACvE,KAAC,EAAE,CAACvD,WAAW,EAAEL,QAAQ,CAAC,CAAC,CAAA;AAE3B0E,IAAAA,SAAS,CAAC,YAAM;AACZI,MAAAA,MAAM,CAACF,gBAAgB,CAAC,SAAS,EAAEpB,QAAQ,CAAC,CAAA;MAC5C,OAAO,YAAA;AAAA,QAAA,OAAMsB,MAAM,CAACD,mBAAmB,CAAC,SAAS,EAAErB,QAAQ,CAAC,CAAA;AAAA,OAAA,CAAA;KAC/D,EAAE,CAAC9D,UAAU,EAAEW,WAAW,EAAEL,QAAQ,CAAC,CAAC,CAAA;AAEvC0E,IAAAA,SAAS,CAAC,YAAM;AACZ,MAAA,IAAIK,MAAM,GAAGJ,QAAQ,CAACK,cAAc,CAAChH,iBAAiB,CAAC,CAAA;MAEvD,IAAI,OAAOgB,KAAK,KAAK,QAAQ,IAAIA,KAAK,IAAIA,KAAK,CAAC+C,OAAO,EAAE;QACrDgD,MAAM,GAAG/F,KAAK,CAAC+C,OAAO,CAAA;AAC1B,OAAA;AAEA,MAAA,IAAI,CAACjC,SAAS,iBAAImF,cAAc,CAAC1G,MAAM,CAAC,EAAE;QACtCwG,MAAM,GAAGxE,OAAO,CAACwB,OAAO,CAAA;AAC5B,OAAA;MAEA,IAAI,CAACgD,MAAM,EAAE;AACTA,QAAAA,MAAM,GAAGJ,QAAQ,CAACO,aAAa,CAAC,KAAK,CAAC,CAAA;AACtCH,QAAAA,MAAM,CAACI,YAAY,CAAC,IAAI,EAAEnH,iBAAiB,CAAC,CAAA;QAE5C,IAAI,OAAOgB,KAAK,KAAK,QAAQ,IAAIA,KAAK,KAAK,UAAU,EAAE;AAAA,UAAA,IAAAoG,qBAAA,CAAA;AACnD,UAAA,CAAAA,qBAAA,GAAAT,QAAQ,CAACK,cAAc,CAAChG,KAAK,CAAC,MAAAoG,IAAAA,IAAAA,qBAAA,eAA9BA,qBAAA,CAAgCC,WAAW,CAACN,MAAM,CAAC,CAAA;AACvD,SAAC,MAAM;AACHJ,UAAAA,QAAQ,CAACW,IAAI,CAACD,WAAW,CAACN,MAAM,CAAC,CAAA;AACrC,SAAA;AACJ,OAAA;MAEAnE,SAAS,CAACmB,OAAO,GAAGgD,MAAM,CAAA;;AAE1B;AAChB;AACA;AACA;MACgBvD,WAAW,CAAC,IAAI,CAAC,CAAA;KACpB,EAAE,EAAE,CAAC,CAAA;AAENkD,IAAAA,SAAS,CAAC,YAAM;AACZ,MAAA,IAAI,CAACrE,WAAW,IAAI,CAACkD,WAAW,EAAE;AAC9B,QAAA,OAAA;AACJ,OAAA;;AAEA;AAChB;AACA;AACA;AACA;AACA;MACgBgC,OAAO,CAACC,OAAO,EAAE,CAACC,IAAI,CAAClC,WAAW,CAAC,CAAA;KACtC,EAAE,CAAClD,WAAW,EAAE7B,QAAQ,EAAE+E,WAAW,CAAC,CAAC,CAAA;AAExC,IAAA,IAAMmC,mBAAmB,GAAG,SAAtBA,mBAAmBA,GAAS;MAC9B,IAAI,CAACrF,WAAW,EAAE;QACduB,eAAe,CAAC,KAAK,CAAC,CAAA;AAC1B,OAAA;KACH,CAAA;AAED8C,IAAAA,SAAS,CAAC,YAAM;AACZ,MAAA,IAAIrE,WAAW,EAAE;QACbuB,eAAe,CAAC,IAAI,CAAC,CAAA;AACzB,OAAA;AACJ,KAAC,EAAE,CAACvB,WAAW,CAAC,CAAC,CAAA;AAEjB,IAAA,oBACIsF,KAAA,CAAAT,aAAA,CAACU,MAAM,EAAA;AAACC,MAAAA,SAAS,EAAEhE,eAAgB;MAACiE,QAAQ,eAAEb,cAAc,CAAC1G,MAAM,CAAA;AAAE,KAAA,eACjEoH,KAAA,CAAAT,aAAA,CAACa,aAAa,EAAA;AACV9G,MAAAA,SAAS,EAAE+G,EAAE,CAACzD,OAAO,CAAC0D,OAAO,EAAE,eAAChB,cAAc,CAAC1G,MAAM,CAAC,IAAIgE,OAAO,CAAC2D,WAAW,CAAE;AAC/E5B,MAAAA,YAAY,EAAEA,YAAa;AAC3BC,MAAAA,YAAY,EAAEA,YAAAA;AAAa,KAAA,eAE3BoB,KAAA,CAAAT,aAAA,CAACiB,UAAU,EAAA;AACPC,MAAAA,GAAG,EAAE1F,SAAU;AACfyD,MAAAA,OAAO,EAAEA,OAAQ;AACjBK,MAAAA,OAAO,EAAEA,OAAQ;AACjBC,MAAAA,MAAM,EAAEA,MAAO;AACfxF,MAAAA,SAAS,EAAE+G,EAAE,CAAC/G,SAAS,EAAEsD,OAAO,CAAChE,MAAM,CAAA;AAAE,KAAA,eAExC0G,cAAc,CAAC1G,MAAM,CAAC,IAAIA,MACnB,CAAC,EACZC,QAAQ,IAAIoC,SAAS,CAACmB,OAAO,iBAC1B4D,KAAA,CAAAT,aAAA,CAACU,MAAM,EAAA;MAACC,SAAS,EAAEjF,SAAS,CAACmB,OAAAA;AAAQ,KAAA,eACjC4D,KAAA,CAAAT,aAAA,CAAChH,IAAI,EAAAmI,QAAA,CAAA;AAACtG,MAAAA,IAAI,EAAEA,IAAK;AAACd,MAAAA,SAAS,EAAEA,SAAAA;AAAU,KAAA,EAAKiB,IAAI,CAAA,eAC5CyF,KAAA,CAAAT,aAAA,CAACoB,aAAa,EAAAD,QAAA,CAAA,EAAA,EACN/C,UAAU,CAACiD,MAAM,EAAA;AACrBC,MAAAA,eAAe,EAAEd,mBAAoB;MACrCzG,SAAS,EAAE+G,EAAE,CAACzD,OAAO,CAACkE,IAAI,EAAEnE,SAAS,EAAEG,aAAa,CAAE;AACtD2D,MAAAA,GAAG,EAAErF,cAAe;AACpB2F,MAAAA,KAAK,EAAAC,cAAA,CAAAA,cAAA,CACEtD,EAAAA,EAAAA,MAAM,CAACkD,MAAM,CAAA,EAAA,EAAA,EAAA;AAChBK,QAAAA,OAAO,EAAEjF,YAAY,IAAItB,WAAW,GAAG,OAAO,GAAG,MAAA;OACnD,CAAA;AACFf,MAAAA,MAAM,EAAEA,MAAAA;KAEPR,CAAAA,EAAAA,QAAQ,iBACL6G,KAAA,CAAAT,aAAA,CAAC2B,WAAW,EAAAR,QAAA,CAAA;MACRpH,SAAS,EAAEsD,OAAO,CAACuE,KAAM;AACzBV,MAAAA,GAAG,EAAE/E,eAAgB;MACrBqF,KAAK,EAAErD,MAAM,CAACyD,KAAAA;KACVxD,EAAAA,UAAU,CAACwD,KAAK,CACvB,CACJ,EACAtI,QACU,CACb,CACF,CAED,CACX,CAAC,CAAA;AAEjB,GACJ,CAAC,CAAA;AAAA,EAAA;AAEE,IAAMuI,aAAa,GAAG;AACzBhE,EAAAA,IAAI,EAAE,SAAS;AACfiE,EAAAA,GAAG,EAAE,KAAK;AACVC,EAAAA,MAAM,EAAEhJ,WAAW;AACnBiJ,EAAAA,IAAI,EAAE,EAAE;AACRC,EAAAA,UAAU,EAAE;AACRpH,IAAAA,IAAI,EAAE;AACFqH,MAAAA,GAAG,EAAEC,IAAAA;AACT,KAAA;GACH;AACDC,EAAAA,QAAQ,EAAE;AACNvH,IAAAA,IAAI,EAAE,SAAA;AACV,GAAA;AACJ;;;;"}
|
1
|
+
{"version":3,"file":"Popover.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import React, { useRef, useCallback, useEffect, useState, forwardRef, isValidElement } from 'react';\nimport { usePopper } from 'react-popper';\nimport { useForkRef } from '@salutejs/plasma-core';\n\nimport type { RootProps } from '../../engines/types';\nimport { useFocusTrap } from '../../hooks';\nimport { cx } from '../../utils';\nimport { Portal } from '../Portal';\n\nimport { base as viewCSS } from './variations/_view/base';\nimport type { PopoverPlacement, PopoverProps } from './Popover.types';\nimport { StyledArrow, StyledPopover, StyledRoot, StyledWrapper } from './Popover.styles';\nimport { classes } from './Popover.tokens';\nimport { usePopoverOffset } from './hooks/usePopoverOffset';\n\nexport const ESCAPE_KEYCODE = 27;\nexport const POPOVER_PORTAL_ID = 'plasma-popover-root';\n\n/**\n * Всплывающее окно с возможностью позиционирования\n * и вызова по клику либо ховеру.\n */\nexport const popoverRoot = (Root: RootProps<HTMLDivElement, PopoverProps>) =>\n forwardRef<HTMLDivElement, PopoverProps>(\n (\n {\n target,\n children,\n animated,\n isOpen,\n opened,\n trigger = 'click',\n hasArrow,\n frame = 'document',\n className,\n placement = 'auto',\n offset = [0, 0],\n zIndex,\n isFocusTrapped = true,\n closeOnEsc = true,\n preventOverflow = true,\n usePortal = false,\n view,\n onToggle,\n closeOnOverlayClick,\n ...rest\n },\n outerRootRef,\n ) => {\n const innerIsOpen = Boolean(isOpen || opened);\n\n const rootRef = useRef<HTMLDivElement | null>(null);\n const popoverRef = useRef<HTMLDivElement | null>(null);\n const handleRef = useForkRef<HTMLDivElement>(rootRef, outerRootRef);\n const portalRef = useRef<HTMLElement | null>(null);\n const targetRef = useRef<HTMLDivElement | null>(null);\n\n const trapRef = useFocusTrap(innerIsOpen && isFocusTrapped);\n\n const popoverForkRef = useForkRef<HTMLDivElement>(popoverRef, trapRef);\n\n const [arrowElement, setArrowElement] = useState<HTMLSpanElement | null>(null);\n\n const [, forceRender] = useState(false);\n const [shouldRender, setShouldRender] = useState(innerIsOpen);\n\n const portalContainer =\n (typeof target === 'object' && target !== null && 'current' in target && target.current) || undefined;\n\n const isAutoArray = Array.isArray(placement);\n const isAuto = isAutoArray || (placement as PopoverPlacement).startsWith('auto');\n\n const openClass = innerIsOpen && shouldRender ? classes.open : undefined;\n const animatedClass = animated ? classes.animate : undefined;\n\n const offsetInner = usePopoverOffset({\n handleRef: targetRef,\n placement: placement as string,\n offsetOuter: offset,\n });\n\n const { styles, attributes, forceUpdate } = usePopper(rootRef.current, popoverRef.current, {\n // TODO: #1121\n // eslint-disable-next-line no-nested-ternary\n placement: isAutoArray\n ? placement[0]?.endsWith('start')\n ? 'auto-start'\n : 'auto'\n : (placement as PopoverPlacement),\n modifiers: [\n {\n name: 'preventOverflow',\n options: {\n mainAxis: preventOverflow,\n },\n },\n { name: 'offset', options: { offset: [offsetInner[0], offsetInner[1]] } },\n {\n name: 'flip',\n enabled: isAuto,\n options: {\n allowedAutoPlacements: isAutoArray ? (placement as PopoverPlacement[]) : [],\n },\n },\n {\n name: 'arrow',\n options: {\n element: arrowElement,\n },\n },\n ],\n });\n\n const onEscape = useCallback(\n (event: KeyboardEvent) => {\n if (innerIsOpen && closeOnEsc && event.keyCode === ESCAPE_KEYCODE) {\n onToggle?.(false, event);\n }\n },\n [closeOnEsc, innerIsOpen, onToggle],\n );\n\n const onDocumentClick = useCallback(\n (event: MouseEvent) => {\n if (innerIsOpen && closeOnOverlayClick && onToggle) {\n const targetIsRoot = event.target === rootRef.current;\n const rootHasTarget = rootRef.current?.contains(event.target as Element);\n const popoverRootHasTarget = popoverRef.current?.contains(event.target as Element);\n\n if (!targetIsRoot && !rootHasTarget && !popoverRootHasTarget) {\n onToggle(false, event);\n }\n }\n },\n [closeOnOverlayClick, innerIsOpen, onToggle],\n );\n\n const onClick = useCallback<React.MouseEventHandler>(\n (event) => {\n if (trigger === 'click') {\n const targetIsPopover = event.target === popoverRef.current;\n const rootHasTarget = popoverRef.current?.contains(event.target as Element);\n\n if (!targetIsPopover && !rootHasTarget) {\n onToggle?.(!innerIsOpen, event);\n }\n }\n },\n [trigger, innerIsOpen, onToggle],\n );\n\n const onMouseEnter = useCallback<React.MouseEventHandler>(\n (event) => {\n if (trigger === 'hover') {\n onToggle?.(true, event);\n }\n },\n [trigger, onToggle],\n );\n\n const onMouseLeave = useCallback<React.MouseEventHandler>(\n (event) => {\n if (trigger === 'hover') {\n onToggle?.(false, event);\n }\n },\n [trigger, onToggle],\n );\n\n const onFocus = useCallback<React.FocusEventHandler>(\n (event) => {\n if (trigger === 'hover') {\n onToggle?.(true, event);\n }\n },\n [trigger, onToggle],\n );\n\n const onBlur = useCallback<React.FocusEventHandler>(\n (event) => {\n if (trigger === 'hover') {\n onToggle?.(false, event);\n }\n },\n [trigger, onToggle],\n );\n\n useEffect(() => {\n document.addEventListener('click', onDocumentClick);\n return () => document.removeEventListener('click', onDocumentClick);\n }, [innerIsOpen, onToggle]);\n\n useEffect(() => {\n window.addEventListener('keydown', onEscape);\n return () => window.removeEventListener('keydown', onEscape);\n }, [closeOnEsc, innerIsOpen, onToggle]);\n\n useEffect(() => {\n let portal = document.getElementById(POPOVER_PORTAL_ID);\n\n if (typeof frame !== 'string' && frame && frame.current) {\n portal = frame.current;\n }\n\n if (!usePortal && isValidElement(target)) {\n portal = rootRef.current;\n }\n\n if (!portal) {\n portal = document.createElement('div');\n portal.setAttribute('id', POPOVER_PORTAL_ID);\n\n if (typeof frame === 'string' && frame !== 'document') {\n document.getElementById(frame)?.appendChild(portal);\n } else {\n document.body.appendChild(portal);\n }\n }\n\n portalRef.current = portal;\n\n /**\n * Изменение стейта нужно для того, чтобы Popup\n * отобразился после записи DOM элемента в portalRef.current\n */\n forceRender(true);\n }, []);\n\n useEffect(() => {\n if (!innerIsOpen || !forceUpdate) {\n return;\n }\n\n /*\n * INFO: Метод forceUpdate содержит в себе flushSync и приводит\n * к повторному рендеру компонента, который уже находится в процессе рендера.\n * Данный хак, нужен для того, чтобы это поведение избежать и перенаправить\n * вызов метода в очередь микрозадач.\n */\n Promise.resolve().then(forceUpdate);\n }, [innerIsOpen, children, forceUpdate]);\n\n const handleTransitionEnd = () => {\n if (!innerIsOpen) {\n setShouldRender(false);\n }\n };\n\n useEffect(() => {\n if (innerIsOpen) {\n setShouldRender(true);\n }\n }, [innerIsOpen]);\n\n return (\n <Portal container={portalContainer} disabled={isValidElement(target)}>\n <StyledWrapper\n className={cx(classes.wrapper, !isValidElement(target) && classes.targetAsRef)}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n ref={targetRef}\n >\n <StyledRoot\n ref={handleRef}\n onClick={onClick}\n onFocus={onFocus}\n onBlur={onBlur}\n className={cx(className, classes.target)}\n >\n {isValidElement(target) && target}\n </StyledRoot>\n {children && portalRef.current && (\n <Portal container={portalRef.current}>\n <Root view={view} className={className} {...rest}>\n <StyledPopover\n {...attributes.popper}\n onTransitionEnd={handleTransitionEnd}\n className={cx(classes.root, openClass, animatedClass)}\n ref={popoverForkRef}\n style={{\n ...styles.popper,\n display: shouldRender || innerIsOpen ? 'block' : 'none',\n }}\n zIndex={zIndex}\n >\n {hasArrow && (\n <StyledArrow\n className={classes.arrow}\n ref={setArrowElement}\n style={styles.arrow}\n {...attributes.arrow}\n />\n )}\n {children}\n </StyledPopover>\n </Root>\n </Portal>\n )}\n </StyledWrapper>\n </Portal>\n );\n },\n );\n\nexport const popoverConfig = {\n name: 'Popover',\n tag: 'div',\n layout: popoverRoot,\n base: '',\n variations: {\n view: {\n css: viewCSS,\n },\n },\n defaults: {\n view: 'default',\n },\n};\n"],"names":["ESCAPE_KEYCODE","POPOVER_PORTAL_ID","popoverRoot","Root","forwardRef","_ref","outerRootRef","_placement$","target","children","animated","isOpen","opened","_ref$trigger","trigger","hasArrow","_ref$frame","frame","className","_ref$placement","placement","_ref$offset","offset","zIndex","_ref$isFocusTrapped","isFocusTrapped","_ref$closeOnEsc","closeOnEsc","_ref$preventOverflow","preventOverflow","_ref$usePortal","usePortal","view","onToggle","closeOnOverlayClick","rest","_objectWithoutProperties","_excluded","innerIsOpen","Boolean","rootRef","useRef","popoverRef","handleRef","useForkRef","portalRef","targetRef","trapRef","useFocusTrap","popoverForkRef","_useState","useState","_useState2","_slicedToArray","arrowElement","setArrowElement","_useState3","_useState4","forceRender","_useState5","_useState6","shouldRender","setShouldRender","portalContainer","_typeof","current","undefined","isAutoArray","Array","isArray","isAuto","startsWith","openClass","classes","open","animatedClass","animate","offsetInner","usePopoverOffset","offsetOuter","_usePopper","usePopper","endsWith","modifiers","name","options","mainAxis","enabled","allowedAutoPlacements","element","styles","attributes","forceUpdate","onEscape","useCallback","event","keyCode","onDocumentClick","_rootRef$current","_popoverRef$current","targetIsRoot","rootHasTarget","contains","popoverRootHasTarget","onClick","_popoverRef$current2","targetIsPopover","onMouseEnter","onMouseLeave","onFocus","onBlur","useEffect","document","addEventListener","removeEventListener","window","portal","getElementById","isValidElement","createElement","setAttribute","_document$getElementB","appendChild","body","Promise","resolve","then","handleTransitionEnd","React","Portal","container","disabled","StyledWrapper","cx","wrapper","targetAsRef","ref","StyledRoot","_extends","StyledPopover","popper","onTransitionEnd","root","style","_objectSpread","display","StyledArrow","arrow","popoverConfig","tag","layout","base","variations","css","viewCSS","defaults"],"mappings":"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"}
|
@@ -0,0 +1,44 @@
|
|
1
|
+
import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
|
2
|
+
import { useState, useEffect } from 'react';
|
3
|
+
|
4
|
+
var allowedPlacements = ['top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-start', 'left-end', 'right-start', 'right-end'];
|
5
|
+
var widthThreshold = 28;
|
6
|
+
var offsetXStartThreshold = 17;
|
7
|
+
var offsetXEndThreshold = 19;
|
8
|
+
var usePopoverOffset = function usePopoverOffset(_ref) {
|
9
|
+
var handleRef = _ref.handleRef,
|
10
|
+
placement = _ref.placement,
|
11
|
+
offsetOuter = _ref.offsetOuter;
|
12
|
+
var _useState = useState(offsetOuter),
|
13
|
+
_useState2 = _slicedToArray(_useState, 2),
|
14
|
+
offset = _useState2[0],
|
15
|
+
setOffset = _useState2[1];
|
16
|
+
useEffect(function () {
|
17
|
+
var refElement = handleRef.current;
|
18
|
+
if (!refElement || !allowedPlacements.includes(placement)) {
|
19
|
+
setOffset(offsetOuter);
|
20
|
+
return;
|
21
|
+
}
|
22
|
+
var _refElement$getBoundi = refElement.getBoundingClientRect(),
|
23
|
+
width = _refElement$getBoundi.width,
|
24
|
+
height = _refElement$getBoundi.height;
|
25
|
+
var isVertical = (placement === null || placement === void 0 ? void 0 : placement.startsWith('top')) || (placement === null || placement === void 0 ? void 0 : placement.startsWith('bottom'));
|
26
|
+
var isEnd = placement === null || placement === void 0 ? void 0 : placement.endsWith('end');
|
27
|
+
var isStart = placement === null || placement === void 0 ? void 0 : placement.endsWith('start');
|
28
|
+
var offsetX = offsetOuter[0];
|
29
|
+
var offsetY = offsetOuter[1];
|
30
|
+
if (isVertical) {
|
31
|
+
if ((isStart || isEnd) && width < widthThreshold) {
|
32
|
+
offsetX = isEnd ? offsetXStartThreshold - width / 2 + offsetOuter[0] : -offsetXStartThreshold + width / 2 - offsetOuter[0];
|
33
|
+
}
|
34
|
+
}
|
35
|
+
if (!isVertical && (isStart || isEnd) && height < widthThreshold) {
|
36
|
+
offsetX = isStart ? -offsetXEndThreshold + height / 2 : offsetXEndThreshold - height / 2;
|
37
|
+
}
|
38
|
+
setOffset([offsetX, offsetY]);
|
39
|
+
}, [handleRef, placement, offsetOuter]);
|
40
|
+
return offset;
|
41
|
+
};
|
42
|
+
|
43
|
+
export { usePopoverOffset };
|
44
|
+
//# sourceMappingURL=usePopoverOffset.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"usePopoverOffset.js","sources":["../../../../src/components/Popover/hooks/usePopoverOffset.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nconst allowedPlacements = [\n 'top-start',\n 'top-end',\n 'bottom-start',\n 'bottom-end',\n 'left-start',\n 'left-end',\n 'right-start',\n 'right-end',\n] as const;\n\ntype Placement = typeof allowedPlacements[number];\n\nconst widthThreshold = 28;\nconst offsetXStartThreshold = 17;\nconst offsetXEndThreshold = 19;\n\ninterface UsePopoverOffsetOptions {\n handleRef: React.RefObject<HTMLDivElement>;\n placement?: string;\n offsetOuter: [number, number];\n}\n\nexport const usePopoverOffset = ({ handleRef, placement, offsetOuter }: UsePopoverOffsetOptions): [number, number] => {\n const [offset, setOffset] = useState<[number, number]>(offsetOuter);\n\n useEffect(() => {\n const refElement = handleRef.current;\n\n if (!refElement || !allowedPlacements.includes(placement as Placement)) {\n setOffset(offsetOuter);\n return;\n }\n\n const { width, height } = refElement.getBoundingClientRect();\n\n const isVertical = placement?.startsWith('top') || placement?.startsWith('bottom');\n const isEnd = placement?.endsWith('end');\n const isStart = placement?.endsWith('start');\n\n let offsetX = offsetOuter[0];\n const offsetY = offsetOuter[1];\n\n if (isVertical) {\n if ((isStart || isEnd) && width < widthThreshold) {\n offsetX = isEnd\n ? offsetXStartThreshold - width / 2 + offsetOuter[0]\n : -offsetXStartThreshold + width / 2 - offsetOuter[0];\n }\n }\n\n if (!isVertical && (isStart || isEnd) && height < widthThreshold) {\n offsetX = isStart ? -offsetXEndThreshold + height / 2 : offsetXEndThreshold - height / 2;\n }\n\n setOffset([offsetX, offsetY]);\n }, [handleRef, placement, offsetOuter]);\n\n return offset;\n};\n"],"names":["allowedPlacements","widthThreshold","offsetXStartThreshold","offsetXEndThreshold","usePopoverOffset","_ref","handleRef","placement","offsetOuter","_useState","useState","_useState2","_slicedToArray","offset","setOffset","useEffect","refElement","current","includes","_refElement$getBoundi","getBoundingClientRect","width","height","isVertical","startsWith","isEnd","endsWith","isStart","offsetX","offsetY"],"mappings":"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"}
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, objectSpread2 as _objectSpread2 } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
|
2
|
-
import React, { forwardRef, useRef, useContext, useEffect, useCallback } from 'react';
|
2
|
+
import React, { forwardRef, useRef, useContext, useEffect, useLayoutEffect, useCallback } from 'react';
|
3
3
|
import { useForkRef } from '@salutejs/plasma-core';
|
4
4
|
import { classes } from '../../../tokens.js';
|
5
5
|
import { cx } from '../../../../../utils/index.js';
|
@@ -55,6 +55,16 @@ var horizontalTabItemRoot = function horizontalTabItemRoot(Root) {
|
|
55
55
|
return refs.unregister(innerRef);
|
56
56
|
};
|
57
57
|
}, [refs]);
|
58
|
+
useLayoutEffect(function () {
|
59
|
+
var _innerRef$current;
|
60
|
+
if (!selected) {
|
61
|
+
return;
|
62
|
+
}
|
63
|
+
(_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 || _innerRef$current.scrollIntoView({
|
64
|
+
block: 'nearest',
|
65
|
+
inline: 'nearest'
|
66
|
+
});
|
67
|
+
}, [selected]);
|
58
68
|
var onItemFocus = useCallback(function (event) {
|
59
69
|
if (disabled) {
|
60
70
|
return;
|
@@ -80,10 +90,6 @@ var horizontalTabItemRoot = function horizontalTabItemRoot(Root) {
|
|
80
90
|
refs.setCurrent(focusIndex);
|
81
91
|
}, [refs, innerRef, onIndexChange, disabled]);
|
82
92
|
var handleClick = function handleClick(event) {
|
83
|
-
event.currentTarget.scrollIntoView({
|
84
|
-
block: 'nearest',
|
85
|
-
inline: 'nearest'
|
86
|
-
});
|
87
93
|
if (!onClick) {
|
88
94
|
return;
|
89
95
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"HorizontalTabItem.js","sources":["../../../../../../src/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.tsx"],"sourcesContent":["import React, { forwardRef, useRef, useContext, useEffect, useCallback } from 'react';\nimport { useForkRef } from '@salutejs/plasma-core';\n\nimport { RootProps } from '../../../../../engines';\nimport { classes } from '../../../tokens';\nimport { cx } from '../../../../../utils';\nimport { TabsContext } from '../../../TabsContext';\nimport { HorizontalTabItemProps } from '../../../TabItem.types';\n\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as pilledCSS } from './variations/_pilled/base';\nimport { base as disabledCSS } from './variations/_disabled/base';\nimport { LeftContent, RightContent, StyledContent, TabItemValue, base } from './HorizontalTabItem.styles';\n\nexport const horizontalTabItemRoot = (Root: RootProps<HTMLDivElement, HorizontalTabItemProps>) =>\n forwardRef<HTMLDivElement, HorizontalTabItemProps>((props, outerRef) => {\n const {\n size,\n view,\n isActive,\n selected,\n disabled = false,\n pilled = false,\n children,\n value,\n contentLeft,\n contentRight,\n animated = true,\n onIndexChange,\n itemIndex,\n tabIndex,\n className,\n onClick,\n maxItemWidth: maxWidth = 'auto',\n ...rest\n } = props;\n\n const innerRef = useRef<HTMLDivElement>(null);\n const ref = useForkRef(outerRef, innerRef);\n const refs = useContext(TabsContext);\n\n const role = 'tab';\n\n const pilledAttr = view !== 'clear' && pilled;\n const animatedClass = animated ? classes.tabItemAnimated : undefined;\n const pilledClass = pilledAttr ? classes.tabsPilled : undefined;\n const selectedClass = isActive || selected ? classes.selectedTabsItem : undefined;\n const truncateClass = maxWidth !== 'auto' ? classes.tabsTruncate : undefined;\n\n const hasKeyNavigation = itemIndex !== undefined && onIndexChange !== undefined;\n const navigationTabIndex = !disabled && refs?.current === itemIndex ? 0 : -1;\n\n useEffect(() => {\n if (!refs) {\n return;\n }\n\n refs.register(innerRef);\n\n return () => refs.unregister(innerRef);\n }, [refs]);\n\n const onItemFocus = useCallback<React.FocusEventHandler>(\n (event) => {\n if (disabled) {\n return;\n }\n\n if (!hasKeyNavigation && innerRef?.current) {\n innerRef.current.scrollTo({\n top: 0,\n left: innerRef.current.offsetLeft,\n behavior: 'smooth',\n });\n\n return;\n }\n\n if (!refs) {\n return;\n }\n\n const focusIndex = refs.items.findIndex((itemRef) => itemRef.current === event.target);\n\n if (focusIndex === refs.current) {\n return;\n }\n\n onIndexChange?.(focusIndex);\n refs.setCurrent(focusIndex);\n },\n [refs, innerRef, onIndexChange, disabled],\n );\n\n const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n event.currentTarget.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n\n if (!onClick) {\n return;\n }\n\n onClick(event);\n };\n\n return (\n <Root\n ref={ref}\n disabled={disabled}\n pilled={pilled}\n role={role}\n view={view}\n // TODO: убрать каст any, когда будут удалены deprecated props\n size={size as any}\n onFocus={onItemFocus}\n tabIndex={hasKeyNavigation ? navigationTabIndex : tabIndex}\n className={cx(pilledClass, selectedClass, animatedClass, truncateClass, className)}\n onClick={handleClick}\n {...rest}\n style={{\n ...rest.style,\n maxWidth,\n }}\n >\n <>\n {contentLeft && <LeftContent className={classes.tabLeftContent}>{contentLeft}</LeftContent>}\n <StyledContent className={classes.tabContent}>{children}</StyledContent>\n {!contentRight && value && <TabItemValue>{value}</TabItemValue>}\n {!value && contentRight && (\n <RightContent className={classes.tabRightContent}>{contentRight}</RightContent>\n )}\n </>\n </Root>\n );\n });\n\nexport const horizontalTabItemConfig = {\n name: 'HorizontalTabItem',\n tag: 'button',\n layout: horizontalTabItemRoot,\n base,\n variations: {\n size: {\n css: sizeCSS,\n },\n view: {\n css: viewCSS,\n },\n disabled: {\n css: disabledCSS,\n attrs: true,\n },\n pilled: {\n css: pilledCSS,\n },\n },\n defaults: {\n view: 'default',\n },\n};\n"],"names":["horizontalTabItemRoot","Root","forwardRef","props","outerRef","size","view","isActive","selected","_props$disabled","disabled","_props$pilled","pilled","children","value","contentLeft","contentRight","_props$animated","animated","onIndexChange","itemIndex","tabIndex","className","onClick","_props$maxItemWidth","maxItemWidth","maxWidth","rest","_objectWithoutProperties","_excluded","innerRef","useRef","ref","useForkRef","refs","useContext","TabsContext","role","pilledAttr","animatedClass","classes","tabItemAnimated","undefined","pilledClass","tabsPilled","selectedClass","selectedTabsItem","truncateClass","tabsTruncate","hasKeyNavigation","navigationTabIndex","current","useEffect","register","unregister","onItemFocus","useCallback","event","scrollTo","top","left","offsetLeft","behavior","focusIndex","items","findIndex","itemRef","target","setCurrent","handleClick","currentTarget","scrollIntoView","block","inline","React","createElement","_extends","onFocus","cx","style","_objectSpread","Fragment","LeftContent","tabLeftContent","StyledContent","tabContent","TabItemValue","RightContent","tabRightContent","horizontalTabItemConfig","name","tag","layout","base","variations","css","sizeCSS","viewCSS","disabledCSS","attrs","pilledCSS","defaults"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"HorizontalTabItem.js","sources":["../../../../../../src/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.tsx"],"sourcesContent":["import React, { forwardRef, useRef, useContext, useEffect, useCallback, useLayoutEffect } from 'react';\nimport { useForkRef } from '@salutejs/plasma-core';\n\nimport { RootProps } from '../../../../../engines';\nimport { classes } from '../../../tokens';\nimport { cx } from '../../../../../utils';\nimport { TabsContext } from '../../../TabsContext';\nimport { HorizontalTabItemProps } from '../../../TabItem.types';\n\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as pilledCSS } from './variations/_pilled/base';\nimport { base as disabledCSS } from './variations/_disabled/base';\nimport { LeftContent, RightContent, StyledContent, TabItemValue, base } from './HorizontalTabItem.styles';\n\nexport const horizontalTabItemRoot = (Root: RootProps<HTMLDivElement, HorizontalTabItemProps>) =>\n forwardRef<HTMLDivElement, HorizontalTabItemProps>((props, outerRef) => {\n const {\n size,\n view,\n isActive,\n selected,\n disabled = false,\n pilled = false,\n children,\n value,\n contentLeft,\n contentRight,\n animated = true,\n onIndexChange,\n itemIndex,\n tabIndex,\n className,\n onClick,\n maxItemWidth: maxWidth = 'auto',\n ...rest\n } = props;\n\n const innerRef = useRef<HTMLDivElement>(null);\n const ref = useForkRef(outerRef, innerRef);\n const refs = useContext(TabsContext);\n\n const role = 'tab';\n\n const pilledAttr = view !== 'clear' && pilled;\n const animatedClass = animated ? classes.tabItemAnimated : undefined;\n const pilledClass = pilledAttr ? classes.tabsPilled : undefined;\n const selectedClass = isActive || selected ? classes.selectedTabsItem : undefined;\n const truncateClass = maxWidth !== 'auto' ? classes.tabsTruncate : undefined;\n\n const hasKeyNavigation = itemIndex !== undefined && onIndexChange !== undefined;\n const navigationTabIndex = !disabled && refs?.current === itemIndex ? 0 : -1;\n\n useEffect(() => {\n if (!refs) {\n return;\n }\n\n refs.register(innerRef);\n\n return () => refs.unregister(innerRef);\n }, [refs]);\n\n useLayoutEffect(() => {\n if (!selected) {\n return;\n }\n\n innerRef.current?.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n }, [selected]);\n\n const onItemFocus = useCallback<React.FocusEventHandler>(\n (event) => {\n if (disabled) {\n return;\n }\n\n if (!hasKeyNavigation && innerRef?.current) {\n innerRef.current.scrollTo({\n top: 0,\n left: innerRef.current.offsetLeft,\n behavior: 'smooth',\n });\n\n return;\n }\n\n if (!refs) {\n return;\n }\n\n const focusIndex = refs.items.findIndex((itemRef) => itemRef.current === event.target);\n\n if (focusIndex === refs.current) {\n return;\n }\n\n onIndexChange?.(focusIndex);\n refs.setCurrent(focusIndex);\n },\n [refs, innerRef, onIndexChange, disabled],\n );\n\n const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n if (!onClick) {\n return;\n }\n\n onClick(event);\n };\n\n return (\n <Root\n ref={ref}\n disabled={disabled}\n pilled={pilled}\n role={role}\n view={view}\n // TODO: убрать каст any, когда будут удалены deprecated props\n size={size as any}\n onFocus={onItemFocus}\n tabIndex={hasKeyNavigation ? navigationTabIndex : tabIndex}\n className={cx(pilledClass, selectedClass, animatedClass, truncateClass, className)}\n onClick={handleClick}\n {...rest}\n style={{\n ...rest.style,\n maxWidth,\n }}\n >\n <>\n {contentLeft && <LeftContent className={classes.tabLeftContent}>{contentLeft}</LeftContent>}\n <StyledContent className={classes.tabContent}>{children}</StyledContent>\n {!contentRight && value && <TabItemValue>{value}</TabItemValue>}\n {!value && contentRight && (\n <RightContent className={classes.tabRightContent}>{contentRight}</RightContent>\n )}\n </>\n </Root>\n );\n });\n\nexport const horizontalTabItemConfig = {\n name: 'HorizontalTabItem',\n tag: 'button',\n layout: horizontalTabItemRoot,\n base,\n variations: {\n size: {\n css: sizeCSS,\n },\n view: {\n css: viewCSS,\n },\n disabled: {\n css: disabledCSS,\n attrs: true,\n },\n pilled: {\n css: pilledCSS,\n },\n },\n defaults: {\n view: 'default',\n },\n};\n"],"names":["horizontalTabItemRoot","Root","forwardRef","props","outerRef","size","view","isActive","selected","_props$disabled","disabled","_props$pilled","pilled","children","value","contentLeft","contentRight","_props$animated","animated","onIndexChange","itemIndex","tabIndex","className","onClick","_props$maxItemWidth","maxItemWidth","maxWidth","rest","_objectWithoutProperties","_excluded","innerRef","useRef","ref","useForkRef","refs","useContext","TabsContext","role","pilledAttr","animatedClass","classes","tabItemAnimated","undefined","pilledClass","tabsPilled","selectedClass","selectedTabsItem","truncateClass","tabsTruncate","hasKeyNavigation","navigationTabIndex","current","useEffect","register","unregister","useLayoutEffect","_innerRef$current","scrollIntoView","block","inline","onItemFocus","useCallback","event","scrollTo","top","left","offsetLeft","behavior","focusIndex","items","findIndex","itemRef","target","setCurrent","handleClick","React","createElement","_extends","onFocus","cx","style","_objectSpread","Fragment","LeftContent","tabLeftContent","StyledContent","tabContent","TabItemValue","RightContent","tabRightContent","horizontalTabItemConfig","name","tag","layout","base","variations","css","sizeCSS","viewCSS","disabledCSS","attrs","pilledCSS","defaults"],"mappings":"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"}
|
@@ -1,9 +1,10 @@
|
|
1
1
|
import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
|
2
|
-
import React, { forwardRef, useState, useMemo, useRef, useCallback,
|
2
|
+
import React, { forwardRef, useState, useMemo, useRef, useCallback, useLayoutEffect } from 'react';
|
3
3
|
import { safeUseId } from '@salutejs/plasma-core';
|
4
4
|
import { classes } from '../../../tokens.js';
|
5
5
|
import { cx } from '../../../../../utils/index.js';
|
6
6
|
import { TabItemRefs, TabsContext } from '../../../TabsContext.js';
|
7
|
+
import { getFirstOverflowingTab, getLastOverflowingTab } from '../../../utils/index.js';
|
7
8
|
import { base as base$1 } from './variations/_size/base.js';
|
8
9
|
import { base as base$2 } from './variations/_view/base.js';
|
9
10
|
import { base as base$3 } from './variations/_disabled/base.js';
|
@@ -76,13 +77,7 @@ var horizontalTabsRoot = function horizontalTabsRoot(Root) {
|
|
76
77
|
return;
|
77
78
|
}
|
78
79
|
var scrollLeft = Math.round(scrollRef.current.scrollLeft);
|
79
|
-
var firstOverflowingTab = refs.items.slice().reverse()
|
80
|
-
if (!item.current || item.current.offsetLeft === undefined) {
|
81
|
-
return;
|
82
|
-
}
|
83
|
-
var tabStartX = item.current.offsetLeft;
|
84
|
-
return tabStartX < scrollLeft;
|
85
|
-
});
|
80
|
+
var firstOverflowingTab = getFirstOverflowingTab(refs.items.slice().reverse(), scrollLeft);
|
86
81
|
firstOverflowingTab === null || firstOverflowingTab === void 0 || (_firstOverflowingTab$ = firstOverflowingTab.current) === null || _firstOverflowingTab$ === void 0 || _firstOverflowingTab$.scrollIntoView({
|
87
82
|
block: 'nearest',
|
88
83
|
inline: 'start'
|
@@ -94,13 +89,7 @@ var horizontalTabsRoot = function horizontalTabsRoot(Root) {
|
|
94
89
|
return;
|
95
90
|
}
|
96
91
|
var scrollRight = Math.round(scrollRef.current.scrollLeft + scrollRef.current.clientWidth);
|
97
|
-
var lastOverflowingTab = refs.items
|
98
|
-
if (!item.current || item.current.offsetLeft === undefined) {
|
99
|
-
return;
|
100
|
-
}
|
101
|
-
var tabEndX = item.current.offsetLeft + item.current.offsetWidth;
|
102
|
-
return tabEndX > scrollRight;
|
103
|
-
});
|
92
|
+
var lastOverflowingTab = getLastOverflowingTab(refs.items, scrollRight);
|
104
93
|
lastOverflowingTab === null || lastOverflowingTab === void 0 || (_lastOverflowingTab$c = lastOverflowingTab.current) === null || _lastOverflowingTab$c === void 0 || _lastOverflowingTab$c.scrollIntoView({
|
105
94
|
block: 'nearest',
|
106
95
|
inline: 'end'
|
@@ -175,18 +164,22 @@ var horizontalTabsRoot = function horizontalTabsRoot(Root) {
|
|
175
164
|
});
|
176
165
|
}
|
177
166
|
}, [index]);
|
178
|
-
|
167
|
+
useLayoutEffect(function () {
|
179
168
|
var _scrollRef$current, _scrollRef$current2;
|
180
169
|
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));
|
181
170
|
}, []);
|
182
171
|
|
183
172
|
// Этот хук компенсирует появление левой стрелки при прокрутке
|
184
|
-
|
173
|
+
useLayoutEffect(function () {
|
174
|
+
var _lastOverflowingTab$c2;
|
185
175
|
if (firstItemVisible || !scrollRef.current || !leftArrowRef.current) {
|
186
176
|
return;
|
187
177
|
}
|
188
|
-
scrollRef.current.
|
189
|
-
|
178
|
+
var scrollRight = Math.round(scrollRef.current.scrollLeft + scrollRef.current.clientWidth);
|
179
|
+
var lastOverflowingTab = getLastOverflowingTab(refs.items, scrollRight);
|
180
|
+
lastOverflowingTab === null || lastOverflowingTab === void 0 || (_lastOverflowingTab$c2 = lastOverflowingTab.current) === null || _lastOverflowingTab$c2 === void 0 || _lastOverflowingTab$c2.scrollIntoView({
|
181
|
+
block: 'nearest',
|
182
|
+
inline: 'end'
|
190
183
|
});
|
191
184
|
}, [firstItemVisible, scrollRef, leftArrowRef]);
|
192
185
|
return /*#__PURE__*/React.createElement(TabsContext.Provider, {
|