@commercelayer/app-elements 1.17.1 → 1.17.2

package/dist/{InputDateComponent-DdFak1F0.js → InputDateComponent-DocNjnnQ.js}

@@ -2,7 +2,7 @@
 var ur = Object.defineProperty;
 var lr = (a, n, e) => n in a ? ur(a, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[n] = e;
 var D = (a, n, e) => (lr(a, typeof n != "symbol" ? n + "" : n, e), e);
-import { a as Ut, c as pr, i as Fe, p as dr, b as hr, f as fr, o as mr, d as q, j as be, I as gr, g as yr, w as wr, X as Dr } from "./main-CwwTeAUF.js";
+import { a as Ut, c as pr, i as Fe, p as dr, b as hr, f as fr, o as mr, d as q, j as be, I as gr, g as yr, w as wr, X as Dr } from "./main-bvrBIWhO.js";
 import * as C from "react";
 import f, { createElement as vr, Component as br, useLayoutEffect as On, useEffect as Nn, createRef as kr, forwardRef as Mr } from "react";
 import * as _r from "react-dom";

package/dist/{main-CwwTeAUF.js → main-bvrBIWhO.js}

@@ -26009,7 +26009,7 @@ function fy({
 }
 fy.displayName = "InputCurrencyRange";
 const p8e = nM(
-  async () => await import("./InputDateComponent-DdFak1F0.js").then((e) => ({
+  async () => await import("./InputDateComponent-DocNjnnQ.js").then((e) => ({
     default: e.InputDateComponent
   }))
 ), hs = G(
@@ -34193,38 +34193,40 @@ function Uy({
   placeholder: t,
   onUpdate: n,
   queryString: r,
-  predicateWhitelist: a
+  predicateWhitelist: a,
+  debounceMs: s
 }) {
-  var p, v;
-  const { adaptUrlQueryToFormValues: s, adaptFormValuesToUrlQuery: u } = $s({
+  var v, y;
+  const { adaptUrlQueryToFormValues: u, adaptFormValuesToUrlQuery: d } = $s({
     instructions: e,
     predicateWhitelist: a
-  }), d = (p = e.find(
-    (y) => y.type === "textSearch" && y.render.component === "searchBar"
-  )) == null ? void 0 : p.sdk.predicate, c = (y) => {
-    if (d == null)
+  }), c = (v = e.find(
+    (E) => E.type === "textSearch" && E.render.component === "searchBar"
+  )) == null ? void 0 : v.sdk.predicate, f = (E) => {
+    if (c == null)
       return;
-    const E = s({
+    const x = u({
       queryString: r
-    }), x = u({
+    }), M = d({
       formValues: {
-        ...E,
-        [d]: ve(y == null ? void 0 : y.trim()) ? void 0 : y
+        ...x,
+        [c]: ve(E == null ? void 0 : E.trim()) ? void 0 : E
       }
     });
-    n(x);
+    n(M);
   };
-  if (d == null)
+  if (c == null)
     return /* @__PURE__ */ A.jsx("div", { children: "No textSearch filter set" });
-  const f = s({ queryString: r })[d], h = (v = Ks(f)[0]) == null ? void 0 : v.toString();
+  const h = u({ queryString: r })[c], p = (y = Ks(h)[0]) == null ? void 0 : y.toString();
   return /* @__PURE__ */ A.jsx(
     G2,
     {
       placeholder: t,
-      initialValue: h,
-      onClear: c,
-      onSearch: c,
-      autoFocus: h !== void 0 && h.length > 0
+      initialValue: p,
+      onClear: f,
+      onSearch: f,
+      autoFocus: p !== void 0 && p.length > 0,
+      debounceMs: s
     }
   );
 }
@@ -34266,29 +34268,31 @@ function z6e({
       onFilterClick: y,
       onUpdate: E,
       searchBarPlaceholder: x,
+      searchBarDebounceMs: M,
       // we need this value as prop to avoid re-rendering the component and losing the focus on searchbar
       // so we can't reuse the `queryString` variable we have in the hook scope
-      queryString: M,
-      hideSearchBar: C,
-      hideFiltersNav: Z
-    }) => C === !0 && Z === !0 ? /* @__PURE__ */ A.jsx(A.Fragment, {}) : /* @__PURE__ */ A.jsxs(qe, { top: "4", bottom: "14", children: [
-      C === !0 ? null : /* @__PURE__ */ A.jsx(qe, { bottom: "2", children: /* @__PURE__ */ A.jsx(
+      queryString: C,
+      hideSearchBar: Z,
+      hideFiltersNav: O
+    }) => Z === !0 && O === !0 ? /* @__PURE__ */ A.jsx(A.Fragment, {}) : /* @__PURE__ */ A.jsxs(qe, { top: "4", bottom: "14", children: [
+      Z === !0 ? null : /* @__PURE__ */ A.jsx(qe, { bottom: "2", children: /* @__PURE__ */ A.jsx(
         Uy,
         {
           placeholder: x ?? "Search...",
+          debounceMs: M,
           instructions: d,
           onUpdate: E,
-          queryString: M,
+          queryString: C,
           predicateWhitelist: t
         }
       ) }),
-      Z === !0 ? null : /* @__PURE__ */ A.jsx(
+      O === !0 ? null : /* @__PURE__ */ A.jsx(
         f6e,
         {
           instructions: d,
           onFilterClick: y,
           onUpdate: E,
-          queryString: M,
+          queryString: C,
           predicateWhitelist: t
         }
       )

package/dist/main.js

@@ -1,5 +1,5 @@
 "use client";
-import { a4 as s, aK as t, a5 as o, a6 as r, a7 as n, a8 as u, a9 as i, aa as l, ab as p, ac as b, ad as c, aL as d, ae as g, af as S, V as m, aM as I, aN as k, aO as T, aP as D, ag as R, Z as y, _ as h, ah as C, ai as H, aQ as P, b0 as A, b1 as f, b3 as B, b5 as F, b7 as v, bb as L, bd as N, bi as O, bl as G, bn as w, bu as V, bw as x, by as E, bA as M, bC as W, bG as J, bH as U, aj as Y, ak as q, b2 as z, b4 as K, b6 as Q, b8 as Z, ba as _, bc as $, be as j, bf as X, bg as aa, bh as ea, bj as sa, bk as ta, bm as oa, bo as ra, bv as na, bx as ua, bz as ia, bB as la, bD as pa, bE as ba, bF as ca, aR as da, aS as ga, aT as Sa, aU as ma, a0 as Ia, aV as ka, al as Ta, aW as Da, aX as Ra, am as ya, an as ha, ao as Ca, ap as Ha, aY as Pa, bK as Aa, bL as fa, bM as Ba, bN as Fa, bO as va, bP as La, bQ as Na, bR as Oa, aq as Ga, aZ as wa, ar as Va, as as xa, at as Ea, au as Ma, aw as Wa, ax as Ja, ay as Ua, az as Ya, aA as qa, aF as za, aB as Ka, a_ as Qa, aG as Za, aH as _a, aC as $a, aI as ja, aD as Xa, a$ as ae, a1 as ee, aJ as se, aE as te, B as oe, a3 as re, E as ne, F as ue, k as ie, A as le, bp as pe, b9 as be, l as ce, m as de, q as ge, C as Se, D as me, G as Ie, bT as ke, bU as Te, bq as De, s as Re, t as ye, u as he, v as Ce, bV as He, bW as Pe, bX as Ae, bY as fe, bZ as Be, H as Fe, J as ve, b_ as Le, b$ as Ne, c0 as Oe, c1 as Ge, K as we, L as Ve, c2 as xe, c3 as Ee, c4 as Me, O as We, P as Je, e as Ue, M as Ye, N as qe, h as ze, br as Ke, bs as Qe, bt as Ze, n as _e, r as $e, x as je, bI as Xe, y as as, z as es, Q as ss, W as ts, Y as os, R as rs, S as ns, T as us, U as is, bS as ls, $ as ps, a2 as bs, bJ as cs, av as ds } from "./main-CwwTeAUF.js";
+import { a4 as s, aK as t, a5 as o, a6 as r, a7 as n, a8 as u, a9 as i, aa as l, ab as p, ac as b, ad as c, aL as d, ae as g, af as S, V as m, aM as I, aN as k, aO as T, aP as D, ag as R, Z as y, _ as h, ah as C, ai as H, aQ as P, b0 as A, b1 as f, b3 as B, b5 as F, b7 as v, bb as L, bd as N, bi as O, bl as G, bn as w, bu as V, bw as x, by as E, bA as M, bC as W, bG as J, bH as U, aj as Y, ak as q, b2 as z, b4 as K, b6 as Q, b8 as Z, ba as _, bc as $, be as j, bf as X, bg as aa, bh as ea, bj as sa, bk as ta, bm as oa, bo as ra, bv as na, bx as ua, bz as ia, bB as la, bD as pa, bE as ba, bF as ca, aR as da, aS as ga, aT as Sa, aU as ma, a0 as Ia, aV as ka, al as Ta, aW as Da, aX as Ra, am as ya, an as ha, ao as Ca, ap as Ha, aY as Pa, bK as Aa, bL as fa, bM as Ba, bN as Fa, bO as va, bP as La, bQ as Na, bR as Oa, aq as Ga, aZ as wa, ar as Va, as as xa, at as Ea, au as Ma, aw as Wa, ax as Ja, ay as Ua, az as Ya, aA as qa, aF as za, aB as Ka, a_ as Qa, aG as Za, aH as _a, aC as $a, aI as ja, aD as Xa, a$ as ae, a1 as ee, aJ as se, aE as te, B as oe, a3 as re, E as ne, F as ue, k as ie, A as le, bp as pe, b9 as be, l as ce, m as de, q as ge, C as Se, D as me, G as Ie, bT as ke, bU as Te, bq as De, s as Re, t as ye, u as he, v as Ce, bV as He, bW as Pe, bX as Ae, bY as fe, bZ as Be, H as Fe, J as ve, b_ as Le, b$ as Ne, c0 as Oe, c1 as Ge, K as we, L as Ve, c2 as xe, c3 as Ee, c4 as Me, O as We, P as Je, e as Ue, M as Ye, N as qe, h as ze, br as Ke, bs as Qe, bt as Ze, n as _e, r as $e, x as je, bI as Xe, y as as, z as es, Q as ss, W as ts, Y as os, R as rs, S as ns, T as us, U as is, bS as ls, $ as ps, a2 as bs, bJ as cs, av as ds } from "./main-bvrBIWhO.js";
 export {
   s as A,
   t as ActionButtons,

package/dist/ui/resources/useResourceFilters/FiltersSearchBar.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
+import { type SearchBarProps } from '../../composite/SearchBar';
 import { type FiltersInstructions } from './types';
-export interface FilterSearchBarProps {
+export interface FilterSearchBarProps extends Pick<SearchBarProps, 'placeholder' | 'debounceMs'> {
     /**
      * Array of instruction items to build the filters behaviors
      */
@@ -16,10 +17,6 @@ export interface FilterSearchBarProps {
      * It must be "reactive", so most of the time it should come for router.
      */
     queryString: string;
-    /**
-     * Input placeholder
-     */
-    placeholder?: string;
     /**
      * By default, we strip out all filters that are not part of the `instructions` array.
      * The option `predicateWhitelist` is used to whitelist a set of predicates that you want to use as filters.
@@ -34,7 +31,7 @@ export interface FilterSearchBarProps {
      */
     predicateWhitelist: string[];
 }
-declare function FiltersSearchBar({ instructions, placeholder, onUpdate, queryString, predicateWhitelist }: FilterSearchBarProps): JSX.Element;
+declare function FiltersSearchBar({ instructions, placeholder, onUpdate, queryString, predicateWhitelist, debounceMs }: FilterSearchBarProps): JSX.Element;
 declare namespace FiltersSearchBar {
     var displayName: string;
 }

package/dist/ui/resources/useResourceFilters/useResourceFilters.d.ts

@@ -46,6 +46,11 @@ interface UseResourceFiltersHook {
          * @default 'Search...'
          */
         searchBarPlaceholder?: string;
+        /**
+         * Milliseconds to wait before triggering the search bar callback
+         * @default 500
+         */
+        searchBarDebounceMs?: number;
     }) => JSX.Element;
     /**
      * Form component with filters fields based on provided instructions

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercelayer/app-elements",
-  "version": "1.17.1",
+  "version": "1.17.2",
   "type": "module",
   "license": "MIT",
   "files": [