@richardmcquiston01/dashboard-widgets-toolkit 0.11.1 → 0.12.0

package/dist/react.d.cts

@@ -208,7 +208,13 @@ interface DashboardLabels {
     readonly confirmDeletePage: (title: string) => string;
     readonly movePageLeft: (title: string) => string;
     readonly movePageRight: (title: string) => string;
-    /** The select on each card that moves it to another page. */
+    /** The icon on each card, while editing, that opens its menu of moves. */
+    readonly arrangeWidget: (title: string) => string;
+    /** Short text of the menu's items (the full names are `moveEarlier` and so on). */
+    readonly menuMoveEarlier: string;
+    readonly menuMoveLater: string;
+    readonly menuHide: string;
+    /** The card menu's heading over the pages a widget can move to. */
     readonly moveToPage: (title: string) => string;
     readonly moveToPagePlaceholder: string;
     readonly moveToPageOption: (title: string, rowsFree: number) => string;

package/dist/react.d.ts

@@ -208,7 +208,13 @@ interface DashboardLabels {
     readonly confirmDeletePage: (title: string) => string;
     readonly movePageLeft: (title: string) => string;
     readonly movePageRight: (title: string) => string;
-    /** The select on each card that moves it to another page. */
+    /** The icon on each card, while editing, that opens its menu of moves. */
+    readonly arrangeWidget: (title: string) => string;
+    /** Short text of the menu's items (the full names are `moveEarlier` and so on). */
+    readonly menuMoveEarlier: string;
+    readonly menuMoveLater: string;
+    readonly menuHide: string;
+    /** The card menu's heading over the pages a widget can move to. */
     readonly moveToPage: (title: string) => string;
     readonly moveToPagePlaceholder: string;
     readonly moveToPageOption: (title: string, rowsFree: number) => string;

package/dist/react.js

@@ -823,6 +823,10 @@ var DEFAULT_LABELS = {
   confirmDeletePage: (title) => `Delete the page "${title}" and move its widgets to another page?`,
   movePageLeft: (title) => `Move ${title} page left`,
   movePageRight: (title) => `Move ${title} page right`,
+  arrangeWidget: (title) => `Arrange ${title}`,
+  menuMoveEarlier: "Move earlier",
+  menuMoveLater: "Move later",
+  menuHide: "Hide",
   moveToPage: (title) => `Move ${title} to another page`,
   moveToPagePlaceholder: "Move to page\u2026",
   moveToPageOption: (title, rowsFree) => `${title} (${rowsFree} ${rowsFree === 1 ? "row" : "rows"} free)`,
@@ -2418,6 +2422,144 @@ function moveWidgetToPage(definitions, layout, widgetKey, targetKey, options = {
   }
   return ok(moved);
 }
+var EditMenuInitialOpenContext = createContext(false);
+var ITEM_SELECTOR = '[role="menuitem"]:not(:disabled)';
+function WidgetEditMenu({
+  label,
+  items,
+  initialOpen
+}) {
+  const slot = useSlotClassName();
+  const startOpen = useContext(EditMenuInitialOpenContext);
+  const menuId = useId();
+  const [open, setOpen] = useState(initialOpen ?? startOpen);
+  const wrapper = useRef(null);
+  const button = useRef(null);
+  const menu = useRef(null);
+  useEffect(() => {
+    if (!open) return void 0;
+    menu.current?.querySelector(ITEM_SELECTOR)?.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 enabled = [
+      ...menu.current?.querySelectorAll(ITEM_SELECTOR) ?? []
+    ];
+    if (enabled.length === 0) return;
+    const current = enabled.indexOf(
+      document.activeElement
+    );
+    let next;
+    if (event.key === "ArrowDown") next = (current + 1) % enabled.length;
+    else if (event.key === "ArrowUp") {
+      next = (current - 1 + enabled.length) % enabled.length;
+    } else if (event.key === "Home") next = 0;
+    else if (event.key === "End") next = enabled.length - 1;
+    if (next !== void 0) {
+      event.preventDefault();
+      enabled[next]?.focus();
+    }
+  }
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref: wrapper,
+      className: "dwt-edit-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 24 24",
+                width: "16",
+                height: "16",
+                "aria-hidden": "true",
+                focusable: "false",
+                children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: "M5 9l-3 3 3 3M9 5l3-3 3 3M15 19l-3 3-3-3M19 9l3 3-3 3M2 12h20M12 2v20",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round"
+                  }
+                )
+              }
+            )
+          }
+        ),
+        open && /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: menu,
+            id: menuId,
+            className: "dwt-edit-popover",
+            role: "menu",
+            "aria-label": label,
+            onKeyDown,
+            children: items.map(
+              (item) => item.kind === "heading" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: "dwt-edit-heading",
+                  role: "presentation",
+                  children: item.label
+                },
+                item.key
+              ) : /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  role: "menuitem",
+                  className: "dwt-edit-option",
+                  ...item.ariaLabel === void 0 ? {} : { "aria-label": item.ariaLabel },
+                  disabled: item.disabled === true,
+                  onClick: () => {
+                    close(false);
+                    item.onSelect();
+                  },
+                  children: item.label
+                },
+                item.key
+              )
+            )
+          }
+        )
+      ]
+    }
+  );
+}
 function nextSort(current, column) {
   if (current?.column !== column) return { column, direction: "asc" };
   return current.direction === "asc" ? { column, direction: "desc" } : void 0;
@@ -3141,6 +3283,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 +3314,7 @@ function DashboardInner({
     onActivePageChange?.(pageKey);
     setPageError(void 0);
     setPageEditor(void 0);
+    setNewPage(void 0);
     setPageAnnouncement(
       labels.pageTabName(
         index + 1,
@@ -3188,6 +3332,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 +3344,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 +3532,7 @@ function DashboardInner({
                 {
                   initial: activePage.title,
                   onSubmit: renamePageAction,
-                  onCancel: () => setPageEditor(void 0)
+                  onCancel: cancelPageEditor
                 },
                 activeKey
               ),
@@ -3422,7 +3580,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"
+                          }
+                        )
+                      }
+                    )
                   }
                 )
               ] }),
