pixel-react 1.9.1 → 1.9.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (233) hide show
  1. package/.yarn/install-state.gz +0 -0
  2. package/lib/components/Charts/BarChart/BarChart.d.ts +1 -0
  3. package/lib/components/Charts/MultiRadialChart/types.d.ts +2 -0
  4. package/lib/components/Excel/ExcelFile/ExcelFile.d.ts +1 -3
  5. package/lib/components/Excel/Types.d.ts +1 -1
  6. package/lib/components/Table/Table.d.ts +1 -1
  7. package/lib/components/Table/Types.d.ts +8 -0
  8. package/lib/components/TableTree/Components/TableCell.d.ts +1 -1
  9. package/lib/components/TableTree/Components/TableRow.d.ts +1 -1
  10. package/lib/components/TableTree/data.d.ts +54 -262
  11. package/lib/components/TableTree/types.d.ts +0 -6
  12. package/lib/index.d.ts +18 -7
  13. package/lib/index.esm.js +21547 -21727
  14. package/lib/index.esm.js.map +1 -1
  15. package/lib/index.js +21554 -21733
  16. package/lib/index.js.map +1 -1
  17. package/lib/tsconfig.tsbuildinfo +1 -1
  18. package/lib/utils/indexDBStore/indexDB.d.ts +2 -2
  19. package/lib/utils/swapArrayItem/dragAndDropUtils.d.ts +1 -0
  20. package/package.json +1 -2
  21. package/src/StyleGuide/ColorPalette/colorPaletteList.ts +55 -0
  22. package/src/assets/Themes/BaseTheme.scss +17 -6
  23. package/src/assets/Themes/BlueTheme.scss +12 -0
  24. package/src/assets/Themes/DarkTheme.scss +20 -6
  25. package/src/assets/icons/approval_pending.svg +8 -8
  26. package/src/assets/icons/azure.svg +9 -0
  27. package/src/assets/icons/bitbucket.svg +9 -0
  28. package/src/assets/icons/clear_history.svg +6 -0
  29. package/src/assets/icons/code.svg +4 -0
  30. package/src/assets/icons/code_colored.svg +4 -0
  31. package/src/assets/icons/configuration.svg +3 -3
  32. package/src/assets/icons/csharp.svg +9 -0
  33. package/src/assets/icons/cypress.svg +9 -0
  34. package/src/assets/icons/defects.svg +8 -8
  35. package/src/assets/icons/delete_filled.svg +12 -0
  36. package/src/assets/icons/design_link.svg +7 -0
  37. package/src/assets/icons/disable_icon.svg +3 -0
  38. package/src/assets/icons/element.svg +4 -4
  39. package/src/assets/icons/enable_icon.svg +3 -0
  40. package/src/assets/icons/file_colored.svg +5 -0
  41. package/src/assets/icons/github.svg +9 -0
  42. package/src/assets/icons/gitlab.svg +9 -0
  43. package/src/assets/icons/java.svg +4 -0
  44. package/src/assets/icons/javascript.svg +11 -0
  45. package/src/assets/icons/jenkins.svg +9 -0
  46. package/src/assets/icons/jira_colored.svg +15 -0
  47. package/src/assets/icons/jira_logo.svg +9 -0
  48. package/src/assets/icons/mic.svg +4 -0
  49. package/src/assets/icons/mic_filled.svg +28 -0
  50. package/src/assets/icons/playwright.svg +9 -0
  51. package/src/assets/icons/primary_calendar_icon.svg +3 -0
  52. package/src/assets/icons/project_element.svg +4 -4
  53. package/src/assets/icons/python.svg +19 -0
  54. package/src/assets/icons/regenerate.svg +4 -0
  55. package/src/assets/icons/right_arrow_filled_icon.svg +5 -0
  56. package/src/assets/icons/screenshot.svg +7 -0
  57. package/src/assets/icons/slack.svg +9 -0
  58. package/src/assets/icons/step_group.svg +10 -10
  59. package/src/assets/icons/variable.svg +3 -3
  60. package/src/assets/icons/web_service_icon.svg +3 -3
  61. package/src/components/Button/Button.tsx +2 -0
  62. package/src/components/Charts/BarChart/BarChart.stories.tsx +2 -1
  63. package/src/components/Charts/BarChart/BarChart.tsx +6 -2
  64. package/src/components/Charts/MultiRadialChart/MultiRadialChart.scss +0 -2
  65. package/src/components/Charts/MultiRadialChart/MultiRadialChart.stories.tsx +7 -1
  66. package/src/components/Charts/MultiRadialChart/MultiRadialChart.tsx +5 -2
  67. package/src/components/Charts/MultiRadialChart/types.ts +2 -0
  68. package/src/components/DatePicker/DatePicker.scss +379 -632
  69. package/src/components/DatePicker/DatePicker.tsx +130 -98
  70. package/src/components/DatePicker/Timepicker.tsx +1 -13
  71. package/src/components/Excel/ExcelFile/ExcelFile.tsx +48 -42
  72. package/src/components/Excel/ExcelFile.stories.tsx +98 -96
  73. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +65 -28
  74. package/src/components/Excel/Types.ts +1 -1
  75. package/src/components/Excel/dataConversion.ts +8 -10
  76. package/src/components/Icon/iconList.ts +60 -3
  77. package/src/components/Table/Table.scss +44 -11
  78. package/src/components/Table/Table.stories.tsx +60 -1
  79. package/src/components/Table/Table.tsx +190 -123
  80. package/src/components/Table/Types.ts +8 -0
  81. package/src/components/TableTree/Components/TableBody.tsx +18 -20
  82. package/src/components/TableTree/Components/TableCell.tsx +28 -16
  83. package/src/components/TableTree/Components/TableRow.tsx +4 -7
  84. package/src/components/TableTree/TableTree.stories.tsx +10 -10
  85. package/src/components/TableTree/TableTree.tsx +19 -16
  86. package/src/components/TableTree/data.ts +53 -362
  87. package/src/components/TableTree/types.ts +0 -6
  88. package/src/components/TextArea/Textarea.scss +24 -6
  89. package/src/index.ts +3 -1
  90. package/src/utils/indexDBStore/indexDB.ts +63 -33
  91. package/src/utils/swapArrayItem/dragAndDropUtils.ts +11 -0
  92. package/lib/1fb4472b34e4fe07.css +0 -1
  93. package/lib/StyleGuide/ColorPalette/ColorPalette.stories.d.ts +0 -6
  94. package/lib/StyleGuide/Typography/Typography.stories.d.ts +0 -6
  95. package/lib/assets/fonts/Poppins-Bold.ttf +0 -0
  96. package/lib/assets/fonts/Poppins-Medium.ttf +0 -0
  97. package/lib/assets/fonts/Poppins-Regular.ttf +0 -0
  98. package/lib/assets/fonts/Poppins-SemiBold.ttf +0 -0
  99. package/lib/components/Accordion/Accordion.stories.d.ts +0 -6
  100. package/lib/components/AddButton/AddButton.d.ts +0 -5
  101. package/lib/components/AddButton/AddButton.stories.d.ts +0 -6
  102. package/lib/components/AddButton/index.d.ts +0 -1
  103. package/lib/components/AddButton/types.d.ts +0 -4
  104. package/lib/components/AddResourceButton/AddButton.stories.d.ts +0 -8
  105. package/lib/components/AddVariables/AddVariables.d.ts +0 -5
  106. package/lib/components/AddVariables/index.d.ts +0 -1
  107. package/lib/components/AddVariables/types.d.ts +0 -35
  108. package/lib/components/AllProjectsDropdown/AllProjectsDropdown.stories.d.ts +0 -7
  109. package/lib/components/AppHeader/AppHeader.stories.d.ts +0 -7
  110. package/lib/components/AttachImage/AttachImage.stories.d.ts +0 -7
  111. package/lib/components/AttachmentButton/AttachmentButton.stories.d.ts +0 -9
  112. package/lib/components/Avatar/Avatar.stories.d.ts +0 -10
  113. package/lib/components/Button/Button.stories.d.ts +0 -13
  114. package/lib/components/Charts/BarChart/BarChart.stories.d.ts +0 -6
  115. package/lib/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.d.ts +0 -7
  116. package/lib/components/Charts/DonutChart/DonutChart.stories.d.ts +0 -6
  117. package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts +0 -8
  118. package/lib/components/Charts/LineChart/LineChart.stories.d.ts +0 -7
  119. package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +0 -8
  120. package/lib/components/Charts/PieChart/PieChart.stories.d.ts +0 -7
  121. package/lib/components/Charts/RadialChart/RadialChart.stories.d.ts +0 -6
  122. package/lib/components/Checkbox/Checkbox.stories.d.ts +0 -8
  123. package/lib/components/Chip/Chip.stories.d.ts +0 -14
  124. package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts +0 -6
  125. package/lib/components/DatePicker/DatePicker.stories.d.ts +0 -9
  126. package/lib/components/DragAndDrop/DragAndDrop.stories.d.ts +0 -6
  127. package/lib/components/Drawer/Drawer.stories.d.ts +0 -12
  128. package/lib/components/EditTextField/EditTextField.stories.d.ts +0 -10
  129. package/lib/components/Editor/Editor.stories.d.ts +0 -6
  130. package/lib/components/Excel/ContextMenu/ContextMenu.d.ts +0 -4
  131. package/lib/components/Excel/ExcelFile.stories.d.ts +0 -6
  132. package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +0 -14
  133. package/lib/components/ExcelFile/ColorBarSelector/ColorBarSelector.d.ts +0 -8
  134. package/lib/components/ExcelFile/ContextMenu/ContextMenu.d.ts +0 -4
  135. package/lib/components/ExcelFile/ExcelFile/Excel/ActiveCell.d.ts +0 -7
  136. package/lib/components/ExcelFile/ExcelFile/Excel/Cell.d.ts +0 -4
  137. package/lib/components/ExcelFile/ExcelFile/Excel/ColumnIndicator.d.ts +0 -5
  138. package/lib/components/ExcelFile/ExcelFile/Excel/Copied.d.ts +0 -3
  139. package/lib/components/ExcelFile/ExcelFile/Excel/CornerIndicator.d.ts +0 -5
  140. package/lib/components/ExcelFile/ExcelFile/Excel/DataEditor.d.ts +0 -5
  141. package/lib/components/ExcelFile/ExcelFile/Excel/DataViewer.d.ts +0 -8
  142. package/lib/components/ExcelFile/ExcelFile/Excel/FloatingRect.d.ts +0 -10
  143. package/lib/components/ExcelFile/ExcelFile/Excel/HeaderRow.d.ts +0 -3
  144. package/lib/components/ExcelFile/ExcelFile/Excel/Row.d.ts +0 -3
  145. package/lib/components/ExcelFile/ExcelFile/Excel/RowIndicator.d.ts +0 -5
  146. package/lib/components/ExcelFile/ExcelFile/Excel/Selected.d.ts +0 -3
  147. package/lib/components/ExcelFile/ExcelFile/Excel/Spreadsheet.d.ts +0 -80
  148. package/lib/components/ExcelFile/ExcelFile/Excel/Table.d.ts +0 -3
  149. package/lib/components/ExcelFile/ExcelFile/Excel/actions.d.ts +0 -174
  150. package/lib/components/ExcelFile/ExcelFile/Excel/areModelsEqual.d.ts +0 -1
  151. package/lib/components/ExcelFile/ExcelFile/Excel/context.d.ts +0 -8
  152. package/lib/components/ExcelFile/ExcelFile/Excel/engine/engine.d.ts +0 -22
  153. package/lib/components/ExcelFile/ExcelFile/Excel/engine/formula.d.ts +0 -17
  154. package/lib/components/ExcelFile/ExcelFile/Excel/engine/index.d.ts +0 -2
  155. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-graph.d.ts +0 -21
  156. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-hash.d.ts +0 -3
  157. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-set.d.ts +0 -24
  158. package/lib/components/ExcelFile/ExcelFile/Excel/index.d.ts +0 -13
  159. package/lib/components/ExcelFile/ExcelFile/Excel/matrix.d.ts +0 -67
  160. package/lib/components/ExcelFile/ExcelFile/Excel/point-range.d.ts +0 -22
  161. package/lib/components/ExcelFile/ExcelFile/Excel/point.d.ts +0 -11
  162. package/lib/components/ExcelFile/ExcelFile/Excel/reducer.d.ts +0 -27
  163. package/lib/components/ExcelFile/ExcelFile/Excel/selection.d.ts +0 -95
  164. package/lib/components/ExcelFile/ExcelFile/Excel/types.d.ts +0 -178
  165. package/lib/components/ExcelFile/ExcelFile/Excel/use-dispatch.d.ts +0 -3
  166. package/lib/components/ExcelFile/ExcelFile/Excel/use-selector.d.ts +0 -3
  167. package/lib/components/ExcelFile/ExcelFile/Excel/util.d.ts +0 -44
  168. package/lib/components/ExcelFile/ExcelFile/ExcelFile.d.ts +0 -19
  169. package/lib/components/ExcelFile/ExcelFile.stories.d.ts +0 -6
  170. package/lib/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.d.ts +0 -12
  171. package/lib/components/ExcelFile/ExcelToolBar/ExcelToolBar.d.ts +0 -15
  172. package/lib/components/ExcelFile/ImportExcelStyles.d.ts +0 -24
  173. package/lib/components/ExcelFile/Types.d.ts +0 -129
  174. package/lib/components/ExcelFile/index.d.ts +0 -1
  175. package/lib/components/ExpandableMenu/ExpandableMenu.stories.d.ts +0 -7
  176. package/lib/components/FF_Captcha/captcha.stories.d.ts +0 -8
  177. package/lib/components/FileDropzone/FileDropzone.stories.d.ts +0 -8
  178. package/lib/components/Form/Form.stories.d.ts +0 -7
  179. package/lib/components/GridLayout/GridLayout.stories.d.ts +0 -8
  180. package/lib/components/HighlightText/HighlightText.stories.d.ts +0 -6
  181. package/lib/components/Icon/Icon.stories.d.ts +0 -8
  182. package/lib/components/IconButton/IconButton.stories.d.ts +0 -7
  183. package/lib/components/IconRadioGroup/IconRadioGroup.stories.d.ts +0 -7
  184. package/lib/components/Input/Input.stories.d.ts +0 -9
  185. package/lib/components/InputWithDropdown/InputWithDropdown.stories.d.ts +0 -9
  186. package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +0 -13
  187. package/lib/components/LazyLoad/LazyLoad.stories.d.ts +0 -6
  188. package/lib/components/MachineInputField/MachineInputField.stories.d.ts +0 -6
  189. package/lib/components/MenuOption/MenuOption.stories.d.ts +0 -16
  190. package/lib/components/MiniModal/MiniModal.stories.d.ts +0 -10
  191. package/lib/components/Modal/Modal.stories.d.ts +0 -7
  192. package/lib/components/ModulesChip/ModuleChip.stories.d.ts +0 -6
  193. package/lib/components/MultiSelect/MultiSelect.stories.d.ts +0 -11
  194. package/lib/components/NLPInput/NlpInput.stories.d.ts +0 -7
  195. package/lib/components/NLPInput/type.d.ts +0 -70
  196. package/lib/components/Paper/Paper.stories.d.ts +0 -11
  197. package/lib/components/RadioButton/RadioButton.stories.d.ts +0 -10
  198. package/lib/components/RadioGroup/RadioGroup.stories.d.ts +0 -9
  199. package/lib/components/Search/Search.stories.d.ts +0 -6
  200. package/lib/components/Select/Select.stories.d.ts +0 -14
  201. package/lib/components/Select/components/Dropdown/Dropdown.d.ts +0 -4
  202. package/lib/components/Select/components/Dropdown/dropdownTypes.d.ts +0 -17
  203. package/lib/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.d.ts +0 -6
  204. package/lib/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.d.ts +0 -4
  205. package/lib/components/SequentialConnectingBranch/components/AddBrowserModal/types.d.ts +0 -3
  206. package/lib/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.d.ts +0 -4
  207. package/lib/components/SequentialConnectingBranch/components/DatasetListModal/types.d.ts +0 -3
  208. package/lib/components/StateDropdown/StateDropdown.stories.d.ts +0 -10
  209. package/lib/components/StatusButton/StatusButton.stories.d.ts +0 -14
  210. package/lib/components/StatusCard/StatusCard.stories.d.ts +0 -11
  211. package/lib/components/Table/Table.stories.d.ts +0 -13
  212. package/lib/components/TableTree/TableTree.stories.d.ts +0 -7
  213. package/lib/components/Tabs/Tabs.stories.d.ts +0 -9
  214. package/lib/components/TextArea/Textarea.stories.d.ts +0 -9
  215. package/lib/components/Toast/Toast.stories.d.ts +0 -6
  216. package/lib/components/Toastify/Toastify.stories.d.ts +0 -6
  217. package/lib/components/Toggle/Toggle.stories.d.ts +0 -12
  218. package/lib/components/Tooltip/Tooltip.stories.d.ts +0 -15
  219. package/lib/components/Typography/Typography.stories.d.ts +0 -10
  220. package/lib/components/VariableInput/VariableInput.stories.d.ts +0 -6
  221. package/lib/utils/checkEmpty/checkEmpty.stories.d.ts +0 -6
  222. package/lib/utils/compareArrays/compareArrays.stories.d.ts +0 -6
  223. package/lib/utils/compareObjects/compareObjects.stories.d.ts +0 -6
  224. package/lib/utils/debounce/debounce.stories.d.ts +0 -6
  225. package/lib/utils/ffID/ffID.stories.d.ts +0 -6
  226. package/lib/utils/find/findAndInsert.d.ts +0 -7
  227. package/lib/utils/find/findAndInsert.stories.d.ts +0 -7
  228. package/lib/utils/findAndInsert/findAndInsert.stories.d.ts +0 -7
  229. package/lib/utils/getEncryptedData/getEncryptedData.stories.d.ts +0 -6
  230. package/lib/utils/getExtension/getExtension.stories.d.ts +0 -6
  231. package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +0 -10
  232. package/lib/utils/throttle/throttle.stories.d.ts +0 -6
  233. package/lib/utils/truncateText/truncateText.stories.d.ts +0 -6
