@zohodesk/components 1.0.0-temp-248.1 → 1.0.0-temp-199.21

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.
Files changed (81) hide show
  1. package/README.md +6 -8
  2. package/assets/Appearance/dark/mode/Component_DarkMode.module.css +2 -0
  3. package/assets/Appearance/light/mode/Component_LightMode.module.css +2 -0
  4. package/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css +2 -0
  5. package/es/ColorSelect/__tests__/__snapshots__/ColorMultiSelect.spec.js.snap +5 -5
  6. package/es/ColorSelect/__tests__/__snapshots__/ColorSingleSelect.spec.js.snap +6 -6
  7. package/es/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap +3 -3
  8. package/es/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap +1 -1
  9. package/es/DateTime/__tests__/__snapshots__/Time.spec.js.snap +3 -3
  10. package/es/ListItem/ListItem.module.css +30 -20
  11. package/es/ListItem/ListItemWithAvatar.js +4 -2
  12. package/es/ListItem/ListItemWithCheckBox.js +4 -2
  13. package/es/ListItem/ListItemWithIcon.js +4 -2
  14. package/es/ListItem/ListItemWithRadio.js +4 -2
  15. package/es/ListItem/props/propTypes.js +3 -3
  16. package/es/Modal/Portal/Portal.js +11 -10
  17. package/es/MultiSelect/AdvancedGroupMultiSelect.js +6 -2
  18. package/es/MultiSelect/MultiSelect.js +2 -2
  19. package/es/MultiSelect/Suggestions.js +7 -2
  20. package/es/MultiSelect/__tests__/__snapshots__/AdvancedGroupMultiSelect.spec.js.snap +1 -1
  21. package/es/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap +3 -3
  22. package/es/MultiSelect/__tests__/__snapshots__/MultiSelect.spec.js.snap +3 -3
  23. package/es/MultiSelect/__tests__/__snapshots__/MultiSelectWithAvatar.spec.js.snap +1 -1
  24. package/es/MultiSelect/props/defaultProps.js +2 -0
  25. package/es/MultiSelect/props/propTypes.js +11 -3
  26. package/es/Select/GroupSelect.js +1 -1
  27. package/es/Select/Select.js +3 -5
  28. package/es/Select/SelectWithAvatar.js +3 -3
  29. package/es/Select/SelectWithIcon.js +10 -3
  30. package/es/Select/__tests__/Select.spec.js +0 -5
  31. package/es/Select/__tests__/__snapshots__/GroupSelect.spec.js.snap +1 -1
  32. package/es/Select/__tests__/__snapshots__/Select.spec.js.snap +75 -75
  33. package/es/Select/__tests__/__snapshots__/SelectWithIcon.spec.js.snap +1 -1
  34. package/es/Select/props/defaultProps.js +4 -2
  35. package/es/Select/props/propTypes.js +12 -5
  36. package/es/TextBoxIcon/TextBoxIcon.js +1 -0
  37. package/es/TextBoxIcon/__tests__/__snapshots__/TextBoxIcon.spec.js.snap +39 -39
  38. package/es/common/common.module.css +1 -1
  39. package/es/shared/InputFieldLine/InputFieldLine.js +1 -2
  40. package/es/shared/InputFieldLine/InputFieldLine.module.css +7 -13
  41. package/es/shared/InputFieldLine/__tests__/__snapshots__/InputFieldLine.spec.js.snap +19 -19
  42. package/es/shared/InputFieldLine/props/defaultProps.js +1 -0
  43. package/lib/ColorSelect/__tests__/__snapshots__/ColorMultiSelect.spec.js.snap +5 -5
  44. package/lib/ColorSelect/__tests__/__snapshots__/ColorSingleSelect.spec.js.snap +6 -6
  45. package/lib/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap +3 -3
  46. package/lib/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap +1 -1
  47. package/lib/DateTime/__tests__/__snapshots__/Time.spec.js.snap +3 -3
  48. package/lib/ListItem/ListItem.module.css +30 -20
  49. package/lib/ListItem/ListItemWithAvatar.js +5 -3
  50. package/lib/ListItem/ListItemWithCheckBox.js +4 -2
  51. package/lib/ListItem/ListItemWithIcon.js +5 -3
  52. package/lib/ListItem/ListItemWithRadio.js +4 -2
  53. package/lib/ListItem/props/propTypes.js +3 -3
  54. package/lib/Modal/Portal/Portal.js +17 -10
  55. package/lib/MultiSelect/AdvancedGroupMultiSelect.js +8 -3
  56. package/lib/MultiSelect/MultiSelect.js +2 -2
  57. package/lib/MultiSelect/Suggestions.js +6 -2
  58. package/lib/MultiSelect/__tests__/__snapshots__/AdvancedGroupMultiSelect.spec.js.snap +1 -1
  59. package/lib/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap +3 -3
  60. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelect.spec.js.snap +3 -3
  61. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelectWithAvatar.spec.js.snap +1 -1
  62. package/lib/MultiSelect/props/defaultProps.js +2 -0
  63. package/lib/MultiSelect/props/propTypes.js +13 -5
  64. package/lib/Select/GroupSelect.js +2 -1
  65. package/lib/Select/Select.js +5 -8
  66. package/lib/Select/SelectWithAvatar.js +4 -3
  67. package/lib/Select/SelectWithIcon.js +10 -3
  68. package/lib/Select/__tests__/Select.spec.js +0 -5
  69. package/lib/Select/__tests__/__snapshots__/GroupSelect.spec.js.snap +1 -1
  70. package/lib/Select/__tests__/__snapshots__/Select.spec.js.snap +75 -75
  71. package/lib/Select/__tests__/__snapshots__/SelectWithIcon.spec.js.snap +1 -1
  72. package/lib/Select/props/defaultProps.js +5 -3
  73. package/lib/Select/props/propTypes.js +12 -5
  74. package/lib/TextBoxIcon/TextBoxIcon.js +1 -0
  75. package/lib/TextBoxIcon/__tests__/__snapshots__/TextBoxIcon.spec.js.snap +39 -39
  76. package/lib/common/common.module.css +1 -1
  77. package/lib/shared/InputFieldLine/InputFieldLine.js +1 -2
  78. package/lib/shared/InputFieldLine/InputFieldLine.module.css +7 -13
  79. package/lib/shared/InputFieldLine/__tests__/__snapshots__/InputFieldLine.spec.js.snap +19 -19
  80. package/lib/shared/InputFieldLine/props/defaultProps.js +1 -0
  81. package/package.json +7 -5
