[Select] Create new Select component (#541)

Co-authored-by: Michał Dudak <[email protected]>

docs/data/api/select-arrow.json

@@ -0,0 +1,18 @@
+{
+  "props": {
+    "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
+    "hideWhenUncentered": { "type": { "name": "bool" }, "default": "false" },
+    "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
+  },
+  "name": "SelectArrow",
+  "imports": ["import { Select } from '@base_ui/react/Select';\nconst SelectArrow = Select.Arrow;"],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": true,
+  "muiName": "SelectArrow",
+  "forwardsRefTo": "HTMLDivElement",
+  "filename": "/packages/mui-base/src/Select/Arrow/SelectArrow.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/react-select/\">Select</a></li></ul>",
+  "cssComponent": false
+}

docs/data/api/select-backdrop.json

@@ -0,0 +1,24 @@
+{
+  "props": {
+    "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
+    "container": {
+      "type": { "name": "union", "description": "HTML element<br>&#124;&nbsp;func" },
+      "default": "false"
+    },
+    "keepMounted": { "type": { "name": "bool" }, "default": "false" },
+    "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
+  },
+  "name": "SelectBackdrop",
+  "imports": [
+    "import { Select } from '@base_ui/react/Select';\nconst SelectBackdrop = Select.Backdrop;"
+  ],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": true,
+  "muiName": "SelectBackdrop",
+  "forwardsRefTo": "HTMLDivElement",
+  "filename": "/packages/mui-base/src/Select/Backdrop/SelectBackdrop.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/react-select/\">Select</a></li></ul>",
+  "cssComponent": false
+}

docs/data/api/select-group-label.json

@@ -0,0 +1,19 @@
+{
+  "props": {
+    "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
+    "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
+  },
+  "name": "SelectGroupLabel",
+  "imports": [
+    "import { Select } from '@base_ui/react/Select';\nconst SelectGroupLabel = Select.GroupLabel;"
+  ],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": true,
+  "muiName": "SelectGroupLabel",
+  "forwardsRefTo": "HTMLDivElement",
+  "filename": "/packages/mui-base/src/Select/GroupLabel/SelectGroupLabel.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/react-select/\">Select</a></li></ul>",
+  "cssComponent": false
+}

docs/data/api/select-group.json

@@ -0,0 +1,17 @@
+{
+  "props": {
+    "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
+    "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
+  },
+  "name": "SelectGroup",
+  "imports": ["import { Select } from '@base_ui/react/Select';\nconst SelectGroup = Select.Group;"],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": true,
+  "muiName": "SelectGroup",
+  "forwardsRefTo": "HTMLDivElement",
+  "filename": "/packages/mui-base/src/Select/Group/SelectGroup.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/react-select/\">Select</a></li></ul>",
+  "cssComponent": false
+}

docs/data/api/select-icon.json

@@ -0,0 +1,17 @@
+{
+  "props": {
+    "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
+    "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
+  },
+  "name": "SelectIcon",
+  "imports": ["import { Select } from '@base_ui/react/Select';\nconst SelectIcon = Select.Icon;"],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": true,
+  "muiName": "SelectIcon",
+  "forwardsRefTo": "HTMLSpanElement",
+  "filename": "/packages/mui-base/src/Select/Icon/SelectIcon.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/react-select/\">Select</a></li></ul>",
+  "cssComponent": false
+}

docs/data/api/select-option-group-label.json

@@ -0,0 +1,19 @@
+{
+  "props": {
+    "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
+    "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
+  },
+  "name": "SelectOptionGroupLabel",
+  "imports": [
+    "import { Select } from '@base_ui/react/Select';\nconst SelectOptionGroupLabel = Select.OptionGroupLabel;"
+  ],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": true,
+  "muiName": "SelectOptionGroupLabel",
+  "forwardsRefTo": "HTMLDivElement",
+  "filename": "/packages/mui-base/src/Select/OptionGroupLabel/SelectOptionGroupLabel.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/react-select/\">Select</a></li></ul>",
+  "cssComponent": false
+}

docs/data/api/select-option-group.json

@@ -0,0 +1,19 @@
+{
+  "props": {
+    "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
+    "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
+  },
+  "name": "SelectOptionGroup",
+  "imports": [
+    "import { Select } from '@base_ui/react/Select';\nconst SelectOptionGroup = Select.OptionGroup;"
+  ],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": true,
+  "muiName": "SelectOptionGroup",
+  "forwardsRefTo": "HTMLDivElement",
+  "filename": "/packages/mui-base/src/Select/OptionGroup/SelectOptionGroup.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/react-select/\">Select</a></li></ul>",
+  "cssComponent": false
+}

docs/data/api/select-option-indicator.json

@@ -0,0 +1,20 @@
+{
+  "props": {
+    "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
+    "keepMounted": { "type": { "name": "bool" }, "default": "false" },
+    "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
+  },
+  "name": "SelectOptionIndicator",
+  "imports": [
+    "import { Select } from '@base_ui/react/Select';\nconst SelectOptionIndicator = Select.OptionIndicator;"
+  ],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": true,
+  "muiName": "SelectOptionIndicator",
+  "forwardsRefTo": "HTMLSpanElement",
+  "filename": "/packages/mui-base/src/Select/OptionIndicator/SelectOptionIndicator.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/react-select/\">Select</a></li></ul>",
+  "cssComponent": false
+}

docs/data/api/select-option-text.json

@@ -0,0 +1,16 @@
+{
+  "props": {},
+  "name": "SelectOptionText",
+  "imports": [
+    "import { Select } from '@base_ui/react/Select';\nconst SelectOptionText = Select.OptionText;"
+  ],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": true,
+  "muiName": "SelectOptionText",
+  "forwardsRefTo": "HTMLDivElement",
+  "filename": "/packages/mui-base/src/Select/OptionText/SelectOptionText.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/react-select/\">Select</a></li></ul>",
+  "cssComponent": false
+}

docs/data/api/select-option.json

@@ -0,0 +1,20 @@
+{
+  "props": {
+    "disabled": { "type": { "name": "bool" }, "default": "false" },
+    "label": { "type": { "name": "string" } },
+    "value": { "type": { "name": "any" }, "default": "null" }
+  },
+  "name": "SelectOption",
+  "imports": [
+    "import { Select } from '@base_ui/react/Select';\nconst SelectOption = Select.Option;"
+  ],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": true,
+  "muiName": "SelectOption",
+  "forwardsRefTo": "HTMLDivElement",
+  "filename": "/packages/mui-base/src/Select/Option/SelectOption.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/react-select/\">Select</a></li></ul>",
+  "cssComponent": false
+}

docs/data/api/select-popup.json

@@ -0,0 +1,18 @@
+{
+  "props": {
+    "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
+    "id": { "type": { "name": "string" } },
+    "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
+  },
+  "name": "SelectPopup",
+  "imports": ["import { Select } from '@base_ui/react/Select';\nconst SelectPopup = Select.Popup;"],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": true,
+  "muiName": "SelectPopup",
+  "forwardsRefTo": "HTMLDivElement",
+  "filename": "/packages/mui-base/src/Select/Popup/SelectPopup.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/react-select/\">Select</a></li></ul>",
+  "cssComponent": false
+}

docs/data/api/select-positioner.json

@@ -0,0 +1,69 @@
+{
+  "props": {
+    "alignment": {
+      "type": {
+        "name": "enum",
+        "description": "'center'<br>&#124;&nbsp;'end'<br>&#124;&nbsp;'start'"
+      },
+      "default": "'start'"
+    },
+    "alignmentOffset": { "type": { "name": "number" }, "default": "0" },
+    "anchor": {
+      "type": {
+        "name": "union",
+        "description": "(props, propName) => {\n  if (props[propName] == null) {\n    return new Error(`Prop '${propName}' is required but wasn't specified`);\n  }\n  if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {\n    return new Error(`Expected prop '${propName}' to be of type Element`);\n  }\n  return null;\n}<br>&#124;&nbsp;func<br>&#124;&nbsp;{ contextElement?: (props, propName) => {\n  if (props[propName] == null) {\n    return null;\n  }\n  if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {\n    return new Error(`Expected prop '${propName}' to be of type Element`);\n  }\n  return null;\n}, getBoundingClientRect: func, getClientRects?: func }<br>&#124;&nbsp;{ current?: (props, propName) => {\n  if (props[propName] == null) {\n    return null;\n  }\n  if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {\n    return new Error(`Expected prop '${propName}' to be of type Element`);\n  }\n  return null;\n} }"
+      }
+    },
+    "arrowPadding": { "type": { "name": "number" }, "default": "5" },
+    "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
+    "collisionBoundary": {
+      "type": {
+        "name": "union",
+        "description": "'clippingAncestors'<br>&#124;&nbsp;Array&lt;(props, propName) => {\n  if (props[propName] == null) {\n    return new Error(`Prop '${propName}' is required but wasn't specified`);\n  }\n  if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {\n    return new Error(`Expected prop '${propName}' to be of type Element`);\n  }\n  return null;\n}&gt;<br>&#124;&nbsp;(props, propName) => {\n  if (props[propName] == null) {\n    return new Error(`Prop '${propName}' is required but wasn't specified`);\n  }\n  if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {\n    return new Error(`Expected prop '${propName}' to be of type Element`);\n  }\n  return null;\n}<br>&#124;&nbsp;{ height: number, width: number, x: number, y: number }"
+      },
+      "default": "'clippingAncestors'"
+    },
+    "collisionPadding": {
+      "type": {
+        "name": "union",
+        "description": "number<br>&#124;&nbsp;{ bottom?: number, left?: number, right?: number, top?: number }"
+      },
+      "default": "5"
+    },
+    "container": {
+      "type": {
+        "name": "union",
+        "description": "(props, propName) => {\n  if (props[propName] == null) {\n    return new Error(`Prop '${propName}' is required but wasn't specified`);\n  }\n  if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {\n    return new Error(`Expected prop '${propName}' to be of type Element`);\n  }\n  return null;\n}<br>&#124;&nbsp;{ current?: (props, propName) => {\n  if (props[propName] == null) {\n    return null;\n  }\n  if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {\n    return new Error(`Expected prop '${propName}' to be of type Element`);\n  }\n  return null;\n} }"
+      }
+    },
+    "hideWhenDetached": { "type": { "name": "bool" }, "default": "false" },
+    "positionMethod": {
+      "type": { "name": "enum", "description": "'absolute'<br>&#124;&nbsp;'fixed'" },
+      "default": "'absolute'"
+    },
+    "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } },
+    "side": {
+      "type": {
+        "name": "enum",
+        "description": "'bottom'<br>&#124;&nbsp;'left'<br>&#124;&nbsp;'right'<br>&#124;&nbsp;'top'"
+      },
+      "default": "'bottom'"
+    },
+    "sideOffset": { "type": { "name": "number" }, "default": "0" },
+    "sticky": { "type": { "name": "bool" }, "default": "false" },
+    "trackAnchor": { "type": { "name": "bool" }, "default": "true" }
+  },
+  "name": "SelectPositioner",
+  "imports": [
+    "import { Select } from '@base_ui/react/Select';\nconst SelectPositioner = Select.Positioner;"
+  ],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": true,
+  "muiName": "SelectPositioner",
+  "forwardsRefTo": "HTMLDivElement",
+  "filename": "/packages/mui-base/src/Select/Positioner/SelectPositioner.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/react-select/\">Select</a></li></ul>",
+  "cssComponent": false
+}

docs/data/api/select-root.json

@@ -0,0 +1,26 @@
+{
+  "props": {
+    "alignOptionToTrigger": { "type": { "name": "bool" }, "default": "true" },
+    "animated": { "type": { "name": "bool" }, "default": "true" },
+    "defaultOpen": { "type": { "name": "bool" }, "default": "false" },
+    "defaultValue": { "type": { "name": "any" }, "default": "null" },
+    "disabled": { "type": { "name": "bool" }, "default": "false" },
+    "name": { "type": { "name": "string" } },
+    "onOpenChange": { "type": { "name": "func" } },
+    "onValueChange": { "type": { "name": "func" } },
+    "open": { "type": { "name": "bool" } },
+    "readOnly": { "type": { "name": "bool" }, "default": "false" },
+    "required": { "type": { "name": "bool" }, "default": "false" },
+    "value": { "type": { "name": "any" } }
+  },
+  "name": "SelectRoot",
+  "imports": ["import { Select } from '@base_ui/react/Select';\nconst SelectRoot = Select.Root;"],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": null,
+  "muiName": "SelectRoot",
+  "filename": "/packages/mui-base/src/Select/Root/SelectRoot.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/react-select/\">Select</a></li></ul>",
+  "cssComponent": false
+}

docs/data/api/select-scroll-down-arrow.json

@@ -0,0 +1,16 @@
+{
+  "props": { "keepMounted": { "type": { "name": "bool" }, "default": "false" } },
+  "name": "SelectScrollDownArrow",
+  "imports": [
+    "import { Select } from '@base_ui/react/Select';\nconst SelectScrollDownArrow = Select.ScrollDownArrow;"
+  ],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": true,
+  "muiName": "SelectScrollDownArrow",
+  "forwardsRefTo": "HTMLDivElement",
+  "filename": "/packages/mui-base/src/Select/ScrollDownArrow/SelectScrollDownArrow.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/react-select/\">Select</a></li></ul>",
+  "cssComponent": false
+}

docs/data/api/select-scroll-up-arrow.json

@@ -0,0 +1,16 @@
+{
+  "props": { "keepMounted": { "type": { "name": "bool" }, "default": "false" } },
+  "name": "SelectScrollUpArrow",
+  "imports": [
+    "import { Select } from '@base_ui/react/Select';\nconst SelectScrollUpArrow = Select.ScrollUpArrow;"
+  ],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": true,
+  "muiName": "SelectScrollUpArrow",
+  "forwardsRefTo": "HTMLDivElement",
+  "filename": "/packages/mui-base/src/Select/ScrollUpArrow/SelectScrollUpArrow.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/react-select/\">Select</a></li></ul>",
+  "cssComponent": false
+}

docs/data/api/select-separator.json

@@ -0,0 +1,19 @@
+{
+  "props": {
+    "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
+    "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
+  },
+  "name": "SelectSeparator",
+  "imports": [
+    "import { Select } from '@base_ui/react/Select';\nconst SelectSeparator = Select.Separator;"
+  ],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": true,
+  "muiName": "SelectSeparator",
+  "forwardsRefTo": "HTMLDivElement",
+  "filename": "/packages/mui-base/src/Select/Separator/SelectSeparator.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/react-select/\">Select</a></li></ul>",
+  "cssComponent": false
+}

docs/data/api/select-trigger.json

@@ -0,0 +1,19 @@
+{
+  "props": {
+    "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
+    "disabled": { "type": { "name": "bool" }, "default": "false" },
+    "focusableWhenDisabled": { "type": { "name": "bool" }, "default": "false" },
+    "label": { "type": { "name": "string" } },
+    "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
+  },
+  "name": "SelectTrigger",
+  "imports": [
+    "import { Select } from '@base_ui/react/Select';\nconst SelectTrigger = Select.Trigger;"
+  ],
+  "classes": [],
+  "muiName": "SelectTrigger",
+  "filename": "/packages/mui-base/src/Select/Trigger/SelectTrigger.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/react-select/\">Select</a></li></ul>",
+  "cssComponent": false
+}