pixel-react 1.6.3 → 1.6.5

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 (163) hide show
  1. package/lib/assets/fonts/Poppins-Bold.ttf +0 -0
  2. package/lib/assets/fonts/Poppins-Medium.ttf +0 -0
  3. package/lib/assets/fonts/Poppins-Regular.ttf +0 -0
  4. package/lib/assets/fonts/Poppins-SemiBold.ttf +0 -0
  5. package/lib/components/AttachImage/AttachImage.d.ts +1 -6
  6. package/lib/components/AttachImage/types.d.ts +8 -0
  7. package/lib/components/CreateVariable/CreateVariableSlider.d.ts +5 -0
  8. package/lib/components/CreateVariable/index.d.ts +1 -0
  9. package/lib/components/CreateVariable/types.d.ts +56 -0
  10. package/lib/components/Drawer/Types.d.ts +13 -0
  11. package/lib/components/MiniModal/types.d.ts +7 -0
  12. package/lib/components/Select/components/types.d.ts +1 -0
  13. package/lib/components/Select/types.d.ts +2 -0
  14. package/lib/components/TableTree/TableTree copy.d.ts +25 -0
  15. package/lib/components/TableTree/types.d.ts +1 -1
  16. package/lib/index.d.ts +103 -2
  17. package/lib/index.esm.js +549 -308
  18. package/lib/index.esm.js.map +1 -1
  19. package/lib/index.js +549 -307
  20. package/lib/index.js.map +1 -1
  21. package/lib/tsconfig.tsbuildinfo +1 -1
  22. package/package.json +1 -1
  23. package/src/assets/icons/download_file_icon.svg +2 -9
  24. package/src/components/AttachImage/AttachImage.stories.tsx +2 -0
  25. package/src/components/AttachImage/AttachImage.tsx +5 -9
  26. package/src/components/AttachImage/types.ts +25 -18
  27. package/src/components/Charts/DonutChart/DonutChart.tsx +8 -3
  28. package/src/components/Charts/RadialChart/RadialChart.scss +4 -0
  29. package/src/components/Charts/RadialChart/RadialChart.tsx +51 -45
  30. package/src/components/CreateVariable/CreateVariableSlider.scss +18 -0
  31. package/src/components/CreateVariable/CreateVariableSlider.stories.tsx +66 -0
  32. package/src/components/CreateVariable/CreateVariableSlider.tsx +95 -0
  33. package/src/components/CreateVariable/index.ts +1 -0
  34. package/src/components/CreateVariable/types.ts +58 -0
  35. package/src/components/Drawer/Drawer.scss +1 -1
  36. package/src/components/Drawer/Drawer.stories.tsx +0 -1
  37. package/src/components/Drawer/Drawer.tsx +4 -1
  38. package/src/components/Drawer/Types.ts +13 -0
  39. package/src/components/MiniModal/MiniModal.scss +0 -4
  40. package/src/components/MiniModal/MiniModal.stories.tsx +3 -2
  41. package/src/components/MiniModal/MiniModal.tsx +28 -10
  42. package/src/components/MiniModal/types.ts +7 -0
  43. package/src/components/Select/Select.scss +16 -0
  44. package/src/components/Select/Select.stories.tsx +49 -0
  45. package/src/components/Select/Select.tsx +33 -7
  46. package/src/components/Select/components/Dropdown.scss +9 -0
  47. package/src/components/Select/components/Dropdown.tsx +20 -6
  48. package/src/components/Select/components/types.ts +1 -0
  49. package/src/components/Select/types.ts +12 -2
  50. package/src/components/TableTree/TableTree.tsx +10 -4
  51. package/src/components/TableTree/types.ts +1 -1
  52. package/src/index.ts +2 -0
  53. package/lib/StyleGuide/ColorPalette/ColorPalette.stories.d.ts +0 -6
  54. package/lib/StyleGuide/Typography/Typography.stories.d.ts +0 -6
  55. package/lib/components/Accordion/Accordion.stories.d.ts +0 -6
  56. package/lib/components/AddResourceButton/AddButton.stories.d.ts +0 -8
  57. package/lib/components/AllProjectsDropdown/AllProjectsDropdown.stories.d.ts +0 -7
  58. package/lib/components/AppHeader/AppHeader.stories.d.ts +0 -7
  59. package/lib/components/AttachmentButton/AttachmentButton.stories.d.ts +0 -9
  60. package/lib/components/Avatar/Avatar.stories.d.ts +0 -10
  61. package/lib/components/Button/Button.stories.d.ts +0 -13
  62. package/lib/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.d.ts +0 -7
  63. package/lib/components/Charts/DonutChart/DonutChart.stories.d.ts +0 -6
  64. package/lib/components/Charts/PieChart/PieChart.stories.d.ts +0 -7
  65. package/lib/components/Charts/RadialChart/RadialChart.stories.d.ts +0 -6
  66. package/lib/components/Checkbox/Checkbox.stories.d.ts +0 -8
  67. package/lib/components/Chip/Chip.stories.d.ts +0 -14
  68. package/lib/components/DatePicker/DatePicker.stories.d.ts +0 -9
  69. package/lib/components/DragAndDrop/DragAndDrop.stories.d.ts +0 -6
  70. package/lib/components/Drawer/Drawer.stories.d.ts +0 -12
  71. package/lib/components/ExcelFile/ColorBarselector/ColorBarSelector.d.ts +0 -8
  72. package/lib/components/ExcelFile/ExcelFile/Excel/ActiveCell.d.ts +0 -7
  73. package/lib/components/ExcelFile/ExcelFile/Excel/Cell.d.ts +0 -4
  74. package/lib/components/ExcelFile/ExcelFile/Excel/ColumnIndicator.d.ts +0 -5
  75. package/lib/components/ExcelFile/ExcelFile/Excel/Copied.d.ts +0 -3
  76. package/lib/components/ExcelFile/ExcelFile/Excel/CornerIndicator.d.ts +0 -5
  77. package/lib/components/ExcelFile/ExcelFile/Excel/DataEditor.d.ts +0 -5
  78. package/lib/components/ExcelFile/ExcelFile/Excel/DataViewer.d.ts +0 -8
  79. package/lib/components/ExcelFile/ExcelFile/Excel/FloatingRect.d.ts +0 -10
  80. package/lib/components/ExcelFile/ExcelFile/Excel/HeaderRow.d.ts +0 -3
  81. package/lib/components/ExcelFile/ExcelFile/Excel/Row.d.ts +0 -3
  82. package/lib/components/ExcelFile/ExcelFile/Excel/RowIndicator.d.ts +0 -5
  83. package/lib/components/ExcelFile/ExcelFile/Excel/Selected.d.ts +0 -3
  84. package/lib/components/ExcelFile/ExcelFile/Excel/Spreadsheet.d.ts +0 -80
  85. package/lib/components/ExcelFile/ExcelFile/Excel/Table.d.ts +0 -3
  86. package/lib/components/ExcelFile/ExcelFile/Excel/actions.d.ts +0 -174
  87. package/lib/components/ExcelFile/ExcelFile/Excel/areModelsEqual.d.ts +0 -1
  88. package/lib/components/ExcelFile/ExcelFile/Excel/context.d.ts +0 -8
  89. package/lib/components/ExcelFile/ExcelFile/Excel/engine/engine.d.ts +0 -22
  90. package/lib/components/ExcelFile/ExcelFile/Excel/engine/formula.d.ts +0 -17
  91. package/lib/components/ExcelFile/ExcelFile/Excel/engine/index.d.ts +0 -2
  92. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-graph.d.ts +0 -21
  93. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-hash.d.ts +0 -3
  94. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-set.d.ts +0 -24
  95. package/lib/components/ExcelFile/ExcelFile/Excel/index.d.ts +0 -13
  96. package/lib/components/ExcelFile/ExcelFile/Excel/matrix.d.ts +0 -67
  97. package/lib/components/ExcelFile/ExcelFile/Excel/point-range.d.ts +0 -22
  98. package/lib/components/ExcelFile/ExcelFile/Excel/point.d.ts +0 -11
  99. package/lib/components/ExcelFile/ExcelFile/Excel/reducer.d.ts +0 -27
  100. package/lib/components/ExcelFile/ExcelFile/Excel/selection.d.ts +0 -95
  101. package/lib/components/ExcelFile/ExcelFile/Excel/types.d.ts +0 -178
  102. package/lib/components/ExcelFile/ExcelFile/Excel/use-dispatch.d.ts +0 -3
  103. package/lib/components/ExcelFile/ExcelFile/Excel/use-selector.d.ts +0 -3
  104. package/lib/components/ExcelFile/ExcelFile/Excel/util.d.ts +0 -44
  105. package/lib/components/ExcelFile/ExcelFile/ExcelFile.d.ts +0 -19
  106. package/lib/components/ExcelFile/ExcelFile.stories.d.ts +0 -6
  107. package/lib/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.d.ts +0 -12
  108. package/lib/components/ExcelFile/ExcelToolBar/ExcelToolBar.d.ts +0 -15
  109. package/lib/components/ExcelFile/Types.d.ts +0 -129
  110. package/lib/components/ExcelFile/index.d.ts +0 -1
  111. package/lib/components/ExpandableMenu/ExpandableMenu.stories.d.ts +0 -7
  112. package/lib/components/FF_Captcha/captcha.stories.d.ts +0 -8
  113. package/lib/components/FileDropzone/FileDropzone.stories.d.ts +0 -8
  114. package/lib/components/Form/Form.stories.d.ts +0 -7
  115. package/lib/components/GridLayout/GridLayout.stories.d.ts +0 -8
  116. package/lib/components/HighlightText/HighlightText.stories.d.ts +0 -6
  117. package/lib/components/Icon/Icon.stories.d.ts +0 -8
  118. package/lib/components/IconButton/IconButton.stories.d.ts +0 -7
  119. package/lib/components/IconRadioGroup/IconRadioGroup.stories.d.ts +0 -7
  120. package/lib/components/Input/Input.stories.d.ts +0 -9
  121. package/lib/components/InputWithDropdown/InputWithDropdown.stories.d.ts +0 -9
  122. package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +0 -11
  123. package/lib/components/LazyLoad/LazyLoad.stories.d.ts +0 -6
  124. package/lib/components/MachineInputField/MachineInputField.stories.d.ts +0 -6
  125. package/lib/components/MenuOption/MenuOption.stories.d.ts +0 -16
  126. package/lib/components/MiniModal/MiniModal.stories.d.ts +0 -10
  127. package/lib/components/Modal/Modal.stories.d.ts +0 -7
  128. package/lib/components/ModulesChip/ModuleChip.stories.d.ts +0 -6
  129. package/lib/components/MultiSelect/MultiSelect.stories.d.ts +0 -10
  130. package/lib/components/NLPInput/NlpInput.stories.d.ts +0 -7
  131. package/lib/components/Paper/Paper.stories.d.ts +0 -11
  132. package/lib/components/RadioButton/RadioButton.stories.d.ts +0 -10
  133. package/lib/components/RadioGroup/RadioGroup.stories.d.ts +0 -9
  134. package/lib/components/Search/Search.stories.d.ts +0 -6
  135. package/lib/components/Select/Select.stories.d.ts +0 -13
  136. package/lib/components/Select/components/Dropdown/Dropdown.d.ts +0 -4
  137. package/lib/components/Select/components/Dropdown/dropdownTypes.d.ts +0 -17
  138. package/lib/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.d.ts +0 -6
  139. package/lib/components/StateDropdown/StateDropdown.stories.d.ts +0 -10
  140. package/lib/components/StatusButton/StatusButton.stories.d.ts +0 -14
  141. package/lib/components/Table/Table.stories.d.ts +0 -13
  142. package/lib/components/TableTree/TableTree.stories.d.ts +0 -7
  143. package/lib/components/Tabs/Tabs.stories.d.ts +0 -9
  144. package/lib/components/TextArea/Textarea.stories.d.ts +0 -9
  145. package/lib/components/Toast/Toast.stories.d.ts +0 -6
  146. package/lib/components/Toastify/Toastify.stories.d.ts +0 -6
  147. package/lib/components/Toggle/Toggle.stories.d.ts +0 -12
  148. package/lib/components/Tooltip/Tooltip.stories.d.ts +0 -15
  149. package/lib/components/Typography/Typography.stories.d.ts +0 -10
  150. package/lib/components/VariableInput/VariableInput.stories.d.ts +0 -6
  151. package/lib/utils/checkEmpty/checkEmpty.stories.d.ts +0 -6
  152. package/lib/utils/compareArrays/compareArrays.stories.d.ts +0 -6
  153. package/lib/utils/compareObjects/compareObjects.stories.d.ts +0 -6
  154. package/lib/utils/debounce/debounce.stories.d.ts +0 -6
  155. package/lib/utils/ffID/ffID.stories.d.ts +0 -6
  156. package/lib/utils/find/findAndInsert.d.ts +0 -7
  157. package/lib/utils/find/findAndInsert.stories.d.ts +0 -7
  158. package/lib/utils/findAndInsert/findAndInsert.stories.d.ts +0 -7
  159. package/lib/utils/getEncryptedData/getEncryptedData.stories.d.ts +0 -6
  160. package/lib/utils/getExtension/getExtension.stories.d.ts +0 -6
  161. package/lib/utils/throttle/throttle.stories.d.ts +0 -6
  162. package/lib/utils/truncateText/truncateText.stories.d.ts +0 -6
  163. /package/lib/components/{ExcelFile → Excel}/ContextMenu/ContextMenu.d.ts +0 -0
