@jxsuite/studio 4.1.0 → 5.1.0

package/dist/chunks/studio-aj37eer3.js

@@ -0,0 +1,422 @@
+import {
+  ensureCaret
+} from "./studio-kkqkcp3d.js";
+import {
+  registerSurface,
+  mountSurface,
+  getLayerSlot2,
+  clearLayerSlot2
+} from "./studio-vfq8qpjt.js";
+import {
+  reactive
+} from "./studio-p1dw8wfw.js";
+import {
+  rectOf
+} from "./studio-rs76k67r.js";
+// src/surfaces/menu.json
+var menu_default = {
+  $schema: "https://jxsuite.com/schema/v1",
+  $id: "StudioMenu",
+  $description: "A Studio menu: one jx-menu whose rows are a projection of command records the adapter hands in as `rows`. Nothing here decides what a row says; a row prints its record's title, chord, disabled reason and destructive flag, a divider falls where the adapter marked a group boundary, and a row with children owns a one-level submenu of the same shape. The chord and the reason are rendered only when present, so a row's text is its title.",
+  tagName: "jx-menu",
+  $props: {
+    label: {
+      $ref: "#/state/label"
+    },
+    x: {
+      $ref: "#/state/x"
+    },
+    y: {
+      $ref: "#/state/y"
+    },
+    floor: {
+      $ref: "#/state/floor"
+    },
+    placement: {
+      $ref: "#/state/placement"
+    }
+  },
+  onselect: {
+    $ref: "#/state/select"
+  },
+  children: [
+    {
+      $prototype: "Array",
+      items: {
+        $ref: "#/state/rows"
+      },
+      key: {
+        $ref: "$map/item/id"
+      },
+      map: {
+        tagName: "div",
+        attributes: {
+          role: "none"
+        },
+        children: [
+          {
+            tagName: "div",
+            attributes: {
+              role: "none"
+            },
+            $switch: {
+              $ref: "$map/item/dividerAbove"
+            },
+            cases: {
+              true: {
+                tagName: "hr"
+              }
+            }
+          },
+          {
+            tagName: "jx-menu-item",
+            $props: {
+              value: {
+                $ref: "$map/item/id"
+              },
+              disabled: {
+                $ref: "$map/item/disabled"
+              },
+              destructive: {
+                $ref: "$map/item/destructive"
+              },
+              requires: {
+                $ref: "$map/item/requires"
+              },
+              checked: {
+                $ref: "$map/item/checked"
+              },
+              haspopup: {
+                $ref: "$map/item/haspopup"
+              }
+            },
+            attributes: {
+              "data-command-id": "${$map.item.id}"
+            },
+            children: [
+              {
+                tagName: "span",
+                textContent: "${$map.item.title}"
+              },
+              {
+                tagName: "span",
+                attributes: {
+                  slot: "value"
+                },
+                $switch: {
+                  $ref: "$map/item/noChord"
+                },
+                cases: {
+                  false: {
+                    tagName: "kbd",
+                    textContent: "${$map.item.chord}"
+                  }
+                }
+              },
+              {
+                tagName: "span",
+                attributes: {
+                  slot: "description"
+                },
+                $switch: {
+                  $ref: "$map/item/enabled"
+                },
+                cases: {
+                  false: {
+                    tagName: "span",
+                    textContent: "Needs ${$map.item.requires}"
+                  }
+                }
+              },
+              {
+                tagName: "span",
+                attributes: {
+                  slot: "submenu"
+                },
+                $switch: {
+                  $ref: "$map/item/haspopup"
+                },
+                cases: {
+                  true: {
+                    tagName: "jx-menu",
+                    $props: {
+                      label: {
+                        $ref: "$map/item/submenuLabel"
+                      }
+                    },
+                    children: [
+                      {
+                        $prototype: "Array",
+                        items: {
+                          $ref: "$map/item/children"
+                        },
+                        key: {
+                          $ref: "$map/item/id"
+                        },
+                        map: {
+                          tagName: "div",
+                          attributes: {
+                            role: "none"
+                          },
+                          children: [
+                            {
+                              tagName: "div",
+                              attributes: {
+                                role: "none"
+                              },
+                              $switch: {
+                                $ref: "$map/item/dividerAbove"
+                              },
+                              cases: {
+                                true: {
+                                  tagName: "hr"
+                                }
+                              }
+                            },
+                            {
+                              tagName: "jx-menu-item",
+                              $props: {
+                                value: {
+                                  $ref: "$map/item/id"
+                                },
+                                disabled: {
+                                  $ref: "$map/item/disabled"
+                                },
+                                destructive: {
+                                  $ref: "$map/item/destructive"
+                                },
+                                requires: {
+                                  $ref: "$map/item/requires"
+                                },
+                                checked: {
+                                  $ref: "$map/item/checked"
+                                }
+                              },
+                              attributes: {
+                                "data-command-id": "${$map.item.id}"
+                              },
+                              children: [
+                                {
+                                  tagName: "span",
+                                  textContent: "${$map.item.title}"
+                                },
+                                {
+                                  tagName: "span",
+                                  attributes: {
+                                    slot: "value"
+                                  },
+                                  $switch: {
+                                    $ref: "$map/item/noChord"
+                                  },
+                                  cases: {
+                                    false: {
+                                      tagName: "kbd",
+                                      textContent: "${$map.item.chord}"
+                                    }
+                                  }
+                                },
+                                {
+                                  tagName: "span",
+                                  attributes: {
+                                    slot: "description"
+                                  },
+                                  $switch: {
+                                    $ref: "$map/item/enabled"
+                                  },
+                                  cases: {
+                                    false: {
+                                      tagName: "span",
+                                      textContent: "Needs ${$map.item.requires}"
+                                    }
+                                  }
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      }
+                    ]
+                  }
+                }
+              }
+            ]
+          }
+        ]
+      }
+    }
+  ]
+};
+
+// src/surfaces/menu.ts
+registerSurface("menu", menu_default);
+var BELOW_OPENER = "block-end span-inline-end";
+function placementOf(options) {
+  if (options.placement !== undefined) {
+    return options.placement;
+  }
+  return options.opener && !options.origin && !options.place && !options.floor ? BELOW_OPENER : "";
+}
+function belowOpener(opener) {
+  if (!opener) {
+    return { x: 0, y: 0 };
+  }
+  const box = rectOf(opener);
+  return { x: Math.round(box.left), y: Math.round(box.bottom) };
+}
+function project(row, depth = 0) {
+  const children = depth === 0 ? (row.children ?? []).map((child) => project(child, 1)) : [];
+  return {
+    ...row,
+    checked: row.checked ?? "",
+    children,
+    chord: row.chord ?? "",
+    enabled: !row.disabled,
+    haspopup: children.length > 0,
+    noChord: !row.chord,
+    noDivider: !row.dividerAbove,
+    requires: row.requires ?? "",
+    submenuLabel: row.submenuLabel ?? row.title
+  };
+}
+function rowById(rows, id) {
+  for (const row of rows) {
+    if (row.id === id) {
+      return row;
+    }
+    const child = row.children.find((c) => c.id === id);
+    if (child) {
+      return child;
+    }
+  }
+  return;
+}
+var ZERO_BOX = {
+  bottom: 0,
+  height: 0,
+  left: 0,
+  right: 0,
+  top: 0,
+  width: 0,
+  x: 0,
+  y: 0
+};
+function openMenu2(options) {
+  const slot = getLayerSlot2("popover", options.region);
+  const controller = new AbortController;
+  let menu = null;
+  let dispose = null;
+  let closed = false;
+  const finish = () => {
+    if (closed) {
+      return;
+    }
+    closed = true;
+    controller.abort();
+    dispose?.();
+    dispose = null;
+    clearLayerSlot2("popover", options.region);
+    restoreFocus(options.opener ?? null);
+    options.onClosed?.(handle);
+  };
+  const initial = options.place ? options.place(ZERO_BOX) : options.origin ?? belowOpener(options.opener);
+  const scope = reactive({
+    floor: options.floor?.() ?? 0,
+    label: options.label,
+    placement: placementOf(options),
+    rows: options.rows.map((row) => project(row)),
+    select: (_scope, event) => {
+      const id = String(event.detail);
+      const row = rowById(scope.rows, id);
+      if (!row) {
+        return;
+      }
+      if (row.run) {
+        row.run();
+      } else {
+        options.run?.(id);
+      }
+      handle.close();
+    },
+    x: initial.x,
+    y: initial.y
+  });
+  const place = () => {
+    if (closed || !menu || !options.place) {
+      return;
+    }
+    const at = options.place(rectOf(menu));
+    scope.x = at.x;
+    scope.y = at.y;
+  };
+  const ready = (async () => {
+    const mounted = await mountSurface("menu", scope, slot, { signal: controller.signal });
+    if (controller.signal.aborted) {
+      return;
+    }
+    ({ dispose } = mounted);
+    menu = mounted.root;
+    menu.addEventListener("toggle", (event) => {
+      if (event.newState === "closed") {
+        finish();
+      }
+    });
+    if (!menu.hasAttribute("popover")) {
+      await new Promise((resolve) => {
+        menu.addEventListener("jx-ready", () => resolve(), { once: true });
+      });
+    }
+    if (controller.signal.aborted) {
+      return;
+    }
+    const source = options.opener instanceof HTMLElement && options.opener !== document.body ? options.opener : undefined;
+    menu.showPopover(source ? { source } : undefined);
+    place();
+    requestAnimationFrame(place);
+  })();
+  const handle = {
+    close: () => {
+      if (closed) {
+        return;
+      }
+      if (menu?.open) {
+        menu.hidePopover();
+      }
+      finish();
+    },
+    host: slot,
+    ready,
+    setRows: (rows) => {
+      if (closed) {
+        return;
+      }
+      const active = document.activeElement;
+      const holder = active?.closest("jx-menu");
+      const ownerId = holder && holder !== menu ? holder.parentElement?.closest("jx-menu-item")?.dataset.commandId : undefined;
+      scope.rows = rows.map((row) => project(row));
+      setTimeout(() => {
+        if (closed || !menu || menu.contains(document.activeElement)) {
+          return;
+        }
+        const owner = ownerId ? menu.querySelector(`jx-menu-item[data-command-id="${ownerId}"]`) : null;
+        const submenu = owner?.querySelector("jx-menu") ?? null;
+        if (owner && !(submenu?.open && submenu.querySelector("jx-menu-item"))) {
+          owner.focus();
+        } else {
+          ensureCaret(menu);
+        }
+      }, 0);
+    }
+  };
+  return handle;
+}
+function restoreFocus(opener) {
+  const active = document.activeElement;
+  if (opener?.isConnected && (!active || active === document.body)) {
+    opener.focus();
+  }
+}
+
+export { openMenu2 };
+
+//# debugId=AF40C481EA74291464756E2164756E21
+//# sourceMappingURL=studio-aj37eer3.js.map