@atlaskit/select 17.5.0 → 17.6.0

package/dist/esm/createSelect.js

@@ -1,128 +1,94 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-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", "isInvalid", "spacing", "isMulti", "appearance", "ariaLiveMessages"];
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["appearance", "ariaLiveMessages", "components", "isInvalid", "onClickPreventDefault", "spacing", "styles", "tabSelectsValue", "validationState"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-import React, { Component } from 'react';
+import React, { useRef, useEffect, useMemo, forwardRef, useImperativeHandle } from 'react';
 import { mergeStyles } from 'react-select';
-import memoizeOne from 'memoize-one';
-import isEqual from 'react-fast-compare';
 import { Input } from './components/input-aria-describedby';
 import { ClearIndicator, DropdownIndicator, LoadingIndicator, MultiValueRemove, IndicatorSeparator } from './components';
 import baseStyles from './styles';
 import { onFocus, isOptionsGrouped } from './utils/grouped-options-announcement';
 export default function createSelect(WrappedComponent) {
-  var _class;
-  return _class = /*#__PURE__*/function (_Component) {
-    _inherits(AtlaskitSelect, _Component);
-    var _super = _createSuper(AtlaskitSelect);
-    function AtlaskitSelect(props) {
-      var _this;
-      _classCallCheck(this, AtlaskitSelect);
-      _this = _super.call(this, props);
-      _defineProperty(_assertThisInitialized(_this), "components", {});
-      _defineProperty(_assertThisInitialized(_this), "select", null);
-      _defineProperty(_assertThisInitialized(_this), "cacheComponents", function (components) {
-        _this.components = _objectSpread({
-          ClearIndicator: ClearIndicator ? ClearIndicator : undefined,
-          DropdownIndicator: DropdownIndicator,
-          LoadingIndicator: LoadingIndicator,
-          MultiValueRemove: MultiValueRemove,
-          IndicatorSeparator: IndicatorSeparator,
-          Input: Input
-        }, components);
-      });
-      _defineProperty(_assertThisInitialized(_this), "onSelectRef", function (ref) {
-        _this.select = ref;
-      });
-      _this.cacheComponents = memoizeOne(_this.cacheComponents, isEqual).bind(_assertThisInitialized(_this));
-      _this.cacheComponents(props.components || {});
-      return _this;
-    }
-    _createClass(AtlaskitSelect, [{
-      key: "UNSAFE_componentWillReceiveProps",
-      value: function UNSAFE_componentWillReceiveProps(nextProps) {
-        this.cacheComponents(nextProps.components);
-      }
-    }, {
-      key: "focus",
-      value: function focus() {
-        if (this.select) {
-          this.select.focus();
-        }
-      }
-    }, {
-      key: "blur",
-      value: function blur() {
-        if (this.select) {
-          this.select.blur();
+  var AtlaskitSelect = /*#__PURE__*/forwardRef(function AtlaskitSelect(props, forwardedRef) {
+    var appearance = props.appearance,
+      ariaLiveMessages = props.ariaLiveMessages,
+      componentsProp = props.components,
+      isInvalid = props.isInvalid,
+      _props$onClickPrevent = props.onClickPreventDefault,
+      onClickPreventDefault = _props$onClickPrevent === void 0 ? true : _props$onClickPrevent,
+      _props$spacing = props.spacing,
+      spacing = _props$spacing === void 0 ? 'default' : _props$spacing,
+      _props$styles = props.styles,
+      styles = _props$styles === void 0 ? {} : _props$styles,
+      _props$tabSelectsValu = props.tabSelectsValue,
+      tabSelectsValue = _props$tabSelectsValu === void 0 ? false : _props$tabSelectsValu,
+      _props$validationStat = props.validationState,
+      validationState = _props$validationStat === void 0 ? 'default' : _props$validationStat,
+      restProps = _objectWithoutProperties(props, _excluded);
+    var internalSelectRef = useRef(null);
+    var components = useMemo(function () {
+      return _objectSpread({
+        ClearIndicator: ClearIndicator,
+        DropdownIndicator: DropdownIndicator,
+        LoadingIndicator: LoadingIndicator,
+        MultiValueRemove: MultiValueRemove,
+        IndicatorSeparator: IndicatorSeparator,
+        Input: Input
+      }, componentsProp);
+    }, [componentsProp]);
+    var descriptionId = props['aria-describedby'];
+    var isSearchable = props.isSearchable;
+    useEffect(function () {
+      if (!isSearchable && descriptionId) {
+        var _internalSelectRef$cu;
+        // when isSearchable is false, react-select will create its own dummy input instead of using ours,
+        // so we need to manually add the additional aria-describedby using ref.
+        var input = (_internalSelectRef$cu = internalSelectRef.current) === null || _internalSelectRef$cu === void 0 ? void 0 : _internalSelectRef$cu.inputRef;
+        var ariaDescribedby = input === null || input === void 0 ? void 0 : input.getAttribute('aria-describedby');
+        if (!(ariaDescribedby !== null && ariaDescribedby !== void 0 && ariaDescribedby.includes(descriptionId))) {
+          input === null || input === void 0 || input.setAttribute('aria-describedby', "".concat(ariaDescribedby, " ").concat(descriptionId));
         }
       }
-    }, {
-      key: "componentDidMount",
-      value: function componentDidMount() {
-        var descriptionId = this.props['aria-describedby'];
-        if (!this.props.isSearchable && descriptionId) {
-          var _this$select;
-          // when isSearchable is false, react-select will create its own dummy input instead of using ours,
-          // so we need to manually add the additional aria-describedby using ref.
-          var input = (_this$select = this.select) === null || _this$select === void 0 ? void 0 : _this$select.inputRef;
-          var ariaDescribedby = input === null || input === void 0 ? void 0 : input.getAttribute('aria-describedby');
-          if (!(ariaDescribedby !== null && ariaDescribedby !== void 0 && ariaDescribedby.includes(descriptionId))) {
-            input === null || input === void 0 || input.setAttribute('aria-describedby', "".concat(ariaDescribedby, " ").concat(descriptionId));
-          }
-        }
-      }
-    }, {
-      key: "render",
-      value: function render() {
-        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,
-          ariaLiveMessages = _this$props.ariaLiveMessages,
-          props = _objectWithoutProperties(_this$props, _excluded);
-        var isCompact = spacing === 'compact';
+    }, [descriptionId, isSearchable]);
+    var isCompact = spacing === 'compact';
 
-        // props must be spread first to stop `components` being overridden
-        return /*#__PURE__*/React.createElement(WrappedComponent, _extends({
-          ref: this.onSelectRef,
-          isMulti: isMulti,
-          "aria-live": "assertive",
-          ariaLiveMessages: isOptionsGrouped(this.props.options) ? _objectSpread({
-            onFocus: onFocus
-          }, ariaLiveMessages) : _objectSpread({}, ariaLiveMessages)
-        }, props, {
-          components: this.components,
-          styles: mergeStyles(baseStyles(
-          // This will cover both props for invalid state while giving priority to isInvalid. When cleaning up validationState, we can just keep the inner condition.
-          typeof isInvalid !== 'undefined' ? isInvalid ? 'error' : 'default' : validationState, isCompact, this.props.appearance || 'default'), styles)
-        }));
-      }
-    }]);
-    return AtlaskitSelect;
-  }(Component), _defineProperty(_class, "defaultProps", {
-    validationState: 'default',
-    // TODO: uncomment the next line when cleaning up validationState prop so it has a default value
-    // isInvalid: false,
-    spacing: 'default',
-    onClickPreventDefault: true,
-    tabSelectsValue: false,
-    components: {
-      Input: Input
-    },
-    styles: {}
-  }), _class;
+    /**
+     * The following `useImperativeHandle` hook exists for the sake of backwards compatibility.
+     * This component used to be a class component which set the value of the `ref` prop to object with the properties and value as below.
+     * This has lead to slightly odd usage of refs with this component, e.g. `myRef.current.select.select.controlRef` instead of just `myRef.current.select.controlRef`
+     * In the next major release, this should removed and the ref should be passed directly to the wrapped component (given users have updated usage)
+     * More info https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/88021/overview
+     */
+    useImperativeHandle(forwardedRef, function () {
+      return {
+        select: internalSelectRef.current,
+        focus: function focus() {
+          var _internalSelectRef$cu2;
+          return (_internalSelectRef$cu2 = internalSelectRef.current) === null || _internalSelectRef$cu2 === void 0 ? void 0 : _internalSelectRef$cu2.focus();
+        },
+        blur: function blur() {
+          var _internalSelectRef$cu3;
+          return (_internalSelectRef$cu3 = internalSelectRef.current) === null || _internalSelectRef$cu3 === void 0 ? void 0 : _internalSelectRef$cu3.blur();
+        }
+      };
+    }, []);
+    return /*#__PURE__*/React.createElement(WrappedComponent, _extends({
+      ref: internalSelectRef,
+      "aria-live": "assertive",
+      ariaLiveMessages: isOptionsGrouped(props.options) ? _objectSpread({
+        onFocus: onFocus
+      }, ariaLiveMessages) : _objectSpread({}, ariaLiveMessages),
+      tabSelectsValue: tabSelectsValue,
+      onClickPreventDefault: onClickPreventDefault
+    }, restProps, {
+      components: components,
+      styles: mergeStyles(baseStyles(
+      // This will cover both props for invalid state while giving priority to isInvalid. When cleaning up validationState, we can just keep the inner condition.
+      typeof isInvalid !== 'undefined' ? isInvalid ? 'error' : 'default' : validationState, isCompact, appearance || 'default'), styles)
+    }));
+  });
+  AtlaskitSelect.displayName = 'AtlaskitSelect';
+  return AtlaskitSelect;
 }

package/dist/types/AsyncCreatableSelect.d.ts

@@ -1,46 +1,9 @@
 /// <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/dist/declarations/src/components").SelectComponents<Option, IsMulti, import("react-select").GroupBase<Option>>>;
+declare const _default: <Option extends unknown = import("./types").OptionType, IsMulti extends boolean = false>(props: (import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>) & {
+    ref?: import("react").Ref<{
         select: import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>> | null;
-        UNSAFE_componentWillReceiveProps(nextProps: import("./types").SelectProps<Option, IsMulti>): void;
-        cacheComponents: (components: Partial<import("react-select/dist/declarations/src/components").SelectComponents<Option, IsMulti, import("react-select").GroupBase<Option>>>) => void;
-        focus(): void;
-        blur(): void;
-        onSelectRef: (ref: import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>>) => void;
-        componentDidMount(): void;
-        render(): JSX.Element;
-        context: any;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<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> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>> & Readonly<{
-            children?: import("react").ReactNode;
-        }>;
-        state: Readonly<{}>;
-        refs: {
-            [key: string]: import("react").ReactInstance;
-        };
-        shouldComponentUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<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> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, prevState: Readonly<{}>, snapshot?: any): void;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): void;
-    };
-    defaultProps: {
-        validationState: string;
-        spacing: string;
-        onClickPreventDefault: boolean;
-        tabSelectsValue: boolean;
-        components: {
-            Input: typeof import("./components/input-aria-describedby").Input;
-        };
-        styles: {};
-    };
-    contextType?: import("react").Context<any> | undefined;
-};
+        blur: () => void;
+        focus: () => void;
+    }> | undefined;
+}) => JSX.Element;
 export default _default;

