@salutejs/plasma-new-hope 0.95.0-canary.1253.9741700312.0 → 0.95.0-dev.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (116) 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/DatePicker/RangeDate/RangeDate.css +6 -6
  7. package/cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.css +6 -6
  8. package/cjs/components/DatePicker/SingleDate/SingleDate.css +6 -6
  9. package/cjs/components/Drawer/Drawer.js +1 -1
  10. package/cjs/components/Drawer/hooks/useDrawer.js +3 -1
  11. package/cjs/components/Drawer/hooks/useDrawer.js.map +1 -1
  12. package/cjs/components/Dropdown/Dropdown.js +1 -1
  13. package/cjs/components/Dropdown/ui/DropdownInner/DropdownInner.js +1 -1
  14. package/cjs/components/Modal/hooks/useModal.js +3 -1
  15. package/cjs/components/Modal/hooks/useModal.js.map +1 -1
  16. package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.styles.js +1 -1
  17. package/cjs/components/Popover/Popover.js +9 -3
  18. package/cjs/components/Popover/Popover.js.map +1 -1
  19. package/cjs/components/Popup/Popup.js +9 -3
  20. package/cjs/components/Popup/Popup.js.map +1 -1
  21. package/cjs/components/Portal/Portal.js +36 -0
  22. package/cjs/components/Portal/Portal.js.map +1 -0
  23. package/cjs/components/Range/Range.css +6 -6
  24. package/cjs/components/Select/Select.js +1 -1
  25. package/cjs/components/Select/ui/SelectDivider/SelectDivider.js +1 -1
  26. package/cjs/components/Select/ui/SelectFooter/SelectFooter.js +1 -1
  27. package/cjs/components/Select/ui/SelectGroup/SelectGroup.js +1 -1
  28. package/cjs/components/Select/ui/SelectHeader/SelectHeader.js +1 -1
  29. package/cjs/components/Select/ui/SelectItem/SelectItem.js +1 -1
  30. package/cjs/components/Select/ui/SelectItem/SelectItem.styles.js +1 -1
  31. package/cjs/components/Slider/Slider.css +6 -6
  32. package/cjs/components/Slider/components/Double/Double.css +6 -6
  33. package/cjs/components/TextField/TextField.styles.js +1 -1
  34. package/cjs/components/TextField/TextField.styles.js.map +1 -1
  35. package/cjs/components/TextField/{TextField.styles_9fkr1l.css → TextField.styles_aqmut.css} +2 -2
  36. package/cjs/index.css +6 -6
  37. package/cjs/index.js +3 -0
  38. package/cjs/index.js.map +1 -1
  39. package/es/components/Combobox/Combobox.js +1 -1
  40. package/es/components/Combobox/ui/ComboboxDivider/ComboboxDivider.js +1 -1
  41. package/es/components/Combobox/ui/ComboboxFooter/ComboboxFooter.js +1 -1
  42. package/es/components/Combobox/ui/ComboboxGroup/ComboboxGroup.js +1 -1
  43. package/es/components/Combobox/ui/ComboboxHeader/ComboboxHeader.js +1 -1
  44. package/es/components/DatePicker/RangeDate/RangeDate.css +6 -6
  45. package/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.css +6 -6
  46. package/es/components/DatePicker/SingleDate/SingleDate.css +6 -6
  47. package/es/components/Drawer/Drawer.js +1 -1
  48. package/es/components/Drawer/hooks/useDrawer.js +3 -1
  49. package/es/components/Drawer/hooks/useDrawer.js.map +1 -1
  50. package/es/components/Dropdown/Dropdown.js +1 -1
  51. package/es/components/Dropdown/ui/DropdownInner/DropdownInner.js +1 -1
  52. package/es/components/Modal/hooks/useModal.js +3 -1
  53. package/es/components/Modal/hooks/useModal.js.map +1 -1
  54. package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.styles.js +1 -1
  55. package/es/components/Popover/Popover.js +9 -3
  56. package/es/components/Popover/Popover.js.map +1 -1
  57. package/es/components/Popup/Popup.js +9 -3
  58. package/es/components/Popup/Popup.js.map +1 -1
  59. package/es/components/Portal/Portal.js +31 -0
  60. package/es/components/Portal/Portal.js.map +1 -0
  61. package/es/components/Range/Range.css +6 -6
  62. package/es/components/Select/Select.js +1 -1
  63. package/es/components/Select/ui/SelectDivider/SelectDivider.js +1 -1
  64. package/es/components/Select/ui/SelectFooter/SelectFooter.js +1 -1
  65. package/es/components/Select/ui/SelectGroup/SelectGroup.js +1 -1
  66. package/es/components/Select/ui/SelectHeader/SelectHeader.js +1 -1
  67. package/es/components/Select/ui/SelectItem/SelectItem.js +1 -1
  68. package/es/components/Select/ui/SelectItem/SelectItem.styles.js +1 -1
  69. package/es/components/Slider/Slider.css +6 -6
  70. package/es/components/Slider/components/Double/Double.css +6 -6
  71. package/es/components/TextField/TextField.styles.js +1 -1
  72. package/es/components/TextField/TextField.styles.js.map +1 -1
  73. package/es/components/TextField/{TextField.styles_9fkr1l.css → TextField.styles_aqmut.css} +2 -2
  74. package/es/index.css +6 -6
  75. package/es/index.js +1 -0
  76. package/es/index.js.map +1 -1
  77. package/package.json +2 -2
  78. package/styled-components/cjs/components/Popover/Popover.js +8 -4
  79. package/styled-components/cjs/components/Popup/Popup.js +8 -4
  80. package/styled-components/cjs/components/Portal/Portal.js +37 -0
  81. package/styled-components/cjs/components/Portal/Portal.template-doc.mdx +66 -0
  82. package/styled-components/cjs/components/Portal/Portal.types.js +5 -0
  83. package/styled-components/cjs/components/Portal/index.js +18 -0
  84. package/styled-components/cjs/components/TextField/TextField.styles.js +2 -2
  85. package/styled-components/cjs/examples/plasma_b2c/components/Portal/Portal.js +10 -0
  86. package/styled-components/cjs/examples/plasma_b2c/components/Portal/Portal.stories.tsx +57 -0
  87. package/styled-components/cjs/examples/plasma_web/components/Portal/Portal.js +10 -0
  88. package/styled-components/cjs/examples/plasma_web/components/Portal/Portal.stories.tsx +57 -0
  89. package/styled-components/cjs/index.js +11 -0
  90. package/styled-components/es/components/Popover/Popover.js +8 -3
  91. package/styled-components/es/components/Popup/Popup.js +8 -3
  92. package/styled-components/es/components/Portal/Portal.js +27 -0
  93. package/styled-components/es/components/Portal/Portal.template-doc.mdx +66 -0
  94. package/styled-components/es/components/Portal/Portal.types.js +1 -0
  95. package/styled-components/es/components/Portal/index.js +1 -0
  96. package/styled-components/es/components/TextField/TextField.styles.js +2 -2
  97. package/styled-components/es/examples/plasma_b2c/components/Portal/Portal.js +4 -0
  98. package/styled-components/es/examples/plasma_b2c/components/Portal/Portal.stories.tsx +57 -0
  99. package/styled-components/es/examples/plasma_web/components/Portal/Portal.js +4 -0
  100. package/styled-components/es/examples/plasma_web/components/Portal/Portal.stories.tsx +57 -0
  101. package/styled-components/es/index.js +2 -1
  102. package/types/components/Popover/Popover.d.ts.map +1 -1
  103. package/types/components/Popup/Popup.d.ts.map +1 -1
  104. package/types/components/Portal/Portal.d.ts +13 -0
  105. package/types/components/Portal/Portal.d.ts.map +1 -0
  106. package/types/components/Portal/Portal.types.d.ts +18 -0
  107. package/types/components/Portal/Portal.types.d.ts.map +1 -0
  108. package/types/components/Portal/index.d.ts +3 -0
  109. package/types/components/Portal/index.d.ts.map +1 -0
  110. package/types/components/TextField/TextField.styles.d.ts.map +1 -1
  111. package/types/examples/plasma_b2c/components/Portal/Portal.d.ts +3 -0
  112. package/types/examples/plasma_b2c/components/Portal/Portal.d.ts.map +1 -0
  113. package/types/examples/plasma_web/components/Portal/Portal.d.ts +3 -0
  114. package/types/examples/plasma_web/components/Portal/Portal.d.ts.map +1 -0
  115. package/types/index.d.ts +1 -0
  116. package/types/index.d.ts.map +1 -1
