Infer HoC props

UNRELEASED.md

@@ -32,3 +32,5 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 ### Dependency upgrades
 
 ### Code quality
+
+- Improve `withAppProvider`, `withSticky`, `withRef`, and `withContext` types to allow them to infer a components props ([#805](https://github.com/Shopify/polaris-react/pull/805))

src/components/AppProvider/utilities/withAppProvider/withAppProvider.tsx

@@ -23,13 +23,13 @@ export interface WithAppProviderProps {
   };
 }
 
-export default function withAppProvider<OwnProps>() {
-  return function addProvider<C>(
+export default function withAppProvider() {
+  return function addProvider<OriginalProps, C>(
     WrappedComponent:
-      | React.ComponentClass<OwnProps & WithAppProviderProps> & C
-      | React.SFC<OwnProps & WithAppProviderProps> & C,
-  ): React.ComponentClass<OwnProps> & C {
-    class WithProvider extends React.Component<OwnProps, never> {
+      | React.ComponentClass<OriginalProps & WithAppProviderProps> & C
+      | React.SFC<OriginalProps & WithAppProviderProps> & C,
+  ): React.ComponentClass<OriginalProps> & C {
+    class WithProvider extends React.Component<OriginalProps, never> {
       static contextTypes = WrappedComponent.contextTypes
         ? merge(WrappedComponent.contextTypes, polarisAppProviderContextTypes)
         : polarisAppProviderContextTypes;
@@ -90,6 +90,6 @@ export default function withAppProvider<OwnProps>() {
       WrappedComponent as React.ComponentClass<any>,
     );
 
-    return FinalComponent as React.ComponentClass<OwnProps> & C;
+    return FinalComponent as React.ComponentClass<OriginalProps> & C;
   };
 }

src/components/AppProvider/utilities/withSticky/withSticky.tsx

@@ -10,7 +10,7 @@ export default function withSticky() {
     WrappedComponent:
       | React.ComponentClass<OwnProps & WithAppProviderProps> & C
       | React.SFC<OwnProps & WithAppProviderProps> & C,
-  ): any & C {
+  ): React.ComponentClass<OwnProps> & C {
     // eslint-disable-next-line shopify/react-initialize-state
     class WithStickyManager extends React.Component<
       {},
@@ -50,6 +50,6 @@ export default function withSticky() {
       WithStickyManager,
       WrappedComponent as React.ComponentClass<any>,
     );
-    return FinalComponent as React.ComponentClass<any> & C;
+    return FinalComponent as React.ComponentClass<OwnProps> & C;
   };
 }

src/components/Autocomplete/Autocomplete.tsx

@@ -101,4 +101,4 @@ export class Autocomplete extends React.PureComponent<CombinedProps, never> {
   }
 }
 
-export default withAppProvider<Props>()(Autocomplete);
+export default withAppProvider()(Autocomplete);

src/components/Avatar/Avatar.tsx

@@ -173,4 +173,4 @@ function customerPlaceholder(name?: string) {
     : AVATAR_IMAGES[0];
 }
 
-export default withAppProvider<Props>()(Avatar);
+export default withAppProvider()(Avatar);

src/components/Badge/Badge.tsx

@@ -109,4 +109,4 @@ function Badge({
   );
 }
 
-export default withAppProvider<Props>()(Badge);
+export default withAppProvider()(Badge);

src/components/Button/Button.tsx

@@ -203,4 +203,4 @@ function isIconSource(x: any): x is IconSource {
   return typeof x === 'string' || (typeof x === 'object' && x.body);
 }
 
-export default withAppProvider<Props>()(Button);
+export default withAppProvider()(Button);

src/components/Checkbox/Checkbox.tsx

@@ -131,4 +131,4 @@ function Checkbox({
   );
 }
 
-export default withAppProvider<Props>()(Checkbox);
+export default withAppProvider()(Checkbox);

src/components/ChoiceList/ChoiceList.tsx

@@ -145,4 +145,4 @@ function updateSelectedChoices(
   return selected.filter((selectedChoice) => selectedChoice !== value);
 }
 
-export default withAppProvider<Props>()(ChoiceList);
+export default withAppProvider()(ChoiceList);

src/components/Collapsible/Collapsible.tsx

@@ -192,4 +192,4 @@ function collapsibleHeight(
   return `${height || 0}px`;
 }
 
-export default withAppProvider<Props>()(Collapsible);
+export default withAppProvider()(Collapsible);

src/components/DataTable/DataTable.tsx

@@ -511,4 +511,4 @@ export class DataTable extends React.PureComponent<
   }
 }
 
-export default withAppProvider<Props>()(DataTable);
+export default withAppProvider()(DataTable);

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

@@ -126,4 +126,4 @@ function Cell({
   return cellMarkup;
 }
 
-export default withAppProvider<Props>()(Cell);
+export default withAppProvider()(Cell);

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

@@ -66,4 +66,4 @@ function Navigation({
   );
 }
 
-export default withAppProvider<Props>()(Navigation);
+export default withAppProvider()(Navigation);

src/components/DatePicker/DatePicker.tsx

@@ -325,4 +325,4 @@ function deriveRange(selected?: Date | Range) {
   return selected instanceof Date ? {start: selected, end: selected} : selected;
 }
 
-export default withAppProvider<Props>()(DatePicker);
+export default withAppProvider()(DatePicker);

src/components/DatePicker/components/Day/Day.tsx

@@ -94,4 +94,4 @@ export class Day extends React.PureComponent<CombinedProps, never> {
   }
 }
 
-export default withAppProvider<Props>()(Day);
+export default withAppProvider()(Day);

src/components/DropZone/DropZone.tsx

@@ -561,4 +561,4 @@ function handleDragStart(event: React.DragEvent<HTMLDivElement>) {
   event.stopPropagation();
 }
 
-export default withAppProvider<Props>()(DropZone);
+export default withAppProvider()(DropZone);

src/components/DropZone/components/FileUpload/FileUpload.tsx

@@ -149,7 +149,7 @@ export class FileUpload extends React.Component<CombinedProps, State> {
 }
 
 export default compose<Props>(
-  withContext<Props, WithAppProviderProps, DropZoneContext>(Consumer),
-  withAppProvider<Props>(),
-  withRef<Props>(),
+  withContext<DropZoneContext>(Consumer),
+  withAppProvider(),
+  withRef(),
 )(FileUpload);

src/components/EmptySearchResult/EmptySearchResult.tsx

@@ -52,4 +52,4 @@ export class EmptySearchResult extends React.PureComponent<
   }
 }
 
