@alfalab/core-components-modal 4.0.7 → 5.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (180) hide show
  1. package/CHANGELOG.md +40 -0
  2. package/dist/Component.desktop.d.ts +4 -2
  3. package/dist/Component.desktop.js +11 -10
  4. package/dist/Component.mobile.d.ts +1 -1
  5. package/dist/Component.mobile.js +8 -15
  6. package/dist/Component.responsive.d.ts +4 -4
  7. package/dist/Component.responsive.js +9 -7
  8. package/dist/components/closer/Component.d.ts +15 -3
  9. package/dist/components/closer/Component.js +13 -5
  10. package/dist/components/closer/index.css +17 -25
  11. package/dist/components/content/Component.d.ts +1 -3
  12. package/dist/components/content/Component.desktop.d.ts +2 -5
  13. package/dist/components/content/Component.desktop.js +4 -4
  14. package/dist/components/content/Component.js +4 -1
  15. package/dist/components/content/Component.mobile.js +8 -4
  16. package/dist/components/content/desktop.css +18 -595
  17. package/dist/components/content/index.css +28 -0
  18. package/dist/components/content/mobile.css +9 -582
  19. package/dist/components/footer/Component.d.ts +1 -3
  20. package/dist/components/footer/Component.desktop.d.ts +2 -5
  21. package/dist/components/footer/Component.desktop.js +7 -4
  22. package/dist/components/footer/Component.js +5 -2
  23. package/dist/components/footer/Component.mobile.js +11 -4
  24. package/dist/components/footer/desktop.css +18 -602
  25. package/dist/components/footer/index.css +41 -0
  26. package/dist/components/footer/layout.css +28 -28
  27. package/dist/components/footer/mobile.css +7 -591
  28. package/dist/components/header/Component.d.ts +23 -5
  29. package/dist/components/header/Component.desktop.d.ts +5 -4
  30. package/dist/components/header/Component.desktop.js +12 -6
  31. package/dist/components/header/Component.js +13 -9
  32. package/dist/components/header/Component.mobile.d.ts +6 -1
  33. package/dist/components/header/Component.mobile.js +16 -6
  34. package/dist/components/header/desktop.css +53 -622
  35. package/dist/components/header/index.css +85 -0
  36. package/dist/components/header/mobile.css +17 -605
  37. package/dist/cssm/Component.desktop.d.ts +4 -2
  38. package/dist/cssm/Component.desktop.js +11 -7
  39. package/dist/cssm/Component.mobile.d.ts +1 -1
  40. package/dist/cssm/Component.mobile.js +8 -12
  41. package/dist/cssm/Component.responsive.d.ts +4 -4
  42. package/dist/cssm/Component.responsive.js +10 -5
  43. package/dist/cssm/components/closer/Component.d.ts +15 -3
  44. package/dist/cssm/components/closer/Component.js +11 -3
  45. package/dist/cssm/components/closer/index.module.css +15 -23
  46. package/dist/cssm/components/content/Component.d.ts +1 -3
  47. package/dist/cssm/components/content/Component.desktop.d.ts +2 -5
  48. package/dist/cssm/components/content/Component.desktop.js +3 -2
  49. package/dist/cssm/components/content/Component.js +5 -3
  50. package/dist/cssm/components/content/Component.mobile.js +7 -2
  51. package/dist/cssm/components/content/desktop.module.css +14 -21
  52. package/dist/cssm/components/content/index.module.css +4 -16
  53. package/dist/cssm/components/content/mobile.module.css +7 -9
  54. package/dist/cssm/components/footer/Component.d.ts +1 -3
  55. package/dist/cssm/components/footer/Component.desktop.d.ts +2 -5
  56. package/dist/cssm/components/footer/Component.desktop.js +6 -2
  57. package/dist/cssm/components/footer/Component.js +6 -4
  58. package/dist/cssm/components/footer/Component.mobile.js +10 -2
  59. package/dist/cssm/components/footer/desktop.module.css +15 -25
  60. package/dist/cssm/components/footer/index.module.css +8 -12
  61. package/dist/cssm/components/footer/layout.module.css +3 -3
  62. package/dist/cssm/components/footer/mobile.module.css +4 -12
  63. package/dist/cssm/components/header/Component.d.ts +23 -5
  64. package/dist/cssm/components/header/Component.desktop.d.ts +5 -4
  65. package/dist/cssm/components/header/Component.desktop.js +12 -5
  66. package/dist/cssm/components/header/Component.js +15 -13
  67. package/dist/cssm/components/header/Component.mobile.d.ts +6 -1
  68. package/dist/cssm/components/header/Component.mobile.js +16 -5
  69. package/dist/cssm/components/header/desktop.module.css +51 -35
  70. package/dist/cssm/components/header/index.module.css +45 -24
  71. package/dist/cssm/components/header/mobile.module.css +21 -22
  72. package/dist/cssm/desktop.js +6 -2
  73. package/dist/cssm/desktop.module.css +10 -6
  74. package/dist/cssm/index.js +8 -3
  75. package/dist/cssm/mobile.js +7 -3
  76. package/dist/cssm/mobile.module.css +3 -3
  77. package/dist/cssm/responsive.js +8 -3
  78. package/dist/cssm/vars.css +3 -3
  79. package/dist/desktop.css +18 -14
  80. package/dist/desktop.js +5 -4
  81. package/dist/esm/Component.desktop.d.ts +4 -2
  82. package/dist/esm/Component.desktop.js +11 -10
  83. package/dist/esm/Component.mobile.d.ts +1 -1
  84. package/dist/esm/Component.mobile.js +9 -16
  85. package/dist/esm/Component.responsive.d.ts +4 -4
  86. package/dist/esm/Component.responsive.js +9 -7
  87. package/dist/esm/components/closer/Component.d.ts +15 -3
  88. package/dist/esm/components/closer/Component.js +13 -5
  89. package/dist/esm/components/closer/index.css +17 -25
  90. package/dist/esm/components/content/Component.d.ts +1 -3
  91. package/dist/esm/components/content/Component.desktop.d.ts +2 -5
  92. package/dist/esm/components/content/Component.desktop.js +4 -4
  93. package/dist/esm/components/content/Component.js +4 -1
  94. package/dist/esm/components/content/Component.mobile.js +7 -4
  95. package/dist/esm/components/content/desktop.css +18 -595
  96. package/dist/esm/components/content/index.css +28 -0
  97. package/dist/esm/components/content/mobile.css +9 -582
  98. package/dist/esm/components/footer/Component.d.ts +1 -3
  99. package/dist/esm/components/footer/Component.desktop.d.ts +2 -5
  100. package/dist/esm/components/footer/Component.desktop.js +7 -4
  101. package/dist/esm/components/footer/Component.js +5 -2
  102. package/dist/esm/components/footer/Component.mobile.js +10 -4
  103. package/dist/esm/components/footer/desktop.css +18 -602
  104. package/dist/esm/components/footer/index.css +41 -0
  105. package/dist/esm/components/footer/layout.css +28 -28
  106. package/dist/esm/components/footer/mobile.css +7 -591
  107. package/dist/esm/components/header/Component.d.ts +23 -5
  108. package/dist/esm/components/header/Component.desktop.d.ts +5 -4
  109. package/dist/esm/components/header/Component.desktop.js +12 -6
  110. package/dist/esm/components/header/Component.js +13 -9
  111. package/dist/esm/components/header/Component.mobile.d.ts +6 -1
  112. package/dist/esm/components/header/Component.mobile.js +14 -6
  113. package/dist/esm/components/header/desktop.css +53 -622
  114. package/dist/esm/components/header/index.css +85 -0
  115. package/dist/esm/components/header/mobile.css +17 -605
  116. package/dist/esm/desktop.css +18 -14
  117. package/dist/esm/desktop.js +5 -4
  118. package/dist/esm/index.js +7 -5
  119. package/dist/esm/mobile.css +5 -5
  120. package/dist/esm/mobile.js +6 -5
  121. package/dist/esm/responsive.js +7 -5
  122. package/dist/esm/transitions.css +8 -8
  123. package/dist/esm/transitions.module-b6b7149e.js +4 -0
  124. package/dist/esm/{tslib.es6-327e6722.d.ts → tslib.es6-c25aba00.d.ts} +0 -0
  125. package/dist/esm/{tslib.es6-327e6722.js → tslib.es6-c25aba00.js} +0 -0
  126. package/dist/index.js +7 -5
  127. package/dist/mobile.css +5 -5
  128. package/dist/mobile.js +6 -5
  129. package/dist/modern/Component.desktop.d.ts +4 -2
  130. package/dist/modern/Component.desktop.js +11 -10
  131. package/dist/modern/Component.mobile.d.ts +1 -1
  132. package/dist/modern/Component.mobile.js +8 -16
  133. package/dist/modern/Component.responsive.d.ts +4 -4
  134. package/dist/modern/Component.responsive.js +8 -6
  135. package/dist/modern/components/closer/Component.d.ts +15 -3
  136. package/dist/modern/components/closer/Component.js +11 -4
  137. package/dist/modern/components/closer/index.css +17 -25
  138. package/dist/modern/components/content/Component.d.ts +1 -3
  139. package/dist/modern/components/content/Component.desktop.d.ts +2 -5
  140. package/dist/modern/components/content/Component.desktop.js +2 -2
  141. package/dist/modern/components/content/Component.js +4 -1
  142. package/dist/modern/components/content/Component.mobile.js +3 -3
  143. package/dist/modern/components/content/desktop.css +18 -595
  144. package/dist/modern/components/content/index.css +28 -0
  145. package/dist/modern/components/content/mobile.css +9 -582
  146. package/dist/modern/components/footer/Component.d.ts +1 -3
  147. package/dist/modern/components/footer/Component.desktop.d.ts +2 -5
  148. package/dist/modern/components/footer/Component.desktop.js +4 -2
  149. package/dist/modern/components/footer/Component.js +5 -2
  150. package/dist/modern/components/footer/Component.mobile.js +5 -3
  151. package/dist/modern/components/footer/desktop.css +18 -602
  152. package/dist/modern/components/footer/index.css +41 -0
  153. package/dist/modern/components/footer/layout.css +28 -28
  154. package/dist/modern/components/footer/mobile.css +7 -591
  155. package/dist/modern/components/header/Component.d.ts +23 -5
  156. package/dist/modern/components/header/Component.desktop.d.ts +5 -4
  157. package/dist/modern/components/header/Component.desktop.js +11 -4
  158. package/dist/modern/components/header/Component.js +11 -6
  159. package/dist/modern/components/header/Component.mobile.d.ts +6 -1
  160. package/dist/modern/components/header/Component.mobile.js +9 -5
  161. package/dist/modern/components/header/desktop.css +53 -622
  162. package/dist/modern/components/header/index.css +85 -0
  163. package/dist/modern/components/header/mobile.css +17 -605
  164. package/dist/modern/desktop.css +18 -14
  165. package/dist/modern/desktop.js +4 -3
  166. package/dist/modern/index.js +6 -4
  167. package/dist/modern/mobile.css +5 -5
  168. package/dist/modern/mobile.js +5 -4
  169. package/dist/modern/responsive.js +6 -4
  170. package/dist/modern/transitions.css +8 -8
  171. package/dist/modern/transitions.module-b6b7149e.js +4 -0
  172. package/dist/responsive.js +7 -5
  173. package/dist/transitions.css +8 -8
  174. package/dist/transitions.module-0cb336a7.js +6 -0
  175. package/dist/{tslib.es6-d1b7fb9e.d.ts → tslib.es6-e71a96bd.d.ts} +0 -0
  176. package/dist/{tslib.es6-d1b7fb9e.js → tslib.es6-e71a96bd.js} +0 -0
  177. package/package.json +4 -3
  178. package/dist/esm/transitions.module-c8dac06a.js +0 -4
  179. package/dist/modern/transitions.module-c8dac06a.js +0 -4
  180. package/dist/transitions.module-9c7cb980.js +0 -6
