@shopify/shop-minis-react 0.0.26 → 0.0.28

package/dist/components/commerce/search.js

@@ -0,0 +1,144 @@
+import { jsx as e, jsxs as g } from "react/jsx-runtime";
+import { useState as P, useCallback as y, createContext as k, useContext as L } from "react";
+import { useProductSearch as T } from "../../hooks/product/useProductSearch.js";
+import { cn as p } from "../../lib/utils.js";
+import { IconButton as E } from "../atoms/icon-button.js";
+import { List as _ } from "../atoms/list.js";
+import { Input as j } from "../ui/input.js";
+import { ProductLink as v } from "./product-link.js";
+import { ProductLinkSkeleton as u } from "./product-link-skeleton.js";
+import z from "../../shop-minis-react/node_modules/.pnpm/lucide-react@0.513.0_react@19.1.0/node_modules/lucide-react/dist/esm/icons/search.js";
+import M from "../../shop-minis-react/node_modules/.pnpm/lucide-react@0.513.0_react@19.1.0/node_modules/lucide-react/dist/esm/icons/x.js";
+const Q = 100, S = k(null);
+function N() {
+  const t = L(S);
+  if (!t)
+    throw new Error("useSearchContext must be used within a SearchProvider");
+  return t;
+}
+function q({ initialQuery: t = "", children: i }) {
+  const [r, a] = P(t), { products: o, loading: s, error: n, fetchMore: c, hasNextPage: l, isTyping: d } = T({
+    query: r,
+    fetchPolicy: "network-only"
+  }), m = y((f) => {
+    a(f);
+  }, []), h = {
+    query: r,
+    setQuery: m,
+    products: o,
+    loading: s,
+    error: n,
+    fetchMore: c,
+    hasNextPage: l,
+    isTyping: d
+  };
+  return /* @__PURE__ */ e(S.Provider, { value: h, children: i });
+}
+function A({
+  placeholder: t = "Search products...",
+  className: i,
+  inputProps: r
+}) {
+  const { query: a, setQuery: o } = N(), s = y(
+    (n) => {
+      o(n.target.value), r?.onChange?.(n);
+    },
+    [r, o]
+  );
+  return /* @__PURE__ */ g("div", { className: "relative flex flex-1 items-center rounded-full pl-4 pr-2 py-1 bg-gray-100", children: [
+    /* @__PURE__ */ e("div", { className: "relative flex items-center", children: /* @__PURE__ */ e(
+      z,
+      {
+        size: 18,
+        className: p("text-accent-foreground opacity-60")
+      }
+    ) }),
+    /* @__PURE__ */ e("div", { className: "relative flex-1 flex items-center mx-2", children: /* @__PURE__ */ e(
+      j,
+      {
+        name: "search",
+        onChange: s,
+        placeholder: t,
+        type: "search",
+        role: "searchbox",
+        autoComplete: "off",
+        value: a,
+        "data-testid": "search-input",
+        ...r,
+        className: p(
+          "w-full flex overflow-hidden rounded-radius-28 border-none py-4 px-0 text-text placeholder:text-text placeholder:opacity-60",
+          i
+        )
+      }
+    ) }),
+    /* @__PURE__ */ e("div", { className: "relative flex items-center", children: a === "" ? null : /* @__PURE__ */ e(
+      E,
+      {
+        Icon: M,
+        size: "sm",
+        filled: !1,
+        iconStyles: "",
+        onClick: () => o(""),
+        buttonStyles: "flex items-center rounded-radius-max bg-[var(--grayscale-l20)]"
+      }
+    ) })
+  ] });
+}
+function F({
+  height: t = window.innerHeight,
+  renderItem: i,
+  itemHeight: r = Q,
+  initialStateComponent: a,
+  showScrollbar: o,
+  overscanCount: s = 5
+}) {
+  const { query: n, products: c, loading: l, fetchMore: d, hasNextPage: m, isTyping: h } = N(), f = (x, I) => i ? i(x, I) : /* @__PURE__ */ e("div", { className: "p-2", children: /* @__PURE__ */ e(v, { product: x, hideFavoriteAction: !0 }, x.id) }), b = n.trim().length === 0, w = (!c || c.length === 0) && (l || h), C = (!c || c.length === 0) && !l;
+  return b ? a || /* @__PURE__ */ e("div", { className: "flex items-center justify-center h-32 text-gray-500", children: "Start typing to search for products" }) : w ? /* @__PURE__ */ g("div", { className: "flex flex-col px-4 py-4", children: [
+    /* @__PURE__ */ e(u, { className: "mb-4" }),
+    /* @__PURE__ */ e(u, { className: "mb-4" }),
+    /* @__PURE__ */ e(u, { className: "mb-4" }),
+    /* @__PURE__ */ e(u, { className: "mb-4" })
+  ] }) : C ? /* @__PURE__ */ e("div", { className: "flex items-center justify-center h-32 text-gray-500", children: `No products found for "${n}"` }) : /* @__PURE__ */ e(
+    _,
+    {
+      items: c || [],
+      height: t,
+      renderItem: f,
+      itemSizeForRow: () => r,
+      fetchMore: m ? d : void 0,
+      showScrollbar: o,
+      overscanCount: s
+    }
+  );
+}
+function J({
+  initialQuery: t,
+  placeholder: i,
+  inputProps: r,
+  height: a,
+  className: o,
+  renderItem: s,
+  itemHeight: n
+}) {
+  const c = (l, d) => s ? s(l, d) : /* @__PURE__ */ e("div", { className: "p-2", children: /* @__PURE__ */ e(v, { product: l, hideFavoriteAction: !0 }, l.id) });
+  return /* @__PURE__ */ e(q, { initialQuery: t, children: /* @__PURE__ */ g("div", { className: p("flex flex-col ", o), children: [
+    /* @__PURE__ */ e("div", { className: "fixed top-0 left-0 right-0 p-4 w-full z-20 bg-background", children: /* @__PURE__ */ e(A, { placeholder: i, inputProps: r }) }),
+    /* @__PURE__ */ e("div", { className: "h-14" }),
+    /* @__PURE__ */ e(
+      F,
+      {
+        height: a,
+        renderItem: c,
+        itemHeight: n,
+        showScrollbar: !0
+      }
+    )
+  ] }) });
+}
+export {
+  J as Search,
+  A as SearchInput,
+  q as SearchProvider,
+  F as SearchResultsList
+};
+//# sourceMappingURL=search.js.map

