pixel-react 1.10.4 → 1.10.6

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 (153) hide show
  1. package/lib/ComponentProps/TreeNodeProps.d.ts +2 -1
  2. package/lib/components/AddResourceButton/AddResourceButton.d.ts +4 -0
  3. package/lib/components/AddResourceButton/ArrowsButton/ArrowsButton.d.ts +1 -1
  4. package/lib/components/AddResourceButton/index.d.ts +1 -1
  5. package/lib/components/AddResourceButton/type.d.ts +2 -0
  6. package/lib/components/BrowserTabs/BrowserTabs.d.ts +5 -0
  7. package/lib/components/BrowserTabs/index.d.ts +1 -0
  8. package/lib/components/BrowserTabs/types.d.ts +64 -0
  9. package/lib/components/ConnectingBranch/data.d.ts +62 -64
  10. package/lib/components/ConnectingBranch/types.d.ts +28 -7
  11. package/lib/components/Excel/ExcelFile/ExcelFile.d.ts +6 -1
  12. package/lib/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.d.ts +3 -0
  13. package/lib/components/Excel/ExcelFile/ExcelFileComponents/actions.d.ts +15 -1
  14. package/lib/components/Excel/ExcelFile/ExcelFileComponents/types.d.ts +5 -0
  15. package/lib/components/Excel/Types.d.ts +1 -0
  16. package/lib/components/MenuOption/MenuOption.d.ts +1 -1
  17. package/lib/components/MenuOption/types.d.ts +1 -0
  18. package/lib/components/MiniModal/types.d.ts +2 -1
  19. package/lib/components/Select/components/types.d.ts +6 -1
  20. package/lib/components/Select/types.d.ts +17 -0
  21. package/lib/components/Table/Table.d.ts +1 -1
  22. package/lib/components/Table/Types.d.ts +1 -0
  23. package/lib/components/TableTree/Components/TableCell.d.ts +1 -1
  24. package/lib/components/TableTree/Components/TableRow.d.ts +1 -1
  25. package/lib/components/TableTree/types.d.ts +4 -3
  26. package/lib/index.d.ts +127 -13
  27. package/lib/index.esm.js +992 -462
  28. package/lib/index.esm.js.map +1 -1
  29. package/lib/index.js +993 -462
  30. package/lib/index.js.map +1 -1
  31. package/lib/tsconfig.tsbuildinfo +1 -1
  32. package/package.json +1 -1
  33. package/src/ComponentProps/TreeNodeProps.ts +2 -1
  34. package/src/assets/Themes/BaseTheme.scss +1 -2
  35. package/src/assets/Themes/DarkTheme.scss +0 -1
  36. package/src/assets/styles/_mixins.scss +19 -0
  37. package/src/components/AddResourceButton/{AddButton.scss → AddResourceButton.scss} +1 -0
  38. package/src/components/AddResourceButton/{AddButton.stories.tsx → AddResourceButton.stories.tsx} +4 -4
  39. package/src/components/AddResourceButton/{AddButton.tsx → AddResourceButton.tsx} +25 -10
  40. package/src/components/AddResourceButton/ArrowsButton/ArrowsButton.scss +1 -2
  41. package/src/components/AddResourceButton/ArrowsButton/ArrowsButton.tsx +16 -9
  42. package/src/components/AddResourceButton/index.ts +1 -1
  43. package/src/components/AddResourceButton/type.ts +2 -0
  44. package/src/components/BrowserTabs/BrowserTabs.scss +75 -0
  45. package/src/components/BrowserTabs/BrowserTabs.stories.tsx +366 -0
  46. package/src/components/BrowserTabs/BrowserTabs.tsx +128 -0
  47. package/src/components/BrowserTabs/index.ts +1 -0
  48. package/src/components/BrowserTabs/types.ts +73 -0
  49. package/src/components/ConnectingBranch/BranchComponents/MachineInstances.tsx +54 -39
  50. package/src/components/ConnectingBranch/ConnectingBranch.stories.tsx +3 -2
  51. package/src/components/ConnectingBranch/ConnectingBranch.tsx +28 -24
  52. package/src/components/ConnectingBranch/data.tsx +207 -213
  53. package/src/components/ConnectingBranch/types.ts +26 -17
  54. package/src/components/Excel/ColorBarSelector/ColorBarSelector.tsx +1 -1
  55. package/src/components/Excel/ExcelFile/ExcelFile.scss +4 -0
  56. package/src/components/Excel/ExcelFile/ExcelFile.tsx +35 -16
  57. package/src/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.tsx +14 -3
  58. package/src/components/Excel/ExcelFile/ExcelFileComponents/DataEditor.tsx +1 -0
  59. package/src/components/Excel/ExcelFile/ExcelFileComponents/RowIndicator.tsx +16 -5
  60. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +12 -1
  61. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx +31 -5
  62. package/src/components/Excel/ExcelFile/ExcelFileComponents/actions.ts +30 -0
  63. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +47 -0
  64. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +4 -4
  65. package/src/components/Excel/ExcelFile/ExcelFileComponents/types.ts +6 -0
  66. package/src/components/Excel/ExcelFile.stories.tsx +10 -2
  67. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +11 -11
  68. package/src/components/Excel/Types.ts +1 -0
  69. package/src/components/Excel/dataConversion.ts +17 -19
  70. package/src/components/MenuOption/MenuOption.tsx +4 -0
  71. package/src/components/MenuOption/types.ts +1 -0
  72. package/src/components/MiniModal/MiniModal.scss +8 -0
  73. package/src/components/MiniModal/MiniModal.stories.tsx +60 -0
  74. package/src/components/MiniModal/types.ts +2 -1
  75. package/src/components/Select/Select.stories.tsx +43 -1
  76. package/src/components/Select/Select.tsx +16 -1
  77. package/src/components/Select/components/Dropdown.scss +41 -1
  78. package/src/components/Select/components/Dropdown.tsx +52 -6
  79. package/src/components/Select/components/types.ts +7 -2
  80. package/src/components/Select/types.ts +22 -0
  81. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.tsx +8 -2
  82. package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +1 -1
  83. package/src/components/SequentialConnectingBranch/components/DatasetTooltip/DataSetTooltip.scss +14 -0
  84. package/src/components/SequentialConnectingBranch/components/DatasetTooltip/DataSetTooltip.tsx +6 -11
  85. package/src/components/Table/Table.stories.tsx +1 -1
  86. package/src/components/Table/Table.tsx +55 -4
  87. package/src/components/Table/Types.ts +4 -1
  88. package/src/components/TableTree/Components/TableCell.tsx +25 -10
  89. package/src/components/TableTree/Components/TableHead.tsx +5 -5
  90. package/src/components/TableTree/Components/TableRow.tsx +27 -24
  91. package/src/components/TableTree/TableTree.scss +89 -69
  92. package/src/components/TableTree/TableTree.stories.tsx +66 -2
  93. package/src/components/TableTree/types.ts +4 -3
  94. package/src/index.ts +2 -0
  95. package/src/utils/getTreeDetails/getTreeDetails.ts +8 -7
  96. package/lib/StyleGuide/ColorPalette/ColorPalette.stories.d.ts +0 -6
  97. package/lib/StyleGuide/Typography/Typography.stories.d.ts +0 -6
  98. package/lib/components/Accordion/Accordion.stories.d.ts +0 -6
  99. package/lib/components/AddResourceButton/AddButton.stories.d.ts +0 -8
  100. package/lib/components/Button/Button.stories.d.ts +0 -12
  101. package/lib/components/Charts/DonutChart/DonutChart.stories.d.ts +0 -6
  102. package/lib/components/Charts/RadialChart/RadialChart.stories.d.ts +0 -6
  103. package/lib/components/Checkbox/Checkbox.stories.d.ts +0 -8
  104. package/lib/components/Chip/Chip.stories.d.ts +0 -14
  105. package/lib/components/DatePicker/DatePicker.stories.d.ts +0 -9
  106. package/lib/components/DragAndDrop/DragAndDrop.stories.d.ts +0 -6
  107. package/lib/components/Drawer/Drawer.stories.d.ts +0 -7
  108. package/lib/components/ExpandableMenu/ExpandableMenu.stories.d.ts +0 -7
  109. package/lib/components/FileDropzone/FileDropzone.stories.d.ts +0 -8
  110. package/lib/components/Form/Form.stories.d.ts +0 -6
  111. package/lib/components/GridLayout/GridLayout.stories.d.ts +0 -8
  112. package/lib/components/HighlightText/HighlightText.stories.d.ts +0 -6
  113. package/lib/components/Icon/Icon.stories.d.ts +0 -7
  114. package/lib/components/IconButton/IconButton.stories.d.ts +0 -6
  115. package/lib/components/Input/Input.stories.d.ts +0 -9
  116. package/lib/components/InputWithDropdown/InputWithDropdown.stories.d.ts +0 -9
  117. package/lib/components/LazyLoad/LazyLoad.stories.d.ts +0 -6
  118. package/lib/components/MenuOption/MenuOption.stories.d.ts +0 -15
  119. package/lib/components/MiniModal/MiniModal.stories.d.ts +0 -9
  120. package/lib/components/Modal/Modal.stories.d.ts +0 -7
  121. package/lib/components/MultiSelect/MultiSelect.stories.d.ts +0 -9
  122. package/lib/components/RadioButton/RadioButton.stories.d.ts +0 -10
  123. package/lib/components/RadioGroup/RadioGroup.stories.d.ts +0 -8
  124. package/lib/components/Search/Search.stories.d.ts +0 -6
  125. package/lib/components/Select/Select.stories.d.ts +0 -13
  126. package/lib/components/Select/components/Dropdown/Dropdown.d.ts +0 -4
  127. package/lib/components/Select/components/Dropdown/dropdownTypes.d.ts +0 -15
  128. package/lib/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.d.ts +0 -4
  129. package/lib/components/SequentialConnectingBranch/components/AddBrowserModal/types.d.ts +0 -3
  130. package/lib/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.d.ts +0 -4
  131. package/lib/components/SequentialConnectingBranch/components/DatasetListModal/types.d.ts +0 -3
  132. package/lib/components/StateDropdown/StateDropdown.stories.d.ts +0 -10
  133. package/lib/components/StatusButton/StatusButton.stories.d.ts +0 -14
  134. package/lib/components/Table/Table.stories.d.ts +0 -11
  135. package/lib/components/TableTree/TableTree.stories.d.ts +0 -7
  136. package/lib/components/Tabs/Tabs.stories.d.ts +0 -9
  137. package/lib/components/TextArea/Textarea.stories.d.ts +0 -9
  138. package/lib/components/ThemeProvider/CustomThemeProvider.d.ts +0 -8
  139. package/lib/components/Toast/Toast.stories.d.ts +0 -6
  140. package/lib/components/Toggle/Toggle.stories.d.ts +0 -12
  141. package/lib/components/Tooltip/Tooltip.stories.d.ts +0 -15
  142. package/lib/components/Typography/Typography.stories.d.ts +0 -10
  143. package/lib/hooks/useCustomThemeProvider.d.ts +0 -11
  144. package/lib/utils/checkEmpty/checkEmpty.stories.d.ts +0 -6
  145. package/lib/utils/compareArrays/compareArrays.stories.d.ts +0 -6
  146. package/lib/utils/compareObjects/compareObjects.stories.d.ts +0 -6
  147. package/lib/utils/debounce/debounce.stories.d.ts +0 -6
  148. package/lib/utils/ffID/ffID.stories.d.ts +0 -6
  149. package/lib/utils/find/findAndInsert.d.ts +0 -7
  150. package/lib/utils/find/findAndInsert.stories.d.ts +0 -7
  151. package/lib/utils/getExtension/getExtension.stories.d.ts +0 -6
  152. package/lib/utils/throttle/throttle.stories.d.ts +0 -6
  153. package/lib/utils/truncateText/truncateText.stories.d.ts +0 -6
