fix: layout components when dialog is opened

Fixes #35.

Author: hperrin

packages/data-table/DataTable.svelte

@@ -20,7 +20,7 @@
 <script>
   import {MDCDataTable} from '@material/data-table';
   import {events} from '@material/data-table/constants';
-  import {onMount, onDestroy, setContext} from 'svelte';
+  import {onMount, onDestroy, getContext, setContext} from 'svelte';
   import {current_component} from 'svelte/internal';
   import {forwardEventsBuilder} from '@smui/common/forwardEvents.js';
   import {exclude} from '@smui/common/exclude.js';
@@ -50,12 +50,18 @@
   let checkBoxHeaderPromise = new Promise(resolve => checkBoxHeaderPromiseResolve = resolve);
   let checkBoxListPromiseResolve;
   let checkBoxListPromise = new Promise(resolve => checkBoxListPromiseResolve = resolve);
+  let addLayoutListener = getContext('SMUI:addLayoutListener');
+  let removeLayoutListener;
 
   setContext('SMUI:generic:input:addChangeHandler', addChangeHandler);
   setContext('SMUI:checkbox:context', 'data-table');
   setContext('SMUI:checkbox:instantiate', false);
   setContext('SMUI:checkbox:getInstance', getCheckboxInstancePromise);
 
