🤖 Merge PR DefinitelyTyped#50879 [react-select] Expand styles from CS…

…SProperties to CSSObject by @Methuselah96 * [react-select] Expand styles from CSSProperties to CSSObject * Not that one
Nevon · Jan 28, 2021 · 447543d · 447543d
1 parent 4ed1cd4
commit 447543d
Show file tree

Hide file tree

Showing 15 changed files with 83 additions and 61 deletions.
diff --git a/types/react-select/package.json b/types/react-select/package.json
@@ -0,0 +1,6 @@
+{
+    "private": true,
+    "dependencies": {
+        "@emotion/serialize": "^1.0.0"
+    }
+}
diff --git a/types/react-select/src/components/Control.d.ts b/types/react-select/src/components/Control.d.ts
@@ -1,4 +1,5 @@
 import { ComponentType, ReactNode, Ref as ElementRef } from 'react';
+import { CSSObject } from '@emotion/serialize';
 
 import { borderRadius, colors, spacing } from '../theme';
 import { CommonProps, GroupTypeBase, OptionTypeBase, PropsWithStyles } from '../types';
@@ -28,7 +29,7 @@ export type ControlProps<
         };
     };
 
-export function css(state: State): React.CSSProperties;
+export function css(state: State): CSSObject;
 
 declare const Control: ComponentType<ControlProps<any, boolean>>;
 

diff --git a/types/react-select/src/components/Group.d.ts b/types/react-select/src/components/Group.d.ts
@@ -1,4 +1,5 @@
 import { ReactNode, ComponentType } from 'react';
+import { CSSObject } from '@emotion/serialize';
 
 import { spacing } from '../theme';
 import { CommonProps, GroupTypeBase, OptionTypeBase } from '../types';
@@ -19,7 +20,7 @@ export type GroupProps<
     GroupType extends GroupTypeBase<OptionType> = GroupTypeBase<OptionType>
 > = CommonProps<OptionType, IsMulti, GroupType> & ComponentProps;
 
-export function groupCSS(): React.CSSProperties;
+export function groupCSS(): CSSObject;
 
 export const Group: ComponentType<GroupProps<any, boolean>>;
 
@@ -29,7 +30,7 @@ export type GroupHeadingProps<
     GroupType extends GroupTypeBase<OptionType> = GroupTypeBase<OptionType>
 > = CommonProps<OptionType, IsMulti, GroupType> & Pick<ComponentProps, 'children'>;
 
-export function groupHeadingCSS(): React.CSSProperties;
+export function groupHeadingCSS(): CSSObject;
 
 export const GroupHeading: ComponentType<any>;
 

diff --git a/types/react-select/src/components/Input.d.ts b/types/react-select/src/components/Input.d.ts
@@ -1,4 +1,5 @@
 import { ComponentType, Ref as ElementRef } from 'react';
+import { CSSObject } from '@emotion/serialize';
 
 import { colors, spacing } from '../theme';
 
@@ -15,7 +16,7 @@ export type InputProps = PropsWithStyles & {
     className?: string;
 };
 
-export function inputCSS(props: InputProps): React.CSSProperties;
+export function inputCSS(props: InputProps): CSSObject;
 export function inputStyle(isHidden: boolean): React.CSSProperties;
 
 export const Input: ComponentType<InputProps>;

diff --git a/types/react-select/src/components/Menu.d.ts b/types/react-select/src/components/Menu.d.ts
@@ -1,5 +1,6 @@
 import { Component, ReactElement, Ref as ElementRef, ReactNode, ComponentType } from 'react';
 import { createPortal } from 'react-dom';
+import { CSSObject } from '@emotion/serialize';
 
 import { animatedScrollTo, getBoundingClientObj, RectType, getScrollParent, getScrollTop, scrollTo } from '../utils';
 import { borderRadius, colors, spacing } from '../theme';
@@ -55,7 +56,7 @@ export type MenuProps<
     menuShouldScrollIntoView: boolean;
 };
 
-export function menuCSS(state: MenuState): React.CSSProperties;
+export function menuCSS(state: MenuState): CSSObject;
 
 export class Menu<
     OptionType extends OptionTypeBase,
@@ -96,15 +97,15 @@ export type MenuListComponentProps<
     GroupType extends GroupTypeBase<OptionType> = GroupTypeBase<OptionType>
 > = CommonProps<OptionType, IsMulti, GroupType> & MenuListProps & MenuListState;
 
