@fluentui/react-components 9.2.0 → 9.3.0

package/dist/unstable.d.ts

@@ -10,7 +10,13 @@ import { avatarGroupItemClassNames } from '@fluentui/react-avatar';
 import { AvatarGroupItemProps } from '@fluentui/react-avatar';
 import { AvatarGroupItemSlots } from '@fluentui/react-avatar';
 import { AvatarGroupItemState } from '@fluentui/react-avatar';
+import { AvatarGroupPopover } from '@fluentui/react-avatar';
+import { avatarGroupPopoverClassNames } from '@fluentui/react-avatar';
+import { AvatarGroupPopoverProps } from '@fluentui/react-avatar';
+import { AvatarGroupPopoverSlots } from '@fluentui/react-avatar';
+import { AvatarGroupPopoverState } from '@fluentui/react-avatar';
 import { AvatarGroupProps } from '@fluentui/react-avatar';
+import { AvatarGroupProvider } from '@fluentui/react-avatar';
 import { AvatarGroupSlots } from '@fluentui/react-avatar';
 import { AvatarGroupState } from '@fluentui/react-avatar';
 import { Card } from '@fluentui/react-card';
@@ -35,9 +41,15 @@ import { CardPreviewState } from '@fluentui/react-card';
 import { CardProps } from '@fluentui/react-card';
 import { CardSlots } from '@fluentui/react-card';
 import { CardState } from '@fluentui/react-card';
+import { CheckboxField } from '@fluentui/react-field';
+import { checkboxFieldClassNames } from '@fluentui/react-field';
+import { CheckboxFieldProps } from '@fluentui/react-field';
 import { Combobox } from '@fluentui/react-combobox';
 import { comboboxClassNames } from '@fluentui/react-combobox';
 import { ComboboxContextValues } from '@fluentui/react-combobox';
+import { ComboboxField } from '@fluentui/react-field';
+import { comboboxFieldClassNames } from '@fluentui/react-field';
+import { ComboboxFieldProps } from '@fluentui/react-field';
 import { ComboboxOpenChangeData } from '@fluentui/react-combobox';
 import { ComboboxOpenEvents } from '@fluentui/react-combobox';
 import { ComboboxProps } from '@fluentui/react-combobox';
@@ -58,7 +70,6 @@ import { dialogBodyClassNames } from '@fluentui/react-dialog';
 import { DialogBodyProps } from '@fluentui/react-dialog';
 import { DialogBodySlots } from '@fluentui/react-dialog';
 import { DialogBodyState } from '@fluentui/react-dialog';
-import { dialogClassNames } from '@fluentui/react-dialog';
 import { DialogOpenChangeData } from '@fluentui/react-dialog';
 import { DialogOpenChangeEvent } from '@fluentui/react-dialog';
 import { DialogProps } from '@fluentui/react-dialog';
@@ -87,6 +98,14 @@ import { DropdownOpenEvents } from '@fluentui/react-combobox';
 import { DropdownProps } from '@fluentui/react-combobox';
 import { DropdownSlots } from '@fluentui/react-combobox';
 import { DropdownState } from '@fluentui/react-combobox';
+import { FieldConfig } from '@fluentui/react-field';
+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 { InputField } from '@fluentui/react-field';
+import { inputFieldClassNames } from '@fluentui/react-field';
+import { InputFieldProps } from '@fluentui/react-field';
 import { Listbox } from '@fluentui/react-combobox';
 import { listboxClassNames } from '@fluentui/react-combobox';
 import { ListboxContextValues } from '@fluentui/react-combobox';
@@ -107,9 +126,13 @@ 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 { RadioGroupField } from '@fluentui/react-field';
+import { radioGroupFieldClassNames } from '@fluentui/react-field';
+import { RadioGroupFieldProps } from '@fluentui/react-field';
 import { renderAlert_unstable } from '@fluentui/react-alert';
 import { renderAvatarGroup_unstable } from '@fluentui/react-avatar';
 import { renderAvatarGroupItem_unstable } from '@fluentui/react-avatar';
