@salutejs/plasma-new-hope 0.94.0-canary.1253.9693605980.0 → 0.94.0-canary.1272.9712079341.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (110) hide show
  1. package/cjs/components/Combobox/Combobox.js +1 -1
  2. package/cjs/components/Combobox/ui/ComboboxDivider/ComboboxDivider.js +1 -1
  3. package/cjs/components/Combobox/ui/ComboboxFooter/ComboboxFooter.js +1 -1
  4. package/cjs/components/Combobox/ui/ComboboxGroup/ComboboxGroup.js +1 -1
  5. package/cjs/components/Combobox/ui/ComboboxHeader/ComboboxHeader.js +1 -1
  6. package/cjs/components/Drawer/Drawer.js +1 -1
  7. package/cjs/components/Drawer/hooks/useDrawer.js +3 -1
  8. package/cjs/components/Drawer/hooks/useDrawer.js.map +1 -1
  9. package/cjs/components/Dropdown/Dropdown.js +1 -1
  10. package/cjs/components/Dropdown/ui/DropdownInner/DropdownInner.js +1 -1
  11. package/cjs/components/Modal/hooks/useModal.js +3 -1
  12. package/cjs/components/Modal/hooks/useModal.js.map +1 -1
  13. package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.styles.js +1 -1
  14. package/cjs/components/Popover/Popover.js +9 -3
  15. package/cjs/components/Popover/Popover.js.map +1 -1
  16. package/cjs/components/Popup/Popup.js +9 -3
  17. package/cjs/components/Popup/Popup.js.map +1 -1
  18. package/cjs/components/Portal/Portal.js +37 -0
  19. package/cjs/components/Portal/Portal.js.map +1 -0
  20. package/cjs/components/Range/Range.css +6 -6
  21. package/cjs/components/Select/Select.js +1 -1
  22. package/cjs/components/Select/ui/SelectDivider/SelectDivider.js +1 -1
  23. package/cjs/components/Select/ui/SelectFooter/SelectFooter.js +1 -1
  24. package/cjs/components/Select/ui/SelectGroup/SelectGroup.js +1 -1
  25. package/cjs/components/Select/ui/SelectHeader/SelectHeader.js +1 -1
  26. package/cjs/components/Select/ui/SelectItem/SelectItem.js +1 -1
  27. package/cjs/components/Select/ui/SelectItem/SelectItem.styles.js +1 -1
  28. package/cjs/components/Slider/Slider.css +6 -6
  29. package/cjs/components/Slider/components/Double/Double.css +6 -6
  30. package/cjs/components/TextField/TextField.styles.js +1 -1
  31. package/cjs/components/TextField/TextField.styles.js.map +1 -1
  32. package/cjs/components/TextField/{TextField.styles_9fkr1l.css → TextField.styles_aqmut.css} +2 -2
  33. package/cjs/index.css +6 -6
  34. package/cjs/index.js +3 -0
  35. package/cjs/index.js.map +1 -1
  36. package/es/components/Combobox/Combobox.js +1 -1
  37. package/es/components/Combobox/ui/ComboboxDivider/ComboboxDivider.js +1 -1
  38. package/es/components/Combobox/ui/ComboboxFooter/ComboboxFooter.js +1 -1
  39. package/es/components/Combobox/ui/ComboboxGroup/ComboboxGroup.js +1 -1
  40. package/es/components/Combobox/ui/ComboboxHeader/ComboboxHeader.js +1 -1
  41. package/es/components/Drawer/Drawer.js +1 -1
  42. package/es/components/Drawer/hooks/useDrawer.js +3 -1
  43. package/es/components/Drawer/hooks/useDrawer.js.map +1 -1
  44. package/es/components/Dropdown/Dropdown.js +1 -1
  45. package/es/components/Dropdown/ui/DropdownInner/DropdownInner.js +1 -1
  46. package/es/components/Modal/hooks/useModal.js +3 -1
  47. package/es/components/Modal/hooks/useModal.js.map +1 -1
  48. package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.styles.js +1 -1
  49. package/es/components/Popover/Popover.js +9 -3
  50. package/es/components/Popover/Popover.js.map +1 -1
  51. package/es/components/Popup/Popup.js +9 -3
  52. package/es/components/Popup/Popup.js.map +1 -1
  53. package/es/components/Portal/Portal.js +32 -0
  54. package/es/components/Portal/Portal.js.map +1 -0
  55. package/es/components/Range/Range.css +6 -6
  56. package/es/components/Select/Select.js +1 -1
  57. package/es/components/Select/ui/SelectDivider/SelectDivider.js +1 -1
  58. package/es/components/Select/ui/SelectFooter/SelectFooter.js +1 -1
  59. package/es/components/Select/ui/SelectGroup/SelectGroup.js +1 -1
  60. package/es/components/Select/ui/SelectHeader/SelectHeader.js +1 -1
  61. package/es/components/Select/ui/SelectItem/SelectItem.js +1 -1
  62. package/es/components/Select/ui/SelectItem/SelectItem.styles.js +1 -1
  63. package/es/components/Slider/Slider.css +6 -6
  64. package/es/components/Slider/components/Double/Double.css +6 -6
  65. package/es/components/TextField/TextField.styles.js +1 -1
  66. package/es/components/TextField/TextField.styles.js.map +1 -1
  67. package/es/components/TextField/{TextField.styles_9fkr1l.css → TextField.styles_aqmut.css} +2 -2
  68. package/es/index.css +6 -6
  69. package/es/index.js +1 -0
  70. package/es/index.js.map +1 -1
  71. package/package.json +2 -2
  72. package/styled-components/cjs/components/Popover/Popover.js +8 -4
  73. package/styled-components/cjs/components/Popup/Popup.js +8 -4
  74. package/styled-components/cjs/components/Portal/Portal.js +38 -0
  75. package/styled-components/cjs/components/Portal/Portal.template-doc.mdx +66 -0
  76. package/styled-components/cjs/components/Portal/Portal.types.js +5 -0
  77. package/styled-components/cjs/components/Portal/index.js +18 -0
  78. package/styled-components/cjs/components/TextField/TextField.styles.js +2 -2
  79. package/styled-components/cjs/examples/plasma_b2c/components/Portal/Portal.js +10 -0
  80. package/styled-components/cjs/examples/plasma_b2c/components/Portal/Portal.stories.tsx +57 -0
  81. package/styled-components/cjs/examples/plasma_web/components/Portal/Portal.js +10 -0
  82. package/styled-components/cjs/examples/plasma_web/components/Portal/Portal.stories.tsx +57 -0
  83. package/styled-components/cjs/index.js +11 -0
  84. package/styled-components/es/components/Popover/Popover.js +8 -3
  85. package/styled-components/es/components/Popup/Popup.js +8 -3
  86. package/styled-components/es/components/Portal/Portal.js +28 -0
  87. package/styled-components/es/components/Portal/Portal.template-doc.mdx +66 -0
  88. package/styled-components/es/components/Portal/Portal.types.js +1 -0
  89. package/styled-components/es/components/Portal/index.js +1 -0
  90. package/styled-components/es/components/TextField/TextField.styles.js +2 -2
  91. package/styled-components/es/examples/plasma_b2c/components/Portal/Portal.js +4 -0
  92. package/styled-components/es/examples/plasma_b2c/components/Portal/Portal.stories.tsx +57 -0
  93. package/styled-components/es/examples/plasma_web/components/Portal/Portal.js +4 -0
  94. package/styled-components/es/examples/plasma_web/components/Portal/Portal.stories.tsx +57 -0
  95. package/styled-components/es/index.js +2 -1
  96. package/types/components/Popover/Popover.d.ts.map +1 -1
  97. package/types/components/Popup/Popup.d.ts.map +1 -1
  98. package/types/components/Portal/Portal.d.ts +13 -0
  99. package/types/components/Portal/Portal.d.ts.map +1 -0
  100. package/types/components/Portal/Portal.types.d.ts +18 -0
  101. package/types/components/Portal/Portal.types.d.ts.map +1 -0
  102. package/types/components/Portal/index.d.ts +3 -0
  103. package/types/components/Portal/index.d.ts.map +1 -0
  104. package/types/components/TextField/TextField.styles.d.ts.map +1 -1
  105. package/types/examples/plasma_b2c/components/Portal/Portal.d.ts +3 -0
  106. package/types/examples/plasma_b2c/components/Portal/Portal.d.ts.map +1 -0
  107. package/types/examples/plasma_web/components/Portal/Portal.d.ts +3 -0
  108. package/types/examples/plasma_web/components/Portal/Portal.d.ts.map +1 -0
  109. package/types/index.d.ts +1 -0
  110. package/types/index.d.ts.map +1 -1
