@base-ui/react 1.0.0 → 1.2.0

package/esm/combobox/trigger/ComboboxTrigger.js

@@ -7,22 +7,18 @@ import { useTimeout } from '@base-ui/utils/useTimeout';
 import { ownerDocument } from '@base-ui/utils/owner';
 import { useRenderElement } from "../../utils/useRenderElement.js";
 import { useButton } from "../../use-button/index.js";
-import { useComboboxFloatingContext, useComboboxInputValueContext, useComboboxRootContext } from "../root/ComboboxRootContext.js";
+import { useComboboxFloatingContext, useComboboxDerivedItemsContext, useComboboxInputValueContext, useComboboxRootContext } from "../root/ComboboxRootContext.js";
+import { triggerStateAttributesMapping } from "../utils/stateAttributesMapping.js";
 import { selectors } from "../store.js";
 import { useFieldRootContext } from "../../field/root/FieldRootContext.js";
 import { useLabelableContext } from "../../labelable-provider/LabelableContext.js";
-import { pressableTriggerOpenStateMapping } from "../../utils/popupStateMapping.js";
 import { stopEvent, contains, getTarget } from "../../floating-ui-react/utils.js";
 import { getPseudoElementBounds } from "../../utils/getPseudoElementBounds.js";
 import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
 import { REASONS } from "../../utils/reasons.js";
-import { fieldValidityMapping } from "../../field/utils/constants.js";
 import { useClick, useTypeahead } from "../../floating-ui-react/index.js";
+import { useLabelableId } from "../../labelable-provider/useLabelableId.js";
 const BOUNDARY_OFFSET = 2;
-const stateAttributesMapping = {
-  ...pressableTriggerOpenStateMapping,
-  ...fieldValidityMapping
-};
 
 /**
  * A button that opens the popup.
@@ -34,6 +30,7 @@ export const ComboboxTrigger = /*#__PURE__*/React.forwardRef(function ComboboxTr
     className,
     nativeButton = true,
     disabled: disabledProp = false,
+    id: idProp,
     ...elementProps
   } = componentProps;
   const {
@@ -48,26 +45,41 @@ export const ComboboxTrigger = /*#__PURE__*/React.forwardRef(function ComboboxTr
     labelId
   } = useLabelableContext();
   const store = useComboboxRootContext();
+  const {
+    filteredItems
+  } = useComboboxDerivedItemsContext();
   const selectionMode = useStore(store, selectors.selectionMode);
   const comboboxDisabled = useStore(store, selectors.disabled);
   const readOnly = useStore(store, selectors.readOnly);
+  const required = useStore(store, selectors.required);
+  const mounted = useStore(store, selectors.mounted);
+  const popupSideValue = useStore(store, selectors.popupSide);
+  const positionerElement = useStore(store, selectors.positionerElement);
   const listElement = useStore(store, selectors.listElement);
   const triggerProps = useStore(store, selectors.triggerProps);
   const triggerElement = useStore(store, selectors.triggerElement);
   const inputInsidePopup = useStore(store, selectors.inputInsidePopup);
+  const rootId = useStore(store, selectors.id);
   const open = useStore(store, selectors.open);
   const selectedValue = useStore(store, selectors.selectedValue);
   const activeIndex = useStore(store, selectors.activeIndex);
   const selectedIndex = useStore(store, selectors.selectedIndex);
+  const hasSelectedValue = useStore(store, selectors.hasSelectedValue);
   const floatingRootContext = useComboboxFloatingContext();
   const inputValue = useComboboxInputValueContext();
   const focusTimeout = useTimeout();
   const disabled = fieldDisabled || comboboxDisabled || disabledProp;
+  const listEmpty = filteredItems.length === 0;
+  const popupSide = mounted && positionerElement ? popupSideValue : null;
+  useLabelableId({
+    id: inputInsidePopup ? idProp : undefined
+  });
+  const id = inputInsidePopup ? idProp ?? rootId : idProp;
   const currentPointerTypeRef = React.useRef('');
   function trackPointerType(event) {
     currentPointerTypeRef.current = event.pointerType;
   }
-  const domReference = floatingRootContext.select('domReferenceElement');
+  const domReference = floatingRootContext.useState('domReferenceElement');
 
   // Update the floating root context to use the trigger element when it differs from the current reference.
   // This ensures useClick and useTypeahead attach handlers to the correct element.
@@ -106,11 +118,14 @@ export const ComboboxTrigger = /*#__PURE__*/React.forwardRef(function ComboboxTr
     native: nativeButton,
     disabled
   });
