@clyrex-digital/clyrex-controls-dev 0.8.1-dev.20260818060820 → 0.8.1-dev.20260824072352

package/dist/DataBindingControls-QZ7ES2AS.mjs

@@ -0,0 +1,205 @@
+"use client";
+
+"use client";
+import {
+  InputControl_default
+} from "./chunk-GKI42H4B.mjs";
+import {
+  InputControlType_default
+} from "./chunk-E4VOFO5Q.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 humanize = (value) => value.replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/[_-]+/g, " ").trim();
+var escapeODataString = (value) => value.replace(/'/g, "''");
+var normalizeSortOption = (option) => {
+  const direction = option.direction.trim();
+  return {
+    label: option.title || humanize(option.name),
+    value: [option.name, direction].filter(Boolean).join(" ")
+  };
+};
+var DUMMY_FACETS = {
+  CategoryTitle: [
+    { value: "Career Readiness", count: 2 },
+    { value: "Student Learning", count: 2 }
+  ],
+  Author: [
+    { value: "John Smith", count: 2 },
+    { value: "Sarah Jones", count: 1 },
+    { value: "Emily Brown", count: 1 }
+  ]
+};
+var DUMMY_SORT_OPTIONS = [
+  { name: "createdDate", title: "Newest First", direction: "desc" },
+  { name: "createdDate", title: "Oldest First", direction: "asc" },
+  { name: "title", title: "Title A-Z", direction: "asc" },
+  { name: "title", title: "Title Z-A", direction: "desc" }
+];
+var DataBindingControls = ({
+  path,
+  query,
+  facets,
+  sortOptions,
+  showFacets,
+  showSortOptions,
+  showSearchBar,
+  mode = "toolbar"
+}) => {
+  const router = useRouter();
+  const apiFacetGroups = Object.entries(facets ?? {}).filter(
+    ([, values]) => Array.isArray(values) && values.length > 0
+  );
+  const facetGroups = apiFacetGroups.length > 0 ? apiFacetGroups : Object.entries(DUMMY_FACETS);
+  const apiSortOptions = (sortOptions ?? []).filter(
+    (option) => option?.name && option?.direction
+  );
+  const resolvedSortOptions = apiSortOptions.length > 0 ? apiSortOptions : DUMMY_SORT_OPTIONS;
+  const normalizedSortOptions = resolvedSortOptions.map(normalizeSortOption).filter((option) => option.value);
+  const currentFilter = query?.["$filter"] ?? query?.filter ?? "";
+  const currentSort = query?.["$orderby"] ?? query?.orderBy ?? "";
+  const currentSearch = query?.searchTerm ?? query?.searchText ?? "";
+  const [searchText, setSearchText] = useState(currentSearch);
+  const lastNavigationUrl = useRef(null);
+  useEffect(() => {
+    setSearchText(currentSearch);
+  }, [currentSearch]);
+  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 = params.toString();
+      return queryString ? `${path}?${queryString}` : path;
+    },
+    [path, query]
+  );
+  const getFacetUrl = (field, value) => getQueryUrl({
+    $filter: value ? `${field} eq '${escapeODataString(value)}'` : 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]
+  );
+  useEffect(() => {
+    const trimmedSearchText = searchText.trim();
+    if (trimmedSearchText === currentSearch.trim()) {
+      return;
+    }
+    const timeout = window.setTimeout(() => {
+      navigateWithoutReload(
+        getQueryUrl({
+          searchTerm: trimmedSearchText || void 0,
+          searchText: void 0
+        })
+      );
+    }, 500);
+    return () => window.clearTimeout(timeout);
+  }, [currentSearch, getQueryUrl, navigateWithoutReload, searchText]);
+  const hasFacetControls = showFacets && facetGroups.length > 0;
+  const hasSortControls = showSortOptions && normalizedSortOptions.length > 0;
+  const shouldShowToolbar = mode === "toolbar" && (showSearchBar || hasSortControls);
+  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-1" : "flex flex-wrap gap-2", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => navigateWithoutReload(getFacetUrl(field)),
+        "aria-pressed": !currentFilter,
+        className: `px-3 py-2 text-left text-sm ${stacked ? "w-full" : "border"} ${currentFilter ? "" : "bg-primary-base font-semibold"}`,
+        children: "All"
+      }
+    ),
+    values.map((facet) => {
+      const filter = `${field} eq '${escapeODataString(facet.value)}'`;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => navigateWithoutReload(getFacetUrl(field, facet.value)),
+          "aria-pressed": currentFilter === filter,
+          className: `px-3 py-2 text-left text-sm ${stacked ? "w-full" : "border"} ${currentFilter === filter ? "bg-primary-base font-semibold" : ""}`,
+          children: [
+            facet.value,
+            " (",
+            facet.count,
+            ")"
+          ]
+        },
+        `${field}-${facet.value}`
+      );
+    })
+  ] });
+  return /* @__PURE__ */ jsxs("div", { className: mode === "toolbar" ? "mb-6" : "flex flex-col gap-2", children: [
+    shouldShowToolbar && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 md:flex-row md:items-center md:justify-between", children: [
+      showSearchBar && /* @__PURE__ */ jsx("div", { className: "w-full max-w-xl", children: /* @__PURE__ */ jsx(
+        InputControl_default,
+        {
+          name: "searchText",
+          controlType: InputControlType_default.lineTextInput,
+          value: searchText,
+          callback: (updatedValues) => setSearchText(updatedValues.value),
+          attributes: { placeholder: "Search" },
+          inputClasses: "!mt-0"
+        }
+      ) }),
+      hasSortControls && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
+        /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Sort by" }),
+        /* @__PURE__ */ jsx(
+          InputControl_default,
+          {
+            name: "sortOptions",
+            controlType: InputControlType_default.select,
+            value: currentSort,
+            dataset: normalizedSortOptions,
+            dataKeyFieldName: "value",
+            dataTextFieldName: "label",
+            callback: (updatedValues) => navigateWithoutReload(
+              getQueryUrl({
+                $orderby: updatedValues.value || void 0,
+                orderBy: void 0
+              })
+            ),
+            attributes: { placeholder: "Default" },
+            inputClasses: "!mt-0 min-w-44"
+          }
+        )
+      ] })
+    ] }),
+    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 gap-2", children: facetGroups.map(([field, values]) => /* @__PURE__ */ jsxs("details", { className: "border-b", open: true, children: [
+      /* @__PURE__ */ jsx("summary", { className: "cursor-pointer font-semibold", children: humanize(field) }),
+      /* @__PURE__ */ jsx("div", { className: "p-2", children: renderFacetLinks(field, values, true) })
+    ] }, field)) })
+  ] });
+};
+var DataBindingControls_default = DataBindingControls;
+export {
+  DataBindingControls_default as default
+};

