pixel-react 1.7.7 → 1.7.9

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 (173) hide show
  1. package/lib/1fb4472b34e4fe07.css +1 -0
  2. package/lib/components/AllProjectsDropdown/AllProjectsDropdown.stories.d.ts +7 -0
  3. package/lib/components/AppHeader/AppHeader.stories.d.ts +7 -0
  4. package/lib/components/AttachmentButton/AttachmentButton.stories.d.ts +9 -0
  5. package/lib/components/Avatar/Avatar.stories.d.ts +10 -0
  6. package/lib/components/Button/Button.d.ts +2 -2
  7. package/lib/components/Button/Button.stories.d.ts +1 -0
  8. package/lib/components/Button/types.d.ts +17 -0
  9. package/lib/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.d.ts +7 -0
  10. package/lib/components/Charts/DashboardDonutChart/types.d.ts +2 -0
  11. package/lib/components/Charts/MultiRadialChart/types.d.ts +3 -0
  12. package/lib/components/Charts/PieChart/PieChart.stories.d.ts +7 -0
  13. package/lib/components/ChooseFile/ChooseFile.d.ts +3 -0
  14. package/lib/components/ChooseFile/types.d.ts +68 -0
  15. package/lib/components/ConnectingBranch/ConnectingBranch.d.ts +2 -1
  16. package/lib/components/ConnectingBranch/data.d.ts +19 -33
  17. package/lib/components/ConnectingBranch/types.d.ts +10 -0
  18. package/lib/components/Drawer/Drawer.stories.d.ts +5 -0
  19. package/lib/components/Excel/ExcelFile/ExcelFileComponents/actions.d.ts +7 -1
  20. package/lib/components/ExcelFile/ColorBarselector/ColorBarSelector.d.ts +8 -0
  21. package/lib/components/ExcelFile/ContextMenu/ContextMenu.d.ts +4 -0
  22. package/lib/components/ExcelFile/ExcelFile/Excel/ActiveCell.d.ts +7 -0
  23. package/lib/components/ExcelFile/ExcelFile/Excel/Cell.d.ts +4 -0
  24. package/lib/components/ExcelFile/ExcelFile/Excel/ColumnIndicator.d.ts +5 -0
  25. package/lib/components/ExcelFile/ExcelFile/Excel/Copied.d.ts +3 -0
  26. package/lib/components/ExcelFile/ExcelFile/Excel/CornerIndicator.d.ts +5 -0
  27. package/lib/components/ExcelFile/ExcelFile/Excel/DataEditor.d.ts +5 -0
  28. package/lib/components/ExcelFile/ExcelFile/Excel/DataViewer.d.ts +8 -0
  29. package/lib/components/ExcelFile/ExcelFile/Excel/FloatingRect.d.ts +10 -0
  30. package/lib/components/ExcelFile/ExcelFile/Excel/HeaderRow.d.ts +3 -0
  31. package/lib/components/ExcelFile/ExcelFile/Excel/Row.d.ts +3 -0
  32. package/lib/components/ExcelFile/ExcelFile/Excel/RowIndicator.d.ts +5 -0
  33. package/lib/components/ExcelFile/ExcelFile/Excel/Selected.d.ts +3 -0
  34. package/lib/components/ExcelFile/ExcelFile/Excel/Spreadsheet.d.ts +80 -0
  35. package/lib/components/ExcelFile/ExcelFile/Excel/Table.d.ts +3 -0
  36. package/lib/components/ExcelFile/ExcelFile/Excel/actions.d.ts +174 -0
  37. package/lib/components/ExcelFile/ExcelFile/Excel/areModelsEqual.d.ts +1 -0
  38. package/lib/components/ExcelFile/ExcelFile/Excel/context.d.ts +8 -0
  39. package/lib/components/ExcelFile/ExcelFile/Excel/engine/engine.d.ts +22 -0
  40. package/lib/components/ExcelFile/ExcelFile/Excel/engine/formula.d.ts +17 -0
  41. package/lib/components/ExcelFile/ExcelFile/Excel/engine/index.d.ts +2 -0
  42. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-graph.d.ts +21 -0
  43. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-hash.d.ts +3 -0
  44. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-set.d.ts +24 -0
  45. package/lib/components/ExcelFile/ExcelFile/Excel/index.d.ts +13 -0
  46. package/lib/components/ExcelFile/ExcelFile/Excel/matrix.d.ts +67 -0
  47. package/lib/components/ExcelFile/ExcelFile/Excel/point-range.d.ts +22 -0
  48. package/lib/components/ExcelFile/ExcelFile/Excel/point.d.ts +11 -0
  49. package/lib/components/ExcelFile/ExcelFile/Excel/reducer.d.ts +27 -0
  50. package/lib/components/ExcelFile/ExcelFile/Excel/selection.d.ts +95 -0
  51. package/lib/components/ExcelFile/ExcelFile/Excel/types.d.ts +178 -0
  52. package/lib/components/ExcelFile/ExcelFile/Excel/use-dispatch.d.ts +3 -0
  53. package/lib/components/ExcelFile/ExcelFile/Excel/use-selector.d.ts +3 -0
  54. package/lib/components/ExcelFile/ExcelFile/Excel/util.d.ts +44 -0
  55. package/lib/components/ExcelFile/ExcelFile/ExcelFile.d.ts +19 -0
  56. package/lib/components/ExcelFile/ExcelFile.stories.d.ts +6 -0
  57. package/lib/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.d.ts +12 -0
  58. package/lib/components/ExcelFile/ExcelToolBar/ExcelToolBar.d.ts +15 -0
  59. package/lib/components/ExcelFile/Types.d.ts +129 -0
  60. package/lib/components/ExcelFile/index.d.ts +1 -0
  61. package/lib/components/FF_Captcha/captcha.stories.d.ts +8 -0
  62. package/lib/components/Form/Form.stories.d.ts +6 -5
  63. package/lib/components/Icon/Icon.stories.d.ts +1 -0
  64. package/lib/components/IconButton/IconButton.stories.d.ts +1 -0
  65. package/lib/components/IconRadioGroup/IconRadioGroup.stories.d.ts +7 -0
  66. package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +11 -0
  67. package/lib/components/LabelEditTextField/types.d.ts +2 -0
  68. package/lib/components/MachineInputField/MachineInputField.d.ts +4 -1
  69. package/lib/components/MachineInputField/MachineInputField.stories.d.ts +6 -0
  70. package/lib/components/MenuOption/MenuOption.stories.d.ts +1 -0
  71. package/lib/components/MiniModal/MiniModal.stories.d.ts +2 -1
  72. package/lib/components/ModulesChip/ModuleChip.stories.d.ts +6 -0
  73. package/lib/components/MultiSelect/MultiSelect.stories.d.ts +1 -0
  74. package/lib/components/NLPInput/NlpInput.stories.d.ts +7 -0
  75. package/lib/components/NLPInput/type.d.ts +70 -0
  76. package/lib/components/Paper/Paper.stories.d.ts +11 -0
  77. package/lib/components/RadioGroup/RadioGroup.stories.d.ts +2 -1
  78. package/lib/components/Select/components/Dropdown/Dropdown.d.ts +1 -1
  79. package/lib/components/Select/components/Dropdown/dropdownTypes.d.ts +2 -0
  80. package/lib/components/Select/types.d.ts +1 -1
  81. package/lib/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.d.ts +6 -0
  82. package/lib/components/StatusCard/types.d.ts +2 -0
  83. package/lib/components/Table/Table.stories.d.ts +2 -0
  84. package/lib/components/TableTree/Components/TableCell.d.ts +1 -1
  85. package/lib/components/TableTree/Components/TableRow.d.ts +1 -1
  86. package/lib/components/TableTree/data.d.ts +74 -0
  87. package/lib/components/TableTree/types.d.ts +4 -0
  88. package/lib/components/TextArea/Textarea.d.ts +1 -1
  89. package/lib/components/TextArea/Types.d.ts +1 -0
  90. package/lib/components/Toastify/Toastify.stories.d.ts +6 -0
  91. package/lib/components/VariableInput/VariableInput.stories.d.ts +6 -0
  92. package/lib/index.d.ts +174 -63
  93. package/lib/index.esm.js +478 -287
  94. package/lib/index.esm.js.map +1 -1
  95. package/lib/index.js +478 -286
  96. package/lib/index.js.map +1 -1
  97. package/lib/tsconfig.tsbuildinfo +1 -1
  98. package/lib/utils/ffID/ffID.stories.d.ts +1 -1
  99. package/lib/utils/findAndInsert/findAndInsert.stories.d.ts +7 -0
  100. package/lib/utils/getEncryptedData/getEncryptedData.stories.d.ts +6 -0
  101. package/lib/utils/validateFile/validateFile.d.ts +2 -0
  102. package/package.json +1 -1
  103. package/src/assets/Themes/BaseTheme.scss +1 -0
  104. package/src/assets/Themes/BlueTheme.scss +44 -44
  105. package/src/assets/Themes/DarkTheme.scss +1 -0
  106. package/src/assets/icons/failed_status_icon.svg +1 -1
  107. package/src/assets/icons/flaky_status_icon.svg +1 -1
  108. package/src/assets/icons/settings.svg +3 -0
  109. package/src/assets/icons/skipped_status_icon.svg +1 -1
  110. package/src/assets/icons/warning_status_icon.svg +1 -1
  111. package/src/components/AppHeader/AppHeader.tsx +4 -2
  112. package/src/components/Button/Button.scss +12 -0
  113. package/src/components/Button/Button.tsx +29 -11
  114. package/src/components/Button/types.ts +21 -0
  115. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.scss +83 -30
  116. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.tsx +3 -0
  117. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +39 -16
  118. package/src/components/Charts/DashboardDonutChart/types.ts +2 -0
  119. package/src/components/Charts/MultiRadialChart/MultiRadialChart.scss +0 -1
  120. package/src/components/Charts/MultiRadialChart/MultiRadialChart.stories.tsx +2 -1
  121. package/src/components/Charts/MultiRadialChart/MultiRadialChart.tsx +18 -4
  122. package/src/components/Charts/MultiRadialChart/types.ts +4 -1
  123. package/src/components/ChooseFile/ChooseFile.stories.tsx +190 -0
  124. package/src/components/ChooseFile/ChooseFile.tsx +46 -0
  125. package/src/components/ChooseFile/types.ts +78 -0
  126. package/src/components/ConnectingBranch/BranchComponents/MachineInstances.tsx +94 -79
  127. package/src/components/ConnectingBranch/ConnectingBranch.scss +183 -195
  128. package/src/components/ConnectingBranch/ConnectingBranch.stories.tsx +33 -1
  129. package/src/components/ConnectingBranch/ConnectingBranch.tsx +121 -107
  130. package/src/components/ConnectingBranch/{data.ts → data.tsx} +106 -17
  131. package/src/components/ConnectingBranch/types.ts +21 -0
  132. package/src/components/Excel/ExcelFile/ExcelFile.tsx +1 -1
  133. package/src/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.tsx +13 -8
  134. package/src/components/Excel/ExcelFile/ExcelFileComponents/FloatingRect.tsx +6 -1
  135. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +30 -11
  136. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx +65 -19
  137. package/src/components/Excel/ExcelFile/ExcelFileComponents/actions.ts +14 -0
  138. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +16 -0
  139. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +6 -5
  140. package/src/components/Icon/iconList.ts +2 -0
  141. package/src/components/InputWithDropdown/InputWithDropdown.tsx +1 -1
  142. package/src/components/LabelEditTextField/LabelEditTextField.stories.tsx +8 -3
  143. package/src/components/LabelEditTextField/LabelEditTextField.tsx +28 -11
  144. package/src/components/LabelEditTextField/types.ts +2 -0
  145. package/src/components/MachineInputField/MachineInputField.tsx +67 -70
  146. package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.scss +1 -1
  147. package/src/components/Select/Select.tsx +4 -4
  148. package/src/components/Select/types.ts +1 -1
  149. package/src/components/SequentialConnectingBranch/components/Branches/Branches.scss +1 -0
  150. package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +2 -8
  151. package/src/components/StatusCard/StatusCard.scss +2 -1
  152. package/src/components/StatusCard/StatusCard.stories.tsx +59 -1
  153. package/src/components/StatusCard/StatusCard.tsx +10 -2
  154. package/src/components/StatusCard/types.ts +2 -0
  155. package/src/components/TableTree/Components/TableBody.tsx +19 -15
  156. package/src/components/TableTree/Components/TableCell.tsx +47 -31
  157. package/src/components/TableTree/Components/TableRow.tsx +4 -0
  158. package/src/components/TableTree/TableTree.scss +122 -109
  159. package/src/components/TableTree/data.ts +16 -1
  160. package/src/components/TableTree/types.ts +4 -0
  161. package/src/components/TextArea/Textarea.tsx +2 -0
  162. package/src/components/TextArea/Types.ts +3 -0
  163. package/src/index.ts +3 -0
  164. package/src/utils/validateFile/validateFile.stories.tsx +49 -0
  165. package/src/utils/validateFile/validateFile.ts +39 -0
  166. package/lib/components/ThemeProvider/CustomThemeProvider.d.ts +0 -8
  167. package/lib/hooks/useCustomThemeProvider.d.ts +0 -11
  168. package/src/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.scss +0 -51
  169. package/src/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.tsx +0 -107
  170. package/src/components/SequentialConnectingBranch/components/AddBrowserModal/types.ts +0 -5
  171. package/src/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.scss +0 -31
  172. package/src/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.tsx +0 -85
  173. package/src/components/SequentialConnectingBranch/components/DatasetListModal/types.ts +0 -4
