@shopify/shop-minis-react 0.4.1 → 0.4.2

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.
@@ -1,5 +1,8 @@
1
- var r = {};
1
+ import { getDefaultExportFromCjs as r } from "./_commonjsHelpers.js";
2
+ import { __require as o } from "../shop-minis-react/node_modules/.pnpm/@videojs_xhr@2.7.0/node_modules/@videojs/xhr/lib/index.js";
3
+ var t = o();
4
+ const a = /* @__PURE__ */ r(t);
2
5
  export {
3
- r as __exports
6
+ a as default
4
7
  };
5
8
  //# sourceMappingURL=index3.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
1
+ {"version":3,"file":"index3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -1,8 +1,5 @@
1
- import { getDefaultExportFromCjs as r } from "./_commonjsHelpers.js";
2
- import { __require as o } from "../shop-minis-react/node_modules/.pnpm/@videojs_xhr@2.7.0/node_modules/@videojs/xhr/lib/index.js";
3
- var t = o();
4
- const a = /* @__PURE__ */ r(t);
1
+ var r = {};
5
2
  export {
6
- a as default
3
+ r as __exports
7
4
  };
8
5
  //# sourceMappingURL=index4.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index4.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
1
+ {"version":3,"file":"index4.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
@@ -1,70 +1,62 @@
1
- import { jsx as e, Fragment as D, jsxs as g } from "react/jsx-runtime";
2
- import { useRef as f, useCallback as a, useEffect as w } from "react";
3
- import { Virtuoso as I } 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";
4
- import { RefreshIndicator as M } from "../../internal/components/refresh-indicator.js";
5
- import { usePullToRefresh as U } from "../../internal/usePullToRefresh.js";
6
- import { findVirtuosoScrollableElement as V } from "../../internal/utils/virtuoso-dom.js";
7
- import { cn as x } from "../../lib/utils.js";
1
+ import { jsx as e, Fragment as E, jsxs as w } from "react/jsx-runtime";
2
+ import { useRef as d, useCallback as a, useEffect as b } from "react";
3
+ 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";
4
+ import { RefreshIndicator as k } from "../../internal/components/refresh-indicator.js";
5
+ import { usePullToRefresh as I } from "../../internal/usePullToRefresh.js";
6
+ import { findVirtuosoScrollableElement as M } from "../../internal/utils/virtuoso-dom.js";
7
+ import { cn as v } from "../../lib/utils.js";
8
8
  /* empty css */
9
- import { Pagination as k } from "./pagination.js";
10
- const H = 200, q = 100;
11
- function W({
12
- items: L,
13
- height: N,
14
- renderItem: p,
15
- className: _,
16
- showScrollbar: F = !1,
9
+ import { Skeleton as U } from "../ui/skeleton.js";
10
+ const D = 200, V = 100;
11
+ function Q({
12
+ items: N,
13
+ height: x,
14
+ renderItem: f,
15
+ className: H,
16
+ showScrollbar: L = !1,
17
17
  header: u,
18
18
  fetchMore: r,
19
- loadingComponent: E,
20
- isFetchingMore: h,
19
+ loadingComponent: p,
21
20
  onRefresh: n,
22
21
  refreshing: m,
23
22
  enablePullToRefresh: i = !0,
24
- ...R
23
+ ...F
25
24
  }) {
26
- const l = f(null), y = f(null), s = f(null), { state: o, bindToElement: v } = U({
25
+ const s = d(null), _ = d(null), o = d(null), { state: l, bindToElement: h } = I({
27
26
  onRefresh: n,
28
- threshold: H,
27
+ threshold: D,
29
28
  enabled: i && !!n
30
- }), d = a(() => {
31
- if (l.current) return;
29
+ }), R = a(() => {
30
+ if (s.current) return;
32
31
  const t = Promise.resolve(r?.()).finally(() => {
33
- l.current === t && (l.current = null);
32
+ s.current === t && (s.current = null);
34
33
  });
35
- l.current = t;
36
- }, [r]), A = a(
37
- (t, c) => /* @__PURE__ */ e(D, { children: p(c, t) }),
38
- [p]
39
- ), B = a(() => r ? /* @__PURE__ */ e(
40
- k,
41
- {
42
- fetchMore: d,
43
- loadingComponent: E,
44
- isFetchingMore: h
45
- }
46
- ) : null, [d, r, E, h]), S = x(F ? void 0 : "no-scrollbars", _);
47
- w(() => {
48
- if (s.current && i && n) {
34
+ s.current = t;
35
+ }, [r]), S = a(
36
+ (t, c) => /* @__PURE__ */ e(E, { children: f(c, t) }),
37
+ [f]
38
+ ), 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);
39
+ b(() => {
40
+ if (o.current && i && n) {
49
41
  let t;
50
- const j = setTimeout(() => {
51
- if (!s.current) return;
52
- const b = V(
53
- s.current
42
+ const T = setTimeout(() => {
43
+ if (!o.current) return;
44
+ const j = M(
45
+ o.current
54
46
  );
55
- t = v(b);
56
- }, q);
47
+ t = h(j);
48
+ }, V);
57
49
  return () => {
58
- clearTimeout(j), t && t();
50
+ clearTimeout(T), t && t();
59
51
  };
60
52
  }
61
- }, [v, i, n]);
62
- const T = a(() => {
63
- const t = m ? Math.max(o.pullDistance, 140) : o.pullDistance, c = Math.min(
53
+ }, [h, i, n]);
54
+ const B = a(() => {
55
+ const t = m ? Math.max(l.pullDistance, 140) : l.pullDistance, c = Math.min(
64
56
  Math.max(t, 0),
65
57
  140
66
58
  );
67
- return /* @__PURE__ */ g(D, { children: [
59
+ return /* @__PURE__ */ w(E, { children: [
68
60
  i && n && /* @__PURE__ */ e(
69
61
  "div",
70
62
  {
@@ -74,12 +66,12 @@ function W({
74
66
  overflow: "hidden"
75
67
  },
76
68
  children: /* @__PURE__ */ e(
77
- M,
69
+ k,
78
70
  {
79
- pullDistance: o.pullDistance,
80
- threshold: H,
71
+ pullDistance: l.pullDistance,
72
+ threshold: D,
81
73
  isRefreshing: m ?? !1,
82
- canRefresh: o.canRefresh,
74
+ canRefresh: l.canRefresh,
83
75
  className: "relative top-0 inset-x-auto"
84
76
  }
85
77
  )
@@ -87,34 +79,34 @@ function W({
87
79
  ),
88
80
  u && /* @__PURE__ */ e("div", { children: u })
89
81
  ] });
90
- }, [u, i, n, o, m]);
82
+ }, [u, i, n, l, m]);
91
83
  return /* @__PURE__ */ e(
92
84
  "div",
93
85
  {
94
- ref: s,
95
- className: x("relative transition-all duration-200", S),
86
+ ref: o,
87
+ className: v("relative transition-all duration-200", A),
96
88
  style: {
97
- height: N
89
+ height: x
98
90
  },
99
91
  children: /* @__PURE__ */ e(
100
- I,
92
+ g,
101
93
  {
102
- ref: y,
94
+ ref: _,
103
95
  className: "h-full w-full",
104
- data: L,
105
- itemContent: A,
96
+ data: N,
97
+ itemContent: S,
106
98
  components: {
107
- Header: T,
108
- Footer: B
99
+ Header: B,
100
+ Footer: y
109
101
  },
110
- endReached: r ? d : void 0,
111
- ...R
102
+ endReached: r ? R : void 0,
103
+ ...F
112
104
  }
113
105
  )
114
106
  }
115
107
  );
116
108
  }
117
109
  export {
118
- W as List
110
+ Q as List
119
111
  };
120
112
  //# sourceMappingURL=list.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"list.js","sources":["../../../src/components/atoms/list.tsx"],"sourcesContent":["import {useCallback, useEffect, useRef} from 'react'\n\nimport {Virtuoso, VirtuosoProps} from 'react-virtuoso'\n\nimport {RefreshIndicator} from '../../internal/components/refresh-indicator'\nimport {usePullToRefresh} from '../../internal/usePullToRefresh'\nimport {findVirtuosoScrollableElement} from '../../internal/utils/virtuoso-dom'\nimport {cn} from '../../lib/utils'\nimport '../../styles/utilities.css'\n\nimport {Pagination} from './pagination'\n\nconst DEFAULT_REFRESH_PULL_THRESHOLD = 200\nconst ELEMENT_BIND_DELAY = 100\n\ninterface Props<T = any>\n extends Omit<\n VirtuosoProps<T, unknown>,\n 'data' | 'itemContent' | 'endReached'\n > {\n items: T[]\n renderItem: (item: T, index: number) => React.ReactNode\n showScrollbar?: boolean\n header?: React.ReactNode\n fetchMore?: () => Promise<void>\n loadingComponent?: React.ReactNode\n isFetchingMore?: boolean\n onRefresh?: () => Promise<void>\n refreshing?: boolean\n enablePullToRefresh?: boolean\n}\n\nexport function List<T = any>({\n items,\n height,\n renderItem,\n className,\n showScrollbar = false,\n header,\n fetchMore,\n loadingComponent,\n isFetchingMore,\n onRefresh,\n refreshing,\n enablePullToRefresh = true,\n ...virtuosoProps\n}: Props<T>) {\n const inFlightFetchMoreRef = useRef<Promise<void> | null>(null)\n const virtuosoRef = useRef<any>(null)\n const containerRef = useRef<HTMLDivElement>(null)\n\n const {state: pullToRefreshState, bindToElement} = usePullToRefresh({\n onRefresh,\n threshold: DEFAULT_REFRESH_PULL_THRESHOLD,\n enabled: enablePullToRefresh && Boolean(onRefresh),\n })\n\n const _fetchMore = useCallback(() => {\n // Dedupe concurrent calls by returning the same in-flight promise\n if (inFlightFetchMoreRef.current) return\n\n const current = Promise.resolve(fetchMore?.()).finally(() => {\n // Only clear if this is still the most recent promise\n if (inFlightFetchMoreRef.current === current) {\n inFlightFetchMoreRef.current = null\n }\n })\n\n inFlightFetchMoreRef.current = current\n }, [fetchMore])\n\n const itemContent = useCallback(\n (index: number, item: T) => <>{renderItem(item, index)}</>,\n [renderItem]\n )\n\n const Footer = useCallback(() => {\n if (!fetchMore) return null\n\n return (\n <Pagination\n fetchMore={_fetchMore}\n loadingComponent={loadingComponent}\n isFetchingMore={isFetchingMore}\n />\n )\n }, [_fetchMore, fetchMore, loadingComponent, isFetchingMore])\n\n const classNames = cn(showScrollbar ? undefined : 'no-scrollbars', className)\n\n useEffect(() => {\n if (containerRef.current && enablePullToRefresh && onRefresh) {\n let cleanup: (() => void) | undefined\n\n const findAndBind = () => {\n if (!containerRef.current) return\n\n const scrollableElement = findVirtuosoScrollableElement(\n containerRef.current\n )\n cleanup = bindToElement(scrollableElement)\n }\n\n const timeoutId = setTimeout(findAndBind, ELEMENT_BIND_DELAY)\n\n return () => {\n clearTimeout(timeoutId)\n if (cleanup) cleanup()\n }\n }\n return undefined\n }, [bindToElement, enablePullToRefresh, onRefresh])\n\n const EnhancedHeader = useCallback(() => {\n const effectivePullDistance = refreshing\n ? Math.max(pullToRefreshState.pullDistance, 140)\n : pullToRefreshState.pullDistance\n\n const refreshHeaderHeight = Math.min(\n Math.max(effectivePullDistance, 0),\n 140\n )\n\n return (\n <>\n {enablePullToRefresh && onRefresh && (\n <div\n className=\"flex items-center justify-center\"\n style={{\n height: refreshHeaderHeight,\n overflow: 'hidden',\n }}\n >\n <RefreshIndicator\n pullDistance={pullToRefreshState.pullDistance}\n threshold={DEFAULT_REFRESH_PULL_THRESHOLD}\n isRefreshing={refreshing ?? false}\n canRefresh={pullToRefreshState.canRefresh}\n className=\"relative top-0 inset-x-auto\"\n />\n </div>\n )}\n {header && <div>{header}</div>}\n </>\n )\n }, [header, enablePullToRefresh, onRefresh, pullToRefreshState, refreshing])\n\n return (\n <div\n ref={containerRef}\n className={cn('relative transition-all duration-200', classNames)}\n style={{\n height,\n }}\n >\n <Virtuoso\n ref={virtuosoRef}\n className=\"h-full w-full\"\n data={items}\n itemContent={itemContent}\n components={{\n Header: EnhancedHeader,\n Footer,\n }}\n endReached={fetchMore ? _fetchMore : undefined}\n {...virtuosoProps}\n />\n </div>\n )\n}\n"],"names":["DEFAULT_REFRESH_PULL_THRESHOLD","ELEMENT_BIND_DELAY","List","items","height","renderItem","className","showScrollbar","header","fetchMore","loadingComponent","isFetchingMore","onRefresh","refreshing","enablePullToRefresh","virtuosoProps","inFlightFetchMoreRef","useRef","virtuosoRef","containerRef","pullToRefreshState","bindToElement","usePullToRefresh","_fetchMore","useCallback","current","itemContent","index","item","Footer","jsx","Pagination","classNames","cn","useEffect","cleanup","timeoutId","scrollableElement","findVirtuosoScrollableElement","EnhancedHeader","effectivePullDistance","refreshHeaderHeight","jsxs","Fragment","RefreshIndicator","Virtuoso"],"mappings":"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"}
1
+ {"version":3,"file":"list.js","sources":["../../../src/components/atoms/list.tsx"],"sourcesContent":["import {useCallback, useEffect, useRef} from 'react'\n\nimport {Virtuoso, VirtuosoProps} from 'react-virtuoso'\n\nimport {RefreshIndicator} from '../../internal/components/refresh-indicator'\nimport {usePullToRefresh} from '../../internal/usePullToRefresh'\nimport {findVirtuosoScrollableElement} from '../../internal/utils/virtuoso-dom'\nimport {cn} from '../../lib/utils'\nimport '../../styles/utilities.css'\nimport {Skeleton} from '../ui/skeleton'\n\nconst DEFAULT_REFRESH_PULL_THRESHOLD = 200\nconst ELEMENT_BIND_DELAY = 100\n\ninterface Props<T = any>\n extends Omit<\n VirtuosoProps<T, unknown>,\n 'data' | 'itemContent' | 'endReached'\n > {\n items: T[]\n renderItem: (item: T, index: number) => React.ReactNode\n showScrollbar?: boolean\n header?: React.ReactNode\n fetchMore?: () => Promise<void>\n loadingComponent?: React.ReactNode\n onRefresh?: () => Promise<void>\n refreshing?: boolean\n enablePullToRefresh?: boolean\n}\n\nexport function List<T = any>({\n items,\n height,\n renderItem,\n className,\n showScrollbar = false,\n header,\n fetchMore,\n loadingComponent,\n onRefresh,\n refreshing,\n enablePullToRefresh = true,\n ...virtuosoProps\n}: Props<T>) {\n const inFlightFetchMoreRef = useRef<Promise<void> | null>(null)\n const virtuosoRef = useRef<any>(null)\n const containerRef = useRef<HTMLDivElement>(null)\n\n const {state: pullToRefreshState, bindToElement} = usePullToRefresh({\n onRefresh,\n threshold: DEFAULT_REFRESH_PULL_THRESHOLD,\n enabled: enablePullToRefresh && Boolean(onRefresh),\n })\n\n const _fetchMore = useCallback(() => {\n // Dedupe concurrent calls by returning the same in-flight promise\n if (inFlightFetchMoreRef.current) return\n\n const current = Promise.resolve(fetchMore?.()).finally(() => {\n // Only clear if this is still the most recent promise\n if (inFlightFetchMoreRef.current === current) {\n inFlightFetchMoreRef.current = null\n }\n })\n\n inFlightFetchMoreRef.current = current\n }, [fetchMore])\n\n const itemContent = useCallback(\n (index: number, item: T) => <>{renderItem(item, index)}</>,\n [renderItem]\n )\n\n const Footer = useCallback(() => {\n if (!fetchMore) return null\n\n return loadingComponent ?? <Skeleton className=\"h-10 w-full p-8\" />\n }, [loadingComponent, fetchMore])\n\n const classNames = cn(showScrollbar ? undefined : 'no-scrollbars', className)\n\n useEffect(() => {\n if (containerRef.current && enablePullToRefresh && onRefresh) {\n let cleanup: (() => void) | undefined\n\n const findAndBind = () => {\n if (!containerRef.current) return\n\n const scrollableElement = findVirtuosoScrollableElement(\n containerRef.current\n )\n cleanup = bindToElement(scrollableElement)\n }\n\n const timeoutId = setTimeout(findAndBind, ELEMENT_BIND_DELAY)\n\n return () => {\n clearTimeout(timeoutId)\n if (cleanup) cleanup()\n }\n }\n return undefined\n }, [bindToElement, enablePullToRefresh, onRefresh])\n\n const EnhancedHeader = useCallback(() => {\n const effectivePullDistance = refreshing\n ? Math.max(pullToRefreshState.pullDistance, 140)\n : pullToRefreshState.pullDistance\n\n const refreshHeaderHeight = Math.min(\n Math.max(effectivePullDistance, 0),\n 140\n )\n\n return (\n <>\n {enablePullToRefresh && onRefresh && (\n <div\n className=\"flex items-center justify-center\"\n style={{\n height: refreshHeaderHeight,\n overflow: 'hidden',\n }}\n >\n <RefreshIndicator\n pullDistance={pullToRefreshState.pullDistance}\n threshold={DEFAULT_REFRESH_PULL_THRESHOLD}\n isRefreshing={refreshing ?? false}\n canRefresh={pullToRefreshState.canRefresh}\n className=\"relative top-0 inset-x-auto\"\n />\n </div>\n )}\n {header && <div>{header}</div>}\n </>\n )\n }, [header, enablePullToRefresh, onRefresh, pullToRefreshState, refreshing])\n\n return (\n <div\n ref={containerRef}\n className={cn('relative transition-all duration-200', classNames)}\n style={{\n height,\n }}\n >\n <Virtuoso\n ref={virtuosoRef}\n className=\"h-full w-full\"\n data={items}\n itemContent={itemContent}\n components={{\n Header: EnhancedHeader,\n Footer,\n }}\n endReached={fetchMore ? _fetchMore : undefined}\n {...virtuosoProps}\n />\n </div>\n )\n}\n"],"names":["DEFAULT_REFRESH_PULL_THRESHOLD","ELEMENT_BIND_DELAY","List","items","height","renderItem","className","showScrollbar","header","fetchMore","loadingComponent","onRefresh","refreshing","enablePullToRefresh","virtuosoProps","inFlightFetchMoreRef","useRef","virtuosoRef","containerRef","pullToRefreshState","bindToElement","usePullToRefresh","_fetchMore","useCallback","current","itemContent","index","item","Footer","jsx","Skeleton","classNames","cn","useEffect","cleanup","timeoutId","scrollableElement","findVirtuosoScrollableElement","EnhancedHeader","effectivePullDistance","refreshHeaderHeight","jsxs","Fragment","RefreshIndicator","Virtuoso"],"mappings":";;;;;;;;;AAWA,MAAMA,IAAiC,KACjCC,IAAqB;AAkBpB,SAASC,EAAc;AAAA,EAC5B,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,qBAAAC,IAAsB;AAAA,EACtB,GAAGC;AACL,GAAa;AACL,QAAAC,IAAuBC,EAA6B,IAAI,GACxDC,IAAcD,EAAY,IAAI,GAC9BE,IAAeF,EAAuB,IAAI,GAE1C,EAAC,OAAOG,GAAoB,eAAAC,EAAA,IAAiBC,EAAiB;AAAA,IAClE,WAAAV;AAAA,IACA,WAAWX;AAAA,IACX,SAASa,KAAuB,EAAQF;AAAA,EAAS,CAClD,GAEKW,IAAaC,EAAY,MAAM;AAEnC,QAAIR,EAAqB,QAAS;AAElC,UAAMS,IAAU,QAAQ,QAAQf,IAAa,CAAA,EAAE,QAAQ,MAAM;AAEvD,MAAAM,EAAqB,YAAYS,MACnCT,EAAqB,UAAU;AAAA,IACjC,CACD;AAED,IAAAA,EAAqB,UAAUS;AAAA,EAAA,GAC9B,CAACf,CAAS,CAAC,GAERgB,IAAcF;AAAA,IAClB,CAACG,GAAeC,6BAAe,UAAWtB,EAAAsB,GAAMD,CAAK,GAAE;AAAA,IACvD,CAACrB,CAAU;AAAA,EACb,GAEMuB,IAASL,EAAY,MACpBd,IAEEC,KAAoB,gBAAAmB,EAACC,GAAS,EAAA,WAAU,kBAAkB,CAAA,IAF1C,MAGtB,CAACpB,GAAkBD,CAAS,CAAC,GAE1BsB,IAAaC,EAAGzB,IAAgB,SAAY,iBAAiBD,CAAS;AAE5E,EAAA2B,EAAU,MAAM;AACV,QAAAf,EAAa,WAAWL,KAAuBF,GAAW;AACxD,UAAAuB;AAWE,YAAAC,IAAY,WATE,MAAM;AACpB,YAAA,CAACjB,EAAa,QAAS;AAE3B,cAAMkB,IAAoBC;AAAA,UACxBnB,EAAa;AAAA,QACf;AACA,QAAAgB,IAAUd,EAAcgB,CAAiB;AAAA,MAC3C,GAE0CnC,CAAkB;AAE5D,aAAO,MAAM;AACX,qBAAakC,CAAS,GAClBD,KAAiBA,EAAA;AAAA,MACvB;AAAA,IAAA;AAAA,EAGD,GAAA,CAACd,GAAeP,GAAqBF,CAAS,CAAC;AAE5C,QAAA2B,IAAiBf,EAAY,MAAM;AACjC,UAAAgB,IAAwB3B,IAC1B,KAAK,IAAIO,EAAmB,cAAc,GAAG,IAC7CA,EAAmB,cAEjBqB,IAAsB,KAAK;AAAA,MAC/B,KAAK,IAAID,GAAuB,CAAC;AAAA,MACjC;AAAA,IACF;AAEA,WAEK,gBAAAE,EAAAC,GAAA,EAAA,UAAA;AAAA,MAAA7B,KAAuBF,KACtB,gBAAAkB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO;AAAA,YACL,QAAQW;AAAA,YACR,UAAU;AAAA,UACZ;AAAA,UAEA,UAAA,gBAAAX;AAAA,YAACc;AAAA,YAAA;AAAA,cACC,cAAcxB,EAAmB;AAAA,cACjC,WAAWnB;AAAA,cACX,cAAcY,KAAc;AAAA,cAC5B,YAAYO,EAAmB;AAAA,cAC/B,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACZ;AAAA,MACF;AAAA,MAEDX,KAAW,gBAAAqB,EAAA,OAAA,EAAK,UAAOrB,EAAA,CAAA;AAAA,IAAA,GAC1B;AAAA,EAAA,GAED,CAACA,GAAQK,GAAqBF,GAAWQ,GAAoBP,CAAU,CAAC;AAGzE,SAAA,gBAAAiB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKX;AAAA,MACL,WAAWc,EAAG,wCAAwCD,CAAU;AAAA,MAChE,OAAO;AAAA,QACL,QAAA3B;AAAA,MACF;AAAA,MAEA,UAAA,gBAAAyB;AAAA,QAACe;AAAAA,QAAA;AAAA,UACC,KAAK3B;AAAA,UACL,WAAU;AAAA,UACV,MAAMd;AAAA,UACN,aAAAsB;AAAA,UACA,YAAY;AAAA,YACV,QAAQa;AAAA,YACR,QAAAV;AAAA,UACF;AAAA,UACA,YAAYnB,IAAYa,IAAa;AAAA,UACpC,GAAGR;AAAA,QAAA;AAAA,MAAA;AAAA,IACN;AAAA,EACF;AAEJ;"}
@@ -1,4 +1,4 @@
1
- import { __exports as i } from "../../../../../../_virtual/index3.js";
1
+ import { __exports as i } from "../../../../../../_virtual/index4.js";
2
2
  var c;
3
3
  function d() {
4
4
  if (c) return i;
@@ -1,6 +1,6 @@
1
1
  import S from "../../../../../../../_virtual/window.js";
2
2
  import B from "../../../../../../../_virtual/document.js";
3
- import il from "../../../../../../../_virtual/index4.js";
3
+ import il from "../../../../../../../_virtual/index3.js";
4
4
  import ao from "../../../../../../../_virtual/browser-index.js";
5
5
  import xe from "../../../../@babel_runtime@7.27.6/node_modules/@babel/runtime/helpers/esm/extends.js";
6
6
  import Kc from "../../../../@videojs_vhs-utils@4.1.1/node_modules/@videojs/vhs-utils/es/resolve-url.js";
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@shopify/shop-minis-react",
3
3
  "license": "SEE LICENSE IN LICENSE.txt",
4
- "version": "0.4.1",
4
+ "version": "0.4.2",
5
5
  "sideEffects": false,
6
6
  "type": "module",
7
7
  "engines": {
@@ -7,8 +7,7 @@ import {usePullToRefresh} from '../../internal/usePullToRefresh'
7
7
  import {findVirtuosoScrollableElement} from '../../internal/utils/virtuoso-dom'
8
8
  import {cn} from '../../lib/utils'
9
9
  import '../../styles/utilities.css'
10
-
11
- import {Pagination} from './pagination'
10
+ import {Skeleton} from '../ui/skeleton'
12
11
 
13
12
  const DEFAULT_REFRESH_PULL_THRESHOLD = 200
14
13
  const ELEMENT_BIND_DELAY = 100
@@ -24,7 +23,6 @@ interface Props<T = any>
24
23
  header?: React.ReactNode
25
24
  fetchMore?: () => Promise<void>
26
25
  loadingComponent?: React.ReactNode
27
- isFetchingMore?: boolean
28
26
  onRefresh?: () => Promise<void>
29
27
  refreshing?: boolean
30
28
  enablePullToRefresh?: boolean
@@ -39,7 +37,6 @@ export function List<T = any>({
39
37
  header,
40
38
  fetchMore,
41
39
  loadingComponent,
42
- isFetchingMore,
43
40
  onRefresh,
44
41
  refreshing,
45
42
  enablePullToRefresh = true,
@@ -77,14 +74,8 @@ export function List<T = any>({
77
74
  const Footer = useCallback(() => {
78
75
  if (!fetchMore) return null
79
76
 
80
- return (
81
- <Pagination
82
- fetchMore={_fetchMore}
83
- loadingComponent={loadingComponent}
84
- isFetchingMore={isFetchingMore}
85
- />
86
- )
87
- }, [_fetchMore, fetchMore, loadingComponent, isFetchingMore])
77
+ return loadingComponent ?? <Skeleton className="h-10 w-full p-8" />
78
+ }, [loadingComponent, fetchMore])
88
79
 
89
80
  const classNames = cn(showScrollbar ? undefined : 'no-scrollbars', className)
90
81
 
@@ -1,10 +0,0 @@
1
- import { jsx as o } from "react/jsx-runtime";
2
- import { Skeleton as e } from "../ui/skeleton.js";
3
- import { TrackingPixel as i } from "./tracking-pixel.js";
4
- function c({ loadingComponent: r, fetchMore: n }) {
5
- return /* @__PURE__ */ o(i, { onImpression: n, children: r ?? /* @__PURE__ */ o(e, { className: "h-10 w-full p-8" }) });
6
- }
7
- export {
8
- c as Pagination
9
- };
10
- //# sourceMappingURL=pagination.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"pagination.js","sources":["../../../src/components/atoms/pagination.tsx"],"sourcesContent":["import {Skeleton} from '../ui/skeleton'\n\nimport {TrackingPixel} from './tracking-pixel'\n\ninterface Props {\n loadingComponent?: React.ReactNode\n isFetchingMore?: boolean\n fetchMore: () => void\n}\n\nexport function Pagination({loadingComponent, fetchMore}: Props) {\n const loadingPlaceholder = loadingComponent ?? (\n <Skeleton className=\"h-10 w-full p-8\" />\n )\n\n return (\n <TrackingPixel onImpression={fetchMore}>{loadingPlaceholder}</TrackingPixel>\n )\n}\n"],"names":["Pagination","loadingComponent","fetchMore","jsx","TrackingPixel","Skeleton"],"mappings":";;;AAUO,SAASA,EAAW,EAAC,kBAAAC,GAAkB,WAAAC,KAAmB;AAK/D,SACG,gBAAAC,EAAAC,GAAA,EAAc,cAAcF,GAAY,UALhBD,KACxB,gBAAAE,EAAAE,GAAA,EAAS,WAAU,mBAAkB,GAIsB;AAEhE;"}
@@ -1,32 +0,0 @@
1
- import { jsx as m } from "react/jsx-runtime";
2
- import { useCallback as n } from "react";
3
- import { InView as c } from "../../shop-minis-react/node_modules/.pnpm/react-intersection-observer@9.13.1_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/react-intersection-observer/dist/index.js";
4
- const x = ({
5
- children: o,
6
- onImpression: r,
7
- triggerOnce: i = !1,
8
- threshold: t,
9
- className: a
10
- }) => {
11
- const e = n(
12
- (f) => {
13
- f && r?.();
14
- },
15
- [r]
16
- );
17
- return /* @__PURE__ */ m(
18
- c,
19
- {
20
- as: "div",
21
- onChange: e,
22
- triggerOnce: i,
23
- className: a,
24
- threshold: t,
25
- children: o
26
- }
27
- );
28
- };
29
- export {
30
- x as TrackingPixel
31
- };
32
- //# sourceMappingURL=tracking-pixel.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"tracking-pixel.js","sources":["../../../src/components/atoms/tracking-pixel.tsx"],"sourcesContent":["import {useCallback} from 'react'\n\nimport {InView} from 'react-intersection-observer'\n\ninterface Props {\n children: React.ReactNode\n onImpression?: () => void\n triggerOnce?: boolean\n threshold?: number\n className?: string\n}\n\nexport const TrackingPixel = ({\n children,\n onImpression,\n triggerOnce = false,\n threshold,\n className,\n}: Props) => {\n const onChange = useCallback(\n (inView: boolean) => {\n if (inView) {\n onImpression?.()\n }\n },\n [onImpression]\n )\n\n return (\n <InView\n as=\"div\"\n onChange={onChange}\n triggerOnce={triggerOnce}\n className={className}\n threshold={threshold}\n >\n {children}\n </InView>\n )\n}\n"],"names":["TrackingPixel","children","onImpression","triggerOnce","threshold","className","onChange","useCallback","inView","jsx","InView"],"mappings":";;;AAYO,MAAMA,IAAgB,CAAC;AAAA,EAC5B,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,WAAAC;AAAA,EACA,WAAAC;AACF,MAAa;AACX,QAAMC,IAAWC;AAAA,IACf,CAACC,MAAoB;AACnB,MAAIA,KACaN,IAAA;AAAA,IAEnB;AAAA,IACA,CAACA,CAAY;AAAA,EACf;AAGE,SAAA,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAG;AAAA,MACH,UAAAJ;AAAA,MACA,aAAAH;AAAA,MACA,WAAAE;AAAA,MACA,WAAAD;AAAA,MAEC,UAAAH;AAAA,IAAA;AAAA,EACH;AAEJ;"}
@@ -1,135 +0,0 @@
1
- import * as b from "react";
2
- var V = Object.defineProperty, w = (e, t, i) => t in e ? V(e, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : e[t] = i, u = (e, t, i) => w(e, typeof t != "symbol" ? t + "" : t, i), p = /* @__PURE__ */ new Map(), l = /* @__PURE__ */ new WeakMap(), f = 0, _ = void 0;
3
- function I(e) {
4
- return e ? (l.has(e) || (f += 1, l.set(e, f.toString())), l.get(e)) : "0";
5
- }
6
- function y(e) {
7
- return Object.keys(e).sort().filter(
8
- (t) => e[t] !== void 0
9
- ).map((t) => `${t}_${t === "root" ? I(e.root) : e[t]}`).toString();
10
- }
11
- function m(e) {
12
- const t = y(e);
13
- let i = p.get(t);
14
- if (!i) {
15
- const r = /* @__PURE__ */ new Map();
16
- let d;
17
- const n = new IntersectionObserver((o) => {
18
- o.forEach((s) => {
19
- var h;
20
- const c = s.isIntersecting && d.some((a) => s.intersectionRatio >= a);
21
- e.trackVisibility && typeof s.isVisible > "u" && (s.isVisible = c), (h = r.get(s.target)) == null || h.forEach((a) => {
22
- a(c, s);
23
- });
24
- });
25
- }, e);
26
- d = n.thresholds || (Array.isArray(e.threshold) ? e.threshold : [e.threshold || 0]), i = {
27
- id: t,
28
- observer: n,
29
- elements: r
30
- }, p.set(t, i);
31
- }
32
- return i;
33
- }
34
- function M(e, t, i = {}, r = _) {
35
- if (typeof window.IntersectionObserver > "u" && r !== void 0) {
36
- const h = e.getBoundingClientRect();
37
- return t(r, {
38
- isIntersecting: r,
39
- target: e,
40
- intersectionRatio: typeof i.threshold == "number" ? i.threshold : 0,
41
- time: 0,
42
- boundingClientRect: h,
43
- intersectionRect: h,
44
- rootBounds: h
45
- }), () => {
46
- };
47
- }
48
- const { id: d, observer: n, elements: o } = m(i), s = o.get(e) || [];
49
- return o.has(e) || o.set(e, s), s.push(t), n.observe(e), function() {
50
- s.splice(s.indexOf(t), 1), s.length === 0 && (o.delete(e), n.unobserve(e)), o.size === 0 && (n.disconnect(), p.delete(d));
51
- };
52
- }
53
- function O(e) {
54
- return typeof e.children != "function";
55
- }
56
- var R = class extends b.Component {
57
- constructor(e) {
58
- super(e), u(this, "node", null), u(this, "_unobserveCb", null), u(this, "handleNode", (t) => {
59
- this.node && (this.unobserve(), !t && !this.props.triggerOnce && !this.props.skip && this.setState({ inView: !!this.props.initialInView, entry: void 0 })), this.node = t || null, this.observeNode();
60
- }), u(this, "handleChange", (t, i) => {
61
- t && this.props.triggerOnce && this.unobserve(), O(this.props) || this.setState({ inView: t, entry: i }), this.props.onChange && this.props.onChange(t, i);
62
- }), this.state = {
63
- inView: !!e.initialInView,
64
- entry: void 0
65
- };
66
- }
67
- componentDidMount() {
68
- this.unobserve(), this.observeNode();
69
- }
70
- componentDidUpdate(e) {
71
- (e.rootMargin !== this.props.rootMargin || e.root !== this.props.root || e.threshold !== this.props.threshold || e.skip !== this.props.skip || e.trackVisibility !== this.props.trackVisibility || e.delay !== this.props.delay) && (this.unobserve(), this.observeNode());
72
- }
73
- componentWillUnmount() {
74
- this.unobserve();
75
- }
76
- observeNode() {
77
- if (!this.node || this.props.skip) return;
78
- const {
79
- threshold: e,
80
- root: t,
81
- rootMargin: i,
82
- trackVisibility: r,
83
- delay: d,
84
- fallbackInView: n
85
- } = this.props;
86
- this._unobserveCb = M(
87
- this.node,
88
- this.handleChange,
89
- {
90
- threshold: e,
91
- root: t,
92
- rootMargin: i,
93
- // @ts-ignore
94
- trackVisibility: r,
95
- // @ts-ignore
96
- delay: d
97
- },
98
- n
99
- );
100
- }
101
- unobserve() {
102
- this._unobserveCb && (this._unobserveCb(), this._unobserveCb = null);
103
- }
104
- render() {
105
- const { children: e } = this.props;
106
- if (typeof e == "function") {
107
- const { inView: g, entry: C } = this.state;
108
- return e({ inView: g, entry: C, ref: this.handleNode });
109
- }
110
- const {
111
- as: t,
112
- triggerOnce: i,
113
- threshold: r,
114
- root: d,
115
- rootMargin: n,
116
- onChange: o,
117
- skip: s,
118
- trackVisibility: h,
119
- delay: c,
120
- initialInView: a,
121
- fallbackInView: N,
122
- ...v
123
- } = this.props;
124
- return b.createElement(
125
- t || "div",
126
- { ref: this.handleNode, ...v },
127
- e
128
- );
129
- }
130
- };
131
- export {
132
- R as InView,
133
- M as observe
134
- };
135
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sources":["../../../../../../../../node_modules/.pnpm/react-intersection-observer@9.13.1_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/react-intersection-observer/dist/index.mjs"],"sourcesContent":["\"use client\";\nvar __defProp = Object.defineProperty;\nvar __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;\nvar __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== \"symbol\" ? key + \"\" : key, value);\n\n// src/InView.tsx\nimport * as React from \"react\";\n\n// src/observe.ts\nvar observerMap = /* @__PURE__ */ new Map();\nvar RootIds = /* @__PURE__ */ new WeakMap();\nvar rootId = 0;\nvar unsupportedValue = void 0;\nfunction defaultFallbackInView(inView) {\n unsupportedValue = inView;\n}\nfunction getRootId(root) {\n if (!root) return \"0\";\n if (RootIds.has(root)) return RootIds.get(root);\n rootId += 1;\n RootIds.set(root, rootId.toString());\n return RootIds.get(root);\n}\nfunction optionsToId(options) {\n return Object.keys(options).sort().filter(\n (key) => options[key] !== void 0\n ).map((key) => {\n return `${key}_${key === \"root\" ? getRootId(options.root) : options[key]}`;\n }).toString();\n}\nfunction createObserver(options) {\n const id = optionsToId(options);\n let instance = observerMap.get(id);\n if (!instance) {\n const elements = /* @__PURE__ */ new Map();\n let thresholds;\n const observer = new IntersectionObserver((entries) => {\n entries.forEach((entry) => {\n var _a;\n const inView = entry.isIntersecting && thresholds.some((threshold) => entry.intersectionRatio >= threshold);\n if (options.trackVisibility && typeof entry.isVisible === \"undefined\") {\n entry.isVisible = inView;\n }\n (_a = elements.get(entry.target)) == null ? void 0 : _a.forEach((callback) => {\n callback(inView, entry);\n });\n });\n }, options);\n thresholds = observer.thresholds || (Array.isArray(options.threshold) ? options.threshold : [options.threshold || 0]);\n instance = {\n id,\n observer,\n elements\n };\n observerMap.set(id, instance);\n }\n return instance;\n}\nfunction observe(element, callback, options = {}, fallbackInView = unsupportedValue) {\n if (typeof window.IntersectionObserver === \"undefined\" && fallbackInView !== void 0) {\n const bounds = element.getBoundingClientRect();\n callback(fallbackInView, {\n isIntersecting: fallbackInView,\n target: element,\n intersectionRatio: typeof options.threshold === \"number\" ? options.threshold : 0,\n time: 0,\n boundingClientRect: bounds,\n intersectionRect: bounds,\n rootBounds: bounds\n });\n return () => {\n };\n }\n const { id, observer, elements } = createObserver(options);\n const callbacks = elements.get(element) || [];\n if (!elements.has(element)) {\n elements.set(element, callbacks);\n }\n callbacks.push(callback);\n observer.observe(element);\n return function unobserve() {\n callbacks.splice(callbacks.indexOf(callback), 1);\n if (callbacks.length === 0) {\n elements.delete(element);\n observer.unobserve(element);\n }\n if (elements.size === 0) {\n observer.disconnect();\n observerMap.delete(id);\n }\n };\n}\n\n// src/InView.tsx\nfunction isPlainChildren(props) {\n return typeof props.children !== \"function\";\n}\nvar InView = class extends React.Component {\n constructor(props) {\n super(props);\n __publicField(this, \"node\", null);\n __publicField(this, \"_unobserveCb\", null);\n __publicField(this, \"handleNode\", (node) => {\n if (this.node) {\n this.unobserve();\n if (!node && !this.props.triggerOnce && !this.props.skip) {\n this.setState({ inView: !!this.props.initialInView, entry: void 0 });\n }\n }\n this.node = node ? node : null;\n this.observeNode();\n });\n __publicField(this, \"handleChange\", (inView, entry) => {\n if (inView && this.props.triggerOnce) {\n this.unobserve();\n }\n if (!isPlainChildren(this.props)) {\n this.setState({ inView, entry });\n }\n if (this.props.onChange) {\n this.props.onChange(inView, entry);\n }\n });\n this.state = {\n inView: !!props.initialInView,\n entry: void 0\n };\n }\n componentDidMount() {\n this.unobserve();\n this.observeNode();\n }\n componentDidUpdate(prevProps) {\n if (prevProps.rootMargin !== this.props.rootMargin || prevProps.root !== this.props.root || prevProps.threshold !== this.props.threshold || prevProps.skip !== this.props.skip || prevProps.trackVisibility !== this.props.trackVisibility || prevProps.delay !== this.props.delay) {\n this.unobserve();\n this.observeNode();\n }\n }\n componentWillUnmount() {\n this.unobserve();\n }\n observeNode() {\n if (!this.node || this.props.skip) return;\n const {\n threshold,\n root,\n rootMargin,\n trackVisibility,\n delay,\n fallbackInView\n } = this.props;\n this._unobserveCb = observe(\n this.node,\n this.handleChange,\n {\n threshold,\n root,\n rootMargin,\n // @ts-ignore\n trackVisibility,\n // @ts-ignore\n delay\n },\n fallbackInView\n );\n }\n unobserve() {\n if (this._unobserveCb) {\n this._unobserveCb();\n this._unobserveCb = null;\n }\n }\n render() {\n const { children } = this.props;\n if (typeof children === \"function\") {\n const { inView, entry } = this.state;\n return children({ inView, entry, ref: this.handleNode });\n }\n const {\n as,\n triggerOnce,\n threshold,\n root,\n rootMargin,\n onChange,\n skip,\n trackVisibility,\n delay,\n initialInView,\n fallbackInView,\n ...props\n } = this.props;\n return React.createElement(\n as || \"div\",\n { ref: this.handleNode, ...props },\n children\n );\n }\n};\n\n// src/useInView.tsx\nimport * as React2 from \"react\";\nfunction useInView({\n threshold,\n delay,\n trackVisibility,\n rootMargin,\n root,\n triggerOnce,\n skip,\n initialInView,\n fallbackInView,\n onChange\n} = {}) {\n var _a;\n const [ref, setRef] = React2.useState(null);\n const callback = React2.useRef();\n const [state, setState] = React2.useState({\n inView: !!initialInView,\n entry: void 0\n });\n callback.current = onChange;\n React2.useEffect(\n () => {\n if (skip || !ref) return;\n let unobserve;\n unobserve = observe(\n ref,\n (inView, entry) => {\n setState({\n inView,\n entry\n });\n if (callback.current) callback.current(inView, entry);\n if (entry.isIntersecting && triggerOnce && unobserve) {\n unobserve();\n unobserve = void 0;\n }\n },\n {\n root,\n rootMargin,\n threshold,\n // @ts-ignore\n trackVisibility,\n // @ts-ignore\n delay\n },\n fallbackInView\n );\n return () => {\n if (unobserve) {\n unobserve();\n }\n };\n },\n // We break the rule here, because we aren't including the actual `threshold` variable\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [\n // If the threshold is an array, convert it to a string, so it won't change between renders.\n Array.isArray(threshold) ? threshold.toString() : threshold,\n ref,\n root,\n rootMargin,\n triggerOnce,\n skip,\n trackVisibility,\n fallbackInView,\n delay\n ]\n );\n const entryTarget = (_a = state.entry) == null ? void 0 : _a.target;\n const previousEntryTarget = React2.useRef();\n if (!ref && entryTarget && !triggerOnce && !skip && previousEntryTarget.current !== entryTarget) {\n previousEntryTarget.current = entryTarget;\n setState({\n inView: !!initialInView,\n entry: void 0\n });\n }\n const result = [setRef, state.inView, state.entry];\n result.ref = result[0];\n result.inView = result[1];\n result.entry = result[2];\n return result;\n}\nexport {\n InView,\n defaultFallbackInView,\n observe,\n useInView\n};\n//# sourceMappingURL=index.mjs.map"],"names":["__defProp","__defNormalProp","obj","key","value","__publicField","observerMap","RootIds","rootId","unsupportedValue","getRootId","root","optionsToId","options","createObserver","id","instance","elements","thresholds","observer","entries","entry","_a","inView","threshold","callback","observe","element","fallbackInView","bounds","callbacks","isPlainChildren","props","InView","React","node","prevProps","rootMargin","trackVisibility","delay","children","as","triggerOnce","onChange","skip","initialInView"],"mappings":"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","x_google_ignoreList":[0]}
@@ -1,19 +0,0 @@
1
- import {Skeleton} from '../ui/skeleton'
2
-
3
- import {TrackingPixel} from './tracking-pixel'
4
-
5
- interface Props {
6
- loadingComponent?: React.ReactNode
7
- isFetchingMore?: boolean
8
- fetchMore: () => void
9
- }
10
-
11
- export function Pagination({loadingComponent, fetchMore}: Props) {
12
- const loadingPlaceholder = loadingComponent ?? (
13
- <Skeleton className="h-10 w-full p-8" />
14
- )
15
-
16
- return (
17
- <TrackingPixel onImpression={fetchMore}>{loadingPlaceholder}</TrackingPixel>
18
- )
19
- }
@@ -1,40 +0,0 @@
1
- import {useCallback} from 'react'
2
-
3
- import {InView} from 'react-intersection-observer'
4
-
5
- interface Props {
6
- children: React.ReactNode
7
- onImpression?: () => void
8
- triggerOnce?: boolean
9
- threshold?: number
10
- className?: string
11
- }
12
-
13
- export const TrackingPixel = ({
14
- children,
15
- onImpression,
16
- triggerOnce = false,
17
- threshold,
18
- className,
19
- }: Props) => {
20
- const onChange = useCallback(
21
- (inView: boolean) => {
22
- if (inView) {
23
- onImpression?.()
24
- }
25
- },
26
- [onImpression]
27
- )
28
-
29
- return (
30
- <InView
31
- as="div"
32
- onChange={onChange}
33
- triggerOnce={triggerOnce}
34
- className={className}
35
- threshold={threshold}
36
- >
37
- {children}
38
- </InView>
39
- )
40
- }