first commit

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

@@ -0,0 +1,246 @@
+// packages/block-library/build-module/tabs/view.mjs
+import {
+  store,
+  getContext,
+  getElement,
+  withSyncEvent
+} from "@wordpress/interactivity";
+function createReadOnlyProxy(obj) {
+  const arrayMutationMethods = /* @__PURE__ */ new Set([
+    "push",
+    "pop",
+    "shift",
+    "unshift",
+    "splice",
+    "sort",
+    "reverse",
+    "copyWithin",
+    "fill"
+  ]);
+  return new Proxy(obj, {
+    get(target, prop) {
+      if (Array.isArray(target) && arrayMutationMethods.has(prop)) {
+        return () => {
+        };
+      }
+      const value = target[prop];
+      if (typeof value === "object" && value !== null) {
+        return createReadOnlyProxy(value);
+      }
+      return value;
+    },
+    set() {
+      return false;
+    },
+    deleteProperty() {
+      return false;
+    }
+  });
+}
+var { actions: privateActions, state: privateState } = store(
+  "core/tabs/private",
+  {
+    state: {
+      /**
+       * Gets a contextually aware list of tabs for the current tabs block.
+       *
+       * @type {Array}
+       */
+      get tabsList() {
+        const context = getContext();
+        const tabsId = context?.tabsId;
+        const tabsList = privateState[tabsId];
+        return tabsList;
+      },
+      /**
+       * Gets the index of the active tab element whether it
+       * is a tab label or tab panel.
+       *
+       * @type {number|null}
+       */
+      get tabIndex() {
+        const { attributes } = getElement();
+        const tabId = attributes?.id?.replace("tab__", "") || null;
+        if (!tabId) {
+          return null;
+        }
+        const { tabsList } = privateState;
+        const tabIndex = tabsList.findIndex((t) => t.id === tabId);
+        return tabIndex;
+      },
+      /**
+       * Whether the tab panel or tab label is the active tab.
+       *
+       * @type {boolean}
+       */
+      get isActiveTab() {
+        const { activeTabIndex } = getContext();
+        const { tabIndex } = privateState;
+        return activeTabIndex === tabIndex;
+      },
+      /**
+       * The value of the tabindex attribute for tab buttons.
+       * Only the active tab should be in the tab sequence.
+       *
+       * @type {number}
+       */
+      get tabIndexAttribute() {
+        return privateState.isActiveTab ? 0 : -1;
+      }
+    },
+    actions: {
+      /**
+       * Handles the keydown events for the tab label and tabs controller.
+       *
+       * @param {KeyboardEvent} event The keydown event.
+       */
+      handleTabKeyDown: withSyncEvent((event) => {
+        const context = getContext();
+        const { isVertical } = context;
+        const { tabIndex } = privateState;
+        if (tabIndex === null) {
+          return;
+        }
+        if (event.key === "ArrowRight" && !isVertical) {
+          event.preventDefault();
+          privateActions.moveFocus(tabIndex + 1);
+        } else if (event.key === "ArrowLeft" && !isVertical) {
+          event.preventDefault();
+          privateActions.moveFocus(tabIndex - 1);
+        } else if (event.key === "ArrowDown" && isVertical) {
+          event.preventDefault();
+          privateActions.moveFocus(tabIndex + 1);
+        } else if (event.key === "ArrowUp" && isVertical) {
+          event.preventDefault();
+          privateActions.moveFocus(tabIndex - 1);
+        }
+      }),
+      /**
+       * Handles the click event for the tab label.
+       *
+       * @param {MouseEvent} event The click event.
+       */
+      handleTabClick: withSyncEvent((event) => {
+        event.preventDefault();
+        const { tabIndex } = privateState;
+        if (tabIndex !== null) {
+          privateActions.setActiveTab(tabIndex);
+        }
+      }),
+      /**
+       * Moves focus to a specific tab without activating it.
+       *
+       * @param {number} tabIndex The index to move focus to.
+       */
+      moveFocus: (tabIndex) => {
+        const { tabsList } = privateState;
+        if (!tabsList || tabsList.length === 0) {
+          return;
+        }
+        let newIndex = tabIndex;
+        if (newIndex < 0) {
+          newIndex = tabsList.length - 1;
+        } else if (newIndex >= tabsList.length) {
+          newIndex = 0;
+        }
+        const tabId = tabsList[newIndex].id;
+        const tabElement = document.getElementById("tab__" + tabId);
+        if (tabElement) {
+          tabElement.focus();
+        }
+      },
+      /**
+       * Sets the active tab index (internal implementation).
+       *
+       * @param {number}  tabIndex    The index of the active tab.
+       * @param {boolean} scrollToTab Whether to scroll to the tab element.
+       */
+      setActiveTab: (tabIndex, scrollToTab = false) => {
+        const { tabsList } = privateState;
+        if (!tabsList || tabsList.length === 0) {
+          return;
+        }
+        let newIndex = tabIndex;
+        if (newIndex < 0) {
+          newIndex = 0;
+        } else if (newIndex >= tabsList.length) {
+          newIndex = tabsList.length - 1;
+        }
+        const context = getContext();
+        context.activeTabIndex = newIndex;
+        if (scrollToTab) {
+          const tabId = tabsList[newIndex].id;
+          const tabElement = document.getElementById(tabId);
+          if (tabElement) {
+            setTimeout(() => {
+              tabElement.scrollIntoView({ behavior: "smooth" });
+            }, 100);
+          }
+        }
+      }
+    },
+    callbacks: {
+      /**
+       * When the tabs are initialized, we need to check if there is a hash in the url and if so if it exists in the current tabsList, set the active tab to that index.
+       *
+       */
+      onTabsInit: () => {
+        const { tabsList } = privateState;
+        if (tabsList.length === 0) {
+          return;
+        }
+        const { hash } = window.location;
+        const tabId = hash.replace("#", "");
+        const tabIndex = tabsList.findIndex((t) => t.id === tabId);
+        if (tabIndex >= 0) {
+          privateActions.setActiveTab(tabIndex, true);
+        }
+      }
+    }
+  },
+  {
+    lock: true
+  }
+);
+store("core/tabs", {
+  state: {
+    /**
+     * Gets a contextually aware list of tabs for the current tabs block.
+     * Public API for third-party access.
+     *
+     * @type {Array}
+     */
+    get tabsList() {
+      return createReadOnlyProxy(privateState.tabsList);
+    },
+    /**
+     * Gets the index of the active tab element whether it
+     * is a tab label or tab panel.
+     *
+     * @type {number|null}
+     */
+    get tabIndex() {
+      return privateState.tabIndex;
+    },
+    /**
+     * Whether the tab panel or tab label is the active tab.
+     *
+     * @type {boolean}
+     */
+    get isActiveTab() {
+      return privateState.isActiveTab;
+    }
+  },
+  actions: {
+    /**
+     * Sets the active tab index.
+     * Public API for third-party programmatic tab activation.
+     *
+     * @param {number}  tabIndex    The index of the active tab.
+     * @param {boolean} scrollToTab Whether to scroll to the tab element.
+     */
+    setActiveTab: (tabIndex, scrollToTab = false) => {
+      privateActions.setActiveTab(tabIndex, scrollToTab);
+    }
+  }
+});

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

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

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

