pixel-react 1.10.9 → 1.10.10-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 (45) hide show
  1. package/lib/components/AddResourceButton/AddResourceButton.d.ts +1 -1
  2. package/lib/components/AddResourceButton/ArrowsButton/ArrowsButton.d.ts +1 -1
  3. package/lib/components/AddResourceButton/type.d.ts +9 -0
  4. package/lib/components/Excel/ExcelFile/ExcelFile.d.ts +62 -5
  5. package/lib/components/InputWithDropdown/types.d.ts +2 -0
  6. package/lib/components/variableSuggestionInputDropDown/OptionsDropdown.d.ts +5 -0
  7. package/lib/components/variableSuggestionInputDropDown/VariableSuggestionInputDropDown.d.ts +4 -0
  8. package/lib/components/variableSuggestionInputDropDown/index.d.ts +1 -0
  9. package/lib/components/variableSuggestionInputDropDown/types.d.ts +150 -0
  10. package/lib/index.d.ts +204 -13
  11. package/lib/index.esm.js +136 -109
  12. package/lib/index.esm.js.map +1 -1
  13. package/lib/index.js +136 -109
  14. package/lib/index.js.map +1 -1
  15. package/lib/tsconfig.tsbuildinfo +1 -1
  16. package/package.json +1 -1
  17. package/src/assets/icons/module_icon.svg +3 -0
  18. package/src/components/AddResourceButton/AddResourceButton.stories.tsx +32 -16
  19. package/src/components/AddResourceButton/AddResourceButton.tsx +2 -0
  20. package/src/components/AddResourceButton/ArrowsButton/ArrowsButton.tsx +2 -1
  21. package/src/components/AddResourceButton/type.ts +9 -0
  22. package/src/components/AllProjectsDropdown/AllProjectsDropdown.scss +1 -1
  23. package/src/components/AllProjectsDropdown/AllProjectsDropdown.tsx +1 -1
  24. package/src/components/AppHeader/AppHeader.scss +1 -1
  25. package/src/components/Editor/VariableDropdown.scss +0 -1
  26. package/src/components/Editor/VariableDropdown.tsx +9 -2
  27. package/src/components/Excel/ExcelFile/ExcelFile.tsx +122 -54
  28. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +0 -1
  29. package/src/components/Excel/ExcelFile.stories.tsx +1 -0
  30. package/src/components/FileDropzone/Dropzone.tsx +2 -1
  31. package/src/components/FileDropzone/FileDropzone.tsx +3 -5
  32. package/src/components/Icon/iconList.ts +6 -4
  33. package/src/components/InputWithDropdown/InputWithDropdown.tsx +6 -2
  34. package/src/components/InputWithDropdown/types.ts +2 -0
  35. package/src/components/Select/components/Dropdown.scss +1 -0
  36. package/src/components/TableTree/TableTree.stories.tsx +26 -12
  37. package/src/components/TableTree/TableTree.tsx +47 -23
  38. package/src/components/TableTree/data.ts +1 -1
  39. package/src/components/variableSuggestionInputDropDown/OptionsDropdown.tsx +51 -0
  40. package/src/components/variableSuggestionInputDropDown/VariableSuggestionInputDropDown.scss +18 -0
  41. package/src/components/variableSuggestionInputDropDown/VariableSuggestionInputDropDown.stories.tsx +155 -0
  42. package/src/components/variableSuggestionInputDropDown/VariableSuggestionInputDropDown.tsx +244 -0
  43. package/src/components/variableSuggestionInputDropDown/index.ts +1 -0
  44. package/src/components/variableSuggestionInputDropDown/types.ts +166 -0
  45. package/src/index.ts +2 -0
@@ -558,7 +558,6 @@ export function edit(state: Types.StoreState): Types.StoreState {
558
558
  return { ...state, mode: 'edit' };
559
559
  }
560
560
 
561
-
562
561
  const canClearCell = (cell: Types.CellBase | undefined) =>
563
562
  cell && !cell.readOnly;