+import { renderAvatarGroupPopover_unstable } from '@fluentui/react-avatar';
 import { renderCard_unstable } from '@fluentui/react-card';
 import { renderCardFooter_unstable } from '@fluentui/react-card';
 import { renderCardHeader_unstable } from '@fluentui/react-card';
@@ -122,6 +145,7 @@ import { renderDialogSurface_unstable } from '@fluentui/react-dialog';
 import { renderDialogTitle_unstable } from '@fluentui/react-dialog';
 import { renderDialogTrigger_unstable } from '@fluentui/react-dialog';
 import { renderDropdown_unstable } from '@fluentui/react-combobox';
+import { renderField_unstable } from '@fluentui/react-field';
 import { renderListbox_unstable } from '@fluentui/react-combobox';
 import { renderOption_unstable } from '@fluentui/react-combobox';
 import { renderOptionGroup_unstable } from '@fluentui/react-combobox';
@@ -129,15 +153,31 @@ 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';
+import { renderTableCellActions_unstable } from '@fluentui/react-table';
+import { renderTableCellLayout_unstable } from '@fluentui/react-table';
 import { renderTableHeader_unstable } from '@fluentui/react-table';
 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 { Select } from '@fluentui/react-select';
 import { selectClassNames } from '@fluentui/react-select';
+import { SelectField } from '@fluentui/react-field';
+import { selectFieldClassNames } from '@fluentui/react-field';
+import { SelectFieldProps } from '@fluentui/react-field';
 import { SelectProps } from '@fluentui/react-select';
 import { SelectSlots } from '@fluentui/react-select';
 import { SelectState } from '@fluentui/react-select';
+import { SliderField } from '@fluentui/react-field';
+import { sliderFieldClassNames } from '@fluentui/react-field';
+import { SliderFieldProps } from '@fluentui/react-field';
+import { SortDirection } from '@fluentui/react-table';
+import { SpinButtonField } from '@fluentui/react-field';
+import { spinButtonFieldClassNames } from '@fluentui/react-field';
+import { SpinButtonFieldProps } from '@fluentui/react-field';
+import { SwitchField } from '@fluentui/react-field';
+import { switchFieldClassNames } from '@fluentui/react-field';
+import { SwitchFieldProps } from '@fluentui/react-field';
 import { Table } from '@fluentui/react-table';
 import { TableBody } from '@fluentui/react-table';
 import { tableBodyClassName } from '@fluentui/react-table';
@@ -146,8 +186,14 @@ import { TableBodyProps } from '@fluentui/react-table';
 import { TableBodySlots } from '@fluentui/react-table';
 import { TableBodyState } from '@fluentui/react-table';
 import { TableCell } from '@fluentui/react-table';
+import { TableCellActions } from '@fluentui/react-table';
+import { TableCellActionsProps } from '@fluentui/react-table';
+import { TableCellActionsSlots } from '@fluentui/react-table';
+import { TableCellActionsState } from '@fluentui/react-table';
 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 { TableCellProps } from '@fluentui/react-table';
 import { TableCellSlots } from '@fluentui/react-table';
 import { TableCellState } from '@fluentui/react-table';
@@ -175,9 +221,18 @@ import { tableRowClassNames } from '@fluentui/react-table';
 import { TableRowProps } from '@fluentui/react-table';
 import { TableRowSlots } from '@fluentui/react-table';
 import { TableRowState } from '@fluentui/react-table';
+import { TableSelectionCell } from '@fluentui/react-table';
+import { tableSelectionCellClassNames } from '@fluentui/react-table';
+import { TableSelectionCellProps } from '@fluentui/react-table';
+import { TableSelectionCellSlots } from '@fluentui/react-table';
+import { TableSelectionCellState } from '@fluentui/react-table';
 import { TableSlots } from '@fluentui/react-table';
 import { TableState } from '@fluentui/react-table';
