@richardmcquiston01/dashboard-widgets-toolkit 0.8.0 → 0.9.0

package/dist/react.js

@@ -522,6 +522,19 @@ var DEFAULT_LABELS = {
   moveLater: (title) => `Move ${title} later`,
   hiddenWidgets: "Hidden:",
   minimizedWidgets: "Minimized:",
+  customize: "Customize",
+  done: "Done",
+  reset: "Reset layout",
+  revertChanges: "Revert changes",
+  confirmReset: "Reset the layout to the default?",
+  confirmRevert: "Revert to how this looked before you started editing?",
+  confirmYes: "Yes",
+  confirmNo: "No",
+  editingOn: "Editing dashboard. Use the buttons on each card to reorder or hide it.",
+  editingOff: "Finished editing.",
+  dashboardControls: "Dashboard controls",
+  locked: (title) => `${title} is locked`,
+  lockedForViewers: (title) => `${title} is locked for viewers`,
   opensInNewTab: "(opens in a new tab)",
   view: (title) => `View ${title}`,
   close: "Close",
@@ -1392,6 +1405,7 @@ function WidgetCard({
   columnSpan,
   width,
   widgetKey,
+  editing = false,
   headingLevel = 2,
   className,
   children
@@ -1436,6 +1450,7 @@ function WidgetCard({
         "dwt-card",
         `dwt-card--${status}`,
         minimized && "dwt-card--minimized",
+        editing && "dwt-card--editing",
         size !== void 0 && `dwt-card--size-${size}`,
         fillsHeight(fill) && "dwt-card--fill-height",
         fillsWidth(fill) && "dwt-card--fill-width",
@@ -2137,6 +2152,57 @@ function DetailHost({
     }
   ) });
 }
+function InlineConfirm({
+  message,
+  onAnswer
+}) {
+  const slot = useSlotClassName();
+  const { labels } = useWidgetSettings();
+  const noRef = useRef(null);
+  useEffect(() => {
+    noRef.current?.focus();
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      role: "group",
+      "aria-label": message,
+      className: "dwt-confirm",
+      onKeyDown: (event) => {
+        if (event.key === "Escape") {
+          event.stopPropagation();
+          onAnswer(false);
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx("span", { role: "alert", className: "dwt-confirm-message", children: message }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: slot("button", "dwt-button", "dwt-icon-button"),
+            "aria-label": labels.confirmYes,
+            title: labels.confirmYes,
+            onClick: () => onAnswer(true),
+            children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2713" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            ref: noRef,
+            type: "button",
+            className: slot("button", "dwt-button", "dwt-icon-button"),
+            "aria-label": labels.confirmNo,
+            title: labels.confirmNo,
+            onClick: () => onAnswer(false),
+            children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2715" })
+          }
+        )
+      ]
+    }
+  );
+}
 function withoutLock(definition) {
   if (definition.locked === void 0) return definition;
   const copy = { ...definition };
@@ -2148,6 +2214,12 @@ function DashboardInner({
   layout: savedLayout = EMPTY_LAYOUT,
   onLayoutChange,
   overrideLocks = false,
+  editMode = "always",
+  editing: editingProp,
+  defaultEditing = false,
+  onEditingChange,
+  defaultLayout,
+  toolbar = true,
   onRetry,
   loadDetail,
   onOpenDetail,
@@ -2166,6 +2238,25 @@ function DashboardInner({
   const visible = visibleWidgets(definitions, layout);
   const hidden = hiddenWidgets(definitions, layout);
   const editable = onLayoutChange !== void 0;
+  const toggleMode = editMode === "toggle";
+  const [editingState, setEditingState] = useState(defaultEditing);
+  const editing = editingProp ?? editingState;
+  const controlsShown = editable && (!toggleMode || editing);
+  const [snapshot, setSnapshot] = useState(
+    void 0
+  );
+  if (toggleMode && editable && editing) {
+    if (snapshot === void 0) setSnapshot(savedLayout);
+  } else if (snapshot !== void 0) {
+    setSnapshot(void 0);
+  }
+  const [confirming, setConfirming] = useState(
+    void 0
+  );
+  const pending = editing ? confirming : void 0;
+  const [announcement, setAnnouncement] = useState("");
+  const toggleRef = useRef(null);
+  const resetRef = useRef(null);
   const minimized = editable ? visible.filter((definition) => isMinimized(layout, definition.key)) : [];
   const shown = editable ? visible.filter((definition) => !isMinimized(layout, definition.key)) : visible;
   const [detailKey, setDetailKey] = useState(void 0);
@@ -2179,142 +2270,267 @@ function DashboardInner({
   function change(next) {
     if (next !== layout) onLayoutChange?.(next);
   }
-  return /* @__PURE__ */ jsxs("div", { className: slot("dashboard", "dwt-dashboard", className), children: [
-    editable && hidden.length > 0 && /* @__PURE__ */ jsxs("div", { className: slot("hiddenBar", "dwt-hidden-bar"), children: [
-      /* @__PURE__ */ jsx("span", { className: "dwt-hidden-label", children: labels.hiddenWidgets }),
-      hidden.map((definition) => /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          className: slot("button", "dwt-button", "dwt-show-button"),
-          "aria-label": labels.show(definition.title),
-          onClick: () => change(showWidget(layout, definition.key)),
-          children: [
-            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "+ " }),
-            definition.title
-          ]
-        },
-        definition.key
-      ))
-    ] }),
-    minimized.length > 0 && /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: slot("hiddenBar", "dwt-hidden-bar", "dwt-minimized-bar"),
-        children: [
-          /* @__PURE__ */ jsx("span", { className: "dwt-hidden-label", children: labels.minimizedWidgets }),
-          minimized.map((definition) => /* @__PURE__ */ jsxs(
+  function setEditing(next) {
+    if (editingProp === void 0) setEditingState(next);
+    onEditingChange?.(next);
+    setAnnouncement(next ? labels.editingOn : labels.editingOff);
+    setConfirming(void 0);
+  }
+  function answerConfirmation(yes) {
+    const which = pending;
+    setConfirming(void 0);
+    if (yes && which === "reset") {
+      change(enforceLocks(definitions, defaultLayout ?? EMPTY_LAYOUT));
+    } else if (yes && which === "revert" && snapshot !== void 0) {
+      change(snapshot);
+    }
+    (which === "revert" ? toggleRef : resetRef).current?.focus();
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: slot(
+        "dashboard",
+        "dwt-dashboard",
+        toggleMode && controlsShown && "dwt-dashboard--editing",
+        className
+      ),
+      children: [
+        editable && toggleMode && toolbar && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "group",
+            "aria-label": labels.dashboardControls,
+            className: slot("toolbar", "dwt-toolbar"),
+            children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  ref: toggleRef,
+                  type: "button",
+                  "aria-pressed": editing,
+                  className: slot("button", "dwt-button", "dwt-toolbar-toggle"),
+                  onClick: () => setEditing(!editing),
+                  children: editing ? labels.done : labels.customize
+                }
+              ),
+              editing && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    ref: resetRef,
+                    type: "button",
+                    className: slot("button", "dwt-button"),
+                    onClick: () => setConfirming("reset"),
+                    children: labels.reset
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: slot("button", "dwt-button"),
+                    disabled: snapshot === void 0 || savedLayout === snapshot,
+                    onClick: () => setConfirming("revert"),
+                    children: labels.revertChanges
+                  }
+                )
+              ] }),
+              pending !== void 0 && /* @__PURE__ */ jsx(
+                InlineConfirm,
+                {
+                  message: pending === "reset" ? labels.confirmReset : labels.confirmRevert,
+                  onAnswer: answerConfirmation
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "dwt-visually-hidden", "aria-live": "polite", children: announcement })
+            ]
+          }
+        ),
+        controlsShown && hidden.length > 0 && /* @__PURE__ */ jsxs("div", { className: slot("hiddenBar", "dwt-hidden-bar"), children: [
+          /* @__PURE__ */ jsx("span", { className: "dwt-hidden-label", children: labels.hiddenWidgets }),
+          hidden.map((definition) => /* @__PURE__ */ jsxs(
             "button",
             {
               type: "button",
               className: slot("button", "dwt-button", "dwt-show-button"),
-              "aria-label": labels.expand(definition.title),
-              onClick: () => change(toggleMinimized(layout, definition.key)),
+              "aria-label": labels.show(definition.title),
+              onClick: () => change(showWidget(layout, definition.key)),
               children: [
-                /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u25B8 " }),
+                /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "+ " }),
                 definition.title
               ]
             },
             definition.key
           ))
-        ]
-      }
-    ),
-    visible.length === 0 ? /* @__PURE__ */ jsx("p", { className: slot("empty", "dwt-empty", "dwt-dashboard-empty"), children: definitions.length === 0 ? labels.noWidgets : labels.allHidden }) : shown.length === 0 ? null : /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: gridRef,
-        className: slot("grid", "dwt-grid", twelve && "dwt-grid--twelve"),
-        children: shown.map((definition, index) => {
-          const widget = byKey.get(
-            definition.key
-          );
-          if (widget === void 0) return null;
-          const key = definition.key;
-          const title = definition.title;
-          const lock = resolveWidgetLock(definition);
-          const canMoveEarlier = !lock.move && moveWidgetBy(definitions, layout, key, -1) !== layout;
-          const canMoveLater = !lock.move && moveWidgetBy(definitions, layout, key, 1) !== layout;
-          const actions = editable ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            !lock.move && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(
+        ] }),
+        minimized.length > 0 && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: slot("hiddenBar", "dwt-hidden-bar", "dwt-minimized-bar"),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "dwt-hidden-label", children: labels.minimizedWidgets }),
+              minimized.map((definition) => /* @__PURE__ */ jsxs(
                 "button",
                 {
                   type: "button",
-                  className: slot(
+                  className: slot("button", "dwt-button", "dwt-show-button"),
+                  "aria-label": labels.expand(definition.title),
+                  onClick: () => change(toggleMinimized(layout, definition.key)),
+                  children: [
+                    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u25B8 " }),
+                    definition.title
+                  ]
+                },
+                definition.key
+              ))
+            ]
+          }
+        ),
+        visible.length === 0 ? /* @__PURE__ */ jsx("p", { className: slot("empty", "dwt-empty", "dwt-dashboard-empty"), children: definitions.length === 0 ? labels.noWidgets : labels.allHidden }) : shown.length === 0 ? null : /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: gridRef,
+            className: slot("grid", "dwt-grid", twelve && "dwt-grid--twelve"),
+            children: shown.map((definition, index) => {
+              const widget = byKey.get(
+                definition.key
+              );
+              if (widget === void 0) return null;
+              const key = definition.key;
+              const title = definition.title;
+              const lock = resolveWidgetLock(definition);
+              const ownLock = resolveWidgetLock(
+                widget.definition
+              );
+              const isLocked = ownLock.move || ownLock.hide || ownLock.minimize;
+              const lockLabel = overrideLocks ? labels.lockedForViewers(title) : labels.locked(title);
+              const canMoveEarlier = !lock.move && moveWidgetBy(definitions, layout, key, -1) !== layout;
+              const canMoveLater = !lock.move && moveWidgetBy(definitions, layout, key, 1) !== layout;
+              const actions = controlsShown ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                isLocked && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    role: "img",
+                    className: "dwt-lock",
+                    "aria-label": lockLabel,
+                    title: lockLabel,
+                    children: /* @__PURE__ */ jsxs(
+                      "svg",
+                      {
+                        viewBox: "0 0 16 16",
+                        width: "14",
+                        height: "14",
+                        "aria-hidden": "true",
+                        focusable: "false",
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            "rect",
+                            {
+                              x: "3",
+                              y: "7",
+                              width: "10",
+                              height: "7",
+                              rx: "1.5",
+                              fill: "currentColor"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            "path",
+                            {
+                              d: "M5.5 7V5a2.5 2.5 0 0 1 5 0v2",
+                              fill: "none",
+                              stroke: "currentColor",
+                              strokeWidth: "1.4"
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  }
+                ),
+                !lock.move && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
                     "button",
-                    "dwt-button",
-                    "dwt-icon-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: () => change(moveWidgetBy(definitions, layout, key, -1)),
+                      children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2191" })
+                    }
                   ),
-                  "aria-label": labels.moveEarlier(title),
-                  title: labels.moveEarlier(title),
-                  disabled: index === 0 || !canMoveEarlier,
-                  onClick: () => change(moveWidgetBy(definitions, layout, key, -1)),
-                  children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2191" })
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  className: slot(
+                  /* @__PURE__ */ jsx(
                     "button",
-                    "dwt-button",
-                    "dwt-icon-button"
-                  ),
-                  "aria-label": labels.moveLater(title),
-                  title: labels.moveLater(title),
-                  disabled: index === shown.length - 1 || !canMoveLater,
-                  onClick: () => change(moveWidgetBy(definitions, layout, key, 1)),
-                  children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2193" })
-                }
-              )
-            ] }),
-            !lock.hide && /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                className: slot("button", "dwt-button", "dwt-icon-button"),
-                "aria-label": labels.hide(title),
-                title: labels.hide(title),
-                onClick: () => change(hideWidget(layout, key)),
-                children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xD7" })
-              }
-            )
-          ] }) : void 0;
-          const viewable = resolveDetailOptions(definition) !== void 0 && (onOpenDetail !== void 0 || loadDetail !== void 0 || widget.status === "ok" && deriveDetailData(widget.data) !== void 0);
-          return /* @__PURE__ */ jsx(
-            ResolvedWidgetCard,
-            {
-              widget,
-              ...viewable ? {
-                onView: () => onOpenDetail === void 0 ? setDetailKey(key) : onOpenDetail(key)
-              } : {},
-              ...spanProps(spans, key),
-              ...widthProps(twelve, definition),
-              minimized: isMinimized(layout, key),
-              ...actions === void 0 ? {} : { actions },
-              ...editable && !lock.minimize ? {
-                onToggleMinimized: () => change(toggleMinimized(layout, key))
-              } : {},
-              ...headingLevel === void 0 ? {} : { headingLevel },
-              ...onRetry === void 0 || widget.status !== "error" ? {} : { onRetry: () => onRetry(key) }
-            },
-            key
-          );
-        })
-      }
-    ),
-    detailKey !== void 0 && byKey.get(detailKey) !== void 0 && /* @__PURE__ */ jsx(
-      DetailHost,
-      {
-        widget: byKey.get(detailKey),
-        loadDetail,
-        onClose: () => setDetailKey(void 0)
-      },
-      detailKey
-    )
-  ] });
+                    {
+                      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: () => change(moveWidgetBy(definitions, layout, key, 1)),
+                      children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2193" })
+                    }
+                  )
+                ] }),
+                !lock.hide && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: slot("button", "dwt-button", "dwt-icon-button"),
+                    "aria-label": labels.hide(title),
+                    title: labels.hide(title),
+                    onClick: () => change(hideWidget(layout, key)),
+                    children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xD7" })
+                  }
+                )
+              ] }) : void 0;
+              const viewable = resolveDetailOptions(definition) !== void 0 && (onOpenDetail !== void 0 || loadDetail !== void 0 || widget.status === "ok" && deriveDetailData(widget.data) !== void 0);
+              return /* @__PURE__ */ jsx(
+                ResolvedWidgetCard,
+                {
+                  widget,
+                  ...viewable ? {
+                    onView: () => onOpenDetail === void 0 ? setDetailKey(key) : onOpenDetail(key)
+                  } : {},
+                  ...spanProps(spans, key),
+                  ...widthProps(twelve, definition),
+                  minimized: isMinimized(layout, key),
+                  editing: toggleMode && controlsShown,
+                  ...actions === void 0 ? {} : { actions },
+                  ...editable && !lock.minimize ? {
+                    onToggleMinimized: () => change(toggleMinimized(layout, key))
+                  } : {},
+                  ...headingLevel === void 0 ? {} : { headingLevel },
+                  ...onRetry === void 0 || widget.status !== "error" ? {} : { onRetry: () => onRetry(key) }
+                },
+                key
+              );
+            })
+          }
+        ),
+        detailKey !== void 0 && byKey.get(detailKey) !== void 0 && /* @__PURE__ */ jsx(
+          DetailHost,
+          {
+            widget: byKey.get(detailKey),
+            loadDetail,
+            onClose: () => setDetailKey(void 0)
+          },
+          detailKey
+        )
+      ]
+    }
+  );
 }
 function Dashboard({
   locale,