@@ -24,10 +24,10 @@ var Label = exports.Label = /*#__PURE__*/_styledComponents["default"].label.with
24
24
  })([""]);
25
25
  var StyledContentLeft = exports.StyledContentLeft = /*#__PURE__*/_styledComponents["default"].div.withConfig({
26
26
  componentId: "plasma-new-hope__sc-g4vxbb-5"
27
- })(["margin:var(", ");line-height:0;"], _TextField.tokens.leftContentMargin);
27
+ })(["margin:var(", ");"], _TextField.tokens.leftContentMargin);
28
28
  var StyledContentRight = exports.StyledContentRight = /*#__PURE__*/_styledComponents["default"].div.withConfig({
29
29
  componentId: "plasma-new-hope__sc-g4vxbb-6"
30
- })(["margin:var(", ");line-height:0;"], _TextField.tokens.rightContentMargin);
30
+ })(["margin:var(", ");"], _TextField.tokens.rightContentMargin);
31
31
  var LeftHelper = exports.LeftHelper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
32
32
  componentId: "plasma-new-hope__sc-g4vxbb-7"
33
33
  })([""]);
@@ -0,0 +1,10 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.Portal = void 0;
7
+ var _Portal = /*#__PURE__*/require("../../../../components/Portal");
8
+ var _engines = /*#__PURE__*/require("../../../../engines");
9
+ var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Portal.portalConfig);
10
+ var Portal = exports.Portal = /*#__PURE__*/(0, _engines.component)(mergedConfig);
@@ -0,0 +1,57 @@
1
+ import React, { useState, useRef } from 'react';
2
+ import type { StoryObj, Meta } from '@storybook/react';
3
+ import type { ComponentProps } from 'react';
4
+ import styled from 'styled-components';
5
+
6
+ import { Button } from '../Button/Button';
7
+ import { WithTheme } from '../../../_helpers';
8
+ import { Body } from '../../../typograpy/components/Body/Body';
9
+
10
+ import { Portal } from './Portal';
11
+
12
+ const meta: Meta<typeof Portal> = {
13
+ title: 'plasma_b2c/Portal',
14
+ decorators: [WithTheme],
15
+ args: {
16
+ disabled: false,
17
+ },
18
+ };
19
+
20
+ export default meta;
21
+
22
+ type StoryPortalProps = ComponentProps<typeof Portal>;
23
+
24
+ const StyledWrapper = styled.div`
25
+ padding: 20px;
26
+ margin-bottom: 10px;
27
+ margin-top: 10px;
28
+
29
+ border: 1px solid;
30
+ `;
31
+
32
+ const StoryDefault = ({ disabled }: StoryPortalProps) => {
33
+ const [show, setShow] = useState(false);
34
+ const containerRef = useRef<HTMLDivElement>(null);
35
+
36
+ return (
37
+ <>
38
+ <Button onClick={() => setShow(!show)}>{show ? 'Скрыть' : 'Показать'}</Button>
39
+ <StyledWrapper>
40
+ <Body style={{ marginBottom: '20px' }}>Содержимое портала появится в нижнем блоке.</Body>
41
+ <Body style={{ marginBottom: '20px' }}>
42
+ Если портал выключен (disabled), то содержимое появится в данном блоке.
43
+ </Body>
44
+ {show && containerRef.current && (
45
+ <Portal disabled={disabled} container={containerRef.current}>
46
+ <Body bold>Содержимое портала</Body>
47
+ </Portal>
48
+ )}
49
+ </StyledWrapper>
50
+ <StyledWrapper ref={containerRef} />
51
+ </>
52
+ );
53
+ };
54
+
55
+ export const Default: StoryObj<StoryPortalProps> = {
56
+ render: (args) => <StoryDefault {...args} />,
57
+ };
@@ -0,0 +1,10 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.Portal = void 0;
7
+ var _Portal = /*#__PURE__*/require("../../../../components/Portal");
8
+ var _engines = /*#__PURE__*/require("../../../../engines");
9
+ var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Portal.portalConfig);
10
+ var Portal = exports.Portal = /*#__PURE__*/(0, _engines.component)(mergedConfig);
@@ -0,0 +1,57 @@
1
+ import React, { useState, useRef } from 'react';
2
+ import type { StoryObj, Meta } from '@storybook/react';
3
+ import type { ComponentProps } from 'react';
4
+ import styled from 'styled-components';
5
+
6
+ import { Button } from '../Button/Button';
7
+ import { WithTheme } from '../../../_helpers';
8
+ import { Body } from '../../../typograpy/components/Body/Body';
9
+
10
+ import { Portal } from './Portal';
11
+
12
+ const meta: Meta<typeof Portal> = {
13
+ title: 'plasma_web/Portal',
14
+ decorators: [WithTheme],
15
+ args: {
16
+ disabled: false,
17
+ },
18
+ };
19
+
20
+ export default meta;
21
+
22
+ type StoryPortalProps = ComponentProps<typeof Portal>;
23
+
24
+ const StyledWrapper = styled.div`
25
+ padding: 20px;
26
+ margin-bottom: 10px;
27
+ margin-top: 10px;
28
+
29
+ border: 1px solid;
30
+ `;
31
+
32
+ const StoryDefault = ({ disabled }: StoryPortalProps) => {
33
+ const [show, setShow] = useState(false);
34
+ const containerRef = useRef<HTMLDivElement>(null);
35
+
36
+ return (
37
+ <>
38
+ <Button onClick={() => setShow(!show)}>{show ? 'Скрыть' : 'Показать'}</Button>
39
+ <StyledWrapper>
40
+ <Body style={{ marginBottom: '20px' }}>Содержимое портала появится в нижнем блоке.</Body>
41
+ <Body style={{ marginBottom: '20px' }}>
42
+ Если портал выключен (disabled), то содержимое появится в данном блоке.
43
+ </Body>
44
+ {show && containerRef.current && (
45
+ <Portal disabled={disabled} container={containerRef.current}>
46
+ <Body bold>Содержимое портала</Body>
47
+ </Portal>
48
+ )}
49
+ </StyledWrapper>
50
+ <StyledWrapper ref={containerRef} />
51
+ </>
52
+ );
53
+ };
54
+
55
+ export const Default: StoryObj<StoryPortalProps> = {
56
+ render: (args) => <StoryDefault {...args} />,
57
+ };
@@ -552,4 +552,15 @@ Object.keys(_Accordion).forEach(function (key) {
552
552
  return _Accordion[key];
553
553
  }
554
554
  });
