@shortfuse/materialdesignweb 0.4.0 → 0.5.0

package/components/snackbar/index.js

@@ -3,8 +3,6 @@
 
 import {
   dispatchDomEvent,
-  findElementParentByClassName,
-  nextTick,
   setTextNode,
 } from '../../core/dom.js';
 import * as Button from '../button/index.js';
@@ -91,7 +89,7 @@ export function handleAnimationChange(snackbarElement) {
     if (autoHideString == null) {
       return;
     }
-    const timeInSeconds = parseFloat(autoHideString) || 4;
+    const timeInSeconds = Number.parseFloat(autoHideString) || 4;
     if (timeInSeconds < 0) {
       return;
     }
@@ -113,10 +111,8 @@ export function handleAnimationChange(snackbarElement) {
     show(snackbarElement);
     return;
   }
-  if (snackbarElement.hasAttribute('mdw-autodestroy')) {
-    if (snackbarElement.parentElement) {
-      snackbarElement.parentElement.removeChild(snackbarElement);
-    }
+  if (snackbarElement.hasAttribute('mdw-autodestroy') && snackbarElement.parentElement) {
+    snackbarElement.remove();
   }
 }
 
@@ -145,7 +141,7 @@ export function hide(snackbarElement) {
     SNACKBAR_QUEUE.splice(SNACKBAR_QUEUE.indexOf(currentQueueItem), 1);
   }
   if (window.getComputedStyle(snackbarElement).animationName === 'none') {
-    nextTick(() => handleAnimationChange(snackbarElement));
+    requestAnimationFrame(() => handleAnimationChange(snackbarElement));
   }
   return true;
 }
@@ -159,8 +155,7 @@ export function onKeyDown(event) {
     // Allow users to close snackbar with escape, for accessibilty reasons
     event.stopPropagation();
     event.preventDefault();
-    /** @type {Element} */
-    const snackbarElement = (event.currentTarget);
+    const snackbarElement = /** @type {Element} */ (event.currentTarget);
     hide(snackbarElement);
   }
 }
@@ -170,12 +165,11 @@ export function onKeyDown(event) {
  * @return {void}
  */
 export function onButtonClick(event) {
-  /** @type {HTMLElement} */
-  const buttonElement = (event.currentTarget);
+  const buttonElement = /** @type {HTMLElement} */ (event.currentTarget);
   if (buttonElement instanceof HTMLAnchorElement) {
     event.preventDefault();
   }
-  const snackbarElement = findElementParentByClassName(buttonElement, 'mdw-snackbar');
+  const snackbarElement = buttonElement.closest('.mdw-snackbar');
   hide(snackbarElement);
 }
 
@@ -197,11 +191,11 @@ export function update(element, options) {
   let span = element.getElementsByTagName('span')[0];
   if (span) {
     // To trigger screen readers, we destroy and create a new span and textnode
-    span.parentElement.removeChild(span);
+    span.remove();
   }
   span = document.createElement('span');
   if (element.firstChild) {
-    element.insertBefore(span, element.firstChild);
+    element.prepend(span);
   } else {
     element.appendChild(span);
   }
@@ -225,7 +219,7 @@ export function update(element, options) {
       // Don't set attribute if null is passed
     }
   } else if (button && button.parentElement) {
-    button.parentElement.removeChild(button);
+    button.remove();
   }
   if (options.stacked) {
     element.setAttribute('mdw-stacked', '');
@@ -275,13 +269,13 @@ export function detach(snackbarElement) {
     button.removeEventListener('click', onButtonClick);
   }
   // Remove timeouts and stacks
-  SNACKBAR_QUEUE.slice().reverse().forEach((queue, reverseIndex, array) => {
+  for (let i = SNACKBAR_QUEUE.length - 1; i >= 0; i--) {
+    const queue = SNACKBAR_QUEUE[i];
     if (queue.element === snackbarElement) {
       queue.clearHideTimeout();
-      const index = array.length - reverseIndex - 1;
-      SNACKBAR_QUEUE.splice(index, 1);
+      SNACKBAR_QUEUE.splice(i, 1);
     }
-  });
+  }
   snackbarElement.removeAttribute('mdw-js');
 }
 
@@ -299,7 +293,7 @@ export function show(snackbarElement) {
   snackbarElement.setAttribute('aria-hidden', 'false');
   attach(snackbarElement);
   if (window.getComputedStyle(snackbarElement).animationName === 'none') {
-    nextTick(() => handleAnimationChange(snackbarElement));
+    requestAnimationFrame(() => handleAnimationChange(snackbarElement));
   }
   return true;
 }

package/components/tab/_spec.scss

@@ -16,7 +16,6 @@ $icon-with-label-height: 72 !default;
 }
 
 .mdw-tab__list {
-  display: flex; // IE11 doesn't support grid-auto-columns
   display: grid;
   position: relative;
   flex-direction: row;
@@ -25,8 +24,6 @@ $icon-with-label-height: 72 !default;
 
   justify-content: flex-start;
 
-  -ms-overflow-style: none;
-
   overflow-x: auto;
   overflow-y: hidden;
   scrollbar-width: none;
@@ -41,21 +38,15 @@ $icon-with-label-height: 72 !default;
   &[mdw-scrollable] {
     display: flex;
     overflow-x: auto;
-    
+
     box-sizing: border-box;
-    
+
     &::before,
     &::after {
-
-      min-width: dp(52);
       // Ensures 52dp blank space at end
       content: '';
-    }
 
-    & > .mdw-tab__item {
-      min-width: dp(90);
-      max-width: 100%;
-      flex: none;
+      min-inline-size: 52px;
     }
   }
 }