package/dist/types/AsyncSelect.d.ts

@@ -1,46 +1,9 @@
 /// <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/dist/declarations/src/components").SelectComponents<Option, IsMulti, import("react-select").GroupBase<Option>>>;
+declare const _default: <Option extends unknown = import("./types").OptionType, IsMulti extends boolean = false>(props: (import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>) & {
+    ref?: import("react").Ref<{
         select: import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>> | null;
-        UNSAFE_componentWillReceiveProps(nextProps: import("./types").SelectProps<Option, IsMulti>): void;
-        cacheComponents: (components: Partial<import("react-select/dist/declarations/src/components").SelectComponents<Option, IsMulti, import("react-select").GroupBase<Option>>>) => void;
-        focus(): void;
-        blur(): void;
-        onSelectRef: (ref: import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>>) => void;
-        componentDidMount(): void;
-        render(): JSX.Element;
-        context: any;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<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> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>> & Readonly<{
-            children?: import("react").ReactNode;
-        }>;
-        state: Readonly<{}>;
-        refs: {
-            [key: string]: import("react").ReactInstance;
-        };
-        shouldComponentUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<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> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, prevState: Readonly<{}>, snapshot?: any): void;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): void;
-    };
-    defaultProps: {
-        validationState: string;
-        spacing: string;
-        onClickPreventDefault: boolean;
-        tabSelectsValue: boolean;
-        components: {
-            Input: typeof import("./components/input-aria-describedby").Input;
-        };
-        styles: {};
-    };
-    contextType?: import("react").Context<any> | undefined;
-};
+        blur: () => void;
+        focus: () => void;
+    }> | undefined;
+}) => JSX.Element;
 export default _default;

