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
@@ -10,7 +10,8 @@ import { AddModule } from './AddModule/AddModule';
10
10
  const renderSpaces = (
11
11
  level: number,
12
12
  parentSiblings: boolean[] = [],
13
- isLast?: boolean | undefined
13
+ isLast?: boolean | undefined,
14
+ isContainer?: boolean | undefined
14
15
  ) => {
15
16
  let siblingsArray = parentSiblings;
16
17
  let isLastNode = isLast;
@@ -27,8 +28,10 @@ const renderSpaces = (
27
28
  {siblingsArray?.reverse()?.map((line, i) => (
28
29
  <span
29
30
  key={i}
30
- className={`tree-table-space-block ${!line ? 'no-lines' : ''} ${
31
- isLastNode && i === level - 1 ? 'last-node' : ''
31
+ className={`tree-table-space-block tree-table-space-block-${i} ${
32
+ !line ? 'no-lines' : ''
33
+ } ${isLastNode && i === level - 1 ? 'last-node' : ''} ${
34
+ isContainer ? 'folder' : ''
32
35
  }`}
33
36
  />
34
37
  ))}
@@ -38,19 +41,28 @@ const renderSpaces = (
38
41
 
39
42
  const TableCell = React.memo(
40
43
  ({
44
+ treeRowRef,
41
45
  col,
42
46
  node,
43
47
  selected,
44
48
  select,
45
49
  onCheckBoxChange,
46
50
  onToggleExpand,
47
- index,
48
51
  onAddConfirm,
49
52
  onAddCancel,
50
53
  }: TableCellProps) => (
51
- <td className={`${col.isTree && node.folder ? 'folder' : ''}`}>
54
+ <td
55
+ className={`ff-table-tree-td ${
56
+ col.isTree && node.container ? 'folder' : ''
57
+ }`}
58
+ >
52
59
  {col.isTree &&
53
- renderSpaces(node.hierarchy + 1, node.parentSiblings, node.last)}
60
+ renderSpaces(
61
+ node.hierarchy + 1,
62
+ node.parentSiblings,
63
+ node.lastResource,
64
+ node.container
65
+ )}
54
66
  <div className="tree-title-container">
55
67
  {col.isTree && (
56
68
  <span
@@ -70,7 +82,7 @@ const TableCell = React.memo(
70
82
  )}
71
83
  <span
72
84
  className={`tree-table-td-content ${
73
- col.isTree && node.folder ? 'folder' : ''
85
+ col.isTree && node.container ? 'folder' : ''
74
86
  }`}
75
87
  >
76
88
  {!node?.isNewNode && (
@@ -106,9 +118,12 @@ const TableCell = React.memo(
106
118
  )}
107
119
  </span>
108
120
  </div>
109
-
110
- {col.actions && !node?.isNewNode && (
111
- <div className="table-tree-row-action">{col.actions(node, index)}</div>
121
+ {col.actions && (
122
+ <div className={`table-tree-row-action`}>
123
+ {(() => {
124
+ return col.actions(node, treeRowRef);
125
+ })()}
126
+ </div>
112
127
  )}
113
128
  </td>
114
129
  )
@@ -8,18 +8,18 @@ const TableHead = React.memo(({ columnsData }: TableHeadProps) => {
8
8
  );
9
9
 
10
10
  return (
11
- <thead>
12
- <tr>
11
+ <thead className="ff-table-tree-head">
12
+ <tr className="ff-table-tree-row">
13
13
  {columnsData.map(({ name, width }) => (
14
- <th key={name} style={{ width: width }}>
14
+ <th className="ff-table-tree-th" key={name} style={{ width: width }}>
15
15
  {name}
16
16
  </th>
17
17
  ))}
18
18
  </tr>
19
19
  {hasDefaultValues && (
20
- <tr>
20
+ <tr className="ff-table-tree-row">
21
21
  {columnsData.map(({ defaultValue, defaultActions }, index) => (
22
- <td key={index}>
22
+ <td className="ff-table-tree-td" key={index}>
23
23
  {defaultValue && (
24
24
  <span className="tree-table-default-content">
25
25
  {defaultValue}
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ import React, { useRef } from 'react';
2
2
  import { TableRowProps } from '../types';
3
3
  import TableCell from './TableCell';
4
4
 
@@ -11,31 +11,34 @@ const TableRow = React.memo(
11
11
  onRowClick,
12
12
  onToggleExpand,
13
13
  onCheckBoxChange,
14
- index,
15
14
  onAddConfirm,
16
15
  onAddCancel,
17
- }: TableRowProps) => (
18
- <tr
19
- data-level={node.hierarchy}
20
- className="show"
21
- onClick={(e) => onRowClick(e, node)}
22
- >
23
- {columnsData.map((col) => (
24
- <TableCell
25
- key={col.name}
26
- col={col}
27
- node={node}
28
- selected={selected}
29
- select={select}
30
- onCheckBoxChange={onCheckBoxChange}
31
- onToggleExpand={onToggleExpand}
32
- index={index}
33
- onAddConfirm={onAddConfirm}
34
- onAddCancel={onAddCancel}
35
- />
36
- ))}
37
- </tr>
38
- )
16
+ }: TableRowProps) => {
17
+ const treeRowRef = useRef<HTMLTableRowElement | null>(null);
18
+ return (
19
+ <tr
20
+ data-level={node.hierarchy}
21
+ ref={treeRowRef}
22
+ className="ff-table-tree-row show"
23
+ onClick={(e) => onRowClick(e, node)}
24
+ >
25
+ {columnsData.map((col) => (
26
+ <TableCell
27
+ treeRowRef={treeRowRef}
28
+ key={col.name}
29
+ col={col}
30
+ node={node}
31
+ selected={selected}
32
+ select={select}
33
+ onCheckBoxChange={onCheckBoxChange}
34
+ onToggleExpand={onToggleExpand}
35
+ onAddConfirm={onAddConfirm}
36
+ onAddCancel={onAddCancel}
37
+ />
38
+ ))}
39
+ </tr>
40
+ );
41
+ }
39
42
  );
40
43
 
41
44
  export default TableRow;
@@ -45,7 +45,7 @@
45
45
  width: 8px;
46
46
 
47
47
  &::after {
48
- width: 18px;
48
+ width: 22px;
49
49
  left: -10px;
50
50
  }
51
51
  }
@@ -71,6 +71,18 @@
71
71
  top: -4px;
72
72
  z-index: -1;
73
73
  }
74
+
75
+ &.folder {
76
+ &.last-node::before {
77
+ height: 13px;
78
+ }
79
+ }
80
+ }
81
+
82
+ .tree-title-container {
83
+ .tree-table-space-block {
84
+ width: 16px;
85
+ }
74
86
  }
75
87
 
76
88
  .hidden {
@@ -105,7 +117,8 @@
105
117
  }
106
118
 
107
119
  .table-scrollable {
108
- height: var(--table-height); /* Adjust height as needed */
120
+ height: var(--table-height);
121
+ /* Adjust height as needed */
109
122
  overflow-y: auto;
110
123
  position: relative;
111
124
  }
@@ -114,12 +127,6 @@
114
127
  overflow: scroll;
115
128
  }
116
129
 
117
- tr {
118
- &:hover {
119
- background-color: var(--hover-color);
120
- }
121
- }
122
-
123
130
  .tree-table {
124
131
  // border: 1px solid #f1f1f1;
125
132
  table-layout: fixed;
@@ -127,92 +134,105 @@ tr {
127
134
  border-collapse: collapse;
128
135
  overflow: scroll;
129
136
 
130
- thead {
137
+ .ff-table-tree-head {
131
138
  position: sticky;
132
139
  top: 0;
133
140
  z-index: 2;
134
141
  }
135
142
 
136
- tr {
143
+ .ff-table-tree-row {
137
144
  background-color: var(--base-bg-color);
145
+
138
146
  .table-tree-row-action {
139
147
  display: none;
140
148
  }
141
149
 
142
- // &:hover {
143
- // background-color: var(--hover-color);
144
- // td {
145
- // &:first-child {
146
- // background-color: var(--hover-color);
147
- // }
148
- // }
149
-
150
- .table-tree-row-action {
150
+ .table-row-add-button {
151
151
  display: inline-flex;
152
- align-items: center;
152
+ z-index: 9999;
153
153
  }
154
- }
154
+ &:hover {
155
+ background-color: var(--hover-color);
155
156
 
156
- &::after {
157
- content: '';
158
- display: block;
159
- visibility: hidden;
160
- clear: both;
161
- }
162
- }
157
+ .ff-table-tree-td {
158
+ &:first-child {
159
+ background-color: var(--hover-color);
160
+ }
161
+ }
163
162
 
164
- th,
165
- td {
166
- text-align: left;
167
- white-space: nowrap;
168
- text-overflow: ellipsis;
169
- overflow: hidden;
170
- }
163
+ .table-tree-row-action {
164
+ display: inline-flex;
165
+ align-items: center;
166
+ }
167
+ }
171
168
 
172
- th {
173
- color: var(--brand-color);
174
- background: var(--slider-table-color);
175
- font-size: 13px;
176
- width: 400px;
177
- height: 32px;
178
- box-sizing: border-box;
169
+ &::after {
170
+ content: '';
171
+ display: block;
172
+ visibility: hidden;
173
+ clear: both;
174
+ }
175
+ }
179
176
 
180
- &:first-child {
181
- width: 400px !important;
182
- position: sticky;
183
- left: 0;
177
+ .ff-table-tree-th,
178
+ .ff-table-tree-td {
179
+ text-align: left;
180
+ white-space: nowrap;
181
+ text-overflow: ellipsis;
182
+ overflow: hidden;
184
183
  }
185
- }
186
184
 
187
- td {
188
- font-size: 14px;
189
- color: var(--brand-color);
190
- height: 18px;
185
+ .ff-table-tree-th {
186
+ color: var(--table-header-text-color);
187
+ background: var(--border-color);
188
+ font-size: 12px;
189
+ font-weight: 600;
190
+ width: 400px;
191
+ height: 32px;
192
+ box-sizing: border-box;
193
+
194
+ &:first-child {
195
+ width: 400px !important;
196
+ position: sticky;
197
+ left: 0;
198
+ padding-left: 8px;
199
+ }
200
+ }
191
201
 
192
- &:first-child {
193
- overflow: initial;
194
- position: sticky;
195
- left: 0;
196
- background-color: white;
202
+ .ff-table-tree-td {
203
+ font-size: 12px;
204
+ color: var(--nlp-color);
205
+ height: 18px;
197
206
 
198
- &:hover {
199
- background-color: var(--hover-color);
200
- }
207
+ &:first-child {
208
+ overflow: initial;
209
+ position: sticky;
210
+ left: 0;
211
+ background-color: white;
201
212
 
202
- .tree-table-default-content {
203
- margin-left: 8px;
204
- }
213
+ // &:hover {
214
+ // background-color: var(--hover-color);
215
+ // }
216
+
217
+ .tree-table-default-content {
218
+ margin-left: 8px;
219
+ }
205
220
 
206
- .tree-table-td-content {
207
- padding-left: 4px;
221
+ .tree-table-td-content {
222
+ padding-left: 4px;
208
223
 
209
- .tree-table-td-content-text {
210
- margin-left: 4px;
224
+ .tree-table-td-content-text {
225
+ margin-left: 4px;
226
+ }
227
+ }
228
+ .tree-table-default-content {
229
+ font-weight: 700;
211
230
  }
212
231
  }
213
- }
214
- &.folder {
215
- height: 28px;
232
+
233
+ &.folder {
234
+ height: 28px;
235
+ }
216
236
  }
217
237
  }
218
238
 
@@ -5,6 +5,7 @@ import treeData from './data';
5
5
  import Icon from '../Icon/Icon';
6
6
  import './TableTreeStories.scss';
7
7
  import React, { useState } from 'react';
8
+ import AddResourceButton from '../AddResourceButton/AddResourceButton';
8
9
 
9
10
  const meta: Meta<typeof TableTree> = {
10
11
  title: 'Components/Table tree',
@@ -20,13 +21,76 @@ const colData = [
20
21
  accessor: 'name',
21
22
  width: '400px',
22
23
  isClickable: true,
23
- actions: (row) => {
24
- console.log('🚀 ~ row:', row);
24
+ actions: (row, treeRowRef) => {
25
+ console.log('🚀 ~ row:', row, treeRowRef);
26
+
25
27
  return [
26
28
  <Icon hoverEffect name="file" />,
27
29
  <Icon hoverEffect name="manage_apps" />,
28
30
  <Icon hoverEffect name="dropzone_icon" />,
29
31
  <Icon hoverEffect name="more" />,
32
+ <AddResourceButton
33
+ treeRowRef={treeRowRef}
34
+ directionalArrow={[
35
+ {
36
+ direction: 'top',
37
+ menuOptions: [
38
+ {
39
+ label: 'Module',
40
+ value: 'add_module',
41
+ icon: 'module_icon',
42
+ disable: false,
43
+ },
44
+ ],
45
+ },
46
+ {
47
+ direction: 'right',
48
+ menuOptions: [
49
+ {
50
+ label: 'Sub Module',
51
+ value: 'add_module',
52
+ icon: 'module_icon',
53
+ disable: false,
54
+ },
55
+ {
56
+ label: 'Automation Script',
57
+ value: 'add_module',
58
+ icon: 'module_icon',
59
+ disable: false,
60
+ },
61
+ {
62
+ label: 'Manual Test Case',
63
+ value: 'add_module',
64
+ icon: 'module_icon',
65
+ disable: false,
66
+ },
67
+ {
68
+ label: 'Pre / Post Condition',
69
+ value: 'add_module',
70
+ icon: 'module_icon',
71
+ disable: false,
72
+ },
73
+ {
74
+ label: 'Authorization',
75
+ value: 'add_module',
76
+ icon: 'module_icon',
77
+ disable: false,
78
+ },
79
+ ],
80
+ },
81
+ {
82
+ direction: 'down',
83
+ menuOptions: [
84
+ {
85
+ label: 'Sub Module',
86
+ value: 'sub_module',
87
+ icon: 'module_icon',
88
+ disable: false,
89
+ },
90
+ ],
91
+ },
92
+ ]}
93
+ />,
30
94
  ];
31
95
  },
32
96
  isTree: true,
@@ -4,13 +4,14 @@ import { TreeNodeProps as TreeNode } from '../../ComponentProps/TreeNodeProps';
4
4
  declare type JSX = ReactNode | JSX.Element[] | string | null;
5
5
 
6
6
  export interface TableCellProps {
7
+ treeRowRef?: React.RefObject<any | null>;
7
8
  col: any;
8
9
  node: any;
9
10
  selected: string[];
10
11
  select: string | null;
11
12
  onCheckBoxChange: (e: any, node: string[] | any) => void;
12
13
  onToggleExpand: (node: any) => void;
13
- index: number;
14
+ index?: number;
14
15
  onAddConfirm?: (_name: string) => void;
15
16
  onAddCancel?: () => void;
16
17
  }
@@ -45,7 +46,7 @@ export interface TableRowProps {
45
46
  onRowClick: (e: any, node: any) => void;
46
47
  onToggleExpand: (node: TreeNode) => void;
47
48
  onCheckBoxChange: (e: any, node: string[] | any) => void;
48
- index: number;
49
+ index?: number;
49
50
  onAddConfirm?: (_name: string) => void;
50
51
  onAddCancel?: () => void;
51
52
  }
@@ -56,7 +57,7 @@ export interface Column {
56
57
  width: string;
57
58
  isClickable?: boolean;
58
59
  cell?: (row: any) => JSX;
59
- actions?: (row: any) => JSX;
60
+ actions?: (row: any, treeRowRef?: React.RefObject<any | null>) => JSX;
60
61
  isTree?: boolean;
61
62
  defaultValue?: string;
62
63
  defaultActions?: () => JSX;
package/src/index.ts CHANGED
@@ -32,6 +32,7 @@ import RadioGroup from './components/RadioGroup';
32
32
  import MiniModal from './components/MiniModal';
33
33
  import TableTree from './components/TableTree';
34
34
  import Tabs from './components/Tabs';
35
+ import BrowserTabs from './components/BrowserTabs';
35
36
  import HighlightText from './components/HighlightText';
36
37
  import Checkbox from './components/Checkbox';
37
38
  import Search from './components/Search/Search';
@@ -211,6 +212,7 @@ export {
211
212
  HighlightText,
212
213
  TableTree,
213
214
  Tabs,
215
+ BrowserTabs,
214
216
  Checkbox,
215
217
  Search,
216
218
  DatePicker,
@@ -1,4 +1,5 @@
1
1
  import { TreeNodeProps as TreeNode } from '../../ComponentProps/TreeNodeProps';
2
+ import { checkEmpty } from '../checkEmpty/checkEmpty';
2
3
 
3
4
  export interface TreeDetailsResult {
4
5
  treeDataList: TreeNode[];
@@ -28,7 +29,7 @@ export const getTreeDetails = (
28
29
  case 'expand':
29
30
  case 'collapse':
30
31
  if (typeof index === 'number') {
31
- treeDataList = [...oldData.slice(0, index + 1), ...newData];
32
+ treeDataList = [...oldData.slice(0, index), ...newData];
32
33
  } else {
33
34
  throw new Error(
34
35
  "Index is required for 'expand' or 'collapse' actions."
@@ -36,7 +37,7 @@ export const getTreeDetails = (
36
37
  }
37
38
  break;
38
39
  case 'start':
39
- if (newData.length > 0) {
40
+ if (!checkEmpty(newData)) {
40
41
  root = newData[0];
41
42
  treeDataList = newData.slice(1);
42
43
  } else {
@@ -47,7 +48,7 @@ export const getTreeDetails = (
47
48
  throw new Error(`Invalid action: ${action}`);
48
49
  }
49
50
 
50
- if (treeDataList.length === 0 && action !== 'start') {
51
+ if (checkEmpty(treeDataList) && action !== 'start') {
51
52
  throw new Error('Tree data list is empty.');
52
53
  }
53
54
 
@@ -56,10 +57,10 @@ export const getTreeDetails = (
56
57
 
57
58
  return {
58
59
  treeDataList,
59
- next: !lastNode.lastResource,
60
- previous: !firstNode.lastResource,
61
- startId: firstNode.key,
62
- endId: lastNode.key,
60
+ next: !lastNode?.lastResource,
61
+ previous: !firstNode?.lastResource,
62
+ startId: firstNode?.key,
63
+ endId: lastNode?.key,
63
64
  root,
64
65
  };
65
66
  };
@@ -1,6 +0,0 @@
1
- import type { Meta, StoryObj } from '@storybook/react';
2
- import StyleGuide from './ColorPalette';
3
- declare const meta: Meta<typeof StyleGuide>;
4
- type Story = StoryObj<typeof StyleGuide>;
5
- export declare const ColorList: Story;
6
- export default meta;
@@ -1,6 +0,0 @@
1
- import type { Meta, StoryObj } from '@storybook/react';
2
- import Typography from './Typography';
3
- declare const meta: Meta<typeof Typography>;
4
- type Story = StoryObj<typeof Typography>;
5
- export declare const AllFonts: Story;
6
- export default meta;
@@ -1,6 +0,0 @@
1
- import type { Meta, StoryObj } from '@storybook/react';
2
- import Accordion from './Accordion';
3
- declare const meta: Meta<typeof Accordion>;
4
- type Story = StoryObj<typeof Accordion>;
5
- export declare const SampleAccordion: Story;
6
- export default meta;
@@ -1,8 +0,0 @@
1
- import { Meta, StoryObj } from '@storybook/react';
2
- import AddButton from './AddButton';
3
- declare const meta: Meta<typeof AddButton>;
4
- type Story = StoryObj<typeof AddButton>;
5
- export declare const Default: Story;
6
- export declare const TwoArrowsButtons: Story;
7
- export declare const ThreeArrowsButton: Story;
8
- export default meta;
@@ -1,12 +0,0 @@
1
- import type { Meta, StoryObj } from '@storybook/react';
2
- import Button from './Button';
3
- declare const meta: Meta<typeof Button>;
4
- type Story = StoryObj<typeof Button>;
5
- export declare const Primary: Story;
6
- export declare const Secondary: Story;
7
- export declare const Tertiary: Story;
8
- export declare const Delete: Story;
9
- export declare const PrimaryWithIcon: Story;
10
- export declare const SecondaryWithIcon: Story;
11
- export declare const TertiaryWithIcon: Story;
12
- export default meta;
@@ -1,6 +0,0 @@
1
- import { Meta, StoryObj } from '@storybook/react/*';
2
- import DonutChart from './DonutChart';
3
- declare const meta: Meta<typeof DonutChart>;
4
- export default meta;
5
- type Story = StoryObj<typeof DonutChart>;
6
- export declare const Default: Story;
@@ -1,6 +0,0 @@
1
- import { Meta, StoryObj } from '@storybook/react';
2
- import RadialChart from './RadialChart';
3
- declare const meta: Meta<typeof RadialChart>;
4
- export default meta;
5
- type Story = StoryObj<typeof RadialChart>;
6
- export declare const ChartWithStatus: Story;
@@ -1,8 +0,0 @@
1
- import { Meta, StoryObj } from '@storybook/react';
2
- import Checkbox from './Checkbox';
3
- declare const meta: Meta<typeof Checkbox>;
4
- export default meta;
5
- type Story = StoryObj<typeof meta>;
6
- export declare const Default: Story;
7
- export declare const Partial: Story;
8
- export declare const Controlled: Story;
@@ -1,14 +0,0 @@
1
- import type { Meta, StoryObj } from '@storybook/react';
2
- import Chip from './Chip';
3
- import '../../assets/styles/_colors.scss';
4
- import './Chip.scss';
5
- declare const meta: Meta<typeof Chip>;
6
- type Story = StoryObj<typeof Chip>;
7
- export declare const Primary: Story;
8
- export declare const withoutExpand: Story;
9
- export declare const Group: Story;
10
- export declare const CustomChip: Story;
11
- export declare const Success: Story;
12
- export declare const Errors: Story;
13
- export declare const Warning: Story;
14
- export default meta;
@@ -1,9 +0,0 @@
1
- import type { Meta, StoryObj } from '@storybook/react';
2
- import CustomDatePicker from './DatePicker';
3
- declare const meta: Meta<typeof CustomDatePicker>;
4
- export default meta;
5
- type Story = StoryObj<typeof CustomDatePicker>;
6
- export declare const Default: Story;
7
- export declare const StartDateFilter: Story;
8
- export declare const EndDateInput: Story;
9
- export declare const ScheduleDateInput: Story;
@@ -1,6 +0,0 @@
1
- import { Meta, StoryObj } from '@storybook/react';
2
- import DragAndDropList from './DragAndDropList';
3
- declare const meta: Meta<typeof DragAndDropList>;
4
- type Story = StoryObj<typeof DragAndDropList>;
5
- export declare const Primary: Story;
6
- export default meta;