@clyrex-digital/clyrex-controls-dev 0.8.1-dev.20260924103055 → 0.8.1-dev.20260924115534

package/dist/index.js

@@ -5686,7 +5686,7 @@ var DataBindingControls_exports = {};
 __export(DataBindingControls_exports, {
   default: () => DataBindingControls_default
 });
-var import_react59, import_navigation, import_jsx_runtime86, ACTIVE_QUERY_CONTROLS_EVENT, humanize, escapeODataString, parseFacetSelections, buildFacetFilter, parseODataSearch, SearchIcon, ResetIcon, normalizeSortOption, DataBindingControls, DataBindingControls_default;
+var import_react59, import_navigation, import_jsx_runtime86, humanize, escapeODataString, parseFacetSelections, buildFacetFilter, parseODataSearch, SearchIcon, ResetIcon, FilterSlidersIcon, ChevronDownIcon, CheckIcon, CloseIcon, normalizeSortOption, DataBindingControls, DataBindingControls_default;
 var init_DataBindingControls = __esm({
   "src/components/pageRenderingEngine/nodes/DataBindingControls.tsx"() {
     "use strict";
@@ -5698,22 +5698,15 @@ var init_DataBindingControls = __esm({
     init_InputControlType();
     init_StyleTypes();
     import_jsx_runtime86 = require("react/jsx-runtime");
-    ACTIVE_QUERY_CONTROLS_EVENT = "data-binding-active-query-controls";
     humanize = (value) => value.replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/[_-]+/g, " ").trim();
     escapeODataString = (value) => value.replace(/'/g, "''");
     parseFacetSelections = (filter) => {
       const selections = /* @__PURE__ */ new Map();
-      const groupedExpression = /\(\s*([^()]+?)\s+eq\s+'((?:''|[^'])*)'\s*\)/gi;
-      for (const match of filter.matchAll(groupedExpression)) {
-        selections.set(match[1].trim(), match[2].replace(/''/g, "'"));
-      }
-      if (selections.size === 0) {
-        const ungroupedExpression = /(?:^|\s+and\s+)\s*([^()]+?)\s+eq\s+'((?:''|[^'])*)'\s*(?=\s+and\s+|$)/gi;
-        for (const match of filter.matchAll(ungroupedExpression)) {
-          selections.set(
-            match[1].trim(),
-            match[2].replace(/''/g, "'")
-          );
+      if (!filter || !filter.trim()) return selections;
+      const expression = /(?:^|[\s()]+(?:and[\s()]+)?)([\w./-]+)\s+eq\s+'((?:''|[^'])*)'/gi;
+      for (const match of filter.matchAll(expression)) {
+        if (match[1] && match[2] !== void 0) {
+          selections.set(match[1].trim(), match[2].replace(/''/g, "'"));
         }
       }
       return selections;
@@ -5764,6 +5757,59 @@ var init_DataBindingControls = __esm({
         ]
       }
     );
