Type tidying (#2631)

Avoid exporting types from some components, pluck values from the Props interfaces instead

src/components/Autocomplete/Autocomplete.tsx

@@ -2,11 +2,10 @@ import React from 'react';
 
 import {useI18n} from '../../utilities/i18n';
 import {ActionListItemDescriptor} from '../../types';
-import {PreferredPosition} from '../PositionedOverlay';
 import {OptionDescriptor} from '../OptionList';
 import {Spinner} from '../Spinner';
 
-import {TextField, ComboBox} from './components';
+import {TextField, ComboBox, ComboBoxProps} from './components';
 import styles from './Autocomplete.scss';
 
 export interface AutocompleteProps {
@@ -19,7 +18,7 @@ export interface AutocompleteProps {
   /** The text field component attached to the list of options */
   textField: React.ReactElement;
   /** The preferred direction to open the popover */
-  preferredPosition?: PreferredPosition;
+  preferredPosition?: ComboBoxProps['preferredPosition'];
   /** Title of the list of options */
   listTitle?: string;
   /** Allow more than one option to be selected */

src/components/Autocomplete/components/ComboBox/ComboBox.tsx

@@ -2,8 +2,7 @@ import React from 'react';
 import {createUniqueIDFactory} from '@shopify/javascript-utilities/other';
 import {OptionList, OptionDescriptor} from '../../../OptionList';
 import {ActionList} from '../../../ActionList';
-import {Popover} from '../../../Popover';
-import {PreferredPosition} from '../../../PositionedOverlay';
+import {Popover, PopoverProps} from '../../../Popover';
 import {ActionListItemDescriptor, Key} from '../../../../types';
 import {KeypressListener} from '../../../KeypressListener';
 import {EventListener} from '../../../EventListener';
@@ -23,7 +22,7 @@ interface State {
   popoverWasActive: boolean;
 }
 
-interface ComboBoxProps {
+export interface ComboBoxProps {
   /** A unique identifier for the ComboBox */
   id?: string;
   /** Collection of options to be listed */
@@ -33,7 +32,7 @@ interface ComboBoxProps {
   /** The text field component attached to the list of options */
   textField: React.ReactElement;
   /** The preferred direction to open the popover */
-  preferredPosition?: PreferredPosition;
+  preferredPosition?: PopoverProps['preferredPosition'];
   /** Title of the list of options */
   listTitle?: string;
   /** Allow more than one option to be selected */

src/components/Badge/Badge.tsx

@@ -22,13 +22,13 @@ export interface BadgeProps {
   size?: Size;
 }
 
-export const PROGRESS_LABELS: {[key in Progress]: Progress} = {
+const PROGRESS_LABELS: {[key in Progress]: Progress} = {
   incomplete: 'incomplete',
   partiallyComplete: 'partiallyComplete',
   complete: 'complete',
 };
 
-export const STATUS_LABELS: {[key in Status]: Status} = {
+const STATUS_LABELS: {[key in Status]: Status} = {
   info: 'info',
   success: 'success',
   warning: 'warning',

src/components/Badge/tests/Badge.test.tsx

@@ -2,32 +2,21 @@ import React from 'react';
 // eslint-disable-next-line no-restricted-imports
 import {mountWithAppProvider} from 'test-utilities/legacy';
 import {VisuallyHidden} from 'components';
-import {Badge, PROGRESS_LABELS, STATUS_LABELS} from '..';
+import {Badge} from '../Badge';
 
 describe('<Badge />', () => {
   it('renders its children', () => {
     const badge = mountWithAppProvider(<Badge>Badge test</Badge>);
     expect(badge.text()).toBe('Badge test');
-    badge.unmount();
   });
 
   it('accepts a status prop and renders a visually hidden label', () => {
-    Object.keys(STATUS_LABELS).forEach((key: keyof typeof STATUS_LABELS) => {
-      const badge = mountWithAppProvider(<Badge status={STATUS_LABELS[key]} />);
-      expect(badge.find(VisuallyHidden).exists()).toBe(true);
-      badge.unmount();
-    });
+    const badge = mountWithAppProvider(<Badge status="success" />);
+    expect(badge.find(VisuallyHidden).exists()).toBe(true);
   });
 
   it('accepts a progress prop and renders a visually hidden label', () => {
-    Object.keys(PROGRESS_LABELS).forEach(
-      (key: keyof typeof PROGRESS_LABELS) => {
-        const badge = mountWithAppProvider(
-          <Badge progress={PROGRESS_LABELS[key]} />,
-        );
-        expect(badge.find(VisuallyHidden).exists()).toBe(true);
-        badge.unmount();
-      },
-    );
+    const badge = mountWithAppProvider(<Badge progress="incomplete" />);
+    expect(badge.find(VisuallyHidden).exists()).toBe(true);
   });
 });

src/components/ColorPicker/ColorPicker.tsx

@@ -3,7 +3,7 @@ import {clamp} from '@shopify/javascript-utilities/math';
 
 import {hsbToRgb} from '../../utilities/color-transformers';
 import {HSBColor, HSBAColor} from '../../utilities/color-types';
-import {AlphaPicker, HuePicker, Slidable, Position} from './components';
+import {AlphaPicker, HuePicker, Slidable, SlidableProps} from './components';
 import styles from './ColorPicker.scss';
 
 interface State {
@@ -110,7 +110,7 @@ export class ColorPicker extends React.PureComponent<ColorPickerProps, State> {
     onChange({hue, brightness, saturation, alpha});
   };
 
-  private handleDraggerMove = ({x, y}: Position) => {
+  private handleDraggerMove: SlidableProps['onChange'] = ({x, y}) => {
     const {pickerSize} = this.state;
     const {
       color: {hue, alpha = 1},

src/components/ColorPicker/components/AlphaPicker/AlphaPicker.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Slidable, Position} from '../Slidable';
+import {Slidable, SlidableProps} from '../Slidable';
 import {HSBColor} from '../../../../utilities/color-types';
 import {hsbToRgb} from '../../../../utilities/color-transformers';
 import styles from '../../ColorPicker.scss';
@@ -62,7 +62,7 @@ export class AlphaPicker extends React.PureComponent<AlphaPickerProps, State> {
     });
   };
 
-  private handleChange = ({y}: Position) => {
+  private handleChange: SlidableProps['onChange'] = ({y}) => {
     const {onChange} = this.props;
     const {sliderHeight} = this.state;
     const alpha = alphaForDraggerY(y, sliderHeight);

src/components/ColorPicker/components/HuePicker/HuePicker.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Slidable, Position} from '../Slidable';
+import {Slidable, SlidableProps} from '../Slidable';
 import styles from '../../ColorPicker.scss';
 import {calculateDraggerY, hueForDraggerY} from './utilities';
 
@@ -56,7 +56,7 @@ export class HuePicker extends React.PureComponent<HuePickerProps, State> {
     });
   };
 
-  private handleChange = ({y}: Position) => {
+  private handleChange: SlidableProps['onChange'] = ({y}) => {
     const {onChange} = this.props;
     const {sliderHeight} = this.state;
     const hue = hueForDraggerY(y, sliderHeight);

src/components/ColorPicker/components/Slidable/Slidable.tsx

@@ -4,7 +4,7 @@ import {isServer} from '../../../../utilities/target';
 import {EventListener} from '../../../EventListener';
 import styles from '../../ColorPicker.scss';
 
-export interface Position {
+interface Position {
   x: number;
   y: number;
 }

src/components/Filters/Filters.tsx

@@ -28,7 +28,10 @@ import {Stack} from '../Stack';
 import {Key} from '../../types';
 
 import {KeypressListener} from '../KeypressListener';
-import {ConnectedFilterControl, PopoverableAction} from './components';
+import {
+  ConnectedFilterControl,
+  ConnectedFilterControlProps,
+} from './components';
 
 import styles from './Filters.scss';
 
@@ -481,8 +484,8 @@ class FiltersInner extends React.Component<ComposedProps, State> {
 
   private transformFilters(
     filters: FilterInterface[],
-  ): PopoverableAction[] | null {
-    const transformedActions: PopoverableAction[] = [];
+  ): ConnectedFilterControlProps['rightPopoverableActions'] | null {
+    const transformedActions: ConnectedFilterControlProps['rightPopoverableActions'] = [];
 
     getShortcutFilters(filters).forEach((filter) => {
       const {key, label, disabled} = filter;

src/components/Filters/components/ConnectedFilterControl/ConnectedFilterControl.tsx

@@ -10,7 +10,7 @@ import {Item} from './components';
 
 import styles from './ConnectedFilterControl.scss';
 
-export interface PopoverableAction extends DisableableAction {
+interface PopoverableAction extends DisableableAction {
   popoverOpen: boolean;
   popoverContent: React.ReactNode;
   key: string;

src/components/Filters/components/ConnectedFilterControl/tests/ConnectedFilterControl.test.tsx

@@ -1,17 +1,22 @@
 import React from 'react';
 import {Popover, Button} from 'components';
+import {ArrayElement} from '@shopify/useful-types';
 // eslint-disable-next-line no-restricted-imports
 import {mountWithAppProvider, ReactWrapper} from 'test-utilities/legacy';
 
 import {
   ConnectedFilterControl,
-  PopoverableAction,
+  ConnectedFilterControlProps,
 } from '../ConnectedFilterControl';
 
 const MockChild = () => <div />;
 const MockFilter = () => <div />;
 const MockAux = () => <div />;
 
+type PopoverableAction = ArrayElement<
+  ConnectedFilterControlProps['rightPopoverableActions']
+>;
+
 const mockRightOpenPopoverableAction: PopoverableAction = {
   popoverOpen: true,
   popoverContent: MockFilter,

src/components/Form/Form.tsx

@@ -3,14 +3,14 @@ import React, {useCallback} from 'react';
 import {VisuallyHidden} from '../VisuallyHidden';
 import {useI18n} from '../../utilities/i18n';
 
-export type Enctype =
+type Enctype =
   | 'application/x-www-form-urlencoded'
   | 'multipart/form-data'
   | 'text/plain';
 
-export type Method = 'post' | 'get' | 'action';
+type Method = 'post' | 'get' | 'action';
 
-export type Target = '_blank' | '_self' | '_parent' | '_top' | string;
+type Target = '_blank' | '_self' | '_parent' | '_top' | string;
 
 export interface FormProps {
   /** Space separated list of character encodings */

src/components/Popover/Popover.tsx

@@ -7,12 +7,16 @@ import React, {
 } from 'react';
 import {findFirstFocusableNode} from '@shopify/javascript-utilities/focus';
 import {focusNextFocusableNode} from '../../utilities/focus';
-
-import {PreferredPosition, PreferredAlignment} from '../PositionedOverlay';
 import {Portal} from '../Portal';
 import {portal} from '../shared';
 import {useUniqueId} from '../../utilities/unique-id';
-import {PopoverCloseSource, Pane, PopoverOverlay, Section} from './components';
+import {
+  PopoverCloseSource,
+  Pane,
+  PopoverOverlay,
+  PopoverOverlayProps,
+  Section,
+} from './components';
 import {setActivatorAttributes} from './set-activator-attributes';
 
 export {PopoverCloseSource};
@@ -21,9 +25,9 @@ export interface PopoverProps {
   /** The content to display inside the popover */
   children?: React.ReactNode;
   /** The preferred direction to open the popover */
-  preferredPosition?: PreferredPosition;
+  preferredPosition?: PopoverOverlayProps['preferredPosition'];
   /** The preferred alignment of the popover relative to its activator */
-  preferredAlignment?: PreferredAlignment;
+  preferredAlignment?: PopoverOverlayProps['preferredAlignment'];
   /** Show or hide the Popover */
   active: boolean;
   /** The element to activate the Popover */

src/components/Popover/components/PopoverOverlay/PopoverOverlay.tsx

@@ -14,9 +14,7 @@ import {EventListener} from '../../../EventListener';
 import {KeypressListener} from '../../../KeypressListener';
 import {
   PositionedOverlay,
-  OverlayDetails,
-  PreferredPosition,
-  PreferredAlignment,
+  PositionedOverlayProps,
 } from '../../../PositionedOverlay';
 
 import {Pane, PaneProps} from '../Pane';
@@ -41,8 +39,8 @@ export interface PopoverOverlayProps {
   fullWidth?: boolean;
   fullHeight?: boolean;
   fluidContent?: boolean;
-  preferredPosition?: PreferredPosition;
-  preferredAlignment?: PreferredAlignment;
+  preferredPosition?: PositionedOverlayProps['preferredPosition'];
+  preferredAlignment?: PositionedOverlayProps['preferredAlignment'];
   active: boolean;
   id: string;
   activator: HTMLElement;
@@ -177,7 +175,9 @@ export class PopoverOverlay extends React.PureComponent<
     });
   }
 
-  private renderPopover = (overlayDetails: OverlayDetails) => {
+  private renderPopover: PositionedOverlayProps['render'] = (
+    overlayDetails,
+  ) => {
     const {measuring, desiredHeight, positioning} = overlayDetails;
 
     const {

src/components/PositionedOverlay/PositionedOverlay.tsx

@@ -19,11 +19,9 @@ import {
 
 import styles from './PositionedOverlay.scss';
 
-export {PreferredPosition, PreferredAlignment};
-
 type Positioning = 'above' | 'below';
 
-export interface OverlayDetails {
+interface OverlayDetails {
   left?: number;
   right?: number;
   desiredHeight: number;

src/components/Stack/Stack.tsx

@@ -5,11 +5,11 @@ import {elementChildren, wrapWithComponent} from '../../utilities/components';
 import {Item} from './components';
 import styles from './Stack.scss';
 
-export type Spacing = 'extraTight' | 'tight' | 'loose' | 'extraLoose' | 'none';
+type Spacing = 'extraTight' | 'tight' | 'loose' | 'extraLoose' | 'none';
 
-export type Alignment = 'leading' | 'trailing' | 'center' | 'fill' | 'baseline';
+type Alignment = 'leading' | 'trailing' | 'center' | 'fill' | 'baseline';
 
-export type Distribution =
+type Distribution =
   | 'equalSpacing'
   | 'leading'
   | 'trailing'

src/components/Tabs/Tabs.tsx

@@ -12,7 +12,7 @@ import {
 import {TabDescriptor} from './types';
 import {getVisibleAndHiddenTabIndices} from './utilities';
 
-import {List, Panel, Tab, TabMeasurer, TabMeasurements} from './components';
+import {List, Panel, Tab, TabMeasurer, TabMeasurerProps} from './components';
 
 import styles from './Tabs.scss';
 
@@ -298,7 +298,9 @@ class TabsInner extends React.PureComponent<CombinedProps, State> {
     });
   };
 
-  private handleMeasurement = (measurements: TabMeasurements) => {
+  private handleMeasurement: TabMeasurerProps['handleMeasurement'] = (
+    measurements,
+  ) => {
     const {tabs, selected} = this.props;
     const {tabToFocus} = this.state;
     const {

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

@@ -7,7 +7,7 @@ import {TabDescriptor} from '../../types';
 import {Tab} from '../Tab';
 import styles from '../../Tabs.scss';
 
-export interface TabMeasurements {
+interface TabMeasurements {
   containerWidth: number;
   disclosureWidth: number;
   hiddenTabWidths: number[];

src/components/Tooltip/Tooltip.tsx

@@ -1,11 +1,10 @@
 import React, {useEffect, useState, useRef} from 'react';
 import {findFirstFocusableNode} from '@shopify/javascript-utilities/focus';
 
-import {PreferredPosition} from '../PositionedOverlay';
 import {Portal} from '../Portal';
 import {useUniqueId} from '../../utilities/unique-id';
 import {useToggle} from '../../utilities/use-toggle';
-import {TooltipOverlay} from './components';
+import {TooltipOverlay, TooltipOverlayProps} from './components';
 import styles from './Tooltip.scss';
 
 export interface TooltipProps {
@@ -21,7 +20,7 @@ export interface TooltipProps {
    * The direction the tooltip tries to display
    * @default 'below'
    */
-  preferredPosition?: PreferredPosition;
+  preferredPosition?: TooltipOverlayProps['preferredPosition'];
   /**
    * The element type to wrap the activator in
    * @default 'span'