@atlaskit/select 17.13.1 → 17.14.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/select
 
+## 17.14.0
+
+### Minor Changes
+
+- [#130406](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/130406)
+  [`9d04736c97bfe`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9d04736c97bfe) -
+  Added feature flag for fixing react18 bug(https://product-fabric.atlassian.net/browse/DSP-19701)
+  for handling menu triggers
+
+## 17.13.2
+
+### Patch Changes
+
+- [#129726](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/129726)
+  [`778c15c1d279a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/778c15c1d279a) -
+  [ux] Removed feature flag `platform.design-system-team.select-new-typography_7m89c` resulting in
+  minor visual changes to typography.
+
 ## 17.13.1
 
 ### Patch Changes

package/dist/cjs/PopupSelect/PopupSelect.js

@@ -30,7 +30,7 @@ var _Select = _interopRequireDefault(require("../Select"));
 var _styles = _interopRequireDefault(require("../styles"));
 var _groupedOptionsAnnouncement = require("../utils/grouped-options-announcement");
 var _components = require("./components");
-var _excluded = ["footer", "label", "maxMenuWidth", "minMenuWidth", "placeholder", "target", "testId"];
+var _excluded = ["footer", "label", "maxMenuWidth", "minMenuWidth", "placeholder", "target", "testId", "onMenuOpen", "onMenuClose"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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; }
@@ -178,7 +178,9 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
      * @param options.controlOverride  - Force the popup to open when it's open state is being controlled
      */
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "open", function (options) {
-      var onOpen = _this.props.onOpen;
+      var _this$props2 = _this.props,
+        onOpen = _this$props2.onOpen,
+        onMenuOpen = _this$props2.onMenuOpen;
       if (!(options !== null && options !== void 0 && options.controlOverride) && _this.isOpenControlled) {
         // Prevent popup opening if it's open state is already being controlled
         return;
@@ -186,6 +188,9 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
       if (onOpen) {
         onOpen();
       }
+      if (onMenuOpen && (0, _platformFeatureFlags.fg)('platform-design-system-dsp-19701-no-node-resolver')) {
+        onMenuOpen();
+      }
       _this.setState({
         isOpen: true
       });
@@ -211,7 +216,9 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
      */
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "close", function (options) {
       var _this$unbindWindowKey, _this2;
-      var onClose = _this.props.onClose;
+      var _this$props3 = _this.props,
+        onClose = _this$props3.onClose,
+        onMenuClose = _this$props3.onMenuClose;
       if (!(options !== null && options !== void 0 && options.controlOverride) && _this.isOpenControlled) {
         // Prevent popup closing if it's open state is already being controlled
         return;
@@ -219,6 +226,9 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
       if (onClose) {
         onClose();
       }
+      if (onMenuClose && (0, _platformFeatureFlags.fg)('platform-design-system-dsp-19701-no-node-resolver')) {
+        onMenuClose();
+      }
       _this.setState({
         isOpen: false
       });
@@ -296,23 +306,29 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
     });
     // if the threshold is exceeded, AND isSearchable is true, then display the search control
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "showSearchControl", function () {
-      var _this$props2 = _this.props,
-        searchThreshold = _this$props2.searchThreshold,
-        isSearchable = _this$props2.isSearchable;
+      var _this$props4 = _this.props,
+        searchThreshold = _this$props4.searchThreshold,
+        isSearchable = _this$props4.isSearchable;
       return isSearchable && _this.getItemCount() > searchThreshold;
     });
     // Renderers
     // ==============================
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderSelect", function () {
-      var _this$props3 = _this.props,
-        footer = _this$props3.footer,
-        label = _this$props3.label,
-        maxMenuWidth = _this$props3.maxMenuWidth,
-        minMenuWidth = _this$props3.minMenuWidth,
-        placeholder = _this$props3.placeholder,
-        target = _this$props3.target,
-        testId = _this$props3.testId,
-        props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
+      var _this$props5 = _this.props,
+        footer = _this$props5.footer,
+        label = _this$props5.label,
+        maxMenuWidth = _this$props5.maxMenuWidth,
+        minMenuWidth = _this$props5.minMenuWidth,
+        placeholder = _this$props5.placeholder,
+        target = _this$props5.target,
+        testId = _this$props5.testId,
+        onMenuOpen = _this$props5.onMenuOpen,
+        onMenuClose = _this$props5.onMenuClose,
+        props = (0, _objectWithoutProperties2.default)(_this$props5, _excluded);
+      var menuHandlers = !(0, _platformFeatureFlags.fg)('platform-design-system-dsp-19701-no-node-resolver') ? {
+        onMenuOpen: onMenuOpen,
+        onMenuClose: onMenuClose
+      } : {};
       var _this$state = _this.state,
         focusLockEnabled = _this$state.focusLockEnabled,
         isOpen = _this$state.isOpen,
@@ -389,42 +405,49 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
         var placement = _ref2.placement,
           ref = _ref2.ref,
           style = _ref2.style;
-        return /*#__PURE__*/_react.default.createElement(_reactNodeResolver.default, {
-          innerRef: _this.resolveMenuRef(ref)
-        }, /*#__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,
-          maxWidth: maxMenuWidth,
-          id: _this.popperWrapperId,
-          testId: testId
-        }, /*#__PURE__*/_react.default.createElement(_reactFocusLock.default, {
-          disabled: !focusLockEnabled,
-          returnFocus: true
-        }, /*#__PURE__*/_react.default.createElement(InternalSelect, (0, _extends2.default)({
-          "aria-label": providedAriaLabel,
-          backspaceRemovesValue: false,
-          controlShouldRenderValue: false,
-          isClearable: false,
-          tabSelectsValue: false,
-          menuIsOpen: true,
-          placeholder: placeholder,
-          ref: _this.getSelectRef
-        }, props, {
-          isSearchable: showSearchControl
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-          ,
-          styles: (0, _reactSelect.mergeStyles)(_this.defaultStyles, props.styles || {}),
-          maxMenuHeight: _this.getMaxHeight(),
-          components: selectComponents,
-          onChange: _this.handleSelectChange,
-          ariaLiveMessages: !showSearchControl ? _objectSpread({
-            // Overwriting ariaLiveMessages builtin onFocus method to announce selected option when popup has been opened
-            onFocus: onReactSelectFocus
-          }, props.ariaLiveMessages) : props.ariaLiveMessages
-        })), footer)));
+        return (
+          /*#__PURE__*/
+          // When the feature flag 'platform-design-system-dsp-19701-no-node-resolver' is enabled,
+          // we directly pass the ref to MenuDialog instead of wrapping it with NodeResolver.
+          _react.default.createElement(ConditionalNodeResolverWrapper, {
+            hasNodeResolver: !(0, _platformFeatureFlags.fg)('platform-design-system-dsp-19701-no-node-resolver'),
+            innerRef: _this.resolveMenuRef(ref)
+          }, /*#__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,
+            maxWidth: maxMenuWidth,
+            id: _this.popperWrapperId,
+            testId: testId,
+            ref: !(0, _platformFeatureFlags.fg)('platform-design-system-dsp-19701-no-node-resolver') ? null : _this.resolveMenuRef(ref)
+          }, /*#__PURE__*/_react.default.createElement(_reactFocusLock.default, {
+            disabled: !focusLockEnabled,
+            returnFocus: true
+          }, /*#__PURE__*/_react.default.createElement(InternalSelect, (0, _extends2.default)({
+            "aria-label": providedAriaLabel,
+            backspaceRemovesValue: false,
+            controlShouldRenderValue: false,
+            isClearable: false,
+            tabSelectsValue: false,
+            menuIsOpen: true,
+            placeholder: placeholder,
+            ref: _this.getSelectRef
+          }, props, menuHandlers, {
+            isSearchable: showSearchControl
+            // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+            ,
+            styles: (0, _reactSelect.mergeStyles)(_this.defaultStyles, props.styles || {}),
+            maxMenuHeight: _this.getMaxHeight(),
+            components: selectComponents,
+            onChange: _this.handleSelectChange,
+            ariaLiveMessages: !showSearchControl ? _objectSpread({
+              // Overwriting ariaLiveMessages builtin onFocus method to announce selected option when popup has been opened
+              onFocus: onReactSelectFocus
+            }, props.ariaLiveMessages) : props.ariaLiveMessages
+          })), footer)))
+        );
       });
       return mergedPopperProps.strategy === 'fixed' ? popper : /*#__PURE__*/(0, _reactDom.createPortal)(popper, portalDestination);
     });
@@ -525,4 +548,25 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
   searchThreshold: 5,
   styles: {},
   options: []
-});
+});
+/**
+ * A wrapper component that conditionally applies a NodeResolver to its children.
+ *
+ * Note: NodeResolver should not be used in React 18 concurrent mode. This component
+ * is intended to be removed once the feature flag  is removed.
+ * @param {boolean} props.hasNodeResolver - Determines whether to apply the NodeResolver.
+ * @param {ReactElement} props.children - The child elements to be wrapped.
+ * @param {(instance: HTMLDivElement) => void} props.innerRef - A ref callback to get the instance of the HTMLDivElement.
+ * @returns {ReactElement} The children wrapped with NodeResolver if hasNodeResolver is true, otherwise just the children.
+ */
+var ConditionalNodeResolverWrapper = function ConditionalNodeResolverWrapper(_ref4) {
+  var hasNodeResolver = _ref4.hasNodeResolver,
+    children = _ref4.children,
+    innerRef = _ref4.innerRef;
+  if (hasNodeResolver) {
+    return /*#__PURE__*/_react.default.createElement(_reactNodeResolver.default, {
+      innerRef: innerRef
+    }, children);
+  }
+  return children;
+};

package/dist/cjs/PopupSelect/components.js

@@ -7,7 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.defaultComponents = exports.MenuDialog = exports.DummyControl = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = require("@emotion/react");
+var _react = require("react");
+var _react2 = require("@emotion/react");
 var _reactSelect = require("react-select");
 var _search = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/search"));
 var _colors = require("@atlaskit/theme/colors");
@@ -23,7 +24,7 @@ var _excluded = ["innerRef", "innerProps"];
 // Styled Components
 // ==============================
 
-var menuDialogStyles = (0, _react.css)({
+var menuDialogStyles = (0, _react2.css)({
   zIndex: _constants.layers.modal(),
   backgroundColor: "var(--ds-surface-overlay, white)",
   borderRadius: "var(--ds-border-radius-100, 4px)",
@@ -35,14 +36,15 @@ var menuDialogStyles = (0, _react.css)({
  * Wrapper for PopupSelect component.
  *
  */
-var MenuDialog = exports.MenuDialog = function MenuDialog(_ref) {
+var MenuDialog = exports.MenuDialog = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var maxWidth = _ref.maxWidth,
     minWidth = _ref.minWidth,
     children = _ref.children,
     id = _ref.id,
     style = _ref.style,
     testId = _ref.testId;
-  return (0, _react.jsx)("div", {
+  return (0, _react2.jsx)("div", {
+    ref: ref,
     css: [menuDialogStyles,
     // There is not a limited amount of values for the widths, so they need
     // to remain dynamic.
@@ -57,35 +59,35 @@ var MenuDialog = exports.MenuDialog = function MenuDialog(_ref) {
     id: id,
     "data-testid": testId && "".concat(testId, "--menu")
   }, children);
-};
+});
 
 // ==============================
 // Custom Components
 // ==============================
 
-var dropdownStyles = (0, _react.css)({
+var dropdownStyles = (0, _react2.css)({
   width: 32,
   marginInlineEnd: "var(--ds-space-025, 2px)",
   textAlign: 'center'
 });
 var DropdownIndicator = function DropdownIndicator() {
-  return (0, _react.jsx)("div", {
+  return (0, _react2.jsx)("div", {
     css: dropdownStyles
-  }, (0, _react.jsx)(_search.default, {
+  }, (0, _react2.jsx)(_search.default, {
     label: "open"
   }));
 };
-var controlStyles = (0, _react.css)({
+var controlStyles = (0, _react2.css)({
   padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-100, 8px)", " ", "var(--ds-space-050, 4px)")
 });
 var Control = function Control(_ref2) {
   var innerRef = _ref2.innerRef,
     innerProps = _ref2.innerProps,
     props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
-  return (0, _react.jsx)("div", {
+  return (0, _react2.jsx)("div", {
     ref: innerRef,
     css: controlStyles
-  }, (0, _react.jsx)(_reactSelect.components.Control, (0, _extends2.default)({}, props, {
+  }, (0, _react2.jsx)(_reactSelect.components.Control, (0, _extends2.default)({}, props, {
     innerProps: innerProps
   })));
 };
@@ -102,14 +104,14 @@ var Control = function Control(_ref2) {
  * - [Usage](https://atlassian.design/components/{packageName}/usage)
  */
 var DummyControl = exports.DummyControl = function DummyControl(props) {
-  return (0, _react.jsx)(_visuallyHidden.default, null, (0, _react.jsx)(_reactSelect.components.Control, props));
+  return (0, _react2.jsx)(_visuallyHidden.default, null, (0, _react2.jsx)(_reactSelect.components.Control, props));
 };
 
 // NOTE `props` intentionally omitted from `Fragment`
 var Menu = function Menu(_ref3) {
   var children = _ref3.children,
     innerProps = _ref3.innerProps;
-  return (0, _react.jsx)("div", innerProps, children);
+  return (0, _react2.jsx)("div", innerProps, children);
 };
 var defaultComponents = exports.defaultComponents = {
   Control: Control,

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

package/dist/cjs/styles.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = baseStyles;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 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; }
@@ -16,11 +15,8 @@ function baseStyles(validationState) {
   return {
     container: function container(css, _ref) {
       var isDisabled = _ref.isDisabled;
-      return _objectSpread(_objectSpread(_objectSpread({}, css), (0, _platformFeatureFlags.fg)('platform.design-system-team.select-new-typography_7m89c') ? {
-        font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
-      } : {
-        fontFamily: "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
-      }), {}, {
+      return _objectSpread(_objectSpread({}, css), {}, {
+        font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
         // react-select disables pointer events when isDisabled is true.
         // We override this and make the inner container turn it off instead.
         pointerEvents: 'all',
@@ -200,8 +196,6 @@ function baseStyles(validationState) {
       var isDisabled = _ref6.isDisabled;
       return _objectSpread(_objectSpread({}, css), {}, {
         color: isDisabled ? "var(--ds-text-disabled, ".concat(_colors.N70, ")") : "var(--ds-text, ".concat(_colors.N800, ")")
-      }, !(0, _platformFeatureFlags.fg)('platform.design-system-team.select-new-typography_7m89c') && {
-        lineHeight: '1rem'
       });
     },
     menu: function menu(css) {
@@ -246,9 +240,8 @@ function baseStyles(validationState) {
     },
     multiValueLabel: function multiValueLabel(css, _ref8) {
       var isDisabled = _ref8.isDisabled;
-      return _objectSpread(_objectSpread(_objectSpread({}, css), (0, _platformFeatureFlags.fg)('platform.design-system-team.select-new-typography_7m89c') && {
-        font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
-      }), {}, {
+      return _objectSpread(_objectSpread({}, css), {}, {
+        font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
         padding: "var(--ds-space-025, 2px)",
         color: isDisabled ? "var(--ds-text-disabled, ".concat(_colors.N70, ")") : 'inherit',
         paddingRight: "var(--ds-space-025, 2px)"
@@ -274,9 +267,8 @@ function baseStyles(validationState) {
       });
     },
     groupHeading: function groupHeading(css) {
-      return _objectSpread(_objectSpread(_objectSpread({}, css), (0, _platformFeatureFlags.fg)('platform.design-system-team.select-new-typography_7m89c') && {
-        font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
-      }), {}, {
+      return _objectSpread(_objectSpread({}, css), {}, {
+        font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
         color: "var(--ds-text-subtle, ".concat(_colors.N200, ")")
       });
     }

package/dist/es2019/PopupSelect/PopupSelect.js

@@ -149,7 +149,8 @@ export default class PopupSelect extends PureComponent {
      */
     _defineProperty(this, "open", options => {
       const {
-        onOpen
+        onOpen,
+        onMenuOpen
       } = this.props;
       if (!(options !== null && options !== void 0 && options.controlOverride) && this.isOpenControlled) {
         // Prevent popup opening if it's open state is already being controlled
@@ -158,6 +159,9 @@ export default class PopupSelect extends PureComponent {
       if (onOpen) {
         onOpen();
       }
+      if (onMenuOpen && fg('platform-design-system-dsp-19701-no-node-resolver')) {
+        onMenuOpen();
+      }
       this.setState({
         isOpen: true
       });
@@ -184,7 +188,8 @@ export default class PopupSelect extends PureComponent {
     _defineProperty(this, "close", options => {
       var _this$unbindWindowKey;
       const {
-        onClose
+        onClose,
+        onMenuClose
       } = this.props;
       if (!(options !== null && options !== void 0 && options.controlOverride) && this.isOpenControlled) {
         // Prevent popup closing if it's open state is already being controlled
@@ -193,6 +198,9 @@ export default class PopupSelect extends PureComponent {
       if (onClose) {
         onClose();
       }
+      if (onMenuClose && fg('platform-design-system-dsp-19701-no-node-resolver')) {
+        onMenuClose();
+      }
       this.setState({
         isOpen: false
       });
@@ -285,8 +293,14 @@ export default class PopupSelect extends PureComponent {
         placeholder,
         target,
         testId,
+        onMenuOpen,
+        onMenuClose,
         ...props
       } = this.props;
+      const menuHandlers = !fg('platform-design-system-dsp-19701-no-node-resolver') ? {
+        onMenuOpen,
+        onMenuClose
+      } : {};
       const {
         focusLockEnabled,
         isOpen,
@@ -368,7 +382,12 @@ export default class PopupSelect extends PureComponent {
         placement,
         ref,
         style
-      }) => /*#__PURE__*/React.createElement(NodeResolver, {
+      }) =>
+      /*#__PURE__*/
+      // When the feature flag 'platform-design-system-dsp-19701-no-node-resolver' is enabled,
+      // we directly pass the ref to MenuDialog instead of wrapping it with NodeResolver.
+      React.createElement(ConditionalNodeResolverWrapper, {
+        hasNodeResolver: !fg('platform-design-system-dsp-19701-no-node-resolver'),
         innerRef: this.resolveMenuRef(ref)
       }, /*#__PURE__*/React.createElement(MenuDialog
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
@@ -378,7 +397,8 @@ export default class PopupSelect extends PureComponent {
         minWidth: minMenuWidth,
         maxWidth: maxMenuWidth,
         id: this.popperWrapperId,
-        testId: testId
+        testId: testId,
+        ref: !fg('platform-design-system-dsp-19701-no-node-resolver') ? null : this.resolveMenuRef(ref)
       }, /*#__PURE__*/React.createElement(FocusLock, {
         disabled: !focusLockEnabled,
         returnFocus: true
@@ -391,7 +411,7 @@ export default class PopupSelect extends PureComponent {
         menuIsOpen: true,
         placeholder: placeholder,
         ref: this.getSelectRef
-      }, props, {
+      }, props, menuHandlers, {
         isSearchable: showSearchControl
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
         ,
@@ -501,4 +521,26 @@ _defineProperty(PopupSelect, "defaultProps", {
   searchThreshold: 5,
   styles: {},
   options: []
-});
+});
+/**
+ * A wrapper component that conditionally applies a NodeResolver to its children.
+ *
+ * Note: NodeResolver should not be used in React 18 concurrent mode. This component
+ * is intended to be removed once the feature flag  is removed.
+ * @param {boolean} props.hasNodeResolver - Determines whether to apply the NodeResolver.
+ * @param {ReactElement} props.children - The child elements to be wrapped.
+ * @param {(instance: HTMLDivElement) => void} props.innerRef - A ref callback to get the instance of the HTMLDivElement.
+ * @returns {ReactElement} The children wrapped with NodeResolver if hasNodeResolver is true, otherwise just the children.
+ */
+const ConditionalNodeResolverWrapper = ({
+  hasNodeResolver,
+  children,
+  innerRef
+}) => {
+  if (hasNodeResolver) {
+    return /*#__PURE__*/React.createElement(NodeResolver, {
+      innerRef: innerRef
+    }, children);
+  }
+  return children;
+};

package/dist/es2019/PopupSelect/components.js

@@ -3,6 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
  * @jsxRuntime classic
  * @jsx jsx
  */
+import { forwardRef } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
@@ -28,14 +29,15 @@ const menuDialogStyles = css({
  * Wrapper for PopupSelect component.
  *
  */
-export const MenuDialog = ({
+export const MenuDialog = /*#__PURE__*/forwardRef(({
   maxWidth,
   minWidth,
   children,
   id,
   style,
   testId
-}) => jsx("div", {
+}, ref) => jsx("div", {
+  ref: ref,
   css: [menuDialogStyles,
   // There is not a limited amount of values for the widths, so they need
   // to remain dynamic.
@@ -49,7 +51,7 @@ export const MenuDialog = ({
   style: style,
   id: id,
   "data-testid": testId && `${testId}--menu`
-}, children);
+}, children));
 
 // ==============================
 // Custom Components

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

package/dist/es2019/styles.js

@@ -1,4 +1,3 @@
-import { fg } from '@atlaskit/platform-feature-flags';
 import { B100, B400, B50, G400, N0, N100, N20, N200, N30, N300, N40, N500, N70, N800, R400, R75 } from '@atlaskit/theme/colors';
 export default function baseStyles(validationState, isCompact = false, appearance) {
   return {
@@ -6,11 +5,7 @@ export default function baseStyles(validationState, isCompact = false, appearanc
       isDisabled
     }) => ({
       ...css,
-      ...(fg('platform.design-system-team.select-new-typography_7m89c') ? {
-        font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
-      } : {
-        fontFamily: "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
-      }),
+      font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
       // react-select disables pointer events when isDisabled is true.
       // We override this and make the inner container turn it off instead.
       pointerEvents: 'all',
@@ -191,10 +186,7 @@ export default function baseStyles(validationState, isCompact = false, appearanc
       isDisabled
     }) => ({
       ...css,
-      color: isDisabled ? `var(--ds-text-disabled, ${N70})` : `var(--ds-text, ${N800})`,
-      ...(!fg('platform.design-system-team.select-new-typography_7m89c') && {
-        lineHeight: '1rem'
-      })
+      color: isDisabled ? `var(--ds-text-disabled, ${N70})` : `var(--ds-text, ${N800})`
     }),
     menu: css => ({
       ...css,
@@ -240,9 +232,7 @@ export default function baseStyles(validationState, isCompact = false, appearanc
       isDisabled
     }) => ({
       ...css,
-      ...(fg('platform.design-system-team.select-new-typography_7m89c') && {
-        font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
-      }),
+      font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
       padding: "var(--ds-space-025, 2px)",
       color: isDisabled ? `var(--ds-text-disabled, ${N70})` : 'inherit',
       paddingRight: "var(--ds-space-025, 2px)"
@@ -268,9 +258,7 @@ export default function baseStyles(validationState, isCompact = false, appearanc
     }),
     groupHeading: css => ({
       ...css,
-      ...(fg('platform.design-system-team.select-new-typography_7m89c') && {
-        font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
-      }),
+      font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
       color: `var(--ds-text-subtle, ${N200})`
     })
   };

package/dist/esm/PopupSelect/PopupSelect.js

@@ -7,7 +7,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["footer", "label", "maxMenuWidth", "minMenuWidth", "placeholder", "target", "testId"];
+var _excluded = ["footer", "label", "maxMenuWidth", "minMenuWidth", "placeholder", "target", "testId", "onMenuOpen", "onMenuClose"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
@@ -168,7 +168,9 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
      * @param options.controlOverride  - Force the popup to open when it's open state is being controlled
      */
     _defineProperty(_assertThisInitialized(_this), "open", function (options) {
-      var onOpen = _this.props.onOpen;
+      var _this$props2 = _this.props,
+        onOpen = _this$props2.onOpen,
+        onMenuOpen = _this$props2.onMenuOpen;
       if (!(options !== null && options !== void 0 && options.controlOverride) && _this.isOpenControlled) {
         // Prevent popup opening if it's open state is already being controlled
         return;
@@ -176,6 +178,9 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
       if (onOpen) {
         onOpen();
       }
+      if (onMenuOpen && fg('platform-design-system-dsp-19701-no-node-resolver')) {
+        onMenuOpen();
+      }
       _this.setState({
         isOpen: true
       });
@@ -201,7 +206,9 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
      */
     _defineProperty(_assertThisInitialized(_this), "close", function (options) {
       var _this$unbindWindowKey, _this2;
-      var onClose = _this.props.onClose;
+      var _this$props3 = _this.props,
+        onClose = _this$props3.onClose,
+        onMenuClose = _this$props3.onMenuClose;
       if (!(options !== null && options !== void 0 && options.controlOverride) && _this.isOpenControlled) {
         // Prevent popup closing if it's open state is already being controlled
         return;
@@ -209,6 +216,9 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
       if (onClose) {
         onClose();
       }
+      if (onMenuClose && fg('platform-design-system-dsp-19701-no-node-resolver')) {
+        onMenuClose();
+      }
       _this.setState({
         isOpen: false
       });
@@ -286,23 +296,29 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
     });
     // if the threshold is exceeded, AND isSearchable is true, then display the search control
     _defineProperty(_assertThisInitialized(_this), "showSearchControl", function () {
-      var _this$props2 = _this.props,
-        searchThreshold = _this$props2.searchThreshold,
-        isSearchable = _this$props2.isSearchable;
+      var _this$props4 = _this.props,
+        searchThreshold = _this$props4.searchThreshold,
+        isSearchable = _this$props4.isSearchable;
       return isSearchable && _this.getItemCount() > searchThreshold;
     });
     // Renderers
     // ==============================
     _defineProperty(_assertThisInitialized(_this), "renderSelect", function () {
-      var _this$props3 = _this.props,
-        footer = _this$props3.footer,
-        label = _this$props3.label,
-        maxMenuWidth = _this$props3.maxMenuWidth,
-        minMenuWidth = _this$props3.minMenuWidth,
-        placeholder = _this$props3.placeholder,
-        target = _this$props3.target,
-        testId = _this$props3.testId,
-        props = _objectWithoutProperties(_this$props3, _excluded);
+      var _this$props5 = _this.props,
+        footer = _this$props5.footer,
+        label = _this$props5.label,
+        maxMenuWidth = _this$props5.maxMenuWidth,
+        minMenuWidth = _this$props5.minMenuWidth,
+        placeholder = _this$props5.placeholder,
+        target = _this$props5.target,
+        testId = _this$props5.testId,
+        onMenuOpen = _this$props5.onMenuOpen,
+        onMenuClose = _this$props5.onMenuClose,
+        props = _objectWithoutProperties(_this$props5, _excluded);
+      var menuHandlers = !fg('platform-design-system-dsp-19701-no-node-resolver') ? {
+        onMenuOpen: onMenuOpen,
+        onMenuClose: onMenuClose
+      } : {};
       var _this$state = _this.state,
         focusLockEnabled = _this$state.focusLockEnabled,
         isOpen = _this$state.isOpen,
@@ -379,42 +395,49 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         var placement = _ref2.placement,
           ref = _ref2.ref,
           style = _ref2.style;
-        return /*#__PURE__*/React.createElement(NodeResolver, {
-          innerRef: _this.resolveMenuRef(ref)
-        }, /*#__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,
-          maxWidth: maxMenuWidth,
-          id: _this.popperWrapperId,
-          testId: testId
-        }, /*#__PURE__*/React.createElement(FocusLock, {
-          disabled: !focusLockEnabled,
-          returnFocus: true
-        }, /*#__PURE__*/React.createElement(InternalSelect, _extends({
-          "aria-label": providedAriaLabel,
-          backspaceRemovesValue: false,
-          controlShouldRenderValue: false,
-          isClearable: false,
-          tabSelectsValue: false,
-          menuIsOpen: true,
-          placeholder: placeholder,
-          ref: _this.getSelectRef
-        }, props, {
-          isSearchable: showSearchControl
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-          ,
-          styles: mergeStyles(_this.defaultStyles, props.styles || {}),
-          maxMenuHeight: _this.getMaxHeight(),
-          components: selectComponents,
-          onChange: _this.handleSelectChange,
-          ariaLiveMessages: !showSearchControl ? _objectSpread({
-            // Overwriting ariaLiveMessages builtin onFocus method to announce selected option when popup has been opened
-            onFocus: onReactSelectFocus
-          }, props.ariaLiveMessages) : props.ariaLiveMessages
-        })), footer)));
+        return (
+          /*#__PURE__*/
+          // When the feature flag 'platform-design-system-dsp-19701-no-node-resolver' is enabled,
+          // we directly pass the ref to MenuDialog instead of wrapping it with NodeResolver.
+          React.createElement(ConditionalNodeResolverWrapper, {
+            hasNodeResolver: !fg('platform-design-system-dsp-19701-no-node-resolver'),
+            innerRef: _this.resolveMenuRef(ref)
+          }, /*#__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,
+            maxWidth: maxMenuWidth,
+            id: _this.popperWrapperId,
+            testId: testId,
+            ref: !fg('platform-design-system-dsp-19701-no-node-resolver') ? null : _this.resolveMenuRef(ref)
+          }, /*#__PURE__*/React.createElement(FocusLock, {
+            disabled: !focusLockEnabled,
+            returnFocus: true
+          }, /*#__PURE__*/React.createElement(InternalSelect, _extends({
+            "aria-label": providedAriaLabel,
+            backspaceRemovesValue: false,
+            controlShouldRenderValue: false,
+            isClearable: false,
+            tabSelectsValue: false,
+            menuIsOpen: true,
+            placeholder: placeholder,
+            ref: _this.getSelectRef
+          }, props, menuHandlers, {
+            isSearchable: showSearchControl
+            // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+            ,
+            styles: mergeStyles(_this.defaultStyles, props.styles || {}),
+            maxMenuHeight: _this.getMaxHeight(),
+            components: selectComponents,
+            onChange: _this.handleSelectChange,
+            ariaLiveMessages: !showSearchControl ? _objectSpread({
+              // Overwriting ariaLiveMessages builtin onFocus method to announce selected option when popup has been opened
+              onFocus: onReactSelectFocus
+            }, props.ariaLiveMessages) : props.ariaLiveMessages
+          })), footer)))
+        );
       });
       return mergedPopperProps.strategy === 'fixed' ? popper : /*#__PURE__*/createPortal(popper, portalDestination);
     });
@@ -516,4 +539,25 @@ _defineProperty(PopupSelect, "defaultProps", {
   styles: {},
   options: []
 });
-export { PopupSelect as default };
+export { PopupSelect as default };
+/**
+ * A wrapper component that conditionally applies a NodeResolver to its children.
+ *
+ * Note: NodeResolver should not be used in React 18 concurrent mode. This component
+ * is intended to be removed once the feature flag  is removed.
+ * @param {boolean} props.hasNodeResolver - Determines whether to apply the NodeResolver.
+ * @param {ReactElement} props.children - The child elements to be wrapped.
+ * @param {(instance: HTMLDivElement) => void} props.innerRef - A ref callback to get the instance of the HTMLDivElement.
+ * @returns {ReactElement} The children wrapped with NodeResolver if hasNodeResolver is true, otherwise just the children.
+ */
+var ConditionalNodeResolverWrapper = function ConditionalNodeResolverWrapper(_ref4) {
+  var hasNodeResolver = _ref4.hasNodeResolver,
+    children = _ref4.children,
+    innerRef = _ref4.innerRef;
+  if (hasNodeResolver) {
+    return /*#__PURE__*/React.createElement(NodeResolver, {
+      innerRef: innerRef
+    }, children);
+  }
+  return children;
+};

package/dist/esm/PopupSelect/components.js

@@ -5,6 +5,7 @@ var _excluded = ["innerRef", "innerProps"];
  * @jsxRuntime classic
  * @jsx jsx
  */
+import { forwardRef } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
@@ -30,7 +31,7 @@ var menuDialogStyles = css({
  * Wrapper for PopupSelect component.
  *
  */
-export var MenuDialog = function MenuDialog(_ref) {
+export var MenuDialog = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var maxWidth = _ref.maxWidth,
     minWidth = _ref.minWidth,
     children = _ref.children,
@@ -38,6 +39,7 @@ export var MenuDialog = function MenuDialog(_ref) {
     style = _ref.style,
     testId = _ref.testId;
   return jsx("div", {
+    ref: ref,
     css: [menuDialogStyles,
     // There is not a limited amount of values for the widths, so they need
     // to remain dynamic.
@@ -52,7 +54,7 @@ export var MenuDialog = function MenuDialog(_ref) {
     id: id,
     "data-testid": testId && "".concat(testId, "--menu")
   }, children);
-};
+});
 
 // ==============================
 // Custom Components

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

package/dist/esm/styles.js

@@ -1,7 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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; }
-import { fg } from '@atlaskit/platform-feature-flags';
 import { B100, B400, B50, G400, N0, N100, N20, N200, N30, N300, N40, N500, N70, N800, R400, R75 } from '@atlaskit/theme/colors';
 export default function baseStyles(validationState) {
   var isCompact = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
@@ -9,11 +8,8 @@ export default function baseStyles(validationState) {
   return {
     container: function container(css, _ref) {
       var isDisabled = _ref.isDisabled;
-      return _objectSpread(_objectSpread(_objectSpread({}, css), fg('platform.design-system-team.select-new-typography_7m89c') ? {
-        font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
-      } : {
-        fontFamily: "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
-      }), {}, {
+      return _objectSpread(_objectSpread({}, css), {}, {
+        font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
         // react-select disables pointer events when isDisabled is true.
         // We override this and make the inner container turn it off instead.
         pointerEvents: 'all',
@@ -193,8 +189,6 @@ export default function baseStyles(validationState) {
       var isDisabled = _ref6.isDisabled;
       return _objectSpread(_objectSpread({}, css), {}, {
         color: isDisabled ? "var(--ds-text-disabled, ".concat(N70, ")") : "var(--ds-text, ".concat(N800, ")")
-      }, !fg('platform.design-system-team.select-new-typography_7m89c') && {
-        lineHeight: '1rem'
       });
     },
     menu: function menu(css) {
@@ -239,9 +233,8 @@ export default function baseStyles(validationState) {
     },
     multiValueLabel: function multiValueLabel(css, _ref8) {
       var isDisabled = _ref8.isDisabled;
-      return _objectSpread(_objectSpread(_objectSpread({}, css), fg('platform.design-system-team.select-new-typography_7m89c') && {
-        font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
-      }), {}, {
+      return _objectSpread(_objectSpread({}, css), {}, {
+        font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
         padding: "var(--ds-space-025, 2px)",
         color: isDisabled ? "var(--ds-text-disabled, ".concat(N70, ")") : 'inherit',
         paddingRight: "var(--ds-space-025, 2px)"
@@ -267,9 +260,8 @@ export default function baseStyles(validationState) {
       });
     },
     groupHeading: function groupHeading(css) {
-      return _objectSpread(_objectSpread(_objectSpread({}, css), fg('platform.design-system-team.select-new-typography_7m89c') && {
-        font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
-      }), {}, {
+      return _objectSpread(_objectSpread({}, css), {}, {
+        font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
         color: "var(--ds-text-subtle, ".concat(N200, ")")
       });
     }

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

@@ -150,7 +150,7 @@ export default class PopupSelect<Option = OptionType, IsMulti extends boolean =
         controlOverride?: boolean;
     }) => void;
     resolveTargetRef: (popperRef: React.Ref<HTMLElement>) => (ref: HTMLElement) => void;
-    resolveMenuRef: (popperRef: React.Ref<HTMLElement>) => (ref: HTMLElement) => void;
+    resolveMenuRef: (popperRef: React.Ref<HTMLElement>) => (ref: HTMLDivElement) => void;
     getSelectRef: (ref: AtlaskitSelectRefType) => void;
     getItemCount: () => number;
     getMaxHeight: () => number | undefined;

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

@@ -18,7 +18,7 @@ interface MenuDialogProps {
  * Wrapper for PopupSelect component.
  *
  */
-export declare const MenuDialog: FC<MenuDialogProps>;
+export declare const MenuDialog: import("react").ForwardRefExoticComponent<MenuDialogProps & import("react").RefAttributes<HTMLDivElement>>;
 /**
  * __Dummy control__
  *

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

@@ -150,7 +150,7 @@ export default class PopupSelect<Option = OptionType, IsMulti extends boolean =
         controlOverride?: boolean;
     }) => void;
     resolveTargetRef: (popperRef: React.Ref<HTMLElement>) => (ref: HTMLElement) => void;
-    resolveMenuRef: (popperRef: React.Ref<HTMLElement>) => (ref: HTMLElement) => void;
+    resolveMenuRef: (popperRef: React.Ref<HTMLElement>) => (ref: HTMLDivElement) => void;
     getSelectRef: (ref: AtlaskitSelectRefType) => void;
     getItemCount: () => number;
     getMaxHeight: () => number | undefined;

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

@@ -18,7 +18,7 @@ interface MenuDialogProps {
  * Wrapper for PopupSelect component.
  *
  */
-export declare const MenuDialog: FC<MenuDialogProps>;
+export declare const MenuDialog: import("react").ForwardRefExoticComponent<MenuDialogProps & import("react").RefAttributes<HTMLDivElement>>;
 /**
  * __Dummy control__
  *

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/select",
-	"version": "17.13.1",
+	"version": "17.14.0",
 	"description": "Select allows users to make a single selection or multiple selections from a list of options.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -32,7 +32,7 @@
 			"name": "Select",
 			"category": "Components"
 		},
-		"runReact18": true
+		"runReact18": false
 	},
 	"af:exports": {
 		"./AsyncSelect": "./src/entry-points/async-select.tsx",
@@ -43,7 +43,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/analytics-next": "^10.1.0",
-		"@atlaskit/icon": "^22.12.0",
+		"@atlaskit/icon": "^22.13.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/primitives": "^12.0.0",
 		"@atlaskit/spinner": "^16.3.0",
@@ -107,7 +107,7 @@
 		"platform.design-system-team.use-default-select-in-popup-select_46rmj": {
 			"type": "boolean"
 		},
-		"platform.design-system-team.select-new-typography_7m89c": {
+		"platform-design-system-dsp-19701-no-node-resolver": {
 			"type": "boolean"
 		}
 	},