@salutejs/plasma-new-hope 0.116.1-canary.1345.10274146329.0 → 0.116.1-canary.1346.10269858402.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (74) hide show
  1. package/cjs/components/Modal/Modal.js +1 -3
  2. package/cjs/components/Modal/Modal.js.map +1 -1
  3. package/cjs/index.js +0 -2
  4. package/cjs/index.js.map +1 -1
  5. package/emotion/cjs/components/Modal/Modal.js +3 -4
  6. package/emotion/cjs/examples/plasma_b2c/components/Modal/Modal.stories.tsx +1 -115
  7. package/emotion/cjs/examples/plasma_web/components/Modal/Modal.stories.tsx +1 -115
  8. package/emotion/cjs/hooks/index.js +0 -7
  9. package/emotion/es/components/Modal/Modal.js +2 -3
  10. package/emotion/es/examples/plasma_b2c/components/Modal/Modal.stories.tsx +1 -115
  11. package/emotion/es/examples/plasma_web/components/Modal/Modal.stories.tsx +1 -115
  12. package/emotion/es/hooks/index.js +0 -1
  13. package/es/components/Modal/Modal.js +2 -4
  14. package/es/components/Modal/Modal.js.map +1 -1
  15. package/es/index.js +0 -1
  16. package/es/index.js.map +1 -1
  17. package/package.json +4 -4
  18. package/styled-components/cjs/components/Modal/Modal.js +3 -4
  19. package/styled-components/cjs/examples/plasma_b2c/components/Modal/Modal.stories.tsx +1 -115
  20. package/styled-components/cjs/examples/plasma_web/components/Modal/Modal.stories.tsx +1 -115
  21. package/styled-components/cjs/hooks/index.js +0 -7
  22. package/styled-components/es/components/Modal/Modal.js +2 -3
  23. package/styled-components/es/examples/plasma_b2c/components/Modal/Modal.stories.tsx +1 -115
  24. package/styled-components/es/examples/plasma_web/components/Modal/Modal.stories.tsx +1 -115
  25. package/styled-components/es/hooks/index.js +0 -1
  26. package/types/components/Modal/Modal.d.ts.map +1 -1
  27. package/types/hooks/index.d.ts +0 -1
  28. package/types/hooks/index.d.ts.map +1 -1
  29. package/cjs/hooks/useFocusTrap.js +0 -97
  30. package/cjs/hooks/useFocusTrap.js.map +0 -1
  31. package/cjs/utils/focusManager.js +0 -56
  32. package/cjs/utils/focusManager.js.map +0 -1
  33. package/cjs/utils/scopeTab.js +0 -37
  34. package/cjs/utils/scopeTab.js.map +0 -1
  35. package/cjs/utils/tabbable.js +0 -51
  36. package/cjs/utils/tabbable.js.map +0 -1
  37. package/emotion/cjs/hooks/useFocusTrap.js +0 -95
  38. package/emotion/cjs/utils/focusManager.js +0 -60
  39. package/emotion/cjs/utils/scopeTab.js +0 -35
  40. package/emotion/cjs/utils/tabbable.js +0 -46
  41. package/emotion/cjs/utils/useFocusTrap.js +0 -95
  42. package/emotion/es/hooks/useFocusTrap.js +0 -90
  43. package/emotion/es/utils/focusManager.js +0 -55
  44. package/emotion/es/utils/scopeTab.js +0 -30
  45. package/emotion/es/utils/tabbable.js +0 -40
  46. package/emotion/es/utils/useFocusTrap.js +0 -90
  47. package/es/hooks/useFocusTrap.js +0 -93
  48. package/es/hooks/useFocusTrap.js.map +0 -1
  49. package/es/utils/focusManager.js +0 -52
  50. package/es/utils/focusManager.js.map +0 -1
  51. package/es/utils/scopeTab.js +0 -33
  52. package/es/utils/scopeTab.js.map +0 -1
  53. package/es/utils/tabbable.js +0 -43
  54. package/es/utils/tabbable.js.map +0 -1
  55. package/styled-components/cjs/hooks/useFocusTrap.js +0 -95
  56. package/styled-components/cjs/utils/focusManager.js +0 -60
  57. package/styled-components/cjs/utils/scopeTab.js +0 -35
  58. package/styled-components/cjs/utils/tabbable.js +0 -46
  59. package/styled-components/cjs/utils/useFocusTrap.js +0 -95
  60. package/styled-components/es/hooks/useFocusTrap.js +0 -90
  61. package/styled-components/es/utils/focusManager.js +0 -55
  62. package/styled-components/es/utils/scopeTab.js +0 -30
  63. package/styled-components/es/utils/tabbable.js +0 -40
  64. package/styled-components/es/utils/useFocusTrap.js +0 -90
  65. package/types/hooks/useFocusTrap.d.ts +0 -6
  66. package/types/hooks/useFocusTrap.d.ts.map +0 -1
  67. package/types/utils/focusManager.d.ts +0 -15
  68. package/types/utils/focusManager.d.ts.map +0 -1
  69. package/types/utils/scopeTab.d.ts +0 -7
  70. package/types/utils/scopeTab.d.ts.map +0 -1
  71. package/types/utils/tabbable.d.ts +0 -6
  72. package/types/utils/tabbable.d.ts.map +0 -1
  73. package/types/utils/useFocusTrap.d.ts +0 -6
  74. package/types/utils/useFocusTrap.d.ts.map +0 -1
