pixel-react 1.2.7 → 1.2.9

Sign up to get free protection for your applications and to get access to all the features.
Files changed (219) hide show
  1. package/lib/components/Drawer/Types.d.ts +23 -12
  2. package/lib/components/Editor/Editor.d.ts +5 -0
  3. package/lib/components/Editor/Editor.stories.d.ts +6 -0
  4. package/lib/components/Editor/VariableDropdown.d.ts +5 -0
  5. package/lib/components/Editor/constants.d.ts +3 -0
  6. package/lib/components/Editor/index.d.ts +1 -0
  7. package/lib/components/Editor/types.d.ts +71 -0
  8. package/lib/components/Excel/ContextMenu/ContextMenu.d.ts +4 -0
  9. package/lib/components/Excel/ExcelFile/ExcelFile.d.ts +20 -0
  10. package/lib/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.d.ts +7 -0
  11. package/lib/components/Excel/ExcelFile/ExcelFileComponents/Cell.d.ts +4 -0
  12. package/lib/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.d.ts +5 -0
  13. package/lib/components/Excel/ExcelFile/ExcelFileComponents/Copied.d.ts +3 -0
  14. package/lib/components/Excel/ExcelFile/ExcelFileComponents/CornerIndicator.d.ts +5 -0
  15. package/lib/components/Excel/ExcelFile/ExcelFileComponents/DataEditor.d.ts +5 -0
  16. package/lib/components/Excel/ExcelFile/ExcelFileComponents/DataViewer.d.ts +8 -0
  17. package/lib/components/Excel/ExcelFile/ExcelFileComponents/FloatingRect.d.ts +10 -0
  18. package/lib/components/Excel/ExcelFile/ExcelFileComponents/HeaderRow.d.ts +3 -0
  19. package/lib/components/Excel/ExcelFile/ExcelFileComponents/Row.d.ts +3 -0
  20. package/lib/components/Excel/ExcelFile/ExcelFileComponents/RowIndicator.d.ts +5 -0
  21. package/lib/components/Excel/ExcelFile/ExcelFileComponents/Selected.d.ts +3 -0
  22. package/lib/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.d.ts +80 -0
  23. package/lib/components/Excel/ExcelFile/ExcelFileComponents/Table.d.ts +3 -0
  24. package/lib/components/Excel/ExcelFile/ExcelFileComponents/actions.d.ts +203 -0
  25. package/lib/components/Excel/ExcelFile/ExcelFileComponents/areModelsEqual.d.ts +1 -0
  26. package/lib/components/Excel/ExcelFile/ExcelFileComponents/context.d.ts +8 -0
  27. package/lib/components/Excel/ExcelFile/ExcelFileComponents/engine/engine.d.ts +22 -0
  28. package/lib/components/Excel/ExcelFile/ExcelFileComponents/engine/formula.d.ts +17 -0
  29. package/lib/components/Excel/ExcelFile/ExcelFileComponents/engine/index.d.ts +2 -0
  30. package/lib/components/Excel/ExcelFile/ExcelFileComponents/engine/point-graph.d.ts +21 -0
  31. package/lib/components/Excel/ExcelFile/ExcelFileComponents/engine/point-hash.d.ts +3 -0
  32. package/lib/components/Excel/ExcelFile/ExcelFileComponents/engine/point-set.d.ts +24 -0
  33. package/lib/components/Excel/ExcelFile/ExcelFileComponents/index.d.ts +13 -0
  34. package/lib/components/Excel/ExcelFile/ExcelFileComponents/matrix.d.ts +67 -0
  35. package/lib/components/Excel/ExcelFile/ExcelFileComponents/point-range.d.ts +22 -0
  36. package/lib/components/Excel/ExcelFile/ExcelFileComponents/point.d.ts +11 -0
  37. package/lib/components/Excel/ExcelFile/ExcelFileComponents/reducer.d.ts +4 -0
  38. package/lib/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.d.ts +40 -0
  39. package/lib/components/Excel/ExcelFile/ExcelFileComponents/selection.d.ts +95 -0
  40. package/lib/components/Excel/ExcelFile/ExcelFileComponents/types.d.ts +178 -0
  41. package/lib/components/Excel/ExcelFile/ExcelFileComponents/use-dispatch.d.ts +3 -0
  42. package/lib/components/Excel/ExcelFile/ExcelFileComponents/use-selector.d.ts +3 -0
  43. package/lib/components/Excel/ExcelFile/ExcelFileComponents/util.d.ts +44 -0
  44. package/lib/components/Excel/ExcelFile.stories.d.ts +6 -0
  45. package/lib/components/Excel/ExcelToolBar/ExcelToolBar.d.ts +19 -0
  46. package/lib/components/Excel/Types.d.ts +129 -0
  47. package/lib/components/Excel/index.d.ts +1 -0
  48. package/lib/components/ExcelFile/ColorBarselector/ColorBarSelector.d.ts +8 -0
  49. package/lib/components/ExcelFile/ExcelFile/Excel/ActiveCell.d.ts +2 -2
  50. package/lib/components/ExcelFile/ExcelFile/Excel/ColumnIndicator.d.ts +2 -2
  51. package/lib/components/ExcelFile/ExcelFile/Excel/Copied.d.ts +1 -1
  52. package/lib/components/ExcelFile/ExcelFile/Excel/CornerIndicator.d.ts +2 -2
  53. package/lib/components/ExcelFile/ExcelFile/Excel/DataEditor.d.ts +2 -2
  54. package/lib/components/ExcelFile/ExcelFile/Excel/DataViewer.d.ts +2 -2
  55. package/lib/components/ExcelFile/ExcelFile/Excel/FloatingRect.d.ts +2 -2
  56. package/lib/components/ExcelFile/ExcelFile/Excel/HeaderRow.d.ts +1 -1
  57. package/lib/components/ExcelFile/ExcelFile/Excel/Row.d.ts +1 -1
  58. package/lib/components/ExcelFile/ExcelFile/Excel/RowIndicator.d.ts +2 -2
  59. package/lib/components/ExcelFile/ExcelFile/Excel/Selected.d.ts +1 -1
  60. package/lib/components/ExcelFile/ExcelFile/Excel/Spreadsheet.d.ts +7 -6
  61. package/lib/components/ExcelFile/ExcelFile/Excel/Table.d.ts +1 -1
  62. package/lib/components/ExcelFile/ExcelFile/Excel/actions.d.ts +5 -49
  63. package/lib/components/ExcelFile/ExcelFile/Excel/context.d.ts +3 -3
  64. package/lib/components/ExcelFile/ExcelFile/Excel/engine/engine.d.ts +5 -5
  65. package/lib/components/ExcelFile/ExcelFile/Excel/engine/formula.d.ts +6 -6
  66. package/lib/components/ExcelFile/ExcelFile/Excel/engine/index.d.ts +2 -2
  67. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-graph.d.ts +2 -2
  68. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-hash.d.ts +1 -1
  69. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-set.d.ts +1 -1
  70. package/lib/components/ExcelFile/ExcelFile/Excel/index.d.ts +11 -11
  71. package/lib/components/ExcelFile/ExcelFile/Excel/matrix.d.ts +1 -1
  72. package/lib/components/ExcelFile/ExcelFile/Excel/point-range.d.ts +1 -1
  73. package/lib/components/ExcelFile/ExcelFile/Excel/reducer.d.ts +5 -5
  74. package/lib/components/ExcelFile/ExcelFile/Excel/selection.d.ts +3 -3
  75. package/lib/components/ExcelFile/ExcelFile/Excel/types.d.ts +48 -11
  76. package/lib/components/ExcelFile/ExcelFile/Excel/use-dispatch.d.ts +1 -1
  77. package/lib/components/ExcelFile/ExcelFile/Excel/use-selector.d.ts +1 -1
  78. package/lib/components/ExcelFile/ExcelFile/Excel/util.d.ts +12 -11
  79. package/lib/components/ExcelFile/ExcelFile/ExcelFile.d.ts +0 -16
  80. package/lib/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.d.ts +3 -0
  81. package/lib/components/ExcelFile/ExcelToolBar/ExcelToolBar.d.ts +0 -12
  82. package/lib/components/ExcelFile/Types.d.ts +49 -2
  83. package/lib/components/InputWithDropdown/InputWithDropdown.d.ts +1 -1
  84. package/lib/components/InputWithDropdown/types.d.ts +3 -1
  85. package/lib/components/MenuOption/MenuOption.d.ts +1 -1
  86. package/lib/components/MenuOption/types.d.ts +4 -0
  87. package/lib/components/Select/Select.d.ts +3 -2
  88. package/lib/components/Select/Select.stories.d.ts +1 -0
  89. package/lib/components/Select/components/Dropdown.d.ts +5 -0
  90. package/lib/components/Select/components/types.d.ts +18 -0
  91. package/lib/components/Select/types.d.ts +2 -42
  92. package/lib/components/Toastify/Toastify.d.ts +5 -4
  93. package/lib/components/Toastify/types.d.ts +1 -0
  94. package/lib/index.d.ts +75 -30
  95. package/lib/index.esm.js +1734 -1441
  96. package/lib/index.esm.js.map +1 -1
  97. package/lib/index.js +1734 -1440
  98. package/lib/index.js.map +1 -1
  99. package/lib/tsconfig.tsbuildinfo +1 -1
  100. package/lib/utils/getSequentialPayload/getSequentialPayload.d.ts +2 -0
  101. package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +10 -0
  102. package/lib/utils/getSequentialPayload/types.d.ts +30 -0
  103. package/package.json +1 -1
  104. package/src/assets/Themes/BaseTheme.scss +5 -0
  105. package/src/assets/Themes/DarkTheme.scss +2 -0
  106. package/src/assets/icons/maximize_icon.svg +5 -0
  107. package/src/assets/styles/_fonts.scss +1 -1
  108. package/src/components/AllProjectsDropdown/AllProjectsDropdown.scss +15 -6
  109. package/src/components/AllProjectsDropdown/AllProjectsDropdown.stories.tsx +0 -5
  110. package/src/components/AllProjectsDropdown/AllProjectsDropdown.tsx +20 -10
  111. package/src/components/Drawer/Drawer.scss +1 -0
  112. package/src/components/Drawer/Types.ts +24 -13
  113. package/src/components/Excel/ExcelFile/ExcelFile.scss +62 -0
  114. package/src/components/Excel/ExcelFile/ExcelFile.tsx +312 -0
  115. package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/ActiveCell.tsx +2 -2
  116. package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/Cell.tsx +3 -3
  117. package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/ColumnIndicator.tsx +4 -4
  118. package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/CornerIndicator.tsx +2 -2
  119. package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/DataEditor.tsx +1 -1
  120. package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/DataViewer.tsx +3 -3
  121. package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/FloatingRect.tsx +4 -4
  122. package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/RowIndicator.tsx +4 -4
  123. package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/Spreadsheet.scss +26 -24
  124. package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/Spreadsheet.tsx +13 -45
  125. package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/Table.tsx +1 -1
  126. package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/actions.ts +88 -20
  127. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +495 -0
  128. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +758 -0
  129. package/src/components/{ExcelFile → Excel}/ExcelFile.stories.tsx +45 -0
  130. package/src/components/Excel/ExcelToolBar/ExcelToolBar.scss +36 -0
  131. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +346 -0
  132. package/src/components/Form/Form.scss +54 -35
  133. package/src/components/Form/Form.stories.tsx +264 -225
  134. package/src/components/Icon/Icons.scss +4 -0
  135. package/src/components/Icon/iconList.ts +2 -1
  136. package/src/components/Input/Input.tsx +0 -1
  137. package/src/components/InputWithDropdown/InputWithDropdown.scss +30 -1
  138. package/src/components/InputWithDropdown/InputWithDropdown.tsx +45 -16
  139. package/src/components/InputWithDropdown/types.ts +5 -1
  140. package/src/components/MenuOption/MenuOption.scss +0 -1
  141. package/src/components/MenuOption/MenuOption.stories.tsx +3 -0
  142. package/src/components/MenuOption/MenuOption.tsx +5 -4
  143. package/src/components/MenuOption/types.ts +4 -0
  144. package/src/components/MultiSelect/MultiSelect.scss +5 -1
  145. package/src/components/MultiSelect/MultiSelect.stories.tsx +17 -13
  146. package/src/components/MultiSelect/MultiSelect.tsx +27 -14
  147. package/src/components/Select/Select.scss +121 -188
  148. package/src/components/Select/Select.stories.tsx +164 -18
  149. package/src/components/Select/Select.tsx +142 -290
  150. package/src/components/Select/components/Dropdown.scss +50 -0
  151. package/src/components/Select/components/Dropdown.tsx +94 -0
  152. package/src/components/Select/components/types.ts +20 -0
  153. package/src/components/Select/types.ts +15 -39
  154. package/src/components/Table/Table.scss +6 -5
  155. package/src/components/Table/Table.stories.tsx +0 -9
  156. package/src/components/Table/Table.tsx +2 -2
  157. package/src/components/TableTree/TableTree.scss +1 -1
  158. package/src/components/TableTree/TableTree.tsx +3 -1
  159. package/src/components/Toastify/Toastify.stories.tsx +29 -10
  160. package/src/components/Toastify/Toastify.tsx +42 -16
  161. package/src/components/Toastify/types.ts +2 -0
  162. package/src/index.ts +4 -2
  163. package/src/utils/getSelectOptionValue/getSelectOptionValue.ts +1 -1
  164. package/src/utils/getSequentialPayload/getSequentialPayload.stories.tsx +75 -0
  165. package/src/utils/getSequentialPayload/getSequentialPayload.ts +29 -0
  166. package/src/utils/getSequentialPayload/types.ts +35 -0
  167. package/src/components/ExcelFile/ExcelFile/Excel/reducer.ts +0 -952
  168. package/src/components/ExcelFile/ExcelFile/ExcelFile.scss +0 -24
  169. package/src/components/ExcelFile/ExcelFile/ExcelFile.tsx +0 -162
  170. package/src/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.scss +0 -16
  171. package/src/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.tsx +0 -68
  172. package/src/components/ExcelFile/ExcelToolBar/ExcelToolBar.scss +0 -19
  173. package/src/components/ExcelFile/ExcelToolBar/ExcelToolBar.tsx +0 -291
  174. package/src/fonts/Montserrat/Montserrat-Medium.ttf +0 -0
  175. package/src/fonts/Montserrat/Montserrat-Regular.ttf +0 -0
  176. package/src/fonts/Montserrat/Montserrat-SemiBold.ttf +0 -0
  177. package/src/fonts/Poppins/Poppins-Black.ttf +0 -0
  178. package/src/fonts/Poppins/Poppins-BlackItalic.ttf +0 -0
  179. package/src/fonts/Poppins/Poppins-BoldItalic.ttf +0 -0
  180. package/src/fonts/Poppins/Poppins-ExtraBold.ttf +0 -0
  181. package/src/fonts/Poppins/Poppins-ExtraBoldItalic.ttf +0 -0
  182. package/src/fonts/Poppins/Poppins-ExtraLight.ttf +0 -0
  183. package/src/fonts/Poppins/Poppins-ExtraLightItalic.ttf +0 -0
  184. package/src/fonts/Poppins/Poppins-Italic.ttf +0 -0
  185. package/src/fonts/Poppins/Poppins-Light.ttf +0 -0
  186. package/src/fonts/Poppins/Poppins-LightItalic.ttf +0 -0
  187. package/src/fonts/Poppins/Poppins-MediumItalic.ttf +0 -0
  188. package/src/fonts/Poppins/Poppins-SemiBoldItalic.ttf +0 -0
  189. package/src/fonts/Poppins/Poppins-Thin.ttf +0 -0
  190. package/src/fonts/Poppins/Poppins-ThinItalic.ttf +0 -0
  191. /package/lib/components/{ExcelFile → Excel}/ColorBarSelector/ColorBarSelector.d.ts +0 -0
  192. /package/src/components/{ExcelFile/ColorBarselector → Excel/ColorBarSelector}/ColorBarSelector.scss +0 -0
  193. /package/src/components/{ExcelFile/ColorBarselector → Excel/ColorBarSelector}/ColorBarSelector.tsx +0 -0
  194. /package/src/components/{ExcelFile → Excel}/ContextMenu/ContextMenu.scss +0 -0
  195. /package/src/components/{ExcelFile → Excel}/ContextMenu/ContextMenu.tsx +0 -0
  196. /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/Copied.tsx +0 -0
  197. /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/HeaderRow.tsx +0 -0
  198. /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/Row.tsx +0 -0
  199. /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/Selected.tsx +0 -0
  200. /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/areModelsEqual.ts +0 -0
  201. /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/context.ts +0 -0
  202. /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/engine/engine.ts +0 -0
  203. /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/engine/formula.ts +0 -0
  204. /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/engine/index.ts +0 -0
  205. /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/engine/point-graph.ts +0 -0
  206. /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/engine/point-hash.ts +0 -0
  207. /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/engine/point-set.ts +0 -0
  208. /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/index.ts +0 -0
  209. /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/matrix.ts +0 -0
  210. /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/point-range.ts +0 -0
  211. /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/point.ts +0 -0
  212. /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/selection.ts +0 -0
  213. /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/types.ts +0 -0
  214. /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/typings/fast-formula-parser.d.ts +0 -0
  215. /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/use-dispatch.ts +0 -0
  216. /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/use-selector.ts +0 -0
  217. /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/util.ts +0 -0
  218. /package/src/components/{ExcelFile → Excel}/Types.ts +0 -0
  219. /package/src/components/{ExcelFile → Excel}/index.ts +0 -0
