@react-aria/combobox - npm Package Compare versions

Comparing version 3.0.0-alpha.0 to 3.0.0-alpha.1

dist/main.js

@@ -35,2 +35,3 @@ var {
   chain,
+  isAppleDevice,
   mergeProps,
@@ -64,6 +65,8 @@ useLabels
 
-function $fa71f27c5feed757eb58cfe0179b$var$isAppleDevice() {
-  return typeof window !== 'undefined' && window.navigator != null ? /^(Mac|iPhone|iPad)/.test(window.navigator.platform) : false;
-}
-
+/**
+ * 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) {
@@ -168,3 +171,3 @@ var _focusedItem$parentKe, _state$selectionManag;
     autoComplete: 'off'
-  }), inputRef); // Press handlers for the combobox button
+  }), inputRef); // Press handlers for the ComboBox button
 
@@ -195,3 +198,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
 
@@ -234,3 +237,3 @@ let lastEventTime = useRef(0);
   useEffect(() => {
-    if ($fa71f27c5feed757eb58cfe0179b$var$isAppleDevice() && focusedItem != null && itemKey !== lastItem.current) {
+    if (isAppleDevice() && focusedItem != null && itemKey !== lastItem.current) {
       let isSelected = state.selectionManager.isSelected(itemKey);
@@ -260,3 +263,3 @@ let section = sectionKey != null ? state.collection.getItem(sectionKey) : null;
     // The exception is VoiceOver since this isn't included in the message above.
-    let didOpenWithoutFocusedItem = state.isOpen !== lastOpen.current && (state.selectionManager.focusedKey == null || $fa71f27c5feed757eb58cfe0179b$var$isAppleDevice());
+    let didOpenWithoutFocusedItem = state.isOpen !== lastOpen.current && (state.selectionManager.focusedKey == null || isAppleDevice());
 
@@ -276,3 +279,3 @@ if (state.isOpen && (didOpenWithoutFocusedItem || optionCount !== lastSize.current)) {
   useEffect(() => {
-    if ($fa71f27c5feed757eb58cfe0179b$var$isAppleDevice() && state.isFocused && state.selectedItem && state.selectedKey !== lastSelectedKey.current) {
+    if (isAppleDevice() && state.isFocused && state.selectedItem && state.selectedKey !== lastSelectedKey.current) {
       let optionText = state.selectedItem['aria-label'] || state.selectedItem.textValue || '';
@@ -306,3 +309,7 @@ let announcement = formatMessage('selectedAnnouncement', {
       'aria-activedescendant': focusedItem ? getItemId(state, focusedItem.key) : undefined,
-      onTouchEnd
+      onTouchEnd,
+      // This disable's iOS's autocorrect suggestions, since the combo box provides its own suggestions.
+      autoCorrect: 'off',
+      // This disable's the macOS Safari spell check auto corrections.
+      spellCheck: 'false'
     }),
@@ -309,0 +316,0 @@ listBoxProps: mergeProps(menuProps, listBoxProps)

dist/module.js

@@ -8,3 +8,3 @@ import { useTextField } from "@react-aria/textfield";
 import { useEffect, useMemo, useRef } from "react";
-import { chain, mergeProps, useLabels } from "@react-aria/utils";
+import { chain, isAppleDevice, mergeProps, useLabels } from "@react-aria/utils";
 import { ariaHideOutside } from "@react-aria/overlays";
@@ -22,6 +22,8 @@ import { announce } from "@react-aria/live-announcer";
 
-function $be26f9e765ed670e72d5b46ae9eff69a$var$isAppleDevice() {
-  return typeof window !== 'undefined' && window.navigator != null ? /^(Mac|iPhone|iPad)/.test(window.navigator.platform) : false;
-}
-
+/**
+ * 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) {
@@ -126,3 +128,3 @@ var _focusedItem$parentKe, _state$selectionManag;
     autoComplete: 'off'
-  }), inputRef); // Press handlers for the combobox button
+  }), inputRef); // Press handlers for the ComboBox button
 
@@ -153,3 +155,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
 
@@ -192,3 +194,3 @@ let lastEventTime = useRef(0);
   useEffect(() => {
-    if ($be26f9e765ed670e72d5b46ae9eff69a$var$isAppleDevice() && focusedItem != null && itemKey !== lastItem.current) {
+    if (isAppleDevice() && focusedItem != null && itemKey !== lastItem.current) {
       let isSelected = state.selectionManager.isSelected(itemKey);
@@ -218,3 +220,3 @@ let section = sectionKey != null ? state.collection.getItem(sectionKey) : null;
     // The exception is VoiceOver since this isn't included in the message above.
-    let didOpenWithoutFocusedItem = state.isOpen !== lastOpen.current && (state.selectionManager.focusedKey == null || $be26f9e765ed670e72d5b46ae9eff69a$var$isAppleDevice());
+    let didOpenWithoutFocusedItem = state.isOpen !== lastOpen.current && (state.selectionManager.focusedKey == null || isAppleDevice());
 
@@ -234,3 +236,3 @@ if (state.isOpen && (didOpenWithoutFocusedItem || optionCount !== lastSize.current)) {
   useEffect(() => {
-    if ($be26f9e765ed670e72d5b46ae9eff69a$var$isAppleDevice() && state.isFocused && state.selectedItem && state.selectedKey !== lastSelectedKey.current) {
+    if (isAppleDevice() && state.isFocused && state.selectedItem && state.selectedKey !== lastSelectedKey.current) {
       let optionText = state.selectedItem['aria-label'] || state.selectedItem.textValue || '';
@@ -264,3 +266,7 @@ let announcement = formatMessage('selectedAnnouncement', {
       'aria-activedescendant': focusedItem ? getItemId(state, focusedItem.key) : undefined,
-      onTouchEnd
+      onTouchEnd,
+      // This disable's iOS's autocorrect suggestions, since the combo box provides its own suggestions.
+      autoCorrect: 'off',
+      // This disable's the macOS Safari spell check auto corrections.
+      spellCheck: 'false'
     }),
@@ -267,0 +273,0 @@ listBoxProps: mergeProps(menuProps, listBoxProps)

dist/types.d.ts

@@ -6,17 +6,32 @@ import { AriaButtonProps } from "@react-types/button";
 import { KeyboardDelegate } from "@react-types/shared";
-export interface AriaComboBoxProps<T> extends ComboBoxProps<T> {
-    buttonRef: RefObject<HTMLElement>;
+interface AriaComboBoxProps<T> extends ComboBoxProps<T> {
+    /** 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

package.json

 {
   "name": "@react-aria/combobox",
-  "version": "3.0.0-alpha.0",
+  "version": "3.0.0-alpha.1",
   "description": "Spectrum UI components in React",
@@ -21,17 +21,17 @@ "license": "Apache-2.0",
     "@babel/runtime": "^7.6.2",
-    "@react-aria/i18n": "^3.2.0",
-    "@react-aria/interactions": "^3.3.2",
-    "@react-aria/listbox": "^3.2.3",
+    "@react-aria/i18n": "^3.3.0",
+    "@react-aria/interactions": "^3.3.3",
+    "@react-aria/listbox": "^3.2.4",
     "@react-aria/live-announcer": "3.0.0-alpha.0",
-    "@react-aria/menu": "^3.1.3",
-    "@react-aria/overlays": "^3.6.0",
-    "@react-aria/selection": "^3.3.1",
+    "@react-aria/menu": "^3.1.4",
+    "@react-aria/overlays": "^3.6.1",
+    "@react-aria/selection": "^3.3.2",
     "@react-aria/textfield": "^3.2.2",
-    "@react-aria/utils": "^3.4.1",
+    "@react-aria/utils": "^3.6.0",
     "@react-stately/collections": "^3.3.0",
-    "@react-stately/combobox": "3.0.0-alpha.0",
+    "@react-stately/combobox": "3.0.0-alpha.1",
     "@react-stately/layout": "^3.1.0",
-    "@react-types/button": "^3.3.0",
-    "@react-types/combobox": "3.0.0-alpha.0",
-    "@react-types/shared": "^3.2.1"
+    "@react-types/button": "^3.3.1",
+    "@react-types/combobox": "3.0.0-alpha.1",
+    "@react-types/shared": "^3.4.0"
   },
@@ -44,3 +44,3 @@ "peerDependencies": {
   },
-  "gitHead": "f5b429ee8615248f2e3c76754bad2ece83f1c444"
+  "gitHead": "7f9dc7fa5144679d2dc733170cb5c1f40d0c5ee5"
 }

src/useComboBox.ts

@@ -16,3 +16,3 @@ /*
 import {ariaHideOutside} from '@react-aria/overlays';
-import {chain, mergeProps, useLabels} from '@react-aria/utils';
+import {chain, isAppleDevice, mergeProps, useLabels} from '@react-aria/utils';
 import {ComboBoxProps} from '@react-types/combobox';
@@ -31,7 +31,12 @@ import {ComboBoxState} from '@react-stately/combobox';
 
-export interface AriaComboBoxProps<T> extends ComboBoxProps<T> {
-  buttonRef: RefObject<HTMLElement>,
+interface AriaComboBoxProps<T> extends ComboBoxProps<T> {
+  /** 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
@@ -41,14 +46,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>
 }
 
-function isAppleDevice() {
-  return typeof window !== 'undefined' && window.navigator != null
-    ? /^(Mac|iPhone|iPad)/.test(window.navigator.platform)
-    : false;
-}
-
+/**
+ * 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 {
@@ -152,3 +161,3 @@ let {
 
-  // Press handlers for the combobox button
+  // Press handlers for the ComboBox button
   let onPress = (e: PressEvent) => {
@@ -181,3 +190,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);
@@ -297,3 +306,7 @@ let onTouchEnd = (e: TouchEvent) => {
       'aria-activedescendant': focusedItem ? getItemId(state, focusedItem.key) : undefined,
-      onTouchEnd
+      onTouchEnd,
+      // This disable's iOS's autocorrect suggestions, since the combo box provides its own suggestions.
+      autoCorrect: 'off',
+      // This disable's the macOS Safari spell check auto corrections.
+      spellCheck: 'false'
     }),
@@ -300,0 +313,0 @@ listBoxProps: mergeProps(menuProps, listBoxProps)

No alert changes

Improved metrics

Total package byte prevSize

91863

increased by4.35%

Lines of code

818

increased by5.68%

Dependency changes

• + Added@react-stately/combobox@3.0.0-alpha.1(transitive)

• + Added@react-types/combobox@3.0.0-alpha.1(transitive)

• - Removed@react-stately/combobox@3.0.0-alpha.0(transitive)

• - Removed@react-types/combobox@3.0.0-alpha.0(transitive)

• Updated@react-aria/i18n@^3.3.0

• Updated@react-aria/interactions@^3.3.3

• Updated@react-aria/listbox@^3.2.4

• Updated@react-aria/menu@^3.1.4

• Updated@react-aria/overlays@^3.6.1

• Updated@react-aria/selection@^3.3.2

• Updated@react-aria/utils@^3.6.0

• Updated@react-stately/combobox@3.0.0-alpha.1

• Updated@react-types/button@^3.3.1

• Updated@react-types/combobox@3.0.0-alpha.1

• Updated@react-types/shared@^3.4.0