Fix several cyclical type imports (redux)

UNRELEASED.md

@@ -19,6 +19,6 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 ### Development workflow
 
 - Added a slight delay to the Percy screenshot script to give time for components to render fully ([#704](https://github.com/Shopify/polaris-react/pull/704))
-- Refactors to remove cyclical type imports ([#759](https://github.com/Shopify/polaris-react/pull/759))
+- Refactors to remove cyclical type imports ([#759](https://github.com/Shopify/polaris-react/pull/759) and [#754](https://github.com/Shopify/polaris-react/pull/754))
 
 ### Dependency upgrades

src/components/DataTable/DataTable.tsx

@@ -9,24 +9,14 @@ import EventListener from '../EventListener';
 import {Cell, CellProps, Navigation} from './components';
 import {measureColumn, getPrevAndCurrentColumns} from './utilities';
 
+import {DataTableState, SortDirection} from './types';
 import * as styles from './DataTable.scss';
 
 export type CombinedProps = Props & WithAppProviderProps;
 export type TableRow = Props['headings'] | Props['rows'] | Props['totals'];
 export type TableData = string | number | React.ReactNode;
-export type SortDirection = 'ascending' | 'descending' | 'none';
-export type ColumnContentType = 'text' | 'numeric';
-
-export interface ColumnVisibilityData {
-  leftEdge: number;
-  rightEdge: number;
-  isVisible?: boolean;
-}
 
-export interface ScrollPosition {
-  left?: number;
-  top?: number;
-}
+export type ColumnContentType = 'text' | 'numeric';
 
 export interface Props {
   /** List of data types, which determines content alignment for each column. Data types are "text," which aligns left, or "numeric," which aligns right. */
@@ -59,22 +49,11 @@ export interface Props {
   onSort?(headingIndex: number, direction: SortDirection): void;
 }
 
-export interface State {
-  collapsed: boolean;
-  columnVisibilityData: ColumnVisibilityData[];
-  previousColumn?: ColumnVisibilityData;
-  currentColumn?: ColumnVisibilityData;
-  sortedColumnIndex?: number;
-  sortDirection?: SortDirection;
-  heights: number[];
-  fixedColumnWidth?: number;
-  preservedScrollPosition: ScrollPosition;
-  isScrolledFarthestLeft?: boolean;
-  isScrolledFarthestRight?: boolean;
-}
-
-export class DataTable extends React.PureComponent<CombinedProps, State> {
-  state: State = {
+export class DataTable extends React.PureComponent<
+  CombinedProps,
+  DataTableState
+> {
+  state: DataTableState = {
     collapsed: false,
     columnVisibilityData: [],
     heights: [],

src/components/DataTable/components/Cell/Cell.tsx

@@ -4,7 +4,7 @@ import {classNames} from '@shopify/react-utilities/styles';
 import {headerCell} from '../../../shared';
 import {withAppProvider, WithAppProviderProps} from '../../../AppProvider';
 import Icon, {IconSource} from '../../../Icon';
-import {SortDirection} from '../../DataTable';
+import {SortDirection} from '../../types';
 
 import * as styles from '../../DataTable.scss';
 

src/components/DataTable/components/Navigation/Navigation.tsx

@@ -4,7 +4,7 @@ import {classNames} from '@shopify/react-utilities/styles';
 import {withAppProvider, WithAppProviderProps} from '../../../AppProvider';
 import Button from '../../../Button';
 
-import {ColumnVisibilityData} from '../../DataTable';
+import {ColumnVisibilityData} from '../../types';
 
 import * as styles from '../../DataTable.scss';
 

src/components/DataTable/index.ts

@@ -1,11 +1,7 @@
 import DataTable from './DataTable';
 
-export {
-  Props,
-  TableRow,
-  TableData,
-  SortDirection,
-  ColumnContentType,
-} from './DataTable';
+export {SortDirection} from './types';
+
+export {Props, TableRow, TableData, ColumnContentType} from './DataTable';
 
 export default DataTable;

src/components/DataTable/types.ts

@@ -0,0 +1,26 @@
+export type SortDirection = 'ascending' | 'descending' | 'none';
+
+export interface ColumnVisibilityData {
+  leftEdge: number;
+  rightEdge: number;
+  isVisible?: boolean;
+}
+
+interface ScrollPosition {
+  left?: number;
+  top?: number;
+}
+
+export interface DataTableState {
+  collapsed: boolean;
+  columnVisibilityData: ColumnVisibilityData[];
+  previousColumn?: ColumnVisibilityData;
+  currentColumn?: ColumnVisibilityData;
+  sortedColumnIndex?: number;
+  sortDirection?: SortDirection;
+  heights: number[];
+  fixedColumnWidth?: number;
+  preservedScrollPosition: ScrollPosition;
+  isScrolledFarthestLeft?: boolean;
+  isScrolledFarthestRight?: boolean;
+}

src/components/DataTable/utilities.ts

@@ -1,4 +1,4 @@
-import {State} from './DataTable';
+import {DataTableState} from './types';
 
 interface TableMeasurements {
   fixedColumnWidth: number;
@@ -43,7 +43,7 @@ export function isEdgeVisible(position: number, start: number, end: number) {
 
 export function getPrevAndCurrentColumns(
   tableData: TableMeasurements,
-  columnData: State['columnVisibilityData'],
+  columnData: DataTableState['columnVisibilityData'],
 ) {
   const {firstVisibleColumnIndex} = tableData;
   const previousColumnIndex = Math.max(firstVisibleColumnIndex - 1, 0);

src/components/ResourceList/ResourceList.tsx

@@ -21,7 +21,7 @@ import {
   Provider,
 } from './components';
 
-import {SelectedItems, SELECT_ALL_ITEMS} from './types';
+import {ResourceListContext, SelectedItems, SELECT_ALL_ITEMS} from './types';
 
 import * as styles from './ResourceList.scss';
 
@@ -70,18 +70,6 @@ export interface Props {
   idForItem?(item: any, index: number): string;
 }
 
-export interface ResourceListContext {
-  selectMode: boolean;
-  selectable?: boolean;
-  selectedItems?: SelectedItems;
-  resourceName: {
-    singular: string;
-    plural: string;
-  };
-  loading?: boolean;
-  onSelectionChange?(selected: boolean, id: string): void;
-}
-
 export type CombinedProps = Props & WithAppProviderProps;
 
 const getUniqueID = createUniqueIDFactory('Select');

src/components/ResourceList/components/Context/Context.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {Intl} from '../../../AppProvider';
-import {ResourceListContext} from '../../ResourceList';
+import {ResourceListContext} from '../../types';
 
 const intl = new Intl(undefined);
 

src/components/ResourceList/components/FilterControl/FilterControl.tsx

@@ -10,7 +10,7 @@ import TextField from '../../../TextField';
 import Tag from '../../../Tag';
 import withContext from '../../../WithContext';
 
-import {ResourceListContext} from '../../ResourceList';
+import {ResourceListContext} from '../../types';
 import {Consumer} from '../Context';
 
 import {FilterCreator} from './components';

src/components/ResourceList/components/Item/Item.tsx

@@ -12,10 +12,9 @@ import {Props as ThumbnailProps} from '../../../Thumbnail';
 import ButtonGroup from '../../../ButtonGroup';
 import Checkbox from '../../../Checkbox';
 import Button, {buttonsFrom} from '../../../Button';
-import {SELECT_ALL_ITEMS} from '../../types';
 import {withAppProvider, WithAppProviderProps} from '../../../AppProvider';
 
-import {ResourceListContext} from '../../ResourceList';
+import {ResourceListContext, SELECT_ALL_ITEMS} from '../../types';
 import withContext from '../../../WithContext';
 import {Consumer} from '../Context';
 import * as styles from './Item.scss';

src/components/ResourceList/types.ts

@@ -1,3 +1,15 @@
 export type SelectedItems = string[] | 'All';
 
 export const SELECT_ALL_ITEMS = 'All';
+
+export interface ResourceListContext {
+  selectMode: boolean;
+  selectable?: boolean;
+  selectedItems?: SelectedItems;
+  resourceName: {
+    singular: string;
+    plural: string;
+  };
+  loading?: boolean;
+  onSelectionChange?(selected: boolean, id: string): void;
+}

src/components/Tabs/Tabs.tsx

@@ -5,25 +5,14 @@ import {noop} from '@shopify/javascript-utilities/other';
 
 import Icon from '../Icon';
 import Popover from '../Popover';
+
+import {TabDescriptor} from './types';
 import {getVisibleAndHiddenTabIndices} from './utilities';
 
 import {List, Panel, Tab, TabMeasurer, TabMeasurements} from './components';
 
 import * as styles from './Tabs.scss';
 
-export interface TabDescriptor {
-  /** A unique identifier for the tab */
-  id: string;
-  /** A destination to link to */
-  url?: string;
-  /** Content for the tab */
-  content: string;
-  /** A unique identifier for the panel */
-  panelID?: string;
-  /** Visually hidden text for screen readers */
-  accessibilityLabel?: string;
-}
-
 export interface Props {
   /** Content to display in tabs */
   children?: React.ReactNode;

src/components/Tabs/components/List/List.tsx

@@ -3,7 +3,7 @@ import {noop} from '@shopify/javascript-utilities/other';
 import {autobind} from '@shopify/javascript-utilities/decorators';
 
 import Item from '../Item';
-import {TabDescriptor} from '../../Tabs';
+import {TabDescriptor} from '../../types';
 import * as styles from '../../Tabs.scss';
 
 export interface Props {

src/components/Tabs/components/TabMeasurer/TabMeasurer.tsx

@@ -6,7 +6,7 @@ import {autobind} from '@shopify/javascript-utilities/decorators';
 
 import EventListener from '../../../EventListener';
 
-import {TabDescriptor} from '../../Tabs';
+import {TabDescriptor} from '../../types';
 import Tab from '../Tab';
 import * as styles from '../../Tabs.scss';
 

src/components/Tabs/types.ts

@@ -0,0 +1,12 @@
+export interface TabDescriptor {
+  /** A unique identifier for the tab */
+  id: string;
+  /** A destination to link to */
+  url?: string;
+  /** Content for the tab */
+  content: string;
+  /** A unique identifier for the panel */
+  panelID?: string;
+  /** Visually hidden text for screen readers */
+  accessibilityLabel?: string;
+}

src/components/Tabs/utilities.ts

@@ -1,4 +1,4 @@
-import {TabDescriptor} from './Tabs';
+import {TabDescriptor} from './types';
 
 export function getVisibleAndHiddenTabIndices(
   tabs: TabDescriptor[],

src/components/ThemeProvider/ThemeProvider.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import isEqual from 'lodash/isEqual';
 import {autobind} from '@shopify/javascript-utilities/decorators';
 import {setColors} from './utils';
-import {Theme, ThemeContext, THEME_CONTEXT_TYPES} from './types';
+import {Theme, ThemeProviderContext, THEME_CONTEXT_TYPES} from './types';
 
 export interface Props {
   /** Custom logos and colors provided to select components */
@@ -11,10 +11,6 @@ export interface Props {
   children?: React.ReactNode;
 }
 
-export interface Context {
-  polarisTheme?: ThemeContext;
-}
-
 const defaultTheme = {
   '--top-bar-background': '#00848e',
   '--top-bar-color': '#f9fafb',
@@ -24,7 +20,7 @@ const defaultTheme = {
 
 export default class ThemeProvider extends React.Component<Props> {
   static childContextTypes = THEME_CONTEXT_TYPES;
-  public themeContext: Context;
+  public themeContext: ThemeProviderContext;
   private subscriptions: {(): void}[] = [];
   private colors: string[][] | undefined;
 
@@ -92,7 +88,7 @@ function setThemeContext(
   ctx: Theme,
   subscribe: (callback: () => void) => void,
   unsubscribe: (callback: () => void) => void,
-): Context {
+): ThemeProviderContext {
   const {colors, logo = null, ...rest} = ctx;
   return {polarisTheme: {logo, subscribe, unsubscribe, ...rest}};
 }

src/components/ThemeProvider/index.ts

@@ -3,6 +3,7 @@ import ThemeProvider from './ThemeProvider';
 export {
   Theme,
   ThemeContext,
+  ThemeProviderContext as Context,
   ColorsToParse,
   ThemeVariant,
   ThemeColors,
@@ -15,5 +16,5 @@ export {
   createThemeContext,
   setTheme,
 } from './utils';
-export {Props, Context} from './ThemeProvider';
+export {Props} from './ThemeProvider';
 export default ThemeProvider;

src/components/ThemeProvider/types.ts

@@ -40,6 +40,10 @@ export interface ThemeContext {
   unsubscribe: (callback: () => void) => void;
 }
 
+export interface ThemeProviderContext {
+  polarisTheme?: ThemeContext;
+}
+
 export type ThemeVariant = 'light' | 'dark';
 
 export const THEME_CONTEXT_TYPES = {polarisTheme: PropTypes.any};

src/components/ThemeProvider/utils/index.ts

@@ -15,13 +15,13 @@ import {
 } from '../../../utilities/color-manipulation';
 import {compose} from '../../../utilities/compose';
 
-import {Context as ThemeProviderContext} from '../ThemeProvider';
 import {
   Theme,
   ColorsToParse,
   ThemeVariant,
   ThemeColors,
   ThemeContext,
+  ThemeProviderContext,
 } from '../types';
 
 export function setColors(theme: Theme | undefined): string[][] | undefined {