Fix type imports: pass 3 (#19471)

* packages/theme-samples

* packages/storybook
packages/theme

* more storybook.

* Removing changes from storybook/tsconfig.json

* packages/scheme-utilities

* packages/react-utilities

* packages/react-tooltip

* packages/react-theme

* react-tabs
react-tabster
react-text

* react-switch

* Change files

change/@fluentui-react-tabs-aee3094c-fa22-4bff-b07d-c5c045be5b5e.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Updating TypeScript type-only imports/exports to use import/export type syntax.",
+  "packageName": "@fluentui/react-tabs",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-tabster-ddb53570-32f9-497c-9ce2-017f41eeb13a.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Updating TypeScript type-only imports/exports to use import/export type syntax.",
+  "packageName": "@fluentui/react-tabster",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-text-c96287d9-97aa-49cb-a523-e1596542c4d9.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Updating TypeScript type-only imports/exports to use import/export type syntax.",
+  "packageName": "@fluentui/react-text",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-theme-32c2edaa-b060-466b-a2fe-5af7b07eb52d.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Updating TypeScript type-only imports/exports to use import/export type syntax.",
+  "packageName": "@fluentui/react-theme",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-tooltip-b8a5b256-fa1a-4ef9-bbd9-9e9a7e43649b.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Updating TypeScript type-only imports/exports to use import/export type syntax.",
+  "packageName": "@fluentui/react-tooltip",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-utilities-6821555d-e60a-4a8f-995b-16bba6673d52.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Updating TypeScript type-only imports/exports to use import/export type syntax.",
+  "packageName": "@fluentui/react-utilities",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-scheme-utilities-f8016815-15f7-4a89-8fef-1497078f6da2.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Updating TypeScript type-only imports/exports to use import/export type syntax.",
+  "packageName": "@fluentui/scheme-utilities",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-theme-90b9379a-c813-457e-b347-85c45386a1bf.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Updating TypeScript type-only imports/exports to use import/export type syntax.",
+  "packageName": "@fluentui/theme",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-theme-samples-0916303e-d15b-4590-9722-e94c7fb12686.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Updating TypeScript type-only imports/exports to use import/export type syntax.",
+  "packageName": "@fluentui/theme-samples",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-switch/etc/react-switch.api.md

@@ -4,8 +4,8 @@
 
 ```ts
 
-import { ComponentProps } from '@fluentui/react-utilities';
-import { ComponentState } from '@fluentui/react-utilities';
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 
 // @public

packages/react-switch/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 },

packages/react-switch/src/components/Switch/Switch.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { useSwitch } from './useSwitch';
-import { SwitchProps } from './Switch.types';
 import { renderSwitch } from './renderSwitch';
 import { useSwitchStyles } from './useSwitchStyles';
+import type { SwitchProps } from './Switch.types';
 
 /**
  * Switch component

packages/react-switch/src/components/Switch/Switch.types.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ComponentProps, ComponentState } from '@fluentui/react-utilities';
+import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';
 
 /**
  * Names of the shorthand properties in SwitchProps

packages/react-switch/src/components/Switch/renderSwitch.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { getSlots } from '@fluentui/react-utilities';
-import { SwitchSlots, SwitchState } from './Switch.types';
 import { switchShorthandProps } from './useSwitch';
+import type { SwitchSlots, SwitchState } from './Switch.types';
 
 /**
  * Render the final JSX of Switch

packages/react-switch/src/components/Switch/useSwitch.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { SwitchProps, SwitchSlots, SwitchState } from './Switch.types';
 import { useSwitchState } from './useSwitchState';
+import type { SwitchProps, SwitchSlots, SwitchState } from './Switch.types';
 
 /**
  * Array of all shorthand properties listed in SwitchShorthandProps

packages/react-switch/src/components/Switch/useSwitchState.ts

@@ -1,4 +1,4 @@
-import { SwitchSlots, SwitchState, SwitchCommon } from './Switch.types';
+import type { SwitchSlots, SwitchState, SwitchCommon } from './Switch.types';
 
 export const useSwitchState = (state: Pick<SwitchState, keyof SwitchCommon | keyof SwitchSlots | 'as' | 'ref'>) => {
   return state;

packages/react-switch/src/components/Switch/useSwitchStyles.ts

@@ -1,5 +1,5 @@
 import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';
-import { SwitchState } from './Switch.types';
+import type { SwitchState } from './Switch.types';
 
 /**
  * Styles for the root slot

packages/react-switch/tsconfig.json

@@ -12,6 +12,7 @@
     "importHelpers": true,
     "noUnusedLocals": true,
     "preserveConstEnums": true,
-    "types": ["jest", "custom-global", "inline-style-expand-shorthand", "storybook__addons"]
+    "types": ["jest", "custom-global", "inline-style-expand-shorthand", "storybook__addons"],
+    "isolatedModules": true
   }
 }

packages/react-tabs/etc/react-tabs.api.md

@@ -4,13 +4,13 @@
 
 ```ts
 
-import { IButtonProps } from '@fluentui/react/lib/Button';
-import { IKeytipProps } from '@fluentui/react';
-import { IRefObject } from '@fluentui/utilities';
-import { IRenderFunction } from '@fluentui/utilities';
-import { IStyle } from '@fluentui/style-utilities';
-import { IStyleFunctionOrObject } from '@fluentui/utilities';
-import { ITheme } from '@fluentui/style-utilities';
+import type { IButtonProps } from '@fluentui/react/lib/Button';
+import type { IKeytipProps } from '@fluentui/react';
+import type { IRefObject } from '@fluentui/utilities';
+import type { IRenderFunction } from '@fluentui/utilities';
+import type { IStyle } from '@fluentui/style-utilities';
+import type { IStyleFunctionOrObject } from '@fluentui/utilities';
+import type { ITheme } from '@fluentui/style-utilities';
 import * as React_2 from 'react';
 
 // @public
@@ -98,7 +98,6 @@ export interface TabsStyles {
     text: IStyle;
 }
 
-
 // (No @packageDocumentation comment for this package)
 
 ```

packages/react-tabs/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 },

packages/react-tabs/src/components/Tabs/TabItem.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { getNativeProps, divProperties, initializeComponentRef } from '@fluentui/utilities';
-import { TabItemProps } from './TabItem.types';
+import type { TabItemProps } from './TabItem.types';
 
 // const COMPONENT_NAME = 'TabItem';
 

packages/react-tabs/src/components/Tabs/TabItem.types.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { IKeytipProps } from '@fluentui/react';
-import { IButtonProps } from '@fluentui/react/lib/Button';
-import { IRefObject, IRenderFunction } from '@fluentui/utilities';
+import type { IKeytipProps } from '@fluentui/react';
+import type { IButtonProps } from '@fluentui/react/lib/Button';
+import type { IRefObject, IRenderFunction } from '@fluentui/utilities';
 
 /**
  * {@docCategory Tabs}

packages/react-tabs/src/components/Tabs/Tabs.base.tsx

@@ -1,17 +1,13 @@
 import * as React from 'react';
 import { useControllableValue, useId } from '@fluentui/react-hooks';
 import { classNamesFunction, css, divProperties, getNativeProps, getRTL, KeyCodes, warn } from '@fluentui/utilities';
-import {
-  DirectionalHint,
-  FocusZone,
-  FocusZoneDirection,
-  Icon,
-  IContextualMenuProps,
-  IFocusZone,
-} from '@fluentui/react';
-import { CommandButton, IButton } from '@fluentui/react/lib/Button';
-import { TabsImperativeHandle, TabItemProps, TabsProps, TabsStyleProps, TabsStyles, TabItem } from './index';
+import { DirectionalHint, FocusZone, FocusZoneDirection, Icon } from '@fluentui/react';
+import { CommandButton } from '@fluentui/react/lib/Button';
+import { TabItem } from './index';
 import { useOverflow } from '../../utilities/useOverflow';
+import type { IContextualMenuProps, IFocusZone } from '@fluentui/react';
+import type { IButton } from '@fluentui/react/lib/Button';
+import type { TabsImperativeHandle, TabItemProps, TabsProps, TabsStyleProps, TabsStyles } from './index';
 
 const getClassNames = classNamesFunction<TabsStyleProps, TabsStyles>();
 

packages/react-tabs/src/components/Tabs/Tabs.styles.ts

@@ -1,14 +1,14 @@
-import { TabsStyleProps, TabsStyles } from './Tabs.types';
 import {
   AnimationVariables,
   getGlobalClassNames,
   HighContrastSelector,
-  IStyle,
   normalize,
   FontWeights,
   getHighContrastNoAdjustStyle,
 } from '@fluentui/style-utilities';
 import { IsFocusVisibleClassName } from '@fluentui/utilities';
+import type { TabsStyleProps, TabsStyles } from './Tabs.types';
+import type { IStyle } from '@fluentui/style-utilities';
 
 const globalClassNames = {
   count: 'ms-Tabs-count',

packages/react-tabs/src/components/Tabs/Tabs.test.tsx

@@ -2,8 +2,9 @@ import * as React from 'react';
 import { create } from '@fluentui/utilities/lib/test';
 import { mount } from 'enzyme';
 import { resetIds } from '@fluentui/utilities';
-import { Tabs, TabItem, TabsImperativeHandle } from './index';
+import { Tabs, TabItem } from './index';
 import { isConformant } from '../../common/isConformant';
+import type { TabsImperativeHandle } from './index';
 
 describe('Tabs', () => {
   beforeEach(() => {

packages/react-tabs/src/components/Tabs/Tabs.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { styled } from '@fluentui/utilities';
-import { TabsProps, TabsStyleProps, TabsStyles } from './Tabs.types';
 import { TabsBase } from './Tabs.base';
 import { getStyles } from './Tabs.styles';
+import type { TabsProps, TabsStyleProps, TabsStyles } from './Tabs.types';
 
 /**
  * The Tabs control and related tabs pattern are used for navigating frequently accessed,

packages/react-tabs/src/components/Tabs/Tabs.types.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { IStyle, ITheme } from '@fluentui/style-utilities';
-import { IStyleFunctionOrObject } from '@fluentui/utilities';
 import { TabItem } from './TabItem';
+import type { IStyle, ITheme } from '@fluentui/style-utilities';
+import type { IStyleFunctionOrObject } from '@fluentui/utilities';
 
 /**
  * {@docCategory Tabs}

packages/react-tabs/src/utilities/useOverflow.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { useRefEffect, RefCallback } from '@fluentui/react-hooks';
+import { useRefEffect } from '@fluentui/react-hooks';
 import { getWindow } from '@fluentui/utilities';
 import { observeResize } from './observeResize';
+import type { RefCallback } from '@fluentui/react-hooks';
 
 /**
  * Callback to notify the user that the items in the overflow have changed. This should ensure that the overflow menu

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

@@ -5,7 +5,7 @@
 ```ts
 
 import type { MakeStylesStyleRule } from '@fluentui/make-styles';
-import { RefObject } from 'react';
+import type { RefObject } from 'react';
 import type { Theme } from '@fluentui/react-theme';
 import { Types } from 'tabster';
 
@@ -54,7 +54,6 @@ export interface UseModalAttributesOptions {
 // @public
 export const useTabsterAttributes: (props: Types.TabsterAttributeProps) => Types.TabsterDOMAttribute;
 
-
 // (No @packageDocumentation comment for this package)
 
 ```

packages/react-tabster/src/hooks/useKeyboardNavAttribute.ts

@@ -1,8 +1,9 @@
 import { createKeyborg } from 'keyborg';
-import { KeyborgCallback } from 'keyborg/dist/Keyborg';
-import { RefObject, useEffect, useMemo, useRef } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import { KEYBOARD_NAV_ATTRIBUTE } from '../symbols';
 import { useFluent } from '@fluentui/react-shared-contexts';
+import type { KeyborgCallback } from 'keyborg/dist/Keyborg';
+import type { RefObject } from 'react';
 
 /**
  * instantiates keyborg and add attribute to ensure focus indicator synced to keyborg logic

packages/react-tabster/tsconfig.json

@@ -12,6 +12,7 @@
     "importHelpers": true,
     "noUnusedLocals": true,
     "preserveConstEnums": true,
-    "types": ["jest", "custom-global", "inline-style-expand-shorthand"]
+    "types": ["jest", "custom-global", "inline-style-expand-shorthand"],
+    "isolatedModules": true
   }
 }

packages/react-text/etc/react-text.api.md

@@ -4,8 +4,8 @@
 
 ```ts
 
-import { ComponentPropsCompat } from '@fluentui/react-utilities';
-import { ComponentStateCompat } from '@fluentui/react-utilities';
+import type { ComponentPropsCompat } from '@fluentui/react-utilities';
+import type { ComponentStateCompat } from '@fluentui/react-utilities';
 import { ForwardRefExoticComponent } from 'react';
 import * as React_2 from 'react';
 import { RefAttributes } from 'react';

packages/react-text/src/Text.stories.tsx

@@ -1,6 +1,7 @@
 import { makeStyles } from '@fluentui/react-make-styles';
 import * as React from 'react';
-import { Text, TextProps } from './Text';
+import { Text } from './Text';
+import type { TextProps } from './Text';
 
 const useStyles = makeStyles({
   container: {

packages/react-text/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 },

packages/react-text/src/components/Text/Text.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { useText } from './useText';
-import { TextProps } from './Text.types';
 import { renderText } from './renderText';
 import { useTextStyles } from './useTextStyles';
+import type { TextProps } from './Text.types';
 
 /**
  * Typography and styling abstraction component used to ensure consistency of text.

packages/react-text/src/components/Text/Text.types.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ComponentPropsCompat, ComponentStateCompat } from '@fluentui/react-utilities';
+import type { ComponentPropsCompat, ComponentStateCompat } from '@fluentui/react-utilities';
 
 /**
  * Text Props

packages/react-text/src/components/Text/renderText.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { getSlotsCompat } from '@fluentui/react-utilities';
-import { TextState } from './Text.types';
+import type { TextState } from './Text.types';
 
 /**
  * Render the final JSX of Text

packages/react-text/src/components/Text/useText.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { makeMergeProps } from '@fluentui/react-utilities';
-import { TextProps, TextState } from './Text.types';
+import type { TextProps, TextState } from './Text.types';
 
 const mergeProps = makeMergeProps<TextState>();
 

packages/react-text/src/components/Text/useTextStyles.ts

@@ -1,5 +1,5 @@
 import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';
-import { TextState } from './Text.types';
+import type { TextState } from './Text.types';
 
 /**
  * Styles for the root slot

packages/react-text/src/components/wrapper.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { mergeClasses } from '@fluentui/react-make-styles';
-import { renderText, TextProps, useText, useTextStyles } from '../Text';
+import { renderText, useText, useTextStyles } from '../Text';
+import type { TextProps } from '../Text';
 
 export interface Props extends Omit<TextProps, 'font' | 'size'> {}