pixel-react 1.7.5 → 1.7.7

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 (98) hide show
  1. package/.yarn/install-state.gz +0 -0
  2. package/lib/StyleGuide/ColorPalette/ColorPalette.stories.d.ts +6 -0
  3. package/lib/StyleGuide/Typography/Typography.stories.d.ts +6 -0
  4. package/lib/components/Accordion/Accordion.stories.d.ts +6 -0
  5. package/lib/components/AddResourceButton/AddButton.stories.d.ts +8 -0
  6. package/lib/components/Button/Button.stories.d.ts +12 -0
  7. package/lib/components/Charts/DonutChart/DonutChart.stories.d.ts +6 -0
  8. package/lib/components/Charts/RadialChart/RadialChart.stories.d.ts +6 -0
  9. package/lib/components/Checkbox/Checkbox.stories.d.ts +8 -0
  10. package/lib/components/Chip/Chip.stories.d.ts +14 -0
  11. package/lib/components/ConditionalDropdown/types.d.ts +1 -1
  12. package/lib/components/DatePicker/DatePicker.stories.d.ts +9 -0
  13. package/lib/components/DragAndDrop/DragAndDrop.stories.d.ts +6 -0
  14. package/lib/components/Drawer/Drawer.stories.d.ts +7 -0
  15. package/lib/components/ExpandableMenu/ExpandableMenu.stories.d.ts +7 -0
  16. package/lib/components/FileDropzone/FileDropzone.stories.d.ts +8 -0
  17. package/lib/components/FileDropzone/types.d.ts +12 -4
  18. package/lib/components/Form/Form.stories.d.ts +6 -0
  19. package/lib/components/GridLayout/GridLayout.stories.d.ts +8 -0
  20. package/lib/components/HighlightText/HighlightText.stories.d.ts +6 -0
  21. package/lib/components/Icon/Icon.stories.d.ts +7 -0
  22. package/lib/components/IconButton/IconButton.stories.d.ts +6 -0
  23. package/lib/components/Input/Input.stories.d.ts +9 -0
  24. package/lib/components/InputWithDropdown/InputWithDropdown.stories.d.ts +9 -0
  25. package/lib/components/LazyLoad/LazyLoad.stories.d.ts +6 -0
  26. package/lib/components/MenuOption/MenuOption.stories.d.ts +15 -0
  27. package/lib/components/MenuOption/types.d.ts +1 -1
  28. package/lib/components/MiniModal/MiniModal.stories.d.ts +9 -0
  29. package/lib/components/Modal/Modal.stories.d.ts +7 -0
  30. package/lib/components/MultiSelect/MultiSelect.stories.d.ts +9 -0
  31. package/lib/components/PopUpModal/types.d.ts +2 -1
  32. package/lib/components/RadioButton/RadioButton.stories.d.ts +10 -0
  33. package/lib/components/RadioGroup/RadioGroup.stories.d.ts +8 -0
  34. package/lib/components/Search/Search.stories.d.ts +6 -0
  35. package/lib/components/Select/Select.stories.d.ts +13 -0
  36. package/lib/components/Select/components/Dropdown/Dropdown.d.ts +4 -0
  37. package/lib/components/Select/components/Dropdown/dropdownTypes.d.ts +15 -0
  38. package/lib/components/StateDropdown/StateDropdown.stories.d.ts +10 -0
  39. package/lib/components/StatusButton/StatusButton.stories.d.ts +14 -0
  40. package/lib/components/Table/Table.stories.d.ts +11 -0
  41. package/lib/components/TableTree/TableTree.stories.d.ts +7 -0
  42. package/lib/components/Tabs/Tabs.stories.d.ts +9 -0
  43. package/lib/components/TextArea/Textarea.stories.d.ts +9 -0
  44. package/lib/components/ThemeProvider/CustomThemeProvider.d.ts +8 -0
  45. package/lib/components/ThemeProvider/types.d.ts +1 -1
  46. package/lib/components/Toast/Toast.stories.d.ts +6 -0
  47. package/lib/components/Toggle/Toggle.stories.d.ts +12 -0
  48. package/lib/components/Tooltip/Tooltip.stories.d.ts +15 -0
  49. package/lib/components/Typography/Typography.stories.d.ts +10 -0
  50. package/lib/hooks/useCustomThemeProvider.d.ts +11 -0
  51. package/lib/index.d.ts +70 -64
  52. package/lib/index.esm.js +204 -272
  53. package/lib/index.esm.js.map +1 -1
  54. package/lib/index.js +204 -272
  55. package/lib/index.js.map +1 -1
  56. package/lib/tsconfig.tsbuildinfo +1 -1
  57. package/lib/utils/checkEmpty/checkEmpty.stories.d.ts +6 -0
  58. package/lib/utils/compareArrays/compareArrays.stories.d.ts +6 -0
  59. package/lib/utils/compareObjects/compareObjects.stories.d.ts +6 -0
  60. package/lib/utils/debounce/debounce.stories.d.ts +6 -0
  61. package/lib/utils/ffID/ffID.stories.d.ts +6 -0
  62. package/lib/utils/find/findAndInsert.d.ts +7 -0
  63. package/lib/utils/find/findAndInsert.stories.d.ts +7 -0
  64. package/lib/utils/getExtension/getExtension.stories.d.ts +6 -0
  65. package/lib/utils/throttle/throttle.stories.d.ts +6 -0
  66. package/lib/utils/truncateText/truncateText.stories.d.ts +6 -0
  67. package/package.json +1 -1
  68. package/src/assets/Themes/BlueTheme.scss +279 -0
  69. package/src/assets/Themes/Theme.scss +5 -0
  70. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.scss +4 -0
  71. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +1 -1
  72. package/src/components/ConditionalDropdown/ConditionalDropdown.stories.tsx +1 -1
  73. package/src/components/ConditionalDropdown/types.ts +1 -1
  74. package/src/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.tsx +8 -8
  75. package/src/components/Excel/ExcelFile/ExcelFileComponents/RowIndicator.tsx +1 -5
  76. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +4 -3
  77. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +35 -27
  78. package/src/components/FileDropzone/Dropzone.tsx +3 -0
  79. package/src/components/FileDropzone/FileDropzone.scss +18 -0
  80. package/src/components/FileDropzone/FileDropzone.stories.tsx +75 -7
  81. package/src/components/FileDropzone/FileDropzone.tsx +2 -0
  82. package/src/components/FileDropzone/RadioFilePreview.tsx +7 -3
  83. package/src/components/FileDropzone/types.ts +13 -4
  84. package/src/components/Icon/iconList.ts +2 -2
  85. package/src/components/MenuOption/MenuOption.stories.tsx +2 -3
  86. package/src/components/MenuOption/MenuOption.tsx +27 -29
  87. package/src/components/MenuOption/types.ts +1 -1
  88. package/src/components/PopUpModal/types.ts +4 -3
  89. package/src/components/Search/Search.stories.tsx +1 -2
  90. package/src/components/ThemeProvider/types.ts +1 -1
  91. package/lib/assets/fonts/Poppins-Bold.ttf +0 -0
  92. package/lib/assets/fonts/Poppins-Medium.ttf +0 -0
  93. package/lib/assets/fonts/Poppins-Regular.ttf +0 -0
  94. package/lib/assets/fonts/Poppins-SemiBold.ttf +0 -0
  95. package/lib/components/Excel/ContextMenu/ContextMenu.d.ts +0 -4
  96. package/lib/components/NLPInput/type.d.ts +0 -70
  97. package/lib/components/TableTree/TableTree copy.d.ts +0 -25
  98. /package/src/assets/icons/{impactList.svg → impact_list.svg} +0 -0
