Starting menu refactor

packages/materialdesign-components/src/List/List.svelte

@@ -17,11 +17,21 @@
   //items: [{text: string | {primary: string, secondary: string}, value: any, selected: bool}...n]
   export let items = []
   export let singleSelection = false
+
   export let inputElement = null
 
   let role = "listbox"
 
   onMount(() => {
+    createOrAcceptItemStore()
+
+    if (!_bb.getContext("BBMD:list:props")) {
+      _bb.setContext("BBMD:list:props", {
+        inputElement,
+        variant,
+        singleSelection,
+      })
+    }
     if (!!list) {
       instance = new MDCList(list)
       instance.singleSelection = singleSelection

packages/materialdesign-components/src/Menu/Menu.svelte

@@ -2,7 +2,10 @@
   import { List } from "../List"
   import { MDCMenu } from "@material/menu"
   import { onMount, setContext } from "svelte"
-  export let items = []
+  import createItemsStore from "../Common/ItemStore.js"
+
+  export let onSelect = selectedItems => {}
+
   export let singleSelection = true
   export let width = "400px"
   export let open = true
@@ -11,10 +14,25 @@
   //{x: number, y: number}
   export let absolutePositionCoords = null
 
+  export let _bb
+
   let menu = null
   let instance = null
+  let selectedItemsStore
+
+  function createOrAcceptItemStore() {
+    let store = _bb.getContext("BBMD:list:selectItemStore")
+    if (!!store) {
+      selectedItemsStore = store
+    } else {
+      selectedItemsStore = createItemsStore(() => onSelect($selectedItemsStore))
+      _bb.setContext("BBMD:list:selectItemStore", selectedItemsStore)
+    }
+  }
 
   onMount(() => {
+    createOrAcceptItemStore()
+
     if (!!menu) {
       instance = new MDCMenu(menu)
       instance.open = open
@@ -27,6 +45,8 @@
     }
     setContext("BBMD:list:context", "menu")
   })
+
+  $: menu && _bb.attachChildren(menu)
 </script>
 
 {#if useFixedPosition || useAbsolutePosition}
@@ -34,7 +54,7 @@
     bind:this={menu}
     class="mdc-menu mdc-menu-surface"
     style={`width: ${width}`}>
-    <List {items} {singleSelection} />
+    <List {singleSelection} {_bb} />
   </div>
 {:else}
   <div class="mdc-menu-surface--anchor">
@@ -44,7 +64,7 @@
       bind:this={menu}
       class="mdc-menu mdc-menu-surface"
       style={`width: ${width}`}>
-      <List {items} {singleSelection} />
+      <List {singleSelection} {_bb} />
     </div>
   </div>
 {/if}