package/dist/types/CreatableSelect.d.ts

@@ -1,46 +1,9 @@
 /// <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/dist/declarations/src/components").SelectComponents<Option, IsMulti, import("react-select").GroupBase<Option>>>;
+declare const _default: <Option extends unknown = import("./types").OptionType, IsMulti extends boolean = false>(props: (import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>) & {
+    ref?: import("react").Ref<{
         select: import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>> | null;
-        UNSAFE_componentWillReceiveProps(nextProps: import("./types").SelectProps<Option, IsMulti>): void;
-        cacheComponents: (components: Partial<import("react-select/dist/declarations/src/components").SelectComponents<Option, IsMulti, import("react-select").GroupBase<Option>>>) => void;
-        focus(): void;
-        blur(): void;
-        onSelectRef: (ref: import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>>) => void;
-        componentDidMount(): void;
-        render(): JSX.Element;
-        context: any;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<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> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>> & Readonly<{
-            children?: import("react").ReactNode;
-        }>;
-        state: Readonly<{}>;
-        refs: {
-            [key: string]: import("react").ReactInstance;
-        };
-        shouldComponentUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<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> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, prevState: Readonly<{}>, snapshot?: any): void;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): void;
-    };
-    defaultProps: {
-        validationState: string;
-        spacing: string;
-        onClickPreventDefault: boolean;
-        tabSelectsValue: boolean;
-        components: {
-            Input: typeof import("./components/input-aria-describedby").Input;
-        };
-        styles: {};
-    };
-    contextType?: import("react").Context<any> | undefined;
-};
+        blur: () => void;
+        focus: () => void;
+    }> | undefined;
+}) => JSX.Element;
 export default _default;

