pixel-react 1.9.2 → 1.9.4

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 (203) 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/Table/Table.d.ts +1 -1
  5. package/lib/components/Table/Types.d.ts +8 -0
  6. package/lib/components/TableTree/Components/TableCell.d.ts +1 -1
  7. package/lib/components/TableTree/Components/TableRow.d.ts +1 -1
  8. package/lib/components/TableTree/data.d.ts +54 -222
  9. package/lib/components/TableTree/types.d.ts +0 -6
  10. package/lib/index.d.ts +15 -2
  11. package/lib/index.esm.js +21314 -21374
  12. package/lib/index.esm.js.map +1 -1
  13. package/lib/index.js +21319 -21378
  14. package/lib/index.js.map +1 -1
  15. package/lib/tsconfig.tsbuildinfo +1 -1
  16. package/lib/utils/swapArrayItem/dragAndDropUtils.d.ts +1 -0
  17. package/package.json +1 -1
  18. package/src/StyleGuide/ColorPalette/colorPaletteList.ts +55 -0
  19. package/src/assets/Themes/BaseTheme.scss +17 -6
  20. package/src/assets/Themes/BlueTheme.scss +12 -0
  21. package/src/assets/Themes/DarkTheme.scss +20 -6
  22. package/src/assets/icons/approval_pending.svg +8 -8
  23. package/src/assets/icons/azure.svg +9 -0
  24. package/src/assets/icons/bitbucket.svg +9 -0
  25. package/src/assets/icons/configuration.svg +3 -3
  26. package/src/assets/icons/defects.svg +8 -8
  27. package/src/assets/icons/element.svg +4 -4
  28. package/src/assets/icons/github.svg +9 -0
  29. package/src/assets/icons/gitlab.svg +9 -0
  30. package/src/assets/icons/jenkins.svg +9 -0
  31. package/src/assets/icons/jira_logo.svg +9 -0
  32. package/src/assets/icons/primary_calendar_icon.svg +3 -0
  33. package/src/assets/icons/project_element.svg +4 -4
  34. package/src/assets/icons/slack.svg +9 -0
  35. package/src/assets/icons/step_group.svg +10 -10
  36. package/src/assets/icons/variable.svg +3 -3
  37. package/src/assets/icons/web_service_icon.svg +3 -3
  38. package/src/components/Charts/BarChart/BarChart.stories.tsx +2 -1
  39. package/src/components/Charts/BarChart/BarChart.tsx +6 -2
  40. package/src/components/Charts/MultiRadialChart/MultiRadialChart.scss +0 -2
  41. package/src/components/Charts/MultiRadialChart/MultiRadialChart.stories.tsx +7 -1
  42. package/src/components/Charts/MultiRadialChart/MultiRadialChart.tsx +5 -2
  43. package/src/components/Charts/MultiRadialChart/types.ts +2 -0
  44. package/src/components/DatePicker/DatePicker.scss +379 -632
  45. package/src/components/DatePicker/DatePicker.tsx +130 -98
  46. package/src/components/DatePicker/Timepicker.tsx +1 -13
  47. package/src/components/Icon/iconList.ts +16 -0
  48. package/src/components/Table/Table.scss +44 -11
  49. package/src/components/Table/Table.stories.tsx +60 -1
  50. package/src/components/Table/Table.tsx +190 -123
  51. package/src/components/Table/Types.ts +8 -0
  52. package/src/components/TableTree/Components/TableBody.tsx +17 -19
  53. package/src/components/TableTree/Components/TableCell.tsx +4 -7
  54. package/src/components/TableTree/Components/TableRow.tsx +4 -7
  55. package/src/components/TableTree/TableTree.stories.tsx +10 -10
  56. package/src/components/TableTree/TableTree.tsx +1 -1
  57. package/src/components/TableTree/data.ts +53 -331
  58. package/src/components/TableTree/types.ts +0 -6
  59. package/src/components/TextArea/Textarea.scss +24 -6
  60. package/src/index.ts +3 -1
  61. package/src/utils/swapArrayItem/dragAndDropUtils.ts +11 -0
  62. package/lib/1fb4472b34e4fe07.css +0 -1
  63. package/lib/StyleGuide/ColorPalette/ColorPalette.stories.d.ts +0 -6
  64. package/lib/StyleGuide/Typography/Typography.stories.d.ts +0 -6
  65. package/lib/assets/fonts/Poppins-Bold.ttf +0 -0
  66. package/lib/assets/fonts/Poppins-Medium.ttf +0 -0
  67. package/lib/assets/fonts/Poppins-Regular.ttf +0 -0
  68. package/lib/assets/fonts/Poppins-SemiBold.ttf +0 -0
  69. package/lib/components/Accordion/Accordion.stories.d.ts +0 -6
  70. package/lib/components/AddButton/AddButton.d.ts +0 -5
  71. package/lib/components/AddButton/AddButton.stories.d.ts +0 -6
  72. package/lib/components/AddButton/index.d.ts +0 -1
  73. package/lib/components/AddButton/types.d.ts +0 -4
  74. package/lib/components/AddResourceButton/AddButton.stories.d.ts +0 -8
  75. package/lib/components/AddVariables/AddVariables.d.ts +0 -5
  76. package/lib/components/AddVariables/index.d.ts +0 -1
  77. package/lib/components/AddVariables/types.d.ts +0 -35
  78. package/lib/components/AllProjectsDropdown/AllProjectsDropdown.stories.d.ts +0 -7
  79. package/lib/components/AppHeader/AppHeader.stories.d.ts +0 -7
  80. package/lib/components/AttachImage/AttachImage.stories.d.ts +0 -7
  81. package/lib/components/AttachmentButton/AttachmentButton.stories.d.ts +0 -9
  82. package/lib/components/Avatar/Avatar.stories.d.ts +0 -10
  83. package/lib/components/Button/Button.stories.d.ts +0 -13
  84. package/lib/components/Charts/BarChart/BarChart.stories.d.ts +0 -6
  85. package/lib/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.d.ts +0 -7
  86. package/lib/components/Charts/DonutChart/DonutChart.stories.d.ts +0 -6
  87. package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts +0 -8
  88. package/lib/components/Charts/LineChart/LineChart.stories.d.ts +0 -7
  89. package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +0 -8
  90. package/lib/components/Charts/PieChart/PieChart.stories.d.ts +0 -7
  91. package/lib/components/Charts/RadialChart/RadialChart.stories.d.ts +0 -6
  92. package/lib/components/Checkbox/Checkbox.stories.d.ts +0 -8
  93. package/lib/components/Chip/Chip.stories.d.ts +0 -14
  94. package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts +0 -6
  95. package/lib/components/DatePicker/DatePicker.stories.d.ts +0 -9
  96. package/lib/components/DragAndDrop/DragAndDrop.stories.d.ts +0 -6
  97. package/lib/components/Drawer/Drawer.stories.d.ts +0 -12
  98. package/lib/components/EditTextField/EditTextField.stories.d.ts +0 -10
  99. package/lib/components/Editor/Editor.stories.d.ts +0 -6
  100. package/lib/components/Excel/ContextMenu/ContextMenu.d.ts +0 -4
  101. package/lib/components/Excel/ExcelFile.stories.d.ts +0 -6
  102. package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +0 -14
  103. package/lib/components/ExcelFile/ColorBarSelector/ColorBarSelector.d.ts +0 -8
  104. package/lib/components/ExcelFile/ContextMenu/ContextMenu.d.ts +0 -4
  105. package/lib/components/ExcelFile/ExcelFile/Excel/ActiveCell.d.ts +0 -7
  106. package/lib/components/ExcelFile/ExcelFile/Excel/Cell.d.ts +0 -4
  107. package/lib/components/ExcelFile/ExcelFile/Excel/ColumnIndicator.d.ts +0 -5
  108. package/lib/components/ExcelFile/ExcelFile/Excel/Copied.d.ts +0 -3
  109. package/lib/components/ExcelFile/ExcelFile/Excel/CornerIndicator.d.ts +0 -5
  110. package/lib/components/ExcelFile/ExcelFile/Excel/DataEditor.d.ts +0 -5
  111. package/lib/components/ExcelFile/ExcelFile/Excel/DataViewer.d.ts +0 -8
  112. package/lib/components/ExcelFile/ExcelFile/Excel/FloatingRect.d.ts +0 -10
  113. package/lib/components/ExcelFile/ExcelFile/Excel/HeaderRow.d.ts +0 -3
  114. package/lib/components/ExcelFile/ExcelFile/Excel/Row.d.ts +0 -3
  115. package/lib/components/ExcelFile/ExcelFile/Excel/RowIndicator.d.ts +0 -5
  116. package/lib/components/ExcelFile/ExcelFile/Excel/Selected.d.ts +0 -3
  117. package/lib/components/ExcelFile/ExcelFile/Excel/Spreadsheet.d.ts +0 -80
  118. package/lib/components/ExcelFile/ExcelFile/Excel/Table.d.ts +0 -3
  119. package/lib/components/ExcelFile/ExcelFile/Excel/actions.d.ts +0 -174
  120. package/lib/components/ExcelFile/ExcelFile/Excel/areModelsEqual.d.ts +0 -1
  121. package/lib/components/ExcelFile/ExcelFile/Excel/context.d.ts +0 -8
  122. package/lib/components/ExcelFile/ExcelFile/Excel/engine/engine.d.ts +0 -22
  123. package/lib/components/ExcelFile/ExcelFile/Excel/engine/formula.d.ts +0 -17
  124. package/lib/components/ExcelFile/ExcelFile/Excel/engine/index.d.ts +0 -2
  125. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-graph.d.ts +0 -21
  126. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-hash.d.ts +0 -3
  127. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-set.d.ts +0 -24
  128. package/lib/components/ExcelFile/ExcelFile/Excel/index.d.ts +0 -13
  129. package/lib/components/ExcelFile/ExcelFile/Excel/matrix.d.ts +0 -67
  130. package/lib/components/ExcelFile/ExcelFile/Excel/point-range.d.ts +0 -22
  131. package/lib/components/ExcelFile/ExcelFile/Excel/point.d.ts +0 -11
  132. package/lib/components/ExcelFile/ExcelFile/Excel/reducer.d.ts +0 -27
  133. package/lib/components/ExcelFile/ExcelFile/Excel/selection.d.ts +0 -95
  134. package/lib/components/ExcelFile/ExcelFile/Excel/types.d.ts +0 -178
  135. package/lib/components/ExcelFile/ExcelFile/Excel/use-dispatch.d.ts +0 -3
  136. package/lib/components/ExcelFile/ExcelFile/Excel/use-selector.d.ts +0 -3
  137. package/lib/components/ExcelFile/ExcelFile/Excel/util.d.ts +0 -44
  138. package/lib/components/ExcelFile/ExcelFile/ExcelFile.d.ts +0 -19
  139. package/lib/components/ExcelFile/ExcelFile.stories.d.ts +0 -6
  140. package/lib/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.d.ts +0 -12
  141. package/lib/components/ExcelFile/ExcelToolBar/ExcelToolBar.d.ts +0 -15
  142. package/lib/components/ExcelFile/ImportExcelStyles.d.ts +0 -24
  143. package/lib/components/ExcelFile/Types.d.ts +0 -129
  144. package/lib/components/ExcelFile/index.d.ts +0 -1
  145. package/lib/components/ExpandableMenu/ExpandableMenu.stories.d.ts +0 -7
  146. package/lib/components/FF_Captcha/captcha.stories.d.ts +0 -8
  147. package/lib/components/FileDropzone/FileDropzone.stories.d.ts +0 -8
  148. package/lib/components/Form/Form.stories.d.ts +0 -7
  149. package/lib/components/GridLayout/GridLayout.stories.d.ts +0 -8
  150. package/lib/components/HighlightText/HighlightText.stories.d.ts +0 -6
  151. package/lib/components/Icon/Icon.stories.d.ts +0 -8
  152. package/lib/components/IconButton/IconButton.stories.d.ts +0 -7
  153. package/lib/components/IconRadioGroup/IconRadioGroup.stories.d.ts +0 -7
  154. package/lib/components/Input/Input.stories.d.ts +0 -9
  155. package/lib/components/InputWithDropdown/InputWithDropdown.stories.d.ts +0 -9
  156. package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +0 -13
  157. package/lib/components/LazyLoad/LazyLoad.stories.d.ts +0 -6
  158. package/lib/components/MachineInputField/MachineInputField.stories.d.ts +0 -6
  159. package/lib/components/MenuOption/MenuOption.stories.d.ts +0 -16
  160. package/lib/components/MiniModal/MiniModal.stories.d.ts +0 -10
  161. package/lib/components/Modal/Modal.stories.d.ts +0 -7
  162. package/lib/components/ModulesChip/ModuleChip.stories.d.ts +0 -6
  163. package/lib/components/MultiSelect/MultiSelect.stories.d.ts +0 -11
  164. package/lib/components/NLPInput/NlpInput.stories.d.ts +0 -7
  165. package/lib/components/NLPInput/type.d.ts +0 -70
  166. package/lib/components/Paper/Paper.stories.d.ts +0 -11
  167. package/lib/components/RadioButton/RadioButton.stories.d.ts +0 -10
  168. package/lib/components/RadioGroup/RadioGroup.stories.d.ts +0 -9
  169. package/lib/components/Search/Search.stories.d.ts +0 -6
  170. package/lib/components/Select/Select.stories.d.ts +0 -14
  171. package/lib/components/Select/components/Dropdown/Dropdown.d.ts +0 -4
  172. package/lib/components/Select/components/Dropdown/dropdownTypes.d.ts +0 -17
  173. package/lib/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.d.ts +0 -6
  174. package/lib/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.d.ts +0 -4
  175. package/lib/components/SequentialConnectingBranch/components/AddBrowserModal/types.d.ts +0 -3
  176. package/lib/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.d.ts +0 -4
  177. package/lib/components/SequentialConnectingBranch/components/DatasetListModal/types.d.ts +0 -3
  178. package/lib/components/StateDropdown/StateDropdown.stories.d.ts +0 -10
  179. package/lib/components/StatusButton/StatusButton.stories.d.ts +0 -14
  180. package/lib/components/StatusCard/StatusCard.stories.d.ts +0 -11
  181. package/lib/components/Table/Table.stories.d.ts +0 -13
  182. package/lib/components/TableTree/TableTree.stories.d.ts +0 -7
  183. package/lib/components/Tabs/Tabs.stories.d.ts +0 -9
  184. package/lib/components/TextArea/Textarea.stories.d.ts +0 -9
  185. package/lib/components/Toast/Toast.stories.d.ts +0 -6
  186. package/lib/components/Toastify/Toastify.stories.d.ts +0 -6
  187. package/lib/components/Toggle/Toggle.stories.d.ts +0 -12
  188. package/lib/components/Tooltip/Tooltip.stories.d.ts +0 -15
  189. package/lib/components/Typography/Typography.stories.d.ts +0 -10
  190. package/lib/components/VariableInput/VariableInput.stories.d.ts +0 -6
  191. package/lib/utils/checkEmpty/checkEmpty.stories.d.ts +0 -6
  192. package/lib/utils/compareArrays/compareArrays.stories.d.ts +0 -6
  193. package/lib/utils/compareObjects/compareObjects.stories.d.ts +0 -6
  194. package/lib/utils/debounce/debounce.stories.d.ts +0 -6
  195. package/lib/utils/ffID/ffID.stories.d.ts +0 -6
  196. package/lib/utils/find/findAndInsert.d.ts +0 -7
  197. package/lib/utils/find/findAndInsert.stories.d.ts +0 -7
  198. package/lib/utils/findAndInsert/findAndInsert.stories.d.ts +0 -7
  199. package/lib/utils/getEncryptedData/getEncryptedData.stories.d.ts +0 -6
  200. package/lib/utils/getExtension/getExtension.stories.d.ts +0 -6
  201. package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +0 -10
  202. package/lib/utils/throttle/throttle.stories.d.ts +0 -6
  203. 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"
