@fluentui/react-select 0.0.0-nightly-20220525-0423.1

package/CHANGELOG.json

@@ -0,0 +1,194 @@
+{
+  "name": "@fluentui/react-select",
+  "entries": [
+    {
+      "date": "Wed, 25 May 2022 04:35:48 GMT",
+      "tag": "@fluentui/react-select_v0.0.0-nightly-20220525-0423.1",
+      "version": "0.0.0-nightly-20220525-0423.1",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "sarah.higley@microsoft.com",
+            "package": "@fluentui/react-select",
+            "commit": "02b40c905e997347f8c910bc51cfbdbdc67de7ee",
+            "comment": "add Select to Preview Components"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 23 May 2022 18:56:51 GMT",
+      "tag": "@fluentui/react-select_v9.0.0-beta.0",
+      "version": "9.0.0-beta.0",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-select",
+            "comment": "Bump @fluentui/react-theme to v9.0.0-rc.9",
+            "commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-select",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.7",
+            "commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 23 May 2022 12:14:24 GMT",
+      "tag": "@fluentui/react-select_v9.0.0-beta.0",
+      "version": "9.0.0-beta.0",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-select",
+            "comment": "Bump @fluentui/react-theme to v9.0.0-rc.8",
+            "commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-select",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.9",
+            "commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-select",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.6",
+            "commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 05 May 2022 18:26:30 GMT",
+      "tag": "@fluentui/react-select_v9.0.0-beta.0",
+      "version": "9.0.0-beta.0",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-select",
+            "comment": "Bump @fluentui/react-theme to v9.0.0-rc.7",
+            "commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-select",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.8",
+            "commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-select",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.5",
+            "commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 04 May 2022 13:26:54 GMT",
+      "tag": "@fluentui/react-select_v9.0.0-beta.0",
+      "version": "9.0.0-beta.0",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-select",
+            "comment": "Bump @fluentui/react-theme to v9.0.0-rc.6",
+            "commit": "65f94192ed3b2cde7e52b9c7e12d6f38b81965dd"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-select",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.7",
+            "commit": "65f94192ed3b2cde7e52b9c7e12d6f38b81965dd"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 19 Apr 2022 19:17:29 GMT",
+      "tag": "@fluentui/react-select_v9.0.0-beta.0",
+      "version": "9.0.0-beta.0",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-select",
+            "comment": "Bump @fluentui/react-theme to v9.0.0-rc.5",
+            "commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-select",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.6",
+            "commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-select",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.4",
+            "commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 04 Mar 2022 05:17:40 GMT",
+      "tag": "@fluentui/react-select_v9.0.0-beta.0",
+      "version": "9.0.0-beta.0",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-select",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.5",
+            "commit": "1494f0b620f6d5aae7f0aef33fc9e8f6eb7f8749"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 01 Mar 2022 02:17:40 GMT",
+      "tag": "@fluentui/react-select_v9.0.0-beta.0",
+      "version": "9.0.0-beta.0",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-select",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.4",
+            "commit": "0bc1e755543ed69443d5d03e1976c630583242f7"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 18 Feb 2022 13:35:38 GMT",
+      "tag": "@fluentui/react-select_v9.0.0-beta.0",
+      "version": "9.0.0-beta.0",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-select",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.3",
+            "commit": "3b9c1e931c23173da3d1af0c696cdc58516ce504"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-select",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.3",
+            "commit": "3b9c1e931c23173da3d1af0c696cdc58516ce504"
+          }
+        ]
+      }
+    }
+  ]
+}

package/CHANGELOG.md

