react-aria-components 1.14.0 → 1.15.1

package/src/Checkbox.tsx

@@ -15,6 +15,7 @@ import {CheckboxGroupState, useCheckboxGroupState, useToggleState} from 'react-s
 import {
   ClassNameOrFunction,
   ContextValue,
+  dom,
   Provider,
   RACValidation,
   removeDataAttributes,
@@ -33,14 +34,14 @@ import {LabelContext} from './Label';
 import React, {createContext, ForwardedRef, forwardRef, useContext, useMemo} from 'react';
 import {TextContext} from './Text';
 
-export interface CheckboxGroupProps extends Omit<AriaCheckboxGroupProps, 'children' | 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<CheckboxGroupRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {
+export interface CheckboxGroupProps extends Omit<AriaCheckboxGroupProps, 'children' | 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<CheckboxGroupRenderProps, 'div'>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {
   /**
    * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
    * @default 'react-aria-CheckboxGroup'
    */
   className?: ClassNameOrFunction<CheckboxGroupRenderProps>
 }
-export interface CheckboxProps extends Omit<AriaCheckboxProps, 'children' | 'validationState' | 'validationBehavior'>, HoverEvents, RACValidation, RenderProps<CheckboxRenderProps>, SlotProps, Omit<GlobalDOMAttributes<HTMLLabelElement>, 'onClick'> {
+export interface CheckboxProps extends Omit<AriaCheckboxProps, 'children' | 'validationState' | 'validationBehavior'>, HoverEvents, RACValidation, RenderProps<CheckboxRenderProps, 'label'>, SlotProps, Omit<GlobalDOMAttributes<HTMLLabelElement>, 'onClick'> {
   /**
    * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
    * @default 'react-aria-Checkbox'
@@ -170,7 +171,7 @@ export const CheckboxGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(functi
   let DOMProps = filterDOMProps(props, {global: true});
 
   return (
-    <div
+    <dom.div
       {...mergeProps(DOMProps, renderProps, groupProps)}
       ref={ref}
       slot={props.slot || undefined}
@@ -192,7 +193,7 @@ export const CheckboxGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(functi
         ]}>
         {renderProps.children}
       </Provider>
-    </div>
+    </dom.div>
   );
 });
 
@@ -258,7 +259,7 @@ export const Checkbox = /*#__PURE__*/ (forwardRef as forwardRefType)(function Ch
   delete DOMProps.onClick;
 
   return (
-    <label
+    <dom.label
       {...mergeProps(DOMProps, labelProps, hoverProps, renderProps)}
       ref={ref}
       slot={props.slot || undefined}
@@ -276,6 +277,6 @@ export const Checkbox = /*#__PURE__*/ (forwardRef as forwardRefType)(function Ch
         <input {...mergeProps(inputProps, focusProps)} ref={inputRef} />
       </VisuallyHidden>
       {renderProps.children}
-    </label>
+    </dom.label>
   );
 });

package/src/ColorArea.tsx

@@ -1,6 +1,7 @@
 import {AriaColorAreaProps, useColorArea} from 'react-aria';
 import {
   ClassNameOrFunction,
+  dom,
   Provider,
   RenderProps,
   SlotProps,
@@ -71,7 +72,7 @@ export const ColorArea = forwardRef(function ColorArea(props: ColorAreaProps, re
   delete DOMProps.id;
 
   return (
-    <div
+    <dom.div
       ref={ref}
       {...mergeProps(DOMProps, colorAreaProps, renderProps)}
       slot={props.slot || undefined}
@@ -83,6 +84,6 @@ export const ColorArea = forwardRef(function ColorArea(props: ColorAreaProps, re
         ]}>
         {renderProps.children}
       </Provider>
-    </div>
+    </dom.div>
   );
 });

package/src/ColorField.tsx

@@ -13,6 +13,7 @@
 import {AriaColorFieldProps, useColorChannelField, useColorField, useLocale} from 'react-aria';
 import {
   ClassNameOrFunction,
+  dom,
   Provider,
   RACValidation,
   removeDataAttributes,
@@ -44,6 +45,16 @@ export interface ColorFieldRenderProps {
    * @selector [data-invalid]
    */
   isInvalid: boolean,
+  /**
+   * Whether the color field is read only.
+   * @selector [data-readonly]
+   */
+   isReadOnly: boolean,
+   /**
+    * Whether the color field is required.
+    * @selector [data-required]
+    */
+   isRequired: boolean,
   /**
    * The color channel that this field edits, or "hex" if no `channel` prop is set.
    * @selector [data-channel="hex | hue | saturation | ..."]
@@ -192,7 +203,9 @@ function useChildren(
       state,
       channel: props.channel || 'hex',
       isDisabled: props.isDisabled || false,
-      isInvalid: validation.isInvalid || false
+      isInvalid: validation.isInvalid || false,
+      isReadOnly: props.isReadOnly || false,
+      isRequired: props.isRequired || false
     },
     defaultClassName: 'react-aria-ColorField'
   });
@@ -215,14 +228,16 @@ function useChildren(
         }],
         [FieldErrorContext, validation]
       ]}>
-      <div
+      <dom.div
         {...DOMProps}
         {...renderProps}
         ref={ref}
         slot={props.slot || undefined}
         data-channel={props.channel || 'hex'}
         data-disabled={props.isDisabled || undefined}
-        data-invalid={validation.isInvalid || undefined} />
+        data-invalid={validation.isInvalid || undefined}
+        data-readonly={props.isReadOnly || undefined}
+        data-required={props.isRequired || undefined} />
     </Provider>
   );
 }

package/src/ColorSlider.tsx

@@ -1,6 +1,7 @@
 import {AriaColorSliderProps, Orientation, useColorSlider, useLocale} from 'react-aria';
 import {
   ClassNameOrFunction,
+  dom,
   Provider,
   RenderProps,
   SlotProps,
@@ -97,7 +98,7 @@ export const ColorSlider = forwardRef(function ColorSlider(props: ColorSliderPro
         }],
         [InternalColorThumbContext, {state, thumbProps, inputXRef: inputRef, xInputProps: inputProps, isDisabled: props.isDisabled}]
       ]}>
-      <div
+      <dom.div
         {...DOMProps}
         {...renderProps}
         ref={ref}

package/src/ColorSwatch.tsx

@@ -2,6 +2,7 @@ import {AriaColorSwatchProps, useColorSwatch} from 'react-aria';
 import {
   ClassNameOrFunction,
   ContextValue,
+  dom,
   SlotProps,
   StyleRenderProps,
   useContextProps,
@@ -45,7 +46,7 @@ export const ColorSwatch = forwardRef(function ColorSwatch(props: ColorSwatchPro
   let DOMProps = filterDOMProps(props, {global: true});
   
   return (
-    <div
+    <dom.div
       {...mergeProps(DOMProps, colorSwatchProps, renderProps)}
       slot={props.slot || undefined}
       ref={ref} />

package/src/ColorSwatchPicker.tsx

@@ -108,6 +108,8 @@ export const ColorSwatchPickerItem = forwardRef(function ColorSwatchPickerItem(p
   return (
     <ListBoxItem
       {...props}
+      // ColorSwatchPickerItem is never a link.
+      render={props.render as any}
       ref={ref}
       id={color.toString('hexa')}
       textValue={color.getColorName(locale)}

package/src/ColorThumb.tsx

@@ -1,4 +1,4 @@
-import {ClassNameOrFunction, RenderProps, useRenderProps} from './utils';
+import {ClassNameOrFunction, dom, RenderProps, useRenderProps} from './utils';
 import {Color} from 'react-stately';
 import {filterDOMProps} from '@react-aria/utils';
 import {GlobalDOMAttributes, HoverEvents, RefObject} from '@react-types/shared';
@@ -91,7 +91,7 @@ export const ColorThumb = forwardRef(function ColorThumb(props: ColorThumbProps,
   delete DOMProps.id;
 
   return (
-    <div
+    <dom.div
       {...mergeProps(thumbProps, hoverProps, DOMProps)}
       {...renderProps}
       ref={ref}
@@ -103,6 +103,6 @@ export const ColorThumb = forwardRef(function ColorThumb(props: ColorThumbProps,
       <input ref={inputXRef} {...xInputProps} {...focusProps} />
       {yInputProps && <input ref={inputYRef} {...yInputProps} {...focusProps} />}
       {renderProps.children}
-    </div>
+    </dom.div>
   );
 });

package/src/ColorWheel.tsx

@@ -2,6 +2,7 @@ import {AriaColorWheelOptions, useColorWheel} from 'react-aria';
 import {
   ClassNameOrFunction,
   ContextValue,
+  dom,
   Provider,
   RenderProps,
   SlotProps,
@@ -63,7 +64,7 @@ export const ColorWheel = forwardRef(function ColorWheel(props: ColorWheelProps,
   delete DOMProps.id;
 
   return (
-    <div
+    <dom.div
       {...DOMProps}
       {...renderProps}
       ref={ref}
@@ -77,7 +78,7 @@ export const ColorWheel = forwardRef(function ColorWheel(props: ColorWheelProps,
         ]}>
         {renderProps.children}
       </Provider>
-    </div>
+    </dom.div>
   );
 });
 
@@ -112,7 +113,7 @@ export const ColorWheelTrack = forwardRef(function ColorWheelTrack(props: ColorW
   });
 
   return (
-    <div
+    <dom.div
       {...rest}
       {...renderProps}
       ref={ref}

package/src/ComboBox.tsx

@@ -14,6 +14,7 @@ import {ButtonContext} from './Button';
 import {
   ClassNameOrFunction,
   ContextValue,
+  dom,
   Provider,
   RACValidation,
   removeDataAttributes,
@@ -133,8 +134,8 @@ function ComboBoxInner<T extends object>({props, collection, comboBoxRef: ref}:
   let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';
   let {contains} = useFilter({sensitivity: 'base'});
   let state = useComboBoxState({
-    defaultFilter: props.defaultFilter || contains,
     ...props,
+    defaultFilter: props.defaultFilter || contains,
     // If props.items isn't provided, rely on collection filtering (aka listbox.items is provided or defaultItems provided to Combobox)
     items: props.items,
     children: undefined,
@@ -231,7 +232,7 @@ function ComboBoxInner<T extends object>({props, collection, comboBoxRef: ref}:
         [GroupContext, {isInvalid: validation.isInvalid, isDisabled: props.isDisabled || false}],
         [FieldErrorContext, validation]
       ]}>
-      <div
+      <dom.div
         {...DOMProps}
         {...renderProps}
         ref={ref}

package/src/DateField.tsx

@@ -13,6 +13,7 @@ import {AriaDateFieldProps, AriaTimeFieldProps, DateValue, HoverEvents, mergePro
 import {
   ClassNameOrFunction,
   ContextValue,
+  dom,
   Provider,
   RACValidation,
   removeDataAttributes,
@@ -135,7 +136,7 @@ export const DateField = /*#__PURE__*/ (forwardRef as forwardRefType)(function D
         }],
         [FieldErrorContext, validation]
       ]}>
-      <div
+      <dom.div
         {...DOMProps}
         {...renderProps}
         ref={ref}
@@ -208,7 +209,7 @@ export const TimeField = /*#__PURE__*/ (forwardRef as forwardRefType)(function T
         }],
         [FieldErrorContext, validation]
       ]}>
-      <div
+      <dom.div
         {...DOMProps}
         {...renderProps}
         ref={ref}
@@ -361,7 +362,7 @@ export interface DateSegmentRenderProps extends Omit<IDateSegment, 'isEditable'>
   type: DateSegmentType
 }
 
