@tamagui/scroll-view 2.7.6 → 3.0.0-beta.637.1

package/dist/cjs/ScrollView.cjs

@@ -1,43 +1,34 @@
+
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
-  for (var name in all) __defProp(target, name, {
-    get: all[name],
-    enumerable: true
-  });
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
 };
 var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-      get: () => from[key],
-      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-    });
-  }
-  return to;
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: () => from[key],
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
 };
-var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: true
-}), mod);
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var ScrollView_exports = {};
-__export(ScrollView_exports, {
-  ScrollView: () => ScrollView
-});
+__export(ScrollView_exports, { ScrollView: () => ScrollView });
 module.exports = __toCommonJS(ScrollView_exports);
-var import_stacks = require("@tamagui/stacks");
 var import_web = require("@tamagui/web");
-var import_react_native = require("react-native-web");
-const ScrollView = (0, import_web.styled)(import_react_native.ScrollView, {
-  name: "ScrollView",
-  scrollEnabled: true,
-  variants: {
-    fullscreen: {
-      true: import_stacks.fullscreenStyle
-    }
-  }
+var import_WebScrollView = require("./WebScrollView.cjs");
+const ScrollView = (0, import_web.styled)(import_WebScrollView.WebScrollView, {
+	displayName: "ScrollView",
+	scrollEnabled: true
 }, {
-  accept: {
-    contentContainerStyle: "style"
-  }
-});
+	acceptsClassName: true,
+	neverFlatten: true,
+	accept: { contentContainerStyle: "style" }
+});

package/dist/cjs/ScrollView.native.cjs

@@ -0,0 +1,35 @@
+"use strict";
+
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: () => from[key],
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ScrollView_native_exports = {};
+__export(ScrollView_native_exports, { ScrollView: () => ScrollView });
+module.exports = __toCommonJS(ScrollView_native_exports);
+var import_web = require("@tamagui/web");
+var import_react_native = require("react-native");
+var ScrollView = (0, import_web.styled)(import_react_native.ScrollView, {
+	displayName: "ScrollView",
+	scrollEnabled: true
+}, {
+	neverFlatten: true,
+	accept: { contentContainerStyle: "style" }
+});

package/dist/cjs/ScrollView.native.js

@@ -1,46 +1,37 @@
 "use strict";
 
+
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
-  for (var name in all) __defProp(target, name, {
-    get: all[name],
-    enumerable: true
-  });
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
 };
 var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-      get: () => from[key],
-      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-    });
-  }
-  return to;
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: () => from[key],
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
 };
-var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: true
-}), mod);
-var ScrollView_exports = {};
-__export(ScrollView_exports, {
-  ScrollView: () => ScrollView
-});
-module.exports = __toCommonJS(ScrollView_exports);
-var import_stacks = require("@tamagui/stacks");
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ScrollView_native_exports = {};
+__export(ScrollView_native_exports, { ScrollView: () => ScrollView });
+module.exports = __toCommonJS(ScrollView_native_exports);
 var import_web = require("@tamagui/web");
 var import_react_native = require("react-native");
 var ScrollView = (0, import_web.styled)(import_react_native.ScrollView, {
-  name: "ScrollView",
-  scrollEnabled: true,
-  variants: {
-    fullscreen: {
-      true: import_stacks.fullscreenStyle
-    }
-  }
+	displayName: "ScrollView",
+	scrollEnabled: true
 }, {
-  accept: {
-    contentContainerStyle: "style"
-  }
+	neverFlatten: true,
+	accept: { contentContainerStyle: "style" }
 });
+
 //# sourceMappingURL=ScrollView.native.js.map