@@ -736,5 +736,65 @@ export const normalModalFollowedByIcon = () => {
736
736
  </div>
737
737
  );
738
738
  };
739
+ export const NormalModalWithLoop = () => {
740
+ const { currentModal, openModal, closeModal } = useModal();
741
+
742
+ const modelItems = ['one', 'two', 'three', 'four'];
743
+ const structuredArray = modelItems.map((value, index) => ({
744
+ id: `${index + 1}`,
745
+ value: value,
746
+ }));
747
+
748
+ const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);
749
+
750
+ const getButtonPosition = (index: number) => {
751
+ const button = buttonRefs.current[index];
752
+ if (button) {
753
+ const { top, left, height } = button.getBoundingClientRect();
754
+ return { top: top + height, left };
755
+ }
756
+ return { top: 0, left: 0 };
757
+ };
739
758
 
759
+ return (
760
+ <div className="ff-mini-modal-loop">
761
+ {structuredArray.map((data, index) => (
762
+ <div key={data.id} className="ff-mini-modal-loop-div">
763
+ <p>{data.value}</p>
764
+ <Button
765
+ variant="primary"
766
+ ref={(el) => (buttonRefs.current[index] = el)}
767
+ onClick={() => openModal(Number(data.id))}
768
+ id={data.id}
769
+ label={data.id}
770
+ />
771
+
772
+ {currentModal === Number(data.id) && (
773
+ <MiniModal
774
+ id={data.id}
775
+ modalProperties={{
776
+ width: 168,
777
+ height: 108,
778
+ top: getButtonPosition(index).top,
779
+ left: getButtonPosition(index).left,
780
+ }}
781
+ overlay={{
782
+ isOverlay: true,
783
+ zIndexOverlay: 99,
784
+ }}
785
+ childContent={
786
+ <Typography as="p">
787
+ This is some content inside the modal for {data.value}.
788
+ </Typography>
789
+ }
790
+ isIconModel={true}
791
+ isAnimated={true}
792
+ outSideClick={closeModal}
793
+ />
794
+ )}
795
+ </div>
796
+ ))}
797
+ </div>
798
+ );
799
+ };
740
800
  export default meta;