@@ -15,6 +15,7 @@ import {
15
15
  calculateSpreadsheetSize,
16
16
  getCSV,
17
17
  shouldHandleClipboardEvent,
18
+ isFocusedWithin,
18
19
  } from './util';
19
20
 
20
21
  import DefaultTable from './Table';
@@ -98,7 +99,7 @@ export type Props<CellType extends Types.CellBase> = {
98
99
  /** Callback called when the Spreadsheet's evaluated data changes. */
99
100
  onEvaluatedDataChange?: (data: Matrix.Matrix<CellType>) => void;
100
101
  setContextMenu: React.Dispatch<React.SetStateAction<Types.ContextMenuState>>;
101
- /** Set your dynamic sheet Height*/
102
+ /** Set your dynamic sheet Height*/
102
103
  sheetHeight: string;
103
104
  };
104
105
 
@@ -119,6 +120,8 @@ const Spreadsheet = <CellType extends Types.CellBase>(
119
120
  HeaderRow = DefaultHeaderRow,
120
121
  DataEditor = DefaultDataEditor,
121
122
  DataViewer = DefaultDataViewer,
123
+ onSelect = () => {},
124
+ onActivate = () => {},
122
125
  onEvaluatedDataChange = () => {},
123
126
  } = props;
124
127
  type State = Types.StoreState<CellType>;