package/lib/Select/__tests__/__snapshots__/Select.spec.js.snap CHANGED
@@ -12,7 +12,7 @@ exports[`Select - Should close the dropdown when clicking outside 1`] = `
12
12
  data-test-id="selectComponent"
13
13
  >
14
14
  <div
15
- class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
15
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
16
16
  data-selector-id="textBoxIcon"
17
17
  >
18
18
  <div
@@ -105,7 +105,7 @@ exports[`Select - Should highlight the next list-items, when arrow keys pressed
105
105
  data-test-id="selectComponent"
106
106
  >
107
107
  <div
108
- class="varClass customContainer border_bottom effect borderColor_default hasBorder active container input flex rowdir"
108
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder active container input flex rowdir"
109
109
  data-selector-id="textBoxIcon"
110
110
  >
111
111
  <div
@@ -392,7 +392,7 @@ exports[`Select - Should not open the dropdown when disabled 1`] = `
392
392
  data-test-id="selectComponent_disabled"
393
393
  >
394
394
  <div
395
- class="varClass customContainer border_bottom disabled borderColor_default hasBorder container flex rowdir"
395
+ class="varClass customContainer border_bottom disabled borderColor_default hasBorder container flex rowdir"
396
396
  data-selector-id="textBoxIcon"
397
397
  data-title=""
398
398
  >
@@ -487,7 +487,7 @@ exports[`Select - Should not open the dropdown when readonly 1`] = `
487
487
  data-test-id="selectComponent_readOnly"
488
488
  >
489
489
  <div
490
- class="varClass customContainer border_bottom readonly borderColor_default hasBorder container flex rowdir"
490
+ class="varClass customContainer border_bottom readonly borderColor_default hasBorder container flex rowdir"
491
491
  data-selector-id="textBoxIcon"
492
492
  >
493
493
  <div
@@ -580,7 +580,7 @@ exports[`Select - Should open the dropdown, when click on the input 1`] = `
580
580
  data-test-id="selectComponent"
581
581
  >
582
582
  <div
583
- class="varClass customContainer border_bottom effect borderColor_default hasBorder active container input flex rowdir"
583
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder active container input flex rowdir"
584
584
  data-selector-id="textBoxIcon"
585
585
  >
586
586
  <div
@@ -727,7 +727,7 @@ exports[`Select - Should render all the options when search value is cleared 1`]
727
727
  data-test-id="selectComponent"
728
728
  >
729
729
  <div
730
- class="varClass customContainer border_bottom effect borderColor_default hasBorder active container input flex rowdir"
730
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder active container input flex rowdir"
731
731
  data-selector-id="textBoxIcon"
732
732
  >
733
733
  <div
@@ -851,7 +851,7 @@ exports[`Select - Should render all the options when search value is cleared 1`]
851
851
  class="search medium"
852
852
  >
853
853
  <div
854
- class="varClass customContainer border_bottom effect borderColor_default hasBorder active container flex rowdir"
854
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder active container flex rowdir"
855
855
  data-selector-id="textBoxIcon"
856
856
  >
857
857
  <div
@@ -1064,7 +1064,7 @@ exports[`Select - Should render given the options 1`] = `
1064
1064
  data-test-id="selectComponent"