@@ -13,7 +13,8 @@ export interface MiniEditModalProps {
13
13
  /**
14
14
  * A reference to the button element that triggers the modal.
15
15
  */
16
- anchorRef: RefObject<HTMLButtonElement> | string;
16
+ anchorRef?: RefObject<HTMLButtonElement> | string;
17
+ id?: string | number;
17
18
  /**
18
19
  * Optional properties for configuring the modal header.
19
20
  */
@@ -44,6 +44,11 @@ export const Primary: Story = {
44
44
  value: 'fire-flink-LIC4999',
45
45
  name: 'lambda test',
46
46
  },
47
+ {
48
+ label: 'fire-flink-LIC4999',
49
+ value: 'fire-flink-LIC4999',
50
+ name: 'lambda test',
51
+ },
47
52
  ],
48
53
  },
49
54
  };
@@ -160,6 +165,22 @@ export const OptionSelection: Story = {
160
165
  label: 'fire-flink-LIC4999',
161
166
  value: 'fire-flink-LIC4999',
162
167
  },
168
+ {
169
+ label: 'fire-flink-LIC4999',
170
+ value: 'fire-flink-LIC4999',
171
+ },
172
+ {
173
+ label: 'fire-flink-LIC4999',
174
+ value: 'fire-flink-LIC4999',
175
+ },
176
+ {
177
+ label: 'fire-flink-LIC4999',
178
+ value: 'fire-flink-LIC4999',
179
+ },
180
+ {
181
+ label: 'fire-flink-LIC4999',
182
+ value: 'fire-flink-LIC4999',
183
+ },
163
184
  ];
