react-aria-components 0.0.4 → 1.0.0-alpha.2

package/src/ComboBox.tsx

@@ -0,0 +1,129 @@
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+import {AriaComboBoxProps, useComboBox, useFilter} from 'react-aria';
+import {ButtonContext} from './Button';
+import {ComboBoxState, useComboBoxState} from 'react-stately';
+import {ContextValue, forwardRefType, Provider, RenderProps, slotCallbackSymbol, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
+import {InputContext} from './Input';
+import {LabelContext} from './Label';
+import {ListBoxContext, ListBoxProps} from './ListBox';
+import {PopoverContext} from './Popover';
+import React, {createContext, ForwardedRef, forwardRef, useCallback, useRef, useState} from 'react';
+import {TextContext} from './Text';
+import {useCollection} from './Collection';
+import {useResizeObserver} from '@react-aria/utils';
+
+export interface ComboBoxProps<T extends object> extends Omit<AriaComboBoxProps<T>, 'children' | 'placeholder' | 'name' | 'label' | 'description' | 'errorMessage'>, RenderProps<ComboBoxState<T>>, SlotProps {
+  /** The filter function used to determine if a option should be included in the combo box list. */
+  defaultFilter?: (textValue: string, inputValue: string) => boolean
+}
+
+export const ComboBoxContext = createContext<ContextValue<ComboBoxProps<any>, HTMLDivElement>>(null);
+
+function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: ForwardedRef<HTMLDivElement>) {
+  [props, ref] = useContextProps(props, ref, ComboBoxContext);
+  let [propsFromListBox, setListBoxProps] = useState<ListBoxProps<T>>({children: []});
+
+  let {contains} = useFilter({sensitivity: 'base'});
+  let {portal, collection} = useCollection({
+    items: props.items ?? props.defaultItems ?? propsFromListBox.items,
+    children: propsFromListBox.children
+  });
+  let state = useComboBoxState({
+    defaultFilter: props.defaultFilter || contains,
+    ...props,
+    items: propsFromListBox ? (props.items ?? propsFromListBox.items) : [],
+    children: undefined,
+    collection
+  });
+
+  let buttonRef = useRef<HTMLButtonElement>(null);
+  let inputRef = useRef<HTMLInputElement>(null);
+  let listBoxRef = useRef<HTMLDivElement>(null);
+  let popoverRef = useRef<HTMLDivElement>(null);
+  let [labelRef, label] = useSlot();
+  let {
+    buttonProps,
+    inputProps,
+    listBoxProps,
+    labelProps,
+    descriptionProps,
+    errorMessageProps
+  } = useComboBox({
+    ...props,
+    label,
+    inputRef,
+    buttonRef,
+    listBoxRef,
+    popoverRef
+  },
+  state);
+
+  // Make menu width match input + button
+  let [menuWidth, setMenuWidth] = useState<string | null>(null);
+  let onResize = useCallback(() => {
+    if (inputRef.current) {
+      let buttonRect = buttonRef.current?.getBoundingClientRect();
+      let inputRect = inputRef.current.getBoundingClientRect();
+      let minX = buttonRect ? Math.min(buttonRect.left, inputRect.left) : inputRect.left;
+      let maxX = buttonRect ? Math.max(buttonRect.right, inputRect.right) : inputRect.right;
+      setMenuWidth((maxX - minX) + 'px');
+    }
+  }, [buttonRef, inputRef, setMenuWidth]);
+
+  useResizeObserver({
+    ref: inputRef,
+    onResize: onResize
+  });
+
+  let renderProps = useRenderProps({
+    ...props,
+    values: state,
+    defaultClassName: 'react-aria-ComboBox'
+  });
+
+  return (
+    <Provider
+      values={[
+        [LabelContext, {...labelProps, ref: labelRef}],
+        [ButtonContext, {...buttonProps, ref: buttonRef, isPressed: state.isOpen}],
+        [InputContext, {...inputProps, ref: inputRef}],
+        [PopoverContext, {
+          state,
+          ref: popoverRef,
+          triggerRef: inputRef,
+          placement: 'bottom start',
+          preserveChildren: true,
+          isNonModal: true,
+          style: {'--trigger-width': menuWidth} as React.CSSProperties
+        }],
+        [ListBoxContext, {state, [slotCallbackSymbol]: setListBoxProps, ...listBoxProps, ref: listBoxRef}],
+        [TextContext, {
+          slots: {
+            description: descriptionProps,
+            errorMessage: errorMessageProps
+          }
+        }]
+      ]}>
+      <div {...renderProps} ref={ref} slot={props.slot}>
+        {props.children}
+      </div>
+      {portal}
+    </Provider>
+  );
+}
+
+/**
+ * A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query.
+ */
+const _ComboBox = (forwardRef as forwardRefType)(ComboBox);
+export {_ComboBox as ComboBox};

