@commercetools-frontend/experimental-components 5.3.1 → 5.4.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.
package/dist/styles.css CHANGED
@@ -1,3 +1,130 @@
1
+ /* imported from search-input.module.css */
2
+
3
+ .search-input-module__block___1uM-y {
4
+ display: inline-flex;
5
+ flex-direction: row;
6
+ align-items: flex-start;
7
+ width: 100%;
8
+ max-width: 800px;
9
+ }
10
+
11
+ .search-input-module__container___9u6if {
12
+ position: relative;
13
+ flex-grow: 1;
14
+ }
15
+
16
+ .search-input-module__input-container___mJnyZ {
17
+ border-color: var(--border-color-for-input);
18
+ height: var(--height-for-input);
19
+ }
20
+
21
+ .search-input-module__input-container___mJnyZ > input::placeholder {
22
+ font-weight: var(--font-weight-400);
23
+ font-size: var(--font-size-for-input);
24
+ font-family: var(--font-family);
25
+ color: var(--color-neutral-60);
26
+ }
27
+
28
+ .search-input-module__input-container___mJnyZ > input {
29
+ padding-right: calc(var(--spacing-xl) * 2);
30
+ }
31
+
32
+ .search-input-module__input-container-disabled___23jR8 > input {
33
+ border-color: var(--color-neutral);
34
+ }
35
+
36
+ .search-input-module__input-container-hoverable___1xjqn > input:hover {
37
+ border: var(--border-width-for-input) solid var(--border-color-for-input);
38
+ background-color: var(--background-color-for-input-when-hovered);
39
+ }
40
+ .search-input-module__input-container-hoverable___1xjqn > input:focus {
41
+ box-shadow: var(
42
+ --shadow-for-input-when-focused,
43
+ inset 0 0 0 1px var(--color-primary)
44
+ );
45
+ border-color: var(--border-color-for-input-when-focused);
46
+ }
47
+
48
+ .search-input-module__input-container-granular___33Pm- {
49
+ border-color: var(--color-primary);
50
+ position: relative;
51
+ right: 3px;
52
+ }
53
+
54
+ .search-input-module__search-icon-container___cbHQY {
55
+ background-color: transparent;
56
+ border-color: transparent;
57
+ position: absolute;
58
+ right: 9px;
59
+ top: 8px;
60
+ }
61
+
62
+ .search-input-module__clear-icon-container___3RQvu {
63
+ background-color: transparent;
64
+ border-color: transparent;
65
+ position: absolute;
66
+ right: 36px;
67
+ top: 11px;
68
+ z-index: 2;
69
+ }
70
+
71
+ .search-input-module__clear-icon-container-granular___1mbin {
72
+ right: 41px;
73
+ }
74
+
75
+ .search-input-module__search-icon-container-hoverable___1kTwJ {
76
+ cursor: pointer;
77
+ }
78
+
79
+ .search-input-module__search-icon-container-granular___3fAsR {
80
+ right: 15px;
81
+ }
82
+
83
+ .search-input-module__hidden___z07GX {
84
+ display: none !important;
85
+ }
86
+
87
+ .search-input-module__action___1GqGT {
88
+ flex-shrink: 1;
89
+ margin-left: var(--spacing-s);
90
+ }
91
+ /* imported from required-indicator.module.css */
92
+
93
+ .required-indicator-module__colored____YUFm {
94
+ color: var(--color-warning);
95
+ }
96
+
97
+ .required-indicator-module__indicatorAsterisk___3lEdX {
98
+ font-style: normal;
99
+ margin-left: 2px;
100
+ }
101
+ /* imported from selectable-field-search-input.module.css */
102
+
103
+ .selectable-field-search-input-module__container___z2ltR {
104
+ width: 100%;
105
+ position: relative;
106
+ display: flex;
107
+ z-index: 3;
108
+ max-width: var(--constraint-15);
109
+ }
110
+
111
+ .selectable-field-search-input-module__search-mode-menu___Od6Le {
112
+ border-radius: var(--border-radius-6);
113
+ border: 1px solid var(--color-primary);
114
+ margin-top: 2px;
115
+ position: absolute;
116
+ }
117
+ /* imported from validated-input.module.css */
118
+
119
+ .validated-input-module__invalid___380EL {
120
+ /* this needs !important because react-select has a :focus style that
121
+ stops the border colour being set unless the element is blurred */
122
+ border-color: var(--color-error) !important;
123
+ }
124
+
125
+ .validated-input-module__container___3L2KB {
126
+ display: inline;
127
+ }
1
128
  /* imported from label-range.module.css */