-  const state = React.useMemo(() => ({
+  const state = {
     ...fieldState,
     open,
-    disabled
-  }), [fieldState, open, disabled]);
+    disabled,
+    popupSide,
+    listEmpty,
+    placeholder: !hasSelectedValue
+  };
   const setTriggerElement = useStableCallback(element => {
     store.set('triggerElement', element);
   });
@@ -118,13 +133,13 @@ export const ComboboxTrigger = /*#__PURE__*/React.forwardRef(function ComboboxTr
     ref: [forwardedRef, buttonRef, setTriggerElement],
     state,
     props: [triggerProps, triggerClickProps, triggerTypeaheadProps, {
+      id,
       tabIndex: inputInsidePopup ? 0 : -1,
-      disabled,
       role: inputInsidePopup ? 'combobox' : undefined,
       'aria-expanded': open ? 'true' : 'false',
       'aria-haspopup': inputInsidePopup ? 'dialog' : 'listbox',
       'aria-controls': open ? listElement?.id : undefined,
-      'aria-readonly': readOnly || undefined,
+      'aria-required': inputInsidePopup ? required || undefined : undefined,
       'aria-labelledby': labelId,
       onPointerDown: trackPointerType,
       onPointerEnter: trackPointerType,
@@ -135,7 +150,11 @@ export const ComboboxTrigger = /*#__PURE__*/React.forwardRef(function ComboboxTr
         }
         focusTimeout.start(0, store.state.forceMount);
       },
-      onBlur() {
+      onBlur(event) {
+        // If focus is moving into the popup, don't count it as a blur.
+        if (contains(positionerElement, event.relatedTarget)) {
+          return;
+        }
         setTouched(true);
         setFocused(false);
         if (validationMode === 'onBlur') {
@@ -198,7 +217,7 @@ export const ComboboxTrigger = /*#__PURE__*/React.forwardRef(function ComboboxTr
         }
       }
     }, validation ? validation.getValidationProps(elementProps) : elementProps, getButtonProps],
-    stateAttributesMapping
+    stateAttributesMapping: triggerStateAttributesMapping
   });
   return element;
 });

package/esm/combobox/trigger/ComboboxTriggerDataAttributes.d.ts

