pixel-react 1.9.5 → 1.9.7

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 (69) hide show
  1. package/.yarn/install-state.gz +0 -0
  2. package/lib/ComponentProps/TreeNodeProps.d.ts +31 -0
  3. package/lib/components/ConditionalDropdown/types.d.ts +4 -3
  4. package/lib/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.d.ts +1 -0
  5. package/lib/components/Input/types.d.ts +2 -0
  6. package/lib/components/MobileSkin/MobileSkinInterface.d.ts +2 -2
  7. package/lib/components/MobileSkin/types.d.ts +9 -8
  8. package/lib/components/Select/types.d.ts +4 -0
  9. package/lib/components/SequentialConnectingBranch/components/DatasetTooltip/DataSetTooltip.d.ts +4 -0
  10. package/lib/components/SequentialConnectingBranch/components/DatasetTooltip/types.d.ts +8 -0
  11. package/lib/components/SequentialConnectingBranch/types.d.ts +17 -4
  12. package/lib/components/TableTree/Components/TableBody.d.ts +1 -1
  13. package/lib/components/TableTree/types.d.ts +5 -32
  14. package/lib/index.d.ts +46 -75
  15. package/lib/index.esm.js +292 -98
  16. package/lib/index.esm.js.map +1 -1
  17. package/lib/index.js +292 -98
  18. package/lib/index.js.map +1 -1
  19. package/lib/tsconfig.tsbuildinfo +1 -1
  20. package/lib/utils/getSequentialPayload/types.d.ts +6 -0
  21. package/lib/utils/getTreeDetails/getTreeDetails.d.ts +1 -29
  22. package/lib/utils/handleTreeNodeSelect/handleTreeNodeSelect.d.ts +1 -30
  23. package/package.json +1 -1
  24. package/src/ComponentProps/TreeNodeProps.ts +31 -0
  25. package/src/assets/Themes/BaseTheme.scss +3 -0
  26. package/src/assets/Themes/DarkTheme.scss +3 -0
  27. package/src/assets/styles/_colors.scss +5 -0
  28. package/src/components/ConditionalDropdown/ConditionalDropdown.tsx +149 -30
  29. package/src/components/ConditionalDropdown/types.ts +27 -25
  30. package/src/components/Drawer/Drawer.scss +1 -1
  31. package/src/components/Drawer/Drawer.tsx +1 -1
  32. package/src/components/Editor/VariableDropdown.tsx +1 -1
  33. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +39 -8
  34. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +0 -4
  35. package/src/components/Input/Input.tsx +4 -0
  36. package/src/components/Input/types.ts +5 -0
  37. package/src/components/InputWithDropdown/InputWithDropdown.tsx +1 -0
  38. package/src/components/MobileSkin/MobileSkin.scss +0 -8
  39. package/src/components/MobileSkin/MobileSkin.stories.tsx +10 -9
  40. package/src/components/MobileSkin/MobileSkin.tsx +16 -31
  41. package/src/components/MobileSkin/MobileSkinInterface.ts +2 -2
  42. package/src/components/MobileSkin/types.ts +9 -8
  43. package/src/components/RadioButton/RadioButton.tsx +5 -1
  44. package/src/components/Select/Select.stories.tsx +2 -0
  45. package/src/components/Select/Select.tsx +4 -1
  46. package/src/components/Select/components/Dropdown.tsx +1 -2
  47. package/src/components/Select/types.ts +6 -1
  48. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.tsx +35 -28
  49. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx +58 -14
  50. package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +45 -20
  51. package/src/components/SequentialConnectingBranch/components/DatasetTooltip/DataSetTooltip.tsx +41 -0
  52. package/src/components/SequentialConnectingBranch/components/DatasetTooltip/types.ts +9 -0
  53. package/src/components/SequentialConnectingBranch/types.ts +19 -5
  54. package/src/components/TableTree/Components/TableBody.tsx +22 -20
  55. package/src/components/TableTree/Components/TableCell.tsx +18 -6
  56. package/src/components/TableTree/Components/TableHead.tsx +5 -3
  57. package/src/components/TableTree/Components/TableRow.tsx +0 -3
  58. package/src/components/TableTree/TableTree.scss +88 -51
  59. package/src/components/TableTree/TableTree.stories.tsx +8 -7
  60. package/src/components/TableTree/TableTree.tsx +7 -2
  61. package/src/components/TableTree/data.ts +1 -1
  62. package/src/components/TableTree/types.ts +5 -33
  63. package/src/components/Tabs/Tabs.scss +1 -1
  64. package/src/index.ts +7 -0
  65. package/src/utils/getSequentialPayload/getSequentialPayload.stories.tsx +1 -0
  66. package/src/utils/getSequentialPayload/getSequentialPayload.ts +1 -1
  67. package/src/utils/getSequentialPayload/types.ts +6 -0
  68. package/src/utils/getTreeDetails/getTreeDetails.ts +1 -29
  69. package/src/utils/handleTreeNodeSelect/handleTreeNodeSelect.ts +1 -30
