react-aria-components 1.12.2 → 1.14.0

package/i18n/zh-TW.mjs

@@ -1 +1 @@
-export default{"@react-aria/autocomplete":{collectionLabel:`建議`},"@react-aria/breadcrumbs":{breadcrumbs:`導覽列`},"@react-aria/calendar":{dateRange:e=>`${e.startDate} 至 ${e.endDate}`,dateSelected:e=>`已選取 ${e.date}`,finishRangeSelectionPrompt:`按一下以完成選取日期範圍`,maximumDate:`最後一個可用日期`,minimumDate:`第一個可用日期`,next:`下一頁`,previous:`上一頁`,selectedDateDescription:e=>`選定的日期：${e.date}`,selectedRangeDescription:e=>`選定的範圍：${e.dateRange}`,startRangeSelectionPrompt:`按一下以開始選取日期範圍`,todayDate:e=>`今天，${e.date}`,todayDateSelected:e=>`已選取今天，${e.date}`},"@react-aria/color":{colorInputLabel:e=>`${e.label}，${e.channelLabel}`,colorNameAndValue:e=>`${e.name}：${e.value}`,colorPicker:`檢色器`,colorSwatch:`色票`,transparent:`透明`,twoDimensionalSlider:`2D 滑桿`},"@react-aria/combobox":{buttonLabel:`顯示建議`,countAnnouncement:(e,t)=>`${t.plural(e.optionCount,{one:()=>`${t.number(e.optionCount)} 選項`,other:()=>`${t.number(e.optionCount)} 選項`})} 可用。`,focusAnnouncement:(e,t)=>`${t.select({true:()=>`輸入的群組 ${e.groupTitle}, 有 ${t.plural(e.groupCount,{one:()=>`${t.number(e.groupCount)} 選項`,other:()=>`${t.number(e.groupCount)} 選項`})}. `,other:""},e.isGroupChange)}${e.optionText}${t.select({true:`, 已選取`,other:""},e.isSelected)}`,listboxLabel:`建議`,selectedAnnouncement:e=>`${e.optionText}, 已選取`},"@react-aria/datepicker":{calendar:`日曆`,day:`日`,dayPeriod:`上午/下午`,endDate:`結束日期`,era:`纪元`,hour:`小时`,minute:`分钟`,month:`月`,second:`秒`,selectedDateDescription:e=>`選定的日期：${e.date}`,selectedRangeDescription:e=>`選定的範圍：${e.startDate} 至 ${e.endDate}`,selectedTimeDescription:e=>`選定的時間：${e.time}`,startDate:`開始日期`,timeZoneName:`时区`,weekday:`工作日`,year:`年`},"@react-aria/dnd":{dragDescriptionKeyboard:`按 Enter 鍵以開始拖曳。`,dragDescriptionKeyboardAlt:`按 Alt+Enter 鍵以開始拖曳。`,dragDescriptionLongPress:`長按以開始拖曳。`,dragDescriptionTouch:`輕點兩下以開始拖曳。`,dragDescriptionVirtual:`按一下滑鼠以開始拖曳。`,dragItem:e=>`拖曳「${e.itemText}」`,dragSelectedItems:(e,t)=>`拖曳 ${t.plural(e.count,{one:()=>`${t.number(e.count)} 個選定項目`,other:()=>`${t.number(e.count)} 個選定項目`})}`,dragSelectedKeyboard:(e,t)=>`按 Enter 鍵以拖曳 ${t.plural(e.count,{one:()=>`${t.number(e.count)} 個選定項目`,other:()=>`${t.number(e.count)} 個選定項目`})}。`,dragSelectedKeyboardAlt:(e,t)=>`按 Alt+Enter 鍵以拖曳 ${t.plural(e.count,{one:()=>`${t.number(e.count)} 個選定項目`,other:()=>`${t.number(e.count)} 個選定項目`})}。`,dragSelectedLongPress:(e,t)=>`長按以拖曳 ${t.plural(e.count,{one:()=>`${t.number(e.count)} 個選定項目`,other:()=>`${t.number(e.count)} 個選定項目`})}。`,dragStartedKeyboard:`已開始拖曳。按 Tab 鍵以瀏覽至放置目標，然後按 Enter 鍵以放置，或按 Escape 鍵以取消。`,dragStartedTouch:`已開始拖曳。瀏覽至放置目標，然後輕點兩下以放置。`,dragStartedVirtual:`已開始拖曳。瀏覽至放置目標，然後按一下滑鼠或按 Enter 鍵以放置。`,dropCanceled:`放置已取消。`,dropComplete:`放置已完成。`,dropDescriptionKeyboard:`按 Enter 鍵以放置。按 Escape 鍵以取消拖曳。`,dropDescriptionTouch:`輕點兩下以放置。`,dropDescriptionVirtual:`按一下滑鼠以放置。`,dropIndicator:`放置指示器`,dropOnItem:e=>`放置在「${e.itemText}」上`,dropOnRoot:`放置在`,endDragKeyboard:`拖曳中。按 Enter 鍵以取消拖曳。`,endDragTouch:`拖曳中。輕點兩下以取消拖曳。`,endDragVirtual:`拖曳中。按一下滑鼠以取消拖曳。`,insertAfter:e=>`插入至「${e.itemText}」之後`,insertBefore:e=>`插入至「${e.itemText}」之前`,insertBetween:e=>`插入至「${e.beforeItemText}」和「${e.afterItemText}」之間`},"@react-aria/grid":{deselectedItem:e=>`未選取「${e.item}」。`,longPressToSelect:`長按以進入選擇模式。`,select:`選取`,selectedAll:`已選取所有項目。`,selectedCount:(e,t)=>`${t.plural(e.count,{"=0":`未選取任何項目`,one:()=>`已選取 ${t.number(e.count)} 個項目`,other:()=>`已選取 ${t.number(e.count)} 個項目`})}。`,selectedItem:e=>`已選取「${e.item}」。`},"@react-aria/gridlist":{hasActionAnnouncement:`列有動作`,hasLinkAnnouncement:e=>`列有連結：${e.link}`},"@react-aria/menu":{longPressMessage:`長按或按 Alt+向下鍵以開啟功能表`},"@react-aria/numberfield":{decrease:e=>`縮小 ${e.fieldLabel}`,increase:e=>`放大 ${e.fieldLabel}`,numberField:`數字欄位`},"@react-aria/overlays":{dismiss:`關閉`},"@react-aria/searchfield":{"Clear search":`清除搜尋條件`},"@react-aria/spinbutton":{Empty:`空白`},"@react-aria/steplist":{steplist:`步驟清單`},"@react-aria/table":{ascending:`遞增`,ascendingSort:e=>`已依據「${e.columnName}」欄遞增排序`,columnSize:e=>`${e.value} 像素`,descending:`遞減`,descendingSort:e=>`已依據「${e.columnName}」欄遞減排序`,resizerDescription:`按 Enter 鍵以開始調整大小`,select:`選取`,selectAll:`全選`,sortable:`可排序的欄`},"@react-aria/tag":{removeButtonLabel:`移除`,removeDescription:`按 Delete 鍵以移除標記。`},"@react-aria/toast":{close:`關閉`,notifications:(e,t)=>`${t.plural(e.count,{one:()=>`${t.number(e.count)} 個通知`,other:()=>`${t.number(e.count)} 個通知`})}。`},"@react-aria/tree":{collapse:`收合`,expand:`展開`},"@react-stately/color":{alpha:"Alpha",black:`黑`,blue:`藍色`,"blue purple":`藍紫`,brightness:`亮度`,brown:`棕`,"brown yellow":`棕黃`,colorName:e=>`${e.lightness} ${e.chroma} ${e.hue}`,cyan:`青`,"cyan blue":`青藍`,dark:`暗`,gray:`灰`,grayish:`偏灰`,green:`綠色`,"green cyan":`青綠`,hue:`色相`,light:`淺`,lightness:`明亮`,magenta:`洋紅`,"magenta pink":`淺洋紅`,orange:`橙`,"orange yellow":`橙黃`,pale:`淡`,pink:`粉紅`,"pink red":`粉紅`,purple:`紫`,"purple magenta":`紫洋紅`,red:`紅色`,"red orange":`橙紅`,saturation:`飽和度`,transparentColorName:e=>`${e.lightness} ${e.chroma} ${e.hue}, ${e.percentTransparent} 透明`,"very dark":`很暗`,"very light":`很淺`,vibrant:`鮮豔`,white:`白`,yellow:`黃`,"yellow green":`黃綠`},"@react-stately/datepicker":{rangeOverflow:e=>`值必須是 ${e.maxValue} 或更早。`,rangeReversed:`開始日期必須在結束日期之前。`,rangeUnderflow:e=>`值必須是 ${e.minValue} 或更晚。`,unavailableDate:`所選日期無法使用。`},"react-aria-components":{colorSwatchPicker:`色票`,dropzoneLabel:`放置區`,selectPlaceholder:`選取項目`,tableResizer:`大小調整器`}};
+export default{"@react-aria/tree":{collapse:`收合`,expand:`展開`},"@react-aria/toast":{close:`關閉`,notifications:(e,t)=>`${t.plural(e.count,{one:()=>`${t.number(e.count)} 個通知`,other:()=>`${t.number(e.count)} 個通知`})}。`},"@react-aria/tag":{removeButtonLabel:`移除`,removeDescription:`按 Delete 鍵以移除標記。`},"@react-aria/table":{ascending:`遞增`,ascendingSort:e=>`已依據「${e.columnName}」欄遞增排序`,columnSize:e=>`${e.value} 像素`,descending:`遞減`,descendingSort:e=>`已依據「${e.columnName}」欄遞減排序`,resizerDescription:`按 Enter 鍵以開始調整大小`,select:`選取`,selectAll:`全選`,sortable:`可排序的欄`},"@react-aria/steplist":{steplist:`步驟清單`},"@react-aria/spinbutton":{Empty:`空白`},"@react-aria/searchfield":{"Clear search":`清除搜尋條件`},"@react-aria/overlays":{dismiss:`關閉`},"@react-aria/numberfield":{decrease:e=>`縮小 ${e.fieldLabel}`,increase:e=>`放大 ${e.fieldLabel}`,numberField:`數字欄位`},"@react-aria/menu":{longPressMessage:`長按或按 Alt+向下鍵以開啟功能表`},"@react-aria/gridlist":{hasActionAnnouncement:`列有動作`,hasLinkAnnouncement:e=>`列有連結：${e.link}`},"@react-aria/grid":{deselectedItem:e=>`未選取「${e.item}」。`,longPressToSelect:`長按以進入選擇模式。`,select:`選取`,selectedAll:`已選取所有項目。`,selectedCount:(e,t)=>`${t.plural(e.count,{"=0":`未選取任何項目`,one:()=>`已選取 ${t.number(e.count)} 個項目`,other:()=>`已選取 ${t.number(e.count)} 個項目`})}。`,selectedItem:e=>`已選取「${e.item}」。`},"@react-aria/dnd":{dragDescriptionKeyboard:`按 Enter 鍵以開始拖曳。`,dragDescriptionKeyboardAlt:`按 Alt+Enter 鍵以開始拖曳。`,dragDescriptionLongPress:`長按以開始拖曳。`,dragDescriptionTouch:`輕點兩下以開始拖曳。`,dragDescriptionVirtual:`按一下滑鼠以開始拖曳。`,dragItem:e=>`拖曳「${e.itemText}」`,dragSelectedItems:(e,t)=>`拖曳 ${t.plural(e.count,{one:()=>`${t.number(e.count)} 個選定項目`,other:()=>`${t.number(e.count)} 個選定項目`})}`,dragSelectedKeyboard:(e,t)=>`按 Enter 鍵以拖曳 ${t.plural(e.count,{one:()=>`${t.number(e.count)} 個選定項目`,other:()=>`${t.number(e.count)} 個選定項目`})}。`,dragSelectedKeyboardAlt:(e,t)=>`按 Alt+Enter 鍵以拖曳 ${t.plural(e.count,{one:()=>`${t.number(e.count)} 個選定項目`,other:()=>`${t.number(e.count)} 個選定項目`})}。`,dragSelectedLongPress:(e,t)=>`長按以拖曳 ${t.plural(e.count,{one:()=>`${t.number(e.count)} 個選定項目`,other:()=>`${t.number(e.count)} 個選定項目`})}。`,dragStartedKeyboard:`已開始拖曳。按 Tab 鍵以瀏覽至放置目標，然後按 Enter 鍵以放置，或按 Escape 鍵以取消。`,dragStartedTouch:`已開始拖曳。瀏覽至放置目標，然後輕點兩下以放置。`,dragStartedVirtual:`已開始拖曳。瀏覽至放置目標，然後按一下滑鼠或按 Enter 鍵以放置。`,dropCanceled:`放置已取消。`,dropComplete:`放置已完成。`,dropDescriptionKeyboard:`按 Enter 鍵以放置。按 Escape 鍵以取消拖曳。`,dropDescriptionTouch:`輕點兩下以放置。`,dropDescriptionVirtual:`按一下滑鼠以放置。`,dropIndicator:`放置指示器`,dropOnItem:e=>`放置在「${e.itemText}」上`,dropOnRoot:`放置在`,endDragKeyboard:`拖曳中。按 Enter 鍵以取消拖曳。`,endDragTouch:`拖曳中。輕點兩下以取消拖曳。`,endDragVirtual:`拖曳中。按一下滑鼠以取消拖曳。`,insertAfter:e=>`插入至「${e.itemText}」之後`,insertBefore:e=>`插入至「${e.itemText}」之前`,insertBetween:e=>`插入至「${e.beforeItemText}」和「${e.afterItemText}」之間`},"@react-aria/datepicker":{calendar:`日曆`,day:`日`,dayPeriod:`上午/下午`,endDate:`結束日期`,era:`纪元`,hour:`小时`,minute:`分钟`,month:`月`,second:`秒`,selectedDateDescription:e=>`選定的日期：${e.date}`,selectedRangeDescription:e=>`選定的範圍：${e.startDate} 至 ${e.endDate}`,selectedTimeDescription:e=>`選定的時間：${e.time}`,startDate:`開始日期`,timeZoneName:`时区`,weekday:`工作日`,year:`年`},"@react-aria/combobox":{buttonLabel:`顯示建議`,countAnnouncement:(e,t)=>`${t.plural(e.optionCount,{one:()=>`${t.number(e.optionCount)} 選項`,other:()=>`${t.number(e.optionCount)} 選項`})} 可用。`,focusAnnouncement:(e,t)=>`${t.select({true:()=>`輸入的群組 ${e.groupTitle}, 有 ${t.plural(e.groupCount,{one:()=>`${t.number(e.groupCount)} 選項`,other:()=>`${t.number(e.groupCount)} 選項`})}. `,other:""},e.isGroupChange)}${e.optionText}${t.select({true:`, 已選取`,other:""},e.isSelected)}`,listboxLabel:`建議`,selectedAnnouncement:e=>`${e.optionText}, 已選取`},"@react-aria/color":{colorInputLabel:e=>`${e.label}，${e.channelLabel}`,colorNameAndValue:e=>`${e.name}：${e.value}`,colorPicker:`檢色器`,colorSwatch:`色票`,transparent:`透明`,twoDimensionalSlider:`2D 滑桿`},"@react-aria/calendar":{dateRange:e=>`${e.startDate} 至 ${e.endDate}`,dateSelected:e=>`已選取 ${e.date}`,finishRangeSelectionPrompt:`按一下以完成選取日期範圍`,maximumDate:`最後一個可用日期`,minimumDate:`第一個可用日期`,next:`下一頁`,previous:`上一頁`,selectedDateDescription:e=>`選定的日期：${e.date}`,selectedRangeDescription:e=>`選定的範圍：${e.dateRange}`,startRangeSelectionPrompt:`按一下以開始選取日期範圍`,todayDate:e=>`今天，${e.date}`,todayDateSelected:e=>`已選取今天，${e.date}`},"@react-aria/breadcrumbs":{breadcrumbs:`導覽列`},"@react-aria/autocomplete":{collectionLabel:`建議`},"@react-stately/datepicker":{rangeOverflow:e=>`值必須是 ${e.maxValue} 或更早。`,rangeReversed:`開始日期必須在結束日期之前。`,rangeUnderflow:e=>`值必須是 ${e.minValue} 或更晚。`,unavailableDate:`所選日期無法使用。`},"@react-stately/color":{alpha:"Alpha",black:`黑`,blue:`藍色`,"blue purple":`藍紫`,brightness:`亮度`,brown:`棕`,"brown yellow":`棕黃`,colorName:e=>`${e.lightness} ${e.chroma} ${e.hue}`,cyan:`青`,"cyan blue":`青藍`,dark:`暗`,gray:`灰`,grayish:`偏灰`,green:`綠色`,"green cyan":`青綠`,hue:`色相`,light:`淺`,lightness:`明亮`,magenta:`洋紅`,"magenta pink":`淺洋紅`,orange:`橙`,"orange yellow":`橙黃`,pale:`淡`,pink:`粉紅`,"pink red":`粉紅`,purple:`紫`,"purple magenta":`紫洋紅`,red:`紅色`,"red orange":`橙紅`,saturation:`飽和度`,transparentColorName:e=>`${e.lightness} ${e.chroma} ${e.hue}, ${e.percentTransparent} 透明`,"very dark":`很暗`,"very light":`很淺`,vibrant:`鮮豔`,white:`白`,yellow:`黃`,"yellow green":`黃綠`},"react-aria-components":{colorSwatchPicker:`色票`,dropzoneLabel:`放置區`,selectPlaceholder:`選取項目`,tableResizer:`大小調整器`}};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-aria-components",
-  "version": "1.12.2",
+  "version": "1.14.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.9.0",
+    "@internationalized/date": "^3.10.1",
     "@internationalized/string": "^3.2.7",
