@base-ui/react 1.1.0 → 1.3.0

package/esm/menu/submenu-trigger/MenuSubmenuTrigger.js

@@ -68,7 +68,9 @@ export const MenuSubmenuTrigger = /*#__PURE__*/React.forwardRef(function Submenu
   const highlighted = parentMenuStore.useState('isActive', listItem.index);
   const itemMetadata = React.useMemo(() => ({
     type: 'submenu-trigger',
-    setActive: () => parentMenuStore.set('activeIndex', listItem.index)
+    setActive() {
+      parentMenuStore.set('activeIndex', listItem.index);
+    }
   }), [parentMenuStore, listItem.index]);
   const rootDisabled = store.useState('disabled');
   const disabled = disabledProp || rootDisabled;
@@ -81,24 +83,25 @@ export const MenuSubmenuTrigger = /*#__PURE__*/React.forwardRef(function Submenu
     highlighted,
     id: thisTriggerId,
     store,
+    typingRef: parentMenuStore.context.typingRef,
     nativeButton,
     itemMetadata,
     nodeId: menuPositionerContext?.nodeId
   });
   const hoverEnabled = store.useState('hoverEnabled');
-  const allowMouseEnter = store.useState('allowMouseEnter');
+  const allowMouseEnter = parentMenuStore.useState('allowMouseEnter');
   const hoverProps = useHoverReferenceInteraction(floatingRootContext, {
-    enabled: hoverEnabled && openOnHover && !disabled && allowMouseEnter,
+    enabled: hoverEnabled && openOnHover && !disabled,
     handleClose: safePolygon({
       blockPointerEvents: true
     }),
     mouseOnly: true,
     move: true,
     restMs: delay,
-    delay: {
+    delay: allowMouseEnter ? {
       open: delay,
       close: closeDelay
-    },
+    } : 0,
     triggerElementRef,
     externalTree: floatingTreeRoot
   });
