react-aria-components 1.15.1 → 1.16.0

package/dist/utils.module.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/react-aria-components/src/utils.tsx"],"sourcesContent":["/*\n * Copyright 2022 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaLabelingProps, RefObject,  DOMProps as SharedDOMProps} from '@react-types/shared';\nimport {mergeProps, mergeRefs, useLayoutEffect, useObjectRef} from '@react-aria/utils';\nimport React, {AllHTMLAttributes, AnchorHTMLAttributes, Context, CSSProperties, DetailedHTMLProps, ForwardedRef, forwardRef, JSX, ReactElement, ReactNode, RefCallback, useCallback, useContext, useMemo, useRef, useState} from 'react';\n\nexport const DEFAULT_SLOT = Symbol('default');\n\ninterface SlottedValue<T> {\n  slots?: Record<string | symbol, T>\n}\n\nexport type SlottedContextValue<T> = SlottedValue<T> | T | null | undefined;\nexport type ContextValue<T, E> = SlottedContextValue<WithRef<T, E>>;\n\ntype ProviderValue<T> = [Context<T>, T];\ntype ProviderValues<A, B, C, D, E, F, G, H, I, J, K> =\n  | [ProviderValue<A>]\n  | [ProviderValue<A>, ProviderValue<B>]\n  | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>]\n  | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>]\n  | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>, ProviderValue<E>]\n  | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>, ProviderValue<E>, ProviderValue<F>]\n  | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>, ProviderValue<E>, ProviderValue<F>, ProviderValue<G>]\n  | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>, ProviderValue<E>, ProviderValue<F>, ProviderValue<G>, ProviderValue<H>]\n  | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>, ProviderValue<E>, ProviderValue<F>, ProviderValue<G>, ProviderValue<H>, ProviderValue<I>]\n  | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>, ProviderValue<E>, ProviderValue<F>, ProviderValue<G>, ProviderValue<H>, ProviderValue<I>, ProviderValue<J>]\n  | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>, ProviderValue<E>, ProviderValue<F>, ProviderValue<G>, ProviderValue<H>, ProviderValue<I>, ProviderValue<J>, ProviderValue<K>];\n\ninterface ProviderProps<A, B, C, D, E, F, G, H, I, J, K> {\n  values: ProviderValues<A, B, C, D, E, F, G, H, I, J, K>,\n  children: ReactNode\n}\n\nexport function Provider<A, B, C, D, E, F, G, H, I, J, K>({values, children}: ProviderProps<A, B, C, D, E, F, G, H, I, J, K>): JSX.Element {\n  for (let [Context, value] of values) {\n    // @ts-ignore\n    children = <Context.Provider value={value}>{children}</Context.Provider>;\n  }\n\n  return children as JSX.Element;\n}\n\nexport interface StyleProps {\n  /** The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. */\n  className?: string,\n  /** The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. */\n  style?: CSSProperties\n}\n\nexport interface DOMProps extends StyleProps, SharedDOMProps {\n  /** The children of the component. */\n  children?: ReactNode\n}\n\nexport type ClassNameOrFunction<T> = string | ((values: T & {defaultClassName: string | undefined}) => string);\ntype StyleOrFunction<T> = CSSProperties | ((values: T & {defaultStyle: CSSProperties}) => CSSProperties | undefined);\n\nexport interface StyleRenderProps<T, E extends keyof React.JSX.IntrinsicElements = 'div'> extends DOMRenderProps<E, T> {\n  /** 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. */\n  className?: ClassNameOrFunction<T>,\n  /** The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. */\n  style?: StyleOrFunction<T>\n}\n\nexport type ChildrenOrFunction<T> = ReactNode | ((values: T & {defaultChildren: ReactNode | undefined}) => ReactNode);\n\nexport interface RenderProps<T, E extends keyof React.JSX.IntrinsicElements = 'div'> extends StyleRenderProps<T, E> {\n  /** The children of the component. A function may be provided to alter the children based on component state. */\n  children?: ChildrenOrFunction<T>\n}\n\ninterface RenderPropsHookOptions<T, E extends keyof React.JSX.IntrinsicElements> extends RenderProps<T, E>, SharedDOMProps, AriaLabelingProps {\n  values: T,\n  defaultChildren?: ReactNode,\n  defaultClassName?: string,\n  defaultStyle?: CSSProperties\n}\n\ninterface RenderPropsHookRetVal<T, E extends keyof React.JSX.IntrinsicElements> {\n  className?: string,\n  style?: CSSProperties,\n  children?: ReactNode,\n  'data-rac': string,\n  render?: DOMRenderFunction<E, T>\n}\n\nexport function useRenderProps<T, E extends keyof React.JSX.IntrinsicElements>(props: RenderPropsHookOptions<T, E>): RenderPropsHookRetVal<T, E> {\n  let {\n    className,\n    style,\n    children,\n    defaultClassName = undefined,\n    defaultChildren = undefined,\n    defaultStyle,\n    values,\n    render\n  } = props;\n\n  return useMemo(() => {\n    let computedClassName: string | undefined;\n    let computedStyle: React.CSSProperties | undefined;\n    let computedChildren: React.ReactNode | undefined;\n\n    if (typeof className === 'function') {\n      computedClassName = className({...values, defaultClassName});\n    } else {\n      computedClassName = className;\n    }\n\n    if (typeof style === 'function') {\n      computedStyle = style({...values, defaultStyle: defaultStyle || {}});\n    } else {\n      computedStyle = style;\n    }\n\n    if (typeof children === 'function') {\n      computedChildren = children({...values, defaultChildren});\n    } else if (children == null) {\n      computedChildren = defaultChildren;\n    } else {\n      computedChildren = children;\n    }\n\n    return {\n      className: computedClassName ?? defaultClassName,\n      style: (computedStyle || defaultStyle) ? {...defaultStyle, ...computedStyle} : undefined,\n      children: computedChildren ?? defaultChildren,\n      'data-rac': '',\n      render: render ? (props => render(props, values)) : undefined\n    };\n  }, [className, style, children, defaultClassName, defaultChildren, defaultStyle, values, render]);\n}\n\n/**\n * A helper function that accepts a user-provided render prop value (either a static value or a function),\n * and combines it with another value to create a final result.\n */\nexport function composeRenderProps<T, U, V extends T>(\n  // https://stackoverflow.com/questions/60898079/typescript-type-t-or-function-t-usage\n  value: T extends any ? (T | ((renderProps: U) => V)) : never,\n  wrap: (prevValue: T, renderProps: U) => V\n): (renderProps: U) => V {\n  return (renderProps) => wrap(typeof value === 'function' ? value(renderProps) : value, renderProps);\n}\n\nexport type WithRef<T, E> = T & {ref?: ForwardedRef<E>};\nexport interface SlotProps {\n  /**\n   * A slot name for the component. Slots allow the component to receive props from a parent component.\n   * An explicit `null` value indicates that the local props completely override all props received from a parent.\n   */\n  slot?: string | null\n}\n\nexport function useSlottedContext<T>(context: Context<SlottedContextValue<T>>, slot?: string | null): T | null | undefined {\n  let ctx = useContext(context);\n  if (slot === null) {\n    // An explicit `null` slot means don't use context.\n    return null;\n  }\n  if (ctx && typeof ctx === 'object' && 'slots' in ctx && ctx.slots) {\n    let slotKey = slot || DEFAULT_SLOT;\n    if (!ctx.slots[slotKey]) {\n      let availableSlots = new Intl.ListFormat().format(Object.keys(ctx.slots).map(p => `\"${p}\"`));\n      let errorMessage = slot ? `Invalid slot \"${slot}\".` : 'A slot prop is required.';\n\n      throw new Error(`${errorMessage} Valid slot names are ${availableSlots}.`);\n    }\n    return ctx.slots[slotKey];\n  }\n  // @ts-ignore\n  return ctx;\n}\n\nexport function useContextProps<T, U extends SlotProps, E extends Element>(props: T & SlotProps, ref: ForwardedRef<E> | undefined, context: Context<ContextValue<U, E>>): [T, RefObject<E | null>] {\n  let ctx = useSlottedContext(context, props.slot) || {};\n  let {ref: contextRef, ...contextProps} = ctx as any;\n  let mergedRef = useObjectRef(useMemo(() => mergeRefs(ref, contextRef), [ref, contextRef]));\n  let mergedProps = mergeProps(contextProps, props) as unknown as T;\n\n  // mergeProps does not merge `style`. Adding this there might be a breaking change.\n  if (\n    'style' in contextProps &&\n    contextProps.style &&\n    'style' in props &&\n    props.style\n  ) {\n    if (typeof contextProps.style === 'function' || typeof props.style === 'function') {\n      // @ts-ignore\n      mergedProps.style = (renderProps) => {\n        let contextStyle = typeof contextProps.style === 'function' ? contextProps.style(renderProps) : contextProps.style;\n        let defaultStyle = {...renderProps.defaultStyle, ...contextStyle};\n        let style = typeof props.style === 'function'\n          ? props.style({...renderProps, defaultStyle})\n          : props.style;\n        return {...defaultStyle, ...style};\n      };\n    } else {\n      // @ts-ignore\n      mergedProps.style = {...contextProps.style, ...props.style};\n    }\n  }\n\n  return [mergedProps, mergedRef];\n}\n\nexport function useSlot(initialState: boolean | (() => boolean) = true): [RefCallback<Element>, boolean] {\n  // Initial state is typically based on the parent having an aria-label or aria-labelledby.\n  // If it does, this value should be false so that we don't update the state and cause a rerender when we go through the layoutEffect\n  let [hasSlot, setHasSlot] = useState(initialState);\n  let hasRun = useRef(false);\n\n  // A callback ref which will run when the slotted element mounts.\n  // This should happen before the useLayoutEffect below.\n  let ref = useCallback(el => {\n    hasRun.current = true;\n    setHasSlot(!!el);\n  }, []);\n\n  // If the callback hasn't been called, then reset to false.\n  useLayoutEffect(() => {\n    if (!hasRun.current) {\n      setHasSlot(false);\n    }\n  }, []);\n\n  return [ref, hasSlot];\n}\n\n/**\n * Filters out `data-*` attributes to keep them from being passed down and duplicated.\n * @param props\n */\nexport function removeDataAttributes<T>(props: T): T {\n  const prefix = /^(data-.*)$/;\n  let filteredProps = {} as T;\n\n  for (const prop in props) {\n    if (!prefix.test(prop)) {\n      filteredProps[prop] = props[prop];\n    }\n  }\n\n  return filteredProps;\n}\n\n// Override base type to change the default.\nexport interface RACValidation {\n  /**\n   * Whether to use native HTML form validation to prevent form submission\n   * when the value is missing or invalid, or mark the field as required\n   * or invalid via ARIA.\n   * @default 'native'\n   */\n  validationBehavior?: 'native' | 'aria'\n}\n\nexport type DOMRenderFunction<E extends keyof React.JSX.IntrinsicElements, T> = (props: React.JSX.IntrinsicElements[E], renderProps: T) => ReactElement;\nexport interface DOMRenderProps<E extends keyof React.JSX.IntrinsicElements, T> {\n  /**\n   * Overrides the default DOM element with a custom render function.\n   * This allows rendering existing components with built-in styles and behaviors\n   * such as router links, animation libraries, and pre-styled components.\n   * \n   * Requirements:\n   * \n   * * You must render the expected element type (e.g. if `<button>` is expected, you cannot render an `<a>`).\n   * * Only a single root DOM element can be rendered (no fragments).\n   * * You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.\n   */\n  render?: DOMRenderFunction<E, T>\n}\n\n// Makes `href` required in AnchorHTMLAttributes\ntype LinkWithRequiredHref = Required<Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>> & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>; \n\n// Same as DOMRenderProps but specific for the case where the element could be a 'a' or 'div' element.\nexport interface PossibleLinkDOMRenderProps<Fallback extends keyof React.JSX.IntrinsicElements, T> {\n  /**\n   * Overrides the default DOM element with a custom render function.\n   * This allows rendering existing components with built-in styles and behaviors\n   * such as router links, animation libraries, and pre-styled components.\n   * \n   * Note: You can check if `'href' in props` in order to tell whether to render an `<a>` element.\n   * \n   * Requirements:\n   * \n   * * You must render the expected element type (e.g. if `<a>` is expected, you cannot render a `<button>`).\n   * * Only a single root DOM element can be rendered (no fragments).\n   * * You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.\n   */\n  render?: (props: DetailedHTMLProps<LinkWithRequiredHref, HTMLAnchorElement> | React.JSX.IntrinsicElements[Fallback], renderProps: T) => ReactElement\n}\n\nfunction DOMElement(ElementType: string, props: DOMRenderProps<any, any> & AllHTMLAttributes<HTMLElement>, forwardedRef: ForwardedRef<HTMLElement>) {\n  let {render, ...otherProps} = props;\n  let elementRef = useRef<HTMLElement | null>(null);\n  let ref = useMemo(() => mergeRefs(forwardedRef, elementRef), [forwardedRef, elementRef]);\n\n  useLayoutEffect(() => {\n    if (process.env.NODE_ENV !== 'production' && render) {\n      if (!elementRef.current) {\n        console.warn('Ref was not connected to DOM element returned by custom `render` function. Did you forget to pass through or merge the `ref`?');\n      } else if (elementRef.current.localName !== ElementType) {\n        console.warn(`Unexpected DOM element returned by custom \\`render\\` function. Expected <${ElementType}>, got <${elementRef.current.localName}>. This may break the component behavior and accessibility.`);\n      }\n    }\n  }, [ElementType, render]);\n\n  let domProps: any = {...otherProps, ref};\n  if (render) {\n    return render(domProps, undefined);\n  }\n\n  return <ElementType {...domProps} />;\n}\n\ntype DOMComponents = {\n  [E in keyof React.JSX.IntrinsicElements]: (props: DOMRenderProps<E, any> & React.JSX.IntrinsicElements[E]) => ReactElement\n};\n\nconst domComponentCache = {};\n\n// Dynamically generates and caches components for each DOM element (e.g. `dom.button`).\nexport const dom = new Proxy({}, {\n  get(target, elementType) {\n    if (typeof elementType !== 'string') {\n      return undefined;\n    }\n\n    let res = domComponentCache[elementType];\n    if (!res) {\n      res = forwardRef(DOMElement.bind(null, elementType));\n      domComponentCache[elementType] = res;\n    }\n\n    return res;\n  }\n}) as DOMComponents;\n"],"names":[],"version":3,"file":"utils.module.js.map"}
+{"mappings":"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","sources":["packages/react-aria-components/src/utils.tsx"],"sourcesContent":["/*\n * Copyright 2022 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaLabelingProps, RefObject,  DOMProps as SharedDOMProps} from '@react-types/shared';\nimport {mergeProps, mergeRefs, useLayoutEffect, useObjectRef} from '@react-aria/utils';\nimport React, {AllHTMLAttributes, AnchorHTMLAttributes, Context, CSSProperties, DetailedHTMLProps, ForwardedRef, forwardRef, JSX, ReactElement, ReactNode, RefCallback, useCallback, useContext, useMemo, useRef, useState} from 'react';\n\nexport const DEFAULT_SLOT = Symbol('default');\n\ninterface SlottedValue<T> {\n  slots?: Record<string | symbol, T>\n}\n\nexport type SlottedContextValue<T> = SlottedValue<T> | T | null | undefined;\nexport type ContextValue<T, E> = SlottedContextValue<WithRef<T, E>>;\n\ntype ProviderValue<T> = [Context<T>, T];\ntype ProviderValues<A, B, C, D, E, F, G, H, I, J, K, L> =\n  | [ProviderValue<A>]\n  | [ProviderValue<A>, ProviderValue<B>]\n  | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>]\n  | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>]\n  | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>, ProviderValue<E>]\n  | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>, ProviderValue<E>, ProviderValue<F>]\n  | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>, ProviderValue<E>, ProviderValue<F>, ProviderValue<G>]\n  | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>, ProviderValue<E>, ProviderValue<F>, ProviderValue<G>, ProviderValue<H>]\n  | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>, ProviderValue<E>, ProviderValue<F>, ProviderValue<G>, ProviderValue<H>, ProviderValue<I>]\n  | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>, ProviderValue<E>, ProviderValue<F>, ProviderValue<G>, ProviderValue<H>, ProviderValue<I>, ProviderValue<J>]\n  | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>, ProviderValue<E>, ProviderValue<F>, ProviderValue<G>, ProviderValue<H>, ProviderValue<I>, ProviderValue<J>, ProviderValue<K>]\n  | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>, ProviderValue<E>, ProviderValue<F>, ProviderValue<G>, ProviderValue<H>, ProviderValue<I>, ProviderValue<J>, ProviderValue<K>, ProviderValue<L>];\n\ninterface ProviderProps<A, B, C, D, E, F, G, H, I, J, K, L> {\n  values: ProviderValues<A, B, C, D, E, F, G, H, I, J, K, L>,\n  children: ReactNode\n}\n\nexport function Provider<A, B, C, D, E, F, G, H, I, J, K, L>({values, children}: ProviderProps<A, B, C, D, E, F, G, H, I, J, K, L>): JSX.Element {\n  for (let [Context, value] of values) {\n    // @ts-ignore\n    children = <Context.Provider value={value}>{children}</Context.Provider>;\n  }\n\n  return children as JSX.Element;\n}\n\nexport interface StyleProps {\n  /** The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. */\n  className?: string,\n  /** The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. */\n  style?: CSSProperties\n}\n\nexport interface DOMProps extends StyleProps, SharedDOMProps {\n  /** The children of the component. */\n  children?: ReactNode\n}\n\nexport type ClassNameOrFunction<T> = string | ((values: T & {defaultClassName: string | undefined}) => string);\ntype StyleOrFunction<T> = CSSProperties | ((values: T & {defaultStyle: CSSProperties}) => CSSProperties | undefined);\n\nexport interface StyleRenderProps<T, E extends keyof React.JSX.IntrinsicElements = 'div'> extends DOMRenderProps<E, T> {\n  /** 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. */\n  className?: ClassNameOrFunction<T>,\n  /** The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. */\n  style?: StyleOrFunction<T>\n}\n\nexport type ChildrenOrFunction<T> = ReactNode | ((values: T & {defaultChildren: ReactNode | undefined}) => ReactNode);\n\nexport interface RenderProps<T, E extends keyof React.JSX.IntrinsicElements = 'div'> extends StyleRenderProps<T, E> {\n  /** The children of the component. A function may be provided to alter the children based on component state. */\n  children?: ChildrenOrFunction<T>\n}\n\ninterface RenderPropsHookOptions<T, E extends keyof React.JSX.IntrinsicElements> extends RenderProps<T, E>, SharedDOMProps, AriaLabelingProps {\n  values: T,\n  defaultChildren?: ReactNode,\n  defaultClassName?: string,\n  defaultStyle?: CSSProperties\n}\n\ninterface RenderPropsHookRetVal<T, E extends keyof React.JSX.IntrinsicElements> {\n  className?: string,\n  style?: CSSProperties,\n  children?: ReactNode,\n  'data-rac': string,\n  render?: DOMRenderFunction<E, T>\n}\n\nexport function useRenderProps<T, E extends keyof React.JSX.IntrinsicElements>(props: RenderPropsHookOptions<T, E>): RenderPropsHookRetVal<T, E> {\n  let {\n    className,\n    style,\n    children,\n    defaultClassName = undefined,\n    defaultChildren = undefined,\n    defaultStyle,\n    values,\n    render\n  } = props;\n\n  return useMemo(() => {\n    let computedClassName: string | undefined;\n    let computedStyle: React.CSSProperties | undefined;\n    let computedChildren: React.ReactNode | undefined;\n\n    if (typeof className === 'function') {\n      computedClassName = className({...values, defaultClassName});\n    } else {\n      computedClassName = className;\n    }\n\n    if (typeof style === 'function') {\n      computedStyle = style({...values, defaultStyle: defaultStyle || {}});\n    } else {\n      computedStyle = style;\n    }\n\n    if (typeof children === 'function') {\n      computedChildren = children({...values, defaultChildren});\n    } else if (children == null) {\n      computedChildren = defaultChildren;\n    } else {\n      computedChildren = children;\n    }\n\n    return {\n      className: computedClassName ?? defaultClassName,\n      style: (computedStyle || defaultStyle) ? {...defaultStyle, ...computedStyle} : undefined,\n      children: computedChildren ?? defaultChildren,\n      'data-rac': '',\n      render: render ? (props => render(props, values)) : undefined\n    };\n  }, [className, style, children, defaultClassName, defaultChildren, defaultStyle, values, render]);\n}\n\n/**\n * A helper function that accepts a user-provided render prop value (either a static value or a function),\n * and combines it with another value to create a final result.\n */\nexport function composeRenderProps<T, U, V extends T>(\n  // https://stackoverflow.com/questions/60898079/typescript-type-t-or-function-t-usage\n  value: T extends any ? (T | ((renderProps: U) => V)) : never,\n  wrap: (prevValue: T, renderProps: U) => V\n): (renderProps: U) => V {\n  return (renderProps) => wrap(typeof value === 'function' ? value(renderProps) : value, renderProps);\n}\n\nexport type WithRef<T, E> = T & {ref?: ForwardedRef<E>};\nexport interface SlotProps {\n  /**\n   * A slot name for the component. Slots allow the component to receive props from a parent component.\n   * An explicit `null` value indicates that the local props completely override all props received from a parent.\n   */\n  slot?: string | null\n}\n\nexport function useSlottedContext<T>(context: Context<SlottedContextValue<T>>, slot?: string | null): T | null | undefined {\n  let ctx = useContext(context);\n  if (slot === null) {\n    // An explicit `null` slot means don't use context.\n    return null;\n  }\n  if (ctx && typeof ctx === 'object' && 'slots' in ctx && ctx.slots) {\n    let slotKey = slot || DEFAULT_SLOT;\n    if (!ctx.slots[slotKey]) {\n      let availableSlots = new Intl.ListFormat().format(Object.keys(ctx.slots).map(p => `\"${p}\"`));\n      let errorMessage = slot ? `Invalid slot \"${slot}\".` : 'A slot prop is required.';\n\n      throw new Error(`${errorMessage} Valid slot names are ${availableSlots}.`);\n    }\n    return ctx.slots[slotKey];\n  }\n  // @ts-ignore\n  return ctx;\n}\n\nexport function useContextProps<T, U extends SlotProps, E extends Element>(props: T & SlotProps, ref: ForwardedRef<E> | undefined, context: Context<ContextValue<U, E>>): [T, RefObject<E | null>] {\n  let ctx = useSlottedContext(context, props.slot) || {};\n  let {ref: contextRef, ...contextProps} = ctx as any;\n  let mergedRef = useObjectRef(useMemo(() => mergeRefs(ref, contextRef), [ref, contextRef]));\n  let mergedProps = mergeProps(contextProps, props) as unknown as T;\n\n  // mergeProps does not merge `style`. Adding this there might be a breaking change.\n  if (\n    'style' in contextProps &&\n    contextProps.style &&\n    'style' in props &&\n    props.style\n  ) {\n    if (typeof contextProps.style === 'function' || typeof props.style === 'function') {\n      // @ts-ignore\n      mergedProps.style = (renderProps) => {\n        let contextStyle = typeof contextProps.style === 'function' ? contextProps.style(renderProps) : contextProps.style;\n        let defaultStyle = {...renderProps.defaultStyle, ...contextStyle};\n        let style = typeof props.style === 'function'\n          ? props.style({...renderProps, defaultStyle})\n          : props.style;\n        return {...defaultStyle, ...style};\n      };\n    } else {\n      // @ts-ignore\n      mergedProps.style = {...contextProps.style, ...props.style};\n    }\n  }\n\n  return [mergedProps, mergedRef];\n}\n\nexport function useSlot(initialState: boolean | (() => boolean) = true): [RefCallback<Element>, boolean] {\n  // Initial state is typically based on the parent having an aria-label or aria-labelledby.\n  // If it does, this value should be false so that we don't update the state and cause a rerender when we go through the layoutEffect\n  let [hasSlot, setHasSlot] = useState(initialState);\n  let hasRun = useRef(false);\n\n  // A callback ref which will run when the slotted element mounts.\n  // This should happen before the useLayoutEffect below.\n  let ref = useCallback(el => {\n    hasRun.current = true;\n    setHasSlot(!!el);\n  }, []);\n\n  // If the callback hasn't been called, then reset to false.\n  useLayoutEffect(() => {\n    if (!hasRun.current) {\n      setHasSlot(false);\n    }\n  }, []);\n\n  return [ref, hasSlot];\n}\n\n/**\n * Filters out `data-*` attributes to keep them from being passed down and duplicated.\n * @param props\n */\nexport function removeDataAttributes<T>(props: T): T {\n  const prefix = /^(data-.*)$/;\n  let filteredProps = {} as T;\n\n  for (const prop in props) {\n    if (!prefix.test(prop)) {\n      filteredProps[prop] = props[prop];\n    }\n  }\n\n  return filteredProps;\n}\n\n// Override base type to change the default.\nexport interface RACValidation {\n  /**\n   * Whether to use native HTML form validation to prevent form submission\n   * when the value is missing or invalid, or mark the field as required\n   * or invalid via ARIA.\n   * @default 'native'\n   */\n  validationBehavior?: 'native' | 'aria'\n}\n\nexport type DOMRenderFunction<E extends keyof React.JSX.IntrinsicElements, T> = (props: React.JSX.IntrinsicElements[E], renderProps: T) => ReactElement;\nexport interface DOMRenderProps<E extends keyof React.JSX.IntrinsicElements, T> {\n  /**\n   * Overrides the default DOM element with a custom render function.\n   * This allows rendering existing components with built-in styles and behaviors\n   * such as router links, animation libraries, and pre-styled components.\n   * \n   * Requirements:\n   * \n   * * You must render the expected element type (e.g. if `<button>` is expected, you cannot render an `<a>`).\n   * * Only a single root DOM element can be rendered (no fragments).\n   * * You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.\n   */\n  render?: DOMRenderFunction<E, T>\n}\n\n// Makes `href` required in AnchorHTMLAttributes\ntype LinkWithRequiredHref = Required<Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>> & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>; \n\n// Same as DOMRenderProps but specific for the case where the element could be a 'a' or 'div' element.\nexport interface PossibleLinkDOMRenderProps<Fallback extends keyof React.JSX.IntrinsicElements, T> {\n  /**\n   * Overrides the default DOM element with a custom render function.\n   * This allows rendering existing components with built-in styles and behaviors\n   * such as router links, animation libraries, and pre-styled components.\n   * \n   * Note: You can check if `'href' in props` in order to tell whether to render an `<a>` element.\n   * \n   * Requirements:\n   * \n   * * You must render the expected element type (e.g. if `<a>` is expected, you cannot render a `<button>`).\n   * * Only a single root DOM element can be rendered (no fragments).\n   * * You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.\n   */\n  render?: (props: DetailedHTMLProps<LinkWithRequiredHref, HTMLAnchorElement> | React.JSX.IntrinsicElements[Fallback], renderProps: T) => ReactElement\n}\n\nfunction DOMElement(ElementType: string, props: DOMRenderProps<any, any> & AllHTMLAttributes<HTMLElement>, forwardedRef: ForwardedRef<HTMLElement>) {\n  let {render, ...otherProps} = props;\n  let elementRef = useRef<HTMLElement | null>(null);\n  let ref = useMemo(() => mergeRefs(forwardedRef, elementRef), [forwardedRef, elementRef]);\n\n  useLayoutEffect(() => {\n    if (process.env.NODE_ENV !== 'production' && render) {\n      if (!elementRef.current) {\n        console.warn('Ref was not connected to DOM element returned by custom `render` function. Did you forget to pass through or merge the `ref`?');\n      } else if (elementRef.current.localName !== ElementType) {\n        console.warn(`Unexpected DOM element returned by custom \\`render\\` function. Expected <${ElementType}>, got <${elementRef.current.localName}>. This may break the component behavior and accessibility.`);\n      }\n    }\n  }, [ElementType, render]);\n\n  let domProps: any = {...otherProps, ref};\n  if (render) {\n    return render(domProps, undefined);\n  }\n\n  return <ElementType {...domProps} />;\n}\n\ntype DOMComponents = {\n  [E in keyof React.JSX.IntrinsicElements]: (props: DOMRenderProps<E, any> & React.JSX.IntrinsicElements[E]) => ReactElement\n};\n\nconst domComponentCache = {};\n\n// Dynamically generates and caches components for each DOM element (e.g. `dom.button`).\nexport const dom = new Proxy({}, {\n  get(target, elementType) {\n    if (typeof elementType !== 'string') {\n      return undefined;\n    }\n\n    let res = domComponentCache[elementType];\n    if (!res) {\n      res = forwardRef(DOMElement.bind(null, elementType));\n      domComponentCache[elementType] = res;\n    }\n\n    return res;\n  }\n}) as DOMComponents;\n"],"names":[],"version":3,"file":"utils.module.js.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-aria-components",
-  "version": "1.15.1",
+  "version": "1.16.0",
   "description": "A library of styleable components built using React Aria",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -41,34 +41,34 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@internationalized/date": "^3.11.0",
+    "@internationalized/date": "^3.12.0",
     "@internationalized/string": "^3.2.7",
-    "@react-aria/autocomplete": "3.0.0-rc.5",
-    "@react-aria/collections": "^3.0.2",
-    "@react-aria/dnd": "^3.11.5",
-    "@react-aria/focus": "^3.21.4",
-    "@react-aria/interactions": "^3.27.0",
+    "@react-aria/autocomplete": "3.0.0-rc.6",
+    "@react-aria/collections": "^3.0.3",
+    "@react-aria/dnd": "^3.11.6",
+    "@react-aria/focus": "^3.21.5",
+    "@react-aria/interactions": "^3.27.1",
     "@react-aria/live-announcer": "^3.4.4",
-    "@react-aria/overlays": "^3.31.1",
+    "@react-aria/overlays": "^3.31.2",
     "@react-aria/ssr": "^3.9.10",
-    "@react-aria/textfield": "^3.18.4",
-    "@react-aria/toolbar": "3.0.0-beta.23",
-    "@react-aria/utils": "^3.33.0",
-    "@react-aria/virtualizer": "^4.1.12",
+    "@react-aria/textfield": "^3.18.5",
+    "@react-aria/toolbar": "3.0.0-beta.24",
+    "@react-aria/utils": "^3.33.1",
+    "@react-aria/virtualizer": "^4.1.13",
     "@react-stately/autocomplete": "3.0.0-beta.4",
-    "@react-stately/layout": "^4.5.3",
-    "@react-stately/selection": "^3.20.8",
-    "@react-stately/table": "^3.15.3",
+    "@react-stately/layout": "^4.6.0",
+    "@react-stately/selection": "^3.20.9",
+    "@react-stately/table": "^3.15.4",
     "@react-stately/utils": "^3.11.0",
-    "@react-stately/virtualizer": "^4.4.5",
-    "@react-types/form": "^3.7.17",
-    "@react-types/grid": "^3.3.7",
-    "@react-types/shared": "^3.33.0",
-    "@react-types/table": "^3.13.5",
+    "@react-stately/virtualizer": "^4.4.6",
+    "@react-types/form": "^3.7.18",
+    "@react-types/grid": "^3.3.8",
+    "@react-types/shared": "^3.33.1",
+    "@react-types/table": "^3.13.6",
     "@swc/helpers": "^0.5.0",
     "client-only": "^0.0.1",
-    "react-aria": "^3.46.0",
-    "react-stately": "^3.44.0",
+    "react-aria": "^3.47.0",
+    "react-stately": "^3.45.0",
     "use-sync-external-store": "^1.6.0"
   },
   "peerDependencies": {
@@ -81,5 +81,5 @@
   "devDependencies": {
     "@tailwindcss/postcss": "^4.0.0"
   },
-  "gitHead": "5b4cb59a80023399c3a3f6340860a681c3b5b928"
+  "gitHead": "8df187370053aa35f553cb388ad670f65e1ab371"
 }

package/src/Button.tsx

@@ -168,11 +168,13 @@ export const Button = /*#__PURE__*/ createHideableComponent(function Button(prop
   );
 });
 
