@base-ui/react 1.2.0 → 1.4.0

package/menubar/Menubar.js

@@ -7,18 +7,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Menubar = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _useScrollLock = require("@base-ui/utils/useScrollLock");
 var _floatingUiReact = require("../floating-ui-react");
 var _MenubarContext = require("./MenubarContext");
-var _useOpenInteractionType = require("../utils/useOpenInteractionType");
 var _CompositeRoot = require("../composite/root/CompositeRoot");
 var _useBaseUiId = require("../utils/useBaseUiId");
+var _MenubarDataAttributes = require("./MenubarDataAttributes");
 var _jsxRuntime = require("react/jsx-runtime");
 const menubarStateAttributesMapping = {
   hasSubmenuOpen(value) {
-    return {
-      'data-has-submenu-open': value ? 'true' : 'false'
-    };
+    return value ? {
+      [_MenubarDataAttributes.MenubarDataAttributes.hasSubmenuOpen]: ''
+    } : null;
   }
 };
 
@@ -36,21 +35,11 @@ const Menubar = exports.Menubar = /*#__PURE__*/React.forwardRef(function Menubar
     modal = true,
     disabled = false,
     id: idProp,
+    style,
     ...elementProps
   } = props;
   const [contentElement, setContentElement] = React.useState(null);
   const [hasSubmenuOpen, setHasSubmenuOpen] = React.useState(false);
