@atlaskit/select 18.9.6 → 18.10.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/select
 
+## 18.10.1
+
+### Patch Changes
+
+- [#108810](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/108810)
+  [`213d393f5b7da`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/213d393f5b7da) -
+  Convert input-option from class component to functional component
+
+## 18.10.0
+
+### Minor Changes
+
+- [#109060](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/109060)
+  [`4660ec858a305`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4660ec858a305) -
+  Update `React` from v16 to v18
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 18.9.6
 
 ### Patch Changes

package/dist/cjs/CountrySelect.js

@@ -25,6 +25,7 @@ var labelStyles = (0, _react.css)({
   lineHeight: 1.2
 });
 var flagStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   fontSize: '1.125rem',
   // emoji size
   marginInlineEnd: "var(--ds-space-100, 8px)"

package/dist/cjs/Select.js

@@ -11,7 +11,7 @@ var _createSelect = _interopRequireDefault(require("./createSelect"));
 /* eslint-disable @repo/internal/react/require-jsdoc */
 
 var packageName = "@atlaskit/select";
-var packageVersion = "18.9.6";
+var packageVersion = "18.10.1";
 var SelectWithoutAnalytics = exports.SelectWithoutAnalytics = (0, _createSelect.default)(_async.default);
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
 var Select = (0, _analyticsNext.withAnalyticsContext)({

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

@@ -6,13 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.RadioOption = exports.CheckboxOption = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
@@ -22,8 +17,6 @@ var _svg = _interopRequireDefault(require("@atlaskit/icon/svg"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _excluded = ["getStyles", "Icon", "children", "innerProps", "innerRef"];
-function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 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; } /**
  * @jsxRuntime classic
@@ -63,7 +56,10 @@ var getPrimitiveStyles = function getPrimitiveStyles(props) {
   };
 
   // maintain react-select API
-  return [augmentedStyles, cx(bemClasses, className)];
+  return {
+    styles: augmentedStyles,
+    classes: cx(bemClasses, className)
+  };
 };
 
 // state of the parent option
@@ -132,103 +128,92 @@ var baseOptionStyles = (0, _react2.css)({
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
+
 // eslint-disable-next-line @repo/internal/react/no-class-components
-var ControlOption = /*#__PURE__*/function (_Component) {
-  function ControlOption() {
-    var _this;
-    (0, _classCallCheck2.default)(this, ControlOption);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, ControlOption, [].concat(args));
-    (0, _defineProperty2.default)(_this, "state", {
-      isActive: false
-    });
-    (0, _defineProperty2.default)(_this, "onMouseDown", function () {
-      return _this.setState({
-        isActive: true
-      });
-    });
-    (0, _defineProperty2.default)(_this, "onMouseUp", function () {
-      return _this.setState({
-        isActive: false
-      });
-    });
-    (0, _defineProperty2.default)(_this, "onMouseLeave", function () {
-      return _this.setState({
-        isActive: false
-      });
-    });
-    return _this;
-  }
-  (0, _inherits2.default)(ControlOption, _Component);
-  return (0, _createClass2.default)(ControlOption, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        getStyles = _this$props.getStyles,
-        Icon = _this$props.Icon,
-        children = _this$props.children,
-        innerProps = _this$props.innerProps,
-        innerRef = _this$props.innerRef,
-        rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
-      var _this$props2 = this.props,
-        isDisabled = _this$props2.isDisabled,
-        isSelected = _this$props2.isSelected;
+var ControlOption = function ControlOption(props) {
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isActive = _useState2[0],
+    setIsActive = _useState2[1];
+  var onMouseDown = (0, _react.useCallback)(function () {
+    return setIsActive(true);
+  }, []);
+  var onMouseUp = (0, _react.useCallback)(function () {
+    return setIsActive(false);
+  }, []);
+  var getStyles = props.getStyles,
+    Icon = props.Icon,
+    children = props.children,
+    innerProps = props.innerProps,
+    innerRef = props.innerRef,
+    rest = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var isDisabled = props.isDisabled,
+    isSelected = props.isSelected,
+    isFocused = props.isFocused;
 
-      // prop assignment
-      var props = _objectSpread(_objectSpread({}, innerProps), {}, {
-        onMouseDown: this.onMouseDown,
-        onMouseUp: this.onMouseUp,
-        onMouseLeave: this.onMouseLeave
-      });
-      var _getPrimitiveStyles = getPrimitiveStyles(_objectSpread({
-          getStyles: getStyles
-        }, rest)),
-        _getPrimitiveStyles2 = (0, _slicedToArray2.default)(_getPrimitiveStyles, 2),
-        styles = _getPrimitiveStyles2[0],
-        classes = _getPrimitiveStyles2[1];
-      var isVoiceOver = (/iPad|iPhone|iPod/.test(navigator.userAgent) || navigator.platform === 'MacIntel') &&
-      // temporary check for now
-      // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-      (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement');
-      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, @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-        (0, _react2.jsx)("div", (0, _extends2.default)({
-          css: styles,
-          className: classes,
-          ref: innerRef
-        }, props), (0, _react2.jsx)("div", {
-          css: [baseIconStyles,
-          // Here we are adding a border to the Checkbox and Radio SVG icons
-          // This is an a11y fix for Select only for now but it may be rolled
-          // into the `@atlaskit/icon` package's Checkbox and Radio SVGs later
-          // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-          {
-            // This can eventually be changed to static styles that are
-            // applied conditionally (e.g. `isActive && activeBorderStyles`),
-            // but considering there are multiple instances of `react-select`
-            // requiring styles to be generated dynamically, it seemed like a
-            // low priority.
-            // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
-            '& svg rect, & svg circle:first-of-type': {
-              stroke: getBorderColor(_objectSpread(_objectSpread({}, this.props), this.state))
-            }
-          }]
-        }, !!Icon ? (0, _react2.jsx)(Icon, {
-          label: "",
-          primaryColor: getPrimaryColor(_objectSpread(_objectSpread({}, this.props), this.state)),
-          secondaryColor: getSecondaryColor(_objectSpread(_objectSpread({}, this.props), this.state)),
-          isFacadeDisabled: true
-        }) : null), (0, _react2.jsx)("div", {
-          css: baseOptionStyles
-        }, children, isVoiceOver && (isSelected || isDisabled) && (0, _react2.jsx)(_visuallyHidden.default, null, "".concat(isSelected ? ',selected' : '').concat(isDisabled ? ',dimmed' : ''))))
-      );
-    }
-  }]);
-}(_react.Component);
+  // prop assignment
+  var newProps = _objectSpread(_objectSpread({}, innerProps), {}, {
+    onMouseDown: onMouseDown,
+    onMouseUp: onMouseUp,
+    onMouseLeave: onMouseUp
+  });
+  var _getPrimitiveStyles = getPrimitiveStyles(_objectSpread({
+      getStyles: getStyles
+    }, rest)),
+    styles = _getPrimitiveStyles.styles,
+    classes = _getPrimitiveStyles.classes;
+  var isVoiceOver = (/iPad|iPhone|iPod/.test(navigator.userAgent) || navigator.platform === 'MacIntel') &&
+  // temporary check for now
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+  (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement');
+  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, @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    (0, _react2.jsx)("div", (0, _extends2.default)({
+      css: styles,
+      className: classes,
+      ref: innerRef
+    }, newProps), (0, _react2.jsx)("div", {
+      css: [baseIconStyles,
+      // Here we are adding a border to the Checkbox and Radio SVG icons
+      // This is an a11y fix for Select only for now but it may be rolled
+      // into the `@atlaskit/icon` package's Checkbox and Radio SVGs later
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+      {
+        // This can eventually be changed to static styles that are
+        // applied conditionally (e.g. `isActive && activeBorderStyles`),
+        // but considering there are multiple instances of `react-select`
+        // requiring styles to be generated dynamically, it seemed like a
+        // low priority.
+        // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+        '& svg rect, & svg circle:first-of-type': {
+          stroke: getBorderColor({
+            isActive: isActive,
+            isDisabled: isDisabled,
+            isSelected: isSelected
+          })
+        }
+      }]
+    }, !!Icon ? (0, _react2.jsx)(Icon, {
+      label: "",
+      primaryColor: getPrimaryColor({
+        isDisabled: isDisabled,
+        isSelected: isSelected,
+        isFocused: isFocused,
+        isActive: isActive
+      }),
+      secondaryColor: getSecondaryColor({
+        isDisabled: isDisabled,
+        isSelected: isSelected,
+        isActive: isActive
+      }),
+      isFacadeDisabled: true
+    }) : null), (0, _react2.jsx)("div", {
+      css: baseOptionStyles
+    }, children, isVoiceOver && (isSelected || isDisabled) && (0, _react2.jsx)(_visuallyHidden.default, null, "".concat(isSelected ? ',selected' : '').concat(isDisabled ? ',dimmed' : ''))))
+  );
+};
 var NewCheckboxIcon = function NewCheckboxIcon(props) {
   return (
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props

package/dist/es2019/CountrySelect.js

@@ -19,6 +19,7 @@ const labelStyles = css({
   lineHeight: 1.2
 });
 const flagStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   fontSize: '1.125rem',
   // emoji size
   marginInlineEnd: "var(--ds-space-100, 8px)"

package/dist/es2019/Select.js

@@ -3,7 +3,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import AsyncSelect from '@atlaskit/react-select/async';
 import createSelect from './createSelect';
 const packageName = "@atlaskit/select";
-const packageVersion = "18.9.6";
+const packageVersion = "18.10.1";
 export const SelectWithoutAnalytics = createSelect(AsyncSelect);
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 const Select = withAnalyticsContext({

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

@@ -1,11 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /**
  * @jsxRuntime classic
  * @jsx jsx
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { Component } from 'react';
+import { useCallback, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import CheckboxIcon from '@atlaskit/icon/glyph/checkbox';
 import RadioIcon from '@atlaskit/icon/glyph/radio';
@@ -53,7 +52,10 @@ const getPrimitiveStyles = props => {
   };
 
   // maintain react-select API
-  return [augmentedStyles, cx(bemClasses, className)];
+  return {
+    styles: augmentedStyles,
+    classes: cx(bemClasses, className)
+  };
 };
 
 // state of the parent option
@@ -125,97 +127,92 @@ const baseOptionStyles = css({
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
+
 // eslint-disable-next-line @repo/internal/react/no-class-components
-class ControlOption extends Component {
-  constructor(...args) {
-    super(...args);
-    _defineProperty(this, "state", {
-      isActive: false
-    });
-    _defineProperty(this, "onMouseDown", () => this.setState({
-      isActive: true
-    }));
-    _defineProperty(this, "onMouseUp", () => this.setState({
-      isActive: false
-    }));
-    _defineProperty(this, "onMouseLeave", () => this.setState({
-      isActive: false
-    }));
-  }
-  render() {
-    const {
-      getStyles,
-      Icon,
-      children,
-      innerProps,
-      innerRef,
-      ...rest
-    } = this.props;
-    const {
-      isDisabled,
-      isSelected
-    } = this.props;
+const ControlOption = props => {
+  const [isActive, setIsActive] = useState(false);
+  const onMouseDown = useCallback(() => setIsActive(true), []);
+  const onMouseUp = useCallback(() => setIsActive(false), []);
+  const {
+    getStyles,
+    Icon,
+    children,
+    innerProps,
+    innerRef,
+    ...rest
+  } = props;
+  const {
+    isDisabled,
+    isSelected,
+    isFocused
+  } = props;
 
-    // prop assignment
-    const props = {
-      ...innerProps,
-      onMouseDown: this.onMouseDown,
-      onMouseUp: this.onMouseUp,
-      onMouseLeave: this.onMouseLeave
-    };
-    const [styles, classes] = getPrimitiveStyles({
-      getStyles,
-      ...rest
-    });
-    const isVoiceOver = (/iPad|iPhone|iPod/.test(navigator.userAgent) || navigator.platform === 'MacIntel') &&
-    // temporary check for now
-    // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-    fg('design_system_select-a11y-improvement');
-    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, @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      jsx("div", _extends({
-        css: styles,
-        className: classes,
-        ref: innerRef
-      }, props), jsx("div", {
-        css: [baseIconStyles,
-        // Here we are adding a border to the Checkbox and Radio SVG icons
-        // This is an a11y fix for Select only for now but it may be rolled
-        // into the `@atlaskit/icon` package's Checkbox and Radio SVGs later
-        // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-        {
-          // This can eventually be changed to static styles that are
-          // applied conditionally (e.g. `isActive && activeBorderStyles`),
-          // but considering there are multiple instances of `react-select`
-          // requiring styles to be generated dynamically, it seemed like a
-          // low priority.
-          // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
-          '& svg rect, & svg circle:first-of-type': {
-            stroke: getBorderColor({
-              ...this.props,
-              ...this.state
-            })
-          }
-        }]
-      }, !!Icon ? jsx(Icon, {
-        label: "",
-        primaryColor: getPrimaryColor({
-          ...this.props,
-          ...this.state
-        }),
-        secondaryColor: getSecondaryColor({
-          ...this.props,
-          ...this.state
-        }),
-        isFacadeDisabled: true
-      }) : null), jsx("div", {
-        css: baseOptionStyles
-      }, children, isVoiceOver && (isSelected || isDisabled) && jsx(VisuallyHidden, null, `${isSelected ? ',selected' : ''}${isDisabled ? ',dimmed' : ''}`)))
-    );
-  }
-}
+  // prop assignment
+  const newProps = {
+    ...innerProps,
+    onMouseDown: onMouseDown,
+    onMouseUp: onMouseUp,
+    onMouseLeave: onMouseUp
+  };
+  const {
+    styles,
+    classes
+  } = getPrimitiveStyles({
+    getStyles,
+    ...rest
+  });
+  const isVoiceOver = (/iPad|iPhone|iPod/.test(navigator.userAgent) || navigator.platform === 'MacIntel') &&
+  // temporary check for now
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+  fg('design_system_select-a11y-improvement');
+  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, @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    jsx("div", _extends({
+      css: styles,
+      className: classes,
+      ref: innerRef
+    }, newProps), jsx("div", {
+      css: [baseIconStyles,
+      // Here we are adding a border to the Checkbox and Radio SVG icons
+      // This is an a11y fix for Select only for now but it may be rolled
+      // into the `@atlaskit/icon` package's Checkbox and Radio SVGs later
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+      {
+        // This can eventually be changed to static styles that are
+        // applied conditionally (e.g. `isActive && activeBorderStyles`),
+        // but considering there are multiple instances of `react-select`
+        // requiring styles to be generated dynamically, it seemed like a
+        // low priority.
+        // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+        '& svg rect, & svg circle:first-of-type': {
+          stroke: getBorderColor({
+            isActive,
+            isDisabled,
+            isSelected
+          })
+        }
+      }]
+    }, !!Icon ? jsx(Icon, {
+      label: "",
+      primaryColor: getPrimaryColor({
+        isDisabled,
+        isSelected,
+        isFocused,
+        isActive
+      }),
+      secondaryColor: getSecondaryColor({
+        isDisabled,
+        isSelected,
+        isActive
+      }),
+      isFacadeDisabled: true
+    }) : null), jsx("div", {
+      css: baseOptionStyles
+    }, children, isVoiceOver && (isSelected || isDisabled) && jsx(VisuallyHidden, null, `${isSelected ? ',selected' : ''}${isDisabled ? ',dimmed' : ''}`)))
+  );
+};
 const NewCheckboxIcon = props =>
 // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 jsx(PrimitiveSVGIcon, props, jsx("g", {

package/dist/esm/CountrySelect.js

@@ -22,6 +22,7 @@ var labelStyles = css({
   lineHeight: 1.2
 });
 var flagStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   fontSize: '1.125rem',
   // emoji size
   marginInlineEnd: "var(--ds-space-100, 8px)"

package/dist/esm/Select.js

@@ -3,7 +3,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import AsyncSelect from '@atlaskit/react-select/async';
 import createSelect from './createSelect';
 var packageName = "@atlaskit/select";
-var packageVersion = "18.9.6";
+var packageVersion = "18.10.1";
 export var SelectWithoutAnalytics = createSelect(AsyncSelect);
 var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 var Select = withAnalyticsContext({

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

@@ -1,15 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _inherits from "@babel/runtime/helpers/inherits";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["getStyles", "Icon", "children", "innerProps", "innerRef"];
-function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 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; }
 /**
@@ -17,7 +10,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * @jsx jsx
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { Component } from 'react';
+import { useCallback, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import CheckboxIcon from '@atlaskit/icon/glyph/checkbox';
 import RadioIcon from '@atlaskit/icon/glyph/radio';
@@ -58,7 +51,10 @@ var getPrimitiveStyles = function getPrimitiveStyles(props) {
   };
 
   // maintain react-select API
-  return [augmentedStyles, cx(bemClasses, className)];
+  return {
+    styles: augmentedStyles,
+    classes: cx(bemClasses, className)
+  };
 };
 
 // state of the parent option
@@ -127,103 +123,92 @@ var baseOptionStyles = css({
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
+
 // eslint-disable-next-line @repo/internal/react/no-class-components
-var ControlOption = /*#__PURE__*/function (_Component) {
-  function ControlOption() {
-    var _this;
-    _classCallCheck(this, ControlOption);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, ControlOption, [].concat(args));
-    _defineProperty(_this, "state", {
-      isActive: false
-    });
-    _defineProperty(_this, "onMouseDown", function () {
-      return _this.setState({
-        isActive: true
-      });
-    });
-    _defineProperty(_this, "onMouseUp", function () {
-      return _this.setState({
-        isActive: false
-      });
-    });
-    _defineProperty(_this, "onMouseLeave", function () {
-      return _this.setState({
-        isActive: false
-      });
-    });
-    return _this;
-  }
-  _inherits(ControlOption, _Component);
-  return _createClass(ControlOption, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        getStyles = _this$props.getStyles,
-        Icon = _this$props.Icon,
-        children = _this$props.children,
-        innerProps = _this$props.innerProps,
-        innerRef = _this$props.innerRef,
-        rest = _objectWithoutProperties(_this$props, _excluded);
-      var _this$props2 = this.props,
-        isDisabled = _this$props2.isDisabled,
-        isSelected = _this$props2.isSelected;
+var ControlOption = function ControlOption(props) {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isActive = _useState2[0],
+    setIsActive = _useState2[1];
+  var onMouseDown = useCallback(function () {
+    return setIsActive(true);
+  }, []);
+  var onMouseUp = useCallback(function () {
+    return setIsActive(false);
+  }, []);
+  var getStyles = props.getStyles,
+    Icon = props.Icon,
+    children = props.children,
+    innerProps = props.innerProps,
+    innerRef = props.innerRef,
+    rest = _objectWithoutProperties(props, _excluded);
+  var isDisabled = props.isDisabled,
+    isSelected = props.isSelected,
+    isFocused = props.isFocused;
 
-      // prop assignment
-      var props = _objectSpread(_objectSpread({}, innerProps), {}, {
-        onMouseDown: this.onMouseDown,
-        onMouseUp: this.onMouseUp,
-        onMouseLeave: this.onMouseLeave
-      });
-      var _getPrimitiveStyles = getPrimitiveStyles(_objectSpread({
-          getStyles: getStyles
-        }, rest)),
-        _getPrimitiveStyles2 = _slicedToArray(_getPrimitiveStyles, 2),
-        styles = _getPrimitiveStyles2[0],
-        classes = _getPrimitiveStyles2[1];
-      var isVoiceOver = (/iPad|iPhone|iPod/.test(navigator.userAgent) || navigator.platform === 'MacIntel') &&
-      // temporary check for now
-      // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-      fg('design_system_select-a11y-improvement');
-      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, @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-        jsx("div", _extends({
-          css: styles,
-          className: classes,
-          ref: innerRef
-        }, props), jsx("div", {
-          css: [baseIconStyles,
-          // Here we are adding a border to the Checkbox and Radio SVG icons
-          // This is an a11y fix for Select only for now but it may be rolled
-          // into the `@atlaskit/icon` package's Checkbox and Radio SVGs later
-          // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-          {
-            // This can eventually be changed to static styles that are
-            // applied conditionally (e.g. `isActive && activeBorderStyles`),
-            // but considering there are multiple instances of `react-select`
-            // requiring styles to be generated dynamically, it seemed like a
-            // low priority.
-            // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
-            '& svg rect, & svg circle:first-of-type': {
-              stroke: getBorderColor(_objectSpread(_objectSpread({}, this.props), this.state))
-            }
-          }]
-        }, !!Icon ? jsx(Icon, {
-          label: "",
-          primaryColor: getPrimaryColor(_objectSpread(_objectSpread({}, this.props), this.state)),
-          secondaryColor: getSecondaryColor(_objectSpread(_objectSpread({}, this.props), this.state)),
-          isFacadeDisabled: true
-        }) : null), jsx("div", {
-          css: baseOptionStyles
-        }, children, isVoiceOver && (isSelected || isDisabled) && jsx(VisuallyHidden, null, "".concat(isSelected ? ',selected' : '').concat(isDisabled ? ',dimmed' : ''))))
-      );
-    }
-  }]);
-}(Component);
+  // prop assignment
+  var newProps = _objectSpread(_objectSpread({}, innerProps), {}, {
+    onMouseDown: onMouseDown,
+    onMouseUp: onMouseUp,
+    onMouseLeave: onMouseUp
+  });
+  var _getPrimitiveStyles = getPrimitiveStyles(_objectSpread({
+      getStyles: getStyles
+    }, rest)),
+    styles = _getPrimitiveStyles.styles,
+    classes = _getPrimitiveStyles.classes;
+  var isVoiceOver = (/iPad|iPhone|iPod/.test(navigator.userAgent) || navigator.platform === 'MacIntel') &&
+  // temporary check for now
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+  fg('design_system_select-a11y-improvement');
+  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, @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    jsx("div", _extends({
+      css: styles,
+      className: classes,
+      ref: innerRef
+    }, newProps), jsx("div", {
+      css: [baseIconStyles,
+      // Here we are adding a border to the Checkbox and Radio SVG icons
+      // This is an a11y fix for Select only for now but it may be rolled
+      // into the `@atlaskit/icon` package's Checkbox and Radio SVGs later
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+      {
+        // This can eventually be changed to static styles that are
+        // applied conditionally (e.g. `isActive && activeBorderStyles`),
+        // but considering there are multiple instances of `react-select`
+        // requiring styles to be generated dynamically, it seemed like a
+        // low priority.
+        // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+        '& svg rect, & svg circle:first-of-type': {
+          stroke: getBorderColor({
+            isActive: isActive,
+            isDisabled: isDisabled,
+            isSelected: isSelected
+          })
+        }
+      }]
+    }, !!Icon ? jsx(Icon, {
+      label: "",
+      primaryColor: getPrimaryColor({
+        isDisabled: isDisabled,
+        isSelected: isSelected,
+        isFocused: isFocused,
+        isActive: isActive
+      }),
+      secondaryColor: getSecondaryColor({
+        isDisabled: isDisabled,
+        isSelected: isSelected,
+        isActive: isActive
+      }),
+      isFacadeDisabled: true
+    }) : null), jsx("div", {
+      css: baseOptionStyles
+    }, children, isVoiceOver && (isSelected || isDisabled) && jsx(VisuallyHidden, null, "".concat(isSelected ? ',selected' : '').concat(isDisabled ? ',dimmed' : ''))))
+  );
+};
 var NewCheckboxIcon = function NewCheckboxIcon(props) {
   return (
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/select",
-	"version": "18.9.6",
+	"version": "18.10.1",
 	"description": "Select allows users to make a single selection or multiple selections from a list of options.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -41,16 +41,16 @@
 		".": "./src/index.tsx"
 	},
 	"dependencies": {
-		"@atlaskit/analytics-next": "^10.2.0",
-		"@atlaskit/ds-lib": "^3.3.0",
-		"@atlaskit/icon": "^23.4.0",
+		"@atlaskit/analytics-next": "^10.3.0",
+		"@atlaskit/ds-lib": "^3.5.0",
+		"@atlaskit/icon": "^23.5.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
-		"@atlaskit/primitives": "^13.3.0",
-		"@atlaskit/react-select": "^1.6.0",
-		"@atlaskit/spinner": "^17.0.0",
-		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tokens": "^3.2.0",
-		"@atlaskit/visually-hidden": "^1.5.0",
+		"@atlaskit/primitives": "^13.4.0",
+		"@atlaskit/react-select": "^1.7.0",
+		"@atlaskit/spinner": "^17.1.0",
+		"@atlaskit/theme": "^14.1.0",
+		"@atlaskit/tokens": "^3.3.0",
+		"@atlaskit/visually-hidden": "^1.6.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"@popperjs/core": "^2.11.8",
@@ -68,18 +68,18 @@
 		"@af/accessibility-testing": "*",
 		"@af/integration-testing": "*",
 		"@af/visual-regression": "*",
-		"@atlaskit/checkbox": "^15.2.0",
-		"@atlaskit/modal-dialog": "^12.19.0",
-		"@atlaskit/radio": "^7.1.0",
+		"@atlaskit/checkbox": "^15.3.0",
+		"@atlaskit/modal-dialog": "^12.20.0",
+		"@atlaskit/radio": "^7.2.0",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/visual-regression": "*",
 		"@atlassian/feature-flags-test-utils": "*",
 		"@emotion/styled": "^11.0.0",
-		"@testing-library/react": "^12.1.5",
+		"@testing-library/react": "^13.4.0",
 		"@testing-library/user-event": "^14.4.3",
 		"ast-types": "^0.13.3",
 		"jscodeshift": "^0.13.0",
-		"react-dom": "^16.8.0",
+		"react-dom": "^18.2.0",
 		"react-select-event": "^5.5.0",
 		"react-value": "^0.2.0",
 		"typescript": "~5.4.2"