@salutejs/plasma-new-hope 0.141.2-canary.1412.10789995138.0 → 0.142.0-canary.1421.10790809666.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (108) hide show
  1. package/cjs/components/Drawer/Drawer.css +3 -4
  2. package/cjs/components/Drawer/Drawer.js +1 -1
  3. package/cjs/components/Drawer/hooks/useDrawer.js +1 -1
  4. package/cjs/components/Modal/Modal.css +3 -4
  5. package/cjs/components/Modal/hooks/useModal.js +1 -1
  6. package/cjs/components/Notification/NotificationsProvider.css +3 -4
  7. package/cjs/components/Popup/Popup.css +3 -4
  8. package/cjs/components/Popup/Popup.js +38 -159
  9. package/cjs/components/Popup/Popup.js.map +1 -1
  10. package/cjs/components/Popup/Popup.styles.js +9 -21
  11. package/cjs/components/Popup/Popup.styles.js.map +1 -1
  12. package/cjs/components/Popup/Popup.styles_141jyqa.css +3 -0
  13. package/cjs/components/Popup/PopupContext.js +0 -3
  14. package/cjs/components/Popup/PopupContext.js.map +1 -1
  15. package/cjs/components/Popup/hooks/usePopup.js +1 -1
  16. package/cjs/components/Popup/hooks/usePopup.js.map +1 -1
  17. package/cjs/components/TextArea/TextArea.js +4 -2
  18. package/cjs/components/TextArea/TextArea.js.map +1 -1
  19. package/cjs/index.css +3 -4
  20. package/cjs/index.js +3 -0
  21. package/cjs/index.js.map +1 -1
  22. package/cjs/utils/index.js.map +1 -1
  23. package/cjs/utils/setRefList.js +28 -0
  24. package/cjs/utils/setRefList.js.map +1 -0
  25. package/emotion/cjs/components/Popup/Popup.js +38 -160
  26. package/emotion/cjs/components/Popup/Popup.styles.js +5 -25
  27. package/emotion/cjs/components/Popup/PopupContext.js +0 -3
  28. package/emotion/cjs/components/Popup/hooks/usePopup.js +1 -1
  29. package/emotion/cjs/components/TextArea/TextArea.js +4 -3
  30. package/emotion/cjs/examples/plasma_b2c/components/Form/Form.stories.tsx +68 -0
  31. package/emotion/cjs/examples/plasma_b2c/components/Modal/Modal.stories.tsx +1 -1
  32. package/emotion/cjs/examples/plasma_b2c/components/Popup/Popup.stories.tsx +1 -1
  33. package/emotion/cjs/examples/plasma_web/components/Modal/Modal.stories.tsx +1 -1
  34. package/emotion/cjs/examples/plasma_web/components/Popup/Popup.stories.tsx +1 -1
  35. package/emotion/cjs/utils/index.js +15 -0
  36. package/emotion/cjs/utils/setRefList.js +27 -0
  37. package/emotion/es/components/Popup/Popup.js +39 -160
  38. package/emotion/es/components/Popup/Popup.styles.js +4 -24
  39. package/emotion/es/components/Popup/PopupContext.js +0 -3
  40. package/emotion/es/components/Popup/hooks/usePopup.js +1 -1
  41. package/emotion/es/components/TextArea/TextArea.js +5 -4
  42. package/emotion/es/examples/plasma_b2c/components/Form/Form.stories.tsx +68 -0
  43. package/emotion/es/examples/plasma_b2c/components/Modal/Modal.stories.tsx +1 -1
  44. package/emotion/es/examples/plasma_b2c/components/Popup/Popup.stories.tsx +1 -1
  45. package/emotion/es/examples/plasma_web/components/Modal/Modal.stories.tsx +1 -1
  46. package/emotion/es/examples/plasma_web/components/Popup/Popup.stories.tsx +1 -1
  47. package/emotion/es/utils/index.js +1 -0
  48. package/emotion/es/utils/setRefList.js +20 -0
  49. package/es/components/Drawer/Drawer.css +3 -4
  50. package/es/components/Drawer/Drawer.js +1 -1
  51. package/es/components/Drawer/hooks/useDrawer.js +1 -1
  52. package/es/components/Modal/Modal.css +3 -4
  53. package/es/components/Modal/hooks/useModal.js +1 -1
  54. package/es/components/Notification/NotificationsProvider.css +3 -4
  55. package/es/components/Popup/Popup.css +3 -4
  56. package/es/components/Popup/Popup.js +40 -161
  57. package/es/components/Popup/Popup.js.map +1 -1
  58. package/es/components/Popup/Popup.styles.js +10 -20
  59. package/es/components/Popup/Popup.styles.js.map +1 -1
  60. package/es/components/Popup/Popup.styles_141jyqa.css +3 -0
  61. package/es/components/Popup/PopupContext.js +0 -3
  62. package/es/components/Popup/PopupContext.js.map +1 -1
  63. package/es/components/Popup/hooks/usePopup.js +1 -1
  64. package/es/components/Popup/hooks/usePopup.js.map +1 -1
  65. package/es/components/TextArea/TextArea.js +4 -2
  66. package/es/components/TextArea/TextArea.js.map +1 -1
  67. package/es/index.css +3 -4
  68. package/es/index.js +1 -0
  69. package/es/index.js.map +1 -1
  70. package/es/utils/index.js.map +1 -1
  71. package/es/utils/setRefList.js +23 -0
  72. package/es/utils/setRefList.js.map +1 -0
  73. package/package.json +4 -3
  74. package/styled-components/cjs/components/Popup/Popup.js +38 -160
  75. package/styled-components/cjs/components/Popup/Popup.styles.js +4 -7
  76. package/styled-components/cjs/components/Popup/PopupContext.js +0 -3
  77. package/styled-components/cjs/components/Popup/hooks/usePopup.js +1 -1
  78. package/styled-components/cjs/components/TextArea/TextArea.js +3 -2
  79. package/styled-components/cjs/examples/plasma_b2c/components/Form/Form.stories.tsx +68 -0
  80. package/styled-components/cjs/examples/plasma_b2c/components/Modal/Modal.stories.tsx +1 -1
  81. package/styled-components/cjs/examples/plasma_b2c/components/Popup/Popup.stories.tsx +1 -1
  82. package/styled-components/cjs/examples/plasma_web/components/Modal/Modal.stories.tsx +1 -1
  83. package/styled-components/cjs/examples/plasma_web/components/Popup/Popup.stories.tsx +1 -1
  84. package/styled-components/cjs/utils/index.js +15 -0
  85. package/styled-components/cjs/utils/setRefList.js +27 -0
  86. package/styled-components/es/components/Popup/Popup.js +39 -160
  87. package/styled-components/es/components/Popup/Popup.styles.js +3 -6
  88. package/styled-components/es/components/Popup/PopupContext.js +0 -3
  89. package/styled-components/es/components/Popup/hooks/usePopup.js +1 -1
  90. package/styled-components/es/components/TextArea/TextArea.js +4 -3
  91. package/styled-components/es/examples/plasma_b2c/components/Form/Form.stories.tsx +68 -0
  92. package/styled-components/es/examples/plasma_b2c/components/Modal/Modal.stories.tsx +1 -1
  93. package/styled-components/es/examples/plasma_b2c/components/Popup/Popup.stories.tsx +1 -1
  94. package/styled-components/es/examples/plasma_web/components/Modal/Modal.stories.tsx +1 -1
  95. package/styled-components/es/examples/plasma_web/components/Popup/Popup.stories.tsx +1 -1
  96. package/styled-components/es/utils/index.js +1 -0
  97. package/styled-components/es/utils/setRefList.js +20 -0
  98. package/types/components/Popup/Popup.d.ts +1 -1
  99. package/types/components/Popup/Popup.d.ts.map +1 -1
  100. package/types/components/Popup/Popup.styles.d.ts +0 -1
  101. package/types/components/Popup/Popup.styles.d.ts.map +1 -1
  102. package/types/components/Popup/PopupContext.d.ts.map +1 -1
  103. package/types/utils/index.d.ts +1 -0
  104. package/types/utils/index.d.ts.map +1 -1
  105. package/types/utils/setRefList.d.ts +6 -0
  106. package/types/utils/setRefList.d.ts.map +1 -0
  107. package/cjs/components/Popup/Popup.styles_8h77g1.css +0 -4
  108. package/es/components/Popup/Popup.styles_8h77g1.css +0 -4
