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
@@ -14,7 +14,7 @@ const Checkbox: React.FC<CheckboxProps> = ({
14
14
  checked: initialChecked = false,
15
15
  partial = false,
16
16
  onChange,
17
- variant
17
+ variant,
18
18
  }) => {
19
19
  const [checked, setChecked] = useState(initialChecked);
20
20
 
@@ -35,7 +35,7 @@ const Checkbox: React.FC<CheckboxProps> = ({
35
35
  />
36
36
  <span
37
37
  className={classNames('ff-checkbox-custom', {
38
- 'ff-checkbox-checked': checked ,
38
+ 'ff-checkbox-checked': checked,
39
39
  'ff-storybook-checkbox--partial': partial && !checked,
40
40
  [`ff-checkbox--${variant}`]: variant,
41
41
  [`ff-checkbox-checked--${variant}`]: checked && variant,
@@ -44,9 +44,8 @@ const Checkbox: React.FC<CheckboxProps> = ({
44
44
  {checked && (
45
45
  <Icon
46
46
  name="tick"
47
- height={6}
48
- width={8}
49
47
  color="var(--primary-icon-color)"
48
+ className="ff-tick-icon"
50
49
  />
51
50
  )}
52
51
  </span>
@@ -22,19 +22,21 @@
22
22
  padding: 1px 6px;
23
23
  line-height: 15px;
24
24
  border: none;
25
- transition: transform 0.5s ease, box-shadow 0.5s ease, padding 1s ease;
26
- box-shadow: 1px 1px 6px 0px var(--ff-chips-blur-color) inset,
25
+ transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out,
26
+ padding 0.4s ease-in-out;
27
+ box-shadow: 1px 1px 3px 0px var(--ff-chips-blur-color) inset,
27
28
  -1px -1px 2px 0px var(--ff-chip-bg) inset,
28
29
  1px -1px 2px 0px var(--ff-chips-blur-color) inset,
30
+ -1px -1px 2px 0px var(--ff-chips-blur-color),
29
31
  1px 1px 2px 0px var(--ff-chip-bg);
30
32
  &--fullText:hover {
31
- box-shadow: 1px 1px 6px 0px var(--ff-chips-blur-color) inset,
33
+ box-shadow: 1px 1px 3px 0px var(--ff-chips-blur-color) inset,
32
34
  -1px -1px 2px 0px var(--ff-chip-bg) inset,
33
35
  1px -1px 2px 0px var(--ff-chips-blur-color) inset,
36
+ -1px -1px 2px 0px var(--ff-chips-blur-color),
34
37
  1px 1px 2px 0px var(--ff-chip-bg);
35
- padding-right: 12px;
38
+ padding-right: 7px;
36
39
  }
37
- @extend .fontXs;
38
40
 
39
41
  &--primary {
40
42
  @include chip-variant-background(var(--ff-chips-fill-color));
@@ -68,18 +70,26 @@
68
70
  }
69
71
  &--public {
70
72
  @include chip-variant-background(var(--public-chip-bg-color));
73
+ color: var(--license_header_text_color);
71
74
  }
72
75
 
73
76
  &--partial-public {
74
77
  @include chip-variant-background(var(--partial-public-chip-bg-color));
78
+ color: var(--license_header_text_color);
75
79
  }
76
80
 
77
81
  &--private {
78
82
  @include chip-variant-background(var(--private-chip-bg-color));
83
+ color: var(--license_header_text_color);
79
84
  }
80
85
 
81
86
  &--disabled {
82
87
  @include chip-variant-background(var(--disabled-chip-bg-color));
88
+ color: var(--table-column-text-color);
89
+ }
90
+ &--count {
91
+ @include chip-variant-background(var(--impact-list-chip-bg-color));
92
+ color: var(--ff-chip-text-color);
83
93
  }
84
94
  }
85
95
  }
@@ -1,8 +1,10 @@
1
+ import React from 'react';
1
2
  import type { Meta, StoryObj } from '@storybook/react';
2
3
  import Chip from './Chip';
3
4
  import '../../assets/styles/_colors.scss';
4
5
  import './Chip.scss';
5
6
  import Typography from '../Typography';
7
+
6
8
  const meta: Meta<typeof Chip> = {
7
9
  title: 'Components/Chip',
8
10
  component: Chip,
@@ -111,7 +113,14 @@ export const Disabled: Story = {
111
113
  ...defaultArgs,
112
114
  variant: 'disabled',
113
115
  fullText: 'Sub Modules 0',
114
- },
116
+ },
117
+ };
118
+ export const Count: Story = {
119
+ args: {
120
+ ...defaultArgs,
121
+ variant: 'count',
122
+ fullText: 'Sub Modules 0',
123
+ },
115
124
  };
116
125
 
117
126
  export default meta;
@@ -26,7 +26,11 @@ const Chip = ({
26
26
  { ['ff-default-chip-style--fullText']: !!fullText }
27
27
  )}
28
28
  >
29
- {labelText && <Typography as="p">{labelText}</Typography>}
29
+ {labelText && (
30
+ <Typography as="p" fontSize={10} fontWeight="semi-bold">
31
+ {labelText}
32
+ </Typography>
33
+ )}
30
34
  </button>
31
35
  </div>
32
36
  );
@@ -10,7 +10,7 @@ export interface ChipsProps {
10
10
  /**
11
11
  * The variant of the Chip.
12
12
  */
13
- variant?: 'primary' | 'success' | 'error' | 'warning' | 'custom' | 'public' | 'partial-public' | 'private' | 'disabled';
13
+ variant?: 'primary' | 'success' | 'error' | 'warning' | 'custom' | 'public' | 'partial-public' | 'private' | 'disabled' | 'count';
14
14
 
15
15
  /**
16
16
  * The callback function to be executed when the Chip is clicked.
@@ -12,3 +12,7 @@
12
12
  gap: 8px;
13
13
  }
14
14
  }
15
+ .ff-variable-dropdown {
16
+ padding: 4px;
17
+ width: auto;
18
+ }
@@ -1,13 +1,13 @@
1
1
  import React, { useState } from 'react';
2
- import { Meta, StoryFn } from '@storybook/react';
3
- import AddVariables from './AddVariables';
4
- import { AddVariableProps, dynamicObject } from './types';
2
+ import { Meta, StoryFn, StoryObj } from '@storybook/react';
3
+ import ConditionalDropdown from './ConditionalDropdown';
4
+ import { ConditionalDropdownProps, dynamicObject } from './types';
5
5
  import { variableList } from '../Editor/constants';
6
6
  import CreateVariableSlider from '../CreateVariable/CreateVariableSlider';
7
7
 
8
8
  export default {
9
- title: 'Components/AddVariables',
10
- component: AddVariables,
9
+ title: 'Components/ConditionalDropdown',
10
+ component: ConditionalDropdown,
11
11
  args: {
12
12
  label: 'Add Variables',
13
13
  placeholder: 'Enter text',
@@ -18,10 +18,11 @@ export default {
18
18
  parameters: {
19
19
  layout: 'centered',
20
20
  },
21
- } as Meta<AddVariableProps>;
21
+ } as Meta<ConditionalDropdownProps>;
22
22
 
23
- // Wrapper component to handle state inside Storybook stories
24
- const Template: StoryFn<AddVariableProps> = (args) => {
23
+ type Story = StoryObj<typeof ConditionalDropdown>;
24
+
25
+ const Template: StoryFn<ConditionalDropdownProps> = (args) => {
25
26
  const [inputValue, setInputValue] = useState<string>('');
26
27
  const [openCreateVariable, setOpenCreateVariable] = useState<boolean>(false);
27
28
  const [variableName, setVariableName] = useState<string>('');
@@ -34,7 +35,7 @@ const Template: StoryFn<AddVariableProps> = (args) => {
34
35
 
35
36
  return (
36
37
  <>
37
- <AddVariables
38
+ <ConditionalDropdown
38
39
  {...args}
39
40
  onChange={(value: string) => setInputValue(value)}
40
41
  value={inputValue}
@@ -74,9 +75,73 @@ Default.args = {
74
75
  onCreateVariableClick: () => alert('Create Variable clicked'),
75
76
  };
76
77
 
77
- // Customized story with pre-filled input value
78
78
  export const WithInitialValue = Template.bind({});
79
79
  WithInitialValue.args = {
80
80
  inputValue: 'Initial Text with $',
81
81
  onCreateVariableClick: () => alert('Create Variable clicked'),
82
82
  };
83
+
84
+ export const DropdownOnHash: Story = {
85
+ render: () => {
86
+ const [hashInputValue, setHashInputValue] = useState<
87
+ dynamicObject | undefined
88
+ >();
89
+ const testData = [
90
+ {
91
+ _id: '1',
92
+ name: 'File1.txt',
93
+ actualPath: '/documents/File1.txt',
94
+ searchKey: 'file1',
95
+ parentId: 'root',
96
+ },
97
+ {
98
+ _id: '2',
99
+ name: 'File2.doc',
100
+ actualPath: '/documents/File2.doc',
101
+ searchKey: 'file2',
102
+ parentId: 'root',
103
+ },
104
+ {
105
+ _id: '3',
106
+ name: 'Image1.png',
107
+ actualPath: '/images/Image1.png',
108
+ searchKey: 'image1',
109
+ parentId: 'folder1',
110
+ },
111
+ {
112
+ _id: '4',
113
+ name: 'Presentation.ppt',
114
+ actualPath: '/presentations/Presentation.ppt',
115
+ searchKey: 'presentation',
116
+ parentId: 'folder2',
117
+ },
118
+ {
119
+ _id: '5',
120
+ name: 'Spreadsheet.xlsx',
121
+ actualPath: '/spreadsheets/Spreadsheet.xlsx',
122
+ searchKey: 'spreadsheet',
123
+ parentId: 'folder3',
124
+ },
125
+ {
126
+ _id: '6',
127
+ name: 'Code.js',
128
+ actualPath: '/projects/Code.js',
129
+ searchKey: 'code',
130
+ parentId: 'folder4',
131
+ },
132
+ ];
133
+
134
+ return (
135
+ <>
136
+ <ConditionalDropdown
137
+ label="Select Path Using #"
138
+ placeholder="Enter # to search files"
139
+ isHash
140
+ dataFiles={testData}
141
+ dropdownWidth="auto"
142
+ setHashInputValue={setHashInputValue}
143
+ />
144
+ </>
145
+ );
146
+ },
147
+ };
@@ -2,25 +2,31 @@ import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
2
2
  import VariableDropdown from '../Editor/VariableDropdown';
3
3
  import Icon from '../Icon';
4
4
  import Input from '../Input';
5
- import { AddVariableProps, dynamicObject } from './types';
6
- import './AddVariables.scss';
5
+ import { ConditionalDropdownProps, dynamicObject } from './types';
6
+ import './ConditionalDropdown.scss';
7
7
  import React, { useState, useRef, useEffect } from 'react';
8
+ import OptionsDropdown from './OptionsDropdown';
8
9
 
9
- const AddVariables: React.FC<AddVariableProps> = ({
10
+ const ConditionalDropdown: React.FC<ConditionalDropdownProps> = ({
10
11
  label = '',
12
+ hashInputValue = '',
13
+ setHashInputValue,
11
14
  variableList = [],
12
15
  placeholder = 'Enter text',
13
16
  onChange,
14
17
  onCreateVariableClick,
15
18
  value = '',
16
19
  dropdownWidth = 'inherit',
20
+ isHash = false,
21
+ dataFiles = [],
17
22
  ...props
18
23
  }) => {
19
- const [inputValue, setInputValue] = useState<string>('');
24
+ const [inputValue, setInputValue] = useState<string>(value);
20
25
  const [showDropdown, setShowDropdown] = useState<boolean>(false);
21
26
  const [cursorPosition, setCursorPosition] = useState<number | null>(null);
22
27
  const [showCreateVariableIcon, setShowCreateVariableIcon] =
23
28
  useState<boolean>(false);
29
+ const [filteredOptions, setFilteredOptions] = useState<dynamicObject[]>([]);
24
30
  const inputRef = useRef<HTMLInputElement>(null);
25
31
 
26
32
  useEffect(() => {
@@ -31,37 +37,48 @@ const AddVariables: React.FC<AddVariableProps> = ({
31
37
  }, [cursorPosition]);
32
38
 
33
39
  useEffect(() => {
34
- const newPayload = replaceVariablesWithIds(inputValue);
35
- onChange(newPayload);
40
+ if (inputValue.startsWith('#') && isHash) {
41
+ const searchQuery = inputValue.slice(1).toLowerCase();
42
+ const filtered = dataFiles.filter((file) =>
43
+ file.name.toLowerCase().includes(searchQuery)
44
+ );
45
+
46
+ setFilteredOptions(filtered);
47
+ setShowDropdown(filtered.length > 0);
48
+ } else if (!isHash) {
49
+ const newPayload = replaceVariablesWithIds(inputValue);
50
+ onChange?.(newPayload);
51
+ }
36
52
  }, [inputValue]);
37
53
 
38
54
  const replaceVariablesWithIds = (input: string): string => {
39
55
  return input.replace(/\${.*?_(.*?)}/g, (_, variableName) => {
40
- // Find the matching variable in the list by name
41
56
  const foundVariable = variableList.find(
42
57
  (varaible) => varaible.name === variableName.trim()
43
58
  );
44
- return foundVariable ? `\${${foundVariable.id}}` : `\${${variableName}}`; // Replace if found, otherwise keep as is
59
+ return foundVariable ? `\${${foundVariable.id}}` : `\${${variableName}}`;
45
60
  });
46
61
  };
47
62
 
48
63
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
49
64
  const fieldValue = event.target.value;
50
65
  setInputValue(fieldValue);
51
-
52
- // Show dropdown only if the last character typed is `$`
53
66
  const cursorPos = inputRef.current?.selectionStart || 0;
54
67
  const isDollarTyped = fieldValue[cursorPos - 1] === '$';
55
68
 
56
- if (isDollarTyped) {
57
- setShowDropdown(true);
69
+ if (isHash) {
70
+ setShowDropdown(fieldValue.startsWith('#'));
58
71
  } else {
59
- setShowDropdown(false); // Close if it's a space or other characters
60
- }
61
- if (fieldValue?.includes('$')) {
62
- setShowCreateVariableIcon(false);
63
- } else {
64
- setShowCreateVariableIcon(true);
72
+ if (isDollarTyped) {
73
+ setShowDropdown(true);
74
+ } else {
75
+ setShowDropdown(false);
76
+ }
77
+ if (fieldValue?.includes('$')) {
78
+ setShowCreateVariableIcon(false);
79
+ } else {
80
+ setShowCreateVariableIcon(true);
81
+ }
65
82
  }
66
83
  };
67
84
 
@@ -78,14 +95,18 @@ const AddVariables: React.FC<AddVariableProps> = ({
78
95
  : 'PEV'
79
96
  }_${item.name}}`;
80
97
 
81
- const newValue =
82
- inputValue.slice(0, selectionStart || 0) +
83
- dollarSyntax +
84
- inputValue.slice(selectionEnd || 0);
98
+ let newValue;
99
+ if (isHash && inputValue[0] === '#') {
100
+ newValue = item.name + inputValue.slice(selectionEnd || 1);
101
+ } else {
102
+ newValue =
103
+ inputValue.slice(0, selectionStart || 0) +
104
+ dollarSyntax +
105
+ inputValue.slice(selectionEnd || 0);
106
+ }
107
+ setHashInputValue?.(item);
85
108
  setInputValue(newValue);
86
109
  setCursorPosition((selectionStart || 0) + dollarSyntax.length);
87
-
88
- // Close the dropdown after inserting the variable
89
110
  setShowDropdown(false);
90
111
  }
91
112
  };
@@ -104,7 +125,7 @@ const AddVariables: React.FC<AddVariableProps> = ({
104
125
  label={label}
105
126
  placeholder={placeholder}
106
127
  />
107
- {!checkEmpty(value) && showCreateVariableIcon && (
128
+ {!checkEmpty(value) && !isHash && showCreateVariableIcon && (
108
129
  <Icon
109
130
  onClick={onCreateVariableClick}
110
131
  name="add_variable"
@@ -115,15 +136,24 @@ const AddVariables: React.FC<AddVariableProps> = ({
115
136
  )}
116
137
  </div>
117
138
  {showDropdown && (
118
- <VariableDropdown
119
- position="relative"
120
- width={dropdownWidth}
121
- optionsList={variableList}
122
- onSelectVariable={handleDropdownClick}
123
- />
124
- )}
139
+ isHash ? (
140
+ <OptionsDropdown
141
+ position="relative"
142
+ width={dropdownWidth}
143
+ filteredOptions={filteredOptions}
144
+ onSelectVariable={handleDropdownClick}
145
+ />
146
+ ) : (
147
+ <VariableDropdown
148
+ position="relative"
149
+ width={dropdownWidth}
150
+ optionsList={variableList}
151
+ onSelectVariable={handleDropdownClick}
152
+ />
153
+ )
154
+ )}
125
155
  </div>
126
156
  );
127
157
  };
128
158
 
129
- export default AddVariables;
159
+ export default ConditionalDropdown;
@@ -0,0 +1,44 @@
1
+ import type { FC, ReactNode } from 'react';
2
+ import { dynamicObject, OptionsDropdownProps } from './types';
3
+ import './ConditionalDropdown.scss';
4
+ import Typography from '../Typography';
5
+ import classNames from 'classnames';
6
+
7
+ const OptionsDropdown:FC<OptionsDropdownProps> = ({
8
+ onSelectVariable,
9
+ dropdownPosition,
10
+ filteredOptions= [],
11
+ position = 'relative',
12
+ width = '300px',
13
+ }): ReactNode => {
14
+ return (
15
+ <div
16
+ className={classNames('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
+ {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
+ );
42
+ };
43
+
44
+ export default OptionsDropdown;
@@ -0,0 +1 @@
1
+ export { default } from './ConditionalDropdown';
@@ -1,12 +1,33 @@
1
+ import { dropdownPositionType } from "../Editor/types";
2
+
1
3
  export type dynamicObject = {
2
4
  [key: string]: any;
3
5
  };
4
6
 
5
- export interface AddVariableProps {
7
+ export type TestDataObject = {
8
+ _id: string;
9
+ name: string;
10
+ actualPath: string;
11
+ searchKey: string;
12
+ parentId: string;
13
+ }
14
+
15
+ export interface ConditionalDropdownProps {
6
16
  /**
7
17
  * Label for the field
8
18
  */
9
19
  label?: string;
20
+
21
+ /**
22
+ * Value in the input should stored in this state
23
+ */
24
+ hashInputValue?: TestDataObject | dynamicObject;
25
+
26
+ /**
27
+ * Function storing and updating the inputValue state
28
+ */
29
+ setHashInputValue?:(value: dynamicObject | undefined) => void;
30
+
10
31
  /**
11
32
  * List of variables
12
33
  */
@@ -20,7 +41,7 @@ export interface AddVariableProps {
20
41
  * @param value
21
42
  * @returns
22
43
  */
23
- onChange: (value: string) => void;
44
+ onChange?: (value: string) => void;
24
45
  /**
25
46
  * Function to handle create variable icon click
26
47
  */
@@ -32,11 +53,11 @@ export interface AddVariableProps {
32
53
  /**
33
54
  * Name | name of the input field
34
55
  */
35
- name: string;
56
+ name?: string;
36
57
  /**
37
58
  * value | input field value
38
59
  */
39
- value: string;
60
+ value?: string;
40
61
  /**
41
62
  * variants to set color/style of the input field
42
63
  */
@@ -44,7 +65,7 @@ export interface AddVariableProps {
44
65
  /**
45
66
  * type to set color/style of the input field
46
67
  */
47
- type: 'text' | 'password' | 'number' | 'email' | 'url' | 'time';
68
+ type?: 'text' | 'password' | 'number' | 'email' | 'url' | 'time';
48
69
  /**
49
70
  * error | If true, error message will be displayed
50
71
  */
@@ -100,4 +121,40 @@ export interface AddVariableProps {
100
121
  * isLabelRequired for the input field without label,showing placeholder
101
122
  */
102
123
  isLabelRequired?: boolean;
124
+
125
+ /**
126
+ * If true, dropdown opens when '#' is entered at the first position.
127
+ */
128
+ isHash?: boolean;
129
+ /**
130
+ * Options for the dropdown when `isHash` is true.
131
+ */
132
+ dataFiles?: dynamicObject[];
103
133
  }
134
+
135
+ export interface OptionsDropdownProps {
136
+ /**
137
+ * Position whether absoloute or relative
138
+ */
139
+ position: 'absolute' | 'relative';
140
+
141
+ /**
142
+ * Dropdown width
143
+ */
144
+ width: string;
145
+
146
+ /**
147
+ * chars entered to search in Input :
148
+ */
149
+ filteredOptions?: dynamicObject[];
150
+
151
+ /**
152
+ * Function to handle click on variable
153
+ */
154
+ onSelectVariable: (variable: object) => void;
155
+
156
+ /**
157
+ * Dropdown postion used for dropdown placement
158
+ */
159
+ dropdownPosition?: dropdownPositionType;
160
+ }