@atlaskit/select 15.7.2 → 15.7.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/select
 
+## 15.7.4
+
+### Patch Changes
+
+- [`9827dcb82b8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9827dcb82b8) - No-op change to introduce spacing tokens to design system components.
+
+## 15.7.3
+
+### Patch Changes
+
+- [`5e578b89178`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5e578b89178) - Fixed an issue in PopupSelect that caused the page to scroll to the top.
+
 ## 15.7.2
 
 ### Patch Changes

package/dist/cjs/CountrySelect.js

@@ -24,7 +24,8 @@ var labelStyles = (0, _react.css)({
 });
 var flagStyles = (0, _react.css)({
   fontSize: '18px',
-  marginRight: '8px'
+  // TODO Delete this comment after verifying spacing token -> previous value `'8px'`
+  marginRight: "var(--ds-scale-100, 8px)"
 });
 
 var Opt = function Opt(_ref) {

package/dist/cjs/PopupSelect/PopupSelect.js

@@ -132,6 +132,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isOpenControlled", _this.props.isOpen !== undefined);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "defaultOpenState", _this.isOpenControlled ? _this.props.isOpen : _this.props.defaultIsOpen);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
+      focusLockEnabled: false,
       isOpen: (_this$defaultOpenStat = _this.defaultOpenState) !== null && _this$defaultOpenStat !== void 0 ? _this$defaultOpenStat : false,
       mergedComponents: _components.defaultComponents,
       mergedPopperProps: defaultPopperProps
@@ -188,6 +189,14 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         onChange(value, actionMeta);
       }
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleFirstPopperUpdate", function () {
+      // When the popup opens it's focused into. Since the popup is inside a portal, it's position is
+      // initially set to 0,0 - this causes the window scroll position to jump to the top. To prevent
+      // this we defer enabling the focus-lock until after Popper has positioned the popup the first time.
+      _this.setState({
+        focusLockEnabled: true
+      });
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "open", function (options) {
       var onOpen = _this.props.onOpen;
 
@@ -245,6 +254,10 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         isOpen: false
       });
 
+      _this.setState({
+        focusLockEnabled: false
+      });
+
       if (_this.targetRef != null) {
         _this.targetRef.focus();
       }
@@ -328,6 +341,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
           target = _this$props4.target,
           props = (0, _objectWithoutProperties2.default)(_this$props4, _excluded);
       var _this$state = _this.state,
+          focusLockEnabled = _this$state.focusLockEnabled,
           isOpen = _this$state.isOpen,
           mergedComponents = _this$state.mergedComponents,
           mergedPopperProps = _this$state.mergedPopperProps;
@@ -344,7 +358,15 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         return null;
       }
 
-      var popper = /*#__PURE__*/_react.default.createElement(_reactPopper.Popper, mergedPopperProps, function (_ref2) {
+      var popper = /*#__PURE__*/_react.default.createElement(_reactPopper.Popper, (0, _extends2.default)({}, mergedPopperProps, {
+        onFirstUpdate: function onFirstUpdate(state) {
+          var _mergedPopperProps$on;
+
+          _this.handleFirstPopperUpdate();
+
+          (_mergedPopperProps$on = mergedPopperProps.onFirstUpdate) === null || _mergedPopperProps$on === void 0 ? void 0 : _mergedPopperProps$on.call(mergedPopperProps, state);
+        }
+      }), function (_ref2) {
         var placement = _ref2.placement,
             ref = _ref2.ref,
             style = _ref2.style;
@@ -357,6 +379,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
           maxWidth: maxMenuWidth,
           id: _this.popperWrapperId
         }, /*#__PURE__*/_react.default.createElement(_reactFocusLock.default, {
+          disabled: !focusLockEnabled,
           returnFocus: true
         }, /*#__PURE__*/_react.default.createElement(_reactSelect.default, (0, _extends2.default)({
           backspaceRemovesValue: false,

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.2";
+var packageVersion = "15.7.4";
 var SelectWithoutAnalytics = (0, _createSelect.default)(_reactSelect.default);
 exports.SelectWithoutAnalytics = SelectWithoutAnalytics;
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');

package/dist/cjs/version.json

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

package/dist/es2019/CountrySelect.js

@@ -12,7 +12,8 @@ const labelStyles = css({
 });
 const flagStyles = css({
   fontSize: '18px',
-  marginRight: '8px'
+  // TODO Delete this comment after verifying spacing token -> previous value `'8px'`
+  marginRight: "var(--ds-scale-100, 8px)"
 });
 
 const Opt = ({

package/dist/es2019/PopupSelect/PopupSelect.js

@@ -71,6 +71,7 @@ export default class PopupSelect extends PureComponent {
     _defineProperty(this, "defaultOpenState", this.isOpenControlled ? this.props.isOpen : this.props.defaultIsOpen);
 
     _defineProperty(this, "state", {
+      focusLockEnabled: false,
       isOpen: (_this$defaultOpenStat = this.defaultOpenState) !== null && _this$defaultOpenStat !== void 0 ? _this$defaultOpenStat : false,
       mergedComponents: defaultComponents,
       mergedPopperProps: defaultPopperProps
@@ -135,6 +136,15 @@ export default class PopupSelect extends PureComponent {
       }
     });
 
+    _defineProperty(this, "handleFirstPopperUpdate", () => {
+      // When the popup opens it's focused into. Since the popup is inside a portal, it's position is
+      // initially set to 0,0 - this causes the window scroll position to jump to the top. To prevent
+      // this we defer enabling the focus-lock until after Popper has positioned the popup the first time.
+      this.setState({
+        focusLockEnabled: true
+      });
+    });
+
     _defineProperty(this, "open", options => {
       const {
         onOpen
@@ -194,6 +204,9 @@ export default class PopupSelect extends PureComponent {
       this.setState({
         isOpen: false
       });
+      this.setState({
+        focusLockEnabled: false
+      });
 
       if (this.targetRef != null) {
         this.targetRef.focus();
@@ -286,6 +299,7 @@ export default class PopupSelect extends PureComponent {
         ...props
       } = this.props;
       const {
+        focusLockEnabled,
         isOpen,
         mergedComponents,
         mergedPopperProps
@@ -300,7 +314,14 @@ export default class PopupSelect extends PureComponent {
         return null;
       }
 
-      const popper = /*#__PURE__*/React.createElement(Popper, mergedPopperProps, ({
+      const popper = /*#__PURE__*/React.createElement(Popper, _extends({}, mergedPopperProps, {
+        onFirstUpdate: state => {
+          var _mergedPopperProps$on;
+
+          this.handleFirstPopperUpdate();
+          (_mergedPopperProps$on = mergedPopperProps.onFirstUpdate) === null || _mergedPopperProps$on === void 0 ? void 0 : _mergedPopperProps$on.call(mergedPopperProps, state);
+        }
+      }), ({
         placement,
         ref,
         style
@@ -314,6 +335,7 @@ export default class PopupSelect extends PureComponent {
           maxWidth: maxMenuWidth,
           id: this.popperWrapperId
         }, /*#__PURE__*/React.createElement(FocusLock, {
+          disabled: !focusLockEnabled,
           returnFocus: true
         }, /*#__PURE__*/React.createElement(Select, _extends({
           backspaceRemovesValue: 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.2";
+const packageVersion = "15.7.4";
 export const SelectWithoutAnalytics = createSelect(Select);
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 export default withAnalyticsContext({

package/dist/es2019/version.json

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

package/dist/esm/CountrySelect.js

@@ -12,7 +12,8 @@ var labelStyles = css({
 });
 var flagStyles = css({
   fontSize: '18px',
-  marginRight: '8px'
+  // TODO Delete this comment after verifying spacing token -> previous value `'8px'`
+  marginRight: "var(--ds-scale-100, 8px)"
 });
 
 var Opt = function Opt(_ref) {

package/dist/esm/PopupSelect/PopupSelect.js

@@ -106,6 +106,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
     _defineProperty(_assertThisInitialized(_this), "defaultOpenState", _this.isOpenControlled ? _this.props.isOpen : _this.props.defaultIsOpen);
 
     _defineProperty(_assertThisInitialized(_this), "state", {
+      focusLockEnabled: false,
       isOpen: (_this$defaultOpenStat = _this.defaultOpenState) !== null && _this$defaultOpenStat !== void 0 ? _this$defaultOpenStat : false,
       mergedComponents: defaultComponents,
       mergedPopperProps: defaultPopperProps
@@ -167,6 +168,15 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
       }
     });
 
+    _defineProperty(_assertThisInitialized(_this), "handleFirstPopperUpdate", function () {
+      // When the popup opens it's focused into. Since the popup is inside a portal, it's position is
+      // initially set to 0,0 - this causes the window scroll position to jump to the top. To prevent
+      // this we defer enabling the focus-lock until after Popper has positioned the popup the first time.
+      _this.setState({
+        focusLockEnabled: true
+      });
+    });
+
     _defineProperty(_assertThisInitialized(_this), "open", function (options) {
       var onOpen = _this.props.onOpen;
 
@@ -225,6 +235,10 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         isOpen: false
       });
 
+      _this.setState({
+        focusLockEnabled: false
+      });
+
       if (_this.targetRef != null) {
         _this.targetRef.focus();
       }
@@ -316,6 +330,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
           props = _objectWithoutProperties(_this$props4, _excluded);
 
       var _this$state = _this.state,
+          focusLockEnabled = _this$state.focusLockEnabled,
           isOpen = _this$state.isOpen,
           mergedComponents = _this$state.mergedComponents,
           mergedPopperProps = _this$state.mergedPopperProps;
@@ -332,7 +347,15 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         return null;
       }
 
-      var popper = /*#__PURE__*/React.createElement(Popper, mergedPopperProps, function (_ref2) {
+      var popper = /*#__PURE__*/React.createElement(Popper, _extends({}, mergedPopperProps, {
+        onFirstUpdate: function onFirstUpdate(state) {
+          var _mergedPopperProps$on;
+
+          _this.handleFirstPopperUpdate();
+
+          (_mergedPopperProps$on = mergedPopperProps.onFirstUpdate) === null || _mergedPopperProps$on === void 0 ? void 0 : _mergedPopperProps$on.call(mergedPopperProps, state);
+        }
+      }), function (_ref2) {
         var placement = _ref2.placement,
             ref = _ref2.ref,
             style = _ref2.style;
@@ -345,6 +368,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
           maxWidth: maxMenuWidth,
           id: _this.popperWrapperId
         }, /*#__PURE__*/React.createElement(FocusLock, {
+          disabled: !focusLockEnabled,
           returnFocus: true
         }, /*#__PURE__*/React.createElement(Select, _extends({
           backspaceRemovesValue: 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.2";
+var packageVersion = "15.7.4";
 export var SelectWithoutAnalytics = createSelect(Select);
 var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 export default withAnalyticsContext({

package/dist/esm/version.json

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

package/dist/types/CountrySelect.d.ts

@@ -1,4 +1,3 @@
-/** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { groupedCountries } from './data/countries';
 import { SelectProps } from './types';

package/dist/types/PopupSelect/PopupSelect.d.ts

@@ -70,6 +70,7 @@ export interface PopupSelectProps<Option = OptionType, IsMulti extends boolean =
     isInvalid?: boolean;
 }
 interface State<Modifiers = string> {
+    focusLockEnabled: boolean;
     isOpen: boolean;
     mergedComponents: Object;
     mergedPopperProps: PopperPropsNoChildren<defaultModifiers | Modifiers>;
@@ -84,6 +85,7 @@ export default class PopupSelect<Option = OptionType, IsMulti extends boolean =
     isOpenControlled: boolean;
     defaultOpenState: boolean | undefined;
     state: {
+        focusLockEnabled: boolean;
         isOpen: boolean;
         mergedComponents: {
             Control: React.FC<import("../types").ControlProps<OptionType, boolean>>;
@@ -112,6 +114,7 @@ export default class PopupSelect<Option = OptionType, IsMulti extends boolean =
     handleKeyDown: (event: KeyboardEvent) => void;
     handleClick: ({ target }: MouseEvent) => void;
     handleSelectChange: (value: ValueType<Option, IsMulti>, actionMeta: ActionMeta<Option>) => void;
+    handleFirstPopperUpdate: () => void;
     /**
      * Opens the popup
      *

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

@@ -1,4 +1,3 @@
-/** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { groupedCountries } from './data/countries';
 import { SelectProps } from './types';

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

@@ -70,6 +70,7 @@ export interface PopupSelectProps<Option = OptionType, IsMulti extends boolean =
     isInvalid?: boolean;
 }
 interface State<Modifiers = string> {
+    focusLockEnabled: boolean;
     isOpen: boolean;
     mergedComponents: Object;
     mergedPopperProps: PopperPropsNoChildren<defaultModifiers | Modifiers>;
@@ -84,6 +85,7 @@ export default class PopupSelect<Option = OptionType, IsMulti extends boolean =
     isOpenControlled: boolean;
     defaultOpenState: boolean | undefined;
     state: {
+        focusLockEnabled: boolean;
         isOpen: boolean;
         mergedComponents: {
             Control: React.FC<import("../types").ControlProps<OptionType, boolean>>;
@@ -112,6 +114,7 @@ export default class PopupSelect<Option = OptionType, IsMulti extends boolean =
     handleKeyDown: (event: KeyboardEvent) => void;
     handleClick: ({ target }: MouseEvent) => void;
     handleSelectChange: (value: ValueType<Option, IsMulti>, actionMeta: ActionMeta<Option>) => void;
+    handleFirstPopperUpdate: () => void;
     /**
      * Opens the popup
      *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/select",
-  "version": "15.7.2",
+  "version": "15.7.4",
   "description": "Select allows users to make a single selection or multiple selections from a list of options.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -15,13 +15,15 @@
   "typesVersions": {
     ">=4.0 <4.5": {
       "*": [
-        "dist/types-ts4.0/*"
+        "dist/types-ts4.0/*",
+        "dist/types-ts4.0/index.d.ts"
       ]
     }
   },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
+    "disableProductCI": true,
     "team": "Design System Team",
     "deprecatedAutoEntryPoints": true,
     "releaseModel": "scheduled",
@@ -32,7 +34,7 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
-    "@atlaskit/icon": "^21.10.0",
+    "@atlaskit/icon": "^21.11.0",
     "@atlaskit/spinner": "^15.0.0",
     "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
@@ -57,16 +59,16 @@
   },
   "devDependencies": {
     "@atlaskit/button": "^16.3.0",
-    "@atlaskit/checkbox": "^12.2.0",
+    "@atlaskit/checkbox": "^12.4.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/drawer": "^7.2.0",
-    "@atlaskit/form": "^8.5.0",
-    "@atlaskit/logo": "^13.9.0",
-    "@atlaskit/modal-dialog": "^12.3.0",
+    "@atlaskit/drawer": "^7.3.0",
+    "@atlaskit/form": "^8.6.0",
+    "@atlaskit/logo": "^13.10.0",
+    "@atlaskit/modal-dialog": "^12.4.0",
     "@atlaskit/radio": "^5.4.0",
-    "@atlaskit/section-message": "^6.2.0",
+    "@atlaskit/section-message": "^6.3.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/tooltip": "^17.5.0",
+    "@atlaskit/tooltip": "^17.6.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
@@ -84,6 +86,7 @@
   "techstack": {
     "@repo/internal": {
       "dom-events": "use-bind-event-listener",
+      "design-tokens": "spacing",
       "theming": "tokens",
       "deprecation": "no-deprecated-imports",
       "styling": [

package/report.api.md

@@ -1,6 +1,8 @@
-## API Report File for "@atlaskit/select"
+## API Report File for "@atlaskit/select".
 
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
+
+[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
 
 ```ts
 /// <reference types="react" />
@@ -14,13 +16,14 @@ import { default as default_2 } from 'react-select/src/Select';
 import { default as default_3 } from 'react-select';
 import { ErrorInfo } from 'react';
 import { FC } from 'react';
-import { FocusTrap } from 'focus-trap';
 import { FormatOptionLabelMeta as FormatOptionLabelMeta_2 } from 'react-select';
 import { GroupedOptionsType } from 'react-select';
 import { GroupTypeBase as GroupType } from 'react-select';
 import { IndicatorComponentType as IndicatorComponentType_2 } from 'react-select';
 import { IndicatorProps as IndicatorProps_2 } from 'react-select';
+import { InputActionMeta as InputActionMeta_2 } from 'react-select';
 import { InputProps } from 'react-select';
+import { jsx } from '@emotion/react';
 import { makeAsyncSelect } from 'react-select/async';
 import { makeCreatableSelect } from 'react-select/creatable';
 import { MenuListComponentProps as MenuListComponentProps_2 } from 'react-select';
@@ -130,6 +133,7 @@ export declare const AsyncCreatableSelect: {
   };
   defaultProps: {
     validationState: string;
+    isInvalid: boolean;
     spacing: string;
     onClickPreventDefault: boolean;
     tabSelectsValue: boolean;
@@ -224,6 +228,7 @@ export declare const AsyncSelect: {
   };
   defaultProps: {
     validationState: string;
+    isInvalid: boolean;
     spacing: string;
     onClickPreventDefault: boolean;
     tabSelectsValue: boolean;
@@ -247,7 +252,19 @@ export declare type ControlProps<
   IsMulti extends boolean = false
 > = ControlProps_2<OptionType, IsMulti>;
 
-export declare const CountrySelect: (props: any) => JSX.Element;
+declare type Country = typeof groupedCountries[number]['options'][number];
+
+declare interface Country_2 {
+  abbr: string;
+  code: string;
+  icon: string;
+  name: string;
+  suggested?: boolean;
+}
+
+export declare const CountrySelect: (
+  props: SelectProps<Country>,
+) => jsx.JSX.Element;
 
 export declare const CreatableSelect: {
   new <Option = OptionType, IsMulti extends boolean = false>(
@@ -334,6 +351,7 @@ export declare const CreatableSelect: {
   };
   defaultProps: {
     validationState: string;
+    isInvalid: boolean;
     spacing: string;
     onClickPreventDefault: boolean;
     tabSelectsValue: boolean;
@@ -430,6 +448,7 @@ declare const _default: {
   };
   defaultProps: {
     validationState: string;
+    isInvalid: boolean;
     spacing: string;
     onClickPreventDefault: boolean;
     tabSelectsValue: boolean;
@@ -447,6 +466,17 @@ export declare type FormatOptionLabelMeta<
   IsMulti extends boolean = false
 > = FormatOptionLabelMeta_2<OptionType, IsMulti>;
 
+declare const groupedCountries: readonly [
+  {
+    readonly label: 'Suggested';
+    readonly options: Country_2[];
+  },
+  {
+    readonly label: 'All Countries';
+    readonly options: Country_2[];
+  },
+];
+
 export { GroupedOptionsType };
 
 export { GroupType };
@@ -461,6 +491,8 @@ export declare type IndicatorProps<
   IsMulti extends boolean = false
 > = IndicatorProps_2<OptionType, IsMulti>;
 
+export declare type InputActionMeta = InputActionMeta_2;
+
 export { InputProps };
 
 export { makeAsyncSelect };
@@ -479,6 +511,17 @@ export declare type MenuProps<
 
 export { mergeStyles };
 
+declare type ModifierList =
+  | 'offset'
+  | 'computeStyles'
+  | 'preventOverflow'
+  | 'handleFlipStyle'
+  | 'flip'
+  | 'popperOffsets'
+  | 'arrow'
+  | 'hide'
+  | string;
+
 export declare interface OptionProps<
   Option = OptionType,
   IsMulti extends boolean = false
@@ -513,7 +556,6 @@ export declare class PopupSelect<
   Option = OptionType,
   IsMulti extends boolean = false
 > extends PureComponent<PopupSelectProps<Option, IsMulti>, State> {
-  focusTrap: FocusTrap | null;
   menuRef: HTMLElement | null;
   selectRef: Select<Option, IsMulti> | null;
   targetRef: HTMLElement | null;
@@ -526,12 +568,12 @@ export declare class PopupSelect<
     isOpen: boolean;
     mergedComponents: {
       Control: React_2.FC<ControlProps<OptionType, boolean>>;
-      DropdownIndicator: () => JSX.Element;
+      DropdownIndicator: () => jsx;
       Menu: ({
         children,
         innerProps,
         ...props
-      }: MenuProps<OptionType, boolean>) => JSX.Element;
+      }: MenuProps<OptionType, boolean>) => jsx;
     };
     mergedPopperProps: PopperPropsNoChildren<string>;
   };
@@ -543,6 +585,7 @@ export declare class PopupSelect<
     maxMenuWidth: number;
     minMenuWidth: number;
     popperProps: {};
+    isSearchable: boolean;
     searchThreshold: number;
     styles: {};
     options: never[];
@@ -572,7 +615,6 @@ export declare class PopupSelect<
         }
       | undefined,
   ) => void;
-  initialiseFocusTrap: () => void;
   /**
    * Closes the popup
    *
@@ -594,7 +636,7 @@ export declare class PopupSelect<
   getSelectRef: (ref: Select<Option, IsMulti>) => void;
   getItemCount: () => number;
   getMaxHeight: () => number | undefined;
-  showSearchControl: () => boolean;
+  showSearchControl: () => boolean | undefined;
   renderSelect: () => JSX.Element | null;
   render(): JSX.Element;
 }
@@ -602,7 +644,7 @@ export declare class PopupSelect<
 export declare interface PopupSelectProps<
   Option = OptionType,
   IsMulti extends boolean = false,
-  Modifiers = string
+  Modifiers = ModifierList
 > extends Props<Option, IsMulti> {
   /**
    * Defines whether the menu should close when selected. Defaults to "true"
@@ -621,9 +663,14 @@ export declare interface PopupSelectProps<
      */
   popperProps?: PopperPropsNoChildren<Modifiers>;
   /**
-   * The maximum number of options the Select can contain without rendering the search field.
+   * 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.
@@ -653,6 +700,9 @@ export declare interface PopupSelectProps<
   ) => ReactNode;
   isOpen?: boolean;
   defaultIsOpen?: boolean;
+  spacing?: string;
+  validationState?: ValidationState;
+  isInvalid?: boolean;
 }
 
 declare interface PopupSelectTriggerProps {
@@ -681,8 +731,105 @@ export declare interface SelectProps<
     WithAnalyticsEventsProps {
   spacing?: 'compact' | 'default';
   validationState?: ValidationState;
+  appearance?: 'default' | 'subtle' | 'none';
+  isInvalid?: boolean;
 }
 
+export declare const SelectWithoutAnalytics: {
+  new <Option = OptionType, IsMulti extends boolean = false>(
+    props: SelectProps<Option, IsMulti>,
+  ): {
+    components: Partial<SelectComponents<Option, IsMulti, GroupType<Option>>>;
+    select: Select<
+      Option,
+      false,
+      GroupType<Option>,
+      default_2<Option, false, GroupType<Option>>
+    > | null;
+    UNSAFE_componentWillReceiveProps(
+      nextProps: SelectProps<Option, IsMulti>,
+    ): void;
+    cacheComponents: (
+      components: Partial<SelectComponents<Option, IsMulti, GroupType<Option>>>,
+    ) => void;
+    focus(): void;
+    blur(): void;
+    onSelectRef: (
+      ref: Select<
+        Option,
+        false,
+        GroupType<Option>,
+        default_2<Option, false, GroupType<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?: ReactNode;
+      }>;
+    state: Readonly<{}>;
+    refs: {
+      [key: string]: ReactInstance;
+    };
+    componentDidMount?(): void;
+    shouldComponentUpdate?(
+      nextProps: Readonly<SelectProps<Option, IsMulti>>,
+      nextState: Readonly<{}>,
+      nextContext: any,
+    ): boolean;
+    componentWillUnmount?(): void;
+    componentDidCatch?(error: Error, errorInfo: 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?: Context<any> | undefined;
+};
+
 declare interface State<Modifiers = string> {
   isOpen: boolean;
   mergedComponents: Object;