@@ -259,6 +259,13 @@ import ExternalUser from '../../assets/icons/external_user.svg?react';
259
259
  import SingleUser from '../../assets/icons/single_user.svg?react';
260
260
  import GroupUser from '../../assets/icons/group_user.svg?react';
261
261
  import TestFreshersLogo from '../../assets/icons/test_freshers_logo.svg?react';
262
+ import Azure from '../../assets/icons/azure.svg?react';
263
+ import Bitbucket from '../../assets/icons/bitbucket.svg?react';
264
+ import Github from '../../assets/icons/github.svg?react';
265
+ import Gitlab from '../../assets/icons/gitlab.svg?react';
266
+ import Jenkins from '../../assets/icons/jenkins.svg?react';
267
+ import JiraLogo from '../../assets/icons/jira_logo.svg?react';
268
+ import Slack from '../../assets/icons/slack.svg?react';
262
269
  import DisableIcon from '../../assets/icons/disable_icon.svg?react';
263
270
  import EnableIcon from '../../assets/icons/enable_icon.svg?react';
264
271
 
@@ -280,6 +287,7 @@ import FileColored from '../../assets/icons/file_colored.svg?react';
280
287
  import JiraColored from '../../assets/icons/jira_colored.svg?react';
281
288
  import Screenshot from '../../assets/icons/screenshot.svg?react';
