@fluentui/react-components 9.0.0-rc.7 → 9.0.0

package/dist/unstable.d.ts

@@ -0,0 +1,461 @@
+import { Alert } from '@fluentui/react-alert';
+import { alertClassNames } from '@fluentui/react-alert';
+import { AlertProps } from '@fluentui/react-alert';
+import { AlertSlots } from '@fluentui/react-alert';
+import { AlertState } from '@fluentui/react-alert';
+import { AvatarGroup } from '@fluentui/react-avatar';
+import { avatarGroupClassNames } from '@fluentui/react-avatar';
+import { AvatarGroupItem } from '@fluentui/react-avatar';
+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 { AvatarGroupProps } from '@fluentui/react-avatar';
+import { AvatarGroupSlots } from '@fluentui/react-avatar';
+import { AvatarGroupState } from '@fluentui/react-avatar';
+import { Card } from '@fluentui/react-card';
+import { cardClassNames } from '@fluentui/react-card';
+import { cardCSSVars } from '@fluentui/react-card';
+import { CardFooter } from '@fluentui/react-card';
+import { cardFooterClassNames } from '@fluentui/react-card';
+import { CardFooterProps } from '@fluentui/react-card';
+import { CardFooterSlots } from '@fluentui/react-card';
+import { CardFooterState } from '@fluentui/react-card';
+import { CardHeader } from '@fluentui/react-card';
+import { cardHeaderClassNames } from '@fluentui/react-card';
+import { CardHeaderProps } from '@fluentui/react-card';
+import { CardHeaderSlots } from '@fluentui/react-card';
+import { CardHeaderState } from '@fluentui/react-card';
+import { CardPreview } from '@fluentui/react-card';
+import { cardPreviewClassNames } from '@fluentui/react-card';
+import { CardPreviewProps } from '@fluentui/react-card';
+import { CardPreviewSlots } from '@fluentui/react-card';
+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 { Combobox } from '@fluentui/react-combobox';
+import { comboboxClassNames } from '@fluentui/react-combobox';
+import { ComboboxContextValues } from '@fluentui/react-combobox';
+import { ComboboxOpenChangeData } from '@fluentui/react-combobox';
+import { ComboboxOpenEvents } from '@fluentui/react-combobox';
+import { ComboboxProps } from '@fluentui/react-combobox';
+import { ComboboxSlots } from '@fluentui/react-combobox';
+import { ComboboxState } from '@fluentui/react-combobox';
+import { DATA_OVERFLOW_ITEM } from '@fluentui/react-overflow';
+import { DATA_OVERFLOW_MENU } from '@fluentui/react-overflow';
+import { DATA_OVERFLOWING } from '@fluentui/react-overflow';
+import { Dropdown } from '@fluentui/react-combobox';
+import { dropdownClassNames } from '@fluentui/react-combobox';
+import { DropdownContextValues } from '@fluentui/react-combobox';
+import { DropdownOpenChangeData } from '@fluentui/react-combobox';
+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 { Listbox } from '@fluentui/react-combobox';
+import { listboxClassNames } from '@fluentui/react-combobox';
+import { ListboxContextValues } from '@fluentui/react-combobox';
+import { ListboxProps } from '@fluentui/react-combobox';
+import { ListboxSlots } from '@fluentui/react-combobox';
+import { ListboxState } from '@fluentui/react-combobox';
+import { Option as Option_2 } from '@fluentui/react-combobox';
+import { optionClassNames } from '@fluentui/react-combobox';
+import { OptionGroup } from '@fluentui/react-combobox';
+import { optionGroupClassNames } from '@fluentui/react-combobox';
+import { OptionGroupProps } from '@fluentui/react-combobox';
+import { OptionGroupSlots } from '@fluentui/react-combobox';
+import { OptionGroupState } from '@fluentui/react-combobox';
+import { OptionProps } from '@fluentui/react-combobox';
+import { OptionSlots } from '@fluentui/react-combobox';
+import { OptionState } from '@fluentui/react-combobox';
+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 { renderAlert_unstable } from '@fluentui/react-alert';
+import { renderAvatarGroup_unstable } from '@fluentui/react-avatar';
+import { renderAvatarGroupItem_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';
+import { renderCardPreview_unstable } from '@fluentui/react-card';
+import { renderCombobox_unstable } from '@fluentui/react-combobox';
+import { renderDropdown_unstable } from '@fluentui/react-combobox';
+import { renderListbox_unstable } from '@fluentui/react-combobox';
+import { renderOption_unstable } from '@fluentui/react-combobox';
+import { renderOptionGroup_unstable } from '@fluentui/react-combobox';
+import { renderSelect_unstable } from '@fluentui/react-select';
+import { renderSpinButton_unstable } from '@fluentui/react-spinbutton';
+import { renderToolbar_unstable } from '@fluentui/react-toolbar';
+import { Select } from '@fluentui/react-select';
+import { selectClassNames } from '@fluentui/react-select';
+import { SelectProps } from '@fluentui/react-select';
+import { SelectSlots } from '@fluentui/react-select';
+import { SelectState } from '@fluentui/react-select';
+import { SpinButton } from '@fluentui/react-spinbutton';
+import { SpinButtonBounds } from '@fluentui/react-spinbutton';
+import { SpinButtonChangeEvent } from '@fluentui/react-spinbutton';
+import { spinButtonClassNames } from '@fluentui/react-spinbutton';
+import { SpinButtonOnChangeData } from '@fluentui/react-spinbutton';
+import { SpinButtonProps } from '@fluentui/react-spinbutton';
+import { SpinButtonSlots } from '@fluentui/react-spinbutton';
+import { SpinButtonSpinState } from '@fluentui/react-spinbutton';
+import { SpinButtonState } from '@fluentui/react-spinbutton';
+import { Toolbar } from '@fluentui/react-toolbar';
+import { ToolbarButtonProps } from '@fluentui/react-toolbar';
+import { ToolbarButtonState } from '@fluentui/react-toolbar';
+import { toolbarClassNames } from '@fluentui/react-toolbar';
+import { ToolbarContextValue } from '@fluentui/react-toolbar';
+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 { ToolbarProps } from '@fluentui/react-toolbar';
+import { ToolbarSlots } from '@fluentui/react-toolbar';
+import { ToolbarState } from '@fluentui/react-toolbar';
+import { ToolbarToggleButton } from '@fluentui/react-toolbar';
+import { ToolbarToggleButtonProps } from '@fluentui/react-toolbar';
+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 { useAvatarGroupItem_unstable } from '@fluentui/react-avatar';
+import { useAvatarGroupItemStyles_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';
+import { useCardFooterStyles_unstable } from '@fluentui/react-card';
+import { useCardHeader_unstable } from '@fluentui/react-card';
+import { useCardHeaderStyles_unstable } from '@fluentui/react-card';
+import { useCardPreview_unstable } from '@fluentui/react-card';
+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 { useDropdown_unstable } from '@fluentui/react-combobox';
+import { useDropdownStyles_unstable } from '@fluentui/react-combobox';
+import { useIsOverflowGroupVisible } from '@fluentui/react-overflow';
+import { useIsOverflowItemVisible } from '@fluentui/react-overflow';
+import { useListbox_unstable } from '@fluentui/react-combobox';
+import { useListboxStyles_unstable } from '@fluentui/react-combobox';
+import { useOption_unstable } from '@fluentui/react-combobox';
+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 { useSelect_unstable } from '@fluentui/react-select';
+import { useSelectStyles_unstable } from '@fluentui/react-select';
+import { useSpinButton_unstable } from '@fluentui/react-spinbutton';
+import { useSpinButtonStyles_unstable } from '@fluentui/react-spinbutton';
+import { useToolbar_unstable } from '@fluentui/react-toolbar';
+import { useToolbarDividerStyles_unstable } from '@fluentui/react-toolbar';
+import { useToolbarStyles_unstable } from '@fluentui/react-toolbar';
+
+export { Alert }
+
+export { alertClassNames }
+
+export { AlertProps }
+
+export { AlertSlots }
+
+export { AlertState }
+
+export { AvatarGroup }
+
+export { avatarGroupClassNames }
+
+export { AvatarGroupItem }
+
+export { avatarGroupItemClassNames }
+
+export { AvatarGroupItemProps }
+
+export { AvatarGroupItemSlots }
+
+export { AvatarGroupItemState }
+
+export { AvatarGroupProps }
+
+export { AvatarGroupSlots }
+
+export { AvatarGroupState }
+
+export { Card }
+
+export { cardClassNames }
+
+export { cardCSSVars }
+
+export { CardFooter }
+
+export { cardFooterClassNames }
+
+export { CardFooterProps }
+
+export { CardFooterSlots }
+
+export { CardFooterState }
+
+export { CardHeader }
+
+export { cardHeaderClassNames }
+
+export { CardHeaderProps }
+
+export { CardHeaderSlots }
+
+export { CardHeaderState }
+
+export { CardPreview }
+
+export { cardPreviewClassNames }
+
+export { CardPreviewProps }
+
+export { CardPreviewSlots }
+
+export { CardPreviewState }
+
+export { CardProps }
+
+export { CardSlots }
+
+export { CardState }
+
+export { Combobox }
+
+export { comboboxClassNames }
+
+export { ComboboxContextValues }
+
+export { ComboboxOpenChangeData }
+
+export { ComboboxOpenEvents }
+
+export { ComboboxProps }
+
+export { ComboboxSlots }
+
+export { ComboboxState }
+
+export { DATA_OVERFLOW_ITEM }
+
+export { DATA_OVERFLOW_MENU }
+
+export { DATA_OVERFLOWING }
+
+export { Dropdown }
+
+export { dropdownClassNames }
+
+export { DropdownContextValues }
+
+export { DropdownOpenChangeData }
+
+export { DropdownOpenEvents }
+
+export { DropdownProps }
+
+export { DropdownSlots }
+
+export { DropdownState }
+
+export { Listbox }
+
+export { listboxClassNames }
+
+export { ListboxContextValues }
+
+export { ListboxProps }
+
+export { ListboxSlots }
+
+export { ListboxState }
+
+export { Option_2 as Option }
+
+export { optionClassNames }
+
+export { OptionGroup }
+
+export { optionGroupClassNames }
+
+export { OptionGroupProps }
+
+export { OptionGroupSlots }
+
+export { OptionGroupState }
+
+export { OptionProps }
+
+export { OptionSlots }
+
+export { OptionState }
+
+export { Overflow }
+
+export { OverflowItem }
+
+export { OverflowItemProps }
+
+export { OverflowProps }
+
+export { renderAlert_unstable }
+
+export { renderAvatarGroup_unstable }
+
+export { renderAvatarGroupItem_unstable }
+
+export { renderCard_unstable }
+
+export { renderCardFooter_unstable }
+
+export { renderCardHeader_unstable }
+
+export { renderCardPreview_unstable }
+
+export { renderCombobox_unstable }
+
+export { renderDropdown_unstable }
+
+export { renderListbox_unstable }
+
+export { renderOption_unstable }
+
+export { renderOptionGroup_unstable }
+
+export { renderSelect_unstable }
+
+export { renderSpinButton_unstable }
+
+export { renderToolbar_unstable }
+
+export { Select }
+
+export { selectClassNames }
+
+export { SelectProps }
+
+export { SelectSlots }
+
+export { SelectState }
+
+export { SpinButton }
+
+export { SpinButtonBounds }
+
+export { SpinButtonChangeEvent }
+
+export { spinButtonClassNames }
+
+export { SpinButtonOnChangeData }
+
+export { SpinButtonProps }
+
+export { SpinButtonSlots }
+
+export { SpinButtonSpinState }
+
+export { SpinButtonState }
+
+export { Toolbar }
+
+export { ToolbarButtonProps }
+
+export { ToolbarButtonState }
+
+export { toolbarClassNames }
+
+export { ToolbarContextValue }
+
+export { ToolbarContextValues }
+
+export { ToolbarDivider }
+
+export { ToolbarDividerProps }
+
+export { ToolbarDividerState }
+
+export { ToolbarProps }
+
+export { ToolbarSlots }
+
+export { ToolbarState }
+
+export { ToolbarToggleButton }
+
+export { ToolbarToggleButtonProps }
+
+export { ToolbarToggleButtonState }
+
+export { useAlert_unstable }
+
+export { useAlertStyles_unstable }
+
+export { useAvatarGroup_unstable }
+
+export { useAvatarGroupItem_unstable }
+
+export { useAvatarGroupItemStyles_unstable }
+
+export { useAvatarGroupStyles_unstable }
+
+export { useCard_unstable }
+
+export { useCardFooter_unstable }
+
+export { useCardFooterStyles_unstable }
+
+export { useCardHeader_unstable }
+
+export { useCardHeaderStyles_unstable }
+
+export { useCardPreview_unstable }
+
+export { useCardPreviewStyles_unstable }
+
+export { useCardStyles_unstable }
+
+export { useCombobox_unstable }
+
+export { useComboboxStyles_unstable }
+
+export { useDropdown_unstable }
+
+export { useDropdownStyles_unstable }
+
+export { useIsOverflowGroupVisible }
+
+export { useIsOverflowItemVisible }
+
+export { useListbox_unstable }
+
+export { useListboxStyles_unstable }
+
+export { useOption_unstable }
+
+export { useOptionGroup_unstable }
+
+export { useOptionGroupStyles_unstable }
+
+export { useOptionStyles_unstable }
+
+export { useOverflowMenu }
+
+export { useSelect_unstable }
+
+export { useSelectStyles_unstable }
+
+export { useSpinButton_unstable }
+
+export { useSpinButtonStyles_unstable }
+
+export { useToolbar_unstable }
+
+export { useToolbarDividerStyles_unstable }
+
+export { useToolbarStyles_unstable }
+
+export { }

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;AAAG,EAAA,SAAS,EAAC,iBAAb;AAA+B,EAAA,IAAI,EAAE,kBAAkB,KAAK,CAAC,MAAM,KAAK,KAAK,CAAC,KAAK,EAAnF;AAAuF,EAAA,MAAM,EAAC;AAA9F,CAAA,EACG,KAAK,CAAC,OADT,CADK;AAMP,OAAO,MAAM,iBAAiB,GAAa,KAAK,iBAC9C,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAG,EAAA,SAAS,EAAC,iBAAb;AAA+B,EAAA,IAAI,EAAE;AAArC,CAAA,EACG,KAAK,CAAC,QADT,CADK;AAMP,OAAO,MAAM,QAAQ,GAAG,mBAAM,KAAA,CAAA,aAAA,CAAC,iBAAD,EAAkB,IAAlB,EAAkB,sBAAlB,CAAvB;AAEP,OAAO,MAAM,QAAQ,GAAmD,CAAC;AAAE,EAAA,SAAF;AAAa,EAAA;AAAb,CAAD,KAA4B;AAClG,EAAA,KAAK,CAAC,SAAN,CAAgB,MAAK;AACnB,IAAA,QAAQ,CAAC,KAAT,GAAiB,SAAS,GAAG,mBAAZ,GAAkC,SAAnD;AACD,GAFD,EAEG,CAAC,SAAD,CAFH;AAIA,sBACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,IAAA,IAAI,EAAC;AAAV,GAAA,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 className=\"sbdocs sbdocs-a\" href={`iframe.html?id=accessibility-scenarios-list-of-scenarios--page`}>\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":["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;EAAG,SAAS,EAAC,iBAAb;EAA+B,IAAI,EAAE;AAArC,CAAA,EACG,KAAK,CAAC,QADT,CADK;AAMP,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 className=\"sbdocs sbdocs-a\" href={`iframe.html?id=accessibility-scenarios-list-of-scenarios--page`}>\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

@@ -44,7 +44,7 @@ const reactIcons = /*#__PURE__*/Object.keys(ReactIcons) // eslint-disable-next-l
 
 const ReactIconGrid = () => {
   const [search, setSearch] = React.useState('');
-  const [size, setSize] = React.useState('');
+  const [size, setSize] = React.useState(24);
   const styles = useStyles();
 
   const _onSearchQueryChanged = ev => {
@@ -66,7 +66,7 @@ const ReactIconGrid = () => {
   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(size)) !== -1;
+    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;
   }), [search, size]);
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Input, {
     type: "search",
@@ -78,6 +78,7 @@ const ReactIconGrid = () => {
     className: styles.searchBox
   }), [16, 20, 24, 28, 32, 48, 'All'].map(option => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", {
     id: `option-${option}`,
+    defaultChecked: option === 24,
     type: "radio",
     value: option,
     name: "size",

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('');\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(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 id={`option-${option}`} type=\"radio\" value={option} name=\"size\" onChange={_filterBySize} />\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: '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/"}