@base-ui/react 1.4.0 → 1.5.0

package/menu/store/MenuStore.d.ts

@@ -3,7 +3,7 @@ import { ReactStore } from '@base-ui/utils/store';
 import type { InteractionType } from '@base-ui/utils/useEnhancedClickHandler';
 import { MenuParent, MenuRoot } from "../root/MenuRoot.js";
 import { FloatingTreeStore } from "../../floating-ui-react/components/FloatingTreeStore.js";
-import { HTMLProps } from "../../utils/types.js";
+import { HTMLProps } from "../../internals/types.js";
 import { PopupStoreContext, PopupStoreState } from "../../utils/popups/index.js";
 export type State<Payload> = PopupStoreState<Payload> & {
   disabled: boolean;
@@ -59,8 +59,10 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -76,8 +78,10 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -93,8 +97,10 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -105,13 +111,15 @@ declare const selectors: {
     activeTriggerProps: HTMLProps;
     inactiveTriggerProps: HTMLProps;
     popupProps: HTMLProps;
-  }) => import("../../utils/useTransitionStatus.js").TransitionStatus;
+  }) => import("../../internals/useTransitionStatus.js").TransitionStatus;
   floatingRootContext: (state: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -123,12 +131,33 @@ declare const selectors: {
     inactiveTriggerProps: HTMLProps;
     popupProps: HTMLProps;
   }) => import("../../floating-ui-react/components/FloatingRootStore.js").FloatingRootStore;
+  triggerCount: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
+    preventUnmountingOnClose: boolean;
+    payload: unknown;
+    activeTriggerId: string | null;
+    activeTriggerElement: Element | null;
+    readonly triggerIdProp: string | null | undefined;
+    popupElement: HTMLElement | null;
+    positionerElement: HTMLElement | null;
+    activeTriggerProps: HTMLProps;
+    inactiveTriggerProps: HTMLProps;
+    popupProps: HTMLProps;
+  }) => number;
   preventUnmountingOnClose: (state: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -144,8 +173,10 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -161,8 +192,10 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -178,8 +211,10 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -191,12 +226,33 @@ declare const selectors: {
     inactiveTriggerProps: HTMLProps;
     popupProps: HTMLProps;
   }) => Element | null;
+  popupId: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
+    preventUnmountingOnClose: boolean;
+    payload: unknown;
+    activeTriggerId: string | null;
+    activeTriggerElement: Element | null;
+    readonly triggerIdProp: string | null | undefined;
+    popupElement: HTMLElement | null;
+    positionerElement: HTMLElement | null;
+    activeTriggerProps: HTMLProps;
+    inactiveTriggerProps: HTMLProps;
+    popupProps: HTMLProps;
+  }) => string | undefined;
   isTriggerActive: (state: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -212,8 +268,10 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -229,8 +287,10 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -246,8 +306,10 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -259,12 +321,33 @@ declare const selectors: {
     inactiveTriggerProps: HTMLProps;
     popupProps: HTMLProps;
   }, isActive: boolean) => HTMLProps;