@@ -36,6 +36,9 @@ const Drawer: FC<DrawerProps> = ({
36
36
  zIndex = 999,
37
37
  secondLayerZIndex = false,
38
38
  top,
39
+ height,
40
+ width,
41
+ right = 0,
39
42
  }: DrawerProps) => {
40
43
  const [isExpanded, setIsExpanded] = useState(false);
41
44
 
@@ -85,7 +88,7 @@ const Drawer: FC<DrawerProps> = ({
85
88
  className={classNames('ff-drawer', `ff-drawer--${drawerSize}`, {
86
89
  'ff-drawer--open': isOpen,
87
90
  })}
88
- style={{ zIndex, top }}
91
+ style={{ zIndex, top, height, width, right }}
89
92
  >
90
93
  {showHeader && (
91
94
  <div
@@ -141,4 +141,17 @@ export interface DrawerProps {
141
141
  * Custom top for the drawer
142
142
  */
143
143
  top?: string;
144
+ /**
145
+ * Height of the drawer
146
+ */
147
+ height?: string;
148
+ /**
149
+ *
150
+ * width of the drawer
151
+ */
152
+ width?: string;
153
+ /**
154
+ * Position from right
155
+ */
156
+ right?: string | number;
144
157
  }
@@ -35,7 +35,6 @@
35
35
  &.popover-arrow-top {
36
36
  bottom: 100%;
37
37
  left: 30px;
38
- border-width: 0 10px 10px 10px;
39
38
  padding: 0 3px 0 0;
40
39
  border-color: transparent transparent var(--ff-mini-modal-border)
41
40
  transparent;
@@ -46,7 +45,6 @@
46
45
  }
47
46
  &.popover-arrow-left {
48
47
  left: -15px; //align the arrow with modal for the right side modal
49
- border-width: 10px 10px 10px 0;
50
48
  border-color: transparent var(--ff-mini-modal-border) transparent
51
49
  transparent;
52
50
  filter: drop-shadow(-1px 0 1px var(--ff-mini-modal-arrow-shadow));
@@ -58,7 +56,6 @@
58
56
  &.popover-arrow-bottom {
59
57
  top: 100%;
60
58
  left: 30px;
61
- border-width: 10px 10px 0 10px;
62
59
  border-color: var(--ff-mini-modal-border) transparent transparent
63
60
  transparent; // Bottom part of the arrow with the correct color
64
61
  filter: drop-shadow(0 2px 1px var(--ff-mini-modal-arrow-shadow));
@@ -70,7 +67,6 @@
70
67
  &.popover-arrow-right {
71
68
  right: -10px;
72
69
  top: 66px;
73
- border-width: 10px 0 10px 10px;
74
70
  border-color: transparent transparent transparent
75
71
  var(--ff-mini-modal-border);
76
72
  filter: drop-shadow(2px 0 1px var(--ff-mini-modal-arrow-shadow));
@@ -55,7 +55,7 @@ const BasicModalComponent = () => {
55
55
  isOverlay: true,
56
56
  zIndexOverlay: 99,
57
57
  }}
58
- modalProperties={{ width: 300, height: 180 }}
58
+ modalProperties={{ width: 300, height: 180, left: 180, top: 250 }}
59
59
  headerProps={
60
60
  <>
61
61
  <Typography as="p">Modal 1</Typography>
@@ -271,7 +271,8 @@ export const CustomModalWithArrow = () => {
271
271
  isOverlay: true,
272
272
  zIndexOverlay: 99,
273
273
  }}
274
- modalProperties={{ width: 300, height: 250 }}
274
+ modalProperties={{ width: 300, height: 250, left: 180 }}
275
+ arrowProperties={{ left: 270, size: 6 }}
275
276
  arrowZIndex={1000}
276
277
  headerProps={
277
278
  <>
@@ -31,6 +31,7 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
31
31
  extraLeftSpace,
32
32
  isIconModel,
33
33
  wrapperProperties,
34
+ arrowProperties,
34
35
  arrowZIndex,
35
36
  overlay,
36
37
  outSideClick,
@@ -43,7 +44,21 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
43
44
  });
44
45
  const [isVisible, setIsVisible] = useState(false);
45
46
  const modalRef = useRef<HTMLDivElement>(null);
47
+ const {
48
+ width: modalWidth,
49
+ height: modalHeight,
50
+ borderRadius: modalBorderRadius = 4,
51
+ zIndex: modalZIndex = 99,
52
+ boxShadow: modalBoxShadow,
53
+ left: modalLeft,
54
+ top: modalTop,
55
+ } = modalProperties || {};
46
56
 
57
+ const {
58
+ left: popOverLeft,
59
+ top: popOverTop,
60
+ size: popOverSize = 10,
61
+ } = arrowProperties || {};
47
62
  // Function to calculate available space
48
63
  const getAvailableSpace = (rect: Rect): AvailableSpace => {
49
64
  const { top, left, bottom, right } = rect;
@@ -196,14 +211,6 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
196
211
  };
197
212
  }, [calculatePosition]);
198
213
 
199
- const {
200
- width: modalWidth,
201
- height: modalHeight,
202
- borderRadius: modalBorderRadius = 4,
203
- zIndex: modalZIndex = 99,
204
- boxShadow: modalBoxShadow,
205
- } = modalProperties || {};
206
-
207
214
  const {
208
215
  width: wrapperWidth = 35,
209
216
  zIndex: wrapperZIndex = 101,
@@ -234,8 +241,8 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
234
241
  animatedModal: isAnimated,
235
242
  })}
236
243
  style={{
237
- top: `${calculatedModalTop}px`,
238
- left: `${calculatedModalLeft}px`,
244
+ top: `${modalTop ?? calculatedModalTop}px`,
245
+ left: `${modalLeft ?? calculatedModalLeft}px`,
239
246
  }}
240
247
  >
241
248
  {isPopOver && (
@@ -251,6 +258,17 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
251
258
  } ${getArrowClassName()}`}
252
259
  style={{
253
260
  zIndex: `${arrowZIndex}`,
261
+ top: `${popOverTop && popOverTop}px`,
262
+ left: `${popOverLeft && popOverLeft}px`,
263
+ borderWidth: `${
264
+ modalPosition === 'right'
265
+ ? `${popOverSize}px ${popOverSize}px ${popOverSize}px 0`
266
+ : modalPosition === 'top'
267
+ ? `${popOverSize}px ${popOverSize}px 0 ${popOverSize}px`
268
+ : modalPosition === 'left'
269
+ ? `${popOverSize}px 0 ${popOverSize}px ${popOverSize}px`
270
+ : `0 ${popOverSize}px ${popOverSize}px ${popOverSize}px`
271
+ }`,
254
272
  }}
255
273
  />
256
274
  )}
@@ -5,6 +5,8 @@ interface ModalDimensions {
5
5
  borderRadius?: number;
6
6
  zIndex?: number;
7
7
  boxShadow?: string;
8
+ left?: number;
9
+ top?: number;
8
10
  }
9
11
  export interface MiniEditModalProps {
10
12
  /**
@@ -94,6 +96,11 @@ export interface MiniEditModalProps {
94
96
  boxShadow?: string;
95
97
  };
96
98
  arrowZIndex?: number;
99
+ arrowProperties?: {
100
+ left?: number;
101
+ top?: number;
102
+ size?: number;
103
+ };
97
104
  overlay?: {
98
105
  isOverlay?: boolean;
99
106
  zIndexOverlay?: number;
@@ -51,6 +51,10 @@
51
51
  }
52
52
  }
53
53
 
54
+ .ff-select-input-icon {
55
+ margin-left: 6px;
56
+ }
57
+
54
58
  .ff-select-inputField {
55
59
  @extend .fontSm;
56
60
  width: calc(100% - 8px);
@@ -70,6 +74,11 @@
70
74
  &__readonly {
71
75
  cursor: pointer;
72
76
  }
77
+
78
+ &__icon {
79
+ width: calc(100% - 36px);
80
+ padding: 4;
81
+ }
73
82
  }
74
83
 
75
84
  .ff-select-arrows-wrapper {
@@ -99,12 +108,17 @@
99
108
  transition: 0.18s ease all;
100
109
  border-radius: 4px;
101
110
 
111
+ &__icon {
112
+ left: 24px;
113
+ }
114
+
102
115
  &__active {
103
116
  transform: translateY(-16px);
104
117
  transition: 0.18s ease all;
105
118
  background-color: var(--ff-select-background-color);
106
119
  padding: 0 2px;
107
120
  z-index: 100000;
121
+ left: 8px;
108
122
  }
109
123
  }
110
124
 
@@ -124,6 +138,7 @@
124
138
  padding: 0 2px;
125
139
  line-height: 18px;
126
140
  z-index: 100000;
141
+ left: 8px;
127
142
  }
128
143
 
129
144
  .ff-select-arrows-wrapper {
@@ -178,6 +193,7 @@
178
193
  background-color: var(--ff-select-background-color);
179
194
  padding: 0 2px;
180
195
  line-height: 18px;
196
+ left: 8px;
181
197
  }
182
198
  }
183
199
 
@@ -3,6 +3,7 @@ import Select from './Select';
3
3
  import React,{ useState } from 'react';
4
4
  import { Option } from './types';
5
5
  import RadioGroup from '../RadioGroup';
6
+ import React from 'react';
6
7
 
7
8
  const meta: Meta<typeof Select> = {
8
9
  title: 'Components/Select',
@@ -303,4 +304,52 @@ export const updateOptionFromOutside: Story = {
303
304
  },
304
305
  };
305
306
 
307
+ export const IconOptionSelection: Story = {
308
+ render: () => {
309
+ const optionsList = [
310
+ {
311
+ label: 'fire-flink-LIC4900-onPrem',
312
+ value: 'fire-flink-LIC4900-onPrem',
313
+ iconName: 'local',
314
+ },
315
+ {
316
+ label: 'fire-flink-LIC3179',
317
+ value: 'fire-flink-LIC3179',
318
+ iconName: 'chrome_icon',
319
+ },
320
+ {
321
+ label: 'fire-flink-LIC4937',
322
+ value: 'fire-flink-LIC4937',
323
+ iconName: 'mac_icon',
324
+ },
325
+ {
326
+ label: 'fire-flink-LIC4999',
327
+ value: 'fire-flink-LIC4999',
328
+ iconName: 'web_icon',
329
+ },
330
+ ];
331
+
332
+ const [selectedOption, setSelectedOption] = useState<Option>({
333
+ label: 'fire-flink-LIC3179',
334
+ value: 'fire-flink-LIC3179',
335
+ iconName: 'local',
336
+ });
337
+
338
+ const handleChange = (option: Option) => {
339
+ setSelectedOption(option);
340
+ };
341
+
342
+ return (
343
+ <Select
344
+ label="Option"
345
+ optionsList={optionsList}
346
+ selectedOption={selectedOption}
347
+ onChange={handleChange}
348
+ showIcon={true}
349
+ width={200}
350
+ />
351
+ );
352
+ },
353
+ };
354
+
306
355
  export default meta;
@@ -30,11 +30,16 @@ const Select: FC<SelectProps> = ({
30
30
  width = '100%',
31
31
  onBlur = () => {},
32
32
  disableInput = false,
33
+ showIcon = false,
33
34
  }) => {
34
35
  const selectWidth = typeof width === 'number' ? `${width}px` : width;
35
36
 
36
37
  const [showDropdownOptions, setShowDropdownOptions] = useState(false);
37
- const [searchedOption, setSearchedOption] = useState<any>('');
38
+ const [searchedOption, setSearchedOption] = useState<any>({
39
+ searchedText: '',
40
+ searchedIcon: '',
41
+ });
42
+ const { searchedText, searchedIcon } = searchedOption;
38
43
  const [selectOptionList, setSelectOptionList] = useState<Option[] | []>([]);
39
44
  const [dropdownPosition, setDropdownPosition] = useState<DrowdownPosition>({
40
45
  positionX: 0,
@@ -52,7 +57,10 @@ const Select: FC<SelectProps> = ({
52
57
 
53
58
  const handleIconClick = () => {
54
59
  setShowDropdownOptions(!showDropdownOptions);
55
- setSearchedOption(getValue(selectedOption, valueAccessor));
60
+ setSearchedOption({
61
+ ...searchedOption,
62
+ searchedText: getValue(selectedOption, valueAccessor),
63
+ });
56
64
  setSelectOptionList(optionsList);
57
65
  if (!showDropdownOptions && inputRef.current) {
58
66
  inputRef.current.focus();
@@ -71,7 +79,10 @@ const Select: FC<SelectProps> = ({
71
79
  });
72
80
 
73
81
  setSelectOptionList(filteredOptions);
74
- setSearchedOption(value);
82
+ setSearchedOption({
83
+ ...searchedOption,
84
+ searchedText: value,
85
+ });
75
86
  };
76
87
 
77
88
  const onSelectUpdatePosition = () => {
@@ -105,7 +116,10 @@ const Select: FC<SelectProps> = ({
105
116
  fromBottom: 0,
106
117
  width: 0,
107
118
  });
108
- setSearchedOption(getValue(selectedOption, valueAccessor));
119
+ setSearchedOption({
120
+ searchedText: getValue(selectedOption, valueAccessor),
121
+ searchedIcon: selectedOption.iconName,
122
+ });
109
123
  setSelectOptionList(optionsList);
110
124
  onBlur();
111
125
  };
@@ -113,7 +127,10 @@ const Select: FC<SelectProps> = ({
113
127
  const onSelectOptionSelector = (option: Option): void => {
114
128
  if (disabled) return;
115
129
  onSelectBlur();
116
- setSearchedOption(getValue(option, valueAccessor));
130
+ setSearchedOption({
131
+ searchedText: getValue(selectedOption, valueAccessor),
132
+ searchedIcon: selectedOption.iconName,
133
+ });
117
134
  if (onChange) {
118
135
  onChange(option);
119
136
  }
@@ -142,7 +159,10 @@ const Select: FC<SelectProps> = ({
142
159
  }, [showDropdownOptions]);
143
160
 
144
161
  useEffect(() => {
145
- setSearchedOption(getValue(selectedOption, valueAccessor));
162
+ setSearchedOption({
163
+ searchedText: getValue(selectedOption, valueAccessor),
164
+ searchedIcon: selectedOption.iconName,
165
+ });
146
166
  }, [selectedOption]);
147
167
 
148
168
  useEffect(() => {
@@ -165,6 +185,9 @@ const Select: FC<SelectProps> = ({
165
185
  'ff-select__no_border': !showBorder,
166
186
  })}
167
187
  >
188
+ {showIcon && (
189
+ <Icon name={searchedIcon} className="ff-select-input-icon" />
190
+ )}
168
191
  <input
169
192
  type="text"
170
193
  ref={inputRef}
@@ -172,9 +195,10 @@ const Select: FC<SelectProps> = ({
172
195
  className={classNames('ff-select-inputField', {
173
196
  'ff-select-inputField__disabled': disabled,
174
197
  'ff-select-inputField__readonly': disableInput,
198
+ 'ff-select-inputField__icon': showIcon,
175
199
  })}
176
200
  onFocus={handleFocus}
177
- value={searchedOption}
201
+ value={searchedText}
178
202
  autoCorrect="off"
179
203
  autoComplete="off"
180
204
  spellCheck="false"
@@ -203,6 +227,7 @@ const Select: FC<SelectProps> = ({
203
227
  <Typography
204
228
  as="span"
205
229
  className={classNames('ff-select-labels', {
230
+ 'ff-select-labels__icon': showIcon,
206
231
  'ff-select-labels__active': searchedOption,
207
232
  })}
208
233
  fontSize={searchedOption || showDropdownOptions ? 8 : 12}
@@ -240,6 +265,7 @@ const Select: FC<SelectProps> = ({
240
265
  onSelectOptionSelector={onSelectOptionSelector}
241
266
  heightFromTop={height}
242
267
  selectedOption={searchedOption}
268
+ showIcon={showIcon}
243
269
  />,
244
270
  document.body
245
271
  )}
@@ -35,6 +35,15 @@
35
35
  text-overflow: ellipsis;
36
36
  overflow: hidden;
37
37
 
38
+ .ff-select-dropdown-icon-container {
39
+ display: flex;
40
+ align-items: center;
41
+
42
+ &__icon {
43
+ margin-right: 4px;
44
+ }
45
+ }
46
+
38
47
  &__selected,
39
48
  &:hover {
40
49
  background-color: var(--ff-select-option-hover-color);
@@ -11,6 +11,7 @@ import {
11
11
  getValue,
12
12
  } from '../../../utils/getSelectOptionValue/getSelectOptionValue';
13
13
  import useClickOutside from '../../../hooks/useClickOutside';
14
+ import Icon from '../../Icon';
14
15
 
15
16
  const Dropdown: FC<DropdownProps> = ({
16
17
  options = [],
@@ -24,6 +25,7 @@ const Dropdown: FC<DropdownProps> = ({
24
25
  heightFromTop,
25
26
  selectedOption,
26
27
  valueAccessor,
28
+ showIcon = false,
27
29
  }) => {
28
30
  const themeContext = useContext(ThemeContext);
29
31
  const currentTheme = themeContext?.currentTheme;
@@ -51,21 +53,21 @@ const Dropdown: FC<DropdownProps> = ({
51
53
  return {
52
54
  left: positionX,
53
55
  top: positionY + heightFromTop,
54
- width: width + 30,
56
+ width: showIcon ? width + 56 : width + 30,
55
57
  zIndex: optionZIndex,
56
- marginLeft: '-2px',
58
+ marginLeft: showIcon ? '-29px' : '-2px',
57
59
  };
58
60
  }
59
61
  return {
60
62
  zIndex: optionZIndex,
61
63
  left: positionX,
62
- width: width + 30,
64
+ width: showIcon ? width + 56 : width + 30,
63
65
  top: positionY - selectInputHeight - dropdownContainerHeight + 4 * margin,
64
- marginLeft: '-2px',
66
+ marginLeft: showIcon ? '-29px' : '-2px',
65
67
  };
66
68
  };
67
69
 
68
- const getOptionLabel = (label: any) => {
70
+ const getOptionLabel = (label: any, icon: string) => {
69
71
  if (React.isValidElement(label)) {
70
72
  return label;
71
73
  }
@@ -74,7 +76,16 @@ const Dropdown: FC<DropdownProps> = ({
74
76
  as="div"
75
77
  lineHeight="30px"
76
78
  color="var(--ff-select-text-color)"
79
+ className={classNames({
80
+ 'ff-select-dropdown-icon-container': showIcon,
81
+ })}
77
82
  >
83
+ {showIcon && (
84
+ <Icon
85
+ name={icon}
86
+ className="ff-select-dropdown-icon-container__icon"
87
+ />
88
+ )}
78
89
  {label}
79
90
  </Typography>
80
91
  );
@@ -104,7 +115,10 @@ const Dropdown: FC<DropdownProps> = ({
104
115
  onSelectOptionSelector(option);
105
116
  }}
106
117
  >
107
- {getOptionLabel(getLabel(option, labelAccessor))}
118
+ {getOptionLabel(
119
+ getLabel(option, labelAccessor),
120
+ 'iconName' in option && option['iconName']
121
+ )}
108
122
  </div>
109
123
  ))
110
124
  ) : (
@@ -13,6 +13,7 @@ export interface DropdownProps {
13
13
  selectArrowRef?: RefObject<HTMLDivElement>;
14
14
  heightFromTop: number;
15
15
  selectedOption?: Option;
16
+ showIcon?: boolean;
16
17
  }
17
18
 
18
19
  export const dropdownDefaultCSSData = {
@@ -95,9 +95,19 @@ export interface SelectProps {
95
95
  onBlur?: () => void;
96
96
 
97
97
  /*
98
- * Disable the select component input
99
- */
98
+ * Disable the select component input
99
+ */
100
100
  disableInput?: boolean;
101
+
102
+ /*
103
+ * Provide the icon for the select
104
+ */
105
+ showIcon?: boolean;
106
+
107
+ /*
108
+ * Provide the icon name for the select
109
+ */
110
+ iconName?: string;
101
111
  }
102
112
 
103
113
  export interface DrowdownPosition {
@@ -4,7 +4,13 @@ import { prepareData } from '../../utils/TableCell/TableCell';
4
4
  import Arrow from '../../assets/icons/arrows_down_icon.svg?react';
5
5
  import Checkbox from '../Checkbox';
6
6
  import RadioButton from '../RadioButton';
7
- import { TableBodyProps, TableCellProps, TableHeadProps, TableRowProps, TreeTableProps } from './types';
7
+ import {
8
+ TableBodyProps,
9
+ TableCellProps,
10
+ TableHeadProps,
11
+ TableRowProps,
12
+ TreeTableProps,
13
+ } from './types';
8
14
 
9
15
  // Helper to render spaces for levels
10
16
  const renderSpaces = (level: number) =>
@@ -185,7 +191,7 @@ const TreeTable: React.FC<TreeTableProps> = ({
185
191
  }) => {
186
192
  const handleToggleExpand = useCallback(
187
193
  (node: any) => onExpand?.(true, node?.id),
188
- [ onExpand]
194
+ [onExpand]
189
195
  );
190
196
 
191
197
  const handleCheckBoxChange = useCallback(
@@ -193,7 +199,7 @@ const TreeTable: React.FC<TreeTableProps> = ({
193
199
  const nodeId = node.id;
194
200
 
195
201
  if (type === 'radio') {
196
- onChange?.([nodeId]);
202
+ onChange?.('true', [nodeId]);
197
203
  } else {
198
204
  let updatedSelected = [...selected];
199
205
 
@@ -207,7 +213,7 @@ const TreeTable: React.FC<TreeTableProps> = ({
207
213
  );
208
214
  }
209
215
 
210
- onChange?.(updatedSelected);
216
+ onChange?.('true', updatedSelected);
211
217
  }
212
218
  },
213
219
  [selected, treeData, onChange]
@@ -61,7 +61,7 @@ export interface TreeTableProps {
61
61
  columnsData: Column[];
62
62
  selected?: string[];
63
63
  select?: 'radio' | 'checkbox' | 'none';
64
- onChange?: (nodes: string[]) => void;
64
+ onChange?: (e: any, node: string[]) => void;
65
65
  onClick?: (e: React.MouseEvent<HTMLDivElement>, row: TreeNode) => void;
66
66
  onExpand?: (_isExpanded: boolean, node: string) => void;
67
67
  onPagination?: (_direction: string) => void;
package/src/index.ts CHANGED
@@ -68,6 +68,7 @@ import VariableDropdown from './components/Editor/VariableDropdown';
68
68
  import LineChart from './components/Charts/LineChart';
69
69
  import DownloadClient from './components/DownloadClient/DownloadClient';
70
70
  import FieldSet from './components/FieldSet';
71
+ import CreateVariableSlider from './components/CreateVariable/CreateVariableSlider';
71
72
  // Utils imports
72
73
  import { checkEmpty } from './utils/checkEmpty/checkEmpty';
73
74
  import {
@@ -168,6 +169,7 @@ export {
168
169
  DownloadClient,
169
170
  FieldSet,
170
171
  PopUpModal,
172
+ CreateVariableSlider,
171
173
 
172
174
  // utils exports
173
175
  checkEmpty,
@@ -1,6 +0,0 @@
1
- import type { Meta, StoryObj } from '@storybook/react';
2
- import StyleGuide from './ColorPalette';
3
- declare const meta: Meta<typeof StyleGuide>;
4
- type Story = StoryObj<typeof StyleGuide>;
5
- export declare const ColorList: Story;
6
- export default meta;
@@ -1,6 +0,0 @@
1
- import type { Meta, StoryObj } from '@storybook/react';
2
- import Typography from './Typography';
3
- declare const meta: Meta<typeof Typography>;
4
- type Story = StoryObj<typeof Typography>;
5
- export declare const AllFonts: Story;
6
- export default meta;
@@ -1,6 +0,0 @@
1
- import type { Meta, StoryObj } from '@storybook/react';
2
- import Accordion from './Accordion';
3
- declare const meta: Meta<typeof Accordion>;
4
- type Story = StoryObj<typeof Accordion>;
5
- export declare const SampleAccordion: Story;
6
- export default meta;
@@ -1,8 +0,0 @@
1
- import { Meta, StoryObj } from '@storybook/react';
2
- import AddButton from './AddButton';
3
- declare const meta: Meta<typeof AddButton>;
4
- type Story = StoryObj<typeof AddButton>;
5
- export declare const Default: Story;
6
- export declare const TwoArrowsButtons: Story;
7
- export declare const ThreeArrowsButton: Story;
8
- export default meta;
@@ -1,7 +0,0 @@
1
- import type { Meta, StoryObj } from '@storybook/react';
2
- import AllProjectsDropdown from './AllProjectsDropdown';
3
- declare const meta: Meta<typeof AllProjectsDropdown>;
4
- type Story = StoryObj<typeof AllProjectsDropdown>;
5
- export declare const Default: Story;
6
- export declare const PrimaryIconButton: Story;
7
- export default meta;
@@ -1,7 +0,0 @@
1
- import type { Meta, StoryObj } from '@storybook/react';
2
- import AppHeader from './AppHeader';
3
- declare const meta: Meta<typeof AppHeader>;
4
- type Story = StoryObj<typeof AppHeader>;
5
- export declare const SampleAppHeader: Story;
6
- export declare const Controlled: Story;
7
- export default meta;
@@ -1,9 +0,0 @@
1
- import type { Meta, StoryObj } from '@storybook/react';
2
- import AttachmentButton from './AttachmentButton';
3
- declare const meta: Meta<typeof AttachmentButton>;
4
- type Story = StoryObj<typeof AttachmentButton>;
5
- export declare const Default: Story;
6
- export declare const SmallFileLimit: Story;
7
- export declare const LargeFileLimit: Story;
8
- export declare const DisabledUploader: Story;
9
- export default meta;
@@ -1,10 +0,0 @@
1
- import { Meta, StoryObj } from '@storybook/react';
2
- import Avatar from './Avatar';
3
- declare const meta: Meta<typeof Avatar>;
4
- export default meta;
5
- type Story = StoryObj<typeof meta>;
6
- export declare const Small: Story;
7
- export declare const Medium: Story;
8
- export declare const Large: Story;
9
- export declare const CustomAvatarSize: Story;
10
- export declare const CustomIconSize: Story;