1065
1065
  >
1066
1066
  <div
1067
- class="varClass customContainer border_bottom effect borderColor_default hasBorder active container input flex rowdir"
1067
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder active container input flex rowdir"
1068
1068
  data-selector-id="textBoxIcon"
1069
1069
  >
1070
1070
  <div
@@ -1351,7 +1351,7 @@ exports[`Select - Should render the Select component 1`] = `
1351
1351
  data-test-id="selectComponent"
1352
1352
  >
1353
1353
  <div
1354
- class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
1354
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
1355
1355
  data-selector-id="textBoxIcon"
1356
1356
  >
1357
1357
  <div
@@ -1442,7 +1442,7 @@ exports[`Select - Should render the default selected value 1`] = `
1442
1442
  data-test-id="selectComponent"
1443
1443
  >
1444
1444
  <div
1445
- class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
1445
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
1446
1446
  data-selector-id="textBoxIcon"
1447
1447
  >
1448
1448
  <div
@@ -1535,7 +1535,7 @@ exports[`Select - Should render the given selected value 1`] = `
1535
1535
  data-test-id="selectComponent"
1536
1536
  >
1537
1537
  <div
1538
- class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
1538
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
1539
1539
  data-selector-id="textBoxIcon"
1540
1540
  >
1541
1541
  <div
@@ -1628,7 +1628,7 @@ exports[`Select - Should render the only options matching search value 1`] = `
1628
1628
  data-test-id="selectComponent"
1629
1629
  >
1630
1630
  <div
1631
- class="varClass customContainer border_bottom effect borderColor_default hasBorder active container input flex rowdir"
1631
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder active container input flex rowdir"
1632
1632
  data-selector-id="textBoxIcon"
1633
1633
  >
1634
1634
  <div
@@ -1752,7 +1752,7 @@ exports[`Select - Should render the only options matching search value 1`] = `
1752
1752
  class="search medium"
1753
1753
  >
1754
1754
  <div
1755
- class="varClass customContainer border_bottom effect borderColor_default hasBorder active container flex rowdir"
1755
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder active container flex rowdir"
1756
1756
  data-selector-id="textBoxIcon"
1757
1757
  >
1758
1758
  <div
@@ -1874,7 +1874,7 @@ exports[`Select - Should render the only options matching search value even with
1874
1874
  data-test-id="selectComponent"
1875
1875
  >
1876
1876
  <div
1877
- class="varClass customContainer border_bottom effect borderColor_default hasBorder active container input flex rowdir"
1877
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder active container input flex rowdir"
1878
1878
  data-selector-id="textBoxIcon"
1879
1879
  >
1880
1880
  <div
