pixel-react 1.8.0 → 1.8.2

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 (188) hide show
  1. package/.yarn/install-state.gz +0 -0
  2. package/lib/components/Accordion/Accordion.d.ts +1 -1
  3. package/lib/components/Accordion/types.d.ts +4 -0
  4. package/lib/components/ConditionalDropdown/ConditionalDropdown.d.ts +1 -2
  5. package/lib/components/ConditionalDropdown/types.d.ts +3 -3
  6. package/lib/components/LabelEditTextField/types.d.ts +1 -1
  7. package/lib/components/ScriptSwitchButton/ScriptSwitchButton.d.ts +9 -0
  8. package/lib/components/ScriptSwitchButton/index.d.ts +1 -0
  9. package/lib/components/TableTree/Components/TableCell.d.ts +1 -1
  10. package/lib/components/TableTree/Components/TableRow.d.ts +1 -1
  11. package/lib/components/TableTree/TableTree copy.d.ts +25 -0
  12. package/lib/components/TableTree/data.d.ts +48 -8
  13. package/lib/components/TableTree/types.d.ts +2 -2
  14. package/lib/index.d.ts +64 -7
  15. package/lib/index.esm.js +536 -324
  16. package/lib/index.esm.js.map +1 -1
  17. package/lib/index.js +581 -323
  18. package/lib/index.js.map +1 -1
  19. package/lib/tsconfig.tsbuildinfo +1 -1
  20. package/lib/validations/regex.d.ts +46 -0
  21. package/package.json +2 -2
  22. package/src/StyleGuide/ColorPalette/colorPaletteList.ts +5 -0
  23. package/src/assets/Themes/BaseTheme.scss +1 -1
  24. package/src/assets/Themes/BlueTheme.scss +1 -1
  25. package/src/assets/Themes/DarkTheme.scss +1 -1
  26. package/src/assets/icons/approval_pending.svg +8 -8
  27. package/src/assets/icons/configuration.svg +3 -3
  28. package/src/assets/icons/defects.svg +8 -8
  29. package/src/assets/icons/element.svg +4 -4
  30. package/src/assets/icons/project_element.svg +4 -4
  31. package/src/assets/icons/step_group.svg +10 -10
  32. package/src/assets/icons/variable.svg +3 -3
  33. package/src/assets/icons/web_service_icon.svg +3 -3
  34. package/src/components/Accordion/Accordion.stories.tsx +13 -0
  35. package/src/components/Accordion/Accordion.tsx +2 -1
  36. package/src/components/Accordion/types.ts +4 -0
  37. package/src/components/ConditionalDropdown/ConditionalDropdown.stories.tsx +8 -5
  38. package/src/components/ConditionalDropdown/ConditionalDropdown.tsx +133 -135
  39. package/src/components/ConditionalDropdown/types.ts +8 -8
  40. package/src/components/DatePicker/DatePicker.scss +310 -0
  41. package/src/components/LabelEditTextField/LabelEditTextField.scss +4 -0
  42. package/src/components/LabelEditTextField/LabelEditTextField.tsx +14 -7
  43. package/src/components/LabelEditTextField/types.ts +1 -1
  44. package/src/components/ScriptSwitchButton/ScriptSwitchButton.scss +33 -0
  45. package/src/components/ScriptSwitchButton/ScriptSwitchButton.stories.tsx +48 -0
  46. package/src/components/ScriptSwitchButton/ScriptSwitchButton.tsx +65 -0
  47. package/src/components/ScriptSwitchButton/index.ts +1 -0
  48. package/src/components/TableTree/Components/TableBody.tsx +3 -3
  49. package/src/components/TableTree/Components/TableCell.tsx +7 -7
  50. package/src/components/TableTree/Components/TableRow.tsx +2 -2
  51. package/src/components/TableTree/TableTree.scss +2 -3
  52. package/src/components/TableTree/data.ts +43 -12
  53. package/src/components/TableTree/types.ts +2 -2
  54. package/src/index.ts +95 -1
  55. package/src/validations/regex.stories.tsx +362 -0
  56. package/src/validations/regex.ts +194 -0
  57. package/lib/1fb4472b34e4fe07.css +0 -1
  58. package/lib/StyleGuide/ColorPalette/ColorPalette.stories.d.ts +0 -6
  59. package/lib/StyleGuide/Typography/Typography.stories.d.ts +0 -6
  60. package/lib/components/Accordion/Accordion.stories.d.ts +0 -6
  61. package/lib/components/AddButton/AddButton.d.ts +0 -5
  62. package/lib/components/AddButton/AddButton.stories.d.ts +0 -6
  63. package/lib/components/AddButton/index.d.ts +0 -1
  64. package/lib/components/AddButton/types.d.ts +0 -4
  65. package/lib/components/AddResourceButton/AddButton.stories.d.ts +0 -8
  66. package/lib/components/AddVariables/AddVariables.d.ts +0 -5
  67. package/lib/components/AddVariables/index.d.ts +0 -1
  68. package/lib/components/AddVariables/types.d.ts +0 -35
  69. package/lib/components/AllProjectsDropdown/AllProjectsDropdown.stories.d.ts +0 -7
  70. package/lib/components/AppHeader/AppHeader.stories.d.ts +0 -7
  71. package/lib/components/AttachImage/AttachImage.stories.d.ts +0 -7
  72. package/lib/components/AttachmentButton/AttachmentButton.stories.d.ts +0 -9
  73. package/lib/components/Avatar/Avatar.stories.d.ts +0 -10
  74. package/lib/components/Button/Button.stories.d.ts +0 -13
  75. package/lib/components/Charts/BarChart/BarChart.stories.d.ts +0 -6
  76. package/lib/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.d.ts +0 -7
  77. package/lib/components/Charts/DonutChart/DonutChart.stories.d.ts +0 -6
  78. package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts +0 -8
  79. package/lib/components/Charts/LineChart/LineChart.stories.d.ts +0 -7
  80. package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +0 -8
  81. package/lib/components/Charts/PieChart/PieChart.stories.d.ts +0 -7
  82. package/lib/components/Charts/RadialChart/RadialChart.stories.d.ts +0 -6
  83. package/lib/components/Checkbox/Checkbox.stories.d.ts +0 -8
  84. package/lib/components/Chip/Chip.stories.d.ts +0 -14
  85. package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts +0 -6
  86. package/lib/components/DatePicker/DatePicker.stories.d.ts +0 -9
  87. package/lib/components/DragAndDrop/DragAndDrop.stories.d.ts +0 -6
  88. package/lib/components/Drawer/Drawer.stories.d.ts +0 -12
  89. package/lib/components/EditTextField/EditTextField.stories.d.ts +0 -10
  90. package/lib/components/Editor/Editor.stories.d.ts +0 -6
  91. package/lib/components/Excel/ExcelFile.stories.d.ts +0 -6
  92. package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +0 -14
  93. package/lib/components/ExcelFile/ColorBarSelector/ColorBarSelector.d.ts +0 -8
  94. package/lib/components/ExcelFile/ContextMenu/ContextMenu.d.ts +0 -4
  95. package/lib/components/ExcelFile/ExcelFile/Excel/ActiveCell.d.ts +0 -7
  96. package/lib/components/ExcelFile/ExcelFile/Excel/Cell.d.ts +0 -4
  97. package/lib/components/ExcelFile/ExcelFile/Excel/ColumnIndicator.d.ts +0 -5
  98. package/lib/components/ExcelFile/ExcelFile/Excel/Copied.d.ts +0 -3
  99. package/lib/components/ExcelFile/ExcelFile/Excel/CornerIndicator.d.ts +0 -5
  100. package/lib/components/ExcelFile/ExcelFile/Excel/DataEditor.d.ts +0 -5
  101. package/lib/components/ExcelFile/ExcelFile/Excel/DataViewer.d.ts +0 -8
  102. package/lib/components/ExcelFile/ExcelFile/Excel/FloatingRect.d.ts +0 -10
  103. package/lib/components/ExcelFile/ExcelFile/Excel/HeaderRow.d.ts +0 -3
  104. package/lib/components/ExcelFile/ExcelFile/Excel/Row.d.ts +0 -3
  105. package/lib/components/ExcelFile/ExcelFile/Excel/RowIndicator.d.ts +0 -5
  106. package/lib/components/ExcelFile/ExcelFile/Excel/Selected.d.ts +0 -3
  107. package/lib/components/ExcelFile/ExcelFile/Excel/Spreadsheet.d.ts +0 -80
  108. package/lib/components/ExcelFile/ExcelFile/Excel/Table.d.ts +0 -3
  109. package/lib/components/ExcelFile/ExcelFile/Excel/actions.d.ts +0 -174
  110. package/lib/components/ExcelFile/ExcelFile/Excel/areModelsEqual.d.ts +0 -1
  111. package/lib/components/ExcelFile/ExcelFile/Excel/context.d.ts +0 -8
  112. package/lib/components/ExcelFile/ExcelFile/Excel/engine/engine.d.ts +0 -22
  113. package/lib/components/ExcelFile/ExcelFile/Excel/engine/formula.d.ts +0 -17
  114. package/lib/components/ExcelFile/ExcelFile/Excel/engine/index.d.ts +0 -2
  115. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-graph.d.ts +0 -21
  116. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-hash.d.ts +0 -3
  117. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-set.d.ts +0 -24
  118. package/lib/components/ExcelFile/ExcelFile/Excel/index.d.ts +0 -13
  119. package/lib/components/ExcelFile/ExcelFile/Excel/matrix.d.ts +0 -67
  120. package/lib/components/ExcelFile/ExcelFile/Excel/point-range.d.ts +0 -22
  121. package/lib/components/ExcelFile/ExcelFile/Excel/point.d.ts +0 -11
  122. package/lib/components/ExcelFile/ExcelFile/Excel/reducer.d.ts +0 -27
  123. package/lib/components/ExcelFile/ExcelFile/Excel/selection.d.ts +0 -95
  124. package/lib/components/ExcelFile/ExcelFile/Excel/types.d.ts +0 -178
  125. package/lib/components/ExcelFile/ExcelFile/Excel/use-dispatch.d.ts +0 -3
  126. package/lib/components/ExcelFile/ExcelFile/Excel/use-selector.d.ts +0 -3
  127. package/lib/components/ExcelFile/ExcelFile/Excel/util.d.ts +0 -44
  128. package/lib/components/ExcelFile/ExcelFile/ExcelFile.d.ts +0 -19
  129. package/lib/components/ExcelFile/ExcelFile.stories.d.ts +0 -6
  130. package/lib/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.d.ts +0 -12
  131. package/lib/components/ExcelFile/ExcelToolBar/ExcelToolBar.d.ts +0 -15
  132. package/lib/components/ExcelFile/ImportExcelStyles.d.ts +0 -24
  133. package/lib/components/ExcelFile/Types.d.ts +0 -129
  134. package/lib/components/ExcelFile/index.d.ts +0 -1
  135. package/lib/components/ExpandableMenu/ExpandableMenu.stories.d.ts +0 -7
  136. package/lib/components/FF_Captcha/captcha.stories.d.ts +0 -8
  137. package/lib/components/FileDropzone/FileDropzone.stories.d.ts +0 -8
  138. package/lib/components/Form/Form.stories.d.ts +0 -7
  139. package/lib/components/GridLayout/GridLayout.stories.d.ts +0 -8
  140. package/lib/components/HighlightText/HighlightText.stories.d.ts +0 -6
  141. package/lib/components/Icon/Icon.stories.d.ts +0 -8
  142. package/lib/components/IconButton/IconButton.stories.d.ts +0 -7
  143. package/lib/components/IconRadioGroup/IconRadioGroup.stories.d.ts +0 -7
  144. package/lib/components/Input/Input.stories.d.ts +0 -9
  145. package/lib/components/InputWithDropdown/InputWithDropdown.stories.d.ts +0 -9
  146. package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +0 -13
  147. package/lib/components/LazyLoad/LazyLoad.stories.d.ts +0 -6
  148. package/lib/components/MachineInputField/MachineInputField.stories.d.ts +0 -6
  149. package/lib/components/MenuOption/MenuOption.stories.d.ts +0 -16
  150. package/lib/components/MiniModal/MiniModal.stories.d.ts +0 -10
  151. package/lib/components/Modal/Modal.stories.d.ts +0 -7
  152. package/lib/components/ModulesChip/ModuleChip.stories.d.ts +0 -6
  153. package/lib/components/MultiSelect/MultiSelect.stories.d.ts +0 -11
  154. package/lib/components/NLPInput/NlpInput.stories.d.ts +0 -7
  155. package/lib/components/Paper/Paper.stories.d.ts +0 -11
  156. package/lib/components/RadioButton/RadioButton.stories.d.ts +0 -10
  157. package/lib/components/RadioGroup/RadioGroup.stories.d.ts +0 -9
  158. package/lib/components/Search/Search.stories.d.ts +0 -6
  159. package/lib/components/Select/Select.stories.d.ts +0 -14
  160. package/lib/components/Select/components/Dropdown/Dropdown.d.ts +0 -4
  161. package/lib/components/Select/components/Dropdown/dropdownTypes.d.ts +0 -17
  162. package/lib/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.d.ts +0 -6
  163. package/lib/components/StateDropdown/StateDropdown.stories.d.ts +0 -10
  164. package/lib/components/StatusButton/StatusButton.stories.d.ts +0 -14
  165. package/lib/components/StatusCard/StatusCard.stories.d.ts +0 -11
  166. package/lib/components/Table/Table.stories.d.ts +0 -13
  167. package/lib/components/TableTree/TableTree.stories.d.ts +0 -7
  168. package/lib/components/Tabs/Tabs.stories.d.ts +0 -9
  169. package/lib/components/TextArea/Textarea.stories.d.ts +0 -9
  170. package/lib/components/Toast/Toast.stories.d.ts +0 -6
  171. package/lib/components/Toastify/Toastify.stories.d.ts +0 -6
  172. package/lib/components/Toggle/Toggle.stories.d.ts +0 -12
  173. package/lib/components/Tooltip/Tooltip.stories.d.ts +0 -15
  174. package/lib/components/Typography/Typography.stories.d.ts +0 -10
  175. package/lib/components/VariableInput/VariableInput.stories.d.ts +0 -6
  176. package/lib/utils/checkEmpty/checkEmpty.stories.d.ts +0 -6
  177. package/lib/utils/compareArrays/compareArrays.stories.d.ts +0 -6
  178. package/lib/utils/compareObjects/compareObjects.stories.d.ts +0 -6
  179. package/lib/utils/debounce/debounce.stories.d.ts +0 -6
  180. package/lib/utils/ffID/ffID.stories.d.ts +0 -6
  181. package/lib/utils/find/findAndInsert.d.ts +0 -7
  182. package/lib/utils/find/findAndInsert.stories.d.ts +0 -7
  183. package/lib/utils/findAndInsert/findAndInsert.stories.d.ts +0 -7
  184. package/lib/utils/getEncryptedData/getEncryptedData.stories.d.ts +0 -6
  185. package/lib/utils/getExtension/getExtension.stories.d.ts +0 -6
  186. package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +0 -10
  187. package/lib/utils/throttle/throttle.stories.d.ts +0 -6
  188. package/lib/utils/truncateText/truncateText.stories.d.ts +0 -6