+import { TextareaField } from '@fluentui/react-field';
+import { textareaFieldClassNames } from '@fluentui/react-field';
+import { TextareaFieldProps } from '@fluentui/react-field';
 import { Toolbar } from '@fluentui/react-toolbar';
+import { ToolbarButton } from '@fluentui/react-toolbar';
 import { ToolbarButtonProps } from '@fluentui/react-toolbar';
 import { ToolbarButtonState } from '@fluentui/react-toolbar';
 import { toolbarClassNames } from '@fluentui/react-toolbar';
@@ -195,8 +250,11 @@ import { ToolbarToggleButtonState } from '@fluentui/react-toolbar';
 import { useAlert_unstable } from '@fluentui/react-alert';
 import { useAlertStyles_unstable } from '@fluentui/react-alert';
 import { useAvatarGroup_unstable } from '@fluentui/react-avatar';
+import { useAvatarGroupContext_unstable } from '@fluentui/react-avatar';
 import { useAvatarGroupItem_unstable } from '@fluentui/react-avatar';
 import { useAvatarGroupItemStyles_unstable } from '@fluentui/react-avatar';
+import { useAvatarGroupPopover_unstable } from '@fluentui/react-avatar';
+import { useAvatarGroupPopoverStyles_unstable } from '@fluentui/react-avatar';
 import { useAvatarGroupStyles_unstable } from '@fluentui/react-avatar';
 import { useCard_unstable } from '@fluentui/react-card';
 import { useCardFooter_unstable } from '@fluentui/react-card';
@@ -213,7 +271,6 @@ import { useDialogActions_unstable } from '@fluentui/react-dialog';
 import { useDialogActionsStyles_unstable } from '@fluentui/react-dialog';
 import { useDialogBody_unstable } from '@fluentui/react-dialog';
 import { useDialogBodyStyles_unstable } from '@fluentui/react-dialog';
-import { useDialogStyles_unstable } from '@fluentui/react-dialog';
 import { useDialogSurface_unstable } from '@fluentui/react-dialog';
 import { useDialogSurfaceStyles_unstable } from '@fluentui/react-dialog';
 import { useDialogTitle_unstable } from '@fluentui/react-dialog';
@@ -221,6 +278,8 @@ import { useDialogTitleStyles_unstable } from '@fluentui/react-dialog';
 import { useDialogTrigger_unstable } from '@fluentui/react-dialog';
 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 { useIsOverflowGroupVisible } from '@fluentui/react-overflow';
 import { useIsOverflowItemVisible } from '@fluentui/react-overflow';
 import { useListbox_unstable } from '@fluentui/react-combobox';
@@ -236,6 +295,10 @@ import { useTable_unstable } from '@fluentui/react-table';
 import { useTableBody_unstable } from '@fluentui/react-table';
 import { useTableBodyStyles_unstable } from '@fluentui/react-table';
 import { useTableCell_unstable } from '@fluentui/react-table';
+import { useTableCellActions_unstable } from '@fluentui/react-table';
+import { useTableCellActionsStyles_unstable } from '@fluentui/react-table';
+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 { useTableHeader_unstable } from '@fluentui/react-table';
@@ -244,6 +307,8 @@ import { useTableHeaderCellStyles_unstable } from '@fluentui/react-table';
 import { useTableHeaderStyles_unstable } from '@fluentui/react-table';
 import { useTableRow_unstable } from '@fluentui/react-table';
 import { useTableRowStyles_unstable } from '@fluentui/react-table';
+import { useTableSelectionCell_unstable } from '@fluentui/react-table';
+import { useTableSelectionCellStyles_unstable } 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';
@@ -273,8 +338,20 @@ export { AvatarGroupItemSlots }
 
 export { AvatarGroupItemState }
 
