@shortfuse/materialdesignweb 0.4.0 → 0.5.0

package/adapters/search/index.js

@@ -3,8 +3,7 @@
 import * as ListContent from '../../components/list/content.js';
 import * as List from '../../components/list/index.js';
 import * as TextField from '../../components/textfield/index.js';
-import { getTextNode, iterateArrayLike, iterateSomeOfArrayLike } from '../../core/dom.js';
-import { noop } from '../../utils/function.js';
+import { getTextNode } from '../../core/dom.js';
 
 /**
  * @param {string} input
@@ -13,7 +12,7 @@ import { noop } from '../../utils/function.js';
  */
 function containsTextFilter(input, content) {
   return content.trim().toLocaleLowerCase()
-    .indexOf(input.trim().toLocaleLowerCase()) !== -1;
+    .includes(input.trim().toLocaleLowerCase());
 }
 
 /**
@@ -61,17 +60,13 @@ function selectSibling(list, backwards) {
   const items = list.querySelectorAll('[role="option"]:not([aria-hidden="true"]):not([disabled])');
   let sibling;
   if (current && current.getAttribute('aria-hidden') !== 'true') {
-    iterateSomeOfArrayLike(items, (item, index) => {
-      if (item !== current) {
-        return false;
-      }
-      if (backwards) {
-        sibling = items[index - 1];
-      } else {
-        sibling = items[index + 1];
+    for (let i = 0; i < items.length; i++) {
+      const item = items.item(i);
+      if (item === current) {
+        sibling = backwards ? items[i - 1] : items[i + 1];
+        break;
       }
-      return true;
-    });
+    }
   } else if (backwards) {
     sibling = items[items.length - 1];
   } else {
@@ -88,38 +83,41 @@ function selectSibling(list, backwards) {
 }
 
 /**
- * @param {Element} listItem
- * @return {void}
+ * @param {Element} el
+ * @return {number}
  */