555
+ });
556
+ var _Portal = /*#__PURE__*/require("./components/Portal");
557
+ Object.keys(_Portal).forEach(function (key) {
558
+ if (key === "default" || key === "__esModule") return;
559
+ if (key in exports && exports[key] === _Portal[key]) return;
560
+ Object.defineProperty(exports, key, {
561
+ enumerable: true,
562
+ get: function get() {
563
+ return _Portal[key];
564
+ }
565
+ });
555
566
  });
@@ -15,15 +15,18 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
15
15
  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; }
16
16
  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; }
17
17
  import React, { useRef, useCallback, useEffect, useState, forwardRef } from 'react';
18
- import ReactDOM from 'react-dom';
19
18
  import { usePopper } from 'react-popper';
20
19
  import { useFocusTrap, useForkRef } from '@salutejs/plasma-core';
20
+ import { component, mergeConfig } from '../../engines';
21
21
  import { cx } from '../../utils';
22
+ import { portalConfig } from '../Portal';
22
23
  import { base as viewCSS } from './variations/_view/base';
23
24
  import { StyledArrow, StyledPopover, StyledRoot, StyledWrapper } from './Popover.styles';
24
25
  import { classes } from './Popover.tokens';
25
26
  export var ESCAPE_KEYCODE = 27;
