From 160d5409b83835225d9bd744062a7ff612a62554 Mon Sep 17 00:00:00 2001 From: Chris Wiles Date: Mon, 16 Dec 2019 11:54:56 -0600 Subject: [PATCH 1/5] [Autocomplete] Add ListboxProps prop --- docs/pages/api/autocomplete.md | 17 +++++++++++++++++ .../src/Autocomplete/Autocomplete.js | 1 + .../src/useAutocomplete/useAutocomplete.d.ts | 4 ++++ .../src/useAutocomplete/useAutocomplete.js | 2 ++ 4 files changed, 24 insertions(+) diff --git a/docs/pages/api/autocomplete.md b/docs/pages/api/autocomplete.md index d5a96d3226c1d4..6b8ff70ed0ba33 100644 --- a/docs/pages/api/autocomplete.md +++ b/docs/pages/api/autocomplete.md @@ -18,6 +18,22 @@ import { Autocomplete } from '@material-ui/lab'; You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). +If you wish to alter the props applied to the `ListboxComponent` element, you can do so as follows: + +```jsx +const ListboxProps = { + onScroll: event => console.log(event), +}; + +return ( + } + /> +); + +``` ## Props @@ -52,6 +68,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | includeInputInList | bool | false | If `true`, the highlight can move to the input. | | inputValue | string | | The input value. | | ListboxComponent | elementType | 'ul' | The component used to render the listbox. | +| ListboxProps | object | | Props applied to the `ListboxProps` element. | | loading | bool | false | If `true`, the component is in a loading state. | | loadingText | node | 'Loading…' | Text to display when in a loading state.
For localization purposes, you can use the provided [translations](/guides/localization/). | | multiple | bool | false | If `true`, `value` must be an array and the menu will support multiple selections. | diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js index 7cc9b57f29c2a9..c0f739d1615439 100644 --- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js +++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js @@ -244,6 +244,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) { includeInputInList = false, inputValue: inputValueProp, ListboxComponent = 'ul', + ListboxProps: {}, loading = false, loadingText = 'Loading…', multiple = false, diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.d.ts b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.d.ts index 250312f748a3d1..54cac597232423 100644 --- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.d.ts +++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.d.ts @@ -125,6 +125,10 @@ export interface UseAutocompleteProps { * The input value. */ inputValue?: string; + /** + * Props applied to the ListboxProps element. + */ + ListboxProps?: object; /** * If `true`, `value` must be an array and the menu will support multiple selections. */ diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js index ca8afabdf98834..85ba0abccb0a01 100644 --- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js +++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js @@ -89,6 +89,7 @@ export default function useAutocomplete(props) { id: idProp, includeInputInList = false, inputValue: inputValueProp, + ListboxProps: {}, multiple = false, onChange, onClose, @@ -817,6 +818,7 @@ export default function useAutocomplete(props) { // Prevent blur event.preventDefault(); }, + ...ListboxProps, }), getOptionProps: ({ index, option }) => { const selected = (multiple ? value : [value]).some( From 80b2843626d6a4f5b2487dd1f670fe9febf29e12 Mon Sep 17 00:00:00 2001 From: Chris Wiles Date: Mon, 16 Dec 2019 12:24:58 -0600 Subject: [PATCH 2/5] Update autocomplete.md --- docs/pages/api/autocomplete.md | 18 ------------------ 1 file changed, 18 deletions(-) diff --git a/docs/pages/api/autocomplete.md b/docs/pages/api/autocomplete.md index 6b8ff70ed0ba33..633af1118e433f 100644 --- a/docs/pages/api/autocomplete.md +++ b/docs/pages/api/autocomplete.md @@ -18,24 +18,6 @@ import { Autocomplete } from '@material-ui/lab'; You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). -If you wish to alter the props applied to the `ListboxComponent` element, you can do so as follows: - -```jsx -const ListboxProps = { - onScroll: event => console.log(event), -}; - -return ( - } - /> -); - -``` - - ## Props | Name | Type | Default | Description | From ac30028c2048ad1377b07fbeac63f55d85f6d959 Mon Sep 17 00:00:00 2001 From: Chris Wiles Date: Mon, 16 Dec 2019 12:49:30 -0600 Subject: [PATCH 3/5] Spacing --- docs/pages/api/autocomplete.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/pages/api/autocomplete.md b/docs/pages/api/autocomplete.md index 633af1118e433f..170bb1be517aeb 100644 --- a/docs/pages/api/autocomplete.md +++ b/docs/pages/api/autocomplete.md @@ -18,6 +18,8 @@ import { Autocomplete } from '@material-ui/lab'; You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). + + ## Props | Name | Type | Default | Description | From f38968d29668e1b65f8d8ef990a55a171f0da996 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Tue, 17 Dec 2019 09:14:39 +0100 Subject: [PATCH 4/5] Remove the prop from the hook API --- docs/pages/api/autocomplete.md | 2 +- packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts | 4 ++++ packages/material-ui-lab/src/Autocomplete/Autocomplete.js | 6 +++++- .../src/useAutocomplete/useAutocomplete.d.ts | 4 ---- .../material-ui-lab/src/useAutocomplete/useAutocomplete.js | 2 -- 5 files changed, 10 insertions(+), 8 deletions(-) diff --git a/docs/pages/api/autocomplete.md b/docs/pages/api/autocomplete.md index 170bb1be517aeb..d60b38ba033a71 100644 --- a/docs/pages/api/autocomplete.md +++ b/docs/pages/api/autocomplete.md @@ -52,7 +52,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | includeInputInList | bool | false | If `true`, the highlight can move to the input. | | inputValue | string | | The input value. | | ListboxComponent | elementType | 'ul' | The component used to render the listbox. | -| ListboxProps | object | | Props applied to the `ListboxProps` element. | +| ListboxProps | object | | Props applied to the ListboxProps element. | | loading | bool | false | If `true`, the component is in a loading state. | | loadingText | node | 'Loading…' | Text to display when in a loading state.
For localization purposes, you can use the provided [translations](/guides/localization/). | | multiple | bool | false | If `true`, `value` must be an array and the menu will support multiple selections. | diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts b/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts index 39cf759bc82fd8..12596cf5ee3549 100644 --- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts +++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts @@ -66,6 +66,10 @@ export interface AutocompleteProps * The component used to render the listbox. */ ListboxComponent?: React.ComponentType>; + /** + * Props applied to the ListboxProps element. + */ + ListboxProps?: object; /** * If `true`, the component is in a loading state. */ diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js index c0f739d1615439..085d16083a5828 100644 --- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js +++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js @@ -244,7 +244,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) { includeInputInList = false, inputValue: inputValueProp, ListboxComponent = 'ul', - ListboxProps: {}, + ListboxProps, loading = false, loadingText = 'Loading…', multiple = false, @@ -589,6 +589,10 @@ Autocomplete.propTypes = { * The component used to render the listbox. */ ListboxComponent: PropTypes.elementType, + /** + * Props applied to the ListboxProps element. + */ + ListboxProps: PropTypes.object, /** * If `true`, the component is in a loading state. */ diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.d.ts b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.d.ts index 54cac597232423..250312f748a3d1 100644 --- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.d.ts +++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.d.ts @@ -125,10 +125,6 @@ export interface UseAutocompleteProps { * The input value. */ inputValue?: string; - /** - * Props applied to the ListboxProps element. - */ - ListboxProps?: object; /** * If `true`, `value` must be an array and the menu will support multiple selections. */ diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js index 85ba0abccb0a01..ca8afabdf98834 100644 --- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js +++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js @@ -89,7 +89,6 @@ export default function useAutocomplete(props) { id: idProp, includeInputInList = false, inputValue: inputValueProp, - ListboxProps: {}, multiple = false, onChange, onClose, @@ -818,7 +817,6 @@ export default function useAutocomplete(props) { // Prevent blur event.preventDefault(); }, - ...ListboxProps, }), getOptionProps: ({ index, option }) => { const selected = (multiple ? value : [value]).some( From 6e0bc670d5f68bc557709f038db3d4d273ff47ff Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Tue, 17 Dec 2019 09:19:34 +0100 Subject: [PATCH 5/5] fix typo --- docs/pages/api/autocomplete.md | 2 +- packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts | 2 +- packages/material-ui-lab/src/Autocomplete/Autocomplete.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/pages/api/autocomplete.md b/docs/pages/api/autocomplete.md index d60b38ba033a71..a2f745bc11bcfc 100644 --- a/docs/pages/api/autocomplete.md +++ b/docs/pages/api/autocomplete.md @@ -52,7 +52,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | includeInputInList | bool | false | If `true`, the highlight can move to the input. | | inputValue | string | | The input value. | | ListboxComponent | elementType | 'ul' | The component used to render the listbox. | -| ListboxProps | object | | Props applied to the ListboxProps element. | +| ListboxProps | object | | Props applied to the Listbox element. | | loading | bool | false | If `true`, the component is in a loading state. | | loadingText | node | 'Loading…' | Text to display when in a loading state.
For localization purposes, you can use the provided [translations](/guides/localization/). | | multiple | bool | false | If `true`, `value` must be an array and the menu will support multiple selections. | diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts b/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts index 12596cf5ee3549..c579cd4ecf8c3e 100644 --- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts +++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts @@ -67,7 +67,7 @@ export interface AutocompleteProps */ ListboxComponent?: React.ComponentType>; /** - * Props applied to the ListboxProps element. + * Props applied to the Listbox element. */ ListboxProps?: object; /** diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js index 085d16083a5828..935f7bf5c4db85 100644 --- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js +++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js @@ -590,7 +590,7 @@ Autocomplete.propTypes = { */ ListboxComponent: PropTypes.elementType, /** - * Props applied to the ListboxProps element. + * Props applied to the Listbox element. */ ListboxProps: PropTypes.object, /**