+export { AvatarGroupPopover }
+
+export { avatarGroupPopoverClassNames }
+
+export { AvatarGroupPopoverProps }
+
+export { AvatarGroupPopoverSlots }
+
+export { AvatarGroupPopoverState }
+
 export { AvatarGroupProps }
 
+export { AvatarGroupProvider }
+
 export { AvatarGroupSlots }
 
 export { AvatarGroupState }
@@ -323,12 +400,24 @@ export { CardSlots }
 
 export { CardState }
 
+export { CheckboxField }
+
+export { checkboxFieldClassNames }
+
+export { CheckboxFieldProps }
+
 export { Combobox }
 
 export { comboboxClassNames }
 
 export { ComboboxContextValues }
 
+export { ComboboxField }
+
+export { comboboxFieldClassNames }
+
+export { ComboboxFieldProps }
+
 export { ComboboxOpenChangeData }
 
 export { ComboboxOpenEvents }
@@ -369,8 +458,6 @@ export { DialogBodySlots }
 
 export { DialogBodyState }
 
-export { dialogClassNames }
-
 export { DialogOpenChangeData }
 
 export { DialogOpenChangeEvent }
@@ -427,6 +514,22 @@ export { DropdownSlots }
 
 export { DropdownState }
 
+export { FieldConfig }
+
+export { FieldProps }
+
+export { FieldSlots }
+
+export { FieldState }
+
+export { getFieldClassNames }
+
+export { InputField }
+
+export { inputFieldClassNames }
+
+export { InputFieldProps }
+
 export { Listbox }
 
 export { listboxClassNames }
@@ -467,12 +570,20 @@ export { OverflowItemProps }
 
 export { OverflowProps }
 
+export { RadioGroupField }
+
+export { radioGroupFieldClassNames }
+
+export { RadioGroupFieldProps }
+
 export { renderAlert_unstable }
 
 export { renderAvatarGroup_unstable }
 
 export { renderAvatarGroupItem_unstable }
 
+export { renderAvatarGroupPopover_unstable }
+
 export { renderCard_unstable }
 
 export { renderCardFooter_unstable }
@@ -497,6 +608,8 @@ export { renderDialogTrigger_unstable }
 
 export { renderDropdown_unstable }
 
+export { renderField_unstable }
+
 export { renderListbox_unstable }
 
 export { renderOption_unstable }
@@ -511,24 +624,56 @@ export { renderTableBody_unstable }
 
 export { renderTableCell_unstable }
 
+export { renderTableCellActions_unstable }
+
+export { renderTableCellLayout_unstable }
+
 export { renderTableHeader_unstable }
 
 export { renderTableHeaderCell_unstable }
 
 export { renderTableRow_unstable }
 
+export { renderTableSelectionCell_unstable }
+
 export { renderToolbar_unstable }
 
 export { Select }
 
 export { selectClassNames }
 
+export { SelectField }
+
+export { selectFieldClassNames }
+
+export { SelectFieldProps }
+
 export { SelectProps }
 
 export { SelectSlots }
 
 export { SelectState }
 
+export { SliderField }
+
+export { sliderFieldClassNames }
+
+export { SliderFieldProps }
+
+export { SortDirection }
+
+export { SpinButtonField }
+
+export { spinButtonFieldClassNames }
+
+export { SpinButtonFieldProps }
+
+export { SwitchField }
+
+export { switchFieldClassNames }
+
+export { SwitchFieldProps }
+
 export { Table }
 
 export { TableBody }
@@ -545,10 +690,22 @@ export { TableBodyState }
 
 export { TableCell }
 
+export { TableCellActions }
+
+export { TableCellActionsProps }
+
+export { TableCellActionsSlots }
+
+export { TableCellActionsState }
+
 export { tableCellClassName }
 
 export { tableCellClassNames }
 
+export { TableCellLayout }
+
+export { tableCellLayoutClassNames }
+
 export { TableCellProps }
 
 export { TableCellSlots }
