@base-ui/react 1.5.0 → 1.6.0

package/combobox/utils/useInitialLiveRegionTextMutation.mjs

@@ -0,0 +1,55 @@
+'use client';
+
+import * as React from 'react';
+import { platform } from '@base-ui/utils/platform';
+import { useTimeout } from '@base-ui/utils/useTimeout';
+
+// Word Joiner is invisible and zero-width, so it forces a text mutation without shifting layout.
+const LIVE_REGION_MARKER = '\u2060';
+// Safari VoiceOver needed roughly 200ms to reliably notice the initial polite live-region change.
+export const INITIAL_LIVE_REGION_TEXT_MUTATION_RESET_DELAY = 200;
+function findLastTextNode(root) {
+  const walker = root.ownerDocument.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+  let lastTextNode = null;
+  while (walker.nextNode()) {
+    const textNode = walker.currentNode;
+    if (textNode.nodeValue !== '') {
+      lastTextNode = textNode;
+    }
+  }
+  return lastTextNode;
+}
+export function useInitialLiveRegionTextMutation() {
+  const timeout = useTimeout();
+  const rootRef = React.useRef(null);
+
+  // Only the initial mounted announcement needs the marker; later text updates announce naturally.
+  React.useEffect(() => {
+    if (platform.os.ios) {
+      return undefined;
+    }
+    const root = rootRef.current;
+    if (root == null) {
+      return undefined;
+    }
+    const textNode = findLastTextNode(root);
+    if (textNode == null) {
+      return undefined;
+    }
+    const originalValue = textNode.nodeValue ?? '';
+    const markedValue = `${originalValue}${LIVE_REGION_MARKER}`;
+    textNode.nodeValue = markedValue;
+    timeout.start(INITIAL_LIVE_REGION_TEXT_MUTATION_RESET_DELAY, () => {
+      if (textNode.nodeValue === markedValue) {
+        textNode.nodeValue = originalValue;
+      }
+    });
+    return () => {
+      timeout.clear();
+      if (textNode.nodeValue === markedValue) {
+        textNode.nodeValue = originalValue;
+      }
+    };
+  }, [rootRef, timeout]);
+  return rootRef;
+}

package/combobox/value/ComboboxValue.mjs

