@proveanything/smartlinks-utils-ui 0.10.2 → 0.10.4

package/dist/components/RecordsAdmin/index.d.ts

@@ -336,6 +336,10 @@ interface RecordsAdminI18n {
     previewAs: string;
     previewAsDefault: string;
     confirmDelete: string;
+    /** Confirm dialog title shown when the row trash is clicked in the item list. */
+    deleteConfirmTitle: string;
+    /** Confirm dialog body. `{name}` is replaced with the record's friendly label. */
+    deleteConfirmBody: string;
     unsavedBadge: string;
     unsavedPromptTitle: string;
     unsavedPromptBody: string;
@@ -2055,6 +2059,15 @@ declare const useProductBrowse: (args: UseProductBrowseArgs) => {
     refetch: () => Promise<void>;
 };
 
+interface FacetValueShape {
+    key?: string;
+    name?: string;
+}
+interface FacetShape {
+    key?: string;
+    name?: string;
+    values?: FacetValueShape[];
+}
 interface UseFacetBrowseArgs {
     SL: SmartLinksSDK;
     collectionId: string;
@@ -2075,6 +2088,12 @@ declare const useFacetBrowse: ({ SL, collectionId, existing, search, filter, ena
     isLoading: boolean;
     error: Error | null;
     refetch: () => void;
+    /** Raw canonical facet vocabulary as returned by the SDK. Use this
+     *  (NOT `items`) when you need the authoritative list of facets and
+     *  their values — `items` is the record-merged list and may include
+     *  rows whose scope's `facetId` doesn't match a canonical key, which
+     *  would otherwise show up as duplicate facet groups. */
+    vocabulary: FacetShape[];
 };
 
 interface CollectedRecord<T = unknown> {

package/dist/components/RecordsAdmin/index.js

@@ -92,6 +92,8 @@ var DEFAULT_I18N = {
   previewAs: "Preview as",
   previewAsDefault: "Same as edited",
   confirmDelete: "Confirm delete",
+  deleteConfirmTitle: "Delete this record?",
+  deleteConfirmBody: "Are you sure you want to delete \u201C{name}\u201D? This cannot be undone.",
   unsavedBadge: "Unsaved",
   unsavedPromptTitle: "Unsaved changes",
   unsavedPromptBody: "You have unsaved changes. What would you like to do?",
@@ -817,7 +819,13 @@ var useFacetBrowse = ({
     counts,
     isLoading: query.isLoading,
     error: query.error ?? null,
-    refetch
+    refetch,
+    /** Raw canonical facet vocabulary as returned by the SDK. Use this
+     *  (NOT `items`) when you need the authoritative list of facets and
+     *  their values — `items` is the record-merged list and may include
+     *  rows whose scope's `facetId` doesn't match a canonical key, which
+     *  would otherwise show up as duplicate facet groups. */
+    vocabulary: query.data ?? []
   };
 };
 var QK2 = ["records-admin", "product-browse"];
@@ -2943,9 +2951,9 @@ function useEditorBridge(args) {
     const next = session?.status ?? null;
     prevStatusRef.current = next;
     if (next === "saved" && prev !== "saved") {
-      onSaved?.();
+      onSaved?.(session?.recordId);
     }
-  }, [session?.status]);
+  }, [session?.status, session?.recordId]);
   const remove = useMemo(() => async () => {
     if (!session) return;
     await session.remove();
@@ -3071,7 +3079,7 @@ function useShellEditorTarget(args) {
       facetRule: resolved.facetRule
     },
     defaultData,
-    onSaved: () => onSaved(resolved.source !== "self"),
+    onSaved: (recordId) => onSaved(resolved.source !== "self", recordId),
     onDeleted
   });
   return { editorTargetSpec, editorCtx };
@@ -3697,6 +3705,8 @@ var FacetList = RecordList;
 var VariantList = RecordList;
 var BatchList = RecordList;
 var COLLAPSED_FACET_CAP = 6;
+var COLLAPSED_VALUE_CAP = 12;
+var VALUE_SEARCH_THRESHOLD = 12;
 function FacetBrowseFilter({
   facets,
   value,
@@ -3710,12 +3720,33 @@ function FacetBrowseFilter({
   );
   const [openKey, setOpenKey] = useState(value?.facetKey ?? firstUsable ?? null);
   const [allExpanded, setAllExpanded] = useState(false);
+  const [valuesExpanded, setValuesExpanded] = useState({});
+  const [valueSearch, setValueSearch] = useState({});
   const effectiveOpen = value?.facetKey ?? openKey ?? firstUsable ?? null;
   if (isLoading) {
     return /* @__PURE__ */ jsx("div", { className: "ra-rule-filters", "aria-busy": "true", children: /* @__PURE__ */ jsx("div", { className: "ra-rule-filters-row", children: /* @__PURE__ */ jsx("span", { className: "ra-rule-filter-chip", "data-active": "false", children: "Loading facets\u2026" }) }) });
   }
   if (!facets.length) return null;
   const openFacet = facets.find((f) => f.key === effectiveOpen) ?? null;
+  const openValuesExpanded = openFacet ? !!valuesExpanded[openFacet.key] : false;
+  const openValueSearch = openFacet ? valueSearch[openFacet.key] ?? "" : "";
+  const openValuesFiltered = useMemo(() => {
+    if (!openFacet) return [];
+    const q = openValueSearch.trim().toLowerCase();
+    if (!q) return openFacet.values;
+    return openFacet.values.filter(
+      (v) => `${v.label ?? ""} ${v.key}`.toLowerCase().includes(q)
+    );
+  }, [openFacet, openValueSearch]);
+  const valueOverflow = openFacet ? openValuesFiltered.length - COLLAPSED_VALUE_CAP : 0;
+  const visibleValues = openFacet ? openValuesExpanded || valueOverflow <= 0 ? openValuesFiltered : (() => {
+    const head = openValuesFiltered.slice(0, COLLAPSED_VALUE_CAP);
+    const activeVal = value && value.facetKey === openFacet.key ? openFacet.values.find((v) => v.key === value.facetValue) : null;
+    if (activeVal && !head.includes(activeVal)) {
+      return [...head.slice(0, COLLAPSED_VALUE_CAP - 1), activeVal];
+    }
+    return head;
+  })() : [];
   const overflow = facets.length - COLLAPSED_FACET_CAP;
   let visibleFacets = facets;
   if (!allExpanded && overflow > 0) {
@@ -3764,30 +3795,57 @@ function FacetBrowseFilter({
         }
       )
     ] }),
-    openFacet && openFacet.values.length > 0 && /* @__PURE__ */ jsx(
+    openFacet && openFacet.values.length > 0 && /* @__PURE__ */ jsxs(
       "div",
       {
         className: "ra-rule-filters-row",
         role: "group",
         "aria-label": `Pick a ${openFacet.label ?? openFacet.key} value`,
-        style: { paddingLeft: "0.25rem" },
-        children: openFacet.values.map((v) => {
-          const active = value?.facetKey === openFacet.key && value?.facetValue === v.key;
-          return /* @__PURE__ */ jsx(
+        style: { paddingLeft: "0.25rem", maxHeight: "8.5rem", overflowY: "auto" },
+        children: [
+          openFacet.values.length > VALUE_SEARCH_THRESHOLD && /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "search",
+              value: openValueSearch,
+              onChange: (e) => setValueSearch((s) => ({ ...s, [openFacet.key]: e.target.value })),
+              placeholder: `Search ${openFacet.label ?? openFacet.key}\u2026`,
+              "aria-label": `Search ${openFacet.label ?? openFacet.key} values`,
+              className: "ra-rule-filter-chip",
+              style: { minWidth: "8rem", writingMode: "horizontal-tb" }
+            }
+          ),
+          visibleValues.map((v) => {
+            const active = value?.facetKey === openFacet.key && value?.facetValue === v.key;
+            return /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "ra-rule-filter-chip",
+                "data-tone": "complexity",
+                "data-active": active ? "true" : "false",
+                "aria-pressed": active,
+                onClick: () => onChange(active ? null : { facetKey: openFacet.key, facetValue: v.key }),
+                title: `Filter to ${openFacet.label ?? openFacet.key} = ${v.label ?? v.key}`,
+                children: /* @__PURE__ */ jsx("span", { className: "ra-rule-filter-chip-label", children: v.label ?? v.key })
+              },
+              v.key
+            );
+          }),
+          valueOverflow > 0 && /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
+              onClick: () => setValuesExpanded((s) => ({ ...s, [openFacet.key]: !openValuesExpanded })),
               className: "ra-rule-filter-chip",
-              "data-tone": "complexity",
-              "data-active": active ? "true" : "false",
-              "aria-pressed": active,
-              onClick: () => onChange(active ? null : { facetKey: openFacet.key, facetValue: v.key }),
-              title: `Filter to ${openFacet.label ?? openFacet.key} = ${v.label ?? v.key}`,
-              children: /* @__PURE__ */ jsx("span", { className: "ra-rule-filter-chip-label", children: v.label ?? v.key })
-            },
-            v.key
-          );
-        })
+              "data-active": "false",
+              "aria-expanded": openValuesExpanded,
+              title: openValuesExpanded ? "Show fewer values" : `Show all ${openValuesFiltered.length} values`,
+              children: /* @__PURE__ */ jsx("span", { className: "ra-rule-filter-chip-label", children: openValuesExpanded ? "Show fewer" : `Show all (${openValuesFiltered.length})` })
+            }
+          ),
+          openValuesFiltered.length === 0 && /* @__PURE__ */ jsx("span", { className: "ra-rule-filter-clear", style: { cursor: "default", textDecoration: "none" }, children: "No values match." })
+        ]
       }
     ),
     value && /* @__PURE__ */ jsx(
@@ -5774,6 +5832,17 @@ function ItemListView({
   i18n
 }) {
   const newLabel = i18n.newItem.includes("{noun}") ? i18n.newItem.replace("{noun}", itemNoun) : i18n.newItem;
+  const [pendingDeleteId, setPendingDeleteId] = useState(null);
+  const pendingRecord = useMemo(
+    () => pendingDeleteId ? items.find((it) => (it.itemId ?? "") === pendingDeleteId) ?? null : null,
+    [pendingDeleteId, items]
+  );
+  const guardedCtx = useMemo(() => ({
+    ...ctx,
+    onDelete: (id) => setPendingDeleteId(id)
+  }), [ctx]);
+  const confirmName = pendingRecord?.label ?? itemNoun;
+  const confirmBody = i18n.deleteConfirmBody.includes("{name}") ? i18n.deleteConfirmBody.replace("{name}", confirmName) : i18n.deleteConfirmBody;
   const toolbar = /* @__PURE__ */ jsxs("div", { className: "ra-item-toolbar", children: [
     /* @__PURE__ */ jsxs("div", { className: "ra-item-toolbar-title", children: [
       /* @__PURE__ */ jsx("h2", { className: "ra-display", style: { fontSize: "0.95rem", margin: 0 }, children: i18n.itemListTitle }),
@@ -5831,16 +5900,16 @@ function ItemListView({
       }
     );
   } else if (renderItemList) {
-    body = renderItemList(items, ctx);
+    body = renderItemList(items, guardedCtx);
   } else if (view === "table") {
     body = /* @__PURE__ */ jsx(
       DefaultItemTable,
       {
         items,
         columns: itemColumns,
-        selectedId: ctx.selectedId,
-        onOpen: ctx.onOpen,
-        onDelete: ctx.onDelete,
+        selectedId: guardedCtx.selectedId,
+        onOpen: guardedCtx.onOpen,
+        onDelete: guardedCtx.onDelete,
         rowActions,
         rowClipboard,
         i18n
@@ -5852,8 +5921,8 @@ function ItemListView({
       {
         items,
         variant: view,
-        selectedId: ctx.selectedId,
-        ctx,
+        selectedId: guardedCtx.selectedId,
+        ctx: guardedCtx,
         renderCard: renderItemCard,
         cardSize,
         rowActions,
@@ -5885,7 +5954,23 @@ function ItemListView({
         ]
       }
     ) : null,
-    /* @__PURE__ */ jsx("div", { className: "ra-item-list-body", children: body })
+    /* @__PURE__ */ jsx("div", { className: "ra-item-list-body", children: body }),
+    /* @__PURE__ */ jsx(
+      ConfirmDialog,
+      {
+        open: pendingDeleteId !== null,
+        title: i18n.deleteConfirmTitle,
+        body: confirmBody,
+        saveLabel: "",
+        discardLabel: i18n.delete,
+        cancelLabel: i18n.pasteConfirmCancel,
+        onChoice: (choice) => {
+          const id = pendingDeleteId;
+          setPendingDeleteId(null);
+          if (choice === "discard" && id !== null) ctx.onDelete(id);
+        }
+      }
+    )
   ] });
 }
 var EditorItemNav = ({
@@ -7684,7 +7769,7 @@ function RecordsAdminShellInner(props) {
     },
     defaultData,
     deriveDraftLabel,
-    onSaved: (isCreate) => {
+    onSaved: (isCreate, savedRecordId) => {
       onTelemetry?.({ type: "record.save", recordType, ref: editingTargetScope?.raw ?? "", isCreate });
       if (ruleWizardStep !== null) {
         setRuleWizardStep(null);
@@ -7695,6 +7780,9 @@ function RecordsAdminShellInner(props) {
         setSelectedRecordId(null);
         setDraftKind(null);
       }
+      if (isCreate && isCollection && savedRecordId && isDraftId3(selectedItemId)) {
+        setSelectedItemId(savedRecordId);
+      }
       refetchAll();
     },
     onDeleted: () => {
@@ -8292,25 +8380,18 @@ function RecordsAdminShellInner(props) {
     [facetBrowseFilter]
   );
   const facetBrowseFacets = useMemo(() => {
-    if (!facetBrowse.items.length) return [];
-    const byKey = /* @__PURE__ */ new Map();
-    for (const it of facetBrowse.items) {
-      const key = it.scope.facetId;
-      const value = it.scope.facetValue;
-      if (!key || !value) continue;
-      const facetLabel = it.subtitle ?? key;
-      const valueLabel = it.label ?? value;
-      const existing = byKey.get(key);
-      if (existing) {
-        if (!existing.values.some((v) => v.key === value)) {
-          existing.values.push({ key: value, label: valueLabel });
-        }
-      } else {
-        byKey.set(key, { key, label: facetLabel, values: [{ key: value, label: valueLabel }] });
-      }
+    const vocab = facetBrowse.vocabulary ?? [];
+    if (!vocab.length) return [];
+    const out = [];
+    for (const facet of vocab) {
+      const key = facet.key;
+      if (!key) continue;
+      const values = (facet.values ?? []).filter((v) => !!v.key).map((v) => ({ key: v.key, label: v.name ?? v.key }));
+      if (!values.length) continue;
+      out.push({ key, label: facet.name ?? key, values });
     }
-    return Array.from(byKey.values());
-  }, [facetBrowse.items]);
+    return out;
+  }, [facetBrowse.vocabulary]);
   const collectionGlobalAllRow = useMemo(
     () => ({
       id: null,