Update docs

Author: ericgio

docs/Rendering.md

@@ -53,15 +53,19 @@ Provides flexibility for rendering the typeahead's input. `inputProps` are any i
 ### `renderMenu(results: Array<Object|String>, menuProps: Object, state: Object)`
 Provides flexibility for rendering the typeahead's menu. `results` are the subset of options after they have been filtered and paginated. `menuProps` are any menu-relevant props passed down from the `Typeahead` component. You can also just set props directly on your `Menu`.
 
-Along with stylistic customization, the `renderMenu` hook allows you to do things like re-sort or group your data. Note that if you manipulate data in this way, you *must* use either the provided `MenuItem` component or the [appropriate hook or HOC](API.md#useitem--withitem) to ensure proper behavior.
+Along with stylistic customization, the `renderMenu` hook allows you to do things like re-sort or group your data. Note that if you manipulate data in this way, you *must* use either the provided `MenuItem` component or the [appropriate hook](API.md#useitem) to ensure proper behavior.
 
 ```jsx
 <Typeahead
-  options={options}
-  renderMenu={(results, menuProps) => (
+  ...
+  renderMenu={(results, { onItemSelect, ...menuProps }) => (
     <Menu {...menuProps}>
       {results.map((result, index) => (
-        <MenuItem option={result} position={index}>
+        <MenuItem
+          key={...}
+          onClick={() => onItemSelect(result)}
+          option={result}
+          position={index}>
           {result.label}
         </MenuItem>
       ))}
@@ -99,6 +103,6 @@ Provides the ability to customize rendering of tokens when multiple selections a
 />
 ```
 
-Be careful when using `renderToken`, since you will need to handle things like disabling the tokens and removing them (via `props.onRemove`) yourself. It is highly recommended that you use the provided `Token` component. If you want to use a completely custom token, use either the provided [hook or HOC](API.md#usetoken--withtoken) to retain keystroke behaviors.
+Be careful when using `renderToken`, since you will need to handle things like disabling the tokens and removing them (via `props.onRemove`) yourself. It is highly recommended that you use the provided `Token` component. If you want to use a completely custom token, use either the provided [hook](API.md#usetoken) to retain keystroke behaviors.
 
 [Next: Public Methods](Methods.md)

docs/Upgrading.md

@@ -10,6 +10,30 @@
 
 ## v7.0 Breaking Changes
 
+### Explicitly pass `onItemSelect` to `MenuItem`
+Previously, `onItemSelect` was transparently passed to menu item components using `useItem`. With v7, that callback must be explicitly passed to menu items via the `onClick` prop. If you are using `renderMenu` to customize your menu you will need to pass `onItemSelect`, which is now available in `menuProps`, to your menu items:
+
+```tsx
+<Typeahead
+  ...
+  renderMenu={(results, { onItemSelect, ...menuProps }) => (
+    <Menu {...menuProps}>
+      {results.map((result, index) => (
+        <MenuItem
+          key={...}
+          onClick={() => onItemSelect(result)}
+          option={result}
+          position={index}>
+          {result.label}
+        </MenuItem>
+      ))}
+    </Menu>
+  )}
+/>
+```
+
+While this change adds a bit more work for custom rendering cases, it provides much more flexibility in terms of choosing how menu interactions work. You can now choose to have a menu item trigger a different action entirely (eg: select all) by omitting `onItemSelect` and passing your own callback to the given item.
+
 ### HOCs removed in favor of hooks
 The following HOCs were deprecated in a previous version and have been removed: