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.
- package/lib/components/Drawer/Types.d.ts +23 -12
- package/lib/components/Editor/Editor.d.ts +5 -0
- package/lib/components/Editor/Editor.stories.d.ts +6 -0
- package/lib/components/Editor/VariableDropdown.d.ts +5 -0
- package/lib/components/Editor/constants.d.ts +3 -0
- package/lib/components/Editor/index.d.ts +1 -0
- package/lib/components/Editor/types.d.ts +71 -0
- package/lib/components/Excel/ContextMenu/ContextMenu.d.ts +4 -0
- package/lib/components/Excel/ExcelFile/ExcelFile.d.ts +20 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.d.ts +7 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/Cell.d.ts +4 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.d.ts +5 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/Copied.d.ts +3 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/CornerIndicator.d.ts +5 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/DataEditor.d.ts +5 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/DataViewer.d.ts +8 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/FloatingRect.d.ts +10 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/HeaderRow.d.ts +3 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/Row.d.ts +3 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/RowIndicator.d.ts +5 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/Selected.d.ts +3 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.d.ts +80 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/Table.d.ts +3 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/actions.d.ts +203 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/areModelsEqual.d.ts +1 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/context.d.ts +8 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/engine/engine.d.ts +22 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/engine/formula.d.ts +17 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/engine/index.d.ts +2 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/engine/point-graph.d.ts +21 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/engine/point-hash.d.ts +3 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/engine/point-set.d.ts +24 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/index.d.ts +13 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/matrix.d.ts +67 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/point-range.d.ts +22 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/point.d.ts +11 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/reducer.d.ts +4 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.d.ts +40 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/selection.d.ts +95 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/types.d.ts +178 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/use-dispatch.d.ts +3 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/use-selector.d.ts +3 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/util.d.ts +44 -0
- package/lib/components/Excel/ExcelFile.stories.d.ts +6 -0
- package/lib/components/Excel/ExcelToolBar/ExcelToolBar.d.ts +19 -0
- package/lib/components/Excel/Types.d.ts +129 -0
- package/lib/components/Excel/index.d.ts +1 -0
- package/lib/components/ExcelFile/ColorBarselector/ColorBarSelector.d.ts +8 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/ActiveCell.d.ts +2 -2
- package/lib/components/ExcelFile/ExcelFile/Excel/ColumnIndicator.d.ts +2 -2
- package/lib/components/ExcelFile/ExcelFile/Excel/Copied.d.ts +1 -1
- package/lib/components/ExcelFile/ExcelFile/Excel/CornerIndicator.d.ts +2 -2
- package/lib/components/ExcelFile/ExcelFile/Excel/DataEditor.d.ts +2 -2
- package/lib/components/ExcelFile/ExcelFile/Excel/DataViewer.d.ts +2 -2
- package/lib/components/ExcelFile/ExcelFile/Excel/FloatingRect.d.ts +2 -2
- package/lib/components/ExcelFile/ExcelFile/Excel/HeaderRow.d.ts +1 -1
- package/lib/components/ExcelFile/ExcelFile/Excel/Row.d.ts +1 -1
- package/lib/components/ExcelFile/ExcelFile/Excel/RowIndicator.d.ts +2 -2
- package/lib/components/ExcelFile/ExcelFile/Excel/Selected.d.ts +1 -1
- package/lib/components/ExcelFile/ExcelFile/Excel/Spreadsheet.d.ts +7 -6
- package/lib/components/ExcelFile/ExcelFile/Excel/Table.d.ts +1 -1
- package/lib/components/ExcelFile/ExcelFile/Excel/actions.d.ts +5 -49
- package/lib/components/ExcelFile/ExcelFile/Excel/context.d.ts +3 -3
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/engine.d.ts +5 -5
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/formula.d.ts +6 -6
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/index.d.ts +2 -2
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-graph.d.ts +2 -2
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-hash.d.ts +1 -1
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-set.d.ts +1 -1
- package/lib/components/ExcelFile/ExcelFile/Excel/index.d.ts +11 -11
- package/lib/components/ExcelFile/ExcelFile/Excel/matrix.d.ts +1 -1
- package/lib/components/ExcelFile/ExcelFile/Excel/point-range.d.ts +1 -1
- package/lib/components/ExcelFile/ExcelFile/Excel/reducer.d.ts +5 -5
- package/lib/components/ExcelFile/ExcelFile/Excel/selection.d.ts +3 -3
- package/lib/components/ExcelFile/ExcelFile/Excel/types.d.ts +48 -11
- package/lib/components/ExcelFile/ExcelFile/Excel/use-dispatch.d.ts +1 -1
- package/lib/components/ExcelFile/ExcelFile/Excel/use-selector.d.ts +1 -1
- package/lib/components/ExcelFile/ExcelFile/Excel/util.d.ts +12 -11
- package/lib/components/ExcelFile/ExcelFile/ExcelFile.d.ts +0 -16
- package/lib/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelToolBar/ExcelToolBar.d.ts +0 -12
- package/lib/components/ExcelFile/Types.d.ts +49 -2
- package/lib/components/InputWithDropdown/InputWithDropdown.d.ts +1 -1
- package/lib/components/InputWithDropdown/types.d.ts +3 -1
- package/lib/components/MenuOption/MenuOption.d.ts +1 -1
- package/lib/components/MenuOption/types.d.ts +4 -0
- package/lib/components/Select/Select.d.ts +3 -2
- package/lib/components/Select/Select.stories.d.ts +1 -0
- package/lib/components/Select/components/Dropdown.d.ts +5 -0
- package/lib/components/Select/components/types.d.ts +18 -0
- package/lib/components/Select/types.d.ts +2 -42
- package/lib/components/Toastify/Toastify.d.ts +5 -4
- package/lib/components/Toastify/types.d.ts +1 -0
- package/lib/index.d.ts +75 -30
- package/lib/index.esm.js +1734 -1441
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +1734 -1440
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/lib/utils/getSequentialPayload/getSequentialPayload.d.ts +2 -0
- package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +10 -0
- package/lib/utils/getSequentialPayload/types.d.ts +30 -0
- package/package.json +1 -1
- package/src/assets/Themes/BaseTheme.scss +5 -0
- package/src/assets/Themes/DarkTheme.scss +2 -0
- package/src/assets/icons/maximize_icon.svg +5 -0
- package/src/assets/styles/_fonts.scss +1 -1
- package/src/components/AllProjectsDropdown/AllProjectsDropdown.scss +15 -6
- package/src/components/AllProjectsDropdown/AllProjectsDropdown.stories.tsx +0 -5
- package/src/components/AllProjectsDropdown/AllProjectsDropdown.tsx +20 -10
- package/src/components/Drawer/Drawer.scss +1 -0
- package/src/components/Drawer/Types.ts +24 -13
- package/src/components/Excel/ExcelFile/ExcelFile.scss +62 -0
- package/src/components/Excel/ExcelFile/ExcelFile.tsx +312 -0
- package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/ActiveCell.tsx +2 -2
- package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/Cell.tsx +3 -3
- package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/ColumnIndicator.tsx +4 -4
- package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/CornerIndicator.tsx +2 -2
- package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/DataEditor.tsx +1 -1
- package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/DataViewer.tsx +3 -3
- package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/FloatingRect.tsx +4 -4
- package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/RowIndicator.tsx +4 -4
- package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/Spreadsheet.scss +26 -24
- package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/Spreadsheet.tsx +13 -45
- package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/Table.tsx +1 -1
- package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/actions.ts +88 -20
- package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +495 -0
- package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +758 -0
- package/src/components/{ExcelFile → Excel}/ExcelFile.stories.tsx +45 -0
- package/src/components/Excel/ExcelToolBar/ExcelToolBar.scss +36 -0
- package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +346 -0
- package/src/components/Form/Form.scss +54 -35
- package/src/components/Form/Form.stories.tsx +264 -225
- package/src/components/Icon/Icons.scss +4 -0
- package/src/components/Icon/iconList.ts +2 -1
- package/src/components/Input/Input.tsx +0 -1
- package/src/components/InputWithDropdown/InputWithDropdown.scss +30 -1
- package/src/components/InputWithDropdown/InputWithDropdown.tsx +45 -16
- package/src/components/InputWithDropdown/types.ts +5 -1
- package/src/components/MenuOption/MenuOption.scss +0 -1
- package/src/components/MenuOption/MenuOption.stories.tsx +3 -0
- package/src/components/MenuOption/MenuOption.tsx +5 -4
- package/src/components/MenuOption/types.ts +4 -0
- package/src/components/MultiSelect/MultiSelect.scss +5 -1
- package/src/components/MultiSelect/MultiSelect.stories.tsx +17 -13
- package/src/components/MultiSelect/MultiSelect.tsx +27 -14
- package/src/components/Select/Select.scss +121 -188
- package/src/components/Select/Select.stories.tsx +164 -18
- package/src/components/Select/Select.tsx +142 -290
- package/src/components/Select/components/Dropdown.scss +50 -0
- package/src/components/Select/components/Dropdown.tsx +94 -0
- package/src/components/Select/components/types.ts +20 -0
- package/src/components/Select/types.ts +15 -39
- package/src/components/Table/Table.scss +6 -5
- package/src/components/Table/Table.stories.tsx +0 -9
- package/src/components/Table/Table.tsx +2 -2
- package/src/components/TableTree/TableTree.scss +1 -1
- package/src/components/TableTree/TableTree.tsx +3 -1
- package/src/components/Toastify/Toastify.stories.tsx +29 -10
- package/src/components/Toastify/Toastify.tsx +42 -16
- package/src/components/Toastify/types.ts +2 -0
- package/src/index.ts +4 -2
- package/src/utils/getSelectOptionValue/getSelectOptionValue.ts +1 -1
- package/src/utils/getSequentialPayload/getSequentialPayload.stories.tsx +75 -0
- package/src/utils/getSequentialPayload/getSequentialPayload.ts +29 -0
- package/src/utils/getSequentialPayload/types.ts +35 -0
- package/src/components/ExcelFile/ExcelFile/Excel/reducer.ts +0 -952
- package/src/components/ExcelFile/ExcelFile/ExcelFile.scss +0 -24
- package/src/components/ExcelFile/ExcelFile/ExcelFile.tsx +0 -162
- package/src/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.scss +0 -16
- package/src/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.tsx +0 -68
- package/src/components/ExcelFile/ExcelToolBar/ExcelToolBar.scss +0 -19
- package/src/components/ExcelFile/ExcelToolBar/ExcelToolBar.tsx +0 -291
- package/src/fonts/Montserrat/Montserrat-Medium.ttf +0 -0
- package/src/fonts/Montserrat/Montserrat-Regular.ttf +0 -0
- package/src/fonts/Montserrat/Montserrat-SemiBold.ttf +0 -0
- package/src/fonts/Poppins/Poppins-Black.ttf +0 -0
- package/src/fonts/Poppins/Poppins-BlackItalic.ttf +0 -0
- package/src/fonts/Poppins/Poppins-BoldItalic.ttf +0 -0
- package/src/fonts/Poppins/Poppins-ExtraBold.ttf +0 -0
- package/src/fonts/Poppins/Poppins-ExtraBoldItalic.ttf +0 -0
- package/src/fonts/Poppins/Poppins-ExtraLight.ttf +0 -0
- package/src/fonts/Poppins/Poppins-ExtraLightItalic.ttf +0 -0
- package/src/fonts/Poppins/Poppins-Italic.ttf +0 -0
- package/src/fonts/Poppins/Poppins-Light.ttf +0 -0
- package/src/fonts/Poppins/Poppins-LightItalic.ttf +0 -0
- package/src/fonts/Poppins/Poppins-MediumItalic.ttf +0 -0
- package/src/fonts/Poppins/Poppins-SemiBoldItalic.ttf +0 -0
- package/src/fonts/Poppins/Poppins-Thin.ttf +0 -0
- package/src/fonts/Poppins/Poppins-ThinItalic.ttf +0 -0
- /package/lib/components/{ExcelFile → Excel}/ColorBarSelector/ColorBarSelector.d.ts +0 -0
- /package/src/components/{ExcelFile/ColorBarselector → Excel/ColorBarSelector}/ColorBarSelector.scss +0 -0
- /package/src/components/{ExcelFile/ColorBarselector → Excel/ColorBarSelector}/ColorBarSelector.tsx +0 -0
- /package/src/components/{ExcelFile → Excel}/ContextMenu/ContextMenu.scss +0 -0
- /package/src/components/{ExcelFile → Excel}/ContextMenu/ContextMenu.tsx +0 -0
- /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/Copied.tsx +0 -0
- /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/HeaderRow.tsx +0 -0
- /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/Row.tsx +0 -0
- /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/Selected.tsx +0 -0
- /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/areModelsEqual.ts +0 -0
- /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/context.ts +0 -0
- /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/engine/engine.ts +0 -0
- /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/engine/formula.ts +0 -0
- /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/engine/index.ts +0 -0
- /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/engine/point-graph.ts +0 -0
- /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/engine/point-hash.ts +0 -0
- /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/engine/point-set.ts +0 -0
- /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/index.ts +0 -0
- /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/matrix.ts +0 -0
- /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/point-range.ts +0 -0
- /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/point.ts +0 -0
- /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/selection.ts +0 -0
- /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/types.ts +0 -0
- /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/typings/fast-formula-parser.d.ts +0 -0
- /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/use-dispatch.ts +0 -0
- /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/use-selector.ts +0 -0
- /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/util.ts +0 -0
- /package/src/components/{ExcelFile → Excel}/Types.ts +0 -0
- /package/src/components/{ExcelFile → Excel}/index.ts +0 -0
@@ -1,250 +1,183 @@
|
|
1
1
|
@use '../../assets/styles/fonts';
|
2
2
|
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
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
|
18
|
-
|
12
|
+
@mixin select-state-style($color) {
|
13
|
+
border-color: $color;
|
19
14
|
|
20
|
-
|
15
|
+
.ff-select-label {
|
21
16
|
color: $color;
|
22
17
|
}
|
23
18
|
|
24
|
-
|
25
|
-
|
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
|
-
|
31
|
-
|
32
|
-
.ff-select-input {
|
33
|
-
cursor: pointer;
|
34
|
-
}
|
27
|
+
min-height: 24px;
|
28
|
+
min-width: 50px;
|
35
29
|
|
36
30
|
.ff-select {
|
37
|
-
|
38
|
-
|
39
|
-
|
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:
|
35
|
+
align-items: center;
|
36
|
+
justify-content: space-evenly;
|
45
37
|
position: relative;
|
38
|
+
box-sizing: border-box;
|
46
39
|
|
47
|
-
|
48
|
-
|
49
|
-
|
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
|
-
|
70
|
-
|
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
|
-
|
74
|
-
|
55
|
+
&__disabled {
|
56
|
+
cursor: not-allowed;
|
57
|
+
color: var(--ff-select-border-color);
|
75
58
|
}
|
59
|
+
}
|
76
60
|
|
77
|
-
|
78
|
-
|
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
|
-
|
82
|
-
|
69
|
+
.ff-select-arrow {
|
70
|
+
@include svg-path-style(var(--ff-select-border-color));
|
83
71
|
}
|
84
72
|
|
85
|
-
|
86
|
-
|
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
|
-
|
78
|
+
.ff-select-label {
|
115
79
|
@extend .fontSm;
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
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
|
-
|
127
|
-
|
128
|
-
|
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
|
-
|
133
|
-
|
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
|
-
|
137
|
-
@
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
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
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
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
|
-
|
167
|
-
|
168
|
-
border-color: transparent;
|
131
|
+
&__error {
|
132
|
+
border-color: var(--error_light);
|
169
133
|
|
170
|
-
|
171
|
-
|
134
|
+
&:hover {
|
135
|
+
border-color: var(--error_light);
|
172
136
|
|
173
|
-
|
174
|
-
|
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
|
-
|
186
|
-
|
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
|
-
|
192
|
-
border-color: var(--error-light);
|
193
|
-
|
148
|
+
&__focused {
|
194
149
|
&:hover {
|
195
|
-
|
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
|
-
|
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
|
-
|
217
|
-
|
218
|
-
|
219
|
-
|
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
|
-
|
228
|
-
|
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
|
-
|
240
|
-
|
241
|
-
z-index: 101;
|
172
|
+
&:hover {
|
173
|
+
border-color: transparent;
|
242
174
|
}
|
243
175
|
}
|
244
176
|
}
|
245
177
|
|
246
|
-
|
247
|
-
|
248
|
-
|
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
|
-
{
|
24
|
-
|
25
|
-
|
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
|
-
{
|
35
|
-
|
36
|
-
|
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
|
-
{
|
47
|
-
|
48
|
-
|
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: {
|
116
|
+
selectedOption: {
|
117
|
+
label: 'fire-flink-LIC4900-onPrem',
|
118
|
+
value: 'fire-flink-LIC4900-onPrem',
|
119
|
+
},
|
73
120
|
optionsList: [
|
74
|
-
{
|
75
|
-
|
76
|
-
|
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
|
-
{
|
85
|
-
|
86
|
-
|
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: '
|
91
|
-
value: '
|
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;
|