@yahoo/uds 3.116.1 → 3.116.3

package/dist/components/Scrim.cjs

@@ -1,6 +1,4 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
-'use client';
-
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
 const require_styles_styler = require('../styles/styler.cjs');

package/dist/components/Scrim.js

@@ -1,6 +1,4 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
-'use client';
-
 import { cx, getStyles } from "../styles/styler.js";
 import { Box } from "./Box.js";
 import { forwardRef } from "react";

package/dist/components/client/BottomSheet/BottomSheet.cjs

@@ -6,6 +6,7 @@ const require_styles_styler = require('../../../styles/styler.cjs');
 const require_components_Box = require('../../Box.cjs');
 const require_components_Scrim = require('../../Scrim.cjs');
 const require_components_client_BottomSheet_BottomSheetHandle = require('./BottomSheetHandle.cjs');
+const require_components_client_BottomSheet_BottomSheetInternalContext = require('./BottomSheetInternalContext.cjs');
 const require_components_client_BottomSheet_UDSBottomSheetConfigProvider = require('./UDSBottomSheetConfigProvider.cjs');
 const require_components_client_BottomSheet_useBottomSheetDrag = require('./useBottomSheetDrag.cjs');
 const require_components_client_BottomSheet_useBottomSheetSnapModel = require('./useBottomSheetSnapModel.cjs');