@@ -1,4 +1,5 @@
1
1
  import React, { useEffect, useState, useRef } from 'react';
2
+ import ReactDOM from 'react-dom';
2
3
  import { DayPicker } from 'react-day-picker';
3
4
  import { formatInTimeZone } from 'date-fns-tz';
4
5
  import TimePicker from './Timepicker';
@@ -38,6 +39,10 @@ const CustomDatePicker: React.FC<DatePickerProps> = ({
38
39
  new Date()
39
40
  );
40
41
  const [view, setView] = useState<string>('days');
42
+ const [positionStyles, setPositionStyles] = useState<{
43
+ top: number | null;
44
+ left: number | null;
45
+ }>({ top: null, left: null });
41
46
 
42
47
  const selectedDateRef = useRef<Date | undefined>(undefined);
43
48
  const [startYear, setStartYear] = useState(() => {
@@ -83,33 +88,38 @@ const CustomDatePicker: React.FC<DatePickerProps> = ({
83
88
 
84
89
  useEffect(() => {
85
90
  const adjustPosition = () => {
86
- if (containerRef.current && pickerRef.current) {
87
- const relativeRect = containerRef.current.getBoundingClientRect();
88
- const pickerHeight = pickerRef.current.offsetHeight;
89
- const spacing = 5; // spacing in pixels
90
-
91
- const spaceBelow = window.innerHeight - relativeRect.bottom;
92
- const spaceAbove = relativeRect.top;
93
-
94
- let top = relativeRect.bottom + window.scrollY + spacing; // Default position to below
95
- if (spaceBelow < pickerHeight && spaceAbove >= pickerHeight) {
96
- top = relativeRect.top + window.scrollY - pickerHeight - spacing; // Place above
91
+ if (containerRef.current) {
92
+ const containerRect = containerRef.current.getBoundingClientRect();
93
+ const spacing = 8;
94
+
95
+ let top = containerRect.bottom + spacing;
96
+ let left = containerRect.left;
97
+
98
+ if (pickerRef.current) {
99
+ const pickerHeight = pickerRef.current.offsetHeight;
100
+ const pickerWidth = pickerRef.current.offsetWidth;
101
+
102
+ if (window.innerHeight - containerRect.bottom < pickerHeight) {
103
+ top = containerRect.top - pickerHeight - spacing;
104
+ }
105
+ if (window.innerWidth - containerRect.left < pickerWidth) {
106
+ left = containerRect.right - pickerWidth;
107
+ }
97
108
  }
98
109
 
99
- // Horizontal position: align to container with optional adjustments
100
- const left = relativeRect.left + window.scrollX;
101
-
102
- pickerRef.current.style.top = `${top}px`;
103
- pickerRef.current.style.left = `${left}px`;
110
+ setPositionStyles({ top, left });
104
111
  }
105
112
  };
106
113
 
107
- // Initial adjustment
108
- adjustPosition();
114
+ if (isPickerOpen) {
115
+ adjustPosition();
116
+ setTimeout(() => {}, 200);
117
+ window.addEventListener('resize', () => {});
118
+ }
109
119
 
110
- // Recalculate on resize
111
- window.addEventListener('resize', adjustPosition);
112
- return () => window.removeEventListener('resize', adjustPosition);
120
+ return () => {
121
+ window.removeEventListener('resize', adjustPosition);
122
+ };
113
123
  }, [isPickerOpen]);
114
124
 
115
125
  const calendarStyle = {
@@ -151,7 +161,6 @@ const CustomDatePicker: React.FC<DatePickerProps> = ({
151
161
  };
152
162
 
153
163
  const handleSave = () => {
154
- console.log('selectedDate1', selectedDateRef.current);
155
164
  onChange(selectedDateRef.current);
156
165
  resetAndCloseDatePicker();
157
166
  };
@@ -316,7 +325,15 @@ const CustomDatePicker: React.FC<DatePickerProps> = ({
316
325
  'ff-custom-month--disabled': isDisabled,
317
326
  })}
318
327
  >
319
- <Typography>{month}</Typography>
328
+ <Typography
329
+ color={
330
+ index === selectedMonth?.getMonth()
331
+ ? 'var(--primary-button-text-color)'
332
+ : undefined
333
+ }
334
+ >
335
+ {month}
336
+ </Typography>
320
337
  </div>
321
338
  );
322
339
  })}
@@ -370,7 +387,15 @@ const CustomDatePicker: React.FC<DatePickerProps> = ({
370
387
  'ff-custom-year--disabled': isDisabled,
371
388
  })}
372
389
  >
373
- <Typography>{year}</Typography>
390
+ <Typography
391
+ color={
392
+ year === selectedMonth?.getFullYear()
393
+ ? 'var(--primary-button-text-color)'
394
+ : undefined
395
+ }
396
+ >
397
+ {year}
398
+ </Typography>
374
399
  </div>
375
400
  );
376
401
  })}
