dualfroz
91f1112675
SelectInput reused the styled select and icon from NativeSelectInput, so NativeSelect carried the open icon rotation and the iconOpen class even though a native select never reports being open, and MuiNativeSelect theme variants also styled the Select display and icon. Give SelectInput its own styles, drop the open handling from NativeSelectInput and document that NativeSelect never applies iconOpen.
89 lines
3.6 KiB
JSON
89 lines
3.6 KiB
JSON
{
|
|
"componentDescription": "An alternative to `<Select native />` with a much smaller bundle size footprint.",
|
|
"propDescriptions": {
|
|
"children": {
|
|
"description": "The option elements to populate the select with. Can be some <code><option></code> elements."
|
|
},
|
|
"classes": { "description": "Override or extend the styles applied to the component." },
|
|
"IconComponent": { "description": "The icon that displays the arrow." },
|
|
"input": {
|
|
"description": "An <code>Input</code> element; does not have to be a material-ui specific <code>Input</code>."
|
|
},
|
|
"inputProps": {
|
|
"description": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/select#attributes\">Attributes</a> applied to the <code>select</code> element."
|
|
},
|
|
"onChange": {
|
|
"description": "Callback fired when a menu item is selected.",
|
|
"typeDescriptions": {
|
|
"event": {
|
|
"name": "event",
|
|
"description": "The event source of the callback. You can pull out the new value by accessing <code>event.target.value</code> (string)."
|
|
}
|
|
}
|
|
},
|
|
"sx": {
|
|
"description": "The system prop that allows defining system overrides as well as additional CSS styles."
|
|
},
|
|
"value": { "description": "The <code>input</code> value. The DOM API casts this to a string." },
|
|
"variant": { "description": "The variant to use." }
|
|
},
|
|
"classDescriptions": {
|
|
"disabled": {
|
|
"description": "State class applied to {{nodeName}}.",
|
|
"nodeName": "the select component <code>disabled</code> class"
|
|
},
|
|
"error": {
|
|
"description": "State class applied to {{nodeName}}.",
|
|
"nodeName": "the select component <code>error</code> class"
|
|
},
|
|
"filled": {
|
|
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
|
|
"nodeName": "the select component",
|
|
"conditions": "<code>variant=\"filled\"</code>"
|
|
},
|
|
"icon": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the icon component" },
|
|
"iconFilled": {
|
|
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
|
|
"nodeName": "the icon component",
|
|
"conditions": "<code>variant=\"filled\"</code>"
|
|
},
|
|
"iconOpen": {
|
|
"description": "This class is never applied, a native select doesn't expose whether its popup is open."
|
|
},
|
|
"iconOutlined": {
|
|
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
|
|
"nodeName": "the icon component",
|
|
"conditions": "<code>variant=\"outlined\"</code>"
|
|
},
|
|
"iconStandard": {
|
|
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
|
|
"nodeName": "the icon component",
|
|
"conditions": "<code>variant=\"standard\"</code>"
|
|
},
|
|
"multiple": {
|
|
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
|
|
"nodeName": "the select component",
|
|
"conditions": "<code>multiple={true}</code>"
|
|
},
|
|
"nativeInput": {
|
|
"description": "Styles applied to {{nodeName}}.",
|
|
"nodeName": "the underlying native input component"
|
|
},
|
|
"outlined": {
|
|
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
|
|
"nodeName": "the select component",
|
|
"conditions": "<code>variant=\"outlined\"</code>"
|
|
},
|
|
"root": { "description": "Styles applied to the root element." },
|
|
"select": {
|
|
"description": "Styles applied to {{nodeName}}.",
|
|
"nodeName": "the select component <code>select</code> class"
|
|
},
|
|
"standard": {
|
|
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
|
|
"nodeName": "the select component",
|
|
"conditions": "<code>variant=\"standard\"</code>"
|
|
}
|
|
}
|
|
}
|