-  const {
-    openMethod,
-    triggerProps: interactionTypeProps,
-    reset: resetOpenInteractionType
-  } = (0, _useOpenInteractionType.useOpenInteractionType)(hasSubmenuOpen);
-  React.useEffect(() => {
-    if (!hasSubmenuOpen) {
-      resetOpenInteractionType();
-    }
-  }, [hasSubmenuOpen, resetOpenInteractionType]);
-  (0, _useScrollLock.useScrollLock)(modal && hasSubmenuOpen && openMethod !== 'touch', contentElement);
   const id = (0, _useBaseUiId.useBaseUiId)(idProp);
   const state = {
     orientation,
@@ -77,13 +66,14 @@ const Menubar = exports.Menubar = /*#__PURE__*/React.forwardRef(function Menubar
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CompositeRoot.CompositeRoot, {
           render: render,
           className: className,
+          style: style,
           state: state,
           stateAttributesMapping: menubarStateAttributesMapping,
           refs: [forwardedRef, setContentElement, contentRef],
           props: [{
             role: 'menubar',
             id
-          }, interactionTypeProps, elementProps],
+          }, elementProps],
           orientation: orientation,
           loopFocus: loopFocus,
           highlightItemOnHover: hasSubmenuOpen

package/menubar/MenubarDataAttributes.d.ts

@@ -1,12 +1,15 @@
-export declare enum MenuTriggerDataAttributes {
+export declare enum MenubarDataAttributes {
   /**
    * Present when the corresponding menubar is modal.
    */
   modal = "data-modal",
   /**
    * Determines the orientation of the menubar.
-   * @type 'horizontal' | 'vertical'
-   * @default 'horizontal'
+   * @type {'horizontal' | 'vertical'}
    */
   orientation = "data-orientation",
+  /**
+   * Present when any submenu within the menubar is open.
+   */
+  hasSubmenuOpen = "data-has-submenu-open",
 }

package/menubar/MenubarDataAttributes.js

@@ -3,17 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MenuTriggerDataAttributes = void 0;
-let MenuTriggerDataAttributes = exports.MenuTriggerDataAttributes = /*#__PURE__*/function (MenuTriggerDataAttributes) {
+exports.MenubarDataAttributes = void 0;
+let MenubarDataAttributes = exports.MenubarDataAttributes = /*#__PURE__*/function (MenubarDataAttributes) {
   /**
    * Present when the corresponding menubar is modal.
    */
-  MenuTriggerDataAttributes["modal"] = "data-modal";
+  MenubarDataAttributes["modal"] = "data-modal";
   /**
    * Determines the orientation of the menubar.
-   * @type 'horizontal' | 'vertical'
-   * @default 'horizontal'
+   * @type {'horizontal' | 'vertical'}
    */
-  MenuTriggerDataAttributes["orientation"] = "data-orientation";
-  return MenuTriggerDataAttributes;
+  MenubarDataAttributes["orientation"] = "data-orientation";
+  /**
+   * Present when any submenu within the menubar is open.
+   */
+  MenubarDataAttributes["hasSubmenuOpen"] = "data-has-submenu-open";
+  return MenubarDataAttributes;
 }({});

package/merge-props/mergeProps.d.ts

@@ -18,7 +18,7 @@ type InputProps<T extends React.ElementType> = PropsOf<T> | ((otherProps: PropsO
  * Props can either be provided as objects or as functions that take the previous props as an argument.
  * The function will receive the merged props up to that point (going from left to right):
  * so in the case of `(obj1, obj2, fn, obj3)`, `fn` will receive the merged props of `obj1` and `obj2`.
- * The function is responsible for chaining event handlers if needed (i.e. we don't run the merge logic).
+ * The function is responsible for chaining event handlers if needed (that is, we don't run the merge logic).
  *
  * Event handlers returned by the functions are not automatically prevented when `preventBaseUIHandler` is called.
  * They must check `event.baseUIHandlerPrevented` themselves and bail out if it's true.

package/merge-props/mergeProps.js

@@ -26,7 +26,7 @@ const EMPTY_PROPS = {};
  * Props can either be provided as objects or as functions that take the previous props as an argument.
  * The function will receive the merged props up to that point (going from left to right):
  * so in the case of `(obj1, obj2, fn, obj3)`, `fn` will receive the merged props of `obj1` and `obj2`.
- * The function is responsible for chaining event handlers if needed (i.e. we don't run the merge logic).
+ * The function is responsible for chaining event handlers if needed (that is, we don't run the merge logic).
  *
  * Event handlers returned by the functions are not automatically prevented when `preventBaseUIHandler` is called.
  * They must check `event.baseUIHandlerPrevented` themselves and bail out if it's true.
@@ -42,21 +42,23 @@ const EMPTY_PROPS = {};
  */
 
 function mergeProps(a, b, c, d, e) {
-  // We need to mutably own `merged`
-  let merged = {
-    ...resolvePropsGetter(a, EMPTY_PROPS)
-  };
+  if (!c && !d && !e && !a) {
+    return createInitialMergedProps(b);
+  }
+
+  // We need to mutably own `merged`.
+  let merged = createInitialMergedProps(a);
   if (b) {
-    merged = mergeOne(merged, b);
+    merged = mergeInto(merged, b);
   }
   if (c) {
-    merged = mergeOne(merged, c);
+    merged = mergeInto(merged, c);
   }
   if (d) {
-    merged = mergeOne(merged, d);
+    merged = mergeInto(merged, d);
   }
   if (e) {
-    merged = mergeOne(merged, e);
+    merged = mergeInto(merged, e);
   }
   return merged;
 }
@@ -80,24 +82,46 @@ function mergePropsN(props) {
     return EMPTY_PROPS;
   }
   if (props.length === 1) {
-    return resolvePropsGetter(props[0], EMPTY_PROPS);
+    return createInitialMergedProps(props[0]);
   }
 
-  // We need to mutably own `merged`
-  let merged = {
-    ...resolvePropsGetter(props[0], EMPTY_PROPS)
-  };
+  // We need to mutably own `merged`.
+  let merged = createInitialMergedProps(props[0]);
   for (let i = 1; i < props.length; i += 1) {
-    merged = mergeOne(merged, props[i]);
+    merged = mergeInto(merged, props[i]);
   }
   return merged;
 }
-function mergeOne(merged, inputProps) {
+function createInitialMergedProps(inputProps) {
+  if (isPropsGetter(inputProps)) {
+    // Getter-returned handlers intentionally keep their existing semantics.
+    return {
+      ...resolvePropsGetter(inputProps, EMPTY_PROPS)
+    };
+  }
+  return copyInitialProps(inputProps);
+}
+function mergeInto(merged, inputProps) {
   if (isPropsGetter(inputProps)) {
-    return inputProps(merged);
+    return resolvePropsGetter(inputProps, merged);
   }
   return mutablyMergeInto(merged, inputProps);
 }
+function copyInitialProps(inputProps) {
+  const copiedProps = {
+    ...inputProps
+  };
+
+  // `copiedProps` is our fresh own-object copy, so iterating with `for...in` is safe here.
+  // eslint-disable-next-line guard-for-in
+  for (const propName in copiedProps) {
+    const propValue = copiedProps[propName];
+    if (isEventHandler(propName, propValue)) {
+      copiedProps[propName] = wrapEventHandler(propValue);
+    }
+  }
+  return copiedProps;
+}
 
 /**
  * Merges two sets of props. In case of conflicts, the external props take precedence.
@@ -154,7 +178,7 @@ function mergeEventHandlers(ourHandler, theirHandler) {
     return ourHandler;
   }
   if (!ourHandler) {
-    return theirHandler;
+    return wrapEventHandler(theirHandler);
   }
   return event => {
     if (isSyntheticEvent(event)) {
@@ -171,6 +195,17 @@ function mergeEventHandlers(ourHandler, theirHandler) {
     return result;
   };
 }
+function wrapEventHandler(handler) {
+  if (!handler) {
+    return handler;
+  }
+  return event => {
+    if (isSyntheticEvent(event)) {
+      makeEventPreventable(event);
+    }
+    return handler(event);
+  };
+}
 function makeEventPreventable(event) {
   event.preventBaseUIHandler = () => {
     event.baseUIHandlerPrevented = true;

package/meter/indicator/MeterIndicator.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BaseUIComponentProps } from "../../utils/types.js";
-import type { MeterRoot } from "../root/MeterRoot.js";
+import type { MeterRootState } from "../root/MeterRoot.js";
 /**
  * Visualizes the position of the value along the range.
  * Renders a `<div>` element.
@@ -8,7 +8,9 @@ import type { MeterRoot } from "../root/MeterRoot.js";
  * Documentation: [Base UI Meter](https://base-ui.com/react/components/meter)
  */
 export declare const MeterIndicator: React.ForwardRefExoticComponent<Omit<MeterIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface MeterIndicatorProps extends BaseUIComponentProps<'div', MeterRoot.State> {}
+export interface MeterIndicatorState extends MeterRootState {}
+export interface MeterIndicatorProps extends BaseUIComponentProps<'div', MeterIndicatorState> {}
 export declare namespace MeterIndicator {
+  type State = MeterIndicatorState;
   type Props = MeterIndicatorProps;
 }

package/meter/indicator/MeterIndicator.js

@@ -20,6 +20,7 @@ const MeterIndicator = exports.MeterIndicator = /*#__PURE__*/React.forwardRef(fu
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const context = (0, _MeterRootContext.useMeterRootContext)();

package/meter/label/MeterLabel.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { MeterRoot } from "../root/MeterRoot.js";
+import type { MeterRootState } from "../root/MeterRoot.js";
 import { BaseUIComponentProps } from "../../utils/types.js";
 /**
  * An accessible label for the meter.
@@ -8,7 +8,9 @@ import { BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Meter](https://base-ui.com/react/components/meter)
  */
 export declare const MeterLabel: React.ForwardRefExoticComponent<Omit<MeterLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-export interface MeterLabelProps extends BaseUIComponentProps<'span', MeterRoot.State> {}
+export interface MeterLabelState extends MeterRootState {}
+export interface MeterLabelProps extends BaseUIComponentProps<'span', MeterLabelState> {}
 export declare namespace MeterLabel {
+  type State = MeterLabelState;
   type Props = MeterLabelProps;
 }

package/meter/label/MeterLabel.js

@@ -7,10 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.MeterLabel = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
-var _useBaseUiId = require("../../utils/useBaseUiId");
 var _MeterRootContext = require("../root/MeterRootContext");
 var _useRenderElement = require("../../utils/useRenderElement");
+var _useRegisteredLabelId = require("../../utils/useRegisteredLabelId");
 /**
  * An accessible label for the meter.
  * Renders a `<span>` element.
@@ -21,21 +20,19 @@ const MeterLabel = exports.MeterLabel = /*#__PURE__*/React.forwardRef(function M
   const {
     render,
     className,
+    style,
     id: idProp,
     ...elementProps
   } = componentProps;
-  const id = (0, _useBaseUiId.useBaseUiId)(idProp);
   const {
     setLabelId
   } = (0, _MeterRootContext.useMeterRootContext)();
-  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    setLabelId(id);
-    return () => setLabelId(undefined);
-  }, [id, setLabelId]);
+  const id = (0, _useRegisteredLabelId.useRegisteredLabelId)(idProp, setLabelId);
   return (0, _useRenderElement.useRenderElement)('span', componentProps, {
     ref: forwardedRef,
     props: [{
-      id
+      id,
+      role: 'presentation'
     }, elementProps]
   });
 });

package/meter/root/MeterRoot.d.ts

@@ -8,7 +8,7 @@ import { BaseUIComponentProps } from "../../utils/types.js";
  */
 export declare const MeterRoot: React.ForwardRefExoticComponent<Omit<MeterRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface MeterRootState {}
-export interface MeterRootProps extends BaseUIComponentProps<'div', MeterRoot.State> {
+export interface MeterRootProps extends BaseUIComponentProps<'div', MeterRootState> {
   /**
    * A string value that provides a user-friendly name for `aria-valuenow`, the current value of the meter.
    */

package/meter/root/MeterRoot.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.MeterRoot = void 0;
 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");
@@ -27,6 +28,8 @@ const MeterRoot = exports.MeterRoot = /*#__PURE__*/React.forwardRef(function Met
     value: valueProp,
     render,
     className,
+    children,
+    style,
     ...elementProps
   } = componentProps;
   const [labelId, setLabelId] = React.useState();
@@ -43,7 +46,14 @@ const MeterRoot = exports.MeterRoot = /*#__PURE__*/React.forwardRef(function Met
     'aria-valuemin': min,
     'aria-valuenow': valueProp,
     'aria-valuetext': ariaValuetext,
-    role: 'meter'
+    role: 'meter',
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+      children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        role: "presentation",
+        style: _visuallyHidden.visuallyHidden,
+        children: "x"
+      })]
+    })
   };
   const contextValue = React.useMemo(() => ({
     formattedValue,

package/meter/track/MeterTrack.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { MeterRoot } from "../root/MeterRoot.js";
+import type { MeterRootState } from "../root/MeterRoot.js";
 import { BaseUIComponentProps } from "../../utils/types.js";
 /**
  * Contains the meter indicator and represents the entire range of the meter.
@@ -8,7 +8,9 @@ import { BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Meter](https://base-ui.com/react/components/meter)
  */
 export declare const MeterTrack: React.ForwardRefExoticComponent<Omit<MeterTrackProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface MeterTrackProps extends BaseUIComponentProps<'div', MeterRoot.State> {}
+export interface MeterTrackState extends MeterRootState {}
+export interface MeterTrackProps extends BaseUIComponentProps<'div', MeterTrackState> {}
 export declare namespace MeterTrack {
+  type State = MeterTrackState;
   type Props = MeterTrackProps;
 }

package/meter/track/MeterTrack.js

@@ -18,6 +18,7 @@ const MeterTrack = exports.MeterTrack = /*#__PURE__*/React.forwardRef(function M
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   return (0, _useRenderElement.useRenderElement)('div', componentProps, {

package/meter/value/MeterValue.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../utils/types.js";
-import type { MeterRoot } from "../root/MeterRoot.js";
+import type { MeterRootState } from "../root/MeterRoot.js";
 /**
  * A text element displaying the current value.
  * Renders a `<span>` element.
@@ -8,9 +8,11 @@ import type { MeterRoot } from "../root/MeterRoot.js";
  * Documentation: [Base UI Meter](https://base-ui.com/react/components/meter)
  */
 export declare const MeterValue: React.ForwardRefExoticComponent<Omit<MeterValueProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-export interface MeterValueProps extends Omit<BaseUIComponentProps<'span', MeterRoot.State>, 'children'> {
-  children?: (null | ((formattedValue: string, value: number) => React.ReactNode)) | undefined;
+export interface MeterValueState extends MeterRootState {}
+export interface MeterValueProps extends Omit<BaseUIComponentProps<'span', MeterValueState>, 'children'> {
+  children?: null | ((formattedValue: string, value: number) => React.ReactNode) | undefined;
 }
 export declare namespace MeterValue {
+  type State = MeterValueState;
   type Props = MeterValueProps;
 }

package/meter/value/MeterValue.js

@@ -20,6 +20,7 @@ const MeterValue = exports.MeterValue = /*#__PURE__*/React.forwardRef(function M
     className,
     render,
     children,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/navigation-menu/arrow/NavigationMenuArrow.d.ts

@@ -13,11 +13,20 @@ export interface NavigationMenuArrowState {
    * Whether the popup is currently open.
    */
   open: boolean;
+  /**
+   * The side of the anchor the component is placed on.
+   */
   side: Side;
+  /**
+   * The alignment of the component relative to the anchor.
+   */
   align: Align;
+  /**
+   * Whether the arrow cannot be centered on the anchor.
+   */
   uncentered: boolean;
 }
-export interface NavigationMenuArrowProps extends BaseUIComponentProps<'div', NavigationMenuArrow.State> {}
+export interface NavigationMenuArrowProps extends BaseUIComponentProps<'div', NavigationMenuArrowState> {}
 export declare namespace NavigationMenuArrow {
   type State = NavigationMenuArrowState;
   type Props = NavigationMenuArrowProps;

package/navigation-menu/arrow/NavigationMenuArrow.js

@@ -21,6 +21,7 @@ const NavigationMenuArrow = exports.NavigationMenuArrow = /*#__PURE__*/React.for
   const {
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/navigation-menu/backdrop/NavigationMenuBackdrop.d.ts

@@ -18,7 +18,7 @@ export interface NavigationMenuBackdropState {
    */
   transitionStatus: TransitionStatus;
 }
-export interface NavigationMenuBackdropProps extends BaseUIComponentProps<'div', NavigationMenuBackdrop.State> {}
+export interface NavigationMenuBackdropProps extends BaseUIComponentProps<'div', NavigationMenuBackdropState> {}
 export declare namespace NavigationMenuBackdrop {
   type State = NavigationMenuBackdropState;
   type Props = NavigationMenuBackdropProps;

package/navigation-menu/backdrop/NavigationMenuBackdrop.js

@@ -26,6 +26,7 @@ const NavigationMenuBackdrop = exports.NavigationMenuBackdrop = /*#__PURE__*/Rea
   const {
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/navigation-menu/content/NavigationMenuContent.d.ts

@@ -23,7 +23,7 @@ export interface NavigationMenuContentState {
    */
   activationDirection: 'left' | 'right' | 'up' | 'down' | null;
 }
-export interface NavigationMenuContentProps extends BaseUIComponentProps<'div', NavigationMenuContent.State> {
+export interface NavigationMenuContentProps extends BaseUIComponentProps<'div', NavigationMenuContentState> {
   /**
    * Whether to keep the content mounted in the DOM while the popup is closed.
    * Ensures the content is present during server-side rendering for web crawlers.

package/navigation-menu/content/NavigationMenuContent.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.NavigationMenuContent = void 0;
 var React = _interopRequireWildcard(require("react"));
 var ReactDOM = _interopRequireWildcard(require("react-dom"));
+var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _inertValue = require("@base-ui/utils/inertValue");
 var _floatingUiReact = require("../../floating-ui-react");
 var _utils = require("../../floating-ui-react/utils");
@@ -45,6 +46,7 @@ const NavigationMenuContent = exports.NavigationMenuContent = /*#__PURE__*/React
     className,
     render,
     keepMounted = false,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -83,6 +85,16 @@ const NavigationMenuContent = exports.NavigationMenuContent = /*#__PURE__*/React
       }
     }
   });
+
+  // When a content re-enters while still mounted (e.g. switching top-level triggers
+  // back before the exit animation completes), the DOM element hasn't changed so the
+  // callback ref won't fire again. Ensure the shared ref is updated so the
+  // MutationObserver in the trigger watches the correct content element.
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    if (open && ref.current) {
+      currentContentRef.current = ref.current;
+    }
+  }, [open, currentContentRef]);
   const state = {
     open,
     transitionStatus,
@@ -126,6 +138,7 @@ const NavigationMenuContent = exports.NavigationMenuContent = /*#__PURE__*/React
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CompositeRoot.CompositeRoot, {
       render: render,
       className: className,
+      style: style,
       state: state,
       refs: [forwardedRef],
       props: [defaultProps, {
@@ -142,6 +155,7 @@ const NavigationMenuContent = exports.NavigationMenuContent = /*#__PURE__*/React
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CompositeRoot.CompositeRoot, {
       render: render,
       className: className,
+      style: style,
       state: state,
       refs: [forwardedRef, ref, handleCurrentContentRef],
       props: [defaultProps, hidden ? {

package/navigation-menu/icon/NavigationMenuIcon.d.ts

@@ -12,7 +12,7 @@ export interface NavigationMenuIconState {
    */
   open: boolean;
 }
-export interface NavigationMenuIconProps extends BaseUIComponentProps<'span', NavigationMenuIcon.State> {}
+export interface NavigationMenuIconProps extends BaseUIComponentProps<'span', NavigationMenuIconState> {}
 export declare namespace NavigationMenuIcon {
   type State = NavigationMenuIconState;
   type Props = NavigationMenuIconProps;

package/navigation-menu/icon/NavigationMenuIcon.js

@@ -20,6 +20,7 @@ const NavigationMenuIcon = exports.NavigationMenuIcon = /*#__PURE__*/React.forwa
   const {
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/navigation-menu/item/NavigationMenuItem.d.ts

@@ -8,7 +8,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  */
 export declare const NavigationMenuItem: React.ForwardRefExoticComponent<Omit<NavigationMenuItemProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
 export interface NavigationMenuItemState {}
-export interface NavigationMenuItemProps extends BaseUIComponentProps<'li', NavigationMenuItem.State> {
+export interface NavigationMenuItemProps extends BaseUIComponentProps<'li', NavigationMenuItemState> {
   /**
    * A unique value that identifies this navigation menu item.
    * If no value is provided, a unique ID will be generated automatically.

package/navigation-menu/item/NavigationMenuItem.js

@@ -22,6 +22,7 @@ const NavigationMenuItem = exports.NavigationMenuItem = /*#__PURE__*/React.forwa
     className,
     render,
     value: valueProp,
+    style,
     ...elementProps
   } = componentProps;
   const fallbackValue = (0, _useBaseUiId.useBaseUiId)();

package/navigation-menu/link/NavigationMenuLink.d.ts

@@ -13,7 +13,7 @@ export interface NavigationMenuLinkState {
    */
   active: boolean;
 }
-export interface NavigationMenuLinkProps extends BaseUIComponentProps<'a', NavigationMenuLink.State> {
+export interface NavigationMenuLinkProps extends BaseUIComponentProps<'a', NavigationMenuLinkState> {
   /**
    * Whether the link is the currently active page.
    * @default false

package/navigation-menu/link/NavigationMenuLink.js

@@ -26,6 +26,7 @@ const NavigationMenuLink = exports.NavigationMenuLink = /*#__PURE__*/React.forwa
     render,
     active = false,
     closeOnClick = false,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -65,6 +66,7 @@ const NavigationMenuLink = exports.NavigationMenuLink = /*#__PURE__*/React.forwa
     tag: "a",
     render: render,
     className: className,
+    style: style,
     state: state,
     refs: [forwardedRef],
     props: [defaultProps, elementProps]

package/navigation-menu/list/NavigationMenuList.d.ts

@@ -13,7 +13,7 @@ export interface NavigationMenuListState {
    */
   open: boolean;
 }
-export interface NavigationMenuListProps extends BaseUIComponentProps<'ul', NavigationMenuList.State> {}
+export interface NavigationMenuListProps extends BaseUIComponentProps<'ul', NavigationMenuListState> {}
 export declare namespace NavigationMenuList {
   type State = NavigationMenuListState;
   type Props = NavigationMenuListProps;