@proveanything/smartlinks-utils-ui 0.10.2 → 0.10.3

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

@@ -2055,6 +2055,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 +2084,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

@@ -817,7 +817,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"];
@@ -3697,6 +3703,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 +3718,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 +3793,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(
@@ -8292,25 +8348,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,