@jobber/components 8.14.1 → 8.15.0

package/dist/MenuSubmenuTrigger-cjs.js

@@ -1,10 +1,9 @@
 'use strict';
 
 var React = require('react');
-var DrawerRoot = require('./DrawerRoot-cjs.js');
+var ScrollAreaViewport = require('./ScrollAreaViewport-cjs.js');
 var useRenderElement = require('./useRenderElement-cjs.js');
 var useValueChanged = require('./useValueChanged-cjs.js');
-var useBaseUiId = require('./useBaseUiId-cjs.js');
 var jsxRuntime = require('react/jsx-runtime');
 var floatingUi_utils_dom = require('./floating-ui.utils.dom-cjs.js');
 var index_esm = require('./index.esm-cjs.js');
@@ -47,7 +46,7 @@ const DialogClose = /*#__PURE__*/React__namespace.forwardRef(function DialogClos
   } = componentProps;
   const {
     store
-  } = DrawerRoot.useDialogRootContext();
+  } = ScrollAreaViewport.useDialogRootContext();
   const open = store.useState('open');
   function handleClick(event) {
     if (open) {
@@ -57,7 +56,7 @@ const DialogClose = /*#__PURE__*/React__namespace.forwardRef(function DialogClos
   const {
     getButtonProps,
     buttonRef
-  } = useBaseUiId.useButton({
+  } = useValueChanged.useButton({
     disabled,
     native: nativeButton
   });
@@ -108,109 +107,6 @@ function isClickLikeOpenEvent(openEventType, interactedInside) {
   return interactedInside || openEventType === 'click' || openEventType === 'mousedown';
 }
 
-/**
- * Opens or closes the floating element when clicking the reference element.
- * @see https://floating-ui.com/docs/useClick
- */
-function useClick(context, props = {}) {
-  const store = 'rootStore' in context ? context.rootStore : context;
-  const dataRef = store.context.dataRef;
-  const {
-    enabled = true,
-    event: eventOption = 'click',
-    toggle = true,
-    ignoreMouse = false,
-    stickIfOpen = true,
-    touchOpenDelay = 0,
-    reason = useValueChanged.triggerPress
-  } = props;
-  const pointerTypeRef = React__namespace.useRef(undefined);
-  const frame = useValueChanged.useAnimationFrame();
-  const touchOpenTimeout = useValueChanged.useTimeout();
-  const reference = React__namespace.useMemo(() => ({
-    onPointerDown(event) {
-      pointerTypeRef.current = event.pointerType;
-    },
-    onMouseDown(event) {
-      const pointerType = pointerTypeRef.current;
-      const nativeEvent = event.nativeEvent;
-      const open = store.select('open');
-
-      // Ignore all buttons except for the "main" button.
-      // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
-      if (event.button !== 0 || eventOption === 'click' || useValueChanged.isMouseLikePointerType(pointerType, true) && ignoreMouse) {
-        return;
-      }
-      const openEvent = dataRef.current.openEvent;
-      const openEventType = openEvent?.type;
-      const hasClickedOnInactiveTrigger = store.select('domReferenceElement') !== event.currentTarget;
-      const nextOpen = open && hasClickedOnInactiveTrigger || !(open && toggle && (openEvent && stickIfOpen ? openEventType === 'click' || openEventType === 'mousedown' : true));
-
-      // Animations sometimes won't run on a typeable element if using a rAF.
-      // Focus is always set on these elements. For touch, we may delay opening.
-      if (DrawerRoot.isTypeableElement(nativeEvent.target)) {
-        const details = useValueChanged.createChangeEventDetails(reason, nativeEvent, nativeEvent.target);
-        if (nextOpen && pointerType === 'touch' && touchOpenDelay > 0) {
-          touchOpenTimeout.start(touchOpenDelay, () => {
-            store.setOpen(true, details);
-          });
-        } else {
-          store.setOpen(nextOpen, details);
-        }
-        return;
-      }
-
-      // Capture the currentTarget before the rAF.
-      // as React sets it to null after the event handler completes.
-      const eventCurrentTarget = event.currentTarget;
-
-      // Wait until focus is set on the element. This is an alternative to
-      // `event.preventDefault()` to avoid :focus-visible from appearing when using a pointer.
-      frame.request(() => {
-        const details = useValueChanged.createChangeEventDetails(reason, nativeEvent, eventCurrentTarget);
-        if (nextOpen && pointerType === 'touch' && touchOpenDelay > 0) {
-          touchOpenTimeout.start(touchOpenDelay, () => {
-            store.setOpen(true, details);
-          });
-        } else {
-          store.setOpen(nextOpen, details);
-        }
-      });
-    },
-    onClick(event) {
-      if (eventOption === 'mousedown-only') {
-        return;
-      }
-      const pointerType = pointerTypeRef.current;
-      if (eventOption === 'mousedown' && pointerType) {
-        pointerTypeRef.current = undefined;
-        return;
-      }
-      if (useValueChanged.isMouseLikePointerType(pointerType, true) && ignoreMouse) {
-        return;
-      }
-      const open = store.select('open');
-      const openEvent = dataRef.current.openEvent;
-      const hasClickedOnInactiveTrigger = store.select('domReferenceElement') !== event.currentTarget;
-      const nextOpen = open && hasClickedOnInactiveTrigger || !(open && toggle && (openEvent && stickIfOpen ? useValueChanged.isClickLikeEvent(openEvent) : true));
-      const details = useValueChanged.createChangeEventDetails(reason, event.nativeEvent, event.currentTarget);
-      if (nextOpen && pointerType === 'touch' && touchOpenDelay > 0) {
-        touchOpenTimeout.start(touchOpenDelay, () => {
-          store.setOpen(true, details);
-        });
-      } else {
-        store.setOpen(nextOpen, details);
-      }
-    },
-    onKeyDown() {
-      pointerTypeRef.current = undefined;
-    }
-  }), [dataRef, eventOption, ignoreMouse, store, stickIfOpen, toggle, frame, touchOpenTimeout, touchOpenDelay, reason]);
-  return React__namespace.useMemo(() => enabled ? {
-    reference
-  } : useRenderElement.EMPTY_OBJECT, [enabled, reference]);
-}
-
 function useFloatingRootContext(options) {
   const {
     open = false,
@@ -218,19 +114,19 @@ function useFloatingRootContext(options) {
     elements = {}
   } = options;
   const floatingId = useValueChanged.useId();
-  const nested = DrawerRoot.useFloatingParentNodeId() != null;
+  const nested = ScrollAreaViewport.useFloatingParentNodeId() != null;
   if (process.env.NODE_ENV !== 'production') {
     const optionDomReference = elements.reference;
     if (optionDomReference && !floatingUi_utils_dom.isElement(optionDomReference)) {
       console.error('Cannot pass a virtual element to the `elements.reference` option,', 'as it must be a real DOM element. Use `context.setPositionReference()`', 'instead.');
     }
   }
-  const store = useRenderElement.useRefWithInit(() => new DrawerRoot.FloatingRootStore({
+  const store = useRenderElement.useRefWithInit(() => new ScrollAreaViewport.FloatingRootStore({
     open,
     onOpenChange,
     referenceElement: elements.reference ?? null,
     floatingElement: elements.floating ?? null,
-    triggerElements: new DrawerRoot.PopupTriggerMap(),
+    triggerElements: new ScrollAreaViewport.PopupTriggerMap(),
     floatingId,
     nested,
     noEmit: false
@@ -275,7 +171,7 @@ function useFloating(options = {}) {
   };
   const [positionReference, setPositionReferenceRaw] = React__namespace.useState(null);
   const domReferenceRef = React__namespace.useRef(null);
-  const tree = DrawerRoot.useFloatingTree(externalTree);
+  const tree = ScrollAreaViewport.useFloatingTree(externalTree);
   useValueChanged.useIsoLayoutEffect(() => {
     if (rootContextElements.domReference) {
       domReferenceRef.current = rootContextElements.domReference;
@@ -400,7 +296,7 @@ function useFocus(context, props = {}) {
     // return to the tab/window.
     function onBlur() {
       const currentDomReference = store.select('domReferenceElement');
-      if (!store.select('open') && floatingUi_utils_dom.isHTMLElement(currentDomReference) && currentDomReference === DrawerRoot.activeElement(useValueChanged.ownerDocument(currentDomReference))) {
+      if (!store.select('open') && floatingUi_utils_dom.isHTMLElement(currentDomReference) && currentDomReference === ScrollAreaViewport.activeElement(useValueChanged.ownerDocument(currentDomReference))) {
         blockFocusRef.current = true;
       }
     }
@@ -455,19 +351,19 @@ function useFocus(context, props = {}) {
         blockFocusRef.current = false;
         blockedReferenceRef.current = null;
       }
-      const target = DrawerRoot.getTarget(event.nativeEvent);
+      const target = ScrollAreaViewport.getTarget(event.nativeEvent);
       if (floatingUi_utils_dom.isElement(target)) {
         // Safari fails to match `:focus-visible` if focus was initially
         // outside the document.
         if (isMacSafari && !event.relatedTarget) {
-          if (!keyboardModalityRef.current && !DrawerRoot.isTypeableElement(target)) {
+          if (!keyboardModalityRef.current && !ScrollAreaViewport.isTypeableElement(target)) {
             return;
           }
-        } else if (!DrawerRoot.matchesFocusVisible(target)) {
+        } else if (!ScrollAreaViewport.matchesFocusVisible(target)) {
           return;
         }
       }
-      const movedFromOtherEnabledTrigger = DrawerRoot.isTargetInsideEnabledTrigger(event.relatedTarget, store.context.triggerElements);
+      const movedFromOtherEnabledTrigger = ScrollAreaViewport.isTargetInsideEnabledTrigger(event.relatedTarget, store.context.triggerElements);
       const {
         nativeEvent,
         currentTarget
@@ -492,12 +388,12 @@ function useFocus(context, props = {}) {
 
       // Hit the non-modal focus management portal guard. Focus will be
       // moved into the floating element immediately after.
-      const movedToFocusGuard = floatingUi_utils_dom.isElement(relatedTarget) && relatedTarget.hasAttribute(DrawerRoot.createAttribute('focus-guard')) && relatedTarget.getAttribute('data-type') === 'outside';
+      const movedToFocusGuard = floatingUi_utils_dom.isElement(relatedTarget) && relatedTarget.hasAttribute(ScrollAreaViewport.createAttribute('focus-guard')) && relatedTarget.getAttribute('data-type') === 'outside';
 
       // Wait for the window blur listener to fire.
       timeout.start(0, () => {
         const domReference = store.select('domReferenceElement');
-        const activeEl = DrawerRoot.activeElement(domReference ? domReference.ownerDocument : document);
+        const activeEl = ScrollAreaViewport.activeElement(domReference ? domReference.ownerDocument : document);
 
         // Focus left the page, keep it open.
         if (!relatedTarget && activeEl === domReference) {
@@ -511,7 +407,7 @@ function useFocus(context, props = {}) {
         // as it will only point to the shadow host of the newly focused element
         // and not the element that actually has received focus if it is located
         // inside a shadow root.
-        if (DrawerRoot.contains(dataRef.current.floatingContext?.refs.floating.current, activeEl) || DrawerRoot.contains(domReference, activeEl) || movedToFocusGuard) {
+        if (ScrollAreaViewport.contains(dataRef.current.floatingContext?.refs.floating.current, activeEl) || ScrollAreaViewport.contains(domReference, activeEl) || movedToFocusGuard) {
           return;
         }
 
@@ -519,7 +415,7 @@ function useFocus(context, props = {}) {
         // the floating element. The focus handler of that trigger will
         // handle the open state.
         const nextFocusedElement = relatedTarget ?? activeEl;
-        if (DrawerRoot.isTargetInsideEnabledTrigger(nextFocusedElement, store.context.triggerElements)) {
+        if (ScrollAreaViewport.isTargetInsideEnabledTrigger(nextFocusedElement, store.context.triggerElements)) {
           return;
         }
         store.setOpen(false, useValueChanged.createChangeEventDetails(useValueChanged.triggerFocus, nativeEvent));
@@ -532,7 +428,7 @@ function useFocus(context, props = {}) {
   } : {}, [enabled, reference]);
 }
 
-const interactiveSelector = `button,a,[role="button"],select,[tabindex]:not([tabindex="-1"]),${DrawerRoot.TYPEABLE_SELECTOR}`;
+const interactiveSelector = `button,a,[role="button"],select,[tabindex]:not([tabindex="-1"]),${ScrollAreaViewport.TYPEABLE_SELECTOR}`;
 function isInteractiveElement(element) {
   return element ? Boolean(element.closest(interactiveSelector)) : false;
 }
@@ -615,8 +511,8 @@ function useHoverFloatingInteraction(context, parameters = {}) {
     closeDelay: closeDelayProp = 0
   } = parameters;
   const instance = useHoverInteractionSharedState(store);
-  const tree = DrawerRoot.useFloatingTree();
-  const parentId = DrawerRoot.useFloatingParentNodeId();
+  const tree = ScrollAreaViewport.useFloatingTree();
+  const parentId = ScrollAreaViewport.useFloatingParentNodeId();
   const isClickLikeOpenEvent$1 = useValueChanged.useStableCallback(() => {
     return isClickLikeOpenEvent(dataRef.current.openEvent?.type, instance.interactedInside);
   });
@@ -625,7 +521,7 @@ function useHoverFloatingInteraction(context, parameters = {}) {
     return type?.includes('mouse') && type !== 'mousedown';
   });
   const isRelatedTargetInsideEnabledTrigger = useValueChanged.useStableCallback(target => {
-    return DrawerRoot.isTargetInsideEnabledTrigger(target, store.context.triggerElements);
+    return ScrollAreaViewport.isTargetInsideEnabledTrigger(target, store.context.triggerElements);
   });
   const closeWithDelay = React__namespace.useCallback(event => {
     const closeDelay = getDelay(closeDelayProp, 'close', instance.pointerType);
@@ -644,7 +540,7 @@ function useHoverFloatingInteraction(context, parameters = {}) {
     clearSafePolygonPointerEventsMutation(instance);
   });
   const handleInteractInside = useValueChanged.useStableCallback(event => {
-    const target = DrawerRoot.getTarget(event);
+    const target = ScrollAreaViewport.getTarget(event);
     if (!isInteractiveElement(target)) {
       instance.interactedInside = false;
       return;
@@ -698,7 +594,7 @@ function useHoverFloatingInteraction(context, parameters = {}) {
       clearPointerEvents();
     }
     function onFloatingMouseLeave(event) {
-      if (tree && parentId && DrawerRoot.getNodeChildren(tree.nodesRef.current, parentId).length > 0) {
+      if (tree && parentId && ScrollAreaViewport.getNodeChildren(tree.nodesRef.current, parentId).length > 0) {
         tree.events.on('floating.closed', onNodeClosed);
         return;
       }
@@ -719,7 +615,7 @@ function useHoverFloatingInteraction(context, parameters = {}) {
       }
     }
     function onNodeClosed(event) {
-      if (!tree || !parentId || DrawerRoot.getNodeChildren(tree.nodesRef.current, parentId).length > 0) {
+      if (!tree || !parentId || ScrollAreaViewport.getNodeChildren(tree.nodesRef.current, parentId).length > 0) {
         return;
       }
       // Allow the mouseenter event to fire in case child was closed because mouse moved into parent.
@@ -772,7 +668,7 @@ function useHoverReferenceInteraction(context, props = {}) {
     isActiveTrigger = true,
     getHandleCloseContext
   } = props;
-  const tree = DrawerRoot.useFloatingTree(externalTree);
+  const tree = ScrollAreaViewport.useFloatingTree(externalTree);
   const instance = useHoverInteractionSharedState(store);
   const handleCloseRef = useValueChanged.useValueAsRef(handleClose);
   const delayRef = useValueChanged.useValueAsRef(delay);
@@ -786,14 +682,14 @@ function useHoverReferenceInteraction(context, props = {}) {
     return isClickLikeOpenEvent(dataRef.current.openEvent?.type, instance.interactedInside);
   });
   const isRelatedTargetInsideEnabledTrigger = useValueChanged.useStableCallback(target => {
-    return DrawerRoot.isTargetInsideEnabledTrigger(target, store.context.triggerElements);
+    return ScrollAreaViewport.isTargetInsideEnabledTrigger(target, store.context.triggerElements);
   });
   const isOverInactiveTrigger = useValueChanged.useStableCallback((currentDomReference, currentTarget, target) => {
     const allTriggers = store.context.triggerElements;
 
     // Fast path for normal usage where handlers are attached directly to triggers.
     if (allTriggers.hasElement(currentTarget)) {
-      return !currentDomReference || !DrawerRoot.contains(currentDomReference, currentTarget);
+      return !currentDomReference || !ScrollAreaViewport.contains(currentDomReference, currentTarget);
     }
 
     // Fallback for delegated/wrapper usage where currentTarget may be outside the trigger map.
@@ -801,7 +697,7 @@ function useHoverReferenceInteraction(context, props = {}) {
       return false;
     }
     const targetElement = target;
-    return allTriggers.hasMatchingElement(trigger => DrawerRoot.contains(trigger, targetElement)) && (!currentDomReference || !DrawerRoot.contains(currentDomReference, targetElement));
+    return allTriggers.hasMatchingElement(trigger => ScrollAreaViewport.contains(trigger, targetElement)) && (!currentDomReference || !ScrollAreaViewport.contains(currentDomReference, targetElement));
   });
   const closeWithDelay = React__namespace.useCallback((event, runElseBranch = true) => {
     const closeDelay = getDelay(delayRef.current, 'close', instance.pointerType);
@@ -927,7 +823,7 @@ function useHoverReferenceInteraction(context, props = {}) {
         instance.handler(event);
         return;
       }
-      const shouldClose = instance.pointerType === 'touch' ? !DrawerRoot.contains(store.select('floatingElement'), event.relatedTarget) : true;
+      const shouldClose = instance.pointerType === 'touch' ? !ScrollAreaViewport.contains(store.select('floatingElement'), event.relatedTarget) : true;
       if (shouldClose) {
         closeWithDelay(event);
       }
@@ -1016,23 +912,23 @@ function doSwitch(orientation, vertical, horizontal) {
   }
 }
 function isMainOrientationKey(key, orientation) {
-  const vertical = key === DrawerRoot.ARROW_UP || key === DrawerRoot.ARROW_DOWN;
-  const horizontal = key === DrawerRoot.ARROW_LEFT || key === DrawerRoot.ARROW_RIGHT;
+  const vertical = key === ScrollAreaViewport.ARROW_UP || key === ScrollAreaViewport.ARROW_DOWN;
+  const horizontal = key === ScrollAreaViewport.ARROW_LEFT || key === ScrollAreaViewport.ARROW_RIGHT;
   return doSwitch(orientation, vertical, horizontal);
 }
 function isMainOrientationToEndKey(key, orientation, rtl) {
-  const vertical = key === DrawerRoot.ARROW_DOWN;
-  const horizontal = rtl ? key === DrawerRoot.ARROW_LEFT : key === DrawerRoot.ARROW_RIGHT;
+  const vertical = key === ScrollAreaViewport.ARROW_DOWN;
+  const horizontal = rtl ? key === ScrollAreaViewport.ARROW_LEFT : key === ScrollAreaViewport.ARROW_RIGHT;
   return doSwitch(orientation, vertical, horizontal) || key === 'Enter' || key === ' ' || key === '';
 }
 function isCrossOrientationOpenKey(key, orientation, rtl) {
-  const vertical = rtl ? key === DrawerRoot.ARROW_LEFT : key === DrawerRoot.ARROW_RIGHT;
-  const horizontal = key === DrawerRoot.ARROW_DOWN;
+  const vertical = rtl ? key === ScrollAreaViewport.ARROW_LEFT : key === ScrollAreaViewport.ARROW_RIGHT;
+  const horizontal = key === ScrollAreaViewport.ARROW_DOWN;
   return doSwitch(orientation, vertical, horizontal);
 }
 function isCrossOrientationCloseKey(key, orientation, rtl, cols) {
-  const vertical = rtl ? key === DrawerRoot.ARROW_RIGHT : key === DrawerRoot.ARROW_LEFT;
-  const horizontal = key === DrawerRoot.ARROW_UP;
+  const vertical = rtl ? key === ScrollAreaViewport.ARROW_RIGHT : key === ScrollAreaViewport.ARROW_LEFT;
+  const horizontal = key === ScrollAreaViewport.ARROW_UP;
   if (orientation === 'both' || orientation === 'horizontal' && cols && cols > 1) {
     return key === ESCAPE;
   }
@@ -1084,14 +980,14 @@ function useListNavigation(context, props) {
       console.warn('In grid list navigation mode (`cols` > 1), the `orientation` should', 'be either "horizontal" or "both".');
     }
   }
-  const floatingFocusElement = DrawerRoot.getFloatingFocusElement(floatingElement);
+  const floatingFocusElement = ScrollAreaViewport.getFloatingFocusElement(floatingElement);
   const floatingFocusElementRef = useValueChanged.useValueAsRef(floatingFocusElement);
-  const parentId = DrawerRoot.useFloatingParentNodeId();
-  const tree = DrawerRoot.useFloatingTree(externalTree);
+  const parentId = ScrollAreaViewport.useFloatingParentNodeId();
+  const tree = ScrollAreaViewport.useFloatingTree(externalTree);
   useValueChanged.useIsoLayoutEffect(() => {
     dataRef.current.orientation = orientation;
   }, [dataRef, orientation]);
-  const typeableComboboxReference = DrawerRoot.isTypeableCombobox(domReferenceElement);
+  const typeableComboboxReference = ScrollAreaViewport.isTypeableCombobox(domReferenceElement);
   const focusItemOnOpenRef = React__namespace.useRef(focusItemOnOpen);
   const indexRef = React__namespace.useRef(selectedIndex ?? -1);
   const keyRef = React__namespace.useRef(null);
@@ -1113,7 +1009,7 @@ function useListNavigation(context, props) {
       if (virtual) {
         tree?.events.emit('virtualfocus', item);
       } else {
-        DrawerRoot.enqueueFocus(item, {
+        ScrollAreaViewport.enqueueFocus(item, {
           sync: forceSyncFocusRef.current,
           preventScroll: true
         });
@@ -1210,14 +1106,14 @@ function useListNavigation(context, props) {
             runs += 1;
           } else {
             // initially focus the first non-disabled item
-            indexRef.current = keyRef.current == null || isMainOrientationToEndKey(keyRef.current, orientation, rtl) || nested ? DrawerRoot.getMinListIndex(listRef) : DrawerRoot.getMaxListIndex(listRef);
+            indexRef.current = keyRef.current == null || isMainOrientationToEndKey(keyRef.current, orientation, rtl) || nested ? ScrollAreaViewport.getMinListIndex(listRef) : ScrollAreaViewport.getMaxListIndex(listRef);
             keyRef.current = null;
             onNavigate();
           }
         };
         waitForListPopulated();
       }
-    } else if (!DrawerRoot.isIndexOutOfListBounds(listRef, activeIndex)) {
+    } else if (!ScrollAreaViewport.isIndexOutOfListBounds(listRef, activeIndex)) {
       indexRef.current = activeIndex;
       focusItem();
       forceScrollIntoViewRef.current = false;
@@ -1232,8 +1128,8 @@ function useListNavigation(context, props) {
     }
     const nodes = tree.nodesRef.current;
     const parent = nodes.find(node => node.id === parentId)?.context?.elements.floating;
-    const activeEl = DrawerRoot.activeElement(useValueChanged.ownerDocument(floatingElement));
-    const treeContainsActiveEl = nodes.some(node => node.context && DrawerRoot.contains(node.context.elements.floating, activeEl));
+    const activeEl = ScrollAreaViewport.activeElement(useValueChanged.ownerDocument(floatingElement));
+    const treeContainsActiveEl = nodes.some(node => node.context && ScrollAreaViewport.contains(node.context.elements.floating, activeEl));
     if (parent && !treeContainsActiveEl && isPointerModalityRef.current) {
       parent.focus({
         preventScroll: true
@@ -1293,15 +1189,15 @@ function useListNavigation(context, props) {
         if (!resetOnPointerLeaveRef.current) {
           return;
         }
-        DrawerRoot.enqueueFocus(null, {
+        ScrollAreaViewport.enqueueFocus(null, {
           sync: true
         });
         indexRef.current = -1;
         onNavigate(event);
         if (!virtual) {
           const floatingFocusEl = floatingFocusElementRef.current;
-          const activeEl = DrawerRoot.activeElement(useValueChanged.ownerDocument(floatingFocusEl));
-          if (floatingFocusEl && DrawerRoot.contains(floatingFocusEl, activeEl)) {
+          const activeEl = ScrollAreaViewport.activeElement(useValueChanged.ownerDocument(floatingFocusEl));
+          if (floatingFocusEl && ScrollAreaViewport.contains(floatingFocusEl, activeEl)) {
             floatingFocusEl.focus({
               preventScroll: true
             });
@@ -1349,8 +1245,8 @@ function useListNavigation(context, props) {
       return;
     }
     const currentIndex = indexRef.current;
-    const minIndex = DrawerRoot.getMinListIndex(listRef, disabledIndices);
-    const maxIndex = DrawerRoot.getMaxListIndex(listRef, disabledIndices);
+    const minIndex = ScrollAreaViewport.getMinListIndex(listRef, disabledIndices);
+    const maxIndex = ScrollAreaViewport.getMaxListIndex(listRef, disabledIndices);
     if (!typeableComboboxReference) {
       if (event.key === 'Home') {
         useValueChanged.stopEvent(event);
@@ -1374,11 +1270,11 @@ function useListNavigation(context, props) {
       }));
       // To calculate movements on the grid, we use hypothetical cell indices
       // as if every item was 1x1, then convert back to real indices.
-      const cellMap = DrawerRoot.createGridCellMap(sizes, cols);
-      const minGridIndex = cellMap.findIndex(index => index != null && !DrawerRoot.isListIndexDisabled(listRef, index, disabledIndices));
+      const cellMap = ScrollAreaViewport.createGridCellMap(sizes, cols);
+      const minGridIndex = cellMap.findIndex(index => index != null && !ScrollAreaViewport.isListIndexDisabled(listRef, index, disabledIndices));
       // last enabled index
-      const maxGridIndex = cellMap.reduce((foundIndex, index, cellIndex) => index != null && !DrawerRoot.isListIndexDisabled(listRef, index, disabledIndices) ? cellIndex : foundIndex, -1);
-      const index = cellMap[DrawerRoot.getGridNavigatedIndex({
+      const maxGridIndex = cellMap.reduce((foundIndex, index, cellIndex) => index != null && !ScrollAreaViewport.isListIndexDisabled(listRef, index, disabledIndices) ? cellIndex : foundIndex, -1);
+      const index = cellMap[ScrollAreaViewport.getGridNavigatedIndex({
         current: cellMap.map(itemIndex => itemIndex != null ? listRef.current[itemIndex] : null)
       }, {
         event,
@@ -1388,15 +1284,15 @@ function useListNavigation(context, props) {
         cols,
         // treat undefined (empty grid spaces) as disabled indices so we
         // don't end up in them
-        disabledIndices: DrawerRoot.getGridCellIndices([...((typeof disabledIndices !== 'function' ? disabledIndices : null) || listRef.current.map((_, listIndex) => DrawerRoot.isListIndexDisabled(listRef, listIndex, disabledIndices) ? listIndex : undefined)), undefined], cellMap),
+        disabledIndices: ScrollAreaViewport.getGridCellIndices([...((typeof disabledIndices !== 'function' ? disabledIndices : null) || listRef.current.map((_, listIndex) => ScrollAreaViewport.isListIndexDisabled(listRef, listIndex, disabledIndices) ? listIndex : undefined)), undefined], cellMap),
         minIndex: minGridIndex,
         maxIndex: maxGridIndex,
-        prevIndex: DrawerRoot.getGridCellIndexOfCorner(indexRef.current > maxIndex ? minIndex : indexRef.current, sizes, cellMap, cols,
+        prevIndex: ScrollAreaViewport.getGridCellIndexOfCorner(indexRef.current > maxIndex ? minIndex : indexRef.current, sizes, cellMap, cols,
         // use a corner matching the edge closest to the direction
         // we're moving in so we don't end up in the same item. Prefer
         // top/left over bottom/right.
         // eslint-disable-next-line no-nested-ternary
-        event.key === DrawerRoot.ARROW_DOWN ? 'bl' : event.key === (rtl ? DrawerRoot.ARROW_LEFT : DrawerRoot.ARROW_RIGHT) ? 'tr' : 'tl'),
+        event.key === ScrollAreaViewport.ARROW_DOWN ? 'bl' : event.key === (rtl ? ScrollAreaViewport.ARROW_LEFT : ScrollAreaViewport.ARROW_RIGHT) ? 'tr' : 'tl'),
         stopEvent: true
       })];
       if (index != null) {
@@ -1411,7 +1307,7 @@ function useListNavigation(context, props) {
       useValueChanged.stopEvent(event);
 
       // Reset the index if no item is focused.
-      if (open && !virtual && DrawerRoot.activeElement(event.currentTarget.ownerDocument) === event.currentTarget) {
+      if (open && !virtual && ScrollAreaViewport.activeElement(event.currentTarget.ownerDocument) === event.currentTarget) {
         indexRef.current = isMainOrientationToEndKey(event.key, orientation, rtl) ? minIndex : maxIndex;
         onNavigate(event);
         return;
@@ -1427,13 +1323,13 @@ function useListNavigation(context, props) {
               indexRef.current = minIndex;
             }
           } else {
-            indexRef.current = DrawerRoot.findNonDisabledListIndex(listRef, {
+            indexRef.current = ScrollAreaViewport.findNonDisabledListIndex(listRef, {
               startingIndex: currentIndex,
               disabledIndices
             });
           }
         } else {
-          indexRef.current = Math.min(maxIndex, DrawerRoot.findNonDisabledListIndex(listRef, {
+          indexRef.current = Math.min(maxIndex, ScrollAreaViewport.findNonDisabledListIndex(listRef, {
             startingIndex: currentIndex,
             disabledIndices
           }));
@@ -1448,20 +1344,20 @@ function useListNavigation(context, props) {
             indexRef.current = maxIndex;
           }
         } else {
-          indexRef.current = DrawerRoot.findNonDisabledListIndex(listRef, {
+          indexRef.current = ScrollAreaViewport.findNonDisabledListIndex(listRef, {
             startingIndex: currentIndex,
             decrement: true,
             disabledIndices
           });
         }
       } else {
-        indexRef.current = Math.max(minIndex, DrawerRoot.findNonDisabledListIndex(listRef, {
+        indexRef.current = Math.max(minIndex, ScrollAreaViewport.findNonDisabledListIndex(listRef, {
           startingIndex: currentIndex,
           decrement: true,
           disabledIndices
         }));
       }
-      if (DrawerRoot.isIndexOutOfListBounds(listRef, indexRef.current)) {
+      if (ScrollAreaViewport.isIndexOutOfListBounds(listRef, indexRef.current)) {
         indexRef.current = -1;
       }
       onNavigate(event);
@@ -1482,8 +1378,8 @@ function useListNavigation(context, props) {
           // If the event originated from within a nested element (e.g., a Dialog opened from
           // within the menu), don't close the menu. The nested element has its own focus
           // management and should handle the Tab key.
-          const target = DrawerRoot.getTarget(event.nativeEvent);
-          if (target && !DrawerRoot.contains(floatingFocusElementRef.current, target)) {
+          const target = ScrollAreaViewport.getTarget(event.nativeEvent);
+          if (target && !ScrollAreaViewport.contains(floatingFocusElementRef.current, target)) {
             return;
           }
           useValueChanged.stopEvent(event);
@@ -1539,7 +1435,7 @@ function useListNavigation(context, props) {
           if (isParentCrossOpenKey) {
             useValueChanged.stopEvent(event);
             if (currentOpen) {
-              indexRef.current = DrawerRoot.getMinListIndex(listRef, disabledIndicesRef.current);
+              indexRef.current = ScrollAreaViewport.getMinListIndex(listRef, disabledIndicesRef.current);
               onNavigate(event);
             } else {
               store.setOpen(true, useValueChanged.createChangeEventDetails(useValueChanged.listNavigation, event.nativeEvent, event.currentTarget));
@@ -1642,7 +1538,7 @@ function useTypeahead(context, props) {
   const onKeyDown = useValueChanged.useStableCallback(event => {
     function isVisible(index) {
       const element = elementsRef?.current[index];
-      return !element || DrawerRoot.isElementVisible(element);
+      return !element || ScrollAreaViewport.isElementVisible(element);
     }
     function getMatchingIndex(list, string, startIndex = 0) {
       if (list.length === 0) {
@@ -1724,8 +1620,8 @@ function useTypeahead(context, props) {
     const next = event.relatedTarget;
     const currentDomReferenceElement = store.select('domReferenceElement');
     const currentFloatingElement = store.select('floatingElement');
-    const withinReference = DrawerRoot.contains(currentDomReferenceElement, next);
-    const withinFloating = DrawerRoot.contains(currentFloatingElement, next);
+    const withinReference = ScrollAreaViewport.contains(currentDomReferenceElement, next);
+    const withinFloating = ScrollAreaViewport.contains(currentFloatingElement, next);
 
     // Keep the session if focus moves within the composite (reference <-> floating).
     if (withinReference || withinFloating) {
@@ -1845,10 +1741,10 @@ function safePolygon(options = {}) {
         clientX,
         clientY
       } = event;
-      const target = DrawerRoot.getTarget(event);
+      const target = ScrollAreaViewport.getTarget(event);
       const isLeave = event.type === 'mouseleave';
-      const isOverFloatingEl = DrawerRoot.contains(floating, target);
-      const isOverReferenceEl = DrawerRoot.contains(domReference, target);
+      const isOverFloatingEl = ScrollAreaViewport.contains(floating, target);
+      const isOverReferenceEl = ScrollAreaViewport.contains(domReference, target);
       if (isOverFloatingEl) {
         hasLanded = true;
         if (!isLeave) {
@@ -1865,11 +1761,11 @@ function safePolygon(options = {}) {
 
       // Prevent overlapping floating element from being stuck in an open-close
       // loop: https://github.com/floating-ui/floating-ui/issues/1910
-      if (isLeave && floatingUi_utils_dom.isElement(event.relatedTarget) && DrawerRoot.contains(floating, event.relatedTarget)) {
+      if (isLeave && floatingUi_utils_dom.isElement(event.relatedTarget) && ScrollAreaViewport.contains(floating, event.relatedTarget)) {
         return undefined;
       }
       function hasOpenChildNode() {
-        return Boolean(tree && DrawerRoot.getNodeChildren(tree.nodesRef.current, nodeId).length > 0);
+        return Boolean(tree && ScrollAreaViewport.getNodeChildren(tree.nodesRef.current, nodeId).length > 0);
       }
       function closeIfNoOpenChild() {
         if (!hasOpenChildNode()) {
@@ -2010,8 +1906,8 @@ const DialogTitle = /*#__PURE__*/React__namespace.forwardRef(function DialogTitl
   } = componentProps;
   const {
     store
-  } = DrawerRoot.useDialogRootContext();
-  const id = useBaseUiId.useBaseUiId(idProp);
+  } = ScrollAreaViewport.useDialogRootContext();
+  const id = useValueChanged.useBaseUiId(idProp);
   store.useSyncedValueWithCleanup('titleElementId', id);
   return useRenderElement.useRenderElement('h2', componentProps, {
     ref: forwardedRef,
@@ -2022,66 +1918,6 @@ const DialogTitle = /*#__PURE__*/React__namespace.forwardRef(function DialogTitl
 });
 if (process.env.NODE_ENV !== "production") DialogTitle.displayName = "DialogTitle";
 
-/**
- * A button that opens the dialog.
- * Renders a `<button>` element.
- *
- * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
- */
-const DialogTrigger = /*#__PURE__*/React__namespace.forwardRef(function DialogTrigger(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    disabled = false,
-    nativeButton = true,
-    id: idProp,
-    payload,
-    handle,
-    ...elementProps
-  } = componentProps;
-  const dialogRootContext = DrawerRoot.useDialogRootContext(true);
-  const store = handle?.store ?? dialogRootContext?.store;
-  if (!store) {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: <Dialog.Trigger> must be used within <Dialog.Root> or provided with a handle.' : useRenderElement.formatErrorMessage(79));
-  }
-  const thisTriggerId = useBaseUiId.useBaseUiId(idProp);
-  const floatingContext = store.useState('floatingRootContext');
-  const isOpenedByThisTrigger = store.useState('isOpenedByTrigger', thisTriggerId);
-  const triggerElementRef = React__namespace.useRef(null);
-  const {
-    registerTrigger,
-    isMountedByThisTrigger
-  } = DrawerRoot.useTriggerDataForwarding(thisTriggerId, triggerElementRef, store, {
-    payload
-  });
-  const {
-    getButtonProps,
-    buttonRef
-  } = useBaseUiId.useButton({
-    disabled,
-    native: nativeButton
-  });
-  const click = useClick(floatingContext, {
-    enabled: floatingContext != null
-  });
-  const localInteractionProps = DrawerRoot.useInteractions([click]);
-  const state = {
-    disabled,
-    open: isOpenedByThisTrigger
-  };
-  const rootTriggerProps = store.useState('triggerProps', isMountedByThisTrigger);
-  return useRenderElement.useRenderElement('button', componentProps, {
-    state,
-    ref: [buttonRef, forwardedRef, registerTrigger, triggerElementRef],
-    props: [localInteractionProps.getReferenceProps(), rootTriggerProps, {
-      [DrawerRoot.CLICK_TRIGGER_IDENTIFIER]: '',
-      id: thisTriggerId
-    }, elementProps, getButtonProps],
-    stateAttributesMapping: DrawerRoot.triggerOpenStateMapping
-  });
-});
-if (process.env.NODE_ENV !== "production") DialogTrigger.displayName = "DialogTrigger";
-
 /**
  * A heading that labels the drawer.
  * Renders an `<h2>` element.
@@ -2090,14 +1926,6 @@ if (process.env.NODE_ENV !== "production") DialogTrigger.displayName = "DialogTr
  */
 const DrawerTitle = DialogTitle;
 
-/**
- * A button that opens the drawer.
- * Renders a `<button>` element.
- *
- * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
- */
-const DrawerTrigger = DialogTrigger;
-
 const MenuPositionerContext = /*#__PURE__*/React__namespace.createContext(undefined);
 if (process.env.NODE_ENV !== "production") MenuPositionerContext.displayName = "MenuPositionerContext";
 function useMenuPositionerContext(optional) {
@@ -2222,7 +2050,7 @@ function useMenuItem(params) {
   const {
     getButtonProps,
     buttonRef
-  } = useBaseUiId.useButton({
+  } = useValueChanged.useButton({
     disabled,
     focusableWhenDisabled: true,
     native: nativeButton,
@@ -2430,7 +2258,7 @@ const MenuGroupLabel = /*#__PURE__*/React__namespace.forwardRef(function MenuGro
     id: idProp,
     ...elementProps
   } = componentProps;
-  const id = useBaseUiId.useBaseUiId(idProp);
+  const id = useValueChanged.useBaseUiId(idProp);
   const {
     setLabelId
   } = useMenuGroupRootContext();
@@ -2472,7 +2300,7 @@ const MenuItem = /*#__PURE__*/React__namespace.forwardRef(function MenuItem(comp
     label
   });
   const menuPositionerContext = useMenuPositionerContext(true);
-  const id = useBaseUiId.useBaseUiId(idProp);
+  const id = useValueChanged.useBaseUiId(idProp);
   const {
     store
   } = useMenuRootContext();
@@ -2524,7 +2352,7 @@ const MenuLinkItem = /*#__PURE__*/React__namespace.forwardRef(function MenuLinkI
   });
   const menuPositionerContext = useMenuPositionerContext(true);
   const nodeId = menuPositionerContext?.nodeId;
-  const id = useBaseUiId.useBaseUiId(idProp);
+  const id = useValueChanged.useBaseUiId(idProp);
   const {
     store
   } = useMenuRootContext();
@@ -2534,7 +2362,7 @@ const MenuLinkItem = /*#__PURE__*/React__namespace.forwardRef(function MenuLinkI
   const {
     getButtonProps,
     buttonRef
-  } = useBaseUiId.useButton({
+  } = useValueChanged.useButton({
     native: false,
     composite: true
   });
@@ -2572,11 +2400,11 @@ function useToolbarRootContext(optional) {
 }
 
 function getDisabledMountTransitionStyles(transitionStatus) {
-  return transitionStatus === 'starting' ? DrawerRoot.DISABLED_TRANSITIONS_STYLE : useRenderElement.EMPTY_OBJECT;
+  return transitionStatus === 'starting' ? ScrollAreaViewport.DISABLED_TRANSITIONS_STYLE : useRenderElement.EMPTY_OBJECT;
 }
 
 const stateAttributesMapping = {
-  ...DrawerRoot.popupStateMapping,
+  ...ScrollAreaViewport.popupStateMapping,
   ...useValueChanged.transitionStatusMapping
 };
 
@@ -2656,7 +2484,7 @@ const MenuPopup = /*#__PURE__*/React__namespace.forwardRef(function MenuPopup(co
     stateAttributesMapping,
     props: [popupProps, {
       onKeyDown(event) {
-        if (insideToolbar && DrawerRoot.COMPOSITE_KEYS.has(event.key)) {
+        if (insideToolbar && ScrollAreaViewport.COMPOSITE_KEYS.has(event.key)) {
           event.stopPropagation();
         }
       }
@@ -2668,7 +2496,7 @@ const MenuPopup = /*#__PURE__*/React__namespace.forwardRef(function MenuPopup(co
   if (triggerElement || parent.type === 'menubar' && lastOpenChangeReason !== useValueChanged.outsidePress) {
     returnFocus = true;
   }
-  return /*#__PURE__*/jsxRuntime.jsx(DrawerRoot.FloatingFocusManager, {
+  return /*#__PURE__*/jsxRuntime.jsx(ScrollAreaViewport.FloatingFocusManager, {
     context: floatingContext,
     modal: isContextMenu,
     disabled: !mounted,
@@ -2709,7 +2537,7 @@ const MenuPortal = /*#__PURE__*/React__namespace.forwardRef(function MenuPortal(
   }
   return /*#__PURE__*/jsxRuntime.jsx(MenuPortalContext.Provider, {
     value: keepMounted,
-    children: /*#__PURE__*/jsxRuntime.jsx(DrawerRoot.FloatingPortal, {
+    children: /*#__PURE__*/jsxRuntime.jsx(ScrollAreaViewport.FloatingPortal, {
       ref: forwardedRef,
       ...portalProps
     })
@@ -2717,16 +2545,6 @@ const MenuPortal = /*#__PURE__*/React__namespace.forwardRef(function MenuPortal(
 });
 if (process.env.NODE_ENV !== "production") MenuPortal.displayName = "MenuPortal";
 
-/**
- * @internal
- */
-const DirectionContext = /*#__PURE__*/React__namespace.createContext(undefined);
-if (process.env.NODE_ENV !== "production") DirectionContext.displayName = "DirectionContext";
-function useDirection() {
-  const context = React__namespace.useContext(DirectionContext);
-  return context?.direction ?? 'ltr';
-}
-
 /**
  * Fork of the original `arrow` middleware from Floating UI that allows
  * configuring the offset parent.
@@ -2983,7 +2801,7 @@ function useAnchorPositioning(params) {
   const anchorFnCallback = useValueChanged.useStableCallback(anchorFn);
   const anchorDep = anchorFn ? anchorFnCallback : anchor;
   const anchorValueRef = useValueChanged.useValueAsRef(anchor);
-  const direction = useDirection();
+  const direction = ScrollAreaViewport.useDirection();
   const isRtl = direction === 'rtl';
   const side = mountSide || {
     top: 'top',
@@ -3456,7 +3274,7 @@ const MenuPositioner = /*#__PURE__*/React__namespace.forwardRef(function MenuPos
     arrowPadding = 5,
     sticky = false,
     disableAnchorTracking = false,
-    collisionAvoidance: collisionAvoidanceProp = DrawerRoot.DROPDOWN_COLLISION_AVOIDANCE,
+    collisionAvoidance: collisionAvoidanceProp = ScrollAreaViewport.DROPDOWN_COLLISION_AVOIDANCE,
     ...elementProps
   } = componentProps;
   const {
@@ -3499,7 +3317,7 @@ const MenuPositioner = /*#__PURE__*/React__namespace.forwardRef(function MenuPos
   if (parent.type === 'menu') {
     computedSide = computedSide ?? 'inline-end';
     computedAlign = computedAlign ?? 'start';
-    collisionAvoidance = componentProps.collisionAvoidance ?? DrawerRoot.POPUP_COLLISION_AVOIDANCE;
+    collisionAvoidance = componentProps.collisionAvoidance ?? ScrollAreaViewport.POPUP_COLLISION_AVOIDANCE;
   } else if (parent.type === 'menubar') {
     computedSide = computedSide ?? 'bottom';
     computedAlign = computedAlign ?? 'start';
@@ -3657,7 +3475,7 @@ const MenuPositioner = /*#__PURE__*/React__namespace.forwardRef(function MenuPos
   }), [positioner.side, positioner.align, positioner.arrowRef, positioner.arrowUncentered, positioner.arrowStyles, positioner.context.nodeId]);
   const element = useRenderElement.useRenderElement('div', componentProps, {
     state,
-    stateAttributesMapping: DrawerRoot.popupStateMapping,
+    stateAttributesMapping: ScrollAreaViewport.popupStateMapping,
     ref: [forwardedRef, store.useStateSetter('positionerElement')],
     props: [positionerProps, getDisabledMountTransitionStyles(transitionStatus), elementProps]
   });
@@ -3672,11 +3490,11 @@ const MenuPositioner = /*#__PURE__*/React__namespace.forwardRef(function MenuPos
   }
   return /*#__PURE__*/jsxRuntime.jsxs(MenuPositionerContext.Provider, {
     value: contextValue,
-    children: [shouldRenderBackdrop && /*#__PURE__*/jsxRuntime.jsx(DrawerRoot.InternalBackdrop, {
+    children: [shouldRenderBackdrop && /*#__PURE__*/jsxRuntime.jsx(ScrollAreaViewport.InternalBackdrop, {
       ref: parent.type === 'context-menu' || parent.type === 'nested-context-menu' ? parent.context.internalBackdropRef : null,
-      inert: DrawerRoot.inertValue(!open),
+      inert: ScrollAreaViewport.inertValue(!open),
       cutout: backdropCutout
-    }), /*#__PURE__*/jsxRuntime.jsx(DrawerRoot.FloatingNode, {
+    }), /*#__PURE__*/jsxRuntime.jsx(ScrollAreaViewport.FloatingNode, {
       id: floatingNodeId,
       children: /*#__PURE__*/jsxRuntime.jsx(CompositeList, {
         elementsRef: store.context.itemDomElements,
@@ -3777,7 +3595,7 @@ const MenuRadioItem = /*#__PURE__*/React__namespace.forwardRef(function MenuRadi
     label
   });
   const menuPositionerContext = useMenuPositionerContext(true);
-  const id = useBaseUiId.useBaseUiId(idProp);
+  const id = useValueChanged.useBaseUiId(idProp);
   const {
     store
   } = useMenuRootContext();
@@ -3891,35 +3709,35 @@ function useMenubarContext(optional) {
 }
 
 const selectors = {
-  ...DrawerRoot.popupStoreSelectors,
-  disabled: DrawerRoot.createSelector(state => state.parent.type === 'menubar' ? state.parent.context.disabled || state.disabled : state.disabled),
-  modal: DrawerRoot.createSelector(state => (state.parent.type === undefined || state.parent.type === 'context-menu') && (state.modal ?? true)),
-  allowMouseEnter: DrawerRoot.createSelector(state => state.allowMouseEnter),
-  stickIfOpen: DrawerRoot.createSelector(state => state.stickIfOpen),
-  parent: DrawerRoot.createSelector(state => state.parent),
-  rootId: DrawerRoot.createSelector(state => {
+  ...ScrollAreaViewport.popupStoreSelectors,
+  disabled: ScrollAreaViewport.createSelector(state => state.parent.type === 'menubar' ? state.parent.context.disabled || state.disabled : state.disabled),
+  modal: ScrollAreaViewport.createSelector(state => (state.parent.type === undefined || state.parent.type === 'context-menu') && (state.modal ?? true)),
+  allowMouseEnter: ScrollAreaViewport.createSelector(state => state.allowMouseEnter),
+  stickIfOpen: ScrollAreaViewport.createSelector(state => state.stickIfOpen),
+  parent: ScrollAreaViewport.createSelector(state => state.parent),
+  rootId: ScrollAreaViewport.createSelector(state => {
     if (state.parent.type === 'menu') {
       return state.parent.store.select('rootId');
     }
     return state.parent.type !== undefined ? state.parent.context.rootId : state.rootId;
   }),
-  activeIndex: DrawerRoot.createSelector(state => state.activeIndex),
-  isActive: DrawerRoot.createSelector((state, itemIndex) => state.activeIndex === itemIndex),
-  hoverEnabled: DrawerRoot.createSelector(state => state.hoverEnabled),
-  instantType: DrawerRoot.createSelector(state => state.instantType),
-  lastOpenChangeReason: DrawerRoot.createSelector(state => state.openChangeReason),
-  floatingTreeRoot: DrawerRoot.createSelector(state => {
+  activeIndex: ScrollAreaViewport.createSelector(state => state.activeIndex),
+  isActive: ScrollAreaViewport.createSelector((state, itemIndex) => state.activeIndex === itemIndex),
+  hoverEnabled: ScrollAreaViewport.createSelector(state => state.hoverEnabled),
+  instantType: ScrollAreaViewport.createSelector(state => state.instantType),
+  lastOpenChangeReason: ScrollAreaViewport.createSelector(state => state.openChangeReason),
+  floatingTreeRoot: ScrollAreaViewport.createSelector(state => {
     if (state.parent.type === 'menu') {
       return state.parent.store.select('floatingTreeRoot');
     }
     return state.floatingTreeRoot;
   }),
-  floatingNodeId: DrawerRoot.createSelector(state => state.floatingNodeId),
-  floatingParentNodeId: DrawerRoot.createSelector(state => state.floatingParentNodeId),
-  itemProps: DrawerRoot.createSelector(state => state.itemProps),
-  closeDelay: DrawerRoot.createSelector(state => state.closeDelay),
-  hasViewport: DrawerRoot.createSelector(state => state.hasViewport),
-  keyboardEventRelay: DrawerRoot.createSelector(state => {
+  floatingNodeId: ScrollAreaViewport.createSelector(state => state.floatingNodeId),
+  floatingParentNodeId: ScrollAreaViewport.createSelector(state => state.floatingParentNodeId),
+  itemProps: ScrollAreaViewport.createSelector(state => state.itemProps),
+  closeDelay: ScrollAreaViewport.createSelector(state => state.closeDelay),
+  hasViewport: ScrollAreaViewport.createSelector(state => state.hasViewport),
+  keyboardEventRelay: ScrollAreaViewport.createSelector(state => {
     if (state.keyboardEventRelay) {
       return state.keyboardEventRelay;
     }
@@ -3929,7 +3747,7 @@ const selectors = {
     return undefined;
   })
 };
-class MenuStore extends DrawerRoot.ReactStore {
+class MenuStore extends ScrollAreaViewport.ReactStore {
   constructor(initialState) {
     super({
       ...createInitialState(),
@@ -3952,7 +3770,7 @@ class MenuStore extends DrawerRoot.ReactStore {
       triggerFocusTargetRef: /*#__PURE__*/React__namespace.createRef(),
       beforeContentFocusGuardRef: /*#__PURE__*/React__namespace.createRef(),
       onOpenChangeComplete: undefined,
-      triggerElements: new DrawerRoot.PopupTriggerMap()
+      triggerElements: new ScrollAreaViewport.PopupTriggerMap()
     }, selectors);
 
     // Set up propagation of state from parent menu if applicable.
@@ -4000,7 +3818,7 @@ class MenuStore extends DrawerRoot.ReactStore {
 }
 function createInitialState() {
   return {
-    ...DrawerRoot.createInitialPopupStoreState(),
+    ...ScrollAreaViewport.createInitialPopupStoreState(),
     disabled: false,
     modal: true,
     allowMouseEnter: false,
@@ -4013,7 +3831,7 @@ function createInitialState() {
     hoverEnabled: true,
     instantType: undefined,
     openChangeReason: null,
-    floatingTreeRoot: new DrawerRoot.FloatingTreeStore(),
+    floatingTreeRoot: new ScrollAreaViewport.FloatingTreeStore(),
     floatingNodeId: undefined,
     floatingParentNodeId: null,
     itemProps: useRenderElement.EMPTY_OBJECT,
@@ -4029,7 +3847,7 @@ function useMenuSubmenuRootContext() {
   return React__namespace.useContext(MenuSubmenuRootContext);
 }
 
-const MenuRoot = DrawerRoot.fastComponent(function MenuRoot(props) {
+const MenuRoot = ScrollAreaViewport.fastComponent(function MenuRoot(props) {
   const {
     children,
     open: openProp,
@@ -4087,7 +3905,7 @@ const MenuRoot = DrawerRoot.fastComponent(function MenuRoot(props) {
   });
 
   // Support initially open state when uncontrolled
-  DrawerRoot.useOnFirstRender(() => {
+  ScrollAreaViewport.useOnFirstRender(() => {
     if (openProp === undefined && store.state.open === false && defaultOpen === true) {
       store.update({
         open: true,
@@ -4099,8 +3917,8 @@ const MenuRoot = DrawerRoot.fastComponent(function MenuRoot(props) {
   store.useControlledProp('triggerIdProp', triggerIdProp);
   store.useContextCallback('onOpenChangeComplete', onOpenChangeComplete);
   const floatingTreeRoot = store.useState('floatingTreeRoot');
-  const floatingNodeIdFromContext = DrawerRoot.useFloatingNodeId(floatingTreeRoot);
-  const floatingParentNodeIdFromContext = DrawerRoot.useFloatingParentNodeId();
+  const floatingNodeIdFromContext = ScrollAreaViewport.useFloatingNodeId(floatingTreeRoot);
+  const floatingParentNodeIdFromContext = ScrollAreaViewport.useFloatingParentNodeId();
   useValueChanged.useIsoLayoutEffect(() => {
     if (contextMenuContext && !parentMenuRootContext) {
       // This is a context menu root.
@@ -4147,11 +3965,11 @@ const MenuRoot = DrawerRoot.fastComponent(function MenuRoot(props) {
   const {
     openMethod,
     triggerProps: interactionTypeProps
-  } = DrawerRoot.useOpenInteractionType(open);
-  DrawerRoot.useImplicitActiveTrigger(store);
+  } = ScrollAreaViewport.useOpenInteractionType(open);
+  ScrollAreaViewport.useImplicitActiveTrigger(store);
   const {
     forceUnmount
-  } = DrawerRoot.useOpenStateTransitions(open, store, () => {
+  } = ScrollAreaViewport.useOpenStateTransitions(open, store, () => {
     store.update({
       allowMouseEnter: false,
       stickIfOpen: true
@@ -4179,7 +3997,7 @@ const MenuRoot = DrawerRoot.fastComponent(function MenuRoot(props) {
       allowOutsidePressDismissalRef.current = true;
     });
   }, [allowOutsidePressDismissalTimeout, open, parent.type]);
-  DrawerRoot.useScrollLock(open && modal && lastOpenChangeReason !== useValueChanged.triggerHover && openMethod !== 'touch', positionerElement);
+  ScrollAreaViewport.useScrollLock(open && modal && lastOpenChangeReason !== useValueChanged.triggerHover && openMethod !== 'touch', positionerElement);
   useValueChanged.useIsoLayoutEffect(() => {
     if (!open && !hoverEnabled) {
       store.set('hoverEnabled', true);
@@ -4288,7 +4106,7 @@ const MenuRoot = DrawerRoot.fastComponent(function MenuRoot(props) {
   React__namespace.useImperativeHandle(ctx?.actionsRef, () => ({
     setOpen
   }), [setOpen]);
-  const floatingRootContext = DrawerRoot.useSyncedFloatingRootContext({
+  const floatingRootContext = ScrollAreaViewport.useSyncedFloatingRootContext({
     popupStore: store,
     onOpenChange: setOpen
   });
@@ -4303,7 +4121,7 @@ const MenuRoot = DrawerRoot.fastComponent(function MenuRoot(props) {
       floatingEvents?.off('setOpen', handleSetOpenEvent);
     };
   }, [floatingEvents, setOpen]);
-  const dismiss = DrawerRoot.useDismiss(floatingRootContext, {
+  const dismiss = ScrollAreaViewport.useDismiss(floatingRootContext, {
     enabled: !disabled,
     bubbles: {
       escapeKey: closeParentOnEsc && parent.type === 'menu'
@@ -4316,10 +4134,10 @@ const MenuRoot = DrawerRoot.fastComponent(function MenuRoot(props) {
     },
     externalTree: nested ? floatingTreeRoot : undefined
   });
-  const role = DrawerRoot.useRole(floatingRootContext, {
+  const role = ScrollAreaViewport.useRole(floatingRootContext, {
     role: 'menu'
   });
-  const direction = useDirection();
+  const direction = ScrollAreaViewport.useDirection();
   const setActiveIndex = React__namespace.useCallback(index => {
     if (store.select('activeIndex') === index) {
       return;
@@ -4348,7 +4166,7 @@ const MenuRoot = DrawerRoot.fastComponent(function MenuRoot(props) {
     listRef: store.context.itemLabels,
     elementsRef: store.context.itemDomElements,
     activeIndex,
-    resetMs: DrawerRoot.TYPEAHEAD_RESET_MS,
+    resetMs: ScrollAreaViewport.TYPEAHEAD_RESET_MS,
     onMatch: index => {
       if (open && index !== activeIndex) {
         store.set('activeIndex', index);
@@ -4361,7 +4179,7 @@ const MenuRoot = DrawerRoot.fastComponent(function MenuRoot(props) {
     getFloatingProps,
     getItemProps,
     getTriggerProps
-  } = DrawerRoot.useInteractions([dismiss, role, listNavigation, typeahead]);
+  } = ScrollAreaViewport.useInteractions([dismiss, role, listNavigation, typeahead]);
   const activeTriggerProps = React__namespace.useMemo(() => {
     const mergedProps = useRenderElement.mergeProps(getReferenceProps(), {
       onMouseMove() {
@@ -4423,7 +4241,7 @@ const MenuRoot = DrawerRoot.fastComponent(function MenuRoot(props) {
   });
   if (parent.type === undefined || parent.type === 'context-menu') {
     // set up a FloatingTree to provide the context to nested menus
-    return /*#__PURE__*/jsxRuntime.jsx(DrawerRoot.FloatingTree, {
+    return /*#__PURE__*/jsxRuntime.jsx(ScrollAreaViewport.FloatingTree, {
       externalTree: floatingTreeRoot,
       children: content
     });
@@ -4491,7 +4309,7 @@ function useCompositeItem(params = {}) {
     highlightItemOnHover,
     highlightedIndex,
     onHighlightedIndexChange
-  } = useBaseUiId.useCompositeRootContext();
+  } = useValueChanged.useCompositeRootContext();
   const {
     ref,
     index
@@ -4606,7 +4424,7 @@ const BOUNDARY_OFFSET = 2;
  *
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
-const MenuTrigger = DrawerRoot.fastComponentRef(function MenuTrigger(componentProps, forwardedRef) {
+const MenuTrigger = ScrollAreaViewport.fastComponentRef(function MenuTrigger(componentProps, forwardedRef) {
   const {
     render,
     className,
@@ -4625,23 +4443,23 @@ const MenuTrigger = DrawerRoot.fastComponentRef(function MenuTrigger(componentPr
   if (!store) {
     throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: <Menu.Trigger> must be either used within a <Menu.Root> component or provided with a handle.' : useRenderElement.formatErrorMessage(85));
   }
-  const thisTriggerId = useBaseUiId.useBaseUiId(idProp);
+  const thisTriggerId = useValueChanged.useBaseUiId(idProp);
   const isTriggerActive = store.useState('isTriggerActive', thisTriggerId);
   const floatingRootContext = store.useState('floatingRootContext');
   const isOpenedByThisTrigger = store.useState('isOpenedByTrigger', thisTriggerId);
   const triggerElementRef = React__namespace.useRef(null);
   const parent = useMenuParent();
-  const compositeRootContext = useBaseUiId.useCompositeRootContext(true);
-  const floatingTreeRootFromContext = DrawerRoot.useFloatingTree();
+  const compositeRootContext = useValueChanged.useCompositeRootContext(true);
+  const floatingTreeRootFromContext = ScrollAreaViewport.useFloatingTree();
   const floatingTreeRoot = React__namespace.useMemo(() => {
-    return floatingTreeRootFromContext ?? new DrawerRoot.FloatingTreeStore();
+    return floatingTreeRootFromContext ?? new ScrollAreaViewport.FloatingTreeStore();
   }, [floatingTreeRootFromContext]);
-  const floatingNodeId = DrawerRoot.useFloatingNodeId(floatingTreeRoot);
-  const floatingParentNodeId = DrawerRoot.useFloatingParentNodeId();
+  const floatingNodeId = ScrollAreaViewport.useFloatingNodeId(floatingTreeRoot);
+  const floatingParentNodeId = ScrollAreaViewport.useFloatingParentNodeId();
   const {
     registerTrigger,
     isMountedByThisTrigger
-  } = DrawerRoot.useTriggerDataForwarding(thisTriggerId, triggerElementRef, store, {
+  } = ScrollAreaViewport.useTriggerDataForwarding(thisTriggerId, triggerElementRef, store, {
     payload,
     closeDelay,
     parent,
@@ -4656,7 +4474,7 @@ const MenuTrigger = DrawerRoot.fastComponentRef(function MenuTrigger(componentPr
   const {
     getButtonProps,
     buttonRef
-  } = useBaseUiId.useButton({
+  } = useValueChanged.useButton({
     disabled,
     native: nativeButton
   });
@@ -4674,7 +4492,7 @@ const MenuTrigger = DrawerRoot.fastComponentRef(function MenuTrigger(componentPr
     allowMouseUpTriggerTimeout.clear();
     store.context.allowMouseUpTriggerRef.current = false;
     const mouseUpTarget = mouseEvent.target;
-    if (DrawerRoot.contains(triggerRef.current, mouseUpTarget) || DrawerRoot.contains(store.select('positionerElement'), mouseUpTarget) || mouseUpTarget === triggerRef.current) {
+    if (ScrollAreaViewport.contains(triggerRef.current, mouseUpTarget) || ScrollAreaViewport.contains(store.select('positionerElement'), mouseUpTarget) || mouseUpTarget === triggerRef.current) {
       return;
     }
     if (mouseUpTarget != null && findRootOwnerId(mouseUpTarget) === store.select('rootId')) {
@@ -4719,7 +4537,7 @@ const MenuTrigger = DrawerRoot.fastComponentRef(function MenuTrigger(componentPr
   // `lastOpenChangeReason` doesn't need to be reactive here, as we need to run this
   // only when `isOpenedByThisTrigger` changes.
   const stickIfOpen = useStickIfOpen(isOpenedByThisTrigger, store.select('lastOpenChangeReason'));
-  const click = useClick(floatingRootContext, {
+  const click = ScrollAreaViewport.useClick(floatingRootContext, {
     enabled: !disabled && parent.type !== 'context-menu',
     event: isOpenedByThisTrigger && isInMenubar ? 'click' : 'mousedown',
     toggle: true,
@@ -4734,7 +4552,7 @@ const MenuTrigger = DrawerRoot.fastComponentRef(function MenuTrigger(componentPr
     enabled: isInMenubar,
     mouseDownAction: 'open'
   });
-  const localInteractionProps = DrawerRoot.useInteractions([click, focus]);
+  const localInteractionProps = ScrollAreaViewport.useInteractions([click, focus]);
   const state = {
     disabled,
     open: isOpenedByThisTrigger
@@ -4766,21 +4584,21 @@ const MenuTrigger = DrawerRoot.fastComponentRef(function MenuTrigger(componentPr
     ReactDOM__namespace.flushSync(() => {
       store.setOpen(false, useValueChanged.createChangeEventDetails(useValueChanged.focusOut, event.nativeEvent, event.currentTarget));
     });
-    const previousTabbable = DrawerRoot.getTabbableBeforeElement(preFocusGuardRef.current);
+    const previousTabbable = ScrollAreaViewport.getTabbableBeforeElement(preFocusGuardRef.current);
     previousTabbable?.focus();
   });
   const handleFocusTargetFocus = useValueChanged.useStableCallback(event => {
     const currentPositionerElement = store.select('positionerElement');
-    if (currentPositionerElement && DrawerRoot.isOutsideEvent(event, currentPositionerElement)) {
+    if (currentPositionerElement && ScrollAreaViewport.isOutsideEvent(event, currentPositionerElement)) {
       store.context.beforeContentFocusGuardRef.current?.focus();
     } else {
       ReactDOM__namespace.flushSync(() => {
         store.setOpen(false, useValueChanged.createChangeEventDetails(useValueChanged.focusOut, event.nativeEvent, event.currentTarget));
       });
-      let nextTabbable = DrawerRoot.getTabbableAfterElement(store.context.triggerFocusTargetRef.current || triggerElementRef.current);
-      while (nextTabbable !== null && DrawerRoot.contains(currentPositionerElement, nextTabbable)) {
+      let nextTabbable = ScrollAreaViewport.getTabbableAfterElement(store.context.triggerFocusTargetRef.current || triggerElementRef.current);
+      while (nextTabbable !== null && ScrollAreaViewport.contains(currentPositionerElement, nextTabbable)) {
         const prevTabbable = nextTabbable;
-        nextTabbable = DrawerRoot.getNextTabbable(nextTabbable);
+        nextTabbable = ScrollAreaViewport.getNextTabbable(nextTabbable);
         if (nextTabbable === prevTabbable) {
           break;
         }
@@ -4790,7 +4608,7 @@ const MenuTrigger = DrawerRoot.fastComponentRef(function MenuTrigger(componentPr
   });
   const element = useRenderElement.useRenderElement('button', componentProps, {
     enabled: !isInMenubar,
-    stateAttributesMapping: DrawerRoot.pressableTriggerOpenStateMapping,
+    stateAttributesMapping: ScrollAreaViewport.pressableTriggerOpenStateMapping,
     state,
     ref,
     props
@@ -4803,7 +4621,7 @@ const MenuTrigger = DrawerRoot.fastComponentRef(function MenuTrigger(componentPr
       state: state,
       refs: ref,
       props: props,
-      stateAttributesMapping: DrawerRoot.pressableTriggerOpenStateMapping
+      stateAttributesMapping: ScrollAreaViewport.pressableTriggerOpenStateMapping
     });
   }
 
@@ -4812,12 +4630,12 @@ const MenuTrigger = DrawerRoot.fastComponentRef(function MenuTrigger(componentPr
 
   if (isOpenedByThisTrigger) {
     return /*#__PURE__*/jsxRuntime.jsxs(React__namespace.Fragment, {
-      children: [/*#__PURE__*/jsxRuntime.jsx(DrawerRoot.FocusGuard, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(ScrollAreaViewport.FocusGuard, {
         ref: preFocusGuardRef,
         onFocus: handlePreFocusGuardFocus
       }, `${thisTriggerId}-pre-focus-guard`), /*#__PURE__*/jsxRuntime.jsx(React__namespace.Fragment, {
         children: element
-      }, thisTriggerId), /*#__PURE__*/jsxRuntime.jsx(DrawerRoot.FocusGuard, {
+      }, thisTriggerId), /*#__PURE__*/jsxRuntime.jsx(ScrollAreaViewport.FocusGuard, {
         ref: store.context.triggerFocusTargetRef,
         onFocus: handleFocusTargetFocus
       }, `${thisTriggerId}-post-focus-guard`)]
@@ -4839,7 +4657,7 @@ function useStickIfOpen(open, openReason) {
       // Only allow "patient" clicks to close the menu if it's open.
       // If they clicked within 500ms of the menu opening, keep it open.
       setStickIfOpen(true);
-      stickIfOpenTimeout.start(DrawerRoot.PATIENT_CLICK_THRESHOLD, () => {
+      stickIfOpenTimeout.start(ScrollAreaViewport.PATIENT_CLICK_THRESHOLD, () => {
         setStickIfOpen(false);
       });
     } else if (!open) {
@@ -4901,11 +4719,11 @@ const MenuSubmenuTrigger = /*#__PURE__*/React__namespace.forwardRef(function Sub
   const {
     store
   } = useMenuRootContext();
-  const thisTriggerId = useBaseUiId.useBaseUiId(idProp);
+  const thisTriggerId = useValueChanged.useBaseUiId(idProp);
   const open = store.useState('open');
   const floatingRootContext = store.useState('floatingRootContext');
   const floatingTreeRoot = store.useState('floatingTreeRoot');
-  const baseRegisterTrigger = DrawerRoot.useTriggerRegistration(thisTriggerId, store);
+  const baseRegisterTrigger = ScrollAreaViewport.useTriggerRegistration(thisTriggerId, store);
   const registerTrigger = React__namespace.useCallback(element => {
     const cleanup = baseRegisterTrigger(element);
     if (element !== null && store.select('open') && store.select('activeTriggerId') == null) {
@@ -4969,14 +4787,14 @@ const MenuSubmenuTrigger = /*#__PURE__*/React__namespace.forwardRef(function Sub
     triggerElementRef,
     externalTree: floatingTreeRoot
   });
-  const click = useClick(floatingRootContext, {
+  const click = ScrollAreaViewport.useClick(floatingRootContext, {
     enabled: !disabled,
     event: 'mousedown',
     toggle: !openOnHover,
     ignoreMouse: openOnHover,
     stickIfOpen: false
   });
-  const localInteractionProps = DrawerRoot.useInteractions([click]);
+  const localInteractionProps = ScrollAreaViewport.useInteractions([click]);
   const rootTriggerProps = store.useState('triggerProps', true);
   delete rootTriggerProps.id;
   const state = {
@@ -4986,7 +4804,7 @@ const MenuSubmenuTrigger = /*#__PURE__*/React__namespace.forwardRef(function Sub
   };
   const element = useRenderElement.useRenderElement('div', componentProps, {
     state,
-    stateAttributesMapping: DrawerRoot.triggerOpenStateMapping,
+    stateAttributesMapping: ScrollAreaViewport.triggerOpenStateMapping,
     props: [localInteractionProps.getReferenceProps(), hoverProps, rootTriggerProps, itemProps, {
       tabIndex: open || highlighted ? 0 : -1,
       onBlur() {
@@ -5004,7 +4822,6 @@ if (process.env.NODE_ENV !== "production") MenuSubmenuTrigger.displayName = "Men
 exports.CompositeList = CompositeList;
 exports.DrawerClose = DrawerClose;
 exports.DrawerTitle = DrawerTitle;
-exports.DrawerTrigger = DrawerTrigger;
 exports.IndexGuessBehavior = IndexGuessBehavior;
 exports.MenuGroup = MenuGroup;
 exports.MenuGroupLabel = MenuGroupLabel;
@@ -5026,10 +4843,8 @@ exports.getDisabledMountTransitionStyles = getDisabledMountTransitionStyles;
 exports.getPseudoElementBounds = getPseudoElementBounds;
 exports.itemMapping = itemMapping;
 exports.useAnchorPositioning = useAnchorPositioning;
-exports.useClick = useClick;
 exports.useCompositeListItem = useCompositeListItem;
 exports.useContextMenuRootContext = useContextMenuRootContext;
-exports.useDirection = useDirection;
 exports.useFloatingRootContext = useFloatingRootContext;
 exports.useListNavigation = useListNavigation;
 exports.useMenuItem = useMenuItem;