+    FilterSlidersIcon = ({ className = "" }) => /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
+      "svg",
+      {
+        "aria-hidden": "true",
+        className,
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 4h18M3 12h18M3 20h18" }),
+          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("circle", { cx: "8", cy: "4", r: "2", fill: "currentColor" }),
+          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("circle", { cx: "16", cy: "12", r: "2", fill: "currentColor" }),
+          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("circle", { cx: "10", cy: "20", r: "2", fill: "currentColor" })
+        ]
+      }
+    );
+    ChevronDownIcon = ({ className = "" }) => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+      "svg",
+      {
+        "aria-hidden": "true",
+        className,
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m19 9-7 7-7-7" })
+      }
+    );
+    CheckIcon = ({ className = "" }) => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+      "svg",
+      {
+        "aria-hidden": "true",
+        className,
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor",
+        strokeWidth: "2.5",
+        children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" })
+      }
+    );
+    CloseIcon = ({ className = "" }) => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+      "svg",
+      {
+        "aria-hidden": "true",
+        className,
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
+      }
+    );
     normalizeSortOption = (option) => {
       const direction = option.direction.trim();
       return {
@@ -5782,59 +5828,46 @@ var init_DataBindingControls = __esm({
       mode = "toolbar"
     }) => {
       const router = (0, import_navigation.useRouter)();
-      const facetGroups = Object.entries(facets ?? {}).filter(
-        ([, values]) => Array.isArray(values) && values.length > 0
+      const searchParams = (0, import_navigation.useSearchParams)();
+      const [collapsedCategories, setCollapsedCategories] = (0, import_react59.useState)({});
+      const toggleCategory = (field) => {
+        setCollapsedCategories((prev) => ({
+          ...prev,
+          [field]: !prev[field]
+        }));
+      };
+      const searchParamsFilter = searchParams?.get("$filter") ?? searchParams?.get("filter");
+      const searchParamsSort = searchParams?.get("$orderby") ?? searchParams?.get("orderBy");
+      const searchParamsSearch = searchParams?.get("$search");
+      const currentFilter = searchParamsFilter !== void 0 && searchParamsFilter !== null ? searchParamsFilter : query?.["$filter"] ?? query?.filter ?? "";
+      const currentSort = searchParamsSort !== void 0 && searchParamsSort !== null ? searchParamsSort : query?.["$orderby"] ?? query?.orderBy ?? "";
+      const currentSearch = parseODataSearch(
+        searchParamsSearch !== void 0 && searchParamsSearch !== null ? searchParamsSearch : query?.["$search"]
       );
-      const normalizedSortOptions = (sortOptions ?? []).filter((option) => option?.name && option?.direction).map(normalizeSortOption).filter((option) => option.value);
-      const queryFilter = query?.["$filter"] ?? query?.filter ?? "";
-      const querySort = query?.["$orderby"] ?? query?.orderBy ?? "";
-      const [currentFilter, setCurrentFilter] = (0, import_react59.useState)(queryFilter);
-      const [currentSort, setCurrentSort] = (0, import_react59.useState)(querySort);
-      const selectedFacetValues = parseFacetSelections(currentFilter);
-      const currentSearch = parseODataSearch(query?.["$search"]);
       const [searchText, setSearchText] = (0, import_react59.useState)(currentSearch);
-      const lastNavigationUrl = (0, import_react59.useRef)(null);
       (0, import_react59.useEffect)(() => {
         setSearchText(currentSearch);
       }, [currentSearch]);
-      (0, import_react59.useEffect)(() => {
-        setCurrentFilter(queryFilter);
-      }, [queryFilter]);
-      (0, import_react59.useEffect)(() => {
-        setCurrentSort(querySort);
-      }, [querySort]);
-      (0, import_react59.useEffect)(() => {
-        const syncActiveQueryControls2 = (event) => {
-          const { filter, sort } = event.detail;
-          if (filter !== void 0) {
-            setCurrentFilter(filter);
-          }
-          if (sort !== void 0) {
-            setCurrentSort(sort);
-          }
-        };
-        window.addEventListener(
-          ACTIVE_QUERY_CONTROLS_EVENT,
-          syncActiveQueryControls2
-        );
-        return () => window.removeEventListener(
-          ACTIVE_QUERY_CONTROLS_EVENT,
-          syncActiveQueryControls2
-        );
-      }, []);
-      const syncActiveQueryControls = (0, import_react59.useCallback)(
-        (updates) => {
-          window.dispatchEvent(
-            new CustomEvent(ACTIVE_QUERY_CONTROLS_EVENT, {
-              detail: updates
-            })
-          );
-        },
-        []
+      const selectedFacetValues = (0, import_react59.useMemo)(
+        () => parseFacetSelections(currentFilter),
+        [currentFilter]
       );
+      const activeFacets = (0, import_react59.useMemo)(() => {
+        if (!facets) return [];
+        return Object.entries(facets).map(([field, values]) => {
+          if (!Array.isArray(values)) return null;
+          const filteredValues = values.filter(
+            (item) => item.count > 0 || selectedFacetValues.get(field) === item.value
+          );
+          if (filteredValues.length === 0) return null;
+          return [field, filteredValues];
+        }).filter((group) => group !== null);
+      }, [facets, selectedFacetValues]);
+      const normalizedSortOptions = (sortOptions ?? []).filter((option) => option?.name && option?.direction).map(normalizeSortOption).filter((option) => option.value);
       const getQueryUrl = (0, import_react59.useCallback)(
         (updates) => {
-          const params = new URLSearchParams(query ?? {});
+          const initialParams = searchParams ? searchParams.toString() : "";
+          const params = new URLSearchParams(initialParams || query || {});
           Object.entries(updates).forEach(([key, value]) => {
             if (value) {
               params.set(key, value);
@@ -5849,38 +5882,48 @@ var init_DataBindingControls = __esm({
           ).join("&");
           return queryString ? `${path}?${queryString}` : path;
         },
-        [path, query]
+        [path, query, searchParams]
       );
-      const getFacetUrl = (field, value) => {
-        const updatedSelections = new Map(selectedFacetValues);
-        if (value) {
-          updatedSelections.set(field, value);
-        } else {
-          updatedSelections.delete(field);
-        }
-        const updatedFilter = buildFacetFilter(updatedSelections);
-        syncActiveQueryControls({ filter: updatedFilter });
-        return getQueryUrl({
-          $filter: updatedFilter || void 0,
-          filter: void 0
-        });
-      };
       const navigateWithoutReload = (0, import_react59.useCallback)(
         (url) => {
-          if (lastNavigationUrl.current === url) {
-            return;
-          }
           if (typeof window !== "undefined") {
             const targetUrl = new URL(url, window.location.origin);
             if (targetUrl.pathname === window.location.pathname && targetUrl.search === window.location.search) {
               return;
             }
           }
-          lastNavigationUrl.current = url;
           router.push(url, { scroll: false });
         },
         [router]
       );
+      const getFacetUrl = (field, value) => {
+        const updatedSelections = new Map(selectedFacetValues);
+        if (value) {
+          if (updatedSelections.get(field) === value) {
+            updatedSelections.delete(field);
+          } else {
+            updatedSelections.set(field, value);
+          }
+        } else {
+          updatedSelections.delete(field);
+        }
+        const updatedFilter = buildFacetFilter(updatedSelections);
+        return getQueryUrl({
+          $filter: updatedFilter || void 0,
+          filter: void 0
+        });
+      };
+      const clearFacetField = (field) => {
+        const updatedSelections = new Map(selectedFacetValues);
+        updatedSelections.delete(field);
+        const updatedFilter = buildFacetFilter(updatedSelections);
+        navigateWithoutReload(
+          getQueryUrl({
+            $filter: updatedFilter || void 0,
+            filter: void 0
+          })
+        );
+      };
       const handleSearch = (0, import_react59.useCallback)(async () => {
         const trimmedSearchText = searchText.trim();
         if (trimmedSearchText === currentSearch.trim()) {
@@ -5894,7 +5937,6 @@ var init_DataBindingControls = __esm({
         return { isSuccessful: true };
       }, [currentSearch, getQueryUrl, navigateWithoutReload, searchText]);
       const handleClearAll = (0, import_react59.useCallback)(async () => {
-        syncActiveQueryControls({ filter: "", sort: "" });
         navigateWithoutReload(
           getQueryUrl({
             $filter: void 0,
@@ -5904,66 +5946,76 @@ var init_DataBindingControls = __esm({
           })
         );
         return { isSuccessful: true };
-      }, [getQueryUrl, navigateWithoutReload, syncActiveQueryControls]);
-      const hasFacetControls = showFacets && facetGroups.length > 0;
+      }, [getQueryUrl, navigateWithoutReload]);
+      const hasFacetControls = showFacets && activeFacets.length > 0;
       const hasSortControls = showSortOptions && normalizedSortOptions.length > 0;
       const hasActiveFiltersOrSort = Boolean(
         currentFilter.trim() || currentSort.trim()
       );
+      const selectedFacetCount = selectedFacetValues.size;
       const shouldShowToolbarClearAll = hasActiveFiltersOrSort && !hasFacetControls;
       const shouldShowToolbar = mode === "toolbar" && (showSearchBar || hasSortControls || shouldShowToolbarClearAll);
       const shouldShowFacets = mode === "facets" && hasFacetControls;
       if (!shouldShowToolbar && !shouldShowFacets) {
         return null;
       }
-      const renderFacetLinks = (field, values, stacked = false) => /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: stacked ? "flex flex-col gap-0.5" : "flex flex-wrap gap-1.5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+      const renderFacetItems = (field, values) => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "flex flex-col gap-1 pt-1 pb-1", children: values.map((facet) => {
+        const isSelected = selectedFacetValues.get(field) === facet.value;
+        return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
           "button",
           {
             type: "button",
-            onClick: () => navigateWithoutReload(getFacetUrl(field)),
-            "aria-pressed": !selectedFacetValues.has(field),
-            className: `cursor-pointer px-3 py-1.5 text-left text-sm transition-all duration-150 ease-out hover:shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary ${stacked ? "w-full" : "border"} ${selectedFacetValues.has(field) ? "hover:bg-info-soft" : "bg-primary-base font-semibold hover:brightness-95"}`,
-            children: "All"
-          }
-        ),
-        values.map((facet) => {
-          const isSelected = selectedFacetValues.get(field) === facet.value;
-          return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
-            "button",
-            {
-              type: "button",
-              onClick: () => navigateWithoutReload(getFacetUrl(field, facet.value)),
-              "aria-pressed": isSelected,
-              className: `cursor-pointer px-3 py-1.5 text-left text-sm transition-all duration-150 ease-out hover:shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary ${stacked ? "w-full" : "border"} ${isSelected ? "bg-primary-base font-semibold hover:brightness-95" : "hover:bg-info-soft"}`,
-              children: [
-                facet.value,
-                " (",
-                facet.count,
-                ")"
-              ]
-            },
-            `${field}-${facet.value}`
-          );
-        })
-      ] });
+            onClick: () => navigateWithoutReload(getFacetUrl(field, facet.value)),
+            "aria-pressed": isSelected,
+            className: `group flex w-full cursor-pointer items-center justify-between gap-2.5 rounded-md px-2 py-1.5 text-left text-sm transition-all duration-150 ease-out focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary-base ${isSelected ? "bg-neutral-soft font-medium border " : "hover:bg-neutral-weak border border-transparent"}`,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "flex min-w-0 items-center gap-2.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+                  "span",
+                  {
+                    className: `flex h-4 w-4 shrink-0 items-center justify-center rounded-[3px] border transition-colors duration-150 ${isSelected ? "bg-primary-base border-primary-base" : " group-hover:border-neutral-strong bg-default"}`,
+                    children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(CheckIcon, { className: "h-3 w-3" })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: "leading-snug break-words", children: facet.value })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+                "span",
+                {
+                  className: `shrink-0 rounded px-1.5 py-0.5 text-xs transition-colors ml-2 ${isSelected ? "bg-neutral-weak font-semibold" : "bg-neutral-weak font-normal"}`,
+                  children: facet.count
+                }
+              )
+            ]
+          },
+          `${field}-${facet.value}`
+        );
+      }) });
       return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
         "div",
         {
-          className: mode === "toolbar" ? "my-6" : "flex flex-col gap-2 border bg-default rounded-[5px] p-3",
+          className: mode === "toolbar" ? "my-6" : "flex flex-col rounded-md border  bg-default p-3.5 shadow-sm",
           children: [
             shouldShowToolbar && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "flex flex-col gap-3 md:flex-row md:items-center md:justify-between", children: [
-              showSearchBar && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
+              showSearchBar && // <form
+              //   role="search"
+              //   className="flex w-full flex-col gap-3 rounded-md border border-info bg-info-soft p-3 sm:flex-row sm:items-center md:min-w-0 md:flex-1"
+              //   onSubmit={(event) => {
+              //     event.preventDefault();
+              //     void handleSearch();
+              //   }}
+              // >
+              /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
                 "form",
                 {
                   role: "search",
-                  className: "flex w-full flex-col gap-3 rounded-xl border border-info bg-info-soft p-3 sm:flex-row sm:items-center md:min-w-0 md:flex-1",
+                  className: "flex w-full flex-col gap-3 rounded-md sm:flex-row sm:items-center md:min-w-0 md:flex-1",
                   onSubmit: (event) => {
                     event.preventDefault();
                     void handleSearch();
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "relative bg-default rounded-xl min-w-0 flex-1", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "relative bg-default rounded-md min-w-0 flex-1", children: [
                       /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(SearchIcon, { className: "pointer-events-none absolute left-4 top-1/2 z-10 h-5 w-5 -translate-y-1/2" }),
                       /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
                         InputControl_default,
@@ -5975,7 +6027,7 @@ var init_DataBindingControls = __esm({
                           attributes: {
                             placeholder: "Search discussions, topics, or keywords..."
                           },
-                          inputClasses: "!mt-0 !rounded-xl !py-3 !pl-11 !pr-4 !shadow-sm"
+                          inputClasses: "!mt-0 !rounded-md !py-3 !pl-11 !pr-4 !shadow-sm"
                         }
                       )
                     ] }),
@@ -5984,7 +6036,7 @@ var init_DataBindingControls = __esm({
                       {
                         ButtonType: "Primary" /* Solid */,
                         onClick: handleSearch,
-                        className: "!rounded-xl !px-6 !py-3 sm:self-stretch",
+                        className: "!rounded-md !px-6 !py-3 sm:self-stretch",
                         children: [
                           /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(SearchIcon, { className: "h-5 w-5" }),
                           /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { children: "Search" })
@@ -5994,7 +6046,7 @@ var init_DataBindingControls = __esm({
                   ]
                 }
               ),
-              hasSortControls && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "flex w-full items-center gap-3 rounded-2xl border border-info bg-info-soft p-3 text-sm md:ml-auto md:w-auto md:min-w-72 md:self-stretch", children: [
+              hasSortControls && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "flex w-full items-center gap-3 rounded-md border border-info bg-info-soft p-3 text-sm md:ml-auto md:w-auto md:min-w-72 md:self-stretch", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
                   "label",
                   {
@@ -6003,7 +6055,7 @@ var init_DataBindingControls = __esm({
                     children: "Sort by"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "min-w-0 flex-1 rounded-xl bg-default md:min-w-48", children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "min-w-0 flex-1 rounded-md bg-default md:min-w-48", children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
                   InputControl_default,
                   {
                     name: "sortOptions",
@@ -6014,7 +6066,6 @@ var init_DataBindingControls = __esm({
                     dataTextFieldName: "label",
                     callback: (updatedValues) => {
                       const updatedSort = updatedValues.value || "";
-                      syncActiveQueryControls({ sort: updatedSort });
                       navigateWithoutReload(
                         getQueryUrl({
                           $orderby: updatedSort || void 0,
@@ -6023,32 +6074,81 @@ var init_DataBindingControls = __esm({
                       );
                     },
                     attributes: { placeholder: "Default" },
-                    inputClasses: "!mt-0 !rounded-xl !border-info !bg-default !px-4 !py-3 !text-body !shadow-sm focus:!border-primary focus:!ring-primary-base"
+                    inputClasses: "!mt-0 !rounded-md !border-info !bg-default !px-4 !py-3 !shadow-sm focus:!border-primary focus:!ring-primary-base"
                   }
                 ) })
               ] })
             ] }),
-            shouldShowFacets && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "flex items-center justify-between gap-2 border-b pb-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("h2", { className: "text-lg font-semibold", children: "Filters" }),
-              hasActiveFiltersOrSort && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
+            shouldShowFacets && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "flex flex-col gap-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "flex items-center justify-between border-b  pb-3", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(FilterSlidersIcon, { className: "h-4 w-4" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("h2", { className: "text-base font-semibold tracking-tight", children: "Filters" }),
+                  selectedFacetCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: "flex h-5 items-center justify-center rounded-full bg-primary-base px-2 text-xs font-semibold", children: selectedFacetCount })
+                ] }),
+                hasActiveFiltersOrSort && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => void handleClearAll(),
+                    className: "group inline-flex cursor-pointer items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium transition-colors duration-150 hover:bg-neutral-soft focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary-base",
+                    "aria-label": "Clear all filters and sorting",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(ResetIcon, { className: "h-3.5 w-3.5 transition-transform duration-200 group-hover:-rotate-45" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { children: "Clear all" })
+                    ]
+                  }
+                )
+              ] }),
+              selectedFacetCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "flex flex-wrap gap-1.5 pb-2.5 border-b ", children: Array.from(selectedFacetValues.entries()).map(([field, value]) => /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
                 "button",
                 {
                   type: "button",
-                  onClick: () => void handleClearAll(),
-                  className: "group inline-flex cursor-pointer items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium text-primary transition-colors duration-150 hover:bg-info-soft hover:text-primary-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary",
-                  "aria-label": "Clear all filters and sorting",
+                  onClick: () => clearFacetField(field),
+                  className: "group inline-flex max-w-full cursor-pointer items-center gap-1.5 rounded-md border bg-neutral-weak px-2.5 py-1 text-xs transition-colors hover:bg-neutral-soft",
+                  title: `Remove filter: ${value}`,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(ResetIcon, { className: "h-3.5 w-3.5 transition-transform duration-200 group-hover:-rotate-45" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { children: "Clear all" })
+                    /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: "font-medium truncate max-w-[150px]", children: value }),
+                    /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(CloseIcon, { className: "h-3.5 w-3.5 shrink-0 opacity-60 group-hover:opacity-100" })
                   ]
