@itcase/ui 1.8.176 → 1.8.178

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.
@@ -1,601 +1,53 @@
1
1
  'use strict';
2
2
 
3
- var jsxRuntime = require('react/jsx-runtime');
4
- var Select = require('react-select');
5
- var Icon = require('../../Icon_cjs_Xsu3KUlK.js');
6
- var React = require('react');
7
- var clsx = require('clsx');
8
- var CreatableSelect = require('react-select/creatable');
9
- var Group = require('../../Group_cjs_CFzdSMKV.js');
10
- var Text = require('../../Text_cjs_DaH5tVvz.js');
11
- var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
12
- var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
13
- var _default = require('@itcase/icons/default');
14
- var Loader = require('../../Loader_cjs_CRiUlTC3.js');
15
- var Divider = require('../../Divider_cjs_DrmV2ezS.js');
16
- require('react-inlinesvg');
17
- require('../hoc/urlWithAssetPrefix.js');
18
- require('@itcase/common');
19
- require('../context/UrlAssetPrefix.js');
20
- require('../hooks/useStyles/useStyles.js');
3
+ var SelectContainer = require('../../SelectContainer_cjs_BOMkYSVf.js');
4
+ require('react/jsx-runtime');
5
+ require('react');
6
+ require('clsx');
7
+ require('react-select');
8
+ require('react-select/creatable');
9
+ require('../../Group_cjs_CFzdSMKV.js');
10
+ require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
11
+ require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
21
12
  require('lodash/camelCase');
22
- require('lodash/maxBy');
13
+ require('lodash/castArray');
23
14
  require('lodash/upperFirst');
24
15
  require('../context/Notifications.js');
25
16
  require('uuid');
17
+ require('@itcase/common');
26
18
  require('../context/UIContext.js');
27
19
  require('../hooks/useMediaQueries/useMediaQueries.js');
28
20
  require('react-responsive');
29
21
  require('../utils/setViewportProperty.js');
30
22
  require('../hooks.js');
31
23
  require('../hooks/useStyles/styleAttributes.js');
24
+ require('../hooks/useStyles/useStyles.js');
25
+ require('lodash/maxBy');
26
+ require('../../Text_cjs_DaH5tVvz.js');
27
+ require('@itcase/icons/default');
28
+ require('../../Icon_cjs_Xsu3KUlK.js');
29
+ require('react-inlinesvg');
30
+ require('../hoc/urlWithAssetPrefix.js');
31
+ require('../context/UrlAssetPrefix.js');
32
32
  require('../../Link_cjs_qKXVfU8e.js');