-    "@react-aria/autocomplete": "3.0.0-rc.2",
-    "@react-aria/collections": "3.0.0-rc.7",
-    "@react-aria/dnd": "^3.11.2",
-    "@react-aria/focus": "^3.21.1",
-    "@react-aria/interactions": "^3.25.5",
+    "@react-aria/autocomplete": "3.0.0-rc.4",
+    "@react-aria/collections": "^3.0.1",
+    "@react-aria/dnd": "^3.11.4",
+    "@react-aria/focus": "^3.21.3",
+    "@react-aria/interactions": "^3.26.0",
     "@react-aria/live-announcer": "^3.4.4",
-    "@react-aria/overlays": "^3.29.1",
+    "@react-aria/overlays": "^3.31.0",
     "@react-aria/ssr": "^3.9.10",
-    "@react-aria/textfield": "^3.18.1",
-    "@react-aria/toolbar": "3.0.0-beta.20",
-    "@react-aria/utils": "^3.30.1",
-    "@react-aria/virtualizer": "^4.1.9",
-    "@react-stately/autocomplete": "3.0.0-beta.3",
-    "@react-stately/layout": "^4.5.0",
-    "@react-stately/selection": "^3.20.5",
-    "@react-stately/table": "^3.15.0",
-    "@react-stately/utils": "^3.10.8",
-    "@react-stately/virtualizer": "^4.4.3",
-    "@react-types/form": "^3.7.15",
-    "@react-types/grid": "^3.3.5",
-    "@react-types/shared": "^3.32.0",
-    "@react-types/table": "^3.13.3",
+    "@react-aria/textfield": "^3.18.3",
+    "@react-aria/toolbar": "3.0.0-beta.22",
+    "@react-aria/utils": "^3.32.0",
+    "@react-aria/virtualizer": "^4.1.11",
+    "@react-stately/autocomplete": "3.0.0-beta.4",
+    "@react-stately/layout": "^4.5.2",
+    "@react-stately/selection": "^3.20.7",
+    "@react-stately/table": "^3.15.2",
+    "@react-stately/utils": "^3.11.0",
+    "@react-stately/virtualizer": "^4.4.4",
+    "@react-types/form": "^3.7.16",
+    "@react-types/grid": "^3.3.6",
+    "@react-types/shared": "^3.32.1",
+    "@react-types/table": "^3.13.4",
     "@swc/helpers": "^0.5.0",
     "client-only": "^0.0.1",
