@atlaskit/select 15.6.2 → 15.7.0

package/dist/es2019/components/input-options.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { Component } from 'react';
 import RadioIcon from '@atlaskit/icon/glyph/radio';
 import CheckboxIcon from '@atlaskit/icon/glyph/checkbox';
@@ -156,12 +156,12 @@ const getBorderColor = ({
   } else if (isFocused && isSelected) {
     return `var(--ds-background-selected-bold-hovered, ${B400})`;
   } else if (isFocused) {
-    return `var(--ds-border, ${N100})`;
+    return `var(--ds-border-input, ${N100})`;
   } else if (isSelected) {
     return `var(--ds-background-selected-bold, ${B400})`;
   }
 
-  return `var(--ds-border, ${N100})`;
+  return `var(--ds-border-input, ${N100})`;
 };
 
 class ControlOption extends Component {
@@ -204,43 +204,50 @@ class ControlOption extends Component {
       getStyles,
       ...rest
     });
-    return jsx("div", _extends({
-      css: styles,
-      className: classes,
-      ref: innerRef
-    }, props), jsx("div", {
-      css: {
-        alignItems: 'center',
-        display: 'flex ',
-        flexShrink: 0,
-        paddingRight: '4px',
-        // Here we are adding a border to the Checkbox and Radio SVG icons
-        // This is an a11y fix for Select only for now but it may be rolled
-        // into the `@atlaskit/icon` package's Checkbox and Radio SVGs later
-        '& svg rect, & svg circle:first-of-type': {
-          stroke: getBorderColor({ ...this.props,
-            ...this.state
-          }),
-          strokeWidth: '2px',
-          strokeLinejoin: 'round'
+    return (
+      /**
+       * TODO Fix this type error
+       * @see https://product-fabric.atlassian.net/browse/DSP-6063
+       */
+      // @ts-ignore
+      jsx("div", _extends({
+        css: styles,
+        className: classes,
+        ref: innerRef
+      }, props), jsx("div", {
+        css: {
+          alignItems: 'center',
+          display: 'flex ',
+          flexShrink: 0,
+          paddingRight: '4px',
+          // Here we are adding a border to the Checkbox and Radio SVG icons
+          // This is an a11y fix for Select only for now but it may be rolled
+          // into the `@atlaskit/icon` package's Checkbox and Radio SVGs later
+          '& svg rect, & svg circle:first-of-type': {
+            stroke: getBorderColor({ ...this.props,
+              ...this.state
+            }),
+            strokeWidth: '2px',
+            strokeLinejoin: 'round'
+          }
         }
-      }
-    }, !!Icon ? jsx(Icon, {
-      label: "",
-      primaryColor: getPrimaryColor({ ...this.props,
-        ...this.state
-      }),
-      secondaryColor: getSecondaryColor({ ...this.props,
-        ...this.state
-      })
-    }) : null), jsx("div", {
-      css: {
-        textOverflow: 'ellipsis',
-        overflowX: 'hidden',
-        flexGrow: 1,
-        whiteSpace: 'nowrap'
-      }
-    }, children));
+      }, !!Icon ? jsx(Icon, {
+        label: "",
+        primaryColor: getPrimaryColor({ ...this.props,
+          ...this.state
+        }),
+        secondaryColor: getSecondaryColor({ ...this.props,
+          ...this.state
+        })
+      }) : null), jsx("div", {
+        css: {
+          textOverflow: 'ellipsis',
+          overflowX: 'hidden',
+          flexGrow: 1,
+          whiteSpace: 'nowrap'
+        }
+      }, children))
+    );
   }
 
 }

package/dist/es2019/createSelect.js