@@ -6,15 +6,15 @@ Object.defineProperty(exports, "__esModule", {
6
6
  });
7
7
  exports.popupRoot = exports.popupConfig = exports.handlePosition = void 0;
8
8
  var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
9
- var _reactDom = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react-dom"));
10
9
  var _plasmaCore = /*#__PURE__*/require("@salutejs/plasma-core");
11
10
  var _utils = /*#__PURE__*/require("../../utils");
11
+ var _Portal = /*#__PURE__*/require("../Portal");
12
+ var _engines = /*#__PURE__*/require("../../engines");
12
13
  var _PopupContext = /*#__PURE__*/require("./PopupContext");
13
14
  var _PopupRoot = /*#__PURE__*/require("./PopupRoot");
14
15
  var _hooks = /*#__PURE__*/require("./hooks");
15
16
  var _Popup = /*#__PURE__*/require("./Popup.tokens");
16
17
  var _excluded = ["id", "isOpen", "placement", "offset", "frame", "children", "overlay", "role", "zIndex", "popupInfo", "withAnimation", "className"];
17
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
18
18
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
19
19
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
20
20
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -83,6 +83,8 @@ var handlePosition = exports.handlePosition = function handlePosition(placement,
83
83
  transform: transform
84
84
  };
85
85
  };