282
289
  import DeleteFilled from '../../assets/icons/delete_filled.svg?react';
290
+ import PrimaryCalendarIcon from '../../assets/icons/primary_calendar_icon.svg?react'
283
291
 
284
292
  Components['success'] = ToastSuccessIcon;
285
293
  Components['alert'] = Alert;
@@ -534,6 +542,13 @@ Components['unfollow_icon'] = UnfollowIcon;
534
542
  Components['external_user'] = ExternalUser;
535
543
  Components['single_user'] = SingleUser;
536
544
  Components['group_user'] = GroupUser;
545
+ Components['azure'] = Azure;
546
+ Components['bitbucket'] = Bitbucket;
547
+ Components['github'] = Github;
548
+ Components['gitlab'] = Gitlab;
549
+ Components['jenkins'] = Jenkins;
550
+ Components['jira_logo'] = JiraLogo;
551
+ Components['slack'] = Slack;
537
552
  Components['disable_icon'] = DisableIcon;
538
553
  Components['enable_icon'] = EnableIcon;
539
554
  Components['clear_history'] = ClearHistory;
@@ -554,5 +569,6 @@ Components['file_colored'] = FileColored;
554
569
  Components['jira_colored'] = JiraColored;
555
570
  Components['screenshot'] = Screenshot;
