pixel-react 1.8.3 → 1.8.5

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 (193) hide show
  1. package/.yarn/install-state.gz +0 -0
  2. package/lib/1fb4472b34e4fe07.css +1 -0
  3. package/lib/StyleGuide/ColorPalette/ColorPalette.stories.d.ts +6 -0
  4. package/lib/StyleGuide/Typography/Typography.stories.d.ts +6 -0
  5. package/lib/components/Accordion/Accordion.stories.d.ts +6 -0
  6. package/lib/components/AddResourceButton/AddButton.stories.d.ts +8 -0
  7. package/lib/components/AllProjectsDropdown/AllProjectsDropdown.stories.d.ts +7 -0
  8. package/lib/components/AppHeader/AppHeader.stories.d.ts +7 -0
  9. package/lib/components/AttachmentButton/AttachmentButton.stories.d.ts +9 -0
  10. package/lib/components/Avatar/Avatar.stories.d.ts +10 -0
  11. package/lib/components/Button/Button.stories.d.ts +13 -0
  12. package/lib/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.d.ts +7 -0
  13. package/lib/components/Charts/DashboardDonutChart/types.d.ts +3 -0
  14. package/lib/components/Charts/DonutChart/DonutChart.stories.d.ts +6 -0
  15. package/lib/components/Charts/LineChart/types.d.ts +1 -0
  16. package/lib/components/Charts/PieChart/PieChart.stories.d.ts +7 -0
  17. package/lib/components/Charts/RadialChart/RadialChart.stories.d.ts +6 -0
  18. package/lib/components/Checkbox/Checkbox.stories.d.ts +8 -0
  19. package/lib/components/Chip/Chip.stories.d.ts +14 -0
  20. package/lib/components/ConditionalDropdown/types.d.ts +4 -0
  21. package/lib/components/DatePicker/DatePicker.stories.d.ts +9 -0
  22. package/lib/components/DragAndDrop/DragAndDrop.stories.d.ts +6 -0
  23. package/lib/components/Drawer/Drawer.stories.d.ts +12 -0
  24. package/lib/components/Drawer/Types.d.ts +4 -0
  25. package/lib/components/Excel/ExcelContextMenu/ExcelContextMenu.d.ts +4 -0
  26. package/lib/components/Excel/ExcelFile/ExcelFile.d.ts +10 -4
  27. package/lib/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.d.ts +10 -0
  28. package/lib/components/Excel/ExcelFile/ExcelFileComponents/DataViewer.d.ts +1 -1
  29. package/lib/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.d.ts +9 -0
  30. package/lib/components/Excel/ExcelFile/ExcelFileComponents/types.d.ts +0 -2
  31. package/lib/components/Excel/Types.d.ts +14 -10
  32. package/lib/components/ExcelFile/ColorBarselector/ColorBarSelector.d.ts +8 -0
  33. package/lib/components/ExcelFile/ExcelFile/Excel/ActiveCell.d.ts +7 -0
  34. package/lib/components/ExcelFile/ExcelFile/Excel/Cell.d.ts +4 -0
  35. package/lib/components/ExcelFile/ExcelFile/Excel/ColumnIndicator.d.ts +5 -0
  36. package/lib/components/ExcelFile/ExcelFile/Excel/Copied.d.ts +3 -0
  37. package/lib/components/ExcelFile/ExcelFile/Excel/CornerIndicator.d.ts +5 -0
  38. package/lib/components/ExcelFile/ExcelFile/Excel/DataEditor.d.ts +5 -0
  39. package/lib/components/ExcelFile/ExcelFile/Excel/DataViewer.d.ts +8 -0
  40. package/lib/components/ExcelFile/ExcelFile/Excel/FloatingRect.d.ts +10 -0
  41. package/lib/components/ExcelFile/ExcelFile/Excel/HeaderRow.d.ts +3 -0
  42. package/lib/components/ExcelFile/ExcelFile/Excel/Row.d.ts +3 -0
  43. package/lib/components/ExcelFile/ExcelFile/Excel/RowIndicator.d.ts +5 -0
  44. package/lib/components/ExcelFile/ExcelFile/Excel/Selected.d.ts +3 -0
  45. package/lib/components/ExcelFile/ExcelFile/Excel/Spreadsheet.d.ts +80 -0
  46. package/lib/components/ExcelFile/ExcelFile/Excel/Table.d.ts +3 -0
  47. package/lib/components/ExcelFile/ExcelFile/Excel/actions.d.ts +174 -0
  48. package/lib/components/ExcelFile/ExcelFile/Excel/areModelsEqual.d.ts +1 -0
  49. package/lib/components/ExcelFile/ExcelFile/Excel/context.d.ts +8 -0
  50. package/lib/components/ExcelFile/ExcelFile/Excel/engine/engine.d.ts +22 -0
  51. package/lib/components/ExcelFile/ExcelFile/Excel/engine/formula.d.ts +17 -0
  52. package/lib/components/ExcelFile/ExcelFile/Excel/engine/index.d.ts +2 -0
  53. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-graph.d.ts +21 -0
  54. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-hash.d.ts +3 -0
  55. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-set.d.ts +24 -0
  56. package/lib/components/ExcelFile/ExcelFile/Excel/index.d.ts +13 -0
  57. package/lib/components/ExcelFile/ExcelFile/Excel/matrix.d.ts +67 -0
  58. package/lib/components/ExcelFile/ExcelFile/Excel/point-range.d.ts +22 -0
  59. package/lib/components/ExcelFile/ExcelFile/Excel/point.d.ts +11 -0
  60. package/lib/components/ExcelFile/ExcelFile/Excel/reducer.d.ts +27 -0
  61. package/lib/components/ExcelFile/ExcelFile/Excel/selection.d.ts +95 -0
  62. package/lib/components/ExcelFile/ExcelFile/Excel/types.d.ts +178 -0
  63. package/lib/components/ExcelFile/ExcelFile/Excel/use-dispatch.d.ts +3 -0
  64. package/lib/components/ExcelFile/ExcelFile/Excel/use-selector.d.ts +3 -0
  65. package/lib/components/ExcelFile/ExcelFile/Excel/util.d.ts +44 -0
  66. package/lib/components/ExcelFile/ExcelFile/ExcelFile.d.ts +19 -0
  67. package/lib/components/ExcelFile/ExcelFile.stories.d.ts +6 -0
  68. package/lib/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.d.ts +12 -0
  69. package/lib/components/ExcelFile/ExcelToolBar/ExcelToolBar.d.ts +15 -0
  70. package/lib/components/ExcelFile/Types.d.ts +129 -0
  71. package/lib/components/ExcelFile/index.d.ts +1 -0
  72. package/lib/components/ExpandableMenu/ExpandableMenu.stories.d.ts +7 -0
  73. package/lib/components/FF_Captcha/captcha.stories.d.ts +8 -0
  74. package/lib/components/FileDropzone/FileDropzone.stories.d.ts +8 -0
  75. package/lib/components/Form/Form.stories.d.ts +7 -0
  76. package/lib/components/GridLayout/GridLayout.stories.d.ts +8 -0
  77. package/lib/components/HighlightText/HighlightText.stories.d.ts +6 -0
  78. package/lib/components/Icon/Icon.stories.d.ts +8 -0
  79. package/lib/components/IconButton/IconButton.stories.d.ts +7 -0
  80. package/lib/components/IconRadioGroup/IconRadioGroup.stories.d.ts +7 -0
  81. package/lib/components/Input/Input.stories.d.ts +9 -0
  82. package/lib/components/InputWithDropdown/InputWithDropdown.stories.d.ts +9 -0
  83. package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +11 -0
  84. package/lib/components/LazyLoad/LazyLoad.stories.d.ts +6 -0
  85. package/lib/components/MachineInputField/MachineInputField.stories.d.ts +6 -0
  86. package/lib/components/MenuOption/MenuOption.stories.d.ts +16 -0
  87. package/lib/components/MiniModal/MiniModal.stories.d.ts +10 -0
  88. package/lib/components/Modal/Modal.stories.d.ts +7 -0
  89. package/lib/components/ModulesChip/ModuleChip.stories.d.ts +6 -0
  90. package/lib/components/MultiSelect/MultiSelect.stories.d.ts +10 -0
  91. package/lib/components/NLPInput/NlpInput.stories.d.ts +7 -0
  92. package/lib/components/Paper/Paper.stories.d.ts +11 -0
  93. package/lib/components/RadioButton/RadioButton.stories.d.ts +10 -0
  94. package/lib/components/RadioGroup/RadioGroup.stories.d.ts +9 -0
  95. package/lib/components/Search/Search.stories.d.ts +6 -0
  96. package/lib/components/Select/Select.stories.d.ts +13 -0
  97. package/lib/components/Select/components/Dropdown/Dropdown.d.ts +4 -0
  98. package/lib/components/Select/components/Dropdown/dropdownTypes.d.ts +17 -0
  99. package/lib/components/Select/components/types.d.ts +3 -2
  100. package/lib/components/Select/types.d.ts +10 -2
  101. package/lib/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.d.ts +6 -0
  102. package/lib/components/StateDropdown/StateDropdown.stories.d.ts +10 -0
  103. package/lib/components/StatusButton/StatusButton.stories.d.ts +14 -0
  104. package/lib/components/Table/Table.stories.d.ts +13 -0
  105. package/lib/components/TableTree/TableTree.stories.d.ts +7 -0
  106. package/lib/components/Tabs/Tabs.stories.d.ts +9 -0
  107. package/lib/components/TextArea/Textarea.stories.d.ts +9 -0
  108. package/lib/components/Toast/Toast.stories.d.ts +6 -0
  109. package/lib/components/Toastify/Toastify.stories.d.ts +6 -0
  110. package/lib/components/Toggle/Toggle.stories.d.ts +12 -0
  111. package/lib/components/Tooltip/Tooltip.stories.d.ts +15 -0
  112. package/lib/components/Typography/Typography.stories.d.ts +10 -0
  113. package/lib/components/VariableInput/VariableInput.stories.d.ts +6 -0
  114. package/lib/index.d.ts +47 -6
  115. package/lib/index.esm.js +5088 -2119
  116. package/lib/index.esm.js.map +1 -1
  117. package/lib/index.js +5097 -2118
  118. package/lib/index.js.map +1 -1
  119. package/lib/tsconfig.tsbuildinfo +1 -1
  120. package/lib/utils/checkEmpty/checkEmpty.stories.d.ts +6 -0
  121. package/lib/utils/compareArrays/compareArrays.stories.d.ts +6 -0
  122. package/lib/utils/compareObjects/compareObjects.stories.d.ts +6 -0
  123. package/lib/utils/debounce/debounce.stories.d.ts +6 -0
  124. package/lib/utils/ffID/ffID.stories.d.ts +6 -0
  125. package/lib/utils/find/findAndInsert.d.ts +7 -0
  126. package/lib/utils/find/findAndInsert.stories.d.ts +7 -0
  127. package/lib/utils/findAndInsert/findAndInsert.stories.d.ts +7 -0
  128. package/lib/utils/getEncryptedData/getEncryptedData.stories.d.ts +6 -0
  129. package/lib/utils/getExtension/getExtension.stories.d.ts +6 -0
  130. package/lib/utils/keyBoardActionUtil/UseKeyboardActions.d.ts +2 -0
  131. package/lib/utils/keyBoardActionUtil/types.d.ts +4 -0
  132. package/lib/utils/throttle/throttle.stories.d.ts +6 -0
  133. package/lib/utils/truncateText/truncateText.stories.d.ts +6 -0
  134. package/lib/validations/regex.d.ts +5 -1
  135. package/package.json +6 -1
  136. package/src/assets/Themes/BaseTheme.scss +1 -0
  137. package/src/assets/Themes/DarkTheme.scss +1 -1
  138. package/src/assets/icons/external_user.svg +13 -0
  139. package/src/assets/icons/group_user.svg +12 -0
  140. package/src/assets/icons/single_user.svg +12 -0
  141. package/src/assets/icons/unfollow_icon.svg +3 -0
  142. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.tsx +38 -6
  143. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +10 -4
  144. package/src/components/Charts/DashboardDonutChart/types.ts +4 -1
  145. package/src/components/Charts/LineChart/LineChart.stories.tsx +27 -88
  146. package/src/components/Charts/LineChart/LineChart.tsx +138 -42
  147. package/src/components/Charts/LineChart/types.ts +1 -0
  148. package/src/components/Charts/MultiRadialChart/MultiRadialChart.scss +3 -3
  149. package/src/components/Charts/MultiRadialChart/MultiRadialChart.tsx +47 -43
  150. package/src/components/ConditionalDropdown/ConditionalDropdown.stories.tsx +1 -0
  151. package/src/components/ConditionalDropdown/ConditionalDropdown.tsx +2 -1
  152. package/src/components/ConditionalDropdown/types.ts +4 -0
  153. package/src/components/Drawer/Drawer.stories.tsx +1 -0
  154. package/src/components/Drawer/Drawer.tsx +5 -1
  155. package/src/components/Drawer/Types.ts +4 -0
  156. package/src/components/Editor/Editor.scss +23 -18
  157. package/src/components/Editor/Editor.tsx +2 -2
  158. package/src/components/Excel/ExcelContextMenu/ExcelContextMenu.scss +1 -1
  159. package/src/components/Excel/ExcelContextMenu/ExcelContextMenu.tsx +6 -2
  160. package/src/components/Excel/ExcelFile/ExcelFile.scss +45 -41
  161. package/src/components/Excel/ExcelFile/ExcelFile.tsx +33 -11
  162. package/src/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.tsx +29 -1
  163. package/src/components/Excel/ExcelFile/ExcelFileComponents/Cell.tsx +0 -36
  164. package/src/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.tsx +2 -2
  165. package/src/components/Excel/ExcelFile/ExcelFileComponents/DataViewer.tsx +1 -40
  166. package/src/components/Excel/ExcelFile/ExcelFileComponents/RowIndicator.tsx +2 -2
  167. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +3 -3
  168. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx +12 -1
  169. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +3 -2
  170. package/src/components/Excel/ExcelFile/ExcelFileComponents/types.ts +0 -3
  171. package/src/components/Excel/ExcelFile.stories.tsx +20 -28
  172. package/src/components/Excel/Types.ts +17 -15
  173. package/src/components/Icon/iconList.ts +8 -0
  174. package/src/components/Modal/Modal.stories.tsx +7 -0
  175. package/src/components/Modal/Modal.tsx +17 -20
  176. package/src/components/Select/Select.stories.tsx +85 -0
  177. package/src/components/Select/Select.tsx +10 -2
  178. package/src/components/Select/components/Dropdown.tsx +23 -15
  179. package/src/components/Select/components/types.ts +3 -2
  180. package/src/components/Select/types.ts +12 -2
  181. package/src/index.ts +20 -0
  182. package/src/utils/keyBoardActionUtil/UseKeyboardAction.stories.tsx +53 -0
  183. package/src/utils/keyBoardActionUtil/UseKeyboardActions.tsx +20 -0
  184. package/src/utils/keyBoardActionUtil/types.ts +4 -0
  185. package/src/validations/regex.stories.tsx +24 -0
  186. package/src/validations/regex.ts +15 -0
  187. package/lib/assets/fonts/Poppins-Bold.ttf +0 -0
  188. package/lib/assets/fonts/Poppins-Medium.ttf +0 -0
  189. package/lib/assets/fonts/Poppins-Regular.ttf +0 -0
  190. package/lib/assets/fonts/Poppins-SemiBold.ttf +0 -0
  191. package/lib/components/TableTree/TableTree copy.d.ts +0 -25
  192. package/src/assets/images/photo.png +0 -0
  193. /package/lib/components/{Excel → ExcelFile}/ContextMenu/ContextMenu.d.ts +0 -0
