@clyrex-digital/clyrex-controls-dev 0.8.1-dev.20260914095913 → 0.8.1-dev.20260916063140

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/{DataBindingControls-TF7XLJ5C.mjs → DataBindingControls-2CSX5L5I.mjs} +78 -24
  2. package/dist/{DataBindingControls-SKC472JJ.mjs → DataBindingControls-F72KPWHV.mjs} +77 -23
  3. package/dist/{chunk-YRNDRPUE.mjs → chunk-6GVLDYCQ.mjs} +1 -1
  4. package/dist/index.js +76 -24
  5. package/dist/index.mjs +8 -8
  6. package/dist/server.js +76 -24
  7. package/dist/server.mjs +1 -1
  8. package/package.json +1 -1
  9. package/dist/{InputControlClient-BC66BGHI.mjs → InputControlClient-DZGLI4DU.mjs} +5 -5
  10. package/dist/{Pagination-CQKMBXXJ.mjs → Pagination-PGAK7KDA.mjs} +1 -1
package/dist/{DataBindingControls-TF7XLJ5C.mjs → DataBindingControls-2CSX5L5I.mjs} RENAMED
@@ -3,10 +3,14 @@
3
3
  "use client";
4
4
  import {
5
5
  InputControl_default
6
- } from "./chunk-YRNDRPUE.mjs";
6
+ } from "./chunk-6GVLDYCQ.mjs";
7
+ import {
8
+ Button_default
9
+ } from "./chunk-LSKD5U3S.mjs";
7
10
  import {
8
11
  InputControlType_default
9
12
  } from "./chunk-DTWPZPSX.mjs";
13
+ import "./chunk-IMNQO57B.mjs";
10
14
 
11
15
  // src/components/pageRenderingEngine/nodes/DataBindingControls.tsx
12
16
  import { useCallback, useEffect, useRef, useState } from "react";
@@ -40,6 +44,21 @@ var parseODataSearch = (value) => {
40
44
  }
41
45
  return trimmedValue;
42
46
  };