86
+ var mergedPortalConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Portal.portalConfig);
87
+ var Portal = /*#__PURE__*/(0, _engines.component)(mergedPortalConfig);
86
88
 
87
89
  /**
88
90
  * Базовый копмонент Popup.
@@ -156,7 +158,9 @@ var popupRoot = exports.popupRoot = function popupRoot(Root) {
156
158
  return null;
157
159
  }
158
160
  var cls = (0, _utils.cx)(className, animationInfo !== null && animationInfo !== void 0 && animationInfo.endAnimation ? _Popup.classes.endAnimation : '', animationInfo !== null && animationInfo !== void 0 && animationInfo.endTransition ? _Popup.classes.endTransition : '');
159
- return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, portalRef.current && /*#__PURE__*/_reactDom["default"].createPortal( /*#__PURE__*/_react["default"].createElement(Root, _extends({
161
+ return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, portalRef.current && /*#__PURE__*/_react["default"].createElement(Portal, {
162
+ container: portalRef.current
163
+ }, /*#__PURE__*/_react["default"].createElement(Root, _extends({
160
164
  className: cls
161
165
  }, rest), overlay, /*#__PURE__*/_react["default"].createElement(_PopupRoot.PopupRoot, {
162
166
  id: innerId,
@@ -166,7 +170,7 @@ var popupRoot = exports.popupRoot = function popupRoot(Root) {
166
170
  zIndex: zIndex,
167
171
  animationInfo: animationInfo,
168
172
  setVisible: setVisible
169
- }, children)), portalRef.current));
173
+ }, children))));
170
174
  });
171
175
  };