+  triggerPopupId: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
+    preventUnmountingOnClose: boolean;
+    payload: unknown;
+    activeTriggerId: string | null;
+    activeTriggerElement: Element | null;
+    readonly triggerIdProp: string | null | undefined;
+    popupElement: HTMLElement | null;
+    positionerElement: HTMLElement | null;
+    activeTriggerProps: HTMLProps;
+    inactiveTriggerProps: HTMLProps;
+    popupProps: HTMLProps;
+  }, triggerId: string | undefined) => string | undefined;
   popupProps: (state: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -280,8 +363,10 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -297,8 +382,10 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;

package/menu/submenu-trigger/MenuSubmenuTrigger.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BaseUIComponentProps, NonNativeButtonProps } from "../../utils/types.js";
+import { BaseUIComponentProps, NonNativeButtonProps } from "../../internals/types.js";
 /**
  * A menu item that opens a submenu.
  * Renders a `<div>` element.

package/menu/submenu-trigger/MenuSubmenuTrigger.js

@@ -13,13 +13,14 @@ var _isElementDisabled = require("@base-ui/utils/isElementDisabled");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _warn = require("@base-ui/utils/warn");
 var _safeReact = require("@base-ui/utils/safeReact");
+var _empty = require("@base-ui/utils/empty");
 var _floatingUiReact = require("../../floating-ui-react");
 var _MenuRootContext = require("../root/MenuRootContext");
-var _useBaseUiId = require("../../utils/useBaseUiId");
+var _useBaseUiId = require("../../internals/useBaseUiId");
 var _popupStateMapping = require("../../utils/popupStateMapping");
-var _useCompositeListItem = require("../../composite/list/useCompositeListItem");
+var _useCompositeListItem = require("../../internals/composite/list/useCompositeListItem");
 var _useMenuItem = require("../item/useMenuItem");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _MenuPositionerContext = require("../positioner/MenuPositionerContext");
 var _popups = require("../../utils/popups");
 var _MenuSubmenuRootContext = require("../submenu-root/MenuSubmenuRootContext");
@@ -29,10 +30,11 @@ var _MenuSubmenuRootContext = require("../submenu-root/MenuSubmenuRootContext");
  *
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
-const MenuSubmenuTrigger = exports.MenuSubmenuTrigger = /*#__PURE__*/React.forwardRef(function SubmenuTriggerComponent(componentProps, forwardedRef) {
+const MenuSubmenuTrigger = exports.MenuSubmenuTrigger = /*#__PURE__*/React.forwardRef(function MenuSubmenuTrigger(componentProps, forwardedRef) {
   const {
     render,
     className,
+    style,
     label,
     id: idProp,
     nativeButton = false,
@@ -40,7 +42,6 @@ const MenuSubmenuTrigger = exports.MenuSubmenuTrigger = /*#__PURE__*/React.forwa
     delay = 100,
     closeDelay = 0,
     disabled: disabledProp = false,
-    style,
     ...elementProps
   } = componentProps;
   const listItem = (0, _useCompositeListItem.useCompositeListItem)();
@@ -52,6 +53,7 @@ const MenuSubmenuTrigger = exports.MenuSubmenuTrigger = /*#__PURE__*/React.forwa
   const open = store.useState('open');
   const floatingRootContext = store.useState('floatingRootContext');
   const floatingTreeRoot = store.useState('floatingTreeRoot');
+  const popupId = store.useState('triggerPopupId', thisTriggerId);
   const baseRegisterTrigger = (0, _popups.useTriggerRegistration)(thisTriggerId, store);
   const registerTrigger = React.useCallback(element => {
     const cleanup = baseRegisterTrigger(element);
@@ -134,7 +136,7 @@ const MenuSubmenuTrigger = exports.MenuSubmenuTrigger = /*#__PURE__*/React.forwa
     ignoreMouse: openOnHover,
     stickIfOpen: false
   });
-  const localInteractionProps = (0, _floatingUiReact.useInteractions)([click]);
+  const localInteractionProps = click.reference ?? _empty.EMPTY_OBJECT;
   const rootTriggerProps = store.useState('triggerProps', true);
   delete rootTriggerProps.id;
   const state = {
@@ -145,7 +147,8 @@ const MenuSubmenuTrigger = exports.MenuSubmenuTrigger = /*#__PURE__*/React.forwa
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
     stateAttributesMapping: _popupStateMapping.triggerOpenStateMapping,
-    props: [localInteractionProps.getReferenceProps(), hoverProps, rootTriggerProps, itemProps, {
+    props: [localInteractionProps, hoverProps, rootTriggerProps, itemProps, {
+      'aria-controls': popupId,
       tabIndex: open || highlighted ? 0 : -1,
       onBlur() {
         if (highlighted) {

package/menu/trigger/MenuTrigger.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.js";
+import { BaseUIComponentProps, NativeButtonProps } from "../../internals/types.js";
 import { MenuHandle } from "../store/MenuHandle.js";
 /**
  * A button that opens the menu.

package/menu/trigger/MenuTrigger.js

@@ -20,21 +20,22 @@ var _FloatingTreeStore = require("../../floating-ui-react/components/FloatingTre
 var _utils = require("../../floating-ui-react/utils");
 var _MenuRootContext = require("../root/MenuRootContext");
 var _popupStateMapping = require("../../utils/popupStateMapping");
-var _useRenderElement = require("../../utils/useRenderElement");
-var _useButton = require("../../use-button/useButton");
+var _useRenderElement = require("../../internals/useRenderElement");
+var _useButton = require("../../internals/use-button/useButton");
 var _getPseudoElementBounds = require("../../utils/getPseudoElementBounds");
-var _CompositeItem = require("../../composite/item/CompositeItem");
-var _CompositeRootContext = require("../../composite/root/CompositeRootContext");
+var _CompositeItem = require("../../internals/composite/item/CompositeItem");
+var _CompositeRootContext = require("../../internals/composite/root/CompositeRootContext");
 var _findRootOwnerId = require("../utils/findRootOwnerId");
 var _popups = require("../../utils/popups");
 var _useTriggerFocusGuards = require("../../utils/popups/useTriggerFocusGuards");
-var _useBaseUiId = require("../../utils/useBaseUiId");
-var _reasons = require("../../utils/reasons");
+var _useBaseUiId = require("../../internals/useBaseUiId");
+var _reasons = require("../../internals/reasons");
 var _useMixedToggleClickHandler = require("../../utils/useMixedToggleClickHandler");
 var _ContextMenuRootContext = require("../../context-menu/root/ContextMenuRootContext");
 var _MenubarContext = require("../../menubar/MenubarContext");
-var _constants = require("../../utils/constants");
+var _constants = require("../../internals/constants");
 var _FocusGuard = require("../../utils/FocusGuard");
+var _mergeProps = require("../../merge-props");
 var _jsxRuntime = require("react/jsx-runtime");
 const BOUNDARY_OFFSET = 2;
 
@@ -48,6 +49,7 @@ const MenuTrigger = exports.MenuTrigger = (0, _fastHooks.fastComponentRef)(funct
   const {
     render,
     className,
+    style,
     disabled: disabledProp = false,
     nativeButton = true,
     id: idProp,
@@ -56,7 +58,6 @@ const MenuTrigger = exports.MenuTrigger = (0, _fastHooks.fastComponentRef)(funct
     closeDelay = 0,
     handle,
     payload,
-    style,
     ...elementProps
   } = componentProps;
   const rootContext = (0, _MenuRootContext.useMenuRootContext)(true);
@@ -68,6 +69,7 @@ const MenuTrigger = exports.MenuTrigger = (0, _fastHooks.fastComponentRef)(funct
   const isTriggerActive = store.useState('isTriggerActive', thisTriggerId);
   const floatingRootContext = store.useState('floatingRootContext');
   const isOpenedByThisTrigger = store.useState('isOpenedByTrigger', thisTriggerId);
+  const popupId = store.useState('triggerPopupId', thisTriggerId);
   const triggerElementRef = React.useRef(null);
   const parent = useMenuParent();
   const compositeRootContext = (0, _CompositeRootContext.useCompositeRootContext)(true);
@@ -174,15 +176,21 @@ const MenuTrigger = exports.MenuTrigger = (0, _fastHooks.fastComponentRef)(funct
     enabled: isInMenubar,
     mouseDownAction: 'open'
   });
-  const localInteractionProps = (0, _floatingUiReact.useInteractions)([click, focus]);
+  const localInteractionProps = React.useMemo(() => (0, _mergeProps.mergeProps)(focus.reference, click.reference), [focus.reference, click.reference]);
+  const rootTriggerProps = store.useState('triggerProps', isMountedByThisTrigger);
+  const {
+    preFocusGuardRef,
+    handlePreFocusGuardFocus,
+    handleFocusTargetFocus
+  } = (0, _useTriggerFocusGuards.useTriggerFocusGuards)(store, triggerElementRef);
   const state = {
     disabled,
     open: isOpenedByThisTrigger
   };
-  const rootTriggerProps = store.useState('triggerProps', isMountedByThisTrigger);
   const ref = [triggerRef, forwardedRef, buttonRef, registerTrigger, triggerElementRef];
-  const props = [localInteractionProps.getReferenceProps(), hoverProps ?? _empty.EMPTY_OBJECT, rootTriggerProps, {
+  const props = [localInteractionProps, hoverProps ?? _empty.EMPTY_OBJECT, rootTriggerProps, {
     'aria-haspopup': 'menu',
+    'aria-controls': popupId,
     id: thisTriggerId,
     onMouseDown: event => {
       if (store.select('open')) {
@@ -201,11 +209,6 @@ const MenuTrigger = exports.MenuTrigger = (0, _fastHooks.fastComponentRef)(funct
   }, isInMenubar ? {
     role: 'menuitem'
   } : {}, mixedToggleHandlers, elementProps, getButtonProps];
-  const {
-    preFocusGuardRef,
-    handlePreFocusGuardFocus,
-    handleFocusTargetFocus
-  } = (0, _useTriggerFocusGuards.useTriggerFocusGuards)(store, triggerElementRef);
   const element = (0, _useRenderElement.useRenderElement)('button', componentProps, {
     enabled: !isInMenubar,
     stateAttributesMapping: _popupStateMapping.pressableTriggerOpenStateMapping,

package/menu/utils/stateAttributesMapping.d.ts

@@ -1,4 +1,4 @@
-import type { StateAttributesMapping } from "../../utils/getStateAttributesProps.js";
+import type { StateAttributesMapping } from "../../internals/getStateAttributesProps.js";
 export declare const itemMapping: StateAttributesMapping<{
   checked: boolean;
 }>;

package/menu/utils/stateAttributesMapping.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.itemMapping = void 0;
-var _stateAttributesMapping = require("../../utils/stateAttributesMapping");
+var _stateAttributesMapping = require("../../internals/stateAttributesMapping");
 var _MenuCheckboxItemDataAttributes = require("../checkbox-item/MenuCheckboxItemDataAttributes");
 const itemMapping = exports.itemMapping = {
   checked(value) {

package/menu/viewport/MenuViewport.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { BaseUIComponentProps } from "../../utils/types.js";
+import { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * A viewport for displaying content transitions.
- * This component is only required if one popup can be opened by multiple triggers, its content change based on the trigger
- * and switching between them is animated.
+ * This component is only required if one popup can be opened by multiple triggers, its content
+ * changes based on the trigger, and switching between them is animated.
  * Renders a `<div>` element.
  *
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)

package/menu/viewport/MenuViewport.js

@@ -9,7 +9,7 @@ exports.MenuViewport = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _MenuRootContext = require("../root/MenuRootContext");
 var _MenuPositionerContext = require("../positioner/MenuPositionerContext");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _usePopupViewport = require("../../utils/usePopupViewport");
 var _MenuViewportCssVars = require("./MenuViewportCssVars");
 const stateAttributesMapping = {
@@ -20,8 +20,8 @@ const stateAttributesMapping = {
 
 /**
  * A viewport for displaying content transitions.
- * This component is only required if one popup can be opened by multiple triggers, its content change based on the trigger
- * and switching between them is animated.
+ * This component is only required if one popup can be opened by multiple triggers, its content
+ * changes based on the trigger, and switching between them is animated.
  * Renders a `<div>` element.
  *
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)

package/menubar/Menubar.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type MenuRoot } from "../menu/root/MenuRoot.js";
-import { BaseUIComponentProps } from "../utils/types.js";
+import { BaseUIComponentProps } from "../internals/types.js";
 /**
  * The container for menus.
  *

package/menubar/Menubar.js

@@ -9,8 +9,8 @@ exports.Menubar = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _floatingUiReact = require("../floating-ui-react");
 var _MenubarContext = require("./MenubarContext");
-var _CompositeRoot = require("../composite/root/CompositeRoot");
-var _useBaseUiId = require("../utils/useBaseUiId");
+var _CompositeRoot = require("../internals/composite/root/CompositeRoot");
+var _useBaseUiId = require("../internals/useBaseUiId");
 var _MenubarDataAttributes = require("./MenubarDataAttributes");
 var _jsxRuntime = require("react/jsx-runtime");
 const menubarStateAttributesMapping = {

package/merge-props/mergeProps.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIEvent, WithBaseUIEvent } from "../utils/types.js";
+import type { BaseUIEvent, WithBaseUIEvent } from "../internals/types.js";
 type ElementType = React.ElementType;
 type PropsOf<T extends React.ElementType> = WithBaseUIEvent<React.ComponentPropsWithRef<T>>;
 type InputProps<T extends React.ElementType> = PropsOf<T> | ((otherProps: PropsOf<T>) => PropsOf<T>) | undefined;

package/merge-props/mergeProps.js

@@ -180,18 +180,19 @@ function mergeEventHandlers(ourHandler, theirHandler) {
   if (!ourHandler) {
     return wrapEventHandler(theirHandler);
   }
-  return event => {
+  return (...args) => {
+    const event = args[0];
     if (isSyntheticEvent(event)) {
       const baseUIEvent = event;
       makeEventPreventable(baseUIEvent);
-      const result = theirHandler(baseUIEvent);
+      const result = theirHandler(...args);
       if (!baseUIEvent.baseUIHandlerPrevented) {
-        ourHandler?.(baseUIEvent);
+        ourHandler?.(...args);
       }
       return result;
     }
-    const result = theirHandler(event);
-    ourHandler?.(event);
+    const result = theirHandler(...args);
+    ourHandler?.(...args);
     return result;
   };
 }
@@ -199,11 +200,12 @@ function wrapEventHandler(handler) {
   if (!handler) {
     return handler;
   }
-  return event => {
+  return (...args) => {
+    const event = args[0];
     if (isSyntheticEvent(event)) {
       makeEventPreventable(event);
     }
-    return handler(event);
+    return handler(...args);
   };
 }
 function makeEventPreventable(event) {

package/meter/indicator/MeterIndicator.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BaseUIComponentProps } from "../../utils/types.js";
+import { BaseUIComponentProps } from "../../internals/types.js";
 import type { MeterRootState } from "../root/MeterRoot.js";
 /**
  * Visualizes the position of the value along the range.

package/meter/indicator/MeterIndicator.js

@@ -9,7 +9,7 @@ exports.MeterIndicator = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _valueToPercent = require("../../utils/valueToPercent");
 var _MeterRootContext = require("../root/MeterRootContext");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 /**
  * Visualizes the position of the value along the range.
  * Renders a `<div>` element.

package/meter/label/MeterLabel.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { MeterRootState } from "../root/MeterRoot.js";
-import { BaseUIComponentProps } from "../../utils/types.js";
+import { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * An accessible label for the meter.
  * Renders a `<span>` element.

package/meter/label/MeterLabel.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.MeterLabel = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _MeterRootContext = require("../root/MeterRootContext");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _useRegisteredLabelId = require("../../utils/useRegisteredLabelId");
 /**
  * An accessible label for the meter.

package/meter/root/MeterRoot.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BaseUIComponentProps } from "../../utils/types.js";
+import { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * Groups all parts of the meter and provides the value for screen readers.
  * Renders a `<div>` element.

package/meter/root/MeterRoot.js

@@ -10,7 +10,7 @@ var React = _interopRequireWildcard(require("react"));
 var _visuallyHidden = require("@base-ui/utils/visuallyHidden");
 var _MeterRootContext = require("./MeterRootContext");
 var _formatNumber = require("../../utils/formatNumber");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Groups all parts of the meter and provides the value for screen readers.

package/meter/track/MeterTrack.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { MeterRootState } from "../root/MeterRoot.js";
-import { BaseUIComponentProps } from "../../utils/types.js";
+import { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * Contains the meter indicator and represents the entire range of the meter.
  * Renders a `<div>` element.

package/meter/track/MeterTrack.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.MeterTrack = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 /**
  * Contains the meter indicator and represents the entire range of the meter.
  * Renders a `<div>` element.

package/meter/value/MeterValue.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 import type { MeterRootState } from "../root/MeterRoot.js";
 /**
  * A text element displaying the current value.

package/meter/value/MeterValue.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.MeterValue = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _MeterRootContext = require("../root/MeterRootContext");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 /**
  * A text element displaying the current value.
  * Renders a `<span>` element.