pixel-react 1.10.3 → 1.10.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 (83) 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/InputWithDropdown/types.d.ts +3 -0
  17. package/lib/components/MenuOption/MenuOption.d.ts +1 -1
  18. package/lib/components/MenuOption/types.d.ts +1 -0
  19. package/lib/components/MiniModal/types.d.ts +2 -1
  20. package/lib/components/TableTree/Components/TableCell.d.ts +1 -1
  21. package/lib/components/TableTree/Components/TableRow.d.ts +1 -1
  22. package/lib/components/TableTree/types.d.ts +4 -3
  23. package/lib/index.d.ts +112 -12
  24. package/lib/index.esm.js +504 -218
  25. package/lib/index.esm.js.map +1 -1
  26. package/lib/index.js +505 -218
  27. package/lib/index.js.map +1 -1
  28. package/lib/tsconfig.tsbuildinfo +1 -1
  29. package/package.json +1 -1
  30. package/src/ComponentProps/TreeNodeProps.ts +2 -1
  31. package/src/assets/Themes/BaseTheme.scss +1 -2
  32. package/src/assets/Themes/DarkTheme.scss +0 -1
  33. package/src/assets/styles/_mixins.scss +19 -0
  34. package/src/components/AddResourceButton/{AddButton.scss → AddResourceButton.scss} +1 -0
  35. package/src/components/AddResourceButton/{AddButton.stories.tsx → AddResourceButton.stories.tsx} +4 -4
  36. package/src/components/AddResourceButton/{AddButton.tsx → AddResourceButton.tsx} +25 -10
  37. package/src/components/AddResourceButton/ArrowsButton/ArrowsButton.scss +1 -2
  38. package/src/components/AddResourceButton/ArrowsButton/ArrowsButton.tsx +16 -9
  39. package/src/components/AddResourceButton/index.ts +1 -1
  40. package/src/components/AddResourceButton/type.ts +2 -0
  41. package/src/components/BrowserTabs/BrowserTabs.scss +75 -0
  42. package/src/components/BrowserTabs/BrowserTabs.stories.tsx +366 -0
  43. package/src/components/BrowserTabs/BrowserTabs.tsx +128 -0
  44. package/src/components/BrowserTabs/index.ts +1 -0
  45. package/src/components/BrowserTabs/types.ts +73 -0
  46. package/src/components/ConnectingBranch/BranchComponents/MachineInstances.tsx +54 -39
  47. package/src/components/ConnectingBranch/ConnectingBranch.stories.tsx +3 -2
  48. package/src/components/ConnectingBranch/ConnectingBranch.tsx +28 -24
  49. package/src/components/ConnectingBranch/data.tsx +207 -213
  50. package/src/components/ConnectingBranch/types.ts +26 -17
  51. package/src/components/Excel/ColorBarSelector/ColorBarSelector.tsx +1 -1
  52. package/src/components/Excel/ExcelFile/ExcelFile.scss +4 -0
  53. package/src/components/Excel/ExcelFile/ExcelFile.tsx +35 -16
  54. package/src/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.tsx +14 -3
  55. package/src/components/Excel/ExcelFile/ExcelFileComponents/DataEditor.tsx +1 -0
  56. package/src/components/Excel/ExcelFile/ExcelFileComponents/RowIndicator.tsx +16 -5
  57. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +12 -1
  58. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx +31 -5
  59. package/src/components/Excel/ExcelFile/ExcelFileComponents/actions.ts +30 -0
  60. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +47 -0
  61. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +4 -4
  62. package/src/components/Excel/ExcelFile/ExcelFileComponents/types.ts +6 -0
  63. package/src/components/Excel/ExcelFile.stories.tsx +10 -2
  64. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +11 -11
  65. package/src/components/Excel/Types.ts +1 -0
  66. package/src/components/Excel/dataConversion.ts +17 -19
  67. package/src/components/InputWithDropdown/InputWithDropdown.tsx +6 -0
  68. package/src/components/InputWithDropdown/types.ts +7 -1
  69. package/src/components/MenuOption/MenuOption.tsx +4 -0
  70. package/src/components/MenuOption/types.ts +1 -0
  71. package/src/components/MiniModal/MiniModal.scss +8 -0
  72. package/src/components/MiniModal/MiniModal.stories.tsx +60 -0
  73. package/src/components/MiniModal/types.ts +2 -1
  74. package/src/components/Table/Table.stories.tsx +1 -1
  75. package/src/components/Table/Table.tsx +8 -4
  76. package/src/components/TableTree/Components/TableCell.tsx +25 -10
  77. package/src/components/TableTree/Components/TableHead.tsx +5 -5
  78. package/src/components/TableTree/Components/TableRow.tsx +27 -24
  79. package/src/components/TableTree/TableTree.scss +89 -69
  80. package/src/components/TableTree/TableTree.stories.tsx +66 -2
  81. package/src/components/TableTree/types.ts +4 -3
  82. package/src/index.ts +2 -0
  83. package/src/utils/getTreeDetails/getTreeDetails.ts +1 -1