-export interface DateSegmentProps extends RenderProps<DateSegmentRenderProps>, HoverEvents, GlobalDOMAttributes<HTMLSpanElement> {
+export interface DateSegmentProps extends RenderProps<DateSegmentRenderProps, 'span'>, HoverEvents, GlobalDOMAttributes<HTMLSpanElement> {
   /**
    * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
    * @default 'react-aria-DateSegment'
@@ -398,7 +399,7 @@ export const DateSegment = /*#__PURE__*/ (forwardRef as forwardRefType)(function
   });
 
   return (
-    <span
+    <dom.span
       {...mergeProps(filterDOMProps(otherProps, {global: true}), segmentProps, focusProps, hoverProps)}
       {...renderProps}
       style={segmentProps.style}

package/src/DatePicker.tsx

@@ -15,6 +15,7 @@ import {CalendarContext, RangeCalendarContext} from './Calendar';
 import {
   ClassNameOrFunction,
   ContextValue,
+  dom,
   Provider,
   RACValidation,
   removeDataAttributes,
@@ -194,7 +195,7 @@ export const DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function
         }],
         [FieldErrorContext, validation]
       ]}>
-      <div
+      <dom.div
         {...mergeProps(DOMProps, renderProps, focusProps)}
         ref={ref}
         slot={props.slot || undefined}