@@ -10,6 +10,8 @@ import Typography from '../../../Typography';
10
10
  import Button from '../../../Button';
11
11
  import './Branches.scss';
12
12
  import { MachineType } from '../../../MachineInputField/types';
13
+ import Tooltip from '../../../Tooltip';
14
+ import DataSetTooltip from '../DatasetTooltip/DataSetTooltip';
13
15
 
14
16
  const Branches = ({
15
17
  machineInstances,
@@ -163,13 +165,17 @@ const Branches = ({
163
165
  </div>
164
166
  {machineInstances?.map((machineInstance, index) => {
165
167
  const {
166
- numberOfRuns = 'numberOfRuns' in machineInstance
167
- ? machineInstance.numberOfRuns
168
+ runCount = 'runCount' in machineInstance
169
+ ? machineInstance.runCount
168
170
  : 0,
171
+ numberOfRuns = 0,
169
172
  machineInstanceId = '',
170
173
  peVariableSetId = '',
171
174
  globalVariableSetId = '',
172
175
  testDataSetId = '',
176
+ testDataSetName = '',
177
+ peVariableSetName = '',
178
+ globalVariableSetName = '',
173
179
  } = machineInstance as ExecutionContext;
174
180
  return (
175
181
  <Fragment key={ffid()}>
@@ -184,7 +190,7 @@ const Branches = ({
184
190
  ></div>
185
191
  <MachineInputField
186
192
  width={`${machineColumnWidth}px`}
187
- runCount={numberOfRuns}
193
+ runCount={runCount}
188
194
  key={ffid()}
189
195
  options={
190
196
  getMachineLabelOptionList(
@@ -193,9 +199,7 @@ const Branches = ({
193
199
  ) as MachineType[]
194
200
  }
195
201
  contentReverse={!evenRow}
196
- modalId={`${machineInstanceId}-runCount-${
197
- numberOfRuns - 1
198
- }`}
202
+ modalId={`${machineInstanceId}-runCount-${runCount - 1}`}
199
203
  onClick={() =>
200
204
  onUpdateAddBrowserInstance(
201
205
  `${machineInstanceId}-runCount-0`,
@@ -214,15 +218,18 @@ const Branches = ({
214
218
  {hideDataSet && (
215
219
  <>
216
220
  <div
217
- id={`ff-sequential-branch-dataset-${machineInstanceId}-${numberOfRuns}`}
221
+ id={`ff-sequential-branch-dataset-${machineInstanceId}-${runCount}`}
218
222
  className="ff-dataset-list-branch"
219
223
  onClick={() =>
220
224
  onUpdateDataSetList(
221
- `ff-sequential-branch-dataset-${machineInstanceId}-${numberOfRuns}`,
225
+ `ff-sequential-branch-dataset-${machineInstanceId}-${runCount}`,
222
226
  {
223
227
  peVariableSetId: peVariableSetId,
224
228
  globalVariableSetId: globalVariableSetId,
225
229
  testDataSetId: testDataSetId,
230
+ testDataSetName: testDataSetName,
231
+ globalVariableSetName: globalVariableSetName,
232
+ peVariableSetName: peVariableSetName,
226
233
  },
227
234
  true,
228
235
  numberOfRuns,
@@ -230,10 +237,24 @@ const Branches = ({
230
237
  )
231
238
  }
232
239
  >
233
- <Icon
234
- name="datalist_icon"
235
- className="ff-connecting-icon"
236
- />
240
+ <Tooltip
241
+ placement="bottom"
242
+ title={
243
+ <DataSetTooltip
244
+ datSetToolTip={{
245
+ peVariableSetName,
246
+ globalVariableSetName,
247
+ testDataSetName,
248
+ }}
249
+ />
250
+ }
251
+ >
252
+ <Icon
253
+ name="datalist_icon"
254
+ className="ff-connecting-icon"
255
+ hoverEffect
256
+ />
257
+ </Tooltip>
237
258
  <Typography
238
259
  className="ff-connecting-text"
239
260
  color="var(--ff-connecting-branch-color)"
@@ -247,6 +268,7 @@ const Branches = ({
247
268
  className="ff-connecting-icon"
248
269
  onClick={() => onAddRunBrowser(machineInstanceId)}
249
270
  color="var(--ff-connecting-branch-color)"
271
+ hoverEffect
250
272
  />
251
273
  <Typography
252
274
  className="ff-connecting-text"
@@ -256,14 +278,17 @@ const Branches = ({
256
278
  </Typography>
257
279
  </>
258
280
  )}
259
- <Icon
260
- name="delete"
261
- className="ff-connecting-delete-icon"
262
- onClick={() =>
263
- onDeleteBrowser(machineInstanceId, numberOfRuns)
264
- }
265
- color="var(--ff-connecting-branch-delete-color)"
266
- />
281
+ {!readOnly && (
282
+ <Icon
283
+ name="delete"
284
+ className="ff-connecting-delete-icon"
285
+ onClick={() =>
286
+ onDeleteBrowser(machineInstanceId, runCount)
287
+ }
288
+ color="var(--ff-connecting-branch-delete-color)"
289
+ hoverEffect
290
+ />
291
+ )}
267
292
  </div>
268
293
  )}
269
294
  </div>
@@ -0,0 +1,41 @@
1
+ import { FC } from 'react';
2
+ import Tooltip from '../../../Tooltip';
3
+ import Typography from '../../../Typography';
4
+ import { DataSetTooltipProps } from './types';
5
+
6
+ const DataSetTooltip: FC<DataSetTooltipProps> = ({
7
+ datSetToolTip: {
8
+ globalVariableSetName = '',
9
+ peVariableSetName = '',
10
+ testDataSetName = '',
11
+ },
12
+ }) => {
13
+ const toolTipTitleValue = {
14
+ 'Test Data Set': testDataSetName,
15
+ 'Global Variable Set': globalVariableSetName,
16
+ 'Project Environment Set': peVariableSetName,
17
+ };
18
+
19
+ return (
20
+ <>
21
+ <Tooltip placement="bottom">
22
+ {Object.entries(toolTipTitleValue).map(([key, value], index) => (
23
+ <div key={index}>
24
+ <Typography
25
+ as="div"
26
+ fontSize={10}
27
+ lineHeight="15px"
28
+ >
29
+ {key}
30
+ </Typography>
31
+ <Typography as="div" lineHeight="18px">
32
+ {value}
33
+ </Typography>
34
+ </div>
35
+ ))}
36
+ </Tooltip>
37
+ </>
38
+ );
39
+ };
40
+
41
+ export default DataSetTooltip;
@@ -0,0 +1,9 @@
1
+ export interface DataSetTooltipProps {
2
+ datSetToolTip: DataSetToolTip;
3
+ }
4
+
5
+ export interface DataSetToolTip {
6
+ testDataSetName: string;
7
+ globalVariableSetName: string;
8
+ peVariableSetName: string;
9
+ }
@@ -1,32 +1,38 @@
1
1
  import { Option } from '../Select/types';
2
2
 
3
3
  export interface SequentialConnectingBranchProps {
4
- machineInstances?: ExecutionContext[] | {}[];
4
+ machineInstances: ExecutionContext[] | {}[];
5
5
  machineColumnWidth?: number;
6
6
  machineColumnCount?: number;
7
7
  selectedMachine?: Option;
8
8
  machineOptionsList?: Option[];
9
9
  onHandleSelect?: (option: Option) => void;
10
10
  onAddBrowserInstance?: (modalId: string) => void;
11
- onUpdateAddBrowserInstance: (
11
+ onUpdateAddBrowserInstance?: (
12
12
  modalId: string,
13
13
  machineInstance: ExecutionContext
14
14
  ) => void;
15
15
  onDeleteBrowserInstance?: (id: string, runCount: number) => void;
16
16
  onAddRunBrowserInstance?: (machineInstanceId: string) => void;
17
17
  onDeleteMachineInstance?: () => void;
18
- onUpdateDataSetList: (
18
+ onUpdateDataSetList?: (
19
19
  id: string,
20
- dataSetObject: dataSetValues,
20
+ dataSetObject?: dataSetValues,
21
21
  isInstance?: boolean,
22
22
  noOfRuns?: number,
23
23
  machineInstanceId?: string
24
24
  ) => void;
25
- dataSetValues: dataSetValues;
25
+ dataSetValues?: dataSetValues;
26
26
  addInstanceLabel?: string;
27
27
  scriptType?: string;
28
28
  projectType?: string;
29
29
  readOnly?: boolean;
30
+ integrationInstance?: IntegrationInstance
31
+ }
32
+
33
+ export interface IntegrationInstance {
34
+ usename: string,
35
+ accessKey: string
30
36
  }
31
37
 
32
38
  // Type for machine information
@@ -47,6 +53,7 @@ export interface ExecutionContext {
47
53
  machineInstanceId: string;
48
54
  clientId: string;
49
55
  numberOfRuns: number;
56
+ runCount: number;
50
57
  executionEnv?: 'Local'; // Change to specific enum if more environments exist
51
58
  browserName?: 'Local' | 'mac' | 'android' | 'Google Chrome';
52
59
  browserVersion: string;
@@ -55,12 +62,19 @@ export interface ExecutionContext {
55
62
  deviceInfo: DeviceInfo[];
56
63
  headless: boolean;
57
64
  peVariableSetId: string;
65
+ testDataSetName: string;
66
+ globalVariableSetName: string;
67
+ peVariableSetName: string;
58
68
  globalVariableSetId: string;
59
69
  testDataSetId: string;
70
+ integrationInstance: IntegrationInstance;
60
71
  }
61
72
 
62
73
  export interface dataSetValues {
63
74
  peVariableSetId: string;
64
75
  globalVariableSetId: string;
65
76
  testDataSetId: string;
77
+ testDataSetName: string;
78
+ globalVariableSetName: string;
79
+ peVariableSetName: string;
66
80
  }
@@ -1,6 +1,7 @@
1
1
  import React from 'react';
2
2
  import { TableBodyProps } from '../types';
3
3
  import TableRow from './TableRow';
4
+ import { checkEmpty } from '../../../utils/checkEmpty/checkEmpty';
4
5
 
5
6
  const TableBody = React.memo(
6
7
  ({
@@ -11,26 +12,27 @@ const TableBody = React.memo(
11
12
  onRowClick,
12
13
  onToggleExpand,
13
14
  onCheckBoxChange,
14
- }: TableBodyProps) => (
15
- <tbody className="ff-table-tree-body">
16
- <tr id="ff-table-tree-first-node" />
17
- {flattenedTreeData?.map((node) => {
18
- return (
19
- <TableRow
20
- key={node.searchKey}
21
- node={node}
22
- columnsData={columnsData}
23
- selected={selected}
24
- select={select}
25
- onRowClick={onRowClick}
26
- onToggleExpand={onToggleExpand}
27
- onCheckBoxChange={onCheckBoxChange}
28
- />
29
- );
30
- })}
31
- <tr id="ff-table-tree-last-node" />
32
- </tbody>
33
- )
15
+ }: TableBodyProps) =>
16
+ checkEmpty(flattenedTreeData) ? null : (
17
+ <tbody className="ff-table-tree-body">
18
+ <tr id="ff-table-tree-first-node" />
19
+ {flattenedTreeData?.map((node, index) => {
20
+ return (
21
+ <TableRow
22
+ key={node.searchKey}
23
+ node={node}
24
+ columnsData={columnsData}
25
+ selected={selected}
26
+ select={select}
27
+ onRowClick={onRowClick}
28
+ onToggleExpand={(node) => onToggleExpand(node, index)}
29
+ onCheckBoxChange={onCheckBoxChange}
30
+ />
31
+ );
32
+ })}
33
+ <tr id="ff-table-tree-last-node" />
34
+ </tbody>
35
+ )
34
36
  );
35
37
 
36
38
  export default TableBody;
@@ -44,21 +44,31 @@ const TableCell = React.memo(
44
44
  onCheckBoxChange,
45
45
  onToggleExpand,
46
46
  }: TableCellProps) => (
47
- <td>
47
+ <td className={`${col.isTree && node.folder ? 'folder' : ''}`}>
48
48
  {col.isTree &&
49
49
  renderSpaces(node.hierarchy + 1, node.parentSiblings, node.last)}
50
50
  <div className="tree-title-container">
51
51
  {col.isTree && (
52
52
  <span
53
53
  className={`tree-table-space-block last-block ${
54
- node.isExpanded ? 'tree-row-expanded' : 'tree-row-collapsed'
55
- } ${node.folder ? '' : 'no-folder'}`}
54
+ node.expand ? 'tree-row-expanded' : 'tree-row-collapsed'
55
+ } ${node.container ? '' : 'no-folder'}`}
56
56
  onClick={() => onToggleExpand(node)}
57
57
  >
58
- {node.folder && <Arrow />}
58
+ {node.container &&
59
+ node?.resourceCount + node?.subContainerCount > 0 && (
60
+ <span onClick={() => onToggleExpand(node)}>
61
+ {' '}
62
+ <Arrow />
63
+ </span>
64
+ )}
59
65
  </span>
60
66
  )}
61
- <span className="tree-table-td-content">
67
+ <span
68
+ className={`tree-table-td-content ${
69
+ col.isTree && node.folder ? 'folder' : ''
70
+ }`}
71
+ >
62
72
  {col.isTree && select === 'checkbox' && (
63
73
  <Checkbox
64
74
  checked={selected.includes(node.id)}
@@ -73,7 +83,9 @@ const TableCell = React.memo(
73
83
  onChange={(e) => onCheckBoxChange(e, node)}
74
84
  />
75
85
  )}
76
- {prepareData(node, col)}
86
+ <span className="tree-table-td-content-text">
87
+ {prepareData(node, col)}
88
+ </span>
77
89
  </span>
78
90
  </div>
79
91
  {col.actions && (
@@ -10,8 +10,10 @@ const TableHead = React.memo(({ columnsData }: TableHeadProps) => {
10
10
  return (
11
11
  <thead>
12
12
  <tr>
13
- {columnsData.map(({ name }) => (
14
- <th key={name}>{name}</th>
13
+ {columnsData.map(({ name, width }) => (
14
+ <th key={name} style={{ width: width }}>
15
+ {name}
16
+ </th>
15
17
  ))}
16
18
  </tr>
17
19
  {hasDefaultValues && (
@@ -19,7 +21,7 @@ const TableHead = React.memo(({ columnsData }: TableHeadProps) => {
19
21
  {columnsData.map(({ defaultValue, defaultActions }, index) => (
20
22
  <td key={index}>
21
23
  {defaultValue && (
22
- <span className="">
24
+ <span className="tree-table-default-content">
23
25
  {defaultValue}
24
26
  {defaultActions && (
25
27
  <div className="table-tree-row-action">
@@ -5,15 +5,12 @@ import TableCell from './TableCell';
5
5
  const TableRow = React.memo(
6
6
  ({
7
7
  node,
8
- // level,
9
8
  columnsData,
10
9
  selected,
11
10
  select,
12
11
  onRowClick,
13
12
  onToggleExpand,
14
13
  onCheckBoxChange,
15
- // parentSiblings,
16
- // isLast,
17
14
  }: TableRowProps) => (
18
15
  <tr
19
16
  data-level={node.hierarchy}
@@ -99,107 +99,144 @@
99
99
 
100
100
  .tree-table-wrap {
101
101
  width: 100%;
102
+ padding-left: 4px; // padding size need to check
102
103
  overflow: hidden;
103
104
  overflow-x: auto;
104
105
  }
105
106
 
106
107
  .table-scrollable {
107
- max-height: var(--table-height); /* Adjust height as needed */
108
+ height: var(--table-height); /* Adjust height as needed */
108
109
  overflow-y: auto;
110
+ position: relative;
109
111
  }
110
112
 
111
113
  .ff-table-tree-body {
112
114
  overflow: scroll;
113
115
  }
114
116
 
117
+ tr {
118
+ &:hover {
119
+ background-color: var(--hover-color);
120
+ }
121
+ }
122
+
115
123
  .tree-table {
116
- border: 1px solid #f1f1f1;
124
+ // border: 1px solid #f1f1f1;
117
125
  table-layout: fixed;
118
126
  width: 100%;
119
127
  border-collapse: collapse;
120
128
  overflow: scroll;
121
129
 
130
+ thead {
131
+ position: sticky;
132
+ top: 0;
133
+ z-index: 2;
134
+ }
135
+
122
136
  tr {
137
+ background-color: var(--base-bg-color);
123
138
  .table-tree-row-action {
124
139
  display: none;
125
140
  }
126
141
 
127
- &:hover {
128
- background-color: var(--hover-color);
129
- td {
130
- &:first-child {
131
- background-color: var(--hover-color);
132
- }
133
- }
142
+ // &:hover {
143
+ // background-color: var(--hover-color);
144
+ // td {
145
+ // &:first-child {
146
+ // background-color: var(--hover-color);
147
+ // }
148
+ // }
134
149
 
135
- .table-tree-row-action {
136
- display: inline-flex;
137
- align-items: center;
138
- }
150
+ .table-tree-row-action {
151
+ display: inline-flex;
152
+ align-items: center;
139
153
  }
154
+ }
140
155
 
141
- &::after {
142
- content: '';
143
- display: block;
144
- visibility: hidden;
145
- clear: both;
146
- }
156
+ &::after {
157
+ content: '';
158
+ display: block;
159
+ visibility: hidden;
160
+ clear: both;
147
161
  }
162
+ }
148
163
 
149
- th,
150
- td {
151
- text-align: left;
152
- white-space: nowrap;
153
- text-overflow: ellipsis;
154
- overflow: hidden;
164
+ th,
165
+ td {
166
+ text-align: left;
167
+ white-space: nowrap;
168
+ text-overflow: ellipsis;
169
+ overflow: hidden;
170
+ }
171
+
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;
179
+
180
+ &:first-child {
181
+ width: 400px !important;
182
+ position: sticky;
183
+ left: 0;
155
184
  }
185
+ }
156
186
 
157
- th {
158
- color: var(--brand-color);
159
- background: var(--slider-table-color);
160
- font-size: 13px;
161
- width: 400px;
187
+ td {
188
+ font-size: 14px;
189
+ color: var(--brand-color);
190
+ height: 18px;
162
191
 
163
- &:first-child {
164
- position: sticky;
165
- left: 0;
192
+ &:first-child {
193
+ overflow: initial;
194
+ position: sticky;
195
+ left: 0;
196
+ background-color: white;
197
+
198
+ &:hover {
199
+ background-color: var(--hover-color);
166
200
  }
167
- }
168
201
 
169
- td {
170
- font-size: 14px;
171
- color: var(--brand-color);
172
- height: 18px;
202
+ .tree-table-default-content {
203
+ margin-left: 8px;
204
+ }
173
205
 
174
- &:first-child {
175
- overflow: initial;
176
- position: sticky;
177
- left: 0;
178
- background-color: white;
206
+ .tree-table-td-content {
207
+ padding-left: 4px;
179
208
 
180
- &:hover {
181
- background-color: var(--hover-color);
209
+ .tree-table-td-content-text {
210
+ margin-left: 4px;
182
211
  }
183
212
  }
184
213
  }
214
+ &.folder {
215
+ height: 28px;
216
+ }
185
217
  }
186
218
 
187
219
  .tree-table-td-content {
188
220
  display: inline-flex;
189
221
  align-items: center;
190
- padding-left: 8px;
191
222
  font-size: 12px;
192
223
  font-family: 'Poppins', sans-serif;
224
+
225
+ &.folder {
226
+ font-weight: 600;
227
+ }
193
228
  }
194
229
 
195
230
  .tree-row-expanded,
196
231
  .tree-row-collapsed {
197
- svg {
198
- height: 12px;
199
- width: 12px;
232
+ span {
233
+ svg {
234
+ height: 12px;
235
+ width: 12px;
200
236
 
201
- path {
202
- fill: var(--brand-color);
237
+ path {
238
+ fill: var(--brand-color);
239
+ }
203
240
  }
204
241
  }
205
242
  }
@@ -37,7 +37,7 @@ const colData = [
37
37
  {
38
38
  name: 'Module Path',
39
39
  accessor: 'createdBy',
40
- width: '200px',
40
+ width: '300px',
41
41
  isClickable: true,
42
42
  },
43
43
 
@@ -109,8 +109,8 @@ export const Default: Story = {
109
109
  loadMore: (node) => {
110
110
  console.log(node);
111
111
  },
112
- onExpand: (isExpand, node) => {
113
- console.log(isExpand, node);
112
+ onExpand: (node, index) => {
113
+ console.log(node, index);
114
114
  },
115
115
  select: 'checkbox',
116
116
  onChange: (node: string[]) => {
@@ -130,8 +130,8 @@ export const ControlledCheckBox: Story = {
130
130
  const [selected, setSelected] = useState<string[]>([]);
131
131
  return (
132
132
  <TableTree
133
- onExpand={(isExpand, node) => {
134
- console.log(isExpand, node);
133
+ onExpand={(node, index) => {
134
+ console.log(node, index);
135
135
  }}
136
136
  select="checkbox"
137
137
  onChange={(e, nodes: string[]) => {
@@ -146,6 +146,7 @@ export const ControlledCheckBox: Story = {
146
146
  loadMore={(direction) => {
147
147
  console.log(direction, '-------------------');
148
148
  }}
149
+ tableBorder="1px solid #f1f1f1"
149
150
  />
150
151
  );
151
152
  },
@@ -155,8 +156,8 @@ export const ControlledRadio: Story = {
155
156
  const [selected, setSelected] = useState<string[]>([]);
156
157
  return (
157
158
  <TableTree
158
- onExpand={(isExpand, node) => {
159
- console.log(isExpand, node);
159
+ onExpand={(node, index) => {
160
+ console.log(node, index);
160
161
  }}
161
162
  select="radio"
162
163
  onChange={(nodes: string[]) => {