@@ -15,6 +15,11 @@ export declare enum ComboboxTriggerDataAttributes {
    * Present when the component is readonly.
    */
   readonly = "data-readonly",
+  /**
+   * Indicates which side the corresponding popup is positioned relative to its anchor.
+   * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start' | null}
+   */
+  popupSide = "data-popup-side",
   /**
    * Present when the component is required.
    */
@@ -43,4 +48,12 @@ export declare enum ComboboxTriggerDataAttributes {
    * Present when the trigger is focused (when wrapped in Field.Root).
    */
   focused = "data-focused",
+  /**
+   * Present when the corresponding items list is empty.
+   */
+  listEmpty = "data-list-empty",
+  /**
+   * Present when the combobox doesn't have a value.
+   */
+  placeholder = "data-placeholder",
 }

package/esm/combobox/trigger/ComboboxTriggerDataAttributes.js

@@ -16,6 +16,11 @@ export let ComboboxTriggerDataAttributes = function (ComboboxTriggerDataAttribut
    * Present when the component is readonly.
    */
   ComboboxTriggerDataAttributes["readonly"] = "data-readonly";
+  /**
+   * Indicates which side the corresponding popup is positioned relative to its anchor.
+   * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start' | null}
+   */
+  ComboboxTriggerDataAttributes["popupSide"] = "data-popup-side";
   /**
    * Present when the component is required.
    */
@@ -44,5 +49,13 @@ export let ComboboxTriggerDataAttributes = function (ComboboxTriggerDataAttribut
    * Present when the trigger is focused (when wrapped in Field.Root).
    */
   ComboboxTriggerDataAttributes["focused"] = "data-focused";
+  /**
+   * Present when the corresponding items list is empty.
+   */
+  ComboboxTriggerDataAttributes["listEmpty"] = "data-list-empty";
+  /**
+   * Present when the combobox doesn't have a value.
+   */
+  ComboboxTriggerDataAttributes["placeholder"] = "data-placeholder";
   return ComboboxTriggerDataAttributes;
 }({});

package/esm/combobox/utils/stateAttributesMapping.d.ts

@@ -0,0 +1,14 @@
+import type { Side } from "../../utils/useAnchorPositioning.js";
+export declare const triggerStateAttributesMapping: {
+  popupSide: (side: Side | null) => {
+    'data-popup-side': Side;
+  } | null;
+  listEmpty: (empty: boolean) => {
+    'data-list-empty': string;
+  } | null;
+  valid(value: boolean | null): Record<string, string> | null;
+  open(value: boolean): {
+    "data-popup-open": string;
+    "data-pressed": string;
+  } | null;
+};

package/esm/combobox/utils/stateAttributesMapping.js

@@ -0,0 +1,12 @@
+import { pressableTriggerOpenStateMapping } from "../../utils/popupStateMapping.js";
+import { fieldValidityMapping } from "../../field/utils/constants.js";
+export const triggerStateAttributesMapping = {
+  ...pressableTriggerOpenStateMapping,
+  ...fieldValidityMapping,
+  popupSide: side => side ? {
+    'data-popup-side': side
+  } : null,
+  listEmpty: empty => empty ? {
+    'data-list-empty': ''
+  } : null
+};

package/esm/combobox/value/ComboboxValue.d.ts

@@ -9,6 +9,11 @@ export declare function ComboboxValue(props: ComboboxValue.Props): React.ReactEl
 export interface ComboboxValueState {}
 export interface ComboboxValueProps {
   children?: React.ReactNode | ((selectedValue: any) => React.ReactNode);
+  /**
+   * The placeholder value to display when no value is selected.
+   * This is overridden by `children` if specified, or by a null item's label in `items`.
+   */
+  placeholder?: React.ReactNode;
 }
 export declare namespace ComboboxValue {
   type State = ComboboxValueState;

package/esm/combobox/value/ComboboxValue.js

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { useStore } from '@base-ui/utils/store';
 import { useComboboxRootContext } from "../root/ComboboxRootContext.js";
-import { resolveSelectedLabel } from "../../utils/resolveValueLabel.js";
+import { resolveMultipleLabels, resolveSelectedLabel } from "../../utils/resolveValueLabel.js";
 import { selectors } from "../store.js";
 
 /**
@@ -15,21 +15,30 @@ import { selectors } from "../store.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function ComboboxValue(props) {
   const {
-    children: childrenProp
+    children: childrenProp,
+    placeholder
   } = props;
   const store = useComboboxRootContext();
   const itemToStringLabel = useStore(store, selectors.itemToStringLabel);
   const selectedValue = useStore(store, selectors.selectedValue);
   const items = useStore(store, selectors.items);
-  let returnValue = null;
+  const multiple = useStore(store, selectors.selectionMode) === 'multiple';
+  const hasSelectedValue = useStore(store, selectors.hasSelectedValue);
+  const shouldCheckNullItemLabel = !hasSelectedValue && placeholder != null && childrenProp == null;
+  const hasNullLabel = useStore(store, selectors.hasNullItemLabel, shouldCheckNullItemLabel);
+  let children = null;
   if (typeof childrenProp === 'function') {
-    returnValue = childrenProp(selectedValue);
+    children = childrenProp(selectedValue);
   } else if (childrenProp != null) {
-    returnValue = childrenProp;
+    children = childrenProp;
+  } else if (!hasSelectedValue && placeholder != null && !hasNullLabel) {
+    children = placeholder;
+  } else if (multiple && Array.isArray(selectedValue)) {
+    children = resolveMultipleLabels(selectedValue, items, itemToStringLabel);
   } else {
-    returnValue = resolveSelectedLabel(selectedValue, items, itemToStringLabel);
+    children = resolveSelectedLabel(selectedValue, items, itemToStringLabel);
   }
   return /*#__PURE__*/_jsx(React.Fragment, {
-    children: returnValue
+    children: children
   });
 }

package/esm/composite/item/CompositeItem.d.ts

@@ -7,12 +7,12 @@ import { StateAttributesMapping } from "../../utils/getStateAttributesProps.js";
 export declare function CompositeItem<Metadata, State extends Record<string, any>>(componentProps: CompositeItem.Props<Metadata, State>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 export interface CompositeItemProps<Metadata, State extends Record<string, any>> extends Pick<BaseUIComponentProps<any, State>, 'render' | 'className'> {
   children?: React.ReactNode;
-  metadata?: Metadata;
-  refs?: React.Ref<HTMLElement | null>[];
-  props?: Array<Record<string, any> | (() => Record<string, any>)>;
-  state?: State;
-  stateAttributesMapping?: StateAttributesMapping<State>;
-  tag?: keyof React.JSX.IntrinsicElements;
+  metadata?: Metadata | undefined;
+  refs?: React.Ref<HTMLElement | null>[] | undefined;
+  props?: Array<Record<string, any> | (() => Record<string, any>)> | undefined;
+  state?: State | undefined;
+  stateAttributesMapping?: StateAttributesMapping<State> | undefined;
+  tag?: keyof React.JSX.IntrinsicElements | undefined;
 }
 export declare namespace CompositeItem {
   type Props<Metadata, State extends Record<string, any>> = CompositeItemProps<Metadata, State>;

package/esm/composite/list/CompositeList.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 export type CompositeMetadata<CustomMetadata> = {
-  index?: number | null;
+  index?: (number | null) | undefined;
 } & CustomMetadata;
 /**
  * Provides context for a list of items in a composite component.
@@ -18,8 +18,8 @@ export interface CompositeListProps<Metadata> {
    * A ref to the list of element labels, ordered by their index.
    * `useTypeahead`'s `listRef` prop.
    */
-  labelsRef?: React.RefObject<Array<string | null>>;
-  onMapChange?: (newMap: Map<Element, CompositeMetadata<Metadata> | null>) => void;
+  labelsRef?: React.RefObject<Array<string | null>> | undefined;
+  onMapChange?: ((newMap: Map<Element, CompositeMetadata<Metadata> | null>) => void) | undefined;
 }
 export declare namespace CompositeList {
   type Props<Metadata> = CompositeListProps<Metadata>;

package/esm/composite/list/CompositeListContext.d.ts

@@ -4,7 +4,7 @@ export interface CompositeListContextValue<Metadata> {
   unregister: (node: Element) => void;
   subscribeMapChange: (fn: (map: Map<Element, Metadata | null>) => void) => () => void;
   elementsRef: React.RefObject<Array<HTMLElement | null>>;
-  labelsRef?: React.RefObject<Array<string | null>>;
+  labelsRef?: React.RefObject<Array<string | null>> | undefined;
   nextIndexRef: React.RefObject<number>;
 }
 export declare const CompositeListContext: React.Context<CompositeListContextValue<any>>;

package/esm/composite/list/useCompositeListItem.d.ts

@@ -1,13 +1,13 @@
 import * as React from 'react';
 export interface UseCompositeListItemParameters<Metadata> {
-  index?: number;
-  label?: string | null;
-  metadata?: Metadata;
-  textRef?: React.RefObject<HTMLElement | null>;
+  index?: number | undefined;
+  label?: (string | null) | undefined;
+  metadata?: Metadata | undefined;
+  textRef?: React.RefObject<HTMLElement | null> | undefined;
   /** Enables guessing the indexes. This avoids a re-render after mount, which is useful for
    * large lists. This should be used for lists that are likely flat and vertical, other cases
    * might trigger a re-render anyway. */
-  indexGuessBehavior?: IndexGuessBehavior;
+  indexGuessBehavior?: IndexGuessBehavior | undefined;
 }
 interface UseCompositeListItemReturnValue {
   ref: (node: HTMLElement | null) => void;

package/esm/composite/root/CompositeRoot.d.ts

@@ -8,25 +8,25 @@ import { StateAttributesMapping } from "../../utils/getStateAttributesProps.js";
  */
 export declare function CompositeRoot<Metadata extends {}, State extends Record<string, any>>(componentProps: CompositeRoot.Props<Metadata, State>): import("react/jsx-runtime").JSX.Element;
 export interface CompositeRootProps<Metadata, State extends Record<string, any>> extends Pick<BaseUIComponentProps<'div', State>, 'render' | 'className' | 'children'> {
-  props?: Array<Record<string, any> | (() => Record<string, any>)>;
-  state?: State;
-  stateAttributesMapping?: StateAttributesMapping<State>;
-  refs?: React.Ref<HTMLElement | null>[];
-  tag?: keyof React.JSX.IntrinsicElements;
-  orientation?: 'horizontal' | 'vertical' | 'both';
-  cols?: number;
-  loopFocus?: boolean;
-  highlightedIndex?: number;
-  onHighlightedIndexChange?: (index: number) => void;
-  itemSizes?: Dimensions[];
-  dense?: boolean;
-  enableHomeAndEndKeys?: boolean;
-  onMapChange?: (newMap: Map<Node, CompositeMetadata<Metadata> | null>) => void;
-  stopEventPropagation?: boolean;
-  rootRef?: React.RefObject<HTMLElement | null>;
-  disabledIndices?: number[];
-  modifierKeys?: ModifierKey[];
-  highlightItemOnHover?: boolean;
+  props?: Array<Record<string, any> | (() => Record<string, any>)> | undefined;
+  state?: State | undefined;
+  stateAttributesMapping?: StateAttributesMapping<State> | undefined;
+  refs?: React.Ref<HTMLElement | null>[] | undefined;
+  tag?: keyof React.JSX.IntrinsicElements | undefined;
+  orientation?: ('horizontal' | 'vertical' | 'both') | undefined;
+  cols?: number | undefined;
+  loopFocus?: boolean | undefined;
+  highlightedIndex?: number | undefined;
+  onHighlightedIndexChange?: ((index: number) => void) | undefined;
+  itemSizes?: Dimensions[] | undefined;
+  dense?: boolean | undefined;
+  enableHomeAndEndKeys?: boolean | undefined;
+  onMapChange?: ((newMap: Map<Node, CompositeMetadata<Metadata> | null>) => void) | undefined;
+  stopEventPropagation?: boolean | undefined;
+  rootRef?: React.RefObject<HTMLElement | null> | undefined;
+  disabledIndices?: number[] | undefined;
+  modifierKeys?: ModifierKey[] | undefined;
+  highlightItemOnHover?: boolean | undefined;
 }
 export declare namespace CompositeRoot {
   type Props<Metadata, State extends Record<string, any>> = CompositeRootProps<Metadata, State>;

package/esm/composite/root/useCompositeRoot.d.ts

@@ -4,38 +4,38 @@ import { type Dimensions, type ModifierKey } from "../composite.js";
 import { CompositeMetadata } from "../list/CompositeList.js";
 import { HTMLProps } from "../../utils/types.js";
 export interface UseCompositeRootParameters {
-  orientation?: 'horizontal' | 'vertical' | 'both';
-  cols?: number;
-  loopFocus?: boolean;
-  highlightedIndex?: number;
-  onHighlightedIndexChange?: (index: number) => void;
-  dense?: boolean;
+  orientation?: ('horizontal' | 'vertical' | 'both') | undefined;
+  cols?: number | undefined;
+  loopFocus?: boolean | undefined;
+  highlightedIndex?: number | undefined;
+  onHighlightedIndexChange?: ((index: number) => void) | undefined;
+  dense?: boolean | undefined;
   direction: TextDirection;
-  itemSizes?: Array<Dimensions>;
-  rootRef?: React.Ref<Element>;
+  itemSizes?: Array<Dimensions> | undefined;
+  rootRef?: React.Ref<Element> | undefined;
   /**
    * When `true`, pressing the Home key moves focus to the first item,
    * and pressing the End key moves focus to the last item.
    * @default false
    */
-  enableHomeAndEndKeys?: boolean;
+  enableHomeAndEndKeys?: boolean | undefined;
   /**
    * When `true`, keypress events on Composite's navigation keys
-   * be stopped with event.stopPropagation()
+   * be stopped with event.stopPropagation().
    * @default false
    */
-  stopEventPropagation?: boolean;
+  stopEventPropagation?: boolean | undefined;
   /**
    * Array of item indices to be considered disabled.
    * Used for composite items that are focusable when disabled.
    */
-  disabledIndices?: number[];
+  disabledIndices?: number[] | undefined;
   /**
    * Array of [modifier key values](https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values#modifier_keys) that should allow normal keyboard actions
    * when pressed. By default, all modifier keys prevent normal actions.
    * @default []
    */
-  modifierKeys?: ModifierKey[];
+  modifierKeys?: ModifierKey[] | undefined;
 }
 export declare function useCompositeRoot(params: UseCompositeRootParameters): {
   props: HTMLProps;

package/esm/context-menu/index.d.ts

@@ -9,6 +9,7 @@ export type { MenuArrowProps as ContextMenuArrowProps, MenuArrowState as Context
 export type { MenuGroupProps as ContextMenuGroupProps, MenuGroupState as ContextMenuGroupState } from "../menu/group/MenuGroup.js";
 export type { MenuGroupLabelProps as ContextMenuGroupLabelProps, MenuGroupLabelState as ContextMenuGroupLabelState } from "../menu/group-label/MenuGroupLabel.js";
 export type { MenuItemProps as ContextMenuItemProps, MenuItemState as ContextMenuItemState } from "../menu/item/MenuItem.js";
+export type { MenuLinkItemProps as ContextMenuLinkItemProps, MenuLinkItemState as ContextMenuLinkItemState } from "../menu/link-item/MenuLinkItem.js";
 export type { MenuCheckboxItemProps as ContextMenuCheckboxItemProps, MenuCheckboxItemState as ContextMenuCheckboxItemState } from "../menu/checkbox-item/MenuCheckboxItem.js";
 export type { MenuCheckboxItemIndicatorProps as ContextMenuCheckboxItemIndicatorProps, MenuCheckboxItemIndicatorState as ContextMenuCheckboxItemIndicatorState } from "../menu/checkbox-item-indicator/MenuCheckboxItemIndicator.js";
 export type { MenuRadioGroupProps as ContextMenuRadioGroupProps, MenuRadioGroupState as ContextMenuRadioGroupState } from "../menu/radio-group/MenuRadioGroup.js";

package/esm/context-menu/index.parts.d.ts

@@ -10,6 +10,7 @@ export { MenuGroupLabel as GroupLabel } from "../menu/group-label/MenuGroupLabel
 export { MenuItem as Item } from "../menu/item/MenuItem.js";
 export { MenuCheckboxItem as CheckboxItem } from "../menu/checkbox-item/MenuCheckboxItem.js";
 export { MenuCheckboxItemIndicator as CheckboxItemIndicator } from "../menu/checkbox-item-indicator/MenuCheckboxItemIndicator.js";
+export { MenuLinkItem as LinkItem } from "../menu/link-item/MenuLinkItem.js";
 export { MenuRadioGroup as RadioGroup } from "../menu/radio-group/MenuRadioGroup.js";
 export { MenuRadioItem as RadioItem } from "../menu/radio-item/MenuRadioItem.js";
 export { MenuRadioItemIndicator as RadioItemIndicator } from "../menu/radio-item-indicator/MenuRadioItemIndicator.js";

package/esm/context-menu/index.parts.js

@@ -10,6 +10,7 @@ export { MenuGroupLabel as GroupLabel } from "../menu/group-label/MenuGroupLabel
 export { MenuItem as Item } from "../menu/item/MenuItem.js";
 export { MenuCheckboxItem as CheckboxItem } from "../menu/checkbox-item/MenuCheckboxItem.js";
 export { MenuCheckboxItemIndicator as CheckboxItemIndicator } from "../menu/checkbox-item-indicator/MenuCheckboxItemIndicator.js";
+export { MenuLinkItem as LinkItem } from "../menu/link-item/MenuLinkItem.js";
 export { MenuRadioGroup as RadioGroup } from "../menu/radio-group/MenuRadioGroup.js";
 export { MenuRadioItem as RadioItem } from "../menu/radio-item/MenuRadioItem.js";
 export { MenuRadioItemIndicator as RadioItemIndicator } from "../menu/radio-item-indicator/MenuRadioItemIndicator.js";

package/esm/context-menu/root/ContextMenuRoot.d.ts

@@ -13,7 +13,7 @@ export interface ContextMenuRootProps extends Omit<Menu.Root.Props, 'modal' | 'o
   /**
    * Event handler called when the menu is opened or closed.
    */
-  onOpenChange?: (open: boolean, eventDetails: ContextMenuRoot.ChangeEventDetails) => void;
+  onOpenChange?: ((open: boolean, eventDetails: ContextMenuRoot.ChangeEventDetails) => void) | undefined;
 }
 export type ContextMenuRootChangeEventReason = MenuRoot.ChangeEventReason;
 export type ContextMenuRootChangeEventDetails = BaseUIChangeEventDetails<ContextMenuRoot.ChangeEventReason>;

package/esm/context-menu/root/ContextMenuRootContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 import * as React from 'react';
 export const ContextMenuRootContext = /*#__PURE__*/React.createContext(undefined);

package/esm/context-menu/trigger/ContextMenuTrigger.d.ts

@@ -6,7 +6,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Context Menu](https://base-ui.com/react/components/context-menu)
  */
-export declare const ContextMenuTrigger: React.ForwardRefExoticComponent<ContextMenuTriggerProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuTrigger: React.ForwardRefExoticComponent<Omit<ContextMenuTriggerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export type ContextMenuTriggerState = {
   /**
    * Whether the context menu is currently open.

package/esm/context-menu/trigger/ContextMenuTrigger.js

@@ -39,6 +39,7 @@ export const ContextMenuTrigger = /*#__PURE__*/React.forwardRef(function Context
     store
   } = useMenuRootContext(false);
   const open = store.useState('open');
+  const disabled = store.useState('disabled');
   const triggerRef = React.useRef(null);
   const touchPositionRef = React.useRef(null);
   const longPressTimeout = useTimeout();
@@ -67,6 +68,9 @@ export const ContextMenuTrigger = /*#__PURE__*/React.forwardRef(function Context
     });
   }
   function handleContextMenu(event) {
+    if (disabled) {
+      return;
+    }
     allowMouseUpTriggerRef.current = true;
     stopEvent(event);
     handleLongPress(event.clientX, event.clientY, event.nativeEvent);
@@ -91,6 +95,9 @@ export const ContextMenuTrigger = /*#__PURE__*/React.forwardRef(function Context
     });
   }
   function handleTouchStart(event) {
+    if (disabled) {
+      return;
+    }
     allowMouseUpTriggerRef.current = false;
     if (event.touches.length === 1) {
       event.stopPropagation();
@@ -123,6 +130,9 @@ export const ContextMenuTrigger = /*#__PURE__*/React.forwardRef(function Context
   }
   React.useEffect(() => {
     function handleDocumentContextMenu(event) {
+      if (disabled) {
+        return;
+      }
       const target = getTarget(event);
       const targetElement = target;
       if (contains(triggerRef.current, targetElement) || contains(internalBackdropRef.current, targetElement) || contains(backdropRef.current, targetElement)) {
@@ -134,10 +144,10 @@ export const ContextMenuTrigger = /*#__PURE__*/React.forwardRef(function Context
     return () => {
       doc.removeEventListener('contextmenu', handleDocumentContextMenu);
     };
-  }, [backdropRef, internalBackdropRef]);
-  const state = React.useMemo(() => ({
+  }, [backdropRef, disabled, internalBackdropRef]);
+  const state = {
     open
-  }), [open]);
+  };
   const element = useRenderElement('div', componentProps, {
     state,
     ref: [triggerRef, forwardedRef],

package/esm/csp-provider/CSPContext.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export interface CSPContextValue {
+  nonce?: string | undefined;
+  disableStyleElements?: boolean | undefined;
+}
+/**
+ * @internal
+ */
+export declare const CSPContext: React.Context<CSPContextValue | undefined>;
+/**
+ * @internal
+ */
+export declare function useCSPContext(): CSPContextValue;

package/esm/csp-provider/CSPContext.js

@@ -0,0 +1,18 @@
+'use client';
+
+import * as React from 'react';
+/**
+ * @internal
+ */
+export const CSPContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") CSPContext.displayName = "CSPContext";
+const DEFAULT_CSP_CONTEXT_VALUE = {
+  disableStyleElements: false
+};
+
+/**
+ * @internal
+ */
+export function useCSPContext() {
+  return React.useContext(CSPContext) ?? DEFAULT_CSP_CONTEXT_VALUE;
+}

package/esm/csp-provider/CSPProvider.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+/**
+ * Provides a default Content Security Policy (CSP) configuration for Base UI components that
+ * require inline `<style>` or `<script>` tags.
+ *
+ * Documentation: [Base UI CSP Provider](https://base-ui.com/react/utils/csp-provider)
+ */
+export declare function CSPProvider(props: CSPProvider.Props): import("react/jsx-runtime").JSX.Element;
+export interface CSPProviderState {}
+export interface CSPProviderProps {
+  children?: React.ReactNode;
+  /**
+   * The nonce value to apply to inline `<style>` and `<script>` tags.
+   */
+  nonce?: string | undefined;
+  /**
+   * Whether inline `<style>` elements created by Base UI components should not be rendered. Instead, components must specify the CSS styles via custom class names or other methods.
+   * @default false
+   */
+  disableStyleElements?: boolean | undefined;
+}
+export declare namespace CSPProvider {
+  type State = CSPProviderState;
+  type Props = CSPProviderProps;
+}

package/esm/csp-provider/CSPProvider.js

@@ -0,0 +1,27 @@
+'use client';
+
+import * as React from 'react';
+import { CSPContext } from "./CSPContext.js";
+
+/**
+ * Provides a default Content Security Policy (CSP) configuration for Base UI components that
+ * require inline `<style>` or `<script>` tags.
+ *
+ * Documentation: [Base UI CSP Provider](https://base-ui.com/react/utils/csp-provider)
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export function CSPProvider(props) {
+  const {
+    children,
+    nonce,
+    disableStyleElements
+  } = props;
+  const contextValue = React.useMemo(() => ({
+    nonce,
+    disableStyleElements
+  }), [nonce, disableStyleElements]);
+  return /*#__PURE__*/_jsx(CSPContext.Provider, {
+    value: contextValue,
+    children: children
+  });
+}

package/esm/csp-provider/index.d.ts

@@ -0,0 +1,2 @@
+export { CSPProvider } from "./index.parts.js";
+export type * from "./CSPProvider.js";

package/esm/csp-provider/index.js

@@ -0,0 +1 @@
+export { CSPProvider } from "./index.parts.js";

package/esm/csp-provider/index.parts.d.ts

@@ -0,0 +1 @@
+export { CSPProvider } from "./CSPProvider.js";