@@ -162,6 +165,7 @@ const Spreadsheet = <CellType extends Types.CellBase>(
162
165
  const copy = useAction(Actions.copy);
163
166
  const paste = useAction(Actions.paste);
164
167
  const onKeyDownAction = useAction(Actions.keyDown);
168
+ const onKeyPress = useAction(Actions.keyPress);
165
169
  const onDragStart = useAction(Actions.dragStart);
166
170
  const onDragEnd = useAction(Actions.dragEnd);
167
171
  const setData = useAction(Actions.setData);
@@ -183,6 +187,23 @@ const Spreadsheet = <CellType extends Types.CellBase>(
183
187
  const deleteRow = useAction(Actions.deleteRow);
184
188
  const deleteColumn = useAction(Actions.deleteColumn);
185
189
 
190
+ // Track active
191
+ const prevActiveRef = React.useRef<Point.Point | null>(state.active);
192
+ React.useEffect(() => {
193
+ if (state.active !== prevActiveRef.current) {
194
+ if (state.active) {
195
+ onActivate(state.active);
196
+ } else {
197
+ const root = rootRef.current;
198
+ if (root && isFocusedWithin(root) && document.activeElement) {
199
+ (document.activeElement as HTMLElement).blur();
200
+ }
201
+ }
202
+ }
203
+
204
+ prevActiveRef.current = state.active;
205
+ }, [onActivate, state.active]);
206
+
186
207
  const prevEvaluatedDataRef = React.useRef<Matrix.Matrix<CellType>>(
187
208
  state.model.evaluatedData
188
209
  );
@@ -194,6 +215,17 @@ const Spreadsheet = <CellType extends Types.CellBase>(
194
215
  prevEvaluatedDataRef.current = state.model.evaluatedData;
195
216
  }, [state?.model?.evaluatedData, onEvaluatedDataChange]);
196
217
 
218
+ const prevSelectedRef = React.useRef<Selection>(state.selected);
219
+ React.useEffect(() => {
220
+ if (!state.selected.equals(prevSelectedRef.current)) {
221
+ if (!props.selected || !state.selected.equals(props.selected)) {
222
+ onSelect(state.selected);
223
+ }
224
+ }
225
+
226
+ prevSelectedRef.current = state.selected;
227
+ }, [state.selected, onSelect, props.selected]);
228
+
197
229
  // Update selection when props.selected changes
198
230
  const prevSelectedPropRef = React.useRef<Selection | undefined>(
199
231
  props.selected
@@ -446,25 +478,32 @@ const Spreadsheet = <CellType extends Types.CellBase>(
446
478
  const rootNode = React.useMemo(
447
479
  () => (
448
480
  <div className="ff-excel">
449
- <div className="ff-excel-toolbar-container">
450
- <ExcelToolBar
451
- onBold={onBold}
452
- onItalic={onItalic}
453
- setUnderlineType={setUnderlineType}
454
- setColor={setColor}
455
- setBorderType={setBorderType}
456
- setFontSize={setFontSize}
457
- setFontFamily={setFontFamily}
458
- setTextAlign={setTextAlign}
459
- setBackgroundColor={setBackgroundColor}
460
- setFormatePainter={setFormatePainter}
461
- />
462
- </div>
481
+ <div className="ff-excel-header-hider ff-excel-header-column-hider"></div>
482
+ <div className="ff-excel-header-hider ff-excel-header-row-hider"></div>
483
+ <div className="ff-excel-toolbar-container">
484
+ <ExcelToolBar
485
+ onBold={onBold}
486
+ onItalic={onItalic}
487
+ setUnderlineType={setUnderlineType}
488
+ setColor={setColor}
489
+ setBorderType={setBorderType}
490
+ setFontSize={setFontSize}
491
+ setFontFamily={setFontFamily}
492
+ setTextAlign={setTextAlign}
493
+ setBackgroundColor={setBackgroundColor}
494
+ setFormatePainter={setFormatePainter}
495
+ />
496
+ </div>
463
497
  <div
464
498
  ref={rootRef}
465
- style={{height:sheetHeight}}
466
- className={classNames('ff-spreadsheet', className)}
467
- onKeyDown={handleKeyDown}
499
+ style={{ height: sheetHeight }}
500
+ className={classNames('ff-excel-spreadsheet', className)}
501
+ onKeyPress={(e) => {
502
+ onKeyPress(e);
503
+ }}
504
+ onKeyDown={(e) => {
505
+ handleKeyDown(e);
506
+ }}
468
507
  onMouseMove={handleMouseMove}
469
508
  >
470
509
  {tableNode}
@@ -474,7 +513,14 @@ const Spreadsheet = <CellType extends Types.CellBase>(
474
513
  </div>
475
514
  </div>
476
515
  ),
477
- [className, handleKeyDown, handleMouseMove, tableNode, activeCellNode]
516
+ [
517
+ className,
518
+ onKeyPress,
519
+ handleKeyDown,
520
+ handleMouseMove,
521
+ tableNode,
522
+ activeCellNode,
523
+ ]
478
524
  );
479
525
 
480
526
  return (
@@ -298,6 +298,19 @@ export type SetDataAction = BaseAction<typeof SET_DATA> & {
298
298
  };
299
299
  };
300
300
 
301
+ export type KeyPressAction = BaseAction<typeof KEY_PRESS> & {
302
+ payload: {
303
+ event: React.KeyboardEvent;
304
+ };
305
+ };
306
+
307
+ export function keyPress(event: React.KeyboardEvent): KeyPressAction {
308
+ return {
309
+ type: KEY_PRESS,
310
+ payload: { event },
311
+ };
312
+ }
313
+
301
314
  export function setData(data: Matrix<CellBase>): SetDataAction {
302
315
  return {
303
316
  type: SET_DATA,
@@ -544,6 +557,7 @@ export type Action =
544
557
  | UnderlineTypeStyle
545
558
  | FontSize
546
559
  | FontFamily
560
+ | KeyPressAction
547
561
  | TextAlignType
548
562
  | BorderType
549
563
  | ItalicStyle
@@ -582,6 +582,22 @@ export default function reducer(
582
582
  return blur(state);
583
583
  }
584
584
 
585
+ case Actions.KEY_PRESS: {
586
+ const { event } = action.payload;
587
+
588
+ if (isActiveReadOnly(state) || event.metaKey) {
589
+ return state;
590
+ }
591
+ if (state.mode === 'view' && state.active) {
592
+ const selectedRange = state.selected.toRange(state.model.data);
593
+ if (selectedRange?.size() === 1) {
594
+ return edit(clear(state));
595
+ }
596
+ return edit(state);
597
+ }
598
+ return state;
599
+ }
600
+
585
601
  case Actions.KEY_DOWN: {
586
602
  const { event } = action.payload;
587
603
  const handler = getKeyDownHandler(state, event);
@@ -123,8 +123,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
123
123
  value: 'double_border',
124
124
  label: 'Double Underline',
125
125
  icon: 'double_underline',
126
- },
127
- { value: 'line-through', label: 'Strikethrough', icon: 'strike_through' },
126
+ }
128
127
  ];
129
128
 
130
129
  const fontFamily = [
@@ -415,8 +414,10 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
415
414
  </div>
416
415
  </Tooltip>
417
416
  </div>
418
- <div className="ff-excel-toolbar-divider"></div>
419
- <div className="ff-excel-toolbar-menu">
417
+
418
+
419
+ {/* <div className="ff-excel-toolbar-divider"></div> TODO */}
420
+ {/* <div className="ff-excel-toolbar-menu">
420
421
  <Tooltip placement="top" title={'Formula'}>
421
422
  <Icon
422
423
  hoverEffect
@@ -425,7 +426,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
425
426
  name="formula_icon"
426
427
  />
427
428
  </Tooltip>
428
- </div>
429
+ </div> TODO */}
429
430
  </div>
430
431
  );
431
432
  };
@@ -252,6 +252,7 @@ import machineDisableIcon from '../../assets/icons/machine_disable_icon.svg?reac
252
252
  import suitesIcon from '../../assets/icons/suites_icon.svg?react';
253
253
  import executionsIcon from '../../assets/icons/executions_icon.svg?react';
254
254
  import ImportIcon from '../../assets/icons/import_icon.svg?react';
255
+ import Settings from '../../assets/icons/settings.svg?react';
255
256
 
256
257
  Components['success'] = ToastSuccessIcon;
257
258
  Components['alert'] = Alert;
@@ -499,5 +500,6 @@ Components['machine_disable_icon'] = machineDisableIcon;
499
500
  Components['executions_icon'] = executionsIcon;
500
501
  Components['suites_icon'] = suitesIcon;
501
502
  Components['import_icon'] = ImportIcon;
503
+ Components['settings'] = Settings
502
504
 
503
505
  export default Components;
@@ -18,7 +18,7 @@ const InputWithDropdown = forwardRef<HTMLInputElement, InputWithDropdownProps>(
18
18
  error,
19
19
  helperText,
20
20
  optionsList,
21
- selectedOption,
21
+ selectedOption = { label: '', value: '' },
22
22
  autoComplete = 'off',
23
23
  onDropdownChangeHandler = () => {},
24
24
  onInputChangeHandler,
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ import React, { useState } from 'react';
2
2
  import type { Meta, StoryObj } from '@storybook/react';
3
3
  import LabelEditTextField from './LabelEditTextField';
4
4
  import '../../assets/styles/_colors.scss';
@@ -155,16 +155,20 @@ export const textFieldWithHighlight: Story = {
155
155
  };
156
156
  export const openLabelEditTextField: Story = {
157
157
  render: () => {
158
+ const [demoText, setDemoText] = useState('Verify The');
158
159
  const handleConfirmAction = (inputValue: string, dropdownValue: string) => {
159
160
  //DEMO: we are getting that value from LabelEditTextField
160
-
161
+ setDemoText(inputValue);
161
162
  console.info(
162
163
  'Confirmed input value and dropdown value:',
163
164
  inputValue,
164
165
  dropdownValue
165
166
  );
166
167
  };
167
- let demoText = 'Verify The';
168
+ const handleInputChange = (newInputValue: string) => {
169
+ setDemoText(newInputValue); // Update parent state
170
+ };
171
+ console.log('demoText: ', demoText);
168
172
  return (
169
173
  <LabelEditTextField
170
174
  label="Add Module"
@@ -181,6 +185,7 @@ export const openLabelEditTextField: Story = {
181
185
  width="400px"
182
186
  height="22px"
183
187
  confirmAction={handleConfirmAction}
188
+ onInputChange={handleInputChange}
184
189
  isOpen={true}
185
190
  customError="text is too long"
186
191
  customErrorCondition={demoText?.length > 10}
@@ -21,7 +21,7 @@ const getErrorMessage = (
21
21
  } else if (inputValue.length < 3) {
22
22
  return 'Please enter at least 3 characters.';
23
23
  } else if (customErrorCondition) {
24
- return customError ?? '';
24
+ return customError ?? 'Custom error occurred';
25
25
  }
26
26
  return '';
27
27
  };
@@ -35,6 +35,7 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
35
35
  customErrorCondition,
36
36
  cancelIcon,
37
37
  variant = 'textField',
38
+ onInputChange,
38
39
  dropdownData = [],
39
40
  // width,
40
41
  height,
@@ -87,14 +88,16 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
87
88
  setClickTimeout(timeout);
88
89
  };
89
90
  const handleConfirm = () => {
90
- const errorMessage = getErrorMessage(
91
- inputValue,
92
- text,
93
- customError,
94
- customErrorCondition
95
- );
91
+ let errorMessage = '';
92
+ if (inputValue.length === 0 || inputValue.trim().length === 0) {
93
+ errorMessage = 'Please type any text.';
94
+ } else if (inputValue.length < 3) {
95
+ errorMessage = 'Please enter at least 3 characters.';
96
+ } else if (customErrorCondition) {
97
+ errorMessage = customError ?? 'Invalid input.';
98
+ }
96
99
 
97
- if (errorMessage && isEditing) {
100
+ if (errorMessage) {
98
101
  setShowError(errorMessage);
99
102
  } else {
100
103
  setIsEditing(false);
@@ -112,9 +115,23 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
112
115
  };
113
116
 
114
117
  const handleTextFieldChange = (e: React.ChangeEvent<HTMLInputElement>) => {
115
- setInputValue(e.target.value);
116
- setIsTextFieldModified(true);
117
- setShowError('');
118
+ const newValue = e.target.value;
119
+ setInputValue(newValue);
120
+ if (newValue.length === 0 || newValue.trim().length === 0) {
121
+ setShowError('Please type any text.');
122
+ } else if (newValue.length < 3) {
123
+ setShowError('Please enter at least 3 characters.');
124
+ } else if (customErrorCondition) {
125
+ setShowError(customError ?? 'Invalid input.');
126
+ } else {
127
+ setShowError('');
128
+ }
129
+
130
+ setIsTextFieldModified(newValue !== text);
131
+
132
+ if (onInputChange) {
133
+ onInputChange(newValue);
134
+ }
118
135
  };
119
136
 
120
137
  const handleBlur = (e: MouseEvent) => {
@@ -40,6 +40,8 @@ export interface LabelEditTextFieldTypes {
40
40
  customErrorCondition?: boolean;
41
41
  placeholder?: string;
42
42
  onClick?: () => void;
43
+ /** Function called when every input character got changed */
44
+ onInputChange?: (newInputValue: string) => void;
43
45
  tooltip?: {
44
46
  tooltipTitle?: string;
45
47
  tooltipPlacement?: string;
@@ -1,4 +1,3 @@
1
- import { forwardRef } from 'react';
2
1
  import './MachineInputField.scss';
3
2
  import Typography from '../Typography';
4
3
  import Icon from '../Icon';
@@ -6,81 +5,79 @@ import { MachineInputFieldProps, MachineType } from './types';
6
5
  import classNames from 'classnames';
7
6
  import { truncateText } from '../../utils/truncateText/truncateText';
8
7
 
9
- const MachineInputField = forwardRef<HTMLDivElement, MachineInputFieldProps>(
10
- ({
11
- width = '',
12
- options = [],
13
- runCount = 0,
14
- className = '',
15
- contentReverse = false,
16
- onClick = () => {},
17
- modalId = '',
18
- }) => {
19
- const getIcon: Record<MachineType['type'], string> = {
20
- Local: 'local',
21
- Browserstack: 'browserstack_icon',
22
- SauceLabs: 'sause_lab',
23
- LambdaTest: 'lambda_icon',
24
- mac: 'mac_icon',
25
- android: 'android_icon',
26
- linux: 'linux',
27
- 'Google Chrome': 'chrome_icon',
28
- 'Mozilla Firefox': 'fire_fox',
29
- 'Microsoft Edge': 'edge',
30
- 'Internet Explorer': 'internet_explorer',
31
- Safari: 'safari_icon',
32
- Opera: 'opera',
33
- windows: 'windows',
34
- };
8
+ const MachineInputField = ({
9
+ width = '',
10
+ options = [],
11
+ runCount = 0,
12
+ className = '',
13
+ contentReverse = false,
14
+ onClick = () => {},
15
+ modalId = '',
16
+ }: MachineInputFieldProps) => {
17
+ const getIcon: Record<MachineType['type'], string> = {
18
+ local: 'local',
19
+ browserstack: 'browserstack_icon',
20
+ sauceLabs: 'sause_lab',
21
+ lambdaTest: 'lambda_icon',
22
+ mac: 'mac_icon',
23
+ android: 'android_icon',
24
+ linux: 'linux',
25
+ 'google chrome': 'chrome_icon',
26
+ 'mozilla firefox': 'fire_fox',
27
+ 'microsoft edge': 'edge',
28
+ 'internet explorer': 'internet_explorer',
29
+ safari: 'safari_icon',
30
+ opera: 'opera',
31
+ windows: 'windows',
32
+ };
35
33
 
36
- return (
37
- <div
38
- ref={modalId}
39
- style={{ width: width }}
40
- className={classNames('ff-machine-input-field-wrapper', className)}
41
- onClick={() => onClick()}
34
+ return (
35
+ <div
36
+ id={modalId}
37
+ style={{ width: width }}
38
+ className={classNames('ff-machine-input-field-wrapper', className)}
39
+ onClick={() => onClick()}
40
+ >
41
+ <Typography
42
+ as="span"
43
+ color="var(--ff-machine-input-field-text-color)"
44
+ fontSize={8}
45
+ textAlign="center"
46
+ className="ff-machine-input-label"
42
47
  >
43
- <Typography
44
- as="span"
45
- color="var(--ff-machine-input-field-text-color)"
46
- fontSize={8}
47
- textAlign="center"
48
- className="ff-machine-input-label"
49
- >
50
- Run {runCount}
51
- </Typography>
48
+ Run {runCount}
49
+ </Typography>
52
50
 
53
- <div
54
- className={classNames('ff-machine-input-field', {
55
- 'ff-machine-input-field-reverse': contentReverse,
56
- })}
57
- >
58
- {options.map(({ label, type }) => (
59
- <div
60
- key={type}
61
- className={classNames('ff-machine-icon-text-wrapper', {
62
- 'ff-machine-icon-text-wrapper-reverse': contentReverse,
51
+ <div
52
+ className={classNames('ff-machine-input-field', {
53
+ 'ff-machine-input-field-reverse': contentReverse,
54
+ })}
55
+ >
56
+ {options.map(({ label, type = 'local' }) => (
57
+ <div
58
+ key={type}
59
+ className={classNames('ff-machine-icon-text-wrapper', {
60
+ 'ff-machine-icon-text-wrapper-reverse': contentReverse,
61
+ })}
62
+ >
63
+ <Icon
64
+ name={getIcon[type?.toLowerCase()] || 'local'}
65
+ className="ff-machine-icon"
66
+ />
67
+ <Typography
68
+ className={classNames('ff-machine-text', {
69
+ 'ff-machine-text-reverse': contentReverse,
63
70
  })}
71
+ color="var(--ff-machine-input-field-text-color)"
64
72
  >
65
- <Icon
66
- name={getIcon[type] || 'local'}
67
- className="ff-machine-icon"
68
- />
69
- <Typography
70
- className={classNames('ff-machine-text', {
71
- 'ff-machine-text-reverse': contentReverse,
72
- })}
73
- color="var(--ff-machine-input-field-text-color)"
74
- >
75
- {truncateText(label, 15)}
76
- </Typography>
77
- </div>
78
- ))}
79
- </div>
73
+ {truncateText(label, 15)}
74
+ </Typography>
75
+ </div>
76
+ ))}
80
77
  </div>
81
- );
82
- }
83
- );
78
+ </div>
79
+ );
80
+ };
84
81
 
85
82
  MachineInputField.displayName = 'MachineInputField';
86
83
 
@@ -16,7 +16,7 @@
16
16
  .ff-nlp-dropdown-wrapper {
17
17
  .ff-nlp-options-wrapper {
18
18
  max-height: 256px;
19
- z-index: 100;
19
+ z-index: 999;
20
20
  position: absolute;
21
21
  border: 1px solid var(--nlp-border-color);
22
22
  box-sizing: border-box;
@@ -228,10 +228,10 @@ const Select: FC<SelectProps> = ({
228
228
  as="span"
229
229
  className={classNames('ff-select-labels', {
230
230
  'ff-select-labels__icon': showIcon,
231
- 'ff-select-labels__active': searchedOption,
231
+ 'ff-select-labels__active': searchedText,
232
232
  })}
233
- fontSize={searchedOption || showDropdownOptions ? 8 : 12}
234
- lineHeight={searchedOption || showDropdownOptions ? '8px' : '12px'}
233
+ fontSize={searchedText || showDropdownOptions ? 10 : 12}
234
+ lineHeight={searchedText || showDropdownOptions ? '10px' : '12px'}
235
235
  required={required}
236
236
  >
237
237
  {label}
@@ -264,7 +264,7 @@ const Select: FC<SelectProps> = ({
264
264
  onSelectBlur={onSelectBlur}
265
265
  onSelectOptionSelector={onSelectOptionSelector}
266
266
  heightFromTop={height}
267
- selectedOption={searchedOption}
267
+ selectedOption={searchedText}
268
268
  showIcon={showIcon}
269
269
  />,
270
270
  document.body
@@ -17,7 +17,7 @@ export interface SelectProps {
17
17
  /*
18
18
  * Selected option for the select dropdown
19
19
  */
20
- selectedOption?: Option;
20
+ selectedOption: Option;
21
21
 
22
22
  /*
23
23
  * onChange callback function for handling selected option changes
@@ -74,6 +74,7 @@
74
74
 
75
75
  .ff-connecting-text {
76
76
  margin-right: 8px;
77
+ cursor: pointer;
77
78
  }
78
79
 
79
80
  .ff-connecting-delete-icon {
@@ -72,12 +72,6 @@ const Branches = ({
72
72
  machineInfo: { osVersion, iconName },
73
73
  deviceInfo,
74
74
  } = machineInstance as ExecutionContext;
75
- // Helper to handle device info safely
76
- const getDeviceOption = (platform: string, defaultType: string = '', index = 0) =>
77
- deviceInfo?.[index]?.platform?.toLowerCase().includes(platform ?? '')
78
- ? defaultType
79
- : undefined;
80
-
81
75
  const getEnvironment = (environment: string = '') => {
82
76
  if (environment.toLowerCase().includes('browserstack'))
83
77
  return 'Browserstack';
@@ -110,11 +104,11 @@ const Branches = ({
110
104
  const mobileOptions = [
111
105
  {
112
106
  label: deviceInfo?.[0]?.name,
113
- type: getDeviceOption('android', 'android_icon', 0),
107
+ type: 'android',
114
108
  },
115
109
  {
116
110
  label: deviceInfo?.[1]?.name,
117
- type: getDeviceOption('ios', 'mac_icon', 1),
111
+ type: 'mac',
118
112
  },
119
113
  ];
120
114
 
@@ -68,8 +68,9 @@
68
68
  }
69
69
 
70
70
  .ff-content {
71
+ height: 100%;
71
72
  flex: 1;
72
- padding: 8px;
73
+ padding: 0px 8px;
73
74
  display: flex;
74
75
  flex-direction: column;
75
76
  justify-content: center;