feat: Release @fluentui/react-select as stable (#26491)

microsoft · Jan 31, 2023 · 22477ef · 22477ef
1 parent 7e7f876
commit 22477ef
Show file tree

Hide file tree

Showing 16 changed files with 59 additions and 66 deletions.
diff --git a/change/@fluentui-react-components-fb13e7de-16e0-4fdc-844f-aeba1d747d9a.json b/change/@fluentui-react-components-fb13e7de-16e0-4fdc-844f-aeba1d747d9a.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: release `@fluentui/react-select` as stable",
+  "packageName": "@fluentui/react-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-select-f496d8aa-9e7b-4f8d-a88d-d293e5587603.json b/change/@fluentui-react-select-f496d8aa-9e7b-4f8d-a88d-d293e5587603.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat: release `@fluentui/react-select` as stable",
+  "packageName": "@fluentui/react-select",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-components/etc/react-components.api.md b/packages/react-components/react-components/etc/react-components.api.md
@@ -441,6 +441,7 @@ import { renderPopoverTrigger_unstable } from '@fluentui/react-popover';
 import { renderPortal_unstable } from '@fluentui/react-portal';
 import { renderRadio_unstable } from '@fluentui/react-radio';
 import { renderRadioGroup_unstable } from '@fluentui/react-radio';
+import { renderSelect_unstable } from '@fluentui/react-select';
 import { renderSlider_unstable } from '@fluentui/react-slider';
 import { renderSpinButton_unstable } from '@fluentui/react-spinbutton';
 import { renderSpinner_unstable } from '@fluentui/react-spinner';
@@ -459,7 +460,13 @@ import { resetIdsForTests } from '@fluentui/react-utilities';
 import { resolveShorthand } from '@fluentui/react-utilities';
 import { ResolveShorthandFunction } from '@fluentui/react-utilities';
 import { ResolveShorthandOptions } from '@fluentui/react-utilities';
+import { Select } from '@fluentui/react-select';
 import { SelectableHandler } from '@fluentui/react-menu';
+import { selectClassNames } from '@fluentui/react-select';
+import { SelectOnChangeData } from '@fluentui/react-select';
+import { SelectProps } from '@fluentui/react-select';
+import { SelectSlots } from '@fluentui/react-select';
+import { SelectState } from '@fluentui/react-select';
 import { SelectTabData } from '@fluentui/react-tabs';
 import { SelectTabEvent } from '@fluentui/react-tabs';
 import { SelectTabEventHandler } from '@fluentui/react-tabs';
@@ -723,6 +730,8 @@ import { useRadioGroupContextValues } from '@fluentui/react-radio';
 import { useRadioGroupStyles_unstable } from '@fluentui/react-radio';
 import { useRadioStyles_unstable } from '@fluentui/react-radio';
 import { useScrollbarWidth } from '@fluentui/react-utilities';
+import { useSelect_unstable } from '@fluentui/react-select';
+import { useSelectStyles_unstable } from '@fluentui/react-select';
 import { useSlider_unstable } from '@fluentui/react-slider';
 import { useSliderState_unstable } from '@fluentui/react-slider';
 import { useSliderStyles_unstable } from '@fluentui/react-slider';
@@ -1641,6 +1650,8 @@ export { renderRadio_unstable }
 
 export { renderRadioGroup_unstable }
 
+export { renderSelect_unstable }
+
 export { renderSlider_unstable }
 
 export { renderSpinButton_unstable }
@@ -1677,8 +1688,20 @@ export { ResolveShorthandFunction }
 
 export { ResolveShorthandOptions }
 
+export { Select }
+
 export { SelectableHandler }
 
+export { selectClassNames }
+
+export { SelectOnChangeData }
+
+export { SelectProps }
+
+export { SelectSlots }
+
+export { SelectState }
+
 export { SelectTabData }
 
 export { SelectTabEvent }
@@ -2205,6 +2228,10 @@ export { useRadioStyles_unstable }
 
 export { useScrollbarWidth }
 
+export { useSelect_unstable }
+
+export { useSelectStyles_unstable }
+
 export { useSlider_unstable }
 
 export { useSliderState_unstable }

diff --git a/packages/react-components/react-components/etc/react-components.unstable.api.md b/packages/react-components/react-components/etc/react-components.unstable.api.md
@@ -115,7 +115,6 @@ import { renderDataGridSelectionCell_unstable } from '@fluentui/react-table';
 import { renderField_unstable } from '@fluentui/react-field';
 import { renderInfoButton_unstable } from '@fluentui/react-infobutton';
 import { renderProgressBar_unstable } from '@fluentui/react-progress';
-import { renderSelect_unstable } from '@fluentui/react-select';
 import { renderTable_unstable } from '@fluentui/react-table';
 import { renderTableBody_unstable } from '@fluentui/react-table';
 import { renderTableCell_unstable } from '@fluentui/react-table';
@@ -126,14 +125,9 @@ import { renderTableHeaderCell_unstable } from '@fluentui/react-table';
 import { renderTableRow_unstable } from '@fluentui/react-table';
 import { renderTableSelectionCell_unstable } from '@fluentui/react-table';
 import { renderVirtualizer_unstable } from '@fluentui/react-virtualizer';
-import { Select } from '@fluentui/react-select';
-import { selectClassNames } from '@fluentui/react-select';
 import { SelectField_unstable as SelectField } from '@fluentui/react-select';
 import { selectFieldClassNames } from '@fluentui/react-select';
 import { SelectFieldProps_unstable as SelectFieldProps } from '@fluentui/react-select';
-import { SelectProps } from '@fluentui/react-select';
-import { SelectSlots } from '@fluentui/react-select';
-import { SelectState } from '@fluentui/react-select';
 import { SliderField_unstable as SliderField } from '@fluentui/react-slider';
 import { sliderFieldClassNames } from '@fluentui/react-slider';
 import { SliderFieldProps_unstable as SliderFieldProps } from '@fluentui/react-slider';
@@ -241,8 +235,6 @@ import { useInfoButtonStyles_unstable } from '@fluentui/react-infobutton';
 import { useIntersectionObserver } from '@fluentui/react-virtualizer';
 import { useProgressBar_unstable } from '@fluentui/react-progress';
 import { useProgressBarStyles_unstable } from '@fluentui/react-progress';
-import { useSelect_unstable } from '@fluentui/react-select';
-import { useSelectStyles_unstable } from '@fluentui/react-select';
 import { useTable_unstable } from '@fluentui/react-table';
 import { useTableBody_unstable } from '@fluentui/react-table';
 import { useTableBodyStyles_unstable } from '@fluentui/react-table';
@@ -498,8 +490,6 @@ export { renderInfoButton_unstable }
 
 export { renderProgressBar_unstable }
 
-export { renderSelect_unstable }
-
 export { renderTable_unstable }
 
 export { renderTableBody_unstable }
@@ -520,22 +510,12 @@ export { renderTableSelectionCell_unstable }
 
 export { renderVirtualizer_unstable }
 
-export { Select }
-
-export { selectClassNames }
-
 export { SelectField }
 
 export { selectFieldClassNames }
 
 export { SelectFieldProps }
 
-export { SelectProps }
-
-export { SelectSlots }
-
-export { SelectState }
-
 export { SliderField }
 
 export { sliderFieldClassNames }
@@ -750,10 +730,6 @@ export { useProgressBar_unstable }
 
 export { useProgressBarStyles_unstable }
 
-export { useSelect_unstable }
-
-export { useSelectStyles_unstable }
-
 export { useTable_unstable }
 
 export { useTableBody_unstable }

diff --git a/packages/react-components/react-components/src/index.ts b/packages/react-components/react-components/src/index.ts
@@ -576,6 +576,14 @@ export type {
   RadioSlots,
   RadioState,
 } from '@fluentui/react-radio';
+export {
+  Select,
+  renderSelect_unstable,
+  selectClassNames,
+  useSelectStyles_unstable,
+  useSelect_unstable,
+} from '@fluentui/react-select';
+export type { SelectOnChangeData, SelectProps, SelectSlots, SelectState } from '@fluentui/react-select';
 export {
   Slider,
   sliderClassNames,

diff --git a/packages/react-components/react-components/src/unstable/index.ts b/packages/react-components/react-components/src/unstable/index.ts
@@ -46,14 +46,6 @@ export type {
   CardSlots,
   CardState,
 } from '@fluentui/react-card';
-export {
-  Select,
-  renderSelect_unstable,
-  selectClassNames,
-  useSelectStyles_unstable,
-  useSelect_unstable,
-} from '@fluentui/react-select';
-export type { SelectProps, SelectSlots, SelectState } from '@fluentui/react-select';
 
 export {
   InfoButton,

diff --git a/packages/react-components/react-select/README.md b/packages/react-components/react-select/README.md
@@ -3,7 +3,3 @@
 **React Select components for [Fluent UI React](https://react.fluentui.dev)**
 
 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.
diff --git a/packages/react-components/react-select/package.json b/packages/react-components/react-select/package.json
@@ -50,8 +50,7 @@
     "tag": "beta",
     "disallowedChangeTypes": [
       "major",
-      "minor",
-      "patch"
+      "prerelease"
     ]
   },
   "exports": {

diff --git a/packages/react-components/react-select/stories/Select/SelectAppearance.stories.tsx b/packages/react-components/react-select/stories/Select/SelectAppearance.stories.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { Select } from '@fluentui/react-select';
-import { makeStyles, mergeClasses, shorthands, tokens, useId } from '@fluentui/react-components';
+import { makeStyles, mergeClasses, Select, shorthands, tokens, useId } from '@fluentui/react-components';
 
 const useStyles = makeStyles({
   base: {

diff --git a/packages/react-components/react-select/stories/Select/SelectControlled.stories.tsx b/packages/react-components/react-select/stories/Select/SelectControlled.stories.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { Select } from '@fluentui/react-select';
-import { useId } from '@fluentui/react-components';
-import type { SelectProps } from '@fluentui/react-select';
+import { Select, useId } from '@fluentui/react-components';
+import type { SelectProps } from '@fluentui/react-components';
 
 export const Controlled = () => {
   const selectId = useId();

diff --git a/packages/react-components/react-select/stories/Select/SelectDefault.stories.tsx b/packages/react-components/react-select/stories/Select/SelectDefault.stories.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { Select } from '@fluentui/react-select';
-import { useId } from '@fluentui/react-components';
-import type { SelectProps } from '@fluentui/react-select';
+import { Select, useId } from '@fluentui/react-components';
+import type { SelectProps } from '@fluentui/react-components';
 
 export const Default = (props: SelectProps) => {
   const selectId = useId();

diff --git a/packages/react-components/react-select/stories/Select/SelectDescription.md b/packages/react-components/react-select/stories/Select/SelectDescription.md
@@ -1,14 +1 @@
 A Select allows one option to be selected from multiple options. The Select component is a wrapper around the native `<select>` element.
-
-<!-- Don't allow prettier to collapse code block into single line -->
-<!-- prettier-ignore -->
-> **⚠️ Preview components are considered unstable:**
->
-> ```jsx
->
-> import { Select } from '@fluentui/react-components/unstable';
->
-> ```
->
-> - Features and APIs may change before final release
-> - Please contact us if you intend to use this in your product
diff --git a/packages/react-components/react-select/stories/Select/SelectDisabled.stories.tsx b/packages/react-components/react-select/stories/Select/SelectDisabled.stories.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { Select } from '@fluentui/react-select';
-import { useId } from '@fluentui/react-components';
+import { Select, useId } from '@fluentui/react-components';
 
 export const Disabled = () => {
   const selectId = useId();

diff --git a/packages/react-components/react-select/stories/Select/SelectInitialValue.stories.tsx b/packages/react-components/react-select/stories/Select/SelectInitialValue.stories.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { Select } from '@fluentui/react-select';
-import { useId } from '@fluentui/react-components';
+import { Select, useId } from '@fluentui/react-components';
 
 export const InitialValue = () => {
   const selectId = useId();

diff --git a/packages/react-components/react-select/stories/Select/SelectSize.stories.tsx b/packages/react-components/react-select/stories/Select/SelectSize.stories.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { Select } from '@fluentui/react-select';
-import { useId } from '@fluentui/react-components';
+import { Select, useId } from '@fluentui/react-components';
 
 export const Size = () => {
   const selectId = useId();

diff --git a/packages/react-components/react-select/stories/Select/index.stories.tsx b/packages/react-components/react-select/stories/Select/index.stories.tsx
@@ -11,7 +11,7 @@ export { InitialValue } from './SelectInitialValue.stories';
 export { Size } from './SelectSize.stories';
 
 export default {
-  title: 'Preview Components/Select',
+  title: 'Components/Select',
   component: Select,
   parameters: {
     docs: {