@@ -11,8 +11,6 @@ var PopupContext = require('../Popup/PopupContext.js');
11
11
  var Popup$1 = require('../Popup/Popup.js');
12
12
  var Overlay = require('../Overlay/Overlay.js');
13
13
  var index = require('../Popup/utils/index.js');
14
- var useFocusTrap = require('../../hooks/useFocusTrap.js');
15
- require('../../utils/react.js');
16
14
  var Modal_tokens = require('./Modal.tokens.js');
17
15
  var useModal = require('./hooks/useModal.js');
18
16
  var base = require('./variations/_view/base.js');
@@ -47,7 +45,7 @@ var modalRoot = function modalRoot(Root) {
47
45
  view = _ref.view,
48
46
  isOpen = _ref.isOpen,
49
47
  rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
50
- var trapRef = useFocusTrap.useFocusTrap(true, initialFocusRef, focusAfterRef, true);
48
+ var trapRef = plasmaCore.useFocusTrap(true, initialFocusRef, focusAfterRef);
51
49
  var popupController = PopupContext.usePopupContext();
52
50
  var innerRef = plasmaCore.useForkRef(trapRef, outerRootRef);
53
51
  var uniqId = plasmaCore.safeUseId();
@@ -1 +1 @@
1
- {"version":3,"file":"Modal.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo } from 'react';\nimport { useForkRef, safeUseId } from '@salutejs/plasma-core';\n\nimport { RootProps, component } from '../../engines';\nimport { popupConfig, usePopupContext } from '../Popup';\nimport { Overlay } from '../Overlay';\nimport { DEFAULT_Z_INDEX } from '../Popup/utils';\nimport { useFocusTrap } from '../../hooks';\n\nimport { classes, tokens } from './Modal.tokens';\nimport { ModalProps } from './Modal.types';\nimport { useModal } from './hooks';\nimport { base as viewCSS } from './variations/_view/base';\nimport { getIdLastModal } from './ModalContext';\n\n// issue #823\nconst Popup = component(popupConfig);\n\n/**\n * Modal.\n * Управляет показом/скрытием, подложкой и анимацией визуальной части модального окна.\n */\nexport const modalRoot = (Root: RootProps<HTMLDivElement, ModalProps>) =>\n forwardRef<HTMLDivElement, ModalProps>(\n (\n {\n id,\n withAnimation,\n onClose,\n onOverlayClick,\n onEscKeyDown,\n closeOnEsc = true,\n closeOnOverlayClick = true,\n withBlur,\n initialFocusRef,\n focusAfterRef,\n zIndex,\n popupInfo,\n children,\n view,\n isOpen,\n ...rest\n },\n outerRootRef,\n ) => {\n const trapRef = useFocusTrap(true, initialFocusRef, focusAfterRef, true);\n const popupController = usePopupContext();\n\n const innerRef = useForkRef<HTMLDivElement>(trapRef, outerRootRef);\n\n const uniqId = safeUseId();\n const innerId = id || uniqId;\n const overlayBackgroundToken = withBlur\n ? `var(${tokens.modalOverlayWithBlurColor})`\n : `var(${tokens.modalOverlayColor})`;\n\n const { modalInfo } = useModal({ id: innerId, isOpen, closeOnEsc, onEscKeyDown, onClose, popupInfo });\n const transparent = useMemo(() => getIdLastModal(popupController.items) !== innerId, [\n innerId,\n popupController.items,\n ]);\n\n const onModalOverlayKeyDown = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n if (onOverlayClick) {\n onOverlayClick(event);\n return;\n }\n\n if (onClose) {\n onClose();\n }\n },\n [closeOnOverlayClick, onOverlayClick, onClose],\n );\n\n return (\n <Popup\n id={innerId}\n isOpen={isOpen}\n ref={innerRef}\n popupInfo={modalInfo}\n withAnimation={withAnimation}\n zIndex={zIndex}\n overlay={\n <Root view={view}>\n <Overlay\n className={classes.overlay}\n zIndex={zIndex || DEFAULT_Z_INDEX}\n backgroundColorProperty={overlayBackgroundToken}\n withBlur={withBlur}\n transparent={transparent}\n isClickable={closeOnOverlayClick}\n onOverlayClick={onModalOverlayKeyDown}\n />\n </Root>\n }\n {...rest}\n >\n {children}\n </Popup>\n );\n },\n );\n\nexport const modalConfig = {\n name: 'Modal',\n tag: 'div',\n layout: modalRoot,\n base: '',\n variations: {\n view: {\n css: viewCSS,\n },\n },\n defaults: {\n view: 'default',\n },\n};\n"],"names":["Popup","component","popupConfig","modalRoot","Root","forwardRef","_ref","outerRootRef","id","withAnimation","onClose","onOverlayClick","onEscKeyDown","_ref$closeOnEsc","closeOnEsc","_ref$closeOnOverlayCl","closeOnOverlayClick","withBlur","initialFocusRef","focusAfterRef","zIndex","popupInfo","children","view","isOpen","rest","_objectWithoutProperties","_excluded","trapRef","useFocusTrap","popupController","usePopupContext","innerRef","useForkRef","uniqId","safeUseId","innerId","overlayBackgroundToken","concat","tokens","modalOverlayWithBlurColor","modalOverlayColor","_useModal","useModal","modalInfo","transparent","useMemo","getIdLastModal","items","onModalOverlayKeyDown","useCallback","event","React","createElement","_extends","ref","overlay","Overlay","className","classes","DEFAULT_Z_INDEX","backgroundColorProperty","isClickable","modalConfig","name","tag","layout","base","variations","css","viewCSS","defaults"],"mappings":"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"}
1
+ {"version":3,"file":"Modal.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo } from 'react';\nimport { useFocusTrap, useForkRef, safeUseId } from '@salutejs/plasma-core';\n\nimport { RootProps, component } from '../../engines';\nimport { popupConfig, usePopupContext } from '../Popup';\nimport { Overlay } from '../Overlay';\nimport { DEFAULT_Z_INDEX } from '../Popup/utils';\n\nimport { classes, tokens } from './Modal.tokens';\nimport { ModalProps } from './Modal.types';\nimport { useModal } from './hooks';\nimport { base as viewCSS } from './variations/_view/base';\nimport { getIdLastModal } from './ModalContext';\n\n// issue #823\nconst Popup = component(popupConfig);\n\n/**\n * Modal.\n * Управляет показом/скрытием, подложкой и анимацией визуальной части модального окна.\n */\nexport const modalRoot = (Root: RootProps<HTMLDivElement, ModalProps>) =>\n forwardRef<HTMLDivElement, ModalProps>(\n (\n {\n id,\n withAnimation,\n onClose,\n onOverlayClick,\n onEscKeyDown,\n closeOnEsc = true,\n closeOnOverlayClick = true,\n withBlur,\n initialFocusRef,\n focusAfterRef,\n zIndex,\n popupInfo,\n children,\n view,\n isOpen,\n ...rest\n },\n outerRootRef,\n ) => {\n const trapRef = useFocusTrap(true, initialFocusRef, focusAfterRef);\n const popupController = usePopupContext();\n\n const innerRef = useForkRef<HTMLDivElement>(trapRef, outerRootRef);\n\n const uniqId = safeUseId();\n const innerId = id || uniqId;\n const overlayBackgroundToken = withBlur\n ? `var(${tokens.modalOverlayWithBlurColor})`\n : `var(${tokens.modalOverlayColor})`;\n\n const { modalInfo } = useModal({ id: innerId, isOpen, closeOnEsc, onEscKeyDown, onClose, popupInfo });\n const transparent = useMemo(() => getIdLastModal(popupController.items) !== innerId, [\n innerId,\n popupController.items,\n ]);\n\n const onModalOverlayKeyDown = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n if (onOverlayClick) {\n onOverlayClick(event);\n return;\n }\n\n if (onClose) {\n onClose();\n }\n },\n [closeOnOverlayClick, onOverlayClick, onClose],\n );\n\n return (\n <Popup\n id={innerId}\n isOpen={isOpen}\n ref={innerRef}\n popupInfo={modalInfo}\n withAnimation={withAnimation}\n zIndex={zIndex}\n overlay={\n <Root view={view}>\n <Overlay\n className={classes.overlay}\n zIndex={zIndex || DEFAULT_Z_INDEX}\n backgroundColorProperty={overlayBackgroundToken}\n withBlur={withBlur}\n transparent={transparent}\n isClickable={closeOnOverlayClick}\n onOverlayClick={onModalOverlayKeyDown}\n />\n </Root>\n }\n {...rest}\n >\n {children}\n </Popup>\n );\n },\n );\n\nexport const modalConfig = {\n name: 'Modal',\n tag: 'div',\n layout: modalRoot,\n base: '',\n variations: {\n view: {\n css: viewCSS,\n },\n },\n defaults: {\n view: 'default',\n },\n};\n"],"names":["Popup","component","popupConfig","modalRoot","Root","forwardRef","_ref","outerRootRef","id","withAnimation","onClose","onOverlayClick","onEscKeyDown","_ref$closeOnEsc","closeOnEsc","_ref$closeOnOverlayCl","closeOnOverlayClick","withBlur","initialFocusRef","focusAfterRef","zIndex","popupInfo","children","view","isOpen","rest","_objectWithoutProperties","_excluded","trapRef","useFocusTrap","popupController","usePopupContext","innerRef","useForkRef","uniqId","safeUseId","innerId","overlayBackgroundToken","concat","tokens","modalOverlayWithBlurColor","modalOverlayColor","_useModal","useModal","modalInfo","transparent","useMemo","getIdLastModal","items","onModalOverlayKeyDown","useCallback","event","React","createElement","_extends","ref","overlay","Overlay","className","classes","DEFAULT_Z_INDEX","backgroundColorProperty","isClickable","modalConfig","name","tag","layout","base","variations","css","viewCSS","defaults"],"mappings":"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"}
package/cjs/index.js CHANGED
@@ -15,7 +15,6 @@ var applySkeletonGradient = require('./mixins/applySkeletonGradient.js');
15
15
  var applyDisabled = require('./mixins/applyDisabled.js');
