Fix type imports: pass 7 (#19485)

* @fluentui/react-cards: updating type imports/exports for 3 file(s).

* @fluentui/react-card: updating type imports/exports for 3 file(s).

* @fluentui/react-button: updating type imports/exports for 28 file(s).

* @fluentui/react-badge: updating type imports/exports for 14 file(s).

* @fluentui/react-avatar: updating type imports/exports for 7 file(s).

* @fluentui/react-aria: updating type imports/exports for 3 file(s).

* @fluentui/react-accordion: updating type imports/exports for 29 file(s).

* @fluentui/public-docsite-setup: updating type imports/exports for 2 file(s).

* Change files

* Fixing dependency...

* undo public-docsite-setup changes.

* fixing build error.

change/@fluentui-react-accordion-1b6860d4-6e5d-4089-a844-57b24efde970.json

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

change/@fluentui-react-aria-2a209379-ebf0-40a1-9ba3-41c43b5e5cb7.json

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

change/@fluentui-react-avatar-05155947-3cac-4ea3-aa22-c566d33845ba.json

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

change/@fluentui-react-badge-bbef588c-ba55-492e-b28c-1573a05be4d0.json

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

change/@fluentui-react-button-e8613e9d-7c1b-4ed7-9af1-9c3073d18d76.json

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

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

@@ -4,10 +4,10 @@
 
 ```ts
 
-import { ARIAButtonProps } from '@fluentui/react-aria';
-import { ComponentProps } from '@fluentui/react-utilities';
-import { ComponentState } from '@fluentui/react-utilities';
-import { Context } from '@fluentui/react-context-selector';
+import type { ARIAButtonProps } from '@fluentui/react-aria';
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+import type { Context } from '@fluentui/react-context-selector';
 import * as React_2 from 'react';
 
 // @public

packages/react-accordion/src/Accordion.stories.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { RocketIcon } from './icons.stories';
-import { AccordionItem, AccordionHeader, AccordionPanel, Accordion, AccordionProps } from './index';
-import { ArgType } from '@storybook/addons';
-import { AccordionHeaderProps } from './components/AccordionHeader/AccordionHeader.types';
+import { AccordionItem, AccordionHeader, AccordionPanel, Accordion } from './index';
+import type { AccordionProps } from './index';
+import type { ArgType } from '@storybook/addons';
+import type { AccordionHeaderProps } from './components/AccordionHeader/AccordionHeader.types';
 
 interface AccordionExampleProps
   extends AccordionProps,

packages/react-accordion/src/AccordionItem.stories.tsx

@@ -1,14 +1,8 @@
 import * as React from 'react';
-import {
-  AccordionItem,
-  AccordionHeader,
-  AccordionPanel,
-  Accordion,
-  AccordionHeaderSize,
-  AccordionHeaderExpandIconPosition,
-} from './index';
+import { AccordionItem, AccordionHeader, AccordionPanel, Accordion } from './index';
 import { RocketIcon } from './icons.stories';
-import { AccordionToggleData, AccordionToggleEvent } from './components/Accordion/Accordion.types';
+import type { AccordionHeaderSize, AccordionHeaderExpandIconPosition } from './index';
+import type { AccordionToggleData, AccordionToggleEvent } from './components/Accordion/Accordion.types';
 
 interface AccordionItemExampleProps {
   icon: boolean;

packages/react-accordion/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-accordion/src/components/Accordion/Accordion.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react';
-
-import { AccordionProps } from './Accordion.types';
 import { renderAccordion } from './renderAccordion';
 import { useAccordion } from './useAccordion';
 import { useAccordionContextValues } from './useAccordionContextValues';
+import type { AccordionProps } from './Accordion.types';
 
 /**
  * Define a styled Accordion, using the `useAccordion` and `useAccordionStyles` hooks.

packages/react-accordion/src/components/Accordion/Accordion.types.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { ComponentProps, ComponentState } from '@fluentui/react-utilities';
-import { AccordionItemValue } from '../AccordionItem/AccordionItem.types';
+import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';
+import type { AccordionItemValue } from '../AccordionItem/AccordionItem.types';
 
 export type AccordionToggleEvent<E = HTMLElement> = React.MouseEvent<E> | React.KeyboardEvent<E>;
 

packages/react-accordion/src/components/Accordion/AccordionContext.ts

@@ -1,5 +1,6 @@
-import { createContext, Context } from '@fluentui/react-context-selector';
-import { AccordionContextValue } from './Accordion.types';
+import { createContext } from '@fluentui/react-context-selector';
+import type { Context } from '@fluentui/react-context-selector';
+import type { AccordionContextValue } from './Accordion.types';
 
 export const AccordionContext: Context<AccordionContextValue> = createContext<AccordionContextValue>({
   openItems: [],

packages/react-accordion/src/components/Accordion/renderAccordion.tsx

@@ -1,8 +1,7 @@
 import { getSlots } from '@fluentui/react-utilities';
 import * as React from 'react';
-
-import { AccordionState, AccordionSlots, AccordionContextValues } from './Accordion.types';
 import { AccordionContext } from './AccordionContext';
+import type { AccordionState, AccordionSlots, AccordionContextValues } from './Accordion.types';
 
 /**
  * Function that renders the final JSX of the component

packages/react-accordion/src/components/Accordion/useAccordion.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useControllableState, useEventCallback } from '@fluentui/react-utilities';
-import { AccordionProps, AccordionState, AccordionToggleData, AccordionToggleEvent } from './Accordion.types';
-import { AccordionItemValue } from '../AccordionItem/AccordionItem.types';
+import type { AccordionProps, AccordionState, AccordionToggleData, AccordionToggleEvent } from './Accordion.types';
+import type { AccordionItemValue } from '../AccordionItem/AccordionItem.types';
 
 export const useAccordion = (
   {

packages/react-accordion/src/components/Accordion/useAccordionContextValues.ts

@@ -1,4 +1,4 @@
-import { AccordionContextValues, AccordionState } from './Accordion.types';
+import type { AccordionContextValues, AccordionState } from './Accordion.types';
 
 export function useAccordionContextValues(state: AccordionState): AccordionContextValues {
   const { navigable, openItems, requestToggle } = state;

packages/react-accordion/src/components/AccordionHeader/AccordionHeader.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { useAccordionHeader } from './useAccordionHeader';
-import { AccordionHeaderProps } from './AccordionHeader.types';
 import { renderAccordionHeader } from './renderAccordionHeader';
 import { useAccordionHeaderStyles } from './useAccordionHeaderStyles';
 import { useAccordionHeaderContextValues } from './useAccordionHeaderContextValues';
+import type { AccordionHeaderProps } from './AccordionHeader.types';
 
 /**
  * Define a styled AccordionHeader, using the `useAccordionHeader` and `useAccordionHeaderStyles` hooks.

packages/react-accordion/src/components/AccordionHeader/AccordionHeader.types.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { ComponentProps, ComponentState } from '@fluentui/react-utilities';
-import { AccordionHeaderExpandIconProps } from './AccordionHeaderExpandIcon';
-import { ARIAButtonProps } from '@fluentui/react-aria';
+import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';
+import type { AccordionHeaderExpandIconProps } from './AccordionHeaderExpandIcon';
+import type { ARIAButtonProps } from '@fluentui/react-aria';
 
 export type AccordionHeaderSize = 'small' | 'medium' | 'large' | 'extra-large';
 export type AccordionHeaderExpandIconPosition = 'start' | 'end';

packages/react-accordion/src/components/AccordionHeader/AccordionHeaderContext.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { AccordionHeaderContextValue } from './AccordionHeader.types';
+import type { AccordionHeaderContextValue } from './AccordionHeader.types';
 
 export const AccordionHeaderContext = React.createContext<AccordionHeaderContextValue>({
   open: false,

packages/react-accordion/src/components/AccordionHeader/AccordionHeaderExpandIcon.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useAccordionHeaderContext } from './AccordionHeaderContext';
-import { AccordionHeaderContextValue } from './AccordionHeader.types';
+import type { AccordionHeaderContextValue } from './AccordionHeader.types';
 
 export type AccordionHeaderExpandIconProps = React.HTMLAttributes<HTMLSpanElement>;
 

packages/react-accordion/src/components/AccordionHeader/renderAccordionHeader.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react';
 import { getSlots } from '@fluentui/react-utilities';
-
-import { AccordionHeaderState, AccordionHeaderSlots, AccordionHeaderContextValues } from './AccordionHeader.types';
 import { accordionHeaderShorthandProps } from './useAccordionHeader';
 import { AccordionHeaderContext } from './AccordionHeaderContext';
+import type { AccordionHeaderState, AccordionHeaderSlots, AccordionHeaderContextValues } from './AccordionHeader.types';
 
 /**
  * Function that renders the final JSX of the component

packages/react-accordion/src/components/AccordionHeader/useAccordionHeader.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { useMergedRefs, useId, resolveShorthand, useEventCallback } from '@fluentui/react-utilities';
-import { AccordionHeaderProps, AccordionHeaderState, AccordionHeaderSlots } from './AccordionHeader.types';
 import { useAccordionItemContext } from '../AccordionItem/index';
 import { AccordionHeaderExpandIcon } from './AccordionHeaderExpandIcon';
 import { useARIAButton } from '@fluentui/react-aria';
+import type { AccordionHeaderProps, AccordionHeaderState, AccordionHeaderSlots } from './AccordionHeader.types';
 
 /**
  * Const listing which props are shorthand props.

packages/react-accordion/src/components/AccordionHeader/useAccordionHeaderContextValues.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {
+import type {
   AccordionHeaderContextValue,
   AccordionHeaderState,
   AccordionHeaderContextValues,

packages/react-accordion/src/components/AccordionHeader/useAccordionHeaderStyles.ts

@@ -1,6 +1,6 @@
 import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';
-import { AccordionHeaderState } from './AccordionHeader.types';
 import { createFocusIndicatorStyleRule } from '@fluentui/react-tabster';
+import type { AccordionHeaderState } from './AccordionHeader.types';
 
 const useStyles = makeStyles({
   // TODO: this should be extracted to another package

packages/react-accordion/src/components/AccordionItem/AccordionItem.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { useAccordionItem } from './useAccordionItem';
 import { useAccordionItemContextValues } from './useAccordionItemContextValues';
-import { AccordionItemProps } from './AccordionItem.types';
 import { renderAccordionItem } from './renderAccordionItem';
+import type { AccordionItemProps } from './AccordionItem.types';
 
 /**
  * Define a styled AccordionItem, using the `useAccordionItem` and `useAccordionItemStyles` hooks.

packages/react-accordion/src/components/AccordionItem/AccordionItem.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';
 
 export interface AccordionItemContextValue {
   open: boolean;

packages/react-accordion/src/components/AccordionItem/AccordionItemContext.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { AccordionItemContextValue } from './AccordionItem.types';
+import type { AccordionItemContextValue } from './AccordionItem.types';
 
 // No default value.
 export const AccordionItemContext = React.createContext<AccordionItemContextValue>({

packages/react-accordion/src/components/AccordionItem/renderAccordionItem.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { getSlots } from '@fluentui/react-utilities';
-import { AccordionItemState, AccordionItemSlots, AccordionItemContextValues } from './AccordionItem.types';
 import { accordionItemShorthandProps } from './useAccordionItem';
 import { AccordionItemContext } from './AccordionItemContext';
+import type { AccordionItemState, AccordionItemSlots, AccordionItemContextValues } from './AccordionItem.types';
 
 /**
  * Function that renders the final JSX of the component

packages/react-accordion/src/components/AccordionItem/useAccordionItem.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { AccordionItemProps, AccordionItemState, AccordionItemSlots } from './AccordionItem.types';
 import { useTabsterAttributes } from '@fluentui/react-tabster';
 import { useContextSelector } from '@fluentui/react-context-selector';
 import { AccordionContext } from '../Accordion/AccordionContext';
-import { AccordionToggleEvent } from '../Accordion/Accordion.types';
+import type { AccordionItemProps, AccordionItemState, AccordionItemSlots } from './AccordionItem.types';
+import type { AccordionToggleEvent } from '../Accordion/Accordion.types';
 
 /**
  * Const listing which props are shorthand props.

packages/react-accordion/src/components/AccordionItem/useAccordionItemContextValues.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { AccordionItemContextValue, AccordionItemContextValues, AccordionItemState } from './AccordionItem.types';
+import type { AccordionItemContextValue, AccordionItemContextValues, AccordionItemState } from './AccordionItem.types';
 
 export function useAccordionItemContextValues(state: AccordionItemState): AccordionItemContextValues {
   const { disabled, onHeaderClick, open } = state;

packages/react-accordion/src/components/AccordionPanel/AccordionPanel.test.tsx

@@ -3,7 +3,7 @@ import { AccordionPanel } from './AccordionPanel';
 import * as renderer from 'react-test-renderer';
 import { ReactWrapper } from 'enzyme';
 import { isConformant } from '../../common/isConformant';
-import { AccordionPanelProps } from './AccordionPanel.types';
+import type { AccordionPanelProps } from './AccordionPanel.types';
 
 describe('AccordionPanel', () => {
   isConformant({

packages/react-accordion/src/components/AccordionPanel/AccordionPanel.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { useAccordionPanel } from './useAccordionPanel';
-import { AccordionPanelProps } from './AccordionPanel.types';
 import { renderAccordionPanel } from './renderAccordionPanel';
 import { useAccordionPanelStyles } from './useAccordionPanelStyles';
+import type { AccordionPanelProps } from './AccordionPanel.types';
 
 /**
  * Define a styled AccordionPanel, using the `useAccordionPanel` and `useAccordionPanelStyles` hooks.

packages/react-accordion/src/components/AccordionPanel/AccordionPanel.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';
 
 export type AccordionPanelSlots = {};
 

packages/react-accordion/src/components/AccordionPanel/renderAccordionPanel.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { getSlots } from '@fluentui/react-utilities';
-import { AccordionPanelState, AccordionPanelSlots } from './AccordionPanel.types';
 import { accordionPanelShorthandProps } from './useAccordionPanel';
+import type { AccordionPanelState, AccordionPanelSlots } from './AccordionPanel.types';
 
 /**
  * Function that renders the final JSX of the component

packages/react-accordion/src/components/AccordionPanel/useAccordionPanel.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useMergedRefs, useId } from '@fluentui/react-utilities';
-import { AccordionPanelProps, AccordionPanelSlots, AccordionPanelState } from './AccordionPanel.types';
 import { useAccordionItemContext } from '../AccordionItem/index';
+import type { AccordionPanelProps, AccordionPanelSlots, AccordionPanelState } from './AccordionPanel.types';
 
 /**
  * Consts listing which props are shorthand props.

packages/react-accordion/src/components/AccordionPanel/useAccordionPanelStyles.ts

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

packages/react-accordion/tsconfig.json

@@ -11,7 +11,8 @@
     "importHelpers": true,
     "noUnusedLocals": true,
     "preserveConstEnums": true,
-    "types": ["jest", "custom-global", "inline-style-expand-shorthand"]
+    "types": ["jest", "custom-global", "inline-style-expand-shorthand"],
+    "isolatedModules": true
   },
   "include": ["src"]
 }

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

@@ -4,10 +4,10 @@
 
 ```ts
 
-import { ObjectShorthandProps } from '@fluentui/react-utilities';
+import type { ObjectShorthandProps } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
-import { ResolveShorthandOptions } from '@fluentui/react-utilities';
-import { ShorthandProps } from '@fluentui/react-utilities';
+import type { ResolveShorthandOptions } from '@fluentui/react-utilities';
+import type { ShorthandProps } from '@fluentui/react-utilities';
 
 // @public (undocumented)
 export type ARIAButtonAsAnchorProps = React_2.AnchorHTMLAttributes<HTMLAnchorElement> & {

packages/react-aria/src/hooks/useARIAButton.stories.tsx

@@ -1,6 +1,8 @@
-import { ComponentState, getSlots } from '@fluentui/react-utilities';
+import { getSlots } from '@fluentui/react-utilities';
 import * as React from 'react';
-import { ARIAButtonAsElementProps, ARIAButtonProps, useARIAButton } from './useARIAButton';
+import { useARIAButton } from './useARIAButton';
+import type { ComponentState } from '@fluentui/react-utilities';
+import type { ARIAButtonAsElementProps, ARIAButtonProps } from './useARIAButton';
 
 type Slots = {
   button: ARIAButtonProps;

packages/react-aria/src/hooks/useARIAButton.test.tsx

@@ -1,9 +1,11 @@
 import * as React from 'react';
-import { ARIAButtonProps, useARIAButton } from './useARIAButton';
+import { useARIAButton } from './useARIAButton';
 import { Enter, Space } from '@fluentui/keyboard-keys';
 import { renderHook } from '@testing-library/react-hooks';
 import { fireEvent, screen, render } from '@testing-library/react';
-import { getSlots, ObjectShorthandProps } from '@fluentui/react-utilities';
+import { getSlots } from '@fluentui/react-utilities';
+import type { ARIAButtonProps } from './useARIAButton';
+import type { ObjectShorthandProps } from '@fluentui/react-utilities';
 
 describe('useARIAButton', () => {
   it('should return by default shorthand props for a button', () => {

packages/react-aria/src/hooks/useARIAButton.ts

@@ -1,12 +1,7 @@
 import * as React from 'react';
 import { Enter, Space } from '@fluentui/keyboard-keys';
-import {
-  ObjectShorthandProps,
-  resolveShorthand,
-  ResolveShorthandOptions,
-  ShorthandProps,
-  useEventCallback,
-} from '@fluentui/react-utilities';
+import { resolveShorthand, useEventCallback } from '@fluentui/react-utilities';
+import type { ObjectShorthandProps, ResolveShorthandOptions, ShorthandProps } from '@fluentui/react-utilities';
 
 function mergeARIADisabled(disabled?: boolean | 'false' | 'true'): boolean {
   if (typeof disabled === 'string') {

packages/react-aria/tsconfig.json

@@ -11,7 +11,8 @@
     "importHelpers": true,
     "noUnusedLocals": true,
     "preserveConstEnums": true,
-    "types": ["jest", "custom-global", "inline-style-expand-shorthand"]
+    "types": ["jest", "custom-global", "inline-style-expand-shorthand"],
+    "isolatedModules": true
   },
   "include": ["src"]
 }