@@ -1,250 +1,183 @@
1
1
  @use '../../assets/styles/fonts';
2
2
 
3
- // todo color need to be add into style guide
4
- @mixin transition-all($time: 0.3s) {
5
- transition: opacity $time ease-out, transform $time ease-out,
6
- font-size $time ease-out, padding $time ease-out;
7
- }
8
-
9
- @mixin absolute-position($top: auto, $right: auto, $bottom: auto, $left: auto) {
10
- position: absolute;
11
- top: $top;
12
- right: $right;
13
- bottom: $bottom;
14
- left: $left;
3
+ @mixin svg-path-style($fill-color: var(--ff-select-brand-color)) {
4
+ svg {
5
+ path {
6
+ fill: $fill-color;
7
+ transition: all 0.18s ease;
8
+ }
9
+ }
15
10
  }
16
11
 
17
- @mixin opacity-style($opacity: 1, $color: null, $border-color-arg: null) {
18
- opacity: $opacity;
12
+ @mixin select-state-style($color) {
13
+ border-color: $color;
19
14
 
20
- @if $color {
15
+ .ff-select-label {
21
16
  color: $color;
22
17
  }
23
18
 
24
- @if $border-color-arg {
25
- border-color: $border-color-arg;
19
+ .ff-select-arrow-wrapper {
20
+ .ff-select-arrow {
21
+ @include svg-path-style($color);
22
+ }
26
23
  }
27
24
  }
28
25
 
29
26
  .ff-select-wrapper {
30
- position: relative;
31
-
32
- .ff-select-input {
33
- cursor: pointer;
34
- }
27
+ min-height: 24px;
28
+ min-width: 50px;
35
29
 
36
30
  .ff-select {
37
- @extend .fontSm;
38
- margin: 0;
39
- padding: 0;
40
- box-sizing: border-box;
41
- min-height: 32px;
42
- min-width: 100px;
31
+ height: 100%;
32
+ border: 1px solid var(--ff-select-border-color);
33
+ border-radius: 4px;
43
34
  display: flex;
44
- align-items: end;
35
+ align-items: center;
36
+ justify-content: space-evenly;
45
37
  position: relative;
38
+ box-sizing: border-box;
46
39
 
47
- &-fieldset {
48
- margin: 0;
49
- padding: 25px 0px 0px 8px;
50
- border: 1px solid transparent;
51
- box-sizing: border-box;
52
- height: 100%;
53
- width: 100%;
54
- border-radius: 4px;
55
- display: block;
56
-
57
- &--border-radius {
58
- border-radius: 0px 4px 4px 0px;
59
- }
60
-
61
- &--no-label {
62
- padding: 30px 0px 0px 8px;
63
- }
64
-
65
- &--default {
66
- @include opacity-style(0, null, var(--ff-select-border-color));
67
- }
40
+ &:hover {
41
+ @include select-state-style(var(--ff-select-text-hover-color));
42
+ }
68
43
 
69
- &--active {
70
- @include opacity-style(1, null, var(--ff-select-brand-color));
71
- }
44
+ .ff-select-input {
45
+ @extend .fontSm;
46
+ width: calc(100% - 8px);
47
+ padding: 0px 0px 0px 8px;
48
+ border: none;
49
+ outline: none;
50
+ line-height: 30px;
51
+ letter-spacing: 0.5px;
52
+ z-index: 10;
53
+ background: transparent;
72
54
 
73
- &--option {
74
- opacity: 1;
55
+ &__disabled {
56
+ cursor: not-allowed;
57
+ color: var(--ff-select-border-color);
75
58
  }
59
+ }
76
60
 
77
- &--no-border {
78
- border-color: transparent;
79
- }
61
+ .ff-select-arrow-wrapper {
62
+ cursor: pointer;
63
+ height: 100%;
64
+ padding: 0px;
65
+ padding-right: 8px;
66
+ display: flex;
67
+ align-items: center;
80
68
 
81
- &--error {
82
- border-color: var(--error-light);
69
+ .ff-select-arrow {
70
+ @include svg-path-style(var(--ff-select-border-color));
83
71
  }
84
72
 
85
- .ff-select-legend {
86
- @extend .font-size-8;
87
- padding: 0 2px;
88
- letter-spacing: 0.5px;
89
-
90
- &--default {
91
- @include transition-all(0.3s);
92
- opacity: 0;
93
- }
94
-
95
- &--active {
96
- @include transition-all(0.25s);
97
- @include opacity-style(1, var(--ff-select-brand-color));
98
- }
99
-
100
- &--option {
101
- @include opacity-style(1, var(--ff-select-default-color));
102
- }
103
-
104
- &--error {
105
- color: var(--error-light);
106
- }
107
-
108
- &--required {
109
- margin-right: 2px;
110
- }
73
+ &__disabled {
74
+ cursor: not-allowed;
111
75
  }
112
76
  }
113
77
 
114
- &-input {
78
+ .ff-select-label {
115
79
  @extend .fontSm;
116
- @include absolute-position(6px, auto, auto, auto);
117
- width: 100%;
118
- min-height: calc(100% - 8px);
119
- padding: 0 28px 0 8px;
80
+ position: absolute;
81
+ left: 8px;
82
+ color: var(--ff-select-border-color);
83
+ letter-spacing: 0.5px;
84
+ line-height: 18px;
85
+ transition: 0.18s ease all;
120
86
  border-radius: 4px;
121
- border: 1px solid transparent;
122
- z-index: 100;
123
- background: transparent;
124
- outline: none;
125
87
 
126
- &:hover {
127
- ~ .ff-select-label {
128
- color: var(--ff-select-text-hover-color);
129
- }
88
+ &__active {
89
+ @extend .font-size-8;
90
+ transform: translateY(-15px);
91
+ transition: 0.18s ease all;
92
+ background-color: var(--ff-select-background-color);
93
+ padding: 0px 4px;
94
+ z-index: 100000;
130
95
  }
96
+ }
131
97
 
132
- &--border-radius {
133
- border-radius: 0px 4px 4px 0px;
98
+ &__focus {
99
+ border-color: var(--ff-select-brand-color);
100
+ &:hover {
101
+ @include select-state-style(var(--ff-select-brand-color));
134
102
  }
135
103
 
136
- &--default {
137
- @include opacity-style(1, null, var(--ff-select-border-color));
138
-
139
- &:hover {
140
- border-color: var(--ff-select-text-color);
141
-
142
- ~ .ff-select-fieldset--option {
143
- border-color: var(--ff-select-text-color);
144
-
145
- .ff-select-legend--option {
146
- color: var(--ff-select-text-color);
147
- }
148
- }
104
+ .ff-select-label {
105
+ @extend .font-size-8;
106
+ transform: translateY(-15px);
107
+ transition: 0.18s ease all;
108
+ color: var(--ff-select-brand-color);
109
+ background-color: var(--ff-select-background-color);
110
+ padding: 0px 4px;
111
+ line-height: 18px;
112
+ z-index: 100000;
113
+ }
114
+
115
+ .ff-select-arrow-wrapper {
116
+ .ff-select-arrow {
117
+ transform: rotate(180deg);
118
+ transition: 0.18s ease all;
119
+ @include svg-path-style(var(--ff-select-brand-color));
149
120
  }
150
121
  }
122
+ }
151
123
 
152
- &--no-label {
153
- min-height: calc(100% - 2px);
154
- margin-top: 0px;
155
- top: 0px;
156
- }
157
-
158
- &--active {
159
- border-color: transparent;
160
-
161
- &:hover {
162
- border-color: transparent;
163
- }
124
+ &__disabled {
125
+ cursor: not-allowed;
126
+ &:hover {
127
+ @include select-state-style(var(--ff-select-border-color));
164
128
  }
129
+ }
165
130
 
166
- &--no-border {
167
- border: none;
168
- border-color: transparent;
131
+ &__error {
132
+ border-color: var(--error_light);
169
133
 
170
- &:hover {
171
- border-color: transparent;
134
+ &:hover {
135
+ border-color: var(--error_light);
172
136
 
173
- ~ .ff-select-fieldset--no-border {
174
- border-color: transparent;
175
- }
137
+ .ff-select-label {
138
+ color: var(--error_light);
176
139
  }
177
- }
178
-
179
- &--disable {
180
- border-color: var(--ff-select-border-color);
181
-
182
- &:hover {
183
- border-color: var(--ff-select-border-color);
184
140
 
185
- ~ .ff-select-label--default {
186
- color: var(--ff-select-default-color);
141
+ .ff-select-arrow-wrapper {
142
+ .ff-select-arrow {
143
+ @include svg-path-style(var(--ff-select-default-color));
187
144
  }
188
145
  }
189
146
  }
190
147
 
191
- &--error {
192
- border-color: var(--error-light);
193
-
148
+ &__focused {
194
149
  &:hover {
195
- border-color: var(--error-light);
150
+ .ff-select-arrow-wrapper {
151
+ .ff-select-arrow {
152
+ @include svg-path-style(var(--ff-select-brand-color));
153
+ }
154
+ }
196
155
  }
197
156
  }
198
- }
199
-
200
- &-label {
201
- @include absolute-position(13px, auto, auto, 8px);
202
- z-index: 1;
203
- font-size: 12px;
204
- top: 60%;
205
- padding-left: 8px;
206
157
 
207
- &--default {
208
- @include transition-all;
209
- @include opacity-style(1, var(--ff-select-default-color));
210
-
211
- transform: translateY(-50%);
212
- }
213
-
214
- &--active {
158
+ .ff-select-label {
215
159
  @extend .font-size-8;
216
- @include transition-all;
217
- opacity: 0;
218
- transform: translateY(-150%);
219
- padding: 0 6px;
220
- }
221
-
222
- &--required {
223
- margin-right: 2px;
160
+ transform: translateY(-16px);
161
+ transition: 0.3s ease all;
162
+ color: var(--error_light);
163
+ background-color: var(--ff-select-background-color);
164
+ padding: 0px 4px;
165
+ line-height: 18px;
224
166
  }
225
167
  }
226
168
 
227
- &-arrow {
228
- position: absolute;
229
- top: 60%;
230
- height: 100%;
231
- right: 10px;
232
- transform: rotateX(180deg) translateY(50%);
233
- cursor: pointer;
234
-
235
- &--no-label {
236
- top: 50%;
237
- }
169
+ &__no_border {
170
+ border-color: transparent;
238
171
 
239
- &--down {
240
- transform: rotateX(0deg) translateY(-50%);
241
- z-index: 101;
172
+ &:hover {
173
+ border-color: transparent;
242
174
  }
243
175
  }
244
176
  }
245
177
 
246
- &-error-text {
247
- @include absolute-position(auto, auto, -14px, 12px);
248
- white-space: nowrap;
178
+ .ff-select-error-msg {
179
+ padding-left: 8px;
180
+ margin-top: 4px;
181
+ letter-spacing: 0.5px;
249
182
  }
250
183
  }
@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
2
2
  import Select from './Select';
3
3
  import { useState } from 'react';
4
4
  import { Option } from './types';
5
+ import RadioGroup from '../RadioGroup';
5
6
 
6
7
  const meta: Meta<typeof Select> = {
7
8
  title: 'Components/Select',
@@ -20,9 +21,26 @@ export const Primary: Story = {
20
21
  labelAccessor: 'name',
21
22
  valueAccessor: 'value',
22
23
  optionsList: [
23
- { label: 'Option 1', value: '1', name: 'abcd' },
24
- { label: 'Option 2', value: '2', name: '123' },
25
- { label: 'Option 3', value: '3', name: '456' },
24
+ {
25
+ label: 'fire-flink-LIC4900-onPrem',
26
+ value: 'fire-flink-LIC4900-onPrem',
27
+ name: 'fireflink',
28
+ },
29
+ {
30
+ label: 'fire-flink-LIC3179',
31
+ value: 'fire-flink-LIC3179',
32
+ name: 'local',
33
+ },
34
+ {
35
+ label: 'fire-flink-LIC4937',
36
+ value: 'fire-flink-LIC4937',
37
+ name: 'browser stack',
38
+ },
39
+ {
40
+ label: 'fire-flink-LIC4999',
41
+ value: 'fire-flink-LIC4999',
42
+ name: 'lambda test',
43
+ },
26
44
  ],
27
45
  },
28
46
  };
@@ -31,9 +49,22 @@ export const WithError: Story = {
31
49
  args: {
32
50
  label: 'Select',
33
51
  optionsList: [
34
- { label: 'Option 1', value: '1' },
35
- { label: 'Option 2', value: '2' },
36
- { label: 'Option 3', value: '3' },
52
+ {
53
+ label: 'fire-flink-LIC4900-onPrem',
54
+ value: 'fire-flink-LIC4900-onPrem',
55
+ },
56
+ {
57
+ label: 'fire-flink-LIC3179',
58
+ value: 'fire-flink-LIC3179',
59
+ },
60
+ {
61
+ label: 'fire-flink-LIC4937',
62
+ value: 'fire-flink-LIC4937',
63
+ },
64
+ {
65
+ label: 'fire-flink-LIC4999',
66
+ value: 'fire-flink-LIC4999',
67
+ },
37
68
  ],
38
69
  errorMsg: 'Please select a option',
39
70
  },
@@ -43,9 +74,22 @@ export const WithoutLabel: Story = {
43
74
  args: {
44
75
  showLabel: false,
45
76
  optionsList: [
46
- { label: 'Option 1', value: '1' },
47
- { label: 'Option 2', value: '2' },
48
- { label: 'Option 3', value: '3' },
77
+ {
78
+ label: 'fire-flink-LIC4900-onPrem',
79
+ value: 'fire-flink-LIC4900-onPrem',
80
+ },
81
+ {
82
+ label: 'fire-flink-LIC3179',
83
+ value: 'fire-flink-LIC3179',
84
+ },
85
+ {
86
+ label: 'fire-flink-LIC4937',
87
+ value: 'fire-flink-LIC4937',
88
+ },
89
+ {
90
+ label: 'fire-flink-LIC4999',
91
+ value: 'fire-flink-LIC4999',
92
+ },
49
93
  ],
50
94
  },
51
95
  };
@@ -69,11 +113,27 @@ export const Disable: Story = {
69
113
  export const WithInitialValue: Story = {
70
114
  args: {
71
115
  label: 'Select',
72
- selectedOption: { label: 'Option 2', value: '2' },
116
+ selectedOption: {
117
+ label: 'fire-flink-LIC4900-onPrem',
118
+ value: 'fire-flink-LIC4900-onPrem',
119
+ },
73
120
  optionsList: [
74
- { label: 'Option 1', value: 'Option 1' },
75
- { label: 'Option 2', value: 'Option 2' },
76
- { label: 'Option 3', value: 'Option 3' },
121
+ {
122
+ label: 'fire-flink-LIC4900-onPrem',
123
+ value: 'fire-flink-LIC4900-onPrem',
124
+ },
125
+ {
126
+ label: 'fire-flink-LIC3179',
127
+ value: 'fire-flink-LIC3179',
128
+ },
129
+ {
130
+ label: 'fire-flink-LIC4937',
131
+ value: 'fire-flink-LIC4937',
132
+ },
133
+ {
134
+ label: 'fire-flink-LIC4999',
135
+ value: 'fire-flink-LIC4999',
136
+ },
77
137
  ],
78
138
  },
79
139
  };
@@ -81,14 +141,27 @@ export const WithInitialValue: Story = {
81
141
  export const OptionSelection: Story = {
82
142
  render: () => {
83
143
  const optionsList = [
84
- { label: 'Option 1', value: 'Option 1' },
85
- { label: 'Option 2', value: 'Option 2' },
86
- { label: 'Option 3', value: 'Option 3' },
144
+ {
145
+ label: 'fire-flink-LIC4900-onPrem',
146
+ value: 'fire-flink-LIC4900-onPrem',
147
+ },
148
+ {
149
+ label: 'fire-flink-LIC3179',
150
+ value: 'fire-flink-LIC3179',
151
+ },
152
+ {
153
+ label: 'fire-flink-LIC4937',
154
+ value: 'fire-flink-LIC4937',
155
+ },
156
+ {
157
+ label: 'fire-flink-LIC4999',
158
+ value: 'fire-flink-LIC4999',
159
+ },
87
160
  ];
88
161
 
89
162
  const [selectedOption, setSelectedOption] = useState<Option>({
90
- label: 'Option 2',
91
- value: '2',
163
+ label: 'fire-flink-LIC3179',
164
+ value: 'fire-flink-LIC3179',
92
165
  });
93
166
 
94
167
  const handleChange = (option: Option) => {
@@ -155,4 +228,77 @@ export const CustomJSX: Story = {
155
228
  },
156
229
  };
157
230
 
231
+ export const updateOptionFromOutside: Story = {
232
+ render: () => {
233
+ const [selectedOption, setSelectedOption] = useState<Option>({
234
+ label: 'fire-flink-LIC4900-onPrem',
235
+ value: 'fire-flink-LIC4900-onPrem',
236
+ });
237
+
238
+ const optionsList = [
239
+ {
240
+ label: 'fire-flink-LIC4900-onPrem',
241
+ value: 'fire-flink-LIC4900-onPrem',
242
+ },
243
+ {
244
+ label: 'fire-flink-LIC3179',
245
+ value: 'fire-flink-LIC3179',
246
+ },
247
+ {
248
+ label: 'fire-flink-LIC4937',
249
+ value: 'fire-flink-LIC4937',
250
+ },
251
+ {
252
+ label: 'fire-flink-LIC4999',
253
+ value: 'fire-flink-LIC4999',
254
+ },
255
+ ];
256
+
257
+ const handleChange = (option: Option) => {
258
+ setSelectedOption(option);
259
+ };
260
+
261
+ const radioOptions = [
262
+ {
263
+ label: 'fire-flink-LIC4900-onPrem',
264
+ value: 'fire-flink-LIC4900-onPrem',
265
+ },
266
+ {
267
+ label: 'fire-flink-LIC3179',
268
+ value: 'fire-flink-LIC3179',
269
+ },
270
+ {
271
+ label: 'fire-flink-LIC4937',
272
+ value: 'fire-flink-LIC4937',
273
+ },
274
+ {
275
+ label: 'fire-flink-LIC4999',
276
+ value: 'fire-flink-LIC4999',
277
+ },
278
+ ];
279
+ const [selectedRadioOption, setSelectedRadioOption] = useState('option2');
280
+ const handleOptionChange = (option: Option) => {
281
+ setSelectedRadioOption(option.value);
282
+ setSelectedOption(option);
283
+ };
284
+
285
+ return (
286
+ <div>
287
+ <Select
288
+ optionsList={optionsList}
289
+ selectedOption={selectedOption}
290
+ onChange={handleChange}
291
+ showLabel={false}
292
+ />
293
+ <RadioGroup
294
+ selectedValue={selectedRadioOption}
295
+ onChange={handleOptionChange}
296
+ name="option"
297
+ options={radioOptions}
298
+ />
299
+ </div>
300
+ );
301
+ },
302
+ };
303
+
158
304
  export default meta;