@@ -44,7 +45,15 @@ function BottomSheet({ children, className: sheetClassName, controller: controll
 	forceZeroMarginsRef.current = keyboardHeightPx > 0;
 	const sheetRef = (0, react.useRef)(null);
 	const maxSnapPxRef = (0, react.useRef)(0);
+	const sheetHeightRef = (0, react.useRef)(void 0);
+	const wasOpenRef = (0, react.useRef)(false);
+	if (isOpen && !wasOpenRef.current) sheetHeightRef.current = void 0;
+	wasOpenRef.current = isOpen;
 	const maxHeightPx = Math.max(viewportHeightPx - SHEET_MAX_HEIGHT_TOP_OFFSET_PX, 0);
+	const applySheetHeight = (0, react.useCallback)((el, h) => {
+		el.style.height = h;
+		sheetHeightRef.current = h;
+	}, []);
 	const rootVariantClass = require_styles_styler.getStyles({ bottomsheetVariantRoot: variant });
 	const { applyExpansionMargins, thresholdRef: expansionThresholdRef } = require_components_client_BottomSheet_useExpansionMargins.useExpansionMargins({
 		sheetRef,
@@ -62,9 +71,9 @@ function BottomSheet({ children, className: sheetClassName, controller: controll
 	const setTranslateImmediate = (0, react.useCallback)((nextTranslatePx) => {
 		const el = sheetRef.current;
 		if (!el) return;
-		el.style.height = `${maxSnapPxRef.current - nextTranslatePx}px`;
+		applySheetHeight(el, `${maxSnapPxRef.current - nextTranslatePx}px`);
 		applyExpansionMargins(el, nextTranslatePx);
-	}, [applyExpansionMargins]);
+	}, [applySheetHeight, applyExpansionMargins]);
 	const { resolvedSnapPoints, snapPointsPx, maxSnapPointPx, snapPointTranslatesPx, activeSnapIndex, restTranslatePx, emitSnapPointChange, openTimeRef, lastTimeDragPreventedRef, isEnteringRef } = require_components_client_BottomSheet_useBottomSheetSnapModel.useBottomSheetSnapModel({
 		isOpen,
 		snapPointsProp,
@@ -77,16 +86,16 @@ function BottomSheet({ children, className: sheetClassName, controller: controll
 		setTranslateAnimated: (0, react.useCallback)((nextTranslatePx) => {
 			const el = sheetRef.current;
 			if (!el) return;
-			const nextHeightPx = maxSnapPxRef.current - nextTranslatePx;
+			const h = `${maxSnapPxRef.current - nextTranslatePx}px`;
 			if (!el.style.height) {
-				el.style.height = `${nextHeightPx}px`;
+				applySheetHeight(el, h);
 				applyExpansionMargins(el, nextTranslatePx);
 			} else {
 				const easing = "cubic-bezier(0.32, 0.72, 0, 1)";
 				let transition = `height 500ms ${easing}`;
 				if (expansionThresholdRef.current != null) transition += `, margin-left 500ms ${easing}, margin-right 500ms ${easing}, margin-bottom 500ms ${easing}`;
 				el.style.transition = transition;
-				el.style.height = `${nextHeightPx}px`;
+				applySheetHeight(el, h);
 				applyExpansionMargins(el, nextTranslatePx);
 				const cleanup = () => {
 					el.style.removeProperty("transition");
@@ -94,7 +103,11 @@ function BottomSheet({ children, className: sheetClassName, controller: controll
 				};
 				el.addEventListener("transitionend", cleanup);
 			}
-		}, [applyExpansionMargins, expansionThresholdRef]),
+		}, [
+			applySheetHeight,
+			applyExpansionMargins,
+			expansionThresholdRef
+		]),
 		isDraggingRef
 	});
 	maxSnapPxRef.current = maxSnapPointPx;
@@ -103,6 +116,8 @@ function BottomSheet({ children, className: sheetClassName, controller: controll
 	const resolvedDismissThresholdPx = (snapPointsPx[0] ?? maxSnapPointPx) * DRAG_DISMISS_THRESHOLD_RATIO;
 	const shouldShowHandleIndicator = showHandleIndicator && enableDrag;
 	const isAtMaxSnapPoint = activeSnapIndex === resolvedSnapPoints.length - 1;
+	const scrollLocked = !isAtMaxSnapPoint;
+	const internalContextValue = (0, react.useMemo)(() => ({ scrollLocked }), [scrollLocked]);
 	const shouldHideEdgeBordersAtMaxSnap = fullWidthAtMaxSnap && resolvedSnapPoints.length >= 2 && isAtMaxSnapPoint;
 	const handleHandleIndicatorKeyDown = (0, react.useCallback)((event) => {
 		if (!shouldShowHandleIndicator || resolvedSnapPoints.length <= 1) return;
@@ -153,6 +168,11 @@ function BottomSheet({ children, className: sheetClassName, controller: controll
 		isOpen,
 		applyExpansionMargins
 	]);
+	(0, react.useLayoutEffect)(() => {
+		const el = sheetRef.current;
+		if (!el || !sheetHeightRef.current) return;
+		if (!el.style.height) el.style.height = sheetHeightRef.current;
+	});
 	const dialogBackdrop = modal ? backdrop ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Scrim.Scrim, {
 		className: slotProps?.scrim?.className,
 		animateOpacity: true
@@ -172,8 +192,9 @@ function BottomSheet({ children, className: sheetClassName, controller: controll
 		portalElement,
 		preventBodyScroll: preventBodyScroll ?? (modal ? void 0 : false),
 		"data-testid": "bottom-sheet",
-		className: require_styles_styler.cx("fixed overflow-hidden inset-x-0 bottom-0 z-50", keyboardHeightPx > 0 ? void 0 : "bottom-0", "[will-change:transform] touch-none", "[transform:translate3d(0,var(--uds-bottomsheet-hidden-translate),0)]", "data-[enter]:[transform:translate3d(0,var(--uds-bottomsheet-visible-translate),0)]", "transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)]", "motion-reduce:transition-none", sheetClassName, rootVariantClass),
+		className: require_styles_styler.cx("fixed overflow-hidden inset-x-0 bottom-0 z-50", keyboardHeightPx > 0 ? void 0 : "bottom-0", scrollLocked ? "[will-change:transform] touch-none" : "[will-change:transform]", "[transform:translate3d(0,var(--uds-bottomsheet-hidden-translate),0)]", "data-[enter]:[transform:translate3d(0,var(--uds-bottomsheet-visible-translate),0)]", "transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)]", "motion-reduce:transition-none", sheetClassName, rootVariantClass),
 		style: {
+			height: sheetHeightRef.current,
 			maxHeight: maxHeightPx ? `${maxHeightPx}px` : void 0,
 			...shouldHideEdgeBordersAtMaxSnap ? {
 				borderBottomWidth: 0,
@@ -200,7 +221,15 @@ function BottomSheet({ children, className: sheetClassName, controller: controll
 				ariaLabel: "Resize sheet",
 				className: slotProps?.handleIndicator?.className
 			})
-		}), children]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_BottomSheet_BottomSheetInternalContext.BottomSheetInternalContext.Provider, {
+			value: internalContextValue,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
+				display: "flex",
+				flexDirection: "column",
+				className: "absolute inset-0 min-h-0 p-[inherit]",
+				children
+			})
+		})]
 	});
 }
 BottomSheet.displayName = "BottomSheet";

package/dist/components/client/BottomSheet/BottomSheet.js

@@ -4,6 +4,7 @@ import { cx, getStyles } from "../../../styles/styler.js";
 import { Box } from "../../Box.js";
 import { Scrim } from "../../Scrim.js";
 import { BottomSheetHandle } from "./BottomSheetHandle.js";
+import { BottomSheetInternalContext } from "./BottomSheetInternalContext.js";
 import { useBottomSheetConfig } from "./UDSBottomSheetConfigProvider.js";
 import { useBottomSheetDrag } from "./useBottomSheetDrag.js";
 import { useBottomSheetSnapModel } from "./useBottomSheetSnapModel.js";
@@ -11,7 +12,7 @@ import { getBottomSheetInternal } from "./useBottomSheetStore.js";
 import { useExpansionMargins } from "./useExpansionMargins.js";
 import { useViewportHeight } from "./useViewportHeight.js";
 import { useVirtualKeyboard } from "./useVirtualKeyboard.js";
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Dialog, useDialogContext } from "@ariakit/react";
 
@@ -42,7 +43,15 @@ function BottomSheet({ children, className: sheetClassName, controller: controll
 	forceZeroMarginsRef.current = keyboardHeightPx > 0;
 	const sheetRef = useRef(null);
 	const maxSnapPxRef = useRef(0);
+	const sheetHeightRef = useRef(void 0);
+	const wasOpenRef = useRef(false);
+	if (isOpen && !wasOpenRef.current) sheetHeightRef.current = void 0;
+	wasOpenRef.current = isOpen;
 	const maxHeightPx = Math.max(viewportHeightPx - SHEET_MAX_HEIGHT_TOP_OFFSET_PX, 0);
+	const applySheetHeight = useCallback((el, h) => {
+		el.style.height = h;
+		sheetHeightRef.current = h;
+	}, []);
 	const rootVariantClass = getStyles({ bottomsheetVariantRoot: variant });
 	const { applyExpansionMargins, thresholdRef: expansionThresholdRef } = useExpansionMargins({
 		sheetRef,
@@ -60,9 +69,9 @@ function BottomSheet({ children, className: sheetClassName, controller: controll
 	const setTranslateImmediate = useCallback((nextTranslatePx) => {
 		const el = sheetRef.current;
 		if (!el) return;
-		el.style.height = `${maxSnapPxRef.current - nextTranslatePx}px`;
+		applySheetHeight(el, `${maxSnapPxRef.current - nextTranslatePx}px`);
 		applyExpansionMargins(el, nextTranslatePx);
-	}, [applyExpansionMargins]);
+	}, [applySheetHeight, applyExpansionMargins]);
 	const { resolvedSnapPoints, snapPointsPx, maxSnapPointPx, snapPointTranslatesPx, activeSnapIndex, restTranslatePx, emitSnapPointChange, openTimeRef, lastTimeDragPreventedRef, isEnteringRef } = useBottomSheetSnapModel({
 		isOpen,
 		snapPointsProp,
@@ -75,16 +84,16 @@ function BottomSheet({ children, className: sheetClassName, controller: controll
 		setTranslateAnimated: useCallback((nextTranslatePx) => {
 			const el = sheetRef.current;
 			if (!el) return;
-			const nextHeightPx = maxSnapPxRef.current - nextTranslatePx;
+			const h = `${maxSnapPxRef.current - nextTranslatePx}px`;
 			if (!el.style.height) {
-				el.style.height = `${nextHeightPx}px`;
+				applySheetHeight(el, h);
 				applyExpansionMargins(el, nextTranslatePx);
 			} else {
 				const easing = "cubic-bezier(0.32, 0.72, 0, 1)";
 				let transition = `height 500ms ${easing}`;
 				if (expansionThresholdRef.current != null) transition += `, margin-left 500ms ${easing}, margin-right 500ms ${easing}, margin-bottom 500ms ${easing}`;
 				el.style.transition = transition;
-				el.style.height = `${nextHeightPx}px`;
+				applySheetHeight(el, h);
 				applyExpansionMargins(el, nextTranslatePx);
 				const cleanup = () => {
 					el.style.removeProperty("transition");
@@ -92,7 +101,11 @@ function BottomSheet({ children, className: sheetClassName, controller: controll
 				};
 				el.addEventListener("transitionend", cleanup);
 			}
-		}, [applyExpansionMargins, expansionThresholdRef]),
+		}, [
+			applySheetHeight,
+			applyExpansionMargins,
+			expansionThresholdRef
+		]),
 		isDraggingRef
 	});
 	maxSnapPxRef.current = maxSnapPointPx;
@@ -101,6 +114,8 @@ function BottomSheet({ children, className: sheetClassName, controller: controll
 	const resolvedDismissThresholdPx = (snapPointsPx[0] ?? maxSnapPointPx) * DRAG_DISMISS_THRESHOLD_RATIO;
 	const shouldShowHandleIndicator = showHandleIndicator && enableDrag;
 	const isAtMaxSnapPoint = activeSnapIndex === resolvedSnapPoints.length - 1;
+	const scrollLocked = !isAtMaxSnapPoint;
+	const internalContextValue = useMemo(() => ({ scrollLocked }), [scrollLocked]);
 	const shouldHideEdgeBordersAtMaxSnap = fullWidthAtMaxSnap && resolvedSnapPoints.length >= 2 && isAtMaxSnapPoint;
 	const handleHandleIndicatorKeyDown = useCallback((event) => {
 		if (!shouldShowHandleIndicator || resolvedSnapPoints.length <= 1) return;
@@ -151,6 +166,11 @@ function BottomSheet({ children, className: sheetClassName, controller: controll
 		isOpen,
 		applyExpansionMargins
 	]);
+	useLayoutEffect(() => {
+		const el = sheetRef.current;
+		if (!el || !sheetHeightRef.current) return;
+		if (!el.style.height) el.style.height = sheetHeightRef.current;
+	});
 	const dialogBackdrop = modal ? backdrop ?? /* @__PURE__ */ jsx(Scrim, {
 		className: slotProps?.scrim?.className,
 		animateOpacity: true
@@ -170,8 +190,9 @@ function BottomSheet({ children, className: sheetClassName, controller: controll
 		portalElement,
 		preventBodyScroll: preventBodyScroll ?? (modal ? void 0 : false),
 		"data-testid": "bottom-sheet",
-		className: cx("fixed overflow-hidden inset-x-0 bottom-0 z-50", keyboardHeightPx > 0 ? void 0 : "bottom-0", "[will-change:transform] touch-none", "[transform:translate3d(0,var(--uds-bottomsheet-hidden-translate),0)]", "data-[enter]:[transform:translate3d(0,var(--uds-bottomsheet-visible-translate),0)]", "transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)]", "motion-reduce:transition-none", sheetClassName, rootVariantClass),
+		className: cx("fixed overflow-hidden inset-x-0 bottom-0 z-50", keyboardHeightPx > 0 ? void 0 : "bottom-0", scrollLocked ? "[will-change:transform] touch-none" : "[will-change:transform]", "[transform:translate3d(0,var(--uds-bottomsheet-hidden-translate),0)]", "data-[enter]:[transform:translate3d(0,var(--uds-bottomsheet-visible-translate),0)]", "transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)]", "motion-reduce:transition-none", sheetClassName, rootVariantClass),
 		style: {
+			height: sheetHeightRef.current,
 			maxHeight: maxHeightPx ? `${maxHeightPx}px` : void 0,
 			...shouldHideEdgeBordersAtMaxSnap ? {
 				borderBottomWidth: 0,
@@ -198,7 +219,15 @@ function BottomSheet({ children, className: sheetClassName, controller: controll
 				ariaLabel: "Resize sheet",
 				className: slotProps?.handleIndicator?.className
 			})
-		}), children]
+		}), /* @__PURE__ */ jsx(BottomSheetInternalContext.Provider, {
+			value: internalContextValue,
+			children: /* @__PURE__ */ jsx(Box, {
+				display: "flex",
+				flexDirection: "column",
+				className: "absolute inset-0 min-h-0 p-[inherit]",
+				children
+			})
+		})]
 	});
 }
 BottomSheet.displayName = "BottomSheet";

package/dist/components/client/BottomSheet/BottomSheetContent.cjs

@@ -5,15 +5,17 @@ const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
 const require_styles_styler = require('../../../styles/styler.cjs');
 const require_components_Box = require('../../Box.cjs');
 const require_components_VStack = require('../../VStack.cjs');
+const require_components_client_BottomSheet_BottomSheetInternalContext = require('./BottomSheetInternalContext.cjs');
 let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/client/BottomSheet/BottomSheetContent.tsx
 function BottomSheetContent({ children, className }) {
+	const scrollLocked = require_components_client_BottomSheet_BottomSheetInternalContext.useBottomSheetInternalContext()?.scrollLocked ?? false;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
 		display: "block",
-		overflowY: "auto",
+		overflowY: scrollLocked ? "hidden" : "auto",
 		flex: "1",
-		className: require_styles_styler.cx("min-h-0", "touch-pan-y", className),
+		className: require_styles_styler.cx("min-h-0", scrollLocked ? void 0 : "touch-pan-y", className),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_VStack.VStack, {
 			className: "pb-[calc(env(safe-area-inset-bottom))]",
 			children

package/dist/components/client/BottomSheet/BottomSheetContent.js

@@ -3,15 +3,17 @@
 import { cx } from "../../../styles/styler.js";
 import { Box } from "../../Box.js";
 import { VStack } from "../../VStack.js";
+import { useBottomSheetInternalContext } from "./BottomSheetInternalContext.js";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/client/BottomSheet/BottomSheetContent.tsx
 function BottomSheetContent({ children, className }) {
+	const scrollLocked = useBottomSheetInternalContext()?.scrollLocked ?? false;
 	return /* @__PURE__ */ jsx(Box, {
 		display: "block",
-		overflowY: "auto",
+		overflowY: scrollLocked ? "hidden" : "auto",
 		flex: "1",
-		className: cx("min-h-0", "touch-pan-y", className),
+		className: cx("min-h-0", scrollLocked ? void 0 : "touch-pan-y", className),
 		children: /* @__PURE__ */ jsx(VStack, {
 			className: "pb-[calc(env(safe-area-inset-bottom))]",
 			children

package/dist/components/client/BottomSheet/BottomSheetInternalContext.cjs

@@ -0,0 +1,15 @@
+"use client";
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
+let react = require("react");
+
+//#region src/components/client/BottomSheet/BottomSheetInternalContext.tsx
+const BottomSheetInternalContext = (0, react.createContext)(null);
+function useBottomSheetInternalContext() {
+	return (0, react.useContext)(BottomSheetInternalContext);
+}
+
+//#endregion
+exports.BottomSheetInternalContext = BottomSheetInternalContext;
+exports.useBottomSheetInternalContext = useBottomSheetInternalContext;

package/dist/components/client/BottomSheet/BottomSheetInternalContext.d.cts

@@ -0,0 +1,12 @@
+
+import * as react from "react";
+
+//#region src/components/client/BottomSheet/BottomSheetInternalContext.d.ts
+interface BottomSheetInternalContextValue {
+  /** Whether content scrolling is locked (true at non-max snap points). */
+  scrollLocked: boolean;
+}
+declare const BottomSheetInternalContext: react.Context<BottomSheetInternalContextValue | null>;
+declare function useBottomSheetInternalContext(): BottomSheetInternalContextValue | null;
+//#endregion
+export { BottomSheetInternalContext, useBottomSheetInternalContext };

package/dist/components/client/BottomSheet/BottomSheetInternalContext.d.ts

@@ -0,0 +1,12 @@
+
+import * as react from "react";
+
+//#region src/components/client/BottomSheet/BottomSheetInternalContext.d.ts
+interface BottomSheetInternalContextValue {
+  /** Whether content scrolling is locked (true at non-max snap points). */
+  scrollLocked: boolean;
+}
+declare const BottomSheetInternalContext: react.Context<BottomSheetInternalContextValue | null>;
+declare function useBottomSheetInternalContext(): BottomSheetInternalContextValue | null;
+//#endregion
+export { BottomSheetInternalContext, useBottomSheetInternalContext };

package/dist/components/client/BottomSheet/BottomSheetInternalContext.js

@@ -0,0 +1,12 @@
+"use client";
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+import { createContext, useContext } from "react";
+
+//#region src/components/client/BottomSheet/BottomSheetInternalContext.tsx
+const BottomSheetInternalContext = createContext(null);
+function useBottomSheetInternalContext() {
+	return useContext(BottomSheetInternalContext);
+}
+
+//#endregion
+export { BottomSheetInternalContext, useBottomSheetInternalContext };