@hh.ru/magritte-ui-modal 11.0.17 → 11.0.19

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.
@@ -0,0 +1,19 @@
1
+ /**
2
+ * The ActionBar props a Modal supplies to whatever sits in its `footer` slot, at runtime through
3
+ * `ActionBarDefaultPropsContext` (see `internal/ModalInner.tsx`).
4
+ *
5
+ * They live in their own module, as plain data with no imports, because they are read from TWO sides: the
6
+ * component applies them, and the Code Connect template declares them as contextual defaults so a footer
7
+ * snippet stops repeating what the modal already provides. A literal copied into the template would drift
8
+ * silently — change the value here and the published snippet would keep asserting the old one, with no build
9
+ * error and no render error. The bundler inlines this file into every template that imports it, which is the
10
+ * other reason it must stay free of runtime imports.
11
+ *
12
+ * `scrollContainer` is deliberately absent: it is a live DOM node the modal resolves per render, not a value
13
+ * anyone writes in code.
14
+ */
15
+ export declare const MODAL_ACTION_BAR_DEFAULTS: {
16
+ readonly type: "auto";
17
+ readonly padding: 24;
18
+ readonly showDivider: "with-scroll";
19
+ };
@@ -0,0 +1,23 @@
1
+ import './index.css';
2
+ /**
3
+ * The ActionBar props a Modal supplies to whatever sits in its `footer` slot, at runtime through
4
+ * `ActionBarDefaultPropsContext` (see `internal/ModalInner.tsx`).
5
+ *
6
+ * They live in their own module, as plain data with no imports, because they are read from TWO sides: the
7
+ * component applies them, and the Code Connect template declares them as contextual defaults so a footer
8
+ * snippet stops repeating what the modal already provides. A literal copied into the template would drift
9
+ * silently — change the value here and the published snippet would keep asserting the old one, with no build
10
+ * error and no render error. The bundler inlines this file into every template that imports it, which is the
11
+ * other reason it must stay free of runtime imports.
12
+ *
13
+ * `scrollContainer` is deliberately absent: it is a live DOM node the modal resolves per render, not a value
14
+ * anyone writes in code.
15
+ */
16
+ const MODAL_ACTION_BAR_DEFAULTS = {
17
+ type: 'auto',
18
+ padding: 24,
19
+ showDivider: 'with-scroll',
20
+ };
21
+
22
+ export { MODAL_ACTION_BAR_DEFAULTS };
23
+ //# sourceMappingURL=actionBarDefaults.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"actionBarDefaults.js","sources":["src/actionBarDefaults.ts"],"sourcesContent":["/**\n * The ActionBar props a Modal supplies to whatever sits in its `footer` slot, at runtime through\n * `ActionBarDefaultPropsContext` (see `internal/ModalInner.tsx`).\n *\n * They live in their own module, as plain data with no imports, because they are read from TWO sides: the\n * component applies them, and the Code Connect template declares them as contextual defaults so a footer\n * snippet stops repeating what the modal already provides. A literal copied into the template would drift\n * silently — change the value here and the published snippet would keep asserting the old one, with no build\n * error and no render error. The bundler inlines this file into every template that imports it, which is the\n * other reason it must stay free of runtime imports.\n *\n * `scrollContainer` is deliberately absent: it is a live DOM node the modal resolves per render, not a value\n * anyone writes in code.\n */\nexport const MODAL_ACTION_BAR_DEFAULTS = {\n type: 'auto',\n padding: 24,\n showDivider: 'with-scroll',\n} as const;\n"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;AAaG;AACU,MAAA,yBAAyB,GAAG;AACrC,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,OAAO,EAAE,EAAE;AACX,IAAA,WAAW,EAAE,aAAa;;;;;"}
package/index.css CHANGED
@@ -15,7 +15,7 @@
15
15
  --magritte-color-stroke-neutral-v25-0-0:#303030;
16
16
  --magritte-color-component-modal-background-content-v25-0-0:#111;
17
17
  }