-    "react-aria": "^3.43.2",
-    "react-stately": "^3.41.0",
+    "react-aria": "^3.45.0",
+    "react-stately": "^3.43.0",
     "use-sync-external-store": "^1.4.0"
   },
   "peerDependencies": {
@@ -81,5 +81,5 @@
   "devDependencies": {
     "@tailwindcss/postcss": "^4.0.0"
   },
-  "gitHead": "7bbe432a2f3ac09448b09769b34d36d777267f2f"
+  "gitHead": "4d838da5bfe36abb35aed166995a9ef63825370f"
 }

package/src/Autocomplete.tsx

@@ -12,7 +12,7 @@
 
 import {AriaAutocompleteProps, useAutocomplete} from '@react-aria/autocomplete';
 import {AutocompleteState, useAutocompleteState} from '@react-stately/autocomplete';
-import {FieldInputContext, SelectableCollectionContext} from './context';
+import {FieldInputContext, SelectableCollectionContext} from './RSPContexts';
 import {mergeProps} from '@react-aria/utils';
 import {Provider, removeDataAttributes, SlotProps, SlottedContextValue, useSlottedContext} from './utils';
 import React, {createContext, JSX, useRef} from 'react';
@@ -22,7 +22,7 @@ export const AutocompleteContext = createContext<SlottedContextValue<Partial<Aut
 export const AutocompleteStateContext = createContext<AutocompleteState | null>(null);
 
 /**
- * An autocomplete combines a TextField or SearchField with a Menu or ListBox, allowing users to search or filter a list of suggestions.
+ * An autocomplete allows users to search or filter a list of suggestions.
  */
 export function Autocomplete<T extends object>(props: AutocompleteProps<T>): JSX.Element {
   let ctx = useSlottedContext(AutocompleteContext, props.slot);

package/src/Breadcrumbs.tsx

@@ -10,16 +10,30 @@
  * governing permissions and limitations under the License.
  */
 import {AriaBreadcrumbsProps, useBreadcrumbs} from 'react-aria';
+import {AriaLabelingProps, forwardRefType, GlobalDOMAttributes, Key} from '@react-types/shared';
+import {
+  ClassNameOrFunction,
+  ContextValue,
+  RenderProps,
+  SlotProps,
+  StyleProps,
+  useContextProps,
+  useRenderProps,
+  useSlottedContext
+} from './utils';
 import {Collection, CollectionBuilder, CollectionNode, createLeafComponent} from '@react-aria/collections';
 import {CollectionProps, CollectionRendererContext} from './Collection';
-import {ContextValue, RenderProps, SlotProps, StyleProps, useContextProps, useRenderProps, useSlottedContext} from './utils';
 import {filterDOMProps, mergeProps} from '@react-aria/utils';
-import {forwardRefType, GlobalDOMAttributes, Key} from '@react-types/shared';
 import {LinkContext} from './Link';
 import {Node} from 'react-stately';
 import React, {createContext, ForwardedRef, forwardRef, useContext} from 'react';
 
-export interface BreadcrumbsProps<T> extends Omit<CollectionProps<T>, 'disabledKeys'>, AriaBreadcrumbsProps, StyleProps, SlotProps, GlobalDOMAttributes<HTMLOListElement> {
+export interface BreadcrumbsProps<T> extends Omit<CollectionProps<T>, 'disabledKeys'>, AriaBreadcrumbsProps, StyleProps, SlotProps, AriaLabelingProps, GlobalDOMAttributes<HTMLOListElement> {
+  /**
+   * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element.
+   * @default 'react-aria-Breadcrumbs'
+   */
+  className?: string,
   /** Whether the breadcrumbs are disabled. */
   isDisabled?: boolean,
   /** Handler that is called when a breadcrumb is clicked. */
@@ -35,7 +49,7 @@ export const Breadcrumbs = /*#__PURE__*/ (forwardRef as forwardRefType)(function
   [props, ref] = useContextProps(props, ref, BreadcrumbsContext);
   let {CollectionRoot} = useContext(CollectionRendererContext);
   let {navProps} = useBreadcrumbs(props);
-  let DOMProps = filterDOMProps(props, {global: true});
+  let DOMProps = filterDOMProps(props, {global: true, labelable: true});
 
   return (
     <CollectionBuilder content={<Collection {...props} />}>
@@ -68,7 +82,12 @@ export interface BreadcrumbRenderProps {
   isDisabled: boolean
 }
 
-export interface BreadcrumbProps extends RenderProps<BreadcrumbRenderProps>, GlobalDOMAttributes<HTMLLIElement>  {
+export interface BreadcrumbProps extends RenderProps<BreadcrumbRenderProps>, AriaLabelingProps, GlobalDOMAttributes<HTMLLIElement>  {
+  /**
+   * 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-Breadcrumb'
+   */
+  className?: ClassNameOrFunction<BreadcrumbRenderProps>,
   /** A unique id for the breadcrumb, which will be passed to `onAction` when the breadcrumb is pressed. */
   id?: Key
 }
@@ -97,7 +116,7 @@ export const Breadcrumb = /*#__PURE__*/ createLeafComponent(BreadcrumbNode, func
     defaultClassName: 'react-aria-Breadcrumb'
   });
 
-  let DOMProps = filterDOMProps(props as any, {global: true});
+  let DOMProps = filterDOMProps(props as any, {global: true, labelable: true});
   delete DOMProps.id;
 
   return (

package/src/Button.tsx

@@ -21,6 +21,7 @@ import {
   useId
 } from 'react-aria';
 import {
+  ClassNameOrFunction,
   ContextValue,
   RenderProps,
   SlotProps,
@@ -67,6 +68,11 @@ export interface ButtonRenderProps {
 }
 
 export interface ButtonProps extends Omit<AriaButtonProps, 'children' | 'href' | 'target' | 'rel' | 'elementType'>, HoverEvents, SlotProps, RenderProps<ButtonRenderProps>, Omit<GlobalDOMAttributes<HTMLButtonElement>, '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-Button'
+   */
+  className?: ClassNameOrFunction<ButtonRenderProps>,
   /**
    * Whether the button is in a pending state. This disables press and hover events
    * while retaining focusability, and announces the pending state to screen readers.
@@ -85,10 +91,10 @@ export const ButtonContext = createContext<ContextValue<ButtonContextValue, HTML
  */
 export const Button = /*#__PURE__*/ createHideableComponent(function Button(props: ButtonProps, ref: ForwardedRef<HTMLButtonElement>) {
   [props, ref] = useContextProps(props, ref, ButtonContext);
-  props = disablePendingProps(props);
   let ctx = props as ButtonContextValue;
   let {isPending} = ctx;
   let {buttonProps, isPressed} = useButton(props, ref);
+  buttonProps = useDisableInteractions(buttonProps, isPending);
   let {focusProps, isFocused, isFocusVisible} = useFocusRing(props);
   let {hoverProps, isHovered} = useHover({
     ...props,
@@ -161,18 +167,16 @@ export const Button = /*#__PURE__*/ createHideableComponent(function Button(prop
   );
 });
 
-function disablePendingProps(props) {
+function useDisableInteractions(props, isPending) {
   // Don't allow interaction while isPending is true
-  if (props.isPending) {
-    props.onPress = undefined;
-    props.onPressStart = undefined;
-    props.onPressEnd = undefined;
-    props.onPressChange = undefined;
-    props.onPressUp = undefined;
-    props.onKeyDown = undefined;
-    props.onKeyUp = undefined;
-    props.onClick = undefined;
+  if (isPending) {
+    for (const key in props) {
+      if (key.startsWith('on') && !(key.includes('Focus') || key.includes('Blur'))) {
+        props[key] = undefined;
+      }
+    }
     props.href = undefined;
+    props.target = undefined;
   }
   return props;
 }

package/src/Calendar.tsx

@@ -26,7 +26,18 @@ import {
 import {ButtonContext} from './Button';
 import {CalendarDate, CalendarIdentifier, createCalendar, DateDuration, endOfMonth, Calendar as ICalendar, isSameDay, isSameMonth, isToday} from '@internationalized/date';
 import {CalendarState, RangeCalendarState, useCalendarState, useRangeCalendarState} from 'react-stately';
-import {ContextValue, DOMProps, Provider, RenderProps, SlotProps, StyleProps, useContextProps, useRenderProps, useSlottedContext} from './utils';
+import {
+  ClassNameOrFunction,
+  ContextValue,
+  DOMProps,
+  Provider,
+  RenderProps,
+  SlotProps,
+  StyleProps,
+  useContextProps,
+  useRenderProps,
+  useSlottedContext
+} from './utils';
 import {DOMAttributes, FocusableElement, forwardRefType, GlobalDOMAttributes, HoverEvents} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
 import {HeadingContext} from './RSPContexts';
@@ -58,12 +69,16 @@ export interface RangeCalendarRenderProps extends Omit<CalendarRenderProps, 'sta
 }
 
 export interface CalendarProps<T extends DateValue> extends Omit<AriaCalendarProps<T>, 'errorMessage' | 'validationState'>, RenderProps<CalendarRenderProps>, 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-Calendar'
+   */
+  className?: ClassNameOrFunction<CalendarRenderProps>,
   /**
    * The amount of days that will be displayed at once. This affects how pagination works.
    * @default {months: 1}
    */
   visibleDuration?: DateDuration,
-
   /**
    * A function to create a new [Calendar](https://react-spectrum.adobe.com/internationalized/date/Calendar.html)
    * object for a given calendar identifier. If not provided, the `createCalendar` function
@@ -73,12 +88,16 @@ export interface CalendarProps<T extends DateValue> extends Omit<AriaCalendarPro
 }
 
 export interface RangeCalendarProps<T extends DateValue> extends Omit<AriaRangeCalendarProps<T>, 'errorMessage' | 'validationState'>, RenderProps<RangeCalendarRenderProps>, 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-RangeCalendar'
+   */
+  className?: ClassNameOrFunction<RangeCalendarRenderProps>,
   /**
    * The amount of days that will be displayed at once. This affects how pagination works.
    * @default {months: 1}
    */
   visibleDuration?: DateDuration,
-
   /**
    * A function to create a new [Calendar](https://react-spectrum.adobe.com/internationalized/date/Calendar.html)
    * object for a given calendar identifier. If not provided, the `createCalendar` function
@@ -326,6 +345,11 @@ export interface CalendarCellRenderProps {
 }
 
 export interface CalendarGridProps extends StyleProps, GlobalDOMAttributes<HTMLTableElement> {
+  /**
+   * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element.
+   * @default 'react-aria-CalendarGrid'
+   */
+  className?: string,
   /**
    * Either a function to render calendar cells for each date in the month,
    * or children containing a `<CalendarGridHeader>`` and `<CalendarGridBody>`
@@ -406,6 +430,11 @@ export const CalendarGrid = /*#__PURE__*/ (forwardRef as forwardRefType)(functio
 });
 
 export interface CalendarGridHeaderProps extends StyleProps, GlobalDOMAttributes<HTMLTableSectionElement> {
+  /**
+   * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element.
+   * @default 'react-aria-CalendarGridHeader'
+   */
+  className?: string,
   /** A function to render a `<CalendarHeaderCell>` for a weekday name. */
   children: (day: string) => ReactElement
 }
@@ -420,7 +449,7 @@ function CalendarGridHeader(props: CalendarGridHeaderProps, ref: ForwardedRef<HT
       {...mergeProps(DOMProps, headerProps)}
       ref={ref}
       style={style}
-      className={className || 'react-aria-CalendarGridHeader'}>
+      className={className ?? 'react-aria-CalendarGridHeader'}>
       <tr>
         {weekDays.map((day, key) => React.cloneElement(children(day), {key}))}
       </tr>
@@ -434,7 +463,13 @@ function CalendarGridHeader(props: CalendarGridHeaderProps, ref: ForwardedRef<HT
 const CalendarGridHeaderForwardRef = /*#__PURE__*/ (forwardRef as forwardRefType)(CalendarGridHeader);
 export {CalendarGridHeaderForwardRef as CalendarGridHeader};
 
-export interface CalendarHeaderCellProps extends DOMProps, GlobalDOMAttributes<HTMLTableHeaderCellElement> {}
+export interface CalendarHeaderCellProps extends DOMProps, GlobalDOMAttributes<HTMLTableHeaderCellElement> {
+  /**
+   * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element.
+   * @default 'react-aria-CalendarHeaderCell'
+   */
+  className?: string
+}
 
 function CalendarHeaderCell(props: CalendarHeaderCellProps, ref: ForwardedRef<HTMLTableCellElement>) {
   let {children, style, className} = props;
@@ -457,6 +492,11 @@ const CalendarHeaderCellForwardRef = forwardRef(CalendarHeaderCell);
 export {CalendarHeaderCellForwardRef as CalendarHeaderCell};
 
 export interface CalendarGridBodyProps extends StyleProps, GlobalDOMAttributes<HTMLTableSectionElement> {
+  /**
+   * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element.
+   * @default 'react-aria-CalendarGridBody'
+   */
+  className?: string,
   /** A function to render a `<CalendarCell>` for a given date. */
   children: (date: CalendarDate) => ReactElement
 }
@@ -474,7 +514,7 @@ function CalendarGridBody(props: CalendarGridBodyProps, ref: ForwardedRef<HTMLTa
       {...DOMProps}
       ref={ref}
       style={style}
-      className={className || 'react-aria-CalendarGridBody'}>
+      className={className ?? 'react-aria-CalendarGridBody'}>
       {[...new Array(weeksInMonth).keys()].map((weekIndex) => (
         <tr key={weekIndex}>
           {state.getDatesInWeek(weekIndex, startDate).map((date, i) => (
@@ -495,6 +535,11 @@ const CalendarGridBodyForwardRef = /*#__PURE__*/ (forwardRef as forwardRefType)(
 export {CalendarGridBodyForwardRef as CalendarGridBody};
 
 export interface CalendarCellProps extends RenderProps<CalendarCellRenderProps>, HoverEvents, GlobalDOMAttributes<HTMLTableCellElement> {
+  /**
+   * 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-CalendarCell'
+   */
+  className?: ClassNameOrFunction<CalendarCellRenderProps>,
   /** The date to render in the cell. */
   date: CalendarDate
 }

package/src/Checkbox.tsx

@@ -12,7 +12,19 @@
 import {AriaCheckboxGroupProps, AriaCheckboxProps, HoverEvents, mergeProps, useCheckbox, useCheckboxGroup, useCheckboxGroupItem, useFocusRing, useHover, VisuallyHidden} from 'react-aria';
 import {CheckboxContext} from './RSPContexts';
 import {CheckboxGroupState, useCheckboxGroupState, useToggleState} from 'react-stately';
-import {ContextValue, Provider, RACValidation, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot, useSlottedContext} from './utils';
+import {
+  ClassNameOrFunction,
+  ContextValue,
+  Provider,
+  RACValidation,
+  removeDataAttributes,
+  RenderProps,
+  SlotProps,
+  useContextProps,
+  useRenderProps,
+  useSlot,
+  useSlottedContext
+} from './utils';
 import {FieldErrorContext} from './FieldError';
 import {filterDOMProps, mergeRefs, useObjectRef} from '@react-aria/utils';
 import {FormContext} from './Form';
@@ -21,8 +33,19 @@ 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>, 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'> {
+  /**
+   * 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'
+   */
+  className?: ClassNameOrFunction<CheckboxRenderProps>,
   /**
    * A ref for the HTML input element.
    */

package/src/Collection.tsx

@@ -195,7 +195,7 @@ export function renderAfterDropIndicators(collection: ICollection<Node<unknown>>
   let afterIndicators: ReactNode[] = [];
   if (nextItemInSameLevel == null) {
     let current: Node<unknown> | null = node;
-    while (current && (!nextItemInFlattenedCollection || (current.parentKey !== nextItemInFlattenedCollection.parentKey && nextItemInFlattenedCollection.level < current.level))) {
+    while (current?.type === 'item' && (!nextItemInFlattenedCollection || (current.parentKey !== nextItemInFlattenedCollection.parentKey && nextItemInFlattenedCollection.level < current.level))) {
       let indicator = renderDropIndicator({
         type: 'item',
         key: current.key,

package/src/ColorArea.tsx

@@ -1,10 +1,17 @@
 import {AriaColorAreaProps, useColorArea} from 'react-aria';
+import {
+  ClassNameOrFunction,
+  Provider,
+  RenderProps,
+  SlotProps,
+  useContextProps,
+  useRenderProps
+} from './utils';
 import {ColorAreaContext} from './RSPContexts';
 import {ColorAreaState, useColorAreaState} from 'react-stately';
 import {filterDOMProps, mergeProps} from '@react-aria/utils';
 import {GlobalDOMAttributes} from '@react-types/shared';
 import {InternalColorThumbContext} from './ColorThumb';
-import {Provider, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils';
 import React, {createContext, ForwardedRef, forwardRef, useRef} from 'react';
 
 export interface ColorAreaRenderProps {
@@ -19,7 +26,13 @@ export interface ColorAreaRenderProps {
   state: ColorAreaState
 }
 
-export interface ColorAreaProps extends AriaColorAreaProps, RenderProps<ColorAreaRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {}
+export interface ColorAreaProps extends AriaColorAreaProps, RenderProps<ColorAreaRenderProps>, 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-ColorArea'
+   */
+  className?: ClassNameOrFunction<ColorAreaRenderProps>
+}
 
 export const ColorAreaStateContext = createContext<ColorAreaState | null>(null);
 

package/src/ColorField.tsx

@@ -11,6 +11,17 @@
  */
 
 import {AriaColorFieldProps, useColorChannelField, useColorField, useLocale} from 'react-aria';
+import {
+  ClassNameOrFunction,
+  Provider,
+  RACValidation,
+  removeDataAttributes,
+  RenderProps,
+  SlotProps,
+  useContextProps,
+  useRenderProps,
+  useSlot
+} from './utils';
 import {ColorChannel, ColorFieldState, ColorSpace, useColorChannelFieldState, useColorFieldState} from 'react-stately';
 import {ColorFieldContext} from './RSPContexts';
 import {FieldErrorContext} from './FieldError';
@@ -19,7 +30,6 @@ import {GlobalDOMAttributes, InputDOMProps, ValidationResult} from '@react-types
 import {GroupContext} from './Group';
 import {InputContext} from './Input';
 import {LabelContext} from './Label';
-import {Provider, RACValidation, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
 import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes, Ref, useRef} from 'react';
 import {TextContext} from './Text';
 
@@ -46,6 +56,11 @@ export interface ColorFieldRenderProps {
 }
 
 export interface ColorFieldProps extends Omit<AriaColorFieldProps, 'label' | 'placeholder' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, InputDOMProps, RenderProps<ColorFieldRenderProps>, 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-ColorField'
+   */
+  className?: ClassNameOrFunction<ColorFieldRenderProps>,
   /**
    * The color channel that this field edits. If not provided, 
    * the color is edited as a hex value.

package/src/ColorPicker.tsx

@@ -10,12 +10,12 @@
  * governing permissions and limitations under the License.
  */
 
+import {ChildrenOrFunction, Provider, SlotProps, SlottedContextValue, useRenderProps, useSlottedContext} from './utils';
 import {Color, ColorPickerState, ColorPickerProps as StatelyColorPickerProps, useColorPickerState} from 'react-stately';
 import {ColorAreaContext, ColorFieldContext, ColorSliderContext, ColorWheelContext} from './RSPContexts';
 import {ColorSwatchContext} from './ColorSwatch';
 import {ColorSwatchPickerContext} from './ColorSwatchPicker';
 import {mergeProps} from 'react-aria';
-import {Provider, RenderProps, SlotProps, SlottedContextValue, useRenderProps, useSlottedContext} from './utils';
 import React, {createContext, JSX} from 'react';
 
 export interface ColorPickerRenderProps {
@@ -23,7 +23,10 @@ export interface ColorPickerRenderProps {
   color: Color
 }
 
-export interface ColorPickerProps extends StatelyColorPickerProps, SlotProps, Pick<RenderProps<ColorPickerRenderProps>, 'children'> {}
+export interface ColorPickerProps extends StatelyColorPickerProps, SlotProps {
+  /** The children of the component. A function may be provided to alter the children based on component state. */
+  children: ChildrenOrFunction<ColorPickerRenderProps>
+}
 
 export const ColorPickerContext = createContext<SlottedContextValue<ColorPickerProps>>(null);
 export const ColorPickerStateContext = createContext<ColorPickerState | null>(null);

package/src/ColorSlider.tsx

@@ -1,11 +1,19 @@
 import {AriaColorSliderProps, Orientation, useColorSlider, useLocale} from 'react-aria';
+import {
+  ClassNameOrFunction,
+  Provider,
+  RenderProps,
+  SlotProps,
+  useContextProps,
+  useRenderProps,
+  useSlot
+} from './utils';
 import {ColorSliderContext} from './RSPContexts';
 import {ColorSliderState, useColorSliderState} from 'react-stately';
 import {filterDOMProps} from '@react-aria/utils';
 import {GlobalDOMAttributes} from '@react-types/shared';
 import {InternalColorThumbContext} from './ColorThumb';
 import {LabelContext} from './Label';
-import {Provider, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
 import React, {createContext, ForwardedRef, forwardRef} from 'react';
 import {SliderOutputContext, SliderStateContext, SliderTrackContext} from './Slider';
 
@@ -26,7 +34,13 @@ export interface ColorSliderRenderProps {
   state: ColorSliderState
 }
 
-export interface ColorSliderProps extends Omit<AriaColorSliderProps, 'label'>, RenderProps<ColorSliderRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {}
+export interface ColorSliderProps extends Omit<AriaColorSliderProps, 'label'>, RenderProps<ColorSliderRenderProps>, 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-ColorSlider'
+   */
+  className?: ClassNameOrFunction<ColorSliderRenderProps>
+}
 
 export const ColorSliderStateContext = createContext<ColorSliderState | null>(null);
 

package/src/ColorSwatch.tsx

@@ -1,6 +1,13 @@
 import {AriaColorSwatchProps, useColorSwatch} from 'react-aria';
+import {
+  ClassNameOrFunction,
+  ContextValue,
+  SlotProps,
+  StyleRenderProps,
+  useContextProps,
+  useRenderProps
+} from './utils';
 import {Color} from 'react-stately';
-import {ContextValue, SlotProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';
 import {filterDOMProps, mergeProps} from '@react-aria/utils';
 import {GlobalDOMAttributes} from '@react-types/shared';
 import React, {createContext, ForwardedRef, forwardRef} from 'react';
@@ -10,7 +17,13 @@ export interface ColorSwatchRenderProps {
   color: Color
 }
 
-export interface ColorSwatchProps extends AriaColorSwatchProps, StyleRenderProps<ColorSwatchRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {}
+export interface ColorSwatchProps extends AriaColorSwatchProps, StyleRenderProps<ColorSwatchRenderProps>, 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-ColorSwatch'
+   */
+  className?: ClassNameOrFunction<ColorSwatchRenderProps>
+}
 
 export const ColorSwatchContext = createContext<ContextValue<ColorSwatchProps, HTMLDivElement>>(null);