pixel-react 1.10.4 → 1.10.6

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 (153) hide show
  1. package/lib/ComponentProps/TreeNodeProps.d.ts +2 -1
  2. package/lib/components/AddResourceButton/AddResourceButton.d.ts +4 -0
  3. package/lib/components/AddResourceButton/ArrowsButton/ArrowsButton.d.ts +1 -1
  4. package/lib/components/AddResourceButton/index.d.ts +1 -1
  5. package/lib/components/AddResourceButton/type.d.ts +2 -0
  6. package/lib/components/BrowserTabs/BrowserTabs.d.ts +5 -0
  7. package/lib/components/BrowserTabs/index.d.ts +1 -0
  8. package/lib/components/BrowserTabs/types.d.ts +64 -0
  9. package/lib/components/ConnectingBranch/data.d.ts +62 -64
  10. package/lib/components/ConnectingBranch/types.d.ts +28 -7
  11. package/lib/components/Excel/ExcelFile/ExcelFile.d.ts +6 -1
  12. package/lib/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.d.ts +3 -0
  13. package/lib/components/Excel/ExcelFile/ExcelFileComponents/actions.d.ts +15 -1
  14. package/lib/components/Excel/ExcelFile/ExcelFileComponents/types.d.ts +5 -0
  15. package/lib/components/Excel/Types.d.ts +1 -0
  16. package/lib/components/MenuOption/MenuOption.d.ts +1 -1
  17. package/lib/components/MenuOption/types.d.ts +1 -0
  18. package/lib/components/MiniModal/types.d.ts +2 -1
  19. package/lib/components/Select/components/types.d.ts +6 -1
  20. package/lib/components/Select/types.d.ts +17 -0
  21. package/lib/components/Table/Table.d.ts +1 -1
  22. package/lib/components/Table/Types.d.ts +1 -0
  23. package/lib/components/TableTree/Components/TableCell.d.ts +1 -1
  24. package/lib/components/TableTree/Components/TableRow.d.ts +1 -1
  25. package/lib/components/TableTree/types.d.ts +4 -3
  26. package/lib/index.d.ts +127 -13
  27. package/lib/index.esm.js +992 -462
  28. package/lib/index.esm.js.map +1 -1
  29. package/lib/index.js +993 -462
  30. package/lib/index.js.map +1 -1
  31. package/lib/tsconfig.tsbuildinfo +1 -1
  32. package/package.json +1 -1
  33. package/src/ComponentProps/TreeNodeProps.ts +2 -1
  34. package/src/assets/Themes/BaseTheme.scss +1 -2
  35. package/src/assets/Themes/DarkTheme.scss +0 -1
  36. package/src/assets/styles/_mixins.scss +19 -0
  37. package/src/components/AddResourceButton/{AddButton.scss → AddResourceButton.scss} +1 -0
  38. package/src/components/AddResourceButton/{AddButton.stories.tsx → AddResourceButton.stories.tsx} +4 -4
  39. package/src/components/AddResourceButton/{AddButton.tsx → AddResourceButton.tsx} +25 -10
  40. package/src/components/AddResourceButton/ArrowsButton/ArrowsButton.scss +1 -2
  41. package/src/components/AddResourceButton/ArrowsButton/ArrowsButton.tsx +16 -9
  42. package/src/components/AddResourceButton/index.ts +1 -1
  43. package/src/components/AddResourceButton/type.ts +2 -0
  44. package/src/components/BrowserTabs/BrowserTabs.scss +75 -0
  45. package/src/components/BrowserTabs/BrowserTabs.stories.tsx +366 -0
  46. package/src/components/BrowserTabs/BrowserTabs.tsx +128 -0
  47. package/src/components/BrowserTabs/index.ts +1 -0
  48. package/src/components/BrowserTabs/types.ts +73 -0
  49. package/src/components/ConnectingBranch/BranchComponents/MachineInstances.tsx +54 -39
  50. package/src/components/ConnectingBranch/ConnectingBranch.stories.tsx +3 -2
  51. package/src/components/ConnectingBranch/ConnectingBranch.tsx +28 -24
  52. package/src/components/ConnectingBranch/data.tsx +207 -213
  53. package/src/components/ConnectingBranch/types.ts +26 -17
  54. package/src/components/Excel/ColorBarSelector/ColorBarSelector.tsx +1 -1
  55. package/src/components/Excel/ExcelFile/ExcelFile.scss +4 -0
  56. package/src/components/Excel/ExcelFile/ExcelFile.tsx +35 -16
  57. package/src/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.tsx +14 -3
  58. package/src/components/Excel/ExcelFile/ExcelFileComponents/DataEditor.tsx +1 -0
  59. package/src/components/Excel/ExcelFile/ExcelFileComponents/RowIndicator.tsx +16 -5
  60. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +12 -1
  61. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx +31 -5
  62. package/src/components/Excel/ExcelFile/ExcelFileComponents/actions.ts +30 -0
  63. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +47 -0
  64. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +4 -4
  65. package/src/components/Excel/ExcelFile/ExcelFileComponents/types.ts +6 -0
  66. package/src/components/Excel/ExcelFile.stories.tsx +10 -2
  67. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +11 -11
  68. package/src/components/Excel/Types.ts +1 -0
  69. package/src/components/Excel/dataConversion.ts +17 -19
  70. package/src/components/MenuOption/MenuOption.tsx +4 -0
  71. package/src/components/MenuOption/types.ts +1 -0
  72. package/src/components/MiniModal/MiniModal.scss +8 -0
  73. package/src/components/MiniModal/MiniModal.stories.tsx +60 -0
  74. package/src/components/MiniModal/types.ts +2 -1
  75. package/src/components/Select/Select.stories.tsx +43 -1
  76. package/src/components/Select/Select.tsx +16 -1
  77. package/src/components/Select/components/Dropdown.scss +41 -1
  78. package/src/components/Select/components/Dropdown.tsx +52 -6
  79. package/src/components/Select/components/types.ts +7 -2
  80. package/src/components/Select/types.ts +22 -0
  81. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.tsx +8 -2
  82. package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +1 -1
  83. package/src/components/SequentialConnectingBranch/components/DatasetTooltip/DataSetTooltip.scss +14 -0
  84. package/src/components/SequentialConnectingBranch/components/DatasetTooltip/DataSetTooltip.tsx +6 -11
  85. package/src/components/Table/Table.stories.tsx +1 -1
  86. package/src/components/Table/Table.tsx +55 -4
  87. package/src/components/Table/Types.ts +4 -1
  88. package/src/components/TableTree/Components/TableCell.tsx +25 -10
  89. package/src/components/TableTree/Components/TableHead.tsx +5 -5
  90. package/src/components/TableTree/Components/TableRow.tsx +27 -24
  91. package/src/components/TableTree/TableTree.scss +89 -69
  92. package/src/components/TableTree/TableTree.stories.tsx +66 -2
  93. package/src/components/TableTree/types.ts +4 -3
  94. package/src/index.ts +2 -0
  95. package/src/utils/getTreeDetails/getTreeDetails.ts +8 -7
  96. package/lib/StyleGuide/ColorPalette/ColorPalette.stories.d.ts +0 -6
  97. package/lib/StyleGuide/Typography/Typography.stories.d.ts +0 -6
  98. package/lib/components/Accordion/Accordion.stories.d.ts +0 -6
  99. package/lib/components/AddResourceButton/AddButton.stories.d.ts +0 -8
  100. package/lib/components/Button/Button.stories.d.ts +0 -12
  101. package/lib/components/Charts/DonutChart/DonutChart.stories.d.ts +0 -6
  102. package/lib/components/Charts/RadialChart/RadialChart.stories.d.ts +0 -6
  103. package/lib/components/Checkbox/Checkbox.stories.d.ts +0 -8
  104. package/lib/components/Chip/Chip.stories.d.ts +0 -14
  105. package/lib/components/DatePicker/DatePicker.stories.d.ts +0 -9
  106. package/lib/components/DragAndDrop/DragAndDrop.stories.d.ts +0 -6
  107. package/lib/components/Drawer/Drawer.stories.d.ts +0 -7
  108. package/lib/components/ExpandableMenu/ExpandableMenu.stories.d.ts +0 -7
  109. package/lib/components/FileDropzone/FileDropzone.stories.d.ts +0 -8
  110. package/lib/components/Form/Form.stories.d.ts +0 -6
  111. package/lib/components/GridLayout/GridLayout.stories.d.ts +0 -8
  112. package/lib/components/HighlightText/HighlightText.stories.d.ts +0 -6
  113. package/lib/components/Icon/Icon.stories.d.ts +0 -7
  114. package/lib/components/IconButton/IconButton.stories.d.ts +0 -6
  115. package/lib/components/Input/Input.stories.d.ts +0 -9
  116. package/lib/components/InputWithDropdown/InputWithDropdown.stories.d.ts +0 -9
  117. package/lib/components/LazyLoad/LazyLoad.stories.d.ts +0 -6
  118. package/lib/components/MenuOption/MenuOption.stories.d.ts +0 -15
  119. package/lib/components/MiniModal/MiniModal.stories.d.ts +0 -9
  120. package/lib/components/Modal/Modal.stories.d.ts +0 -7
  121. package/lib/components/MultiSelect/MultiSelect.stories.d.ts +0 -9
  122. package/lib/components/RadioButton/RadioButton.stories.d.ts +0 -10
  123. package/lib/components/RadioGroup/RadioGroup.stories.d.ts +0 -8
  124. package/lib/components/Search/Search.stories.d.ts +0 -6
  125. package/lib/components/Select/Select.stories.d.ts +0 -13
  126. package/lib/components/Select/components/Dropdown/Dropdown.d.ts +0 -4
  127. package/lib/components/Select/components/Dropdown/dropdownTypes.d.ts +0 -15
  128. package/lib/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.d.ts +0 -4
  129. package/lib/components/SequentialConnectingBranch/components/AddBrowserModal/types.d.ts +0 -3
  130. package/lib/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.d.ts +0 -4
  131. package/lib/components/SequentialConnectingBranch/components/DatasetListModal/types.d.ts +0 -3
  132. package/lib/components/StateDropdown/StateDropdown.stories.d.ts +0 -10
  133. package/lib/components/StatusButton/StatusButton.stories.d.ts +0 -14
  134. package/lib/components/Table/Table.stories.d.ts +0 -11
  135. package/lib/components/TableTree/TableTree.stories.d.ts +0 -7
  136. package/lib/components/Tabs/Tabs.stories.d.ts +0 -9
  137. package/lib/components/TextArea/Textarea.stories.d.ts +0 -9
  138. package/lib/components/ThemeProvider/CustomThemeProvider.d.ts +0 -8
  139. package/lib/components/Toast/Toast.stories.d.ts +0 -6
  140. package/lib/components/Toggle/Toggle.stories.d.ts +0 -12
  141. package/lib/components/Tooltip/Tooltip.stories.d.ts +0 -15
  142. package/lib/components/Typography/Typography.stories.d.ts +0 -10
  143. package/lib/hooks/useCustomThemeProvider.d.ts +0 -11
  144. package/lib/utils/checkEmpty/checkEmpty.stories.d.ts +0 -6
  145. package/lib/utils/compareArrays/compareArrays.stories.d.ts +0 -6
  146. package/lib/utils/compareObjects/compareObjects.stories.d.ts +0 -6
  147. package/lib/utils/debounce/debounce.stories.d.ts +0 -6
  148. package/lib/utils/ffID/ffID.stories.d.ts +0 -6
  149. package/lib/utils/find/findAndInsert.d.ts +0 -7
  150. package/lib/utils/find/findAndInsert.stories.d.ts +0 -7
  151. package/lib/utils/getExtension/getExtension.stories.d.ts +0 -6
  152. package/lib/utils/throttle/throttle.stories.d.ts +0 -6
  153. package/lib/utils/truncateText/truncateText.stories.d.ts +0 -6
