chore: use consistent react imports (microsoft#33252)

Co-authored-by: Makoto Morimoto <[email protected]>

apps/public-docsite-v9/src/DocsComponents/Toc.stories.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { addons } from '@storybook/preview-api';
 import { NAVIGATE_URL } from '@storybook/core-events';
 import { makeStyles, shorthands } from '@fluentui/react-components';
-import { useRef } from 'react';
 
 const useTocStyles = makeStyles({
   root: {
@@ -76,7 +75,7 @@ export const nameToHash = (id: string): string => id.toLowerCase().replace(/[^a-
 
 export const Toc = ({ stories }: { stories: TocItem[] }) => {
   const [selected, setSelected] = React.useState('');
-  const isNavigating = useRef<boolean>(false);
+  const isNavigating = React.useRef<boolean>(false);
 
   React.useEffect(() => {
     const observer = new IntersectionObserver(

change/@fluentui-eslint-plugin-5535c284-c43b-4aea-b042-e65f35562234.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: add no-restricted-syntax to react-config",
+  "packageName": "@fluentui/eslint-plugin",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-a6931a0a-6013-4e7e-bb1f-8338780c26ce.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: use consistent react imports",
+  "packageName": "@fluentui/react",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-carousel-2fd060d4-8927-4fad-ac77-a4d9a961edef.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: use consistent react imports",
+  "packageName": "@fluentui/react-carousel",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-charting-ec2f6a08-d76d-4ef7-9d0c-902d16c9c171.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: use consistent react imports",
+  "packageName": "@fluentui/react-charting",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-combobox-ff8d2861-0f7d-4585-ad62-d2f17cde044c.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: use consistent react imports",
+  "packageName": "@fluentui/react-combobox",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-dialog-9a14536f-d842-45ec-8829-803453bf5434.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: use consistent react imports",
+  "packageName": "@fluentui/react-dialog",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-docsite-components-aaa579b0-c92a-409e-88b4-c1d46871567e.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: use consistent react imports",
+  "packageName": "@fluentui/react-docsite-components",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-drawer-43898d04-c900-4b23-ba4c-1e03c79abd72.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: update api.md",
+  "packageName": "@fluentui/react-drawer",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-experiments-78ab636a-fd56-490e-8a7b-66b6da7a6aff.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: use consistent react imports",
+  "packageName": "@fluentui/react-experiments",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-hooks-898a9021-d91b-4dd9-a74f-1455fb9dd6b4.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: use consistent react imports",
+  "packageName": "@fluentui/react-hooks",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-tabster-c49cfa54-598a-4f4f-a244-d3c84178285a.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: use consistent react imports",
+  "packageName": "@fluentui/react-tabster",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-teaching-popover-b354d501-3075-4470-92bc-e1d972ad5a2c.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: use consistent react imports",
+  "packageName": "@fluentui/react-teaching-popover",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-text-4680d44c-8f58-46d0-84b4-f8283683e6cb.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: use consistent react imports",
+  "packageName": "@fluentui/react-text",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-utilities-16671646-05ef-4d07-81e0-d717c15d351b.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: use consistent react imports",
+  "packageName": "@fluentui/react-utilities",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-virtualizer-14fe38c6-aec9-4600-af3a-a645b1d1e147.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: use consistent react imports",
+  "packageName": "@fluentui/react-virtualizer",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

packages/charts/react-charting/etc/react-charting.api.md

@@ -24,7 +24,6 @@ import { SankeyLink } from 'd3-sankey';
 import { SankeyNode } from 'd3-sankey';
 import { ScaleBand } from 'd3-scale';
 import { ScaleLinear } from 'd3-scale';
-import { SVGProps } from 'react';
 import { TimeLocaleDefinition } from 'd3-time-format';
 
 // @public
@@ -400,8 +399,8 @@ export interface IChartProps {
     chartTitle?: string;
     chartTitleAccessibilityData?: IAccessibilityProps;
     lineChartData?: ILineChartPoints[];
-    pointLineOptions?: SVGProps<SVGLineElement>;
-    pointOptions?: SVGProps<SVGCircleElement>;
+    pointLineOptions?: React_2.SVGProps<SVGLineElement>;
+    pointOptions?: React_2.SVGProps<SVGCircleElement>;
     SankeyChartData?: ISankeyChartData;
 }
 
@@ -933,7 +932,7 @@ export interface ILineChartGap {
 }
 
 // @public (undocumented)
-export interface ILineChartLineOptions extends SVGProps<SVGPathElement> {
+export interface ILineChartLineOptions extends React_2.SVGProps<SVGPathElement> {
     lineBorderColor?: string;
     lineBorderWidth?: string | number;
     strokeDasharray?: string | number;

packages/charts/react-charting/src/components/CommonComponents/CartesianChart.base.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { lazy } from 'react';
 import { IProcessedStyleSet } from '@fluentui/react/lib/Styling';
 import { classNamesFunction, getId, getRTL } from '@fluentui/react/lib/Utilities';
 import { Callout } from '@fluentui/react/lib/Callout';
@@ -34,7 +33,7 @@ import { LegendShape, Shape } from '../Legends/index';
 import { SVGTooltipText } from '../../utilities/SVGTooltipText';
 
 const getClassNames = classNamesFunction<ICartesianChartStyleProps, ICartesianChartStyles>();
-const ChartHoverCard = lazy(() =>
+const ChartHoverCard = React.lazy(() =>
   import('../../utilities/ChartHoverCard/ChartHoverCard').then(module => ({ default: module.ChartHoverCard })),
 );
 

packages/charts/react-charting/src/types/IDataPoint.ts

@@ -1,5 +1,5 @@
+import * as React from 'react';
 import { SankeyLink, SankeyNode } from 'd3-sankey';
-import { SVGProps } from 'react';
 import { LegendShape } from '../components/Legends/Legends.types';
 
 export interface IBasestate {
@@ -361,7 +361,7 @@ export interface ILineChartGap {
 /**
  * {@docCategory IChartProps}
  */
-export interface ILineChartLineOptions extends SVGProps<SVGPathElement> {
+export interface ILineChartLineOptions extends React.SVGProps<SVGPathElement> {
   /**
    * Width of the line/stroke.
    * Overrides the strokeWidth set on ICartesianChartProps level.
@@ -491,12 +491,12 @@ export interface IChartProps {
   /**
    * data for the points in the line chart
    */
-  pointOptions?: SVGProps<SVGCircleElement>;
+  pointOptions?: React.SVGProps<SVGCircleElement>;
 
   /**
    * data for the dotted line on hovering the point
    */
-  pointLineOptions?: SVGProps<SVGLineElement>;
+  pointLineOptions?: React.SVGProps<SVGLineElement>;
 }
 
 /**

packages/eslint-plugin/src/configs/react-config.js

@@ -21,6 +21,16 @@ module.exports = {
     ],
   },
   rules: {
+    /**
+     * Enforce consistent importing from React by resticting named imports.
+     */
+    'no-restricted-syntax': [
+      'error',
+      {
+        selector: "ImportDeclaration[source.value='react'] ImportSpecifier",
+        message: "Avoid named imports from 'react'. Use 'import * as React from \"react\"' instead.",
+      },
+    ],
     /**
      * griffel eslint rules
      * @see https://github.com/microsoft/griffel/tree/main/packages/eslint-plugin

packages/react-components/react-carousel/library/src/components/CarouselButton/useCarouselButton.tsx

@@ -14,7 +14,6 @@ import { useCarouselContext_unstable as useCarouselContext } from '../CarouselCo
 import type { CarouselButtonProps, CarouselButtonState } from './CarouselButton.types';
 import type { CarouselUpdateData } from '../Carousel/Carousel.types';
 import { carouselButtonClassNames } from './useCarouselButtonStyles.styles';
-import { useRef } from 'react';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 
 /**
@@ -36,7 +35,7 @@ export const useCarouselButton_unstable = (
   const [totalSlides, setTotalSlides] = React.useState(0);
 
   const { dir } = useFluent();
-  const buttonRef = useRef<HTMLButtonElement>();
+  const buttonRef = React.useRef<HTMLButtonElement>();
   const circular = useCarouselContext(ctx => ctx.circular);
   const containerRef = useCarouselContext(ctx => ctx.containerRef);
   const selectPageByDirection = useCarouselContext(ctx => ctx.selectPageByDirection);

packages/react-components/react-combobox/library/src/utils/useSelection.ts

@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import * as React from 'react';
 import { useControllableState } from '@fluentui/react-utilities';
 import { OptionValue } from './OptionCollection.types';
 import { SelectionEvents, SelectionProps, SelectionState } from './Selection.types';
@@ -12,7 +12,7 @@ export const useSelection = (props: SelectionProps): SelectionState => {
     initialState: [],
   });
 
-  const selectOption = useCallback(
+  const selectOption = React.useCallback(
     (event: SelectionEvents, option: OptionValue) => {
       // if the option is disabled, do nothing
       if (option.disabled) {

packages/react-components/react-dialog/library/etc/react-dialog.api.md

@@ -15,7 +15,6 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { JSXElementConstructor } from 'react';
 import type { PortalProps } from '@fluentui/react-portal';
 import type { PresenceMotionSlotProps } from '@fluentui/react-motion';
-import { Provider } from 'react';
 import * as React_2 from 'react';
 import { ReactElement } from 'react';
 import type { Slot } from '@fluentui/react-utilities';
@@ -169,7 +168,7 @@ export type DialogSurfaceElement = HTMLElement;
 export type DialogSurfaceProps = ComponentProps<Partial<DialogSurfaceSlots>> & Pick<PortalProps, 'mountNode'>;
 
 // @public (undocumented)
-export const DialogSurfaceProvider: Provider<boolean | undefined>;
+export const DialogSurfaceProvider: React_2.Provider<boolean | undefined>;
 
 // @public (undocumented)
 export type DialogSurfaceSlots = {

packages/react-components/react-dialog/library/src/contexts/dialogSurfaceContext.ts

@@ -1,11 +1,11 @@
-import { createContext, useContext } from 'react';
+import * as React from 'react';
 
 export type DialogSurfaceContextValue = boolean;
 
 const defaultContextValue: DialogSurfaceContextValue = false;
 
-export const DialogSurfaceContext = createContext<DialogSurfaceContextValue | undefined>(undefined);
+export const DialogSurfaceContext = React.createContext<DialogSurfaceContextValue | undefined>(undefined);
 
 export const DialogSurfaceProvider = DialogSurfaceContext.Provider;
 
-export const useDialogSurfaceContext_unstable = () => useContext(DialogSurfaceContext) ?? defaultContextValue;
+export const useDialogSurfaceContext_unstable = () => React.useContext(DialogSurfaceContext) ?? defaultContextValue;

packages/react-components/react-dialog/library/src/utils/useDisableBodyScroll.ts

@@ -1,5 +1,5 @@
+import * as React from 'react';
 import { useFluent_unstable } from '@fluentui/react-shared-contexts';
-import { useCallback } from 'react';
 
 import { useBodyNoScrollStyles, useHTMLNoScrollStyles } from './useDisableBodyScroll.styles';
 
@@ -15,7 +15,7 @@ export function useDisableBodyScroll(): {
   const bodyNoScrollStyles = useBodyNoScrollStyles();
   const { targetDocument } = useFluent_unstable();
 
-  const disableBodyScroll = useCallback(() => {
+  const disableBodyScroll = React.useCallback(() => {
     if (!targetDocument) {
       return;
     }
@@ -31,7 +31,7 @@ export function useDisableBodyScroll(): {
     return;
   }, [targetDocument, htmlNoScrollStyles, bodyNoScrollStyles]);
 
-  const enableBodyScroll = useCallback(() => {
+  const enableBodyScroll = React.useCallback(() => {
     if (!targetDocument) {
       return;
     }

packages/react-components/react-drawer/library/etc/react-drawer.api.md

@@ -172,7 +172,7 @@ export type OverlayDrawerSlots = {
 
 // @public
 export type OverlayDrawerState = ComponentState<OverlayDrawerInternalSlots> & Required<DrawerBaseState> & Pick<OverlayDrawerProps, 'mountNode'> & {
-    hasMountNodeElement?: boolean;
+    hasMountNodeElement: boolean;
 };
 
 // @public

packages/react-components/react-positioning/src/middleware/matchTargetSize.test.ts

@@ -1,11 +1,11 @@
+import * as React from 'react';
 import type { MiddlewareArguments } from '@floating-ui/dom';
 import { matchTargetSize, matchTargetSizeCssVar } from './matchTargetSize';
-import { CSSProperties } from 'react';
 
 describe('matchTargetSize', () => {
   const middlewareFn = matchTargetSize().fn;
   const createElementMock = () => ({
-    style: { setProperty: jest.fn() } as CSSProperties & { setProperty: jest.Mock },
+    style: { setProperty: jest.fn() } as React.CSSProperties & { setProperty: jest.Mock },
   });
   it('should match reference width if not same', async () => {
     expect.assertions(3);

packages/react-components/react-table/stories/src/Table/ResizableColumnsControlled.stories.tsx

@@ -36,7 +36,6 @@ import {
   PeopleRegular,
 } from '@fluentui/react-icons';
 import * as React from 'react';
-import { useState } from 'react';
 
 const columnNames: { [key: TableColumnId]: string } = {
   file: 'File',
@@ -162,8 +161,8 @@ const items: Item[] = [
 ];
 
 export const ResizableColumnsControlled = () => {
-  const [columns, setColumns] = useState<TableColumnDefinition<Item>[]>(columnsDef);
-  const [columnSizingOptions, setColumnSizingOptions] = useState<TableColumnSizingOptions>({
+  const [columns, setColumns] = React.useState<TableColumnDefinition<Item>[]>(columnsDef);
+  const [columnSizingOptions, setColumnSizingOptions] = React.useState<TableColumnSizingOptions>({
     file: {
       idealWidth: 300,
       minWidth: 190,

packages/react-components/react-tabster/etc/react-tabster.api.md

@@ -20,7 +20,6 @@ import { MoverMemorizedElementEventName } from 'tabster';
 import { MoverMoveFocusEvent } from 'tabster';
 import { MoverMoveFocusEventName } from 'tabster';
 import * as React_2 from 'react';
-import type { RefObject } from 'react';
 import { TabsterMoveFocusEvent } from 'tabster';
 import { TabsterMoveFocusEventName } from 'tabster';
 import { Types } from 'tabster';
@@ -1486,7 +1485,7 @@ export function useFocusWithin<TElement extends HTMLElement = HTMLElement>(): Re
 export function useIsNavigatingWithKeyboard(): () => boolean;
 
 // @public
-export function useKeyboardNavAttribute<E extends HTMLElement>(): RefObject<E>;
+export function useKeyboardNavAttribute<E extends HTMLElement>(): React_2.RefObject<E>;
 
 // @internal
 export const useMergedTabsterAttributes_unstable: (...attributes: (Partial<Types.TabsterDOMAttribute> | null | undefined)[]) => Types.TabsterDOMAttribute;