@@ -8,8 +8,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
8
8
  function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
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
- import React, { forwardRef, useRef } from 'react';
12
- import ReactDOM from 'react-dom';
11
+ import React, { forwardRef, useEffect, useRef, useState } from 'react';
13
12
  import { useForkRef, safeUseId } from '@salutejs/plasma-core';
14
13
  import { cx } from '../../utils';
15
14
  import { Portal } from '../Portal';
@@ -17,7 +16,6 @@ import { POPUP_PORTAL_ID } from './PopupContext';
17
16
  import { PopupRoot } from './PopupRoot';
18
17
  import { usePopup } from './hooks';
19
18
  import { classes } from './Popup.tokens';
20
- import { StyledPortal, StyledPortalContainer } from './Popup.styles';
21
19
  export var handlePosition = function handlePosition(placement, offset) {
22
20
  var x = '0rem';
23
21
  var y = '0rem';
@@ -41,8 +39,8 @@ export var handlePosition = function handlePosition(placement, offset) {
41
39
  var bottom;
42
40
  var transform;
43
41
  var placements = placement.split('-');
44
- placements.forEach(function (placementValue) {
45
- switch (placementValue) {
42
+ placements.forEach(function (placement) {
43
+ switch (placement) {
46
44
  case 'left':
47
45
  left = x;
48
46
  break;
@@ -75,139 +73,9 @@ export var handlePosition = function handlePosition(placement, offset) {
75
73
  transform: transform
76
74
  };
77
75
  };
78
- /*
79
- const getPortalParent = (frame: 'document' | string | React.RefObject<HTMLElement>, portalRef) => {
80
- if (typeof frame !== 'string' && frame && frame.current) {
81
- portalRef.current = frame.current;
82
- return;
83
- }
84
-
85
- if (typeof frame === 'string' && frame !== 'document') {
86
- const element = document.getElementById(frame);
87
- if (element) {
88
- const portal = document.createElement('div');
89
- portal.className = 'frame-portal';
90
- portal.style.position = 'relative';
91
- portal.style.width = '0';
92
-
93
- element.appendChild(portal);
94
- portalRef.current = portal;
95
-
96
- return;
97
- //
98
- // const portal = document?.querySelector('.frame-portal');
99
- // if (!portal) {
100
- // portal = document.createElement('div');
101
- // document.getElementById(frame)?.appendChild(portal);
102
- // }
103
- // return portal;
104
- }
105
- }
106
-
107
- const portal = document.getElementById(POPUP_PORTAL_ID);
108
-
109
- if (!portal) {
110
- ReactDOM.createPortal(<StyledPortal id={POPUP_PORTAL_ID} ref={portalRef} />, document.body);
111
- }
112
-
113
- portalRef.current = portal;
114
-
115
- let portal;
116
-
117
- const hasFrame = typeof frame !== 'string' && frame && frame.current;
118
- if (hasFrame) {
119
- portal = frame.current;
120
- } else {
121
- // ReactDOM.createPortal(<StyledPortal id={POPUP_PORTAL_ID} ref={portalRef} />, document.body);
122
-
123
- portal = document.getElementById(POPUP_PORTAL_ID);
124
-
125
- if (!portal) {
126
- if (typeof frame === 'string' && frame !== 'document') {
127
- portal = document.createElement('div');
128
- document.getElementById(frame)?.appendChild(portal);
129
- } else {
130
- portal.className('frame-portal');
131
- document.body.appendChild(portal);
132
- // ReactDOM.createPortal(<StyledPortal id={POPUP_PORTAL_ID} ref={portalRef} />, document.body);
133
- }
134
- }
135
- }
136
-
137
- };
138
-
139
- const usePortalContainer = (frame: 'document' | string | React.RefObject<HTMLElement>) => {
140
- const portalRef = useRef<HTMLDivElement | null>(null);
141
-
142
- if (typeof frame !== 'string' && frame && frame.current) {
143
- return frame.current;
144
- }
145
-
146
- if (typeof frame === 'string' && frame !== 'document') {
147
- const element = document.getElementById(frame);
148
-
149
- const portal = document?.querySelector('.frame-portal');
150
-
151
- if (portal) {
152
- return portal;
153
- }
154
-
155
- if (element) {
156
- const portal = document.createElement('div');
157
- portal.className = 'frame-portal';
158
- portal.style.position = 'relative';
159
- // portal.style.width = '0';
160
-
161
- element.appendChild(portal);
162
- return portal;
163
- //
164
- // const portal = document?.querySelector('.frame-portal');
165
- // if (!portal) {
166
- // portal = document.createElement('div');
167
- // document.getElementById(frame)?.appendChild(portal);
168
- // }
169
- // return portal;
170
- }
171
- }
172
-
173
- const portal = document.getElementById(POPUP_PORTAL_ID);
174
-
175
- if (!portal) {
176
- const res = ReactDOM.createPortal(<StyledPortal id={POPUP_PORTAL_ID} ref={portalRef} />, document.body);
177
-
178
- console.log('!!! res', res);
179
- }
180
-
181
- console.log('!!!! portalRef.current', portalRef.current, document.getElementById(POPUP_PORTAL_ID));
182
- return portalRef.current;
183
-
184
- let portal;
185
-
186
- const hasFrame = typeof frame !== 'string' && frame && frame.current;
187
- if (hasFrame) {
188
- portal = frame.current;
189
- } else {
190
- // ReactDOM.createPortal(<StyledPortal id={POPUP_PORTAL_ID} ref={portalRef} />, document.body);
191
-
192
- portal = document.getElementById(POPUP_PORTAL_ID);
193
-
194
- if (!portal) {
195
- if (typeof frame === 'string' && frame !== 'document') {
196
- portal = document.createElement('div');
197
- document.getElementById(frame)?.appendChild(portal);
198
- } else {
199
- portal.className('frame-portal');
200
- document.body.appendChild(portal);
201
- // ReactDOM.createPortal(<StyledPortal id={POPUP_PORTAL_ID} ref={portalRef} />, document.body);
202
- }
203
- }
204
- }
205
-
206
- };
207
- */
208
76
 
209
77
  /**
210
- * Базовый компонент Popup.
78
+ * Базовый копмонент Popup.
211
79
  */
212
80
  export var popupRoot = function popupRoot(Root) {
213
81
  return /*#__PURE__*/forwardRef(function (_ref, outerRootRef) {
@@ -243,16 +111,47 @@ export var popupRoot = function popupRoot(Root) {
243
111
  isVisible = _usePopup.isVisible,
244
112
  animationInfo = _usePopup.animationInfo,
245
113
  setVisible = _usePopup.setVisible;
246
-
247
- // const container = usePortalContainer(frame);
248
114
  var portalRef = useRef(null);
249
115
  var contentRef = useRef(null);
250
116
  var innerRef = useForkRef(contentRef, outerRootRef);
117
+ var _useState = useState(false),
118
+ _useState2 = _slicedToArray(_useState, 2),
119
+ forceRender = _useState2[1];
120
+ useEffect(function () {
121
+ var portal = document.getElementById(POPUP_PORTAL_ID);
122
+ if (typeof frame !== 'string' && frame && frame.current) {
123
+ portal = frame.current;
124
+ }
125
+ if (!portal) {
126
+ portal = document.createElement('div');
127
+ portal.setAttribute('id', POPUP_PORTAL_ID);
128
+ /**
129
+ * Нужно для того, чтобы во фрейме не происходило скачков контента
130
+ * при анимации через transform, если есть элемент с шириной/высотой в 100% (Overlay)
131
+ */
132
+ portal.style.width = '0';
133
+ if (typeof frame === 'string' && frame !== 'document') {
134
+ var _document$getElementB;
135
+ (_document$getElementB = document.getElementById(frame)) === null || _document$getElementB === void 0 || _document$getElementB.appendChild(portal);
136
+ } else {
137
+ document.body.appendChild(portal);
138
+ }
139
+ }
140
+ portalRef.current = portal;
141
+
142
+ /**
143
+ * Изменение стейта нужно для того, чтобы Popup
144
+ * отобразился после записи DOM элемента в portalRef.current
145
+ */
146
+ forceRender(true);
147
+ }, []);
251
148
  if (!isVisible && !innerIsOpen) {
252
149
  return null;
253
150
  }
254
151
  var cls = cx(className, animationInfo !== null && animationInfo !== void 0 && animationInfo.endAnimation ? classes.endAnimation : '', animationInfo !== null && animationInfo !== void 0 && animationInfo.endTransition ? classes.endTransition : '');
255
- var rootNode = /*#__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({
256
155
  className: cls
257
156
  }, rest), overlay, /*#__PURE__*/React.createElement(PopupRoot, {
258
157
  id: innerId,
@@ -262,27 +161,7 @@ export var popupRoot = function popupRoot(Root) {
262
161
  zIndex: zIndex,
263
162
  animationInfo: animationInfo,
264
163
  setVisible: setVisible
265
- }, children));
266
- if (typeof frame !== 'string' && frame && frame.current) {
267
- return /*#__PURE__*/React.createElement(Portal, {
268
- container: frame.current
269
- }, rootNode);
270
- }
271
- var withFrameId = typeof frame === 'string' && frame !== 'document';
272
- var containerElement = withFrameId && document.getElementById(frame);
273
- if (containerElement) {
274
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(StyledPortalContainer, {
275
- ref: portalRef
276
- }, portalRef.current && /*#__PURE__*/React.createElement(Portal, {
277
- container: portalRef.current
278
- }, rootNode)), containerElement));
279
- }
280
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(StyledPortal, {
281
- id: POPUP_PORTAL_ID,
282
- ref: portalRef
283
- }, portalRef.current && /*#__PURE__*/React.createElement(Portal, {
284
- container: portalRef.current
285
- }, rootNode)), document.body));
164
+ }, children))));
286
165
  });