@@ -0,0 +1,44 @@
+'use client';
+
+import * as React from 'react';
+import { useStore } from '@base-ui/utils/store';
+import { useComboboxRootContext } from "../root/ComboboxRootContext.mjs";
+import { resolveMultipleLabels, resolveSelectedLabel } from "../../internals/resolveValueLabel.mjs";
+import { selectors } from "../store.mjs";
+
+/**
+ * The current value of the combobox.
+ * Doesn't render its own HTML element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export function ComboboxValue(props) {
+  const {
+    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);
+  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') {
+    children = childrenProp(selectedValue);
+  } else if (childrenProp != null) {
+    children = childrenProp;
+  } else if (!hasSelectedValue && placeholder != null && !hasNullLabel) {
+    children = placeholder;
+  } else if (multiple && Array.isArray(selectedValue)) {
+    children = resolveMultipleLabels(selectedValue, items, itemToStringLabel);
+  } else {
+    children = resolveSelectedLabel(selectedValue, items, itemToStringLabel);
+  }
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: children
+  });
+}

package/context-menu/index.d.mts

@@ -0,0 +1,19 @@
+export * as ContextMenu from "./index.parts.mjs";
+export type * from "./root/ContextMenuRoot.mjs";
+export type * from "./trigger/ContextMenuTrigger.mjs";
+export type { MenuBackdropProps as ContextMenuBackdropProps, MenuBackdropState as ContextMenuBackdropState } from "../menu/backdrop/MenuBackdrop.mjs";
+export type { MenuPortalProps as ContextMenuPortalProps, MenuPortalState as ContextMenuPortalState } from "../menu/portal/MenuPortal.mjs";
+export type { MenuPositionerProps as ContextMenuPositionerProps, MenuPositionerState as ContextMenuPositionerState } from "../menu/positioner/MenuPositioner.mjs";
+export type { MenuPopupProps as ContextMenuPopupProps, MenuPopupState as ContextMenuPopupState } from "../menu/popup/MenuPopup.mjs";
+export type { MenuArrowProps as ContextMenuArrowProps, MenuArrowState as ContextMenuArrowState } from "../menu/arrow/MenuArrow.mjs";
+export type { MenuGroupProps as ContextMenuGroupProps, MenuGroupState as ContextMenuGroupState } from "../menu/group/MenuGroup.mjs";
+export type { MenuGroupLabelProps as ContextMenuGroupLabelProps, MenuGroupLabelState as ContextMenuGroupLabelState } from "../menu/group-label/MenuGroupLabel.mjs";
+export type { MenuItemProps as ContextMenuItemProps, MenuItemState as ContextMenuItemState } from "../menu/item/MenuItem.mjs";
+export type { MenuLinkItemProps as ContextMenuLinkItemProps, MenuLinkItemState as ContextMenuLinkItemState } from "../menu/link-item/MenuLinkItem.mjs";
+export type { MenuCheckboxItemProps as ContextMenuCheckboxItemProps, MenuCheckboxItemState as ContextMenuCheckboxItemState } from "../menu/checkbox-item/MenuCheckboxItem.mjs";
+export type { MenuCheckboxItemIndicatorProps as ContextMenuCheckboxItemIndicatorProps, MenuCheckboxItemIndicatorState as ContextMenuCheckboxItemIndicatorState } from "../menu/checkbox-item-indicator/MenuCheckboxItemIndicator.mjs";
+export type { MenuRadioGroupProps as ContextMenuRadioGroupProps, MenuRadioGroupState as ContextMenuRadioGroupState } from "../menu/radio-group/MenuRadioGroup.mjs";
+export type { MenuRadioItemProps as ContextMenuRadioItemProps, MenuRadioItemState as ContextMenuRadioItemState } from "../menu/radio-item/MenuRadioItem.mjs";
+export type { MenuRadioItemIndicatorProps as ContextMenuRadioItemIndicatorProps, MenuRadioItemIndicatorState as ContextMenuRadioItemIndicatorState } from "../menu/radio-item-indicator/MenuRadioItemIndicator.mjs";
+export type { MenuSubmenuRootProps as ContextMenuSubmenuRootProps, MenuSubmenuRootState as ContextMenuSubmenuRootState } from "../menu/submenu-root/MenuSubmenuRoot.mjs";
+export type { MenuSubmenuTriggerProps as ContextMenuSubmenuTriggerProps, MenuSubmenuTriggerState as ContextMenuSubmenuTriggerState } from "../menu/submenu-trigger/MenuSubmenuTrigger.mjs";

package/context-menu/index.mjs

@@ -0,0 +1 @@
+export * as ContextMenu from "./index.parts.mjs";

package/context-menu/index.parts.d.mts

@@ -0,0 +1,19 @@
+export { ContextMenuRoot as Root } from "./root/ContextMenuRoot.mjs";
+export { ContextMenuTrigger as Trigger } from "./trigger/ContextMenuTrigger.mjs";
+export { MenuBackdrop as Backdrop } from "../menu/backdrop/MenuBackdrop.mjs";
+export { MenuPortal as Portal } from "../menu/portal/MenuPortal.mjs";
+export { MenuPositioner as Positioner } from "../menu/positioner/MenuPositioner.mjs";
+export { MenuPopup as Popup } from "../menu/popup/MenuPopup.mjs";
+export { MenuArrow as Arrow } from "../menu/arrow/MenuArrow.mjs";
+export { MenuGroup as Group } from "../menu/group/MenuGroup.mjs";
+export { MenuGroupLabel as GroupLabel } from "../menu/group-label/MenuGroupLabel.mjs";
+export { MenuItem as Item } from "../menu/item/MenuItem.mjs";
+export { MenuCheckboxItem as CheckboxItem } from "../menu/checkbox-item/MenuCheckboxItem.mjs";
+export { MenuCheckboxItemIndicator as CheckboxItemIndicator } from "../menu/checkbox-item-indicator/MenuCheckboxItemIndicator.mjs";
+export { MenuLinkItem as LinkItem } from "../menu/link-item/MenuLinkItem.mjs";
+export { MenuRadioGroup as RadioGroup } from "../menu/radio-group/MenuRadioGroup.mjs";
+export { MenuRadioItem as RadioItem } from "../menu/radio-item/MenuRadioItem.mjs";
+export { MenuRadioItemIndicator as RadioItemIndicator } from "../menu/radio-item-indicator/MenuRadioItemIndicator.mjs";
+export { MenuSubmenuRoot as SubmenuRoot } from "../menu/submenu-root/MenuSubmenuRoot.mjs";
+export { MenuSubmenuTrigger as SubmenuTrigger } from "../menu/submenu-trigger/MenuSubmenuTrigger.mjs";
+export { Separator } from "../separator/Separator.mjs";

package/context-menu/index.parts.mjs

@@ -0,0 +1,19 @@
+export { ContextMenuRoot as Root } from "./root/ContextMenuRoot.mjs";
+export { ContextMenuTrigger as Trigger } from "./trigger/ContextMenuTrigger.mjs";
+export { MenuBackdrop as Backdrop } from "../menu/backdrop/MenuBackdrop.mjs";
+export { MenuPortal as Portal } from "../menu/portal/MenuPortal.mjs";
+export { MenuPositioner as Positioner } from "../menu/positioner/MenuPositioner.mjs";
+export { MenuPopup as Popup } from "../menu/popup/MenuPopup.mjs";
+export { MenuArrow as Arrow } from "../menu/arrow/MenuArrow.mjs";
+export { MenuGroup as Group } from "../menu/group/MenuGroup.mjs";
+export { MenuGroupLabel as GroupLabel } from "../menu/group-label/MenuGroupLabel.mjs";
+export { MenuItem as Item } from "../menu/item/MenuItem.mjs";
+export { MenuCheckboxItem as CheckboxItem } from "../menu/checkbox-item/MenuCheckboxItem.mjs";
+export { MenuCheckboxItemIndicator as CheckboxItemIndicator } from "../menu/checkbox-item-indicator/MenuCheckboxItemIndicator.mjs";
+export { MenuLinkItem as LinkItem } from "../menu/link-item/MenuLinkItem.mjs";
+export { MenuRadioGroup as RadioGroup } from "../menu/radio-group/MenuRadioGroup.mjs";
+export { MenuRadioItem as RadioItem } from "../menu/radio-item/MenuRadioItem.mjs";
+export { MenuRadioItemIndicator as RadioItemIndicator } from "../menu/radio-item-indicator/MenuRadioItemIndicator.mjs";
+export { MenuSubmenuRoot as SubmenuRoot } from "../menu/submenu-root/MenuSubmenuRoot.mjs";
+export { MenuSubmenuTrigger as SubmenuTrigger } from "../menu/submenu-trigger/MenuSubmenuTrigger.mjs";
+export { Separator } from "../separator/Separator.mjs";

package/context-menu/root/ContextMenuRoot.d.mts

@@ -0,0 +1,27 @@
+import { Menu } from "../../menu/index.mjs";
+import type { BaseUIChangeEventDetails } from "../../types/index.mjs";
+import type { MenuRoot } from "../../menu/root/MenuRoot.mjs";
+/**
+ * A component that creates a context menu activated by right clicking or long pressing.
+ * Doesn't render its own HTML element.
+ *
+ * Documentation: [Base UI Context Menu](https://base-ui.com/react/components/context-menu)
+ */
+export declare function ContextMenuRoot(props: ContextMenuRoot.Props): import("react/jsx-runtime").JSX.Element;
+export interface ContextMenuRootState {}
+export interface ContextMenuRootProps extends Omit<Menu.Root.Props, 'modal' | 'openOnHover' | 'delay' | 'closeDelay' | 'onOpenChange'> {
+  /**
+   * Event handler called when the menu is opened or closed.
+   */
+  onOpenChange?: ((open: boolean, eventDetails: ContextMenuRoot.ChangeEventDetails) => void) | undefined;
+}
+export type ContextMenuRootActions = MenuRoot.Actions;
+export type ContextMenuRootChangeEventReason = MenuRoot.ChangeEventReason;
+export type ContextMenuRootChangeEventDetails = BaseUIChangeEventDetails<ContextMenuRoot.ChangeEventReason>;
+export declare namespace ContextMenuRoot {
+  type State = ContextMenuRootState;
+  type Props = ContextMenuRootProps;
+  type Actions = ContextMenuRootActions;
+  type ChangeEventReason = ContextMenuRootChangeEventReason;
+  type ChangeEventDetails = ContextMenuRootChangeEventDetails;
+}