564
563
  const clearCell = (cell: Types.CellBase | undefined) => {
@@ -161,6 +161,7 @@ export const Default: Story = {
161
161
  contextHeightPositioning: -220,
162
162
  contextWidthPositioning: -180,
163
163
  sheetHeight: '300px',
164
+ onSaveDelay:1000,
164
165
  onSave: (val) => {
165
166
  console.log(val);
166
167
  },
@@ -34,6 +34,7 @@ const Dropzone: FC<DroppableProps> = ({
34
34
  'ff-file-dropzone--active': isDragActive,
35
35
  'ff-file-dropzone--webservice-file': isWebServiceFile,
36
36
  'ff-file-dropzone--webservice-container': isWebServiceFileDropZone,
37
+ 'ff-disable-file-dropzone-wrapper': isDisable,
37
38
  })}
38
39
  style={{ height: height }}
39
40
  >
@@ -88,7 +89,7 @@ const Dropzone: FC<DroppableProps> = ({
88
89
  <Button
89
90
  variant="primary"
90
91
  label={buttonLabel}
91
- className='choose-file-btn'
92
+ className="choose-file-btn"
92
93
  disabled={isDisable}
93
94
  >
94
95
  <input
@@ -88,8 +88,8 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
88
88
  useEffect(() => {
89
89
  if (!checkEmpty(acceptedFiles) && setSelectedFile) {
90
90
  setSelectedFile(acceptedFiles[0] || null);
91
- }
92
- }, [acceptedFiles, setSelectedFile]);
91
+ }
92
+ }, [acceptedFiles, setSelectedFile]);
93
93
 
