playbook_ui 12.26.0.pre.alpha.multiselectfixes798 → 12.26.0.pre.alpha.multiselectfixes825

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 885259e20b787892699275c0691bde8b5e63bf0b010d7e447e51e945fc5f23f8
4
- data.tar.gz: 8ca06c90d70b8d2e5822a4be0b1882d7e22e847c72e0bb28d8afd4e520d6b00b
3
+ metadata.gz: 371b190965297927aba9f26c26fe3383d9c6ce959adca7e0a128027d1b0f2255
4
+ data.tar.gz: baae24f5458e96ac76e0ce2b6f63ba34e0e1b91613095f789352a9f4cc3b3bc2
5
5
  SHA512:
6
- metadata.gz: cfc65879ed3c5beb563456c3bc791a8ad1335292b5448ecdfbcb90b8c72bbe1d2d9a275c11ecccea51309d9ccd727a2f09f29120468d9f646f76c7948f35377b
7
- data.tar.gz: 0b41fb441055d6619d7d8ff5391a4e1f979df876a0ad04ec3ee350f8a883ae6ae8ca223fd0ca9c39a41f2e2aa7e6cc82136affd88922d9e956140f64f61b6b4b
6
+ metadata.gz: bf19511362763021d0f7e77dfba5c1e47239692412c7076e377042b1573393f603efc84f7d8bd09d8f29946c4a0d9135b79ea4d90d83b50eed62835f89d3c733
7
+ data.tar.gz: 24a916ccc779f9d9c585117d8582c94c1240305e3a12c4cb2382755206e24ecf776827914b1ee33be8125470b361a58eb3adb8078d48e51ccb68c4b459981f9c
@@ -1,58 +1,16 @@
1
- //function for unchecking items in formattedData
2
- export const unCheckIt = (
3
- formattedData: { [key: string]: any }[],
4
- id: string
5
- ) => {
6
- formattedData.map((item: { [key: string]: any }) => {
7
- if (item.id === id && item.checked) {
8
- item.checked = false;
9
- }
10
- if (item.children && item.children.length > 0) {
11
- unCheckIt(item.children, id);
12
- }
13
- return item;
14
- });
15
- };
16
-
17
1
  //function to retrieve all ancestors of unchecked item and set checked to false
18
2
  export const getAncestorsOfUnchecked = (
19
- formattedData: { [key: string]: any }[],
3
+ data: { [key: string]: any }[],
20
4
  item: { [key: string]: any }
21
5
  ) => {
22
6
  if (item.parent_id) {
23
- const ancestors = filterFormattedDataById(formattedData, item.parent_id);
24
- ancestors[0].checked = false;
25
-
26
- if (ancestors[0].parent_id) {
27
- getAncestorsOfUnchecked(formattedData, ancestors[0]);
28
- }
29
- }
30
- };
31
-
32
- //recursively check all child and grandchild items if parent checked
33
- export const checkedRecursive = (item: { [key: string]: any }) => {
34
- if (!item.checked) {
35
- item.checked = true;
36
- }
37
- if (item.children && item.children.length > 0) {
38
- item.children.forEach((childItem: { [key: string]: any }) => {
39
- checkedRecursive(childItem);
40
- });
41
- }
42
- };
43
-
44
- //recursively uncheck all child and grandchild items if parent unchecked
45
- export const unCheckedRecursive = (item: { [key: string]: any }) => {
46
- if (item.checked) {
47
- item.checked = false;
48
- }
49
- if (item.children && item.children.length > 0) {
50
- item.children.forEach((childItem: { [key: string]: any }) => {
51
- unCheckedRecursive(childItem);
52
- });
7
+ const ancestor = filterFormattedDataById(data, item.parent_id);
8
+ ancestor[0].checked = false;
9
+ ancestor[0].parent_id && getAncestorsOfUnchecked(data, ancestor[0])
53
10
  }
11
+ return data;
54
12
  };