@@ -736,5 +736,65 @@ export const normalModalFollowedByIcon = () => {
736
736
  </div>
737
737
  );
738
738
  };
739
+ export const NormalModalWithLoop = () => {
740
+ const { currentModal, openModal, closeModal } = useModal();
741
+
742
+ const modelItems = ['one', 'two', 'three', 'four'];
743
+ const structuredArray = modelItems.map((value, index) => ({
744
+ id: `${index + 1}`,
745
+ value: value,
746
+ }));
747
+
748
+ const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);
749
+
750
+ const getButtonPosition = (index: number) => {
751
+ const button = buttonRefs.current[index];
752
+ if (button) {
753
+ const { top, left, height } = button.getBoundingClientRect();
754
+ return { top: top + height, left };
755
+ }
756
+ return { top: 0, left: 0 };
757
+ };
739
758
 
759
+ return (
760
+ <div className="ff-mini-modal-loop">
761
+ {structuredArray.map((data, index) => (
762
+ <div key={data.id} className="ff-mini-modal-loop-div">
763
+ <p>{data.value}</p>
764
+ <Button
765
+ variant="primary"
766
+ ref={(el) => (buttonRefs.current[index] = el)}
767
+ onClick={() => openModal(Number(data.id))}
768
+ id={data.id}
769
+ label={data.id}
770
+ />
771
+
772
+ {currentModal === Number(data.id) && (
773
+ <MiniModal
774
+ id={data.id}
775
+ modalProperties={{
776
+ width: 168,
777
+ height: 108,
778
+ top: getButtonPosition(index).top,
779
+ left: getButtonPosition(index).left,
780
+ }}
781
+ overlay={{
782
+ isOverlay: true,
783
+ zIndexOverlay: 99,
784
+ }}
785
+ childContent={
786
+ <Typography as="p">
787
+ This is some content inside the modal for {data.value}.
788
+ </Typography>
789
+ }
790
+ isIconModel={true}
791
+ isAnimated={true}
792
+ outSideClick={closeModal}
793
+ />
794
+ )}
795
+ </div>
796
+ ))}
797
+ </div>
798
+ );
799
+ };
740
800
  export default meta;
@@ -13,7 +13,8 @@ export interface MiniEditModalProps {
13
13
  /**
14
14
  * A reference to the button element that triggers the modal.
15
15
  */
16
- anchorRef: RefObject<HTMLButtonElement> | string;
16
+ anchorRef?: RefObject<HTMLButtonElement> | string;
17
+ id?: string | number;
17
18
  /**
18
19
  * Optional properties for configuring the modal header.
19
20
  */
@@ -394,7 +394,7 @@ export const DragAndDropTable: Story = {
394
394
  tableDataTextColor: 'var(--brand-color)',
395
395
  },
396
396
  render: () => {
397
- // important prerequisite tableData should have unique IDs
397
+ //! Important prerequisite: tableData should have a unique ID key, which should be either _id or id.
398
398
  const [tableData, setTableData] = useState(
399
399
  sampleData.map((data) => data.project)
400
400
  );
@@ -43,7 +43,7 @@ const SortableRow = ({
43
43
  <tr
44
44
  ref={setNodeRef}
45
45
  style={style}
46
- key={row.id}
46
+ key={row._id || row.id}
47
47
  className={classNames(tableBodyRowClass, {
48
48
  'disabled-row': row.disabled,
49
49
  })}
@@ -133,8 +133,12 @@ const Table = ({
133
133
  const { active, over } = event;
134
134
  if (!over || active.id === over.id) return;
135
135
 
136
- const oldIndex = data.findIndex((item: any) => item.id === active.id);
137
- const newIndex = data.findIndex((item: any) => item.id === over.id);
136
+ const oldIndex = data.findIndex(
137
+ (item: any) => item._id === active.id || item.id === active.id
138
+ );
139
+ const newIndex = data.findIndex(
140
+ (item: any) => item._id === over.id || item.id === over.id
141
+ );
138
142
 
139
143
  if (oldIndex === -1 || newIndex === -1) return;
140
144
  if (onDragEnd) onDragEnd(oldIndex, newIndex);
@@ -144,7 +148,7 @@ const Table = ({
144
148
  <DndContext collisionDetection={closestCorners} onDragEnd={handleDragEnd}>
145
149
  <SortableContext
146
150
  disabled={!draggable}
147
- items={data?.map((row: any) => row.id)}
151
+ items={data?.map((row: any) => row._id || row.id)}
148
152
  strategy={verticalListSortingStrategy}
149
153
  >
150
154
  <div
@@ -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,
@@ -28,7 +28,7 @@ export const getTreeDetails = (
28
28
  case 'expand':
29
29
  case 'collapse':
30
30
  if (typeof index === 'number') {
31
- treeDataList = [...oldData.slice(0, index + 1), ...newData];
31
+ treeDataList = [...oldData.slice(0, index), ...newData];
32
32
  } else {
33
33
  throw new Error(
34
34
  "Index is required for 'expand' or 'collapse' actions."