Fix usage with esModuleInterop disabled (#4928)

* Allow usage without esModuleInterop

* Create popular-rats-kick.md

* Format

.changeset/popular-rats-kick.md

@@ -0,0 +1,5 @@
+---
+'react-select': patch
+---
+
+Fix usage with esModuleInterop disabled

package.json

@@ -124,7 +124,7 @@
     "test": "npm run test:jest && npm run test:cypress",
     "test:jest": "jest --coverage",
     "e2e": "concurrently --kill-others --success=first --names 'SERVER,E2E' 'yarn start:test --progress=false --no-info' 'yarn test:cypress'",
-    "type-check": "tsc --build packages/react-select/tsconfig.json && tsc --build docs/tsconfig.json && tsc --build cypress/tsconfig.json",
+    "type-check": "tsc --build packages/react-select/tsconfig.json && tsc --build packages/react-select/src/__tests__/tsconfig.json && tsc --build docs/tsconfig.json && tsc --build cypress/tsconfig.json",
     "precommit": "yarn run type-check",
     "postinstall": "preconstruct dev",
     "test:cypress": "yarn test:cypress:chrome && yarn test:cypress:firefox",

packages/react-select/src/Async.tsx

@@ -1,4 +1,10 @@
-import React, { MutableRefObject, ReactElement, RefAttributes } from 'react';
+import * as React from 'react';
+import {
+  forwardRef,
+  MutableRefObject,
+  ReactElement,
+  RefAttributes,
+} from 'react';
 import Select from './Select';
 import { GroupBase } from './types';
 import useStateManager from './useStateManager';
@@ -15,7 +21,7 @@ type AsyncSelect = <
     RefAttributes<Select<Option, IsMulti, Group>>
 ) => ReactElement;
 