@@ -112,11 +115,11 @@ export const MenuSubmenuTrigger = /*#__PURE__*/React.forwardRef(function Submenu
   const localInteractionProps = useInteractions([click]);
   const rootTriggerProps = store.useState('triggerProps', true);
   delete rootTriggerProps.id;
-  const state = React.useMemo(() => ({
+  const state = {
     disabled,
     highlighted,
     open
-  }), [disabled, highlighted, open]);
+  };
   const element = useRenderElement('div', componentProps, {
     state,
     stateAttributesMapping: triggerOpenStateMapping,

package/esm/menu/trigger/MenuTrigger.d.ts

@@ -11,28 +11,28 @@ export declare const MenuTrigger: MenuTrigger;
 export interface MenuTrigger {
   <Payload>(componentProps: MenuTriggerProps<Payload> & React.RefAttributes<HTMLElement>): React.JSX.Element;
 }
-export interface MenuTriggerProps<Payload = unknown> extends NativeButtonProps, BaseUIComponentProps<'button', MenuTrigger.State> {
+export interface MenuTriggerProps<Payload = unknown> extends NativeButtonProps, BaseUIComponentProps<'button', MenuTriggerState> {
   children?: React.ReactNode;
   /**
    * Whether the component should ignore user interaction.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * A handle to associate the trigger with a menu.
    */
-  handle?: MenuHandle<Payload>;
+  handle?: MenuHandle<Payload> | undefined;
   /**
    * A payload to pass to the menu when it is opened.
    */
-  payload?: Payload;
+  payload?: Payload | undefined;
   /**
    * How long to wait before the menu may be opened on hover. Specified in milliseconds.
    *
    * Requires the `openOnHover` prop.
    * @default 100
    */
-  delay?: number;
+  delay?: number | undefined;
   /**
    * How long to wait before closing the menu that was opened on hover.
    * Specified in milliseconds.
@@ -40,18 +40,22 @@ export interface MenuTriggerProps<Payload = unknown> extends NativeButtonProps,
    * Requires the `openOnHover` prop.
    * @default 0
    */
-  closeDelay?: number;
+  closeDelay?: number | undefined;
   /**
    * Whether the menu should also open when the trigger is hovered.
    */
-  openOnHover?: boolean;
+  openOnHover?: boolean | undefined;
 }
-export type MenuTriggerState = {
+export interface MenuTriggerState {
   /**
    * Whether the menu is currently open.
    */
   open: boolean;
-};
+  /**
+   * Whether the trigger is disabled.
+   */
+  disabled: boolean;
+}
 export declare namespace MenuTrigger {
   type Props<Payload = unknown> = MenuTriggerProps<Payload>;
   type State = MenuTriggerState;

package/esm/menu/trigger/MenuTrigger.js

@@ -5,6 +5,7 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { useTimeout } from '@base-ui/utils/useTimeout';
 import { ownerDocument } from '@base-ui/utils/owner';
+import { fastComponentRef } from '@base-ui/utils/fastHooks';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { EMPTY_OBJECT } from '@base-ui/utils/empty';
@@ -37,7 +38,7 @@ const BOUNDARY_OFFSET = 2;
  *
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
-export const MenuTrigger = /*#__PURE__*/React.forwardRef(function MenuTrigger(componentProps, forwardedRef) {
+export const MenuTrigger = fastComponentRef(function MenuTrigger(componentProps, forwardedRef) {
   const {
     render,
     className,
@@ -166,10 +167,10 @@ export const MenuTrigger = /*#__PURE__*/React.forwardRef(function MenuTrigger(co
     mouseDownAction: 'open'
   });
   const localInteractionProps = useInteractions([click, focus]);
-  const state = React.useMemo(() => ({
+  const state = {
     disabled,
     open: isOpenedByThisTrigger
-  }), [disabled, isOpenedByThisTrigger]);
+  };
   const rootTriggerProps = store.useState('triggerProps', isMountedByThisTrigger);
   const ref = [triggerRef, forwardedRef, buttonRef, registerTrigger, triggerElementRef];
   const props = [localInteractionProps.getReferenceProps(), hoverProps ?? EMPTY_OBJECT, rootTriggerProps, {

package/esm/menu/viewport/MenuViewport.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { BaseUIComponentProps } from "../../utils/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.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
+ */
+export declare const MenuViewport: React.ForwardRefExoticComponent<Omit<MenuViewport.Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare namespace MenuViewport {
+  interface Props extends BaseUIComponentProps<'div', State> {
+    /**
+     * The content to render inside the transition container.
+     */
+    children?: React.ReactNode;
+  }
+  interface State {
+    activationDirection: string | undefined;
+    /**
+     * Whether the viewport is currently transitioning between contents.
+     */
+    transitioning: boolean;
+    /**
+     * Present if animations should be instant.
+     */
+    instant: 'dismiss' | 'click' | 'group' | 'trigger-change' | undefined;
+  }
+}

package/esm/menu/viewport/MenuViewport.js

@@ -0,0 +1,60 @@
+'use client';
+
+import * as React from 'react';
+import { useMenuRootContext } from "../root/MenuRootContext.js";
+import { useMenuPositionerContext } from "../positioner/MenuPositionerContext.js";
+import { useRenderElement } from "../../utils/useRenderElement.js";
+import { usePopupViewport } from "../../utils/usePopupViewport.js";
+import { MenuViewportCssVars } from "./MenuViewportCssVars.js";
+const stateAttributesMapping = {
+  activationDirection: value => value ? {
+    'data-activation-direction': value
+  } : null
+};
+
+/**
+ * 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.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
+ */
+export const MenuViewport = /*#__PURE__*/React.forwardRef(function MenuViewport(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    children,
+    ...elementProps
+  } = componentProps;
+  const {
+    store
+  } = useMenuRootContext();
+  const {
+    side
+  } = useMenuPositionerContext();
+  const instantType = store.useState('instantType');
+  const {
+    children: childrenToRender,
+    state: viewportState
+  } = usePopupViewport({
+    store,
+    side,
+    cssVars: MenuViewportCssVars,
+    children
+  });
+  const state = {
+    activationDirection: viewportState.activationDirection,
+    transitioning: viewportState.transitioning,
+    instant: instantType
+  };
+  return useRenderElement('div', componentProps, {
+    state,
+    ref: forwardedRef,
+    props: [elementProps, {
+      children: childrenToRender
+    }],
+    stateAttributesMapping
+  });
+});
+if (process.env.NODE_ENV !== "production") MenuViewport.displayName = "MenuViewport";

package/esm/menu/viewport/MenuViewportCssVars.d.ts

@@ -0,0 +1,14 @@
+export declare enum MenuViewportCssVars {
+  /**
+   * The width of the parent popup.
+   * This variable is placed on the 'previous' container and stores the width of the popup when the previous content was rendered.
+   * It can be used to freeze the dimensions of the popup when animating between different content.
+   */
+  popupWidth = "--popup-width",
+  /**
+   * The height of the parent popup.
+   * This variable is placed on the 'previous' container and stores the height of the popup when the previous content was rendered.
+   * It can be used to freeze the dimensions of the popup when animating between different content.
+   */
+  popupHeight = "--popup-height",
+}

package/esm/menu/viewport/MenuViewportCssVars.js

@@ -0,0 +1,15 @@
+export let MenuViewportCssVars = /*#__PURE__*/function (MenuViewportCssVars) {
+  /**
+   * The width of the parent popup.
+   * This variable is placed on the 'previous' container and stores the width of the popup when the previous content was rendered.
+   * It can be used to freeze the dimensions of the popup when animating between different content.
+   */
+  MenuViewportCssVars["popupWidth"] = "--popup-width";
+  /**
+   * The height of the parent popup.
+   * This variable is placed on the 'previous' container and stores the height of the popup when the previous content was rendered.
+   * It can be used to freeze the dimensions of the popup when animating between different content.
+   */
+  MenuViewportCssVars["popupHeight"] = "--popup-height";
+  return MenuViewportCssVars;
+}({});

package/esm/menu/viewport/MenuViewportDataAttributes.d.ts

@@ -0,0 +1,26 @@
+export declare enum MenuViewportDataAttributes {
+  /**
+   * Applied to the direct child of the viewport when no transitions are present or the new content when it's entering.
+   */
+  current = "data-current",
+  /**
+   * Applied to the direct child of the viewport that contains the exiting content when transitions are present.
+   */
+  previous = "data-previous",
+  /**
+   * Indicates the direction from which the popup was activated.
+   * This can be used to create directional animations based on how the popup was triggered.
+   * Contains space-separated values for both horizontal and vertical axes.
+   * @type {`${'left' | 'right'} {'down' | 'up'}`}
+   */
+  activationDirection = "data-activation-direction",
+  /**
+   * Indicates that the viewport is currently transitioning between old and new content.
+   */
+  transitioning = "data-transitioning",
+  /**
+   * Present if animations should be instant.
+   * @type {'click' | 'dismiss' | 'group' | 'trigger-change'}
+   */
+  instant = "data-instant",
+}

package/esm/menu/viewport/MenuViewportDataAttributes.js

@@ -0,0 +1,27 @@
+export let MenuViewportDataAttributes = /*#__PURE__*/function (MenuViewportDataAttributes) {
+  /**
+   * Applied to the direct child of the viewport when no transitions are present or the new content when it's entering.
+   */
+  MenuViewportDataAttributes["current"] = "data-current";
+  /**
+   * Applied to the direct child of the viewport that contains the exiting content when transitions are present.
+   */
+  MenuViewportDataAttributes["previous"] = "data-previous";
+  /**
+   * Indicates the direction from which the popup was activated.
+   * This can be used to create directional animations based on how the popup was triggered.
+   * Contains space-separated values for both horizontal and vertical axes.
+   * @type {`${'left' | 'right'} {'down' | 'up'}`}
+   */
+  MenuViewportDataAttributes["activationDirection"] = "data-activation-direction";
+  /**
+   * Indicates that the viewport is currently transitioning between old and new content.
+   */
+  MenuViewportDataAttributes["transitioning"] = "data-transitioning";
+  /**
+   * Present if animations should be instant.
+   * @type {'click' | 'dismiss' | 'group' | 'trigger-change'}
+   */
+  MenuViewportDataAttributes["instant"] = "data-instant";
+  return MenuViewportDataAttributes;
+}({});

package/esm/menubar/Menubar.d.ts

@@ -21,28 +21,28 @@ export interface MenubarState {
    */
   hasSubmenuOpen: boolean;
 }
-export interface MenubarProps extends BaseUIComponentProps<'div', Menubar.State> {
+export interface MenubarProps extends BaseUIComponentProps<'div', MenubarState> {
   /**
    * Whether the menubar is modal.
    * @default true
    */
-  modal?: boolean;
+  modal?: boolean | undefined;
   /**
    * Whether the whole menubar is disabled.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * The orientation of the menubar.
    * @default 'horizontal'
    */
-  orientation?: MenuRoot.Orientation;
+  orientation?: MenuRoot.Orientation | undefined;
   /**
    * Whether to loop keyboard focus back to the first item
    * when the end of the list is reached while using the arrow keys.
    * @default true
    */
-  loopFocus?: boolean;
+  loopFocus?: boolean | undefined;
 }
 export declare namespace Menubar {
   type State = MenubarState;

package/esm/menubar/Menubar.js

@@ -36,21 +36,15 @@ export const Menubar = /*#__PURE__*/React.forwardRef(function Menubar(props, for
   const [hasSubmenuOpen, setHasSubmenuOpen] = React.useState(false);
   const {
     openMethod,
-    triggerProps: interactionTypeProps,
-    reset: resetOpenInteractionType
+    triggerProps: interactionTypeProps
   } = useOpenInteractionType(hasSubmenuOpen);
-  React.useEffect(() => {
-    if (!hasSubmenuOpen) {
-      resetOpenInteractionType();
-    }
-  }, [hasSubmenuOpen, resetOpenInteractionType]);
   useScrollLock(modal && hasSubmenuOpen && openMethod !== 'touch', contentElement);
   const id = useBaseUiId(idProp);
-  const state = React.useMemo(() => ({
+  const state = {
     orientation,
     modal,
     hasSubmenuOpen
-  }), [orientation, modal, hasSubmenuOpen]);
+  };
   const contentRef = React.useRef(null);
   const allowMouseUpTriggerRef = React.useRef(false);
   const context = React.useMemo(() => ({

package/esm/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/esm/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/esm/meter/label/MeterLabel.js

@@ -1,10 +1,9 @@
 'use client';
 
 import * as React from 'react';
-import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
-import { useBaseUiId } from "../../utils/useBaseUiId.js";
 import { useMeterRootContext } from "../root/MeterRootContext.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRegisteredLabelId } from "../../utils/useRegisteredLabelId.js";
 
 /**
  * An accessible label for the meter.
@@ -19,18 +18,15 @@ export const MeterLabel = /*#__PURE__*/React.forwardRef(function MeterLabel(comp
     id: idProp,
     ...elementProps
   } = componentProps;
-  const id = useBaseUiId(idProp);
   const {
     setLabelId
   } = useMeterRootContext();
-  useIsoLayoutEffect(() => {
-    setLabelId(id);
-    return () => setLabelId(undefined);
-  }, [id, setLabelId]);
+  const id = useRegisteredLabelId(idProp, setLabelId);
   return useRenderElement('span', componentProps, {
     ref: forwardedRef,
     props: [{
-      id
+      id,
+      role: 'presentation'
     }, elementProps]
   });
 });

package/esm/meter/root/MeterRoot.d.ts

@@ -8,34 +8,34 @@ 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.
    */
-  'aria-valuetext'?: React.AriaAttributes['aria-valuetext'];
+  'aria-valuetext'?: React.AriaAttributes['aria-valuetext'] | undefined;
   /**
    * Options to format the value.
    */
-  format?: Intl.NumberFormatOptions;
+  format?: Intl.NumberFormatOptions | undefined;
   /**
    * A function that returns a string value that provides a human-readable text alternative for `aria-valuenow`, the current value of the meter.
    */
-  getAriaValueText?: (formattedValue: string, value: number) => string;
+  getAriaValueText?: ((formattedValue: string, value: number) => string) | undefined;
   /**
    * The locale used by `Intl.NumberFormat` when formatting the value.
    * Defaults to the user's runtime locale.
    */
-  locale?: Intl.LocalesArgument;
+  locale?: Intl.LocalesArgument | undefined;
   /**
    * The maximum value
    * @default 100
    */
-  max?: number;
+  max?: number | undefined;
   /**
    * The minimum value
    * @default 0
    */
-  min?: number;
+  min?: number | undefined;
   /**
    * The current value.
    */

package/esm/meter/root/MeterRoot.js

@@ -1,18 +1,10 @@
 'use client';
 
 import * as React from 'react';
+import { visuallyHidden } from '@base-ui/utils/visuallyHidden';
 import { MeterRootContext } from "./MeterRootContext.js";
-import { formatNumber } from "../../utils/formatNumber.js";
+import { formatNumberValue } from "../../utils/formatNumber.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-function formatValue(value, locale, format) {
-  if (!format) {
-    return formatNumber(value / 100, locale, {
-      style: 'percent'
-    });
-  }
-  return formatNumber(value, locale, format);
-}
 
 /**
  * Groups all parts of the meter and provides the value for screen readers.
@@ -20,6 +12,7 @@ function formatValue(value, locale, format) {
  *
  * Documentation: [Base UI Meter](https://base-ui.com/react/components/meter)
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const MeterRoot = /*#__PURE__*/React.forwardRef(function MeterRoot(componentProps, forwardedRef) {
   const {
     format,
@@ -30,10 +23,11 @@ export const MeterRoot = /*#__PURE__*/React.forwardRef(function MeterRoot(compon
     value: valueProp,
     render,
     className,
+    children,
     ...elementProps
   } = componentProps;
   const [labelId, setLabelId] = React.useState();
-  const formattedValue = formatValue(valueProp, locale, format);
+  const formattedValue = formatNumberValue(valueProp, locale, format);
   let ariaValuetext = `${valueProp}%`;
   if (getAriaValueText) {
     ariaValuetext = getAriaValueText(formattedValue, valueProp);
@@ -46,7 +40,14 @@ export const MeterRoot = /*#__PURE__*/React.forwardRef(function MeterRoot(compon
     'aria-valuemin': min,
     'aria-valuenow': valueProp,
     'aria-valuetext': ariaValuetext,
-    role: 'meter'
+    role: 'meter',
+    children: /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [children, /*#__PURE__*/_jsx("span", {
+        role: "presentation",
+        style: visuallyHidden,
+        children: "x"
+      })]
+    })
   };
   const contextValue = React.useMemo(() => ({
     formattedValue,

package/esm/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/esm/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);
+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/esm/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/esm/navigation-menu/arrow/NavigationMenuArrow.js

@@ -28,12 +28,12 @@ export const NavigationMenuArrow = /*#__PURE__*/React.forwardRef(function Naviga
     arrowUncentered,
     arrowStyles
   } = useNavigationMenuPositionerContext();
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     side,
     align,
     uncentered: arrowUncentered
-  }), [open, side, align, arrowUncentered]);
+  };
   const element = useRenderElement('div', componentProps, {
     state,
     ref: [forwardedRef, arrowRef],

package/esm/navigation-menu/arrow/NavigationMenuArrowDataAttributes.js

@@ -12,12 +12,12 @@ export let NavigationMenuArrowDataAttributes = function (NavigationMenuArrowData
    * Indicates which side the popup is positioned relative to the trigger.
    * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
-  NavigationMenuArrowDataAttributes["side"] = "data-side";
+  NavigationMenuArrowDataAttributes[NavigationMenuArrowDataAttributes["side"] = CommonPopupDataAttributes.side] = "side";
   /**
    * Indicates how the popup is aligned relative to specified side.
    * @type {'start' | 'center' | 'end'}
    */
-  NavigationMenuArrowDataAttributes["align"] = "data-align";
+  NavigationMenuArrowDataAttributes[NavigationMenuArrowDataAttributes["align"] = CommonPopupDataAttributes.align] = "align";
   /**
    * Present when the popup arrow is uncentered.
    */