@@ -309,7 +310,7 @@ export const DateRangePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(func
         }],
         [FieldErrorContext, validation]
       ]}>
-      <div
+      <dom.div
         {...mergeProps(DOMProps, renderProps, focusProps)}
         ref={ref}
         slot={props.slot || undefined}

package/src/Dialog.tsx

@@ -11,7 +11,7 @@
  */
 import {AriaDialogProps, useDialog, useId, useOverlayTrigger} from 'react-aria';
 import {ButtonContext} from './Button';
-import {ContextValue, DEFAULT_SLOT, Provider, SlotProps, StyleProps, useContextProps, useRenderProps} from './utils';
+import {ContextValue, DEFAULT_SLOT, dom, DOMRenderProps, Provider, SlotProps, StyleProps, useContextProps, useRenderProps} from './utils';
 import {filterDOMProps, mergeProps, useResizeObserver} from '@react-aria/utils';
 import {forwardRefType, GlobalDOMAttributes} from '@react-types/shared';
 import {HeadingContext} from './RSPContexts';
@@ -29,7 +29,7 @@ export interface DialogRenderProps {
   close: () => void
 }
 
-export interface DialogProps extends AriaDialogProps, StyleProps, SlotProps, GlobalDOMAttributes<HTMLElement> {
+export interface DialogProps extends AriaDialogProps, StyleProps, SlotProps, DOMRenderProps<'section', undefined>, GlobalDOMAttributes<HTMLElement> {
   /**
    * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element.
    * @default 'react-aria-Dialog'
@@ -130,8 +130,9 @@ export const Dialog = /*#__PURE__*/ (forwardRef as forwardRefType)(function Dial
   let DOMProps = filterDOMProps(props, {global: true});
 
   return (
-    <section
+    <dom.section
       {...mergeProps(DOMProps, renderProps, dialogProps)}
+      render={props.render}
       ref={ref}
       slot={props.slot || undefined}>
       <Provider
@@ -153,6 +154,6 @@ export const Dialog = /*#__PURE__*/ (forwardRef as forwardRefType)(function Dial
         ]}>
         {renderProps.children}
       </Provider>
-    </section>
+    </dom.section>
   );
 });