package/src/DateField.tsx

@@ -0,0 +1,244 @@
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+import {AriaDateFieldProps, AriaTimeFieldProps, DateValue, mergeProps, TimeValue, useDateField, useDateSegment, useFocusRing, useHover, useLocale, useTimeField} from 'react-aria';
+import {ContextValue, forwardRefType, Provider, RenderProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps, useSlot} from './utils';
+import {createCalendar} from '@internationalized/date';
+import {DateFieldState, DateSegmentType, DateSegment as IDateSegment, useDateFieldState, useTimeFieldState} from 'react-stately';
+import {LabelContext} from './Label';
+import React, {cloneElement, createContext, ForwardedRef, forwardRef, HTMLAttributes, ReactElement, useContext, useRef} from 'react';
+import {TextContext} from './Text';
+import {useObjectRef} from '@react-aria/utils';
+
+export interface DateFieldProps<T extends DateValue> extends Omit<AriaDateFieldProps<T>, 'label' | 'description' | 'errorMessage'>, RenderProps<DateFieldState>, SlotProps {}
+export interface TimeFieldProps<T extends TimeValue> extends Omit<AriaTimeFieldProps<T>, 'label' | 'description' | 'errorMessage'>, RenderProps<DateFieldState>, SlotProps {}
+
+interface DateInputContextValue extends SlotProps {
+  state: DateFieldState,
+  fieldProps: HTMLAttributes<HTMLElement>
+}
+
+export const DateFieldContext = createContext<ContextValue<DateFieldProps<any>, HTMLDivElement>>(null);
+export const TimeFieldContext = createContext<ContextValue<TimeFieldProps<any>, HTMLDivElement>>(null);
+export const DateInputContext = createContext<ContextValue<DateInputContextValue, HTMLDivElement>>(null);
+
+function DateField<T extends DateValue>(props: DateFieldProps<T>, ref: ForwardedRef<HTMLDivElement>) {
+  [props, ref] = useContextProps(props, ref, DateFieldContext);
+  let {locale} = useLocale();
+  let state = useDateFieldState({
+    ...props,
+    locale,
+    createCalendar
+  });
+
+  let fieldRef = useRef<HTMLDivElement>(null);
+  let [labelRef, label] = useSlot();
+  let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useDateField({...props, label}, state, fieldRef);
+
+  let renderProps = useRenderProps({
+    ...props,
+    values: state,
+    defaultClassName: 'react-aria-DateField'
+  });
+
+  return (
+    <Provider
+      values={[
+        [DateInputContext, {state, fieldProps, ref: fieldRef}],
+        [LabelContext, {...labelProps, ref: labelRef}],
+        [TextContext, {
+          slots: {
+            description: descriptionProps,
+            errorMessage: errorMessageProps
+          }
+        }]
+      ]}>
+      <div {...renderProps} ref={ref} slot={props.slot}>
+        {props.children}
+      </div>
+    </Provider>
+  );
+}
+
+/**
+ * A date field allows users to enter and edit date and time values using a keyboard.
+ * Each part of a date value is displayed in an individually editable segment.
+ */
+const _DateField = (forwardRef as forwardRefType)(DateField);
+export {_DateField as DateField};
+
+function TimeField<T extends TimeValue>(props: TimeFieldProps<T>, ref: ForwardedRef<HTMLDivElement>) {
+  [props, ref] = useContextProps(props, ref, TimeFieldContext);
+  let {locale} = useLocale();
+  let state = useTimeFieldState({
+    ...props,
+    locale
+  });
+
+  let fieldRef = useRef<HTMLDivElement>(null);
+  let [labelRef, label] = useSlot();
+  let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useTimeField({...props, label}, state, fieldRef);
+
+  let renderProps = useRenderProps({
+    ...props,
+    values: state,
+    defaultClassName: 'react-aria-TimeField'
+  });
+
+  return (
+    <Provider
+      values={[
+        [DateInputContext, {state, fieldProps, ref: fieldRef}],
+        [LabelContext, {...labelProps, ref: labelRef, elementType: 'span'}],
+        [TextContext, {
+          slots: {
+            description: descriptionProps,
+            errorMessage: errorMessageProps
+          }
+        }]
+      ]}>
+      <div {...renderProps} ref={ref} slot={props.slot}>
+        {props.children}
+      </div>
+    </Provider>
+  );
+}
+
+/**
+ * A time field allows users to enter and edit time values using a keyboard.
+ * Each part of a time value is displayed in an individually editable segment.
+ */
+const _TimeField = (forwardRef as forwardRefType)(TimeField);
+export {_TimeField as TimeField};
+
+const InternalDateInputContext = createContext<DateFieldState| null>(null);
+
+export interface DateInputRenderProps {
+  /**
+   * Whether the date input is currently hovered with a mouse.
+   * @selector [data-hovered]
+   */
+  isHovered: boolean,
+  /**
+   * Whether an element within the date input is focused, either via a mouse or keyboard.
+   * @selector :focus-within
+   */
+  isFocusWithin: boolean,
+  /**
+   * Whether an element within the date input is keyboard focused.
+   * @selector [data-focus-visible]
+   */
+  isFocusVisible: boolean,
+  /**
+   * Whether the date input is disabled.
+   * @selector [data-disabled]
+   */
+  isDisabled: boolean
+}
+
+export interface DateInputProps extends SlotProps, StyleRenderProps<DateInputRenderProps> {
+  children: (segment: IDateSegment) => ReactElement
+}
+
+function DateInput({children, slot, ...otherProps}: DateInputProps, ref: ForwardedRef<HTMLDivElement>) {
+  let [{state, fieldProps}, fieldRef] = useContextProps({slot} as DateInputProps & DateInputContextValue, ref, DateInputContext);
+
+  let {hoverProps, isHovered} = useHover({});
+  let {isFocused, isFocusVisible, focusProps} = useFocusRing({
+    within: true,
+    isTextInput: true
+  });
+
+  let renderProps = useRenderProps({
+    ...otherProps,
+    values: {isHovered, isFocusWithin: isFocused, isFocusVisible, isDisabled: state.isDisabled},
+    defaultClassName: 'react-aria-DateInput'
+  });
+
+  return (
+    <InternalDateInputContext.Provider value={state}>
+      <div
+        {...mergeProps(fieldProps, focusProps, hoverProps)}
+        {...renderProps}
+        ref={fieldRef}
+        slot={slot}
+        data-hovered={isHovered || undefined}
+        data-focus-visible={isFocusVisible || undefined}
+        data-disabled={state.isDisabled || undefined}>
+        {state.segments.map((segment, i) => cloneElement(children(segment), {key: i}))}
+      </div>
+    </InternalDateInputContext.Provider>
+  );
+}
+
+/**
+ * A date input groups the editable date segments within a date field.
+ */
+const _DateInput = forwardRef(DateInput);
+export {_DateInput as DateInput};
+
+export interface DateSegmentRenderProps extends Omit<IDateSegment, 'isEditable'> {
+  /**
+   * Whether the value is a placeholder.
+   * @selector [data-placeholder]
+   */
+  isPlaceholder: boolean,
+  /**
+   * Whether the segment is read only.
+   * @selector [aria-readonly]
+   */
+  isReadOnly: boolean,
+  /**
+   * Whether the date field is in an invalid state.
+   * @selector [aria-invalid]
+   */
+  isInvalid: boolean,
+  /**
+   * The type of segment. Values include `literal`, `year`, `month`, `day`, etc.
+   * @selector [data-type="..."]
+   */
+  type: DateSegmentType
+}
+
+export interface DateSegmentProps extends RenderProps<DateSegmentRenderProps> {
+  segment: IDateSegment
+}
+
+function DateSegment({segment, ...otherProps}: DateSegmentProps, ref: ForwardedRef<HTMLDivElement>) {
+  let state = useContext(InternalDateInputContext)!;
+  let domRef = useObjectRef(ref);
+  let {segmentProps} = useDateSegment(segment, state, domRef);
+  let renderProps = useRenderProps({
+    ...otherProps,
+    values: {
+      ...segment,
+      isReadOnly: !segment.isEditable,
+      isInvalid: state.validationState === 'invalid'
+    },
+    defaultChildren: segment.text,
+    defaultClassName: 'react-aria-DateSegment'
+  });
+
+  return (
+    <div
+      {...segmentProps}
+      {...renderProps}
+      ref={domRef}
+      data-type={segment.type} />
+  );
+}
+
+/**
+ * A date segment displays an individual unit of a date and time, and allows users to edit
+ * the value by typing or using the arrow keys to increment and decrement.
+ */
+const _DateSegment = forwardRef(DateSegment);
+export {_DateSegment as DateSegment};

