Skip to content

Commit bbd6a6f

Browse files
snowystingersnowystinger
committed
fix docs
1 parent 2d55869 commit bbd6a6f

File tree

11 files changed

+115
-115
lines changed

11 files changed

+115
-115
lines changed

‎packages/@react-spectrum/autocomplete/src/MobileSearchAutocomplete.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -52,8 +52,8 @@ import {useFormValidation} from '@react-aria/form';
5252
import {useProviderProps} from '@react-spectrum/provider';
5353
import {useSearchAutocomplete} from '@react-aria/autocomplete';
5454

55-
function ForwardMobileSearchAutocomplete<T extends object>(outerProps: SpectrumSearchAutocompleteProps<T>, ref: FocusableRef<HTMLElement>) {
56-
let props = useProviderProps(outerProps);
55+
function ForwardMobileSearchAutocomplete<T extends object>(props: SpectrumSearchAutocompleteProps<T>, ref: FocusableRef<HTMLElement>) {
56+
let allProps = useProviderProps(props);
5757

5858
let {
5959
isQuiet,
@@ -64,11 +64,11 @@ function ForwardMobileSearchAutocomplete<T extends object>(outerProps: SpectrumS
6464
name,
6565
isReadOnly,
6666
onSubmit = () => {}
67-
} = props;
67+
} = allProps;
6868

6969
let {contains} = useFilter({sensitivity: 'base'});
7070
let state = useComboBoxState({
71-
...props,
71+
...allProps,
7272
defaultFilter: contains,
7373
allowsEmptyCollection: true,
7474
// Needs to be false here otherwise we double up on commitSelection/commitCustomValue calls when
@@ -88,15 +88,15 @@ function ForwardMobileSearchAutocomplete<T extends object>(outerProps: SpectrumS
8888

8989
let inputRef = useRef<HTMLInputElement>(null);
9090
useFormValidation({
91-
...props,
91+
...allProps,
9292
focus: () => buttonRef.current?.focus()
9393
}, state, inputRef);
9494
let {isInvalid, validationErrors, validationDetails} = state.displayValidation;
95-
let validationState = props.validationState || (isInvalid ? 'invalid' : undefined);
96-
let errorMessage = props.errorMessage ?? validationErrors.join(' ');
95+
let validationState = allProps.validationState || (isInvalid ? 'invalid' : undefined);
96+
let errorMessage = allProps.errorMessage ?? validationErrors.join(' ');
9797

9898
let {labelProps: fieldLabelProps, fieldProps, descriptionProps, errorMessageProps} = useField({
99-
...props,
99+
...allProps,
100100
labelElementType: 'span',
101101
isInvalid,
102102
errorMessage
@@ -106,7 +106,7 @@ function ForwardMobileSearchAutocomplete<T extends object>(outerProps: SpectrumS
106106
...fieldLabelProps,
107107
// Focus the button and show focus ring when clicking on the label
108108
onClick: () => {
109-
if (!props.isDisabled && buttonRef.current) {
109+
if (!allProps.isDisabled && buttonRef.current) {
110110
buttonRef.current.focus();
111111
setInteractionModality('keyboard');
112112
}
@@ -134,7 +134,7 @@ function ForwardMobileSearchAutocomplete<T extends object>(outerProps: SpectrumS
134134
return (
135135
<>
136136
<Field
137-
{...props}
137+
{...allProps}
138138
labelProps={labelProps}
139139
descriptionProps={descriptionProps}
140140
errorMessageProps={errorMessageProps}
@@ -155,13 +155,13 @@ function ForwardMobileSearchAutocomplete<T extends object>(outerProps: SpectrumS
155155
inputValue={state.inputValue}
156156
clearInput={() => state.setInputValue('')}
157157
onPress={() => !isReadOnly && state.open(null, 'manual')}>
158-
{state.inputValue || props.placeholder || ''}
158+
{state.inputValue || allProps.placeholder || ''}
159159
</SearchAutocompleteButton>
160160
</Field>
161161
<input {...inputProps} ref={inputRef} />
162162
<Tray state={state} isFixedHeight {...overlayProps}>
163163
<SearchAutocompleteTray
164-
{...props}
164+
{...allProps}
165165
onClose={state.close}
166166
overlayProps={overlayProps}
167167
state={state} />

‎packages/@react-spectrum/autocomplete/src/SearchAutocomplete.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -46,24 +46,24 @@ import {useHover} from '@react-aria/interactions';
4646
import {useProvider, useProviderProps} from '@react-spectrum/provider';
4747
import {useSearchAutocomplete} from '@react-aria/autocomplete';
4848

49-
function SearchAutocomplete<T extends object>(outerProps: SpectrumSearchAutocompleteProps<T>, ref: FocusableRef<HTMLElement>) {
50-
let withProviderProps = useProviderProps(outerProps);
51-
let props = useFormProps(withProviderProps);
49+
function SearchAutocomplete<T extends object>(props: SpectrumSearchAutocompleteProps<T>, ref: FocusableRef<HTMLElement>) {
50+
let propsWithProvider = useProviderProps(props);
51+
let allProps = useFormProps(propsWithProvider);
5252

5353
let hasWarned = useRef(false);
5454
useEffect(() => {
55-
if (props.placeholder && !hasWarned.current && process.env.NODE_ENV !== 'production') {
55+
if (allProps.placeholder && !hasWarned.current && process.env.NODE_ENV !== 'production') {
5656
console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead.');
5757
hasWarned.current = true;
5858
}
59-
}, [props.placeholder]);
59+
}, [allProps.placeholder]);
6060

6161
let isMobile = useIsMobileDevice();
6262
if (isMobile) {
6363
// menuTrigger=focus/manual don't apply to mobile searchwithin
64-
return <MobileSearchAutocomplete {...props} menuTrigger="input" ref={ref} />;
64+
return <MobileSearchAutocomplete {...allProps} menuTrigger="input" ref={ref} />;
6565
} else {
66-
return <SearchAutocompleteBase {...props} ref={ref} />;
66+
return <SearchAutocompleteBase {...allProps} ref={ref} />;
6767
}
6868
}
6969

‎packages/@react-spectrum/color/src/ColorField.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -26,23 +26,23 @@ import {useProviderProps} from '@react-spectrum/provider';
2626
/**
2727
* A color field allows users to edit a hex color or individual color channel value.
2828
*/
29-
export const ColorField = React.forwardRef(function ColorField(outerProps: SpectrumColorFieldProps, ref: Ref<TextFieldRef>) {
30-
let withProviderProps = useProviderProps(outerProps);
31-
let withFormProps = useFormProps(withProviderProps);
32-
let [props] = useContextProps(withFormProps, null, ColorFieldContext);
29+
export const ColorField = React.forwardRef(function ColorField(props: SpectrumColorFieldProps, ref: Ref<TextFieldRef>) {
30+
let propsWithProvider = useProviderProps(props);
31+
let propsWithForm = useFormProps(propsWithProvider);
32+
let [allProps] = useContextProps(propsWithForm, null, ColorFieldContext);
3333

3434
let hasWarned = useRef(false);
3535
useEffect(() => {
36-
if (props.placeholder && !hasWarned.current && process.env.NODE_ENV !== 'production') {
36+
if (allProps.placeholder && !hasWarned.current && process.env.NODE_ENV !== 'production') {
3737
console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ColorField.html#help-text');
3838
hasWarned.current = true;
3939
}
40-
}, [props.placeholder]);
40+
}, [allProps.placeholder]);
4141

42-
if (props.channel) {
43-
return <ColorChannelField {...props} channel={props.channel} forwardedRef={ref} />;
42+
if (allProps.channel) {
43+
return <ColorChannelField {...allProps} channel={allProps.channel} forwardedRef={ref} />;
4444
} else {
45-
return <HexColorField {...props} forwardedRef={ref} />;
45+
return <HexColorField {...allProps} forwardedRef={ref} />;
4646
}
4747
});
4848

‎packages/@react-spectrum/combobox/src/ComboBox.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -56,24 +56,24 @@ import {useProvider, useProviderProps} from '@react-spectrum/provider';
5656
/**
5757
* ComboBoxes combine a text entry with a picker menu, allowing users to filter longer lists to only the selections matching a query.
5858
*/
59-
export const ComboBox = React.forwardRef(function ComboBox<T extends object>(outerProps: SpectrumComboBoxProps<T>, ref: FocusableRef<HTMLElement>) {
60-
let withProviderProps = useProviderProps(outerProps);
61-
let props = useFormProps(withProviderProps);
59+
export const ComboBox = React.forwardRef(function ComboBox<T extends object>(props: SpectrumComboBoxProps<T>, ref: FocusableRef<HTMLElement>) {
60+
let propsWithProvider = useProviderProps(props);
61+
let allProps = useFormProps(propsWithProvider);
6262

6363
let hasWarned = useRef(false);
6464
useEffect(() => {
65-
if (props.placeholder && !hasWarned.current && process.env.NODE_ENV !== 'production') {
65+
if (allProps.placeholder && !hasWarned.current && process.env.NODE_ENV !== 'production') {
6666
console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ComboBox.html#help-text');
6767
hasWarned.current = true;
6868
}
69-
}, [props.placeholder]);
69+
}, [allProps.placeholder]);
7070

7171
let isMobile = useIsMobileDevice();
7272
if (isMobile) {
7373
// menuTrigger=focus/manual don't apply to mobile combobox
74-
return <MobileComboBox {...props} menuTrigger="input" ref={ref} />;
74+
return <MobileComboBox {...allProps} menuTrigger="input" ref={ref} />;
7575
} else {
76-
return <ComboBoxBase {...props} ref={ref} />;
76+
return <ComboBoxBase {...allProps} ref={ref} />;
7777
}
7878
}) as <T>(props: SpectrumComboBoxProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;
7979

‎packages/@react-spectrum/combobox/src/MobileComboBox.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,8 @@ import {useFilter, useLocalizedStringFormatter} from '@react-aria/i18n';
4545
import {useFormValidation} from '@react-aria/form';
4646
import {useProviderProps} from '@react-spectrum/provider';
4747

48-
export const MobileComboBox = React.forwardRef(function MobileComboBox(outerProps: SpectrumComboBoxProps<any>, ref: FocusableRef<HTMLElement>) {
49-
let props = useProviderProps(outerProps);
48+
export const MobileComboBox = React.forwardRef(function MobileComboBox(props: SpectrumComboBoxProps<any>, ref: FocusableRef<HTMLElement>) {
49+
let allProps = useProviderProps(props);
5050

5151
let {
5252
isQuiet,
@@ -57,14 +57,14 @@ export const MobileComboBox = React.forwardRef(function MobileComboBox(outerProp
5757
name,
5858
formValue = 'text',
5959
allowsCustomValue
60-
} = props;
60+
} = allProps;
6161
if (allowsCustomValue) {
6262
formValue = 'text';
6363
}
6464

6565
let {contains} = useFilter({sensitivity: 'base'});
6666
let state = useComboBoxState({
67-
...props,
67+
...allProps,
6868
defaultFilter: contains,
6969
allowsEmptyCollection: true,
7070
// Needs to be false here otherwise we double up on commitSelection/commitCustomValue calls when
@@ -79,15 +79,15 @@ export const MobileComboBox = React.forwardRef(function MobileComboBox(outerProp
7979

8080
let inputRef = useRef<HTMLInputElement>(null);
8181
useFormValidation({
82-
...props,
82+
...allProps,
8383
focus: () => buttonRef.current?.focus()
8484
}, state, inputRef);
8585
let {isInvalid, validationErrors, validationDetails} = state.displayValidation;
86-
let validationState = props.validationState || (isInvalid ? 'invalid' : undefined);
87-
let errorMessage = props.errorMessage ?? validationErrors.join(' ');
86+
let validationState = allProps.validationState || (isInvalid ? 'invalid' : undefined);
87+
let errorMessage = allProps.errorMessage ?? validationErrors.join(' ');
8888

8989
let {labelProps: fieldLabelProps, fieldProps, descriptionProps, errorMessageProps} = useField({
90-
...props,
90+
...allProps,
9191
labelElementType: 'span',
9292
isInvalid,
9393
errorMessage
@@ -97,7 +97,7 @@ export const MobileComboBox = React.forwardRef(function MobileComboBox(outerProp
9797
...fieldLabelProps,
9898
onClick: () => {
9999
// Focus the button and show focus ring when clicking on the label
100-
if (!props.isDisabled) {
100+
if (!allProps.isDisabled) {
101101
buttonRef.current?.focus();
102102
setInteractionModality('keyboard');
103103
}
@@ -129,7 +129,7 @@ export const MobileComboBox = React.forwardRef(function MobileComboBox(outerProp
129129
return (
130130
<>
131131
<Field
132-
{...props}
132+
{...allProps}
133133
labelProps={labelProps}
134134
descriptionProps={descriptionProps}
135135
errorMessageProps={errorMessageProps}
@@ -148,13 +148,13 @@ export const MobileComboBox = React.forwardRef(function MobileComboBox(outerProp
148148
isPlaceholder={!state.inputValue}
149149
validationState={validationState}
150150
onPress={() => !isReadOnly && state.open(null, 'manual')}>
151-
{state.inputValue || props.placeholder || ''}
151+
{state.inputValue || allProps.placeholder || ''}
152152
</ComboBoxButton>
153153
</Field>
154154
<input {...inputProps} ref={inputRef} />
155155
<Tray state={state} isFixedHeight {...overlayProps}>
156156
<ComboBoxTray
157-
{...props}
157+
{...allProps}
158158
onClose={state.close}
159159
overlayProps={overlayProps}
160160
state={state} />

‎packages/@react-spectrum/datepicker/src/DateRangePicker.tsx‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -42,20 +42,20 @@ import {useProviderProps} from '@react-spectrum/provider';
4242
* DateRangePickers combine two DateFields and a RangeCalendar popover to allow users
4343
* to enter or select a date and time range.
4444
*/
45-
export const DateRangePicker = React.forwardRef(function DateRangePicker<T extends DateValue>(outerProps: SpectrumDateRangePickerProps<T>, ref: FocusableRef<HTMLElement>) {
46-
let withProviderProps = useProviderProps(outerProps);
47-
let props = useFormProps(withProviderProps);
45+
export const DateRangePicker = React.forwardRef(function DateRangePicker<T extends DateValue>(props: SpectrumDateRangePickerProps<T>, ref: FocusableRef<HTMLElement>) {
46+
let propsWithProvider = useProviderProps(props);
47+
let allProps = useFormProps(propsWithProvider);
4848
let {
4949
isQuiet,
5050
isDisabled,
5151
autoFocus,
5252
placeholderValue,
5353
maxVisibleMonths = 1
54-
} = props;
54+
} = allProps;
5555
let {hoverProps, isHovered} = useHover({isDisabled});
5656
let targetRef = useRef<HTMLDivElement | null>(null);
5757
let state = useDateRangePickerState({
58-
...props,
58+
...allProps,
5959
shouldCloseOnSelect: () => !state.hasTime
6060
});
6161
let {labelProps, groupProps, buttonProps, dialogProps, startFieldProps, endFieldProps, descriptionProps, errorMessageProps, calendarProps, isInvalid, validationErrors, validationDetails} = useDateRangePicker(props, state, targetRef);
@@ -100,16 +100,16 @@ export const DateRangePicker = React.forwardRef(function DateRangePicker<T exten
100100

101101
// Note: this description is intentionally not passed to useDatePicker.
102102
// The format help text is unnecessary for screen reader users because each segment already has a label.
103-
let description = useFormatHelpText(props);
103+
let description = useFormatHelpText(allProps);
104104
let newDescriptionProps = {...descriptionProps};
105-
if (description && !props.description) {
105+
if (description && !allProps.description) {
106106
newDescriptionProps.id = undefined;
107107
}
108108

109109
let placeholder: DateValue | null | undefined = placeholderValue;
110110
let timePlaceholder = placeholder && 'hour' in placeholder ? placeholder : null;
111-
let timeMinValue = props.minValue && 'hour' in props.minValue ? props.minValue : null;
112-
let timeMaxValue = props.maxValue && 'hour' in props.maxValue ? props.maxValue : null;
111+
let timeMinValue = allProps.minValue && 'hour' in allProps.minValue ? allProps.minValue : null;
112+
let timeMaxValue = allProps.maxValue && 'hour' in allProps.maxValue ? allProps.maxValue : null;
113113
let timeGranularity = state.granularity === 'hour' || state.granularity === 'minute' || state.granularity === 'second' ? state.granularity : null;
114114
let showTimeField = !!timeGranularity;
115115

@@ -121,7 +121,7 @@ export const DateRangePicker = React.forwardRef(function DateRangePicker<T exten
121121

122122
return (
123123
<Field
124-
{...props}
124+
{...allProps}
125125
ref={domRef}
126126
elementType="span"
127127
description={description}
@@ -149,13 +149,13 @@ export const DateRangePicker = React.forwardRef(function DateRangePicker<T exten
149149
<DatePickerField
150150
{...startFieldProps}
151151
data-testid="start-date"
152-
isQuiet={props.isQuiet}
152+
isQuiet={allProps.isQuiet}
153153
inputClassName={classNames(datepickerStyles, 'react-spectrum-Datepicker-startField')} />
154154
<DateRangeDash />
155155
<DatePickerField
156156
{...endFieldProps}
157157
data-testid="end-date"
158-
isQuiet={props.isQuiet}
158+
isQuiet={allProps.isQuiet}
159159
inputClassName={classNames(
160160
styles,
161161
'spectrum-Datepicker-endField',
@@ -174,7 +174,7 @@ export const DateRangePicker = React.forwardRef(function DateRangePicker<T exten
174174
hideArrow
175175
isOpen={isOpen}
176176
onOpenChange={setOpen}
177-
shouldFlip={props.shouldFlip}>
177+
shouldFlip={allProps.shouldFlip}>
178178
<FieldButton
179179
{...mergeProps(buttonProps, focusPropsButton)}
180180
UNSAFE_className={classNames(styles, 'spectrum-FieldButton')}
@@ -188,7 +188,7 @@ export const DateRangePicker = React.forwardRef(function DateRangePicker<T exten
188188
<RangeCalendar
189189
{...calendarProps}
190190
visibleMonths={visibleMonths}
191-
createCalendar={props.createCalendar}
191+
createCalendar={allProps.createCalendar}
192192
UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-calendar', {'is-invalid': validationState === 'invalid'})} />
193193
{showTimeField &&
194194
<Flex gap="size-100" marginTop="size-100" UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-timeFields')}>
@@ -200,8 +200,8 @@ export const DateRangePicker = React.forwardRef(function DateRangePicker<T exten
200200
granularity={timeGranularity}
201201
minValue={timeMinValue}
202202
maxValue={timeMaxValue}
203-
hourCycle={props.hourCycle}
204-
hideTimeZone={props.hideTimeZone}
203+
hourCycle={allProps.hourCycle}
204+
hideTimeZone={allProps.hideTimeZone}
205205
flex />
206206
<TimeField
207207
label={stringFormatter.format('endTime')}
@@ -211,8 +211,8 @@ export const DateRangePicker = React.forwardRef(function DateRangePicker<T exten
211211
granularity={timeGranularity}
212212
minValue={timeMinValue}
213213
maxValue={timeMaxValue}
214-
hourCycle={props.hourCycle}
215-
hideTimeZone={props.hideTimeZone}
214+
hourCycle={allProps.hourCycle}
215+
hideTimeZone={allProps.hideTimeZone}
216216
flex />
217217
</Flex>
218218
}

0 commit comments

Comments
 (0)