@atlaskit/select 17.8.0 → 17.10.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/select
 
+## 17.10.0
+
+### Minor Changes
+
+-   [#104208](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/104208)
+    [`0d4480895db7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0d4480895db7) -
+    Add support for React 18.
+
+## 17.9.0
+
+### Minor Changes
+
+-   [#96841](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/96841)
+    [`6cca90095b7e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6cca90095b7e) -
+    `ClearIndicator` button now uses the `Pressable` primitive.
+
+### Patch Changes
+
+-   Updated dependencies
+
 ## 17.8.0
 
 ### Minor Changes

package/codemods/13.0.0-popper-props.ts

@@ -6,8 +6,15 @@ import {
   isUsingProp,
 } from './utils/helpers';
 
-import core, { API, ASTPath, FileInfo, JSXElement, Options } from 'jscodeshift';
-import { Collection } from 'jscodeshift/src/Collection';
+import {
+  type default as core,
+  type API,
+  type ASTPath,
+  type FileInfo,
+  type JSXElement,
+  type Options,
+} from 'jscodeshift';
+import { type Collection } from 'jscodeshift/src/Collection';
 
 function updatePopperProps(
   j: core.JSCodeshift,

package/codemods/utils/helpers.ts

@@ -1,12 +1,13 @@
-import { NodePath } from 'ast-types/lib/node-path';
-import core, {
-  ASTPath,
-  ImportDeclaration,
-  JSXAttribute,
-  JSXElement,
-  Node,
+import { type NodePath } from 'ast-types/lib/node-path';
+import {
+  type default as core,
+  type ASTPath,
+  type ImportDeclaration,
+  type JSXAttribute,
+  type JSXElement,
+  type Node,
 } from 'jscodeshift';
-import { Collection } from 'jscodeshift/src/Collection';
+import { type Collection } from 'jscodeshift/src/Collection';
 
 export type Nullable<T> = T | null;
 

package/dist/cjs/PopupSelect/PopupSelect.js

@@ -343,7 +343,9 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
           style = _ref2.style;
         return /*#__PURE__*/_react.default.createElement(_reactNodeResolver.default, {
           innerRef: _this.resolveMenuRef(ref)
-        }, /*#__PURE__*/_react.default.createElement(_components.MenuDialog, {
+        }, /*#__PURE__*/_react.default.createElement(_components.MenuDialog
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        , {
           style: style,
           "data-placement": placement,
           minWidth: minMenuWidth,

package/dist/cjs/PopupSelect/components.js

@@ -40,7 +40,9 @@ var MenuDialog = exports.MenuDialog = function MenuDialog(_ref) {
     {
       maxWidth: maxWidth,
       minWidth: minWidth
-    }],
+    }]
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
     style: style,
     id: id,
     "data-testid": testId && "".concat(testId, "--menu")

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

package/dist/cjs/components/indicators.js

@@ -9,12 +9,13 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _reactSelect = require("react-select");
+var _primitives = require("@atlaskit/primitives");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _selectClear = _interopRequireDefault(require("@atlaskit/icon/glyph/select-clear"));
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
 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) { (0, _defineProperty2.default)(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; } /** @jsx jsx */
-var iconContainerStyles = (0, _react.css)({
+var iconContainerStyles = (0, _primitives.xcss)({
   all: 'unset',
   outline: 'revert',
   display: 'flex',
@@ -25,9 +26,8 @@ var ClearIndicator = exports.ClearIndicator = function ClearIndicator(props) {
     innerProps: _objectSpread(_objectSpread({}, props.innerProps), {}, {
       'aria-hidden': 'false'
     })
-  }), (0, _react.jsx)("button", {
-    css: iconContainerStyles,
-    type: "button",
+  }), (0, _react.jsx)(_primitives.Pressable, {
+    xcss: iconContainerStyles,
     tabIndex: -1
   }, (0, _react.jsx)(_selectClear.default, {
     size: "small",

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

@@ -202,7 +202,7 @@ var ControlOption = /*#__PURE__*/function (_Component) {
       return (
         // These need to remain this way because `react-select` passes props with
         // styles inside, and that must be done dynamically.
-        // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+        // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         (0, _react.jsx)("div", (0, _extends2.default)({
           css: styles,
           className: classes,

package/dist/es2019/PopupSelect/PopupSelect.js

@@ -319,7 +319,9 @@ export default class PopupSelect extends PureComponent {
         style
       }) => /*#__PURE__*/React.createElement(NodeResolver, {
         innerRef: this.resolveMenuRef(ref)
-      }, /*#__PURE__*/React.createElement(MenuDialog, {
+      }, /*#__PURE__*/React.createElement(MenuDialog
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      , {
         style: style,
         "data-placement": placement,
         minWidth: minMenuWidth,

package/dist/es2019/PopupSelect/components.js

@@ -33,7 +33,9 @@ export const MenuDialog = ({
   {
     maxWidth,
     minWidth
-  }],
+  }]
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+  ,
   style: style,
   id: id,
   "data-testid": testId && `${testId}--menu`

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.8.0";
+const packageVersion = "17.10.0";
 export const SelectWithoutAnalytics = createSelect(ReactSelect);
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 const Select = withAnalyticsContext({

package/dist/es2019/components/indicators.js

@@ -2,10 +2,11 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { jsx, css } from '@emotion/react';
 import { components } from 'react-select';
+import { Pressable, xcss } from '@atlaskit/primitives';
 import Spinner from '@atlaskit/spinner';
 import SelectClearIcon from '@atlaskit/icon/glyph/select-clear';
 import DownIcon from '@atlaskit/icon/glyph/chevron-down';
-const iconContainerStyles = css({
+const iconContainerStyles = xcss({
   all: 'unset',
   outline: 'revert',
   display: 'flex',
@@ -16,9 +17,8 @@ export const ClearIndicator = props => jsx(components.ClearIndicator, _extends({
     ...props.innerProps,
     'aria-hidden': 'false'
   }
-}), jsx("button", {
-  css: iconContainerStyles,
-  type: "button",
+}), jsx(Pressable, {
+  xcss: iconContainerStyles,
   tabIndex: -1
 }, jsx(SelectClearIcon, {
   size: "small",

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

@@ -175,7 +175,7 @@ class ControlOption extends Component {
     return (
       // These need to remain this way because `react-select` passes props with
       // styles inside, and that must be done dynamically.
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       jsx("div", _extends({
         css: styles,
         className: classes,

package/dist/esm/PopupSelect/PopupSelect.js

@@ -333,7 +333,9 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
           style = _ref2.style;
         return /*#__PURE__*/React.createElement(NodeResolver, {
           innerRef: _this.resolveMenuRef(ref)
-        }, /*#__PURE__*/React.createElement(MenuDialog, {
+        }, /*#__PURE__*/React.createElement(MenuDialog
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        , {
           style: style,
           "data-placement": placement,
           minWidth: minMenuWidth,

package/dist/esm/PopupSelect/components.js

@@ -35,7 +35,9 @@ export var MenuDialog = function MenuDialog(_ref) {
     {
       maxWidth: maxWidth,
       minWidth: minWidth
-    }],
+    }]
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
     style: style,
     id: id,
     "data-testid": testId && "".concat(testId, "--menu")

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

package/dist/esm/components/indicators.js

@@ -5,10 +5,11 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 /** @jsx jsx */
 import { jsx, css } from '@emotion/react';
 import { components } from 'react-select';
+import { Pressable, xcss } from '@atlaskit/primitives';
 import Spinner from '@atlaskit/spinner';
 import SelectClearIcon from '@atlaskit/icon/glyph/select-clear';
 import DownIcon from '@atlaskit/icon/glyph/chevron-down';
-var iconContainerStyles = css({
+var iconContainerStyles = xcss({
   all: 'unset',
   outline: 'revert',
   display: 'flex',
@@ -19,9 +20,8 @@ export var ClearIndicator = function ClearIndicator(props) {
     innerProps: _objectSpread(_objectSpread({}, props.innerProps), {}, {
       'aria-hidden': 'false'
     })
-  }), jsx("button", {
-    css: iconContainerStyles,
-    type: "button",
+  }), jsx(Pressable, {
+    xcss: iconContainerStyles,
     tabIndex: -1
   }, jsx(SelectClearIcon, {
     size: "small",

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

@@ -196,7 +196,7 @@ var ControlOption = /*#__PURE__*/function (_Component) {
       return (
         // These need to remain this way because `react-select` passes props with
         // styles inside, and that must be done dynamically.
-        // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+        // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         jsx("div", _extends({
           css: styles,
           className: classes,

package/dist/types/CheckboxSelect.d.ts

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

package/dist/types/CountrySelect.d.ts

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

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

@@ -1,7 +1,7 @@
-import React, { KeyboardEventHandler, PureComponent, ReactNode } from 'react';
-import { PopperProps } from 'react-popper';
-import { OptionType, ActionMeta, ReactSelectProps, StylesConfig, ValueType, ValidationState, AtlaskitSelectRefType } from '../types';
-import { UnbindFn } from 'bind-event-listener';
+import React, { type KeyboardEventHandler, PureComponent, type ReactNode } from 'react';
+import { type PopperProps } from 'react-popper';
+import { type OptionType, type ActionMeta, type ReactSelectProps, type StylesConfig, type ValueType, type ValidationState, type AtlaskitSelectRefType } from '../types';
+import { type UnbindFn } from 'bind-event-listener';
 type defaultModifiers = 'offset' | 'preventOverflow';
 type PopperPropsNoChildren<Modifiers> = Omit<PopperProps<Modifiers>, 'children'>;
 interface PopupSelectTriggerProps {
@@ -97,7 +97,9 @@ export default class PopupSelect<Option = OptionType, IsMulti extends boolean =
         isOpen: boolean;
         mergedComponents: {
             Control: React.FC<import("../types").ControlProps<OptionType, boolean>>;
-            DropdownIndicator: () => import("@emotion/react").jsx.JSX.Element;
+            DropdownIndicator: () => import("@emotion/react").jsx.JSX.Element; /**
+             * The maximum number of options the select can contain without rendering the search field. The default is `5`.
+             */
             Menu: ({ children, innerProps }: import("../types").MenuProps<OptionType, boolean>) => import("@emotion/react").jsx.JSX.Element;
         };
         mergedPopperProps: PopperPropsNoChildren<string>;

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

@@ -1,7 +1,7 @@
 /** @jsx jsx */
-import { FC, ReactNode, CSSProperties } from 'react';
+import { type FC, type ReactNode, type CSSProperties } from 'react';
 import { jsx } from '@emotion/react';
-import { ControlProps, MenuProps, OptionType } from '../types';
+import { type ControlProps, type MenuProps, type OptionType } from '../types';
 interface MenuDialogProps {
     maxWidth?: number | string;
     minWidth?: number | string;

package/dist/types/RadioSelect.d.ts

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

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

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

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-import { ClearIndicatorProps, DropdownIndicatorProps, LoadingIndicatorProps } from '../types';
+import { type ClearIndicatorProps, type DropdownIndicatorProps, type LoadingIndicatorProps } from '../types';
 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/components/input-aria-describedby.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { InputProps } from 'react-select';
+import { type InputProps } from 'react-select';
 import type { OptionType } from '../types';
 export declare function Input<Option = OptionType, IsMulti extends boolean = false>(props: InputProps<Option, IsMulti>): JSX.Element;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-import { OptionProps, OptionType } from '../types';
+import { type OptionProps, type OptionType } from '../types';
 export declare const CheckboxOption: <OptionT extends OptionType>(props: OptionProps<OptionT, true>) => JSX.Element;
 export declare const RadioOption: <OptionT extends OptionType>(props: OptionProps<OptionT, false>) => jsx.JSX.Element;

package/dist/types/createSelect.d.ts

@@ -1,5 +1,5 @@
 import { type ComponentType, type Ref } from 'react';
-import { SelectProps, OptionType, AsyncSelectProps, CreatableSelectProps, AtlaskitSelectRefType } from './types';
+import { type SelectProps, type OptionType, type AsyncSelectProps, type CreatableSelectProps, type AtlaskitSelectRefType } from './types';
 type AtlaskitSelectProps<Option extends unknown, IsMulti extends boolean> = SelectProps<Option, IsMulti> | AsyncSelectProps<Option, IsMulti> | CreatableSelectProps<Option, IsMulti>;
 export default function createSelect(WrappedComponent: ComponentType<any>): <Option extends unknown = OptionType, IsMulti extends boolean = false>(props: AtlaskitSelectProps<Option, IsMulti> & {
     ref?: Ref<AtlaskitSelectRefType>;

package/dist/types/extract-react-types/ert.d.ts

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

package/dist/types/extract-react-types/react-popper-props.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Modifier, Options } from '@popperjs/core';
+import { type Modifier, type Options } from '@popperjs/core';
 type Placement = 'auto' | 'auto-start' | 'auto-end' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
 type Strategy = 'absolute' | 'fixed';
 interface NativeReactPopperProps<Name = unknown> {

package/dist/types/extract-react-types/react-select-async.d.ts

@@ -1,4 +1,4 @@
-import { GroupBase, OptionsOrGroups } from 'react-select';
+import { type GroupBase, type OptionsOrGroups } from 'react-select';
 export interface ReactSelectAsyncProps<Option = unknown, Group extends GroupBase<Option> = GroupBase<Option>> {
     /**
      * The default set of options to show before the user starts searching. When

package/dist/types/extract-react-types/react-select-creatable.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
-import { GetOptionLabel, GetOptionValue, GroupBase, Options, OptionsOrGroups } from 'react-select';
+import { type ReactNode } from 'react';
+import { type GetOptionLabel, type GetOptionValue, type GroupBase, type Options, type OptionsOrGroups } from 'react-select';
 export interface Accessors<Option> {
     getOptionValue: GetOptionValue<Option>;
     getOptionLabel: GetOptionLabel<Option>;

package/dist/types/extract-react-types/react-select-props.d.ts

@@ -1,11 +1,11 @@
-import { FocusEventHandler, KeyboardEventHandler, ReactNode } from 'react';
+import { type FocusEventHandler, type KeyboardEventHandler, type ReactNode } from 'react';
 interface FilterOptionOption<Option> {
     readonly label: string;
     readonly value: string;
     readonly data: Option;
 }
-import { StylesConfig } from '../types';
-import { ActionMeta, AriaLiveMessages, FormatOptionLabelMeta, GetOptionLabel, GetOptionValue, GroupBase, InputActionMeta, MenuPlacement, MenuPosition, OnChangeValue, Options, OptionsOrGroups, PropsValue, SelectComponentsConfig, ThemeConfig } from 'react-select';
+import { type StylesConfig } from '../types';
+import { type ActionMeta, type AriaLiveMessages, type FormatOptionLabelMeta, type GetOptionLabel, type GetOptionValue, type GroupBase, type InputActionMeta, type MenuPlacement, type MenuPosition, type OnChangeValue, type Options, type OptionsOrGroups, type PropsValue, type SelectComponentsConfig, type ThemeConfig } from 'react-select';
 interface NativeReactSelectProps<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> {
     /** Use this to provide a descriptive name for people who use assistive technology. */
     'aria-label'?: string;

package/dist/types/types.d.ts

@@ -1,9 +1,9 @@
 /// <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';
+import { type WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+import { type SelectInstance, type Props as ReactSelectProps, type FormatOptionLabelMeta, type OnChangeValue as RSValueType, type ActionMeta as RSActionMeta, type GroupBase as GroupType, type Options as RSOptionsType, type SelectComponentsConfig as RSSelectComponentsConfig, type StylesConfig as RSStylesConfig, type InputActionMeta, type ClearIndicatorProps, type DropdownIndicatorProps, type IndicatorSeparatorProps, type LoadingIndicatorProps, type NoticeProps, type ControlProps as RSControlProps, type GroupProps as RSGroupProps, type InputProps, type MenuProps as RSMenuProps, type MenuListProps as RSMenuListComponentProps, type MultiValueProps, type OptionProps as ReactSelectOptionProps, type PlaceholderProps as RSPlaceholderProps, type SingleValueProps, type ValueContainerProps as RSValueContainerProps, type MultiValueRemoveProps } from 'react-select';
+import type BaseSelect from 'react-select/base';
+import { type AsyncProps } from 'react-select/async';
+import { type CreatableProps } from 'react-select/creatable';
 export type ValidationState = 'default' | 'error' | 'success';
 export interface OptionType {
     [key: string]: any;

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

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

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

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

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

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

@@ -1,7 +1,7 @@
-import React, { KeyboardEventHandler, PureComponent, ReactNode } from 'react';
-import { PopperProps } from 'react-popper';
-import { OptionType, ActionMeta, ReactSelectProps, StylesConfig, ValueType, ValidationState, AtlaskitSelectRefType } from '../types';
-import { UnbindFn } from 'bind-event-listener';
+import React, { type KeyboardEventHandler, PureComponent, type ReactNode } from 'react';
+import { type PopperProps } from 'react-popper';
+import { type OptionType, type ActionMeta, type ReactSelectProps, type StylesConfig, type ValueType, type ValidationState, type AtlaskitSelectRefType } from '../types';
+import { type UnbindFn } from 'bind-event-listener';
 type defaultModifiers = 'offset' | 'preventOverflow';
 type PopperPropsNoChildren<Modifiers> = Omit<PopperProps<Modifiers>, 'children'>;
 interface PopupSelectTriggerProps {
@@ -97,7 +97,9 @@ export default class PopupSelect<Option = OptionType, IsMulti extends boolean =
         isOpen: boolean;
         mergedComponents: {
             Control: React.FC<import("../types").ControlProps<OptionType, boolean>>;
-            DropdownIndicator: () => import("@emotion/react").jsx.JSX.Element;
+            DropdownIndicator: () => import("@emotion/react").jsx.JSX.Element; /**
+             * The maximum number of options the select can contain without rendering the search field. The default is `5`.
+             */
             Menu: ({ children, innerProps }: import("../types").MenuProps<OptionType, boolean>) => import("@emotion/react").jsx.JSX.Element;
         };
         mergedPopperProps: PopperPropsNoChildren<string>;

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

@@ -1,7 +1,7 @@
 /** @jsx jsx */
-import { FC, ReactNode, CSSProperties } from 'react';
+import { type FC, type ReactNode, type CSSProperties } from 'react';
 import { jsx } from '@emotion/react';
-import { ControlProps, MenuProps, OptionType } from '../types';
+import { type ControlProps, type MenuProps, type OptionType } from '../types';
 interface MenuDialogProps {
     maxWidth?: number | string;
     minWidth?: number | string;

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

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

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

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

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-import { ClearIndicatorProps, DropdownIndicatorProps, LoadingIndicatorProps } from '../types';
+import { type ClearIndicatorProps, type DropdownIndicatorProps, type LoadingIndicatorProps } from '../types';
 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-ts4.5/components/input-aria-describedby.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { InputProps } from 'react-select';
+import { type InputProps } from 'react-select';
 import type { OptionType } from '../types';
 export declare function Input<Option = OptionType, IsMulti extends boolean = false>(props: InputProps<Option, IsMulti>): JSX.Element;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-import { OptionProps, OptionType } from '../types';
+import { type OptionProps, type OptionType } from '../types';
 export declare const CheckboxOption: <OptionT extends OptionType>(props: OptionProps<OptionT, true>) => JSX.Element;
 export declare const RadioOption: <OptionT extends OptionType>(props: OptionProps<OptionT, false>) => jsx.JSX.Element;

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

@@ -1,5 +1,5 @@
 import { type ComponentType, type Ref } from 'react';
-import { SelectProps, OptionType, AsyncSelectProps, CreatableSelectProps, AtlaskitSelectRefType } from './types';
+import { type SelectProps, type OptionType, type AsyncSelectProps, type CreatableSelectProps, type AtlaskitSelectRefType } from './types';
 type AtlaskitSelectProps<Option extends unknown, IsMulti extends boolean> = SelectProps<Option, IsMulti> | AsyncSelectProps<Option, IsMulti> | CreatableSelectProps<Option, IsMulti>;
 export default function createSelect(WrappedComponent: ComponentType<any>): <Option extends unknown = OptionType, IsMulti extends boolean = false>(props: AtlaskitSelectProps<Option, IsMulti> & {
     ref?: Ref<AtlaskitSelectRefType>;

package/dist/types-ts4.5/extract-react-types/ert.d.ts

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

package/dist/types-ts4.5/extract-react-types/react-popper-props.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Modifier, Options } from '@popperjs/core';
+import { type Modifier, type Options } from '@popperjs/core';
 type Placement = 'auto' | 'auto-start' | 'auto-end' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
 type Strategy = 'absolute' | 'fixed';
 interface NativeReactPopperProps<Name = unknown> {

package/dist/types-ts4.5/extract-react-types/react-select-async.d.ts

@@ -1,4 +1,4 @@
-import { GroupBase, OptionsOrGroups } from 'react-select';
+import { type GroupBase, type OptionsOrGroups } from 'react-select';
 export interface ReactSelectAsyncProps<Option = unknown, Group extends GroupBase<Option> = GroupBase<Option>> {
     /**
      * The default set of options to show before the user starts searching. When

package/dist/types-ts4.5/extract-react-types/react-select-creatable.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
-import { GetOptionLabel, GetOptionValue, GroupBase, Options, OptionsOrGroups } from 'react-select';
+import { type ReactNode } from 'react';
+import { type GetOptionLabel, type GetOptionValue, type GroupBase, type Options, type OptionsOrGroups } from 'react-select';
 export interface Accessors<Option> {
     getOptionValue: GetOptionValue<Option>;
     getOptionLabel: GetOptionLabel<Option>;

package/dist/types-ts4.5/extract-react-types/react-select-props.d.ts

@@ -1,11 +1,11 @@
-import { FocusEventHandler, KeyboardEventHandler, ReactNode } from 'react';
+import { type FocusEventHandler, type KeyboardEventHandler, type ReactNode } from 'react';
 interface FilterOptionOption<Option> {
     readonly label: string;
     readonly value: string;
     readonly data: Option;
 }
-import { StylesConfig } from '../types';
-import { ActionMeta, AriaLiveMessages, FormatOptionLabelMeta, GetOptionLabel, GetOptionValue, GroupBase, InputActionMeta, MenuPlacement, MenuPosition, OnChangeValue, Options, OptionsOrGroups, PropsValue, SelectComponentsConfig, ThemeConfig } from 'react-select';
+import { type StylesConfig } from '../types';
+import { type ActionMeta, type AriaLiveMessages, type FormatOptionLabelMeta, type GetOptionLabel, type GetOptionValue, type GroupBase, type InputActionMeta, type MenuPlacement, type MenuPosition, type OnChangeValue, type Options, type OptionsOrGroups, type PropsValue, type SelectComponentsConfig, type ThemeConfig } from 'react-select';
 interface NativeReactSelectProps<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> {
     /** Use this to provide a descriptive name for people who use assistive technology. */
     'aria-label'?: string;

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

@@ -1,9 +1,9 @@
 /// <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';
+import { type WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+import { type SelectInstance, type Props as ReactSelectProps, type FormatOptionLabelMeta, type OnChangeValue as RSValueType, type ActionMeta as RSActionMeta, type GroupBase as GroupType, type Options as RSOptionsType, type SelectComponentsConfig as RSSelectComponentsConfig, type StylesConfig as RSStylesConfig, type InputActionMeta, type ClearIndicatorProps, type DropdownIndicatorProps, type IndicatorSeparatorProps, type LoadingIndicatorProps, type NoticeProps, type ControlProps as RSControlProps, type GroupProps as RSGroupProps, type InputProps, type MenuProps as RSMenuProps, type MenuListProps as RSMenuListComponentProps, type MultiValueProps, type OptionProps as ReactSelectOptionProps, type PlaceholderProps as RSPlaceholderProps, type SingleValueProps, type ValueContainerProps as RSValueContainerProps, type MultiValueRemoveProps } from 'react-select';
+import type BaseSelect from 'react-select/base';
+import { type AsyncProps } from 'react-select/async';
+import { type CreatableProps } from 'react-select/creatable';
 export type ValidationState = 'default' | 'error' | 'success';
 export interface OptionType {
     [key: string]: any;

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/select",
-  "version": "17.8.0",
+  "version": "17.10.0",
   "description": "Select allows users to make a single selection or multiple selections from a list of options.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -31,7 +31,8 @@
     "website": {
       "name": "Select",
       "category": "Components"
-    }
+    },
+    "runReact18": true
   },
   "af:exports": {
     "./AsyncSelect": "./src/entry-points/async-select.tsx",
@@ -42,25 +43,26 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.3.0",
-    "@atlaskit/icon": "^22.1.0",
+    "@atlaskit/icon": "^22.3.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
+    "@atlaskit/primitives": "^6.3.0",
     "@atlaskit/spinner": "^16.1.0",
-    "@atlaskit/theme": "^12.7.0",
-    "@atlaskit/tokens": "^1.45.0",
+    "@atlaskit/theme": "^12.8.0",
+    "@atlaskit/tokens": "^1.49.0",
     "@atlaskit/visually-hidden": "^1.3.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
-    "@popperjs/core": "^2.9.1",
+    "@popperjs/core": "^2.11.8",
     "bind-event-listener": "^3.0.0",
     "react-focus-lock": "^2.9.5",
     "react-node-resolver": "^1.0.1",
-    "react-popper": "^2.2.3",
+    "react-popper": "^2.3.0",
     "react-select": "^5.4.0",
     "react-uid": "^2.2.0",
     "shallow-equal": "^3.1.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0",
+    "react": "^16.8.0 || ^17.0.0 || ~18.2.0",
     "react-dom": "^16.8.0"
   },
   "devDependencies": {
@@ -81,6 +83,7 @@
     "ast-types": "^0.13.3",
     "jscodeshift": "^0.13.0",
     "react-dom": "^16.8.0",
+    "react-select-event": "^5.5.0",
     "react-value": "^0.2.0",
     "typescript": "~5.4.2",
     "wait-for-expect": "^1.2.0"