47
+ var SearchIcon = ({ className = "" }) => /* @__PURE__ */ jsxs(
48
+ "svg",
49
+ {
50
+ "aria-hidden": "true",
51
+ className,
52
+ fill: "none",
53
+ viewBox: "0 0 24 24",
54
+ stroke: "currentColor",
55
+ strokeWidth: "2",
56
+ children: [
57
+ /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "7" }),
58
+ /* @__PURE__ */ jsx("path", { strokeLinecap: "round", d: "m20 20-4-4" })
59
+ ]
60
+ }
61
+ );
43
62
  var normalizeSortOption = (option) => {
44
63
  const direction = option.direction.trim();
45
64
  return {
@@ -139,19 +158,17 @@ var DataBindingControls = ({
139
158
  },
140
159
  [router]
141
160
  );
142
- useEffect(() => {
161
+ const handleSearch = useCallback(async () => {
143
162
  const trimmedSearchText = searchText.trim();
144
163
  if (trimmedSearchText === currentSearch.trim()) {
145
- return;
164
+ return { isSuccessful: true };
146
165
  }
147
- const timeout = window.setTimeout(() => {
148
- navigateWithoutReload(
149
- getQueryUrl({
150
- "$search": trimmedSearchText || void 0
151
- })
152
- );
153
- }, 500);
154
- return () => window.clearTimeout(timeout);
166
+ navigateWithoutReload(
167
+ getQueryUrl({
168
+ "$search": trimmedSearchText || void 0
169
+ })
170
+ );
171
+ return { isSuccessful: true };
155
172
  }, [currentSearch, getQueryUrl, navigateWithoutReload, searchText]);
156
173
  const hasFacetControls = showFacets && facetGroups.length > 0;
157
174
  const hasSortControls = showSortOptions && normalizedSortOptions.length > 0;
@@ -193,20 +210,57 @@ var DataBindingControls = ({
193
210
  ] });
194
211
  return /* @__PURE__ */ jsxs("div", { className: mode === "toolbar" ? "my-6" : "flex flex-col gap-2", children: [
195
212
  shouldShowToolbar && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 md:flex-row md:items-center md:justify-between", children: [
196
- showSearchBar && /* @__PURE__ */ jsx("div", { className: "w-full max-w-xl", children: /* @__PURE__ */ jsx(
197
- InputControl_default,
213
+ showSearchBar && /* @__PURE__ */ jsxs(
214
+ "form",
198
215
  {
199
- name: "searchText",
200
- controlType: InputControlType_default.lineTextInput,
201
- value: searchText,
202
- callback: (updatedValues) => setSearchText(updatedValues.value),
203
- attributes: { placeholder: "Search" },
204
- inputClasses: "!mt-0"
216
+ role: "search",
217
+ className: "flex w-full flex-col gap-3 rounded-2xl border border-info bg-info-soft p-3 sm:flex-row sm:items-center md:min-w-0 md:flex-1",
218
+ onSubmit: (event) => {
219
+ event.preventDefault();
220
+ void handleSearch();
221
+ },
222
+ children: [
223
+ /* @__PURE__ */ jsxs("div", { className: "relative bg-default rounded-xl min-w-0 flex-1", children: [
224
+ /* @__PURE__ */ jsx(SearchIcon, { className: "pointer-events-none absolute left-4 top-1/2 z-10 h-5 w-5 -translate-y-1/2" }),
225
+ /* @__PURE__ */ jsx(
226
+ InputControl_default,
227
+ {
228
+ name: "searchText",
229
+ controlType: InputControlType_default.lineTextInput,
230
+ value: searchText,
231
+ callback: (updatedValues) => setSearchText(updatedValues.value),
232
+ attributes: {
233
+ placeholder: "Search discussions, topics, or keywords..."
234
+ },
235
+ inputClasses: "!mt-0 !rounded-xl !py-3 !pl-11 !pr-4 !shadow-sm"
236
+ }
237
+ )
238
+ ] }),
239
+ /* @__PURE__ */ jsxs(
240
+ Button_default,
241
+ {
242
+ ButtonType: "Primary" /* Solid */,
243
+ onClick: handleSearch,
244
+ className: "!rounded-xl !px-6 !py-3 sm:self-stretch",
245
+ children: [
246
+ /* @__PURE__ */ jsx(SearchIcon, { className: "h-5 w-5" }),
247
+ /* @__PURE__ */ jsx("span", { children: "Search" })
248
+ ]
249
+ }
250
+ )
251
+ ]
205
252
  }
206
- ) }),
207
- hasSortControls && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
208
- /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Sort by" }),
253
+ ),
254
+ 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: [
209
255
  /* @__PURE__ */ jsx(
256
+ "label",
257
+ {
258
+ htmlFor: "sortOptions",
259
+ className: "shrink-0 whitespace-nowrap font-medium",
260
+ children: "Sort by"
261
+ }
262
+ ),
263
+ /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 rounded-xl bg-default md:min-w-48", children: /* @__PURE__ */ jsx(
210
264
  InputControl_default,
211
265
  {
212
266
  name: "sortOptions",
@@ -222,9 +276,9 @@ var DataBindingControls = ({
222
276
  })
223
277
  ),
224
278
  attributes: { placeholder: "Default" },
225
- inputClasses: "!mt-0 min-w-44"
279
+ inputClasses: "!mt-0 !rounded-xl !border-info !bg-default !px-4 !py-3 !text-body !shadow-sm focus:!border-primary focus:!ring-primary-base"
226
280
  }
227
- )
281
+ ) })
228
282
  ] })
229
283
  ] }),
230
284
  shouldShowFacets && facetGroups.length === 1 && /* @__PURE__ */ jsx("nav", { "aria-label": `${humanize(facetGroups[0][0])} filters`, children: renderFacetLinks(facetGroups[0][0], facetGroups[0][1]) }),
package/dist/{DataBindingControls-SKC472JJ.mjs → DataBindingControls-F72KPWHV.mjs} RENAMED
@@ -2,6 +2,10 @@
2
2
  import {
3
3
  InputControlType_default
4
4
  } from "./chunk-IEY342PD.mjs";
5
+ import {
6
+ Button_default
7
+ } from "./chunk-4WMSS6CE.mjs";
8
+ import "./chunk-56HSDML5.mjs";
5
9
 
6
10
  // src/components/pageRenderingEngine/nodes/DataBindingControls.tsx
7
11
  import { useCallback, useEffect, useRef, useState } from "react";
@@ -44,6 +48,21 @@ var parseODataSearch = (value) => {
44
48
  }
45
49
  return trimmedValue;
46
50
  };