@@ -427,82 +452,89 @@ const CustomDatePicker: React.FC<DatePickerProps> = ({
427
452
  )}
428
453
  </div>
429
454
 
430
- {isPickerOpen && (
431
- <div
432
- className="ff-date-picker-container"
433
- ref={pickerRef}
434
- style={{
435
- zIndex,
436
- }}
437
- >
438
- <div className="ff-calendar-container">
439
- <DayPicker
440
- style={calendarStyle}
441
- className="ff-calendar"
442
- mode="single"
443
- selected={selectedDate}
444
- onSelect={handleDaySelect}
445
- month={selectedMonth}
446
- onMonthChange={(month) => {
447
- if (view === 'days') {
448
- setSelectedMonth(month);
449
- }
450
- }}
451
- onNextClick={handleNextClick}
452
- onPrevClick={handlePrevClick}
453
- disableNavigation={view === 'months'}
454
- disabled={[
455
- {
456
- before: new Date(minDate ? minDate : ''),
457
- after: new Date(maxDate ? maxDate : ''),
458
- },
459
- ]}
460
- timeZone={timezone}
461
- components={{
462
- CaptionLabel: (props) => <CustomCaption {...props} />,
463
- PreviousMonthButton: (props) => <CustomPrevButton {...props} />,
464
- NextMonthButton: (props) => <CustomNextButton {...props} />,
465
- ...(view === 'months'
466
- ? {
467
- MonthGrid: () => <CustomMonthGrid />,
468
- }
469
- : {}),
470
- ...(view === 'years'
471
- ? {
472
- MonthGrid: () => <CustomYearGrid />,
473
- }
474
- : {}),
475
- }}
476
- />
477
- {!dateOnly && (
478
- <TimePicker
479
- value={timeValue}
480
- onChange={handleTimeChange}
481
- minTime={minTime}
482
- maxTime={maxTime}
483
- onErrorChange={setTimeError}
484
- />
485
- )}
486
- </div>
487
- {!dateOnly && (
488
- <div className="ff-date-picker-controls">
489
- <Button
490
- className="ff-date-picker-button"
491
- variant="secondary"
492
- onClick={handleCancel}
493
- label="Cancel"
494
- />
495
- <Button
496
- className="ff-date-picker-button"
497
- variant="primary"
498
- onClick={handleSave}
499
- label="Save"
500
- disabled={timeError}
455
+ {isPickerOpen &&
456
+ !!top &&
457
+ ReactDOM.createPortal(
458
+ <div
459
+ className="ff-date-picker-container"
460
+ ref={pickerRef}
461
+ style={{
462
+ zIndex,
463
+ top: `${positionStyles.top}px`,
464
+ left: `${positionStyles.left}px`,
465
+ }}
466
+ >
467
+ <div className="ff-calendar-container">
468
+ <DayPicker
469
+ style={calendarStyle}
470
+ className="ff-calendar"
471
+ mode="single"
472
+ selected={selectedDate}
473
+ onSelect={handleDaySelect}
474
+ month={selectedMonth}
475
+ onMonthChange={(month) => {
476
+ if (view === 'days') {
477
+ setSelectedMonth(month);
478
+ }
479
+ }}
480
+ onNextClick={handleNextClick}
481
+ onPrevClick={handlePrevClick}
482
+ disableNavigation={view === 'months'}
483
+ disabled={[
484
+ {
485
+ before: new Date(minDate ? minDate : ''),
486
+ after: new Date(maxDate ? maxDate : ''),
487
+ },
488
+ ]}
489
+ timeZone={timezone}
490
+ components={{
491
+ CaptionLabel: (props) => <CustomCaption {...props} />,
492
+ PreviousMonthButton: (props) => (
493
+ <CustomPrevButton {...props} />
494
+ ),
495
+ NextMonthButton: (props) => <CustomNextButton {...props} />,
496
+ ...(view === 'months'
497
+ ? {
498
+ MonthGrid: () => <CustomMonthGrid />,
499
+ }
500
+ : {}),
501
+ ...(view === 'years'
502
+ ? {
503
+ MonthGrid: () => <CustomYearGrid />,
504
+ }
505
+ : {}),
506
+ }}
501
507
  />
508
+ {!dateOnly && (
509
+ <TimePicker
510
+ value={timeValue}
511
+ onChange={handleTimeChange}
512
+ minTime={minTime}
513
+ maxTime={maxTime}
514
+ onErrorChange={setTimeError}
515
+ />
516
+ )}
502
517
  </div>
503
- )}
504
- </div>
505
- )}
518
+ {!dateOnly && (
519
+ <div className="ff-date-picker-controls">
520
+ <Button
521
+ className="ff-date-picker-button"
522
+ variant="secondary"
523
+ onClick={handleCancel}
524
+ label="Cancel"
525
+ />
526
+ <Button
527
+ className="ff-date-picker-button"
528
+ variant="primary"
529
+ onClick={handleSave}
530
+ label="Save"
531
+ disabled={timeError}
532
+ />
533
+ </div>
534
+ )}
535
+ </div>,
536
+ document.body
537
+ )}
506
538
  </div>