-function scrollItemIntoView(listItem) {
-  /**
-   * @param {Element} el
-   * @return {number}
-   */
-  function getElementVisibility(el) {
-    let rect = el.getBoundingClientRect();
-    const { top, height } = rect;
-    let next = el.parentElement;
-    do {
-      rect = next.getBoundingClientRect();
-      if ((top + height) > rect.bottom) {
-        // bottom clipped
-        return 1;
-      }
-      if (top < rect.top) {
-        // top clipped
-        return -1;
-      }
-      next = next.parentElement;
-    } while (next !== document.body);
-    if (top < 0) {
-      return -1;
-    }
-    if ((top + height) > document.documentElement.clientHeight) {
+function getElementVisibility(el) {
+  let rect = el.getBoundingClientRect();
+  const { top, height } = rect;
+  let next = el.parentElement;
+  do {
+    rect = next.getBoundingClientRect();
+    // eslint-disable-next-line unicorn/consistent-destructuring
+    if ((top + height) > rect.bottom) {
+      // bottom clipped
       return 1;
     }
-    return 0;
+    // eslint-disable-next-line unicorn/consistent-destructuring
+    if (top < rect.top) {
+      // top clipped
+      return -1;
+    }
+    next = next.parentElement;
+  } while (next !== document.body);
+  if (top < 0) {
+    return -1;
+  }
+  if ((top + height) > document.documentElement.clientHeight) {
+    return 1;
   }
+  return 0;
+}
+
+/**
+ * @param {Element} listItem
+ * @return {void}
+ */
+function scrollItemIntoView(listItem) {
   const visibility = getElementVisibility(listItem);
   if (visibility < 0) {
     listItem.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' });
@@ -145,8 +143,8 @@ function scrollItemIntoView(listItem) {
  * @prop {boolean} [dropdown=false]
  * @prop {boolean} [filterItems=true]
  * @prop {('replace'|'append'|'none')} [suggestionMethod='replace']
- * @prop {function(string, function(T[]=), function(Error=)=):void} [performSearch]
- * @prop {function(T[], function(), function(Error=)):void} [updateList]
+ * @prop {function(string):(Promise<T[]>)|T[]} [performSearch]
+ * @prop {function(T[]):(Promise<void>|void)} [updateList]
  * @prop {boolean} [searchOnFocus=true]
  * @prop {number} [debounce=null] Debounce time in milliseconds
  */
@@ -167,12 +165,10 @@ export default class SearchAdapter {
       this.filter = containsTextFilter;
     }
     this.itemTextParser = defaultItemTextParser || options.itemTextParser;
-    /** @type {HTMLInputElement} */
-    const input = (this.textfield.getElementsByClassName('mdw-textfield__input')[0]);
+    const input = /** @type {HTMLInputElement} */ (this.textfield.getElementsByClassName('mdw-textfield__input')[0]);
     this.input = input;
     this.list.addEventListener(ListContent.ACTIVATE_EVENT, (event) => {
-      /** @type {HTMLElement} */
-      const item = (event.target);
+      const item = /** @type {HTMLElement} */(event.target);
       this.onItemSelected(item);
       const inputValue = this.input.value || '';
       this.suggestedInput = inputValue;
@@ -209,12 +205,30 @@ export default class SearchAdapter {
     this.debounce = options.debounce;
     this.suggestionMethod = options.suggestionMethod || 'replace';
     this.currentSearchTerm = this.input.value || '';
-    /** @type {string} */
+    /** @type {?string} */
     this.suggestedInput = null;
-    /** @type {string} */
+    /** @type {?string} */
     this.previousValue = null;
-    this.performSearch = options.performSearch || ((value, resolve = noop) => resolve());
-    this.updateList = options.updateList || ((results, resolve = noop) => resolve());
+    this.performSearch = options.performSearch || this.performSearch.bind(this);
+    this.updateList = options.updateList || this.updateList.bind(this);
+  }
+
+  /**
+   * @param {string} value
+   * @return {Promise<T[]>|T[]}
+   */
+  // eslint-disable-next-line class-methods-use-this
+  performSearch(value) {
+    return [];
+  }
+
+  /**
+   * @param {T[]} results
+   * @return {Promise<void>|void}
+   */
+  // eslint-disable-next-line class-methods-use-this
+  updateList(results) {
+    return undefined;
   }
 
   /**
@@ -237,90 +251,54 @@ export default class SearchAdapter {
     this.previousValue = inputValue;
     this.currentSearchTerm = inputValue;
 
-    /**
-     * @param {Error} error
-     * @return {void}
-     */
-    function onErrorCallback(error) {
-      if (error.message === 'debounced') {
-        return;
-      }
-      if (error.message === 'expired') {
-        return;
+    void (async () => {
+      try {
+        await this.performDebounce(inputValue);
+        await this.checkExpired(inputValue);
+        const searchResults = await this.performSearch(inputValue);
+        await this.checkExpired(inputValue);
+        await this.updateList(searchResults);
+        await this.filterListItems();
+      } catch (error) {
+        if (error.message === 'debounced') {
+          return;
+        }
+        if (error.message === 'expired') {
+          return;
+        }
+        throw error;
       }
-      throw error;
-    }
-
-    // IE does not support ES6 Promises
-    // Using resolve/reject callbacks instead.
-    // Syntactically ugly, but removes need for a polyfill.
-    this.performDebounce(inputValue,
-      () => this.checkExpired(inputValue,
-        () => this.performSearch(inputValue,
-          (searchResults) => this.checkExpired(inputValue,
-            () => this.updateList(searchResults,
-              () => this.filterListItems(),
-              onErrorCallback),
-            onErrorCallback),
-          onErrorCallback),
-        onErrorCallback),
-      onErrorCallback);
-
-    /**
-     * Promise.resolve()
-     *   .then(() => this.performDebounce(inputValue))
-     *   .then(() => this.checkExpired(inputValue))
-     *   .then(() => this.performSearch(inputValue))
-     *   .then((searchResults) => {
-     *     results = searchResults;
-     *   })
-     *   .then(() => this.checkExpired(inputValue))
-     *   .then(() => this.updateList(results))
-     *   .then(() => this.filterListItems())
-     *   .catch((error) => {
-     *     if (error.message === 'debounced') {
-     *       return;
-     *     }
-     *     if (error.message === 'expired') {
-     *       return;
-     *     }
-     *     throw error;
-     *   });
-     */
+    })();
   }
 
   /**
    * @param {string} inputValue
-   * @param {Function} resolve
-   * @param {function(Error):any} reject
-   * @return {void}
+   * @return {Promise<void>}
    */
-  checkExpired(inputValue, resolve, reject) {
+  checkExpired(inputValue) {
     if (inputValue === this.currentSearchTerm) {
-      resolve();
-    } else {
-      reject(new Error('expired'));
+      return Promise.resolve();
     }
+    return Promise.reject(new Error('expired'));
   }
 
   /**
    * @param {string} searchTerm
-   * @param {Function} resolve
-   * @param {function(Error):any} reject
-   * @return {void}
+   * @return {Promise<void>}
    */
-  performDebounce(searchTerm, resolve, reject) {
+  performDebounce(searchTerm) {
     if (!this.debounce) {
-      resolve();
-      return;
+      return Promise.resolve();
     }
-    setTimeout(() => {
-      if (searchTerm !== this.currentSearchTerm) {
-        reject(new Error('debounced'));
-        return;
-      }
-      resolve();
-    }, this.debounce);
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        if (searchTerm !== this.currentSearchTerm) {
+          reject(new Error('debounced'));
+          return;
+        }
+        resolve();
+      }, this.debounce);
+    });
   }
 
   /** @return {boolean} handled */
@@ -423,7 +401,7 @@ export default class SearchAdapter {
     const current = this.list.querySelector('[role="option"][aria-selected="true"]');
     const items = this.list.querySelectorAll('[role="option"]');
     let hasItem = false;
-    iterateArrayLike(items, (item) => {
+    for (const item of items) {
       const content = this.itemTextParser(item);
       const fn = fnFilter || this.filter;
       if (fn(input, content)) {
@@ -432,7 +410,7 @@ export default class SearchAdapter {
       } else {
         item.setAttribute('aria-hidden', 'true');
       }
-    });
+    }
     if (current && current.getAttribute('aria-hidden') === 'true') {
       const newSelection = selectSibling(this.list);
       if (newSelection) {
@@ -495,23 +473,19 @@ export default class SearchAdapter {
       case 'Enter': {
         /** @type {HTMLElement} */
         const current = this.list.querySelector('[role="option"][aria-selected="true"]');
-        if (current) {
-          if (this.hideDropDown()) {
-            current.click();
-            event.stopPropagation();
-            event.preventDefault();
-          }
+        if (current && this.hideDropDown()) {
+          current.click();
+          event.stopPropagation();
+          event.preventDefault();
         }
         break;
       }
       case 'Tab': {
         /** @type {HTMLElement} */
         const current = this.list.querySelector('[role="option"][aria-selected="true"]');
-        if (current) {
-          if (this.hideDropDown()) {
-            current.click();
-            event.stopPropagation();
-          }
+        if (current && this.hideDropDown()) {
+          current.click();
+          event.stopPropagation();
         }
         break;
       }

package/components/appbar/_spec.scss

@@ -5,136 +5,118 @@
 @use '../../core/_length.scss' as *;
 @use '../../core/_type.scss' as type;
 
-$height: 64 !default;
-$heightDense: 48 !default;
-$heightMobile: 56 !default;
-$heightMobileLandscape: 48 !default;
-$heightProminent: 128 !default;
-$heightProminentDense: 96 !default;
-$iconHeight: 40 !default;
-
-.mdw-appbar {
-  display: flex;
-  flex-direction: column;
+:root {
+  --mdw-appbar__min-block-size: 64px;
+  --mdw-appbar__min-block-size__dense: 48px;
+  --mdw-appbar__min-block-size__prominent: 128px;
+  --mdw-appbar__min-block-size__prominent__dense: 96px;
+  --mdw-appbar__min-block-size__mobile: 56px;
+  --mdw-appbar__min-block-size__mobile__landscape: 48px;
+  --mdw-appbar__content-margin-inline: 24px;
+  --mdw-appbar__start-margin-inline-start: 8px;
+  @include breakpoint.has16DPMargin() {
+    --mdw-appbar__content-margin-inline: 16px;
+    --mdw-appbar__start-margin-inline-start: 0;
+  }
+  @include breakpoint.maxTabletDevice {
+    // No high density on mobile
+    --mdw-appbar__min-block-size: var(--mdw-appbar__min-block-size__mobile);
+    --mdw-appbar__min-block-size__dense: var(--mdw-appbar__min-block-size__mobile);
+    --mdw-appbar__min-block-size__prominent__dense: var(--mdw-appbar__min-block-size__prominent);
+  }
+  @include breakpoint.isMobileDeviceLandscape {
+    --mdw-appbar__min-block-size: var(--mdw-appbar__min-block-size__mobile__landscape);
+    --mdw-appbar__min-block-size__dense: var(--mdw-appbar__min-block-size__mobile__landscape);
+  }
+  --mdw-appbar__icon-min-block-size: 40px;
 }
 
-.mdw-appbar__action {
-  display: -ms-grid;
+.mdw-appbar {
   display: grid;
+
   grid-template-columns: auto 1fr auto;
-  -ms-grid-columns: auto 1fr auto;
-  
-  min-height: dp($height);
-  -ms-grid-rows: minmax(dp($height), 1fr) auto;
+  grid-template-rows: auto auto;
+
+  min-block-size: var(--mdw-appbar__min-block-size);
 
   transition-duration: inherit;
-  transition-property: min-height;
+  transition-property: min-block-size;
   transition-timing-function: inherit;
 
   z-index: 1;
 
   &[mdw-centered] {
     grid-template-columns: minmax(auto, 1fr) minmax(0, auto) minmax(auto, 1fr);
-    -ms-grid-columns: minmax(max-content, 1fr) minmax(0, max-content) minmax(max-content, 1fr);
   }
 
-  .mdw-appbar[mdw-prominent] > & {
-    min-height: dp($heightProminent);
-    -ms-grid-rows: minmax(dp($heightProminent), 1fr) auto;
-  }
-  
-  .mdw-appbar[mdw-dense] > & {
-    min-height: dp($heightDense);
-    -ms-grid-rows: minmax(dp($heightDense), 1fr) auto;
-  }
-  
-  .mdw-appbar[mdw-dense][mdw-prominent] > & {
-    min-height: dp($heightProminentDense);
-    -ms-grid-rows: minmax(dp($heightProminentDense), 1fr) auto;
-    @include breakpoint.maxTabletDevice {
-      min-height: dp($heightProminent);
-      -ms-grid-rows: minmax(dp($heightProminent), 1fr) auto;
-    }
+  &[mdw-dense] {
+    --mdw-appbar__min-block-size: var(--mdw-appbar__min-block-size__dense);
   }
+}
 
-  &,
-  .mdw-appbar[mdw-dense] > & {
-    @include breakpoint.maxTabletDevice {
-      min-height: dp($heightMobile);
-    }
-    @include breakpoint.isMobileDeviceLandscape {
-      min-height: dp($heightMobileLandscape);
-    }
-  }
+.mdw-appbar__action {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+
+  min-block-size: var(--mdw-appbar__min-block-size);
+
+  transition-duration: inherit;
+  transition-property: min-block-size;
+  transition-timing-function: inherit;
+
+  z-index: 1;
 }
 
 .mdw-appbar__content {
   display: flex;
   flex-direction: column;
 
-  -ms-grid-column: 1;
-  grid-column: 1;
-  -ms-grid-column-span: 3;
-  grid-column-end: span 3;
-  -ms-grid-row: 2;
+  grid-column: 1 / span 3;
   grid-row: 2;
 
-  margin-right: dp(24);
-  margin-left: dp(80);
-  @include breakpoint.has16DPMargin() {
-    margin-right: dp(16);
-    margin-left: dp(72);
-  }
+  margin-inline: var(--mdw-appbar__content-margin-inline);
+  padding-inline-start: 56px;
 }
 
 .mdw-appbar__title {
-  @include type.addRules('h6');
-  @include type.baselineToBottom(24);
+  display: flex;
+  align-items: center;
 
-  -ms-grid-row-align: end;
-  align-self: flex-end;
+  align-self: center;
 
-  -ms-grid-column: 2;
   grid-column: 2;
-  -ms-grid-row: 1;
-  grid-row: 1;
+  grid-row: 1 / span 2;
+
+  overflow: hidden;
 
-  justify-content: space-around;
-  overflow-x: hidden;
-  
-  height: auto;
-  margin: 0 dp(16);
+  min-block-size: auto;
+
+  block-size: auto;
+  margin: 0 16px;
 
   transition-duration: inherit;
-  transition-property: font, letter-spacing, margin-top;
+  transition-property: font, letter-spacing, margin-block-size;
   transition-timing-function: inherit;
 
   text-overflow: ellipsis;
   white-space: nowrap;
 
+  @include type.addRules('h6');
 
-  .mdw-appbar[mdw-dense] & {
-    @include type.baselineToBottom(16);
-  }
-
-  .mdw-appbar[mdw-dense] &,
-  & {
-    @include breakpoint.maxTabletDevice {
-      @include type.baselineToBottom(20);
-    }
-    @include breakpoint.isMobileDeviceLandscape {
-      @include type.baselineToBottom(16);
-    }
-  }
-
+  // TODO: Use CSS Variables instead of nesting
   .mdw-appbar[mdw-prominent] & {
+    min-block-size: var(--mdw-appbar__min-block-size__prominent);
+
     white-space: normal;
     @include type.addRules('h5');
-    @include type.baselineToBottom(28);
+  }
+
+  .mdw-appbar[mdw-prominent][mdw-dense] & {
+    min-block-size: var(--mdw-appbar__min-block-size__prominent__dense);
   }
 
   &[mdw-custom] {
-    margin-top: 0;
+    margin-block-start: 0;
 
     &::after {
       display: none;
@@ -143,67 +125,31 @@ $iconHeight: 40 !default;
 }
 
 .mdw-appbar__start {
-  -ms-grid-column: 1;
   grid-column: 1;
 
-  margin-left: dp(8);
+  margin-inline-start: var(--mdw-appbar__start-margin-inline-start);
 
-  padding: 0 dp(8);
-  @include breakpoint.has16DPMargin() {
-    margin-left: 0;
-  }
+  padding-inline: 8px;
 }
 
 .mdw-appbar__end {
-  -ms-grid-column: 3;
   grid-column: 3;
   justify-content: flex-end;
 
-  margin-right: dp(12);
-  margin-left: 0;
-  @include breakpoint.has16DPMargin() {
-    margin-right: dp(4);
-    margin-left: 0;
-  }
-
-  :root[dir="rtl"] & {
-    margin-right: 0;
-    margin-left: dp(12);
-    @include breakpoint.has16DPMargin() {
-      margin-right: 0;
-      margin-left: dp(4);
-    }
-  }
+  margin-inline-end: -12px;
+  padding-inline-end: var(--mdw-appbar__content-margin-inline);
 }
 
-
 .mdw-appbar__start,
 .mdw-appbar__end {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   flex-direction: row;
+  grid-row: 1/1;
 
-  transition-property: margin-top;
-}
+  min-block-size: inherit;
 
-.mdw-appbar__start,
-.mdw-appbar__end,
-.mdw-appbar__title {
-  margin-top: dp(($height - $iconHeight) * 0.5);
-  
-  .mdw-appbar[mdw-dense] & {
-    margin-top: dp(($heightDense - $iconHeight) * 0.5);
-  }
-
-  &,
-  .mdw-appbar[mdw-dense] & {
-    @include breakpoint.maxTabletDevice {
-      margin-top: dp(($heightMobile - $iconHeight) * 0.5);
-    }
-    @include breakpoint.isMobileDeviceLandscape {
-      margin-top: dp(($heightMobileLandscape - $iconHeight) * 0.5);
-    }
-  }
+  transition-property: margin-block-start;
 }
 
 .mdw-appbar__start .mdw-button {
@@ -211,15 +157,9 @@ $iconHeight: 40 !default;
 }
 
 .mdw-appbar__end .mdw-button {
-  margin: 0 dp(4);
+  margin: 0 4px;
 
   &[mdw-more-button] {
-    margin-right: dp(-2);
-    margin-left: 0;
-
-    :root[dir="rtl"] & {
-      margin-right: 0;
-      margin-left: dp(-2);
-    }
+    margin-inline-end: -2px;
   }
 }