51
+ var SearchIcon = ({ className = "" }) => /* @__PURE__ */ jsxs(
52
+ "svg",
53
+ {
54
+ "aria-hidden": "true",
55
+ className,
56
+ fill: "none",
57
+ viewBox: "0 0 24 24",
58
+ stroke: "currentColor",
59
+ strokeWidth: "2",
60
+ children: [
61
+ /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "7" }),
62
+ /* @__PURE__ */ jsx("path", { strokeLinecap: "round", d: "m20 20-4-4" })
63
+ ]
64
+ }
65
+ );
47
66
  var normalizeSortOption = (option) => {
48
67
  const direction = option.direction.trim();
49
68
  return {
@@ -143,19 +162,17 @@ var DataBindingControls = ({
143
162
  },
144
163
  [router]
145
164
  );
146
- useEffect(() => {
165
+ const handleSearch = useCallback(async () => {
147
166
  const trimmedSearchText = searchText.trim();
148
167
  if (trimmedSearchText === currentSearch.trim()) {
149
- return;
168
+ return { isSuccessful: true };
150
169
  }
151
- const timeout = window.setTimeout(() => {
152
- navigateWithoutReload(
153
- getQueryUrl({
154
- "$search": trimmedSearchText || void 0
155
- })
156
- );
157
- }, 500);
158
- return () => window.clearTimeout(timeout);
170
+ navigateWithoutReload(
171
+ getQueryUrl({
172
+ "$search": trimmedSearchText || void 0
173
+ })
174
+ );
175
+ return { isSuccessful: true };
159
176
  }, [currentSearch, getQueryUrl, navigateWithoutReload, searchText]);
160
177
  const hasFacetControls = showFacets && facetGroups.length > 0;
161
178
  const hasSortControls = showSortOptions && normalizedSortOptions.length > 0;
@@ -197,20 +214,57 @@ var DataBindingControls = ({
197
214
  ] });
198
215
  return /* @__PURE__ */ jsxs("div", { className: mode === "toolbar" ? "my-6" : "flex flex-col gap-2", children: [
199
216
  shouldShowToolbar && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 md:flex-row md:items-center md:justify-between", children: [
200
- showSearchBar && /* @__PURE__ */ jsx("div", { className: "w-full max-w-xl", children: /* @__PURE__ */ jsx(
201
- InputControl_default,
217
+ showSearchBar && /* @__PURE__ */ jsxs(
218
+ "form",
202
219
  {
203
- name: "searchText",
204
- controlType: InputControlType_default.lineTextInput,
205
- value: searchText,
206
- callback: (updatedValues) => setSearchText(updatedValues.value),
207
- attributes: { placeholder: "Search" },
208
- inputClasses: "!mt-0"
220
+ role: "search",
221
+ className: "flex w-full flex-col gap-3 rounded-2xl border border-info bg-info-soft p-3 sm:flex-row sm:items-center md:min-w-0 md:flex-1",
222
+ onSubmit: (event) => {
223
+ event.preventDefault();
224
+ void handleSearch();
225
+ },
226
+ children: [
227
+ /* @__PURE__ */ jsxs("div", { className: "relative bg-default rounded-xl min-w-0 flex-1", children: [
228
+ /* @__PURE__ */ jsx(SearchIcon, { className: "pointer-events-none absolute left-4 top-1/2 z-10 h-5 w-5 -translate-y-1/2" }),
229
+ /* @__PURE__ */ jsx(
230
+ InputControl_default,
231
+ {
232
+ name: "searchText",
233
+ controlType: InputControlType_default.lineTextInput,
234
+ value: searchText,
235
+ callback: (updatedValues) => setSearchText(updatedValues.value),
236
+ attributes: {
237
+ placeholder: "Search discussions, topics, or keywords..."
238
+ },
239
+ inputClasses: "!mt-0 !rounded-xl !py-3 !pl-11 !pr-4 !shadow-sm"
240
+ }
241
+ )
242
+ ] }),
243
+ /* @__PURE__ */ jsxs(
244
+ Button_default,
245
+ {
246
+ ButtonType: "Primary" /* Solid */,
247
+ onClick: handleSearch,
248
+ className: "!rounded-xl !px-6 !py-3 sm:self-stretch",
249
+ children: [
250
+ /* @__PURE__ */ jsx(SearchIcon, { className: "h-5 w-5" }),
251
+ /* @__PURE__ */ jsx("span", { children: "Search" })
252
+ ]
253
+ }
254
+ )
255
+ ]
209
256
  }
210
- ) }),
211
- hasSortControls && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
212
- /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Sort by" }),
257
+ ),
258
+ 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: [
213
259
  /* @__PURE__ */ jsx(
260
+ "label",
261
+ {
262
+ htmlFor: "sortOptions",
263
+ className: "shrink-0 whitespace-nowrap font-medium",
264
+ children: "Sort by"
265
+ }
266
+ ),
267
+ /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 rounded-xl bg-default md:min-w-48", children: /* @__PURE__ */ jsx(
214
268
  InputControl_default,
215
269
  {
216
270
  name: "sortOptions",
@@ -226,9 +280,9 @@ var DataBindingControls = ({
226
280
  })
227
281
  ),
228
282
  attributes: { placeholder: "Default" },
229
- inputClasses: "!mt-0 min-w-44"
283
+ inputClasses: "!mt-0 !rounded-xl !border-info !bg-default !px-4 !py-3 !text-body !shadow-sm focus:!border-primary focus:!ring-primary-base"
230
284
  }
231
- )
285
+ ) })
232
286
  ] })