556
571
  Components['delete_filled'] = DeleteFilled;
572
+ Components['primary_calendar_icon'] = PrimaryCalendarIcon
557
573
 
558
574
  export default Components;
@@ -1,6 +1,7 @@
1
1
  .ff-fixed-header-table {
2
2
  overflow-y: auto;
3
3
  }
4
+
4
5
  .ff-table-icon {
5
6
  position: absolute;
6
7
  top: 10px;
@@ -12,21 +13,25 @@
12
13
 
13
14
  .ff-table {
14
15
  width: 100%;
16
+
15
17
  th,
16
18
  td {
17
19
  text-align: left;
18
20
  font-size: 12px;
19
21
  padding: 9px 8px;
20
22
  }
23
+
21
24
  thead {
22
25
  tr {
23
26
  th {
24
27
  border-bottom: 1px solid var(--slider-table-color);
25
28
  }
29
+
26
30
  th {
27
31
  .ff-label-checkbox-container {
28
32
  display: flex;
29
33
  align-items: center;
34
+
30
35
  .ff-table-checkbox {
31
36
  padding-right: 8px;
32
37
  }
@@ -34,19 +39,42 @@
34
39
  }
35
40
  }
36
41
  }
42
+
37
43
  tbody {
38
44
  tr {
39
45
  .action-column {
40
46
  opacity: 0;
41
47
  }
48
+
42
49
  .icon-container {
43
- padding-left: 10px;
50
+ padding-left: 8px;
44
51
  opacity: 0;
45
52
  display: flex;
46
53
  justify-content: flex-end;
47
54
  transition: opacity 0.3s ease, transform 0.3s ease;
48
55
  transform: translateX(20px);
49
56
  }
57
+
58
+ .ff-data-checkbox-container {
59
+ display: flex;
60
+ align-items: center;
61
+
62
+ .ff-table-checkbox {
63
+ padding-right: 8px;
64
+ }
65
+
66
+ .ff-table-drag {
67
+ opacity: 0;
68
+ transition: opacity 0.3s ease, transform 0.3s ease;
69
+ }
70
+
71
+ .ff-table-drag-icon {
72
+ opacity: 0;
73
+ transition: opacity 0.3s ease, transform 0.3s ease;
74
+ cursor: grab;
75
+ }
76
+ }
77
+
50
78
  &:hover {
51
79
  background-color: var(--hover-color);
52
80
 
@@ -54,7 +82,13 @@
54
82
  opacity: 1;
55
83
  transform: translateX(0);
56
84
  }
85
+
86
+ .ff-table-drag,
87
+ .ff-table-drag-icon {
88
+ opacity: 1;
89
+ }
57
90
  }
91
+
58
92
  td {
59
93
  position: relative;
60
94
  color: var(--table-column-text-color);
@@ -63,36 +97,34 @@
63
97
  cursor: pointer;
64
98
  }
65
99
  }
66
- td {
67
- .ff-data-checkbox-container {
68
- display: flex;
69
- align-items: center;
70
- .ff-table-checkbox {
71
- padding-right: 8px;
72
- }
73
- }
74
- }
75
100
  }
76
101
  }
102
+
77
103
  .primary-bg {
78
104
  background-color: var(--brand-color);
79
105
  }
106
+
80
107
  .secondary-bg {
81
108
  background-color: var(--slider-table-color);
82
109
  }
110
+
83
111
  .tertiary-bg {
84
112
  background-color: var(--custom-table-header-bg-color);
85
113
  }
114
+
86
115
  .default-bg {
87
116
  background-color: transparent;
88
117
  }
118
+
89
119
  .default-color {
90
120
  color: var(--table-header-text-color);
91
121
  }
122
+
92
123
  .primary-color {
93
124
  color: var(--brand-color);
94
125
  }
95
126
  }
