diff --git a/package.json b/package.json index 9f5514968cb..88341c9c717 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,7 @@ "@types/react-dom": "16.8.4", "@types/react-grid-layout": "0.16.7", "@types/react-redux": "7.1.2", - "@types/react-select": "2.0.15", + "@types/react-select": "3.0.8", "@types/react-test-renderer": "16.9.0", "@types/react-transition-group": "2.0.16", "@types/react-window": "1.7.0", @@ -204,7 +204,7 @@ "@braintree/sanitize-url": "4.0.0", "@grafana/slate-react": "0.22.9-grafana", "@reduxjs/toolkit": "1.2.1", - "@torkelo/react-select": "2.4.1", + "@torkelo/react-select": "3.0.8", "@types/md5": "^2.1.33", "@types/react-loadable": "5.5.2", "@types/react-virtualized-auto-sizer": "1.0.0", diff --git a/packages/grafana-ui/package.json b/packages/grafana-ui/package.json index 8e2656d6baf..360dd5f63e9 100644 --- a/packages/grafana-ui/package.json +++ b/packages/grafana-ui/package.json @@ -27,9 +27,9 @@ "dependencies": { "@grafana/data": "6.7.0-pre", "@grafana/slate-react": "0.22.9-grafana", - "@torkelo/react-select": "2.1.1", + "@torkelo/react-select": "3.0.8", "@types/react-color": "2.17.0", - "@types/react-select": "2.0.15", + "@types/react-select": "3.0.8", "@types/react-table": "7.0.2", "@types/slate": "0.47.1", "@types/slate-react": "0.22.5", diff --git a/packages/grafana-ui/src/components/Forms/Select/SelectBase.tsx b/packages/grafana-ui/src/components/Forms/Select/SelectBase.tsx index 7ab7de0cc56..b1a69ba4380 100644 --- a/packages/grafana-ui/src/components/Forms/Select/SelectBase.tsx +++ b/packages/grafana-ui/src/components/Forms/Select/SelectBase.tsx @@ -1,12 +1,14 @@ import React from 'react'; import { SelectableValue, deprecationWarning } from '@grafana/data'; // @ts-ignore -import { default as ReactSelect, Creatable } from '@torkelo/react-select'; +import { default as ReactSelect } from '@torkelo/react-select'; // @ts-ignore -import { default as ReactAsyncSelect } from '@torkelo/react-select/lib/Async'; +import Creatable from '@torkelo/react-select/creatable'; +// @ts-ignore +import { default as ReactAsyncSelect } from '@torkelo/react-select/async'; import { Icon } from '../../Icon/Icon'; -import { css } from 'emotion'; +import { css, cx } from 'emotion'; import { inputSizes } from '../commonStyles'; import { FormInputSize } from '../types'; import resetSelectStyles from './resetSelectStyles'; @@ -171,7 +173,7 @@ export function SelectBase({ }: SelectBaseProps) { const theme = useTheme(); const styles = getSelectStyles(theme); - let Component: ReactSelect | Creatable = ReactSelect; + let ReactSelectComponent: ReactSelect | Creatable = ReactSelect; const creatableProps: any = {}; let asyncSelectProps: any = {}; @@ -235,13 +237,13 @@ export function SelectBase({ } if (allowCustomValue) { - Component = Creatable; + ReactSelectComponent = Creatable; creatableProps.formatCreateLabel = formatCreateLabel ?? ((input: string) => `Create: ${input}`); } // Instead of having AsyncSelect, as a separate component we render ReactAsyncSelect if (loadOptions) { - Component = ReactAsyncSelect; + ReactSelectComponent = ReactAsyncSelect; asyncSelectProps = { loadOptions, defaultOptions, @@ -249,11 +251,44 @@ export function SelectBase({ } return ( - ( +
+ {props.children} +
+ ), + SelectContainer: (props: any) => ( +
+ {props.children} +
+ ), IndicatorsContainer: IndicatorsContainer, IndicatorSeparator: () => <>, Control: CustomControl, @@ -292,28 +327,6 @@ export function SelectBase({ }} styles={{ ...resetSelectStyles(), - singleValue: () => { - return css` - overflow: hidden; - `; - }, - container: () => { - return css` - position: relative; - ${inputSizes()[size]} - `; - }, - placeholder: () => { - return css` - display: inline-block; - color: hsl(0, 0%, 50%); - position: absolute; - top: 50%; - transform: translateY(-50%); - box-sizing: border-box; - line-height: 1; - `; - }, }} className={widthClass} {...commonSelectProps} diff --git a/packages/grafana-ui/src/components/Forms/Select/SelectOptionGroup.tsx b/packages/grafana-ui/src/components/Forms/Select/SelectOptionGroup.tsx index 465eb973e36..51f4a1c8ca2 100644 --- a/packages/grafana-ui/src/components/Forms/Select/SelectOptionGroup.tsx +++ b/packages/grafana-ui/src/components/Forms/Select/SelectOptionGroup.tsx @@ -1,7 +1,7 @@ import React, { PureComponent } from 'react'; import { css, cx } from 'emotion'; import { GrafanaTheme } from '@grafana/data'; -import { GroupProps } from 'react-select/lib/components/Group'; +import { GroupProps } from 'react-select'; import { stylesFactory, withTheme, selectThemeVariant } from '../../../themes'; import { Themeable } from '../../../types'; diff --git a/packages/grafana-ui/src/components/Forms/Select/SingleValue.tsx b/packages/grafana-ui/src/components/Forms/Select/SingleValue.tsx index dfc4688416b..3feb853eaa9 100644 --- a/packages/grafana-ui/src/components/Forms/Select/SingleValue.tsx +++ b/packages/grafana-ui/src/components/Forms/Select/SingleValue.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { css } from 'emotion'; +import { css, cx } from 'emotion'; // Ignoring because I couldn't get @types/react-select work wih Torkel's fork // @ts-ignore @@ -59,7 +59,14 @@ export const SingleValue = (props: Props) => { return ( -
+
{data.imgUrl ? ( ) : ( diff --git a/packages/grafana-ui/src/components/Select/Select.tsx b/packages/grafana-ui/src/components/Select/Select.tsx index b9589842a18..3b4a1d8c861 100644 --- a/packages/grafana-ui/src/components/Select/Select.tsx +++ b/packages/grafana-ui/src/components/Select/Select.tsx @@ -4,11 +4,13 @@ import React, { PureComponent } from 'react'; // Ignoring because I couldn't get @types/react-select work wih Torkel's fork // @ts-ignore -import { default as ReactSelect, Creatable } from '@torkelo/react-select'; +import { default as ReactSelect } from '@torkelo/react-select'; // @ts-ignore -import { Creatable } from '@torkelo/react-select/lib/creatable'; +import Creatable from '@torkelo/react-select'; // @ts-ignore -import { default as ReactAsyncSelect } from '@torkelo/react-select/lib/Async'; +import { CreatableProps } from 'react-select'; +// @ts-ignore +import { default as ReactAsyncSelect } from '@torkelo/react-select/async'; // @ts-ignore import { components } from '@torkelo/react-select'; diff --git a/packages/grafana-ui/src/components/Select/SelectOption.test.tsx b/packages/grafana-ui/src/components/Select/SelectOption.test.tsx index d91bc9ee6af..381743328cd 100644 --- a/packages/grafana-ui/src/components/Select/SelectOption.test.tsx +++ b/packages/grafana-ui/src/components/Select/SelectOption.test.tsx @@ -1,7 +1,7 @@ import React from 'react'; import renderer from 'react-test-renderer'; import SelectOption from './SelectOption'; -import { OptionProps } from 'react-select/lib/components/Option'; +import { OptionProps } from 'react-select/src/components/Option'; // @ts-ignore const model: OptionProps = { diff --git a/packages/grafana-ui/src/components/Select/SelectOption.tsx b/packages/grafana-ui/src/components/Select/SelectOption.tsx index 249183eba0c..b3606797918 100644 --- a/packages/grafana-ui/src/components/Select/SelectOption.tsx +++ b/packages/grafana-ui/src/components/Select/SelectOption.tsx @@ -3,7 +3,7 @@ import React from 'react'; // Ignoring because I couldn't get @types/react-select work wih Torkel's fork // @ts-ignore import { components } from '@torkelo/react-select'; -import { OptionProps } from 'react-select/lib/components/Option'; +import { OptionProps } from 'react-select'; // https://github.com/JedWatson/react-select/issues/3038 export interface ExtendedOptionProps extends OptionProps { diff --git a/packages/grafana-ui/src/components/Select/__snapshots__/SelectOption.test.tsx.snap b/packages/grafana-ui/src/components/Select/__snapshots__/SelectOption.test.tsx.snap index 95c15ab013f..7c754739653 100644 --- a/packages/grafana-ui/src/components/Select/__snapshots__/SelectOption.test.tsx.snap +++ b/packages/grafana-ui/src/components/Select/__snapshots__/SelectOption.test.tsx.snap @@ -2,6 +2,7 @@ exports[`SelectOption renders correctly 1`] = `
Select a team
Select user