package/context-menu/root/ContextMenuRoot.mjs

@@ -0,0 +1,53 @@
+'use client';
+
+import * as React from 'react';
+import { useId } from '@base-ui/utils/useId';
+import { ContextMenuRootContext } from "./ContextMenuRootContext.mjs";
+import { Menu } from "../../menu/index.mjs";
+import { MenuRootContext } from "../../menu/root/MenuRootContext.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A component that creates a context menu activated by right clicking or long pressing.
+ * Doesn't render its own HTML element.
+ *
+ * Documentation: [Base UI Context Menu](https://base-ui.com/react/components/context-menu)
+ */
+export function ContextMenuRoot(props) {
+  const [anchor, setAnchor] = React.useState({
+    getBoundingClientRect() {
+      return DOMRect.fromRect({
+        width: 0,
+        height: 0,
+        x: 0,
+        y: 0
+      });
+    }
+  });
+  const backdropRef = React.useRef(null);
+  const internalBackdropRef = React.useRef(null);
+  const actionsRef = React.useRef(null);
+  const positionerRef = React.useRef(null);
+  const allowMouseUpTriggerRef = React.useRef(true);
+  const initialCursorPointRef = React.useRef(null);
+  const id = useId();
+  const contextValue = React.useMemo(() => ({
+    anchor,
+    setAnchor,
+    actionsRef,
+    backdropRef,
+    internalBackdropRef,
+    positionerRef,
+    allowMouseUpTriggerRef,
+    initialCursorPointRef,
+    rootId: id
+  }), [anchor, id]);
+  return /*#__PURE__*/_jsx(ContextMenuRootContext.Provider, {
+    value: contextValue,
+    children: /*#__PURE__*/_jsx(MenuRootContext.Provider, {
+      value: undefined,
+      children: /*#__PURE__*/_jsx(Menu.Root, {
+        ...props
+      })
+    })
+  });
+}

package/context-menu/root/ContextMenuRootContext.d.mts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import type { ContextMenuRoot } from "./ContextMenuRoot.mjs";
+export interface ContextMenuRootContext {
+  anchor: {
+    getBoundingClientRect: () => DOMRect;
+  };
+  setAnchor: React.Dispatch<React.SetStateAction<ContextMenuRootContext['anchor']>>;
+  backdropRef: React.RefObject<HTMLDivElement | null>;
+  internalBackdropRef: React.RefObject<HTMLDivElement | null>;
+  actionsRef: React.RefObject<{
+    setOpen: (nextOpen: boolean, eventDetails: ContextMenuRoot.ChangeEventDetails) => void;
+  } | null>;
+  positionerRef: React.RefObject<HTMLElement | null>;
+  allowMouseUpTriggerRef: React.RefObject<boolean>;
+  initialCursorPointRef: React.RefObject<{
+    x: number;
+    y: number;
+  } | null>;
+  rootId: string | undefined;
+}
+export declare const ContextMenuRootContext: React.Context<ContextMenuRootContext | undefined>;
+export declare function useContextMenuRootContext(optional: false): ContextMenuRootContext;
+export declare function useContextMenuRootContext(optional?: true): ContextMenuRootContext | undefined;

package/context-menu/trigger/ContextMenuTrigger.d.mts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { BaseUIComponentProps } from "../../internals/types.mjs";
+/**
+ * An area that opens the menu on right click or long press.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Context Menu](https://base-ui.com/react/components/context-menu)
+ */
+export declare const ContextMenuTrigger: React.ForwardRefExoticComponent<Omit<ContextMenuTriggerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface ContextMenuTriggerState {
+  /**
+   * Whether the context menu is currently open.
+   */
+  open: boolean;
+}
+export interface ContextMenuTriggerProps extends BaseUIComponentProps<'div', ContextMenuTriggerState> {}
+export declare namespace ContextMenuTrigger {
+  type State = ContextMenuTriggerState;
+  type Props = ContextMenuTriggerProps;
+}

package/context-menu/trigger/ContextMenuTrigger.mjs

@@ -0,0 +1,167 @@
+'use client';
+
+import * as React from 'react';
+import { addEventListener } from '@base-ui/utils/addEventListener';
+import { ownerDocument } from '@base-ui/utils/owner';
+import { useTimeout } from '@base-ui/utils/useTimeout';
+import { contains, getTarget, stopEvent } from "../../floating-ui-react/utils.mjs";
+import { useContextMenuRootContext } from "../root/ContextMenuRootContext.mjs";
+import { useMenuRootContext } from "../../menu/root/MenuRootContext.mjs";
+import { useRenderElement } from "../../internals/useRenderElement.mjs";
+import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.mjs";
+import { pressableTriggerOpenStateMapping } from "../../utils/popupStateMapping.mjs";
+import { REASONS } from "../../internals/reasons.mjs";
+import { findRootOwnerId } from "../../menu/utils/findRootOwnerId.mjs";
+const LONG_PRESS_DELAY = 500;
+
+/**
+ * An area that opens the menu on right click or long press.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Context Menu](https://base-ui.com/react/components/context-menu)
+ */
+export const ContextMenuTrigger = /*#__PURE__*/React.forwardRef(function ContextMenuTrigger(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    style,
+    ...elementProps
+  } = componentProps;
+  const {
+    setAnchor,
+    actionsRef,
+    internalBackdropRef,
+    backdropRef,
+    positionerRef,
+    allowMouseUpTriggerRef,
+    initialCursorPointRef,
+    rootId
+  } = useContextMenuRootContext(false);
+  const {
+    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();
+  const allowMouseUpTimeout = useTimeout();
+  const allowMouseUpRef = React.useRef(false);
+  function handleLongPress(x, y, event) {
+    const isTouchEvent = event.type.startsWith('touch');
+    initialCursorPointRef.current = {
+      x,
+      y
+    };
+    setAnchor({
+      getBoundingClientRect() {
+        return DOMRect.fromRect({
+          width: isTouchEvent ? 10 : 0,
+          height: isTouchEvent ? 10 : 0,
+          x,
+          y
+        });
+      }
+    });
+    allowMouseUpRef.current = false;
+    actionsRef.current?.setOpen(true, createChangeEventDetails(REASONS.triggerPress, event));
+    allowMouseUpTimeout.start(LONG_PRESS_DELAY, () => {
+      allowMouseUpRef.current = true;
+    });
+  }
+  function handleContextMenu(event) {
+    if (disabled) {
+      return;
+    }
+    allowMouseUpTriggerRef.current = true;
+    stopEvent(event);
+    handleLongPress(event.clientX, event.clientY, event.nativeEvent);
+    const doc = ownerDocument(triggerRef.current);
+    addEventListener(doc, 'mouseup', mouseEvent => {
+      allowMouseUpTriggerRef.current = false;
+      if (!allowMouseUpRef.current) {
+        return;
+      }
+      allowMouseUpTimeout.clear();
+      allowMouseUpRef.current = false;
+      const mouseUpTarget = getTarget(mouseEvent);
+      if (contains(positionerRef.current, mouseUpTarget)) {
+        return;
+      }
+      if (rootId && mouseUpTarget && findRootOwnerId(mouseUpTarget) === rootId) {
+        return;
+      }
+      actionsRef.current?.setOpen(false, createChangeEventDetails(REASONS.cancelOpen, mouseEvent));
+    }, {
+      once: true
+    });
+  }
+  function handleTouchStart(event) {
+    if (disabled) {
+      return;
+    }
+    allowMouseUpTriggerRef.current = false;
+    if (event.touches.length === 1) {
+      event.stopPropagation();
+      const touch = event.touches[0];
+      touchPositionRef.current = {
+        x: touch.clientX,
+        y: touch.clientY
+      };
+      longPressTimeout.start(LONG_PRESS_DELAY, () => {
+        if (touchPositionRef.current) {
+          handleLongPress(touchPositionRef.current.x, touchPositionRef.current.y, event.nativeEvent);
+        }
+      });
+    }
+  }
+  function handleTouchMove(event) {
+    if (longPressTimeout.isStarted() && touchPositionRef.current && event.touches.length === 1) {
+      const touch = event.touches[0];
+      const moveThreshold = 10;
+      const deltaX = Math.abs(touch.clientX - touchPositionRef.current.x);
+      const deltaY = Math.abs(touch.clientY - touchPositionRef.current.y);
+      if (deltaX > moveThreshold || deltaY > moveThreshold) {
+        longPressTimeout.clear();
+      }
+    }
+  }
+  function handleTouchEnd() {
+    longPressTimeout.clear();
+    touchPositionRef.current = null;
+  }
+  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)) {
+        event.preventDefault();
+      }
+    }
+    const doc = ownerDocument(triggerRef.current);
+    return addEventListener(doc, 'contextmenu', handleDocumentContextMenu);
+  }, [backdropRef, disabled, internalBackdropRef]);
+  const state = {
+    open
+  };
+  const element = useRenderElement('div', componentProps, {
+    state,
+    ref: [triggerRef, forwardedRef],
+    props: [{
+      onContextMenu: handleContextMenu,
+      onTouchStart: handleTouchStart,
+      onTouchMove: handleTouchMove,
+      onTouchEnd: handleTouchEnd,
+      onTouchCancel: handleTouchEnd,
+      style: {
+        WebkitTouchCallout: 'none'
+      }
+    }, elementProps],
+    stateAttributesMapping: pressableTriggerOpenStateMapping
+  });
+  return element;
+});
+if (process.env.NODE_ENV !== "production") ContextMenuTrigger.displayName = "ContextMenuTrigger";