package/src/Disclosure.tsx

@@ -16,6 +16,7 @@ import {
   ClassNameOrFunction,
   ContextValue,
   DEFAULT_SLOT,
+  dom,
   Provider,
   RenderProps,
   SlotProps,
@@ -68,7 +69,7 @@ export const DisclosureGroup = forwardRef(function DisclosureGroup(props: Disclo
   let domProps = filterDOMProps(props, {global: true});
 
   return (
-    <div
+    <dom.div
       {...domProps}
       {...renderProps}
       ref={ref}
@@ -76,7 +77,7 @@ export const DisclosureGroup = forwardRef(function DisclosureGroup(props: Disclo
       <DisclosureGroupStateContext.Provider value={state}>
         {renderProps.children}
       </DisclosureGroupStateContext.Provider>
-    </div>
+    </dom.div>
   );
 });
 
@@ -186,14 +187,14 @@ export const Disclosure = /*#__PURE__*/ (forwardRef as forwardRefType)(function
         [InternalDisclosureContext, {panelProps, panelRef}],
         [DisclosureStateContext, state]
       ]}>
-      <div
+      <dom.div
         {...mergeProps(domProps, renderProps, focusWithinProps)}
         ref={ref}
         data-expanded={state.isExpanded || undefined}
         data-disabled={isDisabled || undefined}
         data-focus-visible-within={isFocusVisibleWithin || undefined}>
         {renderProps.children}
-      </div>
+      </dom.div>
     </Provider>
   );
 });