package/dist/cjs/ScrollView.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","ScrollView_exports","__export","ScrollView","module","exports","import_stacks","require","import_web","import_react_native","styled","name","scrollEnabled","variants","fullscreen","true","fullscreenStyle","accept","contentContainerStyle"],"sources":["../../src/ScrollView.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,kBAAA;AAAAC,QAAA,CAAAD,kBAAA;EAAAE,UAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAT,YAAgC,CAAAK,kBAAA;AAEhC,IAAAK,aAAuB,GAAAC,OAAA;AACvB,IAAAC,UAAA,GAAAD,OAAA,eAA+C;AAExC,IAAAE,mBAAmB,GAAAF,OAAA;AAAA,IACxBJ,UAAA,OAAAK,UAAA,CAAAE,MAAA,EAAAD,mBAAA,CAAAN,UAAA;EACAQ,IAAA;EAAAC,aACQ;EAAAC,QACN;IAEAC,UAAU;MACRC,IAAA,EAAAT,aAAY,CAAAU;IAAA;EACJ;AACR;EAEJC,MAAA;IACAC,qBAAA;EAAA;AACU","ignoreList":[]}
+{"version":3,"file":"ScrollView.native.js","names":[],"sources":["cjs/ScrollView.native.js"],"sourcesContent":["\"use strict\";\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __getOwnPropNames = Object.getOwnPropertyNames;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __export = (target, all) => {\n  for (var name in all)\n    __defProp(target, name, { get: all[name], enumerable: true });\n};\nvar __copyProps = (to, from, except, desc) => {\n  if (from && typeof from === \"object\" || typeof from === \"function\") {\n    for (let key of __getOwnPropNames(from))\n      if (!__hasOwnProp.call(to, key) && key !== except)\n        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });\n  }\n  return to;\n};\nvar __toCommonJS = (mod) => __copyProps(__defProp({}, \"__esModule\", { value: true }), mod);\nvar ScrollView_native_exports = {};\n__export(ScrollView_native_exports, {\n  ScrollView: () => ScrollView\n});\nmodule.exports = __toCommonJS(ScrollView_native_exports);\nvar import_web = require(\"@tamagui/web\");\nvar import_react_native = require(\"react-native\");\nvar ScrollView = (0, import_web.styled)(import_react_native.ScrollView, {\n  displayName: \"ScrollView\",\n  scrollEnabled: true\n}, {\n  neverFlatten: true,\n  accept: {\n    contentContainerStyle: \"style\"\n  }\n});\n//# sourceMappingURL=ScrollView.native.js.map\n"],"mappings":";;;;AACA,IAAI,YAAY,OAAO;AACvB,IAAI,mBAAmB,OAAO;AAC9B,IAAI,oBAAoB,OAAO;AAC/B,IAAI,eAAe,OAAO,UAAU;AACpC,IAAI,YAAY,QAAQ,QAAQ;CAC9B,KAAK,IAAI,QAAQ,KACf,UAAU,QAAQ,MAAM;EAAE,KAAK,IAAI;EAAO,YAAY;CAAK,CAAC;AAChE;AACA,IAAI,eAAe,IAAI,MAAM,QAAQ,SAAS;CAC5C,IAAI,QAAQ,OAAO,SAAS,YAAY,OAAO,SAAS,YAAY;EAClE,KAAK,IAAI,OAAO,kBAAkB,IAAI,GACpC,IAAI,CAAC,aAAa,KAAK,IAAI,GAAG,KAAK,QAAQ,QACzC,UAAU,IAAI,KAAK;GAAE,WAAW,KAAK;GAAM,YAAY,EAAE,OAAO,iBAAiB,MAAM,GAAG,MAAM,KAAK;EAAW,CAAC;CACvH;CACA,OAAO;AACT;AACA,IAAI,gBAAgB,QAAQ,YAAY,UAAU,CAAC,GAAG,cAAc,EAAE,OAAO,KAAK,CAAC,GAAG,GAAG;AACzF,IAAI,4BAA4B,CAAC;AACjC,SAAS,2BAA2B,EAClC,kBAAkB,WACpB,CAAC;AACD,OAAO,UAAU,aAAa,yBAAyB;AACvD,IAAI,aAAa,QAAQ,cAAc;AACvC,IAAI,sBAAsB,QAAQ,cAAc;AAChD,IAAI,cAAc,GAAG,WAAW,QAAQ,oBAAoB,YAAY;CACtE,aAAa;CACb,eAAe;AACjB,GAAG;CACD,cAAc;CACd,QAAQ,EACN,uBAAuB,QACzB;AACF,CAAC"}

package/dist/cjs/WebScrollView.cjs