package/context-menu/trigger/ContextMenuTriggerDataAttributes.mjs

@@ -0,0 +1,12 @@
+import { CommonTriggerDataAttributes } from "../../utils/popupStateMapping.mjs";
+export let ContextMenuTriggerDataAttributes = function (ContextMenuTriggerDataAttributes) {
+  /**
+   * Present when the corresponding context menu is open.
+   */
+  ContextMenuTriggerDataAttributes[ContextMenuTriggerDataAttributes["popupOpen"] = CommonTriggerDataAttributes.popupOpen] = "popupOpen";
+  /**
+   * Present when the trigger is pressed.
+   */
+  ContextMenuTriggerDataAttributes[ContextMenuTriggerDataAttributes["pressed"] = CommonTriggerDataAttributes.pressed] = "pressed";
+  return ContextMenuTriggerDataAttributes;
+}({});

package/csp-provider/CSPProvider.mjs

@@ -0,0 +1,27 @@
+'use client';
+
+import * as React from 'react';
+import { CSPContext } from "../internals/csp-context/CSPContext.mjs";
+
+/**
+ * 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/csp-provider/index.d.mts

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

package/csp-provider/index.mjs

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

package/csp-provider/index.parts.d.mts

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

package/csp-provider/index.parts.mjs

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

package/dialog/backdrop/DialogBackdrop.d.mts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { type TransitionStatus } from "../../internals/useTransitionStatus.mjs";
+import { type BaseUIComponentProps } from "../../internals/types.mjs";
+/**
+ * An overlay displayed beneath the popup.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
+ */
+export declare const DialogBackdrop: React.ForwardRefExoticComponent<Omit<DialogBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface DialogBackdropProps extends BaseUIComponentProps<'div', DialogBackdropState> {
+  /**
+   * Whether the backdrop is forced to render even when nested.
+   * @default false
+   */
+  forceRender?: boolean | undefined;
+}
+export interface DialogBackdropState {
+  /**
+   * Whether the dialog is currently open.
+   */
+  open: boolean;
+  /**
+   * The transition status of the component.
+   */
+  transitionStatus: TransitionStatus;
+}
+export declare namespace DialogBackdrop {
+  type Props = DialogBackdropProps;
+  type State = DialogBackdropState;
+}