@@ -69,13 +60,12 @@ $icon-with-label-height: 72 !default;
 
 .mdw-tab__indicator {
   position: absolute;
-  right: auto;
-  bottom: 0;
-  left: 0;
+  inset-block-end: 0;
+  inset-inline: 0 auto;
 
-  height: dp(2);
-  width: 0;
-  width: dp(1000);
+  block-size: 2px;
+  inline-size: 0;
+  inline-size: 1000px;
 
   transition-property: none;
 
@@ -87,7 +77,7 @@ $icon-with-label-height: 72 !default;
   &[mdw-animate] {
     transition-property: transform;
   }
-  
+
 }
 
 .mdw-tab__item {
@@ -100,7 +90,8 @@ $icon-with-label-height: 72 !default;
   overflow: hidden;
 
   box-sizing: content-box;
-  min-height: dp(48); // Redundant but needed for IE11
+
+  min-block-size: 48px;
   flex: auto;
 
   cursor: pointer;
@@ -116,43 +107,42 @@ $icon-with-label-height: 72 !default;
 
   box-shadow: none;
 
-  
+  .mdw-tab__list[mdw-scrollable] > & {
+    min-inline-size: 90px;
+    max-inline-size: 100%;
+    flex: none;
+  }
 }
 
 .mdw-tab__icon {
   @include type.baselineToBottom($icon-to-label-baseline);
-  margin-top: dp($icon-margin-top);
-  margin-bottom: dp(-$icon-to-label-baseline);
-
-  transition-property: color;
+  margin-block: dp($icon-margin-top) dp(-$icon-to-label-baseline);
 
   pointer-events: none;
+
+  transition-property: color;
 }
 
 .mdw-tab__label {
   @include type.addRules('button');
 
   box-sizing: border-box;
-  margin-top: auto;
-  margin-bottom: auto;
-  padding: 0 dp(16);
-
-  transition-property: color;
+  margin-block: auto;
+  padding: 0 16px;
 
   pointer-events: none;
 
+  transition-property: color;
+
   text-align: center;
 
   .mdw-tab__icon ~ & {
     @include type.baselineToTop($icon-to-label-baseline);
-    @include type.baselineToBottom($icon-with-label-height
-    - $icon-margin-top
-    - $icon-size
-    - $icon-to-label-baseline);
+    @include type.baselineToBottom($icon-with-label-height - $icon-margin-top - $icon-size - $icon-to-label-baseline);
 
     display: block;
 
-    min-height: 0;
+    min-block-size: 0;
     margin: 0;
   }
 }