+  if (addLayoutListener) {
+    removeLayoutListener = addLayoutListener(layout);
+  }
+
   onMount(async () => {
     dataTable = new MDCDataTable(element);
     checkBoxHeaderPromiseResolve(dataTable.headerRowCheckbox_);
@@ -72,7 +78,11 @@
   });
 
   onDestroy(() => {
-    dataTable && dataTable.destroy()
+    dataTable && dataTable.destroy();
+
+    if (removeLayoutListener) {
+      removeLayoutListener();
+    }
   });
 
   function getCheckboxInstancePromise(header) {

packages/dialog/Dialog.svelte

@@ -18,7 +18,7 @@
 
 <script>
   import {MDCDialog} from '@material/dialog';
-  import {onMount, onDestroy, setContext} from 'svelte';
+  import {onMount, onDestroy, getContext, setContext} from 'svelte';
   import {current_component} from 'svelte/internal';
   import {forwardEventsBuilder} from '@smui/common/forwardEvents.js';
   import {exclude} from '@smui/common/exclude.js';
@@ -35,21 +35,40 @@
 
   let element;
   let dialog;
+  let addLayoutListener = getContext('SMUI:addLayoutListener');
+  let removeLayoutListener;
   let layoutListeners = [];
-  let addLayoutListener = listener => layoutListeners.push(listener);
+  let addLayoutListenerFn = listener => {
+    layoutListeners.push(listener);
 
-  setContext('SMUI:addLayoutListener', addLayoutListener);
+    return () => {
+      const idx = layoutListeners.indexOf(listener);
+      if (idx >= 0) {
+        layoutListeners.splice(idx, 1);
+      }
+    };
+  };
+
+  setContext('SMUI:addLayoutListener', addLayoutListenerFn);
 
   $: dialog && (dialog.escapeKeyAction = escapeKeyAction);
   $: dialog && (dialog.scrimClickAction = scrimClickAction);
   $: dialog && (dialog.autoStackButtons = autoStackButtons);
 
+  if (addLayoutListener) {
+    removeLayoutListener = addLayoutListener(layout);
+  }
+
   onMount(() => {
     dialog = new MDCDialog(element);
   });
 
   onDestroy(() => {
-    dialog && dialog.destroy()
+    dialog && dialog.destroy();
+
+    if (removeLayoutListener) {
+      removeLayoutListener();
+    }
   });
 
   function handleDialogOpened() {

packages/list/List.svelte

@@ -62,6 +62,8 @@
   let nav = getContext('SMUI:list:nav');
   let instantiate = getContext('SMUI:list:instantiate');
   let getInstance = getContext('SMUI:list:getInstance');
+  let addLayoutListener = getContext('SMUI:addLayoutListener');
+  let removeLayoutListener;
 
   setContext('SMUI:list:nonInteractive', nonInteractive);
 
@@ -97,6 +99,10 @@
     list.selectedIndex = selectedIndex;
   }
 
+  if (addLayoutListener) {
+    removeLayoutListener = addLayoutListener(layout);
+  }
+
   onMount(async () => {
     if (instantiate !== false) {
       list = new MDCList(element);
@@ -111,7 +117,11 @@
 
   onDestroy(() => {
     if (instantiate !== false) {
-      list && list.destroy()
+      list && list.destroy();
+    }
+
+    if (removeLayoutListener) {
+      removeLayoutListener();
     }
   });
 

packages/ripple/Ripple.js

@@ -1,7 +1,10 @@
 import {MDCRipple} from '@material/ripple';
+import {getContext} from 'svelte';
 
 export default function Ripple(node, [ripple, props = {unbounded: false, color: null}]) {
   let instance = null;
+  let addLayoutListener = getContext('SMUI:addLayoutListener');
+  let removeLayoutListener;
 
   function handleProps(ripple, props) {
     if (ripple && !instance) {
@@ -39,6 +42,16 @@ export default function Ripple(node, [ripple, props = {unbounded: false, color:
     handleProps(ripple, props);
   }
 
+  if (addLayoutListener) {
+    removeLayoutListener = addLayoutListener(layout);
+  }
+
+  function layout() {
+    if (instance) {
+      instance.layout();
+    }
+  }
+
   return {
     update([ripple, props = {unbounded: false, color: null}]) {
       handleProps(ripple, props);
@@ -52,6 +65,10 @@ export default function Ripple(node, [ripple, props = {unbounded: false, color:
         node.classList.remove('mdc-ripple-surface--primary');
         node.classList.remove('mdc-ripple-surface--accent');
       }
+
+      if (removeLayoutListener) {
+        removeLayoutListener();
+      }
     }
   }
 }

packages/select/Select.svelte

@@ -132,6 +132,8 @@
   let inputElement;
   let menuPromiseResolve;
   let menuPromise = new Promise(resolve => menuPromiseResolve = resolve);
+  let addLayoutListener = getContext('SMUI:addLayoutListener');
+  let removeLayoutListener;
 
   setContext('SMUI:menu:instantiate', false);
   setContext('SMUI:menu:getInstance', getMenuInstancePromise);
@@ -166,6 +168,10 @@
     select.required = required;
   }
 
+  if (addLayoutListener) {
+    removeLayoutListener = addLayoutListener(layout);
+  }
+
   onMount(async () => {
     select = new MDCSelect(element);
 
@@ -181,7 +187,11 @@
   });
 
   onDestroy(() => {
-    select && select.destroy()
+    select && select.destroy();
+
+    if (removeLayoutListener) {
+      removeLayoutListener();
+    }
   });
 
   function getMenuInstancePromise() {

packages/slider/Slider.svelte

@@ -62,6 +62,7 @@
   let formField = getContext('SMUI:form-field');
   let inputProps = getContext('SMUI:generic:input:props') || {};
   let addLayoutListener = getContext('SMUI:addLayoutListener');
+  let removeLayoutListener;
 
   $: if (slider && slider.disabled !== disabled) {
     slider.disabled = disabled;
@@ -84,7 +85,7 @@
   }
 
   if (addLayoutListener) {
-    addLayoutListener(layout);
+    removeLayoutListener = addLayoutListener(layout);
   }
 
   onMount(() => {
@@ -96,7 +97,11 @@
   });
 
   onDestroy(() => {
-    slider && slider.destroy()
+    slider && slider.destroy();
+
+    if (removeLayoutListener) {
+      removeLayoutListener();
+    }
   });
 
   function handleChange() {

packages/textfield/Textfield.svelte

@@ -83,7 +83,7 @@
 
 <script>
   import {MDCTextField} from '@material/textfield';
-  import {onMount, onDestroy} from 'svelte';
+  import {onMount, onDestroy, getContext} from 'svelte';
   import {current_component} from 'svelte/internal';
   import {forwardEventsBuilder} from '@smui/common/forwardEvents.js';
   import {exclude} from '@smui/common/exclude.js';
@@ -123,6 +123,8 @@
 
   let element;
   let textField;
+  let addLayoutListener = getContext('SMUI:addLayoutListener');
+  let removeLayoutListener;
 
   $: valued = value !== uninitializedValue || files !== uninitializedValue;
 
@@ -148,6 +150,10 @@
     textField.useNativeValidation = useNativeValidation;
   }
 
+  if (addLayoutListener) {
+    removeLayoutListener = addLayoutListener(layout);
+  }
+
   onMount(() => {
     textField = new MDCTextField(element);
 
@@ -157,7 +163,11 @@
   });
 
   onDestroy(() => {
-    textField && textField.destroy()
+    textField && textField.destroy();
+
+    if (removeLayoutListener) {
+      removeLayoutListener();
+    }
   });
 
   export function focus(...args) {