Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@reach/combobox
Advanced tools
@reach/combobox - npm Package Compare versions
Comparing version 0.4.0 to 0.5.0
@@ -23,3 +23,3 @@ var _on, _on2, _on3, _on4, _states; | ||
| import { func } from "prop-types"; | ||
| import { wrapEvent, assignRef } from "@reach/utils"; | ||
| import { wrapEvent, useForkedRef } from "@reach/utils"; | ||
| import { findAll } from "highlight-words-core"; | ||
@@ -271,3 +271,3 @@ import escapeRegexp from "escape-regexp"; | ||
| autocompletePropRef.current = autocomplete; | ||
| }); | ||
| }, [autocomplete]); | ||
@@ -532,3 +532,3 @@ var handleValueChange = function handleValueChange(value) { | ||
| } | ||
| }); | ||
| }, [lastActionType]); | ||
| } // We want the same events when the input or the popup have focus (HOW COOL ARE | ||
@@ -755,25 +755,4 @@ // HOOKS BTW?) This is probably the hairiest piece but it's not bad. | ||
| return hash; | ||
| }; // TODO: Remove and import from @reach/utils once it's been added to the package | ||
| function useForkedRef() { | ||
| for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) { | ||
| refs[_key] = arguments[_key]; | ||
| } | ||
| return useMemo(function () { | ||
| if (refs.every(function (ref) { | ||
| return ref == null; | ||
| })) { | ||
| return null; | ||
| } | ||
| return function (node) { | ||
| refs.forEach(function (ref) { | ||
| assignRef(ref, node); | ||
| }); | ||
| }; // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, refs); | ||
| } //////////////////////////////////////////////////////////////////////////////// | ||
| }; //////////////////////////////////////////////////////////////////////////////// | ||
| // Well alright, you made it all the way here to like 700 lines of code (geez, | ||
| // what the heck?). Have a great day :D |
234
index.d.ts
@@ -1,38 +0,208 @@ | ||
| declare module "@reach/combobox" { | ||
| import * as React from "react"; | ||
| /** | ||
| * Accessible combobox (autocomplete or autosuggest) component for React. | ||
| * | ||
| * A combobox is the combination of an `<input type="text"/>` and a list. The | ||
| * list is designed to help the user arrive at a value, but the value does not | ||
| * necessarily have to come from that list. Don't think of it like a | ||
| * `<select/>`, but more of an `<input type="text"/>` with some suggestions. You | ||
| * can, however, validate that the value comes from the list, that's up to your | ||
| * app. | ||
| * | ||
| * @see Docs https://reacttraining.com/reach-ui/combobox | ||
| * @see Source https://github.com/reach/reach-ui/tree/master/packages/combobox | ||
| * @see WAI-ARIA https://www.w3.org/TR/wai-aria-practices-1.1/#combobox | ||
| */ | ||
| export type ComboboxProps = { | ||
| children?: React.ReactNode; | ||
| onSelect?: (value: string) => void; | ||
| openOnFocus?: boolean; | ||
| as?: string; | ||
| } & Omit<React.HTMLProps<HTMLElement>, "onSelect">; | ||
| import * as React from "react"; | ||
| export type ComboboxInputProps = { | ||
| selectOnClick?: boolean; | ||
| autocomplete?: boolean; | ||
| value?: string; | ||
| as?: string; | ||
| } & React.HTMLProps<HTMLElement>; | ||
| /** | ||
| * @see Docs https://reacttraining.com/reach-ui/combobox#combobox-props | ||
| */ | ||
| export type ComboboxProps = { | ||
| /** | ||
| * @see Docs https://reacttraining.com/reach-ui/combobox#combobox-children | ||
| */ | ||
| children?: React.ReactNode; | ||
| /** | ||
| * Called with the selection value when the user makes a selection from the | ||
| * list. | ||
| * | ||
| * @see Docs https://reacttraining.com/reach-ui/combobox#combobox-onselect | ||
| */ | ||
| onSelect?: (value: string) => void; | ||
| /** | ||
| * If true, the popover opens when focus is on the text box. | ||
| * | ||
| * @see Docs https://reacttraining.com/reach-ui/combobox#combobox-openonfocus | ||
| */ | ||
| openOnFocus?: boolean; | ||
| /** | ||
| * React component or HTML element to render as. Defaults to `div`. | ||
| * | ||
| * @see Docs https://reacttraining.com/reach-ui/combobox#combobox-as | ||
| */ | ||
| as?: string; | ||
| } & Omit<React.HTMLProps<HTMLElement>, "onSelect">; | ||
| export type ComboboxPopoverProps = { | ||
| portal?: boolean; | ||
| } & React.HTMLProps<HTMLElement>; | ||
| /** | ||
| * @see Docs https://reacttraining.com/reach-ui/combobox#comboboxinput-props | ||
| */ | ||
| export type ComboboxInputProps = { | ||
| /** | ||
| * If true, when the user clicks inside the text box the current value will | ||
| * be selected. Use this if the user is likely to delete all the text anyway | ||
| * (like the URL bar in browsers). | ||
| * | ||
| * However, if the user is likely to want to tweak the value, leave this | ||
| * false, like a google search--the user is likely wanting to edit their | ||
| * search, not replace it completely. | ||
| * | ||
| * @see Docs https://reacttraining.com/reach-ui/combobox#comboboxinput-selectonclick | ||
| */ | ||
| selectOnClick?: boolean; | ||
| /** | ||
| * Determines if the value in the input changes or not as the user navigates | ||
| * with the keyboard. If true, the value changes, if false the value doesn't | ||
| * change. | ||
| * | ||
| * Set this to false when you don't really need the value from the input but | ||
| * want to populate some other state (like the recipient selector in Gmail). | ||
| * But if your input is more like a normal `<input type="text"/>`, then leave | ||
| * the `true` default. | ||
| * | ||
| * @see Docs https://reacttraining.com/reach-ui/combobox#comboboxinput-autocomplete | ||
| */ | ||
| autocomplete?: boolean; | ||
| /** | ||
| * @see Docs https://reacttraining.com/reach-ui/combobox#comboboxinput-value | ||
| */ | ||
| value?: string; | ||
| /** | ||
| * @see Docs https://reacttraining.com/reach-ui/combobox#comboboxinput-as | ||
| */ | ||
| as?: string; | ||
| } & React.HTMLProps<HTMLElement>; | ||
| export type ComboboxListProps = { | ||
| persistSelection?: boolean; | ||
| as?: string; | ||
| } & React.HTMLProps<HTMLElement>; | ||
| /** | ||
| * @see Docs https://reacttraining.com/reach-ui/combobox#comboboxpopover-props | ||
| */ | ||
| export type ComboboxPopoverProps = { | ||
| /** | ||
| * If you pass `<ComboboxPopover portal={false} />` the popover will not | ||
| * render inside of a portal, but in the same order as the React tree. This | ||
| * is mostly useful for styling the entire component together, like the pink | ||
| * focus outline in the example earlier in this page. | ||
| * | ||
| * @see Docs https://reacttraining.com/reach-ui/combobox#comboboxpopover-portal | ||
| */ | ||
| portal?: boolean; | ||
| } & React.HTMLProps<HTMLElement>; | ||
| export type ComboboxOptionProps = { | ||
| children?: React.ReactNode; | ||
| value: string; | ||
| } & React.HTMLProps<HTMLElement>; | ||
| /** | ||
| * @see Docs https://reacttraining.com/reach-ui/combobox#comboboxlist-props | ||
| */ | ||
| export type ComboboxListProps = { | ||
| /** | ||
| * Defaults to false. When true and the list is opened, if an option's value | ||
| * matches the value in the input, it will automatically be highlighted and | ||
| * be the starting point for any keyboard navigation of the list. | ||
| * | ||
| * This allows you to treat a Combobox more like a `<select>` than an | ||
| * `<input/>`, but be mindful that the user is still able to put any | ||
| * arbitrary value into the input, so if the only valid values for the input | ||
| * are from the list, your app will need to do that validation on blur or | ||
| * submit of the form. | ||
| * | ||
| * @see Docs https://reacttraining.com/reach-ui/combobox#comboboxlist-persistselection | ||
| */ | ||
| persistSelection?: boolean; | ||
| /** | ||
| * @see Docs https://reacttraining.com/reach-ui/combobox#comboboxlist-as | ||
| */ | ||
| as?: string; | ||
| } & React.HTMLProps<HTMLElement>; | ||
| export const Combobox: React.FunctionComponent<ComboboxProps>; | ||
| export const ComboboxInput: React.FunctionComponent<ComboboxInputProps>; | ||
| export const ComboboxPopover: React.FunctionComponent<ComboboxPopoverProps>; | ||
| export const ComboboxList: React.FunctionComponent<ComboboxListProps>; | ||
| export const ComboboxOption: React.FunctionComponent<ComboboxOptionProps>; | ||
| export const ComboboxOptionText: React.FunctionComponent; | ||
| } | ||
| /** | ||
| * @see Docs https://reacttraining.com/reach-ui/combobox#comboboxoption-props | ||
| */ | ||
| export type ComboboxOptionProps = { | ||
| /** | ||
| * Optional. If omitted, the `value` will be used as the children like as: | ||
| * `<ComboboxOption value="Seattle, Tacoma, Washington" />`. But if you need | ||
| * to control a bit more, you can put whatever children you want, but make | ||
| * sure to render a `ComboboxOptionText` as well, so the value is still | ||
| * displayed with the text highlighting on the matched portions. | ||
| * | ||
| * @example | ||
| * <ComboboxOption value="Apple" /> | ||
| * 🍎 <ComboboxOptionText /> | ||
| * </ComboboxOption> | ||
| * | ||
| * @see Docs https://reacttraining.com/reach-ui/combobox#comboboxoption-children | ||
| */ | ||
| children?: React.ReactNode; | ||
| /** | ||
| * The value to match against when suggesting. | ||
| * | ||
| * @see Docs https://reacttraining.com/reach-ui/combobox#comboboxoption-value | ||
| */ | ||
| value: string; | ||
| } & React.HTMLProps<HTMLElement>; | ||
| /** | ||
| * Accessible combobox (autocomplete or autosuggest) component for React. | ||
| * | ||
| * A combobox is the combination of an `<input type="text"/>` and a list. The | ||
| * list is designed to help the user arrive at a value, but the value does not | ||
| * necessarily have to come from that list. Don't think of it like a | ||
| * `<select/>`, but more of an `<input type="text"/>` with some suggestions. | ||
| * You can, however, validate that the value comes from the list, that's up to | ||
| * your app. | ||
| * | ||
| * @see Docs https://reacttraining.com/reach-ui/combobox#combobox | ||
| */ | ||
| declare const Combobox: React.FunctionComponent<ComboboxProps>; | ||
| /** | ||
| * Wraps an `<input/>` with a couple extra props that work with the combobox. | ||
| * | ||
| * @see Docs https://reacttraining.com/reach-ui/combobox#comboboxinput | ||
| */ | ||
| declare const ComboboxInput: React.FunctionComponent<ComboboxInputProps>; | ||
| /** | ||
| * Contains the popup that renders the list. Because some UI needs to render | ||
| * more than the list in the popup, you need to render one of these around the | ||
| * list. For example, maybe you want to render the number of results suggested. | ||
| * | ||
| * @see Docs https://reacttraining.com/reach-ui/combobox#comboboxpopover | ||
| */ | ||
| declare const ComboboxPopover: React.FunctionComponent<ComboboxPopoverProps>; | ||
| /** | ||
| * Contains the `ComboboxOption` elements and sets up the proper aria | ||
| * attributes for the list. | ||
| * | ||
| * @see Docs https://reacttraining.com/reach-ui/combobox#comboboxlist | ||
| */ | ||
| declare const ComboboxList: React.FunctionComponent<ComboboxListProps>; | ||
| /** | ||
| * An option that is suggested to the user as they interact with the combobox. | ||
| * | ||
| * @see Docs https://reacttraining.com/reach-ui/combobox#comboboxoption | ||
| */ | ||
| declare const ComboboxOption: React.FunctionComponent<ComboboxOptionProps>; | ||
| /** | ||
| * Renders the value of a `ComboboxOption` as text but with spans wrapping the | ||
| * matching and non-matching segments of text. | ||
| * | ||
| * @example | ||
| * <ComboboxOption value="Seattle"> | ||
| * 🌧 <ComboboxOptionText /> | ||
| * </ComboboxOption> | ||
| * | ||
| * @see Docs https://reacttraining.com/reach-ui/combobox#comboboxoptiontext | ||
| */ | ||
| declare const ComboboxOptionText: React.FunctionComponent; |
33
index.js
@@ -267,3 +267,3 @@ "use strict"; | ||
| var ref = useForkedRef(inputRef, forwardedRef); // Because we close the List on blur, we need to track if the blur is | ||
| var ref = (0, _utils.useForkedRef)(inputRef, forwardedRef); // Because we close the List on blur, we need to track if the blur is | ||
| // caused by clicking inside the list, and if so, don't close the List. | ||
@@ -277,3 +277,3 @@ | ||
| autocompletePropRef.current = autocomplete; | ||
| }); | ||
| }, [autocomplete]); | ||
@@ -357,3 +357,3 @@ var handleValueChange = function handleValueChange(value) { | ||
| var ref = useForkedRef(popoverRef, forwardedRef); | ||
| var ref = (0, _utils.useForkedRef)(popoverRef, forwardedRef); | ||
| var handleKeyDown = useKeyDown(); | ||
@@ -512,3 +512,3 @@ var handleBlur = useBlur(); // Instead of conditionally rendering the popover we use the `hidden` prop | ||
| var ref = useForkedRef(buttonRef, forwardedRef); | ||
| var ref = (0, _utils.useForkedRef)(buttonRef, forwardedRef); | ||
| var handleKeyDown = useKeyDown(); | ||
@@ -548,3 +548,3 @@ | ||
| } | ||
| }); | ||
| }, [lastActionType]); | ||
| } // We want the same events when the input or the popup have focus (HOW COOL ARE | ||
@@ -771,25 +771,4 @@ // HOOKS BTW?) This is probably the hairiest piece but it's not bad. | ||
| return hash; | ||
| }; // TODO: Remove and import from @reach/utils once it's been added to the package | ||
| function useForkedRef() { | ||
| for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) { | ||
| refs[_key] = arguments[_key]; | ||
| } | ||
| return (0, _react.useMemo)(function () { | ||
| if (refs.every(function (ref) { | ||
| return ref == null; | ||
| })) { | ||
| return null; | ||
| } | ||
| return function (node) { | ||
| refs.forEach(function (ref) { | ||
| (0, _utils.assignRef)(ref, node); | ||
| }); | ||
| }; // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, refs); | ||
| } //////////////////////////////////////////////////////////////////////////////// | ||
| }; //////////////////////////////////////////////////////////////////////////////// | ||
| // Well alright, you made it all the way here to like 700 lines of code (geez, | ||
| // what the heck?). Have a great day :D |
| { | ||
| "name": "@reach/combobox", | ||
| "version": "0.4.0", | ||
| "version": "0.5.0", | ||
| "description": "Accessible React Combobox (Autocomplete).", | ||
@@ -13,6 +13,6 @@ "author": "React Training <hello@reacttraining.com>", | ||
| "dependencies": { | ||
| "@reach/auto-id": "^0.4.0", | ||
| "@reach/popover": "^0.4.0", | ||
| "@reach/portal": "^0.4.0", | ||
| "@reach/utils": "^0.4.0", | ||
| "@reach/auto-id": "^0.5.0", | ||
| "@reach/popover": "^0.5.0", | ||
| "@reach/portal": "^0.5.0", | ||
| "@reach/utils": "^0.5.0", | ||
| "escape-regexp": "0.0.1", | ||
@@ -28,4 +28,4 @@ "highlight-words-core": "1.2.0", | ||
| "match-sorter": "^2.3.0", | ||
| "react": "^16.10.2", | ||
| "react-test-renderer": "^16.10.2", | ||
| "react": "^16.11.0", | ||
| "react-test-renderer": "^16.11.0", | ||
| "use-throttle": "^0.0.3" | ||
@@ -41,3 +41,3 @@ }, | ||
| ], | ||
| "gitHead": "0f3d2c7e530cd80e1d1bd338182ac89a3ba23999" | ||
| "gitHead": "7e33672d882cd6df77ac8cdb76b6b4a21dbf28c2" | ||
| } |
@@ -27,3 +27,3 @@ /* eslint-disable jsx-a11y/role-has-required-aria-props */ | ||
| import { func } from "prop-types"; | ||
| import { wrapEvent, assignRef } from "@reach/utils"; | ||
| import { wrapEvent, useForkedRef } from "@reach/utils"; | ||
| import { findAll } from "highlight-words-core"; | ||
@@ -360,3 +360,3 @@ import escapeRegexp from "escape-regexp"; | ||
| autocompletePropRef.current = autocomplete; | ||
| }); | ||
| }, [autocomplete]); | ||
@@ -666,3 +666,3 @@ const handleValueChange = value => { | ||
| } | ||
| }); | ||
| }, [lastActionType]); | ||
| } | ||
@@ -849,19 +849,4 @@ | ||
| // TODO: Remove and import from @reach/utils once it's been added to the package | ||
| function useForkedRef(...refs) { | ||
| return useMemo(() => { | ||
| if (refs.every(ref => ref == null)) { | ||
| return null; | ||
| } | ||
| return node => { | ||
| refs.forEach(ref => { | ||
| assignRef(ref, node); | ||
| }); | ||
| }; | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, refs); | ||
| } | ||
| //////////////////////////////////////////////////////////////////////////////// | ||
| // Well alright, you made it all the way here to like 700 lines of code (geez, | ||
| // what the heck?). Have a great day :D |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by5.82%
91725
- Lines of code
- increased by5.4%
2263
Dependency changes
+ Added@reach/auto-id@0.5.3(transitive)
+ Added@reach/component-component@0.5.0(transitive)
+ Added@reach/popover@0.5.0(transitive)
+ Added@reach/portal@0.5.0(transitive)
+ Added@reach/rect@0.5.0(transitive)
+ Added@reach/utils@0.5.0(transitive)
- Removed@reach/auto-id@0.4.0(transitive)
- Removed@reach/component-component@0.4.0(transitive)
- Removed@reach/popover@0.4.0(transitive)
- Removed@reach/portal@0.4.0(transitive)
- Removed@reach/rect@0.4.0(transitive)
- Removed@reach/utils@0.4.0(transitive)
Updated@reach/auto-id@^0.5.0
Updated@reach/popover@^0.5.0
Updated@reach/portal@^0.5.0
Updated@reach/utils@^0.5.0