2
129
 
3
130
  .label-range-module__label___3Tb0p {
@@ -134,132 +261,41 @@
134
261
  border-bottom-left-radius: 0;
135
262
  margin-left: 0;
136
263
  }
137
- /* imported from search-input.module.css */
138
-
139
- .search-input-module__block___1uM-y {
140
- display: inline-flex;
141
- flex-direction: row;
142
- align-items: flex-start;
143
- width: 100%;
144
- max-width: 800px;
145
- }
146
-
147
- .search-input-module__container___9u6if {
148
- position: relative;
149
- flex-grow: 1;
150
- }
151
-
152
- .search-input-module__input-container___mJnyZ {
153
- border-color: var(--border-color-for-input);
154
- height: var(--height-for-input);
155
- }
156
-
157
- .search-input-module__input-container___mJnyZ > input::placeholder {
158
- font-weight: var(--font-weight-400);
159
- font-size: var(--font-size-for-input);
160
- font-family: var(--font-family);
161
- color: var(--color-neutral-60);
162
- }
163
-
164
- .search-input-module__input-container___mJnyZ > input {
165
- padding-right: calc(var(--spacing-xl) * 2);
166
- }
167
-
168
- .search-input-module__input-container-disabled___23jR8 > input {
169
- border-color: var(--color-neutral);
170
- }
171
-
172
- .search-input-module__input-container-hoverable___1xjqn > input:hover {
173
- border: var(--border-width-for-input) solid var(--border-color-for-input);
174
- background-color: var(--background-color-for-input-when-hovered);
175
- }
176
- .search-input-module__input-container-hoverable___1xjqn > input:focus {
177
- box-shadow: var(
178
- --shadow-for-input-when-focused,
179
- inset 0 0 0 1px var(--color-primary)
180
- );
181
- border-color: var(--border-color-for-input-when-focused);
182
- }
183
-
184
- .search-input-module__input-container-granular___33Pm- {
185
- border-color: var(--color-primary);
186
- position: relative;
187
- right: 3px;
188
- }
189
-
190
- .search-input-module__search-icon-container___cbHQY {
191
- background-color: transparent;
192
- border-color: transparent;
193
- position: absolute;
194
- right: 9px;
195
- top: 8px;
196
- }
264
+ /* imported from file-input.module.css */
197
265
 
198
- .search-input-module__clear-icon-container___3RQvu {
199
- background-color: transparent;
200
- border-color: transparent;
201
- position: absolute;
202
- right: 36px;
203
- top: 11px;
204
- z-index: 2;
205
- }
266
+ /** Button */
206
267
 
