pixel-react 1.6.8 → 1.7.0

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/components/Charts/LineChart/types.d.ts +1 -0
  2. package/lib/components/Chip/types.d.ts +1 -1
  3. package/lib/components/ConditionalDropdown/ConditionalDropdown.d.ts +5 -0
  4. package/lib/components/ConditionalDropdown/OptionsDropdown.d.ts +5 -0
  5. package/lib/components/ConditionalDropdown/index.d.ts +1 -0
  6. package/lib/components/ConditionalDropdown/types.d.ts +145 -0
  7. package/lib/components/CreateVariable/types.d.ts +2 -2
  8. package/lib/components/DownloadClient/type.d.ts +19 -27
  9. package/lib/components/Excel/ExcelFile/ExcelFileComponents/actions.d.ts +8 -1
  10. package/lib/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.d.ts +2 -0
  11. package/lib/components/Excel/ExcelFile/ExcelFileComponents/types.d.ts +13 -6
  12. package/lib/components/InputWithDropdown/InputWithDropdown.d.ts +1 -1
  13. package/lib/components/LabelEditTextField/types.d.ts +1 -0
  14. package/lib/components/MachineInputField/types.d.ts +1 -0
  15. package/lib/components/MenuOption/MenuOption.d.ts +1 -1
  16. package/lib/components/MenuOption/types.d.ts +2 -1
  17. package/lib/components/MiniModal/types.d.ts +1 -0
  18. package/lib/components/Modal/types.d.ts +1 -1
  19. package/lib/components/MultiSelect/MultiSelect.d.ts +1 -1
  20. package/lib/components/MultiSelect/MultiSelectTypes.d.ts +1 -0
  21. package/lib/components/MultiSelect/dropdownTypes.d.ts +1 -0
  22. package/lib/components/NLPInput/NlpInput.d.ts +2 -2
  23. package/lib/components/NLPInput/components/NlpDropDown/NlpDropDownType.d.ts +6 -3
  24. package/lib/components/NLPInput/components/NlpDropDown/NlpDropdown.d.ts +1 -1
  25. package/lib/components/NLPInput/sampleData.d.ts +104 -0
  26. package/lib/components/NLPInput/types.d.ts +80 -0
  27. package/lib/components/PopUpModal/types.d.ts +2 -1
  28. package/lib/components/ProgressBar/ProgressBar.d.ts +5 -0
  29. package/lib/components/ProgressBar/index.d.ts +1 -0
  30. package/lib/components/ProgressBar/types.d.ts +12 -0
  31. package/lib/components/SequentialConnectingBranch/components/Branches/Branches.d.ts +1 -1
  32. package/lib/components/SequentialConnectingBranch/components/Branches/types.d.ts +4 -0
  33. package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.d.ts +1 -1
  34. package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/types.d.ts +4 -0
  35. package/lib/components/SequentialConnectingBranch/types.d.ts +7 -1
  36. package/lib/components/TableTree/TableTree.d.ts +2 -2
  37. package/lib/components/TableTree/Utils/getAllChildIds.d.ts +1 -0
  38. package/lib/components/TableTree/types.d.ts +1 -1
  39. package/lib/hooks/useIntersectionObserver.d.ts +9 -0
  40. package/lib/index.d.ts +183 -65
  41. package/lib/index.esm.js +1281 -674
  42. package/lib/index.esm.js.map +1 -1
  43. package/lib/index.js +1282 -674
  44. package/lib/index.js.map +1 -1
  45. package/lib/tsconfig.tsbuildinfo +1 -1
  46. package/lib/utils/functionCheck/functionCheck.d.ts +2 -0
  47. package/lib/utils/getSequentialPayload/types.d.ts +1 -0
  48. package/package.json +1 -1
  49. package/src/StyleGuide/ColorPalette/colorPaletteList.ts +5 -0
  50. package/src/assets/Themes/BaseTheme.scss +20 -2
  51. package/src/assets/Themes/DarkTheme.scss +19 -2
  52. package/src/assets/icons/add_file.svg +4 -4
  53. package/src/assets/icons/ai_search.svg +9 -0
  54. package/src/assets/icons/authorization.svg +4 -4
  55. package/src/assets/icons/depends_on_script.svg +7 -7
  56. package/src/assets/icons/email_group.svg +3 -3
  57. package/src/assets/icons/help_icon.svg +10 -0
  58. package/src/assets/icons/import_icon.svg +4 -0
  59. package/src/assets/icons/ios_icon.svg +11 -0
  60. package/src/assets/icons/labels.svg +8 -8
  61. package/src/assets/icons/parameters.svg +3 -3
  62. package/src/assets/icons/plus_round_icon.svg +38 -0
  63. package/src/assets/icons/pre_post_condition.svg +8 -8
  64. package/src/assets/icons/program_element.svg +8 -8
  65. package/src/assets/icons/test_data.svg +5 -5
  66. package/src/assets/icons/test_data_set.svg +7 -7
  67. package/src/assets/icons/tick_icon.svg +2 -2
  68. package/src/assets/icons/variable_set.svg +5 -5
  69. package/src/assets/styles/_colors.scss +1 -1
  70. package/src/components/AttachmentButton/AttachmentButton.tsx +1 -1
  71. package/src/components/Charts/LineChart/LineChart.stories.tsx +7 -3
  72. package/src/components/Charts/LineChart/LineChart.tsx +10 -1
  73. package/src/components/Charts/LineChart/types.ts +1 -0
  74. package/src/components/Checkbox/Checkbox.scss +3 -1
  75. package/src/components/Checkbox/Checkbox.stories.tsx +32 -77
  76. package/src/components/Checkbox/Checkbox.tsx +3 -4
  77. package/src/components/Chip/Chip.scss +15 -5
  78. package/src/components/Chip/Chip.stories.tsx +10 -1
  79. package/src/components/Chip/Chip.tsx +5 -1
  80. package/src/components/Chip/types.ts +1 -1
  81. package/src/components/{AddVariables/AddVariables.scss → ConditionalDropdown/ConditionalDropdown.scss} +4 -0
  82. package/src/components/ConditionalDropdown/ConditionalDropdown.stories.tsx +147 -0
  83. package/src/components/ConditionalDropdown/ConditionalDropdown.tsx +159 -0
  84. package/src/components/ConditionalDropdown/OptionsDropdown.tsx +44 -0
  85. package/src/components/ConditionalDropdown/index.ts +1 -0
  86. package/src/components/ConditionalDropdown/types.ts +160 -0
  87. package/src/components/CreateVariable/CreateVariableSlider.tsx +2 -2
  88. package/src/components/CreateVariable/types.ts +2 -2
  89. package/src/components/DownloadClient/DownloadClient.scss +51 -64
  90. package/src/components/DownloadClient/DownloadClient.stories.tsx +6 -6
  91. package/src/components/DownloadClient/DownloadClient.tsx +60 -51
  92. package/src/components/DownloadClient/type.ts +32 -40
  93. package/src/components/EditTextField/EditTextField.scss +1 -1
  94. package/src/components/EditTextField/EditTextField.tsx +14 -20
  95. package/src/components/Excel/ExcelFile/ExcelFile.scss +3 -2
  96. package/src/components/Excel/ExcelFile/ExcelFile.tsx +37 -21
  97. package/src/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.tsx +12 -0
  98. package/src/components/Excel/ExcelFile/ExcelFileComponents/Cell.tsx +2 -34
  99. package/src/components/Excel/ExcelFile/ExcelFileComponents/FloatingRect.tsx +26 -1
  100. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +7 -7
  101. package/src/components/Excel/ExcelFile/ExcelFileComponents/actions.ts +13 -0
  102. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +53 -26
  103. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +81 -14
  104. package/src/components/Excel/ExcelFile/ExcelFileComponents/types.ts +17 -6
  105. package/src/components/Excel/ExcelFile.stories.tsx +4 -4
  106. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +36 -19
  107. package/src/components/Excel/dataConversion.ts +43 -20
  108. package/src/components/FileDropzone/FileDropzone.stories.tsx +5 -19
  109. package/src/components/FileDropzone/FileDropzone.tsx +24 -4
  110. package/src/components/Form/Forms.tsx +0 -2
  111. package/src/components/Icon/iconList.ts +12 -0
  112. package/src/components/InputWithDropdown/InputWithDropdown.tsx +102 -95
  113. package/src/components/LabelEditTextField/LabelEditTextField.scss +1 -1
  114. package/src/components/LabelEditTextField/LabelEditTextField.tsx +29 -36
  115. package/src/components/LabelEditTextField/types.ts +1 -0
  116. package/src/components/MachineInputField/MachineInputField.scss +1 -5
  117. package/src/components/MachineInputField/MachineInputField.stories.tsx +6 -5
  118. package/src/components/MachineInputField/MachineInputField.tsx +14 -14
  119. package/src/components/MachineInputField/types.ts +2 -0
  120. package/src/components/MenuOption/MenuOption.scss +7 -7
  121. package/src/components/MenuOption/MenuOption.stories.tsx +83 -28
  122. package/src/components/MenuOption/MenuOption.tsx +9 -13
  123. package/src/components/MenuOption/types.ts +3 -2
  124. package/src/components/MiniModal/MiniModal.scss +0 -1
  125. package/src/components/MiniModal/MiniModal.stories.tsx +6 -1
  126. package/src/components/MiniModal/MiniModal.tsx +3 -1
  127. package/src/components/MiniModal/types.ts +1 -0
  128. package/src/components/Modal/types.ts +1 -1
  129. package/src/components/MultiSelect/Dropdown.scss +3 -4
  130. package/src/components/MultiSelect/Dropdown.tsx +34 -7
  131. package/src/components/MultiSelect/MultiSelect.scss +1 -0
  132. package/src/components/MultiSelect/MultiSelect.tsx +3 -0
  133. package/src/components/MultiSelect/MultiSelectTypes.ts +3 -1
  134. package/src/components/MultiSelect/dropdownTypes.ts +2 -0
  135. package/src/components/NLPInput/NLPInput.scss +77 -21
  136. package/src/components/NLPInput/NlpInput.stories.tsx +43 -109
  137. package/src/components/NLPInput/NlpInput.tsx +95 -59
  138. package/src/components/NLPInput/components/NlpDropDown/NlpDropDownType.ts +6 -4
  139. package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.scss +86 -35
  140. package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.tsx +220 -80
  141. package/src/components/NLPInput/sampleData.ts +162 -0
  142. package/src/components/NLPInput/{type.tsx → types.tsx} +23 -11
  143. package/src/components/PopUpModal/PopUpModal.stories.tsx +15 -10
  144. package/src/components/PopUpModal/PopUpModal.tsx +5 -4
  145. package/src/components/PopUpModal/types.ts +2 -1
  146. package/src/components/ProgressBar/ProgressBar.scss +46 -0
  147. package/src/components/ProgressBar/ProgressBar.stories.tsx +22 -0
  148. package/src/components/ProgressBar/ProgressBar.tsx +61 -0
  149. package/src/components/ProgressBar/index.ts +1 -0
  150. package/src/components/ProgressBar/types.ts +12 -0
  151. package/src/components/Search/Search.tsx +9 -1
  152. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.tsx +13 -2
  153. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx +36 -19
  154. package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +120 -32
  155. package/src/components/SequentialConnectingBranch/components/Branches/types.ts +7 -0
  156. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.tsx +8 -0
  157. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/types.ts +7 -0
  158. package/src/components/SequentialConnectingBranch/types.ts +7 -5
  159. package/src/components/Table/Table.scss +1 -0
  160. package/src/components/TableTree/Components/TableBody.tsx +3 -1
  161. package/src/components/TableTree/TableTree.stories.tsx +4 -7
  162. package/src/components/TableTree/TableTree.tsx +27 -181
  163. package/src/components/TableTree/Utils/getAllChildIds.ts +2 -0
  164. package/src/components/TableTree/data.ts +45 -0
  165. package/src/components/TableTree/types.ts +4 -4
  166. package/src/hooks/useIntersectionObserver.tsx +56 -0
  167. package/src/index.ts +4 -3
  168. package/src/utils/functionCheck/functionCheck.ts +8 -0
  169. package/src/utils/getSequentialPayload/types.ts +1 -0
  170. package/src/components/AddVariables/AddVariables.stories.tsx +0 -44
  171. package/src/components/AddVariables/AddVariables.tsx +0 -113
  172. package/src/components/AddVariables/index.ts +0 -1
  173. package/src/components/AddVariables/types.ts +0 -36