127
+
96
128
  .border-borderRadius {
97
129
  border: 1px solid var(--slider-table-color);
98
130
  border-radius: 5px;
@@ -105,6 +137,7 @@
105
137
  z-index: 99;
106
138
  background-color: Var(--file-details-bg);
107
139
  }
140
+
108
141
  .no-data-content {
109
142
  display: flex;
110
143
  flex-direction: column;
@@ -115,4 +148,4 @@
115
148
  tbody tr.disabled-row {
116
149
  opacity: 0.5;
117
150
  cursor: not-allowed;
118
- }
151
+ }
@@ -2,7 +2,8 @@ import React from 'react';
2
2
  import { useEffect, useState } from 'react';
3
3
  import { StoryObj, Meta } from '@storybook/react';
4
4
  import Table from './Table';
5
-
5
+ import { ffid } from '../../utils/ffID/ffid';
6
+ import { rearrangeDragItem } from '../../utils/swapArrayItem/dragAndDropUtils';
6
7
  const meta: Meta<typeof Table> = {
7
8
  title: 'Components/Table',
8
9
  component: Table,
@@ -20,6 +21,7 @@ const defaultArgs = {
20
21
  const sampleData = [
21
22
  {
22
23
  project: {
24
+ id: ffid(),
23
25
  modifiedByUname: 'user4',
24
26
  modifiedOn: '18-03-2024 10:47',
25
27
  name: 'Test1',
@@ -31,6 +33,7 @@ const sampleData = [
31
33
  },
32
34
  {
33
35
  project: {
36
+ id: ffid(),
34
37
  modifiedByUname: 'user3',
35
38
  modifiedOn: '13-03-2024 15:15',
36
39
  name: 'Test2',
@@ -42,6 +45,7 @@ const sampleData = [
42
45
  },
43
46
  {
44
47
  project: {
48
+ id: ffid(),
45
49
  modifiedByUname: 'user2',
46
50
  modifiedOn: '13-03-2024 15:30',
47
51
  name: 'Test3',
@@ -53,6 +57,7 @@ const sampleData = [
53
57
  },
54
58
  {
55
59
  project: {
60
+ id: ffid(),
56
61
  modifiedByUname: 'user1',
57
62
  modifiedOn: '18-03-2024 15:36',
58
63
  name: 'Test4',
@@ -64,6 +69,7 @@ const sampleData = [
64
69
  },
65
70
  {
66
71
  project: {
72
+ id: ffid(),
67
73
  modifiedByUname: 'user4',
68
74
  modifiedOn: '18-03-2024 10:47',
69
75
  name: 'Test1',
@@ -75,6 +81,7 @@ const sampleData = [
75
81
  },
76
82
  {
77
83
  project: {
84
+ id: ffid(),
78
85
  modifiedByUname: 'user3',
79
86
  modifiedOn: '13-03-2024 15:15',
80
87
  name: 'Test2',
@@ -86,6 +93,7 @@ const sampleData = [
86
93
  },
87
94
  {
88
95
  project: {
96
+ id: ffid(),
89
97
  modifiedByUname: 'user2',
90
98
  modifiedOn: '13-03-2024 15:30',
91
99
  name: 'Test3',
@@ -97,6 +105,7 @@ const sampleData = [
97
105
  },
98
106
  {
99
107
  project: {
108
+ id: ffid(),
100
109
  modifiedByUname: 'user1',
101
110
  modifiedOn: '18-03-2024 15:36',
102
111
  name: 'Test4',
@@ -108,6 +117,7 @@ const sampleData = [
108
117
  },
109
118
  {
110
119
  project: {
120
+ id: ffid(),
111
121
  modifiedByUname: 'user4',
112
122
  modifiedOn: '18-03-2024 10:47',
113
123
  name: 'Test1',
@@ -119,6 +129,7 @@ const sampleData = [
119
129
  },
120
130
  {
121
131
  project: {
132
+ id: ffid(),
122
133
  modifiedByUname: 'user3',
123
134
  modifiedOn: '13-03-2024 15:15',
124
135
  name: 'Test2',
@@ -130,6 +141,7 @@ const sampleData = [
130
141
  },
131
142
  {
132
143
  project: {
144
+ id: ffid(),
133
145
  modifiedByUname: 'user2',
134
146
  modifiedOn: '13-03-2024 15:30',
135
147
  name: 'Test3',
@@ -141,6 +153,7 @@ const sampleData = [
141
153
  },
142
154
  {
143
155
  project: {
156
+ id: ffid(),
144
157
  modifiedByUname: 'user1',
145
158
  modifiedOn: '18-03-2024 15:36',
146
159
  name: 'Test4',
@@ -247,6 +260,7 @@ export const PageTable: Story = {
247
260
  );
248
261
  },
249
262
  };
263
+
250
264
  export const PrimaryHeader: Story = {
251
265
  args: {
252
266
  ...defaultArgs,
@@ -370,4 +384,49 @@ export const TableWithNoData: Story = {
370
384
  );
371
385
  },
372
386
  };
387
+
388
+ export const DragAndDropTable: Story = {
389
+ args: {
390
+ ...defaultArgs,
391
+ data: sampleData.map((x) => x.project),
392
+
393
+ columns: columnsData,
394
+ tableDataTextColor: 'var(--brand-color)',
395
+ },
396
+ render: () => {
397
+ // important prerequisite tableData should have unique IDs
398
+ const [tableData, setTableData] = useState(
399
+ sampleData.map((data) => data.project)
400
+ );
401
+ useEffect(() => {
402
+ let sampleArray: any = [];
403
+ sampleData.forEach((data) => {
404
+ sampleArray.push(data.project);
405
+ });
406
+ setTableData(sampleArray);
407
+ }, []);
408
+
409
+ const handleIconClick = () => {};
410
+
411
+ const onDragEnd = (oldIndex: number, newIndex: number) => {
412
+ const updatedData = rearrangeDragItem(tableData, oldIndex, newIndex);
413
+ setTableData(updatedData);
414
+ };
415
+ return (
416
+ <>
417
+ <Table
418
+ draggable
419
+ onDragEnd={onDragEnd}
420
+ {...defaultArgs}
421
+ data={tableData}
422
+ columns={columnsData}
423
+ headerType="secondary"
424
+ noDataContent="No data found"
425
+ headerIconName={'expand_icon'}
426
+ headerIconOnClick={handleIconClick}
427
+ />
428
+ </>
429
+ );
430
+ },
431
+ };
373
432
  export default meta;