@shopify/shop-minis-react/dist/components/atoms/list.js

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

import { jsx as e, Fragment as E, jsxs as w } from "react/jsx-runtime";
import { useRef as d, useCallback as a, useEffect as b } from "react";
import { Virtuoso as g } from "../../shop-minis-react/node_modules/.pnpm/react-virtuoso@4.14.0_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/react-virtuoso/dist/index.js";
import { RefreshIndicator as k } from "../../internal/components/refresh-indicator.js";
import { usePullToRefresh as I } from "../../internal/usePullToRefresh.js";
import { findVirtuosoScrollableElement as M } from "../../internal/utils/virtuoso-dom.js";
import { cn as v } from "../../lib/utils.js";
/* empty css                         */
import { Skeleton as U } from "../ui/skeleton.js";
const D = 200, V = 100;
function Q({
  items: N,
  height: x,
  renderItem: f,
  className: H,
  showScrollbar: L = !1,
  header: u,
  fetchMore: r,
  loadingComponent: p,
  onRefresh: n,
  refreshing: m,
  enablePullToRefresh: i = !0,
  ...F
}) {
  const s = d(null), _ = d(null), o = d(null), { state: l, bindToElement: h } = I({
    onRefresh: n,
    threshold: D,
    enabled: i && !!n
  }), R = a(() => {
    if (s.current) return;
    const t = Promise.resolve(r?.()).finally(() => {
      s.current === t && (s.current = null);
    });
    s.current = t;
  }, [r]), S = a(
    (t, c) => /* @__PURE__ */ e(E, { children: f(c, t) }),
    [f]
  ), y = a(() => r ? p ?? /* @__PURE__ */ e(U, { className: "h-10 w-full p-8" }) : null, [p, r]), A = v(L ? void 0 : "no-scrollbars", H);
  b(() => {
    if (o.current && i && n) {
      let t;
      const T = setTimeout(() => {
        if (!o.current) return;
        const j = M(
          o.current
        );
        t = h(j);
      }, V);
      return () => {
        clearTimeout(T), t && t();
      };
    }
  }, [h, i, n]);
  const B = a(() => {
    const t = m ? Math.max(l.pullDistance, 140) : l.pullDistance, c = Math.min(
      Math.max(t, 0),
      140
    );
    return /* @__PURE__ */ w(E, { children: [
      i && n && /* @__PURE__ */ e(
        "div",
        {
          className: "flex items-center justify-center",
          style: {
            height: c,
            overflow: "hidden"
          },
          children: /* @__PURE__ */ e(
            k,
            {
              pullDistance: l.pullDistance,
              threshold: D,
              isRefreshing: m ?? !1,
              canRefresh: l.canRefresh,
              className: "relative top-0 inset-x-auto"
            }
          )
        }
      ),
      u && /* @__PURE__ */ e("div", { children: u })
    ] });
  }, [u, i, n, l, m]);
  return /* @__PURE__ */ e(
    "div",
    {
      ref: o,
      className: v("relative transition-all duration-200", A),
      style: {
        height: x
      },
      children: /* @__PURE__ */ e(
        g,
        {
          ref: _,
          className: "h-full w-full",
          data: N,
          itemContent: S,
          components: {
            Header: B,
            Footer: y
          },
          endReached: r ? R : void 0,
          ...F
        }
      )
    }
  );
}
export {
  Q as List
};
//# sourceMappingURL=list.js.map