207
- .search-input-module__clear-icon-container-granular___1mbin {
208
- right: 41px;
268
+ .file-input-module__button___2KypN {
269
+ display: inline-flex;
270
+ background-color: var(--color-surface);
271
+ border: var(--border-for-button-as-secondary);
272
+ box-shadow: none;
273
+ border-radius: var(--border-radius-4);
274
+ color: var(--color-solid);
275
+ height: var(--height-for-button-as-big);
276
+ font-size: var(--font-size-20);
277
+ font-weight: var(--font-weight-500);
278
+ align-items: center;
279
+ transition: background-color var(--transition-linear-80ms);
280
+ padding: 0 var(--spacing-m);
209
281
  }
210
282
 
211
- .search-input-module__search-icon-container-hoverable___1kTwJ {
283
+ .file-input-module__button___2KypN:hover,
284
+ .file-input-module__button___2KypN:focus {
212
285
  cursor: pointer;
286
+ background-color: var(--background-color-for-button-when-hovered);
287
+ box-shadow: none;
213
288
  }
214
289
 
215
- .search-input-module__search-icon-container-granular___3fAsR {
216
- right: 15px;
217
- }
218
-
219
- .search-input-module__hidden___z07GX {
220
- display: none !important;
221
- }
222
-
223
- .search-input-module__action___1GqGT {
224
- flex-shrink: 1;
225
- margin-left: var(--spacing-s);
226
- }
227
- /* imported from selectable-field-search-input.module.css */
228
-
229
- .selectable-field-search-input-module__container___z2ltR {
230
- width: 100%;
231
- position: relative;
232
- display: flex;
233
- z-index: 3;
234
- max-width: var(--constraint-15);
235
- }
236
-
237
- .selectable-field-search-input-module__search-mode-menu___Od6Le {
238
- border-radius: var(--border-radius-6);
239
- border: 1px solid var(--color-primary);
240
- margin-top: 2px;
241
- position: absolute;
242
- }
243
- /* imported from required-indicator.module.css */
244
-
245
- .required-indicator-module__colored____YUFm {
246
- color: var(--color-warning);
247
- }
248
-
249
- .required-indicator-module__indicatorAsterisk___3lEdX {
250
- font-style: normal;
251
- margin-left: 2px;
252
- }
253
- /* imported from validated-input.module.css */
254
-
255
- .validated-input-module__invalid___380EL {
256
- /* this needs !important because react-select has a :focus style that
257
- stops the border colour being set unless the element is blurred */
258
- border-color: var(--color-error) !important;
290
+ .file-input-module__button___2KypN:active {
291
+ box-shadow: var(--shadow-9);
292
+ background-color: var(--color-surface);
259
293
  }
260
294
 
261
- .validated-input-module__container___3L2KB {
262
- display: inline;
295
+ .file-input-module__input___3MP4D {
296
+ visibility: hidden;
297
+ width: 1px;
298
+ height: 1px;
263
299
  }
264
300
  /* imported from button.module.css */
265
301
 
@@ -464,41 +500,14 @@
464
500
  .button-module__add-button___1f093 {
465
501
  min-height: 32px;
466
502
  }
467
- /* imported from file-input.module.css */
468
-
469
- /** Button */
503
+ /* imported from centered-loading-spinner.module.css */
470
504
 
471
- .file-input-module__button___2KypN {
472
- display: inline-flex;
473
- background-color: var(--color-surface);
474
- border: var(--border-for-button-as-secondary);
475
- box-shadow: none;
476
- border-radius: var(--border-radius-4);
477
- color: var(--color-solid);
478
- height: var(--height-for-button-as-big);
479
- font-size: var(--font-size-20);
480
- font-weight: var(--font-weight-500);
505
+ .centered-loading-spinner-module__loading-container___3_9-h {
506
+ height: 100%;
507
+ display: flex;
508
+ flex-grow: 1;
481
509
  align-items: center;
482
- transition: background-color var(--transition-linear-80ms);
483
- padding: 0 var(--spacing-m);
484
- }
485
-
486
- .file-input-module__button___2KypN:hover,
487
- .file-input-module__button___2KypN:focus {
488
- cursor: pointer;
489
- background-color: var(--background-color-for-button-when-hovered);
490
- box-shadow: none;
491
- }
492
-
493
- .file-input-module__button___2KypN:active {
494
- box-shadow: var(--shadow-9);
495
- background-color: var(--color-surface);
496
- }
497
-
498
- .file-input-module__input___3MP4D {
499
- visibility: hidden;
500
- width: 1px;
501
- height: 1px;
510
+ justify-content: center;
502
511
  }
503
512
  /* imported from divider.module.css */
504
513
 
@@ -518,15 +527,6 @@
518
527
  .divider-module__divider-dashed___2Em8A {
519
528
  border-style: dashed;
520
529
  }
521
- /* imported from centered-loading-spinner.module.css */
522
-
523
- .centered-loading-spinner-module__loading-container___3_9-h {
524
- height: 100%;
525
- display: flex;
526
- flex-grow: 1;
527
- align-items: center;
528
- justify-content: center;
529
- }
530
530
  /* imported from reference-search.module.css */
531
531
 
532
532
  .reference-search-module__container___3-iK3 {
@@ -556,23 +556,23 @@
556
556
  .set-buttons-module__gap___38Qr0 {
557
557
  padding: 20px;
558
558
  }
559
- /* imported from platform-limits-customers-status.module.css */
559
+ /* imported from platform-limits-customer-groups-status.module.css */
560
560
 
561
- .platform-limits-customers-status-module__status___3rXYM {
561
+ .platform-limits-customer-groups-status-module__status___6099G {
562
562
  min-width: max-content;
563
563
  }
564
- /* imported from platform-limits-customers-combined.module.css */
564
+ /* imported from platform-limits-customer-groups-combined.module.css */
565
565
 
566
- .platform-limits-customers-combined-module__combined___OszDd {
566
+ .platform-limits-customer-groups-combined-module__combined___WjRoI {
567
567
  margin-bottom: var(--spacing-s);
568
568
  }
569
- /* imported from platform-limits-customer-groups-status.module.css */
569
+ /* imported from platform-limits-customers-status.module.css */
570
570
 
571
- .platform-limits-customer-groups-status-module__status___6099G {
571
+ .platform-limits-customers-status-module__status___3rXYM {
572
572
  min-width: max-content;
573
573
  }
574
- /* imported from platform-limits-customer-groups-combined.module.css */
574
+ /* imported from platform-limits-customers-combined.module.css */
575
575
 
576
- .platform-limits-customer-groups-combined-module__combined___WjRoI {
576
+ .platform-limits-customers-combined-module__combined___OszDd {
577
577
  margin-bottom: var(--spacing-s);
578
578
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@commercetools-frontend/experimental-components",
3
- "version": "5.3.1",
3
+ "version": "5.4.0",
4
4
  "description": "",
5
5
  "main": "dist/commercetools-frontend-experimental-components.cjs.js",
6
6
  "module": "dist/commercetools-frontend-experimental-components.esm.js",
@@ -21,17 +21,17 @@
21
21
  "@commercetools-frontend/l10n": "^22.7.1",
22
22
  "@commercetools-frontend/sdk": "^22.7.1",
23
23
  "@commercetools-frontend/sentry": "^22.7.1",
24
- "@commercetools-frontend/ui-kit": "^16.7.2",
25
- "@commercetools-uikit/design-system": "^16.7.2",
26
- "@commercetools-uikit/select-utils": "^16.7.2",
27
- "@commercetools-uikit/utils": "^16.7.2",
24
+ "@commercetools-frontend/ui-kit": "^16.7.4",
25
+ "@commercetools-uikit/design-system": "^16.7.4",
26
+ "@commercetools-uikit/select-utils": "^16.7.4",
27
+ "@commercetools-uikit/utils": "^16.7.4",
28
28
  "@emotion/react": "^11.11.1",
29
29
  "classnames": "2.3.2",
30
30
  "cleave.js": "1.5.10",
31
31
  "common-tags": "1.8.2",
32
32
  "debounce-promise": "3.1.2",
33
33
  "fast-equals": "4.0.3",
34
- "formik": "2.4.3",
34
+ "formik": "2.4.5",
35
35
  "hoist-non-react-statics": "3.3.2",
36
36
  "lodash": "4.17.21",
37
37
  "memoize-one": "6.0.0",
@@ -40,11 +40,11 @@
40
40
  "omit-deep": "0.3.0",
41
41
  "omit-empty-es": "1.2.0",
42
42
  "prop-types": "^15.8.1",
43
- "react-textarea-autosize": "8.5.2",
43
+ "react-textarea-autosize": "8.5.3",
44
44
  "reselect": "4.1.8",
45
45
  "tiny-invariant": "1.3.1",
46
46
  "tiny-warning": "1.0.3",
47
- "uuid": "9.0.0"
47
+ "uuid": "9.0.1"
48
48
  },
49
49
  "devDependencies": {
50
50
  "@apollo/client": "^3.7.10",
@@ -65,7 +65,7 @@
65
65
  "react-router-dom": "^5.3.4",
66
66
  "react-test-renderer": "^17.0.2",
67
67
  "redux": "^4.2.1",
68
- "typescript": "5.2.2",
68
+ "typescript": "5.1.6",
69
69
  "xhr-mock": "^2.5.1",
70
70
  "@commercetools-local/test-data": "1.2.1",
71
71
  "@commercetools-local/test-utils": "1.2.1"