package/dist/DataBindingControls-XCAIDMDC.mjs

@@ -0,0 +1,209 @@
+"use client";
+import {
+  InputControlType_default
+} from "./chunk-4R7F7LBL.mjs";
+
+// src/components/pageRenderingEngine/nodes/DataBindingControls.tsx
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useRouter } from "next/navigation";
+
+// src/components/controls/edit/InputControl.tsx
+import dynamic from "next/dynamic";
+var InputControl = dynamic(() => import("./InputControlClient-AORN4DRF.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 normalizeSortOption = (option) => {
+  const direction = option.direction.trim();
+  return {
+    label: option.title || humanize(option.name),
+    value: [option.name, direction].filter(Boolean).join(" ")
+  };
+};
+var DUMMY_FACETS = {
+  CategoryTitle: [
+    { value: "Career Readiness", count: 2 },
+    { value: "Student Learning", count: 2 }
+  ],
+  Author: [
+    { value: "John Smith", count: 2 },
+    { value: "Sarah Jones", count: 1 },
+    { value: "Emily Brown", count: 1 }
+  ]
+};
+var DUMMY_SORT_OPTIONS = [
+  { name: "createdDate", title: "Newest First", direction: "desc" },
+  { name: "createdDate", title: "Oldest First", direction: "asc" },
+  { name: "title", title: "Title A-Z", direction: "asc" },
+  { name: "title", title: "Title Z-A", direction: "desc" }
+];
+var DataBindingControls = ({
+  path,
+  query,
+  facets,
+  sortOptions,
+  showFacets,
+  showSortOptions,
+  showSearchBar,
+  mode = "toolbar"
+}) => {
+  const router = useRouter();
+  const apiFacetGroups = Object.entries(facets ?? {}).filter(
+    ([, values]) => Array.isArray(values) && values.length > 0
+  );
+  const facetGroups = apiFacetGroups.length > 0 ? apiFacetGroups : Object.entries(DUMMY_FACETS);
+  const apiSortOptions = (sortOptions ?? []).filter(
+    (option) => option?.name && option?.direction
+  );
+  const resolvedSortOptions = apiSortOptions.length > 0 ? apiSortOptions : DUMMY_SORT_OPTIONS;
+  const normalizedSortOptions = resolvedSortOptions.map(normalizeSortOption).filter((option) => option.value);
+  const currentFilter = query?.["$filter"] ?? query?.filter ?? "";
+  const currentSort = query?.["$orderby"] ?? query?.orderBy ?? "";
+  const currentSearch = query?.searchTerm ?? query?.searchText ?? "";
+  const [searchText, setSearchText] = useState(currentSearch);
+  const lastNavigationUrl = useRef(null);
+  useEffect(() => {
+    setSearchText(currentSearch);
+  }, [currentSearch]);
+  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 = params.toString();
+      return queryString ? `${path}?${queryString}` : path;
+    },
+    [path, query]
+  );
+  const getFacetUrl = (field, value) => getQueryUrl({
+    $filter: value ? `${field} eq '${escapeODataString(value)}'` : 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]
+  );
+  useEffect(() => {
+    const trimmedSearchText = searchText.trim();
+    if (trimmedSearchText === currentSearch.trim()) {
+      return;
+    }
+    const timeout = window.setTimeout(() => {
+      navigateWithoutReload(
+        getQueryUrl({
+          searchTerm: trimmedSearchText || void 0,
+          searchText: void 0
+        })
+      );
+    }, 500);
+    return () => window.clearTimeout(timeout);
+  }, [currentSearch, getQueryUrl, navigateWithoutReload, searchText]);
+  const hasFacetControls = showFacets && facetGroups.length > 0;
+  const hasSortControls = showSortOptions && normalizedSortOptions.length > 0;
+  const shouldShowToolbar = mode === "toolbar" && (showSearchBar || hasSortControls);
+  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-1" : "flex flex-wrap gap-2", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => navigateWithoutReload(getFacetUrl(field)),
+        "aria-pressed": !currentFilter,
+        className: `px-3 py-2 text-left text-sm ${stacked ? "w-full" : "border"} ${currentFilter ? "" : "bg-primary-base font-semibold"}`,
+        children: "All"
+      }
+    ),
+    values.map((facet) => {
+      const filter = `${field} eq '${escapeODataString(facet.value)}'`;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => navigateWithoutReload(getFacetUrl(field, facet.value)),
+          "aria-pressed": currentFilter === filter,
+          className: `px-3 py-2 text-left text-sm ${stacked ? "w-full" : "border"} ${currentFilter === filter ? "bg-primary-base font-semibold" : ""}`,
+          children: [
+            facet.value,
+            " (",
+            facet.count,
+            ")"
+          ]
+        },
+        `${field}-${facet.value}`
+      );
+    })
+  ] });
+  return /* @__PURE__ */ jsxs("div", { className: mode === "toolbar" ? "mb-6" : "flex flex-col gap-2", children: [
+    shouldShowToolbar && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 md:flex-row md:items-center md:justify-between", children: [
+      showSearchBar && /* @__PURE__ */ jsx("div", { className: "w-full max-w-xl", children: /* @__PURE__ */ jsx(
+        InputControl_default,
+        {
+          name: "searchText",
+          controlType: InputControlType_default.lineTextInput,
+          value: searchText,
+          callback: (updatedValues) => setSearchText(updatedValues.value),
+          attributes: { placeholder: "Search" },
+          inputClasses: "!mt-0"
+        }
+      ) }),
+      hasSortControls && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
+        /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Sort by" }),
+        /* @__PURE__ */ jsx(
+          InputControl_default,
+          {
+            name: "sortOptions",
+            controlType: InputControlType_default.select,
+            value: currentSort,
+            dataset: normalizedSortOptions,
+            dataKeyFieldName: "value",
+            dataTextFieldName: "label",
+            callback: (updatedValues) => navigateWithoutReload(
+              getQueryUrl({
+                $orderby: updatedValues.value || void 0,
+                orderBy: void 0
+              })
+            ),
+            attributes: { placeholder: "Default" },
+            inputClasses: "!mt-0 min-w-44"
+          }
+        )
+      ] })
+    ] }),
+    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 gap-2", children: facetGroups.map(([field, values]) => /* @__PURE__ */ jsxs("details", { className: "border-b", open: true, children: [
+      /* @__PURE__ */ jsx("summary", { className: "cursor-pointer font-semibold", children: humanize(field) }),
+      /* @__PURE__ */ jsx("div", { className: "p-2", children: renderFacetLinks(field, values, true) })
+    ] }, field)) })
+  ] });
+};
+var DataBindingControls_default = DataBindingControls;
+export {
+  DataBindingControls_default as default
+};

package/dist/{InputControlClient-XR37ZIQ2.mjs → InputControlClient-4M2BZXQO.mjs}

@@ -21,12 +21,14 @@ import {
   Select_default,
   Switcher_default,
   TimeInput_default
-} from "./chunk-65QPOTZ4.mjs";
+} from "./chunk-GJOJX2O3.mjs";
 import {
   Hyperlink,
-  Icon_default,
+  Icon_default
+} from "./chunk-GCG4OYDJ.mjs";
+import {
   InputControlType_default
-} from "./chunk-YDPISYMP.mjs";
+} from "./chunk-E4VOFO5Q.mjs";
 import {
   Button_default,
   ClientButton_default