package/dist/types/Select.d.ts

@@ -1,90 +1,16 @@
 /// <reference types="react" />
-export declare const SelectWithoutAnalytics: {
-    new <Option = import("./types").OptionType, IsMulti extends boolean = false>(props: import("./types").SelectProps<Option, IsMulti>): {
-        components: Partial<import("react-select/dist/declarations/src/components").SelectComponents<Option, IsMulti, import("react-select").GroupBase<Option>>>;
+export declare const SelectWithoutAnalytics: <Option extends unknown = import("./types").OptionType, IsMulti extends boolean = false>(props: (import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>) & {
+    ref?: import("react").Ref<{
         select: import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>> | null;
-        UNSAFE_componentWillReceiveProps(nextProps: import("./types").SelectProps<Option, IsMulti>): void;
-        cacheComponents: (components: Partial<import("react-select/dist/declarations/src/components").SelectComponents<Option, IsMulti, import("react-select").GroupBase<Option>>>) => void;
-        focus(): void;
-        blur(): void;
-        onSelectRef: (ref: import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>>) => void;
-        componentDidMount(): void;
-        render(): JSX.Element;
-        context: any;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<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> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>> & Readonly<{
-            children?: import("react").ReactNode;
-        }>;
-        state: Readonly<{}>;
-        refs: {
-            [key: string]: import("react").ReactInstance;
-        };
-        shouldComponentUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<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> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, prevState: Readonly<{}>, snapshot?: any): void;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): void;
-    };
-    defaultProps: {
-        validationState: string;
-        spacing: string;
-        onClickPreventDefault: boolean;
-        tabSelectsValue: boolean;
-        components: {
-            Input: typeof import("./components/input-aria-describedby").Input;
-        };
-        styles: {};
-    };
-    contextType?: import("react").Context<any> | undefined;
-};
-declare const Select: {
-    new <Option = import("./types").OptionType, IsMulti extends boolean = false>(props: import("./types").SelectProps<Option, IsMulti>): {
-        components: Partial<import("react-select/dist/declarations/src/components").SelectComponents<Option, IsMulti, import("react-select").GroupBase<Option>>>;
+        blur: () => void;
+        focus: () => void;
+    }> | undefined;
+}) => JSX.Element;
+declare const Select: <Option extends unknown = import("./types").OptionType, IsMulti extends boolean = false>(props: (import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>) & {
+    ref?: import("react").Ref<{
         select: import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>> | null;
-        UNSAFE_componentWillReceiveProps(nextProps: import("./types").SelectProps<Option, IsMulti>): void;
-        cacheComponents: (components: Partial<import("react-select/dist/declarations/src/components").SelectComponents<Option, IsMulti, import("react-select").GroupBase<Option>>>) => void;
-        focus(): void;
-        blur(): void;
-        onSelectRef: (ref: import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>>) => void;
-        componentDidMount(): void;
-        render(): JSX.Element;
-        context: any;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<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> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>> & Readonly<{
-            children?: import("react").ReactNode;
-        }>;
-        state: Readonly<{}>;
-        refs: {
-            [key: string]: import("react").ReactInstance;
-        };
-        shouldComponentUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<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> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, prevState: Readonly<{}>, snapshot?: any): void;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): void;
-    };
-    defaultProps: {
-        validationState: string;
-        spacing: string;
-        onClickPreventDefault: boolean;
-        tabSelectsValue: boolean;
-        components: {
-            Input: typeof import("./components/input-aria-describedby").Input;
-        };
-        styles: {};
-    };
-    contextType?: import("react").Context<any> | undefined;
-};
+        blur: () => void;
+        focus: () => void;
+    }> | undefined;
+}) => JSX.Element;
 export default Select;

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