@@ -1,3 +1,4 @@
1
+ import { forwardRef } from 'react';
1
2
  import classNames from 'classnames';
2
3
  import './InputWithDropdown.scss';
3
4
  import { InputWithDropdownProps } from './types';
@@ -5,44 +6,101 @@ import Select from '../Select/Select';
5
6
  import Typography from '../Typography';
6
7
  import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
7
8
 
8
- const InputWithDropdown = ({
9
- name = '',
10
- label,
11
- value,
12
- disabled = false,
13
- required = false,
14
- placeholder,
15
- error,
16
- helperText,
17
- optionsList,
18
- selectedOption,
19
- autoComplete = 'off',
20
- onDropdownChangeHandler = () => {},
21
- onInputChangeHandler,
22
- onInputBlurHandler,
23
- optionsRequired = true,
24
- dropdownPosition = 'right',
25
- type = 'text',
26
- }: InputWithDropdownProps) => {
27
- const isValueFilled = !checkEmpty(value) || dropdownPosition === 'left';
9
+ const InputWithDropdown = forwardRef<HTMLInputElement, InputWithDropdownProps>(
10
+ (
11
+ {
12
+ name = '',
13
+ label,
14
+ value,
15
+ disabled = false,
16
+ required = false,
17
+ placeholder,
18
+ error,
19
+ helperText,
20
+ optionsList,
21
+ selectedOption,
22
+ autoComplete = 'off',
23
+ onDropdownChangeHandler = () => {},
24
+ onInputChangeHandler,
25
+ onInputBlurHandler,
26
+ optionsRequired = true,
27
+ dropdownPosition = 'right',
28
+ type = 'text',
29
+ },
30
+ ref
31
+ ) => {
32
+ const isValueFilled = !checkEmpty(value) || dropdownPosition === 'left';
28
33
 
29
- return (
30
- <div
31
- className={classNames('ff-input-with-dropdown-container', {
32
- 'ff-input-with-dropdown-container--filled': isValueFilled,
33
- })}
34
- >
35
- <fieldset
36
- className={classNames('ff-input-with-dropdown', {
37
- 'ff-input-with-dropdown--filled': isValueFilled,
38
- 'ff-input-with-dropdown--no-hover': isValueFilled,
39
- 'ff-input-with-dropdown--disabled': !!disabled,
40
- 'ff-input-with-dropdown--error': !!error,
41
- [`ff-input-with-dropdown--${dropdownPosition}`]: dropdownPosition,
34
+ return (
35
+ <div
36
+ className={classNames('ff-input-with-dropdown-container', {
37
+ 'ff-input-with-dropdown-container--filled': isValueFilled,
42
38
  })}
43
39
  >
44
- {dropdownPosition === 'left' && (
45
- <>
40
+ <fieldset
41
+ className={classNames('ff-input-with-dropdown', {
42
+ 'ff-input-with-dropdown--filled': isValueFilled,
43
+ 'ff-input-with-dropdown--no-hover': isValueFilled,
44
+ 'ff-input-with-dropdown--disabled': !!disabled,
45
+ 'ff-input-with-dropdown--error': !!error,
46
+ [`ff-input-with-dropdown--${dropdownPosition}`]: dropdownPosition,
47
+ })}
48
+ >
49
+ {dropdownPosition === 'left' && (
50
+ <>
51
+ <Select
52
+ optionsList={optionsList}
53
+ selectedOption={selectedOption}
54
+ showLabel={false}
55
+ showBorder={false}
56
+ onChange={onDropdownChangeHandler}
57
+ disabled={disabled || !optionsRequired}
58
+ optionsRequired={optionsRequired}
59
+ className={classNames('ff-floating-dropdown', {
60
+ 'ff-floating-dropdown--disabled': !!disabled,
61
+ 'ff-floating-dropdown--error': !!error,
62
+ 'ff-floating-dropdown--left': dropdownPosition === 'left',
63
+ })}
64
+ width={94}
65
+ height={30}
66
+ />
67
+ <div className="seperatorline" />
68
+ </>
69
+ )}
70
+ <div className={classNames('ff-floating-label-input-container')}>
71
+ <Typography
72
+ as="label"
73
+ htmlFor={name}
74
+ className={classNames('ff-floating-label', {
75
+ 'ff-floating-label--filled': isValueFilled,
76
+ 'ff-floating-label--no-hover': isValueFilled,
77
+ 'ff-floating-label--error': !!error,
78
+ })}
79
+ required={required}
80
+ >
81
+ {label}
82
+ </Typography>
83
+ <input
84
+ ref={ref}
85
+ name={name}
86
+ type={type}
87
+ id={name}
88
+ value={value}
89
+ onChange={onInputChangeHandler}
90
+ onBlur={onInputBlurHandler}
91
+ placeholder={placeholder}
92
+ autoComplete={autoComplete}
93
+ required={required}
94
+ disabled={disabled}
95
+ className={classNames('ff-floating-input', {
96
+ 'ff-floating-input--filled': isValueFilled,
97
+ 'ff-floating-input--disabled': !!disabled,
98
+ 'ff-floating-input--error': !!error,
99
+ 'ff-floating-input--left-dropdown': dropdownPosition === 'left',
100
+ })}
101
+ />
102
+ </div>
103
+ {dropdownPosition === 'right' && (
46
104
  <Select
47
105
  optionsList={optionsList}
48
106
  selectedOption={selectedOption}
@@ -54,69 +112,18 @@ const InputWithDropdown = ({
54
112
  className={classNames('ff-floating-dropdown', {
55
113
  'ff-floating-dropdown--disabled': !!disabled,
56
114
  'ff-floating-dropdown--error': !!error,
57
- 'ff-floating-dropdown--left': dropdownPosition === 'left',
58
115
  })}
59
- width={94}
116
+ width={120}
60
117
  height={30}
61
118
  />
62
- <div className="seperatorline" />
63
- </>
64
- )}
65
- <div className={classNames('ff-floating-label-input-container')}>
66
- <Typography
67
- as="label"
68
- htmlFor={name}
69
- className={classNames('ff-floating-label', {
70
- 'ff-floating-label--filled': isValueFilled,
71
- 'ff-floating-label--no-hover': isValueFilled,
72
- 'ff-floating-label--error': !!error,
73
- })}
74
- required={required}
75
- >
76
- {label}
77
- </Typography>
78
- <input
79
- name={name}
80
- type={type}
81
- id={name}
82
- value={value}
83
- onChange={onInputChangeHandler}
84
- onBlur={onInputBlurHandler}
85
- placeholder={placeholder}
86
- autoComplete={autoComplete}
87
- required={required}
88
- disabled={disabled}
89
- className={classNames('ff-floating-input', {
90
- 'ff-floating-input--filled': isValueFilled,
91
- 'ff-floating-input--disabled': !!disabled,
92
- 'ff-floating-input--error': !!error,
93
- 'ff-floating-input--left-dropdown': dropdownPosition === 'left',
94
- })}
95
- />
96
- </div>
97
- {dropdownPosition === 'right' && (
98
- <Select
99
- optionsList={optionsList}
100
- selectedOption={selectedOption}
101
- showLabel={false}
102
- showBorder={false}
103
- onChange={onDropdownChangeHandler}
104
- disabled={disabled || !optionsRequired}
105
- optionsRequired={optionsRequired}
106
- className={classNames('ff-floating-dropdown', {
107
- 'ff-floating-dropdown--disabled': !!disabled,
108
- 'ff-floating-dropdown--error': !!error,
109
- })}
110
- width={120}
111
- height={30}
112
- />
119
+ )}
120
+ </fieldset>
121
+ {error && helperText && (
122
+ <span className="ff-helper-text">{helperText}</span>
113
123
  )}
114
- </fieldset>
115
- {error && helperText && (
116
- <span className="ff-helper-text">{helperText}</span>
117
- )}
118
- </div>
119
- );
120
- };
124
+ </div>
125
+ );
126
+ }
127
+ );
121
128
 
122
129
  export default InputWithDropdown;
@@ -7,7 +7,7 @@
7
7
  width: 100%;
8
8
  .ff-label-text-field {
9
9
  display: flex;
10
- gap: 10px;
10
+ gap: 5px;
11
11
  }
12
12
  .ff-label-text-field-with-dropdown,
13
13
  .ff-label-text-field-without-dropdown {
@@ -5,6 +5,8 @@ import Typography from '../Typography';
5
5
  import HighlightText from '../HighlightText';
6
6
  import Icon from '../Icon';
7
7
  import Tooltip from '../Tooltip';
8
+ import Input from '../Input/Input';
9
+ import Select from '../Select/Select';
8
10
 
9
11
  const getErrorMessage = (
10
12
  inputValue: string,
@@ -25,6 +27,7 @@ const getErrorMessage = (
25
27
  };
26
28
  const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
27
29
  label,
30
+ placeholder,
28
31
  text,
29
32
  highlightText,
30
33
  customError,
@@ -33,7 +36,7 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
33
36
  cancelIcon,
34
37
  variant = 'textField',
35
38
  dropdownData = [],
36
- width,
39
+ // width,
37
40
  height,
38
41
  isOpen = false,
39
42
  confirmAction,
@@ -47,7 +50,8 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
47
50
  );
48
51
  const [showError, setShowError] = useState('');
49
52
  const [isTextFieldModified, setIsTextFieldModified] = useState(false);
50
- const [isDropdownModified, setIsDropdownModified] = useState(false);
53
+ const isThrowingError = showError && isEditing ? true : false;
54
+
51
55
  const containerRef = useRef<HTMLDivElement | null>(null);
52
56
  const cancelRef = useRef<HTMLDivElement | null>(null); // New ref for cancel icon
53
57
  const [clickTimeout, setClickTimeout] = useState<number | null>(null);
@@ -105,7 +109,6 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
105
109
  setIsEditing(false);
106
110
  setShowError('');
107
111
  setIsTextFieldModified(false);
108
- setIsDropdownModified(false);
109
112
  };
110
113
 
111
114
  const handleTextFieldChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -114,12 +117,6 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
114
117
  setShowError('');
115
118
  };
116
119
 
117
- const handleDropdownChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
118
- setDropdownValue(e.target.value);
119
- setIsDropdownModified(true);
120
- setShowError('');
121
- };
122
-
123
120
  const handleBlur = (e: MouseEvent) => {
124
121
  if (
125
122
  containerRef.current &&
@@ -155,44 +152,40 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
155
152
  }`}
156
153
  style={{ height }}
157
154
  >
158
- <input
155
+ <Input
156
+ name="input"
159
157
  type="text"
158
+ label={label ? label : ''}
159
+ disabled={false}
160
+ error={isThrowingError}
161
+ placeholder={placeholder ? placeholder : ''}
160
162
  value={inputValue}
161
163
  onChange={handleTextFieldChange}
162
- className={`ff-text-dropdown-field ${
163
- isTextFieldModified ? 'modified' : ''
164
- }`}
165
- placeholder=" "
166
- style={{
167
- width,
168
- }}
164
+ className={`
165
+
166
+ ${isTextFieldModified ? 'modified' : ''}`}
167
+ />
168
+ <Select
169
+ label={''}
170
+ optionsList={dropdownData}
171
+ selectedOption={{ value: dropdownValue, label: dropdownValue }}
172
+ onChange={(option) => setDropdownValue(option.value)}
169
173
  />
170
- {label && <label className="ff-label">{label}</label>}
171
- <select
172
- value={dropdownValue}
173
- onChange={handleDropdownChange}
174
- className={`dropdown ${isDropdownModified ? 'modified' : ''}`}
175
- >
176
- {dropdownData.map((item) => (
177
- <option key={item.id} value={item.value}>
178
- {item.label}
179
- </option>
180
- ))}
181
- </select>
182
174
  </div>
183
175
  ) : (
184
176
  <div className="ff-label-text-field-without-dropdown">
185
- <input
177
+ <Input
178
+ name="input"
186
179
  type="text"
180
+ label={label ? label : ''}
181
+ disabled={false}
182
+ placeholder={placeholder ? placeholder : ''}
187
183
  value={inputValue}
188
184
  onChange={handleTextFieldChange}
189
- className={`ff-text-field ${
190
- isTextFieldModified ? 'modified' : ''
191
- }`}
192
- placeholder=" "
193
- style={{ width, height }}
185
+ className={`
186
+
187
+ ${isTextFieldModified ? 'modified' : ''}`}
194
188
  />
195
- <label className="ff-textfield-label">{label}</label>
196
189
  </div>
197
190
  )}
198
191
  <div className="ff-icon-container">
@@ -38,6 +38,7 @@ export interface LabelEditTextFieldTypes {
38
38
  isOpen?: boolean;
39
39
  /**for conditionally handle custom error */
40
40
  customErrorCondition?: boolean;
41
+ placeholder?: string;
41
42
  onClick?: () => void;
42
43
  tooltip?: {
43
44
  tooltipTitle?: string;
@@ -26,11 +26,7 @@
26
26
 
27
27
  .ff-machine-text-reverse,
28
28
  .ff-machine-text {
29
- overflow: hidden;
30
- white-space: nowrap;
31
- text-overflow: ellipsis;
32
- min-width: 30px;
33
- max-width: 70px;
29
+ max-width: fit-content;
34
30
  }
35
31
 
36
32
  .ff-machine-text-reverse {
@@ -15,15 +15,16 @@ type Story = StoryObj<typeof MachineInputField>;
15
15
 
16
16
  // Sample data for the MachineInputField
17
17
  const sampleOptions: MachineType[] = [
18
- { label: 'Local', type: 'Local' },
19
- { label: '121.25.36', type: 'Google Chrome' },
20
- { label: '17, iPhone 15', type: 'mac' },
21
- { label: 'Samsung Galaxy S23', type: 'android' },
18
+ { label: 'Local Environment', type: 'local' },
19
+ { label: '10.100.233.23', type: 'windows' },
20
+ { label: '121.25.333.344.2', type: 'Browserstack' },
21
+ { label: 'iphone 17 pro max', type: 'mac' },
22
+ { label: 'samsung galaxy s23', type: 'android' },
22
23
  ];
23
24
 
24
25
  export const Primary: Story = {
25
26
  args: {
26
- width: '410px', // Example width
27
+ width: '530px', // Example width
27
28
  options: sampleOptions,
28
29
  runCount: 1,
29
30
  },
@@ -4,19 +4,18 @@ import Typography from '../Typography';
4
4
  import Icon from '../Icon';
5
5
  import { MachineInputFieldProps, MachineType } from './types';
6
6
  import classNames from 'classnames';
7
+ import { truncateText } from '../../utils/truncateText/truncateText';
7
8
 
8
9
  const MachineInputField = forwardRef<HTMLDivElement, MachineInputFieldProps>(
9
- (
10
- {
11
- width = '',
12
- options = [],
13
- runCount = 0,
14
- className = '',
15
- contentReverse = false,
16
- onClick = () => {},
17
- },
18
- ref
19
- ) => {
10
+ ({
11
+ width = '',
12
+ options = [],
13
+ runCount = 0,
14
+ className = '',
15
+ contentReverse = false,
16
+ onClick = () => {},
17
+ modalId = '',
18
+ }) => {
20
19
  const getIcon: Record<MachineType['type'], string> = {
21
20
  Local: 'local',
22
21
  Browserstack: 'browserstack_icon',
@@ -31,14 +30,15 @@ const MachineInputField = forwardRef<HTMLDivElement, MachineInputFieldProps>(
31
30
  'Internet Explorer': 'internet_explorer',
32
31
  Safari: 'safari_icon',
33
32
  Opera: 'opera',
33
+ windows: 'windows',
34
34
  };
35
35
 
36
36
  return (
37
37
  <div
38
- ref={ref}
38
+ ref={modalId}
39
39
  style={{ width: width }}
40
40
  className={classNames('ff-machine-input-field-wrapper', className)}
41
- onClick={onClick}
41
+ onClick={() => onClick()}
42
42
  >
43
43
  <Typography
44
44
  as="span"
@@ -72,7 +72,7 @@ const MachineInputField = forwardRef<HTMLDivElement, MachineInputFieldProps>(
72
72
  })}
73
73
  color="var(--ff-machine-input-field-text-color)"
74
74
  >
75
- {label}
75
+ {truncateText(label, 15)}
76
76
  </Typography>
77
77
  </div>
78
78
  ))}
@@ -1,3 +1,4 @@
1
+
1
2
  export interface MachineType {
2
3
  type: string;
3
4
  label: string;
@@ -10,4 +11,5 @@ export interface MachineInputFieldProps {
10
11
  className?: string;
11
12
  contentReverse?: boolean;
12
13
  onClick?: () => void;
14
+ modalId?: string;
13
15
  }
@@ -45,7 +45,7 @@
45
45
  }
46
46
 
47
47
  .ff-option-card {
48
- position: fixed;
48
+ position: absolute;
49
49
  margin: 4px;
50
50
  border: 1px solid var(--option-card-border-color);
51
51
  background: var(--option-card-bg-color);
@@ -54,7 +54,7 @@
54
54
  min-width: 110px;
55
55
  width: max-content;
56
56
  border-radius: 4px;
57
- &--primary{
57
+ &--primary {
58
58
  background: var(--brand-color);
59
59
  color: var(--primary-button-text-color);
60
60
  svg {
@@ -62,14 +62,14 @@
62
62
  fill: var(--primary-icon-color);
63
63
  }
64
64
  }
65
- :hover{
65
+ :hover {
66
66
  color: var(--brand-color);
67
- svg {
68
- path {
69
- fill: var(--brand-color);
67
+ svg {
68
+ path {
69
+ fill: var(--brand-color);
70
+ }
70
71
  }
71
72
  }
72
- }
73
73
  }
74
74
  .ff-options {
75
75
  @extend .fontSm;