233
287
  ] }),
234
288
  shouldShowFacets && facetGroups.length === 1 && /* @__PURE__ */ jsx("nav", { "aria-label": `${humanize(facetGroups[0][0])} filters`, children: renderFacetLinks(facetGroups[0][0], facetGroups[0][1]) }),
package/dist/{chunk-YRNDRPUE.mjs → chunk-6GVLDYCQ.mjs} RENAMED
@@ -3,7 +3,7 @@
3
3
 
4
4
  // src/components/controls/edit/InputControl.tsx
5
5
  import dynamic from "next/dynamic";
6
- var InputControl = dynamic(() => import("./InputControlClient-BC66BGHI.mjs"), {
6
+ var InputControl = dynamic(() => import("./InputControlClient-DZGLI4DU.mjs"), {
7
7
  ssr: false
8
8
  });
9
9
  var InputControl_default = InputControl;
package/dist/index.js CHANGED
@@ -5608,15 +5608,17 @@ var DataBindingControls_exports = {};
5608
5608
  __export(DataBindingControls_exports, {
5609
5609
  default: () => DataBindingControls_default
5610
5610
  });
5611
- var import_react59, import_navigation, import_jsx_runtime85, humanize, escapeODataString, parseFacetSelections, buildFacetFilter, parseODataSearch, normalizeSortOption, DUMMY_FACETS, DUMMY_SORT_OPTIONS, DataBindingControls, DataBindingControls_default;
5611
+ var import_react59, import_navigation, import_jsx_runtime85, humanize, escapeODataString, parseFacetSelections, buildFacetFilter, parseODataSearch, SearchIcon, normalizeSortOption, DUMMY_FACETS, DUMMY_SORT_OPTIONS, DataBindingControls, DataBindingControls_default;
5612
5612
  var init_DataBindingControls = __esm({
5613
5613
  "src/components/pageRenderingEngine/nodes/DataBindingControls.tsx"() {
5614
5614
  "use strict";
5615
5615
  "use client";
5616
5616
  import_react59 = require("react");
5617
5617
  import_navigation = require("next/navigation");
5618
+ init_Button();
5618
5619
  init_InputControl();
5619
5620
  init_InputControlType();
5621
+ init_StyleTypes();
5620
5622
  import_jsx_runtime85 = require("react/jsx-runtime");
5621
5623
  humanize = (value) => value.replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/[_-]+/g, " ").trim();
5622
5624
  escapeODataString = (value) => value.replace(/'/g, "''");
@@ -5646,6 +5648,21 @@ var init_DataBindingControls = __esm({
5646
5648
  }
5647
5649
  return trimmedValue;
5648
5650
  };
5651
+ SearchIcon = ({ className = "" }) => /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
5652
+ "svg",
5653
+ {
5654
+ "aria-hidden": "true",
5655
+ className,
5656
+ fill: "none",
5657
+ viewBox: "0 0 24 24",
5658
+ stroke: "currentColor",
5659
+ strokeWidth: "2",
5660
+ children: [
5661
+ /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("circle", { cx: "11", cy: "11", r: "7" }),
5662
+ /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("path", { strokeLinecap: "round", d: "m20 20-4-4" })
5663
+ ]
5664
+ }
5665
+ );
5649
5666
  normalizeSortOption = (option) => {
5650
5667
  const direction = option.direction.trim();
5651
5668
  return {
@@ -5745,19 +5762,17 @@ var init_DataBindingControls = __esm({
5745
5762
  },
5746
5763
  [router]
5747
5764
  );
5748
- (0, import_react59.useEffect)(() => {
5765
+ const handleSearch = (0, import_react59.useCallback)(async () => {
5749
5766
  const trimmedSearchText = searchText.trim();
5750
5767
  if (trimmedSearchText === currentSearch.trim()) {
5751
- return;
5768
+ return { isSuccessful: true };
5752
5769
  }
5753
- const timeout = window.setTimeout(() => {
5754
- navigateWithoutReload(
5755
- getQueryUrl({
5756
- "$search": trimmedSearchText || void 0
5757
- })
5758
- );
5759
- }, 500);
5760
- return () => window.clearTimeout(timeout);
5770
+ navigateWithoutReload(
5771
+ getQueryUrl({
5772
+ "$search": trimmedSearchText || void 0
5773
+ })
5774
+ );
5775
+ return { isSuccessful: true };
5761
5776
  }, [currentSearch, getQueryUrl, navigateWithoutReload, searchText]);
5762
5777
  const hasFacetControls = showFacets && facetGroups.length > 0;
5763
5778
  const hasSortControls = showSortOptions && normalizedSortOptions.length > 0;
@@ -5799,20 +5814,57 @@ var init_DataBindingControls = __esm({
5799
5814
  ] });
5800
5815
  return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: mode === "toolbar" ? "my-6" : "flex flex-col gap-2", children: [
5801
5816
  shouldShowToolbar && /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "flex flex-col gap-3 md:flex-row md:items-center md:justify-between", children: [
5802
- showSearchBar && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "w-full max-w-xl", children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
5803
- InputControl_default,
5817
+ showSearchBar && /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
5818
+ "form",
5804
5819
  {
5805
- name: "searchText",
5806
- controlType: InputControlType_default.lineTextInput,
5807
- value: searchText,
5808
- callback: (updatedValues) => setSearchText(updatedValues.value),
5809
- attributes: { placeholder: "Search" },
5810
- inputClasses: "!mt-0"
5820
+ role: "search",
5821
+ className: "flex w-full flex-col gap-3 rounded-2xl border border-info bg-info-soft p-3 sm:flex-row sm:items-center md:min-w-0 md:flex-1",
5822
+ onSubmit: (event) => {
5823
+ event.preventDefault();
5824
+ void handleSearch();
5825
+ },
5826
+ children: [
5827
+ /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "relative bg-default rounded-xl min-w-0 flex-1", children: [
5828
+ /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(SearchIcon, { className: "pointer-events-none absolute left-4 top-1/2 z-10 h-5 w-5 -translate-y-1/2" }),
5829
+ /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
5830
+ InputControl_default,
5831
+ {
5832
+ name: "searchText",
5833
+ controlType: InputControlType_default.lineTextInput,
5834
+ value: searchText,
5835
+ callback: (updatedValues) => setSearchText(updatedValues.value),
5836
+ attributes: {
5837
+ placeholder: "Search discussions, topics, or keywords..."
5838
+ },
5839
+ inputClasses: "!mt-0 !rounded-xl !py-3 !pl-11 !pr-4 !shadow-sm"
5840
+ }
5841
+ )
5842
+ ] }),
5843
+ /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
5844
+ Button_default,
5845
+ {
5846
+ ButtonType: "Primary" /* Solid */,
5847
+ onClick: handleSearch,
5848
+ className: "!rounded-xl !px-6 !py-3 sm:self-stretch",
5849
+ children: [
5850
+ /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(SearchIcon, { className: "h-5 w-5" }),
5851
+ /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { children: "Search" })
5852
+ ]
5853
+ }
5854
+ )
5855
+ ]
5811
5856
  }
5812
- ) }),
5813
- hasSortControls && /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "flex items-center gap-2 text-sm", children: [
5814
- /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: "font-medium", children: "Sort by" }),
5857
+ ),
5858
+ hasSortControls && /* @__PURE__ */ (0, import_jsx_runtime85.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: [
5815
5859
  /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
5860
+ "label",
5861
+ {
5862
+ htmlFor: "sortOptions",
5863
+ className: "shrink-0 whitespace-nowrap font-medium",
5864
+ children: "Sort by"
5865
+ }
5866
+ ),
5867
+ /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "min-w-0 flex-1 rounded-xl bg-default md:min-w-48", children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
5816
5868
  InputControl_default,
5817
5869
  {
5818
5870
  name: "sortOptions",
@@ -5828,9 +5880,9 @@ var init_DataBindingControls = __esm({
5828
5880
  })
5829
5881
  ),
5830
5882
  attributes: { placeholder: "Default" },
5831
- inputClasses: "!mt-0 min-w-44"
5883
+ inputClasses: "!mt-0 !rounded-xl !border-info !bg-default !px-4 !py-3 !text-body !shadow-sm focus:!border-primary focus:!ring-primary-base"
5832
5884
  }
