Upgrading react-file-type-icons package for v9

apps/public-docsite-v9/package.json

@@ -27,6 +27,7 @@
     "@fluentui/react-northstar": "*",
     "@fluentui/react-icons-northstar": "*",
     "@fluentui/react-components": "*",
+    "@fluentui/react-file-type-icons": "*",
     "@fluentui/react-storybook-addon": "*",
     "@fluentui/react-storybook-addon-export-to-sandbox": "*",
     "@fluentui/theme-designer": "*",

apps/public-docsite/src/pages/Styles/FileTypeIconsPage/docs/web/FileTypeIconsImplementation.md

@@ -1,4 +1,4 @@
-The most durable and future-proof way to get the right icon for a file or item is to use the [react-file-type-icons package](https://github.com/microsoft/fluentui/tree/master/packages/react-file-type-icons) from Fluent UI (`@fluentui/react-file-type-icons` on npm).
+The most durable and future-proof way to get the right icon for a file or item is to use the [react-file-type-icons package](https://github.com/microsoft/fluentui/tree/master/packages/react-components/react-file-type-icons/library) from Fluent UI (`@fluentui/react-file-type-icons` on npm).
 
 The following code shows you how to specify a file type icon by extension, item type, icon size, and image type using the `@fluentui/react-file-type-icons` package along with Fluent UI's `<Icon>` component:
 
@@ -19,8 +19,8 @@ When specifying `size`, stick to these default sizes so the images appear as int
 
 #### References
 
-Here's a [simple demo](https://github.com/microsoft/fluentui/blob/master/packages/react-examples/src/react-experiments/FileTypeIcon/FileTypeIcon.Basic.Example.tsx) of how to use the [`@fluentui/react-file-type-icons` package](https://github.com/microsoft/fluentui/tree/master/packages/react-file-type-icons).  The code for the main method you'll use ([`getFileTypeIconProps`](https://github.com/microsoft/fluentui/blob/master/packages/react-file-type-icons/src/getFileTypeIconProps.ts)) is also well-commented. The icons are kept up-to-date on Fluent UI's CDN, so we recommend not copying or referencing these assets directly.
+Here's a [simple demo](https://github.com/microsoft/fluentui/blob/master/packages/react-examples/src/react-experiments/FileTypeIcon/FileTypeIcon.Basic.Example.tsx) of how to use the [`@fluentui/react-file-type-icons` package](https://github.com/microsoft/fluentui/tree/master/packages/react-components/react-file-type-icons/library).  The code for the main method you'll use ([`getFileTypeIconProps`](https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-file-type-icons/library/src/getFileTypeIconProps.ts)) is also well-commented. The icons are kept up-to-date on Fluent UI's CDN, so we recommend not copying or referencing these assets directly.
 
-#### Map icons to extensions - [TypeScript mapping file](https://github.com/microsoft/fluentui/blob/master/packages/react-file-type-icons/src/FileTypeIconMap.ts)
+#### Map icons to extensions - [TypeScript mapping file](https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-file-type-icons/library/src/FileTypeIconMap.ts)
 
-This file maps file extensions to the right PNG or SVG icon. The mapping minimizes the number of required icons while maximizing the number of files that get a non-generic icon. Support for non-file system objects which may not have file extensions can be added in [getFileTypeIconProps.ts](https://github.com/microsoft/fluentui/blob/master/packages/react-file-type-icons/src/getFileTypeIconProps.ts) and [FileIconType.ts](https://github.com/microsoft/fluentui/blob/master/packages/react-file-type-icons/src/FileIconType.ts).
+This file maps file extensions to the right PNG or SVG icon. The mapping minimizes the number of required icons while maximizing the number of files that get a non-generic icon. Support for non-file system objects which may not have file extensions can be added in [getFileTypeIconProps.ts](https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-file-type-icons/library/src/getFileTypeIconProps.ts) and [FileIconType.ts](https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-file-type-icons/library/src/FileIconType.ts).

apps/vr-tests-react-components/package.json

@@ -75,6 +75,7 @@
     "@fluentui/react-teaching-popover": "*",
     "@fluentui/react-tag-picker": "*",
     "@fluentui/react-carousel": "*",
+    "@fluentui/react-file-type-icons": "*",
     "@fluentui/react-list": "*",
     "@fluentui/react-color-picker": "*",
     "@fluentui/react-nav": "*"

apps/vr-tests-react-components/src/stories/FileTypeIcon/FileTypeIcon.stories.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react-webpack5';
+import { Steps } from 'storywright';
+import type { StoryParameters } from 'storywright';
+import { FileIconType, FileTypeIcon } from '@fluentui/react-file-type-icons';
+import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, TestWrapperDecorator } from '../../utilities';
+
+export default {
+  title: 'FileTypeIcon',
+  component: FileTypeIcon,
+  decorators: [TestWrapperDecorator],
+  parameters: {
+    storyWright: {
+      steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end(),
+    },
+  } satisfies StoryParameters,
+} satisfies Meta<typeof FileTypeIcon>;
+
+export const Default = () => (
+  <div>
+    <FileTypeIcon extension="docx" />
+    <FileTypeIcon extension="xlsx" size={20} />
+    <FileTypeIcon extension="pptx" size={24} />
+    <FileTypeIcon type={FileIconType.folder} size={32} imageFileType="png" />
+    <FileTypeIcon extension="unknown" size={40} />
+  </div>
+);
+Default.storyName = 'default';
+
+export const DefaultHighContrast = getStoryVariant(Default, HIGH_CONTRAST);
+
+export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE);

change/@fluentui-babel-preset-storybook-full-source-443e9121-6ba8-4f1e-a657-36bae8b67e43.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Minor refactor of modifyImports/fullsource helpers carried on this branch from an earlier dev session; no published runtime changes.",
+  "packageName": "@fluentui/babel-preset-storybook-full-source",
+  "email": "caperez@microsoft.com",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-file-type-icons-8ed04cc5-3dd7-452c-a5a2-c18c9ca7638a.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Move @fluentui/react-file-type-icons under react-components and ship as 9.0.0 (same npm name, major bump - v8 consumers must opt in). Adds the FileTypeIcon v9 component while preserving the v8 utility surface (initializeFileTypeIcons, getFileTypeIconProps, getFileTypeIconAsHTMLString, getFileTypeIconAsUrl, FileIconType, FileTypeIconMap). Behavior notes: initializeFileTypeIcons now honors its options.disableWarnings flag (warns on duplicate icon registration unless suppressed) but overwrites existing entries rather than skipping them; getFileTypeIconSuffix is SSR-safe and falls back to a 1x device pixel ratio when window is absent instead of throwing; icons are still written to globalThis.__globalSettings__.icons with the same record shape, preserving interop with v8 @fluentui/react <Icon>; src/version.ts is removed (no setVersion call), so the v8 duplicate-package warning will not fire if 8.x and 9.x copies are bundled together.",
+  "packageName": "@fluentui/react-file-type-icons",
+  "email": "caperez@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-headless-components-preview-782ee96a-e8c3-404e-94c9-923f0faca775.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "This branch showed lint problems when merged an unrelated commit, submitting with linter fix to ensure the GH Actions pass.",
+  "packageName": "@fluentui/react-headless-components-preview",
+  "email": "caperez@microsoft.com",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-shared-contexts-filetypeicon-stylehook.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Add FileTypeIcon custom style hook key",
+  "packageName": "@fluentui/react-shared-contexts",
+  "email": "caperez@microsoft.com",
+  "dependentChangeType": "patch"
+}

nx.json

@@ -187,8 +187,7 @@
         "packages/utilities/**",
         "packages/react-icons-mdl2/**",
         "packages/react-monaco-editor/**",
-        "packages/react-docsite-components/**",
-        "packages/react-file-type-icons/**"
+        "packages/react-docsite-components/**"
       ]
     }
   ],

