@clyrex-digital/clyrex-controls-dev 0.8.1-dev.20260923102653 → 0.8.1-dev.20260923125229

package/dist/DataBindingControls-SLNZLI3I.mjs

@@ -0,0 +1,377 @@
+"use client";
+
+"use client";
+import {
+  InputControl_default
+} from "./chunk-XDTWUEVR.mjs";
+import {
+  Button_default
+} from "./chunk-LSKD5U3S.mjs";
+import {
+  InputControlType_default
+} from "./chunk-F4DNLPFN.mjs";
+import "./chunk-IMNQO57B.mjs";
+
+// src/components/pageRenderingEngine/nodes/DataBindingControls.tsx
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useRouter } from "next/navigation";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ACTIVE_QUERY_CONTROLS_EVENT = "data-binding-active-query-controls";
+var humanize = (value) => value.replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/[_-]+/g, " ").trim();
+var escapeODataString = (value) => value.replace(/'/g, "''");
+var 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, "'")
+      );
+    }
+  }
+  return selections;
+};
+var buildFacetFilter = (selections) => Array.from(selections.entries()).map(([field, value]) => `${field} eq '${escapeODataString(value)}'`).join(" and ");
+var parseODataSearch = (value) => {
+  if (!value) return "";
+  const trimmedValue = value.trim();
+  if (trimmedValue.startsWith("'") && trimmedValue.endsWith("'")) {
+    return trimmedValue.slice(1, -1).replace(/''/g, "'");
+  }
+  return trimmedValue;
+};
+var SearchIcon = ({ className = "" }) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    "aria-hidden": "true",
+    className,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    children: [
+      /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "7" }),
+      /* @__PURE__ */ jsx("path", { strokeLinecap: "round", d: "m20 20-4-4" })
+    ]
+  }
+);
+var ResetIcon = ({ className = "" }) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    "aria-hidden": "true",
+    className,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    children: [
+      /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4 4v6h6" }),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          d: "M5.5 15a8 8 0 1 0 .6-7.8L4 10"
+        }
+      )
+    ]
+  }
+);
+var normalizeSortOption = (option) => {
+  const direction = option.direction.trim();
+  return {
+    label: option.title || humanize(option.name),
+    value: [option.name, direction].filter(Boolean).join(" ")
+  };
+};
+var DataBindingControls = ({
+  path,
+  query,
+  facets,
+  sortOptions,
+  showFacets,
+  showSortOptions,
+  showSearchBar,
+  mode = "toolbar"
+}) => {
+  const router = useRouter();
+  const facetGroups = Object.entries(facets ?? {}).filter(
+    ([, values]) => Array.isArray(values) && values.length > 0
+  );
+  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] = useState(queryFilter);
+  const [currentSort, setCurrentSort] = useState(querySort);
+  const selectedFacetValues = parseFacetSelections(currentFilter);
+  const currentSearch = parseODataSearch(query?.["$search"]);
+  const [searchText, setSearchText] = useState(currentSearch);
+  const lastNavigationUrl = useRef(null);
+  useEffect(() => {
+    setSearchText(currentSearch);
+  }, [currentSearch]);
+  useEffect(() => {
+    setCurrentFilter(queryFilter);
+  }, [queryFilter]);
+  useEffect(() => {
+    setCurrentSort(querySort);
+  }, [querySort]);
+  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 = useCallback(
+    (updates) => {
+      window.dispatchEvent(
+        new CustomEvent(ACTIVE_QUERY_CONTROLS_EVENT, {
+          detail: updates
+        })
+      );
+    },
+    []
+  );
+  const getQueryUrl = useCallback(
+    (updates) => {
+      const params = new URLSearchParams(query ?? {});
+      Object.entries(updates).forEach(([key, value]) => {
+        if (value) {
+          params.set(key, value);
+        } else {
+          params.delete(key);
+        }
+      });
+      params.delete("$skip");
+      params.delete("skip");
+      const queryString = Array.from(params.entries()).map(
+        ([key, value]) => key === "$filter" || key === "filter" ? `${key}=${encodeURIComponent(value)}` : `${key}=${value}`
+      ).join("&");
+      return queryString ? `${path}?${queryString}` : path;
+    },
+    [path, query]
+  );
+  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 = 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 handleSearch = useCallback(async () => {
+    const trimmedSearchText = searchText.trim();
+    if (trimmedSearchText === currentSearch.trim()) {
+      return { isSuccessful: true };
+    }
+    navigateWithoutReload(
+      getQueryUrl({
+        "$search": trimmedSearchText || void 0
+      })
+    );
+    return { isSuccessful: true };
+  }, [currentSearch, getQueryUrl, navigateWithoutReload, searchText]);
+  const handleClearAll = useCallback(async () => {
+    syncActiveQueryControls({ filter: "", sort: "" });
+    navigateWithoutReload(
+      getQueryUrl({
+        $filter: void 0,
+        filter: void 0,
+        $orderby: void 0,
+        orderBy: void 0
+      })
+    );
+    return { isSuccessful: true };
+  }, [getQueryUrl, navigateWithoutReload, syncActiveQueryControls]);
+  const hasFacetControls = showFacets && facetGroups.length > 0;
+  const hasSortControls = showSortOptions && normalizedSortOptions.length > 0;
+  const hasActiveFiltersOrSort = Boolean(
+    currentFilter.trim() || currentSort.trim()
+  );
+  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__ */ jsxs("div", { className: stacked ? "flex flex-col gap-0.5" : "flex flex-wrap gap-1.5", children: [
+    /* @__PURE__ */ jsx(
+      "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__ */ 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}`
+      );
+    })
+  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: mode === "toolbar" ? "my-6" : "flex flex-col gap-2 border bg-default rounded-[5px] p-3",
+      children: [
+        shouldShowToolbar && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 md:flex-row md:items-center md:justify-between", children: [
+          showSearchBar && /* @__PURE__ */ 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",
+              onSubmit: (event) => {
+                event.preventDefault();
+                void handleSearch();
+              },
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "relative bg-default rounded-xl min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsx(SearchIcon, { className: "pointer-events-none absolute left-4 top-1/2 z-10 h-5 w-5 -translate-y-1/2" }),
+                  /* @__PURE__ */ jsx(
+                    InputControl_default,
+                    {
+                      name: "searchText",
+                      controlType: InputControlType_default.lineTextInput,
+                      value: searchText,
+                      callback: (updatedValues) => setSearchText(updatedValues.value),
+                      attributes: {
+                        placeholder: "Search discussions, topics, or keywords..."
+                      },
+                      inputClasses: "!mt-0 !rounded-xl !py-3 !pl-11 !pr-4 !shadow-sm"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs(
+                  Button_default,
+                  {
+                    ButtonType: "Primary" /* Solid */,
+                    onClick: handleSearch,
+                    className: "!rounded-xl !px-6 !py-3 sm:self-stretch",
+                    children: [
+                      /* @__PURE__ */ jsx(SearchIcon, { className: "h-5 w-5" }),
+                      /* @__PURE__ */ jsx("span", { children: "Search" })
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          hasSortControls && /* @__PURE__ */ 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: [
+            /* @__PURE__ */ jsx(
+              "label",
+              {
+                htmlFor: "sortOptions",
+                className: "shrink-0 whitespace-nowrap font-medium",
+                children: "Sort by"
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 rounded-xl bg-default md:min-w-48", children: /* @__PURE__ */ jsx(
+              InputControl_default,
+              {
+                name: "sortOptions",
+                controlType: InputControlType_default.select,
+                value: currentSort,
+                dataset: normalizedSortOptions,
+                dataKeyFieldName: "value",
+                dataTextFieldName: "label",
+                callback: (updatedValues) => {
+                  const updatedSort = updatedValues.value || "";
+                  syncActiveQueryControls({ sort: updatedSort });
+                  navigateWithoutReload(
+                    getQueryUrl({
+                      $orderby: updatedSort || void 0,
+                      orderBy: void 0
+                    })
+                  );
+                },
+                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"
+              }
+            ) })
+          ] })
+        ] }),
+        shouldShowFacets && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-b pb-2", children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold", children: "Filters" }),
+          hasActiveFiltersOrSort && /* @__PURE__ */ 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",
+              children: [
+                /* @__PURE__ */ jsx(ResetIcon, { className: "h-3.5 w-3.5 transition-transform duration-200 group-hover:-rotate-45" }),
+                /* @__PURE__ */ jsx("span", { children: "Clear all" })
+              ]
+            }
+          )
+        ] }),
+        shouldShowFacets && facetGroups.length === 1 && /* @__PURE__ */ jsx("nav", { "aria-label": `${humanize(facetGroups[0][0])} filters`, children: renderFacetLinks(facetGroups[0][0], facetGroups[0][1]) }),
+        shouldShowFacets && facetGroups.length > 1 && /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: facetGroups.map(([field, values]) => /* @__PURE__ */ jsxs("details", { className: "border-b py-1 last:border-b-0", open: true, children: [
+          /* @__PURE__ */ 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__ */ jsx("div", { className: "px-1 pb-1 pt-0.5", children: renderFacetLinks(field, values, true) })
+        ] }, field)) })
+      ]
+    }
+  );
+};
+var DataBindingControls_default = DataBindingControls;
+export {
+  DataBindingControls_default as default
+};