172
176
  var popupConfig = exports.popupConfig = {
@@ -0,0 +1,37 @@
1
+ "use strict";
2
+
3
+ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.portalRoot = exports.portalConfig = void 0;
8
+ var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
9
+ var _reactDom = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react-dom"));
10
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
11
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
12
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
13
+ /*
14
+ * Вспомогательный компонент. Используется в Popup, Popover.
15
+ * Представляет собой ReactDOM.createPortal() в форме компонента.
16
+ */
17
+ var portalRoot = exports.portalRoot = function portalRoot(Root) {
18
+ return /*#__PURE__*/(0, _react.forwardRef)(function (_ref, outerRootRef) {
19
+ var children = _ref.children,
20
+ container = _ref.container,
21
+ _ref$disabled = _ref.disabled,
22
+ disabled = _ref$disabled === void 0 ? false : _ref$disabled;
23
+ var portalContainer = typeof container === 'function' ? container() : container;
24
+ return /*#__PURE__*/_react["default"].createElement(Root, {
25
+ disabled: disabled,
26
+ ref: outerRootRef
27
+ }, disabled && children, !disabled && /*#__PURE__*/_reactDom["default"].createPortal(children, portalContainer));
28
+ });
29
+ };
30
+ var portalConfig = exports.portalConfig = {
31
+ name: 'Portal',
32
+ tag: 'div',
33
+ layout: portalRoot,
34
+ base: '',
35
+ variations: {},
36
+ defaults: {}
37
+ };
@@ -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: '1.25rem', marginBottom: '0.625rem', marginTop: '0.625rem', border: '1px solid'}}>
26
+ <BodyM style=\{{ marginBottom: '1.25rem' }}>Содержимое портала появится в нижнем блоке.</BodyM>
27
+ {show && containerRef.current && (
28
+ <Portal container={containerRef.current}>
29
+ <BodyM bold>Содержимое портала</BodyM>
30
+ </Portal>
31
+ )}
32
+ </div>
33
+ <div style=\{{padding: '1.25rem', marginBottom: '0.625rem', marginTop: '0.625rem', 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: '1.25rem', marginBottom: '0.625rem', marginTop: '0.625rem', border: '1px solid'}}>
55
+ <BodyM style=\{{ marginBottom: '1.25rem' }}>Содержимое портала появится в данном блоке.</BodyM>
56
+ {show && containerRef.current && (
57
+ <Portal disabled container={containerRef.current}>
58
+ <BodyM bold>Содержимое портала</BodyM>
59
+ </Portal>
60
+ )}
61
+ </div>
62
+ <div style=\{{padding: '1.25rem', marginBottom: '0.625rem', marginTop: '0.625rem', border: '1px solid'}} ref={containerRef} />
63
+ </>
64
+ );
65
+ }
66
+ ```
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
@@ -0,0 +1,18 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ Object.defineProperty(exports, "portalConfig", {
7
+ enumerable: true,
8
+ get: function get() {
9
+ return _Portal.portalConfig;
10
+ }
11
+ });
12
+ Object.defineProperty(exports, "portalRoot", {
13
+ enumerable: true,
14
+ get: function get() {
15
+ return _Portal.portalRoot;
16
+ }
17
+ });
18
+ var _Portal = /*#__PURE__*/require("./Portal");
@@ -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: 1.25rem;
26
+ margin-bottom: 0.625rem;
27
+ margin-top: 0.625rem;
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: '1.25rem' }}>Содержимое портала появится в нижнем блоке.</Body>
41
+ <Body style={{ marginBottom: '1.25rem' }}>
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: 1.25rem;
26
+ margin-bottom: 0.625rem;
27
+ margin-top: 0.625rem;
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: '1.25rem' }}>Содержимое портала появится в нижнем блоке.</Body>
41
+ <Body style={{ marginBottom: '1.25rem' }}>
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
+ };
@@ -563,4 +563,15 @@ Object.keys(_DatePicker).forEach(function (key) {
563
563
  return _DatePicker[key];
564
564
  }
565
565
  });
566
+ });
567
+ var _Portal = /*#__PURE__*/require("./components/Portal");
568
+ Object.keys(_Portal).forEach(function (key) {
569
+ if (key === "default" || key === "__esModule") return;
570
+ if (key in exports && exports[key] === _Portal[key]) return;
571
+ Object.defineProperty(exports, key, {
572
+ enumerable: true,
573
+ get: function get() {
574
+ return _Portal[key];
575
+ }
576
+ });
566
577
  });
@@ -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,27 @@
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
+ disabled: disabled,
16
+ ref: outerRootRef
17
+ }, disabled && children, !disabled && /*#__PURE__*/ReactDOM.createPortal(children, portalContainer));
18
+ });
19
+ };
20
+ export var portalConfig = {
21
+ name: 'Portal',
22
+ tag: 'div',
23
+ layout: portalRoot,
24
+ base: '',
25
+ variations: {},
26
+ defaults: {}
27
+ };
@@ -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: '1.25rem', marginBottom: '0.625rem', marginTop: '0.625rem', border: '1px solid'}}>
26
+ <BodyM style=\{{ marginBottom: '1.25rem' }}>Содержимое портала появится в нижнем блоке.</BodyM>
27
+ {show && containerRef.current && (
28
+ <Portal container={containerRef.current}>
29
+ <BodyM bold>Содержимое портала</BodyM>
30
+ </Portal>
31
+ )}
32
+ </div>
33
+ <div style=\{{padding: '1.25rem', marginBottom: '0.625rem', marginTop: '0.625rem', 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: '1.25rem', marginBottom: '0.625rem', marginTop: '0.625rem', border: '1px solid'}}>
55
+ <BodyM style=\{{ marginBottom: '1.25rem' }}>Содержимое портала появится в данном блоке.</BodyM>
56
+ {show && containerRef.current && (
57
+ <Portal disabled container={containerRef.current}>
58
+ <BodyM bold>Содержимое портала</BodyM>
59
+ </Portal>
60
+ )}
61
+ </div>
62
+ <div style=\{{padding: '1.25rem', marginBottom: '0.625rem', marginTop: '0.625rem', 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: 1.25rem;
26
+ margin-bottom: 0.625rem;
27
+ margin-top: 0.625rem;
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: '1.25rem' }}>Содержимое портала появится в нижнем блоке.</Body>
41
+ <Body style={{ marginBottom: '1.25rem' }}>
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);