-                }
-              )
-            ] }),
-            shouldShowFacets && facetGroups.length === 1 && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("nav", { "aria-label": `${humanize(facetGroups[0][0])} filters`, children: renderFacetLinks(facetGroups[0][0], facetGroups[0][1]) }),
-            shouldShowFacets && facetGroups.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "flex flex-col", children: facetGroups.map(([field, values]) => /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("details", { className: "border-b py-1 last:border-b-0", open: true, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("summary", { className: "cursor-pointer rounded-md px-2 py-1.5 font-semibold transition-colors duration-150 hover:bg-info-soft focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary", children: humanize(field) }),
-              /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "px-1 pb-1 pt-0.5", children: renderFacetLinks(field, values, true) })
-            ] }, field)) })
+                },
+                `chip-${field}`
+              )) }),
+              activeFacets.length === 1 && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("nav", { "aria-label": `${humanize(activeFacets[0][0])} filters`, children: /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "py-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "px-1 pb-2 font-medium text-sm", children: humanize(activeFacets[0][0]) }),
+                renderFacetItems(activeFacets[0][0], activeFacets[0][1])
+              ] }) }),
+              activeFacets.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "flex flex-col divide-y divide-neutral-soft", children: activeFacets.map(([field, values]) => {
+                const isOpen = !collapsedCategories[field];
+                return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
+                  "div",
+                  {
+                    className: "py-2 first:pt-0 last:pb-0",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => toggleCategory(field),
+                          className: "flex w-full cursor-pointer items-center justify-between rounded-md px-1.5 py-1.5 text-sm font-semibold transition-colors duration-150 hover:bg-neutral-weak focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary-base",
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { children: humanize(field) }),
+                            /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+                              ChevronDownIcon,
+                              {
+                                className: `h-4 w-4 transition-transform duration-200 ease-out ${isOpen ? "rotate-180" : ""}`
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      isOpen && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "pt-1", children: renderFacetItems(field, values) })
+                    ]
+                  },
+                  field
+                );
+              }) })
+            ] })
           ]
         }
       );
