first commit

wp-includes/js/dist/script-modules/block-library/navigation/view.js

@@ -0,0 +1,177 @@
+// packages/block-library/build-module/navigation/view.mjs
+import {
+  store,
+  getContext,
+  getElement,
+  withSyncEvent
+} from "@wordpress/interactivity";
+var focusableSelectors = [
+  "a[href]",
+  'input:not([disabled]):not([type="hidden"]):not([aria-hidden])',
+  "select:not([disabled]):not([aria-hidden])",
+  "textarea:not([disabled]):not([aria-hidden])",
+  "button:not([disabled]):not([aria-hidden])",
+  "[contenteditable]",
+  '[tabindex]:not([tabindex^="-"])'
+];
+function getFocusableElements(ref) {
+  const focusableElements = ref.querySelectorAll(focusableSelectors);
+  return Array.from(focusableElements).filter((element) => {
+    if (typeof element.checkVisibility === "function") {
+      return element.checkVisibility({
+        checkOpacity: false,
+        checkVisibilityCSS: true
+      });
+    }
+    return element.offsetParent !== null;
+  });
+}
+document.addEventListener("click", () => {
+});
+var { state, actions } = store(
+  "core/navigation",
+  {
+    state: {
+      get roleAttribute() {
+        const ctx = getContext();
+        return ctx.type === "overlay" && state.isMenuOpen ? "dialog" : null;
+      },
+      get ariaModal() {
+        const ctx = getContext();
+        return ctx.type === "overlay" && state.isMenuOpen ? "true" : null;
+      },
+      get ariaLabel() {
+        const ctx = getContext();
+        return ctx.type === "overlay" && state.isMenuOpen ? ctx.ariaLabel : null;
+      },
+      get isMenuOpen() {
+        return Object.values(state.menuOpenedBy).filter(Boolean).length > 0;
+      },
+      get menuOpenedBy() {
+        const ctx = getContext();
+        return ctx.type === "overlay" ? ctx.overlayOpenedBy : ctx.submenuOpenedBy;
+      }
+    },
+    actions: {
+      openMenuOnHover(event) {
+        if (event?.pointerType === "touch") {
+          return;
+        }
+        const { type, overlayOpenedBy } = getContext();
+        if (type === "submenu" && // Only open on hover if the overlay is closed.
+        Object.values(overlayOpenedBy || {}).filter(Boolean).length === 0) {
+          actions.openMenu("hover");
+        }
+      },
+      closeMenuOnHover(event) {
+        if (event?.pointerType === "touch") {
+          return;
+        }
+        const { type, overlayOpenedBy } = getContext();
+        if (type === "submenu" && // Only close on hover if the overlay is closed.
+        Object.values(overlayOpenedBy || {}).filter(Boolean).length === 0) {
+          actions.closeMenu("hover");
+        }
+      },
+      openMenuOnClick() {
+        const ctx = getContext();
+        const { ref } = getElement();
+        ctx.previousFocus = ref;
+        actions.openMenu("click");
+      },
+      closeMenuOnClick() {
+        actions.closeMenu("click");
+        actions.closeMenu("focus");
+      },
+      openMenuOnFocus() {
+        actions.openMenu("focus");
+      },
+      toggleMenuOnClick() {
+        const ctx = getContext();
+        const { ref } = getElement();
+        if (window.document.activeElement !== ref) {
+          ref.focus();
+        }
+        const { menuOpenedBy } = state;
+        if (menuOpenedBy.click || menuOpenedBy.focus) {
+          actions.closeMenu("click");
+          actions.closeMenu("focus");
+          actions.closeMenu("hover");
+        } else {
+          ctx.previousFocus = ref;
+          actions.openMenu("click");
+        }
+      },
+      handleMenuKeydown: withSyncEvent((event) => {
+        const { type, firstFocusableElement, lastFocusableElement } = getContext();
+        if (state.menuOpenedBy.click) {
+          if (event.key === "Escape") {
+            event.stopPropagation();
+            actions.closeMenu("click");
+            actions.closeMenu("focus");
+            return;
+          }
+          if (type === "overlay" && event.key === "Tab") {
+            if (event.shiftKey && window.document.activeElement === firstFocusableElement) {
+              event.preventDefault();
+              lastFocusableElement.focus();
+            } else if (!event.shiftKey && window.document.activeElement === lastFocusableElement) {
+              event.preventDefault();
+              firstFocusableElement.focus();
+            }
+          }
+        }
+      }),
+      handleMenuFocusout: withSyncEvent((event) => {
+        const { modal, type } = getContext();
+        if (event.relatedTarget === null || !modal?.contains(event.relatedTarget) && event.target !== window.document.activeElement && type === "submenu") {
+          actions.closeMenu("click");
+          actions.closeMenu("focus");
+        }
+      }),
+      openMenu(menuOpenedOn = "click") {
+        const { type } = getContext();
+        state.menuOpenedBy[menuOpenedOn] = true;
+        if (type === "overlay") {
+          document.documentElement.classList.add("has-modal-open");
+        }
+      },
+      closeMenu(menuClosedOn = "click") {
+        const ctx = getContext();
+        state.menuOpenedBy[menuClosedOn] = false;
+        if (!state.isMenuOpen) {
+          if (ctx.modal?.contains(window.document.activeElement)) {
+            ctx.previousFocus?.focus();
+          }
+          ctx.modal = null;
+          ctx.previousFocus = null;
+          if (ctx.type === "overlay") {
+            document.documentElement.classList.remove(
+              "has-modal-open"
+            );
+          }
+        }
+      }
+    },
+    callbacks: {
+      initMenu() {
+        const ctx = getContext();
+        const { ref } = getElement();
+        if (state.isMenuOpen) {
+          const focusableElements = getFocusableElements(ref);
+          ctx.modal = ref;
+          ctx.firstFocusableElement = focusableElements[0];
+          ctx.lastFocusableElement = focusableElements[focusableElements.length - 1];
+        }
+      },
+      focusFirstElement() {
+        const { ref } = getElement();
+        if (state.isMenuOpen) {
+          const focusableElements = getFocusableElements(ref);
+          focusableElements?.[0]?.focus();
+        }
+      }
+    }
+  },
+  { lock: true }
+);