@@ -0,0 +1,366 @@
1
+ import React, { useState } from 'react';
2
+ import { Meta, StoryObj } from '@storybook/react';
3
+ import BrowserTabs from './BrowserTabs';
4
+ import Typography from '../Typography';
5
+
6
+ const meta: Meta<typeof BrowserTabs> = {
7
+ title: 'Components/BrowserTabs',
8
+ component: BrowserTabs,
9
+ parameters: {
10
+ layout: 'centered',
11
+ },
12
+ tags: ['autodocs'],
13
+ };
14
+
15
+ type Story = StoryObj<typeof BrowserTabs>;
16
+
17
+ const TabContentOne = () => (
18
+ <div>
19
+ <Typography as="h1" fontSize={32} fontWeight="bold">
20
+ Google
21
+ </Typography>
22
+ <Typography as="p">Search anything</Typography>
23
+ </div>
24
+ );
25
+
26
+ const TabContentTwo = () => (
27
+ <div>
28
+ <Typography as="h1" fontSize={32} fontWeight="bold">
29
+ Flipkart
30
+ </Typography>
31
+ <Typography as="p">Shop Now!</Typography>
32
+ </div>
33
+ );
34
+
35
+ const TabContentThree = () => (
36
+ <div>
37
+ <Typography as="h1" fontSize={32} fontWeight="bold">
38
+ Fireflink
39
+ </Typography>
40
+ <Typography as="p">Automate your scripts</Typography>
41
+ </div>
42
+ );
43
+
44
+ const TabContentFour = () => (
45
+ <div>
46
+ <Typography as="h1" fontSize={32} fontWeight="bold">
47
+ Tab--4
48
+ </Typography>
49
+ <Typography as="p">This is the content for Tab - 4</Typography>
50
+ </div>
51
+ );
52
+
53
+ const tabsData = [
54
+ {
55
+ id: 'tab-11',
56
+ label: 'Google',
57
+ component: <TabContentOne />,
58
+ tabIcon: 'manage_apps',
59
+ },
60
+ {
61
+ id: 'tab-2',
62
+ label: 'gitlab',
63
+ component: <TabContentTwo />,
64
+ tabIcon: 'gitlab',
65
+ },
66
+ {
67
+ id: 'tab-3',
68
+ label: 'Fireflink',
69
+ component: <TabContentThree />,
70
+ tabIcon: 'moon_stars_icon',
71
+ },
72
+ ];
73
+
74
+ export const DefaultTabs: Story = {
75
+ render: () => {
76
+ const [activeTabIdDefault, setActiveTabIdDefault] =
77
+ useState<string>('tab-11');
78
+
79
+ return (
80
+ <div>
81
+ <BrowserTabs
82
+ tabsData={tabsData}
83
+ activeTabId={activeTabIdDefault}
84
+ onTabClick={setActiveTabIdDefault}
85
+ />
86
+ </div>
87
+ );
88
+ },
89
+ };
90
+
91
+ const multipleData = [
92
+ {
93
+ id: 'tab-1',
94
+ label: 'Google',
95
+ component: <TabContentOne />,
96
+ tabIcon: 'manage_apps',
97
+ },
98
+ {
99
+ id: 'tab-2',
100
+ label: 'Flipkart',
101
+ component: <TabContentTwo />,
102
+ tabIcon: 'web_service_icon',
103
+ },
104
+ {
105
+ id: 'tab-3',
106
+ label: 'Fireflink',
107
+ component: <TabContentThree />,
108
+ tabIcon: 'moon_stars_icon',
109
+ },
110
+ {
111
+ id: 'tab-4',
112
+ label: 'javascript',
113
+ component: <TabContentOne />,
114
+ tabIcon: 'javascript',
115
+ },
116
+ {
117
+ id: 'tab-5',
118
+ label: 'slack',
119
+ component: <TabContentTwo />,
120
+ tabIcon: 'slack',
121
+ },
122
+ {
123
+ id: 'tab-6',
124
+ label: 'Fireflink',
125
+ component: <TabContentThree />,
126
+ tabIcon: 'moon_stars_icon',
127
+ },
128
+ {
129
+ id: 'tab-7',
130
+ label: 'Yahoo',
131
+ component: <TabContentOne />,
132
+ tabIcon: 'manage_apps',
133
+ },
134
+ {
135
+ id: 'tab-8',
136
+ label: 'Chrome',
137
+ component: <TabContentTwo />,
138
+ tabIcon: 'chrome_icon',
139
+ },
140
+ {
141
+ id: 'tab-9',
142
+ label: 'jenkins',
143
+ component: <TabContentThree />,
144
+ tabIcon: 'jenkins',
145
+ },
146
+ {
147
+ id: 'tab-10',
148
+ label: 'java',
149
+ component: <TabContentOne />,
150
+ tabIcon: 'java',
151
+ },
152
+ {
153
+ id: 'tab-11',
154
+ label: 'github',
155
+ component: <TabContentTwo />,
156
+ tabIcon: 'github',
157
+ },
158
+ {
159
+ id: 'tab-12',
160
+ label: 'Fireflink',
161
+ component: <TabContentThree />,
162
+ tabIcon: 'moon_stars_icon',
163
+ },
164
+ {
165
+ id: 'tab-13',
166
+ label: 'Yahoo',
167
+ component: <TabContentOne />,
168
+ tabIcon: 'manage_apps',
169
+ },
170
+ {
171
+ id: 'tab-14',
172
+ label: 'slack',
173
+ component: <TabContentTwo />,
174
+ tabIcon: 'slack',
175
+ },
176
+ {
177
+ id: 'tab-15',
178
+ label: 'jenkins',
179
+ component: <TabContentThree />,
180
+ tabIcon: 'jenkins',
181
+ },
182
+ {
183
+ id: 'tab-16',
184
+ label: 'csharp',
185
+ component: <TabContentOne />,
186
+ tabIcon: 'csharp',
187
+ },
188
+ {
189
+ id: 'tab-17',
190
+ label: 'gitlab',
191
+ component: <TabContentTwo />,
192
+ tabIcon: 'gitlab',
193
+ },
194
+ {
195
+ id: 'tab-18',
196
+ label: 'Fireflink',
197
+ component: <TabContentThree />,
198
+ tabIcon: 'moon_stars_icon',
199
+ },
200
+ {
201
+ id: 'tab-19',
202
+ label: 'Google',
203
+ component: <TabContentOne />,
204
+ tabIcon: 'manage_apps',
205
+ },
206
+ {
207
+ id: 'tab-20',
208
+ label: 'Chrome',
209
+ component: <TabContentTwo />,
210
+ tabIcon: 'chrome_icon',
211
+ },
212
+ {
213
+ id: 'tab-21',
214
+ label: 'jira',
215
+ component: <TabContentThree />,
216
+ tabIcon: 'jira_logo',
217
+ },
218
+ {
219
+ id: 'tab-22',
220
+ label: 'bitbucket',
221
+ component: <TabContentOne />,
222
+ tabIcon: 'bitbucket',
223
+ },
224
+ {
225
+ id: 'tab-23',
226
+ label: 'slack',
227
+ component: <TabContentTwo />,
228
+ tabIcon: 'slack',
229
+ },
230
+ {
231
+ id: 'tab-24',
232
+ label: 'Amazon',
233
+ component: <TabContentThree />,
234
+ tabIcon: 'moon_stars_icon',
235
+ },
236
+ {
237
+ id: 'tab-25',
238
+ label: 'Google',
239
+ component: <TabContentOne />,
240
+ tabIcon: 'manage_apps',
241
+ },
242
+ {
243
+ id: 'tab-26',
244
+ label: 'Chrome',
245
+ component: <TabContentTwo />,
246
+ tabIcon: 'chrome_icon',
247
+ },
248
+ {
249
+ id: 'tab-27',
250
+ label: 'jira',
251
+ component: <TabContentThree />,
252
+ tabIcon: 'jira_logo',
253
+ },
254
+ {
255
+ id: 'tab-28',
256
+ label: 'azure',
257
+ component: <TabContentOne />,
258
+ tabIcon: 'azure',
259
+ },
260
+ {
261
+ id: 'tab-29',
262
+ label: 'gitlab',
263
+ component: <TabContentTwo />,
264
+ tabIcon: 'gitlab',
265
+ },
266
+ {
267
+ id: 'tab-30',
268
+ label: 'jira',
269
+ component: <TabContentThree />,
270
+ tabIcon: 'jira_logo',
271
+ },
272
+ {
273
+ id: 'tab-31',
274
+ label: 'Yahoo',
275
+ component: <TabContentOne />,
276
+ tabIcon: 'manage_apps',
277
+ },
278
+ {
279
+ id: 'tab-32',
280
+ label: 'slack',
281
+ component: <TabContentTwo />,
282
+ tabIcon: 'slack',
283
+ },
284
+ {
285
+ id: 'tab-33',
286
+ label: 'python',
287
+ component: <TabContentThree />,
288
+ tabIcon: 'python',
289
+ },
290
+ {
291
+ id: 'tab-24',
292
+ label: 'Amazon',
293
+ component: <TabContentThree />,
294
+ tabIcon: 'moon_stars_icon',
295
+ },
296
+ {
297
+ id: 'tab-25',
298
+ label: 'linux',
299
+ component: <TabContentOne />,
300
+ tabIcon: 'linux',
301
+ },
302
+ {
303
+ id: 'tab-26',
304
+ label: 'github',
305
+ component: <TabContentTwo />,
306
+ tabIcon: 'github',
307
+ },
308
+ {
309
+ id: 'tab-27',
310
+ label: 'fire',
311
+ component: <TabContentThree />,
312
+ tabIcon: 'moon_stars_icon',
313
+ },
314
+ {
315
+ id: 'tab-28',
316
+ label: 'Amazon',
317
+ component: <TabContentOne />,
318
+ tabIcon: 'manage_apps',
319
+ },
320
+ {
321
+ id: 'tab-29',
322
+ label: 'Chrome',
323
+ component: <TabContentTwo />,
324
+ tabIcon: 'chrome_icon',
325
+ },
326
+ {
327
+ id: 'tab-30',
328
+ label: 'Amazon',
329
+ component: <TabContentThree />,
330
+ tabIcon: 'moon_stars_icon',
331
+ },
332
+ {
333
+ id: 'tab-31',
334
+ label: 'browserstack',
335
+ component: <TabContentOne />,
336
+ tabIcon: 'browserstack_icon',
337
+ },
338
+ {
339
+ id: 'tab-32',
340
+ label: 'gitlab',
341
+ component: <TabContentTwo />,
342
+ tabIcon: 'gitlab',
343
+ },
344
+ {
345
+ id: 'tab-33',
346
+ label: 'vikas',
347
+ component: <TabContentThree />,
348
+ tabIcon: 'moon_stars_icon',
349
+ },
350
+ ];
351
+
352
+ export const MultipleTabs: Story = {
353
+ render: () => {
354
+ const [activeTabIdDefault, setActiveTabIdDefault] = useState<string>('tab-11');
355
+
356
+ return (
357
+ <BrowserTabs
358
+ tabsData={multipleData}
359
+ activeTabId={activeTabIdDefault}
360
+ onTabClick={setActiveTabIdDefault}
361
+ />
362
+ );
363
+ },
364
+ };
365
+
366
+ export default meta;
@@ -0,0 +1,128 @@
1
+ import { useRef, useState, useEffect } from 'react';
2
+ import classNames from 'classnames';
3
+ import { BrowserTabsProps } from './types';
4
+ import Icon from '../Icon';
5
+ import Typography from '../Typography';
6
+ import Tooltip from '../Tooltip';
7
+ import './BrowserTabs.scss';
8
+ import '../../assets/styles/_colors.scss';
9
+
10
+ const BrowserTabs = ({
11
+ tabsData,
12
+ activeTabId,
13
+ onTabClick,
14
+ onTabClose,
15
+ onTabAdd,
16
+ maxTabWidth = 132,
17
+ showCloseOnActive = true,
18
+ }: BrowserTabsProps) => {
19
+ const containerRef = useRef<HTMLDivElement>(null);
20
+ const [tabWidth, setTabWidth] = useState<number>();
21
+
22
+ useEffect(() => {
23
+ const updateTabWidth = () => {
24
+ if (containerRef.current) {
25
+ const containerWidth =
26
+ containerRef.current.getBoundingClientRect().width;
27
+ const calculatedWidth = containerWidth / tabsData.length;
28
+ setTabWidth(Math.min(maxTabWidth, calculatedWidth));
29
+ }
30
+ };
31
+
32
+ updateTabWidth();
33
+ window.addEventListener('resize', updateTabWidth);
34
+
35
+ return () => window.removeEventListener('resize', updateTabWidth);
36
+ }, [tabsData.length, maxTabWidth]);
37
+
38
+ return (
39
+ <div className="ff-browser-tabs-container" ref={containerRef}>
40
+ <div className="ff-browser-tab-row">
41
+ <div className="ff-tab-button-container">
42
+ {tabsData.map((tab, index) => {
43
+ const isActive = activeTabId === tab.id;
44
+ const isTabTooSmall = tabWidth && tabWidth < 80;
45
+ return (
46
+ <div
47
+ key={tab.id}
48
+ className={classNames('ff-tab-wrapper', { active: isActive })}
49
+ >
50
+ <Tooltip title={isTabTooSmall ? tab.label : ''}>
51
+ <button
52
+ onClick={() => onTabClick(tab.id)}
53
+ className="ff-tab-button"
54
+ style={{
55
+ width: tabWidth ? `${tabWidth}px` : 'auto',
56
+ padding: tabWidth && tabWidth < 80 ? ' 0px' : '0px 8px',
57
+ }}
58
+ >
59
+ <div className="ff-tab-content">
60
+ {tabWidth &&
61
+ tabWidth >= 20 &&
62
+ (!isActive || tabWidth >= 80) && (
63
+ <Icon
64
+ name={tab.tabIcon}
65
+ hoverEffect={false}
66
+ color="inherit"
67
+ />
68
+ )}
69
+
70
+ {tabWidth && tabWidth > 40 && (
71
+ <div className="ff-tab-label-container">
72
+ <Typography
73
+ children={tab.label}
74
+ lineHeight="18px"
75
+ fontWeight={isActive ? 'semi-bold' : 'regular'}
76
+ color={
77
+ isActive
78
+ ? 'var(--tabs-label-active-color)'
79
+ : 'var(--tabs-label-default-color)'
80
+ }
81
+ className="ff-tab-label"
82
+ />
83
+ </div>
84
+ )}
85
+
86
+ {((tabWidth && tabWidth >= 80) || isActive) &&
87
+ showCloseOnActive && (
88
+ <Icon
89
+ name="close"
90
+ className="ff-close-icon"
91
+ hoverEffect={false}
92
+ height={10}
93
+ width={10}
94
+ onClick={(e) => {
95
+ e.stopPropagation();
96
+ if (onTabClose) {
97
+ onTabClose(Number(tab.id));
98
+ }
99
+ }}
100
+ />
101
+ )}
102
+ </div>
103
+ </button>
104
+ </Tooltip>
105
+ {isActive ||
106
+ index === tabsData.length - 1 ||
107
+ (activeTabId === tabsData[0]?.id && index === 0) ||
108
+ activeTabId === tabsData[index + 1]?.id ? null : (
109
+ <span
110
+ className="ff-tab-separator"
111
+ style={{
112
+ margin: tabWidth && tabWidth > 80 ? '0 4px' : '0 1px',
113
+ }}
114
+ />
115
+ )}
116
+ </div>
117
+ );
118
+ })}
119
+ </div>
120
+ <div className="ff-tab-plus-icon" onClick={onTabAdd}>
121
+ <Icon name="add_file" color="#71347B" width={10} height={10} />
122
+ </div>
123
+ </div>
124
+ </div>
125
+ );
126
+ };
127
+
128
+ export default BrowserTabs;
@@ -0,0 +1 @@
1
+ export { default } from "./BrowserTabs"
@@ -0,0 +1,73 @@
1
+ /**
2
+ * Represents a single tab in the BrowserTabs component.
3
+ */
4
+ export interface BrowserTab {
5
+ /**
6
+ * Unique identifier for the tab.
7
+ */
8
+ id: string;
9
+
10
+ /**
11
+ * Label text displayed on the tab.
12
+ */
13
+ label: string;
14
+
15
+ /**
16
+ * Optional component to be rendered when the tab is active.
17
+ */
18
+ component?: JSX.Element;
19
+
20
+ /**
21
+ * Name of the tab icon.
22
+ */
23
+ tabIcon: string;
24
+ }
25
+
26
+ /**
27
+ * Props for the BrowserTabs component.
28
+ */
29
+ export interface BrowserTabsProps {
30
+ /**
31
+ * An array of tab objects containing label, icon, and an optional component.
32
+ */
33
+ tabsData: BrowserTab[];
34
+
35
+ /**
36
+ * The ID of the currently active tab.
37
+ */
38
+ activeTabId: string;
39
+
40
+ /**
41
+ * Function to update the active tab state when a user clicks on a tab.
42
+ * @param id - The unique identifier of the clicked tab.
43
+ */
44
+ onTabClick: (id: string) => void;
45
+ /**
46
+ * Function to add a new tab.
47
+ */
48
+ onTabAdd?: () => void;
49
+ /**
50
+ * Function to close a specific tab.
51
+ * @param index - The index of the tab to be closed.
52
+ */
53
+ onTabClose?: (index: number) => void;
54
+ /**
55
+ * Minimum width for each tab (in pixels).
56
+ */
57
+ minTabWidth?: number;
58
+
59
+ /**
60
+ * Maximum width for each tab (in pixels).
61
+ */
62
+ maxTabWidth?: number;
63
+
64
+ /**
65
+ * Show the close button only for the active tab.
66
+ */
67
+ showCloseOnActive?: boolean;
68
+
69
+ /**
70
+ * Custom CSS class name to override default styles.
71
+ */
72
+ className?: string;
73
+ }