pixel-react 1.6.9 → 1.7.1

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 (147) 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/DownloadClient/type.d.ts +19 -27
  8. package/lib/components/Excel/ExcelFile/ExcelFileComponents/actions.d.ts +8 -1
  9. package/lib/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.d.ts +2 -0
  10. package/lib/components/Excel/ExcelFile/ExcelFileComponents/types.d.ts +13 -6
  11. package/lib/components/LabelEditTextField/types.d.ts +1 -0
  12. package/lib/components/MachineInputField/types.d.ts +1 -0
  13. package/lib/components/MenuOption/MenuOption.d.ts +1 -1
  14. package/lib/components/MenuOption/types.d.ts +2 -1
  15. package/lib/components/MiniModal/types.d.ts +1 -0
  16. package/lib/components/MultiSelect/MultiSelect.d.ts +1 -1
  17. package/lib/components/MultiSelect/MultiSelectTypes.d.ts +1 -0
  18. package/lib/components/MultiSelect/dropdownTypes.d.ts +1 -0
  19. package/lib/components/NLPInput/NlpInput.d.ts +2 -2
  20. package/lib/components/NLPInput/components/NlpDropDown/NlpDropDownType.d.ts +6 -3
  21. package/lib/components/NLPInput/components/NlpDropDown/NlpDropdown.d.ts +1 -1
  22. package/lib/components/NLPInput/sampleData.d.ts +104 -0
  23. package/lib/components/NLPInput/types.d.ts +80 -0
  24. package/lib/components/ProgressBar/ProgressBar.d.ts +5 -0
  25. package/lib/components/ProgressBar/index.d.ts +1 -0
  26. package/lib/components/ProgressBar/types.d.ts +12 -0
  27. package/lib/components/SequentialConnectingBranch/components/Branches/Branches.d.ts +1 -1
  28. package/lib/components/SequentialConnectingBranch/components/Branches/types.d.ts +4 -0
  29. package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.d.ts +1 -1
  30. package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/types.d.ts +4 -0
  31. package/lib/components/SequentialConnectingBranch/types.d.ts +7 -1
  32. package/lib/components/TableTree/TableTree.d.ts +2 -2
  33. package/lib/components/TableTree/Utils/getAllChildIds.d.ts +1 -0
  34. package/lib/components/TableTree/types.d.ts +1 -1
  35. package/lib/hooks/useIntersectionObserver.d.ts +9 -0
  36. package/lib/index.d.ts +112 -59
  37. package/lib/index.esm.js +1251 -662
  38. package/lib/index.esm.js.map +1 -1
  39. package/lib/index.js +1252 -662
  40. package/lib/index.js.map +1 -1
  41. package/lib/tsconfig.tsbuildinfo +1 -1
  42. package/lib/utils/functionCheck/functionCheck.d.ts +2 -0
  43. package/lib/utils/getSequentialPayload/types.d.ts +1 -0
  44. package/package.json +1 -1
  45. package/src/StyleGuide/ColorPalette/colorPaletteList.ts +5 -0
  46. package/src/assets/Themes/BaseTheme.scss +20 -2
  47. package/src/assets/Themes/DarkTheme.scss +19 -2
  48. package/src/assets/icons/ai_search.svg +9 -0
  49. package/src/assets/icons/help_icon.svg +10 -0
  50. package/src/assets/icons/ios_icon.svg +11 -0
  51. package/src/assets/icons/plus_round_icon.svg +38 -0
  52. package/src/assets/icons/tick_icon.svg +2 -2
  53. package/src/assets/styles/_colors.scss +1 -1
  54. package/src/components/AttachmentButton/AttachmentButton.tsx +1 -1
  55. package/src/components/Charts/LineChart/LineChart.stories.tsx +7 -3
  56. package/src/components/Charts/LineChart/LineChart.tsx +10 -1
  57. package/src/components/Charts/LineChart/types.ts +1 -0
  58. package/src/components/Checkbox/Checkbox.scss +3 -1
  59. package/src/components/Checkbox/Checkbox.stories.tsx +32 -77
  60. package/src/components/Checkbox/Checkbox.tsx +3 -4
  61. package/src/components/Chip/Chip.scss +15 -5
  62. package/src/components/Chip/Chip.stories.tsx +10 -1
  63. package/src/components/Chip/Chip.tsx +5 -1
  64. package/src/components/Chip/types.ts +1 -1
  65. package/src/components/{AddVariables/AddVariables.scss → ConditionalDropdown/ConditionalDropdown.scss} +4 -0
  66. package/src/components/{AddVariables/AddVariables.stories.tsx → ConditionalDropdown/ConditionalDropdown.stories.tsx} +75 -10
  67. package/src/components/{AddVariables/AddVariables.tsx → ConditionalDropdown/ConditionalDropdown.tsx} +63 -33
  68. package/src/components/ConditionalDropdown/OptionsDropdown.tsx +44 -0
  69. package/src/components/ConditionalDropdown/index.ts +1 -0
  70. package/src/components/{AddVariables → ConditionalDropdown}/types.ts +62 -5
  71. package/src/components/DownloadClient/DownloadClient.scss +51 -64
  72. package/src/components/DownloadClient/DownloadClient.stories.tsx +6 -6
  73. package/src/components/DownloadClient/DownloadClient.tsx +60 -51
  74. package/src/components/DownloadClient/type.ts +32 -40
  75. package/src/components/EditTextField/EditTextField.scss +1 -1
  76. package/src/components/EditTextField/EditTextField.tsx +14 -20
  77. package/src/components/Excel/ExcelFile/ExcelFile.scss +3 -2
  78. package/src/components/Excel/ExcelFile/ExcelFile.tsx +37 -21
  79. package/src/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.tsx +12 -0
  80. package/src/components/Excel/ExcelFile/ExcelFileComponents/Cell.tsx +2 -34
  81. package/src/components/Excel/ExcelFile/ExcelFileComponents/FloatingRect.tsx +26 -1
  82. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +7 -7
  83. package/src/components/Excel/ExcelFile/ExcelFileComponents/actions.ts +13 -0
  84. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +53 -26
  85. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +81 -14
  86. package/src/components/Excel/ExcelFile/ExcelFileComponents/types.ts +17 -6
  87. package/src/components/Excel/ExcelFile.stories.tsx +4 -4
  88. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +36 -19
  89. package/src/components/Excel/dataConversion.ts +43 -20
  90. package/src/components/FileDropzone/FileDropzone.stories.tsx +5 -19
  91. package/src/components/FileDropzone/FileDropzone.tsx +24 -4
  92. package/src/components/Form/Forms.tsx +0 -2
  93. package/src/components/Icon/iconList.ts +9 -0
  94. package/src/components/LabelEditTextField/LabelEditTextField.scss +1 -1
  95. package/src/components/LabelEditTextField/LabelEditTextField.tsx +29 -36
  96. package/src/components/LabelEditTextField/types.ts +1 -0
  97. package/src/components/MachineInputField/MachineInputField.scss +1 -5
  98. package/src/components/MachineInputField/MachineInputField.stories.tsx +6 -5
  99. package/src/components/MachineInputField/MachineInputField.tsx +14 -14
  100. package/src/components/MachineInputField/types.ts +2 -0
  101. package/src/components/MenuOption/MenuOption.scss +7 -7
  102. package/src/components/MenuOption/MenuOption.stories.tsx +83 -28
  103. package/src/components/MenuOption/MenuOption.tsx +9 -13
  104. package/src/components/MenuOption/types.ts +3 -2
  105. package/src/components/MiniModal/MiniModal.scss +0 -1
  106. package/src/components/MiniModal/MiniModal.stories.tsx +6 -1
  107. package/src/components/MiniModal/MiniModal.tsx +3 -1
  108. package/src/components/MiniModal/types.ts +1 -0
  109. package/src/components/MultiSelect/Dropdown.scss +3 -4
  110. package/src/components/MultiSelect/Dropdown.tsx +34 -7
  111. package/src/components/MultiSelect/MultiSelect.scss +1 -0
  112. package/src/components/MultiSelect/MultiSelect.tsx +3 -0
  113. package/src/components/MultiSelect/MultiSelectTypes.ts +3 -1
  114. package/src/components/MultiSelect/dropdownTypes.ts +2 -0
  115. package/src/components/NLPInput/NLPInput.scss +77 -21
  116. package/src/components/NLPInput/NlpInput.stories.tsx +43 -109
  117. package/src/components/NLPInput/NlpInput.tsx +95 -59
  118. package/src/components/NLPInput/components/NlpDropDown/NlpDropDownType.ts +6 -4
  119. package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.scss +86 -35
  120. package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.tsx +220 -80
  121. package/src/components/NLPInput/sampleData.ts +162 -0
  122. package/src/components/NLPInput/{type.tsx → types.tsx} +23 -11
  123. package/src/components/ProgressBar/ProgressBar.scss +46 -0
  124. package/src/components/ProgressBar/ProgressBar.stories.tsx +22 -0
  125. package/src/components/ProgressBar/ProgressBar.tsx +61 -0
  126. package/src/components/ProgressBar/index.ts +1 -0
  127. package/src/components/ProgressBar/types.ts +12 -0
  128. package/src/components/Search/Search.tsx +9 -1
  129. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.tsx +13 -2
  130. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx +36 -19
  131. package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +120 -32
  132. package/src/components/SequentialConnectingBranch/components/Branches/types.ts +7 -0
  133. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.tsx +8 -0
  134. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/types.ts +7 -0
  135. package/src/components/SequentialConnectingBranch/types.ts +7 -5
  136. package/src/components/Table/Table.scss +1 -0
  137. package/src/components/TableTree/Components/TableBody.tsx +3 -1
  138. package/src/components/TableTree/TableTree.stories.tsx +4 -7
  139. package/src/components/TableTree/TableTree.tsx +27 -181
  140. package/src/components/TableTree/Utils/getAllChildIds.ts +2 -0
  141. package/src/components/TableTree/data.ts +45 -0
  142. package/src/components/TableTree/types.ts +4 -4
  143. package/src/hooks/useIntersectionObserver.tsx +56 -0
  144. package/src/index.ts +4 -2
  145. package/src/utils/functionCheck/functionCheck.ts +8 -0
  146. package/src/utils/getSequentialPayload/types.ts +1 -0
  147. package/src/components/AddVariables/index.ts +0 -1
