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

package/dist/DataBindingControls-25UC5W3R.mjs

@@ -0,0 +1,502 @@
+"use client";
+import {
+  InputControlType_default
+} from "./chunk-HRDHAIZF.mjs";
+import {
+  Button_default
+} from "./chunk-4WMSS6CE.mjs";
+import "./chunk-56HSDML5.mjs";
+
+// src/components/pageRenderingEngine/nodes/DataBindingControls.tsx
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+
+// src/components/controls/edit/InputControl.tsx
+import dynamic from "next/dynamic";
+var InputControl = dynamic(() => import("./InputControlClient-NHXG4QBU.mjs"), {
+  ssr: false
+});
+var InputControl_default = InputControl;
+
+// src/components/pageRenderingEngine/nodes/DataBindingControls.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+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();
+  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;
+};
+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 FilterSlidersIcon = ({ 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: "M3 4h18M3 12h18M3 20h18" }),
+      /* @__PURE__ */ jsx("circle", { cx: "8", cy: "4", r: "2", fill: "currentColor" }),
+      /* @__PURE__ */ jsx("circle", { cx: "16", cy: "12", r: "2", fill: "currentColor" }),
+      /* @__PURE__ */ jsx("circle", { cx: "10", cy: "20", r: "2", fill: "currentColor" })
+    ]
+  }
+);
+var ChevronDownIcon = ({ className = "" }) => /* @__PURE__ */ jsx(
+  "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: "m19 9-7 7-7-7" })
+  }
+);
+var CheckIcon = ({ className = "" }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    "aria-hidden": "true",
+    className,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: "2.5",
+    children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" })
+  }
+);
+var CloseIcon = ({ className = "" }) => /* @__PURE__ */ jsx(
+  "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: "M6 18L18 6M6 6l12 12" })
+  }
+);
+var normalizeSortOption = (option) => {
+  const direction = option.direction.trim();
+  const title = option.title || humanize(option.name);
+  return {
+    label: title,
+    value: [option.name, direction].filter(Boolean).join(" ")
+  };
+};
+var DataBindingControls = ({
+  path,
+  query,
+  facets,
+  sortOptions,
+  showFacets,
+  showSortOptions,
+  showSearchBar,
+  mode = "toolbar"
+}) => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [collapsedCategories, setCollapsedCategories] = useState({});
+  const [isSortOpen, setIsSortOpen] = useState(false);
+  const sortDropdownRef = useRef(null);
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (sortDropdownRef.current && !sortDropdownRef.current.contains(event.target)) {
+        setIsSortOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  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 [searchText, setSearchText] = useState(currentSearch);
+  useEffect(() => {
+    setSearchText(currentSearch);
+  }, [currentSearch]);
+  const selectedFacetValues = useMemo(
+    () => parseFacetSelections(currentFilter),
+    [currentFilter]
+  );
+  const activeFacets = 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 selectedSortOption = normalizedSortOptions.find((opt) => opt.value === currentSort) || normalizedSortOptions[0];
+  const selectedSortLabel = selectedSortOption?.label || "";
+  const getQueryUrl = useCallback(
+    (updates) => {
+      const initialParams = searchParams ? searchParams.toString() : "";
+      const params = new URLSearchParams(initialParams || 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, searchParams]
+  );
+  const navigateWithoutReload = useCallback(
+    (url) => {
+      if (typeof window !== "undefined") {
+        const targetUrl = new URL(url, window.location.origin);
+        if (targetUrl.pathname === window.location.pathname && targetUrl.search === window.location.search) {
+          return;
+        }
+      }
+      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 = 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 () => {
+    navigateWithoutReload(
+      getQueryUrl({
+        $filter: void 0,
+        filter: void 0,
+        $orderby: void 0,
+        orderBy: void 0
+      })
+    );
+    return { isSuccessful: true };
+  }, [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 renderFacetItems = (field, values) => /* @__PURE__ */ 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__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        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__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2.5", children: [
+            /* @__PURE__ */ 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__ */ jsx(CheckIcon, { className: "h-3 w-3" })
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "leading-snug break-words", children: facet.value })
+          ] }),
+          /* @__PURE__ */ 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__ */ jsxs(
+    "div",
+    {
+      className: mode === "toolbar" ? "my-6" : "flex flex-col rounded-md border  bg-default p-3.5 shadow-sm",
+      children: [
+        shouldShowToolbar && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between", children: [
+          showSearchBar && /* @__PURE__ */ jsxs(
+            "form",
+            {
+              role: "search",
+              className: "flex w-full items-center gap-2 sm:flex-row md:min-w-0 md:flex-1",
+              onSubmit: (event) => {
+                event.preventDefault();
+                void handleSearch();
+              },
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "relative min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsx(SearchIcon, { className: "pointer-events-none absolute left-3.5 top-1/2 z-10 h-4 w-4 -translate-y-1/2 opacity-60" }),
+                  /* @__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 !h-10 !rounded-md !border-neutral-soft !bg-default !py-2 !pl-10 !pr-4 !shadow-sm !text-sm focus:!border-primary-base focus:!ring-primary-base"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs(
+                  Button_default,
+                  {
+                    ButtonType: "Primary" /* Solid */,
+                    onClick: handleSearch,
+                    className: "!h-10 !rounded-md !px-5 !py-0 flex items-center justify-center gap-1.5 shrink-0",
+                    children: [
+                      /* @__PURE__ */ jsx(SearchIcon, { className: "h-4 w-4" }),
+                      /* @__PURE__ */ jsx("span", { children: "Search" })
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          hasSortControls && /* @__PURE__ */ jsxs("div", { className: "relative shrink-0", ref: sortDropdownRef, children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => setIsSortOpen((prev) => !prev),
+                "aria-expanded": isSortOpen,
+                className: "inline-flex h-10 items-center justify-between gap-2.5 rounded-md border bg-default px-3.5 text-sm font-normal shadow-sm transition-all hover:bg-neutral-weak focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-base cursor-pointer whitespace-nowrap",
+                children: [
+                  /* @__PURE__ */ jsxs("span", { className: "whitespace-nowrap", children: [
+                    /* @__PURE__ */ jsx("span", { className: "opacity-70", children: "Sort by: " }),
+                    /* @__PURE__ */ jsx("span", { className: "font-semibold", children: selectedSortLabel })
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    ChevronDownIcon,
+                    {
+                      className: `h-4 w-4 shrink-0 transition-transform duration-200 ${isSortOpen ? "rotate-180" : ""}`
+                    }
+                  )
+                ]
+              }
+            ),
+            isSortOpen && /* @__PURE__ */ jsx("div", { className: "absolute right-0 z-50 mt-1.5 w-max min-w-full max-h-80 overflow-y-auto rounded-lg border border-neutral-soft bg-default p-1 shadow-lg", children: normalizedSortOptions.map((option) => {
+              const isSelected = currentSort ? option.value === currentSort : option.value === normalizedSortOptions[0]?.value;
+              return /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    setIsSortOpen(false);
+                    navigateWithoutReload(
+                      getQueryUrl({
+                        $orderby: option.value || void 0,
+                        orderBy: void 0
+                      })
+                    );
+                  },
+                  className: `flex w-full items-center justify-between gap-4 rounded-md px-3 py-1.5 text-left text-sm transition-colors cursor-pointer whitespace-nowrap ${isSelected ? "bg-primary-base font-semibold" : "hover:bg-neutral-soft font-normal"}`,
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap", children: option.label }),
+                    isSelected && /* @__PURE__ */ jsx(CheckIcon, { className: "h-4 w-4 shrink-0" })
+                  ]
+                },
+                option.value
+              );
+            }) })
+          ] })
+        ] }),
+        shouldShowFacets && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b  pb-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(FilterSlidersIcon, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold tracking-tight", children: "Filters" }),
+              selectedFacetCount > 0 && /* @__PURE__ */ 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__ */ 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__ */ jsx(ResetIcon, { className: "h-3.5 w-3.5 transition-transform duration-200 group-hover:-rotate-45" }),
+                  /* @__PURE__ */ jsx("span", { children: "Clear all" })
+                ]
+              }
+            )
+          ] }),
+          selectedFacetCount > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5 pb-2.5 border-b ", children: Array.from(selectedFacetValues.entries()).map(([field, value]) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              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__ */ jsx("span", { className: "font-medium truncate max-w-[150px]", children: value }),
+                /* @__PURE__ */ jsx(CloseIcon, { className: "h-3.5 w-3.5 shrink-0 opacity-60 group-hover:opacity-100" })
+              ]
+            },
+            `chip-${field}`
+          )) }),
+          activeFacets.length === 1 && /* @__PURE__ */ jsx("nav", { "aria-label": `${humanize(activeFacets[0][0])} filters`, children: /* @__PURE__ */ jsxs("div", { className: "py-1", children: [
+            /* @__PURE__ */ 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__ */ jsx("div", { className: "flex flex-col divide-y divide-neutral-soft", children: activeFacets.map(([field, values]) => {
+            const isOpen = !collapsedCategories[field];
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "py-2 first:pt-0 last:pb-0",
+                children: [
+                  /* @__PURE__ */ 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__ */ jsx("span", { children: humanize(field) }),
+                        /* @__PURE__ */ jsx(
+                          ChevronDownIcon,
+                          {
+                            className: `h-4 w-4 transition-transform duration-200 ease-out ${isOpen ? "rotate-180" : ""}`
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  isOpen && /* @__PURE__ */ jsx("div", { className: "pt-1", children: renderFacetItems(field, values) })
+                ]
+              },
+              field
+            );
+          }) })
+        ] })
+      ]
+    }
+  );
+};
+var DataBindingControls_default = DataBindingControls;
+export {
+  DataBindingControls_default as default
+};