From 27ffdf01b09eb69d0ce61212017f3f292176da0e Mon Sep 17 00:00:00 2001
From: Tristan Timblin <ttimblin@fiskerinc.com>
Date: Wed, 2 Aug 2023 15:44:08 -0400
Subject: [PATCH] CEC-4564: add visual nesting to CAN signal control (#406)

* add TrieSelect

* setup menu button

* CEC-4564: add trie select component

* add visual nesting

* remove unused imports
---
 .../__snapshots__/index.test.jsx.snap         |   73 +-
 .../CANSelfServe/SelfServe/index.jsx          |    2 +-
 .../Controls/TrieSelect/TrieSelect.jsx        |   86 +-
 .../Controls/TrieSelect/TrieSelect.test.tsx   |    4 +-
 .../__snapshots__/TrieSelect.test.tsx.snap    | 1620 +++++++++--------
 src/components/Controls/TrieSelect/index.js   |    2 +-
 src/components/useStyles.jsx                  |    1 +
 7 files changed, 852 insertions(+), 936 deletions(-)

diff --git a/src/components/CANSelfServe/SelfServe/__snapshots__/index.test.jsx.snap b/src/components/CANSelfServe/SelfServe/__snapshots__/index.test.jsx.snap
index 5e55a76..907fc20 100644
--- a/src/components/CANSelfServe/SelfServe/__snapshots__/index.test.jsx.snap
+++ b/src/components/CANSelfServe/SelfServe/__snapshots__/index.test.jsx.snap
@@ -338,76 +338,9 @@ exports[`Render Render 1`] = `
           <div
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
           >
-            <div
-              class="MuiBox-root MuiBox-root-0"
-            >
-              <button
-                class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary Mui-disabled Mui-disabled"
-                disabled=""
-                tabindex="-1"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label"
-                >
-                  Select CAN Signals
-                </span>
-              </button>
-              <label
-                class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementStart"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
-                >
-                  <span
-                    class="MuiIconButton-label"
-                  >
-                    <input
-                      checked=""
-                      class="PrivateSwitchBase-input-0"
-                      data-indeterminate="false"
-                      type="checkbox"
-                      value=""
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
-                      />
-                    </svg>
-                  </span>
-                  <span
-                    class="MuiTouchRipple-root"
-                  />
-                </span>
-                <span
-                  class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
-                >
-                  Select All 0
-                </span>
-              </label>
-            </div>
-            <div
-              class="MuiCollapse-root MuiCollapse-hidden"
-              style="min-height: 0px;"
-            >
-              <div
-                class="MuiCollapse-wrapper"
-              >
-                <div
-                  class="MuiCollapse-wrapperInner"
-                >
-                  <ul
-                    class="MuiList-root MuiList-padding"
-                  />
-                </div>
-              </div>
-            </div>
+            <ul
+              class="MuiList-root MuiList-padding"
+            />
             <ul
               class="makeStyles-chipList-0"
             />
diff --git a/src/components/CANSelfServe/SelfServe/index.jsx b/src/components/CANSelfServe/SelfServe/index.jsx
index a7ae80b..723ebce 100644
--- a/src/components/CANSelfServe/SelfServe/index.jsx
+++ b/src/components/CANSelfServe/SelfServe/index.jsx
@@ -169,7 +169,7 @@ const MainForm = ({ id }) => {
         </Grid>
         <Grid item xs={12}>
           <TrieSelect
-            label="Select CAN Signals"
+            label="All CAN Signals"
             classification="Signals"
             options={canSignals.map((signal => signal.signal_name))}
             onChange={setSelectedCanSignals}
diff --git a/src/components/Controls/TrieSelect/TrieSelect.jsx b/src/components/Controls/TrieSelect/TrieSelect.jsx
index a4a85f0..a62df9e 100644
--- a/src/components/Controls/TrieSelect/TrieSelect.jsx
+++ b/src/components/Controls/TrieSelect/TrieSelect.jsx
@@ -1,10 +1,10 @@
-import React, { useState } from "react";
+import React from "react";
 import {
   Box,
-  Button,
   Checkbox,
   Chip,
   Collapse,
+  Divider,
   FormControlLabel,
   List,
   ListItem,
@@ -41,50 +41,19 @@ const TrieSelectList = ({
   classification,
   options,
 }) => {
-  const { selected, setSelected, remove } = useTrieSelect();
-  const [open, setOpen] = useState(false);
+  const { selected, remove } = useTrieSelect();
   const classes = useStyles();
   const trie = new Trie(options);
 
-  const handleExpand = () => {
-    setOpen(open => !open);
-  };
-
-  const handleSelectAll = () => {
-    setSelected((selected) => {
-      if (selected.length === 0) {
-        return options;
-      }
-
-      return [];
-    })
-  }
-
   return (
     <>
-      <Box sx={{ display: "flex", alignItems: "center" }}>
-        <Button onClick={handleExpand} variant="contained" color="primary" disabled={options.length === 0}>
-          {label}
-        </Button>
-        <FormControlLabel
-          label={`Select All ${options.length}`}
-          labelPlacement="start"
-          control={
-            <Checkbox
-              checked={selected.length === options.length}
-              onClick={handleSelectAll}
-            />
-          }
+      <List>
+        <TrieSelectLevel
+          node={trie.getRoot()}
+          classification={classification}
+          label={label}
         />
-      </Box>
-      <Collapse in={open}>
-        <List>
-          <TrieSelectLevel
-            node={trie.getRoot()}
-            classification={classification}
-          />
-        </List>
-      </Collapse>
+      </List>
       <ul className={classes.chipList}>
         {selected.map((signal) => {
           return (
@@ -102,13 +71,18 @@ const TrieSelectLevel = ({
   prefix = "",
   node,
   children,
-  classification
+  classification,
+  label,
+  level = -1,
 }) => {
   const classes = useStyles();
   const { selected, add, remove } = useTrieSelect();
   const [open, setOpen] = React.useState(false);
   const completeChildren = Object.values(node.children).filter(child => child.isComplete);
+  const hasCompleteChildren = completeChildren.length > 0;
   const descendantCount = `${node.count} ${classification}`;
+  const isParentOfMultiple = completeChildren.length > 1;
+  const isAdoptiveParentOfMultiple = completeChildren.length <= 1 && node.count > 1;
 
   const handleExpand = () => {
     setOpen(open => !open);
@@ -140,7 +114,9 @@ const TrieSelectLevel = ({
     return Array.from(result);
   }
 
-  const listItems = (
+  const indent = (level) => `${12 * level}px`;
+
+  const listItems = (level) => (
     <>
       {children}
       {Object.values(node.children).map((child) => {
@@ -152,13 +128,16 @@ const TrieSelectLevel = ({
             node={child}
             key={fullName}
             classification={classification}
+            level={level}
           >
             {child.isComplete && (
               <ListItem className={classes.whiteBackground}>
-                <ListItemIcon>
-                  <Checkbox checked={isChecked} onClick={() => handleCheck([fullName], isChecked)} />
-                </ListItemIcon>
-                <ListItemText primary={fullName} />
+                <Box sx={{ paddingLeft: indent(level), display: "flex", alignItems: "center" }}>
+                  <ListItemIcon>
+                    <Checkbox checked={isChecked} onClick={() => handleCheck([fullName], isChecked)} />
+                  </ListItemIcon>
+                  <ListItemText primary={fullName} />
+                </Box>
               </ListItem>
             )}
           </TrieSelectLevel>
@@ -167,15 +146,15 @@ const TrieSelectLevel = ({
     </>
   );
 
-  const isParentOfMultiple = completeChildren.length > 1;
-  const isAdoptiveParentOfMultiple = completeChildren.length <= 1 && node.count > 1;
   if (isParentOfMultiple || isAdoptiveParentOfMultiple) {
     const allDescendants = getWords(node, prefix);
     const isSelectAll = allDescendants.every(descendant => selected.includes(descendant));
     return (
       <>
-        <ListItem onClick={handleExpand} divider>
-          <ListItemText primary={prefix} secondary={descendantCount} />
+        <ListItem onClick={handleExpand} divider className={classes.defaultBackground}>
+          <Box sx={{ paddingLeft: indent(level) }}>
+            <ListItemText primary={prefix === "" ? label : prefix} secondary={descendantCount} />
+          </Box>
           <ListItemSecondaryAction>
             <Box sx={{ display: "flex", alignItems: "center", gap: "16px" }}>
               <FormControlLabel
@@ -188,18 +167,19 @@ const TrieSelectLevel = ({
                   />
                 }
               />
-              {open ? <ExpandLess /> : <ExpandMore />}
+              {open ? (<ExpandLess />) : (<ExpandMore />)}
             </Box>
           </ListItemSecondaryAction>
         </ListItem>
         <Collapse in={open}>
           <List>
-            {listItems}
+            {listItems(level + 1)}
           </List>
+          {hasCompleteChildren && <Divider />}
         </Collapse>
       </>
     )
   }
 
-  return listItems;
+  return listItems(level);
 }
diff --git a/src/components/Controls/TrieSelect/TrieSelect.test.tsx b/src/components/Controls/TrieSelect/TrieSelect.test.tsx
index e2d2bc8..b88fabf 100644
--- a/src/components/Controls/TrieSelect/TrieSelect.test.tsx
+++ b/src/components/Controls/TrieSelect/TrieSelect.test.tsx
@@ -38,7 +38,7 @@ describe("TrieSelect", () => {
   it("properly passes payload to callback", async () => {
     const mockCallback = jest.fn();
 
-    const { getByText } = render(
+    const { getAllByText } = render(
       <TrieSelect
         label={"The input label"}
         classification="Signal"
@@ -47,7 +47,7 @@ describe("TrieSelect", () => {
       />
     );
 
-    const selectAll = getByText("Select All 8");
+    const selectAll = getAllByText("Select All")[0];
     userEvent.click(selectAll);
     expect(mockCallback).toHaveBeenCalledWith(options);
   });
diff --git a/src/components/Controls/TrieSelect/__snapshots__/TrieSelect.test.tsx.snap b/src/components/Controls/TrieSelect/__snapshots__/TrieSelect.test.tsx.snap
index ae32ef1..c58e306 100644
--- a/src/components/Controls/TrieSelect/__snapshots__/TrieSelect.test.tsx.snap
+++ b/src/components/Controls/TrieSelect/__snapshots__/TrieSelect.test.tsx.snap
@@ -2,136 +2,56 @@
 
 exports[`TrieSelect Render 1`] = `
 <div>
-  <div
-    class="MuiBox-root MuiBox-root-0"
+  <ul
+    class="MuiList-root MuiList-padding"
   >
-    <button
-      class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary"
-      tabindex="0"
-      type="button"
-    >
-      <span
-        class="MuiButton-label"
-      >
-        The button label
-      </span>
-      <span
-        class="MuiTouchRipple-root"
-      />
-    </button>
-    <label
-      class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementStart"
-    >
-      <span
-        aria-disabled="false"
-        class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
-      >
-        <span
-          class="MuiIconButton-label"
-        >
-          <input
-            class="PrivateSwitchBase-input-0"
-            data-indeterminate="false"
-            type="checkbox"
-            value=""
-          />
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root"
-            focusable="false"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
-            />
-          </svg>
-        </span>
-        <span
-          class="MuiTouchRipple-root"
-        />
-      </span>
-      <span
-        class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
-      >
-        Select All 8
-      </span>
-    </label>
-  </div>
-  <div
-    class="MuiCollapse-root MuiCollapse-hidden"
-    style="min-height: 0px;"
-  >
-    <div
-      class="MuiCollapse-wrapper"
+    <li
+      class="MuiListItem-container"
     >
       <div
-        class="MuiCollapse-wrapperInner"
+        class="MuiListItem-root makeStyles-defaultBackground-0 MuiListItem-gutters MuiListItem-divider MuiListItem-secondaryAction"
       >
-        <ul
-          class="MuiList-root MuiList-padding"
+        <div
+          class="MuiBox-root MuiBox-root-0"
         >
-          <li
-            class="MuiListItem-container"
+          <div
+            class="MuiListItemText-root MuiListItemText-multiline"
           >
-            <div
-              class="MuiListItem-root MuiListItem-gutters MuiListItem-divider MuiListItem-secondaryAction"
+            <span
+              class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
             >
-              <div
-                class="MuiListItemText-root MuiListItemText-multiline"
+              The button label
+            </span>
+            <p
+              class="MuiTypography-root MuiListItemText-secondary MuiTypography-body2 MuiTypography-colorTextSecondary MuiTypography-displayBlock"
+            >
+              8 Signal
+            </p>
+          </div>
+        </div>
+      </div>
+      <div
+        class="MuiListItemSecondaryAction-root"
+      >
+        <div
+          class="MuiBox-root MuiBox-root-0"
+        >
+          <label
+            class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementStart"
+          >
+            <span
+              aria-disabled="false"
+              class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+            >
+              <span
+                class="MuiIconButton-label"
               >
-                <span
-                  class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                <input
+                  class="PrivateSwitchBase-input-0"
+                  data-indeterminate="false"
+                  type="checkbox"
+                  value=""
                 />
-                <p
-                  class="MuiTypography-root MuiListItemText-secondary MuiTypography-body2 MuiTypography-colorTextSecondary MuiTypography-displayBlock"
-                >
-                  8 Signal
-                </p>
-              </div>
-            </div>
-            <div
-              class="MuiListItemSecondaryAction-root"
-            >
-              <div
-                class="MuiBox-root MuiBox-root-0"
-              >
-                <label
-                  class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementStart"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
-                  >
-                    <span
-                      class="MuiIconButton-label"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-0"
-                        data-indeterminate="false"
-                        type="checkbox"
-                        value=""
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
-                        />
-                      </svg>
-                    </span>
-                    <span
-                      class="MuiTouchRipple-root"
-                    />
-                  </span>
-                  <span
-                    class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
-                  >
-                    Select All
-                  </span>
-                </label>
                 <svg
                   aria-hidden="true"
                   class="MuiSvgIcon-root"
@@ -139,422 +59,148 @@ exports[`TrieSelect Render 1`] = `
                   viewBox="0 0 24 24"
                 >
                   <path
-                    d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
+                    d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                   />
                 </svg>
-              </div>
-            </div>
-          </li>
-          <div
-            class="MuiCollapse-root MuiCollapse-hidden"
-            style="min-height: 0px;"
+              </span>
+              <span
+                class="MuiTouchRipple-root"
+              />
+            </span>
+            <span
+              class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
+            >
+              Select All
+            </span>
+          </label>
+          <svg
+            aria-hidden="true"
+            class="MuiSvgIcon-root"
+            focusable="false"
+            viewBox="0 0 24 24"
           >
-            <div
-              class="MuiCollapse-wrapper"
+            <path
+              d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
+            />
+          </svg>
+        </div>
+      </div>
+    </li>
+    <div
+      class="MuiCollapse-root MuiCollapse-hidden"
+      style="min-height: 0px;"
+    >
+      <div
+        class="MuiCollapse-wrapper"
+      >
+        <div
+          class="MuiCollapse-wrapperInner"
+        >
+          <ul
+            class="MuiList-root MuiList-padding"
+          >
+            <li
+              class="MuiListItem-container"
             >
               <div
-                class="MuiCollapse-wrapperInner"
+                class="MuiListItem-root makeStyles-defaultBackground-0 MuiListItem-gutters MuiListItem-divider MuiListItem-secondaryAction"
               >
-                <ul
-                  class="MuiList-root MuiList-padding"
+                <div
+                  class="MuiBox-root MuiBox-root-0"
                 >
-                  <li
-                    class="MuiListItem-container"
-                  >
-                    <div
-                      class="MuiListItem-root MuiListItem-gutters MuiListItem-divider MuiListItem-secondaryAction"
-                    >
-                      <div
-                        class="MuiListItemText-root MuiListItemText-multiline"
-                      >
-                        <span
-                          class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
-                        >
-                          ace
-                        </span>
-                        <p
-                          class="MuiTypography-root MuiListItemText-secondary MuiTypography-body2 MuiTypography-colorTextSecondary MuiTypography-displayBlock"
-                        >
-                          4 Signal
-                        </p>
-                      </div>
-                    </div>
-                    <div
-                      class="MuiListItemSecondaryAction-root"
-                    >
-                      <div
-                        class="MuiBox-root MuiBox-root-0"
-                      >
-                        <label
-                          class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementStart"
-                        >
-                          <span
-                            aria-disabled="false"
-                            class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
-                          >
-                            <span
-                              class="MuiIconButton-label"
-                            >
-                              <input
-                                class="PrivateSwitchBase-input-0"
-                                data-indeterminate="false"
-                                type="checkbox"
-                                value=""
-                              />
-                              <svg
-                                aria-hidden="true"
-                                class="MuiSvgIcon-root"
-                                focusable="false"
-                                viewBox="0 0 24 24"
-                              >
-                                <path
-                                  d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
-                                />
-                              </svg>
-                            </span>
-                            <span
-                              class="MuiTouchRipple-root"
-                            />
-                          </span>
-                          <span
-                            class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
-                          >
-                            Select All
-                          </span>
-                        </label>
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
-                          />
-                        </svg>
-                      </div>
-                    </div>
-                  </li>
                   <div
-                    class="MuiCollapse-root MuiCollapse-hidden"
-                    style="min-height: 0px;"
+                    class="MuiListItemText-root MuiListItemText-multiline"
                   >
-                    <div
-                      class="MuiCollapse-wrapper"
+                    <span
+                      class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
                     >
-                      <div
-                        class="MuiCollapse-wrapperInner"
-                      >
-                        <ul
-                          class="MuiList-root MuiList-padding"
-                        >
-                          <li
-                            class="MuiListItem-root makeStyles-whiteBackground-0 MuiListItem-gutters"
-                          >
-                            <div
-                              class="MuiListItemIcon-root"
-                            >
-                              <span
-                                aria-disabled="false"
-                                class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
-                              >
-                                <span
-                                  class="MuiIconButton-label"
-                                >
-                                  <input
-                                    class="PrivateSwitchBase-input-0"
-                                    data-indeterminate="false"
-                                    type="checkbox"
-                                    value=""
-                                  />
-                                  <svg
-                                    aria-hidden="true"
-                                    class="MuiSvgIcon-root"
-                                    focusable="false"
-                                    viewBox="0 0 24 24"
-                                  >
-                                    <path
-                                      d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
-                                    />
-                                  </svg>
-                                </span>
-                                <span
-                                  class="MuiTouchRipple-root"
-                                />
-                              </span>
-                            </div>
-                            <div
-                              class="MuiListItemText-root"
-                            >
-                              <span
-                                class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
-                              >
-                                ace
-                              </span>
-                            </div>
-                          </li>
-                          <li
-                            class="MuiListItem-container"
-                          >
-                            <div
-                              class="MuiListItem-root MuiListItem-gutters MuiListItem-divider MuiListItem-secondaryAction"
-                            >
-                              <div
-                                class="MuiListItemText-root MuiListItemText-multiline"
-                              >
-                                <span
-                                  class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
-                                >
-                                  ace_bev
-                                </span>
-                                <p
-                                  class="MuiTypography-root MuiListItemText-secondary MuiTypography-body2 MuiTypography-colorTextSecondary MuiTypography-displayBlock"
-                                >
-                                  3 Signal
-                                </p>
-                              </div>
-                            </div>
-                            <div
-                              class="MuiListItemSecondaryAction-root"
-                            >
-                              <div
-                                class="MuiBox-root MuiBox-root-0"
-                              >
-                                <label
-                                  class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementStart"
-                                >
-                                  <span
-                                    aria-disabled="false"
-                                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
-                                  >
-                                    <span
-                                      class="MuiIconButton-label"
-                                    >
-                                      <input
-                                        class="PrivateSwitchBase-input-0"
-                                        data-indeterminate="false"
-                                        type="checkbox"
-                                        value=""
-                                      />
-                                      <svg
-                                        aria-hidden="true"
-                                        class="MuiSvgIcon-root"
-                                        focusable="false"
-                                        viewBox="0 0 24 24"
-                                      >
-                                        <path
-                                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
-                                        />
-                                      </svg>
-                                    </span>
-                                    <span
-                                      class="MuiTouchRipple-root"
-                                    />
-                                  </span>
-                                  <span
-                                    class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
-                                  >
-                                    Select All
-                                  </span>
-                                </label>
-                                <svg
-                                  aria-hidden="true"
-                                  class="MuiSvgIcon-root"
-                                  focusable="false"
-                                  viewBox="0 0 24 24"
-                                >
-                                  <path
-                                    d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
-                                  />
-                                </svg>
-                              </div>
-                            </div>
-                          </li>
-                          <div
-                            class="MuiCollapse-root MuiCollapse-hidden"
-                            style="min-height: 0px;"
-                          >
-                            <div
-                              class="MuiCollapse-wrapper"
-                            >
-                              <div
-                                class="MuiCollapse-wrapperInner"
-                              >
-                                <ul
-                                  class="MuiList-root MuiList-padding"
-                                >
-                                  <li
-                                    class="MuiListItem-root makeStyles-whiteBackground-0 MuiListItem-gutters"
-                                  >
-                                    <div
-                                      class="MuiListItemIcon-root"
-                                    >
-                                      <span
-                                        aria-disabled="false"
-                                        class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
-                                      >
-                                        <span
-                                          class="MuiIconButton-label"
-                                        >
-                                          <input
-                                            class="PrivateSwitchBase-input-0"
-                                            data-indeterminate="false"
-                                            type="checkbox"
-                                            value=""
-                                          />
-                                          <svg
-                                            aria-hidden="true"
-                                            class="MuiSvgIcon-root"
-                                            focusable="false"
-                                            viewBox="0 0 24 24"
-                                          >
-                                            <path
-                                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
-                                            />
-                                          </svg>
-                                        </span>
-                                        <span
-                                          class="MuiTouchRipple-root"
-                                        />
-                                      </span>
-                                    </div>
-                                    <div
-                                      class="MuiListItemText-root"
-                                    >
-                                      <span
-                                        class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
-                                      >
-                                        ace_bev_one
-                                      </span>
-                                    </div>
-                                  </li>
-                                  <li
-                                    class="MuiListItem-root makeStyles-whiteBackground-0 MuiListItem-gutters"
-                                  >
-                                    <div
-                                      class="MuiListItemIcon-root"
-                                    >
-                                      <span
-                                        aria-disabled="false"
-                                        class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
-                                      >
-                                        <span
-                                          class="MuiIconButton-label"
-                                        >
-                                          <input
-                                            class="PrivateSwitchBase-input-0"
-                                            data-indeterminate="false"
-                                            type="checkbox"
-                                            value=""
-                                          />
-                                          <svg
-                                            aria-hidden="true"
-                                            class="MuiSvgIcon-root"
-                                            focusable="false"
-                                            viewBox="0 0 24 24"
-                                          >
-                                            <path
-                                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
-                                            />
-                                          </svg>
-                                        </span>
-                                        <span
-                                          class="MuiTouchRipple-root"
-                                        />
-                                      </span>
-                                    </div>
-                                    <div
-                                      class="MuiListItemText-root"
-                                    >
-                                      <span
-                                        class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
-                                      >
-                                        ace_bev_two
-                                      </span>
-                                    </div>
-                                  </li>
-                                  <li
-                                    class="MuiListItem-root makeStyles-whiteBackground-0 MuiListItem-gutters"
-                                  >
-                                    <div
-                                      class="MuiListItemIcon-root"
-                                    >
-                                      <span
-                                        aria-disabled="false"
-                                        class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
-                                      >
-                                        <span
-                                          class="MuiIconButton-label"
-                                        >
-                                          <input
-                                            class="PrivateSwitchBase-input-0"
-                                            data-indeterminate="false"
-                                            type="checkbox"
-                                            value=""
-                                          />
-                                          <svg
-                                            aria-hidden="true"
-                                            class="MuiSvgIcon-root"
-                                            focusable="false"
-                                            viewBox="0 0 24 24"
-                                          >
-                                            <path
-                                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
-                                            />
-                                          </svg>
-                                        </span>
-                                        <span
-                                          class="MuiTouchRipple-root"
-                                        />
-                                      </span>
-                                    </div>
-                                    <div
-                                      class="MuiListItemText-root"
-                                    >
-                                      <span
-                                        class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
-                                      >
-                                        ace_bev_three
-                                      </span>
-                                    </div>
-                                  </li>
-                                </ul>
-                              </div>
-                            </div>
-                          </div>
-                        </ul>
-                      </div>
-                    </div>
+                      ace
+                    </span>
+                    <p
+                      class="MuiTypography-root MuiListItemText-secondary MuiTypography-body2 MuiTypography-colorTextSecondary MuiTypography-displayBlock"
+                    >
+                      4 Signal
+                    </p>
                   </div>
-                  <li
-                    class="MuiListItem-container"
+                </div>
+              </div>
+              <div
+                class="MuiListItemSecondaryAction-root"
+              >
+                <div
+                  class="MuiBox-root MuiBox-root-0"
+                >
+                  <label
+                    class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementStart"
                   >
-                    <div
-                      class="MuiListItem-root MuiListItem-gutters MuiListItem-divider MuiListItem-secondaryAction"
+                    <span
+                      aria-disabled="false"
+                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
                     >
-                      <div
-                        class="MuiListItemText-root MuiListItemText-multiline"
+                      <span
+                        class="MuiIconButton-label"
                       >
-                        <span
-                          class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                        <input
+                          class="PrivateSwitchBase-input-0"
+                          data-indeterminate="false"
+                          type="checkbox"
+                          value=""
+                        />
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root"
+                          focusable="false"
+                          viewBox="0 0 24 24"
                         >
-                          bev
-                        </span>
-                        <p
-                          class="MuiTypography-root MuiListItemText-secondary MuiTypography-body2 MuiTypography-colorTextSecondary MuiTypography-displayBlock"
-                        >
-                          4 Signal
-                        </p>
-                      </div>
-                    </div>
-                    <div
-                      class="MuiListItemSecondaryAction-root"
+                          <path
+                            d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                          />
+                        </svg>
+                      </span>
+                      <span
+                        class="MuiTouchRipple-root"
+                      />
+                    </span>
+                    <span
+                      class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
+                    >
+                      Select All
+                    </span>
+                  </label>
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
+                    />
+                  </svg>
+                </div>
+              </div>
+            </li>
+            <div
+              class="MuiCollapse-root MuiCollapse-hidden"
+              style="min-height: 0px;"
+            >
+              <div
+                class="MuiCollapse-wrapper"
+              >
+                <div
+                  class="MuiCollapse-wrapperInner"
+                >
+                  <ul
+                    class="MuiList-root MuiList-padding"
+                  >
+                    <li
+                      class="MuiListItem-root makeStyles-whiteBackground-0 MuiListItem-gutters"
                     >
                       <div
                         class="MuiBox-root MuiBox-root-0"
                       >
-                        <label
-                          class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementStart"
+                        <div
+                          class="MuiListItemIcon-root"
                         >
                           <span
                             aria-disabled="false"
@@ -584,112 +230,120 @@ exports[`TrieSelect Render 1`] = `
                               class="MuiTouchRipple-root"
                             />
                           </span>
-                          <span
-                            class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
-                          >
-                            Select All
-                          </span>
-                        </label>
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root"
-                          focusable="false"
-                          viewBox="0 0 24 24"
+                        </div>
+                        <div
+                          class="MuiListItemText-root"
                         >
-                          <path
-                            d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
-                          />
-                        </svg>
+                          <span
+                            class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                          >
+                            ace
+                          </span>
+                        </div>
                       </div>
-                    </div>
-                  </li>
-                  <div
-                    class="MuiCollapse-root MuiCollapse-hidden"
-                    style="min-height: 0px;"
-                  >
-                    <div
-                      class="MuiCollapse-wrapper"
+                    </li>
+                    <li
+                      class="MuiListItem-container"
                     >
                       <div
-                        class="MuiCollapse-wrapperInner"
+                        class="MuiListItem-root makeStyles-defaultBackground-0 MuiListItem-gutters MuiListItem-divider MuiListItem-secondaryAction"
                       >
-                        <ul
-                          class="MuiList-root MuiList-padding"
+                        <div
+                          class="MuiBox-root MuiBox-root-0"
                         >
-                          <li
-                            class="MuiListItem-root makeStyles-whiteBackground-0 MuiListItem-gutters"
+                          <div
+                            class="MuiListItemText-root MuiListItemText-multiline"
                           >
-                            <div
-                              class="MuiListItemIcon-root"
+                            <span
+                              class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                            >
+                              ace_bev
+                            </span>
+                            <p
+                              class="MuiTypography-root MuiListItemText-secondary MuiTypography-body2 MuiTypography-colorTextSecondary MuiTypography-displayBlock"
+                            >
+                              3 Signal
+                            </p>
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        class="MuiListItemSecondaryAction-root"
+                      >
+                        <div
+                          class="MuiBox-root MuiBox-root-0"
+                        >
+                          <label
+                            class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementStart"
+                          >
+                            <span
+                              aria-disabled="false"
+                              class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
                             >
                               <span
-                                aria-disabled="false"
-                                class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+                                class="MuiIconButton-label"
                               >
-                                <span
-                                  class="MuiIconButton-label"
-                                >
-                                  <input
-                                    class="PrivateSwitchBase-input-0"
-                                    data-indeterminate="false"
-                                    type="checkbox"
-                                    value=""
-                                  />
-                                  <svg
-                                    aria-hidden="true"
-                                    class="MuiSvgIcon-root"
-                                    focusable="false"
-                                    viewBox="0 0 24 24"
-                                  >
-                                    <path
-                                      d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
-                                    />
-                                  </svg>
-                                </span>
-                                <span
-                                  class="MuiTouchRipple-root"
+                                <input
+                                  class="PrivateSwitchBase-input-0"
+                                  data-indeterminate="false"
+                                  type="checkbox"
+                                  value=""
                                 />
+                                <svg
+                                  aria-hidden="true"
+                                  class="MuiSvgIcon-root"
+                                  focusable="false"
+                                  viewBox="0 0 24 24"
+                                >
+                                  <path
+                                    d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                                  />
+                                </svg>
                               </span>
-                            </div>
-                            <div
-                              class="MuiListItemText-root"
-                            >
                               <span
-                                class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
-                              >
-                                bev
-                              </span>
-                            </div>
-                          </li>
-                          <li
-                            class="MuiListItem-container"
-                          >
-                            <div
-                              class="MuiListItem-root MuiListItem-gutters MuiListItem-divider MuiListItem-secondaryAction"
+                                class="MuiTouchRipple-root"
+                              />
+                            </span>
+                            <span
+                              class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
                             >
-                              <div
-                                class="MuiListItemText-root MuiListItemText-multiline"
-                              >
-                                <span
-                                  class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
-                                >
-                                  bev_chaz
-                                </span>
-                                <p
-                                  class="MuiTypography-root MuiListItemText-secondary MuiTypography-body2 MuiTypography-colorTextSecondary MuiTypography-displayBlock"
-                                >
-                                  3 Signal
-                                </p>
-                              </div>
-                            </div>
-                            <div
-                              class="MuiListItemSecondaryAction-root"
+                              Select All
+                            </span>
+                          </label>
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root"
+                            focusable="false"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
+                            />
+                          </svg>
+                        </div>
+                      </div>
+                    </li>
+                    <div
+                      class="MuiCollapse-root MuiCollapse-hidden"
+                      style="min-height: 0px;"
+                    >
+                      <div
+                        class="MuiCollapse-wrapper"
+                      >
+                        <div
+                          class="MuiCollapse-wrapperInner"
+                        >
+                          <ul
+                            class="MuiList-root MuiList-padding"
+                          >
+                            <li
+                              class="MuiListItem-root makeStyles-whiteBackground-0 MuiListItem-gutters"
                             >
                               <div
                                 class="MuiBox-root MuiBox-root-0"
                               >
-                                <label
-                                  class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementStart"
+                                <div
+                                  class="MuiListItemIcon-root"
                                 >
                                   <span
                                     aria-disabled="false"
@@ -719,12 +373,317 @@ exports[`TrieSelect Render 1`] = `
                                       class="MuiTouchRipple-root"
                                     />
                                   </span>
+                                </div>
+                                <div
+                                  class="MuiListItemText-root"
+                                >
                                   <span
-                                    class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
+                                    class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
                                   >
-                                    Select All
+                                    ace_bev_one
                                   </span>
-                                </label>
+                                </div>
+                              </div>
+                            </li>
+                            <li
+                              class="MuiListItem-root makeStyles-whiteBackground-0 MuiListItem-gutters"
+                            >
+                              <div
+                                class="MuiBox-root MuiBox-root-0"
+                              >
+                                <div
+                                  class="MuiListItemIcon-root"
+                                >
+                                  <span
+                                    aria-disabled="false"
+                                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+                                  >
+                                    <span
+                                      class="MuiIconButton-label"
+                                    >
+                                      <input
+                                        class="PrivateSwitchBase-input-0"
+                                        data-indeterminate="false"
+                                        type="checkbox"
+                                        value=""
+                                      />
+                                      <svg
+                                        aria-hidden="true"
+                                        class="MuiSvgIcon-root"
+                                        focusable="false"
+                                        viewBox="0 0 24 24"
+                                      >
+                                        <path
+                                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                                        />
+                                      </svg>
+                                    </span>
+                                    <span
+                                      class="MuiTouchRipple-root"
+                                    />
+                                  </span>
+                                </div>
+                                <div
+                                  class="MuiListItemText-root"
+                                >
+                                  <span
+                                    class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                                  >
+                                    ace_bev_two
+                                  </span>
+                                </div>
+                              </div>
+                            </li>
+                            <li
+                              class="MuiListItem-root makeStyles-whiteBackground-0 MuiListItem-gutters"
+                            >
+                              <div
+                                class="MuiBox-root MuiBox-root-0"
+                              >
+                                <div
+                                  class="MuiListItemIcon-root"
+                                >
+                                  <span
+                                    aria-disabled="false"
+                                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+                                  >
+                                    <span
+                                      class="MuiIconButton-label"
+                                    >
+                                      <input
+                                        class="PrivateSwitchBase-input-0"
+                                        data-indeterminate="false"
+                                        type="checkbox"
+                                        value=""
+                                      />
+                                      <svg
+                                        aria-hidden="true"
+                                        class="MuiSvgIcon-root"
+                                        focusable="false"
+                                        viewBox="0 0 24 24"
+                                      >
+                                        <path
+                                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                                        />
+                                      </svg>
+                                    </span>
+                                    <span
+                                      class="MuiTouchRipple-root"
+                                    />
+                                  </span>
+                                </div>
+                                <div
+                                  class="MuiListItemText-root"
+                                >
+                                  <span
+                                    class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                                  >
+                                    ace_bev_three
+                                  </span>
+                                </div>
+                              </div>
+                            </li>
+                          </ul>
+                          <hr
+                            class="MuiDivider-root"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </ul>
+                </div>
+              </div>
+            </div>
+            <li
+              class="MuiListItem-container"
+            >
+              <div
+                class="MuiListItem-root makeStyles-defaultBackground-0 MuiListItem-gutters MuiListItem-divider MuiListItem-secondaryAction"
+              >
+                <div
+                  class="MuiBox-root MuiBox-root-0"
+                >
+                  <div
+                    class="MuiListItemText-root MuiListItemText-multiline"
+                  >
+                    <span
+                      class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                    >
+                      bev
+                    </span>
+                    <p
+                      class="MuiTypography-root MuiListItemText-secondary MuiTypography-body2 MuiTypography-colorTextSecondary MuiTypography-displayBlock"
+                    >
+                      4 Signal
+                    </p>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="MuiListItemSecondaryAction-root"
+              >
+                <div
+                  class="MuiBox-root MuiBox-root-0"
+                >
+                  <label
+                    class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementStart"
+                  >
+                    <span
+                      aria-disabled="false"
+                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+                    >
+                      <span
+                        class="MuiIconButton-label"
+                      >
+                        <input
+                          class="PrivateSwitchBase-input-0"
+                          data-indeterminate="false"
+                          type="checkbox"
+                          value=""
+                        />
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                          />
+                        </svg>
+                      </span>
+                      <span
+                        class="MuiTouchRipple-root"
+                      />
+                    </span>
+                    <span
+                      class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
+                    >
+                      Select All
+                    </span>
+                  </label>
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
+                    />
+                  </svg>
+                </div>
+              </div>
+            </li>
+            <div
+              class="MuiCollapse-root MuiCollapse-hidden"
+              style="min-height: 0px;"
+            >
+              <div
+                class="MuiCollapse-wrapper"
+              >
+                <div
+                  class="MuiCollapse-wrapperInner"
+                >
+                  <ul
+                    class="MuiList-root MuiList-padding"
+                  >
+                    <li
+                      class="MuiListItem-root makeStyles-whiteBackground-0 MuiListItem-gutters"
+                    >
+                      <div
+                        class="MuiBox-root MuiBox-root-0"
+                      >
+                        <div
+                          class="MuiListItemIcon-root"
+                        >
+                          <span
+                            aria-disabled="false"
+                            class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+                          >
+                            <span
+                              class="MuiIconButton-label"
+                            >
+                              <input
+                                class="PrivateSwitchBase-input-0"
+                                data-indeterminate="false"
+                                type="checkbox"
+                                value=""
+                              />
+                              <svg
+                                aria-hidden="true"
+                                class="MuiSvgIcon-root"
+                                focusable="false"
+                                viewBox="0 0 24 24"
+                              >
+                                <path
+                                  d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                                />
+                              </svg>
+                            </span>
+                            <span
+                              class="MuiTouchRipple-root"
+                            />
+                          </span>
+                        </div>
+                        <div
+                          class="MuiListItemText-root"
+                        >
+                          <span
+                            class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                          >
+                            bev
+                          </span>
+                        </div>
+                      </div>
+                    </li>
+                    <li
+                      class="MuiListItem-container"
+                    >
+                      <div
+                        class="MuiListItem-root makeStyles-defaultBackground-0 MuiListItem-gutters MuiListItem-divider MuiListItem-secondaryAction"
+                      >
+                        <div
+                          class="MuiBox-root MuiBox-root-0"
+                        >
+                          <div
+                            class="MuiListItemText-root MuiListItemText-multiline"
+                          >
+                            <span
+                              class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                            >
+                              bev_chaz
+                            </span>
+                            <p
+                              class="MuiTypography-root MuiListItemText-secondary MuiTypography-body2 MuiTypography-colorTextSecondary MuiTypography-displayBlock"
+                            >
+                              3 Signal
+                            </p>
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        class="MuiListItemSecondaryAction-root"
+                      >
+                        <div
+                          class="MuiBox-root MuiBox-root-0"
+                        >
+                          <label
+                            class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementStart"
+                          >
+                            <span
+                              aria-disabled="false"
+                              class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+                            >
+                              <span
+                                class="MuiIconButton-label"
+                              >
+                                <input
+                                  class="PrivateSwitchBase-input-0"
+                                  data-indeterminate="false"
+                                  type="checkbox"
+                                  value=""
+                                />
                                 <svg
                                   aria-hidden="true"
                                   class="MuiSvgIcon-root"
@@ -732,54 +691,148 @@ exports[`TrieSelect Render 1`] = `
                                   viewBox="0 0 24 24"
                                 >
                                   <path
-                                    d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
+                                    d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                                   />
                                 </svg>
-                              </div>
-                            </div>
-                          </li>
-                          <div
-                            class="MuiCollapse-root MuiCollapse-hidden"
-                            style="min-height: 0px;"
+                              </span>
+                              <span
+                                class="MuiTouchRipple-root"
+                              />
+                            </span>
+                            <span
+                              class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
+                            >
+                              Select All
+                            </span>
+                          </label>
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root"
+                            focusable="false"
+                            viewBox="0 0 24 24"
                           >
-                            <div
-                              class="MuiCollapse-wrapper"
+                            <path
+                              d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
+                            />
+                          </svg>
+                        </div>
+                      </div>
+                    </li>
+                    <div
+                      class="MuiCollapse-root MuiCollapse-hidden"
+                      style="min-height: 0px;"
+                    >
+                      <div
+                        class="MuiCollapse-wrapper"
+                      >
+                        <div
+                          class="MuiCollapse-wrapperInner"
+                        >
+                          <ul
+                            class="MuiList-root MuiList-padding"
+                          >
+                            <li
+                              class="MuiListItem-container"
                             >
                               <div
-                                class="MuiCollapse-wrapperInner"
+                                class="MuiListItem-root makeStyles-defaultBackground-0 MuiListItem-gutters MuiListItem-divider MuiListItem-secondaryAction"
                               >
-                                <ul
-                                  class="MuiList-root MuiList-padding"
+                                <div
+                                  class="MuiBox-root MuiBox-root-0"
                                 >
-                                  <li
-                                    class="MuiListItem-container"
+                                  <div
+                                    class="MuiListItemText-root MuiListItemText-multiline"
                                   >
-                                    <div
-                                      class="MuiListItem-root MuiListItem-gutters MuiListItem-divider MuiListItem-secondaryAction"
+                                    <span
+                                      class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
                                     >
-                                      <div
-                                        class="MuiListItemText-root MuiListItemText-multiline"
+                                      bev_chaz_deep
+                                    </span>
+                                    <p
+                                      class="MuiTypography-root MuiListItemText-secondary MuiTypography-body2 MuiTypography-colorTextSecondary MuiTypography-displayBlock"
+                                    >
+                                      3 Signal
+                                    </p>
+                                  </div>
+                                </div>
+                              </div>
+                              <div
+                                class="MuiListItemSecondaryAction-root"
+                              >
+                                <div
+                                  class="MuiBox-root MuiBox-root-0"
+                                >
+                                  <label
+                                    class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementStart"
+                                  >
+                                    <span
+                                      aria-disabled="false"
+                                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+                                    >
+                                      <span
+                                        class="MuiIconButton-label"
                                       >
-                                        <span
-                                          class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                                        <input
+                                          class="PrivateSwitchBase-input-0"
+                                          data-indeterminate="false"
+                                          type="checkbox"
+                                          value=""
+                                        />
+                                        <svg
+                                          aria-hidden="true"
+                                          class="MuiSvgIcon-root"
+                                          focusable="false"
+                                          viewBox="0 0 24 24"
                                         >
-                                          bev_chaz_deep
-                                        </span>
-                                        <p
-                                          class="MuiTypography-root MuiListItemText-secondary MuiTypography-body2 MuiTypography-colorTextSecondary MuiTypography-displayBlock"
-                                        >
-                                          3 Signal
-                                        </p>
-                                      </div>
-                                    </div>
-                                    <div
-                                      class="MuiListItemSecondaryAction-root"
+                                          <path
+                                            d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                                          />
+                                        </svg>
+                                      </span>
+                                      <span
+                                        class="MuiTouchRipple-root"
+                                      />
+                                    </span>
+                                    <span
+                                      class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
+                                    >
+                                      Select All
+                                    </span>
+                                  </label>
+                                  <svg
+                                    aria-hidden="true"
+                                    class="MuiSvgIcon-root"
+                                    focusable="false"
+                                    viewBox="0 0 24 24"
+                                  >
+                                    <path
+                                      d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
+                                    />
+                                  </svg>
+                                </div>
+                              </div>
+                            </li>
+                            <div
+                              class="MuiCollapse-root MuiCollapse-hidden"
+                              style="min-height: 0px;"
+                            >
+                              <div
+                                class="MuiCollapse-wrapper"
+                              >
+                                <div
+                                  class="MuiCollapse-wrapperInner"
+                                >
+                                  <ul
+                                    class="MuiList-root MuiList-padding"
+                                  >
+                                    <li
+                                      class="MuiListItem-root makeStyles-whiteBackground-0 MuiListItem-gutters"
                                     >
                                       <div
                                         class="MuiBox-root MuiBox-root-0"
                                       >
-                                        <label
-                                          class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementStart"
+                                        <div
+                                          class="MuiListItemIcon-root"
                                         >
                                           <span
                                             aria-disabled="false"
@@ -809,193 +862,142 @@ exports[`TrieSelect Render 1`] = `
                                               class="MuiTouchRipple-root"
                                             />
                                           </span>
-                                          <span
-                                            class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
-                                          >
-                                            Select All
-                                          </span>
-                                        </label>
-                                        <svg
-                                          aria-hidden="true"
-                                          class="MuiSvgIcon-root"
-                                          focusable="false"
-                                          viewBox="0 0 24 24"
+                                        </div>
+                                        <div
+                                          class="MuiListItemText-root"
                                         >
-                                          <path
-                                            d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
-                                          />
-                                        </svg>
+                                          <span
+                                            class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                                          >
+                                            bev_chaz_deep
+                                          </span>
+                                        </div>
                                       </div>
-                                    </div>
-                                  </li>
-                                  <div
-                                    class="MuiCollapse-root MuiCollapse-hidden"
-                                    style="min-height: 0px;"
-                                  >
-                                    <div
-                                      class="MuiCollapse-wrapper"
+                                    </li>
+                                    <li
+                                      class="MuiListItem-root makeStyles-whiteBackground-0 MuiListItem-gutters"
                                     >
                                       <div
-                                        class="MuiCollapse-wrapperInner"
+                                        class="MuiBox-root MuiBox-root-0"
                                       >
-                                        <ul
-                                          class="MuiList-root MuiList-padding"
+                                        <div
+                                          class="MuiListItemIcon-root"
                                         >
-                                          <li
-                                            class="MuiListItem-root makeStyles-whiteBackground-0 MuiListItem-gutters"
+                                          <span
+                                            aria-disabled="false"
+                                            class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
                                           >
-                                            <div
-                                              class="MuiListItemIcon-root"
+                                            <span
+                                              class="MuiIconButton-label"
                                             >
-                                              <span
-                                                aria-disabled="false"
-                                                class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+                                              <input
+                                                class="PrivateSwitchBase-input-0"
+                                                data-indeterminate="false"
+                                                type="checkbox"
+                                                value=""
+                                              />
+                                              <svg
+                                                aria-hidden="true"
+                                                class="MuiSvgIcon-root"
+                                                focusable="false"
+                                                viewBox="0 0 24 24"
                                               >
-                                                <span
-                                                  class="MuiIconButton-label"
-                                                >
-                                                  <input
-                                                    class="PrivateSwitchBase-input-0"
-                                                    data-indeterminate="false"
-                                                    type="checkbox"
-                                                    value=""
-                                                  />
-                                                  <svg
-                                                    aria-hidden="true"
-                                                    class="MuiSvgIcon-root"
-                                                    focusable="false"
-                                                    viewBox="0 0 24 24"
-                                                  >
-                                                    <path
-                                                      d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
-                                                    />
-                                                  </svg>
-                                                </span>
-                                                <span
-                                                  class="MuiTouchRipple-root"
+                                                <path
+                                                  d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                                                 />
-                                              </span>
-                                            </div>
-                                            <div
-                                              class="MuiListItemText-root"
-                                            >
-                                              <span
-                                                class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
-                                              >
-                                                bev_chaz_deep
-                                              </span>
-                                            </div>
-                                          </li>
-                                          <li
-                                            class="MuiListItem-root makeStyles-whiteBackground-0 MuiListItem-gutters"
+                                              </svg>
+                                            </span>
+                                            <span
+                                              class="MuiTouchRipple-root"
+                                            />
+                                          </span>
+                                        </div>
+                                        <div
+                                          class="MuiListItemText-root"
+                                        >
+                                          <span
+                                            class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
                                           >
-                                            <div
-                                              class="MuiListItemIcon-root"
-                                            >
-                                              <span
-                                                aria-disabled="false"
-                                                class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
-                                              >
-                                                <span
-                                                  class="MuiIconButton-label"
-                                                >
-                                                  <input
-                                                    class="PrivateSwitchBase-input-0"
-                                                    data-indeterminate="false"
-                                                    type="checkbox"
-                                                    value=""
-                                                  />
-                                                  <svg
-                                                    aria-hidden="true"
-                                                    class="MuiSvgIcon-root"
-                                                    focusable="false"
-                                                    viewBox="0 0 24 24"
-                                                  >
-                                                    <path
-                                                      d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
-                                                    />
-                                                  </svg>
-                                                </span>
-                                                <span
-                                                  class="MuiTouchRipple-root"
-                                                />
-                                              </span>
-                                            </div>
-                                            <div
-                                              class="MuiListItemText-root"
-                                            >
-                                              <span
-                                                class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
-                                              >
-                                                bev_chaz_deep_one
-                                              </span>
-                                            </div>
-                                          </li>
-                                          <li
-                                            class="MuiListItem-root makeStyles-whiteBackground-0 MuiListItem-gutters"
-                                          >
-                                            <div
-                                              class="MuiListItemIcon-root"
-                                            >
-                                              <span
-                                                aria-disabled="false"
-                                                class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
-                                              >
-                                                <span
-                                                  class="MuiIconButton-label"
-                                                >
-                                                  <input
-                                                    class="PrivateSwitchBase-input-0"
-                                                    data-indeterminate="false"
-                                                    type="checkbox"
-                                                    value=""
-                                                  />
-                                                  <svg
-                                                    aria-hidden="true"
-                                                    class="MuiSvgIcon-root"
-                                                    focusable="false"
-                                                    viewBox="0 0 24 24"
-                                                  >
-                                                    <path
-                                                      d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
-                                                    />
-                                                  </svg>
-                                                </span>
-                                                <span
-                                                  class="MuiTouchRipple-root"
-                                                />
-                                              </span>
-                                            </div>
-                                            <div
-                                              class="MuiListItemText-root"
-                                            >
-                                              <span
-                                                class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
-                                              >
-                                                bev_chaz_deep_two
-                                              </span>
-                                            </div>
-                                          </li>
-                                        </ul>
+                                            bev_chaz_deep_one
+                                          </span>
+                                        </div>
                                       </div>
-                                    </div>
-                                  </div>
-                                </ul>
+                                    </li>
+                                    <li
+                                      class="MuiListItem-root makeStyles-whiteBackground-0 MuiListItem-gutters"
+                                    >
+                                      <div
+                                        class="MuiBox-root MuiBox-root-0"
+                                      >
+                                        <div
+                                          class="MuiListItemIcon-root"
+                                        >
+                                          <span
+                                            aria-disabled="false"
+                                            class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+                                          >
+                                            <span
+                                              class="MuiIconButton-label"
+                                            >
+                                              <input
+                                                class="PrivateSwitchBase-input-0"
+                                                data-indeterminate="false"
+                                                type="checkbox"
+                                                value=""
+                                              />
+                                              <svg
+                                                aria-hidden="true"
+                                                class="MuiSvgIcon-root"
+                                                focusable="false"
+                                                viewBox="0 0 24 24"
+                                              >
+                                                <path
+                                                  d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                                                />
+                                              </svg>
+                                            </span>
+                                            <span
+                                              class="MuiTouchRipple-root"
+                                            />
+                                          </span>
+                                        </div>
+                                        <div
+                                          class="MuiListItemText-root"
+                                        >
+                                          <span
+                                            class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                                          >
+                                            bev_chaz_deep_two
+                                          </span>
+                                        </div>
+                                      </div>
+                                    </li>
+                                  </ul>
+                                  <hr
+                                    class="MuiDivider-root"
+                                  />
+                                </div>
                               </div>
                             </div>
-                          </div>
-                        </ul>
+                          </ul>
+                          <hr
+                            class="MuiDivider-root"
+                          />
+                        </div>
                       </div>
                     </div>
-                  </div>
-                </ul>
+                  </ul>
+                </div>
               </div>
             </div>
-          </div>
-        </ul>
+          </ul>
+          <hr
+            class="MuiDivider-root"
+          />
+        </div>
       </div>
     </div>
-  </div>
+  </ul>
   <ul
     class="makeStyles-chipList-0"
   />
diff --git a/src/components/Controls/TrieSelect/index.js b/src/components/Controls/TrieSelect/index.js
index 4b88811..00bc9ca 100644
--- a/src/components/Controls/TrieSelect/index.js
+++ b/src/components/Controls/TrieSelect/index.js
@@ -1 +1 @@
-export { TrieSelect } from "./TrieSelect";
\ No newline at end of file
+export * from "./TrieSelect";
diff --git a/src/components/useStyles.jsx b/src/components/useStyles.jsx
index 4f246d4..2cb95de 100644
--- a/src/components/useStyles.jsx
+++ b/src/components/useStyles.jsx
@@ -274,6 +274,7 @@ const useStyles = makeStyles((theme) => ({
     maxWidth: "100%",
   },
   whiteBackground: { backgroundColor: "White" },
+  defaultBackground: { backgroundColor: "#fafafa" },
   progressIcon: { width: 40, height: 40 },
   progressSuccess: { color: "green" },
   progressError: { color: "red" },