@@ -1,158 +1,156 @@
1
+ import {
2
+ useState,
3
+ useEffect,
4
+ forwardRef,
5
+ useImperativeHandle,
6
+ useRef,
7
+ } from 'react';
1
8
  import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
2
9
  import VariableDropdown from '../Editor/VariableDropdown';
3
10
  import Icon from '../Icon';
4
11
  import Input from '../Input';
5
12
  import { ConditionalDropdownProps, dynamicObject } from './types';
6
13
  import './ConditionalDropdown.scss';
7
- import React, { useState, useRef, useEffect } from 'react';
8
14
  import OptionsDropdown from './OptionsDropdown';
9
15
 
10
- const ConditionalDropdown: React.FC<ConditionalDropdownProps> = ({
11
- label = '',
12
- hashInputValue = '',
13
- setHashInputValue,
14
- variableList = [],
15
- placeholder = 'Enter text',
16
- onChange,
17
- onCreateVariableClick,
18
- value = '',
19
- dropdownWidth = 'inherit',
20
- isHash = false,
21
- dataFiles = [],
22
- ...props
23
- }) => {
24
- const [inputValue, setInputValue] = useState<string>(value);
25
- const [showDropdown, setShowDropdown] = useState<boolean>(false);
26
- const [cursorPosition, setCursorPosition] = useState<number | null>(null);
27
- const [showCreateVariableIcon, setShowCreateVariableIcon] =
28
- useState<boolean>(false);
29
- const [filteredOptions, setFilteredOptions] = useState<dynamicObject[]>([]);
30
- const inputRef = useRef<HTMLInputElement>(null);
16
+ const ConditionalDropdown = forwardRef<
17
+ HTMLInputElement,
18
+ ConditionalDropdownProps
19
+ >(
20
+ (
21
+ {
22
+ label = '',
23
+ hashInputValue = '',
24
+ setHashInputValue,
25
+ variableList = [],
26
+ placeholder = 'Enter text',
27
+ onChange,
28
+ onCreateVariableClick,
29
+ value = '',
30
+ dropdownWidth = 'inherit',
31
+ isHash = false,
32
+ dataFiles = [],
33
+ ...props
34
+ },
35
+ ref
36
+ ) => {
37
+ const [showDropdown, setShowDropdown] = useState<boolean>(false);
38
+ const [cursorPosition, setCursorPosition] = useState<number | null>(null);
39
+ const [showCreateVariableIcon, setShowCreateVariableIcon] =
40
+ useState<boolean>(false);
41
+ const [filteredOptions, setFilteredOptions] = useState<dynamicObject[]>([]);
42
+ const inputRef = useRef<HTMLInputElement>(null);
31
43
 
32
- useEffect(() => {
33
- if (cursorPosition !== null && inputRef.current) {
34
- inputRef.current.setSelectionRange(cursorPosition, cursorPosition);
35
- inputRef.current.focus();
36
- }
37
- }, [cursorPosition]);
44
+ // Expose the `inputRef` to the parent via `ref`
45
+ useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);
38
46
 
39
- useEffect(() => {
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
- }
52
- }, [inputValue]);
53
-
54
- const replaceVariablesWithIds = (input: string): string => {
55
- return input.replace(/\${.*?_(.*?)}/g, (_, variableName) => {
56
- const foundVariable = variableList.find(
57
- (varaible) => varaible.name === variableName.trim()
58
- );
59
- return foundVariable ? `\${${foundVariable.id}}` : `\${${variableName}}`;
60
- });
61
- };
62
-
63
- const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
64
- const fieldValue = event.target.value;
65
- setInputValue(fieldValue);
66
- const cursorPos = inputRef.current?.selectionStart || 0;
67
- const isDollarTyped = fieldValue[cursorPos - 1] === '$';
47
+ useEffect(() => {
48
+ if (cursorPosition !== null && inputRef.current) {
49
+ inputRef.current.setSelectionRange(cursorPosition, cursorPosition);
50
+ inputRef.current.focus();
51
+ }
52
+ }, [cursorPosition]);
68
53
 
69
- if (isHash) {
70
- setShowDropdown(fieldValue.startsWith('#'));
71
- } else {
72
- if (isDollarTyped) {
73
- setShowDropdown(true);
54
+ useEffect(() => {
55
+ const cursorPos = inputRef.current?.selectionStart || 0;
56
+ const isDollarTyped = value[cursorPos - 1] === '$';
57
+ if (isHash) {
58
+ setShowDropdown(value.startsWith('#'));
74
59
  } else {
75
- setShowDropdown(false);
60
+ setShowDropdown(isDollarTyped);
61
+ setShowCreateVariableIcon(!value?.includes('$'));
76
62
  }
77
- if (fieldValue?.includes('$')) {
78
- setShowCreateVariableIcon(false);
79
- } else {
80
- setShowCreateVariableIcon(true);
63
+ if (value.startsWith('#') && isHash) {
64
+ const searchQuery = value.slice(1).toLowerCase();
65
+ const filtered = dataFiles.filter((file) =>
66
+ file.name.toLowerCase().includes(searchQuery)
67
+ );
68
+ setFilteredOptions(filtered);
69
+ setShowDropdown(filtered.length > 0);
81
70
  }
82
- }
83
- };
71
+ }, [value]);
84
72
 
85
- const handleDropdownClick = (item: dynamicObject) => {
86
- if (inputRef.current) {
87
- const { selectionStart, selectionEnd } = inputRef.current;
88
- const dollarSyntax = `{${
89
- item.type === 'LOCAL'
90
- ? 'LV'
91
- : item.type === 'GLOBAL'
92
- ? 'GV'
93
- : item.type === 'GROUP'
94
- ? 'SG'
95
- : 'PEV'
96
- }_${item.name}}`;
73
+ const handleDropdownClick = (item: dynamicObject) => {
74
+ if (inputRef.current) {
75
+ const { selectionStart, selectionEnd } = inputRef.current;
76
+ const dollarSyntax = `{${
77
+ item.type === 'LOCAL'
78
+ ? 'LV'
79
+ : item.type === 'GLOBAL'
80
+ ? 'GV'
81
+ : item.type === 'GROUP'
82
+ ? 'SG'
83
+ : 'PEV'
84
+ }_${item.name}}`;
97
85
 
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);
86
+ let newValue;
87
+ if (isHash && value[0] === '#') {
88
+ newValue = item.name + value.slice(selectionEnd || 1);
89
+ } else {
90
+ newValue =
91
+ value.slice(0, selectionStart || 0) +
92
+ dollarSyntax +
93
+ value.slice(selectionEnd || 0);
94
+ }
95
+
96
+ if (onChange) {
97
+ const event = {
98
+ target: {
99
+ value: newValue,
100
+ },
101
+ } as React.ChangeEvent<HTMLInputElement>;
102
+ onChange(event);
103
+ }
104
+ inputRef.current.value = newValue;
105
+ setHashInputValue?.(item);
106
+ setCursorPosition((selectionStart || 0) + dollarSyntax.length);
107
+ setShowDropdown(false);
106
108
  }
107
- setHashInputValue?.(item);
108
- setInputValue(newValue);
109
- setCursorPosition((selectionStart || 0) + dollarSyntax.length);
110
- setShowDropdown(false);
111
- }
112
- };
109
+ };
113
110
 
114
- return (
115
- <div className="ff-add-variable-container">
116
- <div className="ff-add-variable-input">
117
- <Input
118
- {...props}
119
- name="add_variable"
120
- ref={inputRef}
121
- type="text"
122
- value={inputValue}
123
- onChange={handleChange}
124
- variant="primary"
125
- label={label}
126
- placeholder={placeholder}
127
- />
128
- {!checkEmpty(value) && !isHash && showCreateVariableIcon && (
129
- <Icon
130
- onClick={onCreateVariableClick}
111
+ return (
112
+ <div className="ff-add-variable-container">
113
+ <div className="ff-add-variable-input">
114
+ <Input
115
+ {...props}
131
116
  name="add_variable"
132
- width={24}
133
- height={24}
134
- hoverEffect
117
+ ref={inputRef}
118
+ type="text"
119
+ value={value}
120
+ onChange={onChange}
121
+ variant="primary"
122
+ label={label}
123
+ placeholder={placeholder}
135
124
  />
136
- )}
125
+ {!checkEmpty(value) && !isHash && showCreateVariableIcon && (
126
+ <Icon
127
+ onClick={onCreateVariableClick}
128
+ name="add_variable"
129
+ width={24}
130
+ height={24}
131
+ hoverEffect
132
+ />
133
+ )}
134
+ </div>
135
+ {showDropdown &&
136
+ (isHash ? (
137
+ <OptionsDropdown
138
+ position="relative"
139
+ width={dropdownWidth}
140
+ filteredOptions={filteredOptions}
141
+ onSelectVariable={handleDropdownClick}
142
+ />
143
+ ) : (
144
+ <VariableDropdown
145
+ position="absolute"
146
+ width={dropdownWidth}
147
+ optionsList={variableList}
148
+ onSelectVariable={handleDropdownClick}
149
+ />
150
+ ))}
137
151
  </div>
138
- {showDropdown &&
139
- (isHash ? (
140
- <OptionsDropdown
141
- position="relative"
142
- width={dropdownWidth}
143
- filteredOptions={filteredOptions}
144
- onSelectVariable={handleDropdownClick}
145
- />
146
- ) : (
147
- <VariableDropdown
148
- position="absolute"
149
- width={dropdownWidth}
150
- optionsList={variableList}
151
- onSelectVariable={handleDropdownClick}
152
- />
153
- ))}
154
- </div>
155
- );
156
- };
152
+ );
153
+ }
154
+ );
157
155
 