507
539
  );
508
540
  };
@@ -18,7 +18,6 @@ const TimePicker: React.FC<TimePickerProps> = ({
18
18
  const [period, setPeriod] = useState<string | undefined>('AM');
19
19
  const [timeFieldError, setTimeFieldError] = useState<boolean>(false);
20
20
  const [isPeriodDropdownOpen, setIsPeriodDropdownOpen] = useState(false);
21
- const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0 });
22
21
  const inputRef = useRef<HTMLInputElement>(null);
23
22
  const periodRef = useRef<HTMLDivElement>(null);
24
23
 
@@ -173,10 +172,6 @@ const TimePicker: React.FC<TimePickerProps> = ({
173
172
 
174
173
  const togglePeriodDropdown = () => {
175
174
  setIsPeriodDropdownOpen((prev) => !prev);
176
- if (periodRef.current) {
177
- const { top, left, height } = periodRef.current.getBoundingClientRect();
178
- setDropdownPosition({ top: top + height, left: left });
179
- }
180
175
  };
181
176
 
182
177
  const handlePeriodChange = (option: string) => {
@@ -322,14 +317,7 @@ const TimePicker: React.FC<TimePickerProps> = ({
322
317
  </div>
323
318
 
324
319
  {isPeriodDropdownOpen && (
325
- <ul
326
- className="ff-time-period-options"
327
- style={{
328
- top: `${dropdownPosition.top}px`,
329
- left: `${dropdownPosition.left}px`,
330
- }}
331
- role="listbox"
332
- >
320
+ <ul className="ff-time-period-options" role="listbox">
333
321
  <Typography
334
322
  as="li"
335
323
  className="ff-option-item"
@@ -17,9 +17,7 @@ import { checkEmpty } from '../../../utils/checkEmpty/checkEmpty';
17
17
 
18
18
  interface ExcelFileProps {
19
19
  /** The Excel data containing sheets and their content */
20
- excelData: {
21
- sheets: WorkSheet[];
22
- };
20
+ excelData: WorkSheet[];
23
21
 
24
22
  /** Optional: Provide context menu options for actions like right-click */
25
23
  contextOption?: {
@@ -130,49 +128,57 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
130
128
 
131
129
  useEffect(() => {
132
130
  const payload = excelData;
133
- const sheetNames = payload.sheets.map((e) => e.sheetName);
134
- setSheetNames(sheetNames);
135
- if (sheetNames.length > 0) {
136
- pageRef.current = sheetNames[0] ? sheetNames[0] : '';
137
- setSelectedSheet({ name: sheetNames[0] ? sheetNames[0] : '', index: 0 });
138
- }
139
- const newWorksheetsData: { [key: string]: Matrix.Matrix<CellBase> } = {};
140
- payload.sheets.forEach((sheet) => {
141
- const sheetName = sheet.sheetName;
142
- const json = sheet.data;
143
- const maxRows = Math.max(26, json.length + 2);
144
- const maxCols = Math.max(
145
- 26,
146
- Math.max(...json.map((row) => row.length)) + 2
147
- );
148
-
149
- let spreadsheetData: Matrix.Matrix<CellBase> = Array.from(
150
- { length: maxRows },
151
- () => Array.from({ length: maxCols }, () => EmptyRow)
152
- );
153
- json.forEach((row, rowIndex) => {
154
- row.forEach((cell, colIndex) => {
155
- if (rowIndex < maxRows && colIndex < maxCols) {
156
- if (!spreadsheetData[rowIndex]) {
157
- spreadsheetData[rowIndex] = [];
131
+ if (payload) {
132
+ const sheetNames = payload.map((e) => e.sheetName);
133
+ setSheetNames(sheetNames);
134
+
135
+ if (!checkEmpty(sheetNames.length)) {
136
+ pageRef.current = sheetNames[0] ? sheetNames[0] : ''; //Ternary is required, must use ''
137
+ setSelectedSheet({
138
+ name: sheetNames[0] ? sheetNames[0] : '', //Ternary is required, must use ''
139
+ index: 0,
140
+ });
141
+ }
142
+ const newWorksheetsData: { [key: string]: Matrix.Matrix<CellBase> } = {};
143
+ payload.forEach((sheet) => {
144
+ const sheetName = sheet.sheetName;
145
+ const json = sheet.data;
146
+ const maxRows = Math.max(26, json.length + 2);
147
+ const maxCols = Math.max(
148
+ 26,
149
+ Math.max(...json.map((row) => row.length)) + 2
150
+ );
151
+
152
+ let spreadsheetData: Matrix.Matrix<CellBase> = Array.from(
153
+ { length: maxRows },
154
+ () => Array.from({ length: maxCols }, () => EmptyRow)
155
+ );
156
+
157
+ json.forEach((row, rowIndex) => {
158
+ row.forEach((cell, colIndex) => {
159
+ if (rowIndex < maxRows && colIndex < maxCols) {
160
+ if (!spreadsheetData[rowIndex]) {
161
+ spreadsheetData[rowIndex] = [];
162
+ }
163
+ spreadsheetData[rowIndex][colIndex] = {
164
+ value: checkVal(cell.value),
165
+ style: convertStyleToFrontend(cell?.styles), //TODO remove 's' for Style
166
+ type: true,
167
+ };
158
168
  }
159
- spreadsheetData[rowIndex][colIndex] = {
160
- value: checkVal(cell.value),
161
- style: convertStyleToFrontend(cell?.style),
162
- type: true,
163
- };
164
- }
169
+ });
165
170
  });
166
- });
167
171
 
168
- newWorksheetsData[sheetName] = spreadsheetData;
169
- });
170
- setWorksheetsData(newWorksheetsData);
171
- const firstSheetName = Object.keys(newWorksheetsData)[0];
172
- if (firstSheetName && newWorksheetsData[firstSheetName] !== undefined) {
173
- setSelectedSheetData(newWorksheetsData[firstSheetName]);
172
+ newWorksheetsData[sheetName] = spreadsheetData;
173
+ });
174
+ setWorksheetsData(newWorksheetsData);
175
+ const firstSheetName = Object.keys(newWorksheetsData)[0];
176
+ if (firstSheetName && newWorksheetsData[firstSheetName] !== undefined) {
177
+ setSelectedSheetData(newWorksheetsData[firstSheetName]);
178
+ }
174
179
  }
175
- }, []);
180
+ }, [excelData]);
181
+
176
182
  const handleSave = React.useCallback(
177
183
  (event: KeyboardEvent) => {
178
184
  if (event.ctrlKey && event.key === 's') {
@@ -27,111 +27,113 @@ type Story = StoryObj<typeof ExcelFile>;
27
27
 
28
28
  export const Default: Story = {
29
29
  args: {
30
- excelData: {
31
- sheets: [
32
- {
33
- sheetName: 'fireflink',
34
- data: [
35
- [
36
- {
37
- value: 'Test Sample Data 1',
38
- style: {
39
- name: 'Arial',
40
- size: 11,
41
- bold: true,
42
- italic: false,
43
- color: 'ffffff', // Sample data from backend without #
44
- backgroundColor: '434db8', // Sample data from backend without #
45
- borderColor: 'F2F2F2', // Sample data from backend without #
46
- border: {
47
- top: 'NONE',
48
- bottom: 'NONE',
49
- left: 'NONE',
50
- right: 'NONE',
51
- },
52
- alignment: {
53
- horizontal: 'GENERAL',
54
- vertical: 'BOTTOM',
55
- wrapText: false,
56
- },
30
+ excelData: [
31
+ {
32
+ sheetName: 'fireflink',
33
+ data: [
34
+ [
35
+ {
36
+ value: 'Test Sample Data 1',
37
+ styles: {
38
+ //TODO remove 's' for Style
39
+ name: 'Arial',
40
+ size: 11,
41
+ bold: true,
42
+ italic: false,
43
+ color: 'ffffff', // Sample data from backend without #
44
+ backgroundColor: '434db8', // Sample data from backend without #
45
+ borderColor: 'F2F2F2', // Sample data from backend without #
46
+ border: {
47
+ top: 'NONE',
48
+ bottom: 'NONE',
49
+ left: 'NONE',
50
+ right: 'NONE',
51
+ },
52
+ alignment: {
53
+ horizontal: 'GENERAL',
54
+ vertical: 'BOTTOM',
55
+ wrapText: false,
57
56
  },
58
57
  },
59
- {
60
- value: 'Test Data 2',
61
- style: {
62
- name: 'Arial',
63
- size: 12,
64
- bold: true,
65
- italic: true,
66
- color: 'EB5B00', // Sample data from backend without #
67
- backgroundColor: '88C273', // Sample data from backend without #
68
- borderColor: 'F2F2F2', // Sample data from backend without #
69
- border: {
70
- top: 'NONE',
71
- bottom: 'NONE',
72
- left: 'NONE',
73
- right: 'NONE',
74
- },
75
- alignment: {
76
- horizontal: 'GENERAL',
77
- vertical: 'BOTTOM',
78
- wrapText: false,
79
- },
58
+ },
59
+ {
60
+ value: 'Test Data 2',
61
+ styles: {
62
+ //TODO remove 's' for Style
63
+ name: 'Arial',
64
+ size: 12,
65
+ bold: true,
66
+ italic: true,
67
+ color: 'EB5B00', // Sample data from backend without #
68
+ backgroundColor: '88C273', // Sample data from backend without #
69
+ borderColor: 'F2F2F2', // Sample data from backend without #
70
+ border: {
71
+ top: 'NONE',
72
+ bottom: 'NONE',
73
+ left: 'NONE',
74
+ right: 'NONE',
75
+ },
76
+ alignment: {
77
+ horizontal: 'GENERAL',
78
+ vertical: 'BOTTOM',
79
+ wrapText: false,
80
80
  },
81
81
  },
82
- ],
83
- [
84
- {
85
- value: 'Test Data 3',
86
- style: {
87
- name: 'Arial',
88
- size: 11,
89
- bold: false,
90
- italic: false,
91
- color: '000000', // Sample data from backend without #
92
- backgroundColor: 'EB5B00', // Sample data from backend without #
93
- borderColor: 'F2F2F2', // Sample data from backend without #
94
- border: {
95
- top: 'NONE',
96
- bottom: 'NONE',
97
- left: 'NONE',
98
- right: 'NONE',
99
- },
100
- alignment: {
101
- horizontal: 'GENERAL',
102
- vertical: 'BOTTOM',
103
- wrapText: false,
104
- },
82
+ },
83
+ ],
84
+ [
85
+ {
86
+ value: 'Test Data 3',
87
+ styles: {
88
+ //TODO remove 's' for Style
89
+ name: 'Arial',
90
+ size: 11,
91
+ bold: false,
92
+ italic: false,
93
+ color: '000000', // Sample data from backend without #
94
+ backgroundColor: 'EB5B00', // Sample data from backend without #
95
+ borderColor: 'F2F2F2', // Sample data from backend without #
96
+ border: {
97
+ top: 'NONE',
98
+ bottom: 'NONE',
99
+ left: 'NONE',
100
+ right: 'NONE',
101
+ },
102
+ alignment: {
103
+ horizontal: 'GENERAL',
104
+ vertical: 'BOTTOM',
105
+ wrapText: false,
105
106
  },
106
107
  },
107
- {
108
- value: 'Test Sample Data 4',
109
- style: {
110
- name: 'Arial',
111
- size: 11,
112
- bold: false,
113
- italic: false,
114
- color: '3D0301', // Sample data from backend without #
115
- backgroundColor: 'C6E7FF', // Sample data from backend without #
116
- borderColor: 'F2F2F2', // Sample data from backend without #
117
- border: {
118
- top: 'THIN',
119
- bottom: 'THIN',
120
- left: 'THIN',
121
- right: 'THIN',
122
- },
123
- alignment: {
124
- horizontal: 'GENERAL',
125
- vertical: 'BOTTOM',
126
- wrapText: false,
127
- },
108
+ },
109
+ {
110
+ value: 'Test Sample Data 4',
111
+ styles: {
112
+ //TODO remove 's' for Style
113
+ name: 'Arial',
114
+ size: 11,
115
+ bold: false,
116
+ italic: false,
117
+ color: '3D0301', // Sample data from backend without #
118
+ backgroundColor: 'C6E7FF', // Sample data from backend without #
119
+ borderColor: 'F2F2F2', // Sample data from backend without #
120
+ border: {
121
+ top: 'THIN',
122
+ bottom: 'THIN',
123
+ left: 'THIN',
124
+ right: 'THIN',
125
+ },
126
+ alignment: {
127
+ horizontal: 'GENERAL',
128
+ vertical: 'BOTTOM',
129
+ wrapText: false,
128
130
  },
129
131
  },
130
- ],
132
+ },
131
133
  ],
132
- },
133
- ],
134
- },
134
+ ],
135
+ },
136
+ ],
135
137
  toolbar: 'show',
136
138
  contextOption: {
137
139
  open: true,