@atlaskit/select 15.7.0 → 15.7.2

package/AsyncCreatableSelect/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/AsyncCreatableSelect.js",
   "module:es2019": "../dist/es2019/AsyncCreatableSelect.js",
   "sideEffects": false,
-  "types": "../dist/types/AsyncCreatableSelect.d.ts"
+  "types": "../dist/types/AsyncCreatableSelect.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/AsyncCreatableSelect.d.ts"
+      ]
+    }
+  }
 }

package/AsyncSelect/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/AsyncSelect.js",
   "module:es2019": "../dist/es2019/AsyncSelect.js",
   "sideEffects": false,
-  "types": "../dist/types/AsyncSelect.d.ts"
+  "types": "../dist/types/AsyncSelect.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/AsyncSelect.d.ts"
+      ]
+    }
+  }
 }

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/select
 
+## 15.7.2
+
+### Patch Changes
+
+- [`bedbdec0e82`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bedbdec0e82) - Update hover state appearance of subtle Textarea, Textfield and Select components to match the hover states of their default counterparts.
+
+## 15.7.1
+
+### Patch Changes
+
+- [`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade Typescript from `4.3.5` to `4.5.5`
+
 ## 15.7.0
 
 ### Minor Changes

package/CheckboxSelect/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/CheckboxSelect.js",
   "module:es2019": "../dist/es2019/CheckboxSelect.js",
   "sideEffects": false,
-  "types": "../dist/types/CheckboxSelect.d.ts"
+  "types": "../dist/types/CheckboxSelect.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/CheckboxSelect.d.ts"
+      ]
+    }
+  }
 }

package/CountrySelect/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/CountrySelect.js",
   "module:es2019": "../dist/es2019/CountrySelect.js",
   "sideEffects": false,
-  "types": "../dist/types/CountrySelect.d.ts"
+  "types": "../dist/types/CountrySelect.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/CountrySelect.d.ts"
+      ]
+    }
+  }
 }

package/CreatableSelect/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/CreatableSelect.js",
   "module:es2019": "../dist/es2019/CreatableSelect.js",
   "sideEffects": false,
-  "types": "../dist/types/CreatableSelect.d.ts"
+  "types": "../dist/types/CreatableSelect.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/CreatableSelect.d.ts"
+      ]
+    }
+  }
 }

package/RadioSelect/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/RadioSelect.js",
   "module:es2019": "../dist/es2019/RadioSelect.js",
   "sideEffects": false,
-  "types": "../dist/types/RadioSelect.d.ts"
+  "types": "../dist/types/RadioSelect.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/RadioSelect.d.ts"
+      ]
+    }
+  }
 }

package/Select/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/Select.js",
   "module:es2019": "../dist/es2019/Select.js",
   "sideEffects": false,
-  "types": "../dist/types/Select.d.ts"
+  "types": "../dist/types/Select.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/Select.d.ts"
+      ]
+    }
+  }
 }

package/createSelect/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/createSelect.js",
   "module:es2019": "../dist/es2019/createSelect.js",
   "sideEffects": false,
-  "types": "../dist/types/createSelect.d.ts"
+  "types": "../dist/types/createSelect.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/createSelect.d.ts"
+      ]
+    }
+  }
 }

package/dist/cjs/Select.js

@@ -14,7 +14,7 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 var _createSelect = _interopRequireDefault(require("./createSelect"));
 
 var packageName = "@atlaskit/select";
-var packageVersion = "15.7.0";
+var packageVersion = "15.7.2";
 var SelectWithoutAnalytics = (0, _createSelect.default)(_reactSelect.default);
 exports.SelectWithoutAnalytics = SelectWithoutAnalytics;
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');

package/dist/cjs/styles.js

@@ -75,7 +75,7 @@ function baseStyles(validationState) {
       if (appearance === 'subtle') {
         borderColor = isFocused ? "var(--ds-border-focused, ".concat(_colors.B100, ")") : 'transparent';
         backgroundColor = isFocused ? "var(--ds-surface, ".concat(_colors.N0, ")") : 'transparent';
-        backgroundColorHover = isFocused ? "var(--ds-surface, ".concat(_colors.N0, ")") : "var(--ds-surface, ".concat(_colors.N30, ")");
+        backgroundColorHover = isFocused ? "var(--ds-background-input-pressed, ".concat(_colors.N0, ")") : "var(--ds-background-input-hovered, ".concat(_colors.N30, ")");
       }
 
       if (appearance === 'none') {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/select",
-	"version": "15.7.0",
+	"version": "15.7.2",
 	"sideEffects": false
 }

package/dist/es2019/Select.js

@@ -2,7 +2,7 @@ import Select from 'react-select';
 import { withAnalyticsEvents, withAnalyticsContext, createAndFireEvent } from '@atlaskit/analytics-next';
 import createSelect from './createSelect';
 const packageName = "@atlaskit/select";
-const packageVersion = "15.7.0";
+const packageVersion = "15.7.2";
 export const SelectWithoutAnalytics = createSelect(Select);
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 export default withAnalyticsContext({

package/dist/es2019/styles.js

@@ -53,7 +53,7 @@ export default function baseStyles(validationState, isCompact = false, appearanc
       if (appearance === 'subtle') {
         borderColor = isFocused ? `var(--ds-border-focused, ${B100})` : 'transparent';
         backgroundColor = isFocused ? `var(--ds-surface, ${N0})` : 'transparent';
-        backgroundColorHover = isFocused ? `var(--ds-surface, ${N0})` : `var(--ds-surface, ${N30})`;
+        backgroundColorHover = isFocused ? `var(--ds-background-input-pressed, ${N0})` : `var(--ds-background-input-hovered, ${N30})`;
       }
 
       if (appearance === 'none') {

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/select",
-	"version": "15.7.0",
+	"version": "15.7.2",
 	"sideEffects": false
 }

package/dist/esm/Select.js

@@ -2,7 +2,7 @@ import Select from 'react-select';
 import { withAnalyticsEvents, withAnalyticsContext, createAndFireEvent } from '@atlaskit/analytics-next';
 import createSelect from './createSelect';
 var packageName = "@atlaskit/select";
-var packageVersion = "15.7.0";
+var packageVersion = "15.7.2";
 export var SelectWithoutAnalytics = createSelect(Select);
 var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 export default withAnalyticsContext({

package/dist/esm/styles.js

@@ -63,7 +63,7 @@ export default function baseStyles(validationState) {
       if (appearance === 'subtle') {
         borderColor = isFocused ? "var(--ds-border-focused, ".concat(B100, ")") : 'transparent';
         backgroundColor = isFocused ? "var(--ds-surface, ".concat(N0, ")") : 'transparent';
-        backgroundColorHover = isFocused ? "var(--ds-surface, ".concat(N0, ")") : "var(--ds-surface, ".concat(N30, ")");
+        backgroundColorHover = isFocused ? "var(--ds-background-input-pressed, ".concat(N0, ")") : "var(--ds-background-input-hovered, ".concat(N30, ")");
       }
 
       if (appearance === 'none') {

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/select",
-	"version": "15.7.0",
+	"version": "15.7.2",
 	"sideEffects": false
 }

package/dist/types-ts4.0/AsyncCreatableSelect.d.ts

@@ -0,0 +1,45 @@
+/// <reference types="react" />
+declare const _default: {
+    new <Option = import("./types").OptionType, IsMulti extends boolean = false>(props: import("./types").SelectProps<Option, IsMulti>): {
+        components: Partial<import("react-select/src/components").SelectComponents<Option, IsMulti, import("react-select").GroupTypeBase<Option>>>;
+        select: import("react-select").default<Option, false, import("react-select").GroupTypeBase<Option>, import("react-select/src/Select").default<Option, false, import("react-select").GroupTypeBase<Option>>> | null;
+        UNSAFE_componentWillReceiveProps(nextProps: import("./types").SelectProps<Option, IsMulti>): void;
+        cacheComponents: (components: Partial<import("react-select/src/components").SelectComponents<Option, IsMulti, import("react-select").GroupTypeBase<Option>>>) => void;
+        focus(): void;
+        blur(): void;
+        onSelectRef: (ref: import("react-select").default<Option, false, import("react-select").GroupTypeBase<Option>, import("react-select/src/Select").default<Option, false, import("react-select").GroupTypeBase<Option>>>) => void;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("./types").SelectProps<Option, IsMulti>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callBack?: (() => void) | undefined): void;
+        readonly props: Readonly<import("./types").SelectProps<Option, IsMulti>> & Readonly<{
+            children?: import("react").ReactNode;
+        }>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: import("react").ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<import("./types").SelectProps<Option, IsMulti>>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<import("./types").SelectProps<Option, IsMulti>>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti>>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    defaultProps: {
+        validationState: string;
+        isInvalid: boolean;
+        spacing: string;
+        onClickPreventDefault: boolean;
+        tabSelectsValue: boolean;
+        components: {};
+        styles: {};
+    };
+    contextType?: import("react").Context<any> | undefined;
+};
+export default _default;

package/dist/types-ts4.0/AsyncSelect.d.ts

@@ -0,0 +1,45 @@
+/// <reference types="react" />
+declare const _default: {
+    new <Option = import("./types").OptionType, IsMulti extends boolean = false>(props: import("./types").SelectProps<Option, IsMulti>): {
+        components: Partial<import("react-select/src/components").SelectComponents<Option, IsMulti, import("react-select").GroupTypeBase<Option>>>;
+        select: import("react-select").default<Option, false, import("react-select").GroupTypeBase<Option>, import("react-select/src/Select").default<Option, false, import("react-select").GroupTypeBase<Option>>> | null;
+        UNSAFE_componentWillReceiveProps(nextProps: import("./types").SelectProps<Option, IsMulti>): void;
+        cacheComponents: (components: Partial<import("react-select/src/components").SelectComponents<Option, IsMulti, import("react-select").GroupTypeBase<Option>>>) => void;
+        focus(): void;
+        blur(): void;
+        onSelectRef: (ref: import("react-select").default<Option, false, import("react-select").GroupTypeBase<Option>, import("react-select/src/Select").default<Option, false, import("react-select").GroupTypeBase<Option>>>) => void;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("./types").SelectProps<Option, IsMulti>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callBack?: (() => void) | undefined): void;
+        readonly props: Readonly<import("./types").SelectProps<Option, IsMulti>> & Readonly<{
+            children?: import("react").ReactNode;
+        }>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: import("react").ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<import("./types").SelectProps<Option, IsMulti>>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<import("./types").SelectProps<Option, IsMulti>>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti>>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    defaultProps: {
+        validationState: string;
+        isInvalid: boolean;
+        spacing: string;
+        onClickPreventDefault: boolean;
+        tabSelectsValue: boolean;
+        components: {};
+        styles: {};
+    };
+    contextType?: import("react").Context<any> | undefined;
+};
+export default _default;

package/dist/types-ts4.0/CheckboxSelect.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { SelectProps, OptionType } from './types';
+declare const CheckboxSelect: ({ components, ...props }: SelectProps<OptionType, true>) => JSX.Element;
+export default CheckboxSelect;

package/dist/types-ts4.0/CountrySelect.d.ts

@@ -0,0 +1,7 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { groupedCountries } from './data/countries';
+import { SelectProps } from './types';
+declare type Country = typeof groupedCountries[number]['options'][number];
+declare const CountrySelect: (props: SelectProps<Country>) => jsx.JSX.Element;
+export default CountrySelect;

package/dist/types-ts4.0/CreatableSelect.d.ts

@@ -0,0 +1,45 @@
+/// <reference types="react" />
+declare const _default: {
+    new <Option = import("./types").OptionType, IsMulti extends boolean = false>(props: import("./types").SelectProps<Option, IsMulti>): {
+        components: Partial<import("react-select/src/components").SelectComponents<Option, IsMulti, import("react-select").GroupTypeBase<Option>>>;
+        select: import("react-select").default<Option, false, import("react-select").GroupTypeBase<Option>, import("react-select/src/Select").default<Option, false, import("react-select").GroupTypeBase<Option>>> | null;
+        UNSAFE_componentWillReceiveProps(nextProps: import("./types").SelectProps<Option, IsMulti>): void;
+        cacheComponents: (components: Partial<import("react-select/src/components").SelectComponents<Option, IsMulti, import("react-select").GroupTypeBase<Option>>>) => void;
+        focus(): void;
+        blur(): void;
+        onSelectRef: (ref: import("react-select").default<Option, false, import("react-select").GroupTypeBase<Option>, import("react-select/src/Select").default<Option, false, import("react-select").GroupTypeBase<Option>>>) => void;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("./types").SelectProps<Option, IsMulti>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callBack?: (() => void) | undefined): void;
+        readonly props: Readonly<import("./types").SelectProps<Option, IsMulti>> & Readonly<{
+            children?: import("react").ReactNode;
+        }>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: import("react").ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<import("./types").SelectProps<Option, IsMulti>>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<import("./types").SelectProps<Option, IsMulti>>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti>>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    defaultProps: {
+        validationState: string;
+        isInvalid: boolean;
+        spacing: string;
+        onClickPreventDefault: boolean;
+        tabSelectsValue: boolean;
+        components: {};
+        styles: {};
+    };
+    contextType?: import("react").Context<any> | undefined;
+};
+export default _default;

package/dist/types-ts4.0/PopupSelect/PopupSelect.d.ts

@@ -0,0 +1,140 @@
+import React, { PureComponent, ReactNode } from 'react';
+import Select from 'react-select';
+import { PopperProps } from 'react-popper';
+import { OptionType, ActionMeta, ReactSelectProps, StylesConfig, ValueType, ValidationState } from '../types';
+import { UnbindFn } from 'bind-event-listener';
+declare type defaultModifiers = 'offset' | 'preventOverflow';
+declare type PopperPropsNoChildren<Modifiers> = Omit<PopperProps<Modifiers>, 'children'>;
+interface PopupSelectTriggerProps {
+    ref: any;
+    'aria-haspopup': 'true';
+    'aria-expanded': boolean;
+    'aria-controls'?: string;
+}
+declare type ModifierList = 'offset' | 'computeStyles' | 'preventOverflow' | 'handleFlipStyle' | 'flip' | 'popperOffsets' | 'arrow' | 'hide' | string;
+export interface PopupSelectProps<Option = OptionType, IsMulti extends boolean = false, Modifiers = ModifierList> extends ReactSelectProps<Option, IsMulti> {
+    /**
+     * Defines whether the menu should close when selected. Defaults to "true"
+     */
+    closeMenuOnSelect?: boolean;
+    /**
+     * The footer content shown at the bottom of the Popup, underneath the Select options
+     */
+    footer?: ReactNode;
+    /**
+      The props passed down to React Popper.
+  
+      Use these to override the default positioning strategy, behaviour and placement used by this library.
+      For more information, see the [React Popper documentation](https://popper.js.org/react-popper/v2/render-props).
+  
+     */
+    popperProps?: PopperPropsNoChildren<Modifiers>;
+    /**
+     * The maximum number of options the select can contain without rendering the search field. Defaults to 5.
+     */
+    searchThreshold?: number;
+    /**
+     * If false, renders a select with no search field. If true, renders a search field in the select when the
+     * number of options exceeds the `searchThreshold`. Defaults to true.
+     */
+    isSearchable?: boolean;
+    /**
+     * The maximum width for the popup menu. Can be a number, representing width in pixels,
+     * or a string containing a CSS length datatype.
+     */
+    maxMenuWidth?: number | string;
+    /**
+     * The maximum width for the popup menu. Can be a number, representing width in pixels,
+     * or a string containing a CSS length datatype.
+     */
+    minMenuWidth?: number | string;
+    /**
+      Render props used to anchor the popup to your content.
+  
+      Make this an interactive element, such as an @atlaskit/button component.
+  
+      The provided render props in `options` are detailed below:
+      - `isOpen`: The current state of the popup.
+          Use this to change the appearance of your target based on the state of your component
+      - `ref`: Pass this ref to the element the Popup should be attached to
+      - `aria-haspopup`, `aria-expanded`, `aria-controls`: Spread these onto a target element to
+          ensure your experience is accessible
+     */
+    target?: (options: PopupSelectTriggerProps & {
+        isOpen: boolean;
+    }) => ReactNode;
+    isOpen?: boolean;
+    defaultIsOpen?: boolean;
+    spacing?: string;
+    validationState?: ValidationState;
+    isInvalid?: boolean;
+}
+interface State<Modifiers = string> {
+    isOpen: boolean;
+    mergedComponents: Object;
+    mergedPopperProps: PopperPropsNoChildren<defaultModifiers | Modifiers>;
+}
+export default class PopupSelect<Option = OptionType, IsMulti extends boolean = false> extends PureComponent<PopupSelectProps<Option, IsMulti>, State> {
+    menuRef: HTMLElement | null;
+    selectRef: Select<Option, IsMulti> | null;
+    targetRef: HTMLElement | null;
+    unbindWindowClick: UnbindFn | null;
+    unbindWindowKeydown: UnbindFn | null;
+    defaultStyles: StylesConfig<Option, IsMulti>;
+    isOpenControlled: boolean;
+    defaultOpenState: boolean | undefined;
+    state: {
+        isOpen: boolean;
+        mergedComponents: {
+            Control: React.FC<import("../types").ControlProps<OptionType, boolean>>;
+            DropdownIndicator: () => import("@emotion/react").jsx.JSX.Element;
+            Menu: ({ children, innerProps, ...props }: import("../types").MenuProps<OptionType, boolean>) => import("@emotion/react").jsx.JSX.Element;
+        };
+        mergedPopperProps: PopperPropsNoChildren<string>;
+    };
+    popperWrapperId: string;
+    static defaultProps: {
+        closeMenuOnSelect: boolean;
+        components: {};
+        maxMenuHeight: number;
+        maxMenuWidth: number;
+        minMenuWidth: number;
+        popperProps: {};
+        isSearchable: boolean;
+        searchThreshold: number;
+        styles: {};
+        options: never[];
+    };
+    static getDerivedStateFromProps(props: PopupSelectProps<OptionType>, state: State): Partial<State<string>> | null;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    componentDidUpdate(prevProps: PopupSelectProps<Option, IsMulti>): void;
+    handleKeyDown: (event: KeyboardEvent) => void;
+    handleClick: ({ target }: MouseEvent) => void;
+    handleSelectChange: (value: ValueType<Option, IsMulti>, actionMeta: ActionMeta<Option>) => void;
+    /**
+     * Opens the popup
+     *
+     * @param options.controlOverride  - Force the popup to open when it's open state is being controlled
+     */
+    open: (options?: {
+        controlOverride?: boolean | undefined;
+    } | undefined) => void;
+    /**
+     * Closes the popup
+     *
+     * @param options.controlOverride  - Force the popup to close when it's open state is being controlled
+     */
+    close: (options?: {
+        controlOverride?: boolean | undefined;
+    } | undefined) => void;
+    resolveTargetRef: (popperRef: React.Ref<HTMLElement>) => (ref: HTMLElement) => void;
+    resolveMenuRef: (popperRef: React.Ref<HTMLElement>) => (ref: HTMLElement) => void;
+    getSelectRef: (ref: Select<Option, IsMulti>) => void;
+    getItemCount: () => number;
+    getMaxHeight: () => number | undefined;
+    showSearchControl: () => boolean | undefined;
+    renderSelect: () => JSX.Element | null;
+    render(): JSX.Element;
+}
+export {};

package/dist/types-ts4.0/PopupSelect/components.d.ts

@@ -0,0 +1,19 @@
+/** @jsx jsx */
+import { FC, ReactNode, CSSProperties } from 'react';
+import { jsx } from '@emotion/react';
+import { ControlProps, MenuProps, OptionType } from '../types';
+interface MenuDialogProps {
+    maxWidth?: number | string;
+    minWidth?: number | string;
+    style: CSSProperties;
+    children: ReactNode;
+    id: string;
+}
+export declare const MenuDialog: FC<MenuDialogProps>;
+export declare const DummyControl: FC<ControlProps<OptionType, boolean>>;
+export declare const defaultComponents: {
+    Control: FC<ControlProps<OptionType, boolean>>;
+    DropdownIndicator: () => jsx.JSX.Element;
+    Menu: ({ children, innerProps, ...props }: MenuProps<OptionType, boolean>) => jsx.JSX.Element;
+};
+export {};

package/dist/types-ts4.0/PopupSelect/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './PopupSelect';
+export type { PopupSelectProps } from './PopupSelect';

package/dist/types-ts4.0/RadioSelect.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { SelectProps, OptionType } from './types';
+declare const RadioSelect: ({ components, ...props }: SelectProps<OptionType>) => JSX.Element;
+export default RadioSelect;

package/dist/types-ts4.0/Select.d.ts

@@ -0,0 +1,89 @@
+/// <reference types="react" />
+import Select from 'react-select';
+export declare const SelectWithoutAnalytics: {
+    new <Option = import("./types").OptionType, IsMulti extends boolean = false>(props: import("./types").SelectProps<Option, IsMulti>): {
+        components: Partial<import("react-select/src/components").SelectComponents<Option, IsMulti, import("react-select").GroupTypeBase<Option>>>;
+        select: Select<Option, false, import("react-select").GroupTypeBase<Option>, import("react-select/src/Select").default<Option, false, import("react-select").GroupTypeBase<Option>>> | null;
+        UNSAFE_componentWillReceiveProps(nextProps: import("./types").SelectProps<Option, IsMulti>): void;
+        cacheComponents: (components: Partial<import("react-select/src/components").SelectComponents<Option, IsMulti, import("react-select").GroupTypeBase<Option>>>) => void;
+        focus(): void;
+        blur(): void;
+        onSelectRef: (ref: Select<Option, false, import("react-select").GroupTypeBase<Option>, import("react-select/src/Select").default<Option, false, import("react-select").GroupTypeBase<Option>>>) => void;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("./types").SelectProps<Option, IsMulti>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callBack?: (() => void) | undefined): void;
+        readonly props: Readonly<import("./types").SelectProps<Option, IsMulti>> & Readonly<{
+            children?: import("react").ReactNode;
+        }>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: import("react").ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<import("./types").SelectProps<Option, IsMulti>>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<import("./types").SelectProps<Option, IsMulti>>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti>>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    defaultProps: {
+        validationState: string;
+        isInvalid: boolean;
+        spacing: string;
+        onClickPreventDefault: boolean;
+        tabSelectsValue: boolean;
+        components: {};
+        styles: {};
+    };
+    contextType?: import("react").Context<any> | undefined;
+};
+declare const _default: {
+    new <Option = import("./types").OptionType, IsMulti extends boolean = false>(props: import("./types").SelectProps<Option, IsMulti>): {
+        components: Partial<import("react-select/src/components").SelectComponents<Option, IsMulti, import("react-select").GroupTypeBase<Option>>>;
+        select: Select<Option, false, import("react-select").GroupTypeBase<Option>, import("react-select/src/Select").default<Option, false, import("react-select").GroupTypeBase<Option>>> | null;
+        UNSAFE_componentWillReceiveProps(nextProps: import("./types").SelectProps<Option, IsMulti>): void;
+        cacheComponents: (components: Partial<import("react-select/src/components").SelectComponents<Option, IsMulti, import("react-select").GroupTypeBase<Option>>>) => void;
+        focus(): void;
+        blur(): void;
+        onSelectRef: (ref: Select<Option, false, import("react-select").GroupTypeBase<Option>, import("react-select/src/Select").default<Option, false, import("react-select").GroupTypeBase<Option>>>) => void;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("./types").SelectProps<Option, IsMulti>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callBack?: (() => void) | undefined): void;
+        readonly props: Readonly<import("./types").SelectProps<Option, IsMulti>> & Readonly<{
+            children?: import("react").ReactNode;
+        }>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: import("react").ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<import("./types").SelectProps<Option, IsMulti>>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<import("./types").SelectProps<Option, IsMulti>>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti>>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    defaultProps: {
+        validationState: string;
+        isInvalid: boolean;
+        spacing: string;
+        onClickPreventDefault: boolean;
+        tabSelectsValue: boolean;
+        components: {};
+        styles: {};
+    };
+    contextType?: import("react").Context<any> | undefined;
+};
+export default _default;

package/dist/types-ts4.0/components/index.d.ts

@@ -0,0 +1,5 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+export { ClearIndicator, DropdownIndicator, LoadingIndicator, } from './indicators';
+export declare const MultiValueRemove: (props: any) => jsx.JSX.Element;
+export declare const IndicatorSeparator: null;

package/dist/types-ts4.0/components/indicators.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { IndicatorProps } from '../types';
+export declare const ClearIndicator: FC<IndicatorProps<any, any>>;
+export declare const DropdownIndicator: FC<IndicatorProps<any, any>>;
+export declare const LoadingIndicator: FC<any>;

package/dist/types-ts4.0/components/input-options.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { OptionProps, OptionType } from '../types';
+export declare const CheckboxOption: FC<OptionProps<OptionType, true>>;
+export declare const RadioOption: FC<OptionProps>;

package/dist/types-ts4.0/createSelect.d.ts

@@ -0,0 +1,46 @@
+import React, { ComponentType } from 'react';
+import Select from 'react-select';
+import { SelectProps, SelectComponentsConfig, OptionType } from './types';
+export default function createSelect(WrappedComponent: ComponentType<any>): {
+    new <Option = OptionType, IsMulti extends boolean = false>(props: SelectProps<Option, IsMulti>): {
+        components: Partial<import("react-select/src/components").SelectComponents<Option, IsMulti, import("react-select").GroupTypeBase<Option>>>;
+        select: Select<Option, false, import("react-select").GroupTypeBase<Option>, import("react-select/src/Select").default<Option, false, import("react-select").GroupTypeBase<Option>>> | null;
+        UNSAFE_componentWillReceiveProps(nextProps: SelectProps<Option, IsMulti>): void;
+        cacheComponents: (components: Partial<import("react-select/src/components").SelectComponents<Option, IsMulti, import("react-select").GroupTypeBase<Option>>>) => void;
+        focus(): void;
+        blur(): void;
+        onSelectRef: (ref: Select<Option, false, import("react-select").GroupTypeBase<Option>, import("react-select/src/Select").default<Option, false, import("react-select").GroupTypeBase<Option>>>) => void;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<SelectProps<Option, IsMulti>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callBack?: (() => void) | undefined): void;
+        readonly props: Readonly<SelectProps<Option, IsMulti>> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<SelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<SelectProps<Option, IsMulti>>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<SelectProps<Option, IsMulti>>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<SelectProps<Option, IsMulti>>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<SelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<SelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    defaultProps: {
+        validationState: string;
+        isInvalid: boolean;
+        spacing: string;
+        onClickPreventDefault: boolean;
+        tabSelectsValue: boolean;
+        components: {};
+        styles: {};
+    };
+    contextType?: React.Context<any> | undefined;
+};

package/dist/types-ts4.0/data/countries.d.ts

@@ -0,0 +1,19 @@
+interface Country {
+    abbr: string;
+    code: string;
+    icon: string;
+    name: string;
+    suggested?: boolean;
+}
+export declare const allCountries: Array<Country>;
+export declare const groupedCountries: readonly [
+    {
+        readonly label: "Suggested";
+        readonly options: Country[];
+    },
+    {
+        readonly label: "All Countries";
+        readonly options: Country[];
+    }
+];
+export {};

package/dist/types-ts4.0/ert.d.ts

@@ -0,0 +1,2 @@
+import { SelectProps, OptionType } from './types';
+export default function ertHackForSelect(_: SelectProps<OptionType>): void;

package/dist/types-ts4.0/index.d.ts

@@ -0,0 +1,14 @@
+export { components, createFilter, mergeStyles } from 'react-select';
+export { makeAsyncSelect } from 'react-select/async';
+export { makeCreatableSelect } from 'react-select/creatable';
+export { CheckboxOption, RadioOption } from './components/input-options';
+export { default, SelectWithoutAnalytics } from './Select';
+export { default as AsyncSelect } from './AsyncSelect';
+export { default as CheckboxSelect } from './CheckboxSelect';
+export { default as CountrySelect } from './CountrySelect';
+export { default as RadioSelect } from './RadioSelect';
+export { default as CreatableSelect } from './CreatableSelect';
+export { default as AsyncCreatableSelect } from './AsyncCreatableSelect';
+export { default as PopupSelect } from './PopupSelect';
+export type { PopupSelectProps } from './PopupSelect';
+export type { ActionMeta, ControlProps, FormatOptionLabelMeta, IndicatorComponentType, IndicatorProps, InputActionMeta, InputProps, MenuProps, MenuListComponentProps, OptionProps, OptionsType, OptionType, SelectComponentsConfig, SelectProps, StylesConfig, ValueContainerProps, ValueType, GroupedOptionsType, GroupType, } from './types';

package/dist/types-ts4.0/styles.d.ts

@@ -0,0 +1,2 @@
+import { StylesConfig, ValidationState } from './types';
+export default function baseStyles<Option, IsMulti extends boolean>(validationState: ValidationState, isCompact: boolean | undefined, appearance: 'default' | 'subtle' | 'none'): StylesConfig<Option, IsMulti>;

package/dist/types-ts4.0/types.d.ts

@@ -0,0 +1,45 @@
+/// <reference types="react" />
+import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+import { Props as ReactSelectProps, FormatOptionLabelMeta as RSFormatOptionLabelMeta, ValueType as RSValueType, ActionMeta as RSActionMeta, GroupTypeBase as GroupType, OptionsType as RSOptionsType, SelectComponentsConfig as RSSelectComponentsConfig, IndicatorComponentType as RSIndicatorComponentType, StylesConfig as RSStylesConfig, InputActionMeta as RSInputActionMeta, IndicatorProps as RSIndicatorProps, ControlProps as RSControlProps, GroupProps as RSGroupProps, InputProps, MenuProps as RSMenuProps, MenuListComponentProps as RSMenuListComponentProps, MultiValueProps, OptionProps as ReactSelectOptionProps, PlaceholderProps as RSPlaceholderProps, SingleValueProps, ValueContainerProps as RSValueContainerProps, GroupedOptionsType } from 'react-select';
+import { AsyncProps as ReactAsyncSelectProps } from 'react-select/async';
+export declare type ValidationState = 'default' | 'error' | 'success';
+export interface OptionType {
+    [key: string]: any;
+    label: string;
+    value: string | number;
+}
+export declare type OptionsType<Option = OptionType> = RSOptionsType<Option>;
+export interface OptionProps<Option = OptionType, IsMulti extends boolean = false> extends ReactSelectOptionProps<Option, IsMulti> {
+    [key: string]: any;
+    Icon?: React.ComponentType<{
+        label: string;
+        size?: 'small' | 'medium' | 'large' | 'xlarge';
+        onClick?: (e: MouseEvent) => void;
+        primaryColor?: string;
+        secondaryColor?: string;
+    }>;
+    isDisabled: boolean;
+    isFocused: boolean;
+    isSelected: boolean;
+}
+export interface SelectProps<OptionType, IsMulti extends boolean = false> extends ReactSelectProps<OptionType, IsMulti>, WithAnalyticsEventsProps {
+    spacing?: 'compact' | 'default';
+    validationState?: ValidationState;
+    appearance?: 'default' | 'subtle' | 'none';
+    isInvalid?: boolean;
+}
+export declare type ActionMeta<Option = OptionType> = RSActionMeta<Option>;
+export declare type InputActionMeta = RSInputActionMeta;
+export declare type ControlProps<OptionType, IsMulti extends boolean = false> = RSControlProps<OptionType, IsMulti>;
+export declare type FormatOptionLabelMeta<OptionType, IsMulti extends boolean = false> = RSFormatOptionLabelMeta<OptionType, IsMulti>;
+export declare type IndicatorProps<OptionType, IsMulti extends boolean = false> = RSIndicatorProps<OptionType, IsMulti>;
+export declare type IndicatorComponentType<OptionType, IsMulti extends boolean = false> = RSIndicatorComponentType<OptionType, IsMulti>;
+export declare type ValueType<OptionType, IsMulti extends boolean = false> = RSValueType<OptionType, IsMulti>;
+export declare type StylesConfig<Option = OptionType, IsMulti extends boolean = false> = RSStylesConfig<Option, IsMulti>;
+export declare type SelectComponentsConfig<OptionType, IsMulti extends boolean = false> = RSSelectComponentsConfig<OptionType, IsMulti>;
+export declare type GroupProps<OptionType, IsMulti extends boolean = false> = RSGroupProps<OptionType, IsMulti>;
+export declare type MenuProps<OptionType, IsMulti extends boolean = false> = RSMenuProps<OptionType, IsMulti>;
+export declare type MenuListComponentProps<OptionType, IsMulti extends boolean = false> = RSMenuListComponentProps<OptionType, IsMulti>;
+export declare type PlaceholderProps<OptionType, IsMulti extends boolean = false> = RSPlaceholderProps<OptionType, IsMulti>;
+export declare type ValueContainerProps<OptionType, IsMulti extends boolean = false> = RSValueContainerProps<OptionType, IsMulti>;
+export type { GroupType, InputProps, MultiValueProps, ReactAsyncSelectProps, ReactSelectProps, SingleValueProps, GroupedOptionsType, };

package/ert/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/ert.js",
   "module:es2019": "../dist/es2019/ert.js",
   "sideEffects": false,
-  "types": "../dist/types/ert.d.ts"
+  "types": "../dist/types/ert.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/ert.d.ts"
+      ]
+    }
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/select",
-  "version": "15.7.0",
+  "version": "15.7.2",
   "description": "Select allows users to make a single selection or multiple selections from a list of options.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,6 +12,13 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "dist/types-ts4.0/*"
+      ]
+    }
+  },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
@@ -64,14 +71,14 @@
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@emotion/styled": "^11.0.0",
-    "@testing-library/react": "^8.0.1",
-    "@testing-library/user-event": "10.4.0",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/user-event": "^14.4.3",
     "ast-types": "^0.13.3",
     "enzyme": "^3.10.0",
     "jscodeshift": "^0.13.0",
     "react-dom": "^16.8.0",
     "react-value": "^0.2.0",
-    "typescript": "4.3.5",
+    "typescript": "4.5.5",
     "wait-for-expect": "^1.2.0"
   },
   "techstack": {

package/styles/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/styles.js",
   "module:es2019": "../dist/es2019/styles.js",
   "sideEffects": false,
-  "types": "../dist/types/styles.d.ts"
+  "types": "../dist/types/styles.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/styles.d.ts"
+      ]
+    }
+  }
 }

package/types/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/types.js",
   "module:es2019": "../dist/es2019/types.js",
   "sideEffects": false,
-  "types": "../dist/types/types.d.ts"
+  "types": "../dist/types/types.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/types.d.ts"
+      ]
+    }
+  }
 }