@atlaskit/select 17.6.0 → 17.7.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/select
 
+## 17.7.0
+
+### Minor Changes
+
+- [#85404](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/85404) [`54d6e7a58943`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/54d6e7a58943) - use `@atlaskit/select` component in `PopupSelect`.
+  This allows `PopupSelect` to receive all the improvements from `@atlaskit/select`.
+
+## 17.6.1
+
+### Patch Changes
+
+- [#94316](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/94316) [`35fd5ed8e1d7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/35fd5ed8e1d7) - Upgrading internal dependency `bind-event-listener` to `@^3.0.0`
+
 ## 17.6.0
 
 ### Minor Changes

package/dist/cjs/PopupSelect/PopupSelect.js

@@ -23,6 +23,7 @@ var _reactUid = require("react-uid");
 var _reactPopper = require("react-popper");
 var _reactNodeResolver = _interopRequireDefault(require("react-node-resolver"));
 var _shallowEqual = require("shallow-equal");
+var _Select = _interopRequireDefault(require("../Select"));
 var _colors = require("@atlaskit/theme/colors");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _components = require("./components");
@@ -82,7 +83,6 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
     }
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "menuRef", null);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "selectRef", null);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "targetRef", null);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "unbindWindowClick", null);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "unbindWindowKeydown", null);
@@ -187,7 +187,8 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
         isOpen: true
       });
       if (_this.selectRef) {
-        _this.selectRef.openMenu('first');
+        var _this$selectRef$selec;
+        (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.use-default-select-in-popup-select_46rmj') ? (_this$selectRef$selec = _this.selectRef.select) === null || _this$selectRef$selec === void 0 ? void 0 : _this$selectRef$selec.openMenu('first') : _this.selectRef.openMenu('first');
       }
       if (typeof window === 'undefined') {
         return;
@@ -277,6 +278,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
       return count;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getMaxHeight", function () {
+      var _this$selectRef$selec2;
       var maxMenuHeight = _this.props.maxMenuHeight;
       if (!_this.selectRef) {
         return maxMenuHeight;
@@ -284,7 +286,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
 
       // subtract the control height to maintain consistency
       var showSearchControl = _this.showSearchControl();
-      var controlRef = _this.selectRef.controlRef;
+      var controlRef = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.use-default-select-in-popup-select_46rmj') ? (_this$selectRef$selec2 = _this.selectRef.select) === null || _this$selectRef$selec2 === void 0 ? void 0 : _this$selectRef$selec2.controlRef : _this.selectRef.controlRef;
       var offsetHeight = showSearchControl && controlRef ? controlRef.offsetHeight : 0;
       var maxHeight = maxMenuHeight - offsetHeight;
       return maxHeight;
@@ -328,6 +330,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
           return placeholder;
         }
       };
+      var InternalSelect = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.use-default-select-in-popup-select_46rmj') ? _Select.default : _reactSelect.default;
       var popper = /*#__PURE__*/_react.default.createElement(_reactPopper.Popper, (0, _extends2.default)({}, mergedPopperProps, {
         onFirstUpdate: function onFirstUpdate(state) {
           var _mergedPopperProps$on;
@@ -350,7 +353,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
         }, /*#__PURE__*/_react.default.createElement(_reactFocusLock.default, {
           disabled: !focusLockEnabled,
           returnFocus: true
-        }, /*#__PURE__*/_react.default.createElement(_reactSelect.default, (0, _extends2.default)({
+        }, /*#__PURE__*/_react.default.createElement(InternalSelect, (0, _extends2.default)({
           "aria-label": getLabel(),
           backspaceRemovesValue: false,
           controlShouldRenderValue: false,

package/dist/cjs/Select.js

@@ -9,7 +9,7 @@ var _reactSelect = _interopRequireDefault(require("react-select"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _createSelect = _interopRequireDefault(require("./createSelect"));
 var packageName = "@atlaskit/select";
-var packageVersion = "17.6.0";
+var packageVersion = "17.7.0";
 var SelectWithoutAnalytics = exports.SelectWithoutAnalytics = (0, _createSelect.default)(_reactSelect.default);
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
 var Select = (0, _analyticsNext.withAnalyticsContext)({

package/dist/es2019/PopupSelect/PopupSelect.js

@@ -8,6 +8,7 @@ import { uid } from 'react-uid';
 import { Manager, Reference, Popper } from 'react-popper';
 import NodeResolver from 'react-node-resolver';
 import { shallowEqualObjects } from 'shallow-equal';
+import DefaultSelect from '../Select';
 import { N80 } from '@atlaskit/theme/colors';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { MenuDialog, DummyControl, defaultComponents } from './components';
@@ -49,7 +50,6 @@ export default class PopupSelect extends PureComponent {
     var _this$defaultOpenStat;
     super(...args);
     _defineProperty(this, "menuRef", null);
-    _defineProperty(this, "selectRef", null);
     _defineProperty(this, "targetRef", null);
     _defineProperty(this, "unbindWindowClick", null);
     _defineProperty(this, "unbindWindowKeydown", null);
@@ -159,7 +159,8 @@ export default class PopupSelect extends PureComponent {
         isOpen: true
       });
       if (this.selectRef) {
-        this.selectRef.openMenu('first');
+        var _this$selectRef$selec;
+        getBooleanFF('platform.design-system-team.use-default-select-in-popup-select_46rmj') ? (_this$selectRef$selec = this.selectRef.select) === null || _this$selectRef$selec === void 0 ? void 0 : _this$selectRef$selec.openMenu('first') : this.selectRef.openMenu('first');
       }
       if (typeof window === 'undefined') {
         return;
@@ -247,6 +248,7 @@ export default class PopupSelect extends PureComponent {
       return count;
     });
     _defineProperty(this, "getMaxHeight", () => {
+      var _this$selectRef$selec2;
       const {
         maxMenuHeight
       } = this.props;
@@ -256,9 +258,7 @@ export default class PopupSelect extends PureComponent {
 
       // subtract the control height to maintain consistency
       const showSearchControl = this.showSearchControl();
-      const {
-        controlRef
-      } = this.selectRef;
+      let controlRef = getBooleanFF('platform.design-system-team.use-default-select-in-popup-select_46rmj') ? (_this$selectRef$selec2 = this.selectRef.select) === null || _this$selectRef$selec2 === void 0 ? void 0 : _this$selectRef$selec2.controlRef : this.selectRef.controlRef;
       const offsetHeight = showSearchControl && controlRef ? controlRef.offsetHeight : 0;
       const maxHeight = maxMenuHeight - offsetHeight;
       return maxHeight;
@@ -306,6 +306,7 @@ export default class PopupSelect extends PureComponent {
           return placeholder;
         }
       };
+      const InternalSelect = getBooleanFF('platform.design-system-team.use-default-select-in-popup-select_46rmj') ? DefaultSelect : Select;
       const popper = /*#__PURE__*/React.createElement(Popper, _extends({}, mergedPopperProps, {
         onFirstUpdate: state => {
           var _mergedPopperProps$on;
@@ -328,7 +329,7 @@ export default class PopupSelect extends PureComponent {
       }, /*#__PURE__*/React.createElement(FocusLock, {
         disabled: !focusLockEnabled,
         returnFocus: true
-      }, /*#__PURE__*/React.createElement(Select, _extends({
+      }, /*#__PURE__*/React.createElement(InternalSelect, _extends({
         "aria-label": getLabel(),
         backspaceRemovesValue: false,
         controlShouldRenderValue: false,

package/dist/es2019/Select.js

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

package/dist/esm/PopupSelect/PopupSelect.js

@@ -20,6 +20,7 @@ import { uid } from 'react-uid';
 import { Manager, Reference, Popper } from 'react-popper';
 import NodeResolver from 'react-node-resolver';
 import { shallowEqualObjects } from 'shallow-equal';
+import DefaultSelect from '../Select';
 import { N80 } from '@atlaskit/theme/colors';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { MenuDialog, DummyControl, defaultComponents } from './components';
@@ -72,7 +73,6 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
     }
     _this = _super.call.apply(_super, [this].concat(args));
     _defineProperty(_assertThisInitialized(_this), "menuRef", null);
-    _defineProperty(_assertThisInitialized(_this), "selectRef", null);
     _defineProperty(_assertThisInitialized(_this), "targetRef", null);
     _defineProperty(_assertThisInitialized(_this), "unbindWindowClick", null);
     _defineProperty(_assertThisInitialized(_this), "unbindWindowKeydown", null);
@@ -177,7 +177,8 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         isOpen: true
       });
       if (_this.selectRef) {
-        _this.selectRef.openMenu('first');
+        var _this$selectRef$selec;
+        getBooleanFF('platform.design-system-team.use-default-select-in-popup-select_46rmj') ? (_this$selectRef$selec = _this.selectRef.select) === null || _this$selectRef$selec === void 0 ? void 0 : _this$selectRef$selec.openMenu('first') : _this.selectRef.openMenu('first');
       }
       if (typeof window === 'undefined') {
         return;
@@ -267,6 +268,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
       return count;
     });
     _defineProperty(_assertThisInitialized(_this), "getMaxHeight", function () {
+      var _this$selectRef$selec2;
       var maxMenuHeight = _this.props.maxMenuHeight;
       if (!_this.selectRef) {
         return maxMenuHeight;
@@ -274,7 +276,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
 
       // subtract the control height to maintain consistency
       var showSearchControl = _this.showSearchControl();
-      var controlRef = _this.selectRef.controlRef;
+      var controlRef = getBooleanFF('platform.design-system-team.use-default-select-in-popup-select_46rmj') ? (_this$selectRef$selec2 = _this.selectRef.select) === null || _this$selectRef$selec2 === void 0 ? void 0 : _this$selectRef$selec2.controlRef : _this.selectRef.controlRef;
       var offsetHeight = showSearchControl && controlRef ? controlRef.offsetHeight : 0;
       var maxHeight = maxMenuHeight - offsetHeight;
       return maxHeight;
@@ -318,6 +320,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
           return placeholder;
         }
       };
+      var InternalSelect = getBooleanFF('platform.design-system-team.use-default-select-in-popup-select_46rmj') ? DefaultSelect : Select;
       var popper = /*#__PURE__*/React.createElement(Popper, _extends({}, mergedPopperProps, {
         onFirstUpdate: function onFirstUpdate(state) {
           var _mergedPopperProps$on;
@@ -340,7 +343,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         }, /*#__PURE__*/React.createElement(FocusLock, {
           disabled: !focusLockEnabled,
           returnFocus: true
-        }, /*#__PURE__*/React.createElement(Select, _extends({
+        }, /*#__PURE__*/React.createElement(InternalSelect, _extends({
           "aria-label": getLabel(),
           backspaceRemovesValue: false,
           controlShouldRenderValue: false,

package/dist/esm/Select.js

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

package/dist/types/AsyncCreatableSelect.d.ts

@@ -1,9 +1,5 @@
 /// <reference types="react" />
 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;
-        blur: () => void;
-        focus: () => void;
-    }> | undefined;
+    ref?: import("react").Ref<import("./types").AtlaskitSelectRefType> | undefined;
 }) => JSX.Element;
 export default _default;

package/dist/types/AsyncSelect.d.ts

@@ -1,9 +1,5 @@
 /// <reference types="react" />
 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;
-        blur: () => void;
-        focus: () => void;
-    }> | undefined;
+    ref?: import("react").Ref<import("./types").AtlaskitSelectRefType> | undefined;
 }) => JSX.Element;
 export default _default;

package/dist/types/CreatableSelect.d.ts

@@ -1,9 +1,5 @@
 /// <reference types="react" />
 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;
-        blur: () => void;
-        focus: () => void;
-    }> | undefined;
+    ref?: import("react").Ref<import("./types").AtlaskitSelectRefType> | undefined;
 }) => JSX.Element;
 export default _default;

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

@@ -1,7 +1,6 @@
 import React, { KeyboardEventHandler, PureComponent, ReactNode } from 'react';
-import BaseSelect from 'react-select/base';
 import { PopperProps } from 'react-popper';
-import { OptionType, ActionMeta, ReactSelectProps, StylesConfig, ValueType, ValidationState } from '../types';
+import { OptionType, ActionMeta, ReactSelectProps, StylesConfig, ValueType, ValidationState, AtlaskitSelectRefType } from '../types';
 import { UnbindFn } from 'bind-event-listener';
 type defaultModifiers = 'offset' | 'preventOverflow';
 type PopperPropsNoChildren<Modifiers> = Omit<PopperProps<Modifiers>, 'children'>;
@@ -68,13 +67,14 @@ export interface PopupSelectProps<Option = OptionType, IsMulti extends boolean =
     isOpen?: boolean;
     defaultIsOpen?: boolean;
     /** Use this to set whether the component uses compact or standard spacing. */
-    spacing?: string;
+    spacing?: 'default' | 'compact';
     /** @deprecated Use isInvalid instead. The state of validation if used in a form */
     validationState?: ValidationState;
     /** This prop indicates if the component is in an error state. */
     isInvalid?: boolean;
     /** This gives an accessible name to the input for people who use assistive technology. */
     label?: string;
+    /** The `testId` prop appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests. It will be set on the menu element when defined: `{testId}--menu` */
     testId?: string;
 }
 interface State<Modifiers = string> {
@@ -85,7 +85,7 @@ interface State<Modifiers = string> {
 }
 export default class PopupSelect<Option = OptionType, IsMulti extends boolean = false, Modifiers = ModifierList> extends PureComponent<PopupSelectProps<Option, IsMulti, Modifiers>, State> {
     menuRef: HTMLElement | null;
-    selectRef: BaseSelect<Option, IsMulti> | null;
+    selectRef: any;
     targetRef: HTMLElement | null;
     unbindWindowClick: UnbindFn | null;
     unbindWindowKeydown: UnbindFn | null;
@@ -142,7 +142,7 @@ export default class PopupSelect<Option = OptionType, IsMulti extends boolean =
     }) => void;
     resolveTargetRef: (popperRef: React.Ref<HTMLElement>) => (ref: HTMLElement) => void;
     resolveMenuRef: (popperRef: React.Ref<HTMLElement>) => (ref: HTMLElement) => void;
-    getSelectRef: (ref: BaseSelect<Option, IsMulti>) => void;
+    getSelectRef: (ref: AtlaskitSelectRefType) => void;
     getItemCount: () => number;
     getMaxHeight: () => number | undefined;
     showSearchControl: () => boolean | undefined;

package/dist/types/Select.d.ts

@@ -1,16 +1,8 @@
 /// <reference types="react" />
 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;
-        blur: () => void;
-        focus: () => void;
-    }> | undefined;
+    ref?: import("react").Ref<import("./types").AtlaskitSelectRefType> | 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;
-        blur: () => void;
-        focus: () => void;
-    }> | undefined;
+    ref?: import("react").Ref<import("./types").AtlaskitSelectRefType> | undefined;
 }) => JSX.Element;
 export default Select;

package/dist/types/createSelect.d.ts

@@ -1,12 +1,6 @@
 import { type ComponentType, type Ref } from 'react';
-import BaseSelect from 'react-select/base';
-import { SelectProps, OptionType, AsyncSelectProps, CreatableSelectProps } from './types';
+import { SelectProps, OptionType, AsyncSelectProps, CreatableSelectProps, AtlaskitSelectRefType } from './types';
 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;

package/dist/types/types.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 import { SelectInstance, Props as ReactSelectProps, FormatOptionLabelMeta, OnChangeValue as RSValueType, ActionMeta as RSActionMeta, GroupBase as GroupType, Options as RSOptionsType, SelectComponentsConfig as RSSelectComponentsConfig, StylesConfig as RSStylesConfig, InputActionMeta, ClearIndicatorProps, DropdownIndicatorProps, IndicatorSeparatorProps, LoadingIndicatorProps, NoticeProps, ControlProps as RSControlProps, GroupProps as RSGroupProps, InputProps, MenuProps as RSMenuProps, MenuListProps as RSMenuListComponentProps, MultiValueProps, OptionProps as ReactSelectOptionProps, PlaceholderProps as RSPlaceholderProps, SingleValueProps, ValueContainerProps as RSValueContainerProps, MultiValueRemoveProps } from 'react-select';
+import BaseSelect from 'react-select/base';
 import { AsyncProps } from 'react-select/async';
 import { CreatableProps } from 'react-select/creatable';
 export type ValidationState = 'default' | 'error' | 'success';
@@ -28,7 +29,13 @@ interface CustomSelectProps extends WithAnalyticsEventsProps {
     spacing?: 'compact' | 'default';
     /** This prop affects the backgroundColor and border of the Select field. 'subtle' makes these transparent while 'none' prevents all field styling. Take care when using the none appearance as this doesn't include accessible interactions. */
     appearance?: 'default' | 'subtle' | 'none';
-    /** Prop for testing */
+    /**
+     A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
+  
+     **WARNING:** This prop is currently broken and a test ID will not be added to select.
+     Please refer to the [select testing page](https://atlassian.design/components/select/testing)
+     for guidance on alternatives to identifying select in tests.
+     */
     testId?: string;
     /** This prop indicates if the component is in an error state */
     isInvalid?: boolean;
@@ -52,6 +59,11 @@ export type MenuListComponentProps<Option, IsMulti extends boolean = false> = RS
 export type PlaceholderProps<Option, IsMulti extends boolean = false> = RSPlaceholderProps<Option, IsMulti>;
 export type ValueContainerProps<Option, IsMulti extends boolean = false> = RSValueContainerProps<Option, IsMulti>;
 export type GroupedOptionsType<Option> = ReadonlyArray<GroupType<Option>>;
+export type AtlaskitSelectRefType = {
+    select: BaseSelect | null;
+    blur: () => void;
+    focus: () => void;
+};
 export type { SelectInstance, FormatOptionLabelMeta, InputActionMeta, GroupType, InputProps, MultiValueProps, ReactSelectProps, SingleValueProps, ClearIndicatorProps, DropdownIndicatorProps, IndicatorSeparatorProps, LoadingIndicatorProps, NoticeProps, MultiValueRemoveProps, };
 declare module 'react-select/dist/declarations/src/Select' {
     interface Props<Option, IsMulti extends boolean, Group extends GroupType<Option>> {

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

@@ -1,9 +1,5 @@
 /// <reference types="react" />
 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;
-        blur: () => void;
-        focus: () => void;
-    }> | undefined;
+    ref?: import("react").Ref<import("./types").AtlaskitSelectRefType> | undefined;
 }) => JSX.Element;
 export default _default;

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

@@ -1,9 +1,5 @@
 /// <reference types="react" />
 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;
-        blur: () => void;
-        focus: () => void;
-    }> | undefined;
+    ref?: import("react").Ref<import("./types").AtlaskitSelectRefType> | undefined;
 }) => JSX.Element;
 export default _default;

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

@@ -1,9 +1,5 @@
 /// <reference types="react" />
 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;
-        blur: () => void;
-        focus: () => void;
-    }> | undefined;
+    ref?: import("react").Ref<import("./types").AtlaskitSelectRefType> | undefined;
 }) => JSX.Element;
 export default _default;

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

@@ -1,7 +1,6 @@
 import React, { KeyboardEventHandler, PureComponent, ReactNode } from 'react';
-import BaseSelect from 'react-select/base';
 import { PopperProps } from 'react-popper';
-import { OptionType, ActionMeta, ReactSelectProps, StylesConfig, ValueType, ValidationState } from '../types';
+import { OptionType, ActionMeta, ReactSelectProps, StylesConfig, ValueType, ValidationState, AtlaskitSelectRefType } from '../types';
 import { UnbindFn } from 'bind-event-listener';
 type defaultModifiers = 'offset' | 'preventOverflow';
 type PopperPropsNoChildren<Modifiers> = Omit<PopperProps<Modifiers>, 'children'>;
@@ -68,13 +67,14 @@ export interface PopupSelectProps<Option = OptionType, IsMulti extends boolean =
     isOpen?: boolean;
     defaultIsOpen?: boolean;
     /** Use this to set whether the component uses compact or standard spacing. */
-    spacing?: string;
+    spacing?: 'default' | 'compact';
     /** @deprecated Use isInvalid instead. The state of validation if used in a form */
     validationState?: ValidationState;
     /** This prop indicates if the component is in an error state. */
     isInvalid?: boolean;
     /** This gives an accessible name to the input for people who use assistive technology. */
     label?: string;
+    /** The `testId` prop appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests. It will be set on the menu element when defined: `{testId}--menu` */
     testId?: string;
 }
 interface State<Modifiers = string> {
@@ -85,7 +85,7 @@ interface State<Modifiers = string> {
 }
 export default class PopupSelect<Option = OptionType, IsMulti extends boolean = false, Modifiers = ModifierList> extends PureComponent<PopupSelectProps<Option, IsMulti, Modifiers>, State> {
     menuRef: HTMLElement | null;
-    selectRef: BaseSelect<Option, IsMulti> | null;
+    selectRef: any;
     targetRef: HTMLElement | null;
     unbindWindowClick: UnbindFn | null;
     unbindWindowKeydown: UnbindFn | null;
@@ -142,7 +142,7 @@ export default class PopupSelect<Option = OptionType, IsMulti extends boolean =
     }) => void;
     resolveTargetRef: (popperRef: React.Ref<HTMLElement>) => (ref: HTMLElement) => void;
     resolveMenuRef: (popperRef: React.Ref<HTMLElement>) => (ref: HTMLElement) => void;
-    getSelectRef: (ref: BaseSelect<Option, IsMulti>) => void;
+    getSelectRef: (ref: AtlaskitSelectRefType) => void;
     getItemCount: () => number;
     getMaxHeight: () => number | undefined;
     showSearchControl: () => boolean | undefined;

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

@@ -1,16 +1,8 @@
 /// <reference types="react" />
 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;
-        blur: () => void;
-        focus: () => void;
-    }> | undefined;
+    ref?: import("react").Ref<import("./types").AtlaskitSelectRefType> | 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;
-        blur: () => void;
-        focus: () => void;
-    }> | undefined;
+    ref?: import("react").Ref<import("./types").AtlaskitSelectRefType> | undefined;
 }) => JSX.Element;
 export default Select;

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

@@ -1,12 +1,6 @@
 import { type ComponentType, type Ref } from 'react';
-import BaseSelect from 'react-select/base';
-import { SelectProps, OptionType, AsyncSelectProps, CreatableSelectProps } from './types';
+import { SelectProps, OptionType, AsyncSelectProps, CreatableSelectProps, AtlaskitSelectRefType } from './types';
 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;

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 import { SelectInstance, Props as ReactSelectProps, FormatOptionLabelMeta, OnChangeValue as RSValueType, ActionMeta as RSActionMeta, GroupBase as GroupType, Options as RSOptionsType, SelectComponentsConfig as RSSelectComponentsConfig, StylesConfig as RSStylesConfig, InputActionMeta, ClearIndicatorProps, DropdownIndicatorProps, IndicatorSeparatorProps, LoadingIndicatorProps, NoticeProps, ControlProps as RSControlProps, GroupProps as RSGroupProps, InputProps, MenuProps as RSMenuProps, MenuListProps as RSMenuListComponentProps, MultiValueProps, OptionProps as ReactSelectOptionProps, PlaceholderProps as RSPlaceholderProps, SingleValueProps, ValueContainerProps as RSValueContainerProps, MultiValueRemoveProps } from 'react-select';
+import BaseSelect from 'react-select/base';
 import { AsyncProps } from 'react-select/async';
 import { CreatableProps } from 'react-select/creatable';
 export type ValidationState = 'default' | 'error' | 'success';
@@ -28,7 +29,13 @@ interface CustomSelectProps extends WithAnalyticsEventsProps {
     spacing?: 'compact' | 'default';
     /** This prop affects the backgroundColor and border of the Select field. 'subtle' makes these transparent while 'none' prevents all field styling. Take care when using the none appearance as this doesn't include accessible interactions. */
     appearance?: 'default' | 'subtle' | 'none';
-    /** Prop for testing */
+    /**
+     A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
+  
+     **WARNING:** This prop is currently broken and a test ID will not be added to select.
+     Please refer to the [select testing page](https://atlassian.design/components/select/testing)
+     for guidance on alternatives to identifying select in tests.
+     */
     testId?: string;
     /** This prop indicates if the component is in an error state */
     isInvalid?: boolean;
@@ -52,6 +59,11 @@ export type MenuListComponentProps<Option, IsMulti extends boolean = false> = RS
 export type PlaceholderProps<Option, IsMulti extends boolean = false> = RSPlaceholderProps<Option, IsMulti>;
 export type ValueContainerProps<Option, IsMulti extends boolean = false> = RSValueContainerProps<Option, IsMulti>;
 export type GroupedOptionsType<Option> = ReadonlyArray<GroupType<Option>>;
+export type AtlaskitSelectRefType = {
+    select: BaseSelect | null;
+    blur: () => void;
+    focus: () => void;
+};
 export type { SelectInstance, FormatOptionLabelMeta, InputActionMeta, GroupType, InputProps, MultiValueProps, ReactSelectProps, SingleValueProps, ClearIndicatorProps, DropdownIndicatorProps, IndicatorSeparatorProps, LoadingIndicatorProps, NoticeProps, MultiValueRemoveProps, };
 declare module 'react-select/dist/declarations/src/Select' {
     interface Props<Option, IsMulti extends boolean, Group extends GroupType<Option>> {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/select",
-  "version": "17.6.0",
+  "version": "17.7.0",
   "description": "Select allows users to make a single selection or multiple selections from a list of options.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -41,17 +41,17 @@
     ".": "./src/index.tsx"
   },
   "dependencies": {
-    "@atlaskit/analytics-next": "^9.2.0",
+    "@atlaskit/analytics-next": "^9.3.0",
     "@atlaskit/icon": "^22.1.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/theme": "^12.7.0",
-    "@atlaskit/tokens": "^1.43.0",
+    "@atlaskit/tokens": "^1.44.0",
     "@atlaskit/visually-hidden": "^1.2.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "@popperjs/core": "^2.9.1",
-    "bind-event-listener": "^2.1.1",
+    "bind-event-listener": "^3.0.0",
     "react-focus-lock": "^2.9.5",
     "react-node-resolver": "^1.0.1",
     "react-popper": "^2.2.3",
@@ -66,7 +66,10 @@
   "devDependencies": {
     "@af/accessibility-testing": "*",
     "@af/integration-testing": "*",
-    "@atlaskit/ds-lib": "^2.2.0",
+    "@atlaskit/checkbox": "^13.1.0",
+    "@atlaskit/ds-lib": "^2.3.0",
+    "@atlaskit/modal-dialog": "^12.12.0",
+    "@atlaskit/radio": "^6.1.3",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
@@ -105,6 +108,9 @@
     },
     "platform.design-system-team.popup-select-close_8h15h": {
       "type": "boolean"
+    },
+    "platform.design-system-team.use-default-select-in-popup-select_46rmj": {
+      "type": "boolean"
     }
   },
   "homepage": "https://atlassian.design/components/select/",