@fluentui/react-components 9.7.0 → 9.7.2

package/CHANGELOG.md

@@ -1,12 +1,130 @@
 # Change Log - @fluentui/react-components
 
-This log was last generated on Fri, 11 Nov 2022 14:53:16 GMT and should not be manually modified.
+This log was last generated on Mon, 05 Dec 2022 18:25:17 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.7.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-components_v9.7.2)
+
+Mon, 05 Dec 2022 18:25:17 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-components_v9.7.1..@fluentui/react-components_v9.7.2)
+
+### Patches
+
+- `@fluentui/react-avatar`
+  - fix: AvatarGroup's pie layout places inline items correctly in rtl. ([PR #25822](https://github.com/microsoft/fluentui/pull/25822) by esteban.230@hotmail.com)
+- `@fluentui/react-button`
+  - chore: refactor to use makeResetStyles ([PR #25216](https://github.com/microsoft/fluentui/pull/25216) by olfedias@microsoft.com)
+- `@fluentui/react-components`
+  - BREAKING: rename useTable->useTableFeatures, useSelection->useTableSelection, useSort->useTableSort ([PR #25797](https://github.com/microsoft/fluentui/pull/25797) by lingfangao@hotmail.com)
+  - chore: add exports for CSS extraction in Griffel ([PR #25216](https://github.com/microsoft/fluentui/pull/25216) by olfedias@microsoft.com)
+  - feat: Export `DataGrid` as unstable ([PR #25805](https://github.com/microsoft/fluentui/pull/25805) by lingfangao@hotmail.com)
+  - chore: deprecates unused type UninitializedMenuListState ([PR #25672](https://github.com/microsoft/fluentui/pull/25672) by bernardo.sunderhus@gmail.com)
+- `@fluentui/react-input`
+  - chore: Replace use of fontSize tokens with typographyStyles ([PR #25727](https://github.com/microsoft/fluentui/pull/25727) by behowell@microsoft.com)
+- `@fluentui/react-menu`
+  - chore: removes prop spreading on MenuList state ([PR #25672](https://github.com/microsoft/fluentui/pull/25672) by bernardo.sunderhus@gmail.com)
+  - fix: MenuDivider thickness should be `strokeWidthThin` ([PR #25711](https://github.com/microsoft/fluentui/pull/25711) by lingfangao@hotmail.com)
+- `@fluentui/react-popover`
+  - chore: Migrate to new package structure. ([PR #25735](https://github.com/microsoft/fluentui/pull/25735) by tristan.watanabe@gmail.com)
+  - fix: Invoke `onOpenChange` callback without checking if open state has flipped ([PR #25741](https://github.com/microsoft/fluentui/pull/25741) by yuanboxue@microsoft.com)
+- `@fluentui/react-provider`
+  - chore: Migrate to new package structure. ([PR #25809](https://github.com/microsoft/fluentui/pull/25809) by tristan.watanabe@gmail.com)
+- `@fluentui/react-radio`
+  - chore: Migrate to new package structure. ([PR #25810](https://github.com/microsoft/fluentui/pull/25810) by tristan.watanabe@gmail.com)
+- `@fluentui/react-spinbutton`
+  - chore: Migrate to new package structure. ([PR #25813](https://github.com/microsoft/fluentui/pull/25813) by tristan.watanabe@gmail.com)
+- `@fluentui/react-spinner`
+  - chore: Migrate to new package structure. ([PR #25814](https://github.com/microsoft/fluentui/pull/25814) by tristan.watanabe@gmail.com)
+- `@fluentui/react-switch`
+  - chore: Migrate to new package structure. ([PR #25819](https://github.com/microsoft/fluentui/pull/25819) by tristan.watanabe@gmail.com)
+- `@fluentui/react-tabster`
+  - fix: focus-within attribute no longer the same as focus-visible ([PR #25790](https://github.com/microsoft/fluentui/pull/25790) by lingfangao@hotmail.com)
+  - fix: allow GriffelResetStyle to be passed to createCustomFocusIndicatorStyle ([PR #25216](https://github.com/microsoft/fluentui/pull/25216) by olfedias@microsoft.com)
+- `@fluentui/react-textarea`
+  - chore: Replace use of fontSize tokens with typographyStyles ([PR #25727](https://github.com/microsoft/fluentui/pull/25727) by behowell@microsoft.com)
+  - chore: Migrate to new package structure. ([PR #25820](https://github.com/microsoft/fluentui/pull/25820) by tristan.watanabe@gmail.com)
+- `@fluentui/react-theme`
+  - refactor: Use Object.assign to reduce loop runtime ([PR #25433](https://github.com/microsoft/fluentui/pull/25433) by tigeroakes@microsoft.com)
+  - chore: Migrate to new package structure. ([PR #25812](https://github.com/microsoft/fluentui/pull/25812) by tristan.watanabe@gmail.com)
+- `@fluentui/react-tooltip`
+  - chore: Migrate to new package structure. ([PR #25818](https://github.com/microsoft/fluentui/pull/25818) by tristan.watanabe@gmail.com)
+
+### Changes
+
+- `@fluentui/react-combobox`
+  -  feat: update Option value to be a non-display value, and add an Option text prop that is required if the child is not a string ([PR #25379](https://github.com/microsoft/fluentui/pull/25379) by sarah.higley@microsoft.com)
+  - fix: open Combobox popup when typing ([PR #25769](https://github.com/microsoft/fluentui/pull/25769) by sarah.higley@microsoft.com)
+  - chore: Replace use of fontSize tokens with typographyStyles ([PR #25727](https://github.com/microsoft/fluentui/pull/25727) by behowell@microsoft.com)
+  - fix: Combobox should close on blur after clicking expand icon ([PR #25771](https://github.com/microsoft/fluentui/pull/25771) by sarah.higley@microsoft.com)
+- `@fluentui/react-field`
+  - fix: Field should use aria-describedby instead of aria-errormessage ([PR #25580](https://github.com/microsoft/fluentui/pull/25580) by behowell@microsoft.com)
+  - chore: Migrate to new package structure. ([PR #25817](https://github.com/microsoft/fluentui/pull/25817) by tristan.watanabe@gmail.com)
+- `@fluentui/react-persona`
+  - chore: Updating Persona's docs to match implementation. ([PR #25770](https://github.com/microsoft/fluentui/pull/25770) by esteban.230@hotmail.com)
+  - chore: Migrate to new package structure. ([PR #25737](https://github.com/microsoft/fluentui/pull/25737) by tristan.watanabe@gmail.com)
+  - fix: Make Persona's text wrap when overflowing its container. ([PR #25880](https://github.com/microsoft/fluentui/pull/25880) by esteban.230@hotmail.com)
+- `@fluentui/react-progress`
+  - chore: Migrate to new package structure. ([PR #25744](https://github.com/microsoft/fluentui/pull/25744) by tristan.watanabe@gmail.com)
+- `@fluentui/react-select`
+  - chore: Replace use of fontSize tokens with typographyStyles ([PR #25727](https://github.com/microsoft/fluentui/pull/25727) by behowell@microsoft.com)
+- `@fluentui/react-table`
+  - fix: TableHeaderCell design fixes ([PR #25712](https://github.com/microsoft/fluentui/pull/25712) by lingfangao@hotmail.com)
+  - BREAKING(useTable): `onSelectionChange` returns data object ([PR #25731](https://github.com/microsoft/fluentui/pull/25731) by lingfangao@hotmail.com)
+  - docs: Update docstrings for props ([PR #25787](https://github.com/microsoft/fluentui/pull/25787) by lingfangao@hotmail.com)
+  - fix: Various design fixes to Table components ([PR #25715](https://github.com/microsoft/fluentui/pull/25715) by lingfangao@hotmail.com)
+  - fix: Cell actions should have correct background when row focused within ([PR #25790](https://github.com/microsoft/fluentui/pull/25790) by lingfangao@hotmail.com)
+  - fix: Table row height is determined by cells ([PR #25717](https://github.com/microsoft/fluentui/pull/25717) by lingfangao@hotmail.com)
+  - BREAKING: change `smaller` size to `extra-small` ([PR #25713](https://github.com/microsoft/fluentui/pull/25713) by lingfangao@hotmail.com)
+  - fix(TableCellLayout): Icon sizes in should match design spec ([PR #25764](https://github.com/microsoft/fluentui/pull/25764) by lingfangao@hotmail.com)
+  - feat: `DataGrid` supports row sorting ([PR #25655](https://github.com/microsoft/fluentui/pull/25655) by lingfangao@hotmail.com)
+  - BREAKING: rename useTable->useTableFeatures, useSelection->useTableSelection, useSort->useTableSort ([PR #25797](https://github.com/microsoft/fluentui/pull/25797) by lingfangao@hotmail.com)
+  - feat: DataGrid supports selection ([PR #25719](https://github.com/microsoft/fluentui/pull/25719) by lingfangao@hotmail.com)
+
+## [9.7.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-components_v9.7.1)
+
+Thu, 17 Nov 2022 23:05:30 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-components_v9.7.0..@fluentui/react-components_v9.7.1)
+
+### Minor changes
+
+- `@fluentui/react-menu`
+  - feature: menu open change data union types ([PR #25503](https://github.com/microsoft/fluentui/pull/25503) by bernardo.sunderhus@gmail.com)
+
+### Patches
+
+- `@fluentui/react-utilities`
+  - fix: supports colSpan property for th ([PR #25613](https://github.com/microsoft/fluentui/pull/25613) by bernardo.sunderhus@gmail.com)
+- `@fluentui/react-badge`
+  - chore: Update Badge colors with new mappings from design ([PR #25599](https://github.com/microsoft/fluentui/pull/25599) by behowell@microsoft.com)
+  - fix: Allow PresenceBadge's icon to be overridden by the user. ([PR #25684](https://github.com/microsoft/fluentui/pull/25684) by humberto_makoto@hotmail.com)
+- `@fluentui/react-components`
+  - feat: bump @fluentui/react-overflow to RC ([PR #25659](https://github.com/microsoft/fluentui/pull/25659) by lingfangao@hotmail.com)
+  - feat: Adding InfoButton to unstable. ([PR #25686](https://github.com/microsoft/fluentui/pull/25686) by esteban.230@hotmail.com)
+  - react-menu: deprecates MenuOpenEvents in favor of MenuOpenEvent ([PR #25503](https://github.com/microsoft/fluentui/pull/25503) by bernardo.sunderhus@gmail.com)
+- `@fluentui/react-dialog`
+  - feat: removes aria-haspopup ([PR #25611](https://github.com/microsoft/fluentui/pull/25611) by bernardo.sunderhus@gmail.com)
+
+### Changes
+
+- `@fluentui/priority-overflow`
+  - feat: Bump to RC ([PR #25659](https://github.com/microsoft/fluentui/pull/25659) by lingfangao@hotmail.com)
+- `@fluentui/react-infobutton`
+  - chore: Making the package public and preparing to add to unstable. ([PR #25686](https://github.com/microsoft/fluentui/pull/25686) by esteban.230@hotmail.com)
+- `@fluentui/react-overflow`
+  - feat: Bump to RC ([PR #25659](https://github.com/microsoft/fluentui/pull/25659) by lingfangao@hotmail.com)
+- `@fluentui/react-persona`
+  - feat: Adding size and textAlignment props and updating styles. ([PR #25626](https://github.com/microsoft/fluentui/pull/25626) by esteban.230@hotmail.com)
+- `@fluentui/react-progress`
+  - fix: update validationState tokens to use background instead of foreground ([PR #25664](https://github.com/microsoft/fluentui/pull/25664) by ololubek@microsoft.com)
+- `@fluentui/react-table`
+  - BREAKING: `sortable` prop no longer enables `TableHeader` navigation ([PR #25656](https://github.com/microsoft/fluentui/pull/25656) by lingfangao@hotmail.com)
+  - fix: Match hover background colors between table row and cell actions ([PR #25628](https://github.com/microsoft/fluentui/pull/25628) by tigeroakes@microsoft.com)
+  - BREAKING: Headless table callbacks require event ([PR #25658](https://github.com/microsoft/fluentui/pull/25658) by lingfangao@hotmail.com)
+
 ## [9.7.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-components_v9.7.0)
 
-Fri, 11 Nov 2022 14:53:16 GMT 
+Fri, 11 Nov 2022 14:57:29 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-components_v9.6.3..@fluentui/react-components_v9.7.0)
 
 ### Minor changes

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 import { __css } from '@griffel/react';
+import { __resetCSS } from '@griffel/react';
+import { __resetStyles } from '@griffel/react';
 import { __styles } from '@griffel/react';
 import { Accordion } from '@fluentui/react-accordion';
 import { accordionClassNames } from '@fluentui/react-accordion';
@@ -247,6 +249,7 @@ import { MenuListProvider } from '@fluentui/react-menu';
 import { MenuListSlots } from '@fluentui/react-menu';
 import { MenuListState } from '@fluentui/react-menu';
 import { MenuOpenChangeData } from '@fluentui/react-menu';
+import { MenuOpenEvent } from '@fluentui/react-menu';
 import { MenuOpenEvents } from '@fluentui/react-menu';
 import { MenuPopover } from '@fluentui/react-menu';
 import { menuPopoverClassNames } from '@fluentui/react-menu';
@@ -625,6 +628,10 @@ import { webLightTheme } from '@fluentui/react-theme';
 
 export { __css }
 
+export { __resetCSS }
+
+export { __resetStyles }
+
 export { __styles }
 
 export { Accordion }
@@ -1121,6 +1128,8 @@ export { MenuListState }
 
 export { MenuOpenChangeData }
 
+export { MenuOpenEvent }
+
 export { MenuOpenEvents }
 
 export { MenuPopover }

package/dist/unstable.d.ts

@@ -46,6 +46,43 @@ import { CreateColumnOptions } from '@fluentui/react-table';
 import { DATA_OVERFLOW_ITEM } from '@fluentui/react-overflow';
 import { DATA_OVERFLOW_MENU } from '@fluentui/react-overflow';
 import { DATA_OVERFLOWING } from '@fluentui/react-overflow';
+import { DataGrid } from '@fluentui/react-table';
+import { DataGridBody } from '@fluentui/react-table';
+import { dataGridBodyClassNames } from '@fluentui/react-table';
+import { DataGridBodyProps } from '@fluentui/react-table';
+import { DataGridBodySlots } from '@fluentui/react-table';
+import { DataGridBodyState } from '@fluentui/react-table';
+import { DataGridCell } from '@fluentui/react-table';
+import { dataGridCellClassNames } from '@fluentui/react-table';
+import { DataGridCellProps } from '@fluentui/react-table';
+import { DataGridCellSlots } from '@fluentui/react-table';
+import { DataGridCellState } from '@fluentui/react-table';
+import { dataGridClassNames } from '@fluentui/react-table';
+import { DataGridContextValue } from '@fluentui/react-table';
+import { DataGridContextValues } from '@fluentui/react-table';
+import { DataGridHeader } from '@fluentui/react-table';
+import { DataGridHeaderCell } from '@fluentui/react-table';
+import { dataGridHeaderCellClassNames } from '@fluentui/react-table';
+import { DataGridHeaderCellProps } from '@fluentui/react-table';
+import { DataGridHeaderCellSlots } from '@fluentui/react-table';
+import { DataGridHeaderCellState } from '@fluentui/react-table';
+import { dataGridHeaderClassNames } from '@fluentui/react-table';
+import { DataGridHeaderProps } from '@fluentui/react-table';
+import { DataGridHeaderSlots } from '@fluentui/react-table';
+import { DataGridHeaderState } from '@fluentui/react-table';
+import { DataGridProps } from '@fluentui/react-table';
+import { DataGridRow } from '@fluentui/react-table';
+import { dataGridRowClassNames } from '@fluentui/react-table';
+import { DataGridRowProps } from '@fluentui/react-table';
+import { DataGridRowSlots } from '@fluentui/react-table';
+import { DataGridRowState } from '@fluentui/react-table';
+import { DataGridSelectionCell } from '@fluentui/react-table';
+import { dataGridSelectionCellClassNames } from '@fluentui/react-table';
+import { DataGridSelectionCellProps } from '@fluentui/react-table';
+import { DataGridSelectionCellSlots } from '@fluentui/react-table';
+import { DataGridSelectionCellState } from '@fluentui/react-table';
+import { DataGridSlots } from '@fluentui/react-table';
+import { DataGridState } from '@fluentui/react-table';
 import { Dropdown } from '@fluentui/react-combobox';
 import { dropdownClassNames } from '@fluentui/react-combobox';
 import { DropdownContextValues } from '@fluentui/react-combobox';
@@ -59,6 +96,11 @@ import { FieldProps } from '@fluentui/react-field';
 import { FieldSlots } from '@fluentui/react-field';
 import { FieldState } from '@fluentui/react-field';
 import { getFieldClassNames } from '@fluentui/react-field';
+import { InfoButton } from '@fluentui/react-infobutton';
+import { infoButtonClassNames } from '@fluentui/react-infobutton';
+import { InfoButtonProps } from '@fluentui/react-infobutton';
+import { InfoButtonSlots } from '@fluentui/react-infobutton';
+import { InfoButtonState } from '@fluentui/react-infobutton';
 import { InputField_unstable as InputField } from '@fluentui/react-input';
 import { inputFieldClassNames } from '@fluentui/react-input';
 import { InputFieldProps_unstable as InputFieldProps } from '@fluentui/react-input';
@@ -104,8 +146,16 @@ import { renderCardFooter_unstable } from '@fluentui/react-card';
 import { renderCardHeader_unstable } from '@fluentui/react-card';
 import { renderCardPreview_unstable } from '@fluentui/react-card';
 import { renderCombobox_unstable } from '@fluentui/react-combobox';
+import { renderDataGrid_unstable } from '@fluentui/react-table';
+import { renderDataGridBody_unstable } from '@fluentui/react-table';
+import { renderDataGridCell_unstable } from '@fluentui/react-table';
+import { renderDataGridHeader_unstable } from '@fluentui/react-table';
+import { renderDataGridHeaderCell_unstable } from '@fluentui/react-table';
+import { renderDataGridRow_unstable } from '@fluentui/react-table';
+import { renderDataGridSelectionCell_unstable } from '@fluentui/react-table';
 import { renderDropdown_unstable } from '@fluentui/react-combobox';
 import { renderField_unstable } from '@fluentui/react-field';
+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';
@@ -159,6 +209,9 @@ import { tableCellClassName } from '@fluentui/react-table';
 import { tableCellClassNames } from '@fluentui/react-table';
 import { TableCellLayout } from '@fluentui/react-table';
 import { tableCellLayoutClassNames } from '@fluentui/react-table';
+import { TableCellLayoutProps } from '@fluentui/react-table';
+import { TableCellLayoutSlots } from '@fluentui/react-table';
+import { TableCellLayoutState } from '@fluentui/react-table';
 import { TableCellProps } from '@fluentui/react-table';
 import { TableCellSlots } from '@fluentui/react-table';
 import { TableCellState } from '@fluentui/react-table';
@@ -227,10 +280,26 @@ import { useCardPreviewStyles_unstable } from '@fluentui/react-card';
 import { useCardStyles_unstable } from '@fluentui/react-card';
 import { useCombobox_unstable } from '@fluentui/react-combobox';
 import { useComboboxStyles_unstable } from '@fluentui/react-combobox';
+import { useDataGrid_unstable } from '@fluentui/react-table';
+import { useDataGridBody_unstable } from '@fluentui/react-table';
+import { useDataGridBodyStyles_unstable } from '@fluentui/react-table';
+import { useDataGridCell_unstable } from '@fluentui/react-table';
+import { useDataGridCellStyles_unstable } from '@fluentui/react-table';
+import { useDataGridHeader_unstable } from '@fluentui/react-table';
+import { useDataGridHeaderCell_unstable } from '@fluentui/react-table';
+import { useDataGridHeaderCellStyles_unstable } from '@fluentui/react-table';
+import { useDataGridHeaderStyles_unstable } from '@fluentui/react-table';
+import { useDataGridRow_unstable } from '@fluentui/react-table';
+import { useDataGridRowStyles_unstable } from '@fluentui/react-table';
+import { useDataGridSelectionCell_unstable } from '@fluentui/react-table';
+import { useDataGridSelectionCellStyles_unstable } from '@fluentui/react-table';
+import { useDataGridStyles_unstable } from '@fluentui/react-table';
 import { useDropdown_unstable } from '@fluentui/react-combobox';
 import { useDropdownStyles_unstable } from '@fluentui/react-combobox';
 import { useField_unstable } from '@fluentui/react-field';
 import { useFieldStyles_unstable } from '@fluentui/react-field';
+import { useInfoButton_unstable } from '@fluentui/react-infobutton';
+import { useInfoButtonStyles_unstable } from '@fluentui/react-infobutton';
 import { useIsOverflowGroupVisible } from '@fluentui/react-overflow';
 import { useIsOverflowItemVisible } from '@fluentui/react-overflow';
 import { useListbox_unstable } from '@fluentui/react-combobox';
@@ -245,10 +314,7 @@ import { usePersonaStyles_unstable } from '@fluentui/react-persona';
 import { useProgress_unstable } from '@fluentui/react-progress';
 import { useProgressStyles_unstable } from '@fluentui/react-progress';
 import { useSelect_unstable } from '@fluentui/react-select';
-import { useSelection } from '@fluentui/react-table';
 import { useSelectStyles_unstable } from '@fluentui/react-select';
-import { useSort } from '@fluentui/react-table';
-import { useTable } from '@fluentui/react-table';
 import { useTable_unstable } from '@fluentui/react-table';
 import { useTableBody_unstable } from '@fluentui/react-table';
 import { useTableBodyStyles_unstable } from '@fluentui/react-table';
@@ -259,6 +325,7 @@ import { useTableCellLayout_unstable } from '@fluentui/react-table';
 import { useTableCellLayoutStyles_unstable } from '@fluentui/react-table';
 import { useTableCellStyles_unstable } from '@fluentui/react-table';
 import { useTableContext } from '@fluentui/react-table';
+import { useTableFeatures } from '@fluentui/react-table';
 import { useTableHeader_unstable } from '@fluentui/react-table';
 import { useTableHeaderCell_unstable } from '@fluentui/react-table';
 import { useTableHeaderCellStyles_unstable } from '@fluentui/react-table';
@@ -266,8 +333,10 @@ import { useTableHeaderStyles_unstable } from '@fluentui/react-table';
 import { UseTableOptions } from '@fluentui/react-table';
 import { useTableRow_unstable } from '@fluentui/react-table';
 import { useTableRowStyles_unstable } from '@fluentui/react-table';
+import { useTableSelection } from '@fluentui/react-table';
 import { useTableSelectionCell_unstable } from '@fluentui/react-table';
 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 { useToolbarDividerStyles_unstable } from '@fluentui/react-toolbar';
@@ -369,6 +438,80 @@ export { DATA_OVERFLOW_MENU }
 
 export { DATA_OVERFLOWING }
 
+export { DataGrid }
+
+export { DataGridBody }
+
+export { dataGridBodyClassNames }
+
+export { DataGridBodyProps }
+
+export { DataGridBodySlots }
+
+export { DataGridBodyState }
+
+export { DataGridCell }
+
+export { dataGridCellClassNames }
+
+export { DataGridCellProps }
+
+export { DataGridCellSlots }
+
+export { DataGridCellState }
+
+export { dataGridClassNames }
+
+export { DataGridContextValue }
+
+export { DataGridContextValues }
+
+export { DataGridHeader }
+
+export { DataGridHeaderCell }
+
+export { dataGridHeaderCellClassNames }
+
+export { DataGridHeaderCellProps }
+
+export { DataGridHeaderCellSlots }
+
+export { DataGridHeaderCellState }
+
+export { dataGridHeaderClassNames }
+
+export { DataGridHeaderProps }
+
+export { DataGridHeaderSlots }
+
+export { DataGridHeaderState }
+
+export { DataGridProps }
+
+export { DataGridRow }
+
+export { dataGridRowClassNames }
+
+export { DataGridRowProps }
+
+export { DataGridRowSlots }
+
+export { DataGridRowState }
+
+export { DataGridSelectionCell }
+
+export { dataGridSelectionCellClassNames }
+
+export { DataGridSelectionCellProps }
+
+export { DataGridSelectionCellSlots }
+
+export { DataGridSelectionCellState }
+
+export { DataGridSlots }
+
+export { DataGridState }
+
 export { Dropdown }
 
 export { dropdownClassNames }
@@ -395,6 +538,16 @@ export { FieldState }
 
 export { getFieldClassNames }
 
+export { InfoButton }
+
+export { infoButtonClassNames }
+
+export { InfoButtonProps }
+
+export { InfoButtonSlots }
+
+export { InfoButtonState }
+
 export { InputField }
 
 export { inputFieldClassNames }
@@ -485,10 +638,26 @@ export { renderCardPreview_unstable }
 
 export { renderCombobox_unstable }
 
+export { renderDataGrid_unstable }
+
+export { renderDataGridBody_unstable }
+
+export { renderDataGridCell_unstable }
+
+export { renderDataGridHeader_unstable }
+
+export { renderDataGridHeaderCell_unstable }
+
+export { renderDataGridRow_unstable }
+
+export { renderDataGridSelectionCell_unstable }
+
 export { renderDropdown_unstable }
 
 export { renderField_unstable }
 
+export { renderInfoButton_unstable }
+
 export { renderListbox_unstable }
 
 export { renderOption_unstable }
@@ -595,6 +764,12 @@ export { TableCellLayout }
 
 export { tableCellLayoutClassNames }
 
+export { TableCellLayoutProps }
+
+export { TableCellLayoutSlots }
+
+export { TableCellLayoutState }
+
 export { TableCellProps }
 
 export { TableCellSlots }
@@ -732,6 +907,34 @@ export { useCombobox_unstable }
 
 export { useComboboxStyles_unstable }
 
+export { useDataGrid_unstable }
+
+export { useDataGridBody_unstable }
+
+export { useDataGridBodyStyles_unstable }
+
+export { useDataGridCell_unstable }
+
+export { useDataGridCellStyles_unstable }
+
+export { useDataGridHeader_unstable }
+
+export { useDataGridHeaderCell_unstable }
+
+export { useDataGridHeaderCellStyles_unstable }
+
+export { useDataGridHeaderStyles_unstable }
+
+export { useDataGridRow_unstable }
+
+export { useDataGridRowStyles_unstable }
+
+export { useDataGridSelectionCell_unstable }
+
+export { useDataGridSelectionCellStyles_unstable }
+
+export { useDataGridStyles_unstable }
+
 export { useDropdown_unstable }
 
 export { useDropdownStyles_unstable }
@@ -740,6 +943,10 @@ export { useField_unstable }
 
 export { useFieldStyles_unstable }
 
+export { useInfoButton_unstable }
+
+export { useInfoButtonStyles_unstable }
+
 export { useIsOverflowGroupVisible }
 
 export { useIsOverflowItemVisible }
@@ -768,14 +975,8 @@ export { useProgressStyles_unstable }
 
 export { useSelect_unstable }
 
-export { useSelection }
-
 export { useSelectStyles_unstable }
 
-export { useSort }
-
-export { useTable }
-
 export { useTable_unstable }
 
 export { useTableBody_unstable }
@@ -796,6 +997,8 @@ export { useTableCellStyles_unstable }
 
 export { useTableContext }
 
+export { useTableFeatures }
+
 export { useTableHeader_unstable }
 
 export { useTableHeaderCell_unstable }
@@ -810,10 +1013,14 @@ export { useTableRow_unstable }
 
 export { useTableRowStyles_unstable }
 
+export { useTableSelection }
+
 export { useTableSelectionCell_unstable }
 
 export { useTableSelectionCellStyles_unstable }
 
+export { useTableSort }
+
 export { useTableStyles_unstable }
 
 export { useToolbar_unstable }

package/lib/AccessibilityScenarios/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["AccessibilityScenarios/utils.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,MAAM,SAAS,GAAG,yBAAlB;AACA,MAAM,mBAAmB,GAAG,KAA5B,C,CAQA;AACA;;AACA,OAAO,MAAM,cAAc,GAAI,KAAD,iBAC5B,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;EAAG,SAAS,EAAC,iBAAb;EAA+B,IAAI,EAAE,kBAAkB,KAAK,CAAC,MAAM,KAAK,KAAK,CAAC,KAAK,EAAnF;EAAuF,MAAM,EAAC;AAA9F,CAAA,EACG,KAAK,CAAC,OADT,CADK;AAMP,OAAO,MAAM,iBAAiB,GAAa,KAAK,iBAC9C,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;EACE,SAAS,EAAC,iBADZ;EAEE,IAAI,EAAE;AAFR,CAAA,EAIG,KAAK,CAAC,QAJT,CADK;AASP,OAAO,MAAM,QAAQ,GAAG,mBAAM,KAAA,CAAA,aAAA,CAAC,iBAAD,EAAkB,IAAlB,EAAkB,sBAAlB,CAAvB;AAEP,OAAO,MAAM,QAAQ,GAAmD,CAAC;EAAE,SAAF;EAAa;AAAb,CAAD,KAA4B;EAClG,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB,QAAQ,CAAC,KAAT,GAAiB,SAAS,GAAG,mBAAZ,GAAkC,SAAnD;EACD,CAFD,EAEG,CAAC,SAAD,CAFH;EAIA,oBACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;IAAK,IAAI,EAAC;EAAV,CAAA,eACE,KAAA,CAAA,aAAA,CAAC,QAAD,EAAS,IAAT,CADF,eAEE,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,CAFF,EAGG,QAHH,CADF;AAOD,CAZM","sourcesContent":["import * as React from 'react';\n\nconst APP_TITLE = 'Accessibility Scenarios';\nconst APP_TITLE_SEPARATOR = ' | ';\n\ninterface FullscreenLinkProps {\n  parent: string;\n  story: string;\n  content: string;\n}\n\n// https://storybook.js.org/addons/@storybook/addon-links does not allow opening a story in new tab\n// so this is a naive attempt for opening a story in full screen\nexport const FullscreenLink = (props: FullscreenLinkProps) => (\n  <a className=\"sbdocs sbdocs-a\" href={`iframe.html?id=${props.parent}--${props.story}`} target=\"_blank\">\n    {props.content}\n  </a>\n);\n\nexport const ScenariosListLink: React.FC = props => (\n  <a\n    className=\"sbdocs sbdocs-a\"\n    href={`iframe.html?id=concepts-developer-accessibility-stories-list-of-scenarios--page`}\n  >\n    {props.children}\n  </a>\n);\n\nexport const BackLink = () => <ScenariosListLink>Go back to main menu</ScenariosListLink>;\n\nexport const Scenario: React.FunctionComponent<{ pageTitle: string }> = ({ pageTitle, children }) => {\n  React.useEffect(() => {\n    document.title = pageTitle + APP_TITLE_SEPARATOR + APP_TITLE;\n  }, [pageTitle]);\n\n  return (\n    <div role=\"main\">\n      <BackLink />\n      <br />\n      {children}\n    </div>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-components/src/AccessibilityScenarios/utils.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,MAAM,SAAS,GAAG,yBAAlB;AACA,MAAM,mBAAmB,GAAG,KAA5B,C,CAQA;AACA;;AACA,OAAO,MAAM,cAAc,GAAI,KAAD,iBAC5B,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;EAAG,SAAS,EAAC,iBAAb;EAA+B,IAAI,EAAE,kBAAkB,KAAK,CAAC,MAAM,KAAK,KAAK,CAAC,KAAK,EAAnF;EAAuF,MAAM,EAAC;AAA9F,CAAA,EACG,KAAK,CAAC,OADT,CADK;AAMP,OAAO,MAAM,iBAAiB,GAAa,KAAK,iBAC9C,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;EACE,SAAS,EAAC,iBADZ;EAEE,IAAI,EAAE;AAFR,CAAA,EAIG,KAAK,CAAC,QAJT,CADK;AASP,OAAO,MAAM,QAAQ,GAAG,mBAAM,KAAA,CAAA,aAAA,CAAC,iBAAD,EAAkB,IAAlB,EAAkB,sBAAlB,CAAvB;AAEP,OAAO,MAAM,QAAQ,GAAmD,CAAC;EAAE,SAAF;EAAa;AAAb,CAAD,KAA4B;EAClG,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB,QAAQ,CAAC,KAAT,GAAiB,SAAS,GAAG,mBAAZ,GAAkC,SAAnD;EACD,CAFD,EAEG,CAAC,SAAD,CAFH;EAIA,oBACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;IAAK,IAAI,EAAC;EAAV,CAAA,eACE,KAAA,CAAA,aAAA,CAAC,QAAD,EAAS,IAAT,CADF,eAEE,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,CAFF,EAGG,QAHH,CADF;AAOD,CAZM","sourcesContent":["import * as React from 'react';\n\nconst APP_TITLE = 'Accessibility Scenarios';\nconst APP_TITLE_SEPARATOR = ' | ';\n\ninterface FullscreenLinkProps {\n  parent: string;\n  story: string;\n  content: string;\n}\n\n// https://storybook.js.org/addons/@storybook/addon-links does not allow opening a story in new tab\n// so this is a naive attempt for opening a story in full screen\nexport const FullscreenLink = (props: FullscreenLinkProps) => (\n  <a className=\"sbdocs sbdocs-a\" href={`iframe.html?id=${props.parent}--${props.story}`} target=\"_blank\">\n    {props.content}\n  </a>\n);\n\nexport const ScenariosListLink: React.FC = props => (\n  <a\n    className=\"sbdocs sbdocs-a\"\n    href={`iframe.html?id=concepts-developer-accessibility-stories-list-of-scenarios--page`}\n  >\n    {props.children}\n  </a>\n);\n\nexport const BackLink = () => <ScenariosListLink>Go back to main menu</ScenariosListLink>;\n\nexport const Scenario: React.FunctionComponent<{ pageTitle: string }> = ({ pageTitle, children }) => {\n  React.useEffect(() => {\n    document.title = pageTitle + APP_TITLE_SEPARATOR + APP_TITLE;\n  }, [pageTitle]);\n\n  return (\n    <div role=\"main\">\n      <BackLink />\n      <br />\n      {children}\n    </div>\n  );\n};\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["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,"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/"}

package/lib/index.js

@@ -1,5 +1,5 @@
 // Utilities
-export { __css, __styles, createDOMRenderer, makeStaticStyles, makeStyles, mergeClasses, RendererProvider, renderToStyleElements, shorthands } from '@griffel/react';
+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';