base-vaul 0.1.0 → 1.0.0

package/dist/index.d.mts

@@ -182,5 +182,4 @@ declare const Drawer: {
   Description: React.ForwardRefExoticComponent<_base_ui_react0.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
 };
 //#endregion
-export { Content, ContentProps, DialogProps, Drawer, Handle, HandleProps, NestedRoot, Overlay, Portal, Root, WithFadeFromProps, WithoutFadeFromProps };
-//# sourceMappingURL=index.d.mts.map
+export { Content, ContentProps, DialogProps, Drawer, Handle, HandleProps, NestedRoot, Overlay, Portal, Root, WithFadeFromProps, WithoutFadeFromProps };

package/dist/index.mjs

@@ -116,7 +116,7 @@ function usePreventScroll(options = {}) {
 		}
 		return () => {
 			preventScrollCount--;
-			if (preventScrollCount === 0) restore === null || restore === void 0 || restore();
+			if (preventScrollCount === 0) restore?.();
 		};
 	}, [isDisabled]);
 }
@@ -331,10 +331,7 @@ function useCallbackRef(callback) {
 	React.useEffect(() => {
 		callbackRef.current = callback;
 	});
-	return React.useMemo(() => ((...args) => {
-		var _callbackRef$current;
-		return (_callbackRef$current = callbackRef.current) === null || _callbackRef$current === void 0 ? void 0 : _callbackRef$current.call(callbackRef, ...args);
-	}), []);
+	return React.useMemo(() => ((...args) => callbackRef.current?.(...args)), []);
 }
 function useUncontrolledState({ defaultProp, onChange }) {
 	const uncontrolledState = React.useState(defaultProp);
@@ -379,7 +376,7 @@ function useControllableState({ prop, defaultProp, onChange = () => {} }) {
 function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints, drawerRef, overlayRef, fadeFromIndex, onSnapPointChange, direction = "bottom", container, snapToSequentialPoint }) {
 	const [activeSnapPoint, setActiveSnapPoint] = useControllableState({
 		prop: activeSnapPointProp,
-		defaultProp: snapPoints === null || snapPoints === void 0 ? void 0 : snapPoints[0],
+		defaultProp: snapPoints?.[0],
 		onChange: setActiveSnapPointProp
 	});
 	const [windowDimensions, setWindowDimensions] = React.useState(typeof window !== "undefined" ? {
@@ -396,8 +393,8 @@ function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints
 		window.addEventListener("resize", onResize);
 		return () => window.removeEventListener("resize", onResize);
 	}, []);
-	const isLastSnapPoint = React.useMemo(() => activeSnapPoint === (snapPoints === null || snapPoints === void 0 ? void 0 : snapPoints[snapPoints.length - 1]) || null, [snapPoints, activeSnapPoint]);
-	const activeSnapPointIndex = React.useMemo(() => (snapPoints === null || snapPoints === void 0 ? void 0 : snapPoints.findIndex((snapPoint) => snapPoint === activeSnapPoint)) ?? null, [snapPoints, activeSnapPoint]);
+	const isLastSnapPoint = React.useMemo(() => activeSnapPoint === snapPoints?.[snapPoints.length - 1] || null, [snapPoints, activeSnapPoint]);
+	const activeSnapPointIndex = React.useMemo(() => snapPoints?.findIndex((snapPoint) => snapPoint === activeSnapPoint) ?? null, [snapPoints, activeSnapPoint]);
 	const shouldFade = snapPoints && snapPoints.length > 0 && (fadeFromIndex || fadeFromIndex === 0) && !Number.isNaN(fadeFromIndex) && snapPoints[fadeFromIndex] === activeSnapPoint || !snapPoints;
 	const snapPointsOffset = React.useMemo(() => {
 		const containerSize = container ? {
@@ -410,7 +407,7 @@ function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints
 			width: 0,
 			height: 0
 		};
-		return (snapPoints === null || snapPoints === void 0 ? void 0 : snapPoints.map((snapPoint) => {
+		return snapPoints?.map((snapPoint) => {
 			const isPx = typeof snapPoint === "string";
 			let snapPointAsNumber = 0;
 			if (isPx) snapPointAsNumber = parseInt(snapPoint, 10);
@@ -422,15 +419,15 @@ function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints
 			const width = isPx ? snapPointAsNumber : windowDimensions ? snapPoint * containerSize.width : 0;
 			if (windowDimensions) return direction === "right" ? containerSize.width - width : -containerSize.width + width;
 			return width;
-		})) ?? [];
+		}) ?? [];
 	}, [
 		snapPoints,
 		windowDimensions,
 		container
 	]);
-	const activeSnapPointOffset = React.useMemo(() => activeSnapPointIndex !== null ? snapPointsOffset === null || snapPointsOffset === void 0 ? void 0 : snapPointsOffset[activeSnapPointIndex] : null, [snapPointsOffset, activeSnapPointIndex]);
+	const activeSnapPointOffset = React.useMemo(() => activeSnapPointIndex !== null ? snapPointsOffset?.[activeSnapPointIndex] : null, [snapPointsOffset, activeSnapPointIndex]);
 	const snapToPoint = React.useCallback((dimension) => {
-		const newSnapPointIndex = (snapPointsOffset === null || snapPointsOffset === void 0 ? void 0 : snapPointsOffset.findIndex((snapPointDim) => snapPointDim === dimension)) ?? null;
+		const newSnapPointIndex = snapPointsOffset?.findIndex((snapPointDim) => snapPointDim === dimension) ?? null;
 		onSnapPointChange(newSnapPointIndex);
 		set(drawerRef.current, {
 			transition: `transform ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(",")})`,
@@ -444,7 +441,7 @@ function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints
 			transition: `opacity ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(",")})`,
 			opacity: "1"
 		});
-		setActiveSnapPoint(snapPoints === null || snapPoints === void 0 ? void 0 : snapPoints[Math.max(newSnapPointIndex, 0)]);
+		setActiveSnapPoint(snapPoints?.[Math.max(newSnapPointIndex, 0)]);
 	}, [
 		drawerRef.current,
 		snapPoints,
@@ -455,7 +452,7 @@ function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints
 	]);
 	React.useEffect(() => {
 		if (activeSnapPoint || activeSnapPointProp) {
-			const newIndex = (snapPoints === null || snapPoints === void 0 ? void 0 : snapPoints.findIndex((snapPoint) => snapPoint === activeSnapPointProp || snapPoint === activeSnapPoint)) ?? -1;
+			const newIndex = snapPoints?.findIndex((snapPoint) => snapPoint === activeSnapPointProp || snapPoint === activeSnapPoint) ?? -1;
 			if (snapPointsOffset && newIndex !== -1 && typeof snapPointsOffset[newIndex] === "number") snapToPoint(snapPointsOffset[newIndex]);
 		}
 	}, [
@@ -481,7 +478,7 @@ function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints
 			snapToPoint(snapPointsOffset[snapPoints.length - 1]);
 			return;
 		}
-		const closestSnapPoint = snapPointsOffset === null || snapPointsOffset === void 0 ? void 0 : snapPointsOffset.reduce((prev, curr) => {
+		const closestSnapPoint = snapPointsOffset?.reduce((prev, curr) => {
 			if (typeof prev !== "number" || typeof curr !== "number") return prev;
 			return Math.abs(curr - currentPosition) < Math.abs(prev - currentPosition) ? curr : prev;
 		});
@@ -667,15 +664,14 @@ function usePositionFixed({ isOpen, modal, nested, hasBeenOpened, preventScrollR
 //#endregion
 //#region src/index.tsx
 function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRelease: onReleaseProp, snapPoints, shouldScaleBackground = false, setBackgroundColorOnScale = true, closeThreshold = CLOSE_THRESHOLD, scrollLockTimeout = SCROLL_LOCK_TIMEOUT, dismissible = true, handleOnly = false, fadeFromIndex = snapPoints && snapPoints.length - 1, activeSnapPoint: activeSnapPointProp, setActiveSnapPoint: setActiveSnapPointProp, fixed, modal = true, onClose, nested, noBodyStyles = false, direction = "bottom", defaultOpen = false, disablePreventScroll = true, snapToSequentialPoint = false, preventScrollRestoration = false, repositionInputs = true, onAnimationEnd, container, autoFocus = false }) {
-	var _drawerRef$current, _drawerRef$current2;
 	const [isOpen = false, setIsOpen] = useControllableState({
 		defaultProp: defaultOpen,
 		prop: openProp,
 		onChange: (o) => {
-			onOpenChange === null || onOpenChange === void 0 || onOpenChange(o);
+			onOpenChange?.(o);
 			if (!o && !nested) restorePositionSetting();
 			setTimeout(() => {
-				onAnimationEnd === null || onAnimationEnd === void 0 || onAnimationEnd(o);
+				onAnimationEnd?.(o);
 			}, TRANSITIONS.DURATION * 1e3);
 			if (o && !modal) {
 				if (typeof window !== "undefined") window.requestAnimationFrame(() => {
@@ -700,8 +696,8 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
 	const shouldAnimate = React.useRef(!defaultOpen);
 	const previousDiffFromInitial = React.useRef(0);
 	const drawerRef = React.useRef(null);
-	const drawerHeightRef = React.useRef(((_drawerRef$current = drawerRef.current) === null || _drawerRef$current === void 0 ? void 0 : _drawerRef$current.getBoundingClientRect().height) || 0);
-	const drawerWidthRef = React.useRef(((_drawerRef$current2 = drawerRef.current) === null || _drawerRef$current2 === void 0 ? void 0 : _drawerRef$current2.getBoundingClientRect().width) || 0);
+	const drawerHeightRef = React.useRef(drawerRef.current?.getBoundingClientRect().height || 0);
+	const drawerWidthRef = React.useRef(drawerRef.current?.getBoundingClientRect().width || 0);
 	const initialDrawerHeight = React.useRef(0);
 	const { activeSnapPoint, activeSnapPointIndex, setActiveSnapPoint, onRelease: onReleaseSnapPoints, snapPointsOffset, onDrag: onDragSnapPoints, shouldFade, getPercentageDragged: getSnapPointsPercentageDragged } = useSnapPoints({
 		snapPoints,
@@ -730,11 +726,10 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
 		return (window.innerWidth - WINDOW_TOP_OFFSET) / window.innerWidth;
 	}
 	function onPress(event) {
-		var _drawerRef$current3, _drawerRef$current4;
 		if (!dismissible && !snapPoints) return;
 		if (drawerRef.current && !drawerRef.current.contains(event.target)) return;
-		drawerHeightRef.current = ((_drawerRef$current3 = drawerRef.current) === null || _drawerRef$current3 === void 0 ? void 0 : _drawerRef$current3.getBoundingClientRect().height) || 0;
-		drawerWidthRef.current = ((_drawerRef$current4 = drawerRef.current) === null || _drawerRef$current4 === void 0 ? void 0 : _drawerRef$current4.getBoundingClientRect().width) || 0;
+		drawerHeightRef.current = drawerRef.current?.getBoundingClientRect().height || 0;
+		drawerWidthRef.current = drawerRef.current?.getBoundingClientRect().width || 0;
 		setIsDragging(true);
 		dragStartTime.current = /* @__PURE__ */ new Date();
 		if (isIOS()) window.addEventListener("touchend", () => isAllowedToDrag.current = false, { once: true });
@@ -742,9 +737,8 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
 		pointerStart.current = isVertical(direction) ? event.pageY : event.pageX;
 	}
 	function shouldDrag(el, isDraggingInDirection) {
-		var _window$getSelection;
 		let element = el;
-		const highlightedText = (_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.toString();
+		const highlightedText = window.getSelection()?.toString();
 		const swipeAmount = drawerRef.current ? getTranslate(drawerRef.current, direction) : null;
 		const date = /* @__PURE__ */ new Date();
 		if (element.tagName === "SELECT") return false;
@@ -803,7 +797,7 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
 			}
 			const opacityValue = 1 - percentageDragged;
 			if (shouldFade || fadeFromIndex && activeSnapPointIndex === fadeFromIndex - 1) {
-				onDragProp === null || onDragProp === void 0 || onDragProp(event, percentageDragged);
+				onDragProp?.(event, percentageDragged);
 				set(overlayRef.current, {
 					opacity: `${opacityValue}`,
 					transition: "none"
@@ -831,13 +825,11 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
 		});
 	}, []);
 	React.useEffect(() => {
-		var _window$visualViewpor2;
 		function onVisualViewportChange() {
 			if (!drawerRef.current || !repositionInputs) return;
 			const focusedElement = document.activeElement;
 			if (isInput(focusedElement) || keyboardIsOpen.current) {
-				var _window$visualViewpor;
-				const visualViewportHeight = ((_window$visualViewpor = window.visualViewport) === null || _window$visualViewpor === void 0 ? void 0 : _window$visualViewpor.height) || 0;
+				const visualViewportHeight = window.visualViewport?.height || 0;
 				const totalHeight = window.innerHeight;
 				let diffFromInitial = totalHeight - visualViewportHeight;
 				const drawerHeight = drawerRef.current.getBoundingClientRect().height || 0;
@@ -861,11 +853,8 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
 				else drawerRef.current.style.bottom = `${Math.max(diffFromInitial, 0)}px`;
 			}
 		}
-		(_window$visualViewpor2 = window.visualViewport) === null || _window$visualViewpor2 === void 0 || _window$visualViewpor2.addEventListener("resize", onVisualViewportChange);
-		return () => {
-			var _window$visualViewpor3;
-			return (_window$visualViewpor3 = window.visualViewport) === null || _window$visualViewpor3 === void 0 ? void 0 : _window$visualViewpor3.removeEventListener("resize", onVisualViewportChange);
-		};
+		window.visualViewport?.addEventListener("resize", onVisualViewportChange);
+		return () => window.visualViewport?.removeEventListener("resize", onVisualViewportChange);
 	}, [
 		activeSnapPointIndex,
 		snapPoints,
@@ -873,7 +862,7 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
 	]);
 	function closeDrawer(fromWithin) {
 		cancelDrag();
-		onClose === null || onClose === void 0 || onClose();
+		onClose?.();
 		if (!fromWithin) setIsOpen(false);
 		setTimeout(() => {
 			if (snapPoints) setActiveSnapPoint(snapPoints[0]);
@@ -938,17 +927,17 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
 				velocity,
 				dismissible
 			});
-			onReleaseProp === null || onReleaseProp === void 0 || onReleaseProp(event, true);
+			onReleaseProp?.(event, true);
 			return;
 		}
 		if (direction === "bottom" || direction === "right" ? distMoved > 0 : distMoved < 0) {
 			resetDrawer();
-			onReleaseProp === null || onReleaseProp === void 0 || onReleaseProp(event, true);
+			onReleaseProp?.(event, true);
 			return;
 		}
 		if (velocity > VELOCITY_THRESHOLD) {
 			closeDrawer();
-			onReleaseProp === null || onReleaseProp === void 0 || onReleaseProp(event, false);
+			onReleaseProp?.(event, false);
 			return;
 		}
 		const visibleDrawerHeight = Math.min(drawerRef.current.getBoundingClientRect().height ?? 0, window.innerHeight);
@@ -956,10 +945,10 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
 		const isHorizontalSwipe = direction === "left" || direction === "right";
 		if (Math.abs(swipeAmount) >= (isHorizontalSwipe ? visibleDrawerWidth : visibleDrawerHeight) * closeThreshold) {
 			closeDrawer();
-			onReleaseProp === null || onReleaseProp === void 0 || onReleaseProp(event, false);
+			onReleaseProp?.(event, false);
 			return;
 		}
-		onReleaseProp === null || onReleaseProp === void 0 || onReleaseProp(event, true);
+		onReleaseProp?.(event, true);
 		resetDrawer();
 	}
 	React.useEffect(() => {
@@ -1069,7 +1058,7 @@ const Overlay = React.forwardRef(function({ ...rest }, ref) {
 		"data-vaul-overlay": "",
 		"data-vaul-snap-points": isOpen && hasSnapPoints ? "true" : "false",
 		"data-vaul-snap-points-overlay": isOpen && shouldFade ? "true" : "false",
-		"data-vaul-animate": (shouldAnimate === null || shouldAnimate === void 0 ? void 0 : shouldAnimate.current) ? "true" : "false",
+		"data-vaul-animate": shouldAnimate?.current ? "true" : "false",
 		...rest
 	});
 });
@@ -1111,7 +1100,7 @@ const Content = React.forwardRef(function({ style, ...rest }, ref) {
 		"data-vaul-delayed-snap-points": delayedSnapPoints ? "true" : "false",
 		"data-vaul-snap-points": isOpen && hasSnapPoints ? "true" : "false",
 		"data-vaul-custom-container": container ? "true" : "false",
-		"data-vaul-animate": (shouldAnimate === null || shouldAnimate === void 0 ? void 0 : shouldAnimate.current) ? "true" : "false",
+		"data-vaul-animate": shouldAnimate?.current ? "true" : "false",
 		...rest,
 		ref: composedRef,
 		style: snapPointsOffset && snapPointsOffset.length > 0 ? {
@@ -1119,9 +1108,8 @@ const Content = React.forwardRef(function({ style, ...rest }, ref) {
 			...style
 		} : style,
 		onPointerDown: (event) => {
-			var _rest$onPointerDown;
 			if (handleOnly) return;
-			(_rest$onPointerDown = rest.onPointerDown) === null || _rest$onPointerDown === void 0 || _rest$onPointerDown.call(rest, event);
+			rest.onPointerDown?.(event);
 			pointerStartRef.current = {
 				x: event.pageX,
 				y: event.pageY
@@ -1129,10 +1117,9 @@ const Content = React.forwardRef(function({ style, ...rest }, ref) {
 			onPress(event);
 		},
 		onPointerMove: (event) => {
-			var _rest$onPointerMove;
 			lastKnownPointerEventRef.current = event;
 			if (handleOnly) return;
-			(_rest$onPointerMove = rest.onPointerMove) === null || _rest$onPointerMove === void 0 || _rest$onPointerMove.call(rest, event);
+			rest.onPointerMove?.(event);
 			if (!pointerStartRef.current) return;
 			const yPosition = event.pageY - pointerStartRef.current.y;
 			const xPosition = event.pageX - pointerStartRef.current.x;
@@ -1144,20 +1131,17 @@ const Content = React.forwardRef(function({ style, ...rest }, ref) {
 			else if (Math.abs(xPosition) > swipeStartThreshold || Math.abs(yPosition) > swipeStartThreshold) pointerStartRef.current = null;
 		},
 		onPointerUp: (event) => {
-			var _rest$onPointerUp;
-			(_rest$onPointerUp = rest.onPointerUp) === null || _rest$onPointerUp === void 0 || _rest$onPointerUp.call(rest, event);
+			rest.onPointerUp?.(event);
 			pointerStartRef.current = null;
 			wasBeyondThePointRef.current = false;
 			onRelease(event);
 		},
 		onPointerOut: (event) => {
-			var _rest$onPointerOut;
-			(_rest$onPointerOut = rest.onPointerOut) === null || _rest$onPointerOut === void 0 || _rest$onPointerOut.call(rest, event);
+			rest.onPointerOut?.(event);
 			handleOnPointerUp(lastKnownPointerEventRef.current);
 		},
 		onContextMenu: (event) => {
-			var _rest$onContextMenu;
-			(_rest$onContextMenu = rest.onContextMenu) === null || _rest$onContextMenu === void 0 || _rest$onContextMenu.call(rest, event);
+			rest.onContextMenu?.(event);
 			if (lastKnownPointerEventRef.current) handleOnPointerUp(lastKnownPointerEventRef.current);
 		}
 	}) });
@@ -1246,11 +1230,11 @@ function NestedRoot({ onDrag, onOpenChange, open: nestedIsOpen, ...rest }) {
 		},
 		onDrag: (e, p) => {
 			onNestedDrag(e, p);
-			onDrag === null || onDrag === void 0 || onDrag(e, p);
+			onDrag?.(e, p);
 		},
 		onOpenChange: (o) => {
 			if (o) onNestedOpenChange(o);
-			onOpenChange === null || onOpenChange === void 0 || onOpenChange(o);
+			onOpenChange?.(o);
 		},
 		onRelease: onNestedRelease,
 		...rest
@@ -1278,5 +1262,4 @@ const Drawer = {
 };
 
 //#endregion
-export { Content, Drawer, Handle, NestedRoot, Overlay, Portal, Root };
-//# sourceMappingURL=index.mjs.map
+export { Content, Drawer, Handle, NestedRoot, Overlay, Portal, Root };

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "base-vaul",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
   },
   "description": "Drawer component for React made with Base-UI.",
-  "main": "./dist/index.js",
+  "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "files": [
@@ -16,10 +16,6 @@
     "import": {
       "types": "./dist/index.d.mts",
       "default": "./dist/index.mjs"
-    },
-    "require": {
-      "types": "./dist/index.d.cts",
-      "default": "./dist/index.cjs"
     }
   },
   "keywords": [
@@ -53,8 +49,8 @@
     "turbo": "2.6.3",
     "typescript": "5.9.2",
     "unplugin-lightningcss": "^0.4.3",
-    "@repo/eslint-config": "0.0.1",
-    "@repo/typescript-config": "0.0.0"
+    "@repo/typescript-config": "0.0.0",
+    "@repo/eslint-config": "0.0.1"
   },
   "peerDependencies": {
     "react": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc",
@@ -64,7 +60,7 @@
     "@base-ui/react": "1.0.0"
   },
   "scripts": {
-    "build": "pnpm run lint && tsdown",
+    "build": "tsdown",
     "dev": "tsdown --watch",
     "format": "prettier --write .",
     "lint": "pnpm run --parallel --stream '/^lint:/'",