-const AsyncSelect = React.forwardRef(
+const AsyncSelect = forwardRef(
   <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
     props: AsyncProps<Option, IsMulti, Group>,
     ref:

packages/react-select/src/AsyncCreatable.tsx

@@ -1,6 +1,12 @@
+import * as React from 'react';
+import {
+  forwardRef,
+  MutableRefObject,
+  ReactElement,
+  RefAttributes,
+} from 'react';
 import Select from './Select';
 import { GroupBase } from './types';
-import React, { MutableRefObject, ReactElement, RefAttributes } from 'react';
 import useAsync, { AsyncAdditionalProps } from './useAsync';
 import useStateManager, { StateManagerProps } from './useStateManager';
 import useCreatable, { CreatableAdditionalProps } from './useCreatable';
@@ -22,7 +28,7 @@ type AsyncCreatableSelect = <
     RefAttributes<Select<Option, IsMulti, Group>>
 ) => ReactElement;
 
-const AsyncCreatableSelect = React.forwardRef(
+const AsyncCreatableSelect = forwardRef(
   <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
     props: AsyncCreatableProps<Option, IsMulti, Group>,
     ref:

packages/react-select/src/Creatable.tsx

@@ -1,4 +1,10 @@
-import React, { MutableRefObject, ReactElement, RefAttributes } from 'react';
+import * as React from 'react';
+import {
+  forwardRef,
+  MutableRefObject,
+  ReactElement,
+  RefAttributes,
+} from 'react';
 import Select from './Select';
 import { GroupBase } from './types';
 import useStateManager, { StateManagerProps } from './useStateManager';
@@ -20,7 +26,7 @@ type CreatableSelect = <
     RefAttributes<Select<Option, IsMulti, Group>>
 ) => ReactElement;
 
-const CreatableSelect = React.forwardRef(
+const CreatableSelect = forwardRef(
   <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
     props: CreatableProps<Option, IsMulti, Group>,
     ref:

packages/react-select/src/NonceProvider.tsx

@@ -1,4 +1,5 @@
-import React, { Component, ReactNode } from 'react';
+import * as React from 'react';
+import { Component, ReactNode } from 'react';
 import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
 import memoizeOne from 'memoize-one';

packages/react-select/src/Select.tsx

@@ -1,4 +1,5 @@
-import React, {
+import * as React from 'react';
+import {
   Component,
   FocusEventHandler,
   FormEventHandler,

packages/react-select/src/__tests__/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "es6",
+    "module": "commonjs",
+    "jsx": "react",
+    "noEmit": true,
+    "strict": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true
+  }
+}

packages/react-select/src/animated/Input.tsx

@@ -1,4 +1,5 @@
-import React, { ReactElement } from 'react';
+import * as React from 'react';
+import { ReactElement } from 'react';
 import { TransitionProps } from 'react-transition-group/Transition';
 import { InputProps } from '../components/Input';
 import { GroupBase } from '../types';

packages/react-select/src/animated/MultiValue.tsx

@@ -1,4 +1,5 @@
-import React, { ReactElement } from 'react';
+import * as React from 'react';
+import { ReactElement } from 'react';
 import { TransitionProps } from 'react-transition-group/Transition';
 import { MultiValueProps } from '../components/MultiValue';
 import { Collapse } from './transitions';

packages/react-select/src/animated/Placeholder.tsx

@@ -1,4 +1,5 @@
-import React, { ReactElement } from 'react';
+import * as React from 'react';
+import { ReactElement } from 'react';
 import { PlaceholderProps } from '../components/Placeholder';
 import { Fade, collapseDuration } from './transitions';
 import { GroupBase } from '../types';

packages/react-select/src/animated/SingleValue.tsx

@@ -1,4 +1,5 @@
-import React, { ReactElement } from 'react';
+import * as React from 'react';
+import { ReactElement } from 'react';
 import { SingleValueProps } from '../components/SingleValue';
 import { Fade } from './transitions';
 import { GroupBase } from '../types';

packages/react-select/src/animated/ValueContainer.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useState, ReactElement, ReactNode } from 'react';
+import * as React from 'react';
+import { useEffect, useState, ReactElement, ReactNode } from 'react';
 import { TransitionGroup } from 'react-transition-group';
 import { ValueContainerProps } from '../components/containers';
 import { GroupBase } from '../types';

packages/react-select/src/animated/transitions.tsx

@@ -1,4 +1,5 @@
-import React, {
+import * as React from 'react';
+import {
   Component,
   ComponentType,
   createRef,

packages/react-select/src/components/LiveRegion.tsx

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import React, { ReactNode, useMemo } from 'react';
+import { Fragment, ReactNode, useMemo } from 'react';
 import { jsx } from '@emotion/react';
 import A11yText from '../internal/A11yText';
 import { defaultAriaLiveMessages, AriaSelection } from '../accessibility';
@@ -189,16 +189,16 @@ const LiveRegion = <
   const ariaContext = `${ariaFocused} ${ariaResults} ${ariaGuidance}`;
 
   const ScreenReaderText = (
-    <React.Fragment>
+    <Fragment>
       <span id="aria-selection">{ariaSelected}</span>
       <span id="aria-context">{ariaContext}</span>
-    </React.Fragment>
+    </Fragment>
   );
 
   const isInitialFocus = ariaSelection?.action === 'initial-input-focus';
 
   return (
-    <React.Fragment>
+    <Fragment>
       {/* We use 'aria-describedby' linked to this component for the initial focus */}
       {/* action, then for all other actions we use the live region below */}
       <A11yText id={id}>{isInitialFocus && ScreenReaderText}</A11yText>
@@ -209,7 +209,7 @@ const LiveRegion = <
       >
         {isFocused && !isInitialFocus && ScreenReaderText}
       </A11yText>
-    </React.Fragment>
+    </Fragment>
   );
 };
 

packages/react-select/src/internal/ScrollManager.tsx

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-import React, { ReactElement, RefCallback } from 'react';
+import { Fragment, ReactElement, RefCallback } from 'react';
 import useScrollCapture from './useScrollCapture';
 import useScrollLock from './useScrollLock';
 
@@ -41,14 +41,14 @@ export default function ScrollManager({
   };
 
   return (
-    <React.Fragment>
+    <Fragment>
       {lockEnabled && (
         <div
           onClick={blurSelectInput}
           css={{ position: 'fixed', left: 0, bottom: 0, right: 0, top: 0 }}
         />
       )}
       {children(targetRef)}
-    </React.Fragment>
+    </Fragment>
   );
 }

packages/react-select/src/stateManager.tsx

@@ -1,4 +1,10 @@
-import React, { MutableRefObject, ReactElement, RefAttributes } from 'react';
+import * as React from 'react';
+import {
+  forwardRef,
+  MutableRefObject,
+  ReactElement,
+  RefAttributes,
+} from 'react';
 
 import { GroupBase } from './types';
 import Select from './Select';
@@ -15,7 +21,7 @@ type StateManagedSelect = <
     RefAttributes<Select<Option, IsMulti, Group>>
 ) => ReactElement;
 
-const StateManagedSelect = React.forwardRef(
+const StateManagedSelect = forwardRef(
   <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
     props: StateManagerProps<Option, IsMulti, Group>,
     ref:

packages/react-select/tsconfig.json

@@ -5,8 +5,8 @@
     "jsx": "react",
     "noEmit": true,
     "strict": true,
-    "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "resolveJsonModule": true
-  }
+  },
+  "exclude": ["src/__tests__"]
 }