@sprawlify/primitives 0.0.25 → 0.0.26

package/dist/{scroll-snap-BsPbmOTg.cjs → scroll-snap-BvaE_jFu.cjs}

@@ -1,6 +1,7 @@
 const require_dom_query = require('./dom-query-CWZdWUGp.cjs');
 
 //#region src/shared/scroll-snap/index.ts
+const getDirection = (element) => require_dom_query.getComputedStyle(element).direction;
 function getScrollPadding(element) {
 	const style = require_dom_query.getComputedStyle(element);
 	const rect = element.getBoundingClientRect();
@@ -41,6 +42,7 @@ function getDescendants(parent) {
 }
 function getSnapPositions(parent, subtree = false) {
 	const parentRect = parent.getBoundingClientRect();
+	const isRtl = getDirection(parent) === "rtl";
 	const positions = {
 		x: {
 			start: [],
@@ -57,15 +59,30 @@ function getSnapPositions(parent, subtree = false) {
 	for (const axis of ["x", "y"]) {
 		const orthogonalAxis = axis === "x" ? "y" : "x";
 		const axisStart = axis === "x" ? "left" : "top";
+		const axisEnd = axis === "x" ? "right" : "bottom";
 		const axisSize = axis === "x" ? "width" : "height";
 		const axisScroll = axis === "x" ? "scrollLeft" : "scrollTop";
+		const useRtlCalc = isRtl && axis === "x";
 		for (const child of children) {
 			const childRect = child.getBoundingClientRect();
 			if (!isRectIntersecting(parentRect, childRect, orthogonalAxis)) continue;
 			let [childAlignY, childAlignX] = require_dom_query.getComputedStyle(child).getPropertyValue("scroll-snap-align").split(" ");
 			if (typeof childAlignX === "undefined") childAlignX = childAlignY;
 			const childAlign = axis === "x" ? childAlignX : childAlignY;
-			const childOffsetStart = childRect[axisStart] - parentRect[axisStart] + parent[axisScroll];
+			let childOffsetStart;
+			let childOffsetEnd;
+			let childOffsetCenter;
+			if (useRtlCalc) {
+				const scrollOffset = Math.abs(parent[axisScroll]);
+				const rightOffset = parentRect[axisEnd] - childRect[axisEnd] + scrollOffset;
+				childOffsetStart = rightOffset;
+				childOffsetEnd = rightOffset + childRect[axisSize];
+				childOffsetCenter = rightOffset + childRect[axisSize] / 2;
+			} else {
+				childOffsetStart = childRect[axisStart] - parentRect[axisStart] + parent[axisScroll];
+				childOffsetEnd = childOffsetStart + childRect[axisSize];
+				childOffsetCenter = childOffsetStart + childRect[axisSize] / 2;
+			}
 			switch (childAlign) {
 				case "none": break;
 				case "start":
@@ -77,13 +94,13 @@ function getSnapPositions(parent, subtree = false) {
 				case "center":
 					positions[axis].center.push({
 						node: child,
-						position: childOffsetStart + childRect[axisSize] / 2
+						position: childOffsetCenter
 					});
 					break;
 				case "end":
 					positions[axis].end.push({
 						node: child,
-						position: childOffsetStart + childRect[axisSize]
+						position: childOffsetEnd
 					});
 					break;
 			}
@@ -92,6 +109,7 @@ function getSnapPositions(parent, subtree = false) {
 	return positions;
 }
 function getScrollSnapPositions(element) {
+	const dir = getDirection(element);
 	const rect = element.getBoundingClientRect();
 	const scrollPadding = getScrollPadding(element);
 	const snapPositions = getSnapPositions(element);
@@ -99,12 +117,23 @@ function getScrollSnapPositions(element) {
 		x: element.scrollWidth - element.offsetWidth,
 		y: element.scrollHeight - element.offsetHeight
 	};
-	return {
-		x: uniq([
-			...snapPositions.x.start.map((v) => v.position - scrollPadding.x.before),
+	const isRtl = dir === "rtl";
+	const usesNegativeScrollLeft = isRtl && element.scrollLeft <= 0;
+	let xPositions;
+	if (isRtl) {
+		xPositions = uniq([
+			...snapPositions.x.start.map((v) => v.position - scrollPadding.x.after),
 			...snapPositions.x.center.map((v) => v.position - rect.width / 2),
-			...snapPositions.x.end.map((v) => v.position - rect.width + scrollPadding.x.after)
-		].map(clamp(0, maxScroll.x))),
+			...snapPositions.x.end.map((v) => v.position - rect.width + scrollPadding.x.before)
+		].map(clamp(0, maxScroll.x)));
+		if (usesNegativeScrollLeft) xPositions = xPositions.map((pos) => -pos);
+	} else xPositions = uniq([
+		...snapPositions.x.start.map((v) => v.position - scrollPadding.x.before),
+		...snapPositions.x.center.map((v) => v.position - rect.width / 2),
+		...snapPositions.x.end.map((v) => v.position - rect.width + scrollPadding.x.after)
+	].map(clamp(0, maxScroll.x)));
+	return {
+		x: xPositions,
 		y: uniq([
 			...snapPositions.y.start.map((v) => v.position - scrollPadding.y.before),
 			...snapPositions.y.center.map((v) => v.position - rect.height / 2),
@@ -113,13 +142,24 @@ function getScrollSnapPositions(element) {
 	};
 }
 function findSnapPoint(parent, axis, predicate) {
+	const dir = getDirection(parent);
+	const scrollPadding = getScrollPadding(parent);
 	const snapPositions = getSnapPositions(parent);
 	const items = [
 		...snapPositions[axis].start,
 		...snapPositions[axis].center,
 		...snapPositions[axis].end
 	];
-	for (const item of items) if (predicate(item.node)) return item.position;
+	const isRtl = dir === "rtl";
+	const usesNegativeScrollLeft = isRtl && axis === "x" && parent.scrollLeft <= 0;
+	for (const item of items) if (predicate(item.node)) {
+		let position;
+		if (axis === "x" && isRtl) {
+			position = item.position - scrollPadding.x.after;
+			if (usesNegativeScrollLeft) position = -position;
+		} else position = item.position - (axis === "x" ? scrollPadding.x.before : scrollPadding.y.before);
+		return position;
+	}
 }
 function getSnapPointTarget(parent, snapPoint) {
 	const rect = parent.getBoundingClientRect();

package/dist/scroll-snap.cjs

@@ -1,5 +1,5 @@
 require('./dom-query-CWZdWUGp.cjs');
-const require_scroll_snap = require('./scroll-snap-BsPbmOTg.cjs');
+const require_scroll_snap = require('./scroll-snap-BvaE_jFu.cjs');
 
 exports.findSnapPoint = require_scroll_snap.findSnapPoint;
 exports.getScrollSnapPositions = require_scroll_snap.getScrollSnapPositions;

package/dist/scroll-snap.mjs

@@ -1,4 +1,4 @@
 import "./dom-query-Bwyyt0Vp.mjs";
-import { i as getSnapPositions, n as getScrollSnapPositions, r as getSnapPointTarget, t as findSnapPoint } from "./scroll-snap-D4hJV_c8.mjs";
+import { i as getSnapPositions, n as getScrollSnapPositions, r as getSnapPointTarget, t as findSnapPoint } from "./scroll-snap-B279jSp5.mjs";
 
 export { findSnapPoint, getScrollSnapPositions, getSnapPointTarget, getSnapPositions };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sprawlify/primitives",
-  "version": "0.0.25",
+  "version": "0.0.26",
   "type": "module",
   "description": "A set of primitive components for building user interfaces.",
   "author": "sprawlify <npm@sprawlify.com>",