5833
- )
5885
+ ) })
5834
5886
  ] })
5835
5887
  ] }),
5836
5888
  shouldShowFacets && facetGroups.length === 1 && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("nav", { "aria-label": `${humanize(facetGroups[0][0])} filters`, children: renderFacetLinks(facetGroups[0][0], facetGroups[0][1]) }),
package/dist/index.mjs CHANGED
@@ -8,7 +8,7 @@ import {
8
8
  } from "./chunk-RG3CISAA.mjs";
9
9
  import {
10
10
  InputControl_default
11
- } from "./chunk-YRNDRPUE.mjs";
11
+ } from "./chunk-6GVLDYCQ.mjs";
12
12
  import "./chunk-JDX47MFV.mjs";
13
13
  import {
14
14
  CheckboxInput_default,
@@ -28,20 +28,20 @@ import {
28
28
  Select_default,
29
29
  TimeInput_default
30
30
  } from "./chunk-BF4G3ZGG.mjs";
31
+ import {
32
+ Hyperlink,
33
+ Icon_default
34
+ } from "./chunk-GCG4OYDJ.mjs";
31
35
  import {
32
36
  Button_default,
33
37
  ClientButton_default,
34
38
  ToastService_default
35
39
  } from "./chunk-LSKD5U3S.mjs";
36
- import {
37
- Hyperlink,
38
- Icon_default
39
- } from "./chunk-GCG4OYDJ.mjs";
40
- import "./chunk-IMNQO57B.mjs";
41
40
  import {
42
41
  Constants,
43
42
  InputControlType_default
44
43
  } from "./chunk-DTWPZPSX.mjs";
44
+ import "./chunk-IMNQO57B.mjs";
45
45
  import {
46
46
  AssetUtility_default
47
47
  } from "./chunk-UPCAOGEY.mjs";
@@ -2348,8 +2348,8 @@ var GoogleMapNode_default = GoogleMapNode;
2348
2348
 
2349
2349
  // src/components/pageRenderingEngine/nodes/DivContainer.tsx
2350
2350
  import { jsx as jsx36, jsxs as jsxs14 } from "react/jsx-runtime";
2351
- var Pagination = dynamic13(() => import("./Pagination-CQKMBXXJ.mjs"), { ssr: true });
2352
- var DataBindingControls = dynamic13(() => import("./DataBindingControls-TF7XLJ5C.mjs"), {
2351
+ var Pagination = dynamic13(() => import("./Pagination-PGAK7KDA.mjs"), { ssr: true });
2352
+ var DataBindingControls = dynamic13(() => import("./DataBindingControls-2CSX5L5I.mjs"), {
2353
2353
  ssr: true
2354
2354
  });
2355
2355
  var Slider = dynamic13(() => import("./Slider-IVPJBPE5.mjs"), {
package/dist/server.js CHANGED
@@ -5606,15 +5606,17 @@ var DataBindingControls_exports = {};
5606
5606
  __export(DataBindingControls_exports, {
5607
5607
  default: () => DataBindingControls_default
5608
5608
  });
5609
- var import_react59, import_navigation, import_jsx_runtime85, humanize, escapeODataString, parseFacetSelections, buildFacetFilter, parseODataSearch, normalizeSortOption, DUMMY_FACETS, DUMMY_SORT_OPTIONS, DataBindingControls, DataBindingControls_default;
5609
+ var import_react59, import_navigation, import_jsx_runtime85, humanize, escapeODataString, parseFacetSelections, buildFacetFilter, parseODataSearch, SearchIcon, normalizeSortOption, DUMMY_FACETS, DUMMY_SORT_OPTIONS, DataBindingControls, DataBindingControls_default;
5610
5610
  var init_DataBindingControls = __esm({
5611
5611
  "src/components/pageRenderingEngine/nodes/DataBindingControls.tsx"() {
5612
5612
  "use strict";
5613
5613
  "use client";
5614
5614
  import_react59 = require("react");
5615
5615
  import_navigation = require("next/navigation");
5616
+ init_Button();
5616
5617
  init_InputControl();
5617
5618
  init_InputControlType();
5619
+ init_StyleTypes();
5618
5620
  import_jsx_runtime85 = require("react/jsx-runtime");
5619
5621
  humanize = (value) => value.replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/[_-]+/g, " ").trim();
5620
5622
  escapeODataString = (value) => value.replace(/'/g, "''");
@@ -5644,6 +5646,21 @@ var init_DataBindingControls = __esm({
5644
5646
  }
5645
5647
  return trimmedValue;
5646
5648
  };
5649
+ SearchIcon = ({ className = "" }) => /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
5650
+ "svg",
5651
+ {
5652
+ "aria-hidden": "true",
5653
+ className,
5654
+ fill: "none",
5655
+ viewBox: "0 0 24 24",
5656
+ stroke: "currentColor",
5657
+ strokeWidth: "2",
5658
+ children: [
5659
+ /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("circle", { cx: "11", cy: "11", r: "7" }),
5660
+ /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("path", { strokeLinecap: "round", d: "m20 20-4-4" })
5661
+ ]
5662
+ }
5663
+ );
5647
5664
  normalizeSortOption = (option) => {
5648
5665
  const direction = option.direction.trim();
5649
5666
  return {
@@ -5743,19 +5760,17 @@ var init_DataBindingControls = __esm({
5743
5760
  },
5744
5761
  [router]
5745
5762
  );
5746
- (0, import_react59.useEffect)(() => {
5763
+ const handleSearch = (0, import_react59.useCallback)(async () => {
5747
5764
  const trimmedSearchText = searchText.trim();
5748
5765
  if (trimmedSearchText === currentSearch.trim()) {
5749
- return;
5766
+ return { isSuccessful: true };
5750
5767
  }
5751
- const timeout = window.setTimeout(() => {
5752
- navigateWithoutReload(
5753
- getQueryUrl({
5754
- "$search": trimmedSearchText || void 0
5755
- })
5756
- );
5757
- }, 500);
5758
- return () => window.clearTimeout(timeout);
5768
+ navigateWithoutReload(
5769
+ getQueryUrl({
5770
+ "$search": trimmedSearchText || void 0
5771
+ })
5772
+ );
5773
+ return { isSuccessful: true };
5759
5774
  }, [currentSearch, getQueryUrl, navigateWithoutReload, searchText]);
5760
5775
  const hasFacetControls = showFacets && facetGroups.length > 0;
5761
5776
  const hasSortControls = showSortOptions && normalizedSortOptions.length > 0;
@@ -5797,20 +5812,57 @@ var init_DataBindingControls = __esm({
5797
5812
  ] });
5798
5813
  return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: mode === "toolbar" ? "my-6" : "flex flex-col gap-2", children: [
5799
5814
  shouldShowToolbar && /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "flex flex-col gap-3 md:flex-row md:items-center md:justify-between", children: [
5800
- showSearchBar && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "w-full max-w-xl", children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
5801
- InputControl_default,
5815
+ showSearchBar && /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
5816
+ "form",
5802
5817
  {
5803
- name: "searchText",
5804
- controlType: InputControlType_default.lineTextInput,
5805
- value: searchText,
5806
- callback: (updatedValues) => setSearchText(updatedValues.value),
5807
- attributes: { placeholder: "Search" },
5808
- inputClasses: "!mt-0"
5818
+ role: "search",
5819
+ className: "flex w-full flex-col gap-3 rounded-2xl border border-info bg-info-soft p-3 sm:flex-row sm:items-center md:min-w-0 md:flex-1",
5820
+ onSubmit: (event) => {
5821
+ event.preventDefault();
5822
+ void handleSearch();
5823
+ },
5824
+ children: [
5825
+ /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "relative bg-default rounded-xl min-w-0 flex-1", children: [
5826
+ /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(SearchIcon, { className: "pointer-events-none absolute left-4 top-1/2 z-10 h-5 w-5 -translate-y-1/2" }),
5827
+ /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
5828
+ InputControl_default,
5829
+ {
5830
+ name: "searchText",
5831
+ controlType: InputControlType_default.lineTextInput,
5832
+ value: searchText,
5833
+ callback: (updatedValues) => setSearchText(updatedValues.value),
5834
+ attributes: {
5835
+ placeholder: "Search discussions, topics, or keywords..."
5836
+ },
5837
+ inputClasses: "!mt-0 !rounded-xl !py-3 !pl-11 !pr-4 !shadow-sm"
5838
+ }
5839
+ )
5840
+ ] }),
5841
+ /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
5842
+ Button_default,
5843
+ {
5844
+ ButtonType: "Primary" /* Solid */,
5845
+ onClick: handleSearch,
5846
+ className: "!rounded-xl !px-6 !py-3 sm:self-stretch",
5847
+ children: [
5848
+ /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(SearchIcon, { className: "h-5 w-5" }),
5849
+ /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { children: "Search" })
5850
+ ]
5851
+ }
5852
+ )
5853
+ ]
5809
5854
  }
5810
- ) }),
5811
- hasSortControls && /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "flex items-center gap-2 text-sm", children: [
5812
- /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: "font-medium", children: "Sort by" }),
5855
+ ),
5856
+ hasSortControls && /* @__PURE__ */ (0, import_jsx_runtime85.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: [
5813
5857
  /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
5858
+ "label",
5859
+ {
5860
+ htmlFor: "sortOptions",
5861
+ className: "shrink-0 whitespace-nowrap font-medium",
5862
+ children: "Sort by"
5863
+ }
5864
+ ),
5865
+ /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "min-w-0 flex-1 rounded-xl bg-default md:min-w-48", children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
5814
5866
  InputControl_default,
5815
5867
  {
5816
5868
  name: "sortOptions",
@@ -5826,9 +5878,9 @@ var init_DataBindingControls = __esm({
5826
5878
  })
5827
5879
  ),
5828
5880
  attributes: { placeholder: "Default" },
5829
- inputClasses: "!mt-0 min-w-44"
5881
+ inputClasses: "!mt-0 !rounded-xl !border-info !bg-default !px-4 !py-3 !text-body !shadow-sm focus:!border-primary focus:!ring-primary-base"
5830
5882
  }
5831
- )
5883
+ ) })
5832
5884
  ] })