55
-
13
+
56
14
  //function is going over formattedData and returning all objects that match the
57
15
  //id of the clicked item from the dropdown
58
16
  export const filterFormattedDataById = (
@@ -64,6 +22,7 @@ export const filterFormattedDataById = (
64
22
  for (const item of data) {
65
23
  if (item.id.toLowerCase() === (term.toLowerCase())) {
66
24
  matched.push(item);
25
+ return
67
26
  }
68
27
 
69
28
  if (item.children && item.children.length > 0) {
@@ -116,116 +75,60 @@ export const getCheckedItems = (
116
75
  });
117
76
  return checkedItems;
118
77
  };
78
+
79
+ export const getDefaultCheckedItems = (treeData:{ [key: string]: any }[]) => {
80
+ const checkedDefault: { [key: string]: any }[] = [];
119
81
 
120
- export const getChildIds = (
121
- item: { [key: string]: any },
122
- defaultArray: { [key: string]: any }[]
123
- ) => {
124
- let childIds: string[] = [];
125
- item.children.forEach((child: { [key: string]: any }) => {
126
- childIds.push(child.id);
127
- if (child.children && child.children.length > 0) {
128
- const childChildIds = getChildIds(child, defaultArray);
129
- childIds.push(...childChildIds);
82
+ const traverseTree = (items:{ [key: string]: any }[]) => {
83
+ if (!Array.isArray(items)) {
84
+ return;
130
85
  }
131
- });
132
- return childIds;
133
- };
86
+ items.forEach((item:{ [key: string]: any }) => {
87
+ if (item.checked) {
88
+ if (item.children && item.children.length > 0) {
89
+ const uncheckedChildren = item.children.filter((child:{ [key: string]: any }) => !child.checked);
90
+ if (uncheckedChildren.length === 0) {
91
+ checkedDefault.push(item);
92
+ return;
93
+ }
94
+ } else {
95
+ const parent = items.find((parentItem:{ [key: string]: any }) => parentItem.id === item.parentId);
96
+ if (!parent || !parent.checked) {
97
+ checkedDefault.push(item);
98
+ }
99
+ }
100
+ }
134
101
 
135
- export const updateReturnItems = (newChecked: { [key: string]: any }[]) => {
136
- const updatedCheckedItems: { [key: string]: any }[] = [];
137
- for (const item of newChecked) {
138
- if (item.children && item.children.length > 0) {
139
- const allChildrenChecked = item.children.every(
140
- (child: { [key: string]: any }) => child.checked
141
- );
142
- if (allChildrenChecked) {
143
- updatedCheckedItems.push(item);
102
+ if (item.children && item.children.length > 0) {
103
+ traverseTree(item.children);
144
104
  }
145
- }
146
- const childItem = updatedCheckedItems.some((x) => x.id === item?.parent_id);
147
- if (!childItem) {
148
- updatedCheckedItems.push(item);
149
- }
150
- }
151
- const filteredReturn = updatedCheckedItems.filter((item) => {
152
- return !updatedCheckedItems.find(
153
- (otherItem) => otherItem.id === item.parent_id
154
- );
155
- });
156
- return filteredReturn;
105
+ });
106
+ };
107
+
108
+ traverseTree(treeData);
109
+
110
+ return checkedDefault;
157
111
  };
158
112
 
159
- export const recursiveReturnOnlyParent = (
160
- items: { [key: string]: any },
161
- formattedData: { [key: string]: any }[],
162
- defaultReturn: { [key: string]: any }[],
163
- setDefaultReturn: any
113
+ export const recursiveCheckParent = (
114
+ item: { [key: string]: any },
115
+ data:any
164
116
  ) => {
165
- const parent = filterFormattedDataById(formattedData, items.parent_id);
117
+ if (item.parent_id !== null) {
118
+ const parent = filterFormattedDataById(data, item.parent_id);
166
119
  const allChildrenChecked = parent[0].children.every(
167
120
  (child: { [key: string]: any }) => child.checked
168
121
  );
169
122
  if (allChildrenChecked) {
170
- // Only return the parent and remove its children from defaultReturn
171
123
  parent[0].checked = true;
172
- const filteredDefaultReturn = defaultReturn.filter((item) => {
173
- // Remove children of the specific parent
174
- if (
175
- parent[0].children.find(
176
- (child: { [key: string]: any }) => child.id === item.id
177
- )
178
- ) {
179
- return false;
180
- }
181
- });
182
- setDefaultReturn([...filteredDefaultReturn, parent[0]]);
183
- // Check if the parent has a parent and its children are all checked
184
124
  const parentHasParent = parent[0].parent_id !== null;
185
125
  if (parentHasParent) {
186
- recursiveReturnOnlyParent(
126
+ recursiveCheckParent(
187
127
  parent[0],
188
- formattedData,
189
- filteredDefaultReturn,
190
- setDefaultReturn
128
+ data
191
129
  );
192
130
  }
193
- } else {
194
- const checkedChildren = parent[0].children.filter(
195
- (child: { [key: string]: any }) => child.checked
196
- );
197
- const updatedDefaultReturn = [...defaultReturn, ...checkedChildren];
198
- setDefaultReturn(updatedDefaultReturn);
199
- }
200
- };
201
-
202
- export const removeChildrenIfParentChecked = (
203
- items: { [key: string]: any },
204
- defaultReturn: { [key: string]: any }[],
205
- setDefaultReturn: any
206
- ) => {
207
- const childIds = getChildIds(items, defaultReturn);
208
- const filteredDefaultArray = defaultReturn.filter(
209
- (item: { [key: string]: any }) => childIds !== item.id
210
- );
211
- setDefaultReturn([...filteredDefaultArray, items]);
212
- };
213
-
214
- export const areAllCheckedFalse = (data:any) => {
215
- if (!Array.isArray(data)) {
216
- return;
217
- }
218
- for (const item of data) {
219
- if (item.checked !== false) {
220
- return false; // Return false if any item is not checked: false
221
- }
222
-
223
- if (item.children && item.children.length > 0) {
224
- if (!areAllCheckedFalse(item.children)) {
225
- return false; // Return false if any nested item is not checked: false
226
- }
227
- }
228
- }
229
-
230
- return true; // Return true if all items are checked: false
231
- };
131
+ }
132
+ }
133
+ return data;
134
+ }
@@ -6,19 +6,15 @@ import Icon from "../pb_icon/_icon";
6
6
  import Checkbox from "../pb_checkbox/_checkbox";
7
7
  import FormPill from "../pb_form_pill/_form_pill";
8
8
  import CircleIconButton from "../pb_circle_icon_button/_circle_icon_button";
9
+ import { cloneDeep } from "lodash";
10
+
9
11
  import {
10
- unCheckIt,
11
12
  getAncestorsOfUnchecked,
12
- unCheckedRecursive,
13
- checkedRecursive,
14
13
  filterFormattedDataById,
15
14
  findByFilter,
16
15
  getCheckedItems,
17
- updateReturnItems,
18
- recursiveReturnOnlyParent,
19
- removeChildrenIfParentChecked,
20
- getChildIds,
21
- areAllCheckedFalse
16
+ getDefaultCheckedItems,
17
+ recursiveCheckParent,
22
18
  } from "./_helper_functions";
23
19
 
24
20
  type MultiLevelSelectProps = {
@@ -52,6 +48,8 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
52
48
 
53
49
  const dropdownRef = useRef(null);
54
50
 
51
+ //state for expanded property
52
+ const [expanded, setExpanded] = useState([]);
55
53
  //state for whether dropdown is open or closed
56
54
  const [isClosed, setIsClosed] = useState(true);
57
55
  //state from onchange for textinput, to use for filtering to create typeahead
@@ -60,64 +58,102 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
60
58
  const [returnedArray, setReturnedArray] = useState([]);
61
59
  //formattedData with checked and parent_id added
62
60
  const [formattedData, setFormattedData] = useState([]);
63
- //toggle chevron in dropdown
64
- //@ts-ignore
65
- const [isToggled, setIsToggled] = useState<{ [id: number]: boolean }>({});
66
61
  //state for return for default
67
62
  const [defaultReturn, setDefaultReturn] = useState([]);
68
63
 
69
64
  useEffect(() => {
70
- let el = document.getElementById(`pb_data_wrapper_${id}`);
71
- if (el) {
72
- el.setAttribute(
73
- "data-tree",
74
- JSON.stringify(returnAllSelected ? returnedArray : defaultReturn)
75
- );
76
- }
77
- returnAllSelected
78
- ? onSelect(returnedArray)
79
- : onSelect(
80
- defaultReturn.filter(
81
- (item, index, self) =>
82
- index === self.findIndex((obj) => obj.id === item.id)
83
- )
84
- );
85
- }, [returnedArray, defaultReturn]);
86
-
87
- useEffect(() => {
88
- console.log("TREEDATA", treeData)
89
- //Create new formattedData array for use
90
65
  setFormattedData(addCheckedAndParentProperty(treeData));
91
- //if any items already checked in first render, set return accordingly
92
- const initialChecked = getCheckedItems(treeData)
93
- console.log("INITIAl CHECKED", initialChecked)
94
- const initialUnchecked = areAllCheckedFalse(treeData)
95
- console.log("INIITAL UNCHECKED", initialUnchecked)
96
- initialChecked && returnAllSelected && setReturnedArray(initialChecked)
97
- initialChecked && !returnAllSelected && setDefaultReturn(initialChecked)
98
-
99
66
  }, [treeData]);
100
67
 
101
- useEffect(()=> {
68
+ useEffect(() => {
69
+ if (returnAllSelected) {
70
+ setReturnedArray(getCheckedItems(formattedData));
71
+ } else {
72
+ setDefaultReturn(getDefaultCheckedItems(formattedData));
73
+ }
74
+ }, [formattedData]);
75
+
76
+ useEffect(() => {
102
77
  // Function to handle clicks outside the dropdown
103
78
  const handleClickOutside = (event: any) => {
104
79
  if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
105
80
  setIsClosed(true);
106
81
  }
107
82
  };
108
- // Attach the event listener
109
- window.addEventListener("click", handleClickOutside);
110
- // Clean up the event listener on unmount
111
- return () => {
112
- window.removeEventListener("click", handleClickOutside);
113
- };
114
- },[])
83
+ // Attach the event listener
84
+ window.addEventListener("click", handleClickOutside);
85
+ // Clean up the event listener on unmount
86
+ return () => {
87
+ window.removeEventListener("click", handleClickOutside);
88
+ };
89
+ }, []);
90
+
91
+ const modifyRecursive = (tree: { [key: string]: any }[], check: boolean) => {
92
+ if (!Array.isArray(tree)) {
93
+ return;
94
+ }
95
+ return tree.map((item: { [key: string]: any }) => {
96
+ item.checked = check;
97
+ item.children = modifyRecursive(item.children, check);
98
+ return item;
99
+ });
100
+ };
101
+
102
+ //iterate over tree, find item and set checked or unchecked
103
+ const modifyValue = (
104
+ id: string,
105
+ tree: { [key: string]: any }[],
106
+ check: boolean
107
+ ) => {
108
+ if (!Array.isArray(tree)) {
109
+ return;
110
+ }
111
+ return tree.map((item: any) => {
112
+ if (item.id != id) item.children = modifyValue(id, item.children, check);
113
+ else {
114
+ item.checked = check;
115
+ item.children = modifyRecursive(item.children, check);
116
+ }
117
+
118
+ return item;
119
+ });
120
+ };
121
+
122
+ //clone tree, check items + children
123
+ const checkItem = (item: { [key: string]: any }) => {
124
+ const tree = cloneDeep(formattedData);
125
+ if (returnAllSelected) {
126
+ return modifyValue(item.id, tree, true);
127
+ } else {
128
+ const checkedTree = modifyValue(item.id, tree, true);
129
+ return recursiveCheckParent(item, checkedTree);
130
+ }
131
+ };
132
+
133
+ //clone tree, uncheck items + children
134
+ const unCheckItem = (item: { [key: string]: any }) => {
135
+ const tree = cloneDeep(formattedData);
136
+ if (returnAllSelected) {
137
+ return modifyValue(item.id, tree, false);
138
+ } else {
139
+ const uncheckedTree = modifyValue(item.id, tree, false);
140
+ return getAncestorsOfUnchecked(uncheckedTree, item);
141
+ }
142
+ };
143
+
144
+ //setformattedData with proper properties
145
+ const changeItem = (item: { [key: string]: any }, check: boolean) => {
146
+ const tree = check ? checkItem(item) : unCheckItem(item);
147
+ setFormattedData(tree);
148
+
149
+ return tree;
150
+ };
115
151
 
116
152
  //function to map over data and add parent_id + depth property to each item
117
153
  const addCheckedAndParentProperty = (
118
154
  treeData: { [key: string]: any }[],
119
155
  parent_id: string = null,
120
- depth: number = 0,
156
+ depth: number = 0
121
157
  ) => {
122
158
  if (!Array.isArray(treeData)) {
123
159
  return;
@@ -129,10 +165,14 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
129
165
  depth,
130
166
  };
131
167
  if (newItem.children && newItem.children.length > 0) {
168
+ const children =
169
+ item.checked && !returnAllSelected
170
+ ? modifyRecursive(item.children, true)
171
+ : item.children;
132
172
  newItem.children = addCheckedAndParentProperty(
133
- newItem.children,
173
+ children,
134
174
  newItem.id,
135
- depth + 1,
175
+ depth + 1
136
176
  );
137
177
  }
138
178
  return newItem;
@@ -143,37 +183,13 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
143
183
  const handlePillClose = (event: any, clickedItem: { [key: string]: any }) => {
144
184
  // prevents the dropdown from closing when clicking on the pill
145
185
  event.stopPropagation();
186
+ const updatedTree = changeItem(clickedItem, false);
146
187
  //logic for removing items from returnArray or defaultReturn when pills clicked
147
188
  if (returnAllSelected) {
148
- if (returnedArray.includes(clickedItem)) {
149
- if (clickedItem.children && clickedItem.children.length > 0) {
150
- const childrenOfChecked = getChildIds(clickedItem, returnedArray);
151
- const updatedFiltered = returnedArray
152
- .filter((item) => item !== clickedItem)
153
- .filter((item) => !childrenOfChecked.includes(item.id));
154
- setReturnedArray(updatedFiltered);
155
- } else {
156
- const updatedFiltered = returnedArray.filter(
157
- (item) => item !== clickedItem
158
- );
159
- setReturnedArray(updatedFiltered);
160
- }
161
- }
189
+ onSelect(getCheckedItems(updatedTree));
162
190
  } else {
163
- if (defaultReturn.includes(clickedItem)) {
164
- getAncestorsOfUnchecked(formattedData, clickedItem);
165
- const newChecked = getCheckedItems(formattedData);
166
- const filteredReturn = updateReturnItems(newChecked).filter(
167
- (item) => item.id !== clickedItem.id
168
- );
169
- setDefaultReturn(filteredReturn);
170
- }
171
- }
172
- if (clickedItem.children && clickedItem.children.length > 0) {
173
- unCheckedRecursive(clickedItem);
191
+ onSelect(getDefaultCheckedItems(updatedTree));
174
192
  }
175
- //logic to uncheck clickedItem in formattedData
176
- unCheckIt(formattedData, clickedItem.id);
177
193
  };
178
194
 
179
195
  //handle click on input wrapper(entire div with pills, typeahead, etc) so it doesn't close when input or form pill is clicked
@@ -189,95 +205,36 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
189
205
  };
190
206
 
191
207
  //Main function to handle any click inside dropdown
192
- const handledropdownItemClick = (e: any) => {
208
+ const handledropdownItemClick = (e: any, check: boolean) => {
193
209
  const clickedItem = e.target.parentNode.id;
194
210
  //setting filterItem to "" will clear textinput and clear typeahead
195
211
  setFilterItem("");
196
212
 
197
213
  const filtered = filterFormattedDataById(formattedData, clickedItem);
198
- //check and uncheck all children of checked/unchecked parent item
199
- if (filtered[0].children && filtered[0].children.length > 0) {
200
- if (filtered[0].checked) {
201
- filtered[0].children.forEach((item: { [key: string]: any }) => {
202
- checkedRecursive(item);
203
- });
204
- } else if (!filtered[0].checked) {
205
- filtered[0].children.forEach((item: { [key: string]: any }) => {
206
- unCheckedRecursive(item);
207
- });
208
- }
209
- }
210
-
211
- const checkedItems = getCheckedItems(formattedData);
212
-
213
- //checking and unchecking items for returnAllSelected variant
214
- if (returnedArray.includes(filtered[0])) {
215
- if (!filtered[0].checked) {
216
- if (filtered[0].children && filtered[0].children.length > 0) {
217
- const childrenOfChecked = getChildIds(filtered[0], returnedArray);
218
- const updatedFiltered = returnedArray
219
- .filter((item) => item !== filtered[0])
220
- .filter((item) => !childrenOfChecked.includes(item.id));
221
-
222
- setReturnedArray(updatedFiltered);
223
- } else {
224
- const updatedFiltered = returnedArray.filter(
225
- (item) => item !== filtered[0]
226
- );
227
- setReturnedArray(updatedFiltered);
228
- }
229
- }
214
+ const updatedTree = changeItem(filtered[0], check);
215
+ console.log(updatedTree);
216
+ if (returnAllSelected) {
217
+ onSelect(getCheckedItems(updatedTree));
230
218
  } else {
231
- setReturnedArray(checkedItems);
232
- }
233
-
234
- //when item is unchecked for default variant
235
- if (!filtered[0].checked && !returnAllSelected) {
236
- //uncheck parent and grandparent if any child unchecked
237
- getAncestorsOfUnchecked(formattedData, filtered[0]);
238
-
239
- const newChecked = getCheckedItems(formattedData);
240
- //get all checked items, and filter to check if all children checked, if yes return only parent
241
- const filteredReturn = updateReturnItems(newChecked);
242
- setDefaultReturn(filteredReturn);
243
- }
244
-
245
- //when item is checked for default variant
246
- if (!returnAllSelected && filtered[0].checked) {
247
- //if checked item has children
248
- if (filtered[0].children && filtered[0].children.length > 0) {
249
- removeChildrenIfParentChecked(
250
- filtered[0],
251
- defaultReturn,
252
- setDefaultReturn
253
- );
254
- }
255
-
256
- //if clicked item has parent_id, find parent and check if all children checked or not
257
- if (filtered[0].parent_id !== null) {
258
- recursiveReturnOnlyParent(
259
- filtered[0],
260
- formattedData,
261
- defaultReturn,
262
- setDefaultReturn
263
- );
264
- } else {
265
- setDefaultReturn([filtered[0]]);
266
- }
219
+ onSelect(getDefaultCheckedItems(updatedTree));
267
220
  }
268
221
  };
269
222
 
223
+ const isExpanded = (item: any) => expanded.indexOf(item.id) > -1;
224
+
270
225
  //handle click on chevron toggles in dropdown
271
226
  const handleToggleClick = (id: string, event: React.MouseEvent) => {
272
227
  event.stopPropagation();
273
- setIsToggled((prevState: { [id: string]: boolean }) => ({
274
- ...prevState,
275
- [id]: !prevState[id],
276
- }));
277
228
  const clickedItem = filterFormattedDataById(formattedData, id);
278
-
279
229
  if (clickedItem) {
280
- clickedItem[0].expanded = !clickedItem[0].expanded;
230
+ let expandedArray = [...expanded];
231
+ const itemExpanded = isExpanded(clickedItem[0]);
232
+
233
+ if (itemExpanded)
234
+ expandedArray = expandedArray.filter((i) => i != clickedItem[0].id);
235
+ else expandedArray.push(clickedItem[0].id);
236
+
237
+ setExpanded(expandedArray);
281
238
  }
282
239
  };
283
240
 
@@ -289,23 +246,23 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
289
246
  items.map((item: { [key: string]: any }) => {
290
247
  return (
291
248
  <>
292
- <li
293
- key={item.id}
294
- className="dropdown_item"
295
- data-name={item.id}
296
- >
249
+ <li key={item.id} className="dropdown_item" data-name={item.id}>
297
250
  <div className="dropdown_item_checkbox_row">
298
251
  <div
299
- key={
300
- item.expanded ? "chevron-down" : "chevron-right"
301
- }
252
+ key={isExpanded(item) ? "chevron-down" : "chevron-right"}
302
253
  >
303
254
  <CircleIconButton
304
255
  icon={
305
- item.expanded ? "chevron-down" : "chevron-right"
256
+ isExpanded(item) ? "chevron-down" : "chevron-right"
257
+ }
258
+ className={
259
+ item.children && item.children.length > 0
260
+ ? ""
261
+ : "toggle_icon"
262
+ }
263
+ onClick={(event: any) =>
264
+ handleToggleClick(item.id, event)
306
265
  }
307
- className={item.children && item.children.length > 0 ? "" : "toggle_icon"}
308
- onClick={(event) => handleToggleClick(item.id, event)}
309
266
  variant="link"
310
267
  />
311
268
  </div>
@@ -316,13 +273,12 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
316
273
  name={item.label}
317
274
  value={item.label}
318
275
  onChange={(e) => {
319
- item.checked = !item.checked;
320
- handledropdownItemClick(e);
276
+ handledropdownItemClick(e, !item.checked);
321
277
  }}
322
278
  />
323
279
  </Checkbox>
324
280
  </div>
325
- {item.expanded &&
281
+ {isExpanded(item) &&
326
282
  item.children &&
327
283
  item.children.length > 0 &&
328
284
  !filterItem && ( // Show children if expanded is true
@@ -347,25 +303,20 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
347
303
  key={index}
348
304
  text={item.label}
349
305
  size="small"
350
- onClick={(event) => handlePillClose(event, item)}
306
+ onClick={(event: any) => handlePillClose(event, item)}
351
307
  />
352
308
  ))
353
309
  : null}
354
310
  {!returnAllSelected &&
355
311
  defaultReturn.length !== 0 &&
356
- defaultReturn
357
- .filter(
358
- (item, index, self) =>
359
- index === self.findIndex((obj) => obj.id === item.id)
360
- )
361
- .map((item, index) => (
362
- <FormPill
363
- key={index}
364
- text={item.label}
365
- size="small"
366
- onClick={(event) => handlePillClose(event, item)}
367
- />
368
- ))}
312
+ defaultReturn.map((item, index) => (
313
+ <FormPill
314
+ key={index}
315
+ text={item.label}
316
+ size="small"
317
+ onClick={(event: any) => handlePillClose(event, item)}
318
+ />
319
+ ))}
369
320
  {returnedArray.length !== 0 && returnAllSelected && <br />}
370
321
  {defaultReturn.length !== 0 && !returnAllSelected && <br />}
371
322
  <input