@@ -0,0 +1,96 @@
+# Change Log - @fluentui/react-select
+
+This log was last generated on Wed, 25 May 2022 04:35:48 GMT and should not be manually modified.
+
+<!-- Start content -->
+
+## [0.0.0-nightly-20220525-0423.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v0.0.0-nightly-20220525-0423.1)
+
+Wed, 25 May 2022 04:35:48 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.0.0-beta.0..@fluentui/react-select_v0.0.0-nightly-20220525-0423.1)
+
+### Changes
+
+- add Select to Preview Components ([PR #23208](https://github.com/microsoft/fluentui/pull/23208) by sarah.higley@microsoft.com)
+
+## [9.0.0-beta.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.0.0-beta.0)
+
+Mon, 23 May 2022 18:56:51 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.0.0-beta.0..@fluentui/react-select_v9.0.0-beta.0)
+
+### Changes
+
+- Bump @fluentui/react-theme to v9.0.0-rc.9 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.7 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
+
+## [9.0.0-beta.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.0.0-beta.0)
+
+Mon, 23 May 2022 12:14:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.0.0-beta.0..@fluentui/react-select_v9.0.0-beta.0)
+
+### Changes
+
+- Bump @fluentui/react-theme to v9.0.0-rc.8 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-rc.9 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.6 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
+
+## [9.0.0-beta.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.0.0-beta.0)
+
+Thu, 05 May 2022 18:26:30 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.0.0-beta.0..@fluentui/react-select_v9.0.0-beta.0)
+
+### Changes
+
+- Bump @fluentui/react-theme to v9.0.0-rc.7 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-rc.8 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.5 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
+
+## [9.0.0-beta.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.0.0-beta.0)
+
+Wed, 04 May 2022 13:26:54 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.0.0-beta.0..@fluentui/react-select_v9.0.0-beta.0)
+
+### Changes
+
+- Bump @fluentui/react-theme to v9.0.0-rc.6 ([PR #22786](https://github.com/microsoft/fluentui/pull/22786) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-rc.7 ([PR #22786](https://github.com/microsoft/fluentui/pull/22786) by beachball)
+
+## [9.0.0-beta.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.0.0-beta.0)
+
+Tue, 19 Apr 2022 19:17:29 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.0.0-beta.0..@fluentui/react-select_v9.0.0-beta.0)
+
+### Changes
+
+- Bump @fluentui/react-theme to v9.0.0-rc.5 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-rc.6 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.4 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
+
+## [9.0.0-beta.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.0.0-beta.0)
+
+Fri, 04 Mar 2022 05:17:40 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.0.0-beta.0..@fluentui/react-select_v9.0.0-beta.0)
+
+### Changes
+
+- Bump @fluentui/react-utilities to v9.0.0-rc.5 ([PR #21947](https://github.com/microsoft/fluentui/pull/21947) by beachball)
+
+## [9.0.0-beta.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.0.0-beta.0)
+
+Tue, 01 Mar 2022 02:17:40 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.0.0-beta.0..@fluentui/react-select_v9.0.0-beta.0)
+
+### Changes
+
+- Bump @fluentui/react-utilities to v9.0.0-rc.4 ([PR #21884](https://github.com/microsoft/fluentui/pull/21884) by beachball)
+
+## [9.0.0-beta.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.0.0-beta.0)
+
+Fri, 18 Feb 2022 13:35:38 GMT
+
+### Changes
+
+- Bump @fluentui/react-utilities to v9.0.0-rc.3 ([PR #21800](https://github.com/microsoft/fluentui/pull/21800) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.3 ([PR #21800](https://github.com/microsoft/fluentui/pull/21800) by beachball)
+
+# Change Log - @fluentui/react-select

package/LICENSE

@@ -0,0 +1,15 @@
+@fluentui/react-select
+
+Copyright (c) Microsoft Corporation
+
+All rights reserved.
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license

package/README.md

@@ -0,0 +1,9 @@
+# @fluentui/react-select
+
+**React Select components for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**
+
+The Select component provides a styled wrapper around the native `<select>` element. It is recommended over Combobox when features like filtering and virtualization are not required. It provides better cross-platform functionality particularly on mobile, and better accessibility.
+
+## STATUS: WIP 🚧
+
+These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.

package/Spec.md

@@ -0,0 +1,243 @@
+# @fluentui/react-select Spec
+
+## Background
+
+The Select component allows users to select one value from a predefined set of values. It does so by providing a styled wrapper around the HTML `<select>` element. This means it inherits the dropdown UI and keyboard functionality from the platform.
+
+Select is a more lightweight, accessible, and less feature-rich alternative to Combobox. It has better mobile support, and better cross-platform screen reader support. Unlike Combobox, it does not provide filtering, multiple selection, or virtualization. Select is recommended over Combobox when the following are true:
+
+- The control is a basic single-select that matches the functionality of a `<select>`
+- Native-feeling cross platform UX (particularly on mobile) is a primary concern
+- Performance, accessibility, and bundle size are primary concerns
+
+Combobox is recommended if any of the following are needed:
+
+- Filtering or freeform text input
+- Virtualization
+- Control over styling the dropdown and options
+- Multiple selection
+
+## Prior Art
+
+The [Open UI research on Select](https://open-ui.org/components/select.research) combines both the ideas of the proposed Fluent Combobox and Select. There is also an [Open UI draft describing the select element](https://open-ui.org/components/select).
+
+### Comparison of v8 and v0
+
+`@fluentui/react` has three different controls that are different flavors of select/combobox:
+
+- [Combobox](https://developer.microsoft.com/en-us/fluentui#/controls/web/combobox): an editable combobox with a textfield and dropdown listbox
+- [Dropdown](https://developer.microsoft.com/en-us/fluentui#/controls/web/dropdown): a non-editable combobox with dropdown listbox
+- [Pickers](https://developer.microsoft.com/en-us/fluentui#/controls/web/pickers): an editable combobox with greater customization, particularly in displaying selected items
+
+`@fluentui/react-northstar` has one combobox control:
+
+- [Dropdown](https://fluentsite.z22.web.core.windows.net/0.51.2/components/dropdown/definition): either an editable or non-editable combobox with a tag-like approach to selected items
+
+### Functional variations across v8 and v0 components
+
+The main functional variants in existing components are as follows:
+
+- Editable vs. non-editable: editable comboboxes have a textbox and allow the user to type, which optionally filters the listbox
+- Within editable comboboxes: freeform text input and filtering on input are optional
+- Within editable comboboxes: When a typed value does not match an option, it can be cleared or preserved on blur
+- Single vs. multiselect
+- Within multiselect: selected options may be presented as text within the combobox value, pills, or a custom render.
+
+### Dropdown options variations across v8 and v0 Components
+
+- Options may have an icon, image, text + description, or entirely custom render
+- Options may be grouped with a group header and divider
+- There may be a "load more results" action
+- Within multiselect: There may be a "Select all" option
+
+## Sample Code
+
+Default/standard Select:
+
+```tsx
+<label htmlFor="selectID">Choose a color</label>
+<Select id="selectID">
+  <option>Red</option>
+  <option>Green</option>
+  <option>Blue</option>
+</Select>
+```
+
+Select with grouped options:
+
+```tsx
+<label htmlFor="selectID">Choose an animal</label>
+<Select id="selectID">
+  <optgroup label="Land">
+    <option>Cat</option>
+    <option>Dog</option>
+    <option>Horse</option>
+  </optgroup>
+  <optgroup label="Water">
+    <option>Dolphin</option>
+    <option>Seal</option>
+    <option>Shark</option>
+  </optgroup>
+</Select>
+```
+
+Inline Select with appearance and size set:
+
+```tsx
+<label htmlFor="selectID">Choose a color</label>
+<Select id="selectID" appearance="filledDarker" size="small" inline>
+  <option>Red</option>
+  <option>Green</option>
+  <option>Blue</option>
+</Select>
+```
+
+Disabled Select with second option selected:
+
+```tsx
+<label htmlFor="selectID">Choose a color</label>
+<Select id="selectID" disabled>
+  <option>Red</option>
+  <option selected>Green</option>
+  <option>Blue</option>
+</Select>
+```
+
+## Variants
+
+### Layout
+
+- Block (default)
+- Inline
+
+### Size
+
+- Small
+- Medium (default)
+- Large
+
+### Appearance
+
+- Filled darker
+- Filled lighter
+- Outline (default)
+- Transparent
+
+### Unsupported Select variants
+
+#### Multiple Selection
+
+The Select component does not support multi-select, and does not support the native `multiselect` attribute. Multiple selection is instead provided through the Combobox component. This is because the native `<select multiple>` has poor accessibility and general UX, and we do not recommend using it. Additionally, because the options are not styleable, there is little benefit to using a wrapped `<Select multiple>` over using the native element directly.
+
+#### Size attribute
+
+For similar reasons to `multiple`, the native `size` attribute is not supported out of the box. It also has very limited styling support, and therefore also has little benefit over the native `<select size="N">`. The Listbox (TODO: confirm name) component is an alternative to using the `size` attribute on a `<select>`.
+
+## API
+
+From [Select.types.tsx](https://github.com/microsoft/fluentui/blob/master/packages/react-select/src/components/Select/Select.types.ts)
+
+### Slots
+
+In this component, `select` is the primary slot. Since `select` is primary, `root` is a separate explicit slot to customize the wrapper.
+
+```ts
+export type SelectSlots = {
+  /** Root of the component, renders as a `<span>`. */
+  root: IntrinsicSlotProps<'span'>;
+  /** The actual `<select>` element */
+  select: IntrinsicSlotProps<'select'>;
+  /** the icon, typically a down arrow */
+  icon: IntrinsicSlotProps<'span'>;
+};
+```
+
+### Children
+
+Children of the `Select` component are rendered as children of the internal `<select>` element. The only children that are supported in practice are the `<optgroup>` and `<option>` elements.
+
+## Structure
+
+- _**Public**_
+
+```tsx
+<label htmlFor="selectID">Choose a color</label>
+<Select id="selectID" className="my-select-class">
+  <option>Red</option>
+  <option>Green</option>
+  <option>Blue</option>
+</Select>
+```
+
+- _**DOM**_
+
+```html
+<label for="selectID">Choose a color</label>
+<span class="my-select-class">
+  <select id="selectID">
+    <option>Red</option>
+    <option>Green</option>
+    <option>Blue</option>
+  </select>
+  <svg><!-- icon --></svg>
+</span>
+```
+
+## Migration
+
+The Select component is a new approach that was not present in `@fluentui/react` v8, or `@fluentui/react-northstar`. It can be considered if the currently used control is the `@fluentui/react` Dropdown component, or the `@fluentui/react-northstar` Dropdown without `search`.
+
+### Props
+
+| v8 Dropdown          | v0 Dropdown               | Proposal                          |
+| -------------------- | ------------------------- | --------------------------------- |
+| options              | items                     | children                          |
+| defaultSelectedKey   | defaultValue              | child with `selected`             |
+| selectedKey          | value                     | imperative ref.value              |
+| id                   | n/a                       | id                                |
+| disabled             | disabled                  | disabled                          |
+| required             | n/a                       | required                          |
+| multiSelect          | multiple                  | use Combobox                      |
+| placeholder          | placeholder               | child with `value=""`             |
+| ariaLabel            | n/a                       | aria-label                        |
+| n/a                  | aria-\*                   | aria-\*                           |
+| errorMessage         | error                     | invalid, message handled in Field |
+| label, onRenderLabel | n/a                       | Handled in Field                  |
+| componentRef         | n/a                       | ref                               |
+| n/a                  | popperRef, popper props   | n/a                               |
+| calloutProps         | list                      | n/a                               |
+| panelProps           | n/a                       | n/a                               |
+| openOnKeyboardFocus  | n/a                       | n/a                               |
+| n/a                  | a11ySelectedItemsMessage  | n/a                               |
+| n/a                  | align                     | n/a                               |
+| n/a                  | autosize                  | n/a                               |
+| n/a                  | checkable                 | n/a                               |
+| n/a                  | clearable                 | n/a                               |
+| n/a                  | defaultHighlightedIndex   | n/a                               |
+| n/a                  | defaultOpen               | n/a                               |
+| n/a                  | fluid                     | default style                     |
+| n/a                  | headerMessage             | optgroup child with `name`        |
+| n/a                  | highlightFirstItemOnOpen  | n/a                               |
+| n/a                  | highlightedIndex          | n/a                               |
+| n/a                  | inline                    | inline                            |
+| n/a                  | inverted                  | n/a                               |
+| n/a                  | loading                   | n/a                               |
+| n/a                  | noResultsMessage          | use children                      |
+| n/a                  | offset                    | n/a                               |
+| n/a                  | open                      | n/a                               |
+| n/a                  | position                  | n/a                               |
+| n/a                  | positionFixed             | n/a                               |
+| n/a                  | search                    | use Combobox                      |
+| styles               | styles                    | style                             |
+| onRenderCaretDown    | toggleIndicator           | use icon slot                     |
+| n/a                  | triggerButton             | n/a                               |
+| onRenderContainer    | n/a                       | n/a                               |
+| onRenderItem         | renderItem                | use children                      |
+| onRenderList         | list slot                 | n/a                               |
+| onRenderOption       | renderItem, headerMessage | use children                      |
+| onRenderPlaceholder  | n/a                       | n/a                               |
+| onRenderTitle        | n/a                       | n/a                               |
+
+## Behaviors and Accessibility
+
+This component makes use of the native `<select>` element, and inherits the native semantics and keyboard interactivity.

package/dist/index.d.ts

@@ -0,0 +1,68 @@
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import * as React_2 from 'react';
+import type { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities';
+
+/**
+ * Render the final JSX of Select
+ */
+export declare const renderSelect_unstable: (state: SelectState) => JSX.Element;
+
+/**
+ * Select component
+ */
+export declare const Select: ForwardRefComponent<SelectProps>;
+
+export declare const selectClassNames: SlotClassNames<SelectSlots>;
+
+export declare type SelectProps = Omit<ComponentProps<Partial<SelectSlots>, 'select'>, 'size'> & {
+    /**
+     * Controls the colors and borders of the Select.
+     *
+     * @default 'outline'
+     */
+    appearance?: 'outline' | 'underline' | 'filled-darker' | 'filled-lighter';
+    /**
+     * If true, the Select will have an inline `display`, allowing it to be inline with other content.
+     * By default, Select has block layout.
+     *
+     * @default false
+     */
+    inline?: boolean;
+    /**
+     * Matches the Input sizes
+     *
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
+};
+
+export declare type SelectSlots = {
+    root: NonNullable<Slot<'span'>>;
+    /** Primary slot: the actual `<select>` element */
+    select: NonNullable<Slot<'select'>>;
+    /** the icon, typically a down arrow */
+    icon: Slot<'span'>;
+};
+
+export declare type SelectState = ComponentState<SelectSlots> & Required<Pick<SelectProps, 'appearance' | 'inline' | 'size'>>;
+
+/**
+ * Create the state required to render Select.
+ *
+ * The returned state can be modified with hooks such as useSelectStyles,
+ * before being passed to renderSelect.
+ *
+ * @param props - props from this instance of Select
+ * @param ref - reference to the `<select>` element in Select
+ */
+export declare const useSelect_unstable: (props: SelectProps, ref: React_2.Ref<HTMLSelectElement>) => SelectState;
+
+/**
+ * Apply styling to the Select slots based on the state
+ */
+export declare const useSelectStyles_unstable: (state: SelectState) => SelectState;
+
+export { }

package/dist/tsdoc-metadata.json

@@ -0,0 +1,11 @@
+// This file is read by tools that parse documentation comments conforming to the TSDoc standard.
+// It should be published with your NPM package.  It should not be tracked by Git.
+{
+  "tsdocVersion": "0.12",
+  "toolPackages": [
+    {
+      "packageName": "@microsoft/api-extractor",
+      "packageVersion": "7.18.1"
+    }
+  ]
+}

package/lib/Select.js

@@ -0,0 +1,2 @@
+export * from './components/Select/index';
+//# sourceMappingURL=Select.js.map

package/lib/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sourceRoot":"../src/","sources":["Select.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC","sourcesContent":["export * from './components/Select/index';\n"]}

package/lib/components/Select/Select.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { useSelect_unstable } from './useSelect';
+import { renderSelect_unstable } from './renderSelect';
+import { useSelectStyles_unstable } from './useSelectStyles';
+/**
+ * Select component
+ */
+
+export const Select = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useSelect_unstable(props, ref);
+  useSelectStyles_unstable(state);
+  return renderSelect_unstable(state);
+});
+Select.displayName = 'Select';
+//# sourceMappingURL=Select.js.map

package/lib/components/Select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,kBAAT,QAAmC,aAAnC;AACA,SAAS,qBAAT,QAAsC,gBAAtC;AACA,SAAS,wBAAT,QAAyC,mBAAzC;AAIA;;AAEG;;AACH,OAAO,MAAM,MAAM,gBAAqC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACtF,QAAM,KAAK,GAAG,kBAAkB,CAAC,KAAD,EAAQ,GAAR,CAAhC;AAEA,EAAA,wBAAwB,CAAC,KAAD,CAAxB;AACA,SAAO,qBAAqB,CAAC,KAAD,CAA5B;AACD,CALuD,CAAjD;AAOP,MAAM,CAAC,WAAP,GAAqB,QAArB","sourcesContent":["import * as React from 'react';\nimport { useSelect_unstable } from './useSelect';\nimport { renderSelect_unstable } from './renderSelect';\nimport { useSelectStyles_unstable } from './useSelectStyles';\nimport type { SelectProps } from './Select.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Select component\n */\nexport const Select: ForwardRefComponent<SelectProps> = React.forwardRef((props, ref) => {\n  const state = useSelect_unstable(props, ref);\n\n  useSelectStyles_unstable(state);\n  return renderSelect_unstable(state);\n});\n\nSelect.displayName = 'Select';\n"],"sourceRoot":"../src/"}