pixel-react 1.5.9 → 1.6.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 (110) hide show
  1. package/.yarn/install-state.gz +0 -0
  2. package/lib/components/AppHeader/AppHeader.d.ts +1 -0
  3. package/lib/components/AppHeader/types.d.ts +18 -6
  4. package/lib/components/Charts/BarChart/BarChart.d.ts +1 -0
  5. package/lib/components/Charts/DashboardDonutChart/types.d.ts +2 -0
  6. package/lib/components/Excel/ExcelToolBar/ExcelToolBar.d.ts +0 -1
  7. package/lib/components/FieldSet/FieldSet.d.ts +5 -0
  8. package/lib/components/FieldSet/index.d.ts +1 -0
  9. package/lib/components/FieldSet/types.d.ts +7 -0
  10. package/lib/components/FileDropzone/types.d.ts +8 -0
  11. package/lib/components/MachineInputField/types.d.ts +1 -1
  12. package/lib/components/MultiSelect/MultiSelect.d.ts +1 -1
  13. package/lib/components/MultiSelect/MultiSelectTypes.d.ts +1 -0
  14. package/lib/components/PopUpModal/PopUpModal.d.ts +5 -0
  15. package/lib/components/PopUpModal/types.d.ts +14 -0
  16. package/lib/components/RadioGroup/radioGroupTypes.d.ts +20 -0
  17. package/lib/components/SequentialConnectingBranch/SequentialConnectingBranch.d.ts +2 -1
  18. package/lib/components/SequentialConnectingBranch/components/Branches/Branches.d.ts +1 -1
  19. package/lib/components/SequentialConnectingBranch/components/Branches/types.d.ts +3 -2
  20. package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.d.ts +1 -1
  21. package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/types.d.ts +3 -2
  22. package/lib/components/SequentialConnectingBranch/types.d.ts +11 -3
  23. package/lib/components/TableTree/TableTree.d.ts +4 -24
  24. package/lib/components/TableTree/data.d.ts +112 -273
  25. package/lib/components/TableTree/types.d.ts +28 -0
  26. package/lib/index.d.ts +149 -32
  27. package/lib/index.esm.js +1104 -742
  28. package/lib/index.esm.js.map +1 -1
  29. package/lib/index.js +1109 -742
  30. package/lib/index.js.map +1 -1
  31. package/lib/tsconfig.tsbuildinfo +1 -1
  32. package/package.json +2 -2
  33. package/src/assets/Themes/BaseTheme.scss +5 -14
  34. package/src/assets/Themes/DarkTheme.scss +5 -2
  35. package/src/assets/icons/arrow_up.svg +1 -1
  36. package/src/assets/icons/export.svg +5 -0
  37. package/src/assets/icons/import.svg +5 -0
  38. package/src/assets/icons/info_icon.svg +4 -16
  39. package/src/assets/icons/replace_file.svg +14 -0
  40. package/src/assets/icons/web_service_icon.svg +3 -0
  41. package/src/assets/styles/_fonts.scss +4 -2
  42. package/src/components/AppHeader/AppHeader.stories.tsx +242 -39
  43. package/src/components/AppHeader/AppHeader.tsx +158 -139
  44. package/src/components/AppHeader/types.ts +19 -6
  45. package/src/components/Charts/BarChart/BarChart.scss +34 -34
  46. package/src/components/Charts/BarChart/BarChart.stories.tsx +3 -2
  47. package/src/components/Charts/BarChart/BarChart.tsx +79 -55
  48. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.scss +25 -18
  49. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +31 -11
  50. package/src/components/Charts/DashboardDonutChart/types.ts +2 -0
  51. package/src/components/Charts/IconRadialChart/IconRadialChart.tsx +3 -0
  52. package/src/components/Charts/LineChart/LineChart.scss +13 -4
  53. package/src/components/Charts/LineChart/LineChart.stories.tsx +100 -102
  54. package/src/components/Charts/LineChart/LineChart.tsx +143 -131
  55. package/src/components/Charts/MultiRadialChart/MultiRadialChart.scss +23 -2
  56. package/src/components/Charts/MultiRadialChart/MultiRadialChart.tsx +109 -24
  57. package/src/components/Charts/PieChart/PieChart.scss +5 -3
  58. package/src/components/Charts/PieChart/PieChart.tsx +1 -2
  59. package/src/components/Checkbox/Checkbox.tsx +1 -7
  60. package/src/components/DatePicker/DatePicker.scss +15 -1
  61. package/src/components/DragAndDrop/DragAndDropList.tsx +5 -4
  62. package/src/components/Excel/ExcelFile/ExcelFile.scss +1 -1
  63. package/src/components/Excel/ExcelFile/ExcelFile.tsx +34 -20
  64. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx +0 -1
  65. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +44 -15
  66. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +47 -4
  67. package/src/components/FieldSet/FieldSet.scss +9 -0
  68. package/src/components/FieldSet/FieldSet.stories.tsx +103 -0
  69. package/src/components/FieldSet/FieldSet.tsx +29 -0
  70. package/src/components/FieldSet/index.ts +1 -0
  71. package/src/components/FieldSet/types.ts +8 -0
  72. package/src/components/FileDropzone/FileDropzone.scss +1 -1
  73. package/src/components/FileDropzone/FileDropzone.stories.tsx +15 -3
  74. package/src/components/FileDropzone/FileDropzone.tsx +5 -0
  75. package/src/components/FileDropzone/FilePreview.tsx +1 -1
  76. package/src/components/FileDropzone/types.ts +8 -0
  77. package/src/components/Icon/Icons.scss +1 -1
  78. package/src/components/Icon/iconList.ts +11 -7
  79. package/src/components/MachineInputField/MachineInputField.scss +15 -2
  80. package/src/components/MachineInputField/MachineInputField.tsx +17 -3
  81. package/src/components/MachineInputField/types.ts +1 -1
  82. package/src/components/MultiSelect/Dropdown.tsx +7 -3
  83. package/src/components/MultiSelect/MultiSelect.stories.tsx +6 -1
  84. package/src/components/MultiSelect/MultiSelect.tsx +4 -20
  85. package/src/components/MultiSelect/MultiSelectTypes.ts +2 -0
  86. package/src/components/PopUpModal/PopUpModal.scss +36 -0
  87. package/src/components/PopUpModal/PopUpModal.stories.tsx +61 -0
  88. package/src/components/PopUpModal/PopUpModal.tsx +85 -0
  89. package/src/components/PopUpModal/types.ts +14 -0
  90. package/src/components/RadioGroup/RadioGroup.scss +7 -0
  91. package/src/components/RadioGroup/RadioGroup.stories.tsx +26 -0
  92. package/src/components/RadioGroup/RadioGroup.tsx +16 -0
  93. package/src/components/RadioGroup/radioGroupTypes.tsx +24 -0
  94. package/src/components/Select/Select.tsx +3 -4
  95. package/src/components/Select/components/Dropdown.tsx +34 -34
  96. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.scss +9 -0
  97. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx +74 -43
  98. package/src/components/SequentialConnectingBranch/components/Branches/Branches.scss +9 -3
  99. package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +45 -14
  100. package/src/components/SequentialConnectingBranch/components/Branches/types.ts +9 -2
  101. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.tsx +3 -1
  102. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/types.ts +9 -2
  103. package/src/components/SequentialConnectingBranch/types.ts +18 -3
  104. package/src/components/TableTree/TableTree.scss +154 -123
  105. package/src/components/TableTree/TableTree.stories.tsx +148 -96
  106. package/src/components/TableTree/TableTree.tsx +250 -282
  107. package/src/components/TableTree/data.ts +318 -569
  108. package/src/components/TableTree/types.ts +30 -0
  109. package/src/components/Toast/Toast.tsx +1 -1
  110. package/src/index.ts +11 -0