@@ -603,12 +760,30 @@ export { TableRowSlots }
 
 export { TableRowState }
 
+export { TableSelectionCell }
+
+export { tableSelectionCellClassNames }
+
+export { TableSelectionCellProps }
+
+export { TableSelectionCellSlots }
+
+export { TableSelectionCellState }
+
 export { TableSlots }
 
 export { TableState }
 
+export { TextareaField }
+
+export { textareaFieldClassNames }
+
+export { TextareaFieldProps }
+
 export { Toolbar }
 
+export { ToolbarButton }
+
 export { ToolbarButtonProps }
 
 export { ToolbarButtonState }
@@ -643,10 +818,16 @@ export { useAlertStyles_unstable }
 
 export { useAvatarGroup_unstable }
 
+export { useAvatarGroupContext_unstable }
+
 export { useAvatarGroupItem_unstable }
 
 export { useAvatarGroupItemStyles_unstable }
 
+export { useAvatarGroupPopover_unstable }
+
+export { useAvatarGroupPopoverStyles_unstable }
+
 export { useAvatarGroupStyles_unstable }
 
 export { useCard_unstable }
@@ -679,8 +860,6 @@ export { useDialogBody_unstable }
 
 export { useDialogBodyStyles_unstable }
 
-export { useDialogStyles_unstable }
-
 export { useDialogSurface_unstable }
 
 export { useDialogSurfaceStyles_unstable }
@@ -695,6 +874,10 @@ export { useDropdown_unstable }
 
 export { useDropdownStyles_unstable }
 
+export { useField_unstable }
+
+export { useFieldStyles_unstable }
+
 export { useIsOverflowGroupVisible }
 
 export { useIsOverflowItemVisible }
@@ -725,6 +908,14 @@ export { useTableBodyStyles_unstable }
 
 export { useTableCell_unstable }
 
+export { useTableCellActions_unstable }
+
+export { useTableCellActionsStyles_unstable }
+
+export { useTableCellLayout_unstable }
+
+export { useTableCellLayoutStyles_unstable }
+
 export { useTableCellStyles_unstable }
 
 export { useTableContext }
@@ -741,6 +932,10 @@ export { useTableRow_unstable }
 
 export { useTableRowStyles_unstable }
 
+export { useTableSelectionCell_unstable }
+
+export { useTableSelectionCellStyles_unstable }
+
 export { useTableStyles_unstable }
 
 export { useToolbar_unstable }

package/lib/Concepts/Icons/ReactIconGrid.js