-export function menuListCSS(state: MenuState): React.CSSProperties;
+export function menuListCSS(state: MenuState): CSSObject;
 export const MenuList: ComponentType<MenuListComponentProps<any, boolean>>;
 
 // ==============================
 // Menu Notices
 // ==============================
 
-export function noOptionsMessageCSS(): React.CSSProperties;
-export function loadingMessageCSS(): React.CSSProperties;
+export function noOptionsMessageCSS(): CSSObject;
+export function loadingMessageCSS(): CSSObject;
 
 export type NoticeProps<
     OptionType extends OptionTypeBase,
@@ -151,7 +152,7 @@ interface PortalStyleArgs {
     rect: RectType;
 }
 
-export function menuPortalCSS(args: PortalStyleArgs): React.CSSProperties;
+export function menuPortalCSS(args: PortalStyleArgs): CSSObject;
 
 export class MenuPortal<
     OptionType extends OptionTypeBase,

diff --git a/types/react-select/src/components/MultiValue.d.ts b/types/react-select/src/components/MultiValue.d.ts
@@ -1,4 +1,5 @@
 import { ComponentType, Component, ReactNode } from 'react';
+import { CSSObject } from '@emotion/serialize';
 
 import { borderRadius, colors, spacing } from '../theme';
 import { CommonProps, GroupTypeBase, OptionTypeBase } from '../types';
@@ -21,9 +22,9 @@ export type MultiValueProps<
     };
 };
 
-export function multiValueCSS(): React.CSSProperties;
-export function multiValueLabelCSS(props: MultiValueProps<any>): React.CSSProperties;
-export function multiValueRemoveCSS(props: MultiValueProps<any>): React.CSSProperties;
+export function multiValueCSS(): CSSObject;
+export function multiValueLabelCSS(props: MultiValueProps<any>): CSSObject;
+export function multiValueRemoveCSS(props: MultiValueProps<any>): CSSObject;
 
 export interface MultiValueGenericProps<OptionType extends OptionTypeBase> {
     children: ReactNode;

diff --git a/types/react-select/src/components/Option.d.ts b/types/react-select/src/components/Option.d.ts
@@ -1,4 +1,5 @@
 import { ComponentType, ReactNode, MouseEventHandler } from 'react';
+import { CSSObject } from '@emotion/serialize';
 
 import { colors, spacing } from '../theme';
 import { CommonProps, PropsWithStyles, InnerRef, OptionTypeBase, GroupTypeBase } from '../types';
@@ -41,7 +42,7 @@ export type OptionProps<
         data: any;
     };
 
-export function optionCSS(state: State): React.CSSProperties;
+export function optionCSS(state: State): CSSObject;
 
 export const Option: ComponentType<OptionProps<any, boolean>>;
 

diff --git a/types/react-select/src/components/Placeholder.d.ts b/types/react-select/src/components/Placeholder.d.ts
@@ -1,4 +1,5 @@
 import { ComponentType, CSSProperties, ReactNode } from 'react';
+import { CSSObject } from '@emotion/serialize';
 
 import { CommonProps, GroupTypeBase, OptionTypeBase } from '../types';
 
@@ -15,7 +16,7 @@ export interface PlaceholderProps<
     innerProps: { style: CSSProperties };
 }
 
-export function placeholderCSS(): React.CSSProperties;
+export function placeholderCSS(): CSSObject;
 
 export const Placeholder: ComponentType<PlaceholderProps<any, boolean>>;
 

diff --git a/types/react-select/src/components/SingleValue.d.ts b/types/react-select/src/components/SingleValue.d.ts
@@ -1,4 +1,5 @@
 import { ComponentType, ReactNode } from 'react';
+import { CSSObject } from '@emotion/serialize';
 import { colors, spacing } from '../theme';
 import { CommonProps, GroupTypeBase, OptionTypeBase } from '../types';
 
@@ -19,7 +20,7 @@ export type SingleValueProps<
     GroupType extends GroupTypeBase<OptionType> = GroupTypeBase<OptionType>
 > = CommonProps<OptionType, false, GroupType> & ValueProps<OptionType> & State;
 
-export function css(props: SingleValueProps<any>): React.CSSProperties;
+export function css(props: SingleValueProps<any>): CSSObject;
 
 export const SingleValue: ComponentType<SingleValueProps<any>>;
 