@@ -9420,7 +9520,7 @@ var DivContainer = async (props) => {
               renderedContainer,
               paginationControl
             ] }),
-            dataBindingProperties?.showFacets && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("aside", { className: " lg:sticky lg:top-[90px] lg:self-start", children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+            dataBindingProperties?.showFacets && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("aside", { children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
               DataBindingControls2,
               {
                 mode: "facets",

package/dist/index.mjs

@@ -2420,7 +2420,7 @@ var GoogleMapNode_default = GoogleMapNode;
 // src/components/pageRenderingEngine/nodes/DivContainer.tsx
 import { jsx as jsx37, jsxs as jsxs15 } from "react/jsx-runtime";
 var Pagination = dynamic13(() => import("./Pagination-STOHS3LO.mjs"), { ssr: true });
-var DataBindingControls = dynamic13(() => import("./DataBindingControls-SLNZLI3I.mjs"), {
+var DataBindingControls = dynamic13(() => import("./DataBindingControls-5H5K5GVR.mjs"), {
   ssr: true
 });
 var Slider = dynamic13(() => import("./Slider-42T6THEQ.mjs"), {
@@ -2961,7 +2961,7 @@ var DivContainer = async (props) => {
               renderedContainer,
               paginationControl
             ] }),
-            dataBindingProperties?.showFacets && /* @__PURE__ */ jsx37("aside", { className: " lg:sticky lg:top-[90px] lg:self-start", children: /* @__PURE__ */ jsx37(
+            dataBindingProperties?.showFacets && /* @__PURE__ */ jsx37("aside", { children: /* @__PURE__ */ jsx37(
               DataBindingControls,
               {
                 mode: "facets",