style: apply prettier 2.8

apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/IconCatalog.tsx

@@ -43,7 +43,7 @@ const _mapping = rawMapping
     };
   })
   .filter(Boolean);
-const mapping = _mapping.filter(Boolean) as Array<NonNullable<typeof _mapping[number]>>;
+const mapping = _mapping.filter(Boolean) as Array<NonNullable<(typeof _mapping)[number]>>;
 
 const IconCatalogInner: React.FC = () => {
   const styles = useStyles();

apps/stress-test/src/shared/css/RandomSelector.ts

@@ -11,7 +11,7 @@ export const defaultSelectorTypes = [
   'attribute-value',
 ] as const;
 
-type SelectorType = typeof defaultSelectorTypes[number];
+type SelectorType = (typeof defaultSelectorTypes)[number];
 
 type SelectorParams = {
   seed?: number;

packages/fluentui/docs/src/utils/systemColors.ts

@@ -9,6 +9,6 @@ export const systemColors = [
   'ButtonFace',
 ] as const;
 
-export const isSystemColor = (color: string): color is typeof systemColors[number] => {
-  return systemColors.includes(color as typeof systemColors[number]);
+export const isSystemColor = (color: string): color is (typeof systemColors)[number] => {
+  return systemColors.includes(color as (typeof systemColors)[number]);
 };

packages/merge-styles/src/Stylesheet.ts

@@ -17,7 +17,7 @@ export const InjectionMode = {
   appendChild: 2 as 2,
 };
 
-export type InjectionMode = typeof InjectionMode[keyof typeof InjectionMode];
+export type InjectionMode = (typeof InjectionMode)[keyof typeof InjectionMode];
 
 /**
  * CSP settings for the stylesheet

packages/react-components/react-combobox/stories/Combobox/ComboboxControlled.stories.tsx

@@ -23,7 +23,7 @@ export const Controlled = (props: Partial<ComboboxProps>) => {
   const [selectedOptions, setSelectedOptions] = React.useState<string[]>(['eatkins']);
   const [value, setValue] = React.useState('Elvia Atkins');
 
-  const onOptionSelect: typeof props['onOptionSelect'] = (ev, data) => {
+  const onOptionSelect: (typeof props)['onOptionSelect'] = (ev, data) => {
     setSelectedOptions(data.selectedOptions);
     setValue(data.optionText ?? '');
   };

packages/react-components/react-combobox/stories/Dropdown/DropdownControlled.stories.tsx

@@ -23,7 +23,7 @@ export const Controlled = (props: Partial<DropdownProps>) => {
   const [selectedOptions, setSelectedOptions] = React.useState<string[]>(['eatkins']);
   const [value, setValue] = React.useState('Elvia Atkins');
 
-  const onOptionSelect: typeof props['onOptionSelect'] = (ev, data) => {
+  const onOptionSelect: (typeof props)['onOptionSelect'] = (ev, data) => {
     setSelectedOptions(data.selectedOptions);
     setValue(data.optionText ?? '');
   };

packages/react-components/react-datepicker/src/components/CalendarYear/CalendarYear.tsx

@@ -194,7 +194,7 @@ const CalendarYearNavDirection = {
 };
 
 interface CalendarYearNavArrowProps extends CalendarYearHeaderProps {
-  direction: typeof CalendarYearNavDirection[keyof typeof CalendarYearNavDirection];
+  direction: (typeof CalendarYearNavDirection)[keyof typeof CalendarYearNavDirection];
 }
 
 const CalendarYearNavArrow: React.FunctionComponent<CalendarYearNavArrowProps> = props => {
@@ -385,7 +385,7 @@ const NavigationDirection = {
 
 function useYearRangeState({ selectedYear, navigatedYear }: CalendarYearProps) {
   const [fromYear, navigate] = React.useReducer(
-    (state: number, action: typeof NavigationDirection[keyof typeof NavigationDirection]): number => {
+    (state: number, action: (typeof NavigationDirection)[keyof typeof NavigationDirection]): number => {
       return state + (action === NavigationDirection.Next ? CELL_COUNT : -CELL_COUNT);
     },
     undefined,

packages/react-components/react-storybook-addon/src/theme.ts

@@ -18,7 +18,7 @@ export const themes = [
 
 export const defaultTheme = themes[0];
 
-export type ThemeIds = typeof themes[number]['id'];
-export type ThemeLabels = typeof themes[number]['label'];
+export type ThemeIds = (typeof themes)[number]['id'];
+export type ThemeLabels = (typeof themes)[number]['label'];
 
 export type { Theme };

packages/react-examples/src/react-experiments/Tile/Tile.Document.Example.tsx

@@ -41,7 +41,7 @@ const ITEMS: { name: string; activity: string }[] = [
 interface IDocumentTileWithThumbnailProps {
   originalImageSize: ISize;
   showForeground: boolean;
-  item: typeof ITEMS[0];
+  item: (typeof ITEMS)[0];
 }
 
 const DocumentTileWithThumbnail: React.FunctionComponent<IDocumentTileWithThumbnailProps> = (

packages/react-examples/src/react-experiments/Tile/Tile.Folder.Example.tsx

@@ -45,7 +45,7 @@ interface IFolderTileWithThumbnailProps {
   folderCoverType?: FolderCoverType;
   originalImageSize?: ISize;
   size: 'small' | 'large';
-  item: typeof ITEMS[0];
+  item: (typeof ITEMS)[0];
 }
 
 const FolderTileWithThumbnail: React.FunctionComponent<IFolderTileWithThumbnailProps> = (

packages/react-examples/src/react-experiments/Tile/Tile.Media.Example.tsx

@@ -105,7 +105,7 @@ interface IImageTileProps {
   nameplateOnlyOnHover: boolean;
   linkHref?: string;
   linkTarget?: string;
-  item: typeof ITEMS[0];
+  item: (typeof ITEMS)[0];
 }
 
 const ImageTile: React.FunctionComponent<IImageTileProps> = (props: IImageTileProps): JSX.Element => {

packages/react-experiments/src/components/Tile/Tile.tsx

@@ -36,7 +36,7 @@ export const TileLayoutValues = {
   foregroundMargin: 16 as 16,
 };
 
-export type TileLayoutValues = typeof TileLayoutValues[keyof typeof TileLayoutValues];
+export type TileLayoutValues = (typeof TileLayoutValues)[keyof typeof TileLayoutValues];
 
 export interface ITileState {
   isSelected?: boolean;

packages/react-focus/src/components/FocusZone/FocusZone.types.ts

@@ -289,7 +289,7 @@ export const FocusZoneTabbableElements = {
 /**
  * {@docCategory FocusZone}
  */
-export type FocusZoneTabbableElements = typeof FocusZoneTabbableElements[keyof typeof FocusZoneTabbableElements];
+export type FocusZoneTabbableElements = (typeof FocusZoneTabbableElements)[keyof typeof FocusZoneTabbableElements];
 
 /**
  * {@docCategory FocusZone}

packages/react/src/common/DirectionalHint.ts

@@ -72,4 +72,4 @@ export const DirectionalHint = {
   rightBottomEdge: 13 as 13,
 };
 
-export type DirectionalHint = typeof DirectionalHint[keyof typeof DirectionalHint];
+export type DirectionalHint = (typeof DirectionalHint)[keyof typeof DirectionalHint];

packages/react/src/components/List/List.types.ts

@@ -27,7 +27,7 @@ export const ScrollToMode = {
 /**
  * {@docCategory List}
  */
-export type ScrollToMode = typeof ScrollToMode[keyof typeof ScrollToMode];
+export type ScrollToMode = (typeof ScrollToMode)[keyof typeof ScrollToMode];
 
 /**
  * Props passed to the render override for the list root.

packages/react/src/components/ScrollablePane/ScrollablePane.types.ts

@@ -117,7 +117,7 @@ export const ScrollbarVisibility = {
 /**
  * {@docCategory ScrollablePane}
  */
-export type ScrollbarVisibility = typeof ScrollbarVisibility[keyof typeof ScrollbarVisibility];
+export type ScrollbarVisibility = (typeof ScrollbarVisibility)[keyof typeof ScrollbarVisibility];
 
 export interface IScrollablePaneContext {
   scrollablePane?: {

packages/scheme-utilities/src/variantThemeType.ts

@@ -25,4 +25,4 @@ export const VariantThemeType = {
   Strong: 3 as 3,
 };
 
-export type VariantThemeType = typeof VariantThemeType[keyof typeof VariantThemeType];
+export type VariantThemeType = (typeof VariantThemeType)[keyof typeof VariantThemeType];

packages/tokens/src/types.ts

@@ -440,9 +440,9 @@ export type Brands = 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100 | 110 | 12
 
 export type BrandVariants = Record<Brands, string>;
 
-type StatusSharedColorNames = typeof statusSharedColorNames[number];
-type PersonaSharedColorNames = typeof personaSharedColorNames[number];
-type UnusedSharedColorNames = typeof unusedSharedColorNames[number];
+type StatusSharedColorNames = (typeof statusSharedColorNames)[number];
+type PersonaSharedColorNames = (typeof personaSharedColorNames)[number];
+type UnusedSharedColorNames = (typeof unusedSharedColorNames)[number];
 
 export type StatusSharedColors = Record<StatusSharedColorNames, ColorVariants>;
 export type PersonaSharedColors = Record<PersonaSharedColorNames, ColorVariants>;

rfcs/react-components/convergence/native-element-props.md

@@ -119,7 +119,8 @@ The `ComponentProps` type has a template parameter to specify the primary slot:
 ```ts
 export type ComponentProps<Shorthands, Primary extends keyof Shorthands = 'root'> =
   // Put the primary slot's props directly on the ComponentProps
-  Shorthands[Primary] & { // Add shorthand props for the other slots
+  Shorthands[Primary] & {
+    // Add shorthand props for the other slots
     [Key in Exclude<
       keyof Shorthands,
       // Exclude `root` only if it is the primary slot

scripts/generators/token-pipeline.ts

@@ -31,7 +31,7 @@ function getGeneratedFiles(tmpDir: string) {
   ];
 }
 
-function runPipeline(theme: typeof themes[number], pipelineDir: string, outDir: string) {
+function runPipeline(theme: (typeof themes)[number], pipelineDir: string, outDir: string) {
   console.log(`Running pipeline for ${theme} theme`);
 
   console.log(`Generate tokens for theme`);

scripts/github/src/pullRequests.ts

@@ -61,7 +61,7 @@ export function processPullRequestApiResponse(
     | RestEndpointMethodTypes['repos']['listPullRequestsAssociatedWithCommit']['response']['data'][number],
   authorEmail?: string,
 ): IPullRequest {
-  const user = pr.user as NonNullable<typeof pr['user']>;
+  const user = pr.user as NonNullable<(typeof pr)['user']>;
   return {
     // eslint-disable-next-line @typescript-eslint/naming-convention
     number: pr.number,

scripts/triage-bot/src/types.ts

@@ -5,8 +5,8 @@ export interface Api extends GithubScriptsParams {
   config: Schema;
 }
 export interface GithubScriptsParams {
-  context: typeof Github['context'];
-  github: ReturnType<typeof Github['getOctokit']>;
+  context: (typeof Github)['context'];
+  github: ReturnType<(typeof Github)['getOctokit']>;
   core: typeof Core;
 }
 

scripts/update-release-notes/pullRequests.ts

@@ -149,7 +149,7 @@ async function _addCommitInfo(prs: IPullRequest[]): Promise<IExtendedPullRequest
   return results;
 
   function dataWithAuthor(value: RestEndpointMethodTypes['pulls']['listCommits']['response']['data']) {
-    type Commit = typeof value[number];
+    type Commit = (typeof value)[number];
     type FilteredCommit = Omit<Commit, 'author'> & { author: NonNullable<Commit['author']> };
     return value.filter(commit => Boolean(commit.author)) as FilteredCommit[];
   }

tools/generators/migrate-converged-pkg/index.spec.ts

@@ -1209,7 +1209,7 @@ describe('migrate-converged-pkg generator', () => {
         acc[projectName] = readProjectConfiguration(tree, projectName);
 
         return acc;
-      }, {} as Record<typeof projects[number], ReadProjectConfiguration>);
+      }, {} as Record<(typeof projects)[number], ReadProjectConfiguration>);
 
       expect(configs['@proj/react-foo'].sourceRoot).toBeDefined();
       expect(configs['@proj/react-bar'].sourceRoot).toBeDefined();
@@ -1233,7 +1233,7 @@ describe('migrate-converged-pkg generator', () => {
         acc[projectName] = readProjectConfiguration(tree, projectName);
 
         return acc;
-      }, {} as Record<typeof projects[number], ReadProjectConfiguration>);
+      }, {} as Record<(typeof projects)[number], ReadProjectConfiguration>);
 
       expect(configs[projects[0]].sourceRoot).toBeDefined();
       expect(configs[projects[1]].sourceRoot).toBeDefined();

tools/generators/version-bump/index.ts

@@ -193,7 +193,7 @@ export const validbumpTypes = [
 ] as const;
 
 interface ValidatedSchema extends Required<Omit<VersionBumpGeneratorSchema, 'exclude'>> {
-  bumpType: typeof validbumpTypes[number];
+  bumpType: (typeof validbumpTypes)[number];
 
   exclude: string[];
 }