diff --git a/types/react-select/src/components/containers.d.ts b/types/react-select/src/components/containers.d.ts
@@ -1,4 +1,5 @@
 import { Component, ReactNode, ComponentType } from 'react';
+import { CSSObject } from '@emotion/serialize';
 import { spacing } from '../theme';
 import { CommonProps, GroupTypeBase, KeyboardEventHandler, OptionTypeBase } from '../types';
 
@@ -24,7 +25,7 @@ export type ContainerProps<
         /** Inner props to be passed down to the container. */
         innerProps: { onKeyDown: KeyboardEventHandler };
     };
-export function containerCSS(state: ContainerState): React.CSSProperties;
+export function containerCSS(state: ContainerState): CSSObject;
 export const SelectContainer: ComponentType<ContainerProps<any, boolean>>;
 
 // ==============================
@@ -43,7 +44,7 @@ export type ValueContainerProps<
     /** The children to be rendered. */
     children: ReactNode;
 };
-export function valueContainerCSS(): React.CSSProperties;
+export function valueContainerCSS(): CSSObject;
 export class ValueContainer extends Component<ValueContainerProps<any, boolean>> {}
 
 // ==============================
@@ -67,5 +68,5 @@ export type IndicatorContainerProps<
         children: ReactNode;
     };
 
-export function indicatorsContainerCSS(): React.CSSProperties;
+export function indicatorsContainerCSS(): CSSObject;
 export const IndicatorsContainer: ComponentType<IndicatorContainerProps<any, boolean>>;
diff --git a/types/react-select/src/components/indicators.d.ts b/types/react-select/src/components/indicators.d.ts
@@ -1,4 +1,5 @@
 import { ComponentType, ReactElement as ElementType, SVGProps, ReactSVGElement } from 'react';
+import { CSSObject } from '@emotion/serialize';
 
 import { colors, spacing } from '../theme';
 import { CommonProps, GroupTypeBase, OptionTypeBase } from '../types';
@@ -31,7 +32,7 @@ export type IndicatorProps<
     isDisabled: boolean;
 };
 
-export type baseCSS = (props: IndicatorProps<any, boolean>) => React.CSSProperties;
+export type baseCSS = (props: IndicatorProps<any, boolean>) => CSSObject;
 
 export const dropdownIndicatorCSS: baseCSS;
 export const DropdownIndicator: ComponentType<IndicatorProps<any, boolean>>;
@@ -47,15 +48,15 @@ export interface SeparatorState {
     isDisabled: boolean;
 }
 
-export function indicatorSeparatorCSS(state: SeparatorState): React.CSSProperties;
+export function indicatorSeparatorCSS(state: SeparatorState): CSSObject;
 
 export const IndicatorSeparator: ComponentType<IndicatorProps<any, boolean>>;
 
 // ==============================
 // Loading
 // ==============================
 
-export function loadingIndicatorCSS(state: { isFocused: boolean; size: number }): React.CSSProperties;
+export function loadingIndicatorCSS(state: { isFocused: boolean; size: number }): CSSObject;
 
 /** @deprecated Use `LoadingIndicatorProps` instead. */
 export type LoadingIconProps<

diff --git a/types/react-select/src/styles.d.ts b/types/react-select/src/styles.d.ts
@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
+import { CSSObject } from '@emotion/serialize';
 import { ContainerProps, IndicatorContainerProps, ValueContainerProps } from './components/containers';
 import { ControlProps } from './components/Control';
 import { GroupProps, GroupHeadingProps } from './components/Group';
@@ -17,46 +17,43 @@ export interface Props {
 }
 
 /** @deprecated - Unused and will not be exported in next major version */