94
94
  const rejectedFilesList = useMemo(
95
95
  () =>
@@ -107,9 +107,7 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
107
107
 
108
108
  return (
109
109
  <div
110
- className={classNames('ff-file-dropzone-wrapper', {
111
- 'ff-disable-file-dropzone-wrapper': isDisable,
112
- })}
110
+ className={classNames('ff-file-dropzone-wrapper')}
113
111
  style={{ width: `${width}px` }}
114
112
  >
115
113
  <Dropzone
@@ -287,8 +287,9 @@ import FileColored from '../../assets/icons/file_colored.svg?react';
287
287
  import JiraColored from '../../assets/icons/jira_colored.svg?react';
288
288
  import Screenshot from '../../assets/icons/screenshot.svg?react';
289
289
  import DeleteFilled from '../../assets/icons/delete_filled.svg?react';
290
- import PrimaryCalendarIcon from '../../assets/icons/primary_calendar_icon.svg?react'
291
- import SauseLabPrimaryIcon from "../../assets/icons/sause_lab_icon.svg?react"
290
+ import PrimaryCalendarIcon from '../../assets/icons/primary_calendar_icon.svg?react';
291
+ import SauseLabPrimaryIcon from '../../assets/icons/sause_lab_icon.svg?react';
292
+ import ModuleIcon from '../../assets/icons/module_icon.svg?react';
292
293
 
293
294
  import totalDefectsStatusIcon from '../../assets/icons/total_defects_status_icon.svg?react';
294
295
  import openDefectsStatusIcon from '../../assets/icons/open_defects_icon.svg?react';
@@ -576,13 +577,14 @@ Components['file_colored'] = FileColored;
576
577
  Components['jira_colored'] = JiraColored;
577
578
  Components['screenshot'] = Screenshot;
578
579
  Components['delete_filled'] = DeleteFilled;
579
- Components['primary_calendar_icon'] = PrimaryCalendarIcon
580
- Components['sause_lab_icon'] = SauseLabPrimaryIcon
580
+ Components['primary_calendar_icon'] = PrimaryCalendarIcon;
581
+ Components['sause_lab_icon'] = SauseLabPrimaryIcon;
581
582
 
582
583
  Components['total_defects_status_icon'] = totalDefectsStatusIcon;
583
584
  Components['open_defects_status_icon'] = openDefectsStatusIcon;
584
585
  Components['closed_defects_status_icon'] = closedDefectsStatusIcon;
585
586
  Components['quality_score_status_icon'] = qualityScoreStatusIcon;
586
587
  Components['defect_density_status_icon'] = defectDensityStatusIcon;
588
+ Components['module_icon'] = ModuleIcon;
587
589
 
588
590
  export default Components;
@@ -20,7 +20,7 @@ const InputWithDropdown = forwardRef<HTMLInputElement, InputWithDropdownProps>(
20
20
  optionsList,
21
21
  selectedOption = { label: '', value: '' },
22
22
  autoComplete = 'off',
23
- onDropdownChangeHandler = () => {},
23
+ onDropdownChangeHandler = () => { },
24
24
  onInputChangeHandler,
25
25
  onInputBlurHandler,
26
26
  onClick,
@@ -29,6 +29,8 @@ const InputWithDropdown = forwardRef<HTMLInputElement, InputWithDropdownProps>(
29
29
  optionsRequired = true,
30
30
  dropdownPosition = 'right',
31
31
  type = 'text',
32
+ leftDropDownPositionZindex,
33
+ rightDropDownPositionZindex
32
34
  },
33
35
  ref
34
36
  ) => {
@@ -58,7 +60,7 @@ const InputWithDropdown = forwardRef<HTMLInputElement, InputWithDropdownProps>(
58
60
  showBorder={false}
59
61
  onChange={onDropdownChangeHandler}
60
62
  disabled={disabled || !optionsRequired}
61
- optionZIndex={999999}
63
+ optionZIndex={leftDropDownPositionZindex}
62
64
  optionsRequired={optionsRequired}
63
65
  className={classNames('ff-floating-dropdown', {
64
66
  'ff-floating-dropdown--disabled': !!disabled,
@@ -113,6 +115,8 @@ const InputWithDropdown = forwardRef<HTMLInputElement, InputWithDropdownProps>(
113
115
  selectedOption={selectedOption}
114
116
  showLabel={false}
115
117
  showBorder={false}
118
+ optionZIndex={rightDropDownPositionZindex
119
+ }
116
120
  onChange={onDropdownChangeHandler}
117
121
  disabled={disabled || !optionsRequired}
118
122
  optionsRequired={optionsRequired}
@@ -116,4 +116,6 @@ export interface InputWithDropdownProps {
116
116
  optionsRequired?: boolean;
117
117
 
118
118
  dropdownPosition?: 'left' | 'right';
119
+ leftDropDownPositionZindex?: number;
120
+ rightDropDownPositionZindex?: number;
119
121
  }
@@ -95,6 +95,7 @@
95
95
  align-items: center;
96
96
  justify-content: flex-end;
97
97
  gap: 8px;
98
+ padding-right: 4px;
98
99
  }
99
100
  }
100
101
  }
@@ -4,7 +4,7 @@ import Button from '../Button';
4
4
  import treeData from './data';
5
5
  import Icon from '../Icon/Icon';
6
6
  import './TableTreeStories.scss';
7
- import React, { useState } from 'react';
7
+ import React, { ReactNode, useState } from 'react';
8
8
  import AddResourceButton from '../AddResourceButton/AddResourceButton';
9
9
 
10
10
  const meta: Meta<typeof TableTree> = {
@@ -37,7 +37,7 @@ const colData = [
37
37
  menuOptions: [
38
38
  {
39
39
  label: 'Module',
40
- value: 'add_module',
40
+ value: 'add_module_top',
41
41
  icon: 'module_icon',
42
42
  disable: false,
43
43
  },
@@ -48,32 +48,38 @@ const colData = [
48
48
  menuOptions: [
49
49
  {
50
50
  label: 'Sub Module',
51
- value: 'add_module',
51
+ value: 'add_module_sibling',
52
52
  icon: 'module_icon',
53
53
  disable: false,
54
54
  },
55
55
  {
56
56
  label: 'Automation Script',
57
- value: 'add_module',
58
- icon: 'module_icon',
57
+ value: 'add_Automation_script_sibling',
58
+ icon: 'automation_testcase',
59
59
  disable: false,
60
60
  },
61
61
  {
62
62
  label: 'Manual Test Case',
63
- value: 'add_module',
64
- icon: 'module_icon',
63
+ value: 'add_manual_test_case_sibling',
64
+ icon: 'manual_testcase',
65
65
  disable: false,
66
66
  },
67
67
  {
68
68
  label: 'Pre / Post Condition',
69
- value: 'add_module',
70
- icon: 'module_icon',
69
+ value: 'add_pre_post_condition_sibling',
70
+ icon: 'pre_post_condition',
71
71
  disable: false,
72
72
  },
73
73
  {
74
74
  label: 'Authorization',
75
- value: 'add_module',
76
- icon: 'module_icon',
75
+ value: 'add_authorization_sibling',
76
+ icon: 'authorization_icon',
77
+ disable: false,
78
+ },
79
+ {
80
+ label: 'Data Provider',
81
+ value: 'data_provider_sibling',
82
+ icon: 'data_provider',
77
83
  disable: false,
78
84
  },
79
85
  ],
@@ -83,13 +89,19 @@ const colData = [
83
89
  menuOptions: [
84
90
  {
85
91
  label: 'Sub Module',
86
- value: 'sub_module',
92
+ value: 'sub_module_down',
87
93
  icon: 'module_icon',
88
94
  disable: false,
89
95
  },
90
96
  ],
91
97
  },
92
98
  ]}
99
+ onMenuOptionClick={(option: {
100
+ label: string | ReactNode;
101
+ value: any;
102
+ }) => {
103
+ alert(`Option clicked: ${option.label}, Value: ${option.value}`);
104
+ }}
93
105
  />,
94
106
  ];
95
107
  },
@@ -186,6 +198,7 @@ export const Default: Story = {
186
198
  onClick: (e, data) => {
187
199
  console.log('🚀 ~ e, data:', e, data); //Todo:need to remove
188
200
  },
201
+ height: 100,
189
202
  },
190
203
  };
191
204
 
@@ -194,6 +207,7 @@ export const ControlledCheckBox: Story = {
194
207
  const [selected, setSelected] = useState<string[]>([]);
195
208
  return (
196
209
  <TableTree
210
+ height={100}
197
211
  onExpand={(node, index) => {
198
212
  console.log(node, index);
199
213
  }}
@@ -4,6 +4,7 @@ import { TreeTableProps } from './types';
4
4
  import TableHead from './Components/TableHead';
5
5
  import TableBody from './Components/TableBody';
6
6
  import { TreeNodeProps } from '../../ComponentProps/TreeNodeProps';
7
+ import { throttle } from '../../utils/throttle/throttle';
7
8
 
8
9
  const TreeTable: React.FC<TreeTableProps> = ({
9
10
  treeData,
@@ -21,6 +22,14 @@ const TreeTable: React.FC<TreeTableProps> = ({
21
22
  onAddCancel = () => {},
22
23
  }) => {
23
24
  const observerRef = useRef<IntersectionObserver | null>(null);
25
+ const triggeredNodesRef = useRef<Set<string>>(new Set()); // Track already triggered nodes
26
+
27
+ // Throttled version of loadMore
28
+ const throttledLoadMore = useRef(
29
+ throttle((direction: string) => {
30
+ loadMore(direction);
31
+ }, 300)
32
+ ).current;
24
33
 
25
34
  useEffect(() => {
26
35
  const scrollContainer = document.getElementById(
@@ -29,36 +38,51 @@ const TreeTable: React.FC<TreeTableProps> = ({
29
38
  const firstNode = document.getElementById('ff-table-tree-first-node');
30
39
  const lastNode = document.getElementById('ff-table-tree-last-node');
31
40
 
32
- // Exit early if treeData is empty or elements are missing
33
- if (!scrollContainer || !firstNode || !lastNode || !treeData?.length) {
41
+ // Exit early if essential elements or data are missing
42
+ if (!scrollContainer || !firstNode || !lastNode || !treeData?.length)
34
43
  return;
35
- }
36
-
37
- observerRef.current = new IntersectionObserver(
38
- (entries) => {
39
- entries.forEach((entry) => {
40
- if (entry.isIntersecting) {
41
- const direction =
42
- entry.target.id === 'ff-table-tree-last-node' ? 'below' : 'above';
43
- loadMore(direction);
44
+
45
+ const isLastResourceAbove = treeData[0]?.lastResource;
46
+ const isLastResourceBelow = treeData[treeData.length - 1]?.lastResource;
47
+
48
+ if (isLastResourceAbove && isLastResourceBelow) return;
49
+
50
+ const observerCallback = (entries: IntersectionObserverEntry[]) => {
51
+ entries.forEach((entry) => {
52
+ const nodeId = entry.target.id;
53
+ const direction =
54
+ nodeId === 'ff-table-tree-last-node' ? 'below' : 'above';
55
+
56
+ if (entry.isIntersecting) {
57
+ if (
58
+ !triggeredNodesRef.current.has(nodeId) &&
59
+ ((direction === 'above' && !isLastResourceAbove) ||
60
+ (direction === 'below' && !isLastResourceBelow))
61
+ ) {
62
+ triggeredNodesRef.current.add(nodeId);
63
+ throttledLoadMore(direction);
44
64
  }
45
- });
46
- },
47
- {
48
- root: scrollContainer,
49
- rootMargin: '8px',
50
- threshold: 0.1,
51
- }
52
- );
65
+ } else {
66
+ // Remove node from triggered set when it goes out of view
67
+ triggeredNodesRef.current.delete(nodeId);
68
+ }
69
+ });
70
+ };
71
+
72
+ observerRef.current = new IntersectionObserver(observerCallback, {
73
+ root: scrollContainer,
74
+ rootMargin: '8px',
75
+ threshold: 0.1,
76
+ });
53
77
 
54
- observerRef.current.observe(firstNode);
55
- observerRef.current.observe(lastNode);
78
+ if (!isLastResourceAbove) observerRef.current.observe(firstNode);
79
+ if (!isLastResourceBelow) observerRef.current.observe(lastNode);
56
80
 
57
81
  return () => {
58
- // Cleanup observer
59
82
  observerRef.current?.disconnect();
83
+ throttledLoadMore.cancel();
60
84
  };
61
- }, [treeData, loadMore]);
85
+ }, [treeData, throttledLoadMore]);
62
86
 
63
87
  const handleToggleExpand = useCallback(
64
88
  (node: TreeNodeProps, index: number) => onExpand?.(node, index),
@@ -136,7 +136,7 @@ const data = [
136
136
  container: true,
137
137
  localDelete: false,
138
138
  defaultEntity: false,
139
- lastResource: true,
139
+ lastResource: false,
140
140
  },
141
141
  // Repeat similar patterns to generate 50 entries, modifying hierarchy, executionOrder, and other attributes as needed.
142
142
  ];
@@ -0,0 +1,51 @@
1
+ import type { FC, ReactNode } from 'react';
2
+ import { dynamicObject, OptionsDropdownProps } from './types';
3
+ import './VariableSuggestionInputDropDown.scss';
4
+ import Typography from '../Typography';
5
+ import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
6
+
7
+ const OptionsDropdown:FC<OptionsDropdownProps> = ({
8
+ onSelectVariable,
9
+ dropdownPosition,
10
+ filteredOptions= [],
11
+ position = 'relative',
12
+ width = '100%',
13
+ }): ReactNode => {
14
+ return (
15
+ <div
16
+ className={`ff-variable-dropdown ${position}`}
17
+ style={
18
+ dropdownPosition
19
+ ? {
20
+ top: dropdownPosition.top + 30,
21
+ left: dropdownPosition.left - 30,
22
+ width,
23
+ }
24
+ : { width }
25
+ }
26
+ >
27
+ {!checkEmpty(filteredOptions)? filteredOptions?.map((option: dynamicObject): ReactNode => {
28
+ return (
29
+ <div
30
+ className="ff-variable-option"
31
+ onClick={() => onSelectVariable(option)}
32
+ key={option?.id}
33
+ >
34
+ <Typography as="span" fontSize={14}>
35
+ {option?.name}
36
+ </Typography>
37
+ </div>
38
+ );
39
+ }) : (
40
+ <div
41
+ className="ff-variable-option"
42
+ >
43
+ <Typography as='div' children='No Option' fontSize={14} />
44
+ </div>
45
+
46
+ )}
47
+ </div>
48
+ );
49
+ };
50
+
51
+ export default OptionsDropdown;
@@ -0,0 +1,18 @@
1
+ .ff-add-variable-container {
2
+ width: 100%;
3
+ display: flex;
4
+ flex-direction: column;
5
+ gap: 8px;
6
+ position: relative;
7
+ .ff-add-variable-input {
8
+ width: 100%;
9
+ display: flex;
10
+ flex-direction: row;
11
+ align-items: center;
12
+ gap: 8px;
13
+ }
14
+ }
15
+ .ff-variable-dropdown {
16
+ padding: 4px;
17
+ width: auto;
18
+ }
@@ -0,0 +1,155 @@
1
+ import React, { useRef, useState } from 'react';
2
+ import { Meta, StoryFn, StoryObj } from '@storybook/react';
3
+ import VariableSuggestionInputDropDown from './VariableSuggestionInputDropDown';
4
+ import { VariableSuggestionInputDropDownProps, dynamicObject } from './types';
5
+ import { variableList } from '../Editor/constants';
6
+ import CreateVariableSlider from '../CreateVariable/CreateVariableSlider';
7
+
8
+ export default {
9
+ title: 'Components/VariableSuggestionInputDropDown',
10
+ component: VariableSuggestionInputDropDown,
11
+ args: {
12
+ label: 'Add Variables',
13
+ placeholder: 'Enter text',
14
+ variableList,
15
+ dropdownWidth: '100%',
16
+ variant: 'primary',
17
+ },
18
+ parameters: {
19
+ layout: 'centered',
20
+ },
21
+ } as Meta<VariableSuggestionInputDropDownProps>;
22
+
23
+ type Story = StoryObj<typeof VariableSuggestionInputDropDown>;
24
+
25
+ const Template: StoryFn<VariableSuggestionInputDropDownProps> = (args) => {
26
+ const inputRef = useRef<HTMLInputElement>(null);
27
+ const [inputValue, setInputValue] = useState<string>('');
28
+ const [openCreateVariable, setOpenCreateVariable] = useState<boolean>(false);
29
+ const [variableName, setVariableName] = useState<string>('');
30
+ const [variableValue, setVariableValue] = useState<string>('');
31
+ const [selectedVariable, setSelectedVariable] = useState<dynamicObject>({
32
+ label: 'Local Variable',
33
+ value: 'LOCAL',
34
+ });
35
+ const [hideValue, setHideValue] = useState<boolean>(false);
36
+
37
+ return (
38
+ <>
39
+ <VariableSuggestionInputDropDown
40
+ {...args}
41
+ onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
42
+ setInputValue(event.target.value)
43
+ }
44
+ value={inputValue}
45
+ onCreateVariableClick={() => setOpenCreateVariable(true)}
46
+ ref={inputRef}
47
+ showAddVariableIcon
48
+ />
49
+ {openCreateVariable && (
50
+ <CreateVariableSlider
51
+ isOpen={openCreateVariable}
52
+ onClose={() => setOpenCreateVariable(false)}
53
+ variableName={variableName}
54
+ value={variableValue}
55
+ hideValue={hideValue}
56
+ handleSubmit={() => {
57
+ alert('Variable Created');
58
+ }}
59
+ onHideChange={(value) => {
60
+ setHideValue(value);
61
+ }}
62
+ onNameChange={(value) => {
63
+ setVariableName(value);
64
+ }}
65
+ onValueChange={(value) => setVariableValue(value)}
66
+ onVariableTypeChange={(option) => setSelectedVariable(option)}
67
+ selectedVariableType={selectedVariable}
68
+ variableTypesList={[
69
+ { label: 'Local Variable', value: 'LOCAL' },
70
+ { label: 'Global Variable', value: 'GLOBAL' },
71
+ ]}
72
+ />
73
+ )}
74
+ </>
75
+ );
76
+ };
77
+
78
+ export const Default = Template.bind({});
79
+ Default.args = {
80
+ onCreateVariableClick: () => alert('Create Variable clicked'),
81
+ };
82
+
83
+ export const WithInitialValue = Template.bind({});
84
+ WithInitialValue.args = {
85
+ inputValue: 'Initial Text with $',
86
+ onCreateVariableClick: () => alert('Create Variable clicked'),
87
+ };
88
+
89
+ export const DropdownOnHash: Story = {
90
+ render: () => {
91
+ const [hashInputValue, setHashInputValue] =
92
+ useState<dynamicObject | null>();
93
+ const [value, setValue] = useState<string>('');
94
+ const testData = [
95
+ {
96
+ _id: '1',
97
+ name: 'File1.txt',
98
+ actualPath: '/documents/File1.txt',
99
+ searchKey: 'file1',
100
+ parentId: 'root',
101
+ },
102
+ {
103
+ _id: '2',
104
+ name: 'File2.doc',
105
+ actualPath: '/documents/File2.doc',
106
+ searchKey: 'file2',
107
+ parentId: 'root',
108
+ },
109
+ {
110
+ _id: '3',
111
+ name: 'Image1.png',
112
+ actualPath: '/images/Image1.png',
113
+ searchKey: 'image1',
114
+ parentId: 'folder1',
115
+ },
116
+ {
117
+ _id: '4',
118
+ name: 'Presentation.ppt',
119
+ actualPath: '/presentations/Presentation.ppt',
120
+ searchKey: 'presentation',
121
+ parentId: 'folder2',
122
+ },
123
+ {
124
+ _id: '5',
125
+ name: 'Spreadsheet.xlsx',
126
+ actualPath: '/spreadsheets/Spreadsheet.xlsx',
127
+ searchKey: 'spreadsheet',
128
+ parentId: 'folder3',
129
+ },
130
+ {
131
+ _id: '6',
132
+ name: 'Code.js',
133
+ actualPath: '/projects/Code.js',
134
+ searchKey: 'code',
135
+ parentId: 'folder4',
136
+ },
137
+ ];
138
+
139
+ return (
140
+ <>
141
+ <VariableSuggestionInputDropDown
142
+ label="Select Path Using #"
143
+ placeholder="Enter # to search files"
144
+ isHash
145
+ dataFiles={testData}
146
+ dropdownWidth="100%"
147
+ setHashInputValue={setHashInputValue}
148
+ hashInputValue={hashInputValue || {}}
149
+ value={value}
150
+ onChange={(e) => setValue(e.target.value)}
151
+ />
152
+ </>
153
+ );
154
+ },
155
+ };