You're Invited: Meet the Socket team at BSidesSF and RSAC - April 27 - May 1.RSVP →
@react-aria/combobox
Advanced tools
@react-aria/combobox - npm Package Compare versions
Comparing version 3.0.0-nightly.2573 to 3.0.0-nightly.2580
@@ -64,2 +64,8 @@ var { | ||
| /** | ||
| * Provides the behavior and accessibility implementation for a combo box component. | ||
| * A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query. | ||
| * @param props - Props for the combo box. | ||
| * @param state - State for the select, as returned by `useComboBoxState`. | ||
| */ | ||
| function useComboBox(props, state) { | ||
@@ -164,3 +170,3 @@ var _focusedItem$parentKe, _state$selectionManag; | ||
| autoComplete: 'off' | ||
| }), inputRef); // Press handlers for the combobox button | ||
| }), inputRef); // Press handlers for the ComboBox button | ||
@@ -191,3 +197,3 @@ let onPress = e => { | ||
| 'aria-labelledby': props['aria-labelledby'] || labelProps.id | ||
| }); // If a touch happens on direct center of combobox input, might be virtual click from iPad so open combobox menu | ||
| }); // If a touch happens on direct center of ComboBox input, might be virtual click from iPad so open ComboBox menu | ||
@@ -194,0 +200,0 @@ let lastEventTime = useRef(0); |
@@ -20,2 +20,9 @@ import { useTextField } from "@react-aria/textfield"; | ||
| }; | ||
| /** | ||
| * Provides the behavior and accessibility implementation for a combo box component. | ||
| * A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query. | ||
| * @param props - Props for the combo box. | ||
| * @param state - State for the select, as returned by `useComboBoxState`. | ||
| */ | ||
| export function useComboBox(props, state) { | ||
@@ -120,3 +127,3 @@ var _focusedItem$parentKe, _state$selectionManag; | ||
| autoComplete: 'off' | ||
| }), inputRef); // Press handlers for the combobox button | ||
| }), inputRef); // Press handlers for the ComboBox button | ||
@@ -147,3 +154,3 @@ let onPress = e => { | ||
| 'aria-labelledby': props['aria-labelledby'] || labelProps.id | ||
| }); // If a touch happens on direct center of combobox input, might be virtual click from iPad so open combobox menu | ||
| }); // If a touch happens on direct center of ComboBox input, might be virtual click from iPad so open ComboBox menu | ||
@@ -150,0 +157,0 @@ let lastEventTime = useRef(0); |
@@ -7,16 +7,31 @@ import { AriaButtonProps } from "@react-types/button"; | ||
| export interface AriaComboBoxProps<T> extends ComboBoxProps<T> { | ||
| buttonRef: RefObject<HTMLElement>; | ||
| /** The ref for the input element. */ | ||
| inputRef: RefObject<HTMLInputElement | HTMLTextAreaElement>; | ||
| /** The ref for the list box popover. */ | ||
| popoverRef: RefObject<HTMLDivElement>; | ||
| /** The ref for the list box. */ | ||
| listBoxRef: RefObject<HTMLElement>; | ||
| /** The ref for the list box popup trigger button. */ | ||
| buttonRef: RefObject<HTMLElement>; | ||
| /** An optional keyboard delegate implementation, to override the default. */ | ||
| keyboardDelegate?: KeyboardDelegate; | ||
| } | ||
| interface ComboBoxAria { | ||
| /** Props for the combo box menu trigger button. */ | ||
| buttonProps: AriaButtonProps; | ||
| /** Props for the combo box input element. */ | ||
| inputProps: InputHTMLAttributes<HTMLInputElement>; | ||
| /** Props for the combo box menu. */ | ||
| listBoxProps: HTMLAttributes<HTMLElement>; | ||
| /** Props for the combo box label element. */ | ||
| labelProps: HTMLAttributes<HTMLElement>; | ||
| } | ||
| /** | ||
| * Provides the behavior and accessibility implementation for a combo box component. | ||
| * A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query. | ||
| * @param props - Props for the combo box. | ||
| * @param state - State for the select, as returned by `useComboBoxState`. | ||
| */ | ||
| export function useComboBox<T>(props: AriaComboBoxProps<T>, state: ComboBoxState<T>): ComboBoxAria; | ||
| //# sourceMappingURL=types.d.ts.map |
| { | ||
| "name": "@react-aria/combobox", | ||
| "version": "3.0.0-nightly.2573+739d7f1e", | ||
| "version": "3.0.0-nightly.2580+ec40f5fc", | ||
| "description": "Spectrum UI components in React", | ||
@@ -21,17 +21,17 @@ "license": "Apache-2.0", | ||
| "@babel/runtime": "^7.6.2", | ||
| "@react-aria/i18n": "3.0.0-nightly.895+739d7f1e", | ||
| "@react-aria/interactions": "3.0.0-nightly.895+739d7f1e", | ||
| "@react-aria/listbox": "3.2.4-nightly.2573+739d7f1e", | ||
| "@react-aria/live-announcer": "3.0.0-nightly.895+739d7f1e", | ||
| "@react-aria/menu": "3.1.4-nightly.2573+739d7f1e", | ||
| "@react-aria/overlays": "3.0.0-nightly.895+739d7f1e", | ||
| "@react-aria/selection": "3.0.0-nightly.895+739d7f1e", | ||
| "@react-aria/textfield": "3.0.0-nightly.895+739d7f1e", | ||
| "@react-aria/utils": "3.0.0-nightly.895+739d7f1e", | ||
| "@react-stately/collections": "3.0.0-nightly.895+739d7f1e", | ||
| "@react-stately/combobox": "3.0.0-nightly.2573+739d7f1e", | ||
| "@react-stately/layout": "3.2.1-nightly.2573+739d7f1e", | ||
| "@react-types/button": "3.3.1-nightly.2573+739d7f1e", | ||
| "@react-types/combobox": "3.0.0-nightly.2573+739d7f1e", | ||
| "@react-types/shared": "3.0.0-nightly.895+739d7f1e" | ||
| "@react-aria/i18n": "3.0.0-nightly.902+ec40f5fc", | ||
| "@react-aria/interactions": "3.0.0-nightly.902+ec40f5fc", | ||
| "@react-aria/listbox": "3.2.4-nightly.2580+ec40f5fc", | ||
| "@react-aria/live-announcer": "3.0.0-nightly.902+ec40f5fc", | ||
| "@react-aria/menu": "3.1.4-nightly.2580+ec40f5fc", | ||
| "@react-aria/overlays": "3.0.0-nightly.902+ec40f5fc", | ||
| "@react-aria/selection": "3.0.0-nightly.902+ec40f5fc", | ||
| "@react-aria/textfield": "3.0.0-nightly.902+ec40f5fc", | ||
| "@react-aria/utils": "3.0.0-nightly.902+ec40f5fc", | ||
| "@react-stately/collections": "3.0.0-nightly.902+ec40f5fc", | ||
| "@react-stately/combobox": "3.0.0-nightly.2580+ec40f5fc", | ||
| "@react-stately/layout": "3.2.1-nightly.2580+ec40f5fc", | ||
| "@react-types/button": "3.3.1-nightly.2580+ec40f5fc", | ||
| "@react-types/combobox": "3.0.0-nightly.2580+ec40f5fc", | ||
| "@react-types/shared": "3.0.0-nightly.902+ec40f5fc" | ||
| }, | ||
@@ -44,3 +44,3 @@ "peerDependencies": { | ||
| }, | ||
| "gitHead": "739d7f1eb4ea2dbb00190c31fc709164c1ca6f35" | ||
| "gitHead": "ec40f5fca19855465f7a64ed98b5e730e9c36438" | ||
| } |
@@ -31,6 +31,11 @@ /* | ||
| export interface AriaComboBoxProps<T> extends ComboBoxProps<T> { | ||
| buttonRef: RefObject<HTMLElement>, | ||
| /** The ref for the input element. */ | ||
| inputRef: RefObject<HTMLInputElement | HTMLTextAreaElement>, | ||
| /** The ref for the list box popover. */ | ||
| popoverRef: RefObject<HTMLDivElement>, | ||
| /** The ref for the list box. */ | ||
| listBoxRef: RefObject<HTMLElement>, | ||
| /** The ref for the list box popup trigger button. */ | ||
| buttonRef: RefObject<HTMLElement>, | ||
| /** An optional keyboard delegate implementation, to override the default. */ | ||
| keyboardDelegate?: KeyboardDelegate | ||
@@ -40,8 +45,18 @@ } | ||
| interface ComboBoxAria { | ||
| /** Props for the combo box menu trigger button. */ | ||
| buttonProps: AriaButtonProps, | ||
| /** Props for the combo box input element. */ | ||
| inputProps: InputHTMLAttributes<HTMLInputElement>, | ||
| /** Props for the combo box menu. */ | ||
| listBoxProps: HTMLAttributes<HTMLElement>, | ||
| /** Props for the combo box label element. */ | ||
| labelProps: HTMLAttributes<HTMLElement> | ||
| } | ||
| /** | ||
| * Provides the behavior and accessibility implementation for a combo box component. | ||
| * A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query. | ||
| * @param props - Props for the combo box. | ||
| * @param state - State for the select, as returned by `useComboBoxState`. | ||
| */ | ||
| export function useComboBox<T>(props: AriaComboBoxProps<T>, state: ComboBoxState<T>): ComboBoxAria { | ||
@@ -145,3 +160,3 @@ let { | ||
| // Press handlers for the combobox button | ||
| // Press handlers for the ComboBox button | ||
| let onPress = (e: PressEvent) => { | ||
@@ -174,3 +189,3 @@ if (e.pointerType === 'touch') { | ||
| // If a touch happens on direct center of combobox input, might be virtual click from iPad so open combobox menu | ||
| // If a touch happens on direct center of ComboBox input, might be virtual click from iPad so open ComboBox menu | ||
| let lastEventTime = useRef(0); | ||
@@ -177,0 +192,0 @@ let onTouchEnd = (e: TouchEvent) => { |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
Manifest confusion
Supply chain riskThis package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.
Found 1 instance in 1 package
Fixed alerts
Manifest confusion
Supply chain riskThis package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
92178
4.52%- Lines of code
818
5.41%