wp-includes/js/dist/script-modules/block-library/navigation/view.min.asset.php

@@ -0,0 +1 @@
+<?php return array('dependencies' => array(), 'module_dependencies' => array(array('id' => '@wordpress/interactivity', 'import' => 'static')), 'version' => '96a846e1d7b789c39ab9');

wp-includes/js/dist/script-modules/block-library/navigation/view.min.js

@@ -0,0 +1 @@
+import{store as r,getContext as c,getElement as s,withSyncEvent as i}from"@wordpress/interactivity";var d=["a[href]",'input:not([disabled]):not([type="hidden"]):not([aria-hidden])',"select:not([disabled]):not([aria-hidden])","textarea:not([disabled]):not([aria-hidden])","button:not([disabled]):not([aria-hidden])","[contenteditable]",'[tabindex]:not([tabindex^="-"])'];function a(e){let n=e.querySelectorAll(d);return Array.from(n).filter(t=>typeof t.checkVisibility=="function"?t.checkVisibility({checkOpacity:!1,checkVisibilityCSS:!0}):t.offsetParent!==null)}document.addEventListener("click",()=>{});var{state:l,actions:o}=r("core/navigation",{state:{get roleAttribute(){return c().type==="overlay"&&l.isMenuOpen?"dialog":null},get ariaModal(){return c().type==="overlay"&&l.isMenuOpen?"true":null},get ariaLabel(){let e=c();return e.type==="overlay"&&l.isMenuOpen?e.ariaLabel:null},get isMenuOpen(){return Object.values(l.menuOpenedBy).filter(Boolean).length>0},get menuOpenedBy(){let e=c();return e.type==="overlay"?e.overlayOpenedBy:e.submenuOpenedBy}},actions:{openMenuOnHover(e){if(e?.pointerType==="touch")return;let{type:n,overlayOpenedBy:t}=c();n==="submenu"&&Object.values(t||{}).filter(Boolean).length===0&&o.openMenu("hover")},closeMenuOnHover(e){if(e?.pointerType==="touch")return;let{type:n,overlayOpenedBy:t}=c();n==="submenu"&&Object.values(t||{}).filter(Boolean).length===0&&o.closeMenu("hover")},openMenuOnClick(){let e=c(),{ref:n}=s();e.previousFocus=n,o.openMenu("click")},closeMenuOnClick(){o.closeMenu("click"),o.closeMenu("focus")},openMenuOnFocus(){o.openMenu("focus")},toggleMenuOnClick(){let e=c(),{ref:n}=s();window.document.activeElement!==n&&n.focus();let{menuOpenedBy:t}=l;t.click||t.focus?(o.closeMenu("click"),o.closeMenu("focus"),o.closeMenu("hover")):(e.previousFocus=n,o.openMenu("click"))},handleMenuKeydown:i(e=>{let{type:n,firstFocusableElement:t,lastFocusableElement:u}=c();if(l.menuOpenedBy.click){if(e.key==="Escape"){e.stopPropagation(),o.closeMenu("click"),o.closeMenu("focus");return}n==="overlay"&&e.key==="Tab"&&(e.shiftKey&&window.document.activeElement===t?(e.preventDefault(),u.focus()):!e.shiftKey&&window.document.activeElement===u&&(e.preventDefault(),t.focus()))}}),handleMenuFocusout:i(e=>{let{modal:n,type:t}=c();(e.relatedTarget===null||!n?.contains(e.relatedTarget)&&e.target!==window.document.activeElement&&t==="submenu")&&(o.closeMenu("click"),o.closeMenu("focus"))}),openMenu(e="click"){let{type:n}=c();l.menuOpenedBy[e]=!0,n==="overlay"&&document.documentElement.classList.add("has-modal-open")},closeMenu(e="click"){let n=c();l.menuOpenedBy[e]=!1,l.isMenuOpen||(n.modal?.contains(window.document.activeElement)&&n.previousFocus?.focus(),n.modal=null,n.previousFocus=null,n.type==="overlay"&&document.documentElement.classList.remove("has-modal-open"))}},callbacks:{initMenu(){let e=c(),{ref:n}=s();if(l.isMenuOpen){let t=a(n);e.modal=n,e.firstFocusableElement=t[0],e.lastFocusableElement=t[t.length-1]}},focusFirstElement(){let{ref:e}=s();l.isMenuOpen&&a(e)?.[0]?.focus()}}},{lock:!0});