@@ -1,5 +1,6 @@
-import { FC } from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { ClearIndicatorProps, DropdownIndicatorProps, LoadingIndicatorProps } from '../types';
-export declare const ClearIndicator: FC<ClearIndicatorProps<any>>;
-export declare const DropdownIndicator: FC<DropdownIndicatorProps<any>>;
-export declare const LoadingIndicator: FC<LoadingIndicatorProps<any>>;
+export declare const ClearIndicator: <Option extends unknown, IsMulti extends boolean = false>(props: ClearIndicatorProps<Option, IsMulti>) => jsx.JSX.Element;
+export declare const DropdownIndicator: <Option extends unknown, IsMulti extends boolean = false>(props: DropdownIndicatorProps<Option, IsMulti>) => jsx.JSX.Element;
+export declare const LoadingIndicator: <Option extends unknown, IsMulti extends boolean = false>(props: LoadingIndicatorProps<Option, IsMulti>) => jsx.JSX.Element;

package/dist/types/createSelect.d.ts

@@ -1,49 +1,13 @@
-import React, { ComponentType } from 'react';
-import { type GroupBase } from 'react-select';
+import { type ComponentType, type Ref } from 'react';
 import BaseSelect from 'react-select/base';
-import { Input } from './components/input-aria-describedby';
 import { SelectProps, OptionType, AsyncSelectProps, CreatableSelectProps } 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/dist/declarations/src/components").SelectComponents<Option, IsMulti, GroupBase<Option>>>;
