@shopify/shop-minis-react/dist/components/commerce/search.js

React component library for Shopify Shop Minis with Tailwind CSS v4 support (source-only, requires TypeScript)

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