@@ -1998,7 +1998,7 @@ exports[`Select - Should render the only options matching search value even with
1998
1998
  class="search medium"
1999
1999
  >
2000
2000
  <div
2001
- class="varClass customContainer border_bottom effect borderColor_default hasBorder active container flex rowdir"
2001
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder active container flex rowdir"
2002
2002
  data-selector-id="textBoxIcon"
2003
2003
  >
2004
2004
  <div
@@ -2145,7 +2145,7 @@ exports[`Select - Should render the placeholder when there is no default value 1
2145
2145
  data-test-id="selectComponent"
2146
2146
  >
2147
2147
  <div
2148
- class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
2148
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
2149
2149
  data-selector-id="textBoxIcon"
2150
2150
  >
2151
2151
  <div
@@ -2238,7 +2238,7 @@ exports[`Select - Should show the custom empty state using getCustomEmptyState p
2238
2238
  data-test-id="selectComponent"
2239
2239
  >
2240
2240
  <div
2241
- class="varClass customContainer border_bottom effect borderColor_default hasBorder active container input flex rowdir"
2241
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder active container input flex rowdir"
2242
2242
  data-selector-id="textBoxIcon"
2243
2243
  >
2244
2244
  <div
@@ -2362,7 +2362,7 @@ exports[`Select - Should show the custom empty state using getCustomEmptyState p
2362
2362
  class="search medium"
2363
2363
  >
2364
2364
  <div
2365
- class="varClass customContainer border_bottom effect borderColor_default hasBorder active container flex rowdir"
2365
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder active container flex rowdir"
2366
2366
  data-selector-id="textBoxIcon"
2367
2367
  >
2368
2368
  <div
@@ -2433,7 +2433,7 @@ exports[`Select - Should show the empty message when open the dropdown with no o
2433
2433
  data-test-id="selectComponent"
2434
2434
  >
2435
2435
  <div
2436
- class="varClass customContainer border_bottom effect borderColor_default hasBorder active container input flex rowdir"
2436
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder active container input flex rowdir"
2437
2437
  data-selector-id="textBoxIcon"
2438
2438
  >
2439
2439
  <div
@@ -2582,7 +2582,7 @@ exports[`Select - Should trigger getNextOptions, when scroll to the end of the d
2582
2582
  data-test-id="selectComponent"
2583
2583
  >
2584
2584
  <div
2585
- class="varClass customContainer border_bottom effect borderColor_default hasBorder active container input flex rowdir"
2585
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder active container input flex rowdir"
2586
2586
  data-selector-id="textBoxIcon"
2587
2587
  >
2588
2588
  <div
@@ -3177,7 +3177,7 @@ exports[`Select - Should trigger getNextOptions, when search with needLocalSearc
3177
3177
  data-test-id="selectComponent"
3178
3178
  >
3179
3179
  <div
3180
- class="varClass customContainer border_bottom effect borderColor_default hasBorder active container input flex rowdir"
3180
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder active container input flex rowdir"
3181
3181
  data-selector-id="textBoxIcon"
3182
3182
  >
3183
3183
  <div
@@ -3301,7 +3301,7 @@ exports[`Select - Should trigger getNextOptions, when search with needLocalSearc
3301
3301
  class="search medium"
3302
3302
  >
3303
3303
  <div
3304
- class="varClass customContainer border_bottom effect borderColor_default hasBorder active container flex rowdir"
3304
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder active container flex rowdir"
3305
3305
  data-selector-id="textBoxIcon"
3306
3306
  >
3307
3307
  <div
@@ -3563,7 +3563,7 @@ exports[`Select - Should trigger onAddNewOption, when click on the custom search
3563
3563
  data-test-id="selectComponent"
3564
3564
  >
3565
3565
  <div
3566
- class="varClass customContainer border_bottom effect borderColor_default hasBorder active container input flex rowdir"
3566
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder active container input flex rowdir"
3567
3567
  data-selector-id="textBoxIcon"
3568
3568
  >
3569
3569
  <div
@@ -3687,7 +3687,7 @@ exports[`Select - Should trigger onAddNewOption, when click on the custom search
3687
3687
  class="search medium"
3688
3688
  >
3689
3689
  <div
3690
- class="varClass customContainer border_bottom effect borderColor_default hasBorder active container flex rowdir"
3690
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder active container flex rowdir"
3691
3691
  data-selector-id="textBoxIcon"
3692
3692
  >
3693
3693
  <div
@@ -3758,7 +3758,7 @@ exports[`Select - Should update the value when select the option 1`] = `
3758
3758
  data-test-id="selectComponent"
3759
3759
  >
3760
3760
  <div
3761
- class="varClass customContainer border_bottom effect borderColor_default hasBorder active container input flex rowdir"
3761
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder active container input flex rowdir"
3762
3762
  data-selector-id="textBoxIcon"
3763
3763
  >
3764
3764
  <div
@@ -4045,7 +4045,7 @@ exports[`Select - Should update the value when select the option 2`] = `
4045
4045
  data-test-id="selectComponent"
4046
4046
  >
4047
4047
  <div
4048
- class="varClass customContainer border_bottom effect borderColor_default hasBorder active container input flex rowdir"
4048
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder active container input flex rowdir"
4049
4049
  data-selector-id="textBoxIcon"
4050
4050
  >
4051
4051
  <div
@@ -4138,7 +4138,7 @@ exports[`Select - Should update the value, when select the option using keyboard
4138
4138
  data-test-id="selectComponent"
4139
4139
  >
4140
4140
  <div
4141
- class="varClass customContainer border_bottom effect borderColor_default hasBorder active container input flex rowdir"
4141
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder active container input flex rowdir"
4142
4142
  data-selector-id="textBoxIcon"
4143
4143
  >
4144
4144
  <div
@@ -4268,7 +4268,7 @@ exports[`Select box needSelectDownIcon snapshot - Should render with aria prope
4268
4268
  data-test-id="selectComponent"
4269
4269
  >
4270
4270
  <div
4271
- class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
4271
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
4272
4272
  data-selector-id="textBoxIcon"
4273
4273
  >
4274
4274
  <div
@@ -4395,7 +4395,7 @@ exports[`Select box needSelectDownIcon snapshot - Should render with autoComple
4395
4395
  data-test-id="selectComponent"
4396
4396
  >
4397
4397
  <div
4398
- class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
4398
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
4399
4399
  data-selector-id="textBoxIcon"
4400
4400
  >
4401
4401
  <div
@@ -4519,7 +4519,7 @@ exports[`Select box needSelectDownIcon snapshot - Should render with borderColo
4519
4519
  data-test-id="selectComponent"
4520
4520
  >
4521
4521
  <div
4522
- class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
4522
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
4523
4523
  data-selector-id="textBoxIcon"
4524
4524
  >
4525
4525
  <div
@@ -4644,7 +4644,7 @@ exports[`Select box needSelectDownIcon snapshot - Should render with borderColo
4644
4644
  data-test-id="selectComponent"
4645
4645
  >
4646
4646
  <div
4647
- class="varClass customContainer border_bottom effect borderColor_transparent hasBorder container input flex rowdir"
4647
+ class="varClass customContainer border_bottom effect borderColor_transparent hasBorder container input flex rowdir"
4648
4648
  data-selector-id="textBoxIcon"
4649
4649
  >
4650
4650
  <div
@@ -4770,7 +4770,7 @@ exports[`Select box needSelectDownIcon snapshot - Should render with customProp
4770
4770
  data-test-id="selectComponent"
4771
4771
  >
4772
4772
  <div
4773
- class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
4773
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
4774
4774
  data-selector-id="textBoxIcon"
4775
4775
  >
4776
4776
  <div
@@ -4897,7 +4897,7 @@ exports[`Select box needSelectDownIcon snapshot - Should render with htmlId - n
4897
4897
  data-test-id="selectComponent"
4898
4898
  >
4899
4899
  <div
4900
- class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
4900
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
4901
4901
  data-selector-id="textBoxIcon"
4902
4902
  >
4903
4903
  <div
@@ -5024,7 +5024,7 @@ exports[`Select box needSelectDownIcon snapshot - Should render with isDisabled
5024
5024
  data-test-id="selectComponent_disabled"
5025
5025
  >
5026
5026
  <div
5027
- class="varClass customContainer border_bottom disabled borderColor_default hasBorder container flex rowdir"
5027
+ class="varClass customContainer border_bottom disabled borderColor_default hasBorder container flex rowdir"
5028
5028
  data-selector-id="textBoxIcon"
5029
5029
  data-title=""
5030
5030
  >
@@ -5207,7 +5207,7 @@ exports[`Select box needSelectDownIcon snapshot - Should render with isPopupOpe
5207
5207
  data-test-id="selectComponent"
5208
5208
  >
5209
5209
  <div
5210
- class="varClass customContainer border_bottom effect borderColor_default hasBorder active container input flex rowdir"
5210
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder active container input flex rowdir"
5211
5211
  data-selector-id="textBoxIcon"
5212
5212
  >
5213
5213
  <div
@@ -5388,7 +5388,7 @@ exports[`Select box needSelectDownIcon snapshot - Should render with isReadOnly
5388
5388
  data-test-id="selectComponent_readOnly"
5389
5389
  >
5390
5390
  <div
5391
- class="varClass customContainer border_bottom readonly borderColor_default hasBorder container flex rowdir"
5391
+ class="varClass customContainer border_bottom readonly borderColor_default hasBorder container flex rowdir"
5392
5392
  data-selector-id="textBoxIcon"
5393
5393
  >
5394
5394
  <div
@@ -5514,7 +5514,7 @@ exports[`Select box needSelectDownIcon snapshot - Should render with maxLength
5514
5514
  data-test-id="selectComponent"
5515
5515
  >
5516
5516
  <div
5517
- class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
5517
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
5518
5518
  data-selector-id="textBoxIcon"
5519
5519
  >
5520
5520
  <div
@@ -5639,7 +5639,7 @@ exports[`Select box needSelectDownIcon snapshot - Should render with needBorder
5639
5639
  data-test-id="selectComponent"
5640
5640
  >
5641
5641
  <div
5642
- class="varClass customContainer effect container input flex rowdir"
5642
+ class="varClass customContainer effect container input flex rowdir"
5643
5643
  data-selector-id="textBoxIcon"
5644
5644
  >
5645
5645
  <div
@@ -5764,7 +5764,7 @@ exports[`Select box needSelectDownIcon snapshot - Should render with placeHolde
5764
5764
  data-test-id="selectComponent"
5765
5765
  >
5766
5766
  <div
5767
- class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
5767
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
5768
5768
  data-selector-id="textBoxIcon"
5769
5769
  >
5770
5770
  <div
@@ -5889,7 +5889,7 @@ exports[`Select box needSelectDownIcon snapshot - Should render with textBoxSiz
5889
5889
  data-test-id="selectComponent"
5890
5890
  >
5891
5891
  <div
5892
- class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
5892
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
5893
5893
  data-selector-id="textBoxIcon"
5894
5894
  >
5895
5895
  <div
@@ -6014,7 +6014,7 @@ exports[`Select box needSelectDownIcon snapshot - Should render with textBoxSiz
6014
6014
  data-test-id="selectComponent"
6015
6015
  >
6016
6016
  <div
6017
- class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
6017
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
6018
6018
  data-selector-id="textBoxIcon"
6019
6019
  >
6020
6020
  <div
@@ -6139,7 +6139,7 @@ exports[`Select box needSelectDownIcon snapshot - Should render with textBoxSiz
6139
6139
  data-test-id="selectComponent"
6140
6140
  >
6141
6141
  <div
6142
- class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
6142
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
6143
6143
  data-selector-id="textBoxIcon"
6144
6144
  >
6145
6145
  <div
@@ -6264,7 +6264,7 @@ exports[`Select box needSelectDownIcon snapshot - Should render with textBoxSiz
6264
6264
  data-test-id="selectComponent"
6265
6265
  >
6266
6266
  <div
6267
- class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
6267
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
6268
6268
  data-selector-id="textBoxIcon"
6269
6269
  >
6270
6270
  <div
@@ -6389,7 +6389,7 @@ exports[`Select box needSelectDownIcon snapshot - Should render with textBoxVar
6389
6389
  data-test-id="selectComponent"
6390
6390
  >
6391
6391
  <div
6392
- class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
6392
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
6393
6393
  data-selector-id="textBoxIcon"
6394
6394
  >
6395
6395
  <div
@@ -6514,7 +6514,7 @@ exports[`Select box needSelectDownIcon snapshot - Should render with textBoxVar
6514
6514
  data-test-id="selectComponent"
6515
6515
  >
6516
6516
  <div
6517
- class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
6517
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
6518
6518
  data-selector-id="textBoxIcon"
6519
6519
  >
6520
6520
  <div
@@ -6639,7 +6639,7 @@ exports[`Select box needSelectDownIcon snapshot - Should render with textBoxVar
6639
6639
  data-test-id="selectComponent"
6640
6640
  >
6641
6641
  <div
6642
- class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
6642
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
6643
6643
  data-selector-id="textBoxIcon"
6644
6644
  >
6645
6645
  <div
@@ -6764,7 +6764,7 @@ exports[`Select box needSelectDownIcon snapshot - Should render with textBoxVar
6764
6764
  data-test-id="selectComponent"
6765
6765
  >
6766
6766
  <div
6767
- class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
6767
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
6768
6768
  data-selector-id="textBoxIcon"
6769
6769
  >
6770
6770
  <div
@@ -6890,7 +6890,7 @@ exports[`Select box needSelectDownIcon snapshot - Should render with title - ne
6890
6890
  data-test-id="selectComponent"
6891
6891
  >
6892
6892
  <div
6893
- class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
6893
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
6894
6894
  data-selector-id="textBoxIcon"
6895
6895
  >
6896
6896
  <div
@@ -6982,7 +6982,7 @@ exports[`Select dataId snapshot - Should render with dataId prop - dropbox open
6982
6982
  data-test-id="customDataId"
6983
6983
  >
6984
6984
  <div
6985
- class="varClass customContainer border_bottom effect borderColor_default hasBorder active container input flex rowdir"
6985
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder active container input flex rowdir"
6986
6986
  data-selector-id="textBoxIcon"
6987
6987
  >
6988
6988
  <div
@@ -7106,7 +7106,7 @@ exports[`Select dataId snapshot - Should render with dataId prop - dropbox open
7106
7106
  class="search medium"
7107
7107
  >
7108
7108
  <div
7109
- class="varClass customContainer border_bottom effect borderColor_default hasBorder container flex rowdir"
7109
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder container flex rowdir"
7110
7110
  data-selector-id="textBoxIcon"
7111
7111
  >
7112
7112
  <div
@@ -7409,7 +7409,7 @@ exports[`Select dataId snapshot - Should render with dataId prop - isDisabled a
7409
7409
  data-test-id="customDataId_disabled"
7410
7410
  >
7411
7411
  <div
7412
- class="varClass customContainer border_bottom disabled borderColor_default hasBorder container flex rowdir"
7412
+ class="varClass customContainer border_bottom disabled borderColor_default hasBorder container flex rowdir"
7413
7413
  data-selector-id="textBoxIcon"
7414
7414
  data-title=""
7415
7415
  >
@@ -7502,7 +7502,7 @@ exports[`Select dataId snapshot - Should render with dataId prop - isReadOnly a
7502
7502
  data-test-id="customDataId_readOnly"
7503
7503
  >
7504
7504
  <div
7505
- class="varClass customContainer border_bottom readonly borderColor_default hasBorder container flex rowdir"
7505
+ class="varClass customContainer border_bottom readonly borderColor_default hasBorder container flex rowdir"
7506
7506
  data-selector-id="textBoxIcon"
7507
7507
  >
7508
7508
  <div
@@ -7599,7 +7599,7 @@ exports[`Select dataId snapshot - Should render with renderCustomSelectedValue
7599
7599
  aria-haspopup="listbox"
7600
7600
  aria-owns="1"
7601
7601
  aria-readonly="false"
7602
- class="varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder flex rowdir scrolly"
7602
+ class="varClass customContainer medium border_bottom effect borderColor_default hasBorder flex rowdir"
7603
7603
  data-selector-id="container"
7604
7604
  data-title=""
7605
7605
  role="button"
@@ -7626,7 +7626,7 @@ exports[`Select snapshot - Should render with children 1`] = `
7626
7626
  data-test-id="selectComponent"
7627
7627
  >
7628
7628
  <div
7629
- class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
7629
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
7630
7630
  data-selector-id="textBoxIcon"
7631
7631
  >
7632
7632
  <div
@@ -7727,7 +7727,7 @@ exports[`Select snapshot - Should render with children and dropdown open 1`] =
7727
7727
  data-test-id="selectComponent"
7728
7728
  >
7729
7729
  <div
7730
- class="varClass customContainer border_bottom effect borderColor_default hasBorder active container input flex rowdir"
7730
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder active container input flex rowdir"
7731
7731
  data-selector-id="textBoxIcon"
7732
7732
  >
7733
7733
  <div
@@ -7884,7 +7884,7 @@ exports[`Select snapshot - Should render with className prop 1`] = `
7884
7884
  data-test-id="selectComponent"
7885
7885
  >
7886
7886
  <div
7887
- class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
7887
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
7888
7888
  data-selector-id="textBoxIcon"
7889
7889
  >
7890
7890
  <div
@@ -7975,7 +7975,7 @@ exports[`Select snapshot - Should render with customProps 1`] = `
7975
7975
  data-test-id="selectComponent"
7976
7976
  >
7977
7977
  <div
7978
- class="varClass customContainer border_bottom effect borderColor_default hasBorder active container input flex rowdir"
7978
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder active container input flex rowdir"
7979
7979
  data-selector-id="textBoxIcon"
7980
7980
  >
7981
7981
  <div
@@ -8100,7 +8100,7 @@ exports[`Select snapshot - Should render with customProps 1`] = `
8100
8100
  class="search medium"
8101
8101
  >
8102
8102
  <div
8103
- class="varClass customContainer border_bottom effect borderColor_default hasBorder container flex rowdir"
8103
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder container flex rowdir"
8104
8104
  data-selector-id="textBoxIcon"
8105
8105
  >
8106
8106
  <div
@@ -8317,7 +8317,7 @@ exports[`Select snapshot - Should render with dataSelectorId prop 1`] = `
8317
8317
  data-test-id="selectComponent"
8318
8318
  >
8319
8319
  <div
8320
- class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
8320
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
8321
8321
  data-selector-id="textBoxIcon"
8322
8322
  >
8323
8323
  <div
@@ -8408,7 +8408,7 @@ exports[`Select snapshot - Should render with dropBoxSize as large 1`] = `
8408
8408
  data-test-id="selectComponent"
8409
8409
  >
8410
8410
  <div
8411
- class="varClass customContainer border_bottom effect borderColor_default hasBorder active container input flex rowdir"
8411
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder active container input flex rowdir"
8412
8412
  data-selector-id="textBoxIcon"
8413
8413
  >
8414
8414
  <div
@@ -8530,7 +8530,7 @@ exports[`Select snapshot - Should render with dropBoxSize as large 1`] = `
8530
8530
  class="search medium"
8531
8531
  >
8532
8532
  <div
8533
- class="varClass customContainer border_bottom effect borderColor_default hasBorder container flex rowdir"
8533
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder container flex rowdir"
8534
8534
  data-selector-id="textBoxIcon"
8535
8535
  >
8536
8536
  <div
@@ -8605,7 +8605,7 @@ exports[`Select snapshot - Should render with dropBoxSize as medium 1`] = `
8605
8605
  data-test-id="selectComponent"
8606
8606
  >
8607
8607
  <div
8608
- class="varClass customContainer border_bottom effect borderColor_default hasBorder active container input flex rowdir"
8608
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder active container input flex rowdir"
8609
8609
  data-selector-id="textBoxIcon"
8610
8610
  >
8611
8611
  <div
@@ -8727,7 +8727,7 @@ exports[`Select snapshot - Should render with dropBoxSize as medium 1`] = `
8727
8727
  class="search medium"
8728
8728
  >
8729
8729
  <div
8730
- class="varClass customContainer border_bottom effect borderColor_default hasBorder container flex rowdir"
8730
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder container flex rowdir"
8731
8731
  data-selector-id="textBoxIcon"
8732
8732
  >
8733
8733
  <div
@@ -8802,7 +8802,7 @@ exports[`Select snapshot - Should render with dropBoxSize as small 1`] = `
8802
8802
  data-test-id="selectComponent"
8803
8803
  >
8804
8804
  <div
8805
- class="varClass customContainer border_bottom effect borderColor_default hasBorder active container input flex rowdir"
8805
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder active container input flex rowdir"
8806
8806
  data-selector-id="textBoxIcon"
8807
8807
  >
8808
8808
  <div
@@ -8924,7 +8924,7 @@ exports[`Select snapshot - Should render with dropBoxSize as small 1`] = `
8924
8924
  class="search medium"
8925
8925
  >
8926
8926
  <div
8927
- class="varClass customContainer border_bottom effect borderColor_default hasBorder container flex rowdir"
8927
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder container flex rowdir"
8928
8928
  data-selector-id="textBoxIcon"
8929
8929
  >
8930
8930
  <div
@@ -8999,7 +8999,7 @@ exports[`Select snapshot - Should render with getChildren 1`] = `
8999
8999
  data-test-id="selectComponent"
9000
9000
  >
9001
9001
  <div
9002
- class="varClass customContainer border_bottom effect borderColor_default hasBorder active container input flex rowdir"
9002
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder active container input flex rowdir"
9003
9003
  data-selector-id="textBoxIcon"
9004
9004
  >
9005
9005
  <div
@@ -9128,7 +9128,7 @@ exports[`Select snapshot - Should render with getFooter 1`] = `
9128
9128
  data-test-id="selectComponent"
9129
9129
  >
9130
9130
  <div
9131
- class="varClass customContainer border_bottom effect borderColor_default hasBorder active container input flex rowdir"
9131
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder active container input flex rowdir"
9132
9132
  data-selector-id="textBoxIcon"
9133
9133
  >
9134
9134
  <div
@@ -9285,7 +9285,7 @@ exports[`Select snapshot - Should render with iconOnHover as true 1`] = `
9285
9285
  data-test-id="selectComponent"
9286
9286
  >
9287
9287
  <div
9288
- class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
9288
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
9289
9289
  data-selector-id="textBoxIcon"
9290
9290
  >
9291
9291
  <div
@@ -9376,7 +9376,7 @@ exports[`Select snapshot - Should render with iconOnHover as true and isDisable
9376
9376
  data-test-id="selectComponent_disabled"
9377
9377
  >
9378
9378
  <div
9379
- class="varClass customContainer border_bottom disabled borderColor_default hasBorder container flex rowdir"
9379
+ class="varClass customContainer border_bottom disabled borderColor_default hasBorder container flex rowdir"
9380
9380
  data-selector-id="textBoxIcon"
9381
9381
  data-title=""
9382
9382
  >
@@ -9469,7 +9469,7 @@ exports[`Select snapshot - Should render with iconOnHover as true and isReadOnl
9469
9469
  data-test-id="selectComponent_readOnly"
9470
9470
  >
9471
9471
  <div
9472
- class="varClass customContainer border_bottom readonly borderColor_default hasBorder container flex rowdir"
9472
+ class="varClass customContainer border_bottom readonly borderColor_default hasBorder container flex rowdir"
9473
9473
  data-selector-id="textBoxIcon"
9474
9474
  >
9475
9475
  <div
@@ -9560,7 +9560,7 @@ exports[`Select snapshot - Should render with isLoading 1`] = `
9560
9560
  data-test-id="selectComponent"
9561
9561
  >
9562
9562
  <div
9563
- class="varClass customContainer border_bottom effect borderColor_default hasBorder active container input flex rowdir"
9563
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder active container input flex rowdir"
9564
9564
  data-selector-id="textBoxIcon"
9565
9565
  >
9566
9566
  <div
@@ -9728,7 +9728,7 @@ exports[`Select snapshot - Should render with isParentBased as false 1`] = `
9728
9728
  data-test-id="selectComponent"
9729
9729
  >
9730
9730
  <div
9731
- class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
9731
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
9732
9732
  data-selector-id="textBoxIcon"
9733
9733
  >
9734
9734
  <div
@@ -9853,7 +9853,7 @@ exports[`Select snapshot - Should render with size as medium 1`] = `
9853
9853
  data-test-id="selectComponent"
9854
9854
  >
9855
9855
  <div
9856
- class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
9856
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
9857
9857
  data-selector-id="textBoxIcon"
9858
9858
  >
9859
9859
  <div
@@ -9944,7 +9944,7 @@ exports[`Select snapshot - Should render with size as small 1`] = `
9944
9944
  data-test-id="selectComponent"
9945
9945
  >
9946
9946
  <div
9947
- class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
9947
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
9948
9948
  data-selector-id="textBoxIcon"
9949
9949
  >
9950
9950
  <div
@@ -10035,7 +10035,7 @@ exports[`Select snapshot - Should render with title prop 1`] = `
10035
10035
  data-test-id="selectComponent"
10036
10036
  >
10037
10037
  <div
10038
- class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
10038
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
10039
10039
  data-selector-id="textBoxIcon"
10040
10040
  >
10041
10041
  <div