@@ -7,10 +7,11 @@ import Select from '../../Select';
7
7
  import { CellBase } from '../ExcelFile/ExcelFileComponents';
8
8
  import * as Matrix from '../ExcelFile/ExcelFileComponents/matrix';
9
9
  import ColorBarSelector from '../ColorBarSelector/ColorBarSelector';
10
+ import useSelector from '../ExcelFile/ExcelFileComponents/use-selector';
11
+ import { convertStyleToBackend } from '../dataConversion';
10
12
 
11
13
  interface ExcelToolBarProps {
12
14
  toolbar?: 'show' | 'disable' | 'hide';
13
- data: Matrix.Matrix<CellBase>;
14
15
  onBold: (data: Matrix.Matrix<CellBase>) => void;
15
16
  onItalic: (data: Matrix.Matrix<CellBase>) => void;
16
17
  setUnderlineType: (
@@ -33,7 +34,6 @@ interface ExcelToolBarProps {
33
34
 
34
35
  const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
35
36
  toolbar = 'show',
36
- data,
37
37
  onBold,
38
38
  onItalic,
39
39
  setUnderlineType,
@@ -45,6 +45,42 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
45
45
  setBorderType,
46
46
  setFormatePainter,
47
47
  }) => {
48
+ const cell = useSelector((state) =>
49
+ state.active ? Matrix.get(state.active, state.model.data) : null
50
+ );
51
+ const data = useSelector((state) => state.model.data);
52
+ const formattedStyle = useSelector((state) => state.formattedStyle.open);
53
+
54
+ const [cellStyle, setCellStyle] = useState(
55
+ cell?.style || {
56
+ color: 'var(--text-color)',
57
+ backgroundColor: 'var(--drawer-footer-bg)',
58
+ borderColor: 'var(--toggle-strip-color)',
59
+ }
60
+ );
61
+
62
+ useEffect(() => {
63
+ setCellStyle(
64
+ cell?.style || {
65
+ color: 'var(--text-color)',
66
+ backgroundColor: 'var(--drawer-footer-bg)',
67
+ borderColor: 'var(--toggle-strip-color)',
68
+ }
69
+ );
70
+ }, [cell]);
71
+
72
+ useEffect(() => {
73
+ if (
74
+ cell?.style &&
75
+ JSON.stringify(cell.style) !== JSON.stringify(cellStyle)
76
+ ) {
77
+ setCellStyle(cell.style);
78
+ }
79
+ }, [cell]);
80
+
81
+ const styleBackend = convertStyleToBackend(cellStyle);
82
+
83
+
48
84
  const [border, setBorder] = useState<string>('border-none');
49
85
  const [underLine, setUnderLine] = useState<string>('underline');
50
86
  const [selectedFontFamily, setSelectedFontFamily] = useState<{
@@ -167,13 +203,13 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
167
203
  <Tooltip placement="top" title={'Font Family'}>
168
204
  <div className="ff-excel-toolbar-font-family">
169
205
  <Select
206
+ showLabel={false}
170
207
  onChange={(e) => {
171
208
  setSelectedFontFamily({ label: e.label, value: e.value });
172
209
  setFontFamily(data, e.label);
173
210
  }}
174
211
  required={false}
175
212
  optionsList={fontFamily}
176
- label=""
177
213
  selectedOption={selectedFontFamily}
178
214
  />
179
215
  </div>
@@ -181,8 +217,8 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
181
217
  <Tooltip placement="top" title={'Font Size'}>
182
218
  <div className="ff-excel-toolbar-font-size">
183
219
  <Select
220
+ showLabel={false}
184
221
  required={false}
185
- label=""
186
222
  onChange={(e) => setFontSize(data, e.value)}
187
223
  optionsList={fontSize}
188
224
  selectedOption={{
@@ -197,6 +233,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
197
233
  <div className="ff-excel-toolbar-icon">
198
234
  <Tooltip placement="top" title={'Text Left'}>
199
235
  <Icon
236
+ variant={cellStyle.textAlign === 'left' ? 'dark' : 'light'}
200
237
  hoverEffect
201
238
  disabled={toolbar === 'disable'}
202
239
  onClick={() => setTextAlign(data, 'left')}
@@ -205,6 +242,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
205
242
  </Tooltip>
206
243
  <Tooltip placement="top" title={'Text Center'}>
207
244
  <Icon
245
+ variant={cellStyle.textAlign === 'center' ? 'dark' : 'light'}
208
246
  hoverEffect
209
247
  disabled={toolbar === 'disable'}
210
248
  onClick={() => setTextAlign(data, 'center')}
@@ -214,6 +252,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
214
252
 
215
253
  <Tooltip placement="top" title={'Text Right'}>
216
254
  <Icon
255
+ variant={cellStyle.textAlign === 'right' ? 'dark' : 'light'}
217
256
  hoverEffect
218
257
  disabled={toolbar === 'disable'}
219
258
  onClick={() => setTextAlign(data, 'right')}
@@ -225,6 +264,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
225
264
  <div className="ff-excel-toolbar-text">
226
265
  <Tooltip placement="top" title={'Bold'}>
227
266
  <Icon
267
+ variant={styleBackend.bold ? 'dark' : 'light'}
228
268
  hoverEffect
229
269
  disabled={toolbar === 'disable'}
230
270
  onClick={() => onBold(data)}
@@ -234,6 +274,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
234
274
  <Tooltip placement="top" title={'Italic'}>
235
275
  <Icon
236
276
  hoverEffect
277
+ variant={styleBackend.italic ? 'dark' : 'light'}
237
278
  disabled={toolbar === 'disable'}
238
279
  onClick={() => onItalic(data)}
239
280
  name="italic"
@@ -242,6 +283,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
242
283
  <Tooltip placement="top" title={'Underline Type'}>
243
284
  <div className="ff-excel-toolbar-icon-underline">
244
285
  <Icon
286
+ variant={cellStyle.textDecoration===underLine?'dark' : 'light'}
245
287
  hoverEffect
246
288
  disabled={toolbar === 'disable'}
247
289
  onClick={() => setUnderlineType(data, underLine, true)}
@@ -266,6 +308,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
266
308
  <div className="ff-excel-toolbar-icon">
267
309
  <Tooltip placement="top" title={'Format Painter'}>
268
310
  <Icon
311
+ variant={formattedStyle?'dark':'light'}
269
312
  hoverEffect
270
313
  disabled={toolbar === 'disable'}
271
314
  onClick={() => {
@@ -0,0 +1,9 @@
1
+ .ff_fieldSet_container {
2
+ .ff_fieldSet {
3
+ border-color: var(--ff-connecting-branch-modal-border);
4
+ border-radius: 5px;
5
+ .ff_legend_container{
6
+ display: flex;
7
+ }
8
+ }
9
+ }
@@ -0,0 +1,103 @@
1
+ import React, { useState } from 'react';
2
+ import type { Meta, StoryObj } from '@storybook/react';
3
+ import FieldSet from './FieldSet';
4
+
5
+ const meta: Meta<typeof FieldSet> = {
6
+ title: 'Components/FieldSet',
7
+ component: FieldSet,
8
+ parameters: {
9
+ layout: 'centered',
10
+ },
11
+ tags: ['autodocs'],
12
+ };
13
+
14
+ type Story = StoryObj<typeof FieldSet>;
15
+
16
+ const defaultArgs = {
17
+ legendName: 'Default Legend',
18
+ height: '200px',
19
+ width: '300px',
20
+ children: 'Default content inside the FieldSet.',
21
+ };
22
+
23
+ export const Default: Story = {
24
+ args: {
25
+ ...defaultArgs,
26
+ },
27
+ };
28
+
29
+ export const CustomDimensions: Story = {
30
+ args: {
31
+ ...defaultArgs,
32
+ height: '300px',
33
+ width: '400px',
34
+ legendName: 'Custom Dimensions',
35
+ },
36
+ };
37
+
38
+ export const WithNestedChildren: Story = {
39
+ args: {
40
+ ...defaultArgs,
41
+ legendName: 'Nested Content',
42
+ children: (
43
+ <div>
44
+ <p>This is some nested content inside the FieldSet.</p>
45
+ <button>Click Me</button>
46
+ </div>
47
+ ),
48
+ },
49
+ };
50
+
51
+ export const Controlled: Story = {
52
+ render: () => {
53
+ const [legend, setLegend] = useState('Controlled FieldSet');
54
+ const [content, setContent] = useState('Initial Content');
55
+
56
+ const handleLegendChange = (event: React.ChangeEvent<HTMLInputElement>) =>
57
+ setLegend(event.target.value);
58
+
59
+ const handleContentChange = (event: React.ChangeEvent<HTMLInputElement>) =>
60
+ setContent(event.target.value);
61
+
62
+ return (
63
+ <>
64
+ <div style={{ marginBottom: '1rem' }}>
65
+ <label>
66
+ Legend:
67
+ <input
68
+ type="text"
69
+ value={legend}
70
+ onChange={handleLegendChange}
71
+ style={{ marginLeft: '0.5rem' }}
72
+ />
73
+ </label>
74
+ </div>
75
+ <div style={{ marginBottom: '1rem' }}>
76
+ <label>
77
+ Content:
78
+ <input
79
+ type="text"
80
+ value={content}
81
+ onChange={handleContentChange}
82
+ style={{ marginLeft: '0.5rem' }}
83
+ />
84
+ </label>
85
+ </div>
86
+ <FieldSet legendName={legend} height="250px" width="350px">
87
+ {content}
88
+ </FieldSet>
89
+ </>
90
+ );
91
+ },
92
+ };
93
+
94
+ export const EmptyFieldSet: Story = {
95
+ args: {
96
+ legendName: 'Empty FieldSet',
97
+ height: '32px',
98
+ width: '317px',
99
+ children: null,
100
+ },
101
+ };
102
+
103
+ export default meta;
@@ -0,0 +1,29 @@
1
+ import { FC } from 'react';
2
+ import './FieldSet.scss';
3
+ import { fieldSetProps } from './types';
4
+ import Typography from '../Typography';
5
+ const FieldSet: FC<fieldSetProps> = ({
6
+ legendName,
7
+ height,
8
+ width,
9
+ children,
10
+ }) => {
11
+ return (
12
+ <div className="ff_fieldSet_container">
13
+ <fieldset className="ff_fieldSet" style={{ height, width }}>
14
+ <legend className="ff_legend_container">
15
+ <Typography
16
+ color="var(--license_header_text_color)"
17
+ fontSize={8}
18
+ lineHeight="12px"
19
+ >
20
+ {legendName}
21
+ </Typography>
22
+ </legend>
23
+ <div className="ff_children_container">{children}</div>
24
+ </fieldset>
25
+ </div>
26
+ );
27
+ };
28
+
29
+ export default FieldSet;
@@ -0,0 +1 @@
1
+ export { default } from './FieldSet';
@@ -0,0 +1,8 @@
1
+ import { ReactNode } from 'react';
2
+
3
+ export interface fieldSetProps {
4
+ legendName: string;
5
+ height: string;
6
+ width: string;
7
+ children: ReactNode | string;
8
+ }
@@ -94,7 +94,7 @@
94
94
  display: flex;
95
95
  align-items: center;
96
96
  gap: 4px;
97
- width: 90%;
97
+ width: 87%;
98
98
 
99
99
  .ff-file-info__icon {
100
100
  @include center;
@@ -1,8 +1,8 @@
1
+ import React from 'react';
1
2
  import { StoryObj, Meta } from '@storybook/react';
2
3
  import FileDropzone from './FileDropzone';
3
4
  import Toaster from '../Toast';
4
5
  import { useState } from 'react';
5
- import React from 'react';
6
6
 
7
7
  const meta: Meta<typeof FileDropzone> = {
8
8
  title: 'Components/FileDropzone',
@@ -23,8 +23,8 @@ const defaultArgs = {
23
23
  maxSizeErrorMessage: 'Max file size limit of 5MB exceeded',
24
24
  invalidFileMessage: 'Invalid file format',
25
25
  fileExistMessage: 'File already exist with same name and type',
26
- width: 700,
27
- height: 350,
26
+ width: 640,
27
+ height: 188,
28
28
  };
29
29
 
30
30
  export const Primary: Story = {
@@ -49,6 +49,8 @@ export const withMIMEValidation: Story = {
49
49
  export const Controlled: Story = {
50
50
  render: () => {
51
51
  const [showToaster, setShowToaster] = useState<boolean>(false);
52
+ const [acceptedFiles, setAcceptedFiles] = useState([]);
53
+ const [rejectedFiles, setRejectedFiles] = useState([]);
52
54
 
53
55
  const showMaxFilesError = () => {
54
56
  setShowToaster(true);
@@ -57,6 +59,14 @@ export const Controlled: Story = {
57
59
  }, 2000);
58
60
  };
59
61
 
62
+ const getAcceptedFiles = (files) => {
63
+ setAcceptedFiles(files);
64
+ }
65
+
66
+ const getRejectedFiles = (files) => {
67
+ setRejectedFiles(files);
68
+ }
69
+
60
70
  return (
61
71
  <>
62
72
  <FileDropzone
@@ -69,6 +79,8 @@ export const Controlled: Story = {
69
79
  ]}
70
80
  validateMIMEType={true}
71
81
  onMaxFilesError={showMaxFilesError}
82
+ getAcceptedFiles={getAcceptedFiles}
83
+ getRejectedFiles={getRejectedFiles}
72
84
  />
73
85
  {showToaster && (
74
86
  <Toaster
@@ -25,6 +25,8 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
25
25
  validateMIMEType = false,
26
26
  width = 640,
27
27
  height = 188,
28
+ getAcceptedFiles = () => {},
29
+ getRejectedFiles = () => {},
28
30
  }) => {
29
31
  const {
30
32
  getRootProps,
@@ -47,6 +49,9 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
47
49
  // onDrop: (accepted, rejected, event) => {}, //onDrop function to handle dropped or selected files explicitly.
48
50
  });
49
51
 
52
+ getAcceptedFiles(acceptedFiles);
53
+ getRejectedFiles(rejectedFiles);
54
+
50
55
  const acceptedFilesList = useMemo(
51
56
  () =>
52
57
  acceptedFiles.map((file) => (
@@ -48,7 +48,7 @@ const FilePreview: React.FC<FilePreviewProps> = ({
48
48
  <div className="ff-file-actions__icon-replace">
49
49
  <Tooltip title="Replace">
50
50
  <Icon
51
- name="replace"
51
+ name="replace_file"
52
52
  color={'var(--icons-default-color)'}
53
53
  height={16}
54
54
  width={16}
@@ -57,6 +57,14 @@ export interface FileDropzoneProps {
57
57
  width?: number | string;
58
58
 
59
59
  height?: number | string;
60
+ /**
61
+ * Returns the accepted files in the state
62
+ **/
63
+ getAcceptedFiles?: (files: File[]) => void;
64
+ /**
65
+ * Returns the rejected files in the state
66
+ **/
67
+ getRejectedFiles?: (files: FileRejection[]) => void;
60
68
  }
61
69
  export interface FileState {
62
70
  accepted: File[];
@@ -12,9 +12,9 @@
12
12
  }
13
13
  &.ff-icon-dark {
14
14
  background-color: var(--brand-color);
15
+ border-radius: 4px;
15
16
  &.ff-icon-click {
16
17
  &:hover {
17
- border-radius: 4px;
18
18
  background-color: white;
19
19
  svg path {
20
20
  fill: var(--brand-color);
@@ -31,7 +31,7 @@ import Tick from '../../assets/Icons/tick_icon.svg?react';
31
31
  import Search from '../../assets/icons/search.svg?react';
32
32
  import Filter from '../../assets/icons/filter.svg?react';
33
33
  import Alert from '../../assets/icons/alert.svg?react';
34
-
34
+ import ReplaceFile from '../../assets/icons/replace_file.svg?react';
35
35
  import RightArrow from '../../assets/icons/right_arrow_icon.svg?react';
36
36
  import LeftArrow from '../../assets/icons/left_arrow_icon.svg?react';
37
37
  import ClockIcon from '../../assets/icons/clock_icon.svg?react';
@@ -46,7 +46,7 @@ import LicenseIcon from '../../assets/icons/active_license_icon.svg?react';
46
46
  import DeleteIcon from '../../assets/icons/delete.svg?react';
47
47
  import DetailsIcon from '../../assets/icons/details.svg?react';
48
48
  import ImpactListIcon from '../../assets/icons/impactList.svg?react';
49
-
49
+ import Export from '../../assets/icons/export.svg?react';
50
50
  import FormatePainter from '../../assets/icons/formate_painter.svg?react';
51
51
  import Bold from '../../assets/icons/bold.svg?react';
52
52
  import Italic from '../../assets/icons/italic.svg?react';
@@ -191,7 +191,7 @@ import SystemWarning from '../../assets/icons/system_warning.svg?react';
191
191
  import UserPasswordLock from '../../assets/icons/user_password_lock.svg?react';
192
192
  import UserWarning from '../../assets/icons/user_warning.svg?react';
193
193
  import UserWithSystem from '../../assets/icons/user_with_system.svg?react';
194
-
194
+ import Import from '../../assets/icons/import.svg?react';
195
195
  import dashboardWebIcon from '../../assets/icons/dashboard_web_icon.svg?react';
196
196
  import dashboardMobileIcon from '../../assets/icons/dashboard_mobile_icon.svg?react';
197
197
  import dashboardWebMobileIcon from '../../assets/icons/web_mobile_icon.svg?react';
@@ -221,9 +221,11 @@ import RemoveUser from '../../assets/icons/remove_user.svg?react';
221
221
  import AddToArchive from '../../assets/icons/add_archive.svg?react';
222
222
  import DashboardIcon from '../../assets/icons/dashboard_icon.svg?react'; //TODO:this is temporary icon
223
223
  import InfoUser from '../../assets/icons/info_user.svg?react';
224
+ import WebServiceIcon from '../../assets/icons/web_service_icon.svg?react';
224
225
 
225
226
  Components['success'] = ToastSuccessIcon;
226
227
  Components['alert'] = Alert;
228
+ Components['alert'] = Alert;
227
229
  Components['delete_info'] = DeleteInfoIcon;
228
230
  Components['warning'] = WarningIcon;
229
231
  Components['toast_info'] = ToastInfoIcon;
@@ -266,7 +268,7 @@ Components['details'] = DetailsIcon;
266
268
  Components['impactList'] = ImpactListIcon;
267
269
  Components['beautify_icon'] = BeautifyIcon;
268
270
  Components['add_variable'] = AddVariable;
269
-
271
+ Components['replace_file'] = ReplaceFile;
270
272
  Components['formate_painter'] = FormatePainter;
271
273
  Components['bold'] = Bold;
272
274
  Components['italic'] = Italic;
@@ -286,7 +288,7 @@ Components['text_color'] = TextColor;
286
288
  Components['fill_color'] = FillColor;
287
289
  Components['formula_icon'] = FormulaIcon;
288
290
  Components['excel_corner_menu'] = ExcelCornerMenu;
289
-
291
+ Components['export'] = Export;
290
292
  Components['apk_file_type'] = ApkFileType;
291
293
  Components['csv_file_type'] = CsvFileType;
292
294
  Components['compressed_file_type'] = CompressedFileType;
@@ -301,7 +303,7 @@ Components['ipk_file_type'] = IpkFileType;
301
303
  Components['txt_file_type'] = TxtFileType;
302
304
  Components['gif_file_type'] = GifFileType;
303
305
  Components['jpg_file_type'] = JpgFileType;
304
-
306
+ Components['import'] = Import;
305
307
  Components['info'] = InfoIcon;
306
308
  Components['calendar_icon'] = CalendarIcon;
307
309
  Components['hide_icon'] = HideIcon;
@@ -424,6 +426,7 @@ Components['run_manual_testcase'] = RunManualTestcaseIcon;
424
426
  Components['run_automation_scripts'] = RunAutomationScriptsIcon;
425
427
  Components['eye_open_icon'] = EyeOpenIcon;
426
428
  Components['replace_icon'] = ReplaceIcon;
429
+ Components['replace_icon'] = ReplaceIcon;
427
430
  Components['header_preset'] = HeaderPreset;
428
431
  Components['project_element'] = ProjectElement;
429
432
  Components['element'] = Element;
@@ -436,7 +439,8 @@ Components['no_data'] = NoData;
436
439
  Components['add_user'] = AddUser;
437
440
  Components['add_to_archive'] = AddToArchive;
438
441
  Components['remove_user'] = RemoveUser;
439
- Components['dashboard_icon'] = DashboardIcon;//TODO:this is temporary icon
442
+ Components['dashboard_icon'] = DashboardIcon; //TODO:this is temporary icon
440
443
  Components['info_user'] = InfoUser;
444
+ Components['web_service_icon'] = WebServiceIcon;
441
445
 
442
446
  export default Components;
@@ -13,7 +13,7 @@
13
13
  border-radius: 4px;
14
14
  display: flex;
15
15
  align-items: center;
16
- justify-content: space-around;
16
+ justify-content: space-between;
17
17
 
18
18
  .ff-machine-icon-text-wrapper,
19
19
  .ff-machine-icon-text-wrapper-reverse {
@@ -23,8 +23,21 @@
23
23
  .ff-machine-icon {
24
24
  margin-left: 4px;
25
25
  }
26
+
27
+ .ff-machine-text-reverse,
28
+ .ff-machine-text {
29
+ overflow: hidden;
30
+ white-space: nowrap;
31
+ text-overflow: ellipsis;
32
+ min-width: 30px;
33
+ max-width: 70px;
34
+ }
35
+
36
+ .ff-machine-text-reverse {
37
+ direction: ltr;
38
+ }
26
39
  }
27
-
40
+
28
41
  .ff-machine-icon-text-wrapper-reverse {
29
42
  flex-direction: row-reverse;
30
43
  }
@@ -18,10 +18,19 @@ const MachineInputField = forwardRef<HTMLDivElement, MachineInputFieldProps>(
18
18
  ref
19
19
  ) => {
20
20
  const getIcon: Record<MachineType['type'], string> = {
21
- Local: 'browser_stack_icon',
21
+ Local: 'local',
22
+ Browserstack: 'browserstack_icon',
23
+ SauceLabs: 'sause_lab',
24
+ LambdaTest: 'lambda_icon',
22
25
  mac: 'mac_icon',
23
26
  android: 'android_icon',
27
+ linux: 'linux',
24
28
  'Google Chrome': 'chrome_icon',
29
+ 'Mozilla Firefox': 'fire_fox',
30
+ 'Microsoft Edge': 'edge',
31
+ 'Internet Explorer': 'internet_explorer',
32
+ Safari: 'safari_icon',
33
+ Opera: 'opera',
25
34
  };
26
35
 
27
36
  return (
@@ -53,9 +62,14 @@ const MachineInputField = forwardRef<HTMLDivElement, MachineInputFieldProps>(
53
62
  'ff-machine-icon-text-wrapper-reverse': contentReverse,
54
63
  })}
55
64
  >
56
- <Icon name={getIcon[type]} className="ff-machine-icon" />
65
+ <Icon
66
+ name={getIcon[type] || 'local'}
67
+ className="ff-machine-icon"
68
+ />
57
69
  <Typography
58
- className="ff-machine-text"
70
+ className={classNames('ff-machine-text', {
71
+ 'ff-machine-text-reverse': contentReverse,
72
+ })}
59
73
  color="var(--ff-machine-input-field-text-color)"
60
74
  >
61
75
  {label}
@@ -1,5 +1,5 @@
1
1
  export interface MachineType {
2
- type: 'Local' | 'mac' | 'android' | 'Google Chrome';
2
+ type: string;
3
3
  label: string;
4
4
  }
5
5
 
@@ -91,15 +91,19 @@ const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
91
91
  role="option"
92
92
  className={`dropdown-option-container`}
93
93
  key={getLabel(info, labelAccessor)}
94
- onClick={() =>
95
- !info?.isDisabled && handleOptionChange(info, !info.isChecked)
94
+ onClick={(e:React.MouseEvent<HTMLDivElement>) =>{
95
+ const target = e.target as HTMLInputElement;
96
+ if(target.type==='checkbox'){
97
+ return
98
+ }
99
+ !info?.isDisabled && handleOptionChange(info, !info.isChecked);
100
+ }
96
101
  }
97
102
  >
98
103
  <Checkbox
99
104
  checked={info.isChecked}
100
105
  disabled={info?.isDisabled}
101
106
  />
102
-
103
107
  <Tooltip
104
108
  zIndex={zIndex + 1}
105
109
  title={
@@ -87,7 +87,7 @@ export const Default3: Story = {
87
87
  };
88
88
  export const EmailGroup: Story = {
89
89
  render: () => {
90
- const [options] = useState([
90
+ const [options,setOptions] = useState([
91
91
  {
92
92
  label: 'Sample1@gmail.com',
93
93
  value: 'sample1@gmail.com',
@@ -109,6 +109,10 @@ export const EmailGroup: Story = {
109
109
  ) => {
110
110
  setSelectedOptions(options);
111
111
  };
112
+ const onEnter=(newOption:string)=>{
113
+ setOptions(prev=>[...prev,{label:newOption,value:newOption}])
114
+ setSelectedOptions(prev=>[...prev,{label:newOption,value:newOption}])
115
+ }
112
116
  return (
113
117
  <MultiSelect
114
118
  label={'Enter Email'}
@@ -120,6 +124,7 @@ export const EmailGroup: Story = {
120
124
  acceptNewOption={true}
121
125
  displayCount={true}
122
126
  labelAccessor="label"
127
+ onEnter={onEnter}
123
128
  />
124
129
  );
125
130
  },
@@ -76,8 +76,9 @@ const MultiSelect = ({
76
76
  highlightedMachine = '',
77
77
  onSelectButtonClick = () => {},
78
78
  labelAccessor = '',
79
- valueAccessor = '',
79
+ valueAccessor = labelAccessor,
80
80
  withSelectButton = variant === 'machines' ? true : false,
81
+ onEnter=()=>{}
81
82
  }: MultiSelectProps) => {
82
83
  const [isOpen, setIsOpen] = useState<boolean>(false);
83
84
  const [allOptions, setAllOptions] = useState(options);
@@ -168,25 +169,8 @@ const MultiSelect = ({
168
169
  return;
169
170
  }
170
171
  }
171
-
172
- const newOption = {
173
- [labelAccessor]: searchedKeyword,
174
- [valueAccessor]: searchedKeyword.toLowerCase(),
175
- isChecked: true,
176
- };
177
- const filteredOptions = [...allOptions].filter(
178
- (option) => option.isChecked === true
179
- );
180
-
181
- setAllOptions([...allOptions, newOption]);
172
+ onEnter?.(searchedKeyword)
182
173
  setSearchedKeyword('');
183
- onChange?.([
184
- ...filteredOptions,
185
- {
186
- [labelAccessor]: searchedKeyword,
187
- [valueAccessor]: searchedKeyword.toLocaleLowerCase(),
188
- },
189
- ]);
190
174
  setIsOpen(false);
191
175
  }
192
176
  };
@@ -447,7 +431,7 @@ const MultiSelect = ({
447
431
  className="error-text"
448
432
  />
449
433
  )}
450
- {displayIcon && (
434
+ {displayIcon && variant==='labels' && (
451
435
  <Typography
452
436
  onClick={onManageLabelsClick}
453
437
  fontSize={8}