@richardmcquiston01/dashboard-widgets-toolkit 0.11.1 → 0.11.2

package/dist/react.js

@@ -2418,6 +2418,133 @@ function moveWidgetToPage(definitions, layout, widgetKey, targetKey, options = {
   }
   return ok(moved);
 }
+function MoveToPageMenu({
+  label,
+  heading,
+  options,
+  onPick,
+  initialOpen = false
+}) {
+  const slot = useSlotClassName();
+  const menuId = useId();
+  const [open, setOpen] = useState(initialOpen);
+  const wrapper = useRef(null);
+  const button = useRef(null);
+  const menu = useRef(null);
+  useEffect(() => {
+    if (!open) return void 0;
+    menu.current?.querySelector('[role="menuitem"]')?.focus();
+    const onPointerDown = (event) => {
+      if (!wrapper.current?.contains(event.target)) setOpen(false);
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => document.removeEventListener("pointerdown", onPointerDown);
+  }, [open]);
+  function close(returnFocus) {
+    setOpen(false);
+    if (returnFocus) button.current?.focus();
+  }
+  function onKeyDown(event) {
+    if (event.key === "Escape") {
+      event.stopPropagation();
+      close(true);
+      return;
+    }
+    const items = [
+      ...menu.current?.querySelectorAll('[role="menuitem"]') ?? []
+    ];
+    const current = items.indexOf(
+      document.activeElement
+    );
+    let next;
+    if (event.key === "ArrowDown") next = (current + 1) % items.length;
+    else if (event.key === "ArrowUp") {
+      next = (current - 1 + items.length) % items.length;
+    } else if (event.key === "Home") next = 0;
+    else if (event.key === "End") next = items.length - 1;
+    if (next !== void 0) {
+      event.preventDefault();
+      items[next]?.focus();
+    }
+  }
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref: wrapper,
+      className: "dwt-move-menu",
+      onBlur: (event) => {
+        if (!event.currentTarget.contains(event.relatedTarget)) {
+          setOpen(false);
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            ref: button,
+            type: "button",
+            className: slot("button", "dwt-button", "dwt-icon-button"),
+            "aria-label": label,
+            title: label,
+            "aria-haspopup": "menu",
+            "aria-expanded": open,
+            "aria-controls": open ? menuId : void 0,
+            onClick: () => setOpen((current) => !current),
+            children: /* @__PURE__ */ jsx(
+              "svg",
+              {
+                viewBox: "0 0 16 16",
+                width: "14",
+                height: "14",
+                "aria-hidden": "true",
+                focusable: "false",
+                children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: "M2 8h8M7 5l3 3-3 3M13 3v10",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "1.5",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round"
+                  }
+                )
+              }
+            )
+          }
+        ),
+        open && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: menu,
+            id: menuId,
+            className: "dwt-move-popover",
+            role: "menu",
+            "aria-label": heading,
+            onKeyDown,
+            children: [
+              /* @__PURE__ */ jsx("p", { className: "dwt-move-heading", "aria-hidden": "true", children: heading }),
+              options.map((option) => /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  role: "menuitem",
+                  className: "dwt-move-option",
+                  onClick: () => {
+                    close(false);
+                    onPick(option.value);
+                  },
+                  children: option.label
+                },
+                option.value
+              ))
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
 function nextSort(current, column) {
   if (current?.column !== column) return { column, direction: "asc" };
   return current.direction === "asc" ? { column, direction: "desc" } : void 0;
@@ -3141,6 +3268,7 @@ function DashboardInner({
   const [announcement, setAnnouncement] = useState("");
   const [pageAnnouncement, setPageAnnouncement] = useState("");
   const [pageError, setPageError] = useState(void 0);
+  const [newPage, setNewPage] = useState(void 0);
   const [pageEditor, setPageEditor] = useState(void 0);
   const editorMode = pageEditor?.key === activeKey ? pageEditor.mode : void 0;
   const instanceId = useId();
@@ -3171,6 +3299,7 @@ function DashboardInner({
     onActivePageChange?.(pageKey);
     setPageError(void 0);
     setPageEditor(void 0);
+    setNewPage(void 0);
     setPageAnnouncement(
       labels.pageTabName(
         index + 1,
@@ -3188,6 +3317,7 @@ function DashboardInner({
     change(added.value);
     const created = added.value.pages?.at(-1);
     if (created !== void 0) {
+      setNewPage({ key: created.key, activeBefore: activeKey });
       if (activePageProp === void 0) setActiveState(created.key);
       onActivePageChange?.(created.key);
       setPageError(void 0);
@@ -3199,8 +3329,21 @@ function DashboardInner({
     if (!renamed.ok) return renamed.error;
     change(renamed.value);
     setPageEditor(void 0);
+    setNewPage(void 0);
     return void 0;
   }
+  function cancelPageEditor() {
+    const fresh = newPage;
+    setPageEditor(void 0);
+    setNewPage(void 0);
+    if (fresh === void 0 || fresh.key !== activeKey) return;
+    const pagesWithout = pages.filter(
+      (page) => page.key !== fresh.key
+    );
+    if (pagesWithout.length === pages.length) return;
+    change({ ...layout, pages: pagesWithout });
+    selectPage(fresh.activeBefore);
+  }
   function deletePageAction() {
     const index = pages.findIndex((page) => page.key === activeKey);
     const removed = removePage(definitions, layout, activeKey, roomOptions);
@@ -3374,7 +3517,7 @@ function DashboardInner({
                 {
                   initial: activePage.title,
                   onSubmit: renamePageAction,
-                  onCancel: () => setPageEditor(void 0)
+                  onCancel: cancelPageEditor
                 },
                 activeKey
               ),
@@ -3422,7 +3565,27 @@ function DashboardInner({
                     "aria-label": labels.deletePage(activePage.title),
                     title: labels.deletePage(activePage.title),
                     onClick: () => setPageEditor({ mode: "delete", key: activeKey }),
-                    children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xD7" })
+                    children: /* @__PURE__ */ jsx(
+                      "svg",
+                      {
+                        viewBox: "0 0 16 16",
+                        width: "14",
+                        height: "14",
+                        "aria-hidden": "true",
+                        focusable: "false",
+                        children: /* @__PURE__ */ jsx(
+                          "path",
+                          {
+                            d: "M3 4.5h10M6.5 4.5V3h3v1.5M4.5 4.5l.6 8.5h5.8l.6-8.5M6.8 7v3.5M9.2 7v3.5",
+                            fill: "none",
+                            stroke: "currentColor",
+                            strokeWidth: "1.3",
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round"
+                          }
+                        )
+                      }
+                    )
                   }
                 )
               ] }),
@@ -3579,29 +3742,31 @@ function DashboardInner({
                             children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2193" })
                           }
                         ),
-                        paged && /* @__PURE__ */ jsxs(
-                          "select",
+                        paged && /* @__PURE__ */ jsx(
+                          MoveToPageMenu,
                           {
-                            className: "dwt-move-select",
-                            "aria-label": labels.moveToPage(title),
-                            value: "",
-                            onChange: (event) => {
-                              if (event.target.value !== "") {
-                                moveWidgetAction(key, event.target.value);
-                              }
-                            },
-                            children: [
-                              /* @__PURE__ */ jsx("option", { value: "", children: labels.moveToPagePlaceholder }),
-                              pages.filter((page) => page.key !== activeKey).map((page) => /* @__PURE__ */ jsx("option", { value: page.key, children: labels.moveToPageOption(
-                                page.title,
-                                pageRoom(
-                                  definitions,
-                                  layout,
-                                  page.key,
-                                  roomOptions
-                                )?.rowsFree ?? 0
-                              ) }, page.key)),
-                              (maxPages === void 0 || pages.length < maxPages) && /* @__PURE__ */ jsx("option", { value: NEW_PAGE_VALUE, children: labels.newPageOption })
+                            label: labels.moveToPage(title),
+                            heading: labels.moveToPagePlaceholder,
+                            onPick: (pageKey) => moveWidgetAction(key, pageKey),
+                            options: [
+                              ...pages.filter((page) => page.key !== activeKey).map((page) => ({
+                                value: page.key,
+                                label: labels.moveToPageOption(
+                                  page.title,
+                                  pageRoom(
+                                    definitions,
+                                    layout,
+                                    page.key,
+                                    roomOptions
+                                  )?.rowsFree ?? 0
+                                )
+                              })),
+                              ...maxPages === void 0 || pages.length < maxPages ? [
+                                {
+                                  value: NEW_PAGE_VALUE,
+                                  label: labels.newPageOption
+                                }
+                              ] : []
                             ]
                           }
                         )