@orion-studios/payload-studio 0.6.0-beta.140 → 0.6.0-beta.141

package/dist/builder-v2/client.js

@@ -1405,10 +1405,69 @@ var decorateBuilderNumericSteppers = (root = document) => {
     field.appendChild(stepper);
   });
 };
+var getStylePanelTabFields = (panel) => Array.from(
+  panel.querySelectorAll(
+    [
+      'input:not([type="hidden"]):not([type="radio"]):not([disabled])',
+      "select:not([disabled])",
+      "textarea:not([disabled])"
+    ].join(",")
+  )
+).filter((element) => element.tabIndex >= 0 && element.offsetParent !== null).sort((first, second) => {
+  const firstRect = first.getBoundingClientRect();
+  const secondRect = second.getBoundingClientRect();
+  const rowDelta = firstRect.top - secondRect.top;
+  if (Math.abs(rowDelta) > 4) {
+    return rowDelta;
+  }
+  return firstRect.left - secondRect.left;
+});
+var decorateStylePanelTabOrder = () => {
+  const panel = document.getElementById("orion-builder-v2-styles");
+  if (!panel) {
+    return;
+  }
+  panel.querySelectorAll('input[type="radio"]').forEach((input) => {
+    input.tabIndex = -1;
+  });
+  if (panel.dataset.orionTabOrderBound === "true") {
+    return;
+  }
+  panel.dataset.orionTabOrderBound = "true";
+  panel.addEventListener(
+    "keydown",
+    (event) => {
+      if (event.key !== "Tab" || event.defaultPrevented) {
+        return;
+      }
+      const activeElement = document.activeElement;
+      if (!activeElement || !panel.contains(activeElement)) {
+        return;
+      }
+      const fields = getStylePanelTabFields(panel);
+      const currentIndex = fields.indexOf(activeElement);
+      if (currentIndex < 0) {
+        return;
+      }
+      const nextIndex = event.shiftKey ? currentIndex - 1 : currentIndex + 1;
+      const nextField = fields[nextIndex];
+      if (!nextField) {
+        return;
+      }
+      event.preventDefault();
+      nextField.focus();
+      if (nextField instanceof HTMLInputElement || nextField instanceof HTMLTextAreaElement) {
+        nextField.select?.();
+      }
+    },
+    true
+  );
+};
 var decorateBuilderControls = (root = document) => {
   decorateBuilderSettingHelp(root);
   decorateBuilderColorEyeDroppers(root);
   decorateBuilderNumericSteppers(root);
+  decorateStylePanelTabOrder();
 };
 var closeBuilderHelpPopovers = (except) => {
   document.querySelectorAll(".is-builder-help-open").forEach((element) => {

package/dist/builder-v2/client.mjs

@@ -1281,10 +1281,69 @@ var decorateBuilderNumericSteppers = (root = document) => {
     field.appendChild(stepper);
   });
 };
+var getStylePanelTabFields = (panel) => Array.from(
+  panel.querySelectorAll(
+    [
+      'input:not([type="hidden"]):not([type="radio"]):not([disabled])',
+      "select:not([disabled])",
+      "textarea:not([disabled])"
+    ].join(",")
+  )
+).filter((element) => element.tabIndex >= 0 && element.offsetParent !== null).sort((first, second) => {
+  const firstRect = first.getBoundingClientRect();
+  const secondRect = second.getBoundingClientRect();
+  const rowDelta = firstRect.top - secondRect.top;
+  if (Math.abs(rowDelta) > 4) {
+    return rowDelta;
+  }
+  return firstRect.left - secondRect.left;
+});
+var decorateStylePanelTabOrder = () => {
+  const panel = document.getElementById("orion-builder-v2-styles");
+  if (!panel) {
+    return;
+  }
+  panel.querySelectorAll('input[type="radio"]').forEach((input) => {
+    input.tabIndex = -1;
+  });
+  if (panel.dataset.orionTabOrderBound === "true") {
+    return;
+  }
+  panel.dataset.orionTabOrderBound = "true";
+  panel.addEventListener(
+    "keydown",
+    (event) => {
+      if (event.key !== "Tab" || event.defaultPrevented) {
+        return;
+      }
+      const activeElement = document.activeElement;
+      if (!activeElement || !panel.contains(activeElement)) {
+        return;
+      }
+      const fields = getStylePanelTabFields(panel);
+      const currentIndex = fields.indexOf(activeElement);
+      if (currentIndex < 0) {
+        return;
+      }
+      const nextIndex = event.shiftKey ? currentIndex - 1 : currentIndex + 1;
+      const nextField = fields[nextIndex];
+      if (!nextField) {
+        return;
+      }
+      event.preventDefault();
+      nextField.focus();
+      if (nextField instanceof HTMLInputElement || nextField instanceof HTMLTextAreaElement) {
+        nextField.select?.();
+      }
+    },
+    true
+  );
+};
 var decorateBuilderControls = (root = document) => {
   decorateBuilderSettingHelp(root);
   decorateBuilderColorEyeDroppers(root);
   decorateBuilderNumericSteppers(root);
+  decorateStylePanelTabOrder();
 };
 var closeBuilderHelpPopovers = (except) => {
   document.querySelectorAll(".is-builder-help-open").forEach((element) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orion-studios/payload-studio",
-  "version": "0.6.0-beta.140",
+  "version": "0.6.0-beta.141",
   "description": "Base CMS, builder, and custom admin toolkit for Orion Studios websites",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",