16
16
  var index = require('./engines/index.js');
17
17
  var useUniqId = require('./hooks/useUniqId.js');
18
- var useFocusTrap = require('./hooks/useFocusTrap.js');
19
18
  var usePreviousValue = require('./hooks/usePreviousValue.js');
20
19
  var useForceUpdate = require('./hooks/useForceUpdate.js');
21
20
  var useDidMountEffect = require('./hooks/useDidMountEffect.js');
@@ -268,7 +267,6 @@ exports.getSkeletonColor = applySkeletonGradient.getSkeletonColor;
268
267
  exports.applyDisabled = applyDisabled.applyDisabled;
269
268
  exports.css = index.css;
270
269
  exports.useUniqId = useUniqId.useUniqId;
271
- exports.useFocusTrap = useFocusTrap.useFocusTrap;
272
270
  exports.usePreviousValue = usePreviousValue.usePreviousValue;
273
271
  exports.useForceUpdate = useForceUpdate.useForceUpdate;
274
272
  exports.useDidMountEffect = useDidMountEffect.useDidMountEffect;
package/cjs/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -11,9 +11,8 @@ var _engines = /*#__PURE__*/require("../../engines");
11
11
  var _Popup = /*#__PURE__*/require("../Popup");
12
12
  var _Overlay = /*#__PURE__*/require("../Overlay");