-        select: BaseSelect | null;
-        UNSAFE_componentWillReceiveProps(nextProps: SelectProps<Option, IsMulti>): void;
-        cacheComponents: (components: Partial<import("react-select/dist/declarations/src/components").SelectComponents<Option, IsMulti, GroupBase<Option>>>) => void;
-        focus(): void;
-        blur(): void;
-        onSelectRef: (ref: BaseSelect) => void;
-        componentDidMount(): void;
-        render(): JSX.Element;
-        context: any;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<SelectProps<Option, IsMulti> | AsyncSelectProps<Option, IsMulti> | CreatableSelectProps<Option, IsMulti>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
-        forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<SelectProps<Option, IsMulti> | AsyncSelectProps<Option, IsMulti> | CreatableSelectProps<Option, IsMulti>> & Readonly<{
-            children?: React.ReactNode;
-        }>;
-        state: Readonly<{}>;
-        refs: {
-            [key: string]: React.ReactInstance;
-        };
-        shouldComponentUpdate?(nextProps: Readonly<SelectProps<Option, IsMulti> | AsyncSelectProps<Option, IsMulti> | CreatableSelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): boolean;
-        componentWillUnmount?(): void;
-        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<SelectProps<Option, IsMulti> | AsyncSelectProps<Option, IsMulti> | CreatableSelectProps<Option, IsMulti>>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<SelectProps<Option, IsMulti> | AsyncSelectProps<Option, IsMulti> | CreatableSelectProps<Option, IsMulti>>, prevState: Readonly<{}>, snapshot?: any): void;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<SelectProps<Option, IsMulti> | AsyncSelectProps<Option, IsMulti> | CreatableSelectProps<Option, IsMulti>>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<SelectProps<Option, IsMulti> | AsyncSelectProps<Option, IsMulti> | CreatableSelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<SelectProps<Option, IsMulti> | AsyncSelectProps<Option, IsMulti> | CreatableSelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): void;
-    };
-    defaultProps: {
-        validationState: string;
-        spacing: string;
-        onClickPreventDefault: boolean;
-        tabSelectsValue: boolean;
-        components: {
-            Input: typeof Input;
-        };
-        styles: {};
-    };
-    contextType?: React.Context<any> | undefined;
+type AtlaskitSelectProps<Option extends unknown, IsMulti extends boolean> = SelectProps<Option, IsMulti> | AsyncSelectProps<Option, IsMulti> | CreatableSelectProps<Option, IsMulti>;
+type AtlaskitSelectRefType = {
+    select: BaseSelect | null;
+    blur: () => void;
+    focus: () => void;
 };
+export default function createSelect(WrappedComponent: ComponentType<any>): <Option extends unknown = OptionType, IsMulti extends boolean = false>(props: AtlaskitSelectProps<Option, IsMulti> & {
+    ref?: Ref<AtlaskitSelectRefType>;
+}) => JSX.Element;
+export {};

package/dist/types/utils/grouped-options-announcement.d.ts

@@ -1,4 +1,4 @@
 import { AriaOnFocusProps, GroupBase, OptionsOrGroups } from 'react-select';
 import { GroupType, OptionType } from '../types';
 export declare function onFocus(props: AriaOnFocusProps<OptionType, GroupBase<OptionType>>): string;
-export declare const isOptionsGrouped: (arr: OptionsOrGroups<OptionType, GroupType<OptionType>>) => boolean;
+export declare const isOptionsGrouped: (arr: OptionsOrGroups<OptionType, GroupType<OptionType>> | undefined) => boolean | undefined;