@@ -1,4 +1,4 @@
1
- import { useEffect, useState } from 'react';
1
+ import { useEffect, useRef, useState } from 'react';
2
2
  import './ExcelToolBar.scss';
3
3
  import MenuOption from '../../MenuOption';
4
4
  import Tooltip from '../../Tooltip';
@@ -69,6 +69,8 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
69
69
  };
70
70
 
71
71
  const [cellStyle, setCellStyle] = useState(cell?.style || basicStyle);
72
+ const underLineMenuRef = useRef<HTMLSpanElement>(null);
73
+ const borderMenuRef = useRef<HTMLSpanElement>(null);
72
74
 
73
75
  useEffect(() => {
74
76
  setCellStyle(cell?.style || basicStyle);
@@ -315,19 +317,22 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
315
317
  onClick={() => setUnderlineType(data, underLine, true)}
316
318
  name={getUnderlineIcon()}
317
319
  />
318
- <MenuOption
319
- iconName="arrow_down"
320
- zIndex={1000}
321
- iconSize={12}
322
- options={underlineTypeIcon}
323
- tooltipPlacement="top"
324
- variant="light"
325
- onOptionClick={(e) => {
326
- let selectedValue = e.value as string;
327
- setUnderlineType(data, selectedValue, true);
328
- setUnderLine(selectedValue);
329
- }}
330
- />
320
+ <span ref={underLineMenuRef}>
321
+ <MenuOption
322
+ targetRef={underLineMenuRef}
323
+ iconName="arrow_down"
324
+ zIndex={1000}
325
+ iconSize={12}
326
+ options={underlineTypeIcon}
327
+ tooltipPlacement="top"
328
+ variant="light"
329
+ onOptionClick={(e) => {
330
+ let selectedValue = e.value as string;
331
+ setUnderlineType(data, selectedValue, true);
332
+ setUnderLine(selectedValue);
333
+ }}
334
+ />
335
+ </span>
331
336
  </div>
332
337
  </Tooltip>
333
338
  </div>
@@ -391,19 +396,22 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
391
396
  onClick={() => setBorderType(data, border, 'black')}
392
397
  name={getBorderIcon()}
393
398
  />
394
- <MenuOption
395
- iconName="arrow_down"
396
- iconSize={12}
397
- zIndex={1000}
398
- options={borderTypeIcon}
399
- tooltipPlacement="top"
400
- variant="light"
401
- onOptionClick={(e) => {
402
- let selectedValue = e.value as string;
403
- setBorderType(data, selectedValue, 'black');
404
- setBorder(selectedValue);
405
- }}
406
- />
399
+ <span ref={borderMenuRef}>
400
+ <MenuOption
401
+ iconName="arrow_down"
402
+ targetRef={borderMenuRef}
403
+ iconSize={12}
404
+ zIndex={1000}
405
+ options={borderTypeIcon}
406
+ tooltipPlacement="top"
407
+ variant="light"
408
+ onOptionClick={(e) => {
409
+ let selectedValue = e.value as string;
410
+ setBorderType(data, selectedValue, 'black');
411
+ setBorder(selectedValue);
412
+ }}
413
+ />
414
+ </span>
407
415
  </div>
408
416
  </Tooltip>
409
417
  </div>
@@ -24,6 +24,7 @@ const Dropzone: FC<DroppableProps> = ({
24
24
  setSelectedFile,
25
25
  handleRemoveFile,
26
26
  isDisable,
27
+ setShowDrawer,
27
28
  }) => {
28
29
  const isWebServiceFile = selectedFile?.name && isWebServiceFileDropZone;
29
30
  return (
@@ -42,6 +43,8 @@ const Dropzone: FC<DroppableProps> = ({
42
43
  onFileRemoveClick={handleRemoveFile}
43
44
  onFileReplaceClick={setSelectedFile}
44
45
  setSelectedFile={setSelectedFile}
46
+ selectedRadioOption={selectedRadioOption}
47
+ setShowDrawer={setShowDrawer}
45
48
  />
46
49
  ) : (
47
50
  <>
@@ -4,6 +4,12 @@
4
4
  gap: $gap;
5
5
  }
6
6
 
7
+ @mixin flex-center {
8
+ display: flex;
9
+ align-items: center;
10
+ justify-content: center;
11
+ }
12
+
7
13
  @mixin center {
8
14
  display: grid;
9
15
  place-items: center;
@@ -160,4 +166,16 @@
160
166
  .ff-disable-file-dropzone-wrapper {
161
167
  opacity: 0.5;
162
168
  cursor: not-allowed;
169
+ }
170
+ .footer_basic_button {
171
+ width: 100%;
172
+ position: absolute;
173
+ bottom: 0;
174
+ right: 0;
175
+ @include flex-center;
176
+ justify-content: flex-end;
177
+ gap: 16px;
178
+ border-top: 1px solid var(--border-color);
179
+ padding: 4px 8px;
180
+ background-color: var(--primary-icon-color);
163
181
  }
@@ -5,8 +5,10 @@ import Toaster from '../Toast';
5
5
  import { useState } from 'react';
6
6
  import { RadioOption } from './types';
7
7
  import Drawer from '../Drawer/Drawer';
8
- import Typography from '../Typography';
8
+ import ConditionalDropdown from '../ConditionalDropdown/ConditionalDropdown';
9
9
  import './FileDropzone.scss';
10
+ import { DynamicObj } from '../CreateVariable/types';
11
+ import Button from '../Button';
10
12
 
11
13
  const meta: Meta<typeof FileDropzone> = {
12
14
  title: 'Components/FileDropzone',
@@ -107,8 +109,12 @@ export const WithRadioButton: Story = {
107
109
 
108
110
  const [selectedRadioOption, setSelectedRadioOption] =
109
111
  useState<RadioOption>();
110
- const [selectedFile, setSelectedFile] = useState<File | null>(null);
111
-
112
+ const [selectedFile, setSelectedFile] = useState<File | DynamicObj | null>(
113
+ null
114
+ );
115
+ const [testDataSelectedFile, setTestDataSelectedFile] = useState<
116
+ DynamicObj | File | null
117
+ >(null);
112
118
 
113
119
  const drawerArgs = {
114
120
  primaryButtonProps: {
@@ -156,6 +162,42 @@ export const WithRadioButton: Story = {
156
162
  }, 2000);
157
163
  };
158
164
 
165
+ const testData = [
166
+ {
167
+ _id: '1',
168
+ name: 'File1.txt',
169
+ actualPath: '/documents/File1.txt',
170
+ searchKey: 'file1',
171
+ parentId: 'root',
172
+ },
173
+ {
174
+ _id: '2',
175
+ name: 'File2.doc',
176
+ actualPath: '/documents/File2.doc',
177
+ searchKey: 'file2',
178
+ parentId: 'root',
179
+ },
180
+ {
181
+ _id: '3',
182
+ name: 'Image1.png',
183
+ actualPath: '/images/Image1.png',
184
+ searchKey: 'image1',
185
+ parentId: 'folder1',
186
+ },
187
+ {
188
+ _id: '4',
189
+ name: 'Presentation.ppt',
190
+ actualPath: '/presentations/Presentation.ppt',
191
+ searchKey: 'presentation',
192
+ parentId: 'folder2',
193
+ },
194
+ ];
195
+
196
+ const handleSaveButton = () => {
197
+ setSelectedFile(testDataSelectedFile);
198
+ setShowModal(false);
199
+ };
200
+
159
201
  return (
160
202
  <>
161
203
  <FileDropzone
@@ -176,6 +218,7 @@ export const WithRadioButton: Story = {
176
218
  selectedFile={selectedFile}
177
219
  handleFileChange={handleFileChange}
178
220
  handleRemoveFile={handleRemoveFile}
221
+ setShowDrawer={setShowModal}
179
222
  />
180
223
  {showToaster && (
181
224
  <Toaster
@@ -185,18 +228,43 @@ export const WithRadioButton: Story = {
185
228
  toastMessage={'Max 5 files can be uploaded'}
186
229
  />
187
230
  )}
188
- {selectedRadioOption?.value === 'Local File' &&
231
+ {selectedRadioOption?.value === 'Test Data' && (
189
232
  <Drawer
190
233
  {...drawerArgs}
191
234
  isOpen={showModal}
192
235
  onClose={() => setShowModal(false)}
193
- isFooterRequired={true}
236
+ isFooterRequired={false}
194
237
  _isExpanded={false}
195
238
  size="small"
239
+
196
240
  >
197
- <Typography>Upload TestData Files Here</Typography>
241
+ <ConditionalDropdown
242
+ label="Select Path Using #"
243
+ placeholder="Enter # to search files"
244
+ isHash
245
+ dataFiles={testData}
246
+ dropdownWidth="auto"
247
+ setHashInputValue={setTestDataSelectedFile}
248
+ />
249
+ <div className="footer_basic_button">
250
+ <Button
251
+ type="button"
252
+ variant="secondary"
253
+ size="small"
254
+ onClick={() => setShowModal(false)}
255
+ label={'Cancel'}
256
+ />
257
+
258
+ <Button
259
+ type={'button'}
260
+ variant="primary"
261
+ size="small"
262
+ label={'Save'}
263
+ onClick={handleSaveButton}
264
+ />
265
+ </div>
198
266
  </Drawer>
199
- }
267
+ )}
200
268
  </>
201
269
  );
202
270
  },
@@ -38,6 +38,7 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
38
38
  handleRemoveFile,
39
39
  isApiResponseError = false,
40
40
  isDisable = false,
41
+ setShowDrawer,
41
42
  }) => {
42
43
  const fileInputRef = useRef<HTMLInputElement | null>(null);
43
44
  const {
@@ -131,6 +132,7 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
131
132
  handleRemoveFile={handleRemoveFile}
132
133
  setSelectedFile={setSelectedFile}
133
134
  isDisable={isDisable}
135
+ setShowDrawer={setShowDrawer}
134
136
  />
135
137
 
136
138
  {isWebServiceFileDropZone && (
@@ -8,14 +8,18 @@ import { useRef } from 'react';
8
8
  const RadioFilePreview: React.FC<RadioFilePreviewProps> = ({
9
9
  selectedFile,
10
10
  onFileRemoveClick,
11
- onFileReplaceClick
11
+ onFileReplaceClick,
12
+ selectedRadioOption,
13
+ setShowDrawer,
12
14
  }) => {
13
15
  const fileInputRef = useRef<HTMLInputElement | null>(null);
14
16
 
15
17
  const handleReplaceClick = () => {
16
- if (fileInputRef.current) {
17
- fileInputRef.current.click();
18
+ if (selectedRadioOption?.value === 'Test Data') {
19
+ setShowDrawer?.(true);
20
+ return;
18
21
  }
22
+ fileInputRef.current?.click();
19
23
  };
20
24
 
21
25
  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -1,4 +1,5 @@
1
1
  import { ReactNode } from 'react';
2
+ import { DynamicObj } from '../CreateVariable/types';
2
3
  export interface RadioOption {
3
4
  label: string;
4
5
  value: string;
@@ -93,12 +94,12 @@ export interface FileDropzoneProps {
93
94
  /**
94
95
  * Its the File Name of File Selected from Local File.
95
96
  **/
96
- setSelectedFile?: (file: File | null) => void;
97
+ setSelectedFile?: (file: File | DynamicObj | null) => void;
97
98
 
98
99
  /**
99
100
  * Its the File Name of File Selected from Local File.
100
101
  **/
101
- selectedFile?: File | null;
102
+ selectedFile?: File | DynamicObj | null;
102
103
 
103
104
  /**
104
105
  * Its the function which updates the Selected file from Local Directory.
@@ -120,6 +121,11 @@ export interface FileDropzoneProps {
120
121
  **/
121
122
  isDisable?: boolean;
122
123
 
124
+ /**
125
+ * Its the boolean value setted when the replace is clicked for TestData radio option .
126
+ **/
127
+ setShowDrawer?: (value: boolean | ((prevState: boolean) => boolean)) => void;
128
+
123
129
  }
124
130
  export interface FileState {
125
131
  accepted: File[];
@@ -176,11 +182,12 @@ export interface DroppableProps {
176
182
  selectedRadioOption?: Option,
177
183
  radioOptions?: RadioOption[],
178
184
  handleOptionChange?: (option: RadioOption)=> void,
179
- selectedFile?: File | null,
180
- setSelectedFile?: (file: File | null) => void;
185
+ selectedFile?: File | DynamicObj | null,
186
+ setSelectedFile?: (file: File | DynamicObj | null) => void;
181
187
  handleFileChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
182
188
  handleRemoveFile?: () => void;
183
189
  isDisable?: boolean;
190
+ setShowDrawer?: (value: boolean | ((prevState: boolean) => boolean)) => void;
184
191
  }
185
192
 
186
193
  export interface FilePreviewProps {
@@ -196,4 +203,6 @@ export interface RadioFilePreviewProps {
196
203
  onFileRemoveClick?: () => void;
197
204
  onFileReplaceClick?: (file: File | null) => void;
198
205
  setSelectedFile?: (file: File | null) => void;
206
+ selectedRadioOption?: Option,
207
+ setShowDrawer?: (value: boolean | ((prevState: boolean) => boolean)) => void
199
208
  }
@@ -45,7 +45,7 @@ import ManualLocator from '../../assets/icons/manual_locator.svg?react';
45
45
  import LicenseIcon from '../../assets/icons/active_license_icon.svg?react';
46
46
  import DeleteIcon from '../../assets/icons/delete.svg?react';
47
47
  import DetailsIcon from '../../assets/icons/details.svg?react';
48
- import ImpactListIcon from '../../assets/icons/impactList.svg?react';
48
+ import ImpactListIcon from '../../assets/icons/impact_list.svg?react';
49
49
  import Export from '../../assets/icons/export.svg?react';
50
50
  import FormatePainter from '../../assets/icons/formate_painter.svg?react';
51
51
  import Bold from '../../assets/icons/bold.svg?react';
@@ -295,7 +295,7 @@ Components['run_icon'] = RunIcon;
295
295
  Components['license'] = LicenseIcon;
296
296
  Components['delete'] = DeleteIcon;
297
297
  Components['details'] = DetailsIcon;
298
- Components['impactList'] = ImpactListIcon;
298
+ Components['impact_list'] = ImpactListIcon;
299
299
  Components['beautify_icon'] = BeautifyIcon;
300
300
  Components['add_variable_icon'] = AddVariable;
301
301
  Components['replace_file'] = ReplaceFile;
@@ -135,13 +135,12 @@ export const MenuOptionBottom: Story = {
135
135
  dropdownPlacement: 'down',
136
136
  },
137
137
  render: (args) => {
138
- const moreRef = useRef<HTMLDivElement>(null);
139
138
  return (
140
- <div ref={moreRef}>
139
+ <div id="more">
141
140
  <MenuOption
142
141
  {...args}
143
142
  options={options}
144
- targetRef={moreRef}
143
+ targetRef={'more'}
145
144
  onOptionClick={handleOptionClick}
146
145
  />
147
146
  </div>
@@ -57,9 +57,9 @@ const OptionCard = ({
57
57
 
58
58
  useEffect(() => {
59
59
  if (optionCardRef?.current) {
60
- const rect = optionCardRef.current.getBoundingClientRect();
61
- setOptionsHeight(rect.height);
62
- setOptionsWidth(rect.width);
60
+ const rect = optionCardRef?.current?.getBoundingClientRect();
61
+ setOptionsHeight(rect?.height);
62
+ setOptionsWidth(rect?.width);
63
63
  }
64
64
  }, []);
65
65
 
@@ -74,7 +74,7 @@ const OptionCard = ({
74
74
  };
75
75
  case 'down':
76
76
  return {
77
- top: menuPosition.top + menuPosition.height + 7,
77
+ top: menuPosition.top + 20,
78
78
  left: menuPosition.left - 4,
79
79
  };
80
80
  case 'left':
@@ -85,22 +85,16 @@ const OptionCard = ({
85
85
  case 'right':
86
86
  return {
87
87
  top: menuPosition.top - 4,
88
- left: menuPosition.left + menuPosition.height + 20,
88
+ left: menuPosition.left + 20,
89
89
  };
90
90
  default:
91
91
  return {
92
- top: menuPosition.top,
93
- left: menuPosition.left,
92
+ top: menuPosition.bottom,
93
+ left: menuPosition.rightSpaceAvailable + 12,
94
94
  };
95
95
  }
96
96
  })();
97
97
 
98
- const adjustedStyle = {
99
- top: Math.min(Math.max(style.top, 0), window.innerHeight - optionsHeight),
100
- left: Math.min(Math.max(style.left, 0), window.innerWidth - optionsWidth),
101
- zIndex,
102
- };
103
-
104
98
  return createPortal(
105
99
  <div
106
100
  className={classNames(
@@ -108,7 +102,7 @@ const OptionCard = ({
108
102
  [{ 'ff-option-card--primary': variant === 'primary' }],
109
103
  currentTheme
110
104
  )}
111
- style={adjustedStyle}
105
+ style={{ ...style, zIndex }}
112
106
  ref={optionCardRef}
113
107
  >
114
108
  {options.map((opt) => (
@@ -147,21 +141,6 @@ const MenuOption = ({
147
141
 
148
142
  const closeDropDown = () => setIsClicked(false);
149
143
 
150
- const calculateDims = () => {
151
- if (targetRef?.current) {
152
- const rect = targetRef.current.getBoundingClientRect();
153
- const containerScrollTop = targetRef.current?.offsetParent?.scrollTop || 0;
154
- const containerScrollLeft = targetRef.current?.offsetParent?.scrollLeft || 0;
155
-
156
- setMenuPosition({
157
- top: rect.top + window.scrollY - containerScrollTop,
158
- left: rect.left + window.scrollX - containerScrollLeft,
159
- height: rect.height,
160
- right: rect.right,
161
- });
162
- }
163
- };
164
-
165
144
  const onIconClickHandler = () => {
166
145
  onClick();
167
146
  calculateDims();
@@ -173,6 +152,25 @@ const MenuOption = ({
173
152
  closeDropDown();
174
153
  };
175
154
 
155
+ const calculateDims = () => {
156
+ let targetElement: HTMLElement | null = null;
157
+ if (typeof targetRef === 'string') {
158
+ targetElement = document.getElementById(targetRef);
159
+ } else if (targetRef && targetRef.current) {
160
+ targetElement = targetRef.current;
161
+ }
162
+
163
+ if (targetElement) {
164
+ const rect = targetElement.getBoundingClientRect();
165
+ setMenuPosition({
166
+ top: rect.top + window.scrollY,
167
+ left: rect.left + window.scrollX,
168
+ height: rect.height,
169
+ right: rect.right,
170
+ });
171
+ }
172
+ };
173
+
176
174
  return (
177
175
  <div className="ff-menu-option-container" ref={menuRef}>
178
176
  <Tooltip title={tooltipTitle} placement={tooltipPlacement}>
@@ -208,7 +208,7 @@ interface MenuOptionProps {
208
208
  * @optional
209
209
  */
210
210
  optionCardVariant?: 'primary';
211
- targetRef?: React.RefObject<HTMLElement>;
211
+ targetRef?: string | React.RefObject<HTMLElement>;
212
212
  }
213
213
 
214
214
  interface OptionProps {
@@ -5,12 +5,13 @@ export interface PopUpModalProps {
5
5
  titleMessage: string;
6
6
  subTitleMessage?: string;
7
7
  iconName: string;
8
- modalMessage: string;
8
+ modalMessage: string | React.ReactNode;
9
+ secondaryMessage?: string | React.ReactNode;
9
10
  firstButtonLabel?: string;
10
11
  secondButtonLabel: string;
11
12
  buttonVariant: any;
12
13
  border: string;
13
- popupWidth?:string,
14
+ popupWidth?: string;
14
15
  colorForTitleMessage?: string;
15
- footerContent?:React.ReactNode;
16
+ footerContent?: React.ReactNode;
16
17
  }
@@ -1,6 +1,6 @@
1
1
  import type { Meta, StoryObj } from '@storybook/react';
2
2
  import Search from './Search';
3
- import React,{ useState } from 'react';
3
+ import React, { useState } from 'react';
4
4
  const meta: Meta<typeof Search> = {
5
5
  title: 'Components/Search',
6
6
  component: Search,
@@ -17,7 +17,6 @@ export const Default: Story = {
17
17
  const [searchValue, setSearchValue] = useState('');
18
18
 
19
19
  const handleSearch = (value: string) => {
20
- alert(`Searching for: ${value}`);
21
20
  setSearchValue(value);
22
21
  };
23
22
 
@@ -1,6 +1,6 @@
1
1
  import { ReactNode } from "react";
2
2
 
3
- export type Theme = 'ff-light-theme' | 'ff-dark-theme' | 'ff-grey-theme';
3
+ export type Theme = 'ff-light-theme' | 'ff-dark-theme' | 'ff-grey-theme' | 'ff-blue-theme';
4
4
 
5
5
  export interface ThemeContextType {
6
6
  currentTheme: Theme;
Binary file
Binary file
@@ -1,4 +0,0 @@
1
- import React from 'react';
2
- import './ContextMenu.scss';
3
- declare const ContextMenu: React.FC<ContextMenuProps>;
4
- export default ContextMenu;
@@ -1,70 +0,0 @@
1
- import { ReactNode } from 'react';
2
- export interface SelectProps {
3
- label?: string;
4
- showLabel?: boolean;
5
- optionsList: any[];
6
- selectedOption?: Option;
7
- onChange: (option: Option) => void;
8
- errorMsg?: string;
9
- className?: string;
10
- optionZIndex?: number;
11
- disabled?: boolean;
12
- borderRadius?: boolean;
13
- showBorder?: boolean;
14
- required?: boolean;
15
- }
16
- export interface DrowdownPosition {
17
- positionX: number;
18
- positionY: number;
19
- width: number;
20
- fromBottom: number;
21
- }
22
- export interface SelectState {
23
- isInputFocused: boolean;
24
- iconColor: string;
25
- isIconClick: boolean;
26
- showOptions: boolean;
27
- options: any[];
28
- option: string;
29
- dropdownPosition: DrowdownPosition;
30
- }
31
- export type SelectAction = {
32
- type: 'FOCUS_INPUT';
33
- } | {
34
- type: 'BLUR_INPUT';
35
- payload: {
36
- optionsList: Option[];
37
- option: Option['projectId'];
38
- };
39
- } | {
40
- type: 'MOUSE_ENTER';
41
- } | {
42
- type: 'MOUSE_LEAVE';
43
- } | {
44
- type: 'UPDATE_DROPDOWN_POSITION';
45
- payload: {
46
- positionX: number;
47
- positionY: number;
48
- width: number;
49
- fromBottom: number;
50
- };
51
- } | {
52
- type: 'UPDATE_OPTION';
53
- payload: string;
54
- } | {
55
- type: 'UPDATE_OPTION_LIST';
56
- payload: any[];
57
- } | {
58
- type: 'SHOW_ERROR';
59
- payload: {
60
- optionsList: any[];
61
- option: Option['projectId'];
62
- };
63
- };
64
- export interface Option {
65
- displayName: string | ReactNode;
66
- projectId: string;
67
- nlpType: string;
68
- platform: string;
69
- disabled?: boolean;
70
- }
@@ -1,25 +0,0 @@
1
- import React, { ReactNode } from 'react';
2
- import './TableTree.scss';
3
- interface ColumnDataProps {
4
- name: string;
5
- accessor: string;
6
- width: string;
7
- isClickable?: boolean;
8
- minWidth?: string;
9
- cell?: (e: any) => JSX.Element | string | ReactNode;
10
- actions?: (e: any) => JSX.Element | string | ReactNode;
11
- }
12
- interface ObjectProps {
13
- [key: string]: any;
14
- }
15
- interface TableTreeProps {
16
- select: 'checkbox' | 'radio' | 'none';
17
- columnsData: Array<ColumnDataProps>;
18
- treeData: Array<ObjectProps>;
19
- onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>, data: any) => void;
20
- onChange?: (e: any, node: any) => void;
21
- selected: Array<string>;
22
- onPagination?: (node: ObjectProps) => void;
23
- }
24
- declare const TableTree: ({ columnsData, treeData, select, onClick, onChange, selected, onPagination, }: TableTreeProps) => import("react/jsx-runtime").JSX.Element;
25
- export default TableTree;