@@ -0,0 +1,270 @@
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: () => from[key],
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var WebScrollView_exports = {};
+__export(WebScrollView_exports, { WebScrollView: () => WebScrollView });
+module.exports = __toCommonJS(WebScrollView_exports);
+var import_web = require("@tamagui/web");
+var React = __toESM(require("react"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+const View = import_web.View;
+function mergeRefs(...refs) {
+	return (node) => {
+		for (const ref of refs) {
+			if (!ref) continue;
+			if (typeof ref === "function") ref(node);
+			else ref.current = node;
+		}
+	};
+}
+function normalizeScrollEvent(e) {
+	const target = e.target;
+	return {
+		nativeEvent: {
+			contentOffset: {
+				get x() {
+					return target.scrollLeft;
+				},
+				get y() {
+					return target.scrollTop;
+				}
+			},
+			contentSize: {
+				get height() {
+					return target.scrollHeight;
+				},
+				get width() {
+					return target.scrollWidth;
+				}
+			},
+			layoutMeasurement: {
+				get height() {
+					return target.offsetHeight;
+				},
+				get width() {
+					return target.offsetWidth;
+				}
+			}
+		},
+		timeStamp: Date.now()
+	};
+}
+function shouldEmitScrollEvent(lastTick, eventThrottle) {
+	const timeSinceLastTick = Date.now() - lastTick;
+	return eventThrottle > 0 && timeSinceLastTick >= eventThrottle;
+}
+function resolveStyles(...inputs) {
+	const style = {};
+	const classNames = [];
+	const walk = (s) => {
+		if (!s) return;
+		if (Array.isArray(s)) {
+			for (const item of s) walk(item);
+			return;
+		}
+		if (s.$$css) {
+			for (const k in s) {
+				if (k !== "$$css") classNames.push(s[k]);
+			}
+		} else {
+			Object.assign(style, s);
+		}
+	};
+	for (const input of inputs) walk(input);
+	return {
+		style,
+		className: classNames.join(" ")
+	};
+}
+function joinClassNames(...parts) {
+	const joined = parts.filter(Boolean).join(" ").trim();
+	return joined || void 0;
+}
+const commonStyle = {
+	flexGrow: 1,
+	flexShrink: 1
+};
+const styles = {
+	baseVertical: {
+		...commonStyle,
+		flexDirection: "column",
+		overflowX: "hidden",
+		overflowY: "auto"
+	},
+	baseHorizontal: {
+		...commonStyle,
+		flexDirection: "row",
+		overflowX: "auto",
+		overflowY: "hidden"
+	},
+	contentContainerHorizontal: { flexDirection: "row" },
+	contentContainerCenterContent: {
+		justifyContent: "center",
+		flexGrow: 1
+	},
+	stickyHeader: {
+		position: "sticky",
+		top: 0,
+		zIndex: 10
+	},
+	pagingEnabledHorizontal: { scrollSnapType: "x mandatory" },
+	pagingEnabledVertical: { scrollSnapType: "y mandatory" },
+	pagingEnabledChild: { scrollSnapAlign: "start" },
+	scrollDisabled: {
+		overflowX: "hidden",
+		overflowY: "hidden",
+		touchAction: "none"
+	}
+};
+const WebScrollView = React.forwardRef((props, forwardedRef) => {
+	const { children, contentContainerStyle, horizontal, onContentSizeChange, onScroll, refreshControl, stickyHeaderIndices, pagingEnabled, centerContent, scrollEnabled = true, scrollEventThrottle = 0, showsHorizontalScrollIndicator, showsVerticalScrollIndicator, style, keyboardShouldPersistTaps, keyboardDismissMode, contentOffset, contentInset, contentInsetAdjustmentBehavior, decelerationRate, directionalLockEnabled, disableIntervalMomentum, disableScrollViewPanResponder, endFillColor, fadingEdgeLength, indicatorStyle, invertStickyHeaders, maintainVisibleContentPosition, maximumZoomScale, minimumZoomScale, nestedScrollEnabled, onScrollToTop, overScrollMode, pinchGestureEnabled, removeClippedSubviews, scrollIndicatorInsets, scrollPerfTag, scrollToOverflowEnabled, snapToAlignment, snapToEnd, snapToInterval, snapToOffsets, snapToStart, bounces, ...rest } = props;
+	const { dataSet, ...domRest } = rest;
+	const dataAttrs = {};
+	if (dataSet) {
+		for (const key in dataSet) {
+			dataAttrs[`data-${key}`] = dataSet[key];
+		}
+	}
+	const scrollNodeRef = React.useRef(null);
+	const innerViewRef = React.useRef(null);
+	const scrollState = React.useRef({
+		isScrolling: false,
+		scrollLastTick: 0
+	});
+	const scrollTimeout = React.useRef(null);
+	const scrollTo = (options) => {
+		const node = scrollNodeRef.current;
+		if (node == null) return;
+		const { x = 0, y = 0, animated = true } = options || {};
+		if (typeof node.scroll === "function") {
+			node.scroll({
+				top: y,
+				left: x,
+				behavior: animated ? "smooth" : "auto"
+			});
+		} else {
+			node.scrollLeft = x;
+			node.scrollTop = y;
+		}
+	};
+	const scrollToEnd = (options) => {
+		const node = scrollNodeRef.current;
+		if (node == null) return;
+		const animated = (options && options.animated) !== false;
+		const x = horizontal ? node.scrollWidth : 0;
+		const y = horizontal ? 0 : node.scrollHeight;
+		scrollTo({
+			x,
+			y,
+			animated
+		});
+	};
+	const setScrollNodeRef = React.useCallback((node) => {
+		scrollNodeRef.current = node;
+		if (node != null) {
+			node.getScrollResponder = () => node;
+			node.getScrollableNode = () => node;
+			node.getInnerViewNode = () => innerViewRef.current;
+			node.getInnerViewRef = () => innerViewRef.current;
+			node.getNativeScrollRef = () => node;
+			node.scrollTo = scrollTo;
+			node.scrollToEnd = scrollToEnd;
+			node.flashScrollIndicators = () => {};
+		}
+		mergeRefs(forwardedRef)(node);
+	}, [forwardedRef, horizontal]);
+	function handleScroll(e) {
+		e.stopPropagation();
+		if (e.target !== scrollNodeRef.current) return;
+		if (scrollTimeout.current != null) {
+			clearTimeout(scrollTimeout.current);
+		}
+		scrollTimeout.current = setTimeout(() => {
+			scrollState.current.isScrolling = false;
+			onScroll?.(normalizeScrollEvent(e));
+		}, 100);
+		if (scrollState.current.isScrolling) {
+			if (shouldEmitScrollEvent(scrollState.current.scrollLastTick, scrollEventThrottle)) {
+				scrollState.current.scrollLastTick = Date.now();
+				onScroll?.(normalizeScrollEvent(e));
+			}
+		} else {
+			scrollState.current.isScrolling = true;
+			scrollState.current.scrollLastTick = Date.now();
+			onScroll?.(normalizeScrollEvent(e));
+		}
+	}
+	const handleContentLayout = onContentSizeChange ? (e) => {
+		const { width, height } = e.nativeEvent.layout;
+		onContentSizeChange(width, height);
+	} : void 0;
+	const hasStickyHeaderIndices = !horizontal && Array.isArray(stickyHeaderIndices);
+	const renderedChildren = hasStickyHeaderIndices || pagingEnabled ? React.Children.map(children, (child, i) => {
+		const isSticky = hasStickyHeaderIndices && stickyHeaderIndices.indexOf(i) > -1;
+		if (child != null && (isSticky || pagingEnabled)) {
+			const resolved = resolveStyles(isSticky && styles.stickyHeader, pagingEnabled && styles.pagingEnabledChild);
+			return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(View, {
+				style: resolved.style,
+				className: joinClassNames(resolved.className),
+				children: child
+			});
+		}
+		return child;
+	}) : children;
+	const contentResolved = resolveStyles(horizontal && styles.contentContainerHorizontal, centerContent && styles.contentContainerCenterContent, contentContainerStyle);
+	const contentContainer = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(View, {
+		ref: innerViewRef,
+		onLayout: handleContentLayout,
+		style: contentResolved.style,
+		className: joinClassNames(contentResolved.className),
+		children: renderedChildren
+	});
+	const baseStyle = horizontal ? styles.baseHorizontal : styles.baseVertical;
+	const pagingEnabledStyle = horizontal ? styles.pagingEnabledHorizontal : styles.pagingEnabledVertical;
+	const hideHorizontalScrollbar = showsHorizontalScrollIndicator === false;
+	const hideVerticalScrollbar = showsVerticalScrollIndicator === false;
+	const extraClassName = (hideHorizontalScrollbar ? " _hsb-x" : "") + (hideVerticalScrollbar ? " _hsb-y" : "");
+	const scrollResolved = resolveStyles(baseStyle, pagingEnabled && pagingEnabledStyle, style, !scrollEnabled && styles.scrollDisabled);
+	const scrollView = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(View, {
+		...domRest,
+		...dataAttrs,
+		className: joinClassNames(domRest.className, scrollResolved.className, extraClassName),
+		ref: setScrollNodeRef,
+		onScroll: handleScroll,
+		style: scrollResolved.style,
+		children: contentContainer
+	});
+	if (refreshControl) {
+		const refreshResolved = resolveStyles(baseStyle, style);
+		return React.cloneElement(refreshControl, {
+			style: refreshResolved.style,
+			className: joinClassNames(refreshResolved.className)
+		}, scrollView);
+	}
+	return scrollView;
+});
+WebScrollView.displayName = "ScrollView";