@shortfuse/materialdesignweb 0.8.0 → 0.9.1

package/mixins/PopupMixin.js

@@ -1,97 +1,25 @@
+import { attemptFocus, isRtl } from '../core/dom.js';
+import { canAnchorPopup } from '../utils/popup.js';
+
+import DelegatesFocusMixin from './DelegatesFocusMixin.js';
+import '../components/Scrim.js';
+import ResizeObserverMixin from './ResizeObserverMixin.js';
+
+const supportsHTMLDialogElement = typeof HTMLDialogElement !== 'undefined';
+
+/** @typedef {import('../utils/popup.js').DOMRectLike} DOMRectLike */
+
 /**
  * @typedef {Object} PopupStack
- * @prop {Element} element
- * @prop {Element} previousFocus
+ * @prop {InstanceType<ReturnType<typeof PopupMixin>>} element
+ * @prop {HTMLElement} previousFocus
  * @prop {boolean} [centered=false]
  * @prop {Record<string, any>} [state]
  * @prop {Record<string, any>} [previousState]
- * @prop {MouseEvent|PointerEvent|HTMLElement|Element} [originalEvent]
  * @prop {any} [pendingResizeOperation]
  * @prop {window['history']['scrollRestoration']} [scrollRestoration]
  */
 
-import CustomElement from '../core/CustomElement.js';
-import { attemptFocus } from '../core/dom.js';
-import { canAnchorPopup } from '../utils/popup.js';
-
-CustomElement
-  .extend()
-  .observe({
-    hidden: 'boolean',
-  })
-  .html`<div id=scroll-blocker></div>`
-  .css`
-    :host {
-      position: fixed;
-      inset: 0;
-
-      display: block;
-      overflow: overlay;
-
-      overscroll-behavior: none;
-      overscroll-behavior: contain;
-      scrollbar-color: transparent transparent;
-      scrollbar-width: thin;
-
-      opacity: 0;
-
-      z-index: 23;
-
-      background-color: rgb(var(--mdw-color__scrim));
-      
-      animation: fade-in 200ms forwards ease-out;
-      
-      will-change: opacity;
-    }
-
-    :host([hidden]) {
-      animation-name: fade-out;
-      animation-timing-function: ease-in;
-    }
-
-    :host([invisible]) {
-      background: transparent;
-    }
-
-    #scroll-blocker {
-      position: absolute;
-      top: 0;
-      left: 0;
-
-      display: block;
-
-      height: 200%;
-      width: 200%;
-    }
-
-    @keyframes fade-in {
-      from {
-        opacity: 0;
-      }
-
-      to {
-        opacity: 0.38;
-      }
-    }
-
-    @keyframes fade-out {
-      from {
-        opacity: 0.38;
-      }
-
-      to {
-        opacity: 0;
-      }
-    }
-  `
-  .events({
-    animationend() {
-      if (this.hidden) this.remove();
-    },
-  })
-  .autoRegister('mdw-scrim');
-
-const supportsHTMLDialogElement = typeof HTMLDialogElement !== 'undefined';
 /** @type {PopupStack[]} */
 const OPEN_POPUPS = [];
 