18
- .magritte-sticky-header___TPafy_11-0-17{
18
+ .magritte-sticky-header___TPafy_11-0-19{
19
19
  position:sticky;
20
20
  top:0;
21
21
  z-index:10;
@@ -27,14 +27,14 @@
27
27
  --magritte-ui-nav-bar-stage-horizontal-padding-override:24px;
28
28
  }
29
29
  @supports selector(:has(*)){
30
- .magritte-sticky-header___TPafy_11-0-17{
30
+ .magritte-sticky-header___TPafy_11-0-19{
31
31
  --magritte-ui-nav-bar-stage-horizontal-padding-override:24px;
32
32
  }
33
- .magritte-sticky-header-inner___u5p8h_11-0-17{
33
+ .magritte-sticky-header-inner___u5p8h_11-0-19{
34
34
  margin:0 calc(-1 * var(--magritte-ui-modal-hor-padding-mul) * 24px);
35
35
  }
36
36
  }
37
- .magritte-modal-media___UqHGM_11-0-17{
37
+ .magritte-modal-media___UqHGM_11-0-19{
38
38
  display:flex;
39
39
  position:relative;
40
40
  overflow:hidden;
@@ -44,35 +44,35 @@
44
44
  background-position:center;
45
45
  background-repeat:no-repeat;
46
46
  }
47
- .magritte-modal-media___UqHGM_11-0-17 img{
47
+ .magritte-modal-media___UqHGM_11-0-19 img{
48
48
  max-width:100%;
49
49
  max-height:100%;
50
50
  }
51
- .magritte-fixed-height___wyJ7-_11-0-17{
51
+ .magritte-fixed-height___wyJ7-_11-0-19{
52
52
  aspect-ratio:auto;
53
53
  height:var(--height, auto);
54
54
  }
55
- .magritte-contain___3QD0Z_11-0-17{
55
+ .magritte-contain___3QD0Z_11-0-19{
56
56
  background-size:contain;
57
57
  }
58
- .magritte-contain___3QD0Z_11-0-17 img{
58
+ .magritte-contain___3QD0Z_11-0-19 img{
59
59
  object-fit:contain;
60
60
  }
61
- .magritte-cover___nry9O_11-0-17{
61
+ .magritte-cover___nry9O_11-0-19{
62
62
  background-size:cover;
63
63
  }
64
- .magritte-cover___nry9O_11-0-17 img{
64
+ .magritte-cover___nry9O_11-0-19 img{
65
65
  object-fit:cover;
66
66
  }
67
67
  @supports selector(:has(*)){
68
- .magritte-modal-media___UqHGM_11-0-17{
68
+ .magritte-modal-media___UqHGM_11-0-19{
69
69
  margin:0 calc(var(--magritte-ui-modal-hor-padding-mul) * -12px);
70
70
  }
71
- .magritte-content-overlay-top___6snWk_11-0-17 + .magritte-grow-limiter___GmpBj_11-0-17 .magritte-modal-media___UqHGM_11-0-17:first-child{
71
+ .magritte-content-overlay-top___6snWk_11-0-19 + .magritte-grow-limiter___GmpBj_11-0-19 .magritte-modal-media___UqHGM_11-0-19:first-child{
72
72
  margin-top:0;
73
73
  }
74
74
  }
75
- .magritte-modal-overlay___WwfCg_11-0-17{
75
+ .magritte-modal-overlay___WwfCg_11-0-19{
76
76
  position:fixed;
77
77
  top:0;
78
78
  right:0;
@@ -82,25 +82,25 @@
82
82
  align-items:center;
83
83
  justify-content:center;
84
84
  }
85
- .magritte-modal-overlay-with-background___DDxJn_11-0-17{
85
+ .magritte-modal-overlay-with-background___DDxJn_11-0-19{
86
86
  background-color:var(--magritte-color-background-overlay-v25-0-0);
87
87
  transition-property:opacity, transform;
88
88
  user-select:text;
89
89
  z-index:1;
90
90
  }
91
- .magritte-modal-overlay___WwfCg_11-0-17:not(.magritte-modal-overlay-with-background___DDxJn_11-0-17){
91
+ .magritte-modal-overlay___WwfCg_11-0-19:not(.magritte-modal-overlay-with-background___DDxJn_11-0-19){
92
92
  pointer-events:none;
93
93
  }
94
- .magritte-modal-overlay___WwfCg_11-0-17:not(.magritte-modal-overlay-with-background___DDxJn_11-0-17) .magritte-modal___C4o5U_11-0-17{
94
+ .magritte-modal-overlay___WwfCg_11-0-19:not(.magritte-modal-overlay-with-background___DDxJn_11-0-19) .magritte-modal___C4o5U_11-0-19{
95
95
  pointer-events:auto;
96
96
  }
97
- .magritte-modal-overlay-left___agPyC_11-0-17{
97
+ .magritte-modal-overlay-left___agPyC_11-0-19{
98
98
  justify-content:flex-start;
99
99
  }
100
- .magritte-modal-overlay-right___-XDAx_11-0-17{
100
+ .magritte-modal-overlay-right___-XDAx_11-0-19{
101
101
  justify-content:flex-end;
102
102
  }
103
- .magritte-modal___C4o5U_11-0-17{
103
+ .magritte-modal___C4o5U_11-0-19{
104
104
  display:flex;
105
105
  box-sizing:border-box;
106
106
  margin:0 12px;
@@ -122,25 +122,25 @@
122
122
  --magritte-ui-modal-vert-padding-mul:1;
123
123
  --magritte-ui-snackbar-container-overflow-override:visible;
124
124
  }
125
- .magritte-modal___C4o5U_11-0-17.magritte-size-small___cI-Ql_11-0-17{
125
+ .magritte-modal___C4o5U_11-0-19.magritte-size-small___cI-Ql_11-0-19{
126
126
  width:480px;
127
127
  }
128
- .magritte-modal___C4o5U_11-0-17.magritte-size-medium___jnqfu_11-0-17{
128
+ .magritte-modal___C4o5U_11-0-19.magritte-size-medium___jnqfu_11-0-19{
129
129
  width:620px;
130
130
  }
131
- .magritte-no-vertical-paddings___dxyot_11-0-17{
131
+ .magritte-no-vertical-paddings___dxyot_11-0-19{
132
132
  --magritte-ui-modal-vert-padding-mul:0;
133
133
  }
134
- .magritte-no-horizontal-paddings___Q-i-5_11-0-17{
134
+ .magritte-no-horizontal-paddings___Q-i-5_11-0-19{
135
135
  --magritte-ui-modal-hor-padding-mul:0;
136
136
  }
137
- .magritte-modal-full-height___Aew5F_11-0-17{
137
+ .magritte-modal-full-height___Aew5F_11-0-19{
138
138
  height:100%;
139
139
  }
140
- .magritte-modal-with-border___KSnhf_11-0-17{
140
+ .magritte-modal-with-border___KSnhf_11-0-19{
141
141
  outline:1px solid var(--magritte-color-stroke-neutral-v25-0-0);
142
142
  }
143
- .magritte-modal-content-wrapper___VzoTN_11-0-17{
143
+ .magritte-modal-content-wrapper___VzoTN_11-0-19{
144
144
  position:relative;
145
145
  display:flex;
146
146
  flex-direction:column;
@@ -148,188 +148,188 @@
148
148
  flex:1 1;
149
149
  padding:24px 0 0;
150
150
  }
151
- .magritte-no-horizontal-paddings___Q-i-5_11-0-17 .magritte-modal-content-wrapper___VzoTN_11-0-17{
151
+ .magritte-no-horizontal-paddings___Q-i-5_11-0-19 .magritte-modal-content-wrapper___VzoTN_11-0-19{
152
152
  padding-right:0;
153
153
  padding-left:0;
154
154
  }
155
- .magritte-no-vertical-paddings___dxyot_11-0-17 .magritte-modal-content-wrapper___VzoTN_11-0-17{
155
+ .magritte-no-vertical-paddings___dxyot_11-0-19 .magritte-modal-content-wrapper___VzoTN_11-0-19{
156
156
  padding-top:0;
157
157
  padding-bottom:0;
158
158
  }
159
- .magritte-modal-footer___Ha-sZ_11-0-17{
159
+ .magritte-modal-footer___Ha-sZ_11-0-19{
160
160
  background-color:var(--magritte-color-component-modal-background-content-v25-0-0);
161
161
  z-index:1;
162
162
  --magritte-ui-container-background-color-override:var(--magritte-color-component-modal-background-content-v25-0-0);
163
163
  }
164
- .magritte-modal-footer___Ha-sZ_11-0-17.magritte-modal-footer-empty___tmH-x_11-0-17{
164
+ .magritte-modal-footer___Ha-sZ_11-0-19.magritte-modal-footer-empty___tmH-x_11-0-19{
165
165
  flex:0 0 calc(var(--magritte-ui-modal-vert-padding-mul) * 24px);
166
166
  }
167
- .magritte-animation-timeout___G4Hl1_11-0-17{
167
+ .magritte-animation-timeout___G4Hl1_11-0-19{
168
168
  --enter-animation-duration:0;
169
169
  --exit-animation-duration:0;
170
170
  }
171
171
  @media (prefers-reduced-motion: no-preference){
172
- .magritte-animation-timeout___G4Hl1_11-0-17{
172
+ .magritte-animation-timeout___G4Hl1_11-0-19{
173
173
  --enter-animation-duration:var(--magritte-semantic-animation-ease-in-out-300-duration-v25-0-0);
174
174
  --exit-animation-duration:var(--magritte-semantic-animation-ease-in-out-200-duration-v25-0-0);
175
175
  }
176
176
  }
177
- .magritte-animation-enter-center___sq8j7_11-0-17.magritte-modal-overlay-with-background___DDxJn_11-0-17{
177
+ .magritte-animation-enter-center___sq8j7_11-0-19.magritte-modal-overlay-with-background___DDxJn_11-0-19{
178
178
  opacity:0;
179
179
  }
180
- .magritte-animation-enter-center___sq8j7_11-0-17 .magritte-modal___C4o5U_11-0-17{
180
+ .magritte-animation-enter-center___sq8j7_11-0-19 .magritte-modal___C4o5U_11-0-19{
181
181
  opacity:0;
182
182
  }
183
- .magritte-animation-enter-center-active___ORYEh_11-0-17{
183
+ .magritte-animation-enter-center-active___ORYEh_11-0-19{
184
184
  --enter-animation-duration:0;
185
185
  --exit-animation-duration:0;
186
186
  }
187
187
  @media (prefers-reduced-motion: no-preference){
188
- .magritte-animation-enter-center-active___ORYEh_11-0-17{
188
+ .magritte-animation-enter-center-active___ORYEh_11-0-19{
189
189
  --enter-animation-duration:var(--magritte-semantic-animation-ease-in-out-300-duration-v25-0-0);
190
190
  --exit-animation-duration:var(--magritte-semantic-animation-ease-in-out-200-duration-v25-0-0);
191
191
  }
192
192
  }
193
- .magritte-animation-enter-center-active___ORYEh_11-0-17 .magritte-modal___C4o5U_11-0-17,
194
- .magritte-animation-enter-center-active___ORYEh_11-0-17.magritte-modal-overlay-with-background___DDxJn_11-0-17{
193
+ .magritte-animation-enter-center-active___ORYEh_11-0-19 .magritte-modal___C4o5U_11-0-19,
194
+ .magritte-animation-enter-center-active___ORYEh_11-0-19.magritte-modal-overlay-with-background___DDxJn_11-0-19{
195
195
  opacity:1;
196
196
  transition-duration:var(--enter-animation-duration);
197
197
  transition-timing-function:var(--magritte-semantic-animation-ease-in-out-300-timing-function-v25-0-0);
198
198
  }
199
- .magritte-animation-exit-center___lLCX1_11-0-17.magritte-modal-overlay-with-background___DDxJn_11-0-17{
199
+ .magritte-animation-exit-center___lLCX1_11-0-19.magritte-modal-overlay-with-background___DDxJn_11-0-19{
200
200
  opacity:1;
201
201
  }
202
- .magritte-animation-exit-center___lLCX1_11-0-17 .magritte-modal___C4o5U_11-0-17{
202
+ .magritte-animation-exit-center___lLCX1_11-0-19 .magritte-modal___C4o5U_11-0-19{
203
203
  opacity:1;
204
204
  }
205
- .magritte-animation-exit-center-active___Ik2Yl_11-0-17{
205
+ .magritte-animation-exit-center-active___Ik2Yl_11-0-19{
206
206
  --enter-animation-duration:0;
207
207
  --exit-animation-duration:0;
208
208
  }
209
209
  @media (prefers-reduced-motion: no-preference){
210
- .magritte-animation-exit-center-active___Ik2Yl_11-0-17{
210
+ .magritte-animation-exit-center-active___Ik2Yl_11-0-19{
211
211
  --enter-animation-duration:var(--magritte-semantic-animation-ease-in-out-300-duration-v25-0-0);
212
212
  --exit-animation-duration:var(--magritte-semantic-animation-ease-in-out-200-duration-v25-0-0);
213
213
  }
214
214
  }
215
- .magritte-animation-exit-center-active___Ik2Yl_11-0-17.magritte-modal-overlay-with-background___DDxJn_11-0-17{
215
+ .magritte-animation-exit-center-active___Ik2Yl_11-0-19.magritte-modal-overlay-with-background___DDxJn_11-0-19{
216
216
  opacity:0;
217
217
  }
218
- .magritte-animation-exit-center-active___Ik2Yl_11-0-17 .magritte-modal___C4o5U_11-0-17{
218
+ .magritte-animation-exit-center-active___Ik2Yl_11-0-19 .magritte-modal___C4o5U_11-0-19{
219
219
  opacity:0;
220
220
  }
221
- .magritte-animation-exit-center-active___Ik2Yl_11-0-17 .magritte-modal___C4o5U_11-0-17,
222
- .magritte-animation-exit-center-active___Ik2Yl_11-0-17.magritte-modal-overlay-with-background___DDxJn_11-0-17{
221
+ .magritte-animation-exit-center-active___Ik2Yl_11-0-19 .magritte-modal___C4o5U_11-0-19,
222
+ .magritte-animation-exit-center-active___Ik2Yl_11-0-19.magritte-modal-overlay-with-background___DDxJn_11-0-19{
223
223
  transition-duration:var(--exit-animation-duration);
224
224
  transition-timing-function:var(--magritte-semantic-animation-ease-in-out-200-timing-function-v25-0-0);
225
225
  }
226
- .magritte-animation-enter-left___jJDlv_11-0-17.magritte-modal-overlay-with-background___DDxJn_11-0-17{
226
+ .magritte-animation-enter-left___jJDlv_11-0-19.magritte-modal-overlay-with-background___DDxJn_11-0-19{
227
227
  opacity:0;
228
228
  }
229
- .magritte-animation-enter-left___jJDlv_11-0-17 .magritte-modal___C4o5U_11-0-17{
229
+ .magritte-animation-enter-left___jJDlv_11-0-19 .magritte-modal___C4o5U_11-0-19{
230
230
  opacity:0;
231
231
  transform:translateX(-100%);
232
232
  }
233
- .magritte-animation-enter-left-active___-kFij_11-0-17{
233
+ .magritte-animation-enter-left-active___-kFij_11-0-19{
234
234
  --enter-animation-duration:0;
235
235
  --exit-animation-duration:0;
236
236
  }
237
237
  @media (prefers-reduced-motion: no-preference){
238
- .magritte-animation-enter-left-active___-kFij_11-0-17{
238
+ .magritte-animation-enter-left-active___-kFij_11-0-19{
239
239
  --enter-animation-duration:var(--magritte-semantic-animation-ease-in-out-300-duration-v25-0-0);
240
240
  --exit-animation-duration:var(--magritte-semantic-animation-ease-in-out-200-duration-v25-0-0);
241
241
  }
242
242
  }
243
- .magritte-animation-enter-left-active___-kFij_11-0-17 .magritte-modal___C4o5U_11-0-17,
244
- .magritte-animation-enter-left-active___-kFij_11-0-17.magritte-modal-overlay-with-background___DDxJn_11-0-17{
243
+ .magritte-animation-enter-left-active___-kFij_11-0-19 .magritte-modal___C4o5U_11-0-19,
244
+ .magritte-animation-enter-left-active___-kFij_11-0-19.magritte-modal-overlay-with-background___DDxJn_11-0-19{
245
245
  opacity:1;
246
246
  transition-duration:var(--enter-animation-duration);
247
247
  transition-timing-function:var(--magritte-semantic-animation-ease-in-out-300-timing-function-v25-0-0);
248
248
  transform:translateX(0);
249
249
  }
250
- .magritte-animation-exit-left___G2Plq_11-0-17.magritte-modal-overlay-with-background___DDxJn_11-0-17{
250
+ .magritte-animation-exit-left___G2Plq_11-0-19.magritte-modal-overlay-with-background___DDxJn_11-0-19{
251
251
  opacity:1;
252
252
  }
253
- .magritte-animation-exit-left___G2Plq_11-0-17 .magritte-modal___C4o5U_11-0-17{
253
+ .magritte-animation-exit-left___G2Plq_11-0-19 .magritte-modal___C4o5U_11-0-19{
254
254
  opacity:1;
255
255
  transform:translateX(0);
256
256
  }
257
- .magritte-animation-exit-left-active___XW2K4_11-0-17{
257
+ .magritte-animation-exit-left-active___XW2K4_11-0-19{
258
258
  --enter-animation-duration:0;
259
259
  --exit-animation-duration:0;
260
260
  }
261
261
  @media (prefers-reduced-motion: no-preference){
262
- .magritte-animation-exit-left-active___XW2K4_11-0-17{
262
+ .magritte-animation-exit-left-active___XW2K4_11-0-19{
263
263
  --enter-animation-duration:var(--magritte-semantic-animation-ease-in-out-300-duration-v25-0-0);
264
264
  --exit-animation-duration:var(--magritte-semantic-animation-ease-in-out-200-duration-v25-0-0);
265
265
  }
266
266
  }
267
- .magritte-animation-exit-left-active___XW2K4_11-0-17.magritte-modal-overlay-with-background___DDxJn_11-0-17{
267
+ .magritte-animation-exit-left-active___XW2K4_11-0-19.magritte-modal-overlay-with-background___DDxJn_11-0-19{
268
268
  opacity:0;
269
269
  }
270
- .magritte-animation-exit-left-active___XW2K4_11-0-17 .magritte-modal___C4o5U_11-0-17{
270
+ .magritte-animation-exit-left-active___XW2K4_11-0-19 .magritte-modal___C4o5U_11-0-19{
271
271
  opacity:0;
272
272
  transform:translateX(-100%);
273
273
  }
274
- .magritte-animation-exit-left-active___XW2K4_11-0-17 .magritte-modal___C4o5U_11-0-17,
275
- .magritte-animation-exit-left-active___XW2K4_11-0-17.magritte-modal-overlay-with-background___DDxJn_11-0-17{
274
+ .magritte-animation-exit-left-active___XW2K4_11-0-19 .magritte-modal___C4o5U_11-0-19,
275
+ .magritte-animation-exit-left-active___XW2K4_11-0-19.magritte-modal-overlay-with-background___DDxJn_11-0-19{
276
276
  transition-duration:var(--exit-animation-duration);
277
277
  transition-timing-function:var(--magritte-semantic-animation-ease-in-out-200-timing-function-v25-0-0);
278
278
  }
279
- .magritte-animation-enter-right___rrMS0_11-0-17.magritte-modal-overlay-with-background___DDxJn_11-0-17{
279
+ .magritte-animation-enter-right___rrMS0_11-0-19.magritte-modal-overlay-with-background___DDxJn_11-0-19{
280
280
  opacity:0;
281
281
  }
282
- .magritte-animation-enter-right___rrMS0_11-0-17 .magritte-modal___C4o5U_11-0-17{
282
+ .magritte-animation-enter-right___rrMS0_11-0-19 .magritte-modal___C4o5U_11-0-19{
283
283
  opacity:0;
284
284
  transform:translateX(100%);
285
285
  }
286
- .magritte-animation-enter-right-active___p7rg-_11-0-17{
286
+ .magritte-animation-enter-right-active___p7rg-_11-0-19{
287
287
  --enter-animation-duration:0;
288
288
  --exit-animation-duration:0;
289
289
  }
290
290
  @media (prefers-reduced-motion: no-preference){
291
- .magritte-animation-enter-right-active___p7rg-_11-0-17{
291
+ .magritte-animation-enter-right-active___p7rg-_11-0-19{
292
292
  --enter-animation-duration:var(--magritte-semantic-animation-ease-in-out-300-duration-v25-0-0);
293
293
  --exit-animation-duration:var(--magritte-semantic-animation-ease-in-out-200-duration-v25-0-0);
294
294
  }
295
295
  }
296
- .magritte-animation-enter-right-active___p7rg-_11-0-17 .magritte-modal___C4o5U_11-0-17,
297
- .magritte-animation-enter-right-active___p7rg-_11-0-17.magritte-modal-overlay-with-background___DDxJn_11-0-17{
296
+ .magritte-animation-enter-right-active___p7rg-_11-0-19 .magritte-modal___C4o5U_11-0-19,
297
+ .magritte-animation-enter-right-active___p7rg-_11-0-19.magritte-modal-overlay-with-background___DDxJn_11-0-19{
298
298
  opacity:1;
299
299
  transition-duration:var(--enter-animation-duration);
300
300
  transition-timing-function:var(--magritte-semantic-animation-ease-in-out-300-timing-function-v25-0-0);
301
301
  transform:translateX(0);
302
302
  }
303
- .magritte-animation-exit-right___f3qIC_11-0-17.magritte-modal-overlay-with-background___DDxJn_11-0-17{
303
+ .magritte-animation-exit-right___f3qIC_11-0-19.magritte-modal-overlay-with-background___DDxJn_11-0-19{
304
304
  opacity:1;
305
305
  }
306
- .magritte-animation-exit-right___f3qIC_11-0-17 .magritte-modal___C4o5U_11-0-17{
306
+ .magritte-animation-exit-right___f3qIC_11-0-19 .magritte-modal___C4o5U_11-0-19{
307
307
  opacity:1;
308
308
  transform:translateX(0);
309
309
  }
310
- .magritte-animation-exit-right-active___-sG1k_11-0-17{
310
+ .magritte-animation-exit-right-active___-sG1k_11-0-19{
311
311
  --enter-animation-duration:0;
312
312
  --exit-animation-duration:0;
313
313
  }
314
314
  @media (prefers-reduced-motion: no-preference){
315
- .magritte-animation-exit-right-active___-sG1k_11-0-17{
315
+ .magritte-animation-exit-right-active___-sG1k_11-0-19{
316
316
  --enter-animation-duration:var(--magritte-semantic-animation-ease-in-out-300-duration-v25-0-0);
317
317
  --exit-animation-duration:var(--magritte-semantic-animation-ease-in-out-200-duration-v25-0-0);
318
318
  }
319
319
  }
320
- .magritte-animation-exit-right-active___-sG1k_11-0-17.magritte-modal-overlay-with-background___DDxJn_11-0-17{
320
+ .magritte-animation-exit-right-active___-sG1k_11-0-19.magritte-modal-overlay-with-background___DDxJn_11-0-19{
321
321
  opacity:0;
322
322
  }
323
- .magritte-animation-exit-right-active___-sG1k_11-0-17 .magritte-modal___C4o5U_11-0-17{
323
+ .magritte-animation-exit-right-active___-sG1k_11-0-19 .magritte-modal___C4o5U_11-0-19{
324
324
  opacity:0;
325
325
  transform:translateX(100%);
326
326
  }
327
- .magritte-animation-exit-right-active___-sG1k_11-0-17 .magritte-modal___C4o5U_11-0-17,
328
- .magritte-animation-exit-right-active___-sG1k_11-0-17.magritte-modal-overlay-with-background___DDxJn_11-0-17{
327
+ .magritte-animation-exit-right-active___-sG1k_11-0-19 .magritte-modal___C4o5U_11-0-19,
328
+ .magritte-animation-exit-right-active___-sG1k_11-0-19.magritte-modal-overlay-with-background___DDxJn_11-0-19{
329
329
  transition-duration:var(--exit-animation-duration);
330
330
  transition-timing-function:var(--magritte-semantic-animation-ease-in-out-200-timing-function-v25-0-0);
331
331
  }
332
- .magritte-tree-selector-container___4cdf5_11-0-17{
332
+ .magritte-tree-selector-container___4cdf5_11-0-19{
333
333
  height:100%;
334
334
  overflow:hidden;
335
335
  max-width:calc(100% - 24px);
@@ -339,16 +339,16 @@
339
339
  --magritte-ui-scrollbar-offset-right:-24px;
340
340
  --magritte-ui-scrollbar-offset-top:0;
341
341
  }
342
- .magritte-no-horizontal-paddings___Q-i-5_11-0-17 .magritte-tree-selector-container___4cdf5_11-0-17{
342
+ .magritte-no-horizontal-paddings___Q-i-5_11-0-19 .magritte-tree-selector-container___4cdf5_11-0-19{
343
343
  margin:0;
344
344
  padding:0;
345
345
  --magritte-ui-scrollbar-offset-right:0;
346
346
  }
347
- .magritte-grow-limiter___GmpBj_11-0-17{
347
+ .magritte-grow-limiter___GmpBj_11-0-19{
348
348
  flex:1 0;
349
349
  --magritte-ui-scrollbar-offset-top:0;
350
350
  }
351
- .magritte-modal-scroll-container___hOCdh_11-0-17{
351
+ .magritte-modal-scroll-container___hOCdh_11-0-19{
352
352
  display:flex;
353
353
  flex-direction:column;
354
354
  flex:1 1;
@@ -359,23 +359,23 @@
359
359
  padding:0 calc(var(--magritte-ui-modal-hor-padding-mul) * 24px);
360
360
  margin:0;
361
361
  }
362
- .magritte-modal-scroll-container___hOCdh_11-0-17::-webkit-scrollbar{
362
+ .magritte-modal-scroll-container___hOCdh_11-0-19::-webkit-scrollbar{
363
363
  display:none;
364
364
  }
365
- .magritte-content-overlay-top___6snWk_11-0-17{
365
+ .magritte-content-overlay-top___6snWk_11-0-19{
366
366
  position:absolute;
367
367
  height:0;
368
368
  left:calc(var(--magritte-ui-modal-hor-padding-mul) * 24px);
369
369
  right:calc(var(--magritte-ui-modal-hor-padding-mul) * 24px);
370
370
  }
371
- .magritte-content-overlay-top___6snWk_11-0-17.magritte-nav-bar___CL7d-_11-0-17,
372
- .magritte-content-overlay-top___6snWk_11-0-17.magritte-header___pufwA_11-0-17{
371
+ .magritte-content-overlay-top___6snWk_11-0-19.magritte-nav-bar___CL7d-_11-0-19,
372
+ .magritte-content-overlay-top___6snWk_11-0-19.magritte-header___pufwA_11-0-19{
373
373
  bottom:0;
374
374
  }
375
- .magritte-content-overlay-top___6snWk_11-0-17.magritte-static___3B6cn_11-0-17{
375
+ .magritte-content-overlay-top___6snWk_11-0-19.magritte-static___3B6cn_11-0-19{
376
376
  top:0;
377
377
  }
378
- .magritte-content-overlay-bottom___bDuPC_11-0-17{
378
+ .magritte-content-overlay-bottom___bDuPC_11-0-19{
379
379
  position:absolute;
380
380
  left:calc(var(--magritte-ui-modal-hor-padding-mul) * 24px);
381
381
  right:calc(var(--magritte-ui-modal-hor-padding-mul) * 24px);
@@ -383,10 +383,10 @@
383
383
  bottom:0;
384
384
  }
385
385
  @supports selector(:has(*)){
386
- .magritte-modal-content-wrapper___VzoTN_11-0-17:has(.magritte-sticky-header___TPafy_11-0-17){
386
+ .magritte-modal-content-wrapper___VzoTN_11-0-19:has(.magritte-sticky-header___TPafy_11-0-19){
387
387
  padding:0;
388
388
  }
389
- .magritte-modal-content-wrapper___VzoTN_11-0-17:not(:has(.magritte-sticky-header___TPafy_11-0-17)):has(.magritte-grow-limiter___GmpBj_11-0-17 > .magritte-modal-media___UqHGM_11-0-17:first-child){
389
+ .magritte-modal-content-wrapper___VzoTN_11-0-19:not(:has(.magritte-sticky-header___TPafy_11-0-19)):has(.magritte-grow-limiter___GmpBj_11-0-19 > .magritte-modal-media___UqHGM_11-0-19:first-child){
390
390
  padding-top:12px;
391
391
  }
392
392
  }
package/index.js CHANGED
@@ -17,9 +17,10 @@ import './internal/ModalContent.js';
17
17
  import './internal/isTreeSelectorChild.js';
18
18
  import '@hh.ru/magritte-ui-tree-selector';
19
19
  import '@hh.ru/magritte-ui-textarea';
20
- import './modal-DGUtZ5NS.js';
20
+ import './modal-Bt4oRCfv.js';
21
21
  import './internal/ModalInner.js';
22
22
  import '@hh.ru/magritte-ui-action-bar';
23
+ import './actionBarDefaults.js';
23
24
  import './internal/ModalBody.js';
24
25
  import '@hh.ru/magritte-ui-content-overlay';
25
26
  import './internal/ModalSlotsContext.js';
@@ -38,5 +39,6 @@ import './internal/usePageHeaderScrollAnimation.js';
38
39
  import './public/ModalMedia.js';
39
40
  import '@hh.ru/magritte-ui-theme-wrapper';
40
41
  import '@hh.ru/magritte-ui-layout';
42
+ import './withImageDefaults.js';
41
43
  import '@hh.ru/magritte-ui-title';
42
44
  //# sourceMappingURL=index.js.map
package/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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -7,7 +7,7 @@ import { useContentOverlay, ContentOverlayRoot } from '@hh.ru/magritte-ui-conten
7
7
  import { useRegisterTopOverlayCandidate, TOP_OVERLAY_PRIORITY, useResolvedTopOverlayElement } from './ModalSlotsContext.js';
8
8
  import { ModalStickyHeader } from './ModalStickyHeader.js';
9
9
  import { useScrollbar, Scrollbar } from '@hh.ru/magritte-ui-scrollbar';
10
- import { s as styles } from '../modal-DGUtZ5NS.js';
10
+ import { s as styles } from '../modal-Bt4oRCfv.js';
11
11
  import '@hh.ru/magritte-internal-slot-registry';
12
12
  import '@hh.ru/magritte-ui-nav-bar';
13
13
 
@@ -2,7 +2,7 @@ import './../index.css';
2
2
  import { jsx } from 'react/jsx-runtime';
3
3
  import { isTreeSelectorChild } from './isTreeSelectorChild.js';
4
4
  import { TextAreaGrowLimiter } from '@hh.ru/magritte-ui-textarea';
5
- import { s as styles } from '../modal-DGUtZ5NS.js';
5
+ import { s as styles } from '../modal-Bt4oRCfv.js';
6
6
  import 'react';
7
7
  import '@hh.ru/magritte-ui-tree-selector';
8
8
 
@@ -4,9 +4,10 @@ import { useState, useMemo } from 'react';
4
4
  import classnames from 'classnames';
5
5
  import { useAccessibleRegionProps } from '@hh.ru/magritte-internal-accessible-region';
6
6
  import { ActionBarDefaultPropsContext } from '@hh.ru/magritte-ui-action-bar';
7
+ import { MODAL_ACTION_BAR_DEFAULTS } from '../actionBarDefaults.js';
7
8
  import { ModalBody } from './ModalBody.js';
8
9
  import { NavBar } from '@hh.ru/magritte-ui-nav-bar';
9
- import { s as styles } from '../modal-DGUtZ5NS.js';
10
+ import { s as styles } from '../modal-Bt4oRCfv.js';
10
11
  import '@hh.ru/magritte-common-use-multiple-refs';
11
12
  import '@hh.ru/magritte-ui-content-overlay';
12
13
  import './ModalSlotsContext.js';
@@ -14,7 +15,7 @@ import '@hh.ru/magritte-internal-slot-registry';
14
15
  import './ModalStickyHeader.js';
15
16
  import '@hh.ru/magritte-ui-scrollbar';
16
17
 
17
- const ACTION_BAR_DEFAULT_PROPS = { type: 'auto', padding: 24, showDivider: 'with-scroll' };
18
+ const ACTION_BAR_DEFAULT_PROPS = MODAL_ACTION_BAR_DEFAULTS;
18
19
  /**
19
20
  * Внутренний контейнер модала — сам `role="dialog"`-узел. Рендерится **под** `AccessibleRegionProvider`
20
21
  * и `ModalSlotsProvider`, что и делает его отдельным компонентом:
@@ -1 +1 @@
1
- {"version":3,"file":"ModalInner.js","sources":["src/internal/ModalInner.tsx"],"sourcesContent":["import { type FC, type HTMLAttributes, type ReactNode, type Ref, useMemo, useState } from 'react';\nimport classnames from 'classnames';\n\nimport { useAccessibleRegionProps, type ExplicitRegionProps } from '@hh.ru/magritte-internal-accessible-region';\nimport { ActionBarDefaultPropsContext, type ActionBarProps } from '@hh.ru/magritte-ui-action-bar';\nimport { ModalBody } from '@hh.ru/magritte-ui-modal/internal/ModalBody';\nimport { type ModalProps } from '@hh.ru/magritte-ui-modal/public/types';\nimport { NavBar } from '@hh.ru/magritte-ui-nav-bar';\n\nimport styles from './modal.less';\n\nconst ACTION_BAR_DEFAULT_PROPS: Partial<ActionBarProps> = { type: 'auto', padding: 24, showDivider: 'with-scroll' };\n\nexport interface ModalInnerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n explicitAria: ExplicitRegionProps;\n ariaModal: boolean | undefined;\n refCallback: Ref<HTMLDivElement>;\n size: NonNullable<ModalProps['size']>;\n height: ModalProps['height'];\n minHeight: ModalProps['minHeight'];\n disableVerticalPaddings: boolean;\n disableHorizontalPaddings: boolean;\n showOverlay: boolean;\n header: ReactNode;\n footer: ReactNode;\n children: ReactNode;\n}\n\n/**\n * Внутренний контейнер модала — сам `role=\"dialog\"`-узел. Рендерится **под** `AccessibleRegionProvider`\n * и `ModalSlotsProvider`, что и делает его отдельным компонентом:\n * `useAccessibleRegionProps` видит заголовок/подзаголовок, зарегистрированные потомками\n * (`NavBar.TitleContainer` в проп `header`), и выставляет `aria-labelledby` / `aria-describedby`\n * (явные `aria-*` пропы при этом всё перекрывают).\n *\n * Футер приходит пропом и рендерится здесь — вне скролл-зоны, прижатым к низу. От его наличия зависят\n * классы паддингов и нижний divider контента (его прячем, когда у `ActionBar` футера есть progress bar).\n */\nexport const ModalInner: FC<ModalInnerProps> = ({\n explicitAria,\n ariaModal,\n refCallback,\n size,\n height,\n minHeight,\n disableVerticalPaddings,\n disableHorizontalPaddings,\n showOverlay,\n header,\n footer,\n children,\n ...rest\n}) => {\n const aria = useAccessibleRegionProps(explicitAria);\n\n const [scrollContainer, setScrollContainer] = useState<HTMLElement | null>(null);\n const actionBarDefaultProps = useMemo(() => ({ ...ACTION_BAR_DEFAULT_PROPS, scrollContainer }), [scrollContainer]);\n\n return (\n <div\n {...rest}\n {...aria}\n aria-modal={ariaModal}\n role=\"dialog\"\n ref={refCallback}\n tabIndex={-1}\n className={classnames(styles.modal, {\n [styles.sizeSmall]: size === 'small',\n [styles.sizeMedium]: size === 'medium',\n [styles.modalFullHeight]: height === 'full-screen',\n [styles.noVerticalPaddings]: disableVerticalPaddings,\n [styles.noHorizontalPaddings]: disableHorizontalPaddings,\n [styles.modalWithBorder]: !showOverlay,\n })}\n style={{\n height: typeof height === 'number' ? `${height}px` : undefined,\n minHeight: typeof minHeight === 'number' ? `min(calc(100vh - 12px * 2), ${minHeight}px)` : undefined,\n }}\n >\n <NavBar.TriggerProvider>\n <ModalBody header={header} scrollContainerRef={setScrollContainer}>\n {children}\n </ModalBody>\n </NavBar.TriggerProvider>\n {footer ? (\n <div className={styles.modalFooter} data-qa=\"modal-footer\">\n <ActionBarDefaultPropsContext props={actionBarDefaultProps}>{footer}</ActionBarDefaultPropsContext>\n </div>\n ) : (\n <div className={classnames(styles.modalFooter, styles.modalFooterEmpty)} />\n )}\n </div>\n );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;AAWA,MAAM,wBAAwB,GAA4B,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE,WAAW,EAAE,aAAa,EAAE,CAAC;AAiBpH;;;;;;;;;AASG;AACI,MAAM,UAAU,GAAwB,CAAC,EAC5C,YAAY,EACZ,SAAS,EACT,WAAW,EACX,IAAI,EACJ,MAAM,EACN,SAAS,EACT,uBAAuB,EACvB,yBAAyB,EACzB,WAAW,EACX,MAAM,EACN,MAAM,EACN,QAAQ,EACR,GAAG,IAAI,EACV,KAAI;AACD,IAAA,MAAM,IAAI,GAAG,wBAAwB,CAAC,YAAY,CAAC,CAAC;IAEpD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAqB,IAAI,CAAC,CAAC;IACjF,MAAM,qBAAqB,GAAG,OAAO,CAAC,OAAO,EAAE,GAAG,wBAAwB,EAAE,eAAe,EAAE,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;AAEnH,IAAA,QACIA,IAAA,CAAA,KAAA,EAAA,EAAA,GACQ,IAAI,EAAA,GACJ,IAAI,EAAA,YAAA,EACI,SAAS,EACrB,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,WAAW,EAChB,QAAQ,EAAE,CAAC,CAAC,EACZ,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE;AAChC,YAAA,CAAC,MAAM,CAAC,SAAS,GAAG,IAAI,KAAK,OAAO;AACpC,YAAA,CAAC,MAAM,CAAC,UAAU,GAAG,IAAI,KAAK,QAAQ;AACtC,YAAA,CAAC,MAAM,CAAC,eAAe,GAAG,MAAM,KAAK,aAAa;AAClD,YAAA,CAAC,MAAM,CAAC,kBAAkB,GAAG,uBAAuB;AACpD,YAAA,CAAC,MAAM,CAAC,oBAAoB,GAAG,yBAAyB;AACxD,YAAA,CAAC,MAAM,CAAC,eAAe,GAAG,CAAC,WAAW;SACzC,CAAC,EACF,KAAK,EAAE;AACH,YAAA,MAAM,EAAE,OAAO,MAAM,KAAK,QAAQ,GAAG,CAAA,EAAG,MAAM,CAAA,EAAA,CAAI,GAAG,SAAS;AAC9D,YAAA,SAAS,EAAE,OAAO,SAAS,KAAK,QAAQ,GAAG,CAAA,4BAAA,EAA+B,SAAS,CAAA,GAAA,CAAK,GAAG,SAAS;AACvG,SAAA,EAAA,QAAA,EAAA,CAEDC,GAAC,CAAA,MAAM,CAAC,eAAe,EACnB,EAAA,QAAA,EAAAA,GAAA,CAAC,SAAS,EAAA,EAAC,MAAM,EAAE,MAAM,EAAE,kBAAkB,EAAE,kBAAkB,EAC5D,QAAA,EAAA,QAAQ,EACD,CAAA,EAAA,CACS,EACxB,MAAM,IACHA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,WAAW,EAAU,SAAA,EAAA,cAAc,EACtD,QAAA,EAAAA,GAAA,CAAC,4BAA4B,EAAA,EAAC,KAAK,EAAE,qBAAqB,EAAA,QAAA,EAAG,MAAM,EAAA,CAAgC,EACjG,CAAA,KAENA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,gBAAgB,CAAC,EAAA,CAAI,CAC9E,CAAA,EAAA,CACC,EACR;AACN;;;;"}
1
+ {"version":3,"file":"ModalInner.js","sources":["src/internal/ModalInner.tsx"],"sourcesContent":["import { type FC, type HTMLAttributes, type ReactNode, type Ref, useMemo, useState } from 'react';\nimport classnames from 'classnames';\n\nimport { useAccessibleRegionProps, type ExplicitRegionProps } from '@hh.ru/magritte-internal-accessible-region';\nimport { ActionBarDefaultPropsContext, type ActionBarProps } from '@hh.ru/magritte-ui-action-bar';\nimport { MODAL_ACTION_BAR_DEFAULTS } from '@hh.ru/magritte-ui-modal/actionBarDefaults';\nimport { ModalBody } from '@hh.ru/magritte-ui-modal/internal/ModalBody';\nimport { type ModalProps } from '@hh.ru/magritte-ui-modal/public/types';\nimport { NavBar } from '@hh.ru/magritte-ui-nav-bar';\n\nimport styles from './modal.less';\n\nconst ACTION_BAR_DEFAULT_PROPS: Partial<ActionBarProps> = MODAL_ACTION_BAR_DEFAULTS;\n\nexport interface ModalInnerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n explicitAria: ExplicitRegionProps;\n ariaModal: boolean | undefined;\n refCallback: Ref<HTMLDivElement>;\n size: NonNullable<ModalProps['size']>;\n height: ModalProps['height'];\n minHeight: ModalProps['minHeight'];\n disableVerticalPaddings: boolean;\n disableHorizontalPaddings: boolean;\n showOverlay: boolean;\n header: ReactNode;\n footer: ReactNode;\n children: ReactNode;\n}\n\n/**\n * Внутренний контейнер модала — сам `role=\"dialog\"`-узел. Рендерится **под** `AccessibleRegionProvider`\n * и `ModalSlotsProvider`, что и делает его отдельным компонентом:\n * `useAccessibleRegionProps` видит заголовок/подзаголовок, зарегистрированные потомками\n * (`NavBar.TitleContainer` в проп `header`), и выставляет `aria-labelledby` / `aria-describedby`\n * (явные `aria-*` пропы при этом всё перекрывают).\n *\n * Футер приходит пропом и рендерится здесь — вне скролл-зоны, прижатым к низу. От его наличия зависят\n * классы паддингов и нижний divider контента (его прячем, когда у `ActionBar` футера есть progress bar).\n */\nexport const ModalInner: FC<ModalInnerProps> = ({\n explicitAria,\n ariaModal,\n refCallback,\n size,\n height,\n minHeight,\n disableVerticalPaddings,\n disableHorizontalPaddings,\n showOverlay,\n header,\n footer,\n children,\n ...rest\n}) => {\n const aria = useAccessibleRegionProps(explicitAria);\n\n const [scrollContainer, setScrollContainer] = useState<HTMLElement | null>(null);\n const actionBarDefaultProps = useMemo(() => ({ ...ACTION_BAR_DEFAULT_PROPS, scrollContainer }), [scrollContainer]);\n\n return (\n <div\n {...rest}\n {...aria}\n aria-modal={ariaModal}\n role=\"dialog\"\n ref={refCallback}\n tabIndex={-1}\n className={classnames(styles.modal, {\n [styles.sizeSmall]: size === 'small',\n [styles.sizeMedium]: size === 'medium',\n [styles.modalFullHeight]: height === 'full-screen',\n [styles.noVerticalPaddings]: disableVerticalPaddings,\n [styles.noHorizontalPaddings]: disableHorizontalPaddings,\n [styles.modalWithBorder]: !showOverlay,\n })}\n style={{\n height: typeof height === 'number' ? `${height}px` : undefined,\n minHeight: typeof minHeight === 'number' ? `min(calc(100vh - 12px * 2), ${minHeight}px)` : undefined,\n }}\n >\n <NavBar.TriggerProvider>\n <ModalBody header={header} scrollContainerRef={setScrollContainer}>\n {children}\n </ModalBody>\n </NavBar.TriggerProvider>\n {footer ? (\n <div className={styles.modalFooter} data-qa=\"modal-footer\">\n <ActionBarDefaultPropsContext props={actionBarDefaultProps}>{footer}</ActionBarDefaultPropsContext>\n </div>\n ) : (\n <div className={classnames(styles.modalFooter, styles.modalFooterEmpty)} />\n )}\n </div>\n );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;AAYA,MAAM,wBAAwB,GAA4B,yBAAyB,CAAC;AAiBpF;;;;;;;;;AASG;AACI,MAAM,UAAU,GAAwB,CAAC,EAC5C,YAAY,EACZ,SAAS,EACT,WAAW,EACX,IAAI,EACJ,MAAM,EACN,SAAS,EACT,uBAAuB,EACvB,yBAAyB,EACzB,WAAW,EACX,MAAM,EACN,MAAM,EACN,QAAQ,EACR,GAAG,IAAI,EACV,KAAI;AACD,IAAA,MAAM,IAAI,GAAG,wBAAwB,CAAC,YAAY,CAAC,CAAC;IAEpD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAqB,IAAI,CAAC,CAAC;IACjF,MAAM,qBAAqB,GAAG,OAAO,CAAC,OAAO,EAAE,GAAG,wBAAwB,EAAE,eAAe,EAAE,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;AAEnH,IAAA,QACIA,IAAA,CAAA,KAAA,EAAA,EAAA,GACQ,IAAI,EAAA,GACJ,IAAI,EAAA,YAAA,EACI,SAAS,EACrB,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,WAAW,EAChB,QAAQ,EAAE,CAAC,CAAC,EACZ,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE;AAChC,YAAA,CAAC,MAAM,CAAC,SAAS,GAAG,IAAI,KAAK,OAAO;AACpC,YAAA,CAAC,MAAM,CAAC,UAAU,GAAG,IAAI,KAAK,QAAQ;AACtC,YAAA,CAAC,MAAM,CAAC,eAAe,GAAG,MAAM,KAAK,aAAa;AAClD,YAAA,CAAC,MAAM,CAAC,kBAAkB,GAAG,uBAAuB;AACpD,YAAA,CAAC,MAAM,CAAC,oBAAoB,GAAG,yBAAyB;AACxD,YAAA,CAAC,MAAM,CAAC,eAAe,GAAG,CAAC,WAAW;SACzC,CAAC,EACF,KAAK,EAAE;AACH,YAAA,MAAM,EAAE,OAAO,MAAM,KAAK,QAAQ,GAAG,CAAA,EAAG,MAAM,CAAA,EAAA,CAAI,GAAG,SAAS;AAC9D,YAAA,SAAS,EAAE,OAAO,SAAS,KAAK,QAAQ,GAAG,CAAA,4BAAA,EAA+B,SAAS,CAAA,GAAA,CAAK,GAAG,SAAS;AACvG,SAAA,EAAA,QAAA,EAAA,CAEDC,GAAC,CAAA,MAAM,CAAC,eAAe,EACnB,EAAA,QAAA,EAAAA,GAAA,CAAC,SAAS,EAAA,EAAC,MAAM,EAAE,MAAM,EAAE,kBAAkB,EAAE,kBAAkB,EAC5D,QAAA,EAAA,QAAQ,EACD,CAAA,EAAA,CACS,EACxB,MAAM,IACHA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,WAAW,EAAU,SAAA,EAAA,cAAc,EACtD,QAAA,EAAAA,GAAA,CAAC,4BAA4B,EAAA,EAAC,KAAK,EAAE,qBAAqB,EAAA,QAAA,EAAG,MAAM,EAAA,CAAgC,EACjG,CAAA,KAENA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,gBAAgB,CAAC,EAAA,CAAI,CAC9E,CAAA,EAAA,CACC,EACR;AACN;;;;"}
@@ -4,7 +4,7 @@ import { useMemo } from 'react';
4
4
  import classnames from 'classnames';
5
5
  import { useRegisterTopOverlayCandidate, TOP_OVERLAY_PRIORITY } from './ModalSlotsContext.js';
6
6
  import { NavBarDefaultPropsContext } from '@hh.ru/magritte-ui-nav-bar';
7
- import { s as styles } from '../modal-DGUtZ5NS.js';
7
+ import { s as styles } from '../modal-Bt4oRCfv.js';
8
8
  import '@hh.ru/magritte-internal-slot-registry';
9
9
 
10
10
  const NAV_BAR_ACTIONS_DEFAULT_PROPS = {
@@ -1,6 +1,6 @@
1
1
  import './../index.css';
2
2
  import coreTokens from '@hh.ru/magritte-design-tokens/core-tokens';
3
- import { s as styles } from '../modal-DGUtZ5NS.js';
3
+ import { s as styles } from '../modal-Bt4oRCfv.js';
4
4
 
5
5
  /** Отступ сверху под page-header (px) — дефолт для `position=left|right` без оверлея. */
6
6
  const DEFAULT_PAGE_HEADER_PADDING = 72;
@@ -0,0 +1,5 @@
1
+ import './index.css';
2
+ var styles = {"sticky-header":"magritte-sticky-header___TPafy_11-0-19","stickyHeader":"magritte-sticky-header___TPafy_11-0-19","sticky-header-inner":"magritte-sticky-header-inner___u5p8h_11-0-19","stickyHeaderInner":"magritte-sticky-header-inner___u5p8h_11-0-19","modal-media":"magritte-modal-media___UqHGM_11-0-19","modalMedia":"magritte-modal-media___UqHGM_11-0-19","fixed-height":"magritte-fixed-height___wyJ7-_11-0-19","fixedHeight":"magritte-fixed-height___wyJ7-_11-0-19","contain":"magritte-contain___3QD0Z_11-0-19","cover":"magritte-cover___nry9O_11-0-19","content-overlay-top":"magritte-content-overlay-top___6snWk_11-0-19","contentOverlayTop":"magritte-content-overlay-top___6snWk_11-0-19","grow-limiter":"magritte-grow-limiter___GmpBj_11-0-19","growLimiter":"magritte-grow-limiter___GmpBj_11-0-19","modal-overlay":"magritte-modal-overlay___WwfCg_11-0-19","modalOverlay":"magritte-modal-overlay___WwfCg_11-0-19","modal-overlay-with-background":"magritte-modal-overlay-with-background___DDxJn_11-0-19","modalOverlayWithBackground":"magritte-modal-overlay-with-background___DDxJn_11-0-19","modal":"magritte-modal___C4o5U_11-0-19","modal-overlay-left":"magritte-modal-overlay-left___agPyC_11-0-19","modalOverlayLeft":"magritte-modal-overlay-left___agPyC_11-0-19","modal-overlay-right":"magritte-modal-overlay-right___-XDAx_11-0-19","modalOverlayRight":"magritte-modal-overlay-right___-XDAx_11-0-19","size-small":"magritte-size-small___cI-Ql_11-0-19","sizeSmall":"magritte-size-small___cI-Ql_11-0-19","size-medium":"magritte-size-medium___jnqfu_11-0-19","sizeMedium":"magritte-size-medium___jnqfu_11-0-19","no-vertical-paddings":"magritte-no-vertical-paddings___dxyot_11-0-19","noVerticalPaddings":"magritte-no-vertical-paddings___dxyot_11-0-19","no-horizontal-paddings":"magritte-no-horizontal-paddings___Q-i-5_11-0-19","noHorizontalPaddings":"magritte-no-horizontal-paddings___Q-i-5_11-0-19","modal-full-height":"magritte-modal-full-height___Aew5F_11-0-19","modalFullHeight":"magritte-modal-full-height___Aew5F_11-0-19","modal-with-border":"magritte-modal-with-border___KSnhf_11-0-19","modalWithBorder":"magritte-modal-with-border___KSnhf_11-0-19","modal-content-wrapper":"magritte-modal-content-wrapper___VzoTN_11-0-19","modalContentWrapper":"magritte-modal-content-wrapper___VzoTN_11-0-19","modal-footer":"magritte-modal-footer___Ha-sZ_11-0-19","modalFooter":"magritte-modal-footer___Ha-sZ_11-0-19","modal-footer-empty":"magritte-modal-footer-empty___tmH-x_11-0-19","modalFooterEmpty":"magritte-modal-footer-empty___tmH-x_11-0-19","animation-timeout":"magritte-animation-timeout___G4Hl1_11-0-19","animationTimeout":"magritte-animation-timeout___G4Hl1_11-0-19","animation-enter-center":"magritte-animation-enter-center___sq8j7_11-0-19","animationEnterCenter":"magritte-animation-enter-center___sq8j7_11-0-19","animation-enter-center-active":"magritte-animation-enter-center-active___ORYEh_11-0-19","animationEnterCenterActive":"magritte-animation-enter-center-active___ORYEh_11-0-19","animation-exit-center":"magritte-animation-exit-center___lLCX1_11-0-19","animationExitCenter":"magritte-animation-exit-center___lLCX1_11-0-19","animation-exit-center-active":"magritte-animation-exit-center-active___Ik2Yl_11-0-19","animationExitCenterActive":"magritte-animation-exit-center-active___Ik2Yl_11-0-19","animation-enter-left":"magritte-animation-enter-left___jJDlv_11-0-19","animationEnterLeft":"magritte-animation-enter-left___jJDlv_11-0-19","animation-enter-left-active":"magritte-animation-enter-left-active___-kFij_11-0-19","animationEnterLeftActive":"magritte-animation-enter-left-active___-kFij_11-0-19","animation-exit-left":"magritte-animation-exit-left___G2Plq_11-0-19","animationExitLeft":"magritte-animation-exit-left___G2Plq_11-0-19","animation-exit-left-active":"magritte-animation-exit-left-active___XW2K4_11-0-19","animationExitLeftActive":"magritte-animation-exit-left-active___XW2K4_11-0-19","animation-enter-right":"magritte-animation-enter-right___rrMS0_11-0-19","animationEnterRight":"magritte-animation-enter-right___rrMS0_11-0-19","animation-enter-right-active":"magritte-animation-enter-right-active___p7rg-_11-0-19","animationEnterRightActive":"magritte-animation-enter-right-active___p7rg-_11-0-19","animation-exit-right":"magritte-animation-exit-right___f3qIC_11-0-19","animationExitRight":"magritte-animation-exit-right___f3qIC_11-0-19","animation-exit-right-active":"magritte-animation-exit-right-active___-sG1k_11-0-19","animationExitRightActive":"magritte-animation-exit-right-active___-sG1k_11-0-19","tree-selector-container":"magritte-tree-selector-container___4cdf5_11-0-19","treeSelectorContainer":"magritte-tree-selector-container___4cdf5_11-0-19","modal-scroll-container":"magritte-modal-scroll-container___hOCdh_11-0-19","modalScrollContainer":"magritte-modal-scroll-container___hOCdh_11-0-19","nav-bar":"magritte-nav-bar___CL7d-_11-0-19","navBar":"magritte-nav-bar___CL7d-_11-0-19","header":"magritte-header___pufwA_11-0-19","static":"magritte-static___3B6cn_11-0-19","content-overlay-bottom":"magritte-content-overlay-bottom___bDuPC_11-0-19","contentOverlayBottom":"magritte-content-overlay-bottom___bDuPC_11-0-19"};
3
+
4
+ export { styles as s };
5
+ //# sourceMappingURL=modal-Bt4oRCfv.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"modal-Bt4oRCfv.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hh.ru/magritte-ui-modal",
3
- "version": "11.0.17",
3
+ "version": "11.0.19",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
@@ -16,7 +16,11 @@
16
16
  "ts-config": "yarn root:ts-config $(pwd)",
17
17
  "ts-check": "yarn root:ts-check $(pwd)",
18
18
  "test": "yarn root:test $(pwd)",
19
- "watch": "yarn root:watch $(pwd)"
19
+ "watch": "yarn root:watch $(pwd)",
20
+ "figma-publish": "yarn root:figma-publish $(pwd)",
21
+ "figma-unpublish": "yarn root:figma-unpublish $(pwd)",
22
+ "figma-snapshot-check": "yarn root:figma-snapshot $(pwd)",
23
+ "figma-snapshot-update": "yarn root:figma-snapshot $(pwd) --update"
20
24
  },
21
25
  "dependencies": {
22
26
  "@hh.ru/magritte-common-dom-storage": "1.0.9",
@@ -31,21 +35,21 @@
31
35
  "@hh.ru/magritte-internal-accessible-region": "1.0.3",
32
36
  "@hh.ru/magritte-internal-layer-name": "3.4.1",
33
37
  "@hh.ru/magritte-internal-slot-registry": "1.1.0",
34
- "@hh.ru/magritte-ui-action-bar": "5.4.12",
38
+ "@hh.ru/magritte-ui-action-bar": "5.4.14",
35
39
  "@hh.ru/magritte-ui-breakpoint": "6.1.1",
36
40
  "@hh.ru/magritte-ui-content-overlay": "1.2.1",
37
- "@hh.ru/magritte-ui-divider": "3.2.6",
38
- "@hh.ru/magritte-ui-icon": "15.0.0",
41
+ "@hh.ru/magritte-ui-divider": "3.2.7",
42
+ "@hh.ru/magritte-ui-icon": "15.0.2",
39
43
  "@hh.ru/magritte-ui-layer": "3.2.6",
40
44
  "@hh.ru/magritte-ui-layout": "2.1.0",
41
45
  "@hh.ru/magritte-ui-mock-component": "1.1.7",
42
- "@hh.ru/magritte-ui-nav-bar": "2.0.9",
43
- "@hh.ru/magritte-ui-progress-bar": "5.0.31",
46
+ "@hh.ru/magritte-ui-nav-bar": "2.0.11",
47
+ "@hh.ru/magritte-ui-progress-bar": "5.0.32",
44
48
  "@hh.ru/magritte-ui-scrollbar": "1.0.33",
45
- "@hh.ru/magritte-ui-textarea": "3.3.40",
49
+ "@hh.ru/magritte-ui-textarea": "3.3.42",
46
50
  "@hh.ru/magritte-ui-theme-wrapper": "1.1.24",
47
- "@hh.ru/magritte-ui-title": "8.3.8",
48
- "@hh.ru/magritte-ui-tree-selector": "5.5.60"
51
+ "@hh.ru/magritte-ui-title": "8.3.9",
52
+ "@hh.ru/magritte-ui-tree-selector": "5.5.62"
49
53
  },
50
54
  "peerDependencies": {
51
55
  "classnames": ">=2.3.2",
@@ -56,5 +60,5 @@
56
60
  "publishConfig": {
57
61
  "access": "public"
58
62
  },
59
- "gitHead": "e4eaf35cc029b534db0c6ff47b1e675077437871"
63
+ "gitHead": "0e795b6a368fd7f09ca979320f466b80b049e4ea"
60
64
  }
package/public/Modal.js CHANGED
@@ -20,9 +20,10 @@ import { useModalTransition } from '../internal/useModalTransition.js';
20
20
  import { usePageHeaderScrollAnimation } from '../internal/usePageHeaderScrollAnimation.js';
21
21
  import { ModalMedia } from './ModalMedia.js';
22
22
  import { ThemeWrapper } from '@hh.ru/magritte-ui-theme-wrapper';
23
- import { s as styles } from '../modal-DGUtZ5NS.js';
23
+ import { s as styles } from '../modal-Bt4oRCfv.js';
24
24
  import '@hh.ru/magritte-ui-textarea';
25
25
  import '@hh.ru/magritte-ui-action-bar';
26
+ import '../actionBarDefaults.js';
26
27
  import '../internal/ModalBody.js';
27
28
  import '@hh.ru/magritte-ui-content-overlay';
28
29
  import '../internal/ModalStickyHeader.js';
@@ -1 +1 @@
1
- {"version":3,"file":"Modal.js","sources":["src/public/Modal.tsx"],"sourcesContent":["import {\n forwardRef,\n type HTMLAttributes,\n useRef,\n useState,\n type ForwardRefExoticComponent,\n type PropsWithoutRef,\n type RefAttributes,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { CSSTransition } from 'react-transition-group';\nimport classnames from 'classnames';\n\nimport { useServerEnv } from '@hh.ru/magritte-common-is-server-env';\nimport { keyboardMatch, keyboardKeys, useKeyboardNavigation } from '@hh.ru/magritte-common-keyboard';\nimport { CloseByClickOutsideContext } from '@hh.ru/magritte-common-mouse/useCloseByClickOutside';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { useNoBubbling } from '@hh.ru/magritte-common-use-no-bubbling';\nimport { AccessibleRegionProvider, type ExplicitRegionProps } from '@hh.ru/magritte-internal-accessible-region';\nimport { Layer } from '@hh.ru/magritte-ui-layer';\nimport { ModalContent } from '@hh.ru/magritte-ui-modal/internal/ModalContent';\nimport { ModalInner } from '@hh.ru/magritte-ui-modal/internal/ModalInner';\nimport { ModalSlotsProvider } from '@hh.ru/magritte-ui-modal/internal/ModalSlotsContext';\nimport {\n CSS_CLASSES,\n DEFAULT_PAGE_HEADER_PADDING,\n getAnimationTimeout,\n noop,\n} from '@hh.ru/magritte-ui-modal/internal/constants';\nimport { isTreeSelectorChild } from '@hh.ru/magritte-ui-modal/internal/isTreeSelectorChild';\nimport { useModalTransition } from '@hh.ru/magritte-ui-modal/internal/useModalTransition';\nimport { usePageHeaderScrollAnimation } from '@hh.ru/magritte-ui-modal/internal/usePageHeaderScrollAnimation';\nimport { ModalMedia, type ModalMediaProps } from '@hh.ru/magritte-ui-modal/public/ModalMedia';\nimport { type ModalProps } from '@hh.ru/magritte-ui-modal/public/types';\nimport { ThemeWrapper } from '@hh.ru/magritte-ui-theme-wrapper';\n\nimport styles from '../internal/modal.less';\n\ntype ModalRootProps = ModalProps &\n ExplicitRegionProps &\n Omit<HTMLAttributes<HTMLDivElement>, keyof ModalProps | 'role' | 'tabIndex' | 'className'>;\n\ninterface ModalCompound {\n Media: ForwardRefExoticComponent<ModalMediaProps & RefAttributes<HTMLDivElement>>;\n}\n\nexport const Modal = forwardRef<HTMLDivElement, ModalRootProps>(\n (\n {\n visible,\n size = 'medium',\n header,\n footer,\n children,\n onClose = noop,\n host,\n disableVerticalPaddings = false,\n disableHorizontalPaddings = false,\n closeByClickOutside = true,\n onAppear,\n onBeforeExit,\n onAfterExit,\n position = 'center',\n height = position === 'center' ? 'content' : 'full-screen',\n minHeight,\n showOverlay: _showOverlay = true,\n pageHeaderPadding = DEFAULT_PAGE_HEADER_PADDING,\n returnFocusOnClose,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n 'aria-describedby': ariaDescribedby,\n 'aria-description': ariaDescription,\n ...rest\n },\n ref\n ) => {\n const isServerEnv = useServerEnv();\n const [animationTimeout] = useState(getAnimationTimeout);\n\n const modalRef = useRef<HTMLDivElement>(null);\n const overlayRef = useRef<HTMLDivElement>(null);\n const keyboardNavigationRef = useKeyboardNavigation({ enabled: visible && !isServerEnv, mode: 'loop' });\n const modalRefCallback = useMultipleRefs(ref, modalRef, keyboardNavigationRef);\n\n const showOverlay = position === 'center' || _showOverlay;\n\n // TreeSelector сам управляет своим скроллом и должен занимать всю высоту модала.\n const resolvedHeight = isTreeSelectorChild(children) ? 'full-screen' : height;\n\n const { onEntering, onEntered, onExit, onExited, isHiddenForBreakpoint } = useModalTransition({\n visible,\n isServerEnv,\n showOverlay,\n returnFocusOnClose,\n onAppear,\n onBeforeExit,\n onAfterExit,\n modalRef,\n animationTimeoutExit: animationTimeout.exit,\n });\n\n usePageHeaderScrollAnimation({\n overlayRef,\n showOverlay,\n pageHeaderPadding,\n visible: visible && !isHiddenForBreakpoint,\n });\n\n const overlayEventHandlers = useNoBubbling({\n onKeyDown: (event) => {\n if (keyboardMatch(event.nativeEvent as KeyboardEvent, keyboardKeys.Escape)) {\n onClose(event);\n }\n },\n onMouseDown: (event) => {\n if (closeByClickOutside && !modalRef.current?.contains(event.target as HTMLElement)) {\n onClose(event);\n }\n },\n });\n const overlayProps = showOverlay\n ? overlayEventHandlers\n : {\n onKeyDown: (event: React.KeyboardEvent) => {\n if (keyboardMatch(event.nativeEvent, keyboardKeys.Escape)) {\n onClose(event);\n }\n },\n };\n\n if (isHiddenForBreakpoint || isServerEnv) {\n return null;\n }\n\n return createPortal(\n <CSSTransition\n appear\n in={visible && !isServerEnv}\n nodeRef={overlayRef}\n onEntering={onEntering}\n onEntered={onEntered}\n onExit={onExit}\n onExited={onExited}\n classNames={CSS_CLASSES[position]}\n timeout={animationTimeout}\n unmountOnExit\n >\n <ThemeWrapper>\n {(themeClass) => (\n <Layer layer=\"modal\">\n <div\n {...overlayProps}\n ref={overlayRef}\n className={classnames(styles.modalOverlay, themeClass, {\n [styles.modalOverlayWithBackground]: showOverlay,\n [styles.modalOverlayLeft]: position === 'left',\n [styles.modalOverlayRight]: position === 'right',\n })}\n data-qa=\"modal-overlay\"\n >\n <CloseByClickOutsideContext.Provider value={overlayRef}>\n <AccessibleRegionProvider>\n <ModalSlotsProvider>\n <ModalInner\n {...rest}\n explicitAria={{\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n 'aria-describedby': ariaDescribedby,\n 'aria-description': ariaDescription,\n }}\n ariaModal={visible && showOverlay && !isServerEnv}\n refCallback={modalRefCallback}\n size={size}\n height={resolvedHeight}\n minHeight={minHeight}\n disableVerticalPaddings={disableVerticalPaddings}\n disableHorizontalPaddings={disableHorizontalPaddings}\n showOverlay={showOverlay}\n header={header}\n footer={footer}\n >\n <ModalContent>{children}</ModalContent>\n </ModalInner>\n </ModalSlotsProvider>\n </AccessibleRegionProvider>\n </CloseByClickOutsideContext.Provider>\n </div>\n </Layer>\n )}\n </ThemeWrapper>\n </CSSTransition>,\n host || document.body\n );\n }\n) as ForwardRefExoticComponent<PropsWithoutRef<ModalRootProps> & RefAttributes<HTMLDivElement>> & ModalCompound;\n\nModal.displayName = 'Modal';\nModal.Media = ModalMedia;\n"],"names":["_jsx"],"mappings":"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"}
1
+ {"version":3,"file":"Modal.js","sources":["src/public/Modal.tsx"],"sourcesContent":["import {\n forwardRef,\n type HTMLAttributes,\n useRef,\n useState,\n type ForwardRefExoticComponent,\n type PropsWithoutRef,\n type RefAttributes,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { CSSTransition } from 'react-transition-group';\nimport classnames from 'classnames';\n\nimport { useServerEnv } from '@hh.ru/magritte-common-is-server-env';\nimport { keyboardMatch, keyboardKeys, useKeyboardNavigation } from '@hh.ru/magritte-common-keyboard';\nimport { CloseByClickOutsideContext } from '@hh.ru/magritte-common-mouse/useCloseByClickOutside';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { useNoBubbling } from '@hh.ru/magritte-common-use-no-bubbling';\nimport { AccessibleRegionProvider, type ExplicitRegionProps } from '@hh.ru/magritte-internal-accessible-region';\nimport { Layer } from '@hh.ru/magritte-ui-layer';\nimport { ModalContent } from '@hh.ru/magritte-ui-modal/internal/ModalContent';\nimport { ModalInner } from '@hh.ru/magritte-ui-modal/internal/ModalInner';\nimport { ModalSlotsProvider } from '@hh.ru/magritte-ui-modal/internal/ModalSlotsContext';\nimport {\n CSS_CLASSES,\n DEFAULT_PAGE_HEADER_PADDING,\n getAnimationTimeout,\n noop,\n} from '@hh.ru/magritte-ui-modal/internal/constants';\nimport { isTreeSelectorChild } from '@hh.ru/magritte-ui-modal/internal/isTreeSelectorChild';\nimport { useModalTransition } from '@hh.ru/magritte-ui-modal/internal/useModalTransition';\nimport { usePageHeaderScrollAnimation } from '@hh.ru/magritte-ui-modal/internal/usePageHeaderScrollAnimation';\nimport { ModalMedia, type ModalMediaProps } from '@hh.ru/magritte-ui-modal/public/ModalMedia';\nimport { type ModalProps } from '@hh.ru/magritte-ui-modal/public/types';\nimport { ThemeWrapper } from '@hh.ru/magritte-ui-theme-wrapper';\n\nimport styles from '../internal/modal.less';\n\ntype ModalRootProps = ModalProps &\n ExplicitRegionProps &\n Omit<HTMLAttributes<HTMLDivElement>, keyof ModalProps | 'role' | 'tabIndex' | 'className'>;\n\ninterface ModalCompound {\n Media: ForwardRefExoticComponent<ModalMediaProps & RefAttributes<HTMLDivElement>>;\n}\n\nexport const Modal = forwardRef<HTMLDivElement, ModalRootProps>(\n (\n {\n visible,\n size = 'medium',\n header,\n footer,\n children,\n onClose = noop,\n host,\n disableVerticalPaddings = false,\n disableHorizontalPaddings = false,\n closeByClickOutside = true,\n onAppear,\n onBeforeExit,\n onAfterExit,\n position = 'center',\n height = position === 'center' ? 'content' : 'full-screen',\n minHeight,\n showOverlay: _showOverlay = true,\n pageHeaderPadding = DEFAULT_PAGE_HEADER_PADDING,\n returnFocusOnClose,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n 'aria-describedby': ariaDescribedby,\n 'aria-description': ariaDescription,\n ...rest\n },\n ref\n ) => {\n const isServerEnv = useServerEnv();\n const [animationTimeout] = useState(getAnimationTimeout);\n\n const modalRef = useRef<HTMLDivElement>(null);\n const overlayRef = useRef<HTMLDivElement>(null);\n const keyboardNavigationRef = useKeyboardNavigation({ enabled: visible && !isServerEnv, mode: 'loop' });\n const modalRefCallback = useMultipleRefs(ref, modalRef, keyboardNavigationRef);\n\n const showOverlay = position === 'center' || _showOverlay;\n\n // TreeSelector сам управляет своим скроллом и должен занимать всю высоту модала.\n const resolvedHeight = isTreeSelectorChild(children) ? 'full-screen' : height;\n\n const { onEntering, onEntered, onExit, onExited, isHiddenForBreakpoint } = useModalTransition({\n visible,\n isServerEnv,\n showOverlay,\n returnFocusOnClose,\n onAppear,\n onBeforeExit,\n onAfterExit,\n modalRef,\n animationTimeoutExit: animationTimeout.exit,\n });\n\n usePageHeaderScrollAnimation({\n overlayRef,\n showOverlay,\n pageHeaderPadding,\n visible: visible && !isHiddenForBreakpoint,\n });\n\n const overlayEventHandlers = useNoBubbling({\n onKeyDown: (event) => {\n if (keyboardMatch(event.nativeEvent as KeyboardEvent, keyboardKeys.Escape)) {\n onClose(event);\n }\n },\n onMouseDown: (event) => {\n if (closeByClickOutside && !modalRef.current?.contains(event.target as HTMLElement)) {\n onClose(event);\n }\n },\n });\n const overlayProps = showOverlay\n ? overlayEventHandlers\n : {\n onKeyDown: (event: React.KeyboardEvent) => {\n if (keyboardMatch(event.nativeEvent, keyboardKeys.Escape)) {\n onClose(event);\n }\n },\n };\n\n if (isHiddenForBreakpoint || isServerEnv) {\n return null;\n }\n\n return createPortal(\n <CSSTransition\n appear\n in={visible && !isServerEnv}\n nodeRef={overlayRef}\n onEntering={onEntering}\n onEntered={onEntered}\n onExit={onExit}\n onExited={onExited}\n classNames={CSS_CLASSES[position]}\n timeout={animationTimeout}\n unmountOnExit\n >\n <ThemeWrapper>\n {(themeClass) => (\n <Layer layer=\"modal\">\n <div\n {...overlayProps}\n ref={overlayRef}\n className={classnames(styles.modalOverlay, themeClass, {\n [styles.modalOverlayWithBackground]: showOverlay,\n [styles.modalOverlayLeft]: position === 'left',\n [styles.modalOverlayRight]: position === 'right',\n })}\n data-qa=\"modal-overlay\"\n >\n <CloseByClickOutsideContext.Provider value={overlayRef}>\n <AccessibleRegionProvider>\n <ModalSlotsProvider>\n <ModalInner\n {...rest}\n explicitAria={{\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n 'aria-describedby': ariaDescribedby,\n 'aria-description': ariaDescription,\n }}\n ariaModal={visible && showOverlay && !isServerEnv}\n refCallback={modalRefCallback}\n size={size}\n height={resolvedHeight}\n minHeight={minHeight}\n disableVerticalPaddings={disableVerticalPaddings}\n disableHorizontalPaddings={disableHorizontalPaddings}\n showOverlay={showOverlay}\n header={header}\n footer={footer}\n >\n <ModalContent>{children}</ModalContent>\n </ModalInner>\n </ModalSlotsProvider>\n </AccessibleRegionProvider>\n </CloseByClickOutsideContext.Provider>\n </div>\n </Layer>\n )}\n </ThemeWrapper>\n </CSSTransition>,\n host || document.body\n );\n }\n) as ForwardRefExoticComponent<PropsWithoutRef<ModalRootProps> & RefAttributes<HTMLDivElement>> & ModalCompound;\n\nModal.displayName = 'Modal';\nModal.Media = ModalMedia;\n"],"names":["_jsx"],"mappings":"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"}
@@ -2,7 +2,7 @@ import './../index.css';
2
2
  import { jsx } from 'react/jsx-runtime';
3
3
  import { forwardRef } from 'react';
4
4
  import classnames from 'classnames';
5
- import { s as styles } from '../modal-DGUtZ5NS.js';
5
+ import { s as styles } from '../modal-Bt4oRCfv.js';
6
6
 
7
7
  const ModalMedia = forwardRef(({ ratio, height, backgroundUrl, className, style, children, imageSize = 'cover', ...rest }, ref) => {
8
8
  const defaultRatio = children ? 'auto' : 1.9;
@@ -4,6 +4,7 @@ import { forwardRef } from 'react';
4
4
  import { Flex } from '@hh.ru/magritte-ui-layout';
5
5
  import { Modal } from './Modal.js';
6
6
  import { ModalMedia } from './ModalMedia.js';
7
+ import { MODAL_WITH_IMAGE_NAV_BAR_DEFAULTS, MODAL_WITH_IMAGE_TITLE_DEFAULTS } from '../withImageDefaults.js';
7
8
  import { NavBarDefaultPropsContext } from '@hh.ru/magritte-ui-nav-bar';
8
9
  import { TitleDefaultPropsContext } from '@hh.ru/magritte-ui-title';
9
10
  import 'react-dom';
@@ -20,9 +21,10 @@ import '../internal/ModalContent.js';
20
21
  import '../internal/isTreeSelectorChild.js';
21
22
  import '@hh.ru/magritte-ui-tree-selector';
22
23
  import '@hh.ru/magritte-ui-textarea';
23
- import '../modal-DGUtZ5NS.js';
24
+ import '../modal-Bt4oRCfv.js';
24
25
  import '../internal/ModalInner.js';
25
26
  import '@hh.ru/magritte-ui-action-bar';
27
+ import '../actionBarDefaults.js';
26
28
  import '../internal/ModalBody.js';
27
29
  import '@hh.ru/magritte-ui-content-overlay';
28
30
  import '../internal/ModalSlotsContext.js';
@@ -39,15 +41,8 @@ import '@hh.ru/magritte-common-dom-storage';
39
41
  import '../internal/usePageHeaderScrollAnimation.js';
40
42
  import '@hh.ru/magritte-ui-theme-wrapper';
41
43
 
42
- const NAV_BAR_DEFAULT_PROPS = {
43
- overlay: true,
44
- snapScroll: false,
45
- transparent: 'start',
46
- };
47
- const TITLE_DEFAULT_PROPS = {
48
- size: 'medium',
49
- alignment: 'center',
50
- };
44
+ const NAV_BAR_DEFAULT_PROPS = MODAL_WITH_IMAGE_NAV_BAR_DEFAULTS;
45
+ const TITLE_DEFAULT_PROPS = MODAL_WITH_IMAGE_TITLE_DEFAULTS;
51
46
  const ModalWithImage = forwardRef(({ image, title, children, ...rest }, ref) => (jsx(NavBarDefaultPropsContext, { rootProps: NAV_BAR_DEFAULT_PROPS, children: jsxs(Modal, { ...rest, ref: ref, children: [image, (!!title || !!children) && (jsxs(Flex, { gap: 24, direction: "column", my: 24, children: [!!title && (jsx("div", { children: jsx(TitleDefaultPropsContext, { props: TITLE_DEFAULT_PROPS, children: title }) })), !!children && jsx("div", { children: children })] }))] }) })));
52
47
  ModalWithImage.displayName = 'ModalWithImage';
53
48
  ModalWithImage.Media = ModalMedia;
@@ -1 +1 @@
1
- {"version":3,"file":"ModalWithImage.js","sources":["src/public/ModalWithImage.tsx"],"sourcesContent":["import {\n forwardRef,\n type ForwardRefExoticComponent,\n type HTMLAttributes,\n type PropsWithoutRef,\n type ReactNode,\n type RefAttributes,\n} from 'react';\n\nimport { type ExplicitRegionProps } from '@hh.ru/magritte-internal-accessible-region';\nimport { Flex } from '@hh.ru/magritte-ui-layout';\nimport { Modal } from '@hh.ru/magritte-ui-modal/public/Modal';\nimport { ModalMedia, type ModalMediaProps } from '@hh.ru/magritte-ui-modal/public/ModalMedia';\nimport { type ModalProps } from '@hh.ru/magritte-ui-modal/public/types';\nimport { NavBarDefaultPropsContext } from '@hh.ru/magritte-ui-nav-bar';\nimport { TitleDefaultPropsContext } from '@hh.ru/magritte-ui-title';\n\nexport interface ModalWithImageProps extends ModalProps {\n /** Изображение (медиа), располагается над контентом */\n image?: ReactNode;\n /** Заголовок, располагается над контентом */\n title?: ReactNode;\n}\n\nconst NAV_BAR_DEFAULT_PROPS = {\n overlay: true,\n snapScroll: false,\n transparent: 'start',\n} as const;\n\nconst TITLE_DEFAULT_PROPS = {\n size: 'medium',\n alignment: 'center',\n} as const;\n\ntype ModalWithImageRootProps = ModalWithImageProps &\n ExplicitRegionProps &\n Omit<HTMLAttributes<HTMLDivElement>, keyof ModalWithImageProps | 'role' | 'tabIndex' | 'className'>;\n\ninterface ModalWithImageCompound {\n Media: ForwardRefExoticComponent<ModalMediaProps & RefAttributes<HTMLDivElement>>;\n}\n\nexport const ModalWithImage = forwardRef<HTMLDivElement, ModalWithImageRootProps>(\n ({ image, title, children, ...rest }, ref) => (\n <NavBarDefaultPropsContext rootProps={NAV_BAR_DEFAULT_PROPS}>\n <Modal {...rest} ref={ref}>\n {image}\n {(!!title || !!children) && (\n <Flex gap={24} direction=\"column\" my={24}>\n {!!title && (\n <div>\n <TitleDefaultPropsContext props={TITLE_DEFAULT_PROPS}>{title}</TitleDefaultPropsContext>\n </div>\n )}\n {!!children && <div>{children}</div>}\n </Flex>\n )}\n </Modal>\n </NavBarDefaultPropsContext>\n )\n) as ForwardRefExoticComponent<PropsWithoutRef<ModalWithImageRootProps> & RefAttributes<HTMLDivElement>> &\n ModalWithImageCompound;\n\nModalWithImage.displayName = 'ModalWithImage';\nModalWithImage.Media = ModalMedia;\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBA,MAAM,qBAAqB,GAAG;AAC1B,IAAA,OAAO,EAAE,IAAI;AACb,IAAA,UAAU,EAAE,KAAK;AACjB,IAAA,WAAW,EAAE,OAAO;CACd,CAAC;AAEX,MAAM,mBAAmB,GAAG;AACxB,IAAA,IAAI,EAAE,QAAQ;AACd,IAAA,SAAS,EAAE,QAAQ;CACb,CAAC;MAUE,cAAc,GAAG,UAAU,CACpC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MACrCA,IAAC,yBAAyB,EAAA,EAAC,SAAS,EAAE,qBAAqB,YACvDC,IAAC,CAAA,KAAK,EAAK,EAAA,GAAA,IAAI,EAAE,GAAG,EAAE,GAAG,EAAA,QAAA,EAAA,CACpB,KAAK,EACL,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,QAAQ,MACnBA,KAAC,IAAI,EAAA,EAAC,GAAG,EAAE,EAAE,EAAE,SAAS,EAAC,QAAQ,EAAC,EAAE,EAAE,EAAE,EAAA,QAAA,EAAA,CACnC,CAAC,CAAC,KAAK,KACJD,GACI,CAAA,KAAA,EAAA,EAAA,QAAA,EAAAA,GAAA,CAAC,wBAAwB,EAAC,EAAA,KAAK,EAAE,mBAAmB,EAAA,QAAA,EAAG,KAAK,EAA4B,CAAA,EAAA,CACtF,CACT,EACA,CAAC,CAAC,QAAQ,IAAIA,GAAA,CAAA,KAAA,EAAA,EAAA,QAAA,EAAM,QAAQ,EAAO,CAAA,CAAA,EAAA,CACjC,CACV,CACG,EAAA,CAAA,EAAA,CACgB,CAC/B,EAEsB;AAE3B,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC;AAC9C,cAAc,CAAC,KAAK,GAAG,UAAU;;;;"}
1
+ {"version":3,"file":"ModalWithImage.js","sources":["src/public/ModalWithImage.tsx"],"sourcesContent":["import {\n forwardRef,\n type ForwardRefExoticComponent,\n type HTMLAttributes,\n type PropsWithoutRef,\n type ReactNode,\n type RefAttributes,\n} from 'react';\n\nimport { type ExplicitRegionProps } from '@hh.ru/magritte-internal-accessible-region';\nimport { Flex } from '@hh.ru/magritte-ui-layout';\nimport { Modal } from '@hh.ru/magritte-ui-modal/public/Modal';\nimport { ModalMedia, type ModalMediaProps } from '@hh.ru/magritte-ui-modal/public/ModalMedia';\nimport { type ModalProps } from '@hh.ru/magritte-ui-modal/public/types';\nimport {\n MODAL_WITH_IMAGE_NAV_BAR_DEFAULTS,\n MODAL_WITH_IMAGE_TITLE_DEFAULTS,\n} from '@hh.ru/magritte-ui-modal/withImageDefaults';\nimport { NavBarDefaultPropsContext } from '@hh.ru/magritte-ui-nav-bar';\nimport { TitleDefaultPropsContext } from '@hh.ru/magritte-ui-title';\n\nexport interface ModalWithImageProps extends ModalProps {\n /** Изображение (медиа), располагается над контентом */\n image?: ReactNode;\n /** Заголовок, располагается над контентом */\n title?: ReactNode;\n}\n\nconst NAV_BAR_DEFAULT_PROPS = MODAL_WITH_IMAGE_NAV_BAR_DEFAULTS;\n\nconst TITLE_DEFAULT_PROPS = MODAL_WITH_IMAGE_TITLE_DEFAULTS;\n\ntype ModalWithImageRootProps = ModalWithImageProps &\n ExplicitRegionProps &\n Omit<HTMLAttributes<HTMLDivElement>, keyof ModalWithImageProps | 'role' | 'tabIndex' | 'className'>;\n\ninterface ModalWithImageCompound {\n Media: ForwardRefExoticComponent<ModalMediaProps & RefAttributes<HTMLDivElement>>;\n}\n\nexport const ModalWithImage = forwardRef<HTMLDivElement, ModalWithImageRootProps>(\n ({ image, title, children, ...rest }, ref) => (\n <NavBarDefaultPropsContext rootProps={NAV_BAR_DEFAULT_PROPS}>\n <Modal {...rest} ref={ref}>\n {image}\n {(!!title || !!children) && (\n <Flex gap={24} direction=\"column\" my={24}>\n {!!title && (\n <div>\n <TitleDefaultPropsContext props={TITLE_DEFAULT_PROPS}>{title}</TitleDefaultPropsContext>\n </div>\n )}\n {!!children && <div>{children}</div>}\n </Flex>\n )}\n </Modal>\n </NavBarDefaultPropsContext>\n )\n) as ForwardRefExoticComponent<PropsWithoutRef<ModalWithImageRootProps> & RefAttributes<HTMLDivElement>> &\n ModalWithImageCompound;\n\nModalWithImage.displayName = 'ModalWithImage';\nModalWithImage.Media = ModalMedia;\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,MAAM,qBAAqB,GAAG,iCAAiC,CAAC;AAEhE,MAAM,mBAAmB,GAAG,+BAA+B,CAAC;MAU/C,cAAc,GAAG,UAAU,CACpC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MACrCA,IAAC,yBAAyB,EAAA,EAAC,SAAS,EAAE,qBAAqB,YACvDC,IAAC,CAAA,KAAK,EAAK,EAAA,GAAA,IAAI,EAAE,GAAG,EAAE,GAAG,EAAA,QAAA,EAAA,CACpB,KAAK,EACL,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,QAAQ,MACnBA,KAAC,IAAI,EAAA,EAAC,GAAG,EAAE,EAAE,EAAE,SAAS,EAAC,QAAQ,EAAC,EAAE,EAAE,EAAE,EAAA,QAAA,EAAA,CACnC,CAAC,CAAC,KAAK,KACJD,GACI,CAAA,KAAA,EAAA,EAAA,QAAA,EAAAA,GAAA,CAAC,wBAAwB,EAAC,EAAA,KAAK,EAAE,mBAAmB,EAAA,QAAA,EAAG,KAAK,EAA4B,CAAA,EAAA,CACtF,CACT,EACA,CAAC,CAAC,QAAQ,IAAIA,GAAA,CAAA,KAAA,EAAA,EAAA,QAAA,EAAM,QAAQ,EAAO,CAAA,CAAA,EAAA,CACjC,CACV,CACG,EAAA,CAAA,EAAA,CACgB,CAC/B,EAEsB;AAE3B,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC;AAC9C,cAAc,CAAC,KAAK,GAAG,UAAU;;;;"}
@@ -0,0 +1,22 @@
1
+ /**
2
+ * The props `ModalWithImage` supplies to the two components it composes, at runtime through their
3
+ * `DefaultPropsContext` providers (see `public/ModalWithImage.tsx`).
4
+ *
5
+ * They live in their own module, as plain data with no imports, because they are read from TWO sides: the
6
+ * component applies them, and the Code Connect template declares them as contextual defaults so a nested
7
+ * snippet stops repeating — or worse, overriding — what the wrapper already provides. A literal copied into
8
+ * the template would drift silently: change the value here and the published snippet would keep asserting the
9
+ * old one, with no build error and no render error. The bundler inlines this file into every template that
10
+ * imports it, which is the other reason it must stay free of runtime imports.
11
+ */
12
+ /** Applied to every NavBar in the subtree — the header lies over the image, transparent until it scrolls. */
13
+ export declare const MODAL_WITH_IMAGE_NAV_BAR_DEFAULTS: {
14
+ readonly overlay: true;
15
+ readonly snapScroll: false;
16
+ readonly transparent: "start";
17
+ };
18
+ /** Applied to whatever goes into the `title` prop. */
19
+ export declare const MODAL_WITH_IMAGE_TITLE_DEFAULTS: {
20
+ readonly size: "medium";
21
+ readonly alignment: "center";
22
+ };
@@ -0,0 +1,26 @@
1
+ import './index.css';
2
+ /**
3
+ * The props `ModalWithImage` supplies to the two components it composes, at runtime through their
4
+ * `DefaultPropsContext` providers (see `public/ModalWithImage.tsx`).
5
+ *
6
+ * They live in their own module, as plain data with no imports, because they are read from TWO sides: the
7
+ * component applies them, and the Code Connect template declares them as contextual defaults so a nested
8
+ * snippet stops repeating — or worse, overriding — what the wrapper already provides. A literal copied into
9
+ * the template would drift silently: change the value here and the published snippet would keep asserting the
10
+ * old one, with no build error and no render error. The bundler inlines this file into every template that
11
+ * imports it, which is the other reason it must stay free of runtime imports.
12
+ */
13
+ /** Applied to every NavBar in the subtree — the header lies over the image, transparent until it scrolls. */
14
+ const MODAL_WITH_IMAGE_NAV_BAR_DEFAULTS = {
15
+ overlay: true,
16
+ snapScroll: false,
17
+ transparent: 'start',
18
+ };
19
+ /** Applied to whatever goes into the `title` prop. */
20
+ const MODAL_WITH_IMAGE_TITLE_DEFAULTS = {
21
+ size: 'medium',
22
+ alignment: 'center',
23
+ };
24
+
25
+ export { MODAL_WITH_IMAGE_NAV_BAR_DEFAULTS, MODAL_WITH_IMAGE_TITLE_DEFAULTS };
26
+ //# sourceMappingURL=withImageDefaults.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"withImageDefaults.js","sources":["src/withImageDefaults.ts"],"sourcesContent":["/**\n * The props `ModalWithImage` supplies to the two components it composes, at runtime through their\n * `DefaultPropsContext` providers (see `public/ModalWithImage.tsx`).\n *\n * They live in their own module, as plain data with no imports, because they are read from TWO sides: the\n * component applies them, and the Code Connect template declares them as contextual defaults so a nested\n * snippet stops repeating — or worse, overriding — what the wrapper already provides. A literal copied into\n * the template would drift silently: change the value here and the published snippet would keep asserting the\n * old one, with no build error and no render error. The bundler inlines this file into every template that\n * imports it, which is the other reason it must stay free of runtime imports.\n */\n\n/** Applied to every NavBar in the subtree — the header lies over the image, transparent until it scrolls. */\nexport const MODAL_WITH_IMAGE_NAV_BAR_DEFAULTS = {\n overlay: true,\n snapScroll: false,\n transparent: 'start',\n} as const;\n\n/** Applied to whatever goes into the `title` prop. */\nexport const MODAL_WITH_IMAGE_TITLE_DEFAULTS = {\n size: 'medium',\n alignment: 'center',\n} as const;\n"],"names":[],"mappings":"AAAA;;;;;;;;;;AAUG;AAEH;AACa,MAAA,iCAAiC,GAAG;AAC7C,IAAA,OAAO,EAAE,IAAI;AACb,IAAA,UAAU,EAAE,KAAK;AACjB,IAAA,WAAW,EAAE,OAAO;EACb;AAEX;AACa,MAAA,+BAA+B,GAAG;AAC3C,IAAA,IAAI,EAAE,QAAQ;AACd,IAAA,SAAS,EAAE,QAAQ;;;;;"}
package/modal-DGUtZ5NS.js DELETED
@@ -1,5 +0,0 @@
1
- import './index.css';
2
- var styles = {"sticky-header":"magritte-sticky-header___TPafy_11-0-17","stickyHeader":"magritte-sticky-header___TPafy_11-0-17","sticky-header-inner":"magritte-sticky-header-inner___u5p8h_11-0-17","stickyHeaderInner":"magritte-sticky-header-inner___u5p8h_11-0-17","modal-media":"magritte-modal-media___UqHGM_11-0-17","modalMedia":"magritte-modal-media___UqHGM_11-0-17","fixed-height":"magritte-fixed-height___wyJ7-_11-0-17","fixedHeight":"magritte-fixed-height___wyJ7-_11-0-17","contain":"magritte-contain___3QD0Z_11-0-17","cover":"magritte-cover___nry9O_11-0-17","content-overlay-top":"magritte-content-overlay-top___6snWk_11-0-17","contentOverlayTop":"magritte-content-overlay-top___6snWk_11-0-17","grow-limiter":"magritte-grow-limiter___GmpBj_11-0-17","growLimiter":"magritte-grow-limiter___GmpBj_11-0-17","modal-overlay":"magritte-modal-overlay___WwfCg_11-0-17","modalOverlay":"magritte-modal-overlay___WwfCg_11-0-17","modal-overlay-with-background":"magritte-modal-overlay-with-background___DDxJn_11-0-17","modalOverlayWithBackground":"magritte-modal-overlay-with-background___DDxJn_11-0-17","modal":"magritte-modal___C4o5U_11-0-17","modal-overlay-left":"magritte-modal-overlay-left___agPyC_11-0-17","modalOverlayLeft":"magritte-modal-overlay-left___agPyC_11-0-17","modal-overlay-right":"magritte-modal-overlay-right___-XDAx_11-0-17","modalOverlayRight":"magritte-modal-overlay-right___-XDAx_11-0-17","size-small":"magritte-size-small___cI-Ql_11-0-17","sizeSmall":"magritte-size-small___cI-Ql_11-0-17","size-medium":"magritte-size-medium___jnqfu_11-0-17","sizeMedium":"magritte-size-medium___jnqfu_11-0-17","no-vertical-paddings":"magritte-no-vertical-paddings___dxyot_11-0-17","noVerticalPaddings":"magritte-no-vertical-paddings___dxyot_11-0-17","no-horizontal-paddings":"magritte-no-horizontal-paddings___Q-i-5_11-0-17","noHorizontalPaddings":"magritte-no-horizontal-paddings___Q-i-5_11-0-17","modal-full-height":"magritte-modal-full-height___Aew5F_11-0-17","modalFullHeight":"magritte-modal-full-height___Aew5F_11-0-17","modal-with-border":"magritte-modal-with-border___KSnhf_11-0-17","modalWithBorder":"magritte-modal-with-border___KSnhf_11-0-17","modal-content-wrapper":"magritte-modal-content-wrapper___VzoTN_11-0-17","modalContentWrapper":"magritte-modal-content-wrapper___VzoTN_11-0-17","modal-footer":"magritte-modal-footer___Ha-sZ_11-0-17","modalFooter":"magritte-modal-footer___Ha-sZ_11-0-17","modal-footer-empty":"magritte-modal-footer-empty___tmH-x_11-0-17","modalFooterEmpty":"magritte-modal-footer-empty___tmH-x_11-0-17","animation-timeout":"magritte-animation-timeout___G4Hl1_11-0-17","animationTimeout":"magritte-animation-timeout___G4Hl1_11-0-17","animation-enter-center":"magritte-animation-enter-center___sq8j7_11-0-17","animationEnterCenter":"magritte-animation-enter-center___sq8j7_11-0-17","animation-enter-center-active":"magritte-animation-enter-center-active___ORYEh_11-0-17","animationEnterCenterActive":"magritte-animation-enter-center-active___ORYEh_11-0-17","animation-exit-center":"magritte-animation-exit-center___lLCX1_11-0-17","animationExitCenter":"magritte-animation-exit-center___lLCX1_11-0-17","animation-exit-center-active":"magritte-animation-exit-center-active___Ik2Yl_11-0-17","animationExitCenterActive":"magritte-animation-exit-center-active___Ik2Yl_11-0-17","animation-enter-left":"magritte-animation-enter-left___jJDlv_11-0-17","animationEnterLeft":"magritte-animation-enter-left___jJDlv_11-0-17","animation-enter-left-active":"magritte-animation-enter-left-active___-kFij_11-0-17","animationEnterLeftActive":"magritte-animation-enter-left-active___-kFij_11-0-17","animation-exit-left":"magritte-animation-exit-left___G2Plq_11-0-17","animationExitLeft":"magritte-animation-exit-left___G2Plq_11-0-17","animation-exit-left-active":"magritte-animation-exit-left-active___XW2K4_11-0-17","animationExitLeftActive":"magritte-animation-exit-left-active___XW2K4_11-0-17","animation-enter-right":"magritte-animation-enter-right___rrMS0_11-0-17","animationEnterRight":"magritte-animation-enter-right___rrMS0_11-0-17","animation-enter-right-active":"magritte-animation-enter-right-active___p7rg-_11-0-17","animationEnterRightActive":"magritte-animation-enter-right-active___p7rg-_11-0-17","animation-exit-right":"magritte-animation-exit-right___f3qIC_11-0-17","animationExitRight":"magritte-animation-exit-right___f3qIC_11-0-17","animation-exit-right-active":"magritte-animation-exit-right-active___-sG1k_11-0-17","animationExitRightActive":"magritte-animation-exit-right-active___-sG1k_11-0-17","tree-selector-container":"magritte-tree-selector-container___4cdf5_11-0-17","treeSelectorContainer":"magritte-tree-selector-container___4cdf5_11-0-17","modal-scroll-container":"magritte-modal-scroll-container___hOCdh_11-0-17","modalScrollContainer":"magritte-modal-scroll-container___hOCdh_11-0-17","nav-bar":"magritte-nav-bar___CL7d-_11-0-17","navBar":"magritte-nav-bar___CL7d-_11-0-17","header":"magritte-header___pufwA_11-0-17","static":"magritte-static___3B6cn_11-0-17","content-overlay-bottom":"magritte-content-overlay-bottom___bDuPC_11-0-17","contentOverlayBottom":"magritte-content-overlay-bottom___bDuPC_11-0-17"};
3
-
4
- export { styles as s };
5
- //# sourceMappingURL=modal-DGUtZ5NS.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"modal-DGUtZ5NS.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}