26
27
  export var POPOVER_PORTAL_ID = 'plasma-popover-root';
28
+ var mergedPortalConfig = /*#__PURE__*/mergeConfig(portalConfig);
29
+ var Portal = /*#__PURE__*/component(mergedPortalConfig);
27
30
 
28
31
  /**
29
32
  * Всплывающее окно с возможностью позиционирования
@@ -213,7 +216,9 @@ export var popoverRoot = function popoverRoot(Root) {
213
216
  onFocus: onFocus,
214
217
  onBlur: onBlur,
215
218
  className: cx(className, classes.target)
216
- }, target), children && portalRef.current && /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(Root, _extends({
219
+ }, target), children && portalRef.current && /*#__PURE__*/React.createElement(Portal, {
220
+ container: portalRef.current
221
+ }, /*#__PURE__*/React.createElement(Root, _extends({
217
222
  view: view,
218
223
  className: className
219
224
  }, rest), /*#__PURE__*/React.createElement(StyledPopover, _extends({}, attributes.popper, {
@@ -227,7 +232,7 @@ export var popoverRoot = function popoverRoot(Root) {
227
232
  className: classes.arrow,
228
233
  ref: setArrowElement,
229
234
  style: styles.arrow
230
- }, attributes.arrow)), children)), portalRef.current));
235
+ }, attributes.arrow)), children))));
231
236
  });
232
237
  };
233
238
  export var popoverConfig = {
@@ -9,9 +9,10 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
9
9
  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; } }
10
10
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
11
11
  import React, { forwardRef, useEffect, useRef, useState } from 'react';
12
- import ReactDOM from 'react-dom';
13
12
  import { useForkRef, safeUseId } from '@salutejs/plasma-core';
14
13
  import { cx } from '../../utils';
14
+ import { portalConfig } from '../Portal';
15
+ import { component, mergeConfig } from '../../engines';
15
16
  import { POPUP_PORTAL_ID } from './PopupContext';
16
17
  import { PopupRoot } from './PopupRoot';
17
18
  import { usePopup } from './hooks';
@@ -73,6 +74,8 @@ export var handlePosition = function handlePosition(placement, offset) {
73
74
  transform: transform
74
75
  };
75
76
  };
77
+ var mergedPortalConfig = /*#__PURE__*/mergeConfig(portalConfig);
78
+ var Portal = /*#__PURE__*/component(mergedPortalConfig);
76
79
 