-export type StylesConfigFunction<Props = any> = (base: CSSProperties, props: Props) => CSSProperties;
+export type StylesConfigFunction<Props = any> = (base: CSSObject, props: Props) => CSSObject;
 
 export interface Styles<
     OptionType extends OptionTypeBase,
     IsMulti extends boolean,
     GroupType extends GroupTypeBase<OptionType> = GroupTypeBase<OptionType>
 > {
-    clearIndicator?(base: CSSProperties, props: IndicatorProps<OptionType, IsMulti, GroupType>): CSSProperties;
-    container?(base: CSSProperties, props: ContainerProps<OptionType, IsMulti, GroupType>): CSSProperties;
-    control?(base: CSSProperties, props: ControlProps<OptionType, IsMulti, GroupType>): CSSProperties;
-    dropdownIndicator?(base: CSSProperties, props: IndicatorProps<OptionType, IsMulti, GroupType>): CSSProperties;
-    group?(base: CSSProperties, props: GroupProps<OptionType, IsMulti, GroupType>): CSSProperties;
-    groupHeading?(base: CSSProperties, props: GroupHeadingProps<OptionType, IsMulti, GroupType>): CSSProperties;
-    indicatorsContainer?(
-        base: CSSProperties,
-        props: IndicatorContainerProps<OptionType, IsMulti, GroupType>,
-    ): CSSProperties;
-    indicatorSeparator?(base: CSSProperties, props: IndicatorProps<OptionType, IsMulti, GroupType>): CSSProperties;
-    input?: (base: CSSProperties, props: InputProps) => CSSProperties;
-    loadingIndicator?(base: CSSProperties, props: LoadingIndicatorProps<OptionType, IsMulti, GroupType>): CSSProperties;
-    loadingMessage?(base: CSSProperties, props: NoticeProps<OptionType, IsMulti, GroupType>): CSSProperties;
-    menu?(base: CSSProperties, props: MenuProps<OptionType, IsMulti, GroupType>): CSSProperties;
-    menuList?(base: CSSProperties, props: MenuListComponentProps<OptionType, IsMulti, GroupType>): CSSProperties;
-    menuPortal?(base: CSSProperties, props: MenuPortalProps<OptionType, IsMulti, GroupType>): CSSProperties;
-    multiValue?(base: CSSProperties, props: MultiValueProps<OptionType, GroupType>): CSSProperties;
-    multiValueLabel?(base: CSSProperties, props: MultiValueProps<OptionType, GroupType>): CSSProperties;
-    multiValueRemove?(base: CSSProperties, props: MultiValueRemoveProps<OptionType, GroupType>): CSSProperties;
-    noOptionsMessage?(base: CSSProperties, props: NoticeProps<OptionType, IsMulti, GroupType>): CSSProperties;
-    option?(base: CSSProperties, props: OptionProps<OptionType, IsMulti, GroupType>): CSSProperties;
-    placeholder?(base: CSSProperties, props: PlaceholderProps<OptionType, IsMulti, GroupType>): CSSProperties;
-    singleValue?(base: CSSProperties, props: SingleValueProps<OptionType, GroupType>): CSSProperties;
-    valueContainer?(base: CSSProperties, props: ValueContainerProps<OptionType, IsMulti, GroupType>): CSSProperties;
+    clearIndicator?(base: CSSObject, props: IndicatorProps<OptionType, IsMulti, GroupType>): CSSObject;
+    container?(base: CSSObject, props: ContainerProps<OptionType, IsMulti, GroupType>): CSSObject;
+    control?(base: CSSObject, props: ControlProps<OptionType, IsMulti, GroupType>): CSSObject;
+    dropdownIndicator?(base: CSSObject, props: IndicatorProps<OptionType, IsMulti, GroupType>): CSSObject;
+    group?(base: CSSObject, props: GroupProps<OptionType, IsMulti, GroupType>): CSSObject;
+    groupHeading?(base: CSSObject, props: GroupHeadingProps<OptionType, IsMulti, GroupType>): CSSObject;
+    indicatorsContainer?(base: CSSObject, props: IndicatorContainerProps<OptionType, IsMulti, GroupType>): CSSObject;
+    indicatorSeparator?(base: CSSObject, props: IndicatorProps<OptionType, IsMulti, GroupType>): CSSObject;
+    input?: (base: CSSObject, props: InputProps) => CSSObject;
+    loadingIndicator?(base: CSSObject, props: LoadingIndicatorProps<OptionType, IsMulti, GroupType>): CSSObject;
+    loadingMessage?(base: CSSObject, props: NoticeProps<OptionType, IsMulti, GroupType>): CSSObject;
+    menu?(base: CSSObject, props: MenuProps<OptionType, IsMulti, GroupType>): CSSObject;
+    menuList?(base: CSSObject, props: MenuListComponentProps<OptionType, IsMulti, GroupType>): CSSObject;
+    menuPortal?(base: CSSObject, props: MenuPortalProps<OptionType, IsMulti, GroupType>): CSSObject;
+    multiValue?(base: CSSObject, props: MultiValueProps<OptionType, GroupType>): CSSObject;
+    multiValueLabel?(base: CSSObject, props: MultiValueProps<OptionType, GroupType>): CSSObject;
+    multiValueRemove?(base: CSSObject, props: MultiValueRemoveProps<OptionType, GroupType>): CSSObject;
+    noOptionsMessage?(base: CSSObject, props: NoticeProps<OptionType, IsMulti, GroupType>): CSSObject;
+    option?(base: CSSObject, props: OptionProps<OptionType, IsMulti, GroupType>): CSSObject;
+    placeholder?(base: CSSObject, props: PlaceholderProps<OptionType, IsMulti, GroupType>): CSSObject;
+    singleValue?(base: CSSObject, props: SingleValueProps<OptionType, GroupType>): CSSObject;
+    valueContainer?(base: CSSObject, props: ValueContainerProps<OptionType, IsMulti, GroupType>): CSSObject;
 }
 
 export type StylesConfig<
     OptionType extends OptionTypeBase,
     IsMulti extends boolean,
     GroupType extends GroupTypeBase<OptionType> = GroupTypeBase<OptionType>
 > = Partial<Styles<OptionType, IsMulti, GroupType>>;
