@fluentui/react-components 9.7.4 → 9.9.0

package/CHANGELOG.md

@@ -1,12 +1,157 @@
 # Change Log - @fluentui/react-components
 
-This log was last generated on Wed, 21 Dec 2022 10:17:10 GMT and should not be manually modified.
+This log was last generated on Mon, 09 Jan 2023 14:31:41 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.9.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-components_v9.9.0)
+
+Mon, 09 Jan 2023 14:31:41 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-components_v9.8.0..@fluentui/react-components_v9.9.0)
+
+### Minor changes
+
+- `@fluentui/react-components`
+  - feat: implement `useScrollbarWidth` utility hook ([PR #26144](https://github.com/microsoft/fluentui/pull/26144) by lingfangao@hotmail.com)
+- `@fluentui/react-menu`
+  - Stops using ARIAButton types for MenuItem root ([PR #26257](https://github.com/microsoft/fluentui/pull/26257) by bernardo.sunderhus@gmail.com)
+- `@fluentui/react-popover`
+  - feat: add new prop unstable_disableAutoFocus on Popover ([PR #26141](https://github.com/microsoft/fluentui/pull/26141) by yuanboxue@microsoft.com)
+- `@fluentui/react-portal`
+  - feat: elementContains supports Node types ([PR #26158](https://github.com/microsoft/fluentui/pull/26158) by email not defined)
+- `@fluentui/react-utilities`
+  - feat: implement `useScrollbarWidth` utility hook ([PR #26144](https://github.com/microsoft/fluentui/pull/26144) by lingfangao@hotmail.com)
+
+### Patches
+
+- `@fluentui/react-menu`
+  - fix: MenuList props should win over context props ([PR #26252](https://github.com/microsoft/fluentui/pull/26252) by lingfangao@hotmail.com)
+- `@fluentui/react-positioning`
+  - fix: setOverrideTarget should be an event callback ([PR #26157](https://github.com/microsoft/fluentui/pull/26157) by lingfangao@hotmail.com)
+
+### Changes
+
+- `@fluentui/priority-overflow`
+  - fix: Minimum visible overflow items should be respected ([PR #26194](https://github.com/microsoft/fluentui/pull/26194) by lingfangao@hotmail.com)
+- `@fluentui/react-combobox`
+  - fix: perf improvements with useEventCallback ([PR #26191](https://github.com/microsoft/fluentui/pull/26191) by sarah.higley@microsoft.com)
+  - fix: Combobox always starts at the first option if multiselect, and correctly sets focus visible" ([PR #26173](https://github.com/microsoft/fluentui/pull/26173) by sarah.higley@microsoft.com)
+- `@fluentui/react-table`
+  - fix: remove Event type in selectionManager ([PR #26211](https://github.com/microsoft/fluentui/pull/26211) by olfedias@microsoft.com)
+  - refactor: Cleanup unused code ([PR #26219](https://github.com/microsoft/fluentui/pull/26219) by lingfangao@hotmail.com)
+  - BREAKING(TableCellLayout): `wrapper` slot renamed to `content` ([PR #26220](https://github.com/microsoft/fluentui/pull/26220) by lingfangao@hotmail.com)
+
+## [9.8.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-components_v9.8.0)
+
+Wed, 04 Jan 2023 01:40:03 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-components_v9.7.4..@fluentui/react-components_v9.8.0)
+
+### Minor changes
+
+- `@fluentui/react-persona`
+  - feat: Moving Persona to stable. ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by esteban.230@hotmail.com)
+- `@fluentui/react-provider`
+  - feat: FluentProvider applies style attributes defined by a renderer from Griffel ([PR #26046](https://github.com/microsoft/fluentui/pull/26046) by olfedias@microsoft.com)
+- `@fluentui/react-components`
+  - feat: Moving Persona to stable. ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by esteban.230@hotmail.com)
+
+### Patches
+
+- `@fluentui/react-divider`
+  - chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
+- `@fluentui/react-image`
+  - chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
+- `@fluentui/react-input`
+  - chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
+- `@fluentui/react-label`
+  - chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
+- `@fluentui/react-link`
+  - chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
+- `@fluentui/react-menu`
+  - chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
+- `@fluentui/react-popover`
+  - chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
+- `@fluentui/react-portal`
+  - fix: Portals should render correctly in strict mode ([PR #25956](https://github.com/microsoft/fluentui/pull/25956) by lingfangao@hotmail.com)
+  - chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
+- `@fluentui/react-positioning`
+  - fix: force update memory leak in positioning manager ([PR #26096](https://github.com/microsoft/fluentui/pull/26096) by lingfangao@hotmail.com)
+  - chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
+  - fix: Autosize middleware should set box-sizing border-box ([PR #26094](https://github.com/microsoft/fluentui/pull/26094) by lingfangao@hotmail.com)
+- `@fluentui/react-provider`
+  - chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
+- `@fluentui/react-radio`
+  - chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
+- `@fluentui/react-slider`
+  - chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
+- `@fluentui/react-spinbutton`
+  - chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
+- `@fluentui/react-spinner`
+  - chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
+- `@fluentui/react-switch`
+  - chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
+- `@fluentui/react-tabs`
+  - chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
+- `@fluentui/react-tabster`
+  - chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
+  - fix: Bump tabster to 3.0.6 ([PR #26076](https://github.com/microsoft/fluentui/pull/26076) by lingfangao@hotmail.com)
+- `@fluentui/react-text`
+  - chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
+- `@fluentui/react-textarea`
+  - chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
+- `@fluentui/react-tooltip`
+  - chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
+- `@fluentui/react-utilities`
+  - feat: generalize is HTMLElement attribute to unknown ([PR #25991](https://github.com/microsoft/fluentui/pull/25991) by bernardo.sunderhus@gmail.com)
+- `@fluentui/react-accordion`
+  - chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
+- `@fluentui/react-avatar`
+  - chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
+- `@fluentui/react-badge`
+  - chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
+- `@fluentui/react-button`
+  - chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
+- `@fluentui/react-checkbox`
+  - chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
+- `@fluentui/react-components`
+  - fix: Export all relevant Toolbar components and utilities ([PR #26065](https://github.com/microsoft/fluentui/pull/26065) by lingfangao@hotmail.com)
+  - chore: Migrate to new package structure. ([PR #26051](https://github.com/microsoft/fluentui/pull/26051) by tristan.watanabe@gmail.com)
+  - chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
+- `@fluentui/react-dialog`
+  - chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
+
+### Changes
+
+- `@fluentui/react-field`
+  - chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
+- `@fluentui/react-infobutton`
+  - chore: migrate to new package structure. ([PR #26111](https://github.com/microsoft/fluentui/pull/26111) by tristan.watanabe@gmail.com)
+  - chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
+- `@fluentui/react-overflow`
+  - chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
+- `@fluentui/react-progress`
+  - chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
+- `@fluentui/react-select`
+  - chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
+- `@fluentui/react-table`
+  - chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
+  - refactor: render function children called in component render function ([PR #26085](https://github.com/microsoft/fluentui/pull/26085) by lingfangao@hotmail.com)
+  - fix: DataGridSelection cell should focus on input, not cell ([PR #26076](https://github.com/microsoft/fluentui/pull/26076) by lingfangao@hotmail.com)
+- `@fluentui/react-toolbar`
+  - chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
+  - fix: Export all relevant Toolbar components and utilities ([PR #26065](https://github.com/microsoft/fluentui/pull/26065) by lingfangao@hotmail.com)
+- `@fluentui/react-alert`
+  - chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
+- `@fluentui/react-card`
+  - chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
+- `@fluentui/react-combobox`
+  - chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
+- `@fluentui/react-conformance-griffel`
+  - chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
+
 ## [9.7.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-components_v9.7.4)
 
-Wed, 21 Dec 2022 10:17:10 GMT 
+Wed, 21 Dec 2022 10:20:28 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-components_v9.7.3..@fluentui/react-components_v9.7.4)
 
 ### Patches

package/dist/index.d.ts

@@ -278,6 +278,11 @@ import { PartialTheme } from '@fluentui/react-theme';
 import { PartitionAvatarGroupItems } from '@fluentui/react-avatar';
 import { partitionAvatarGroupItems } from '@fluentui/react-avatar';
 import { PartitionAvatarGroupItemsOptions } from '@fluentui/react-avatar';
+import { Persona } from '@fluentui/react-persona';
+import { personaClassNames } from '@fluentui/react-persona';
+import { PersonaProps } from '@fluentui/react-persona';
+import { PersonaSlots } from '@fluentui/react-persona';
+import { PersonaState } from '@fluentui/react-persona';
 import { Popover } from '@fluentui/react-popover';
 import { PopoverContextValue } from '@fluentui/react-popover';
 import { PopoverProps } from '@fluentui/react-popover';
@@ -360,6 +365,7 @@ import { renderMenuList_unstable } from '@fluentui/react-menu';
 import { renderMenuPopover_unstable } from '@fluentui/react-menu';
 import { renderMenuSplitGroup_unstable } from '@fluentui/react-menu';
 import { renderMenuTrigger_unstable } from '@fluentui/react-menu';
+import { renderPersona_unstable } from '@fluentui/react-persona';
 import { renderPopover_unstable } from '@fluentui/react-popover';
 import { renderPopoverSurface_unstable } from '@fluentui/react-popover';
 import { renderPopoverTrigger_unstable } from '@fluentui/react-popover';
@@ -583,6 +589,8 @@ import { useMenuTriggerContext_unstable } from '@fluentui/react-menu';
 import { useMergedRefs } from '@fluentui/react-utilities';
 import { useModalAttributes } from '@fluentui/react-tabster';
 import { UseModalAttributesOptions } from '@fluentui/react-tabster';
+import { usePersona_unstable } from '@fluentui/react-persona';
+import { usePersonaStyles_unstable } from '@fluentui/react-persona';
 import { usePopover_unstable } from '@fluentui/react-popover';
 import { usePopoverContext_unstable } from '@fluentui/react-popover';
 import { usePopoverSurface_unstable } from '@fluentui/react-popover';
@@ -596,6 +604,7 @@ import { useRadioGroupContext_unstable } from '@fluentui/react-radio';
 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 { useSlider_unstable } from '@fluentui/react-slider';
 import { useSliderState_unstable } from '@fluentui/react-slider';
 import { useSliderStyles_unstable } from '@fluentui/react-slider';
@@ -1186,6 +1195,16 @@ export { partitionAvatarGroupItems }
 
 export { PartitionAvatarGroupItemsOptions }
 
+export { Persona }
+
+export { personaClassNames }
+
+export { PersonaProps }
+
+export { PersonaSlots }
+
+export { PersonaState }
+
 export { Popover }
 
 export { PopoverContextValue }
@@ -1350,6 +1369,8 @@ export { renderMenuSplitGroup_unstable }
 
 export { renderMenuTrigger_unstable }
 
+export { renderPersona_unstable }
+
 export { renderPopover_unstable }
 
 export { renderPopoverSurface_unstable }
@@ -1796,6 +1817,10 @@ export { useModalAttributes }
 
 export { UseModalAttributesOptions }
 
+export { usePersona_unstable }
+
+export { usePersonaStyles_unstable }
+
 export { usePopover_unstable }
 
 export { usePopoverContext_unstable }
@@ -1822,6 +1847,8 @@ export { useRadioGroupStyles_unstable }
 
 export { useRadioStyles_unstable }
 
+export { useScrollbarWidth }
+
 export { useSlider_unstable }
 
 export { useSliderState_unstable }

package/dist/unstable.d.ts

@@ -124,11 +124,6 @@ import { Overflow } from '@fluentui/react-overflow';
 import { OverflowItem } from '@fluentui/react-overflow';
 import { OverflowItemProps } from '@fluentui/react-overflow';
 import { OverflowProps } from '@fluentui/react-overflow';
-import { Persona } from '@fluentui/react-persona';
-import { personaClassNames } from '@fluentui/react-persona';
-import { PersonaProps } from '@fluentui/react-persona';
-import { PersonaSlots } from '@fluentui/react-persona';
-import { PersonaState } from '@fluentui/react-persona';
 import { ProgressBar } from '@fluentui/react-progress';
 import { progressBarClassNames } from '@fluentui/react-progress';
 import { ProgressBarProps } from '@fluentui/react-progress';
@@ -159,7 +154,6 @@ import { renderInfoButton_unstable } from '@fluentui/react-infobutton';
 import { renderListbox_unstable } from '@fluentui/react-combobox';
 import { renderOption_unstable } from '@fluentui/react-combobox';
 import { renderOptionGroup_unstable } from '@fluentui/react-combobox';
-import { renderPersona_unstable } from '@fluentui/react-persona';
 import { renderProgressBar_unstable } from '@fluentui/react-progress';
 import { renderSelect_unstable } from '@fluentui/react-select';
 import { renderTable_unstable } from '@fluentui/react-table';
@@ -172,6 +166,7 @@ import { renderTableHeaderCell_unstable } from '@fluentui/react-table';
 import { renderTableRow_unstable } from '@fluentui/react-table';
 import { renderTableSelectionCell_unstable } from '@fluentui/react-table';
 import { renderToolbar_unstable } from '@fluentui/react-toolbar';
+import { renderToolbarGroup_unstable } from '@fluentui/react-toolbar';
 import { RowId } from '@fluentui/react-table';
 import { RowState } from '@fluentui/react-table';
 import { Select } from '@fluentui/react-select';
@@ -262,7 +257,14 @@ import { ToolbarContextValues } from '@fluentui/react-toolbar';
 import { ToolbarDivider } from '@fluentui/react-toolbar';
 import { ToolbarDividerProps } from '@fluentui/react-toolbar';
 import { ToolbarDividerState } from '@fluentui/react-toolbar';
+import { ToolbarGroup } from '@fluentui/react-toolbar';
+import { toolbarGroupClassNames } from '@fluentui/react-toolbar';
+import { ToolbarGroupProps } from '@fluentui/react-toolbar';
+import { ToolbarGroupState } from '@fluentui/react-toolbar';
 import { ToolbarProps } from '@fluentui/react-toolbar';
+import { ToolbarRadioButton } from '@fluentui/react-toolbar';
+import { ToolbarRadioButtonProps } from '@fluentui/react-toolbar';
+import { ToolbarRadioButtonState } from '@fluentui/react-toolbar';
 import { ToolbarSlots } from '@fluentui/react-toolbar';
 import { ToolbarState } from '@fluentui/react-toolbar';
 import { ToolbarToggleButton } from '@fluentui/react-toolbar';
@@ -309,8 +311,6 @@ import { useOptionGroup_unstable } from '@fluentui/react-combobox';
 import { useOptionGroupStyles_unstable } from '@fluentui/react-combobox';
 import { useOptionStyles_unstable } from '@fluentui/react-combobox';
 import { useOverflowMenu } from '@fluentui/react-overflow';
-import { usePersona_unstable } from '@fluentui/react-persona';
-import { usePersonaStyles_unstable } from '@fluentui/react-persona';
 import { useProgressBar_unstable } from '@fluentui/react-progress';
 import { useProgressBarStyles_unstable } from '@fluentui/react-progress';
 import { useSelect_unstable } from '@fluentui/react-select';
@@ -339,8 +339,17 @@ import { useTableSelectionCellStyles_unstable } from '@fluentui/react-table';
 import { useTableSort } from '@fluentui/react-table';
 import { useTableStyles_unstable } from '@fluentui/react-table';
 import { useToolbar_unstable } from '@fluentui/react-toolbar';
+import { useToolbarButton_unstable } from '@fluentui/react-toolbar';
+import { useToolbarButtonStyles_unstable } from '@fluentui/react-toolbar';
+import { useToolbarDivider_unstable } from '@fluentui/react-toolbar';
 import { useToolbarDividerStyles_unstable } from '@fluentui/react-toolbar';
+import { useToolbarGroup_unstable } from '@fluentui/react-toolbar';
+import { useToolbarGroupStyles_unstable } from '@fluentui/react-toolbar';
+import { useToolbarRadioButton_unstable } from '@fluentui/react-toolbar';
+import { useToolbarRadioButtonStyles_unstable } from '@fluentui/react-toolbar';
 import { useToolbarStyles_unstable } from '@fluentui/react-toolbar';
+import { useToolbarToggleButton_unstable } from '@fluentui/react-toolbar';
+import { useToolbarToggleButtonStyles_unstable } from '@fluentui/react-toolbar';
 
 export { Alert }
 
@@ -594,16 +603,6 @@ export { OverflowItemProps }
 
 export { OverflowProps }
 
-export { Persona }
-
-export { personaClassNames }
-
-export { PersonaProps }
-
-export { PersonaSlots }
-
-export { PersonaState }
-
 export { ProgressBar }
 
 export { progressBarClassNames }
@@ -664,8 +663,6 @@ export { renderOption_unstable }
 
 export { renderOptionGroup_unstable }
 
-export { renderPersona_unstable }
-
 export { renderProgressBar_unstable }
 
 export { renderSelect_unstable }
@@ -690,6 +687,8 @@ export { renderTableSelectionCell_unstable }
 
 export { renderToolbar_unstable }
 
+export { renderToolbarGroup_unstable }
+
 export { RowId }
 
 export { RowState }
@@ -871,8 +870,22 @@ export { ToolbarDividerProps }
 
 export { ToolbarDividerState }
 
+export { ToolbarGroup }
+
+export { toolbarGroupClassNames }
+
+export { ToolbarGroupProps }
+
+export { ToolbarGroupState }
+
 export { ToolbarProps }
 
+export { ToolbarRadioButton }
+
+export { ToolbarRadioButtonProps }
+
+export { ToolbarRadioButtonState }
+
 export { ToolbarSlots }
 
 export { ToolbarState }
@@ -965,10 +978,6 @@ export { useOptionStyles_unstable }
 
 export { useOverflowMenu }
 
-export { usePersona_unstable }
-
-export { usePersonaStyles_unstable }
-
 export { useProgressBar_unstable }
 
 export { useProgressBarStyles_unstable }
@@ -1025,8 +1034,26 @@ export { useTableStyles_unstable }
 
 export { useToolbar_unstable }
 
+export { useToolbarButton_unstable }
+
+export { useToolbarButtonStyles_unstable }
+
+export { useToolbarDivider_unstable }
+
 export { useToolbarDividerStyles_unstable }
 
+export { useToolbarGroup_unstable }
+
+export { useToolbarGroupStyles_unstable }
+
+export { useToolbarRadioButton_unstable }
+
+export { useToolbarRadioButtonStyles_unstable }
+
 export { useToolbarStyles_unstable }
 
+export { useToolbarToggleButton_unstable }
+
+export { useToolbarToggleButtonStyles_unstable }
+
 export { }

package/lib/Concepts/Icons/ReactIconGrid.js

@@ -1,62 +1,57 @@
-import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies
-
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
 import * as ReactIcons from '@fluentui/react-icons';
 import { Input } from '@fluentui/react-input';
 import { __styles, shorthands } from '@griffel/react';
-
 const useStyles = /*#__PURE__*/__styles({
-  "grid": {
-    "mc9l5x": "f13qh94s",
-    "Budl1dq": "f103s1qi",
-    "w08cwm": "fz44487",
-    "De3pzq": "f1vbpgwy",
-    "Bqyf3fh": "f1y7pwzt",
-    "tuaewz": "fkjsrz3",
-    "js62xs": "f1v4pbv1",
-    "ge08ax": "f10n702m",
-    "vwmem1": "fukf1g8",
-    "pq1t01": "f1ke9dqw",
-    "Bspu8ag": ["ft83mph", "fduese8"],
-    "B83reyd": "ffztlgx",
-    "d2aa3c": ["fduese8", "ft83mph"],
-    "Bo0llhl": "f1ad31ox",
-    "Bfpbev4": "f1pcllc0",
-    "Bs90se3": "fdkswtx",
-    "B83tkto": "f1yxgqk0",
-    "pxe6pr": "fg04g75",
-    "Beqvepd": "fvrpp50",
-    "Bq5m64l": ["f1xqymmk", "f1mqnmtg"],
-    "B0xcf35": "f12h2kxz",
-    "B9c2vit": ["f1mqnmtg", "f1xqymmk"]
+  grid: {
+    mc9l5x: "f13qh94s",
+    Budl1dq: "f103s1qi",
+    w08cwm: "fz44487",
+    De3pzq: "f1vbpgwy",
+    Bqyf3fh: "f1y7pwzt",
+    tuaewz: "fkjsrz3",
+    js62xs: "f1v4pbv1",
+    ge08ax: "f10n702m",
+    vwmem1: "fukf1g8",
+    pq1t01: "f1ke9dqw",
+    Bspu8ag: ["ft83mph", "fduese8"],
+    B83reyd: "ffztlgx",
+    d2aa3c: ["fduese8", "ft83mph"],
+    Bo0llhl: "f1ad31ox",
+    Bfpbev4: "f1pcllc0",
+    Bs90se3: "fdkswtx",
+    B83tkto: "f1yxgqk0",
+    pxe6pr: "fg04g75",
+    Beqvepd: "fvrpp50",
+    Bq5m64l: ["f1xqymmk", "f1mqnmtg"],
+    B0xcf35: "f12h2kxz",
+    B9c2vit: ["f1mqnmtg", "f1xqymmk"]
   },
-  "searchBox": {
-    "De3pzq": "f1vbpgwy",
-    "B2u0y6b": "f1ogbl2p",
-    "jrapky": "f1dl2k97"
+  searchBox: {
+    De3pzq: "f1vbpgwy",
+    B2u0y6b: "f1ogbl2p",
+    jrapky: "f1dl2k97"
   },
-  "radio": {
-    "De3pzq": "f1vbpgwy",
-    "Be2twd7": "fnsq08h"
+  radio: {
+    De3pzq: "f1vbpgwy",
+    Be2twd7: "fnsq08h"
   }
 }, {
-  "d": [".f13qh94s{display:grid;}", ".f103s1qi{grid-template-columns:auto auto auto auto;}", ".fz44487{grid-gap:10px;}", ".f1vbpgwy{background-color:#F7F7F7;}", ".f1y7pwzt>div{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fkjsrz3>div{background-color:#FFFFFF;}", ".f1v4pbv1>div{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f10n702m>div{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".fukf1g8>div{-webkit-box-pack:space-around;-ms-flex-pack:space-around;-webkit-justify-content:space-around;justify-content:space-around;}", ".f1ke9dqw>div{padding-top:8px;}", ".ft83mph>div{padding-right:8px;}", ".fduese8>div{padding-left:8px;}", ".ffztlgx>div{padding-bottom:8px;}", ".f1ad31ox>div{overflow-x:hidden;}", ".f1pcllc0>div{overflow-y:hidden;}", ".fdkswtx>div>code{font-size:8px;}", ".f1yxgqk0>div>code{display:inline-block;}", ".fg04g75>div>code{height:auto;}", ".fvrpp50>div>code{padding-top:0px 8px;}", ".f1xqymmk>div>code{padding-right:0px 8px;}", ".f1mqnmtg>div>code{padding-left:0px 8px;}", ".f12h2kxz>div>code{padding-bottom:0px 8px;}", ".f1ogbl2p{max-width:320px;}", ".f1dl2k97{margin-bottom:10px;}", ".fnsq08h{font-size:11px;}"]
+  d: [".f13qh94s{display:grid;}", ".f103s1qi{grid-template-columns:auto auto auto auto;}", ".fz44487{grid-gap:10px;}", ".f1vbpgwy{background-color:#F7F7F7;}", ".f1y7pwzt>div{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fkjsrz3>div{background-color:#FFFFFF;}", ".f1v4pbv1>div{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f10n702m>div{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".fukf1g8>div{-webkit-box-pack:space-around;-ms-flex-pack:space-around;-webkit-justify-content:space-around;justify-content:space-around;}", ".f1ke9dqw>div{padding-top:8px;}", ".ft83mph>div{padding-right:8px;}", ".fduese8>div{padding-left:8px;}", ".ffztlgx>div{padding-bottom:8px;}", ".f1ad31ox>div{overflow-x:hidden;}", ".f1pcllc0>div{overflow-y:hidden;}", ".fdkswtx>div>code{font-size:8px;}", ".f1yxgqk0>div>code{display:inline-block;}", ".fg04g75>div>code{height:auto;}", ".fvrpp50>div>code{padding-top:0px 8px;}", ".f1xqymmk>div>code{padding-right:0px 8px;}", ".f1mqnmtg>div>code{padding-left:0px 8px;}", ".f12h2kxz>div>code{padding-bottom:0px 8px;}", ".f1ogbl2p{max-width:320px;}", ".f1dl2k97{margin-bottom:10px;}", ".fnsq08h{font-size:11px;}"]
 });
-
-const reactIcons = /*#__PURE__*/Object.keys(ReactIcons) // eslint-disable-next-line @typescript-eslint/no-explicit-any
+const reactIcons = /*#__PURE__*/Object.keys(ReactIcons)
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 .map(iconName => ReactIcons[iconName]).filter(icon => !!icon && !!icon.displayName);
-
 const ReactIconGrid = () => {
   const [search, setSearch] = React.useState('');
   const [size, setSize] = React.useState(24);
   const styles = useStyles();
-
   const _onSearchQueryChanged = ev => {
     setSearch(ev ? ev.currentTarget.value : '');
   };
-
   const _filterBySize = ev => {
     const newSize = ev ? ev.currentTarget.value : '';
-
     if (newSize === 'All') {
       setSize('');
     } else if (newSize === 'Unsized') {
@@ -65,17 +60,14 @@ const ReactIconGrid = () => {
       setSize(newSize);
     }
   };
-
   const _renderIcon = Icon => {
     return /*#__PURE__*/React.createElement("div", {
       key: Icon.displayName,
       "aria-label": Icon.displayName
     }, /*#__PURE__*/React.createElement(Icon, null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("code", null, Icon.displayName));
   };
-
   const filteredIcons = React.useMemo(() => reactIcons.filter(icon => {
     var _a, _b;
-
     return size === 'Unsized' ? icon.displayName && !/\d/.test(icon.displayName.toLowerCase()) : ((_a = icon.displayName) === null || _a === void 0 ? void 0 : _a.toLowerCase().indexOf(search.toLowerCase())) !== -1 && ((_b = icon.displayName) === null || _b === void 0 ? void 0 : _b.indexOf(String(size))) !== -1;
   }), [search, size]);
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Input, {
@@ -100,6 +92,5 @@ const ReactIconGrid = () => {
     className: styles.grid
   }, filteredIcons.map(_renderIcon)));
 };
-
 export default ReactIconGrid;
 //# sourceMappingURL=ReactIconGrid.js.map

package/lib/Concepts/Icons/ReactIconGrid.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-components/src/Concepts/Icons/ReactIconGrid.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport { FluentIconsProps } from '@fluentui/react-icons';\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport * as ReactIcons from '@fluentui/react-icons';\nimport { Input } from '@fluentui/react-input';\nimport { makeStyles, shorthands } from '@griffel/react';\n\nconst useStyles = makeStyles({\n  grid: {\n    display: 'grid',\n    gridTemplateColumns: 'auto auto auto auto',\n    gridGap: '10px',\n    backgroundColor: '#F7F7F7',\n\n    '> div': {\n      alignItems: 'center',\n      backgroundColor: '#FFFFFF',\n      display: 'flex',\n      flexDirection: 'column',\n      justifyContent: 'space-around',\n      ...shorthands.padding('8px'),\n      ...shorthands.overflow('hidden'),\n\n      '> code': {\n        fontSize: '8px',\n        display: 'inline-block',\n        height: 'auto',\n        ...shorthands.padding('0px 8px'),\n      },\n    },\n  },\n\n  searchBox: {\n    backgroundColor: '#F7F7F7',\n    maxWidth: '320px',\n    marginBottom: '10px',\n  },\n\n  radio: {\n    backgroundColor: '#F7F7F7',\n    fontSize: '11px',\n  },\n});\n\nconst reactIcons: React.FC<ReactIcons.FluentIconsProps>[] = Object.keys(ReactIcons)\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  .map(iconName => (ReactIcons as any)[iconName])\n  .filter(icon => !!icon && !!icon.displayName);\n\nconst ReactIconGrid = () => {\n  const [search, setSearch] = React.useState('');\n  const [size, setSize] = React.useState<string | number>(24);\n  const styles = useStyles();\n\n  const _onSearchQueryChanged = (ev?: React.FormEvent<HTMLInputElement>) => {\n    setSearch(ev ? ev.currentTarget.value : '');\n  };\n\n  const _filterBySize = (ev?: React.FormEvent<HTMLElement | HTMLInputElement>) => {\n    const newSize = ev ? (ev.currentTarget as HTMLInputElement).value : '';\n    if (newSize === 'All') {\n      setSize('');\n    } else if (newSize === 'Unsized') {\n      setSize('Unsized');\n    } else {\n      setSize(newSize);\n    }\n  };\n\n  const _renderIcon = (Icon: React.FC<FluentIconsProps>): JSX.Element => {\n    return (\n      <div key={Icon.displayName} aria-label={Icon.displayName}>\n        <Icon />\n        <br />\n        <code>{Icon.displayName}</code>\n      </div>\n    );\n  };\n\n  const filteredIcons = React.useMemo(\n    () =>\n      reactIcons.filter(icon =>\n        size === 'Unsized'\n          ? icon.displayName! && !/\\d/.test(icon.displayName.toLowerCase())\n          : icon.displayName?.toLowerCase().indexOf(search.toLowerCase()) !== -1 &&\n            icon.displayName?.indexOf(String(size)) !== -1,\n      ),\n    [search, size],\n  );\n\n  return (\n    <div>\n      <Input\n        type=\"search\"\n        placeholder=\"Search icons\"\n        value={search}\n        aria-label=\"search\"\n        // eslint-disable-next-line react/jsx-no-bind\n        onChange={_onSearchQueryChanged}\n        className={styles.searchBox}\n      />\n      {[16, 20, 24, 28, 32, 48, 'Unsized', 'All'].map(option => (\n        <>\n          <input\n            id={`option-${option}`}\n            defaultChecked={option === 24}\n            type=\"radio\"\n            value={option}\n            name=\"size\"\n            onChange={_filterBySize}\n          />\n          <label htmlFor={`option-${option}`} className={styles.radio}>\n            {option}\n          </label>\n        </>\n      ))}\n      <div className={styles.grid}>{filteredIcons.map(_renderIcon)}</div>\n    </div>\n  );\n};\n\nexport default ReactIconGrid;\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"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","names":["React","ReactIcons","Input","shorthands","useStyles","reactIcons","Object","keys","map","iconName","filter","icon","displayName","ReactIconGrid","search","setSearch","useState","size","setSize","styles","_onSearchQueryChanged","ev","currentTarget","value","_filterBySize","newSize","_renderIcon","Icon","key","filteredIcons","useMemo","test","toLowerCase","indexOf","String","type","placeholder","onChange","className","searchBox","option","id","defaultChecked","name","htmlFor","radio","grid"],"sourceRoot":"../src/","sources":["packages/react-components/react-components/src/Concepts/Icons/ReactIconGrid.tsx"],"sourcesContent":["import * as React from 'react';\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport { FluentIconsProps } from '@fluentui/react-icons';\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport * as ReactIcons from '@fluentui/react-icons';\nimport { Input } from '@fluentui/react-input';\nimport { makeStyles, shorthands } from '@griffel/react';\n\nconst useStyles = makeStyles({\n  grid: {\n    display: 'grid',\n    gridTemplateColumns: 'auto auto auto auto',\n    gridGap: '10px',\n    backgroundColor: '#F7F7F7',\n\n    '> div': {\n      alignItems: 'center',\n      backgroundColor: '#FFFFFF',\n      display: 'flex',\n      flexDirection: 'column',\n      justifyContent: 'space-around',\n      ...shorthands.padding('8px'),\n      ...shorthands.overflow('hidden'),\n\n      '> code': {\n        fontSize: '8px',\n        display: 'inline-block',\n        height: 'auto',\n        ...shorthands.padding('0px 8px'),\n      },\n    },\n  },\n\n  searchBox: {\n    backgroundColor: '#F7F7F7',\n    maxWidth: '320px',\n    marginBottom: '10px',\n  },\n\n  radio: {\n    backgroundColor: '#F7F7F7',\n    fontSize: '11px',\n  },\n});\n\nconst reactIcons: React.FC<ReactIcons.FluentIconsProps>[] = Object.keys(ReactIcons)\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  .map(iconName => (ReactIcons as any)[iconName])\n  .filter(icon => !!icon && !!icon.displayName);\n\nconst ReactIconGrid = () => {\n  const [search, setSearch] = React.useState('');\n  const [size, setSize] = React.useState<string | number>(24);\n  const styles = useStyles();\n\n  const _onSearchQueryChanged = (ev?: React.FormEvent<HTMLInputElement>) => {\n    setSearch(ev ? ev.currentTarget.value : '');\n  };\n\n  const _filterBySize = (ev?: React.FormEvent<HTMLElement | HTMLInputElement>) => {\n    const newSize = ev ? (ev.currentTarget as HTMLInputElement).value : '';\n    if (newSize === 'All') {\n      setSize('');\n    } else if (newSize === 'Unsized') {\n      setSize('Unsized');\n    } else {\n      setSize(newSize);\n    }\n  };\n\n  const _renderIcon = (Icon: React.FC<FluentIconsProps>): JSX.Element => {\n    return (\n      <div key={Icon.displayName} aria-label={Icon.displayName}>\n        <Icon />\n        <br />\n        <code>{Icon.displayName}</code>\n      </div>\n    );\n  };\n\n  const filteredIcons = React.useMemo(\n    () =>\n      reactIcons.filter(icon =>\n        size === 'Unsized'\n          ? icon.displayName! && !/\\d/.test(icon.displayName.toLowerCase())\n          : icon.displayName?.toLowerCase().indexOf(search.toLowerCase()) !== -1 &&\n            icon.displayName?.indexOf(String(size)) !== -1,\n      ),\n    [search, size],\n  );\n\n  return (\n    <div>\n      <Input\n        type=\"search\"\n        placeholder=\"Search icons\"\n        value={search}\n        aria-label=\"search\"\n        // eslint-disable-next-line react/jsx-no-bind\n        onChange={_onSearchQueryChanged}\n        className={styles.searchBox}\n      />\n      {[16, 20, 24, 28, 32, 48, 'Unsized', 'All'].map(option => (\n        <>\n          <input\n            id={`option-${option}`}\n            defaultChecked={option === 24}\n            type=\"radio\"\n            value={option}\n            name=\"size\"\n            onChange={_filterBySize}\n          />\n          <label htmlFor={`option-${option}`} className={styles.radio}>\n            {option}\n          </label>\n        </>\n      ))}\n      <div className={styles.grid}>{filteredIcons.map(_renderIcon)}</div>\n    </div>\n  );\n};\n\nexport default ReactIconGrid;\n"]}

package/lib/index.js

@@ -1,13 +1,11 @@
 // Utilities
 export { __css, __resetCSS, __resetStyles, __styles, createDOMRenderer, makeStaticStyles, makeStyles, mergeClasses, RendererProvider, renderToStyleElements, shorthands } from '@griffel/react';
 export { FluentProvider, fluentProviderClassNames, renderFluentProvider_unstable, useFluentProvider_unstable, useFluentProviderContextValues_unstable, useFluentProviderStyles_unstable } from '@fluentui/react-provider';
-export { Radio, radioClassNames, RadioGroup, RadioGroupProvider, radioGroupClassNames, renderRadio_unstable, renderRadioGroup_unstable, useRadio_unstable, useRadioGroupContext_unstable, useRadioGroupContextValues, useRadioGroup_unstable, useRadioGroupStyles_unstable, useRadioStyles_unstable } from '@fluentui/react-radio';
-export { SpinButton, renderSpinButton_unstable, spinButtonClassNames, useSpinButtonStyles_unstable, useSpinButton_unstable } from '@fluentui/react-spinbutton';
 export { createCustomFocusIndicatorStyle, createFocusOutlineStyle, useArrowNavigationGroup, useFocusableGroup, useFocusFinders, useKeyboardNavAttribute, useModalAttributes } from '@fluentui/react-tabster';
 export { createDarkTheme, createHighContrastTheme, createLightTheme, createTeamsDarkTheme, themeToTokensObject, teamsDarkTheme, teamsHighContrastTheme, teamsLightTheme, tokens, typographyStyles, webDarkTheme, webLightTheme } from '@fluentui/react-theme';
 export { useFluent_unstable as useFluent, useTooltipVisibility_unstable as useTooltipVisibility, useThemeClassName_unstable as useThemeClassName } from '@fluentui/react-shared-contexts';
-export { getNativeElementProps, getPartitionedNativeProps, getSlots, resetIdsForTests, resolveShorthand, SSRProvider, useId, useIsomorphicLayoutEffect, useIsSSR, useMergedRefs } from '@fluentui/react-utilities'; // Components
-
+export { getNativeElementProps, getPartitionedNativeProps, getSlots, resetIdsForTests, resolveShorthand, SSRProvider, useId, useIsomorphicLayoutEffect, useIsSSR, useMergedRefs, useScrollbarWidth } from '@fluentui/react-utilities';
+// Components
 export { Accordion, AccordionProvider, AccordionHeader, AccordionItem, AccordionItemProvider, AccordionPanel, accordionClassNames, accordionHeaderClassNames, accordionItemClassNames, accordionPanelClassNames, renderAccordion_unstable, renderAccordionHeader_unstable, renderAccordionItem_unstable, renderAccordionPanel_unstable, useAccordion_unstable, useAccordionContext_unstable, useAccordionContextValues_unstable, useAccordionHeader_unstable, useAccordionHeaderContextValues_unstable, useAccordionHeaderStyles_unstable, useAccordionItem_unstable, useAccordionItemContext_unstable, useAccordionItemContextValues_unstable, useAccordionItemStyles_unstable, useAccordionPanel_unstable, useAccordionPanelStyles_unstable, useAccordionStyles_unstable } from '@fluentui/react-accordion';
 export { Avatar, avatarClassNames, renderAvatar_unstable, useAvatar_unstable, useAvatarStyles_unstable, AvatarGroup, avatarGroupClassNames, AvatarGroupItem, avatarGroupItemClassNames, AvatarGroupPopover, avatarGroupPopoverClassNames, AvatarGroupProvider, renderAvatarGroup_unstable, useAvatarGroupContextValues, useAvatarGroupStyles_unstable, useAvatarGroup_unstable, renderAvatarGroupItem_unstable, useAvatarGroupItemStyles_unstable, useAvatarGroupItem_unstable, renderAvatarGroupPopover_unstable, useAvatarGroupPopoverStyles_unstable, useAvatarGroupPopover_unstable, useAvatarGroupContext_unstable, partitionAvatarGroupItems } from '@fluentui/react-avatar';
 export { Badge, CounterBadge, PresenceBadge, badgeClassNames, counterBadgeClassNames, presenceBadgeClassNames, renderBadge_unstable, useBadge_unstable, useBadgeStyles_unstable, useCounterBadge_unstable, useCounterBadgeStyles_unstable, usePresenceBadge_unstable } from '@fluentui/react-badge';
@@ -19,9 +17,12 @@ export { Image, imageClassNames, renderImage_unstable, useImage_unstable, useIma
 export { Label, labelClassNames, renderLabel_unstable, useLabel_unstable, useLabelStyles_unstable } from '@fluentui/react-label';
 export { Link, linkClassNames, renderLink_unstable, useLink_unstable, useLinkState_unstable, useLinkStyles_unstable } from '@fluentui/react-link';
 export { Menu, MenuDivider, MenuGroup, MenuGroupContextProvider, MenuGroupHeader, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuList, MenuListProvider, MenuPopover, MenuProvider, MenuSplitGroup, MenuTrigger, MenuTriggerContextProvider, menuDividerClassNames, menuGroupClassNames, menuGroupHeaderClassNames, menuItemCheckboxClassNames, menuItemClassNames, menuItemRadioClassNames, menuListClassNames, menuPopoverClassNames, menuSplitGroupClassNames, renderMenu_unstable, renderMenuDivider_unstable, renderMenuGroup_unstable, renderMenuGroupHeader_unstable, renderMenuItem_unstable, renderMenuItemCheckbox_unstable, renderMenuItemRadio_unstable, renderMenuList_unstable, renderMenuPopover_unstable, renderMenuSplitGroup_unstable, renderMenuTrigger_unstable, useCheckmarkStyles_unstable, useMenu_unstable, useMenuContext_unstable, useMenuContextValues_unstable, useMenuDivider_unstable, useMenuDividerStyles_unstable, useMenuGroup_unstable, useMenuGroupContext_unstable, useMenuGroupContextValues_unstable, useMenuGroupHeader_unstable, useMenuGroupHeaderStyles_unstable, useMenuGroupStyles_unstable, useMenuItem_unstable, useMenuItemCheckbox_unstable, useMenuItemCheckboxStyles_unstable, useMenuItemRadio_unstable, useMenuItemRadioStyles_unstable, useMenuItemStyles_unstable, useMenuList_unstable, useMenuListContext_unstable, useMenuListContextValues_unstable, useMenuListStyles_unstable, useMenuPopover_unstable, useMenuPopoverStyles_unstable, useMenuSplitGroup_unstable, useMenuSplitGroupStyles_unstable, useMenuTrigger_unstable, useMenuTriggerContext_unstable } from '@fluentui/react-menu';
+export { Persona, personaClassNames, renderPersona_unstable, usePersonaStyles_unstable, usePersona_unstable } from '@fluentui/react-persona';
 export { Popover, PopoverSurface, PopoverProvider, PopoverTrigger, arrowHeights, popoverSurfaceClassNames, renderPopover_unstable, renderPopoverSurface_unstable, renderPopoverTrigger_unstable, usePopover_unstable, usePopoverContext_unstable, usePopoverSurface_unstable, usePopoverSurfaceStyles_unstable, usePopoverTrigger_unstable } from '@fluentui/react-popover';
 export { Portal, usePortal_unstable, renderPortal_unstable } from '@fluentui/react-portal';
+export { Radio, radioClassNames, RadioGroup, RadioGroupProvider, radioGroupClassNames, renderRadio_unstable, renderRadioGroup_unstable, useRadio_unstable, useRadioGroupContext_unstable, useRadioGroupContextValues, useRadioGroup_unstable, useRadioGroupStyles_unstable, useRadioStyles_unstable } from '@fluentui/react-radio';
 export { Slider, sliderClassNames, sliderCSSVars, useSliderState_unstable, useSliderStyles_unstable, useSlider_unstable, renderSlider_unstable } from '@fluentui/react-slider';
+export { SpinButton, renderSpinButton_unstable, spinButtonClassNames, useSpinButtonStyles_unstable, useSpinButton_unstable } from '@fluentui/react-spinbutton';
 export { Spinner, spinnerClassNames, renderSpinner_unstable, useSpinner_unstable, useSpinnerStyles_unstable } from '@fluentui/react-spinner';
 export { Switch, switchClassNames, renderSwitch_unstable, useSwitch_unstable, useSwitchStyles_unstable } from '@fluentui/react-switch';
 export { renderTab_unstable, Tab, tabClassNames, useTabStyles_unstable, useTab_unstable, renderTabList_unstable, TabList, tabListClassNames, useTabListStyles_unstable, useTabList_unstable } from '@fluentui/react-tabs';