164
185
 
165
186
  const [selectedOption, setSelectedOption] = useState<Option>({
@@ -412,10 +433,23 @@ export const SelectWithToolTip: Story = {
412
433
  label: 'fire-flink-LIC4937',
413
434
  value: 'fire-flink-LIC4937',
414
435
  },
436
+ {
437
+ label: 'fire-flink-LIC5937',
438
+ value: 'fire-flink-LIC5937',
439
+ },
440
+ {
441
+ label: 'fire-flink-LIC6937',
442
+ value: 'fire-flink-LIC6937',
443
+ },
444
+ {
445
+ label: 'fire-flink-LIC7937',
446
+ value: 'fire-flink-LIC7937',
447
+ },
415
448
  {
416
449
  label: 'fire-flink-LIC4999',
417
450
  value: 'fire-flink-LIC4999',
418
- },
451
+ recurrence: true,
452
+ },
419
453
  ];
420
454
 
421
455
  const [selectedOption, setSelectedOption] = useState<Option>({
@@ -427,6 +461,12 @@ export const SelectWithToolTip: Story = {
427
461
  setSelectedOption(option);
428
462
  };
429
463
 
464
+ const getMiniModalJSX = () => (
465
+ <>
466
+ <h1>Test Mini Modal</h1>
467
+ </>
468
+ );
469
+
430
470
  return (
431
471
  <Select
432
472
  optionsList={optionsList}
@@ -434,6 +474,8 @@ export const SelectWithToolTip: Story = {
434
474
  onChange={handleChange}
435
475
  label="Select Option"
436
476
  showToolTip={true}
477
+ modalJSXProps={getMiniModalJSX()}
478
+ recurrence
437
479
  />
438
480
  );
439
481
  },
@@ -34,10 +34,15 @@ const Select: FC<SelectProps> = ({
34
34
  showIcon = false,
35
35
  placeHolder = '',
36
36
  showToolTip = false,
37
+ onCancelModal = () => {},
38
+ onSaveModal = () => {},
39
+ modalJSXProps = <></>,
40
+ recurrence = false,
37
41
  }) => {
38
42
  const selectWidth = typeof width === 'number' ? `${width}px` : width;
39
43
 
40
44
  const [showDropdownOptions, setShowDropdownOptions] = useState(false);
45
+ const [customRecurrence, setCustomRecurrence] = useState(false);
41
46
  const [searchedOption, setSearchedOption] = useState<any>({
42
47
  searchedText: '',
43
48
  searchedIcon: '',
@@ -124,12 +129,14 @@ const Select: FC<SelectProps> = ({
124
129
  searchedIcon: selectedOption.iconName,
125
130
  });
126
131
  setSelectOptionList(optionsList);
132
+ setCustomRecurrence(false);
127
133
  onBlur();
128
134
  };
129
135
 
130
136
  const onSelectOptionSelector = (option: Option): void => {
131
137
  if (disabled) return;
132
- onSelectBlur();
138
+ const isCustomRecurrence = option?.recurrence || false;
139
+ setCustomRecurrence(isCustomRecurrence);
133
140
  setSearchedOption({
134
141
  searchedText: getValue(selectedOption, valueAccessor),
135
142
  searchedIcon: selectedOption.iconName,
@@ -137,6 +144,9 @@ const Select: FC<SelectProps> = ({
137
144
  if (onChange) {
138
145
  onChange(option);
139
146
  }
147
+ if (!isCustomRecurrence) {
148
+ onSelectBlur();
149
+ }
140
150
  };
141
151
 
142
152
  const handleResizeOrScroll = () => onSelectUpdatePosition();
@@ -277,6 +287,11 @@ const Select: FC<SelectProps> = ({
277
287
  selectedOption={searchedText}
278
288
  showIcon={showIcon}
279
289
  showToolTip={showToolTip}
290
+ customReccurenece={customRecurrence}
291
+ onSaveModal={onSaveModal}
292
+ onCancelModal={onCancelModal}
293
+ modalJSXProps={modalJSXProps}
294
+ recurrence={recurrence}
280
295
  />,
281
296
  document.body
282
297
  )}
@@ -1,4 +1,5 @@
1
- .ff-select-dropdown-wrapper {
1
+ .ff-select-dropdown-wrapper,
2
+ .ff-select-dropdown-mini-modal-wrapper {
2
3
  max-height: 160px;
3
4
  z-index: 999999;
4
5
  position: absolute;
@@ -59,3 +60,42 @@
59
60
  cursor: not-allowed;
60
61
  }
61
62
  }
63
+
64
+ .ff-select-dropdown-modal-wrapper {
65
+ max-height: 256px;
66
+ }
67
+
68
+ .ff-select-dropdown-mini-modal-wrapper {
69
+ display: flex;
70
+ justify-content: space-between;
71
+
72
+ .ff-select-label-minimodal-wrapper {
73
+ width: calc(50% - 4px);
74
+ }
75
+ .ff-select-mini-modal-wrapper {
76
+ width: 50%;
77
+ padding: 8px 2px 0px 4px;
78
+ display: flex;
79
+ align-items: flex-end;
80
+ margin-left: 4px;
81
+ border-left: 1px dashed var(--border-color);
82
+
83
+ .ff-select-modal-wrapper {
84
+ height: fit-content;
85
+ width: calc(100% - 4px);
86
+ border-radius: 8px;
87
+ border: 1px solid var(--ff-select-background-color);
88
+ box-shadow: 0px 1px 8px 0px var(--ff-select-option-wrapper-box-shadow);
89
+ border: 1px solid var(--border-color);
90
+
91
+ .ff-select-mini-modal-footer {
92
+ min-height: 32px;
93
+ border-top: 1px solid var(--border-color);
94
+ display: flex;
95
+ align-items: center;
96
+ justify-content: flex-end;
97
+ gap: 8px;
98
+ }
99
+ }
100
+ }
101
+ }
@@ -6,12 +6,11 @@ import Typography from '../../Typography';
6
6
  import { ffid } from '../../../utils/ffID/ffid';
7
7
  import { ThemeContext } from '../../ThemeProvider/ThemeProvider';
8
8
  import classNames from 'classnames';
9
- import {
10
- getLabel,
11
- } from '../../../utils/getSelectOptionValue/getSelectOptionValue';
9
+ import { getLabel } from '../../../utils/getSelectOptionValue/getSelectOptionValue';
12
10
  import useClickOutside from '../../../hooks/useClickOutside';
13
11
  import Icon from '../../Icon';
14
12
  import Tooltip from '../../Tooltip';
13
+ import Button from '../../Button';
15
14
 
16
15
  const Dropdown: FC<DropdownProps> = ({
17
16
  options = [],
@@ -27,12 +26,22 @@ const Dropdown: FC<DropdownProps> = ({
27
26
  valueAccessor,
28
27
  showIcon = false,
29
28
  showToolTip = false,
29
+ customReccurenece = true,
30
+ onCancelModal = () => {},
31
+ onSaveModal = () => {},
32
+ recurrence = false,
33
+ modalJSXProps = <></>,
30
34
  }) => {
31
35
  const themeContext = useContext(ThemeContext);
32
36
  const currentTheme = themeContext?.currentTheme;
33
37
 
38
+ const customRecurrenceOnBlur = customReccurenece ? () => {} : onSelectBlur;
39
+
34
40
  const optionsWrapperRef = useRef<HTMLDivElement>(null);
35
- useClickOutside(optionsWrapperRef, onSelectBlur, [inputRef, selectArrowRef]);
41
+ useClickOutside(optionsWrapperRef, customRecurrenceOnBlur, [
42
+ inputRef,
43
+ selectArrowRef,
44
+ ]);
36
45
 
37
46
  const { positionX, positionY, fromBottom, width } = dropdownPosition;
38
47
  const { margin, optionHeight, selectInputHeight, dropDownWrapperPadding } =
@@ -98,13 +107,30 @@ const Dropdown: FC<DropdownProps> = ({
98
107
  );
99
108
  };
100
109
 
110
+ const onHandleCancelModal = () => {
111
+ onSelectBlur();
112
+ onCancelModal();
113
+ };
114
+
115
+ const onHandleSaveModal = () => {
116
+ onSelectBlur();
117
+ onSaveModal();
118
+ };
119
+
101
120
  return (
102
121
  <div
103
- className={classNames('ff-select-dropdown-wrapper', currentTheme)}
122
+ className={classNames('ff-select-dropdown-wrapper', currentTheme, {
123
+ 'ff-select-dropdown-modal-wrapper': recurrence,
124
+ 'ff-select-dropdown-mini-modal-wrapper': customReccurenece,
125
+ })}
104
126
  ref={optionsWrapperRef}
105
127
  style={updateDropdownPosition()}
106
128
  >
107
- <div>
129
+ <div
130
+ className={classNames({
131
+ 'ff-select-label-minimodal-wrapper': customReccurenece,
132
+ })}
133
+ >
108
134
  {!checkEmpty(options) ? (
109
135
  options.map((option) => (
110
136
  <div
@@ -140,6 +166,26 @@ const Dropdown: FC<DropdownProps> = ({
140
166
  </Typography>
141
167
  )}
142
168
  </div>
169
+
170
+ {customReccurenece && (
171
+ <div className="ff-select-mini-modal-wrapper" id="ff-select-mini-id">
172
+ <div className="ff-select-modal-wrapper">
173
+ {<>{modalJSXProps}</>}
174
+ <div className="ff-select-mini-modal-footer">
175
+ <Button
176
+ label="Cancel"
177
+ variant="tertiary"
178
+ onClick={onHandleCancelModal}
179
+ />
180
+ <Button
181
+ label="Save"
182
+ variant="secondary"
183
+ onClick={onHandleSaveModal}
184
+ />
185
+ </div>
186
+ </div>
187
+ </div>
188
+ )}
143
189
  </div>
144
190
  );
145
191
  };
@@ -1,5 +1,5 @@
1
1
  import { DropdownPosition, Option } from '../types';
2
- import { RefObject } from 'react';
2
+ import { ReactNode, RefObject } from 'react';
3
3
 
4
4
  export interface DropdownProps {
5
5
  options: Option[];
@@ -14,7 +14,12 @@ export interface DropdownProps {
14
14
  heightFromTop: number;
15
15
  selectedOption?: Option;
16
16
  showIcon?: boolean;
17
- showToolTip?: boolean
17
+ showToolTip?: boolean;
18
+ customReccurenece?: boolean;
19
+ onCancelModal?: () => void;
20
+ onSaveModal?: () => void;
21
+ modalJSXProps?: ReactNode;
22
+ recurrence?: boolean;
18
23
  }
19
24
 
20
25
  export const dropdownDefaultCSSData = {
@@ -1,3 +1,5 @@
1
+ import { ReactNode } from 'react';
2
+
1
3
  export interface SelectProps {
2
4
  /*
3
5
  * Label for the select dropdown
@@ -123,6 +125,26 @@ export interface SelectProps {
123
125
  * Provide the background color for the select label on the hover state
124
126
  */
125
127
  labelBackgroundColor?: string;
128
+
129
+ /**
130
+ * To close the modal in the select dropdown
131
+ */
132
+ onCancelModal?: () => void;
133
+
134
+ /**
135
+ * To close the modal in the select dropdown
136
+ */
137
+ onSaveModal?: () => void;
138
+
139
+ /**
140
+ * Pass the custom Jsx for the Modal
141
+ */
142
+ modalJSXProps?: ReactNode;
143
+
144
+ /**
145
+ * Pass the recurrence boolean for the exeception cases
146
+ */
147
+ recurrence?: boolean;
126
148
  }
127
149
 
128
150
  export interface DropdownPosition {
@@ -21,6 +21,7 @@ export const Primary: Story = {
21
21
  label: 'ffe-Mahesh',
22
22
  value: {
23
23
  status: 'running',
24
+ clientId: 'test',
24
25
  },
25
26
  name: 'ffe-Mahesh',
26
27
  });
@@ -33,6 +34,7 @@ export const Primary: Story = {
33
34
  status: 'running',
34
35
  },
35
36
  name: 'ffe-Ganesh',
37
+ clientId: 'test',
36
38
  },
37
39
  {
38
40
  label: 'ffe-Mahesh',
@@ -40,6 +42,7 @@ export const Primary: Story = {
40
42
  status: 'running',
41
43
  },
42
44
  name: 'ffe-Mahesh',
45
+ clientId: 'test',
43
46
  },
44
47
  ];
45
48
 
@@ -52,8 +55,10 @@ export const Primary: Story = {
52
55
  return (
53
56
  <>
54
57
  <SequentialConnectingBranch
55
- projectType="web"
56
58
  dataSetValues={{
59
+ globalVariableSetName: 'test dev',
60
+ peVariableSetName: 'test dev',
61
+ testDataSetName: 'test dev',
57
62
  peVariableSetId: 'Test dev',
58
63
  globalVariableSetId: 'Test dev',
59
64
  testDataSetId: 'Test dev',
@@ -64,7 +69,8 @@ export const Primary: Story = {
64
69
  machineInstances={[]}
65
70
  selectedMachine={machineSelect}
66
71
  onHandleSelect={onMachineHandleSelect}
67
- scriptType="Manual"
72
+ // scriptType="Manual"
73
+ readOnly={true}
68
74
  />
69
75
  </>
70
76
  );
@@ -208,7 +208,7 @@ const Branches = ({
208
208
  }
209
209
  />
210
210
  </div>
211
- {!readOnly && (
211
+ {readOnly && (
212
212
  <div
213
213
  className={classNames({
214
214
  'ff-connecting-branch-datalist': evenRow,
@@ -0,0 +1,14 @@
1
+ @mixin flex-column {
2
+ display: flex;
3
+ flex-direction: column;
4
+ }
5
+
6
+ .dataSetList_container {
7
+ @include flex-column;
8
+ gap: 4px;
9
+ padding: 6px 12px;
10
+
11
+ .dataSetList_items {
12
+ @include flex-column;
13
+ }
14
+ }
@@ -1,5 +1,4 @@
1
1
  import { FC } from 'react';
2
- import Tooltip from '../../../Tooltip';
3
2
  import Typography from '../../../Typography';
4
3
  import { DataSetTooltipProps } from './types';
5
4
 
@@ -18,22 +17,18 @@ const DataSetTooltip: FC<DataSetTooltipProps> = ({
18
17
 
19
18
  return (
20
19
  <>
21
- <Tooltip placement="bottom">
22
- {Object.entries(toolTipTitleValue).map(([key, value], index) => (
23
- <div key={index}>
24
- <Typography
25
- as="div"
26
- fontSize={10}
27
- lineHeight="15px"
28
- >
20
+ {Object.entries(toolTipTitleValue).map(([key, value], index) => (
21
+ <div key={index} className='' >
22
+ <div className='' >
23
+ <Typography as="div" fontSize={10} lineHeight="15px">
29
24
  {key}
30
25
  </Typography>
31
26
  <Typography as="div" lineHeight="18px">
32
27
  {value}
33
28
  </Typography>
34
29
  </div>
35
- ))}
36
- </Tooltip>
30
+ </div>
31
+ ))}
37
32
  </>
38
33
  );
39
34
  };
@@ -394,7 +394,7 @@ export const DragAndDropTable: Story = {
394
394
  tableDataTextColor: 'var(--brand-color)',
395
395
  },
396
396
  render: () => {
397
- // important prerequisite tableData should have unique IDs
397
+ //! Important prerequisite: tableData should have a unique ID key, which should be either _id or id.
398
398
  const [tableData, setTableData] = useState(
399
399
  sampleData.map((data) => data.project)
400
400
  );
@@ -18,6 +18,7 @@ import {
18
18
  verticalListSortingStrategy,
19
19
  } from '@dnd-kit/sortable';
20
20
  import { CSS } from '@dnd-kit/utilities';
21
+ import { useEffect, useRef } from 'react';
21
22
 
22
23
  const SortableRow = ({
23
24
  row,
@@ -43,7 +44,7 @@ const SortableRow = ({
43
44
  <tr
44
45
  ref={setNodeRef}
45
46
  style={style}
46
- key={row.id}
47
+ key={row._id || row.id}
47
48
  className={classNames(tableBodyRowClass, {
48
49
  'disabled-row': row.disabled,
49
50
  })}
@@ -115,7 +116,49 @@ const Table = ({
115
116
  headerIconOnClick = () => {},
116
117
  draggable = false,
117
118
  onDragEnd,
119
+ loadMore = () => {},
118
120
  }: TableProps) => {
121
+
122
+ const observerRef = useRef<IntersectionObserver | null>(null);
123
+
124
+ useEffect(() => {
125
+ const scrollContainer = document.getElementById(
126
+ 'ff-table-scroll-container'
127
+ );
128
+ const firstNode = document.getElementById('ff-table-first-node');
129
+ const lastNode = document.getElementById('ff-table-last-node');
130
+
131
+ // Exit early if data is empty or elements are missing
132
+ if (!scrollContainer || !firstNode || !lastNode || !data?.length) {
133
+ return;
134
+ }
135
+
136
+ observerRef.current = new IntersectionObserver(
137
+ (entries) => {
138
+ entries.forEach((entry) => {
139
+ if (entry.isIntersecting) {
140
+ const direction =
141
+ entry.target.id === 'ff-table-last-node' ? 'below' : 'above';
142
+ loadMore(direction);
143
+ }
144
+ });
145
+ },
146
+ {
147
+ root: scrollContainer,
148
+ rootMargin: '8px',
149
+ threshold: 0.1,
150
+ }
151
+ );
152
+
153
+ observerRef.current.observe(firstNode);
154
+ observerRef.current.observe(lastNode);
155
+
156
+ return () => {
157
+ // Cleanup observer
158
+ observerRef.current?.disconnect();
159
+ };
160
+ }, [data, loadMore]);
161
+
119
162
  const handleOnclick = (column: ColumnsProps, row: DataProps) => {
120
163
  let { onClick, accessor } = column;
121
164
  if (onClick && isFunction(onClick)) {
@@ -133,8 +176,12 @@ const Table = ({
133
176
  const { active, over } = event;
134
177
  if (!over || active.id === over.id) return;
135
178
 
136
- const oldIndex = data.findIndex((item: any) => item.id === active.id);
137
- const newIndex = data.findIndex((item: any) => item.id === over.id);
179
+ const oldIndex = data.findIndex(
180
+ (item: any) => item._id === active.id || item.id === active.id
181
+ );
182
+ const newIndex = data.findIndex(
183
+ (item: any) => item._id === over.id || item.id === over.id
184
+ );
138
185
 
139
186
  if (oldIndex === -1 || newIndex === -1) return;
140
187
  if (onDragEnd) onDragEnd(oldIndex, newIndex);
@@ -144,11 +191,12 @@ const Table = ({
144
191
  <DndContext collisionDetection={closestCorners} onDragEnd={handleDragEnd}>
145
192
  <SortableContext
146
193
  disabled={!draggable}
147
- items={data?.map((row: any) => row.id)}
194
+ items={data?.map((row: any) => row._id || row.id)}
148
195
  strategy={verticalListSortingStrategy}
149
196
  >
150
197
  <div
151
198
  style={{ height: height, position: 'relative' }}
199
+ id="ff-table-scroll-container"
152
200
  className={classNames(className, {
153
201
  'ff-fixed-header-table': withFixedHeader,
154
202
  'border-borderRadius': borderWithRadius,
@@ -212,6 +260,7 @@ const Table = ({
212
260
  </tr>
213
261
  </thead>
214
262
  <tbody className="ff-fixed-header-table">
263
+ <tr id="ff-table-first-node" />
215
264
  {data?.length > 0 &&
216
265
  data?.map((row: any) => (
217
266
  <SortableRow
@@ -226,6 +275,8 @@ const Table = ({
226
275
  draggable={draggable}
227
276
  />
228
277
  ))}
278
+ <tr id="ff-table-last-node" />
279
+
229
280
  </tbody>
230
281
  </table>
231
282
  {data?.length <= 0 && (
@@ -128,5 +128,8 @@ export interface TableProps {
128
128
  /**
129
129
  * Drag and Drop indexes
130
130
  */
131
- onDragEnd?: (startIndex: number, endIndex: number) => void | undefined
131
+ onDragEnd?: (startIndex: number, endIndex: number) => void | undefined,
132
+
133
+ loadMore?: (_direction?: string) => void;
134
+
132
135
  }