@@ -6,37 +6,40 @@ import { __styles, shorthands } from '@griffel/react';
 
 const useStyles = /*#__PURE__*/__styles({
   "grid": {
-    "mc9l5x": "f22iagw",
-    "Eh141a": "fni485r",
-    "Brf1p80": "fbhxue7",
-    "tbg6ku": "f1te8bq8",
-    "iezhb2": "f1ekvqd1",
-    "Bejz04s": "ft9xqq4",
-    "Brafdv5": "f1qo9o5r",
-    "Bvo9a10": "f13u1f6e",
-    "gqbnx1": "fw20ijn",
-    "Jqrz2v": "f1pm9t65",
-    "Bx6r4qm": ["fof7vr4", "f1fg1dd8"],
-    "B70yl5k": "fe5j5s8",
-    "Bgac7oy": ["f1fg1dd8", "fof7vr4"],
-    "Bndz7f7": "fje6enq",
-    "Bd3lead": "frugz3z",
-    "Bh7qfgy": "f16hhesz",
-    "Bhcprac": "f1d9k0pr",
-    "B9qxanq": "fqdk8yc",
-    "mfpuu8": "f1nkkbgj",
-    "Bxj1sw5": "f1hid01w",
-    "oyycmu": "faqp3b6"
+    "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"
   },
   "radio": {
+    "De3pzq": "f1vbpgwy",
     "Be2twd7": "fnsq08h"
   }
 }, {
-  "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fni485r{-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}", ".fbhxue7{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;}", ".f1te8bq8>span{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1ekvqd1>span{color:#3b3a39;}", ".ft9xqq4>span{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1qo9o5r>span{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f13u1f6e>span{height:80px;}", ".fw20ijn>span{-webkit-box-pack:space-around;-ms-flex-pack:space-around;-webkit-justify-content:space-around;justify-content:space-around;}", ".f1pm9t65>span{padding-top:0;}", ".fof7vr4>span{padding-right:0;}", ".f1fg1dd8>span{padding-left:0;}", ".fe5j5s8>span{padding-bottom:0;}", ".fje6enq>span{width:80px;}", ".frugz3z>span{overflow-x:hidden;}", ".f16hhesz>span{overflow-y:hidden;}", ".f1d9k0pr>span>div{font-size:11px;}", ".fqdk8yc>span>div{opacity:0;}", ".f1nkkbgj>span:hover{overflow-x:visible;}", ".f1hid01w>span:hover{overflow-y:visible;}", ".faqp3b6>span:hover div{opacity:1;}", ".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
@@ -53,20 +56,27 @@ const ReactIconGrid = () => {
 
   const _filterBySize = ev => {
     const newSize = ev ? ev.currentTarget.value : '';
-    newSize === 'All' ? setSize('') : setSize(newSize);
+
+    if (newSize === 'All') {
+      setSize('');
+    } else if (newSize === 'Unsized') {
+      setSize('Unsized');
+    } else {
+      setSize(newSize);
+    }
   };
 
   const _renderIcon = Icon => {
-    return /*#__PURE__*/React.createElement("span", {
+    return /*#__PURE__*/React.createElement("div", {
       key: Icon.displayName,
       "aria-label": Icon.displayName
-    }, /*#__PURE__*/React.createElement(Icon, null), /*#__PURE__*/React.createElement("div", null, 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 ((_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;
+    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, {
     type: "search",
@@ -76,7 +86,7 @@ const ReactIconGrid = () => {
     // eslint-disable-next-line react/jsx-no-bind
     onChange: _onSearchQueryChanged,
     className: styles.searchBox
-  }), [16, 20, 24, 28, 32, 48, 'All'].map(option => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", {
+  }), [16, 20, 24, 28, 32, 48, 'Unsized', 'All'].map(option => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", {
     id: `option-${option}`,
     defaultChecked: option === 24,
     type: "radio",

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: 'flex',\n    flexWrap: 'wrap',\n    justifyContent: ' flex-start',\n\n    '> span': {\n      alignItems: 'center',\n      color: '#3b3a39',\n      display: 'flex',\n      flexDirection: 'column',\n      height: '80px',\n      justifyContent: 'space-around',\n      ...shorthands.padding(0),\n      width: '80px',\n      ...shorthands.overflow('hidden'),\n\n      '> div': {\n        fontSize: '11px',\n        opacity: '0',\n      },\n\n      '&:hover': {\n        ...shorthands.overflow('visible'),\n\n        '& div': {\n          opacity: '1',\n        },\n      },\n    },\n  },\n\n  searchBox: {\n    maxWidth: '320px',\n    marginBottom: '10px',\n  },\n\n  radio: {\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    newSize === 'All' ? setSize('') : setSize(newSize);\n  };\n\n  const _renderIcon = (Icon: React.FC<FluentIconsProps>): JSX.Element => {\n    return (\n      <span key={Icon.displayName} aria-label={Icon.displayName}>\n        <Icon />\n        <div>{Icon.displayName}</div>\n      </span>\n    );\n  };\n\n  const filteredIcons = React.useMemo(\n    () =>\n      reactIcons.filter(\n        icon =>\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, '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":["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 { RendererProvider, __css, __styles, createDOMRenderer, makeStaticStyles, makeStyles, mergeClasses, renderToStyleElements, shorthands } from '@griffel/react';
+export { __css, __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';