package/dialog/backdrop/DialogBackdrop.mjs

@@ -0,0 +1,53 @@
+'use client';
+
+import * as React from 'react';
+import { useDialogRootContext } from "../root/DialogRootContext.mjs";
+import { useRenderElement } from "../../internals/useRenderElement.mjs";
+import { popupStateMapping as baseMapping } from "../../utils/popupStateMapping.mjs";
+import { transitionStatusMapping } from "../../internals/stateAttributesMapping.mjs";
+const stateAttributesMapping = {
+  ...baseMapping,
+  ...transitionStatusMapping
+};
+
+/**
+ * An overlay displayed beneath the popup.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
+ */
+export const DialogBackdrop = /*#__PURE__*/React.forwardRef(function DialogBackdrop(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    style,
+    forceRender = false,
+    ...elementProps
+  } = componentProps;
+  const {
+    store
+  } = useDialogRootContext();
+  const open = store.useState('open');
+  const nested = store.useState('nested');
+  const mounted = store.useState('mounted');
+  const transitionStatus = store.useState('transitionStatus');
+  const state = {
+    open,
+    transitionStatus
+  };
+  return useRenderElement('div', componentProps, {
+    state,
+    ref: [store.context.backdropRef, forwardedRef],
+    stateAttributesMapping,
+    props: [{
+      role: 'presentation',
+      hidden: !mounted,
+      style: {
+        userSelect: 'none',
+        WebkitUserSelect: 'none'
+      }
+    }, elementProps],
+    enabled: forceRender || !nested
+  });
+});
+if (process.env.NODE_ENV !== "production") DialogBackdrop.displayName = "DialogBackdrop";

