@salutejs/plasma-new-hope 0.118.1-dev.0 → 0.119.0-canary.1344.10281238925.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (102) hide show
  1. package/cjs/components/Accordion/Accordion.tokens.js +1 -0
  2. package/cjs/components/Accordion/Accordion.tokens.js.map +1 -1
  3. package/cjs/components/Accordion/ui/AccordionItem/AccordionItem.styles.js +2 -2
  4. package/cjs/components/Accordion/ui/AccordionItem/AccordionItem.styles.js.map +1 -1
  5. package/cjs/components/Modal/Modal.js +1 -3
  6. package/cjs/components/Modal/Modal.js.map +1 -1
  7. package/cjs/index.js +0 -2
  8. package/cjs/index.js.map +1 -1
  9. package/emotion/cjs/components/Accordion/Accordion.tokens.js +1 -0
  10. package/emotion/cjs/components/Accordion/ui/AccordionItem/AccordionItem.styles.js +2 -2
  11. package/emotion/cjs/components/Modal/Modal.js +3 -4
  12. package/emotion/cjs/examples/plasma_b2c/components/Accordion/Accordion.config.js +6 -6
  13. package/emotion/cjs/examples/plasma_b2c/components/Modal/Modal.stories.tsx +1 -113
  14. package/emotion/cjs/examples/plasma_web/components/Accordion/Accordion.config.js +8 -8
  15. package/emotion/cjs/examples/plasma_web/components/Modal/Modal.stories.tsx +1 -113
  16. package/emotion/cjs/hooks/index.js +0 -7
  17. package/emotion/es/components/Accordion/Accordion.tokens.js +1 -0
  18. package/emotion/es/components/Accordion/ui/AccordionItem/AccordionItem.styles.js +2 -2
  19. package/emotion/es/components/Modal/Modal.js +2 -3
  20. package/emotion/es/examples/plasma_b2c/components/Accordion/Accordion.config.js +6 -6
  21. package/emotion/es/examples/plasma_b2c/components/Modal/Modal.stories.tsx +1 -113
  22. package/emotion/es/examples/plasma_web/components/Accordion/Accordion.config.js +8 -8
  23. package/emotion/es/examples/plasma_web/components/Modal/Modal.stories.tsx +1 -113
  24. package/emotion/es/hooks/index.js +0 -1
  25. package/es/components/Accordion/Accordion.tokens.js +1 -0
  26. package/es/components/Accordion/Accordion.tokens.js.map +1 -1
  27. package/es/components/Accordion/ui/AccordionItem/AccordionItem.styles.js +2 -2
  28. package/es/components/Accordion/ui/AccordionItem/AccordionItem.styles.js.map +1 -1
  29. package/es/components/Modal/Modal.js +2 -4
  30. package/es/components/Modal/Modal.js.map +1 -1
  31. package/es/index.js +0 -1
  32. package/es/index.js.map +1 -1
  33. package/package.json +4 -4
  34. package/styled-components/cjs/components/Accordion/Accordion.tokens.js +1 -0
  35. package/styled-components/cjs/components/Accordion/ui/AccordionItem/AccordionItem.styles.js +2 -2
  36. package/styled-components/cjs/components/Modal/Modal.js +3 -4
  37. package/styled-components/cjs/examples/plasma_b2c/components/Accordion/Accordion.config.js +2 -2
  38. package/styled-components/cjs/examples/plasma_b2c/components/Modal/Modal.stories.tsx +1 -113
  39. package/styled-components/cjs/examples/plasma_web/components/Accordion/Accordion.config.js +2 -2
  40. package/styled-components/cjs/examples/plasma_web/components/Modal/Modal.stories.tsx +1 -113
  41. package/styled-components/cjs/hooks/index.js +0 -7
  42. package/styled-components/es/components/Accordion/Accordion.tokens.js +1 -0
  43. package/styled-components/es/components/Accordion/ui/AccordionItem/AccordionItem.styles.js +2 -2
  44. package/styled-components/es/components/Modal/Modal.js +2 -3
  45. package/styled-components/es/examples/plasma_b2c/components/Accordion/Accordion.config.js +2 -2
  46. package/styled-components/es/examples/plasma_b2c/components/Modal/Modal.stories.tsx +1 -113
  47. package/styled-components/es/examples/plasma_web/components/Accordion/Accordion.config.js +2 -2
  48. package/styled-components/es/examples/plasma_web/components/Modal/Modal.stories.tsx +1 -113
  49. package/styled-components/es/hooks/index.js +0 -1
  50. package/types/components/Accordion/Accordion.tokens.d.ts +1 -0
  51. package/types/components/Accordion/Accordion.tokens.d.ts.map +1 -1
  52. package/types/components/Modal/Modal.d.ts.map +1 -1
  53. package/types/examples/plasma_b2c/components/Accordion/Accordion.config.d.ts.map +1 -1
  54. package/types/examples/plasma_web/components/Accordion/Accordion.config.d.ts.map +1 -1
  55. package/types/hooks/index.d.ts +0 -1
  56. package/types/hooks/index.d.ts.map +1 -1
  57. package/cjs/hooks/useFocusTrap.js +0 -97
  58. package/cjs/hooks/useFocusTrap.js.map +0 -1
  59. package/cjs/utils/focusManager.js +0 -56
  60. package/cjs/utils/focusManager.js.map +0 -1
  61. package/cjs/utils/scopeTab.js +0 -37
  62. package/cjs/utils/scopeTab.js.map +0 -1
  63. package/cjs/utils/tabbable.js +0 -51
  64. package/cjs/utils/tabbable.js.map +0 -1
  65. package/emotion/cjs/hooks/useFocusTrap.js +0 -95
  66. package/emotion/cjs/utils/focusManager.js +0 -60
  67. package/emotion/cjs/utils/scopeTab.js +0 -35
  68. package/emotion/cjs/utils/tabbable.js +0 -46
  69. package/emotion/cjs/utils/useFocusTrap.js +0 -95
  70. package/emotion/es/hooks/useFocusTrap.js +0 -90
  71. package/emotion/es/utils/focusManager.js +0 -55
  72. package/emotion/es/utils/scopeTab.js +0 -30
  73. package/emotion/es/utils/tabbable.js +0 -40
  74. package/emotion/es/utils/useFocusTrap.js +0 -90
  75. package/es/hooks/useFocusTrap.js +0 -93
  76. package/es/hooks/useFocusTrap.js.map +0 -1
  77. package/es/utils/focusManager.js +0 -52
  78. package/es/utils/focusManager.js.map +0 -1
  79. package/es/utils/scopeTab.js +0 -33
  80. package/es/utils/scopeTab.js.map +0 -1
  81. package/es/utils/tabbable.js +0 -43
  82. package/es/utils/tabbable.js.map +0 -1
  83. package/styled-components/cjs/hooks/useFocusTrap.js +0 -95
  84. package/styled-components/cjs/utils/focusManager.js +0 -60
  85. package/styled-components/cjs/utils/scopeTab.js +0 -35
  86. package/styled-components/cjs/utils/tabbable.js +0 -46
  87. package/styled-components/cjs/utils/useFocusTrap.js +0 -95
  88. package/styled-components/es/hooks/useFocusTrap.js +0 -90
  89. package/styled-components/es/utils/focusManager.js +0 -55
  90. package/styled-components/es/utils/scopeTab.js +0 -30
  91. package/styled-components/es/utils/tabbable.js +0 -40
  92. package/styled-components/es/utils/useFocusTrap.js +0 -90
  93. package/types/hooks/useFocusTrap.d.ts +0 -6
  94. package/types/hooks/useFocusTrap.d.ts.map +0 -1
  95. package/types/utils/focusManager.d.ts +0 -15
  96. package/types/utils/focusManager.d.ts.map +0 -1
  97. package/types/utils/scopeTab.d.ts +0 -7
  98. package/types/utils/scopeTab.d.ts.map +0 -1
  99. package/types/utils/tabbable.d.ts +0 -6
  100. package/types/utils/tabbable.d.ts.map +0 -1
  101. package/types/utils/useFocusTrap.d.ts +0 -6
  102. package/types/utils/useFocusTrap.d.ts.map +0 -1