@@ -133,34 +133,26 @@ export const Default: Story = {
133
133
  ],
134
134
  },
135
135
  toolbar: 'show',
136
- contextOption: [
137
- {
138
- name: 'first option',
139
- title: 'Custom Option 1: Get Data',
140
- action: () => {},
141
- },
142
- {
143
- name: 'second option',
144
- title: 'Custom Option 2',
145
- action: () => {},
146
- },
147
- {
148
- name: 'third option',
149
- title: 'Custom Option 2',
150
- action: () => {},
151
- },
152
- {
153
- name: 'fourth option',
154
- title: 'Custom Option 2',
155
- action: () => {},
156
- },
157
- {
158
- name: 'fifth option',
159
- title: 'Custom Option 2',
160
- action: () => {},
161
- },
162
- ],
163
- sheetHeight:"300px",
136
+ contextOption: {
137
+ open: true,
138
+ options: [
139
+ {
140
+ label: 'Get data from Header',
141
+ value: 'Get data from Header',
142
+ iconName: 'success',
143
+ action: () => {},
144
+ },
145
+ {
146
+ label: 'Get Cell Value',
147
+ value: 'Get Cell Value',
148
+ iconName: 'success',
149
+ action: () => {},
150
+ },
151
+ ],
152
+ },
153
+ contextHeightPositioning: -220,
154
+ contextWidthPositioning: -180,
155
+ sheetHeight: '300px',
164
156
  onSave: () => {},
