@richardmcquiston01/dashboard-widgets-toolkit 0.11.2 → 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,22 +2422,23 @@ function moveWidgetToPage(definitions, layout, widgetKey, targetKey, options = {
   }
   return ok(moved);
 }
-function MoveToPageMenu({
+var EditMenuInitialOpenContext = createContext(false);
+var ITEM_SELECTOR = '[role="menuitem"]:not(:disabled)';
+function WidgetEditMenu({
   label,
-  heading,
-  options,
-  onPick,
-  initialOpen = false
+  items,
+  initialOpen
 }) {
   const slot = useSlotClassName();
+  const startOpen = useContext(EditMenuInitialOpenContext);
   const menuId = useId();
-  const [open, setOpen] = useState(initialOpen);
+  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('[role="menuitem"]')?.focus();
+    menu.current?.querySelector(ITEM_SELECTOR)?.focus();
     const onPointerDown = (event) => {
       if (!wrapper.current?.contains(event.target)) setOpen(false);
     };
@@ -2450,28 +2455,29 @@ function MoveToPageMenu({
       close(true);
       return;
     }
-    const items = [
-      ...menu.current?.querySelectorAll('[role="menuitem"]') ?? []
+    const enabled = [
+      ...menu.current?.querySelectorAll(ITEM_SELECTOR) ?? []
     ];
-    const current = items.indexOf(
+    if (enabled.length === 0) return;
+    const current = enabled.indexOf(
       document.activeElement
     );
     let next;
-    if (event.key === "ArrowDown") next = (current + 1) % items.length;
+    if (event.key === "ArrowDown") next = (current + 1) % enabled.length;
     else if (event.key === "ArrowUp") {
-      next = (current - 1 + items.length) % items.length;
+      next = (current - 1 + enabled.length) % enabled.length;
     } else if (event.key === "Home") next = 0;
-    else if (event.key === "End") next = items.length - 1;
+    else if (event.key === "End") next = enabled.length - 1;
     if (next !== void 0) {
       event.preventDefault();
-      items[next]?.focus();
+      enabled[next]?.focus();
     }
   }
   return /* @__PURE__ */ jsxs(
     "span",
     {
       ref: wrapper,
-      className: "dwt-move-menu",
+      className: "dwt-edit-menu",
       onBlur: (event) => {
         if (!event.currentTarget.contains(event.relatedTarget)) {
           setOpen(false);
@@ -2493,18 +2499,18 @@ function MoveToPageMenu({
             children: /* @__PURE__ */ jsx(
               "svg",
               {
-                viewBox: "0 0 16 16",
-                width: "14",
-                height: "14",
+                viewBox: "0 0 24 24",
+                width: "16",
+                height: "16",
                 "aria-hidden": "true",
                 focusable: "false",
                 children: /* @__PURE__ */ jsx(
                   "path",
                   {
-                    d: "M2 8h8M7 5l3 3-3 3M13 3v10",
+                    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: "1.5",
+                    strokeWidth: "2",
                     strokeLinecap: "round",
                     strokeLinejoin: "round"
                   }
@@ -2513,32 +2519,41 @@ function MoveToPageMenu({
             )
           }
         ),
-        open && /* @__PURE__ */ jsxs(
+        open && /* @__PURE__ */ jsx(
           "div",
           {
             ref: menu,
             id: menuId,
-            className: "dwt-move-popover",
+            className: "dwt-edit-popover",
             role: "menu",
-            "aria-label": heading,
+            "aria-label": label,
             onKeyDown,
-            children: [
-              /* @__PURE__ */ jsx("p", { className: "dwt-move-heading", "aria-hidden": "true", children: heading }),
-              options.map((option) => /* @__PURE__ */ jsx(
+            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-move-option",
+                  className: "dwt-edit-option",
+                  ...item.ariaLabel === void 0 ? {} : { "aria-label": item.ariaLabel },
+                  disabled: item.disabled === true,
                   onClick: () => {
                     close(false);
-                    onPick(option.value);
+                    item.onSelect();
                   },
-                  children: option.label
+                  children: item.label
                 },
-                option.value
-              ))
-            ]
+                item.key
+              )
+            )
           }
         )
       ]
@@ -3667,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",
@@ -3709,81 +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__ */ jsx(
-                          MoveToPageMenu,
-                          {
-                            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
-                                }
-                              ] : []
-                            ]
-                          }
-                        )
-                      ] }),
-                      !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;