77
80
  /**
78
81
  * Базовый копмонент Popup.
@@ -146,7 +149,9 @@ export var popupRoot = function popupRoot(Root) {
146
149
  return null;
147
150
  }
148
151
  var cls = cx(className, animationInfo !== null && animationInfo !== void 0 && animationInfo.endAnimation ? classes.endAnimation : '', animationInfo !== null && animationInfo !== void 0 && animationInfo.endTransition ? classes.endTransition : '');
149
- return /*#__PURE__*/React.createElement(React.Fragment, null, portalRef.current && /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(Root, _extends({
152
+ return /*#__PURE__*/React.createElement(React.Fragment, null, portalRef.current && /*#__PURE__*/React.createElement(Portal, {
153
+ container: portalRef.current
154
+ }, /*#__PURE__*/React.createElement(Root, _extends({
150
155
  className: cls
151
156
  }, rest), overlay, /*#__PURE__*/React.createElement(PopupRoot, {
152
157
  id: innerId,
@@ -156,7 +161,7 @@ export var popupRoot = function popupRoot(Root) {
156
161
  zIndex: zIndex,
157
162
  animationInfo: animationInfo,
158
163
  setVisible: setVisible
159
- }, children)), portalRef.current));
164
+ }, children))));
160
165
  });
161
166
  };
162
167
  export var popupConfig = {
@@ -0,0 +1,28 @@
1
+ import React, { forwardRef } from 'react';
2
+ import ReactDOM from 'react-dom';
3
+ /*
4
+ * Вспомогательный компонент. Используется в Popup, Popover.
5
+ * Представляет собой ReactDOM.createPortal() в форме компонента.
6
+ */
7
+ export var portalRoot = function portalRoot(Root) {
8
+ return /*#__PURE__*/forwardRef(function (_ref, outerRootRef) {
9
+ var children = _ref.children,
10
+ container = _ref.container,
11
+ _ref$disabled = _ref.disabled,
12
+ disabled = _ref$disabled === void 0 ? false : _ref$disabled;
13
+ var portalContainer = typeof container === 'function' ? container() : container;
14
+ return /*#__PURE__*/React.createElement(Root, {
15
+ container: container,
16
+ disabled: disabled,
17
+ ref: outerRootRef
18
+ }, disabled && children, !disabled && /*#__PURE__*/ReactDOM.createPortal(children, portalContainer));
19
+ });
20
+ };
21
+ export var portalConfig = {
22
+ name: 'Portal',
23
+ tag: 'div',
24
+ layout: portalRoot,
25
+ base: '',
26
+ variations: {},
27
+ defaults: {}
28
+ };
@@ -0,0 +1,66 @@
1
+ ---
2
+ id: portal
3
+ title: Portal
4
+ ---
5
+
6
+ import { PropsTable, Description } from '@site/src/components';
7
+
8
+ # Portal
9
+ <Description name="Portal" />
10
+ <PropsTable name="Portal" />
11
+
12
+ ## Использование
13
+
14
+ ```tsx live
15
+ import React, { useState, useRef } from 'react';
16
+ import { Portal, Button, BodyM } from '@salutejs/{{ package }}';
17
+
18
+ export function App() {
19
+ const [show, setShow] = useState(false);
20
+ const containerRef = useRef(null);
21
+
22
+ return (
23
+ <>
24
+ <Button onClick={() => setShow(!show)}>{show ? 'Скрыть' : 'Показать'}</Button>
25
+ <div style=\{{padding: '20px', marginBottom: '10px', marginTop: '10px', border: '1px solid'}}>
26
+ <BodyM style=\{{ marginBottom: '20px' }}>Содержимое портала появится в нижнем блоке.</BodyM>
27
+ {show && containerRef.current && (
28
+ <Portal container={containerRef.current}>
29
+ <BodyM bold>Содержимое портала</BodyM>
30
+ </Portal>
31
+ )}
32
+ </div>
33
+ <div style=\{{padding: '20px', marginBottom: '10px', marginTop: '10px', border: '1px solid'}} ref={containerRef} />
34
+ </>
35
+ );
36
+ }
37
+ ```
38
+
39
+ ### Disabled
40
+ Отключить портал можно с помощью свойства `disabled`.
41
+ В этом случае содержимое портала добавится внутрь родительского элемента.
42
+
43
+ ```tsx live
44
+ import React, { useState, useRef } from 'react';
45
+ import { Portal, Button, BodyM } from '@salutejs/{{ package }}';
46
+
47
+ export function App() {
48
+ const [show, setShow] = useState(false);
49
+ const containerRef = useRef(null);
50
+
51
+ return (
52
+ <>
53
+ <Button onClick={() => setShow(!show)}>{show ? 'Скрыть' : 'Показать'}</Button>
54
+ <div style=\{{padding: '20px', marginBottom: '10px', marginTop: '10px', border: '1px solid'}}>
55
+ <BodyM style=\{{ marginBottom: '20px' }}>Содержимое портала появится в данном блоке.</BodyM>
56
+ {show && containerRef.current && (
57
+ <Portal disabled container={containerRef.current}>
58
+ <BodyM bold>Содержимое портала</BodyM>
59
+ </Portal>
60
+ )}
61
+ </div>
62
+ <div style=\{{padding: '20px', marginBottom: '10px', marginTop: '10px', border: '1px solid'}} ref={containerRef} />
63
+ </>
64
+ );
65
+ }
66
+ ```
@@ -0,0 +1 @@
1
+ export { portalConfig, portalRoot } from './Portal';
@@ -17,10 +17,10 @@ export var Label = /*#__PURE__*/styled.label.withConfig({
17
17
  })([""]);
18
18
  export var StyledContentLeft = /*#__PURE__*/styled.div.withConfig({
19
19
  componentId: "plasma-new-hope__sc-g4vxbb-5"
20
- })(["margin:var(", ");line-height:0;"], tokens.leftContentMargin);
20
+ })(["margin:var(", ");"], tokens.leftContentMargin);
21
21
  export var StyledContentRight = /*#__PURE__*/styled.div.withConfig({
22
22
  componentId: "plasma-new-hope__sc-g4vxbb-6"
23
- })(["margin:var(", ");line-height:0;"], tokens.rightContentMargin);
23
+ })(["margin:var(", ");"], tokens.rightContentMargin);
24
24
  export var LeftHelper = /*#__PURE__*/styled.div.withConfig({
25
25
  componentId: "plasma-new-hope__sc-g4vxbb-7"
26
26
  })([""]);
