@base-ui/react 1.1.0 → 1.3.0

package/esm/floating-ui-react/utils/tabbable.js

@@ -1,5 +1,6 @@
 import { tabbable } from 'tabbable';
-import { activeElement, contains, getDocument } from "./element.js";
+import { ownerDocument } from '@base-ui/utils/owner';
+import { activeElement, contains } from "./element.js";
 export const getTabbableOptions = () => ({
   getShadowRoot: true,
   displayCheck:
@@ -14,23 +15,23 @@ function getTabbableIn(container, dir) {
   if (len === 0) {
     return undefined;
   }
-  const active = activeElement(getDocument(container));
+  const active = activeElement(ownerDocument(container));
   const index = list.indexOf(active);
   // eslint-disable-next-line no-nested-ternary
   const nextIndex = index === -1 ? dir === 1 ? 0 : len - 1 : index + dir;
   return list[nextIndex];
 }
 export function getNextTabbable(referenceElement) {
-  return getTabbableIn(getDocument(referenceElement).body, 1) || referenceElement;
+  return getTabbableIn(ownerDocument(referenceElement).body, 1) || referenceElement;
 }
 export function getPreviousTabbable(referenceElement) {
-  return getTabbableIn(getDocument(referenceElement).body, -1) || referenceElement;
+  return getTabbableIn(ownerDocument(referenceElement).body, -1) || referenceElement;
 }
 function getTabbableNearElement(referenceElement, dir) {
   if (!referenceElement) {
     return null;
   }
-  const list = tabbable(getDocument(referenceElement).body, getTabbableOptions());
+  const list = tabbable(ownerDocument(referenceElement).body, getTabbableOptions());
   const elementCount = list.length;
   if (elementCount === 0) {
     return null;

package/esm/form/Form.d.ts

@@ -11,7 +11,7 @@ import { FormContext } from "./FormContext.js";
  */
 export declare const Form: {
   <FormValues extends Record<string, any> = Record<string, any>>(props: Form.Props<FormValues> & {
-    ref?: React.Ref<HTMLFormElement>;
+    ref?: React.Ref<HTMLFormElement> | undefined;
   }): React.JSX.Element;
 };
 export type FormSubmitEventReason = typeof REASONS.none;
@@ -21,7 +21,7 @@ export interface FormActions {
   validate: (fieldName?: string | undefined) => void;
 }
 export interface FormState {}
-export interface FormProps<FormValues extends Record<string, any> = Record<string, any>> extends BaseUIComponentProps<'form', Form.State> {
+export interface FormProps<FormValues extends Record<string, any> = Record<string, any>> extends BaseUIComponentProps<'form', FormState> {
   /**
    * Determines when the form should be validated.
    * The `validationMode` prop on `<Field.Root>` takes precedence over this.
@@ -32,18 +32,18 @@ export interface FormProps<FormValues extends Record<string, any> = Record<strin
    *
    * @default 'onSubmit'
    */
-  validationMode?: FormValidationMode;
+  validationMode?: FormValidationMode | undefined;
   /**
    * Validation errors returned externally, typically after submission by a server or a form action.
    * This should be an object where keys correspond to the `name` attribute on `<Field.Root>`,
    * and values correspond to error(s) related to that field.
    */
-  errors?: FormContext['errors'];
+  errors?: FormContext['errors'] | undefined;
   /**
    * Event handler called when the form is submitted.
    * `preventDefault()` is called on the native submit event when used.
    */
-  onFormSubmit?: (formValues: FormValues, eventDetails: Form.SubmitEventDetails) => void;
+  onFormSubmit?: ((formValues: FormValues, eventDetails: Form.SubmitEventDetails) => void) | undefined;
   /**
    * A ref to imperative actions.
    * - `validate`: Validates all fields when called. Optionally pass a field name to validate a single field.
@@ -56,7 +56,7 @@ export interface FormProps<FormValues extends Record<string, any> = Record<strin
    * actionsRef.current.validate('email');
    * ```
    */
-  actionsRef?: React.RefObject<Form.Actions | null>;
+  actionsRef?: React.RefObject<Form.Actions | null> | undefined;
 }
 export declare namespace Form {
   type Props<FormValues extends Record<string, any> = Record<string, any>> = FormProps<FormValues>;

package/esm/global.d.ts

@@ -1,6 +1,6 @@
 declare global {
   /**
-   * When `true`, disables animation-related code, even if supported by the runtime enviroment.
+   * When `true`, disables animation-related code, even if supported by the runtime environment.
    */
   // eslint-disable-next-line vars-on-top
   var BASE_UI_ANIMATIONS_DISABLED: boolean;

package/esm/index.d.ts

@@ -11,6 +11,7 @@ export * from "./context-menu/index.js";
 export * from "./csp-provider/index.js";
 export * from "./dialog/index.js";
 export * from "./direction-provider/index.js";
+export * from "./drawer/index.js";
 export * from "./field/index.js";
 export * from "./fieldset/index.js";
 export * from "./form/index.js";

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @base-ui/react v1.1.0
+ * @base-ui/react v1.3.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -18,6 +18,7 @@ export * from "./context-menu/index.js";
 export * from "./csp-provider/index.js";
 export * from "./dialog/index.js";
 export * from "./direction-provider/index.js";
+export * from "./drawer/index.js";
 export * from "./field/index.js";
 export * from "./fieldset/index.js";
 export * from "./form/index.js";

package/esm/input/Input.d.ts

@@ -1,21 +1,28 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../utils/types.js";
-import { Field } from "../field/index.js";
+import { Field, type FieldControlState } from "../field/index.js";
 /**
  * A native input element that automatically works with [Field](https://base-ui.com/react/components/field).
  * Renders an `<input>` element.
  *
  * Documentation: [Base UI Input](https://base-ui.com/react/components/input)
  */
-export declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
-export interface InputProps extends BaseUIComponentProps<'input', Input.State> {
+export declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export interface InputProps extends BaseUIComponentProps<'input', InputState> {
   /**
    * Callback fired when the `value` changes. Use when controlled.
    */
-  onValueChange?: Field.Control.Props['onValueChange'];
-  defaultValue?: Field.Control.Props['defaultValue'];
+  onValueChange?: Field.Control.Props['onValueChange'] | undefined;
+  /**
+   * The default value of the input. Use when uncontrolled.
+   */
+  defaultValue?: Field.Control.Props['defaultValue'] | undefined;
+  /**
+   * The value of the input. Use when controlled.
+   */
+  value?: React.ComponentProps<'input'>['value'] | undefined;
 }
-export interface InputState extends Field.Control.State {}
+export interface InputState extends FieldControlState {}
 export type InputChangeEventReason = Field.Control.ChangeEventReason;
 export type InputChangeEventDetails = Field.Control.ChangeEventDetails;
 export declare namespace Input {

package/esm/labelable-provider/LabelableContext.d.ts

@@ -6,7 +6,7 @@ export interface LabelableContext {
    * When `null` the association is implicit.
    */
   controlId: string | null | undefined;
-  setControlId: React.Dispatch<React.SetStateAction<string | null | undefined>>;
+  registerControlId: (source: symbol, id: string | null | undefined) => void;
   /**
    * The `id` of the label.
    */

package/esm/labelable-provider/LabelableContext.js

@@ -8,7 +8,7 @@ import { NOOP } from "../utils/noop.js";
  */
 export const LabelableContext = /*#__PURE__*/React.createContext({
   controlId: undefined,
-  setControlId: NOOP,
+  registerControlId: NOOP,
   labelId: undefined,
   setLabelId: NOOP,
   messageIds: [],

package/esm/labelable-provider/LabelableProvider.d.ts

@@ -3,10 +3,13 @@ import * as React from 'react';
  * @internal
  */
 export declare const LabelableProvider: React.FC<LabelableProvider.Props>;
+export interface LabelableProviderState {}
 export interface LabelableProviderProps {
-  initialControlId?: string | null | undefined;
+  controlId?: string | null | undefined;
+  labelId?: string | undefined;
   children?: React.ReactNode;
 }
 export declare namespace LabelableProvider {
+  type State = LabelableProviderState;
   type Props = LabelableProviderProps;
 }

package/esm/labelable-provider/LabelableProvider.js

@@ -1,6 +1,8 @@
 'use client';
 
 import * as React from 'react';
+import { useStableCallback } from '@base-ui/utils/useStableCallback';
+import { useRefWithInit } from '@base-ui/utils/useRefWithInit';
 import { mergeProps } from "../merge-props/index.js";
 import { useBaseUiId } from "../utils/useBaseUiId.js";
 import { LabelableContext, useLabelableContext } from "./LabelableContext.js";
@@ -11,12 +13,41 @@ import { LabelableContext, useLabelableContext } from "./LabelableContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const LabelableProvider = function LabelableProvider(props) {
   const defaultId = useBaseUiId();
-  const [controlId, setControlId] = React.useState(props.initialControlId === undefined ? defaultId : props.initialControlId);
-  const [labelId, setLabelId] = React.useState(undefined);
+  const initialControlId = props.controlId === undefined ? defaultId : props.controlId;
+  const [controlId, setControlIdState] = React.useState(initialControlId);
+  const [labelId, setLabelId] = React.useState(props.labelId);
   const [messageIds, setMessageIds] = React.useState([]);
+  const registrationsRef = useRefWithInit(() => new Map());
   const {
     messageIds: parentMessageIds
   } = useLabelableContext();
+  const registerControlId = useStableCallback((source, nextId) => {
+    const registrations = registrationsRef.current;
+    if (nextId === undefined) {
+      registrations.delete(source);
+      return;
+    }
+    registrations.set(source, nextId);
+
+    // Only flush when registering, not when unregistering.
+    // This prevents loops during rapid unmount/remount cycles (e.g. React Activity).
+    // The next registration will pick up the correct state.
+    setControlIdState(prev => {
+      if (registrations.size === 0) {
+        return undefined;
+      }
+      let nextControlId;
+      for (const id of registrations.values()) {
+        if (prev !== undefined && id === prev) {
+          return prev;
+        }
+        if (nextControlId === undefined) {
+          nextControlId = id;
+        }
+      }
+      return nextControlId;
+    });
+  });
   const getDescriptionProps = React.useCallback(externalProps => {
     return mergeProps({
       'aria-describedby': parentMessageIds.concat(messageIds).join(' ') || undefined
@@ -24,13 +55,13 @@ export const LabelableProvider = function LabelableProvider(props) {
   }, [parentMessageIds, messageIds]);
   const contextValue = React.useMemo(() => ({
     controlId,
-    setControlId,
+    registerControlId,
     labelId,
     setLabelId,
     messageIds,
     setMessageIds,
     getDescriptionProps
-  }), [controlId, setControlId, labelId, setLabelId, messageIds, setMessageIds, getDescriptionProps]);
+  }), [controlId, registerControlId, labelId, setLabelId, messageIds, setMessageIds, getDescriptionProps]);
   return /*#__PURE__*/_jsx(LabelableContext.Provider, {
     value: contextValue,
     children: props.children

package/esm/labelable-provider/useAriaLabelledBy.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+/**
+ * @internal
+ */
+export declare function useAriaLabelledBy(explicitAriaLabelledBy: string | undefined, labelId: string | undefined, labelSourceRef: React.RefObject<LabelSource | null>, enableFallback?: boolean, labelSourceId?: string): string | undefined;
+type LabelSource = HTMLElement & {
+  labels?: NodeListOf<HTMLLabelElement> | null | undefined;
+};
+export {};

package/esm/labelable-provider/useAriaLabelledBy.js

@@ -0,0 +1,56 @@
+'use client';
+
+import * as React from 'react';
+import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
+import { useBaseUiId } from "../utils/useBaseUiId.js";
+
+/**
+ * @internal
+ */
+export function useAriaLabelledBy(explicitAriaLabelledBy, labelId, labelSourceRef, enableFallback = true, labelSourceId) {
+  const [fallbackAriaLabelledBy, setFallbackAriaLabelledBy] = React.useState();
+  const generatedLabelId = useBaseUiId(labelSourceId ? `${labelSourceId}-label` : undefined);
+  const ariaLabelledBy = explicitAriaLabelledBy ?? labelId ?? fallbackAriaLabelledBy;
+
+  // Fallback for <span> controls labelled by wrapping/sibling native <label>.
+  // Run after every commit so DOM association changes (e.g. label mount/unmount)
+  // are reflected even when props/state deps are unchanged.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useIsoLayoutEffect(() => {
+    const nextAriaLabelledBy = explicitAriaLabelledBy || labelId || !enableFallback ? undefined : getAriaLabelledBy(labelSourceRef.current, generatedLabelId);
+    if (fallbackAriaLabelledBy !== nextAriaLabelledBy) {
+      setFallbackAriaLabelledBy(nextAriaLabelledBy);
+    }
+  });
+  return ariaLabelledBy;
+}
+function getAriaLabelledBy(labelSource, generatedLabelId) {
+  const label = findAssociatedLabel(labelSource);
+  if (!label) {
+    return undefined;
+  }
+  if (!label.id && generatedLabelId) {
+    label.id = generatedLabelId;
+  }
+  return label.id || undefined;
+}
+function findAssociatedLabel(labelSource) {
+  if (!labelSource) {
+    return undefined;
+  }
+
+  // Fast path before the expensive `.labels` read.
+  const parent = labelSource.parentElement;
+  if (parent && parent.tagName === 'LABEL') {
+    return parent;
+  }
+  const controlId = labelSource.id;
+  if (controlId) {
+    const nextSibling = labelSource.nextElementSibling;
+    if (nextSibling && nextSibling.htmlFor === controlId) {
+      return nextSibling;
+    }
+  }
+  const labels = labelSource.labels;
+  return labels && labels[0];
+}

package/esm/labelable-provider/useLabel.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+export declare function useLabel(params?: UseLabelParameters): UseLabelReturnValue;
+export interface UseLabelParameters {
+  id?: string | undefined;
+  /**
+   * Control id used when no labelable context control id exists.
+   */
+  fallbackControlId?: string | null | undefined;
+  /**
+   * Whether the rendered element is a native `<label>`.
+   * @default false
+   */
+  native?: boolean | undefined;
+  /**
+   * Additional callback to sync the current label id with local component state/store.
+   */
+  setLabelId?: ((nextLabelId: string | undefined) => void) | undefined;
+  /**
+   * Custom focus handler for non-native labels.
+   * If omitted, focus behavior targets the resolved control id.
+   */
+  focusControl?: ((event: React.MouseEvent, controlId: string | null | undefined) => void) | undefined;
+}
+export type UseLabelReturnValue = React.HTMLAttributes<any> & React.LabelHTMLAttributes<any>;
+export declare function focusElementWithVisible(element: HTMLElement): void;

package/esm/labelable-provider/useLabel.js

@@ -0,0 +1,74 @@
+'use client';
+
+import { isHTMLElement } from '@floating-ui/utils/dom';
+import { ownerDocument } from '@base-ui/utils/owner';
+import { useStableCallback } from '@base-ui/utils/useStableCallback';
+import { getTarget } from "../floating-ui-react/utils.js";
+import { useRegisteredLabelId } from "../utils/useRegisteredLabelId.js";
+import { useLabelableContext } from "./LabelableContext.js";
+export function useLabel(params = {}) {
+  const {
+    id: idProp,
+    fallbackControlId,
+    native = false,
+    setLabelId: setLabelIdProp,
+    focusControl: focusControlProp
+  } = params;
+  const {
+    controlId: contextControlId,
+    setLabelId: setContextLabelId
+  } = useLabelableContext();
+  const syncLabelId = useStableCallback(nextLabelId => {
+    setContextLabelId(nextLabelId);
+    setLabelIdProp?.(nextLabelId);
+  });
+  const id = useRegisteredLabelId(idProp, syncLabelId);
+  const resolvedControlId = contextControlId ?? fallbackControlId;
+  function focusControl(event) {
+    if (focusControlProp) {
+      focusControlProp(event, resolvedControlId);
+      return;
+    }
+    if (!resolvedControlId) {
+      return;
+    }
+    const controlElement = ownerDocument(event.currentTarget).getElementById(resolvedControlId);
+    if (isHTMLElement(controlElement)) {
+      focusElementWithVisible(controlElement);
+    }
+  }
+  function handleInteraction(event) {
+    const target = getTarget(event.nativeEvent);
+    if (target?.closest('button,input,select,textarea')) {
+      return;
+    }
+
+    // Prevent text selection when double clicking label.
+    if (!event.defaultPrevented && event.detail > 1) {
+      event.preventDefault();
+    }
+    if (native) {
+      return;
+    }
+    focusControl(event);
+  }
+  return native ? {
+    id,
+    htmlFor: resolvedControlId ?? undefined,
+    onMouseDown: handleInteraction
+  } : {
+    id,
+    onClick: handleInteraction,
+    onPointerDown(event) {
+      event.preventDefault();
+    }
+  };
+}
+export function focusElementWithVisible(element) {
+  element.focus({
+    // Available from Chrome 144+ (January 2026).
+    // Safari and Firefox already support it.
+    // @ts-expect-error not available in types yet
+    focusVisible: true
+  });
+}

package/esm/labelable-provider/useLabelableId.d.ts

@@ -1,18 +1,16 @@
-export declare function useLabelableId(params?: useLabelableId.Parameters): string | undefined;
+import * as React from 'react';
+export declare function useLabelableId(params?: UseLabelableIdParameters): string | undefined;
 export interface UseLabelableIdParameters {
   id?: string | undefined;
   /**
    * Whether implicit labelling is supported.
    * @default false
    */
-  implicit?: boolean;
+  implicit?: boolean | undefined;
   /**
    * A ref to an element that can be implicitly labelled.
    */
-  controlRef?: React.RefObject<HTMLElement | null>;
+  controlRef?: React.RefObject<HTMLElement | null> | undefined;
 }
 export type UseLabelableIdReturnValue = string;
-export declare namespace useLabelableId {
-  type Parameters = UseLabelableIdParameters;
-  type ReturnValue = UseLabelableIdReturnValue;
-}
+export interface UseLabelableIdState {}

package/esm/labelable-provider/useLabelableId.js

@@ -1,6 +1,9 @@
 'use client';
 
+import * as React from 'react';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
+import { useStableCallback } from '@base-ui/utils/useStableCallback';
+import { useRefWithInit } from '@base-ui/utils/useRefWithInit';
 import { isElement } from '@floating-ui/utils/dom';
 import { NOOP } from "../utils/noop.js";
 import { useBaseUiId } from "../utils/useBaseUiId.js";
@@ -13,28 +16,51 @@ export function useLabelableId(params = {}) {
   } = params;
   const {
     controlId,
-    setControlId
+    registerControlId
   } = useLabelableContext();
   const defaultId = useBaseUiId(id);
+  const controlIdForEffect = implicit ? controlId : undefined;
+  const controlSourceRef = useRefWithInit(() => Symbol('labelable-control'));
+  const hasRegisteredRef = React.useRef(false);
+  const hadExplicitIdRef = React.useRef(id != null);
+  const unregisterControlId = useStableCallback(() => {
+    if (!hasRegisteredRef.current || registerControlId === NOOP) {
+      return;
+    }
+    hasRegisteredRef.current = false;
+    registerControlId(controlSourceRef.current, undefined);
+  });
   useIsoLayoutEffect(() => {
-    if (!implicit && !id || setControlId === NOOP) {
+    if (registerControlId === NOOP) {
       return undefined;
     }
+    let nextId;
     if (implicit) {
       const elem = controlRef?.current;
       if (isElement(elem) && elem.closest('label') != null) {
-        setControlId(id ?? null);
+        nextId = id ?? null;
       } else {
-        setControlId(controlId ?? defaultId);
+        nextId = controlIdForEffect ?? defaultId;
       }
-    } else if (id) {
-      setControlId(id);
+    } else if (id != null) {
+      hadExplicitIdRef.current = true;
+      nextId = id;
+    } else if (hadExplicitIdRef.current) {
+      nextId = defaultId;
+    } else {
+      unregisterControlId();
+      return undefined;
     }
-    return () => {
-      if (id) {
-        setControlId(undefined);
-      }
-    };
-  }, [id, controlRef, controlId, setControlId, implicit, defaultId]);
+    if (nextId === undefined) {
+      unregisterControlId();
+      return undefined;
+    }
+    hasRegisteredRef.current = true;
+    registerControlId(controlSourceRef.current, nextId);
+    return undefined;
+  }, [id, controlRef, controlIdForEffect, registerControlId, implicit, defaultId, controlSourceRef, unregisterControlId]);
+  React.useEffect(() => {
+    return unregisterControlId;
+  }, [unregisterControlId]);
   return controlId ?? defaultId;
 }

package/esm/menu/arrow/MenuArrow.d.ts

@@ -13,11 +13,20 @@ export interface MenuArrowState {
    * Whether the menu 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 MenuArrowProps extends BaseUIComponentProps<'div', MenuArrow.State> {}
+export interface MenuArrowProps extends BaseUIComponentProps<'div', MenuArrowState> {}
 export declare namespace MenuArrow {
   type State = MenuArrowState;
   type Props = MenuArrowProps;

package/esm/menu/arrow/MenuArrow.js

@@ -29,12 +29,12 @@ export const MenuArrow = /*#__PURE__*/React.forwardRef(function MenuArrow(compon
     arrowStyles
   } = useMenuPositionerContext();
   const open = store.useState('open');
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     side,
     align,
     uncentered: arrowUncentered
-  }), [open, side, align, arrowUncentered]);
+  };
   return useRenderElement('div', componentProps, {
     ref: [arrowRef, forwardedRef],
     stateAttributesMapping: popupStateMapping,

package/esm/menu/arrow/MenuArrowDataAttributes.js

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

package/esm/menu/backdrop/MenuBackdrop.d.ts

@@ -13,9 +13,12 @@ export interface MenuBackdropState {
    * Whether the menu is currently open.
    */
   open: boolean;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
-export interface MenuBackdropProps extends BaseUIComponentProps<'div', MenuBackdrop.State> {}
+export interface MenuBackdropProps extends BaseUIComponentProps<'div', MenuBackdropState> {}
 export declare namespace MenuBackdrop {
   type State = MenuBackdropState;
   type Props = MenuBackdropProps;

package/esm/menu/backdrop/MenuBackdrop.js

@@ -32,10 +32,10 @@ export const MenuBackdrop = /*#__PURE__*/React.forwardRef(function MenuBackdrop(
   const transitionStatus = store.useState('transitionStatus');
   const lastOpenChangeReason = store.useState('lastOpenChangeReason');
   const contextMenuContext = useContextMenuRootContext();
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     transitionStatus
-  }), [open, transitionStatus]);
+  };
   return useRenderElement('div', componentProps, {
     ref: contextMenuContext?.backdropRef ? [forwardedRef, contextMenuContext.backdropRef] : forwardedRef,
     state,