package/CHANGELOG.md CHANGED
@@ -3,6 +3,46 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [5.0.0](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-modal@4.2.0...@alfalab/core-components-modal@5.0.0) (2022-03-24)
7
+
8
+
9
+ ### Features
10
+
11
+ * **modal:** update styles ([#1024](https://github.com/alfa-laboratory/core-components/issues/1024)) ([fdf2cdc](https://github.com/alfa-laboratory/core-components/commit/fdf2cdca9f785b27cd5d3998245a34d42e1240d1))
12
+
13
+
14
+ ### BREAKING CHANGES
15
+
16
+ * **modal:** Большое обновление стилей и темизации
17
+
18
+ * fix(modal): remove unused align
19
+
20
+
21
+
22
+
23
+
24
+ # [4.2.0](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-modal@4.1.0...@alfalab/core-components-modal@4.2.0) (2022-03-04)
25
+
26
+
27
+ ### Features
28
+
29
+ * **modal:** mobile header ([#1018](https://github.com/alfa-laboratory/core-components/issues/1018)) ([54b879f](https://github.com/alfa-laboratory/core-components/commit/54b879f500d1124a6956d3d5a57349c856a09904))
30
+
31
+
32
+
33
+
34
+
35
+ # [4.1.0](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-modal@4.0.7...@alfalab/core-components-modal@4.1.0) (2022-03-01)
36
+
37
+
38
+ ### Features
39
+
40
+ * Исправить импорты в сторях. ([#998](https://github.com/alfa-laboratory/core-components/issues/998)) ([e6a654a](https://github.com/alfa-laboratory/core-components/commit/e6a654a0599451c7d149484cb61d8067eed083b7))
41
+
42
+
43
+
44
+
45
+
6
46
  ## [4.0.7](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-modal@4.0.6...@alfalab/core-components-modal@4.0.7) (2022-02-15)
7
47
 
8
48
  **Note:** Version bump only for package @alfalab/core-components-modal
@@ -6,9 +6,10 @@ type ModalDesktopProps = BaseModalProps & {
6
6
  * Ширина модального окна
7
7
  * @default "m"
8
8
  */
9
- size?: 's' | 'm' | 'l';
9
+ size?: 's' | 'm' | 'l' | 'xl' | 'fullscreen';
10
10
  /**
11
11
  * Растягивает модальное окно на весь экран
12
+ * @deprecated Используйте размер fullscreen
12
13
  */
13
14
  fullscreen?: boolean;
14
15
  /**
@@ -27,9 +28,10 @@ declare const ModalDesktop: React.ForwardRefExoticComponent<BaseModalProps & {
27
28
  * Ширина модального окна
28
29
  * @default "m"
29
30
  */
30
- size?: "s" | "m" | "l" | undefined;
31
+ size?: "s" | "m" | "l" | "xl" | "fullscreen" | undefined;
31
32
  /**
32
33
  * Растягивает модальное окно на весь экран
34
+ * @deprecated Используйте размер fullscreen
33
35
  */
34
36
  fullscreen?: boolean | undefined;
35
37
  /**
@@ -2,21 +2,22 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var tslib_es6 = require('./tslib.es6-d1b7fb9e.js');
5
+ var tslib_es6 = require('./tslib.es6-e71a96bd.js');
6
6
  var React = require('react');
7
7
  var cn = require('classnames');
8
8
  var coreComponentsBaseModal = require('@alfalab/core-components-base-modal');
9
9
  var mergeRefs = require('react-merge-refs');
10
10
  require('./Context.js');
11
- require('@alfalab/core-components-button');
12
- var components_closer_Component = require('./components/closer/Component.js');
13
11
  require('./components/header/Component.js');
12
+ require('@alfalab/core-components-icon-button');
13
+ require('@alfalab/icons-glyph/CrossHeavyMIcon');
14
+ var components_closer_Component = require('./components/closer/Component.js');
14
15
  var components_header_Component_desktop = require('./components/header/Component.desktop.js');
15
16
  require('./components/content/Component.js');
16
17
  var components_content_Component_desktop = require('./components/content/Component.desktop.js');
17
18
  require('./components/footer/Component.js');
18
19
  var components_footer_Component_desktop = require('./components/footer/Component.desktop.js');
19
- var transitions_module = require('./transitions.module-9c7cb980.js');
20
+ var transitions_module = require('./transitions.module-0cb336a7.js');
20
21
 
21
22
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
22
23
 
@@ -24,12 +25,14 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
24
25
  var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
25
26
  var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
26
27
 
27
- var styles = {"wrapper":"modal__wrapper_1tg9k","component":"modal__component_1tg9k","fullscreen":"modal__fullscreen_1tg9k","s":"modal__s_1tg9k","m":"modal__m_1tg9k","l":"modal__l_1tg9k"};
28
+ var styles = {"wrapper":"modal__wrapper_1jm5f","component":"modal__component_1jm5f","fullscreen":"modal__fullscreen_1jm5f","s":"modal__s_1jm5f","m":"modal__m_1jm5f","l":"modal__l_1jm5f","xl":"modal__xl_1jm5f"};
28
29
  require('./desktop.css')
29
30
 
30
31
  var ModalDesktopComponent = React.forwardRef(function (_a, ref) {
31
32
  var _b;
32
33
  var _c = _a.size, size = _c === void 0 ? 's' : _c, fixedPosition = _a.fixedPosition, fullscreen = _a.fullscreen, children = _a.children, className = _a.className, wrapperClassName = _a.wrapperClassName, _d = _a.transitionProps, transitionProps = _d === void 0 ? {} : _d, restProps = tslib_es6.__rest(_a, ["size", "fixedPosition", "fullscreen", "children", "className", "wrapperClassName", "transitionProps"]);
34
+ // TODO: удалить, после удаления пропсы fullscreen
35
+ var componentSize = fullscreen ? 'fullscreen' : size;
33
36
  var modalRef = React.useRef(null);
34
37
  var handleEntered = React.useCallback(function (node, isAppearing) {
35
38
  if (fixedPosition && modalRef.current) {
@@ -44,11 +47,9 @@ var ModalDesktopComponent = React.forwardRef(function (_a, ref) {
44
47
  }
45
48
  }, [fixedPosition, transitionProps]);
46
49
  return (React__default['default'].createElement(coreComponentsBaseModal.BaseModal, tslib_es6.__assign({}, restProps, { ref: mergeRefs__default['default']([ref, modalRef]), wrapperClassName: cn__default['default'](styles.wrapper, wrapperClassName, (_b = {},
47
- _b[styles.fullscreen] = fullscreen,
48
- _b)), className: cn__default['default'](styles.component, className, !fullscreen && styles[size]), backdropProps: tslib_es6.__assign(tslib_es6.__assign({}, restProps.backdropProps), { invisible: fullscreen }), transitionProps: tslib_es6.__assign(tslib_es6.__assign({ classNames: transitions_module.transitions }, transitionProps), { onEntered: handleEntered }) }), React__default['default'].Children.map(children, function (child) {
49
- return React.isValidElement(child)
50
- ? React.cloneElement(child, { size: child.props.size || size, fullscreen: fullscreen })
51
- : child;
50
+ _b[styles.fullscreen] = componentSize === 'fullscreen',
51
+ _b)), className: cn__default['default'](styles.component, className, styles[componentSize]), backdropProps: tslib_es6.__assign(tslib_es6.__assign({}, restProps.backdropProps), { invisible: componentSize === 'fullscreen' }), transitionProps: tslib_es6.__assign(tslib_es6.__assign({ classNames: transitions_module.transitions }, transitionProps), { onEntered: handleEntered }) }), React__default['default'].Children.map(children, function (child) {
52
+ return React.isValidElement(child) ? React.cloneElement(child, { size: componentSize }) : child;
52
53
  })));
53
54
  });
54
55
  var ModalDesktop = Object.assign(ModalDesktopComponent, {
@@ -16,7 +16,7 @@ declare const ModalMobile: React.ForwardRefExoticComponent<BaseModalProps & {
16
16
  hasCloser?: boolean | undefined;
17
17
  } & React.RefAttributes<HTMLDivElement>> & {
18
18
  Content: React.FC<import("./components/content/Component").ContentProps>;
19
- Header: React.FC<import("./components/header/Component").HeaderProps>;
19
+ Header: React.FC<import("./components/header/Component.mobile").HeaderMobileProps>;
20
20
  Footer: React.FC<import("./components/footer/Component").FooterProps>;
21
21
  Closer: React.FC<import("./components/closer/Component").CloserProps>;
22
22
  };
@@ -2,18 +2,19 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var tslib_es6 = require('./tslib.es6-d1b7fb9e.js');
5
+ var tslib_es6 = require('./tslib.es6-e71a96bd.js');
6
6
  var React = require('react');
7
7
  var cn = require('classnames');
8
8
  var coreComponentsBaseModal = require('@alfalab/core-components-base-modal');
9
9
  require('./Context.js');
10
- require('@alfalab/core-components-button');
11
- var components_closer_Component = require('./components/closer/Component.js');
12
10
  require('./components/header/Component.js');
11
+ require('@alfalab/core-components-icon-button');
12
+ require('@alfalab/icons-glyph/CrossHeavyMIcon');
13
+ var components_closer_Component = require('./components/closer/Component.js');
13
14
  require('./components/content/Component.js');
14
15
  require('./components/footer/Component.js');
15
- var transitions_module = require('./transitions.module-9c7cb980.js');
16
- var hooks = require('@alfalab/hooks');
16
+ var transitions_module = require('./transitions.module-0cb336a7.js');
17
+ require('@alfalab/icons-glyph/CrossMIcon');
17
18
  var components_header_Component_mobile = require('./components/header/Component.mobile.js');
18
19
  var components_content_Component_mobile = require('./components/content/Component.mobile.js');
19
20
  var components_footer_Component_mobile = require('./components/footer/Component.mobile.js');
@@ -23,20 +24,12 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
23
24
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
24
25
  var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
25
26
 
26
- var styles = {"component":"modal__component_1vhr3"};
27
+ var styles = {"component":"modal__component_odvv0"};
27
28
  require('./mobile.css')
28
29
 
29
30
  var ModalMobileComponent = React.forwardRef(function (_a, ref) {
30
31
  var children = _a.children, className = _a.className, restProps = tslib_es6.__rest(_a, ["children", "className"]);
31
- var size = hooks.useMedia([
32
- ['s', '(max-width: 375px)'],
33
- ['m', '(min-width: 376px)'],
34
- ], 's')[0];
35
- return (React__default['default'].createElement(coreComponentsBaseModal.BaseModal, tslib_es6.__assign({}, restProps, { ref: ref, transitionProps: tslib_es6.__assign({ classNames: transitions_module.transitions }, restProps.transitionProps), className: cn__default['default'](className, styles.component), backdropProps: tslib_es6.__assign(tslib_es6.__assign({}, restProps.backdropProps), { invisible: true }) }), React__default['default'].Children.map(children, function (child) {
36
- return React.isValidElement(child)
37
- ? React.cloneElement(child, { size: child.props.size || size, fullscreen: true })
38
- : child;
39
- })));
32
+ return (React__default['default'].createElement(coreComponentsBaseModal.BaseModal, tslib_es6.__assign({}, restProps, { ref: ref, transitionProps: tslib_es6.__assign({ classNames: transitions_module.transitions }, restProps.transitionProps), className: cn__default['default'](className, styles.component) }), children));
40
33
  });
41
34
  var ModalMobile = Object.assign(ModalMobileComponent, {
42
35
  Content: components_content_Component_mobile.ContentMobile,
@@ -6,14 +6,14 @@ type ModalResponsiveProps = ModalMobileProps & ModalDesktopProps;
6
6
  declare const ModalResponsive: React.ForwardRefExoticComponent<import("packages/base-modal/src").BaseModalProps & {
7
7
  hasCloser?: boolean | undefined;
8
8
  } & {
9
- size?: "s" | "m" | "l" | undefined;
9
+ size?: "s" | "m" | "l" | "xl" | "fullscreen" | undefined;
10
10
  fullscreen?: boolean | undefined;
11
11
  fixedPosition?: boolean | undefined;
12
12
  hasCloser?: boolean | undefined;
13
13
  } & React.RefAttributes<HTMLDivElement>> & {
14
- Header: React.FC<import("./components/header/Component.desktop").HeaderDesktopProps> | React.FC<import("./components/header/Component").HeaderProps>;
15
- Content: React.FC<import("./components/content/Component.desktop").ContentDesktopProps> | React.FC<import("./components/content/Component").ContentProps>;
16
- Footer: React.FC<import("./components/footer/Component.desktop").FooterDesktopProps> | React.FC<import("./components/footer/Component").FooterProps>;
14
+ Header: React.FC<import("./components/header/Component.desktop").HeaderDesktopProps> | React.FC<import("./components/header/Component.mobile").HeaderMobileProps>;
15
+ Content: React.FC<import("./components/content/Component").ContentProps> | React.FC<import("./components/content/Component.desktop").ContentDesktopProps>;
16
+ Footer: React.FC<import("./components/footer/Component").FooterProps> | React.FC<import("./components/footer/Component.desktop").FooterDesktopProps>;
17
17
  Closer: React.FC<import("./components/closer/Component").CloserProps>;
18
18
  };
19
19
  export { ModalResponsiveProps, ModalResponsive };
@@ -2,27 +2,29 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var tslib_es6 = require('./tslib.es6-d1b7fb9e.js');
5
+ var tslib_es6 = require('./tslib.es6-e71a96bd.js');
6
6
  var React = require('react');
7
7
  require('classnames');
8
8
  require('@alfalab/core-components-base-modal');
9
9
  require('react-merge-refs');
10
10
  require('./Context.js');
11
- require('@alfalab/core-components-button');
12
- var components_closer_Component = require('./components/closer/Component.js');
13
11
  require('./components/header/Component.js');
12
+ require('@alfalab/core-components-icon-button');
13
+ require('@alfalab/icons-glyph/CrossHeavyMIcon');
14
+ var components_closer_Component = require('./components/closer/Component.js');
14
15
  require('./components/header/Component.desktop.js');
15
16
  require('./components/content/Component.js');
16
17
  require('./components/content/Component.desktop.js');
17
18
  require('./components/footer/Component.js');
18
19
  require('./components/footer/Component.desktop.js');
19
20
  var Component_desktop = require('./Component.desktop.js');
20
- require('./transitions.module-9c7cb980.js');
21
- var hooks = require('@alfalab/hooks');
21
+ require('./transitions.module-0cb336a7.js');
22
+ require('@alfalab/icons-glyph/CrossMIcon');
22
23
  require('./components/header/Component.mobile.js');
23
24
  require('./components/content/Component.mobile.js');
24
25
  require('./components/footer/Component.mobile.js');
25
26
  var Component_mobile = require('./Component.mobile.js');
27
+ var hooks = require('@alfalab/hooks');
26
28
 
27
29
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
28
30
 
@@ -42,8 +44,8 @@ function createResponsive(desktop, mobile) {
42
44
  var ModalResponsiveComponent = React.forwardRef(function (_a, ref) {
43
45
  var children = _a.children, restProps = tslib_es6.__rest(_a, ["children"]);
44
46
  var view = hooks.useMedia([
45
- ['mobile', '(max-width: 767px)'],
46
- ['desktop', '(min-width: 768px)'],
47
+ ['mobile', '(max-width: 1023px)'],
48
+ ['desktop', '(min-width: 1024px)'],
47
49
  ], 'desktop')[0];
48
50
  var contextValue = React.useMemo(function () { return ({ view: view }); }, [view]);
49
51
  var Component = view === 'desktop' ? Component_desktop.ModalDesktop : Component_mobile.ModalMobile;
@@ -1,4 +1,5 @@
1
- import { ButtonHTMLAttributes, FC } from 'react';
1
+ import { ButtonHTMLAttributes, ElementType, FC } from 'react';
2
+ import { IconButtonProps } from "@alfalab/core-components-icon-button";
2
3
  type CloserProps = ButtonHTMLAttributes<HTMLButtonElement> & {
3
4
  /**
4
5
  * Дополнительный класс
@@ -9,9 +10,20 @@ type CloserProps = ButtonHTMLAttributes<HTMLButtonElement> & {
9
10
  */
10
11
  align?: 'left' | 'right';
11
12
  /**
12
- * Флаг, что модальное окно открыто на весь экран
13
+ * Размер кнопки
13
14
  */
14
- fullscreen?: boolean;
15
+ size?: IconButtonProps['size'];
16
+ /**
17
+ * Фиксирует крестик
18
+ */
19
+ sticky?: boolean;
20
+ /**
21
+ * Иконка
22
+ */
23
+ icon?: ElementType;
15
24
  };
25
+ /**
26
+ * @deprecated Компонент только для внутреннего использования. Используйте <Header />
27
+ */
16
28
  declare const Closer: FC<CloserProps>;
17
29
  export { CloserProps, Closer };
@@ -2,28 +2,36 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var tslib_es6 = require('../../tslib.es6-d1b7fb9e.js');
5
+ var tslib_es6 = require('../../tslib.es6-e71a96bd.js');
6
6
  var React = require('react');
7
7
  var cn = require('classnames');
8
8
  require('@alfalab/core-components-base-modal');
9
9
  var Context = require('../../Context.js');
10
- var coreComponentsButton = require('@alfalab/core-components-button');
10
+ var coreComponentsIconButton = require('@alfalab/core-components-icon-button');
11
+ var CrossHeavyMIcon = require('@alfalab/icons-glyph/CrossHeavyMIcon');
11
12
 
12
13
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
13
14
 
14
15
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
15
16
  var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
16
17
 
17
- var styles = {"closer":"modal__closer_1sswy","left":"modal__left_1sswy","right":"modal__right_1sswy","fullscreen":"modal__fullscreen_1sswy"};
18
+ var styles = {"closer":"modal__closer_13ibv","button":"modal__button_13ibv","sticky":"modal__sticky_13ibv"};
18
19
  require('./index.css')
19
20
 
21
+ /**
22
+ * @deprecated Компонент только для внутреннего использования. Используйте <Header />
23
+ */
20
24
  var Closer = function (_a) {
21
- var className = _a.className, fullscreen = _a.fullscreen, align = _a.align, restProps = tslib_es6.__rest(_a, ["className", "fullscreen", "align"]);
25
+ var _b;
26
+ var className = _a.className, _c = _a.size, size = _c === void 0 ? 's' : _c, sticky = _a.sticky, _d = _a.icon, icon = _d === void 0 ? CrossHeavyMIcon.CrossHeavyMIcon : _d, restProps = tslib_es6.__rest(_a, ["className", "size", "sticky", "icon"]);
22
27
  var onClose = React.useContext(Context.ModalContext).onClose;
23
28
  var handleClick = React.useCallback(function (event) {
24
29
  onClose(event, 'closerClick');
25
30
  }, [onClose]);
26
- return (React__default['default'].createElement(coreComponentsButton.Button, tslib_es6.__assign({ type: 'button', view: 'ghost', className: cn__default['default'](styles.closer, className, fullscreen && styles.fullscreen, align && styles[align]), "aria-label": '\u0437\u0430\u043A\u0440\u044B\u0442\u044C', onClick: handleClick }, restProps)));
31
+ return (React__default['default'].createElement("div", { className: cn__default['default'](styles.closer, className, (_b = {},
32
+ _b[styles.sticky] = sticky,
33
+ _b)) },
34
+ React__default['default'].createElement(coreComponentsIconButton.IconButton, tslib_es6.__assign({ size: size, className: styles.button, "aria-label": '\u0437\u0430\u043A\u0440\u044B\u0442\u044C', onClick: handleClick, icon: icon }, restProps))));
27
35
  };
28
36
 
29
37
  exports.Closer = Closer;
@@ -1,4 +1,4 @@
1
- /* hash: 1rgy3 */
1
+ /* hash: 1wu1k */
2
2
  :root {
3
3
 
4
4
  /* Hard */
@@ -17,36 +17,28 @@
17
17
 
18
18
  /* paddings */
19
19
 
20
- /* closer */
21
- --modal-closer-icon: url('https://alfabank.gcdn.co/icons/glyph_cross_m.svg');
20
+ /* scroll */
22
21
 
23
- /* sticky */
22
+ /* desktop */
24
23
 
25
- /* scroll */
24
+ /* mobile */
26
25
  }
27
- .modal__closer_1sswy {
26
+ .modal__closer_13ibv {
27
+ flex-shrink: 0;
28
28
  width: 48px;
29
29
  height: 48px;
30
- background-image: var(--modal-closer-icon);
31
- background-position: center;
32
- background-repeat: no-repeat;
33
- flex-shrink: 0;
34
- transition: opacity 0.2s ease-out
30
+ margin-left: auto;
31
+ display: flex;
32
+ align-items: center;
33
+ justify-content: center;
35
34
  }
36
- .modal__closer_1sswy:hover {
37
- opacity: 0.7;
38
- }
39
- .modal__closer_1sswy:active {
40
- opacity: 0.5;
41
- }
42
- .modal__left_1sswy,
43
- .modal__right_1sswy {
35
+ .modal__button_13ibv {
36
+ background: rgba(255, 255, 255, 0.4);
37
+ -webkit-backdrop-filter: blur(10px);
38
+ backdrop-filter: blur(10px);
39
+ border-radius: 50px;
40
+ }
41
+ .modal__sticky_13ibv {
44
42
  position: sticky;
45
43
  top: calc(var(--modal-vertical-padding) * -1);
46
44
  }
47
- .modal__right_1sswy {
48
- margin-left: auto;
49
- }
50
- .modal__fullscreen_1sswy {
51
- top: 0;
52
- }
@@ -13,7 +13,5 @@ type ContentProps = {
13
13
  */
14
14
  flex?: boolean;
15
15
  };
16
- declare const Content: FC<ContentProps & {
17
- styles: Record<string, string>;
18
- }>;
16
+ declare const Content: FC<ContentProps>;
19
17
  export { ContentProps, Content };
@@ -1,14 +1,11 @@
1
1
  import { FC } from 'react';
2
2
  import { ContentProps } from "./Component";
3
+ import { ModalDesktopProps } from "../../Component.desktop";
3
4
  type ContentDesktopProps = ContentProps & {
4
5
  /**
5
6
  * Размер
6
7
  */
7
- size?: 's' | 'm' | 'l';
8
- /**
9
- * Флаг, что модальное окно открыто на весь экран
10
- */
11
- fullscreen?: boolean;
8
+ size?: ModalDesktopProps['size'];
12
9
  };
13
10
  declare const ContentDesktop: FC<ContentDesktopProps>;
14
11
  export { ContentDesktopProps, ContentDesktop };
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var tslib_es6 = require('../../tslib.es6-d1b7fb9e.js');
5
+ var tslib_es6 = require('../../tslib.es6-e71a96bd.js');
6
6
  var React = require('react');
7
7
  var cn = require('classnames');
8
8
  require('@alfalab/core-components-base-modal');
@@ -14,12 +14,12 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
14
14
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
15
15
  var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
16
16
 
17
- var styles = {"content":"modal__content_ycikz modal__content_17iaf","flex":"modal__flex_ycikz modal__flex_17iaf","s":"modal__s_ycikz","m":"modal__m_ycikz","l":"modal__l_ycikz","fullscreen":"modal__fullscreen_ycikz"};
17
+ var styles = {"s":"modal__s_trd7b","m":"modal__m_trd7b","l":"modal__l_trd7b","xl":"modal__xl_trd7b","fullscreen":"modal__fullscreen_trd7b"};
18
18
  require('./desktop.css')
19
19
 
20
20
  var ContentDesktop = function (_a) {
21
- var size = _a.size, className = _a.className, fullscreen = _a.fullscreen, restProps = tslib_es6.__rest(_a, ["size", "className", "fullscreen"]);
22
- return (React__default['default'].createElement(components_content_Component.Content, tslib_es6.__assign({ className: cn__default['default'](className, size && styles[size], fullscreen && styles.fullscreen), styles: styles }, restProps)));
21
+ var size = _a.size, className = _a.className, restProps = tslib_es6.__rest(_a, ["size", "className"]);
22
+ return (React__default['default'].createElement(components_content_Component.Content, tslib_es6.__assign({ className: cn__default['default'](className, size && styles[size]) }, restProps)));
23
23
  };
24
24
 
25
25
  exports.ContentDesktop = ContentDesktop;
@@ -12,9 +12,12 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
12
12
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
13
13
  var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
14
14
 
15
+ var styles = {"content":"modal__content_1vm3y","flex":"modal__flex_1vm3y"};
16
+ require('./index.css')
17
+
15
18
  var Content = function (_a) {
16
19
  var _b;
17
- var children = _a.children, flex = _a.flex, className = _a.className, styles = _a.styles;
20
+ var children = _a.children, flex = _a.flex, className = _a.className;
18
21
  var contentRef = React.useContext(Context.ModalContext).contentRef;
19
22
  return (React__default['default'].createElement("div", { className: cn__default['default'](styles.content, className, (_b = {},
20
23
  _b[styles.flex] = flex,
@@ -2,9 +2,9 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var tslib_es6 = require('../../tslib.es6-d1b7fb9e.js');
5
+ var tslib_es6 = require('../../tslib.es6-e71a96bd.js');
6
6
  var React = require('react');
7
- require('classnames');
7
+ var cn = require('classnames');
8
8
  require('@alfalab/core-components-base-modal');
9
9
  require('../../Context.js');
10
10
  var components_content_Component = require('./Component.js');
@@ -12,10 +12,14 @@ var components_content_Component = require('./Component.js');
12
12
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
13
13
 
14
14
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
15
+ var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
15
16
 
16
- var styles = {"content":"modal__content_zy9l4 modal__content_17iaf","flex":"modal__flex_zy9l4 modal__flex_17iaf"};
17
+ var styles = {"content":"modal__content_1wp2v"};
17
18
  require('./mobile.css')
18
19
 
19
- var ContentMobile = function (props) { return (React__default['default'].createElement(components_content_Component.Content, tslib_es6.__assign({ styles: styles }, props))); };
20
+ var ContentMobile = function (_a) {
21
+ var className = _a.className, restProps = tslib_es6.__rest(_a, ["className"]);
22
+ return (React__default['default'].createElement(components_content_Component.Content, tslib_es6.__assign({ className: cn__default['default'](className, styles.content) }, restProps)));
23
+ };
20
24
 
21
25
  exports.ContentMobile = ContentMobile;