@zohodesk/components 1.4.2 → 1.4.3

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.
@@ -266,12 +266,26 @@ exports[`Select - Should highlight the next list-items, when arrow keys pressed
266
266
  tabindex="0"
267
267
  >
268
268
  <div
269
- class="value basisAuto shrinkOn"
269
+ class="leftBox grow basis shrinkOff"
270
270
  data-id="boxComponent"
271
271
  data-selector-id="box"
272
272
  data-test-id="boxComponent"
273
273
  >
274
- Option 1
274
+ <div
275
+ class="titleBox shrinkOff"
276
+ data-id="boxComponent"
277
+ data-selector-id="box"
278
+ data-test-id="boxComponent"
279
+ >
280
+ <div
281
+ class="value basisAuto shrinkOn"
282
+ data-id="boxComponent"
283
+ data-selector-id="box"
284
+ data-test-id="boxComponent"
285
+ >
286
+ Option 1
287
+ </div>
288
+ </div>
275
289
  </div>
276
290
  <div
277
291
  aria-hidden="true"
@@ -305,12 +319,26 @@ exports[`Select - Should highlight the next list-items, when arrow keys pressed
305
319
  tabindex="0"
306
320
  >
307
321
  <div
308
- class="value basisAuto shrinkOn"
322
+ class="leftBox grow basis shrinkOff"
309
323
  data-id="boxComponent"
310
324
  data-selector-id="box"
311
325
  data-test-id="boxComponent"
312
326
  >
313
- Option 2
327
+ <div
328
+ class="titleBox shrinkOff"
329
+ data-id="boxComponent"
330
+ data-selector-id="box"
331
+ data-test-id="boxComponent"
332
+ >
333
+ <div
334
+ class="value basisAuto shrinkOn"
335
+ data-id="boxComponent"
336
+ data-selector-id="box"
337
+ data-test-id="boxComponent"
338
+ >
339
+ Option 2
340
+ </div>
341
+ </div>
314
342
  </div>
315
343
  </li>
316
344
  <li
@@ -328,12 +356,26 @@ exports[`Select - Should highlight the next list-items, when arrow keys pressed
328
356
  tabindex="0"
329
357
  >
330
358
  <div
331
- class="value basisAuto shrinkOn"
359
+ class="leftBox grow basis shrinkOff"
332
360
  data-id="boxComponent"
333
361
  data-selector-id="box"
334
362
  data-test-id="boxComponent"
335
363
  >
336
- Option 3
364
+ <div
365
+ class="titleBox shrinkOff"
366
+ data-id="boxComponent"
367
+ data-selector-id="box"
368
+ data-test-id="boxComponent"
369
+ >
370
+ <div
371
+ class="value basisAuto shrinkOn"
372
+ data-id="boxComponent"
373
+ data-selector-id="box"
374
+ data-test-id="boxComponent"
375
+ >
376
+ Option 3
377
+ </div>
378
+ </div>
337
379
  </div>
338
380
  </li>
339
381
  </div>
@@ -920,12 +962,26 @@ exports[`Select - Should render all the options when search value is cleared 1`]
920
962
  tabindex="0"
921
963
  >
922
964
  <div
923
- class="value basisAuto shrinkOn"
965
+ class="leftBox grow basis shrinkOff"
924
966
  data-id="boxComponent"
925
967
  data-selector-id="box"
926
968
  data-test-id="boxComponent"
927
969
  >
928
- Option 1
970
+ <div
971
+ class="titleBox shrinkOff"
972
+ data-id="boxComponent"
973
+ data-selector-id="box"
974
+ data-test-id="boxComponent"
975
+ >
976
+ <div
977
+ class="value basisAuto shrinkOn"
978
+ data-id="boxComponent"
979
+ data-selector-id="box"
980
+ data-test-id="boxComponent"
981
+ >
982
+ Option 1
983
+ </div>
984
+ </div>
929
985
  </div>
930
986
  <div
931
987
  aria-hidden="true"
@@ -959,12 +1015,26 @@ exports[`Select - Should render all the options when search value is cleared 1`]
959
1015
  tabindex="0"
960
1016
  >
961
1017
  <div
962
- class="value basisAuto shrinkOn"
1018
+ class="leftBox grow basis shrinkOff"
963
1019
  data-id="boxComponent"
964
1020
  data-selector-id="box"
965
1021
  data-test-id="boxComponent"
966
1022
  >
967
- Option 2
1023
+ <div
1024
+ class="titleBox shrinkOff"
1025
+ data-id="boxComponent"
1026
+ data-selector-id="box"
1027
+ data-test-id="boxComponent"
1028
+ >
1029
+ <div
1030
+ class="value basisAuto shrinkOn"
1031
+ data-id="boxComponent"
1032
+ data-selector-id="box"
1033
+ data-test-id="boxComponent"
1034
+ >
1035
+ Option 2
1036
+ </div>
1037
+ </div>
968
1038
  </div>
969
1039
  </li>
970
1040
  <li
@@ -982,12 +1052,26 @@ exports[`Select - Should render all the options when search value is cleared 1`]
982
1052
  tabindex="0"
983
1053
  >
984
1054
  <div
985
- class="value basisAuto shrinkOn"
1055
+ class="leftBox grow basis shrinkOff"
986
1056
  data-id="boxComponent"
987
1057
  data-selector-id="box"
988
1058
  data-test-id="boxComponent"
989
1059
  >
990
- Option 3
1060
+ <div
1061
+ class="titleBox shrinkOff"
1062
+ data-id="boxComponent"
1063
+ data-selector-id="box"
1064
+ data-test-id="boxComponent"
1065
+ >
1066
+ <div
1067
+ class="value basisAuto shrinkOn"
1068
+ data-id="boxComponent"
1069
+ data-selector-id="box"
1070
+ data-test-id="boxComponent"
1071
+ >
1072
+ Option 3
1073
+ </div>
1074
+ </div>
991
1075
  </div>
992
1076
  </li>
993
1077
  </div>
@@ -1170,12 +1254,26 @@ exports[`Select - Should render given the options 1`] = `
1170
1254
  tabindex="0"
1171
1255
  >
1172
1256
  <div
1173
- class="value basisAuto shrinkOn"
1257
+ class="leftBox grow basis shrinkOff"
1174
1258
  data-id="boxComponent"
1175
1259
  data-selector-id="box"
1176
1260
  data-test-id="boxComponent"
1177
1261
  >
1178
- Option 1
1262
+ <div
1263
+ class="titleBox shrinkOff"
1264
+ data-id="boxComponent"
1265
+ data-selector-id="box"
1266
+ data-test-id="boxComponent"
1267
+ >
1268
+ <div
1269
+ class="value basisAuto shrinkOn"
1270
+ data-id="boxComponent"
1271
+ data-selector-id="box"
1272
+ data-test-id="boxComponent"
1273
+ >
1274
+ Option 1
1275
+ </div>
1276
+ </div>
1179
1277
  </div>
1180
1278
  <div
1181
1279
  aria-hidden="true"
@@ -1209,12 +1307,26 @@ exports[`Select - Should render given the options 1`] = `
1209
1307
  tabindex="0"
1210
1308
  >
1211
1309
  <div
1212
- class="value basisAuto shrinkOn"
1310
+ class="leftBox grow basis shrinkOff"
1213
1311
  data-id="boxComponent"
1214
1312
  data-selector-id="box"
1215
1313
  data-test-id="boxComponent"
1216
1314
  >
1217
- Option 2
1315
+ <div
1316
+ class="titleBox shrinkOff"
1317
+ data-id="boxComponent"
1318
+ data-selector-id="box"
1319
+ data-test-id="boxComponent"
1320
+ >
1321
+ <div
1322
+ class="value basisAuto shrinkOn"
1323
+ data-id="boxComponent"
1324
+ data-selector-id="box"
1325
+ data-test-id="boxComponent"
1326
+ >
1327
+ Option 2
1328
+ </div>
1329
+ </div>
1218
1330
  </div>
1219
1331
  </li>
1220
1332
  <li
@@ -1232,12 +1344,26 @@ exports[`Select - Should render given the options 1`] = `
1232
1344
  tabindex="0"
1233
1345
  >
1234
1346
  <div
1235
- class="value basisAuto shrinkOn"
1347
+ class="leftBox grow basis shrinkOff"
1236
1348
  data-id="boxComponent"
1237
1349
  data-selector-id="box"
1238
1350
  data-test-id="boxComponent"
1239
1351
  >
1240
- Option 3
1352
+ <div
1353
+ class="titleBox shrinkOff"
1354
+ data-id="boxComponent"
1355
+ data-selector-id="box"
1356
+ data-test-id="boxComponent"
1357
+ >
1358
+ <div
1359
+ class="value basisAuto shrinkOn"
1360
+ data-id="boxComponent"
1361
+ data-selector-id="box"
1362
+ data-test-id="boxComponent"
1363
+ >
1364
+ Option 3
1365
+ </div>
1366
+ </div>
1241
1367
  </div>
1242
1368
  </li>
1243
1369
  </div>
@@ -1766,12 +1892,26 @@ exports[`Select - Should render the only options matching search value 1`] = `
1766
1892
  tabindex="0"
1767
1893
  >
1768
1894
  <div
1769
- class="value basisAuto shrinkOn"
1895
+ class="leftBox grow basis shrinkOff"
1770
1896
  data-id="boxComponent"
1771
1897
  data-selector-id="box"
1772
1898
  data-test-id="boxComponent"
1773
1899
  >
1774
- Option 2
1900
+ <div
1901
+ class="titleBox shrinkOff"
1902
+ data-id="boxComponent"
1903
+ data-selector-id="box"
1904
+ data-test-id="boxComponent"
1905
+ >
1906
+ <div
1907
+ class="value basisAuto shrinkOn"
1908
+ data-id="boxComponent"
1909
+ data-selector-id="box"
1910
+ data-test-id="boxComponent"
1911
+ >
1912
+ Option 2
1913
+ </div>
1914
+ </div>
1775
1915
  </div>
1776
1916
  </li>
1777
1917
  </div>
@@ -2411,12 +2551,26 @@ exports[`Select - Should trigger getNextOptions, when scroll to the end of the d
2411
2551
  tabindex="0"
2412
2552
  >
2413
2553
  <div
2414
- class="value basisAuto shrinkOn"
2554
+ class="leftBox grow basis shrinkOff"
2415
2555
  data-id="boxComponent"
2416
2556
  data-selector-id="box"
2417
2557
  data-test-id="boxComponent"
2418
2558
  >
2419
- Option 1
2559
+ <div
2560
+ class="titleBox shrinkOff"
2561
+ data-id="boxComponent"
2562
+ data-selector-id="box"
2563
+ data-test-id="boxComponent"
2564
+ >
2565
+ <div
2566
+ class="value basisAuto shrinkOn"
2567
+ data-id="boxComponent"
2568
+ data-selector-id="box"
2569
+ data-test-id="boxComponent"
2570
+ >
2571
+ Option 1
2572
+ </div>
2573
+ </div>
2420
2574
  </div>
2421
2575
  <div
2422
2576
  aria-hidden="true"
@@ -2450,12 +2604,26 @@ exports[`Select - Should trigger getNextOptions, when scroll to the end of the d
2450
2604
  tabindex="0"
2451
2605
  >
2452
2606
  <div
2453
- class="value basisAuto shrinkOn"
2607
+ class="leftBox grow basis shrinkOff"
2454
2608
  data-id="boxComponent"
2455
2609
  data-selector-id="box"
2456
2610
  data-test-id="boxComponent"
2457
2611
  >
2458
- Option 2
2612
+ <div
2613
+ class="titleBox shrinkOff"
2614
+ data-id="boxComponent"
2615
+ data-selector-id="box"
2616
+ data-test-id="boxComponent"
2617
+ >
2618
+ <div
2619
+ class="value basisAuto shrinkOn"
2620
+ data-id="boxComponent"
2621
+ data-selector-id="box"
2622
+ data-test-id="boxComponent"
2623
+ >
2624
+ Option 2
2625
+ </div>
2626
+ </div>
2459
2627
  </div>
2460
2628
  </li>
2461
2629
  <li
@@ -2473,12 +2641,26 @@ exports[`Select - Should trigger getNextOptions, when scroll to the end of the d
2473
2641
  tabindex="0"
2474
2642
  >
2475
2643
  <div
2476
- class="value basisAuto shrinkOn"
2644
+ class="leftBox grow basis shrinkOff"
2477
2645
  data-id="boxComponent"
2478
2646
  data-selector-id="box"
2479
2647
  data-test-id="boxComponent"
2480
2648
  >
2481
- Option 3
2649
+ <div
2650
+ class="titleBox shrinkOff"
2651
+ data-id="boxComponent"
2652
+ data-selector-id="box"
2653
+ data-test-id="boxComponent"
2654
+ >
2655
+ <div
2656
+ class="value basisAuto shrinkOn"
2657
+ data-id="boxComponent"
2658
+ data-selector-id="box"
2659
+ data-test-id="boxComponent"
2660
+ >
2661
+ Option 3
2662
+ </div>
2663
+ </div>
2482
2664
  </div>
2483
2665
  </li>
2484
2666
  <li
@@ -2496,12 +2678,26 @@ exports[`Select - Should trigger getNextOptions, when scroll to the end of the d
2496
2678
  tabindex="0"
2497
2679
  >
2498
2680
  <div
2499
- class="value basisAuto shrinkOn"
2681
+ class="leftBox grow basis shrinkOff"
2500
2682
  data-id="boxComponent"
2501
2683
  data-selector-id="box"
2502
2684
  data-test-id="boxComponent"
2503
2685
  >
2504
- Option 4
2686
+ <div
2687
+ class="titleBox shrinkOff"
2688
+ data-id="boxComponent"
2689
+ data-selector-id="box"
2690
+ data-test-id="boxComponent"
2691
+ >
2692
+ <div
2693
+ class="value basisAuto shrinkOn"
2694
+ data-id="boxComponent"
2695
+ data-selector-id="box"
2696
+ data-test-id="boxComponent"
2697
+ >
2698
+ Option 4
2699
+ </div>
2700
+ </div>
2505
2701
  </div>
2506
2702
  </li>
2507
2703
  <li
@@ -2519,12 +2715,26 @@ exports[`Select - Should trigger getNextOptions, when scroll to the end of the d
2519
2715
  tabindex="0"
2520
2716
  >
2521
2717
  <div
2522
- class="value basisAuto shrinkOn"
2718
+ class="leftBox grow basis shrinkOff"
2523
2719
  data-id="boxComponent"
2524
2720
  data-selector-id="box"
2525
2721
  data-test-id="boxComponent"
2526
2722
  >
2527
- Option 5
2723
+ <div
2724
+ class="titleBox shrinkOff"
2725
+ data-id="boxComponent"
2726
+ data-selector-id="box"
2727
+ data-test-id="boxComponent"
2728
+ >
2729
+ <div
2730
+ class="value basisAuto shrinkOn"
2731
+ data-id="boxComponent"
2732
+ data-selector-id="box"
2733
+ data-test-id="boxComponent"
2734
+ >
2735
+ Option 5
2736
+ </div>
2737
+ </div>
2528
2738
  </div>
2529
2739
  </li>
2530
2740
  <li
@@ -2542,12 +2752,26 @@ exports[`Select - Should trigger getNextOptions, when scroll to the end of the d
2542
2752
  tabindex="0"
2543
2753
  >
2544
2754
  <div
2545
- class="value basisAuto shrinkOn"
2755
+ class="leftBox grow basis shrinkOff"
2546
2756
  data-id="boxComponent"
2547
2757
  data-selector-id="box"
2548
2758
  data-test-id="boxComponent"
2549
2759
  >
2550
- Option 6
2760
+ <div
2761
+ class="titleBox shrinkOff"
2762
+ data-id="boxComponent"
2763
+ data-selector-id="box"
2764
+ data-test-id="boxComponent"
2765
+ >
2766
+ <div
2767
+ class="value basisAuto shrinkOn"
2768
+ data-id="boxComponent"
2769
+ data-selector-id="box"
2770
+ data-test-id="boxComponent"
2771
+ >
2772
+ Option 6
2773
+ </div>
2774
+ </div>
2551
2775
  </div>
2552
2776
  </li>
2553
2777
  <li
@@ -2565,12 +2789,26 @@ exports[`Select - Should trigger getNextOptions, when scroll to the end of the d
2565
2789
  tabindex="0"
2566
2790
  >
2567
2791
  <div
2568
- class="value basisAuto shrinkOn"
2792
+ class="leftBox grow basis shrinkOff"
2569
2793
  data-id="boxComponent"
2570
2794
  data-selector-id="box"
2571
2795
  data-test-id="boxComponent"
2572
2796
  >
2573
- Option 7
2797
+ <div
2798
+ class="titleBox shrinkOff"
2799
+ data-id="boxComponent"
2800
+ data-selector-id="box"
2801
+ data-test-id="boxComponent"
2802
+ >
2803
+ <div
2804
+ class="value basisAuto shrinkOn"
2805
+ data-id="boxComponent"
2806
+ data-selector-id="box"
2807
+ data-test-id="boxComponent"
2808
+ >
2809
+ Option 7
2810
+ </div>
2811
+ </div>
2574
2812
  </div>
2575
2813
  </li>
2576
2814
  <li
@@ -2588,12 +2826,26 @@ exports[`Select - Should trigger getNextOptions, when scroll to the end of the d
2588
2826
  tabindex="0"
2589
2827
  >
2590
2828
  <div
2591
- class="value basisAuto shrinkOn"
2829
+ class="leftBox grow basis shrinkOff"
2592
2830
  data-id="boxComponent"
2593
2831
  data-selector-id="box"
2594
2832
  data-test-id="boxComponent"
2595
2833
  >
2596
- Option 8
2834
+ <div
2835
+ class="titleBox shrinkOff"
2836
+ data-id="boxComponent"
2837
+ data-selector-id="box"
2838
+ data-test-id="boxComponent"
2839
+ >
2840
+ <div
2841
+ class="value basisAuto shrinkOn"
2842
+ data-id="boxComponent"
2843
+ data-selector-id="box"
2844
+ data-test-id="boxComponent"
2845
+ >
2846
+ Option 8
2847
+ </div>
2848
+ </div>
2597
2849
  </div>
2598
2850
  </li>
2599
2851
  <li
@@ -2611,12 +2863,26 @@ exports[`Select - Should trigger getNextOptions, when scroll to the end of the d
2611
2863
  tabindex="0"
2612
2864
  >
2613
2865
  <div
2614
- class="value basisAuto shrinkOn"
2866
+ class="leftBox grow basis shrinkOff"
2615
2867
  data-id="boxComponent"
2616
2868
  data-selector-id="box"
2617
2869
  data-test-id="boxComponent"
2618
2870
  >
2619
- Option 9
2871
+ <div
2872
+ class="titleBox shrinkOff"
2873
+ data-id="boxComponent"
2874
+ data-selector-id="box"
2875
+ data-test-id="boxComponent"
2876
+ >
2877
+ <div
2878
+ class="value basisAuto shrinkOn"
2879
+ data-id="boxComponent"
2880
+ data-selector-id="box"
2881
+ data-test-id="boxComponent"
2882
+ >
2883
+ Option 9
2884
+ </div>
2885
+ </div>
2620
2886
  </div>
2621
2887
  </li>
2622
2888
  <li
@@ -2634,12 +2900,26 @@ exports[`Select - Should trigger getNextOptions, when scroll to the end of the d
2634
2900
  tabindex="0"
2635
2901
  >
2636
2902
  <div
2637
- class="value basisAuto shrinkOn"
2903
+ class="leftBox grow basis shrinkOff"
2638
2904
  data-id="boxComponent"
2639
2905
  data-selector-id="box"
2640
2906
  data-test-id="boxComponent"
2641
2907
  >
2642
- Option 10
2908
+ <div
2909
+ class="titleBox shrinkOff"
2910
+ data-id="boxComponent"
2911
+ data-selector-id="box"
2912
+ data-test-id="boxComponent"
2913
+ >
2914
+ <div
2915
+ class="value basisAuto shrinkOn"
2916
+ data-id="boxComponent"
2917
+ data-selector-id="box"
2918
+ data-test-id="boxComponent"
2919
+ >
2920
+ Option 10
2921
+ </div>
2922
+ </div>
2643
2923
  </div>
2644
2924
  </li>
2645
2925
  </div>
@@ -2926,12 +3206,26 @@ exports[`Select - Should trigger getNextOptions, when search with needLocalSearc
2926
3206
  tabindex="0"
2927
3207
  >
2928
3208
  <div
2929
- class="value basisAuto shrinkOn"
3209
+ class="leftBox grow basis shrinkOff"
2930
3210
  data-id="boxComponent"
2931
3211
  data-selector-id="box"
2932
3212
  data-test-id="boxComponent"
2933
3213
  >
2934
- Option 1
3214
+ <div
3215
+ class="titleBox shrinkOff"
3216
+ data-id="boxComponent"
3217
+ data-selector-id="box"
3218
+ data-test-id="boxComponent"
3219
+ >
3220
+ <div
3221
+ class="value basisAuto shrinkOn"
3222
+ data-id="boxComponent"
3223
+ data-selector-id="box"
3224
+ data-test-id="boxComponent"
3225
+ >
3226
+ Option 1
3227
+ </div>
3228
+ </div>
2935
3229
  </div>
2936
3230
  <div
2937
3231
  aria-hidden="true"
@@ -2965,12 +3259,26 @@ exports[`Select - Should trigger getNextOptions, when search with needLocalSearc
2965
3259
  tabindex="0"
2966
3260
  >
2967
3261
  <div
2968
- class="value basisAuto shrinkOn"
3262
+ class="leftBox grow basis shrinkOff"
2969
3263
  data-id="boxComponent"
2970
3264
  data-selector-id="box"
2971
3265
  data-test-id="boxComponent"
2972
3266
  >
2973
- Option 2
3267
+ <div
3268
+ class="titleBox shrinkOff"
3269
+ data-id="boxComponent"
3270
+ data-selector-id="box"
3271
+ data-test-id="boxComponent"
3272
+ >
3273
+ <div
3274
+ class="value basisAuto shrinkOn"
3275
+ data-id="boxComponent"
3276
+ data-selector-id="box"
3277
+ data-test-id="boxComponent"
3278
+ >
3279
+ Option 2
3280
+ </div>
3281
+ </div>
2974
3282
  </div>
2975
3283
  </li>
2976
3284
  <li
@@ -2988,12 +3296,26 @@ exports[`Select - Should trigger getNextOptions, when search with needLocalSearc
2988
3296
  tabindex="0"
2989
3297
  >
2990
3298
  <div
2991
- class="value basisAuto shrinkOn"
3299
+ class="leftBox grow basis shrinkOff"
2992
3300
  data-id="boxComponent"
2993
3301
  data-selector-id="box"
2994
3302
  data-test-id="boxComponent"
2995
3303
  >
2996
- Option 3
3304
+ <div
3305
+ class="titleBox shrinkOff"
3306
+ data-id="boxComponent"
3307
+ data-selector-id="box"
3308
+ data-test-id="boxComponent"
3309
+ >
3310
+ <div
3311
+ class="value basisAuto shrinkOn"
3312
+ data-id="boxComponent"
3313
+ data-selector-id="box"
3314
+ data-test-id="boxComponent"
3315
+ >
3316
+ Option 3
3317
+ </div>
3318
+ </div>
2997
3319
  </div>
2998
3320
  </li>
2999
3321
  </div>
@@ -3430,12 +3752,26 @@ exports[`Select - Should update the value when select the option 1`] = `
3430
3752
  tabindex="0"
3431
3753
  >
3432
3754
  <div
3433
- class="value basisAuto shrinkOn"
3755
+ class="leftBox grow basis shrinkOff"
3434
3756
  data-id="boxComponent"
3435
3757
  data-selector-id="box"
3436
3758
  data-test-id="boxComponent"
3437
3759
  >
3438
- Option 1
3760
+ <div
3761
+ class="titleBox shrinkOff"
3762
+ data-id="boxComponent"
3763
+ data-selector-id="box"
3764
+ data-test-id="boxComponent"
3765
+ >
3766
+ <div
3767
+ class="value basisAuto shrinkOn"
3768
+ data-id="boxComponent"
3769
+ data-selector-id="box"
3770
+ data-test-id="boxComponent"
3771
+ >
3772
+ Option 1
3773
+ </div>
3774
+ </div>
3439
3775
  </div>
3440
3776
  <div
3441
3777
  aria-hidden="true"
@@ -3469,12 +3805,26 @@ exports[`Select - Should update the value when select the option 1`] = `
3469
3805
  tabindex="0"
3470
3806
  >
3471
3807
  <div
3472
- class="value basisAuto shrinkOn"
3808
+ class="leftBox grow basis shrinkOff"
3473
3809
  data-id="boxComponent"
3474
3810
  data-selector-id="box"
3475
3811
  data-test-id="boxComponent"
3476
3812
  >
3477
- Option 2
3813
+ <div
3814
+ class="titleBox shrinkOff"
3815
+ data-id="boxComponent"
3816
+ data-selector-id="box"
3817
+ data-test-id="boxComponent"
3818
+ >
3819
+ <div
3820
+ class="value basisAuto shrinkOn"
3821
+ data-id="boxComponent"
3822
+ data-selector-id="box"
3823
+ data-test-id="boxComponent"
3824
+ >
3825
+ Option 2
3826
+ </div>
3827
+ </div>
3478
3828
  </div>
3479
3829
  </li>
3480
3830
  <li
@@ -3492,12 +3842,26 @@ exports[`Select - Should update the value when select the option 1`] = `
3492
3842
  tabindex="0"
3493
3843
  >
3494
3844
  <div
3495
- class="value basisAuto shrinkOn"
3845
+ class="leftBox grow basis shrinkOff"
3496
3846
  data-id="boxComponent"
3497
3847
  data-selector-id="box"
3498
3848
  data-test-id="boxComponent"
3499
3849
  >
3500
- Option 3
3850
+ <div
3851
+ class="titleBox shrinkOff"
3852
+ data-id="boxComponent"
3853
+ data-selector-id="box"
3854
+ data-test-id="boxComponent"
3855
+ >
3856
+ <div
3857
+ class="value basisAuto shrinkOn"
3858
+ data-id="boxComponent"
3859
+ data-selector-id="box"
3860
+ data-test-id="boxComponent"
3861
+ >
3862
+ Option 3
3863
+ </div>
3864
+ </div>
3501
3865
  </div>
3502
3866
  </li>
3503
3867
  </div>
@@ -6783,12 +7147,26 @@ exports[`Select dataId snapshot - Should render with dataId prop - dropbox open
6783
7147
  tabindex="0"
6784
7148
  >
6785
7149
  <div
6786
- class="value basisAuto shrinkOn"
7150
+ class="leftBox grow basis shrinkOff"
6787
7151
  data-id="boxComponent"
6788
7152
  data-selector-id="box"
6789
7153
  data-test-id="boxComponent"
6790
7154
  >
6791
- Option 1
7155
+ <div
7156
+ class="titleBox shrinkOff"
7157
+ data-id="boxComponent"
7158
+ data-selector-id="box"
7159
+ data-test-id="boxComponent"
7160
+ >
7161
+ <div
7162
+ class="value basisAuto shrinkOn"
7163
+ data-id="boxComponent"
7164
+ data-selector-id="box"
7165
+ data-test-id="boxComponent"
7166
+ >
7167
+ Option 1
7168
+ </div>
7169
+ </div>
6792
7170
  </div>
6793
7171
  <div
6794
7172
  aria-hidden="true"
@@ -6822,12 +7200,26 @@ exports[`Select dataId snapshot - Should render with dataId prop - dropbox open
6822
7200
  tabindex="0"
6823
7201
  >
6824
7202
  <div
6825
- class="value basisAuto shrinkOn"
7203
+ class="leftBox grow basis shrinkOff"
6826
7204
  data-id="boxComponent"
6827
7205
  data-selector-id="box"
6828
7206
  data-test-id="boxComponent"
6829
7207
  >
6830
- Option 2
7208
+ <div
7209
+ class="titleBox shrinkOff"
7210
+ data-id="boxComponent"
7211
+ data-selector-id="box"
7212
+ data-test-id="boxComponent"
7213
+ >
7214
+ <div
7215
+ class="value basisAuto shrinkOn"
7216
+ data-id="boxComponent"
7217
+ data-selector-id="box"
7218
+ data-test-id="boxComponent"
7219
+ >
7220
+ Option 2
7221
+ </div>
7222
+ </div>
6831
7223
  </div>
6832
7224
  </li>
6833
7225
  <li
@@ -6845,12 +7237,26 @@ exports[`Select dataId snapshot - Should render with dataId prop - dropbox open
6845
7237
  tabindex="0"
6846
7238
  >
6847
7239
  <div
6848
- class="value basisAuto shrinkOn"
7240
+ class="leftBox grow basis shrinkOff"
6849
7241
  data-id="boxComponent"
6850
7242
  data-selector-id="box"
6851
7243
  data-test-id="boxComponent"
6852
7244
  >
6853
- Option 3
7245
+ <div
7246
+ class="titleBox shrinkOff"
7247
+ data-id="boxComponent"
7248
+ data-selector-id="box"
7249
+ data-test-id="boxComponent"
7250
+ >
7251
+ <div
7252
+ class="value basisAuto shrinkOn"
7253
+ data-id="boxComponent"
7254
+ data-selector-id="box"
7255
+ data-test-id="boxComponent"
7256
+ >
7257
+ Option 3
7258
+ </div>
7259
+ </div>
6854
7260
  </div>
6855
7261
  </li>
6856
7262
  </div>
@@ -7738,12 +8144,26 @@ exports[`Select snapshot - Should render with customProps 1`] = `
7738
8144
  tabindex="0"
7739
8145
  >
7740
8146
  <div
7741
- class="value basisAuto shrinkOn"
8147
+ class="leftBox grow basis shrinkOff"
7742
8148
  data-id="boxComponent"
7743
8149
  data-selector-id="box"
7744
8150
  data-test-id="boxComponent"
7745
8151
  >
7746
- Option 1
8152
+ <div
8153
+ class="titleBox shrinkOff"
8154
+ data-id="boxComponent"
8155
+ data-selector-id="box"
8156
+ data-test-id="boxComponent"
8157
+ >
8158
+ <div
8159
+ class="value basisAuto shrinkOn"
8160
+ data-id="boxComponent"
8161
+ data-selector-id="box"
8162
+ data-test-id="boxComponent"
8163
+ >
8164
+ Option 1
8165
+ </div>
8166
+ </div>
7747
8167
  </div>
7748
8168
  <div
7749
8169
  aria-hidden="true"
@@ -7778,12 +8198,26 @@ exports[`Select snapshot - Should render with customProps 1`] = `
7778
8198
  tabindex="0"
7779
8199
  >
7780
8200
  <div
7781
- class="value basisAuto shrinkOn"
8201
+ class="leftBox grow basis shrinkOff"
7782
8202
  data-id="boxComponent"
7783
8203
  data-selector-id="box"
7784
8204
  data-test-id="boxComponent"
7785
8205
  >
7786
- Option 2
8206
+ <div
8207
+ class="titleBox shrinkOff"
8208
+ data-id="boxComponent"
8209
+ data-selector-id="box"
8210
+ data-test-id="boxComponent"
8211
+ >
8212
+ <div
8213
+ class="value basisAuto shrinkOn"
8214
+ data-id="boxComponent"
8215
+ data-selector-id="box"
8216
+ data-test-id="boxComponent"
8217
+ >
8218
+ Option 2
8219
+ </div>
8220
+ </div>
7787
8221
  </div>
7788
8222
  </li>
7789
8223
  <li
@@ -7802,12 +8236,26 @@ exports[`Select snapshot - Should render with customProps 1`] = `
7802
8236
  tabindex="0"
7803
8237
  >
7804
8238
  <div
7805
- class="value basisAuto shrinkOn"
8239
+ class="leftBox grow basis shrinkOff"
7806
8240
  data-id="boxComponent"
7807
8241
  data-selector-id="box"
7808
8242
  data-test-id="boxComponent"
7809
8243
  >
7810
- Option 3
8244
+ <div
8245
+ class="titleBox shrinkOff"
8246
+ data-id="boxComponent"
8247
+ data-selector-id="box"
8248
+ data-test-id="boxComponent"
8249
+ >
8250
+ <div
8251
+ class="value basisAuto shrinkOn"
8252
+ data-id="boxComponent"
8253
+ data-selector-id="box"
8254
+ data-test-id="boxComponent"
8255
+ >
8256
+ Option 3
8257
+ </div>
8258
+ </div>
7811
8259
  </div>
7812
8260
  </li>
7813
8261
  </div>