+// Events to preserve when isPending is true (for tooltips and other overlays)
+const PRESERVED_EVENT_PATTERN = /Focus|Blur|Hover|Pointer(Enter|Leave|Over|Out)|Mouse(Enter|Leave|Over|Out)/;
+
 function useDisableInteractions(props, isPending) {
-  // Don't allow interaction while isPending is true
   if (isPending) {
     for (const key in props) {
-      if (key.startsWith('on') && !(key.includes('Focus') || key.includes('Blur'))) {
+      if (key.startsWith('on') && !PRESERVED_EVENT_PATTERN.test(key)) {
         props[key] = undefined;
       }
     }

package/src/Collection.tsx

@@ -159,6 +159,12 @@ function useCollectionRender(
     items: parent ? collection.getChildren!(parent.key) : collection,
     dependencies: [renderDropIndicator],
     children(node) {
+      // Return a empty fragment since we don't want to render the content twice
+      // If we don't skip the content node here, we end up rendering them twice in a Tree since we also render the content node in TreeItem
+      if (node.type === 'content') {
+        return <></>;
+      }
+
       let rendered = node.render!(node);
       if (!renderDropIndicator || node.type !== 'item') {
         return rendered;

package/src/ComboBox.tsx

@@ -9,7 +9,7 @@
  * 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 {AriaComboBoxProps, useComboBox, useFilter, useListFormatter} from 'react-aria';
 import {ButtonContext} from './Button';
 import {
   ClassNameOrFunction,
@@ -26,20 +26,22 @@ import {
   useSlottedContext
 } from './utils';
 import {Collection, ComboBoxState, Node, useComboBoxState} from 'react-stately';
-import {CollectionBuilder} from '@react-aria/collections';
+import {CollectionBuilder, createHideableComponent} from '@react-aria/collections';
 import {FieldErrorContext} from './FieldError';
 import {filterDOMProps, useResizeObserver} from '@react-aria/utils';
 import {FormContext} from './Form';
-import {forwardRefType, GlobalDOMAttributes, RefObject} from '@react-types/shared';
+import {forwardRefType, GlobalDOMAttributes, Key, RefObject} from '@react-types/shared';
 import {GroupContext} from './Group';
 import {InputContext} from './Input';
 import {LabelContext} from './Label';
 import {ListBoxContext, ListStateContext} from './ListBox';
 import {OverlayTriggerStateContext} from './Dialog';
 import {PopoverContext} from './Popover';
-import React, {createContext, ForwardedRef, forwardRef, useCallback, useMemo, useRef, useState} from 'react';
+import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, ReactElement, ReactNode, useCallback, useContext, useMemo, useRef, useState} from 'react';
 import {TextContext} from './Text';
 
+type SelectionMode = 'single' | 'multiple';
+
 export interface ComboBoxRenderProps {
   /**
    * Whether the combobox is currently open.
@@ -63,7 +65,7 @@ export interface ComboBoxRenderProps {
   isRequired: boolean
 }
 
-export interface ComboBoxProps<T extends object> extends Omit<AriaComboBoxProps<T>, 'children' | 'placeholder' | 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<ComboBoxRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {
+export interface ComboBoxProps<T extends object, M extends SelectionMode = 'single'> extends Omit<AriaComboBoxProps<T, M>, 'children' | 'placeholder' | 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<ComboBoxRenderProps>, 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-ComboBox'
@@ -81,13 +83,13 @@ export interface ComboBoxProps<T extends object> extends Omit<AriaComboBoxProps<
   allowsEmptyCollection?: boolean
 }
 
-export const ComboBoxContext = createContext<ContextValue<ComboBoxProps<any>, HTMLDivElement>>(null);
-export const ComboBoxStateContext = createContext<ComboBoxState<any> | null>(null);
+export const ComboBoxContext = createContext<ContextValue<ComboBoxProps<any, SelectionMode>, HTMLDivElement>>(null);
+export const ComboBoxStateContext = createContext<ComboBoxState<any, SelectionMode> | null>(null);
 
 /**
  * A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query.
  */
-export const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: ForwardedRef<HTMLDivElement>) {
+export const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function ComboBox<T extends object, M extends SelectionMode = 'single'>(props: ComboBoxProps<T, M>, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, ComboBoxContext);
   let {children, isDisabled = false, isInvalid = false, isRequired = false} = props;
   let content = useMemo(() => (
@@ -115,7 +117,7 @@ export const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function Co
 const CLEAR_CONTEXTS = [LabelContext, ButtonContext, InputContext, GroupContext, TextContext];
 
 interface ComboBoxInnerProps<T extends object> {
-  props: ComboBoxProps<T>,
+  props: ComboBoxProps<T, SelectionMode>,
   collection: Collection<Node<T>>,
   comboBoxRef: RefObject<HTMLDivElement | null>
 }
@@ -157,6 +159,7 @@ function ComboBoxInner<T extends object>({props, collection, comboBoxRef: ref}:
     labelProps,
     descriptionProps,
     errorMessageProps,
+    valueProps,
     ...validation
   } = useComboBox({
     ...removeDataAttributes(props),
@@ -203,6 +206,18 @@ function ComboBoxInner<T extends object>({props, collection, comboBoxRef: ref}:
   let DOMProps = filterDOMProps(props, {global: true});
   delete DOMProps.id;
 
+  let inputs: ReactElement[] = [];
+  if (name && formValue === 'key') {
+    let values: (Key | null)[] = Array.isArray(state.value) ? state.value : [state.value];
+    if (values.length === 0) {
+      values = [null];
+    }
+
+    inputs = values.map((value, i) => (
+      <input key={i} type="hidden" name={name} form={props.form} value={value ?? ''} />
+    ));
+  }
+
   return (
     <Provider
       values={[
@@ -230,7 +245,8 @@ function ComboBoxInner<T extends object>({props, collection, comboBoxRef: ref}:
           }
         }],
         [GroupContext, {isInvalid: validation.isInvalid, isDisabled: props.isDisabled || false}],
-        [FieldErrorContext, validation]
+        [FieldErrorContext, validation],
+        [ComboBoxValueContext, valueProps]
       ]}>
       <dom.div
         {...DOMProps}
@@ -241,8 +257,69 @@ function ComboBoxInner<T extends object>({props, collection, comboBoxRef: ref}:
         data-open={state.isOpen || undefined}
         data-disabled={props.isDisabled || undefined}
         data-invalid={validation.isInvalid || undefined}
-        data-required={props.isRequired || undefined} />
-      {name && formValue === 'key' && <input type="hidden" name={name} form={props.form} value={state.selectedKey ?? ''} />}
+        data-required={props.isRequired || undefined}>
+        {renderProps.children}
+        {inputs}
+      </dom.div>
     </Provider>
   );
 }
+
+export interface ComboBoxValueRenderProps<T> {
+  /**
+   * Whether the value is a placeholder.
+   * @selector [data-placeholder]
+   */
+  isPlaceholder: boolean,
+  /** The object values of the currently selected items. */
+  selectedItems: (T | null)[],
+  /** The textValue of the currently selected items. */
+  selectedText: string,
+  /** The state of the ComboBox. */
+  state: ComboBoxState<T, 'single' | 'multiple'>
+}
+
+export interface ComboBoxValueProps<T extends object> extends Omit<HTMLAttributes<HTMLElement>, keyof RenderProps<unknown>>, RenderProps<ComboBoxValueRenderProps<T>, 'div'> {
+  /**
+   * 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-ComboBoxValue'
+   */
+  className?: ClassNameOrFunction<ComboBoxValueRenderProps<T>>,
+  /** A value to display when no items are selected. */
+  placeholder?: ReactNode
+}
+
+export const ComboBoxValueContext = createContext<ContextValue<ComboBoxValueProps<any>, HTMLDivElement>>(null);
+
+/**
+ * ComboBoxValue renders the selected values of a ComboBox, or a placeholder if no value is selected.
+ * By default, the items are rendered as a comma separated list. Use the render function to customize this.
+ */
+export const ComboBoxValue = /*#__PURE__*/ createHideableComponent(function ComboBoxValue<T extends object>(props: ComboBoxValueProps<T>, ref: ForwardedRef<HTMLDivElement>) {
+  [props, ref] = useContextProps(props, ref, ComboBoxValueContext);
+  let state = useContext(ComboBoxStateContext)!;
+  let formatter = useListFormatter();
+  let selectedText = useMemo(() => formatter.format(state.selectedItems.map(item => item?.textValue || '').filter(v => v !== '')), [formatter, state.selectedItems]);
+
+  let renderProps = useRenderProps({
+    ...props,
+    defaultChildren: selectedText || props.placeholder,
+    defaultClassName: 'react-aria-ComboBoxValue',
+    values: {
+      selectedItems: useMemo(() => state.selectedItems.map(item => item.value as T ?? null), [state.selectedItems]),
+      selectedText,
+      isPlaceholder: state.selectedItems.length === 0,
+      state
+    }
+  });
+
+  let DOMProps = filterDOMProps(props, {global: true});
+
+  return (
+    <dom.div
+      ref={ref}
+      {...DOMProps}
+      {...renderProps}
+      data-placeholder={state.selectedItems.length === 0 || undefined} />
+  );
+});

package/src/DateField.tsx

@@ -57,7 +57,12 @@ export interface DateFieldRenderProps {
    * Whether the date field is read only.
    * @selector [data-readonly]
    */
-  isReadOnly: boolean
+  isReadOnly: boolean,
+  /**
+   * Whether the date field is required.
+   * @selector [data-required]
+   */
+  isRequired: boolean
 }
 export interface DateFieldProps<T extends DateValue> extends Omit<AriaDateFieldProps<T>, 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<DateFieldRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {
   /**
@@ -113,7 +118,8 @@ export const DateField = /*#__PURE__*/ (forwardRef as forwardRefType)(function D
       state,
       isInvalid: state.isInvalid,
       isDisabled: state.isDisabled,
-      isReadOnly: state.isReadOnly
+      isReadOnly: state.isReadOnly,
+      isRequired: props.isRequired || false
     },
     defaultClassName: 'react-aria-DateField'
   });
@@ -143,7 +149,8 @@ export const DateField = /*#__PURE__*/ (forwardRef as forwardRefType)(function D
         slot={props.slot || undefined}
         data-invalid={state.isInvalid || undefined}
         data-disabled={state.isDisabled || undefined}
-        data-readonly={state.isReadOnly || undefined} />
+        data-readonly={state.isReadOnly || undefined}
+        data-required={props.isRequired || undefined} />
       <HiddenDateInput
         autoComplete={props.autoComplete}
         name={props.name}
@@ -186,7 +193,8 @@ export const TimeField = /*#__PURE__*/ (forwardRef as forwardRefType)(function T
       state,
       isInvalid: state.isInvalid,
       isDisabled: state.isDisabled,
-      isReadOnly: state.isReadOnly
+      isReadOnly: state.isReadOnly,
+      isRequired: props.isRequired || false
     },
     defaultClassName: 'react-aria-TimeField'
   });
@@ -216,7 +224,8 @@ export const TimeField = /*#__PURE__*/ (forwardRef as forwardRefType)(function T
         slot={props.slot || undefined}
         data-invalid={state.isInvalid || undefined}
         data-disabled={state.isDisabled || undefined}
-        data-readonly={state.isReadOnly || undefined} />
+        data-readonly={state.isReadOnly || undefined}
+        data-required={props.isRequired || undefined} />
     </Provider>
   );
 });

package/src/DatePicker.tsx

@@ -66,6 +66,11 @@ export interface DatePickerRenderProps {
    * @selector [data-invalid]
    */
   isInvalid: boolean,
+  /**
+   * Whether the date picker is required.
+   * @selector [data-required]
+   */
+  isRequired: boolean,
   /**
    * Whether the date picker's popover is currently open.
    * @selector [data-open]
@@ -161,7 +166,8 @@ export const DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function
       isDisabled: props.isDisabled || false,
       isInvalid: state.isInvalid,
       isOpen: state.isOpen,
-      isReadOnly: props.isReadOnly || false
+      isReadOnly: props.isReadOnly || false,
+      isRequired: props.isRequired || false
     },
     defaultClassName: 'react-aria-DatePicker'
   });
@@ -204,6 +210,7 @@ export const DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function
         data-focus-visible={isFocusVisible || undefined}
         data-disabled={props.isDisabled || undefined}
         data-readonly={props.isReadOnly || undefined}
+        data-required={props.isRequired || undefined}
         data-open={state.isOpen || undefined} />
       <HiddenDateInput
         autoComplete={props.autoComplete}
@@ -271,7 +278,8 @@ export const DateRangePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(func
       isDisabled: props.isDisabled || false,
       isInvalid: state.isInvalid,
       isOpen: state.isOpen,
-      isReadOnly: props.isReadOnly || false
+      isReadOnly: props.isReadOnly || false,
+      isRequired: props.isRequired || false
     },
     defaultClassName: 'react-aria-DateRangePicker'
   });
@@ -319,6 +327,7 @@ export const DateRangePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(func
         data-focus-visible={isFocusVisible || undefined}
         data-disabled={props.isDisabled || undefined}
         data-readonly={props.isReadOnly || undefined}
+        data-required={props.isRequired || undefined}
         data-open={state.isOpen || undefined} />
     </Provider>
   );

package/src/DropZone.tsx

@@ -22,7 +22,7 @@ import {
   useRenderProps
 } from './utils';
 import {DropOptions, mergeProps, useButton, useClipboard, useDrop, useFocusRing, useHover, useLocalizedStringFormatter, VisuallyHidden} from 'react-aria';
-import {filterDOMProps, isFocusable, nodeContains, useLabels, useObjectRef, useSlotId} from '@react-aria/utils';
+import {filterDOMProps, getEventTarget, isFocusable, nodeContains, useLabels, useObjectRef, useSlotId} from '@react-aria/utils';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import React, {createContext, ForwardedRef, forwardRef, useRef} from 'react';
@@ -116,7 +116,7 @@ export const DropZone = forwardRef(function DropZone(props: DropZoneProps, ref:
         slot={props.slot || undefined}
         ref={dropzoneRef}
         onClick={(e) => {
-          let target = e.target as HTMLElement | null;
+          let target = getEventTarget(e) as HTMLElement | null;
           while (target && nodeContains(dropzoneRef.current, target)) {
             if (isFocusable(target)) {
               break;

package/src/FileTrigger.tsx

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {filterDOMProps, useObjectRef} from '@react-aria/utils';
+import {filterDOMProps, getEventTarget, useObjectRef} from '@react-aria/utils';
 import {GlobalDOMAttributes} from '@react-types/shared';
 import {Input} from './Input';
 import {PressResponder} from '@react-aria/interactions';
@@ -69,7 +69,7 @@ export const FileTrigger = forwardRef(function FileTrigger(props: FileTriggerPro
         ref={inputRef}
         style={{display: 'none'}}
         accept={acceptedFileTypes?.toString()}
-        onChange={(e) => onSelect?.(e.target.files)}
+        onChange={(e) => onSelect?.(getEventTarget(e).files)}
         capture={defaultCamera}
         multiple={allowsMultiple}
         // @ts-expect-error

package/src/GridList.tsx

@@ -289,7 +289,14 @@ function GridListInner<T extends object>({props, collection, gridListRef: ref}:
   );
 }
 
-export interface GridListItemRenderProps extends ItemRenderProps {}
+export interface GridListItemRenderProps extends ItemRenderProps {
+  /** The unique id of the item. */
+  id?: Key,
+  /**
+   * State of the grid list.
+   */
+  state: ListState<unknown>
+}
 
 export interface GridListItemProps<T = object> extends RenderProps<GridListItemRenderProps>, LinkDOMProps, HoverEvents, PressEvents, Omit<GlobalDOMAttributes<HTMLDivElement>, 'onClick'> {
   /**
@@ -373,7 +380,9 @@ export const GridListItem = /*#__PURE__*/ createLeafComponent(ItemNode, function
       selectionBehavior: state.selectionManager.selectionBehavior,
       allowsDragging: !!dragState,
       isDragging,
-      isDropTarget: dropIndicator?.isDropTarget
+      isDropTarget: dropIndicator?.isDropTarget,
+      id: item.key,
+      state
     }
   });
 
@@ -653,7 +662,7 @@ export const GridListSection = /*#__PURE__*/ createBranchComponent(SectionNode,
 export interface GridListHeaderProps extends DOMRenderProps<'div', undefined>, DOMProps, GlobalDOMAttributes<HTMLElement> {}
 
 export const GridListHeaderContext = createContext<ContextValue<GridListHeaderProps, HTMLDivElement>>({});
-const GridListHeaderInnerContext = createContext<HTMLAttributes<HTMLElement> | null>(null);
+export const GridListHeaderInnerContext = createContext<HTMLAttributes<HTMLElement> | null>(null);
 
 export const GridListHeader = /*#__PURE__*/ createLeafComponent(HeaderNode, function Header(props: GridListHeaderProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, GridListHeaderContext);

package/src/HiddenDateInput.tsx

@@ -13,6 +13,7 @@
 
 import {CalendarDate, CalendarDateTime, parseDate, parseDateTime, toCalendarDate, toCalendarDateTime, toLocalTimeZone} from '@internationalized/date';
 import {DateFieldState, DatePickerState, DateSegmentType} from 'react-stately';
+import {getEventTarget} from '@react-aria/utils';
 import React, {ReactNode} from 'react';
 import {useVisuallyHidden} from 'react-aria';
 
@@ -105,7 +106,7 @@ export function useHiddenDateInput(props: HiddenDateInputProps, state: DateField
       step: inputStep,
       value: dateValue,
       onChange: (e) => {
-        let targetString = e.target.value.toString();
+        let targetString = getEventTarget(e).value.toString();
         if (targetString) {
           try {
             let targetValue: CalendarDateTime | CalendarDate = parseDateTime(targetString);

package/src/Keyboard.tsx

@@ -15,9 +15,9 @@ import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes} from 're
 
 export interface KeyboardProps extends HTMLAttributes<HTMLElement>, DOMRenderProps<'kbd', undefined> {}
 
-export const KeyboardContext = createContext<ContextValue<HTMLAttributes<HTMLElement>, HTMLElement>>({});
+export const KeyboardContext = createContext<ContextValue<KeyboardProps, HTMLElement>>({});
 
-export const Keyboard = forwardRef(function Keyboard(props: HTMLAttributes<HTMLElement>, ref: ForwardedRef<HTMLElement>) {
+export const Keyboard = forwardRef(function Keyboard(props: KeyboardProps, ref: ForwardedRef<HTMLElement>) {
   [props, ref] = useContextProps(props, ref, KeyboardContext);
   return <dom.kbd dir="ltr" {...props} ref={ref} />;
 });

package/src/ListBox.tsx

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaListBoxOptions, AriaListBoxProps, DraggableItemResult, DragPreviewRenderer, DroppableCollectionResult, DroppableItemResult, FocusScope, ListKeyboardDelegate, mergeProps, useCollator, useFocus, useFocusRing, useHover, useListBox, useListBoxSection, useLocale, useOption} from 'react-aria';
+import {AriaListBoxOptions, AriaListBoxProps, DraggableItemResult, DragPreviewRenderer, DroppableCollectionResult, DroppableItemResult, FocusScope, ListKeyboardDelegate, mergeProps, useCollator, useFocus, useFocusRing, useHover, useKeyboard, useListBox, useListBoxSection, useLocale, useOption} from 'react-aria';
 import {
   ClassNameOrFunction,
   ContextValue,
@@ -33,7 +33,7 @@ import {DragAndDropContext, DropIndicatorContext, DropIndicatorProps, useDndPers
 import {DragAndDropHooks} from './useDragAndDrop';
 import {DraggableCollectionState, DroppableCollectionState, ListState, Node, Orientation, SelectionBehavior, UNSTABLE_useFilteredListState, useListState} from 'react-stately';
 import {filterDOMProps, inertValue, LoadMoreSentinelProps, useLoadMoreSentinel, useObjectRef} from '@react-aria/utils';
-import {FocusEvents, forwardRefType, GlobalDOMAttributes, HoverEvents, Key, LinkDOMProps, PressEvents, RefObject} from '@react-types/shared';
+import {FocusEvents, forwardRefType, GlobalDOMAttributes, HoverEvents, Key, KeyboardEvents, LinkDOMProps, PressEvents, RefObject} from '@react-types/shared';
 import {HeaderContext} from './Header';
 import React, {createContext, ForwardedRef, forwardRef, JSX, ReactNode, useContext, useEffect, useMemo, useRef} from 'react';
 import {SelectableCollectionContext, SelectableCollectionContextValue} from './RSPContexts';
@@ -340,7 +340,7 @@ export const ListBoxSection = /*#__PURE__*/ createBranchComponent(SectionNode, L
 
 export interface ListBoxItemRenderProps extends ItemRenderProps {}
 
-export interface ListBoxItemProps<T = object> extends Omit<RenderProps<ListBoxItemRenderProps>, 'render'>, PossibleLinkDOMRenderProps<'div', ListBoxItemRenderProps>, LinkDOMProps, HoverEvents, PressEvents, FocusEvents<HTMLDivElement>, Omit<GlobalDOMAttributes<HTMLDivElement>, 'onClick'> {
+export interface ListBoxItemProps<T = object> extends Omit<RenderProps<ListBoxItemRenderProps>, 'render'>, PossibleLinkDOMRenderProps<'div', ListBoxItemRenderProps>, LinkDOMProps, HoverEvents, PressEvents, KeyboardEvents, FocusEvents<HTMLDivElement>, Omit<GlobalDOMAttributes<HTMLDivElement>, '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-ListBoxItem'
@@ -383,6 +383,7 @@ export const ListBoxItem = /*#__PURE__*/ createLeafComponent(ItemNode, function
     onHoverEnd: item.props.onHoverEnd
   });
 
+  let {keyboardProps} = useKeyboard(props);
   let {focusProps} = useFocus(props);
 
   let draggableItem: DraggableItemResult | null = null;
@@ -431,7 +432,7 @@ export const ListBoxItem = /*#__PURE__*/ createLeafComponent(ItemNode, function
 
   return (
     <ElementType
-      {...mergeProps(DOMProps, renderProps, optionProps, hoverProps, focusProps, draggableItem?.dragProps, droppableItem?.dropProps)}
+      {...mergeProps(DOMProps, renderProps, optionProps, hoverProps, keyboardProps, focusProps, draggableItem?.dragProps, droppableItem?.dropProps)}
       ref={ref}
       data-allows-dragging={!!dragState || undefined}
       data-selected={states.isSelected || undefined}