-export type GetStyles = (a: string, b: Props) => CSSProperties;
+export type GetStyles = (a: string, b: Props) => CSSObject;
 
 export const defaultStyles: Styles<any, false>;
 

diff --git a/types/react-select/test/Header.tsx b/types/react-select/test/Header.tsx
@@ -1,9 +1,8 @@
 import * as React from 'react';
-import Select from 'react-select';
-import { ControlProps } from 'react-select/src/components/Control';
+import Select, { ControlProps, OptionTypeBase, StylesConfig } from 'react-select';
 
-const headerSelectStyles = {
-    control: (base: React.CSSProperties, { isFocused }: ControlProps<{}, boolean>) => ({
+const headerSelectStyles: StylesConfig<OptionTypeBase, boolean> = {
+    control: (base, { isFocused }) => ({
         ...base,
         backgroundClip: 'padding-box',
         borderColor: 'rgba(0,0,0,0.1)',

diff --git a/types/react-select/test/examples/StyledMulti.tsx b/types/react-select/test/examples/StyledMulti.tsx
@@ -19,6 +19,11 @@ const colourStyles: StylesConfig<ColourOption, true> = {
                     : 'black'
                 : data.color,
             cursor: isDisabled ? 'not-allowed' : 'default',
+
+            ':active': {
+                ...styles[':active'],
+                backgroundColor: !isDisabled && (isSelected ? data.color : color.alpha(0.3).css()),
+            },
         };
     },
     multiValue: (styles, { data }) => {

diff --git a/types/react-select/test/examples/StyledSingle.tsx b/types/react-select/test/examples/StyledSingle.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import * as chroma from 'chroma-js';
 
-import { colourOptions } from '../data';
-import Select from 'react-select';
+import { ColourOption, colourOptions } from '../data';
+import Select, { StylesConfig } from 'react-select';
 
 const dot = (color = '#ccc') => ({
     alignItems: 'center',
@@ -19,9 +19,9 @@ const dot = (color = '#ccc') => ({
     },
 });
 
-const colourStyles = {
-    control: (styles: any) => ({ ...styles, backgroundColor: 'white' }),
-    option: (styles: any, { data, isDisabled, isFocused, isSelected }: any) => {
+const colourStyles: StylesConfig<ColourOption, false> = {
+    control: styles => ({ ...styles, backgroundColor: 'white' }),
+    option: (styles, { data, isDisabled, isFocused, isSelected }) => {
         const color = chroma(data.color);
         return {
             ...styles,
@@ -34,11 +34,16 @@ const colourStyles = {
                     : 'black'
                 : data.color,
             cursor: isDisabled ? 'not-allowed' : 'default',
+
+            ':active': {
+                ...styles[':active'],
+                backgroundColor: !isDisabled && (isSelected ? data.color : color.alpha(0.3).css()),
+            },
         };
     },
-    input: (styles: any) => ({ ...styles, ...dot() }),
-    placeholder: (styles: any) => ({ ...styles, ...dot() }),
-    singleValue: (styles: any, { data }: any) => ({ ...styles, ...dot(data.color) }),
+    input: styles => ({ ...styles, ...dot() }),
+    placeholder: styles => ({ ...styles, ...dot() }),
+    singleValue: (styles, { data }) => ({ ...styles, ...dot(data.color) }),
 };
 
 export default () => (