13
13
  var _utils = /*#__PURE__*/require("../Popup/utils");
14
- var _hooks = /*#__PURE__*/require("../../hooks");
15
14
  var _Modal = /*#__PURE__*/require("./Modal.tokens");
16
- var _hooks2 = /*#__PURE__*/require("./hooks");
15
+ var _hooks = /*#__PURE__*/require("./hooks");
17
16
  var _base = /*#__PURE__*/require("./variations/_view/base");
18
17
  var _ModalContext = /*#__PURE__*/require("./ModalContext");
19
18
  var _excluded = ["id", "withAnimation", "onClose", "onOverlayClick", "onEscKeyDown", "closeOnEsc", "closeOnOverlayClick", "withBlur", "initialFocusRef", "focusAfterRef", "zIndex", "popupInfo", "children", "view", "isOpen"];
@@ -49,13 +48,13 @@ var modalRoot = exports.modalRoot = function modalRoot(Root) {
49
48
  view = _ref.view,
50
49
  isOpen = _ref.isOpen,
51
50
  rest = _objectWithoutProperties(_ref, _excluded);
52
- var trapRef = (0, _hooks.useFocusTrap)(true, initialFocusRef, focusAfterRef, true);
51
+ var trapRef = (0, _plasmaCore.useFocusTrap)(true, initialFocusRef, focusAfterRef);
53
52
  var popupController = (0, _Popup.usePopupContext)();
54
53
  var innerRef = (0, _plasmaCore.useForkRef)(trapRef, outerRootRef);
55
54
  var uniqId = (0, _plasmaCore.safeUseId)();
56
55
  var innerId = id || uniqId;
57
56
  var overlayBackgroundToken = withBlur ? "var(".concat(_Modal.tokens.modalOverlayWithBlurColor, ")") : "var(".concat(_Modal.tokens.modalOverlayColor, ")");
58
- var _useModal = (0, _hooks2.useModal)({
57
+ var _useModal = (0, _hooks.useModal)({
59
58
  id: innerId,
60
59
  isOpen: isOpen,
61
60
  closeOnEsc: closeOnEsc,
@@ -1,4 +1,4 @@
1
- import React, { useCallback, useRef, useState } from 'react';
1
+ import React, { useState } from 'react';
2
2
  import styled from '@emotion/styled';
3
3
  import type { ComponentProps } from 'react';
4
4
  import type { StoryObj, Meta } from '@storybook/react';
@@ -6,7 +6,6 @@ import { SSRProvider } from '@salutejs/plasma-core';
6
6
 
7
7
  import { PopupProvider, popupClasses } from '../Popup/Popup';
8
8
  import { Button } from '../Button/Button';
9
- import { TextField } from '../TextField/TextField';
10
9
  import { WithTheme } from '../../../_helpers';
11
10
 
12
11
  import { Modal, modalClasses } from './Modal';
@@ -207,116 +206,3 @@ export const ModalDemo: StoryObj<StoryModalProps> = {
207
206
  },
208
207
  render: (args) => <StoryModalDemo {...args} />,
209
208
  };
210
-
211
- const StyledModalAnimation = styled(Modal)`
212
- /* stylelint-disable */
213
- && .${popupClasses.root} {
214
- animation: fadeIn 1s forwards;
215
- }
216
-
217
- &&.${popupClasses.endAnimation} .${popupClasses.root} {
218
- animation: fadeOut 1s forwards;
219
- }
220
-
221
- && .${modalClasses.overlay} {
222
- animation: overlayFadeIn 1s forwards;
223
- }
224
-
225
- &&.${popupClasses.endAnimation} .${modalClasses.overlay} {
226
- animation: overlayFadeOut 1s forwards;
227
- }
228
- /* stylelint-enable */
229
-
230
- @keyframes overlayFadeIn {
231
- from {
232
- opacity: 0;
233
- }
234
-
235
- to {
236
- opacity: 1;
237
- }
238
- }
239
-
240
- @keyframes overlayFadeOut {
241
- from {
242
- opacity: 1;
243
- }
244
-
245
- to {
246
- opacity: 0;
247
- }
248
- }
249
-
250
- @keyframes fadeIn {
251
- from {
252
- opacity: 0;
253
- transform: translate(-50%, 100%);
254
- }
255
-
256
- to {
257
- opacity: 1;
258
- transform: translate(-50%, -50%);
259
- }
260
- }
261
-
262
- @keyframes fadeOut {
263
- from {
264
- opacity: 1;
265
- transform: translate(-50%, -50%);
266
- }
267
-
268
- to {
269
- opacity: 0;
270
- transform: translate(-50%, 100%);
271
- }
272
- }
273
- `;
274
-
275
- const StoryModalAnimationDemo = ({ placement, offsetX, offsetY, ...rest }: StoryModalProps) => {
276
- const ref = useRef(null);
277
- const [isOpen, setIsOpen] = useState(false);
278
-
279
- const close = useCallback(() => {
280
- setIsOpen(false);
281
- }, []);
282
-
283
- return (
284
- <SSRProvider>
285
- {/* <StyledWrapper> */}
286
- <PopupProvider>
287
- <Button view="default" text="Открыть новое модальное окно" onClick={() => setIsOpen(!isOpen)} />
288
- <StyledModalAnimation
289
- id="modal"
290
- frame="theme-root"
291
- withAnimation
292
- onClose={() => setIsOpen(false)}
293
- isOpen={isOpen}
294
- placement={placement}
295
- offset={[offsetX, offsetY]}
296
- initialFocusRef={ref}
297
- {...rest}
298
- >
299
- <Content>
300
- <TextField value="Text" onChange={() => {}} />
301
- <TextField ref={ref} value="Text2" onChange={() => {}} />
302
- <Button text="Закрыть" onClick={close} />
303
- </Content>
304
- </StyledModalAnimation>
305
- </PopupProvider>
306
- {/* </StyledWrapper> */}
307
- </SSRProvider>
308
- );
309
- };
310
-
311
- export const ModalBottomAnimation: StoryObj<StoryModalProps> = {
312
- args: {
313
- placement: 'bottom',
314
- withAnimation: true,
315
- withBlur: false,
316
- closeOnEsc: true,
317
- closeOnOverlayClick: true,
318
- offsetX: 0,
319
- offsetY: 0,
320
- },
321
- render: (args) => <StoryModalAnimationDemo {...args} />,
322
- };
@@ -1,4 +1,4 @@
1
- import React, { useCallback, useRef, useState } from 'react';
1
+ import React, { useState } from 'react';
2
2
  import styled from '@emotion/styled';
3
3
  import type { ComponentProps } from 'react';
4
4
  import type { StoryObj, Meta } from '@storybook/react';
@@ -6,7 +6,6 @@ import { SSRProvider } from '@salutejs/plasma-core';
6
6
 
7
7
  import { PopupProvider, popupClasses } from '../Popup/Popup';
8
8
  import { Button } from '../Button/Button';
9
- import { TextField } from '../TextField/TextField';
10
9
  import { WithTheme } from '../../../_helpers';
11
10
 
12
11
  import { Modal, modalClasses } from './Modal';
@@ -207,116 +206,3 @@ export const ModalDemo: StoryObj<StoryModalProps> = {
207
206
  },
208
207
  render: (args) => <StoryModalDemo {...args} />,
209
208
  };
210
-
211
- const StyledModalAnimation = styled(Modal)`
212
- /* stylelint-disable */
213
- && .${popupClasses.root} {
214
- animation: fadeIn 1s forwards;
215
- }
216
-
217
- &&.${popupClasses.endAnimation} .${popupClasses.root} {
218
- animation: fadeOut 1s forwards;
219
- }
220
-
221
- && .${modalClasses.overlay} {
222
- animation: overlayFadeIn 1s forwards;
223
- }
224
-
225
- &&.${popupClasses.endAnimation} .${modalClasses.overlay} {
226
- animation: overlayFadeOut 1s forwards;
227
- }
228
- /* stylelint-enable */
229
-
230
- @keyframes overlayFadeIn {
231
- from {
232
- opacity: 0;
233
- }
234
-
235
- to {
236
- opacity: 1;
237
- }
238
- }
239
-
240
- @keyframes overlayFadeOut {
241
- from {
242
- opacity: 1;
243
- }
244
-
245
- to {
246
- opacity: 0;
247
- }
248
- }
249
-
250
- @keyframes fadeIn {
251
- from {
252
- opacity: 0;
253
- transform: translate(-50%, 100%);
254
- }
255
-
256
- to {
257
- opacity: 1;
258
- transform: translate(-50%, -50%);
259
- }
260
- }
261
-
262
- @keyframes fadeOut {
263
- from {
264
- opacity: 1;
265
- transform: translate(-50%, -50%);
266
- }
267
-
268
- to {
269
- opacity: 0;
270
- transform: translate(-50%, 100%);
271
- }
272
- }
273
- `;
274
-
275
- const StoryModalAnimationDemo = ({ placement, offsetX, offsetY, ...rest }: StoryModalProps) => {
276
- const ref = useRef(null);
277
- const [isOpen, setIsOpen] = useState(false);
278
-
279
- const close = useCallback(() => {
280
- setIsOpen(false);
281
- }, []);
282
-
283
- return (
284
- <SSRProvider>
285
- {/* <StyledWrapper> */}
286
- <PopupProvider>
287
- <Button view="default" text="Открыть новое модальное окно" onClick={() => setIsOpen(!isOpen)} />
288
- <StyledModalAnimation
289
- id="modal"
290
- frame="theme-root"
291
- withAnimation
292
- onClose={() => setIsOpen(false)}
293
- isOpen={isOpen}
294
- placement={placement}
295
- offset={[offsetX, offsetY]}
296
- initialFocusRef={ref}
297
- {...rest}
298
- >
299
- <Content>
300
- <TextField value="Text" onChange={() => {}} />
301
- <TextField ref={ref} value="Text2" onChange={() => {}} />
302
- <Button text="Закрыть" onClick={close} />
303
- </Content>
304
- </StyledModalAnimation>
305
- </PopupProvider>
306
- {/* </StyledWrapper> */}
307
- </SSRProvider>
308
- );
309
- };
310
-
311
- export const ModalBottomAnimation: StoryObj<StoryModalProps> = {
312
- args: {
313
- placement: 'bottom',
314
- withAnimation: true,
315
- withBlur: false,
316
- closeOnEsc: true,
317
- closeOnOverlayClick: true,
318
- offsetX: 0,
319
- offsetY: 0,
320
- },
321
- render: (args) => <StoryModalAnimationDemo {...args} />,
322
- };
@@ -9,12 +9,6 @@ Object.defineProperty(exports, "useDidMountEffect", {
9
9
  return _useDidMountEffect.useDidMountEffect;
10
10
  }
11
11
  });
12
- Object.defineProperty(exports, "useFocusTrap", {
13
- enumerable: true,
14
- get: function get() {
15
- return _useFocusTrap.useFocusTrap;
16
- }
17
- });
18
12
  Object.defineProperty(exports, "useForceUpdate", {
19
13
  enumerable: true,
20
14
  get: function get() {
@@ -46,7 +40,6 @@ Object.defineProperty(exports, "useUniqId", {
46
40
  }
47
41
  });
48
42
  var _useUniqId = /*#__PURE__*/require("./useUniqId");
49
- var _useFocusTrap = /*#__PURE__*/require("./useFocusTrap");
50
43
  var _usePreviousValue = /*#__PURE__*/require("./usePreviousValue");
51
44
  var _useForceUpdate = /*#__PURE__*/require("./useForceUpdate");
52
45
  var _useDidMountEffect = /*#__PURE__*/require("./useDidMountEffect");
@@ -3,12 +3,11 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
3
3
  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; }
4
4
  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; }
5
5
  import React, { forwardRef, useCallback, useMemo } from 'react';
6
- import { useForkRef, safeUseId } from '@salutejs/plasma-core';
6
+ import { useFocusTrap, useForkRef, safeUseId } from '@salutejs/plasma-core';
7
7
  import { component } from '../../engines';
8
8
  import { popupConfig, usePopupContext } from '../Popup';
9
9
  import { Overlay } from '../Overlay';
10
10
  import { DEFAULT_Z_INDEX } from '../Popup/utils';
11
- import { useFocusTrap } from '../../hooks';
12
11
  import { classes, tokens } from './Modal.tokens';
13
12
  import { useModal } from './hooks';
14
13
  import { base as viewCSS } from './variations/_view/base';
@@ -41,7 +40,7 @@ export var modalRoot = function modalRoot(Root) {
41
40
  view = _ref.view,
42
41
  isOpen = _ref.isOpen,
43
42
  rest = _objectWithoutProperties(_ref, _excluded);
44
- var trapRef = useFocusTrap(true, initialFocusRef, focusAfterRef, true);
43
+ var trapRef = useFocusTrap(true, initialFocusRef, focusAfterRef);
45
44
  var popupController = usePopupContext();
46
45
  var innerRef = useForkRef(trapRef, outerRootRef);
47
46
  var uniqId = safeUseId();
@@ -1,4 +1,4 @@
1
- import React, { useCallback, useRef, useState } from 'react';
1
+ import React, { useState } from 'react';
2
2
  import styled from '@emotion/styled';
3
3
  import type { ComponentProps } from 'react';
4
4
  import type { StoryObj, Meta } from '@storybook/react';
@@ -6,7 +6,6 @@ import { SSRProvider } from '@salutejs/plasma-core';
6
6
 
7
7
  import { PopupProvider, popupClasses } from '../Popup/Popup';
8
8
  import { Button } from '../Button/Button';
9
- import { TextField } from '../TextField/TextField';
10
9
  import { WithTheme } from '../../../_helpers';
11
10
 
12
11
  import { Modal, modalClasses } from './Modal';
@@ -207,116 +206,3 @@ export const ModalDemo: StoryObj<StoryModalProps> = {
207
206
  },
208
207
  render: (args) => <StoryModalDemo {...args} />,
209
208
  };
210
-
211
- const StyledModalAnimation = styled(Modal)`
212
- /* stylelint-disable */
213
- && .${popupClasses.root} {
214
- animation: fadeIn 1s forwards;
215
- }
216
-
217
- &&.${popupClasses.endAnimation} .${popupClasses.root} {
218
- animation: fadeOut 1s forwards;
219
- }
220
-
221
- && .${modalClasses.overlay} {
222
- animation: overlayFadeIn 1s forwards;
223
- }
224
-
225
- &&.${popupClasses.endAnimation} .${modalClasses.overlay} {
226
- animation: overlayFadeOut 1s forwards;
227
- }
228
- /* stylelint-enable */
229
-
230
- @keyframes overlayFadeIn {
231
- from {
232
- opacity: 0;
233
- }
234
-
235
- to {
236
- opacity: 1;
237
- }
238
- }
239
-
240
- @keyframes overlayFadeOut {
241
- from {
242
- opacity: 1;
243
- }
244
-
245
- to {
246
- opacity: 0;
247
- }
248
- }
249
-
250
- @keyframes fadeIn {
251
- from {
252
- opacity: 0;
253
- transform: translate(-50%, 100%);
254
- }
255
-
256
- to {
257
- opacity: 1;
258
- transform: translate(-50%, -50%);
259
- }
260
- }
261
-
262
- @keyframes fadeOut {
263
- from {
264
- opacity: 1;
265
- transform: translate(-50%, -50%);
266
- }
267
-
268
- to {
269
- opacity: 0;
270
- transform: translate(-50%, 100%);
271
- }
272
- }
273
- `;
274
-
275
- const StoryModalAnimationDemo = ({ placement, offsetX, offsetY, ...rest }: StoryModalProps) => {
276
- const ref = useRef(null);
277
- const [isOpen, setIsOpen] = useState(false);
278
-
279
- const close = useCallback(() => {
280
- setIsOpen(false);
281
- }, []);
282
-
283
- return (
284
- <SSRProvider>
285
- {/* <StyledWrapper> */}
286
- <PopupProvider>
287
- <Button view="default" text="Открыть новое модальное окно" onClick={() => setIsOpen(!isOpen)} />
288
- <StyledModalAnimation
289
- id="modal"
290
- frame="theme-root"
291
- withAnimation
292
- onClose={() => setIsOpen(false)}
293
- isOpen={isOpen}
294
- placement={placement}
295
- offset={[offsetX, offsetY]}
296
- initialFocusRef={ref}
297
- {...rest}
298
- >
299
- <Content>
300
- <TextField value="Text" onChange={() => {}} />
301
- <TextField ref={ref} value="Text2" onChange={() => {}} />
302
- <Button text="Закрыть" onClick={close} />
303
- </Content>
304
- </StyledModalAnimation>
305
- </PopupProvider>
306
- {/* </StyledWrapper> */}
307
- </SSRProvider>
308
- );
309
- };
310
-
311
- export const ModalBottomAnimation: StoryObj<StoryModalProps> = {
312
- args: {
313
- placement: 'bottom',
314
- withAnimation: true,
315
- withBlur: false,
316
- closeOnEsc: true,
317
- closeOnOverlayClick: true,
318
- offsetX: 0,
319
- offsetY: 0,
320
- },
321
- render: (args) => <StoryModalAnimationDemo {...args} />,
322
- };
@@ -1,4 +1,4 @@
1
- import React, { useCallback, useRef, useState } from 'react';
1
+ import React, { useState } from 'react';
2
2
  import styled from '@emotion/styled';
3
3
  import type { ComponentProps } from 'react';
4
4
  import type { StoryObj, Meta } from '@storybook/react';
@@ -6,7 +6,6 @@ import { SSRProvider } from '@salutejs/plasma-core';
6
6
 
7
7
  import { PopupProvider, popupClasses } from '../Popup/Popup';
8
8
  import { Button } from '../Button/Button';
9
- import { TextField } from '../TextField/TextField';
10
9
  import { WithTheme } from '../../../_helpers';
11
10
 
12
11
  import { Modal, modalClasses } from './Modal';
@@ -207,116 +206,3 @@ export const ModalDemo: StoryObj<StoryModalProps> = {
207
206
  },
208
207
  render: (args) => <StoryModalDemo {...args} />,
209
208
  };
210
-
211
- const StyledModalAnimation = styled(Modal)`
212
- /* stylelint-disable */
213
- && .${popupClasses.root} {
214
- animation: fadeIn 1s forwards;
215
- }
216
-
217
- &&.${popupClasses.endAnimation} .${popupClasses.root} {
218
- animation: fadeOut 1s forwards;
219
- }
220
-
221
- && .${modalClasses.overlay} {
222
- animation: overlayFadeIn 1s forwards;
223
- }
224
-
225
- &&.${popupClasses.endAnimation} .${modalClasses.overlay} {
226
- animation: overlayFadeOut 1s forwards;
227
- }
228
- /* stylelint-enable */
229
-
230
- @keyframes overlayFadeIn {
231
- from {
232
- opacity: 0;
233
- }
234
-
235
- to {
236
- opacity: 1;
237
- }
238
- }
239
-
240
- @keyframes overlayFadeOut {
241
- from {
242
- opacity: 1;
243
- }
244
-
245
- to {
246
- opacity: 0;
247
- }
248
- }
249
-
250
- @keyframes fadeIn {
251
- from {
252
- opacity: 0;
253
- transform: translate(-50%, 100%);
254
- }
255
-
256
- to {
257
- opacity: 1;
258
- transform: translate(-50%, -50%);
259
- }
260
- }
261
-
262
- @keyframes fadeOut {
263
- from {
264
- opacity: 1;
265
- transform: translate(-50%, -50%);
266
- }
267
-
268
- to {
269
- opacity: 0;
270
- transform: translate(-50%, 100%);
271
- }
272
- }
273
- `;
274
-
275
- const StoryModalAnimationDemo = ({ placement, offsetX, offsetY, ...rest }: StoryModalProps) => {
276
- const ref = useRef(null);
277
- const [isOpen, setIsOpen] = useState(false);
278
-
279
- const close = useCallback(() => {
280
- setIsOpen(false);
281
- }, []);
282
-
283
- return (
284
- <SSRProvider>
285
- {/* <StyledWrapper> */}
286
- <PopupProvider>
287
- <Button view="default" text="Открыть новое модальное окно" onClick={() => setIsOpen(!isOpen)} />
288
- <StyledModalAnimation
289
- id="modal"
290
- frame="theme-root"
291
- withAnimation
292
- onClose={() => setIsOpen(false)}
293
- isOpen={isOpen}
294
- placement={placement}
295
- offset={[offsetX, offsetY]}
296
- initialFocusRef={ref}
297
- {...rest}
298
- >
299
- <Content>
300
- <TextField value="Text" onChange={() => {}} />
301
- <TextField ref={ref} value="Text2" onChange={() => {}} />
302
- <Button text="Закрыть" onClick={close} />
303
- </Content>
304
- </StyledModalAnimation>
305
- </PopupProvider>
306
- {/* </StyledWrapper> */}
307
- </SSRProvider>
308
- );
309
- };
310
-
311
- export const ModalBottomAnimation: StoryObj<StoryModalProps> = {
312
- args: {
313
- placement: 'bottom',
314
- withAnimation: true,
315
- withBlur: false,
316
- closeOnEsc: true,
317
- closeOnOverlayClick: true,
318
- offsetX: 0,
319
- offsetY: 0,
320
- },
321
- render: (args) => <StoryModalAnimationDemo {...args} />,
322
- };