1 | import * as React from 'react';
|
2 | import { StandardProps } from '..';
|
3 | import { InputProps } from '../Input';
|
4 | import { MenuProps } from '../Menu';
|
5 | import { SelectInputProps } from './SelectInput';
|
6 |
|
7 | export interface SelectProps
|
8 | extends StandardProps<InputProps, SelectClassKey, 'value' | 'onChange'>,
|
9 | Pick<SelectInputProps, 'onChange'> {
|
10 | /**
|
11 | * If `true`, the width of the popover will automatically be set according to the items inside the
|
12 | * menu, otherwise it will be at least the width of the select input.
|
13 | */
|
14 | autoWidth?: boolean;
|
15 | /**
|
16 | * The option elements to populate the select with.
|
17 | * Can be some `MenuItem` when `native` is false and `option` when `native` is true.
|
18 | *
|
19 | * ⚠️The `MenuItem` elements **must** be direct descendants when `native` is false.
|
20 | */
|
21 | children?: React.ReactNode;
|
22 | /**
|
23 | * The default element value. Use when the component is not controlled.
|
24 | * @document
|
25 | */
|
26 | defaultValue?: unknown;
|
27 | /**
|
28 | * If `true`, a value is displayed even if no items are selected.
|
29 | *
|
30 | * In order to display a meaningful value, a function should be passed to the `renderValue` prop which returns the value to be displayed when no items are selected.
|
31 | * You can only use it when the `native` prop is `false` (default).
|
32 | */
|
33 | displayEmpty?: boolean;
|
34 | /**
|
35 | * The icon that displays the arrow.
|
36 | */
|
37 | IconComponent?: React.ElementType;
|
38 | /**
|
39 | * The `id` of the wrapper element or the `select` element when `native`.
|
40 | */
|
41 | id?: string;
|
42 | /**
|
43 | * An `Input` element; does not have to be a material-ui specific `Input`.
|
44 | */
|
45 | input?: React.ReactElement<any, any>;
|
46 | /**
|
47 | * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
|
48 | * When `native` is `true`, the attributes are applied on the `select` element.
|
49 | */
|
50 | inputProps?: InputProps['inputProps'];
|
51 | /**
|
52 | * See [OutlinedInput#label](/api/outlined-input/#props)
|
53 | */
|
54 | label?: React.ReactNode;
|
55 | /**
|
56 | * The ID of an element that acts as an additional label. The Select will
|
57 | * be labelled by the additional label and the selected value.
|
58 | */
|
59 | labelId?: string;
|
60 | /**
|
61 | * See [OutlinedInput#label](/api/outlined-input/#props)
|
62 | */
|
63 | labelWidth?: number;
|
64 | /**
|
65 | * Props applied to the [`Menu`](/api/menu/) element.
|
66 | */
|
67 | MenuProps?: Partial<MenuProps>;
|
68 | /**
|
69 | * If `true`, `value` must be an array and the menu will support multiple selections.
|
70 | */
|
71 | multiple?: boolean;
|
72 | /**
|
73 | * If `true`, the component will be using a native `select` element.
|
74 | */
|
75 | native?: boolean;
|
76 | /**
|
77 | * Callback function fired when a menu item is selected.
|
78 | *
|
79 | * @param {object} event The event source of the callback.
|
80 | * You can pull out the new value by accessing `event.target.value` (any).
|
81 | * @param {object} [child] The react element that was selected when `native` is `false` (default).
|
82 | * @document
|
83 | */
|
84 | onChange?: SelectInputProps['onChange'];
|
85 | /**
|
86 | * Callback fired when the component requests to be closed.
|
87 | * Use in controlled mode (see open).
|
88 | *
|
89 | * @param {object} event The event source of the callback.
|
90 | */
|
91 | onClose?: (event: React.ChangeEvent<{}>) => void;
|
92 | /**
|
93 | * Callback fired when the component requests to be opened.
|
94 | * Use in controlled mode (see open).
|
95 | *
|
96 | * @param {object} event The event source of the callback.
|
97 | */
|
98 | onOpen?: (event: React.ChangeEvent<{}>) => void;
|
99 | /**
|
100 | * Control `select` open state.
|
101 | * You can only use it when the `native` prop is `false` (default).
|
102 | */
|
103 | open?: boolean;
|
104 | /**
|
105 | * Render the selected value.
|
106 | * You can only use it when the `native` prop is `false` (default).
|
107 | *
|
108 | * @param {any} value The `value` provided to the component.
|
109 | * @returns {ReactNode}
|
110 | */
|
111 | renderValue?: (value: SelectProps['value']) => React.ReactNode;
|
112 | /**
|
113 | * Props applied to the clickable div element.
|
114 | */
|
115 | SelectDisplayProps?: React.HTMLAttributes<HTMLDivElement>;
|
116 | /**
|
117 | * The input value. Providing an empty string will select no options.
|
118 | * This prop is required when the `native` prop is `false` (default).
|
119 | * Set to an empty string `''` if you don't want any of the available options to be selected.
|
120 | *
|
121 | * If the value is an object it must have reference equality with the option in order to be selected.
|
122 | * If the value is not an object, the string representation must match with the string representation of the option in order to be selected.
|
123 | * @document
|
124 | */
|
125 | value?: unknown;
|
126 | /**
|
127 | * The variant to use.
|
128 | */
|
129 | variant?: 'standard' | 'outlined' | 'filled';
|
130 | }
|
131 |
|
132 | export type SelectClassKey =
|
133 | | 'root'
|
134 | | 'select'
|
135 | | 'filled'
|
136 | | 'outlined'
|
137 | | 'selectMenu'
|
138 | | 'disabled'
|
139 | | 'icon'
|
140 | | 'iconOpen'
|
141 | | 'iconFilled'
|
142 | | 'iconOutlined';
|
143 |
|
144 | /**
|
145 | *
|
146 | * Demos:
|
147 | *
|
148 | * - [Selects](https://mui.com/components/selects/)
|
149 | *
|
150 | * API:
|
151 | *
|
152 | * - [Select API](https://mui.com/api/select/)
|
153 | * - inherits [Input API](https://mui.com/api/input/)
|
154 | */
|
155 | export default function Select(props: SelectProps): JSX.Element;
|