@richardmcquiston01/dashboard-widgets-toolkit 0.13.0 → 0.14.0

package/dist/react.js

@@ -827,6 +827,30 @@ var DEFAULT_LABELS = {
   menuMoveEarlier: "Move earlier",
   menuMoveLater: "Move later",
   menuHide: "Hide",
+  menuOptions: "Options\u2026",
+  optionsFor: (title) => `Options for ${title}`,
+  optionsTitleField: "Title",
+  titleInUse: "Another widget already uses this title.",
+  optionsWidthField: "Width",
+  widthDefault: "Default",
+  widthOption: (width, share) => `${width} of 12 (${share})`,
+  optionsFlexible: "Grow to fill empty space in the row",
+  optionsDeclared: "Data",
+  apply: "Apply",
+  cancel: "Cancel",
+  resetToDefaults: "Reset to defaults",
+  revertToBeforeEditing: "Revert to before editing",
+  confirmApply: "Apply these changes?",
+  confirmDiscard: "Discard your changes?",
+  confirmResetOptions: "Reset these options to their defaults?",
+  confirmRevertOptions: "Revert these options to how they were before you started editing?",
+  optionsSaved: (title) => `Options saved for ${title}`,
+  sortDefault: "Default order",
+  sortAscending: "Ascending",
+  sortDescending: "Descending",
+  moveColumnUp: (column) => `Move ${column} up`,
+  moveColumnDown: (column) => `Move ${column} down`,
+  customRange: (value) => `Custom: ${value}`,
   moveToPage: (title) => `Move ${title} to another page`,
   moveToPagePlaceholder: "Move to page\u2026",
   moveToPageOption: (title, rowsFree) => `${title} (${rowsFree} ${rowsFree === 1 ? "row" : "rows"} free)`,
@@ -1910,12 +1934,14 @@ function ResolvedWidgetCard({
 var NOT_LOCKED = Object.freeze({
   move: false,
   hide: false,
-  minimize: false
+  minimize: false,
+  options: false
 });
 var FULLY_LOCKED = Object.freeze({
   move: true,
   hide: true,
-  minimize: true
+  minimize: true,
+  options: true
 });
 function resolveWidgetLock(definition) {
   const setting = definition.locked;
@@ -1924,7 +1950,8 @@ function resolveWidgetLock(definition) {
   return {
     move: setting.move === true,
     hide: setting.hide === true,
-    minimize: setting.minimize === true
+    minimize: setting.minimize === true,
+    options: setting.options === true
   };
 }
 function sortDefinitions(definitions) {
@@ -1945,6 +1972,151 @@ function isWidgetVisibleTo(definition, roles) {
   return definition.roles.some((role) => roles.includes(role));
 }
 
+// src/core/settings.ts
+var MAX_WIDGET_TITLE_LENGTH = 80;
+var MAX_COLUMN_LIST = 100;
+var MAX_VALUE_LENGTH = 500;
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function parseOptionValue(value) {
+  if (typeof value === "string") {
+    return value.length <= MAX_VALUE_LENGTH ? value : void 0;
+  }
+  if (typeof value === "number")
+    return Number.isFinite(value) ? value : void 0;
+  if (typeof value === "boolean") return value;
+  if (Array.isArray(value) && value.length <= MAX_COLUMN_LIST) {
+    return value.every(
+      (entry) => typeof entry === "string" && entry.length <= MAX_VALUE_LENGTH
+    ) ? value : void 0;
+  }
+  return void 0;
+}
+function parseOne(raw) {
+  if (!isRecord(raw)) return void 0;
+  const title = raw["title"];
+  const width = raw["width"];
+  const flexible = raw["flexible"];
+  const options = raw["options"];
+  const cleanTitle = typeof title === "string" ? title.trim().slice(0, MAX_WIDGET_TITLE_LENGTH) : "";
+  const chosen = {};
+  if (isRecord(options)) {
+    for (const [key, value] of Object.entries(options)) {
+      const parsed = parseOptionValue(value);
+      if (parsed !== void 0) chosen[key] = parsed;
+    }
+  }
+  const settings = {
+    ...cleanTitle === "" ? {} : { title: cleanTitle },
+    ...isWidgetWidth(width) ? { width } : {},
+    ...typeof flexible === "boolean" ? { flexible } : {},
+    ...Object.keys(chosen).length === 0 ? {} : { options: chosen }
+  };
+  return Object.keys(settings).length === 0 ? void 0 : settings;
+}
+function widthRange(item) {
+  const min = isWidgetWidth(item.minWidth) ? item.minWidth : MIN_WIDGET_WIDTH;
+  const max = isWidgetWidth(item.maxWidth) ? item.maxWidth : MAX_WIDGET_WIDTH;
+  return { min, max: Math.max(min, max) };
+}
+var WIDTH_SHARES = {
+  2: "1/6",
+  3: "1/4",
+  4: "1/3",
+  5: "5/12",
+  6: "1/2",
+  7: "7/12",
+  8: "2/3",
+  9: "3/4",
+  10: "5/6",
+  11: "11/12",
+  12: "Full"
+};
+function widthShareLabel(width) {
+  return WIDTH_SHARES[width] ?? `${width}/12`;
+}
+function isOptionsLocked(item) {
+  return resolveWidgetLock(item).options;
+}
+function fillWith(fill, flexible) {
+  const heightToo = fill === "height" || fill === "both";
+  if (flexible) return heightToo ? "both" : "width";
+  return heightToo ? "height" : void 0;
+}
+function isFlexible(item, settings) {
+  return item.fill === "width" || item.fill === "both";
+}
+function applySettings(definition, settings) {
+  if (settings === void 0) return definition;
+  const range = widthRange(definition);
+  const width = settings.width === void 0 ? void 0 : Math.min(range.max, Math.max(range.min, settings.width));
+  const title = settings.title === void 0 || settings.title.trim() === "" ? void 0 : settings.title;
+  const flexibleChanged = settings.flexible !== void 0 && settings.flexible !== isFlexible(definition);
+  if (title === void 0 && width === void 0 && !flexibleChanged) {
+    return definition;
+  }
+  const next = { ...definition };
+  if (title !== void 0) next.title = title;
+  if (width !== void 0) next.width = width;
+  if (flexibleChanged) {
+    const fill = fillWith(
+      definition.fill,
+      settings.flexible === true
+    );
+    if (fill === void 0) {
+      delete next.fill;
+    } else {
+      next.fill = fill;
+    }
+  }
+  return next;
+}
+function effectiveDefinitions(definitions, layout, options = {}) {
+  return definitions.map(
+    (definition) => options.overrideLocks !== true && isOptionsLocked(definition) ? definition : applySettings(definition, layout.settings?.[definition.key])
+  );
+}
+function sameSettings(a, b) {
+  if (a === b) return true;
+  return a?.title === b?.title && a?.width === b?.width && a?.flexible === b?.flexible && sameOptionValues(a?.options ?? {}, b?.options ?? {});
+}
+function setWidgetSettings(layout, key, patch) {
+  const before = layout.settings?.[key];
+  const draft = { ...before };
+  for (const field of ["title", "width", "flexible", "options"]) {
+    if (!(field in patch)) continue;
+    const value = patch[field];
+    if (value === void 0) {
+      delete draft[field];
+    } else {
+      draft[field] = value;
+    }
+  }
+  const merged = parseOne(draft);
+  if (sameSettings(before, merged)) return layout;
+  const rest = { ...layout.settings };
+  if (merged === void 0) {
+    delete rest[key];
+  } else {
+    rest[key] = merged;
+  }
+  const { settings: _previous, ...others } = layout;
+  return Object.keys(rest).length === 0 ? others : { ...others, settings: rest };
+}
+function normalizeTitle(title) {
+  return title.normalize("NFKC").trim().toLowerCase();
+}
+function isTitleInUse(definitions, layout, key, title) {
+  const wanted = normalizeTitle(title);
+  if (wanted === "") return false;
+  return effectiveDefinitions(definitions, layout, {
+    overrideLocks: true
+  }).some(
+    (other) => other.key !== key && normalizeTitle(other.title ?? other.key) === wanted
+  );
+}
+
 // src/core/layout.ts
 var MAX_PAGE_TITLE_LENGTH = 30;
 var MAX_PARSED_PAGES = 50;
@@ -2422,6 +2594,57 @@ function moveWidgetToPage(definitions, layout, widgetKey, targetKey, options = {
   }
   return ok(moved);
 }
+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" })
+          }
+        )
+      ]
+    }
+  );
+}
 var EditMenuInitialOpenContext = createContext(false);
 var ITEM_SELECTOR = '[role="menuitem"]:not(:disabled)';
 function WidgetEditMenu({
@@ -2560,6 +2783,561 @@ function WidgetEditMenu({
     }
   );
 }
+function draftFrom(settings) {
+  return {
+    title: settings?.title ?? "",
+    width: settings?.width,
+    flexible: settings?.flexible,
+    options: settings?.options ?? {}
+  };
+}
+function storedDefault(option) {
+  return option.type === "dateRange" ? option.default : defaultOptionValue(option);
+}
+function sameValue2(a, b) {
+  if (Array.isArray(a) && Array.isArray(b)) {
+    return a.length === b.length && a.every((item, i) => item === b[i]);
+  }
+  return a === b;
+}
+function patchFrom(definition, draft) {
+  const title = draft.title.trim();
+  const options = {};
+  for (const option of definition.options ?? []) {
+    const value = draft.options[option.key];
+    if (value === void 0) continue;
+    if (sameValue2(value, storedDefault(option))) continue;
+    options[option.key] = value;
+  }
+  return {
+    title: title === "" ? void 0 : title,
+    width: draft.width,
+    flexible: draft.flexible === void 0 || draft.flexible === isFlexible(definition) ? void 0 : draft.flexible,
+    options: Object.keys(options).length === 0 ? void 0 : options
+  };
+}
+function patchKey(patch) {
+  const options = {};
+  for (const key of Object.keys(patch.options ?? {}).sort()) {
+    options[key] = patch.options[key];
+  }
+  return JSON.stringify([patch.title, patch.width, patch.flexible, options]);
+}
+var EMPTY_PATCH = {
+  title: void 0,
+  width: void 0,
+  flexible: void 0,
+  options: void 0
+};
+function WidgetOptionsDialog({
+  definition,
+  settings,
+  baseline,
+  isTitleInUse: isTitleInUse2,
+  onApply,
+  onClose
+}) {
+  const slot = useSlotClassName();
+  const { labels } = useWidgetSettings();
+  const dialogRef = useRef(null);
+  const headingId = useId();
+  const baseId = useId();
+  const [draft, setDraft] = useState(() => draftFrom(settings));
+  const [confirming, setConfirming] = useState(
+    void 0
+  );
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (dialog === null) return void 0;
+    const opener = document.activeElement;
+    if (!dialog.open) dialog.showModal();
+    return () => {
+      if (dialog.open) dialog.close();
+      if (opener instanceof HTMLElement) opener.focus();
+    };
+  }, []);
+  const savedKey = patchKey(patchFrom(definition, draftFrom(settings)));
+  const draftPatch = patchFrom(definition, draft);
+  const dirty = patchKey(draftPatch) !== savedKey;
+  const titleTaken = draft.title.trim() !== "" && isTitleInUse2?.(draft.title.trim()) === true;
+  const canApply = dirty && !titleTaken;
+  const baselineKey = baseline === void 0 ? void 0 : patchKey(patchFrom(definition, draftFrom(baseline.settings)));
+  const canRevert = baselineKey !== void 0 && baselineKey !== savedKey;
+  const canReset = savedKey !== patchKey(EMPTY_PATCH);
+  const range = widthRange(definition);
+  const effectiveFlexible = draft.flexible ?? isFlexible(definition);
+  function requestClose() {
+    if (confirming !== void 0) {
+      setConfirming(void 0);
+    } else if (dirty) {
+      setConfirming("discard");
+    } else {
+      onClose();
+    }
+  }
+  function answer(yes) {
+    const which = confirming;
+    setConfirming(void 0);
+    if (!yes || which === void 0) return;
+    if (which === "discard") {
+      onClose();
+    } else if (which === "apply") {
+      onApply(draftPatch);
+      onClose();
+    } else if (which === "reset") {
+      onApply(EMPTY_PATCH);
+      onClose();
+    } else if (baseline !== void 0) {
+      onApply(patchFrom(definition, draftFrom(baseline.settings)));
+      onClose();
+    }
+  }
+  function setOption(key, value) {
+    setDraft((current) => ({
+      ...current,
+      options: { ...current.options, [key]: value }
+    }));
+  }
+  const confirmMessage = {
+    apply: labels.confirmApply,
+    discard: labels.confirmDiscard,
+    reset: labels.confirmResetOptions,
+    revert: labels.confirmRevertOptions
+  };
+  const widths = [];
+  for (let width = range.min; width <= range.max; width += 1)
+    widths.push(width);
+  return /* @__PURE__ */ jsx(
+    "dialog",
+    {
+      ref: dialogRef,
+      className: slot("dialog", "dwt-options-dialog"),
+      "aria-labelledby": headingId,
+      onCancel: (event) => {
+        event.preventDefault();
+        requestClose();
+      },
+      onClick: (event) => {
+        if (event.target === dialogRef.current) requestClose();
+      },
+      children: /* @__PURE__ */ jsxs(
+        "form",
+        {
+          className: "dwt-options",
+          onSubmit: (event) => {
+            event.preventDefault();
+            if (canApply && confirming === void 0) setConfirming("apply");
+          },
+          children: [
+            /* @__PURE__ */ jsx("h2", { id: headingId, className: "dwt-options-heading", children: labels.optionsFor(definition.title) }),
+            /* @__PURE__ */ jsxs("div", { className: "dwt-options-field", children: [
+              /* @__PURE__ */ jsx("label", { htmlFor: `${baseId}-title`, children: labels.optionsTitleField }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  id: `${baseId}-title`,
+                  type: "text",
+                  value: draft.title,
+                  maxLength: MAX_WIDGET_TITLE_LENGTH,
+                  placeholder: definition.title,
+                  "aria-invalid": titleTaken,
+                  ...titleTaken ? { "aria-describedby": `${baseId}-title-error` } : {},
+                  onChange: (event) => setDraft((current) => ({ ...current, title: event.target.value }))
+                }
+              ),
+              titleTaken && /* @__PURE__ */ jsx(
+                "p",
+                {
+                  id: `${baseId}-title-error`,
+                  role: "alert",
+                  className: "dwt-options-error",
+                  children: labels.titleInUse
+                }
+              )
+            ] }),
+            range.min < range.max && /* @__PURE__ */ jsxs("div", { className: "dwt-options-field", children: [
+              /* @__PURE__ */ jsx("label", { htmlFor: `${baseId}-width`, children: labels.optionsWidthField }),
+              /* @__PURE__ */ jsxs(
+                "select",
+                {
+                  id: `${baseId}-width`,
+                  value: draft.width === void 0 ? "" : String(draft.width),
+                  onChange: (event) => {
+                    const value = event.target.value;
+                    setDraft((current) => ({
+                      ...current,
+                      width: value === "" ? void 0 : Number(value)
+                    }));
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("option", { value: "", children: labels.widthDefault }),
+                    widths.map((width) => /* @__PURE__ */ jsx("option", { value: String(width), children: labels.widthOption(width, widthShareLabel(width)) }, width))
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("label", { className: "dwt-options-check", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: effectiveFlexible,
+                  onChange: (event) => setDraft((current) => ({
+                    ...current,
+                    flexible: event.target.checked
+                  }))
+                }
+              ),
+              labels.optionsFlexible
+            ] }),
+            (definition.options?.length ?? 0) > 0 && /* @__PURE__ */ jsxs("fieldset", { className: "dwt-options-group", children: [
+              /* @__PURE__ */ jsx("legend", { children: labels.optionsDeclared }),
+              (definition.options ?? []).map((option) => /* @__PURE__ */ jsx(
+                OptionField,
+                {
+                  option,
+                  value: draft.options[option.key],
+                  id: `${baseId}-opt-${option.key}`,
+                  onChange: (value) => setOption(option.key, value)
+                },
+                option.key
+              ))
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "dwt-options-actions", children: confirming === void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "submit",
+                  className: slot("button", "dwt-button", "dwt-button-primary"),
+                  disabled: !canApply,
+                  children: labels.apply
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: slot("button", "dwt-button"),
+                  onClick: requestClose,
+                  children: labels.cancel
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: slot("button", "dwt-button"),
+                  disabled: !canReset,
+                  onClick: () => setConfirming("reset"),
+                  children: labels.resetToDefaults
+                }
+              ),
+              baseline !== void 0 && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: slot("button", "dwt-button"),
+                  disabled: !canRevert,
+                  onClick: () => setConfirming("revert"),
+                  children: labels.revertToBeforeEditing
+                }
+              )
+            ] }) : /* @__PURE__ */ jsx(
+              InlineConfirm,
+              {
+                message: confirmMessage[confirming],
+                onAnswer: answer
+              }
+            ) })
+          ]
+        }
+      )
+    }
+  );
+}
+function OptionField({
+  option,
+  value,
+  id,
+  onChange
+}) {
+  const current = value ?? storedDefault(option);
+  switch (option.type) {
+    case "choice":
+      return /* @__PURE__ */ jsxs("div", { className: "dwt-options-field", children: [
+        /* @__PURE__ */ jsx("label", { htmlFor: id, children: option.label }),
+        /* @__PURE__ */ jsx(
+          "select",
+          {
+            id,
+            value: String(current ?? option.default),
+            onChange: (event) => onChange(event.target.value),
+            children: option.choices.map((choice) => /* @__PURE__ */ jsx("option", { value: choice.value, children: choice.label }, choice.value))
+          }
+        )
+      ] });
+    case "number":
+      return /* @__PURE__ */ jsx(
+        NumberField,
+        {
+          option,
+          id,
+          value: typeof current === "number" ? current : option.default,
+          onChange
+        }
+      );
+    case "boolean":
+      return /* @__PURE__ */ jsxs("label", { className: "dwt-options-check", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: current === true,
+            onChange: (event) => onChange(event.target.checked)
+          }
+        ),
+        option.label
+      ] });
+    case "text":
+      return /* @__PURE__ */ jsxs("div", { className: "dwt-options-field", children: [
+        /* @__PURE__ */ jsx("label", { htmlFor: id, children: option.label }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id,
+            type: "text",
+            value: typeof current === "string" ? current : "",
+            maxLength: option.maxLength,
+            onChange: (event) => onChange(event.target.value)
+          }
+        )
+      ] });
+    case "color":
+      return /* @__PURE__ */ jsxs("div", { className: "dwt-options-field", children: [
+        /* @__PURE__ */ jsx("label", { htmlFor: id, children: option.label }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id,
+            type: "color",
+            value: typeof current === "string" ? current : option.default,
+            onChange: (event) => onChange(event.target.value)
+          }
+        )
+      ] });
+    case "dateRange":
+      return /* @__PURE__ */ jsx(
+        DateRangeField,
+        {
+          option,
+          id,
+          value: typeof current === "string" ? current : option.default,
+          onChange
+        }
+      );
+    case "sort":
+      return /* @__PURE__ */ jsx(
+        SortField,
+        {
+          option,
+          id,
+          value: typeof current === "string" ? current : void 0,
+          onChange
+        }
+      );
+    case "columns":
+      return /* @__PURE__ */ jsx(
+        ColumnsField,
+        {
+          option,
+          value: Array.isArray(current) ? current : option.default,
+          onChange
+        }
+      );
+  }
+}
+function NumberField({
+  option,
+  id,
+  value,
+  onChange
+}) {
+  const [text, setText] = useState(String(value));
+  useEffect(() => {
+    setText((typed) => Number(typed) === value ? typed : String(value));
+  }, [value]);
+  return /* @__PURE__ */ jsxs("div", { className: "dwt-options-field", children: [
+    /* @__PURE__ */ jsx("label", { htmlFor: id, children: option.label }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        id,
+        type: "number",
+        value: text,
+        min: option.min,
+        max: option.max,
+        step: option.step ?? 1,
+        onChange: (event) => {
+          setText(event.target.value);
+          const parsed = Number(event.target.value);
+          if (event.target.value.trim() !== "" && coerceOptionValue(option, parsed) !== void 0) {
+            onChange(parsed);
+          }
+        }
+      }
+    )
+  ] });
+}
+var PRESET_LABELS = {
+  today: "Today",
+  yesterday: "Yesterday",
+  last7: "Last 7 days",
+  last30: "Last 30 days",
+  last90: "Last 90 days",
+  thisMonth: "This month",
+  lastMonth: "Last month",
+  thisYear: "This year",
+  lastYear: "Last year"
+};
+function DateRangeField({
+  option,
+  id,
+  value,
+  onChange
+}) {
+  const { labels } = useWidgetSettings();
+  const presets = option.presets ?? DATE_RANGE_PRESETS.map((preset) => ({
+    value: preset,
+    label: PRESET_LABELS[preset]
+  }));
+  const known = presets.some((preset) => preset.value === value);
+  return /* @__PURE__ */ jsxs("div", { className: "dwt-options-field", children: [
+    /* @__PURE__ */ jsx("label", { htmlFor: id, children: option.label }),
+    /* @__PURE__ */ jsxs(
+      "select",
+      {
+        id,
+        value,
+        onChange: (event) => onChange(event.target.value),
+        children: [
+          !known && /* @__PURE__ */ jsx("option", { value, children: labels.customRange(value) }),
+          presets.map((preset) => /* @__PURE__ */ jsx("option", { value: preset.value, children: preset.label }, preset.value))
+        ]
+      }
+    )
+  ] });
+}
+function SortField({
+  option,
+  id,
+  value,
+  onChange
+}) {
+  const { labels } = useWidgetSettings();
+  const parsed = value === void 0 ? void 0 : parseSortValue(value);
+  const column = parsed?.column ?? "";
+  const direction = parsed?.direction ?? "desc";
+  return /* @__PURE__ */ jsxs("div", { className: "dwt-options-field", children: [
+    /* @__PURE__ */ jsx("label", { htmlFor: id, children: option.label }),
+    /* @__PURE__ */ jsxs("span", { className: "dwt-options-pair", children: [
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          id,
+          value: column,
+          onChange: (event) => onChange(`${event.target.value}:${direction}`),
+          children: [
+            option.default === void 0 && column === "" && /* @__PURE__ */ jsx("option", { value: "", children: labels.sortDefault }),
+            option.columns.map((entry) => /* @__PURE__ */ jsx("option", { value: entry.key, children: entry.label }, entry.key))
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          "aria-label": option.label,
+          value: direction,
+          disabled: column === "",
+          onChange: (event) => onChange(`${column}:${event.target.value}`),
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "asc", children: labels.sortAscending }),
+            /* @__PURE__ */ jsx("option", { value: "desc", children: labels.sortDescending })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+function ColumnsField({
+  option,
+  value,
+  onChange
+}) {
+  const { labels } = useWidgetSettings();
+  const slot = useSlotClassName();
+  const ordered = [
+    ...value,
+    ...option.columns.map((c) => c.key).filter((key) => !value.includes(key))
+  ];
+  const labelOf = (key) => option.columns.find((c) => c.key === key)?.label ?? key;
+  function move(key, by) {
+    const next = [...value];
+    const from = next.indexOf(key);
+    const to = from + by;
+    if (from === -1 || to < 0 || to >= next.length) return;
+    [next[from], next[to]] = [next[to], next[from]];
+    onChange(next);
+  }
+  return /* @__PURE__ */ jsxs("fieldset", { className: "dwt-options-columns", children: [
+    /* @__PURE__ */ jsx("legend", { children: option.label }),
+    /* @__PURE__ */ jsx("ul", { children: ordered.map((key) => {
+      const shown = value.includes(key);
+      const name = labelOf(key);
+      return /* @__PURE__ */ jsxs("li", { children: [
+        /* @__PURE__ */ jsxs("label", { children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: shown,
+              disabled: shown && value.length === 1,
+              onChange: (event) => onChange(
+                event.target.checked ? [...value, key] : value.filter((k) => k !== key)
+              )
+            }
+          ),
+          name
+        ] }),
+        shown && /* @__PURE__ */ jsxs("span", { className: "dwt-options-move", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: slot("button", "dwt-button", "dwt-icon-button"),
+              "aria-label": labels.moveColumnUp(name),
+              title: labels.moveColumnUp(name),
+              disabled: value.indexOf(key) === 0,
+              onClick: () => move(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.moveColumnDown(name),
+              title: labels.moveColumnDown(name),
+              disabled: value.indexOf(key) === value.length - 1,
+              onClick: () => move(key, 1),
+              children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2193" })
+            }
+          )
+        ] })
+      ] }, key);
+    }) })
+  ] });
+}
 function nextSort(current, column) {
   if (current?.column !== column) return { column, direction: "asc" };
   return current.direction === "asc" ? { column, direction: "desc" } : void 0;
@@ -2987,57 +3765,6 @@ 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 PageTabs({
   pages,
   activeKey,
@@ -3243,12 +3970,19 @@ function DashboardInner({
 }) {
   const slot = useSlotClassName();
   const { labels } = useWidgetSettings();
-  const definitions = widgets.map(
+  const effectiveWidgets = widgets.map((w) => {
+    const settings = savedLayout.settings?.[w.definition.key];
+    return settings === void 0 || !overrideLocks && isOptionsLocked(w.definition) ? w : { ...w, definition: applySettings(w.definition, settings) };
+  });
+  const definitions = effectiveWidgets.map(
     (w) => overrideLocks ? withoutLock(w.definition) : w.definition
   );
   const layout = enforceLocks(definitions, savedLayout);
   const byKey = new Map(
-    widgets.map((w) => [w.definition.key, w])
+    effectiveWidgets.map((w) => [w.definition.key, w])
+  );
+  const authorDefinitions = new Map(
+    widgets.map((w) => [w.definition.key, w.definition])
   );
   const pages = pageList(layout);
   const paged = pages.length >= 2;
@@ -3293,6 +4027,7 @@ function DashboardInner({
   const minimized = editable ? visible.filter((definition) => isMinimized(view, definition.key)) : [];
   const shown = editable ? visible.filter((definition) => !isMinimized(view, definition.key)) : visible;
   const [detailKey, setDetailKey] = useState(void 0);
+  const [optionsKey, setOptionsKey] = useState(void 0);
   const gridRef = useRef(null);
   const twelve = usesWidthColumns(shown);
   const spans = useFillSpans(
@@ -3432,7 +4167,14 @@ function DashboardInner({
     const which = pending;
     setConfirming(void 0);
     if (yes && which === "reset") {
-      change(enforceLocks(definitions, defaultLayout ?? EMPTY_LAYOUT));
+      const arranged = enforceLocks(
+        definitions,
+        defaultLayout ?? EMPTY_LAYOUT
+      );
+      const { settings: _defaultSettings, ...arrangement } = arranged;
+      change(
+        layout.settings === void 0 ? arrangement : { ...arrangement, settings: layout.settings }
+      );
     } else if (yes && which === "revert" && snapshot !== void 0) {
       change(snapshot);
     }
@@ -3729,6 +4471,15 @@ function DashboardInner({
                           onSelect: () => changePage(moveWidgetBy(pageDefs, view, key, 1))
                         }
                       ],
+                      ...lock.options ? [] : [
+                        {
+                          kind: "action",
+                          key: "options",
+                          label: labels.menuOptions,
+                          ariaLabel: labels.optionsFor(title),
+                          onSelect: () => setOptionsKey(key)
+                        }
+                      ],
                       ...pageTargets,
                       ...lock.hide ? [] : [
                         {
@@ -3817,6 +4568,30 @@ function DashboardInner({
             ]
           }
         ),
+        optionsKey !== void 0 && authorDefinitions.get(optionsKey) !== void 0 && /* @__PURE__ */ jsx(
+          WidgetOptionsDialog,
+          {
+            definition: authorDefinitions.get(optionsKey),
+            settings: layout.settings?.[optionsKey],
+            ...snapshot === void 0 ? {} : { baseline: { settings: snapshot.settings?.[optionsKey] } },
+            isTitleInUse: (title) => isTitleInUse(
+              widgets.map((w) => w.definition),
+              layout,
+              optionsKey,
+              title
+            ),
+            onApply: (patch) => {
+              change(setWidgetSettings(layout, optionsKey, patch));
+              setAnnouncement(
+                labels.optionsSaved(
+                  authorDefinitions.get(optionsKey)?.title ?? optionsKey
+                )
+              );
+            },
+            onClose: () => setOptionsKey(void 0)
+          },
+          optionsKey
+        ),
         detailKey !== void 0 && byKey.get(detailKey) !== void 0 && /* @__PURE__ */ jsx(
           DetailHost,
           {
@@ -4091,7 +4866,7 @@ function describeType2(value) {
   }
   return typeof value;
 }
-function isRecord(value) {
+function isRecord2(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 }
 function join(path, field) {
@@ -4173,7 +4948,7 @@ function requireOneOf(record, field, options, path, problems) {
 function eachRecord(items, path, problems, check) {
   items.forEach((item, index) => {
     const itemPath = `${path}[${index}]`;
-    if (isRecord(item)) {
+    if (isRecord2(item)) {
       check(item, itemPath);
     } else {
       problems.push(
@@ -4327,7 +5102,7 @@ function formatProblems(prefix, problems) {
 }
 function validateWidgetData(value, options = {}) {
   const subject = options.widgetKey === void 0 ? "Widget data" : `Widget ${JSON.stringify(options.widgetKey)}`;
-  if (!isRecord(value)) {
+  if (!isRecord2(value)) {
     return err(`${subject}: must be an object, got ${describeType2(value)}.`);
   }
   if (value["empty"] === true) {
@@ -4772,6 +5547,6 @@ function useWidgets(definitions, providers, context, options = {}) {
   return { widgets, refresh, setOptions, gridRef };
 }
 
-export { AlertListWidget, BarListWidget, DEFAULT_LABELS, DEFAULT_SERIES_COLORS, Dashboard, GaugeWidget, GraphWidget, KpiWidget, ResolvedWidgetCard, TableWidget, TextWidget, Thumbnail, WidgetCard, WidgetContent, WidgetDetail, WidgetDetailDialog, WidgetGrid, WidgetLink, WidgetSettingsProvider, barPath, buildChartModel, describeChart, joinClassNames, seriesColor, useDetailData, useStoredLayout, useWidgetSettings, useWidgets, widgetTitle };
+export { AlertListWidget, BarListWidget, DEFAULT_LABELS, DEFAULT_SERIES_COLORS, Dashboard, GaugeWidget, GraphWidget, KpiWidget, ResolvedWidgetCard, TableWidget, TextWidget, Thumbnail, WidgetCard, WidgetContent, WidgetDetail, WidgetDetailDialog, WidgetGrid, WidgetLink, WidgetOptionsDialog, WidgetSettingsProvider, barPath, buildChartModel, describeChart, joinClassNames, seriesColor, useDetailData, useStoredLayout, useWidgetSettings, useWidgets, widgetTitle };
 //# sourceMappingURL=react.js.map
 //# sourceMappingURL=react.js.map