@@ -3,7 +3,7 @@ import { FileDropzoneProps } from './types';
3
3
  import './FileDropzone.scss';
4
4
  import Icon from '../Icon';
5
5
  import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
6
- import { useEffect, useMemo } from 'react';
6
+ import { useEffect, useMemo, useRef } from 'react';
7
7
  import Dropzone from './Dropzone';
8
8
  import FilePreview from './FilePreview';
9
9
  import classNames from 'classnames';
@@ -39,6 +39,7 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
39
39
  isApiResponseError = false,
40
40
  isDisable = false,
41
41
  }) => {
42
+ const fileInputRef = useRef<HTMLInputElement | null>(null);
42
43
  const {
43
44
  getRootProps,
44
45
  getInputProps,
@@ -77,6 +78,12 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
77
78
  [acceptedFiles, handleRemoveClick, handleReplaceClick]
78
79
  );
79
80
 
81
+ useEffect(() => {
82
+ if (selectedRadioOption?.value === 'Local File' && fileInputRef.current) {
83
+ fileInputRef.current.click();
84
+ }
85
+ }, [selectedRadioOption]);
86
+
80
87
  useEffect(() => {
81
88
  if (!checkEmpty(acceptedFiles) && setSelectedFile) {
82
89
  setSelectedFile(acceptedFiles[0] || null);
@@ -98,9 +105,12 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
98
105
  );
99
106
 
100
107
  return (
101
- <div className={classNames('ff-file-dropzone-wrapper',
102
- {'ff-disable-file-dropzone-wrapper': isDisable,}
103
- )} style={{ width: `${width}px` }}>
108
+ <div
109
+ className={classNames('ff-file-dropzone-wrapper', {
110
+ 'ff-disable-file-dropzone-wrapper': isDisable,
111
+ })}
112
+ style={{ width: `${width}px` }}
113
+ >
104
114
  <Dropzone
105
115
  icon={icon}
106
116
  primaryLabel={primaryLabel}
@@ -123,6 +133,16 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
123
133
  isDisable={isDisable}
124
134
  />
125
135
 
136
+ {isWebServiceFileDropZone && (
137
+ <input
138
+ ref={fileInputRef}
139
+ type="file"
140
+ className="ff-input-ref"
141
+ onChange={handleFileChange}
142
+ accept={accept.join(',')}
143
+ />
144
+ )}
145
+
126
146
  {isWebServiceFileDropZone ? null : (
127
147
  <div
128
148
  className={'ff-file-details-wrapper'}
@@ -1,6 +1,5 @@
1
1
  import React, { forwardRef, useImperativeHandle } from 'react';
2
2
  import Form from './Form';
3
-
4
3
  interface FormProps<T extends Form.FieldValues> extends Form.UseFormProps<T> {
5
4
  id?: string;
6
5
  onSubmit: Form.SubmitHandler<T>;
@@ -16,7 +15,6 @@ const Forms = <T extends Form.FieldValues>(
16
15
  ref: React.Ref<any>
17
16
  ) => {
18
17
  const methods = Form.useForm<T>(rest);
19
-
20
18
  const { handleSubmit } = methods;
21
19
  const extendedMethods = {
22
20
  ...methods,
@@ -117,6 +117,8 @@ import HideAccessIcon from '../../assets/icons/hide_access_icon.svg?react';
117
117
  import AddLocator from '../../assets/icons/add_locator.svg?react';
118
118
  import PlusUserIcon from '../../assets/icons/plus_user_icon.svg?react';
119
119
 
120
+ import IosIcon from '../../assets/icons/ios_icon.svg?react';
121
+ import HelpIcon from '../../assets/icons/help_icon.svg?react';
120
122
  import SwitchLicenseIcon from '../../assets/icons/switch_license_icon.svg?react';
121
123
  import FireflinkLogo from '../../assets/icons/fireflink_logo.svg?react';
122
124
  import WSWBDeleteIcon from '../../assets/icons/wswb_delete_icon.svg?react';
@@ -142,6 +144,7 @@ import NotificationIcon from '../../assets/icons/notification_icon.svg?react';
142
144
  import NLPHelpIcon from '../../assets/icons/nlp_help_icon.svg?react';
143
145
  import UpdateIcon from '../../assets/icons/update_icon.svg?react';
144
146
  import AddFile from '../../assets/icons/add_file.svg?react';
147
+ import PlusRoundIcon from '../../assets/icons/plus_round_icon.svg?react';
145
148
  import EyeClosed from '../../assets/icons/eye_closed.svg?react';
146
149
  import AttachmentIcon from '../../assets/icons/attachment_icon.svg?react';
147
150
  import AuthorizationIcon from '../../assets/icons/authorization_icon.svg?react';
@@ -192,6 +195,8 @@ import SystemWarning from '../../assets/icons/system_warning.svg?react';
192
195
  import UserPasswordLock from '../../assets/icons/user_password_lock.svg?react';
193
196
  import UserWarning from '../../assets/icons/user_warning.svg?react';
194
197
  import UserWithSystem from '../../assets/icons/user_with_system.svg?react';
198
+ import AiSearch from '../../assets/icons/ai_search.svg?react';
199
+
195
200
  import Import from '../../assets/icons/import.svg?react';
196
201
  import dashboardWebIcon from '../../assets/icons/dashboard_web_icon.svg?react';
197
202
  import dashboardMobileIcon from '../../assets/icons/dashboard_mobile_icon.svg?react';
@@ -352,6 +357,8 @@ Components['android_icon'] = AndroidIcon;
352
357
  Components['plus_user_icon'] = PlusUserIcon;
353
358
  Components['label_plus'] = LabelPlusIcon;
354
359
  Components['manual_locator'] = ManualLocator;
360
+ Components['ios_icon'] = IosIcon;
361
+ Components['help_icon'] = HelpIcon;
355
362
  Components['select_license'] = SwitchLicenseIcon;
356
363
  Components['fireflink-logo'] = FireflinkLogo;
357
364
  Components['wswb_delete_icon'] = WSWBDeleteIcon;
@@ -383,6 +390,7 @@ Components['notification_icon'] = NotificationIcon;
383
390
  Components['nlp_help_icon'] = NLPHelpIcon;
384
391
  Components['update_icon'] = UpdateIcon;
385
392
  Components['add_file'] = AddFile;
393
+ Components['plus_round_icon'] = PlusRoundIcon;
386
394
  Components['clone_icon'] = CloneIcon;
387
395
  Components['move_icon'] = MoveIcon;
388
396
  Components['jira'] = Jira;
@@ -395,6 +403,7 @@ Components['hide_access_icon'] = HideAccessIcon;
395
403
  Components['eye_closed'] = EyeClosed;
396
404
  Components['attachment_icon'] = AttachmentIcon;
397
405
  Components['authorization_icon'] = AuthorizationIcon;
406
+ Components['ai_search'] = AiSearch;
398
407
 
399
408
  Components['fireflink_platform_logo'] = FireflinkPlatform;
400
409
  Components['fireflink_finder_logo'] = FireflinkFinder;
@@ -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;
@@ -1,7 +1,7 @@
1
1
  import type { Meta, StoryObj } from '@storybook/react';
2
2
  import MenuOption from './MenuOption';
3
3
  import './MenuOption.scss';
4
- import React, { ReactNode } from 'react';
4
+ import React, { ReactNode, useRef } from 'react';
5
5
  import Icon from '../Icon';
6
6
 
7
7
  const meta: Meta<typeof MenuOption> = {
@@ -29,16 +29,16 @@ const meta: Meta<typeof MenuOption> = {
29
29
  },
30
30
  tooltipPlacement: {
31
31
  control: {
32
- type: 'text',
33
- options: ['top', 'down', 'left', 'right'],
32
+ type: 'select',
33
+ options: ['top', 'down', 'left', 'right'],
34
34
  },
35
35
  description: 'Placement of the tooltip relative to the button.',
36
36
  defaultValue: 'top',
37
37
  },
38
38
  dropdownPlacement: {
39
39
  control: {
40
- type: 'text',
41
- options: ['top', 'down', 'left', 'right'],
40
+ type: 'select',
41
+ options: ['top', 'down', 'left', 'right'],
42
42
  },
43
43
  description: 'Placement of the dropdown menu relative to the button.',
44
44
  defaultValue: 'down',
@@ -49,7 +49,15 @@ const meta: Meta<typeof MenuOption> = {
49
49
  type Story = StoryObj<typeof MenuOption>;
50
50
 
51
51
  const options = [
52
- { label: <div style={{display:'flex', justifyContent:"center", alignItems:"center",gap:"8px"}}>hello <Icon name='edit'/></div>, value: 'opt1', icon: 'success' },
52
+ {
53
+ label: (
54
+ <div>
55
+ hello <Icon name="edit" />
56
+ </div>
57
+ ),
58
+ value: 'opt1',
59
+ icon: 'success',
60
+ },
53
61
  { label: 'Option 2', value: 'opt2', icon: 'success' },
54
62
  {
55
63
  label: 'Delete',
@@ -59,21 +67,31 @@ const options = [
59
67
  },
60
68
  ];
61
69
 
62
- const handleOptionClick = (option: { label: string|ReactNode }) => {
70
+ const handleOptionClick = (option: { label: string | ReactNode }) => {
63
71
  alert(`Option clicked: ${option.label}`);
64
72
  };
65
73
 
66
-
67
74
  export const ControlledMenuOption: Story = {
68
75
  args: {
69
76
  iconName: 'more',
70
77
  labelName: 'Controlled Menu',
71
78
  tooltipTitle: 'Select an option',
72
- dropdownPlacement: "top",
79
+ dropdownPlacement: 'top',
80
+ },
81
+ render: (args) => {
82
+ const moreRef = useRef<HTMLDivElement>(null);
83
+ return (
84
+ <div ref={moreRef}>
85
+ <MenuOption
86
+ {...args}
87
+ options={options}
88
+ targetRef={moreRef} // Make sure targetRef is passed properly here
89
+ onOptionClick={handleOptionClick}
90
+ dropdownPlacement="left" // Dropdown placement for testing
91
+ />
92
+ </div>
93
+ );
73
94
  },
74
- render: (args) => (
75
- <MenuOption {...args} options={options} onOptionClick={handleOptionClick} />
76
- ),
77
95
  parameters: {
78
96
  docs: {
79
97
  description: {
@@ -84,15 +102,24 @@ export const ControlledMenuOption: Story = {
84
102
  },
85
103
  };
86
104
 
87
-
88
105
  export const MenuOptionTop: Story = {
89
106
  args: {
90
107
  ...ControlledMenuOption.args,
91
108
  dropdownPlacement: 'top',
92
109
  },
93
- render: (args) => (
94
- <MenuOption {...args} options={options} onOptionClick={handleOptionClick} />
95
- ),
110
+ render: (args) => {
111
+ const moreRef = useRef<HTMLDivElement>(null);
112
+ return (
113
+ <div ref={moreRef}>
114
+ <MenuOption
115
+ {...args}
116
+ options={options}
117
+ targetRef={moreRef}
118
+ onOptionClick={handleOptionClick}
119
+ />
120
+ </div>
121
+ );
122
+ },
96
123
  parameters: {
97
124
  docs: {
98
125
  description: {
@@ -102,15 +129,24 @@ export const MenuOptionTop: Story = {
102
129
  },
103
130
  };
104
131
 
105
-
106
132
  export const MenuOptionBottom: Story = {
107
133
  args: {
108
134
  ...ControlledMenuOption.args,
109
135
  dropdownPlacement: 'down',
110
136
  },
111
- render: (args) => (
112
- <MenuOption {...args} options={options} onOptionClick={handleOptionClick} />
113
- ),
137
+ render: (args) => {
138
+ const moreRef = useRef<HTMLDivElement>(null);
139
+ return (
140
+ <div ref={moreRef}>
141
+ <MenuOption
142
+ {...args}
143
+ options={options}
144
+ targetRef={moreRef}
145
+ onOptionClick={handleOptionClick}
146
+ />
147
+ </div>
148
+ );
149
+ },
114
150
  parameters: {
115
151
  docs: {
116
152
  description: {
@@ -120,15 +156,24 @@ export const MenuOptionBottom: Story = {
120
156
  },
121
157
  };
122
158
 
123
-
124
159
  export const MenuOptionLeft: Story = {
125
160
  args: {
126
161
  ...ControlledMenuOption.args,
127
162
  dropdownPlacement: 'left',
128
163
  },
129
- render: (args) => (
130
- <MenuOption {...args} options={options} onOptionClick={handleOptionClick} />
131
- ),
164
+ render: (args) => {
165
+ const moreRef = useRef<HTMLDivElement>(null);
166
+ return (
167
+ <div ref={moreRef}>
168
+ <MenuOption
169
+ {...args}
170
+ options={options}
171
+ targetRef={moreRef}
172
+ onOptionClick={handleOptionClick}
173
+ />
174
+ </div>
175
+ );
176
+ },
132
177
  parameters: {
133
178
  docs: {
134
179
  description: {
@@ -141,11 +186,21 @@ export const MenuOptionLeft: Story = {
141
186
  export const MenuOptionRight: Story = {
142
187
  args: {
143
188
  ...ControlledMenuOption.args,
144
- dropdownPlacement: 'right',
189
+ dropdownPlacement: 'right', // Proper dropdown placement
190
+ },
191
+ render: (args) => {
192
+ const moreRef = useRef<HTMLDivElement>(null);
193
+ return (
194
+ <div ref={moreRef}>
195
+ <MenuOption
196
+ {...args}
197
+ options={options}
198
+ targetRef={moreRef} // Properly pass ref to targetRef
199
+ onOptionClick={handleOptionClick}
200
+ />
201
+ </div>
202
+ );
145
203
  },
146
- render: (args) => (
147
- <MenuOption {...args} options={options} onOptionClick={handleOptionClick} />
148
- ),
149
204
  parameters: {
150
205
  docs: {
151
206
  description: {
@@ -31,7 +31,7 @@ const Option = ({ option, onClick }: OptionProps) => (
31
31
  )}
32
32
  <Typography
33
33
  as="label"
34
- lineHeight='18px'
34
+ lineHeight="18px"
35
35
  color={option.icon === 'delete' ? 'var(--delete-text-color)' : ''}
36
36
  >
37
37
  {option.label}
@@ -74,13 +74,13 @@ const OptionCard = ({
74
74
  };
75
75
  case 'down':
76
76
  return {
77
- top: menuPosition.top + 18,
77
+ top: menuPosition.top + 20,
78
78
  left: menuPosition.left - 4,
79
79
  };
80
80
  case 'left':
81
81
  return {
82
82
  top: menuPosition.top - 4,
83
- left: menuPosition.left - optionsWidth - 7,
83
+ left: menuPosition.left - optionsWidth - 8,
84
84
  };
85
85
  case 'right':
86
86
  return {
@@ -127,7 +127,8 @@ const MenuOption = ({
127
127
  variant = 'light',
128
128
  zIndex = 99,
129
129
  dropdownPlacement = 'down',
130
- optionCardVariant
130
+ optionCardVariant,
131
+ targetRef,
131
132
  }: MenuOptionProps) => {
132
133
  const [isClicked, setIsClicked] = useState(false);
133
134
  const menuRef = useRef<HTMLDivElement>(null);
@@ -136,8 +137,6 @@ const MenuOption = ({
136
137
  left: 0,
137
138
  height: 0,
138
139
  right: 0,
139
- rightSpaceAvailable: 0,
140
- bottomSpaceAvailable: 0,
141
140
  });
142
141
 
143
142
  const closeDropDown = () => setIsClicked(false);
@@ -154,20 +153,17 @@ const MenuOption = ({
154
153
  };
155
154
 
156
155
  const calculateDims = () => {
157
- if (menuRef?.current) {
158
- const rect = menuRef.current.getBoundingClientRect();
156
+ if (targetRef?.current) {
157
+ const rect = targetRef.current.getBoundingClientRect();
159
158
 
160
159
  setMenuPosition({
161
- top: rect.top,
162
- left: rect.left,
160
+ top: rect.top + window.scrollY,
161
+ left: rect.left + window.scrollX,
163
162
  height: rect.height,
164
163
  right: rect.right,
165
- rightSpaceAvailable: document.body.clientWidth - rect.right,
166
- bottomSpaceAvailable: window.innerHeight - menuRef.current.offsetTop,
167
164
  });
168
165
  }
169
166
  };
170
-
171
167
  return (
172
168
  <div className="ff-menu-option-container" ref={menuRef}>
173
169
  <Tooltip title={tooltipTitle} placement={tooltipPlacement}>