From 3dbb57b1e6940df2d4039f61a35d961bcb8560c3 Mon Sep 17 00:00:00 2001 From: David Zearing Date: Wed, 18 Aug 2021 10:15:37 -0700 Subject: [PATCH] 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 * Fixes. * Fixing MarqueeSelection import Co-authored-by: Elizabeth Craig --- ...-ba8016c3-b08c-4f1d-a7fd-3fe38fa3d1c5.json | 7 +++ ...-76196fa2-6fa6-4df0-b27b-bdaf4bc346f2.json | 7 +++ ...-8811d00b-a073-4a20-af9a-a7765dc8a929.json | 7 +++ packages/react/etc/react.api.md | 26 ++++----- packages/react/src/common/DocPage.types.ts | 4 +- packages/react/src/common/isConformant.ts | 3 +- .../ActivityItem/ActivityItem.classNames.ts | 4 +- .../ActivityItem/ActivityItem.styles.ts | 4 +- .../ActivityItem/ActivityItem.test.tsx | 2 +- .../components/ActivityItem/ActivityItem.tsx | 8 +-- .../ActivityItem/ActivityItem.types.ts | 6 +-- .../components/Announced/Announced.base.tsx | 2 +- .../components/Announced/Announced.styles.ts | 4 +- .../src/components/Announced/Announced.ts | 2 +- .../components/Announced/Announced.types.ts | 4 +- .../src/components/Autofill/Autofill.test.tsx | 6 ++- .../src/components/Autofill/Autofill.tsx | 2 +- .../src/components/Autofill/Autofill.types.ts | 3 +- .../components/Breadcrumb/Breadcrumb.base.tsx | 6 +-- .../Breadcrumb/Breadcrumb.styles.ts | 4 +- .../components/Breadcrumb/Breadcrumb.test.tsx | 3 +- .../src/components/Breadcrumb/Breadcrumb.tsx | 2 +- .../components/Breadcrumb/Breadcrumb.types.ts | 12 ++--- .../ActionButton/ActionButton.styles.ts | 5 +- .../Button/ActionButton/ActionButton.tsx | 2 +- .../Button/BaseButton.classNames.ts | 5 +- .../components/Button/BaseButton.styles.ts | 5 +- .../src/components/Button/BaseButton.tsx | 18 +++---- .../src/components/Button/Button.test.tsx | 2 +- .../react/src/components/Button/Button.tsx | 3 +- .../src/components/Button/Button.types.ts | 15 +++--- .../src/components/Button/ButtonThemes.ts | 5 +- .../CommandBarButton.styles.ts | 11 ++-- .../CommandBarButton/CommandBarButton.tsx | 2 +- .../CompoundButton/CompoundButton.styles.ts | 11 ++-- .../Button/CompoundButton/CompoundButton.tsx | 2 +- .../DefaultButton/DefaultButton.styles.ts | 5 +- .../Button/DefaultButton/DefaultButton.tsx | 2 +- .../Button/IconButton/IconButton.styles.ts | 5 +- .../Button/IconButton/IconButton.tsx | 2 +- .../MessageBarButton.styles.ts | 5 +- .../MessageBarButton/MessageBarButton.tsx | 2 +- .../Button/PrimaryButton/PrimaryButton.tsx | 2 +- .../SplitButton/SplitButton.classNames.ts | 2 +- .../Button/SplitButton/SplitButton.styles.ts | 12 ++--- packages/react/src/components/Button/index.ts | 2 +- .../src/components/Calendar/Calendar.base.tsx | 6 +-- .../components/Calendar/Calendar.styles.ts | 2 +- .../src/components/Calendar/Calendar.tsx | 2 +- .../src/components/Calendar/Calendar.types.ts | 17 +++--- .../Calendar/CalendarDay/CalendarDay.base.tsx | 6 +-- .../CalendarDay/CalendarDay.styles.ts | 2 +- .../Calendar/CalendarDay/CalendarDay.tsx | 2 +- .../Calendar/CalendarDay/CalendarDay.types.ts | 10 ++-- .../CalendarMonth/CalendarMonth.base.tsx | 4 +- .../CalendarMonth/CalendarMonth.styles.ts | 2 +- .../Calendar/CalendarMonth/CalendarMonth.tsx | 2 +- .../CalendarMonth/CalendarMonth.types.ts | 11 ++-- .../CalendarPicker/CalendarPicker.styles.ts | 4 +- .../CalendarPicker/CalendarPicker.types.ts | 2 +- .../CalendarYear/CalendarYear.base.tsx | 13 ++--- .../CalendarYear/CalendarYear.styles.ts | 2 +- .../Calendar/CalendarYear/CalendarYear.tsx | 2 +- .../CalendarYear/CalendarYear.types.ts | 9 ++-- .../react/src/components/Calendar/defaults.ts | 5 +- .../react/src/components/Calendar/index.ts | 9 +--- .../CalendarDayGrid/CalendarDayGrid.base.tsx | 10 ++-- .../CalendarDayGrid/CalendarDayGrid.styles.ts | 4 +- .../CalendarDayGrid/CalendarDayGrid.tsx | 2 +- .../CalendarDayGrid/CalendarDayGrid.types.ts | 14 ++--- .../CalendarDayGrid/CalendarGridDayCell.tsx | 14 ++--- .../CalendarDayGrid/CalendarGridRow.tsx | 6 +-- .../CalendarMonthHeaderRow.tsx | 6 +-- .../src/components/Callout/Callout.test.tsx | 2 +- .../react/src/components/Callout/Callout.tsx | 2 +- .../src/components/Callout/Callout.types.ts | 16 +++--- .../Callout/CalloutContent.base.tsx | 12 ++--- .../Callout/CalloutContent.styles.ts | 5 +- .../src/components/Callout/CalloutContent.tsx | 2 +- .../components/Callout/FocusTrapCallout.tsx | 2 +- .../Callout/FocusTrapCallout.types.ts | 4 +- .../react/src/components/Check/Check.base.tsx | 3 +- .../src/components/Check/Check.styles.ts | 11 ++-- packages/react/src/components/Check/Check.tsx | 2 +- .../react/src/components/Check/Check.types.ts | 4 +- .../src/components/Checkbox/Checkbox.base.tsx | 2 +- .../components/Checkbox/Checkbox.styles.ts | 10 ++-- .../src/components/Checkbox/Checkbox.test.tsx | 7 +-- .../src/components/Checkbox/Checkbox.tsx | 2 +- .../src/components/Checkbox/Checkbox.types.ts | 6 +-- .../ChoiceGroup/ChoiceGroup.base.tsx | 18 +++---- .../ChoiceGroup/ChoiceGroup.styles.ts | 2 +- .../ChoiceGroup/ChoiceGroup.test.tsx | 2 +- .../components/ChoiceGroup/ChoiceGroup.tsx | 2 +- .../ChoiceGroup/ChoiceGroup.types.ts | 9 ++-- .../ChoiceGroupOption.base.tsx | 10 ++-- .../ChoiceGroupOption.styles.ts | 5 +- .../ChoiceGroupOption/ChoiceGroupOption.tsx | 4 +- .../ChoiceGroupOption.types.ts | 6 +-- .../components/Coachmark/Beak/Beak.styles.ts | 5 +- .../src/components/Coachmark/Beak/Beak.tsx | 6 +-- .../components/Coachmark/Coachmark.base.tsx | 9 ++-- .../components/Coachmark/Coachmark.styles.ts | 2 +- .../src/components/Coachmark/Coachmark.ts | 2 +- .../components/Coachmark/Coachmark.types.ts | 10 ++-- .../PositioningContainer.styles.ts | 3 +- .../PositioningContainer.tsx | 25 +++------ .../PositioningContainer.types.ts | 8 +-- .../ColorPicker/ColorPicker.base.tsx | 16 +++--- .../ColorPicker.deprecated.test.tsx | 5 +- .../ColorPicker/ColorPicker.styles.ts | 2 +- .../ColorPicker/ColorPicker.test.tsx | 7 +-- .../components/ColorPicker/ColorPicker.tsx | 2 +- .../ColorPicker/ColorPicker.types.ts | 6 +-- .../ColorRectangle/ColorRectangle.base.tsx | 15 +++--- .../ColorRectangle/ColorRectangle.styles.ts | 2 +- .../ColorRectangle/ColorRectangle.test.tsx | 8 +-- .../ColorRectangle/ColorRectangle.tsx | 2 +- .../ColorRectangle/ColorRectangle.types.ts | 6 +-- .../ColorSlider/ColorSlider.base.tsx | 2 +- .../ColorSlider/ColorSlider.styles.ts | 2 +- .../ColorSlider/ColorSlider.test.tsx | 5 +- .../ColorPicker/ColorSlider/ColorSlider.tsx | 2 +- .../ColorSlider/ColorSlider.types.ts | 4 +- .../ComboBox/ComboBox.classNames.ts | 2 +- .../components/ComboBox/ComboBox.styles.ts | 9 ++-- .../src/components/ComboBox/ComboBox.test.tsx | 2 +- .../src/components/ComboBox/ComboBox.tsx | 21 ++++---- .../src/components/ComboBox/ComboBox.types.ts | 14 ++--- .../ComboBox/VirtualizedComboBox.tsx | 7 +-- .../react/src/components/ComboBox/index.ts | 2 +- .../components/CommandBar/CommandBar.base.tsx | 19 ++++--- .../CommandBar/CommandBar.styles.ts | 6 +-- .../components/CommandBar/CommandBar.test.tsx | 2 +- .../src/components/CommandBar/CommandBar.tsx | 2 +- .../components/CommandBar/CommandBar.types.ts | 14 ++--- .../ContextualMenu/ContextualMenu.base.tsx | 37 ++++++------- .../ContextualMenu.classNames.ts | 8 +-- .../ContextualMenu/ContextualMenu.cnstyles.ts | 5 +- .../ContextualMenu.deprecated.test.tsx | 5 +- .../ContextualMenu/ContextualMenu.styles.ts | 2 +- .../ContextualMenu/ContextualMenu.test.tsx | 16 +++--- .../ContextualMenu/ContextualMenu.tsx | 2 +- .../ContextualMenu/ContextualMenu.types.ts | 26 ++++----- .../ContextualMenuItem.base.tsx | 2 +- .../ContextualMenuItem.test.tsx | 6 +-- .../ContextualMenu/ContextualMenuItem.ts | 6 +-- .../ContextualMenuItem.types.ts | 10 ++-- .../ContextualMenuAnchor.deprecated.test.tsx | 4 +- .../ContextualMenuAnchor.test.tsx | 4 +- .../ContextualMenuAnchor.tsx | 4 +- .../ContextualMenuButton.deprecated.test.tsx | 4 +- .../ContextualMenuButton.test.tsx | 4 +- .../ContextualMenuButton.tsx | 4 +- .../ContextualMenuItemWrapper.tsx | 2 +- .../ContextualMenuItemWrapper.types.ts | 6 +-- ...textualMenuSplitButton.deprecated.test.tsx | 4 +- .../ContextualMenuSplitButton.test.tsx | 4 +- .../ContextualMenuSplitButton.tsx | 9 ++-- .../src/components/ContextualMenu/index.ts | 4 +- .../components/DatePicker/DatePicker.base.tsx | 10 ++-- .../DatePicker/DatePicker.styles.ts | 5 +- .../components/DatePicker/DatePicker.test.tsx | 2 +- .../src/components/DatePicker/DatePicker.tsx | 2 +- .../components/DatePicker/DatePicker.types.ts | 13 ++--- .../src/components/DatePicker/defaults.ts | 2 +- .../DetailsList/DetailsColumn.base.tsx | 16 ++---- .../DetailsList/DetailsColumn.styles.ts | 5 +- .../DetailsList/DetailsColumn.test.tsx | 8 +-- .../components/DetailsList/DetailsColumn.ts | 6 +-- .../DetailsList/DetailsColumn.types.ts | 14 ++--- .../DetailsList/DetailsFooter.types.ts | 7 +-- .../DetailsList/DetailsHeader.base.tsx | 45 +++++++--------- .../DetailsList/DetailsHeader.styles.ts | 7 ++- .../DetailsList/DetailsHeader.test.tsx | 6 ++- .../components/DetailsList/DetailsHeader.ts | 10 ++-- .../DetailsList/DetailsHeader.types.ts | 16 +++--- .../DetailsList/DetailsList.base.tsx | 43 ++++++++------- .../DetailsList/DetailsList.styles.ts | 2 +- .../DetailsList/DetailsList.test.tsx | 24 ++++----- .../src/components/DetailsList/DetailsList.ts | 6 +-- .../DetailsList/DetailsList.types.ts | 54 ++++++++++--------- .../DetailsList/DetailsRow.base.tsx | 19 +++---- .../DetailsList/DetailsRow.styles.ts | 4 +- .../DetailsList/DetailsRow.test.tsx | 5 +- .../src/components/DetailsList/DetailsRow.ts | 11 ++-- .../DetailsList/DetailsRow.types.ts | 21 ++++---- .../DetailsList/DetailsRowCheck.styles.ts | 2 +- .../DetailsList/DetailsRowCheck.tsx | 12 ++--- .../DetailsList/DetailsRowCheck.types.ts | 4 +- .../DetailsList/DetailsRowFields.tsx | 4 +- .../DetailsList/DetailsRowFields.types.ts | 8 +-- .../DetailsList/ShimmeredDetailsList.base.tsx | 15 +++--- .../ShimmeredDetailsList.styles.ts | 2 +- .../DetailsList/ShimmeredDetailsList.ts | 2 +- .../DetailsList/ShimmeredDetailsList.types.ts | 8 +-- .../src/components/Dialog/Dialog.base.tsx | 10 ++-- .../src/components/Dialog/Dialog.styles.ts | 2 +- .../react/src/components/Dialog/Dialog.tsx | 2 +- .../src/components/Dialog/Dialog.types.ts | 17 +++--- .../components/Dialog/DialogContent.base.tsx | 5 +- .../components/Dialog/DialogContent.styles.ts | 2 +- .../src/components/Dialog/DialogContent.tsx | 2 +- .../components/Dialog/DialogContent.types.ts | 6 +-- .../components/Dialog/DialogFooter.base.tsx | 4 +- .../components/Dialog/DialogFooter.styles.ts | 2 +- .../src/components/Dialog/DialogFooter.tsx | 2 +- .../components/Dialog/DialogFooter.types.ts | 4 +- .../Divider/VerticalDivider.base.tsx | 7 ++- .../Divider/VerticalDivider.classNames.ts | 5 +- .../Divider/VerticalDivider.styles.ts | 4 +- .../components/Divider/VerticalDivider.tsx | 6 ++- .../Divider/VerticalDivider.types.ts | 4 +- .../DocumentCard/DocumentCard.base.tsx | 6 +-- .../DocumentCard/DocumentCard.styles.ts | 2 +- .../components/DocumentCard/DocumentCard.ts | 2 +- .../DocumentCard/DocumentCard.types.ts | 4 +- .../DocumentCard/DocumentCardActions.base.tsx | 6 +-- .../DocumentCardActions.styles.ts | 2 +- .../DocumentCard/DocumentCardActions.ts | 2 +- .../DocumentCard/DocumentCardActions.types.ts | 6 +-- .../DocumentCardActivity.base.tsx | 8 +-- .../DocumentCardActivity.styles.ts | 2 +- .../DocumentCard/DocumentCardActivity.ts | 2 +- .../DocumentCardActivity.types.ts | 4 +- .../DocumentCard/DocumentCardDetails.base.tsx | 4 +- .../DocumentCardDetails.styles.ts | 2 +- .../DocumentCard/DocumentCardDetails.ts | 2 +- .../DocumentCard/DocumentCardDetails.types.ts | 4 +- .../DocumentCard/DocumentCardImage.base.tsx | 4 +- .../DocumentCard/DocumentCardImage.styles.ts | 2 +- .../DocumentCard/DocumentCardImage.ts | 2 +- .../DocumentCard/DocumentCardImage.types.ts | 6 +-- .../DocumentCardLocation.base.tsx | 4 +- .../DocumentCardLocation.styles.ts | 2 +- .../DocumentCard/DocumentCardLocation.ts | 2 +- .../DocumentCardLocation.types.ts | 4 +- .../DocumentCard/DocumentCardLogo.base.tsx | 8 ++- .../DocumentCard/DocumentCardLogo.styles.ts | 2 +- .../DocumentCard/DocumentCardLogo.ts | 6 ++- .../DocumentCard/DocumentCardLogo.types.ts | 4 +- .../DocumentCard/DocumentCardPreview.base.tsx | 4 +- .../DocumentCardPreview.styles.ts | 2 +- .../DocumentCard/DocumentCardPreview.ts | 2 +- .../DocumentCard/DocumentCardPreview.types.ts | 8 +-- .../DocumentCard/DocumentCardStatus.base.tsx | 6 +-- .../DocumentCard/DocumentCardStatus.styles.ts | 2 +- .../DocumentCard/DocumentCardStatus.ts | 2 +- .../DocumentCard/DocumentCardStatus.types.ts | 4 +- .../DocumentCard/DocumentCardTitle.base.tsx | 6 +-- .../DocumentCard/DocumentCardTitle.styles.ts | 2 +- .../DocumentCard/DocumentCardTitle.ts | 2 +- .../DocumentCard/DocumentCardTitle.types.ts | 4 +- .../src/components/Dropdown/Dropdown.base.tsx | 42 ++++++++------- .../components/Dropdown/Dropdown.styles.ts | 8 +-- .../src/components/Dropdown/Dropdown.test.tsx | 5 +- .../src/components/Dropdown/Dropdown.tsx | 2 +- .../src/components/Dropdown/Dropdown.types.ts | 12 ++--- .../utilities/DropdownSizePosCache.test.ts | 3 +- .../utilities/DropdownSizePosCache.ts | 3 +- .../BaseExtendedPicker.test.tsx | 8 +-- .../ExtendedPicker/BaseExtendedPicker.tsx | 10 ++-- .../BaseExtendedPicker.types.ts | 10 ++-- .../PeoplePicker/ExtendedPeoplePicker.tsx | 9 ++-- .../src/components/Fabric/Fabric.base.tsx | 7 +-- .../src/components/Fabric/Fabric.styles.ts | 2 +- .../react/src/components/Fabric/Fabric.tsx | 2 +- .../src/components/Fabric/Fabric.types.ts | 4 +- .../src/components/Facepile/Facepile.base.tsx | 14 ++--- .../components/Facepile/Facepile.styles.ts | 6 +-- .../src/components/Facepile/Facepile.test.tsx | 3 +- .../src/components/Facepile/Facepile.tsx | 2 +- .../src/components/Facepile/Facepile.types.ts | 11 ++-- .../Facepile/FacepileButton.styles.ts | 5 +- .../components/Facepile/FacepileButton.tsx | 3 +- .../BaseFloatingPicker.test.tsx | 3 +- .../FloatingPicker/BaseFloatingPicker.tsx | 6 +-- .../BaseFloatingPicker.types.ts | 8 +-- .../PeoplePicker/FloatingPeoplePicker.tsx | 6 +-- .../PeoplePickerItems/SelectedItemDefault.tsx | 2 +- .../SuggestionItemDefault.tsx | 5 +- .../Suggestions/Suggestions.types.ts | 6 +-- .../Suggestions/SuggestionsControl.tsx | 12 ++--- .../Suggestions/SuggestionsCore.tsx | 5 +- .../Suggestions/SuggestionsStore.ts | 4 +- .../FocusTrapZone/FocusTrapZone.test.tsx | 2 +- .../FocusTrapZone/FocusTrapZone.tsx | 4 +- .../FocusTrapZone/FocusTrapZone.types.ts | 2 +- .../GroupedList/GroupFooter.base.tsx | 3 +- .../GroupedList/GroupFooter.styles.ts | 2 +- .../src/components/GroupedList/GroupFooter.ts | 5 +- .../GroupedList/GroupFooter.types.ts | 6 +-- .../GroupedList/GroupHeader.base.tsx | 6 +-- .../GroupedList/GroupHeader.styles.ts | 12 ++--- .../src/components/GroupedList/GroupHeader.ts | 5 +- .../GroupedList/GroupHeader.types.ts | 6 +-- .../GroupedList/GroupShowAll.base.tsx | 3 +- .../GroupedList/GroupShowAll.styles.ts | 6 +-- .../components/GroupedList/GroupShowAll.ts | 5 +- .../GroupedList/GroupShowAll.types.ts | 6 +-- .../components/GroupedList/GroupSpacer.tsx | 2 +- .../GroupedList/GroupSpacer.types.ts | 4 +- .../GroupedList/GroupedList.base.tsx | 23 ++++---- .../GroupedList/GroupedList.styles.ts | 2 +- .../GroupedList/GroupedList.test.tsx | 4 +- .../src/components/GroupedList/GroupedList.ts | 5 +- .../GroupedList/GroupedList.types.ts | 22 ++++---- .../GroupedList/GroupedListSection.tsx | 25 ++++----- .../react/src/components/GroupedList/index.ts | 6 +-- .../components/HoverCard/BaseCard.types.ts | 6 +-- .../HoverCard/CardCallout/CardCallout.tsx | 5 +- .../HoverCard/ExpandingCard.base.tsx | 8 +-- .../HoverCard/ExpandingCard.styles.ts | 2 +- .../src/components/HoverCard/ExpandingCard.ts | 2 +- .../HoverCard/ExpandingCard.types.ts | 6 +-- .../components/HoverCard/HoverCard.base.tsx | 15 ++---- .../components/HoverCard/HoverCard.styles.ts | 2 +- .../components/HoverCard/HoverCard.test.tsx | 7 +-- .../src/components/HoverCard/HoverCard.ts | 2 +- .../components/HoverCard/HoverCard.types.ts | 10 ++-- .../HoverCard/PlainCard/PlainCard.base.tsx | 2 +- .../HoverCard/PlainCard/PlainCard.styles.ts | 2 +- .../HoverCard/PlainCard/PlainCard.ts | 2 +- .../HoverCard/PlainCard/PlainCard.types.ts | 4 +- .../react/src/components/Icon/FontIcon.tsx | 6 +-- .../react/src/components/Icon/Icon.base.tsx | 6 ++- .../react/src/components/Icon/Icon.styles.ts | 2 +- packages/react/src/components/Icon/Icon.tsx | 2 +- .../react/src/components/Icon/Icon.types.ts | 6 +-- .../react/src/components/Icon/ImageIcon.tsx | 3 +- .../react/src/components/Image/Image.base.tsx | 3 +- .../src/components/Image/Image.styles.ts | 5 +- packages/react/src/components/Image/Image.tsx | 2 +- .../react/src/components/Image/Image.types.ts | 4 +- .../src/components/Keytip/Keytip.styles.ts | 6 +-- .../react/src/components/Keytip/Keytip.tsx | 2 +- .../src/components/Keytip/Keytip.types.ts | 6 +-- .../components/Keytip/KeytipContent.base.tsx | 2 +- .../src/components/Keytip/KeytipContent.tsx | 2 +- .../src/components/KeytipData/KeytipData.tsx | 4 +- .../components/KeytipData/KeytipData.types.ts | 2 +- .../KeytipData/useKeytipData.test.tsx | 2 +- .../components/KeytipData/useKeytipData.ts | 4 +- .../src/components/KeytipData/useKeytipRef.ts | 2 +- .../KeytipLayer/KeytipLayer.base.tsx | 14 +++-- .../KeytipLayer/KeytipLayer.styles.ts | 4 +- .../KeytipLayer/KeytipLayer.test.tsx | 2 +- .../components/KeytipLayer/KeytipLayer.tsx | 2 +- .../KeytipLayer/KeytipLayer.types.ts | 6 +-- .../KeytipLayer/KeytipTree.test.tsx | 4 +- .../src/components/KeytipLayer/KeytipTree.ts | 4 +- .../react/src/components/Label/Label.base.tsx | 2 +- .../src/components/Label/Label.styles.ts | 2 +- packages/react/src/components/Label/Label.tsx | 2 +- .../react/src/components/Label/Label.types.ts | 4 +- .../react/src/components/Layer/Layer.base.tsx | 2 +- .../src/components/Layer/Layer.styles.ts | 2 +- packages/react/src/components/Layer/Layer.tsx | 2 +- .../react/src/components/Layer/Layer.types.ts | 4 +- .../react/src/components/Layer/LayerHost.tsx | 2 +- .../src/components/Layer/LayerHost.types.ts | 2 +- .../react/src/components/Link/Link.base.tsx | 2 +- .../react/src/components/Link/Link.styles.ts | 2 +- packages/react/src/components/Link/Link.tsx | 2 +- .../react/src/components/Link/Link.types.ts | 4 +- packages/react/src/components/Link/useLink.ts | 2 +- .../react/src/components/List/List.test.tsx | 2 +- packages/react/src/components/List/List.tsx | 9 ++-- .../react/src/components/List/List.types.ts | 2 +- .../MarqueeSelection.base.tsx | 11 ++-- .../MarqueeSelection.styles.tsx | 2 +- .../MarqueeSelection/MarqueeSelection.tsx | 6 ++- .../MarqueeSelection.types.ts | 6 +-- .../components/MessageBar/MessageBar.base.tsx | 3 +- .../MessageBar/MessageBar.styles.ts | 6 +-- .../src/components/MessageBar/MessageBar.tsx | 2 +- .../components/MessageBar/MessageBar.types.ts | 6 +-- .../react/src/components/Modal/Modal.base.tsx | 11 ++-- .../src/components/Modal/Modal.styles.ts | 2 +- packages/react/src/components/Modal/Modal.ts | 2 +- .../react/src/components/Modal/Modal.types.ts | 14 ++--- packages/react/src/components/Modal/index.ts | 2 +- .../react/src/components/Nav/Nav.base.tsx | 7 +-- .../react/src/components/Nav/Nav.styles.ts | 4 +- .../react/src/components/Nav/Nav.test.tsx | 4 +- packages/react/src/components/Nav/Nav.tsx | 2 +- .../react/src/components/Nav/Nav.types.ts | 8 +-- .../components/OverflowSet/OverflowButton.tsx | 4 +- .../OverflowSet/OverflowSet.base.tsx | 4 +- .../OverflowSet/OverflowSet.styles.ts | 6 +-- .../OverflowSet/OverflowSet.test.tsx | 6 +-- .../src/components/OverflowSet/OverflowSet.ts | 2 +- .../OverflowSet/OverflowSet.types.ts | 6 +-- .../src/components/Overlay/Overlay.base.tsx | 2 +- .../src/components/Overlay/Overlay.styles.ts | 2 +- .../react/src/components/Overlay/Overlay.tsx | 2 +- .../src/components/Overlay/Overlay.types.ts | 4 +- .../react/src/components/Panel/Panel.base.tsx | 5 +- .../src/components/Panel/Panel.styles.ts | 5 +- .../react/src/components/Panel/Panel.test.tsx | 2 +- packages/react/src/components/Panel/Panel.ts | 2 +- .../react/src/components/Panel/Panel.types.ts | 14 ++--- .../src/components/Persona/Persona.base.tsx | 19 ++----- .../src/components/Persona/Persona.styles.ts | 6 ++- .../src/components/Persona/Persona.test.tsx | 6 ++- .../react/src/components/Persona/Persona.tsx | 2 +- .../src/components/Persona/Persona.types.ts | 5 +- .../Persona/PersonaCoin/PersonaCoin.base.tsx | 12 ++--- .../Persona/PersonaCoin/PersonaCoin.styles.ts | 3 +- .../Persona/PersonaCoin/PersonaCoin.tsx | 2 +- .../Persona/PersonaInitialsColor.ts | 3 +- .../PersonaPresence/PersonaPresence.base.tsx | 9 +--- .../PersonaPresence/PersonaPresence.styles.ts | 6 ++- .../PersonaPresence/PersonaPresence.tsx | 2 +- .../react/src/components/Pivot/Pivot.base.tsx | 13 +++-- .../src/components/Pivot/Pivot.styles.ts | 4 +- .../react/src/components/Pivot/Pivot.test.tsx | 3 +- packages/react/src/components/Pivot/Pivot.tsx | 2 +- .../react/src/components/Pivot/Pivot.types.ts | 6 +-- .../react/src/components/Pivot/PivotItem.tsx | 2 +- .../src/components/Pivot/PivotItem.types.ts | 6 +-- packages/react/src/components/Popup/Popup.tsx | 2 +- .../ProgressIndicator.base.tsx | 2 +- .../ProgressIndicator.styles.ts | 4 +- .../ProgressIndicator/ProgressIndicator.tsx | 6 +-- .../ProgressIndicator.types.ts | 4 +- .../src/components/Rating/Rating.base.tsx | 3 +- .../src/components/Rating/Rating.styles.ts | 2 +- .../src/components/Rating/Rating.test.tsx | 2 +- .../react/src/components/Rating/Rating.tsx | 2 +- .../src/components/Rating/Rating.types.ts | 4 +- .../ResizeGroup/ResizeGroup.base.tsx | 3 +- .../ResizeGroup/ResizeGroup.test.tsx | 3 +- .../components/ResizeGroup/ResizeGroup.tsx | 2 +- .../ResizeGroup/ResizeGroup.types.ts | 4 +- .../ScrollablePane/ScrollablePane.base.tsx | 6 +-- .../ScrollablePane/ScrollablePane.styles.ts | 5 +- .../ScrollablePane/ScrollablePane.tsx | 2 +- .../ScrollablePane/ScrollablePane.types.ts | 4 +- .../components/SearchBox/SearchBox.base.tsx | 8 +-- .../components/SearchBox/SearchBox.styles.tsx | 4 +- .../components/SearchBox/SearchBox.test.tsx | 4 +- .../src/components/SearchBox/SearchBox.tsx | 2 +- .../components/SearchBox/SearchBox.types.ts | 8 +-- .../BaseSelectedItemsList.test.tsx | 3 +- .../BaseSelectedItemsList.tsx | 9 ++-- .../BaseSelectedItemsList.types.ts | 5 +- .../Items/EditingItem.styles.ts | 2 +- .../SelectedPeopleList/Items/EditingItem.tsx | 11 ++-- .../Items/EditingItem.types.ts | 9 ++-- .../Items/ExtendedSelectedItem.tsx | 2 +- .../Items/SelectedItemWithContextMenu.tsx | 8 +-- .../SelectedPeopleList.test.tsx | 3 +- .../SelectedPeopleList/SelectedPeopleList.tsx | 10 ++-- .../components/Separator/Separator.base.tsx | 2 +- .../components/Separator/Separator.styles.ts | 2 +- .../src/components/Separator/Separator.tsx | 2 +- .../components/Separator/Separator.types.ts | 4 +- .../src/components/Shimmer/Shimmer.base.tsx | 2 +- .../src/components/Shimmer/Shimmer.styles.ts | 2 +- .../react/src/components/Shimmer/Shimmer.tsx | 2 +- .../src/components/Shimmer/Shimmer.types.ts | 4 +- .../ShimmerCircle/ShimmerCircle.base.tsx | 2 +- .../ShimmerCircle/ShimmerCircle.styles.ts | 5 +- .../Shimmer/ShimmerCircle/ShimmerCircle.tsx | 2 +- .../ShimmerCircle/ShimmerCircle.types.ts | 4 +- .../ShimmerElementsGroup.base.tsx | 19 +++---- .../ShimmerElementsGroup.styles.ts | 2 +- .../ShimmerElementsGroup.tsx | 6 +-- .../ShimmerElementsGroup.types.ts | 6 +-- .../Shimmer/ShimmerGap/ShimmerGap.base.tsx | 2 +- .../Shimmer/ShimmerGap/ShimmerGap.styles.ts | 5 +- .../Shimmer/ShimmerGap/ShimmerGap.tsx | 2 +- .../Shimmer/ShimmerGap/ShimmerGap.types.ts | 4 +- .../Shimmer/ShimmerLine/ShimmerLine.base.tsx | 2 +- .../Shimmer/ShimmerLine/ShimmerLine.styles.ts | 5 +- .../Shimmer/ShimmerLine/ShimmerLine.tsx | 2 +- .../Shimmer/ShimmerLine/ShimmerLine.types.ts | 4 +- .../src/components/Slider/Slider.base.tsx | 2 +- .../src/components/Slider/Slider.styles.ts | 2 +- .../src/components/Slider/Slider.test.tsx | 2 +- .../react/src/components/Slider/Slider.tsx | 2 +- .../src/components/Slider/Slider.types.ts | 4 +- .../react/src/components/Slider/useSlider.ts | 4 +- .../components/SpinButton/SpinButton.base.tsx | 3 +- .../SpinButton/SpinButton.styles.ts | 15 ++---- .../components/SpinButton/SpinButton.test.tsx | 2 +- .../src/components/SpinButton/SpinButton.tsx | 2 +- .../components/SpinButton/SpinButton.types.ts | 11 ++-- .../src/components/Spinner/Spinner.base.tsx | 3 +- .../src/components/Spinner/Spinner.styles.tsx | 3 +- .../react/src/components/Spinner/Spinner.tsx | 2 +- .../src/components/Spinner/Spinner.types.ts | 4 +- .../src/components/Stack/Stack.styles.ts | 2 +- packages/react/src/components/Stack/Stack.tsx | 4 +- .../react/src/components/Stack/Stack.types.ts | 2 +- .../Stack/StackItem/StackItem.styles.ts | 2 +- .../components/Stack/StackItem/StackItem.tsx | 2 +- .../Stack/StackItem/StackItem.types.ts | 2 +- .../react/src/components/Stack/StackUtils.ts | 8 +-- .../react/src/components/Sticky/Sticky.tsx | 6 ++- .../src/components/Sticky/Sticky.types.ts | 2 +- .../ColorPickerGridCell.base.tsx | 7 +-- .../ColorPickerGridCell.styles.ts | 2 +- .../SwatchColorPicker/ColorPickerGridCell.tsx | 4 +- .../ColorPickerGridCell.types.ts | 4 +- .../SwatchColorPicker.base.tsx | 12 ++--- .../SwatchColorPicker.styles.ts | 2 +- .../SwatchColorPicker.test.tsx | 4 +- .../SwatchColorPicker/SwatchColorPicker.tsx | 4 +- .../SwatchColorPicker.types.ts | 6 +-- .../TeachingBubble/TeachingBubble.base.tsx | 9 ++-- .../TeachingBubble/TeachingBubble.styles.ts | 15 ++---- .../TeachingBubble/TeachingBubble.ts | 2 +- .../TeachingBubble/TeachingBubble.types.ts | 16 +++--- .../TeachingBubbleContent.base.tsx | 12 ++--- .../TeachingBubble/TeachingBubbleContent.ts | 2 +- .../react/src/components/Text/Text.styles.ts | 5 +- packages/react/src/components/Text/Text.ts | 2 +- .../react/src/components/Text/Text.types.tsx | 4 +- .../react/src/components/Text/Text.view.tsx | 2 +- .../MaskedTextField/MaskedTextField.tsx | 7 +-- .../MaskedTextField/inputMask.test.ts | 2 +- .../components/TextField/TextField.base.tsx | 9 ++-- .../components/TextField/TextField.styles.tsx | 8 +-- .../components/TextField/TextField.test.tsx | 8 +-- .../src/components/TextField/TextField.ts | 5 +- .../components/TextField/TextField.types.ts | 6 +-- .../components/ThemeGenerator/IThemeRules.ts | 2 +- .../ThemeGenerator/IThemeSlotRule.ts | 2 +- .../ThemeGenerator/ThemeGenerator.ts | 7 ++- .../ThemeGenerator/ThemeRulesStandard.ts | 3 +- .../components/TimePicker/TimePicker.test.tsx | 2 +- .../src/components/TimePicker/TimePicker.tsx | 5 +- .../components/TimePicker/TimePicker.types.ts | 2 +- .../src/components/Toggle/Toggle.base.tsx | 2 +- .../src/components/Toggle/Toggle.styles.ts | 2 +- .../react/src/components/Toggle/Toggle.tsx | 2 +- .../src/components/Toggle/Toggle.types.ts | 4 +- .../src/components/Tooltip/Tooltip.base.tsx | 4 +- .../src/components/Tooltip/Tooltip.styles.ts | 2 +- .../src/components/Tooltip/Tooltip.test.tsx | 2 +- .../react/src/components/Tooltip/Tooltip.tsx | 2 +- .../src/components/Tooltip/Tooltip.types.ts | 7 ++- .../components/Tooltip/TooltipHost.base.tsx | 9 +--- .../components/Tooltip/TooltipHost.styles.ts | 2 +- .../components/Tooltip/TooltipHost.test.tsx | 6 +-- .../src/components/Tooltip/TooltipHost.ts | 2 +- .../components/Tooltip/TooltipHost.types.ts | 9 ++-- .../WeeklyDayPicker/WeeklyDayPicker.base.tsx | 10 ++-- .../WeeklyDayPicker/WeeklyDayPicker.styles.ts | 2 +- .../WeeklyDayPicker/WeeklyDayPicker.tsx | 2 +- .../WeeklyDayPicker/WeeklyDayPicker.types.ts | 12 +++-- .../components/WeeklyDayPicker/defaults.ts | 2 +- .../components/pickers/BasePicker.styles.ts | 2 +- .../components/pickers/BasePicker.test.tsx | 5 +- .../src/components/pickers/BasePicker.tsx | 25 ++++----- .../components/pickers/BasePicker.types.ts | 12 ++--- .../PeoplePicker/PeoplePicker.test.tsx | 5 +- .../pickers/PeoplePicker/PeoplePicker.tsx | 14 ++--- .../PeoplePickerItem.styles.ts | 4 +- .../PeoplePickerItems/PeoplePickerItem.tsx | 16 +++--- .../PeoplePickerItem.types.ts | 13 ++--- .../PeoplePickerItemSuggestion.styles.ts | 9 +++- .../PeoplePickerItemSuggestion.tsx | 10 ++-- .../PeoplePickerItems/SelectedItemDefault.tsx | 3 +- .../SuggestionItemDefault.tsx | 7 +-- .../components/pickers/PickerItem.types.ts | 2 +- .../pickers/Suggestions/Suggestions.styles.ts | 4 +- .../pickers/Suggestions/Suggestions.test.tsx | 4 +- .../pickers/Suggestions/Suggestions.tsx | 30 ++++------- .../pickers/Suggestions/Suggestions.types.ts | 11 ++-- .../Suggestions/SuggestionsController.ts | 2 +- .../Suggestions/SuggestionsItem.styles.ts | 2 +- .../pickers/Suggestions/SuggestionsItem.tsx | 6 +-- .../Suggestions/SuggestionsItem.types.ts | 6 +-- .../pickers/TagPicker/TagItem.styles.ts | 2 +- .../components/pickers/TagPicker/TagItem.tsx | 3 +- .../TagPicker/TagItemSuggestion.styles.ts | 2 +- .../pickers/TagPicker/TagItemSuggestion.tsx | 6 ++- .../pickers/TagPicker/TagPicker.test.tsx | 4 +- .../pickers/TagPicker/TagPicker.tsx | 4 +- .../pickers/TagPicker/TagPicker.types.ts | 9 ++-- .../utilities/ButtonGrid/ButtonGrid.base.tsx | 2 +- .../utilities/ButtonGrid/ButtonGrid.styles.ts | 2 +- .../src/utilities/ButtonGrid/ButtonGrid.tsx | 2 +- .../utilities/ButtonGrid/ButtonGrid.types.ts | 4 +- .../utilities/ButtonGrid/ButtonGridCell.tsx | 2 +- .../ButtonGrid/ButtonGridCell.types.ts | 4 +- .../utilities/DraggableZone/DraggableZone.tsx | 2 +- .../src/utilities/MenuContext/MenuContext.ts | 2 +- .../utilities/ThemeProvider/ThemeContext.ts | 2 +- .../ThemeProvider/ThemeProvider.test.tsx | 3 +- .../utilities/ThemeProvider/ThemeProvider.tsx | 2 +- .../ThemeProvider/ThemeProvider.types.ts | 4 +- .../src/utilities/ThemeProvider/index.ts | 2 +- .../src/utilities/ThemeProvider/makeStyles.ts | 4 +- .../ThemeProvider/renderThemeProvider.tsx | 2 +- .../styleRenderers/mergeStylesRenderer.tsx | 2 +- .../ThemeProvider/styleRenderers/types.ts | 3 +- .../src/utilities/ThemeProvider/useTheme.ts | 4 +- .../ThemeProvider/useThemeProvider.tsx | 2 +- .../ThemeProvider/useThemeProviderClasses.tsx | 4 +- .../ThemeProvider/useThemeProviderState.tsx | 8 +-- .../react/src/utilities/color/colors.test.ts | 2 +- .../react/src/utilities/color/correctHSV.ts | 2 +- .../react/src/utilities/color/correctRGB.ts | 2 +- .../react/src/utilities/color/cssColor.ts | 2 +- .../src/utilities/color/getColorFromHSV.ts | 2 +- .../src/utilities/color/getColorFromRGBA.ts | 2 +- .../src/utilities/color/getColorFromString.ts | 2 +- .../src/utilities/color/getFullColorString.ts | 2 +- packages/react/src/utilities/color/hsl2hsv.ts | 2 +- packages/react/src/utilities/color/hsl2rgb.ts | 2 +- packages/react/src/utilities/color/hsv2hsl.ts | 2 +- packages/react/src/utilities/color/hsv2rgb.ts | 2 +- packages/react/src/utilities/color/rgb2hsv.ts | 2 +- packages/react/src/utilities/color/shades.ts | 2 +- packages/react/src/utilities/color/updateA.ts | 2 +- packages/react/src/utilities/color/updateH.ts | 2 +- .../react/src/utilities/color/updateRGB.ts | 2 +- .../react/src/utilities/color/updateSV.ts | 2 +- packages/react/src/utilities/color/updateT.ts | 2 +- .../contextualMenuUtility.test.ts | 2 +- .../contextualMenu/contextualMenuUtility.ts | 2 +- .../src/utilities/dragdrop/DragDropHelper.tsx | 10 +++- .../groupedList/GroupedListUtility.test.tsx | 2 +- .../groupedList/GroupedListUtility.tsx | 2 +- .../keytips/IKeytipTransitionKey.test.ts | 3 +- .../utilities/keytips/KeytipConfig.test.ts | 3 +- .../src/utilities/keytips/KeytipConfig.ts | 2 +- .../utilities/keytips/KeytipManager.test.tsx | 2 +- .../src/utilities/keytips/KeytipManager.ts | 2 +- .../react/src/utilities/positioning/index.ts | 3 +- .../utilities/positioning/positioning.test.ts | 7 ++- .../src/utilities/positioning/positioning.ts | 9 ++-- .../positioning/positioning.types.ts | 8 +-- .../SelectableDroppableText.types.ts | 8 +-- .../selectableOption/SelectableOption.ts | 2 +- .../src/utilities/selection/Selection.ts | 3 +- .../selection/SelectionZone.test.tsx | 3 +- .../src/utilities/selection/SelectionZone.tsx | 3 +- .../src/utilities/selection/interfaces.ts | 3 +- packages/react/src/utilities/useOverflow.ts | 3 +- packages/react/tsconfig.json | 1 + .../etc/style-utilities.api.md | 3 +- packages/style-utilities/src/MergeStyles.ts | 18 ++++--- .../src/classNames/AnimationClassNames.ts | 2 +- .../src/classNames/ColorClassNames.ts | 3 +- .../src/classNames/FontClassNames.ts | 2 +- .../src/interfaces/IGetFocusStyles.ts | 2 +- .../style-utilities/src/interfaces/index.ts | 18 +++---- .../src/styles/CommonStyles.ts | 2 +- .../src/styles/GeneralStyles.ts | 5 +- .../styles/PulsingBeaconAnimationStyles.ts | 3 +- .../src/styles/getFadedOverflowStyle.ts | 4 +- .../src/styles/getFocusStyle.ts | 4 +- .../src/styles/getGlobalClassNames.test.ts | 2 +- .../src/styles/getGlobalClassNames.ts | 2 +- .../src/styles/getPlaceholderStyles.ts | 2 +- .../src/styles/hiddenContentStyle.ts | 2 +- packages/style-utilities/src/styles/index.ts | 3 +- .../style-utilities/src/styles/scheme.test.ts | 4 +- packages/style-utilities/src/styles/scheme.ts | 5 +- .../style-utilities/src/styles/theme.test.ts | 2 +- packages/style-utilities/src/styles/theme.ts | 4 +- .../src/utilities/getIconClassName.ts | 3 +- .../src/utilities/icons.test.ts | 3 +- .../style-utilities/src/utilities/icons.ts | 3 +- .../style-utilities/src/utilities/index.ts | 13 +---- packages/style-utilities/tsconfig.json | 1 + packages/utilities/etc/utilities.api.md | 19 +++---- packages/utilities/src/Async.test.ts | 3 +- packages/utilities/src/AutoScroll.ts | 2 +- packages/utilities/src/BaseComponent.ts | 8 +-- packages/utilities/src/BaseComponent.types.ts | 2 +- packages/utilities/src/IStyleFunction.ts | 2 +- .../utilities/src/classNamesFunction.test.ts | 3 +- packages/utilities/src/classNamesFunction.ts | 11 ++-- .../componentAs/composeComponentAs.test.tsx | 2 +- .../src/componentAs/composeComponentAs.tsx | 2 +- .../src/customizations/Customizer.tsx | 5 +- .../src/customizations/Customizer.types.tsx | 6 +-- .../src/customizations/CustomizerContext.ts | 2 +- .../src/customizations/customizable.test.tsx | 2 +- .../src/customizations/customizable.tsx | 3 +- .../src/customizations/mergeCustomizations.ts | 4 +- .../src/customizations/mergeSettings.ts | 2 +- .../useCustomizationSettings.test.tsx | 3 +- .../useCustomizationSettings.ts | 3 +- packages/utilities/src/dom/IVirtualElement.ts | 2 +- packages/utilities/src/dom/getRect.ts | 3 +- packages/utilities/src/index.ts | 5 +- .../src/initializeComponentRef.test.tsx | 2 +- .../utilities/src/initializeComponentRef.ts | 2 +- packages/utilities/src/math.ts | 4 +- .../composeRenderFunction.test.tsx | 2 +- .../renderFunction/composeRenderFunction.tsx | 2 +- .../utilities/src/selection/Selection.test.ts | 3 +- packages/utilities/src/selection/Selection.ts | 3 +- packages/utilities/src/styled.test.tsx | 10 +--- packages/utilities/src/styled.tsx | 3 +- .../src/warn/warnControlledUsage.test.ts | 3 +- .../utilities/src/warn/warnDeprecations.ts | 4 +- .../src/warn/warnMutuallyExclusive.ts | 4 +- packages/utilities/tsconfig.json | 1 + 706 files changed, 1941 insertions(+), 1869 deletions(-) create mode 100644 change/@fluentui-react-ba8016c3-b08c-4f1d-a7fd-3fe38fa3d1c5.json create mode 100644 change/@fluentui-style-utilities-76196fa2-6fa6-4df0-b27b-bdaf4bc346f2.json create mode 100644 change/@fluentui-utilities-8811d00b-a073-4a20-af9a-a7765dc8a929.json diff --git a/change/@fluentui-react-ba8016c3-b08c-4f1d-a7fd-3fe38fa3d1c5.json b/change/@fluentui-react-ba8016c3-b08c-4f1d-a7fd-3fe38fa3d1c5.json new file mode 100644 index 00000000000000..56ebce44c2f3db --- /dev/null +++ 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": "dzearing@hotmail.com", + "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 new file mode 100644 index 00000000000000..002024b6729589 --- /dev/null +++ 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": "dzearing@hotmail.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-utilities-8811d00b-a073-4a20-af9a-a7765dc8a929.json b/change/@fluentui-utilities-8811d00b-a073-4a20-af9a-a7765dc8a929.json new file mode 100644 index 00000000000000..ec2f44c491dde7 --- /dev/null +++ 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": "dzearing@hotmail.com", + "dependentChangeType": "patch" +} diff --git a/packages/react/etc/react.api.md b/packages/react/etc/react.api.md index 553e6f441b85da..a7015e7824f190 100644 --- 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 { diff --git a/packages/react/src/common/DocPage.types.ts b/packages/react/src/common/DocPage.types.ts index 118ffefe4feff1..54c619fb242e10 100644 --- 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 index ed7adc9384b601..49cbb73cae6ff2 100644 --- 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( testInfo: Omit, 'componentPath'> & { componentPath?: string }, diff --git a/packages/react/src/components/ActivityItem/ActivityItem.classNames.ts b/packages/react/src/components/ActivityItem/ActivityItem.classNames.ts index c3660239ac8c24..86434f7eae8442 100644 --- 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 index 15b66e1ad43533..09797a3b99b611 100644 --- 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 index b755294ac5f69d..7de1641eef2a8e 100644 --- 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 index 918ab9ed1b9092..be14dc32000938 100644 --- 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 index f9fe8b53f66549..a608c090f25e5e 100644 --- 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 index cf3e9258b409d3..b3308bb68cefe0 100644 --- 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 index a2bbacd86f3847..60ed0ac969a86d 100644 --- 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 = props => { return { diff --git a/packages/react/src/components/Announced/Announced.ts b/packages/react/src/components/Announced/Announced.ts index ef86d66485b31a..c9206e3e133eb2 100644 --- 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 = styled( AnnouncedBase, diff --git a/packages/react/src/components/Announced/Announced.types.ts b/packages/react/src/components/Announced/Announced.types.ts index 0a9a0cd468288d..77d6b7f9c487ac 100644 --- 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 index 609d2a716dd167..63c0e51178c41c 100644 --- 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 index 34d07c5e73178d..b1551d432fbb9c 100644 --- 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 index d05d5501f9259d..07128c31aa4334 100644 --- 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 index 3727ec30890e53..a7fe35a9e160ff 100644 --- a/packages/react/src/components/Breadcrumb/Breadcrumb.base.tsx +++ b/packages/react/src/components/Breadcrumb/Breadcrumb.base.tsx @@ -6,7 +6,6 @@ import { getNativeProps, htmlElementProperties, } from '../../Utilities'; -import { IProcessedStyleSet } from '../../Styling'; import { FocusZone, FocusZoneDirection } from '../../FocusZone'; import { Link } from '../../Link'; import { Icon } from '../../Icon'; @@ -14,8 +13,9 @@ 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 index d9529b538a6676..84bff839bde5f1 100644 --- 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 index 05ca6b2511f397..6f4f995ccf8633 100644 --- 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 index f914e24043aa76..20e2b358988985 100644 --- 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 = styled< IBreadcrumbProps, diff --git a/packages/react/src/components/Breadcrumb/Breadcrumb.types.ts b/packages/react/src/components/Breadcrumb/Breadcrumb.types.ts index ec9eb9c91eeb50..294fd9c5d47264 100644 --- 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 index 60a4bc935d0198..84d9cad91e2338 100644 --- 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 index 8290b458b69180..ed763d48dbf769 100644 --- 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 index f6b7dabd5e0b5f..4a05c847e144ef 100644 --- 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 index a61c2fb8caffb6..62bfd75c466cf8 100644 --- 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 index b7137415ab97c2..4abdfd4a5bb669 100644 --- 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 index 7e4225327779cb..44395bfb56713b 100644 --- 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 index 9329792f7552ae..0d5d40b7e22f46 100644 --- 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. diff --git a/packages/react/src/components/Button/Button.types.ts b/packages/react/src/components/Button/Button.types.ts index 7dc97af7c37355..0558661c6732ea 100644 --- a/packages/react/src/components/Button/Button.types.ts +++ b/packages/react/src/components/Button/Button.types.ts @@ -1,13 +1,14 @@ import * as React from 'react'; import { BaseButton } from './BaseButton'; import { Button } from './Button'; -import { IButtonClassNames } from './BaseButton.classNames'; -import { ISplitButtonClassNames } from './SplitButton/SplitButton.classNames'; -import { IRefObject, IRenderFunction, KeyCodes, IComponentAs } from '../../Utilities'; -import { IContextualMenuProps } from '../../ContextualMenu'; -import { IIconProps } from '../../Icon'; -import { IStyle, ITheme } from '../../Styling'; -import { IKeytipProps } from '../../Keytip'; +import { KeyCodes } from '../../Utilities'; +import type { IButtonClassNames } from './BaseButton.classNames'; +import type { ISplitButtonClassNames } from './SplitButton/SplitButton.classNames'; +import type { IRefObject, IRenderFunction, IComponentAs } from '../../Utilities'; +import type { IContextualMenuProps } from '../../ContextualMenu'; +import type { IIconProps } from '../../Icon'; +import type { IStyle, ITheme } from '../../Styling'; +import type { IKeytipProps } from '../../Keytip'; /** * {@docCategory Button} diff --git a/packages/react/src/components/Button/ButtonThemes.ts b/packages/react/src/components/Button/ButtonThemes.ts index 61cbeb42b3d202..d1c7a378a1b735 100644 --- a/packages/react/src/components/Button/ButtonThemes.ts +++ b/packages/react/src/components/Button/ButtonThemes.ts @@ -1,6 +1,7 @@ -import { IButtonStyles } from './Button.types'; -import { ITheme, HighContrastSelector, IRawStyle, getHighContrastNoAdjustStyle } from '../../Styling'; +import { HighContrastSelector, getHighContrastNoAdjustStyle } from '../../Styling'; import { IsFocusVisibleClassName } from '../../Utilities'; +import type { IButtonStyles } from './Button.types'; +import type { ITheme, IRawStyle } from '../../Styling'; const splitButtonDividerBaseStyles = (): IRawStyle => { return { diff --git a/packages/react/src/components/Button/CommandBarButton/CommandBarButton.styles.ts b/packages/react/src/components/Button/CommandBarButton/CommandBarButton.styles.ts index d348c92386ea6b..f10f2c9e02032b 100644 --- a/packages/react/src/components/Button/CommandBarButton/CommandBarButton.styles.ts +++ b/packages/react/src/components/Button/CommandBarButton/CommandBarButton.styles.ts @@ -1,15 +1,10 @@ -import { IButtonStyles } from '../Button.types'; -import { - ITheme, - concatStyleSets, - getFocusStyle, - HighContrastSelector, - getHighContrastNoAdjustStyle, -} from '../../../Styling'; +import { concatStyleSets, getFocusStyle, HighContrastSelector, getHighContrastNoAdjustStyle } from '../../../Styling'; import { memoizeFunction } from '../../../Utilities'; import { getStyles as getBaseButtonStyles } from '../BaseButton.styles'; import { getStyles as getSplitButtonStyles } from '../SplitButton/SplitButton.styles'; import { ButtonGlobalClassNames } from '../BaseButton.classNames'; +import type { IButtonStyles } from '../Button.types'; +import type { ITheme } from '../../../Styling'; export const getStyles = memoizeFunction( (theme: ITheme, customStyles?: IButtonStyles, focusInset?: string, focusColor?: string): IButtonStyles => { diff --git a/packages/react/src/components/Button/CommandBarButton/CommandBarButton.tsx b/packages/react/src/components/Button/CommandBarButton/CommandBarButton.tsx index a02b1c005c7a4f..cc9b5af7b3892a 100644 --- a/packages/react/src/components/Button/CommandBarButton/CommandBarButton.tsx +++ b/packages/react/src/components/Button/CommandBarButton/CommandBarButton.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 './CommandBarButton.styles'; +import type { IButtonProps } from '../Button.types'; /** * {@docCategory Button} diff --git a/packages/react/src/components/Button/CompoundButton/CompoundButton.styles.ts b/packages/react/src/components/Button/CompoundButton/CompoundButton.styles.ts index d8945c2d3617f4..a06c465ac752ee 100644 --- a/packages/react/src/components/Button/CompoundButton/CompoundButton.styles.ts +++ b/packages/react/src/components/Button/CompoundButton/CompoundButton.styles.ts @@ -1,15 +1,10 @@ -import { IButtonStyles } from '../Button.types'; -import { - ITheme, - concatStyleSets, - FontWeights, - HighContrastSelector, - getHighContrastNoAdjustStyle, -} from '../../../Styling'; +import { concatStyleSets, FontWeights, HighContrastSelector, getHighContrastNoAdjustStyle } from '../../../Styling'; import { memoizeFunction } from '../../../Utilities'; import { getStyles as getBaseButtonStyles } from '../BaseButton.styles'; import { getStyles as getSplitButtonStyles } from '../SplitButton/SplitButton.styles'; import { primaryStyles, standardStyles } from '../ButtonThemes'; +import type { IButtonStyles } from '../Button.types'; +import type { ITheme } from '../../../Styling'; export const getStyles = memoizeFunction( (theme: ITheme, customStyles?: IButtonStyles, primary?: boolean): IButtonStyles => { diff --git a/packages/react/src/components/Button/CompoundButton/CompoundButton.tsx b/packages/react/src/components/Button/CompoundButton/CompoundButton.tsx index 8e99e7745aadc1..5afa8bd16f1ea4 100644 --- a/packages/react/src/components/Button/CompoundButton/CompoundButton.tsx +++ b/packages/react/src/components/Button/CompoundButton/CompoundButton.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { BaseButton } from '../BaseButton'; import { customizable } from '../../../Utilities'; -import { IButtonProps } from '../Button.types'; import { getStyles } from './CompoundButton.styles'; +import type { IButtonProps } from '../Button.types'; /** * {@docCategory Button} diff --git a/packages/react/src/components/Button/DefaultButton/DefaultButton.styles.ts b/packages/react/src/components/Button/DefaultButton/DefaultButton.styles.ts index fb357df1555f12..d95dd4e78f510b 100644 --- a/packages/react/src/components/Button/DefaultButton/DefaultButton.styles.ts +++ b/packages/react/src/components/Button/DefaultButton/DefaultButton.styles.ts @@ -1,10 +1,11 @@ -import { IButtonStyles } from '../Button.types'; -import { ITheme, concatStyleSets, FontWeights } from '../../../Styling'; +import { concatStyleSets, FontWeights } from '../../../Styling'; import { memoizeFunction } from '../../../Utilities'; import { getStyles as getBaseButtonStyles } from '../BaseButton.styles'; import { getStyles as getSplitButtonStyles } from '../SplitButton/SplitButton.styles'; import { primaryStyles, standardStyles } from '../ButtonThemes'; +import type { IButtonStyles } from '../Button.types'; +import type { ITheme } from '../../../Styling'; const DEFAULT_BUTTON_HEIGHT = '32px'; const DEFAULT_BUTTON_MIN_WIDTH = '80px'; diff --git a/packages/react/src/components/Button/DefaultButton/DefaultButton.tsx b/packages/react/src/components/Button/DefaultButton/DefaultButton.tsx index 350d7efad349d2..070dbedd384e0f 100644 --- a/packages/react/src/components/Button/DefaultButton/DefaultButton.tsx +++ b/packages/react/src/components/Button/DefaultButton/DefaultButton.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 './DefaultButton.styles'; +import type { IButtonProps } from '../Button.types'; /** * {@docCategory Button} diff --git a/packages/react/src/components/Button/IconButton/IconButton.styles.ts b/packages/react/src/components/Button/IconButton/IconButton.styles.ts index 6adea6c6d6a433..e4b39fbccc1228 100644 --- a/packages/react/src/components/Button/IconButton/IconButton.styles.ts +++ b/packages/react/src/components/Button/IconButton/IconButton.styles.ts @@ -1,8 +1,9 @@ -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 { getStyles as getSplitButtonStyles } from '../SplitButton/SplitButton.styles'; +import type { IButtonStyles } from '../Button.types'; +import type { ITheme } from '../../../Styling'; export const getStyles = memoizeFunction( (theme: ITheme, customStyles?: IButtonStyles): IButtonStyles => { diff --git a/packages/react/src/components/Button/IconButton/IconButton.tsx b/packages/react/src/components/Button/IconButton/IconButton.tsx index c95762286a380e..88596134d776e4 100644 --- a/packages/react/src/components/Button/IconButton/IconButton.tsx +++ b/packages/react/src/components/Button/IconButton/IconButton.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 './IconButton.styles'; +import type { IButtonProps } from '../Button.types'; /** * {@docCategory Button} diff --git a/packages/react/src/components/Button/MessageBarButton/MessageBarButton.styles.ts b/packages/react/src/components/Button/MessageBarButton/MessageBarButton.styles.ts index a8b46b294cff37..2ca7eef6ad0098 100644 --- a/packages/react/src/components/Button/MessageBarButton/MessageBarButton.styles.ts +++ b/packages/react/src/components/Button/MessageBarButton/MessageBarButton.styles.ts @@ -1,6 +1,7 @@ -import { IButtonStyles } from '../Button.types'; -import { ITheme, concatStyleSets, getFocusStyle } from '../../../Styling'; +import { concatStyleSets, getFocusStyle } from '../../../Styling'; import { memoizeFunction } from '../../../Utilities'; +import type { IButtonStyles } from '../Button.types'; +import type { ITheme } from '../../../Styling'; export const getStyles = memoizeFunction( (theme: ITheme, customStyles?: IButtonStyles): IButtonStyles => diff --git a/packages/react/src/components/Button/MessageBarButton/MessageBarButton.tsx b/packages/react/src/components/Button/MessageBarButton/MessageBarButton.tsx index 4f9735acaa89ca..82d71dba657ee9 100644 --- a/packages/react/src/components/Button/MessageBarButton/MessageBarButton.tsx +++ b/packages/react/src/components/Button/MessageBarButton/MessageBarButton.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { DefaultButton } from '../DefaultButton/DefaultButton'; import { customizable, nullRender } from '../../../Utilities'; -import { IButtonProps } from '../Button.types'; import { getStyles } from './MessageBarButton.styles'; +import type { IButtonProps } from '../Button.types'; /** * {@docCategory MessageBar} diff --git a/packages/react/src/components/Button/PrimaryButton/PrimaryButton.tsx b/packages/react/src/components/Button/PrimaryButton/PrimaryButton.tsx index b4c65eba39b89d..70c26406d1f96a 100644 --- a/packages/react/src/components/Button/PrimaryButton/PrimaryButton.tsx +++ b/packages/react/src/components/Button/PrimaryButton/PrimaryButton.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { customizable, nullRender } from '../../../Utilities'; import { DefaultButton } from '../DefaultButton/DefaultButton'; -import { IButtonProps } from '../Button.types'; +import type { IButtonProps } from '../Button.types'; /** * {@docCategory Button} diff --git a/packages/react/src/components/Button/SplitButton/SplitButton.classNames.ts b/packages/react/src/components/Button/SplitButton/SplitButton.classNames.ts index 600190fd8ab2b8..03bd7cacedb0e1 100644 --- a/packages/react/src/components/Button/SplitButton/SplitButton.classNames.ts +++ b/packages/react/src/components/Button/SplitButton/SplitButton.classNames.ts @@ -1,6 +1,6 @@ import { memoizeFunction } from '../../../Utilities'; import { mergeStyles } from '../../../Styling'; -import { IButtonStyles } from '../Button.types'; +import type { IButtonStyles } from '../Button.types'; export interface ISplitButtonClassNames { root?: string; diff --git a/packages/react/src/components/Button/SplitButton/SplitButton.styles.ts b/packages/react/src/components/Button/SplitButton/SplitButton.styles.ts index a5b0c0e1b1e2b4..6d8e828bc72b24 100644 --- a/packages/react/src/components/Button/SplitButton/SplitButton.styles.ts +++ b/packages/react/src/components/Button/SplitButton/SplitButton.styles.ts @@ -1,13 +1,7 @@ -import { IButtonStyles } from '../Button.types'; -import { - HighContrastSelector, - ITheme, - concatStyleSets, - getFocusStyle, - IStyle, - getHighContrastNoAdjustStyle, -} from '../../../Styling'; +import { HighContrastSelector, concatStyleSets, getFocusStyle, getHighContrastNoAdjustStyle } from '../../../Styling'; import { memoizeFunction } from '../../../Utilities'; +import type { IButtonStyles } from '../Button.types'; +import type { ITheme, IStyle } from '../../../Styling'; export const getStyles = memoizeFunction( (theme: ITheme, customStyles?: IButtonStyles): IButtonStyles => { diff --git a/packages/react/src/components/Button/index.ts b/packages/react/src/components/Button/index.ts index 0e8472a947c4c3..02627a1021c2ed 100644 --- a/packages/react/src/components/Button/index.ts +++ b/packages/react/src/components/Button/index.ts @@ -1,5 +1,4 @@ export * from './BaseButton'; -export { IButtonClassNames } from './BaseButton.classNames'; export * from './Button.types'; export * from './Button'; export * from './ActionButton/ActionButton'; @@ -11,3 +10,4 @@ export * from './MessageBarButton/MessageBarButton'; export * from './PrimaryButton/PrimaryButton'; export * from './IconButton/IconButton'; export * from './SplitButton/SplitButton.classNames'; +export type { IButtonClassNames } from './BaseButton.classNames'; diff --git a/packages/react/src/components/Calendar/Calendar.base.tsx b/packages/react/src/components/Calendar/Calendar.base.tsx index 5a50c38864f741..73e66520c4e17d 100644 --- a/packages/react/src/components/Calendar/Calendar.base.tsx +++ b/packages/react/src/components/Calendar/Calendar.base.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { ICalendarProps, ICalendarStyleProps, ICalendarStyles } from './Calendar.types'; import { DayOfWeek, FirstWeekOfYear, @@ -11,8 +10,6 @@ import { } from '@fluentui/date-time-utilities'; import { CalendarDay } from './CalendarDay/CalendarDay'; import { CalendarMonth } from './CalendarMonth/CalendarMonth'; -import { ICalendarDay } from './CalendarDay/CalendarDay.types'; -import { ICalendarMonth } from './CalendarMonth/CalendarMonth.types'; import { css, KeyCodes, @@ -25,6 +22,9 @@ import { } from '@fluentui/utilities'; import { useControllableValue } from '@fluentui/react-hooks'; import { defaultCalendarNavigationIcons } from './defaults'; +import type { ICalendarProps, ICalendarStyleProps, ICalendarStyles } from './Calendar.types'; +import type { ICalendarDay } from './CalendarDay/CalendarDay.types'; +import type { ICalendarMonth } from './CalendarMonth/CalendarMonth.types'; const MIN_SIZE_FORCE_OVERLAY = 440; diff --git a/packages/react/src/components/Calendar/Calendar.styles.ts b/packages/react/src/components/Calendar/Calendar.styles.ts index a199e1bdf88709..d284245a86e34b 100644 --- a/packages/react/src/components/Calendar/Calendar.styles.ts +++ b/packages/react/src/components/Calendar/Calendar.styles.ts @@ -1,5 +1,5 @@ -import { ICalendarStyleProps, ICalendarStyles } from './Calendar.types'; import { normalize, FontSizes, getFocusStyle } from '@fluentui/style-utilities'; +import type { ICalendarStyleProps, ICalendarStyles } from './Calendar.types'; export const styles = (props: ICalendarStyleProps): ICalendarStyles => { const { className, theme, isDayPickerVisible, isMonthPickerVisible, showWeekNumbers } = props; diff --git a/packages/react/src/components/Calendar/Calendar.tsx b/packages/react/src/components/Calendar/Calendar.tsx index 52e6db546e9bbe..df38ca8050653b 100644 --- a/packages/react/src/components/Calendar/Calendar.tsx +++ b/packages/react/src/components/Calendar/Calendar.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled } from '@fluentui/utilities'; import { CalendarBase } from './Calendar.base'; import { styles } from './Calendar.styles'; -import { ICalendarProps } from './Calendar.types'; +import type { ICalendarProps } from './Calendar.types'; export const Calendar: React.FunctionComponent = styled(CalendarBase, styles, undefined, { scope: 'Calendar', diff --git a/packages/react/src/components/Calendar/Calendar.types.ts b/packages/react/src/components/Calendar/Calendar.types.ts index ae8c9328b57497..9042274019ec19 100644 --- a/packages/react/src/components/Calendar/Calendar.types.ts +++ b/packages/react/src/components/Calendar/Calendar.types.ts @@ -1,15 +1,10 @@ import * as React from 'react'; -import { IRefObject, IBaseProps, IStyleFunctionOrObject } from '@fluentui/utilities'; -import { IStyle, ITheme } from '@fluentui/style-utilities'; -import { ICalendarDayProps } from './CalendarDay/CalendarDay.types'; -import { ICalendarMonthProps } from './CalendarMonth/CalendarMonth.types'; -import { - DayOfWeek, - FirstWeekOfYear, - DateRangeType, - ICalendarStrings, - IDateFormatting, -} from '@fluentui/date-time-utilities'; +import { DayOfWeek, FirstWeekOfYear, DateRangeType } from '@fluentui/date-time-utilities'; +import type { IRefObject, IBaseProps, IStyleFunctionOrObject } from '@fluentui/utilities'; +import type { IStyle, ITheme } from '@fluentui/style-utilities'; +import type { ICalendarDayProps } from './CalendarDay/CalendarDay.types'; +import type { ICalendarMonthProps } from './CalendarMonth/CalendarMonth.types'; +import type { ICalendarStrings, IDateFormatting } from '@fluentui/date-time-utilities'; /** * {@docCategory Calendar} diff --git a/packages/react/src/components/Calendar/CalendarDay/CalendarDay.base.tsx b/packages/react/src/components/Calendar/CalendarDay/CalendarDay.base.tsx index 140d1e6302ca47..0647dd83097a09 100644 --- a/packages/react/src/components/Calendar/CalendarDay/CalendarDay.base.tsx +++ b/packages/react/src/components/Calendar/CalendarDay/CalendarDay.base.tsx @@ -2,11 +2,11 @@ import * as React from 'react'; import { KeyCodes, css, classNamesFunction, format } from '@fluentui/utilities'; import { Icon } from '../../../Icon'; import { addMonths, compareDatePart, getMonthStart, getMonthEnd } from '@fluentui/date-time-utilities'; -import { ICalendarDayProps, ICalendarDayStyleProps, ICalendarDayStyles } from './CalendarDay.types'; -import { IProcessedStyleSet } from '@fluentui/style-utilities'; import { CalendarDayGrid } from '../../CalendarDayGrid/CalendarDayGrid'; -import { ICalendarDayGrid } from '../../CalendarDayGrid/CalendarDayGrid.types'; import { useId } from '@fluentui/react-hooks'; +import type { ICalendarDayProps, ICalendarDayStyleProps, ICalendarDayStyles } from './CalendarDay.types'; +import type { IProcessedStyleSet } from '@fluentui/style-utilities'; +import type { ICalendarDayGrid } from '../../CalendarDayGrid/CalendarDayGrid.types'; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/components/Calendar/CalendarDay/CalendarDay.styles.ts b/packages/react/src/components/Calendar/CalendarDay/CalendarDay.styles.ts index da06290c276f59..0c23f4273ab2eb 100644 --- a/packages/react/src/components/Calendar/CalendarDay/CalendarDay.styles.ts +++ b/packages/react/src/components/Calendar/CalendarDay/CalendarDay.styles.ts @@ -1,5 +1,5 @@ -import { ICalendarDayStyleProps, ICalendarDayStyles } from './CalendarDay.types'; import { normalize, FontSizes, FontWeights, getFocusStyle, AnimationStyles } from '@fluentui/style-utilities'; +import type { ICalendarDayStyleProps, ICalendarDayStyles } from './CalendarDay.types'; export const styles = (props: ICalendarDayStyleProps): ICalendarDayStyles => { const { className, theme, headerIsClickable, showWeekNumbers } = props; diff --git a/packages/react/src/components/Calendar/CalendarDay/CalendarDay.tsx b/packages/react/src/components/Calendar/CalendarDay/CalendarDay.tsx index 957c76357f7da6..564404fadf29ce 100644 --- a/packages/react/src/components/Calendar/CalendarDay/CalendarDay.tsx +++ b/packages/react/src/components/Calendar/CalendarDay/CalendarDay.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { CalendarDayBase } from './CalendarDay.base'; import { styles } from './CalendarDay.styles'; import { styled } from '../../../Utilities'; -import { ICalendarDayProps } from './CalendarDay.types'; +import type { ICalendarDayProps } from './CalendarDay.types'; export const CalendarDay: React.FunctionComponent = styled(CalendarDayBase, styles, undefined, { scope: 'CalendarDay', diff --git a/packages/react/src/components/Calendar/CalendarDay/CalendarDay.types.ts b/packages/react/src/components/Calendar/CalendarDay/CalendarDay.types.ts index 52ac0bf2a93fd2..fe7cf11a81014b 100644 --- a/packages/react/src/components/Calendar/CalendarDay/CalendarDay.types.ts +++ b/packages/react/src/components/Calendar/CalendarDay/CalendarDay.types.ts @@ -1,12 +1,12 @@ -import { IBaseProps, IRefObject, IStyleFunctionOrObject } from '@fluentui/utilities'; -import { ICalendarNavigationIcons } from '../Calendar.types'; -import { IStyle, ITheme } from '@fluentui/style-utilities'; -import { +import type { IBaseProps, IRefObject, IStyleFunctionOrObject } from '@fluentui/utilities'; +import type { ICalendarNavigationIcons } from '../Calendar.types'; +import type { IStyle, ITheme } from '@fluentui/style-utilities'; +import type { ICalendarDayGridProps, ICalendarDayGridStyleProps, ICalendarDayGridStyles, } from '../../CalendarDayGrid/CalendarDayGrid.types'; -import { ICalendarStrings, IDateFormatting } from '@fluentui/date-time-utilities'; +import type { ICalendarStrings, IDateFormatting } from '@fluentui/date-time-utilities'; /** * {@docCategory Calendar} diff --git a/packages/react/src/components/Calendar/CalendarMonth/CalendarMonth.base.tsx b/packages/react/src/components/Calendar/CalendarMonth/CalendarMonth.base.tsx index b4b4444e092693..4a2661b9df1373 100644 --- a/packages/react/src/components/Calendar/CalendarMonth/CalendarMonth.base.tsx +++ b/packages/react/src/components/Calendar/CalendarMonth/CalendarMonth.base.tsx @@ -11,13 +11,13 @@ import { DEFAULT_DATE_FORMATTING, } from '@fluentui/date-time-utilities'; import { Icon } from '../../../Icon'; -import { ICalendarMonthProps, ICalendarMonthStyles, ICalendarMonthStyleProps } from './CalendarMonth.types'; import { getStyles } from './CalendarMonth.styles'; import { css, getRTL, classNamesFunction, KeyCodes, format, getPropsWithDefaults } from '@fluentui/utilities'; -import { ICalendarYear, ICalendarYearRange } from '../CalendarYear/CalendarYear.types'; import { CalendarYear } from '../CalendarYear/CalendarYear'; import { usePrevious } from '@fluentui/react-hooks'; import { defaultCalendarNavigationIcons } from '../defaults'; +import type { ICalendarMonthProps, ICalendarMonthStyles, ICalendarMonthStyleProps } from './CalendarMonth.types'; +import type { ICalendarYear, ICalendarYearRange } from '../CalendarYear/CalendarYear.types'; const MONTHS_PER_ROW = 4; diff --git a/packages/react/src/components/Calendar/CalendarMonth/CalendarMonth.styles.ts b/packages/react/src/components/Calendar/CalendarMonth/CalendarMonth.styles.ts index 2eecad5215cd17..3dc2faac718023 100644 --- a/packages/react/src/components/Calendar/CalendarMonth/CalendarMonth.styles.ts +++ b/packages/react/src/components/Calendar/CalendarMonth/CalendarMonth.styles.ts @@ -1,5 +1,5 @@ -import { ICalendarMonthStyleProps, ICalendarMonthStyles } from './CalendarMonth.types'; import { getStyles as getPickerStyles } from '../CalendarPicker/CalendarPicker.styles'; +import type { ICalendarMonthStyleProps, ICalendarMonthStyles } from './CalendarMonth.types'; export const getStyles = (props: ICalendarMonthStyleProps): ICalendarMonthStyles => { /* Return styles from the base class. diff --git a/packages/react/src/components/Calendar/CalendarMonth/CalendarMonth.tsx b/packages/react/src/components/Calendar/CalendarMonth/CalendarMonth.tsx index 93f75a8ce1cdcd..e2097fae123cf8 100644 --- a/packages/react/src/components/Calendar/CalendarMonth/CalendarMonth.tsx +++ b/packages/react/src/components/Calendar/CalendarMonth/CalendarMonth.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { CalendarMonthBase } from './CalendarMonth.base'; import { getStyles } from './CalendarMonth.styles'; import { styled } from '../../../Utilities'; -import { ICalendarMonthProps } from './CalendarMonth.types'; +import type { ICalendarMonthProps } from './CalendarMonth.types'; export const CalendarMonth: React.FunctionComponent = styled( CalendarMonthBase, diff --git a/packages/react/src/components/Calendar/CalendarMonth/CalendarMonth.types.ts b/packages/react/src/components/Calendar/CalendarMonth/CalendarMonth.types.ts index 716115f0ae0785..6c0f160ade6a5d 100644 --- a/packages/react/src/components/Calendar/CalendarMonth/CalendarMonth.types.ts +++ b/packages/react/src/components/Calendar/CalendarMonth/CalendarMonth.types.ts @@ -1,8 +1,9 @@ -import { IBaseProps, IRefObject, IStyleFunctionOrObject } from '@fluentui/utilities'; -import { ICalendarNavigationIcons, AnimationDirection } from '../Calendar.types'; -import { ITheme } from '@fluentui/style-utilities'; -import { ICalendarPickerStyleProps, ICalendarPickerStyles } from '../CalendarPicker/CalendarPicker.types'; -import { ICalendarStrings, IDateFormatting } from '@fluentui/date-time-utilities'; +import { AnimationDirection } from '../Calendar.types'; +import type { IBaseProps, IRefObject, IStyleFunctionOrObject } from '@fluentui/utilities'; +import type { ICalendarNavigationIcons } from '../Calendar.types'; +import type { ITheme } from '@fluentui/style-utilities'; +import type { ICalendarPickerStyleProps, ICalendarPickerStyles } from '../CalendarPicker/CalendarPicker.types'; +import type { ICalendarStrings, IDateFormatting } from '@fluentui/date-time-utilities'; /** * {@docCategory Calendar} diff --git a/packages/react/src/components/Calendar/CalendarPicker/CalendarPicker.styles.ts b/packages/react/src/components/Calendar/CalendarPicker/CalendarPicker.styles.ts index 07ef44277a5d68..88fdfa5ffc3b13 100644 --- a/packages/react/src/components/Calendar/CalendarPicker/CalendarPicker.styles.ts +++ b/packages/react/src/components/Calendar/CalendarPicker/CalendarPicker.styles.ts @@ -1,15 +1,15 @@ -import { ICalendarPickerStyleProps, ICalendarPickerStyles } from './CalendarPicker.types'; import { normalize, FontSizes, FontWeights, getFocusStyle, - IRawStyle, AnimationStyles, HighContrastSelector, getHighContrastNoAdjustStyle, } from '@fluentui/style-utilities'; import { AnimationDirection } from '../Calendar.types'; +import type { ICalendarPickerStyleProps, ICalendarPickerStyles } from './CalendarPicker.types'; +import type { IRawStyle } from '@fluentui/style-utilities'; export const getStyles = (props: ICalendarPickerStyleProps): ICalendarPickerStyles => { const { diff --git a/packages/react/src/components/Calendar/CalendarPicker/CalendarPicker.types.ts b/packages/react/src/components/Calendar/CalendarPicker/CalendarPicker.types.ts index 9787b1caf3c1c0..5cfd8989df990f 100644 --- a/packages/react/src/components/Calendar/CalendarPicker/CalendarPicker.types.ts +++ b/packages/react/src/components/Calendar/CalendarPicker/CalendarPicker.types.ts @@ -1,5 +1,5 @@ -import { IStyle, ITheme } from '@fluentui/style-utilities'; import { AnimationDirection } from '../Calendar.types'; +import type { IStyle, ITheme } from '@fluentui/style-utilities'; /** * {@docCategory Calendar} diff --git a/packages/react/src/components/Calendar/CalendarYear/CalendarYear.base.tsx b/packages/react/src/components/Calendar/CalendarYear/CalendarYear.base.tsx index afb83061a5427b..c19df3c0f3d562 100644 --- a/packages/react/src/components/Calendar/CalendarYear/CalendarYear.base.tsx +++ b/packages/react/src/components/Calendar/CalendarYear/CalendarYear.base.tsx @@ -1,5 +1,10 @@ import * as React from 'react'; -import { +import { KeyCodes, getRTL, classNamesFunction, css, format } from '../../../Utilities'; +import { FocusZone } from '../../../FocusZone'; +import { Icon } from '../../../Icon'; +import { usePrevious } from '@fluentui/react-hooks'; +import { defaultCalendarNavigationIcons } from '../defaults'; +import type { ICalendarYearStrings, ICalendarYearProps, ICalendarYearRange, @@ -7,11 +12,7 @@ import { ICalendarYearStyleProps, ICalendarYearStyles, } from './CalendarYear.types'; -import { KeyCodes, getRTL, classNamesFunction, css, format, IRefObject } from '../../../Utilities'; -import { FocusZone } from '../../../FocusZone'; -import { Icon } from '../../../Icon'; -import { usePrevious } from '@fluentui/react-hooks'; -import { defaultCalendarNavigationIcons } from '../defaults'; +import type { IRefObject } from '../../../Utilities'; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/components/Calendar/CalendarYear/CalendarYear.styles.ts b/packages/react/src/components/Calendar/CalendarYear/CalendarYear.styles.ts index e2ba226fecd0d6..1273702c504f12 100644 --- a/packages/react/src/components/Calendar/CalendarYear/CalendarYear.styles.ts +++ b/packages/react/src/components/Calendar/CalendarYear/CalendarYear.styles.ts @@ -1,5 +1,5 @@ -import { ICalendarYearStyleProps, ICalendarYearStyles } from './CalendarYear.types'; import { getStyles as getPickerStyles } from '../CalendarPicker/CalendarPicker.styles'; +import type { ICalendarYearStyleProps, ICalendarYearStyles } from './CalendarYear.types'; export const getStyles = (props: ICalendarYearStyleProps): ICalendarYearStyles => { /* Return styles from the base class. diff --git a/packages/react/src/components/Calendar/CalendarYear/CalendarYear.tsx b/packages/react/src/components/Calendar/CalendarYear/CalendarYear.tsx index 68ed59bd376c62..508f1511740979 100644 --- a/packages/react/src/components/Calendar/CalendarYear/CalendarYear.tsx +++ b/packages/react/src/components/Calendar/CalendarYear/CalendarYear.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { getStyles } from './CalendarYear.styles'; import { styled } from '../../../Utilities'; import { CalendarYearBase } from './CalendarYear.base'; -import { ICalendarYearProps } from './CalendarYear.types'; +import type { ICalendarYearProps } from './CalendarYear.types'; export const CalendarYear: React.FunctionComponent = styled( CalendarYearBase, diff --git a/packages/react/src/components/Calendar/CalendarYear/CalendarYear.types.ts b/packages/react/src/components/Calendar/CalendarYear/CalendarYear.types.ts index 4325df88d65435..067f60e29a44d5 100644 --- a/packages/react/src/components/Calendar/CalendarYear/CalendarYear.types.ts +++ b/packages/react/src/components/Calendar/CalendarYear/CalendarYear.types.ts @@ -1,8 +1,9 @@ import * as React from 'react'; -import { IBaseProps, IRefObject, IStyleFunctionOrObject } from '@fluentui/utilities'; -import { ICalendarNavigationIcons, AnimationDirection } from '../Calendar.types'; -import { ITheme } from '@fluentui/style-utilities'; -import { ICalendarPickerStyleProps, ICalendarPickerStyles } from '../CalendarPicker/CalendarPicker.types'; +import { AnimationDirection } from '../Calendar.types'; +import type { IBaseProps, IRefObject, IStyleFunctionOrObject } from '@fluentui/utilities'; +import type { ICalendarNavigationIcons } from '../Calendar.types'; +import type { ITheme } from '@fluentui/style-utilities'; +import type { ICalendarPickerStyleProps, ICalendarPickerStyles } from '../CalendarPicker/CalendarPicker.types'; /** * {@docCategory Calendar} diff --git a/packages/react/src/components/Calendar/defaults.ts b/packages/react/src/components/Calendar/defaults.ts index 2613d91e52cd9d..db18f972c99d92 100644 --- a/packages/react/src/components/Calendar/defaults.ts +++ b/packages/react/src/components/Calendar/defaults.ts @@ -1,5 +1,6 @@ -import { ICalendarNavigationIcons } from './Calendar.types'; -import { ICalendarStrings, DEFAULT_CALENDAR_STRINGS } from '@fluentui/date-time-utilities'; +import { DEFAULT_CALENDAR_STRINGS } from '@fluentui/date-time-utilities'; +import type { ICalendarNavigationIcons } from './Calendar.types'; +import type { ICalendarStrings } from '@fluentui/date-time-utilities'; export const defaultCalendarStrings: ICalendarStrings = DEFAULT_CALENDAR_STRINGS; diff --git a/packages/react/src/components/Calendar/index.ts b/packages/react/src/components/Calendar/index.ts index 677ed5279ca968..f9fab2324d8324 100644 --- a/packages/react/src/components/Calendar/index.ts +++ b/packages/react/src/components/Calendar/index.ts @@ -6,10 +6,5 @@ export * from './CalendarPicker/CalendarPicker.types'; export * from './CalendarYear/CalendarYear.types'; export * from '../CalendarDayGrid/CalendarDayGrid.types'; export * from './defaults'; -export { - DayOfWeek, - DateRangeType, - FirstWeekOfYear, - ICalendarStrings, - IDateFormatting, -} from '@fluentui/date-time-utilities'; +export { DayOfWeek, DateRangeType, FirstWeekOfYear } from '@fluentui/date-time-utilities'; +export type { ICalendarStrings, IDateFormatting } from '@fluentui/date-time-utilities'; diff --git a/packages/react/src/components/CalendarDayGrid/CalendarDayGrid.base.tsx b/packages/react/src/components/CalendarDayGrid/CalendarDayGrid.base.tsx index 5f50b46e489127..2d04a4c0264f1c 100644 --- a/packages/react/src/components/CalendarDayGrid/CalendarDayGrid.base.tsx +++ b/packages/react/src/components/CalendarDayGrid/CalendarDayGrid.base.tsx @@ -6,17 +6,21 @@ import { getDayGrid, getBoundedDateRange, isRestrictedDate, - IDay, DAYS_IN_WEEK, compareDates, DateRangeType, DayOfWeek, } from '@fluentui/date-time-utilities'; -import { ICalendarDayGridProps, ICalendarDayGridStyleProps, ICalendarDayGridStyles } from './CalendarDayGrid.types'; -import { IProcessedStyleSet } from '@fluentui/style-utilities'; import { usePrevious, useId } from '@fluentui/react-hooks'; import { CalendarMonthHeaderRow } from './CalendarMonthHeaderRow'; import { CalendarGridRow } from './CalendarGridRow'; +import type { IDay } from '@fluentui/date-time-utilities'; +import type { + ICalendarDayGridProps, + ICalendarDayGridStyleProps, + ICalendarDayGridStyles, +} from './CalendarDayGrid.types'; +import type { IProcessedStyleSet } from '@fluentui/style-utilities'; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/components/CalendarDayGrid/CalendarDayGrid.styles.ts b/packages/react/src/components/CalendarDayGrid/CalendarDayGrid.styles.ts index 8d95f76a31c01e..1122e9962f7a32 100644 --- a/packages/react/src/components/CalendarDayGrid/CalendarDayGrid.styles.ts +++ b/packages/react/src/components/CalendarDayGrid/CalendarDayGrid.styles.ts @@ -1,17 +1,17 @@ -import { ICalendarDayGridStyleProps, ICalendarDayGridStyles } from './CalendarDayGrid.types'; import { FontSizes, FontWeights, getFocusStyle, getGlobalClassNames, AnimationStyles, - IRawStyle, keyframes, HighContrastSelector, getHighContrastNoAdjustStyle, } from '@fluentui/style-utilities'; import { DateRangeType } from '@fluentui/date-time-utilities'; import { AnimationDirection } from '../Calendar/Calendar.types'; +import type { ICalendarDayGridStyleProps, ICalendarDayGridStyles } from './CalendarDayGrid.types'; +import type { IRawStyle } from '@fluentui/style-utilities'; const GlobalClassNames = { hoverStyle: 'ms-CalendarDay-hoverStyle', diff --git a/packages/react/src/components/CalendarDayGrid/CalendarDayGrid.tsx b/packages/react/src/components/CalendarDayGrid/CalendarDayGrid.tsx index 4f8fe47d556596..451fb33d1ee93e 100644 --- a/packages/react/src/components/CalendarDayGrid/CalendarDayGrid.tsx +++ b/packages/react/src/components/CalendarDayGrid/CalendarDayGrid.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { CalendarDayGridBase } from './CalendarDayGrid.base'; import { styles } from './CalendarDayGrid.styles'; import { styled } from '../../Utilities'; -import { ICalendarDayGridProps } from './CalendarDayGrid.types'; +import type { ICalendarDayGridProps } from './CalendarDayGrid.types'; export const CalendarDayGrid: React.FunctionComponent = styled( CalendarDayGridBase, diff --git a/packages/react/src/components/CalendarDayGrid/CalendarDayGrid.types.ts b/packages/react/src/components/CalendarDayGrid/CalendarDayGrid.types.ts index 1b51f1df79be68..edc0a9712b9630 100644 --- a/packages/react/src/components/CalendarDayGrid/CalendarDayGrid.types.ts +++ b/packages/react/src/components/CalendarDayGrid/CalendarDayGrid.types.ts @@ -1,14 +1,8 @@ -import { IBaseProps, IRefObject, IStyleFunctionOrObject } from '@fluentui/utilities'; import { AnimationDirection } from '../Calendar/Calendar.types'; -import { - ICalendarStrings, - DayOfWeek, - FirstWeekOfYear, - DateRangeType, - IDateFormatting, -} from '@fluentui/date-time-utilities'; -import { IStyle, ITheme, IProcessedStyleSet } from '@fluentui/style-utilities'; -import { IDayGridOptions } from '@fluentui/date-time-utilities'; +import { DayOfWeek, FirstWeekOfYear, DateRangeType } from '@fluentui/date-time-utilities'; +import type { IBaseProps, IRefObject, IStyleFunctionOrObject } from '@fluentui/utilities'; +import type { ICalendarStrings, IDateFormatting, IDayGridOptions } from '@fluentui/date-time-utilities'; +import type { IStyle, ITheme, IProcessedStyleSet } from '@fluentui/style-utilities'; /** * {@docCategory Calendar} diff --git a/packages/react/src/components/CalendarDayGrid/CalendarGridDayCell.tsx b/packages/react/src/components/CalendarDayGrid/CalendarGridDayCell.tsx index db03999fc5fbc5..9fbbe2c1b7cc9b 100644 --- a/packages/react/src/components/CalendarDayGrid/CalendarGridDayCell.tsx +++ b/packages/react/src/components/CalendarDayGrid/CalendarGridDayCell.tsx @@ -1,15 +1,9 @@ import * as React from 'react'; import { KeyCodes, css, getRTLSafeKeyCode } from '@fluentui/utilities'; -import { - addDays, - addWeeks, - compareDates, - findAvailableDate, - IAvailableDateOptions, - DateRangeType, -} from '@fluentui/date-time-utilities'; -import { IDayInfo } from './CalendarDayGrid.base'; -import { ICalendarGridRowProps } from './CalendarGridRow'; +import { addDays, addWeeks, compareDates, findAvailableDate, DateRangeType } from '@fluentui/date-time-utilities'; +import type { IAvailableDateOptions } from '@fluentui/date-time-utilities'; +import type { IDayInfo } from './CalendarDayGrid.base'; +import type { ICalendarGridRowProps } from './CalendarGridRow'; export interface ICalendarGridDayCellProps extends ICalendarGridRowProps { day: IDayInfo; diff --git a/packages/react/src/components/CalendarDayGrid/CalendarGridRow.tsx b/packages/react/src/components/CalendarDayGrid/CalendarGridRow.tsx index 6846a3f1001be8..3cd46aef50bdbc 100644 --- a/packages/react/src/components/CalendarDayGrid/CalendarGridRow.tsx +++ b/packages/react/src/components/CalendarDayGrid/CalendarGridRow.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; import { format } from '@fluentui/utilities'; import { getWeekNumbersInMonth } from '@fluentui/date-time-utilities'; -import { ICalendarDayGridProps, ICalendarDayGridStyles } from './CalendarDayGrid.types'; -import { IProcessedStyleSet } from '@fluentui/style-utilities'; import { CalendarGridDayCell } from './CalendarGridDayCell'; -import { IDayInfo, IWeekCorners } from './CalendarDayGrid.base'; +import type { ICalendarDayGridProps, ICalendarDayGridStyles } from './CalendarDayGrid.types'; +import type { IProcessedStyleSet } from '@fluentui/style-utilities'; +import type { IDayInfo, IWeekCorners } from './CalendarDayGrid.base'; export interface ICalendarGridRowProps extends ICalendarDayGridProps { classNames: IProcessedStyleSet; diff --git a/packages/react/src/components/CalendarDayGrid/CalendarMonthHeaderRow.tsx b/packages/react/src/components/CalendarDayGrid/CalendarMonthHeaderRow.tsx index 9857418287cddf..6f3390d2b9e631 100644 --- a/packages/react/src/components/CalendarDayGrid/CalendarMonthHeaderRow.tsx +++ b/packages/react/src/components/CalendarDayGrid/CalendarMonthHeaderRow.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; import { css, findIndex } from '@fluentui/utilities'; import { DAYS_IN_WEEK } from '@fluentui/date-time-utilities'; -import { ICalendarDayGridProps, ICalendarDayGridStyles } from './CalendarDayGrid.types'; -import { IProcessedStyleSet } from '@fluentui/style-utilities'; -import { IDayInfo } from './CalendarDayGrid.base'; +import type { ICalendarDayGridProps, ICalendarDayGridStyles } from './CalendarDayGrid.types'; +import type { IProcessedStyleSet } from '@fluentui/style-utilities'; +import type { IDayInfo } from './CalendarDayGrid.base'; export interface ICalendarDayMonthHeaderRowProps extends ICalendarDayGridProps { weeks: IDayInfo[][]; diff --git a/packages/react/src/components/Callout/Callout.test.tsx b/packages/react/src/components/Callout/Callout.test.tsx index 4ada3c07a0dac3..fcd3ffacf1efb3 100644 --- a/packages/react/src/components/Callout/Callout.test.tsx +++ b/packages/react/src/components/Callout/Callout.test.tsx @@ -4,10 +4,10 @@ import * as ReactTestUtils from 'react-dom/test-utils'; import { safeCreate } from '@fluentui/test-utilities'; import { isConformant } from '../../common/isConformant'; import { DirectionalHint } from '../../common/DirectionalHint'; -import { IPopupRestoreFocusParams } from '../../Popup'; import { resetIds } from '../../Utilities'; import { Callout } from './Callout'; import { CalloutContent } from './CalloutContent'; +import type { IPopupRestoreFocusParams } from '../../Popup'; describe('Callout', () => { beforeEach(() => { diff --git a/packages/react/src/components/Callout/Callout.tsx b/packages/react/src/components/Callout/Callout.tsx index b25c656db19b20..ead6fcf1953212 100644 --- a/packages/react/src/components/Callout/Callout.tsx +++ b/packages/react/src/components/Callout/Callout.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import { ICalloutProps } from './Callout.types'; import { CalloutContent } from './CalloutContent'; import { Layer } from '../../Layer'; +import type { ICalloutProps } from './Callout.types'; export const Callout: React.FunctionComponent = React.forwardRef( ({ layerProps, doNotLayer, ...rest }, forwardedRef) => { diff --git a/packages/react/src/components/Callout/Callout.types.ts b/packages/react/src/components/Callout/Callout.types.ts index 991bf95e80ce9d..fa3b6d36a9e53f 100644 --- a/packages/react/src/components/Callout/Callout.types.ts +++ b/packages/react/src/components/Callout/Callout.types.ts @@ -1,13 +1,11 @@ import * as React from 'react'; -import { IStyle, ITheme } from '../../Styling'; import { DirectionalHint } from '../../common/DirectionalHint'; -import { IRectangle, IStyleFunctionOrObject } from '../../Utilities'; -import { ICalloutPositionedInfo } from '../../Positioning'; -import { ILayerProps } from '../../Layer'; -import { Target } from '@fluentui/react-hooks'; -import { IPopupRestoreFocusParams } from '../../Popup'; - -export { Target }; +import type { IStyle, ITheme } from '../../Styling'; +import type { IRectangle, IStyleFunctionOrObject } from '../../Utilities'; +import type { ICalloutPositionedInfo } from '../../Positioning'; +import type { ILayerProps } from '../../Layer'; +import type { Target } from '@fluentui/react-hooks'; +import type { IPopupRestoreFocusParams } from '../../Popup'; /** * {@docCategory Callout} @@ -366,3 +364,5 @@ export interface ICalloutContentStyles { */ calloutMain: IStyle; } + +export type { Target }; diff --git a/packages/react/src/components/Callout/CalloutContent.base.tsx b/packages/react/src/components/Callout/CalloutContent.base.tsx index 82416c1d5600b5..09109e905d84e4 100644 --- a/packages/react/src/components/Callout/CalloutContent.base.tsx +++ b/packages/react/src/components/Callout/CalloutContent.base.tsx @@ -1,9 +1,6 @@ import * as React from 'react'; -import { ICalloutProps, ICalloutContentStyleProps, ICalloutContentStyles } from './Callout.types'; import { DirectionalHint } from '../../common/DirectionalHint'; import { - Point, - IRectangle, css, divProperties, elementContains, @@ -15,10 +12,7 @@ import { } from '../../Utilities'; import { positionCallout, - ICalloutPositionedInfo, - IPositionProps, getMaxHeight, - IPosition, RectangleEdge, positionCard, getBoundsFromTargetWindow, @@ -26,7 +20,11 @@ import { import { Popup } from '../../Popup'; import { classNamesFunction } from '../../Utilities'; import { AnimationClassNames } from '../../Styling'; -import { useMergedRefs, useAsync, useConst, useTarget, Target } from '@fluentui/react-hooks'; +import { useMergedRefs, useAsync, useConst, useTarget } from '@fluentui/react-hooks'; +import type { ICalloutProps, ICalloutContentStyleProps, ICalloutContentStyles } from './Callout.types'; +import type { Point, IRectangle } from '../../Utilities'; +import type { ICalloutPositionedInfo, IPositionProps, IPosition } from '../../Positioning'; +import type { Target } from '@fluentui/react-hooks'; const COMPONENT_NAME = 'CalloutContentBase'; diff --git a/packages/react/src/components/Callout/CalloutContent.styles.ts b/packages/react/src/components/Callout/CalloutContent.styles.ts index c4759e36b003aa..72bc86ede8d423 100644 --- a/packages/react/src/components/Callout/CalloutContent.styles.ts +++ b/packages/react/src/components/Callout/CalloutContent.styles.ts @@ -1,5 +1,6 @@ -import { HighContrastSelector, IRawStyle, focusClear, getGlobalClassNames, ZIndexes } from '../../Styling'; -import { ICalloutContentStyleProps, ICalloutContentStyles } from './Callout.types'; +import { HighContrastSelector, focusClear, getGlobalClassNames, ZIndexes } from '../../Styling'; +import type { IRawStyle } from '../../Styling'; +import type { ICalloutContentStyleProps, ICalloutContentStyles } from './Callout.types'; function getBeakStyle(beakWidth?: number): IRawStyle { return { diff --git a/packages/react/src/components/Callout/CalloutContent.tsx b/packages/react/src/components/Callout/CalloutContent.tsx index 90292b02d50d5d..fdd15f499c3237 100644 --- a/packages/react/src/components/Callout/CalloutContent.tsx +++ b/packages/react/src/components/Callout/CalloutContent.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { styled } from '../../Utilities'; -import { ICalloutProps } from './Callout.types'; import { CalloutContentBase } from './CalloutContent.base'; import { getStyles } from './CalloutContent.styles'; +import type { ICalloutProps } from './Callout.types'; export const CalloutContent: React.FunctionComponent = styled(CalloutContentBase, getStyles, undefined, { scope: 'CalloutContent', diff --git a/packages/react/src/components/Callout/FocusTrapCallout.tsx b/packages/react/src/components/Callout/FocusTrapCallout.tsx index 482a98a12b7dff..ae1f38ab07b37b 100644 --- a/packages/react/src/components/Callout/FocusTrapCallout.tsx +++ b/packages/react/src/components/Callout/FocusTrapCallout.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { Callout } from './Callout'; -import { IFocusTrapCalloutProps } from './FocusTrapCallout.types'; import { FocusTrapZone } from '../../FocusTrapZone'; +import type { IFocusTrapCalloutProps } from './FocusTrapCallout.types'; /** * A special Callout that uses FocusTrapZone to trap focus diff --git a/packages/react/src/components/Callout/FocusTrapCallout.types.ts b/packages/react/src/components/Callout/FocusTrapCallout.types.ts index e00ba430c13181..e8a0842126080e 100644 --- a/packages/react/src/components/Callout/FocusTrapCallout.types.ts +++ b/packages/react/src/components/Callout/FocusTrapCallout.types.ts @@ -1,5 +1,5 @@ -import { ICalloutProps } from './Callout.types'; -import { IFocusTrapZoneProps } from '../../FocusTrapZone'; +import type { ICalloutProps } from './Callout.types'; +import type { IFocusTrapZoneProps } from '../../FocusTrapZone'; /** * {@docCategory Callout} diff --git a/packages/react/src/components/Check/Check.base.tsx b/packages/react/src/components/Check/Check.base.tsx index 7697298eda9287..1e6027d1849fdc 100644 --- a/packages/react/src/components/Check/Check.base.tsx +++ b/packages/react/src/components/Check/Check.base.tsx @@ -1,8 +1,7 @@ import * as React from 'react'; -import { ICheckProps } from './Check.types'; import { Icon, FontIcon } from '../../Icon'; import { classNamesFunction } from '../../Utilities'; -import { ICheckStyleProps, ICheckStyles } from './Check.types'; +import type { ICheckProps, ICheckStyleProps, ICheckStyles } from './Check.types'; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/components/Check/Check.styles.ts b/packages/react/src/components/Check/Check.styles.ts index 96bdb09c1c51f6..97640716acc9d9 100644 --- a/packages/react/src/components/Check/Check.styles.ts +++ b/packages/react/src/components/Check/Check.styles.ts @@ -1,12 +1,7 @@ -import { ICheckStyleProps, ICheckStyles } from './Check.types'; -import { - HighContrastSelector, - IStyle, - getGlobalClassNames, - IconFontSizes, - getHighContrastNoAdjustStyle, -} from '../../Styling'; +import { HighContrastSelector, getGlobalClassNames, IconFontSizes, getHighContrastNoAdjustStyle } from '../../Styling'; import { getRTL } from '../../Utilities'; +import type { ICheckStyleProps, ICheckStyles } from './Check.types'; +import type { IStyle } from '../../Styling'; export const CheckGlobalClassNames = { root: 'ms-Check', diff --git a/packages/react/src/components/Check/Check.tsx b/packages/react/src/components/Check/Check.tsx index 2b075b7d153280..6cd764aec042b8 100644 --- a/packages/react/src/components/Check/Check.tsx +++ b/packages/react/src/components/Check/Check.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { styled } from '../../Utilities'; -import { ICheckProps, ICheckStyleProps, ICheckStyles } from './Check.types'; import { CheckBase } from './Check.base'; import { getStyles } from './Check.styles'; +import type { ICheckProps, ICheckStyleProps, ICheckStyles } from './Check.types'; export const Check: React.FunctionComponent = styled( CheckBase, diff --git a/packages/react/src/components/Check/Check.types.ts b/packages/react/src/components/Check/Check.types.ts index 88baf98e2a9530..5e8b9a316d98f1 100644 --- a/packages/react/src/components/Check/Check.types.ts +++ b/packages/react/src/components/Check/Check.types.ts @@ -1,6 +1,6 @@ import * as React from 'react'; -import { IStyle, ITheme } from '../../Styling'; -import { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; +import type { IStyle, ITheme } from '../../Styling'; +import type { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; /** * {@docCategory Check} diff --git a/packages/react/src/components/Checkbox/Checkbox.base.tsx b/packages/react/src/components/Checkbox/Checkbox.base.tsx index a079989d3f2f03..e5420a626496a3 100644 --- a/packages/react/src/components/Checkbox/Checkbox.base.tsx +++ b/packages/react/src/components/Checkbox/Checkbox.base.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { useControllableValue, useId, useMergedRefs, useWarnings } from '@fluentui/react-hooks'; import { useFocusRects, classNamesFunction } from '@fluentui/utilities'; import { Icon } from '../Icon/Icon'; -import { ICheckboxProps, ICheckboxStyleProps, ICheckboxStyles } from './Checkbox.types'; +import type { ICheckboxProps, ICheckboxStyleProps, ICheckboxStyles } from './Checkbox.types'; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/components/Checkbox/Checkbox.styles.ts b/packages/react/src/components/Checkbox/Checkbox.styles.ts index 1ba9c23d3bd1a0..cc0dd231f13a41 100644 --- a/packages/react/src/components/Checkbox/Checkbox.styles.ts +++ b/packages/react/src/components/Checkbox/Checkbox.styles.ts @@ -1,11 +1,7 @@ -import { ICheckboxStyleProps, ICheckboxStyles } from './Checkbox.types'; -import { - HighContrastSelector, - getGlobalClassNames, - IStyle, - getHighContrastNoAdjustStyle, -} from '@fluentui/style-utilities'; +import { HighContrastSelector, getGlobalClassNames, getHighContrastNoAdjustStyle } from '@fluentui/style-utilities'; import { IsFocusVisibleClassName } from '@fluentui/utilities'; +import type { ICheckboxStyleProps, ICheckboxStyles } from './Checkbox.types'; +import type { IStyle } from '@fluentui/style-utilities'; const GlobalClassNames = { root: 'ms-Checkbox', diff --git a/packages/react/src/components/Checkbox/Checkbox.test.tsx b/packages/react/src/components/Checkbox/Checkbox.test.tsx index 804db1b9733393..e622a74f7103f9 100644 --- a/packages/react/src/components/Checkbox/Checkbox.test.tsx +++ b/packages/react/src/components/Checkbox/Checkbox.test.tsx @@ -1,12 +1,13 @@ import * as React from 'react'; -import { ReactTestRenderer } from 'react-test-renderer'; import { create } from '@fluentui/utilities/lib/test'; import { mount, ReactWrapper } from 'enzyme'; import { Checkbox } from './Checkbox'; import { isConformant } from '../../common/isConformant'; -import { IRefObject, resetIds } from '@fluentui/utilities'; -import { ICheckbox } from './Checkbox.types'; +import { resetIds } from '@fluentui/utilities'; +import type { ReactTestRenderer } from 'react-test-renderer'; +import type { IRefObject } from '@fluentui/utilities'; +import type { ICheckbox } from './Checkbox.types'; let checkbox: ICheckbox | undefined; /** Use this as the componentRef when rendering a Checkbox. */ diff --git a/packages/react/src/components/Checkbox/Checkbox.tsx b/packages/react/src/components/Checkbox/Checkbox.tsx index 19ae3d1e4cda72..fd1cc00a0c8058 100644 --- a/packages/react/src/components/Checkbox/Checkbox.tsx +++ b/packages/react/src/components/Checkbox/Checkbox.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled } from '@fluentui/utilities'; import { CheckboxBase } from './Checkbox.base'; import { getStyles } from './Checkbox.styles'; -import { ICheckboxProps, ICheckboxStyleProps, ICheckboxStyles } from './Checkbox.types'; +import type { ICheckboxProps, ICheckboxStyleProps, ICheckboxStyles } from './Checkbox.types'; export const Checkbox: React.FunctionComponent = styled< ICheckboxProps, diff --git a/packages/react/src/components/Checkbox/Checkbox.types.ts b/packages/react/src/components/Checkbox/Checkbox.types.ts index a73909047a9242..cc6aa6ac78223d 100644 --- a/packages/react/src/components/Checkbox/Checkbox.types.ts +++ b/packages/react/src/components/Checkbox/Checkbox.types.ts @@ -1,7 +1,7 @@ import * as React from 'react'; -import { IStyle, ITheme } from '@fluentui/style-utilities'; -import { IRefObject, IRenderFunction, IStyleFunctionOrObject } from '@fluentui/utilities'; -import { IIconProps } from '../Icon/Icon.types'; +import type { IStyle, ITheme } from '@fluentui/style-utilities'; +import type { IRefObject, IRenderFunction, IStyleFunctionOrObject } from '@fluentui/utilities'; +import type { IIconProps } from '../Icon/Icon.types'; /** * Checkbox class interface. diff --git a/packages/react/src/components/ChoiceGroup/ChoiceGroup.base.tsx b/packages/react/src/components/ChoiceGroup/ChoiceGroup.base.tsx index b7b2f709c69548..2a82260a825b05 100644 --- a/packages/react/src/components/ChoiceGroup/ChoiceGroup.base.tsx +++ b/packages/react/src/components/ChoiceGroup/ChoiceGroup.base.tsx @@ -1,23 +1,17 @@ import * as React from 'react'; import { Label } from '../../Label'; -import { - classNamesFunction, - find, - getNativeProps, - divProperties, - IRefObject, - setFocusVisibility, -} from '../../Utilities'; -import { +import { classNamesFunction, find, getNativeProps, divProperties, setFocusVisibility } from '../../Utilities'; +import { ChoiceGroupOption } from './ChoiceGroupOption/index'; +import { useId, useControllableValue, useWarnings } from '@fluentui/react-hooks'; +import type { IRefObject } from '../../Utilities'; +import type { IChoiceGroupOption, IChoiceGroupProps, IChoiceGroupStyleProps, IChoiceGroupStyles, IChoiceGroup, } from './ChoiceGroup.types'; -import { IChoiceGroupOptionProps } from './ChoiceGroupOption/ChoiceGroupOption.types'; -import { ChoiceGroupOption } from './ChoiceGroupOption/index'; -import { useId, useControllableValue, useWarnings } from '@fluentui/react-hooks'; +import type { IChoiceGroupOptionProps } from './ChoiceGroupOption/ChoiceGroupOption.types'; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/components/ChoiceGroup/ChoiceGroup.styles.ts b/packages/react/src/components/ChoiceGroup/ChoiceGroup.styles.ts index 9fd6fe0b2723c7..fd58af064c72e0 100644 --- a/packages/react/src/components/ChoiceGroup/ChoiceGroup.styles.ts +++ b/packages/react/src/components/ChoiceGroup/ChoiceGroup.styles.ts @@ -1,5 +1,5 @@ -import { IChoiceGroupStyleProps, IChoiceGroupStyles } from './ChoiceGroup.types'; import { getGlobalClassNames } from '../../Styling'; +import type { IChoiceGroupStyleProps, IChoiceGroupStyles } from './ChoiceGroup.types'; const GlobalClassNames = { root: 'ms-ChoiceFieldGroup', diff --git a/packages/react/src/components/ChoiceGroup/ChoiceGroup.test.tsx b/packages/react/src/components/ChoiceGroup/ChoiceGroup.test.tsx index 750a6e8b5261b1..c715859926b7d4 100644 --- a/packages/react/src/components/ChoiceGroup/ChoiceGroup.test.tsx +++ b/packages/react/src/components/ChoiceGroup/ChoiceGroup.test.tsx @@ -4,10 +4,10 @@ import * as ReactTestUtils from 'react-dom/test-utils'; import * as renderer from 'react-test-renderer'; import { ChoiceGroup } from './ChoiceGroup'; -import { IChoiceGroupOption, IChoiceGroup, IChoiceGroupProps } from './ChoiceGroup.types'; import { merge, resetIds } from '../../Utilities'; import { mountAttached } from '../../common/testUtilities'; import { isConformant } from '../../common/isConformant'; +import type { IChoiceGroupOption, IChoiceGroup, IChoiceGroupProps } from './ChoiceGroup.types'; const TEST_OPTIONS: IChoiceGroupOption[] = [ { key: '1', text: '1', 'data-automation-id': 'auto1', autoFocus: true } as IChoiceGroupOption, diff --git a/packages/react/src/components/ChoiceGroup/ChoiceGroup.tsx b/packages/react/src/components/ChoiceGroup/ChoiceGroup.tsx index dc4617d29af87a..cb31f27a5436f1 100644 --- a/packages/react/src/components/ChoiceGroup/ChoiceGroup.tsx +++ b/packages/react/src/components/ChoiceGroup/ChoiceGroup.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { styled } from '../../Utilities'; import { ChoiceGroupBase } from './ChoiceGroup.base'; -import { IChoiceGroupProps, IChoiceGroupStyles, IChoiceGroupStyleProps } from './ChoiceGroup.types'; import { getStyles } from './ChoiceGroup.styles'; +import type { IChoiceGroupProps, IChoiceGroupStyles, IChoiceGroupStyleProps } from './ChoiceGroup.types'; export const ChoiceGroup: React.FunctionComponent = styled< IChoiceGroupProps, diff --git a/packages/react/src/components/ChoiceGroup/ChoiceGroup.types.ts b/packages/react/src/components/ChoiceGroup/ChoiceGroup.types.ts index 038819021f2bcd..21fee477d71ae6 100644 --- a/packages/react/src/components/ChoiceGroup/ChoiceGroup.types.ts +++ b/packages/react/src/components/ChoiceGroup/ChoiceGroup.types.ts @@ -1,9 +1,8 @@ import * as React from 'react'; - -import { IIconProps } from '../../Icon'; -import { IStyle, ITheme } from '../../Styling'; -import { IRefObject, IRenderFunction, IStyleFunctionOrObject } from '../../Utilities'; -import { +import type { IIconProps } from '../../Icon'; +import type { IStyle, ITheme } from '../../Styling'; +import type { IRefObject, IRenderFunction, IStyleFunctionOrObject } from '../../Utilities'; +import type { IChoiceGroupOptionStyleProps, IChoiceGroupOptionStyles, IChoiceGroupOptionProps, diff --git a/packages/react/src/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.base.tsx b/packages/react/src/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.base.tsx index 38ebad37644592..01ca4f0636b432 100644 --- a/packages/react/src/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.base.tsx +++ b/packages/react/src/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.base.tsx @@ -1,11 +1,6 @@ import * as React from 'react'; import { Image } from '../../../Image'; import { Icon } from '../../../Icon'; -import { - IChoiceGroupOptionProps, - IChoiceGroupOptionStyleProps, - IChoiceGroupOptionStyles, -} from './ChoiceGroupOption.types'; import { classNamesFunction, getNativeProps, @@ -14,6 +9,11 @@ import { composeRenderFunction, getPropsWithDefaults, } from '../../../Utilities'; +import type { + IChoiceGroupOptionProps, + IChoiceGroupOptionStyleProps, + IChoiceGroupOptionStyles, +} from './ChoiceGroupOption.types'; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.styles.ts b/packages/react/src/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.styles.ts index 8adc98841da4b5..c05f0db651de2b 100644 --- a/packages/react/src/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.styles.ts +++ b/packages/react/src/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.styles.ts @@ -1,6 +1,7 @@ -import { HighContrastSelector, IStyle, getGlobalClassNames, getHighContrastNoAdjustStyle } from '../../../Styling'; +import { HighContrastSelector, getGlobalClassNames, getHighContrastNoAdjustStyle } from '../../../Styling'; import { IsFocusVisibleClassName } from '../../../Utilities'; -import { IChoiceGroupOptionStyleProps, IChoiceGroupOptionStyles } from './ChoiceGroupOption.types'; +import type { IStyle } from '../../../Styling'; +import type { IChoiceGroupOptionStyleProps, IChoiceGroupOptionStyles } from './ChoiceGroupOption.types'; const GlobalClassNames = { root: 'ms-ChoiceField', diff --git a/packages/react/src/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.tsx b/packages/react/src/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.tsx index c2cc0be258d2aa..263fb3dbed1f25 100644 --- a/packages/react/src/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.tsx +++ b/packages/react/src/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; import { styled } from '../../../Utilities'; import { ChoiceGroupOptionBase } from './ChoiceGroupOption.base'; -import { +import { getStyles } from './ChoiceGroupOption.styles'; +import type { IChoiceGroupOptionProps, IChoiceGroupOptionStyleProps, IChoiceGroupOptionStyles, } from './ChoiceGroupOption.types'; -import { getStyles } from './ChoiceGroupOption.styles'; export const ChoiceGroupOption: React.FunctionComponent = styled< IChoiceGroupOptionProps, diff --git a/packages/react/src/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.types.ts b/packages/react/src/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.types.ts index a598b89e884ef0..5e80f2833711b0 100644 --- a/packages/react/src/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.types.ts +++ b/packages/react/src/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.types.ts @@ -1,7 +1,7 @@ import * as React from 'react'; -import { ITheme, IStyle } from '../../../Styling'; -import { IRefObject } from '../../../Utilities'; -import { IChoiceGroupOption } from '../ChoiceGroup.types'; +import type { ITheme, IStyle } from '../../../Styling'; +import type { IRefObject } from '../../../Utilities'; +import type { IChoiceGroupOption } from '../ChoiceGroup.types'; /** * {@docCategory ChoiceGroup} diff --git a/packages/react/src/components/Coachmark/Beak/Beak.styles.ts b/packages/react/src/components/Coachmark/Beak/Beak.styles.ts index 98f34d93fc161d..28cfee76153ae4 100644 --- a/packages/react/src/components/Coachmark/Beak/Beak.styles.ts +++ b/packages/react/src/components/Coachmark/Beak/Beak.styles.ts @@ -1,5 +1,6 @@ -import { IStyle, HighContrastSelector } from '../../../Styling'; -import { IBeakStylesProps } from './Beak.types'; +import { HighContrastSelector } from '../../../Styling'; +import type { IStyle } from '../../../Styling'; +import type { IBeakStylesProps } from './Beak.types'; export interface IBeakStyles { /** diff --git a/packages/react/src/components/Coachmark/Beak/Beak.tsx b/packages/react/src/components/Coachmark/Beak/Beak.tsx index ec4a8077f390e5..87f330864d1c52 100644 --- a/packages/react/src/components/Coachmark/Beak/Beak.tsx +++ b/packages/react/src/components/Coachmark/Beak/Beak.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; import { classNamesFunction } from '../../../Utilities'; -import { IBeakProps } from './Beak.types'; -import { getStyles, IBeakStyles } from './Beak.styles'; -import { IBeakStylesProps } from './Beak.types'; +import { getStyles } from './Beak.styles'; import { RectangleEdge } from '../../../Positioning'; +import type { IBeakProps, IBeakStylesProps } from './Beak.types'; +import type { IBeakStyles } from './Beak.styles'; export const BEAK_HEIGHT = 10; export const BEAK_WIDTH = 18; diff --git a/packages/react/src/components/Coachmark/Coachmark.base.tsx b/packages/react/src/components/Coachmark/Coachmark.base.tsx index 7a011f8d1269d8..5c80cc3b815167 100644 --- a/packages/react/src/components/Coachmark/Coachmark.base.tsx +++ b/packages/react/src/components/Coachmark/Coachmark.base.tsx @@ -5,13 +5,12 @@ import { elementContains, focusFirstChild, getDocument, - IRectangle, KeyCodes, getRTL, EventGroup, getPropsWithDefaults, } from '../../Utilities'; -import { IPositionedData, RectangleEdge, getOppositeEdge } from '../../Positioning'; +import { RectangleEdge, getOppositeEdge } from '../../Positioning'; // Component Dependencies import { PositioningContainer } from './PositioningContainer/index'; @@ -19,11 +18,13 @@ import { Beak, BEAK_HEIGHT, BEAK_WIDTH } from './Beak/Beak'; import { DirectionalHint } from '../../common/DirectionalHint'; // Coachmark -import { ICoachmarkProps, ICoachmarkStyles, ICoachmarkStyleProps } from './Coachmark.types'; import { COACHMARK_HEIGHT, COACHMARK_WIDTH } from './Coachmark.styles'; import { FocusTrapZone } from '../../FocusTrapZone'; import { useAsync, useOnEvent, useSetTimeout, useWarnings } from '@fluentui/react-hooks'; -import { IBeakProps } from './Beak/Beak.types'; +import type { IRectangle } from '../../Utilities'; +import type { IPositionedData } from '../../Positioning'; +import type { ICoachmarkProps, ICoachmarkStyles, ICoachmarkStyleProps } from './Coachmark.types'; +import type { IBeakProps } from './Beak/Beak.types'; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/components/Coachmark/Coachmark.styles.ts b/packages/react/src/components/Coachmark/Coachmark.styles.ts index fcea204fb32614..46c8fe71cb8870 100644 --- a/packages/react/src/components/Coachmark/Coachmark.styles.ts +++ b/packages/react/src/components/Coachmark/Coachmark.styles.ts @@ -1,6 +1,6 @@ import { keyframes, PulsingBeaconAnimationStyles, HighContrastSelector } from '../../Styling'; -import { ICoachmarkStyleProps, ICoachmarkStyles } from './Coachmark.types'; import { getRTL, IsFocusVisibleClassName, memoizeFunction } from '../../Utilities'; +import type { ICoachmarkStyleProps, ICoachmarkStyles } from './Coachmark.types'; export const COACHMARK_WIDTH = 32; export const COACHMARK_HEIGHT = 32; diff --git a/packages/react/src/components/Coachmark/Coachmark.ts b/packages/react/src/components/Coachmark/Coachmark.ts index bf2ef61f55e086..1eea618b1c190a 100644 --- a/packages/react/src/components/Coachmark/Coachmark.ts +++ b/packages/react/src/components/Coachmark/Coachmark.ts @@ -1,8 +1,8 @@ import * as React from 'react'; import { styled } from '../../Utilities'; -import { ICoachmarkProps, ICoachmarkStyleProps, ICoachmarkStyles } from './Coachmark.types'; import { getStyles } from './Coachmark.styles'; import { CoachmarkBase } from './Coachmark.base'; +import type { ICoachmarkProps, ICoachmarkStyleProps, ICoachmarkStyles } from './Coachmark.types'; export const Coachmark: React.FunctionComponent = styled< ICoachmarkProps, diff --git a/packages/react/src/components/Coachmark/Coachmark.types.ts b/packages/react/src/components/Coachmark/Coachmark.types.ts index ef265bacdd7758..8842123d48ec58 100644 --- a/packages/react/src/components/Coachmark/Coachmark.types.ts +++ b/packages/react/src/components/Coachmark/Coachmark.types.ts @@ -1,9 +1,9 @@ import * as React from 'react'; -import { IStyle, ITheme } from '../../Styling'; -import { IPositioningContainerProps } from './PositioningContainer/PositioningContainer.types'; -import { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; -import { ITeachingBubble } from '../../TeachingBubble'; -import { Target } from '@fluentui/react-hooks'; +import type { IStyle, ITheme } from '../../Styling'; +import type { IPositioningContainerProps } from './PositioningContainer/PositioningContainer.types'; +import type { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; +import type { ITeachingBubble } from '../../TeachingBubble'; +import type { Target } from '@fluentui/react-hooks'; /** * {@docCategory Coachmark} diff --git a/packages/react/src/components/Coachmark/PositioningContainer/PositioningContainer.styles.ts b/packages/react/src/components/Coachmark/PositioningContainer/PositioningContainer.styles.ts index fa8c6359c10ca8..92a2ca4e0ba222 100644 --- a/packages/react/src/components/Coachmark/PositioningContainer/PositioningContainer.styles.ts +++ b/packages/react/src/components/Coachmark/PositioningContainer/PositioningContainer.styles.ts @@ -1,5 +1,6 @@ import { memoizeFunction } from '../../../Utilities'; -import { mergeStyleSets, focusClear, IStyle, HighContrastSelector } from '../../../Styling'; +import { mergeStyleSets, focusClear, HighContrastSelector } from '../../../Styling'; +import type { IStyle } from '../../../Styling'; export interface IPositioningContainerStyles { /** diff --git a/packages/react/src/components/Coachmark/PositioningContainer/PositioningContainer.tsx b/packages/react/src/components/Coachmark/PositioningContainer/PositioningContainer.tsx index 34ba69ecc9e8a9..a456025c8e14e6 100644 --- a/packages/react/src/components/Coachmark/PositioningContainer/PositioningContainer.tsx +++ b/packages/react/src/components/Coachmark/PositioningContainer/PositioningContainer.tsx @@ -1,32 +1,19 @@ import * as React from 'react'; -import { IPositioningContainerProps } from './PositioningContainer.types'; import { getClassNames } from './PositioningContainer.styles'; import { ZIndexes } from '../../../Styling'; import { Layer } from '../../../Layer'; // Utilites/Helpers import { DirectionalHint } from '../../../common/DirectionalHint'; -import { - Point, - IRectangle, - css, - elementContains, - focusFirstChild, - EventGroup, - getPropsWithDefaults, -} from '../../../Utilities'; - -import { - getMaxHeight, - positionElement, - IPositionedData, - IPositionProps, - IPosition, - RectangleEdge, -} from '../../../Positioning'; +import { css, elementContains, focusFirstChild, EventGroup, getPropsWithDefaults } from '../../../Utilities'; + +import { getMaxHeight, positionElement, RectangleEdge } from '../../../Positioning'; import { AnimationClassNames, mergeStyles } from '../../../Styling'; import { useMergedRefs, useAsync, useTarget } from '@fluentui/react-hooks'; +import type { IPositioningContainerProps } from './PositioningContainer.types'; +import type { Point, IRectangle } from '../../../Utilities'; +import type { IPositionedData, IPositionProps, IPosition } from '../../../Positioning'; const OFF_SCREEN_STYLE = { opacity: 0 }; diff --git a/packages/react/src/components/Coachmark/PositioningContainer/PositioningContainer.types.ts b/packages/react/src/components/Coachmark/PositioningContainer/PositioningContainer.types.ts index 282c96a6e982aa..ce3630db3cf420 100644 --- a/packages/react/src/components/Coachmark/PositioningContainer/PositioningContainer.types.ts +++ b/packages/react/src/components/Coachmark/PositioningContainer/PositioningContainer.types.ts @@ -1,9 +1,9 @@ import * as React from 'react'; import { DirectionalHint } from '../../../common/DirectionalHint'; -import { IRefObject, IBaseProps, Point, IRectangle } from '../../../Utilities'; -import { IPositionedData } from '../../../Positioning'; -import { ReactNode } from 'react'; -import { Target } from '@fluentui/react-hooks'; +import type { IRefObject, IBaseProps, Point, IRectangle } from '../../../Utilities'; +import type { IPositionedData } from '../../../Positioning'; +import type { ReactNode } from 'react'; +import type { Target } from '@fluentui/react-hooks'; /** * {@docCategory Coachmark} diff --git a/packages/react/src/components/ColorPicker/ColorPicker.base.tsx b/packages/react/src/components/ColorPicker/ColorPicker.base.tsx index f6252dfc0636fe..0314bf64ccab9a 100644 --- a/packages/react/src/components/ColorPicker/ColorPicker.base.tsx +++ b/packages/react/src/components/ColorPicker/ColorPicker.base.tsx @@ -1,12 +1,5 @@ import * as React from 'react'; import { classNamesFunction, initializeComponentRef, warnDeprecations, warn } from '../../Utilities'; -import { - IColorPickerProps, - IColorPickerStyleProps, - IColorPickerStyles, - IColorPicker, - IColorPickerStrings, -} from './ColorPicker.types'; import { TextField } from '../../TextField'; import { ColorRectangle } from './ColorRectangle/ColorRectangle'; import { ColorSlider } from './ColorSlider/ColorSlider'; @@ -21,7 +14,6 @@ import { RGBA_REGEX, } from '../../utilities/color/consts'; // These imports are separated to help with bundling -import { IColor, IRGB } from '../../utilities/color/interfaces'; import { getColorFromString } from '../../utilities/color/getColorFromString'; import { getColorFromRGBA } from '../../utilities/color/getColorFromRGBA'; import { clamp } from '../../utilities/color/clamp'; @@ -31,6 +23,14 @@ import { updateH } from '../../utilities/color/updateH'; import { correctRGB } from '../../utilities/color/correctRGB'; import { correctHex } from '../../utilities/color/correctHex'; import { ColorRectangleBase } from './ColorRectangle/ColorRectangle.base'; +import type { + IColorPickerProps, + IColorPickerStyleProps, + IColorPickerStyles, + IColorPicker, + IColorPickerStrings, +} from './ColorPicker.types'; +import type { IColor, IRGB } from '../../utilities/color/interfaces'; type ColorComponent = keyof Pick; diff --git a/packages/react/src/components/ColorPicker/ColorPicker.deprecated.test.tsx b/packages/react/src/components/ColorPicker/ColorPicker.deprecated.test.tsx index 3eacae89189301..501e46d659fad0 100644 --- a/packages/react/src/components/ColorPicker/ColorPicker.deprecated.test.tsx +++ b/packages/react/src/components/ColorPicker/ColorPicker.deprecated.test.tsx @@ -2,10 +2,11 @@ import * as React from 'react'; import { mount, ReactWrapper } from 'enzyme'; import { ColorPicker } from './ColorPicker'; -import { ColorPickerBase, IColorPickerState } from './ColorPicker.base'; -import { IColorPickerProps, IColorPickerStrings } from './ColorPicker.types'; +import { ColorPickerBase } from './ColorPicker.base'; import { ColorSliderBase } from './ColorSlider/ColorSlider.base'; import { setWarningCallback } from '../../Utilities'; +import type { IColorPickerState } from './ColorPicker.base'; +import type { IColorPickerProps, IColorPickerStrings } from './ColorPicker.types'; describe('ColorPicker', () => { let wrapper: ReactWrapper | undefined; diff --git a/packages/react/src/components/ColorPicker/ColorPicker.styles.ts b/packages/react/src/components/ColorPicker/ColorPicker.styles.ts index 13be69c1a632a0..235667128ac3b7 100644 --- a/packages/react/src/components/ColorPicker/ColorPicker.styles.ts +++ b/packages/react/src/components/ColorPicker/ColorPicker.styles.ts @@ -1,4 +1,4 @@ -import { IColorPickerStyleProps, IColorPickerStyles } from './ColorPicker.types'; +import type { IColorPickerStyleProps, IColorPickerStyles } from './ColorPicker.types'; export const getStyles = (props: IColorPickerStyleProps): IColorPickerStyles => { const { className, theme, alphaType } = props; diff --git a/packages/react/src/components/ColorPicker/ColorPicker.test.tsx b/packages/react/src/components/ColorPicker/ColorPicker.test.tsx index 90b2ac974be2f1..39247f82276996 100644 --- a/packages/react/src/components/ColorPicker/ColorPicker.test.tsx +++ b/packages/react/src/components/ColorPicker/ColorPicker.test.tsx @@ -4,15 +4,16 @@ import { mount, ReactWrapper } from 'enzyme'; import * as ReactTestUtils from 'react-dom/test-utils'; import { ColorPicker } from './ColorPicker'; -import { ColorPickerBase, IColorPickerState } from './ColorPicker.base'; -import { IColorPickerProps, IColorPickerStrings } from './ColorPicker.types'; -import { IColor } from '../../utilities/color/interfaces'; +import { ColorPickerBase } from './ColorPicker.base'; import { resetIds } from '../../Utilities'; import { getColorFromString } from '../../utilities/color/getColorFromString'; import { mockEvent } from '../../common/testUtilities'; import { ColorRectangleBase } from './ColorRectangle/ColorRectangle.base'; import { ColorSliderBase } from './ColorSlider/ColorSlider.base'; import { isConformant } from '../../common/isConformant'; +import type { IColorPickerState } from './ColorPicker.base'; +import type { IColorPickerProps, IColorPickerStrings } from './ColorPicker.types'; +import type { IColor } from '../../utilities/color/interfaces'; const noOp = () => undefined; const abcdef = getColorFromString('#abcdef')!; diff --git a/packages/react/src/components/ColorPicker/ColorPicker.tsx b/packages/react/src/components/ColorPicker/ColorPicker.tsx index 355512d58855e1..af5d229cc101cf 100644 --- a/packages/react/src/components/ColorPicker/ColorPicker.tsx +++ b/packages/react/src/components/ColorPicker/ColorPicker.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled } from '../../Utilities'; import { ColorPickerBase } from './ColorPicker.base'; import { getStyles } from './ColorPicker.styles'; -import { IColorPickerProps, IColorPickerStyles, IColorPickerStyleProps } from './ColorPicker.types'; +import type { IColorPickerProps, IColorPickerStyles, IColorPickerStyleProps } from './ColorPicker.types'; export const ColorPicker: React.FunctionComponent = styled< IColorPickerProps, diff --git a/packages/react/src/components/ColorPicker/ColorPicker.types.ts b/packages/react/src/components/ColorPicker/ColorPicker.types.ts index aa03f9eaa75e08..46cdf7a08715f1 100644 --- a/packages/react/src/components/ColorPicker/ColorPicker.types.ts +++ b/packages/react/src/components/ColorPicker/ColorPicker.types.ts @@ -1,7 +1,7 @@ import * as React from 'react'; -import { ITheme, IStyle } from '../../Styling'; -import { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; -import { IColor } from '../../utilities/color/interfaces'; +import type { ITheme, IStyle } from '../../Styling'; +import type { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; +import type { IColor } from '../../utilities/color/interfaces'; /** * {@docCategory ColorPicker} diff --git a/packages/react/src/components/ColorPicker/ColorRectangle/ColorRectangle.base.tsx b/packages/react/src/components/ColorPicker/ColorRectangle/ColorRectangle.base.tsx index 9c0d5a30fbf11f..97360d331361b1 100644 --- a/packages/react/src/components/ColorPicker/ColorRectangle/ColorRectangle.base.tsx +++ b/packages/react/src/components/ColorPicker/ColorRectangle/ColorRectangle.base.tsx @@ -1,18 +1,17 @@ import * as React from 'react'; import { classNamesFunction, on, initializeComponentRef, KeyCodes, getId } from '../../../Utilities'; -import { - IColorRectangleProps, - IColorRectangleStyleProps, - IColorRectangleStyles, - IColorRectangle, -} from './ColorRectangle.types'; - // These imports are separated to help with bundling -import { IColor } from '../../../utilities/color/interfaces'; import { MAX_COLOR_SATURATION, MAX_COLOR_VALUE } from '../../../utilities/color/consts'; import { getFullColorString } from '../../../utilities/color/getFullColorString'; import { updateSV } from '../../../utilities/color/updateSV'; import { clamp } from '../../../utilities/color/clamp'; +import type { + IColorRectangleProps, + IColorRectangleStyleProps, + IColorRectangleStyles, + IColorRectangle, +} from './ColorRectangle.types'; +import type { IColor } from '../../../utilities/color/interfaces'; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/components/ColorPicker/ColorRectangle/ColorRectangle.styles.ts b/packages/react/src/components/ColorPicker/ColorRectangle/ColorRectangle.styles.ts index 923a24b2a97f4c..3b686f2b6e60cf 100644 --- a/packages/react/src/components/ColorPicker/ColorRectangle/ColorRectangle.styles.ts +++ b/packages/react/src/components/ColorPicker/ColorRectangle/ColorRectangle.styles.ts @@ -1,7 +1,7 @@ -import { IColorRectangleStyleProps, IColorRectangleStyles } from './ColorRectangle.types'; import { HighContrastSelector, getHighContrastNoAdjustStyle } from '../../../Styling'; import { IsFocusVisibleClassName } from '../../../Utilities'; import { hiddenContentStyle } from '@fluentui/style-utilities'; +import type { IColorRectangleStyleProps, IColorRectangleStyles } from './ColorRectangle.types'; export const getStyles = (props: IColorRectangleStyleProps): IColorRectangleStyles => { const { className, theme, minSize } = props; diff --git a/packages/react/src/components/ColorPicker/ColorRectangle/ColorRectangle.test.tsx b/packages/react/src/components/ColorPicker/ColorRectangle/ColorRectangle.test.tsx index ae8e33577e1d2c..dcd51fae2992a8 100644 --- a/packages/react/src/components/ColorPicker/ColorRectangle/ColorRectangle.test.tsx +++ b/packages/react/src/components/ColorPicker/ColorRectangle/ColorRectangle.test.tsx @@ -3,10 +3,12 @@ import * as renderer from 'react-test-renderer'; import { mount, ReactWrapper } from 'enzyme'; import { ColorRectangle } from './ColorRectangle'; -import { ColorRectangleBase, IColorRectangleState, _getNewColor } from './ColorRectangle.base'; -import { IColorRectangleProps } from './ColorRectangle.types'; -import { getColorFromString, IColor } from '../../../utilities/color/colors'; +import { ColorRectangleBase, _getNewColor } from './ColorRectangle.base'; +import { getColorFromString } from '../../../utilities/color/colors'; import { KeyCodes } from '../../../Utilities'; +import type { IColorRectangleState } from './ColorRectangle.base'; +import type { IColorRectangleProps } from './ColorRectangle.types'; +import type { IColor } from '../../../utilities/color/colors'; describe('ColorRectangle', () => { let wrapper: ReactWrapper | undefined; diff --git a/packages/react/src/components/ColorPicker/ColorRectangle/ColorRectangle.tsx b/packages/react/src/components/ColorPicker/ColorRectangle/ColorRectangle.tsx index 920342fde234c2..163bb92dfee190 100644 --- a/packages/react/src/components/ColorPicker/ColorRectangle/ColorRectangle.tsx +++ b/packages/react/src/components/ColorPicker/ColorRectangle/ColorRectangle.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled } from '../../../Utilities'; import { ColorRectangleBase } from './ColorRectangle.base'; import { getStyles } from './ColorRectangle.styles'; -import { IColorRectangleProps, IColorRectangleStyles, IColorRectangleStyleProps } from './ColorRectangle.types'; +import type { IColorRectangleProps, IColorRectangleStyles, IColorRectangleStyleProps } from './ColorRectangle.types'; export const ColorRectangle: React.FunctionComponent = styled< IColorRectangleProps, diff --git a/packages/react/src/components/ColorPicker/ColorRectangle/ColorRectangle.types.ts b/packages/react/src/components/ColorPicker/ColorRectangle/ColorRectangle.types.ts index 1a3fc03e00082e..228d37d1981a47 100644 --- a/packages/react/src/components/ColorPicker/ColorRectangle/ColorRectangle.types.ts +++ b/packages/react/src/components/ColorPicker/ColorRectangle/ColorRectangle.types.ts @@ -1,7 +1,7 @@ import * as React from 'react'; -import { ITheme, IStyle } from '../../../Styling'; -import { IRefObject, IStyleFunctionOrObject } from '../../../Utilities'; -import { IColor } from '../../../utilities/color/interfaces'; +import type { ITheme, IStyle } from '../../../Styling'; +import type { IRefObject, IStyleFunctionOrObject } from '../../../Utilities'; +import type { IColor } from '../../../utilities/color/interfaces'; /** * {@docCategory ColorPicker} diff --git a/packages/react/src/components/ColorPicker/ColorSlider/ColorSlider.base.tsx b/packages/react/src/components/ColorPicker/ColorSlider/ColorSlider.base.tsx index 8c91600e24f3f2..c78ae2990aa650 100644 --- a/packages/react/src/components/ColorPicker/ColorSlider/ColorSlider.base.tsx +++ b/packages/react/src/components/ColorPicker/ColorSlider/ColorSlider.base.tsx @@ -8,9 +8,9 @@ import { warnDeprecations, warn, } from '../../../Utilities'; -import { IColorSliderProps, IColorSliderStyleProps, IColorSliderStyles, IColorSlider } from './ColorSlider.types'; import { clamp } from '../../../utilities/color/clamp'; import { MAX_COLOR_HUE, MAX_COLOR_ALPHA } from '../../../utilities/color/consts'; +import type { IColorSliderProps, IColorSliderStyleProps, IColorSliderStyles, IColorSlider } from './ColorSlider.types'; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/components/ColorPicker/ColorSlider/ColorSlider.styles.ts b/packages/react/src/components/ColorPicker/ColorSlider/ColorSlider.styles.ts index 5ef71e5b50719d..7b1d6b9e6a054d 100644 --- a/packages/react/src/components/ColorPicker/ColorSlider/ColorSlider.styles.ts +++ b/packages/react/src/components/ColorPicker/ColorSlider/ColorSlider.styles.ts @@ -1,5 +1,5 @@ -import { IColorSliderStyleProps, IColorSliderStyles } from './ColorSlider.types'; import { IsFocusVisibleClassName } from '../../../Utilities'; +import type { IColorSliderStyleProps, IColorSliderStyles } from './ColorSlider.types'; const hueStyle = { background: `linear-gradient(${[ diff --git a/packages/react/src/components/ColorPicker/ColorSlider/ColorSlider.test.tsx b/packages/react/src/components/ColorPicker/ColorSlider/ColorSlider.test.tsx index 118dc60aa36183..d6c6483a66ef05 100644 --- a/packages/react/src/components/ColorPicker/ColorSlider/ColorSlider.test.tsx +++ b/packages/react/src/components/ColorPicker/ColorSlider/ColorSlider.test.tsx @@ -3,10 +3,11 @@ import * as renderer from 'react-test-renderer'; import { mount, ReactWrapper } from 'enzyme'; import { ColorSlider } from './ColorSlider'; -import { ColorSliderBase, IColorSliderState } from './ColorSlider.base'; -import { IColorSliderProps } from './ColorSlider.types'; +import { ColorSliderBase } from './ColorSlider.base'; import { KeyCodes } from '../../../Utilities'; import { MAX_COLOR_HUE, MAX_COLOR_ALPHA } from '../../../utilities/color'; +import type { IColorSliderState } from './ColorSlider.base'; +import type { IColorSliderProps } from './ColorSlider.types'; describe('ColorSlider', () => { let wrapper: ReactWrapper | undefined; diff --git a/packages/react/src/components/ColorPicker/ColorSlider/ColorSlider.tsx b/packages/react/src/components/ColorPicker/ColorSlider/ColorSlider.tsx index f0fbb0d1c9048a..454472334951b4 100644 --- a/packages/react/src/components/ColorPicker/ColorSlider/ColorSlider.tsx +++ b/packages/react/src/components/ColorPicker/ColorSlider/ColorSlider.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled } from '../../../Utilities'; import { ColorSliderBase } from './ColorSlider.base'; import { getStyles } from './ColorSlider.styles'; -import { IColorSliderProps, IColorSliderStyleProps, IColorSliderStyles } from './ColorSlider.types'; +import type { IColorSliderProps, IColorSliderStyleProps, IColorSliderStyles } from './ColorSlider.types'; export const ColorSlider: React.FunctionComponent = styled< IColorSliderProps, diff --git a/packages/react/src/components/ColorPicker/ColorSlider/ColorSlider.types.ts b/packages/react/src/components/ColorPicker/ColorSlider/ColorSlider.types.ts index cca2b8943d57ca..a14e8408968a50 100644 --- a/packages/react/src/components/ColorPicker/ColorSlider/ColorSlider.types.ts +++ b/packages/react/src/components/ColorPicker/ColorSlider/ColorSlider.types.ts @@ -1,6 +1,6 @@ import * as React from 'react'; -import { ITheme, IStyle } from '../../../Styling'; -import { IRefObject, IStyleFunctionOrObject } from '../../../Utilities'; +import type { ITheme, IStyle } from '../../../Styling'; +import type { IRefObject, IStyleFunctionOrObject } from '../../../Utilities'; /** * {@docCategory ColorPicker} diff --git a/packages/react/src/components/ComboBox/ComboBox.classNames.ts b/packages/react/src/components/ComboBox/ComboBox.classNames.ts index 1dfdfe2dac714e..d42b5f3f7d2f99 100644 --- a/packages/react/src/components/ComboBox/ComboBox.classNames.ts +++ b/packages/react/src/components/ComboBox/ComboBox.classNames.ts @@ -1,6 +1,6 @@ -import { IComboBoxStyles, IComboBoxOptionStyles } from './ComboBox.types'; import { memoizeFunction } from '../../Utilities'; import { mergeStyles } from '../../Styling'; +import type { IComboBoxStyles, IComboBoxOptionStyles } from './ComboBox.types'; export interface IComboBoxClassNames { container: string; diff --git a/packages/react/src/components/ComboBox/ComboBox.styles.ts b/packages/react/src/components/ComboBox/ComboBox.styles.ts index f0fed695ec9519..0854f9c6676635 100644 --- a/packages/react/src/components/ComboBox/ComboBox.styles.ts +++ b/packages/react/src/components/ComboBox/ComboBox.styles.ts @@ -1,20 +1,17 @@ import { FontWeights, - IRawStyle, - ITheme, concatStyleSets, getFocusStyle, HighContrastSelector, - IStyle, getPlaceholderStyles, hiddenContentStyle, getInputFocusStyle, getHighContrastNoAdjustStyle, } from '../../Styling'; -import { IComboBoxOptionStyles, IComboBoxStyles } from './ComboBox.types'; - -import { IButtonStyles } from '../../Button'; import { memoizeFunction } from '../../Utilities'; +import type { IRawStyle, ITheme, IStyle } from '../../Styling'; +import type { IComboBoxOptionStyles, IComboBoxStyles } from './ComboBox.types'; +import type { IButtonStyles } from '../../Button'; const ComboBoxHeight = 32; const ComboBoxLineHeight = 30; diff --git a/packages/react/src/components/ComboBox/ComboBox.test.tsx b/packages/react/src/components/ComboBox/ComboBox.test.tsx index 4fd360f0754b22..657b94513051c4 100644 --- a/packages/react/src/components/ComboBox/ComboBox.test.tsx +++ b/packages/react/src/components/ComboBox/ComboBox.test.tsx @@ -3,12 +3,12 @@ import * as ReactDOM from 'react-dom'; import { ReactWrapper } from 'enzyme'; import { KeyCodes, resetIds } from '../../Utilities'; import { ComboBox } from './ComboBox'; -import { IComboBox, IComboBoxOption } from './ComboBox.types'; import { SelectableOptionMenuItemType } from '../../SelectableOption'; import { isConformant } from '../../common/isConformant'; import { safeCreate, safeMount } from '@fluentui/test-utilities'; import { useKeytipRef } from '../../Keytips'; import { Autofill } from '../../Autofill'; +import type { IComboBox, IComboBoxOption } from './ComboBox.types'; const OPTION_SELECTOR = '.ms-ComboBox-option'; const CHECKBOX_OPTION = OPTION_SELECTOR + ' > input'; diff --git a/packages/react/src/components/ComboBox/ComboBox.tsx b/packages/react/src/components/ComboBox/ComboBox.tsx index 2031ad44df4042..d9f6ba8d6e821a 100644 --- a/packages/react/src/components/ComboBox/ComboBox.tsx +++ b/packages/react/src/components/ComboBox/ComboBox.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Autofill, IAutofill } from '../../Autofill'; +import { Autofill } from '../../Autofill'; import { initializeComponentRef, css, @@ -19,24 +19,27 @@ import { Async, EventGroup, getPropsWithDefaults, - IRenderFunction, } from '../../Utilities'; import { Callout, DirectionalHint } from '../../Callout'; import { Checkbox } from '../../Checkbox'; import { getCaretDownButtonStyles, getOptionStyles, getStyles } from './ComboBox.styles'; -import { getClassNames, getComboBoxOptionClassNames, IComboBoxClassNames } from './ComboBox.classNames'; -import { +import { getClassNames, getComboBoxOptionClassNames } from './ComboBox.classNames'; +import { Label } from '../../Label'; +import { SelectableOptionMenuItemType, getAllSelectedOptions } from '../../SelectableOption'; +import { BaseButton, Button, CommandButton, IconButton } from '../../Button'; +import { useMergedRefs } from '@fluentui/react-hooks'; +import type { IAutofill } from '../../Autofill'; +import type { IRenderFunction } from '../../Utilities'; +import type { IComboBoxClassNames } from './ComboBox.classNames'; +import type { IComboBoxOption, IComboBoxOptionStyles, IComboBoxProps, IOnRenderComboBoxLabelProps, IComboBox, } from './ComboBox.types'; -import { Label } from '../../Label'; -import { SelectableOptionMenuItemType, getAllSelectedOptions } from '../../SelectableOption'; -import { BaseButton, Button, CommandButton, IButtonStyles, IconButton } from '../../Button'; -import { ICalloutProps } from '../../Callout'; -import { useMergedRefs } from '@fluentui/react-hooks'; +import type { IButtonStyles } from '../../Button'; +import type { ICalloutProps } from '../../Callout'; export interface IComboBoxState { /** The open state */ diff --git a/packages/react/src/components/ComboBox/ComboBox.types.ts b/packages/react/src/components/ComboBox/ComboBox.types.ts index 06e94a922680d8..a3f15b823c10e9 100644 --- a/packages/react/src/components/ComboBox/ComboBox.types.ts +++ b/packages/react/src/components/ComboBox/ComboBox.types.ts @@ -1,11 +1,11 @@ import * as React from 'react'; -import { IIconProps } from '../../Icon'; -import { ISelectableOption, ISelectableDroppableTextProps } from '../../SelectableOption'; -import { IStyle, ITheme } from '../../Styling'; -import { IButtonStyles, IButtonProps } from '../../Button'; -import { IRefObject, IRenderFunction } from '../../Utilities'; -import { IComboBoxClassNames } from './ComboBox.classNames'; -import { IAutofillProps } from '../../Autofill'; +import type { IIconProps } from '../../Icon'; +import type { ISelectableOption, ISelectableDroppableTextProps } from '../../SelectableOption'; +import type { IStyle, ITheme } from '../../Styling'; +import type { IButtonStyles, IButtonProps } from '../../Button'; +import type { IRefObject, IRenderFunction } from '../../Utilities'; +import type { IComboBoxClassNames } from './ComboBox.classNames'; +import type { IAutofillProps } from '../../Autofill'; /** * {@docCategory ComboBox} diff --git a/packages/react/src/components/ComboBox/VirtualizedComboBox.tsx b/packages/react/src/components/ComboBox/VirtualizedComboBox.tsx index 17f2de7c3ff1e3..d58ad5afbd8b9f 100644 --- a/packages/react/src/components/ComboBox/VirtualizedComboBox.tsx +++ b/packages/react/src/components/ComboBox/VirtualizedComboBox.tsx @@ -1,9 +1,10 @@ import * as React from 'react'; import { ComboBox } from './ComboBox'; -import { IComboBoxProps, IComboBox, IComboBoxOption } from './ComboBox.types'; -import { IList, List } from '../../List'; -import { ISelectableOption } from '../../SelectableOption'; +import { List } from '../../List'; import { initializeComponentRef } from '../../Utilities'; +import type { IComboBoxProps, IComboBox, IComboBoxOption } from './ComboBox.types'; +import type { IList } from '../../List'; +import type { ISelectableOption } from '../../SelectableOption'; export class VirtualizedComboBox extends React.Component implements IComboBox { /** The combo box element */ diff --git a/packages/react/src/components/ComboBox/index.ts b/packages/react/src/components/ComboBox/index.ts index 7bb589a81314e7..02db41f354a05a 100644 --- a/packages/react/src/components/ComboBox/index.ts +++ b/packages/react/src/components/ComboBox/index.ts @@ -1,4 +1,4 @@ export * from './ComboBox'; -export { IComboBoxClassNames, IComboBoxOptionClassNames } from './ComboBox.classNames'; export * from './ComboBox.types'; export * from './VirtualizedComboBox'; +export type { IComboBoxClassNames, IComboBoxOptionClassNames } from './ComboBox.classNames'; diff --git a/packages/react/src/components/CommandBar/CommandBar.base.tsx b/packages/react/src/components/CommandBar/CommandBar.base.tsx index 8179dda5c3ca51..b4505275d48cc3 100644 --- a/packages/react/src/components/CommandBar/CommandBar.base.tsx +++ b/packages/react/src/components/CommandBar/CommandBar.base.tsx @@ -3,25 +3,28 @@ import { classNamesFunction, css, nullRender, - IComponentAs, getNativeProps, divProperties, composeComponentAs, initializeComponentRef, } from '../../Utilities'; -import { +import { OverflowSet } from '../../OverflowSet'; +import { ResizeGroup } from '../../ResizeGroup'; +import { FocusZone, FocusZoneDirection } from '../../FocusZone'; +import { CommandBarButton } from '../../Button'; +import { TooltipHost } from '../../Tooltip'; +import { getCommandButtonStyles } from './CommandBar.styles'; +import type { IComponentAs } from '../../Utilities'; +import type { ICommandBar, ICommandBarItemProps, ICommandBarProps, ICommandBarStyleProps, ICommandBarStyles, } from './CommandBar.types'; -import { IOverflowSet, OverflowSet } from '../../OverflowSet'; -import { IResizeGroup, ResizeGroup } from '../../ResizeGroup'; -import { FocusZone, FocusZoneDirection } from '../../FocusZone'; -import { CommandBarButton, IButtonProps } from '../../Button'; -import { TooltipHost } from '../../Tooltip'; -import { getCommandButtonStyles } from './CommandBar.styles'; +import type { IOverflowSet } from '../../OverflowSet'; +import type { IResizeGroup } from '../../ResizeGroup'; +import type { IButtonProps } from '../../Button'; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/components/CommandBar/CommandBar.styles.ts b/packages/react/src/components/CommandBar/CommandBar.styles.ts index 413fbdfe7bebbf..8f40d09afaa94a 100644 --- a/packages/react/src/components/CommandBar/CommandBar.styles.ts +++ b/packages/react/src/components/CommandBar/CommandBar.styles.ts @@ -1,7 +1,7 @@ -import { ICommandBarStyleProps, ICommandBarStyles } from './CommandBar.types'; -import { IButtonStyles } from '../../Button'; import { memoizeFunction } from '../../Utilities'; -import { IStyle } from '../../Styling'; +import type { ICommandBarStyleProps, ICommandBarStyles } from './CommandBar.types'; +import type { IButtonStyles } from '../../Button'; +import type { IStyle } from '../../Styling'; const COMMAND_BAR_HEIGHT = 44; diff --git a/packages/react/src/components/CommandBar/CommandBar.test.tsx b/packages/react/src/components/CommandBar/CommandBar.test.tsx index 97dba1c35d352f..c76434913e98ac 100644 --- a/packages/react/src/components/CommandBar/CommandBar.test.tsx +++ b/packages/react/src/components/CommandBar/CommandBar.test.tsx @@ -3,9 +3,9 @@ import * as renderer from 'react-test-renderer'; import { CommandBar } from './CommandBar'; import { mount } from 'enzyme'; -import { IContextualMenuItem } from '../../ContextualMenu'; import { isConformant } from '../../common/isConformant'; import { resetIds } from '../../Utilities'; +import type { IContextualMenuItem } from '../../ContextualMenu'; describe('CommandBar', () => { beforeEach(() => { diff --git a/packages/react/src/components/CommandBar/CommandBar.tsx b/packages/react/src/components/CommandBar/CommandBar.tsx index b197b683c6bb1e..61dadd9a865afc 100644 --- a/packages/react/src/components/CommandBar/CommandBar.tsx +++ b/packages/react/src/components/CommandBar/CommandBar.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { styled } from '../../Utilities'; -import { ICommandBarProps, ICommandBarStyleProps, ICommandBarStyles } from './CommandBar.types'; import { CommandBarBase } from './CommandBar.base'; import { getStyles } from './CommandBar.styles'; +import type { ICommandBarProps, ICommandBarStyleProps, ICommandBarStyles } from './CommandBar.types'; // Create a CommandBar variant which uses these default styles and this styled subcomponent. export const CommandBar: React.FunctionComponent = styled< diff --git a/packages/react/src/components/CommandBar/CommandBar.types.ts b/packages/react/src/components/CommandBar/CommandBar.types.ts index b909045ef5c425..bc582dff2aeb11 100644 --- a/packages/react/src/components/CommandBar/CommandBar.types.ts +++ b/packages/react/src/components/CommandBar/CommandBar.types.ts @@ -1,11 +1,11 @@ import * as React from 'react'; -import { IContextualMenuItem } from '../../ContextualMenu'; -import { IButtonStyles, IButtonProps } from '../../Button'; -import { ICommandBarData } from './CommandBar.base'; -import { IStyle, ITheme } from '../../Styling'; -import { IRefObject, IStyleFunctionOrObject, IComponentAs } from '../../Utilities'; -import { ITooltipHostProps } from '../../Tooltip'; -import { IResizeGroupProps } from '../ResizeGroup/ResizeGroup.types'; +import type { IContextualMenuItem } from '../../ContextualMenu'; +import type { IButtonStyles, IButtonProps } from '../../Button'; +import type { ICommandBarData } from './CommandBar.base'; +import type { IStyle, ITheme } from '../../Styling'; +import type { IRefObject, IStyleFunctionOrObject, IComponentAs } from '../../Utilities'; +import type { ITooltipHostProps } from '../../Tooltip'; +import type { IResizeGroupProps } from '../ResizeGroup/ResizeGroup.types'; /** * {@docCategory CommandBar} diff --git a/packages/react/src/components/ContextualMenu/ContextualMenu.base.tsx b/packages/react/src/components/ContextualMenu/ContextualMenu.base.tsx index e851dfa08a0893..440a10fd7d3d30 100644 --- a/packages/react/src/components/ContextualMenu/ContextualMenu.base.tsx +++ b/packages/react/src/components/ContextualMenu/ContextualMenu.base.tsx @@ -1,16 +1,7 @@ import * as React from 'react'; -import { - IContextualMenuProps, - IContextualMenuItem, - ContextualMenuItemType, - IContextualMenuListProps, - IContextualMenuStyleProps, - IContextualMenuStyles, - IContextualMenuItemRenderProps, -} from './ContextualMenu.types'; +import { ContextualMenuItemType } from './ContextualMenu.types'; import { DirectionalHint } from '../../common/DirectionalHint'; -import { FocusZone, FocusZoneDirection, IFocusZoneProps, FocusZoneTabbableElements } from '../../FocusZone'; -import { IMenuItemClassNames, IContextualMenuClassNames } from './ContextualMenu.classNames'; +import { FocusZone, FocusZoneDirection, FocusZoneTabbableElements } from '../../FocusZone'; import { divProperties, getNativeProps, @@ -25,11 +16,8 @@ import { getId, getLastFocusable, getRTL, - IRenderFunction, - Point, KeyCodes, shouldWrapFocus, - IStyleFunctionOrObject, isIOS, isMac, initializeComponentRef, @@ -38,20 +26,33 @@ import { getDocument, } from '../../Utilities'; import { hasSubmenu, getIsChecked, isItemDisabled } from '../../utilities/contextualMenu/index'; -import { Callout, ICalloutContentStyleProps, ICalloutContentStyles } from '../../Callout'; +import { Callout } from '../../Callout'; import { ContextualMenuItem } from './ContextualMenuItem'; import { ContextualMenuSplitButton, ContextualMenuButton, ContextualMenuAnchor, } from './ContextualMenuItemWrapper/index'; -import { IProcessedStyleSet, concatStyleSetsWithProps } from '../../Styling'; -import { IContextualMenuItemStyleProps, IContextualMenuItemStyles } from './ContextualMenuItem.types'; +import { concatStyleSetsWithProps } from '../../Styling'; import { getItemStyles } from './ContextualMenu.classNames'; import { useTarget, usePrevious } from '@fluentui/react-hooks'; import { useResponsiveMode, ResponsiveMode } from '../../ResponsiveMode'; -import { IPopupRestoreFocusParams } from '../../Popup'; import { MenuContext } from '../../utilities/MenuContext/index'; +import type { + IContextualMenuProps, + IContextualMenuItem, + IContextualMenuListProps, + IContextualMenuStyleProps, + IContextualMenuStyles, + IContextualMenuItemRenderProps, +} from './ContextualMenu.types'; +import type { IFocusZoneProps } from '../../FocusZone'; +import type { IMenuItemClassNames, IContextualMenuClassNames } from './ContextualMenu.classNames'; +import type { IRenderFunction, Point, IStyleFunctionOrObject } from '../../Utilities'; +import type { ICalloutContentStyleProps, ICalloutContentStyles } from '../../Callout'; +import type { IProcessedStyleSet } from '../../Styling'; +import type { IContextualMenuItemStyleProps, IContextualMenuItemStyles } from './ContextualMenuItem.types'; +import type { IPopupRestoreFocusParams } from '../../Popup'; const getClassNames = classNamesFunction(); const getContextualMenuItemClassNames = classNamesFunction(); diff --git a/packages/react/src/components/ContextualMenu/ContextualMenu.classNames.ts b/packages/react/src/components/ContextualMenu/ContextualMenu.classNames.ts index 7069cea82a34d0..8f50a29ad0774f 100644 --- a/packages/react/src/components/ContextualMenu/ContextualMenu.classNames.ts +++ b/packages/react/src/components/ContextualMenu/ContextualMenu.classNames.ts @@ -1,17 +1,17 @@ import { getDividerClassNames } from '../Divider/VerticalDivider.classNames'; import { getMenuItemStyles } from './ContextualMenu.cnstyles'; import { - ITheme, mergeStyleSets, getGlobalClassNames, getScreenSelector, ScreenWidthMaxMedium, hiddenContentStyle, } from '../../Styling'; -import { IVerticalDividerClassNames } from '../Divider/VerticalDivider.types'; import { memoizeFunction, IsFocusVisibleClassName } from '../../Utilities'; -import { IContextualMenuItemStyles, IContextualMenuItemStyleProps } from './ContextualMenuItem.types'; -import { IContextualMenuSubComponentStyles } from './ContextualMenu.types'; +import type { ITheme } from '../../Styling'; +import type { IVerticalDividerClassNames } from '../Divider/VerticalDivider.types'; +import type { IContextualMenuItemStyles, IContextualMenuItemStyleProps } from './ContextualMenuItem.types'; +import type { IContextualMenuSubComponentStyles } from './ContextualMenu.types'; /** * @deprecated Deprecated in favor of mergeStyles API. diff --git a/packages/react/src/components/ContextualMenu/ContextualMenu.cnstyles.ts b/packages/react/src/components/ContextualMenu/ContextualMenu.cnstyles.ts index 5a461ad811cdc3..568bdc0385ef7a 100644 --- a/packages/react/src/components/ContextualMenu/ContextualMenu.cnstyles.ts +++ b/packages/react/src/components/ContextualMenu/ContextualMenu.cnstyles.ts @@ -2,15 +2,14 @@ import { concatStyleSets, getFocusStyle, HighContrastSelector, - IRawStyle, - ITheme, getScreenSelector, ScreenWidthMaxMedium, IconFontSizes, getHighContrastNoAdjustStyle, } from '../../Styling'; -import { IMenuItemStyles } from './ContextualMenu.types'; import { memoizeFunction } from '../../Utilities'; +import type { IRawStyle, ITheme } from '../../Styling'; +import type { IMenuItemStyles } from './ContextualMenu.types'; export const CONTEXTUAL_MENU_ITEM_HEIGHT = 36; diff --git a/packages/react/src/components/ContextualMenu/ContextualMenu.deprecated.test.tsx b/packages/react/src/components/ContextualMenu/ContextualMenu.deprecated.test.tsx index 5dd7c12f9c3285..fc7f58fc801f6d 100644 --- a/packages/react/src/components/ContextualMenu/ContextualMenu.deprecated.test.tsx +++ b/packages/react/src/components/ContextualMenu/ContextualMenu.deprecated.test.tsx @@ -1,12 +1,13 @@ import * as React from 'react'; import * as ReactTestUtils from 'react-dom/test-utils'; import { KeyCodes, setWarningCallback } from '../../Utilities'; -import { IContextualMenuProps, IContextualMenuItem } from './ContextualMenu.types'; import { ContextualMenu } from './ContextualMenu'; import { ContextualMenuItemType } from './ContextualMenu.types'; import { mount } from 'enzyme'; -import { IMenuItemClassNames, getItemClassNames } from './ContextualMenu.classNames'; +import { getItemClassNames } from './ContextualMenu.classNames'; import { createTheme } from '../../Styling'; +import type { IContextualMenuProps, IContextualMenuItem } from './ContextualMenu.types'; +import type { IMenuItemClassNames } from './ContextualMenu.classNames'; let customClassNames: () => IMenuItemClassNames; diff --git a/packages/react/src/components/ContextualMenu/ContextualMenu.styles.ts b/packages/react/src/components/ContextualMenu/ContextualMenu.styles.ts index 2c968a3b590cdb..bbad844d77cd8f 100644 --- a/packages/react/src/components/ContextualMenu/ContextualMenu.styles.ts +++ b/packages/react/src/components/ContextualMenu/ContextualMenu.styles.ts @@ -1,6 +1,6 @@ -import { IContextualMenuStyleProps, IContextualMenuStyles } from './ContextualMenu.types'; import { getGlobalClassNames, FontWeights } from '../../Styling'; import { CONTEXTUAL_MENU_ITEM_HEIGHT } from './ContextualMenu.cnstyles'; +import type { IContextualMenuStyleProps, IContextualMenuStyles } from './ContextualMenu.types'; const GlobalClassNames = { root: 'ms-ContextualMenu', diff --git a/packages/react/src/components/ContextualMenu/ContextualMenu.test.tsx b/packages/react/src/components/ContextualMenu/ContextualMenu.test.tsx index 2b96da2ba5c40b..31d568d1bdc000 100644 --- a/packages/react/src/components/ContextualMenu/ContextualMenu.test.tsx +++ b/packages/react/src/components/ContextualMenu/ContextualMenu.test.tsx @@ -3,17 +3,21 @@ import * as ReactTestUtils from 'react-dom/test-utils'; import { KeyCodes } from '../../Utilities'; import { FocusZoneDirection } from '../../FocusZone'; import * as renderer from 'react-test-renderer'; - -import { IContextualMenuProps, IContextualMenuStyles, IContextualMenu } from './ContextualMenu.types'; - import { CalloutContent } from '../Callout/CalloutContent'; import { ContextualMenu } from './ContextualMenu'; import { canAnyMenuItemsCheck } from './ContextualMenu.base'; -import { IContextualMenuItem, ContextualMenuItemType } from './ContextualMenu.types'; -import { IContextualMenuRenderItem, IContextualMenuItemStyles } from './ContextualMenuItem.types'; -import { DefaultButton, IButton } from '../../Button'; +import { ContextualMenuItemType } from './ContextualMenu.types'; +import { DefaultButton } from '../../Button'; import { resetIds } from '@fluentui/utilities'; import { isConformant } from '../../common/isConformant'; +import type { + IContextualMenuProps, + IContextualMenuStyles, + IContextualMenu, + IContextualMenuItem, +} from './ContextualMenu.types'; +import type { IContextualMenuRenderItem, IContextualMenuItemStyles } from './ContextualMenuItem.types'; +import type { IButton } from '../../Button'; describe('ContextualMenu', () => { afterEach(() => { diff --git a/packages/react/src/components/ContextualMenu/ContextualMenu.tsx b/packages/react/src/components/ContextualMenu/ContextualMenu.tsx index 12d45596fa9629..6c27d071b7444d 100644 --- a/packages/react/src/components/ContextualMenu/ContextualMenu.tsx +++ b/packages/react/src/components/ContextualMenu/ContextualMenu.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { styled } from '../../Utilities'; -import { IContextualMenuProps, IContextualMenuStyleProps, IContextualMenuStyles } from './ContextualMenu.types'; import { ContextualMenuBase } from './ContextualMenu.base'; import { getStyles } from './ContextualMenu.styles'; +import type { IContextualMenuProps, IContextualMenuStyleProps, IContextualMenuStyles } from './ContextualMenu.types'; function onRenderSubMenu(subMenuProps: IContextualMenuProps) { return ; diff --git a/packages/react/src/components/ContextualMenu/ContextualMenu.types.ts b/packages/react/src/components/ContextualMenu/ContextualMenu.types.ts index dd4a4a07b540ca..0366286ccbeb6a 100644 --- a/packages/react/src/components/ContextualMenu/ContextualMenu.types.ts +++ b/packages/react/src/components/ContextualMenu/ContextualMenu.types.ts @@ -1,23 +1,23 @@ import * as React from 'react'; import { DirectionalHint } from '../../common/DirectionalHint'; -import { IFocusZoneProps } from '../../FocusZone'; -import { IIconProps } from '../../Icon'; -import { ICalloutProps, ICalloutContentStyleProps } from '../../Callout'; -import { ITheme, IStyle } from '../../Styling'; -import { IButtonStyles } from '../../Button'; -import { IRefObject, IBaseProps, IRectangle, IRenderFunction, IStyleFunctionOrObject } from '../../Utilities'; -import { IWithResponsiveModeState } from '../../ResponsiveMode'; -import { IContextualMenuClassNames, IMenuItemClassNames } from './ContextualMenu.classNames'; -import { IVerticalDividerClassNames } from '../Divider/VerticalDivider.types'; -import { +import type { IFocusZoneProps } from '../../FocusZone'; +import type { IIconProps } from '../../Icon'; +import type { ICalloutProps, ICalloutContentStyleProps } from '../../Callout'; +import type { ITheme, IStyle } from '../../Styling'; +import type { IButtonStyles } from '../../Button'; +import type { IRefObject, IBaseProps, IRectangle, IRenderFunction, IStyleFunctionOrObject } from '../../Utilities'; +import type { IWithResponsiveModeState } from '../../ResponsiveMode'; +import type { IContextualMenuClassNames, IMenuItemClassNames } from './ContextualMenu.classNames'; +import type { IVerticalDividerClassNames } from '../Divider/VerticalDivider.types'; +import type { IContextualMenuItemProps, IContextualMenuRenderItem, IContextualMenuItemStyleProps, IContextualMenuItemRenderFunctions, } from './ContextualMenuItem.types'; -import { IKeytipProps } from '../../Keytip'; -import { Target } from '@fluentui/react-hooks'; -import { IPopupRestoreFocusParams } from '../../Popup'; +import type { IKeytipProps } from '../../Keytip'; +import type { Target } from '@fluentui/react-hooks'; +import type { IPopupRestoreFocusParams } from '../../Popup'; export { DirectionalHint } from '../../common/DirectionalHint'; diff --git a/packages/react/src/components/ContextualMenu/ContextualMenuItem.base.tsx b/packages/react/src/components/ContextualMenu/ContextualMenuItem.base.tsx index b050cdc119974b..f083c795a11591 100644 --- a/packages/react/src/components/ContextualMenu/ContextualMenuItem.base.tsx +++ b/packages/react/src/components/ContextualMenu/ContextualMenuItem.base.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { hasSubmenu, getIsChecked } from '../../utilities/contextualMenu/index'; import { getRTL, initializeComponentRef } from '../../Utilities'; import { Icon } from '../../Icon'; -import { IContextualMenuItemProps, IContextualMenuItemRenderFunctions } from './ContextualMenuItem.types'; +import type { IContextualMenuItemProps, IContextualMenuItemRenderFunctions } from './ContextualMenuItem.types'; const renderItemIcon = (props: IContextualMenuItemProps) => { const { item, hasIcons, classNames } = props; diff --git a/packages/react/src/components/ContextualMenu/ContextualMenuItem.test.tsx b/packages/react/src/components/ContextualMenu/ContextualMenuItem.test.tsx index 9a96f95a1bb93e..96e327c93c5314 100644 --- a/packages/react/src/components/ContextualMenu/ContextualMenuItem.test.tsx +++ b/packages/react/src/components/ContextualMenu/ContextualMenuItem.test.tsx @@ -3,10 +3,10 @@ jest.mock('../../utilities/contextualMenu'); import * as React from 'react'; import { shallow, ShallowWrapper } from 'enzyme'; import { ContextualMenuItemBase } from './ContextualMenuItem.base'; -import { IContextualMenuItemProps } from './ContextualMenuItem.types'; -import { IContextualMenuItem } from './ContextualMenu.types'; -import { IMenuItemClassNames } from './ContextualMenu.classNames'; import { hasSubmenu } from '../../utilities/contextualMenu/index'; +import type { IContextualMenuItemProps } from './ContextualMenuItem.types'; +import type { IContextualMenuItem } from './ContextualMenu.types'; +import type { IMenuItemClassNames } from './ContextualMenu.classNames'; describe('ContextMenuItemChildren', () => { describe('when a checkmark icon', () => { diff --git a/packages/react/src/components/ContextualMenu/ContextualMenuItem.ts b/packages/react/src/components/ContextualMenu/ContextualMenuItem.ts index 5ded9b6b30081e..03e98530d49f32 100644 --- a/packages/react/src/components/ContextualMenu/ContextualMenuItem.ts +++ b/packages/react/src/components/ContextualMenu/ContextualMenuItem.ts @@ -1,12 +1,12 @@ import * as React from 'react'; import { styled } from '../../Utilities'; -import { +import { ContextualMenuItemBase } from './ContextualMenuItem.base'; +import { getItemStyles } from './ContextualMenu.classNames'; +import type { IContextualMenuItemProps, IContextualMenuItemStyleProps, IContextualMenuItemStyles, } from './ContextualMenuItem.types'; -import { ContextualMenuItemBase } from './ContextualMenuItem.base'; -import { getItemStyles } from './ContextualMenu.classNames'; /** * ContextualMenuItem description diff --git a/packages/react/src/components/ContextualMenu/ContextualMenuItem.types.ts b/packages/react/src/components/ContextualMenu/ContextualMenuItem.types.ts index 428d6fa582d1e5..7a282139185ef2 100644 --- a/packages/react/src/components/ContextualMenu/ContextualMenuItem.types.ts +++ b/packages/react/src/components/ContextualMenu/ContextualMenuItem.types.ts @@ -1,9 +1,9 @@ import * as React from 'react'; -import { IContextualMenuItem } from './ContextualMenu.types'; -import { IMenuItemClassNames } from './ContextualMenu.classNames'; -import { IStyle, ITheme } from '../../Styling'; -import { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; -import { IButtonStyles } from '../../Button'; +import type { IContextualMenuItem } from './ContextualMenu.types'; +import type { IMenuItemClassNames } from './ContextualMenu.classNames'; +import type { IStyle, ITheme } from '../../Styling'; +import type { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; +import type { IButtonStyles } from '../../Button'; /** * {@docCategory ContextualMenu} diff --git a/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.deprecated.test.tsx b/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.deprecated.test.tsx index 30e13aaa98a887..14069ce8ef1186 100644 --- a/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.deprecated.test.tsx +++ b/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.deprecated.test.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import * as renderer from 'react-test-renderer'; -import { IContextualMenuItem } from '../ContextualMenu.types'; -import { IMenuItemClassNames } from '../ContextualMenu.classNames'; import { ContextualMenuAnchor } from './ContextualMenuAnchor'; +import type { IContextualMenuItem } from '../ContextualMenu.types'; +import type { IMenuItemClassNames } from '../ContextualMenu.classNames'; describe('ContextualMenuButton', () => { describe('creates a normal button', () => { diff --git a/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.test.tsx b/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.test.tsx index 5190bc5a1f5a62..a68b4f44dd8c40 100644 --- a/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.test.tsx +++ b/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.test.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; import * as renderer from 'react-test-renderer'; import { mount } from 'enzyme'; -import { IContextualMenuItem } from '../ContextualMenu.types'; -import { IMenuItemClassNames } from '../ContextualMenu.classNames'; import { ContextualMenuAnchor } from './ContextualMenuAnchor'; +import type { IContextualMenuItem } from '../ContextualMenu.types'; +import type { IMenuItemClassNames } from '../ContextualMenu.classNames'; describe('ContextualMenuButton', () => { describe('creates a normal button', () => { diff --git a/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.tsx b/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.tsx index 7b4ac5c5d956bd..e675e735ff8fff 100644 --- a/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.tsx +++ b/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.tsx @@ -4,8 +4,8 @@ import { ContextualMenuItemWrapper } from './ContextualMenuItemWrapper'; import { KeytipData } from '../../../KeytipData'; import { isItemDisabled, hasSubmenu } from '../../../utilities/contextualMenu/index'; import { ContextualMenuItem } from '../ContextualMenuItem'; -import { IKeytipDataProps } from '../../../KeytipData'; -import { IKeytipProps } from '../../../Keytip'; +import type { IKeytipDataProps } from '../../../KeytipData'; +import type { IKeytipProps } from '../../../Keytip'; export class ContextualMenuAnchor extends ContextualMenuItemWrapper { private _anchor = React.createRef(); diff --git a/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuButton.deprecated.test.tsx b/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuButton.deprecated.test.tsx index c17cf74be018e2..71bedf281fe8a6 100644 --- a/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuButton.deprecated.test.tsx +++ b/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuButton.deprecated.test.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import * as renderer from 'react-test-renderer'; -import { IContextualMenuItem } from '../ContextualMenu.types'; -import { IMenuItemClassNames } from '../ContextualMenu.classNames'; import { ContextualMenuButton } from './ContextualMenuButton'; +import type { IContextualMenuItem } from '../ContextualMenu.types'; +import type { IMenuItemClassNames } from '../ContextualMenu.classNames'; describe('ContextualMenuButton', () => { describe('creates a normal button', () => { diff --git a/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuButton.test.tsx b/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuButton.test.tsx index a84aa487b39579..144c2b8f121ac0 100644 --- a/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuButton.test.tsx +++ b/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuButton.test.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; import * as renderer from 'react-test-renderer'; import { mount } from 'enzyme'; -import { IContextualMenuItem } from '../ContextualMenu.types'; -import { IMenuItemClassNames } from '../ContextualMenu.classNames'; import { ContextualMenuButton } from './ContextualMenuButton'; +import type { IContextualMenuItem } from '../ContextualMenu.types'; +import type { IMenuItemClassNames } from '../ContextualMenu.classNames'; describe('ContextualMenuButton', () => { describe('creates a normal button', () => { diff --git a/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuButton.tsx b/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuButton.tsx index d427be6c17a16d..23a3a4b77d6ee8 100644 --- a/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuButton.tsx +++ b/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuButton.tsx @@ -4,8 +4,8 @@ import { ContextualMenuItemWrapper } from './ContextualMenuItemWrapper'; import { KeytipData } from '../../../KeytipData'; import { getIsChecked, isItemDisabled, hasSubmenu, getMenuItemAriaRole } from '../../../utilities/contextualMenu/index'; import { ContextualMenuItem } from '../ContextualMenuItem'; -import { IKeytipDataProps } from '../../../KeytipData'; -import { IKeytipProps } from '../../../Keytip'; +import type { IKeytipDataProps } from '../../../KeytipData'; +import type { IKeytipProps } from '../../../Keytip'; export class ContextualMenuButton extends ContextualMenuItemWrapper { private _btn = React.createRef(); diff --git a/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuItemWrapper.tsx b/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuItemWrapper.tsx index 6dea039c2db516..214c737ae77b49 100644 --- a/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuItemWrapper.tsx +++ b/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuItemWrapper.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { initializeComponentRef, shallowCompare } from '../../../Utilities'; -import { IContextualMenuItemWrapperProps } from './ContextualMenuItemWrapper.types'; +import type { IContextualMenuItemWrapperProps } from './ContextualMenuItemWrapper.types'; export class ContextualMenuItemWrapper extends React.Component { constructor(props: IContextualMenuItemWrapperProps) { diff --git a/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuItemWrapper.types.ts b/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuItemWrapper.types.ts index 15fb527fcfdcd6..515890159efc54 100644 --- a/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuItemWrapper.types.ts +++ b/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuItemWrapper.types.ts @@ -1,8 +1,8 @@ import * as React from 'react'; -import { IContextualMenuItem, IContextualMenuItemProps } from '../../../ContextualMenu'; -import { IMenuItemClassNames } from '../ContextualMenu.classNames'; import { ContextualMenuItemWrapper } from './ContextualMenuItemWrapper'; -import { IRefObject } from '../../../Utilities'; +import type { IContextualMenuItem, IContextualMenuItemProps } from '../../../ContextualMenu'; +import type { IMenuItemClassNames } from '../ContextualMenu.classNames'; +import type { IRefObject } from '../../../Utilities'; export interface IContextualMenuItemWrapperProps extends React.ClassAttributes { /** diff --git a/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.deprecated.test.tsx b/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.deprecated.test.tsx index 2b99d6d120f036..d8706694777beb 100644 --- a/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.deprecated.test.tsx +++ b/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.deprecated.test.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import * as renderer from 'react-test-renderer'; -import { IContextualMenuItem } from '../ContextualMenu.types'; -import { IMenuItemClassNames } from '../ContextualMenu.classNames'; import { ContextualMenuSplitButton } from './ContextualMenuSplitButton'; +import type { IContextualMenuItem } from '../ContextualMenu.types'; +import type { IMenuItemClassNames } from '../ContextualMenu.classNames'; describe('ContextualMenuSplitButton', () => { describe('creates a normal split button', () => { diff --git a/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.test.tsx b/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.test.tsx index 77c4b7f7dca00b..ea0abb5a5675fb 100644 --- a/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.test.tsx +++ b/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.test.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; import * as renderer from 'react-test-renderer'; import { mount } from 'enzyme'; -import { IContextualMenuItem } from '../ContextualMenu.types'; -import { IMenuItemClassNames } from '../ContextualMenu.classNames'; import { ContextualMenuSplitButton } from './ContextualMenuSplitButton'; +import type { IContextualMenuItem } from '../ContextualMenu.types'; +import type { IMenuItemClassNames } from '../ContextualMenu.classNames'; describe('ContextualMenuSplitButton', () => { describe('creates a normal split button', () => { diff --git a/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.tsx b/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.tsx index 843c5177268f01..32053d792f0cba 100644 --- a/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.tsx +++ b/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.tsx @@ -10,14 +10,15 @@ import { getId, } from '../../../Utilities'; import { ContextualMenuItem } from '../ContextualMenuItem'; -import { IContextualMenuItem } from '../ContextualMenu.types'; -import { IMenuItemClassNames, getSplitButtonVerticalDividerClassNames } from '../ContextualMenu.classNames'; +import { getSplitButtonVerticalDividerClassNames } from '../ContextualMenu.classNames'; import { KeytipData } from '../../../KeytipData'; import { isItemDisabled, hasSubmenu, getMenuItemAriaRole } from '../../../utilities/contextualMenu/index'; import { VerticalDivider } from '../../../Divider'; import { ContextualMenuItemWrapper } from './ContextualMenuItemWrapper'; -import { IKeytipProps } from '../../../Keytip'; -import { IContextualMenuItemWrapperProps } from './ContextualMenuItemWrapper.types'; +import type { IContextualMenuItem } from '../ContextualMenu.types'; +import type { IMenuItemClassNames } from '../ContextualMenu.classNames'; +import type { IKeytipProps } from '../../../Keytip'; +import type { IContextualMenuItemWrapperProps } from './ContextualMenuItemWrapper.types'; export interface IContextualMenuSplitButtonState {} diff --git a/packages/react/src/components/ContextualMenu/index.ts b/packages/react/src/components/ContextualMenu/index.ts index eb46b07dc37433..3b0c6d543a37f8 100644 --- a/packages/react/src/components/ContextualMenu/index.ts +++ b/packages/react/src/components/ContextualMenu/index.ts @@ -1,9 +1,9 @@ export * from './ContextualMenu'; export * from './ContextualMenu.base'; -// eslint-disable-next-line deprecation/deprecation -export { IContextualMenuClassNames, IMenuItemClassNames } from './ContextualMenu.classNames'; export * from './ContextualMenu.types'; export * from './ContextualMenuItem'; export * from './ContextualMenuItem.base'; export * from './ContextualMenuItem.types'; export { getMenuItemStyles } from './ContextualMenu.cnstyles'; +// eslint-disable-next-line deprecation/deprecation +export type { IContextualMenuClassNames, IMenuItemClassNames } from './ContextualMenu.classNames'; diff --git a/packages/react/src/components/DatePicker/DatePicker.base.tsx b/packages/react/src/components/DatePicker/DatePicker.base.tsx index a90aa1f479712a..7ed30bdaacf4a0 100644 --- a/packages/react/src/components/DatePicker/DatePicker.base.tsx +++ b/packages/react/src/components/DatePicker/DatePicker.base.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { IDatePickerProps, IDatePickerStyleProps, IDatePickerStyles } from './DatePicker.types'; import { KeyCodes, classNamesFunction, @@ -8,15 +7,18 @@ import { css, format, getPropsWithDefaults, - IRenderFunction, } from '@fluentui/utilities'; -import { Calendar, ICalendar } from '../../Calendar'; +import { Calendar } from '../../Calendar'; import { FirstWeekOfYear, getDatePartHashValue, compareDatePart, DayOfWeek } from '@fluentui/date-time-utilities'; import { Callout, DirectionalHint } from '../../Callout'; -import { TextField, ITextField, ITextFieldProps } from '../../TextField'; +import { TextField } from '../../TextField'; import { FocusTrapZone } from '../../FocusTrapZone'; import { useId, useAsync, useControllableValue } from '@fluentui/react-hooks'; import { defaultDatePickerStrings } from './defaults'; +import type { IDatePickerProps, IDatePickerStyleProps, IDatePickerStyles } from './DatePicker.types'; +import type { IRenderFunction } from '@fluentui/utilities'; +import type { ICalendar } from '../../Calendar'; +import type { ITextField, ITextFieldProps } from '../../TextField'; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/components/DatePicker/DatePicker.styles.ts b/packages/react/src/components/DatePicker/DatePicker.styles.ts index 6bbc28cd199888..a3158fcc9c028c 100644 --- a/packages/react/src/components/DatePicker/DatePicker.styles.ts +++ b/packages/react/src/components/DatePicker/DatePicker.styles.ts @@ -1,5 +1,6 @@ -import { IDatePickerStyleProps, IDatePickerStyles } from './DatePicker.types'; -import { IStyle, normalize, getGlobalClassNames, FontSizes } from '@fluentui/style-utilities'; +import { normalize, getGlobalClassNames, FontSizes } from '@fluentui/style-utilities'; +import type { IDatePickerStyleProps, IDatePickerStyles } from './DatePicker.types'; +import type { IStyle } from '@fluentui/style-utilities'; const GlobalClassNames = { root: 'ms-DatePicker', diff --git a/packages/react/src/components/DatePicker/DatePicker.test.tsx b/packages/react/src/components/DatePicker/DatePicker.test.tsx index 06186fde1fca04..5f0545a4cab6de 100644 --- a/packages/react/src/components/DatePicker/DatePicker.test.tsx +++ b/packages/react/src/components/DatePicker/DatePicker.test.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import { Calendar } from '../../Calendar'; import { DatePicker } from './DatePicker'; import { DatePickerBase } from './DatePicker.base'; -import { IDatePickerStrings, IDatePickerProps } from './DatePicker.types'; import { FirstWeekOfYear } from '@fluentui/date-time-utilities'; import { shallow, mount, ReactWrapper } from 'enzyme'; import { resetIds } from '@fluentui/utilities'; @@ -13,6 +12,7 @@ import * as renderer from 'react-test-renderer'; import * as ReactDOM from 'react-dom'; import { CalendarDayGridBase } from '../CalendarDayGrid/CalendarDayGrid.base'; import { isConformant } from '../../common/isConformant'; +import type { IDatePickerStrings, IDatePickerProps } from './DatePicker.types'; describe('DatePicker', () => { beforeEach(() => { diff --git a/packages/react/src/components/DatePicker/DatePicker.tsx b/packages/react/src/components/DatePicker/DatePicker.tsx index e22eb5ca8744b3..ba4dedba4da8cf 100644 --- a/packages/react/src/components/DatePicker/DatePicker.tsx +++ b/packages/react/src/components/DatePicker/DatePicker.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled } from '@fluentui/utilities'; import { DatePickerBase } from './DatePicker.base'; import { styles } from './DatePicker.styles'; -import { IDatePickerProps } from './DatePicker.types'; +import type { IDatePickerProps } from './DatePicker.types'; export const DatePicker: React.FunctionComponent = styled(DatePickerBase, styles, undefined, { scope: 'DatePicker', diff --git a/packages/react/src/components/DatePicker/DatePicker.types.ts b/packages/react/src/components/DatePicker/DatePicker.types.ts index 8be9f26ec622ed..e3dfb3e7b8c037 100644 --- a/packages/react/src/components/DatePicker/DatePicker.types.ts +++ b/packages/react/src/components/DatePicker/DatePicker.types.ts @@ -1,10 +1,11 @@ import * as React from 'react'; -import { ICalendarProps } from '../../Calendar'; -import { DayOfWeek, FirstWeekOfYear, ICalendarStrings, IDateFormatting } from '@fluentui/date-time-utilities'; -import { IStyle, ITheme } from '@fluentui/style-utilities'; -import { IRefObject, IBaseProps, IStyleFunctionOrObject, IComponentAs } from '@fluentui/utilities'; -import { ICalloutProps } from '../../Callout'; -import { ITextFieldProps } from '../../TextField'; +import { DayOfWeek, FirstWeekOfYear } from '@fluentui/date-time-utilities'; +import type { ICalendarProps } from '../../Calendar'; +import type { ICalendarStrings, IDateFormatting } from '@fluentui/date-time-utilities'; +import type { IStyle, ITheme } from '@fluentui/style-utilities'; +import type { IRefObject, IBaseProps, IStyleFunctionOrObject, IComponentAs } from '@fluentui/utilities'; +import type { ICalloutProps } from '../../Callout'; +import type { ITextFieldProps } from '../../TextField'; /** * {@docCategory DatePicker} diff --git a/packages/react/src/components/DatePicker/defaults.ts b/packages/react/src/components/DatePicker/defaults.ts index 53e7da51081ecd..f422ba3a31d854 100644 --- a/packages/react/src/components/DatePicker/defaults.ts +++ b/packages/react/src/components/DatePicker/defaults.ts @@ -1,5 +1,5 @@ -import { IDatePickerStrings } from './DatePicker.types'; import { defaultCalendarStrings } from '../../Calendar'; +import type { IDatePickerStrings } from './DatePicker.types'; export const defaultDatePickerStrings: IDatePickerStrings = { ...defaultCalendarStrings, diff --git a/packages/react/src/components/DetailsList/DetailsColumn.base.tsx b/packages/react/src/components/DetailsList/DetailsColumn.base.tsx index ce948e11fa23ba..8415f571d877ae 100644 --- a/packages/react/src/components/DetailsList/DetailsColumn.base.tsx +++ b/packages/react/src/components/DetailsList/DetailsColumn.base.tsx @@ -1,18 +1,12 @@ import * as React from 'react'; import { Icon, FontIcon } from '../../Icon'; -import { IProcessedStyleSet } from '../../Styling'; -import { - initializeComponentRef, - EventGroup, - Async, - IDisposable, - classNamesFunction, - composeRenderFunction, -} from '../../Utilities'; +import { initializeComponentRef, EventGroup, Async, classNamesFunction, composeRenderFunction } from '../../Utilities'; import { ColumnActionsMode } from './DetailsList.types'; -import { IDragDropOptions } from '../../DragDrop'; import { DEFAULT_CELL_STYLE_PROPS } from './DetailsRow.styles'; -import { +import type { IProcessedStyleSet } from '../../Styling'; +import type { IDisposable } from '../../Utilities'; +import type { IDragDropOptions } from '../../DragDrop'; +import type { IDetailsColumnStyleProps, IDetailsColumnProps, IDetailsColumnStyles, diff --git a/packages/react/src/components/DetailsList/DetailsColumn.styles.ts b/packages/react/src/components/DetailsList/DetailsColumn.styles.ts index b1d734d1c1c478..24390f63c448c4 100644 --- a/packages/react/src/components/DetailsList/DetailsColumn.styles.ts +++ b/packages/react/src/components/DetailsList/DetailsColumn.styles.ts @@ -1,7 +1,8 @@ -import { IDetailsColumnStyleProps, IDetailsColumnStyles } from './DetailsColumn.types'; -import { getFocusStyle, getGlobalClassNames, hiddenContentStyle, IStyle, FontWeights } from '../../Styling'; +import { getFocusStyle, getGlobalClassNames, hiddenContentStyle, FontWeights } from '../../Styling'; import { DEFAULT_CELL_STYLE_PROPS } from './DetailsRow.styles'; import { getCellStyles } from './DetailsHeader.styles'; +import type { IDetailsColumnStyleProps, IDetailsColumnStyles } from './DetailsColumn.types'; +import type { IStyle } from '../../Styling'; const GlobalClassNames = { isActionable: 'is-actionable', diff --git a/packages/react/src/components/DetailsList/DetailsColumn.test.tsx b/packages/react/src/components/DetailsList/DetailsColumn.test.tsx index ec38c232b4f6ec..47ad9fecc63259 100644 --- a/packages/react/src/components/DetailsList/DetailsColumn.test.tsx +++ b/packages/react/src/components/DetailsList/DetailsColumn.test.tsx @@ -1,10 +1,12 @@ import * as React from 'react'; import { DetailsColumn } from './DetailsColumn'; -import { IColumn, ColumnActionsMode, IDetailsHeaderProps } from './DetailsList.types'; +import { ColumnActionsMode } from './DetailsList.types'; import { mount } from 'enzyme'; import { DetailsList } from './DetailsList'; -import { IRenderFunction } from '../../Utilities'; -import { ITooltipHostProps, TooltipHost } from '../../Tooltip'; +import { TooltipHost } from '../../Tooltip'; +import type { IColumn, IDetailsHeaderProps } from './DetailsList.types'; +import type { IRenderFunction } from '../../Utilities'; +import type { ITooltipHostProps } from '../../Tooltip'; let mockOnColumnClick: jest.Mock<{}>; let baseColumn: IColumn; diff --git a/packages/react/src/components/DetailsList/DetailsColumn.ts b/packages/react/src/components/DetailsList/DetailsColumn.ts index fe77aa7b021cc5..3a71b5397e1e4c 100644 --- a/packages/react/src/components/DetailsList/DetailsColumn.ts +++ b/packages/react/src/components/DetailsList/DetailsColumn.ts @@ -1,13 +1,13 @@ import * as React from 'react'; import { styled } from '../../Utilities'; -import { IDetailsColumnProps, IDetailsColumnStyleProps, IDetailsColumnStyles } from './DetailsColumn.types'; import { DetailsColumnBase } from './DetailsColumn.base'; import { getStyles } from './DetailsColumn.styles'; - -export { IDetailsColumnProps }; +import type { IDetailsColumnProps, IDetailsColumnStyleProps, IDetailsColumnStyles } from './DetailsColumn.types'; export const DetailsColumn: React.FunctionComponent = styled< IDetailsColumnProps, IDetailsColumnStyleProps, IDetailsColumnStyles >(DetailsColumnBase, getStyles, undefined, { scope: 'DetailsColumn' }); + +export type { IDetailsColumnProps }; diff --git a/packages/react/src/components/DetailsList/DetailsColumn.types.ts b/packages/react/src/components/DetailsList/DetailsColumn.types.ts index a8825ed7e8b935..21c43d81f14d72 100644 --- a/packages/react/src/components/DetailsList/DetailsColumn.types.ts +++ b/packages/react/src/components/DetailsList/DetailsColumn.types.ts @@ -1,12 +1,12 @@ import * as React from 'react'; -import { IColumn } from './DetailsList.types'; import { DetailsColumnBase } from './DetailsColumn.base'; -import { IRenderFunction, IStyleFunctionOrObject } from '../../Utilities'; -import { ITooltipHostProps } from '../../Tooltip'; -import { IDragDropHelper } from '../../DragDrop'; -import { ICellStyleProps } from './DetailsRow.types'; -import { ITheme, IStyle } from '../../Styling'; -import { IIconProps } from '../Icon/Icon.types'; +import type { IColumn } from './DetailsList.types'; +import type { IRenderFunction, IStyleFunctionOrObject } from '../../Utilities'; +import type { ITooltipHostProps } from '../../Tooltip'; +import type { IDragDropHelper } from '../../DragDrop'; +import type { ICellStyleProps } from './DetailsRow.types'; +import type { ITheme, IStyle } from '../../Styling'; +import type { IIconProps } from '../Icon/Icon.types'; /** * {@docgategory DetailsList} diff --git a/packages/react/src/components/DetailsList/DetailsFooter.types.ts b/packages/react/src/components/DetailsList/DetailsFooter.types.ts index 8946d511941e19..bb3d8a8de183d9 100644 --- a/packages/react/src/components/DetailsList/DetailsFooter.types.ts +++ b/packages/react/src/components/DetailsList/DetailsFooter.types.ts @@ -1,6 +1,7 @@ -import { IDetailsItemProps } from './DetailsRow.types'; -import { IColumn } from './DetailsList.types'; -import { ISelection, SelectionMode } from '../../Selection'; +import { SelectionMode } from '../../Selection'; +import type { IDetailsItemProps } from './DetailsRow.types'; +import type { IColumn } from './DetailsList.types'; +import type { ISelection } from '../../Selection'; /** * {@docCategory DetailsList} diff --git a/packages/react/src/components/DetailsList/DetailsHeader.base.tsx b/packages/react/src/components/DetailsList/DetailsHeader.base.tsx index 1d0dd20b7139b1..626ace4720ec15 100644 --- a/packages/react/src/components/DetailsList/DetailsHeader.base.tsx +++ b/packages/react/src/components/DetailsList/DetailsHeader.base.tsx @@ -1,39 +1,32 @@ import * as React from 'react'; -import { IProcessedStyleSet } from '../../Styling'; -import { - initializeComponentRef, - EventGroup, - IDisposable, - css, - getRTL, - getId, - KeyCodes, - classNamesFunction, -} from '../../Utilities'; -import { - IColumn, - IDetailsHeaderBaseProps, - IColumnDragDropDetails, - ColumnDragEndLocation, - CheckboxVisibility, -} from './DetailsList.types'; -import { IFocusZone, FocusZone, FocusZoneDirection } from '../../FocusZone'; +import { initializeComponentRef, EventGroup, css, getRTL, getId, KeyCodes, classNamesFunction } from '../../Utilities'; +import { ColumnDragEndLocation, CheckboxVisibility } from './DetailsList.types'; +import { FocusZone, FocusZoneDirection } from '../../FocusZone'; import { Icon, FontIcon } from '../../Icon'; import { Layer } from '../../Layer'; import { GroupSpacer } from '../GroupedList/GroupSpacer'; import { CollapseAllVisibility } from '../../GroupedList'; import { DetailsRowCheck } from './DetailsRowCheck'; -import { ITooltipHostProps } from '../../Tooltip'; -import { ISelection, SelectionMode, SELECTION_CHANGE } from '../../Selection'; -import { IDragDropOptions, DragDropHelper } from '../../DragDrop'; -import { DetailsColumn, IDetailsColumnProps } from '../../components/DetailsList/DetailsColumn'; -import { - SelectAllVisibility, +import { SelectionMode, SELECTION_CHANGE } from '../../Selection'; +import { DragDropHelper } from '../../DragDrop'; +import { DetailsColumn } from '../../components/DetailsList/DetailsColumn'; +import { SelectAllVisibility } from './DetailsHeader.types'; +import type { IProcessedStyleSet } from '../../Styling'; +import type { IDisposable } from '../../Utilities'; +import type { IColumn, IDetailsHeaderBaseProps, IColumnDragDropDetails } from './DetailsList.types'; +import type { IFocusZone } from '../../FocusZone'; +import type { ITooltipHostProps } from '../../Tooltip'; +import type { ISelection } from '../../Selection'; +import type { IDragDropOptions } from '../../DragDrop'; +import type { IDetailsColumnProps } from '../../components/DetailsList/DetailsColumn'; +import type { IDropHintDetails, IColumnReorderHeaderProps, IDetailsHeaderState, + IDetailsHeaderStyleProps, + IDetailsHeaderStyles, + IDetailsHeader, } from './DetailsHeader.types'; -import { IDetailsHeaderStyleProps, IDetailsHeaderStyles, IDetailsHeader } from './DetailsHeader.types'; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/components/DetailsList/DetailsHeader.styles.ts b/packages/react/src/components/DetailsList/DetailsHeader.styles.ts index edf6f1368c8532..b298629425450b 100644 --- a/packages/react/src/components/DetailsList/DetailsHeader.styles.ts +++ b/packages/react/src/components/DetailsList/DetailsHeader.styles.ts @@ -1,19 +1,18 @@ -import { IDetailsHeaderStyleProps, IDetailsHeaderStyles } from './DetailsHeader.types'; import { getFocusStyle, focusClear, - IStyle, getGlobalClassNames, HighContrastSelector, hiddenContentStyle, - ITheme, getHighContrastNoAdjustStyle, } from '../../Styling'; import { getRTL, IsFocusVisibleClassName } from '../../Utilities'; import { DEFAULT_CELL_STYLE_PROPS } from './DetailsRow.styles'; -import { ICellStyleProps } from './DetailsRow.types'; // For every group level there is a GroupSpacer added. Importing this const to have the source value in one place. import { SPACER_WIDTH as GROUP_EXPANDER_WIDTH } from '../GroupedList/GroupSpacer'; +import type { IDetailsHeaderStyleProps, IDetailsHeaderStyles } from './DetailsHeader.types'; +import type { IStyle, ITheme } from '../../Styling'; +import type { ICellStyleProps } from './DetailsRow.types'; const GlobalClassNames = { tooltipHost: 'ms-TooltipHost', diff --git a/packages/react/src/components/DetailsList/DetailsHeader.test.tsx b/packages/react/src/components/DetailsList/DetailsHeader.test.tsx index f5d5856d915e4c..7324e0d8d82c25 100644 --- a/packages/react/src/components/DetailsList/DetailsHeader.test.tsx +++ b/packages/react/src/components/DetailsList/DetailsHeader.test.tsx @@ -1,12 +1,14 @@ import * as React from 'react'; import { DetailsHeader } from './DetailsHeader'; -import { IDetailsHeader, IDropHintDetails, SelectAllVisibility } from './DetailsHeader.types'; -import { DetailsListLayoutMode, IColumn, ColumnActionsMode, CheckboxVisibility } from './DetailsList.types'; +import { SelectAllVisibility } from './DetailsHeader.types'; +import { DetailsListLayoutMode, ColumnActionsMode, CheckboxVisibility } from './DetailsList.types'; import { Selection, SelectionMode } from '../../utilities/selection/index'; import { EventGroup } from '../../Utilities'; import { mount } from 'enzyme'; import * as renderer from 'react-test-renderer'; import { getTheme } from '../../Styling'; +import type { IDetailsHeader, IDropHintDetails } from './DetailsHeader.types'; +import type { IColumn } from './DetailsList.types'; const _items: {}[] = []; const _selection = new Selection(); diff --git a/packages/react/src/components/DetailsList/DetailsHeader.ts b/packages/react/src/components/DetailsList/DetailsHeader.ts index 0c95a3582246f6..b3f9681eb05e71 100644 --- a/packages/react/src/components/DetailsList/DetailsHeader.ts +++ b/packages/react/src/components/DetailsList/DetailsHeader.ts @@ -1,18 +1,18 @@ import * as React from 'react'; import { styled } from '../../Utilities'; -import { +import { DetailsHeaderBase } from './DetailsHeader.base'; +import { getStyles } from './DetailsHeader.styles'; +import type { IDetailsHeaderProps, IDetailsHeaderBaseProps, IDetailsHeaderStyleProps, IDetailsHeaderStyles, } from './DetailsHeader.types'; -import { DetailsHeaderBase } from './DetailsHeader.base'; -import { getStyles } from './DetailsHeader.styles'; - -export { IDetailsHeaderProps, IDetailsHeaderBaseProps }; export const DetailsHeader: React.FunctionComponent = styled< IDetailsHeaderBaseProps, IDetailsHeaderStyleProps, IDetailsHeaderStyles >(DetailsHeaderBase, getStyles, undefined, { scope: 'DetailsHeader' }); + +export type { IDetailsHeaderProps, IDetailsHeaderBaseProps }; diff --git a/packages/react/src/components/DetailsList/DetailsHeader.types.ts b/packages/react/src/components/DetailsList/DetailsHeader.types.ts index 954ffe9896cca9..9f4b0998998d85 100644 --- a/packages/react/src/components/DetailsList/DetailsHeader.types.ts +++ b/packages/react/src/components/DetailsList/DetailsHeader.types.ts @@ -1,13 +1,15 @@ import * as React from 'react'; -import { IRefObject, IRenderFunction, IStyleFunctionOrObject } from '../../Utilities'; import { CollapseAllVisibility } from '../../GroupedList'; -import { ITheme, IStyle } from '../../Styling'; import { DetailsHeaderBase } from './DetailsHeader.base'; -import { IColumn, DetailsListLayoutMode, IColumnReorderOptions, ColumnDragEndLocation } from './DetailsList.types'; -import { ICellStyleProps, IDetailsItemProps } from './DetailsRow.types'; -import { ISelection, SelectionMode } from '../../Selection'; -import { IDetailsCheckboxProps } from './DetailsRowCheck.types'; -import { IDetailsColumnRenderTooltipProps } from './DetailsColumn.types'; +import { DetailsListLayoutMode, ColumnDragEndLocation } from './DetailsList.types'; +import { SelectionMode } from '../../Selection'; +import type { IRefObject, IRenderFunction, IStyleFunctionOrObject } from '../../Utilities'; +import type { ITheme, IStyle } from '../../Styling'; +import type { IColumn, IColumnReorderOptions } from './DetailsList.types'; +import type { ICellStyleProps, IDetailsItemProps } from './DetailsRow.types'; +import type { ISelection } from '../../Selection'; +import type { IDetailsCheckboxProps } from './DetailsRowCheck.types'; +import type { IDetailsColumnRenderTooltipProps } from './DetailsColumn.types'; /** * {@docCategory DetailsList} diff --git a/packages/react/src/components/DetailsList/DetailsList.base.tsx b/packages/react/src/components/DetailsList/DetailsList.base.tsx index 6d831ea4e51a11..b1b23926589bfb 100644 --- a/packages/react/src/components/DetailsList/DetailsList.base.tsx +++ b/packages/react/src/components/DetailsList/DetailsList.base.tsx @@ -7,7 +7,6 @@ import { KeyCodes, elementContains, getRTLSafeKeyCode, - IRenderFunction, classNamesFunction, memoizeFunction, } from '../../Utilities'; @@ -16,30 +15,18 @@ import { ColumnActionsMode, ConstrainMode, DetailsListLayoutMode, - IColumn, - IDetailsList, - IDetailsListProps, - IDetailsListStyles, - IDetailsListStyleProps, ColumnDragEndLocation, } from '../DetailsList/DetailsList.types'; import { DetailsHeader } from '../DetailsList/DetailsHeader'; -import { - IDetailsHeader, - SelectAllVisibility, - IDetailsHeaderProps, - IColumnReorderHeaderProps, -} from '../DetailsList/DetailsHeader.types'; -import { IDetailsFooterProps } from '../DetailsList/DetailsFooter.types'; +import { SelectAllVisibility } from '../DetailsList/DetailsHeader.types'; import { DetailsRowBase } from '../DetailsList/DetailsRow.base'; import { DetailsRow } from '../DetailsList/DetailsRow'; -import { IDetailsRowProps } from '../DetailsList/DetailsRow.types'; -import { IFocusZone, FocusZone, FocusZoneDirection, IFocusZoneProps } from '../../FocusZone'; -import { IObjectWithKey, ISelection, Selection, SelectionMode, SelectionZone } from '../../Selection'; +import { FocusZone, FocusZoneDirection } from '../../FocusZone'; +import { Selection, SelectionMode, SelectionZone } from '../../Selection'; import { DragDropHelper } from '../../DragDrop'; -import { IGroupedList, GroupedList, IGroupDividerProps, IGroupRenderProps } from '../../GroupedList'; -import { List, IListProps, ScrollToMode } from '../../List'; +import { GroupedList } from '../../GroupedList'; +import { List, ScrollToMode } from '../../List'; import { withViewport } from '../../utilities/decorators/withViewport'; import { GetGroupCount } from '../../utilities/groupedList/GroupedListUtility'; import { DEFAULT_CELL_STYLE_PROPS } from './DetailsRow.styles'; @@ -48,7 +35,25 @@ import { CHECK_CELL_WIDTH as CHECKBOX_WIDTH } from './DetailsRowCheck.styles'; import { SPACER_WIDTH as GROUP_EXPAND_WIDTH } from '../GroupedList/GroupSpacer'; import { composeRenderFunction, getId } from '@fluentui/utilities'; import { useConst } from '@fluentui/react-hooks'; -import { IGroup } from '../GroupedList/index'; +import type { IRenderFunction } from '../../Utilities'; +import type { + IColumn, + IDetailsList, + IDetailsListProps, + IDetailsListStyles, + IDetailsListStyleProps, +} from '../DetailsList/DetailsList.types'; +import type { + IDetailsHeader, + IDetailsHeaderProps, + IColumnReorderHeaderProps, +} from '../DetailsList/DetailsHeader.types'; +import type { IDetailsFooterProps } from '../DetailsList/DetailsFooter.types'; +import type { IDetailsRowProps } from '../DetailsList/DetailsRow.types'; +import type { IFocusZone, IFocusZoneProps } from '../../FocusZone'; +import type { IObjectWithKey, ISelection } from '../../Selection'; +import type { IGroupedList, IGroupDividerProps, IGroupRenderProps, IGroup } from '../../GroupedList'; +import type { IListProps } from '../../List'; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/components/DetailsList/DetailsList.styles.ts b/packages/react/src/components/DetailsList/DetailsList.styles.ts index a7030a9dd64486..a25e155470438f 100644 --- a/packages/react/src/components/DetailsList/DetailsList.styles.ts +++ b/packages/react/src/components/DetailsList/DetailsList.styles.ts @@ -1,5 +1,5 @@ -import { IDetailsListStyleProps, IDetailsListStyles } from './DetailsList.types'; import { getGlobalClassNames } from '../../Styling'; +import type { IDetailsListStyleProps, IDetailsListStyles } from './DetailsList.types'; const GlobalClassNames = { root: 'ms-DetailsList', diff --git a/packages/react/src/components/DetailsList/DetailsList.test.tsx b/packages/react/src/components/DetailsList/DetailsList.test.tsx index 21047e11903c6f..29243406a040b5 100644 --- a/packages/react/src/components/DetailsList/DetailsList.test.tsx +++ b/packages/react/src/components/DetailsList/DetailsList.test.tsx @@ -4,24 +4,22 @@ import * as renderer from 'react-test-renderer'; import { ReactWrapper } from 'enzyme'; import { safeMount } from '@fluentui/test-utilities'; import { KeyCodes } from '@fluentui/utilities'; -import { IDragDropEvents } from '../../DragDrop'; -import { IGroup } from '../../GroupedList'; import { SelectionMode, Selection, SelectionZone } from '../../Selection'; import { getTheme } from '../../Styling'; -import { EventGroup, IRenderFunction } from '../../Utilities'; -import { IDetailsColumnProps } from './DetailsColumn'; -import { IDetailsHeaderProps, DetailsHeader } from './DetailsHeader'; +import { EventGroup } from '../../Utilities'; +import { DetailsHeader } from './DetailsHeader'; import { DetailsList } from './DetailsList'; import { DetailsListBase } from './DetailsList.base'; -import { - CheckboxVisibility, - DetailsListLayoutMode, - IColumn, - IDetailsGroupDividerProps, - IDetailsList, -} from './DetailsList.types'; -import { DetailsRow, IDetailsRowProps } from './DetailsRow'; +import { CheckboxVisibility, DetailsListLayoutMode } from './DetailsList.types'; +import { DetailsRow } from './DetailsRow'; import { DetailsRowCheck } from './DetailsRowCheck'; +import type { IDragDropEvents } from '../../DragDrop'; +import type { IGroup } from '../../GroupedList'; +import type { IRenderFunction } from '../../Utilities'; +import type { IDetailsColumnProps } from './DetailsColumn'; +import type { IDetailsHeaderProps } from './DetailsHeader'; +import type { IColumn, IDetailsGroupDividerProps, IDetailsList } from './DetailsList.types'; +import type { IDetailsRowProps } from './DetailsRow'; // Populate mock data for testing function mockData(count: number, isColumn: boolean = false, customDivider: boolean = false): any { diff --git a/packages/react/src/components/DetailsList/DetailsList.ts b/packages/react/src/components/DetailsList/DetailsList.ts index ba19142259a52e..069e6d05ae808d 100644 --- a/packages/react/src/components/DetailsList/DetailsList.ts +++ b/packages/react/src/components/DetailsList/DetailsList.ts @@ -1,10 +1,8 @@ import * as React from 'react'; import { styled } from '../../Utilities'; -import { IDetailsListProps, IDetailsListStyleProps, IDetailsListStyles } from './DetailsList.types'; import { DetailsListBase } from './DetailsList.base'; import { getStyles } from './DetailsList.styles'; - -export { IDetailsListProps }; +import type { IDetailsListProps, IDetailsListStyleProps, IDetailsListStyles } from './DetailsList.types'; export const DetailsList: React.FunctionComponent = styled< IDetailsListProps, @@ -13,3 +11,5 @@ export const DetailsList: React.FunctionComponent = styled< >(DetailsListBase, getStyles, undefined, { scope: 'DetailsList', }); + +export type { IDetailsListProps }; diff --git a/packages/react/src/components/DetailsList/DetailsList.types.ts b/packages/react/src/components/DetailsList/DetailsList.types.ts index 2daa6424cade08..c209940f86184b 100644 --- a/packages/react/src/components/DetailsList/DetailsList.types.ts +++ b/packages/react/src/components/DetailsList/DetailsList.types.ts @@ -1,37 +1,26 @@ import * as React from 'react'; import { DetailsListBase } from './DetailsList.base'; -import { ISelection, SelectionMode, ISelectionZoneProps } from '../../Selection'; -import { IRefObject, IBaseProps, IRenderFunction, IStyleFunctionOrObject } from '../../Utilities'; -import { IDragDropEvents, IDragDropContext, IDragDropHelper, IDragDropOptions } from '../../DragDrop'; -import { IGroup, IGroupRenderProps, IGroupDividerProps, IGroupedListProps } from '../GroupedList/index'; -import { IDetailsRowProps, IDetailsRowBaseProps } from '../DetailsList/DetailsRow'; -import { IDetailsHeaderProps, IDetailsHeaderBaseProps } from './DetailsHeader'; -import { IDetailsFooterProps, IDetailsFooterBaseProps } from './DetailsFooter.types'; -import { IWithViewportProps, IViewport } from '../../utilities/decorators/withViewport'; -import { IList, IListProps, ScrollToMode } from '../../List'; -import { ITheme, IStyle } from '../../Styling'; -import { ICellStyleProps, IDetailsItemProps } from './DetailsRow.types'; -import { IDetailsCheckboxProps } from './DetailsRowCheck.types'; -import { +import { SelectionMode } from '../../Selection'; +import { ScrollToMode } from '../../List'; +import type { ISelection, ISelectionZoneProps } from '../../Selection'; +import type { IRefObject, IBaseProps, IRenderFunction, IStyleFunctionOrObject } from '../../Utilities'; +import type { IDragDropEvents, IDragDropContext, IDragDropHelper, IDragDropOptions } from '../../DragDrop'; +import type { IGroup, IGroupRenderProps, IGroupDividerProps, IGroupedListProps } from '../GroupedList/index'; +import type { IDetailsRowProps, IDetailsRowBaseProps } from '../DetailsList/DetailsRow'; +import type { IDetailsHeaderProps, IDetailsHeaderBaseProps } from './DetailsHeader'; +import type { IDetailsFooterProps, IDetailsFooterBaseProps } from './DetailsFooter.types'; +import type { IWithViewportProps, IViewport } from '../../utilities/decorators/withViewport'; +import type { IList, IListProps } from '../../List'; +import type { ITheme, IStyle } from '../../Styling'; +import type { ICellStyleProps, IDetailsItemProps } from './DetailsRow.types'; +import type { IDetailsCheckboxProps } from './DetailsRowCheck.types'; +import type { IDetailsColumnStyleProps, IDetailsColumnProps, IDetailsColumnStyles, IDetailsColumnFilterIconProps, } from './DetailsColumn.types'; -export { - IDetailsHeaderProps, - IDetailsRowBaseProps, - IDetailsHeaderBaseProps, - IDetailsFooterBaseProps, - IDragDropContext, - IDragDropEvents, - IDragDropHelper, - IDragDropOptions, - IViewport, - IWithViewportProps, -}; - /** * {@docCategory DetailsList} */ @@ -677,3 +666,16 @@ export interface IDetailsGroupRenderProps extends IGroupRenderProps { export interface IDetailsGroupDividerProps extends IGroupDividerProps, IDetailsItemProps {} export interface IDetailsListCheckboxProps extends IDetailsCheckboxProps {} + +export type { + IDetailsHeaderProps, + IDetailsRowBaseProps, + IDetailsHeaderBaseProps, + IDetailsFooterBaseProps, + IDragDropContext, + IDragDropEvents, + IDragDropHelper, + IDragDropOptions, + IViewport, + IWithViewportProps, +}; diff --git a/packages/react/src/components/DetailsList/DetailsRow.base.tsx b/packages/react/src/components/DetailsList/DetailsRow.base.tsx index 50576a52c8caa4..8a9182cb0946f1 100644 --- a/packages/react/src/components/DetailsList/DetailsRow.base.tsx +++ b/packages/react/src/components/DetailsList/DetailsRow.base.tsx @@ -2,26 +2,27 @@ import * as React from 'react'; import { initializeComponentRef, EventGroup, - IDisposable, css, shallowCompare, getNativeProps, divProperties, } from '../../Utilities'; -import { IColumn, CheckboxVisibility } from './DetailsList.types'; +import { CheckboxVisibility } from './DetailsList.types'; import { DetailsRowCheck } from './DetailsRowCheck'; import { GroupSpacer } from '../GroupedList/GroupSpacer'; import { DetailsRowFields } from './DetailsRowFields'; -import { FocusZone, FocusZoneDirection, IFocusZone } from '../../FocusZone'; +import { FocusZone, FocusZoneDirection } from '../../FocusZone'; import { SelectionMode, SELECTION_CHANGE } from '../../Selection'; import { CollapseAllVisibility } from '../../GroupedList'; -import { IDragDropOptions } from '../../DragDrop'; -import { IDetailsRowBaseProps } from './DetailsRow.types'; -import { IDetailsRowCheckProps } from './DetailsRowCheck.types'; -import { IDetailsRowStyleProps, IDetailsRowStyles } from './DetailsRow.types'; import { classNamesFunction } from '../../Utilities'; -import { IDetailsRowFieldsProps } from './DetailsRowFields.types'; -import { IProcessedStyleSet } from '../../Styling'; +import type { IDisposable } from '../../Utilities'; +import type { IColumn } from './DetailsList.types'; +import type { IFocusZone } from '../../FocusZone'; +import type { IDragDropOptions } from '../../DragDrop'; +import type { IDetailsRowBaseProps, IDetailsRowStyleProps, IDetailsRowStyles } from './DetailsRow.types'; +import type { IDetailsRowCheckProps } from './DetailsRowCheck.types'; +import type { IDetailsRowFieldsProps } from './DetailsRowFields.types'; +import type { IProcessedStyleSet } from '../../Styling'; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/components/DetailsList/DetailsRow.styles.ts b/packages/react/src/components/DetailsList/DetailsRow.styles.ts index 9a29c643f4649e..2d8dc2b7343ac7 100644 --- a/packages/react/src/components/DetailsList/DetailsRow.styles.ts +++ b/packages/react/src/components/DetailsList/DetailsRow.styles.ts @@ -1,15 +1,15 @@ -import { IDetailsRowStyleProps, IDetailsRowStyles, ICellStyleProps } from './DetailsRow.types'; import { AnimationClassNames, AnimationStyles, HighContrastSelector, - IStyle, getFocusStyle, getGlobalClassNames, FontWeights, getHighContrastNoAdjustStyle, } from '../../Styling'; import { IsFocusVisibleClassName } from '../../Utilities'; +import type { IDetailsRowStyleProps, IDetailsRowStyles, ICellStyleProps } from './DetailsRow.types'; +import type { IStyle } from '../../Styling'; export const DetailsRowGlobalClassNames = { root: 'ms-DetailsRow', diff --git a/packages/react/src/components/DetailsList/DetailsRow.test.tsx b/packages/react/src/components/DetailsList/DetailsRow.test.tsx index 17c2bcfc6f25f0..d060f131da8d75 100644 --- a/packages/react/src/components/DetailsList/DetailsRow.test.tsx +++ b/packages/react/src/components/DetailsList/DetailsRow.test.tsx @@ -1,11 +1,12 @@ import * as React from 'react'; import * as renderer from 'react-test-renderer'; import { DetailsList } from './DetailsList'; -import { IDetailsRowProps } from './DetailsRow.types'; -import { IDetailsListProps, IColumn, CheckboxVisibility } from './DetailsList.types'; +import { CheckboxVisibility } from './DetailsList.types'; import { SelectionMode, Selection } from '../../Selection'; import { DetailsRow } from './DetailsRow'; import { getTheme } from '../../Styling'; +import type { IDetailsRowProps } from './DetailsRow.types'; +import type { IDetailsListProps, IColumn } from './DetailsList.types'; const _columns: IColumn[] = [ { diff --git a/packages/react/src/components/DetailsList/DetailsRow.ts b/packages/react/src/components/DetailsList/DetailsRow.ts index f5814bb9035a5b..fe71bd69d42798 100644 --- a/packages/react/src/components/DetailsList/DetailsRow.ts +++ b/packages/react/src/components/DetailsList/DetailsRow.ts @@ -1,10 +1,13 @@ import * as React from 'react'; import { styled } from '../../Utilities'; -import { IDetailsRowProps, IDetailsRowBaseProps, IDetailsRowStyleProps, IDetailsRowStyles } from './DetailsRow.types'; import { DetailsRowBase } from './DetailsRow.base'; import { getDetailsRowStyles } from './DetailsRow.styles'; - -export { IDetailsRowProps, IDetailsRowBaseProps }; +import type { + IDetailsRowProps, + IDetailsRowBaseProps, + IDetailsRowStyleProps, + IDetailsRowStyles, +} from './DetailsRow.types'; export const DetailsRow: React.FunctionComponent = styled< IDetailsRowBaseProps, @@ -13,3 +16,5 @@ export const DetailsRow: React.FunctionComponent = styled< >(DetailsRowBase, getDetailsRowStyles, undefined, { scope: 'DetailsRow', }); + +export type { IDetailsRowProps, IDetailsRowBaseProps }; diff --git a/packages/react/src/components/DetailsList/DetailsRow.types.ts b/packages/react/src/components/DetailsList/DetailsRow.types.ts index ff23b8cfed926a..bf10a45ff6beb1 100644 --- a/packages/react/src/components/DetailsList/DetailsRow.types.ts +++ b/packages/react/src/components/DetailsList/DetailsRow.types.ts @@ -1,14 +1,17 @@ import * as React from 'react'; import { DetailsRowBase } from './DetailsRow.base'; -import { IStyle, ITheme } from '../../Styling'; -import { IColumn, CheckboxVisibility, IDetailsListProps } from './DetailsList.types'; -import { ISelection, SelectionMode } from '../../Selection'; -import { IDragDropHelper, IDragDropEvents } from '../../DragDrop'; -import { IViewport } from '../../utilities/decorators/withViewport'; -import { CollapseAllVisibility, IGroup } from '../GroupedList/GroupedList.types'; -import { IBaseProps, IRefObject, IStyleFunctionOrObject, IRenderFunction } from '../../Utilities'; -import { IDetailsRowCheckProps, IDetailsCheckboxProps } from './DetailsRowCheck.types'; -import { IDetailsRowFieldsProps } from './DetailsRowFields.types'; +import { CheckboxVisibility } from './DetailsList.types'; +import { SelectionMode } from '../../Selection'; +import { CollapseAllVisibility } from '../GroupedList/GroupedList.types'; +import type { IStyle, ITheme } from '../../Styling'; +import type { IColumn, IDetailsListProps } from './DetailsList.types'; +import type { ISelection } from '../../Selection'; +import type { IDragDropHelper, IDragDropEvents } from '../../DragDrop'; +import type { IViewport } from '../../utilities/decorators/withViewport'; +import type { IGroup } from '../GroupedList/GroupedList.types'; +import type { IBaseProps, IRefObject, IStyleFunctionOrObject, IRenderFunction } from '../../Utilities'; +import type { IDetailsRowCheckProps, IDetailsCheckboxProps } from './DetailsRowCheck.types'; +import type { IDetailsRowFieldsProps } from './DetailsRowFields.types'; /** * {@docCategory DetailsList} diff --git a/packages/react/src/components/DetailsList/DetailsRowCheck.styles.ts b/packages/react/src/components/DetailsList/DetailsRowCheck.styles.ts index 7a4557e66cbdeb..d9df8d50dee6ff 100644 --- a/packages/react/src/components/DetailsList/DetailsRowCheck.styles.ts +++ b/packages/react/src/components/DetailsList/DetailsRowCheck.styles.ts @@ -1,8 +1,8 @@ import { getGlobalClassNames, getFocusStyle } from '../../Styling'; -import { IDetailsRowCheckStyleProps, IDetailsRowCheckStyles } from './DetailsRowCheck.types'; import { DEFAULT_ROW_HEIGHTS } from './DetailsRow.styles'; import { HEADER_HEIGHT } from './DetailsHeader.styles'; import { CheckGlobalClassNames } from '../../components/Check/Check.styles'; +import type { IDetailsRowCheckStyleProps, IDetailsRowCheckStyles } from './DetailsRowCheck.types'; const GlobalClassNames = { root: 'ms-DetailsRow-check', diff --git a/packages/react/src/components/DetailsList/DetailsRowCheck.tsx b/packages/react/src/components/DetailsList/DetailsRowCheck.tsx index 5f98c856e090d3..a966caf2387750 100644 --- a/packages/react/src/components/DetailsList/DetailsRowCheck.tsx +++ b/packages/react/src/components/DetailsList/DetailsRowCheck.tsx @@ -1,15 +1,15 @@ import * as React from 'react'; -import { +import { css, styled, classNamesFunction, composeRenderFunction, getNativeElementProps } from '../../Utilities'; +import { Check } from '../../Check'; +import { getStyles } from './DetailsRowCheck.styles'; +import { SelectionMode } from '../../Selection'; +import type { IDetailsRowCheckProps, IDetailsCheckboxProps, IDetailsRowCheckStyleProps, IDetailsRowCheckStyles, } from './DetailsRowCheck.types'; -import { css, styled, classNamesFunction, composeRenderFunction, getNativeElementProps } from '../../Utilities'; -import { Check } from '../../Check'; -import { getStyles } from './DetailsRowCheck.styles'; -import { SelectionMode } from '../../Selection'; -import { ITheme } from '../../Styling'; +import type { ITheme } from '../../Styling'; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/components/DetailsList/DetailsRowCheck.types.ts b/packages/react/src/components/DetailsList/DetailsRowCheck.types.ts index bdf69a06fe052d..74ebd7954b159a 100644 --- a/packages/react/src/components/DetailsList/DetailsRowCheck.types.ts +++ b/packages/react/src/components/DetailsList/DetailsRowCheck.types.ts @@ -1,7 +1,7 @@ import * as React from 'react'; import { SelectionMode } from '../../Selection'; -import { IStyle, ITheme } from '../../Styling'; -import { IStyleFunctionOrObject, IRenderFunction } from '../../Utilities'; +import type { IStyle, ITheme } from '../../Styling'; +import type { IStyleFunctionOrObject, IRenderFunction } from '../../Utilities'; /** * {@docCategory DetailsList} diff --git a/packages/react/src/components/DetailsList/DetailsRowFields.tsx b/packages/react/src/components/DetailsList/DetailsRowFields.tsx index de4479b8bcba31..cc562ddde9e713 100644 --- a/packages/react/src/components/DetailsList/DetailsRowFields.tsx +++ b/packages/react/src/components/DetailsList/DetailsRowFields.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import { IColumn } from './DetailsList.types'; import { css } from '../../Utilities'; -import { IDetailsRowFieldsProps } from './DetailsRowFields.types'; import { DEFAULT_CELL_STYLE_PROPS } from './DetailsRow.styles'; +import type { IColumn } from './DetailsList.types'; +import type { IDetailsRowFieldsProps } from './DetailsRowFields.types'; const getCellText = (item: any, column: IColumn): string => { let value = item && column && column.fieldName ? item[column.fieldName] : ''; diff --git a/packages/react/src/components/DetailsList/DetailsRowFields.types.ts b/packages/react/src/components/DetailsList/DetailsRowFields.types.ts index 9fb8980a6eb26d..1dcbf5e850ccd9 100644 --- a/packages/react/src/components/DetailsList/DetailsRowFields.types.ts +++ b/packages/react/src/components/DetailsList/DetailsRowFields.types.ts @@ -1,7 +1,7 @@ -import { IColumn } from './DetailsList.types'; -import { ICellStyleProps, IDetailsRowStyles } from './DetailsRow.types'; -import { IDetailsListProps } from './DetailsList'; -import { IDetailsRowProps } from './DetailsRow'; +import type { IColumn } from './DetailsList.types'; +import type { ICellStyleProps, IDetailsRowStyles } from './DetailsRow.types'; +import type { IDetailsListProps } from './DetailsList'; +import type { IDetailsRowProps } from './DetailsRow'; /** * Extended column render props. diff --git a/packages/react/src/components/DetailsList/ShimmeredDetailsList.base.tsx b/packages/react/src/components/DetailsList/ShimmeredDetailsList.base.tsx index 8c582feb05518c..4c6a8a020aaee8 100644 --- a/packages/react/src/components/DetailsList/ShimmeredDetailsList.base.tsx +++ b/packages/react/src/components/DetailsList/ShimmeredDetailsList.base.tsx @@ -1,19 +1,20 @@ import * as React from 'react'; import { classNamesFunction, css } from '../../Utilities'; -import { IProcessedStyleSet } from '../../Styling'; import { SelectionMode } from '../../Selection'; import { DetailsList } from './DetailsList'; -import { IDetailsRowProps } from './DetailsRow.types'; -import { Shimmer, ShimmerElementsGroup, ShimmerElementType, IShimmerElement } from '../../Shimmer'; -import { +import { Shimmer, ShimmerElementsGroup, ShimmerElementType } from '../../Shimmer'; +import { CheckboxVisibility } from './DetailsList.types'; + +import { DEFAULT_CELL_STYLE_PROPS, DEFAULT_ROW_HEIGHTS } from './DetailsRow.styles'; +import type { IProcessedStyleSet } from '../../Styling'; +import type { IDetailsRowProps } from './DetailsRow.types'; +import type { IShimmerElement } from '../../Shimmer'; +import type { IShimmeredDetailsListProps, IShimmeredDetailsListStyleProps, IShimmeredDetailsListStyles, } from './ShimmeredDetailsList.types'; -import { CheckboxVisibility } from './DetailsList.types'; - -import { DEFAULT_CELL_STYLE_PROPS, DEFAULT_ROW_HEIGHTS } from './DetailsRow.styles'; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/components/DetailsList/ShimmeredDetailsList.styles.ts b/packages/react/src/components/DetailsList/ShimmeredDetailsList.styles.ts index b6660b07e9be96..2654e11e59853a 100644 --- a/packages/react/src/components/DetailsList/ShimmeredDetailsList.styles.ts +++ b/packages/react/src/components/DetailsList/ShimmeredDetailsList.styles.ts @@ -1,4 +1,4 @@ -import { IShimmeredDetailsListStyleProps, IShimmeredDetailsListStyles } from './ShimmeredDetailsList.types'; +import type { IShimmeredDetailsListStyleProps, IShimmeredDetailsListStyles } from './ShimmeredDetailsList.types'; export const getStyles = (props: IShimmeredDetailsListStyleProps): IShimmeredDetailsListStyles => { const { theme } = props; diff --git a/packages/react/src/components/DetailsList/ShimmeredDetailsList.ts b/packages/react/src/components/DetailsList/ShimmeredDetailsList.ts index b4ed458f7c5b88..a41a624501f731 100644 --- a/packages/react/src/components/DetailsList/ShimmeredDetailsList.ts +++ b/packages/react/src/components/DetailsList/ShimmeredDetailsList.ts @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled } from '../../Utilities'; import { ShimmeredDetailsListBase } from './ShimmeredDetailsList.base'; import { getStyles } from './ShimmeredDetailsList.styles'; -import { +import type { IShimmeredDetailsListProps, IShimmeredDetailsListStyleProps, IShimmeredDetailsListStyles, diff --git a/packages/react/src/components/DetailsList/ShimmeredDetailsList.types.ts b/packages/react/src/components/DetailsList/ShimmeredDetailsList.types.ts index 0ff520ebb0806d..f4ef408038b2b0 100644 --- a/packages/react/src/components/DetailsList/ShimmeredDetailsList.types.ts +++ b/packages/react/src/components/DetailsList/ShimmeredDetailsList.types.ts @@ -1,8 +1,8 @@ import * as React from 'react'; -import { IDetailsListProps } from './DetailsList.types'; -import { IDetailsRowProps } from './DetailsRow.types'; -import { IStyle } from '../../Styling'; -import { IStyleFunctionOrObject } from '../../Utilities'; +import type { IDetailsListProps } from './DetailsList.types'; +import type { IDetailsRowProps } from './DetailsRow.types'; +import type { IStyle } from '../../Styling'; +import type { IStyleFunctionOrObject } from '../../Utilities'; /** * ShimmeredDetailsList props interface diff --git a/packages/react/src/components/Dialog/Dialog.base.tsx b/packages/react/src/components/Dialog/Dialog.base.tsx index f2537b43563e1c..6099e9d98ce43d 100644 --- a/packages/react/src/components/Dialog/Dialog.base.tsx +++ b/packages/react/src/components/Dialog/Dialog.base.tsx @@ -1,14 +1,16 @@ import * as React from 'react'; import { warnDeprecations, classNamesFunction, getId } from '../../Utilities'; -import { IDialogProps, IDialogStyleProps, IDialogStyles } from './Dialog.types'; -import { DialogType, IDialogContentProps } from './DialogContent.types'; -import { Modal, IModalProps, IDragOptions } from '../../Modal'; -import { ILayerProps } from '../../Layer'; +import { DialogType } from './DialogContent.types'; +import { Modal } from '../../Modal'; import { withResponsiveMode } from '../../ResponsiveMode'; const getClassNames = classNamesFunction(); import { DialogContent } from './DialogContent'; +import type { IDialogProps, IDialogStyleProps, IDialogStyles } from './Dialog.types'; +import type { IDialogContentProps } from './DialogContent.types'; +import type { IModalProps, IDragOptions } from '../../Modal'; +import type { ILayerProps } from '../../Layer'; const DefaultModalProps: IModalProps = { isDarkOverlay: false, diff --git a/packages/react/src/components/Dialog/Dialog.styles.ts b/packages/react/src/components/Dialog/Dialog.styles.ts index 100288c1342f01..0870266ded3697 100644 --- a/packages/react/src/components/Dialog/Dialog.styles.ts +++ b/packages/react/src/components/Dialog/Dialog.styles.ts @@ -1,5 +1,5 @@ -import { IDialogStyleProps, IDialogStyles } from './Dialog.types'; import { ScreenWidthMinMedium, getGlobalClassNames } from '../../Styling'; +import type { IDialogStyleProps, IDialogStyles } from './Dialog.types'; const GlobalClassNames = { root: 'ms-Dialog', diff --git a/packages/react/src/components/Dialog/Dialog.tsx b/packages/react/src/components/Dialog/Dialog.tsx index a042a212500491..805e60959cc8a1 100644 --- a/packages/react/src/components/Dialog/Dialog.tsx +++ b/packages/react/src/components/Dialog/Dialog.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { styled } from '../../Utilities'; -import { IDialogProps, IDialogStyleProps, IDialogStyles } from './Dialog.types'; import { DialogBase } from './Dialog.base'; import { getStyles } from './Dialog.styles'; +import type { IDialogProps, IDialogStyleProps, IDialogStyles } from './Dialog.types'; export const Dialog: React.FunctionComponent = styled( DialogBase, diff --git a/packages/react/src/components/Dialog/Dialog.types.ts b/packages/react/src/components/Dialog/Dialog.types.ts index 5f246ec2ce39af..c2802cf4412e5b 100644 --- a/packages/react/src/components/Dialog/Dialog.types.ts +++ b/packages/react/src/components/Dialog/Dialog.types.ts @@ -1,13 +1,14 @@ import * as React from 'react'; -import { IModalProps } from '../../Modal'; import { DialogBase } from './Dialog.base'; -import { DialogType, IDialogContentProps } from './DialogContent.types'; -import { IButtonProps } from '../../Button'; -import { IWithResponsiveModeState } from '../../ResponsiveMode'; -import { IAccessiblePopupProps } from '../../common/IAccessiblePopupProps'; -import { IStyle, ITheme } from '../../Styling'; -import { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; -import { ICSSRule, ICSSPixelUnitRule } from '@fluentui/merge-styles/lib/IRawStyleBase'; +import { DialogType } from './DialogContent.types'; +import type { IModalProps } from '../../Modal'; +import type { IDialogContentProps } from './DialogContent.types'; +import type { IButtonProps } from '../../Button'; +import type { IWithResponsiveModeState } from '../../ResponsiveMode'; +import type { IAccessiblePopupProps } from '../../common/IAccessiblePopupProps'; +import type { IStyle, ITheme } from '../../Styling'; +import type { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; +import type { ICSSRule, ICSSPixelUnitRule } from '@fluentui/merge-styles/lib/IRawStyleBase'; /** * {@docCategory Dialog} diff --git a/packages/react/src/components/Dialog/DialogContent.base.tsx b/packages/react/src/components/Dialog/DialogContent.base.tsx index d53e14b28a13ae..e5c00348545393 100644 --- a/packages/react/src/components/Dialog/DialogContent.base.tsx +++ b/packages/react/src/components/Dialog/DialogContent.base.tsx @@ -1,10 +1,11 @@ import * as React from 'react'; import { classNamesFunction, css, warnDeprecations, initializeComponentRef } from '../../Utilities'; -import { DialogType, IDialogContentProps, IDialogContentStyleProps, IDialogContentStyles } from './DialogContent.types'; +import { DialogType } from './DialogContent.types'; import { IconButton } from '../../Button'; import { DialogFooter } from './DialogFooter'; -import { IDialogFooterProps } from './DialogFooter.types'; import { withResponsiveMode } from '../../ResponsiveMode'; +import type { IDialogContentProps, IDialogContentStyleProps, IDialogContentStyles } from './DialogContent.types'; +import type { IDialogFooterProps } from './DialogFooter.types'; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/components/Dialog/DialogContent.styles.ts b/packages/react/src/components/Dialog/DialogContent.styles.ts index 1c4b9dd3ada7cf..f8d67d6515e86d 100644 --- a/packages/react/src/components/Dialog/DialogContent.styles.ts +++ b/packages/react/src/components/Dialog/DialogContent.styles.ts @@ -1,4 +1,3 @@ -import { IDialogContentStyleProps, IDialogContentStyles } from './DialogContent.types'; import { FontWeights, getGlobalClassNames, @@ -6,6 +5,7 @@ import { ScreenWidthMinSmall, ScreenWidthMaxSmall, } from '../../Styling'; +import type { IDialogContentStyleProps, IDialogContentStyles } from './DialogContent.types'; const GlobalClassNames = { contentLgHeader: 'ms-Dialog-lgHeader', diff --git a/packages/react/src/components/Dialog/DialogContent.tsx b/packages/react/src/components/Dialog/DialogContent.tsx index bd8fea9ddcdfdd..2c90d46efb6743 100644 --- a/packages/react/src/components/Dialog/DialogContent.tsx +++ b/packages/react/src/components/Dialog/DialogContent.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { styled } from '../../Utilities'; -import { IDialogContentProps, IDialogContentStyleProps, IDialogContentStyles } from './DialogContent.types'; import { DialogContentBase } from './DialogContent.base'; import { getStyles } from './DialogContent.styles'; +import type { IDialogContentProps, IDialogContentStyleProps, IDialogContentStyles } from './DialogContent.types'; export const DialogContent: React.FunctionComponent = styled< IDialogContentProps, diff --git a/packages/react/src/components/Dialog/DialogContent.types.ts b/packages/react/src/components/Dialog/DialogContent.types.ts index d75c8746e58704..c2b8ec3ae7c00e 100644 --- a/packages/react/src/components/Dialog/DialogContent.types.ts +++ b/packages/react/src/components/Dialog/DialogContent.types.ts @@ -1,9 +1,9 @@ import * as React from 'react'; import { DialogContentBase } from './DialogContent.base'; -import { IButtonProps } from '../../Button'; import { ResponsiveMode } from '../../ResponsiveMode'; -import { IStyle, ITheme } from '../../Styling'; -import { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; +import type { IButtonProps } from '../../Button'; +import type { IStyle, ITheme } from '../../Styling'; +import type { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; /** * {@docCategory Dialog} diff --git a/packages/react/src/components/Dialog/DialogFooter.base.tsx b/packages/react/src/components/Dialog/DialogFooter.base.tsx index ac5c4b0cbe23b1..0ef141285b1ccb 100644 --- a/packages/react/src/components/Dialog/DialogFooter.base.tsx +++ b/packages/react/src/components/Dialog/DialogFooter.base.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import { IDialogFooterProps, IDialogFooterStyleProps, IDialogFooterStyles } from './DialogFooter.types'; import { classNamesFunction, initializeComponentRef } from '../../Utilities'; -import { IProcessedStyleSet } from '../../Styling'; +import type { IDialogFooterProps, IDialogFooterStyleProps, IDialogFooterStyles } from './DialogFooter.types'; +import type { IProcessedStyleSet } from '../../Styling'; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/components/Dialog/DialogFooter.styles.ts b/packages/react/src/components/Dialog/DialogFooter.styles.ts index 939a2fe65fd44b..0ba644550c7540 100644 --- a/packages/react/src/components/Dialog/DialogFooter.styles.ts +++ b/packages/react/src/components/Dialog/DialogFooter.styles.ts @@ -1,5 +1,5 @@ -import { IDialogFooterStyleProps, IDialogFooterStyles } from './DialogFooter.types'; import { getGlobalClassNames } from '../../Styling'; +import type { IDialogFooterStyleProps, IDialogFooterStyles } from './DialogFooter.types'; const GlobalClassNames = { actions: 'ms-Dialog-actions', diff --git a/packages/react/src/components/Dialog/DialogFooter.tsx b/packages/react/src/components/Dialog/DialogFooter.tsx index db199791fa3171..95b6d099fa13aa 100644 --- a/packages/react/src/components/Dialog/DialogFooter.tsx +++ b/packages/react/src/components/Dialog/DialogFooter.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { styled } from '../../Utilities'; -import { IDialogFooterProps, IDialogFooterStyleProps, IDialogFooterStyles } from './DialogFooter.types'; import { DialogFooterBase } from './DialogFooter.base'; import { getStyles } from './DialogFooter.styles'; +import type { IDialogFooterProps, IDialogFooterStyleProps, IDialogFooterStyles } from './DialogFooter.types'; export const DialogFooter: React.FunctionComponent = styled< IDialogFooterProps, diff --git a/packages/react/src/components/Dialog/DialogFooter.types.ts b/packages/react/src/components/Dialog/DialogFooter.types.ts index 1d841922eff9e6..ec10cd2465000b 100644 --- a/packages/react/src/components/Dialog/DialogFooter.types.ts +++ b/packages/react/src/components/Dialog/DialogFooter.types.ts @@ -1,7 +1,7 @@ import * as React from 'react'; import { DialogFooterBase } from './DialogFooter.base'; -import { IStyle, ITheme } from '../../Styling'; -import { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; +import type { IStyle, ITheme } from '../../Styling'; +import type { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; /** * {@docCategory Dialog} diff --git a/packages/react/src/components/Divider/VerticalDivider.base.tsx b/packages/react/src/components/Divider/VerticalDivider.base.tsx index c0aeab16594d57..0bfb0e552409a3 100644 --- a/packages/react/src/components/Divider/VerticalDivider.base.tsx +++ b/packages/react/src/components/Divider/VerticalDivider.base.tsx @@ -1,6 +1,11 @@ import * as React from 'react'; -import { IVerticalDividerProps, IVerticalDividerPropsStyles, IVerticalDividerStyles } from './VerticalDivider.types'; import { classNamesFunction } from '../../Utilities'; +import type { + IVerticalDividerProps, + IVerticalDividerPropsStyles, + IVerticalDividerStyles, +} from './VerticalDivider.types'; + const getClassNames = classNamesFunction(); export const VerticalDividerBase: React.FunctionComponent = React.forwardRef< diff --git a/packages/react/src/components/Divider/VerticalDivider.classNames.ts b/packages/react/src/components/Divider/VerticalDivider.classNames.ts index 2cf39eb55f3244..03e0b7eb32193d 100644 --- a/packages/react/src/components/Divider/VerticalDivider.classNames.ts +++ b/packages/react/src/components/Divider/VerticalDivider.classNames.ts @@ -1,6 +1,7 @@ import { memoizeFunction } from '../../Utilities'; -import { mergeStyleSets, ITheme } from '../../Styling'; -import { IVerticalDividerClassNames } from './VerticalDivider.types'; +import { mergeStyleSets } from '../../Styling'; +import type { ITheme } from '../../Styling'; +import type { IVerticalDividerClassNames } from './VerticalDivider.types'; /** * @deprecated use getStyles exported from VerticalDivider.styles.ts diff --git a/packages/react/src/components/Divider/VerticalDivider.styles.ts b/packages/react/src/components/Divider/VerticalDivider.styles.ts index e6a7e7d5f1322b..166a0fa3a97cd8 100644 --- a/packages/react/src/components/Divider/VerticalDivider.styles.ts +++ b/packages/react/src/components/Divider/VerticalDivider.styles.ts @@ -1,5 +1,5 @@ -import { IVerticalDividerPropsStyles, IVerticalDividerStyles } from './VerticalDivider.types'; -import { IStyleFunction } from '../../Utilities'; +import type { IVerticalDividerPropsStyles, IVerticalDividerStyles } from './VerticalDivider.types'; +import type { IStyleFunction } from '../../Utilities'; export const getStyles: IStyleFunction = ( props: IVerticalDividerPropsStyles, diff --git a/packages/react/src/components/Divider/VerticalDivider.tsx b/packages/react/src/components/Divider/VerticalDivider.tsx index e08a7565c3cbf2..01e220b20d234d 100644 --- a/packages/react/src/components/Divider/VerticalDivider.tsx +++ b/packages/react/src/components/Divider/VerticalDivider.tsx @@ -1,8 +1,12 @@ import * as React from 'react'; -import { IVerticalDividerProps, IVerticalDividerStyles, IVerticalDividerPropsStyles } from './VerticalDivider.types'; import { getStyles } from './VerticalDivider.styles'; import { VerticalDividerBase } from './VerticalDivider.base'; import { styled } from '../../Utilities'; +import type { + IVerticalDividerProps, + IVerticalDividerStyles, + IVerticalDividerPropsStyles, +} from './VerticalDivider.types'; export const VerticalDivider: React.FunctionComponent = styled< IVerticalDividerProps, diff --git a/packages/react/src/components/Divider/VerticalDivider.types.ts b/packages/react/src/components/Divider/VerticalDivider.types.ts index b8102f6c0ee14c..44ea500f5c450b 100644 --- a/packages/react/src/components/Divider/VerticalDivider.types.ts +++ b/packages/react/src/components/Divider/VerticalDivider.types.ts @@ -1,6 +1,6 @@ import * as React from 'react'; -import { ITheme, IStyle } from '../../Styling'; -import { IStyleFunctionOrObject } from '../../Utilities'; +import type { ITheme, IStyle } from '../../Styling'; +import type { IStyleFunctionOrObject } from '../../Utilities'; /** * {@docCategory VerticalDivider} diff --git a/packages/react/src/components/DocumentCard/DocumentCard.base.tsx b/packages/react/src/components/DocumentCard/DocumentCard.base.tsx index 8969d03c5f0987..051a983faa7bc5 100644 --- a/packages/react/src/components/DocumentCard/DocumentCard.base.tsx +++ b/packages/react/src/components/DocumentCard/DocumentCard.base.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { IProcessedStyleSet } from '../../Styling'; import { classNamesFunction, KeyCodes, @@ -8,8 +7,9 @@ import { warnDeprecations, initializeComponentRef, } from '../../Utilities'; -import { - DocumentCardType, +import { DocumentCardType } from './DocumentCard.types'; +import type { IProcessedStyleSet } from '../../Styling'; +import type { IDocumentCard, IDocumentCardProps, IDocumentCardStyleProps, diff --git a/packages/react/src/components/DocumentCard/DocumentCard.styles.ts b/packages/react/src/components/DocumentCard/DocumentCard.styles.ts index d856e9e3bbbc1b..6bf6a3f313fcad 100644 --- a/packages/react/src/components/DocumentCard/DocumentCard.styles.ts +++ b/packages/react/src/components/DocumentCard/DocumentCard.styles.ts @@ -1,10 +1,10 @@ import { getGlobalClassNames, getInputFocusStyle } from '../../Styling'; import { IsFocusVisibleClassName } from '../../Utilities'; -import { IDocumentCardStyleProps, IDocumentCardStyles } from './DocumentCard.types'; import { DocumentCardPreviewGlobalClassNames as previewClassNames } from './DocumentCardPreview.styles'; import { DocumentCardActivityGlobalClassNames as activityClassNames } from './DocumentCardActivity.styles'; import { DocumentCardTitleGlobalClassNames as titleClassNames } from './DocumentCardTitle.styles'; import { DocumentCardLocationGlobalClassNames as locationClassNames } from './DocumentCardLocation.styles'; +import type { IDocumentCardStyleProps, IDocumentCardStyles } from './DocumentCard.types'; const GlobalClassNames = { root: 'ms-DocumentCard', diff --git a/packages/react/src/components/DocumentCard/DocumentCard.ts b/packages/react/src/components/DocumentCard/DocumentCard.ts index 3ac38037d263e4..8d1177f249b4af 100644 --- a/packages/react/src/components/DocumentCard/DocumentCard.ts +++ b/packages/react/src/components/DocumentCard/DocumentCard.ts @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled } from '../../Utilities'; import { DocumentCardBase } from './DocumentCard.base'; import { getStyles } from './DocumentCard.styles'; -import { IDocumentCardProps, IDocumentCardStyleProps, IDocumentCardStyles } from './DocumentCard.types'; +import type { IDocumentCardProps, IDocumentCardStyleProps, IDocumentCardStyles } from './DocumentCard.types'; export const DocumentCard: React.FunctionComponent = styled< IDocumentCardProps, diff --git a/packages/react/src/components/DocumentCard/DocumentCard.types.ts b/packages/react/src/components/DocumentCard/DocumentCard.types.ts index 33561dfa22f2e0..84e4135d73f2b8 100644 --- a/packages/react/src/components/DocumentCard/DocumentCard.types.ts +++ b/packages/react/src/components/DocumentCard/DocumentCard.types.ts @@ -1,6 +1,6 @@ import * as React from 'react'; -import { IStyle, ITheme } from '../../Styling'; -import { IBaseProps, IRefObject, IStyleFunctionOrObject } from '../../Utilities'; +import type { IStyle, ITheme } from '../../Styling'; +import type { IBaseProps, IRefObject, IStyleFunctionOrObject } from '../../Utilities'; /** * {@docCategory DocumentCard} diff --git a/packages/react/src/components/DocumentCard/DocumentCardActions.base.tsx b/packages/react/src/components/DocumentCard/DocumentCardActions.base.tsx index d666b51abc8597..5d96580f087626 100644 --- a/packages/react/src/components/DocumentCard/DocumentCardActions.base.tsx +++ b/packages/react/src/components/DocumentCard/DocumentCardActions.base.tsx @@ -1,13 +1,13 @@ import * as React from 'react'; import { classNamesFunction, initializeComponentRef } from '../../Utilities'; import { Icon } from '../../Icon'; -import { +import { IconButton } from '../../Button'; +import type { IDocumentCardActionsProps, IDocumentCardActionsStyleProps, IDocumentCardActionsStyles, } from './DocumentCardActions.types'; -import { IconButton } from '../../Button'; -import { IProcessedStyleSet } from '../../Styling'; +import type { IProcessedStyleSet } from '../../Styling'; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/components/DocumentCard/DocumentCardActions.styles.ts b/packages/react/src/components/DocumentCard/DocumentCardActions.styles.ts index 181c010d44d3c1..4c756c2175e0bc 100644 --- a/packages/react/src/components/DocumentCard/DocumentCardActions.styles.ts +++ b/packages/react/src/components/DocumentCard/DocumentCardActions.styles.ts @@ -1,5 +1,5 @@ import { getGlobalClassNames } from '../../Styling'; -import { IDocumentCardActionsStyleProps, IDocumentCardActionsStyles } from './DocumentCardActions.types'; +import type { IDocumentCardActionsStyleProps, IDocumentCardActionsStyles } from './DocumentCardActions.types'; const ACTION_SIZE = 34; const HORIZONTAL_PADDING = 12; diff --git a/packages/react/src/components/DocumentCard/DocumentCardActions.ts b/packages/react/src/components/DocumentCard/DocumentCardActions.ts index 05c43da4163265..87af54033190d0 100644 --- a/packages/react/src/components/DocumentCard/DocumentCardActions.ts +++ b/packages/react/src/components/DocumentCard/DocumentCardActions.ts @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled } from '../../Utilities'; import { DocumentCardActionsBase } from './DocumentCardActions.base'; import { getStyles } from './DocumentCardActions.styles'; -import { +import type { IDocumentCardActionsProps, IDocumentCardActionsStyleProps, IDocumentCardActionsStyles, diff --git a/packages/react/src/components/DocumentCard/DocumentCardActions.types.ts b/packages/react/src/components/DocumentCard/DocumentCardActions.types.ts index 572bbd6c477625..ce14a8abb53550 100644 --- a/packages/react/src/components/DocumentCard/DocumentCardActions.types.ts +++ b/packages/react/src/components/DocumentCard/DocumentCardActions.types.ts @@ -1,8 +1,8 @@ import * as React from 'react'; -import { IButtonProps } from '../../Button'; -import { IStyle, ITheme } from '../../Styling'; -import { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; import { DocumentCardActionsBase } from './DocumentCardActions.base'; +import type { IButtonProps } from '../../Button'; +import type { IStyle, ITheme } from '../../Styling'; +import type { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; /** * {@docCategory DocumentCard} diff --git a/packages/react/src/components/DocumentCard/DocumentCardActivity.base.tsx b/packages/react/src/components/DocumentCard/DocumentCardActivity.base.tsx index 7a2d004a2e2750..f8ffe0fb64813d 100644 --- a/packages/react/src/components/DocumentCard/DocumentCardActivity.base.tsx +++ b/packages/react/src/components/DocumentCard/DocumentCardActivity.base.tsx @@ -1,14 +1,14 @@ import * as React from 'react'; import { classNamesFunction, initializeComponentRef } from '../../Utilities'; -import { +import { PersonaSize } from '../../Persona'; +import { PersonaCoin } from '../../PersonaCoin'; +import type { IDocumentCardActivityProps, IDocumentCardActivityPerson, IDocumentCardActivityStyleProps, IDocumentCardActivityStyles, } from './DocumentCardActivity.types'; -import { IProcessedStyleSet } from '../../Styling'; -import { PersonaSize } from '../../Persona'; -import { PersonaCoin } from '../../PersonaCoin'; +import type { IProcessedStyleSet } from '../../Styling'; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/components/DocumentCard/DocumentCardActivity.styles.ts b/packages/react/src/components/DocumentCard/DocumentCardActivity.styles.ts index 091edfbdfe325c..1408a2944cf97b 100644 --- a/packages/react/src/components/DocumentCard/DocumentCardActivity.styles.ts +++ b/packages/react/src/components/DocumentCard/DocumentCardActivity.styles.ts @@ -1,5 +1,5 @@ import { getGlobalClassNames, FontWeights } from '../../Styling'; -import { IDocumentCardActivityStyleProps, IDocumentCardActivityStyles } from './DocumentCardActivity.types'; +import type { IDocumentCardActivityStyleProps, IDocumentCardActivityStyles } from './DocumentCardActivity.types'; const VERTICAL_PADDING = 8; const HORIZONTAL_PADDING = 16; diff --git a/packages/react/src/components/DocumentCard/DocumentCardActivity.ts b/packages/react/src/components/DocumentCard/DocumentCardActivity.ts index 2937fb5f1baddf..47fe3a56f2ba6d 100644 --- a/packages/react/src/components/DocumentCard/DocumentCardActivity.ts +++ b/packages/react/src/components/DocumentCard/DocumentCardActivity.ts @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled } from '../../Utilities'; import { DocumentCardActivityBase } from './DocumentCardActivity.base'; import { getStyles } from './DocumentCardActivity.styles'; -import { +import type { IDocumentCardActivityProps, IDocumentCardActivityStyleProps, IDocumentCardActivityStyles, diff --git a/packages/react/src/components/DocumentCard/DocumentCardActivity.types.ts b/packages/react/src/components/DocumentCard/DocumentCardActivity.types.ts index 63e62364d07d44..5ce69e6b58fb73 100644 --- a/packages/react/src/components/DocumentCard/DocumentCardActivity.types.ts +++ b/packages/react/src/components/DocumentCard/DocumentCardActivity.types.ts @@ -1,8 +1,8 @@ import * as React from 'react'; import { PersonaInitialsColor } from '../../Persona'; -import { IStyle, ITheme } from '../../Styling'; -import { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; import { DocumentCardActivityBase } from './DocumentCardActivity.base'; +import type { IStyle, ITheme } from '../../Styling'; +import type { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; /** * {@docCategory DocumentCard} diff --git a/packages/react/src/components/DocumentCard/DocumentCardDetails.base.tsx b/packages/react/src/components/DocumentCard/DocumentCardDetails.base.tsx index 20ff2705719d99..acf7ebaa657d3c 100644 --- a/packages/react/src/components/DocumentCard/DocumentCardDetails.base.tsx +++ b/packages/react/src/components/DocumentCard/DocumentCardDetails.base.tsx @@ -1,11 +1,11 @@ import * as React from 'react'; import { classNamesFunction, initializeComponentRef } from '../../Utilities'; -import { +import type { IDocumentCardDetailsProps, IDocumentCardDetailsStyleProps, IDocumentCardDetailsStyles, } from './DocumentCardDetails.types'; -import { IProcessedStyleSet } from '../../Styling'; +import type { IProcessedStyleSet } from '../../Styling'; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/components/DocumentCard/DocumentCardDetails.styles.ts b/packages/react/src/components/DocumentCard/DocumentCardDetails.styles.ts index 9197a105fc35ba..2d40317aa1b986 100644 --- a/packages/react/src/components/DocumentCard/DocumentCardDetails.styles.ts +++ b/packages/react/src/components/DocumentCard/DocumentCardDetails.styles.ts @@ -1,5 +1,5 @@ import { getGlobalClassNames } from '../../Styling'; -import { IDocumentCardStatusStyleProps, IDocumentCardStatusStyles } from './DocumentCardStatus.types'; +import type { IDocumentCardStatusStyleProps, IDocumentCardStatusStyles } from './DocumentCardStatus.types'; const GlobalClassNames = { root: 'ms-DocumentCardDetails', diff --git a/packages/react/src/components/DocumentCard/DocumentCardDetails.ts b/packages/react/src/components/DocumentCard/DocumentCardDetails.ts index c1db48b5af987b..9ca4fa9b93626c 100644 --- a/packages/react/src/components/DocumentCard/DocumentCardDetails.ts +++ b/packages/react/src/components/DocumentCard/DocumentCardDetails.ts @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled } from '../../Utilities'; import { DocumentCardDetailsBase } from './DocumentCardDetails.base'; import { getStyles } from './DocumentCardDetails.styles'; -import { +import type { IDocumentCardDetailsProps, IDocumentCardDetailsStyleProps, IDocumentCardDetailsStyles, diff --git a/packages/react/src/components/DocumentCard/DocumentCardDetails.types.ts b/packages/react/src/components/DocumentCard/DocumentCardDetails.types.ts index 50904ec28cda82..4a2ed8618e686d 100644 --- a/packages/react/src/components/DocumentCard/DocumentCardDetails.types.ts +++ b/packages/react/src/components/DocumentCard/DocumentCardDetails.types.ts @@ -1,7 +1,7 @@ import * as React from 'react'; -import { IStyle, ITheme } from '../../Styling'; -import { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; import { DocumentCardDetailsBase } from './DocumentCardDetails.base'; +import type { IStyle, ITheme } from '../../Styling'; +import type { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; /** * {@docCategory DocumentCard} diff --git a/packages/react/src/components/DocumentCard/DocumentCardImage.base.tsx b/packages/react/src/components/DocumentCard/DocumentCardImage.base.tsx index 01fe4d78c8d9d0..6763d6899b8893 100644 --- a/packages/react/src/components/DocumentCard/DocumentCardImage.base.tsx +++ b/packages/react/src/components/DocumentCard/DocumentCardImage.base.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; import { Icon } from '../../Icon'; import { Image } from '../../Image'; -import { IProcessedStyleSet } from '../../Styling'; import { classNamesFunction, initializeComponentRef } from '../../Utilities'; -import { +import type { IProcessedStyleSet } from '../../Styling'; +import type { IDocumentCardImageProps, IDocumentCardImageStyleProps, IDocumentCardImageStyles, diff --git a/packages/react/src/components/DocumentCard/DocumentCardImage.styles.ts b/packages/react/src/components/DocumentCard/DocumentCardImage.styles.ts index ad61c7f6b3fb91..c92f30472519ce 100644 --- a/packages/react/src/components/DocumentCard/DocumentCardImage.styles.ts +++ b/packages/react/src/components/DocumentCard/DocumentCardImage.styles.ts @@ -1,4 +1,4 @@ -import { IDocumentCardImageStyleProps, IDocumentCardImageStyles } from './DocumentCardImage.types'; +import type { IDocumentCardImageStyleProps, IDocumentCardImageStyles } from './DocumentCardImage.types'; const centeredIconSize = '42px'; const cornerIconSize = '32px'; diff --git a/packages/react/src/components/DocumentCard/DocumentCardImage.ts b/packages/react/src/components/DocumentCard/DocumentCardImage.ts index 27dbbed203c389..be4a870668d7f6 100644 --- a/packages/react/src/components/DocumentCard/DocumentCardImage.ts +++ b/packages/react/src/components/DocumentCard/DocumentCardImage.ts @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled } from '../../Utilities'; import { DocumentCardImageBase } from './DocumentCardImage.base'; import { getStyles } from './DocumentCardImage.styles'; -import { +import type { IDocumentCardImageProps, IDocumentCardImageStyleProps, IDocumentCardImageStyles, diff --git a/packages/react/src/components/DocumentCard/DocumentCardImage.types.ts b/packages/react/src/components/DocumentCard/DocumentCardImage.types.ts index 4793d3d5cd6d6a..7f4fbef02c61e5 100644 --- a/packages/react/src/components/DocumentCard/DocumentCardImage.types.ts +++ b/packages/react/src/components/DocumentCard/DocumentCardImage.types.ts @@ -1,7 +1,7 @@ -import { IIconProps } from '../../Icon'; import { ImageFit } from '../../Image'; -import { IStyle, ITheme } from '../../Styling'; -import { IBaseProps, IRefObject, IStyleFunctionOrObject } from '../../Utilities'; +import type { IIconProps } from '../../Icon'; +import type { IStyle, ITheme } from '../../Styling'; +import type { IBaseProps, IRefObject, IStyleFunctionOrObject } from '../../Utilities'; /** * {@docCategory DocumentCard} diff --git a/packages/react/src/components/DocumentCard/DocumentCardLocation.base.tsx b/packages/react/src/components/DocumentCard/DocumentCardLocation.base.tsx index 84b392f9769ff0..584cdefe4224c4 100644 --- a/packages/react/src/components/DocumentCard/DocumentCardLocation.base.tsx +++ b/packages/react/src/components/DocumentCard/DocumentCardLocation.base.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import { IProcessedStyleSet } from '../../Styling'; import { classNamesFunction, initializeComponentRef } from '../../Utilities'; -import { +import type { IProcessedStyleSet } from '../../Styling'; +import type { IDocumentCardLocationProps, IDocumentCardLocationStyleProps, IDocumentCardLocationStyles, diff --git a/packages/react/src/components/DocumentCard/DocumentCardLocation.styles.ts b/packages/react/src/components/DocumentCard/DocumentCardLocation.styles.ts index e9c8d8897cd3d0..745bdfdc5ae01f 100644 --- a/packages/react/src/components/DocumentCard/DocumentCardLocation.styles.ts +++ b/packages/react/src/components/DocumentCard/DocumentCardLocation.styles.ts @@ -1,5 +1,5 @@ import { getGlobalClassNames, FontWeights } from '../../Styling'; -import { IDocumentCardLocationStyleProps, IDocumentCardLocationStyles } from './DocumentCardLocation.types'; +import type { IDocumentCardLocationStyleProps, IDocumentCardLocationStyles } from './DocumentCardLocation.types'; export const DocumentCardLocationGlobalClassNames = { root: 'ms-DocumentCardLocation', diff --git a/packages/react/src/components/DocumentCard/DocumentCardLocation.ts b/packages/react/src/components/DocumentCard/DocumentCardLocation.ts index d63a5b65370b93..36252010eaf34c 100644 --- a/packages/react/src/components/DocumentCard/DocumentCardLocation.ts +++ b/packages/react/src/components/DocumentCard/DocumentCardLocation.ts @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled } from '../../Utilities'; import { DocumentCardLocationBase } from './DocumentCardLocation.base'; import { getStyles } from './DocumentCardLocation.styles'; -import { +import type { IDocumentCardLocationProps, IDocumentCardLocationStyleProps, IDocumentCardLocationStyles, diff --git a/packages/react/src/components/DocumentCard/DocumentCardLocation.types.ts b/packages/react/src/components/DocumentCard/DocumentCardLocation.types.ts index d8c1ba6e4ed824..a8b50c8be36314 100644 --- a/packages/react/src/components/DocumentCard/DocumentCardLocation.types.ts +++ b/packages/react/src/components/DocumentCard/DocumentCardLocation.types.ts @@ -1,7 +1,7 @@ import * as React from 'react'; -import { IStyle, ITheme } from '../../Styling'; -import { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; import { DocumentCardLocationBase } from './DocumentCardLocation.base'; +import type { IStyle, ITheme } from '../../Styling'; +import type { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; /** * {@docCategory DocumentCard} diff --git a/packages/react/src/components/DocumentCard/DocumentCardLogo.base.tsx b/packages/react/src/components/DocumentCard/DocumentCardLogo.base.tsx index f690c2b7762d94..b6db49436b3e34 100644 --- a/packages/react/src/components/DocumentCard/DocumentCardLogo.base.tsx +++ b/packages/react/src/components/DocumentCard/DocumentCardLogo.base.tsx @@ -1,8 +1,12 @@ import * as React from 'react'; import { Icon } from '../../Icon'; -import { IProcessedStyleSet } from '../../Styling'; import { classNamesFunction, initializeComponentRef } from '../../Utilities'; -import { IDocumentCardLogoProps, IDocumentCardLogoStyleProps, IDocumentCardLogoStyles } from './DocumentCardLogo.types'; +import type { IProcessedStyleSet } from '../../Styling'; +import type { + IDocumentCardLogoProps, + IDocumentCardLogoStyleProps, + IDocumentCardLogoStyles, +} from './DocumentCardLogo.types'; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/components/DocumentCard/DocumentCardLogo.styles.ts b/packages/react/src/components/DocumentCard/DocumentCardLogo.styles.ts index 5b62b3c6c0421b..68e00221a5f5e4 100644 --- a/packages/react/src/components/DocumentCard/DocumentCardLogo.styles.ts +++ b/packages/react/src/components/DocumentCard/DocumentCardLogo.styles.ts @@ -1,5 +1,5 @@ import { getGlobalClassNames } from '../../Styling'; -import { IDocumentCardLogoStyleProps, IDocumentCardLogoStyles } from './DocumentCardLogo.types'; +import type { IDocumentCardLogoStyleProps, IDocumentCardLogoStyles } from './DocumentCardLogo.types'; const GlobalClassNames = { root: 'ms-DocumentCardLogo', diff --git a/packages/react/src/components/DocumentCard/DocumentCardLogo.ts b/packages/react/src/components/DocumentCard/DocumentCardLogo.ts index afe3c77a52c154..be1b9b092d9bc0 100644 --- a/packages/react/src/components/DocumentCard/DocumentCardLogo.ts +++ b/packages/react/src/components/DocumentCard/DocumentCardLogo.ts @@ -2,7 +2,11 @@ import * as React from 'react'; import { styled } from '../../Utilities'; import { DocumentCardLogoBase } from './DocumentCardLogo.base'; import { getStyles } from './DocumentCardLogo.styles'; -import { IDocumentCardLogoProps, IDocumentCardLogoStyleProps, IDocumentCardLogoStyles } from './DocumentCardLogo.types'; +import type { + IDocumentCardLogoProps, + IDocumentCardLogoStyleProps, + IDocumentCardLogoStyles, +} from './DocumentCardLogo.types'; export const DocumentCardLogo: React.FunctionComponent = styled< IDocumentCardLogoProps, diff --git a/packages/react/src/components/DocumentCard/DocumentCardLogo.types.ts b/packages/react/src/components/DocumentCard/DocumentCardLogo.types.ts index c5d2c8ba0da1b4..1591103d47b7a7 100644 --- a/packages/react/src/components/DocumentCard/DocumentCardLogo.types.ts +++ b/packages/react/src/components/DocumentCard/DocumentCardLogo.types.ts @@ -1,7 +1,7 @@ import * as React from 'react'; -import { IStyle, ITheme } from '../../Styling'; -import { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; import { DocumentCardLogoBase } from './DocumentCardLogo.base'; +import type { IStyle, ITheme } from '../../Styling'; +import type { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; /** * {@docCategory DocumentCard} diff --git a/packages/react/src/components/DocumentCard/DocumentCardPreview.base.tsx b/packages/react/src/components/DocumentCard/DocumentCardPreview.base.tsx index b62787b900410c..fff66906708464 100644 --- a/packages/react/src/components/DocumentCard/DocumentCardPreview.base.tsx +++ b/packages/react/src/components/DocumentCard/DocumentCardPreview.base.tsx @@ -2,9 +2,9 @@ import * as React from 'react'; import { Icon } from '../../Icon'; import { Image } from '../../Image'; import { Link } from '../../Link'; -import { IProcessedStyleSet } from '../../Styling'; import { classNamesFunction, css, initializeComponentRef } from '../../Utilities'; -import { +import type { IProcessedStyleSet } from '../../Styling'; +import type { IDocumentCardPreviewImage, IDocumentCardPreviewProps, IDocumentCardPreviewStyleProps, diff --git a/packages/react/src/components/DocumentCard/DocumentCardPreview.styles.ts b/packages/react/src/components/DocumentCard/DocumentCardPreview.styles.ts index c81824d7d8b719..ee14e5b9f0537a 100644 --- a/packages/react/src/components/DocumentCard/DocumentCardPreview.styles.ts +++ b/packages/react/src/components/DocumentCard/DocumentCardPreview.styles.ts @@ -1,6 +1,6 @@ import { getFocusStyle, getGlobalClassNames, HighContrastSelector } from '../../Styling'; import { IsFocusVisibleClassName } from '../../Utilities'; -import { IDocumentCardPreviewStyleProps, IDocumentCardPreviewStyles } from './DocumentCardPreview.types'; +import type { IDocumentCardPreviewStyleProps, IDocumentCardPreviewStyles } from './DocumentCardPreview.types'; export const DocumentCardPreviewGlobalClassNames = { root: 'ms-DocumentCardPreview', diff --git a/packages/react/src/components/DocumentCard/DocumentCardPreview.ts b/packages/react/src/components/DocumentCard/DocumentCardPreview.ts index 0154328503c348..337291d78fed04 100644 --- a/packages/react/src/components/DocumentCard/DocumentCardPreview.ts +++ b/packages/react/src/components/DocumentCard/DocumentCardPreview.ts @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled } from '../../Utilities'; import { DocumentCardPreviewBase } from './DocumentCardPreview.base'; import { getStyles } from './DocumentCardPreview.styles'; -import { +import type { IDocumentCardPreviewProps, IDocumentCardPreviewStyleProps, IDocumentCardPreviewStyles, diff --git a/packages/react/src/components/DocumentCard/DocumentCardPreview.types.ts b/packages/react/src/components/DocumentCard/DocumentCardPreview.types.ts index 6c2d2c3b2eafc2..e1e7ec3920cce1 100644 --- a/packages/react/src/components/DocumentCard/DocumentCardPreview.types.ts +++ b/packages/react/src/components/DocumentCard/DocumentCardPreview.types.ts @@ -1,8 +1,8 @@ -import { IIconProps } from '../../Icon'; import { ImageFit } from '../../Image'; -import { ILinkProps } from '../../Link'; -import { IStyle, ITheme } from '../../Styling'; -import { IBaseProps, IRefObject, IStyleFunctionOrObject } from '../../Utilities'; +import type { IIconProps } from '../../Icon'; +import type { ILinkProps } from '../../Link'; +import type { IStyle, ITheme } from '../../Styling'; +import type { IBaseProps, IRefObject, IStyleFunctionOrObject } from '../../Utilities'; /** * {@docCategory DocumentCard} diff --git a/packages/react/src/components/DocumentCard/DocumentCardStatus.base.tsx b/packages/react/src/components/DocumentCard/DocumentCardStatus.base.tsx index 468f8a20e0aaa7..fa1b00ff486db6 100644 --- a/packages/react/src/components/DocumentCard/DocumentCardStatus.base.tsx +++ b/packages/react/src/components/DocumentCard/DocumentCardStatus.base.tsx @@ -1,13 +1,13 @@ import * as React from 'react'; import { classNamesFunction, initializeComponentRef } from '../../Utilities'; -import { +import { Icon } from '../../Icon'; +import type { IDocumentCardStatusProps, IDocumentCardStatusStyleProps, IDocumentCardStatusStyles, } from './DocumentCardStatus.types'; -import { Icon } from '../../Icon'; -import { IProcessedStyleSet } from '../../Styling'; +import type { IProcessedStyleSet } from '../../Styling'; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/components/DocumentCard/DocumentCardStatus.styles.ts b/packages/react/src/components/DocumentCard/DocumentCardStatus.styles.ts index 7329da91aa0b3a..c0b99d7c250bf1 100644 --- a/packages/react/src/components/DocumentCard/DocumentCardStatus.styles.ts +++ b/packages/react/src/components/DocumentCard/DocumentCardStatus.styles.ts @@ -1,5 +1,5 @@ import { getGlobalClassNames } from '../../Styling'; -import { IDocumentCardStatusStyleProps, IDocumentCardStatusStyles } from './DocumentCardStatus.types'; +import type { IDocumentCardStatusStyleProps, IDocumentCardStatusStyles } from './DocumentCardStatus.types'; const GlobalClassNames = { root: 'ms-DocumentCardStatus', diff --git a/packages/react/src/components/DocumentCard/DocumentCardStatus.ts b/packages/react/src/components/DocumentCard/DocumentCardStatus.ts index ed4cba0e1ca64a..ada225695a63d5 100644 --- a/packages/react/src/components/DocumentCard/DocumentCardStatus.ts +++ b/packages/react/src/components/DocumentCard/DocumentCardStatus.ts @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled } from '../../Utilities'; import { DocumentCardStatusBase } from './DocumentCardStatus.base'; import { getStyles } from './DocumentCardStatus.styles'; -import { +import type { IDocumentCardStatusProps, IDocumentCardStatusStyleProps, IDocumentCardStatusStyles, diff --git a/packages/react/src/components/DocumentCard/DocumentCardStatus.types.ts b/packages/react/src/components/DocumentCard/DocumentCardStatus.types.ts index f5b7de8e735b04..9aa8d2263b926c 100644 --- a/packages/react/src/components/DocumentCard/DocumentCardStatus.types.ts +++ b/packages/react/src/components/DocumentCard/DocumentCardStatus.types.ts @@ -1,7 +1,7 @@ import * as React from 'react'; -import { IStyle, ITheme } from '../../Styling'; -import { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; import { DocumentCardStatusBase } from './DocumentCardStatus.base'; +import type { IStyle, ITheme } from '../../Styling'; +import type { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; /** * {@docCategory DocumentCard} diff --git a/packages/react/src/components/DocumentCard/DocumentCardTitle.base.tsx b/packages/react/src/components/DocumentCard/DocumentCardTitle.base.tsx index 1a4dcd96ceeabc..b0671762d16c75 100644 --- a/packages/react/src/components/DocumentCard/DocumentCardTitle.base.tsx +++ b/packages/react/src/components/DocumentCard/DocumentCardTitle.base.tsx @@ -1,13 +1,13 @@ import * as React from 'react'; import { Async, EventGroup, classNamesFunction } from '../../Utilities'; -import { +import { initializeComponentRef } from '@fluentui/utilities'; +import type { IDocumentCardTitleProps, IDocumentCardTitleStyleProps, IDocumentCardTitleStyles, } from './DocumentCardTitle.types'; -import { IProcessedStyleSet } from '../../Styling'; -import { initializeComponentRef } from '@fluentui/utilities'; +import type { IProcessedStyleSet } from '../../Styling'; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/components/DocumentCard/DocumentCardTitle.styles.ts b/packages/react/src/components/DocumentCard/DocumentCardTitle.styles.ts index 2ff7422c84b382..5035cc98f79d58 100644 --- a/packages/react/src/components/DocumentCard/DocumentCardTitle.styles.ts +++ b/packages/react/src/components/DocumentCard/DocumentCardTitle.styles.ts @@ -1,5 +1,5 @@ import { getGlobalClassNames } from '../../Styling'; -import { IDocumentCardTitleStyleProps, IDocumentCardTitleStyles } from './DocumentCardTitle.types'; +import type { IDocumentCardTitleStyleProps, IDocumentCardTitleStyles } from './DocumentCardTitle.types'; export const DocumentCardTitleGlobalClassNames = { root: 'ms-DocumentCardTitle', diff --git a/packages/react/src/components/DocumentCard/DocumentCardTitle.ts b/packages/react/src/components/DocumentCard/DocumentCardTitle.ts index b2b23818ed9b38..8ca49cec2475d3 100644 --- a/packages/react/src/components/DocumentCard/DocumentCardTitle.ts +++ b/packages/react/src/components/DocumentCard/DocumentCardTitle.ts @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled } from '../../Utilities'; import { DocumentCardTitleBase } from './DocumentCardTitle.base'; import { getStyles } from './DocumentCardTitle.styles'; -import { +import type { IDocumentCardTitleProps, IDocumentCardTitleStyleProps, IDocumentCardTitleStyles, diff --git a/packages/react/src/components/DocumentCard/DocumentCardTitle.types.ts b/packages/react/src/components/DocumentCard/DocumentCardTitle.types.ts index a2567a9dc376ed..dfd5f03a6e6c6d 100644 --- a/packages/react/src/components/DocumentCard/DocumentCardTitle.types.ts +++ b/packages/react/src/components/DocumentCard/DocumentCardTitle.types.ts @@ -1,7 +1,7 @@ import * as React from 'react'; -import { IStyle, ITheme } from '../../Styling'; -import { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; import { DocumentCardTitleBase } from './DocumentCardTitle.base'; +import type { IStyle, ITheme } from '../../Styling'; +import type { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; /** * {@docCategory DocumentCard} diff --git a/packages/react/src/components/Dropdown/Dropdown.base.tsx b/packages/react/src/components/Dropdown/Dropdown.base.tsx index 791bd2eb504584..5a98a2dbba3f4c 100644 --- a/packages/react/src/components/Dropdown/Dropdown.base.tsx +++ b/packages/react/src/components/Dropdown/Dropdown.base.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; import { - IStyleFunctionOrObject, KeyCodes, classNamesFunction, divProperties, @@ -21,31 +20,34 @@ import { } from '../../Utilities'; import { Callout, DirectionalHint } from '../../Callout'; import { CommandButton } from '../../Button'; -import { - DropdownMenuItemType, - IDropdownOption, - IDropdownProps, - IDropdownStyleProps, - IDropdownStyles, - IDropdown, -} from './Dropdown.types'; +import { DropdownMenuItemType } from './Dropdown.types'; import { DropdownSizePosCache } from './utilities/DropdownSizePosCache'; import { FocusZone, FocusZoneDirection } from '../../FocusZone'; -import { ICalloutPositionedInfo, RectangleEdge } from '../../Positioning'; +import { RectangleEdge } from '../../Positioning'; import { Icon } from '../../Icon'; -import { ILabelStyleProps, ILabelStyles, Label } from '../../Label'; -import { IProcessedStyleSet } from '../../Styling'; -import { Panel, IPanelStyleProps, IPanelStyles } from '../../Panel'; -import { ResponsiveMode, IWithResponsiveModeState, useResponsiveMode } from '../../ResponsiveMode'; -import { - SelectableOptionMenuItemType, - getAllSelectedOptions, - ISelectableDroppableTextProps, -} from '../../SelectableOption'; +import { Label } from '../../Label'; +import { Panel } from '../../Panel'; +import { ResponsiveMode, useResponsiveMode } from '../../ResponsiveMode'; +import { SelectableOptionMenuItemType, getAllSelectedOptions } from '../../SelectableOption'; // import and use V7 Checkbox to ensure no breaking changes. -import { Checkbox, ICheckboxStyleProps, ICheckboxStyles } from '../../Checkbox'; +import { Checkbox } from '../../Checkbox'; import { getPropsWithDefaults } from '@fluentui/utilities'; import { useMergedRefs, usePrevious } from '@fluentui/react-hooks'; +import type { IStyleFunctionOrObject } from '../../Utilities'; +import type { + IDropdownOption, + IDropdownProps, + IDropdownStyleProps, + IDropdownStyles, + IDropdown, +} from './Dropdown.types'; +import type { ICalloutPositionedInfo } from '../../Positioning'; +import type { ILabelStyleProps, ILabelStyles } from '../../Label'; +import type { IProcessedStyleSet } from '../../Styling'; +import type { IPanelStyleProps, IPanelStyles } from '../../Panel'; +import type { IWithResponsiveModeState } from '../../ResponsiveMode'; +import type { ISelectableDroppableTextProps } from '../../SelectableOption'; +import type { ICheckboxStyleProps, ICheckboxStyles } from '../../Checkbox'; const COMPONENT_NAME = 'Dropdown'; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/components/Dropdown/Dropdown.styles.ts b/packages/react/src/components/Dropdown/Dropdown.styles.ts index 8d24bcaccf557e..648cdbcf21305c 100644 --- a/packages/react/src/components/Dropdown/Dropdown.styles.ts +++ b/packages/react/src/components/Dropdown/Dropdown.styles.ts @@ -1,11 +1,8 @@ -import { IDropdownStyles, IDropdownStyleProps } from './Dropdown.types'; -import { IStyleFunction, IsFocusVisibleClassName } from '../../Utilities'; +import { IsFocusVisibleClassName } from '../../Utilities'; import { RectangleEdge } from '../../Positioning'; import { FontWeights, HighContrastSelector, - IRawStyle, - IStyle, getGlobalClassNames, normalize, HighContrastSelectorWhite, @@ -13,6 +10,9 @@ import { ScreenWidthMinMedium, getHighContrastNoAdjustStyle, } from '../../Styling'; +import type { IDropdownStyles, IDropdownStyleProps } from './Dropdown.types'; +import type { IStyleFunction } from '../../Utilities'; +import type { IRawStyle, IStyle } from '../../Styling'; const GlobalClassNames = { root: 'ms-Dropdown-container', diff --git a/packages/react/src/components/Dropdown/Dropdown.test.tsx b/packages/react/src/components/Dropdown/Dropdown.test.tsx index 8b8256d1aea2d5..8f9ce4f6a64112 100644 --- a/packages/react/src/components/Dropdown/Dropdown.test.tsx +++ b/packages/react/src/components/Dropdown/Dropdown.test.tsx @@ -1,16 +1,17 @@ import * as React from 'react'; import * as ReactDOM from 'react-dom'; import * as ReactTestUtils from 'react-dom/test-utils'; -import { ReactTestRenderer } from 'react-test-renderer'; import { create } from '@fluentui/utilities/lib/test'; import { mount, ReactWrapper } from 'enzyme'; import * as renderer from 'react-test-renderer'; import { KeyCodes, resetIds } from '../../Utilities'; import { Dropdown } from './Dropdown'; -import { DropdownMenuItemType, IDropdownOption, IDropdown } from './Dropdown.types'; +import { DropdownMenuItemType } from './Dropdown.types'; import { isConformant } from '../../common/isConformant'; import { safeCreate } from '@fluentui/test-utilities'; +import type { ReactTestRenderer } from 'react-test-renderer'; +import type { IDropdownOption, IDropdown } from './Dropdown.types'; const DEFAULT_OPTIONS: IDropdownOption[] = [ { key: 'Header1', text: 'Header 1', itemType: DropdownMenuItemType.Header }, diff --git a/packages/react/src/components/Dropdown/Dropdown.tsx b/packages/react/src/components/Dropdown/Dropdown.tsx index ec066e3c20a566..2ecb9d80c17934 100644 --- a/packages/react/src/components/Dropdown/Dropdown.tsx +++ b/packages/react/src/components/Dropdown/Dropdown.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled } from '../../Utilities'; import { DropdownBase } from './Dropdown.base'; import { getStyles } from './Dropdown.styles'; -import { IDropdownProps, IDropdownStyleProps, IDropdownStyles } from './Dropdown.types'; +import type { IDropdownProps, IDropdownStyleProps, IDropdownStyles } from './Dropdown.types'; export const Dropdown: React.FunctionComponent = styled< IDropdownProps, diff --git a/packages/react/src/components/Dropdown/Dropdown.types.ts b/packages/react/src/components/Dropdown/Dropdown.types.ts index d505aff755e3d3..93d945b76e2c3d 100644 --- a/packages/react/src/components/Dropdown/Dropdown.types.ts +++ b/packages/react/src/components/Dropdown/Dropdown.types.ts @@ -1,12 +1,12 @@ import * as React from 'react'; -import { IRenderFunction, IStyleFunctionOrObject } from '../../Utilities'; -import { IStyle, ITheme } from '../../Styling'; -import { ISelectableOption, ISelectableDroppableTextProps } from '../../SelectableOption'; import { ResponsiveMode } from '../../ResponsiveMode'; import { RectangleEdge } from '../../Positioning'; -import { ICheckboxStyleProps, ICheckboxStyles } from '../../Checkbox'; -import { ILabelStyleProps, ILabelStyles } from '../../Label'; -import { IPanelStyleProps, IPanelStyles } from '../../Panel'; +import type { IRenderFunction, IStyleFunctionOrObject } from '../../Utilities'; +import type { IStyle, ITheme } from '../../Styling'; +import type { ISelectableOption, ISelectableDroppableTextProps } from '../../SelectableOption'; +import type { ICheckboxStyleProps, ICheckboxStyles } from '../../Checkbox'; +import type { ILabelStyleProps, ILabelStyles } from '../../Label'; +import type { IPanelStyleProps, IPanelStyles } from '../../Panel'; export { SelectableOptionMenuItemType as DropdownMenuItemType } from '../../SelectableOption'; diff --git a/packages/react/src/components/Dropdown/utilities/DropdownSizePosCache.test.ts b/packages/react/src/components/Dropdown/utilities/DropdownSizePosCache.test.ts index 57f21d4334273d..698ce6c31ca141 100644 --- a/packages/react/src/components/Dropdown/utilities/DropdownSizePosCache.test.ts +++ b/packages/react/src/components/Dropdown/utilities/DropdownSizePosCache.test.ts @@ -1,5 +1,6 @@ import { DropdownSizePosCache } from './DropdownSizePosCache'; -import { IDropdownOption, DropdownMenuItemType } from '../Dropdown.types'; +import { DropdownMenuItemType } from '../Dropdown.types'; +import type { IDropdownOption } from '../Dropdown.types'; const pureOptions: IDropdownOption[] = [ { key: 'A', text: 'Option a' }, diff --git a/packages/react/src/components/Dropdown/utilities/DropdownSizePosCache.ts b/packages/react/src/components/Dropdown/utilities/DropdownSizePosCache.ts index a65a409247601e..5b5b9726c71e1f 100644 --- a/packages/react/src/components/Dropdown/utilities/DropdownSizePosCache.ts +++ b/packages/react/src/components/Dropdown/utilities/DropdownSizePosCache.ts @@ -1,4 +1,5 @@ -import { IDropdownOption, DropdownMenuItemType } from '../Dropdown.types'; +import { DropdownMenuItemType } from '../Dropdown.types'; +import type { IDropdownOption } from '../Dropdown.types'; /** * A utility class to cache size and position in cache. diff --git a/packages/react/src/components/ExtendedPicker/BaseExtendedPicker.test.tsx b/packages/react/src/components/ExtendedPicker/BaseExtendedPicker.test.tsx index c08db96b3e865e..e6b7d7b9602e4a 100644 --- a/packages/react/src/components/ExtendedPicker/BaseExtendedPicker.test.tsx +++ b/packages/react/src/components/ExtendedPicker/BaseExtendedPicker.test.tsx @@ -2,11 +2,13 @@ import * as React from 'react'; import * as ReactTestUtils from 'react-dom/test-utils'; import * as ReactDOM from 'react-dom'; import * as renderer from 'react-test-renderer'; -import { IBaseExtendedPickerProps } from './BaseExtendedPicker.types'; import { BaseExtendedPicker } from './BaseExtendedPicker'; -import { IBaseFloatingPickerProps, BaseFloatingPicker, SuggestionsStore } from '../FloatingPicker/index'; -import { IBaseSelectedItemsListProps, ISelectedItemProps, BaseSelectedItemsList } from '../../SelectedItemsList'; +import { BaseFloatingPicker, SuggestionsStore } from '../FloatingPicker/index'; +import { BaseSelectedItemsList } from '../../SelectedItemsList'; import { KeyCodes } from '../../Utilities'; +import type { IBaseExtendedPickerProps } from './BaseExtendedPicker.types'; +import type { IBaseFloatingPickerProps } from '../FloatingPicker/index'; +import type { IBaseSelectedItemsListProps, ISelectedItemProps } from '../../SelectedItemsList'; function onResolveSuggestions(text: string): ISimple[] { return [ diff --git a/packages/react/src/components/ExtendedPicker/BaseExtendedPicker.tsx b/packages/react/src/components/ExtendedPicker/BaseExtendedPicker.tsx index fa490dc1ddac9f..6164afad0d2bbc 100644 --- a/packages/react/src/components/ExtendedPicker/BaseExtendedPicker.tsx +++ b/packages/react/src/components/ExtendedPicker/BaseExtendedPicker.tsx @@ -1,13 +1,15 @@ import * as React from 'react'; import { KeyCodes, css, initializeComponentRef } from '../../Utilities'; import { Autofill } from '../../Autofill'; -import { IInputProps } from '../../Pickers'; import * as stylesImport from './BaseExtendedPicker.scss'; -import { IBaseExtendedPickerProps, IBaseExtendedPicker } from './BaseExtendedPicker.types'; -import { IBaseFloatingPickerProps, BaseFloatingPicker } from '../../FloatingPicker'; -import { BaseSelectedItemsList, IBaseSelectedItemsListProps } from '../../SelectedItemsList'; +import { BaseFloatingPicker } from '../../FloatingPicker'; +import { BaseSelectedItemsList } from '../../SelectedItemsList'; import { FocusZone, FocusZoneDirection } from '../../FocusZone'; import { Selection, SelectionMode, SelectionZone } from '../../Selection'; +import type { IInputProps } from '../../Pickers'; +import type { IBaseExtendedPickerProps, IBaseExtendedPicker } from './BaseExtendedPicker.types'; +import type { IBaseFloatingPickerProps } from '../../FloatingPicker'; +import type { IBaseSelectedItemsListProps } from '../../SelectedItemsList'; const styles: any = stylesImport; diff --git a/packages/react/src/components/ExtendedPicker/BaseExtendedPicker.types.ts b/packages/react/src/components/ExtendedPicker/BaseExtendedPicker.types.ts index 50b1efdf87390e..156468c6d6edac 100644 --- a/packages/react/src/components/ExtendedPicker/BaseExtendedPicker.types.ts +++ b/packages/react/src/components/ExtendedPicker/BaseExtendedPicker.types.ts @@ -1,10 +1,10 @@ import * as React from 'react'; import { Autofill } from '../../Autofill'; -import { IInputProps } from '../../Pickers'; -import { IBaseFloatingPickerProps } from '../../FloatingPicker'; -import { IBaseSelectedItemsListProps } from '../../SelectedItemsList'; -import { IRefObject } from '../../Utilities'; -import { IFocusZoneProps } from '../../FocusZone'; +import type { IInputProps } from '../../Pickers'; +import type { IBaseFloatingPickerProps } from '../../FloatingPicker'; +import type { IBaseSelectedItemsListProps } from '../../SelectedItemsList'; +import type { IRefObject } from '../../Utilities'; +import type { IFocusZoneProps } from '../../FocusZone'; export interface IBaseExtendedPicker { /** Forces the picker to resolve */ diff --git a/packages/react/src/components/ExtendedPicker/PeoplePicker/ExtendedPeoplePicker.tsx b/packages/react/src/components/ExtendedPicker/PeoplePicker/ExtendedPeoplePicker.tsx index 060a4ff402a05b..33a47afd6c4770 100644 --- a/packages/react/src/components/ExtendedPicker/PeoplePicker/ExtendedPeoplePicker.tsx +++ b/packages/react/src/components/ExtendedPicker/PeoplePicker/ExtendedPeoplePicker.tsx @@ -1,10 +1,9 @@ -import { IPickerItemProps } from '../../../Pickers'; - -import { IExtendedPersonaProps } from '../../../SelectedItemsList'; -import { IPersonaProps } from '../../../Persona'; import './ExtendedPeoplePicker.scss'; import { BaseExtendedPicker } from '../BaseExtendedPicker'; -import { IBaseExtendedPickerProps } from '../BaseExtendedPicker.types'; +import type { IPickerItemProps } from '../../../Pickers'; +import type { IExtendedPersonaProps } from '../../../SelectedItemsList'; +import type { IPersonaProps } from '../../../Persona'; +import type { IBaseExtendedPickerProps } from '../BaseExtendedPicker.types'; /** * {@docCategory ExtendedPeoplePicker} diff --git a/packages/react/src/components/Fabric/Fabric.base.tsx b/packages/react/src/components/Fabric/Fabric.base.tsx index b90f2acd48e881..eba221168594d1 100644 --- a/packages/react/src/components/Fabric/Fabric.base.tsx +++ b/packages/react/src/components/Fabric/Fabric.base.tsx @@ -9,10 +9,11 @@ import { Customizer, useFocusRects, } from '../../Utilities'; -import { IFabricProps, IFabricStyleProps, IFabricStyles } from './Fabric.types'; -import { IProcessedStyleSet } from '@fluentui/merge-styles'; -import { ITheme, createTheme } from '../../Styling'; +import { createTheme } from '../../Styling'; import { useMergedRefs } from '@fluentui/react-hooks'; +import type { IFabricProps, IFabricStyleProps, IFabricStyles } from './Fabric.types'; +import type { IProcessedStyleSet } from '@fluentui/merge-styles'; +import type { ITheme } from '../../Styling'; const getClassNames = classNamesFunction(); const getFabricTheme = memoizeFunction((theme?: ITheme, isRTL?: boolean) => createTheme({ ...theme, rtl: isRTL })); diff --git a/packages/react/src/components/Fabric/Fabric.styles.ts b/packages/react/src/components/Fabric/Fabric.styles.ts index 12c008ba97de96..f89418eae03ec2 100644 --- a/packages/react/src/components/Fabric/Fabric.styles.ts +++ b/packages/react/src/components/Fabric/Fabric.styles.ts @@ -1,5 +1,5 @@ import { getGlobalClassNames } from '../../Styling'; -import { IFabricStyleProps, IFabricStyles } from './Fabric.types'; +import type { IFabricStyleProps, IFabricStyles } from './Fabric.types'; const inheritFont = { fontFamily: 'inherit' }; diff --git a/packages/react/src/components/Fabric/Fabric.tsx b/packages/react/src/components/Fabric/Fabric.tsx index df611458de5747..f1148aad1ddde1 100644 --- a/packages/react/src/components/Fabric/Fabric.tsx +++ b/packages/react/src/components/Fabric/Fabric.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled } from '../../Utilities'; import { FabricBase } from './Fabric.base'; import { getStyles } from './Fabric.styles'; -import { IFabricProps, IFabricStyleProps, IFabricStyles } from './Fabric.types'; +import type { IFabricProps, IFabricStyleProps, IFabricStyles } from './Fabric.types'; /** * @deprecated This component is deprecated as of `@fluentui/react` version 8. Use `ThemeProvider` instead. diff --git a/packages/react/src/components/Fabric/Fabric.types.ts b/packages/react/src/components/Fabric/Fabric.types.ts index f88c8883766aa9..ee9f6b4b56098e 100644 --- a/packages/react/src/components/Fabric/Fabric.types.ts +++ b/packages/react/src/components/Fabric/Fabric.types.ts @@ -1,6 +1,6 @@ import * as React from 'react'; -import { IStyle, ITheme } from '../../Styling'; -import { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; +import type { IStyle, ITheme } from '../../Styling'; +import type { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; export interface IFabricProps extends React.HTMLAttributes, React.RefAttributes { componentRef?: IRefObject<{}>; diff --git a/packages/react/src/components/Facepile/Facepile.base.tsx b/packages/react/src/components/Facepile/Facepile.base.tsx index 0a275cbde78f28..e5622a2436495d 100644 --- a/packages/react/src/components/Facepile/Facepile.base.tsx +++ b/packages/react/src/components/Facepile/Facepile.base.tsx @@ -1,17 +1,13 @@ import * as React from 'react'; import { buttonProperties, classNamesFunction, getId, getNativeProps, initializeComponentRef } from '../../Utilities'; -import { - IFacepileProps, - IFacepilePersona, - IFacepileStyleProps, - IFacepileStyles, - OverflowButtonType, -} from './Facepile.types'; +import { OverflowButtonType } from './Facepile.types'; import { FacepileButton } from './FacepileButton'; import { Icon } from '../../Icon'; -import { Persona, IPersonaStyles } from '../../Persona'; +import { Persona } from '../../Persona'; import { PersonaCoin, PersonaSize, PersonaInitialsColor } from '../../PersonaCoin'; -import { IButtonProps } from '../../Button'; +import type { IFacepileProps, IFacepilePersona, IFacepileStyleProps, IFacepileStyles } from './Facepile.types'; +import type { IPersonaStyles } from '../../Persona'; +import type { IButtonProps } from '../../Button'; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/components/Facepile/Facepile.styles.ts b/packages/react/src/components/Facepile/Facepile.styles.ts index 16146afc8476b5..c7b0c94cf7ee75 100644 --- a/packages/react/src/components/Facepile/Facepile.styles.ts +++ b/packages/react/src/components/Facepile/Facepile.styles.ts @@ -1,6 +1,6 @@ -import { IFacepileStyleProps, IFacepileStyles } from './Facepile.types'; - -import { IStyle, hiddenContentStyle, HighContrastSelector, getFocusStyle, getGlobalClassNames } from '../../Styling'; +import { hiddenContentStyle, HighContrastSelector, getFocusStyle, getGlobalClassNames } from '../../Styling'; +import type { IFacepileStyleProps, IFacepileStyles } from './Facepile.types'; +import type { IStyle } from '../../Styling'; const GlobalClassNames = { root: 'ms-Facepile', diff --git a/packages/react/src/components/Facepile/Facepile.test.tsx b/packages/react/src/components/Facepile/Facepile.test.tsx index 669c0786d5882b..4f244b3b912bec 100644 --- a/packages/react/src/components/Facepile/Facepile.test.tsx +++ b/packages/react/src/components/Facepile/Facepile.test.tsx @@ -4,12 +4,13 @@ import { mount } from 'enzyme'; import { TestImages } from '@fluentui/example-data'; import { setRTL } from '../../Utilities'; import { Facepile } from './Facepile'; -import { IFacepilePersona, OverflowButtonType } from './Facepile.types'; +import { OverflowButtonType } from './Facepile.types'; import { PersonaSize } from '../../Persona'; import { Persona } from '../../Persona'; import { PersonaCoin } from '../../PersonaCoin'; import { findNodes, expectOne, expectMissing } from '../../common/testUtilities'; import { isConformant } from '../../common/isConformant'; +import type { IFacepilePersona } from './Facepile.types'; const facepilePersonas: IFacepilePersona[] = [ { diff --git a/packages/react/src/components/Facepile/Facepile.tsx b/packages/react/src/components/Facepile/Facepile.tsx index 079607d99da6d2..a1c43490e714fe 100644 --- a/packages/react/src/components/Facepile/Facepile.tsx +++ b/packages/react/src/components/Facepile/Facepile.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { styled } from '../../Utilities'; -import { IFacepileProps, IFacepileStyleProps, IFacepileStyles } from './Facepile.types'; import { FacepileBase } from './Facepile.base'; import { styles } from './Facepile.styles'; +import type { IFacepileProps, IFacepileStyleProps, IFacepileStyles } from './Facepile.types'; /** * The Facepile shows a list of faces or initials in a horizontal lockup. Each circle represents a person. diff --git a/packages/react/src/components/Facepile/Facepile.types.ts b/packages/react/src/components/Facepile/Facepile.types.ts index 8d60533ab297bc..adcf0e4fbafc7a 100644 --- a/packages/react/src/components/Facepile/Facepile.types.ts +++ b/packages/react/src/components/Facepile/Facepile.types.ts @@ -1,10 +1,11 @@ import * as React from 'react'; import { FacepileBase } from './Facepile.base'; -import { IStyle, ITheme } from '../../Styling'; -import { IRefObject, IRenderFunction, IStyleFunctionOrObject } from '../../Utilities'; -import { IButtonProps } from '../../Button'; -import { IPersonaSharedProps, PersonaInitialsColor, PersonaSize } from '../../Persona'; -import { IKeytipProps } from '../../Keytip'; +import { PersonaInitialsColor, PersonaSize } from '../../Persona'; +import type { IStyle, ITheme } from '../../Styling'; +import type { IRefObject, IRenderFunction, IStyleFunctionOrObject } from '../../Utilities'; +import type { IButtonProps } from '../../Button'; +import type { IPersonaSharedProps } from '../../Persona'; +import type { IKeytipProps } from '../../Keytip'; /** * {@docCategory Facepile} diff --git a/packages/react/src/components/Facepile/FacepileButton.styles.ts b/packages/react/src/components/Facepile/FacepileButton.styles.ts index f50e5f73e97063..d41f6b12ff7289 100644 --- a/packages/react/src/components/Facepile/FacepileButton.styles.ts +++ b/packages/react/src/components/Facepile/FacepileButton.styles.ts @@ -1,7 +1,8 @@ -import { ITheme, concatStyleSets } from '../../Styling'; +import { concatStyleSets } from '../../Styling'; import { memoizeFunction } from '../../Utilities'; -import { IButtonStyles } from '../../Button'; import { getStyles as getBaseButtonStyles } from '../Button/BaseButton.styles'; +import type { ITheme } from '../../Styling'; +import type { IButtonStyles } from '../../Button'; export const getStyles = memoizeFunction( (theme: ITheme, className?: string, customStyles?: IButtonStyles): IButtonStyles => { diff --git a/packages/react/src/components/Facepile/FacepileButton.tsx b/packages/react/src/components/Facepile/FacepileButton.tsx index a7ae4baad74f2f..f597052e37bc4d 100644 --- a/packages/react/src/components/Facepile/FacepileButton.tsx +++ b/packages/react/src/components/Facepile/FacepileButton.tsx @@ -1,7 +1,8 @@ import * as React from 'react'; -import { BaseButton, IButtonProps } from '../../Button'; +import { BaseButton } from '../../Button'; import { customizable, nullRender } from '../../Utilities'; import { getStyles } from './FacepileButton.styles'; +import type { IButtonProps } from '../../Button'; @customizable('FacepileButton', ['theme', 'styles'], true) export class FacepileButton extends React.Component { diff --git a/packages/react/src/components/FloatingPicker/BaseFloatingPicker.test.tsx b/packages/react/src/components/FloatingPicker/BaseFloatingPicker.test.tsx index f282a1f8fbc043..0453b457825886 100644 --- a/packages/react/src/components/FloatingPicker/BaseFloatingPicker.test.tsx +++ b/packages/react/src/components/FloatingPicker/BaseFloatingPicker.test.tsx @@ -2,10 +2,9 @@ import * as React from 'react'; import * as ReactDOM from 'react-dom'; import * as renderer from 'react-test-renderer'; import * as ReactTestUtils from 'react-dom/test-utils'; - -import { IBaseFloatingPickerProps } from './BaseFloatingPicker.types'; import { BaseFloatingPicker } from './BaseFloatingPicker'; import { SuggestionsStore } from './Suggestions/SuggestionsStore'; +import type { IBaseFloatingPickerProps } from './BaseFloatingPicker.types'; function onResolveSuggestions(text: string): ISimple[] { return [ diff --git a/packages/react/src/components/FloatingPicker/BaseFloatingPicker.tsx b/packages/react/src/components/FloatingPicker/BaseFloatingPicker.tsx index f1cdf33f2bf20c..36d42bd618fb3d 100644 --- a/packages/react/src/components/FloatingPicker/BaseFloatingPicker.tsx +++ b/packages/react/src/components/FloatingPicker/BaseFloatingPicker.tsx @@ -3,11 +3,11 @@ import * as stylesImport from './BaseFloatingPicker.scss'; import { Async, initializeComponentRef, css, KeyCodes } from '../../Utilities'; import { DirectionalHint } from '../../common/DirectionalHint'; import { Callout } from '../../Callout'; -import { IBaseFloatingPicker, IBaseFloatingPickerProps } from './BaseFloatingPicker.types'; -import { ISuggestionModel } from '../../Pickers'; -import { ISuggestionsControlProps } from './Suggestions/Suggestions.types'; import { SuggestionsControl } from './Suggestions/SuggestionsControl'; import { SuggestionsStore } from './Suggestions/SuggestionsStore'; +import type { IBaseFloatingPicker, IBaseFloatingPickerProps } from './BaseFloatingPicker.types'; +import type { ISuggestionModel } from '../../Pickers'; +import type { ISuggestionsControlProps } from './Suggestions/Suggestions.types'; const styles: any = stylesImport; diff --git a/packages/react/src/components/FloatingPicker/BaseFloatingPicker.types.ts b/packages/react/src/components/FloatingPicker/BaseFloatingPicker.types.ts index 2a3672d3059612..8340e924b4e6f8 100644 --- a/packages/react/src/components/FloatingPicker/BaseFloatingPicker.types.ts +++ b/packages/react/src/components/FloatingPicker/BaseFloatingPicker.types.ts @@ -1,9 +1,9 @@ import * as React from 'react'; -import { ISuggestionModel, ISuggestionItemProps } from '../../Pickers'; -import { ISuggestionsControlProps } from './Suggestions/Suggestions.types'; import { SuggestionsStore } from './Suggestions/SuggestionsStore'; -import { IRefObject } from '../../Utilities'; -import { ICalloutProps } from '../Callout/Callout.types'; +import type { ISuggestionModel, ISuggestionItemProps } from '../../Pickers'; +import type { ISuggestionsControlProps } from './Suggestions/Suggestions.types'; +import type { IRefObject } from '../../Utilities'; +import type { ICalloutProps } from '../Callout/Callout.types'; export interface IBaseFloatingPicker { /** Whether the suggestions are shown */ diff --git a/packages/react/src/components/FloatingPicker/PeoplePicker/FloatingPeoplePicker.tsx b/packages/react/src/components/FloatingPicker/PeoplePicker/FloatingPeoplePicker.tsx index 0cf2c372d6e36c..346fc87dce6e27 100644 --- a/packages/react/src/components/FloatingPicker/PeoplePicker/FloatingPeoplePicker.tsx +++ b/packages/react/src/components/FloatingPicker/PeoplePicker/FloatingPeoplePicker.tsx @@ -1,10 +1,10 @@ import { getRTL, getInitials } from '../../../Utilities'; import { BaseFloatingPicker } from '../BaseFloatingPicker'; -import { IBaseFloatingPickerProps } from '../BaseFloatingPicker.types'; import { SuggestionItemNormal } from './PeoplePickerItems/SuggestionItemDefault'; -import { IPersonaProps } from '../../../Persona'; import './PeoplePicker.scss'; -import { IBasePickerSuggestionsProps, ISuggestionModel } from '../../../Pickers'; +import type { IBaseFloatingPickerProps } from '../BaseFloatingPicker.types'; +import type { IPersonaProps } from '../../../Persona'; +import type { IBasePickerSuggestionsProps, ISuggestionModel } from '../../../Pickers'; /** * {@docCategory FloatingPeoplePicker} diff --git a/packages/react/src/components/FloatingPicker/PeoplePicker/PeoplePickerItems/SelectedItemDefault.tsx b/packages/react/src/components/FloatingPicker/PeoplePicker/PeoplePickerItems/SelectedItemDefault.tsx index 8eb596aaea7237..7941c82a0c237e 100644 --- a/packages/react/src/components/FloatingPicker/PeoplePicker/PeoplePickerItems/SelectedItemDefault.tsx +++ b/packages/react/src/components/FloatingPicker/PeoplePicker/PeoplePickerItems/SelectedItemDefault.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; import { css, getId } from '../../../../Utilities'; import { Persona, PersonaSize, PersonaPresence } from '../../../../Persona'; -import { IPeoplePickerItemProps } from '../../../../ExtendedPicker'; import { IconButton } from '../../../../Button'; import * as stylesImport from './PickerItemsDefault.scss'; +import type { IPeoplePickerItemProps } from '../../../../ExtendedPicker'; const styles: any = stylesImport; diff --git a/packages/react/src/components/FloatingPicker/PeoplePicker/PeoplePickerItems/SuggestionItemDefault.tsx b/packages/react/src/components/FloatingPicker/PeoplePicker/PeoplePickerItems/SuggestionItemDefault.tsx index 59d6ba15cabc53..ddb86ad7d44e6a 100644 --- a/packages/react/src/components/FloatingPicker/PeoplePicker/PeoplePickerItems/SuggestionItemDefault.tsx +++ b/packages/react/src/components/FloatingPicker/PeoplePicker/PeoplePickerItems/SuggestionItemDefault.tsx @@ -1,8 +1,9 @@ import * as React from 'react'; import { css } from '../../../../Utilities'; -import { Persona, PersonaSize, IPersonaProps, PersonaPresence } from '../../../../Persona'; -import { IBasePickerSuggestionsProps, ISuggestionItemProps } from '../../../../Pickers'; +import { Persona, PersonaSize, PersonaPresence } from '../../../../Persona'; import * as stylesImport from '../PeoplePicker.scss'; +import type { IPersonaProps } from '../../../../Persona'; +import type { IBasePickerSuggestionsProps, ISuggestionItemProps } from '../../../../Pickers'; export const SuggestionItemNormal: ( persona: IPersonaProps, diff --git a/packages/react/src/components/FloatingPicker/Suggestions/Suggestions.types.ts b/packages/react/src/components/FloatingPicker/Suggestions/Suggestions.types.ts index 76aad066e6a0ae..d935ea78726301 100644 --- a/packages/react/src/components/FloatingPicker/Suggestions/Suggestions.types.ts +++ b/packages/react/src/components/FloatingPicker/Suggestions/Suggestions.types.ts @@ -1,7 +1,7 @@ import * as React from 'react'; -import { ISuggestionModel, ISuggestionItemProps } from '../../../Pickers'; -import { IPersonaProps } from '../../../Persona'; -import { IRefObject } from '../../../Utilities'; +import type { ISuggestionModel, ISuggestionItemProps } from '../../../Pickers'; +import type { IPersonaProps } from '../../../Persona'; +import type { IRefObject } from '../../../Utilities'; export interface ISuggestionsCoreProps extends React.ClassAttributes { /** diff --git a/packages/react/src/components/FloatingPicker/Suggestions/SuggestionsControl.tsx b/packages/react/src/components/FloatingPicker/Suggestions/SuggestionsControl.tsx index 424637a00c2bf6..e4c6d2c911ad2e 100644 --- a/packages/react/src/components/FloatingPicker/Suggestions/SuggestionsControl.tsx +++ b/packages/react/src/components/FloatingPicker/Suggestions/SuggestionsControl.tsx @@ -1,16 +1,16 @@ import * as React from 'react'; import { css, KeyCodes, initializeComponentRef } from '../../../Utilities'; -import { IButton } from '../../../Button'; -import { ISuggestionModel } from '../../../Pickers'; -import { +import { SuggestionsCore } from './SuggestionsCore'; +import * as stylesImport from './SuggestionsControl.scss'; +import { hiddenContentStyle, mergeStyles } from '../../../Styling'; +import type { IButton } from '../../../Button'; +import type { ISuggestionModel } from '../../../Pickers'; +import type { ISuggestionsHeaderFooterItemProps, ISuggestionsControlProps, ISuggestionsCoreProps, ISuggestionsHeaderFooterProps, } from './Suggestions.types'; -import { SuggestionsCore } from './SuggestionsCore'; -import * as stylesImport from './SuggestionsControl.scss'; -import { hiddenContentStyle, mergeStyles } from '../../../Styling'; const styles: any = stylesImport; diff --git a/packages/react/src/components/FloatingPicker/Suggestions/SuggestionsCore.tsx b/packages/react/src/components/FloatingPicker/Suggestions/SuggestionsCore.tsx index 4db92541a9dcac..c8c6f124247f73 100644 --- a/packages/react/src/components/FloatingPicker/Suggestions/SuggestionsCore.tsx +++ b/packages/react/src/components/FloatingPicker/Suggestions/SuggestionsCore.tsx @@ -1,8 +1,9 @@ import * as React from 'react'; import { initializeComponentRef, css } from '../../../Utilities'; -import { ISuggestionItemProps, SuggestionsItem, ISuggestionModel } from '../../../Pickers'; -import { ISuggestionsCoreProps } from './Suggestions.types'; +import { SuggestionsItem } from '../../../Pickers'; import * as stylesImport from './SuggestionsCore.scss'; +import type { ISuggestionItemProps, ISuggestionModel } from '../../../Pickers'; +import type { ISuggestionsCoreProps } from './Suggestions.types'; const styles: any = stylesImport; diff --git a/packages/react/src/components/FloatingPicker/Suggestions/SuggestionsStore.ts b/packages/react/src/components/FloatingPicker/Suggestions/SuggestionsStore.ts index 2dd41d56073696..b7294f123d3905 100644 --- a/packages/react/src/components/FloatingPicker/Suggestions/SuggestionsStore.ts +++ b/packages/react/src/components/FloatingPicker/Suggestions/SuggestionsStore.ts @@ -1,5 +1,5 @@ -import { ISuggestionModel, ITag } from '../../../Pickers'; -import { IPersonaProps } from '../../../Persona'; +import type { ISuggestionModel, ITag } from '../../../Pickers'; +import type { IPersonaProps } from '../../../Persona'; export type SuggestionsStoreOptions = { getAriaLabel?: (item: T) => string; diff --git a/packages/react/src/components/FocusTrapZone/FocusTrapZone.test.tsx b/packages/react/src/components/FocusTrapZone/FocusTrapZone.test.tsx index 3764709f63444b..6186732faae526 100644 --- a/packages/react/src/components/FocusTrapZone/FocusTrapZone.test.tsx +++ b/packages/react/src/components/FocusTrapZone/FocusTrapZone.test.tsx @@ -3,9 +3,9 @@ import * as ReactTestUtils from 'react-dom/test-utils'; import { KeyCodes } from '../../Utilities'; import { FocusZone, FocusZoneDirection } from '../../FocusZone'; import { FocusTrapZone } from './FocusTrapZone'; -import { IFocusTrapZoneProps } from './FocusTrapZone.types'; import { safeMount } from '@fluentui/test-utilities'; import { isConformant } from '../../common/isConformant'; +import type { IFocusTrapZoneProps } from './FocusTrapZone.types'; // rAF does not exist in node - let's mock it window.requestAnimationFrame = (callback: FrameRequestCallback) => { diff --git a/packages/react/src/components/FocusTrapZone/FocusTrapZone.tsx b/packages/react/src/components/FocusTrapZone/FocusTrapZone.tsx index 67545bbdb38d2d..2f18d31b9b0354 100644 --- a/packages/react/src/components/FocusTrapZone/FocusTrapZone.tsx +++ b/packages/react/src/components/FocusTrapZone/FocusTrapZone.tsx @@ -7,13 +7,13 @@ import { getLastTabbable, getNextElement, focusAsync, - IRefObject, modalize, on, } from '../../Utilities'; -import { IFocusTrapZoneProps, IFocusTrapZone } from './FocusTrapZone.types'; import { useId, useConst, useMergedRefs } from '@fluentui/react-hooks'; import { useDocument } from '../../WindowProvider'; +import type { IRefObject } from '../../Utilities'; +import type { IFocusTrapZoneProps, IFocusTrapZone } from './FocusTrapZone.types'; interface IFocusTrapZoneInternalState { disposeFocusHandler: (() => void) | undefined; diff --git a/packages/react/src/components/FocusTrapZone/FocusTrapZone.types.ts b/packages/react/src/components/FocusTrapZone/FocusTrapZone.types.ts index 5ea729f4886e7a..5bd0a8b56eaa48 100644 --- a/packages/react/src/components/FocusTrapZone/FocusTrapZone.types.ts +++ b/packages/react/src/components/FocusTrapZone/FocusTrapZone.types.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { IRefObject } from '../../Utilities'; +import type { IRefObject } from '../../Utilities'; /** * {@docCategory FocusTrapZone} diff --git a/packages/react/src/components/GroupedList/GroupFooter.base.tsx b/packages/react/src/components/GroupedList/GroupFooter.base.tsx index ab04021d8e964e..c282f6e5cd1d60 100644 --- a/packages/react/src/components/GroupedList/GroupFooter.base.tsx +++ b/packages/react/src/components/GroupedList/GroupFooter.base.tsx @@ -1,7 +1,8 @@ import * as React from 'react'; import { classNamesFunction } from '../../Utilities'; import { GroupSpacer } from './GroupSpacer'; -import { IGroupFooterStyleProps, IGroupFooterStyles, IGroupFooterProps } from './GroupFooter.types'; +import type { IGroupFooterStyleProps, IGroupFooterStyles, IGroupFooterProps } from './GroupFooter.types'; + const getClassNames = classNamesFunction(); export const GroupFooterBase: React.FunctionComponent = props => { diff --git a/packages/react/src/components/GroupedList/GroupFooter.styles.ts b/packages/react/src/components/GroupedList/GroupFooter.styles.ts index dca068a69dbf7c..d6b378de4d9734 100644 --- a/packages/react/src/components/GroupedList/GroupFooter.styles.ts +++ b/packages/react/src/components/GroupedList/GroupFooter.styles.ts @@ -1,5 +1,5 @@ -import { IGroupFooterStyleProps, IGroupFooterStyles } from './GroupFooter.types'; import { getGlobalClassNames } from '../../Styling'; +import type { IGroupFooterStyleProps, IGroupFooterStyles } from './GroupFooter.types'; const GlobalClassNames = { root: 'ms-groupFooter', diff --git a/packages/react/src/components/GroupedList/GroupFooter.ts b/packages/react/src/components/GroupedList/GroupFooter.ts index a1943a16121cef..e85f79bccc3a61 100644 --- a/packages/react/src/components/GroupedList/GroupFooter.ts +++ b/packages/react/src/components/GroupedList/GroupFooter.ts @@ -2,8 +2,7 @@ import * as React from 'react'; import { styled } from '../../Utilities'; import { getStyles } from './GroupFooter.styles'; import { GroupFooterBase } from './GroupFooter.base'; -import { IGroupFooterProps, IGroupFooterStyles, IGroupFooterStyleProps } from './GroupFooter.types'; -export { IGroupFooterProps }; +import type { IGroupFooterProps, IGroupFooterStyles, IGroupFooterStyleProps } from './GroupFooter.types'; export const GroupFooter: React.FunctionComponent = styled< IGroupFooterProps, @@ -12,3 +11,5 @@ export const GroupFooter: React.FunctionComponent = styled< >(GroupFooterBase, getStyles, undefined, { scope: 'GroupFooter', }); + +export type { IGroupFooterProps }; diff --git a/packages/react/src/components/GroupedList/GroupFooter.types.ts b/packages/react/src/components/GroupedList/GroupFooter.types.ts index 8220e40a5d943d..3ffd403dba5a23 100644 --- a/packages/react/src/components/GroupedList/GroupFooter.types.ts +++ b/packages/react/src/components/GroupedList/GroupFooter.types.ts @@ -1,6 +1,6 @@ -import { IStyleFunctionOrObject } from '../../Utilities'; -import { IGroupDividerProps } from './GroupedList.types'; -import { IStyle } from '../../Styling'; +import type { IStyleFunctionOrObject } from '../../Utilities'; +import type { IGroupDividerProps } from './GroupedList.types'; +import type { IStyle } from '../../Styling'; /** * {@docCategory GroupedList} diff --git a/packages/react/src/components/GroupedList/GroupHeader.base.tsx b/packages/react/src/components/GroupedList/GroupHeader.base.tsx index 491845d021b7f8..477a3be1cf3a49 100644 --- a/packages/react/src/components/GroupedList/GroupHeader.base.tsx +++ b/packages/react/src/components/GroupedList/GroupHeader.base.tsx @@ -1,18 +1,18 @@ import * as React from 'react'; -import { IProcessedStyleSet, ITheme } from '../../Styling'; import { composeRenderFunction, classNamesFunction, getId, getRTL, getRTLSafeKeyCode, KeyCodes } from '../../Utilities'; import { SelectionMode } from '../../Selection'; import { Check } from '../../Check'; import { Icon } from '../../Icon'; import { GroupSpacer } from './GroupSpacer'; import { Spinner } from '../../Spinner'; -import { +import { CHECK_CELL_WIDTH } from '../DetailsList/DetailsRowCheck.styles'; +import type { IProcessedStyleSet, ITheme } from '../../Styling'; +import type { IGroupHeaderStyleProps, IGroupHeaderStyles, IGroupHeaderProps, IGroupHeaderCheckboxProps, } from './GroupHeader.types'; -import { CHECK_CELL_WIDTH } from '../DetailsList/DetailsRowCheck.styles'; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/components/GroupedList/GroupHeader.styles.ts b/packages/react/src/components/GroupedList/GroupHeader.styles.ts index 85cffca55ec4c1..bd7e3bff27c226 100644 --- a/packages/react/src/components/GroupedList/GroupHeader.styles.ts +++ b/packages/react/src/components/GroupedList/GroupHeader.styles.ts @@ -1,17 +1,11 @@ -import { IGroupHeaderStyleProps, IGroupHeaderStyles } from './GroupHeader.types'; -import { - getGlobalClassNames, - getFocusStyle, - IStyle, - AnimationVariables, - FontWeights, - IconFontSizes, -} from '../../Styling'; +import { getGlobalClassNames, getFocusStyle, AnimationVariables, FontWeights, IconFontSizes } from '../../Styling'; import { getRTL, IsFocusVisibleClassName } from '../../Utilities'; import { DEFAULT_CELL_STYLE_PROPS } from '../DetailsList/DetailsRow.styles'; import { CHECK_CELL_WIDTH } from '../DetailsList/DetailsRowCheck.styles'; // For every group level there is a GroupSpacer added. Importing this const to have the source value in one place. import { SPACER_WIDTH as EXPAND_BUTTON_WIDTH } from './GroupSpacer'; +import type { IGroupHeaderStyleProps, IGroupHeaderStyles } from './GroupHeader.types'; +import type { IStyle } from '../../Styling'; const GlobalClassNames = { root: 'ms-GroupHeader', diff --git a/packages/react/src/components/GroupedList/GroupHeader.ts b/packages/react/src/components/GroupedList/GroupHeader.ts index 7befd71858ed90..59b8e0512118dc 100644 --- a/packages/react/src/components/GroupedList/GroupHeader.ts +++ b/packages/react/src/components/GroupedList/GroupHeader.ts @@ -2,8 +2,7 @@ import * as React from 'react'; import { styled } from '../../Utilities'; import { getStyles } from './GroupHeader.styles'; import { GroupHeaderBase } from './GroupHeader.base'; -import { IGroupHeaderProps, IGroupHeaderStyles, IGroupHeaderStyleProps } from './GroupHeader.types'; -export { IGroupHeaderProps }; +import type { IGroupHeaderProps, IGroupHeaderStyles, IGroupHeaderStyleProps } from './GroupHeader.types'; export const GroupHeader: React.FunctionComponent = styled< IGroupHeaderProps, @@ -12,3 +11,5 @@ export const GroupHeader: React.FunctionComponent = styled< >(GroupHeaderBase, getStyles, undefined, { scope: 'GroupHeader', }); + +export type { IGroupHeaderProps }; diff --git a/packages/react/src/components/GroupedList/GroupHeader.types.ts b/packages/react/src/components/GroupedList/GroupHeader.types.ts index f0527cf44079f7..e5495589a4de22 100644 --- a/packages/react/src/components/GroupedList/GroupHeader.types.ts +++ b/packages/react/src/components/GroupedList/GroupHeader.types.ts @@ -1,7 +1,7 @@ import * as React from 'react'; -import { IStyleFunctionOrObject, IRenderFunction } from '../../Utilities'; -import { IGroupDividerProps } from './GroupedList.types'; -import { IStyle, ITheme } from '../../Styling'; +import type { IStyleFunctionOrObject, IRenderFunction } from '../../Utilities'; +import type { IGroupDividerProps } from './GroupedList.types'; +import type { IStyle, ITheme } from '../../Styling'; /** * {@docCategory GroupedList} diff --git a/packages/react/src/components/GroupedList/GroupShowAll.base.tsx b/packages/react/src/components/GroupedList/GroupShowAll.base.tsx index e5568d5d571b3c..5d89f55305626a 100644 --- a/packages/react/src/components/GroupedList/GroupShowAll.base.tsx +++ b/packages/react/src/components/GroupedList/GroupShowAll.base.tsx @@ -2,9 +2,8 @@ import * as React from 'react'; import { useCallback } from 'react'; import { classNamesFunction } from '../../Utilities'; import { Link } from '../../Link'; -import { IGroupShowAllProps } from './GroupShowAll.types'; -import { IGroupShowAllStyleProps, IGroupShowAllStyles } from './GroupShowAll.types'; import { GroupSpacer } from './GroupSpacer'; +import type { IGroupShowAllProps, IGroupShowAllStyleProps, IGroupShowAllStyles } from './GroupShowAll.types'; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/components/GroupedList/GroupShowAll.styles.ts b/packages/react/src/components/GroupedList/GroupShowAll.styles.ts index 04c5e6559ad223..d48670008502ae 100644 --- a/packages/react/src/components/GroupedList/GroupShowAll.styles.ts +++ b/packages/react/src/components/GroupedList/GroupShowAll.styles.ts @@ -1,7 +1,5 @@ -import { IGroupShowAllProps, IGroupShowAllStyleProps, IGroupShowAllStyles } from './GroupShowAll.types'; import { getGlobalClassNames } from '../../Styling'; - -export { IGroupShowAllProps }; +import type { IGroupShowAllProps, IGroupShowAllStyleProps, IGroupShowAllStyles } from './GroupShowAll.types'; const GlobalClassNames = { root: 'ms-GroupShowAll', @@ -30,3 +28,5 @@ export const getStyles = (props: IGroupShowAllStyleProps): IGroupShowAllStyles = ], }; }; + +export type { IGroupShowAllProps }; diff --git a/packages/react/src/components/GroupedList/GroupShowAll.ts b/packages/react/src/components/GroupedList/GroupShowAll.ts index e080df69f02368..22f1c75b7f33d5 100644 --- a/packages/react/src/components/GroupedList/GroupShowAll.ts +++ b/packages/react/src/components/GroupedList/GroupShowAll.ts @@ -2,11 +2,12 @@ import * as React from 'react'; import { styled } from '../../Utilities'; import { getStyles } from './GroupShowAll.styles'; import { GroupShowAllBase } from './GroupShowAll.base'; -import { IGroupShowAllProps, IGroupShowAllStyleProps, IGroupShowAllStyles } from './GroupShowAll.types'; -export { IGroupShowAllProps }; +import type { IGroupShowAllProps, IGroupShowAllStyleProps, IGroupShowAllStyles } from './GroupShowAll.types'; export const GroupShowAll: React.FunctionComponent = styled< IGroupShowAllProps, IGroupShowAllStyleProps, IGroupShowAllStyles >(GroupShowAllBase, getStyles, undefined, { scope: 'GroupShowAll' }); + +export type { IGroupShowAllProps }; diff --git a/packages/react/src/components/GroupedList/GroupShowAll.types.ts b/packages/react/src/components/GroupedList/GroupShowAll.types.ts index bdf1602eb7cb09..7ee46ccd5e998a 100644 --- a/packages/react/src/components/GroupedList/GroupShowAll.types.ts +++ b/packages/react/src/components/GroupedList/GroupShowAll.types.ts @@ -1,6 +1,6 @@ -import { IStyle } from '../../Styling'; -import { IGroupDividerProps } from './GroupedList.types'; -import { IStyleFunctionOrObject } from '../../Utilities'; +import type { IStyle } from '../../Styling'; +import type { IGroupDividerProps } from './GroupedList.types'; +import type { IStyleFunctionOrObject } from '../../Utilities'; /** * {@docCategory GroupedList} diff --git a/packages/react/src/components/GroupedList/GroupSpacer.tsx b/packages/react/src/components/GroupedList/GroupSpacer.tsx index d2bff90651c54e..e14b5476534861 100644 --- a/packages/react/src/components/GroupedList/GroupSpacer.tsx +++ b/packages/react/src/components/GroupedList/GroupSpacer.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { IGroupSpacerProps } from './GroupSpacer.types'; +import type { IGroupSpacerProps } from './GroupSpacer.types'; export const SPACER_WIDTH = 36; diff --git a/packages/react/src/components/GroupedList/GroupSpacer.types.ts b/packages/react/src/components/GroupedList/GroupSpacer.types.ts index e83c7dd13b1512..c8ee753815cf59 100644 --- a/packages/react/src/components/GroupedList/GroupSpacer.types.ts +++ b/packages/react/src/components/GroupedList/GroupSpacer.types.ts @@ -1,5 +1,5 @@ -import { IStyle, ITheme } from '../../Styling'; -import { IStyleFunctionOrObject } from '../../Utilities'; +import type { IStyle, ITheme } from '../../Styling'; +import type { IStyleFunctionOrObject } from '../../Utilities'; /** * {@docCategory GroupedList} diff --git a/packages/react/src/components/GroupedList/GroupedList.base.tsx b/packages/react/src/components/GroupedList/GroupedList.base.tsx index 5faceb18404391..faef5130a99934 100644 --- a/packages/react/src/components/GroupedList/GroupedList.base.tsx +++ b/packages/react/src/components/GroupedList/GroupedList.base.tsx @@ -1,21 +1,22 @@ import * as React from 'react'; -import { IProcessedStyleSet } from '../../Styling'; -import { +import { initializeComponentRef, classNamesFunction, KeyCodes, getRTLSafeKeyCode, css } from '../../Utilities'; +import { GroupedListSection } from './GroupedListSection'; +import { List, ScrollToMode } from '../../List'; +import { SelectionMode } from '../../Selection'; +import { DEFAULT_ROW_HEIGHTS } from '../DetailsList/DetailsRow.styles'; +import { FocusZone, FocusZoneDirection } from '../../FocusZone'; +import type { IProcessedStyleSet } from '../../Styling'; +import type { IGroupedList, IGroupedListProps, IGroup, IGroupedListStyleProps, IGroupedListStyles, } from './GroupedList.types'; -import { initializeComponentRef, classNamesFunction, KeyCodes, getRTLSafeKeyCode, css } from '../../Utilities'; -import { GroupedListSection } from './GroupedListSection'; -import { List, ScrollToMode, IListProps } from '../../List'; -import { SelectionMode } from '../../Selection'; -import { DEFAULT_ROW_HEIGHTS } from '../DetailsList/DetailsRow.styles'; -import { IGroupHeaderProps } from './GroupHeader'; -import { IGroupShowAllProps } from './GroupShowAll.styles'; -import { IGroupFooterProps } from './GroupFooter.types'; -import { FocusZone, FocusZoneDirection } from '../../FocusZone'; +import type { IListProps } from '../../List'; +import type { IGroupHeaderProps } from './GroupHeader'; +import type { IGroupShowAllProps } from './GroupShowAll.styles'; +import type { IGroupFooterProps } from './GroupFooter.types'; const getClassNames = classNamesFunction(); const { rowHeight: ROW_HEIGHT, compactRowHeight: COMPACT_ROW_HEIGHT } = DEFAULT_ROW_HEIGHTS; diff --git a/packages/react/src/components/GroupedList/GroupedList.styles.ts b/packages/react/src/components/GroupedList/GroupedList.styles.ts index d73a9b64f15eac..114aca989153a4 100644 --- a/packages/react/src/components/GroupedList/GroupedList.styles.ts +++ b/packages/react/src/components/GroupedList/GroupedList.styles.ts @@ -1,5 +1,5 @@ -import { IGroupedListStyleProps, IGroupedListStyles } from './GroupedList.types'; import { getGlobalClassNames, AnimationVariables } from '../../Styling'; +import type { IGroupedListStyleProps, IGroupedListStyles } from './GroupedList.types'; const GlobalClassNames = { root: 'ms-GroupedList', diff --git a/packages/react/src/components/GroupedList/GroupedList.test.tsx b/packages/react/src/components/GroupedList/GroupedList.test.tsx index f868edf06a34e9..dcd24ce0c8b59c 100644 --- a/packages/react/src/components/GroupedList/GroupedList.test.tsx +++ b/packages/react/src/components/GroupedList/GroupedList.test.tsx @@ -3,8 +3,6 @@ import { mount } from 'enzyme'; import { SelectionMode, Selection } from '../../Selection'; import { GroupedList } from './GroupedList'; import { DetailsRow } from '../DetailsList/DetailsRow'; -import { IGroup } from './GroupedList.types'; -import { IColumn } from '../DetailsList/DetailsList.types'; import { List } from '../../List'; import { GroupShowAll } from './GroupShowAll'; import { Link } from '../../Link'; @@ -12,6 +10,8 @@ import { GroupHeader } from './GroupHeader'; import { getTheme } from '../../Styling'; import * as path from 'path'; import { isConformant } from '../../common/isConformant'; +import type { IGroup } from './GroupedList.types'; +import type { IColumn } from '../DetailsList/DetailsList.types'; describe('GroupedList', () => { isConformant({ diff --git a/packages/react/src/components/GroupedList/GroupedList.ts b/packages/react/src/components/GroupedList/GroupedList.ts index 848153c8b40607..682efe002546fc 100644 --- a/packages/react/src/components/GroupedList/GroupedList.ts +++ b/packages/react/src/components/GroupedList/GroupedList.ts @@ -2,8 +2,7 @@ import * as React from 'react'; import { styled } from '../../Utilities'; import { getStyles } from './GroupedList.styles'; import { GroupedListBase } from './GroupedList.base'; -import { IGroupedListProps, IGroupedListStyles, IGroupedListStyleProps } from './GroupedList.types'; -export { IGroupedListProps }; +import type { IGroupedListProps, IGroupedListStyles, IGroupedListStyleProps } from './GroupedList.types'; export const GroupedList: React.FunctionComponent = styled< IGroupedListProps, @@ -12,3 +11,5 @@ export const GroupedList: React.FunctionComponent = styled< >(GroupedListBase, getStyles, undefined, { scope: 'GroupedList', }); + +export type { IGroupedListProps }; diff --git a/packages/react/src/components/GroupedList/GroupedList.types.ts b/packages/react/src/components/GroupedList/GroupedList.types.ts index ee0c5d02f70f03..dadb44140763c2 100644 --- a/packages/react/src/components/GroupedList/GroupedList.types.ts +++ b/packages/react/src/components/GroupedList/GroupedList.types.ts @@ -1,16 +1,16 @@ import * as React from 'react'; import { GroupedListBase } from './GroupedList.base'; -import { IList, IListProps } from '../../List'; -import { IFocusZoneProps } from '../../FocusZone'; -import { IRefObject, IRenderFunction } from '../../Utilities'; -import { IDragDropContext, IDragDropEvents, IDragDropHelper } from '../../DragDrop'; -import { ISelection, SelectionMode } from '../../Selection'; -import { IViewport } from '../../utilities/decorators/withViewport'; -import { ITheme, IStyle } from '../../Styling'; -import { IStyleFunctionOrObject } from '../../Utilities'; -import { IGroupHeaderProps } from './GroupHeader.types'; -import { IGroupShowAllProps } from './GroupShowAll.types'; -import { IGroupFooterProps } from './GroupFooter.types'; +import { SelectionMode } from '../../Selection'; +import type { IList, IListProps } from '../../List'; +import type { IFocusZoneProps } from '../../FocusZone'; +import type { IRefObject, IRenderFunction, IStyleFunctionOrObject } from '../../Utilities'; +import type { IDragDropContext, IDragDropEvents, IDragDropHelper } from '../../DragDrop'; +import type { ISelection } from '../../Selection'; +import type { IViewport } from '../../utilities/decorators/withViewport'; +import type { ITheme, IStyle } from '../../Styling'; +import type { IGroupHeaderProps } from './GroupHeader.types'; +import type { IGroupShowAllProps } from './GroupShowAll.types'; +import type { IGroupFooterProps } from './GroupFooter.types'; /** * {@docCategory GroupedList} diff --git a/packages/react/src/components/GroupedList/GroupedListSection.tsx b/packages/react/src/components/GroupedList/GroupedListSection.tsx index e0bab422bd091f..843d5fe7169e57 100644 --- a/packages/react/src/components/GroupedList/GroupedListSection.tsx +++ b/packages/react/src/components/GroupedList/GroupedListSection.tsx @@ -1,22 +1,23 @@ import * as React from 'react'; -import { IGroup, IGroupDividerProps, IGroupRenderProps, IGroupedListStyles } from './GroupedList.types'; -import { IGroupHeaderProps } from './GroupHeader.types'; -import { IGroupFooterProps } from './GroupFooter.types'; -import { IGroupShowAllProps } from './GroupShowAll.types'; +import { initializeComponentRef, css, getId, EventGroup } from '../../Utilities'; -import { IDragDropContext, IDragDropEvents, IDragDropHelper, IDragDropOptions } from '../../DragDrop'; - -import { IProcessedStyleSet } from '../../Styling'; -import { initializeComponentRef, IRenderFunction, IDisposable, css, getId, EventGroup } from '../../Utilities'; - -import { ISelection, SelectionMode, SELECTION_CHANGE } from '../../Selection'; +import { SelectionMode, SELECTION_CHANGE } from '../../Selection'; import { GroupHeader } from './GroupHeader'; import { GroupShowAll } from './GroupShowAll'; import { GroupFooter } from './GroupFooter'; -import { List, IListProps } from '../../List'; -import { IViewport } from '../../utilities/decorators/withViewport'; +import { List } from '../../List'; +import type { IGroup, IGroupDividerProps, IGroupRenderProps, IGroupedListStyles } from './GroupedList.types'; +import type { IGroupHeaderProps } from './GroupHeader.types'; +import type { IGroupFooterProps } from './GroupFooter.types'; +import type { IGroupShowAllProps } from './GroupShowAll.types'; +import type { IDragDropContext, IDragDropEvents, IDragDropHelper, IDragDropOptions } from '../../DragDrop'; +import type { IProcessedStyleSet } from '../../Styling'; +import type { IRenderFunction, IDisposable } from '../../Utilities'; +import type { ISelection } from '../../Selection'; +import type { IListProps } from '../../List'; +import type { IViewport } from '../../utilities/decorators/withViewport'; export interface IGroupedListSectionProps extends React.ClassAttributes { /** GroupedList resolved class names */ diff --git a/packages/react/src/components/GroupedList/index.ts b/packages/react/src/components/GroupedList/index.ts index 653d428b29af04..b012ba695051b1 100644 --- a/packages/react/src/components/GroupedList/index.ts +++ b/packages/react/src/components/GroupedList/index.ts @@ -2,11 +2,11 @@ export * from './GroupedList'; export * from './GroupedList.base'; export * from './GroupedList.types'; export * from './GroupHeader'; -export { IGroupHeaderStyleProps, IGroupHeaderStyles, IGroupHeaderCheckboxProps } from './GroupHeader.types'; export * from './GroupFooter'; -export { IGroupFooterStyleProps, IGroupFooterStyles } from './GroupFooter.types'; export * from './GroupShowAll'; -export { IGroupShowAllStyleProps, IGroupShowAllStyles } from './GroupShowAll.types'; export { GroupSpacer } from './GroupSpacer'; export * from './GroupSpacer.types'; export * from './GroupedListSection'; +export type { IGroupHeaderStyleProps, IGroupHeaderStyles, IGroupHeaderCheckboxProps } from './GroupHeader.types'; +export type { IGroupFooterStyleProps, IGroupFooterStyles } from './GroupFooter.types'; +export type { IGroupShowAllStyleProps, IGroupShowAllStyles } from './GroupShowAll.types'; diff --git a/packages/react/src/components/HoverCard/BaseCard.types.ts b/packages/react/src/components/HoverCard/BaseCard.types.ts index e1428f992831b1..c4c45fc97e827d 100644 --- a/packages/react/src/components/HoverCard/BaseCard.types.ts +++ b/packages/react/src/components/HoverCard/BaseCard.types.ts @@ -1,9 +1,9 @@ import * as React from 'react'; import { DirectionalHint } from '../../common/DirectionalHint'; -import { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; -import { IStyle, ITheme } from '../../Styling'; -import { ICalloutProps } from '../../Callout'; +import type { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; +import type { IStyle, ITheme } from '../../Styling'; +import type { ICalloutProps } from '../../Callout'; /** * Interface containing props common for all types of cards. diff --git a/packages/react/src/components/HoverCard/CardCallout/CardCallout.tsx b/packages/react/src/components/HoverCard/CardCallout/CardCallout.tsx index cebc36c4c3483c..28864195436a5f 100644 --- a/packages/react/src/components/HoverCard/CardCallout/CardCallout.tsx +++ b/packages/react/src/components/HoverCard/CardCallout/CardCallout.tsx @@ -2,8 +2,9 @@ import * as React from 'react'; import { divProperties, getNativeProps } from '../../../Utilities'; import { DirectionalHint } from '../../../common/DirectionalHint'; -import { IBaseCardProps } from '../BaseCard.types'; -import { Callout, FocusTrapCallout, ICalloutProps } from '../../../Callout'; +import { Callout, FocusTrapCallout } from '../../../Callout'; +import type { IBaseCardProps } from '../BaseCard.types'; +import type { ICalloutProps } from '../../../Callout'; export interface ICardCalloutProps extends IBaseCardProps<{}, {}, {}> { finalHeight?: number; diff --git a/packages/react/src/components/HoverCard/ExpandingCard.base.tsx b/packages/react/src/components/HoverCard/ExpandingCard.base.tsx index 0ddb1a12f8bd82..b51d2ecf49832c 100644 --- a/packages/react/src/components/HoverCard/ExpandingCard.base.tsx +++ b/packages/react/src/components/HoverCard/ExpandingCard.base.tsx @@ -1,12 +1,8 @@ import * as React from 'react'; import { classNamesFunction, KeyCodes, Async, initializeComponentRef } from '../../Utilities'; -import { - ExpandingCardMode, - IExpandingCardProps, - IExpandingCardStyles, - IExpandingCardStyleProps, -} from './ExpandingCard.types'; +import { ExpandingCardMode } from './ExpandingCard.types'; import { CardCallout } from './CardCallout/CardCallout'; +import type { IExpandingCardProps, IExpandingCardStyles, IExpandingCardStyleProps } from './ExpandingCard.types'; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/components/HoverCard/ExpandingCard.styles.ts b/packages/react/src/components/HoverCard/ExpandingCard.styles.ts index 24a9628df9560a..0d1ed03c548e06 100644 --- a/packages/react/src/components/HoverCard/ExpandingCard.styles.ts +++ b/packages/react/src/components/HoverCard/ExpandingCard.styles.ts @@ -1,5 +1,5 @@ import { getGlobalClassNames, HighContrastSelector } from '../../Styling'; -import { IExpandingCardStyles, IExpandingCardStyleProps } from './ExpandingCard.types'; +import type { IExpandingCardStyles, IExpandingCardStyleProps } from './ExpandingCard.types'; const GlobalClassNames = { root: 'ms-ExpandingCard-root', diff --git a/packages/react/src/components/HoverCard/ExpandingCard.ts b/packages/react/src/components/HoverCard/ExpandingCard.ts index 43d991b0ed106b..6d0cd94c9ead56 100644 --- a/packages/react/src/components/HoverCard/ExpandingCard.ts +++ b/packages/react/src/components/HoverCard/ExpandingCard.ts @@ -1,8 +1,8 @@ import * as React from 'react'; import { styled } from '../../Utilities'; -import { IExpandingCardProps, IExpandingCardStyles, IExpandingCardStyleProps } from './ExpandingCard.types'; import { getStyles } from './ExpandingCard.styles'; import { ExpandingCardBase } from './ExpandingCard.base'; +import type { IExpandingCardProps, IExpandingCardStyles, IExpandingCardStyleProps } from './ExpandingCard.types'; export const ExpandingCard: React.FunctionComponent = styled< IExpandingCardProps, diff --git a/packages/react/src/components/HoverCard/ExpandingCard.types.ts b/packages/react/src/components/HoverCard/ExpandingCard.types.ts index 88b5b11eb09d92..a07264d654266e 100644 --- a/packages/react/src/components/HoverCard/ExpandingCard.types.ts +++ b/packages/react/src/components/HoverCard/ExpandingCard.types.ts @@ -1,6 +1,6 @@ -import { IBaseCardProps, IBaseCardStyles, IBaseCardStyleProps } from './BaseCard.types'; -import { IRenderFunction } from '../../Utilities'; -import { IStyle } from '../../Styling'; +import type { IBaseCardProps, IBaseCardStyles, IBaseCardStyleProps } from './BaseCard.types'; +import type { IRenderFunction } from '../../Utilities'; +import type { IStyle } from '../../Styling'; /** * {@docCategory HoverCard} diff --git a/packages/react/src/components/HoverCard/HoverCard.base.tsx b/packages/react/src/components/HoverCard/HoverCard.base.tsx index 9bfd74ca34ab5c..7f93ef0c5283ec 100644 --- a/packages/react/src/components/HoverCard/HoverCard.base.tsx +++ b/packages/react/src/components/HoverCard/HoverCard.base.tsx @@ -11,18 +11,13 @@ import { EventGroup, Async, } from '../../Utilities'; -import { - IHoverCardProps, - IHoverCardStyles, - IHoverCardStyleProps, - OpenCardMode, - HoverCardType, - IHoverCard, -} from './HoverCard.types'; +import { OpenCardMode, HoverCardType } from './HoverCard.types'; import { ExpandingCard } from './ExpandingCard'; -import { ExpandingCardMode, IExpandingCardProps } from './ExpandingCard.types'; +import { ExpandingCardMode } from './ExpandingCard.types'; import { PlainCard } from './PlainCard/PlainCard'; -import { IPlainCardProps } from './PlainCard/PlainCard.types'; +import type { IHoverCardProps, IHoverCardStyles, IHoverCardStyleProps, IHoverCard } from './HoverCard.types'; +import type { IExpandingCardProps } from './ExpandingCard.types'; +import type { IPlainCardProps } from './PlainCard/PlainCard.types'; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/components/HoverCard/HoverCard.styles.ts b/packages/react/src/components/HoverCard/HoverCard.styles.ts index be98a942305964..86a1276ea722d6 100644 --- a/packages/react/src/components/HoverCard/HoverCard.styles.ts +++ b/packages/react/src/components/HoverCard/HoverCard.styles.ts @@ -1,5 +1,5 @@ import { getGlobalClassNames } from '../../Styling'; -import { IHoverCardStyles, IHoverCardStyleProps } from './HoverCard.types'; +import type { IHoverCardStyles, IHoverCardStyleProps } from './HoverCard.types'; const GlobalClassNames = { host: 'ms-HoverCard-host', diff --git a/packages/react/src/components/HoverCard/HoverCard.test.tsx b/packages/react/src/components/HoverCard/HoverCard.test.tsx index dc66b578f9d445..b243dd596cbaac 100644 --- a/packages/react/src/components/HoverCard/HoverCard.test.tsx +++ b/packages/react/src/components/HoverCard/HoverCard.test.tsx @@ -4,15 +4,16 @@ import { mount } from 'enzyme'; import { DirectionalHint } from '../../common/DirectionalHint'; import { PlainCardBase } from './PlainCard/PlainCard.base'; -import { IPlainCardProps } from './PlainCard/PlainCard.types'; import { ExpandingCardBase } from './ExpandingCard.base'; -import { IExpandingCardProps } from './ExpandingCard.types'; import { HoverCard } from './HoverCard'; import { HoverCardBase } from './HoverCard.base'; -import { HoverCardType, IHoverCardProps } from './HoverCard.types'; +import { HoverCardType } from './HoverCard.types'; import { KeyCodes } from '../../Utilities'; import * as path from 'path'; import { isConformant } from '../../common/isConformant'; +import type { IPlainCardProps } from './PlainCard/PlainCard.types'; +import type { IExpandingCardProps } from './ExpandingCard.types'; +import type { IHoverCardProps } from './HoverCard.types'; const expandingCardProps: IExpandingCardProps = { onRenderCompactCard: (item: any) => { diff --git a/packages/react/src/components/HoverCard/HoverCard.ts b/packages/react/src/components/HoverCard/HoverCard.ts index 04d6af36623ba2..76c14079e55573 100644 --- a/packages/react/src/components/HoverCard/HoverCard.ts +++ b/packages/react/src/components/HoverCard/HoverCard.ts @@ -1,8 +1,8 @@ import * as React from 'react'; import { styled } from '../../Utilities'; -import { IHoverCardProps, IHoverCardStyles, IHoverCardStyleProps } from './HoverCard.types'; import { getStyles } from './HoverCard.styles'; import { HoverCardBase } from './HoverCard.base'; +import type { IHoverCardProps, IHoverCardStyles, IHoverCardStyleProps } from './HoverCard.types'; export const HoverCard: React.FunctionComponent = styled< IHoverCardProps, diff --git a/packages/react/src/components/HoverCard/HoverCard.types.ts b/packages/react/src/components/HoverCard/HoverCard.types.ts index 242e71b8a5980a..369428b87f4475 100644 --- a/packages/react/src/components/HoverCard/HoverCard.types.ts +++ b/packages/react/src/components/HoverCard/HoverCard.types.ts @@ -1,9 +1,9 @@ import * as React from 'react'; - -import { IExpandingCardProps } from './ExpandingCard.types'; -import { IStyle, ITheme } from '../../Styling'; -import { IRefObject, IStyleFunctionOrObject, KeyCodes } from '../../Utilities'; -import { IPlainCardProps } from './PlainCard/PlainCard.types'; +import { KeyCodes } from '../../Utilities'; +import type { IExpandingCardProps } from './ExpandingCard.types'; +import type { IStyle, ITheme } from '../../Styling'; +import type { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; +import type { IPlainCardProps } from './PlainCard/PlainCard.types'; /** * {@docCategory HoverCard} diff --git a/packages/react/src/components/HoverCard/PlainCard/PlainCard.base.tsx b/packages/react/src/components/HoverCard/PlainCard/PlainCard.base.tsx index 2b27e476ac5225..d45d7e4a40205e 100644 --- a/packages/react/src/components/HoverCard/PlainCard/PlainCard.base.tsx +++ b/packages/react/src/components/HoverCard/PlainCard/PlainCard.base.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { classNamesFunction, initializeComponentRef, KeyCodes } from '../../../Utilities'; -import { IPlainCardProps, IPlainCardStyles, IPlainCardStyleProps } from './PlainCard.types'; import { CardCallout } from '../CardCallout/CardCallout'; +import type { IPlainCardProps, IPlainCardStyles, IPlainCardStyleProps } from './PlainCard.types'; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/components/HoverCard/PlainCard/PlainCard.styles.ts b/packages/react/src/components/HoverCard/PlainCard/PlainCard.styles.ts index 2ea1c994bb17ca..c387d9504259b0 100644 --- a/packages/react/src/components/HoverCard/PlainCard/PlainCard.styles.ts +++ b/packages/react/src/components/HoverCard/PlainCard/PlainCard.styles.ts @@ -1,5 +1,5 @@ import { getGlobalClassNames, HighContrastSelector } from '../../../Styling'; -import { IPlainCardStyles, IPlainCardStyleProps } from './PlainCard.types'; +import type { IPlainCardStyles, IPlainCardStyleProps } from './PlainCard.types'; const GlobalClassNames = { root: 'ms-PlainCard-root', diff --git a/packages/react/src/components/HoverCard/PlainCard/PlainCard.ts b/packages/react/src/components/HoverCard/PlainCard/PlainCard.ts index a1901e93d38c30..0eeaa9ab9ed2eb 100644 --- a/packages/react/src/components/HoverCard/PlainCard/PlainCard.ts +++ b/packages/react/src/components/HoverCard/PlainCard/PlainCard.ts @@ -1,8 +1,8 @@ import * as React from 'react'; import { styled } from '../../../Utilities'; -import { IPlainCardProps, IPlainCardStyles, IPlainCardStyleProps } from './PlainCard.types'; import { getStyles } from './PlainCard.styles'; import { PlainCardBase } from './PlainCard.base'; +import type { IPlainCardProps, IPlainCardStyles, IPlainCardStyleProps } from './PlainCard.types'; export const PlainCard: React.FunctionComponent = styled< IPlainCardProps, diff --git a/packages/react/src/components/HoverCard/PlainCard/PlainCard.types.ts b/packages/react/src/components/HoverCard/PlainCard/PlainCard.types.ts index 3d30f29cb02066..77c170bb40639f 100644 --- a/packages/react/src/components/HoverCard/PlainCard/PlainCard.types.ts +++ b/packages/react/src/components/HoverCard/PlainCard/PlainCard.types.ts @@ -1,5 +1,5 @@ -import { IBaseCardProps, IBaseCardStyles, IBaseCardStyleProps } from '../BaseCard.types'; -import { IRenderFunction } from '../../../Utilities'; +import type { IBaseCardProps, IBaseCardStyles, IBaseCardStyleProps } from '../BaseCard.types'; +import type { IRenderFunction } from '../../../Utilities'; /** * {@docCategory HoverCard} diff --git a/packages/react/src/components/Icon/FontIcon.tsx b/packages/react/src/components/Icon/FontIcon.tsx index 8d0dc2732abacd..c469abb733bb79 100644 --- a/packages/react/src/components/Icon/FontIcon.tsx +++ b/packages/react/src/components/Icon/FontIcon.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; - -import { IFontIconProps } from './Icon.types'; import { classNames, MS_ICON } from './Icon.styles'; import { css, getNativeProps, htmlElementProperties, memoizeFunction } from '../../Utilities'; -import { getIcon, IIconRecord, IIconSubsetRecord } from '../../Styling'; +import { getIcon } from '../../Styling'; +import type { IFontIconProps } from './Icon.types'; +import type { IIconRecord, IIconSubsetRecord } from '../../Styling'; export interface IIconContent { children?: string | JSX.Element; diff --git a/packages/react/src/components/Icon/Icon.base.tsx b/packages/react/src/components/Icon/Icon.base.tsx index c1e9a85db37dbf..2010c045978299 100644 --- a/packages/react/src/components/Icon/Icon.base.tsx +++ b/packages/react/src/components/Icon/Icon.base.tsx @@ -1,10 +1,12 @@ import * as React from 'react'; -import { IIconProps, IconType, IIconStyleProps, IIconStyles } from './Icon.types'; +import { IconType } from './Icon.types'; import { Image } from '../Image/Image'; -import { ImageLoadState, IImageProps } from '../Image/Image.types'; +import { ImageLoadState } from '../Image/Image.types'; import { getNativeProps, htmlElementProperties, classNamesFunction } from '../../Utilities'; import { getIconContent } from './FontIcon'; +import type { IIconProps, IIconStyleProps, IIconStyles } from './Icon.types'; +import type { IImageProps } from '../Image/Image.types'; export interface IIconState { imageLoadError: boolean; diff --git a/packages/react/src/components/Icon/Icon.styles.ts b/packages/react/src/components/Icon/Icon.styles.ts index fd484825fb6a28..e24b4b0d19e4de 100644 --- a/packages/react/src/components/Icon/Icon.styles.ts +++ b/packages/react/src/components/Icon/Icon.styles.ts @@ -1,5 +1,5 @@ -import { IIconStyleProps, IIconStyles } from './Icon.types'; import { mergeStyleSets } from '../../Styling'; +import type { IIconStyleProps, IIconStyles } from './Icon.types'; /** Class names used in themeable and non-themeable Icon components */ export const classNames = mergeStyleSets({ diff --git a/packages/react/src/components/Icon/Icon.tsx b/packages/react/src/components/Icon/Icon.tsx index 9d5faea509d185..46008e972c6794 100644 --- a/packages/react/src/components/Icon/Icon.tsx +++ b/packages/react/src/components/Icon/Icon.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { styled } from '../../Utilities'; -import { IIconProps, IIconStyleProps, IIconStyles } from './Icon.types'; import { IconBase } from './Icon.base'; import { getStyles } from './Icon.styles'; +import type { IIconProps, IIconStyleProps, IIconStyles } from './Icon.types'; /** * Legacy Icon component which can be targeted by customization. It's recommended to use `FontIcon` diff --git a/packages/react/src/components/Icon/Icon.types.ts b/packages/react/src/components/Icon/Icon.types.ts index c9e3ecb7b43c16..c06b7133f2019d 100644 --- a/packages/react/src/components/Icon/Icon.types.ts +++ b/packages/react/src/components/Icon/Icon.types.ts @@ -1,7 +1,7 @@ import * as React from 'react'; -import { IImageProps } from '../Image/Image.types'; -import { IStyle, ITheme } from '../../Styling'; -import { IBaseProps, IStyleFunctionOrObject } from '../../Utilities'; +import type { IImageProps } from '../Image/Image.types'; +import type { IStyle, ITheme } from '../../Styling'; +import type { IBaseProps, IStyleFunctionOrObject } from '../../Utilities'; /** * @deprecated Icon type is inferred based on presence of `IIconProps.imageProps` diff --git a/packages/react/src/components/Icon/ImageIcon.tsx b/packages/react/src/components/Icon/ImageIcon.tsx index 6a34f4b03565c1..33d47a28ce0f8c 100644 --- a/packages/react/src/components/Icon/ImageIcon.tsx +++ b/packages/react/src/components/Icon/ImageIcon.tsx @@ -1,9 +1,8 @@ import * as React from 'react'; - -import { IImageIconProps } from './Icon.types'; import { Image } from '../Image/Image'; import { css, getNativeProps, htmlElementProperties } from '../../Utilities'; import { classNames, MS_ICON } from './Icon.styles'; +import type { IImageIconProps } from './Icon.types'; /** * Fast icon component which only supports images (not font glyphs) and can't be targeted by customizations. diff --git a/packages/react/src/components/Image/Image.base.tsx b/packages/react/src/components/Image/Image.base.tsx index e37046be60dcd1..5aedd68ef50754 100644 --- a/packages/react/src/components/Image/Image.base.tsx +++ b/packages/react/src/components/Image/Image.base.tsx @@ -1,7 +1,8 @@ import * as React from 'react'; import { classNamesFunction, getNativeProps, imgProperties } from '../../Utilities'; -import { IImageProps, IImageStyleProps, IImageStyles, ImageCoverStyle, ImageFit, ImageLoadState } from './Image.types'; +import { ImageCoverStyle, ImageFit, ImageLoadState } from './Image.types'; import { useMergedRefs } from '@fluentui/react-hooks'; +import type { IImageProps, IImageStyleProps, IImageStyles } from './Image.types'; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/components/Image/Image.styles.ts b/packages/react/src/components/Image/Image.styles.ts index 55af8d1448774c..5388e37dce4e57 100644 --- a/packages/react/src/components/Image/Image.styles.ts +++ b/packages/react/src/components/Image/Image.styles.ts @@ -1,6 +1,7 @@ -import { AnimationClassNames, getGlobalClassNames, IStyle } from '../../Styling'; -import { IImageStyleProps, IImageStyles } from './Image.types'; +import { AnimationClassNames, getGlobalClassNames } from '../../Styling'; import { getWindow } from '../../Utilities'; +import type { IStyle } from '../../Styling'; +import type { IImageStyleProps, IImageStyles } from './Image.types'; const GlobalClassNames = { root: 'ms-Image', diff --git a/packages/react/src/components/Image/Image.tsx b/packages/react/src/components/Image/Image.tsx index d26c5a6b748e9a..d738b79746b7ad 100644 --- a/packages/react/src/components/Image/Image.tsx +++ b/packages/react/src/components/Image/Image.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { styled } from '../../Utilities'; -import { IImageProps, IImageStyleProps, IImageStyles } from './Image.types'; import { ImageBase } from './Image.base'; import { getStyles } from './Image.styles'; +import type { IImageProps, IImageStyleProps, IImageStyles } from './Image.types'; export const Image: React.FunctionComponent = styled( ImageBase, diff --git a/packages/react/src/components/Image/Image.types.ts b/packages/react/src/components/Image/Image.types.ts index 49b05873101150..f909527cbe21ae 100644 --- a/packages/react/src/components/Image/Image.types.ts +++ b/packages/react/src/components/Image/Image.types.ts @@ -1,6 +1,6 @@ import * as React from 'react'; -import { IStyle, ITheme } from '../../Styling'; -import { IStyleFunctionOrObject } from '../../Utilities'; +import type { IStyle, ITheme } from '../../Styling'; +import type { IStyleFunctionOrObject } from '../../Utilities'; /** * {@docCategory Image} diff --git a/packages/react/src/components/Keytip/Keytip.styles.ts b/packages/react/src/components/Keytip/Keytip.styles.ts index efca89a4ee39c5..1fa198cb8d5912 100644 --- a/packages/react/src/components/Keytip/Keytip.styles.ts +++ b/packages/react/src/components/Keytip/Keytip.styles.ts @@ -1,7 +1,7 @@ -import { IKeytipStyleProps, IKeytipStyles } from './Keytip.types'; -import { ICalloutContentStyleProps, ICalloutContentStyles } from '../../Callout'; -import { IStyleFunction, Point } from '../../Utilities'; import { mergeStyleSets, HighContrastSelector } from '../../Styling'; +import type { IKeytipStyleProps, IKeytipStyles } from './Keytip.types'; +import type { ICalloutContentStyleProps, ICalloutContentStyles } from '../../Callout'; +import type { IStyleFunction, Point } from '../../Utilities'; export const getStyles = (props: IKeytipStyleProps): IKeytipStyles => { const { theme, disabled, visible } = props; diff --git a/packages/react/src/components/Keytip/Keytip.tsx b/packages/react/src/components/Keytip/Keytip.tsx index 990c876a9db980..1ab6348b66311d 100644 --- a/packages/react/src/components/Keytip/Keytip.tsx +++ b/packages/react/src/components/Keytip/Keytip.tsx @@ -2,9 +2,9 @@ import * as React from 'react'; import { mergeOverflows, ktpTargetFromSequences } from '../../utilities/keytips/KeytipUtils'; import { Callout } from '../../Callout'; import { DirectionalHint } from '../../ContextualMenu'; -import { IKeytipProps } from './Keytip.types'; import { KeytipContent } from './KeytipContent'; import { getCalloutStyles, getCalloutOffsetStyles } from './Keytip.styles'; +import type { IKeytipProps } from './Keytip.types'; /** * A callout corresponding to another Fabric component to describe a key sequence that will activate that component diff --git a/packages/react/src/components/Keytip/Keytip.types.ts b/packages/react/src/components/Keytip/Keytip.types.ts index 889c91d93d00a5..c57c2d245e8edb 100644 --- a/packages/react/src/components/Keytip/Keytip.types.ts +++ b/packages/react/src/components/Keytip/Keytip.types.ts @@ -1,6 +1,6 @@ -import { ICalloutProps } from '../../Callout'; -import { IStyle, ITheme } from '../../Styling'; -import { IStyleFunctionOrObject, Point } from '../../Utilities'; +import type { ICalloutProps } from '../../Callout'; +import type { IStyle, ITheme } from '../../Styling'; +import type { IStyleFunctionOrObject, Point } from '../../Utilities'; /** * {@docCategory Keytips} diff --git a/packages/react/src/components/Keytip/KeytipContent.base.tsx b/packages/react/src/components/Keytip/KeytipContent.base.tsx index 668f2b7a6c3c09..7111b3bd82a4cc 100644 --- a/packages/react/src/components/Keytip/KeytipContent.base.tsx +++ b/packages/react/src/components/Keytip/KeytipContent.base.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { classNamesFunction } from '../../Utilities'; -import { IKeytipProps, IKeytipStyleProps, IKeytipStyles } from './Keytip.types'; +import type { IKeytipProps, IKeytipStyleProps, IKeytipStyles } from './Keytip.types'; /** * A component corresponding the content rendered inside the callout of the keytip component. diff --git a/packages/react/src/components/Keytip/KeytipContent.tsx b/packages/react/src/components/Keytip/KeytipContent.tsx index 8f0d4917d88f50..9dd295582cf8a7 100644 --- a/packages/react/src/components/Keytip/KeytipContent.tsx +++ b/packages/react/src/components/Keytip/KeytipContent.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { styled } from '../../Utilities'; -import { IKeytipProps, IKeytipStyleProps, IKeytipStyles } from './Keytip.types'; import { KeytipContentBase } from './KeytipContent.base'; import { getStyles } from './Keytip.styles'; +import type { IKeytipProps, IKeytipStyleProps, IKeytipStyles } from './Keytip.types'; export const KeytipContent: React.FunctionComponent = styled< IKeytipProps, diff --git a/packages/react/src/components/KeytipData/KeytipData.tsx b/packages/react/src/components/KeytipData/KeytipData.tsx index 2b1480554a521c..3a9d0796a26539 100644 --- a/packages/react/src/components/KeytipData/KeytipData.tsx +++ b/packages/react/src/components/KeytipData/KeytipData.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import { IRenderComponent } from '../../Utilities'; import { DATAKTP_TARGET, DATAKTP_EXECUTE_TARGET } from '../../utilities/keytips/index'; -import { IKeytipDataProps } from './KeytipData.types'; import { useKeytipData } from './useKeytipData'; +import type { IRenderComponent } from '../../Utilities'; +import type { IKeytipDataProps } from './KeytipData.types'; /** * A small element to help the target component correctly read out its aria-describedby for its Keytip diff --git a/packages/react/src/components/KeytipData/KeytipData.types.ts b/packages/react/src/components/KeytipData/KeytipData.types.ts index ed38a47a718097..7eed58bef746c8 100644 --- a/packages/react/src/components/KeytipData/KeytipData.types.ts +++ b/packages/react/src/components/KeytipData/KeytipData.types.ts @@ -1,4 +1,4 @@ -import { IKeytipProps } from '../../Keytip'; +import type { IKeytipProps } from '../../Keytip'; export interface IKeytipDataProps { /** diff --git a/packages/react/src/components/KeytipData/useKeytipData.test.tsx b/packages/react/src/components/KeytipData/useKeytipData.test.tsx index c0ef5fc7893be6..09484a460a3eb1 100644 --- a/packages/react/src/components/KeytipData/useKeytipData.test.tsx +++ b/packages/react/src/components/KeytipData/useKeytipData.test.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { mount } from 'enzyme'; -import { KeytipDataOptions } from './KeytipData.types'; import { useKeytipData } from './useKeytipData'; import { KeytipManager } from '../../utilities/keytips/KeytipManager'; +import type { KeytipDataOptions } from './KeytipData.types'; describe('usePrevious', () => { let keytipManagerRegisterSpy: jest.SpyInstance; diff --git a/packages/react/src/components/KeytipData/useKeytipData.ts b/packages/react/src/components/KeytipData/useKeytipData.ts index 56022140f5c811..b273abb4c663fc 100644 --- a/packages/react/src/components/KeytipData/useKeytipData.ts +++ b/packages/react/src/components/KeytipData/useKeytipData.ts @@ -1,9 +1,9 @@ import * as React from 'react'; import { useConst, usePrevious } from '@fluentui/react-hooks'; import { mergeAriaAttributeValues } from '../../Utilities'; -import { KeytipDataOptions } from './KeytipData.types'; -import { IKeytipProps } from '../../Keytip'; import { KeytipManager, mergeOverflows, sequencesToID, getAriaDescribedBy } from '../../utilities/keytips/index'; +import type { KeytipDataOptions } from './KeytipData.types'; +import type { IKeytipProps } from '../../Keytip'; export interface IKeytipData { ariaDescribedBy: string | undefined; diff --git a/packages/react/src/components/KeytipData/useKeytipRef.ts b/packages/react/src/components/KeytipData/useKeytipRef.ts index eae947cc1157e0..8afa8b02dd962e 100644 --- a/packages/react/src/components/KeytipData/useKeytipRef.ts +++ b/packages/react/src/components/KeytipData/useKeytipRef.ts @@ -1,7 +1,7 @@ import * as React from 'react'; -import { KeytipDataOptions } from './KeytipData.types'; import { DATAKTP_TARGET, DATAKTP_EXECUTE_TARGET, DATAKTP_ARIA_TARGET } from '../../utilities/keytips/index'; import { useKeytipData } from './useKeytipData'; +import type { KeytipDataOptions } from './KeytipData.types'; /** * Hook that creates a ref which is used for passing to Keytip target element. diff --git a/packages/react/src/components/KeytipLayer/KeytipLayer.base.tsx b/packages/react/src/components/KeytipLayer/KeytipLayer.base.tsx index 92415510a3a744..0dec0dbf36e455 100644 --- a/packages/react/src/components/KeytipLayer/KeytipLayer.base.tsx +++ b/packages/react/src/components/KeytipLayer/KeytipLayer.base.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; -import { IKeytipLayerProps, IKeytipLayerStyles, IKeytipLayerStyleProps } from './KeytipLayer.types'; import { getLayerStyles } from './KeytipLayer.styles'; -import { Keytip, IKeytipProps } from '../../Keytip'; +import { Keytip } from '../../Keytip'; import { Layer } from '../../Layer'; import { classNamesFunction, @@ -16,19 +15,18 @@ import { } from '../../Utilities'; import { KeytipManager } from '../../utilities/keytips/KeytipManager'; import { KeytipTree } from './KeytipTree'; -import { IKeytipTreeNode } from './IKeytipTreeNode'; import { ktpTargetFromId, ktpTargetFromSequences, sequencesToID, mergeOverflows, } from '../../utilities/keytips/KeytipUtils'; -import { - transitionKeysContain, - KeytipTransitionModifier, - IKeytipTransitionKey, -} from '../../utilities/keytips/IKeytipTransitionKey'; +import { transitionKeysContain } from '../../utilities/keytips/IKeytipTransitionKey'; import { KeytipEvents, KTP_LAYER_ID, KTP_ARIA_SEPARATOR } from '../../utilities/keytips/KeytipConstants'; +import type { IKeytipLayerProps, IKeytipLayerStyles, IKeytipLayerStyleProps } from './KeytipLayer.types'; +import type { IKeytipProps } from '../../Keytip'; +import type { IKeytipTreeNode } from './IKeytipTreeNode'; +import type { KeytipTransitionModifier, IKeytipTransitionKey } from '../../utilities/keytips/IKeytipTransitionKey'; export interface IKeytipLayerState { inKeytipMode: boolean; diff --git a/packages/react/src/components/KeytipLayer/KeytipLayer.styles.ts b/packages/react/src/components/KeytipLayer/KeytipLayer.styles.ts index 4091e3ac837700..fe4409c836372f 100644 --- a/packages/react/src/components/KeytipLayer/KeytipLayer.styles.ts +++ b/packages/react/src/components/KeytipLayer/KeytipLayer.styles.ts @@ -1,6 +1,6 @@ -import { ILayerStyles, ILayerStyleProps } from '../../Layer'; -import { IKeytipLayerStyleProps, IKeytipLayerStyles } from './KeytipLayer.types'; import { ZIndexes } from '../../Styling'; +import type { ILayerStyles, ILayerStyleProps } from '../../Layer'; +import type { IKeytipLayerStyleProps, IKeytipLayerStyles } from './KeytipLayer.types'; export const getLayerStyles = (props: ILayerStyleProps): ILayerStyles => { return { diff --git a/packages/react/src/components/KeytipLayer/KeytipLayer.test.tsx b/packages/react/src/components/KeytipLayer/KeytipLayer.test.tsx index e72b6801e9c80d..791effbc2bd255 100644 --- a/packages/react/src/components/KeytipLayer/KeytipLayer.test.tsx +++ b/packages/react/src/components/KeytipLayer/KeytipLayer.test.tsx @@ -2,10 +2,10 @@ import * as React from 'react'; import { KeytipManager } from '../../utilities/keytips/KeytipManager'; import { mount, ReactWrapper } from 'enzyme'; import { KeytipLayerBase } from './KeytipLayer.base'; -import { IKeytipProps } from '../../Keytip'; import { find, KeyCodes } from '../../Utilities'; import { KeytipTree } from './KeytipTree'; import { KTP_FULL_PREFIX, KTP_SEPARATOR } from '../../utilities/keytips/KeytipConstants'; +import type { IKeytipProps } from '../../Keytip'; describe('KeytipLayer', () => { const ktpMgr = KeytipManager.getInstance(); diff --git a/packages/react/src/components/KeytipLayer/KeytipLayer.tsx b/packages/react/src/components/KeytipLayer/KeytipLayer.tsx index 802473472caa4f..efcad4e2291f56 100644 --- a/packages/react/src/components/KeytipLayer/KeytipLayer.tsx +++ b/packages/react/src/components/KeytipLayer/KeytipLayer.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { styled } from '../../Utilities'; -import { IKeytipLayerProps, IKeytipLayerStyleProps, IKeytipLayerStyles } from './KeytipLayer.types'; import { KeytipLayerBase } from './KeytipLayer.base'; import { getStyles } from './KeytipLayer.styles'; +import type { IKeytipLayerProps, IKeytipLayerStyleProps, IKeytipLayerStyles } from './KeytipLayer.types'; export const KeytipLayer: React.FunctionComponent = styled< IKeytipLayerProps, diff --git a/packages/react/src/components/KeytipLayer/KeytipLayer.types.ts b/packages/react/src/components/KeytipLayer/KeytipLayer.types.ts index 37f604b70116a4..fa0f98c9aaac7e 100644 --- a/packages/react/src/components/KeytipLayer/KeytipLayer.types.ts +++ b/packages/react/src/components/KeytipLayer/KeytipLayer.types.ts @@ -1,7 +1,7 @@ import * as React from 'react'; -import { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; -import { IStyle } from '../../Styling'; -import { IKeytipTransitionKey } from '../../utilities/keytips/IKeytipTransitionKey'; +import type { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; +import type { IStyle } from '../../Styling'; +import type { IKeytipTransitionKey } from '../../utilities/keytips/IKeytipTransitionKey'; /** * {@docCategory Keytips} diff --git a/packages/react/src/components/KeytipLayer/KeytipTree.test.tsx b/packages/react/src/components/KeytipLayer/KeytipTree.test.tsx index 045f940844606b..634575f4ada6ec 100644 --- a/packages/react/src/components/KeytipLayer/KeytipTree.test.tsx +++ b/packages/react/src/components/KeytipLayer/KeytipTree.test.tsx @@ -1,7 +1,7 @@ -import { IKeytipProps } from '../../Keytip'; import { KeytipTree } from './KeytipTree'; -import { IKeytipTreeNode } from './IKeytipTreeNode'; import { KTP_SEPARATOR, KTP_FULL_PREFIX, KTP_LAYER_ID } from '../../utilities/keytips/KeytipConstants'; +import type { IKeytipProps } from '../../Keytip'; +import type { IKeytipTreeNode } from './IKeytipTreeNode'; let keytipTree = new KeytipTree(); diff --git a/packages/react/src/components/KeytipLayer/KeytipTree.ts b/packages/react/src/components/KeytipLayer/KeytipTree.ts index 04b7ab5d6f66be..55571661f94b00 100644 --- a/packages/react/src/components/KeytipLayer/KeytipTree.ts +++ b/packages/react/src/components/KeytipLayer/KeytipTree.ts @@ -1,8 +1,8 @@ import { find, values } from '../../Utilities'; -import { IKeytipProps } from '../../Keytip'; -import { IKeytipTreeNode } from './IKeytipTreeNode'; import { mergeOverflows, sequencesToID } from '../../utilities/keytips/KeytipUtils'; import { KTP_LAYER_ID } from '../../utilities/keytips/KeytipConstants'; +import type { IKeytipProps } from '../../Keytip'; +import type { IKeytipTreeNode } from './IKeytipTreeNode'; /** * This class is responsible for handling the parent/child relationships between keytips diff --git a/packages/react/src/components/Label/Label.base.tsx b/packages/react/src/components/Label/Label.base.tsx index 6937bededc07bd..1f2a2d9bd07a76 100644 --- a/packages/react/src/components/Label/Label.base.tsx +++ b/packages/react/src/components/Label/Label.base.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { divProperties, getNativeProps } from '../../Utilities'; import { classNamesFunction } from '../../Utilities'; -import { ILabelProps, ILabelStyleProps, ILabelStyles } from './Label.types'; +import type { ILabelProps, ILabelStyleProps, ILabelStyles } from './Label.types'; const getClassNames = classNamesFunction({ // Label is used a lot by other components. diff --git a/packages/react/src/components/Label/Label.styles.ts b/packages/react/src/components/Label/Label.styles.ts index 80a9b83d744265..46e26bc719635f 100644 --- a/packages/react/src/components/Label/Label.styles.ts +++ b/packages/react/src/components/Label/Label.styles.ts @@ -1,5 +1,5 @@ import { HighContrastSelector, FontWeights, getHighContrastNoAdjustStyle } from '../../Styling'; -import { ILabelStyleProps, ILabelStyles } from './Label.types'; +import type { ILabelStyleProps, ILabelStyles } from './Label.types'; export const getStyles = (props: ILabelStyleProps): ILabelStyles => { const { theme, className, disabled, required } = props; diff --git a/packages/react/src/components/Label/Label.tsx b/packages/react/src/components/Label/Label.tsx index b2a0ce67bff7bc..df6ffa7be381ab 100644 --- a/packages/react/src/components/Label/Label.tsx +++ b/packages/react/src/components/Label/Label.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled } from '../../Utilities'; import { LabelBase } from './Label.base'; import { getStyles } from './Label.styles'; -import { ILabelProps, ILabelStyleProps, ILabelStyles } from './Label.types'; +import type { ILabelProps, ILabelStyleProps, ILabelStyles } from './Label.types'; export const Label: React.FunctionComponent = styled( LabelBase, diff --git a/packages/react/src/components/Label/Label.types.ts b/packages/react/src/components/Label/Label.types.ts index 99034e42bf0b52..3ec61c3adbac85 100644 --- a/packages/react/src/components/Label/Label.types.ts +++ b/packages/react/src/components/Label/Label.types.ts @@ -1,6 +1,6 @@ import * as React from 'react'; -import { ITheme, IStyle } from '../../Styling'; -import { IRefObject, IComponentAs, IStyleFunctionOrObject } from '../../Utilities'; +import type { ITheme, IStyle } from '../../Styling'; +import type { IRefObject, IComponentAs, IStyleFunctionOrObject } from '../../Utilities'; /** * {@docCategory Label} diff --git a/packages/react/src/components/Layer/Layer.base.tsx b/packages/react/src/components/Layer/Layer.base.tsx index 63cc506f02d02e..505330327dc972 100644 --- a/packages/react/src/components/Layer/Layer.base.tsx +++ b/packages/react/src/components/Layer/Layer.base.tsx @@ -1,11 +1,11 @@ import * as React from 'react'; import * as ReactDOM from 'react-dom'; import { Fabric } from '../../Fabric'; -import { ILayerProps, ILayerStyleProps, ILayerStyles } from './Layer.types'; import { classNamesFunction, setPortalAttribute, setVirtualParent } from '../../Utilities'; import { registerLayer, getDefaultTarget, unregisterLayer } from './Layer.notification'; import { useMergedRefs, useWarnings } from '@fluentui/react-hooks'; import { useDocument } from '../../WindowProvider'; +import type { ILayerProps, ILayerStyleProps, ILayerStyles } from './Layer.types'; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/components/Layer/Layer.styles.ts b/packages/react/src/components/Layer/Layer.styles.ts index e862d19b2260d4..8b80b45f436641 100644 --- a/packages/react/src/components/Layer/Layer.styles.ts +++ b/packages/react/src/components/Layer/Layer.styles.ts @@ -1,5 +1,5 @@ -import { ILayerStyleProps, ILayerStyles } from './Layer.types'; import { ZIndexes, getGlobalClassNames } from '../../Styling'; +import type { ILayerStyleProps, ILayerStyles } from './Layer.types'; const GlobalClassNames = { root: 'ms-Layer', diff --git a/packages/react/src/components/Layer/Layer.tsx b/packages/react/src/components/Layer/Layer.tsx index 33317082dbeaa8..1cc2ff27a2f406 100644 --- a/packages/react/src/components/Layer/Layer.tsx +++ b/packages/react/src/components/Layer/Layer.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { styled } from '../../Utilities'; -import { ILayerProps, ILayerStyleProps, ILayerStyles } from './Layer.types'; import { LayerBase } from './Layer.base'; import { getStyles } from './Layer.styles'; +import type { ILayerProps, ILayerStyleProps, ILayerStyles } from './Layer.types'; export const Layer: React.FunctionComponent = styled( LayerBase, diff --git a/packages/react/src/components/Layer/Layer.types.ts b/packages/react/src/components/Layer/Layer.types.ts index 0bc3a7e090b943..daee3f207d69a6 100644 --- a/packages/react/src/components/Layer/Layer.types.ts +++ b/packages/react/src/components/Layer/Layer.types.ts @@ -1,6 +1,6 @@ import * as React from 'react'; -import { IStyle, ITheme } from '../../Styling'; -import { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; +import type { IStyle, ITheme } from '../../Styling'; +import type { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; /** * {@docCategory Layer} diff --git a/packages/react/src/components/Layer/LayerHost.tsx b/packages/react/src/components/Layer/LayerHost.tsx index de941feb619310..87ed3237cd8854 100644 --- a/packages/react/src/components/Layer/LayerHost.tsx +++ b/packages/react/src/components/Layer/LayerHost.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { css } from '../../Utilities'; -import { ILayerHostProps } from './LayerHost.types'; import { notifyHostChanged } from './Layer.notification'; +import type { ILayerHostProps } from './LayerHost.types'; export const LayerHost: React.FunctionComponent = props => { const { id, className } = props; diff --git a/packages/react/src/components/Layer/LayerHost.types.ts b/packages/react/src/components/Layer/LayerHost.types.ts index 9fdf3f64da5019..b0821ebb2bf5c2 100644 --- a/packages/react/src/components/Layer/LayerHost.types.ts +++ b/packages/react/src/components/Layer/LayerHost.types.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { IRefObject } from '../../Utilities'; +import type { IRefObject } from '../../Utilities'; export interface ILayerHost {} diff --git a/packages/react/src/components/Link/Link.base.tsx b/packages/react/src/components/Link/Link.base.tsx index f0fbd285719942..6fee4081b95390 100644 --- a/packages/react/src/components/Link/Link.base.tsx +++ b/packages/react/src/components/Link/Link.base.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { ILinkProps } from './Link.types'; import { useLink } from './useLink'; +import type { ILinkProps } from './Link.types'; export const LinkBase: React.FunctionComponent = React.forwardRef((props, ref) => { const { slots, slotProps } = useLink(props, ref); diff --git a/packages/react/src/components/Link/Link.styles.ts b/packages/react/src/components/Link/Link.styles.ts index 00b32c49df6b63..baad4cb5a088db 100644 --- a/packages/react/src/components/Link/Link.styles.ts +++ b/packages/react/src/components/Link/Link.styles.ts @@ -1,5 +1,5 @@ import { getGlobalClassNames, HighContrastSelector } from '@fluentui/style-utilities'; -import { ILinkStyleProps, ILinkStyles } from './Link.types'; +import type { ILinkStyleProps, ILinkStyles } from './Link.types'; const GlobalClassNames = { root: 'ms-Link', diff --git a/packages/react/src/components/Link/Link.tsx b/packages/react/src/components/Link/Link.tsx index c126389de8324a..cf61b041adaf57 100644 --- a/packages/react/src/components/Link/Link.tsx +++ b/packages/react/src/components/Link/Link.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { styled } from '@fluentui/utilities'; import { LinkBase } from './Link.base'; -import { ILinkProps, ILinkStyleProps, ILinkStyles } from './Link.types'; import { getStyles } from './Link.styles'; +import type { ILinkProps, ILinkStyleProps, ILinkStyles } from './Link.types'; export const Link: React.FunctionComponent = styled( LinkBase, diff --git a/packages/react/src/components/Link/Link.types.ts b/packages/react/src/components/Link/Link.types.ts index 7cc24f33e0f679..ea0c7e0ad96554 100644 --- a/packages/react/src/components/Link/Link.types.ts +++ b/packages/react/src/components/Link/Link.types.ts @@ -1,6 +1,6 @@ import * as React from 'react'; -import { IStyle, ITheme } from '@fluentui/style-utilities'; -import { IRefObject, IStyleFunctionOrObject } from '@fluentui/utilities'; +import type { IStyle, ITheme } from '@fluentui/style-utilities'; +import type { IRefObject, IStyleFunctionOrObject } from '@fluentui/utilities'; /** * {@docCategory Link} diff --git a/packages/react/src/components/Link/useLink.ts b/packages/react/src/components/Link/useLink.ts index 4806cbc8ba2e72..2ee56741084f79 100644 --- a/packages/react/src/components/Link/useLink.ts +++ b/packages/react/src/components/Link/useLink.ts @@ -1,7 +1,7 @@ import * as React from 'react'; import { useMergedRefs } from '@fluentui/react-hooks'; import { classNamesFunction, useFocusRects } from '@fluentui/utilities'; -import { ILink, ILinkProps, ILinkStyleProps, ILinkStyles } from './Link.types'; +import type { ILink, ILinkProps, ILinkStyleProps, ILinkStyles } from './Link.types'; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/components/List/List.test.tsx b/packages/react/src/components/List/List.test.tsx index cfb5c451e366d5..6f601295f7ff61 100644 --- a/packages/react/src/components/List/List.test.tsx +++ b/packages/react/src/components/List/List.test.tsx @@ -3,8 +3,8 @@ import * as renderer from 'react-test-renderer'; import { mount } from 'enzyme'; import { List } from './List'; -import { IPage, IListProps } from './List.types'; import { isConformant } from '../../common/isConformant'; +import type { IPage, IListProps } from './List.types'; type IMockItem = { key: number; name: string; value: number }; diff --git a/packages/react/src/components/List/List.tsx b/packages/react/src/components/List/List.tsx index a066b1032cab4b..ee20d05773bfe2 100644 --- a/packages/react/src/components/List/List.tsx +++ b/packages/react/src/components/List/List.tsx @@ -2,8 +2,6 @@ import * as React from 'react'; import { Async, EventGroup, - IRectangle, - IRenderFunction, css, divProperties, findIndex, @@ -13,16 +11,17 @@ import { getWindow, initializeComponentRef, } from '../../Utilities'; -import { +import { ScrollToMode } from './List.types'; +import { composeRenderFunction } from '../../Utilities'; +import type { IRectangle, IRenderFunction } from '../../Utilities'; +import type { IList, IListProps, IPage, IPageProps, - ScrollToMode, IListOnRenderSurfaceProps, IListOnRenderRootProps, } from './List.types'; -import { composeRenderFunction } from '../../Utilities'; const RESIZE_DELAY = 16; const MIN_SCROLL_UPDATE_DELAY = 100; diff --git a/packages/react/src/components/List/List.types.ts b/packages/react/src/components/List/List.types.ts index 8a78554941354d..8af810f754ca25 100644 --- a/packages/react/src/components/List/List.types.ts +++ b/packages/react/src/components/List/List.types.ts @@ -1,6 +1,6 @@ import * as React from 'react'; -import { IRefObject, IRectangle, IRenderFunction } from '../../Utilities'; import { List } from './List'; +import type { IRefObject, IRectangle, IRenderFunction } from '../../Utilities'; /** * {@docCategory List} diff --git a/packages/react/src/components/MarqueeSelection/MarqueeSelection.base.tsx b/packages/react/src/components/MarqueeSelection/MarqueeSelection.base.tsx index 8510c47a2ae1cc..79de834f3dedd8 100644 --- a/packages/react/src/components/MarqueeSelection/MarqueeSelection.base.tsx +++ b/packages/react/src/components/MarqueeSelection/MarqueeSelection.base.tsx @@ -4,17 +4,18 @@ import { Async, EventGroup, AutoScroll, - Point, - IRectangle, classNamesFunction, findScrollableParent, getDistanceBetweenPoints, getRTL, initializeComponentRef, } from '../../Utilities'; - -import { IMarqueeSelectionProps, IMarqueeSelectionStyleProps, IMarqueeSelectionStyles } from './MarqueeSelection.types'; -import {} from '@fluentui/utilities'; +import type { Point, IRectangle } from '../../Utilities'; +import type { + IMarqueeSelectionProps, + IMarqueeSelectionStyleProps, + IMarqueeSelectionStyles, +} from './MarqueeSelection.types'; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/components/MarqueeSelection/MarqueeSelection.styles.tsx b/packages/react/src/components/MarqueeSelection/MarqueeSelection.styles.tsx index ef27236feaed66..c5fda78fb9c93c 100644 --- a/packages/react/src/components/MarqueeSelection/MarqueeSelection.styles.tsx +++ b/packages/react/src/components/MarqueeSelection/MarqueeSelection.styles.tsx @@ -1,5 +1,5 @@ -import { IMarqueeSelectionStyleProps, IMarqueeSelectionStyles } from './MarqueeSelection.types'; import { HighContrastSelector } from '../../Styling'; +import type { IMarqueeSelectionStyleProps, IMarqueeSelectionStyles } from './MarqueeSelection.types'; export const getStyles = (props: IMarqueeSelectionStyleProps): IMarqueeSelectionStyles => { const { theme, className } = props; diff --git a/packages/react/src/components/MarqueeSelection/MarqueeSelection.tsx b/packages/react/src/components/MarqueeSelection/MarqueeSelection.tsx index 85201570cfd613..ba2a76fbfb2b9a 100644 --- a/packages/react/src/components/MarqueeSelection/MarqueeSelection.tsx +++ b/packages/react/src/components/MarqueeSelection/MarqueeSelection.tsx @@ -2,7 +2,11 @@ import * as React from 'react'; import { styled } from '../../Utilities'; import { MarqueeSelectionBase } from './MarqueeSelection.base'; import { getStyles } from './MarqueeSelection.styles'; -import { IMarqueeSelectionProps, IMarqueeSelectionStyleProps, IMarqueeSelectionStyles } from './MarqueeSelection.types'; +import type { + IMarqueeSelectionProps, + IMarqueeSelectionStyleProps, + IMarqueeSelectionStyles, +} from './MarqueeSelection.types'; export const MarqueeSelection: React.FunctionComponent = // TODO: MarqueeSelectionBase defaultProps are not lining up with IMarqueeSelectionProps, so we have to be explicit diff --git a/packages/react/src/components/MarqueeSelection/MarqueeSelection.types.ts b/packages/react/src/components/MarqueeSelection/MarqueeSelection.types.ts index a87d8006777968..d9a2b30290d0fe 100644 --- a/packages/react/src/components/MarqueeSelection/MarqueeSelection.types.ts +++ b/packages/react/src/components/MarqueeSelection/MarqueeSelection.types.ts @@ -1,7 +1,7 @@ import * as React from 'react'; -import { ISelection } from '../../utilities/selection/interfaces'; -import { ITheme, IStyle } from '../../Styling'; -import { IRefObject, IStyleFunction } from '../../Utilities'; +import type { ISelection } from '../../utilities/selection/interfaces'; +import type { ITheme, IStyle } from '../../Styling'; +import type { IRefObject, IStyleFunction } from '../../Utilities'; /** * {@docCategory MarqueeSelection} diff --git a/packages/react/src/components/MessageBar/MessageBar.base.tsx b/packages/react/src/components/MessageBar/MessageBar.base.tsx index c281b67ff57ee3..583c6977d7c52f 100644 --- a/packages/react/src/components/MessageBar/MessageBar.base.tsx +++ b/packages/react/src/components/MessageBar/MessageBar.base.tsx @@ -2,8 +2,9 @@ import * as React from 'react'; import { DelayedRender, classNamesFunction, getNativeProps, htmlElementProperties, css } from '../../Utilities'; import { IconButton } from '../../Button'; import { Icon } from '../../Icon'; -import { IMessageBarProps, IMessageBarStyleProps, IMessageBarStyles, MessageBarType } from './MessageBar.types'; +import { MessageBarType } from './MessageBar.types'; import { useId, useBoolean } from '@fluentui/react-hooks'; +import type { IMessageBarProps, IMessageBarStyleProps, IMessageBarStyles } from './MessageBar.types'; const ICON_MAP = { [MessageBarType.info]: 'Info', diff --git a/packages/react/src/components/MessageBar/MessageBar.styles.ts b/packages/react/src/components/MessageBar/MessageBar.styles.ts index 70dbe99fc570d3..6dea760e184e2c 100644 --- a/packages/react/src/components/MessageBar/MessageBar.styles.ts +++ b/packages/react/src/components/MessageBar/MessageBar.styles.ts @@ -1,6 +1,4 @@ import { - IStyle, - ISemanticColors, HighContrastSelector, ScreenWidthMaxSmall, getScreenSelector, @@ -9,7 +7,9 @@ import { IconFontSizes, getHighContrastNoAdjustStyle, } from '../../Styling'; -import { IMessageBarStyleProps, IMessageBarStyles, MessageBarType } from './MessageBar.types'; +import { MessageBarType } from './MessageBar.types'; +import type { IStyle, ISemanticColors } from '../../Styling'; +import type { IMessageBarStyleProps, IMessageBarStyles } from './MessageBar.types'; const GlobalClassNames = { root: 'ms-MessageBar', diff --git a/packages/react/src/components/MessageBar/MessageBar.tsx b/packages/react/src/components/MessageBar/MessageBar.tsx index 73157a76eb8638..a3064711a7d25a 100644 --- a/packages/react/src/components/MessageBar/MessageBar.tsx +++ b/packages/react/src/components/MessageBar/MessageBar.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled } from '../../Utilities'; import { MessageBarBase } from './MessageBar.base'; import { getStyles } from './MessageBar.styles'; -import { IMessageBarProps, IMessageBarStyleProps, IMessageBarStyles } from './MessageBar.types'; +import type { IMessageBarProps, IMessageBarStyleProps, IMessageBarStyles } from './MessageBar.types'; export const MessageBar: React.FunctionComponent = styled< IMessageBarProps, diff --git a/packages/react/src/components/MessageBar/MessageBar.types.ts b/packages/react/src/components/MessageBar/MessageBar.types.ts index c7e4fab2095b22..3f00d47b16f482 100644 --- a/packages/react/src/components/MessageBar/MessageBar.types.ts +++ b/packages/react/src/components/MessageBar/MessageBar.types.ts @@ -1,8 +1,8 @@ import * as React from 'react'; import { BaseButton, Button } from '../../Button'; -import { ITheme, IStyle } from '../../Styling'; -import { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; -import { IIconProps } from '../../Icon'; +import type { ITheme, IStyle } from '../../Styling'; +import type { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; +import type { IIconProps } from '../../Icon'; /** * {@docCategory MessageBar} diff --git a/packages/react/src/components/Modal/Modal.base.tsx b/packages/react/src/components/Modal/Modal.base.tsx index 9c428368efdf4d..daa5322a415935 100644 --- a/packages/react/src/components/Modal/Modal.base.tsx +++ b/packages/react/src/components/Modal/Modal.base.tsx @@ -8,16 +8,15 @@ import { elementContains, EventGroup, } from '../../Utilities'; -import { FocusTrapZone, IFocusTrapZone } from '../../FocusTrapZone'; +import { FocusTrapZone } from '../../FocusTrapZone'; import { animationDuration } from './Modal.styles'; -import { IDragOptions, IModalProps, IModalStyleProps, IModalStyles } from './Modal.types'; import { Overlay } from '../../Overlay'; -import { ILayerProps, Layer } from '../../Layer'; +import { Layer } from '../../Layer'; import { Popup } from '../../Popup'; import { ResponsiveMode, useResponsiveMode } from '../../ResponsiveMode'; import { DirectionalHint } from '../../common/DirectionalHint'; import { Icon } from '../../Icon'; -import { DraggableZone, ICoordinates, IDragData } from '../../utilities/DraggableZone/index'; +import { DraggableZone } from '../../utilities/DraggableZone/index'; import { useWindow } from '@fluentui/react-window-provider'; import { useBoolean, @@ -28,6 +27,10 @@ import { useId, useUnmount, } from '@fluentui/react-hooks'; +import type { IFocusTrapZone } from '../../FocusTrapZone'; +import type { IDragOptions, IModalProps, IModalStyleProps, IModalStyles } from './Modal.types'; +import type { ILayerProps } from '../../Layer'; +import type { ICoordinates, IDragData } from '../../utilities/DraggableZone/index'; // @TODO - need to change this to a panel whenever the breakpoint is under medium (verify the spec) diff --git a/packages/react/src/components/Modal/Modal.styles.ts b/packages/react/src/components/Modal/Modal.styles.ts index 79357bf9dd50c6..7439d0de9fb57d 100644 --- a/packages/react/src/components/Modal/Modal.styles.ts +++ b/packages/react/src/components/Modal/Modal.styles.ts @@ -1,5 +1,5 @@ -import { IModalStyleProps, IModalStyles } from './Modal.types'; import { AnimationVariables, getGlobalClassNames, ZIndexes } from '../../Styling'; +import type { IModalStyleProps, IModalStyles } from './Modal.types'; export const animationDuration = AnimationVariables.durationValue2; diff --git a/packages/react/src/components/Modal/Modal.ts b/packages/react/src/components/Modal/Modal.ts index b36769cc333629..b68e3ac873c8a4 100644 --- a/packages/react/src/components/Modal/Modal.ts +++ b/packages/react/src/components/Modal/Modal.ts @@ -1,8 +1,8 @@ import * as React from 'react'; import { styled } from '../../Utilities'; -import { IModalProps, IModalStyleProps, IModalStyles } from './Modal.types'; import { ModalBase } from './Modal.base'; import { getStyles } from './Modal.styles'; +import type { IModalProps, IModalStyleProps, IModalStyles } from './Modal.types'; export const Modal: React.FunctionComponent = styled( ModalBase, diff --git a/packages/react/src/components/Modal/Modal.types.ts b/packages/react/src/components/Modal/Modal.types.ts index afcbaded10f143..5778da3f50916a 100644 --- a/packages/react/src/components/Modal/Modal.types.ts +++ b/packages/react/src/components/Modal/Modal.types.ts @@ -1,12 +1,12 @@ import * as React from 'react'; -import { IStyle, ITheme } from '../../Styling'; -import { ILayerProps } from '../../Layer'; -import { IAccessiblePopupProps } from '../../common/IAccessiblePopupProps'; -import { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; -import { IIconProps } from '../../Icon'; -import { IContextualMenuProps } from '../../ContextualMenu'; -import { IOverlayProps } from '../../Overlay'; import { ResponsiveMode } from '../../ResponsiveMode'; +import type { IStyle, ITheme } from '../../Styling'; +import type { ILayerProps } from '../../Layer'; +import type { IAccessiblePopupProps } from '../../common/IAccessiblePopupProps'; +import type { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; +import type { IIconProps } from '../../Icon'; +import type { IContextualMenuProps } from '../../ContextualMenu'; +import type { IOverlayProps } from '../../Overlay'; export interface IDragOptions { /** diff --git a/packages/react/src/components/Modal/index.ts b/packages/react/src/components/Modal/index.ts index bdb5e7ce9ed6e3..61ed87b4a74ff1 100644 --- a/packages/react/src/components/Modal/index.ts +++ b/packages/react/src/components/Modal/index.ts @@ -1,4 +1,4 @@ export * from './Modal'; export * from './Modal.base'; export * from './Modal.types'; -export { IAccessiblePopupProps } from '../../common/IAccessiblePopupProps'; +export type { IAccessiblePopupProps } from '../../common/IAccessiblePopupProps'; diff --git a/packages/react/src/components/Nav/Nav.base.tsx b/packages/react/src/components/Nav/Nav.base.tsx index 9ba625081a780f..0088a4c3d64216 100644 --- a/packages/react/src/components/Nav/Nav.base.tsx +++ b/packages/react/src/components/Nav/Nav.base.tsx @@ -2,9 +2,11 @@ import * as React from 'react'; import { ActionButton } from '../../Button'; import { buttonStyles } from './Nav.styles'; import { classNamesFunction, divProperties, getNativeProps, getWindow, initializeComponentRef } from '../../Utilities'; -import { FocusZone, FocusZoneDirection, IFocusZone } from '../../FocusZone'; +import { FocusZone, FocusZoneDirection } from '../../FocusZone'; import { Icon } from '../../Icon'; -import { +import { composeComponentAs, composeRenderFunction } from '@fluentui/utilities'; +import type { IFocusZone } from '../../FocusZone'; +import type { INav, INavLink, INavLinkGroup, @@ -13,7 +15,6 @@ import { INavStyles, IRenderGroupHeaderProps, } from './Nav.types'; -import { composeComponentAs, composeRenderFunction } from '@fluentui/utilities'; // The number pixels per indentation level for Nav links. const _indentationSize = 14; diff --git a/packages/react/src/components/Nav/Nav.styles.ts b/packages/react/src/components/Nav/Nav.styles.ts index b89ce105b7def0..e9266d4bcdfc09 100644 --- a/packages/react/src/components/Nav/Nav.styles.ts +++ b/packages/react/src/components/Nav/Nav.styles.ts @@ -1,5 +1,3 @@ -import { INavStyleProps, INavStyles } from './Nav.types'; -import { IButtonStyles } from '../../Button'; import { AnimationClassNames, getFocusStyle, @@ -8,6 +6,8 @@ import { HighContrastSelector, FontWeights, } from '../../Styling'; +import type { INavStyleProps, INavStyles } from './Nav.types'; +import type { IButtonStyles } from '../../Button'; const GlobalClassNames = { root: 'ms-Nav', diff --git a/packages/react/src/components/Nav/Nav.test.tsx b/packages/react/src/components/Nav/Nav.test.tsx index fabc3f18802c82..e71fd9e643afda 100644 --- a/packages/react/src/components/Nav/Nav.test.tsx +++ b/packages/react/src/components/Nav/Nav.test.tsx @@ -5,9 +5,9 @@ import * as renderer from 'react-test-renderer'; import { Nav } from './Nav'; import { NavBase } from './Nav.base'; -import { INavLink, IRenderGroupHeaderProps, INavLinkGroup, INavButtonProps } from './Nav.types'; -import { IRenderFunction, IComponentAsProps } from '@fluentui/utilities'; import { isConformant } from '../../common/isConformant'; +import type { INavLink, IRenderGroupHeaderProps, INavLinkGroup, INavButtonProps } from './Nav.types'; +import type { IRenderFunction, IComponentAsProps } from '@fluentui/utilities'; const linkOne: INavLink = { key: 'Bing', diff --git a/packages/react/src/components/Nav/Nav.tsx b/packages/react/src/components/Nav/Nav.tsx index 65922adc1a2324..4c6376f2f6f504 100644 --- a/packages/react/src/components/Nav/Nav.tsx +++ b/packages/react/src/components/Nav/Nav.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { styled } from '../../Utilities'; -import { INavProps, INavStyleProps, INavStyles } from './Nav.types'; import { NavBase } from './Nav.base'; import { getStyles } from './Nav.styles'; +import type { INavProps, INavStyleProps, INavStyles } from './Nav.types'; export const Nav: React.FunctionComponent = styled( NavBase, diff --git a/packages/react/src/components/Nav/Nav.types.ts b/packages/react/src/components/Nav/Nav.types.ts index 102e57e367ea1d..e3ad58a443a762 100644 --- a/packages/react/src/components/Nav/Nav.types.ts +++ b/packages/react/src/components/Nav/Nav.types.ts @@ -1,8 +1,8 @@ import * as React from 'react'; -import { IStyle, ITheme } from '../../Styling'; -import { IRefObject, IRenderFunction, IStyleFunctionOrObject, IComponentAs } from '../../Utilities'; -import { IIconProps } from '../Icon/Icon.types'; -import { IButtonProps } from '../../Button'; +import type { IStyle, ITheme } from '../../Styling'; +import type { IRefObject, IRenderFunction, IStyleFunctionOrObject, IComponentAs } from '../../Utilities'; +import type { IIconProps } from '../Icon/Icon.types'; +import type { IButtonProps } from '../../Button'; /** * {@doccategory Nav} diff --git a/packages/react/src/components/OverflowSet/OverflowButton.tsx b/packages/react/src/components/OverflowSet/OverflowButton.tsx index 8b67b8be0fa4dc..dcc900f0ba7f3e 100644 --- a/packages/react/src/components/OverflowSet/OverflowButton.tsx +++ b/packages/react/src/components/OverflowSet/OverflowButton.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { KeytipManager } from '../../utilities/keytips/KeytipManager'; -import { IKeytipProps } from '../../Keytip'; -import { IOverflowSetItemProps, IOverflowSetProps } from './OverflowSet.types'; import { useConst, usePrevious } from '@fluentui/react-hooks'; +import type { IKeytipProps } from '../../Keytip'; +import type { IOverflowSetItemProps, IOverflowSetProps } from './OverflowSet.types'; const registerPersistedKeytips = ( keytipsToRegister: IKeytipProps[], diff --git a/packages/react/src/components/OverflowSet/OverflowSet.base.tsx b/packages/react/src/components/OverflowSet/OverflowSet.base.tsx index 53bb291257afa6..89f76d717fdb36 100644 --- a/packages/react/src/components/OverflowSet/OverflowSet.base.tsx +++ b/packages/react/src/components/OverflowSet/OverflowSet.base.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; import { useMergedRefs } from '@fluentui/react-hooks'; -import { IProcessedStyleSet } from '../../Styling'; -import { IOverflowSetProps, IOverflowSetStyles, IOverflowSetStyleProps, IOverflowSet } from './OverflowSet.types'; import { classNamesFunction, divProperties, elementContains, getNativeProps, focusFirstChild } from '../../Utilities'; import { OverflowButton } from './OverflowButton'; +import type { IProcessedStyleSet } from '../../Styling'; +import type { IOverflowSetProps, IOverflowSetStyles, IOverflowSetStyleProps, IOverflowSet } from './OverflowSet.types'; const getClassNames = classNamesFunction(); const COMPONENT_NAME = 'OverflowSet'; diff --git a/packages/react/src/components/OverflowSet/OverflowSet.styles.ts b/packages/react/src/components/OverflowSet/OverflowSet.styles.ts index 0fe20343dc7751..33c31e6748f596 100644 --- a/packages/react/src/components/OverflowSet/OverflowSet.styles.ts +++ b/packages/react/src/components/OverflowSet/OverflowSet.styles.ts @@ -1,6 +1,6 @@ -import { IOverflowSetStyles, IOverflowSetStyleProps } from './OverflowSet.types'; -import { IStyleFunction } from '../../Utilities'; -import { IStyle } from '../../Styling'; +import type { IOverflowSetStyles, IOverflowSetStyleProps } from './OverflowSet.types'; +import type { IStyleFunction } from '../../Utilities'; +import type { IStyle } from '../../Styling'; const overflowItemStyle: IStyle = { flexShrink: 0, diff --git a/packages/react/src/components/OverflowSet/OverflowSet.test.tsx b/packages/react/src/components/OverflowSet/OverflowSet.test.tsx index 5e4c77ecf8971a..58720fbef2f1f6 100644 --- a/packages/react/src/components/OverflowSet/OverflowSet.test.tsx +++ b/packages/react/src/components/OverflowSet/OverflowSet.test.tsx @@ -4,14 +4,14 @@ import * as React from 'react'; import { create } from '@fluentui/utilities/lib/test'; import * as ReactTestUtils from 'react-dom/test-utils'; import { CommandBarButton } from '../../Button'; -import { IKeytipProps } from '../../Keytip'; import { KeytipLayer, KeytipLayerBase } from '../../KeytipLayer'; import { arraysEqual, find } from '../../Utilities'; -import { IUniqueKeytip, KeytipManager, ktpTargetFromId } from '../../Keytips'; +import { KeytipManager, ktpTargetFromId } from '../../Keytips'; import { OverflowSet } from './OverflowSet'; -import { IOverflowSetItemProps } from './OverflowSet.types'; import * as path from 'path'; import { isConformant } from '../../common/isConformant'; +import type { IKeytipProps, IUniqueKeytip } from '../../Keytips'; +import type { IOverflowSetItemProps } from './OverflowSet.types'; function getKeytip(keytipManager: KeytipManager, keySequences: string[]): IKeytipProps | undefined { const ktp = find( diff --git a/packages/react/src/components/OverflowSet/OverflowSet.ts b/packages/react/src/components/OverflowSet/OverflowSet.ts index c7cd7a73ca6349..50202bc1120896 100644 --- a/packages/react/src/components/OverflowSet/OverflowSet.ts +++ b/packages/react/src/components/OverflowSet/OverflowSet.ts @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled } from '../../Utilities'; import { OverflowSetBase } from './OverflowSet.base'; import { getStyles } from './OverflowSet.styles'; -import { IOverflowSetProps } from './OverflowSet.types'; +import type { IOverflowSetProps } from './OverflowSet.types'; export const OverflowSet: React.FunctionComponent = styled(OverflowSetBase, getStyles, undefined, { scope: 'OverflowSet', diff --git a/packages/react/src/components/OverflowSet/OverflowSet.types.ts b/packages/react/src/components/OverflowSet/OverflowSet.types.ts index 12a944cae25058..ea0b76eb5dab30 100644 --- a/packages/react/src/components/OverflowSet/OverflowSet.types.ts +++ b/packages/react/src/components/OverflowSet/OverflowSet.types.ts @@ -1,7 +1,7 @@ import * as React from 'react'; -import { IKeytipProps } from '../../Keytip'; -import { IStyle } from '../../Styling'; -import { IRefObject, IRenderFunction, IStyleFunctionOrObject } from '../../Utilities'; +import type { IKeytipProps } from '../../Keytip'; +import type { IStyle } from '../../Styling'; +import type { IRefObject, IRenderFunction, IStyleFunctionOrObject } from '../../Utilities'; /** * {@docCategory OverflowSet} diff --git a/packages/react/src/components/Overlay/Overlay.base.tsx b/packages/react/src/components/Overlay/Overlay.base.tsx index 0b952262cfde6b..d188efe8387af9 100644 --- a/packages/react/src/components/Overlay/Overlay.base.tsx +++ b/packages/react/src/components/Overlay/Overlay.base.tsx @@ -7,7 +7,7 @@ import { disableBodyScroll, initializeComponentRef, } from '../../Utilities'; -import { IOverlayProps, IOverlayStyleProps, IOverlayStyles } from './Overlay.types'; +import type { IOverlayProps, IOverlayStyleProps, IOverlayStyles } from './Overlay.types'; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/components/Overlay/Overlay.styles.ts b/packages/react/src/components/Overlay/Overlay.styles.ts index 9c672669b5efa2..eea56ac890e919 100644 --- a/packages/react/src/components/Overlay/Overlay.styles.ts +++ b/packages/react/src/components/Overlay/Overlay.styles.ts @@ -1,5 +1,5 @@ -import { IOverlayStyleProps, IOverlayStyles } from './Overlay.types'; import { HighContrastSelector, getGlobalClassNames } from '../../Styling'; +import type { IOverlayStyleProps, IOverlayStyles } from './Overlay.types'; const GlobalClassNames = { root: 'ms-Overlay', diff --git a/packages/react/src/components/Overlay/Overlay.tsx b/packages/react/src/components/Overlay/Overlay.tsx index c427695a0722e4..ba7da2b738995a 100644 --- a/packages/react/src/components/Overlay/Overlay.tsx +++ b/packages/react/src/components/Overlay/Overlay.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { styled } from '../../Utilities'; -import { IOverlayProps, IOverlayStyleProps, IOverlayStyles } from './Overlay.types'; import { OverlayBase } from './Overlay.base'; import { getStyles } from './Overlay.styles'; +import type { IOverlayProps, IOverlayStyleProps, IOverlayStyles } from './Overlay.types'; export const Overlay: React.FunctionComponent = styled< IOverlayProps, diff --git a/packages/react/src/components/Overlay/Overlay.types.ts b/packages/react/src/components/Overlay/Overlay.types.ts index 3a4287a904439e..b0a50327cec45e 100644 --- a/packages/react/src/components/Overlay/Overlay.types.ts +++ b/packages/react/src/components/Overlay/Overlay.types.ts @@ -1,6 +1,6 @@ import * as React from 'react'; -import { IStyle, ITheme } from '../../Styling'; -import { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; +import type { IStyle, ITheme } from '../../Styling'; +import type { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; /** * {@docCategory Overlay} diff --git a/packages/react/src/components/Panel/Panel.base.tsx b/packages/react/src/components/Panel/Panel.base.tsx index c664547ef34c28..81fa15ffbb36f8 100644 --- a/packages/react/src/components/Panel/Panel.base.tsx +++ b/packages/react/src/components/Panel/Panel.base.tsx @@ -3,7 +3,6 @@ import { IconButton } from '../../Button'; import { Layer } from '../../Layer'; import { Overlay } from '../../Overlay'; import { Popup } from '../../Popup'; -import { IProcessedStyleSet } from '../../Styling'; import { allowScrollOnElement, allowOverscrollOnElement, @@ -20,7 +19,9 @@ import { initializeComponentRef, } from '../../Utilities'; import { FocusTrapZone } from '../FocusTrapZone/index'; -import { IPanel, IPanelProps, IPanelStyleProps, IPanelStyles, PanelType } from './Panel.types'; +import { PanelType } from './Panel.types'; +import type { IProcessedStyleSet } from '../../Styling'; +import type { IPanel, IPanelProps, IPanelStyleProps, IPanelStyles } from './Panel.types'; const getClassNames = classNamesFunction(); const COMPONENT_NAME = 'Panel'; diff --git a/packages/react/src/components/Panel/Panel.styles.ts b/packages/react/src/components/Panel/Panel.styles.ts index 78491378c0c780..9a56a78235f157 100644 --- a/packages/react/src/components/Panel/Panel.styles.ts +++ b/packages/react/src/components/Panel/Panel.styles.ts @@ -1,4 +1,4 @@ -import { IPanelStyleProps, IPanelStyles, PanelType } from './Panel.types'; +import { PanelType } from './Panel.types'; import { AnimationClassNames, AnimationVariables, @@ -9,9 +9,10 @@ import { ScreenWidthMinXLarge, ScreenWidthMinXXLarge, ScreenWidthMinUhfMobile, - IStyle, IconFontSizes, } from '../../Styling'; +import type { IPanelStyleProps, IPanelStyles } from './Panel.types'; +import type { IStyle } from '../../Styling'; const GlobalClassNames = { root: 'ms-Panel', diff --git a/packages/react/src/components/Panel/Panel.test.tsx b/packages/react/src/components/Panel/Panel.test.tsx index 9b29dda7e0f855..7b6413e90d3b72 100644 --- a/packages/react/src/components/Panel/Panel.test.tsx +++ b/packages/react/src/components/Panel/Panel.test.tsx @@ -4,10 +4,10 @@ import { mount } from 'enzyme'; import { Panel } from './Panel'; import { PanelBase } from './Panel.base'; -import { IPanel } from './Panel.types'; import * as path from 'path'; import { isConformant } from '../../common/isConformant'; import { resetIds } from '../../Utilities'; +import type { IPanel } from './Panel.types'; let div: HTMLElement; diff --git a/packages/react/src/components/Panel/Panel.ts b/packages/react/src/components/Panel/Panel.ts index 6c35e45afc1366..b291f7ce26c1bd 100644 --- a/packages/react/src/components/Panel/Panel.ts +++ b/packages/react/src/components/Panel/Panel.ts @@ -1,8 +1,8 @@ import * as React from 'react'; import { styled } from '../../Utilities'; -import { IPanelProps, IPanelStyleProps, IPanelStyles } from './Panel.types'; import { PanelBase } from './Panel.base'; import { getStyles } from './Panel.styles'; +import type { IPanelProps, IPanelStyleProps, IPanelStyles } from './Panel.types'; /** * Panel description diff --git a/packages/react/src/components/Panel/Panel.types.ts b/packages/react/src/components/Panel/Panel.types.ts index e1114be3e687a6..d902686779e36b 100644 --- a/packages/react/src/components/Panel/Panel.types.ts +++ b/packages/react/src/components/Panel/Panel.types.ts @@ -1,12 +1,12 @@ import * as React from 'react'; -import { IFocusTrapZoneProps } from '../../FocusTrapZone'; -import { ILayerProps } from '../../Layer'; -import { IOverlayProps } from '../../Overlay'; -import { IStyle, ITheme } from '../../Styling'; -import { IRefObject, IRenderFunction, IStyleFunctionOrObject } from '../../Utilities'; -import { IButtonStyles } from '../../Button'; import { PanelBase } from './Panel.base'; -import { IPopupProps } from '../../Popup'; +import type { IFocusTrapZoneProps } from '../../FocusTrapZone'; +import type { ILayerProps } from '../../Layer'; +import type { IOverlayProps } from '../../Overlay'; +import type { IStyle, ITheme } from '../../Styling'; +import type { IRefObject, IRenderFunction, IStyleFunctionOrObject } from '../../Utilities'; +import type { IButtonStyles } from '../../Button'; +import type { IPopupProps } from '../../Popup'; /** * {@docCategory Panel} diff --git a/packages/react/src/components/Persona/Persona.base.tsx b/packages/react/src/components/Persona/Persona.base.tsx index f7a800872796b0..27d5cfa7687959 100644 --- a/packages/react/src/components/Persona/Persona.base.tsx +++ b/packages/react/src/components/Persona/Persona.base.tsx @@ -1,23 +1,12 @@ import * as React from 'react'; -import { - classNamesFunction, - divProperties, - getNativeProps, - IRenderFunction, - getPropsWithDefaults, -} from '../../Utilities'; +import { classNamesFunction, divProperties, getNativeProps, getPropsWithDefaults } from '../../Utilities'; import { TooltipHost, TooltipOverflowMode } from '../../Tooltip'; import { PersonaCoin } from './PersonaCoin/PersonaCoin'; -import { - IPersonaProps, - IPersonaStyleProps, - IPersonaStyles, - PersonaPresence as PersonaPresenceEnum, - PersonaSize, - IPersonaCoinProps, -} from './Persona.types'; +import { PersonaPresence as PersonaPresenceEnum, PersonaSize } from './Persona.types'; import { useWarnings, useMergedRefs } from '@fluentui/react-hooks'; import { DirectionalHint } from '../../common/DirectionalHint'; +import type { IRenderFunction } from '../../Utilities'; +import type { IPersonaProps, IPersonaStyleProps, IPersonaStyles, IPersonaCoinProps } from './Persona.types'; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/components/Persona/Persona.styles.ts b/packages/react/src/components/Persona/Persona.styles.ts index 93fe962a3a9492..b41142a4ac2585 100644 --- a/packages/react/src/components/Persona/Persona.styles.ts +++ b/packages/react/src/components/Persona/Persona.styles.ts @@ -1,6 +1,8 @@ -import { IPersonaStyleProps, IPersonaStyles, PersonaPresence, PersonaSize } from './Persona.types'; -import { FontWeights, IStyle, normalize, noWrap, getGlobalClassNames } from '../../Styling'; +import { PersonaPresence, PersonaSize } from './Persona.types'; +import { FontWeights, normalize, noWrap, getGlobalClassNames } from '../../Styling'; import { personaSize, presenceBoolean, sizeBoolean } from './PersonaConsts'; +import type { IPersonaStyleProps, IPersonaStyles } from './Persona.types'; +import type { IStyle } from '../../Styling'; const GlobalClassNames = { root: 'ms-Persona', diff --git a/packages/react/src/components/Persona/Persona.test.tsx b/packages/react/src/components/Persona/Persona.test.tsx index 701e46ad0a54fc..60a039b28b6ba7 100644 --- a/packages/react/src/components/Persona/Persona.test.tsx +++ b/packages/react/src/components/Persona/Persona.test.tsx @@ -2,12 +2,14 @@ import * as React from 'react'; import { create } from '@fluentui/utilities/lib/test'; import { TestImages } from '@fluentui/example-data'; import { Icon } from '../../Icon'; -import { setRTL, IRenderFunction } from '../../Utilities'; +import { setRTL } from '../../Utilities'; import { Persona } from './Persona'; import { mount, ReactWrapper } from 'enzyme'; import { getIcon } from '../../Styling'; -import { IPersonaSharedProps, IPersonaProps, IPersonaCoinProps, PersonaPresence, PersonaSize } from './index'; +import { PersonaPresence, PersonaSize } from './index'; import { isConformant } from '../../common/isConformant'; +import type { IRenderFunction } from '../../Utilities'; +import type { IPersonaSharedProps, IPersonaProps, IPersonaCoinProps } from './index'; const testImage1x1 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQImWP4DwQACfsD/eNV8pwAAAAASUVORK5CYII='; diff --git a/packages/react/src/components/Persona/Persona.tsx b/packages/react/src/components/Persona/Persona.tsx index 315bba0552d0a6..e8a165ef545b3a 100644 --- a/packages/react/src/components/Persona/Persona.tsx +++ b/packages/react/src/components/Persona/Persona.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { styled } from '../../Utilities'; -import { IPersonaProps, IPersonaStyleProps, IPersonaStyles } from './Persona.types'; import { PersonaBase } from './Persona.base'; import { getStyles } from './Persona.styles'; +import type { IPersonaProps, IPersonaStyleProps, IPersonaStyles } from './Persona.types'; /** * Personas are used for rendering an individual's avatar, presence and details. diff --git a/packages/react/src/components/Persona/Persona.types.ts b/packages/react/src/components/Persona/Persona.types.ts index b452b156efeb37..a8a2ba5c7a344f 100644 --- a/packages/react/src/components/Persona/Persona.types.ts +++ b/packages/react/src/components/Persona/Persona.types.ts @@ -1,8 +1,7 @@ import * as React from 'react'; -import { IRefObject, IRenderFunction } from '../../Utilities'; import { ImageLoadState } from '../../Image'; -import { IStyle, ITheme } from '../../Styling'; -import { IStyleFunctionOrObject } from '../../Utilities'; +import type { IRefObject, IRenderFunction, IStyleFunctionOrObject } from '../../Utilities'; +import type { IStyle, ITheme } from '../../Styling'; /** * {@docCategory Persona} diff --git a/packages/react/src/components/Persona/PersonaCoin/PersonaCoin.base.tsx b/packages/react/src/components/Persona/PersonaCoin/PersonaCoin.base.tsx index 8153ddacac66fe..91d0e4b451ce7b 100644 --- a/packages/react/src/components/Persona/PersonaCoin/PersonaCoin.base.tsx +++ b/packages/react/src/components/Persona/PersonaCoin/PersonaCoin.base.tsx @@ -12,18 +12,16 @@ import { mergeStyles } from '../../../Styling'; import { PersonaPresence } from '../PersonaPresence/index'; import { Icon } from '../../../Icon'; import { Image, ImageFit, ImageLoadState } from '../../../Image'; -import { +import { PersonaInitialsColor, PersonaPresence as PersonaPresenceEnum, PersonaSize } from '../Persona.types'; +import { getPersonaInitialsColor } from '../PersonaInitialsColor'; +import { sizeToPixels } from '../PersonaConsts'; +import { useWarnings } from '@fluentui/react-hooks'; +import type { IPersonaCoinProps, IPersonaCoinStyleProps, IPersonaCoinStyles, IPersonaPresenceProps, - PersonaInitialsColor, - PersonaPresence as PersonaPresenceEnum, - PersonaSize, } from '../Persona.types'; -import { getPersonaInitialsColor } from '../PersonaInitialsColor'; -import { sizeToPixels } from '../PersonaConsts'; -import { useWarnings } from '@fluentui/react-hooks'; const getClassNames = classNamesFunction({ // There can be many PersonaCoin rendered with different sizes. diff --git a/packages/react/src/components/Persona/PersonaCoin/PersonaCoin.styles.ts b/packages/react/src/components/Persona/PersonaCoin/PersonaCoin.styles.ts index 139d7cbc26cac1..199d4a2f36a78b 100644 --- a/packages/react/src/components/Persona/PersonaCoin/PersonaCoin.styles.ts +++ b/packages/react/src/components/Persona/PersonaCoin/PersonaCoin.styles.ts @@ -1,6 +1,7 @@ -import { IPersonaCoinStyleProps, IPersonaCoinStyles, PersonaSize } from '../Persona.types'; +import { PersonaSize } from '../Persona.types'; import { HighContrastSelector, FontWeights, getGlobalClassNames, getHighContrastNoAdjustStyle } from '../../../Styling'; import { sizeBoolean, sizeToPixels } from '../PersonaConsts'; +import type { IPersonaCoinStyleProps, IPersonaCoinStyles } from '../Persona.types'; const GlobalClassNames = { coin: 'ms-Persona-coin', diff --git a/packages/react/src/components/Persona/PersonaCoin/PersonaCoin.tsx b/packages/react/src/components/Persona/PersonaCoin/PersonaCoin.tsx index a70fc358fbf234..4169fa368690ac 100644 --- a/packages/react/src/components/Persona/PersonaCoin/PersonaCoin.tsx +++ b/packages/react/src/components/Persona/PersonaCoin/PersonaCoin.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { styled } from '../../../Utilities'; -import { IPersonaCoinProps, IPersonaCoinStyleProps, IPersonaCoinStyles } from '../Persona.types'; import { PersonaCoinBase } from './PersonaCoin.base'; import { getStyles } from './PersonaCoin.styles'; +import type { IPersonaCoinProps, IPersonaCoinStyleProps, IPersonaCoinStyles } from '../Persona.types'; /** * PersonaCoin is used to render an individual's avatar and presence. diff --git a/packages/react/src/components/Persona/PersonaInitialsColor.ts b/packages/react/src/components/Persona/PersonaInitialsColor.ts index 394978bfa1bac5..f5fe9c45f87656 100644 --- a/packages/react/src/components/Persona/PersonaInitialsColor.ts +++ b/packages/react/src/components/Persona/PersonaInitialsColor.ts @@ -1,4 +1,5 @@ -import { PersonaInitialsColor, IPersonaProps } from './Persona.types'; +import { PersonaInitialsColor } from './Persona.types'; +import type { IPersonaProps } from './Persona.types'; /** * Following colors are considered reserved and can only be set with overrides, so they are excluded from this set: diff --git a/packages/react/src/components/Persona/PersonaPresence/PersonaPresence.base.tsx b/packages/react/src/components/Persona/PersonaPresence/PersonaPresence.base.tsx index fbf61136665c7a..d6043d6753a818 100644 --- a/packages/react/src/components/Persona/PersonaPresence/PersonaPresence.base.tsx +++ b/packages/react/src/components/Persona/PersonaPresence/PersonaPresence.base.tsx @@ -1,15 +1,10 @@ import * as React from 'react'; import { classNamesFunction } from '../../../Utilities'; import { Icon } from '../../../Icon'; -import { - IPersonaPresenceProps, - IPersonaPresenceStyleProps, - IPersonaPresenceStyles, - PersonaPresence as PersonaPresenceEnum, - PersonaSize, -} from '../Persona.types'; +import { PersonaPresence as PersonaPresenceEnum, PersonaSize } from '../Persona.types'; import { sizeBoolean } from '../PersonaConsts'; import { useMergedRefs } from '@fluentui/react-hooks'; +import type { IPersonaPresenceProps, IPersonaPresenceStyleProps, IPersonaPresenceStyles } from '../Persona.types'; const coinSizeFontScaleFactor = 6; const coinSizePresenceScaleFactor = 3; diff --git a/packages/react/src/components/Persona/PersonaPresence/PersonaPresence.styles.ts b/packages/react/src/components/Persona/PersonaPresence/PersonaPresence.styles.ts index 426761a4f996ef..664dc58cc5d512 100644 --- a/packages/react/src/components/Persona/PersonaPresence/PersonaPresence.styles.ts +++ b/packages/react/src/components/Persona/PersonaPresence/PersonaPresence.styles.ts @@ -1,6 +1,8 @@ -import { IPersonaPresenceStyleProps, IPersonaPresenceStyles, PersonaPresence, PersonaSize } from '../Persona.types'; -import { HighContrastSelector, getGlobalClassNames, IRawStyle, getHighContrastNoAdjustStyle } from '../../../Styling'; +import { PersonaPresence, PersonaSize } from '../Persona.types'; +import { HighContrastSelector, getGlobalClassNames, getHighContrastNoAdjustStyle } from '../../../Styling'; import { personaPresenceSize, presenceBoolean, sizeBoolean } from '../PersonaConsts'; +import type { IPersonaPresenceStyleProps, IPersonaPresenceStyles } from '../Persona.types'; +import type { IRawStyle } from '../../../Styling'; const GlobalClassNames = { presence: 'ms-Persona-presence', diff --git a/packages/react/src/components/Persona/PersonaPresence/PersonaPresence.tsx b/packages/react/src/components/Persona/PersonaPresence/PersonaPresence.tsx index ca489b2ff813eb..fe2d6f89d039a8 100644 --- a/packages/react/src/components/Persona/PersonaPresence/PersonaPresence.tsx +++ b/packages/react/src/components/Persona/PersonaPresence/PersonaPresence.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { styled } from '../../../Utilities'; -import { IPersonaPresenceProps, IPersonaPresenceStyleProps, IPersonaPresenceStyles } from '../Persona.types'; import { PersonaPresenceBase } from './PersonaPresence.base'; import { getStyles } from './PersonaPresence.styles'; +import type { IPersonaPresenceProps, IPersonaPresenceStyleProps, IPersonaPresenceStyles } from '../Persona.types'; /** * PersonaPresence is used to render an individual's presence. diff --git a/packages/react/src/components/Pivot/Pivot.base.tsx b/packages/react/src/components/Pivot/Pivot.base.tsx index 48ae4cbd9f956e..28217b8d6b2533 100644 --- a/packages/react/src/components/Pivot/Pivot.base.tsx +++ b/packages/react/src/components/Pivot/Pivot.base.tsx @@ -1,14 +1,17 @@ import * as React from 'react'; import { useControllableValue, useId } from '@fluentui/react-hooks'; import { classNamesFunction, css, divProperties, getNativeProps, getRTL, KeyCodes, warn } from '@fluentui/utilities'; -import { CommandButton, IButton } from '../../Button'; +import { CommandButton } from '../../Button'; import { useOverflow } from '../../utilities/useOverflow'; -import { FocusZone, IFocusZone, FocusZoneDirection } from '../../FocusZone'; -import { DirectionalHint, IContextualMenuProps } from '../ContextualMenu/ContextualMenu.types'; +import { FocusZone, FocusZoneDirection } from '../../FocusZone'; +import { DirectionalHint } from '../ContextualMenu/ContextualMenu.types'; import { Icon } from '../Icon/Icon'; -import { IPivot, IPivotProps, IPivotStyleProps, IPivotStyles } from './Pivot.types'; import { PivotItem } from './PivotItem'; -import { IPivotItemProps } from './PivotItem.types'; +import type { IButton } from '../../Button'; +import type { IFocusZone } from '../../FocusZone'; +import type { IContextualMenuProps } from '../ContextualMenu/ContextualMenu.types'; +import type { IPivot, IPivotProps, IPivotStyleProps, IPivotStyles } from './Pivot.types'; +import type { IPivotItemProps } from './PivotItem.types'; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/components/Pivot/Pivot.styles.ts b/packages/react/src/components/Pivot/Pivot.styles.ts index eb4d3a71c94e0a..99a9031c6b1c5d 100644 --- a/packages/react/src/components/Pivot/Pivot.styles.ts +++ b/packages/react/src/components/Pivot/Pivot.styles.ts @@ -1,14 +1,14 @@ -import { IPivotStyleProps, IPivotStyles } from './Pivot.types'; import { AnimationVariables, getGlobalClassNames, HighContrastSelector, - IStyle, normalize, FontWeights, getHighContrastNoAdjustStyle, } from '@fluentui/style-utilities'; import { IsFocusVisibleClassName } from '@fluentui/utilities'; +import type { IPivotStyleProps, IPivotStyles } from './Pivot.types'; +import type { IStyle } from '@fluentui/style-utilities'; const globalClassNames = { count: 'ms-Pivot-count', diff --git a/packages/react/src/components/Pivot/Pivot.test.tsx b/packages/react/src/components/Pivot/Pivot.test.tsx index 34589e7d46a655..a0e36c46f4ff39 100644 --- a/packages/react/src/components/Pivot/Pivot.test.tsx +++ b/packages/react/src/components/Pivot/Pivot.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 { Pivot, PivotItem, IPivot } from './index'; +import { Pivot, PivotItem } from './index'; import { isConformant } from '../../common/isConformant'; +import type { IPivot } from './index'; describe('Pivot', () => { beforeEach(() => { diff --git a/packages/react/src/components/Pivot/Pivot.tsx b/packages/react/src/components/Pivot/Pivot.tsx index 2778da191b7f7b..ee6c90a4c7b7c7 100644 --- a/packages/react/src/components/Pivot/Pivot.tsx +++ b/packages/react/src/components/Pivot/Pivot.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { styled } from '@fluentui/utilities'; -import { IPivotProps, IPivotStyleProps, IPivotStyles } from './Pivot.types'; import { PivotBase } from './Pivot.base'; import { getStyles } from './Pivot.styles'; +import type { IPivotProps, IPivotStyleProps, IPivotStyles } from './Pivot.types'; /** * The Pivot control and related tabs pattern are used for navigating frequently accessed, diff --git a/packages/react/src/components/Pivot/Pivot.types.ts b/packages/react/src/components/Pivot/Pivot.types.ts index d968a660030ed6..731bb5fdefe68f 100644 --- a/packages/react/src/components/Pivot/Pivot.types.ts +++ b/packages/react/src/components/Pivot/Pivot.types.ts @@ -1,8 +1,8 @@ import * as React from 'react'; -import { IStyle, ITheme } from '@fluentui/style-utilities'; -import { IStyleFunctionOrObject } from '@fluentui/utilities'; import { PivotItem } from './PivotItem'; -import { IFocusZoneProps } from '../../FocusZone'; +import type { IStyle, ITheme } from '@fluentui/style-utilities'; +import type { IStyleFunctionOrObject } from '@fluentui/utilities'; +import type { IFocusZoneProps } from '../../FocusZone'; /** * {@docCategory Pivot} diff --git a/packages/react/src/components/Pivot/PivotItem.tsx b/packages/react/src/components/Pivot/PivotItem.tsx index 64715f7abe7c0b..90993cf340ca95 100644 --- a/packages/react/src/components/Pivot/PivotItem.tsx +++ b/packages/react/src/components/Pivot/PivotItem.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { getNativeProps, divProperties, initializeComponentRef, warnDeprecations } from '@fluentui/utilities'; -import { IPivotItemProps } from './PivotItem.types'; +import type { IPivotItemProps } from './PivotItem.types'; const COMPONENT_NAME = 'PivotItem'; diff --git a/packages/react/src/components/Pivot/PivotItem.types.ts b/packages/react/src/components/Pivot/PivotItem.types.ts index ef15834051e0ba..05a1d429078566 100644 --- a/packages/react/src/components/Pivot/PivotItem.types.ts +++ b/packages/react/src/components/Pivot/PivotItem.types.ts @@ -1,7 +1,7 @@ import * as React from 'react'; -import { IRefObject, IRenderFunction } from '@fluentui/utilities'; -import { IButtonProps } from '../../Button'; -import { IKeytipProps } from '../Keytip/Keytip.types'; +import type { IRefObject, IRenderFunction } from '@fluentui/utilities'; +import type { IButtonProps } from '../../Button'; +import type { IKeytipProps } from '../Keytip/Keytip.types'; /** * {@docCategory Pivot} diff --git a/packages/react/src/components/Popup/Popup.tsx b/packages/react/src/components/Popup/Popup.tsx index 11fc8a07308de0..b9c63b3183e9b7 100644 --- a/packages/react/src/components/Popup/Popup.tsx +++ b/packages/react/src/components/Popup/Popup.tsx @@ -7,9 +7,9 @@ import { getNativeProps, getWindow, } from '../../Utilities'; -import { IPopupProps, IPopupRestoreFocusParams } from './Popup.types'; import { useMergedRefs, useAsync, useOnEvent } from '@fluentui/react-hooks'; import { useWindow } from '@fluentui/react-window-provider'; +import type { IPopupProps, IPopupRestoreFocusParams } from './Popup.types'; function useScrollbarAsync(props: IPopupProps, root: React.RefObject) { const async = useAsync(); diff --git a/packages/react/src/components/ProgressIndicator/ProgressIndicator.base.tsx b/packages/react/src/components/ProgressIndicator/ProgressIndicator.base.tsx index c224e2835ae1e8..cff50ca6e952f3 100644 --- a/packages/react/src/components/ProgressIndicator/ProgressIndicator.base.tsx +++ b/packages/react/src/components/ProgressIndicator/ProgressIndicator.base.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { classNamesFunction, getId } from '../../Utilities'; -import { +import type { IProgressIndicatorProps, IProgressIndicatorStyleProps, IProgressIndicatorStyles, diff --git a/packages/react/src/components/ProgressIndicator/ProgressIndicator.styles.ts b/packages/react/src/components/ProgressIndicator/ProgressIndicator.styles.ts index cc0213423c8c6d..bdce435021fbef 100644 --- a/packages/react/src/components/ProgressIndicator/ProgressIndicator.styles.ts +++ b/packages/react/src/components/ProgressIndicator/ProgressIndicator.styles.ts @@ -3,11 +3,11 @@ import { keyframes, noWrap, getGlobalClassNames, - IRawStyle, getHighContrastNoAdjustStyle, } from '../../Styling'; import { getRTL, memoizeFunction } from '../../Utilities'; -import { IProgressIndicatorStyleProps, IProgressIndicatorStyles } from './ProgressIndicator.types'; +import type { IRawStyle } from '../../Styling'; +import type { IProgressIndicatorStyleProps, IProgressIndicatorStyles } from './ProgressIndicator.types'; const GlobalClassNames = { root: 'ms-ProgressIndicator', diff --git a/packages/react/src/components/ProgressIndicator/ProgressIndicator.tsx b/packages/react/src/components/ProgressIndicator/ProgressIndicator.tsx index dba07242a8ac5c..4c723e6b9524e1 100644 --- a/packages/react/src/components/ProgressIndicator/ProgressIndicator.tsx +++ b/packages/react/src/components/ProgressIndicator/ProgressIndicator.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; import { styled } from '../../Utilities'; -import { +import { ProgressIndicatorBase } from './ProgressIndicator.base'; +import { getStyles } from './ProgressIndicator.styles'; +import type { IProgressIndicatorProps, IProgressIndicatorStyleProps, IProgressIndicatorStyles, } from './ProgressIndicator.types'; -import { ProgressIndicatorBase } from './ProgressIndicator.base'; -import { getStyles } from './ProgressIndicator.styles'; /** * ProgressIndicator description diff --git a/packages/react/src/components/ProgressIndicator/ProgressIndicator.types.ts b/packages/react/src/components/ProgressIndicator/ProgressIndicator.types.ts index 73307632c5a97e..f9d228545993d4 100644 --- a/packages/react/src/components/ProgressIndicator/ProgressIndicator.types.ts +++ b/packages/react/src/components/ProgressIndicator/ProgressIndicator.types.ts @@ -1,7 +1,7 @@ import * as React from 'react'; import { ProgressIndicatorBase } from './ProgressIndicator.base'; -import { IStyle, ITheme } from '../../Styling'; -import { IStyleFunctionOrObject, IRenderFunction } from '../../Utilities'; +import type { IStyle, ITheme } from '../../Styling'; +import type { IStyleFunctionOrObject, IRenderFunction } from '../../Utilities'; /** * {@docCategory ProgressIndicator} diff --git a/packages/react/src/components/Rating/Rating.base.tsx b/packages/react/src/components/Rating/Rating.base.tsx index 362970409bf67c..4d67648673aa97 100644 --- a/packages/react/src/components/Rating/Rating.base.tsx +++ b/packages/react/src/components/Rating/Rating.base.tsx @@ -2,8 +2,9 @@ import * as React from 'react'; import { classNamesFunction, css, format, divProperties, getNativeProps } from '../../Utilities'; import { Icon } from '../../Icon'; import { FocusZone, FocusZoneDirection } from '../../FocusZone'; -import { IRatingProps, RatingSize, IRatingStyleProps, IRatingStyles, IRating, IRatingStarProps } from './Rating.types'; +import { RatingSize } from './Rating.types'; import { useId, useWarnings, useControllableValue } from '@fluentui/react-hooks'; +import type { IRatingProps, IRatingStyleProps, IRatingStyles, IRating, IRatingStarProps } from './Rating.types'; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/components/Rating/Rating.styles.ts b/packages/react/src/components/Rating/Rating.styles.ts index 6e08f4e10998a1..370a23082edfd9 100644 --- a/packages/react/src/components/Rating/Rating.styles.ts +++ b/packages/react/src/components/Rating/Rating.styles.ts @@ -1,5 +1,5 @@ import { getFocusStyle, hiddenContentStyle, HighContrastSelector, getGlobalClassNames } from '../../Styling'; -import { IRatingStyleProps, IRatingStyles } from './Rating.types'; +import type { IRatingStyleProps, IRatingStyles } from './Rating.types'; const GlobalClassNames = { root: 'ms-RatingStar-root', diff --git a/packages/react/src/components/Rating/Rating.test.tsx b/packages/react/src/components/Rating/Rating.test.tsx index c64962e46f6095..04e504c6a8494c 100644 --- a/packages/react/src/components/Rating/Rating.test.tsx +++ b/packages/react/src/components/Rating/Rating.test.tsx @@ -3,7 +3,7 @@ import * as renderer from 'react-test-renderer'; import { mount, ReactWrapper } from 'enzyme'; import { Rating } from './Rating'; import { isConformant } from '../../common/isConformant'; -import { IRatingProps, IRating } from './Rating.types'; +import type { IRatingProps, IRating } from './Rating.types'; describe('Rating', () => { const ref = React.createRef(); diff --git a/packages/react/src/components/Rating/Rating.tsx b/packages/react/src/components/Rating/Rating.tsx index bf6657e0fdade8..0ea8529b93a6d7 100644 --- a/packages/react/src/components/Rating/Rating.tsx +++ b/packages/react/src/components/Rating/Rating.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { styled } from '../../Utilities'; -import { IRatingProps, IRatingStyleProps, IRatingStyles } from './Rating.types'; import { getStyles } from './Rating.styles'; import { RatingBase } from './Rating.base'; +import type { IRatingProps, IRatingStyleProps, IRatingStyles } from './Rating.types'; export const Rating: React.FunctionComponent = styled( RatingBase, diff --git a/packages/react/src/components/Rating/Rating.types.ts b/packages/react/src/components/Rating/Rating.types.ts index 1f445ed9e3db81..fdc4524163428a 100644 --- a/packages/react/src/components/Rating/Rating.types.ts +++ b/packages/react/src/components/Rating/Rating.types.ts @@ -1,6 +1,6 @@ import * as React from 'react'; -import { IStyle, ITheme, IProcessedStyleSet } from '../../Styling'; -import { IRefObject, IRenderFunction, IStyleFunctionOrObject } from '../../Utilities'; +import type { IStyle, ITheme, IProcessedStyleSet } from '../../Styling'; +import type { IRefObject, IRenderFunction, IStyleFunctionOrObject } from '../../Utilities'; /** * {@docCategory Rating} diff --git a/packages/react/src/components/ResizeGroup/ResizeGroup.base.tsx b/packages/react/src/components/ResizeGroup/ResizeGroup.base.tsx index 1b5332a3d31b39..4a63ac3c0fa824 100644 --- a/packages/react/src/components/ResizeGroup/ResizeGroup.base.tsx +++ b/packages/react/src/components/ResizeGroup/ResizeGroup.base.tsx @@ -1,8 +1,9 @@ import * as React from 'react'; import { Async, divProperties, getNativeProps } from '../../Utilities'; -import { IResizeGroupProps, ResizeGroupDirection } from './ResizeGroup.types'; +import { ResizeGroupDirection } from './ResizeGroup.types'; import { useConst, useMergedRefs, useAsync, useOnEvent, useWarnings } from '@fluentui/react-hooks'; import { useWindow } from '../../WindowProvider'; +import type { IResizeGroupProps } from './ResizeGroup.types'; const RESIZE_DELAY = 16; diff --git a/packages/react/src/components/ResizeGroup/ResizeGroup.test.tsx b/packages/react/src/components/ResizeGroup/ResizeGroup.test.tsx index ae6596c8fb80e9..9ec5d37b312b29 100644 --- a/packages/react/src/components/ResizeGroup/ResizeGroup.test.tsx +++ b/packages/react/src/components/ResizeGroup/ResizeGroup.test.tsx @@ -1,9 +1,10 @@ import * as React from 'react'; import { mount } from 'enzyme'; import { ResizeGroup } from './ResizeGroup'; -import { IResizeGroupState, getNextResizeGroupStateProvider, getMeasurementCache } from './ResizeGroup.base'; +import { getNextResizeGroupStateProvider, getMeasurementCache } from './ResizeGroup.base'; import * as renderer from 'react-test-renderer'; import { isConformant } from '../../common/isConformant'; +import type { IResizeGroupState } from './ResizeGroup.base'; interface ITestScalingData { scalingIndex: number; diff --git a/packages/react/src/components/ResizeGroup/ResizeGroup.tsx b/packages/react/src/components/ResizeGroup/ResizeGroup.tsx index 5773e7033bb2c9..e90ab03ebeb008 100644 --- a/packages/react/src/components/ResizeGroup/ResizeGroup.tsx +++ b/packages/react/src/components/ResizeGroup/ResizeGroup.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; import { ResizeGroupBase } from './ResizeGroup.base'; -import { IResizeGroupProps } from './ResizeGroup.types'; +import type { IResizeGroupProps } from './ResizeGroup.types'; export const ResizeGroup: React.FunctionComponent = ResizeGroupBase; diff --git a/packages/react/src/components/ResizeGroup/ResizeGroup.types.ts b/packages/react/src/components/ResizeGroup/ResizeGroup.types.ts index 3bb2dd3c6818e0..bdbcac60808225 100644 --- a/packages/react/src/components/ResizeGroup/ResizeGroup.types.ts +++ b/packages/react/src/components/ResizeGroup/ResizeGroup.types.ts @@ -1,6 +1,6 @@ import * as React from 'react'; -import { IStyle, ITheme } from '../../Styling'; -import { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; +import type { IStyle, ITheme } from '../../Styling'; +import type { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; /** * {@docCategory ResizeGroup} diff --git a/packages/react/src/components/ScrollablePane/ScrollablePane.base.tsx b/packages/react/src/components/ScrollablePane/ScrollablePane.base.tsx index 5353bdad32e985..1ef86f84bda538 100644 --- a/packages/react/src/components/ScrollablePane/ScrollablePane.base.tsx +++ b/packages/react/src/components/ScrollablePane/ScrollablePane.base.tsx @@ -8,15 +8,15 @@ import { getRTL, initializeComponentRef, } from '../../Utilities'; -import { +import { ScrollablePaneContext } from './ScrollablePane.types'; +import { Sticky } from '../../Sticky'; +import type { IScrollablePane, IScrollablePaneContext, IScrollablePaneProps, IScrollablePaneStyleProps, IScrollablePaneStyles, - ScrollablePaneContext, } from './ScrollablePane.types'; -import { Sticky } from '../../Sticky'; export interface IScrollablePaneState { stickyTopHeight: number; diff --git a/packages/react/src/components/ScrollablePane/ScrollablePane.styles.ts b/packages/react/src/components/ScrollablePane/ScrollablePane.styles.ts index f81bf412d91816..0426ce64671f33 100644 --- a/packages/react/src/components/ScrollablePane/ScrollablePane.styles.ts +++ b/packages/react/src/components/ScrollablePane/ScrollablePane.styles.ts @@ -1,5 +1,6 @@ -import { IScrollablePaneStyleProps, IScrollablePaneStyles } from './ScrollablePane.types'; -import { HighContrastSelector, IStyle, getGlobalClassNames } from '../../Styling'; +import { HighContrastSelector, getGlobalClassNames } from '../../Styling'; +import type { IScrollablePaneStyleProps, IScrollablePaneStyles } from './ScrollablePane.types'; +import type { IStyle } from '../../Styling'; const GlobalClassNames = { root: 'ms-ScrollablePane', diff --git a/packages/react/src/components/ScrollablePane/ScrollablePane.tsx b/packages/react/src/components/ScrollablePane/ScrollablePane.tsx index f34c6a172f8eea..722e47ff28ca77 100644 --- a/packages/react/src/components/ScrollablePane/ScrollablePane.tsx +++ b/packages/react/src/components/ScrollablePane/ScrollablePane.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { getStyles } from './ScrollablePane.styles'; -import { IScrollablePaneProps, IScrollablePaneStyleProps, IScrollablePaneStyles } from './ScrollablePane.types'; import { ScrollablePaneBase } from './ScrollablePane.base'; import { styled } from '../../Utilities'; +import type { IScrollablePaneProps, IScrollablePaneStyleProps, IScrollablePaneStyles } from './ScrollablePane.types'; export const ScrollablePane: React.FunctionComponent = styled< IScrollablePaneProps, diff --git a/packages/react/src/components/ScrollablePane/ScrollablePane.types.ts b/packages/react/src/components/ScrollablePane/ScrollablePane.types.ts index 7cde9ee6cd2eb1..e749a84b751178 100644 --- a/packages/react/src/components/ScrollablePane/ScrollablePane.types.ts +++ b/packages/react/src/components/ScrollablePane/ScrollablePane.types.ts @@ -1,8 +1,8 @@ import * as React from 'react'; -import { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; -import { IStyle, ITheme } from '../../Styling'; import { ScrollablePaneBase } from './ScrollablePane.base'; import { Sticky } from '../Sticky/Sticky'; +import type { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; +import type { IStyle, ITheme } from '../../Styling'; /** * {@docCategory ScrollablePane} diff --git a/packages/react/src/components/SearchBox/SearchBox.base.tsx b/packages/react/src/components/SearchBox/SearchBox.base.tsx index 6cff3bd24bdabf..fc79e326c8f6bd 100644 --- a/packages/react/src/components/SearchBox/SearchBox.base.tsx +++ b/packages/react/src/components/SearchBox/SearchBox.base.tsx @@ -1,9 +1,11 @@ import * as React from 'react'; -import { ISearchBoxProps, ISearchBoxStyleProps, ISearchBoxStyles, ISearchBox } from './SearchBox.types'; import { KeyCodes, classNamesFunction, getNativeProps, inputProperties } from '../../Utilities'; import { useControllableValue, useId, useMergedRefs, useWarnings } from '@fluentui/react-hooks'; -import { IconButton, IButtonProps, IButtonStyles } from '../../Button'; -import { Icon, IIconProps } from '../../Icon'; +import { IconButton } from '../../Button'; +import { Icon } from '../../Icon'; +import type { ISearchBoxProps, ISearchBoxStyleProps, ISearchBoxStyles, ISearchBox } from './SearchBox.types'; +import type { IButtonProps, IButtonStyles } from '../../Button'; +import type { IIconProps } from '../../Icon'; const COMPONENT_NAME = 'SearchBox'; const iconButtonStyles: Partial = { root: { height: 'auto' }, icon: { fontSize: '12px' } }; diff --git a/packages/react/src/components/SearchBox/SearchBox.styles.tsx b/packages/react/src/components/SearchBox/SearchBox.styles.tsx index 6b63dd9e759301..109767c93e732f 100644 --- a/packages/react/src/components/SearchBox/SearchBox.styles.tsx +++ b/packages/react/src/components/SearchBox/SearchBox.styles.tsx @@ -2,13 +2,13 @@ import { HighContrastSelector, AnimationVariables, normalize, - IStyle, getPlaceholderStyles, getGlobalClassNames, getInputFocusStyle, } from '../../Styling'; -import { ISearchBoxStyleProps, ISearchBoxStyles } from './SearchBox.types'; import { getRTL } from '../../Utilities'; +import type { IStyle } from '../../Styling'; +import type { ISearchBoxStyleProps, ISearchBoxStyles } from './SearchBox.types'; const GlobalClassNames = { root: 'ms-SearchBox', diff --git a/packages/react/src/components/SearchBox/SearchBox.test.tsx b/packages/react/src/components/SearchBox/SearchBox.test.tsx index 43378f363ef940..98681ae601a24e 100644 --- a/packages/react/src/components/SearchBox/SearchBox.test.tsx +++ b/packages/react/src/components/SearchBox/SearchBox.test.tsx @@ -1,11 +1,11 @@ import * as React from 'react'; -import { ReactTestRenderer } from 'react-test-renderer'; import { create } from '@fluentui/utilities/lib/test'; import { mount, ReactWrapper } from 'enzyme'; import { SearchBox } from './SearchBox'; import { KeyCodes, resetIds } from '../../Utilities'; -import { ISearchBoxProps } from './SearchBox.types'; import { isConformant } from '../../common/isConformant'; +import type { ReactTestRenderer } from 'react-test-renderer'; +import type { ISearchBoxProps } from './SearchBox.types'; describe('SearchBox', () => { let component: ReactTestRenderer | undefined; diff --git a/packages/react/src/components/SearchBox/SearchBox.tsx b/packages/react/src/components/SearchBox/SearchBox.tsx index 96df22480847ed..a97f97a3ce9eb1 100644 --- a/packages/react/src/components/SearchBox/SearchBox.tsx +++ b/packages/react/src/components/SearchBox/SearchBox.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { styled } from '../../Utilities'; import { SearchBoxBase } from './SearchBox.base'; -import { ISearchBoxProps, ISearchBoxStyleProps, ISearchBoxStyles } from './SearchBox.types'; import { getStyles } from './SearchBox.styles'; +import type { ISearchBoxProps, ISearchBoxStyleProps, ISearchBoxStyles } from './SearchBox.types'; export const SearchBox: React.FunctionComponent = styled< ISearchBoxProps, diff --git a/packages/react/src/components/SearchBox/SearchBox.types.ts b/packages/react/src/components/SearchBox/SearchBox.types.ts index 753274b14648a2..9854a710ba5f42 100644 --- a/packages/react/src/components/SearchBox/SearchBox.types.ts +++ b/packages/react/src/components/SearchBox/SearchBox.types.ts @@ -1,8 +1,8 @@ import * as React from 'react'; -import { IButtonProps } from '../../Button'; -import { ITheme, IStyle } from '../../Styling'; -import { IStyleFunctionOrObject } from '../../Utilities'; -import { IIconProps } from '../../Icon'; +import type { IButtonProps } from '../../Button'; +import type { ITheme, IStyle } from '../../Styling'; +import type { IStyleFunctionOrObject } from '../../Utilities'; +import type { IIconProps } from '../../Icon'; /** * {@docCategory SearchBox} diff --git a/packages/react/src/components/SelectedItemsList/BaseSelectedItemsList.test.tsx b/packages/react/src/components/SelectedItemsList/BaseSelectedItemsList.test.tsx index 0547c2e8c777d5..41489937c98da5 100644 --- a/packages/react/src/components/SelectedItemsList/BaseSelectedItemsList.test.tsx +++ b/packages/react/src/components/SelectedItemsList/BaseSelectedItemsList.test.tsx @@ -1,10 +1,9 @@ import * as React from 'react'; import * as ReactDOM from 'react-dom'; import * as renderer from 'react-test-renderer'; - -import { IBaseSelectedItemsListProps, ISelectedItemProps } from './BaseSelectedItemsList.types'; import { BaseSelectedItemsList } from './BaseSelectedItemsList'; import { isConformant } from '../../common/isConformant'; +import type { IBaseSelectedItemsListProps, ISelectedItemProps } from './BaseSelectedItemsList.types'; export interface ISimple { key: string; diff --git a/packages/react/src/components/SelectedItemsList/BaseSelectedItemsList.tsx b/packages/react/src/components/SelectedItemsList/BaseSelectedItemsList.tsx index 5249dafc9e0f6b..c99bb16c583275 100644 --- a/packages/react/src/components/SelectedItemsList/BaseSelectedItemsList.tsx +++ b/packages/react/src/components/SelectedItemsList/BaseSelectedItemsList.tsx @@ -1,9 +1,12 @@ import * as React from 'react'; import { Selection } from '../../Selection'; - -import { IBaseSelectedItemsList, IBaseSelectedItemsListProps, ISelectedItemProps } from './BaseSelectedItemsList.types'; import { initializeComponentRef } from '../../Utilities'; -import { IObjectWithKey } from '../../Utilities'; +import type { + IBaseSelectedItemsList, + IBaseSelectedItemsListProps, + ISelectedItemProps, +} from './BaseSelectedItemsList.types'; +import type { IObjectWithKey } from '../../Utilities'; export interface IBaseSelectedItemsListState { items: T[]; diff --git a/packages/react/src/components/SelectedItemsList/BaseSelectedItemsList.types.ts b/packages/react/src/components/SelectedItemsList/BaseSelectedItemsList.types.ts index 6d6f0087d8c948..185e88383b2b81 100644 --- a/packages/react/src/components/SelectedItemsList/BaseSelectedItemsList.types.ts +++ b/packages/react/src/components/SelectedItemsList/BaseSelectedItemsList.types.ts @@ -1,7 +1,8 @@ import * as React from 'react'; -import { IPickerItemProps, ISuggestionModel, ValidationState } from '../../Pickers'; +import { ValidationState } from '../../Pickers'; import { Selection } from '../../Selection'; -import { IRefObject } from '../../Utilities'; +import type { IPickerItemProps, ISuggestionModel } from '../../Pickers'; +import type { IRefObject } from '../../Utilities'; export interface IBaseSelectedItemsList { /** Gets the current value of the input. */ diff --git a/packages/react/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.styles.ts b/packages/react/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.styles.ts index be57bd348c335f..74fb8a3a464fec 100644 --- a/packages/react/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.styles.ts +++ b/packages/react/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.styles.ts @@ -1,5 +1,5 @@ import { getGlobalClassNames, getTheme } from '../../../../Styling'; -import { IEditingSelectedPeopleItemStyles, IEditingSelectedPeopleItemStylesProps } from './EditingItem.types'; +import type { IEditingSelectedPeopleItemStyles, IEditingSelectedPeopleItemStylesProps } from './EditingItem.types'; const GlobalClassNames = { root: 'ms-EditingItem', diff --git a/packages/react/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.tsx b/packages/react/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.tsx index a75007be47ec85..3fa980a1aca38c 100644 --- a/packages/react/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.tsx +++ b/packages/react/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.tsx @@ -8,11 +8,14 @@ import { initializeComponentRef, } from '../../../../Utilities'; import { FloatingPeoplePicker } from '../../../../FloatingPicker'; -import { IExtendedPersonaProps } from '../SelectedPeopleList'; -import { IPeoplePickerItemState } from './ExtendedSelectedItem'; -import { IEditingSelectedPeopleItemProps } from './EditingItem.types'; import { getStyles } from './EditingItem.styles'; -import { IEditingSelectedPeopleItemStyles, IEditingSelectedPeopleItemStylesProps } from './EditingItem.types'; +import type { IExtendedPersonaProps } from '../SelectedPeopleList'; +import type { IPeoplePickerItemState } from './ExtendedSelectedItem'; +import type { + IEditingSelectedPeopleItemProps, + IEditingSelectedPeopleItemStyles, + IEditingSelectedPeopleItemStylesProps, +} from './EditingItem.types'; export class EditingItem extends React.Component { private _editingInput: HTMLInputElement; diff --git a/packages/react/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.types.ts b/packages/react/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.types.ts index 9ddb07d04f62d9..b49e0cb812b548 100644 --- a/packages/react/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.types.ts +++ b/packages/react/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.types.ts @@ -1,9 +1,8 @@ import * as React from 'react'; -import { IBaseFloatingPickerProps } from '../../../../FloatingPicker'; -import { ISelectedPeopleItemProps } from '../SelectedPeopleList'; -import { IExtendedPersonaProps } from '../SelectedPeopleList'; -import { IPersonaProps } from '../../../../Persona'; -import { IStyle } from '../../../../Styling'; +import type { IBaseFloatingPickerProps } from '../../../../FloatingPicker'; +import type { ISelectedPeopleItemProps, IExtendedPersonaProps } from '../SelectedPeopleList'; +import type { IPersonaProps } from '../../../../Persona'; +import type { IStyle } from '../../../../Styling'; export interface IEditingSelectedPeopleItemProps extends ISelectedPeopleItemProps { onEditingComplete: (oldItem: any, newItem: any) => void; diff --git a/packages/react/src/components/SelectedItemsList/SelectedPeopleList/Items/ExtendedSelectedItem.tsx b/packages/react/src/components/SelectedItemsList/SelectedPeopleList/Items/ExtendedSelectedItem.tsx index 688c28f0eee86f..0c6e687bd699ad 100644 --- a/packages/react/src/components/SelectedItemsList/SelectedPeopleList/Items/ExtendedSelectedItem.tsx +++ b/packages/react/src/components/SelectedItemsList/SelectedPeopleList/Items/ExtendedSelectedItem.tsx @@ -2,8 +2,8 @@ import * as React from 'react'; import { IconButton } from '../../../../Button'; import { css, getId, initializeComponentRef } from '../../../../Utilities'; import { Persona, PersonaSize } from '../../../../Persona'; -import { ISelectedPeopleItemProps } from '../SelectedPeopleList'; import * as stylesImport from './ExtendedSelectedItem.scss'; +import type { ISelectedPeopleItemProps } from '../SelectedPeopleList'; const styles: any = stylesImport; diff --git a/packages/react/src/components/SelectedItemsList/SelectedPeopleList/Items/SelectedItemWithContextMenu.tsx b/packages/react/src/components/SelectedItemsList/SelectedPeopleList/Items/SelectedItemWithContextMenu.tsx index 8b092f320c49cc..274b437b046267 100644 --- a/packages/react/src/components/SelectedItemsList/SelectedPeopleList/Items/SelectedItemWithContextMenu.tsx +++ b/packages/react/src/components/SelectedItemsList/SelectedPeopleList/Items/SelectedItemWithContextMenu.tsx @@ -1,7 +1,9 @@ import * as React from 'react'; -import { initializeComponentRef, IBaseProps } from '../../../../Utilities'; -import { IExtendedPersonaProps } from '../SelectedPeopleList'; -import { ContextualMenu, DirectionalHint, IContextualMenuItem } from '../../../../ContextualMenu'; +import { initializeComponentRef } from '../../../../Utilities'; +import { ContextualMenu, DirectionalHint } from '../../../../ContextualMenu'; +import type { IBaseProps } from '../../../../Utilities'; +import type { IExtendedPersonaProps } from '../SelectedPeopleList'; +import type { IContextualMenuItem } from '../../../../ContextualMenu'; export interface IPeoplePickerItemState { contextualMenuVisible: boolean; diff --git a/packages/react/src/components/SelectedItemsList/SelectedPeopleList/SelectedPeopleList.test.tsx b/packages/react/src/components/SelectedItemsList/SelectedPeopleList/SelectedPeopleList.test.tsx index b551bf1caa856a..943618d6b8caad 100644 --- a/packages/react/src/components/SelectedItemsList/SelectedPeopleList/SelectedPeopleList.test.tsx +++ b/packages/react/src/components/SelectedItemsList/SelectedPeopleList/SelectedPeopleList.test.tsx @@ -3,7 +3,8 @@ import * as ReactDOM from 'react-dom'; import * as renderer from 'react-test-renderer'; import { isConformant } from '../../../common/isConformant'; -import { SelectedPeopleList, IExtendedPersonaProps } from './SelectedPeopleList'; +import { SelectedPeopleList } from './SelectedPeopleList'; +import type { IExtendedPersonaProps } from './SelectedPeopleList'; describe('SelectedPeopleList', () => { describe('Element keying behavior', () => { diff --git a/packages/react/src/components/SelectedItemsList/SelectedPeopleList/SelectedPeopleList.tsx b/packages/react/src/components/SelectedItemsList/SelectedPeopleList/SelectedPeopleList.tsx index 4bdccdbfbdf870..364ac5c489fb45 100644 --- a/packages/react/src/components/SelectedItemsList/SelectedPeopleList/SelectedPeopleList.tsx +++ b/packages/react/src/components/SelectedItemsList/SelectedPeopleList/SelectedPeopleList.tsx @@ -1,13 +1,13 @@ import * as React from 'react'; import { BaseSelectedItemsList } from '../BaseSelectedItemsList'; -import { IBaseSelectedItemsListProps, ISelectedItemProps } from '../BaseSelectedItemsList.types'; -import { IPersonaProps } from '../../../Persona'; import { ExtendedSelectedItem } from './Items/ExtendedSelectedItem'; import { SelectedItemWithContextMenu } from './Items/SelectedItemWithContextMenu'; -import { IRenderFunction } from '../../../Utilities'; -import { IContextualMenuItem } from '../../../ContextualMenu'; -import { IBaseFloatingPickerProps } from '../../../FloatingPicker'; import { EditingItem } from './Items/EditingItem'; +import type { IBaseSelectedItemsListProps, ISelectedItemProps } from '../BaseSelectedItemsList.types'; +import type { IPersonaProps } from '../../../Persona'; +import type { IRenderFunction } from '../../../Utilities'; +import type { IContextualMenuItem } from '../../../ContextualMenu'; +import type { IBaseFloatingPickerProps } from '../../../FloatingPicker'; /** * {@docCategory SelectedPeopleList} diff --git a/packages/react/src/components/Separator/Separator.base.tsx b/packages/react/src/components/Separator/Separator.base.tsx index b89502d756d179..ce51c0940b0884 100644 --- a/packages/react/src/components/Separator/Separator.base.tsx +++ b/packages/react/src/components/Separator/Separator.base.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { classNamesFunction } from '../../Utilities'; -import { ISeparatorProps, ISeparatorStyles, ISeparatorStyleProps } from './Separator.types'; +import type { ISeparatorProps, ISeparatorStyles, ISeparatorStyleProps } from './Separator.types'; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/components/Separator/Separator.styles.ts b/packages/react/src/components/Separator/Separator.styles.ts index caa7e37f39d2f4..84fa30f8233311 100644 --- a/packages/react/src/components/Separator/Separator.styles.ts +++ b/packages/react/src/components/Separator/Separator.styles.ts @@ -1,5 +1,5 @@ import { HighContrastSelector } from '../../Styling'; -import { ISeparatorStyleProps, ISeparatorStyles } from './Separator.types'; +import type { ISeparatorStyleProps, ISeparatorStyles } from './Separator.types'; export const getStyles = (props: ISeparatorStyleProps): ISeparatorStyles => { const { theme, alignContent, vertical, className } = props; diff --git a/packages/react/src/components/Separator/Separator.tsx b/packages/react/src/components/Separator/Separator.tsx index 3784c2f8434676..4bd63af6868ec2 100644 --- a/packages/react/src/components/Separator/Separator.tsx +++ b/packages/react/src/components/Separator/Separator.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { styled } from '../../Utilities'; -import { ISeparatorProps, ISeparatorStyleProps, ISeparatorStyles } from './Separator.types'; import { getStyles } from './Separator.styles'; import { SeparatorBase } from './Separator.base'; +import type { ISeparatorProps, ISeparatorStyleProps, ISeparatorStyles } from './Separator.types'; export const Separator: React.FunctionComponent = styled< ISeparatorProps, diff --git a/packages/react/src/components/Separator/Separator.types.ts b/packages/react/src/components/Separator/Separator.types.ts index bf6637560f9dab..1480729ff015a4 100644 --- a/packages/react/src/components/Separator/Separator.types.ts +++ b/packages/react/src/components/Separator/Separator.types.ts @@ -1,6 +1,6 @@ import * as React from 'react'; -import { IStyleFunctionOrObject } from '../../Utilities'; -import { IStyle, ITheme } from '../../Styling'; +import type { IStyleFunctionOrObject } from '../../Utilities'; +import type { IStyle, ITheme } from '../../Styling'; /** * {@docCategory Separator} diff --git a/packages/react/src/components/Shimmer/Shimmer.base.tsx b/packages/react/src/components/Shimmer/Shimmer.base.tsx index c2aba8890f92cc..5fdc21ef241506 100644 --- a/packages/react/src/components/Shimmer/Shimmer.base.tsx +++ b/packages/react/src/components/Shimmer/Shimmer.base.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { classNamesFunction, DelayedRender, getNativeProps, divProperties } from '../../Utilities'; -import { IShimmerProps, IShimmerStyleProps, IShimmerStyles } from './Shimmer.types'; import { ShimmerElementsGroup } from './ShimmerElementsGroup/ShimmerElementsGroup'; import { useSetTimeout, useConst } from '@fluentui/react-hooks'; +import type { IShimmerProps, IShimmerStyleProps, IShimmerStyles } from './Shimmer.types'; const TRANSITION_ANIMATION_INTERVAL = 200; /* ms */ const COMPONENT_NAME = 'Shimmer'; diff --git a/packages/react/src/components/Shimmer/Shimmer.styles.ts b/packages/react/src/components/Shimmer/Shimmer.styles.ts index db7978509105c5..5959cfd5add610 100644 --- a/packages/react/src/components/Shimmer/Shimmer.styles.ts +++ b/packages/react/src/components/Shimmer/Shimmer.styles.ts @@ -1,4 +1,3 @@ -import { IShimmerStyleProps, IShimmerStyles } from './Shimmer.types'; import { keyframes, getGlobalClassNames, @@ -7,6 +6,7 @@ import { getHighContrastNoAdjustStyle, } from '../../Styling'; import { getRTL, memoizeFunction } from '../../Utilities'; +import type { IShimmerStyleProps, IShimmerStyles } from './Shimmer.types'; const GlobalClassNames = { root: 'ms-Shimmer-container', diff --git a/packages/react/src/components/Shimmer/Shimmer.tsx b/packages/react/src/components/Shimmer/Shimmer.tsx index 7295f8b2dd8115..8df165dce1b635 100644 --- a/packages/react/src/components/Shimmer/Shimmer.tsx +++ b/packages/react/src/components/Shimmer/Shimmer.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { styled } from '../../Utilities'; -import { IShimmerProps, IShimmerStyleProps, IShimmerStyles } from './Shimmer.types'; import { getStyles } from './Shimmer.styles'; import { ShimmerBase } from './Shimmer.base'; +import type { IShimmerProps, IShimmerStyleProps, IShimmerStyles } from './Shimmer.types'; export const Shimmer: React.FunctionComponent = styled< IShimmerProps, diff --git a/packages/react/src/components/Shimmer/Shimmer.types.ts b/packages/react/src/components/Shimmer/Shimmer.types.ts index 4e1c63fccbbe09..84f755e464ab37 100644 --- a/packages/react/src/components/Shimmer/Shimmer.types.ts +++ b/packages/react/src/components/Shimmer/Shimmer.types.ts @@ -1,6 +1,6 @@ import * as React from 'react'; -import { IStyle, ITheme } from '../../Styling'; -import { IStyleFunctionOrObject } from '../../Utilities'; +import type { IStyle, ITheme } from '../../Styling'; +import type { IStyleFunctionOrObject } from '../../Utilities'; /** * Shimmer component props. diff --git a/packages/react/src/components/Shimmer/ShimmerCircle/ShimmerCircle.base.tsx b/packages/react/src/components/Shimmer/ShimmerCircle/ShimmerCircle.base.tsx index f0575a6a69b409..1c0185c4bd4438 100644 --- a/packages/react/src/components/Shimmer/ShimmerCircle/ShimmerCircle.base.tsx +++ b/packages/react/src/components/Shimmer/ShimmerCircle/ShimmerCircle.base.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { classNamesFunction } from '../../../Utilities'; -import { IShimmerCircleProps, IShimmerCircleStyleProps, IShimmerCircleStyles } from './ShimmerCircle.types'; +import type { IShimmerCircleProps, IShimmerCircleStyleProps, IShimmerCircleStyles } from './ShimmerCircle.types'; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/components/Shimmer/ShimmerCircle/ShimmerCircle.styles.ts b/packages/react/src/components/Shimmer/ShimmerCircle/ShimmerCircle.styles.ts index b5b5fa3482a49b..590bbfc3e61ef7 100644 --- a/packages/react/src/components/Shimmer/ShimmerCircle/ShimmerCircle.styles.ts +++ b/packages/react/src/components/Shimmer/ShimmerCircle/ShimmerCircle.styles.ts @@ -1,5 +1,6 @@ -import { IShimmerCircleStyleProps, IShimmerCircleStyles } from './ShimmerCircle.types'; -import { getGlobalClassNames, HighContrastSelector, IRawStyle } from '../../../Styling'; +import { getGlobalClassNames, HighContrastSelector } from '../../../Styling'; +import type { IShimmerCircleStyleProps, IShimmerCircleStyles } from './ShimmerCircle.types'; +import type { IRawStyle } from '../../../Styling'; const GlobalClassNames = { root: 'ms-ShimmerCircle-root', diff --git a/packages/react/src/components/Shimmer/ShimmerCircle/ShimmerCircle.tsx b/packages/react/src/components/Shimmer/ShimmerCircle/ShimmerCircle.tsx index 8dd8c7ff8c3ba5..4324e6524112f1 100644 --- a/packages/react/src/components/Shimmer/ShimmerCircle/ShimmerCircle.tsx +++ b/packages/react/src/components/Shimmer/ShimmerCircle/ShimmerCircle.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { styled } from '../../../Utilities'; import { getStyles } from './ShimmerCircle.styles'; -import { IShimmerCircleProps, IShimmerCircleStyleProps, IShimmerCircleStyles } from './ShimmerCircle.types'; import { ShimmerCircleBase } from './ShimmerCircle.base'; +import type { IShimmerCircleProps, IShimmerCircleStyleProps, IShimmerCircleStyles } from './ShimmerCircle.types'; export const ShimmerCircle: React.FunctionComponent = styled< IShimmerCircleProps, diff --git a/packages/react/src/components/Shimmer/ShimmerCircle/ShimmerCircle.types.ts b/packages/react/src/components/Shimmer/ShimmerCircle/ShimmerCircle.types.ts index 1682a3a9c48b06..b7d3af0aa94a73 100644 --- a/packages/react/src/components/Shimmer/ShimmerCircle/ShimmerCircle.types.ts +++ b/packages/react/src/components/Shimmer/ShimmerCircle/ShimmerCircle.types.ts @@ -1,6 +1,6 @@ import * as React from 'react'; -import { IStyle, ITheme, IRawStyle } from '../../../Styling'; -import { IStyleFunctionOrObject, IRefObject } from '../../../Utilities'; +import type { IStyle, ITheme, IRawStyle } from '../../../Styling'; +import type { IStyleFunctionOrObject, IRefObject } from '../../../Utilities'; /** * {@docCategory Shimmer} diff --git a/packages/react/src/components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.base.tsx b/packages/react/src/components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.base.tsx index 0d7b6243abda74..4c47721fdf8b8c 100644 --- a/packages/react/src/components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.base.tsx +++ b/packages/react/src/components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.base.tsx @@ -1,18 +1,19 @@ import * as React from 'react'; import { classNamesFunction, memoizeFunction } from '../../../Utilities'; -import { IRawStyle } from '../../../Styling'; -import { +import { ShimmerElementType, ShimmerElementsDefaultHeights } from '../Shimmer.types'; +import { ShimmerLine } from '../ShimmerLine/ShimmerLine'; +import { ShimmerGap } from '../ShimmerGap/ShimmerGap'; +import { ShimmerCircle } from '../ShimmerCircle/ShimmerCircle'; +import type { IRawStyle } from '../../../Styling'; +import type { IShimmerElementsGroupProps, IShimmerElementsGroupStyleProps, IShimmerElementsGroupStyles, } from './ShimmerElementsGroup.types'; -import { ShimmerElementType, ShimmerElementsDefaultHeights, IShimmerElement } from '../Shimmer.types'; -import { ShimmerLine } from '../ShimmerLine/ShimmerLine'; -import { IShimmerLineStyles } from '../ShimmerLine/ShimmerLine.types'; -import { ShimmerGap } from '../ShimmerGap/ShimmerGap'; -import { IShimmerGapStyles } from '../ShimmerGap/ShimmerGap.types'; -import { ShimmerCircle } from '../ShimmerCircle/ShimmerCircle'; -import { IShimmerCircleStyles } from '../ShimmerCircle/ShimmerCircle.types'; +import type { IShimmerElement } from '../Shimmer.types'; +import type { IShimmerLineStyles } from '../ShimmerLine/ShimmerLine.types'; +import type { IShimmerGapStyles } from '../ShimmerGap/ShimmerGap.types'; +import type { IShimmerCircleStyles } from '../ShimmerCircle/ShimmerCircle.types'; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.styles.ts b/packages/react/src/components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.styles.ts index ba8feb59cd93c5..e1f1292e2c9e9b 100644 --- a/packages/react/src/components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.styles.ts +++ b/packages/react/src/components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.styles.ts @@ -1,5 +1,5 @@ -import { IShimmerElementsGroupStyleProps, IShimmerElementsGroupStyles } from './ShimmerElementsGroup.types'; import { getGlobalClassNames } from '../../../Styling'; +import type { IShimmerElementsGroupStyleProps, IShimmerElementsGroupStyles } from './ShimmerElementsGroup.types'; const GlobalClassNames = { root: 'ms-ShimmerElementsGroup-root', diff --git a/packages/react/src/components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.tsx b/packages/react/src/components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.tsx index 5b0b85bf74750a..01e0e70ffe00e1 100644 --- a/packages/react/src/components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.tsx +++ b/packages/react/src/components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; import { styled } from '../../../Utilities'; -import { +import { ShimmerElementsGroupBase } from './ShimmerElementsGroup.base'; +import { getStyles } from './ShimmerElementsGroup.styles'; +import type { IShimmerElementsGroupProps, IShimmerElementsGroupStyleProps, IShimmerElementsGroupStyles, } from './ShimmerElementsGroup.types'; -import { ShimmerElementsGroupBase } from './ShimmerElementsGroup.base'; -import { getStyles } from './ShimmerElementsGroup.styles'; export const ShimmerElementsGroup: React.FunctionComponent = styled< IShimmerElementsGroupProps, diff --git a/packages/react/src/components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.types.ts b/packages/react/src/components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.types.ts index a2d0889f49f9f7..28890ef29576c5 100644 --- a/packages/react/src/components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.types.ts +++ b/packages/react/src/components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.types.ts @@ -1,7 +1,7 @@ import * as React from 'react'; -import { IStyle, ITheme } from '../../../Styling'; -import { IRefObject, IStyleFunctionOrObject } from '../../../Utilities'; -import { IShimmerElement } from '../Shimmer.types'; +import type { IStyle, ITheme } from '../../../Styling'; +import type { IRefObject, IStyleFunctionOrObject } from '../../../Utilities'; +import type { IShimmerElement } from '../Shimmer.types'; /** * {@docCategory Shimmer} diff --git a/packages/react/src/components/Shimmer/ShimmerGap/ShimmerGap.base.tsx b/packages/react/src/components/Shimmer/ShimmerGap/ShimmerGap.base.tsx index 4aad95a08896e3..a67ead72f2501e 100644 --- a/packages/react/src/components/Shimmer/ShimmerGap/ShimmerGap.base.tsx +++ b/packages/react/src/components/Shimmer/ShimmerGap/ShimmerGap.base.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { classNamesFunction } from '../../../Utilities'; -import { IShimmerGapProps, IShimmerGapStyleProps, IShimmerGapStyles } from './ShimmerGap.types'; +import type { IShimmerGapProps, IShimmerGapStyleProps, IShimmerGapStyles } from './ShimmerGap.types'; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/components/Shimmer/ShimmerGap/ShimmerGap.styles.ts b/packages/react/src/components/Shimmer/ShimmerGap/ShimmerGap.styles.ts index f893133a26de66..d9d1ae91ff1a19 100644 --- a/packages/react/src/components/Shimmer/ShimmerGap/ShimmerGap.styles.ts +++ b/packages/react/src/components/Shimmer/ShimmerGap/ShimmerGap.styles.ts @@ -1,5 +1,6 @@ -import { IShimmerGapStyleProps, IShimmerGapStyles } from './ShimmerGap.types'; -import { IRawStyle, getGlobalClassNames, HighContrastSelector } from '../../../Styling'; +import { getGlobalClassNames, HighContrastSelector } from '../../../Styling'; +import type { IShimmerGapStyleProps, IShimmerGapStyles } from './ShimmerGap.types'; +import type { IRawStyle } from '../../../Styling'; const GlobalClassNames = { root: 'ms-ShimmerGap-root', diff --git a/packages/react/src/components/Shimmer/ShimmerGap/ShimmerGap.tsx b/packages/react/src/components/Shimmer/ShimmerGap/ShimmerGap.tsx index 9b52295660afdb..0cb4b50784409e 100644 --- a/packages/react/src/components/Shimmer/ShimmerGap/ShimmerGap.tsx +++ b/packages/react/src/components/Shimmer/ShimmerGap/ShimmerGap.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { styled } from '../../../Utilities'; -import { IShimmerGapProps, IShimmerGapStyleProps, IShimmerGapStyles } from './ShimmerGap.types'; import { ShimmerGapBase } from './ShimmerGap.base'; import { getStyles } from './ShimmerGap.styles'; +import type { IShimmerGapProps, IShimmerGapStyleProps, IShimmerGapStyles } from './ShimmerGap.types'; export const ShimmerGap: React.FunctionComponent = styled< IShimmerGapProps, diff --git a/packages/react/src/components/Shimmer/ShimmerGap/ShimmerGap.types.ts b/packages/react/src/components/Shimmer/ShimmerGap/ShimmerGap.types.ts index f89075cd546997..ce166527065ff9 100644 --- a/packages/react/src/components/Shimmer/ShimmerGap/ShimmerGap.types.ts +++ b/packages/react/src/components/Shimmer/ShimmerGap/ShimmerGap.types.ts @@ -1,6 +1,6 @@ import * as React from 'react'; -import { IStyle, IRawStyle, ITheme } from '../../../Styling'; -import { IStyleFunctionOrObject, IRefObject } from '../../../Utilities'; +import type { IStyle, IRawStyle, ITheme } from '../../../Styling'; +import type { IStyleFunctionOrObject, IRefObject } from '../../../Utilities'; /** * {@docCategory Shimmer} diff --git a/packages/react/src/components/Shimmer/ShimmerLine/ShimmerLine.base.tsx b/packages/react/src/components/Shimmer/ShimmerLine/ShimmerLine.base.tsx index 8f763d1622e42c..3d8ef09a7f240f 100644 --- a/packages/react/src/components/Shimmer/ShimmerLine/ShimmerLine.base.tsx +++ b/packages/react/src/components/Shimmer/ShimmerLine/ShimmerLine.base.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { classNamesFunction } from '../../../Utilities'; -import { IShimmerLineProps, IShimmerLineStyleProps, IShimmerLineStyles } from './ShimmerLine.types'; +import type { IShimmerLineProps, IShimmerLineStyleProps, IShimmerLineStyles } from './ShimmerLine.types'; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/components/Shimmer/ShimmerLine/ShimmerLine.styles.ts b/packages/react/src/components/Shimmer/ShimmerLine/ShimmerLine.styles.ts index f250c5d23891b9..e4096b4831f661 100644 --- a/packages/react/src/components/Shimmer/ShimmerLine/ShimmerLine.styles.ts +++ b/packages/react/src/components/Shimmer/ShimmerLine/ShimmerLine.styles.ts @@ -1,5 +1,6 @@ -import { IShimmerLineStyleProps, IShimmerLineStyles } from './ShimmerLine.types'; -import { IRawStyle, getGlobalClassNames, HighContrastSelector } from '../../../Styling'; +import { getGlobalClassNames, HighContrastSelector } from '../../../Styling'; +import type { IShimmerLineStyleProps, IShimmerLineStyles } from './ShimmerLine.types'; +import type { IRawStyle } from '../../../Styling'; const GlobalClassNames = { root: 'ms-ShimmerLine-root', diff --git a/packages/react/src/components/Shimmer/ShimmerLine/ShimmerLine.tsx b/packages/react/src/components/Shimmer/ShimmerLine/ShimmerLine.tsx index a525ced5d9bc3d..f7751e8426b806 100644 --- a/packages/react/src/components/Shimmer/ShimmerLine/ShimmerLine.tsx +++ b/packages/react/src/components/Shimmer/ShimmerLine/ShimmerLine.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { styled } from '../../../Utilities'; -import { IShimmerLineProps, IShimmerLineStyleProps, IShimmerLineStyles } from './ShimmerLine.types'; import { ShimmerLineBase } from './ShimmerLine.base'; import { getStyles } from './ShimmerLine.styles'; +import type { IShimmerLineProps, IShimmerLineStyleProps, IShimmerLineStyles } from './ShimmerLine.types'; export const ShimmerLine: React.FunctionComponent = styled< IShimmerLineProps, diff --git a/packages/react/src/components/Shimmer/ShimmerLine/ShimmerLine.types.ts b/packages/react/src/components/Shimmer/ShimmerLine/ShimmerLine.types.ts index 39cb96ddbd53a2..e2e4ee20694d23 100644 --- a/packages/react/src/components/Shimmer/ShimmerLine/ShimmerLine.types.ts +++ b/packages/react/src/components/Shimmer/ShimmerLine/ShimmerLine.types.ts @@ -1,6 +1,6 @@ import * as React from 'react'; -import { IStyle, IRawStyle, ITheme } from '../../../Styling'; -import { IStyleFunctionOrObject, IRefObject } from '../../../Utilities'; +import type { IStyle, IRawStyle, ITheme } from '../../../Styling'; +import type { IStyleFunctionOrObject, IRefObject } from '../../../Utilities'; /** * {@docCategory Shimmer} diff --git a/packages/react/src/components/Slider/Slider.base.tsx b/packages/react/src/components/Slider/Slider.base.tsx index 7dffc80f8a6b95..c1370a815d760b 100644 --- a/packages/react/src/components/Slider/Slider.base.tsx +++ b/packages/react/src/components/Slider/Slider.base.tsx @@ -2,8 +2,8 @@ import * as React from 'react'; import { useWarnings } from '@fluentui/react-hooks'; import { FocusRects } from '@fluentui/utilities'; import { Label } from '../Label/Label'; -import { ISliderProps } from './Slider.types'; import { useSlider } from './useSlider'; +import type { ISliderProps } from './Slider.types'; const COMPONENT_NAME = 'SliderBase'; diff --git a/packages/react/src/components/Slider/Slider.styles.ts b/packages/react/src/components/Slider/Slider.styles.ts index 53b21aea17f0b3..5a692e8cfa55dc 100644 --- a/packages/react/src/components/Slider/Slider.styles.ts +++ b/packages/react/src/components/Slider/Slider.styles.ts @@ -1,4 +1,3 @@ -import { ISliderStyleProps, ISliderStyles } from './Slider.types'; import { getGlobalClassNames, HighContrastSelector, @@ -6,6 +5,7 @@ import { getFocusStyle, } from '@fluentui/style-utilities'; import { getRTL } from '@fluentui/utilities'; +import type { ISliderStyleProps, ISliderStyles } from './Slider.types'; const GlobalClassNames = { root: 'ms-Slider', diff --git a/packages/react/src/components/Slider/Slider.test.tsx b/packages/react/src/components/Slider/Slider.test.tsx index 91d3f7482c311b..b2f16ca38e65de 100644 --- a/packages/react/src/components/Slider/Slider.test.tsx +++ b/packages/react/src/components/Slider/Slider.test.tsx @@ -5,8 +5,8 @@ import { mount, ReactWrapper } from 'enzyme'; import { resetIds, KeyCodes } from '@fluentui/utilities'; import { create } from '@fluentui/utilities/lib/test'; import { Slider } from './Slider'; -import { ISlider } from './Slider.types'; import { isConformant } from '../../common/isConformant'; +import type { ISlider } from './Slider.types'; const MIN_PREFIX = 'min'; const MAX_PREFIX = 'max'; diff --git a/packages/react/src/components/Slider/Slider.tsx b/packages/react/src/components/Slider/Slider.tsx index d966e1760d464e..9cb09b33fc1d08 100644 --- a/packages/react/src/components/Slider/Slider.tsx +++ b/packages/react/src/components/Slider/Slider.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { styled } from '@fluentui/utilities'; -import { ISliderProps, ISliderStyleProps, ISliderStyles } from './Slider.types'; import { SliderBase } from './Slider.base'; import { getStyles } from './Slider.styles'; +import type { ISliderProps, ISliderStyleProps, ISliderStyles } from './Slider.types'; export const Slider: React.FunctionComponent = styled( SliderBase, diff --git a/packages/react/src/components/Slider/Slider.types.ts b/packages/react/src/components/Slider/Slider.types.ts index 543dfb4f92ca0d..27e09c538e1d62 100644 --- a/packages/react/src/components/Slider/Slider.types.ts +++ b/packages/react/src/components/Slider/Slider.types.ts @@ -1,6 +1,6 @@ import * as React from 'react'; -import { IStyle, ITheme } from '@fluentui/style-utilities'; -import { IStyleFunctionOrObject, IRefObject } from '@fluentui/utilities'; +import type { IStyle, ITheme } from '@fluentui/style-utilities'; +import type { IStyleFunctionOrObject, IRefObject } from '@fluentui/utilities'; /** * {@docCategory Slider} diff --git a/packages/react/src/components/Slider/useSlider.ts b/packages/react/src/components/Slider/useSlider.ts index eb4b51f19c66d4..8e617cbb9ae275 100644 --- a/packages/react/src/components/Slider/useSlider.ts +++ b/packages/react/src/components/Slider/useSlider.ts @@ -1,5 +1,4 @@ import * as React from 'react'; -import { ISliderProps, ISliderStyleProps, ISliderStyles } from './Slider.types'; import { useId, useControllableValue, useConst, useSetTimeout } from '@fluentui/react-hooks'; import { KeyCodes, @@ -11,7 +10,8 @@ import { getNativeProps, divProperties, } from '@fluentui/utilities'; -import { ILabelProps } from '../Label/index'; +import type { ISliderProps, ISliderStyleProps, ISliderStyles } from './Slider.types'; +import type { ILabelProps } from '../Label/index'; export const ONKEYDOWN_TIMEOUT_DURATION = 1000; diff --git a/packages/react/src/components/SpinButton/SpinButton.base.tsx b/packages/react/src/components/SpinButton/SpinButton.base.tsx index cec17efd6fb40e..c950c3c81fc1db 100644 --- a/packages/react/src/components/SpinButton/SpinButton.base.tsx +++ b/packages/react/src/components/SpinButton/SpinButton.base.tsx @@ -12,9 +12,10 @@ import { divProperties, } from '../../Utilities'; import { getArrowButtonStyles } from './SpinButton.styles'; -import { ISpinButtonProps, ISpinButtonStyleProps, ISpinButtonStyles, KeyboardSpinDirection } from './SpinButton.types'; +import { KeyboardSpinDirection } from './SpinButton.types'; import { Position } from '../../Positioning'; import { useAsync, useControllableValue, useWarnings, useId, usePrevious } from '@fluentui/react-hooks'; +import type { ISpinButtonProps, ISpinButtonStyleProps, ISpinButtonStyles } from './SpinButton.types'; interface ISpinButtonInternalState { spinningByMouse?: boolean; diff --git a/packages/react/src/components/SpinButton/SpinButton.styles.ts b/packages/react/src/components/SpinButton/SpinButton.styles.ts index 82bbf503168d6c..9b649005df4393 100644 --- a/packages/react/src/components/SpinButton/SpinButton.styles.ts +++ b/packages/react/src/components/SpinButton/SpinButton.styles.ts @@ -1,16 +1,9 @@ -import { - IRawStyle, - ITheme, - concatStyleSets, - HighContrastSelector, - IconFontSizes, - getInputFocusStyle, -} from '../../Styling'; -import { IButtonStyles } from '../../Button'; - -import { ISpinButtonStyles, ISpinButtonStyleProps } from './SpinButton.types'; +import { concatStyleSets, HighContrastSelector, IconFontSizes, getInputFocusStyle } from '../../Styling'; import { memoizeFunction } from '../../Utilities'; import { Position } from '../../Positioning'; +import type { IRawStyle, ITheme } from '../../Styling'; +import type { IButtonStyles } from '../../Button'; +import type { ISpinButtonStyles, ISpinButtonStyleProps } from './SpinButton.types'; const ARROW_BUTTON_WIDTH = 23; const ARROW_BUTTON_ICON_SIZE = 8; diff --git a/packages/react/src/components/SpinButton/SpinButton.test.tsx b/packages/react/src/components/SpinButton/SpinButton.test.tsx index bba70d0d253481..53bca323dc9a85 100644 --- a/packages/react/src/components/SpinButton/SpinButton.test.tsx +++ b/packages/react/src/components/SpinButton/SpinButton.test.tsx @@ -4,10 +4,10 @@ import { create } from '@fluentui/utilities/lib/test'; import { ReactWrapper, mount } from 'enzyme'; import { SpinButton } from './SpinButton'; -import { ISpinButton, ISpinButtonProps } from './SpinButton.types'; import { KeyCodes, resetIds } from '../../Utilities'; import { mockEvent } from '../../common/testUtilities'; import { isConformant } from '../../common/isConformant'; +import type { ISpinButton, ISpinButtonProps } from './SpinButton.types'; describe('SpinButton', () => { let ref: React.RefObject; diff --git a/packages/react/src/components/SpinButton/SpinButton.tsx b/packages/react/src/components/SpinButton/SpinButton.tsx index 13f4a8bd8c33bb..0996505a89397d 100644 --- a/packages/react/src/components/SpinButton/SpinButton.tsx +++ b/packages/react/src/components/SpinButton/SpinButton.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { styled } from '../../Utilities'; -import { ISpinButtonProps, ISpinButtonStyles } from './SpinButton.types'; import { SpinButtonBase } from './SpinButton.base'; import { getStyles } from './SpinButton.styles'; +import type { ISpinButtonProps, ISpinButtonStyles } from './SpinButton.types'; /** * The SpinButton control and related tabs pattern are used for navigating frequently accessed, diff --git a/packages/react/src/components/SpinButton/SpinButton.types.ts b/packages/react/src/components/SpinButton/SpinButton.types.ts index e9aa742a461c15..3ccd97c2d0a0e5 100644 --- a/packages/react/src/components/SpinButton/SpinButton.types.ts +++ b/packages/react/src/components/SpinButton/SpinButton.types.ts @@ -1,11 +1,10 @@ import * as React from 'react'; import { Position } from '../../Positioning'; -import { IButtonStyles } from '../../Button'; -import { IIconProps } from '../../Icon'; -import { ITheme, IStyle } from '../../Styling'; -import { IKeytipProps } from '../../Keytip'; -import { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; -import { IButtonProps } from '../../Button'; +import type { IButtonStyles, IButtonProps } from '../../Button'; +import type { IIconProps } from '../../Icon'; +import type { ITheme, IStyle } from '../../Styling'; +import type { IKeytipProps } from '../../Keytip'; +import type { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; /** * {@docCategory SpinButton} diff --git a/packages/react/src/components/Spinner/Spinner.base.tsx b/packages/react/src/components/Spinner/Spinner.base.tsx index ef535bc98914c6..710ddf11a44794 100644 --- a/packages/react/src/components/Spinner/Spinner.base.tsx +++ b/packages/react/src/components/Spinner/Spinner.base.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; -import { ISpinnerProps, ISpinnerStyleProps, ISpinnerStyles, SpinnerType, SpinnerSize } from './Spinner.types'; +import { SpinnerType, SpinnerSize } from './Spinner.types'; import { classNamesFunction, DelayedRender, getNativeProps, divProperties } from '../../Utilities'; +import type { ISpinnerProps, ISpinnerStyleProps, ISpinnerStyles } from './Spinner.types'; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/components/Spinner/Spinner.styles.tsx b/packages/react/src/components/Spinner/Spinner.styles.tsx index c796b147b8fed8..feec03a59970d0 100644 --- a/packages/react/src/components/Spinner/Spinner.styles.tsx +++ b/packages/react/src/components/Spinner/Spinner.styles.tsx @@ -1,4 +1,4 @@ -import { ISpinnerStyleProps, ISpinnerStyles, SpinnerSize } from './Spinner.types'; +import { SpinnerSize } from './Spinner.types'; import { hiddenContentStyle, keyframes, @@ -7,6 +7,7 @@ import { getHighContrastNoAdjustStyle, } from '../../Styling'; import { memoizeFunction } from '../../Utilities'; +import type { ISpinnerStyleProps, ISpinnerStyles } from './Spinner.types'; const GlobalClassNames = { root: 'ms-Spinner', diff --git a/packages/react/src/components/Spinner/Spinner.tsx b/packages/react/src/components/Spinner/Spinner.tsx index 7afe926afedeea..f31446afb1a0d6 100644 --- a/packages/react/src/components/Spinner/Spinner.tsx +++ b/packages/react/src/components/Spinner/Spinner.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled } from '../../Utilities'; import { SpinnerBase } from './Spinner.base'; import { getStyles } from './Spinner.styles'; -import { ISpinnerProps, ISpinnerStyles, ISpinnerStyleProps } from './Spinner.types'; +import type { ISpinnerProps, ISpinnerStyles, ISpinnerStyleProps } from './Spinner.types'; export const Spinner: React.FunctionComponent = styled< ISpinnerProps, diff --git a/packages/react/src/components/Spinner/Spinner.types.ts b/packages/react/src/components/Spinner/Spinner.types.ts index ab094e92960968..14800c32c87b6f 100644 --- a/packages/react/src/components/Spinner/Spinner.types.ts +++ b/packages/react/src/components/Spinner/Spinner.types.ts @@ -1,6 +1,6 @@ import * as React from 'react'; -import { ITheme, IStyle } from '../../Styling'; -import { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; +import type { ITheme, IStyle } from '../../Styling'; +import type { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; /** * {@docCategory Spinner} diff --git a/packages/react/src/components/Stack/Stack.styles.ts b/packages/react/src/components/Stack/Stack.styles.ts index 1e7fcc9f5e0e83..c402c9241e84c7 100644 --- a/packages/react/src/components/Stack/Stack.styles.ts +++ b/packages/react/src/components/Stack/Stack.styles.ts @@ -1,6 +1,6 @@ -import { IStackComponent, IStackStyles, IStackStylesReturnType } from './Stack.types'; import { parseGap, parsePadding } from './StackUtils'; import { getGlobalClassNames } from '../../Styling'; +import type { IStackComponent, IStackStyles, IStackStylesReturnType } from './Stack.types'; const nameMap: { [key: string]: string } = { start: 'flex-start', diff --git a/packages/react/src/components/Stack/Stack.tsx b/packages/react/src/components/Stack/Stack.tsx index 99fb961d92867d..14ce564f03d3f1 100644 --- a/packages/react/src/components/Stack/Stack.tsx +++ b/packages/react/src/components/Stack/Stack.tsx @@ -4,9 +4,9 @@ import * as React from 'react'; import { withSlots, createComponent, getSlots } from '@fluentui/foundation-legacy'; import { getNativeProps, htmlElementProperties, warnDeprecations } from '../../Utilities'; import { styles } from './Stack.styles'; -import { IStackComponent, IStackProps, IStackSlots } from './Stack.types'; import { StackItem } from './StackItem/StackItem'; -import { IStackItemProps } from './StackItem/StackItem.types'; +import type { IStackComponent, IStackProps, IStackSlots } from './Stack.types'; +import type { IStackItemProps } from './StackItem/StackItem.types'; const StackView: IStackComponent['view'] = props => { const { as: RootType = 'div', disableShrink, wrap, ...rest } = props; diff --git a/packages/react/src/components/Stack/Stack.types.ts b/packages/react/src/components/Stack/Stack.types.ts index 85c97aedbcd40d..c37cef420738ce 100644 --- a/packages/react/src/components/Stack/Stack.types.ts +++ b/packages/react/src/components/Stack/Stack.types.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { +import type { IComponentStyles, IHTMLSlot, ISlotProp, diff --git a/packages/react/src/components/Stack/StackItem/StackItem.styles.ts b/packages/react/src/components/Stack/StackItem/StackItem.styles.ts index d65d10b265a44d..32acc5575963c1 100644 --- a/packages/react/src/components/Stack/StackItem/StackItem.styles.ts +++ b/packages/react/src/components/Stack/StackItem/StackItem.styles.ts @@ -1,5 +1,5 @@ import { getGlobalClassNames } from '../../../Styling'; -import { IStackItemComponent, IStackItemStyles, IStackItemStylesReturnType } from './StackItem.types'; +import type { IStackItemComponent, IStackItemStyles, IStackItemStylesReturnType } from './StackItem.types'; const GlobalClassNames = { root: 'ms-StackItem', diff --git a/packages/react/src/components/Stack/StackItem/StackItem.tsx b/packages/react/src/components/Stack/StackItem/StackItem.tsx index ba4be27737e0cf..288f39c027d588 100644 --- a/packages/react/src/components/Stack/StackItem/StackItem.tsx +++ b/packages/react/src/components/Stack/StackItem/StackItem.tsx @@ -3,8 +3,8 @@ import * as React from 'react'; import { withSlots, createComponent, getSlots } from '@fluentui/foundation-legacy'; import { getNativeProps, htmlElementProperties } from '../../../Utilities'; -import { IStackItemComponent, IStackItemProps, IStackItemSlots } from './StackItem.types'; import { StackItemStyles as styles } from './StackItem.styles'; +import type { IStackItemComponent, IStackItemProps, IStackItemSlots } from './StackItem.types'; const StackItemView: IStackItemComponent['view'] = props => { const { children } = props; diff --git a/packages/react/src/components/Stack/StackItem/StackItem.types.ts b/packages/react/src/components/Stack/StackItem/StackItem.types.ts index d8c4392a5829bb..40802648ae8159 100644 --- a/packages/react/src/components/Stack/StackItem/StackItem.types.ts +++ b/packages/react/src/components/Stack/StackItem/StackItem.types.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { +import type { IComponentStyles, IHTMLSlot, IComponent, diff --git a/packages/react/src/components/Stack/StackUtils.ts b/packages/react/src/components/Stack/StackUtils.ts index 88cdfdbf7baabc..03bb5d0f258578 100644 --- a/packages/react/src/components/Stack/StackUtils.ts +++ b/packages/react/src/components/Stack/StackUtils.ts @@ -1,9 +1,5 @@ -/** - * Functions used by Stack components to simplify style-related computations - */ - -import { ITheme } from '../../Styling'; -import { IStackProps } from './Stack.types'; +import type { ITheme } from '../../Styling'; +import type { IStackProps } from './Stack.types'; // Helper function that converts a themed spacing key (if given) to the corresponding themed spacing value. const _getThemedSpacing = (space: string, theme: ITheme): string => { diff --git a/packages/react/src/components/Sticky/Sticky.tsx b/packages/react/src/components/Sticky/Sticky.tsx index 4d8681b20c593a..b83c8ea990325e 100644 --- a/packages/react/src/components/Sticky/Sticky.tsx +++ b/packages/react/src/components/Sticky/Sticky.tsx @@ -1,8 +1,10 @@ import * as React from 'react'; import { initializeComponentRef } from '../../Utilities'; import { hiddenContentStyle } from '../../Styling'; -import { IScrollablePaneContext, ScrollablePaneContext } from '../ScrollablePane/ScrollablePane.types'; -import { IStickyProps, StickyPositionType } from './Sticky.types'; +import { ScrollablePaneContext } from '../ScrollablePane/ScrollablePane.types'; +import { StickyPositionType } from './Sticky.types'; +import type { IScrollablePaneContext } from '../ScrollablePane/ScrollablePane.types'; +import type { IStickyProps } from './Sticky.types'; export interface IStickyState { isStickyTop: boolean; diff --git a/packages/react/src/components/Sticky/Sticky.types.ts b/packages/react/src/components/Sticky/Sticky.types.ts index c006374a3580f5..8e7561733a9093 100644 --- a/packages/react/src/components/Sticky/Sticky.types.ts +++ b/packages/react/src/components/Sticky/Sticky.types.ts @@ -1,6 +1,6 @@ import * as React from 'react'; -import { IRefObject } from '../../Utilities'; import { Sticky } from './Sticky'; +import type { IRefObject } from '../../Utilities'; // eslint-disable-next-line deprecation/deprecation export interface IStickyProps extends React.Props { diff --git a/packages/react/src/components/SwatchColorPicker/ColorPickerGridCell.base.tsx b/packages/react/src/components/SwatchColorPicker/ColorPickerGridCell.base.tsx index 8774b1faffad62..87f8cb43d5ba1a 100644 --- a/packages/react/src/components/SwatchColorPicker/ColorPickerGridCell.base.tsx +++ b/packages/react/src/components/SwatchColorPicker/ColorPickerGridCell.base.tsx @@ -1,11 +1,12 @@ import * as React from 'react'; -import { ITheme, mergeStyleSets, IProcessedStyleSet } from '../../Styling'; +import { mergeStyleSets } from '../../Styling'; import { classNamesFunction, memoizeFunction } from '../../Utilities'; import { getColorFromString } from '../../Color'; import { ButtonGridCell } from '../../utilities/ButtonGrid/ButtonGridCell'; import { getStyles as getActionButtonStyles } from '../Button/ActionButton/ActionButton.styles'; -import { IButtonClassNames } from '../Button/BaseButton.classNames'; -import { +import type { ITheme, IProcessedStyleSet } from '../../Styling'; +import type { IButtonClassNames } from '../Button/BaseButton.classNames'; +import type { IColorCellProps, IColorPickerGridCellProps, IColorPickerGridCellStyleProps, diff --git a/packages/react/src/components/SwatchColorPicker/ColorPickerGridCell.styles.ts b/packages/react/src/components/SwatchColorPicker/ColorPickerGridCell.styles.ts index 893066b80b80e5..dfbe738e6d39c6 100644 --- a/packages/react/src/components/SwatchColorPicker/ColorPickerGridCell.styles.ts +++ b/packages/react/src/components/SwatchColorPicker/ColorPickerGridCell.styles.ts @@ -1,6 +1,6 @@ import { IsFocusVisibleClassName } from '../../Utilities'; import { HighContrastSelector, getFocusStyle } from '../../Styling'; -import { IColorPickerGridCellStyleProps, IColorPickerGridCellStyles } from './ColorPickerGridCell.types'; +import type { IColorPickerGridCellStyleProps, IColorPickerGridCellStyles } from './ColorPickerGridCell.types'; // Size breakpoint when the default border width changes from 2px to 4px. const CELL_BORDER_BREAKPOINT = 24; diff --git a/packages/react/src/components/SwatchColorPicker/ColorPickerGridCell.tsx b/packages/react/src/components/SwatchColorPicker/ColorPickerGridCell.tsx index 575daeb745f6c7..5b77d824a5cc57 100644 --- a/packages/react/src/components/SwatchColorPicker/ColorPickerGridCell.tsx +++ b/packages/react/src/components/SwatchColorPicker/ColorPickerGridCell.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; import { styled } from '../../Utilities'; import { ColorPickerGridCellBase } from './ColorPickerGridCell.base'; -import { +import { getStyles } from './ColorPickerGridCell.styles'; +import type { IColorPickerGridCellProps, IColorPickerGridCellStyleProps, IColorPickerGridCellStyles, } from './ColorPickerGridCell.types'; -import { getStyles } from './ColorPickerGridCell.styles'; export const ColorPickerGridCell: React.FunctionComponent = styled< IColorPickerGridCellProps, diff --git a/packages/react/src/components/SwatchColorPicker/ColorPickerGridCell.types.ts b/packages/react/src/components/SwatchColorPicker/ColorPickerGridCell.types.ts index d1a17626caa511..97e94634bc0c01 100644 --- a/packages/react/src/components/SwatchColorPicker/ColorPickerGridCell.types.ts +++ b/packages/react/src/components/SwatchColorPicker/ColorPickerGridCell.types.ts @@ -1,6 +1,6 @@ import * as React from 'react'; -import { IStyle, ITheme } from '../../Styling'; -import { IStyleFunctionOrObject } from '../../Utilities'; +import type { IStyle, ITheme } from '../../Styling'; +import type { IStyleFunctionOrObject } from '../../Utilities'; /** * {@docCategory SwatchColorPicker} diff --git a/packages/react/src/components/SwatchColorPicker/SwatchColorPicker.base.tsx b/packages/react/src/components/SwatchColorPicker/SwatchColorPicker.base.tsx index 8de0a2eba4782b..b047a845c437cd 100644 --- a/packages/react/src/components/SwatchColorPicker/SwatchColorPicker.base.tsx +++ b/packages/react/src/components/SwatchColorPicker/SwatchColorPicker.base.tsx @@ -1,15 +1,15 @@ import * as React from 'react'; import { classNamesFunction, KeyCodes } from '../../Utilities'; -import { +import { ButtonGrid } from '../../utilities/ButtonGrid/ButtonGrid'; +import { ColorPickerGridCell } from './ColorPickerGridCell'; +import { useId, useConst, useSetTimeout, useControllableValue, useWarnings } from '@fluentui/react-hooks'; +import type { ISwatchColorPickerProps, ISwatchColorPickerStyleProps, ISwatchColorPickerStyles, } from './SwatchColorPicker.types'; -import { ButtonGrid } from '../../utilities/ButtonGrid/ButtonGrid'; -import { IColorCellProps } from './ColorPickerGridCell.types'; -import { ColorPickerGridCell } from './ColorPickerGridCell'; -import { useId, useConst, useSetTimeout, useControllableValue, useWarnings } from '@fluentui/react-hooks'; -import { IButtonGridProps } from '../../utilities/ButtonGrid/ButtonGrid.types'; +import type { IColorCellProps } from './ColorPickerGridCell.types'; +import type { IButtonGridProps } from '../../utilities/ButtonGrid/ButtonGrid.types'; interface ISwatchColorPickerInternalState { isNavigationIdle: boolean; diff --git a/packages/react/src/components/SwatchColorPicker/SwatchColorPicker.styles.ts b/packages/react/src/components/SwatchColorPicker/SwatchColorPicker.styles.ts index 8c1355c55019e4..62586a98f75f17 100644 --- a/packages/react/src/components/SwatchColorPicker/SwatchColorPicker.styles.ts +++ b/packages/react/src/components/SwatchColorPicker/SwatchColorPicker.styles.ts @@ -1,5 +1,5 @@ -import { ISwatchColorPickerStyleProps, ISwatchColorPickerStyles } from './SwatchColorPicker.types'; import { getGlobalClassNames } from '../../Styling'; +import type { ISwatchColorPickerStyleProps, ISwatchColorPickerStyles } from './SwatchColorPicker.types'; const GlobalClassNames = { focusedContainer: 'ms-swatchColorPickerBodyContainer', diff --git a/packages/react/src/components/SwatchColorPicker/SwatchColorPicker.test.tsx b/packages/react/src/components/SwatchColorPicker/SwatchColorPicker.test.tsx index ac31359716f5f0..316eac4f30f6dc 100644 --- a/packages/react/src/components/SwatchColorPicker/SwatchColorPicker.test.tsx +++ b/packages/react/src/components/SwatchColorPicker/SwatchColorPicker.test.tsx @@ -2,11 +2,11 @@ import * as React from 'react'; import { create } from '@fluentui/utilities/lib/test'; import { mount } from 'enzyme'; import { SwatchColorPicker } from './SwatchColorPicker'; -import { ISwatchColorPickerProps } from './SwatchColorPicker.types'; -import { IColorCellProps } from './ColorPickerGridCell.types'; import { resetIds } from '@fluentui/utilities'; import { isConformant } from '../../common/isConformant'; import { expectNodes, findNodes } from '../../common/testUtilities'; +import type { ISwatchColorPickerProps } from './SwatchColorPicker.types'; +import type { IColorCellProps } from './ColorPickerGridCell.types'; const DEFAULT_OPTIONS: IColorCellProps[] = [ { id: 'a', label: 'green', color: '#00ff00' }, diff --git a/packages/react/src/components/SwatchColorPicker/SwatchColorPicker.tsx b/packages/react/src/components/SwatchColorPicker/SwatchColorPicker.tsx index 223cbcf8a937e3..f2f5c7f239399f 100644 --- a/packages/react/src/components/SwatchColorPicker/SwatchColorPicker.tsx +++ b/packages/react/src/components/SwatchColorPicker/SwatchColorPicker.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; import { styled } from '../../Utilities'; import { SwatchColorPickerBase } from './SwatchColorPicker.base'; -import { +import { getStyles } from './SwatchColorPicker.styles'; +import type { ISwatchColorPickerProps, ISwatchColorPickerStyles, ISwatchColorPickerStyleProps, } from './SwatchColorPicker.types'; -import { getStyles } from './SwatchColorPicker.styles'; export const SwatchColorPicker: React.FunctionComponent = styled< ISwatchColorPickerProps, diff --git a/packages/react/src/components/SwatchColorPicker/SwatchColorPicker.types.ts b/packages/react/src/components/SwatchColorPicker/SwatchColorPicker.types.ts index 2ad39afdb7e711..9d7d8ece94a077 100644 --- a/packages/react/src/components/SwatchColorPicker/SwatchColorPicker.types.ts +++ b/packages/react/src/components/SwatchColorPicker/SwatchColorPicker.types.ts @@ -1,7 +1,7 @@ import * as React from 'react'; -import { IStyle, ITheme } from '../../Styling'; -import { IStyleFunctionOrObject, IRenderFunction } from '../../Utilities'; -import { +import type { IStyle, ITheme } from '../../Styling'; +import type { IStyleFunctionOrObject, IRenderFunction } from '../../Utilities'; +import type { IColorCellProps, IColorPickerGridCellStyleProps, IColorPickerGridCellStyles, diff --git a/packages/react/src/components/TeachingBubble/TeachingBubble.base.tsx b/packages/react/src/components/TeachingBubble/TeachingBubble.base.tsx index efe3f4921fca37..f50adf04ac1978 100644 --- a/packages/react/src/components/TeachingBubble/TeachingBubble.base.tsx +++ b/packages/react/src/components/TeachingBubble/TeachingBubble.base.tsx @@ -1,16 +1,17 @@ import * as React from 'react'; import { classNamesFunction } from '../../Utilities'; import { TeachingBubbleContent } from './TeachingBubbleContent'; -import { +import { Callout } from '../../Callout'; +import { DirectionalHint } from '../../common/DirectionalHint'; +import { useMergedRefs } from '@fluentui/react-hooks'; +import type { ITeachingBubble, ITeachingBubbleProps, ITeachingBubbleStyleProps, ITeachingBubbleStyles, ITeachingBubbleSubComponentStyles, } from './TeachingBubble.types'; -import { Callout, ICalloutProps } from '../../Callout'; -import { DirectionalHint } from '../../common/DirectionalHint'; -import { useMergedRefs } from '@fluentui/react-hooks'; +import type { ICalloutProps } from '../../Callout'; const COMPONENT_NAME = 'TeachingBubble'; const defaultCalloutProps: ICalloutProps = { diff --git a/packages/react/src/components/TeachingBubble/TeachingBubble.styles.ts b/packages/react/src/components/TeachingBubble/TeachingBubble.styles.ts index f80d428e1e6001..02683101874860 100644 --- a/packages/react/src/components/TeachingBubble/TeachingBubble.styles.ts +++ b/packages/react/src/components/TeachingBubble/TeachingBubble.styles.ts @@ -1,15 +1,8 @@ -import { ITeachingBubbleStyleProps, ITeachingBubbleStyles } from './TeachingBubble.types'; -import { ICalloutContentStyleProps } from '../../Callout'; -import { - AnimationVariables, - FontWeights, - getFocusStyle, - getGlobalClassNames, - GlobalClassNames, - IStyle, - keyframes, -} from '../../Styling'; +import { AnimationVariables, FontWeights, getFocusStyle, getGlobalClassNames, keyframes } from '../../Styling'; import { memoizeFunction } from '../../Utilities'; +import type { ITeachingBubbleStyleProps, ITeachingBubbleStyles } from './TeachingBubble.types'; +import type { ICalloutContentStyleProps } from '../../Callout'; +import type { GlobalClassNames, IStyle } from '../../Styling'; const globalClassNames = { root: 'ms-TeachingBubble', diff --git a/packages/react/src/components/TeachingBubble/TeachingBubble.ts b/packages/react/src/components/TeachingBubble/TeachingBubble.ts index 82b0839aa83747..f088f15ff43ebc 100644 --- a/packages/react/src/components/TeachingBubble/TeachingBubble.ts +++ b/packages/react/src/components/TeachingBubble/TeachingBubble.ts @@ -1,8 +1,8 @@ import * as React from 'react'; import { styled } from '../../Utilities'; -import { ITeachingBubbleProps, ITeachingBubbleStyleProps, ITeachingBubbleStyles } from './TeachingBubble.types'; import { TeachingBubbleBase } from './TeachingBubble.base'; import { getStyles } from './TeachingBubble.styles'; +import type { ITeachingBubbleProps, ITeachingBubbleStyleProps, ITeachingBubbleStyles } from './TeachingBubble.types'; export const TeachingBubble: React.FunctionComponent = styled< ITeachingBubbleProps, diff --git a/packages/react/src/components/TeachingBubble/TeachingBubble.types.ts b/packages/react/src/components/TeachingBubble/TeachingBubble.types.ts index 85860964a5b3ef..b85bc091baa69d 100644 --- a/packages/react/src/components/TeachingBubble/TeachingBubble.types.ts +++ b/packages/react/src/components/TeachingBubble/TeachingBubble.types.ts @@ -1,12 +1,12 @@ import * as React from 'react'; -import { IImageProps } from '../../Image'; -import { IButtonProps } from '../../Button'; -import { IAccessiblePopupProps } from '../../common/IAccessiblePopupProps'; -import { ICalloutProps, ICalloutContentStyleProps } from '../../Callout'; -import { IStyle, ITheme } from '../../Styling'; -import { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; -import { IFocusTrapZoneProps } from '../FocusTrapZone/index'; -import { Target } from '@fluentui/react-hooks'; +import type { IImageProps } from '../../Image'; +import type { IButtonProps } from '../../Button'; +import type { IAccessiblePopupProps } from '../../common/IAccessiblePopupProps'; +import type { ICalloutProps, ICalloutContentStyleProps } from '../../Callout'; +import type { IStyle, ITheme } from '../../Styling'; +import type { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; +import type { IFocusTrapZoneProps } from '../FocusTrapZone/index'; +import type { Target } from '@fluentui/react-hooks'; /** * {@docCategory TeachingBubble} diff --git a/packages/react/src/components/TeachingBubble/TeachingBubbleContent.base.tsx b/packages/react/src/components/TeachingBubble/TeachingBubbleContent.base.tsx index 2fae44db4ac838..bf67bfcc1131ab 100644 --- a/packages/react/src/components/TeachingBubble/TeachingBubbleContent.base.tsx +++ b/packages/react/src/components/TeachingBubble/TeachingBubbleContent.base.tsx @@ -1,17 +1,17 @@ import * as React from 'react'; import { classNamesFunction, KeyCodes } from '../../Utilities'; -import { - ITeachingBubbleProps, - ITeachingBubbleStyleProps, - ITeachingBubbleStyles, - ITeachingBubble, -} from './TeachingBubble.types'; import { PrimaryButton, DefaultButton, IconButton } from '../../Button'; import { Stack } from '../../Stack'; import { FocusTrapZone } from '../../FocusTrapZone'; import { Image } from '../../Image'; import { useOnEvent, useMergedRefs } from '@fluentui/react-hooks'; import { useDocument } from '../../WindowProvider'; +import type { + ITeachingBubbleProps, + ITeachingBubbleStyleProps, + ITeachingBubbleStyles, + ITeachingBubble, +} from './TeachingBubble.types'; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/components/TeachingBubble/TeachingBubbleContent.ts b/packages/react/src/components/TeachingBubble/TeachingBubbleContent.ts index 0b1ca65bbf9301..6f3d7a35863748 100644 --- a/packages/react/src/components/TeachingBubble/TeachingBubbleContent.ts +++ b/packages/react/src/components/TeachingBubble/TeachingBubbleContent.ts @@ -1,8 +1,8 @@ import * as React from 'react'; import { styled } from '../../Utilities'; -import { ITeachingBubbleProps, ITeachingBubbleStyleProps, ITeachingBubbleStyles } from './TeachingBubble.types'; import { TeachingBubbleContentBase } from './TeachingBubbleContent.base'; import { getStyles } from './TeachingBubble.styles'; +import type { ITeachingBubbleProps, ITeachingBubbleStyleProps, ITeachingBubbleStyles } from './TeachingBubble.types'; export const TeachingBubbleContent: React.FunctionComponent = styled< ITeachingBubbleProps, diff --git a/packages/react/src/components/Text/Text.styles.ts b/packages/react/src/components/Text/Text.styles.ts index f16b325aaba0dd..88fa088439b5a5 100644 --- a/packages/react/src/components/Text/Text.styles.ts +++ b/packages/react/src/components/Text/Text.styles.ts @@ -1,6 +1,5 @@ -import { ITextComponent, ITextStyles, ITextStylesReturnType, ITextProps } from './Text.types'; - -import { ITheme } from '../../Styling'; +import type { ITextComponent, ITextStyles, ITextStylesReturnType, ITextProps } from './Text.types'; +import type { ITheme } from '../../Styling'; export const TextStyles: ITextComponent['styles'] = (props: ITextProps, theme: ITheme): ITextStylesReturnType => { const { as, className, block, nowrap, variant } = props; diff --git a/packages/react/src/components/Text/Text.ts b/packages/react/src/components/Text/Text.ts index 2895560c0f3526..44d9ab08e37720 100644 --- a/packages/react/src/components/Text/Text.ts +++ b/packages/react/src/components/Text/Text.ts @@ -1,8 +1,8 @@ import * as React from 'react'; import { createComponent } from '@fluentui/foundation-legacy'; -import { ITextProps } from './Text.types'; import { TextView } from './Text.view'; import { TextStyles as styles } from './Text.styles'; +import type { ITextProps } from './Text.types'; export const Text: React.FunctionComponent = createComponent(TextView, { displayName: 'Text', diff --git a/packages/react/src/components/Text/Text.types.tsx b/packages/react/src/components/Text/Text.types.tsx index 9ef9d779fec7e1..c0253cdd690c52 100644 --- a/packages/react/src/components/Text/Text.types.tsx +++ b/packages/react/src/components/Text/Text.types.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { +import type { IComponentStyles, IHTMLSlot, ISlotProp, @@ -7,7 +7,7 @@ import { IStyleableComponentProps, ISlottableProps, } from '@fluentui/foundation-legacy'; -import { IFontStyles } from '../../Styling'; +import type { IFontStyles } from '../../Styling'; /** * {@docCategory Text} diff --git a/packages/react/src/components/Text/Text.view.tsx b/packages/react/src/components/Text/Text.view.tsx index 95692d010d048b..626666df599db2 100644 --- a/packages/react/src/components/Text/Text.view.tsx +++ b/packages/react/src/components/Text/Text.view.tsx @@ -2,7 +2,7 @@ /** @jsx withSlots */ import { withSlots, getSlots } from '@fluentui/foundation-legacy'; import { getNativeProps, htmlElementProperties } from '../../Utilities'; -import { ITextComponent, ITextProps, ITextSlots } from './Text.types'; +import type { ITextComponent, ITextProps, ITextSlots } from './Text.types'; export const TextView: ITextComponent['view'] = props => { // eslint-disable-next-line eqeqeq diff --git a/packages/react/src/components/TextField/MaskedTextField/MaskedTextField.tsx b/packages/react/src/components/TextField/MaskedTextField/MaskedTextField.tsx index c1c6c462a54c3e..d33f094c2aa8d5 100644 --- a/packages/react/src/components/TextField/MaskedTextField/MaskedTextField.tsx +++ b/packages/react/src/components/TextField/MaskedTextField/MaskedTextField.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import { TextField } from '../TextField'; -import { IMaskedTextFieldProps, IMaskedTextField } from '../TextField.types'; -import { KeyCodes, IRefObject } from '../../../Utilities'; +import { KeyCodes } from '../../../Utilities'; import { clearNext, clearPrev, @@ -10,11 +9,13 @@ import { getLeftFormatIndex, getMaskDisplay, getRightFormatIndex, - IMaskValue, insertString, parseMask, } from './inputMask'; import { useConst } from '@fluentui/react-hooks'; +import type { IMaskedTextFieldProps, IMaskedTextField } from '../TextField.types'; +import type { IRefObject } from '../../../Utilities'; +import type { IMaskValue } from './inputMask'; interface IMaskedTextFieldInternalState { maskCharData: IMaskValue[]; diff --git a/packages/react/src/components/TextField/MaskedTextField/inputMask.test.ts b/packages/react/src/components/TextField/MaskedTextField/inputMask.test.ts index fe88e6943d21c6..9ec3b5feb433a3 100644 --- a/packages/react/src/components/TextField/MaskedTextField/inputMask.test.ts +++ b/packages/react/src/components/TextField/MaskedTextField/inputMask.test.ts @@ -5,10 +5,10 @@ import { getLeftFormatIndex, getMaskDisplay, getRightFormatIndex, - IMaskValue, insertString, parseMask, } from './inputMask'; +import type { IMaskValue } from './inputMask'; const inputMask = 'Phone number m\\ask: (999) 999 - 9999'; diff --git a/packages/react/src/components/TextField/TextField.base.tsx b/packages/react/src/components/TextField/TextField.base.tsx index d69419e9f84cbc..6ec279fcc8d73e 100644 --- a/packages/react/src/components/TextField/TextField.base.tsx +++ b/packages/react/src/components/TextField/TextField.base.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; -import { IProcessedStyleSet } from '../../Styling'; -import { Label, ILabelStyleProps, ILabelStyles } from '../../Label'; +import { Label } from '../../Label'; import { Icon } from '../../Icon'; import { Async, @@ -9,7 +8,6 @@ import { getId, getNativeProps, getWindow, - IStyleFunctionOrObject, initializeComponentRef, inputProperties, isControlled, @@ -19,7 +17,10 @@ import { warnControlledUsage, warnMutuallyExclusive, } from '../../Utilities'; -import { ITextField, ITextFieldProps, ITextFieldStyleProps, ITextFieldStyles } from './TextField.types'; +import type { IProcessedStyleSet } from '../../Styling'; +import type { ILabelStyleProps, ILabelStyles } from '../../Label'; +import type { IStyleFunctionOrObject } from '../../Utilities'; +import type { ITextField, ITextFieldProps, ITextFieldStyleProps, ITextFieldStyles } from './TextField.types'; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/components/TextField/TextField.styles.tsx b/packages/react/src/components/TextField/TextField.styles.tsx index b61ad23f3c5387..fbb1ced179179e 100644 --- a/packages/react/src/components/TextField/TextField.styles.tsx +++ b/packages/react/src/components/TextField/TextField.styles.tsx @@ -4,15 +4,15 @@ import { getGlobalClassNames, getInputFocusStyle, HighContrastSelector, - IStyle, normalize, getPlaceholderStyles, IconFontSizes, getHighContrastNoAdjustStyle, } from '../../Styling'; -import { ILabelStyles, ILabelStyleProps } from '../../Label'; -import { ITextFieldStyleProps, ITextFieldStyles } from './TextField.types'; -import { IStyleFunctionOrObject } from '@fluentui/utilities'; +import type { IStyle } from '../../Styling'; +import type { ILabelStyles, ILabelStyleProps } from '../../Label'; +import type { ITextFieldStyleProps, ITextFieldStyles } from './TextField.types'; +import type { IStyleFunctionOrObject } from '@fluentui/utilities'; const globalClassNames = { root: 'ms-TextField', diff --git a/packages/react/src/components/TextField/TextField.test.tsx b/packages/react/src/components/TextField/TextField.test.tsx index 550c5bd2089ca6..98fd2cff74bde4 100644 --- a/packages/react/src/components/TextField/TextField.test.tsx +++ b/packages/react/src/components/TextField/TextField.test.tsx @@ -5,13 +5,15 @@ import { mount, ReactWrapper } from 'enzyme'; import { renderToStaticMarkup } from 'react-dom/server'; import * as path from 'path'; -import { resetIds, setWarningCallback, IRefObject, resetControlledWarnings } from '../../Utilities'; +import { resetIds, setWarningCallback, resetControlledWarnings } from '../../Utilities'; import { mountAttached, mockEvent, flushPromises } from '../../common/testUtilities'; import { TextField } from './TextField'; -import { TextFieldBase, ITextFieldState } from './TextField.base'; -import { ITextFieldProps, ITextFieldStyles, ITextField } from './TextField.types'; +import { TextFieldBase } from './TextField.base'; import { isConformant } from '../../common/isConformant'; +import type { IRefObject } from '../../Utilities'; +import type { ITextFieldState } from './TextField.base'; +import type { ITextFieldProps, ITextFieldStyles, ITextField } from './TextField.types'; /** * The currently rendered ITextField. diff --git a/packages/react/src/components/TextField/TextField.ts b/packages/react/src/components/TextField/TextField.ts index 0bf4e83dc6fde3..21cbb630806df5 100644 --- a/packages/react/src/components/TextField/TextField.ts +++ b/packages/react/src/components/TextField/TextField.ts @@ -1,9 +1,8 @@ import * as React from 'react'; import { styled } from '../../Utilities'; import { TextFieldBase } from './TextField.base'; -import { ITextFieldProps, ITextFieldStyles, ITextFieldStyleProps } from './TextField.types'; import { getStyles } from './TextField.styles'; -export { ITextField } from './TextField.types'; +import type { ITextFieldProps, ITextFieldStyles, ITextFieldStyleProps } from './TextField.types'; export const TextField: React.FunctionComponent = styled< ITextFieldProps, @@ -12,3 +11,5 @@ export const TextField: React.FunctionComponent = styled< >(TextFieldBase, getStyles, undefined, { scope: 'TextField', }); + +export type { ITextField } from './TextField.types'; diff --git a/packages/react/src/components/TextField/TextField.types.ts b/packages/react/src/components/TextField/TextField.types.ts index 06f9b629a94521..1c5a9a0dd3dea3 100644 --- a/packages/react/src/components/TextField/TextField.types.ts +++ b/packages/react/src/components/TextField/TextField.types.ts @@ -1,7 +1,7 @@ import * as React from 'react'; -import { IStyle, ITheme } from '../../Styling'; -import { IRefObject, IRenderFunction, IStyleFunctionOrObject } from '../../Utilities'; -import { IIconProps } from '../../Icon'; +import type { IStyle, ITheme } from '../../Styling'; +import type { IRefObject, IRenderFunction, IStyleFunctionOrObject } from '../../Utilities'; +import type { IIconProps } from '../../Icon'; /** * {@docCategory TextField} diff --git a/packages/react/src/components/ThemeGenerator/IThemeRules.ts b/packages/react/src/components/ThemeGenerator/IThemeRules.ts index eb829a760f326b..54ae0021190c79 100644 --- a/packages/react/src/components/ThemeGenerator/IThemeRules.ts +++ b/packages/react/src/components/ThemeGenerator/IThemeRules.ts @@ -1,4 +1,4 @@ -import { IThemeSlotRule } from './IThemeSlotRule'; +import type { IThemeSlotRule } from './IThemeSlotRule'; export interface IThemeRules { [key: string]: IThemeSlotRule; diff --git a/packages/react/src/components/ThemeGenerator/IThemeSlotRule.ts b/packages/react/src/components/ThemeGenerator/IThemeSlotRule.ts index dd5ada53a3a513..f53d55ca425df2 100644 --- a/packages/react/src/components/ThemeGenerator/IThemeSlotRule.ts +++ b/packages/react/src/components/ThemeGenerator/IThemeSlotRule.ts @@ -1,5 +1,5 @@ -import { IColor } from '../../utilities/color/interfaces'; import { Shade } from '../../utilities/color/shades'; +import type { IColor } from '../../utilities/color/interfaces'; export interface IThemeSlotRule { /** The name of this theme slot. */ diff --git a/packages/react/src/components/ThemeGenerator/ThemeGenerator.ts b/packages/react/src/components/ThemeGenerator/ThemeGenerator.ts index 7d71806f91d826..49a5d7b39316c6 100644 --- a/packages/react/src/components/ThemeGenerator/ThemeGenerator.ts +++ b/packages/react/src/components/ThemeGenerator/ThemeGenerator.ts @@ -1,10 +1,9 @@ -import { IColor } from '../../utilities/color/interfaces'; import { getColorFromString } from '../../utilities/color/getColorFromString'; import { isValidShade, getShade, getBackgroundShade } from '../../utilities/color/shades'; import { format } from '../../Utilities'; - -import { IThemeSlotRule } from './IThemeSlotRule'; -import { IThemeRules } from './IThemeRules'; +import type { IColor } from '../../utilities/color/interfaces'; +import type { IThemeSlotRule } from './IThemeSlotRule'; +import type { IThemeRules } from './IThemeRules'; export class ThemeGenerator { /** diff --git a/packages/react/src/components/ThemeGenerator/ThemeRulesStandard.ts b/packages/react/src/components/ThemeGenerator/ThemeRulesStandard.ts index 0ca4466811a998..cd0f06cedadca1 100644 --- a/packages/react/src/components/ThemeGenerator/ThemeRulesStandard.ts +++ b/packages/react/src/components/ThemeGenerator/ThemeRulesStandard.ts @@ -1,8 +1,7 @@ import { Shade } from '../../utilities/color/shades'; import { getColorFromString } from '../../utilities/color/getColorFromString'; import { mapEnumByName } from '../../Utilities'; - -import { IThemeRules } from './IThemeRules'; +import type { IThemeRules } from './IThemeRules'; /* This is the set of rules for our default theme. We start with three base slots, defining the background, foreground (text), and diff --git a/packages/react/src/components/TimePicker/TimePicker.test.tsx b/packages/react/src/components/TimePicker/TimePicker.test.tsx index 71d08a3f3bf43a..7b38577909c7ba 100644 --- a/packages/react/src/components/TimePicker/TimePicker.test.tsx +++ b/packages/react/src/components/TimePicker/TimePicker.test.tsx @@ -3,7 +3,7 @@ import { TimePicker } from './TimePicker'; // import { ITimeRange } from './TimePicker.types'; // import { create } from '@fluentui/utilities/lib/test'; import { mount } from 'enzyme'; -import { IComboBox } from '../ComboBox/ComboBox.types'; +import type { IComboBox } from '../ComboBox/ComboBox.types'; describe('TimePicker', () => { // TODO: times in this snapshot test changed and failed builds diff --git a/packages/react/src/components/TimePicker/TimePicker.tsx b/packages/react/src/components/TimePicker/TimePicker.tsx index 62c108286a52df..d9f4f67120592b 100644 --- a/packages/react/src/components/TimePicker/TimePicker.tsx +++ b/packages/react/src/components/TimePicker/TimePicker.tsx @@ -1,8 +1,9 @@ import * as React from 'react'; import { KeyCodes } from '../../Utilities'; import { TimeConstants, addMinutes, formatTimeString, ceilMinuteToIncrement } from '@fluentui/date-time-utilities'; -import { ComboBox, IComboBox, IComboBoxOption } from '../../ComboBox'; -import { ITimePickerProps, ITimeRange, ITimePickerStrings } from './TimePicker.types'; +import { ComboBox } from '../../ComboBox'; +import type { IComboBox, IComboBoxOption } from '../../ComboBox'; +import type { ITimePickerProps, ITimeRange, ITimePickerStrings } from './TimePicker.types'; const REGEX_SHOW_SECONDS_HOUR_12 = /((1[0-2]|0?[1-9]):([0-5][0-9]):(?:[0-5]\d) ?([AaPp][Mm]))$/; const REGEX_HIDE_SECONDS_HOUR_12 = /((1[0-2]|0?[1-9]):([0-5][0-9]) ?([AaPp][Mm]))$/; diff --git a/packages/react/src/components/TimePicker/TimePicker.types.ts b/packages/react/src/components/TimePicker/TimePicker.types.ts index 1475068c027594..1626108dfc4d54 100644 --- a/packages/react/src/components/TimePicker/TimePicker.types.ts +++ b/packages/react/src/components/TimePicker/TimePicker.types.ts @@ -1,4 +1,4 @@ -import { IComboBoxProps } from '../../ComboBox'; +import type { IComboBoxProps } from '../../ComboBox'; /** * Range of start and end hours to be shown in the TimePicker. diff --git a/packages/react/src/components/Toggle/Toggle.base.tsx b/packages/react/src/components/Toggle/Toggle.base.tsx index baf00eb0cfa215..cee1e7895dce35 100644 --- a/packages/react/src/components/Toggle/Toggle.base.tsx +++ b/packages/react/src/components/Toggle/Toggle.base.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { useControllableValue, useId, useWarnings } from '@fluentui/react-hooks'; import { classNamesFunction, getNativeProps, inputProperties, useFocusRects } from '@fluentui/utilities'; import { Label } from '../Label/Label'; -import { IToggleProps, IToggleStyleProps, IToggleStyles, IToggle } from './Toggle.types'; +import type { IToggleProps, IToggleStyleProps, IToggleStyles, IToggle } from './Toggle.types'; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/components/Toggle/Toggle.styles.ts b/packages/react/src/components/Toggle/Toggle.styles.ts index c484a67f898d5c..cd3bff7aba8d28 100644 --- a/packages/react/src/components/Toggle/Toggle.styles.ts +++ b/packages/react/src/components/Toggle/Toggle.styles.ts @@ -4,7 +4,7 @@ import { FontWeights, getHighContrastNoAdjustStyle, } from '@fluentui/style-utilities'; -import { IToggleStyleProps, IToggleStyles } from './Toggle.types'; +import type { IToggleStyleProps, IToggleStyles } from './Toggle.types'; const DEFAULT_PILL_WIDTH = 40; const DEFAULT_PILL_HEIGHT = 20; diff --git a/packages/react/src/components/Toggle/Toggle.tsx b/packages/react/src/components/Toggle/Toggle.tsx index a87616c55ac607..4d3d5a6ed8581d 100644 --- a/packages/react/src/components/Toggle/Toggle.tsx +++ b/packages/react/src/components/Toggle/Toggle.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled } from '@fluentui/utilities'; import { ToggleBase } from './Toggle.base'; import { getStyles } from './Toggle.styles'; -import { IToggleProps, IToggleStyleProps, IToggleStyles } from './Toggle.types'; +import type { IToggleProps, IToggleStyleProps, IToggleStyles } from './Toggle.types'; export const Toggle: React.FunctionComponent = styled( ToggleBase, diff --git a/packages/react/src/components/Toggle/Toggle.types.ts b/packages/react/src/components/Toggle/Toggle.types.ts index 523afcf1b35d77..2f654f12125048 100644 --- a/packages/react/src/components/Toggle/Toggle.types.ts +++ b/packages/react/src/components/Toggle/Toggle.types.ts @@ -1,6 +1,6 @@ import * as React from 'react'; -import { IStyle, ITheme } from '@fluentui/style-utilities'; -import { IRefObject, IStyleFunctionOrObject, IComponentAs } from '@fluentui/utilities'; +import type { IStyle, ITheme } from '@fluentui/style-utilities'; +import type { IRefObject, IStyleFunctionOrObject, IComponentAs } from '@fluentui/utilities'; /** * {@docCategory Toggle} diff --git a/packages/react/src/components/Tooltip/Tooltip.base.tsx b/packages/react/src/components/Tooltip/Tooltip.base.tsx index 92742d50862902..5454b54a0f784e 100644 --- a/packages/react/src/components/Tooltip/Tooltip.base.tsx +++ b/packages/react/src/components/Tooltip/Tooltip.base.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; import { classNamesFunction, divProperties, getNativeProps } from '../../Utilities'; -import { IProcessedStyleSet } from '../../Styling'; -import { ITooltipProps, ITooltipStyleProps, ITooltipStyles } from './Tooltip.types'; import { Callout } from '../../Callout'; import { DirectionalHint } from '../../common/DirectionalHint'; +import type { IProcessedStyleSet } from '../../Styling'; +import type { ITooltipProps, ITooltipStyleProps, ITooltipStyles } from './Tooltip.types'; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/components/Tooltip/Tooltip.styles.ts b/packages/react/src/components/Tooltip/Tooltip.styles.ts index 30b6fe803ef049..66ad907fcebaaa 100644 --- a/packages/react/src/components/Tooltip/Tooltip.styles.ts +++ b/packages/react/src/components/Tooltip/Tooltip.styles.ts @@ -1,5 +1,5 @@ -import { ITooltipStyleProps, ITooltipStyles } from './Tooltip.types'; import { AnimationClassNames } from '../../Styling'; +import type { ITooltipStyleProps, ITooltipStyles } from './Tooltip.types'; export const getStyles = (props: ITooltipStyleProps): ITooltipStyles => { const { className, beakWidth = 16, gapSpace = 0, maxWidth, theme } = props; diff --git a/packages/react/src/components/Tooltip/Tooltip.test.tsx b/packages/react/src/components/Tooltip/Tooltip.test.tsx index a0fa42f072c8d5..f62e2d4cbf7251 100644 --- a/packages/react/src/components/Tooltip/Tooltip.test.tsx +++ b/packages/react/src/components/Tooltip/Tooltip.test.tsx @@ -6,7 +6,7 @@ import { mount } from 'enzyme'; import { DirectionalHint } from '../../common/DirectionalHint'; import { TooltipBase } from './Tooltip.base'; -import { ICalloutProps } from '../../Callout'; +import type { ICalloutProps } from '../../Callout'; const defaultCalloutProps: ICalloutProps = { isBeakVisible: true, diff --git a/packages/react/src/components/Tooltip/Tooltip.tsx b/packages/react/src/components/Tooltip/Tooltip.tsx index b7cc14296727b2..da3ab0ee3f489d 100644 --- a/packages/react/src/components/Tooltip/Tooltip.tsx +++ b/packages/react/src/components/Tooltip/Tooltip.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { styled } from '../../Utilities'; import { TooltipBase } from './Tooltip.base'; -import { ITooltipProps, ITooltipStyleProps, ITooltipStyles } from './Tooltip.types'; import { getStyles } from './Tooltip.styles'; +import type { ITooltipProps, ITooltipStyleProps, ITooltipStyles } from './Tooltip.types'; export const Tooltip: React.FunctionComponent = styled< ITooltipProps, diff --git a/packages/react/src/components/Tooltip/Tooltip.types.ts b/packages/react/src/components/Tooltip/Tooltip.types.ts index 32d72e7cc1c0a7..c540fc09efac69 100644 --- a/packages/react/src/components/Tooltip/Tooltip.types.ts +++ b/packages/react/src/components/Tooltip/Tooltip.types.ts @@ -1,10 +1,9 @@ import * as React from 'react'; import { TooltipBase } from './Tooltip.base'; -import { ICalloutProps } from '../../Callout'; -import { IRenderFunction } from '../../Utilities'; import { DirectionalHint } from '../../common/DirectionalHint'; -import { IStyle, ITheme } from '../../Styling'; -import { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; +import type { ICalloutProps } from '../../Callout'; +import type { IRenderFunction, IRefObject, IStyleFunctionOrObject } from '../../Utilities'; +import type { IStyle, ITheme } from '../../Styling'; /** * {@docCategory Tooltip} diff --git a/packages/react/src/components/Tooltip/TooltipHost.base.tsx b/packages/react/src/components/Tooltip/TooltipHost.base.tsx index 9b94927328b514..8343c7313e21a4 100644 --- a/packages/react/src/components/Tooltip/TooltipHost.base.tsx +++ b/packages/react/src/components/Tooltip/TooltipHost.base.tsx @@ -12,15 +12,10 @@ import { classNamesFunction, KeyCodes, } from '../../Utilities'; -import { - ITooltipHostProps, - TooltipOverflowMode, - ITooltipHostStyles, - ITooltipHostStyleProps, - ITooltipHost, -} from './TooltipHost.types'; +import { TooltipOverflowMode } from './TooltipHost.types'; import { Tooltip } from './Tooltip'; import { TooltipDelay } from './Tooltip.types'; +import type { ITooltipHostProps, ITooltipHostStyles, ITooltipHostStyleProps, ITooltipHost } from './TooltipHost.types'; export interface ITooltipHostState { isAriaPlaceholderRendered: boolean; diff --git a/packages/react/src/components/Tooltip/TooltipHost.styles.ts b/packages/react/src/components/Tooltip/TooltipHost.styles.ts index d123566592f84d..702150af2edf7d 100644 --- a/packages/react/src/components/Tooltip/TooltipHost.styles.ts +++ b/packages/react/src/components/Tooltip/TooltipHost.styles.ts @@ -1,5 +1,5 @@ -import { ITooltipHostStyleProps, ITooltipHostStyles } from './TooltipHost.types'; import { getGlobalClassNames } from '../../Styling'; +import type { ITooltipHostStyleProps, ITooltipHostStyles } from './TooltipHost.types'; const GlobalClassNames = { root: 'ms-TooltipHost', diff --git a/packages/react/src/components/Tooltip/TooltipHost.test.tsx b/packages/react/src/components/Tooltip/TooltipHost.test.tsx index f481622fc7ae8a..6091106f73b688 100644 --- a/packages/react/src/components/Tooltip/TooltipHost.test.tsx +++ b/packages/react/src/components/Tooltip/TooltipHost.test.tsx @@ -2,12 +2,12 @@ import * as React from 'react'; import * as renderer from 'react-test-renderer'; import { mount } from 'enzyme'; - -import { ICalloutProps } from '../../Callout'; import { DirectionalHint } from '../../common/DirectionalHint'; import { assign } from '../../Utilities'; import { TooltipHost } from './TooltipHost'; -import { ITooltipProps, TooltipDelay } from './Tooltip.types'; +import { TooltipDelay } from './Tooltip.types'; +import type { ICalloutProps } from '../../Callout'; +import type { ITooltipProps } from './Tooltip.types'; describe('TooltipHost', () => { it('renders correctly', () => { diff --git a/packages/react/src/components/Tooltip/TooltipHost.ts b/packages/react/src/components/Tooltip/TooltipHost.ts index ba5537e48959f5..9ebceca53e8d52 100644 --- a/packages/react/src/components/Tooltip/TooltipHost.ts +++ b/packages/react/src/components/Tooltip/TooltipHost.ts @@ -1,8 +1,8 @@ import * as React from 'react'; import { styled } from '../../Utilities'; import { TooltipHostBase } from './TooltipHost.base'; -import { ITooltipHostProps, ITooltipHostStyleProps, ITooltipHostStyles } from './TooltipHost.types'; import { getStyles } from './TooltipHost.styles'; +import type { ITooltipHostProps, ITooltipHostStyleProps, ITooltipHostStyles } from './TooltipHost.types'; export const TooltipHost: React.FunctionComponent = styled< ITooltipHostProps, diff --git a/packages/react/src/components/Tooltip/TooltipHost.types.ts b/packages/react/src/components/Tooltip/TooltipHost.types.ts index 8126b78d712a4a..0567a403109c35 100644 --- a/packages/react/src/components/Tooltip/TooltipHost.types.ts +++ b/packages/react/src/components/Tooltip/TooltipHost.types.ts @@ -1,10 +1,11 @@ import * as React from 'react'; import { TooltipHostBase } from './TooltipHost.base'; -import { TooltipDelay, ITooltipProps } from './Tooltip.types'; -import { ICalloutProps } from '../../Callout'; +import { TooltipDelay } from './Tooltip.types'; import { DirectionalHint } from '../../common/DirectionalHint'; -import { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; -import { IStyle, ITheme } from '../../Styling'; +import type { ITooltipProps } from './Tooltip.types'; +import type { ICalloutProps } from '../../Callout'; +import type { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; +import type { IStyle, ITheme } from '../../Styling'; /** * {@docCategory Tooltip} diff --git a/packages/react/src/components/WeeklyDayPicker/WeeklyDayPicker.base.tsx b/packages/react/src/components/WeeklyDayPicker/WeeklyDayPicker.base.tsx index 2eb7cdcfa53c19..7931be393f0478 100644 --- a/packages/react/src/components/WeeklyDayPicker/WeeklyDayPicker.base.tsx +++ b/packages/react/src/components/WeeklyDayPicker/WeeklyDayPicker.base.tsx @@ -1,10 +1,7 @@ import * as React from 'react'; import { classNamesFunction, css, KeyCodes, getRTL, initializeComponentRef } from '@fluentui/utilities'; -import { IProcessedStyleSet } from '@fluentui/style-utilities'; -import { IWeeklyDayPickerProps, IWeeklyDayPickerStyleProps, IWeeklyDayPickerStyles } from './WeeklyDayPicker.types'; import { AnimationDirection } from '../Calendar/Calendar.types'; import { CalendarDayGrid } from '../CalendarDayGrid/CalendarDayGrid'; -import { ICalendarDayGrid } from '../CalendarDayGrid/CalendarDayGrid.types'; import { compareDatePart, getStartDateOfWeek, @@ -18,6 +15,13 @@ import { } from '@fluentui/date-time-utilities'; import { Icon } from '../../Icon'; import { defaultWeeklyDayPickerStrings, defaultWeeklyDayPickerNavigationIcons } from './defaults'; +import type { IProcessedStyleSet } from '@fluentui/style-utilities'; +import type { + IWeeklyDayPickerProps, + IWeeklyDayPickerStyleProps, + IWeeklyDayPickerStyles, +} from './WeeklyDayPicker.types'; +import type { ICalendarDayGrid } from '../CalendarDayGrid/CalendarDayGrid.types'; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/components/WeeklyDayPicker/WeeklyDayPicker.styles.ts b/packages/react/src/components/WeeklyDayPicker/WeeklyDayPicker.styles.ts index 1feee6eca443ee..e897a1ad921de0 100644 --- a/packages/react/src/components/WeeklyDayPicker/WeeklyDayPicker.styles.ts +++ b/packages/react/src/components/WeeklyDayPicker/WeeklyDayPicker.styles.ts @@ -1,6 +1,6 @@ -import { IWeeklyDayPickerStyleProps, IWeeklyDayPickerStyles } from './WeeklyDayPicker.types'; import { normalize, FontSizes, getFocusStyle, getGlobalClassNames } from '@fluentui/style-utilities'; import { IsFocusVisibleClassName } from '@fluentui/utilities'; +import type { IWeeklyDayPickerStyleProps, IWeeklyDayPickerStyles } from './WeeklyDayPicker.types'; const GlobalClassNames = { root: 'ms-WeeklyDayPicker-root', diff --git a/packages/react/src/components/WeeklyDayPicker/WeeklyDayPicker.tsx b/packages/react/src/components/WeeklyDayPicker/WeeklyDayPicker.tsx index 7443a214da3b5e..1243f872739814 100644 --- a/packages/react/src/components/WeeklyDayPicker/WeeklyDayPicker.tsx +++ b/packages/react/src/components/WeeklyDayPicker/WeeklyDayPicker.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { WeeklyDayPickerBase } from './WeeklyDayPicker.base'; import { styles } from './WeeklyDayPicker.styles'; import { styled } from '../../Utilities'; -import { IWeeklyDayPickerProps } from './WeeklyDayPicker.types'; +import type { IWeeklyDayPickerProps } from './WeeklyDayPicker.types'; export const WeeklyDayPicker: React.FunctionComponent = styled( WeeklyDayPickerBase, diff --git a/packages/react/src/components/WeeklyDayPicker/WeeklyDayPicker.types.ts b/packages/react/src/components/WeeklyDayPicker/WeeklyDayPicker.types.ts index 0c814930541cf8..1af4d6758c06a5 100644 --- a/packages/react/src/components/WeeklyDayPicker/WeeklyDayPicker.types.ts +++ b/packages/react/src/components/WeeklyDayPicker/WeeklyDayPicker.types.ts @@ -1,8 +1,10 @@ -import { IBaseProps, IRefObject, IStyleFunctionOrObject } from '@fluentui/utilities'; -import { ICalendarNavigationIcons, AnimationDirection } from '../Calendar/Calendar.types'; -import { ICalendarStrings, DayOfWeek, IDateFormatting } from '@fluentui/date-time-utilities'; -import { IStyle, ITheme } from '@fluentui/style-utilities'; -import { +import { AnimationDirection } from '../Calendar/Calendar.types'; +import { DayOfWeek } from '@fluentui/date-time-utilities'; +import type { IBaseProps, IRefObject, IStyleFunctionOrObject } from '@fluentui/utilities'; +import type { ICalendarNavigationIcons } from '../Calendar/Calendar.types'; +import type { ICalendarStrings, IDateFormatting } from '@fluentui/date-time-utilities'; +import type { IStyle, ITheme } from '@fluentui/style-utilities'; +import type { ICalendarDayGridProps, ICalendarDayGridStyleProps, ICalendarDayGridStyles, diff --git a/packages/react/src/components/WeeklyDayPicker/defaults.ts b/packages/react/src/components/WeeklyDayPicker/defaults.ts index 2640de13668f99..48c45776805911 100644 --- a/packages/react/src/components/WeeklyDayPicker/defaults.ts +++ b/packages/react/src/components/WeeklyDayPicker/defaults.ts @@ -1,5 +1,5 @@ -import { IWeeklyDayPickerStrings, IWeeklyDayPickerNavigationIcons } from './WeeklyDayPicker.types'; import { DEFAULT_CALENDAR_STRINGS } from '@fluentui/date-time-utilities'; +import type { IWeeklyDayPickerStrings, IWeeklyDayPickerNavigationIcons } from './WeeklyDayPicker.types'; export const defaultWeeklyDayPickerStrings: IWeeklyDayPickerStrings = { ...DEFAULT_CALENDAR_STRINGS, diff --git a/packages/react/src/components/pickers/BasePicker.styles.ts b/packages/react/src/components/pickers/BasePicker.styles.ts index 65747a1612f440..2cc13e2c40594e 100644 --- a/packages/react/src/components/pickers/BasePicker.styles.ts +++ b/packages/react/src/components/pickers/BasePicker.styles.ts @@ -1,5 +1,5 @@ import { getGlobalClassNames, getInputFocusStyle, hiddenContentStyle, HighContrastSelector } from '../../Styling'; -import { IBasePickerStyleProps, IBasePickerStyles } from './BasePicker.types'; +import type { IBasePickerStyleProps, IBasePickerStyles } from './BasePicker.types'; const GlobalClassNames = { root: 'ms-BasePicker', diff --git a/packages/react/src/components/pickers/BasePicker.test.tsx b/packages/react/src/components/pickers/BasePicker.test.tsx index 76777a0cf3da5c..8b64b590971b86 100644 --- a/packages/react/src/components/pickers/BasePicker.test.tsx +++ b/packages/react/src/components/pickers/BasePicker.test.tsx @@ -3,11 +3,12 @@ import * as ReactDOM from 'react-dom'; import * as ReactTestUtils from 'react-dom/test-utils'; import * as renderer from 'react-test-renderer'; -import { IBasePickerProps, IBasePicker, ValidationState } from './BasePicker.types'; +import { ValidationState } from './BasePicker.types'; import { BasePicker } from './BasePicker'; -import { IPickerItemProps } from './PickerItem.types'; import { resetIds, KeyCodes } from '@fluentui/utilities'; import { isConformant } from '../../common/isConformant'; +import type { IBasePickerProps, IBasePicker } from './BasePicker.types'; +import type { IPickerItemProps } from './PickerItem.types'; function onResolveSuggestions(text: string): ISimple[] { return [ diff --git a/packages/react/src/components/pickers/BasePicker.tsx b/packages/react/src/components/pickers/BasePicker.tsx index aaaa66c8aa5aad..c6ac3c1c42d878 100644 --- a/packages/react/src/components/pickers/BasePicker.tsx +++ b/packages/react/src/components/pickers/BasePicker.tsx @@ -10,29 +10,26 @@ import { styled, initializeComponentRef, } from '../../Utilities'; -import { IProcessedStyleSet } from '../../Styling'; import { Callout } from '../../Callout'; import { Selection, SelectionZone, SelectionMode } from '../../utilities/selection/index'; import { DirectionalHint } from '../../common/DirectionalHint'; import { Suggestions } from './Suggestions/Suggestions'; -import { +import { getStyles as suggestionsStyles } from './Suggestions/Suggestions.styles'; +import { SuggestionsController } from './Suggestions/SuggestionsController'; +import { ValidationState } from './BasePicker.types'; +import { Autofill } from '../Autofill/index'; +import * as stylesImport from './BasePicker.scss'; +import type { IProcessedStyleSet } from '../../Styling'; +import type { ISuggestions, ISuggestionsProps, ISuggestionsStyleProps, ISuggestionsStyles, } from './Suggestions/Suggestions.types'; -import { getStyles as suggestionsStyles } from './Suggestions/Suggestions.styles'; -import { SuggestionsController } from './Suggestions/SuggestionsController'; -import { - IBasePicker, - IBasePickerProps, - ValidationState, - IBasePickerStyleProps, - IBasePickerStyles, -} from './BasePicker.types'; -import { IAutofill, Autofill } from '../Autofill/index'; -import { IPickerItemProps } from './PickerItem.types'; -import * as stylesImport from './BasePicker.scss'; +import type { IBasePicker, IBasePickerProps, IBasePickerStyleProps, IBasePickerStyles } from './BasePicker.types'; +import type { IAutofill } from '../Autofill/index'; +import type { IPickerItemProps } from './PickerItem.types'; + const legacyStyles: any = stylesImport; export interface IBasePickerState { diff --git a/packages/react/src/components/pickers/BasePicker.types.ts b/packages/react/src/components/pickers/BasePicker.types.ts index b4f5a531cd326c..61736ca8b118bc 100644 --- a/packages/react/src/components/pickers/BasePicker.types.ts +++ b/packages/react/src/components/pickers/BasePicker.types.ts @@ -1,11 +1,11 @@ import * as React from 'react'; -import { IPickerItemProps } from './PickerItem.types'; -import { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; -import { ISuggestionModel, ISuggestionsProps } from './Suggestions/Suggestions.types'; import { Autofill } from '../../Autofill'; -import { ICalloutProps } from '../../Callout'; -import { ITheme, IStyle } from '../../Styling'; -import { ISuggestionItemProps } from '../pickers/Suggestions/SuggestionsItem.types'; +import type { IPickerItemProps } from './PickerItem.types'; +import type { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; +import type { ISuggestionModel, ISuggestionsProps } from './Suggestions/Suggestions.types'; +import type { ICalloutProps } from '../../Callout'; +import type { ITheme, IStyle } from '../../Styling'; +import type { ISuggestionItemProps } from '../pickers/Suggestions/SuggestionsItem.types'; /** * BasePicker component. diff --git a/packages/react/src/components/pickers/PeoplePicker/PeoplePicker.test.tsx b/packages/react/src/components/pickers/PeoplePicker/PeoplePicker.test.tsx index ace1c125c5524f..8505b7c1ebc9c7 100644 --- a/packages/react/src/components/pickers/PeoplePicker/PeoplePicker.test.tsx +++ b/packages/react/src/components/pickers/PeoplePicker/PeoplePicker.test.tsx @@ -2,13 +2,12 @@ import * as React from 'react'; import * as ReactDOM from 'react-dom'; import * as ReactTestUtils from 'react-dom/test-utils'; import * as renderer from 'react-test-renderer'; - -import { IBasePicker } from '../BasePicker.types'; import { resetIds } from '@fluentui/utilities'; import { people } from '@fluentui/example-data'; import { NormalPeoplePicker } from './PeoplePicker'; -import { IPersonaProps } from '../../Persona/Persona.types'; import { isConformant } from '../../../common/isConformant'; +import type { IBasePicker } from '../BasePicker.types'; +import type { IPersonaProps } from '../../Persona/Persona.types'; function onResolveSuggestions(text: string): IPersonaProps[] { return people.filter((person: IPersonaProps) => person.text!.toLowerCase().indexOf(text.toLowerCase()) === 0); diff --git a/packages/react/src/components/pickers/PeoplePicker/PeoplePicker.tsx b/packages/react/src/components/pickers/PeoplePicker/PeoplePicker.tsx index b2cbd896e0195b..04ccbf37f4c491 100644 --- a/packages/react/src/components/pickers/PeoplePicker/PeoplePicker.tsx +++ b/packages/react/src/components/pickers/PeoplePicker/PeoplePicker.tsx @@ -2,18 +2,18 @@ import * as React from 'react'; import { getRTL, getInitials, styled } from '../../../Utilities'; import { BasePicker, BasePickerListBelow } from '../BasePicker'; -import { +import { ValidationState } from '../BasePicker.types'; +import { PeoplePickerItem } from './PeoplePickerItems/PeoplePickerItem'; +import { PeoplePickerItemSuggestion } from './PeoplePickerItems/PeoplePickerItemSuggestion'; +import { getStyles } from '../BasePicker.styles'; +import type { IBasePickerProps, IBasePickerSuggestionsProps, - ValidationState, IBasePickerStyleProps, IBasePickerStyles, } from '../BasePicker.types'; -import { PeoplePickerItem } from './PeoplePickerItems/PeoplePickerItem'; -import { IPersonaProps } from '../../../Persona'; -import { PeoplePickerItemSuggestion } from './PeoplePickerItems/PeoplePickerItemSuggestion'; -import { IPeoplePickerItemSelectedProps } from './PeoplePickerItems/PeoplePickerItem.types'; -import { getStyles } from '../BasePicker.styles'; +import type { IPersonaProps } from '../../../Persona'; +import type { IPeoplePickerItemSelectedProps } from './PeoplePickerItems/PeoplePickerItem.types'; /** * PeoplePicker props interface which renders Personas as items. diff --git a/packages/react/src/components/pickers/PeoplePicker/PeoplePickerItems/PeoplePickerItem.styles.ts b/packages/react/src/components/pickers/PeoplePicker/PeoplePickerItems/PeoplePickerItem.styles.ts index 76b1b7100ad5e8..1bfe10284fbd6b 100644 --- a/packages/react/src/components/pickers/PeoplePicker/PeoplePickerItems/PeoplePickerItem.styles.ts +++ b/packages/react/src/components/pickers/PeoplePicker/PeoplePickerItems/PeoplePickerItem.styles.ts @@ -2,11 +2,11 @@ import { getGlobalClassNames, getFocusStyle, HighContrastSelector, - IStyle, getHighContrastNoAdjustStyle, } from '../../../../Styling'; import { ButtonGlobalClassNames } from '../../../Button/BaseButton.classNames'; -import { IPeoplePickerItemSelectedStyleProps, IPeoplePickerItemSelectedStyles } from './PeoplePickerItem.types'; +import type { IStyle } from '../../../../Styling'; +import type { IPeoplePickerItemSelectedStyleProps, IPeoplePickerItemSelectedStyles } from './PeoplePickerItem.types'; const GlobalClassNames = { root: 'ms-PickerPersona-container', diff --git a/packages/react/src/components/pickers/PeoplePicker/PeoplePickerItems/PeoplePickerItem.tsx b/packages/react/src/components/pickers/PeoplePicker/PeoplePickerItems/PeoplePickerItem.tsx index 996b536d7947c1..eb0be17a7ea496 100644 --- a/packages/react/src/components/pickers/PeoplePicker/PeoplePickerItems/PeoplePickerItem.tsx +++ b/packages/react/src/components/pickers/PeoplePicker/PeoplePickerItems/PeoplePickerItem.tsx @@ -1,22 +1,22 @@ import * as React from 'react'; -import { getId, classNamesFunction, styled, IStyleFunctionOrObject } from '../../../../Utilities'; -import { - Persona, - PersonaSize, +import { getId, classNamesFunction, styled } from '../../../../Utilities'; +import { Persona, PersonaSize } from '../../../../Persona'; +import { IconButton } from '../../../../Button'; +import { ValidationState } from '../../BasePicker.types'; +import { getStyles } from './PeoplePickerItem.styles'; +import type { IStyleFunctionOrObject } from '../../../../Utilities'; +import type { IPersonaStyleProps, IPersonaStyles, IPersonaCoinStyleProps, IPersonaCoinStyles, } from '../../../../Persona'; -import { IconButton } from '../../../../Button'; -import { ValidationState } from '../../BasePicker.types'; -import { +import type { IPeoplePickerItemSelectedProps, IPeoplePickerItemSelectedStyleProps, IPeoplePickerItemSelectedStyles, } from './PeoplePickerItem.types'; -import { getStyles } from './PeoplePickerItem.styles'; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/components/pickers/PeoplePicker/PeoplePickerItems/PeoplePickerItem.types.ts b/packages/react/src/components/pickers/PeoplePicker/PeoplePickerItems/PeoplePickerItem.types.ts index 3af2542129205a..ef05058274fd0f 100644 --- a/packages/react/src/components/pickers/PeoplePicker/PeoplePickerItems/PeoplePickerItem.types.ts +++ b/packages/react/src/components/pickers/PeoplePicker/PeoplePickerItems/PeoplePickerItem.types.ts @@ -1,9 +1,10 @@ -import { IStyle, ITheme } from '../../../../Styling'; -import { IStyleFunctionOrObject } from '../../../../Utilities'; -import { IPersonaProps, IPersonaStyleProps, IPersonaCoinStyleProps } from '../../../../Persona'; -import { IPickerItemProps } from '../../PickerItem.types'; -import { IContextualMenuItem } from '../../../../ContextualMenu'; -import { ValidationState, IBasePickerSuggestionsProps } from '../../BasePicker.types'; +import { ValidationState } from '../../BasePicker.types'; +import type { IStyle, ITheme } from '../../../../Styling'; +import type { IStyleFunctionOrObject } from '../../../../Utilities'; +import type { IPersonaProps, IPersonaStyleProps, IPersonaCoinStyleProps } from '../../../../Persona'; +import type { IPickerItemProps } from '../../PickerItem.types'; +import type { IContextualMenuItem } from '../../../../ContextualMenu'; +import type { IBasePickerSuggestionsProps } from '../../BasePicker.types'; /** * Common props in between IPeoplePickerItemSelectedProps, IPeoplePickerItemWithMenuProps and diff --git a/packages/react/src/components/pickers/PeoplePicker/PeoplePickerItems/PeoplePickerItemSuggestion.styles.ts b/packages/react/src/components/pickers/PeoplePicker/PeoplePickerItems/PeoplePickerItemSuggestion.styles.ts index 5b45a0301f29a6..e0dc3548d6df60 100644 --- a/packages/react/src/components/pickers/PeoplePicker/PeoplePickerItems/PeoplePickerItemSuggestion.styles.ts +++ b/packages/react/src/components/pickers/PeoplePicker/PeoplePickerItems/PeoplePickerItemSuggestion.styles.ts @@ -1,6 +1,11 @@ -import { getGlobalClassNames, HighContrastSelector, IStyle } from '../../../../Styling'; -import { IPeoplePickerItemSuggestionStyles, IPeoplePickerItemSuggestionStyleProps } from './PeoplePickerItem.types'; +import { getGlobalClassNames, HighContrastSelector } from '../../../../Styling'; import { SuggestionsItemGlobalClassNames as suggested } from '../../Suggestions/SuggestionsItem.styles'; +import type { IStyle } from '../../../../Styling'; +import type { + IPeoplePickerItemSuggestionStyles, + IPeoplePickerItemSuggestionStyleProps, +} from './PeoplePickerItem.types'; + const GlobalClassNames = { root: 'ms-PeoplePicker-personaContent', personaWrapper: 'ms-PeoplePicker-Persona', diff --git a/packages/react/src/components/pickers/PeoplePicker/PeoplePickerItems/PeoplePickerItemSuggestion.tsx b/packages/react/src/components/pickers/PeoplePicker/PeoplePickerItems/PeoplePickerItemSuggestion.tsx index 197cf10efbada3..5b51fcc19949ee 100644 --- a/packages/react/src/components/pickers/PeoplePicker/PeoplePickerItems/PeoplePickerItemSuggestion.tsx +++ b/packages/react/src/components/pickers/PeoplePicker/PeoplePickerItems/PeoplePickerItemSuggestion.tsx @@ -1,13 +1,15 @@ import * as React from 'react'; -import { classNamesFunction, styled, IStyleFunctionOrObject } from '../../../../Utilities'; -import { Persona, PersonaSize, IPersonaStyleProps, IPersonaStyles } from '../../../../Persona'; -import { +import { classNamesFunction, styled } from '../../../../Utilities'; +import { Persona, PersonaSize } from '../../../../Persona'; +import { getStyles } from './PeoplePickerItemSuggestion.styles'; +import type { IStyleFunctionOrObject } from '../../../../Utilities'; +import type { IPersonaStyleProps, IPersonaStyles } from '../../../../Persona'; +import type { IPeoplePickerItemSuggestionProps, IPeoplePickerItemSuggestionStyleProps, IPeoplePickerItemSuggestionStyles, } from './PeoplePickerItem.types'; -import { getStyles } from './PeoplePickerItemSuggestion.styles'; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/components/pickers/PeoplePicker/PeoplePickerItems/SelectedItemDefault.tsx b/packages/react/src/components/pickers/PeoplePicker/PeoplePickerItems/SelectedItemDefault.tsx index 413223d23c0898..6d842d969844e9 100644 --- a/packages/react/src/components/pickers/PeoplePicker/PeoplePickerItems/SelectedItemDefault.tsx +++ b/packages/react/src/components/pickers/PeoplePicker/PeoplePickerItems/SelectedItemDefault.tsx @@ -2,11 +2,12 @@ import * as React from 'react'; import { css, getId } from '../../../../Utilities'; import { Persona, PersonaSize, PersonaPresence } from '../../../../Persona'; -import { IPeoplePickerItemSelectedProps } from './PeoplePickerItem.types'; import { ValidationState } from '../../BasePicker.types'; import { IconButton } from '../../../../Button'; import * as stylesImport from './PickerItemsDefault.scss'; +import type { IPeoplePickerItemSelectedProps } from './PeoplePickerItem.types'; + const styles: any = stylesImport; /** diff --git a/packages/react/src/components/pickers/PeoplePicker/PeoplePickerItems/SuggestionItemDefault.tsx b/packages/react/src/components/pickers/PeoplePicker/PeoplePickerItems/SuggestionItemDefault.tsx index 7796bc89523cc8..d011778c32c39e 100644 --- a/packages/react/src/components/pickers/PeoplePicker/PeoplePickerItems/SuggestionItemDefault.tsx +++ b/packages/react/src/components/pickers/PeoplePicker/PeoplePickerItems/SuggestionItemDefault.tsx @@ -1,10 +1,11 @@ import * as React from 'react'; import { css } from '../../../../Utilities'; -import { Persona, PersonaSize, IPersonaProps, PersonaPresence } from '../../../../Persona'; -import { IBasePickerSuggestionsProps, ISuggestionItemProps } from '../../../../Pickers'; - +import { Persona, PersonaSize, PersonaPresence } from '../../../../Persona'; import * as stylesImport from './SuggestionItemDefault.scss'; +import type { IPersonaProps } from '../../../../Persona'; +import type { IBasePickerSuggestionsProps, ISuggestionItemProps } from '../../../../Pickers'; + const styles: any = stylesImport; /** diff --git a/packages/react/src/components/pickers/PickerItem.types.ts b/packages/react/src/components/pickers/PickerItem.types.ts index 4ed6c0e8bebb1a..46f820e5874595 100644 --- a/packages/react/src/components/pickers/PickerItem.types.ts +++ b/packages/react/src/components/pickers/PickerItem.types.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { IRefObject } from '../../Utilities'; +import type { IRefObject } from '../../Utilities'; /** * PickerItem component. diff --git a/packages/react/src/components/pickers/Suggestions/Suggestions.styles.ts b/packages/react/src/components/pickers/Suggestions/Suggestions.styles.ts index 655fd7c2a9072a..9318550818aa9d 100644 --- a/packages/react/src/components/pickers/Suggestions/Suggestions.styles.ts +++ b/packages/react/src/components/pickers/Suggestions/Suggestions.styles.ts @@ -2,10 +2,10 @@ import { getGlobalClassNames, getHighContrastNoAdjustStyle, HighContrastSelector, - IStyle, hiddenContentStyle, } from '../../../Styling'; -import { ISuggestionsStyleProps, ISuggestionsStyles } from './Suggestions.types'; +import type { IStyle } from '../../../Styling'; +import type { ISuggestionsStyleProps, ISuggestionsStyles } from './Suggestions.types'; const GlobalClassNames = { root: 'ms-Suggestions', diff --git a/packages/react/src/components/pickers/Suggestions/Suggestions.test.tsx b/packages/react/src/components/pickers/Suggestions/Suggestions.test.tsx index e83c0b8038c3da..35772319b84bb1 100644 --- a/packages/react/src/components/pickers/Suggestions/Suggestions.test.tsx +++ b/packages/react/src/components/pickers/Suggestions/Suggestions.test.tsx @@ -4,14 +4,14 @@ import * as renderer from 'react-test-renderer'; import { styled } from '../../../Utilities'; import { Suggestions } from './Suggestions'; import { getStyles as suggestionsStyles } from './Suggestions.styles'; -import { +import { isConformant } from '../../../common/isConformant'; +import type { ISuggestionModel, ISuggestionsProps, ISuggestionsStyleProps, ISuggestionsStyles, ISuggestions, } from './Suggestions.types'; -import { isConformant } from '../../../common/isConformant'; const suggestions = [ 'black', diff --git a/packages/react/src/components/pickers/Suggestions/Suggestions.tsx b/packages/react/src/components/pickers/Suggestions/Suggestions.tsx index cb0e08d5b22d3c..4b3898844686a0 100644 --- a/packages/react/src/components/pickers/Suggestions/Suggestions.tsx +++ b/packages/react/src/components/pickers/Suggestions/Suggestions.tsx @@ -1,28 +1,20 @@ import * as React from 'react'; -import { - initializeComponentRef, - KeyCodes, - classNamesFunction, - IStyleFunctionOrObject, - css, - styled, -} from '../../../Utilities'; -import { IProcessedStyleSet } from '../../../Styling'; -import { CommandButton, IButton } from '../../../Button'; -import { Spinner, ISpinnerStyleProps, ISpinnerStyles } from '../../../Spinner'; +import { initializeComponentRef, KeyCodes, classNamesFunction, css, styled } from '../../../Utilities'; +import { CommandButton } from '../../../Button'; +import { Spinner } from '../../../Spinner'; import { Announced } from '../../../Announced'; -import { - ISuggestionsProps, - SuggestionActionType, - ISuggestionsStyleProps, - ISuggestionsStyles, -} from './Suggestions.types'; +import { SuggestionActionType } from './Suggestions.types'; import { SuggestionsItem } from './SuggestionsItem'; import { getStyles as suggestionsItemStyles } from './SuggestionsItem.styles'; -import { ISuggestionItemProps, ISuggestionsItemStyleProps, ISuggestionsItemStyles } from './SuggestionsItem.types'; - import * as stylesImport from './Suggestions.scss'; +import type { IStyleFunctionOrObject } from '../../../Utilities'; +import type { IProcessedStyleSet } from '../../../Styling'; +import type { IButton } from '../../../Button'; +import type { ISpinnerStyleProps, ISpinnerStyles } from '../../../Spinner'; +import type { ISuggestionsProps, ISuggestionsStyleProps, ISuggestionsStyles } from './Suggestions.types'; +import type { ISuggestionItemProps, ISuggestionsItemStyleProps, ISuggestionsItemStyles } from './SuggestionsItem.types'; + const legacyStyles: any = stylesImport; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/components/pickers/Suggestions/Suggestions.types.ts b/packages/react/src/components/pickers/Suggestions/Suggestions.types.ts index da2236dc166340..300ed29f52cde5 100644 --- a/packages/react/src/components/pickers/Suggestions/Suggestions.types.ts +++ b/packages/react/src/components/pickers/Suggestions/Suggestions.types.ts @@ -1,10 +1,11 @@ import * as React from 'react'; -import { IRefObject, IRenderFunction, KeyCodes, IStyleFunctionOrObject } from '../../../Utilities'; -import { IPersonaProps } from '../../Persona/Persona.types'; -import { IStyle, ITheme } from '../../../Styling'; -import { ISpinnerStyleProps } from '../../Spinner/Spinner.types'; -import { ISuggestionItemProps } from './SuggestionsItem.types'; +import { KeyCodes } from '../../../Utilities'; +import type { IRefObject, IRenderFunction, IStyleFunctionOrObject } from '../../../Utilities'; +import type { IPersonaProps } from '../../Persona/Persona.types'; +import type { IStyle, ITheme } from '../../../Styling'; +import type { ISpinnerStyleProps } from '../../Spinner/Spinner.types'; +import type { ISuggestionItemProps } from './SuggestionsItem.types'; /** * Suggestions component. diff --git a/packages/react/src/components/pickers/Suggestions/SuggestionsController.ts b/packages/react/src/components/pickers/Suggestions/SuggestionsController.ts index 2812ec0f4b67d1..71f23652b5d226 100644 --- a/packages/react/src/components/pickers/Suggestions/SuggestionsController.ts +++ b/packages/react/src/components/pickers/Suggestions/SuggestionsController.ts @@ -1,4 +1,4 @@ -import { ISuggestionModel } from './Suggestions.types'; +import type { ISuggestionModel } from './Suggestions.types'; /** * {@docCategory Pickers} diff --git a/packages/react/src/components/pickers/Suggestions/SuggestionsItem.styles.ts b/packages/react/src/components/pickers/Suggestions/SuggestionsItem.styles.ts index 4dad073a4831a4..93812a541270d9 100644 --- a/packages/react/src/components/pickers/Suggestions/SuggestionsItem.styles.ts +++ b/packages/react/src/components/pickers/Suggestions/SuggestionsItem.styles.ts @@ -1,6 +1,6 @@ import { getGlobalClassNames, HighContrastSelector, getHighContrastNoAdjustStyle } from '../../../Styling'; -import { ISuggestionsItemStyleProps, ISuggestionsItemStyles } from './SuggestionsItem.types'; import { IsFocusVisibleClassName } from '../../../Utilities'; +import type { ISuggestionsItemStyleProps, ISuggestionsItemStyles } from './SuggestionsItem.types'; export const SuggestionsItemGlobalClassNames = { root: 'ms-Suggestions-item', diff --git a/packages/react/src/components/pickers/Suggestions/SuggestionsItem.tsx b/packages/react/src/components/pickers/Suggestions/SuggestionsItem.tsx index fedbf340bbb55f..233f447d356106 100644 --- a/packages/react/src/components/pickers/Suggestions/SuggestionsItem.tsx +++ b/packages/react/src/components/pickers/Suggestions/SuggestionsItem.tsx @@ -1,11 +1,11 @@ import * as React from 'react'; import { classNamesFunction, css, initializeComponentRef } from '../../../Utilities'; -import { IProcessedStyleSet } from '../../../Styling'; import { CommandButton, IconButton } from '../../../Button'; -import { ISuggestionItemProps, ISuggestionsItemStyleProps, ISuggestionsItemStyles } from './SuggestionsItem.types'; - import * as stylesImport from './Suggestions.scss'; +import type { IProcessedStyleSet } from '../../../Styling'; +import type { ISuggestionItemProps, ISuggestionsItemStyleProps, ISuggestionsItemStyles } from './SuggestionsItem.types'; + const legacyStyles: any = stylesImport; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/components/pickers/Suggestions/SuggestionsItem.types.ts b/packages/react/src/components/pickers/Suggestions/SuggestionsItem.types.ts index 194e9c37a0d4ab..3575a3adc5adba 100644 --- a/packages/react/src/components/pickers/Suggestions/SuggestionsItem.types.ts +++ b/packages/react/src/components/pickers/Suggestions/SuggestionsItem.types.ts @@ -1,7 +1,7 @@ import * as React from 'react'; -import { IStyle, ITheme } from '../../../Styling'; -import { IRefObject, IStyleFunctionOrObject } from '../../../Utilities'; -import { ISuggestionModel } from './Suggestions.types'; +import type { IStyle, ITheme } from '../../../Styling'; +import type { IRefObject, IStyleFunctionOrObject } from '../../../Utilities'; +import type { ISuggestionModel } from './Suggestions.types'; /** * SuggestionItem component. diff --git a/packages/react/src/components/pickers/TagPicker/TagItem.styles.ts b/packages/react/src/components/pickers/TagPicker/TagItem.styles.ts index daf680b342eff9..2bb8a878e1895e 100644 --- a/packages/react/src/components/pickers/TagPicker/TagItem.styles.ts +++ b/packages/react/src/components/pickers/TagPicker/TagItem.styles.ts @@ -1,7 +1,7 @@ import { getGlobalClassNames, getFocusStyle, HighContrastSelector } from '../../../Styling'; import { ButtonGlobalClassNames } from '../../Button/BaseButton.classNames'; -import { ITagItemStyleProps, ITagItemStyles } from './TagPicker.types'; import { getRTL } from '../../../Utilities'; +import type { ITagItemStyleProps, ITagItemStyles } from './TagPicker.types'; const GlobalClassNames = { root: 'ms-TagItem', diff --git a/packages/react/src/components/pickers/TagPicker/TagItem.tsx b/packages/react/src/components/pickers/TagPicker/TagItem.tsx index 3cae3bc68a8820..c1e330dfb423cd 100644 --- a/packages/react/src/components/pickers/TagPicker/TagItem.tsx +++ b/packages/react/src/components/pickers/TagPicker/TagItem.tsx @@ -2,10 +2,9 @@ import * as React from 'react'; import { styled, classNamesFunction } from '../../../Utilities'; import { IconButton } from '../../../Button'; - -import { ITagItemProps, ITagItemStyleProps, ITagItemStyles } from './TagPicker.types'; import { getStyles } from './TagItem.styles'; import { useId } from '@fluentui/react-hooks'; +import type { ITagItemProps, ITagItemStyleProps, ITagItemStyles } from './TagPicker.types'; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/components/pickers/TagPicker/TagItemSuggestion.styles.ts b/packages/react/src/components/pickers/TagPicker/TagItemSuggestion.styles.ts index e5a1e7f56efd3a..a6cb3d9a17aec6 100644 --- a/packages/react/src/components/pickers/TagPicker/TagItemSuggestion.styles.ts +++ b/packages/react/src/components/pickers/TagPicker/TagItemSuggestion.styles.ts @@ -1,5 +1,5 @@ import { getGlobalClassNames } from '../../../Styling'; -import { ITagItemSuggestionStyleProps, ITagItemSuggestionStyles } from './TagPicker.types'; +import type { ITagItemSuggestionStyleProps, ITagItemSuggestionStyles } from './TagPicker.types'; const GlobalClassNames = { suggestionTextOverflow: 'ms-TagItem-TextOverflow', diff --git a/packages/react/src/components/pickers/TagPicker/TagItemSuggestion.tsx b/packages/react/src/components/pickers/TagPicker/TagItemSuggestion.tsx index 0dd17c9fe4a11e..130e380acd0e6a 100644 --- a/packages/react/src/components/pickers/TagPicker/TagItemSuggestion.tsx +++ b/packages/react/src/components/pickers/TagPicker/TagItemSuggestion.tsx @@ -1,8 +1,12 @@ import * as React from 'react'; import { classNamesFunction, styled } from '../../../Utilities'; -import { ITagItemSuggestionProps, ITagItemSuggestionStyleProps, ITagItemSuggestionStyles } from './TagPicker.types'; import { getStyles } from './TagItemSuggestion.styles'; +import type { + ITagItemSuggestionProps, + ITagItemSuggestionStyleProps, + ITagItemSuggestionStyles, +} from './TagPicker.types'; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/components/pickers/TagPicker/TagPicker.test.tsx b/packages/react/src/components/pickers/TagPicker/TagPicker.test.tsx index 6a1187abb80d8c..3fb64d63af0310 100644 --- a/packages/react/src/components/pickers/TagPicker/TagPicker.test.tsx +++ b/packages/react/src/components/pickers/TagPicker/TagPicker.test.tsx @@ -4,10 +4,10 @@ import * as ReactTestUtils from 'react-dom/test-utils'; import * as renderer from 'react-test-renderer'; import { TagPicker } from './TagPicker'; -import { ITag } from './TagPicker.types'; -import { IBasePicker } from '../BasePicker.types'; import { resetIds } from '@fluentui/utilities'; import { isConformant } from '../../../common/isConformant'; +import type { ITag } from './TagPicker.types'; +import type { IBasePicker } from '../BasePicker.types'; function onResolveSuggestions(text: string): ITag[] { return [ diff --git a/packages/react/src/components/pickers/TagPicker/TagPicker.tsx b/packages/react/src/components/pickers/TagPicker/TagPicker.tsx index 07767bd06668c3..3718c5ac0e164a 100644 --- a/packages/react/src/components/pickers/TagPicker/TagPicker.tsx +++ b/packages/react/src/components/pickers/TagPicker/TagPicker.tsx @@ -1,11 +1,11 @@ import * as React from 'react'; import { styled, initializeComponentRef } from '../../../Utilities'; import { BasePicker } from '../BasePicker'; -import { IBasePickerStyleProps, IBasePickerStyles } from '../BasePicker.types'; import { getStyles } from '../BasePicker.styles'; import { TagItem } from './TagItem'; import { TagItemSuggestion } from './TagItemSuggestion'; -import { ITagPickerProps, ITag, ITagItemProps } from './TagPicker.types'; +import type { IBasePickerStyleProps, IBasePickerStyles } from '../BasePicker.types'; +import type { ITagPickerProps, ITag, ITagItemProps } from './TagPicker.types'; /** * {@docCategory TagPicker} diff --git a/packages/react/src/components/pickers/TagPicker/TagPicker.types.ts b/packages/react/src/components/pickers/TagPicker/TagPicker.types.ts index 44351d16590724..942cb785e06ebf 100644 --- a/packages/react/src/components/pickers/TagPicker/TagPicker.types.ts +++ b/packages/react/src/components/pickers/TagPicker/TagPicker.types.ts @@ -1,9 +1,8 @@ import * as React from 'react'; - -import { IStyle, ITheme } from '../../../Styling'; -import { IStyleFunctionOrObject } from '../../../Utilities'; -import { IPickerItemProps } from '../PickerItem.types'; -import { IBasePickerProps } from '../BasePicker.types'; +import type { IStyle, ITheme } from '../../../Styling'; +import type { IStyleFunctionOrObject } from '../../../Utilities'; +import type { IPickerItemProps } from '../PickerItem.types'; +import type { IBasePickerProps } from '../BasePicker.types'; /** * TagPickerItem item interface. diff --git a/packages/react/src/utilities/ButtonGrid/ButtonGrid.base.tsx b/packages/react/src/utilities/ButtonGrid/ButtonGrid.base.tsx index c3dafcded3fb05..21fc9ac21ca5c4 100644 --- a/packages/react/src/utilities/ButtonGrid/ButtonGrid.base.tsx +++ b/packages/react/src/utilities/ButtonGrid/ButtonGrid.base.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { toMatrix, classNamesFunction, getNativeProps, htmlElementProperties } from '../../Utilities'; import { FocusZone } from '../../FocusZone'; -import { IButtonGridProps, IButtonGridStyleProps, IButtonGridStyles } from './ButtonGrid.types'; import { useId } from '@fluentui/react-hooks'; +import type { IButtonGridProps, IButtonGridStyleProps, IButtonGridStyles } from './ButtonGrid.types'; const getClassNames = classNamesFunction(); diff --git a/packages/react/src/utilities/ButtonGrid/ButtonGrid.styles.ts b/packages/react/src/utilities/ButtonGrid/ButtonGrid.styles.ts index 36fae45b631502..804035dd3f6f05 100644 --- a/packages/react/src/utilities/ButtonGrid/ButtonGrid.styles.ts +++ b/packages/react/src/utilities/ButtonGrid/ButtonGrid.styles.ts @@ -1,4 +1,4 @@ -import { IButtonGridStyleProps, IButtonGridStyles } from './ButtonGrid.types'; +import type { IButtonGridStyleProps, IButtonGridStyles } from './ButtonGrid.types'; export const getStyles = (props: IButtonGridStyleProps): IButtonGridStyles => { return { diff --git a/packages/react/src/utilities/ButtonGrid/ButtonGrid.tsx b/packages/react/src/utilities/ButtonGrid/ButtonGrid.tsx index 9553064d77dabd..75e27e1cf3c6c1 100644 --- a/packages/react/src/utilities/ButtonGrid/ButtonGrid.tsx +++ b/packages/react/src/utilities/ButtonGrid/ButtonGrid.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { styled } from '../../Utilities'; import { ButtonGridBase } from './ButtonGrid.base'; -import { IButtonGridProps, IButtonGridStyleProps, IButtonGridStyles } from './ButtonGrid.types'; import { getStyles } from './ButtonGrid.styles'; +import type { IButtonGridProps, IButtonGridStyleProps, IButtonGridStyles } from './ButtonGrid.types'; export const ButtonGrid: React.FunctionComponent = styled< IButtonGridProps, diff --git a/packages/react/src/utilities/ButtonGrid/ButtonGrid.types.ts b/packages/react/src/utilities/ButtonGrid/ButtonGrid.types.ts index 71970762128457..8202b5e229bfa6 100644 --- a/packages/react/src/utilities/ButtonGrid/ButtonGrid.types.ts +++ b/packages/react/src/utilities/ButtonGrid/ButtonGrid.types.ts @@ -1,6 +1,6 @@ import * as React from 'react'; -import { IStyle, ITheme } from '../../Styling'; -import { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; +import type { IStyle, ITheme } from '../../Styling'; +import type { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; export interface IButtonGrid {} diff --git a/packages/react/src/utilities/ButtonGrid/ButtonGridCell.tsx b/packages/react/src/utilities/ButtonGrid/ButtonGridCell.tsx index d2803023eb67f0..426962bfca04c3 100644 --- a/packages/react/src/utilities/ButtonGrid/ButtonGridCell.tsx +++ b/packages/react/src/utilities/ButtonGrid/ButtonGridCell.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { css } from '../../Utilities'; -import { IButtonGridCellProps } from './ButtonGridCell.types'; import { CommandButton } from '../../Button'; import { useId } from '@fluentui/react-hooks'; +import type { IButtonGridCellProps } from './ButtonGridCell.types'; export const ButtonGridCell = >(props: IButtonGridCellProps) => { const defaultId = useId('gridCell'); diff --git a/packages/react/src/utilities/ButtonGrid/ButtonGridCell.types.ts b/packages/react/src/utilities/ButtonGrid/ButtonGridCell.types.ts index 42721de7caab02..2ef939d4795ade 100644 --- a/packages/react/src/utilities/ButtonGrid/ButtonGridCell.types.ts +++ b/packages/react/src/utilities/ButtonGrid/ButtonGridCell.types.ts @@ -1,6 +1,6 @@ import * as React from 'react'; -import { IButtonClassNames } from '../../components/Button/BaseButton.classNames'; -import { ITheme } from '../../Styling'; +import type { IButtonClassNames } from '../../components/Button/BaseButton.classNames'; +import type { ITheme } from '../../Styling'; export interface IButtonGridCellProps { /** diff --git a/packages/react/src/utilities/DraggableZone/DraggableZone.tsx b/packages/react/src/utilities/DraggableZone/DraggableZone.tsx index 76708598312e79..af1506bf543723 100644 --- a/packages/react/src/utilities/DraggableZone/DraggableZone.tsx +++ b/packages/react/src/utilities/DraggableZone/DraggableZone.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import { IDraggableZoneProps, ICoordinates, IDragData } from './DraggableZone.types'; import { getClassNames } from './DraggableZone.styles'; import { on } from '../../Utilities'; +import type { IDraggableZoneProps, ICoordinates, IDragData } from './DraggableZone.types'; export interface IDraggableZoneState { isDragging: boolean; diff --git a/packages/react/src/utilities/MenuContext/MenuContext.ts b/packages/react/src/utilities/MenuContext/MenuContext.ts index 42383c8a76655c..2b953b44fd82da 100644 --- a/packages/react/src/utilities/MenuContext/MenuContext.ts +++ b/packages/react/src/utilities/MenuContext/MenuContext.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { MinimalMenuProps } from './types'; +import type { MinimalMenuProps } from './types'; export const MenuContext = React.createContext({}); diff --git a/packages/react/src/utilities/ThemeProvider/ThemeContext.ts b/packages/react/src/utilities/ThemeProvider/ThemeContext.ts index 7090ebef24390b..196d372e2a6ff0 100644 --- a/packages/react/src/utilities/ThemeProvider/ThemeContext.ts +++ b/packages/react/src/utilities/ThemeProvider/ThemeContext.ts @@ -1,4 +1,4 @@ -import { Theme } from '@fluentui/theme'; import * as React from 'react'; +import type { Theme } from '@fluentui/theme'; export const ThemeContext = React.createContext(undefined); diff --git a/packages/react/src/utilities/ThemeProvider/ThemeProvider.test.tsx b/packages/react/src/utilities/ThemeProvider/ThemeProvider.test.tsx index 3c6716d2270f28..de1cf6777c8b96 100644 --- a/packages/react/src/utilities/ThemeProvider/ThemeProvider.test.tsx +++ b/packages/react/src/utilities/ThemeProvider/ThemeProvider.test.tsx @@ -3,8 +3,9 @@ import { ThemeProvider } from './ThemeProvider'; import * as renderer from 'react-test-renderer'; import { useTheme } from './useTheme'; import { mount } from 'enzyme'; -import { createTheme, Theme, PartialTheme } from '@fluentui/theme'; +import { createTheme } from '@fluentui/theme'; import { Stylesheet } from '@fluentui/merge-styles'; +import type { Theme, PartialTheme } from '@fluentui/theme'; const lightTheme: PartialTheme = { semanticColors: { diff --git a/packages/react/src/utilities/ThemeProvider/ThemeProvider.tsx b/packages/react/src/utilities/ThemeProvider/ThemeProvider.tsx index 04177f9048dd58..d5f26439584433 100644 --- a/packages/react/src/utilities/ThemeProvider/ThemeProvider.tsx +++ b/packages/react/src/utilities/ThemeProvider/ThemeProvider.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; -import { ThemeProviderProps } from './ThemeProvider.types'; import { useThemeProviderClasses } from './useThemeProviderClasses'; import { useThemeProvider } from './useThemeProvider'; import { useFocusRects } from '@fluentui/utilities'; import { useMergedRefs } from '@fluentui/react-hooks'; +import type { ThemeProviderProps } from './ThemeProvider.types'; /** * ThemeProvider, used for providing css variables and registering stylesheets. diff --git a/packages/react/src/utilities/ThemeProvider/ThemeProvider.types.ts b/packages/react/src/utilities/ThemeProvider/ThemeProvider.types.ts index 0030bf50b8c64b..8d4201631fb271 100644 --- a/packages/react/src/utilities/ThemeProvider/ThemeProvider.types.ts +++ b/packages/react/src/utilities/ThemeProvider/ThemeProvider.types.ts @@ -1,6 +1,6 @@ import * as React from 'react'; -import { Theme, PartialTheme } from '@fluentui/theme'; -import { ICustomizerContext } from '@fluentui/utilities'; +import type { Theme, PartialTheme } from '@fluentui/theme'; +import type { ICustomizerContext } from '@fluentui/utilities'; /* eslint-disable @typescript-eslint/naming-convention */ diff --git a/packages/react/src/utilities/ThemeProvider/index.ts b/packages/react/src/utilities/ThemeProvider/index.ts index 11f01698cb6ead..4250219b80ca4e 100644 --- a/packages/react/src/utilities/ThemeProvider/index.ts +++ b/packages/react/src/utilities/ThemeProvider/index.ts @@ -1,5 +1,5 @@ export { ThemeProvider } from './ThemeProvider'; -export { ThemeProviderProps } from './ThemeProvider.types'; export { useTheme } from './useTheme'; export { ThemeContext } from './ThemeContext'; export * from './makeStyles'; +export type { ThemeProviderProps } from './ThemeProvider.types'; diff --git a/packages/react/src/utilities/ThemeProvider/makeStyles.ts b/packages/react/src/utilities/ThemeProvider/makeStyles.ts index bdb909471cb436..a646d4339d558d 100644 --- a/packages/react/src/utilities/ThemeProvider/makeStyles.ts +++ b/packages/react/src/utilities/ThemeProvider/makeStyles.ts @@ -1,8 +1,8 @@ -import { IStyle } from '@fluentui/style-utilities'; -import { Theme } from '@fluentui/theme'; import { useTheme } from './useTheme'; import { useWindow } from '@fluentui/react-window-provider'; import { mergeStylesRenderer } from './styleRenderers/mergeStylesRenderer'; +import type { IStyle } from '@fluentui/style-utilities'; +import type { Theme } from '@fluentui/theme'; const graphGet = (graphNode: Map, path: any[]): any | undefined => { for (const key of path) { diff --git a/packages/react/src/utilities/ThemeProvider/renderThemeProvider.tsx b/packages/react/src/utilities/ThemeProvider/renderThemeProvider.tsx index c103115a555250..af0ca3f0e44676 100644 --- a/packages/react/src/utilities/ThemeProvider/renderThemeProvider.tsx +++ b/packages/react/src/utilities/ThemeProvider/renderThemeProvider.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import { ThemeProviderState } from './ThemeProvider.types'; import { CustomizerContext, getNativeElementProps, omit } from '@fluentui/utilities'; import { ThemeContext } from './ThemeContext'; +import type { ThemeProviderState } from './ThemeProvider.types'; export const renderThemeProvider = (state: ThemeProviderState) => { const { theme, customizerContext } = state; diff --git a/packages/react/src/utilities/ThemeProvider/styleRenderers/mergeStylesRenderer.tsx b/packages/react/src/utilities/ThemeProvider/styleRenderers/mergeStylesRenderer.tsx index fe397a24316f5e..372d6e7998cb04 100644 --- a/packages/react/src/utilities/ThemeProvider/styleRenderers/mergeStylesRenderer.tsx +++ b/packages/react/src/utilities/ThemeProvider/styleRenderers/mergeStylesRenderer.tsx @@ -1,10 +1,10 @@ -import { StyleRenderer } from './types'; import { Stylesheet, mergeCssSets, fontFace as mergeFontFace, keyframes as mergeKeyframes, } from '@fluentui/merge-styles'; +import type { StyleRenderer } from './types'; let _seed = 0; diff --git a/packages/react/src/utilities/ThemeProvider/styleRenderers/types.ts b/packages/react/src/utilities/ThemeProvider/styleRenderers/types.ts index f5c2eb49b1de89..f0c6236f2e1584 100644 --- a/packages/react/src/utilities/ThemeProvider/styleRenderers/types.ts +++ b/packages/react/src/utilities/ThemeProvider/styleRenderers/types.ts @@ -1,6 +1,5 @@ -import { IFontFace, IKeyframes } from '@fluentui/merge-styles'; - /* eslint-disable @typescript-eslint/naming-convention */ +import type { IFontFace, IKeyframes } from '@fluentui/merge-styles'; type StyleRendererOptions = { rtl?: boolean; diff --git a/packages/react/src/utilities/ThemeProvider/useTheme.ts b/packages/react/src/utilities/ThemeProvider/useTheme.ts index d26479463701ae..050c6c93e28aa6 100644 --- a/packages/react/src/utilities/ThemeProvider/useTheme.ts +++ b/packages/react/src/utilities/ThemeProvider/useTheme.ts @@ -1,8 +1,8 @@ import { useContext } from 'react'; import { useCustomizationSettings } from '@fluentui/utilities'; -import { ITheme, createTheme } from '@fluentui/theme'; +import { createTheme } from '@fluentui/theme'; import { ThemeContext } from './ThemeContext'; -import { Theme } from '@fluentui/theme'; +import type { ITheme, Theme } from '@fluentui/theme'; /** * Get theme from CustomizerContext or Customizations singleton. diff --git a/packages/react/src/utilities/ThemeProvider/useThemeProvider.tsx b/packages/react/src/utilities/ThemeProvider/useThemeProvider.tsx index d0fd0c2bad84e8..c22d830fc9b5db 100644 --- a/packages/react/src/utilities/ThemeProvider/useThemeProvider.tsx +++ b/packages/react/src/utilities/ThemeProvider/useThemeProvider.tsx @@ -1,7 +1,7 @@ -import { ThemeProviderProps, ThemeProviderState } from './ThemeProvider.types'; import { renderThemeProvider as render } from './renderThemeProvider'; import { useThemeProviderState } from './useThemeProviderState'; import { getPropsWithDefaults } from '@fluentui/utilities'; +import type { ThemeProviderProps, ThemeProviderState } from './ThemeProvider.types'; /** * Returns the ThemeProvider render function and calculated state, given user input, ref, and diff --git a/packages/react/src/utilities/ThemeProvider/useThemeProviderClasses.tsx b/packages/react/src/utilities/ThemeProvider/useThemeProviderClasses.tsx index 503d9b6746a516..5c0df303b24f8f 100644 --- a/packages/react/src/utilities/ThemeProvider/useThemeProviderClasses.tsx +++ b/packages/react/src/utilities/ThemeProvider/useThemeProviderClasses.tsx @@ -2,8 +2,8 @@ import * as React from 'react'; import { css } from '@fluentui/utilities'; import { useDocument } from '@fluentui/react-window-provider'; import { makeStyles } from './makeStyles'; -import { ThemeProviderState } from './ThemeProvider.types'; -import { Theme } from '@fluentui/theme'; +import type { ThemeProviderState } from './ThemeProvider.types'; +import type { Theme } from '@fluentui/theme'; const useThemeProviderStyles = makeStyles((theme: Theme) => { const { semanticColors, fonts } = theme; diff --git a/packages/react/src/utilities/ThemeProvider/useThemeProviderState.tsx b/packages/react/src/utilities/ThemeProvider/useThemeProviderState.tsx index 4e6163e12d91ad..ee6245d7c02578 100644 --- a/packages/react/src/utilities/ThemeProvider/useThemeProviderState.tsx +++ b/packages/react/src/utilities/ThemeProvider/useThemeProviderState.tsx @@ -1,8 +1,10 @@ -import { mergeThemes, PartialTheme, Theme } from '@fluentui/theme'; +import { mergeThemes } from '@fluentui/theme'; import * as React from 'react'; -import { ThemeProviderState } from './ThemeProvider.types'; import { useTheme } from './useTheme'; -import { getId, ICustomizerContext } from '@fluentui/utilities'; +import { getId } from '@fluentui/utilities'; +import type { PartialTheme, Theme } from '@fluentui/theme'; +import type { ThemeProviderState } from './ThemeProvider.types'; +import type { ICustomizerContext } from '@fluentui/utilities'; const themeToIdMap = new Map(); diff --git a/packages/react/src/utilities/color/colors.test.ts b/packages/react/src/utilities/color/colors.test.ts index e7eb4199398428..71d2753da2b139 100644 --- a/packages/react/src/utilities/color/colors.test.ts +++ b/packages/react/src/utilities/color/colors.test.ts @@ -19,9 +19,9 @@ import { correctHSV, correctHex, clamp, - IColor, } from './colors'; import { updateT } from './updateT'; +import type { IColor } from './colors'; describe('color utilities', () => { const testColor: IColor = { diff --git a/packages/react/src/utilities/color/correctHSV.ts b/packages/react/src/utilities/color/correctHSV.ts index 15a15fe95e55e9..9b58b39b0ae980 100644 --- a/packages/react/src/utilities/color/correctHSV.ts +++ b/packages/react/src/utilities/color/correctHSV.ts @@ -1,6 +1,6 @@ -import { IHSV } from './interfaces'; import { MAX_COLOR_HUE, MAX_COLOR_SATURATION, MAX_COLOR_VALUE } from './consts'; import { clamp } from './clamp'; +import type { IHSV } from './interfaces'; /** Corrects an HSV color to fall within the valid range. */ export function correctHSV(color: IHSV): IHSV { diff --git a/packages/react/src/utilities/color/correctRGB.ts b/packages/react/src/utilities/color/correctRGB.ts index e5c0c90ca28b76..c41998c5b1eb2c 100644 --- a/packages/react/src/utilities/color/correctRGB.ts +++ b/packages/react/src/utilities/color/correctRGB.ts @@ -1,6 +1,6 @@ -import { IRGB } from './interfaces'; import { MAX_COLOR_ALPHA, MAX_COLOR_RGB } from './consts'; import { clamp } from './clamp'; +import type { IRGB } from './interfaces'; /** Corrects an RGB color to fall within the valid range. */ export function correctRGB(color: IRGB): IRGB { diff --git a/packages/react/src/utilities/color/cssColor.ts b/packages/react/src/utilities/color/cssColor.ts index a69ef06cb85be5..66fa12b533428c 100644 --- a/packages/react/src/utilities/color/cssColor.ts +++ b/packages/react/src/utilities/color/cssColor.ts @@ -1,6 +1,6 @@ -import { IRGB } from './interfaces'; import { MAX_COLOR_ALPHA } from './consts'; import { hsl2rgb } from './hsl2rgb'; +import type { IRGB } from './interfaces'; /** * Converts a valid CSS color string to an RGB color. diff --git a/packages/react/src/utilities/color/getColorFromHSV.ts b/packages/react/src/utilities/color/getColorFromHSV.ts index 389c465f39267b..ca35ab1be52450 100644 --- a/packages/react/src/utilities/color/getColorFromHSV.ts +++ b/packages/react/src/utilities/color/getColorFromHSV.ts @@ -1,8 +1,8 @@ -import { IHSV, IColor } from './interfaces'; import { MAX_COLOR_ALPHA } from './consts'; import { hsv2rgb } from './hsv2rgb'; import { hsv2hex } from './hsv2hex'; import { _rgbaOrHexString } from './_rgbaOrHexString'; +import type { IHSV, IColor } from './interfaces'; /** * Converts an HSV color (and optional alpha value) to a color object. diff --git a/packages/react/src/utilities/color/getColorFromRGBA.ts b/packages/react/src/utilities/color/getColorFromRGBA.ts index 66b6d496b20fed..9223f151b044ba 100644 --- a/packages/react/src/utilities/color/getColorFromRGBA.ts +++ b/packages/react/src/utilities/color/getColorFromRGBA.ts @@ -1,8 +1,8 @@ -import { IRGB, IColor } from './interfaces'; import { MAX_COLOR_ALPHA } from './consts'; import { rgb2hsv } from './rgb2hsv'; import { rgb2hex } from './rgb2hex'; import { _rgbaOrHexString } from './_rgbaOrHexString'; +import type { IRGB, IColor } from './interfaces'; /** Converts an RGBA color to a color object (alpha defaults to 100). */ export function getColorFromRGBA(rgba: IRGB): IColor { diff --git a/packages/react/src/utilities/color/getColorFromString.ts b/packages/react/src/utilities/color/getColorFromString.ts index 9cba458b221116..21daf5f729e41c 100644 --- a/packages/react/src/utilities/color/getColorFromString.ts +++ b/packages/react/src/utilities/color/getColorFromString.ts @@ -1,6 +1,6 @@ -import { IColor } from './interfaces'; import { cssColor } from './cssColor'; import { getColorFromRGBA } from './getColorFromRGBA'; +import type { IColor } from './interfaces'; /** * Converts a CSS color string to a color object. diff --git a/packages/react/src/utilities/color/getFullColorString.ts b/packages/react/src/utilities/color/getFullColorString.ts index 2cf7a797383ab3..1049e750c59d65 100644 --- a/packages/react/src/utilities/color/getFullColorString.ts +++ b/packages/react/src/utilities/color/getFullColorString.ts @@ -1,6 +1,6 @@ -import { IColor } from './interfaces'; import { MAX_COLOR_SATURATION, MAX_COLOR_VALUE } from './consts'; import { hsv2hex } from './hsv2hex'; +import type { IColor } from './interfaces'; /** * Converts a color hue to an HTML color string (with # prefix). diff --git a/packages/react/src/utilities/color/hsl2hsv.ts b/packages/react/src/utilities/color/hsl2hsv.ts index 3660c591b1d067..c7a77a8f3e7b9d 100644 --- a/packages/react/src/utilities/color/hsl2hsv.ts +++ b/packages/react/src/utilities/color/hsl2hsv.ts @@ -1,4 +1,4 @@ -import { IHSV } from './interfaces'; +import type { IHSV } from './interfaces'; /** Converts HSL components to an HSV color. */ export function hsl2hsv(h: number, s: number, l: number): IHSV { diff --git a/packages/react/src/utilities/color/hsl2rgb.ts b/packages/react/src/utilities/color/hsl2rgb.ts index 84851f4155c1ef..9d4e8df705acef 100644 --- a/packages/react/src/utilities/color/hsl2rgb.ts +++ b/packages/react/src/utilities/color/hsl2rgb.ts @@ -1,6 +1,6 @@ -import { IRGB } from './interfaces'; import { hsl2hsv } from './hsl2hsv'; import { hsv2rgb } from './hsv2rgb'; +import type { IRGB } from './interfaces'; /** Converts HSL components to an RGB color. Does not set the alpha value. */ export function hsl2rgb(h: number, s: number, l: number): IRGB { diff --git a/packages/react/src/utilities/color/hsv2hsl.ts b/packages/react/src/utilities/color/hsv2hsl.ts index 54689491960de4..f9a9599492b1f5 100644 --- a/packages/react/src/utilities/color/hsv2hsl.ts +++ b/packages/react/src/utilities/color/hsv2hsl.ts @@ -1,5 +1,5 @@ -import { IHSL } from './interfaces'; import { MAX_COLOR_SATURATION, MAX_COLOR_VALUE } from './consts'; +import type { IHSL } from './interfaces'; /** Converts HSV components to an HSL color. */ export function hsv2hsl(h: number, s: number, v: number): IHSL { diff --git a/packages/react/src/utilities/color/hsv2rgb.ts b/packages/react/src/utilities/color/hsv2rgb.ts index 8cfd608c52ec4d..01123ed6da5c0d 100644 --- a/packages/react/src/utilities/color/hsv2rgb.ts +++ b/packages/react/src/utilities/color/hsv2rgb.ts @@ -1,5 +1,5 @@ -import { IRGB } from './interfaces'; import { MAX_COLOR_RGB } from './consts'; +import type { IRGB } from './interfaces'; /** Converts HSV components to an RGB color. Does not set the alpha value. */ export function hsv2rgb(h: number, s: number, v: number): IRGB { diff --git a/packages/react/src/utilities/color/rgb2hsv.ts b/packages/react/src/utilities/color/rgb2hsv.ts index 0612aa685e6d4a..f146dad7fc620d 100644 --- a/packages/react/src/utilities/color/rgb2hsv.ts +++ b/packages/react/src/utilities/color/rgb2hsv.ts @@ -1,5 +1,5 @@ -import { IHSV } from './interfaces'; import { MAX_COLOR_RGB } from './consts'; +import type { IHSV } from './interfaces'; /** Converts RGB components to an HSV color. */ export function rgb2hsv(r: number, g: number, b: number): IHSV { diff --git a/packages/react/src/utilities/color/shades.ts b/packages/react/src/utilities/color/shades.ts index ba909903101e67..6c12a50b2c7c03 100644 --- a/packages/react/src/utilities/color/shades.ts +++ b/packages/react/src/utilities/color/shades.ts @@ -3,13 +3,13 @@ * This utility module is used with theming. Given a color to shade, whether the theme is inverted * (i.e. is a dark color), and the desired shade enum, this will return an appropriate shade of that color. */ -import { IHSV, IColor } from './interfaces'; import { MAX_COLOR_RGB } from './consts'; import { assign } from '../../Utilities'; import { clamp } from './clamp'; import { getColorFromRGBA } from './getColorFromRGBA'; import { hsv2hsl } from './hsv2hsl'; import { hsv2rgb } from './hsv2rgb'; +import type { IHSV, IColor } from './interfaces'; // Soften: to get closer to the background color's luminance // (softening with a white background would be lightening, with black it'd be darkening) diff --git a/packages/react/src/utilities/color/updateA.ts b/packages/react/src/utilities/color/updateA.ts index fa35922ae24173..039937f79984b5 100644 --- a/packages/react/src/utilities/color/updateA.ts +++ b/packages/react/src/utilities/color/updateA.ts @@ -1,6 +1,6 @@ -import { IColor } from './interfaces'; import { _rgbaOrHexString } from './_rgbaOrHexString'; import { MAX_COLOR_ALPHA } from './consts'; +import type { IColor } from './interfaces'; /** * Gets a color with the given alpha value and the same other components as `color`. diff --git a/packages/react/src/utilities/color/updateH.ts b/packages/react/src/utilities/color/updateH.ts index 20eda54c895248..366497070437f0 100644 --- a/packages/react/src/utilities/color/updateH.ts +++ b/packages/react/src/utilities/color/updateH.ts @@ -1,7 +1,7 @@ -import { IColor } from './interfaces'; import { hsv2rgb } from './hsv2rgb'; import { rgb2hex } from './rgb2hex'; import { _rgbaOrHexString } from './_rgbaOrHexString'; +import type { IColor } from './interfaces'; /** * Gets a color with the same saturation and value as `color` and the other components updated diff --git a/packages/react/src/utilities/color/updateRGB.ts b/packages/react/src/utilities/color/updateRGB.ts index c43e95e3a49808..cf04f2d77a3e0e 100644 --- a/packages/react/src/utilities/color/updateRGB.ts +++ b/packages/react/src/utilities/color/updateRGB.ts @@ -1,5 +1,5 @@ -import { IColor, IRGB } from './interfaces'; import { getColorFromRGBA } from './getColorFromRGBA'; +import type { IColor, IRGB } from './interfaces'; /** * Gets a color with a single RGBA component updated to a new value. diff --git a/packages/react/src/utilities/color/updateSV.ts b/packages/react/src/utilities/color/updateSV.ts index 7acecd3bcad091..0008ecda4e206e 100644 --- a/packages/react/src/utilities/color/updateSV.ts +++ b/packages/react/src/utilities/color/updateSV.ts @@ -1,7 +1,7 @@ -import { IColor } from './interfaces'; import { hsv2rgb } from './hsv2rgb'; import { rgb2hex } from './rgb2hex'; import { _rgbaOrHexString } from './_rgbaOrHexString'; +import type { IColor } from './interfaces'; /** * Gets a color with the same hue as `color` and other components updated to match the given diff --git a/packages/react/src/utilities/color/updateT.ts b/packages/react/src/utilities/color/updateT.ts index 024bfb45639fb7..d4187e15e74e17 100644 --- a/packages/react/src/utilities/color/updateT.ts +++ b/packages/react/src/utilities/color/updateT.ts @@ -1,6 +1,6 @@ -import { IColor } from './interfaces'; import { _rgbaOrHexString } from './_rgbaOrHexString'; import { MAX_COLOR_ALPHA } from './consts'; +import type { IColor } from './interfaces'; /** * Gets a color with the given transparency value and the same other components as `color`. diff --git a/packages/react/src/utilities/contextualMenu/contextualMenuUtility.test.ts b/packages/react/src/utilities/contextualMenu/contextualMenuUtility.test.ts index 373382b8b3728c..efbcf0e541e1dc 100644 --- a/packages/react/src/utilities/contextualMenu/contextualMenuUtility.test.ts +++ b/packages/react/src/utilities/contextualMenu/contextualMenuUtility.test.ts @@ -1,5 +1,5 @@ import { getIsChecked, hasSubmenu, getMenuItemAriaRole } from './contextualMenuUtility'; -import { IContextualMenuItem } from '../../index'; +import type { IContextualMenuItem } from '../../index'; describe('getIsChecked', () => { describe('when item can be checked', () => { diff --git a/packages/react/src/utilities/contextualMenu/contextualMenuUtility.ts b/packages/react/src/utilities/contextualMenu/contextualMenuUtility.ts index 6464665e557046..ed46572d9a7f74 100644 --- a/packages/react/src/utilities/contextualMenu/contextualMenuUtility.ts +++ b/packages/react/src/utilities/contextualMenu/contextualMenuUtility.ts @@ -1,4 +1,4 @@ -import { IContextualMenuItem } from '../../index'; +import type { IContextualMenuItem } from '../../index'; /** * Determines the effective checked state of a menu item. diff --git a/packages/react/src/utilities/dragdrop/DragDropHelper.tsx b/packages/react/src/utilities/dragdrop/DragDropHelper.tsx index 6e3c12790d4552..091673bf9308de 100644 --- a/packages/react/src/utilities/dragdrop/DragDropHelper.tsx +++ b/packages/react/src/utilities/dragdrop/DragDropHelper.tsx @@ -1,6 +1,12 @@ import { EventGroup, getDocument } from '../../Utilities'; -import { IDragDropHelper, IDragDropTarget, IDragDropOptions, IDragDropEvent, IDragDropContext } from './interfaces'; -import { ISelection } from '../../utilities/selection/interfaces'; +import type { + IDragDropHelper, + IDragDropTarget, + IDragDropOptions, + IDragDropEvent, + IDragDropContext, +} from './interfaces'; +import type { ISelection } from '../../utilities/selection/interfaces'; const MOUSEDOWN_PRIMARY_BUTTON = 0; // for mouse down event we are using ev.button property, 0 means left button const MOUSEMOVE_PRIMARY_BUTTON = 1; // for mouse move event we are using ev.buttons property, 1 means left button diff --git a/packages/react/src/utilities/groupedList/GroupedListUtility.test.tsx b/packages/react/src/utilities/groupedList/GroupedListUtility.test.tsx index 02f59ca4f1c66b..82480b2a1c269a 100644 --- a/packages/react/src/utilities/groupedList/GroupedListUtility.test.tsx +++ b/packages/react/src/utilities/groupedList/GroupedListUtility.test.tsx @@ -1,5 +1,5 @@ -import { IGroup } from '../../components/GroupedList/GroupedList.types'; import { GetGroupCount } from './GroupedListUtility'; +import type { IGroup } from '../../components/GroupedList/GroupedList.types'; const G = (children: IGroup[] = []): IGroup => { return { key: 'Key', name: 'Group', startIndex: 0, count: 0, children }; diff --git a/packages/react/src/utilities/groupedList/GroupedListUtility.tsx b/packages/react/src/utilities/groupedList/GroupedListUtility.tsx index 75087906249dc1..8ece8835c809b2 100644 --- a/packages/react/src/utilities/groupedList/GroupedListUtility.tsx +++ b/packages/react/src/utilities/groupedList/GroupedListUtility.tsx @@ -1,4 +1,4 @@ -import { IGroup } from '../../components/GroupedList/GroupedList.types'; +import type { IGroup } from '../../components/GroupedList/GroupedList.types'; /** * Takes an array of groups and returns a count of the groups and all descendant groups. diff --git a/packages/react/src/utilities/keytips/IKeytipTransitionKey.test.ts b/packages/react/src/utilities/keytips/IKeytipTransitionKey.test.ts index 0138da4496ca28..408f0597db2276 100644 --- a/packages/react/src/utilities/keytips/IKeytipTransitionKey.test.ts +++ b/packages/react/src/utilities/keytips/IKeytipTransitionKey.test.ts @@ -1,5 +1,6 @@ -import { IKeytipTransitionKey, transitionKeysAreEqual, transitionKeysContain } from './IKeytipTransitionKey'; +import { transitionKeysAreEqual, transitionKeysContain } from './IKeytipTransitionKey'; import { KeyCodes } from '@fluentui/utilities'; +import type { IKeytipTransitionKey } from './IKeytipTransitionKey'; describe('IKeytipTransitionKey', () => { describe('transitionKeysAreEqual', () => { diff --git a/packages/react/src/utilities/keytips/KeytipConfig.test.ts b/packages/react/src/utilities/keytips/KeytipConfig.test.ts index 4f551fa8a61008..50f352e65a8ab5 100644 --- a/packages/react/src/utilities/keytips/KeytipConfig.test.ts +++ b/packages/react/src/utilities/keytips/KeytipConfig.test.ts @@ -1,5 +1,6 @@ -import { buildKeytipConfigMap, IKeytipConfig } from './KeytipConfig'; +import { buildKeytipConfigMap } from './KeytipConfig'; import { arraysEqual } from '../../Utilities'; +import type { IKeytipConfig } from './KeytipConfig'; describe('KeytipConfig', () => { it('buildKeytipConfigMap test', () => { diff --git a/packages/react/src/utilities/keytips/KeytipConfig.ts b/packages/react/src/utilities/keytips/KeytipConfig.ts index 2f97bb969ea0d1..844a1d87e6e6f2 100644 --- a/packages/react/src/utilities/keytips/KeytipConfig.ts +++ b/packages/react/src/utilities/keytips/KeytipConfig.ts @@ -1,4 +1,4 @@ -import { IKeytipProps } from '../../Keytip'; +import type { IKeytipProps } from '../../Keytip'; export interface IKeytipConfig { keytips: IKeytipConfigItem[]; diff --git a/packages/react/src/utilities/keytips/KeytipManager.test.tsx b/packages/react/src/utilities/keytips/KeytipManager.test.tsx index 0ebe99ebc4fccb..905a9fb78e6926 100644 --- a/packages/react/src/utilities/keytips/KeytipManager.test.tsx +++ b/packages/react/src/utilities/keytips/KeytipManager.test.tsx @@ -1,7 +1,7 @@ import { KeytipManager } from './KeytipManager'; import { arraysEqual, EventGroup } from '../../Utilities'; -import { IKeytipProps } from '../../Keytip'; import { KeytipEvents } from '../../utilities/keytips/KeytipConstants'; +import type { IKeytipProps } from '../../Keytip'; let ktpMgr: KeytipManager; const events = new EventGroup(this); diff --git a/packages/react/src/utilities/keytips/KeytipManager.ts b/packages/react/src/utilities/keytips/KeytipManager.ts index 91d14ec2a5386e..7d839c03c74790 100644 --- a/packages/react/src/utilities/keytips/KeytipManager.ts +++ b/packages/react/src/utilities/keytips/KeytipManager.ts @@ -1,6 +1,6 @@ -import { IKeytipProps } from '../../Keytip'; import { EventGroup, getId } from '../../Utilities'; import { KeytipEvents } from '../../utilities/keytips/KeytipConstants'; +import type { IKeytipProps } from '../../Keytip'; export interface IUniqueKeytip { uniqueID: string; diff --git a/packages/react/src/utilities/positioning/index.ts b/packages/react/src/utilities/positioning/index.ts index 262a3d4255f1cb..2bce987637cbc6 100644 --- a/packages/react/src/utilities/positioning/index.ts +++ b/packages/react/src/utilities/positioning/index.ts @@ -1,6 +1,4 @@ export { - IElementPosition, - IElementPositionInfo, getBoundsFromTargetWindow, getMaxHeight, getOppositeEdge, @@ -9,3 +7,4 @@ export { positionElement, } from './positioning'; export * from './positioning.types'; +export type { IElementPosition, IElementPositionInfo } from './positioning'; diff --git a/packages/react/src/utilities/positioning/positioning.test.ts b/packages/react/src/utilities/positioning/positioning.test.ts index 699a5c5a7a3ba2..91edd0b215810b 100644 --- a/packages/react/src/utilities/positioning/positioning.test.ts +++ b/packages/react/src/utilities/positioning/positioning.test.ts @@ -1,7 +1,10 @@ -import { Point, Rectangle } from '../../Utilities'; -import { getBoundsFromTargetWindow, RectangleEdge, IElementPosition } from './index'; +import { Rectangle } from '../../Utilities'; +import { getBoundsFromTargetWindow, RectangleEdge } from './index'; import { __positioningTestPackage } from './positioning'; import { DirectionalHint } from '../../common/DirectionalHint'; +import type { Point } from '../../Utilities'; +import type { IElementPosition } from './index'; + interface ITestValidation { callout: Rectangle; beak: Rectangle | null; diff --git a/packages/react/src/utilities/positioning/positioning.ts b/packages/react/src/utilities/positioning/positioning.ts index 3cfb90ec0fda9a..754e42f524b74b 100644 --- a/packages/react/src/utilities/positioning/positioning.ts +++ b/packages/react/src/utilities/positioning/positioning.ts @@ -1,16 +1,17 @@ import { DirectionalHint } from '../../common/DirectionalHint'; -import { getScrollbarWidth, getRTL, IRectangle } from '../../Utilities'; -import { +import { getScrollbarWidth, getRTL } from '../../Utilities'; +import { RectangleEdge } from './positioning.types'; +import { Rectangle } from '../../Utilities'; +import type { IRectangle, Point } from '../../Utilities'; +import type { IPositionDirectionalHintData, IPositionedData, ICalloutPositionedInfo, ICalloutBeakPositionedInfo, IPositionProps, ICalloutPositionProps, - RectangleEdge, IWindowWithSegments, } from './positioning.types'; -import { Point, Rectangle } from '../../Utilities'; function _createPositionData( targetEdge: RectangleEdge, diff --git a/packages/react/src/utilities/positioning/positioning.types.ts b/packages/react/src/utilities/positioning/positioning.types.ts index 2f0e80b189a50c..2537e93d7bab7c 100644 --- a/packages/react/src/utilities/positioning/positioning.types.ts +++ b/packages/react/src/utilities/positioning/positioning.types.ts @@ -1,8 +1,5 @@ import { DirectionalHint } from '../../common/DirectionalHint'; -import { IRectangle, Point } from '../../Utilities'; - -// eslint-disable-next-line deprecation/deprecation -export { Point, IPoint } from '../../Utilities'; +import type { IRectangle, Point } from '../../Utilities'; export enum RectangleEdge { top = 1, @@ -124,3 +121,6 @@ export interface IRelativePositions { directionalClassName: string; submenuDirection: DirectionalHint; } + +// eslint-disable-next-line deprecation/deprecation +export type { Point, IPoint } from '../../Utilities'; diff --git a/packages/react/src/utilities/selectableOption/SelectableDroppableText.types.ts b/packages/react/src/utilities/selectableOption/SelectableDroppableText.types.ts index a39dca1d684972..7824e46ea1f5ee 100644 --- a/packages/react/src/utilities/selectableOption/SelectableDroppableText.types.ts +++ b/packages/react/src/utilities/selectableOption/SelectableDroppableText.types.ts @@ -1,8 +1,8 @@ import * as React from 'react'; -import { IRefObject, IRenderFunction } from '../../Utilities'; -import { ICalloutProps } from '../../Callout'; -import { IPanelProps } from '../../Panel'; -import { ISelectableOption } from '../../utilities/selectableOption/SelectableOption.types'; +import type { IRefObject, IRenderFunction } from '../../Utilities'; +import type { ICalloutProps } from '../../Callout'; +import type { IPanelProps } from '../../Panel'; +import type { ISelectableOption } from '../../utilities/selectableOption/SelectableOption.types'; /** * - `TComponent` - Component used for reference properties, such as `componentRef`. diff --git a/packages/react/src/utilities/selectableOption/SelectableOption.ts b/packages/react/src/utilities/selectableOption/SelectableOption.ts index c979f0c19e3de8..8646a6b3ee4765 100644 --- a/packages/react/src/utilities/selectableOption/SelectableOption.ts +++ b/packages/react/src/utilities/selectableOption/SelectableOption.ts @@ -1,4 +1,4 @@ -import { ISelectableOption } from '../../utilities/selectableOption/SelectableOption.types'; +import type { ISelectableOption } from '../../utilities/selectableOption/SelectableOption.types'; export function getAllSelectedOptions(options: ISelectableOption[], selectedIndices: number[]): ISelectableOption[] { const selectedOptions: ISelectableOption[] = []; diff --git a/packages/react/src/utilities/selection/Selection.ts b/packages/react/src/utilities/selection/Selection.ts index 5f318b3dbe4559..8092d47431c78d 100644 --- a/packages/react/src/utilities/selection/Selection.ts +++ b/packages/react/src/utilities/selection/Selection.ts @@ -1 +1,2 @@ -export { ISelectionOptions, Selection } from '@fluentui/utilities'; +export { Selection } from '@fluentui/utilities'; +export type { ISelectionOptions } from '@fluentui/utilities'; diff --git a/packages/react/src/utilities/selection/SelectionZone.test.tsx b/packages/react/src/utilities/selection/SelectionZone.test.tsx index 809a40eed286ab..0d307dd7aefcfa 100644 --- a/packages/react/src/utilities/selection/SelectionZone.test.tsx +++ b/packages/react/src/utilities/selection/SelectionZone.test.tsx @@ -4,10 +4,11 @@ import * as ReactTestUtils from 'react-dom/test-utils'; import { SelectionZone } from './SelectionZone'; import { Selection } from './Selection'; -import { SelectionMode, IObjectWithKey } from './interfaces'; +import { SelectionMode } from './interfaces'; import { isConformant } from '../../common/isConformant'; import { KeyCodes, EventGroup } from '../../Utilities'; +import type { IObjectWithKey } from './interfaces'; const SELECTABLE_ITEMS = [{ key: 'a' }, { key: 'b' }, { key: 'c' }, { key: 'd' }, { key: 'e' }]; diff --git a/packages/react/src/utilities/selection/SelectionZone.tsx b/packages/react/src/utilities/selection/SelectionZone.tsx index 05a7a4fd5bf27b..f0fa0a3a02d266 100644 --- a/packages/react/src/utilities/selection/SelectionZone.tsx +++ b/packages/react/src/utilities/selection/SelectionZone.tsx @@ -13,7 +13,8 @@ import { initializeComponentRef, FocusRects, } from '../../Utilities'; -import { ISelection, SelectionMode, IObjectWithKey } from './interfaces'; +import { SelectionMode } from './interfaces'; +import type { ISelection, IObjectWithKey } from './interfaces'; // Selection definitions: // diff --git a/packages/react/src/utilities/selection/interfaces.ts b/packages/react/src/utilities/selection/interfaces.ts index e3329db1634da0..1da72dca04e789 100644 --- a/packages/react/src/utilities/selection/interfaces.ts +++ b/packages/react/src/utilities/selection/interfaces.ts @@ -1 +1,2 @@ -export { IObjectWithKey, ISelection, SELECTION_CHANGE, SelectionDirection, SelectionMode } from '@fluentui/utilities'; +export { SELECTION_CHANGE, SelectionDirection, SelectionMode } from '@fluentui/utilities'; +export type { IObjectWithKey, ISelection } from '@fluentui/utilities'; diff --git a/packages/react/src/utilities/useOverflow.ts b/packages/react/src/utilities/useOverflow.ts index a516db000867fb..5a76f674f4a13a 100644 --- a/packages/react/src/utilities/useOverflow.ts +++ b/packages/react/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 diff --git a/packages/react/tsconfig.json b/packages/react/tsconfig.json index 9a02af13d69cf9..8c5f0155f47b5f 100644 --- a/packages/react/tsconfig.json +++ b/packages/react/tsconfig.json @@ -5,6 +5,7 @@ "target": "es5", "module": "commonjs", "jsx": "react", + "isolatedModules": true, "declaration": true, "sourceMap": true, "experimentalDecorators": true, diff --git a/packages/style-utilities/etc/style-utilities.api.md b/packages/style-utilities/etc/style-utilities.api.md index d7a37df4bbca82..d3daf2ebaae036 100644 --- a/packages/style-utilities/etc/style-utilities.api.md +++ b/packages/style-utilities/etc/style-utilities.api.md @@ -20,7 +20,7 @@ import { IAnimationStyles } from '@fluentui/theme/lib/types/IAnimationStyles'; import { IAnimationVariables } from '@fluentui/theme/lib/types/IAnimationStyles'; import { IconFontSizes } from '@fluentui/theme/lib/fonts/index'; import { ICSPSettings } from '@fluentui/merge-styles'; -import { ICustomizerContext } from '@fluentui/utilities'; +import type { ICustomizerContext } from '@fluentui/utilities'; import { IEffects } from '@fluentui/theme/lib/types/IEffects'; import { IFontFace } from '@fluentui/merge-styles'; import { IFontStyles } from '@fluentui/theme/lib/types/IFontStyles'; @@ -346,7 +346,6 @@ export namespace ZIndexes { KeytipLayer: number; } - // Warnings were encountered during analysis: // // lib/styles/PulsingBeaconAnimationStyles.d.ts:6:5 - (ae-forgotten-export) The symbol "_continuousPulseAnimationDouble" needs to be exported by the entry point index.d.ts diff --git a/packages/style-utilities/src/MergeStyles.ts b/packages/style-utilities/src/MergeStyles.ts index e58e74ac279e71..dd9313fd4617cc 100644 --- a/packages/style-utilities/src/MergeStyles.ts +++ b/packages/style-utilities/src/MergeStyles.ts @@ -1,12 +1,4 @@ export { - IFontFace, - IFontWeight, - IRawStyle, - IStyle, - IStyleSet, - IProcessedStyleSet, - IStyleSheetConfig, - ICSPSettings, InjectionMode, Stylesheet, concatStyleSets, @@ -16,3 +8,13 @@ export { mergeStyleSets, mergeStyles, } from '@fluentui/merge-styles'; +export type { + IFontFace, + IFontWeight, + IRawStyle, + IStyle, + IStyleSet, + IProcessedStyleSet, + IStyleSheetConfig, + ICSPSettings, +} from '@fluentui/merge-styles'; diff --git a/packages/style-utilities/src/classNames/AnimationClassNames.ts b/packages/style-utilities/src/classNames/AnimationClassNames.ts index cf41165864a993..b1d79caf7957aa 100644 --- a/packages/style-utilities/src/classNames/AnimationClassNames.ts +++ b/packages/style-utilities/src/classNames/AnimationClassNames.ts @@ -1,6 +1,6 @@ import { buildClassMap } from '../utilities/index'; import { AnimationStyles } from '../styles/index'; -import { IAnimationStyles } from '../interfaces/index'; +import type { IAnimationStyles } from '../interfaces/index'; /** * {@docCategory AnimationClassNames} diff --git a/packages/style-utilities/src/classNames/ColorClassNames.ts b/packages/style-utilities/src/classNames/ColorClassNames.ts index 4b479757f8b49e..6bfe184682a7ab 100644 --- a/packages/style-utilities/src/classNames/ColorClassNames.ts +++ b/packages/style-utilities/src/classNames/ColorClassNames.ts @@ -1,6 +1,7 @@ -import { IRawStyle, mergeStyles } from '@fluentui/merge-styles'; +import { mergeStyles } from '@fluentui/merge-styles'; import { DefaultPalette } from '../styles/DefaultPalette'; import { getTheme } from '../styles/index'; +import type { IRawStyle } from '@fluentui/merge-styles'; /** * {@docCategory IColorClassNames} diff --git a/packages/style-utilities/src/classNames/FontClassNames.ts b/packages/style-utilities/src/classNames/FontClassNames.ts index b127a0a6009053..34d031637b326b 100644 --- a/packages/style-utilities/src/classNames/FontClassNames.ts +++ b/packages/style-utilities/src/classNames/FontClassNames.ts @@ -1,6 +1,6 @@ import { buildClassMap } from '../utilities/buildClassMap'; -import { IFontStyles } from '../interfaces/index'; import { DefaultFontStyles } from '../styles/DefaultFontStyles'; +import type { IFontStyles } from '../interfaces/index'; /** * {@docCategory FontClassNames} diff --git a/packages/style-utilities/src/interfaces/IGetFocusStyles.ts b/packages/style-utilities/src/interfaces/IGetFocusStyles.ts index f454f3a9e2b152..89e3c99d121956 100644 --- a/packages/style-utilities/src/interfaces/IGetFocusStyles.ts +++ b/packages/style-utilities/src/interfaces/IGetFocusStyles.ts @@ -1,4 +1,4 @@ -import { IRawStyle } from '@fluentui/merge-styles'; +import type { IRawStyle } from '@fluentui/merge-styles'; export interface IGetFocusStylesOptions { /** diff --git a/packages/style-utilities/src/interfaces/index.ts b/packages/style-utilities/src/interfaces/index.ts index 76e27c5eafcbf6..6b04c96473c3e5 100644 --- a/packages/style-utilities/src/interfaces/index.ts +++ b/packages/style-utilities/src/interfaces/index.ts @@ -1,9 +1,9 @@ -export { IAnimationStyles, IAnimationVariables } from './IAnimationStyles'; -export { IEffects } from '@fluentui/theme/lib/types/IEffects'; -export { IGetFocusStylesOptions } from './IGetFocusStyles'; -export { IFontStyles } from '@fluentui/theme/lib/types/IFontStyles'; -export { IPalette } from '@fluentui/theme/lib/types/IPalette'; -export { ISemanticColors } from '@fluentui/theme/lib/types/ISemanticColors'; -export { ISemanticTextColors } from '@fluentui/theme/lib/types/ISemanticTextColors'; -export { ISpacing } from '@fluentui/theme/lib/types/ISpacing'; -export { ITheme, IPartialTheme, IScheme, ISchemeNames } from '@fluentui/theme/lib/types/ITheme'; +export type { IAnimationStyles, IAnimationVariables } from './IAnimationStyles'; +export type { IEffects } from '@fluentui/theme/lib/types/IEffects'; +export type { IGetFocusStylesOptions } from './IGetFocusStyles'; +export type { IFontStyles } from '@fluentui/theme/lib/types/IFontStyles'; +export type { IPalette } from '@fluentui/theme/lib/types/IPalette'; +export type { ISemanticColors } from '@fluentui/theme/lib/types/ISemanticColors'; +export type { ISemanticTextColors } from '@fluentui/theme/lib/types/ISemanticTextColors'; +export type { ISpacing } from '@fluentui/theme/lib/types/ISpacing'; +export type { ITheme, IPartialTheme, IScheme, ISchemeNames } from '@fluentui/theme/lib/types/ITheme'; diff --git a/packages/style-utilities/src/styles/CommonStyles.ts b/packages/style-utilities/src/styles/CommonStyles.ts index 29cedf6d2f0466..da4658cff6a7f8 100644 --- a/packages/style-utilities/src/styles/CommonStyles.ts +++ b/packages/style-utilities/src/styles/CommonStyles.ts @@ -1,4 +1,4 @@ -import { IRawStyle } from '../MergeStyles'; +import type { IRawStyle } from '../MergeStyles'; export const HighContrastSelector = '@media screen and (-ms-high-contrast: active), (forced-colors: active)'; export const HighContrastSelectorWhite = diff --git a/packages/style-utilities/src/styles/GeneralStyles.ts b/packages/style-utilities/src/styles/GeneralStyles.ts index d85cb8f2eee8f2..63b0bf1245e823 100644 --- a/packages/style-utilities/src/styles/GeneralStyles.ts +++ b/packages/style-utilities/src/styles/GeneralStyles.ts @@ -1,7 +1,6 @@ -// This file mimics styles and mixins from _General.Mixins.scss - -import { IRawStyle } from '@fluentui/merge-styles'; +import type { IRawStyle } from '@fluentui/merge-styles'; +// This file mimics styles and mixins from _General.Mixins.scss export const normalize: IRawStyle = { boxShadow: 'none', margin: 0, diff --git a/packages/style-utilities/src/styles/PulsingBeaconAnimationStyles.ts b/packages/style-utilities/src/styles/PulsingBeaconAnimationStyles.ts index f2443e402ad1ef..5f5f70986bfd9d 100644 --- a/packages/style-utilities/src/styles/PulsingBeaconAnimationStyles.ts +++ b/packages/style-utilities/src/styles/PulsingBeaconAnimationStyles.ts @@ -1,4 +1,5 @@ -import { IRawStyle, keyframes } from '@fluentui/merge-styles'; +import { keyframes } from '@fluentui/merge-styles'; +import type { IRawStyle } from '@fluentui/merge-styles'; const DEFAULT_DURATION = '14s'; const DEFAULT_DELAY = '2s'; diff --git a/packages/style-utilities/src/styles/getFadedOverflowStyle.ts b/packages/style-utilities/src/styles/getFadedOverflowStyle.ts index a961462aedf6cc..fb6d5971177749 100644 --- a/packages/style-utilities/src/styles/getFadedOverflowStyle.ts +++ b/packages/style-utilities/src/styles/getFadedOverflowStyle.ts @@ -1,5 +1,5 @@ -import { IRawStyle } from '@fluentui/merge-styles'; -import { ITheme, ISemanticColors, IPalette } from '../interfaces/index'; +import type { IRawStyle } from '@fluentui/merge-styles'; +import type { ITheme, ISemanticColors, IPalette } from '../interfaces/index'; interface IRGB { r: number; diff --git a/packages/style-utilities/src/styles/getFocusStyle.ts b/packages/style-utilities/src/styles/getFocusStyle.ts index 484176766907bf..b1070b1fc91276 100644 --- a/packages/style-utilities/src/styles/getFocusStyle.ts +++ b/packages/style-utilities/src/styles/getFocusStyle.ts @@ -1,8 +1,8 @@ -import { IRawStyle } from '@fluentui/merge-styles'; -import { IGetFocusStylesOptions, ITheme } from '../interfaces/index'; import { HighContrastSelector } from './CommonStyles'; import { IsFocusVisibleClassName } from '@fluentui/utilities'; import { ZIndexes } from './zIndexes'; +import type { IRawStyle } from '@fluentui/merge-styles'; +import type { IGetFocusStylesOptions, ITheme } from '../interfaces/index'; /** * Generates a focus style which can be used to define an :after focus border. diff --git a/packages/style-utilities/src/styles/getGlobalClassNames.test.ts b/packages/style-utilities/src/styles/getGlobalClassNames.test.ts index 73909195c5aeda..c13a7c76536112 100644 --- a/packages/style-utilities/src/styles/getGlobalClassNames.test.ts +++ b/packages/style-utilities/src/styles/getGlobalClassNames.test.ts @@ -1,7 +1,7 @@ import { getGlobalClassNames } from './getGlobalClassNames'; import { createTheme } from './theme'; import { Stylesheet } from '@fluentui/merge-styles'; -import { ITheme } from '../interfaces/index'; +import type { ITheme } from '../interfaces/index'; const styleSheet = Stylesheet.getInstance(); diff --git a/packages/style-utilities/src/styles/getGlobalClassNames.ts b/packages/style-utilities/src/styles/getGlobalClassNames.ts index 95d37ce41ca8ad..5f8bbe6b528f44 100644 --- a/packages/style-utilities/src/styles/getGlobalClassNames.ts +++ b/packages/style-utilities/src/styles/getGlobalClassNames.ts @@ -1,6 +1,6 @@ -import { ITheme } from '../interfaces/index'; import { Stylesheet } from '@fluentui/merge-styles'; import { memoizeFunction } from '@fluentui/utilities'; +import type { ITheme } from '../interfaces/index'; export type GlobalClassNames = Record; diff --git a/packages/style-utilities/src/styles/getPlaceholderStyles.ts b/packages/style-utilities/src/styles/getPlaceholderStyles.ts index 68130772301f11..e06db091975dc7 100644 --- a/packages/style-utilities/src/styles/getPlaceholderStyles.ts +++ b/packages/style-utilities/src/styles/getPlaceholderStyles.ts @@ -1,4 +1,4 @@ -import { IStyle } from '@fluentui/merge-styles'; +import type { IStyle } from '@fluentui/merge-styles'; /** * Generates placeholder style for each of the browsers supported by `@fluentui/react`. diff --git a/packages/style-utilities/src/styles/hiddenContentStyle.ts b/packages/style-utilities/src/styles/hiddenContentStyle.ts index 5bf73af33b4bba..91dd35b810dbe0 100644 --- a/packages/style-utilities/src/styles/hiddenContentStyle.ts +++ b/packages/style-utilities/src/styles/hiddenContentStyle.ts @@ -1,4 +1,4 @@ -import { IRawStyle } from '@fluentui/merge-styles'; +import type { IRawStyle } from '@fluentui/merge-styles'; export const hiddenContentStyle: IRawStyle = { position: 'absolute', diff --git a/packages/style-utilities/src/styles/index.ts b/packages/style-utilities/src/styles/index.ts index a76338d645db83..16c28281e0c4fa 100644 --- a/packages/style-utilities/src/styles/index.ts +++ b/packages/style-utilities/src/styles/index.ts @@ -6,7 +6,7 @@ export { FontSizes, FontWeights, IconFontSizes, createFontStyles } from './fonts export * from './getFocusStyle'; export { hiddenContentStyle } from './hiddenContentStyle'; export { PulsingBeaconAnimationStyles } from './PulsingBeaconAnimationStyles'; -export { getGlobalClassNames, GlobalClassNames } from './getGlobalClassNames'; +export { getGlobalClassNames } from './getGlobalClassNames'; export * from './scheme'; export { ThemeSettingName, @@ -21,3 +21,4 @@ export * from './GeneralStyles'; export * from './getFadedOverflowStyle'; export * from './getPlaceholderStyles'; export * from './zIndexes'; +export type { GlobalClassNames } from './getGlobalClassNames'; diff --git a/packages/style-utilities/src/styles/scheme.test.ts b/packages/style-utilities/src/styles/scheme.test.ts index af3c2bddfa4433..ba4b72c4c82623 100644 --- a/packages/style-utilities/src/styles/scheme.test.ts +++ b/packages/style-utilities/src/styles/scheme.test.ts @@ -1,8 +1,8 @@ import { getThemedContext } from './scheme'; import { createTheme } from './theme'; -import { ISchemeNames, ITheme } from '../interfaces/index'; import { loadTheme } from './theme'; -import { ICustomizerContext } from '@fluentui/utilities'; +import type { ISchemeNames, ITheme } from '../interfaces/index'; +import type { ICustomizerContext } from '@fluentui/utilities'; describe('getSchemedCustomizations', () => { const testSchemeName = 'soft'; diff --git a/packages/style-utilities/src/styles/scheme.ts b/packages/style-utilities/src/styles/scheme.ts index b3510c4760c77b..bb9b8f61898631 100644 --- a/packages/style-utilities/src/styles/scheme.ts +++ b/packages/style-utilities/src/styles/scheme.ts @@ -1,5 +1,6 @@ -import { Customizations, mergeSettings, ICustomizerContext } from '@fluentui/utilities'; -import { ISchemeNames, ITheme } from '../interfaces/index'; +import { Customizations, mergeSettings } from '@fluentui/utilities'; +import type { ICustomizerContext } from '@fluentui/utilities'; +import type { ISchemeNames, ITheme } from '../interfaces/index'; /** * @internal diff --git a/packages/style-utilities/src/styles/theme.test.ts b/packages/style-utilities/src/styles/theme.test.ts index eaa242a7ed35ed..f3dab32c87ba48 100644 --- a/packages/style-utilities/src/styles/theme.test.ts +++ b/packages/style-utilities/src/styles/theme.test.ts @@ -1,6 +1,6 @@ import { registerOnThemeChangeCallback, removeOnThemeChangeCallback, loadTheme, getTheme } from './theme'; -import { IRawStyle } from '@fluentui/merge-styles'; import { DefaultFontStyles } from './DefaultFontStyles'; +import type { IRawStyle } from '@fluentui/merge-styles'; describe('registerOnThemeChangeCallback', () => { let callback = jest.fn(); diff --git a/packages/style-utilities/src/styles/theme.ts b/packages/style-utilities/src/styles/theme.ts index a1b882c3833d58..69bb1590acadab 100644 --- a/packages/style-utilities/src/styles/theme.ts +++ b/packages/style-utilities/src/styles/theme.ts @@ -1,8 +1,8 @@ import { Customizations, getWindow } from '@fluentui/utilities'; -import { ITheme, IPartialTheme, IFontStyles } from '../interfaces/index'; import { loadTheme as legacyLoadTheme } from '@microsoft/load-themed-styles'; -import { IRawStyle } from '@fluentui/merge-styles'; import { createTheme } from '@fluentui/theme/lib/createTheme'; +import type { ITheme, IPartialTheme, IFontStyles } from '../interfaces/index'; +import type { IRawStyle } from '@fluentui/merge-styles'; export { createTheme } from '@fluentui/theme/lib/createTheme'; diff --git a/packages/style-utilities/src/utilities/getIconClassName.ts b/packages/style-utilities/src/utilities/getIconClassName.ts index 3aabc6fb51b511..2e05f67cb2d0e2 100644 --- a/packages/style-utilities/src/utilities/getIconClassName.ts +++ b/packages/style-utilities/src/utilities/getIconClassName.ts @@ -1,5 +1,6 @@ -import { mergeStyles, IStyle } from '@fluentui/merge-styles'; +import { mergeStyles } from '@fluentui/merge-styles'; import { getIcon } from './icons'; +import type { IStyle } from '@fluentui/merge-styles'; const defaultIconStyles: IStyle = { display: 'inline-block', diff --git a/packages/style-utilities/src/utilities/icons.test.ts b/packages/style-utilities/src/utilities/icons.test.ts index 909cc565bd2080..f758e45c57697a 100644 --- a/packages/style-utilities/src/utilities/icons.test.ts +++ b/packages/style-utilities/src/utilities/icons.test.ts @@ -1,4 +1,5 @@ -import { registerIcons, unregisterIcons, registerIconAlias, getIcon, IIconSubset } from './icons'; +import { registerIcons, unregisterIcons, registerIconAlias, getIcon } from './icons'; +import type { IIconSubset } from './icons'; const fakeIconList = ['FakeIcon1', 'FakeIcon2', 'FakeIcon3', 'FakeIcon4']; const fakeIconSubSet: IIconSubset = { diff --git a/packages/style-utilities/src/utilities/icons.ts b/packages/style-utilities/src/utilities/icons.ts index 26652a29287344..a151bc2c691d2d 100644 --- a/packages/style-utilities/src/utilities/icons.ts +++ b/packages/style-utilities/src/utilities/icons.ts @@ -1,5 +1,6 @@ import { GlobalSettings, warn } from '@fluentui/utilities'; -import { IRawStyle, IFontFace, fontFace, mergeStyles, Stylesheet } from '@fluentui/merge-styles'; +import { fontFace, mergeStyles, Stylesheet } from '@fluentui/merge-styles'; +import type { IRawStyle, IFontFace } from '@fluentui/merge-styles'; export interface IIconSubset { fontFace?: IFontFace; diff --git a/packages/style-utilities/src/utilities/index.ts b/packages/style-utilities/src/utilities/index.ts index 0cc2103a4fe985..c8d5ac595921f0 100644 --- a/packages/style-utilities/src/utilities/index.ts +++ b/packages/style-utilities/src/utilities/index.ts @@ -1,15 +1,6 @@ export { buildClassMap } from './buildClassMap'; -export { - IIconRecord, - IIconSubset, - IIconSubsetRecord, - IIconOptions, - getIcon, - registerIcons, - registerIconAlias, - unregisterIcons, - setIconOptions, -} from './icons'; +export { getIcon, registerIcons, registerIconAlias, unregisterIcons, setIconOptions } from './icons'; export { getIconClassName } from './getIconClassName'; +export type { IIconRecord, IIconSubset, IIconSubsetRecord, IIconOptions } from './icons'; diff --git a/packages/style-utilities/tsconfig.json b/packages/style-utilities/tsconfig.json index 8aba573ac54386..f866099a00690c 100644 --- a/packages/style-utilities/tsconfig.json +++ b/packages/style-utilities/tsconfig.json @@ -7,6 +7,7 @@ "lib": ["es5", "dom"], "jsx": "react", "declaration": true, + "isolatedModules": true, "sourceMap": true, "experimentalDecorators": true, "importHelpers": true, diff --git a/packages/utilities/etc/utilities.api.md b/packages/utilities/etc/utilities.api.md index 4fc1078d732ffe..ad51ee4ca84916 100644 --- a/packages/utilities/etc/utilities.api.md +++ b/packages/utilities/etc/utilities.api.md @@ -11,10 +11,10 @@ import { findElementRecursive } from '@fluentui/dom-utilities'; import { getChildren } from '@fluentui/dom-utilities'; import { getParent } from '@fluentui/dom-utilities'; import { getVirtualParent } from '@fluentui/dom-utilities'; -import { IProcessedStyleSet } from '@fluentui/merge-styles'; +import type { IProcessedStyleSet } from '@fluentui/merge-styles'; import { IStyleFunction } from '@fluentui/merge-styles'; import { IStyleFunctionOrObject } from '@fluentui/merge-styles'; -import { IStyleSet } from '@fluentui/merge-styles'; +import type { IStyleSet } from '@fluentui/merge-styles'; import { isVirtualElement } from '@fluentui/dom-utilities'; import { IVirtualElement } from '@fluentui/dom-utilities'; import { Omit as Omit_2 } from '@fluentui/merge-styles'; @@ -80,7 +80,7 @@ export class Async { leading?: boolean; trailing?: boolean; }): T; - } +} // @public export const audioProperties: Record; @@ -90,7 +90,7 @@ export class AutoScroll { constructor(element: HTMLElement); // (undocumented) dispose(): void; - } +} // @public @deprecated export class BaseComponent extends React_2.Component { @@ -205,7 +205,7 @@ export class DelayedRender extends React_2.Component | null; - } +} // @public export function disableBodyScroll(): void; @@ -242,7 +242,7 @@ export class EventGroup { raise(eventName: string, eventArgs?: any, bubbleEvent?: boolean): boolean | undefined; // (undocumented) static stopPropagation(event: any): void; - } +} // @public export function extendComponent(parent: T, methods: { @@ -260,7 +260,7 @@ export class FabricPerformance { // // (undocumented) static summary: IPerfSummary; - } +} // @public export function filteredAssign(isAllowed: (propName: string) => boolean, target: any, ...args: any[]): any; @@ -1100,8 +1100,7 @@ class Selection_2 implements ISelection { toggleKeySelected(key: string): void; // (undocumented) toggleRangeSelected(fromIndex: number, count: number): void; - } - +} export { Selection_2 as Selection } // @public (undocumented) @@ -1124,7 +1123,6 @@ enum SelectionMode_2 { // (undocumented) single = 1 } - export { SelectionMode_2 as SelectionMode } // @public @@ -1232,7 +1230,6 @@ export function warnDeprecations

(componentName: string, props: P, deprecation // @public export function warnMutuallyExclusive

(componentName: string, props: P, exclusiveMap: ISettingsMap

): void; - // (No @packageDocumentation comment for this package) ``` diff --git a/packages/utilities/src/Async.test.ts b/packages/utilities/src/Async.test.ts index ba85403fe4ef76..ff7951799f1396 100644 --- a/packages/utilities/src/Async.test.ts +++ b/packages/utilities/src/Async.test.ts @@ -1,4 +1,5 @@ -import { Async, ICancelable } from './Async'; +import { Async } from './Async'; +import type { ICancelable } from './Async'; describe('Async', () => { describe('debounce', () => { diff --git a/packages/utilities/src/AutoScroll.ts b/packages/utilities/src/AutoScroll.ts index 802692a8505a90..478a892efa7a15 100644 --- a/packages/utilities/src/AutoScroll.ts +++ b/packages/utilities/src/AutoScroll.ts @@ -1,7 +1,7 @@ import { EventGroup } from './EventGroup'; import { findScrollableParent } from './scroll'; import { getRect } from './dom/getRect'; -import { IRectangle } from './IRectangle'; +import type { IRectangle } from './IRectangle'; declare function setTimeout(cb: Function, delay: number): number; diff --git a/packages/utilities/src/BaseComponent.ts b/packages/utilities/src/BaseComponent.ts index 23f1aaa88117e5..75f553d8e26647 100644 --- a/packages/utilities/src/BaseComponent.ts +++ b/packages/utilities/src/BaseComponent.ts @@ -1,13 +1,13 @@ import * as React from 'react'; import { Async } from './Async'; import { EventGroup } from './EventGroup'; -import { IDisposable } from './IDisposable'; -import { ISettingsMap } from './warn/warn'; import { warnConditionallyRequiredProps } from './warn/warnConditionallyRequiredProps'; import { warnMutuallyExclusive } from './warn/warnMutuallyExclusive'; import { warnDeprecations } from './warn/warnDeprecations'; -import { IRefObject } from './createRef'; -import { IBaseProps } from './BaseComponent.types'; +import type { IDisposable } from './IDisposable'; +import type { ISettingsMap } from './warn/warn'; +import type { IRefObject } from './createRef'; +import type { IBaseProps } from './BaseComponent.types'; /** * BaseComponent class, which provides basic helpers for all components. diff --git a/packages/utilities/src/BaseComponent.types.ts b/packages/utilities/src/BaseComponent.types.ts index 636917439f06c0..80a855b2520375 100644 --- a/packages/utilities/src/BaseComponent.types.ts +++ b/packages/utilities/src/BaseComponent.types.ts @@ -1,4 +1,4 @@ -import { IRefObject } from './createRef'; +import type { IRefObject } from './createRef'; /** * BaseProps interface. diff --git a/packages/utilities/src/IStyleFunction.ts b/packages/utilities/src/IStyleFunction.ts index 1f291af88c1045..5d208887615c13 100644 --- a/packages/utilities/src/IStyleFunction.ts +++ b/packages/utilities/src/IStyleFunction.ts @@ -1 +1 @@ -export { IStyleFunction } from '@fluentui/merge-styles'; +export type { IStyleFunction } from '@fluentui/merge-styles'; diff --git a/packages/utilities/src/classNamesFunction.test.ts b/packages/utilities/src/classNamesFunction.test.ts index 5a9457df29ccec..28ff49bb52044a 100644 --- a/packages/utilities/src/classNamesFunction.test.ts +++ b/packages/utilities/src/classNamesFunction.test.ts @@ -1,6 +1,7 @@ -import { IStyle, Stylesheet } from '@fluentui/merge-styles'; +import { Stylesheet } from '@fluentui/merge-styles'; import { classNamesFunction } from './classNamesFunction'; import { getRTL, setRTL } from './rtl'; +import type { IStyle } from '@fluentui/merge-styles'; describe('classNamesFunction', () => { beforeEach(() => { diff --git a/packages/utilities/src/classNamesFunction.ts b/packages/utilities/src/classNamesFunction.ts index 8f2e7fa784fb81..b02104aa13c8bb 100644 --- a/packages/utilities/src/classNamesFunction.ts +++ b/packages/utilities/src/classNamesFunction.ts @@ -1,13 +1,8 @@ -import { - mergeCssSets, - IStyleSet, - IProcessedStyleSet, - Stylesheet, - IStyleFunctionOrObject, -} from '@fluentui/merge-styles'; +import { mergeCssSets, Stylesheet } from '@fluentui/merge-styles'; import { getRTL } from './rtl'; import { getWindow } from './dom'; -import { StyleFunction } from './styled'; +import type { IStyleSet, IProcessedStyleSet, IStyleFunctionOrObject } from '@fluentui/merge-styles'; +import type { StyleFunction } from './styled'; const MAX_CACHE_COUNT = 50; const DEFAULT_SPECIFICITY_MULTIPLIER = 5; diff --git a/packages/utilities/src/componentAs/composeComponentAs.test.tsx b/packages/utilities/src/componentAs/composeComponentAs.test.tsx index 88522639729759..1dec4d8ce91de9 100644 --- a/packages/utilities/src/componentAs/composeComponentAs.test.tsx +++ b/packages/utilities/src/componentAs/composeComponentAs.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import * as renderer from 'react-test-renderer'; -import { IComponentAsProps } from '../IComponentAs'; import { composeComponentAs } from './composeComponentAs'; +import type { IComponentAsProps } from '../IComponentAs'; interface IExampleProps { value: string; diff --git a/packages/utilities/src/componentAs/composeComponentAs.tsx b/packages/utilities/src/componentAs/composeComponentAs.tsx index 54fb2abfe21627..4892253e8d4434 100644 --- a/packages/utilities/src/componentAs/composeComponentAs.tsx +++ b/packages/utilities/src/componentAs/composeComponentAs.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { IComponentAs, IComponentAsProps } from '../IComponentAs'; import { createMemoizer } from '../memoize'; +import type { IComponentAs, IComponentAsProps } from '../IComponentAs'; interface IComposeComponentAs { (outer: IComponentAs): (inner: IComponentAs) => IComponentAs; diff --git a/packages/utilities/src/customizations/Customizer.tsx b/packages/utilities/src/customizations/Customizer.tsx index 08522577a06d5b..6d0287952f7e09 100644 --- a/packages/utilities/src/customizations/Customizer.tsx +++ b/packages/utilities/src/customizations/Customizer.tsx @@ -1,8 +1,9 @@ import * as React from 'react'; import { Customizations } from './Customizations'; -import { CustomizerContext, ICustomizerContext } from './CustomizerContext'; +import { CustomizerContext } from './CustomizerContext'; import { mergeCustomizations } from './mergeCustomizations'; -import { ICustomizerProps } from './Customizer.types'; +import type { ICustomizerContext } from './CustomizerContext'; +import type { ICustomizerProps } from './Customizer.types'; /** * The Customizer component allows for default props to be mixed into components which diff --git a/packages/utilities/src/customizations/Customizer.types.tsx b/packages/utilities/src/customizations/Customizer.types.tsx index b81c1dba0135a3..7b537e22716453 100644 --- a/packages/utilities/src/customizations/Customizer.types.tsx +++ b/packages/utilities/src/customizations/Customizer.types.tsx @@ -1,6 +1,6 @@ -import { IBaseProps } from '../BaseComponent.types'; -import { ISettings, ISettingsFunction } from './Customizations'; -import { ICustomizerContext } from './CustomizerContext'; +import type { IBaseProps } from '../BaseComponent.types'; +import type { ISettings, ISettingsFunction } from './Customizations'; +import type { ICustomizerContext } from './CustomizerContext'; export type ICustomizerProps = IBaseProps & Partial<{ diff --git a/packages/utilities/src/customizations/CustomizerContext.ts b/packages/utilities/src/customizations/CustomizerContext.ts index bad32c024fb9af..3a4b89f3c22594 100644 --- a/packages/utilities/src/customizations/CustomizerContext.ts +++ b/packages/utilities/src/customizations/CustomizerContext.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { ICustomizations } from './Customizations'; +import type { ICustomizations } from './Customizations'; export interface ICustomizerContext { customizations: ICustomizations; diff --git a/packages/utilities/src/customizations/customizable.test.tsx b/packages/utilities/src/customizations/customizable.test.tsx index ac9c4ae8a6d1a1..f65e7c3729c465 100644 --- a/packages/utilities/src/customizations/customizable.test.tsx +++ b/packages/utilities/src/customizations/customizable.test.tsx @@ -5,7 +5,7 @@ import { mount } from 'enzyme'; import { customizable } from './customizable'; import { Customizations } from './Customizations'; import { Customizer } from './Customizer'; -import { IStyle } from '@fluentui/merge-styles'; +import type { IStyle } from '@fluentui/merge-styles'; @customizable('Foo', ['field']) class Foo extends React.Component<{ field?: string }, {}> { diff --git a/packages/utilities/src/customizations/customizable.tsx b/packages/utilities/src/customizations/customizable.tsx index c2c7b770e9a482..c4e178ca53d166 100644 --- a/packages/utilities/src/customizations/customizable.tsx +++ b/packages/utilities/src/customizations/customizable.tsx @@ -1,8 +1,9 @@ import * as React from 'react'; import { Customizations } from './Customizations'; import { hoistStatics } from '../hoistStatics'; -import { CustomizerContext, ICustomizerContext } from './CustomizerContext'; +import { CustomizerContext } from './CustomizerContext'; import { concatStyleSets } from '@fluentui/merge-styles'; +import type { ICustomizerContext } from './CustomizerContext'; export function customizable( scope: string, diff --git a/packages/utilities/src/customizations/mergeCustomizations.ts b/packages/utilities/src/customizations/mergeCustomizations.ts index f77b352727d9d7..9302abaf95e6d4 100644 --- a/packages/utilities/src/customizations/mergeCustomizations.ts +++ b/packages/utilities/src/customizations/mergeCustomizations.ts @@ -1,6 +1,6 @@ import { mergeSettings, mergeScopedSettings } from './mergeSettings'; -import { ICustomizerProps } from './Customizer.types'; -import { ICustomizerContext } from './CustomizerContext'; +import type { ICustomizerProps } from './Customizer.types'; +import type { ICustomizerContext } from './CustomizerContext'; /** * Merge props and customizations giving priority to props over context. diff --git a/packages/utilities/src/customizations/mergeSettings.ts b/packages/utilities/src/customizations/mergeSettings.ts index ac00d5d5d9ab90..c436e937c2fa21 100644 --- a/packages/utilities/src/customizations/mergeSettings.ts +++ b/packages/utilities/src/customizations/mergeSettings.ts @@ -1,4 +1,4 @@ -import { ISettings, ISettingsFunction } from './Customizations'; +import type { ISettings, ISettingsFunction } from './Customizations'; /** * Merge new and old settings, giving priority to new settings. diff --git a/packages/utilities/src/customizations/useCustomizationSettings.test.tsx b/packages/utilities/src/customizations/useCustomizationSettings.test.tsx index db57858fdda5dc..eed2dd38c64cde 100644 --- a/packages/utilities/src/customizations/useCustomizationSettings.test.tsx +++ b/packages/utilities/src/customizations/useCustomizationSettings.test.tsx @@ -1,9 +1,10 @@ import * as React from 'react'; import * as ReactTestUtils from 'react-dom/test-utils'; import { mount, ReactWrapper } from 'enzyme'; -import { Customizations, ISettings } from './Customizations'; +import { Customizations } from './Customizations'; import { CustomizerContext } from './CustomizerContext'; import { useCustomizationSettings } from './useCustomizationSettings'; +import type { ISettings } from './Customizations'; describe('useCustomizatioSettings', () => { let wrapper: ReactWrapper | undefined; diff --git a/packages/utilities/src/customizations/useCustomizationSettings.ts b/packages/utilities/src/customizations/useCustomizationSettings.ts index 92ad72b4288de8..2c29e8dee8de3d 100644 --- a/packages/utilities/src/customizations/useCustomizationSettings.ts +++ b/packages/utilities/src/customizations/useCustomizationSettings.ts @@ -1,6 +1,7 @@ import * as React from 'react'; -import { ISettings, Customizations } from './Customizations'; +import { Customizations } from './Customizations'; import { CustomizerContext } from './CustomizerContext'; +import type { ISettings } from './Customizations'; /** * Hook to get Customizations settings from Customizations singleton or CustomizerContext. diff --git a/packages/utilities/src/dom/IVirtualElement.ts b/packages/utilities/src/dom/IVirtualElement.ts index d2feb56c883873..7793242f0a82cb 100644 --- a/packages/utilities/src/dom/IVirtualElement.ts +++ b/packages/utilities/src/dom/IVirtualElement.ts @@ -1 +1 @@ -export { IVirtualElement } from '@fluentui/dom-utilities'; +export type { IVirtualElement } from '@fluentui/dom-utilities'; diff --git a/packages/utilities/src/dom/getRect.ts b/packages/utilities/src/dom/getRect.ts index a6cdb606108b1f..63d24fd214859a 100644 --- a/packages/utilities/src/dom/getRect.ts +++ b/packages/utilities/src/dom/getRect.ts @@ -1,4 +1,5 @@ -import { IRectangle } from '../IRectangle'; +import type { IRectangle } from '../IRectangle'; + /** * Helper to get bounding client rect. Passing in window will get the window size. * diff --git a/packages/utilities/src/index.ts b/packages/utilities/src/index.ts index 5f6e4086e014b6..41b5c29be60154 100644 --- a/packages/utilities/src/index.ts +++ b/packages/utilities/src/index.ts @@ -69,10 +69,11 @@ export * from './styled'; export * from './warn'; export * from './ie11Detector'; export * from './getPropsWithDefaults'; -// eslint-disable-next-line deprecation/deprecation -export { IStyleFunctionOrObject, Omit } from '@fluentui/merge-styles'; export { setFocusVisibility, IsFocusVisibleClassName } from './setFocusVisibility'; export { setSSR } from './dom/setSSR'; export { createMergedRef } from './createMergedRef'; import './version'; + +// eslint-disable-next-line deprecation/deprecation +export type { IStyleFunctionOrObject, Omit } from '@fluentui/merge-styles'; diff --git a/packages/utilities/src/initializeComponentRef.test.tsx b/packages/utilities/src/initializeComponentRef.test.tsx index 6236e9a1d123bb..429c7b32ffd9ce 100644 --- a/packages/utilities/src/initializeComponentRef.test.tsx +++ b/packages/utilities/src/initializeComponentRef.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { initializeComponentRef } from './initializeComponentRef'; import { mount } from 'enzyme'; -import { IBaseProps } from './BaseComponent.types'; +import type { IBaseProps } from './BaseComponent.types'; describe('initializeComponentRef', () => { class Foo extends React.Component { diff --git a/packages/utilities/src/initializeComponentRef.ts b/packages/utilities/src/initializeComponentRef.ts index a010fc543cd677..24ed3c250f718a 100644 --- a/packages/utilities/src/initializeComponentRef.ts +++ b/packages/utilities/src/initializeComponentRef.ts @@ -1,6 +1,6 @@ import * as React from 'react'; -import { IBaseProps } from './BaseComponent.types'; import { extendComponent } from './extendComponent'; +import type { IBaseProps } from './BaseComponent.types'; /** * Helper to manage componentRef resolution. Internally appends logic to diff --git a/packages/utilities/src/math.ts b/packages/utilities/src/math.ts index 72f74ab46108c6..ef34f23734b395 100644 --- a/packages/utilities/src/math.ts +++ b/packages/utilities/src/math.ts @@ -1,5 +1,5 @@ -import { Point } from './Point'; -import { ISize } from './ISize'; +import type { Point } from './Point'; +import type { ISize } from './ISize'; /** * Determines the distance between two points. diff --git a/packages/utilities/src/renderFunction/composeRenderFunction.test.tsx b/packages/utilities/src/renderFunction/composeRenderFunction.test.tsx index e3dd6ca212c707..a2750ef2e0f45a 100644 --- a/packages/utilities/src/renderFunction/composeRenderFunction.test.tsx +++ b/packages/utilities/src/renderFunction/composeRenderFunction.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import * as renderer from 'react-test-renderer'; -import { IRenderFunction } from '../IRenderFunction'; import { composeRenderFunction } from './composeRenderFunction'; +import type { IRenderFunction } from '../IRenderFunction'; interface IExampleProps { value: string; diff --git a/packages/utilities/src/renderFunction/composeRenderFunction.tsx b/packages/utilities/src/renderFunction/composeRenderFunction.tsx index 7c06b3c2f7730a..96485703ad4d24 100644 --- a/packages/utilities/src/renderFunction/composeRenderFunction.tsx +++ b/packages/utilities/src/renderFunction/composeRenderFunction.tsx @@ -1,5 +1,5 @@ -import { IRenderFunction } from '../IRenderFunction'; import { createMemoizer } from '../memoize'; +import type { IRenderFunction } from '../IRenderFunction'; interface IRenderFunctionComposer { (outer: IRenderFunction): (inner: IRenderFunction) => IRenderFunction; diff --git a/packages/utilities/src/selection/Selection.test.ts b/packages/utilities/src/selection/Selection.test.ts index 4bf52ae9e23cfd..0092eaa5925f03 100644 --- a/packages/utilities/src/selection/Selection.test.ts +++ b/packages/utilities/src/selection/Selection.test.ts @@ -1,5 +1,6 @@ import { Selection } from './Selection'; -import { IObjectWithKey, SelectionMode } from './Selection.types'; +import { SelectionMode } from './Selection.types'; +import type { IObjectWithKey } from './Selection.types'; const setA = [{ key: 'a' }, { key: 'b' }, { key: 'c' }]; const setB = [{ key: 'a' }, { key: 'd' }, { key: 'b' }]; diff --git a/packages/utilities/src/selection/Selection.ts b/packages/utilities/src/selection/Selection.ts index 30ef1314c4a626..1b2c3492ee3972 100644 --- a/packages/utilities/src/selection/Selection.ts +++ b/packages/utilities/src/selection/Selection.ts @@ -1,5 +1,6 @@ -import { IObjectWithKey, ISelection, SELECTION_CHANGE, SelectionMode } from './Selection.types'; +import { SELECTION_CHANGE, SelectionMode } from './Selection.types'; import { EventGroup } from '../EventGroup'; +import type { IObjectWithKey, ISelection } from './Selection.types'; /** * {@docCategory Selection} diff --git a/packages/utilities/src/styled.test.tsx b/packages/utilities/src/styled.test.tsx index 570f501fabfab3..08627a5effb58c 100644 --- a/packages/utilities/src/styled.test.tsx +++ b/packages/utilities/src/styled.test.tsx @@ -3,18 +3,12 @@ import * as React from 'react'; import { styled } from './styled'; import * as renderer from 'react-test-renderer'; import { Customizer } from './customizations/Customizer'; -import { - IStyle, - Stylesheet, - InjectionMode, - IStyleFunction, - IStyleFunctionOrObject, - mergeStyles, -} from '@fluentui/merge-styles'; +import { Stylesheet, InjectionMode, mergeStyles } from '@fluentui/merge-styles'; import { classNamesFunction } from './classNamesFunction'; import { Customizations } from './customizations/Customizations'; import { safeCreate } from '@fluentui/test-utilities'; import { mount } from 'enzyme'; +import type { IStyle, IStyleFunction, IStyleFunctionOrObject } from '@fluentui/merge-styles'; interface ITestStyles { root: IStyle; diff --git a/packages/utilities/src/styled.tsx b/packages/utilities/src/styled.tsx index 4da43baf4a5abe..4af12aaf917d96 100644 --- a/packages/utilities/src/styled.tsx +++ b/packages/utilities/src/styled.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; -import { IStyleSet, IStyleFunctionOrObject, concatStyleSetsWithProps } from '@fluentui/merge-styles'; +import { concatStyleSetsWithProps } from '@fluentui/merge-styles'; import { useCustomizationSettings } from './customizations/useCustomizationSettings'; +import type { IStyleSet, IStyleFunctionOrObject } from '@fluentui/merge-styles'; export interface IPropsWithStyles> { styles?: IStyleFunctionOrObject; diff --git a/packages/utilities/src/warn/warnControlledUsage.test.ts b/packages/utilities/src/warn/warnControlledUsage.test.ts index 9c0cc116abfb59..7d27dba45e4f80 100644 --- a/packages/utilities/src/warn/warnControlledUsage.test.ts +++ b/packages/utilities/src/warn/warnControlledUsage.test.ts @@ -1,5 +1,6 @@ import { setWarningCallback } from './warn'; -import { warnControlledUsage, resetControlledWarnings, IWarnControlledUsageParams } from './warnControlledUsage'; +import { warnControlledUsage, resetControlledWarnings } from './warnControlledUsage'; +import type { IWarnControlledUsageParams } from './warnControlledUsage'; const warningCallback = jest.fn(); diff --git a/packages/utilities/src/warn/warnDeprecations.ts b/packages/utilities/src/warn/warnDeprecations.ts index e1f53a66f3147c..1e96812eb0375b 100644 --- a/packages/utilities/src/warn/warnDeprecations.ts +++ b/packages/utilities/src/warn/warnDeprecations.ts @@ -1,4 +1,6 @@ -import { ISettingsMap, warn } from './warn'; +import { warn } from './warn'; +import type { ISettingsMap } from './warn'; + /** * Warns when a deprecated props are being used. * diff --git a/packages/utilities/src/warn/warnMutuallyExclusive.ts b/packages/utilities/src/warn/warnMutuallyExclusive.ts index b07dc37b2ea203..e361c9e5deaa7b 100644 --- a/packages/utilities/src/warn/warnMutuallyExclusive.ts +++ b/packages/utilities/src/warn/warnMutuallyExclusive.ts @@ -1,4 +1,6 @@ -import { ISettingsMap, warn } from './warn'; +import { warn } from './warn'; +import type { ISettingsMap } from './warn'; + /** * Warns when two props which are mutually exclusive are both being used. * diff --git a/packages/utilities/tsconfig.json b/packages/utilities/tsconfig.json index 46fd21d7c61a07..ddc7a47f96afd6 100644 --- a/packages/utilities/tsconfig.json +++ b/packages/utilities/tsconfig.json @@ -8,6 +8,7 @@ "declaration": true, "sourceMap": true, "strict": true, + "isolatedModules": true, "strictFunctionTypes": false, "experimentalDecorators": true, "importHelpers": true,