@@ -99,17 +27,20 @@ const OPEN_POPUPS = [];
  * @return {void}
  */
 function onWindowResize() {
-  const lastOpenPopup = OPEN_POPUPS.at(-1);
-  if (!lastOpenPopup || !lastOpenPopup.originalEvent) {
-    return;
+  // Fire in popup order
+  for (const { element } of OPEN_POPUPS) {
+    element.updatePopupPosition();
   }
-  if (lastOpenPopup.pendingResizeOperation) {
-    cancelAnimationFrame(lastOpenPopup.pendingResizeOperation);
+}
+
+/**
+ * Prevent focus being given to elements via mouse nav back
+ * @param {MouseEvent} event
+ */
+function onNavMouseDown(event) {
+  if (event.button === 3) {
+    event.preventDefault();
   }
-  lastOpenPopup.pendingResizeOperation = requestAnimationFrame(() => {
-    lastOpenPopup.element.updatePopupPosition(lastOpenPopup.originalEvent);
-    lastOpenPopup.pendingResizeOperation = null;
-  });
 }
 
 /**
@@ -141,78 +72,101 @@ function onBeforeUnload(event) {
 }
 
 /**
+ * Provides positioning, modal behavior, and history-aware popup/dialog support.
  * @param {typeof import('../core/CustomElement.js').default} Base
  */
 export default function PopupMixin(Base) {
   return Base
+    .mixin(DelegatesFocusMixin)
+    .mixin(ResizeObserverMixin)
     .observe({
+      /** Whether the popup is currently open */
       open: 'boolean',
+      /** When true the popup behaves as a blocking modal */
       modal: 'boolean',
-      _isNativeModal: 'boolean',
+      /** Use the native HTMLDialogElement when available */
+      native: 'boolean',
+      /** Allow internal content to scroll when true */
       scrollable: 'boolean',
+      /** When true, match the popup width to the source element */
       matchSourceWidth: 'boolean',
+      /** Internal: current resolved flow used for positioning */
       _currentFlow: 'string',
       flow: {
         type: 'string',
         /** @type {'corner'|'adjacent'|'overflow'|'vcenter'|'hcenter'|'center'} */
         value: null,
       },
+      /** Margin between popup and viewport/anchor (px) */
+      popupMargin: 'float',
     })
     .set({
+      /** Whether to push/pop history entries when opening the popup */
+      useHistory: true,
+      /** Optional return value for dialog-like popups */
       returnValue: '',
-      delegatesFocus: true,
+      /** Internal: true while closing is in-progress */
       _closing: false,
+      /** Internal: whether to show a scrim (overlay) for modal popups */
       _useScrim: false,
+      /**
+       * Source that triggered the popup
+       * @type {MouseEvent|PointerEvent|HTMLElement|Event}
+       */
+      _source: null,
+      /**
+       * Anchor used for positioning
+       * @type {MouseEvent|PointerEvent|HTMLElement|Event}
+       */
+      _anchor: null,
     })
     .define({
       _dialog() {
         return /** @type {HTMLDialogElement} */ (this.refs.dialog);
       },
     })
+    .expressions({
+      _ariaHidden({ open }) {
+        return (open ? 'false' : 'true');
+      },
+    })
     .methods({
       /**
-       * @param {DOMRect|Element} [anchor]
+       * @param {DOMRectLike|Element} [anchor]
        * @return {void}
        */
-      updatePopupPosition(anchor) {
+      updatePopupPosition(anchor = this._anchor) {
         const flow = this._currentFlow ?? this.flow;
-        this.style.setProperty('min-width', 'none');
-        this.style.setProperty('min-height', 'none');
-        this.style.setProperty('width', 'auto');
-        this.style.setProperty('height', 'auto');
-        this.style.setProperty('max-width', 'none');
-        this.style.setProperty('max-height', 'none');
-        this.style.setProperty('top', '0');
-        this.style.setProperty('left', '0');
-        this.style.setProperty('--mdw-popup__x-offset', '0');
-        this.style.setProperty('--mdw-popup__y-offset', '0');
-
-        const layoutElement = this._isNativeModal ? this._dialog : this;
-        layoutElement.style.setProperty('width', 'auto');
-        layoutElement.style.setProperty('height', 'auto');
+        Object.assign(this.style, {
+          top: '0',
+          left: '0',
+          right: 'auto',
+          bottom: 'auto',
+          maxWidth: null,
+          maxHeight: null,
+        });
+
+        const layoutElement = this.native ? this._dialog : this;
+        Object.assign(layoutElement.style, { width: 'auto', height: 'auto' });
 
         const width = (anchor && this.matchSourceWidth)
-          ? anchor.clientWidth
+          ? /** @type {Element} */ (anchor).clientWidth
           : 56 * Math.ceil(layoutElement.clientWidth / 56);
 
-        this.style.setProperty('width', `${width}px`);
+        layoutElement.style.setProperty('width', `${width}px`);
 
         const height = layoutElement.clientHeight;
-        layoutElement.style.removeProperty('width');
-        layoutElement.style.removeProperty('height');
+        Object.assign(layoutElement.style, { height: null });
 
-        const initialRect = this.getBoundingClientRect();
         /** @type {import('../utils/popup.js').CanAnchorPopUpOptions} */
         const anchorOptions = {
-          anchor: anchor == null
-            ? this.getBoundingClientRect()
-            : (anchor instanceof Element ? anchor.getBoundingClientRect() : anchor),
+          anchor,
           width,
           height,
-          margin: 0,
+          margin: this.popupMargin ?? (window.innerWidth < 648 ? 16 : 24),
         };
 
-        const isPageRTL = (getComputedStyle(this).direction === 'rtl');
+        const isPageRTL = isRtl(this);
         const xStart = isPageRTL ? 'right' : 'left';
         const xEnd = isPageRTL ? 'left' : 'right';
 
@@ -272,8 +226,7 @@ export default function PopupMixin(Base) {
          * - Open from center           9i             █·
          */
 
-        /** @type {import('../utils/popup.js').CanAnchorPopUpOptions[]} */
-        const preferences = [
+        const preferences = /** @type {import('../utils/popup.js').CanAnchorPopUpOptions[]} */ ([
           ((flow ?? 'corner') === 'corner') ? [
             { clientY: 'bottom', clientX: xStart },
             { clientY: 'bottom', clientX: xEnd },
@@ -303,7 +256,7 @@ export default function PopupMixin(Base) {
           ((flow ?? 'center') === 'center') ? [
             { clientY: 'center', clientX: 'center', directionX: 'center', directionY: 'center' },
           ] : [],
-        ].flat();
+        ].flat());
 
         let anchorResult;
         for (const preference of preferences) {
@@ -317,16 +270,18 @@ export default function PopupMixin(Base) {
           if (result.visibility === 1) break;
         }
 
-        this.style.setProperty('top', `${anchorResult.top - initialRect.y}px`);
-        this.style.setProperty('left', `${anchorResult.left - initialRect.x}px`);
-        this.style.setProperty('min-width', `${anchorResult.right - anchorResult.left}px`);
-        this.style.setProperty('min-height', `${anchorResult.bottom - anchorResult.top}px`);
-        this.style.removeProperty('width');
-        this.style.removeProperty('height');
-        this.style.setProperty('max-width', `${anchorResult.right - anchorResult.left}px`);
-        this.style.setProperty('max-height', `${anchorResult.bottom - anchorResult.top}px`);
-        this.style.setProperty('transform-origin', `${anchorResult.transformOriginY} ${anchorResult.transformOriginX}`);
-        this.scrollIntoView();
+        let { maxWidth, maxHeight } = anchorResult.styles;
+        if (maxWidth || maxHeight) {
+          const styles = window.getComputedStyle(this);
+          if (styles.maxWidth) {
+            maxWidth = `min(${maxWidth}, ${styles.maxWidth})`;
+          }
+          if (styles.maxHeight) {
+            maxHeight = `min(${maxHeight}, ${styles.maxHeight})`;
+          }
+        }
+        Object.assign(this.style, { ...anchorResult.styles, maxWidth, maxHeight });
+        // this.scrollIntoView();
       },
       /**
        * @param {Event & {currentTarget: HTMLSlotElement}} event
@@ -348,19 +303,27 @@ export default function PopupMixin(Base) {
       showPopup(source, focus = true, flow = null) {
         if (this.open) return false;
         this.open = true;
+        this._source = source;
+        this._anchor = source;
 
-        // SCRIM
+        const { scrim } = this.refs;
         if (this._useScrim) {
-          document.body.append(this.refs.scrim);
-          this.refs.scrim.hidden = false;
+          if (this.native) {
+            document.body.append(scrim);
+          } else {
+            this.before(scrim);
+          }
+          scrim.hidden = false;
         } else {
-          this.refs.scrim.remove();
+          scrim.remove();
         }
 
-        const previousFocus = source instanceof HTMLElement ? source : document.activeElement;
+        const previousFocus = source instanceof HTMLElement
+          ? source
+          : /** @type {HTMLElement} */(document.activeElement);
 
-        if (supportsHTMLDialogElement && focus) {
-          // Calling show will force focus which is not intended for non-modals
+        if (supportsHTMLDialogElement && focus // Calling show will force focus which is not intended for non-modals
+          && !this._dialog.open) {
           this._dialog.show();
         }
 
@@ -368,41 +331,50 @@ export default function PopupMixin(Base) {
 
         // Short first, then move
         // Native modals can fail update bounds on Chrome
+        // @ts-ignore `updatePopupPosition` has runtime check
         this.updatePopupPosition(source);
 
-        const newState = { hash: Math.random().toString(36).slice(2, 18) };
-        let previousState = null;
+        let newState;
+        let scrollRestoration;
+        let previousState;
+        if (this.useHistory) {
+          newState = { hash: Math.random().toString(36).slice(2, 18) };
+
+          if (!window.history.state) {
+            // Create new previous state
+            window.history.replaceState({
+              hash: Math.random().toString(36).slice(2, 18),
+            }, document.title);
+          }
+          previousState = window.history.state;
+
+          scrollRestoration = window.history.scrollRestoration;
 
-        if (!window.history.state) {
-          // Create new previous state
-          window.history.replaceState({
-            hash: Math.random().toString(36).slice(2, 18),
-          }, document.title);
+          window.history.scrollRestoration = 'manual';
+          window.history.pushState(newState, document.title);
+          window.addEventListener('popstate', onPopState);
+          window.addEventListener('beforeunload', onBeforeUnload);
         }
-        previousState = window.history.state;
 
-        const scrollRestoration = window.history.scrollRestoration;
-        window.history.scrollRestoration = 'manual';
-        window.history.pushState(newState, document.title);
-        console.debug('Popup pushed page');
-        window.addEventListener('popstate', onPopState);
-        window.addEventListener('beforeunload', onBeforeUnload);
+        window.addEventListener('mousedown', onNavMouseDown, { capture: true });
 
         window.addEventListener('resize', onWindowResize);
         window.addEventListener('scroll', onWindowResize);
+        if (window.visualViewport) {
+          window.visualViewport.addEventListener('resize', onWindowResize);
+          window.visualViewport.addEventListener('scroll', onWindowResize);
+        }
 
         OPEN_POPUPS.push({
           element: this,
           previousFocus,
           state: newState,
           previousState,
-          originalEvent: source,
           scrollRestoration,
         });
 
         // Overrideable
         if (focus) {
-          console.log('focusing!');
           this.focus();
         }
 
@@ -419,7 +391,7 @@ export default function PopupMixin(Base) {
         this.modal = true;
         if (supportsHTMLDialogElement) {
           this._dialog.showModal();
-          this._isNativeModal = true;
+          this.native = true;
         }
         return this.showPopup(source, focus, flow);
       },
@@ -445,14 +417,15 @@ export default function PopupMixin(Base) {
       close(returnValue = undefined, returnFocus = true) {
         if (!this.open) return false;
         if (this._closing) return false;
+        this._source = null;
         this._closing = true;
         this.modal = false;
 
         // SCRIM
         this.refs.scrim.hidden = true;
 
-        if (this._isNativeModal) {
-          this._isNativeModal = false;
+        if (this.native) {
+          this.native = false;
         } else {
           const main = document.querySelector('main');
           if (main) {
@@ -465,7 +438,8 @@ export default function PopupMixin(Base) {
           // Closing a native dialog will return focus automatically.
           this._dialog.close();
           if (!attemptFocus(previousFocus, { preventScroll: true })) {
-            document.activeElement?.blur?.();
+            const currentlyFocused = /** @type {SVGElement|HTMLElement} */ (document.activeElement);
+            currentlyFocused?.blur?.();
           }
         } else {
           this._dialog.returnValue = returnValue;
@@ -481,43 +455,50 @@ export default function PopupMixin(Base) {
         for (let i = len - 1; i >= 0; i--) {
           const entry = OPEN_POPUPS[i];
           if (entry.element === this) {
-            if (entry.state && window.history
-              && window.history.state && entry.state.hash === window.history.state.hash) {
-              window.removeEventListener('popstate', onPopState);
-              window.history.back();
-              // Back does not set state immediately
-              // Needed to track submenu
-              // TODO: use window.history.go(indexDelta) instead for Safari (not Webkit) submenu support
-              window.history.replaceState(entry.previousState, document.title);
-              window.history.scrollRestoration = entry.scrollRestoration || 'auto';
-              window.addEventListener('popstate', onPopState);
-            } else {
-              console.warn('Menu state mismatch?', entry, window.history.state);
+            if (this.useHistory) {
+              if (entry.state && window.history
+                && window.history.state && entry.state.hash === window.history.state.hash) {
+                window.removeEventListener('popstate', onPopState);
+                window.history.back();
+                // Back does not set state immediately
+                // Needed to track submenu
+                // TODO: use window.history.go(indexDelta) instead for Safari (not Webkit) submenu support
+                window.history.replaceState(entry.previousState, document.title);
+                window.history.scrollRestoration = entry.scrollRestoration || 'auto';
+                window.addEventListener('popstate', onPopState);
+              } else {
+                console.warn('Menu state mismatch?', entry, window.history.state);
+              }
             }
             if (returnFocus) {
-              console.log('not returning focus');
+              // console.log('not returning focus');
               entry.previousFocus?.focus?.({ preventScroll: true });
             }
             OPEN_POPUPS.splice(i, 1);
             break;
           } else if (this.contains(entry.element)) {
-            console.debug('Closing submenu first');
+            // console.debug('Closing submenu first');
             entry.element.close(false);
-            console.debug('Sub menu closed. Continuing...');
+            // console.debug('Sub menu closed. Continuing...');
           }
         }
         if (!OPEN_POPUPS.length) {
           window.removeEventListener('popstate', onPopState);
           window.removeEventListener('beforeunload', onBeforeUnload);
           window.removeEventListener('resize', onWindowResize);
-          console.debug('All menus closed');
+          window.removeEventListener('mousedown', onNavMouseDown, { capture: true });
+          // console.debug('All menus closed');
         }
         this._closing = false;
         return true;
       },
     })
-    .expressions({
-      _ariaHidden({ open }) { return (open ? 'false' : 'true'); },
+
+    .overrides({
+      onResizeObserved(entry) {
+        if (!this.open || this._closing) return;
+        this.updatePopupPosition();
+      },
     })
     .html`
       <mdw-scrim id=scrim tabindex=-1 aria-hidden=true></mdw-scrim>
@@ -529,19 +510,25 @@ export default function PopupMixin(Base) {
     .css`
     /* https://m3.material.io/components/dialogs/specs */
 
+    :host([popover]) {
+      margin: 0;
+      border: 0;
+      padding: 0;
+    }
+
+    :host(::backdrop) {
+      display: none;
+    }
+
     :host {
       --mdw-popup__expand-duration: var(--mdw-motion-expand-duration, 250ms);
       --mdw-popup__simple-duration: var(--mdw-motion-simple-duration, 100ms);
       --mdw-popup__standard-easing: var(--mdw-motion-standard-easing, cubic-bezier(0.4, 0.0, 0.2, 1));
       --mdw-popup__deceleration-easing: var(--mdw-motion-deceleration-easing, cubic-bezier(0.0, 0.0, 0.2, 1));
       --mdw-popup__fade-in-duration: var(--mdw-motion-fade-in-duration, 150ms);
-      --mdw-popup__x-offset: -50%;
-      --mdw-popup__y-offset: -50%;
 
       --mdw-shape__size: 28px;
 
-      --mdw-surface__shadow__resting: var(--mdw-surface__shadow__3);
-      --mdw-surface__shadow__raised: var(--mdw-surface__shadow__resting);
       /* padding-inline: 12px; */
 
       --mdw-bg: var(--mdw-color__surface);
@@ -549,10 +536,8 @@ export default function PopupMixin(Base) {
 
       position: fixed;
 
-      /* stylelint-disable-next-line liberty/use-logical-spec */
-      top: 50%;
-      /* stylelint-disable-next-line liberty/use-logical-spec */
-      left: 50%;
+      inset-block-start: 0;
+      inset-inline-start: 0;
       align-self: center;
       justify-self: center;
 
@@ -569,15 +554,14 @@ export default function PopupMixin(Base) {
       inline-size: auto;
       min-inline-size: none;
       max-inline-size: 100vw;
-  
-      
+
+      outline: none; /* Older Chromium Builds */
+
       pointer-events: none;
 
       opacity: 0;
+      transform: scale(0);
 
-      transform: translateX(var(--mdw-popup__x-offset)) translateY(var(--mdw-popup__y-offset)) scale(0) ;
-      /* visiblity:hidden still registers events, hide from pointer with scale(0) */
-      transform-origin: top center;
       visibility: hidden;
       z-index: 24;
 
@@ -586,30 +570,30 @@ export default function PopupMixin(Base) {
       font: var(--mdw-type__font);
       letter-spacing: var(--mdw-type__letter-spacing);
 
-      transition-delay: 0s, 200ms, 200ms;
-      transition-duration: 200ms, 0s, 0s;
-      transition-property: opacity, transform, visibility;
+      transition-delay: 200ms, 0s;
+      transition-duration: 0s, 200ms, 200ms;
+      transition-property: visibility, opacity, transform;
       transition-timing-function: ease-out;
 
-      will-change: display, transform;
-      will-change: opacity;
+      will-change: visibility, opacity, transform;
 
     }
 
     :host([open]) {
-      pointer-events: auto;
+      pointer-events: inherit;
 
       opacity: 1;
 
-      transform: translateX(var(--mdw-popup__x-offset)) translateY(var(--mdw-popup__y-offset)) scale(1);
-      visibility: visible;
+      transform: none;
+      visibility: inherit;
 
       transition-delay: 0s;
-      transition-duration: 0s;
       transition-timing-function: ease-in;
     }
 
-    
+    :host([native][open]) {
+      opacity: 0;
+    }
 
     #dialog {
       position: static;
@@ -625,17 +609,16 @@ export default function PopupMixin(Base) {
       place-items: inherit;
 
       box-sizing: border-box;
-
       block-size: inherit;
-      
-      
       flex: inherit;
       margin:0;
       border: none;
       padding: inherit;
       padding: 0;
 
-      pointer-events: auto;
+      pointer-events: inherit;
+
+      filter: inherit;
 
       opacity: 1;
 
@@ -650,6 +633,16 @@ export default function PopupMixin(Base) {
       
     }
 
+    :host([color]) {
+      background-color: rgb(var(--mdw-bg));
+      color: rgb(var(--mdw-ink));
+    }
+
+    :host(:is([color="none"],[color="transparent"])) {
+      background-color: transparent;
+      color: inherit;
+    }
+
     :host([scrollable]) {
       overflow-y:auto;
     }
@@ -681,10 +674,14 @@ export default function PopupMixin(Base) {
       flex: inherit;
       padding: inherit;
 
-      pointer-events: auto;
+      pointer-events: inherit;
 
+      filter: inherit;
       transform: inherit;
       visibility: inherit;
+
+      background-color: inherit;
+      border-radius: inherit;
     }
 
     #dialog[scrollable][open] {
@@ -697,10 +694,10 @@ export default function PopupMixin(Base) {
       
       place-items: inherit;
 
-      height: 100%;
-      max-height: none;
-      width: 100%;
-      max-width: none;
+      block-size: 100%;
+      max-block-size: none;
+      inline-size: 100%;
+      max-inline-size: none;
 
       flex: 1;
     }
@@ -710,12 +707,12 @@ export default function PopupMixin(Base) {
     #dialog[scrollable][open]:modal {
       overflow:auto;
 
-      height:100%;
-      min-height: none;
-      max-height: inherit;
-      width:100%;
-      min-width: none;
-      max-width: inherit;
+      block-size:100%;
+      min-block-size: none;
+      max-block-size: inherit;
+      inline-size:100%;
+      min-inline-size: none;
+      max-inline-size: inherit;
       flex: inherit;
       padding: inherit;
     }
@@ -738,7 +735,7 @@ export default function PopupMixin(Base) {
         '~click'(event) {
           // Track if click on backdrop
           if (event.target !== event.currentTarget) return;
-          if (!this._isNativeModal) return;
+          if (!this.native) return;
           if (event.offsetX >= 0 && event.offsetX < event.currentTarget.offsetWidth
         && event.offsetY >= 0 && event.offsetY < event.currentTarget.offsetHeight) return;
           const cancelEvent = new Event('cancel', { cancelable: true });