287
166
  };
288
167
  export var popupConfig = {
@@ -2,15 +2,12 @@ import styled from 'styled-components';
2
2
  import { DEFAULT_Z_INDEX } from './utils';
3
3
  export var StyledPortal = /*#__PURE__*/styled.div.withConfig({
4
4
  componentId: "plasma-new-hope__sc-rkhnjn-0"
5
- })(["position:fixed;top:0;left:0;right:0;bottom:0;:empty{width:0;pointer-events:none;}:not(:empty){width:auto;pointer-events:auto;}"]);
6
- export var StyledPortalContainer = /*#__PURE__*/styled.div.withConfig({
7
- componentId: "plasma-new-hope__sc-rkhnjn-1"
8
- })(["width:0;"]);
5
+ })([""]);
9
6
  export var PopupView = /*#__PURE__*/styled.div.withConfig({
10
- componentId: "plasma-new-hope__sc-rkhnjn-2"
7
+ componentId: "plasma-new-hope__sc-rkhnjn-1"
11
8
  })(["position:relative;max-width:100%;pointer-events:all;"]);
12
9
  export var PopupRootContainer = /*#__PURE__*/styled.div.withConfig({
13
- componentId: "plasma-new-hope__sc-rkhnjn-3"
10
+ componentId: "plasma-new-hope__sc-rkhnjn-2"
14
11
  })(["position:absolute;z-index:", ";left:", ";right:", ";top:", ";bottom:", ";transform:", ";"], function (_ref) {
15
12
  var zIndex = _ref.zIndex;
16
13
  return zIndex || DEFAULT_Z_INDEX;
@@ -14,11 +14,9 @@ export var POPUP_PORTAL_ID = 'plasma-popup-root';
14
14
  var items = [];
15
15
  var PopupContext = /*#__PURE__*/createContext({
16
16
  items: items,
17
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
18
17
  register: function register(_info) {
19
18
  throw new Error('Function not implemented. Add PopupProvider');
20
19
  },
21
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
22
20
  unregister: function unregister(_id) {
23
21
  throw new Error('Function not implemented. Add PopupProvider');
24
22
  }
@@ -29,7 +27,6 @@ export var usePopupContext = function usePopupContext() {
29
27
  export var PopupProvider = function PopupProvider(_ref) {
30
28
  var children = _ref.children;
31
29
  var prevBodyOverflowY = useRef(typeof document !== 'undefined' ? document.body.style.overflowY : '');
32
- // eslint-disable-next-line no-shadow
33
30
  var _useState = useState([]),
34
31
  _useState2 = _slicedToArray(_useState, 2),
35
32
  items = _useState2[0],
@@ -13,7 +13,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
13
13
  import { useEffect, useState } from 'react';
14
14
  import { usePopupContext } from '../PopupContext';
15
15
 
16
- // Хук для подключения анимации
16
+ // Хук для поключения анимации
17
17
  var usePopupAnimation = function usePopupAnimation() {
18
18
  var _useState = useState(false),
19
19
  _useState2 = _slicedToArray(_useState, 2),
@@ -21,7 +21,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
21
21
  import React, { forwardRef, useState, createRef, useCallback } from 'react';
22
22
  import { css } from 'styled-components';
23
23
  import { useResizeObserver } from '@salutejs/plasma-core';
24
- import { cx } from '../../utils';
24
+ import { cx, mergeRefs } from '../../utils';
25
25
  import { applyDynamicLabel } from './mixins';
26
26
  import { useAutoResize, ROOT_FONT_SIZE } from './hooks';
27
27
  import { StyledContent, StyledHelpers, StyledLeftHelper, StyledRightHelper, StyledLabel, StyledPlaceholder, StyledTextArea, StyledTextAreaWrapper, StyledContainer, StyledIndicator, StyledOptionalText } from './TextArea.styles';
@@ -118,7 +118,7 @@ export var textAreaRoot = function textAreaRoot(Root) {
118
118
  _useState6 = _slicedToArray(_useState5, 2),
119
119
  uncontrolledValue = _useState6[0],
120
120
  setUncontrolledValue = _useState6[1];
121
- var outerRef = innerRef && 'current' in innerRef ? innerRef : /*#__PURE__*/createRef();
121
+ var outerRef = /*#__PURE__*/createRef();
122
122
  var innerOptional = required ? false : optional;
123
123
  var hasHelper = Boolean(leftHelper || rightHelper || helperText);
124
124
  var hasOuterLabel = Boolean(label && labelPlacement === 'outer');
@@ -149,6 +149,7 @@ export var textAreaRoot = function textAreaRoot(Root) {
149
149
  if (value === undefined) {
150
150
  setUncontrolledValue(event === null || event === void 0 ? void 0 : event.target.value);
151
151
  }
152
+ console.log(event);
152
153
  onChange === null || onChange === void 0 || onChange(event);
153
154
  }, [value, onChange]);
154
155
  var dynamicLabelClasses = getDynamicLabelClasses(_objectSpread({
@@ -190,7 +191,7 @@ export var textAreaRoot = function textAreaRoot(Root) {
190
191
  hasContentRight: Boolean(contentRight),
191
192
  hasHelper: hasHelper,
192
193
  applyCustomWidth: applyCustomWidth,
193
- ref: outerRef,
194
+ ref: mergeRefs(outerRef, innerRef),
194
195
  disabled: disabled,
195
196
  height: autoResize ? minAuto : height,
196
197
  width: width,
@@ -0,0 +1,68 @@
1
+ import { useForm } from 'react-hook-form';
2
+ import React from 'react';
3
+ import type { Meta, StoryObj } from '@storybook/react';
4
+
5
+ import { WithTheme } from '../../../_helpers';
6
+ import { Button } from '../Button/Button';
7
+ import { TextField } from '../TextField/TextField';
8
+ import { TextArea } from '../TextArea/TextArea'; // TextArea.tsx 120 строка, не работает из-за некорректного ref
9
+ import { Checkbox } from '../Checkbox/Checkbox';
10
+ import { Switch } from '../Switch/Switch';
11
+ import { Radiobox } from '../Radiobox/Radiobox';
12
+ import { RadioGroup } from '../../../../components/Radiobox';
13
+
14
+ type StoryDropdownProps = {};
15
+
16
+ const langName = 'language';
17
+ const itemsRadiobox = [
18
+ { langName, value: 'c', label: 'C', disabled: false },
19
+ { langName, value: 'cpp', label: 'C++', disabled: false },
20
+ { langName, value: 'assembly', label: 'Assembly', disabled: false },
21
+ ];
22
+
23
+ const DefaultForm = () => {
24
+ const { register, handleSubmit } = useForm();
25
+ const onSubmit = (data) => {
26
+ console.log(data);
27
+ };
28
+
29
+ return (
30
+ <form onSubmit={handleSubmit(onSubmit)} style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
31
+ <TextField {...register('textfield')} placeholder="Textfield" required={false} />
32
+ <TextArea {...register('textarea')} autoResize placeholder="Textarea" />
33
+ <Checkbox {...register('checkbox')} label="Checkbox" />
34
+ <Switch {...register('switch')} label="Switch" labelPosition="after" />
35
+ <RadioGroup aria-labelledby="radiogroup-title-id">
36
+ <div id="radiogroup-title-id" style={{ margin: '1rem 0', fontWeight: '600' }}>
37
+ Выберите язык программирования для изучения.
38
+ </div>
39
+ {itemsRadiobox.map((item) => (
40
+ <Radiobox
41
+ key={item.value}
42
+ value={item.value}
43
+ label={item.label}
44
+ disabled={item.disabled}
45
+ {...register('radiobox')}
46
+ />
47
+ ))}
48
+ </RadioGroup>
49
+ <Button type="submit">Отправить</Button>
50
+ </form>
51
+ );
52
+ };
53
+
54
+ const meta: Meta<StoryDropdownProps> = {
55
+ title: 'plasma_b2c/Form',
56
+ decorators: [WithTheme],
57
+ component: DefaultForm,
58
+ };
59
+
60
+ export default meta;
61
+
62
+ const StoryNormal = () => {
63
+ return <DefaultForm />;
64
+ };
65
+
66
+ export const Default: StoryObj<StoryDropdownProps> = {
67
+ render: () => <StoryNormal />,
68
+ };
@@ -80,7 +80,7 @@ const StyledButton = styled(Button)`
80
80
  `;
81
81
 
82
82
  const StyledWrapper = styled.div`
83
- height: 300px;
83
+ height: 1200px;
84
84
  `;
85
85
 
86
86
  const Content = styled.div`
@@ -55,7 +55,7 @@ const StyledButton = styled(Button)`
55
55
  `;
56
56
 
57
57
  const StyledWrapper = styled.div`
58
- height: 600px;
58
+ height: 1200px;
59
59
  `;
60
60
 
61
61
  const OtherContent = styled.div`
@@ -80,7 +80,7 @@ const StyledButton = styled(Button)`
80
80
  `;
81
81
 
82
82
  const StyledWrapper = styled.div`
83
- height: 300px;
83
+ height: 1200px;
84
84
  `;
85
85
 
86
86
  const Content = styled.div`
@@ -55,7 +55,7 @@ const StyledButton = styled(Button)`
55
55
  `;
56
56
 
57
57
  const StyledWrapper = styled.div`
58
- height: 600px;
58
+ height: 1200px;
59
59
  `;
60
60
 
61
61
  const OtherContent = styled.div`
@@ -3,6 +3,7 @@ export { extractTextFrom } from './extractTextFrom';
3
3
  export { getSizeValueFromProp } from './getSizeValueFromProp';
4
4
  export { IS_REACT_18, safeUseId } from './react';
5
5
  export { isNumber } from './isNumber';
6
+ export { mergeRefs, setRefList } from './setRefList';
6
7
  export { isEmpty } from './isEmpty';
7
8
  export * from './getPopoverPlacement';
8
9
  export var cx = function cx() {
@@ -0,0 +1,20 @@
1
+ export function mergeRefs() {
2
+ for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
3
+ refs[_key] = arguments[_key];
4
+ }
5
+ return function (val) {
6
+ setRefList.apply(void 0, [val].concat(refs));
7
+ };
8
+ }
9
+ export function setRefList(val) {
10
+ for (var _len2 = arguments.length, refs = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
11
+ refs[_key2 - 1] = arguments[_key2];
12
+ }
13
+ refs.forEach(function (ref) {
14
+ if (typeof ref === 'function') {
15
+ ref(val);
16
+ } else if (ref != null) {
17
+ ref.current = val;
18
+ }
19
+ });
20
+ }
@@ -3,7 +3,7 @@ import { RootProps } from '../../engines/types';
3
3
  import type { PopupPlacement, PopupPositionType, PopupProps } from './Popup.types';
4
4
  export declare const handlePosition: (placement: PopupPlacement, offset: [number, number] | [string, string]) => PopupPositionType;
5
5
  /**
6
- * Базовый компонент Popup.
6
+ * Базовый копмонент Popup.
7
7
  */
8
8
  export declare const popupRoot: (Root: RootProps<HTMLDivElement, PopupProps>) => React.ForwardRefExoticComponent<PopupProps & React.RefAttributes<HTMLDivElement>>;
9
9
  export declare const popupConfig: {
@@ -1 +1 @@
1
- {"version":3,"file":"Popup.d.ts","sourceRoot":"","sources":["../../../src/components/Popup/Popup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAIlD,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAIhD,OAAO,KAAK,EAAuB,cAAc,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAOxG,eAAO,MAAM,cAAc,cACZ,cAAc,UACjB,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,KAC5C,iBA8DF,CAAC;AAoIF;;GAEG;AACH,eAAO,MAAM,SAAS,SAAU,UAAU,cAAc,EAAE,UAAU,CAAC,sFAkGhE,CAAC;AAEN,eAAO,MAAM,WAAW;;;mBApGQ,UAAU,cAAc,EAAE,UAAU,CAAC;;;;CA2GpE,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;AAIhD,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,sFAyGhE,CAAC;AAEN,eAAO,MAAM,WAAW;;;mBA3GQ,UAAU,cAAc,EAAE,UAAU,CAAC;;;;CAkHpE,CAAC"}
@@ -1,7 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import type { PopupRootContainerProps } from './Popup.types';
3
3
  export declare const StyledPortal: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
4
- export declare const StyledPortalContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
5
4
  export declare const PopupView: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
6
5
  export declare const PopupRootContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & PopupRootContainerProps>;
7
6
  //# sourceMappingURL=Popup.styles.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Popup.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Popup/Popup.styles.ts"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAG7D,eAAO,MAAM,YAAY,qKAgBxB,CAAC;AAEF,eAAO,MAAM,qBAAqB,qKAEjC,CAAC;AAEF,eAAO,MAAM,SAAS,qKAIrB,CAAC;AAEF,eAAO,MAAM,kBAAkB,sKAQ9B,CAAC"}
1
+ {"version":3,"file":"Popup.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Popup/Popup.styles.ts"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAG7D,eAAO,MAAM,YAAY,qKAAe,CAAC;AAEzC,eAAO,MAAM,SAAS,qKAIrB,CAAC;AAEF,eAAO,MAAM,kBAAkB,sKAQ9B,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"PopupContext.d.ts","sourceRoot":"","sources":["../../../src/components/Popup/PopupContext.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAkD,EAAE,EAAE,iBAAiB,EAAU,MAAM,OAAO,CAAC;AAI7G,OAAO,KAAK,EAAE,gBAAgB,EAAa,MAAM,eAAe,CAAC;AAEjE,eAAO,MAAM,eAAe,sBAAsB,CAAC;AAgBnD,eAAO,MAAM,eAAe,wBAAiC,CAAC;AAE9D,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,iBAAiB,CAoD/C,CAAC"}
1
+ {"version":3,"file":"PopupContext.d.ts","sourceRoot":"","sources":["../../../src/components/Popup/PopupContext.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAkD,EAAE,EAAE,iBAAiB,EAAU,MAAM,OAAO,CAAC;AAI7G,OAAO,KAAK,EAAE,gBAAgB,EAAa,MAAM,eAAe,CAAC;AAEjE,eAAO,MAAM,eAAe,sBAAsB,CAAC;AAcnD,eAAO,MAAM,eAAe,wBAAiC,CAAC;AAE9D,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,iBAAiB,CAmD/C,CAAC"}
@@ -4,6 +4,7 @@ export { extractTextFrom } from './extractTextFrom';
4
4
  export { getSizeValueFromProp } from './getSizeValueFromProp';
5
5
  export { IS_REACT_18, safeUseId } from './react';
6
6
  export { isNumber } from './isNumber';
7
+ export { mergeRefs, setRefList } from './setRefList';
7
8
  export { isEmpty } from './isEmpty';
8
9
  export * from './getPopoverPlacement';
9
10
  export declare const cx: (...classes: (string | undefined)[]) => string;
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAE9C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,cAAc,uBAAuB,CAAC;AAEtC,eAAO,MAAM,EAAE,eAAgB,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,WAAuD,CAAC;AAE7G,eAAO,MAAM,eAAe,MAAO,oBAAoB,WAAW,MAAM,MAAM,GAAG,MAAM,GAAG,aAAa,CAAC,KAAG,MAQ1G,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAE9C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,cAAc,uBAAuB,CAAC;AAEtC,eAAO,MAAM,EAAE,eAAgB,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,WAAuD,CAAC;AAE7G,eAAO,MAAM,eAAe,MAAO,oBAAoB,WAAW,MAAM,MAAM,GAAG,MAAM,GAAG,aAAa,CAAC,KAAG,MAQ1G,CAAC"}
@@ -0,0 +1,6 @@
1
+ import type { MutableRefObject, RefCallback } from 'react';
2
+ declare type MutableRefList<T> = Array<RefCallback<T> | MutableRefObject<T> | undefined | null>;
3
+ export declare function mergeRefs<T>(...refs: MutableRefList<T>): RefCallback<T>;
4
+ export declare function setRefList<T>(val: T, ...refs: MutableRefList<T>): void;
5
+ export {};
6
+ //# sourceMappingURL=setRefList.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"setRefList.d.ts","sourceRoot":"","sources":["../../src/utils/setRefList.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAE3D,aAAK,cAAc,CAAC,CAAC,IAAI,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,gBAAgB,CAAC,CAAC,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC,CAAC;AAExF,wBAAgB,SAAS,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,CAIvE;AAED,wBAAgB,UAAU,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,IAAI,CAQtE"}
@@ -1,4 +0,0 @@
1
- .svkpf6n{position:fixed;top:0;left:0;right:0;bottom:0;}.svkpf6n:empty{width:0;pointer-events:none;}.svkpf6n:not(:empty){width:auto;pointer-events:auto;}
2
- .s1cjo3us{width:0;}
3
- .p5u7tqa{position:relative;max-width:100%;pointer-events:all;}
4
- .p1f40oul{position:absolute;z-index:var(--p1f40oul-0);left:var(--p1f40oul-1);right:var(--p1f40oul-2);top:var(--p1f40oul-3);bottom:var(--p1f40oul-4);-webkit-transform:var(--p1f40oul-5);-ms-transform:var(--p1f40oul-5);transform:var(--p1f40oul-5);}
@@ -1,4 +0,0 @@
1
- .svkpf6n{position:fixed;top:0;left:0;right:0;bottom:0;}.svkpf6n:empty{width:0;pointer-events:none;}.svkpf6n:not(:empty){width:auto;pointer-events:auto;}
2
- .s1cjo3us{width:0;}
3
- .p5u7tqa{position:relative;max-width:100%;pointer-events:all;}
4
- .p1f40oul{position:absolute;z-index:var(--p1f40oul-0);left:var(--p1f40oul-1);right:var(--p1f40oul-2);top:var(--p1f40oul-3);bottom:var(--p1f40oul-4);-webkit-transform:var(--p1f40oul-5);-ms-transform:var(--p1f40oul-5);transform:var(--p1f40oul-5);}