diff --git a/packages/dev/s2-docs/pages/s2/NumberField.mdx b/packages/dev/s2-docs/pages/s2/NumberField.mdx
index 733673f2c0c..b8837eb2dbc 100644
--- a/packages/dev/s2-docs/pages/s2/NumberField.mdx
+++ b/packages/dev/s2-docs/pages/s2/NumberField.mdx
@@ -12,9 +12,10 @@ import docs from 'docs:@react-spectrum/s2';
component={NumberField}
docs={docs.exports.NumberField}
links={docs.links}
- props={['label', 'size', 'labelPosition', 'description', 'contextualHelp', 'hideStepper', 'isDisabled']}
+ props={['label', 'placeholder', 'size', 'labelPosition', 'description', 'contextualHelp', 'hideStepper', 'isDisabled']}
initialProps={{
label: 'Width',
+ placeholder: 'Enter a number',
defaultValue: 1024,
minValue: 0
}}
@@ -36,6 +37,7 @@ function Example() {
-
+
```
@@ -103,7 +110,7 @@ import {Provider, NumberField} from '@react-spectrum/s2';
Use the `name` prop to submit the raw number value (not a formatted string) to the server. Set the `isRequired` prop to validate that the user enters a value, or implement custom client or server-side validation. See the Forms guide to learn more.
-```tsx render docs={docs.exports.NumberField} links={docs.links} props={['isRequired', 'necessityIndicator']} initialProps={{isRequired: true}} type="s2"
+```tsx render docs={docs.exports.NumberField} links={docs.links} props={['isRequired', 'necessityIndicator']} initialProps={{isRequired: true, placeholder: 'Enter a number'}} type="s2"
"use client";
import {NumberField, Button, Form} from '@react-spectrum/s2';
@@ -126,4 +133,4 @@ function Example(props) {
## API
-
\ No newline at end of file
+
diff --git a/packages/dev/s2-docs/pages/s2/SearchField.mdx b/packages/dev/s2-docs/pages/s2/SearchField.mdx
index b73936a05b2..b935438595c 100644
--- a/packages/dev/s2-docs/pages/s2/SearchField.mdx
+++ b/packages/dev/s2-docs/pages/s2/SearchField.mdx
@@ -12,9 +12,10 @@ import docs from 'docs:@react-spectrum/s2';
component={SearchField}
docs={docs.exports.SearchField}
links={docs.links}
- props={['label', 'size', 'labelPosition', 'description', 'contextualHelp', 'isDisabled']}
+ props={['label', 'placeholder', 'size', 'labelPosition', 'description', 'contextualHelp', 'isDisabled']}
initialProps={{
- label: 'Search'
+ label: 'Search',
+ placeholder: 'Search documents'
}}
importSource="@react-spectrum/s2"
type="s2" />
@@ -31,11 +32,12 @@ import {useState} from 'react';
function Example() {
let [search, setSearch] = useState('');
let [submittedSearch, setSubmittedSearch] = useState('');
-
+
return (
@@ -30,11 +31,12 @@ import {useState} from 'react';
function Example() {
let [name, setName] = useState('');
-
+
return (
<>
@@ -59,6 +61,7 @@ function Example(props) {
@@ -30,11 +31,12 @@ import {useState} from 'react';
function Example() {
let [name, setName] = useState('');
-
+
return (
<>
@@ -59,6 +61,7 @@ function Example(props) {
-
+
{item => }
diff --git a/packages/dev/s2-docs/src/IllustrationCards.tsx b/packages/dev/s2-docs/src/IllustrationCards.tsx
index 56b1bcb6fbd..b91c11add1d 100644
--- a/packages/dev/s2-docs/src/IllustrationCards.tsx
+++ b/packages/dev/s2-docs/src/IllustrationCards.tsx
@@ -60,7 +60,7 @@ export function IllustrationCards() {
Linear
onChange({...objectValue, text})}
styles={style({width: 80, flexGrow: 1})} />
@@ -714,14 +717,14 @@ function ChildrenControl({control, value, onChange}: ControlProps) {
)}
{(control.slots.avatar || control.slots.badge) &&
- {control.slots.avatar &&
+ {control.slots.avatar &&
onChange({...objectValue, avatar})}>
Avatar
}
- {control.slots.badge &&
+ {control.slots.badge &&
onChange({...objectValue, badge})}>
@@ -848,7 +851,7 @@ function LocaleControl({control, value, onChange}: ControlProps) {
let updateLocale = locale => {
let calendar, numberingSystem;
if (extension === 'calendar') {
- calendar = (preferences.find(p => p.value === locale)?.ordering || 'gregory').split(' ')[0];
+ calendar = (preferences.find(p => p.value === locale)?.ordering || 'gregory').split(' ')[0];
} else if (extension === 'numberingSystem') {
numberingSystem = new Intl.NumberFormat(locale).resolvedOptions().numberingSystem;
if (numberingSystem === 'arabext') {
@@ -930,6 +933,7 @@ function DurationControl({control, value, onChange}: ControlProps) {
return (
}
value={value.months}
minValue={1}
@@ -983,7 +987,7 @@ function ColorSpaceControl({control, value}) {
if (props.channel) {
props.channel = getColorChannels(colorSpace)[0];
}
-
+
delete props.xChannel;
delete props.yChannel;
return props;
@@ -1034,7 +1038,7 @@ function PlacementControl({control, value, onChange}) {
function PlacementControlItem(props) {
return (
- (null);
return (
- {value.length === 0 &&
+ {value.length === 0 &&
onChange(new Size(width, value?.height ?? 0))}
styles={style({flexShrink: 1, flexGrow: 1})}
hideStepper />
onChange(new Size(value?.width ?? 0, height))}
styles={style({flexShrink: 1, flexGrow: 1})}
diff --git a/packages/react-aria-components/src/Autocomplete.tsx b/packages/react-aria-components/src/Autocomplete.tsx
index 11370b2363a..34dc9c46f44 100644
--- a/packages/react-aria-components/src/Autocomplete.tsx
+++ b/packages/react-aria-components/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';
diff --git a/packages/react-aria-components/src/GridList.tsx b/packages/react-aria-components/src/GridList.tsx
index 5229595ea62..6c087d25295 100644
--- a/packages/react-aria-components/src/GridList.tsx
+++ b/packages/react-aria-components/src/GridList.tsx
@@ -11,17 +11,15 @@
*/
import {AriaGridListProps, DraggableItemResult, DragPreviewRenderer, DropIndicatorAria, DroppableCollectionResult, FocusScope, ListKeyboardDelegate, mergeProps, useCollator, useFocusRing, useGridList, useGridListItem, useGridListSection, useGridListSelectionCheckbox, useHover, useLocale, useVisuallyHidden} from 'react-aria';
import {ButtonContext} from './Button';
-import {CheckboxContext} from './RSPContexts';
+import {CheckboxContext, FieldInputContext, SelectableCollectionContext, SelectableCollectionContextValue} from './RSPContexts';
import {Collection, CollectionBuilder, createBranchComponent, createLeafComponent, HeaderNode, ItemNode, LoaderNode, SectionNode} from '@react-aria/collections';
import {CollectionProps, CollectionRendererContext, DefaultCollectionRenderer, ItemRenderProps, SectionProps} from './Collection';
import {ContextValue, DEFAULT_SLOT, Provider, RenderProps, SlotProps, StyleProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';
import {DragAndDropContext, DropIndicatorContext, DropIndicatorProps, useDndPersistedKeys, useRenderDropIndicator} from './DragAndDrop';
import {DragAndDropHooks} from './useDragAndDrop';
import {DraggableCollectionState, DroppableCollectionState, Collection as ICollection, ListState, Node, SelectionBehavior, UNSTABLE_useFilteredListState, useListState} from 'react-stately';
-import {FieldInputContext, SelectableCollectionContext} from './context';
import {filterDOMProps, inertValue, LoadMoreSentinelProps, useLoadMoreSentinel, useObjectRef} from '@react-aria/utils';
import {forwardRefType, GlobalDOMAttributes, HoverEvents, Key, LinkDOMProps, PressEvents, RefObject} from '@react-types/shared';
-import {HeaderContext} from './Header';
import {ListStateContext} from './ListBox';
import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, JSX, ReactNode, useContext, useEffect, useMemo, useRef} from 'react';
import {SelectionIndicatorContext} from './SelectionIndicator';
@@ -101,29 +99,25 @@ export const GridList = /*#__PURE__*/ (forwardRef as forwardRefType)(function Gr
});
interface GridListInnerProps {
- props: GridListProps,
+ props: GridListProps & SelectableCollectionContextValue,
collection: ICollection>,
- gridListRef: RefObject
+ gridListRef: RefObject
}
function GridListInner({props, collection, gridListRef: ref}: GridListInnerProps) {
- // TODO: for now, don't grab collection ref and collectionProps from the autocomplete, rely on the user tabbing to the gridlist
- // figure out if we want to support virtual focus for grids when wrapped in an autocomplete
- let contextProps;
- [contextProps] = useContextProps({}, null, SelectableCollectionContext);
- let {filter, ...collectionProps} = contextProps;
+ [props, ref] = useContextProps(props, ref, SelectableCollectionContext);
// eslint-disable-next-line @typescript-eslint/no-unused-vars
- let {shouldUseVirtualFocus, disallowTypeAhead, ...DOMCollectionProps} = collectionProps || {};
+ let {shouldUseVirtualFocus, filter, disallowTypeAhead, ...DOMCollectionProps} = props;
let {dragAndDropHooks, keyboardNavigationBehavior = 'arrow', layout = 'stack'} = props;
let {CollectionRoot, isVirtualized, layoutDelegate, dropTargetDelegate: ctxDropTargetDelegate} = useContext(CollectionRendererContext);
let gridlistState = useListState({
- ...props,
+ ...DOMCollectionProps,
collection,
children: undefined,
layoutDelegate
});
- let filteredState = UNSTABLE_useFilteredListState(gridlistState, filter);
+ let filteredState = UNSTABLE_useFilteredListState(gridlistState as ListState, filter);
let collator = useCollator({usage: 'search', sensitivity: 'base'});
let {disabledBehavior, disabledKeys} = filteredState.selectionManager;
let {direction} = useLocale();
@@ -141,7 +135,6 @@ function GridListInner({props, collection, gridListRef: ref}:
), [filteredState.collection, ref, layout, disabledKeys, disabledBehavior, layoutDelegate, collator, direction]);
let {gridProps} = useGridList({
- ...props,
...DOMCollectionProps,
keyboardDelegate,
// Only tab navigation is supported in grid layout.
@@ -246,7 +239,7 @@ function GridListInner({props, collection, gridListRef: ref}:
}
slot={props.slot || undefined}
onScroll={props.onScroll}
data-drop-target={isRootDropTarget || undefined}
@@ -585,11 +578,11 @@ export interface GridListSectionProps
extends SectionProps {}
/**
* A GridListSection represents a section within a GridList.
*/
-export const GridListSection = /*#__PURE__*/ createBranchComponent(SectionNode, (props: GridListSectionProps, ref: ForwardedRef, item: Node) => {
+export const GridListSection = /*#__PURE__*/ createBranchComponent(SectionNode, (props: GridListSectionProps, ref: ForwardedRef, item: Node) => {
let state = useContext(ListStateContext)!;
let {CollectionBranch} = useContext(CollectionRendererContext);
let headingRef = useRef(null);
- ref = useObjectRef(ref);
+ ref = useObjectRef(ref);
let {rowHeaderProps, rowProps, rowGroupProps} = useGridListSection({
'aria-label': props['aria-label'] ?? undefined
}, state, ref);
@@ -604,33 +597,34 @@ export const GridListSection = /*#__PURE__*/ createBranchComponent(SectionNode,
delete DOMProps.id;
return (
-
+ }],
[ListStateContext, filteredState],
[TextContext, {
slots: {
diff --git a/packages/react-aria-components/src/TextField.tsx b/packages/react-aria-components/src/TextField.tsx
index 3899bf22b07..5be86cef6d3 100644
--- a/packages/react-aria-components/src/TextField.tsx
+++ b/packages/react-aria-components/src/TextField.tsx
@@ -14,7 +14,7 @@ import {AriaTextFieldProps, useTextField} from 'react-aria';
import {ContextValue, DOMProps, Provider, RACValidation, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot, useSlottedContext} from './utils';
import {createHideableComponent} from '@react-aria/collections';
import {FieldErrorContext} from './FieldError';
-import {FieldInputContext} from './context';
+import {FieldInputContext} from './RSPContexts';
import {filterDOMProps} from '@react-aria/utils';
import {FormContext} from './Form';
import {GlobalDOMAttributes} from '@react-types/shared';
diff --git a/packages/react-aria-components/src/context.tsx b/packages/react-aria-components/src/context.tsx
deleted file mode 100644
index 4ce7a97be30..00000000000
--- a/packages/react-aria-components/src/context.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-/*
- * Copyright 2025 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {AriaLabelingProps, DOMProps, FocusableElement, FocusEvents, KeyboardEvents, Node, ValueBase} from '@react-types/shared';
-import {AriaTextFieldProps} from '@react-aria/textfield';
-import {ContextValue} from './utils';
-import {createContext} from 'react';
-
-export interface SelectableCollectionContextValue
extends DOMProps, AriaLabelingProps {
- filter?: (nodeTextValue: string, node: Node) => boolean,
- /** Whether the collection items should use virtual focus instead of being focused directly. */
- shouldUseVirtualFocus?: boolean,
- /** Whether typeahead is disabled. */
- disallowTypeAhead?: boolean
-}
-
-interface FieldInputContextValue extends
- DOMProps,
- FocusEvents,
- KeyboardEvents,
- Pick, 'onChange' | 'value'>,
- Pick {}
-
-export const SelectableCollectionContext = createContext, HTMLElement>>(null);
-export const FieldInputContext = createContext>(null);
diff --git a/packages/react-aria-components/src/index.ts b/packages/react-aria-components/src/index.ts
index a76ea9c6e8c..dc9bdfb3909 100644
--- a/packages/react-aria-components/src/index.ts
+++ b/packages/react-aria-components/src/index.ts
@@ -14,7 +14,7 @@
// to import it from a React Server Component in a framework like Next.js.
import 'client-only';
-export {CheckboxContext, ColorAreaContext, ColorFieldContext, ColorSliderContext, ColorWheelContext, HeadingContext} from './RSPContexts';
+export {CheckboxContext, ColorAreaContext, ColorFieldContext, ColorSliderContext, ColorWheelContext, HeadingContext, SelectableCollectionContext, FieldInputContext} from './RSPContexts';
export {Autocomplete, AutocompleteContext, AutocompleteStateContext} from './Autocomplete';
export {Breadcrumbs, BreadcrumbsContext, Breadcrumb} from './Breadcrumbs';
@@ -39,7 +39,7 @@ export {DropZone, DropZoneContext} from './DropZone';
export {FieldError, FieldErrorContext} from './FieldError';
export {FileTrigger} from './FileTrigger';
export {Form, FormContext} from './Form';
-export {GridListLoadMoreItem, GridList, GridListItem, GridListContext, GridListHeader, GridListSection} from './GridList';
+export {GridListLoadMoreItem, GridList, GridListItem, GridListContext, GridListHeader, GridListHeaderContext, GridListSection} from './GridList';
export {Group, GroupContext} from './Group';
export {Header, HeaderContext} from './Header';
export {Heading} from './Heading';
@@ -156,3 +156,4 @@ export type {CalendarState, CheckboxGroupState, Color, ColorAreaState, ColorFiel
export type {AutocompleteState} from '@react-stately/autocomplete';
export type {ListLayoutOptions, GridLayoutOptions, WaterfallLayoutOptions} from '@react-stately/layout';
export type {ValidationResult, RouterConfig} from '@react-types/shared';
+export type {SelectableCollectionContextValue} from './RSPContexts';