package/dialog/backdrop/DialogBackdropDataAttributes.mjs

@@ -0,0 +1,20 @@
+import { CommonPopupDataAttributes } from "../../utils/popupStateMapping.mjs";
+export let DialogBackdropDataAttributes = function (DialogBackdropDataAttributes) {
+  /**
+   * Present when the dialog is open.
+   */
+  DialogBackdropDataAttributes[DialogBackdropDataAttributes["open"] = CommonPopupDataAttributes.open] = "open";
+  /**
+   * Present when the dialog is closed.
+   */
+  DialogBackdropDataAttributes[DialogBackdropDataAttributes["closed"] = CommonPopupDataAttributes.closed] = "closed";
+  /**
+   * Present when the dialog is animating in.
+   */
+  DialogBackdropDataAttributes[DialogBackdropDataAttributes["startingStyle"] = CommonPopupDataAttributes.startingStyle] = "startingStyle";
+  /**
+   * Present when the dialog is animating out.
+   */
+  DialogBackdropDataAttributes[DialogBackdropDataAttributes["endingStyle"] = CommonPopupDataAttributes.endingStyle] = "endingStyle";
+  return DialogBackdropDataAttributes;
+}({});

package/dialog/close/DialogClose.d.mts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { BaseUIComponentProps, NativeButtonProps } from "../../internals/types.mjs";
+/**
+ * A button that closes the dialog.
+ * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
+ */
+export declare const DialogClose: React.ForwardRefExoticComponent<Omit<DialogCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export interface DialogCloseProps extends NativeButtonProps, BaseUIComponentProps<'button', DialogCloseState> {}
+export interface DialogCloseState {
+  /**
+   * Whether the button is currently disabled.
+   */
+  disabled: boolean;
+}
+export declare namespace DialogClose {
+  type Props = DialogCloseProps;
+  type State = DialogCloseState;
+}