packages/react-components/babel-preset-storybook-full-source/src/modifyImports.ts

@@ -17,7 +17,7 @@ export const PLUGIN_NAME = 'storybook-stories-modifyImports';
  */
 export function modifyImportsPlugin(babel: typeof Babel, options: BabelPluginOptions): Babel.PluginObj<PluginState> {
   const { types: t } = babel;
-  const { importMappings } = options;
+  const importMappings = options.importMappings ?? {};
   const cssModulesEnabled = Boolean(options.cssModules);
 
   return {

packages/react-components/react-file-type-icons/library/.swcrc

@@ -0,0 +1,30 @@
+{
+  "$schema": "https://json.schemastore.org/swcrc",
+  "exclude": [
+    "/testing",
+    "/**/*.cy.ts",
+    "/**/*.cy.tsx",
+    "/**/*.spec.ts",
+    "/**/*.spec.tsx",
+    "/**/*.test.ts",
+    "/**/*.test.tsx"
+  ],
+  "jsc": {
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true,
+      "decorators": false,
+      "dynamicImport": false
+    },
+    "externalHelpers": true,
+    "transform": {
+      "react": {
+        "runtime": "classic",
+        "useSpread": true
+      }
+    },
+    "target": "es2019"
+  },
+  "minify": false,
+  "sourceMaps": true
+}

packages/react-components/react-file-type-icons/library/README.md

@@ -0,0 +1,51 @@
+# @fluentui/react-file-type-icons
+
+**File type icons for [Fluent UI React](https://react.fluentui.dev/)**
+
+This package includes a collection of icons to represent file types.
+
+## Getting started
+
+If you are using the v8 `Icon` component or composing with icon-name utilities, you can make all file type icons available by calling the `initializeFileTypeIcons` function from the `@fluentui/react-file-type-icons` package:
+
+```tsx
+import { initializeFileTypeIcons } from '@fluentui/react-file-type-icons';
+
+// Register icons and load assets from the default Microsoft Fluent CDN:
+initializeFileTypeIcons();
+
+// Or register icons and load assets from a different CDN or folder path:
+initializeFileTypeIcons('https://my.cdn.com/path/to/icons/');
+```
+
+**NOTE:** Proceed carefully if you override the default CDN location, whose contents may not match the registered file type icons and supported extensions. Do not use the `item-types-fluent` icon set that was previously uploaded to the Fluent CDN; it's deprecated.
+
+## Usage in code
+
+If you are using Fluent UI React, you can use the `Icon` component and pass in the corresponding icon properties to render a given icon.
+
+```tsx
+import { Icon } from '@fluentui/react/lib/Icon';
+import { getFileTypeIconProps } from '@fluentui/react-file-type-icons';
+
+<Icon {...getFileTypeIconProps({ extension: 'docx', size: 16 })} />;
+```
+
+## FileTypeIcon component
+
+`@fluentui/react-file-type-icons` is a Fluent UI React v9 package under the `react-components` package model. It also keeps the existing utility APIs for scenarios that still compose file icons manually.
+
+This package also exports a `FileTypeIcon` React component that can be used directly without separately composing icon props or calling `initializeFileTypeIcons`.
+
+```tsx
+import { FileTypeIcon, FileIconType } from '@fluentui/react-file-type-icons';
+
+<FileTypeIcon extension="docx" size={20} />;
+<FileTypeIcon type={FileIconType.folder} imageFileType="png" size={32} />;
+```
+
+`FileTypeIcon` resolves icons through the same shared extension/type logic as `getFileTypeIconProps` to keep utility and component-based usage in sync.
+
+## Notes
+
+See [GitHub](https://github.com/microsoft/fluentui) for more details on the Fluent UI React project and packages within.

packages/react-components/react-file-type-icons/library/config/api-extractor.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
+  "extends": "@fluentui/scripts-api-extractor/api-extractor.common.v-next.json",
+  "mainEntryPointFilePath": "<projectRoot>/../../../../../../dist/out-tsc/types/packages/react-components/<unscopedPackageName>/library/src/index.d.ts"
+}

packages/react-components/react-file-type-icons/library/config/tests.js

@@ -0,0 +1 @@
+/** Jest test setup file. */

packages/react-components/react-file-type-icons/library/etc/react-file-type-icons.api.md

@@ -0,0 +1,148 @@
+## API Report File for "@fluentui/react-file-type-icons"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { JSXElement } from '@fluentui/react-utilities';
+import * as React_2 from 'react';
+import type { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+
+// @public
+export enum FileIconType {
+    // (undocumented)
+    album = 21,// Start at 1 so it will evaluate as "truthy"
+    // (undocumented)
+    campaign = 23,
+    // (undocumented)
+    desktopFolder = 9,
+    // (undocumented)
+    docset = 1,
+    // (undocumented)
+    documentsFolder = 10,
+    // (undocumented)
+    folder = 2,
+    // (undocumented)
+    form = 14,
+    // (undocumented)
+    genericFile = 3,
+    // (undocumented)
+    linkedFolder = 12,
+    // (undocumented)
+    list = 13,
+    // (undocumented)
+    listForm = 22,
+    // (undocumented)
+    listItem = 4,
+    // (undocumented)
+    loopworkspace = 17,
+    // (undocumented)
+    multiple = 6,
+    // (undocumented)
+    news = 8,
+    // (undocumented)
+    picturesFolder = 11,
+    // (undocumented)
+    planner = 18,
+    // (undocumented)
+    playlist = 16,
+    // (undocumented)
+    portfolio = 20,
+    // (undocumented)
+    sharedFolder = 5,
+    // (undocumented)
+    shortcutsdefaultfolder = 24,
+    // (undocumented)
+    stream = 7,
+    // (undocumented)
+    sway = 15,
+    // (undocumented)
+    todoItem = 19
+}
+
+// @public
+export const FileTypeIcon: ForwardRefComponent<FileTypeIconProps>;
+
+// @public (undocumented)
+export const fileTypeIconClassNames: SlotClassNames<FileTypeIconSlots>;
+
+// @public
+export const FileTypeIconMap: {
+    [key: string]: {
+        extensions?: string[];
+        types?: FileIconType[];
+    };
+};
+
+// @public (undocumented)
+export type FileTypeIconProps = Omit<ComponentProps<FileTypeIconSlots>, 'src'> & IFileTypeIconOptions & {
+    baseUrl?: string;
+};
+
+// @public (undocumented)
+export type FileTypeIconSize = 16 | 20 | 24 | 32 | 40 | 48 | 64 | 96;
+
+// @public (undocumented)
+export type FileTypeIconSlots = {
+    root: Slot<'img'>;
+};
+
+// @public (undocumented)
+export type FileTypeIconState = ComponentState<FileTypeIconSlots> & Required<Pick<IFileTypeIconOptions, 'size' | 'imageFileType'>> & {
+    baseUrl?: string;
+    iconName: string;
+    src?: string;
+    extension?: string;
+    type?: IFileTypeIconOptions['type'];
+};
+
+// @public
+export function getFileTypeIconAsHTMLString(options: IFileTypeIconOptions, baseUrl?: string): string | undefined;
+
+// @public
+export function getFileTypeIconAsUrl(options: IFileTypeIconOptions, baseUrl?: string): string | undefined;
+
+// @public
+export function getFileTypeIconProps(options: IFileTypeIconOptions): {
+    iconName: string;
+    'aria-label'?: string;
+};
+
+// @public (undocumented)
+export interface IFileTypeIconOptions {
+    extension?: string;
+    imageFileType?: ImageFileType;
+    size?: FileTypeIconSize;
+    type?: FileIconTypeInput;
+}
+
+// @public (undocumented)
+export interface IIconOptions {
+    // (undocumented)
+    disableWarnings: boolean;
+    // (undocumented)
+    warnOnMissingIcons?: boolean;
+}
+
+// @public (undocumented)
+export type ImageFileType = 'svg' | 'png';
+
+// @public (undocumented)
+export function initializeFileTypeIcons(baseUrl?: string, options?: Partial<IIconOptions>): void;
+
+// @public
+export const renderFileTypeIcon_unstable: (state: FileTypeIconState) => JSXElement;
+
+// @public
+export const useFileTypeIcon_unstable: (props: FileTypeIconProps, ref: React_2.Ref<HTMLImageElement>) => FileTypeIconState;
+
+// @public (undocumented)
+export const useFileTypeIconStyles_unstable: (state: FileTypeIconState) => FileTypeIconState;
+
+// (No @packageDocumentation comment for this package)
+
+```

packages/react-components/react-file-type-icons/library/jest.config.js

@@ -0,0 +1,25 @@
+// @ts-check
+/* eslint-disable */
+
+const { readFileSync } = require('node:fs');
+const { join } = require('node:path');
+
+const { exclude: _, ...swcJestConfig } = JSON.parse(readFileSync(join(__dirname, '.swcrc'), 'utf-8'));
+
+if (swcJestConfig.swcrc === undefined) {
+  swcJestConfig.swcrc = false;
+}
+
+/**
+ * @type {import('@jest/types').Config.InitialOptions}
+ */
+module.exports = {
+  displayName: 'react-file-type-icons',
+  preset: '../../../../jest.preset.js',
+  transform: {
+    '^.+\\.tsx?$': ['@swc/jest', swcJestConfig],
+  },
+  coverageDirectory: './coverage',
+  setupFilesAfterEnv: ['./config/tests.js'],
+  snapshotSerializers: ['@griffel/jest-serializer'],
+};