fixing combobox to use useFormProps and related component refactors (#2351)

* fixing combobox to use useFormProps and related component refactors

* adding props to make sure mobile combobox tray behaves correctly

Co-authored-by: Daniel Lu <[email protected]>

Author: ktabors

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

@@ -447,6 +447,8 @@ function ComboBoxTray(props: ComboBoxTrayProps) {
           isLoading={showLoading && loadingState === 'filtering'}
           loadingIndicator={loadingState != null && loadingCircle}
           validationState={validationState}
+          labelAlign="start"
+          labelPosition="top"
           wrapperChildren={(state.inputValue !== '' || loadingState === 'filtering' || validationState != null) && !props.isReadOnly && clearButton}
           UNSAFE_className={
             classNames(

packages/@react-spectrum/label/package.json

@@ -35,6 +35,7 @@
     "@react-aria/i18n": "^3.3.2",
     "@react-aria/label": "^3.2.0",
     "@react-aria/utils": "^3.9.0",
+    "@react-spectrum/form": "^3.2.3",
     "@react-spectrum/layout": "^3.2.1",
     "@react-spectrum/utils": "^3.6.2",
     "@react-types/label": "^3.5.0",

packages/@react-spectrum/label/src/Field.tsx

@@ -19,8 +19,10 @@ import labelStyles from '@adobe/spectrum-css-temp/components/fieldlabel/vars.css
 import {mergeProps} from '@react-aria/utils';
 import React, {RefObject} from 'react';
 import {SpectrumFieldProps} from '@react-types/label';
+import {useFormProps} from '@react-spectrum/form';
 
 function Field(props: SpectrumFieldProps, ref: RefObject<HTMLElement>) {
+  props = useFormProps(props);
   let {
     label,
     labelPosition = 'top' as LabelPosition,

packages/@react-spectrum/numberfield/package.json

@@ -39,7 +39,6 @@
     "@react-aria/numberfield": "^3.1.0",
     "@react-aria/utils": "^3.9.0",
     "@react-spectrum/button": "^3.6.0",
-    "@react-spectrum/form": "^3.2.3",
     "@react-spectrum/label": "^3.4.0",
     "@react-spectrum/textfield": "^3.2.0",
     "@react-spectrum/utils": "^3.6.2",

packages/@react-spectrum/numberfield/src/NumberField.tsx

@@ -21,7 +21,6 @@ import {SpectrumNumberFieldProps} from '@react-types/numberfield';
 import {StepButton} from './StepButton';
 import stepperStyle from '@adobe/spectrum-css-temp/components/stepper/vars.css';
 import {TextFieldBase} from '@react-spectrum/textfield';
-import {useFormProps} from '@react-spectrum/form';
 import {useHover} from '@react-aria/interactions';
 import {useLocale} from '@react-aria/i18n';
 import {useNumberField} from '@react-aria/numberfield';
@@ -30,7 +29,6 @@ import {useProvider, useProviderProps} from '@react-spectrum/provider';
 
 function NumberField(props: SpectrumNumberFieldProps, ref: FocusableRef<HTMLElement>) {
   props = useProviderProps(props);
-  props = useFormProps(props);
   let provider = useProvider();
   let {
     isQuiet,

packages/@react-spectrum/picker/package.json

@@ -39,7 +39,6 @@
     "@react-aria/select": "^3.5.0",
     "@react-aria/utils": "^3.9.0",
     "@react-spectrum/button": "^3.6.0",
-    "@react-spectrum/form": "^3.2.3",
     "@react-spectrum/label": "^3.4.0",
     "@react-spectrum/listbox": "^3.5.3",
     "@react-spectrum/overlays": "^3.4.4",

packages/@react-spectrum/picker/src/Picker.tsx

@@ -39,15 +39,13 @@ import React, {ReactElement, useCallback, useRef, useState} from 'react';
 import {SpectrumPickerProps} from '@react-types/select';
 import styles from '@adobe/spectrum-css-temp/components/dropdown/vars.css';
 import {Text} from '@react-spectrum/text';
-import {useFormProps} from '@react-spectrum/form';
 import {useMessageFormatter} from '@react-aria/i18n';
 import {useProvider, useProviderProps} from '@react-spectrum/provider';
 import {useSelectState} from '@react-stately/select';
 
 function Picker<T extends object>(props: SpectrumPickerProps<T>, ref: DOMRef<HTMLDivElement>) {
   props = useSlotProps(props, 'picker');
   props = useProviderProps(props);
-  props = useFormProps(props);
   let formatMessage = useMessageFormatter(intlMessages);
   let {
     isDisabled,

packages/@react-spectrum/searchwithin/package.json

@@ -35,7 +35,6 @@
     "@react-aria/label": "^3.1.3",
     "@react-aria/utils": "^3.8.2",
     "@react-spectrum/label": "^3.3.4",
-    "@react-spectrum/form": "^3.2.3",
     "@react-spectrum/utils": "^3.6.2",
     "@react-types/searchwithin": "3.0.0-alpha.0",
     "@react-types/shared": "^3.8.0"

packages/@react-spectrum/searchwithin/src/SearchWithin.tsx

@@ -16,13 +16,11 @@ import {FocusableRef} from '@react-types/shared';
 import React, {useCallback, useLayoutEffect, useRef, useState} from 'react';
 import {SpectrumSearchWithinProps} from '@react-types/searchwithin';
 import styles from '@adobe/spectrum-css-temp/components/searchwithin/vars.css';
-import {useFormProps} from '@react-spectrum/form';
 import {useLabel} from '@react-aria/label';
 import {useProvider, useProviderProps} from '@react-spectrum/provider';
 
 function SearchWithin(props: SpectrumSearchWithinProps, ref: FocusableRef<HTMLElement>) {
   props = useProviderProps(props);
-  props = useFormProps(props);
   let {styleProps} = useStyleProps(props);
   let {labelProps, fieldProps} = useLabel(props);
   let {

packages/@react-spectrum/textfield/package.json

@@ -37,7 +37,6 @@
     "@react-aria/interactions": "^3.6.0",
     "@react-aria/textfield": "^3.4.0",
     "@react-aria/utils": "^3.9.0",
-    "@react-spectrum/form": "^3.2.3",
     "@react-spectrum/label": "^3.4.0",
     "@react-spectrum/utils": "^3.6.2",
     "@react-stately/utils": "^3.2.2",