158
156
  export default ConditionalDropdown;
@@ -26,7 +26,7 @@ export interface ConditionalDropdownProps {
26
26
  /**
27
27
  * Function storing and updating the inputValue state
28
28
  */
29
- setHashInputValue?:(value: File |dynamicObject | null) => void;
29
+ setHashInputValue?: (value: File | dynamicObject | null) => void;
30
30
 
31
31
  /**
32
32
  * List of variables
@@ -41,7 +41,7 @@ export interface ConditionalDropdownProps {
41
41
  * @param value
42
42
  * @returns
43
43
  */
44
- onChange?: (value: string) => void;
44
+ onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
45
45
  /**
46
46
  * Function to handle create variable icon click
47
47
  */
@@ -122,14 +122,14 @@ export interface ConditionalDropdownProps {
122
122
  */
123
123
  isLabelRequired?: boolean;
124
124
 
125
- /**
125
+ /**
126
126
  * If true, dropdown opens when '#' is entered at the first position.
127
127
  */
128
- isHash?: boolean;
129
- /**
130
- * Options for the dropdown when `isHash` is true.
131
- */
132
- dataFiles?: dynamicObject[];
128
+ isHash?: boolean;
129
+ /**
130
+ * Options for the dropdown when `isHash` is true.
131
+ */
132
+ dataFiles?: dynamicObject[];
133
133
  }
134
134
 
135
135
  export interface OptionsDropdownProps {
@@ -411,3 +411,313 @@
411
411
  }
412
412
  }