package/dist/components/commerce/search.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search.js","sources":["../../../src/components/commerce/search.tsx"],"sourcesContent":["import * as React from 'react'\nimport {createContext, useContext, useState, useCallback} from 'react'\n\nimport {SearchIcon, X} from 'lucide-react'\n\nimport {useProductSearch} from '../../hooks/product/useProductSearch'\nimport {cn} from '../../lib/utils'\nimport {type Product} from '../../types'\nimport {IconButton} from '../atoms/icon-button'\nimport {List} from '../atoms/list'\nimport {Input} from '../ui/input'\n\nimport {ProductLink} from './product-link'\nimport {ProductLinkSkeleton} from './product-link-skeleton'\n\nconst ESTIMATED_PRODUCT_LINK_HEIGHT = 100\n\ninterface SearchContextValue {\n  query: string\n  setQuery: (query: string) => void\n  products: Product[] | null\n  loading: boolean\n  error: Error | null\n  fetchMore?: () => void\n  hasNextPage: boolean\n  isTyping: boolean\n}\n\nconst SearchContext = createContext<SearchContextValue | null>(null)\n\nfunction useSearchContext() {\n  const context = useContext(SearchContext)\n  if (!context) {\n    throw new Error('useSearchContext must be used within a SearchProvider')\n  }\n  return context\n}\n\nexport interface SearchProviderProps {\n  initialQuery?: string\n  children: React.ReactNode\n}\n\nfunction SearchProvider({initialQuery = '', children}: SearchProviderProps) {\n  const [query, setQueryState] = useState(initialQuery)\n\n  const {products, loading, error, fetchMore, hasNextPage, isTyping} =\n    useProductSearch({\n      query,\n      fetchPolicy: 'network-only',\n    })\n\n  const setQuery = useCallback((newQuery: string) => {\n    setQueryState(newQuery)\n  }, [])\n\n  const contextValue: SearchContextValue = {\n    query,\n    setQuery,\n    products,\n    loading,\n    error,\n    fetchMore,\n    hasNextPage,\n    isTyping,\n  }\n\n  return (\n    <SearchContext.Provider value={contextValue}>\n      {children}\n    </SearchContext.Provider>\n  )\n}\n\nexport interface SearchInputProps {\n  placeholder?: string\n  className?: string\n  inputProps?: React.ComponentProps<'input'>\n}\n\nfunction SearchInput({\n  placeholder = 'Search products...',\n  className,\n  inputProps,\n}: SearchInputProps) {\n  const {query, setQuery} = useSearchContext()\n\n  const handleQueryChange = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      setQuery(event.target.value)\n      inputProps?.onChange?.(event)\n    },\n    [inputProps, setQuery]\n  )\n\n  return (\n    <div className=\"relative flex flex-1 items-center rounded-full pl-4 pr-2 py-1 bg-gray-100\">\n      <div className=\"relative flex items-center\">\n        <SearchIcon\n          size={18}\n          className={cn('text-accent-foreground opacity-60')}\n        />\n      </div>\n      <div className=\"relative flex-1 flex items-center mx-2\">\n        <Input\n          name=\"search\"\n          onChange={handleQueryChange}\n          placeholder={placeholder}\n          type=\"search\"\n          role=\"searchbox\"\n          autoComplete=\"off\"\n          value={query}\n          data-testid=\"search-input\"\n          {...inputProps}\n          className={cn(\n            `w-full flex overflow-hidden rounded-radius-28 border-none py-4 px-0 text-text placeholder:text-text placeholder:opacity-60`,\n            className\n          )}\n        />\n      </div>\n      <div className=\"relative flex items-center\">\n        {query === '' ? null : (\n          <IconButton\n            Icon={X}\n            size=\"sm\"\n            filled={false}\n            iconStyles=\"\"\n            onClick={() => setQuery('')}\n            buttonStyles=\"flex items-center rounded-radius-max bg-[var(--grayscale-l20)]\"\n          />\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport interface SearchResultsListProps {\n  renderItem?: (product: Product, index: number) => React.ReactNode\n  height?: number\n  itemHeight?: number\n  initialStateComponent?: React.JSX.Element\n  showScrollbar?: boolean\n  overscanCount?: number\n}\n\nfunction SearchResultsList({\n  height = window.innerHeight,\n  renderItem,\n  itemHeight = ESTIMATED_PRODUCT_LINK_HEIGHT,\n  initialStateComponent,\n  showScrollbar,\n  overscanCount = 5,\n}: SearchResultsListProps) {\n  const {query, products, loading, fetchMore, hasNextPage, isTyping} =\n    useSearchContext()\n\n  const _renderItem = (product: Product, index: number) => {\n    if (renderItem) {\n      return renderItem(product, index)\n    }\n\n    return (\n      <div className=\"p-2\">\n        <ProductLink key={product.id} product={product} hideFavoriteAction />\n      </div>\n    )\n  }\n\n  const shouldShowStartingState = query.trim().length === 0\n  const shouldShowLoading =\n    (!products || products.length === 0) && (loading || isTyping)\n  const shouldShowEmptyState = (!products || products.length === 0) && !loading\n\n  if (shouldShowStartingState) {\n    return (\n      initialStateComponent || (\n        <div className=\"flex items-center justify-center h-32 text-gray-500\">\n          Start typing to search for products\n        </div>\n      )\n    )\n  }\n\n  if (shouldShowLoading) {\n    return (\n      <div className=\"flex flex-col px-4 py-4\">\n        <ProductLinkSkeleton className=\"mb-4\" />\n        <ProductLinkSkeleton className=\"mb-4\" />\n        <ProductLinkSkeleton className=\"mb-4\" />\n        <ProductLinkSkeleton className=\"mb-4\" />\n      </div>\n    )\n  }\n\n  if (shouldShowEmptyState) {\n    return (\n      <div className=\"flex items-center justify-center h-32 text-gray-500\">\n        {`No products found for \"${query}\"`}\n      </div>\n    )\n  }\n\n  return (\n    <List\n      items={products || []}\n      height={height}\n      renderItem={_renderItem}\n      itemSizeForRow={() => itemHeight}\n      fetchMore={hasNextPage ? fetchMore : undefined}\n      showScrollbar={showScrollbar}\n      overscanCount={overscanCount}\n    />\n  )\n}\n\ninterface SearchProviderPropsWithoutChildren\n  extends Omit<SearchProviderProps, 'children'> {}\nexport interface SearchResultsProps\n  extends SearchProviderPropsWithoutChildren,\n    SearchInputProps,\n    SearchResultsListProps {\n  showSearchInput?: boolean\n}\n\nfunction Search({\n  initialQuery,\n  placeholder,\n  inputProps,\n  height,\n  className,\n  renderItem,\n  itemHeight,\n}: SearchResultsProps) {\n  const _renderItem = (product: Product, index: number) => {\n    if (renderItem) {\n      return renderItem(product, index)\n    }\n\n    return (\n      <div className=\"p-2\">\n        <ProductLink key={product.id} product={product} hideFavoriteAction />\n      </div>\n    )\n  }\n\n  return (\n    <SearchProvider initialQuery={initialQuery}>\n      <div className={cn('flex flex-col ', className)}>\n        <div className=\"fixed top-0 left-0 right-0 p-4 w-full z-20 bg-background\">\n          <SearchInput placeholder={placeholder} inputProps={inputProps} />\n        </div>\n        <div className=\"h-14\" />\n        <SearchResultsList\n          height={height}\n          renderItem={_renderItem}\n          itemHeight={itemHeight}\n          showScrollbar\n        />\n      </div>\n    </SearchProvider>\n  )\n}\n\nexport {SearchProvider, SearchInput, SearchResultsList, Search}\n"],"names":["ESTIMATED_PRODUCT_LINK_HEIGHT","SearchContext","createContext","useSearchContext","context","useContext","SearchProvider","initialQuery","children","query","setQueryState","useState","products","loading","error","fetchMore","hasNextPage","isTyping","useProductSearch","setQuery","useCallback","newQuery","contextValue","SearchInput","placeholder","className","inputProps","handleQueryChange","event","jsxs","jsx","SearchIcon","cn","Input","IconButton","X","SearchResultsList","height","renderItem","itemHeight","initialStateComponent","showScrollbar","overscanCount","_renderItem","product","index","ProductLink","shouldShowStartingState","shouldShowLoading","shouldShowEmptyState","ProductLinkSkeleton","List","Search"],"mappings":"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"}

