@xsolla/xui-select 0.89.0 → 0.90.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/native/index.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  // src/Select.tsx
2
- import React4, { useState, useRef, useEffect } from "react";
2
+ import React2, { useState, useRef, useEffect } from "react";
3
3
 
4
4
  // ../primitives-native/src/Box.tsx
5
5
  import {
@@ -206,41 +206,10 @@ var Text = ({
206
206
  return /* @__PURE__ */ jsx2(RNText, { style, testID: id, accessibilityRole, children });
207
207
  };
208
208
 
209
- // ../primitives-native/src/Spinner.tsx
210
- import { ActivityIndicator, View as View2 } from "react-native";
211
- import { jsx as jsx3 } from "react/jsx-runtime";
212
- var Spinner = ({
213
- color,
214
- size,
215
- role,
216
- "aria-label": ariaLabel,
217
- "aria-live": ariaLive,
218
- testID
219
- }) => {
220
- return /* @__PURE__ */ jsx3(
221
- View2,
222
- {
223
- accessible: true,
224
- accessibilityRole: role === "status" ? "none" : void 0,
225
- accessibilityLabel: ariaLabel,
226
- accessibilityLiveRegion: ariaLive === "polite" ? "polite" : ariaLive === "assertive" ? "assertive" : "none",
227
- testID,
228
- children: /* @__PURE__ */ jsx3(
229
- ActivityIndicator,
230
- {
231
- color,
232
- size: typeof size === "number" ? size : "small"
233
- }
234
- )
235
- }
236
- );
237
- };
238
- Spinner.displayName = "Spinner";
239
-
240
209
  // ../primitives-native/src/Icon.tsx
241
210
  import React from "react";
242
- import { View as View3 } from "react-native";
243
- import { jsx as jsx4 } from "react/jsx-runtime";
211
+ import { View as View2 } from "react-native";
212
+ import { jsx as jsx3 } from "react/jsx-runtime";
244
213
  var Icon = ({ children, color, size }) => {
245
214
  const style = {
246
215
  width: typeof size === "number" ? size : void 0,
@@ -258,230 +227,13 @@ var Icon = ({ children, color, size }) => {
258
227
  }
259
228
  return child;
260
229
  });
261
- return /* @__PURE__ */ jsx4(View3, { style, children: childrenWithProps });
262
- };
263
-
264
- // ../primitives-native/src/Divider.tsx
265
- import { View as View4 } from "react-native";
266
- import { jsx as jsx5 } from "react/jsx-runtime";
267
-
268
- // ../primitives-native/src/Input.tsx
269
- import { forwardRef } from "react";
270
- import { TextInput as RNTextInput } from "react-native";
271
- import { jsx as jsx6 } from "react/jsx-runtime";
272
- var keyboardTypeMap = {
273
- text: "default",
274
- number: "numeric",
275
- email: "email-address",
276
- tel: "phone-pad",
277
- url: "url",
278
- decimal: "decimal-pad"
230
+ return /* @__PURE__ */ jsx3(View2, { style, children: childrenWithProps });
279
231
  };
280
- var inputModeToKeyboardType = {
281
- none: "default",
282
- text: "default",
283
- decimal: "decimal-pad",
284
- numeric: "number-pad",
285
- tel: "phone-pad",
286
- search: "default",
287
- email: "email-address",
288
- url: "url"
289
- };
290
- var autoCompleteToTextContentType = {
291
- "one-time-code": "oneTimeCode",
292
- email: "emailAddress",
293
- username: "username",
294
- password: "password",
295
- "new-password": "newPassword",
296
- tel: "telephoneNumber",
297
- "postal-code": "postalCode",
298
- name: "name"
299
- };
300
- var InputPrimitive = forwardRef(
301
- ({
302
- value,
303
- placeholder,
304
- onChange,
305
- onChangeText,
306
- onFocus,
307
- onBlur,
308
- onKeyDown,
309
- disabled,
310
- secureTextEntry,
311
- style,
312
- color,
313
- fontSize,
314
- placeholderTextColor,
315
- maxLength,
316
- type,
317
- inputMode,
318
- autoComplete,
319
- id,
320
- "aria-describedby": ariaDescribedBy,
321
- "aria-label": ariaLabel,
322
- "aria-disabled": ariaDisabled,
323
- "data-testid": dataTestId
324
- }, ref) => {
325
- const handleChangeText = (text) => {
326
- onChangeText?.(text);
327
- if (onChange) {
328
- const syntheticEvent = {
329
- target: { value: text },
330
- currentTarget: { value: text },
331
- type: "change",
332
- nativeEvent: { text },
333
- preventDefault: () => {
334
- },
335
- stopPropagation: () => {
336
- },
337
- isTrusted: false
338
- };
339
- onChange(syntheticEvent);
340
- }
341
- };
342
- const keyboardType = inputMode ? inputModeToKeyboardType[inputMode] || "default" : type ? keyboardTypeMap[type] || "default" : "default";
343
- const textContentType = autoComplete ? autoCompleteToTextContentType[autoComplete] : void 0;
344
- return /* @__PURE__ */ jsx6(
345
- RNTextInput,
346
- {
347
- ref,
348
- value,
349
- placeholder,
350
- onChangeText: handleChangeText,
351
- onFocus,
352
- onBlur,
353
- onKeyPress: (e) => {
354
- if (onKeyDown) {
355
- onKeyDown({
356
- key: e.nativeEvent.key,
357
- preventDefault: () => {
358
- }
359
- });
360
- }
361
- },
362
- editable: !disabled,
363
- secureTextEntry: secureTextEntry || type === "password",
364
- keyboardType,
365
- textContentType,
366
- style: [
367
- {
368
- color,
369
- fontSize: typeof fontSize === "number" ? fontSize : void 0,
370
- flex: 1,
371
- padding: 0,
372
- textAlign: style?.textAlign || "left"
373
- },
374
- style
375
- ],
376
- placeholderTextColor,
377
- maxLength,
378
- testID: dataTestId || id,
379
- accessibilityLabel: ariaLabel,
380
- accessibilityHint: ariaDescribedBy,
381
- accessibilityState: {
382
- disabled: disabled || ariaDisabled
383
- },
384
- accessible: true
385
- }
386
- );
387
- }
388
- );
389
- InputPrimitive.displayName = "InputPrimitive";
390
-
391
- // ../primitives-native/src/TextArea.tsx
392
- import { forwardRef as forwardRef2 } from "react";
393
- import { TextInput as RNTextInput2 } from "react-native";
394
- import { jsx as jsx7 } from "react/jsx-runtime";
395
- var TextAreaPrimitive = forwardRef2(
396
- ({
397
- value,
398
- placeholder,
399
- onChange,
400
- onChangeText,
401
- onFocus,
402
- onBlur,
403
- onKeyDown,
404
- disabled,
405
- style,
406
- color,
407
- fontSize,
408
- placeholderTextColor,
409
- maxLength,
410
- rows,
411
- id,
412
- "aria-describedby": ariaDescribedBy,
413
- "aria-label": ariaLabel,
414
- "aria-disabled": ariaDisabled,
415
- "data-testid": dataTestId
416
- }, ref) => {
417
- const handleChangeText = (text) => {
418
- onChangeText?.(text);
419
- if (onChange) {
420
- const syntheticEvent = {
421
- target: { value: text },
422
- currentTarget: { value: text },
423
- type: "change",
424
- nativeEvent: { text },
425
- preventDefault: () => {
426
- },
427
- stopPropagation: () => {
428
- },
429
- isTrusted: false
430
- };
431
- onChange(syntheticEvent);
432
- }
433
- };
434
- return /* @__PURE__ */ jsx7(
435
- RNTextInput2,
436
- {
437
- ref,
438
- value,
439
- placeholder,
440
- onChangeText: handleChangeText,
441
- onFocus,
442
- onBlur,
443
- onKeyPress: (e) => {
444
- if (onKeyDown) {
445
- onKeyDown({
446
- key: e.nativeEvent.key,
447
- preventDefault: () => {
448
- }
449
- });
450
- }
451
- },
452
- editable: !disabled,
453
- multiline: true,
454
- numberOfLines: rows || 4,
455
- style: [
456
- {
457
- color,
458
- fontSize: typeof fontSize === "number" ? fontSize : void 0,
459
- flex: 1,
460
- padding: 0,
461
- textAlignVertical: "top",
462
- textAlign: style?.textAlign || "left"
463
- },
464
- style
465
- ],
466
- placeholderTextColor,
467
- maxLength,
468
- testID: dataTestId || id,
469
- accessibilityLabel: ariaLabel,
470
- accessibilityHint: ariaDescribedBy,
471
- accessibilityState: {
472
- disabled: disabled || ariaDisabled
473
- },
474
- accessible: true
475
- }
476
- );
477
- }
478
- );
479
- TextAreaPrimitive.displayName = "TextAreaPrimitive";
480
232
 
481
233
  // src/Select.tsx
482
234
  import { useDesignSystem, isNative } from "@xsolla/xui-core";
483
- import { jsx as jsx8, jsxs } from "react/jsx-runtime";
484
- var ChevronDown = () => /* @__PURE__ */ jsx8(
235
+ import { jsx as jsx4, jsxs } from "react/jsx-runtime";
236
+ var ChevronDown = () => /* @__PURE__ */ jsx4(
485
237
  "svg",
486
238
  {
487
239
  width: "100%",
@@ -489,7 +241,7 @@ var ChevronDown = () => /* @__PURE__ */ jsx8(
489
241
  viewBox: "0 0 18 18",
490
242
  fill: "none",
491
243
  xmlns: "http://www.w3.org/2000/svg",
492
- children: /* @__PURE__ */ jsx8(
244
+ children: /* @__PURE__ */ jsx4(
493
245
  "path",
494
246
  {
495
247
  d: "M4.5 6.75L9 11.25L13.5 6.75",
@@ -501,7 +253,7 @@ var ChevronDown = () => /* @__PURE__ */ jsx8(
501
253
  )
502
254
  }
503
255
  );
504
- var ChevronUp = () => /* @__PURE__ */ jsx8(
256
+ var ChevronUp = () => /* @__PURE__ */ jsx4(
505
257
  "svg",
506
258
  {
507
259
  width: "100%",
@@ -509,7 +261,7 @@ var ChevronUp = () => /* @__PURE__ */ jsx8(
509
261
  viewBox: "0 0 18 18",
510
262
  fill: "none",
511
263
  xmlns: "http://www.w3.org/2000/svg",
512
- children: /* @__PURE__ */ jsx8(
264
+ children: /* @__PURE__ */ jsx4(
513
265
  "path",
514
266
  {
515
267
  d: "M13.5 11.25L9 6.75L4.5 11.25",
@@ -531,15 +283,15 @@ var ExclamationMarkCr = () => /* @__PURE__ */ jsxs(
531
283
  style: { stroke: "none" },
532
284
  xmlns: "http://www.w3.org/2000/svg",
533
285
  children: [
534
- /* @__PURE__ */ jsx8(
286
+ /* @__PURE__ */ jsx4(
535
287
  "path",
536
288
  {
537
289
  d: "M9.75 12.75C9.75 13.16 9.41 13.5 9 13.5C8.59 13.5 8.25 13.16 8.25 12.75C8.25 12.34 8.59 12 9 12C9.41 12 9.75 12.34 9.75 12.75Z",
538
290
  fill: "currentColor"
539
291
  }
540
292
  ),
541
- /* @__PURE__ */ jsx8("path", { d: "M9.75 10.5H8.25V4.5H9.75V10.5Z", fill: "currentColor" }),
542
- /* @__PURE__ */ jsx8(
293
+ /* @__PURE__ */ jsx4("path", { d: "M9.75 10.5H8.25V4.5H9.75V10.5Z", fill: "currentColor" }),
294
+ /* @__PURE__ */ jsx4(
543
295
  "path",
544
296
  {
545
297
  fillRule: "evenodd",
@@ -560,7 +312,7 @@ var SearchIcon = () => /* @__PURE__ */ jsxs(
560
312
  fill: "none",
561
313
  xmlns: "http://www.w3.org/2000/svg",
562
314
  children: [
563
- /* @__PURE__ */ jsx8(
315
+ /* @__PURE__ */ jsx4(
564
316
  "path",
565
317
  {
566
318
  d: "M8.25 14.25C11.5637 14.25 14.25 11.5637 14.25 8.25C14.25 4.93629 11.5637 2.25 8.25 2.25C4.93629 2.25 2.25 4.93629 2.25 8.25C2.25 11.5637 4.93629 14.25 8.25 14.25Z",
@@ -570,7 +322,7 @@ var SearchIcon = () => /* @__PURE__ */ jsxs(
570
322
  strokeLinejoin: "round"
571
323
  }
572
324
  ),
573
- /* @__PURE__ */ jsx8(
325
+ /* @__PURE__ */ jsx4(
574
326
  "path",
575
327
  {
576
328
  d: "M15.75 15.75L12.4875 12.4875",
@@ -614,7 +366,7 @@ var Select = ({
614
366
  const isDisable = externalState === "disable" || disabled;
615
367
  const isError = externalState === "error" || !!errorMessage;
616
368
  const isFocus = externalState === "focus" || isOpen;
617
- React4.useEffect(() => {
369
+ React2.useEffect(() => {
618
370
  if (value !== void 0) {
619
371
  setSelectedValue(value);
620
372
  }
@@ -713,7 +465,7 @@ var Select = ({
713
465
  width: "100%",
714
466
  position: "relative",
715
467
  children: [
716
- label && /* @__PURE__ */ jsx8(
468
+ label && /* @__PURE__ */ jsx4(
717
469
  Text,
718
470
  {
719
471
  color: theme.colors.content.secondary,
@@ -743,8 +495,8 @@ var Select = ({
743
495
  borderColor: inputColors.borderHover
744
496
  } : void 0,
745
497
  children: [
746
- iconLeft && /* @__PURE__ */ jsx8(Box, { alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsx8(Icon, { size: sizeStyles.iconSize, color: iconColor, children: iconLeft }) }),
747
- !iconOnly && /* @__PURE__ */ jsx8(Box, { flex: 1, height: "100%", justifyContent: "center", children: /* @__PURE__ */ jsx8(
498
+ iconLeft && /* @__PURE__ */ jsx4(Box, { alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsx4(Icon, { size: sizeStyles.iconSize, color: iconColor, children: iconLeft }) }),
499
+ !iconOnly && /* @__PURE__ */ jsx4(Box, { flex: 1, height: "100%", justifyContent: "center", children: /* @__PURE__ */ jsx4(
748
500
  Text,
749
501
  {
750
502
  color: textColor,
@@ -754,15 +506,15 @@ var Select = ({
754
506
  }
755
507
  ) }),
756
508
  /* @__PURE__ */ jsxs(Box, { flexDirection: "row", alignItems: "center", gap: 4, children: [
757
- isError && /* @__PURE__ */ jsx8(
509
+ isError && /* @__PURE__ */ jsx4(
758
510
  Icon,
759
511
  {
760
512
  size: sizeStyles.iconSize,
761
513
  color: theme.colors.content.alert.primary,
762
- children: /* @__PURE__ */ jsx8(ExclamationMarkCr, {})
514
+ children: /* @__PURE__ */ jsx4(ExclamationMarkCr, {})
763
515
  }
764
516
  ),
765
- /* @__PURE__ */ jsx8(Icon, { size: sizeStyles.iconSize, color: iconColor, children: iconRight !== void 0 ? iconRight : isFocus ? /* @__PURE__ */ jsx8(ChevronUp, {}) : /* @__PURE__ */ jsx8(ChevronDown, {}) })
517
+ /* @__PURE__ */ jsx4(Icon, { size: sizeStyles.iconSize, color: iconColor, children: iconRight !== void 0 ? iconRight : isFocus ? /* @__PURE__ */ jsx4(ChevronUp, {}) : /* @__PURE__ */ jsx4(ChevronDown, {}) })
766
518
  ] })
767
519
  ]
768
520
  }
@@ -784,7 +536,7 @@ var Select = ({
784
536
  minWidth: iconOnly ? sizeStyles.height * 3 : void 0
785
537
  },
786
538
  children: [
787
- searchable && /* @__PURE__ */ jsx8(
539
+ searchable && /* @__PURE__ */ jsx4(
788
540
  Box,
789
541
  {
790
542
  paddingHorizontal: sizeStyles.paddingHorizontal,
@@ -799,15 +551,15 @@ var Select = ({
799
551
  gap: sizeStyles.paddingHorizontal / 2,
800
552
  paddingHorizontal: 4,
801
553
  children: [
802
- /* @__PURE__ */ jsx8(
554
+ /* @__PURE__ */ jsx4(
803
555
  Icon,
804
556
  {
805
557
  size: sizeStyles.iconSize - 2,
806
558
  color: inputColors.placeholder,
807
- children: /* @__PURE__ */ jsx8(SearchIcon, {})
559
+ children: /* @__PURE__ */ jsx4(SearchIcon, {})
808
560
  }
809
561
  ),
810
- /* @__PURE__ */ jsx8(
562
+ /* @__PURE__ */ jsx4(
811
563
  Box,
812
564
  {
813
565
  as: "input",
@@ -832,7 +584,7 @@ var Select = ({
832
584
  )
833
585
  }
834
586
  ),
835
- /* @__PURE__ */ jsx8(
587
+ /* @__PURE__ */ jsx4(
836
588
  Box,
837
589
  {
838
590
  paddingVertical: 4,
@@ -840,13 +592,13 @@ var Select = ({
840
592
  maxHeight: searchable ? maxHeight - 60 : maxHeight,
841
593
  overflowY: "auto"
842
594
  },
843
- children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx8(
595
+ children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx4(
844
596
  Box,
845
597
  {
846
598
  paddingVertical: sizeStyles.paddingVertical * 2,
847
599
  paddingHorizontal: sizeStyles.paddingHorizontal,
848
600
  alignItems: "center",
849
- children: /* @__PURE__ */ jsx8(
601
+ children: /* @__PURE__ */ jsx4(
850
602
  Text,
851
603
  {
852
604
  color: theme.colors.content.tertiary,
@@ -862,7 +614,7 @@ var Select = ({
862
614
  const isSelected = optionValue === selectedValue;
863
615
  const brandColors = theme.colors.control.brand.primary;
864
616
  const contentColors = theme.colors.content;
865
- return /* @__PURE__ */ jsx8(
617
+ return /* @__PURE__ */ jsx4(
866
618
  Box,
867
619
  {
868
620
  ref: isSelected ? selectedItemRef : void 0,
@@ -880,7 +632,7 @@ var Select = ({
880
632
  hoverStyle: !isSelected && !isOptionDisabled ? {
881
633
  backgroundColor: theme.colors.control.input.bgHover
882
634
  } : void 0,
883
- children: /* @__PURE__ */ jsx8(
635
+ children: /* @__PURE__ */ jsx4(
884
636
  Text,
885
637
  {
886
638
  color: isSelected ? contentColors.on.brand : theme.colors.content.secondary,
@@ -898,7 +650,7 @@ var Select = ({
898
650
  ]
899
651
  }
900
652
  ),
901
- isError && errorMessage && /* @__PURE__ */ jsx8(
653
+ isError && errorMessage && /* @__PURE__ */ jsx4(
902
654
  Text,
903
655
  {
904
656
  color: theme.colors.content.alert.primary,