From ac869613c2ddc5ab926cc327eafcf449d77b791a Mon Sep 17 00:00:00 2001 From: Nathan Bierema Date: Mon, 22 Nov 2021 09:56:30 -0500 Subject: [PATCH 1/3] Allow usage without esModuleInterop --- package.json | 2 +- packages/react-select/src/Async.tsx | 10 ++++++++-- packages/react-select/src/AsyncCreatable.tsx | 10 ++++++++-- packages/react-select/src/Creatable.tsx | 10 ++++++++-- packages/react-select/src/NonceProvider.tsx | 3 ++- packages/react-select/src/Select.tsx | 3 ++- packages/react-select/src/__tests__/tsconfig.json | 12 ++++++++++++ packages/react-select/src/animated/Input.tsx | 3 ++- packages/react-select/src/animated/MultiValue.tsx | 3 ++- packages/react-select/src/animated/Placeholder.tsx | 3 ++- packages/react-select/src/animated/SingleValue.tsx | 3 ++- .../react-select/src/animated/ValueContainer.tsx | 3 ++- packages/react-select/src/animated/transitions.tsx | 3 ++- packages/react-select/src/components/LiveRegion.tsx | 10 +++++----- packages/react-select/src/internal/ScrollManager.tsx | 6 +++--- packages/react-select/src/stateManager.tsx | 10 ++++++++-- packages/react-select/tsconfig.json | 6 ++++-- 17 files changed, 73 insertions(+), 27 deletions(-) create mode 100644 packages/react-select/src/__tests__/tsconfig.json diff --git a/package.json b/package.json index 184c1814b0..dcbe874a22 100644 --- a/package.json +++ b/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", diff --git a/packages/react-select/src/Async.tsx b/packages/react-select/src/Async.tsx index a49438c158..35a1de7055 100644 --- a/packages/react-select/src/Async.tsx +++ b/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> ) => ReactElement; -const AsyncSelect = React.forwardRef( +const AsyncSelect = forwardRef( >( props: AsyncProps, ref: diff --git a/packages/react-select/src/AsyncCreatable.tsx b/packages/react-select/src/AsyncCreatable.tsx index ebc944e18f..e2b0d700cb 100644 --- a/packages/react-select/src/AsyncCreatable.tsx +++ b/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> ) => ReactElement; -const AsyncCreatableSelect = React.forwardRef( +const AsyncCreatableSelect = forwardRef( >( props: AsyncCreatableProps, ref: diff --git a/packages/react-select/src/Creatable.tsx b/packages/react-select/src/Creatable.tsx index 5186adb49a..52d616a011 100644 --- a/packages/react-select/src/Creatable.tsx +++ b/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> ) => ReactElement; -const CreatableSelect = React.forwardRef( +const CreatableSelect = forwardRef( >( props: CreatableProps, ref: diff --git a/packages/react-select/src/NonceProvider.tsx b/packages/react-select/src/NonceProvider.tsx index 6e6eaa7e57..1ba548aa88 100644 --- a/packages/react-select/src/NonceProvider.tsx +++ b/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'; diff --git a/packages/react-select/src/Select.tsx b/packages/react-select/src/Select.tsx index 758eb44511..91aec77727 100644 --- a/packages/react-select/src/Select.tsx +++ b/packages/react-select/src/Select.tsx @@ -1,4 +1,5 @@ -import React, { +import * as React from 'react'; +import { Component, FocusEventHandler, FormEventHandler, diff --git a/packages/react-select/src/__tests__/tsconfig.json b/packages/react-select/src/__tests__/tsconfig.json new file mode 100644 index 0000000000..9183baf05d --- /dev/null +++ b/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 + } +} diff --git a/packages/react-select/src/animated/Input.tsx b/packages/react-select/src/animated/Input.tsx index 0234b99c3a..b96840cce9 100644 --- a/packages/react-select/src/animated/Input.tsx +++ b/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'; diff --git a/packages/react-select/src/animated/MultiValue.tsx b/packages/react-select/src/animated/MultiValue.tsx index 44a43e7882..3a11c6b699 100644 --- a/packages/react-select/src/animated/MultiValue.tsx +++ b/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'; diff --git a/packages/react-select/src/animated/Placeholder.tsx b/packages/react-select/src/animated/Placeholder.tsx index 283ac1cca6..885ca3ea19 100644 --- a/packages/react-select/src/animated/Placeholder.tsx +++ b/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'; diff --git a/packages/react-select/src/animated/SingleValue.tsx b/packages/react-select/src/animated/SingleValue.tsx index 1c514a5d43..f1095d9b59 100644 --- a/packages/react-select/src/animated/SingleValue.tsx +++ b/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'; diff --git a/packages/react-select/src/animated/ValueContainer.tsx b/packages/react-select/src/animated/ValueContainer.tsx index 752899e750..ac4b825d54 100644 --- a/packages/react-select/src/animated/ValueContainer.tsx +++ b/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'; diff --git a/packages/react-select/src/animated/transitions.tsx b/packages/react-select/src/animated/transitions.tsx index 7c48242ceb..f1cd0bc5e9 100644 --- a/packages/react-select/src/animated/transitions.tsx +++ b/packages/react-select/src/animated/transitions.tsx @@ -1,4 +1,5 @@ -import React, { +import * as React from 'react'; +import { Component, ComponentType, createRef, diff --git a/packages/react-select/src/components/LiveRegion.tsx b/packages/react-select/src/components/LiveRegion.tsx index e21c897404..1f6fe694c8 100644 --- a/packages/react-select/src/components/LiveRegion.tsx +++ b/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 = ( - + {ariaSelected} {ariaContext} - + ); const isInitialFocus = ariaSelection?.action === 'initial-input-focus'; return ( - + {/* We use 'aria-describedby' linked to this component for the initial focus */} {/* action, then for all other actions we use the live region below */} {isInitialFocus && ScreenReaderText} @@ -209,7 +209,7 @@ const LiveRegion = < > {isFocused && !isInitialFocus && ScreenReaderText} - + ); }; diff --git a/packages/react-select/src/internal/ScrollManager.tsx b/packages/react-select/src/internal/ScrollManager.tsx index 659e48808c..802ab1e76f 100644 --- a/packages/react-select/src/internal/ScrollManager.tsx +++ b/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,7 +41,7 @@ export default function ScrollManager({ }; return ( - + {lockEnabled && (
)} {children(targetRef)} - + ); } diff --git a/packages/react-select/src/stateManager.tsx b/packages/react-select/src/stateManager.tsx index 3c2b57387a..3efe781536 100644 --- a/packages/react-select/src/stateManager.tsx +++ b/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> ) => ReactElement; -const StateManagedSelect = React.forwardRef( +const StateManagedSelect = forwardRef( >( props: StateManagerProps, ref: diff --git a/packages/react-select/tsconfig.json b/packages/react-select/tsconfig.json index 9183baf05d..8218bb3062 100644 --- a/packages/react-select/tsconfig.json +++ b/packages/react-select/tsconfig.json @@ -5,8 +5,10 @@ "jsx": "react", "noEmit": true, "strict": true, - "esModuleInterop": true, "forceConsistentCasingInFileNames": true, "resolveJsonModule": true - } + }, + "exclude": [ + "src/__tests__" + ] } From 78d8d241c333b51facdc4e73682800bce982e508 Mon Sep 17 00:00:00 2001 From: Nathan Bierema Date: Mon, 22 Nov 2021 10:01:53 -0500 Subject: [PATCH 2/3] Create popular-rats-kick.md --- .changeset/popular-rats-kick.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/popular-rats-kick.md diff --git a/.changeset/popular-rats-kick.md b/.changeset/popular-rats-kick.md new file mode 100644 index 0000000000..db57669dbe --- /dev/null +++ b/.changeset/popular-rats-kick.md @@ -0,0 +1,5 @@ +--- +"react-select": patch +--- + +Fix usage with esModuleInterop disabled From 888ea531637699817ddba214cc80fca8350ae02a Mon Sep 17 00:00:00 2001 From: Nathan Bierema Date: Mon, 22 Nov 2021 10:09:07 -0500 Subject: [PATCH 3/3] Format --- .changeset/popular-rats-kick.md | 2 +- packages/react-select/tsconfig.json | 4 +--- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/.changeset/popular-rats-kick.md b/.changeset/popular-rats-kick.md index db57669dbe..7775aba947 100644 --- a/.changeset/popular-rats-kick.md +++ b/.changeset/popular-rats-kick.md @@ -1,5 +1,5 @@ --- -"react-select": patch +'react-select': patch --- Fix usage with esModuleInterop disabled diff --git a/packages/react-select/tsconfig.json b/packages/react-select/tsconfig.json index 8218bb3062..b9c2c7175d 100644 --- a/packages/react-select/tsconfig.json +++ b/packages/react-select/tsconfig.json @@ -8,7 +8,5 @@ "forceConsistentCasingInFileNames": true, "resolveJsonModule": true }, - "exclude": [ - "src/__tests__" - ] + "exclude": ["src/__tests__"] }