@@ -0,0 +1 @@
+import{store as b,getContext as r,getElement as f,withSyncEvent as l}from"@wordpress/interactivity";function u(t){let e=new Set(["push","pop","shift","unshift","splice","sort","reverse","copyWithin","fill"]);return new Proxy(t,{get(n,s){if(Array.isArray(n)&&e.has(s))return()=>{};let a=n[s];return typeof a=="object"&&a!==null?u(a):a},set(){return!1},deleteProperty(){return!1}})}var{actions:o,state:i}=b("core/tabs/private",{state:{get tabsList(){let e=r()?.tabsId;return i[e]},get tabIndex(){let{attributes:t}=f(),e=t?.id?.replace("tab__","")||null;if(!e)return null;let{tabsList:n}=i;return n.findIndex(a=>a.id===e)},get isActiveTab(){let{activeTabIndex:t}=r(),{tabIndex:e}=i;return t===e},get tabIndexAttribute(){return i.isActiveTab?0:-1}},actions:{handleTabKeyDown:l(t=>{let e=r(),{isVertical:n}=e,{tabIndex:s}=i;s!==null&&(t.key==="ArrowRight"&&!n?(t.preventDefault(),o.moveFocus(s+1)):t.key==="ArrowLeft"&&!n?(t.preventDefault(),o.moveFocus(s-1)):t.key==="ArrowDown"&&n?(t.preventDefault(),o.moveFocus(s+1)):t.key==="ArrowUp"&&n&&(t.preventDefault(),o.moveFocus(s-1)))}),handleTabClick:l(t=>{t.preventDefault();let{tabIndex:e}=i;e!==null&&o.setActiveTab(e)}),moveFocus:t=>{let{tabsList:e}=i;if(!e||e.length===0)return;let n=t;n<0?n=e.length-1:n>=e.length&&(n=0);let s=e[n].id,a=document.getElementById("tab__"+s);a&&a.focus()},setActiveTab:(t,e=!1)=>{let{tabsList:n}=i;if(!n||n.length===0)return;let s=t;s<0?s=0:s>=n.length&&(s=n.length-1);let a=r();if(a.activeTabIndex=s,e){let d=n[s].id,c=document.getElementById(d);c&&setTimeout(()=>{c.scrollIntoView({behavior:"smooth"})},100)}}},callbacks:{onTabsInit:()=>{let{tabsList:t}=i;if(t.length===0)return;let{hash:e}=window.location,n=e.replace("#",""),s=t.findIndex(a=>a.id===n);s>=0&&o.setActiveTab(s,!0)}}},{lock:!0});b("core/tabs",{state:{get tabsList(){return u(i.tabsList)},get tabIndex(){return i.tabIndex},get isActiveTab(){return i.isActiveTab}},actions:{setActiveTab:(t,e=!1)=>{o.setActiveTab(t,e)}}});