5833
5885
  ] }),
5834
5886
  shouldShowFacets && facetGroups.length === 1 && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("nav", { "aria-label": `${humanize(facetGroups[0][0])} filters`, children: renderFacetLinks(facetGroups[0][0], facetGroups[0][1]) }),
package/dist/server.mjs CHANGED
@@ -2317,7 +2317,7 @@ var GoogleMapNode_default = GoogleMapNode;
2317
2317
  // src/components/pageRenderingEngine/nodes/DivContainer.tsx
2318
2318
  import { jsx as jsx36, jsxs as jsxs14 } from "react/jsx-runtime";
2319
2319
  var Pagination = dynamic13(() => import("./Pagination-M3VZKKXY.mjs"), { ssr: true });
2320
- var DataBindingControls = dynamic13(() => import("./DataBindingControls-SKC472JJ.mjs"), {
2320
+ var DataBindingControls = dynamic13(() => import("./DataBindingControls-F72KPWHV.mjs"), {
2321
2321
  ssr: true
2322
2322
  });
2323
2323
  var Slider = dynamic13(() => import("./Slider-QIGKP6AE.mjs"), {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@clyrex-digital/clyrex-controls-dev",
3
- "version": "0.8.1-dev.20260914095913",
3
+ "version": "0.8.1-dev.20260916063140",
4
4
  "description": "Reusable React components",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
package/dist/{InputControlClient-BC66BGHI.mjs → InputControlClient-DZGLI4DU.mjs} RENAMED
@@ -19,18 +19,18 @@ import {
19
19
  Select_default,
20
20
  TimeInput_default
21
21
  } from "./chunk-BF4G3ZGG.mjs";
22
- import {
23
- Button_default,
24
- ClientButton_default
25
- } from "./chunk-LSKD5U3S.mjs";
26
22
  import {
27
23
  Hyperlink,
28
24
  Icon_default
29
25
  } from "./chunk-GCG4OYDJ.mjs";
30
- import "./chunk-IMNQO57B.mjs";
26
+ import {
27
+ Button_default,
28
+ ClientButton_default
29
+ } from "./chunk-LSKD5U3S.mjs";
31
30
  import {
32
31
  InputControlType_default
33
32
  } from "./chunk-DTWPZPSX.mjs";
33
+ import "./chunk-IMNQO57B.mjs";
34
34
  import {
35
35
  AssetUtility_default
36
36
  } from "./chunk-UPCAOGEY.mjs";
package/dist/{Pagination-CQKMBXXJ.mjs → Pagination-PGAK7KDA.mjs} RENAMED
@@ -8,10 +8,10 @@ import {
8
8
  Hyperlink,
9
9
  Icon_default
10
10
  } from "./chunk-GCG4OYDJ.mjs";
11
- import "./chunk-IMNQO57B.mjs";
12
11
  import {
13
12
  Constants
14
13
  } from "./chunk-DTWPZPSX.mjs";
14
+ import "./chunk-IMNQO57B.mjs";
15
15
 
16
16
  // src/components/Pagination.tsx
17
17
  import { useMemo } from "react";