@@ -0,0 +1,4 @@
1
+ import { portalConfig } from '../../../../components/Portal';
2
+ import { component, mergeConfig } from '../../../../engines';
3
+ var mergedConfig = /*#__PURE__*/mergeConfig(portalConfig);
4
+ export var Portal = /*#__PURE__*/component(mergedConfig);
@@ -0,0 +1,57 @@
1
+ import React, { useState, useRef } from 'react';
2
+ import type { StoryObj, Meta } from '@storybook/react';
3
+ import type { ComponentProps } from 'react';
4
+ import styled from 'styled-components';
5
+
6
+ import { Button } from '../Button/Button';
7
+ import { WithTheme } from '../../../_helpers';
8
+ import { Body } from '../../../typograpy/components/Body/Body';
9
+
10
+ import { Portal } from './Portal';
11
+
12
+ const meta: Meta<typeof Portal> = {
13
+ title: 'plasma_b2c/Portal',
14
+ decorators: [WithTheme],
15
+ args: {
16
+ disabled: false,
17
+ },
18
+ };
19
+
20
+ export default meta;
21
+
22
+ type StoryPortalProps = ComponentProps<typeof Portal>;
23
+
24
+ const StyledWrapper = styled.div`
25
+ padding: 20px;
26
+ margin-bottom: 10px;
27
+ margin-top: 10px;
28
+
29
+ border: 1px solid;
30
+ `;
31
+
32
+ const StoryDefault = ({ disabled }: StoryPortalProps) => {
33
+ const [show, setShow] = useState(false);
34
+ const containerRef = useRef<HTMLDivElement>(null);
35
+
36
+ return (
37
+ <>
38
+ <Button onClick={() => setShow(!show)}>{show ? 'Скрыть' : 'Показать'}</Button>
39
+ <StyledWrapper>
40
+ <Body style={{ marginBottom: '20px' }}>Содержимое портала появится в нижнем блоке.</Body>
41
+ <Body style={{ marginBottom: '20px' }}>
42
+ Если портал выключен (disabled), то содержимое появится в данном блоке.
43
+ </Body>
44
+ {show && containerRef.current && (
45
+ <Portal disabled={disabled} container={containerRef.current}>
46
+ <Body bold>Содержимое портала</Body>
47
+ </Portal>
48
+ )}
49
+ </StyledWrapper>
50
+ <StyledWrapper ref={containerRef} />
51
+ </>
52
+ );
53
+ };
54
+
55
+ export const Default: StoryObj<StoryPortalProps> = {
56
+ render: (args) => <StoryDefault {...args} />,
57
+ };
@@ -0,0 +1,4 @@
1
+ import { portalConfig } from '../../../../components/Portal';
2
+ import { component, mergeConfig } from '../../../../engines';
3
+ var mergedConfig = /*#__PURE__*/mergeConfig(portalConfig);
4
+ export var Portal = /*#__PURE__*/component(mergedConfig);
@@ -0,0 +1,57 @@
1
+ import React, { useState, useRef } from 'react';
2
+ import type { StoryObj, Meta } from '@storybook/react';
3
+ import type { ComponentProps } from 'react';
4
+ import styled from 'styled-components';
5
+
6
+ import { Button } from '../Button/Button';
7
+ import { WithTheme } from '../../../_helpers';
8
+ import { Body } from '../../../typograpy/components/Body/Body';
9
+
10
+ import { Portal } from './Portal';
11
+
12
+ const meta: Meta<typeof Portal> = {
13
+ title: 'plasma_web/Portal',
14
+ decorators: [WithTheme],
15
+ args: {
16
+ disabled: false,
17
+ },
18
+ };
19
+
20
+ export default meta;
21
+
22
+ type StoryPortalProps = ComponentProps<typeof Portal>;
23
+
24
+ const StyledWrapper = styled.div`
25
+ padding: 20px;
26
+ margin-bottom: 10px;
27
+ margin-top: 10px;
28
+
29
+ border: 1px solid;
30
+ `;
31
+
32
+ const StoryDefault = ({ disabled }: StoryPortalProps) => {
33
+ const [show, setShow] = useState(false);
34
+ const containerRef = useRef<HTMLDivElement>(null);
35
+
36
+ return (
37
+ <>
38
+ <Button onClick={() => setShow(!show)}>{show ? 'Скрыть' : 'Показать'}</Button>
39
+ <StyledWrapper>
40
+ <Body style={{ marginBottom: '20px' }}>Содержимое портала появится в нижнем блоке.</Body>
41
+ <Body style={{ marginBottom: '20px' }}>
42
+ Если портал выключен (disabled), то содержимое появится в данном блоке.
43
+ </Body>
44
+ {show && containerRef.current && (
45
+ <Portal disabled={disabled} container={containerRef.current}>
46
+ <Body bold>Содержимое портала</Body>
47
+ </Portal>
48
+ )}
49
+ </StyledWrapper>
50
+ <StyledWrapper ref={containerRef} />
51
+ </>
52
+ );
53
+ };
54
+
55
+ export const Default: StoryObj<StoryPortalProps> = {
56
+ render: (args) => <StoryDefault {...args} />,
57
+ };
@@ -49,4 +49,5 @@ export * from './components/Toolbar';
49
49
  export * from './components/Sheet';