165
157
  },
166
158
  };
@@ -43,7 +43,7 @@ type BackendStyle = {
43
43
  color: string;
44
44
  backgroundColor: string;
45
45
  borderColor: string;
46
- underline:string;
46
+ underline: string;
47
47
  border: {
48
48
  top: string;
49
49
  bottom: string;
@@ -79,20 +79,6 @@ interface ContextOption {
79
79
  value: ContextAction[];
80
80
  }
81
81
 
82
- interface ContextMenuState {
83
- /** Whether the context menu is visible */
84
- visible: boolean;
85
-
86
- /** X-coordinate position for the context menu */
87
- x: number;
88
-
89
- /** Y-coordinate position for the context menu */
90
- y: number;
91
-
92
- /** Type of the context menu ('cell', 'row', 'column', or 'sheet_options') */
93
- type: 'cell' | 'row' | 'column' | 'sheet_options' | null;
94
- }
95
-
96
82
  interface SelectedCell {
97
83
  /** The row index of the selected cell */
98
84
  row: number;
@@ -112,6 +98,22 @@ interface ColorContainer {
112
98
  borderColor: string;
113
99
  }
114
100
 
101
+ interface ContextMenuState {
102
+ open: boolean;
103
+ position: {
104
+ x: number;
105
+ y: number;
106
+ };
107
+ options: optionsType[];
108
+ }
109
+
110
+ interface optionsType {
111
+ label: string;
112
+ value: string;
113
+ iconName: string;
114
+ action: () => void;
115
+ }
116
+
115
117
  interface SelectedValue {
116
118
  /** The value inside the selected cell */
117
119
  value: string;
@@ -253,6 +253,10 @@ import suitesIcon from '../../assets/icons/suites_icon.svg?react';
253
253
  import executionsIcon from '../../assets/icons/executions_icon.svg?react';
254
254
  import ImportIcon from '../../assets/icons/import_icon.svg?react';
255
255
  import Settings from '../../assets/icons/settings.svg?react';
256
+ import UnfollowIcon from '../../assets/icons/unfollow_icon.svg?react';
257
+ import ExternalUser from '../../assets/icons/external_user.svg?react';
258
+ import SingleUser from '../../assets/icons/single_user.svg?react';
259
+ import GroupUser from '../../assets/icons/group_user.svg?react';
256
260
  import TestFreshersLogo from '../../assets/icons/test_freshers_logo.svg?react';
257
261
 
258
262
  Components['success'] = ToastSuccessIcon;
@@ -503,5 +507,9 @@ Components['suites_icon'] = suitesIcon;
503
507
  Components['import_icon'] = ImportIcon;
504
508
  Components['settings'] = Settings;
505
509
  Components['test_freshers_logo']=TestFreshersLogo;
510
+ Components['unfollow_icon']=UnfollowIcon
511
+ Components['external_user'] = ExternalUser;
512
+ Components['single_user'] = SingleUser;
513
+ Components['group_user'] = GroupUser;
506
514
 
507
515
  export default Components;
@@ -3,6 +3,7 @@ import React, { useState } from 'react';
3
3
  import type { Meta, StoryObj } from '@storybook/react';
4
4
  import Modal from './Modal';
5
5
  import Button from '../Button';
6
+ import { useKeyboardActions } from '../../utils/keyBoardActionUtil/UseKeyboardActions';
6
7
 
7
8
  const meta: Meta<typeof Modal> = {
8
9
  title: 'Components/Modal',
@@ -34,6 +35,12 @@ export const DefaultModalStory: Story = {
34
35
  export const Controlled: Story = {
35
36
  render: () => {
36
37
  const [openModal, setModal] = useState(false);
38
+ useKeyboardActions([
39
+ {
40
+ key: 'Enter',
41
+ action: () => alert('Enter key was pressed.'),
42
+ },
43
+ ]);
37
44
  return (
38
45
  <>
39
46
  <Button
@@ -1,9 +1,10 @@
1
- import React, { useContext, useEffect } from 'react';
1
+ import React, { useContext } from 'react';
2
2
  import { createPortal } from 'react-dom';
3
3
  import './modal.scss';
4
4
  import { ModalProps } from './types';
5
5
  import { ThemeContext } from '../ThemeProvider/ThemeProvider';
6
6
  import classNames from 'classnames';
7
+ import { useKeyboardActions } from '../../utils/keyBoardActionUtil/UseKeyboardActions';
7
8
 
8
9
  const Modal: React.FC<ModalProps> = ({
9
10
  isOpen,
@@ -26,27 +27,23 @@ const Modal: React.FC<ModalProps> = ({
26
27
  border = '',
27
28
  background='',
28
29
  }) => {
29
- useEffect(() => {
30
- const handleKeyDown = (e: KeyboardEvent) => {
31
- if (e.key === 'Escape' && shouldCloseOnEsc) {
32
- onClose();
33
- }
34
- };
35
30
 
36
- if (isOpen) {
37
- document.addEventListener('keydown', handleKeyDown);
38
- if (ariaHideApp) {
39
- document.body.style.overflow = 'hidden';
40
- }
41
- }
42
- return () => {
43
- document.removeEventListener('keydown', handleKeyDown);
44
- if (ariaHideApp) {
45
- document.body.style.overflow = '';
46
- }
47
- };
48
- }, [isOpen, onClose, ariaHideApp, shouldCloseOnEsc]);
31
+ useKeyboardActions(
32
+ shouldCloseOnEsc && isOpen
33
+ ? [
34
+ {
35
+ key: 'Escape',
36
+ action: onClose,
37
+ },
38
+ ]
39
+ : []
40
+ );
49
41
 
42
+ if (!isOpen) return null;
43
+
44
+ if (ariaHideApp) {
45
+ document.body.style.overflow = isOpen ? 'hidden' : '';
46
+ }
50
47
  if (!isOpen) return null;
51
48
  const themeContext = useContext(ThemeContext);
52
49
  const currentTheme = themeContext?.currentTheme;
@@ -352,4 +352,89 @@ export const IconOptionSelection: Story = {
352
352
  },
353
353
  };
354
354
 
355
+ export const SelectWithPlaceHolder: Story = {
356
+ render: () => {
357
+ const optionsList = [
358
+ {
359
+ label: 'fire-flink-LIC4900-onPrem',
360
+ value: 'fire-flink-LIC4900-onPrem',
361
+ },
362
+ {
363
+ label: 'fire-flink-LIC3179',
364
+ value: 'fire-flink-LIC3179',
365
+ },
366
+ {
367
+ label: 'fire-flink-LIC4937',
368
+ value: 'fire-flink-LIC4937',
369
+ },
370
+ {
371
+ label: 'fire-flink-LIC4999',
372
+ value: 'fire-flink-LIC4999',
373
+ },
374
+ ];
375
+
376
+ const [selectedOption, setSelectedOption] = useState<Option>({
377
+ label: '',
378
+ value: '',
379
+ });
380
+
381
+ const handleChange = (option: Option) => {
382
+ setSelectedOption(option);
383
+ };
384
+
385
+ return (
386
+ <Select
387
+ optionsList={optionsList}
388
+ selectedOption={selectedOption}
389
+ onChange={handleChange}
390
+ placeHolder="Search"
391
+ showLabel={false}
392
+ label="test"
393
+ />
394
+ );
395
+ },
396
+ };
397
+
398
+ export const SelectWithToolTip: Story = {
399
+ render: () => {
400
+ const optionsList = [
401
+ {
402
+ label: 'fire-flink-LIC4900-onPrem',
403
+ value: 'fire-flink-LIC4900-onPrem',
404
+ },
405
+ {
406
+ label: 'fire-flink-LIC3179',
407
+ value: 'fire-flink-LIC3179',
408
+ },
409
+ {
410
+ label: 'fire-flink-LIC4937',
411
+ value: 'fire-flink-LIC4937',
412
+ },
413
+ {
414
+ label: 'fire-flink-LIC4999',
415
+ value: 'fire-flink-LIC4999',
416
+ },
417
+ ];
418
+
419
+ const [selectedOption, setSelectedOption] = useState<Option>({
420
+ label: '',
421
+ value: '',
422
+ });
423
+
424
+ const handleChange = (option: Option) => {
425
+ setSelectedOption(option);
426
+ };
427
+
428
+ return (
429
+ <Select
430
+ optionsList={optionsList}
431
+ selectedOption={selectedOption}
432
+ onChange={handleChange}
433
+ label="Select Option"
434
+ showToolTip={true}
435
+ />
436
+ );
437
+ },
438
+ };
439
+
355
440
  export default meta;
@@ -2,7 +2,7 @@ import { ChangeEvent, FC, useEffect, useRef, useState } from 'react';
2
2
  import './Select.scss';
3
3
  import Icon from '../Icon';
4
4
  import Typography from '../Typography';
5
- import { DrowdownPosition, Option, SelectProps } from './types';
5
+ import { DropdownPosition, Option, SelectProps } from './types';
6
6
  import classNames from 'classnames';
7
7
  import { createPortal } from 'react-dom';
8
8
  import Dropdown from './components/Dropdown';
@@ -31,6 +31,8 @@ const Select: FC<SelectProps> = ({
31
31
  onBlur = () => {},
32
32
  disableInput = false,
33
33
  showIcon = false,
34
+ placeHolder = '',
35
+ showToolTip = false,
34
36
  }) => {
35
37
  const selectWidth = typeof width === 'number' ? `${width}px` : width;
36
38
 
@@ -41,7 +43,7 @@ const Select: FC<SelectProps> = ({
41
43
  });
42
44
  const { searchedText, searchedIcon } = searchedOption;
43
45
  const [selectOptionList, setSelectOptionList] = useState<Option[] | []>([]);
44
- const [dropdownPosition, setDropdownPosition] = useState<DrowdownPosition>({
46
+ const [dropdownPosition, setDropdownPosition] = useState<DropdownPosition>({
45
47
  positionX: 0,
46
48
  positionY: 0,
47
49
  width: 0,
@@ -170,6 +172,10 @@ const Select: FC<SelectProps> = ({
170
172
  setSelectOptionList(optionsList);
171
173
  }, [optionsList]);
172
174
 
175
+ if (showLabel) {
176
+ placeHolder = '';
177
+ }
178
+
173
179
  return (
174
180
  <div
175
181
  className={`ff-select-wrapper ${className}`}
@@ -206,6 +212,7 @@ const Select: FC<SelectProps> = ({
206
212
  disabled={disabled}
207
213
  onChange={handleChange}
208
214
  readOnly={disableInput}
215
+ placeholder={placeHolder}
209
216
  />
210
217
  {optionsRequired && (
211
218
  <div
@@ -266,6 +273,7 @@ const Select: FC<SelectProps> = ({
266
273
  heightFromTop={height}
267
274
  selectedOption={searchedText}
268
275
  showIcon={showIcon}
276
+ showToolTip={showToolTip}
269
277
  />,
270
278
  document.body
271
279
  )}
@@ -12,6 +12,7 @@ import {
12
12
  } from '../../../utils/getSelectOptionValue/getSelectOptionValue';
13
13
  import useClickOutside from '../../../hooks/useClickOutside';
14
14
  import Icon from '../../Icon';
15
+ import Tooltip from '../../Tooltip';
15
16
 
16
17
  const Dropdown: FC<DropdownProps> = ({
17
18
  options = [],
@@ -26,6 +27,7 @@ const Dropdown: FC<DropdownProps> = ({
26
27
  selectedOption,
27
28
  valueAccessor,
28
29
  showIcon = false,
30
+ showToolTip = false,
29
31
  }) => {
30
32
  const themeContext = useContext(ThemeContext);
31
33
  const currentTheme = themeContext?.currentTheme;
@@ -72,22 +74,28 @@ const Dropdown: FC<DropdownProps> = ({
72
74
  return label;
73
75
  }
74
76
  return (
75
- <Typography
76
- as="div"
77
- lineHeight="30px"
78
- color="var(--ff-select-text-color)"
79
- className={classNames({
80
- 'ff-select-dropdown-icon-container': showIcon,
81
- })}
77
+ <Tooltip
78
+ placement="bottom"
79
+ title={showToolTip ? label : ''}
80
+ zIndex={optionZIndex + 1}
82
81
  >
83
- {showIcon && (
84
- <Icon
85
- name={icon}
86
- className="ff-select-dropdown-icon-container__icon"
87
- />
88
- )}
89
- {label}
90
- </Typography>
82
+ <Typography
83
+ as="div"
84
+ lineHeight="30px"
85
+ color="var(--ff-select-text-color)"
86
+ className={classNames({
87
+ 'ff-select-dropdown-icon-container': showIcon,
88
+ })}
89
+ >
90
+ {showIcon && (
91
+ <Icon
92
+ name={icon}
93
+ className="ff-select-dropdown-icon-container__icon"
94
+ />
95
+ )}
96
+ {label}
97
+ </Typography>
98
+ </Tooltip>
91
99
  );
92
100
  };
93
101
 
@@ -1,9 +1,9 @@
1
- import { DrowdownPosition, Option } from '../types';
1
+ import { DropdownPosition, Option } from '../types';
2
2
  import { RefObject } from 'react';
3
3
 
4
4
  export interface DropdownProps {
5
5
  options: Option[];
6
- dropdownPosition: DrowdownPosition;
6
+ dropdownPosition: DropdownPosition;
7
7
  optionZIndex: number;
8
8
  labelAccessor?: string;
9
9
  valueAccessor?: string;
@@ -14,6 +14,7 @@ export interface DropdownProps {
14
14
  heightFromTop: number;
15
15
  selectedOption?: Option;
16
16
  showIcon?: boolean;
17
+ showToolTip?: boolean
17
18
  }
18
19
 
19
20
  export const dropdownDefaultCSSData = {
@@ -108,9 +108,19 @@ export interface SelectProps {
108
108
  * Provide the icon name for the select
109
109
  */
110
110
  iconName?: string;
111
+
112
+ /**
113
+ * Provide the placehoder for the select
114
+ */
115
+ placeHolder?: string;
116
+
117
+ /**
118
+ * Provide the boolean value if tooltip is reuired or not
119
+ */
120
+ showToolTip?: boolean
111
121
  }
112
122
 
113
- export interface DrowdownPosition {
123
+ export interface DropdownPosition {
114
124
  positionX: number;
115
125
  positionY: number;
116
126
  width: number;
@@ -124,7 +134,7 @@ export interface SelectState {
124
134
  showOptions: boolean;
125
135
  options: Option[];
126
136
  option: string;
127
- dropdownPosition: DrowdownPosition;
137
+ dropdownPosition: DropdownPosition;
128
138
  }
129
139
 
130
140
  type OptionValue = any;
package/src/index.ts CHANGED
@@ -102,6 +102,7 @@ import FormatString from './utils/FormatString/FormatString';
102
102
  import ConditionalDropdown from './components/ConditionalDropdown/ConditionalDropdown';
103
103
  import { hasDuplicateFile } from './utils/checkDuplicates/checkDuplicates';
104
104
  import PhoneInputField from './components/PhoneInput';
105
+ import { useKeyboardActions } from './utils/keyBoardActionUtil/UseKeyboardActions';
105
106
  import {
106
107
  EMAIL_REGEX,
107
108
  URL_REGEX,
@@ -148,6 +149,15 @@ import {
148
149
  CURRENCY_GENERIC_REGEX,
149
150
  LINKEDIN_PROFILE_REGEX,
150
151
  TWITTER_HANDLE_REGEX,
152
+ UNIT_REGEX,
153
+ NUMBER_REGEX,
154
+ MEMORY_VALIDATION_REGEX,
155
+ STEP_GROUP_NAME_REGEX,
156
+ NLP_DESCRIPTION_REGEX,
157
+ FILE_NAME_REGEX,
158
+ ELEMENTS_TRAILING_SPACE_REGEX,
159
+ ELEMENTS_WHITE_SPACE_REGEX,
160
+ PARAMETER_ALPHANUMERIC_REGEX,
151
161
  } from './validations/regex';
152
162
 
153
163
  export {
@@ -254,6 +264,7 @@ export {
254
264
  useFileDropzone,
255
265
  FormatString,
256
266
  hasDuplicateFile,
267
+ useKeyboardActions,
257
268
  EMAIL_REGEX,
258
269
  URL_REGEX,
259
270
  PHONE_REGEX,
@@ -299,4 +310,13 @@ export {
299
310
  CURRENCY_GENERIC_REGEX,
300
311
  LINKEDIN_PROFILE_REGEX,
301
312
  TWITTER_HANDLE_REGEX,
313
+ UNIT_REGEX,
314
+ NUMBER_REGEX,
315
+ MEMORY_VALIDATION_REGEX,
316
+ STEP_GROUP_NAME_REGEX,
317
+ NLP_DESCRIPTION_REGEX,
318
+ FILE_NAME_REGEX,
319
+ ELEMENTS_TRAILING_SPACE_REGEX,
320
+ ELEMENTS_WHITE_SPACE_REGEX,
321
+ PARAMETER_ALPHANUMERIC_REGEX,
302
322
  };
@@ -0,0 +1,53 @@
1
+ import React, { useState } from 'react';
2
+ import { Meta, StoryObj } from '@storybook/react';
3
+ import { useKeyboardActions } from './UseKeyboardActions';
4
+
5
+ // A demonstration component to showcase the `useKeyboardAction` utility
6
+ const UseKeyboardActionComponent: React.FC = () => {
7
+ const [message, setMessage] = useState<string>(
8
+ 'Press Escape or Enter to see actions.'
9
+ );
10
+
11
+ // Registering keyboard actions using the `useKeyboardAction` utility
12
+ useKeyboardActions([
13
+ {
14
+ key: 'Escape',
15
+ action: () => setMessage('Escape key was pressed.'),
16
+ },
17
+ {
18
+ key: 'Enter',
19
+ action: () => setMessage('Enter key was pressed.'),
20
+ },
21
+ {
22
+ key: 'ArrowUp',
23
+ action: () => setMessage('ArrowUp key was pressed.'),
24
+ },
25
+ ]);
26
+
27
+ return (
28
+ <div
29
+ style={{ textAlign: 'center', padding: '20px', border: '1px solid #ddd' }}
30
+ >
31
+ <h3>Keyboard Action Utility</h3>
32
+ <p>{message}</p>
33
+ <p>Try pressing Escape, Enter, or ArrowUp keys.</p>
34
+ </div>
35
+ );
36
+ };
37
+
38
+ // Meta configuration for the story
39
+ const meta: Meta<typeof UseKeyboardActionComponent> = {
40
+ title: 'Utils/UseKeyboardAction',
41
+ component: UseKeyboardActionComponent,
42
+ parameters: {
43
+ layout: 'centered',
44
+ },
45
+ tags: ['autodocs'],
46
+ };
47
+
48
+ export default meta;
49
+
50
+ type Story = StoryObj<typeof UseKeyboardActionComponent>;
51
+
52
+ // Default story for the component
53
+ export const Primary: Story = {};
@@ -0,0 +1,20 @@
1
+ import { useEffect } from "react";
2
+ import { KeyboardAction } from "./types";
3
+
4
+ export const useKeyboardActions = (actions: KeyboardAction[]) => {
5
+ useEffect(() => {
6
+ const handleKeyDown = (event: KeyboardEvent) => {
7
+ actions.forEach(({ key, action }) => {
8
+ if (event.key === key) {
9
+ action();
10
+ }
11
+ });
12
+ };
13
+
14
+ window.addEventListener('keydown', handleKeyDown);
15
+
16
+ return () => {
17
+ window.removeEventListener('keydown', handleKeyDown);
18
+ };
19
+ }, [actions]);
20
+ };
@@ -0,0 +1,4 @@
1
+ export type KeyboardAction = {
2
+ key: string;
3
+ action: () => void;
4
+ };
@@ -13,6 +13,7 @@ import {
13
13
  ALPHABET_ONLY_REGEX,
14
14
  NUMBERS_ONLY_REGEX,
15
15
  ALPHANUMERIC_REGEX,
16
+ ALPHANUMERIC_WITH_ROUND_BRACES_REGEX,
16
17
  DATE_REGEX,
17
18
  TIME_REGEX,
18
19
  FILE_EXTENSION_REGEX,
@@ -46,6 +47,9 @@ import {
46
47
  CURRENCY_GENERIC_REGEX,
47
48
  LINKEDIN_PROFILE_REGEX,
48
49
  TWITTER_HANDLE_REGEX,
50
+ NUMBER_REGEX,
51
+ UNIT_REGEX,
52
+ MEMORY_VALIDATION_REGEX,
49
53
  STEP_GROUP_NAME_REGEX,
50
54
  NLP_DESCRIPTION_REGEX,
51
55
  FILE_NAME_REGEX,
@@ -125,6 +129,12 @@ export const Playground = () => {
125
129
  regex: ALPHANUMERIC_REGEX,
126
130
  description: 'Validates alphanumeric values (e.g. abc123)',
127
131
  },
132
+
133
+ {
134
+ name: 'ALPHANUMERIC_WITH_ROUND_BRACES_REGEX',
135
+ regex: ALPHANUMERIC_WITH_ROUND_BRACES_REGEX,
136
+ description: 'Validates alphanumeric values with Underscore and RoundBraces Inclusive (e.g. abc123()_)',
137
+ },
128
138
  {
129
139
  name: 'DATE_REGEX',
130
140
  regex: DATE_REGEX,
@@ -294,6 +304,20 @@ export const Playground = () => {
294
304
  description: 'Validates Twitter handle (e.g. @username)',
295
305
  },
296
306
  {
307
+ name: 'NUMBER_REGEX',
308
+ regex: NUMBER_REGEX,
309
+ description: 'Validates a number (integer or float)',
310
+ },
311
+ {
312
+ name: 'UNIT_REGEX',
313
+ regex: UNIT_REGEX,
314
+ description: 'Validates a string of letters (unit)',
315
+ },
316
+ {
317
+ name: 'MEMORY_VALIDATION_REGEX',
318
+ regex: MEMORY_VALIDATION_REGEX,
319
+ description: 'Regular expression to match a number with an optional unit (GB, MB, or KB)',
320
+ },{
297
321
  name: 'STEP_GROUP_NAME_REGEX',
298
322
  regex: STEP_GROUP_NAME_REGEX,
299
323
  description:
@@ -38,6 +38,9 @@ const NUMBERS_ONLY_REGEX = /^\d+$/;
38
38
  // Alphanumeric Validation
39
39
  const ALPHANUMERIC_REGEX = /^[A-Za-z0-9]+$/;
40
40
 
41
+ //Alphanumeric Validation With Round Braces and Underscore Inclusive (Used to validate Manual and Automation Script Names )
42
+ const ALPHANUMERIC_WITH_ROUND_BRACES_REGEX = /^[a-zA-Z0-9-_() ]*$/;
43
+
41
44
  // Date Validation (YYYY-MM-DD)
42
45
  const DATE_REGEX = /^\d{4}-\d{2}-\d{2}$/;
43
46
 
@@ -145,6 +148,14 @@ const LINKEDIN_PROFILE_REGEX =
145
148
  // Twitter Handle Validation
146
149
  const TWITTER_HANDLE_REGEX = /^@?([a-zA-Z0-9_]{1,15})$/;
147
150
 
151
+ //Match a number (integer or float)
152
+ const NUMBER_REGEX = /([0-9\.]+)/;
153
+
154
+ //Match a string of letters (unit)
155
+ const UNIT_REGEX = /[a-zA-Z]+/;
156
+
157
+ //Regular expression to match a number with an optional unit (GB, MB, or KB)
158
+ const MEMORY_VALIDATION_REGEX = /^(\d+\.?\d*)\s*(GB|MB|KB)?$/i;
148
159
  const STEP_GROUP_NAME_REGEX = /^[a-zA-Z0-9()\-_ ]+$/;
149
160
 
150
161
  const NLP_DESCRIPTION_REGEX = /^[a-zA-Z0-9_$\s]*$/;
@@ -171,6 +182,7 @@ export {
171
182
  ALPHABET_ONLY_REGEX,
172
183
  NUMBERS_ONLY_REGEX,
173
184
  ALPHANUMERIC_REGEX,
185
+ ALPHANUMERIC_WITH_ROUND_BRACES_REGEX,
174
186
  DATE_REGEX,
175
187
  TIME_REGEX,
176
188
  FILE_EXTENSION_REGEX,
@@ -204,6 +216,9 @@ export {
204
216
  CURRENCY_GENERIC_REGEX,
205
217
  LINKEDIN_PROFILE_REGEX,
206
218
  TWITTER_HANDLE_REGEX,
219
+ UNIT_REGEX,
220
+ NUMBER_REGEX,
221
+ MEMORY_VALIDATION_REGEX,
207
222
  STEP_GROUP_NAME_REGEX,
208
223
  NLP_DESCRIPTION_REGEX,
209
224
  FILE_NAME_REGEX,
Binary file
Binary file