package/src/DatePicker.tsx

@@ -0,0 +1,178 @@
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+import {AriaDatePickerProps, AriaDateRangePickerProps, DateValue, useDateField, useDatePicker, useDateRangePicker, useLocale} from 'react-aria';
+import {ButtonContext} from './Button';
+import {CalendarContext, RangeCalendarContext} from './Calendar';
+import {ContextValue, forwardRefType, Provider, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
+import {createCalendar} from '@internationalized/date';
+import {DateInputContext} from './DateField';
+import {DatePickerState, DateRangePickerState, useDateFieldState, useDatePickerState, useDateRangePickerState} from 'react-stately';
+import {DialogContext} from './Dialog';
+import {GroupContext} from './Group';
+import {LabelContext} from './Label';
+import {PopoverContext} from './Popover';
+import React, {createContext, ForwardedRef, forwardRef, useRef} from 'react';
+import {TextContext} from './Text';
+
+export interface DatePickerProps<T extends DateValue> extends Omit<AriaDatePickerProps<T>, 'label' | 'description' | 'errorMessage'>, RenderProps<DatePickerState>, SlotProps {}
+export interface DateRangePickerProps<T extends DateValue> extends Omit<AriaDateRangePickerProps<T>, 'label' | 'description' | 'errorMessage'>, RenderProps<DateRangePickerState>, SlotProps {}
+
+export const DatePickerContext = createContext<ContextValue<DatePickerProps<any>, HTMLDivElement>>(null);
+export const DateRangePickerContext = createContext<ContextValue<DateRangePickerProps<any>, HTMLDivElement>>(null);
+
+function DatePicker<T extends DateValue>(props: DatePickerProps<T>, ref: ForwardedRef<HTMLDivElement>) {
+  [props, ref] = useContextProps(props, ref, DatePickerContext);
+  let state = useDatePickerState(props);
+  let groupRef = useRef<HTMLDivElement>(null);
+  let [labelRef, label] = useSlot();
+  let {
+    groupProps,
+    labelProps,
+    fieldProps,
+    buttonProps,
+    dialogProps,
+    calendarProps,
+    descriptionProps,
+    errorMessageProps
+  } = useDatePicker({...props, label}, state, groupRef);
+
+  let {locale} = useLocale();
+  let fieldState = useDateFieldState({
+    ...fieldProps,
+    locale,
+    createCalendar
+  });
+
+  let fieldRef = useRef<HTMLDivElement>(null);
+  let {fieldProps: dateFieldProps} = useDateField({...fieldProps, label}, fieldState, fieldRef);
+
+  let renderProps = useRenderProps({
+    ...props,
+    values: state,
+    defaultClassName: 'react-aria-DatePicker'
+  });
+
+  return (
+    <Provider
+      values={[
+        [GroupContext, {...groupProps, ref: groupRef}],
+        [DateInputContext, {state: fieldState, fieldProps: dateFieldProps, ref: fieldRef}],
+        [ButtonContext, {...buttonProps, isPressed: state.isOpen}],
+        [LabelContext, {...labelProps, ref: labelRef, elementType: 'span'}],
+        [CalendarContext, calendarProps],
+        [PopoverContext, {state, triggerRef: groupRef, placement: 'bottom start'}],
+        [DialogContext, dialogProps],
+        [TextContext, {
+          slots: {
+            description: descriptionProps,
+            errorMessage: errorMessageProps
+          }
+        }]
+      ]}>
+      <div {...renderProps} ref={ref} slot={props.slot}>
+        {props.children}
+      </div>
+    </Provider>
+  );
+}
+
+/**
+ * A date picker combines a DateField and a Calendar popover to allow users to enter or select a date and time value.
+ */
+const _DatePicker = (forwardRef as forwardRefType)(DatePicker);
+export {_DatePicker as DatePicker};
+
+function DateRangePicker<T extends DateValue>(props: DateRangePickerProps<T>, ref: ForwardedRef<HTMLDivElement>) {
+  [props, ref] = useContextProps(props, ref, DateRangePickerContext);
+  let state = useDateRangePickerState(props);
+  let groupRef = useRef<HTMLDivElement>(null);
+  let [labelRef, label] = useSlot();
+  let {
+    groupProps,
+    labelProps,
+    startFieldProps,
+    endFieldProps,
+    buttonProps,
+    dialogProps,
+    calendarProps,
+    descriptionProps,
+    errorMessageProps
+  } = useDateRangePicker({...props, label}, state, groupRef);
+
+  let {locale} = useLocale();
+  let startFieldState = useDateFieldState({
+    ...startFieldProps,
+    locale,
+    createCalendar
+  });
+
+  let startFieldRef = useRef<HTMLDivElement>(null);
+  let {fieldProps: startDateFieldProps} = useDateField({...startFieldProps, label}, startFieldState, startFieldRef);
+
+  let endFieldState = useDateFieldState({
+    ...endFieldProps,
+    locale,
+    createCalendar
+  });
+
+  let endFieldRef = useRef<HTMLDivElement>(null);
+  let {fieldProps: endDateFieldProps} = useDateField({...endFieldProps, label}, endFieldState, endFieldRef);
+
+  let renderProps = useRenderProps({
+    ...props,
+    values: state,
+    defaultClassName: 'react-aria-DateRangePicker'
+  });
+
+  return (
+    <Provider
+      values={[
+        [GroupContext, {...groupProps, ref: groupRef}],
+        [ButtonContext, {...buttonProps, isPressed: state.isOpen}],
+        [LabelContext, {...labelProps, ref: labelRef, elementType: 'span'}],
+        [RangeCalendarContext, calendarProps],
+        [PopoverContext, {state, triggerRef: groupRef, placement: 'bottom start'}],
+        [DialogContext, dialogProps],
+        [DateInputContext, {
+          slots: {
+            start: {
+              state: startFieldState,
+              fieldProps: startDateFieldProps,
+              ref: startFieldRef
+            },
+            end: {
+              state: endFieldState,
+              fieldProps: endDateFieldProps,
+              ref: endFieldRef
+            }
+          }
+        }],
+        [TextContext, {
+          slots: {
+            description: descriptionProps,
+            errorMessage: errorMessageProps
+          }
+        }]
+      ]}>
+      <div {...renderProps} ref={ref} slot={props.slot}>
+        {props.children}
+      </div>
+    </Provider>
+  );
+}
+
+/**
+ * A date range picker combines two DateFields and a RangeCalendar popover to allow
+ * users to enter or select a date and time range.
+ */
+const _DateRangePicker = (forwardRef as forwardRefType)(DateRangePicker);
+export {_DateRangePicker as DateRangePicker};

package/src/Dialog.tsx

@@ -0,0 +1,95 @@
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+import {AriaDialogProps, useDialog, useOverlayTrigger} from 'react-aria';
+import {ButtonContext} from './Button';
+import {ContextValue, DOMProps, Provider, SlotProps, useContextProps} from './utils';
+import {filterDOMProps} from '@react-aria/utils';
+import {HeadingContext} from './Heading';
+import {ModalContext} from './Modal';
+import {OverlayTriggerProps, useOverlayTriggerState} from 'react-stately';
+import {PopoverContext} from './Popover';
+import React, {createContext, ForwardedRef, forwardRef, ReactNode, useRef} from 'react';
+
+export interface DialogTriggerProps extends OverlayTriggerProps {
+  children: ReactNode
+}
+
+interface DialogRenderProps {
+  close: () => void
+}
+
+export interface DialogProps extends AriaDialogProps, DOMProps, SlotProps {
+  children?: ReactNode | ((opts: DialogRenderProps) => ReactNode),
+  onClose?: () => void
+}
+
+export const DialogContext = createContext<ContextValue<DialogProps, HTMLElement>>(null);
+
+/**
+ * A DialogTrigger opens a dialog when a trigger element is pressed.
+ */
+export function DialogTrigger(props: DialogTriggerProps) {
+  let state = useOverlayTriggerState(props);
+
+  let buttonRef = useRef<HTMLButtonElement>(null);
+  let {triggerProps, overlayProps} = useOverlayTrigger({type: 'dialog'}, state, buttonRef);
+
+  return (
+    <Provider
+      values={[
+        [ModalContext, {state}],
+        [DialogContext, {...overlayProps, onClose: state.close}],
+        [ButtonContext, {...triggerProps, isPressed: state.isOpen, ref: buttonRef}],
+        [PopoverContext, {state, triggerRef: buttonRef}]
+      ]}>
+      {props.children}
+    </Provider>
+  );
+}
+
+
+function Dialog(props: DialogProps, ref: ForwardedRef<HTMLElement>) {
+  [props, ref] = useContextProps(props, ref, DialogContext);
+  let {dialogProps, titleProps} = useDialog(props, ref);
+
+  let children = props.children;
+  if (typeof children === 'function') {
+    children = children({
+      close: props.onClose || (() => {})
+    });
+  }
+
+  return (
+    <section
+      {...filterDOMProps(props)}
+      {...dialogProps}
+      ref={ref}
+      slot={props.slot}
+      style={props.style}
+      className={props.className ?? 'react-aria-Dialog'}>
+      <Provider
+        values={[
+          [ButtonContext, undefined],
+          // TODO: clear context within dialog content?
+          [HeadingContext, {...titleProps, level: 2}]
+        ]}>
+        {children}
+      </Provider>
+    </section>
+  );
+}
+
+/**
+ * A dialog is an overlay shown above other content in an application.
+ */
+const _Dialog = forwardRef(Dialog);
+export {_Dialog as Dialog};