workaround for ts-ignore

package.json

@@ -231,7 +231,7 @@
     "workspace-tools": "0.12.3",
     "yargs": "13.3.2",
     "yargs-parser": "13.1.2",
-    "storybook-addon-export-to-codesandbox": "0.2.3"
+    "storybook-addon-export-to-codesandbox": "0.3.1"
   },
   "license": "MIT",
   "workspaces": {

packages/react-button/src/components/Button/Button.stories.tsx

@@ -1,6 +1,4 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore - add link to this comment please  (see https://github.com/microsoft/fluentui/pull/18695)
-import { Button } from '@fluentui/react-button';
+import { Button } from '../../Button'; // codesandbox-dependency: @fluentui/react-button ^9.0.0-alpha
 import { Meta } from '@storybook/react';
 
 import descriptionMd from './ButtonDescription.md';

packages/react-button/src/components/Button/ButtonBlock.stories.tsx

@@ -1,8 +1,5 @@
 import * as React from 'react';
-
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore - add link to this comment please  (see https://github.com/microsoft/fluentui/pull/18695)
-import { Button } from '@fluentui/react-button';
+import { Button } from '../../Button'; // codesandbox-dependency: @fluentui/react-button ^9.0.0-alpha
 
 export const Block = () => (
   <div style={{ display: 'flex', justifyContent: 'space-evenly' }}>

packages/react-button/src/components/Button/ButtonCircular.stories.tsx

@@ -1,8 +1,5 @@
 import * as React from 'react';
-
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore - add link to this comment please  (see https://github.com/microsoft/fluentui/pull/18695)
-import { Button } from '@fluentui/react-button';
+import { Button } from '../../Button'; // codesandbox-dependency: @fluentui/react-button ^9.0.0-alpha
 import { CalendarMonth24Regular } from '@fluentui/react-icons';
 
 export const Circular = () => (

packages/react-button/src/components/Button/ButtonDefault.stories.tsx

@@ -1,7 +1,5 @@
 import * as React from 'react';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore - add link to this comment please  (see https://github.com/microsoft/fluentui/pull/18695)
-import { Button, ButtonProps } from '@fluentui/react-button';
+import { Button, ButtonProps } from '../../Button'; // codesandbox-dependency: @fluentui/react-button ^9.0.0-alpha
 
 export const Default = (props: ButtonProps) => (
   <div style={{ display: 'flex', justifyContent: 'space-evenly' }}>

packages/react-button/src/components/Button/ButtonDisabled.stories.tsx

@@ -1,8 +1,5 @@
 import * as React from 'react';
-
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore - add link to this comment please  (see https://github.com/microsoft/fluentui/pull/18695)
-import { Button } from '@fluentui/react-button';
+import { Button } from '../../Button'; // codesandbox-dependency: @fluentui/react-button ^9.0.0-alpha
 import { CalendarMonth24Regular } from '@fluentui/react-icons';
 import { makeStyles } from '@fluentui/react-make-styles';
 
@@ -43,6 +40,8 @@ Disabled.parameters = {
               the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.`,
     },
     source: {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
       code: __STORY__,
     },
   },

packages/react-button/src/components/Button/ButtonEmphasis.stories.tsx

@@ -1,8 +1,5 @@
 import * as React from 'react';
-
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore - add link to this comment please  (see https://github.com/microsoft/fluentui/pull/18695)
-import { Button } from '@fluentui/react-button';
+import { Button } from '../../Button'; // codesandbox-dependency: @fluentui/react-button ^9.0.0-alpha
 
 export const Emphasis = () => (
   <div style={{ display: 'flex', justifyContent: 'space-evenly' }}>

packages/react-button/src/components/Button/ButtonSize.stories.tsx

@@ -1,8 +1,5 @@
 import * as React from 'react';
-
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore - add link to this comment please  (see https://github.com/microsoft/fluentui/pull/18695)
-import { Button } from '@fluentui/react-button';
+import { Button } from '../../Button'; // codesandbox-dependency: @fluentui/react-button ^9.0.0-alpha
 import { CalendarMonth24Regular } from '@fluentui/react-icons';
 import { makeStyles } from '@fluentui/react-make-styles';
 
@@ -46,6 +43,8 @@ Size.parameters = {
       story: 'A button supports `small`, `medium` and `large` size. Default size is `medium`.',
     },
     source: {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
       code: __STORY__,
     },
   },

packages/react-button/src/components/Button/ButtonWithIcon.stories.tsx

@@ -1,8 +1,5 @@
 import * as React from 'react';
-
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore - add link to this comment please  (see https://github.com/microsoft/fluentui/pull/18695)
-import { Button } from '@fluentui/react-button';
+import { Button } from '../../Button'; // codesandbox-dependency: @fluentui/react-button ^9.0.0-alpha
 import { CalendarMonth24Regular } from '@fluentui/react-icons';
 
 export const WithIcon = () => (

packages/react-button/src/components/Button/ButtonWithLongText.stories.tsx

@@ -1,8 +1,5 @@
 import * as React from 'react';
-
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore - add link to this comment please  (see https://github.com/microsoft/fluentui/pull/18695)
-import { Button } from '@fluentui/react-button';
+import { Button } from '../../Button'; // codesandbox-dependency: @fluentui/react-button ^9.0.0-alpha
 
 export const WithLongText = () => (
   <div style={{ display: 'flex', justifyContent: 'space-evenly' }}>

packages/react-menu/src/stories/MenuMemoizedMenuItems.stories.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import {
+  Menu,
+  MenuTrigger,
+  MenuList,
+  MenuItemCheckbox,
+  MenuPopover,
+  MenuItemCheckboxProps,
+  // https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+} from '@fluentui/react-menu'; // codesandbox-dependecy: @fluentui/react-button ^9.0.0-alpha
+
+// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { Button } from '@fluentui/react-button';
+import { Edit20Regular as EditIcon } from '@fluentui/react-icons';
+
+const MemoCheckbox = React.memo((props: MenuItemCheckboxProps) => {
+  // use icons in the memo because JSX will always create a new object
+  // possible to memoize icons but it can be overkill
+  return (
+    <MenuItemCheckbox icon={<EditIcon />} name={props.name} value={props.value}>
+      {props.children}
+    </MenuItemCheckbox>
+  );
+});
+
+export const MemoizedMenuItems = () => {
+  return (
+    <Menu>
+      <MenuTrigger>
+        <Button>Toggle menu</Button>
+      </MenuTrigger>
+      <MenuPopover>
+        <MenuList>
+          <MemoCheckbox name="font" value="segoe">
+            Segoe
+          </MemoCheckbox>
+          <MemoCheckbox name="font" value="calibri">
+            Calibri
+          </MemoCheckbox>
+          <MemoCheckbox name="font" value="arial">
+            Arial
+          </MemoCheckbox>
+        </MenuList>
+      </MenuPopover>
+    </Menu>
+  );
+};
+
+MemoizedMenuItems.parameters = {
+  docs: {
+    description: {
+      story: [
+        '⚠️ _Reredering menu items is a cheap operation and React philosophy encourages rerenders._',
+        '_Memoization is not free, so use it only when there are concrete benefits to doing so._',
+        '',
+        'Memoized menu items can be created using [React.memo](https://reactjs.org/docs/react-api.html#reactmemo)',
+        'to optimize rerenders of menu items if their props have not changed. Can be useful for selectable items,',
+        'since each selection will rerender all items in the menu by default.',
+      ].join('\n'),
+    },
+  },
+};

yarn.lock

@@ -23476,10 +23476,10 @@ store2@^2.12.0:
   resolved "https://registry.yarnpkg.com/store2/-/store2-2.12.0.tgz#e1f1b7e1a59b6083b2596a8d067f6ee88fd4d3cf"
   integrity sha512-7t+/wpKLanLzSnQPX8WAcuLCCeuSHoWdQuh9SB3xD0kNOM38DNf+0Oa+wmvxmYueRzkmh6IcdKFtvTa+ecgPDw==
 
-storybook-addon-export-to-codesandbox@0.2.3:
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/storybook-addon-export-to-codesandbox/-/storybook-addon-export-to-codesandbox-0.2.3.tgz#dfdb3c04033ab9b220285f26fd462ee2603efe3d"
-  integrity sha512-I6lk+HGmx4wLbfH7lKnBWWgXqkhQ7F/wTZ2EdkwT7kuM+W2ZCqBPpBX4nqQzKuG2tqnH8NTu+f5CsrJtOtZdCw==
+storybook-addon-export-to-codesandbox@0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/storybook-addon-export-to-codesandbox/-/storybook-addon-export-to-codesandbox-0.3.1.tgz#b3b3f1bcf9558a7bd6442c900ebb3fb84f87289e"
+  integrity sha512-tikl8QKWscQJgVC+eAz4XzrhXpb96ZrpllIrG/ZvbJRIXggwJQYbD8pn1ZQxSMYWKoyGSe5XGBYFo29gF6Sg9A==
   dependencies:
     codesandbox-import-utils "^2.2.3"