Moving a few packages to use type imports/exports (#19416)

* Adding updates for @fluentui/react, @fluentui/utilities, and @fluentui/style-utilities. * Change files * comment tweaks. * Fixing lint comment. * Fixing lint in ContextualMenu index file * lint fix. * Update packages/react/src/components/DetailsList/DetailsList.base.tsx Co-authored-by: Elizabeth Craig <[email protected]> * Fixes. * Fixing MarqueeSelection import Co-authored-by: Elizabeth Craig <[email protected]>
microsoft · Aug 18, 2021 · 3dbb57b · 3dbb57b
1 parent 6e53bbf
commit 3dbb57b
Show file tree

Hide file tree

Showing 706 changed files with 1,941 additions and 1,869 deletions.
diff --git a/change/@fluentui-react-ba8016c3-b08c-4f1d-a7fd-3fe38fa3d1c5.json b/change/@fluentui-react-ba8016c3-b08c-4f1d-a7fd-3fe38fa3d1c5.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Moving type-based imports/exports to use \"import type\" and \"export type\" to enable isolatedModules.",
+  "packageName": "@fluentui/react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-style-utilities-76196fa2-6fa6-4df0-b27b-bdaf4bc346f2.json b/change/@fluentui-style-utilities-76196fa2-6fa6-4df0-b27b-bdaf4bc346f2.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Moving type-based imports/exports to use \"import type\" and \"export type\" to enable isolatedModules.",
+  "packageName": "@fluentui/style-utilities",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-utilities-8811d00b-a073-4a20-af9a-a7765dc8a929.json b/change/@fluentui-utilities-8811d00b-a073-4a20-af9a-a7765dc8a929.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Moving type-based imports/exports to use \"import type\" and \"export type\" to enable isolatedModules.",
+  "packageName": "@fluentui/utilities",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react/etc/react.api.md b/packages/react/etc/react.api.md
@@ -10,16 +10,16 @@ import { EventGroup } from '@fluentui/utilities';
 import { FirstWeekOfYear } from '@fluentui/date-time-utilities';
 import { IBaseProps } from '@fluentui/utilities';
 import { ICalendarStrings } from '@fluentui/date-time-utilities';
-import { IComponent } from '@fluentui/foundation-legacy';
+import type { IComponent } from '@fluentui/foundation-legacy';
 import { IComponentAs } from '@fluentui/utilities';
-import { IComponentStyles } from '@fluentui/foundation-legacy';
-import { ICSSPixelUnitRule } from '@fluentui/merge-styles/lib/IRawStyleBase';
-import { ICSSRule } from '@fluentui/merge-styles/lib/IRawStyleBase';
+import type { IComponentStyles } from '@fluentui/foundation-legacy';
+import type { ICSSPixelUnitRule } from '@fluentui/merge-styles/lib/IRawStyleBase';
+import type { ICSSRule } from '@fluentui/merge-styles/lib/IRawStyleBase';
 import { IDateFormatting } from '@fluentui/date-time-utilities';
-import { IDayGridOptions } from '@fluentui/date-time-utilities';
+import type { IDayGridOptions } from '@fluentui/date-time-utilities';
 import { IFocusZoneProps } from '@fluentui/react-focus';
 import { IFontStyles } from '@fluentui/style-utilities';
-import { IHTMLSlot } from '@fluentui/foundation-legacy';
+import type { IHTMLSlot } from '@fluentui/foundation-legacy';
 import { IObjectWithKey } from '@fluentui/utilities';
 import { IPoint } from '@fluentui/utilities';
 import { IProcessedStyleSet } from '@fluentui/style-utilities';
@@ -30,25 +30,25 @@ import { IRenderComponent } from '@fluentui/utilities';
 import { IRenderFunction } from '@fluentui/utilities';
 import { ISelection } from '@fluentui/utilities';
 import { ISelectionOptions } from '@fluentui/utilities';
-import { ISlotProp } from '@fluentui/foundation-legacy';
-import { ISlottableProps } from '@fluentui/foundation-legacy';
+import type { ISlotProp } from '@fluentui/foundation-legacy';
+import type { ISlottableProps } from '@fluentui/foundation-legacy';
 import { IStyle } from '@fluentui/style-utilities';
-import { IStyleableComponentProps } from '@fluentui/foundation-legacy';
+import type { IStyleableComponentProps } from '@fluentui/foundation-legacy';
 import { IStyleFunction } from '@fluentui/utilities';
 import { IStyleFunctionOrObject } from '@fluentui/utilities';
 import { ITheme } from '@fluentui/style-utilities';
 import { KeyCodes } from '@fluentui/utilities';
-import { PartialTheme } from '@fluentui/theme';
+import type { PartialTheme } from '@fluentui/theme';
 import { Point } from '@fluentui/utilities';
 import * as React_2 from 'react';
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import { Rectangle } from '@fluentui/utilities';
 import { Selection as Selection_2 } from '@fluentui/utilities';
 import { SELECTION_CHANGE } from '@fluentui/utilities';
 import { SelectionDirection } from '@fluentui/utilities';
 import { SelectionMode as SelectionMode_2 } from '@fluentui/utilities';
-import { Target } from '@fluentui/react-hooks';
-import { Theme } from '@fluentui/theme';
+import type { Target } from '@fluentui/react-hooks';
+import type { Theme } from '@fluentui/theme';
 
 // @public (undocumented)
 export class ActionButton extends React_2.Component<IButtonProps, {}> {

diff --git a/packages/react/src/common/DocPage.types.ts b/packages/react/src/common/DocPage.types.ts
@@ -1,5 +1,5 @@
-import { IStyleFunctionOrObject } from '../Utilities';
-import { ITheme, IStyle } from '../Styling';
+import type { IStyleFunctionOrObject } from '../Utilities';
+import type { ITheme, IStyle } from '../Styling';
 
 export interface IExample {
   /** Title of the example */

diff --git a/packages/react/src/common/isConformant.ts b/packages/react/src/common/isConformant.ts
@@ -1,4 +1,5 @@
-import { isConformant as baseIsConformant, IsConformantOptions } from '@fluentui/react-conformance';
+import { isConformant as baseIsConformant } from '@fluentui/react-conformance';
+import type { IsConformantOptions } from '@fluentui/react-conformance';
 
 export function isConformant<TProps = {}>(
   testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },

diff --git a/packages/react/src/components/ActivityItem/ActivityItem.classNames.ts b/packages/react/src/components/ActivityItem/ActivityItem.classNames.ts
@@ -1,7 +1,7 @@
 import { mergeStyles } from '../../Styling';
 import { memoizeFunction } from '../../Utilities';
-import { IActivityItemStyles } from './ActivityItem.types';
-import { IPersonaProps } from '../../Persona';
+import type { IActivityItemStyles } from './ActivityItem.types';
+import type { IPersonaProps } from '../../Persona';
 
 export interface IActivityItemClassNames {
   root?: string;

diff --git a/packages/react/src/components/ActivityItem/ActivityItem.styles.ts b/packages/react/src/components/ActivityItem/ActivityItem.styles.ts
@@ -1,13 +1,13 @@
 import {
   concatStyleSets,
-  ITheme,
   getTheme,
   HighContrastSelector,
   keyframes,
   PulsingBeaconAnimationStyles,
 } from '../../Styling';
 import { memoizeFunction } from '../../Utilities';
-import { IActivityItemStyles, IActivityItemProps } from './ActivityItem.types';
+import type { ITheme } from '../../Styling';
+import type { IActivityItemStyles, IActivityItemProps } from './ActivityItem.types';
 
 const DEFAULT_PERSONA_SIZE = '32px';
 const COMPACT_PERSONA_SIZE = '16px';

diff --git a/packages/react/src/components/ActivityItem/ActivityItem.test.tsx b/packages/react/src/components/ActivityItem/ActivityItem.test.tsx
@@ -3,8 +3,8 @@ import * as renderer from 'react-test-renderer';
 import { TestImages } from '@fluentui/example-data';
 import { ActivityItem } from './ActivityItem';
 import { Icon } from '../../Icon';
-import { IPersonaSharedProps } from '../../Persona';
 import { isConformant } from '../../common/isConformant';
+import type { IPersonaSharedProps } from '../../Persona';
 
 const defaultProps = {
   key: 1,

diff --git a/packages/react/src/components/ActivityItem/ActivityItem.tsx b/packages/react/src/components/ActivityItem/ActivityItem.tsx
@@ -1,8 +1,10 @@
 import * as React from 'react';
-import { IActivityItemProps } from './ActivityItem.types';
-import { IActivityItemClassNames, getClassNames } from './ActivityItem.classNames';
+import { getClassNames } from './ActivityItem.classNames';
 import { getStyles } from './ActivityItem.styles';
-import { PersonaSize, PersonaCoin, IPersonaSharedProps, IPersonaCoinProps } from '../../Persona';
+import { PersonaSize, PersonaCoin } from '../../Persona';
+import type { IActivityItemProps } from './ActivityItem.types';
+import type { IActivityItemClassNames } from './ActivityItem.classNames';
+import type { IPersonaSharedProps, IPersonaCoinProps } from '../../Persona';
 
 type OptionalReactKey = { key?: React.Key };
 

diff --git a/packages/react/src/components/ActivityItem/ActivityItem.types.ts b/packages/react/src/components/ActivityItem/ActivityItem.types.ts
@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { IStyle } from '../../Styling';
-import { IRenderFunction } from '../../Utilities';
-import { IPersonaSharedProps } from '../../Persona';
+import type { IStyle } from '../../Styling';
+import type { IRenderFunction } from '../../Utilities';
+import type { IPersonaSharedProps } from '../../Persona';
 
 /**
  * {@docCategory ActivityItem}

diff --git a/packages/react/src/components/Announced/Announced.base.tsx b/packages/react/src/components/Announced/Announced.base.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { DelayedRender, classNamesFunction, getNativeProps, divProperties } from '../../Utilities';
-import { IAnnouncedProps, IAnnouncedStyles } from './Announced.types';
+import type { IAnnouncedProps, IAnnouncedStyles } from './Announced.types';
 
 const getClassNames = classNamesFunction<{}, IAnnouncedStyles>();
 

diff --git a/packages/react/src/components/Announced/Announced.styles.ts b/packages/react/src/components/Announced/Announced.styles.ts
@@ -1,6 +1,6 @@
 import { hiddenContentStyle } from '../../Styling';
-import { IStyleFunction } from '../../Utilities';
-import { IAnnouncedStyles, IAnnouncedStyleProps } from './Announced.types';
+import type { IStyleFunction } from '../../Utilities';
+import type { IAnnouncedStyles, IAnnouncedStyleProps } from './Announced.types';
 
 export const getStyles: IStyleFunction<IAnnouncedStyleProps, IAnnouncedStyles> = props => {
   return {

diff --git a/packages/react/src/components/Announced/Announced.ts b/packages/react/src/components/Announced/Announced.ts
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { styled } from '../../Utilities';
-import { IAnnouncedProps, IAnnouncedStyles } from './Announced.types';
 import { AnnouncedBase } from './Announced.base';
 import { getStyles } from './Announced.styles';
+import type { IAnnouncedProps, IAnnouncedStyles } from './Announced.types';
 
 export const Announced: React.FunctionComponent<IAnnouncedProps> = styled<IAnnouncedProps, {}, IAnnouncedStyles>(
   AnnouncedBase,

diff --git a/packages/react/src/components/Announced/Announced.types.ts b/packages/react/src/components/Announced/Announced.types.ts
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { AnnouncedBase } from './Announced.base';
-import { IStyle } from '../../Styling';
-import { IStyleFunctionOrObject } from '../../Utilities';
+import type { IStyle } from '../../Styling';
+import type { IStyleFunctionOrObject } from '../../Utilities';
 
 /**
  * {@docCategory Announced}

diff --git a/packages/react/src/components/Autofill/Autofill.test.tsx b/packages/react/src/components/Autofill/Autofill.test.tsx
@@ -4,10 +4,12 @@ import * as React from 'react';
 
 import * as ReactTestUtils from 'react-dom/test-utils';
 
-import { IRefObject, KeyCodes } from '../../Utilities';
-import { Autofill, IAutofillState, IAutofill, IAutofillProps } from './index';
+import { KeyCodes } from '../../Utilities';
+import { Autofill } from './index';
 import { ReactWrapper, mount } from 'enzyme';
 import { mockEvent } from '../../common/testUtilities';
+import type { IRefObject } from '../../Utilities';
+import type { IAutofillState, IAutofill, IAutofillProps } from './index';
 
 describe('Autofill', () => {
   let autofill: Autofill;

diff --git a/packages/react/src/components/Autofill/Autofill.tsx b/packages/react/src/components/Autofill/Autofill.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Async, getNativeProps, initializeComponentRef, inputProperties, isIE11, KeyCodes } from '../../Utilities';
-import { IAutofill, IAutofillProps } from './Autofill.types';
+import type { IAutofill, IAutofillProps } from './Autofill.types';
 
 export interface IAutofillState {
   inputValue: string;

diff --git a/packages/react/src/components/Autofill/Autofill.types.ts b/packages/react/src/components/Autofill/Autofill.types.ts
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Autofill } from './Autofill';
-import { IRefObject, KeyCodes } from '../../Utilities';
+import { KeyCodes } from '../../Utilities';
+import type { IRefObject } from '../../Utilities';
 
 /**
  * {@docCategory Autofill}

diff --git a/packages/react/src/components/Breadcrumb/Breadcrumb.base.tsx b/packages/react/src/components/Breadcrumb/Breadcrumb.base.tsx
@@ -6,16 +6,16 @@ import {
   getNativeProps,
   htmlElementProperties,
 } from '../../Utilities';
-import { IProcessedStyleSet } from '../../Styling';
 import { FocusZone, FocusZoneDirection } from '../../FocusZone';
 import { Link } from '../../Link';
 import { Icon } from '../../Icon';
 import { IconButton } from '../../Button';
 import { DirectionalHint } from '../../common/DirectionalHint';
 import { ResizeGroup } from '../../ResizeGroup';
 import { TooltipHost, TooltipOverflowMode } from '../../Tooltip';
-import { IContextualMenuItem, IContextualMenuItemProps } from '../../ContextualMenu';
-import {
+import type { IProcessedStyleSet } from '../../Styling';
+import type { IContextualMenuItem, IContextualMenuItemProps } from '../../ContextualMenu';
+import type {
   IBreadcrumbProps,
   IBreadcrumbItem,
   IDividerAsProps,

diff --git a/packages/react/src/components/Breadcrumb/Breadcrumb.styles.ts b/packages/react/src/components/Breadcrumb/Breadcrumb.styles.ts
@@ -1,6 +1,5 @@
 import {
   HighContrastSelector,
-  IRawStyle,
   ScreenWidthMaxMedium,
   ScreenWidthMaxSmall,
   ScreenWidthMinMedium,
@@ -10,8 +9,9 @@ import {
   FontWeights,
   getHighContrastNoAdjustStyle,
 } from '../../Styling';
-import { IBreadcrumbStyleProps, IBreadcrumbStyles } from './Breadcrumb.types';
 import { IsFocusVisibleClassName } from '../../Utilities';
+import type { IRawStyle } from '../../Styling';
+import type { IBreadcrumbStyleProps, IBreadcrumbStyles } from './Breadcrumb.types';
 
 const GlobalClassNames = {
   root: 'ms-Breadcrumb',

diff --git a/packages/react/src/components/Breadcrumb/Breadcrumb.test.tsx b/packages/react/src/components/Breadcrumb/Breadcrumb.test.tsx
@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { mount, ReactWrapper } from 'enzyme';
 import * as renderer from 'react-test-renderer';
-import { Breadcrumb, IBreadcrumbItem } from './index';
+import { Breadcrumb } from './index';
 import { Icon } from '../../Icon';
 import { isConformant } from '../../common/isConformant';
 import { resetIds } from '@fluentui/utilities';
+import type { IBreadcrumbItem } from './index';
 
 describe('Breadcrumb', () => {
   const items: IBreadcrumbItem[] = [

diff --git a/packages/react/src/components/Breadcrumb/Breadcrumb.tsx b/packages/react/src/components/Breadcrumb/Breadcrumb.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { styled } from '../../Utilities';
 import { BreadcrumbBase } from './Breadcrumb.base';
 import { getStyles } from './Breadcrumb.styles';
-import { IBreadcrumbProps, IBreadcrumbStyleProps, IBreadcrumbStyles } from './Breadcrumb.types';
+import type { IBreadcrumbProps, IBreadcrumbStyleProps, IBreadcrumbStyles } from './Breadcrumb.types';
 
 export const Breadcrumb: React.FunctionComponent<IBreadcrumbProps> = styled<
   IBreadcrumbProps,

diff --git a/packages/react/src/components/Breadcrumb/Breadcrumb.types.ts b/packages/react/src/components/Breadcrumb/Breadcrumb.types.ts
@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { IIconProps } from '../../Icon';
-import { IRefObject, IRenderFunction, IComponentAs, IStyleFunctionOrObject } from '../../Utilities';
-import { ITheme, IStyle } from '../../Styling';
-import { IFocusZoneProps } from '../../FocusZone';
-import { ITooltipHostProps } from '../../Tooltip';
-import { IButtonProps } from '../../Button';
+import type { IIconProps } from '../../Icon';
+import type { IRefObject, IRenderFunction, IComponentAs, IStyleFunctionOrObject } from '../../Utilities';
+import type { ITheme, IStyle } from '../../Styling';
+import type { IFocusZoneProps } from '../../FocusZone';
+import type { ITooltipHostProps } from '../../Tooltip';
+import type { IButtonProps } from '../../Button';
 
 /**
  * {@docCategory Breadcrumb}

diff --git a/packages/react/src/components/Button/ActionButton/ActionButton.styles.ts b/packages/react/src/components/Button/ActionButton/ActionButton.styles.ts
@@ -1,7 +1,8 @@
-import { IButtonStyles } from '../Button.types';
-import { ITheme, concatStyleSets, HighContrastSelector } from '../../../Styling';
+import { concatStyleSets, HighContrastSelector } from '../../../Styling';
 import { memoizeFunction } from '../../../Utilities';
 import { getStyles as getBaseButtonStyles } from '../BaseButton.styles';
+import type { IButtonStyles } from '../Button.types';
+import type { ITheme } from '../../../Styling';
 
 const DEFAULT_BUTTON_HEIGHT = '40px';
 const DEFAULT_PADDING = '0 4px';

diff --git a/packages/react/src/components/Button/ActionButton/ActionButton.tsx b/packages/react/src/components/Button/ActionButton/ActionButton.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { BaseButton } from '../BaseButton';
 import { customizable, nullRender } from '../../../Utilities';
-import { IButtonProps } from '../Button.types';
 import { getStyles } from './ActionButton.styles';
+import type { IButtonProps } from '../Button.types';
 
 /**
  * {@docCategory Button}

diff --git a/packages/react/src/components/Button/BaseButton.classNames.ts b/packages/react/src/components/Button/BaseButton.classNames.ts
@@ -1,6 +1,7 @@
 import { memoizeFunction } from '../../Utilities';
-import { ITheme, getGlobalClassNames, mergeStyleSets } from '../../Styling';
-import { IButtonStyles } from './Button.types';
+import { getGlobalClassNames, mergeStyleSets } from '../../Styling';
+import type { ITheme } from '../../Styling';
+import type { IButtonStyles } from './Button.types';
 
 export interface IButtonClassNames {
   root?: string;

diff --git a/packages/react/src/components/Button/BaseButton.styles.ts b/packages/react/src/components/Button/BaseButton.styles.ts
@@ -1,6 +1,7 @@
-import { IButtonStyles } from './Button.types';
 import { memoizeFunction } from '../../Utilities';
-import { HighContrastSelector, ITheme, IRawStyle, getFocusStyle, hiddenContentStyle } from '../../Styling';
+import { HighContrastSelector, getFocusStyle, hiddenContentStyle } from '../../Styling';
+import type { IButtonStyles } from './Button.types';
+import type { ITheme, IRawStyle } from '../../Styling';
 
 const noOutline: IRawStyle = {
   outline: 0,

diff --git a/packages/react/src/components/Button/BaseButton.tsx b/packages/react/src/components/Button/BaseButton.tsx
@@ -18,20 +18,20 @@ import {
   Async,
   EventGroup,
   FocusRects,
-  IRenderFunction,
   KeyCodes,
 } from '../../Utilities';
 import { Icon, FontIcon, ImageIcon } from '../../Icon';
 import { DirectionalHint } from '../../common/DirectionalHint';
-import { ContextualMenu, IContextualMenuProps } from '../../ContextualMenu';
-import { IButtonProps, IButton } from './Button.types';
-import { IButtonClassNames, getBaseButtonClassNames } from './BaseButton.classNames';
-import {
-  getSplitButtonClassNames as getBaseSplitButtonClassNames,
-  ISplitButtonClassNames,
-} from './SplitButton/SplitButton.classNames';
+import { ContextualMenu } from '../../ContextualMenu';
+import { getBaseButtonClassNames } from './BaseButton.classNames';
+import { getSplitButtonClassNames as getBaseSplitButtonClassNames } from './SplitButton/SplitButton.classNames';
 import { KeytipData } from '../../KeytipData';
-import { IKeytipProps } from '../../Keytip';
+import type { IRenderFunction } from '../../Utilities';
+import type { IContextualMenuProps } from '../../ContextualMenu';
+import type { IButtonProps, IButton } from './Button.types';
+import type { IButtonClassNames } from './BaseButton.classNames';
+import type { ISplitButtonClassNames } from './SplitButton/SplitButton.classNames';
+import type { IKeytipProps } from '../../Keytip';
 
 /**
  * {@docCategory Button}

diff --git a/packages/react/src/components/Button/Button.test.tsx b/packages/react/src/components/Button/Button.test.tsx
@@ -12,7 +12,7 @@ import { CommandBarButton } from './CommandBarButton/CommandBarButton';
 import { CompoundButton } from './CompoundButton/CompoundButton';
 import { KeyCodes, resetIds } from '../../Utilities';
 import { renderIntoDocument } from '../../common/testUtilities';
-import { IContextualMenuProps } from '../../ContextualMenu';
+import type { IContextualMenuProps } from '../../ContextualMenu';
 
 const alertClicked = (): void => {
   /*noop*/

diff --git a/packages/react/src/components/Button/Button.tsx b/packages/react/src/components/Button/Button.tsx
@@ -1,12 +1,13 @@
 import * as React from 'react';
 
 import { warn } from '../../Utilities';
-import { ButtonType, IButtonProps } from './Button.types';
+import { ButtonType } from './Button.types';
 import { DefaultButton } from './DefaultButton/DefaultButton';
 import { ActionButton } from './ActionButton/ActionButton';
 import { CompoundButton } from './CompoundButton/CompoundButton';
 import { IconButton } from './IconButton/IconButton';
 import { PrimaryButton } from './PrimaryButton/PrimaryButton';
+import type { IButtonProps } from './Button.types';
 
 /**
  * This class is deprecated. Use the individual *Button components instead.