@@ -168,8 +158,9 @@ $icon-with-label-height: 72 !default;
   overflow-x: hidden;
   overflow-x: scroll;
   -webkit-overflow-scrolling: touch;
+
   scroll-behavior: smooth;
-  
+
   // W3C standard
   scroll-snap-type: x mandatory;
   scrollbar-width: none;
@@ -183,12 +174,7 @@ $icon-with-label-height: 72 !default;
   scroll-snap-type-x: mandatory;
   -webkit-scroll-snap-points-x: repeat(100%);
   scroll-snap-points-x: repeat(100%);
-  
-  // Safari 9
-  
-  // IE + Edge
-  -ms-scroll-snap-x: mandatory snapInterval(0%, 100%);
-  
+
   overscroll-behavior-x: none;
 
   .mdw-tab[mdw-resize-stage] & {
@@ -203,8 +189,8 @@ $icon-with-label-height: 72 !default;
 .mdw-tab__panel {
   scroll-snap-align: center;
 
-  min-width: 100%;
-  max-width: 100%;
+  min-inline-size: 100%;
+  max-inline-size: 100%;
   flex-shrink: 0;
   flex-basis: 100%;
 
@@ -216,17 +202,16 @@ $icon-with-label-height: 72 !default;
     visibility: hidden;
   }
 
-
-  &[aria-expanded="false"] .mdw-tabs__panel__inactive-hide,
-  &[aria-expanded="true"] .mdw-tabs__panel__active-hide {
+  &[aria-expanded="false"] .mdw-tab__panel__inactive-hide,
+  &[aria-expanded="true"] .mdw-tab__panel__active-hide {
     visibility: hidden;
   }
 
-  &[aria-expanded="false"] .mdw-tabs__panel__inactive-remove,
-  &[aria-expanded="true"] .mdw-tabs__panel__active-remove {
+  &[aria-expanded="false"] .mdw-tab__panel__inactive-remove,
+  &[aria-expanded="true"] .mdw-tab__panel__active-remove {
     display: none;
   }
-  
+
 }
 
 .mdw-tab__content[mdw-no-scroll] {

package/components/tab/content.js

@@ -1,9 +1,6 @@
 import {
   dispatchDomEvent,
-  getPassiveEventListenerOption,
   isRtl,
-  iterateArrayLike,
-  iterateSomeOfArrayLike,
   scrollToElement,
 } from '../../core/dom.js';
 
@@ -25,6 +22,11 @@ function onKeyDown(event) {
     case 'ArrowRight':
     case 'Left':
     case 'Right':
+      if (event.target instanceof HTMLInputElement
+        || event.target instanceof HTMLTextAreaElement) {
+        return;
+      }
+      event.stopPropagation();
       event.preventDefault();
       break;
     default:
@@ -36,8 +38,7 @@ function onKeyDown(event) {
  * @return {void}
  */
 export function onTabContentScroll(event) {
-  /** @type {HTMLElement} */
-  const tabContentElement = (event.currentTarget);
+  const tabContentElement = /** @type {HTMLElement} */ (event.currentTarget);
   const isPageRtl = isRtl();
   const scrollPoint = tabContentElement.scrollLeft / tabContentElement.clientWidth;
   let visibleIndex = Math.floor(scrollPoint);
@@ -45,14 +46,15 @@ export function onTabContentScroll(event) {
 
   // Percentage may be incorrect due to floating point rounding errors
   // Compare integer values provided by browser to check if within 1px
-  iterateSomeOfArrayLike(tabContentElement.children, ((/** @type {HTMLElement} */ panel, index) => {
+  for (let i = 0; i < tabContentElement.children.length; i++) {
+    const panel = tabContentElement.children.item(i);
+    if (!(panel instanceof HTMLElement)) continue;
     if (Math.abs(tabContentElement.scrollLeft - panel.offsetLeft) <= 1) {
-      visibleIndex = index;
+      visibleIndex = i;
       visibilityPercentage = 0;
-      return true;
+      break;
     }
-    return false;
-  }));
+  }
 
   const isResting = visibilityPercentage === 0;
   let rightPanel;
@@ -88,12 +90,13 @@ export function onTabContentScroll(event) {
       selectedIndex = visibleIndex + 1;
     }
   }
-  /** @type {HTMLElement} */
-  const leftPanel = (tabContentElement.children.item(leftPanelIndex));
+
+  const leftPanel = /** @type {HTMLElement} */ (tabContentElement.children.item(leftPanelIndex));
 
   const currentTargetIndexString = tabContentElement.getAttribute('mdw-target-index');
-  const currentTargetIndex = currentTargetIndexString == null
-    ? null : parseInt(currentTargetIndexString, 10);
+  const currentTargetIndex = (currentTargetIndexString == null)
+    ? null
+    : Number.parseInt(currentTargetIndexString, 10);
 
   let updateSelected = false;
   let forceSelection = false;
@@ -103,12 +106,10 @@ export function onTabContentScroll(event) {
       TabPanel.setExpanded(rightPanel, rightSelected);
     }
     updateSelected = visibilityPercentage === 0;
-  } else if (currentTargetIndex === selectedIndex) {
-    if (visibilityPercentage === 0) {
-      updateSelected = true;
-      forceSelection = true;
-      tabContentElement.removeAttribute('mdw-target-index');
-    }
+  } else if (currentTargetIndex === selectedIndex && visibilityPercentage === 0) {
+    updateSelected = true;
+    forceSelection = true;
+    tabContentElement.removeAttribute('mdw-target-index');
   }
 
   TabPanel.setHidden(leftPanel, false);
@@ -145,15 +146,15 @@ export function selectPanel(tabContentElement, panel, scrollToPanel = 'smooth')
   let panelIndex = null;
   /** @type {Element[]} */
   const otherPanels = [];
-  iterateArrayLike(tabContentElement.getElementsByClassName('mdw-tab__panel'), (el, index) => {
+  // eslint-disable-next-line github/array-foreach
+  [...tabContentElement.getElementsByClassName('mdw-tab__panel')].forEach((el, index) => {
     if (currentSelectedIndex == null && TabPanel.isExpanded(el)) {
       currentSelectedIndex = index;
     }
     if (panel === el || panel === index) {
       TabPanel.setExpanded(el, true);
       TabPanel.setHidden(el, false);
-      /** @type {HTMLElement} */
-      panelElement = (el);
+      panelElement = /** @type {HTMLElement} */ (el);
       panelIndex = index;
     } else {
       otherPanels.push(el);
@@ -163,7 +164,7 @@ export function selectPanel(tabContentElement, panel, scrollToPanel = 'smooth')
     // Invalid index or panel not in tabcontent
     return;
   }
-  otherPanels.forEach((sibling) => TabPanel.setExpanded(sibling, false));
+  for (const sibling of otherPanels) TabPanel.setExpanded(sibling, false);
 
   const isPageRtl = isRtl();
   const targetScrollLeft = isPageRtl
@@ -171,7 +172,7 @@ export function selectPanel(tabContentElement, panel, scrollToPanel = 'smooth')
     : panelElement.offsetLeft;
   if (!scrollToPanel || panelElement.parentElement.scrollLeft === targetScrollLeft) {
     // No scrolling, hide others
-    otherPanels.forEach((sibling) => TabPanel.setHidden(sibling, true));
+    for (const sibling of otherPanels) TabPanel.setHidden(sibling, true);
     return;
   }
   if (scrollToPanel && panelElement) {
@@ -189,8 +190,10 @@ export function selectPanel(tabContentElement, panel, scrollToPanel = 'smooth')
  * @return {void}
  */
 export function attach(tabContentElement) {
-  tabContentElement.addEventListener('scroll', onTabContentScroll, getPassiveEventListenerOption());
-  iterateArrayLike(tabContentElement.getElementsByClassName('mdw-tab__panel'), TabPanel.attach);
+  tabContentElement.addEventListener('scroll', onTabContentScroll, { passive: true });
+  for (const element of tabContentElement.getElementsByClassName('mdw-tab__panel')) {
+    TabPanel.attach(element);
+  }
   tabContentElement.addEventListener('keydown', onKeyDown);
 }
 
@@ -201,5 +204,7 @@ export function attach(tabContentElement) {
 export function detach(tabContentElement) {
   tabContentElement.removeEventListener('keydown', onKeyDown);
   tabContentElement.removeEventListener('scroll', onTabContentScroll);
-  iterateArrayLike(tabContentElement.getElementsByClassName('mdw-tab__panel'), TabPanel.detach);
+  for (const element of tabContentElement.getElementsByClassName('mdw-tab__panel')) {
+    TabPanel.detach(element);
+  }
 }

package/components/tab/index.js

@@ -1,8 +1,5 @@
 import {
   dispatchDomEvent,
-  getPassiveEventListenerOption,
-  iterateSomeOfArrayLike,
-  nextTick,
 } from '../../core/dom.js';
 
 import * as TabContent from './content.js';
@@ -35,8 +32,7 @@ export function onResize(tabElement) {
     stage += 1;
     tabElement.setAttribute('mdw-resize-stage', stage.toString());
     if (stage === RESIZE_WAIT_FRAMES) {
-      /** @type {HTMLElement} */
-      const tabContentElement = (tabElement.getElementsByClassName('mdw-tab__content')[0]);
+      const tabContentElement = /** @type {HTMLElement} */ (tabElement.getElementsByClassName('mdw-tab__content')[0]);
       if (tabContentElement) {
         /** @type {HTMLElement} */
         const relatedPanel = (tabContentElement.querySelector('.mdw-tab__panel[aria-expanded="true"]'));
@@ -45,8 +41,7 @@ export function onResize(tabElement) {
         }
       }
     } else if (stage === RESIZE_WAIT_FRAMES * 2) {
-      /** @type {HTMLElement} */
-      const tabListElement = (tabElement.getElementsByClassName('mdw-tab__list')[0]);
+      const tabListElement = /** @type {HTMLElement} */ (tabElement.getElementsByClassName('mdw-tab__list')[0]);
       if (tabListElement) {
         /** @type {HTMLElement} */
         const relatedItem = (tabListElement.querySelector('.mdw-tab__item[aria-selected="true"]'));
@@ -58,9 +53,9 @@ export function onResize(tabElement) {
       return;
     }
 
-    nextTick(performResize);
+    requestAnimationFrame(performResize);
   }
-  nextTick(performResize);
+  requestAnimationFrame(performResize);
 }
 
 /**
@@ -85,18 +80,14 @@ export function onTabItemSelectedChange(event) {
   if (event.detail.value !== 'true') {
     return;
   }
-  /** @type {HTMLElement} */
-  const tabElement = (event.currentTarget);
-  /** @type {HTMLElement} */
-  const tabItemElement = (event.target);
-  /** @type {HTMLElement} */
-  const tabListElement = (tabElement.getElementsByClassName('mdw-tab__list')[0]);
+  const tabElement = /** @type {HTMLElement} */ (event.currentTarget);
+  const tabItemElement = /** @type {HTMLElement} */ (event.target);
+  const tabListElement = /** @type {HTMLElement} */ (tabElement.getElementsByClassName('mdw-tab__list')[0]);
   if (!tabListElement) {
     return;
   }
 
-  /** @type {HTMLElement} */
-  const tabContentElement = (tabElement.getElementsByClassName('mdw-tab__content')[0]);
+  const tabContentElement = /** @type {HTMLElement} */ (tabElement.getElementsByClassName('mdw-tab__content')[0]);
   const tabItemIndex = TabList.getTabItemIndex(tabListElement, tabItemElement);
   if (tabItemIndex === -1) {
     return;
@@ -120,8 +111,7 @@ export function onTabItemSelectedChange(event) {
  * @return {void}
  */
 export function onTabContentScroll(event) {
-  /** @type {HTMLElement} */
-  const tabElement = (event.currentTarget);
+  const tabElement = /** @type {HTMLElement} */ (event.currentTarget);
   const { detail } = event;
   if (!detail.forceSelection && tabElement.hasAttribute('mdw-resize-stage')) {
     return;
@@ -147,14 +137,12 @@ export function onTabPanelExpandedChange(event) {
   if (event.detail.value !== 'true') {
     return;
   }
-  /** @type {HTMLElement} */
-  const tabElement = (event.currentTarget);
+  const tabElement = /** @type {HTMLElement} */ (event.currentTarget);
   if (tabElement.hasAttribute('mdw-resize-stage')) {
     return;
   }
   let index = 0;
-  /** @type {HTMLElement} */
-  const tabPanelElement = (event.target);
+  const tabPanelElement = /** @type {HTMLElement} */ (event.target);
   let sibling = tabPanelElement.previousElementSibling;
   while (sibling) {
     index += 1;
@@ -181,22 +169,31 @@ export function attach(tabElement) {
     TabContent.attach(tabContentElement);
   }
 
-  tabElement.addEventListener(TabContent.SCROLL_EVENT, onTabContentScroll,
-    getPassiveEventListenerOption());
-  tabElement.addEventListener(TabItem.SELECTED_CHANGE_EVENT, onTabItemSelectedChange,
-    getPassiveEventListenerOption());
-  tabElement.addEventListener(TabPanel.EXPANDED_CHANGE_EVENT, onTabPanelExpandedChange,
-    getPassiveEventListenerOption());
+  tabElement.addEventListener(
+    TabContent.SCROLL_EVENT,
+    onTabContentScroll,
+    { passive: true },
+  );
+  tabElement.addEventListener(
+    TabItem.SELECTED_CHANGE_EVENT,
+    onTabItemSelectedChange,
+    { passive: true },
+  );
+  tabElement.addEventListener(
+    TabPanel.EXPANDED_CHANGE_EVENT,
+    onTabPanelExpandedChange,
+    { passive: true },
+  );
 
-  /** @type {ArrayLike<Element>} */
+  /** @type {HTMLCollectionOf<Element>|Element[]} */
   const items = (tabListElement && tabListElement.getElementsByClassName('mdw-tab__item')) || [];
-  /** @type {ArrayLike<Element>} */
+  /** @type {HTMLCollectionOf<Element>|Element[]} */
   const panels = (tabContentElement && tabContentElement.getElementsByClassName('mdw-tab__panel')) || [];
 
   let selectedItem;
   let selectedPanel;
   let selectedIndex;
-  iterateSomeOfArrayLike(items, (itemElement, index) => {
+  [...items].some((itemElement, index) => {
     if (itemElement.getAttribute('aria-selected') === 'true') {
       selectedItem = itemElement;
       selectedPanel = panels[index];
@@ -206,7 +203,7 @@ export function attach(tabElement) {
     return false;
   });
   if (selectedIndex == null) {
-    iterateSomeOfArrayLike(panels, (panelElement, index) => {
+    [...panels].some((panelElement, index) => {
       if (panelElement.getAttribute('aria-expanded') === 'true') {
         selectedPanel = panelElement;
         selectedItem = items[index];

package/components/tab/item.js

@@ -1,7 +1,6 @@
 // https://www.w3.org/TR/wai-aria-1.1/#tab
 
 import * as AriaTab from '../../core/aria/tab.js';
-import { iterateArrayLike } from '../../core/dom.js';
 import * as Overlay from '../../core/overlay/index.js';
 import * as Ripple from '../../core/ripple/index.js';
 
@@ -22,8 +21,7 @@ export function setSelected(element, value, dispatchEvent = true) {
  * @return {void}
  */
 function onClick(event) {
-  /** @type {HTMLElement} */
-  const element = (event.currentTarget);
+  const element = /** @type {HTMLElement} */ (event.currentTarget);
   if (element.getAttribute('aria-disabled') === 'true') {
     return;
   }
@@ -36,8 +34,9 @@ function onClick(event) {
  */
 export function attachAria(element) {
   AriaTab.attach(element);
-  iterateArrayLike(element.getElementsByClassName('mdw-tab__icon'),
-    (el) => el.setAttribute('aria-hidden', 'true'));
+  for (const el of element.getElementsByClassName('mdw-tab__icon')) {
+    el.setAttribute('aria-hidden', 'true');
+  }
 }
 
 /**