@@ -242,7 +243,7 @@ export const DisclosurePanel = /*#__PURE__*/ (forwardRef as forwardRefType)(func
   });
   let DOMProps = filterDOMProps(props, {global: true, labelable: true});
   return (
-    <div
+    <dom.div
       {...mergeProps(DOMProps, renderProps, panelProps, focusWithinProps)}
       ref={mergeRefs(ref, panelRef)}
       role={role}
@@ -253,6 +254,6 @@ export const DisclosurePanel = /*#__PURE__*/ (forwardRef as forwardRefType)(func
         ]}>
         {props.children}
       </Provider>
-    </div>
+    </dom.div>
   );
 });

package/src/DropZone.tsx

@@ -14,6 +14,7 @@ import {AriaLabelingProps, GlobalDOMAttributes, HoverEvents} from '@react-types/
 import {
   ClassNameOrFunction,
   ContextValue,
+  dom,
   Provider,
   RenderProps,
   SlotProps,
@@ -21,7 +22,7 @@ import {
   useRenderProps
 } from './utils';
 import {DropOptions, mergeProps, useButton, useClipboard, useDrop, useFocusRing, useHover, useLocalizedStringFormatter, VisuallyHidden} from 'react-aria';
-import {filterDOMProps, isFocusable, useLabels, useObjectRef, useSlotId} from '@react-aria/utils';
+import {filterDOMProps, isFocusable, nodeContains, useLabels, useObjectRef, useSlotId} from '@react-aria/utils';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import React, {createContext, ForwardedRef, forwardRef, useRef} from 'react';
@@ -110,14 +111,13 @@ export const DropZone = forwardRef(function DropZone(props: DropZoneProps, ref:
       values={[
         [TextContext, {id: textId, slot: 'label'}]
       ]}>
-      {/* eslint-disable-next-line */}
-      <div
+      <dom.div
         {...mergeProps(DOMProps, renderProps, dropProps, hoverProps)}
         slot={props.slot || undefined}
         ref={dropzoneRef}
         onClick={(e) => {
           let target = e.target as HTMLElement | null;
-          while (target && dropzoneRef.current?.contains(target)) {
+          while (target && nodeContains(dropzoneRef.current, target)) {
             if (isFocusable(target)) {
               break;
             } else if (target === dropzoneRef.current) {
@@ -139,7 +139,7 @@ export const DropZone = forwardRef(function DropZone(props: DropZoneProps, ref:
             ref={buttonRef} />
         </VisuallyHidden>
         {renderProps.children}
-      </div>
+      </dom.div>
     </Provider>
   );
 });

package/src/Form.tsx

@@ -10,13 +10,13 @@
  * governing permissions and limitations under the License.
  */
 
-import {ContextValue, DOMProps, useContextProps} from './utils';
+import {ContextValue, dom, DOMProps, DOMRenderProps, useContextProps} from './utils';
 import {FormValidationContext} from 'react-stately';
 import {GlobalDOMAttributes} from '@react-types/shared';
 import React, {createContext, ForwardedRef, forwardRef} from 'react';
 import {FormProps as SharedFormProps} from '@react-types/form';
 
-export interface FormProps extends SharedFormProps, DOMProps, GlobalDOMAttributes<HTMLFormElement> {
+export interface FormProps extends SharedFormProps, DOMProps, DOMRenderProps<'form', undefined>, GlobalDOMAttributes<HTMLFormElement> {
   /**
    * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element.
    * @default 'react-aria-Form'
@@ -41,12 +41,12 @@ export const Form = forwardRef(function Form(props: FormProps, ref: ForwardedRef
   [props, ref] = useContextProps(props, ref, FormContext);
   let {validationErrors, validationBehavior = 'native', children, className, ...domProps} = props;
   return (
-    <form noValidate={validationBehavior !== 'native'} {...domProps} ref={ref} className={className || 'react-aria-Form'}>
+    <dom.form noValidate={validationBehavior !== 'native'} {...domProps} ref={ref} className={className || 'react-aria-Form'}>
       <FormContext.Provider value={{...props, validationBehavior}}>
         <FormValidationContext.Provider value={validationErrors ?? {}}>
           {children}
         </FormValidationContext.Provider>
       </FormContext.Provider>
-    </form>
+    </dom.form>
   );
 });