413
413
  }
414
+
415
+
416
+
417
+
418
+ // Adding react day picker library node modules css here to get the css style available in platform
419
+
420
+ /* Variables declaration */
421
+ /* prettier-ignore */
422
+ .rdp-root {
423
+ --rdp-accent-color: blue; /* The accent color used for selected days and UI elements. */
424
+ --rdp-accent-background-color: #f0f0ff; /* The accent background color used for selected days and UI elements. */
425
+ --rdp-font-family: system-ui; /* The font family used by the calendar. Note that `inherit`does not work here. */
426
+
427
+ --rdp-day-font: inherit; /* The font used for the day cells. */
428
+ --rdp-day-height: 2.75rem; /* The height of the day cells. */
429
+ --rdp-day-width: 2.75rem; /* The width of the day cells. */
430
+
431
+ --rdp-day_button-border-radius: 100%; /* The border radius of the day cells. */
432
+ --rdp-day_button-border: 2px solid transparent; /* The border of the day cells. */
433
+ --rdp-day_button-height: var(--rdp-day-height); /* The height of the day cells. */
434
+ --rdp-day_button-width: var(--rdp-day-width); /* The width of the day cells. */
435
+
436
+ --rdp-selected-border: 2px solid var(--rdp-accent-color); /* The border of the selected days. */
437
+ --rdp-selected-font: bold large var(--rdp-font-family); /* The font of the selected days. */
438
+ --rdp-disabled-opacity: 0.5; /* The opacity of the disabled days. */
439
+ --rdp-outside-opacity: 0.75; /* The opacity of the days outside the current month. */
440
+ --rdp-today-color: var(--rdp-accent-color); /* The color of the today's date. */
441
+
442
+ --rdp-dropdown-gap: 0.5rem;/* The gap between the dropdowns used in the month captons. */
443
+
444
+ --rdp-month_caption-font: bold larger var(--rdp-font-family); /* The font of the month caption. */
445
+ --rdp-months-gap: 2rem; /* The gap between the months in the multi-month view. */
446
+
447
+ --rdp-nav_button-disabled-opacity: 0.5; /* The opacity of the disabled navigation buttons. */
448
+ --rdp-nav_button-height: 2.25rem; /* The height of the navigation buttons. */
449
+ --rdp-nav_button-width: 2.25rem; /* The width of the navigation buttons. */
450
+ --rdp-nav-height: 2.75rem; /* The height of the navigation bar. */
451
+
452
+ --rdp-range_middle-background-color: var(--rdp-accent-background-color); /* The color of the background for days in the middle of a range. */
453
+ --rdp-range_middle-font: normal medium var(--rdp-font-family); /* The font for days in the middle of a range. */
454
+ --rdp-range_middle-foreground-color: white; /* The font for days in the middle of a range. */
455
+ --rdp-range_middle-color: inherit;/* The color of the range text. */
456
+
457
+ --rdp-range_start-color: white; /* The color of the range text. */
458
+ --rdp-range_start-background: linear-gradient(var(--rdp-gradient-direction), transparent 50%, var(--rdp-range_middle-background-color) 50%); /* Used for the background of the start of the selected range. */
459
+ --rdp-range_start-date-background-color: var(--rdp-accent-color); /* The background color of the date when at the start of the selected range. */
460
+
461
+ --rdp-range_end-background: linear-gradient(var(--rdp-gradient-direction), var(--rdp-range_middle-background-color) 50%, transparent 50%); /* Used for the background of the end of the selected range. */
462
+ --rdp-range_end-color: white;/* The color of the range text. */
463
+ --rdp-range_end-date-background-color: var(--rdp-accent-color); /* The background color of the date when at the end of the selected range. */
464
+
465
+ --rdp-week_number-border-radius: 100%; /* The border radius of the week number. */
466
+ --rdp-week_number-border: 2px solid transparent; /* The border of the week number. */
467
+ --rdp-week_number-font: 400 small var(--rdp-font-family); /* The font of the week number cells. */
468
+ --rdp-week_number-height: var(--rdp-day-height); /* The height of the week number cells. */
469
+ --rdp-week_number-opacity: 0.75; /* The opacity of the week number. */
470
+ --rdp-week_number-width: var(--rdp-day-width); /* The width of the week number cells. */
471
+ --rdp-weeknumber-text-align: center; /* The text alignment of the weekday cells. */
472
+
473
+ --rdp-weekday-font: 500 smaller var(--rdp-font-family); /* The font of the weekday. */
474
+ --rdp-weekday-opacity: 0.75; /* The opacity of the weekday. */
475
+ --rdp-weekday-padding: 0.5rem 0rem; /* The padding of the weekday. */
476
+ --rdp-weekday-text-align: center; /* The text alignment of the weekday cells. */
477
+
478
+ --rdp-gradient-direction: 90deg;
479
+ }
480
+
481
+ .rdp-root[dir="rtl"] {
482
+ --rdp-gradient-direction: -90deg;
483
+ }
484
+
485
+ /* Root of the component. */
486
+ .rdp-root {
487
+ position: relative; /* Required to position the navigation toolbar. */
488
+ box-sizing: border-box;
489
+ }
490
+
491
+ .rdp-root * {
492
+ box-sizing: border-box;
493
+ }
494
+
495
+ .rdp-day {
496
+ width: var(--rdp-day-width);
497
+ height: var(--rdp-day-height);
498
+ font: var(--rdp-day-font);
499
+ text-align: center;
500
+ }
501
+
502
+ .rdp-day_button {
503
+ background: none;
504
+ padding: 0;
505
+ margin: 0;
506
+ cursor: pointer;
507
+ font: inherit;
508
+ color: inherit;
509
+ justify-content: center;
510
+ align-items: center;
511
+ display: flex;
512
+
513
+ width: var(--rdp-day_button-width);
514
+ height: var(--rdp-day_button-height);
515
+ border: var(--rdp-day_button-border);
516
+ border-radius: var(--rdp-day_button-border-radius);
517
+ }
518
+
519
+ .rdp-day_button:disabled {
520
+ cursor: revert;
521
+ }
522
+
523
+ .rdp-caption_label {
524
+ z-index: 1;
525
+
526
+ position: relative;
527
+ display: inline-flex;
528
+ align-items: center;
529
+
530
+ white-space: nowrap;
531
+ border: 0;
532
+ }
533
+
534
+ .rdp-button_next,
535
+ .rdp-button_previous {
536
+ border: none;
537
+ background: none;
538
+ padding: 0;
539
+ margin: 0;
540
+ cursor: pointer;
541
+ font: inherit;
542
+ color: inherit;
543
+ -moz-appearance: none;
544
+ -webkit-appearance: none;
545
+ display: inline-flex;
546
+ align-items: center;
547
+ justify-content: center;
548
+ position: relative;
549
+ appearance: none;
550
+
551
+ width: var(--rdp-nav_button-width);
552
+ height: var(--rdp-nav_button-height);
553
+ }
554
+
555
+ .rdp-button_next:disabled,
556
+ .rdp-button_previous:disabled {
557
+ cursor: revert;
558
+
559
+ opacity: var(--rdp-nav_button-disabled-opacity);
560
+ }
561
+
562
+ .rdp-chevron {
563
+ display: inline-block;
564
+ fill: var(--rdp-accent-color);
565
+ }
566
+
567
+ .rdp-root[dir="rtl"] .rdp-nav .rdp-chevron {
568
+ transform: rotate(180deg);
569
+ }
570
+
571
+ .rdp-root[dir="rtl"] .rdp-nav .rdp-chevron {
572
+ transform: rotate(180deg);
573
+ transform-origin: 50%;
574
+ }
575
+
576
+ .rdp-dropdowns {
577
+ position: relative;
578
+ display: inline-flex;
579
+ align-items: center;
580
+ gap: var(--rdp-dropdown-gap);
581
+ }
582
+ .rdp-dropdown {
583
+ z-index: 2;
584
+
585
+ /* Reset */
586
+ opacity: 0;
587
+ appearance: none;
588
+ position: absolute;
589
+ inset-block-start: 0;
590
+ inset-block-end: 0;
591
+ inset-inline-start: 0;
592
+ width: 100%;
593
+ margin: 0;
594
+ padding: 0;
595
+ cursor: inherit;
596
+ border: none;
597
+ line-height: inherit;
598
+ }
599
+
600
+ .rdp-dropdown_root {
601
+ position: relative;
602
+ display: inline-flex;
603
+ align-items: center;
604
+ }
605
+
606
+ .rdp-dropdown_root[data-disabled="true"] .rdp-chevron {
607
+ opacity: var(--rdp-disabled-opacity);
608
+ }
609
+
610
+ .rdp-month_caption {
611
+ display: flex;
612
+ align-content: center;
613
+ height: var(--rdp-nav-height);
614
+ font: var(--rdp-month_caption-font);
615
+ }
616
+
617
+ .rdp-months {
618
+ position: relative;
619
+ display: flex;
620
+ flex-wrap: wrap;
621
+ gap: var(--rdp-months-gap);
622
+ max-width: fit-content;
623
+ }
624
+
625
+ .rdp-month_grid {
626
+ border-collapse: collapse;
627
+ }
628
+
629
+ .rdp-nav {
630
+ position: absolute;
631
+ inset-block-start: 0;
632
+ inset-inline-end: 0;
633
+
634
+ display: flex;
635
+ align-items: center;
636
+
637
+ height: var(--rdp-nav-height);
638
+ }
639
+
640
+ .rdp-weekday {
641
+ opacity: var(--rdp-weekday-opacity);
642
+ padding: var(--rdp-weekday-padding);
643
+ font: var(--rdp-weekday-font);
644
+ text-align: var(--rdp-weekday-text-align);
645
+ text-transform: var(--rdp-weekday-text-transform);
646
+ }
647
+
648
+ .rdp-week_number {
649
+ opacity: var(--rdp-week_number-opacity);
650
+ font: var(--rdp-week_number-font);
651
+ height: var(--rdp-week_number-height);
652
+ width: var(--rdp-week_number-width);
653
+ border: var(--rdp-week_number-border);
654
+ border-radius: var(--rdp-week_number-border-radius);
655
+ text-align: var(--rdp-weeknumber-text-align);
656
+ }
657
+
658
+ /* DAY MODIFIERS */
659
+ .rdp-today:not(.rdp-outside) {
660
+ color: var(--rdp-today-color);
661
+ }
662
+
663
+ .rdp-selected {
664
+ font: var(--rdp-selected-font);
665
+ }
666
+
667
+ .rdp-selected .rdp-day_button {
668
+ border: var(--rdp-selected-border);
669
+ }
670
+
671
+ .rdp-outside {
672
+ opacity: var(--rdp-outside-opacity);
673
+ }
674
+
675
+ .rdp-disabled {
676
+ opacity: var(--rdp-disabled-opacity);
677
+ }
678
+
679
+ .rdp-hidden {
680
+ visibility: hidden;
681
+ color: var(--rdp-range_start-color);
682
+ }
683
+
684
+ .rdp-range_start {
685
+ background: var(--rdp-range_start-background);
686
+ }
687
+
688
+ .rdp-range_start .rdp-day_button {
689
+ background-color: var(--rdp-range_start-date-background-color);
690
+ color: var(--rdp-range_start-color);
691
+ }
692
+
693
+ .rdp-range_middle {
694
+ background-color: var(--rdp-range_middle-background-color);
695
+ font: var(--rdp-range_middle-font);
696
+ }
697
+
698
+ .rdp-range_middle .rdp-day_button {
699
+ border-color: transparent;
700
+ border: unset;
701
+ border-radius: unset;
702
+ color: var(--rdp-range_middle-color);
703
+ }
704
+
705
+ .rdp-range_end {
706
+ background: var(--rdp-range_end-background);
707
+ color: var(--rdp-range_end-color);
708
+ }
709
+
710
+ .rdp-range_end .rdp-day_button {
711
+ color: var(--rdp-range_start-color);
712
+ background-color: var(--rdp-range_end-date-background-color);
713
+ }
714
+
715
+ .rdp-range_start.rdp-range_end {
716
+ background: revert;
717
+ }
718
+
719
+ .rdp-focusable {
720
+ cursor: pointer;
721
+ }
722
+
723
+
@@ -77,6 +77,10 @@
77
77
  .cancel-icon {
78
78
  cursor: pointer;
79
79
  }
80
+ .disabled-confirm-icon {
81
+ cursor: default;
82
+ opacity: 0.5;
83
+ }
80
84
  }
81
85
 
82
86
  .error-text {