@@ -1,4 +1,4 @@
1
- import React, { useCallback, useRef, useState } from 'react';
1
+ import React, { useState } from 'react';
2
2
  import styled from 'styled-components';
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,114 +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
- <PopupProvider>
286
- <Button view="default" text="Открыть новое модальное окно" onClick={() => setIsOpen(!isOpen)} />
287
- <StyledModalAnimation
288
- id="modal"
289
- frame="theme-root"
290
- withAnimation
291
- onClose={() => setIsOpen(false)}
292
- isOpen={isOpen}
293
- placement={placement}
294
- offset={[offsetX, offsetY]}
295
- initialFocusRef={ref}
296
- {...rest}
297
- >
298
- <Content>
299
- <TextField value="Text" onChange={() => {}} />
300
- <TextField ref={ref} value="Text2" onChange={() => {}} />
301
- <Button text="Закрыть" onClick={close} />
302
- </Content>
303
- </StyledModalAnimation>
304
- </PopupProvider>
305
- </SSRProvider>
306
- );
307
- };
308
-
309
- export const ModalBottomAnimation: StoryObj<StoryModalProps> = {
310
- args: {
311
- placement: 'bottom',
312
- withAnimation: true,
313
- withBlur: false,
314
- closeOnEsc: true,
315
- closeOnOverlayClick: true,
316
- offsetX: 0,
317
- offsetY: 0,
318
- },
319
- render: (args) => <StoryModalAnimationDemo {...args} />,
320
- };
@@ -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");
@@ -23,6 +23,7 @@ export var tokens = {
23
23
  accordionItemFocus: '--plasma-accordion-item-focus',
24
24
  accordionItemBorder: '--plasma-accordion-item-border',
25
25
  accordionItemBorderBottom: '--plasma-accordion-item-border-bottom',
26
+ accordionItemIconColor: '--plasma-accordion-item-color-icon',
26
27
  accordionItemTitleColor: '--plasma-accordion-item-title-color',
27
28
  accordionItemTitleFontFamily: '--plasma-accordion-item-title-font-family',
28
29
  accordionItemTitleFontSize: '--plasma-accordion-item-title-font-size',
@@ -33,10 +33,10 @@ export var StyledAccordionBody = /*#__PURE__*/styled.div.withConfig({
33
33
  })(["color:var(", ");font-family:var(", ");font-size:var(", ");font-weight:var(", ");font-style:var(", ");letter-spacing:var(", ");line-height:var(", ");overflow:hidden;padding-right:var(", ");padding-left:var(", ");text-align:left;"], tokens.accordionItemTextColor, tokens.accordionItemTextFontFamily, tokens.accordionItemTextFontSize, tokens.accordionItemTextFontWeight, tokens.accordionItemTextFontStyle, tokens.accordionItemTextLetterSpacing, tokens.accordionItemTextLineHeight, tokens.accordionItemPaddingHorizontal, tokens.accordionItemPaddingHorizontalLeft);
34
34
  export var StyledArrow = /*#__PURE__*/styled(IconChevronDownFill).withConfig({
35
35
  componentId: "plasma-new-hope__sc-20ij9z-8"
36
- })(["pointer-events:none;user-select:none;color:var(", ");"], tokens.accordionItemTextColor);
36
+ })(["pointer-events:none;user-select:none;color:var(", ");"], tokens.accordionItemIconColor);
37
37
  export var StyledMinus = /*#__PURE__*/styled(IconMinus).withConfig({
38
38
  componentId: "plasma-new-hope__sc-20ij9z-9"
39
- })(["pointer-events:none;user-select:none;color:var(", ");display:flex;align-items:center;position:absolute;top:0;left:0;&.", "{transition:0.2s;transform:rotate(90deg);}&.", "{transition:0.2s;transform:rotate(0deg);}"], tokens.accordionItemTextColor, classes.accordionPlusAnimationElement, classes.accordionItemShowBody);
39
+ })(["pointer-events:none;user-select:none;color:var(", ");display:flex;align-items:center;position:absolute;top:0;left:0;&.", "{transition:0.2s;transform:rotate(90deg);}&.", "{transition:0.2s;transform:rotate(0deg);}"], tokens.accordionItemIconColor, classes.accordionPlusAnimationElement, classes.accordionItemShowBody);
40
40
  export var StyledPlus = /*#__PURE__*/styled.div.withConfig({
41
41
  componentId: "plasma-new-hope__sc-20ij9z-10"
42
42
  })(["position:relative;height:1rem;display:flex;align-items:center;justify-content:center;width:1rem;"]);