package/dist/components/content/image-content-wrapper.js

@@ -0,0 +1,27 @@
+import { jsx as r, Fragment as a } from "react/jsx-runtime";
+import { ContentWrapper as f } from "../atoms/content-wrapper.js";
+function h({
+  onLoad: i,
+  width: m,
+  height: p,
+  className: l,
+  publicId: o,
+  externalId: t,
+  Loader: e
+}) {
+  return /* @__PURE__ */ r(f, { ...t ? { externalId: t } : { publicId: o }, children: ({ content: n, loading: u }) => u ? e ? /* @__PURE__ */ r(a, { children: e }) : null : /* @__PURE__ */ r(
+    "img",
+    {
+      src: n?.image?.url,
+      width: m,
+      height: p,
+      alt: n?.title,
+      onLoad: i,
+      className: l
+    }
+  ) });
+}
+export {
+  h as ImageContentWrapper
+};
+//# sourceMappingURL=image-content-wrapper.js.map

package/dist/components/content/image-content-wrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-content-wrapper.js","sources":["../../../src/components/content/image-content-wrapper.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */\nimport {ContentWrapper} from '../atoms/content-wrapper'\n\ntype ImageContentWrapperProps = (\n  | {publicId: string; externalId?: never}\n  | {externalId: string; publicId?: never}\n) & {\n  onLoad?: () => void\n  width?: number\n  height?: number\n  className?: string\n  Loader?: React.ReactNode | string\n}\n\nexport function ImageContentWrapper({\n  onLoad,\n  width,\n  height,\n  className,\n  publicId,\n  externalId,\n  Loader,\n}: ImageContentWrapperProps) {\n  return (\n    <ContentWrapper {...(externalId ? {externalId} : {publicId: publicId!})}>\n      {({content, loading}) => {\n        if (loading) return Loader ? <>{Loader}</> : null\n\n        return (\n          <img\n            src={content?.image?.url}\n            width={width}\n            height={height}\n            alt={content?.title}\n            onLoad={onLoad}\n            className={className}\n          />\n        )\n      }}\n    </ContentWrapper>\n  )\n}\n"],"names":["ImageContentWrapper","onLoad","width","height","className","publicId","externalId","Loader","jsx","ContentWrapper","content","loading","Fragment"],"mappings":";;AAcO,SAASA,EAAoB;AAAA,EAClC,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,QAAAC;AACF,GAA6B;AAC3B,SACG,gBAAAC,EAAAC,GAAA,EAAgB,GAAIH,IAAa,EAAC,YAAAA,EAAU,IAAI,EAAC,UAAAD,EAC/C,GAAA,UAAA,CAAC,EAAC,SAAAK,GAAS,SAAAC,QACNA,IAAgBJ,IAAS,gBAAAC,EAAAI,GAAA,EAAG,YAAO,CAAA,IAAM,OAG3C,gBAAAJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKE,GAAS,OAAO;AAAA,MACrB,OAAAR;AAAA,MACA,QAAAC;AAAA,MACA,KAAKO,GAAS;AAAA,MACd,QAAAT;AAAA,MACA,WAAAG;AAAA,IAAA;AAAA,EACF,GAGN;AAEJ;"}