@@ -62,6 +62,7 @@ export default function createSelect(WrappedComponent) {
       const {
         styles,
         validationState,
+        isInvalid,
         spacing,
         isMulti,
         appearance,
@@ -75,12 +76,13 @@ export default function createSelect(WrappedComponent) {
         "aria-live": "assertive"
       }, props, {
         components: this.components,
-        styles: mergeStyles(baseStyles(validationState, isCompact, this.props.appearance || 'default'), styles)
+        styles: mergeStyles(baseStyles(validationState || (isInvalid ? 'error' : 'default'), isCompact, this.props.appearance || 'default'), styles)
       }));
     }
 
   }, _defineProperty(_class, "defaultProps", {
     validationState: 'default',
+    isInvalid: false,
     spacing: 'default',
     onClickPreventDefault: true,
     tabSelectsValue: false,

package/dist/es2019/styles.js

@@ -3,7 +3,7 @@ import { B100, B400, B50, G400, N0, N20, N200, N30, N300, N40, N500, N70, N800,
 const BORDER_WIDTH = 2;
 const ICON_PADDING = 2;
 const paddingExcludingBorder = gridSize() - BORDER_WIDTH;
-export default function baseStyles(validationState, isCompact, appearance) {
+export default function baseStyles(validationState, isCompact = false, appearance) {
   return {
     container: (css, {
       isDisabled
@@ -38,7 +38,7 @@ export default function baseStyles(validationState, isCompact, appearance) {
         borderColor = `var(--ds-border-success, ${G400})`;
       }
 
-      let borderColorHover = isFocused ? `var(--ds-border-focused, ${B100})` : `var(--ds-border, ${N30})`;
+      let borderColorHover = isFocused ? `var(--ds-border-focused, ${B100})` : `var(--ds-border-input, ${N30})`;
 
       if (validationState === 'error') {
         borderColorHover = `var(--ds-border-danger, ${R400})`;

package/dist/es2019/version.json

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

package/dist/esm/CountrySelect.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import { jsx, css } from '@emotion/core';
+import { jsx, css } from '@emotion/react';
 import { groupedCountries } from './data/countries';
 import Select from './Select';
 // custom option renderer

package/dist/esm/PopupSelect/PopupSelect.js

@@ -41,22 +41,23 @@ var canUseDOM = function canUseDOM() {
 // ==============================
 // Class
 // ==============================
+var modifiers = [{
+  name: 'offset',
+  options: {
+    offset: [0, 8]
+  }
+}, {
+  name: 'preventOverflow',
+  enabled: true,
+  options: {
+    padding: 5,
+    boundary: 'clippingParents',
+    altAxis: true,
+    altBoundary: true
+  }
+}];
 var defaultPopperProps = {
-  modifiers: [{
-    name: 'offset',
-    options: {
-      offset: [0, 8]
-    }
-  }, {
-    name: 'preventOverflow',
-    enabled: true,
-    options: {
-      padding: 5,
-      boundary: 'clippingParents',
-      altAxis: true,
-      altBoundary: true
-    }
-  }],
+  modifiers: modifiers,
   placement: 'bottom-start'
 };
 
@@ -92,7 +93,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
 
     _defineProperty(_assertThisInitialized(_this), "unbindWindowKeydown", null);
 
-    _defineProperty(_assertThisInitialized(_this), "defaultStyles", mergeStyles(baseStyles(_this.props.validationState, _this.props.spacing === 'compact', 'default'), {
+    _defineProperty(_assertThisInitialized(_this), "defaultStyles", mergeStyles(baseStyles(_this.props.validationState || (_this.props.isInvalid ? 'error' : 'default'), _this.props.spacing === 'compact', 'default'), {
       groupHeading: function groupHeading(provided) {
         return _objectSpread(_objectSpread({}, provided), {}, {
           color: "var(--ds-text-subtlest, ".concat(N80, ")")
@@ -300,17 +301,19 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "showSearchControl", function () {
-      var searchThreshold = _this.props.searchThreshold;
-      return _this.getItemCount() > searchThreshold;
+      var _this$props3 = _this.props,
+          searchThreshold = _this$props3.searchThreshold,
+          isSearchable = _this$props3.isSearchable;
+      return isSearchable && _this.getItemCount() > searchThreshold;
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderSelect", function () {
-      var _this$props3 = _this.props,
-          footer = _this$props3.footer,
-          maxMenuWidth = _this$props3.maxMenuWidth,
-          minMenuWidth = _this$props3.minMenuWidth,
-          target = _this$props3.target,
-          props = _objectWithoutProperties(_this$props3, _excluded);
+      var _this$props4 = _this.props,
+          footer = _this$props4.footer,
+          maxMenuWidth = _this$props4.maxMenuWidth,
+          minMenuWidth = _this$props4.minMenuWidth,
+          target = _this$props4.target,
+          props = _objectWithoutProperties(_this$props4, _excluded);
 
       var _this$state = _this.state,
           isOpen = _this$state.isOpen,
@@ -466,6 +469,7 @@ _defineProperty(PopupSelect, "defaultProps", {
   maxMenuWidth: 440,
   minMenuWidth: 220,
   popperProps: {},
+  isSearchable: true,
   searchThreshold: 5,
   styles: {},
   options: []

package/dist/esm/PopupSelect/components.js

@@ -5,7 +5,7 @@ var _excluded = ["innerRef", "innerProps"],
 
 /** @jsx jsx */
 import { components } from 'react-select';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import SearchIcon from '@atlaskit/icon/glyph/editor/search';
 import { layers } from '@atlaskit/theme/constants';

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.6.2";
+var packageVersion = "15.7.0";
 export var SelectWithoutAnalytics = createSelect(Select);
 var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 export default withAnalyticsContext({

package/dist/esm/components/index.js

@@ -1,13 +1,24 @@
-import React from 'react';
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2;
+
+/** @jsx jsx */
+import { jsx, css } from '@emotion/react';
 import { components } from 'react-select';
 import SelectClearIcon from '@atlaskit/icon/glyph/select-clear';
 export { ClearIndicator, DropdownIndicator, LoadingIndicator } from './indicators';
+var disabledProps = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: none;\n"])));
+var enabledProps = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: inherit;\n"])));
 export var MultiValueRemove = function MultiValueRemove(props) {
-  return /*#__PURE__*/React.createElement(components.MultiValueRemove, props, /*#__PURE__*/React.createElement(SelectClearIcon, {
+  var isDisabled = props.selectProps.isDisabled;
+  return jsx(components.MultiValueRemove, props, jsx("div", {
+    css: isDisabled ? disabledProps : enabledProps,
+    "data-testid": isDisabled ? 'hide-clear-icon' : 'show-clear-icon'
+  }, jsx(SelectClearIcon, {
     label: "Clear",
     size: "small",
     primaryColor: "transparent",
     secondaryColor: "inherit"
-  }));
+  })));
 };
 export var IndicatorSeparator = null;

package/dist/esm/components/indicators.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { components } from 'react-select';
 import Spinner from '@atlaskit/spinner';
 import SelectClearIcon from '@atlaskit/icon/glyph/select-clear';

package/dist/esm/components/input-options.js

@@ -22,7 +22,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { Component } from 'react';
 import RadioIcon from '@atlaskit/icon/glyph/radio';
 import CheckboxIcon from '@atlaskit/icon/glyph/checkbox';
@@ -174,12 +174,12 @@ var getBorderColor = function getBorderColor(_ref3) {
   } else if (isFocused && isSelected) {
     return "var(--ds-background-selected-bold-hovered, ".concat(B400, ")");
   } else if (isFocused) {
-    return "var(--ds-border, ".concat(N100, ")");
+    return "var(--ds-border-input, ".concat(N100, ")");
   } else if (isSelected) {
     return "var(--ds-background-selected-bold, ".concat(B400, ")");
   }
 
-  return "var(--ds-border, ".concat(N100, ")");
+  return "var(--ds-border-input, ".concat(N100, ")");
 };
 
 var ControlOption = /*#__PURE__*/function (_Component) {
@@ -248,37 +248,44 @@ var ControlOption = /*#__PURE__*/function (_Component) {
           styles = _getPrimitiveStyles2[0],
           classes = _getPrimitiveStyles2[1];
 
-      return jsx("div", _extends({
-        css: styles,
-        className: classes,
-        ref: innerRef
-      }, props), jsx("div", {
-        css: {
-          alignItems: 'center',
-          display: 'flex ',
-          flexShrink: 0,
-          paddingRight: '4px',
-          // Here we are adding a border to the Checkbox and Radio SVG icons
-          // This is an a11y fix for Select only for now but it may be rolled
-          // into the `@atlaskit/icon` package's Checkbox and Radio SVGs later
-          '& svg rect, & svg circle:first-of-type': {
-            stroke: getBorderColor(_objectSpread(_objectSpread({}, this.props), this.state)),
-            strokeWidth: '2px',
-            strokeLinejoin: 'round'
+      return (
+        /**
+         * TODO Fix this type error
+         * @see https://product-fabric.atlassian.net/browse/DSP-6063
+         */
+        // @ts-ignore
+        jsx("div", _extends({
+          css: styles,
+          className: classes,
+          ref: innerRef
+        }, props), jsx("div", {
+          css: {
+            alignItems: 'center',
+            display: 'flex ',
+            flexShrink: 0,
+            paddingRight: '4px',
+            // Here we are adding a border to the Checkbox and Radio SVG icons
+            // This is an a11y fix for Select only for now but it may be rolled
+            // into the `@atlaskit/icon` package's Checkbox and Radio SVGs later
+            '& svg rect, & svg circle:first-of-type': {
+              stroke: getBorderColor(_objectSpread(_objectSpread({}, this.props), this.state)),
+              strokeWidth: '2px',
+              strokeLinejoin: 'round'
+            }
           }
-        }
-      }, !!Icon ? jsx(Icon, {
-        label: "",
-        primaryColor: getPrimaryColor(_objectSpread(_objectSpread({}, this.props), this.state)),
-        secondaryColor: getSecondaryColor(_objectSpread(_objectSpread({}, this.props), this.state))
-      }) : null), jsx("div", {
-        css: {
-          textOverflow: 'ellipsis',
-          overflowX: 'hidden',
-          flexGrow: 1,
-          whiteSpace: 'nowrap'
-        }
-      }, children));
+        }, !!Icon ? jsx(Icon, {
+          label: "",
+          primaryColor: getPrimaryColor(_objectSpread(_objectSpread({}, this.props), this.state)),
+          secondaryColor: getSecondaryColor(_objectSpread(_objectSpread({}, this.props), this.state))
+        }) : null), jsx("div", {
+          css: {
+            textOverflow: 'ellipsis',
+            overflowX: 'hidden',
+            flexGrow: 1,
+            whiteSpace: 'nowrap'
+          }
+        }, children))
+      );
     }
   }]);
 

package/dist/esm/createSelect.js

@@ -8,7 +8,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["styles", "validationState", "spacing", "isMulti", "appearance"];
+var _excluded = ["styles", "validationState", "isInvalid", "spacing", "isMulti", "appearance"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -92,6 +92,7 @@ export default function createSelect(WrappedComponent) {
         var _this$props = this.props,
             styles = _this$props.styles,
             validationState = _this$props.validationState,
+            isInvalid = _this$props.isInvalid,
             spacing = _this$props.spacing,
             isMulti = _this$props.isMulti,
             appearance = _this$props.appearance,
@@ -105,7 +106,7 @@ export default function createSelect(WrappedComponent) {
           "aria-live": "assertive"
         }, props, {
           components: this.components,
-          styles: mergeStyles(baseStyles(validationState, isCompact, this.props.appearance || 'default'), styles)
+          styles: mergeStyles(baseStyles(validationState || (isInvalid ? 'error' : 'default'), isCompact, this.props.appearance || 'default'), styles)
         }));
       }
     }]);
@@ -113,6 +114,7 @@ export default function createSelect(WrappedComponent) {
     return AtlaskitSelect;
   }(Component), _defineProperty(_class, "defaultProps", {
     validationState: 'default',
+    isInvalid: false,
     spacing: 'default',
     onClickPreventDefault: true,
     tabSelectsValue: false,

package/dist/esm/styles.js

@@ -9,7 +9,9 @@ import { B100, B400, B50, G400, N0, N20, N200, N30, N300, N40, N500, N70, N800,
 var BORDER_WIDTH = 2;
 var ICON_PADDING = 2;
 var paddingExcludingBorder = gridSize() - BORDER_WIDTH;
-export default function baseStyles(validationState, isCompact, appearance) {
+export default function baseStyles(validationState) {
+  var isCompact = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var appearance = arguments.length > 2 ? arguments[2] : undefined;
   return {
     container: function container(css, _ref) {
       var isDisabled = _ref.isDisabled;
@@ -46,7 +48,7 @@ export default function baseStyles(validationState, isCompact, appearance) {
         borderColor = "var(--ds-border-success, ".concat(G400, ")");
       }
 
-      var borderColorHover = isFocused ? "var(--ds-border-focused, ".concat(B100, ")") : "var(--ds-border, ".concat(N30, ")");
+      var borderColorHover = isFocused ? "var(--ds-border-focused, ".concat(B100, ")") : "var(--ds-border-input, ".concat(N30, ")");
 
       if (validationState === 'error') {
         borderColorHover = "var(--ds-border-danger, ".concat(R400, ")");

package/dist/esm/version.json

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

package/dist/types/AsyncCreatableSelect.d.ts

@@ -33,6 +33,7 @@ declare const _default: {
     };
     defaultProps: {
         validationState: string;
+        isInvalid: boolean;
         spacing: string;
         onClickPreventDefault: boolean;
         tabSelectsValue: boolean;

package/dist/types/AsyncSelect.d.ts

@@ -33,6 +33,7 @@ declare const _default: {
     };
     defaultProps: {
         validationState: string;
+        isInvalid: boolean;
         spacing: string;
         onClickPreventDefault: boolean;
         tabSelectsValue: boolean;

package/dist/types/CountrySelect.d.ts

@@ -1,6 +1,7 @@
-/// <reference types="react" />
+/** @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.Element;
+declare const CountrySelect: (props: SelectProps<Country>) => jsx.JSX.Element;
 export default CountrySelect;

package/dist/types/CreatableSelect.d.ts

@@ -33,6 +33,7 @@ declare const _default: {
     };
     defaultProps: {
         validationState: string;
+        isInvalid: boolean;
         spacing: string;
         onClickPreventDefault: boolean;
         tabSelectsValue: boolean;

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

@@ -1,7 +1,7 @@
 import React, { PureComponent, ReactNode } from 'react';
 import Select from 'react-select';
 import { PopperProps } from 'react-popper';
-import { OptionType, ActionMeta, ReactSelectProps, StylesConfig, ValueType } from '../types';
+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'>;
@@ -11,7 +11,8 @@ interface PopupSelectTriggerProps {
     'aria-expanded': boolean;
     'aria-controls'?: string;
 }
-export interface PopupSelectProps<Option = OptionType, IsMulti extends boolean = false, Modifiers = string> extends ReactSelectProps<Option, IsMulti> {
+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"
      */
@@ -29,9 +30,14 @@ export interface PopupSelectProps<Option = OptionType, IsMulti extends boolean =
      */
     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.
@@ -59,6 +65,9 @@ export interface PopupSelectProps<Option = OptionType, IsMulti extends boolean =
     }) => ReactNode;
     isOpen?: boolean;
     defaultIsOpen?: boolean;
+    spacing?: string;
+    validationState?: ValidationState;
+    isInvalid?: boolean;
 }
 interface State<Modifiers = string> {
     isOpen: boolean;
@@ -78,8 +87,8 @@ export default class PopupSelect<Option = OptionType, IsMulti extends boolean =
         isOpen: boolean;
         mergedComponents: {
             Control: React.FC<import("../types").ControlProps<OptionType, boolean>>;
-            DropdownIndicator: () => JSX.Element;
-            Menu: ({ children, innerProps, ...props }: import("../types").MenuProps<OptionType, boolean>) => JSX.Element;
+            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>;
     };
@@ -91,6 +100,7 @@ export default class PopupSelect<Option = OptionType, IsMulti extends boolean =
         maxMenuWidth: number;
         minMenuWidth: number;
         popperProps: {};
+        isSearchable: boolean;
         searchThreshold: number;
         styles: {};
         options: never[];
@@ -123,7 +133,7 @@ export default class PopupSelect<Option = OptionType, IsMulti extends boolean =
     getSelectRef: (ref: Select<Option, IsMulti>) => void;
     getItemCount: () => number;
     getMaxHeight: () => number | undefined;
-    showSearchControl: () => boolean;
+    showSearchControl: () => boolean | undefined;
     renderSelect: () => JSX.Element | null;
     render(): JSX.Element;
 }

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

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import { FC, ReactNode, CSSProperties } from 'react';
+import { jsx } from '@emotion/react';
 import { ControlProps, MenuProps, OptionType } from '../types';
 interface MenuDialogProps {
     maxWidth?: number | string;
@@ -12,7 +13,7 @@ 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.Element;
-    Menu: ({ children, innerProps, ...props }: MenuProps<OptionType, boolean>) => JSX.Element;
+    DropdownIndicator: () => jsx.JSX.Element;
+    Menu: ({ children, innerProps, ...props }: MenuProps<OptionType, boolean>) => jsx.JSX.Element;
 };
 export {};

package/dist/types/Select.d.ts

@@ -34,6 +34,7 @@ export declare const SelectWithoutAnalytics: {
     };
     defaultProps: {
         validationState: string;
+        isInvalid: boolean;
         spacing: string;
         onClickPreventDefault: boolean;
         tabSelectsValue: boolean;
@@ -76,6 +77,7 @@ declare const _default: {
     };
     defaultProps: {
         validationState: string;
+        isInvalid: boolean;
         spacing: string;
         onClickPreventDefault: boolean;
         tabSelectsValue: boolean;

package/dist/types/components/index.d.ts

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

package/dist/types/createSelect.d.ts

@@ -35,6 +35,7 @@ export default function createSelect(WrappedComponent: ComponentType<any>): {
     };
     defaultProps: {
         validationState: string;
+        isInvalid: boolean;
         spacing: string;
         onClickPreventDefault: boolean;
         tabSelectsValue: boolean;

package/dist/types/styles.d.ts

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