-export default withAppProvider<Props>()(EmptySearchResult);
+export default withAppProvider()(EmptySearchResult);

src/components/Frame/Frame.tsx

@@ -416,4 +416,4 @@ function isMobileView() {
   return navigationBarCollapsed().matches;
 }
 
-export default withAppProvider<Props>()(Frame);
+export default withAppProvider()(Frame);

src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.tsx

@@ -131,4 +131,4 @@ class ContextualSaveBar extends React.PureComponent<CombinedProps, State> {
   }
 }
 
-export default withAppProvider<Props>()(ContextualSaveBar);
+export default withAppProvider()(ContextualSaveBar);

src/components/Frame/components/ContextualSaveBar/components/DiscardConfirmationModal/DiscardConfirmationModal.tsx

@@ -47,4 +47,4 @@ function DiscardConfirmationModal({
   );
 }
 
-export default withAppProvider<Props>()(DiscardConfirmationModal);
+export default withAppProvider()(DiscardConfirmationModal);

src/components/Icon/Icon.tsx

@@ -239,4 +239,4 @@ function isBundledIcon(key: string | BundledIcon): key is BundledIcon {
   return Object.keys(BUNDLED_ICONS).includes(key);
 }
 
-export default withAppProvider<Props>()(Icon);
+export default withAppProvider()(Icon);

src/components/Loading/Loading.tsx

@@ -37,4 +37,4 @@ export class Loading extends React.PureComponent<ComposedProps, never> {
   }
 }
 
-export default withAppProvider<Props>()(Loading);
+export default withAppProvider()(Loading);

src/components/Modal/Modal.tsx

@@ -384,4 +384,4 @@ function isIframeModal(
   );
 }
 
-export default withAppProvider<Props>()(Modal);
+export default withAppProvider()(Modal);

src/components/Navigation/components/Item/Item.tsx

@@ -376,6 +376,6 @@ function matchStateForItem(
   return matchesUrl ? MatchState.MatchUrl : MatchState.NoMatch;
 }
 
-export const Item = withAppProvider<Props>()(BaseItem);
+export const Item = withAppProvider()(BaseItem);
 
 export default Item;

src/components/OptionList/OptionList.tsx

@@ -226,4 +226,4 @@ function testSectionsPropEquality(
   return optionsAreEqual && titlesAreEqual;
 }
 
-export default withAppProvider<Props>()(OptionList);
+export default withAppProvider()(OptionList);