@@ -3504,6 +3682,64 @@ function DashboardInner({
                     const lockLabel = overrideLocks ? labels.lockedForViewers(title) : labels.locked(title);
                     const canMoveEarlier = !lock.move && moveWidgetBy(pageDefs, view, key, -1) !== view;
                     const canMoveLater = !lock.move && moveWidgetBy(pageDefs, view, key, 1) !== view;
+                    const pageTargets = paged && !lock.move ? [
+                      {
+                        kind: "heading",
+                        key: "page-heading",
+                        label: labels.moveToPagePlaceholder
+                      },
+                      ...pages.filter((page) => page.key !== activeKey).map((page) => ({
+                        kind: "action",
+                        key: `page:${page.key}`,
+                        label: labels.moveToPageOption(
+                          page.title,
+                          pageRoom(definitions, layout, page.key, roomOptions)?.rowsFree ?? 0
+                        ),
+                        ariaLabel: labels.moveToPageOption(
+                          page.title,
+                          pageRoom(definitions, layout, page.key, roomOptions)?.rowsFree ?? 0
+                        ),
+                        onSelect: () => moveWidgetAction(key, page.key)
+                      })),
+                      ...maxPages === void 0 || pages.length < maxPages ? [
+                        {
+                          kind: "action",
+                          key: "page:new",
+                          label: labels.newPageOption,
+                          onSelect: () => moveWidgetAction(key, NEW_PAGE_VALUE)
+                        }
+                      ] : []
+                    ] : [];
+                    const editItems = [
+                      ...lock.move ? [] : [
+                        {
+                          kind: "action",
+                          key: "earlier",
+                          label: labels.menuMoveEarlier,
+                          ariaLabel: labels.moveEarlier(title),
+                          disabled: index === 0 || !canMoveEarlier,
+                          onSelect: () => changePage(moveWidgetBy(pageDefs, view, key, -1))
+                        },
+                        {
+                          kind: "action",
+                          key: "later",
+                          label: labels.menuMoveLater,
+                          ariaLabel: labels.moveLater(title),
+                          disabled: index === shown.length - 1 || !canMoveLater,
+                          onSelect: () => changePage(moveWidgetBy(pageDefs, view, key, 1))
+                        }
+                      ],
+                      ...pageTargets,
+                      ...lock.hide ? [] : [
+                        {
+                          kind: "action",
+                          key: "hide",
+                          label: labels.menuHide,
+                          ariaLabel: labels.hide(title),
+                          onSelect: () => changePage(hideWidget(view, key))
+                        }
+                      ]
+                    ];
                     const actions = controlsShown ? /* @__PURE__ */ jsxs(Fragment, { children: [
                       isLocked && /* @__PURE__ */ jsx(
                         "span",
@@ -3546,79 +3782,11 @@ function DashboardInner({
                           )
                         }
                       ),
-                      !lock.move && /* @__PURE__ */ jsxs(Fragment, { children: [
-                        /* @__PURE__ */ jsx(
-                          "button",
-                          {
-                            type: "button",
-                            className: slot(
-                              "button",
-                              "dwt-button",
-                              "dwt-icon-button"
-                            ),
-                            "aria-label": labels.moveEarlier(title),
-                            title: labels.moveEarlier(title),
-                            disabled: index === 0 || !canMoveEarlier,
-                            onClick: () => changePage(moveWidgetBy(pageDefs, view, key, -1)),
-                            children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2191" })
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(
-                          "button",
-                          {
-                            type: "button",
-                            className: slot(
-                              "button",
-                              "dwt-button",
-                              "dwt-icon-button"
-                            ),
-                            "aria-label": labels.moveLater(title),
-                            title: labels.moveLater(title),
-                            disabled: index === shown.length - 1 || !canMoveLater,
-                            onClick: () => changePage(moveWidgetBy(pageDefs, view, key, 1)),
-                            children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2193" })
-                          }
-                        ),
-                        paged && /* @__PURE__ */ jsxs(
-                          "select",
-                          {
-                            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 })
-                            ]
-                          }
-                        )
-                      ] }),
-                      !lock.hide && /* @__PURE__ */ jsx(
-                        "button",
+                      editItems.length > 0 && /* @__PURE__ */ jsx(
+                        WidgetEditMenu,
                         {
-                          type: "button",
-                          className: slot(
-                            "button",
-                            "dwt-button",
-                            "dwt-icon-button"
-                          ),
-                          "aria-label": labels.hide(title),
-                          title: labels.hide(title),
-                          onClick: () => changePage(hideWidget(view, key)),
-                          children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xD7" })
+                          label: labels.arrangeWidget(title),
+                          items: editItems
                         }
                       )
                     ] }) : void 0;