33
- require('lodash/castArray');
34
-
35
- // interface ClearIndicatorProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>>
36
- // extends DefaultClearIndicatorProps<Option, IsMulti, Group> {}
37
- // For use memo need to check "ClearIndicator" props
38
- // const SelectClearIndicator = React.memo(
39
- const SelectClearIndicator = (props) => {
40
- const { children } = props;
41
- const { clearIcon, clearIconFill } = props.selectProps;
42
- return (jsxRuntime.jsx(Select.components.ClearIndicator, { ...props, children: clearIcon ? (jsxRuntime.jsx(Icon.Icon, { iconFill: clearIconFill, SvgImage: clearIcon })) : (children) }));
43
- };
44
-
45
- const SelectLoadingMessage = (props) => {
46
- const { loadingMessageText, loadingMessageTextColor, loadingMessageTextSize, } = props.selectProps;
47
- return (jsxRuntime.jsx(Group.Group, { textAlign: "center", children: jsxRuntime.jsx(Text.Text, { size: loadingMessageTextSize, textColor: loadingMessageTextColor, children: loadingMessageText }) }));
48
- };
49
-
50
- const selectAppearanceDefault = {
51
- defaultPrimary: {
52
- fill: 'surfaceSecondary',
53
- fillHover: 'surfaceTertiary',
54
- optionFillDisabled: 'surfaceSecondary',
55
- optionTextColorDisabled: 'surfaceTextQuaternary',
56
- borderColor: 'surfaceBorderTertiary',
57
- borderColorHover: 'surfaceBorderQuaternary',
58
- elevation: 8,
59
- badgeAppearance: 'accent',
60
- clearIconFill: 'surfaceItemQuaternary',
61
- dropdownIconFill: 'surfaceItemQuaternary',
62
- groupFill: 'surfaceSecondary',
63
- groupTextColor: 'surfaceTextPrimary',
64
- groupTextWeight: '600',
65
- inputCaretColor: 'accentPrimary',
66
- inputTextColor: 'surfaceTextPrimary',
67
- loaderAppearance: 'accentPrimary sizeS ghost',
68
- loadingMessageTextColor: 'surfaceTextPrimary',
69
- menuFill: 'surfacePrimary',
70
- multipleItemFill: 'accentPrimary',
71
- multipleItemFillHover: 'accentSecondary',
72
- multipleItemIconFill: 'accentItemPrimary',
73
- multipleItemTextColor: 'accentTextPrimary',
74
- multipleTextColor: 'accentTextPrimary',
75
- noOptionsTextColor: 'surfaceTextPrimary',
76
- optionBorder: 'none',
77
- optionFill: 'surfacePrimary',
78
- optionFillActive: 'accentPrimary',
79
- optionFillActiveHover: 'accentSecondary',
80
- optionFillHover: 'surfaceSecondary',
81
- optionSelectedIconFillIcon: 'successItemPrimary',
82
- optionTextColor: 'surfaceTextPrimary',
83
- optionTextColorActive: 'accentTextPrimary',
84
- placeholderTextColor: 'surfaceTextQuaternary',
85
- requiredInputBorderColor: 'warningBorderPrimary',
86
- },
87
- };
88
-
89
- const selectAppearanceDisabled = {
90
- disabledPrimary: {
91
- elevation: 8,
92
- badgeAppearance: 'accent',
93
- clearIconFill: 'surfaceItemDisabled',
94
- dropdownIconFill: 'surfaceItemDisabled',
95
- headingFill: 'surfaceSecondary',
96
- headingTextColor: 'surfaceTextPrimary',
97
- inputBorderColor: 'surfaceBorderTertiary',
98
- inputBorderColorHover: 'surfaceBorderQuaternary',
99
- inputCaretColor: 'secondaryItemPrimary',
100
- inputFill: 'surfaceDisabled',
101
- inputShape: 'rounded',
102
- inputTextColor: 'surfaceTextPrimary',
103
- multipleItemFill: 'accentPrimary',
104
- multipleItemFillHover: 'surfaceHover',
105
- multipleItemIconFill: 'accentItemPrimary',
106
- multipleItemTextColor: 'accentTextPrimary',
107
- multipleTextColor: 'accentTextPrimary',
108
- noOptionsTextColor: 'surfaceTextPrimary',
109
- optionBorder: 'none',
110
- optionFill: 'surfacePrimary',
111
- optionFillHover: 'surfaceSecondary',
112
- optionShape: 'rounded',
113
- optionTextColor: 'surfaceTextPrimary',
114
- placeholderTextColor: 'surfaceTextQuaternary',
115
- requiredInputBorderColor: 'warningBorderPrimary',
116
- },
117
- };
118
-
119
- const selectAppearanceError = {
120
- errorPrimary: {
121
- fill: 'errorTertiary',
122
- fillHover: 'errorTertiary',
123
- optionFillDisabled: 'surfaceSecondary',
124
- optionTextColorDisabled: 'surfaceTextQuaternary',
125
- borderColor: 'surfaceBorderTertiary',
126
- borderColorHover: 'surfaceBorderQuaternary',
127
- elevation: 8,
128
- badgeAppearance: 'accent',
129
- clearIconFill: 'surfaceItemQuaternary',
130
- dropdownIconFill: 'surfaceItemQuaternary',
131
- groupFill: 'surfaceSecondary',
132
- groupTextColor: 'surfaceTextPrimary',
133
- groupTextWeight: '600',
134
- inputCaretColor: 'accentPrimary',
135
- inputTextColor: 'surfaceTextPrimary',
136
- loaderAppearance: 'accentPrimary sizeS ghost',
137
- loadingMessageTextColor: 'surfaceTextPrimary',
138
- menuFill: 'surfacePrimary',
139
- multipleItemFill: 'accentPrimary',
140
- multipleItemFillHover: 'accentSecondary',
141
- multipleItemIconFill: 'accentItemPrimary',
142
- multipleItemTextColor: 'accentTextPrimary',
143
- multipleTextColor: 'accentTextPrimary',
144
- noOptionsTextColor: 'surfaceTextPrimary',
145
- optionBorder: 'none',
146
- optionFill: 'surfacePrimary',
147
- optionFillActive: 'accentPrimary',
148
- optionFillActiveHover: 'accentSecondary',
149
- optionFillHover: 'surfaceSecondary',
150
- optionSelectedIconFillIcon: 'successItemPrimary',
151
- optionTextColor: 'surfaceTextPrimary',
152
- optionTextColorActive: 'accentTextPrimary',
153
- placeholderTextColor: 'surfaceTextQuaternary',
154
- requiredInputBorderColor: 'warningBorderPrimary',
155
- },
156
- };
157
-
158
- const selectAppearanceRequire = {
159
- requirePrimary: {
160
- fill: 'warningTertiary',
161
- fillHover: 'warningTertiary',
162
- optionFillDisabled: 'surfaceSecondary',
163
- optionTextColorDisabled: 'surfaceTextQuaternary',
164
- borderColor: 'surfaceBorderTertiary',
165
- borderColorHover: 'surfaceBorderQuaternary',
166
- elevation: 8,
167
- badgeAppearance: 'accent',
168
- clearIconFill: 'surfaceItemQuaternary',
169
- dropdownIconFill: 'surfaceItemQuaternary',
170
- groupFill: 'surfaceSecondary',
171
- groupTextColor: 'surfaceTextPrimary',
172
- groupTextWeight: '600',
173
- inputCaretColor: 'accentPrimary',
174
- inputTextColor: 'surfaceTextPrimary',
175
- loaderAppearance: 'accentPrimary sizeS ghost',
176
- loadingMessageTextColor: 'surfaceTextPrimary',
177
- menuFill: 'surfacePrimary',
178
- multipleItemFill: 'accentPrimary',
179
- multipleItemFillHover: 'accentSecondary',
180
- multipleItemIconFill: 'accentItemPrimary',
181
- multipleItemTextColor: 'accentTextPrimary',
182
- multipleTextColor: 'accentTextPrimary',
183
- noOptionsTextColor: 'surfaceTextPrimary',
184
- optionBorder: 'none',
185
- optionFill: 'surfacePrimary',
186
- optionFillActive: 'accentPrimary',
187
- optionFillActiveHover: 'accentSecondary',
188
- optionFillHover: 'surfaceSecondary',
189
- optionSelectedIconFillIcon: 'successItemPrimary',
190
- optionTextColor: 'surfaceTextPrimary',
191
- optionTextColorActive: 'accentTextPrimary',
192
- placeholderTextColor: 'surfaceTextQuaternary',
193
- requiredInputBorderColor: 'warningBorderPrimary',
194
- },
195
- };
196
-
197
- const selectAppearanceShape = {
198
- rounded: {
199
- multipleItemShapeRadius: '1m',
200
- shape: 'rounded',
201
- },
202
- roundedXL: {
203
- multipleItemShapeRadius: '1m',
204
- shape: 'rounded',
205
- shapeStrength: '2m',
206
- },
207
- roundedL: {
208
- multipleItemShapeRadius: '1m',
209
- shape: 'rounded',
210
- shapeStrength: '1_5m',
211
- },
212
- roundedM: {
213
- multipleItemShapeRadius: '1m',
214
- shape: 'rounded',
215
- shapeStrength: '1m',
216
- },
217
- roundedS: {
218
- multipleItemShapeRadius: '1m',
219
- shape: 'rounded',
220
- shapeStrength: '0_5m',
221
- },
222
- };
223
-
224
- const selectAppearanceSize = {
225
- sizeXL: {
226
- size: 'xl',
227
- textLoadingMessageAppearance: 'sizeM',
228
- badgeSize: 'm',
229
- badgeTextSize: 'm',
230
- clearIcon: _default.icons24.Action.Clear,
231
- dividerSize: 'xxs',
232
- dropdownIcon: _default.icons24.Arrow.ChevronDownSmall,
233
- groupTextSize: 'm',
234
- headingTextWeight: '600',
235
- inputTextSize: 'm',
236
- menuItemSize: 'l',
237
- multipleItemIcon: _default.icons16.Action.Close,
238
- multipleItemTextSize: 's',
239
- noOptionsTextSize: 's',
240
- optionSelectedIcon: _default.icons16.Form.Check,
241
- optionTextSize: 'm',
242
- placeholderTextSize: 'm',
243
- },
244
- sizeL: {
245
- size: 'l',
246
- textLoadingMessageAppearance: 'sizeM',
247
- badgeSize: 'm',
248
- badgeTextSize: 'm',
249
- clearIcon: _default.icons24.Action.Clear,
250
- dividerSize: 'xxs',
251
- dropdownIcon: _default.icons24.Arrow.ChevronDownSmall,
252
- groupTextSize: 'm',
253
- headingTextWeight: '600',
254
- inputTextSize: 'm',
255
- menuItemSize: 'l',
256
- multipleItemIcon: _default.icons16.Action.Close,
257
- multipleItemTextSize: 's',
258
- noOptionsTextSize: 'm',
259
- optionSelectedIcon: _default.icons16.Form.Check,
260
- optionTextSize: 'm',
261
- placeholderTextSize: 'm',
262
- },
263
- sizeM: {
264
- size: 'm',
265
- textLoadingMessageAppearance: 'sizeM',
266
- badgeSize: 'm',
267
- badgeTextSize: 'm',
268
- clearIcon: _default.icons24.Action.Clear,
269
- dividerSize: 'xxs',
270
- dropdownIcon: _default.icons24.Arrow.ChevronDownSmall,
271
- groupTextSize: 'm',
272
- inputTextSize: 'm',
273
- loadingMessageTextSize: 'm',
274
- menuItemSize: 'l',
275
- multipleItemIcon: _default.icons14.Action.Close,
276
- multipleItemTextSize: 'xs ',
277
- noOptionsTextSize: 'm',
278
- optionSelectedIcon: _default.icons14.Form.Check,
279
- optionTextSize: 'm',
280
- placeholderTextSize: 'm',
281
- },
282
- sizeS: {
283
- size: 's',
284
- textLoadingMessageAppearance: 'sizeS',
285
- badgeSize: 'm',
286
- badgeTextSize: 'm',
287
- clearIcon: _default.icons24.Action.Clear,
288
- dividerSize: 'xxs',
289
- dropdownIcon: _default.icons24.Arrow.ChevronDownSmall,
290
- groupTextSize: 'm',
291
- headingTextWeight: '600',
292
- inputTextSize: 's',
293
- menuItemSize: 'l',
294
- multipleItemIcon: _default.icons14.Action.Close,
295
- multipleItemTextSize: 'xs ',
296
- noOptionsTextSize: 's',
297
- optionSelectedIcon: _default.icons14.Form.Check,
298
- optionTextSize: 's',
299
- placeholderTextSize: 's',
300
- },
301
- sizeXS: {
302
- size: 'xs',
303
- textLoadingMessageAppearance: 'sizeXS',
304
- badgeSize: 'm',
305
- badgeTextSize: 'm',
306
- clearIcon: _default.icons16.Action.Clear,
307
- dividerSize: 'xxs',
308
- dropdownIcon: _default.icons16.Arrow.ChevronDownSmall,
309
- groupTextSize: 'm',
310
- headingTextWeight: '600',
311
- inputTextSize: 'xs ',
312
- menuItemSize: 'l',
313
- multipleItemIcon: _default.icons12.Action.Close,
314
- multipleItemTextSize: 'xxs',
315
- noOptionsTextSize: 'xs',
316
- // optionSelectedIcon: icons12.Form.Check,
317
- optionTextSize: 'xs',
318
- placeholderTextSize: 'xs',
319
- },
320
- sizeXXS: {
321
- size: 'xxs',
322
- textLoadingMessageAppearance: 'sizeXS',
323
- badgeSize: 'm',
324
- badgeTextSize: 'm',
325
- clearIcon: _default.icons16.Action.Clear,
326
- dividerSize: 'xxs',
327
- dropdownIcon: _default.icons16.Arrow.ChevronDownSmall,
328
- groupTextSize: 'm',
329
- headingTextWeight: '600',
330
- inputTextSize: 'xs',
331
- menuItemSize: 'l',
332
- multipleItemIcon: _default.icons12.Action.Close,
333
- // optionSelectedIcon: icons12.Form.Check,
334
- multipleItemTextSize: 'xxs',
335
- noOptionsTextSize: 'xs',
336
- optionTextSize: 'xs',
337
- placeholderTextSize: 'xs',
338
- },
339
- };
340
-
341
- const selectAppearanceStyle = {
342
- solid: {
343
- borderColor: 'none',
344
- borderColorHover: 'none',
345
- },
346
- outlined: {
347
- fill: 'none',
348
- fillHover: 'none',
349
- },
350
- full: {},
351
- ghost: {
352
- fill: 'none',
353
- borderColor: 'none',
354
- borderColorHover: 'none',
355
- },
356
- };
357
-
358
- const selectAppearanceSuccess = {
359
- successPrimary: {
360
- fill: 'successTertiary',
361
- fillHover: 'successTertiary',
362
- optionFillDisabled: 'surfaceSecondary',
363
- optionTextColorDisabled: 'surfaceTextQuaternary',
364
- borderColor: 'surfaceBorderTertiary',
365
- borderColorHover: 'surfaceBorderQuaternary',
366
- elevation: 8,
367
- badgeAppearance: 'accent',
368
- clearIconFill: 'surfaceItemQuaternary',
369
- dropdownIconFill: 'surfaceItemQuaternary',
370
- groupFill: 'surfaceSecondary',
371
- groupTextColor: 'surfaceTextPrimary',
372
- groupTextWeight: '600',
373
- inputCaretColor: 'accentPrimary',
374
- inputTextColor: 'surfaceTextPrimary',
375
- loaderAppearance: 'accentPrimary sizeS ghost',
376
- loadingMessageTextColor: 'surfaceTextPrimary',
377
- menuFill: 'surfacePrimary',
378
- multipleItemFill: 'accentPrimary',
379
- multipleItemFillHover: 'accentSecondary',
380
- multipleItemIconFill: 'accentItemPrimary',
381
- multipleItemTextColor: 'accentTextPrimary',
382
- multipleTextColor: 'accentTextPrimary',
383
- noOptionsTextColor: 'surfaceTextPrimary',
384
- optionBorder: 'none',
385
- optionFill: 'surfacePrimary',
386
- optionFillActive: 'accentPrimary',
387
- optionFillActiveHover: 'accentSecondary',
388
- optionFillHover: 'surfaceSecondary',
389
- optionSelectedIconFillIcon: 'successItemPrimary',
390
- optionTextColor: 'surfaceTextPrimary',
391
- optionTextColorActive: 'accentTextPrimary',
392
- placeholderTextColor: 'surfaceTextQuaternary',
393
- requiredInputBorderColor: 'warningBorderPrimary',
394
- },
395
- };
396
-
397
- const selectAppearance = {
398
- ...selectAppearanceRequire,
399
- ...selectAppearanceDefault,
400
- ...selectAppearanceDisabled,
401
- ...selectAppearanceSuccess,
402
- ...selectAppearanceSize,
403
- ...selectAppearanceError,
404
- ...selectAppearanceShape,
405
- ...selectAppearanceStyle,
406
- };
407
-
408
- const SelectControl = (props) => {
409
- const { before, after } = props.selectProps;
410
- return (jsxRuntime.jsxs(React.Fragment, { children: [before, jsxRuntime.jsx(Select.components.Control, { ...props, className: clsx('select__control') }), after] }));
411
- };
412
-
413
- // For use memo need to check "DropdownIndicator" props
414
- // const SelectDropdownIndicator = React.memo(
415
- const SelectDropdownIndicator = (props) => {
416
- const { children } = props;
417
- const { dropdownFillHover, dropdownIcon, dropdownIconFill, dropdownIconShape, } = props.selectProps;
418
- return (jsxRuntime.jsx(Select.components.DropdownIndicator, { ...props, children: dropdownIcon ? (jsxRuntime.jsx(Icon.Icon, { fillHover: dropdownFillHover, iconFill: dropdownIconFill, shape: dropdownIconShape, SvgImage: dropdownIcon })) : (children) }));
419
- };
420
-
421
- const SelectGroupHeading = (props) => {
422
- const { groupFill, groupTextColor, groupTextSize, groupTextWeight } = props.selectProps;
423
- return (jsxRuntime.jsx(Select.components.GroupHeading, { ...props, className: clsx('select__menu-group-heading', groupFill && `fill_${groupFill}`), children: jsxRuntime.jsx(Text.Text, { size: groupTextSize, textColor: groupTextColor, textWeight: groupTextWeight, children: props.data.label }) }));
424
- };
425
-
426
- const SelectIndicatorsContainer = (props) => {
427
- const { badgeAppearance, badgeSize, badgeTextSize, showBadge, value } = props.selectProps;
428
- return (jsxRuntime.jsxs(Select.components.IndicatorsContainer, { ...props, children: [showBadge &&
429
- value &&
430
- // @ts-expect-error
431
- value?.length > 0 ? (jsxRuntime.jsx(Icon.Badge, { appearance: badgeAppearance, size: badgeSize, textSize: badgeTextSize,
432
- // @ts-expect-error
433
- value: value.length.toString() })) : null, props.children] }));
434
- };
435
-
436
- const SelectInput = (props) => {
437
- const { inputCaretColor, inputTextColor, inputTextSize } = props.selectProps;
438
- return (jsxRuntime.jsx(Select.components.Input, { ...props, className: clsx(inputTextSize && `text_size_${inputTextSize}`, inputTextColor && `text-color_${inputTextColor}`, inputCaretColor && `caret-color_${inputCaretColor}`) }));
439
- };
440
-
441
- const SelectLoadingIndicator = (props) => {
442
- const { loaderAppearance, isLoading } = props.selectProps;
443
- return isLoading && jsxRuntime.jsx(Loader.Loader, { appearance: loaderAppearance });
444
- };
445
-
446
- const SelectMenu = (props) => {
447
- const { elevation, menuAfter, menuBefore, menuFill, menuShape, menuShapeStrength, } = props.selectProps;
448
- return (jsxRuntime.jsxs(Select.components.Menu, { ...props, className: clsx(menuFill && `fill_${menuFill}`, menuShape && `shape_${menuShape}`, menuShapeStrength && `shape-strength_${menuShapeStrength}`, elevation && `elevation_${elevation}`), children: [menuBefore, props.selectProps.fetchingData ? (jsxRuntime.jsx("span", { className: "fetching", children: "Fetching data..." })) : (jsxRuntime.jsx(React.Fragment, { children: props.children })), menuAfter] }));
449
- };
450
-
451
- const SelectMultiValueContainer = (props) => {
452
- const { multipleItemFill, multipleItemFillHover, multipleItemShapeRadius } = props.selectProps;
453
- return (jsxRuntime.jsx(Select.components.MultiValueContainer, { ...props, children: jsxRuntime.jsx(Group.Group, { className: clsx('select__multi-value-item'), direction: "horizontal", alignItems: "center", fill: multipleItemFill, fillHover: multipleItemFillHover, borderRadius: multipleItemShapeRadius, gap: "0.5m", children: props.children }) }));
454
- };
455
-
456
- const SelectMultiValueLabel = (props) => {
457
- const { multipleItemTextColor, multipleItemTextSize } = props.selectProps;
458
- return (jsxRuntime.jsx(Select.components.MultiValueLabel, { ...props, children: props.data && (jsxRuntime.jsx(Text.Text, { size: multipleItemTextSize, textColor: multipleItemTextColor, children: props.data.label })) }));
459
- };
460
-
461
- const SelectMultiValueRemove = (props) => {
462
- const { multipleItemIcon, multipleItemIconFill } = props.selectProps;
463
- return (jsxRuntime.jsx(Select.components.MultiValueRemove, { ...props, children: jsxRuntime.jsx(Icon.Icon, { iconFill: multipleItemIconFill, SvgImage: multipleItemIcon }) }));
464
- };
465
-
466
- const SelectNoOptions = (props) => {
467
- const { inputValue, noOptionsSearchText, noOptionsText, noOptionsTextColor, noOptionsTextSize, optionFill, } = props.selectProps;
468
- return (jsxRuntime.jsx(Select.components.NoOptionsMessage, { ...props, className: clsx(optionFill && `fill_${optionFill}`), children: jsxRuntime.jsx(Group.Group, { textAlign: "center", children: jsxRuntime.jsx(Text.Text, { size: noOptionsTextSize, textColor: noOptionsTextColor, children: inputValue && noOptionsSearchText
469
- ? noOptionsSearchText
470
- : noOptionsText }) }) }));
471
- };
472
-
473
- const SelectOption = (props) => {
474
- const { label, isSelected } = props;
475
- const { optionFillActiveDisabled, optionFillDisabled, optionTextColorDisabled, dividerDirection, dividerFill, dividerSize, menuItemSize, optionAfter, optionBefore, optionBorder, optionBorderType, optionFill, optionFillActive, optionFillActiveHover, optionFillHover, optionSelectedIcon, optionSelectedIconFillIcon, optionSelectedIconSize, optionSelectedIconSrc, optionShape, optionShapeStrength, optionTextColor, optionTextColorActive, optionTextSize, showDivider, } = props.selectProps;
476
- return (jsxRuntime.jsxs(Select.components.Option, { ...props, className: clsx('select__menu-list-item', isSelected || props.isSelected
477
- ? !props.isDisabled
478
- ? optionFillActive && `fill_active_${optionFillActive}`
479
- : optionFillActiveDisabled &&
480
- `fill_active_disabled_${optionFillActiveDisabled}`
481
- : !props.isDisabled
482
- ? optionFill && `fill_${optionFill}`
483
- : optionFillDisabled && `fill_${optionFillDisabled}`, (isSelected || props.isSelected) &&
484
- !props.isDisabled &&
485
- optionFillActiveHover &&
486
- `fill_active_hover_${optionFillActiveHover}`, !isSelected &&
487
- !props.isSelected &&
488
- !props.isDisabled &&
489
- optionFillHover &&
490
- `fill_hover_${optionFillHover}`, isSelected && 'select__menu-list-item_state_selected', menuItemSize && `select__menu-list-item_size_${menuItemSize}`, optionBorder && `border-color_${optionBorder}`, optionBorderType && `border_type_${optionBorderType}`, optionShape && `shape_${optionShape}`, optionShapeStrength && `shape-strength_${optionShapeStrength}`), children: [optionBefore, jsxRuntime.jsx(Text.Text, { className: "select__menu-list-item_option", size: optionTextSize, textColor: optionTextColor, textColorActive: optionTextColorActive, textColorDisabled: optionTextColorDisabled, isDisabled: props.isDisabled, isActive: props.isSelected || isSelected, children: label }), (isSelected || props.isSelected) && (jsxRuntime.jsx("div", { className: "select__menu-list-item_selected", children: jsxRuntime.jsx(Icon.Icon, { iconFill: optionSelectedIconFillIcon, iconSize: optionSelectedIconSize, imageSrc: optionSelectedIconSrc, SvgImage: optionSelectedIcon }) })), optionAfter, showDivider && (jsxRuntime.jsx(Divider.Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: dividerFill }))] }));
491
- };
492
-
493
- const SelectPlaceholder = (props) => {
494
- const { placeholderTextColor, placeholderTextSize } = props.selectProps;
495
- return (jsxRuntime.jsx(Select.components.Placeholder, { ...props, children: jsxRuntime.jsx(Text.Text, { size: placeholderTextSize, textColor: placeholderTextColor, children: props.children }) }));
496
- };
497
-
498
- const SelectSingleValue = (props) => {
499
- const { data } = props;
500
- const { inputTextColor, inputTextSize } = props.selectProps;
501
- return (jsxRuntime.jsxs(Select.components.SingleValue, { ...props, children: [data && data.optionBefore, jsxRuntime.jsx(Text.Text, { size: inputTextSize, textColor: inputTextColor, children: props.children }), data && data.optionAfter] }));
502
- };
503
-
504
- const SelectValueContainer = (props) => {
505
- const { inputAfter, inputBefore } = props.selectProps;
506
- return (jsxRuntime.jsxs(Select.components.ValueContainer, { ...props, children: [inputBefore, props.children, inputAfter] }));
507
- };
508
-
509
- const selectConfig = {
510
- appearance: selectAppearance,
511
- setAppearance: (appearanceConfig) => {
512
- selectConfig.appearance = appearanceConfig;
513
- },
514
- };
515
- const SelectContainer = React.forwardRef(function SelectContainer(props, ref) {
516
- const { appearance = '', className, width, minWidth, initialValue, badgeAppearance, badgeSize, defaultValue, dividerDirection, filterOption, hideSelectedOptions, hideValueContainer, inputAfter, inputBefore, instanceId, loaderAppearance, loadingMessageText, menuAfter, menuBefore, menuIsOpen, menuItemSize, noOptionsSearchText, noOptionsText, optionAfter, optionBefore, options, placeholder, showBadge, showDivider, value, before, after, openMenuOnClick, closeMenuOnSelect, isDisabled, isClearable, isCreatable, isLoading, isMulti, isSearchable, set, onChange, onInputChange, } = props;
517
- const defaultRef = React.useRef(null);
518
- const selectRef = ref || defaultRef;
519
- const SelectComponent = isCreatable
520
- ? CreatableSelect
521
- : Select;
522
- React.useEffect(() => {
523
- // @ts-expect-error
524
- const onClickOutside = (event) => {
525
- const isTargetSelectContainer =
526
- // maybe here ".contains()"?
527
- event.target.hasClass &&
528
- event.target.hasClass('select_state_hide-value-container');
529
- if ('current' in selectRef &&
530
- selectRef.current &&
531
- selectRef.current.controlRef) {
532
- const isTargetInsideController = selectRef.current.controlRef.contains(event.target);
533
- if (!isTargetSelectContainer && !isTargetInsideController) {
534
- // @ts-expect-error
535
- selectRef.current?.onInputBlur();
536
- }
537
- }
538
- };
539
- if (hideValueContainer) {
540
- document.addEventListener('click', onClickOutside);
541
- }
542
- return () => {
543
- if (hideValueContainer) {
544
- document.removeEventListener('click', onClickOutside);
545
- }
546
- };
547
- }, [hideValueContainer, selectRef]);
548
- const clearStyle = React.useMemo(() => new Proxy({
549
- container: {
550
- width: width,
551
- minWidth: minWidth,
552
- },
553
- }, {
554
- get: (target, prop) => {
555
- if (prop in target) {
556
- return () => target[prop];
557
- }
558
- return () => { };
559
- },
560
- }), [minWidth, width]);
561
- const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, selectConfig, isDisabled);
562
- const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
563
- const { fillClass, fillHoverClass, borderColorClass, borderColorHoverClass, elevation, badgeTextSize, clearIcon, clearIconFill, dividerFill, dividerSize, dropdownFillHover, dropdownIcon, dropdownIconFill, dropdownIconShape, groupFillClass, groupTextColorClass, groupTextSizeClass, groupTextWeightClass, inputCaretColorClass, inputTextColorClass, inputTextSizeClass, loadingMessageTextColor, loadingMessageTextSize, menuFillClass, multipleItemFill, multipleItemFillHover, multipleItemIcon, multipleItemIconFill, multipleItemShapeRadius, multipleItemTextColorClass, multipleItemTextSizeClass, noOptionsTextColorClass, noOptionsTextSizeClass, optionBorderClass, optionBorderTypeClass, optionFillActiveClass, optionFillActiveDisabledClass, optionFillActiveHoverClass, optionFillClass, optionFillDisabledClass, optionFillHoverClass, optionSelectedIcon, optionSelectedIconFillIcon, optionSelectedIconSize, optionSelectedIconSrc, optionTextColorActiveClass, optionTextColorClass, optionTextColorDisabled, optionTextSizeClass, placeholderTextColor, placeholderTextSize, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
564
- return (jsxRuntime.jsx(SelectComponent, { className: clsx(className, 'select', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, sizeClass && `select_size_${sizeClass}`, hideValueContainer && 'select_state_hide-value-container', set && `select_set_${set}`, widthClass && `select_width_${widthClass}`), ref: selectRef, elevation: elevation, badgeAppearance: badgeAppearance, badgeSize: badgeSize, badgeTextSize: badgeTextSize, classNamePrefix: "select", clearIcon: clearIcon, clearIconFill: clearIconFill, components: {
565
- IndicatorSeparator: () => null,
566
- ClearIndicator: SelectClearIndicator,
567
- Control: SelectControl,
568
- DropdownIndicator: SelectDropdownIndicator,
569
- GroupHeading: SelectGroupHeading,
570
- IndicatorsContainer: SelectIndicatorsContainer,
571
- Input: SelectInput,
572
- LoadingIndicator: SelectLoadingIndicator,
573
- LoadingMessage: SelectLoadingMessage,
574
- Menu: SelectMenu,
575
- MultiValueContainer: SelectMultiValueContainer,
576
- MultiValueLabel: SelectMultiValueLabel,
577
- MultiValueRemove: SelectMultiValueRemove,
578
- NoOptionsMessage: SelectNoOptions,
579
- Option: SelectOption,
580
- Placeholder: SelectPlaceholder,
581
- SingleValue: SelectSingleValue,
582
- ValueContainer: SelectValueContainer,
583
- }, defaultValue: defaultValue || initialValue, dividerDirection: dividerDirection, dividerFill: dividerFill, dividerSize: dividerSize, dropdownFillHover: dropdownFillHover, dropdownIcon: dropdownIcon, dropdownIconFill: dropdownIconFill, dropdownIconShape: dropdownIconShape, filterOption: filterOption, groupFill: groupFillClass, groupTextColor: groupTextColorClass, groupTextSize: groupTextSizeClass, groupTextWeight: groupTextWeightClass, hideSelectedOptions: hideSelectedOptions ?? false, inputAfter: inputAfter, inputBefore: inputBefore, inputCaretColor: inputCaretColorClass, inputShape: shapeClass, inputShapeStrength: shapeStrengthClass, inputTextColor: inputTextColorClass, inputTextSize: inputTextSizeClass, instanceId: instanceId, loaderAppearance: loaderAppearance, loadingMessageText: loadingMessageText, loadingMessageTextColor: loadingMessageTextColor, loadingMessageTextSize: loadingMessageTextSize, menuAfter: menuAfter, menuBefore: menuBefore, menuFill: menuFillClass, menuIsOpen: menuIsOpen, menuItemSize: menuItemSize, menuShape: shapeClass, menuShapeStrength: shapeStrengthClass, multipleItemFill: multipleItemFill, multipleItemFillHover: multipleItemFillHover, multipleItemIcon: multipleItemIcon, multipleItemIconFill: multipleItemIconFill, multipleItemShapeRadius: multipleItemShapeRadius, multipleItemSize: sizeClass, multipleItemTextColor: multipleItemTextColorClass, multipleItemTextSize: multipleItemTextSizeClass, noOptionBorder: optionBorderClass && `border-color_${optionBorderClass}`, noOptionBorderType: optionBorderTypeClass && `border_type_${optionBorderTypeClass}`, noOptionsFill: optionFillClass && `fill_${optionFillClass}`, noOptionsSearchText: noOptionsSearchText, noOptionsText: noOptionsText, noOptionsTextColor: noOptionsTextColorClass, noOptionsTextSize: noOptionsTextSizeClass, optionAfter: optionAfter, optionBefore: optionBefore, optionBorder: optionBorderClass, optionBorderType: optionBorderTypeClass, optionFill: optionFillClass, optionFillActive: optionFillActiveClass, optionFillActiveDisabledClass: optionFillActiveDisabledClass, optionFillActiveHover: optionFillActiveHoverClass, optionFillDisabled: optionFillDisabledClass, optionFillHover: optionFillHoverClass, options: options, optionSelectedIcon: optionSelectedIcon, optionSelectedIconFillIcon: optionSelectedIconFillIcon, optionSelectedIconSize: optionSelectedIconSize, optionSelectedIconSrc: optionSelectedIconSrc, optionShape: shapeClass, optionShapeStrength: shapeStrengthClass, optionTextColor: optionTextColorClass, optionTextColorActive: optionTextColorActiveClass, optionTextColorDisabled: optionTextColorDisabled, optionTextSize: optionTextSizeClass, placeholder: placeholder, placeholderTextColor: placeholderTextColor, placeholderTextSize: placeholderTextSize, showBadge: showBadge, showDivider: showDivider, styles: clearStyle, value: value, before: before, after: after, openMenuOnClick: openMenuOnClick, closeMenuOnSelect: closeMenuOnSelect ?? true, isDisabled: isDisabled, isClearable: isClearable ?? false, isLoading: isLoading, isMulti: isMulti ?? false, isSearchable: isSearchable ?? false, set: set, onChange: onChange, onInputChange: onInputChange }));
584
- });
585
-
586
- exports.Select = SelectContainer;
587
- exports.SelectClearIndicator = SelectClearIndicator;
588
- exports.SelectControl = SelectControl;
589
- exports.SelectDropdownIndicator = SelectDropdownIndicator;
590
- exports.SelectGroupHeading = SelectGroupHeading;
591
- exports.SelectIndicatorsContainer = SelectIndicatorsContainer;
592
- exports.SelectInput = SelectInput;
593
- exports.SelectMenu = SelectMenu;
594
- exports.SelectMultiValueContainer = SelectMultiValueContainer;
595
- exports.SelectMultiValueLabel = SelectMultiValueLabel;
596
- exports.SelectMultiValueRemove = SelectMultiValueRemove;
597
- exports.SelectOption = SelectOption;
598
- exports.SelectPlaceholder = SelectPlaceholder;
599
- exports.SelectSingleValue = SelectSingleValue;
600
- exports.SelectValueContainer = SelectValueContainer;
601
- exports.selectConfig = selectConfig;
33
+ require('../../Loader_cjs_CRiUlTC3.js');
34
+ require('../../Divider_cjs_DrmV2ezS.js');
35
+
36
+
37
+
38
+ exports.Select = SelectContainer.SelectContainer;
39
+ exports.SelectClearIndicator = SelectContainer.SelectClearIndicator;
40
+ exports.SelectControl = SelectContainer.SelectControl;
41
+ exports.SelectDropdownIndicator = SelectContainer.SelectDropdownIndicator;
42
+ exports.SelectGroupHeading = SelectContainer.SelectGroupHeading;
43
+ exports.SelectIndicatorsContainer = SelectContainer.SelectIndicatorsContainer;
44
+ exports.SelectInput = SelectContainer.SelectInput;
45
+ exports.SelectMenu = SelectContainer.SelectMenu;
46
+ exports.SelectMultiValueContainer = SelectContainer.SelectMultiValueContainer;
47
+ exports.SelectMultiValueLabel = SelectContainer.SelectMultiValueLabel;
48
+ exports.SelectMultiValueRemove = SelectContainer.SelectMultiValueRemove;
49
+ exports.SelectOption = SelectContainer.SelectOption;
50
+ exports.SelectPlaceholder = SelectContainer.SelectPlaceholder;
51
+ exports.SelectSingleValue = SelectContainer.SelectSingleValue;
52
+ exports.SelectValueContainer = SelectContainer.SelectValueContainer;
53
+ exports.selectConfig = SelectContainer.selectConfig;
@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
2
2
  import { useMemo } from 'react';
3
3
  import clsx from 'clsx';
4
4
  import { PartySuggestions } from 'react-dadata';
5
- import { I as Input } from '../Input_es_Dboktsxf.js';
5
+ import { I as Input } from '../Input_es_I8GPoibb.js';
6
6
  import '../hooks/useAppearanceConfig/useAppearanceConfig.js';
7
7
  import '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
8
8
  import 'lodash/camelCase';