package/dist/components/ui/input.js

@@ -1,6 +1,6 @@
 import { jsx as t } from "react/jsx-runtime";
 import { cn as n } from "../../lib/utils.js";
-function a({ className: e, type: i, ...r }) {
+function l({ className: e, type: i, ...r }) {
   return /* @__PURE__ */ t(
     "input",
     {
@@ -8,7 +8,7 @@ function a({ className: e, type: i, ...r }) {
       "data-slot": "input",
       className: n(
         "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "focus:outline-none focus:ring-0 focus-visible:ring-0 focus-visible:outline-none",
         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
         e
       ),
@@ -17,6 +17,6 @@ function a({ className: e, type: i, ...r }) {
   );
 }
 export {
-  a as Input
+  l as Input
 };
 //# sourceMappingURL=input.js.map

package/dist/components/ui/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","sources":["../../../src/components/ui/input.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {cn} from '../../lib/utils'\n\nfunction Input({className, type, ...props}: React.ComponentProps<'input'>) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',\n        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',\n        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {Input}\n"],"names":["Input","className","type","props","jsx","cn"],"mappings":";;AAIA,SAASA,EAAM,EAAC,WAAAC,GAAW,MAAAC,GAAM,GAAGC,KAAuC;AAEvE,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAAF;AAAA,MACA,aAAU;AAAA,MACV,WAAWG;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACAJ;AAAA,MACF;AAAA,MACC,GAAGE;AAAA,IAAA;AAAA,EACN;AAEJ;"}
+{"version":3,"file":"input.js","sources":["../../../src/components/ui/input.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {cn} from '../../lib/utils'\n\nfunction Input({className, type, ...props}: React.ComponentProps<'input'>) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',\n        'focus:outline-none focus:ring-0 focus-visible:ring-0 focus-visible:outline-none',\n        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {Input}\n"],"names":["Input","className","type","props","jsx","cn"],"mappings":";;AAIA,SAASA,EAAM,EAAC,WAAAC,GAAW,MAAAC,GAAM,GAAGC,KAAuC;AAEvE,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAAF;AAAA,MACA,aAAU;AAAA,MACV,WAAWG;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACAJ;AAAA,MACF;AAAA,MACC,GAAGE;AAAA,IAAA;AAAA,EACN;AAEJ;"}

package/dist/hooks/product/useProductSearch.js

@@ -1,41 +1,42 @@
-import { useState as S, useCallback as h, useEffect as y, useMemo as b } from "react";
-import P from "../../_virtual/debounce.js";
-import { useShopActions as g } from "../../internal/useShopActions.js";
+import { useState as h, useCallback as S, useEffect as y, useMemo as b } from "react";
+import g from "../../_virtual/debounce.js";
+import { useShopActions as P } from "../../internal/useShopActions.js";
 import { useShopActionsPaginatedDataFetching as k } from "../../internal/useShopActionsPaginatedDataFetching.js";
-const v = (r) => {
-  const { getProductSearch: s } = g(), {
+const v = (s) => {
+  const { getProductSearch: u } = P(), {
     query: e,
     filters: c,
-    sortBy: u,
-    includeSensitive: n = !1,
-    skip: a = !1,
+    sortBy: n,
+    includeSensitive: a = !1,
+    skip: i = !1,
     ...d
-  } = r ?? {}, [i, m] = S(e), t = h(
-    P((p) => {
-      m(p);
+  } = s ?? {}, [t, l] = h(e), r = S(
+    g((p) => {
+      l(p);
     }, 300),
     []
   );
-  y(() => (t(e), () => {
-    t.cancel();
-  }), [e, t]);
-  const { data: o, ...f } = k(
-    s,
+  y(() => (r(e), () => {
+    r.cancel();
+  }), [e, r]);
+  const { data: o, ...m } = k(
+    u,
     {
-      query: i,
+      query: t,
       filters: c,
-      sortBy: u,
-      includeSensitive: n,
+      sortBy: n,
+      includeSensitive: a,
       ...d
     },
     {
-      skip: a,
+      skip: i,
       hook: "useProductSearch"
     }
-  ), l = b(() => o ?? null, [o]);
+  ), f = b(() => t.trim().length === 0 ? null : o ?? null, [o, t]);
   return {
-    ...f,
-    products: l
+    ...m,
+    products: f,
+    isTyping: t !== e
   };
 };
 export {

package/dist/hooks/product/useProductSearch.js.map

@@ -1 +1 @@
-{"version":3,"file":"useProductSearch.js","sources":["../../../src/hooks/product/useProductSearch.ts"],"sourcesContent":["import {useCallback, useEffect, useMemo, useState} from 'react'\n\nimport debounce from 'lodash/debounce'\n\nimport {useShopActions} from '../../internal/useShopActions'\nimport {useShopActionsPaginatedDataFetching} from '../../internal/useShopActionsPaginatedDataFetching'\nimport {\n  PaginatedDataHookOptionsBase,\n  PaginatedDataHookReturnsBase,\n  Product,\n  ProductFilters,\n  ProductSearchSortBy,\n} from '../../types'\n\nexport interface UseProductSearchParams extends PaginatedDataHookOptionsBase {\n  /**\n   * The search query.\n   */\n  query: string\n  /**\n   * The filters to apply to the search.\n   */\n  filters?: ProductFilters\n  /**\n   * The sort order of the results.\n   */\n  sortBy?: ProductSearchSortBy\n  /**\n   * Whether to include sensitive products.\n   */\n  includeSensitive?: boolean\n}\n\ninterface UseProductSearchReturns extends PaginatedDataHookReturnsBase {\n  /**\n   * The products returned from the query.\n   */\n  products: Product[] | null\n}\n\nexport const useProductSearch = (\n  params: UseProductSearchParams\n): UseProductSearchReturns => {\n  const {getProductSearch} = useShopActions()\n  const {\n    query,\n    filters,\n    sortBy,\n    includeSensitive = false,\n    skip = false,\n    ...restParams\n  } = params ?? {}\n\n  const [debouncedQuery, setDebouncedQuery] = useState<string>(query)\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const debouncedSetQuery = useCallback(\n    debounce((newQuery: string) => {\n      setDebouncedQuery(newQuery)\n    }, 300),\n    []\n  )\n\n  useEffect(() => {\n    debouncedSetQuery(query)\n\n    return () => {\n      debouncedSetQuery.cancel()\n    }\n  }, [query, debouncedSetQuery])\n\n  const {data, ...rest} = useShopActionsPaginatedDataFetching(\n    getProductSearch,\n    {\n      query: debouncedQuery,\n      filters,\n      sortBy,\n      includeSensitive,\n      ...restParams,\n    },\n    {\n      skip,\n      hook: 'useProductSearch',\n    }\n  )\n\n  const products = useMemo(() => {\n    return data ?? null\n  }, [data])\n\n  return {\n    ...rest,\n    products,\n  }\n}\n"],"names":["useProductSearch","params","getProductSearch","useShopActions","query","filters","sortBy","includeSensitive","skip","restParams","debouncedQuery","setDebouncedQuery","useState","debouncedSetQuery","useCallback","debounce","newQuery","useEffect","data","rest","useShopActionsPaginatedDataFetching","products","useMemo"],"mappings":";;;;AAwCa,MAAAA,IAAmB,CAC9BC,MAC4B;AACtB,QAAA,EAAC,kBAAAC,EAAgB,IAAIC,EAAe,GACpC;AAAA,IACJ,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,QAAAC;AAAA,IACA,kBAAAC,IAAmB;AAAA,IACnB,MAAAC,IAAO;AAAA,IACP,GAAGC;AAAA,EACL,IAAIR,KAAU,CAAC,GAET,CAACS,GAAgBC,CAAiB,IAAIC,EAAiBR,CAAK,GAG5DS,IAAoBC;AAAA,IACxBC,EAAS,CAACC,MAAqB;AAC7B,MAAAL,EAAkBK,CAAQ;AAAA,OACzB,GAAG;AAAA,IACN,CAAA;AAAA,EACF;AAEA,EAAAC,EAAU,OACRJ,EAAkBT,CAAK,GAEhB,MAAM;AACX,IAAAS,EAAkB,OAAO;AAAA,EAC3B,IACC,CAACT,GAAOS,CAAiB,CAAC;AAE7B,QAAM,EAAC,MAAAK,GAAM,GAAGC,EAAA,IAAQC;AAAA,IACtBlB;AAAA,IACA;AAAA,MACE,OAAOQ;AAAA,MACP,SAAAL;AAAA,MACA,QAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,GAAGE;AAAA,IACL;AAAA,IACA;AAAA,MACE,MAAAD;AAAA,MACA,MAAM;AAAA,IAAA;AAAA,EAEV,GAEMa,IAAWC,EAAQ,MAChBJ,KAAQ,MACd,CAACA,CAAI,CAAC;AAEF,SAAA;AAAA,IACL,GAAGC;AAAA,IACH,UAAAE;AAAA,EACF;AACF;"}
+{"version":3,"file":"useProductSearch.js","sources":["../../../src/hooks/product/useProductSearch.ts"],"sourcesContent":["import {useCallback, useEffect, useMemo, useState} from 'react'\n\nimport debounce from 'lodash/debounce'\n\nimport {useShopActions} from '../../internal/useShopActions'\nimport {useShopActionsPaginatedDataFetching} from '../../internal/useShopActionsPaginatedDataFetching'\nimport {\n  PaginatedDataHookOptionsBase,\n  PaginatedDataHookReturnsBase,\n  Product,\n  ProductFilters,\n  ProductSearchSortBy,\n} from '../../types'\n\nexport interface UseProductSearchParams extends PaginatedDataHookOptionsBase {\n  /**\n   * The search query.\n   */\n  query: string\n  /**\n   * The filters to apply to the search.\n   */\n  filters?: ProductFilters\n  /**\n   * The sort order of the results.\n   */\n  sortBy?: ProductSearchSortBy\n  /**\n   * Whether to include sensitive products.\n   */\n  includeSensitive?: boolean\n}\n\ninterface UseProductSearchReturns extends PaginatedDataHookReturnsBase {\n  /**\n   * The products returned from the query.\n   */\n  products: Product[] | null\n  /**\n   * Whether the user is typing.\n   */\n  isTyping: boolean\n}\n\nexport const useProductSearch = (\n  params: UseProductSearchParams\n): UseProductSearchReturns => {\n  const {getProductSearch} = useShopActions()\n  const {\n    query,\n    filters,\n    sortBy,\n    includeSensitive = false,\n    skip = false,\n    ...restParams\n  } = params ?? {}\n\n  const [debouncedQuery, setDebouncedQuery] = useState<string>(query)\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const debouncedSetQuery = useCallback(\n    debounce((newQuery: string) => {\n      setDebouncedQuery(newQuery)\n    }, 300),\n    []\n  )\n\n  useEffect(() => {\n    debouncedSetQuery(query)\n\n    return () => {\n      debouncedSetQuery.cancel()\n    }\n  }, [query, debouncedSetQuery])\n\n  const {data, ...rest} = useShopActionsPaginatedDataFetching(\n    getProductSearch,\n    {\n      query: debouncedQuery,\n      filters,\n      sortBy,\n      includeSensitive,\n      ...restParams,\n    },\n    {\n      skip,\n      hook: 'useProductSearch',\n    }\n  )\n\n  const products = useMemo(() => {\n    if (debouncedQuery.trim().length === 0) {\n      return null\n    }\n\n    return data ?? null\n  }, [data, debouncedQuery])\n\n  return {\n    ...rest,\n    products,\n    isTyping: debouncedQuery !== query,\n  }\n}\n"],"names":["useProductSearch","params","getProductSearch","useShopActions","query","filters","sortBy","includeSensitive","skip","restParams","debouncedQuery","setDebouncedQuery","useState","debouncedSetQuery","useCallback","debounce","newQuery","useEffect","data","rest","useShopActionsPaginatedDataFetching","products","useMemo"],"mappings":";;;;AA4Ca,MAAAA,IAAmB,CAC9BC,MAC4B;AACtB,QAAA,EAAC,kBAAAC,EAAgB,IAAIC,EAAe,GACpC;AAAA,IACJ,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,QAAAC;AAAA,IACA,kBAAAC,IAAmB;AAAA,IACnB,MAAAC,IAAO;AAAA,IACP,GAAGC;AAAA,EACL,IAAIR,KAAU,CAAC,GAET,CAACS,GAAgBC,CAAiB,IAAIC,EAAiBR,CAAK,GAG5DS,IAAoBC;AAAA,IACxBC,EAAS,CAACC,MAAqB;AAC7B,MAAAL,EAAkBK,CAAQ;AAAA,OACzB,GAAG;AAAA,IACN,CAAA;AAAA,EACF;AAEA,EAAAC,EAAU,OACRJ,EAAkBT,CAAK,GAEhB,MAAM;AACX,IAAAS,EAAkB,OAAO;AAAA,EAC3B,IACC,CAACT,GAAOS,CAAiB,CAAC;AAE7B,QAAM,EAAC,MAAAK,GAAM,GAAGC,EAAA,IAAQC;AAAA,IACtBlB;AAAA,IACA;AAAA,MACE,OAAOQ;AAAA,MACP,SAAAL;AAAA,MACA,QAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,GAAGE;AAAA,IACL;AAAA,IACA;AAAA,MACE,MAAAD;AAAA,MACA,MAAM;AAAA,IAAA;AAAA,EAEV,GAEMa,IAAWC,EAAQ,MACnBZ,EAAe,OAAO,WAAW,IAC5B,OAGFQ,KAAQ,MACd,CAACA,GAAMR,CAAc,CAAC;AAElB,SAAA;AAAA,IACL,GAAGS;AAAA,IACH,UAAAE;AAAA,IACA,UAAUX,MAAmBN;AAAA,EAC/B;AACF;"}