@@ -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();
@@ -7,8 +7,8 @@ export var config = {
7
7
  },
8
8
  variations: {
9
9
  view: {
10
- "default": /*#__PURE__*/css(["", ":0.125rem;", ":20rem;", ":var(", ") var(", ");", ":var(--surface-solid-card);", ":var(--text-primary);", ":var(--text-primary);", ":var(--surface-accent);", ":var(--surface-clear);", ":none;", ":0;", ":var(", ");"], accordionTokens.accordionGap, accordionTokens.accordionWidth, accordionTokens.accordionItemPadding, accordionTokens.accordionItemPaddingVertical, accordionTokens.accordionItemPaddingHorizontal, accordionTokens.accordionItemBackground, accordionTokens.accordionItemTitleColor, accordionTokens.accordionItemTextColor, accordionTokens.accordionItemFocus, accordionTokens.accordionBackground, accordionTokens.accordionItemBorder, accordionTokens.accordionItemBorderBottom, accordionTokens.accordionItemPaddingHorizontalLeft, accordionTokens.accordionItemPaddingHorizontal),
11
- clear: /*#__PURE__*/css(["", ":0;", ":20rem;", ":var(", ") 0rem;", ":var(--surface-clear);", ":var(--text-primary);", ":var(--text-primary);", ":var(--surface-accent);", ":0rem !important;", ":var(--surface-clear);", ":none;", ":0.125rem solid var(--surface-solid-tertiary);", ":0;"], accordionTokens.accordionGap, accordionTokens.accordionWidth, accordionTokens.accordionItemPadding, accordionTokens.accordionItemPaddingVertical, accordionTokens.accordionItemBackground, accordionTokens.accordionItemTitleColor, accordionTokens.accordionItemTextColor, accordionTokens.accordionItemFocus, accordionTokens.accordionItemBorderRadius, accordionTokens.accordionBackground, accordionTokens.accordionItemBorder, accordionTokens.accordionItemBorderBottom, accordionTokens.accordionItemPaddingHorizontalLeft)
10
+ "default": /*#__PURE__*/css(["", ":0.125rem;", ":20rem;", ":var(", ") var(", ");", ":var(--surface-solid-card);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-primary);", ":var(--surface-accent);", ":var(--surface-clear);", ":none;", ":0;", ":var(", ");"], accordionTokens.accordionGap, accordionTokens.accordionWidth, accordionTokens.accordionItemPadding, accordionTokens.accordionItemPaddingVertical, accordionTokens.accordionItemPaddingHorizontal, accordionTokens.accordionItemBackground, accordionTokens.accordionItemTitleColor, accordionTokens.accordionItemTextColor, accordionTokens.accordionItemIconColor, accordionTokens.accordionItemFocus, accordionTokens.accordionBackground, accordionTokens.accordionItemBorder, accordionTokens.accordionItemBorderBottom, accordionTokens.accordionItemPaddingHorizontalLeft, accordionTokens.accordionItemPaddingHorizontal),
11
+ clear: /*#__PURE__*/css(["", ":0;", ":20rem;", ":var(", ") 0rem;", ":var(--surface-clear);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-primary);", ":var(--surface-accent);", ":0rem !important;", ":var(--surface-clear);", ":none;", ":0.125rem solid var(--surface-solid-tertiary);", ":0;"], accordionTokens.accordionGap, accordionTokens.accordionWidth, accordionTokens.accordionItemPadding, accordionTokens.accordionItemPaddingVertical, accordionTokens.accordionItemBackground, accordionTokens.accordionItemTitleColor, accordionTokens.accordionItemTextColor, accordionTokens.accordionItemIconColor, accordionTokens.accordionItemFocus, accordionTokens.accordionItemBorderRadius, accordionTokens.accordionBackground, accordionTokens.accordionItemBorder, accordionTokens.accordionItemBorderBottom, accordionTokens.accordionItemPaddingHorizontalLeft)
12
12
  },
13
13
  size: {
14
14
  l: /*#__PURE__*/css(["", ":1.0625rem;", ":1.25rem;", ":0.5rem;", ":0.875rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], accordionTokens.accordionItemPaddingVertical, accordionTokens.accordionItemPaddingHorizontal, accordionTokens.accordionItemGap, accordionTokens.accordionItemBorderRadius, accordionTokens.accordionItemTitleFontFamily, accordionTokens.accordionItemTitleFontSize, accordionTokens.accordionItemTitleFontStyle, accordionTokens.accordionItemTitleFontWeight, accordionTokens.accordionItemTitleLetterSpacing, accordionTokens.accordionItemTitleLineHeight, accordionTokens.accordionItemTextFontFamily, accordionTokens.accordionItemTextFontSize, accordionTokens.accordionItemTextFontStyle, accordionTokens.accordionItemTextFontWeight, accordionTokens.accordionItemTextLetterSpacing, accordionTokens.accordionItemTextLineHeight),
@@ -1,4 +1,4 @@
1
- import React, { useCallback, useRef, useState } from 'react';
1
+ import React, { useState } from 'react';
2
2
  import styled from 'styled-components';
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,114 +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
- <PopupProvider>
286
- <Button view="default" text="Открыть новое модальное окно" onClick={() => setIsOpen(!isOpen)} />
287
- <StyledModalAnimation
288
- id="modal"
289
- frame="theme-root"
290
- withAnimation
291
- onClose={() => setIsOpen(false)}
292
- isOpen={isOpen}
293
- placement={placement}
294
- offset={[offsetX, offsetY]}
295
- initialFocusRef={ref}
296
- {...rest}
297
- >
298
- <Content>
299
- <TextField value="Text" onChange={() => {}} />
300
- <TextField ref={ref} value="Text2" onChange={() => {}} />
301
- <Button text="Закрыть" onClick={close} />
302
- </Content>
303
- </StyledModalAnimation>
304
- </PopupProvider>
305
- </SSRProvider>
306
- );
307
- };
308
-
309
- export const ModalBottomAnimation: StoryObj<StoryModalProps> = {
310
- args: {
311
- placement: 'bottom',
312
- withAnimation: true,
313
- withBlur: false,
314
- closeOnEsc: true,
315
- closeOnOverlayClick: true,
316
- offsetX: 0,
317
- offsetY: 0,
318
- },
319
- render: (args) => <StoryModalAnimationDemo {...args} />,
320
- };
@@ -7,8 +7,8 @@ export var config = {
7
7
  },
8
8
  variations: {
9
9
  view: {
10
- "default": /*#__PURE__*/css(["", ":0.125rem;", ":20rem;", ":var(", ") var(", ");", ":var(--surface-solid-card);", ":var(--text-primary);", ":var(--text-primary);", ":var(--surface-accent);", ":var(--surface-clear);", ":none;", ":0;", ":var(", ");"], accordionTokens.accordionGap, accordionTokens.accordionWidth, accordionTokens.accordionItemPadding, accordionTokens.accordionItemPaddingVertical, accordionTokens.accordionItemPaddingHorizontal, accordionTokens.accordionItemBackground, accordionTokens.accordionItemTitleColor, accordionTokens.accordionItemTextColor, accordionTokens.accordionItemFocus, accordionTokens.accordionBackground, accordionTokens.accordionItemBorder, accordionTokens.accordionItemBorderBottom, accordionTokens.accordionItemPaddingHorizontalLeft, accordionTokens.accordionItemPaddingHorizontal),
11
- clear: /*#__PURE__*/css(["", ":0.125rem;", ":20rem;", ":var(", ") 0rem;", ":var(--surface-clear);", ":var(--text-primary);", ":var(--text-primary);", ":var(--surface-accent);", ":0rem !important;", ":var(--surface-clear);", ":none;", ":0.125rem solid var(--surface-solid-tertiary);", ":0;"], accordionTokens.accordionGap, accordionTokens.accordionWidth, accordionTokens.accordionItemPadding, accordionTokens.accordionItemPaddingVertical, accordionTokens.accordionItemBackground, accordionTokens.accordionItemTitleColor, accordionTokens.accordionItemTextColor, accordionTokens.accordionItemFocus, accordionTokens.accordionItemBorderRadius, accordionTokens.accordionBackground, accordionTokens.accordionItemBorder, accordionTokens.accordionItemBorderBottom, accordionTokens.accordionItemPaddingHorizontalLeft)
10
+ "default": /*#__PURE__*/css(["", ":0.125rem;", ":20rem;", ":var(", ") var(", ");", ":var(--surface-solid-card);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-primary);", ":var(--surface-accent);", ":var(--surface-clear);", ":none;", ":0;", ":var(", ");"], accordionTokens.accordionGap, accordionTokens.accordionWidth, accordionTokens.accordionItemPadding, accordionTokens.accordionItemPaddingVertical, accordionTokens.accordionItemPaddingHorizontal, accordionTokens.accordionItemBackground, accordionTokens.accordionItemTitleColor, accordionTokens.accordionItemTextColor, accordionTokens.accordionItemIconColor, accordionTokens.accordionItemFocus, accordionTokens.accordionBackground, accordionTokens.accordionItemBorder, accordionTokens.accordionItemBorderBottom, accordionTokens.accordionItemPaddingHorizontalLeft, accordionTokens.accordionItemPaddingHorizontal),
11
+ clear: /*#__PURE__*/css(["", ":0.125rem;", ":20rem;", ":var(", ") 0rem;", ":var(--surface-clear);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-primary);", ":var(--surface-accent);", ":0rem !important;", ":var(--surface-clear);", ":none;", ":0.125rem solid var(--surface-solid-tertiary);", ":0;"], accordionTokens.accordionGap, accordionTokens.accordionWidth, accordionTokens.accordionItemPadding, accordionTokens.accordionItemPaddingVertical, accordionTokens.accordionItemBackground, accordionTokens.accordionItemTitleColor, accordionTokens.accordionItemTextColor, accordionTokens.accordionItemIconColor, accordionTokens.accordionItemFocus, accordionTokens.accordionItemBorderRadius, accordionTokens.accordionBackground, accordionTokens.accordionItemBorder, accordionTokens.accordionItemBorderBottom, accordionTokens.accordionItemPaddingHorizontalLeft)
12
12
  },
13
13
  size: {
14
14
  l: /*#__PURE__*/css(["", ":1.0625rem;", ":1.25rem;", ":0.5rem;", ":0.875rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], accordionTokens.accordionItemPaddingVertical, accordionTokens.accordionItemPaddingHorizontal, accordionTokens.accordionItemGap, accordionTokens.accordionItemBorderRadius, accordionTokens.accordionItemTitleFontFamily, accordionTokens.accordionItemTitleFontSize, accordionTokens.accordionItemTitleFontStyle, accordionTokens.accordionItemTitleFontWeight, accordionTokens.accordionItemTitleLetterSpacing, accordionTokens.accordionItemTitleLineHeight, accordionTokens.accordionItemTextFontFamily, accordionTokens.accordionItemTextFontSize, accordionTokens.accordionItemTextFontStyle, accordionTokens.accordionItemTextFontWeight, accordionTokens.accordionItemTextLetterSpacing, accordionTokens.accordionItemTextLineHeight),
@@ -1,4 +1,4 @@
1
- import React, { useCallback, useRef, useState } from 'react';
1
+ import React, { useState } from 'react';
2
2
  import styled from 'styled-components';
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,114 +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
- <PopupProvider>
286
- <Button view="default" text="Открыть новое модальное окно" onClick={() => setIsOpen(!isOpen)} />
287
- <StyledModalAnimation
288
- id="modal"
289
- frame="theme-root"
290
- withAnimation
291
- onClose={() => setIsOpen(false)}
292
- isOpen={isOpen}
293
- placement={placement}
294
- offset={[offsetX, offsetY]}
295
- initialFocusRef={ref}
296
- {...rest}
297
- >
298
- <Content>
299
- <TextField value="Text" onChange={() => {}} />
300
- <TextField ref={ref} value="Text2" onChange={() => {}} />
301
- <Button text="Закрыть" onClick={close} />
302
- </Content>
303
- </StyledModalAnimation>
304
- </PopupProvider>
305
- </SSRProvider>
306
- );
307
- };
308
-
309
- export const ModalBottomAnimation: StoryObj<StoryModalProps> = {
310
- args: {
311
- placement: 'bottom',
312
- withAnimation: true,
313
- withBlur: false,
314
- closeOnEsc: true,
315
- closeOnOverlayClick: true,
316
- offsetX: 0,
317
- offsetY: 0,
318
- },
319
- render: (args) => <StoryModalAnimationDemo {...args} />,
320
- };
@@ -1,5 +1,4 @@
1
1
  export { useUniqId } from './useUniqId';
2
- export { useFocusTrap } from './useFocusTrap';
3
2
  export { usePreviousValue } from './usePreviousValue';
4
3
  export { useForceUpdate } from './useForceUpdate';
5
4
  export { useDidMountEffect } from './useDidMountEffect';
@@ -23,6 +23,7 @@ export declare const tokens: {
23
23
  accordionItemFocus: string;
24
24
  accordionItemBorder: string;
25
25
  accordionItemBorderBottom: string;
26
+ accordionItemIconColor: string;
26
27
  accordionItemTitleColor: string;
27
28
  accordionItemTitleFontFamily: string;
28
29
  accordionItemTitleFontSize: string;
@@ -1 +1 @@
1
- {"version":3,"file":"Accordion.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;;;;;CAUnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BlB,CAAC"}
1
+ {"version":3,"file":"Accordion.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;;;;;CAUnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgClB,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAGhE,OAAO,EAAE,SAAS,EAAa,MAAM,eAAe,CAAC;AAOrD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAQ3C;;;GAGG;AACH,eAAO,MAAM,SAAS,SAAU,UAAU,cAAc,EAAE,UAAU,CAAC,sFAiFhE,CAAC;AAEN,eAAO,MAAM,WAAW;;;mBAnFQ,UAAU,cAAc,EAAE,UAAU,CAAC;;;;;;;;;;CAgGpE,CAAC"}
1
+ {"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAGhE,OAAO,EAAE,SAAS,EAAa,MAAM,eAAe,CAAC;AAMrD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAQ3C;;;GAGG;AACH,eAAO,MAAM,SAAS,SAAU,UAAU,cAAc,EAAE,UAAU,CAAC,sFAiFhE,CAAC;AAEN,eAAO,MAAM,WAAW;;;mBAnFQ,UAAU,cAAc,EAAE,UAAU,CAAC;;;;;;;;;;CAgGpE,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"Accordion.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/Accordion/Accordion.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;CAyHlB,CAAC"}
1
+ {"version":3,"file":"Accordion.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/Accordion/Accordion.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;CA2HlB,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"Accordion.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_web/components/Accordion/Accordion.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;CA0HlB,CAAC"}
1
+ {"version":3,"file":"Accordion.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_web/components/Accordion/Accordion.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;CA4HlB,CAAC"}
@@ -1,5 +1,4 @@
1
1
  export { useUniqId } from './useUniqId';
2
- export { useFocusTrap } from './useFocusTrap';
3
2
  export { usePreviousValue } from './usePreviousValue';
4
3
  export { useForceUpdate } from './useForceUpdate';
5
4
  export { useDidMountEffect } from './useDidMountEffect';
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC"}
@@ -1,97 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var React = require('react');
6
- var focusManager$1 = require('../utils/focusManager.js');
7
- var tabbable = require('../utils/tabbable.js');
8
- var scopeTab = require('../utils/scopeTab.js');
9
-
10
- // Находим элемент для фокуса
11
- var getFocusElement = function getFocusElement(node, firstFocusSelector) {
12
- var focusElement = null;
13
- if (firstFocusSelector) {
14
- if (typeof firstFocusSelector === 'string') {
15
- focusElement = node.querySelector(firstFocusSelector);
16
- } else if (firstFocusSelector.current) {
17
- focusElement = firstFocusSelector.current;
18
- }
19
- }
20
- if (!focusElement) {
21
- var children = Array.from(node.querySelectorAll(tabbable.focusSelector));
22
- focusElement = children.find(function (el) {
23
- return tabbable.isTabble(el);
24
- }) || null;
25
- }
26
-
27
- // Если ничего не нашлось, то может ли сама нода быть под фокусом
28
- if (!focusElement && tabbable.isFocusable(node)) {
29
- focusElement = node;
30
- }
31
- return focusElement;
32
- };
33
- var processNode = function processNode(node, firstFocusSelector, ref) {
34
- if (ref !== null && ref !== void 0 && ref.current) {
35
- ref.current.removeEventListener('animationend', function () {
36
- processNode(node, firstFocusSelector, ref);
37
- });
38
- }
39
- var focusElement = getFocusElement(node, firstFocusSelector);
40
- if (focusElement) {
41
- focusElement.focus();
42
- }
43
- };
44
- var focusManager = /*#__PURE__*/new focusManager$1.FocusManager();
45
-
46
- /**
47
- * Захватывает фокус внутри DOM node.
48
- * */
49
- var useFocusTrap = function useFocusTrap() {
50
- var active = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
51
- var firstFocusSelector = arguments.length > 1 ? arguments[1] : undefined;
52
- var focusAfterNode = arguments.length > 2 ? arguments[2] : undefined;
53
- var focusAfterAnimation = arguments.length > 3 ? arguments[3] : undefined;
54
- var ref = React.useRef();
55
- var setRef = React.useCallback(function (node) {
56
- if (ref.current) {
57
- focusManager.teardownScopedFocus();
58
- focusManager.returnFocus();
59
- }
60
- if (active && node) {
61
- focusManager.setupScopedFocus(node);
62
- focusManager.markForFocusAfter(focusAfterNode);
63
-
64
- // Delay processing the HTML node by a frame. This ensures focus is assigned correctly.
65
- setTimeout(function () {
66
- if (ref !== null && ref !== void 0 && ref.current && node.ownerDocument && focusAfterAnimation) {
67
- ref.current.addEventListener('animationend', function () {
68
- processNode(node, firstFocusSelector, ref);
69
- });
70
- } else if (node.ownerDocument) {
71
- processNode(node, firstFocusSelector);
72
- }
73
- });
74
- ref.current = node;
75
- return;
76
- }
77
- ref.current = null;
78
- }, [active, firstFocusSelector]);
79
- React.useEffect(function () {
80
- if (!active) {
81
- return;
82
- }
83
- var handleKeyDown = function handleKeyDown(event) {
84
- if (event.key === 'Tab' && ref.current) {
85
- scopeTab.scopeTab(ref.current, event);
86
- }
87
- };
88
- document.addEventListener('keydown', handleKeyDown);
89
- return function () {
90
- document.removeEventListener('keydown', handleKeyDown);
91
- };
92
- }, [active]);
93
- return setRef;
94
- };
95
-
96
- exports.useFocusTrap = useFocusTrap;
97
- //# sourceMappingURL=useFocusTrap.js.map