50
50
  export * from './components/Slider';
51
51
  export * from './components/Range';
52
- export * from './components/Accordion';
52
+ export * from './components/Accordion';
53
+ export * from './components/Portal';
@@ -1 +1 @@
1
- {"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+D,MAAM,OAAO,CAAC;AAMpF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAIrD,OAAO,KAAK,EAAoB,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAItE,eAAO,MAAM,cAAc,KAAK,CAAC;AACjC,eAAO,MAAM,iBAAiB,wBAAwB,CAAC;AAEvD;;;GAGG;AACH,eAAO,MAAM,WAAW,SAAU,UAAU,cAAc,EAAE,YAAY,CAAC,+JAwPpE,CAAC;AAEN,eAAO,MAAM,aAAa;;;mBA1PQ,UAAU,cAAc,EAAE,YAAY,CAAC;;;;;;;;;;CAuQxE,CAAC"}
1
+ {"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+D,MAAM,OAAO,CAAC;AAMpF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAKrD,OAAO,KAAK,EAAoB,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAItE,eAAO,MAAM,cAAc,KAAK,CAAC;AACjC,eAAO,MAAM,iBAAiB,wBAAwB,CAAC;AAKvD;;;GAGG;AACH,eAAO,MAAM,WAAW,SAAU,UAAU,cAAc,EAAE,YAAY,CAAC,+JAuPpE,CAAC;AAEN,eAAO,MAAM,aAAa;;;mBAzPQ,UAAU,cAAc,EAAE,YAAY,CAAC;;;;;;;;;;CAsQxE,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"Popup.d.ts","sourceRoot":"","sources":["../../../src/components/Popup/Popup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAIvE,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAGhD,OAAO,KAAK,EAAuB,cAAc,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAMxG,eAAO,MAAM,cAAc,cACZ,cAAc,UACjB,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,KAC5C,iBA8DF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,SAAU,UAAU,cAAc,EAAE,UAAU,CAAC,sFAsGhE,CAAC;AAEN,eAAO,MAAM,WAAW;;;mBAxGQ,UAAU,cAAc,EAAE,UAAU,CAAC;;;;CA+GpE,CAAC"}
1
+ {"version":3,"file":"Popup.d.ts","sourceRoot":"","sources":["../../../src/components/Popup/Popup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAGvE,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAKhD,OAAO,KAAK,EAAuB,cAAc,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAMxG,eAAO,MAAM,cAAc,cACZ,cAAc,UACjB,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,KAC5C,iBA8DF,CAAC;AAKF;;GAEG;AACH,eAAO,MAAM,SAAS,SAAU,UAAU,cAAc,EAAE,UAAU,CAAC,sFAsGhE,CAAC;AAEN,eAAO,MAAM,WAAW;;;mBAxGQ,UAAU,cAAc,EAAE,UAAU,CAAC;;;;CA+GpE,CAAC"}
@@ -0,0 +1,13 @@
1
+ import React from 'react';
2
+ import type { RootProps } from '../../engines/types';
3
+ import { PortalProps } from './Portal.types';
4
+ export declare const portalRoot: (Root: RootProps<HTMLDivElement, PortalProps>) => React.ForwardRefExoticComponent<PortalProps & React.RefAttributes<HTMLDivElement>>;
5
+ export declare const portalConfig: {
6
+ name: string;
7
+ tag: string;
8
+ layout: (Root: RootProps<HTMLDivElement, PortalProps>) => React.ForwardRefExoticComponent<PortalProps & React.RefAttributes<HTMLDivElement>>;
9
+ base: string;
10
+ variations: {};
11
+ defaults: {};
12
+ };
13
+ //# sourceMappingURL=Portal.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Portal.d.ts","sourceRoot":"","sources":["../../../src/components/Portal/Portal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAErD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAM7C,eAAO,MAAM,UAAU,SAAU,UAAU,cAAc,EAAE,WAAW,CAAC,uFAUjE,CAAC;AAEP,eAAO,MAAM,YAAY;;;mBAZQ,UAAU,cAAc,EAAE,WAAW,CAAC;;;;CAmBtE,CAAC"}
@@ -0,0 +1,18 @@
1
+ import type { ReactNode } from 'react';
2
+ export declare type PortalProps = {
3
+ /**
4
+ * Элемент, в который добавится содержимое портала.
5
+ */
6
+ container: HTMLElement | (() => HTMLElement);
7
+ /**
8
+ * Содержимое портала.
9
+ */
10
+ children?: ReactNode;
11
+ /**
12
+ * Отключение портала.
13
+ * Если портал выключен, то его содержимое добавится внутрь родительского элемента.
14
+ * @default false
15
+ */
16
+ disabled?: boolean;
17
+ };
18
+ //# sourceMappingURL=Portal.types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Portal.types.d.ts","sourceRoot":"","sources":["../../../src/components/Portal/Portal.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,oBAAY,WAAW,GAAG;IACtB;;OAEG;IACH,SAAS,EAAE,WAAW,GAAG,CAAC,MAAM,WAAW,CAAC,CAAC;IAC7C;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC"}
@@ -0,0 +1,3 @@
1
+ export { portalConfig, portalRoot } from './Portal';
2
+ export type { PortalProps } from './Portal.types';
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Portal/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACpD,YAAY,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"TextField.styles.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.styles.ts"],"names":[],"mappings":";AAIA,eAAO,MAAM,YAAY,qKAKxB,CAAC;AAEF,eAAO,MAAM,iBAAiB,qKAoB7B,CAAC;AAEF,eAAO,MAAM,WAAW,qKAKvB,CAAC;AAEF,eAAO,MAAM,KAAK,8KASjB,CAAC;AAEF,eAAO,MAAM,KAAK,8KAAiB,CAAC;AAEpC,eAAO,MAAM,iBAAiB,qKAG7B,CAAC;AAEF,eAAO,MAAM,kBAAkB,qKAG9B,CAAC;AAEF,eAAO,MAAM,UAAU,qKAAe,CAAC;AAEvC,eAAO,MAAM,gBAAgB,qKAAe,CAAC;AAE7C,eAAO,MAAM,eAAe,qKAAe,CAAC"}
1
+ {"version":3,"file":"TextField.styles.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.styles.ts"],"names":[],"mappings":";AAIA,eAAO,MAAM,YAAY,qKAKxB,CAAC;AAEF,eAAO,MAAM,iBAAiB,qKAoB7B,CAAC;AAEF,eAAO,MAAM,WAAW,qKAKvB,CAAC;AAEF,eAAO,MAAM,KAAK,8KASjB,CAAC;AAEF,eAAO,MAAM,KAAK,8KAAiB,CAAC;AAEpC,eAAO,MAAM,iBAAiB,qKAE7B,CAAC;AAEF,eAAO,MAAM,kBAAkB,qKAE9B,CAAC;AAEF,eAAO,MAAM,UAAU,qKAAe,CAAC;AAEvC,eAAO,MAAM,gBAAgB,qKAAe,CAAC;AAE7C,eAAO,MAAM,eAAe,qKAAe,CAAC"}
@@ -0,0 +1,3 @@
1
+ /// <reference types="react" />
2
+ export declare const Portal: import("react").FunctionComponent<import("../../../../engines/types").PropsType<import("../../../../engines/types").Variants> & import("../../../../components/Portal").PortalProps & import("react").RefAttributes<HTMLDivElement>>;
3
+ //# sourceMappingURL=Portal.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Portal.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/Portal/Portal.ts"],"names":[],"mappings":";AAKA,eAAO,MAAM,MAAM,sOAA0B,CAAC"}
@@ -0,0 +1,3 @@
1
+ /// <reference types="react" />
2
+ export declare const Portal: import("react").FunctionComponent<import("../../../../engines/types").PropsType<import("../../../../engines/types").Variants> & import("../../../../components/Portal").PortalProps & import("react").RefAttributes<HTMLDivElement>>;
3
+ //# sourceMappingURL=Portal.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Portal.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_web/components/Portal/Portal.ts"],"names":[],"mappings":";AAKA,eAAO,MAAM,MAAM,sOAA0B,CAAC"}
package/types/index.d.ts CHANGED
@@ -48,4 +48,5 @@ export * from './components/Sheet';
48
48
  export * from './components/Slider';
49
49
  export * from './components/Range';
50
50
  export * from './components/Accordion';
51
+ export * from './components/Portal';
51
52
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC"}